/* Learn with Abdul — RTL Arabic learning platform
   Editorial/warm sand base. One gradient moment (hero halo + footer).
   Mobile-first, RTL native. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-arabic);
  background: var(--bg-canvas);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  direction: rtl;
}

body {
  overflow-x: hidden;
  /* Whisper-subtle paper gradient — the brand is never flat. Fixed
     attachment so the gentle warm-paper shift sits behind every scroll. */
  background: var(--abdul-gradient-paper);
  background-attachment: fixed;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }

/* ===== APP SHELL ===== */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== HEADER ===== */
.tnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg-canvas) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
/* Liquid glass (Chrome/Edge — displacement refraction via liquid-glass.js).
   The JS sets the backdrop-filter; here we thin the tint so the refraction
   reads, and add the glass rim highlight. .lg-fallback keeps the classic
   frosted look (Safari/iOS/Firefox). */
.tnav.lg-active {
  background: color-mix(in oklab, var(--bg-canvas) 45%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 24px rgba(31, 10, 82, 0.06);
}
.tnav.lg-fallback {
  background: color-mix(in oklab, var(--bg-canvas) 72%, transparent);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ===== NIGHT-SKY FOLD (.hero--sky) =====
   The brand gradient becomes a living sky: sky.js draws twinkling stars
   + occasional meteors on a canvas layered under the content. Text and
   controls flip to their on-dark variants. */
.hero--sky {
  background: var(--abdul-gradient-radial-glow);
  color: #fff;
}
.hero--sky .hero-inner,
.hero--sky .hero-action-wrap { position: relative; z-index: 1; }
.hero--sky .hero-title { color: #fff; }
.hero--sky .hero-sub { color: rgba(255, 255, 255, 0.86); }
.hero--sky .hero-badge {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
  color: #fff;
}
.hero--sky .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.06);
}
.hero--sky .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
}
/* The halo glow doubles down beautifully on the dark sky. */
.hero--sky .halo { opacity: 0.9; }

/* Hero personal intro: tagline under the name, the AI statement callout,
   and the Instagram CTA. Sized for the dark night-sky fold (light text). */
.hero-tagline {
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.55;
  color: #fff;
  margin: 6px 0 14px;
}
.hero--sky .hero-tagline { color: #fff; }

/* City skyline along the sky's bottom seam — Istanbul · Cairo · Saudi ·
   Dubai · Kuwait · Jerusalem (repeated). A dark-navy horizon masked by the
   skyline shape and faded upward into the stars, so it blends into the
   gradient instead of sitting on it. Injected by sky.js on [data-skyline]. */
.sky-skyline {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(64px, 12vh, 150px);
  z-index: 0; pointer-events: none;
  background: linear-gradient(to top, #0a1450 0%, #131f5c 46%, rgba(19,31,92,0) 100%);
  -webkit-mask: url(/images/skyline.png?v=2) repeat-x bottom / auto 100%;
          mask: url(/images/skyline.png?v=2) repeat-x bottom / auto 100%;
  opacity: .5;
}
.tnav-inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tnav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700;
}
.tnav-brand img { width: 32px; height: 32px; border-radius: 50%; }
.tnav-brand-text { font-size: 15px; letter-spacing: -0.01em; }
.tnav-brand-text small { display:block; font-size: 11px; font-weight: 500; color: var(--fg-tertiary); letter-spacing: 0.02em; }
.tnav-brand-line { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.tnav-actions { display: flex; align-items: center; gap: 8px; }
.tnav-support {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-arabic);
  font-weight: 600;
  font-size: 13px;
  color: #3390ec;
  border: 1px solid color-mix(in oklab, #3390ec 35%, transparent);
  background: color-mix(in oklab, #3390ec 6%, transparent);
  text-decoration: none;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.tnav-support:hover {
  background: color-mix(in oklab, #3390ec 12%, transparent);
  border-color: color-mix(in oklab, #3390ec 55%, transparent);
  transform: translateY(-1px);
}
.tnav-support svg { fill: currentColor; }
@media (max-width: 540px) {
  /* On phones, drop the label to save room — icon-only support button. */
  .tnav-support-label { display: none; }
  .tnav-support { padding: 7px 9px; }
}
.tnav-iconbtn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  color: var(--fg-secondary);
  transition: background var(--dur-base) var(--ease-standard);
}
.tnav-iconbtn:hover { background: var(--bg-sunken); color: var(--fg-primary); }
.tnav-login {
  padding: 8px 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-primary);
  border-radius: var(--r-pill);
  transition: background var(--dur-base) var(--ease-standard);
}
.tnav-login:hover { background: var(--bg-sunken); }
.tnav-cta {
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--abdul-ink-950);
  border-radius: var(--r-pill);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base);
}
.tnav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ===== HERO (shared) ===== */
.hero {
  position: relative;
  padding: 64px 20px 80px;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--container-lg);
  margin: 0 auto;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(245, 83, 106, 0.10);
  border: 1px solid rgba(245, 83, 106, 0.25);
  color: var(--abdul-ember-600);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
}
.hero-badge .dot {
  position: relative;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--abdul-ember-500);
  box-shadow: 0 0 0 3px rgba(245, 83, 106, 0.20);
}
/* Pulse ring on a pseudo, transform+opacity only — compositor-cheap
   (box-shadow animation forced a repaint every frame). */
.hero-badge .dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: rgba(245, 83, 106, 0.25);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.9); opacity: 0; }
}

.hero-title {
  /* Thmanyah Serif Display with الحروف المرسلة (swash) is the canonical
     headline treatment in the new design system — the elegant final
     letterforms turn on automatically for ن / ي / س / ك etc. */
  font-family: var(--font-arabic-display);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.40;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--fg-primary);
  text-wrap: balance;
  font-feature-settings: var(--ff-swash);
}
/* Accent phrase inside the hero title — salmon-gradient text fill so the
   key phrase reads as the warm "action" colour. Falls back to a solid
   colour when background-clip:text isn't supported. */
.hero-title .accent {
  color: var(--abdul-salmon-600);
  background: var(--abdul-gradient-salmon);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% 100%;
}

.hero-sub {
  font-size: clamp(15.5px, 1.4vw, 17.5px);
  line-height: 1.75;
  color: var(--fg-secondary);
  max-width: 42ch;
  margin: 0 0 24px;
  text-wrap: pretty;
}

/* Price block */
.price-block {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 8px;
}
.price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1;
  color: var(--fg-primary);
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" on;
  direction: ltr;
}
.price-currency {
  font-family: var(--font-arabic);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  color: var(--fg-primary);
}
.price-meta {
  font-size: 14px;
  color: var(--fg-tertiary);
  margin-bottom: 28px;
}
.price-meta .sep { margin: 0 8px; color: var(--border-subtle); }

/* Discount presentation */
.price-old {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--abdul-ember-500);
  text-decoration-thickness: 2px;
  direction: ltr;
  /* Own margin because parent containers set gap:0 (so price+currency stay tight). */
  margin-inline-start: 10px;
}
.price-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--abdul-ember-500);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  direction: ltr;
  box-shadow: 0 4px 12px rgba(245, 83, 106, 0.30);
}
.launch-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--abdul-ember-600);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  /* Salmon gradient is the new accent fill — peach → pink-red. */
  background: var(--abdul-gradient-salmon);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--glow-salmon);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base), filter var(--dur-base);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.04) saturate(1.04); box-shadow: 0 14px 36px rgba(245, 83, 106, 0.42); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 24px;
  color: var(--fg-primary);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-subtle);
  transition: background var(--dur-base), border-color var(--dur-base);
}
.btn-ghost:hover { background: var(--bg-sunken); border-color: var(--fg-tertiary); }

/* Hero info pills */
.hero-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
}
.pill svg { width: 14px; height: 14px; }

/* ===== HERO VARIANT A — Split with portrait halo ===== */
.hero--split .hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero--split .hero-text { min-width: 0; }
.hero--split .hero-visual {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  max-width: 460px;
  justify-self: center;
}
/* Course card below both columns, full width */
.hero-course-wrap {
  max-width: var(--container-lg);
  margin: 48px auto 0;
  padding: 0;
}
.hero-course-wrap .hero-course-card {
  margin-top: 0;
  max-width: 720px;
  margin-inline: auto;
  grid-template-columns: 200px 1fr;
}
@media (max-width: 880px) {
  .hero-course-wrap { margin-top: 32px; }
  .hero-course-wrap .hero-course-card { grid-template-columns: 1fr; }
}

/* Slim hero action card — no image, just CTA row */
.hero-action-wrap {
  max-width: var(--container-lg);
  margin: 40px auto 0;
  padding: 0;
}
.hero-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 760px;
  margin-inline: auto;
  padding: 16px 20px 16px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}
.hero-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--abdul-ember-400);
}
.hero-action-left { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hero-action-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--abdul-ember-600);
}
.ha-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--abdul-ember-500);
  box-shadow: 0 0 0 3px rgba(245, 83, 106, 0.20);
  display: inline-block;
}
.hero-action-title {
  font-family: var(--font-arabic-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  font-feature-settings: var(--ff-swash);
}
.hero-action-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
/* Price row: the outer row stays RTL-natural (inherits page direction),
   so reading-order siblings are: new-amount (first/right) → old-price →
   chip. Only the .ha-amount sub-container is forced to direction:ltr so
   "$15" renders with $ on the left of the digits, no matter the
   currency or the surrounding language. unicode-bidi:isolate makes the
   atom survive intact inside any bidi context (like an Arabic button
   label). */
.hero-action-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.ha-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  direction: ltr;
  unicode-bidi: isolate;
}
.ha-num  { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--fg-primary); letter-spacing: -0.02em; line-height: 1; }
.ha-curr { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--fg-tertiary); }
.ha-old  { font-family: var(--font-display); font-size: 13px; color: var(--fg-tertiary); text-decoration: line-through; }
.ha-chip { background: var(--abdul-ember-500); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--r-pill); letter-spacing: 0.03em; }
.hero-action-right .btn-primary { padding: 10px 16px; font-size: 13.5px; }

@media (max-width: 560px) {
  .hero-action { padding: 14px 16px; gap: 12px; }
  .hero-action-right { width: 100%; justify-content: space-between; }
  .hero-action-title { font-size: 16px; }
  .ha-num { font-size: 24px; }
}
.halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--abdul-gradient-radial-glow);
  filter: blur(40px) saturate(1.1);
  opacity: 0.75;
  transform: scale(0.85);
  animation: halo-float 8s ease-in-out infinite;
}
@keyframes halo-float {
  0%, 100% { transform: scale(0.85) translateY(0); }
  50%      { transform: scale(0.9) translateY(-10px); }
}
.portrait {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(20, 17, 46, 0.35);
  border: 4px solid var(--bg-raised);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* Floating spec chips on portrait */
.spec-chip {
  position: absolute;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 600;
}
.spec-chip .ic {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-sunken);
  color: var(--abdul-ember-500);
}
.spec-chip .ic svg { width: 14px; height: 14px; }
.spec-chip b { font-weight: 700; color: var(--fg-primary); }
.spec-chip .sub { display:block; font-weight: 500; font-size: 11px; color: var(--fg-tertiary); }
/* Chips sit in the top-right / bottom-left CORNERS of the portrait's
   square bounding box. The portrait circle is ~78% of this box, so the
   corners are OUTSIDE the circle — chips overlap the edge, not the face. */
.spec-chip--exp { top: 6%; right: -4%; animation: chip-float 6s ease-in-out infinite; max-width: 220px; }
.spec-chip--ai { bottom: 8%; left: -6%; animation: chip-float 6s ease-in-out infinite 2s; max-width: 240px; }
/* legacy aliases kept for back-compat */
.spec-chip--time { top: 6%; right: -4%; animation: chip-float 6s ease-in-out infinite; max-width: 220px; }
.spec-chip--mobile { bottom: 8%; left: -6%; animation: chip-float 6s ease-in-out infinite 2s; max-width: 240px; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Mobile: flow the chips as a readable stack BELOW the portrait
   instead of layering them over the face. Halo is scoped to the
   portrait area so it doesn't bleed onto the chips below. */
@media (max-width: 880px) {
  .hero--split .hero-visual {
    flex-direction: column;
    aspect-ratio: auto;
    padding-bottom: 8px;
    align-items: center;
    overflow: visible;
  }
  /* Wrap portrait + halo together so halo stays near the portrait.
     NOTE: we must disable the halo-float animation here — its keyframes
     set `transform: scale(...)` which would override our translateX. */
  .hero--split .hero-visual .halo {
    position: absolute;
    inset: auto;
    top: 0;
    left: 50%;
    width: min(72vw, 320px);
    height: min(72vw, 320px);
    transform: translateX(-50%) scale(0.85);
    animation: none;
    z-index: 0;
  }
  .hero--split .hero-visual .portrait {
    width: min(72vw, 320px);
    aspect-ratio: 1;
    position: relative;
    z-index: 1;
  }
  .spec-chip,
  .spec-chip--exp, .spec-chip--ai,
  .spec-chip--time, .spec-chip--mobile {
    position: relative;
    z-index: 2;
    animation: none;
    width: 100%;
    max-width: min(72vw, 360px);
    margin-top: 10px;
    top: auto; right: auto; bottom: auto; left: auto;
    background: var(--bg-raised);
  }
  .spec-chip:first-of-type { margin-top: 18px; }
}

/* ===== HERO VARIANT B — Centered typography ===== */
.hero--typo { padding: 96px 20px 80px; text-align: center; }
.hero--typo .hero-inner { text-align: center; }
.hero--typo .hero-title { max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero--typo .hero-sub { max-width: 40ch; margin-left: auto; margin-right: auto; }
.hero--typo .hero-cta-row,
.hero--typo .price-block,
.hero--typo .hero-pills { justify-content: center; }
.hero--typo .price-block { justify-content: center; display: inline-flex; }
.hero--typo .price-meta { text-align: center; }
.hero--typo .typo-gradient {
  background: var(--abdul-gradient-core);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero--typo .hero-backglow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(67, 238, 237, 0.15), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* ===== HERO VARIANT C — Poster / editorial ===== */
.hero--poster .hero-inner {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 48px;
  align-items: stretch;
}
.hero--poster .hero-text { padding: 40px 0; }
.hero--poster .poster {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-2xl);
  background: var(--abdul-gradient-radial-glow);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px;
  color: #fff;
}
.poster-top { display: flex; justify-content: space-between; align-items: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; opacity: 0.85; }
.poster-center { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.poster-portrait {
  width: 140px; height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.poster-portrait img { width: 100%; height: 100%; object-fit: cover; }
.poster-title {
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  text-align: center;
  margin: 0;
}
.poster-bottom { display: flex; justify-content: space-between; align-items: flex-end; font-size: 13px; font-weight: 500; }
.poster-bottom .num { font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: 1; }
.hero--poster .streaks {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 30px);
  pointer-events: none;
}

/* ===== SECTION STYLES ===== */
.section {
  padding: 80px 20px;
  max-width: var(--container-lg);
  margin: 0 auto;
}
.section-head { margin-bottom: 48px; max-width: 680px; }
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--abdul-ember-500);
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-arabic-display, var(--font-arabic));
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  /* Brand-violet → royal-blue gradient text fill — the canonical
     section-heading treatment in the new design system. Falls back to
     solid fg-primary in browsers without background-clip:text. */
  color: var(--fg-primary);
  background: var(--grad-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-feature-settings: var(--ff-swash); /* الحروف المرسلة on Arabic finals */
}
.section-sub {
  font-size: 17px;
  color: var(--fg-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 54ch;
}

/* ===== CURRICULUM ===== */
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.module-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 32px;
  transition: transform var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
  position: relative;
}
.module-card:hover {
  transform: translateY(-4px);
  border-color: var(--abdul-ember-500);
  box-shadow: var(--shadow-lg);
}
.module-num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--abdul-sand-300);
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  direction: ltr;
}
.module-card:hover .module-num { color: var(--abdul-ember-500); }
.module-title {
  font-family: var(--font-arabic-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--fg-primary);
  font-feature-settings: var(--ff-swash);
}
.module-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-secondary);
  margin: 0 0 20px;
}
.module-meta {
  display: flex; align-items: center; gap: 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-tertiary);
}
.module-meta svg { width: 14px; height: 14px; }

/* ===== REELS ===== */
.reels-section { background: var(--bg-surface); }
.reels-section .section { padding: 80px 20px; max-width: var(--container-lg); margin: 0 auto; }
.reels-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .reels-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -20px;
    padding: 0 20px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .reels-strip::-webkit-scrollbar { display: none; }
  .reel {
    flex: 0 0 72%;
    scroll-snap-align: center;
  }
}
.reel {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--abdul-ink-800);
  cursor: pointer;
  transition: transform var(--dur-base);
}
.reel:hover { transform: translateY(-4px); }
/* ============ PHONE INPUT (intl-tel-input): force LTR regardless of RTL page ============
   The page is <html dir="rtl"> but phone numbers are Latin digits.
   intl-tel-input ships [dir="rtl"] attribute-selector rules that move the
   flag/country chip to the right and flip input padding. Since the attribute
   lives on <html>, we must override the specific positioning rules — just
   setting CSS `direction` isn't enough. */
.phone-group .iti {
  direction: ltr !important;
  width: 100%;
  text-align: left;
}
.phone-group .iti__tel-input {
  direction: ltr !important;
  text-align: left !important;
  width: 100%;
  /* Latin digits only, even in Arabic locale */
  -webkit-locale: "en";
  /* Space for the country chip pinned to the LEFT */
  padding-left: 92px !important;
  padding-right: 14px !important;
}
/* Country container: pin LEFT, unpin RIGHT (overrides intl-tel-input's
   [dir="rtl"] rule that does the opposite). */
.phone-group .iti__country-container,
.phone-group .iti--allow-dropdown .iti__country-container {
  left: 0 !important;
  right: auto !important;
  direction: ltr !important;
}
.phone-group .iti__selected-country {
  direction: ltr !important;
  flex-direction: row !important;
}
/* Flag icon first, dial code after (LTR order) */
.phone-group .iti__selected-country-primary { direction: ltr !important; }
.phone-group .iti__selected-dial-code {
  direction: ltr !important;
  margin-left: 4px !important;
  margin-right: 0 !important;
}
.phone-group .iti__arrow {
  margin-left: 4px !important;
  margin-right: 0 !important;
}
/* Country list dropdown: flags LEFT of names, reading LTR */
.phone-group .iti__dropdown-content,
.phone-group .iti__country-list {
  direction: ltr !important;
  text-align: left !important;
}
.phone-group .iti__country { direction: ltr !important; text-align: left !important; }
.phone-group .iti__flag-box { margin-right: 6px !important; margin-left: 0 !important; }

.reel-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.85);
}
/* Real Bunny thumbnail poster (replaces gradient bg once we have a video). */
.reel-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.88);
}
.reel-iframe { background: var(--abdul-ink-800); }
/* Mobile: the first reel autoplays muted. These two bits sit on top of the
   iframe so a tap anywhere unmutes (iframes swallow clicks internally). */
.reel-tap-hint {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px; font-weight: 600;
  border-radius: 999px;
  /* backdrop-filter dropped: rgba(0,0,0,.6) is already legible over video,
     and an infinite opacity pulse over a filter re-composites every frame. */
  pointer-events: none; z-index: 3;
  animation: reel-hint-pulse 2s ease-in-out 3;
}
@keyframes reel-hint-pulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.65; }
}
.reel-tap-catcher {
  position: absolute; inset: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
  /* Leave room at bottom-center for Bunny's own controls (mute button etc.)
     so the user can still mute/pause via native UI if they want. */
}
.reel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
}
.reel-chrome {
  position: absolute; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 6px;
  color: #fff; font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,0.5);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
}
.reel-chrome svg { width: 11px; height: 11px; }
.reel-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform var(--dur-base);
}
.reel:hover .reel-play { transform: translate(-50%, -50%) scale(1.1); }
.reel-play svg { width: 24px; height: 24px; margin-right: -3px; }
.reel-footer {
  position: absolute; bottom: 0; right: 0; left: 0;
  padding: 16px;
  color: #fff;
}
.reel-caption {
  font-family: var(--font-arabic);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.reel-stats {
  display: flex; gap: 12px;
  font-size: 11px;
  opacity: 0.95;
}
.reel-stat { display: inline-flex; align-items: center; gap: 4px; }
.reel-stat svg { width: 13px; height: 13px; }

.reels-footer {
  margin-top: 32px;
  text-align: center;
}
.ig-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--abdul-ember-500);
  font-weight: 600;
  font-size: 15px;
}
.ig-link:hover { color: var(--abdul-ember-600); }

/* ===== BIO ===== */
.bio { padding: 80px 20px; background: var(--bg-canvas); }
.bio-inner {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}
.bio-avatar-wrap {
  position: relative;
  width: 160px;
  aspect-ratio: 1;
}
.bio-avatar-wrap::before {
  content: '';
  position: absolute; inset: -12px;
  background: var(--abdul-gradient-radial-glow);
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0.4;
  z-index: 0;
}
.bio-avatar {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bg-raised);
  box-shadow: var(--shadow-md);
}
.bio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bio-name {
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 12px;
  color: var(--fg-primary);
}
.bio-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--fg-secondary);
  margin: 0;
  text-wrap: pretty;
}

/* ===== TESTIMONIALS ===== */
.test-section { background: var(--bg-surface); }
.test-section .section { padding: 80px 20px; }
.test-list {
  display: grid;
  gap: 4px;
  max-width: 680px;
  margin: 0 auto;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 12px 20px;
  box-shadow: var(--shadow-sm);
}
.comment {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.comment:last-child { border-bottom: 0; }
.comment-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--abdul-gradient-radial-glow);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-display);
  flex-shrink: 0;
  text-transform: uppercase;
  direction: ltr;
}
.comment-body {
  min-width: 0;
  font-family: var(--font-arabic);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-primary);
  text-wrap: pretty;
}
.comment-body .handle {
  font-weight: 700;
  margin-left: 6px;
  color: var(--fg-primary);
}
.comment-actions {
  margin-top: 6px;
  display: flex; gap: 14px;
  font-size: 12px;
  color: var(--fg-tertiary);
}
.comment-actions span, .comment-actions button {
  font-size: 12px;
  color: var(--fg-tertiary);
  font-weight: 500;
  padding: 0;
}
.comment-actions .liked { font-weight: 600; }
.comment-heart {
  align-self: flex-start;
  padding: 4px;
  color: var(--fg-tertiary);
  transition: color var(--dur-base), transform var(--dur-base);
}
.comment-heart:hover { color: var(--abdul-ember-500); transform: scale(1.1); }
.comment-heart.active { color: var(--abdul-ember-500); }
.comment-heart svg { width: 18px; height: 18px; }

/* ===== B2B SECTION (enterprise / workshop inquiries) ===== */
.b2b-section {
  /* "My Services" recolored from the salmon action-accent to the brand
     indigo→violet identity (Abdul: no pinky-red here). Every .b2b-* rule
     reads --abdul-ember-*, so re-pointing those three vars on the section
     reskins the whole block — badge, watermark, icon chips, note — from
     one place. The CTA (uses --abdul-gradient-salmon) is handled below. */
  --abdul-ember-400: var(--abdul-violet-600);
  --abdul-ember-500: var(--abdul-violet-600);
  --abdul-ember-600: var(--abdul-violet-700);
  padding: 80px 20px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--abdul-ember-500) 6%, var(--bg-base)) 0%,
    var(--bg-base) 100%);
}
.b2b-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  box-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
/* Subtle "B2B" watermark in the top-LEFT corner (physical left, not
   logical — the previous direction:ltr on the element flipped
   inset-inline-end back to the right in RTL). */
.b2b-mark {
  position: absolute;
  left: 24px;
  right: auto;
  top: 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in oklch, var(--abdul-ember-500) 14%, transparent);
  pointer-events: none;
  user-select: none;
  direction: ltr;
}
@media (max-width: 700px) {
  .b2b-mark { font-size: 42px; top: 16px; left: 18px; }
}
.b2b-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: color-mix(in oklch, var(--abdul-ember-500) 12%, transparent);
  color: var(--abdul-ember-600, #c44a0f);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.b2b-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--abdul-ember-500);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--abdul-ember-500) 25%, transparent);
}
.b2b-title {
  font-family: var(--font-arabic-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--fg-primary);
  margin: 0 0 12px;
  position: relative; z-index: 1;
  font-feature-settings: var(--ff-swash);
}
.b2b-sub {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--fg-secondary);
  margin: 0 0 28px;
  position: relative; z-index: 1;
}
.b2b-offerings {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 14px;
  position: relative; z-index: 1;
}
.b2b-offerings li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
/* Icon chip: fixed 44×44 square, icon dead-centre. We pin the SVG via
   absolute positioning inside a relative chip so no flex/grid/inline
   baseline quirks can shift it. */
.b2b-ic {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  position: relative;
  display: block;
  background: color-mix(in oklch, var(--abdul-ember-500) 10%, transparent);
  color: var(--abdul-ember-500);
  border-radius: 12px;
  flex-shrink: 0;
  align-self: center;
}
.b2b-ic svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.b2b-offerings li b {
  display: block;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--fg-primary);
  margin-bottom: 2px;
}
.b2b-offerings li span {
  display: block;
  font-size: 13px;
  color: var(--fg-tertiary);
  line-height: 1.6;
}
.b2b-note {
  padding: 12px 16px;
  background: color-mix(in oklch, var(--abdul-ember-500) 6%, transparent);
  border-inline-start: 3px solid var(--abdul-ember-500);
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
/* Section CTA switches from the salmon action gradient to the brand violet,
   so "My Services" carries no pinky-red at all. */
.b2b-inner .btn-primary {
  background: var(--abdul-gradient-violet);
  box-shadow: 0 10px 30px rgba(85, 38, 224, 0.32);
}
.b2b-inner .btn-primary:hover { box-shadow: 0 14px 36px rgba(85, 38, 224, 0.42); }
/* Icon glyph = the accent. `.b2b-offerings li span` (0,1,2) was out-ranking
   `.b2b-ic` (0,1,0) and painting the mark fg-tertiary (taupe); win it back so
   the glyph reads violet like its chip. */
.b2b-offerings li .b2b-ic { color: var(--abdul-ember-500); }
/* WhatsApp CTA — compact, single-line, brand green. No phone number on the button. */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 11px 22px;
  background: #25d366;
  color: #fff;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  text-decoration: none;
  transition: transform var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
  box-shadow: 0 3px 0 0 #128c7e, 0 4px 12px -3px rgba(18, 140, 126, 0.35);
  position: relative; z-index: 1;
}
/* Center the pill in its flow-level parent */
.b2b-inner .btn-whatsapp { display: flex; max-width: max-content; }
.btn-whatsapp:hover {
  background: #20bd5a;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 0 #128c7e, 0 6px 14px -3px rgba(18, 140, 126, 0.4);
}
.btn-whatsapp:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 0 #128c7e, 0 3px 8px -3px rgba(18, 140, 126, 0.35);
}
.btn-whatsapp svg { flex-shrink: 0; }
/* B2B: tighten the bio-agency card so it reads as a compact attribution
   inside the card (not a big marketing block). */
.b2b-inner .bio-agency {
  margin-top: 20px !important;
  padding: 14px 16px;
  z-index: 1;
}
.b2b-inner .bio-agency .bio-agency-mark { width: 40px; height: 40px; }
.b2b-inner .bio-agency .bio-agency-name { font-size: 15px; }
.b2b-inner .bio-agency .bio-agency-desc { font-size: 12.5px; }
@media (max-width: 600px) {
  .b2b-section { padding: 48px 16px; }
  .b2b-inner { padding: 28px 20px; }
  .btn-whatsapp { font-size: 13.5px; padding: 10px 18px; }
}

/* ===== FOOTER CTA ===== */
.footer-cta {
  background: var(--abdul-ink-950);
  color: #fff;
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}
.footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--abdul-gradient-radial-glow);
  opacity: 0.6;
  pointer-events: none;
}
.footer-cta::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 40px);
  pointer-events: none;
}
.footer-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.footer-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--abdul-cyan-300);
  margin-bottom: 16px;
}
.footer-title {
  font-family: var(--font-arabic-display);
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.2;
  margin: 0 0 16px;
  color: #fff;
  font-feature-settings: var(--ff-swash);
}
.footer-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  margin: 0 0 32px;
  max-width: 44ch;
  margin-left: auto; margin-right: auto;
}
.btn-telegram {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  background: #fff;
  color: var(--abdul-ink-950);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--r-pill);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.btn-telegram:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(67, 238, 237, 0.35); }
.btn-telegram svg { width: 20px; height: 20px; color: #0088cc; }

.footer-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 40px auto 32px;
  max-width: 320px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
}
.footer-divider::before, .footer-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

.btn-buy-dark {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 32px;
  /* Salmon gradient — same accent treatment as .btn-primary but sized up
     for the dark footer surface. */
  background: var(--abdul-gradient-salmon);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  border-radius: var(--r-pill);
  box-shadow: var(--glow-salmon), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform var(--dur-base), box-shadow var(--dur-base), filter var(--dur-base);
}
.btn-buy-dark:hover { transform: translateY(-2px); filter: brightness(1.04) saturate(1.04); }

/* ===== TINY FOOTER ===== */
.tfoot {
  padding: 24px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
}
.tfoot-inner {
  max-width: var(--container-lg);
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
  color: var(--fg-tertiary);
}
.tfoot-inner a { color: var(--fg-secondary); font-weight: 600; }
.tfoot-inner a:hover { color: var(--abdul-ember-500); }

/* ===== AUX PAGES (auth, dashboard, player) ===== */
.auth-wrap {
  min-height: calc(100vh - 72px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.auth-brand img { width: 48px; height: 48px; border-radius: 50%; }
.auth-brand-name { font-family: var(--font-arabic); font-weight: 700; font-size: 18px; }
.auth-title {
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 8px;
  text-align: center;
}
.auth-sub {
  font-size: 14px;
  color: var(--fg-tertiary);
  text-align: center;
  margin: 0 0 28px;
}
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  font-family: var(--font-arabic);
  font-size: 15px;
  color: var(--fg-primary);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.form-input:focus {
  outline: 0;
  border-color: var(--abdul-violet-700);
  box-shadow: var(--ring-focus);
}
.form-input[data-dir="ltr"] { direction: ltr; text-align: right; }
.form-row-between { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 16px; font-size: 13px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; color: var(--fg-secondary); }
.btn-block {
  width: 100%;
  padding: 14px 20px;
  background: var(--abdul-ember-500);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--r-md);
  transition: background var(--dur-base);
  display: flex;              /* was inline-flex — block-level so margin:auto centers */
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
}
.btn-block:hover { background: var(--abdul-ember-400); }
/* Pay page: constrain the primary continue CTA on desktop so it doesn't
   stretch the full 720px wrapper width (feels too wide / unclickable).
   Both the Stripe form AND the InstaPay anchor get max-width + auto margin. */
.pay-wrap form { text-align: center; }
.pay-wrap form > .btn-block,
.pay-wrap > a.btn-block {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--fg-tertiary); }
.auth-footer a { color: var(--abdul-ember-500); font-weight: 700; }

/* ===== AUTH: Google (primary CTA) + Telegram (secondary) =====
   Google is the promoted option. It stays white per Google brand guidelines
   but gets a thicker dark border + soft shadow + slightly larger padding to
   read as the primary action. Telegram sits below it as a secondary option
   (white card with blue accent — see .btn-telegram-login below). */
.btn-google {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 16px;
  background: #fff;
  border: 1.75px solid var(--abdul-ink-800, #0f172a);
  border-radius: var(--r-md);
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--abdul-ink-800, #0f172a);
  transition: transform var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
  margin-bottom: 14px;
  box-shadow: 0 4px 0 0 var(--abdul-ink-800, #0f172a), 0 6px 16px -4px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}
.btn-google:hover { transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--abdul-ink-800, #0f172a), 0 8px 20px -4px rgba(15, 23, 42, 0.22); }
.btn-google:active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--abdul-ink-800, #0f172a), 0 3px 10px -4px rgba(15, 23, 42, 0.18); }
.btn-google svg { width: 18px; height: 18px; }

/* Telegram login = secondary CTA (white card with blue accent — matches
   the design system). Uses Telegram.Login.auth() JS API instead of the
   embedded widget so the whole button is reliably clickable (the old
   overlay-on-invisible-iframe hack had click-target gaps). */
.btn-telegram-login {
  width: 100%;
  max-width: 100%;
  height: 50px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #3390ec;
  border-radius: var(--r-md);
  font-family: var(--font-arabic);
  font-weight: 600;
  font-size: 15px;
  color: #2a8cdd;
  cursor: pointer;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.btn-telegram-login svg { width: 18px; height: 18px; fill: #3390ec; }
.btn-telegram-login:hover {
  background: #f7fbff;
  border-color: #2a8cdd;
}
.btn-telegram-login:active {
  transform: translateY(1px);
}

/* Legacy class — some other pages may still reference it; keep the rule
   so the widget still has bounds if used standalone. */
.telegram-widget-wrap { margin-bottom: 16px; }
.telegram-widget-wrap iframe {
  width: 100% !important;
  height: 48px !important;
  border-radius: var(--r-md) !important;
}

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 18px;
  font-size: 12px;
  color: var(--fg-tertiary);
  letter-spacing: 0.04em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-subtle);
}

/* ===== PAYMENT CHOICE ===== */
.pay-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}
.pay-steps {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 32px;
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.pay-step { display: inline-flex; align-items: center; gap: 6px; }
.pay-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
  color: var(--fg-tertiary);
}
.pay-step.done .pay-step-num { background: var(--abdul-ember-500); border-color: var(--abdul-ember-500); color: #fff; }
.pay-step.active .pay-step-num { background: var(--abdul-ink-800); border-color: var(--abdul-ink-800); color: #fff; }
.pay-step.active .pay-step-label { color: var(--fg-primary); }
.pay-step-sep { width: 24px; height: 1px; background: var(--border-subtle); }

.pay-head { text-align: center; margin-bottom: 32px; }
.pay-title {
  font-family: var(--font-arabic-display);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  font-feature-settings: var(--ff-swash);
}
.pay-sub { font-size: 15px; color: var(--fg-secondary); margin: 0; }

.pay-order {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.pay-order-title { font-family: var(--font-arabic); font-weight: 700; font-size: 16px; color: var(--fg-primary); }
.pay-order-meta { font-size: 13px; color: var(--fg-tertiary); margin-top: 2px; }
.pay-order-price { display: flex; align-items: baseline; gap: 10px; }
.pay-order-amount { display: inline-flex; align-items: baseline; gap: 0; direction: ltr; unicode-bidi: isolate; }

/* Inline price utility: wrap "{currency}{number}" strings that appear
   inside RTL paragraphs (e.g. button labels "اشترِ الكورس - $15"). The
   Unicode bidi algorithm otherwise re-orders the currency symbol to
   the right side of the digits inside an RTL run; this class isolates
   the pair as a single LTR atom so it always renders as "$15". */
.price-inline {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.pay-order-price .price { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.pay-order-price .price-old { font-size: 14px; color: var(--fg-tertiary); text-decoration: line-through; }
.pay-order-price .currency { font-size: 13px; color: var(--fg-tertiary); }

.pay-methods { display: grid; gap: 12px; margin-bottom: 24px; }

/* ===== PAYMENT: 2-card layout (larger, branded) ===== */
/* When only one method is shown (single-option countries — everyone except
   Egypt in the current matrix), the .single modifier collapses the grid
   to a centered single column capped at a comfortable reading width so
   the card doesn't span the whole container. */
.pay-methods-2.single {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}
.pay-methods-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.pay-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
  text-align: right;
  font-family: var(--font-arabic);
  min-height: 220px;
  position: relative;
}
.pay-card:hover { border-color: var(--abdul-ink-800); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pay-card.selected {
  border-color: var(--abdul-ember-500);
  background: color-mix(in oklab, var(--abdul-ember-500) 5%, var(--bg-raised));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--abdul-ember-500) 15%, transparent);
}
.pay-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pay-card-radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  transition: border-color var(--dur-base);
}
.pay-card.selected .pay-card-radio { border-color: var(--abdul-ember-500); }
.pay-card.selected .pay-card-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--abdul-ember-500);
}
.pay-card-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pay-card-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-primary);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pay-card-sub {
  font-size: 13px;
  color: var(--fg-tertiary);
  line-height: 1.5;
}
.pay-card-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--abdul-ember-500) 14%, var(--bg-raised));
  color: var(--abdul-ember-500);
  flex-shrink: 0;
  height: fit-content;
  margin-top: 2px;
}

/* Card brand strip (Stripe option) */
.pay-card-brands {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  align-items: center;
}
.brand-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px;
  min-width: 44px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #1A1F36;
}
.brand-visa { color: #1A1F71; font-style: italic; letter-spacing: 0.08em; }
.brand-amex { background: #006FCF; color: #fff; border-color: #006FCF; letter-spacing: 0.12em; }
.brand-mc {
  gap: 0;
  position: relative;
  padding: 0 10px;
}
.brand-mc .dot-r, .brand-mc .dot-y {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-block;
}
.brand-mc .dot-r { background: #EB001B; margin-left: -6px; position: relative; z-index: 1; }
.brand-mc .dot-y { background: #F79E1B; }
.brand-apple {
  background: #000; color: #fff; border-color: #000;
  gap: 2px; letter-spacing: 0;
}
.brand-apple::before {
  content: '';
  width: 10px; height: 12px;
  background: #fff;
  margin-left: 3px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'><path d='M12.3 10.4c0-2.4 2-3.6 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.9-1.6 0-3.2 1-4 2.5-1.7 3-.4 7.4 1.3 9.8.8 1.2 1.8 2.5 3 2.5 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.7 1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.6-1-2.6-4z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'><path d='M12.3 10.4c0-2.4 2-3.6 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.9-1.6 0-3.2 1-4 2.5-1.7 3-.4 7.4 1.3 9.8.8 1.2 1.8 2.5 3 2.5 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.2.7 1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.6-1-2.6-4z'/></svg>") no-repeat center/contain;
}
.brand-link {
  background: #00D66F; color: #1A1F36; border-color: #00D66F;
  font-weight: 800;
}

/* Instapay strip */
.pay-card-insta-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #00B3A4, #00809A);
  border-radius: var(--r-md);
  color: #fff;
}
.pay-card-insta-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  backdrop-filter: blur(6px);
}
.pay-card-insta-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pay-card-insta-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}
.pay-card-insta-phone {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
  direction: ltr;
  text-align: right;
  color: #fff;
}

.pay-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  color: var(--fg-tertiary);
  margin-top: auto;
  padding-top: 4px;
}
.pay-card-foot svg { color: var(--abdul-ember-500); }
.pay-card-foot > span { display: inline-flex; align-items: center; gap: 5px; }
.pay-card-powered {
  margin-right: auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  direction: ltr;
}
.pay-card-powered b { color: #635BFF; font-weight: 800; }

@media (max-width: 720px) {
  .pay-methods-2 { grid-template-columns: 1fr; }
}
.pay-method {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base);
  text-align: right;
  width: 100%;
  font-family: var(--font-arabic);
}
.pay-method:hover { border-color: var(--abdul-ink-800); transform: translateY(-1px); }
.pay-method.selected {
  border-color: var(--abdul-ember-500);
  background: color-mix(in oklab, var(--abdul-ember-500) 5%, var(--bg-raised));
}
.pay-method-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.pay-method-icon.stripe { background: #635BFF; color: #fff; }
.pay-method-icon.apple  { background: #000; color: #fff; font-size: 22px; }
.pay-method-icon.insta  { background: linear-gradient(135deg, #00B3A4, #00809A); color: #fff; font-size: 13px; }
.pay-method-body { flex: 1; min-width: 0; }
.pay-method-name {
  font-weight: 700; font-size: 16px; color: var(--fg-primary);
  display: flex; align-items: center; gap: 8px;
}
.pay-method-sub { font-size: 13px; color: var(--fg-tertiary); margin-top: 2px; }
.pay-method-badge {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  color: var(--fg-secondary);
}
.pay-method-badge.local { background: color-mix(in oklab, #00B3A4 15%, var(--bg-sunken)); color: #00809A; }
.pay-method-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-default);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--dur-base);
}
.pay-method.selected .pay-method-radio { border-color: var(--abdul-ember-500); }
.pay-method.selected .pay-method-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--abdul-ember-500);
}

.pay-secure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px;
  color: var(--fg-tertiary);
  margin-top: 16px;
}
.pay-secure svg { width: 13px; height: 13px; }

.pay-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-arabic); font-weight: 600;
  font-size: 14px;
  color: var(--fg-tertiary);
  margin-bottom: 20px;
  transition: color var(--dur-base);
}
.pay-back:hover { color: var(--fg-primary); }

/* ===== STRIPE FRAME (mocked) ===== */
.stripe-frame {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: 16px;
}
.stripe-chrome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #F6F9FC;
  border-bottom: 1px solid #E3E8EE;
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  direction: ltr;
}
.stripe-url {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #425466;
  padding: 4px 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #E3E8EE;
}
.stripe-url svg { width: 12px; height: 12px; color: #00A67E; }
.stripe-wordmark {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 800;
  color: #635BFF;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.stripe-body {
  padding: 32px 28px;
  direction: rtl;
  font-family: var(--font-arabic);
}
.stripe-order {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E3E8EE;
}
.stripe-order-label { font-size: 13px; color: #697386; }
.stripe-order-value { font-family: 'Helvetica Neue', sans-serif; font-weight: 700; font-size: 20px; color: #0A2540; letter-spacing: -0.01em; }
.stripe-field { margin-bottom: 14px; }
.stripe-field label {
  display: block;
  font-size: 13px; font-weight: 600; color: #0A2540;
  margin-bottom: 6px;
}
.stripe-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #E3E8EE;
  border-radius: 6px;
  font-family: 'Helvetica Neue', monospace;
  font-size: 15px;
  color: #0A2540;
  background: #fff;
  direction: ltr;
  text-align: left;
  box-sizing: border-box;
}
.stripe-input:focus { outline: 2px solid #635BFF; outline-offset: -1px; border-color: #635BFF; }
.stripe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stripe-pay {
  width: 100%;
  padding: 13px;
  background: #635BFF;
  color: #fff;
  border-radius: 6px;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-top: 8px;
  transition: background 160ms;
  direction: ltr;
}
.stripe-pay:hover { background: #4f46e5; }
.stripe-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 16px;
  font-size: 11px; color: #697386;
  font-family: 'Helvetica Neue', sans-serif;
  direction: ltr;
}
.stripe-foot b { color: #635BFF; font-weight: 700; }

/* ===== INSTAPAY FLOW ===== */
.insta-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 28px;
  margin-bottom: 16px;
}
.insta-step-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.insta-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--abdul-ember-500);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.insta-step-title {
  font-family: var(--font-arabic);
  font-weight: 700; font-size: 18px;
  margin: 0;
}
.insta-phone-box {
  background: linear-gradient(135deg, #00B3A4, #00809A);
  border-radius: var(--r-lg);
  padding: 20px 24px 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}
.insta-phone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.insta-phone-label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 4px;
}
.insta-phone-recipient {
  font-family: var(--font-arabic);
  font-size: 13px;
  opacity: 0.95;
}
.insta-phone-recipient b {
  font-weight: 700;
  direction: ltr;
  display: inline-block;
}
.insta-phone-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 5vw, 34px);
  letter-spacing: 0.02em;
  direction: ltr;
  user-select: all;
}
.insta-copy {
  padding: 8px 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--r-pill);
  color: #fff;
  font-family: var(--font-arabic);
  font-weight: 600; font-size: 13px;
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-base);
  flex-shrink: 0;
}
.insta-copy:hover { background: rgba(255,255,255,0.28); }
.insta-copy.copied { background: rgba(255,255,255,0.35); }

.insta-amount-row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 14px;
}
.insta-amount-row b {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--fg-primary);
}

.insta-hint {
  font-size: 13px; color: var(--fg-tertiary); line-height: 1.7;
  margin: 10px 0 0;
}

/* Upload dropzone */
.insta-drop {
  position: relative;
  border: 2px dashed var(--border-default);
  border-radius: var(--r-lg);
  padding: 32px 20px;
  text-align: center;
  background: var(--bg-surface);
  transition: border-color var(--dur-base), background var(--dur-base);
  cursor: pointer;
}
.insta-drop:hover { border-color: var(--abdul-ember-500); background: var(--bg-canvas); }
.insta-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.insta-drop-icon {
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  display: flex; align-items: center; justify-content: center;
  color: var(--abdul-ember-500);
}
.insta-drop-icon svg { width: 22px; height: 22px; }
.insta-drop-title { font-family: var(--font-arabic); font-weight: 700; font-size: 15px; color: var(--fg-primary); margin: 0 0 4px; }
.insta-drop-sub { font-size: 13px; color: var(--fg-tertiary); margin: 0; }

.insta-preview {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
}
.insta-preview img { width: 100%; max-height: 320px; object-fit: contain; display: block; background: #000; }
.insta-preview-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--bg-raised);
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--fg-secondary);
}
.insta-preview-foot button {
  color: var(--fg-tertiary);
  font-family: var(--font-arabic); font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 4px;
}
.insta-preview-foot button:hover { color: var(--abdul-ember-500); }

.insta-ref {
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  width: 100%;
  background: var(--bg-surface);
  font-family: var(--font-display);
  direction: ltr;
  text-align: left;
  font-size: 14px;
  box-sizing: border-box;
}
.insta-ref:focus { outline: 2px solid var(--abdul-ember-500); outline-offset: -1px; border-color: var(--abdul-ember-500); }

/* Instructional paragraph under the step-2 title */
.insta-step-desc {
  font-size: 13.5px;
  color: var(--fg-secondary);
  line-height: 1.7;
  margin: 8px 0 16px;
}

/* "or" separator between screenshot upload and reference input */
.insta-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--fg-tertiary);
  font-size: 12.5px;
  font-weight: 600;
}
.insta-or::before,
.insta-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.insta-or span { padding: 0 4px; letter-spacing: 0.06em; }

/* ===== PENDING / SUCCESS ===== */
.pending-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 20px;
  text-align: center;
}
.pending-icon {
  width: 88px; height: 88px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: color-mix(in oklab, #00B3A4 12%, var(--bg-canvas));
  display: flex; align-items: center; justify-content: center;
  color: #00809A;
  position: relative;
}
.pending-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, #00B3A4 30%, transparent);
  animation: pendingPulse 2s ease-out infinite;
}
@keyframes pendingPulse {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
.pending-icon svg { width: 38px; height: 38px; }
.pending-title {
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0 0 12px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.pending-sub {
  font-size: 15px; color: var(--fg-secondary); line-height: 1.75;
  margin: 0 0 24px;
}
.pending-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}
.pending-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--fg-secondary);
  font-weight: 600;
}
.pending-meta-item svg { width: 13px; height: 13px; color: var(--abdul-ember-500); }
.pending-timeline {
  text-align: right;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.pending-timeline-title {
  font-family: var(--font-arabic);
  font-weight: 700; font-size: 14px;
  margin: 0 0 14px;
  color: var(--fg-primary);
}
.pending-steps { display: flex; flex-direction: column; gap: 12px; }
.pending-step {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px;
  color: var(--fg-secondary);
}
.pending-step-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.pending-step.done .pending-step-dot { background: var(--abdul-ember-500); color: #fff; }
.pending-step.active .pending-step-dot {
  background: #fff;
  border: 2px solid #00B3A4;
  position: relative;
}
.pending-step.active .pending-step-dot::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #00B3A4;
  animation: dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.pending-step.todo .pending-step-dot { background: var(--bg-raised); border: 1.5px solid var(--border-default); }
.pending-step-dot svg { width: 12px; height: 12px; }
.pending-step-body { flex: 1; }
.pending-step-title { font-weight: 700; color: var(--fg-primary); font-size: 14px; }
.pending-step.todo .pending-step-title { color: var(--fg-tertiary); font-weight: 600; }
.pending-step-sub { font-size: 13px; color: var(--fg-tertiary); margin-top: 2px; }

@media (max-width: 600px) {
  .pay-order { flex-wrap: wrap; }
  .pay-method { padding: 14px 16px; }
  .stripe-body { padding: 24px 20px; }
  .stripe-row { grid-template-columns: 1fr; }
}

/* ===== DASHBOARD ===== */
.dash {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 48px 20px;
}
.dash-greeting { font-family: var(--font-arabic); font-size: 16px; color: var(--fg-tertiary); margin-bottom: 4px; }
.dash-h1 { font-family: var(--font-arabic-display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); margin: 0 0 40px; letter-spacing: -0.02em; font-feature-settings: var(--ff-swash); }
.dash-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.dash-card-visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: var(--abdul-gradient-radial-glow);
  color: #fff;
}
.dash-card-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}
.dash-card-portrait {
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: 0;
  overflow: hidden;
}
.dash-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Intro-player on the not-enrolled dashboard card. Same lazy-inject
   pattern as the landing .course-cover — click anywhere on the visual
   → the thumbnail + play button are replaced by a Bunny iframe. */
.dash-card-visual.intro-player { cursor: pointer; }
.dash-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--abdul-ember-500);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.dash-card-play svg { margin-inline-start: 3px; } /* optical-centre the triangle */
.dash-card-visual.intro-player:hover .dash-card-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: #fff;
}
.dash-card-body { padding: 48px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.dash-card-eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--abdul-ember-500); margin-bottom: 10px; }
.dash-card-title { font-family: var(--font-arabic-display); font-weight: 700; font-size: 26px; line-height: 1.3; margin: 0 0 16px; font-feature-settings: var(--ff-swash); }
.dash-card-meta { font-size: 14px; color: var(--fg-tertiary); margin-bottom: 24px; }
.progress-wrap { margin: 20px 0 24px; }
.progress-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.progress-row .pct { font-family: var(--font-display); color: var(--abdul-ember-500); direction: ltr; }
.progress-bar { height: 6px; background: var(--bg-sunken); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--abdul-ember-500); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease-standard); }
.dash-continue {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--abdul-ink-950);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--r-pill);
  align-self: flex-start;
}
.dash-continue:hover { background: var(--abdul-ink-800); }

/* ===== PLAYER ===== */
/* ===== PLAYER — YouTube-style layout ===== */
.player-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  max-width: 1480px;
  margin: 0 auto;
  gap: 32px;
  padding: 28px 24px 80px;
  align-items: start;
}
@media (max-width: 1200px) {
  .player-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
}
@media (max-width: 1000px) {
  .player-layout { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px 60px; }
}
.player-main { min-width: 0; }

/* Video — large, centered, 16:9 */
.player-video {
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.player-video::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--abdul-gradient-radial-glow);
  opacity: 0.35;
}
.player-video .play-big {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur-base);
}
.player-video .play-big:hover { transform: scale(1.06); background: rgba(255,255,255,0.22); }
.player-video .play-big svg { width: 38px; height: 38px; margin-right: -4px; }
.player-video-chrome {
  position: absolute;
  inset: auto 16px 16px 16px;
  display: flex; justify-content: space-between; align-items: center;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  pointer-events: none;
  direction: ltr;
}
.player-video-chrome span { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.45); padding: 5px 10px; border-radius: var(--r-pill); backdrop-filter: blur(8px); }

/* Meta row below video */
.player-meta { margin-top: 22px; }
.player-eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); font-weight: 600; margin-bottom: 10px; }
.player-title { font-family: var(--font-arabic-display); font-weight: 700; font-size: 28px; line-height: 1.3; margin: 0 0 18px; letter-spacing: -0.01em; font-feature-settings: var(--ff-swash); }
.player-title-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.player-instructor { display: flex; align-items: center; gap: 12px; }
.player-instructor img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-subtle); }
.player-instructor-name { font-family: var(--font-arabic); font-weight: 700; font-size: 15px; color: var(--fg-primary); }
.player-instructor-role { font-size: 12px; color: var(--fg-tertiary); }
.player-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.player-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--bg-sunken);
  color: var(--fg-secondary);
  font-family: var(--font-arabic); font-weight: 600; font-size: 13px;
  transition: all var(--dur-base);
  border: 1px solid transparent;
}
.player-act:hover { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--fg-primary); }

/* Tabs */
.player-tabs {
  display: flex; gap: 4px;
  margin-top: 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.player-tab {
  padding: 12px 4px;
  margin: 0 14px 0 0;
  font-family: var(--font-arabic); font-weight: 600; font-size: 14px;
  color: var(--fg-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-base), border-color var(--dur-base);
}
.player-tab:hover { color: var(--fg-secondary); }
.player-tab.active { color: var(--abdul-ember-600); border-bottom-color: var(--abdul-ember-500); }

/* Panels (notes / resources / transcript) */
.player-panel { padding: 22px 0 4px; min-height: 180px; }
.panel-lead { font-family: var(--font-arabic); font-size: 15.5px; line-height: 1.85; color: var(--fg-secondary); margin: 0 0 22px; }
.player-panel h4 { font-family: var(--font-arabic); font-weight: 700; font-size: 15px; margin: 0 0 10px; color: var(--fg-primary); }
.panel-list { margin: 0 0 22px; padding-inline-start: 20px; font-family: var(--font-arabic); font-size: 14.5px; line-height: 1.95; color: var(--fg-secondary); }
.panel-list li { margin-bottom: 6px; }
.panel-list b { color: var(--fg-primary); font-weight: 700; }
.panel-list .ltr { direction: ltr; unicode-bidi: embed; font-family: var(--font-display); font-size: 13.5px; }
.panel-callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px;
  background: color-mix(in oklch, var(--abdul-ember-500) 8%, var(--bg-raised));
  border: 1px solid color-mix(in oklch, var(--abdul-ember-500) 30%, transparent);
  border-radius: var(--r-lg);
  font-family: var(--font-arabic); font-size: 14px; line-height: 1.7;
  color: var(--fg-secondary);
}
.panel-callout svg { color: var(--abdul-ember-500); flex-shrink: 0; margin-top: 2px; }
.panel-callout b { color: var(--fg-primary); font-weight: 700; }

/* Resources list */
.panel-resources { display: flex; flex-direction: column; gap: 8px; }
.resource-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  transition: all var(--dur-base);
}
.resource-item:hover { border-color: var(--abdul-ember-400); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.resource-icon {
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.resource-icon.res-link { background: color-mix(in oklch, var(--abdul-ember-500) 14%, transparent); color: var(--abdul-ember-600); }
.resource-icon.res-doc { background: color-mix(in oklch, #3b82f6 14%, transparent); color: #3b82f6; }
.resource-icon.res-code { background: color-mix(in oklch, #10b981 14%, transparent); color: #10b981; }
.resource-body { min-width: 0; }
.resource-title { font-family: var(--font-arabic); font-weight: 600; font-size: 14.5px; color: var(--fg-primary); margin-bottom: 2px; }
.resource-sub { font-family: var(--font-display); font-size: 12px; color: var(--fg-tertiary); direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-type {
  font-family: var(--font-arabic); font-size: 11.5px; font-weight: 600;
  color: var(--fg-tertiary);
  background: var(--bg-sunken);
  padding: 5px 10px; border-radius: var(--r-pill);
  flex-shrink: 0;
}

/* Transcript */
.panel-transcript { font-family: var(--font-arabic); font-size: 14.5px; line-height: 1.95; color: var(--fg-secondary); }
.panel-transcript p { margin: 0 0 14px; }
.panel-transcript .ts { font-family: var(--font-display); font-size: 12px; color: var(--abdul-ember-600); font-weight: 600; margin-left: 10px; direction: ltr; unicode-bidi: embed; }
.panel-transcript .transcript-more { color: var(--fg-tertiary); font-style: italic; }

/* Prev / Next nav */
.player-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 22px 0 0; border-top: 1px solid var(--border-subtle); margin-top: 24px; }
.player-nav button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-arabic); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: var(--r-pill); color: var(--fg-secondary); transition: all var(--dur-base); }
.player-nav button:hover { background: var(--bg-sunken); color: var(--fg-primary); }

/* Lesson notes block — rendered below the video on video lessons.
   Admin-authored HTML lives in lessons.content. Typography tuned for
   long-form Arabic reading: comfortable line-height, clear hierarchy,
   accent color on section headings. */
.lesson-notes {
  margin-top: 28px;
  padding: 28px 32px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}
.lesson-notes-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--abdul-ember-500);
}
.lesson-notes-head h2 {
  margin: 0;
  font-family: var(--font-arabic);
  font-weight: 800;
  font-size: 20px;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.lesson-notes-body {
  font-family: var(--font-arabic);
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--fg-primary);
}
.lesson-notes-body h3 {
  font-family: var(--font-arabic);
  font-weight: 800;
  font-size: 18px;
  margin: 28px 0 12px;
  color: var(--fg-primary);
}
.lesson-notes-body h3:first-child { margin-top: 0; }
.lesson-notes-body h4 {
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 16px;
  margin: 20px 0 8px;
  color: var(--abdul-ember-500);
}
.lesson-notes-body p { margin: 0 0 12px; }
.lesson-notes-body ul,
.lesson-notes-body ol {
  margin: 8px 0 16px;
  padding-inline-start: 24px;
}
.lesson-notes-body li {
  margin: 4px 0;
  line-height: 1.8;
}
.lesson-notes-body li > ul,
.lesson-notes-body li > ol {
  margin-top: 6px;
  margin-bottom: 6px;
}
.lesson-notes-body strong { color: var(--fg-primary); font-weight: 800; }
.lesson-notes-body em { color: var(--fg-secondary); font-style: normal; border-bottom: 2px dotted var(--abdul-ember-500); padding-bottom: 1px; }
.lesson-notes-body code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  background: var(--bg-sunken);
  color: var(--abdul-ember-500);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  direction: ltr;
  display: inline-block;
}
.lesson-notes-body hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 20px 0;
}

@media (max-width: 720px) {
  .lesson-notes { padding: 20px 18px; }
  .lesson-notes-body { font-size: 14.5px; line-height: 1.85; }
  .lesson-notes-head h2 { font-size: 17px; }
  .lesson-notes-body h3 { font-size: 16.5px; }
  .lesson-notes-body h4 { font-size: 15px; }
}

/* ===== Sidebar (lessons list) ===== */
.player-sidebar {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 20px 16px;
  align-self: flex-start;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  display: flex; flex-direction: column;
}
.sidebar-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 10px; }
.sidebar-head h3 { font-family: var(--font-arabic); font-weight: 700; font-size: 15px; color: var(--fg-primary); margin: 0; }
.sidebar-progress { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--fg-tertiary); direction: ltr; }
.sidebar-bar { height: 3px; background: var(--bg-sunken); border-radius: var(--r-pill); overflow: hidden; margin: 0 4px 14px; }
.sidebar-bar-fill { height: 100%; background: var(--abdul-ember-500); border-radius: var(--r-pill); transition: width var(--dur-base); }
.lessons-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding: 2px; }

.lesson-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--dur-base);
}
.lesson-item:hover { background: var(--bg-sunken); }
.lesson-item.active { background: color-mix(in oklch, var(--abdul-ember-500) 10%, transparent); box-shadow: inset 3px 0 0 var(--abdul-ember-500); }
.lesson-status {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-tertiary);
  flex-shrink: 0;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
}
/* "done" lessons key off MINT — the new design system's success colour.
   Active (currently-playing) lessons stay on the salmon accent so the
   user can tell at a glance which row is *this lesson* vs an already-
   completed one. */
.lesson-status.done { background: var(--abdul-mint-500); border-color: var(--abdul-mint-500); color: var(--abdul-ink-950); }
.lesson-item.active .lesson-status { background: var(--abdul-ember-500); border-color: var(--abdul-ember-500); color: #fff; }
.lesson-body { min-width: 0; }
.lesson-title { font-family: var(--font-arabic); font-weight: 600; font-size: 14px; color: var(--fg-primary); margin-bottom: 2px; line-height: 1.35; }
.lesson-item.active .lesson-title { color: var(--abdul-ember-600); }
.lesson-meta { font-size: 12px; color: var(--fg-tertiary); font-family: var(--font-display); direction: ltr; text-align: right; }

/* ===== Player sidebar: chapter list ===== */
/* Chapters use a dedicated layout (NOT .lesson-item) because timestamps
   like "1:23:45" overflow the 26px .lesson-status circle. */
.chapters-block {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.chapters-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-inline-end: 4px;
}
.chapters-list::-webkit-scrollbar { width: 6px; }
.chapters-list::-webkit-scrollbar-track { background: transparent; }
.chapters-list::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }
.chapter-item {
  display: grid;
  grid-template-columns: minmax(54px, auto) 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--r-md);
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-base);
}
.chapter-item:hover { background: var(--bg-sunken); }
.chapter-item.current {
  background: color-mix(in oklab, var(--abdul-ember-500) 10%, transparent);
  outline: 1px solid var(--abdul-ember-500);
}
.chapter-item.current .chapter-title { color: var(--abdul-ember-500); font-weight: 700; }

/* ===== Lesson progress bar (below the video in the player) =====
   Horizontal bar that fills as playback progresses. Chapter markers are
   rendered as notches that can be clicked to seek. The bar itself is
   also click-to-seek anywhere (non-notch area). Respects RTL so the
   fill visually grows from the right edge (start of line) leftward. */
.lesson-progress-wrap {
  margin-top: 14px;
  margin-bottom: 8px;
  user-select: none;
}
.lesson-progress-bar {
  position: relative;
  height: 12px;
  background: var(--bg-sunken);
  border-radius: var(--r-pill);
  cursor: pointer;
  overflow: visible; /* notches can slightly overflow */
}
.lesson-progress-bar:hover .lesson-progress-fill {
  background: var(--abdul-ember-400, #ff7a3d);
}
.lesson-progress-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  height: 100%;
  width: 0%;
  background: var(--abdul-ember-500);
  border-radius: var(--r-pill);
  transition: width var(--dur-base) var(--ease-standard);
  pointer-events: none;
}
.lesson-progress-notch {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0%;
  transform: translate(50%, -50%);
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.lesson-progress-notch .notch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--abdul-ink-950, #1a1a2e), 0 1px 3px rgba(0,0,0,0.3);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.lesson-progress-notch:hover .notch-dot,
.lesson-progress-notch:focus-visible .notch-dot {
  transform: scale(1.35);
  box-shadow: 0 0 0 2px var(--abdul-ember-500), 0 2px 6px rgba(0,0,0,0.35);
}
.lesson-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--fg-tertiary);
  flex-wrap: wrap;
}
.lesson-progress-meta .mono {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  direction: ltr; /* always LTR for "1:23 / 45:00" */
  font-weight: 600;
  color: var(--fg-secondary);
}
.lesson-progress-hint {
  font-size: 12px;
}
.chapter-time {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--fg-tertiary);
  direction: ltr;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--bg-base);
  justify-self: start;
}
.chapter-title {
  font-family: var(--font-arabic);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg-primary);
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ===== TWEAKS PANEL ===== */
.tweaks {
  position: fixed;
  bottom: 20px; left: 20px;
  width: 300px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  padding: 18px 20px;
  z-index: 200;
  font-family: var(--font-arabic);
  direction: rtl;
}
.tweaks-h { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); margin: 0 0 14px; direction: ltr; text-align: left; }
.tweak-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px dashed var(--border-subtle); }
.tweak-row:first-of-type { border-top: 0; padding-top: 4px; }
.tweak-label { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.tweak-options { display: inline-flex; background: var(--bg-sunken); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.tweak-opt { padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); color: var(--fg-tertiary); }
.tweak-opt.active { background: var(--abdul-ember-500); color: #fff; }

.toggle {
  width: 42px; height: 24px;
  background: var(--bg-sunken);
  border-radius: var(--r-pill);
  position: relative;
  transition: background var(--dur-base);
  cursor: pointer;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-standard);
  box-shadow: var(--shadow-xs);
}
.toggle.on { background: var(--abdul-ember-500); }
.toggle.on::after { transform: translateX(-18px); }

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg-canvas: #14112e;
  --bg-surface: #1f1a3f;
  --bg-raised: #1a1639;
  --bg-sunken: #0a0820;
  --fg-primary: #f7f6fb;
  --fg-secondary: #c2bed9;
  --fg-tertiary: #9994bf;
  --border-subtle: rgba(255,255,255,0.08);
}
[data-theme="dark"] .tnav { background: rgba(20, 17, 46, 0.85); }
[data-theme="dark"] .pill { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .module-num { color: rgba(255,255,255,0.15); }
[data-theme="dark"] .test-list { background: var(--bg-raised); }
[data-theme="dark"] .auth-card { background: var(--bg-raised); }
[data-theme="dark"] .form-input { background: var(--bg-sunken); color: var(--fg-primary); }
[data-theme="dark"] .tnav-cta { background: var(--abdul-ember-500); }

/* ===== RESPONSIVE ===== */
@media (max-width: 880px) {
  .hero--split .hero-inner,
  .hero--poster .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero--split .hero-visual { max-width: 380px; margin: 0 auto; }
  .curriculum-grid { grid-template-columns: 1fr; }
  .bio-inner { grid-template-columns: 1fr; text-align: center; }
  .bio-avatar-wrap { margin: 0 auto; width: 140px; }
  .dash-card { grid-template-columns: 1fr; }
  .dash-card-visual { min-height: 200px; }
  .dash-card-body { padding: 32px 24px; }
  .tfoot-inner { flex-direction: column; gap: 8px; text-align: center; }
  .tweaks { left: 12px; right: 12px; width: auto; bottom: 12px; }
}

/* ===== MOBILE NAV HIDE ===== */
@media (max-width: 640px) {
  .tnav-cta { padding: 8px 14px; font-size: 13px; }
  .tnav-login { display: none; }
  .hero { padding: 40px 20px 60px; }
  .section { padding: 56px 20px; }
  .reels-section .section,
  .test-section .section { padding: 56px 20px; }
  .bio { padding: 56px 20px; }
  .footer-cta { padding: 60px 20px; }
}

/* ===== PAGE FADE ===== */
.page-enter { animation: pageIn 320ms var(--ease-entrance); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== COURSES SHOWCASE (Agentic AI + Claude Master teaser) ===== */
.courses-showcase {
  padding: 96px 20px;
  max-width: var(--container-lg);
  margin: 0 auto;
}
.courses-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Course card — shared base */
.course-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.course-card.is-primary:hover { border-color: var(--abdul-ember-500); }

.course-cover {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0a0a0f;
  margin-bottom: 20px;
}
.course-cover.intro-player { cursor: pointer; }
.course-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.course-cover .cover-tag {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(10px);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.15);
  letter-spacing: 0.02em;
}
.course-cover .cover-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform var(--dur-base), background var(--dur-base);
}
.course-card:hover .cover-play { transform: translate(-50%, -50%) scale(1.05); background: rgba(255,255,255,0.28); }
.course-cover .cover-play svg { width: 22px; height: 22px; margin-right: -2px; }

/* Placeholder cover for "coming soon" */
.course-cover.placeholder {
  background: var(--abdul-gradient-radial-glow);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.course-cover.placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.3) 1px, transparent 0),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.2) 1px, transparent 0),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.25) 1px, transparent 0);
  background-size: 90px 90px, 120px 120px, 80px 80px;
}
.course-cover.placeholder .ph-mark {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  font-size: 44px;
  letter-spacing: -0.03em;
  text-align: center;
  line-height: 1.1;
}
.course-cover.placeholder .ph-mark small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 8px;
}

.course-body {
  padding: 4px 4px 8px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.course-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abdul-ember-500);
  margin-bottom: 10px;
  direction: ltr;
  text-align: right;
}
.course-card .course-eyebrow.muted { color: var(--abdul-violet-700); }
.course-title {
  font-family: var(--font-arabic-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  font-feature-settings: var(--ff-swash);
}
.course-sub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin: 0 0 18px;
}
/* Price group on the course cards: outer is natural RTL so reading
   order is "amount, old, chip" (amount first / rightmost). Inner
   .price-amount is LTR-isolated so "$15" renders correctly inside
   the otherwise-RTL page. */
.course-pricing {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.price-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  direction: ltr;
  unicode-bidi: isolate;
}
.course-pricing .price-currency { font-size: 14px; }
.course-pricing .price { font-size: clamp(26px, 3.2vw, 32px); }
.course-meta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--fg-tertiary);
  margin: 0 0 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
}
.course-meta-row span { display: inline-flex; align-items: center; gap: 5px; }
.course-meta-row svg { width: 13px; height: 13px; }

.course-cta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: auto;
}
.course-cta-row .btn-primary,
.course-cta-row .btn-ghost {
  font-size: 14px;
  padding: 12px 18px;
}

/* Secondary (coming-soon) card — softer treatment */
.course-card.is-secondary {
  background: var(--bg-surface);
  border-style: dashed;
}
.course-card.is-secondary .course-eyebrow { color: var(--abdul-violet-700); }
.course-card.is-secondary .course-meta-row { color: var(--fg-tertiary); }
.course-notify {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 13px;
  color: var(--fg-primary);
  transition: background var(--dur-base), border-color var(--dur-base);
  margin-top: auto;
  align-self: flex-start;
}
.course-notify:hover { background: var(--bg-canvas); border-color: var(--abdul-violet-700); color: var(--abdul-violet-700); }
.course-notify svg { width: 14px; height: 14px; }

@media (max-width: 880px) {
  .courses-showcase { padding: 64px 20px; }
  .courses-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* ===== BIO RICH ===== */
.bio-rich { padding: 112px 20px; background: var(--bg-canvas); position: relative; }
.bio-rich::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1px 1px at 30% 20%, rgba(30,27,75,0.08) 1px, transparent 0),
                    radial-gradient(1px 1px at 70% 80%, rgba(30,27,75,0.06) 1px, transparent 0);
  background-size: 60px 60px, 80px 80px;
  pointer-events: none;
  opacity: 0.6;
}
.bio-rich-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.bio-rich-head { text-align: center; margin-bottom: 48px; max-width: 720px; margin-inline: auto; }
.bio-rich-head .section-eyebrow { color: var(--abdul-ember-500); margin-bottom: 14px; }
.bio-rich-title {
  font-family: var(--font-arabic-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.02em;
  font-feature-settings: var(--ff-swash);
  /* Same violet→blue gradient text fill as the courses "تعلّم استخدام
     الذكاء الاصطناعي" heading (.section-title). */
  color: var(--fg-primary);
  background: var(--grad-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Photo is a landscape 16:10 branded composition — framed inset, like an editorial figure */
.bio-photo-wrap {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 2584 / 1566;
  background: var(--bg-sunken);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
  margin: 0 auto 14px;
  max-width: 760px;
}
.bio-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.bio-photo-caption {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--fg-tertiary);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  direction: ltr;
  margin-bottom: 64px;
}

/* Text below photo — 2-column editorial layout on desktop */
.bio-rich-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.bio-rich-text {
  max-width: 720px;
  margin: 0 auto;
  column-count: 1;
}
.bio-rich-text p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--fg-secondary);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.bio-rich-text p.lead {
  font-size: 21px;
  line-height: 1.7;
  color: var(--fg-primary);
  font-weight: 500;
  margin-bottom: 28px;
  letter-spacing: -0.005em;
}
.bio-quote {
  font-family: var(--font-arabic);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--fg-primary);
  padding: 28px 32px;
  margin: 36px 0;
  border-inline-start: 3px solid var(--abdul-ember-500);
  background: transparent;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.bio-quote::before {
  content: '';
  display: block;
  width: 32px; height: 2px;
  background: var(--abdul-ember-500);
  margin-bottom: 16px;
}
.bio-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 28px 0 8px;
}
.bio-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-secondary);
}
.bio-tag svg { width: 13px; height: 13px; color: var(--abdul-ember-500); }

.bio-agency {
  margin-top: 40px;
  padding: 22px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  display: flex; gap: 16px; align-items: center;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  color: inherit;
}
.bio-agency:hover {
  border-color: var(--abdul-ember-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.bio-agency-mark {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--abdul-gradient-radial-glow);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  flex-shrink: 0;
  overflow: hidden;
}
/* Variant: wraps an <img> logo instead of a letter glyph. The gradient
   isn't useful when the image has its own colors; white bg prevents
   any color bleed around the corners. */
.bio-agency-mark--img {
  background: #fff;
  padding: 0;
}
.bio-agency-mark--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bio-agency-body { flex: 1; min-width: 0; }
.bio-agency-name {
  font-family: var(--font-arabic); font-weight: 700;
  font-size: 16px; color: var(--fg-primary);
  display: flex; align-items: center; gap: 8px;
}
.bio-agency-name .ltr { font-family: var(--font-display); direction: ltr; letter-spacing: 0.02em; }
.bio-agency-desc { font-size: 13px; color: var(--fg-tertiary); margin-top: 2px; }
.bio-agency-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--abdul-ember-500);
  flex-shrink: 0;
  font-family: var(--font-display);
  direction: ltr;
}
.bio-agency:hover .bio-agency-link { color: var(--abdul-ember-600); }

@media (max-width: 880px) {
  .bio-rich { padding: 72px 20px; }
  .bio-rich-title { font-size: clamp(28px, 7vw, 36px); }
  .bio-photo-wrap { border-radius: var(--r-xl); }
  .bio-quote { font-size: 20px; padding: 20px 20px; margin: 24px 0; }
  .bio-agency { flex-wrap: wrap; }
  .bio-agency-link { margin-top: 4px; }
}

/* ====================================================
   HERO — Embedded course card (split variant)
   ==================================================== */
.hero-course-card {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 20px;
  padding: 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
  width: 100%;
}
.hero-course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--abdul-ember-400); }
.hcc-cover {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-sunken);
}
.hcc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcc-tag {
  position: absolute; top: 10px; inset-inline-start: 10px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.hcc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 4px 2px; }
.hcc-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--abdul-ember-600); }
.hcc-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--fg-primary); letter-spacing: -0.01em; }
.hcc-sub { font-family: var(--font-arabic); font-size: 13.5px; line-height: 1.55; color: var(--fg-secondary); margin-bottom: 4px; }
.hcc-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; font-family: var(--font-arabic); font-size: 12px; color: var(--fg-tertiary); }
.hcc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hcc-meta svg { color: var(--abdul-ember-500); }
.hcc-price {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px dashed var(--border-subtle);
}
.hcc-price-nums { display: inline-flex; align-items: baseline; gap: 6px; direction: ltr; }
.hcc-curr { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--fg-tertiary); }
.hcc-num { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--fg-primary); letter-spacing: -0.02em; line-height: 1; }
.hcc-old { font-family: var(--font-display); font-size: 13px; color: var(--fg-tertiary); text-decoration: line-through; margin-inline-start: 4px; }
.hcc-chip { background: var(--abdul-ember-500); color: #fff; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: var(--r-pill); letter-spacing: 0.03em; }
.hcc-price .btn-primary { padding: 10px 14px; font-size: 13.5px; }

@media (max-width: 640px) {
  .hero-course-card { grid-template-columns: 1fr; max-width: 100%; }
  .hcc-cover { aspect-ratio: 16/9; max-height: 180px; }
}

/* Hero — compact inline course pill (typo + poster variants) */
.hero-course-inline {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  margin: 28px 0 20px;
  padding: 16px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 640px;
}
.hero--typo .hero-course-inline { margin-left: auto; margin-right: auto; text-align: right; direction: rtl; }
.hero--poster .hero-course-inline { max-width: 100%; }
.hci-left { min-width: 0; }
.hci-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--abdul-ember-600); margin-bottom: 4px; }
.hci-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--fg-primary); letter-spacing: -0.01em; margin-bottom: 3px; }
.hci-sub { font-family: var(--font-arabic); font-size: 13px; line-height: 1.5; color: var(--fg-secondary); }
.hci-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hci-price { display: inline-flex; align-items: baseline; gap: 4px; direction: ltr; }
.hci-curr { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--fg-tertiary); }
.hci-num { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--fg-primary); letter-spacing: -0.02em; line-height: 1; }
.hci-right .btn-primary { padding: 9px 14px; font-size: 13px; }

/* ====================================================
   LINKEDIN-STYLE CAREER CARD
   ==================================================== */
.career-li-section {
  padding: 96px 20px 80px;
  max-width: var(--container-lg);
  margin: 0 auto;
}
.career-li-section .section-head { text-align: center; margin-bottom: 48px; max-width: 680px; margin-inline: auto; }

.li-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  direction: ltr;
  text-align: left;
}
[data-theme="dark"] .li-card { box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.4); }

.li-cover {
  display: block;
  height: 150px;
  background: #4f2fd4;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.li-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-slow);
}
.li-cover:hover img { transform: scale(1.02); }

.li-head {
  position: relative;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.li-avatar-wrap {
  margin-top: -76px;
  width: 152px; height: 152px;
  border-radius: 50%;
  background: var(--bg-raised);
  padding: 4px;
}
.li-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border: 3px solid var(--bg-raised);
  background: #4f2fd4;
}
.li-logo {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  transition: transform var(--dur-base);
}
.li-logo svg { width: 34px; height: 34px; }
.li-logo:hover { transform: scale(1.08); }

.li-body { padding: 12px 24px 16px; }
.li-name-row { display: flex; align-items: center; gap: 6px; }
.li-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.li-verified { display: inline-flex; }
.li-headline {
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg-primary);
  margin: 4px 0 6px;
  font-weight: 400;
}
.li-location {
  font-size: 13px;
  color: var(--fg-tertiary);
  margin: 0 0 16px;
}
.li-connections { color: #0a66c2; font-weight: 600; }
[data-theme="dark"] .li-connections { color: #70b5f9; }

.li-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.li-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: background var(--dur-base), box-shadow var(--dur-base);
  cursor: pointer;
  line-height: 1.4;
}
.li-btn-primary {
  background: #0a66c2;
  color: #fff;
  border: 1px solid #0a66c2;
}
.li-btn-primary:hover { background: #004182; border-color: #004182; }
.li-btn-ghost {
  background: transparent;
  color: #0a66c2;
  border: 1px solid #0a66c2;
}
[data-theme="dark"] .li-btn-ghost { color: #70b5f9; border-color: #70b5f9; }
.li-btn-ghost:hover { background: rgba(10,102,194,0.08); box-shadow: inset 0 0 0 1px #0a66c2; }
[data-theme="dark"] .li-btn-ghost:hover { background: rgba(112,181,249,0.1); }

.li-divider { height: 1px; background: var(--border-subtle); margin: 0 24px; }

.li-section { padding: 16px 24px; }
.li-section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.li-about {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-primary);
  margin: 0;
  direction: ltr;
  text-align: left;
  font-family: inherit;
}

.li-exp {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.li-exp:last-child { border-bottom: none; padding-bottom: 4px; }
.li-exp-logo {
  width: 48px; height: 48px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.li-logo-img {
  background: var(--bg-raised);
  padding: 0;
  overflow: hidden;
}
.li-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.li-logo-aspired { background: linear-gradient(135deg, #ff6a1a, #ec4612); }
.li-logo-shobly { background: linear-gradient(135deg, #10b981, #047857); }
.li-logo-dentspa { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.li-logo-gaara { background: linear-gradient(135deg, #1f2937, #111827); }
.li-logo-pollion { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.li-logo-re { background: linear-gradient(135deg, #0a66c2, #004182); }
.li-logo-health { background: linear-gradient(135deg, #10b981, #047857); }
.li-exp-body { min-width: 0; }
.li-exp-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 2px;
}
.li-exp-co { font-size: 13.5px; color: var(--fg-primary); margin-bottom: 2px; }
.li-exp-meta { font-size: 12.5px; color: var(--fg-tertiary); margin-bottom: 1px; }
.li-exp-loc { font-size: 12.5px; color: var(--fg-tertiary); }
.li-exp-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 6px 0 0;
  font-family: inherit;
}

.li-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.li-skill {
  display: inline-block;
  padding: 5px 11px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-primary);
}

.li-footer {
  padding: 12px 24px 18px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.li-view {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0a66c2;
  font-family: var(--font-arabic);
  direction: rtl;
}
[data-theme="dark"] .li-view { color: #70b5f9; }
.li-view:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .career-li-section { padding: 64px 16px 56px; }
  .li-cover { height: 100px; }
  .li-avatar-wrap { width: 112px; height: 112px; margin-top: -56px; }
  .li-head, .li-body, .li-section, .li-footer { padding-left: 16px; padding-right: 16px; }
  .li-divider { margin: 0 16px; }
  .li-name { font-size: 20px; }
  .li-headline { font-size: 14px; }
}

/* ===== LEGAL PAGES ===== */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}
.legal-page h1 {
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.25;
  margin: 0 0 12px;
}
.legal-page .legal-meta {
  font-size: 13px;
  color: var(--fg-tertiary);
  margin-bottom: 40px;
}
.legal-page h2 {
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 20px;
  margin: 40px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}
.legal-page h2:first-of-type { border-top: none; padding-top: 0; }
.legal-page p, .legal-page li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-secondary);
  margin: 0 0 12px;
}
.legal-page ul {
  padding-right: 20px;
  margin: 0 0 16px;
  list-style: disc;
}
.legal-page strong { color: var(--fg-primary); }
.legal-page .company-info {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: 14px;
  margin: 20px 0;
}


/* =====================================================================
   Arabic typography guard — Arabic script is cursive; letter-spacing
   visually separates joined letterforms. Zero the spaced-uppercase
   treatments on the AR tree; the EN tree keeps them.
   ===================================================================== */
html[lang="ar"] .section-eyebrow,
html[lang="ar"] .footer-eyebrow,
html[lang="ar"] .hero-action-eyebrow,
html[lang="ar"] .poster-top,
html[lang="ar"] .b2b-badge,
html[lang="ar"] .ha-chip,
html[lang="ar"] .price-chip { letter-spacing: 0; }


/* Reduced-motion guard — design.css's perpetual loops (the other sheets
   already carry their own guards). */
@media (prefers-reduced-motion: reduce) {
  .hero-badge .dot, .hero-badge .dot::after, .halo, .spec-chip,
  .reel-tap-hint, .pending-icon::before,
  .pending-step.active .pending-step-dot::after, .page-enter {
    animation: none;
  }
}

/* =====================================================================
   Souq promo — homepage marketplace band (after the courses). Uses the
   GREEN/teal family (the site's least-used accent) so it stands out from
   the salmon + violet everywhere else and pulls the eye.
   ===================================================================== */
.souq-promo { max-width: var(--container-lg); margin: 0 auto; padding: 24px 20px 8px; }
.souq-promo-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  padding: 60px 40px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(92,240,189,.35), transparent 55%),
    linear-gradient(135deg, #0b7d5a 0%, #0f9b6c 42%, #12b6c9 100%);
  box-shadow: 0 24px 60px rgba(11, 125, 90, 0.32);
}
/* soft glow blobs */
.souq-promo-card::after {
  content: ''; position: absolute; inset-block-start: -40%; inset-inline-end: -10%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none;
}
.souq-promo-eyebrow {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
}
.souq-promo-title {
  position: relative; z-index: 1;
  font-family: var(--font-arabic-display); font-weight: 700;
  font-size: clamp(28px, 4.2vw, 46px); line-height: 1.25;
  margin: 0 auto 14px; max-width: 20ch;
  font-feature-settings: var(--ff-swash);
}
.souq-promo-sub {
  position: relative; z-index: 1;
  font-size: clamp(15px, 2vw, 18px); line-height: 1.85;
  color: rgba(255,255,255,.9); max-width: 56ch; margin: 0 auto 22px;
}
.souq-promo-points {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px;
}
.souq-promo-points span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  font-size: 13.5px; font-weight: 700;
}
.souq-promo-points svg { width: 15px; height: 15px; opacity: .95; }
.souq-promo-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px; border-radius: var(--r-pill);
  background: #fff; color: #0b7d5a; font-weight: 800; font-size: 16px;
  text-decoration: none; box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.souq-promo-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.24); }
.souq-promo-btn:active { transform: translateY(0); }
@media (max-width: 640px) {
  .souq-promo-card { padding: 44px 22px; }
}

/* --- Site-wide sky treatment (2026-07-07) --- */
/* Roomier first fold — the home/learn hero gets more vertical breathing. */
.hero { padding-top: clamp(80px, 11vh, 120px); padding-bottom: clamp(96px, 13vh, 136px); }
/* Every page header now carries the city skyline (data-skyline), not just the
   home/learn heroes. Give the shorter headers room for the band at the seam. */
.ao-blog-hero { padding-bottom: clamp(104px, 13vw, 160px); }

/* Relaxed first fold: the sky hero fills most of the viewport with its
   content vertically centred, so it breathes instead of feeling pressed.
   (Absolute layers — canvas/nebula/skyline — stay out of flow.) */
.hero--sky {
  min-height: min(82vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Souq promo, elegant salmon revision (replaces the flat green fill) ---
   A deep-indigo card with soft peach→pink glows blooming through it and a
   thin salmon accent line, so the salmon reads as warm atmosphere + accents
   rather than a solid block. Later rules → these override the green above. */
.souq-promo-card {
  background:
    radial-gradient(85% 120% at 14% -12%, rgba(255,148,102,.34), transparent 56%),
    radial-gradient(80% 120% at 96% 116%, rgba(245,83,106,.30), transparent 55%),
    linear-gradient(150deg, #1b0a44 0%, #2a1170 52%, #1f0a52 100%);
  border: 1px solid rgba(255,148,102,.22);
  box-shadow: 0 26px 64px rgba(31,10,82,.42);
}
.souq-promo-card::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: var(--abdul-gradient-salmon); z-index: 2;
}
.souq-promo-card::after {  /* soft peach bloom, top corner */
  background: radial-gradient(circle, rgba(255,148,102,.20), transparent 70%);
}
.souq-promo-eyebrow {
  background: rgba(255,148,102,.16);
  border-color: rgba(255,148,102,.34);
  color: #ffcaae;
}
.souq-promo-points span {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,148,102,.24);
}
.souq-promo-btn {
  background: #fff;
  color: #c22a44;              /* salmon-700 — reads AA on white at this weight */
  box-shadow: 0 12px 30px rgba(245,83,106,.30);
}