/*
Theme Name: From Scratch
Description: ثيم From Scratch لبرنامج إدارة العيادات والمجمعات الطبية (SaaS). يعمل مع بلجن From Scratch Core.
Version: 0.2.0
Requires at least: 6.1
Requires PHP: 7.4
Text Domain: from-scratch-theme
*/
:root{--bg:#00342f;--mint:#38f8b4;--pill:#085041;--line:#0e6550;--soft:#c9f5e6;--ink:#0b2b27;--paper:#f4fbf8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"IBM Plex Sans Arabic","Cairo","Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);line-height:1.8;font-size:17px}
a{color:inherit}img{max-width:100%;height:auto}
.container{width:min(1140px,92%);margin-inline:auto}
.site-header{background:var(--bg);position:sticky;top:0;z-index:50}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:800;font-size:20px}
.mark{width:40px;height:40px;border-radius:11px;background:var(--mint);color:var(--bg);display:grid;place-items:center;font-size:20px;font-weight:800}
.nav{display:flex;align-items:center;gap:18px}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--soft)}
.btn{display:inline-block;background:var(--mint);color:var(--bg)!important;border-radius:12px;padding:10px 22px;font-weight:800;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:16px}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:#fff!important}
.btn.lg{padding:14px 30px;font-size:18px}

.hero{background:var(--bg);color:#fff;position:relative;overflow:hidden;padding:90px 0 120px}
.hero .container{position:relative;z-index:2}
.pill{display:inline-block;background:var(--pill);color:var(--mint);border-radius:999px;padding:6px 18px;font-weight:700;font-size:15px}
.hero h1{font-size:clamp(34px,6vw,64px);line-height:1.25;margin:18px 0;font-weight:800}
.hero p{color:var(--soft);font-size:19px;max-width:640px;margin:0}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ring{position:absolute;border:2px solid var(--line);border-radius:50%;z-index:1}
.r1{width:560px;height:560px;left:-220px;bottom:-260px}
.r2{width:360px;height:360px;left:-120px;bottom:-160px}
.dot{position:absolute;width:64px;height:64px;border-radius:50%;background:var(--mint);left:60px;bottom:30px;z-index:1}

.sec{padding:80px 0}.sec.alt{background:#fff}
.sec h2{font-size:clamp(26px,4vw,38px);margin:0 0 8px;font-weight:800;color:var(--bg)}
.sec .lead{color:#406660;margin:0 0 36px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:#fff;border:1px solid #d6e9e2;border-radius:18px;padding:24px}
.alt .card{background:var(--paper)}
.card .ic{width:48px;height:48px;border-radius:13px;background:var(--bg);display:grid;place-items:center;font-size:22px;margin-bottom:12px}
.card h3{margin:0 0 6px;font-size:20px;color:var(--bg)}.card p{margin:0;color:#406660;font-size:16px}
.step b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--mint);color:var(--bg);font-size:20px;margin-bottom:10px}
.grid.plans{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.plan{text-align:center}.plan .n{font-size:40px;font-weight:800;color:var(--bg);line-height:1.2}
.plan.hot{background:var(--bg);color:#fff;border-color:var(--bg)}.plan.hot h3{color:var(--mint)}.plan.hot p{color:var(--soft)}.plan.hot .n{color:#fff}
.band{background:var(--bg);color:#fff;text-align:center;padding:70px 0;position:relative;overflow:hidden}
.band h2{color:#fff;margin:0 0 10px}.band p{color:var(--soft);margin:0 auto 24px;max-width:560px}

.page-wrap{padding:60px 0;min-height:50vh}
.page-wrap h1{color:var(--bg);font-size:34px}
.entry{background:#fff;border:1px solid #d6e9e2;border-radius:18px;padding:28px;margin-bottom:18px}
.entry h2 a{text-decoration:none}

.login-box{max-width:420px;margin:0 auto;background:#fff;border:1px solid #d6e9e2;border-radius:18px;padding:28px}
.login-box label{font-weight:700;display:block;margin-bottom:4px}
.login-box input[type=text],.login-box input[type=password]{width:100%;padding:10px 12px;border:1px solid #bcd8cf;border-radius:10px;font-family:inherit;font-size:16px;margin-bottom:14px}
.login-box .login-submit input{background:var(--mint);color:var(--bg);border:0;border-radius:12px;padding:11px 26px;font-weight:800;cursor:pointer;font-family:inherit;font-size:16px;width:100%}

.dash-head{background:var(--bg);color:#fff;border-radius:18px;padding:24px 28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.dash-head h1{color:#fff;margin:0;font-size:26px}.dash-head small{color:var(--soft)}
.badge{display:inline-block;border-radius:999px;padding:4px 14px;font-size:13px;font-weight:800;background:var(--mint);color:var(--bg)}
.badge.bad{background:#ffd0d0;color:#7a1010}
.soon{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;background:var(--pill);color:var(--mint);border-radius:999px;padding:2px 12px}

.site-footer{background:var(--bg);color:var(--soft);padding:34px 0;text-align:center;font-size:15px}
@media(max-width:700px){.nav ul{display:none}.hero{padding:60px 0 100px}.dot{left:24px}}

.form-box{max-width:760px;margin:0 auto;background:#fff;border:1px solid #d6e9e2;border-radius:18px;padding:28px;position:relative}
.form-box h1{margin-top:0}
.f label{display:block;font-weight:700;margin-bottom:4px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.f input[type=text],.f input[type=email],.f select,.f textarea{width:100%;padding:10px 12px;border:1px solid #bcd8cf;border-radius:10px;font-family:inherit;font-size:16px;background:#fff}
.alert{border-radius:12px;padding:10px 14px;margin:0 0 14px;font-weight:700}
.alert.bad{background:#ffd9d9;color:#7a1010}
.wa-float{position:fixed;bottom:20px;left:20px;z-index:60;background:var(--mint);color:var(--bg);font-weight:800;text-decoration:none;border-radius:999px;padding:12px 20px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.site-footer a{color:var(--mint);text-decoration:none}
