@charset "utf-8";
/* =========================================================================
   PassBoard 2026 — Phase 1 Free Funnel
   assets/css/site.css  —  THE design system (single stylesheet, no imports)
   Arabic RTL first. Logical properties everywhere. No build step.
   Fonts are loaded by each HTML page via <link> to Google Fonts.
   -------------------------------------------------------------------------
   TABLE OF CONTENTS
   00. Tokens (:root)
   01. Reset & base
   02. Typography
   03. Layout        (.container .section .grid .stack ...)
   04. Header        (.site-header .brand .nav .burger ...)
   05. Footer        (.site-footer .footer-grid .footer-note)
   06. Hero          (.hero .hero__bg .hero-stats ...)
   07. Buttons       (.btn and modifiers)
   08. Generic       (.card .badge .pill .divider .muted .sr-only ...)
   09. Countdown     (.countdown .cd ...)
   10. Lectures      (.lec-table .lec-row ...)
   11. Problem/Promise (.pain-list .promise-list ...)
   12. Speakers      (.speaker ...)
   13. FAQ           (.faq .faq-item ...)
   14. Forms         (.form .steps .field .input ...)
   15. Admin         (.admin-gate .kpis .toolbar .table .modal .queue-item ...)
   16. Feedback      (.toast .spinner .skeleton .empty ...)
   17. Utilities & motion (.reveal)
   18. Responsive breakpoints (720px / 1024px)
   19. Accessibility (focus-visible, reduced motion, forced colors)
   20. Print
   ========================================================================= */


/* =========================================================================
   00. TOKENS
   ========================================================================= */
:root{
  /* ---- brand: navy ---- */
  --navy:#0B2E4F;
  --navy-700:#0A2540;
  --navy-900:#071B2E;
  --navy-soft:#123E68;

  /* ---- brand: gold ---- */
  --gold:#C9A24B;
  --gold-600:#B08C36;
  --gold-100:#F6EEDC;

  /* ---- neutrals ---- */
  --ink:#0F172A;
  --muted:#5B6B7C;          /* 5.46:1 on #FFF — AA for normal text */
  --line:#E3E8EF;

  /* ---- surfaces ---- */
  --bg:#FFFFFF;
  --bg-soft:#F6F8FB;

  /* ---- status ---- */
  --ok:#15803D;
  --warn:#B45309;
  --danger:#B91C1C;

  /* ---- shape ---- */
  --radius:16px;
  --radius-sm:10px;

  /* ---- elevation ---- */
  --shadow:0 6px 24px rgba(11,46,79,.08);
  --shadow-lg:0 18px 50px rgba(11,46,79,.16);

  /* ---- derived / helper tokens (additions, documented in return value) ---- */
  --gold-ink:#6F5518;                 /* gold-family text on light bg — 6.9:1 on #FFF */
  --wa:#25D366;                       /* WhatsApp brand green */
  --wa-700:#1DA851;
  --ok-100:#E7F5EC;
  --warn-100:#FDF1E1;
  --danger-100:#FBEAEA;
  --navy-100:#E9EFF6;
  --shadow-sm:0 2px 8px rgba(11,46,79,.06);
  --ring:0 0 0 4px rgba(201,162,75,.28);

  /* ---- rhythm ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;
  --container:1160px;
  --header-h:72px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --t-fast:.16s;
  --t:.24s;
  --t-slow:.5s;

  /* ---- type ---- */
  --font:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;

  /* موضع سهم الـ<select>: الطرف النهائي للسطر.
     background-position ملهاش نسخة منطقية (inline-start/inline-end)، فبنحط
     القيمة كلها في متغيّر واحد وبنقلبها مرة واحدة حسب اتجاه الصفحة، بدل ما
     نكرر تعريف الخلفية أو نفرّع الملف. */
  --select-arrow-pos:left 18px center,left 12px center;

  color-scheme:light;
}

/* -------------------------------------------------------------------------
   الاتجاه واللغة — نفس الستايل شيت بيخدم الموقعين (عربي RTL / إنجليزي LTR)
   ------------------------------------------------------------------------- */

/* في LTR سهم الـ<select> لازم يقعد على اليمين (نهاية السطر) بدل الشمال. */
html[dir="ltr"]{ --select-arrow-pos:right 18px center,right 12px center; }

/* الخط اللاتيني — نفس المتغيّر، من غير ما نفرّع الملف أو نكرر أي قاعدة. */
html[lang="en"]{
  --font:'IBM Plex Sans','Segoe UI',Roboto,Arial,sans-serif;
}


/* =========================================================================
   01. RESET & BASE
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-block-start:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  font-weight:400;
  line-height:1.75;               /* Arabic body rhythm */
  letter-spacing:0;               /* never negative tracking on Arabic */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* اللاتيني بيتحمّل تباعد سطور أقل من العربي، والعناوين بتستحمل tracking عادي.
   تعديل خفيف ومقصور على html[lang="en"] — النسخة العربية ما بتتأثرش إطلاقاً. */
html[lang="en"] body{ line-height:1.6; }
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] .section-title,
html[lang="en"] .hero__title{ letter-spacing:normal; }

img,svg,video,canvas{ max-width:100%; height:auto; display:block; }

button,input,select,textarea{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}

button{ background:none; border:0; padding:0; cursor:pointer; }

a{ color:var(--navy); text-decoration:none; transition:color var(--t-fast) var(--ease); }
a:hover{ color:var(--gold-600); }

hr{ border:0; border-block-start:1px solid var(--line); margin-block:var(--sp-6); }

ul,ol{ margin:0; padding-inline-start:1.25em; }

table{ border-collapse:collapse; width:100%; }

::selection{ background:var(--gold-100); color:var(--navy-900); }

/* Scrollbar (WebKit only, harmless elsewhere) */
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-track{ background:var(--bg-soft); }
*::-webkit-scrollbar-thumb{ background:#C7D2DF; border-radius:99px; }
*::-webkit-scrollbar-thumb:hover{ background:#A9B8C9; }


/* =========================================================================
   02. TYPOGRAPHY
   ========================================================================= */
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--sp-3);
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
  color:var(--navy-900);
  text-wrap:balance;
}
h1{ font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem); line-height:1.25; }
h2{ font-size:clamp(1.55rem,1.1rem + 1.7vw,2.35rem); line-height:1.3; }
h3{ font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); }
h4{ font-size:clamp(1.1rem,1rem + .45vw,1.3rem); }
h5{ font-size:1.05rem; }
h6{ font-size:.95rem; text-transform:none; }

p{ margin:0 0 var(--sp-4); }
p:last-child{ margin-block-end:0; }

small{ font-size:.875rem; }
strong,b{ font-weight:600; }

code,kbd,samp{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.1em .4em;
  direction:ltr;
  unicode-bidi:embed;
}


/* =========================================================================
   03. LAYOUT
   ========================================================================= */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--sp-5);
}

.section{
  padding-block:clamp(var(--sp-8),4vw + 1.5rem,var(--sp-10));
  position:relative;
}

.section--soft{
  background:var(--bg-soft);
  border-block:1px solid var(--line);
}

.section--navy{
  background:
    radial-gradient(120% 140% at 85% 0%, var(--navy-soft) 0%, rgba(18,62,104,0) 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 60%, var(--navy-900) 100%);
  color:#EAF1F8;
  border-block:0;
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4{ color:#FFFFFF; }
.section--navy .section-sub,
.section--navy .muted{ color:#B9CBDD; }
/* :not(.btn) مهمة — من غيرها القاعدة دي تخصيصها (0,1,1) بتغلب
   .btn{color:var(--btn-fg)} تخصيصها (0,1,0)، فالزرار الدهبي جوه القسم الكحلي
   كان بياخد نص دهبي فوق خلفية دهبية = نص مختفي. */
.section--navy a:not(.btn){ color:var(--gold); }
.section--navy a:not(.btn):hover{ color:#E4C97F; }

.section-head{
  max-width:62ch;
  margin-inline:auto;
  margin-block-end:var(--sp-7);
  text-align:center;
}
.section-head--start{ text-align:start; margin-inline:0; }

.section-title{
  margin:0 0 var(--sp-3);
  font-size:clamp(1.55rem,1.1rem + 1.7vw,2.35rem);
  font-weight:700;
  line-height:1.3;
  color:var(--navy-900);
  position:relative;
}
.section-title::after{
  content:"";
  display:block;
  inline-size:56px;
  block-size:3px;
  margin-block-start:var(--sp-4);
  margin-inline:auto;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-600) 100%);
}
.section-head--start .section-title::after{ margin-inline:0; }
.section--navy .section-title{ color:#FFFFFF; }

.section-sub{
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,.97rem + .2vw,1.125rem);
  line-height:1.85;
}

.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.stack{ display:flex; flex-direction:column; gap:var(--sp-4); }
.stack--sm{ gap:var(--sp-2); }
.stack--lg{ gap:var(--sp-6); }


/* =========================================================================
   04. HEADER
   ========================================================================= */
.site-header{
  position:sticky;
  inset-block-start:0;
  z-index:60;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-block-end:1px solid var(--line);
}
.site-header::after{
  content:"";
  display:block;
  block-size:2px;
  background:linear-gradient(90deg,rgba(201,162,75,0) 0%,var(--gold) 50%,rgba(201,162,75,0) 100%);
  opacity:.55;
}

.site-header__inner{
  min-block-size:var(--header-h);
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--sp-5);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  color:var(--navy-900);
  font-weight:700;
  white-space:nowrap;
  margin-inline-end:auto;
}
.brand:hover{ color:var(--navy-900); }

.brand__mark{
  inline-size:40px;
  block-size:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%);
  color:var(--gold);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:0;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.45), var(--shadow-sm);
}

.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.25;
  font-size:1.05rem;
}
.brand__text small{
  font-weight:500;
  font-size:.75rem;
  color:var(--muted);
}

.nav{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
}
.nav a{
  display:inline-flex;
  align-items:center;
  min-block-size:40px;
  padding-inline:var(--sp-4);
  border-radius:var(--radius-sm);
  color:var(--navy-700);
  font-weight:500;
  font-size:.97rem;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:hover{ background:var(--navy-100); color:var(--navy-900); }
.nav a.is-active{
  color:var(--navy-900);
  font-weight:600;
  background:var(--gold-100);
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.45);
}

.header-cta{ display:inline-flex; align-items:center; gap:var(--sp-2); }

/* ---- مفتاح اللغة (عربي ⇄ English) ----
   حبّة ghost صغيرة جنب زرار الدعوة. بتفضل ظاهرة على الموبايل جنب البرجر
   (مش زي .header-cta اللي بتتخفي)، لأنها الطريقة الوحيدة للوصول للنسخة
   التانية. الارتفاع 40px والعرض ≥44px عشان هدف اللمس. */
.lang-switch{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-block-size:40px;
  min-inline-size:44px;
  padding-inline:var(--sp-4);
  border-radius:99px;
  border:1px solid rgba(11,46,79,.28);
  background:transparent;
  color:var(--navy-700);
  font-size:.9rem;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.lang-switch:hover,
.lang-switch:focus-visible{
  background:var(--navy-100);
  border-color:var(--navy);
  color:var(--navy-900);
}
/* لو قعدت فوق سطح كحلي (شريط إعلانات/قسم كحلي) تفضل مقروءة */
.pb-banner .lang-switch,
.section--navy .lang-switch,
.hero .lang-switch,
.site-footer .lang-switch{
  color:#FFFFFF;
  border-color:rgba(255,255,255,.55);
}
.pb-banner .lang-switch:hover,
.section--navy .lang-switch:hover,
.hero .lang-switch:hover,
.site-footer .lang-switch:hover{
  background:rgba(255,255,255,.14);
  border-color:#FFFFFF;
  color:#FFFFFF;
}

.burger{
  display:none;
  inline-size:44px;
  block-size:44px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:#FFFFFF;
  place-items:center;
  color:var(--navy);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.burger:hover{ background:var(--bg-soft); border-color:#CFDAE6; }
.burger span,
.burger span::before,
.burger span::after{
  content:"";
  display:block;
  inline-size:20px;
  block-size:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger span{ position:relative; }
.burger span::before{ position:absolute; inset-block-start:-6px; inset-inline-start:0; }
.burger span::after{ position:absolute; inset-block-start:6px; inset-inline-start:0; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }


/* =========================================================================
   05. FOOTER
   ========================================================================= */
.site-footer{
  background:
    radial-gradient(90% 120% at 100% 0%, var(--navy-soft) 0%, rgba(18,62,104,0) 60%),
    linear-gradient(180deg,var(--navy-700) 0%, var(--navy-900) 100%);
  color:#C6D6E5;
  padding-block:var(--sp-9) var(--sp-6);
  margin-block-start:auto;
  border-block-start:2px solid rgba(201,162,75,.35);
}
.site-footer h3,
.site-footer h4,
.site-footer .card__title{ color:#FFFFFF; }
/* نفس السبب: من غير :not(.btn) زرار الواتساب في الفوتر كان بياخد
   نص فاتح #DCE7F2 فوق الأخضر بدل النص الغامق بتاعه. */
.site-footer a:not(.btn){ color:#DCE7F2; }
.site-footer a:not(.btn):hover{ color:var(--gold); }

.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
  align-items:start;
}
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:var(--sp-2); }
.footer-grid .brand,
.footer-grid .brand__text{ color:#FFFFFF; }
.footer-grid .brand__text small{ color:#9FB6CB; }

.footer-note{
  margin-block-start:var(--sp-7);
  padding-block-start:var(--sp-4);
  border-block-start:1px solid rgba(255,255,255,.12);
  color:#9FB6CB;
  font-size:.86rem;
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  align-items:center;
  justify-content:space-between;
}


/* =========================================================================
   06. HERO
   ========================================================================= */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#EAF1F8;
  padding-block:clamp(var(--sp-9),6vw + 1rem,120px);
  background:var(--navy-900);
}

/* One tasteful background treatment: layered navy gradients + faint gold
   diagonal hairlines, all pure CSS (no images). */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(75% 90% at 88% 8%, rgba(18,62,104,.95) 0%, rgba(18,62,104,0) 60%),
    radial-gradient(60% 80% at 8% 96%, rgba(201,162,75,.16) 0%, rgba(201,162,75,0) 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 55%, var(--navy-900) 100%);
}
.hero__bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    135deg,
    rgba(201,162,75,.14) 0px,
    rgba(201,162,75,.14) 1px,
    rgba(201,162,75,0) 1px,
    rgba(201,162,75,0) 18px
  );
  opacity:.5;
  mask-image:linear-gradient(200deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 70%);
  -webkit-mask-image:linear-gradient(200deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 70%);
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:1px;
  background:linear-gradient(90deg,rgba(201,162,75,0),rgba(201,162,75,.6),rgba(201,162,75,0));
}

.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
  align-items:center;
}

.hero__content{ max-width:64ch; }

.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:6px 14px;
  border-radius:99px;
  background:rgba(201,162,75,.14);
  color:var(--gold);
  border:1px solid rgba(201,162,75,.42);
  font-size:.85rem;
  font-weight:600;
  margin-block-end:var(--sp-4);
}
.hero__badge::before{
  content:"";
  inline-size:8px; block-size:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,75,.22);
}

.hero__title{
  margin:0 0 var(--sp-4);
  color:#FFFFFF;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);
  font-weight:700;
  line-height:1.28;
  letter-spacing:0;
  text-wrap:balance;
}
.hero__title em{
  font-style:normal;
  color:var(--gold);
  box-shadow:inset 0 -.35em 0 rgba(201,162,75,.16);
}

.hero__lead{
  margin:0 0 var(--sp-6);
  color:#C6D6E5;
  font-size:clamp(1.02rem,.98rem + .4vw,1.2rem);
  line-height:1.9;
  max-width:56ch;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  align-items:center;
}

.hero__card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:var(--sp-6);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#EAF1F8;
}
.hero__card h3,.hero__card h4{ color:#FFFFFF; }
.hero__card .muted{ color:#B9CBDD; }

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3);
  margin-block-start:var(--sp-7);
  padding-block-start:var(--sp-6);
  border-block-start:1px solid rgba(255,255,255,.14);
}

.hero-stat{ text-align:center; }

.hero-stat__num{
  display:block;
  color:var(--gold);
  font-weight:700;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}

.hero-stat__label{
  display:block;
  color:#B9CBDD;
  font-size:.83rem;
  line-height:1.6;
  margin-block-start:2px;
}


/* =========================================================================
   07. BUTTONS
   ========================================================================= */
.btn{
  --btn-bg:var(--navy);
  --btn-fg:#FFFFFF;
  --btn-bd:transparent;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-block-size:48px;      /* >= 44px touch target */
  min-inline-size:44px;
  padding:12px 22px;
  border-radius:var(--radius-sm);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:600;
  font-size:1rem;
  line-height:1.4;
  letter-spacing:0;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t) var(--ease),
             background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); color:var(--btn-fg); }
.btn:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }

.btn--gold{
  --btn-bg:var(--gold);
  --btn-fg:#0B2E4F;                /* كحلي غامق على الدهبي — 7.9:1 */
  --btn-bd:var(--gold-600);
  color:#0B2E4F;                   /* لون صريح مش وراثة، كخط دفاع تاني */
  box-shadow:0 6px 18px rgba(201,162,75,.28);
}
.btn--gold:hover,
.btn--gold:focus,
.btn--gold:active,
.btn--gold:visited{ color:#0B2E4F; }
.btn--gold:hover{ --btn-bg:#D6B063; box-shadow:0 12px 28px rgba(201,162,75,.34); }

.btn--navy{
  --btn-bg:var(--navy);
  --btn-fg:#FFFFFF;
  --btn-bd:var(--navy);
}
.btn--navy:hover{ --btn-bg:var(--navy-soft); --btn-bd:var(--navy-soft); }

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--navy);
  --btn-bd:var(--navy);
  box-shadow:none;
}
.btn--ghost:hover{ --btn-bg:var(--navy-100); box-shadow:var(--shadow-sm); }
.section--navy .btn--ghost,
.hero .btn--ghost{ --btn-fg:#FFFFFF; --btn-bd:rgba(255,255,255,.55); }
.section--navy .btn--ghost:hover,
.hero .btn--ghost:hover{ --btn-bg:rgba(255,255,255,.12); --btn-bd:#FFFFFF; }

.btn--wa{
  --btn-bg:var(--wa);
  --btn-fg:#06301A;
  --btn-bd:var(--wa-700);
}
.btn--wa:hover{ --btn-bg:#33DC74; }

.btn--sm{
  min-block-size:36px;
  padding:6px 14px;
  font-size:.88rem;
  border-radius:8px;
}

.btn--block{ display:flex; inline-size:100%; }

.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

.btn.is-loading{
  pointer-events:none;
  cursor:progress;
}
.btn.is-loading::after{
  content:"";
  inline-size:1.05em;
  block-size:1.05em;
  flex:0 0 auto;
  border-radius:50%;
  border:2px solid currentColor;
  border-inline-start-color:transparent;
  animation:pb-spin .7s linear infinite;
}


/* =========================================================================
   08. GENERIC COMPONENTS
   ========================================================================= */
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card--pad{ padding:var(--sp-6); }

.card__title{
  margin:0 0 var(--sp-2);
  font-size:1.12rem;
  font-weight:600;
  color:var(--navy-900);
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}

.card__body{
  margin:0;
  color:var(--muted);
  line-height:1.85;
  font-size:.98rem;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:99px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.6;
  white-space:nowrap;
  background:var(--navy-100);
  color:var(--navy-700);
  border:1px solid transparent;
}
.badge--gold{ background:var(--gold-100); color:var(--gold-ink); border-color:rgba(201,162,75,.5); }
.badge--ok{ background:var(--ok-100); color:#0F6030; border-color:rgba(21,128,61,.32); }
.badge--warn{ background:var(--warn-100); color:#8A400A; border-color:rgba(180,83,9,.32); }
.badge--muted{ background:var(--bg-soft); color:var(--muted); border-color:var(--line); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:8px 16px;
  border-radius:99px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--navy-700);
  font-size:.9rem;
  font-weight:500;
}

.divider{
  block-size:1px;
  inline-size:100%;
  border:0;
  margin-block:var(--sp-6);
  background:linear-gradient(90deg,rgba(227,232,239,0),var(--line) 18%,var(--line) 82%,rgba(227,232,239,0));
}

.muted{ color:var(--muted); }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }

/* لازم يفضل بعد أي مكوّن بيحدد display (زي .btn) عشان خاصية hidden تشتغل.
   من غير السطر ده، أي زرار عليه hidden هيفضل ظاهر لأن display بتاع الكلاس
   بيغلب [hidden]{display:none} بتاع المتصفح. */
[hidden]{ display:none !important; }

.sr-only{
  position:absolute !important;
  inline-size:1px; block-size:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.anchor-offset{
  scroll-margin-block-start:calc(var(--header-h) + 20px);
  display:block;
}


/* =========================================================================
   09. COUNTDOWN
   ========================================================================= */
.countdown{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-3);
}

.countdown__label{
  font-size:.9rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0;
}
.section--navy .countdown__label,
.hero .countdown__label{ color:#B9CBDD; }

.cd{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-2);
  inline-size:100%;
  max-inline-size:420px;
  /* كان مكتوب هنا direction:rtl صراحةً — وده كان بيثبّت ترتيب الخانات
     (يوم/ساعة/دقيقة/ثانية) على RTL حتى لو الصفحة LTR. الصفحات العربية أصلاً
     <html dir="rtl"> ومفيش أي أب بيقلب الاتجاه، فالوراثة بتدّي نفس النتيجة
     بالحرف، وفي نفس الوقت الصفحة الإنجليزية بتقرا من الشمال زي ما المفروض. */
  direction:inherit;
}

.cd__box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:10px 4px 8px;
  min-inline-size:0;
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-900) 100%);
  border:1px solid rgba(201,162,75,.3);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
}

.cd__num{
  font-size:clamp(1.25rem,1rem + 1.6vw,2rem);
  font-weight:700;
  line-height:1.15;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  direction:ltr;
  unicode-bidi:isolate;
}

.cd__unit{
  font-size:.72rem;
  font-weight:500;
  color:#B9CBDD;
  line-height:1.4;
}

.cd__sep{
  display:none;                 /* grid layout doesn't need it; kept for markup parity */
  align-self:center;
  color:var(--gold);
  font-weight:700;
  font-size:1.2rem;
  opacity:.6;
}

/* Countdown sitting on a light surface */
.section--soft .cd__box,
.card .cd__box{ box-shadow:var(--shadow-sm); }


/* =========================================================================
   10. LECTURES TABLE (divs, not <table>)
   ========================================================================= */
.lec-table__wrap{
  inline-size:100%;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--bg);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.lec-table{
  display:flex;
  flex-direction:column;
}

.lec-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto auto;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border-block-end:1px solid var(--line);
  border-inline-start:4px solid transparent;
  background:var(--bg);
  transition:background var(--t-fast) var(--ease);
}
.lec-row:last-child{ border-block-end:0; }
.lec-row:hover{ background:var(--bg-soft); }

.lec-row.is-next{
  border-inline-start-color:var(--gold);   /* حافة البداية: يمين في RTL، شمال في LTR */
  background:linear-gradient(90deg,rgba(246,238,220,.55) 0%,rgba(246,238,220,0) 70%);
}
.lec-row.is-next .lec-title{ color:var(--navy-900); font-weight:700; }

.lec-num{
  inline-size:40px;
  block-size:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--navy-100);
  color:var(--navy);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:1rem;
}
.lec-row.is-next .lec-num{
  background:var(--gold);
  color:var(--navy-900);
  box-shadow:0 4px 12px rgba(201,162,75,.35);
}

.lec-title{
  min-inline-size:0;
  font-weight:600;
  font-size:1.02rem;
  color:var(--navy-900);
  line-height:1.5;
  overflow-wrap:anywhere;
}

.lec-meta{
  display:block;
  color:var(--muted);
  font-size:.85rem;
  font-weight:400;
  margin-block-start:2px;
}

.lec-when{
  color:var(--navy-700);
  font-size:.92rem;
  font-weight:500;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.lec-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:99px;
  font-size:.78rem;
  font-weight:600;
  white-space:nowrap;
  background:var(--bg-soft);
  color:var(--muted);
  border:1px solid var(--line);
}
.lec-row.is-next .lec-status{
  background:var(--gold);
  color:var(--navy-900);
  border-color:var(--gold-600);
}


/* =========================================================================
   11. PROBLEM / PROMISE
   ========================================================================= */
.pain-list,
.promise-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--sp-3);
}

.pain-item{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  line-height:1.8;
  box-shadow:var(--shadow-sm);
}

.pain-item__icon{
  flex:0 0 34px;
  inline-size:34px;
  block-size:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--danger-100);
  color:var(--danger);
  font-size:1rem;
  font-weight:700;
  line-height:1;
  margin-block-start:2px;
}

.promise-item{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  background:var(--bg);
  border:1px solid var(--line);
  border-inline-start:3px solid var(--gold);
  border-radius:var(--radius-sm);
  line-height:1.8;
  box-shadow:var(--shadow-sm);
}
.promise-item::before{
  content:"✓";
  flex:0 0 28px;
  inline-size:28px;
  block-size:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gold-100);
  color:var(--gold-ink);
  font-weight:700;
  font-size:.9rem;
  margin-block-start:2px;
}


/* =========================================================================
   12. SPEAKERS
   ========================================================================= */
.speaker{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--sp-2);
  padding:var(--sp-6);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  block-size:100%;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.speaker:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }

.speaker__avatar{
  inline-size:96px;
  block-size:96px;
  border-radius:50%;
  display:grid;
  place-items:center;
  object-fit:cover;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%);
  color:var(--gold);
  font-size:1.6rem;
  font-weight:700;
  box-shadow:0 0 0 3px var(--bg), 0 0 0 5px rgba(201,162,75,.5);
  margin-block-end:var(--sp-2);
}

.speaker__name{
  margin:0;
  font-size:1.1rem;
  font-weight:700;
  color:var(--navy-900);
}

.speaker__role{
  margin:0;
  font-size:.88rem;
  font-weight:600;
  color:var(--gold-ink);
}

.speaker__bio{
  margin:0;
  font-size:.94rem;
  color:var(--muted);
  line-height:1.85;
}


/* =========================================================================
   13. FAQ  (driven by .is-open; also survives native <details>)
   ========================================================================= */
.faq{
  display:grid;
  gap:var(--sp-3);
  max-inline-size:840px;
  margin-inline:auto;
}

.faq-item{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.faq-item:hover{ border-color:#CFDAE6; }

.faq-q{
  inline-size:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  min-block-size:56px;
  padding:var(--sp-4) var(--sp-5);
  background:transparent;
  border:0;
  text-align:start;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  line-height:1.7;
  color:var(--navy-900);
  cursor:pointer;
  list-style:none;                       /* when used as <summary> */
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::marker{ content:""; }
.faq-q::after{
  content:"";
  flex:0 0 12px;
  inline-size:12px;
  block-size:12px;
  border-inline-end:2px solid var(--gold-600);
  border-block-end:2px solid var(--gold-600);
  transform:rotate(45deg);
  transform-origin:center;
  margin-block-end:4px;
  transition:transform var(--t) var(--ease);
}

.faq-a{
  padding:0 var(--sp-5) var(--sp-5);
  color:var(--muted);
  line-height:1.9;
  font-size:.97rem;
  display:none;
}
.faq-a > *:first-child{ margin-block-start:0; }

.faq-item.is-open{
  border-color:rgba(201,162,75,.55);
  box-shadow:var(--shadow);
}
.faq-item.is-open .faq-q{ color:var(--navy-900); }
.faq-item.is-open .faq-q::after{ transform:rotate(-135deg); margin-block-end:-4px; }
.faq-item.is-open .faq-a{ display:block; }

/* Native <details> fallback: browser handles open state */
details.faq-item[open] .faq-a{ display:block; }
details.faq-item[open] .faq-q::after{ transform:rotate(-135deg); margin-block-end:-4px; }


/* =========================================================================
   14. FORMS
   ========================================================================= */
.form{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  inline-size:100%;
}

.form-progress{
  inline-size:100%;
  block-size:8px;
  border-radius:99px;
  background:var(--line);
  overflow:hidden;
}
.form-progress__bar{
  display:block;
  block-size:100%;
  inline-size:0%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold-600) 0%,var(--gold) 100%);
  transition:inline-size var(--t-slow) var(--ease), width var(--t-slow) var(--ease);
}

.steps{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:pbstep;
  /* سياق تكديس محلي: من غيره خط الوصل (z-index:-1) بيختفي ورا خلفية الكارت */
  position:relative;
  z-index:0;
}

.step{
  flex:1 1 0;
  min-inline-size:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:relative;
  color:var(--muted);
  font-size:.82rem;
  font-weight:500;
  text-align:center;
  line-height:1.5;
}
.step::before{
  counter-increment:pbstep;
  content:counter(pbstep);
  inline-size:34px;
  block-size:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--line);
  color:var(--muted);
  font-weight:700;
  font-size:.9rem;
  font-variant-numeric:tabular-nums;
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
/* connector line between circles (RTL-safe: it spans the block, not a side) */
.step::after{
  content:"";
  position:absolute;
  inset-block-start:17px;
  inset-inline-start:calc(-50% + 17px);
  inline-size:calc(100% - 34px);
  block-size:2px;
  background:var(--line);
  z-index:-1;
}
.step:first-child::after{ display:none; }

.step.is-active{ color:var(--navy-900); font-weight:600; }
.step.is-active::before{
  background:var(--navy);
  border-color:var(--navy);
  color:#FFFFFF;
  box-shadow:0 0 0 4px rgba(11,46,79,.12);
}

.step.is-done{ color:var(--navy-700); }
.step.is-done::before{
  content:"✓";
  background:var(--gold);
  border-color:var(--gold-600);
  color:var(--navy-900);
}

.form-step{ display:none; }
.form-step.is-active{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  animation:pb-fade-up var(--t-slow) var(--ease) both;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-inline-size:0;
}

.field__label{
  font-size:.94rem;
  font-weight:600;
  color:var(--navy-900);
  display:flex;
  align-items:center;
  gap:6px;
}

.field__hint{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.7;
}

.input,
.select,
.textarea{
  inline-size:100%;
  min-block-size:56px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-size:1rem;
  line-height:1.6;
  font-family:inherit;
  transition:border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
  appearance:none;
  -webkit-appearance:none;
}
.input::placeholder,
.textarea::placeholder{ color:#6B7A8B; opacity:1; }   /* 4.6:1 على الأبيض */

.input:hover,
.select:hover,
.textarea:hover{ border-color:#CFDAE6; }

.input:focus,
.select:focus,
.textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:var(--ring);
  background:#FFFDF8;
}

.select{
  padding-inline-end:44px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--navy) 50%),
    linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  /* السهم مرسوم بمثلثين متماثلين حول محور رأسي، فالمطلوب هو موضعه بس:
     نهاية السطر — شمال في RTL ويمين في LTR عبر --select-arrow-pos. */
  background-position:var(--select-arrow-pos);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}

.textarea{
  min-block-size:120px;
  resize:vertical;
  line-height:1.8;
}

.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid{
  border-color:var(--danger);
  background:#FFF8F8;
}
.input.is-invalid:focus,
.select.is-invalid:focus,
.textarea.is-invalid:focus{
  box-shadow:0 0 0 4px rgba(185,28,28,.16);
}

.field__error{
  font-size:13px;
  line-height:1.6;
  color:var(--danger);
  font-weight:500;
  min-block-size:0;
  display:none;
}
.field__error:not(:empty){ display:flex; align-items:center; gap:6px; }
.field__error:not(:empty)::before{ content:"!"; font-weight:700; }

.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  align-items:center;
  justify-content:space-between;
  margin-block-start:var(--sp-2);
  padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--line);
}

.req{
  color:var(--danger);
  font-weight:700;
  font-size:.9em;
  line-height:1;
}

/* Autofill: keep the navy/white look */
.input:-webkit-autofill,
.textarea:-webkit-autofill,
.select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 1000px #FFFDF8 inset;
}


/* =========================================================================
   15. ADMIN
   ========================================================================= */
.admin-gate{
  max-inline-size:440px;
  margin-inline:auto;
  margin-block:var(--sp-9);
  padding:var(--sp-7);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  text-align:center;
}
.admin-gate .field{ text-align:start; }
.admin-gate .brand{ justify-content:center; margin-inline:auto; }

.kpis{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);
  margin-block-end:var(--sp-5);
}

.kpi{
  padding:var(--sp-4) var(--sp-5);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  border-inline-start:3px solid var(--navy);
  min-inline-size:0;
}
.kpi:nth-child(2){ border-inline-start-color:var(--gold); }
.kpi:nth-child(4){ border-inline-start-color:var(--ok); }
.kpi:nth-child(5){ border-inline-start-color:var(--warn); }

.kpi__num{
  display:block;
  font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem);
  font-weight:700;
  line-height:1.2;
  color:var(--navy-900);
  font-variant-numeric:tabular-nums;
}

.kpi__label{
  display:block;
  font-size:.84rem;
  color:var(--muted);
  margin-block-start:2px;
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  margin-block-end:var(--sp-4);
}

.toolbar__group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2);
  min-inline-size:0;
}
.toolbar__group--end{ margin-inline-start:auto; }

.search{
  flex:1 1 220px;
  min-inline-size:0;
  min-block-size:44px;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  background:var(--bg-soft);
  font-size:.95rem;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.search:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--bg);
  box-shadow:var(--ring);
}

.table-wrap{
  inline-size:100%;
  max-inline-size:100%;
  overflow-x:auto;
  overflow-y:auto;
  max-block-size:70vh;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;
}

.table{
  inline-size:100%;
  min-inline-size:900px;
  border-collapse:separate;
  border-spacing:0;
  font-size:.9rem;
}
.table th{
  position:sticky;
  inset-block-start:0;
  z-index:2;
  background:var(--navy);
  color:#FFFFFF;
  font-weight:600;
  font-size:.84rem;
  text-align:start;
  padding:12px 14px;
  white-space:nowrap;
  border-block-end:2px solid rgba(201,162,75,.55);
}
.table td{
  padding:11px 14px;
  border-block-end:1px solid var(--line);
  color:var(--ink);
  vertical-align:middle;
  line-height:1.6;
}
.table tbody tr:nth-child(even) td{ background:var(--bg-soft); }
.table tbody tr:hover td{ background:var(--gold-100); }
.table tbody tr:last-child td{ border-block-end:0; }
.table td[data-num],
.table .nowrap{ font-variant-numeric:tabular-nums; }

.row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.chk{
  inline-size:20px;
  block-size:20px;
  flex:0 0 20px;
  accent-color:var(--navy);
  border-radius:4px;
  cursor:pointer;
}

.is-sent,
.is-pending{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:99px;
  font-size:.78rem;
  font-weight:600;
  white-space:nowrap;
  border:1px solid transparent;
}
.is-sent{ background:var(--ok-100); color:#0F6030; border-color:rgba(21,128,61,.32); }
.is-sent::before{ content:"✓"; font-weight:700; }
.is-pending{ background:var(--warn-100); color:#8A400A; border-color:rgba(180,83,9,.32); }
.is-pending::before{ content:"•"; font-size:1.1em; line-height:1; }

/* تلوين صفوف الجدول — كلاسات منفصلة عن حبّات الحالة أعلاه، لأن الحبّة
   display:inline-flex ولو اتحطت على <tr> بتكسر تخطيط الجدول بالكامل. */
.table tr.row--sent   td{ background:rgba(21,128,61,.045); }
.table tr.row--pending td{ background:transparent; }

/* ---- modal ---- */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--sp-4);
  background:rgba(7,27,46,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.modal.is-open,
.modal[open]{ display:flex; animation:pb-fade var(--t) var(--ease) both; }

.modal__box{
  inline-size:100%;
  max-inline-size:640px;
  max-block-size:88vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:pb-pop var(--t) var(--ease) both;
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  background:var(--navy);
  color:#FFFFFF;
  border-block-end:2px solid rgba(201,162,75,.5);
}
.modal__head h2,
.modal__head h3{ margin:0; color:#FFFFFF; font-size:1.05rem; }

.modal__body{
  padding:var(--sp-5);
  overflow-y:auto;
  flex:1 1 auto;
  min-block-size:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.modal__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  background:var(--bg-soft);
  border-block-start:1px solid var(--line);
}

.queue-item{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  border-inline-start:3px solid var(--gold);
  font-size:.93rem;
  line-height:1.6;
}
.queue-item strong{ color:var(--navy-900); }
.queue-item .muted{ font-size:.82rem; display:block; }
.queue-item.is-sent{
  border-inline-start-color:var(--ok);
  background:var(--ok-100);
  border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4);
}


/* =========================================================================
   16. FEEDBACK
   ========================================================================= */
.toast-wrap{
  position:fixed;
  inset-block-end:20px;
  inset-inline:0;
  z-index:200;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:var(--sp-2);
  padding-inline:var(--sp-4);
  pointer-events:none;
}

.toast{
  pointer-events:auto;
  max-inline-size:min(480px,92vw);
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:12px 18px;
  border-radius:var(--radius-sm);
  background:var(--navy-900);
  color:#FFFFFF;
  font-size:.94rem;
  font-weight:500;
  line-height:1.6;
  box-shadow:var(--shadow-lg);
  border-inline-start:4px solid var(--gold);
  animation:pb-toast-in var(--t) var(--ease) both;
}
.toast::before{ content:"•"; font-weight:700; color:var(--gold); }
.toast--ok{ border-inline-start-color:var(--ok); background:#0B3A22; }
.toast--ok::before{ content:"✓"; color:#6EE7A2; }
.toast--err{ border-inline-start-color:var(--danger); background:#4A1111; }
.toast--err::before{ content:"!"; color:#FCA5A5; }
.toast--info{ border-inline-start-color:var(--navy-soft); background:var(--navy-900); }
.toast--info::before{ content:"i"; color:#93C5FD; font-style:normal; }
.toast.is-out{ animation:pb-toast-out var(--t) var(--ease) both; }

.spinner{
  display:inline-block;
  inline-size:22px;
  block-size:22px;
  border-radius:50%;
  border:2.5px solid var(--line);
  border-inline-start-color:var(--gold);
  animation:pb-spin .7s linear infinite;
  vertical-align:middle;
}
.spinner--lg{ inline-size:36px; block-size:36px; border-width:3px; }

.skeleton{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:#EDF1F6;
  min-block-size:16px;
  color:transparent;
  user-select:none;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  animation:pb-shimmer 1.3s infinite;
}

.empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  text-align:center;
  padding:var(--sp-9) var(--sp-5);
  color:var(--muted);
  line-height:1.8;
}

.empty__icon{
  inline-size:64px;
  block-size:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--bg-soft);
  border:1px solid var(--line);
  color:var(--navy-soft);
  font-size:1.6rem;
  margin-block-end:var(--sp-2);
}


/* =========================================================================
   17. UTILITIES & MOTION
   ========================================================================= */
/* الإخفاء الابتدائي مشروط بكلاس .js على <html> — بيتحط من سكربت صغير في
   الـ<head>. لو الـJS اتعطّل أو وقع بخطأ، الكلاس مش هيتحط، وبالتالي القاعدة
   دي مش هتنطبق والمحتوى كله هيفضل ظاهر بدل ما الصفحة تطلع بيضا. */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  will-change:opacity,transform;
}
.js .reveal.is-in{
  opacity:1;
  transform:none;
}

@keyframes pb-spin{ to{ transform:rotate(360deg); } }

@keyframes pb-shimmer{ 100%{ transform:translateX(100%); } }

@keyframes pb-fade{ from{ opacity:0; } to{ opacity:1; } }

@keyframes pb-fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

@keyframes pb-pop{
  from{ opacity:0; transform:translateY(12px) scale(.98); }
  to{ opacity:1; transform:none; }
}

@keyframes pb-toast-in{
  from{ opacity:0; transform:translateY(16px) scale(.98); }
  to{ opacity:1; transform:none; }
}

@keyframes pb-toast-out{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateY(10px) scale(.98); }
}


/* =========================================================================
   18. RESPONSIVE
   ========================================================================= */

/* ---- very small phones (<=360px): keep the countdown 4-across ---- */
@media (max-width:380px){
  .container{ padding-inline:var(--sp-4); }
  .cd{ gap:6px; }
  .cd__box{ padding:8px 2px 6px; }
  .cd__num{ font-size:1.15rem; }
  .cd__unit{ font-size:.66rem; }
  .btn{ padding-inline:16px; }
}

/* ---- tablet and up ---- */
@media (min-width:720px){
  .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }

  .hero-stats{ gap:var(--sp-4); }

  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  .cd{ gap:var(--sp-3); }

  .form-actions{ flex-wrap:nowrap; }
}

/* ---- desktop ---- */
@media (min-width:1024px){
  .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

  .hero__inner{ grid-template-columns:1.15fr .85fr; gap:var(--sp-9); }

  .kpis{ grid-template-columns:repeat(5,minmax(0,1fr)); }

  .section-head{ margin-block-end:var(--sp-8); }
}

/* ---- mobile navigation + stacked tables (<=720px) ---- */
@media (max-width:719.98px){
  :root{ --header-h:64px; }

  .burger{ display:grid; }

  .header-cta{ display:none; }

  /* مفتاح اللغة بيفضل ظاهر (زرار الدعوة هو اللي بيتخفي)، بس بمقاس أضيق
     عشان يقعد جنب البرجر من غير ما يزقّه بره الشاشة. */
  .lang-switch{ padding-inline:var(--sp-3); font-size:.85rem; }

  .nav{
    position:absolute;
    inset-block-start:100%;
    inset-inline:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--sp-3) var(--sp-5) var(--sp-5);
    background:#FFFFFF;
    border-block-end:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    display:none;
  }
  .nav.is-open{ display:flex; animation:pb-fade-up var(--t) var(--ease) both; }
  .nav a{
    min-block-size:48px;
    padding-inline:var(--sp-3);
    border-block-end:1px solid var(--line);
    border-radius:0;
    font-size:1rem;
  }
  .nav a:last-child{ border-block-end:0; }
  .nav a.is-active{ border-radius:var(--radius-sm); }
  .nav .btn{ margin-block-start:var(--sp-3); }

  .site-header{ position:sticky; }
  .site-header__inner{ position:relative; min-block-size:var(--header-h); }

  /* Hero */
  .hero__card{ padding:var(--sp-5); }
  .hero-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); }
  .hero-stat__label{ font-size:.76rem; }

  /* Lectures become stacked cards */
  .lec-table{ gap:var(--sp-3); padding:var(--sp-3); background:var(--bg-soft); }
  .lec-table__wrap{ border:0; background:transparent; box-shadow:none; overflow:visible; }
  .lec-row{
    grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:
      "num  title"
      "when when"
      "stat stat";
    row-gap:var(--sp-2);
    padding:var(--sp-4);
    border:1px solid var(--line);
    border-inline-start:4px solid transparent;
    border-radius:var(--radius-sm);
    background:var(--bg);
    box-shadow:var(--shadow-sm);
  }
  .lec-row:last-child{ border-block-end:1px solid var(--line); }
  .lec-num{ grid-area:num; }
  .lec-title{ grid-area:title; }
  .lec-when{ grid-area:when; white-space:normal; }
  /* الحالة + زرار الزوم متلفوفين في .row-actions، فالتموضع لازم يتحط عليها هي
     (عنصر الشبكة الحقيقي) مش على .lec-status اللي جواها */
  .lec-row > .row-actions{
    grid-area:stat;
    justify-self:start;
    flex-wrap:wrap;
    white-space:normal;
  }

  /* Steps: hide the labels, keep circles */
  .step{ font-size:0; gap:0; }
  .step::before{ font-size:.9rem; }

  /* Admin: horizontal scroll + sticky bottom toolbar */
  .table-wrap{ max-block-size:none; border-radius:var(--radius-sm); }
  .table{ min-inline-size:760px; font-size:.86rem; }

  .toolbar{
    position:sticky;
    inset-block-end:0;
    z-index:50;
    margin-block-end:0;
    border-radius:var(--radius-sm) var(--radius-sm) 0 0;
    box-shadow:0 -8px 24px rgba(11,46,79,.12);
  }
  .toolbar__group--end{ margin-inline-start:0; inline-size:100%; }
  .toolbar .btn{ flex:1 1 auto; }

  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); }
  .kpi{ padding:var(--sp-3) var(--sp-4); }

  .modal{ padding:0; align-items:flex-end; }
  .modal__box{ max-inline-size:100%; max-block-size:92vh; border-radius:var(--radius) var(--radius) 0 0; }

  .queue-item{ grid-template-columns:32px minmax(0,1fr); row-gap:var(--sp-2); }

  .toast-wrap{ inset-block-end:12px; }

  .section-head{ text-align:center; }
  .form-actions{ justify-content:stretch; }
  .form-actions .btn{ flex:1 1 45%; }
}

/* ---- شاشات ضيقة (<=480px): مساحة لمفتاح اللغة جنب البرجر ----
   على 360px الهيدر بيبقى: لوجو + اسم + وصف + مفتاح اللغة + برجر، والمجموع
   بيعدّي عرض الشاشة فالبرجر كان ممكن يتقص. بنشيل سطر الوصف الصغير من هيدر
   الموبايل بس (الفوتر ما بيتأثرش) ونضيّق المسافات.
   لازم يفضل بعد بلوك 719.98px عشان يغلبه في قيم .lang-switch. */
@media (max-width:479.98px){
  .site-header__inner{ gap:var(--sp-2); }
  .site-header .brand__text small{ display:none; }
  .lang-switch{ padding-inline:10px; font-size:.82rem; }
}


/* =========================================================================
   19. ACCESSIBILITY
   ========================================================================= */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}
.section--navy :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.modal__head :focus-visible,
.table th :focus-visible{
  outline-color:var(--gold);
  outline-offset:3px;
}
:focus:not(:focus-visible){ outline:none; }

/* Skip link (uses .sr-only, becomes visible on focus) */
.sr-only:focus,
.sr-only:focus-visible{
  position:fixed !important;
  inset-block-start:12px;
  inset-inline-start:12px;
  inline-size:auto;
  block-size:auto;
  padding:10px 16px;
  margin:0;
  clip:auto;
  clip-path:none;
  background:var(--navy);
  color:#FFFFFF;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  z-index:999;
}

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

@media (forced-colors: active){
  .btn,.card,.input,.select,.textarea,.faq-item,.lec-row,.kpi,.toolbar,.modal__box{
    border:1px solid CanvasText;
  }
  .cd__box,.badge,.pill,.is-sent,.is-pending{ border:1px solid CanvasText; }
  .hero__bg{ display:none; }
}


/* =========================================================================
   20. PRINT
   ========================================================================= */
@media print{
  :root{ --shadow:none; --shadow-lg:none; --shadow-sm:none; }
  body{ background:#FFFFFF; color:#000000; font-size:12pt; line-height:1.6; }
  .site-header,.site-footer,.burger,.nav,.header-cta,
  .btn,.toolbar,.toast-wrap,.modal,.form-actions,
  .hero__bg,.hero__actions,.row-actions,.chk,.spinner,.skeleton{
    display:none !important;
  }
  .hero{ background:#FFFFFF; color:#000000; padding-block:0; }
  .hero__title,.hero__lead,.section-title,.section-sub{ color:#000000; }
  .section,.section--navy,.section--soft{
    background:#FFFFFF !important;
    color:#000000 !important;
    border:0;
    padding-block:12pt;
  }
  .card,.lec-row,.faq-item,.kpi{ border:1px solid #999999; box-shadow:none; break-inside:avoid; }
  .table-wrap{ overflow:visible; max-block-size:none; border:0; }
  .table{ min-inline-size:0; }
  .table th{ position:static; background:#EEEEEE; color:#000000; }
  .faq-a{ display:block !important; }
  a[href]::after{ content:""; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   16. إضافات مرحلة الدمج — اللوجو الحقيقي، صور المحاضرين، مجموعات الاختيار،
       والخريطة الزمنية للبرنامج (منقولة عن النسخة القديمة بهوية PassBoard)
   ========================================================================== */

/* ---- اللوجو الحقيقي بدل حرفَي PB ---- */
.brand__logo{
  inline-size:44px;
  block-size:44px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(201,162,75,.55), 0 2px 8px rgba(7,27,46,.18);
}
.site-footer .brand__logo{ inline-size:52px; block-size:52px; }
@media (max-width:719.98px){
  .brand__logo{ inline-size:38px; block-size:38px; }
}

/* ---- صور المحاضرين ---- */
.speaker__photo{
  inline-size:132px;
  block-size:132px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%;
  display:block;
  margin-inline:auto;
  margin-block-end:var(--sp-4);
  background:var(--bg-soft);
  box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px var(--gold), 0 10px 26px rgba(11,46,79,.18);
}
.speaker__creds{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin-block-start:var(--sp-4);
  padding-block-start:var(--sp-4);
  border-block-start:1px solid var(--line);
  text-align:start;
}
.speaker__creds span{
  position:relative;
  padding-inline-start:20px;
  font-size:.9rem;
  line-height:1.7;
  color:var(--muted);
}
.speaker__creds span::before{
  content:"✓";
  position:absolute;
  inset-inline-start:0;
  color:var(--gold-ink);
  font-weight:700;
}

/* ---- eyebrow: سطر تصنيف صغير فوق العناوين ---- */
.eyebrow{
  display:inline-block;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin-block-end:var(--sp-3);
}
.section--navy .eyebrow{ color:var(--gold); }

/* ---- مجموعات الاختيار (radio / checkbox) ---- */
.options{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-2);
}
.options.inline{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.options.chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  grid-template-columns:none;
}
.option{ display:block; }
.option input{
  position:absolute;
  opacity:0;
  inline-size:1px;
  block-size:1px;
  pointer-events:none;
}
.option label{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-block-size:48px;
  padding:10px var(--sp-4);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:#FFFFFF;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.5;
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.options.chips .option label{ min-block-size:42px; padding:8px var(--sp-3); }
.option label::before{
  content:"";
  flex:0 0 auto;
  inline-size:20px;
  block-size:20px;
  border:2px solid #C3CFDC;
  border-radius:50%;
  background:#FFFFFF;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.option input[type="checkbox"] + label::before{ border-radius:6px; }
.option label:hover{ border-color:var(--gold); background:var(--gold-100); }
.option input:checked + label{
  border-color:var(--gold);
  background:var(--gold-100);
  font-weight:600;
}
.option input:checked + label::before{
  border-color:var(--gold-600);
  box-shadow:inset 0 0 0 4px var(--gold-600);
}
.option input[type="checkbox"]:checked + label::before{
  box-shadow:none;
  background:var(--gold-600);
  border-color:var(--gold-600);
}
.option input:focus-visible + label{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
/* حالة الخطأ على مستوى المجموعة */
.field.is-invalid .option label{ border-color:var(--danger); }

/* ---- الخريطة الزمنية للبرنامج ---- */
.timeline{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  margin-block-start:var(--sp-7);
}
.phase{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:var(--sp-5);
  align-items:start;
  padding:var(--sp-5);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.phase--free{ border-inline-start:4px solid var(--gold); }
.phase-no{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-inline-end:var(--sp-4);
  border-inline-end:1px solid var(--line);
}
.phase-no strong{
  font-size:1.7rem;
  line-height:1.1;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.phase-no span{ font-size:.8rem; color:var(--muted); }
.phase-body h3{ font-size:1.12rem; margin-block-end:var(--sp-2); }
.phase-body p{ color:var(--muted); margin-block-end:var(--sp-3); }
.tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:99px;
  background:var(--navy-100);
  color:var(--navy);
  font-size:.78rem;
  font-weight:600;
}
@media (max-width:719.98px){
  .phase{ grid-template-columns:1fr; gap:var(--sp-3); }
  .phase-no{
    flex-direction:row;
    align-items:baseline;
    gap:var(--sp-2);
    padding-inline-end:0;
    border-inline-end:0;
    padding-block-end:var(--sp-3);
    border-block-end:1px solid var(--line);
  }
}

/* ---- تنبيه/إخلاء مسؤولية ---- */
.disclaimer{
  margin-block-start:var(--sp-7);
  padding:var(--sp-5);
  border:1px solid var(--line);
  border-inline-start:4px solid var(--gold);
  border-radius:var(--radius-sm);
  background:var(--bg-soft);
  color:var(--muted);
  font-size:.9rem;
  line-height:1.8;
}
.disclaimer strong{ color:var(--ink); }

/* ---- علامة الحقل الاختياري ---- */
.field__label .opt{
  font-size:.8rem;
  font-weight:500;
  color:var(--muted);
  margin-inline-start:6px;
}

/* ==========================================================================
   17. قسم "عيّنة من المحتوى" (Free Sample)
       كروت نصية خفيفة — مفيش أي صور، عشان القسم ميأثرش على سرعة الصفحة.
   ========================================================================== */

.sample-grid{ margin-block-start:var(--sp-7); }

.sample-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  position:relative;
  border-block-start:3px solid var(--gold);
}
.sample-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--line);
  border-block-start-color:var(--gold-600);
}
@media (prefers-reduced-motion: reduce){
  .sample-card:hover{ transform:none; }
}

/* صف علوي: رقم الكارت + شارة high-yield */
.sample-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}
.sample-card__num{
  font-size:1.45rem;
  font-weight:700;
  line-height:1;
  color:var(--gold-600);
  font-variant-numeric:tabular-nums;
}

/* الفكرة الرئيسية — كحلي بارز. مصطلحات إنجليزية جوه سياق عربي،
   فسايبين اتجاه النص للـbidi عشان الترتيب يطلع صح تلقائياً. */
.sample-card__title{
  margin:0;
  font-size:1.06rem;
  font-weight:700;
  line-height:1.6;
  color:var(--navy);
}

.sample-card__body{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.8;
}

/* السطر الختامي + زرار الدعوة */
.sample-foot{
  margin-block-start:var(--sp-7);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-4);
}
.sample-foot p{
  margin:0;
  max-inline-size:62ch;
  color:var(--muted);
  line-height:1.85;
}

/* ==========================================================================
   18. Sticky CTA — زرار لاصق يظهر بعد ما المستخدم ينزل بره الهيرو
       موبايل: شريط كامل العرض أسفل الشاشة · ديسكتوب: زرار عائم في الركن
       بيتحقن من common.js (PB.initStickyCta) — مش موجود في admin.html
   ========================================================================== */

.sticky-cta{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:60;                      /* فوق المحتوى وتحت المودالات (100) */
  display:flex;
  justify-content:center;
  padding:var(--sp-3) var(--sp-4);
  padding-block-end:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-block-start:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(11,46,79,.14);

  /* مخفي افتراضياً — بيتكشف بإضافة .is-visible من الـJS */
  opacity:0;
  transform:translateY(110%);
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--t) var(--ease),
             transform var(--t) var(--ease),
             visibility 0s linear var(--t);
}
.sticky-cta.is-visible{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--t) var(--ease),
             transform var(--t) var(--ease),
             visibility 0s;
}
.sticky-cta .btn{
  inline-size:100%;
  max-inline-size:520px;
  box-shadow:0 8px 24px rgba(201,162,75,.42);
}

/* الديسكتوب: زرار عائم في الركن السفلي بدل الشريط الكامل */
@media (min-width:720px){
  .sticky-cta{
    inset-inline-start:auto;
    inset-inline-end:var(--sp-6);
    inset-block-end:var(--sp-6);
    padding:0;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:0;
    box-shadow:none;
    transform:translateY(24px);
  }
  .sticky-cta.is-visible{ transform:translateY(0); }
  .sticky-cta .btn{ inline-size:auto; box-shadow:0 10px 30px rgba(11,46,79,.28); }
}

/* الشريط بياخد مكان من أسفل الشاشة على الموبايل، فبنزوّد مساحة تحت المحتوى
   عشان الفوتر أو آخر زرار ما يفضلش متغطّي. الكلاس بيتحط من الـJS. */
@media (max-width:719.98px){
  body.has-sticky-cta{ padding-block-end:88px; }
}

@media (prefers-reduced-motion: reduce){
  .sticky-cta,
  .sticky-cta.is-visible{ transition:none; transform:none; }
}

@media print{
  .sticky-cta{ display:none !important; }
}

/* ==========================================================================
   19. Admin Settings Suite + شريط الإعلانات
       .pb-banner            — شريط إعلان ذهبي على خلفية كحلي فوق الهيدر
       .tabs / .tab / .tabpanel
       .settings-group       — كارت مجموعة إعدادات
       .lec-editor           — محرّر المحاضرات الأربعة
       .tpl-tokens / .tpl-preview — قالب رسالة الواتساب ومعاينتها
       .switch               — مفتاح تشغيل/إيقاف (button + aria-checked)
       كلها بخصائص منطقية (logical properties) عشان الـRTL يشتغل من غير قلب.
   ========================================================================== */

/* ---- شريط الإعلانات ---- */
.pb-banner{
  inline-size:100%;
  background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy) 55%,var(--navy-soft) 100%);
  color:var(--gold-100);
  border-block-end:1px solid rgba(201,162,75,.45);
  box-shadow:inset 0 -1px 0 rgba(201,162,75,.25);
}

.pb-banner__inner{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-block-size:44px;
  padding-block:var(--sp-2);
}

.pb-banner__text{
  flex:1 1 auto;
  min-inline-size:0;
  color:var(--gold-100);
  font-size:.9rem;
  font-weight:500;
  line-height:1.6;
  overflow-wrap:anywhere;
}
a.pb-banner__text{
  text-decoration:underline;
  text-decoration-color:rgba(201,162,75,.7);
  text-underline-offset:3px;
  transition:color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
a.pb-banner__text:hover,
a.pb-banner__text:focus-visible{
  color:#FFFFFF;
  text-decoration-color:var(--gold);
}

.pb-banner__close{
  flex:0 0 auto;
  inline-size:44px;
  block-size:44px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  color:var(--gold);
  font-size:1.5rem;
  line-height:1;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pb-banner__close:hover{ background:rgba(201,162,75,.16); color:#FFFFFF; }
.pb-banner :focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@media (max-width:419.98px){
  .pb-banner__text{ font-size:.84rem; }
}

/* ---- التبويبات ---- */
.tabs{
  display:flex;
  align-items:stretch;
  gap:var(--sp-1);
  inline-size:100%;
  max-inline-size:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-block-end:1px solid var(--line);
  margin-block-end:var(--sp-5);
}

.tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  min-block-size:44px;
  padding-inline:var(--sp-4);
  padding-block:var(--sp-2);
  color:var(--muted);
  font-weight:600;
  font-size:.95rem;
  white-space:nowrap;
  background:transparent;
  border-block-end:3px solid transparent;
  border-start-start-radius:var(--radius-sm);
  border-start-end-radius:var(--radius-sm);
  transition:color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.tab:hover{ color:var(--navy-900); background:var(--bg-soft); }
.tab.is-active{
  color:var(--navy-900);
  background:var(--gold-100);
  border-block-end-color:var(--gold);
}
.tab:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:-3px;
  border-radius:var(--radius-sm);
}

.tabpanel{
  display:block;
  animation:pb-fade var(--t) var(--ease) both;
}
.tabpanel[hidden]{ display:none; }

/* ---- مجموعة إعدادات ---- */
.settings-group{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-5);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border-inline-start:3px solid var(--gold);
  margin-block-end:var(--sp-5);
}

.settings-group__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-block-end:var(--sp-3);
  border-block-end:1px solid var(--line);
}
.settings-group__head h2,
.settings-group__head h3{
  margin:0;
  font-size:1.05rem;
  color:var(--navy-900);
}
.settings-group__head .muted{ font-size:.84rem; }

/* ---- محرّر المحاضرات ---- */
/* الجريد القديم (.lec-editor__row كـ repeat(4,1fr) + الميديا كويري 719.98px)
   اتشال بالكامل — كان بيحشر البادج في عمود والحقول الأربعة في عمود واحد.
   نظام الكروت الجديد (.lec-card) موجود في القسم 21 تحت. */
.lec-editor{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}

/* ---- قالب رسالة الواتساب ---- */
.tpl-tokens{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2);
  margin-block:var(--sp-2);
  padding:0;
  list-style:none;
}
.tpl-tokens > *{
  display:inline-flex;
  align-items:center;
  min-block-size:32px;
  padding-inline:var(--sp-3);
  border-radius:99px;
  background:var(--gold-100);
  border:1px solid rgba(201,162,75,.45);
  color:var(--gold-ink);
  font-size:.82rem;
  font-weight:600;
  direction:ltr;
  unicode-bidi:embed;
  white-space:nowrap;
}

.tpl-preview{
  position:relative;
  max-inline-size:46ch;
  margin-inline-start:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:var(--radius);
  border-start-start-radius:var(--sp-1);
  box-shadow:var(--shadow-sm);
  color:var(--ink);
  font-size:.92rem;
  line-height:1.8;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.tpl-preview::before{
  content:"";
  position:absolute;
  inset-block-start:10px;
  inset-inline-start:-9px;
  inline-size:10px;
  block-size:14px;
  background:#FFFFFF;
  border-inline-start:1px solid var(--line);
  border-block-start:1px solid var(--line);
  clip-path:polygon(100% 0, 0 0, 100% 100%);
}

/* ---- مفتاح التشغيل/الإيقاف ---- */
.switch{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  inline-size:52px;
  block-size:30px;
  border-radius:99px;
  background:#CFDAE6;
  border:1px solid var(--line);
  vertical-align:middle;
  cursor:pointer;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
/* توسيع مساحة اللمس لـ44px من غير ما نكبّر شكل المفتاح */
.switch::before{
  content:"";
  position:absolute;
  inset-block:-8px;
  inset-inline:0;
}
.switch:hover{ background:#BFCEDD; }

.switch__slider{
  position:absolute;
  inset-block-start:2px;
  inset-inline-start:2px;
  inline-size:24px;
  block-size:24px;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:var(--shadow-sm), 0 0 0 1px rgba(11,46,79,.10);
  pointer-events:none;
  transition:inset-inline-start var(--t) var(--ease), background var(--t) var(--ease);
}

.switch[aria-checked="true"]{ background:var(--gold); border-color:var(--gold-600); }
.switch[aria-checked="true"]:hover{ background:var(--gold-600); }
.switch[aria-checked="true"] .switch__slider{ inset-inline-start:24px; }

.switch:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .pb-banner__close,
  a.pb-banner__text,
  .tab,
  .switch,
  .switch__slider{ transition:none; }
  .tabpanel{ animation:none; }
}

@media print{
  .pb-banner,
  .tabs,
  .switch{ display:none !important; }
}

/* ==========================================================================
   20. رؤيتنا + شريط الركائز + إشعار حقوق الملكية
   .vision-quote / .pillars / .pillar / .pillar__en / .pillar__ar
   .copyright-note / .copyright-note__icon
   ========================================================================== */

/* ---- جملة الرؤية كعبارة رئيسية ---- */
.vision-quote{
  max-inline-size:60ch;
  margin-inline:auto;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);
  font-weight:600;
  line-height:1.75;
  color:var(--navy);
  text-align:center;
}
.vision-quote::before{
  content:"";
  display:block;
  inline-size:56px;
  block-size:3px;
  margin-inline:auto;
  margin-block-end:var(--sp-5);
  border-radius:2px;
  background:var(--gold);
}

/* ---- شريط الركائز الأربعة ---- */
.pillars{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding-block:var(--sp-8);
  padding-inline:var(--sp-4);
  background:
    radial-gradient(120% 140% at 85% 0%, var(--navy-soft) 0%, rgba(18,62,104,0) 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 60%, var(--navy-900) 100%);
  border-block-start:1px solid rgba(201,162,75,.55);
  border-block-end:1px solid rgba(201,162,75,.55);
}

.pillar{
  min-inline-size:0;
  padding-inline:var(--sp-4);
  padding-block:var(--sp-2);
  text-align:center;
  border-inline-start:1px solid rgba(201,162,75,.28);
}
.pillar:first-child{ border-inline-start:0; }

.pillar__en{
  margin:0;
  color:var(--gold);
  font-size:.95rem;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.pillar__ar{
  margin:0;
  margin-block-start:6px;
  color:#EAF1F8;
  font-size:1.05rem;
  line-height:1.7;
}

@media (max-width:1023.98px){
  .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--sp-6); }
  .pillar:nth-child(odd){ border-inline-start:0; }
}
@media (max-width:559.98px){
  .pillars{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-5); padding-inline:var(--sp-3); }
  .pillar{ border-inline-start:0; }
}

/* ---- إشعار حقوق الملكية الفكرية ---- */
.copyright-note{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  max-inline-size:78ch;
  margin-inline:auto;
  padding:var(--sp-5) var(--sp-5);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-inline-start:4px solid var(--gold);
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:.92rem;
  line-height:1.9;
}
.copyright-note > *{ min-inline-size:0; }

.copyright-note__icon{
  flex:none;
  font-size:1.35rem;
  line-height:1;
  -webkit-user-select:none;
  user-select:none;
}

@media (prefers-reduced-motion: reduce){
  .pillars,
  .pillar,
  .vision-quote,
  .copyright-note{ transition:none; animation:none; }
}

@media print{
  .pillars{
    background:#FFFFFF !important;
    border-block:1px solid #999999;
    padding-block:8pt;
    break-inside:avoid;
  }
  .pillar{ border-inline-start:0; }
  .pillar__en,
  .pillar__ar{ color:#000000 !important; }
  .vision-quote{ color:#000000 !important; }
  .vision-quote::before{ background:#000000; }
  .copyright-note{
    display:flex !important;
    background:#FFFFFF !important;
    color:#000000 !important;
    border:1px solid #999999;
    border-inline-start:4px solid #000000;
    break-inside:avoid;
  }
}


/* ==========================================================================
   21. تبويب الإعدادات — تخطيط الحقول (Settings tab field layout)
       .lec-card / .lec-card__head / .lec-card__flag / .lec-card__grid
       .lec-f--title / .lec-f--date / .lec-f--time / .lec-f--zoom
       .settings-row
       + تطبيع كل الكنترولز جوّه #panelSettings بس (44px / 10-12px / 100%).
         فورم التقديم العام في apply.html بيفضل 56px زي ما هو — الاسكوب
         بالـid ده موجود في admin.html لوحده.
       البريك بوينت الجديد 899.98px / 900px (القديم كان 719.98px).
       كله بخصائص منطقية (logical properties) عشان الـRTL.
   ========================================================================== */

/* ---- 21.1 كارت المحاضرة ---- */
/* .lec-editor__row متسيبة كـ alias للتوافق العكسي لحد ما الماركب يتحدّث
   لـ .lec-card — نفس شكل الكارت بالظبط من غير ما تفرض جريد على جوّاها. */
.lec-card,
.lec-editor__row{
  display:block;
  min-inline-size:0;
  padding:var(--sp-5);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  border-inline-start:3px solid var(--navy);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.lec-card > *,
.lec-editor__row > *{ min-inline-size:0; }

.lec-card:focus-within{
  border-color:#CFDAE6;
  border-inline-start-color:var(--navy);
  box-shadow:var(--shadow);
}

/* رأس الكارت — فوق الحقول بخط فاصل تحته */
.lec-card__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  margin-block-end:var(--sp-4);
  padding-block-end:var(--sp-3);
  border-block-end:1px solid var(--line);
}
.lec-card__head > *{ min-inline-size:0; }

/* مؤشّر «لينك الزوم ناقص» — بيتخفي بالـhidden attribute من الـJS */
.lec-card__flag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:99px;
  background:var(--warn-100);
  border:1px solid rgba(180,83,9,.32);
  color:#8A400A;
  font-size:.78rem;
  font-weight:600;
  line-height:1.6;
  white-space:nowrap;
}
.lec-card__flag::before{
  content:"";
  flex:none;
  inline-size:8px;
  block-size:8px;
  border-radius:50%;
  background:var(--warn);
}

/* شبكة الحقول — عمود واحد افتراضياً (موبايل أولاً) */
.lec-card__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:var(--sp-4);
  row-gap:var(--sp-4);
  align-items:end;
}
.lec-card__grid > *{ min-inline-size:0; }
.lec-card__grid .field{ inline-size:100%; }

/* ديسكتوب — صف واحد: العنوان / التاريخ / الوقت / لينك الزوم */
@media (min-width:900px){
  .lec-card__grid{
    grid-template-columns:3fr 1.2fr 1fr 2.5fr;
    column-gap:var(--sp-4);
    row-gap:var(--sp-4);
  }
  .lec-card__grid .lec-f--title{ grid-column:1; }
  .lec-card__grid .lec-f--date { grid-column:2; }
  .lec-card__grid .lec-f--time { grid-column:3; }
  .lec-card__grid .lec-f--zoom { grid-column:4; }
}

/* تحت 900px — كل حقل ياخد العرض كله */
@media (max-width:899.98px){
  .lec-card,
  .lec-editor__row{ padding:var(--sp-4); }
  .lec-card__grid{ grid-template-columns:minmax(0,1fr); }
  .lec-f--title,
  .lec-f--date,
  .lec-f--time,
  .lec-f--zoom{ grid-column:auto; inline-size:100%; }
}

/* ---- 21.2 صف حقلين جنب بعض داخل مجموعات الإعدادات ---- */
.settings-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4);
  align-items:start;
}
.settings-row > *{ min-inline-size:0; }

@media (min-width:900px){
  .settings-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---- 21.3 تطبيع الكنترولز جوّه تبويب الإعدادات فقط ---- */
/* الاسكوب #panelSettings مقفول على admin.html — apply.html مالهاش أي عنصر
   بالـid ده، فحقول فورم التقديم بتفضل 56px / 14px 16px زي ما هي. */
#panelSettings,
#panelSettings .field,
#panelSettings .settings-group{ min-inline-size:0; }

#panelSettings .input,
#panelSettings .select,
#panelSettings .textarea{
  inline-size:100%;
  max-inline-size:100%;
  min-block-size:44px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:.95rem;
}

/* موضع فيزيائي مقصود: الاسكوب ده موجود في admin.html بس — لوحة داخلية
   عربية RTL ومالهاش نسخة إنجليزية، فمافيش حالة LTR ممكن تمر من هنا. */
#panelSettings .select{
  padding-inline-end:38px;
  background-position:
    left 14px center,
    left 8px center;
}

/* التكست إيريا بتفضل عالية */
#panelSettings .textarea{
  min-block-size:160px;
  padding:12px;
}

/* اللابل — سطر واحد دايماً، وبيقصّر بالـellipsis بدل ما يلف أو يطلّع الحقل */
#panelSettings .field__label{
  display:block;
  max-inline-size:100%;
  font-size:.86rem;
  line-height:1.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#panelSettings .field__hint{ font-size:.78rem; }

/* الفوكس والحالة الخاطئة زي ما هي — بنأكّدها بس من غير ما نغيّر سلوكها */
#panelSettings .input:focus-visible,
#panelSettings .select:focus-visible,
#panelSettings .textarea:focus-visible{
  outline:none;
  border-color:var(--gold);
  box-shadow:var(--ring);
}
#panelSettings .input.is-invalid,
#panelSettings .select.is-invalid,
#panelSettings .textarea.is-invalid{ border-color:var(--danger); }

/* ---- 21.4 حقول التاريخ/الوقت/اللينكات ---- */
/* عرض كافي عشان أيقونة النتيجة/الساعة الأصلية تبان كاملة من غير قص */
#panelSettings input[type="date"],
#panelSettings input[type="time"]{
  min-inline-size:min(9rem,100%);
  padding-inline:10px;
  text-align:left;
  font-variant-numeric:tabular-nums;
  overflow:visible;
}
#panelSettings input[type="time"]{ min-inline-size:min(7.25rem,100%); }

#panelSettings input[type="date"]::-webkit-calendar-picker-indicator,
#panelSettings input[type="time"]::-webkit-calendar-picker-indicator{
  flex:none;
  inline-size:18px;
  block-size:18px;
  padding:0;
  margin:0;
  margin-inline-start:4px;
  opacity:.75;
  cursor:pointer;
}
#panelSettings input[type="date"]::-webkit-datetime-edit,
#panelSettings input[type="time"]::-webkit-datetime-edit{
  padding:0;
  overflow:visible;
}

/* أي حقل محتواه لاتيني (لينكات، رقم واتساب، البكسل) يقرا من الشمال */
#panelSettings input[type="url"],
#panelSettings .input[dir="ltr"],
#panelSettings .select[dir="ltr"],
#panelSettings .textarea[dir="ltr"]{
  text-align:left;
}

/* ---- 21.5 حماية من أي تمدّد أفقي على 360px ---- */
@media (max-width:400px){
  .lec-card,
  .lec-editor__row{ padding:var(--sp-3); }
  #panelSettings .input,
  #panelSettings .select,
  #panelSettings .textarea{ font-size:.92rem; }
}

@media (prefers-reduced-motion: reduce){
  .lec-card,
  .lec-editor__row,
  .lec-card__flag{ transition:none; animation:none; }
}

@media print{
  .lec-card,
  .lec-editor__row{
    background:#FFFFFF !important;
    box-shadow:none;
    break-inside:avoid;
  }
  .lec-card__flag{
    background:#FFFFFF !important;
    color:#000000 !important;
    border-color:#999999;
  }
}

/* ==========================================================================
   21.6 توحيد ارتفاع حقول الإعدادات — إصلاح محاذاة الصف
   ------------------------------------------------------------------------
   حقول date/time بيبقى ليها ارتفاع داخلي أكبر من الـnative editor بتاع
   المتصفح (49px مقابل 47px للنص والرابط)، فكانوا بيطلعوا مزحزحين 2px فوق
   باقي الصف رغم align-items:end. بنثبّت الارتفاع على 44px بالظبط ونصفّر
   الحشو الرأسي، فالأربعة يقعدوا في خط واحد تماماً.
   ========================================================================== */

#panelSettings .input,
#panelSettings .select{
  block-size:44px;
  padding-block:0;
  line-height:normal;
}

/* الـtextarea مستثناة — بتفضل بارتفاعها الكبير */
#panelSettings .textarea{
  block-size:auto;
  padding-block:10px;
  line-height:1.7;
}

/* تصفير الحشو الداخلي لمحرّر التاريخ/الوقت عشان النص يتوسّط صح */
#panelSettings input[type="date"]::-webkit-datetime-edit,
#panelSettings input[type="time"]::-webkit-datetime-edit{
  padding-block:0;
  line-height:normal;
}

/* ==========================================================================
   22. سطر «المحاضرة القادمة» في كارت الهيرو — أوضح وأكبر
   ------------------------------------------------------------------------
   .lec-title و .lec-when العامّين مستخدمين كمان في جدول المحاضرات، فمابنلمسهمش.
   الكلاسات دي بتتحط على #pb-next-lec و #pb-next-when في الهيرو بس.
   الميعاد بيلف عادي على الموبايل (nowrap العام كان بيطوّله برّه الكارت).
   ========================================================================== */

.hero__next{
  font-size:clamp(1.15rem, 1rem + .62vw, 1.46rem);
  font-weight:700;
  color:var(--navy);
  line-height:1.45;
  margin-block-start:var(--sp-3);
}

.hero__nextwhen{
  display:inline-block;
  font-size:clamp(1.02rem, .94rem + .38vw, 1.22rem);
  font-weight:700;
  color:var(--gold-ink);
  background:var(--gold-100);
  border:1px solid rgba(201,162,75,.45);
  border-radius:99px;
  padding:6px 14px;
  margin-block-start:var(--sp-2);
  line-height:1.55;
  white-space:normal;                 /* يلف بدل ما يخرج من الكارت */
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
.hero__nextwhen:empty{ display:none; }  /* مايبانش كبسولة فاضية قبل التحميل */

@media (max-width:400px){
  .hero__nextwhen{ padding:5px 11px; }
}

@media print{
  .hero__nextwhen{ background:#fff; border-color:#999; color:#000; }
}