/* ============================================================
   ELHISA MTN — Main Stylesheet
   Design tokens, reset, and base styles.
   All component styles live here, organised by section.
   No inline styles or <style> blocks on page files.
   Mobile-first: base → 768px tablet → 1200px desktop.
============================================================ */

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

/* ── Design Tokens ────────────────────────────────────────── */
:root {

  /* MTN core brand */
  --color-brand-yellow:       #FFCC00;
  --color-brand-yellow-dark:  #E6B800;  /* hover / pressed */
  --color-brand-yellow-light: #FFF6CC;  /* tinted backgrounds */
  --color-brand-black:        #000000;
  --color-brand-white:        #FFFFFF;

  /* Surfaces */
  --color-surface:            #FFFFFF;
  --color-surface-alt:        #FAFAFA;
  --color-surface-sunken:     #F4F4F5;
  --color-bg-subtle:          #F9F9FA;

  /* Borders */
  --color-border:             #E4E4E7;
  --color-border-strong:      #D1D1D6;

  /* Text */
  --color-text-primary:       #18181B;
  --color-text-secondary:     #52525B;
  --color-text-muted:         #A1A1AA;
  --color-text-on-yellow:     #000000;  /* always black on brand yellow */
  --color-text-on-dark:       #FFFFFF;  /* on black / dark backgrounds */

  /* Semantic states */
  --color-success:            #16A34A;
  --color-success-bg:         #F0FDF4;
  --color-error:              #DC2626;
  --color-error-bg:           #FEF2F2;
  --color-warning:            #D97706;
  --color-warning-bg:         #FFFBEB;
  --color-info:               #2563EB;
  --color-info-bg:            #EFF6FF;

  /* Stage accent colours — one per education level */
  --color-stage-primary:      #0EA5E9;  /* sky — المرحلة الابتدائية */
  --color-stage-intermediate: #8B5CF6;  /* purple — المرحلة المتوسطة */
  --color-stage-secondary:    #F59E0B;  /* amber — المرحلة الثانوية */

  /* ── Spacing scale (base 4 px = 0.25 rem) ──────────────── */
  --space-1:   0.25rem;   /*  4 px */
  --space-2:   0.5rem;    /*  8 px */
  --space-3:   0.75rem;   /* 12 px */
  --space-4:   1rem;      /* 16 px */
  --space-5:   1.25rem;   /* 20 px */
  --space-6:   1.5rem;    /* 24 px */
  --space-8:   2rem;      /* 32 px */
  --space-10:  2.5rem;    /* 40 px */
  --space-12:  3rem;      /* 48 px */
  --space-16:  4rem;      /* 64 px */
  --space-20:  5rem;      /* 80 px */
  --space-24:  6rem;      /* 96 px */

  /* ── Typography ─────────────────────────────────────────── */
  --font-family-base:  'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;

  --font-size-xs:      0.75rem;    /* 12 px */
  --font-size-sm:      0.875rem;   /* 14 px */
  --font-size-base:    1rem;       /* 16 px */
  --font-size-lg:      1.125rem;   /* 18 px */
  --font-size-xl:      1.25rem;    /* 20 px */
  --font-size-2xl:     1.5rem;     /* 24 px */
  --font-size-3xl:     1.875rem;   /* 30 px */
  --font-size-4xl:     2.25rem;    /* 36 px */
  --font-size-5xl:     3rem;       /* 48 px */

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.25;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;

  /* ── Border radii ───────────────────────────────────────── */
  --radius-sm:    0.25rem;   /*  4 px */
  --radius-md:    0.5rem;    /*  8 px */
  --radius-lg:    0.75rem;   /* 12 px */
  --radius-xl:    1rem;      /* 16 px */
  --radius-2xl:   1.5rem;    /* 24 px */
  --radius-full:  9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);

  /* ── Layout ─────────────────────────────────────────────── */
  --content-max-width: 1200px;
  --content-padding-x: var(--space-4);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:  150ms ease;
  --transition-base:  200ms ease;
  --transition-slow:  300ms ease;

  /* ── Z-index layers ─────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;

  /* ── Header ─────────────────────────────────────────────── */
  --header-height:  64px;
  --header-bg:      var(--color-brand-yellow);
  --header-color:   var(--color-brand-black);
}


/* ================================================================
   RESET
================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ================================================================
   BASE
================================================================ */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden; /* prevent any overflowing element from causing horizontal body scroll */
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* RTL is set on <html dir="rtl"> — body inherits */
}

/* ── Headings ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl);  }
h4 { font-size: var(--font-size-lg);  }
h5 { font-size: var(--font-size-base);}
h6 { font-size: var(--font-size-sm);  }

@media (min-width: 768px) {
  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }
}

p {
  line-height: var(--line-height-relaxed);
}

/* ── Links ────────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Media ────────────────────────────────────────────────── */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Lists ────────────────────────────────────────────────── */
ul, ol {
  list-style: none;
}

/* ── Form elements ────────────────────────────────────────── */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

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


/* ================================================================
   LAYOUT UTILITIES
================================================================ */

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

@media (min-width: 1200px) {
  .container { padding-inline: var(--space-8); }
}

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ================================================================
   SITE HEADER
================================================================ */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background-color: var(--header-bg);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

.site-header__inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  overflow: visible;
}

.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-header__logo img {
  height: 36px;
  width: auto;
  /* White background disappears on yellow: white × yellow = yellow, black stays black */
  mix-blend-mode: multiply;
}

.site-header__search {
  flex: 1;
  max-width: 400px;
  /* Hidden on mobile — shown at tablet+ */
  display: none;
}

@media (min-width: 768px) {
  .site-header__search { display: block; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.site-header__user-menu {
  position: relative;
}

.site-header__phone {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-black);
  background-color: rgba(0, 0, 0, 0.1);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast);
}

.site-header__phone:hover {
  background-color: rgba(0, 0, 0, 0.18);
}

.site-header__chevron {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.site-header__user-menu.is-open .site-header__chevron {
  transform: rotate(180deg);
}

/* On mobile: show only the icon, hide number + chevron */
.site-header__phone-text { display: none; }
.site-header__chevron    { display: none; }

/* On mobile: hide the header CTA — reachable from page body */
.site-header__cta { display: none; }

@media (min-width: 768px) {
  .site-header__phone-text { display: inline; }
  .site-header__chevron    { display: inline; }
  .site-header__cta        { display: inline-flex; }
}

/* Dropdown */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-sticky) + 10);
  overflow: hidden;
}

.user-menu-dropdown__phone {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.user-menu-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.user-menu-dropdown__item:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}

.user-menu-dropdown__item--danger {
  color: var(--color-error);
}

.user-menu-dropdown__item--danger:hover {
  background: var(--color-error-bg);
}

.user-menu-dropdown__divider {
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-1);
}

/* Mobile search icon button */
.site-header__search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-brand-black);
  transition: background-color var(--transition-fast);
}

.site-header__search-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .site-header__search-toggle { display: none; }
}


/* ================================================================
   SEARCH BAR
================================================================ */

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-surface);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  transition: border-color var(--transition-fast);
}

.search-bar:focus-within {
  border-color: var(--color-brand-black);
}

.search-bar__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  outline: none;
}

.search-bar__input::placeholder {
  color: var(--color-text-muted);
}

.search-bar__icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  width: 18px;
  height: 18px;
}

.search-bar__btn {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast);
}

.search-bar__btn:hover {
  color: var(--color-brand-black);
}


/* ================================================================
   BUTTONS
================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color            var(--transition-fast),
    border-color     var(--transition-fast),
    box-shadow       var(--transition-fast);
}

.btn:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

.btn:hover { text-decoration: none; }

/* Primary — yellow fill */
.btn--primary {
  background-color: var(--color-brand-yellow);
  color:            var(--color-brand-black);
  border-color:     var(--color-brand-yellow);
}

.btn--primary:hover {
  background-color: var(--color-brand-yellow-dark);
  border-color:     var(--color-brand-yellow-dark);
}

/* Secondary — outline */
.btn--secondary {
  background-color: transparent;
  color:            var(--color-brand-black);
  border-color:     var(--color-brand-black);
}

.btn--secondary:hover {
  background-color: var(--color-brand-black);
  color:            var(--color-brand-white);
}

/* Ghost — subtle */
.btn--ghost {
  background-color: transparent;
  color:            var(--color-text-secondary);
  border-color:     var(--color-border);
}

.btn--ghost:hover {
  background-color: var(--color-surface-sunken);
  color:            var(--color-text-primary);
}

/* Danger — cancel / destructive */
.btn--danger {
  background-color: var(--color-error);
  color:            var(--color-brand-white);
  border-color:     var(--color-error);
}

.btn--danger:hover {
  background-color: #b91c1c;
  border-color:     #b91c1c;
}

/* On yellow backgrounds (header cancel button) */
.btn--on-yellow {
  background-color: rgba(0, 0, 0, 0.08);
  color:            var(--color-brand-black);
  border-color:     transparent;
}

.btn--on-yellow:hover {
  background-color: rgba(0, 0, 0, 0.16);
}

/* Size modifiers */
.btn--sm {
  padding-block:  var(--space-2);
  padding-inline: var(--space-4);
  font-size:      var(--font-size-sm);
}

.btn--lg {
  padding-block:  var(--space-4);
  padding-inline: var(--space-8);
  font-size:      var(--font-size-lg);
}

.btn--full { width: 100%; }


/* ================================================================
   BREADCRUMB
================================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding-block: var(--space-4);
  font-size: var(--font-size-sm);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
  color: var(--color-brand-black);
  text-decoration: underline;
}

/* Separator chevron — pointing left in RTL (← direction) */
.breadcrumb__sep {
  color: var(--color-text-muted);
  font-size: 0.65rem;
  user-select: none;
}

.breadcrumb__item:last-child .breadcrumb__link,
.breadcrumb__current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}

/* Breadcrumb on dark backgrounds (inside .page-header) */
.page-header .breadcrumb__link {
  color: rgba(255, 255, 255, 0.6);
}

.page-header .breadcrumb__link:hover {
  color: var(--color-brand-white);
  text-decoration: underline;
}

.page-header .breadcrumb__sep {
  color: rgba(255, 255, 255, 0.35);
}

.page-header .breadcrumb__current {
  color: var(--color-brand-white);
}


/* ================================================================
   CARDS — base
================================================================ */

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow  var(--transition-base),
    transform   var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform:  translateY(-2px);
}

/* Focus within shows outline on the card, not just the link */
.card:focus-within {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

.card__thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-surface-sunken);
}

.card__body {
  padding: var(--space-4);
}

.card__title {
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
  margin-block-end: var(--space-2);
  /* Two-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-block-start: var(--space-3);
}

.card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.card__footer {
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}


/* ── card-content variant (lesson / session / unit card) ──── */
.card-content .card__thumbnail-wrap {
  position: relative;
}

.card-content .card__duration {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  background-color: rgba(0, 0, 0, 0.75);
  color: var(--color-brand-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding-block: 2px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  direction: ltr;
}

.card-content .card__teacher {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-block-start: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card-content .card__teacher-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}


/* ── card-teacher variant ─────────────────────────────────── */
.card-teacher {
  text-align: center;
  padding: var(--space-5) var(--space-4);
}

.card-teacher__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-inline: auto;
  margin-block-end: var(--space-3);
  border: 3px solid var(--color-brand-yellow);
  background-color: var(--color-surface-sunken);
}

.card-teacher__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-block-end: var(--space-1);
}

.card-teacher__subject {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}


/* ── card-stage variant ───────────────────────────────────── */
.card-stage {
  border-block-start: 4px solid var(--stage-color, var(--color-brand-yellow));
  display: flex;
  flex-direction: column;
}

.card-stage__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background-color: var(--stage-color, var(--color-brand-yellow));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--space-4);
  color: var(--color-brand-white);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.card-stage__stats {
  display: flex;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.card-stage__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
}

.card-stage__stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.card-stage__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.card-stage__link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}

.card-stage__link:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

/* ── card-stage grade pills ───────────────────────────────── */
.card-stage__grades {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.grade-pill {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;              /* 44 px tap target on mobile */
  padding-inline: var(--space-4);   /* 16 px horizontal breathing room */

  /* Shape */
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);

  /* Typography */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;

  /* Colour — distinct from white card background */
  color: var(--color-text-secondary);
  background-color: var(--color-surface-sunken);   /* #F4F4F5 — clearly not white */

  /* Interaction */
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    color        var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.grade-pill:hover {
  border-color: var(--stage-color, var(--color-brand-yellow));
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  box-shadow: 0 0 0 2px var(--stage-color, var(--color-brand-yellow));
  text-decoration: none;
}

/* Focus: always brand yellow per accessibility rules */
.grade-pill:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 2px;
  border-color: var(--color-brand-yellow);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
}


/* ================================================================
   GRIDS
================================================================ */

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}


/* ================================================================
   HORIZONTAL CAROUSEL
================================================================ */

.carousel-wrap {
  position: relative;
  /* Give room for the buttons that hang outside */
  margin-inline: calc(-1 * var(--space-1));
  padding-inline: var(--space-1);
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-raised);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    box-shadow       var(--transition-fast);
}

.carousel__btn:hover {
  background-color: var(--color-brand-yellow);
  border-color: var(--color-brand-yellow);
  box-shadow: var(--shadow-lg);
}

.carousel__btn:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

/* Hide on mobile — touch scroll handles navigation */
@media (max-width: 767px) {
  .carousel__btn { display: none; }
}

/* In RTL: prev = rightmost (inline-start), next = leftmost (inline-end) */
.carousel__btn--prev { inset-inline-start: -18px; }
.carousel__btn--next { inset-inline-end:   -18px; }


.carousel {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block-end: var(--space-2);
}

.carousel::-webkit-scrollbar { display: none; }

.carousel__track {
  display: flex;
  gap: var(--space-4);
  /* Padding prevents focus outlines from being clipped on first/last item */
  padding-inline: var(--space-1);
  padding-block: var(--space-1);
}

.carousel__item {
  flex-shrink: 0;
  width: 220px;
  scroll-snap-align: start;
}

/* Teacher carousel items are narrower */
.carousel--teachers .carousel__item { width: 160px; }

@media (min-width: 768px) {
  .carousel__item { width: 260px; }
  .carousel--teachers .carousel__item { width: 180px; }
}


/* ================================================================
   SECTION
================================================================ */

.section {
  padding-block: var(--space-8);
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.section__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.section__link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.section__link:hover {
  color: var(--color-brand-black);
  text-decoration: underline;
}


/* ================================================================
   HERO (landing page — full colour treatment)
================================================================ */

.hero {
  background-color: var(--color-brand-yellow); /* fallback while slides load */
  padding-block: var(--space-16) var(--space-20);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── Hero content stays above the slide layer ─────────── */
.hero__content {
  position: relative;
  z-index: 1;
}

/* Inner wrapper — full-width on mobile (centered, inherits hero's
   text-align: center). On tablet+ it becomes a constrained block
   pushed to the RTL-start (right) side, freeing the left half for
   the photo subject.                                              */
.hero__content-inner {
  width: 100%;
}

/* ── Slideshow backdrop ────────────────────────────────── */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-slide-fade 18s ease-in-out infinite;
}

/* Slide 1 — solid MTN yellow (current design) */
.hero__slide--1 {
  background-color: var(--color-brand-yellow);
  animation-delay: -1s; /* already 1 s into cycle → immediately fully visible */
}

/* Slide 2 — girl in yellow hijab + yellow tint overlay */
.hero__slide--2 {
  background-image: url('../images/hero-student-1.jpg');
  background-size: cover;
  background-position: center top;
  animation: hero-slide-fade 18s ease-in-out infinite,
             ken-burns-1     18s ease-in-out infinite;
  animation-delay: 5s, 5s;
}

/* Slide 3 — three students walking + yellow tint overlay */
.hero__slide--3 {
  background-image: url('../images/hero-student-2.jpg');
  background-size: cover;
  background-position: center 30%;
  animation: hero-slide-fade 18s ease-in-out infinite,
             ken-burns-2     18s ease-in-out infinite;
  animation-delay: 11s, 11s;
}

/* Yellow brand tint on photo slides — very light so photos breathe,
   slightly stronger only in the text band for readability */
.hero__slide--2::after,
.hero__slide--3::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 204, 0, 0.10) 0%,
    rgba(255, 204, 0, 0.28) 35%,
    rgba(255, 204, 0, 0.28) 65%,
    rgba(255, 204, 0, 0.10) 100%
  );
}

/* ── Crossfade keyframe (shared by all slides) ─────────── */
/* Cycle: 1 s fade-in → 5 s visible → 1 s fade-out → 11 s hidden = 18 s total */
@keyframes hero-slide-fade {
  0%      { opacity: 0; }
  5.56%   { opacity: 1; } /* 1 s  — fade in complete   */
  33.33%  { opacity: 1; } /* 6 s  — start fading out   */
  38.89%  { opacity: 0; } /* 7 s  — fully hidden       */
  100%    { opacity: 0; } /* 18 s — stay hidden, loop  */
}

/* ── Ken Burns motion on photo slides ──────────────────── */
@keyframes ken-burns-1 {
  0%   { transform: scale(1.08) translate(1%,  1%); }
  100% { transform: scale(1.00) translate(0,   0);  }
}
@keyframes ken-burns-2 {
  0%   { transform: scale(1.00) translate(0,   0);  }
  100% { transform: scale(1.07) translate(-1%, -1%); }
}

/* ── Slide progress dots ───────────────────────────────── */
.hero__dots {
  position: absolute;
  bottom: var(--space-5);
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  z-index: 2;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.25);
  animation: dot-active 18s ease-in-out infinite;
}

.hero__dot--1 { animation-delay: -1s; }
.hero__dot--2 { animation-delay: 5s;  }
.hero__dot--3 { animation-delay: 11s; }

@keyframes dot-active {
  0%,  5.56%  { background: rgba(0,0,0,0.80); width: 22px; }
  33.33%      { background: rgba(0,0,0,0.80); width: 22px; }
  38.89%      { background: rgba(0,0,0,0.25); width: 8px;  }
  100%        { background: rgba(0,0,0,0.25); width: 8px;  }
}

/* ── Respect reduced-motion preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__dot,
  .hero__subtitle { animation: none; }
  .hero__slide--1 { opacity: 1; }          /* show only the yellow slide */
  .hero__dot--1   { background: rgba(0,0,0,0.80); width: 22px; }
  .hero__subtitle { opacity: 1; }          /* always show subtitle       */
}

.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-black);
  margin-block-end: var(--space-4);
  /* yellow glow: invisible on yellow slide, lifts text off photo slides */
  text-shadow:
    0 0 24px rgba(255, 204, 0, 1),
    0 0  8px rgba(255, 204, 0, 0.9);
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-brand-black);
  max-width: 560px;
  margin-inline: auto;
  margin-block-end: var(--space-8);
  /* fade in/out in sync with slide 1 — hidden while photo slides are showing */
  animation: hero-subtitle-show 18s ease-in-out infinite;
  animation-delay: -1s; /* same offset as slide 1 → immediately visible */
}

@keyframes hero-subtitle-show {
  0%      { opacity: 0; }
  5.56%   { opacity: 1; } /* 1 s  — fully visible (synced with slide 1)  */
  33.33%  { opacity: 1; } /* 6 s  — start fading with slide 1            */
  38.89%  { opacity: 0; } /* 7 s  — hidden while photo slides show       */
  100%    { opacity: 0; } /* 18 s — stay hidden until next loop          */
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .hero__title    { font-size: var(--font-size-4xl); }
  .hero__subtitle { font-size: var(--font-size-xl); }

  /* Split layout: turn the container into a flex row so the inner
     block sits on the RTL-start (right) side. The left half stays
     clear, letting the photo subject breathe.                     */
  .hero__content {
    display: flex;
    justify-content: flex-start; /* flex-start = right in RTL     */
    align-items: center;
  }
  .hero__content-inner {
    max-width: 480px;
    text-align: start;
  }
  /* Remove the auto-centering margin the subtitle normally uses   */
  .hero__subtitle {
    margin-inline: 0;
  }
  /* Align CTA buttons to RTL start (right) instead of center     */
  .hero__actions {
    justify-content: flex-start;
  }
}

@media (min-width: 1200px) {
  .hero__title    { font-size: var(--font-size-5xl); }
  .hero__content-inner { max-width: 540px; }
}


/* ================================================================
   PAGE HEADER (compact — used on all sub-pages instead of hero)
   Improvement over Al-Hessa: no repeated giant banner on every page.
================================================================ */

.page-header {
  background-color: var(--color-brand-black);
  padding-block: var(--space-8);
  color: var(--color-brand-white);
}

.page-header__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-yellow);
  margin-block-end: var(--space-2);
}

.page-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-white);
  margin-block-end: var(--space-2);
}

.page-header__subtitle {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.65);
  max-width: 640px;
}

@media (min-width: 768px) {
  .page-header__title { font-size: var(--font-size-3xl); }
}


/* ================================================================
   FORMS
================================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-label--required::after {
  content: ' *';
  color: var(--color-error);
}

.form-control {
  width: 100%;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-brand-black);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.4);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-control:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-error-msg {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}


/* ── Phone input (country-code prefix + number) ───────────── */
.phone-input {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface);
  direction: ltr;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.phone-input:focus-within {
  border-color: var(--color-brand-black);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.4);
}

.phone-input__prefix {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  background-color: var(--color-surface-sunken);
  border-inline-end: 1.5px solid var(--color-border);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.phone-input__field {
  flex: 1;
  min-width: 0;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  direction: ltr;
}

.phone-input__field:focus { outline: none; }

.phone-input__field::placeholder { color: var(--color-text-muted); }


/* ================================================================
   BADGES
================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block:  2px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.badge--yellow  { background-color: var(--color-brand-yellow); color: var(--color-brand-black); }
.badge--success { background-color: var(--color-success-bg);   color: var(--color-success); }
.badge--error   { background-color: var(--color-error-bg);     color: var(--color-error); }
.badge--neutral {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}


/* ================================================================
   ALERTS
================================================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
}

.alert--warning { background-color: var(--color-warning-bg); border-color: var(--color-warning); }
.alert--success { background-color: var(--color-success-bg); border-color: var(--color-success); }
.alert--error   { background-color: var(--color-error-bg);   border-color: var(--color-error); }
.alert--info    { background-color: var(--color-info-bg);    border-color: var(--color-info); }

.alert__icon { flex-shrink: 0; margin-block-start: 1px; }
.alert__title { font-weight: var(--font-weight-semibold); margin-block-end: var(--space-1); }


/* ================================================================
   EMPTY STATE
================================================================ */

.empty-state {
  text-align: center;
  padding-block: var(--space-16);
  padding-inline: var(--space-8);
}

.empty-state__icon {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  margin-block-end: var(--space-5);
  color: var(--color-text-muted);
}

.empty-state__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-block-end: var(--space-2);
}

.empty-state__body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 400px;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}


/* ================================================================
   VIDEO PLAYER
================================================================ */

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-brand-black);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ================================================================
   SITE FOOTER
================================================================ */

.site-footer {
  background-color: var(--color-brand-black);
  color: var(--color-brand-white);
  padding-block: var(--space-10);
  margin-block-start: var(--space-12);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__logo {
  height: 32px;
  width: auto;
  /* invert(1): black oval → white, white background → black (matches footer bg) */
  filter: invert(1);
}

.site-footer__tagline {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-block-start: var(--space-2);
  max-width: 280px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__link {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-brand-white);
  text-decoration: none;
}

.site-footer__bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}


/* ================================================================
   SUBSCRIPTION UI
================================================================ */

.subscription-card {
  background-color: var(--color-brand-yellow);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}

.subscription-card__price {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-black);
  line-height: 1;
  margin-block: var(--space-4);
}

.subscription-card__unit {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
}

.subscription-card__features {
  text-align: start;
  margin-block: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.subscription-card__feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-brand-black);
}

.subscription-card__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--color-brand-black);
  color: var(--color-brand-yellow);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}


/* ================================================================
   ACCOUNT PAGE
================================================================ */

.account-status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-block-end: var(--space-6);
}

.account-status__indicator {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.account-status--active   .account-status__indicator { background-color: var(--color-success); }
.account-status--inactive .account-status__indicator { background-color: var(--color-error); }

.account-status__label {
  font-weight: var(--font-weight-semibold);
}

.account-status--active   .account-status__label { color: var(--color-success); }
.account-status--inactive .account-status__label { color: var(--color-error); }


/* ================================================================
   DIVIDER
================================================================ */

.divider {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-6);
}


/* ================================================================
   TEACHER PROFILE
================================================================ */

.teacher-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding-block: var(--space-8);
}

.teacher-profile__avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 4px solid var(--color-brand-yellow);
  background-color: var(--color-surface-sunken);
}

.teacher-profile__name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.teacher-profile__meta {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.teacher-profile__bio {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 540px;
  line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
  .teacher-profile {
    flex-direction: row;
    text-align: start;
    align-items: flex-start;
  }

  .teacher-profile__avatar { flex-shrink: 0; }
}


/* ================================================================
   MODAL / CONFIRMATION DIALOG
================================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 440px;
  text-align: center;
}

.modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--space-3);
}

.modal__body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-6);
}

.modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .modal__actions {
    flex-direction: row;
    justify-content: center;
  }
}


/* ================================================================
   SEARCH RESULTS
================================================================ */

.search-results__section {
  margin-block-end: var(--space-10);
}

.search-results__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-brand-yellow);
  margin-block-end: var(--space-5);
  display: inline-block;
}


/* ================================================================
   PROGRESS / CONTINUE WATCHING
================================================================ */

.card-progress {
  position: relative;
}

.card-progress__bar-track {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 3px;
  background-color: var(--color-border);
}

.card-progress__bar-fill {
  height: 100%;
  background-color: var(--color-brand-yellow);
  border-radius: 0 0 0 var(--radius-lg);
}


/* ================================================================
   STAGE CARD COLOUR VARIANTS
================================================================ */

.card-stage--primary      { --stage-color: var(--color-stage-primary); }
.card-stage--intermediate { --stage-color: var(--color-stage-intermediate); }
.card-stage--secondary    { --stage-color: var(--color-stage-secondary); }


/* ================================================================
   THUMBNAIL PLACEHOLDER
   Used when no real thumbnail is available.
================================================================ */

.thumb-placeholder {
  background-color: var(--color-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ================================================================
   UTILITIES
================================================================ */

.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

.text-muted   { color: var(--color-text-muted); }
.text-sm      { font-size: var(--font-size-sm); }
.text-xs      { font-size: var(--font-size-xs); }
.text-bold    { font-weight: var(--font-weight-bold); }
.text-medium  { font-weight: var(--font-weight-medium); }

.mt-auto  { margin-block-start: auto; }
.mb-4     { margin-block-end: var(--space-4); }
.mb-6     { margin-block-end: var(--space-6); }
.mb-8     { margin-block-end: var(--space-8); }

.hidden           { display: none !important; }
.flex-center      { display: flex; align-items: center; justify-content: center; }
.flex-between     { display: flex; align-items: center; justify-content: space-between; }
.gap-2            { gap: var(--space-2); }
.gap-3            { gap: var(--space-3); }


/* ================================================================
   LANDING PAGE
================================================================ */

/* Hero extras */
.hero__eyebrow {
  margin-block-end: var(--space-4);
}

.hero__price-hint {
  margin-block-start: var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-black);
  opacity: 0.65;
}

/* ── Hero CTA buttons — work on yellow slide AND photo slides ─
   Scoped to .hero__content so global btn styles are untouched.

   Primary   (اشترك الآن / btn--secondary):  solid black fill, white text
   Secondary (تسجيل الدخول / btn--on-yellow): outlined black, faint white
             background lifts it off photo backgrounds while being
             invisible on the yellow slide                           */
.hero__content .btn--secondary {
  background-color: var(--color-brand-black);
  color:            var(--color-brand-white);
  border-color:     var(--color-brand-black);
}
.hero__content .btn--secondary:hover {
  background-color: #1a1a1a;
  border-color:     #1a1a1a;
}

.hero__content .btn--on-yellow {
  background-color: rgba(255, 255, 255, 0.15);
  color:            var(--color-brand-black);
  border-color:     var(--color-brand-black);
}
.hero__content .btn--on-yellow:hover {
  background-color: rgba(255, 255, 255, 0.30);
}

/* Features strip */
.features-strip {
  background-color: var(--color-brand-black);
  padding-block: var(--space-8);
}

.features-strip__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .features-strip__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.features-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  color: var(--color-brand-white);
}

@media (min-width: 768px) {
  .features-strip__item {
    flex-direction: row;
    text-align: start;
    align-items: flex-start;
  }
}

.features-strip__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background-color: var(--color-brand-yellow);
  color: var(--color-brand-black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.features-strip__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-white);
  margin-block-end: var(--space-1);
}

.features-strip__body {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--line-height-snug);
}

/* Landing stage cards */
.landing-stages {
  background-color: var(--color-surface-alt);
}

.landing-stages__grid {
  gap: var(--space-5);
}

.landing-stage-card {
  height: 100%;
}

.landing-stage-card__link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.landing-stage-card__link:hover { text-decoration: none; }

.landing-stage-card__cta {
  margin-block-start: var(--space-5);
}

/* Landing CTA banner */
.landing-cta-banner {
  background-color: var(--color-brand-yellow);
  padding-block: var(--space-12);
}

.landing-cta-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .landing-cta-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.landing-cta-banner__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-black);
  margin-block-end: var(--space-2);
}

@media (min-width: 768px) {
  .landing-cta-banner__title { font-size: var(--font-size-3xl); }
}

.landing-cta-banner__body {
  font-size: var(--font-size-base);
  color: var(--color-brand-black);
  opacity: 0.75;
  max-width: 480px;
}

.landing-cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .landing-cta-banner__actions { flex-direction: row; flex-wrap: wrap; }
}
.gap-4            { gap: var(--space-4); }


/* ================================================================
   AUTH PAGES (login, subscribe)
================================================================ */

.auth-page {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  background-color: var(--color-surface-alt);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
}

.auth-card__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.auth-card__logo {
  mix-blend-mode: multiply;
}

.auth-card__platform {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.auth-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--space-2);
}

.auth-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-6);
}

.auth-card__form {
  margin-block-end: var(--space-2);
}

.auth-card__divider {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-6);
}

.auth-card__footer-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-block-end: var(--space-3);
}

.auth-card__footer-note a {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
}


/* ================================================================
   PAGE HEADER STAGE VARIANTS
   Coloured bottom border matching the stage accent colour.
================================================================ */

.page-header--primary      { border-block-end: 4px solid var(--color-stage-primary); }
.page-header--intermediate { border-block-end: 4px solid var(--color-stage-intermediate); }
.page-header--secondary    { border-block-end: 4px solid var(--color-stage-secondary); }


/* ================================================================
   CARD — CLASS  (used on stage page)
================================================================ */

.card-class__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  padding: var(--space-5);
}

.card-class__link:hover { text-decoration: none; }

.card-class__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.card-class__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.card-class__arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  margin-block-start: 2px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.card:hover .card-class__arrow {
  color: var(--color-brand-black);
  transform: translateX(-3px);
}

.card-class__stats {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.card-class__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
}

.card-class__stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}


/* ================================================================
   SESSION LIST  (lesson page)
================================================================ */

.session-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.session-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow  var(--transition-base),
    transform   var(--transition-base);
}

.session-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
}

.session-item:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

.session-item__number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-item__play {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-yellow);
  color: var(--color-brand-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.session-item:hover .session-item__play {
  background-color: var(--color-brand-yellow-dark);
}

.session-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.session-item__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-item__teacher {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.session-item__duration {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-sunken);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
}

/* Teacher link in page-header subtitle */
.page-header__teacher-link {
  color: var(--color-brand-yellow);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.page-header__teacher-link:hover {
  text-decoration: underline;
}


/* ================================================================
   HOME PAGE
================================================================ */

.home-hero {
  background-color: var(--color-brand-yellow);
  padding-block: var(--space-8) var(--space-10);
}

.home-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .home-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.home-hero__eyebrow {
  font-size: var(--font-size-sm);
  color: rgba(0, 0, 0, 0.6);
  margin-block-end: var(--space-2);
}

.home-hero__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-black);
  margin-block-end: var(--space-2);
}

@media (min-width: 768px) {
  .home-hero__title { font-size: var(--font-size-3xl); }
}

.home-hero__subtitle {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.65);
  max-width: 480px;
}

.home-hero__cta {
  flex-shrink: 0;
}

/* "واصل المشاهدة" card label */
.card-content__subject-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

/* ── Video page (video.php / lesson.php) ─────────────────── */
.video-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* Grid items default to min-width: auto which lets content (e.g. nowrap
   text in the nav buttons) push them wider than 1fr. Override to 0 so
   the column stays constrained and overflow is handled by inner elements. */
.video-page__main,
.video-page__sidebar {
  min-width: 0;
}

@media (min-width: 1200px) {
  .video-page {
    grid-template-columns: 1fr 340px;
    align-items: start;
  }

  /* Single-session lesson: no sidebar, player takes full content width */
  .video-page--single {
    grid-template-columns: 1fr;
  }
}

/* Prev / next nav */
.video-nav {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.video-nav__prev,
.video-nav__next {
  flex: 1;
  min-width: 0; /* allow flex children to shrink below content size */
}

.video-nav__btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-decoration: none;
  width: 100%;
  min-width: 0; /* critical: lets button shrink inside its flex-1 parent */
  overflow: hidden;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

/* Text container inside nav button — must shrink to allow ellipsis to kick in */
.video-nav__btn > span {
  min-width: 0;
  overflow: hidden;
}

.video-nav__btn:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-brand-yellow);
}

.video-nav__btn--disabled {
  opacity: 0.4;
  cursor: default;
}

.video-nav__next .video-nav__btn {
  flex-direction: row-reverse;
  text-align: end;
}

.video-nav__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.video-nav__title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Teacher attribution */
.video-teacher {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}

.video-teacher__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.video-teacher__name {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
}

.video-teacher__name:hover {
  color: var(--color-brand-yellow);
  text-decoration: underline;
}

.video-teacher__subject {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Sidebar */
.video-page__sidebar {
  position: sticky;
  top: calc(var(--header-height, 64px) + var(--space-4));
}

.video-sidebar__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

/* Active session in sidebar */
.session-item--active {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
  cursor: default;
}

.session-item--active .session-item__number {
  background: var(--color-brand-black);
  color: var(--color-brand-yellow);
}

.session-item--active .session-item__play {
  color: var(--color-brand-black);
}

.session-item--active .session-item__duration {
  background: rgba(0, 0, 0, 0.12);
  color: var(--color-brand-black);
}


/* ── Teacher profile page (teacher.php) ──────────────────── */
.teacher-profile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (max-width: 767px) {
  .teacher-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.teacher-profile__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-brand-yellow);
}

.teacher-profile__info {
  flex: 1;
}

.teacher-profile__name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-block-end: var(--space-1);
}

.teacher-profile__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-3);
}

.teacher-profile__bio {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 640px;
  margin: 0;
}

/* Subtle background section */
.section--subtle {
  background: var(--color-bg-subtle);
}

/* ── Prose (privacy / terms static pages) ───────────────── */
.prose {
  max-width: 720px;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.prose h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-block-start: var(--space-8);
  margin-block-end: var(--space-3);
}

.prose p,
.prose ul {
  margin-block-end: var(--space-4);
}

.prose ul {
  padding-inline-start: var(--space-6);
  list-style: disc;
}

.prose li {
  margin-block-end: var(--space-2);
}

/* ── Search page (search.php) ────────────────────────────── */
.section--search-bar {
  padding-block: var(--space-6);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}

.search-form__wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-form__wrap:focus-within {
  border-color: var(--color-brand-yellow);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.25);
}

.search-form__icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-form__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  min-width: 0;
}

.search-form__input::placeholder {
  color: var(--color-text-muted);
}

.search-form__btn {
  flex-shrink: 0;
  border-radius: var(--radius-full);
}

.search-results__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-6);
}

.search-results__section {
  margin-block-end: var(--space-10);
}

.search-results__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-brand-yellow);
  display: inline-block;
}

.search-results__item-context {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
  margin-block-end: 0;
}

/* ── Account page (account.php) ──────────────────────────── */
.account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 640px;
}

.account-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.account-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.account-info {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.account-info__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.account-info__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-width: 120px;
}

.account-info__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--neutral {
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
}

/* Subscription status block */
.account-sub {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-4);
}

.account-sub--active {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
}

.account-sub--inactive {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.account-sub__badge {
  flex-shrink: 0;
  color: inherit;
}

.account-sub--active .account-sub__badge { color: var(--color-success); }
.account-sub--inactive .account-sub__badge { color: var(--color-warning); }

.account-sub__label {
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--space-1);
}

.account-sub__detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Account notice (cancelled banner) */
.account-notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-block-end: var(--space-4);
}

.account-notice--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}

/* ── 404 / error page ────────────────────────────────────── */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding-block: var(--space-16);
}

.error-page__inner {
  text-align: center;
  max-width: 480px;
}

.error-page__code {
  font-size: 7rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-yellow);
  line-height: 1;
  margin-block-end: 0;
  letter-spacing: -4px;
}

.error-page__icon {
  color: var(--color-text-muted);
  margin-block: var(--space-4);
}

.error-page__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--space-3);
}

.error-page__body {
  color: var(--color-text-secondary);
  margin-block-end: var(--space-8);
}

.error-page__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* FAQ contextual links */
.account-faq-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}

.account-faq-hint a {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.account-faq-hint a:hover {
  color: var(--color-text-primary);
}

.empty-state__faq-link {
  display: inline-block;
  margin-block-start: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.empty-state__faq-link:hover {
  color: var(--color-text-secondary);
}

/* ── FAQ page (faq.php) ──────────────────────────────────── */
.faq-layout {
  max-width: 760px;
}

.faq-category {
  margin-block-end: var(--space-10);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.faq-accordion {
  padding-block-start: var(--space-3);
}

.faq-category__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-block-end: var(--space-4);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-inline-start: 4px solid var(--color-brand-yellow);
  background: var(--color-surface);
  position: sticky;
  top: calc(var(--header-height) + var(--space-2));
  z-index: var(--z-raised);
  box-shadow: var(--shadow-sm);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.faq-category__title svg {
  color: var(--color-brand-yellow);
  flex-shrink: 0;
}

/* Accordion */
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-2);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item[open] {
  border-color: var(--color-brand-yellow);
}

.faq-item__question {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
  user-select: none;
  transition: background var(--transition-fast);
}

.faq-item__question::-webkit-details-marker { display: none; }

.faq-item__question:hover {
  background: var(--color-bg-subtle);
}

.faq-item[open] .faq-item__question {
  background: var(--color-brand-yellow-light);
  border-block-end: 1px solid var(--color-border);
}

.faq-item__question:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: -2px;
}

/* Chevron via pseudo-element */
.faq-item__question::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform var(--transition-base);
  margin-block-start: -4px;
}

.faq-item[open] .faq-item__question::after {
  transform: rotate(-135deg);
  margin-block-start: 4px;
}

.faq-item__answer {
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-secondary);
  line-height: 1.75;
  font-size: var(--font-size-base);
}

/* Contact CTA */
.faq-contact-cta {
  background: var(--color-brand-yellow);
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-brand-black);
}

.faq-contact-cta h2 {
  color: var(--color-brand-black);
  font-size: var(--font-size-2xl);
  margin-block-end: var(--space-2);
}

.faq-contact-cta p {
  color: rgba(0, 0, 0, 0.7);
  margin-block-end: 0;
}

.faq-contact-methods {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-block-start: var(--space-6);
}

/* WhatsApp button */
.btn--whatsapp {
  background-color: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
}

.btn--whatsapp:hover {
  background-color: #1ebe5d;
  border-color: #1ebe5d;
  color: #FFFFFF;
  text-decoration: none;
}

/* Category quick-nav */
.faq-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-8);
  padding: var(--space-5);
  background: var(--color-brand-black);
  border-radius: var(--radius-md);
}

.faq-quicknav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.faq-quicknav__item svg {
  opacity: 0.7;
}

.faq-quicknav__item:hover {
  background: var(--color-brand-yellow);
  border-color: var(--color-brand-yellow);
  color: var(--color-brand-black);
  text-decoration: none;
}

.faq-quicknav__item:hover svg {
  opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .faq-item__question {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
  }

  .faq-item__answer {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
  }

  .faq-contact-methods {
    flex-direction: column;
    align-items: stretch;
  }

  .faq-contact-cta {
    padding: var(--space-8) var(--space-4);
  }
}


/* ================================================================
   GRADE PAGE — back button, track tabs, subject grid
================================================================ */

/* ── Back button (mobile only, inside .page-header) ──────────── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-block-end: var(--space-4);
  transition: color var(--transition-fast);
}

.back-btn:hover {
  color: var(--color-brand-white);
  text-decoration: none;
}

/* In RTL the arrow icon points right (→); rotate so it points left (←) = "go back" */
.back-btn svg {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .back-btn { display: none; }               /* desktop uses breadcrumbs */
}

/* Breadcrumb visible on desktop only inside page-header */
@media (max-width: 767px) {
  .page-header .breadcrumb { display: none; } /* mobile uses back-btn */
}


/* ── Track tabs (Grade 12 only) ───────────────────────────── */
.track-tabs-bar {
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}

.track-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;   /* Firefox */
}

.track-tabs::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

.track-tab {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-block-end: 3px solid transparent;
  transition:
    color         var(--transition-fast),
    border-color  var(--transition-fast);
}

.track-tab:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

.track-tab--active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  border-block-end-color: var(--color-brand-yellow);
}

.track-tab:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: -3px;
}


/* ── Subject grid ─────────────────────────────────────────── */
.subject-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .subject-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .subject-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ── Subject card ─────────────────────────────────────────── */
.subject-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition:
    border-color     var(--transition-base),
    box-shadow       var(--transition-base),
    transform        var(--transition-base);
}

.subject-card:hover {
  border-color: var(--subject-accent, var(--color-brand-yellow));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
}

.subject-card:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

/* Stage accent colour per card variant */
.subject-card--primary      { --subject-accent: var(--color-stage-primary); }
.subject-card--intermediate { --subject-accent: var(--color-stage-intermediate); }
.subject-card--secondary    { --subject-accent: var(--color-stage-secondary); }

.subject-card__body {
  flex: 1;
  min-width: 0;   /* prevents flex child from overflowing */
}

.subject-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-block-end: var(--space-2);
  line-height: var(--line-height-snug);
}

.subject-card__meta {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Separator dot between meta items */
.subject-card__meta li:not(:last-child)::after {
  content: '·';
  margin-inline: var(--space-2);
  color: var(--color-text-muted);
}

.subject-card__teacher {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.subject-card__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition:
    color     var(--transition-fast),
    transform var(--transition-fast);
}

.subject-card:hover .subject-card__chevron {
  color: var(--subject-accent, var(--color-brand-yellow));
  transform: translateX(-3px);   /* slides toward left = "forward" in RTL */
}

/* ── Unit Accordions (subject.php) ──────────────────────────── */

.unit-accordions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.unit-accordion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.unit-accordion[open] {
  border-color: var(--color-brand-yellow);
  box-shadow: var(--shadow-md);
}

.unit-accordion__summary {
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  user-select: none;
  transition: background var(--transition-fast);
}

.unit-accordion__summary::-webkit-details-marker { display: none; }

.unit-accordion__summary:hover {
  background: var(--color-bg-subtle);
}

.unit-accordion[open] .unit-accordion__summary {
  background: var(--color-brand-yellow-light);
  border-block-end: 1px solid var(--color-border);
}

.unit-accordion__summary:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: -2px;
}

/* Chevron — rotates on open */
.unit-accordion__summary::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid var(--color-text-muted);
  border-block-end: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
  margin-block-start: -4px;
}

.unit-accordion[open] .unit-accordion__summary::after {
  transform: rotate(-135deg);
  margin-block-start: 4px;
}

.unit-accordion__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.unit-accordion__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}

.unit-accordion__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.unit-accordion__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.unit-accordion__empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  padding-block: var(--space-4);
}

/* ══════════════════════════════════════════════════════════
   Materials Section (lesson.php)
══════════════════════════════════════════════════════════ */

/* ── Outer wrapper <details> ─────────────────────────────── */

.materials-section {
  margin-block-start: var(--space-8);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.materials-section[open] {
  border-color: var(--color-brand-yellow);
  box-shadow: var(--shadow-md);
}

.materials-section__summary {
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  user-select: none;
  transition: background var(--transition-fast);
  min-height: 3.5rem;
}

.materials-section__summary::-webkit-details-marker { display: none; }

.materials-section__summary:hover {
  background: var(--color-bg-subtle);
}

.materials-section[open] .materials-section__summary {
  background: var(--color-brand-yellow-light);
  border-block-end: 2px solid var(--color-brand-yellow);
}

.materials-section__summary:focus-visible {
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: -3px;
}

/* Chevron */
.materials-section__summary::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  margin-inline-start: auto;
  width: 10px;
  height: 10px;
  border-inline-end: 2.5px solid var(--color-text-secondary);
  border-block-end: 2.5px solid var(--color-text-secondary);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
  margin-block-start: -4px;
}

.materials-section[open] .materials-section__summary::after {
  transform: rotate(-135deg);
  margin-block-start: 4px;
}

/* ── Heading (title + count) — shown collapsed ───────────── */

.materials-section__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.materials-section__total-count {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

/* When open + has icon row: hide heading, show icon row */
.materials-section--has-icons[open] .materials-section__heading {
  display: none;
}

/* ── Icon shortcut row ────────────────────────────────────── */

.materials-section__icon-row {
  display: none; /* hidden by default and when collapsed */
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;           /* allow flex item to shrink below content width */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;      /* single row always */
  /* Dark bar — matches FAQ quicknav */
  background: var(--color-brand-black);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.materials-section__icon-row::-webkit-scrollbar {
  display: none;
}

.materials-section--has-icons[open] .materials-section__icon-row {
  display: flex;
}

/* ── Icon chip button ────────────────────────────────────── */

.material-type-icon {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  /* Light-on-dark — matches FAQ quicknav item */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  font-family: var(--font-family-base);
  min-width: 56px;
}

.material-type-icon:hover,
.material-type-icon:focus-visible {
  background: var(--color-brand-yellow);
  border-color: var(--color-brand-yellow);
  color: var(--color-brand-black);
  outline: none;
}

.material-type-icon:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.material-type-icon svg {
  display: block;
}

.material-type-icon__text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
}

.material-type-icon__count {
  color: inherit;
  opacity: 0.7;
}

/* ── Section body (type group list) ─────────────────────── */

.materials-section__body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Material Group (<details> accordion) ───────────────── */

.material-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.material-group[open] {
  border-color: var(--color-brand-yellow);
  box-shadow: var(--shadow-sm);
}

.material-group__summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
  transition: background var(--transition-fast);
}

.material-group__summary::-webkit-details-marker { display: none; }

.material-group__summary:hover {
  background: var(--color-bg-subtle);
}

.material-group[open] .material-group__summary {
  background: var(--color-brand-yellow-light);
  border-block-end: 1px solid var(--color-border);
}

.material-group__summary:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: -2px;
}

/* Chevron */
.material-group__summary::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  margin-inline-start: auto;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--color-text-muted);
  border-block-end: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
  margin-block-start: -3px;
}

.material-group[open] .material-group__summary::after {
  transform: rotate(-135deg);
  margin-block-start: 3px;
}

.material-group__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.material-group__count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.material-group__body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Scope label badge ───────────────────────────────────── */

.material-scope-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  line-height: 1.6;
  white-space: nowrap;
}

/* ── Skeleton row (Steps 3–4 types not yet implemented) ─── */

.material-item-skeleton {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.material-item-skeleton__title {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
}

/* ── PDF Card ────────────────────────────────────────────── */

.material-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.material-card:hover {
  border-color: var(--color-brand-yellow);
  box-shadow: var(--shadow-sm);
}

.material-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-card--pdf .material-card__icon {
  background: #FEE2E2;
  color: var(--color-error);
}

.material-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.material-card__header {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.material-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}

.material-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.material-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

.material-card__meta-sep {
  opacity: 0.4;
}

.material-card__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.material-card__action-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-base);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}

.material-card__action-btn--view {
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.material-card__action-btn--view:hover {
  background: var(--color-brand-yellow);
  border-color: var(--color-brand-yellow);
  color: var(--color-brand-black);
  text-decoration: none;
}

.material-card__action-btn--download {
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
  border: 1px solid var(--color-brand-yellow);
}

.material-card__action-btn--download:hover {
  background: #e6b800;
  border-color: #e6b800;
  text-decoration: none;
}

.material-card__action-btn:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .material-card {
    flex-wrap: wrap;
  }

  .material-card__actions {
    width: 100%;
    justify-content: flex-end;
    margin-block-start: var(--space-1);
  }
}


/* ============================================================
   BRIEF_03 — PERSONALIZATION
   Grade bar, Continue Watching progress, star/favorites,
   carousel end-stops, utility.
============================================================ */

/* ── Utility ──────────────────────────────────────────────── */
[hidden] { display: none !important; }


/* ── Grade bar ────────────────────────────────────────────── */
.grade-bar {
  background: var(--color-brand-black);
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.grade-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 48px;
  padding-block: var(--space-2);
}

.grade-bar__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.92);
  flex: 1;
}

.grade-bar__label strong {
  color: var(--color-brand-yellow);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* "تصفح صفي ←" — yellow filled pill, hidden until a grade is set */
.grade-bar__browse {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-black);
  background: var(--color-brand-yellow);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.grade-bar__browse:hover {
  background: var(--color-brand-yellow-dark);
  color: var(--color-brand-black);
  text-decoration: none;
}

.grade-bar__browse:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

.grade-bar__switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.85);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-family: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.grade-bar__switcher:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-brand-white);
}

.grade-bar__switcher:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

.grade-bar__switcher svg {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.grade-bar__switcher[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Empty-state CTA variant — yellow filled pill */
.grade-bar__switcher--cta {
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
}

.grade-bar__switcher--cta:hover {
  background: var(--color-brand-yellow-dark);
  color: var(--color-brand-black);
}

/* Grade switcher dropdown — hidden by default via [hidden] attr in HTML */
.grade-switcher-dropdown {
  padding-block: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.grade-switcher-group {
  margin-block-end: var(--space-4);
}

.grade-switcher-group:last-child {
  margin-block-end: 0;
}

.grade-switcher-group__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: var(--space-2);
}

.grade-switcher-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.grade-switcher-pill {
  font-size: var(--font-size-sm);
  font-family: inherit;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.grade-switcher-pill:hover {
  background: var(--color-brand-yellow-light);
  border-color: var(--color-brand-yellow);
}

.grade-switcher-pill:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

.grade-switcher-pill--active {
  background: var(--color-brand-yellow);
  border-color: var(--color-brand-yellow);
  color: var(--color-text-on-yellow);
  font-weight: var(--font-weight-semibold);
}


/* ── Continue Watching progress bar ──────────────────────── */
.card__cw-progress {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  height: 4px;
  background: #E5E5E5;
  overflow: hidden;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.card__cw-progress::after {
  content: '';
  display: block;
  height: 100%;
  /* RTL-safe: fills from inline-end (left in RTL) toward inline-start (right) */
  width: var(--progress-pct, 0%);
  background: var(--color-brand-yellow);
  float: inline-end;
}


/* ── Favorite star button on lesson card thumbnails ──────── */
.card-fav-btn {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.card-fav-btn:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.1);
}

.card-fav-btn:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

/* Outline star: visible by default */
.card-fav-btn__star--outline { display: block; }
.card-fav-btn__star--filled  { display: none;  }

/* Filled star: visible when favorited */
.card-fav-btn[aria-pressed="true"] .card-fav-btn__star--outline { display: none;  }
.card-fav-btn[aria-pressed="true"] .card-fav-btn__star--filled  { display: block; }

/* cap_reached tooltip — browser native via [title], no extra CSS needed */


/* ── Carousel end-stop (disabled chevron) ────────────────── */
.carousel__btn[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}


/* ── Default grade pill highlight on stage cards ─────────── */
.grade-pill--is-default {
  background-color: var(--color-brand-yellow);
  color: var(--color-brand-black);
  border-color: var(--color-brand-yellow);
  font-weight: var(--font-weight-semibold);
}

.grade-pill--is-default:hover {
  background-color: var(--color-brand-yellow-dark);
  border-color: var(--color-brand-yellow-dark);
  box-shadow: 0 0 0 2px var(--color-brand-yellow-dark);
}

/* ── Inline Note ─────────────────────────────────────────── */

.material-note {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.material-note[open] {
  border-color: var(--color-brand-yellow);
}

.material-note__summary {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  user-select: none;
  transition: background var(--transition-fast);
}

.material-note__summary::-webkit-details-marker { display: none; }

.material-note__summary:hover {
  background: var(--color-bg-subtle);
}

.material-note[open] .material-note__summary {
  background: var(--color-brand-yellow-light);
  border-block-end: 1px solid var(--color-border);
}

.material-note__summary:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: -2px;
}

/* Chevron */
.material-note__summary::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  margin-inline-start: auto;
  width: 8px;
  height: 8px;
  border-inline-end: 1.5px solid var(--color-text-muted);
  border-block-end: 1.5px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
  margin-block-start: -3px;
}

.material-note[open] .material-note__summary::after {
  transform: rotate(-135deg);
  margin-block-start: 3px;
}

.material-note__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
}

.material-note__body {
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.material-note__body > *:first-child { margin-block-start: 0; }
.material-note__body > *:last-child  { margin-block-end: 0; }

.material-note__body ul,
.material-note__body ol {
  padding-inline-start: var(--space-6);
}

.material-note__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
  margin-block: var(--space-3);
}

.material-note__body th,
.material-note__body td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.material-note__body th {
  background: var(--color-surface-alt);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ── Audio Card ──────────────────────────────────────────── */

.material-card--audio .material-card__icon {
  background: #EDE9FE;
  color: #7C3AED;
}

.material-card--audio .material-card__body {
  flex: 1;
  min-width: 0;
}

.material-card__audio {
  display: block;
  width: 100%;
  margin-block-start: var(--space-3);
  /* Let the browser render its native controls; just ensure width fills the card */
  max-width: 100%;
}


/* ── Grade bar switcher — ghost/outline when grade is set ─── */
/* Only applies to the non-CTA variant (grade already chosen) */
.grade-bar__switcher:not(.grade-bar__switcher--cta) {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}

.grade-bar__switcher:not(.grade-bar__switcher--cta):hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.08);
}


/* ── Lesson page: title + inline star layout ─────────────── */
.lesson-header__title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Star button when used inline (lesson header) — not absolute-positioned */
.card-fav-btn--lesson {
  position: static;
  flex-shrink: 0;
  align-self: flex-start;
  margin-block-start: 0.25rem;   /* align with cap-height of h1 */
  width: 36px;
  height: 36px;
  background: transparent;       /* no chip on dark header */
  color: #ffffff;                /* force currentColor → white for outline star */
}

.card-fav-btn--lesson:hover {
  background: rgba(255, 255, 255, 0.12);  /* subtle affordance on hover */
  transform: scale(1.1);
}

/* ── Website Link Card ───────────────────────────────────── */

.material-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.material-card--link:hover,
.material-card--link:focus-visible {
  border-color: var(--color-brand-yellow);
  background: var(--color-brand-yellow-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.material-card--link:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: -2px;
}

.material-card--link .material-card__icon {
  background: #DCFCE7;
  color: #16A34A;
  flex-shrink: 0;
}

.material-card__site-name {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
  margin-block-end: 0;
  font-style: italic;
}

.material-card__link-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-muted);
  margin-inline-start: auto;
  transition: color 0.15s, transform 0.15s;
}

.material-card--link:hover .material-card__link-arrow,
.material-card--link:focus-visible .material-card__link-arrow {
  color: var(--color-text-primary);
  transform: translate(2px, -2px);
}

/* ── Video Card (video_summary, exam_review, youtube) ────── */

.material-card--video,
.material-card--image {
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.material-card--video:hover,
.material-card--video:focus-visible,
.material-card--image:hover,
.material-card--image:focus-visible {
  border-color: var(--color-brand-yellow);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.material-card--video:focus-visible,
.material-card--image:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: -2px;
}

.material-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-brand-black);
  overflow: hidden;
  flex-shrink: 0;
}

.material-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.material-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
}

.material-card__play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.material-card--video:hover .material-card__play-overlay,
.material-card--image:hover .material-card__play-overlay {
  opacity: 0.85;
}

.material-card__duration {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.material-card--video .material-card__body,
.material-card--image .material-card__body {
  padding: var(--space-3) var(--space-4);
  flex: 1;
}

.material-card--video .material-card__actions,
.material-card--image .material-card__actions {
  padding: 0 var(--space-4) var(--space-3);
}

.material-card__action-btn--watch {
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
  border: none;
}

/* Tablet: video/image cards in 2-column grid */
@media (min-width: 768px) {
  .material-group[data-type="video_summary"] .material-group__body,
  .material-group[data-type="exam_review"]   .material-group__body,
  .material-group[data-type="youtube"]       .material-group__body,
  .material-group[data-type="image"]         .material-group__body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* ── Image Card ──────────────────────────────────────────── */

.material-card--image .material-card__play-overlay svg circle {
  /* plus icon uses a circle bg — keep it consistent */
}

/* ── Material Lightbox ───────────────────────────────────── */

.material-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-lightbox[hidden] {
  display: none;
}

.material-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.material-lightbox__window {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-lightbox__close {
  position: absolute;
  inset-block-start: -2.75rem;
  inset-inline-end: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.material-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.material-lightbox__close:focus-visible {
  outline: 2px solid var(--color-brand-yellow);
  outline-offset: 2px;
}

.material-lightbox__iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  border-radius: var(--radius-md);
  background: #000;
}

.material-lightbox__iframe[hidden] {
  display: none;
}

.material-lightbox__image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-md);
  background: #000;
}

.material-lightbox__image[hidden] {
  display: none;
}


/* ============================================================
   BRIEF_04 — Search enhancements
   Append-only. No existing rules modified.
============================================================ */

/* Tab count badges inside .track-tab (search.php only). */
.track-tab__count {
  margin-inline-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.track-tab--active .track-tab__count {
  color: var(--color-text-secondary);
}

/* Search-tabs-bar tightens spacing under the search form. */
.search-tabs-bar {
  margin-block-start: calc(-1 * var(--space-4));
  margin-block-end: var(--space-6);
}

/* Section visibility toggled by ?type= active tab. */
.is-tab-hidden {
  display: none;
}

/* "+ N نتيجة أخرى" indicator below a capped grid. */
.search-results__more {
  margin-block-start: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Soft grade-lift badge on lesson cards in search results.
   .card__thumbnail-wrap already has position: relative (line 738),
   so absolute positioning here is safe without modifying that rule. */
.search-lift-badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  background-color: var(--color-brand-yellow);
  color: var(--color-brand-black);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding-block: 2px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  line-height: 1.2;
  pointer-events: none;
}