/* ══════════════════════════════════════════════════════════════════════════
   vschool — نظام التصميم (مستلهَم من EduVibe، معرَّب بالكامل RTL)
   اللون:   أزرق ملكي #2F57EF + برتقالي #F0A02D + أرضيات بنفسجية فاتحة
   الخطوط:  Reem Kufi (عناوين) + Tajawal (نص) + Amiri (الآية)
   البنية:  عنوان صغير ملوّن ← عنوان ثقيل ← بطاقات بيضاء على أرضية ملوّنة
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. الرموز ──────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --blue-800:#16277A; --blue-700:#1E3AA8; --blue-600:#2F57EF;
  --blue-500:#4A6CF7; --blue-200:#B9C6FB; --blue-100:#E2E8FF; --blue-50:#F0F3FF;

  --orange-700:#B85F00; --orange-600:#E07C0E; --orange-500:#F0A02D;
  --orange-200:#FAD8A6; --orange-100:#FDEDD7; --orange-50:#FEF7EC;

  --violet-50:#F2F1FE;  --peach-50:#FDF4EE;  --mint-50:#EAF7F2;
  --green-600:#1CA672;  --green-100:#DFF3EA;
  --red-600:#D8382B;    --red-50:#FDECEA;
  --star:#F5A623;

  --ink:#161439;        --ink-2:#2E2C55;
  --body:#5F5C7D;       --muted:#8B88A8;
  --line:#E8E7F3;       --line-2:#F1F0F9;
  --white:#FFFFFF;      --ground:#FFFFFF;
  --dark:#1B1B3A;       --dark-2:#262450;
  --on-dark:#FFFFFF;    --on-dark-soft:#B4B2CE;

  /* الخطوط — البصمة البصرية: كوفي للعناوين، تجوّال للنص، أميري للآية */
  --font-display:"Reem Kufi",Tajawal,system-ui,sans-serif;
  --font-body:Tajawal,"Segoe UI",system-ui,-apple-system,sans-serif;
  --font-quran:Amiri,"Times New Roman",serif;

  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --pill:100px;

  --sh-1:0 2px 8px rgba(22,20,57,.05);
  --sh-2:0 8px 24px rgba(22,20,57,.07);
  --sh-3:0 20px 48px -12px rgba(22,20,57,.14);
  --sh-blue:0 12px 28px -8px rgba(47,87,239,.42);
  --sh-orange:0 12px 28px -8px rgba(240,160,45,.42);

  --ease:cubic-bezier(.22,1,.36,1);
  --fast:180ms; --mid:300ms; --slow:520ms;

  --shell:1240px;
  --head-h:78px;
}

/* ── 2. الأساسيات ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{direction:rtl; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 20px); -webkit-text-size-adjust:100%}

body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:var(--font-body);
  font-size:16.5px; line-height:1.9; font-weight:400;
  text-align:right; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:700; color:var(--ink); line-height:1.4; text-wrap:balance; letter-spacing:0}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
img,svg{max-width:100%}
a{color:var(--blue-600); text-underline-offset:3px}
button{font:inherit; color:inherit}
strong,b{font-weight:700; color:var(--ink-2)}

:focus-visible{outline:3px solid var(--blue-500); outline-offset:3px; border-radius:var(--r-sm)}
::selection{background:var(--blue-100); color:var(--blue-800)}

.icon{flex:none; display:block}
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(20px,5vw,44px)}

.skip{position:absolute; right:-9999px; top:12px; z-index:200; background:var(--blue-600); color:#fff; padding:13px 24px; border-radius:var(--r); font-weight:700}
.skip:focus{right:16px}

/* ── 3. الطباعة ─────────────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:.05em; color:var(--orange-600); margin-bottom:14px;
}
.eyebrow::before{content:""; width:26px; height:3px; border-radius:2px; background:var(--orange-500)}
.eyebrow.blue{color:var(--blue-600)}
.eyebrow.blue::before{background:var(--blue-600)}
.eyebrow.center{justify-content:center}

.h-xl{font-size:clamp(38px,5.6vw,62px); line-height:1.25}
.h-lg{font-size:clamp(28px,4vw,44px); line-height:1.32}
.h-md{font-size:clamp(22px,2.6vw,30px)}
.h-sm{font-size:20px}

.lede{font-size:clamp(16.5px,1.7vw,18px); line-height:1.95; color:var(--body); max-width:58ch}
.muted{color:var(--muted)}
.center{text-align:center; margin-inline:auto}
.num{font-variant-numeric:tabular-nums}

/* ── 4. الأزرار ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:15px 32px; border-radius:var(--r);
  font-family:var(--font-body); font-size:16.5px; font-weight:700;
  text-decoration:none; border:2px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
             background var(--fast), border-color var(--fast), color var(--fast);
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn .icon{transition:transform var(--fast) var(--ease)}
.btn:hover .icon{transform:translateX(-4px)}

.btn-primary{background:var(--blue-600); color:#fff; box-shadow:var(--sh-blue)}
.btn-primary:hover{background:var(--blue-500); box-shadow:0 16px 34px -8px rgba(47,87,239,.55)}

.btn-orange{background:var(--orange-500); color:#fff; box-shadow:var(--sh-orange)}
.btn-orange:hover{background:var(--orange-600); box-shadow:0 16px 34px -8px rgba(240,160,45,.55)}

.btn-outline{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-outline:hover{border-color:var(--blue-600); color:var(--blue-600)}

.btn-light{background:#fff; color:var(--blue-600); box-shadow:var(--sh-2)}
.btn-light:hover{color:var(--blue-700)}

.btn-ghost-dark{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.34)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.2); border-color:#fff}

.btn-sm{min-height:44px; padding:10px 22px; font-size:15px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55; pointer-events:none}

/* ── 5. الترويسة ────────────────────────────────────────────────────────── */
.site-head{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid transparent; transition:box-shadow var(--mid), border-color var(--mid)}
.site-head.stuck{box-shadow:var(--sh-1); border-bottom-color:var(--line-2)}
.site-head .shell{display:flex; align-items:center; gap:clamp(16px,3vw,44px); min-height:var(--head-h)}

.brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
/* المشكاة: القوس يرث اللون من .brand، والمصباح ذهبي ثابت داخل الـ SVG. */
.brand-mark{display:grid; place-items:center; width:42px; height:42px; color:var(--blue-800)}
.brand-mark .logo{width:100%; height:100%}
.site-foot .brand-mark,
.admin-top .brand-mark{color:#fff}

/* الاسم عربي — لا تضغط التتبّع، الخط العربي موصول. */
.brand-text{font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:0}

.site-nav{display:flex; gap:clamp(14px,2.2vw,34px); margin-inline-end:auto}
.site-nav a{
  color:var(--ink-2); text-decoration:none; font-family:var(--font-body);
  font-size:16px; font-weight:600; padding:9px 2px; position:relative;
  transition:color var(--fast);
}
.site-nav a::after{content:""; position:absolute; inset-inline:0; bottom:3px; height:2.5px; border-radius:2px; background:var(--blue-600); transform:scaleX(0); transform-origin:right; transition:transform var(--mid) var(--ease)}
.site-nav a:hover{color:var(--blue-600)}
.site-nav a:hover::after{transform:scaleX(1)}

.head-cta{display:flex; align-items:center; gap:10px}

.nav-toggle{display:none; width:48px; height:48px; border:1.5px solid var(--line); border-radius:var(--r); background:#fff; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.nav-toggle span{display:block; width:21px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform var(--mid) var(--ease), opacity var(--fast)}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobile-nav{display:none; flex-direction:column; gap:4px; padding:16px clamp(20px,5vw,44px) 28px; border-top:1px solid var(--line); background:#fff}
.mobile-nav a:not(.btn){padding:15px 4px; color:var(--ink); text-decoration:none; font-family:var(--font-body); font-weight:600; border-bottom:1px solid var(--line-2)}
.mobile-nav .btn{margin-top:12px}

@media (max-width:1040px){
  .site-nav,.head-cta{display:none}
  .nav-toggle{display:flex}
  .brand{margin-inline-end:auto}
  .mobile-nav[hidden]{display:none}
  .mobile-nav:not([hidden]){display:flex}
}

/* ── 6. زخارف ───────────────────────────────────────────────────────────── */
.deco{position:absolute; pointer-events:none; user-select:none; z-index:0}
.deco-dots{color:var(--blue-200); opacity:.7}
.deco-ring{color:var(--orange-200)}
.deco-blob{color:var(--blue-100)}

/* ── 7. الواجهة الرئيسية ────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 12% 10%, var(--peach-50), transparent 62%),
    radial-gradient(900px 560px at 92% 0%, var(--violet-50), transparent 66%),
    linear-gradient(180deg,#FCFBFF,#fff 78%);
  padding:clamp(44px,6vw,84px) 0 clamp(52px,7vw,96px);
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 .mark{position:relative; color:var(--blue-600); display:inline-block}
.hero h1 .mark::after{
  content:""; position:absolute; inset-inline:-4px; bottom:2px; height:14px; z-index:-1;
  background:var(--orange-200); border-radius:4px; opacity:.85;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

/* سطر الطمأنة تحت الأزرار — العرض التسويقي الأول، فلا يُدفن في الصفحة */
.hero-free{
  display:flex; align-items:center; gap:9px; margin-top:18px;
  font-size:15px; font-weight:600; color:var(--green-600);
}
.hero-free svg{flex:none}

.hero-trust{display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:36px; padding-top:28px; border-top:1.5px dashed var(--line)}
.hero-trust li{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--body)}
.hero-trust .icon{color:var(--green-600)}
.hero-trust b{color:var(--ink); font-weight:700}

/* لوحة الواجهة البصرية */
.hero-visual{position:relative}
.hero-stage{
  position:relative; border-radius:var(--r-2xl); overflow:hidden;
  background:linear-gradient(160deg,var(--blue-600),var(--blue-500) 55%,#6B85FA);
  aspect-ratio:4/4.4; display:grid; place-items:center; box-shadow:var(--sh-3);
}
.hero-stage::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 320px at 78% 12%, rgba(255,255,255,.22), transparent 68%);
}
.hero-stage .stage-art{position:relative; z-index:1; width:74%; color:rgba(255,255,255,.95)}
.hero-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; z-index:2}

/* بطاقات عائمة فوق الصورة */
.float-card{
  position:absolute; z-index:3; background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:14px 17px; display:flex; align-items:center; gap:12px;
}
.float-card .fc-ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none}
.float-card strong{display:block; font-family:var(--font-body); font-size:16px; font-weight:800; color:var(--ink); line-height:1.4}
.float-card span{font-size:13px; color:var(--muted); line-height:1.5}
.fc-a{top:9%; inset-inline-start:-6%}
.fc-a .fc-ico{background:var(--green-100); color:var(--green-600)}
.fc-b{bottom:11%; inset-inline-end:-5%}
.fc-b .fc-ico{background:var(--orange-100); color:var(--orange-600)}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:48px}
  .hero-visual{max-width:440px; margin-inline:auto; width:100%}
  .fc-a{inset-inline-start:-2%}
  .fc-b{inset-inline-end:-2%}
}
@media (max-width:420px){
  .float-card{padding:11px 13px}
  .float-card .fc-ico{width:36px; height:36px}
  .fc-a{inset-inline-start:0}
  .fc-b{inset-inline-end:0}
}

/* ── 8. الأقسام ─────────────────────────────────────────────────────────── */
.section{position:relative; padding:clamp(56px,8vw,110px) 0; overflow:hidden}
.section-violet{background:var(--violet-50)}
.section-peach{background:linear-gradient(180deg,var(--peach-50),#fff)}
.section-tint{background:linear-gradient(180deg,#fff,var(--blue-50))}
.sec-head{max-width:60ch; margin-bottom:clamp(34px,4.5vw,52px); position:relative; z-index:1}
.sec-head.center{text-align:center}
.sec-head .lede{margin-top:14px}
.sec-head.center .lede{margin-inline:auto}
.section > .shell{position:relative; z-index:1}

/* ── 8.5 شريط الحلقة القادمة — تاريخ ومقاعد، لا وعد مجرّد ──────────────── */
.cohort{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin:0 auto 26px; padding:16px 22px; max-width:760px;
  background:var(--orange-50); border:1.5px solid var(--orange-200);
  border-radius:var(--r-lg); text-decoration:none; color:var(--ink);
  transition:border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.cohort:hover{border-color:var(--orange-500); box-shadow:var(--sh-1)}
.cohort-tag{
  font-family:var(--font-body); font-size:12px; font-weight:800; letter-spacing:.04em;
  color:var(--orange-700); background:var(--orange-100);
  padding:5px 11px; border-radius:999px;
}
.cohort strong{font-family:var(--font-display); font-size:18px; color:var(--ink)}
.cohort-when{font-family:var(--font-body); font-size:14.5px; color:var(--body)}
.cohort-seats{
  font-family:var(--font-body); font-size:13.5px; font-weight:800;
  color:var(--red-600); background:var(--red-50);
  padding:5px 11px; border-radius:999px;
}
.cohort-go{
  display:inline-flex; align-items:center; gap:7px; margin-inline-start:auto;
  font-family:var(--font-body); font-size:14.5px; font-weight:700; color:var(--blue-600);
}
@media (max-width:640px){
  .cohort{flex-direction:column; align-items:flex-start; text-align:start}
  .cohort-go{margin-inline-start:0}
}

/* ── 9. شبكة المواد ─────────────────────────────────────────────────────── */
.topic-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:20px}
.topic{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 24px; text-decoration:none; display:block;
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid);
}
.topic:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent}
.topic-ico{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  margin-bottom:18px; background:var(--blue-50); color:var(--blue-600);
  transition:background var(--mid), color var(--mid);
}
.topic:hover .topic-ico{background:var(--blue-600); color:#fff}
.topic:nth-child(2n) .topic-ico{background:var(--orange-50); color:var(--orange-600)}
.topic:nth-child(2n):hover .topic-ico{background:var(--orange-500); color:#fff}
.topic h3{font-size:18.5px; margin-bottom:7px}
.topic p{font-size:14.5px; color:var(--muted); line-height:1.75}
.topic .more{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--font-body); font-size:14.5px; font-weight:700; color:var(--blue-600); opacity:0; transform:translateX(6px); transition:all var(--mid) var(--ease)}
.topic:hover .more{opacity:1; transform:none}

/* ── 10. البطاقات (الباقات / الحلقات) ──────────────────────────────────── */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px}
.ecard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.ecard:hover{transform:translateY(-7px); box-shadow:var(--sh-3)}
.ecard-media{position:relative; aspect-ratio:16/10; display:grid; place-items:center; background:linear-gradient(150deg,var(--blue-600),var(--blue-500))}
.ecard:nth-child(2) .ecard-media{background:linear-gradient(150deg,#7B5CE0,#9B7CF0)}
.ecard:nth-child(3) .ecard-media{background:linear-gradient(150deg,var(--orange-600),var(--orange-500))}
.ecard-media .icon{color:rgba(255,255,255,.92); width:64px; height:64px}
.ecard-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.chip{
  position:absolute; top:14px; inset-inline-start:14px; z-index:2;
  background:#fff; color:var(--blue-700); font-family:var(--font-body);
  font-size:12.5px; font-weight:800; padding:6px 13px; border-radius:var(--pill); box-shadow:var(--sh-1);
}
.chip-orange{color:var(--orange-700)}
.ecard-body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.ecard-meta{display:flex; align-items:center; gap:16px; font-size:13.5px; color:var(--muted); margin-bottom:11px}
.ecard-meta span{display:inline-flex; align-items:center; gap:6px}
.ecard-meta .icon{color:var(--blue-500)}
.ecard h3{font-size:20px; line-height:1.5; margin-bottom:10px}
.ecard p{font-size:15px; color:var(--body); line-height:1.8; flex:1}
.ecard-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2)}
.price{font-family:var(--font-body); font-weight:800; color:var(--blue-600); font-size:22px; line-height:1.3}
.price small{display:block; font-size:12.5px; font-weight:500; color:var(--muted)}
.price .was{font-size:15px; color:var(--muted); text-decoration:line-through; font-weight:500; margin-inline-start:8px}

/* ── 11. صف أفقي (الخطوات / الأحداث) ───────────────────────────────────── */
.rows{display:grid; gap:18px}
.rowcard{
  display:grid; grid-template-columns:132px 1fr auto; gap:24px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 22px;
  transition:box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.rowcard:hover{box-shadow:var(--sh-2); transform:translateX(-4px)}
.rowcard-thumb{aspect-ratio:16/11; border-radius:var(--r); display:grid; place-items:center; background:var(--blue-50); color:var(--blue-600); position:relative; overflow:hidden}
.rowcard:nth-child(2) .rowcard-thumb{background:var(--orange-50); color:var(--orange-600)}
.rowcard:nth-child(3) .rowcard-thumb{background:var(--mint-50); color:var(--green-600)}
.rowcard-thumb .step-num{position:absolute; font-family:var(--font-display); font-size:44px; font-weight:700; opacity:.16}
.rowcard h3{font-size:20px; margin-bottom:6px}
.rowcard p{font-size:15px; color:var(--body); line-height:1.8}
.rowcard-meta{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:9px; font-size:13.5px; color:var(--muted)}
.rowcard-meta span{display:inline-flex; align-items:center; gap:6px}
@media (max-width:760px){
  .rowcard{grid-template-columns:1fr; gap:14px; text-align:right}
  .rowcard-thumb{max-width:110px}
  .rowcard:hover{transform:none}
}

/* ── 12. قسم منقسم (عنّا / لماذا نحن) ──────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center}
.split-rev{direction:ltr}
.split-rev > *{direction:rtl}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.feature-list{display:grid; gap:20px; margin-top:28px}
.feature{display:flex; gap:16px; align-items:flex-start}
.feature-ico{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:none; background:var(--orange-100); color:var(--orange-600)}
.feature:nth-child(2n) .feature-ico{background:var(--blue-100); color:var(--blue-600)}
.feature h3{font-size:18.5px; margin-bottom:5px}
.feature p{font-size:15px; color:var(--body); line-height:1.8}

/* لوحة صور فسيفسائية */
.mosaic{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.tile{border-radius:var(--r-lg); display:grid; place-items:center; overflow:hidden; position:relative; color:#fff}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tile .icon{width:44px; height:44px; opacity:.9; position:relative; z-index:1}
.tile-1{aspect-ratio:1/1.12; background:linear-gradient(150deg,var(--blue-600),var(--blue-500))}
.tile-2{aspect-ratio:1/.86; background:linear-gradient(150deg,#7B5CE0,#9B7CF0); margin-top:32px}
.tile-3{aspect-ratio:1/.86; background:linear-gradient(150deg,var(--orange-600),var(--orange-500))}
.tile-4{aspect-ratio:1/1.12; background:linear-gradient(150deg,#1CA672,#3FC894); margin-top:-32px}
.mosaic-badge{
  position:absolute; z-index:4; bottom:6%; inset-inline-start:-6%;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:16px 20px;
  display:flex; align-items:center; gap:13px;
}
.mosaic-badge .mb-ico{width:46px; height:46px; border-radius:14px; background:var(--blue-50); color:var(--blue-600); display:grid; place-items:center; flex:none}
.mosaic-badge strong{display:block; font-family:var(--font-body); font-size:19px; font-weight:800; color:var(--ink); line-height:1.3}
.mosaic-badge span{font-size:13px; color:var(--muted)}
@media (max-width:900px){.mosaic-badge{inset-inline-start:0}}

/* ── 13. بطاقات الحقائق ────────────────────────────────────────────────── */

/* باقات الحصص */
.price-lg{font-size:40px; letter-spacing:-.02em}
.price-lg small{font-size:13.5px; margin-top:3px}
.tag-best{background:var(--orange-50); color:var(--orange-600); font-weight:700;
  font-size:12.5px; padding:3px 11px; border-radius:100px; margin-inline-start:auto}

.facts{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.fact{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 22px; text-align:center; box-shadow:var(--sh-1);
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.fact:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.fact:nth-child(2),.fact:nth-child(3){margin-top:26px}
.fact-ico{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin:0 auto 14px; background:var(--blue-50); color:var(--blue-600)}
.fact:nth-child(2) .fact-ico{background:var(--orange-50); color:var(--orange-600)}
.fact:nth-child(3) .fact-ico{background:var(--mint-50); color:var(--green-600)}
.fact:nth-child(4) .fact-ico{background:var(--violet-50); color:#7B5CE0}
.fact-val{font-family:var(--font-body); font-size:34px; font-weight:800; color:var(--ink); line-height:1.25; font-variant-numeric:tabular-nums}
.fact-lbl{font-size:14.5px; color:var(--muted); margin-top:2px; line-height:1.6}
@media (max-width:560px){.facts{grid-template-columns:1fr} .fact:nth-child(n){margin-top:0}}

/* ── 14. بطاقات الاقتباس (وعود / آراء) ─────────────────────────────────── */
.quote-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px}
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px; position:relative; box-shadow:var(--sh-1);
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.quote:hover{transform:translateY(-6px); box-shadow:var(--sh-2)}
.quote-head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.quote-av{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--blue-100); color:var(--blue-700); font-family:var(--font-body); font-weight:800; font-size:19px;
}
.quote:nth-child(2) .quote-av{background:var(--orange-100); color:var(--orange-700)}
.quote:nth-child(3) .quote-av{background:var(--green-100); color:var(--green-600)}
.quote-head strong{display:block; font-family:var(--font-body); font-size:17px; font-weight:800; color:var(--ink); line-height:1.45}
.quote-head span{font-size:13.5px; color:var(--muted)}
.quote p{font-size:15.5px; line-height:1.9; color:var(--body)}
.quote-mark{position:absolute; top:20px; inset-inline-start:24px; font-family:var(--font-display); font-size:58px; line-height:1; color:var(--blue-100); pointer-events:none}

/* ── 14ب. المشكاة — بند الهوية ──────────────────────────────────────────
   ليل أزرق ووهج ذهبي يرتفع من موضع المصباح. الوقفة الوحيدة قبل النداء. */
.mishkat{position:relative; overflow:hidden; background:var(--dark); padding:clamp(58px,9vw,98px) 0}
.mishkat::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(54% 42% at 50% 4%, rgba(240,160,45,.18) 0%, transparent 62%),
    radial-gradient(80% 64% at 50% 0%, rgba(22,39,122,.55) 0%, transparent 72%);
}
.mishkat .shell{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:22px; text-align:center;
}
.mishkat-mark{
  width:clamp(96px,14vw,136px); color:var(--orange-500); line-height:0;
  filter:drop-shadow(0 0 30px rgba(240,160,45,.34));
}
.mishkat-mark .logo{width:100%; height:auto}
.mishkat-name{
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(36px,7vw,58px); line-height:1.25; letter-spacing:0;
}
.mishkat-name em{font-style:normal; color:var(--orange-500)}
.mishkat-lede{
  font-size:clamp(15.5px,2.4vw,18px); line-height:1.9;
  color:var(--on-dark-soft); max-width:44ch;
}
/* الآية بخط أميري — الوحيد المصمَّم لتشكيل القرآن. */
.mishkat-verse{
  font-family:var(--font-quran); font-size:clamp(19px,3.4vw,25px);
  line-height:2.15; color:var(--orange-100); max-width:34ch; margin-top:2px;
}
.mishkat-verse span{
  display:block; font-family:Tajawal,sans-serif; font-size:13px;
  color:var(--muted); letter-spacing:.06em; margin-top:10px;
}

/* ── 14ج. واتساب — زرّ عائم ─────────────────────────────────────────────
   inset-inline-start ⇒ يمين الشاشة في RTL. أخضر المنصة، لا أخضر واتساب. */
.wa-fab{
  position:fixed; z-index:90;
  inset-block-end:clamp(16px,3.5vw,26px);
  inset-inline-start:clamp(16px,3.5vw,26px);
  display:inline-flex; align-items:center; gap:10px;
  min-height:56px; padding:0 22px;
  border-radius:var(--pill);
  background:var(--green-600); color:#fff; text-decoration:none;
  font-family:var(--font-body); font-size:15.5px; font-weight:700;
  box-shadow:0 10px 26px -6px rgba(28,166,114,.55);
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast);
}
.wa-fab svg{width:26px; height:26px; flex:none}
.wa-fab:hover{background:#17B981; transform:translateY(-3px); box-shadow:0 16px 32px -8px rgba(28,166,114,.62)}
.wa-fab:active{transform:translateY(-1px)}
/* على الشاشات الضيّقة: دائرة بالأيقونة فقط، حتى لا يحجب المحتوى. */
@media (max-width:560px){
  .wa-fab{width:56px; padding:0; justify-content:center}
  .wa-fab span{display:none}
}
@media print{.wa-fab{display:none}}

/* ── 14د. صفحات المواد ──────────────────────────────────────────────────── */
.crumbs{display:flex; gap:9px; align-items:center; font-size:14px; color:var(--muted); margin-bottom:20px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--blue-600)}

.subj-hero{
  padding:clamp(30px,5vw,52px) 0 clamp(38px,5vw,58px);
  background:
    radial-gradient(800px 460px at 88% 0%, var(--violet-50), transparent 64%),
    radial-gradient(700px 420px at 8% 12%, var(--peach-50), transparent 60%);
  border-bottom:1px solid var(--line-2);
}
.subj-hero-grid{display:grid; gap:clamp(26px,4vw,46px); align-items:center}
@media(min-width:900px){.subj-hero-grid{grid-template-columns:1.55fr 1fr}}
.subj-hero .h-xl{font-size:clamp(30px,4.4vw,46px); margin-bottom:16px}
.subj-hero .lede{margin-bottom:26px}
.subj-price{margin-top:18px; font-size:15.5px; color:var(--body)}
.subj-price strong{font-size:20px; color:var(--blue-600); font-weight:800}

.subj-facts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
@media(min-width:520px) and (max-width:899px){.subj-facts{grid-template-columns:repeat(3,1fr)}}
.subj-facts > div{background:#fff; padding:18px 20px; text-align:center}
.subj-facts b{display:block; font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--ink); line-height:1.2}
.subj-facts span{display:block; font-size:13.5px; color:var(--muted); margin-top:4px}

.prose{max-width:66ch; margin-inline:auto; display:grid; gap:18px}
.prose p{font-size:17px; line-height:2; color:var(--body)}

.covers{display:grid; gap:16px}
@media(min-width:640px){.covers{grid-template-columns:1fr 1fr}}
.cover{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px}
.cover h3{font-size:17px; margin-bottom:8px}
.cover p{font-size:15px; line-height:1.8; color:var(--body)}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff}
table.levels{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
table.levels th{
  text-align:right; font-family:var(--font-display); font-size:13px; font-weight:600;
  color:var(--muted); padding:14px 18px; background:var(--blue-50); border-bottom:1px solid var(--line);
}
table.levels td{padding:16px 18px; border-bottom:1px solid var(--line-2); line-height:1.75; vertical-align:top}
table.levels tr:last-child td{border-bottom:0}
table.levels td strong{color:var(--ink)}

.outcomes{display:grid; gap:12px; max-width:70ch; margin-inline:auto}
@media(min-width:760px){.outcomes{grid-template-columns:1fr 1fr; max-width:none}}
.outcomes li{
  display:flex; gap:12px; align-items:start; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  font-size:15px; line-height:1.75;
}
.outcomes .icon{color:var(--green-600); margin-top:4px}

.siblings{margin-top:clamp(34px,4vw,50px); padding-top:26px; border-top:1px solid var(--line-2)}
.siblings h3{font-size:15px; color:var(--muted); font-weight:600; margin-bottom:14px}
.siblings ul{display:flex; flex-wrap:wrap; gap:10px}
.siblings a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--pill);
  padding:9px 18px; font-size:14.5px; font-weight:600; color:var(--ink-2);
  transition:border-color var(--fast), color var(--fast);
}
.siblings a:hover{border-color:var(--blue-600); color:var(--blue-600)}
.siblings .icon{color:var(--blue-600)}

/* ── 15. شريط النداء ───────────────────────────────────────────────────── */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--r-2xl);
  background:linear-gradient(120deg,var(--blue-700),var(--blue-600) 58%,var(--blue-500));
  padding:clamp(34px,5vw,56px) clamp(24px,4vw,56px); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.cta-band::before{content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 66%); top:-160px; inset-inline-start:-90px}
.cta-band > *{position:relative; z-index:1}
.cta-band h2{color:#fff}
.cta-band .eyebrow{color:rgba(255,255,255,.85)}
.cta-band .eyebrow::before{background:var(--orange-500)}
.cta-band p{color:rgba(255,255,255,.86); margin-top:10px; max-width:48ch}
.cta-band-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* ── 16. الأسئلة ────────────────────────────────────────────────────────── */
.faq{max-width:860px; margin-inline:auto}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:14px; overflow:hidden; transition:box-shadow var(--fast), border-color var(--fast)}
.faq details[open]{border-color:var(--blue-200); box-shadow:var(--sh-2)}
.faq summary{list-style:none; cursor:pointer; padding:21px 26px; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--font-display); font-weight:600; font-size:17.5px; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; width:30px; height:30px; flex:none; border-radius:50%;
  background:var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F57EF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform var(--mid) var(--ease), background-color var(--mid);
}
.faq details[open] summary::after{transform:rotate(135deg); background-color:var(--blue-100)}
.faq .answer{padding:0 26px 24px; color:var(--body); font-size:16px; line-height:1.95}

/* ── 17. الاستمارات ─────────────────────────────────────────────────────── */
.form-page{padding:clamp(34px,5vw,64px) 0 clamp(56px,7vw,92px); background:linear-gradient(180deg,var(--violet-50),#fff 46%); min-height:70vh}
.form-shell{max-width:780px; margin-inline:auto}
.form-intro{text-align:center; margin-bottom:34px}
.form-intro .eyebrow{justify-content:center}
.form-intro p{margin-top:14px; color:var(--body); max-width:52ch; margin-inline:auto}

.wizard{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-3); overflow:hidden}

.wiz-progress{padding:24px clamp(20px,4vw,38px); border-bottom:1px solid var(--line-2); background:#fff}
.wiz-track{display:flex; align-items:center}
.wiz-node{display:flex; align-items:center; gap:12px; flex:none}
.wiz-dot{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:2px solid var(--line); background:#fff; color:var(--muted);
  font-family:var(--font-body); font-weight:800; font-size:15px;
  transition:all var(--mid) var(--ease);
}
.wiz-label{font-family:var(--font-body); font-size:15px; color:var(--muted); font-weight:600; transition:color var(--mid)}
.wiz-line{flex:1; height:3px; background:var(--line); margin-inline:14px; border-radius:2px; overflow:hidden; position:relative}
.wiz-line i{position:absolute; inset:0; background:var(--blue-600); transform:scaleX(0); transform-origin:right; transition:transform var(--slow) var(--ease)}
.wiz-line.filled i{transform:scaleX(1)}
.wiz-node.active .wiz-dot{border-color:var(--blue-600); background:var(--blue-600); color:#fff; box-shadow:0 0 0 6px var(--blue-50)}
.wiz-node.active .wiz-label{color:var(--ink); font-weight:800}
.wiz-node.done .wiz-dot{border-color:var(--green-600); background:var(--green-600); color:#fff}
@media (max-width:640px){.wiz-label{display:none} .wiz-line{margin-inline:9px}}

.wiz-body{padding:clamp(24px,4vw,40px)}
.wiz-step{display:none}
.wiz-step.active{display:block; animation:stepIn var(--slow) var(--ease)}
@keyframes stepIn{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.wiz-step > h2{font-size:26px; margin-bottom:7px}
.wiz-step > .step-sub{color:var(--muted); font-size:15.5px; margin-bottom:28px}

.field-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(234px,1fr)); gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field.wide{grid-column:1/-1}
.field > label{font-family:var(--font-body); font-size:15.5px; font-weight:700; color:var(--ink)}
.field > label .req{color:var(--red-600); margin-inline-start:3px}
.field > label .opt{font-weight:400; color:var(--muted); font-size:14px}
.help{font-size:13.5px; color:var(--muted); line-height:1.7}

input[type=text],input[type=tel],input[type=email],input[type=number],input[type=url],input[type=date],input[type=password],select,textarea{
  width:100%; min-height:54px; padding:14px 17px;
  font-family:Tajawal,sans-serif; font-size:16.5px; color:var(--ink);
  background:#fff; border:1.8px solid var(--line); border-radius:var(--r);
  transition:border-color var(--fast), box-shadow var(--fast);
}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:.8}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue-600); box-shadow:0 0 0 4px var(--blue-50)}
textarea{min-height:116px; resize:vertical; line-height:1.85; padding-top:15px}
select{
  appearance:none; cursor:pointer; padding-inline-start:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B88A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 16px center; background-size:18px;
}
input[dir=ltr]{direction:ltr; text-align:right}

.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red-600); background:var(--red-50)}
.err{display:none; align-items:center; gap:7px; font-size:14px; color:var(--red-600); font-weight:500}
.field.invalid .err{display:flex}

.choices{display:grid; gap:12px}
.choices.cols{grid-template-columns:repeat(auto-fit,minmax(218px,1fr))}
.choice{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:17px 19px; min-height:62px; border:1.8px solid var(--line); border-radius:var(--r);
  background:#fff; cursor:pointer; font-size:16px;
  transition:border-color var(--fast), background var(--fast), transform var(--fast) var(--ease);
}
.choice:hover{border-color:var(--blue-200); transform:translateY(-2px)}
.choice input{position:absolute; opacity:0; width:0; height:0}
.choice .box{width:24px; height:24px; flex:none; border:2px solid var(--line); border-radius:7px; display:grid; place-items:center; transition:all var(--fast) var(--ease); color:#fff}
.choice .box .icon{opacity:0; transition:opacity var(--fast); width:14px; height:14px}
.choice input[type=radio] ~ .box{border-radius:50%}
.choice:has(input:checked){border-color:var(--blue-600); background:var(--blue-50)}
.choice:has(input:checked) .box{background:var(--blue-600); border-color:var(--blue-600)}
.choice:has(input:checked) .box .icon{opacity:1}
.choice:has(input:focus-visible){outline:3px solid var(--blue-500); outline-offset:3px}
.choice .txt{display:flex; flex-direction:column; gap:2px; font-family:var(--font-body); font-weight:600; color:var(--ink)}
.choice .txt small{font-family:Tajawal,sans-serif; font-size:13.5px; color:var(--muted); font-weight:400; line-height:1.65}

.wiz-foot{display:flex; align-items:center; gap:14px; padding:22px clamp(20px,4vw,40px); border-top:1px solid var(--line-2); background:var(--blue-50)}
.wiz-foot .spacer{flex:1}
.wiz-count{font-family:var(--font-body); font-size:14.5px; color:var(--muted); font-weight:600}

.hp-field{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden}

.form-aside{display:flex; align-items:flex-start; gap:13px; margin-top:26px; padding:19px 22px; background:var(--mint-50); border-radius:var(--r-lg); font-size:15px; line-height:1.8; color:var(--body)}
.form-aside .icon{color:var(--green-600); flex:none; margin-top:3px}
.form-aside b{color:var(--ink)}

/* ── 18. التنبيهات ──────────────────────────────────────────────────────── */
.alert{display:flex; align-items:flex-start; gap:13px; padding:18px 21px; border-radius:var(--r-lg); margin-bottom:26px; font-size:16px; line-height:1.8; border:1.5px solid}
.alert .icon{flex:none; margin-top:3px}
.alert-bad{background:var(--red-50); border-color:rgba(216,56,43,.24)}
.alert-bad .icon{color:var(--red-600)}
.alert-ok{background:var(--green-100); border-color:rgba(28,166,114,.26)}
.alert-ok .icon{color:var(--green-600)}

/* ── 19. صفحة الشكر ────────────────────────────────────────────────────── */
.thanks{text-align:center; max-width:660px; margin-inline:auto; padding:clamp(48px,8vw,96px) 0}
.thanks-mark{width:96px; height:96px; margin:0 auto 32px; border-radius:50%; display:grid; place-items:center; background:var(--green-100); color:var(--green-600); animation:popIn 620ms var(--ease) both}
@keyframes popIn{0%{transform:scale(.5); opacity:0}60%{transform:scale(1.07)}100%{transform:scale(1); opacity:1}}
.thanks h1{margin-bottom:16px}
.thanks p{font-size:17.5px}
.next-steps{margin:36px 0; text-align:right; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 30px; box-shadow:var(--sh-1)}
.next-steps h2{font-size:21px; margin-bottom:16px}
.next-steps li{display:flex; gap:14px; padding:12px 0; align-items:flex-start; font-size:16px; line-height:1.8}
.next-steps .icon{color:var(--blue-600); flex:none; margin-top:5px}

/* ── 20. التذييل ────────────────────────────────────────────────────────── */
.site-foot{background:var(--dark); color:var(--on-dark-soft); padding:clamp(52px,6vw,84px) 0 30px}
.site-foot .brand{color:#fff}
.site-foot h3{color:#fff; font-family:var(--font-display); font-size:17px; font-weight:700; margin-bottom:18px}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:clamp(26px,4vw,48px)}
.foot-brand p{margin-top:18px; font-size:15px; line-height:1.9; max-width:36ch}
.site-foot ul li{margin-bottom:11px}
.site-foot ul a{color:var(--on-dark-soft); text-decoration:none; font-size:15.5px; transition:color var(--fast), padding var(--fast)}
.site-foot ul a:hover{color:var(--orange-500); padding-inline-end:5px}
.foot-cta .btn{margin-bottom:12px}
.foot-base{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:clamp(36px,4vw,54px); padding-top:26px; border-top:1px solid rgba(255,255,255,.11); font-size:14.5px}
.foot-phase{display:inline-flex; align-items:center; gap:9px; color:var(--orange-500)}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ── 21. الظهور عند التمرير ─────────────────────────────────────────────── */
body.js .reveal{opacity:0; transform:translateY(26px)}
body.js .reveal.in{opacity:1; transform:none; transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease)}
body.js .reveal-group > *{opacity:0; transform:translateY(26px)}
body.js .reveal-group.in > *{opacity:1; transform:none; transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease)}
body.js .reveal-group.in > *:nth-child(1){transition-delay:0ms}
body.js .reveal-group.in > *:nth-child(2){transition-delay:80ms}
body.js .reveal-group.in > *:nth-child(3){transition-delay:160ms}
body.js .reveal-group.in > *:nth-child(4){transition-delay:240ms}
body.js .reveal-group.in > *:nth-child(5){transition-delay:320ms}
body.js .reveal-group.in > *:nth-child(6){transition-delay:400ms}
body.js .reveal-group.in > *:nth-child(7){transition-delay:480ms}
body.js .reveal-group.in > *:nth-child(8){transition-delay:560ms}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  body.js .reveal,body.js .reveal-group > *{opacity:1 !important; transform:none !important}
}

/* ── 22. لوحة الإدارة ──────────────────────────────────────────────────── */
.admin-body{background:var(--violet-50)}
.admin-top{background:var(--dark); color:#fff; padding:15px 0; position:sticky; top:0; z-index:60}
.admin-top .shell{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.admin-top .brand{color:#fff}
.admin-top nav{display:flex; gap:22px; margin-inline-end:auto}
.admin-top a{color:var(--on-dark-soft); text-decoration:none; font-family:var(--font-body); font-size:15.5px; font-weight:600; padding-bottom:4px}
.admin-top a:hover{color:#fff}
.admin-top a.here{color:var(--orange-500); border-bottom:2.5px solid var(--orange-500)}
.admin-main{padding:34px 0 70px}

.gate-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:20px; margin-bottom:32px}
.gate-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-1)}
.gate-card.done{border-color:var(--green-600); background:var(--green-100)}
.gate-val{font-family:var(--font-body); font-size:36px; font-weight:800; color:var(--ink); line-height:1.2; font-variant-numeric:tabular-nums}
.gate-val i{font-style:normal; font-size:19px; color:var(--muted); font-weight:600}
.gate-lbl{font-size:14.5px; color:var(--muted); margin-top:2px}
.gate-bar{height:7px; background:var(--line-2); border-radius:4px; margin-top:15px; overflow:hidden}
.gate-bar i{display:block; height:100%; background:var(--blue-600); border-radius:4px; transition:width var(--slow) var(--ease)}
.gate-card.done .gate-bar i{background:var(--green-600)}

.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; margin-bottom:26px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:20px 26px; border-bottom:1px solid var(--line-2)}
.panel-head h2{font-size:22px}
.panel-body{padding:26px}

.tbox{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:860px; font-size:15px}
thead th{text-align:right; font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--blue-50)}
tbody td{padding:15px 16px; border-bottom:1px solid var(--line-2); vertical-align:top; line-height:1.75}
tbody tr:hover{background:var(--blue-50)}
td.mono{font-variant-numeric:tabular-nums; direction:ltr; text-align:right; white-space:nowrap}
.tag{display:inline-block; padding:4px 13px; border-radius:var(--pill); font-family:var(--font-body); font-size:13px; font-weight:700; border:1.5px solid}
.tag-ok{background:var(--green-100); color:var(--green-600); border-color:rgba(28,166,114,.3)}
.tag-no{background:var(--red-50); color:var(--red-600); border-color:rgba(216,56,43,.25)}
.empty-state{padding:60px 24px; text-align:center; color:var(--muted)}

.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(60% 44% at 50% 8%, rgba(240,160,45,.14) 0%, transparent 62%),
    linear-gradient(150deg,var(--dark),var(--blue-800));
}
.login-card{background:#fff; border-radius:var(--r-xl); padding:42px; width:100%; max-width:410px; box-shadow:var(--sh-3); text-align:center}
.login-mark{display:grid; place-items:center; color:var(--blue-800); margin-bottom:14px}
.login-card h1{font-size:29px; margin-bottom:4px}
.login-card .sub{color:var(--muted); font-size:15px; margin-bottom:28px}
.login-card .field{text-align:right}
.login-card form{text-align:right}

/* [hidden] يجب أن يتغلّب على display في .btn وغيرها */
[hidden]{display:none !important}

.pack-alt{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding:10px 14px;
  background:var(--violet-50); border-radius:var(--r); font-size:14.5px; color:var(--body)}
.pack-alt .icon{color:var(--blue-600)}
.pack-alt b{color:var(--ink)}
.pack-alt span{color:var(--green-600); font-weight:700; margin-inline-start:auto}

/* ملخّص الطلب قبل الدفع */
.summary{display:grid; gap:0}
.summary li{display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line-2); font-size:16px}
.summary li:last-child{border-bottom:none}
.summary span{color:var(--muted)}
.summary b{color:var(--ink); font-weight:700}
.summary .total{margin-top:8px; padding-top:18px; border-top:2px solid var(--line)}
.summary .total b{font-family:var(--font-body); font-size:30px; font-weight:800; color:var(--blue-600)}

/* خطوة الدفع: تظهر في الشريط لكنها خارج المعالج */
.wiz-node.is-next{opacity:.45}
.wiz-node.is-next .wiz-dot{border-style:dashed}

/* صفّا السعر في بطاقة الباقة */
.pack-rows{display:grid; gap:8px; margin-top:14px}
.pack-row{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--r);
  text-decoration:none; color:var(--body); font-size:15.5px;
  transition:border-color var(--fast), background var(--fast)}
.pack-row:hover{border-color:var(--blue-600); background:var(--blue-50)}
.pack-row b{font-family:var(--font-body); font-size:22px; font-weight:800; color:var(--blue-600)}

/* السعر الحيّ في استمارة الطالب */
.live-price{margin-top:26px; padding:20px 24px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--blue-600),var(--blue-500)); color:#fff;
  display:grid; gap:2px; box-shadow:var(--sh-blue)}
.lp-label{font-size:14px; opacity:.85}
.lp-amount{font-family:var(--font-body); font-size:38px; font-weight:800; line-height:1.2}
.lp-note{font-size:14.5px; opacity:.85}

/* ── تبديل تجريبي/اشتراك — بلا جافاسكربت ───────────────────────────────────
   الحقول المخفية تبقى محدَّدة مسبقاً، فلا يشتكي المدقّق ولا الخادم. */
.trial-only{display:none}
form:has(input[name="plan"][value="trial"]:checked) .sub-only{display:none}
form:has(input[name="plan"][value="trial"]:checked) .trial-only{display:flex}
/* الخط الواصل قبل خطوة الدفع يختفي معها، وإلا بقي معلّقاً */
form:has(input[name="plan"][value="trial"]:checked) .wiz-line:has(+ .sub-only){display:none}

.trial-note{
  align-items:flex-start; gap:13px; margin-top:26px; padding:20px 24px;
  background:var(--green-100); border:1.5px solid var(--green-600);
  border-radius:var(--r-lg); font-size:14.5px; line-height:1.8; color:var(--ink-2);
}
.trial-note svg{flex:none; margin-top:4px; color:var(--green-600)}
.trial-note strong{display:block; margin-bottom:3px; font-size:16px; color:var(--ink)}
.trial-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.trial-chips span{
  padding:5px 12px; border-radius:999px; background:#fff;
  border:1px solid var(--green-600); font-size:13px; font-weight:700; color:var(--green-600);
}

/* نصّ زرّ الإرسال: «متابعة إلى الدفع» أو «أرسل طلبي» — لا دفع في التجريبية */
.lbl-trial{display:none}
form:has(input[name="plan"][value="trial"]:checked) .lbl-trial{display:inline}

/* حقول الأجر في جدول الأساتذة */
.rate-form{display:flex; align-items:flex-end; gap:8px; margin:0}
.rate-in{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted)}
.rate-in input{width:70px; min-height:38px; padding:6px 8px; font-size:14px; text-align:center}
.rate-form .btn{min-height:38px; padding:6px 14px; font-size:13px}

/* ── لوحة الإدارة: عرض كامل الشاشة ─────────────────────────────────── */
.admin-body .shell{max-width:none; padding-inline:clamp(16px,2vw,32px)}
.admin-body table{min-width:0; width:100%}
.admin-body .tbox{overflow-x:auto}
.admin-body .gate-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.admin-body .field-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media (min-width:1600px){
  .admin-body thead th,.admin-body tbody td{padding-inline-end:20px}
}

/* ── منتقي أيام الأسبوع ─────────────────────────────────────────────── */
.day-picker{display:flex; flex-wrap:wrap; gap:8px}
.day{position:relative; cursor:pointer}
.day input{position:absolute; opacity:0; width:0; height:0}
.day span{display:block; padding:10px 16px; min-width:64px; text-align:center;
  border:1.5px solid var(--line); border-radius:var(--r); background:#fff;
  font-size:15px; font-weight:600; transition:all var(--fast)}
.day:hover span{border-color:var(--blue-200)}
.day:has(input:checked) span{background:var(--blue-600); border-color:var(--blue-600); color:#fff}
.day:has(input:focus-visible) span{outline:3px solid var(--blue-500); outline-offset:2px}

/* ── منتقي الطلاب ───────────────────────────────────────────────────── */
.pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.pick{position:relative; cursor:pointer; display:block}
.pick input{position:absolute; opacity:0; width:0; height:0}
.pick-body{display:block; padding:13px 16px; border:1.5px solid var(--line);
  border-radius:var(--r); background:#fff; transition:all var(--fast)}
.pick-body strong{display:block; font-size:15.5px; color:var(--ink)}
.pick-body small{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.pick-times{color:var(--blue-600) !important}
.pick:hover .pick-body{border-color:var(--blue-200)}
.pick:has(input:checked) .pick-body{border-color:var(--blue-600); background:var(--blue-50); box-shadow:0 0 0 3px var(--blue-100)}

/* ── جدول أيام الحلقة ومواعيدها ─────────────────────────────────────── */
.sched-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:10px; margin:0;
}
.sched-day{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; margin:0; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-lg); background:#fff;
  transition:border-color var(--fast), background var(--fast);
}
.sched-day:hover{border-color:var(--blue-200)}
.sched-day.on{border-color:var(--blue-600); background:var(--blue-50)}
.sched-day.locked{opacity:.4; cursor:not-allowed}
.sched-day.locked *{cursor:not-allowed}

.sched-day input[type=checkbox]{
  width:20px; height:20px; margin:0; flex:none;
  accent-color:var(--blue-600); cursor:pointer;
}
.sd-name{flex:1; min-width:52px; font-weight:600; font-size:15.5px; color:var(--ink)}
.sd-time{
  width:112px; min-height:42px; margin:0; padding:8px 10px; flex:none;
  font-size:15px; text-align:center; background:#fff;
}
.sched-day.on .sd-time{border-color:var(--blue-200)}
.sd-time:disabled{opacity:.35; background:var(--line-2); border-color:var(--line-2)}

.day-need{
  display:inline-block; margin-inline-start:10px; padding:4px 13px;
  font-family:var(--font-body); font-size:13px; font-weight:700;
  border-radius:100px; vertical-align:middle;
}
.day-need.short{background:var(--orange-100); color:var(--orange-700)}
.day-need.ok{background:var(--mint-50);   color:var(--green-600)}
.day-need.over{background:var(--red-50);  color:var(--red-600)}

@media (max-width:520px){
  .sched-grid{grid-template-columns:1fr}
}

/* ── الخطوات الثلاث في الصفحة الرئيسية ─────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(20px,3vw,34px)}
.step{position:relative; padding-top:26px; border-top:3px solid var(--line-2)}
.step::before{content:""; position:absolute; top:-3px; inset-inline-start:0; width:52px; height:3px; background:var(--blue-600)}
.step h3{font-size:22px; margin:10px 0 8px}
.step p{color:var(--body); font-size:16px; line-height:1.85; max-width:36ch}
.step-n{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--blue-50); color:var(--blue-600);
  font-family:var(--font-display); font-size:20px; font-weight:700; line-height:1}

/* مجموعة اختيارات: حاوية منطقية للتحقق، بلا شكل خاص */
.choice-group{display:block}

/* أزرار صفحة الشكر */
.thanks-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}

/* ══════════════════════════════════════════════════════════════════════════
   26. الجوال — إصلاح الأزرار المقصوصة
   ─────────────────────────────────────────────────────────────────────────
   السبب: .btn فيه white-space:nowrap وحشو ثابت 32px، فالنصّ العربي الطويل
   («سجّل في تقوية ومتابعة دراسية») يتجاوز عرض الشاشة، و body{overflow-x:hidden}
   يقصّه بدل أن يُظهره. العلاج: دع النصّ يلتفّ، وقلّل الحشو، واجعل نداء الفعل
   بعرض كامل — أوضح للعين وأسهل للإبهام.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:560px){

  .btn{
    white-space:normal; text-align:center; line-height:1.45;
    padding:14px 20px; font-size:15.5px;
  }
  .btn-sm{min-height:44px; padding:10px 16px; font-size:14.5px}

  /* نداءات الفعل الرئيسية بعرض كامل */
  .hero-actions .btn,
  .cta-band-actions .btn,
  .thanks-actions .btn,
  .mobile-nav .btn{width:100%}
  .hero-actions,
  .cta-band-actions,
  .thanks-actions{gap:10px}
  .cta-band-actions{width:100%}

  /* بطاقة الباقة: السعر فوق، والزرّ تحته كاملاً */
  .ecard-foot{flex-direction:column; align-items:stretch; gap:14px}
  .ecard-foot .btn{width:100%}
  .ecard-foot .price{text-align:center}

  /* صفّ الباقة في الاستمارة */
  .pack-row{gap:10px}

  /* أزرار المعالج: السابق والتالي جنباً إلى جنب بلا فائض */
  .wiz-foot{padding-inline:18px; gap:10px}
  .wiz-foot .btn{flex:1 1 auto; min-width:0}

  /* التذييل لا يختفي خلف زرّ واتساب العائم */
  .site-foot{padding-bottom:96px}
}

/* شاشات ضيّقة جداً (320–360) — الحشو هو أول ما يُضحّى به */
@media (max-width:380px){
  .btn{padding:13px 14px; font-size:15px}
  .btn .icon{width:17px; height:17px}
}

/* زرّ واتساب يحترم منطقة الأمان في الأجهزة ذات الحافة المنحنية */
.wa-fab{
  inset-block-end:max(clamp(16px,3.5vw,26px), env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════════════════════════════════════
   27. لوحة الزيارات — رسم بـCSS بلا مكتبة
   عمود واحد لكل يوم، ارتفاعه نسبة من الذروة. لا Chart.js ولا طلب شبكة.
   ══════════════════════════════════════════════════════════════════════════ */

.admin-h2{font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--ink); margin:26px 0 14px}

.vis-chart{
  display:flex; align-items:flex-end; gap:clamp(4px,1vw,12px);
  height:210px; padding:16px 18px 0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
}
.vis-bar{
  flex:1 1 0; min-width:0; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px;
}
.vis-fill{
  width:100%; border-radius:6px 6px 2px 2px; position:relative;
  background:linear-gradient(180deg,var(--blue-500),var(--blue-600));
  display:flex; align-items:flex-start; justify-content:center;
  transition:filter var(--fast);
}
.vis-bar:hover .vis-fill{filter:brightness(1.12)}
.vis-fill b{
  position:absolute; top:-21px; font-size:12px; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.vis-bar em{
  font-style:normal; font-size:11px; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; padding-bottom:10px;
}

.vis-cols{display:grid; gap:22px; margin-top:8px}
@media(min-width:1100px){.vis-cols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px) and (max-width:1099px){.vis-cols{grid-template-columns:1fr 1fr}}

.src-list{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; display:grid; gap:15px;
}
.src-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14.5px}
.src-top b{font-variant-numeric:tabular-nums; color:var(--ink)}
.src-track{height:7px; border-radius:4px; background:var(--blue-50); overflow:hidden; margin-top:7px}
.src-track span{display:block; height:100%; border-radius:4px; background:var(--orange-500)}

/* ══════════════════════════════════════════════════════════════════════════
   28. تحرير السجلات وحذفها
   ══════════════════════════════════════════════════════════════════════════ */

.crud-form{padding:22px clamp(18px,3vw,26px)}
.crud-grid{display:grid; gap:16px}
@media(min-width:720px){.crud-grid{grid-template-columns:repeat(3,1fr)}}
.crud-field{display:flex; flex-direction:column; gap:7px}
.crud-field.wide{grid-column:1/-1}
.crud-field > span{font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--ink-2)}
.crud-field input,
.crud-field select,
.crud-field textarea{
  width:100%; min-height:44px; padding:10px 13px;
  border:1.5px solid var(--line); border-radius:var(--r);
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:#fff;
}
.crud-field textarea{min-height:80px; resize:vertical; line-height:1.7}
.crud-field input:focus,
.crud-field select:focus,
.crud-field textarea:focus{outline:none; border-color:var(--blue-600)}
.crud-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-2)}

.row-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.inline-form{display:inline}
.btn-danger{background:var(--red-50); color:var(--red-600); border-color:rgba(216,56,43,.3)}
.btn-danger:hover{background:var(--red-600); color:#fff; border-color:var(--red-600)}

.alert-ok{background:var(--green-100); border-color:rgba(28,166,114,.35); color:var(--green-600)}

/* ══════════════════════════════════════════════════════════════════════════
   29. صفحة المشاهدة — الأستاذ وولي الأمر
   ══════════════════════════════════════════════════════════════════════════ */
.portal{max-width:760px; margin-inline:auto}
.portal-head{margin-bottom:26px}
.portal-head .h-lg{margin-bottom:10px}

.p-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-1); padding:clamp(20px,3.4vw,28px); margin-bottom:16px;
}
.p-card-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.p-card-head h2{font-size:19px; font-family:var(--font-display); font-weight:700}
.p-card-head > :last-child:not(h2){margin-inline-start:auto}

.p-facts{display:grid; gap:1px; background:var(--line-2); border-radius:var(--r); overflow:hidden; margin:0}
.p-facts > div{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  background:#fff; padding:11px 14px;
}
.p-facts dt{font-size:14.5px; color:var(--muted); min-width:96px; margin:0}
.p-facts dd{margin:0; font-size:15.5px; color:var(--ink-2); font-weight:600}
.p-facts dd strong{font-size:19px; color:var(--blue-600)}

.p-actions{margin-top:18px}
.p-actions .help{margin-top:9px}

.p-table{width:100%; border-collapse:collapse; font-size:14.5px}
.p-table th{
  text-align:right; font-family:var(--font-display); font-size:13px; font-weight:600;
  color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line);
}
.p-table td{padding:11px 12px; border-bottom:1px solid var(--line-2)}
.p-table tr:last-child td{border-bottom:0}

.p-circles{display:grid; gap:14px}
.p-circle{border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; background:var(--blue-50)}
.p-circle-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:13px}
.p-circle-top strong{font-family:var(--font-display); font-size:17px; color:var(--ink); font-weight:700}
.p-circle-top > :last-child{margin-inline-start:auto}
.p-circle .p-facts{margin-bottom:14px}
.p-circle .p-facts > div{background:#fff}

@media (max-width:520px){
  .p-facts dt{min-width:0; flex:1 1 100%}
}

/* ── رقائق الاختيار — أيام الأستاذ وأوقاته ─────────────────────────────── */
.day-chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border:1.5px solid var(--line); border-radius:var(--pill);
  background:#fff; cursor:pointer; user-select:none;
  font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--ink-2);
  transition:border-color var(--fast), background var(--fast), color var(--fast);
}
.chip:hover{border-color:var(--blue-200)}
.chip:focus-within{outline:3px solid var(--blue-500); outline-offset:2px}
.chip input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.chip::before{
  content:""; width:16px; height:16px; flex:none; border-radius:5px;
  border:1.5px solid var(--line); background:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; line-height:1;
  transition:background var(--fast), border-color var(--fast);
}
.chip:has(input:checked){border-color:var(--blue-600); background:var(--blue-50); color:var(--blue-800)}
.chip:has(input:checked)::before{content:"✓"; background:var(--blue-600); border-color:var(--blue-600)}

.rate-input{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.rate-input input{width:120px; flex:none; text-align:center; font-size:19px; font-weight:700}
.rate-input span{font-size:15px; color:var(--body)}