/* =====================================================================
   assets/css/style.css — Zearada Film Academy Design System
   White/light by default; "studio blue" dark mode available via toggle.
   Vanilla CSS, no frameworks.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Akronim&family=Cinzel:wght@500;600;700;800&family=Bebas+Neue&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+Ethiopic:wght@400;500;600;700;800;900&display=swap');

/* ---------------------------------------------------------------------
   Design tokens — :root is the LIGHT (default) theme.
   --------------------------------------------------------------------- */
:root {
    --bg: #f7f7f5;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f1f1ef;
    --surface-glass: rgba(11, 26, 61, 0.04);
    --card-glass: rgba(255, 255, 255, 0.55);
    --border: #e5e5e0;
    --border-soft: rgba(11, 26, 61, 0.08);

    --text: var(--navy);
    --text-muted: #4a5578;
    --text-faint: #7c86a8;

    /* Brand colors, matched to the client-supplied palette (royal blue,
       gold, and a secondary orange), used consistently across both themes. */
    --navy: #0b3d95;
    --navy-deep: #082c6e;
    --gold: #f6b80d;
    --gold-deep: #d69a06;
    --orange: #d67b28;
    --orange-deep: #b8641a;
    --red: #e11d48;
    --studio-blue: #4f8fe8;
    --studio-blue-deep: #2f6fd0;

    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.10);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.10);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.10);
    --info: #38bdf8;
    --info-bg: rgba(56, 189, 248, 0.10);

    --font-display: 'Cinzel', 'Noto Sans Ethiopic', serif;
    --font-display-modern: 'Bebas Neue', 'Noto Sans Ethiopic', sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Noto Sans Ethiopic', sans-serif;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(11, 26, 61, 0.10);
    --shadow-md: 0 8px 24px rgba(11, 26, 61, 0.14);
    --shadow-lg: 0 16px 40px -12px rgba(11, 26, 61, 0.18);
    --shadow-gold: 0 14px 34px rgba(246, 184, 13, 0.32), 0 4px 12px rgba(246, 184, 13, 0.18);
    --shadow-blue: 0 14px 34px rgba(79, 143, 232, 0.36), 0 4px 12px rgba(79, 143, 232, 0.20);

    --sidebar-width: 264px;
    --header-height: 74px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* "Studio blue" dark mode — opt-in via the header toggle, deep navy
   rather than near-black, built from the same brand blue above. */
[data-theme="dark"] {
    --bg: #0d1830;
    --bg-elevated: #142242;
    --surface: #182945;
    --surface-2: #1f3560;
    --surface-glass: rgba(147, 181, 255, 0.06);
    --card-glass: rgba(24, 41, 69, 0.45);
    --border: #2b3f68;
    --border-soft: rgba(147, 181, 255, 0.14);

    --text: #f0f4ff;
    --text-muted: #a7b6d8;
    --text-faint: #7185ac;

    --success-bg: rgba(16, 185, 129, 0.12);
    --warning-bg: rgba(245, 158, 11, 0.12);
    --danger-bg: rgba(239, 68, 68, 0.12);
    --info-bg: rgba(56, 189, 248, 0.12);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
    overflow-x: hidden;
    max-width: 100vw;
}

/* Homepage only: let the fixed .cine-stage act as the true page
   background — body itself goes transparent so nothing paints over it. */
body.has-cine-stage {
    background-color: transparent;
}

h1, h2, h3 {
    font-family: var(--font-display-modern);
    line-height: 1.15;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

::selection { background: var(--gold); color: #0b0f19; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display-modern);
    font-weight: 400;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--gold);
    display: inline-block;
}

.section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--text);
    margin-bottom: 8px;
}

.section-title .accent { color: var(--gold); }

.section-sub {
    color: var(--text-muted);
    font-size: 1.02rem;
    max-width: 620px;
}

.section-head {
    text-align: center;
    margin: 0 auto 48px;
    max-width: 700px;
}

.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::before { display: none; }
.section-head .section-sub { margin: 0 auto; }

section { position: relative; padding: 88px 0; }

/* Ambient animated glow — a soft, slowly-drifting radial light behind a
   section's content, used sparingly (hero + a couple of key sections) to
   give the page a living, cinematic quality rather than a flat static feel.
   Purely decorative: z-index -1, no pointer events, respects reduced-motion. */
.ambient-glow { position: relative; isolation: isolate; }
.ambient-glow::before,
.ambient-glow::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 55vw;
    height: 55vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.16;
    pointer-events: none;
}
.ambient-glow::before {
    top: -15%;
    left: -10%;
    background: radial-gradient(circle, var(--navy) 0%, transparent 70%);
    animation: ambientDrift1 22s ease-in-out infinite alternate;
}
.ambient-glow::after {
    bottom: -20%;
    right: -10%;
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
    animation: ambientDrift2 26s ease-in-out infinite alternate;
}

@keyframes ambientDrift1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(6%, 8%) scale(1.12); }
}
@keyframes ambientDrift2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-8%, -6%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-glow::before, .ambient-glow::after { animation: none; }
}


/* ---------------------------------------------------------------------
   Signature motif: film-strip / sprocket divider — black & gray wavy
   ribbon with film cell windows and sprocket holes (assets/images/film-strip.svg)
   --------------------------------------------------------------------- */
.film-strip {
    height: 50px;
    width: 100%;
    background-color: #111113;
    background-image: url('../images/film-strip.svg');
    background-repeat: repeat-x;
    background-size: 400px 35px;
    background-position: center;
    position: relative;
    z-index: 5;
}

.film-strip--top { border-bottom: 1px solid rgba(0,0,0,0.25); }
.film-strip--bottom { border-top: 1px solid rgba(0,0,0,0.25); }

/* ---------------------------------------------------------------------
   Header & navigation
   --------------------------------------------------------------------- */
.main-header {
    background-color: rgba(247, 247, 245, 0.38);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    padding: 0 24px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
    position: sticky;
    top: 0;
    z-index: 1000;
}

[data-theme="dark"] .main-header { background-color: rgba(11, 15, 19, 0.32); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset; }

.logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.logo-mark {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-font {
    font-family: 'Akronim', 'Cinzel', cursive;
    color: var(--gold);
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: none;
    /* Layered shadow to simulate a "shaded" extruded/3D letterform,
       since Akronim itself only ships in one regular weight. */
    text-shadow:
        1px 1px 0 var(--gold-deep),
        2px 2px 0 var(--gold-deep),
        3px 3px 0 rgba(0,0,0,0.35),
        4px 4px 6px rgba(0,0,0,0.45);
}

.brand-font small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: var(--text-faint);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 1px;
}

.nav-links { display: flex; gap: 28px; align-items: center; }

.nav-links a:not(.btn-accent) {
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-muted);
    position: relative;
    padding: 4px 0;
    transition: color 0.2s var(--ease);
}

.nav-links a:not(.btn-accent):hover,
.nav-links a:not(.btn-accent).is-active { color: var(--text); }

.nav-links a:not(.btn-accent).is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.theme-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-soft);
    color: var(--text);
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s var(--ease);
}

.theme-btn:hover { border-color: var(--gold); }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.94rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
    white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-accent {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #0b0f19;
    position: relative;
}
.btn-accent:hover { box-shadow: var(--shadow-gold); transform: translateY(-2px); }

.btn-outline {
    background: var(--card-glass);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--border-soft);
    color: var(--text);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-ghost {
    background: var(--surface-glass);
    color: var(--text);
    border: 1px solid transparent;
}
.btn-ghost:hover { border-color: var(--border-soft); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }

.btn-sm { padding: 8px 14px; font-size: 0.82rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #05070c;
    padding-bottom: 72px;
}

.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(1.12) saturate(1.05);
}

.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Localized gradient: darkens only the lower-left zone behind the
       text, rather than dimming the whole frame — the video itself
       stays fully visible everywhere else, matching the reference
       "London Cafe" hero pattern where the product image is never
       covered by a flat overlay. */
    background:
        radial-gradient(ellipse 65% 75% at 18% 82%, rgba(5,7,12,0.88) 0%, rgba(5,7,12,0.55) 45%, transparent 75%),
        linear-gradient(0deg, rgba(5,7,12,0.55) 0%, transparent 30%);
}

.hero-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.05;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 620px;
    width: 100%;
    padding: 0 28px;
    text-align: left;
    margin: 0 auto 0 max(28px, calc((100vw - 1200px) / 2 + 28px));
}

.hero-badges {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    color: #f3f4f6;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.4vw, 4.2rem);
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

[data-typewriter] { visibility: hidden; }

.hero-title .accent {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: rgba(243,244,246,0.85);
    margin-bottom: 34px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hero-actions .btn { padding: 15px 30px; font-size: 1rem; }

.scroll-cue {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(243,244,246,0.6);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.scroll-cue::after {
    content: '';
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, rgba(245,158,11,0.9), transparent);
    animation: scrollcue 2s var(--ease) infinite;
}

@keyframes scrollcue {
    0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Reveal-on-scroll (progressive enhancement, class toggled via IntersectionObserver).
   A pronounced "drop-in" motion — starts higher, slightly scaled down, and
   settles with a soft spring rather than a linear fade, matching the request
   for cards to feel like they slide/drop into place rather than just appear. */
.reveal {
    opacity: 0;
    transform: translateY(42px) scale(0.97);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Elements sharing a .reveal-group get an automatic stagger via nth-child
   delay steps — used for card grids so items drop in one after another.
   IMPORTANT: this delay must only apply before the card has revealed;
   once visible, hover interactions (card lift/shadow) need to respond
   instantly regardless of stagger position, or every card after the
   first would feel laggy/broken on hover. */
.reveal-group .reveal:not(.is-visible) { transition-delay: calc(var(--stagger-i, 0) * 70ms); }
.reveal-group .reveal.is-visible { transition-delay: 0s; }

/* ---------------------------------------------------------------------
   Stats strip
   --------------------------------------------------------------------- */
/* Reusable glass panel for homepage sections that sit within the
   cinematic sequence's active scroll range — lets the fixed stage show
   through while still keeping text readable. */
.cine-glass-panel {
    background: var(--card-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.stats-strip {
    background: var(--card-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 46px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.stat-num {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    color: var(--gold);
    font-weight: 700;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Cards: courses / gallery / testimonials
   --------------------------------------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
}

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

@media (max-width: 980px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.card {
    background: var(--card-glass);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}

/* Studio rim-light — a soft cool-blue glow along the top edge, echoing
   the two-tone (warm/cool) studio-light photography used in the brand's
   reference imagery. Purely decorative, sits behind card content. */
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--studio-blue), transparent);
    opacity: 0.5;
    z-index: 1;
}

.course-card { position: relative; }

.course-card:hover {
    transform: translateY(-10px) perspective(800px) rotateX(2deg) scale(1.015);
    box-shadow: var(--shadow-gold);
    border-color: rgba(243, 168, 18, 0.4);
    background: var(--surface);
}

/* Blue studio-light variant — used where a cooler accent fits better
   (social feed, live/broadcast-flavored content) so the site doesn't
   read as gold-everywhere. */
.card--blue-glow:hover {
    transform: translateY(-10px) perspective(800px) rotateX(2deg) scale(1.015);
    box-shadow: var(--shadow-blue);
    border-color: rgba(79, 143, 232, 0.4);
    background: var(--surface);
}
.card--blue-glow::before {
    background: linear-gradient(90deg, transparent, var(--studio-blue), transparent);
    opacity: 0.8;
}

.card-media { position: relative; height: 200px; overflow: hidden; }

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #0b0f19;
}

.course-card:hover .card-media img,
.course-card:hover .card-media video { transform: scale(1.08); }

/* Production project cards: a thin inset frame line for a more
   deliberate "photo/film frame" feel, plus a slightly stronger 3D lift
   on hover than the base card, since these are portfolio showcase
   pieces meant to stand out more than a course listing card. */
.production-card {
    padding: 6px;
}

.production-card .card-media {
    border: 1px solid rgba(246, 184, 13, 0.35);
    border-radius: calc(var(--radius-lg) - 6px);
}

.production-card:hover {
    transform: translateY(-12px) perspective(900px) rotateX(3deg) scale(1.02);
    box-shadow: var(--shadow-gold), 0 2px 0 0 rgba(246, 184, 13, 0.25) inset;
}

.card-level {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(11,15,19,0.75);
    backdrop-filter: blur(4px);
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(245,158,11,0.3);
}

.card-body { padding: 22px; }

.card-title { font-size: 1.18rem; color: var(--text); margin-bottom: 8px; }

.card-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-faint);
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--border);
}

.card-meta .price { color: var(--gold); font-weight: 700; font-size: 1rem; }

.course-pricing { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.course-price-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.85rem; color: var(--text-muted);
    background: var(--surface-glass); padding: 8px 12px; border-radius: var(--radius-sm);
}
.course-price-row strong { color: var(--gold); font-size: 0.95rem; }

.btn-group-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Filter tabs (courses, gallery) */
.filter-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
}

.filter-tab {
    background: var(--card-glass);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}

.filter-tab:hover { color: var(--text); border-color: var(--gold); }

.filter-tab.is-active {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #0b0f19;
    border-color: transparent;
}

/* Gallery */
.gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    border: 1px solid var(--border);
}

.gallery-item img, .gallery-item video {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.08); }

.gallery-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
    display: flex;
    align-items: flex-end;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-overlay span { color: #fff; font-weight: 700; font-size: 0.92rem; }

.gallery-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(245,158,11,0.92);
    display: flex; align-items: center; justify-content: center;
    color: #0b0f19; font-size: 1.2rem;
}

/* Video modal */
.video-modal {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(5,7,12,0.92);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
}

.video-modal.is-open { display: flex; }

.video-modal-inner { max-width: 900px; width: 100%; position: relative; }

.video-modal-inner video { width: 100%; border-radius: var(--radius-md); }

.video-modal-close {
    position: absolute; top: -54px; right: 0;
    background: var(--surface-glass); border: 1px solid var(--border-soft);
    color: #fff; width: 42px; height: 42px; border-radius: 50%;
    font-size: 1.3rem; cursor: pointer;
}

/* Testimonials */
.testimonial-card {
    background: var(--card-glass);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s var(--ease), border-color 0.35s var(--ease);
}
.testimonial-card:hover {
    transform: translateY(-8px) perspective(800px) rotateX(2deg) scale(1.015);
    box-shadow: var(--shadow-md);
    border-color: rgba(243, 168, 18, 0.35);
}

/* Same studio rim-light used on .card/.panel — keeps the glass surfaces
   across the whole site sharing one signature light source. */
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--studio-blue), transparent);
    opacity: 0.5;
    z-index: 1;
}

.testimonial-video-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--navy-deep), #0b0f19);
    overflow: hidden;
}

.testimonial-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Functional mute/unmute toggle, overlaid bottom-right on the video
   itself — the video plays inline in the card at all times (autoplay
   muted, looping), so this button is the only control needed. Browsers
   only allow autoplay when muted, which is why it starts muted; the
   button lets the viewer opt into sound with one tap. */
.testimonial-mute-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(5, 7, 12, 0.6);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.testimonial-mute-btn:hover {
    transform: scale(1.04);
    background: rgba(5, 7, 12, 0.8);
}

/* Only one icon+label pair shows at a time, matched to the video's
   actual muted state via the [data-muted] attribute the JS toggles on
   click — never both, and never neither. */
.testimonial-mute-btn .icon-unmuted,
.testimonial-mute-btn .label-unmuted { display: none; }
.testimonial-mute-btn[data-muted="false"] .icon-muted,
.testimonial-mute-btn[data-muted="false"] .label-muted { display: none; }
.testimonial-mute-btn[data-muted="false"] .icon-unmuted,
.testimonial-mute-btn[data-muted="false"] .label-unmuted { display: inline; }

/* flex column + flex-grow on the body, with .testimonial-person pushed
   to margin-top:auto below, is what stops cards in the same grid row
   from feeling cramped when one quote is longer than its neighbors —
   every card's avatar/name row lines up along the same bottom edge
   instead of trailing right after a short quote. */
.testimonial-body {
    padding: 26px 26px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

.testimonial-quote-mark {
    font-family: var(--font-display);
    font-size: 2.8rem;
    color: var(--gold);
    opacity: 0.45;
    line-height: 1;
    margin-bottom: 4px;
}

.testimonial-text {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 24px;
    font-style: italic;
}

.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); }

.testimonial-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    display: flex; align-items: center; justify-content: center;
    color: #0b0f19; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; object-fit: cover;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
}

.testimonial-name { font-weight: 700; font-size: 0.92rem; }
.testimonial-course { color: var(--text-faint); font-size: 0.8rem; }

/* ---------------------------------------------------------------------
   Forms (shared: auth, contact, dashboard CRUD)
   --------------------------------------------------------------------- */
.form-group { margin-bottom: 18px; }

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s var(--ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); }

.form-group textarea { resize: vertical; min-height: 100px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 620px) { .form-row-3 { grid-template-columns: 1fr; } }

.form-section-title {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--gold-deep);
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.form-section-title:first-child { margin-top: 0; }

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.checkbox-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.86rem;
    transition: border-color 0.15s var(--ease);
}
.checkbox-tile:hover { border-color: var(--gold); }
.checkbox-tile input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; }

.profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    font-size: 0.85rem;
}
.profile-detail-grid > div { display: flex; flex-direction: column; gap: 3px; }
.profile-detail-grid .text-muted { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }

@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.form-hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 5px; }

.alert-msg {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 0.88rem;
    border: 1px solid transparent;
}

.alert-error { background: var(--danger-bg); color: #fca5a5; border-color: rgba(239,68,68,0.3); }
.alert-success { background: var(--success-bg); color: #6ee7b7; border-color: rgba(16,185,129,0.3); }
.alert-info { background: var(--info-bg); color: #7dd3fc; border-color: rgba(56,189,248,0.3); }

/* ---------------------------------------------------------------------
   Auth pages
   --------------------------------------------------------------------- */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }

.auth-visual {
    position: relative;
    background: #05070c;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px;
    overflow: hidden;
}

.auth-visual img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55;
}

.auth-visual::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,7,12,0.2), rgba(5,7,12,0.95));
}

.auth-visual-content { position: relative; z-index: 2; }

.auth-visual-content h2 { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
.auth-visual-content p { color: rgba(243,244,246,0.75); font-size: 0.95rem; max-width: 380px; }

@media (max-width: 900px) { .auth-visual { display: none; } }

.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.auth-box { width: 100%; max-width: 400px; }

.auth-box .logo-link { margin-bottom: 32px; }

.back-to-site-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.2s var(--ease);
}
.back-to-site-link:hover { color: var(--gold); }

.auth-box h1 { font-size: 1.6rem; margin-bottom: 6px; }
.auth-box .auth-lead { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 28px; }

.auth-footer-link { text-align: center; margin-top: 20px; font-size: 0.88rem; color: var(--text-muted); }
.auth-footer-link a { color: var(--gold); font-weight: 700; text-decoration: none; }

.demo-creds {
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    border: 1px solid var(--border-soft);
    font-size: 0.78rem;
    color: var(--text-faint);
    line-height: 1.7;
}
.demo-creds strong { color: var(--text-muted); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.main-footer {
    background: var(--card-glass);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border-top: 1px solid var(--border-soft);
    padding: 56px 0 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 40px;
}

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

.footer-brand p { color: var(--text-muted); font-size: 0.88rem; margin-top: 12px; max-width: 280px; }

.footer-col h4 { font-family: var(--font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 16px; }

.footer-col a, .footer-col p {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 10px;
}

.footer-col a:hover { color: var(--gold); }

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-faint);
    font-size: 0.82rem;
}

.footer-socials { display: flex; gap: 10px; margin-top: 14px; }

.footer-social-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface-glass); border: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 0.95rem;
}
.footer-social-btn:hover { border-color: var(--gold); }

/* =====================================================================
   Dashboards (sidebar layout) — shared across admin/reception/teacher/student
   ===================================================================== */
.dash-body { background: var(--bg); min-height: 100vh; }

.dash-header {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--card-glass);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border-bottom: 1px solid var(--border-soft);
    position: sticky; top: 0; z-index: 100;
    gap: 12px;
}

.dash-header-left { display: flex; align-items: center; gap: 16px; }

.sidebar-toggle {
    display: none;
    background: none; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer;
}

.dash-user { display: flex; align-items: center; gap: 12px; }

.dash-user-info { text-align: right; }
.dash-user-name { font-size: 0.88rem; font-weight: 700; }
.dash-user-role { font-size: 0.74rem; color: var(--text-faint); }

.dash-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    display: flex; align-items: center; justify-content: center;
    color: #0b0f19; font-weight: 800; font-size: 0.95rem;
    object-fit: cover;
}

.dashboard-wrapper { display: flex; align-items: flex-start; }

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--card-glass);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border-right: 1px solid var(--border-soft);
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: var(--header-height);
    /* 100vh on mobile includes the browser's address bar even when
       it's collapsed/hidden, so the sidebar was sized taller than the
       actually-visible area — bottom items (Logout, System section)
       got cut off below the fold. 100dvh tracks the real visible
       viewport as the browser chrome shows/hides; 100vh is kept first
       as a fallback for browsers that don't support dvh yet. */
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    transition: width 0.25s var(--ease), padding 0.25s var(--ease);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Desktop collapse — toggled by .sidebar-collapse-btn in dash-header.php */
.sidebar.is-collapsed { width: 72px; padding: 22px 10px; }
.sidebar.is-collapsed .sidebar-group-label,
.sidebar.is-collapsed a span.link-label { display: none; }
.sidebar.is-collapsed a { justify-content: center; padding: 12px; }
.sidebar.is-collapsed a .ic { width: auto; }
.sidebar.is-collapsed ~ .dashboard-content,
.dashboard-wrapper:has(.sidebar.is-collapsed) .dashboard-content { margin-left: 0; }

.sidebar-collapse-btn {
    display: none;
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    cursor: pointer; align-items: center; justify-content: center;
    font-size: 0.9rem; flex-shrink: 0;
}
.sidebar-collapse-btn:hover { color: var(--gold); border-color: var(--gold); }
@media (min-width: 901px) { .sidebar-collapse-btn { display: flex; } }

.sidebar-group-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    font-weight: 700;
    padding: 16px 14px 8px;
}

.sidebar a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.sidebar a .ic { font-size: 1.05rem; width: 20px; text-align: center; }

.sidebar a:hover { background: var(--surface-glass); color: var(--text); }

.sidebar a.is-active {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #0b0f19;
}

.sidebar-divider { height: 1px; background: var(--border); margin: 12px 6px; }

.sidebar-logout {
    margin-top: auto;
    color: var(--red) !important;
}

.dashboard-content {
    flex: 1;
    min-width: 0;
    padding: 32px;
}

.dash-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.dash-page-head h1 { font-size: 1.5rem; }
.dash-page-head p { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }

/* Stat cards */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--card-glass);
    background-image: linear-gradient(160deg, var(--card-glass) 0%, transparent 65%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-left: 3px solid var(--gold);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.stat-card:hover { transform: translateY(-6px) perspective(800px) rotateX(2deg) scale(1.015); box-shadow: var(--shadow-md); }

.stat-card-icon {
    width: 46px; height: 46px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    background: var(--surface-glass);
    flex-shrink: 0;
}

.stat-card-label { color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.stat-card-value { font-size: 1.6rem; font-weight: 800; font-family: var(--font-display); margin-top: 2px; }

/* Panels */
.panel {
    background: var(--card-glass);
    background-image: linear-gradient(160deg, var(--card-glass) 0%, transparent 60%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    /* Two stacked shadows (close+tight, far+soft) read as a physically
       lifted surface rather than a single flat drop-shadow. Panels are
       large static containers with their own interactive content, so
       this is the "more 3D" treatment that fits them, rather than the
       hover-tilt (perspective + rotateX) used on discrete cards like
       .course-card / .production-card — a tilt on something this big,
       full of forms and tables, would fight with clicking things
       inside it rather than reading as a nice depth cue. */
    box-shadow: var(--shadow-sm), var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Same studio rim-light used on .card (see .card::before) — a soft
   blue glow along the top edge, so every glass surface in the app
   (public cards, dashboard panels) shares the same signature light
   source rather than panels looking like a flat, unrelated design. */
.panel::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--studio-blue), transparent);
    opacity: 0.5;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.panel-head h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; }

/* Two-column dashboard grid (stacks on mobile) */
.dash-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

/* Small inline bar charts (revenue trend, method breakdown) */
.mini-bar-chart { display: flex; flex-direction: column; gap: 14px; }

.mini-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 12px;
}

.mini-bar-label { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-bar-value { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }

.mini-bar-track {
    height: 10px;
    background: var(--surface-glass);
    border-radius: 999px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--navy), var(--gold));
}

.mini-bar-fill-gold { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }

.btn-sm { padding: 8px 16px; font-size: 0.82rem; }

/* Google Translate — the widget itself does the translating, but we
   never show its native UI. It's fully hidden; our own custom
   .lang-switcher dropdown below drives it programmatically. */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; position: static !important; }
#google_translate_element { display: none !important; }
.skiptranslate iframe { box-shadow: none !important; }
/* Google adds this class to <body> once translated; it also force-sets
   inline styles on <html> — this keeps our fixed header from jumping. */
.goog-te-gadget-icon { display: none !important; }

/* Custom language switcher */
.lang-switcher { position: relative; }
.lang-switcher-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.82rem;
    cursor: pointer;
}
.lang-switcher-btn:hover { border-color: var(--gold); }
.lang-switcher-btn .chev { font-size: 0.65rem; opacity: 0.6; transition: transform 0.2s var(--ease); }
.lang-switcher.is-open .lang-switcher-btn .chev { transform: rotate(180deg); }

.lang-switcher-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    padding: 6px;
    display: none;
    z-index: 500;
    max-height: 320px;
    overflow-y: auto;
}
.lang-switcher.is-open .lang-switcher-menu { display: block; }

@media (max-width: 900px) {
    /* Inside the mobile nav drawer (max ~320px wide), a 180px-min-width
       dropdown anchored with right:0 can get clipped by the drawer's own
       overflow-y:auto, or pushed past its edge. Constrain it to fit
       cleanly within the drawer instead. */
    .lang-switcher-menu {
        position: static;
        margin-top: 8px;
        width: 100%;
        min-width: 0;
        max-height: 220px;
    }
}
.lang-switcher-menu button {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 9px 10px;
    background: none; border: none; border-radius: 6px;
    color: var(--text); font-size: 0.85rem;
    cursor: pointer;
}
.lang-switcher-menu button:hover { background: var(--surface-glass); }
.lang-switcher-menu button.is-active { color: var(--gold); font-weight: 700; }
.lang-switcher-menu .flag { font-size: 1rem; }

/* Tables */
.table-wrap { overflow-x: auto; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.data-table th {
    text-align: left;
    padding: 12px 14px;
    color: var(--text-faint);
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-glass); }

.table-empty { text-align: center; padding: 48px 20px; color: var(--text-faint); }
.table-empty .ic { font-size: 2rem; margin-bottom: 10px; display: block; }

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
}
.badge-success { background: var(--success-bg); color: #34d399; }
.badge-warning { background: var(--warning-bg); color: #fbbf24; }
.badge-danger { background: var(--danger-bg); color: #f87171; }
.badge-muted { background: var(--surface-glass); color: var(--text-faint); }
.badge-info { background: var(--info-bg); color: #38bdf8; }

.role-pill {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
    background: var(--surface-glass);
    border: 1px solid var(--border-soft);
}

/* Row actions */
.row-actions { display: flex; gap: 6px; }

.icon-btn {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none; font-size: 0.9rem;
    transition: all 0.15s var(--ease);
    position: relative;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); }

.notification-badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 16px; height: 16px;
    padding: 0 3px;
    border-radius: var(--radius-pill);
    background: var(--red);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

.notification-list { display: flex; flex-direction: column; gap: 2px; }

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 10px;
    border-bottom: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.notification-item.is-unread { background: var(--card-glass); }
.notification-item:last-child { border-bottom: none; }

.notification-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.notification-body { flex: 1; min-width: 0; }
.notification-message { color: var(--text); font-size: 0.92rem; text-decoration: none; display: block; }
a.notification-message:hover { color: var(--gold); }
.notification-time { color: var(--text-faint); font-size: 0.78rem; margin-top: 3px; }

/* Modal (used for add/edit forms in dashboards) */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(5,7,12,0.7);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.modal-overlay.is-open { display: flex; }

.modal-box {
    background: var(--card-glass);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    box-shadow: var(--shadow-md);
}

.modal-box.modal-wide { max-width: 720px; }

.modal-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}

.modal-head h3 { font-size: 1.15rem; }

.modal-close {
    background: none; border: none; color: var(--text-faint); font-size: 1.3rem; cursor: pointer;
}

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* Progress bar (payment status, course completion) */
.progress-track {
    width: 100%; height: 8px; border-radius: var(--radius-pill);
    background: var(--border); overflow: hidden;
}
.progress-fill {
    height: 100%; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state .ic { font-size: 2.4rem; margin-bottom: 14px; }
.empty-state h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 0.9rem; max-width: 340px; margin: 0 auto; }

/* Utility */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.d-flex { display: flex; }
.gap-2 { gap: 8px; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* backdrop-filter on an ancestor makes it the containing block for
       position:fixed descendants (per spec) — since .nav-links (the
       mobile drawer) is a child of .main-header, that filter was
       squeezing the "fixed" drawer into the header's own small box
       instead of the full viewport, so almost nothing was visible when
       it opened. Desktop has no drawer, so it keeps the full effect. */
    .main-header { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: var(--surface); }
    [data-theme="dark"] .main-header { background-color: var(--surface); }

    .nav-toggle { display: block; }
    .nav-links {
        position: fixed; top: var(--header-height); right: 0; bottom: 0; left: auto;
        width: min(78vw, 320px);
        /* Solid background, not glass: this drawer opens directly over
           hero photos/video on public pages, where a translucent panel
           becomes nearly invisible against a busy image. Legibility
           wins over the glass effect here. */
        background: var(--surface);
        border-left: 1px solid var(--border-soft);
        box-shadow: -8px 0 32px rgba(0,0,0,0.45);
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 22px;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1100;
        gap: 4px;
        overflow-y: auto;
    }
    .nav-links a:not(.btn-accent) {
        width: 100%;
        padding: 11px 4px;
        border-bottom: 1px solid var(--border-soft);
        color: var(--text) !important;
    }
    .nav-links.is-open { transform: translateX(0); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .sidebar-toggle { display: block; }
    .sidebar {
        position: fixed;
        left: 0; top: var(--header-height);
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        transform: translateX(-100%);
        transition: transform 0.3s var(--ease);
        z-index: 200;
        box-shadow: var(--shadow-md);
        width: min(var(--sidebar-width), 82vw);
    }
    .sidebar.is-open { transform: translateX(0); }
    .dashboard-content { padding: 20px 16px; }

    /* Dashboard header: drop the brand subtitle and user name/role text,
       keep icons/avatar only, so nothing gets clipped on a phone screen. */
    .dash-header { padding: 0 12px; gap: 6px; }
    .dash-header-right { gap: 6px !important; }
    .brand-font small { display: none; }
    .dash-user-info { display: none; }
    .theme-btn { padding: 8px 10px; font-size: 0; }
    .theme-btn::before { content: '🌓'; font-size: 1.05rem; }

    /* The raw Google Translate widget renders at its own size (Google
       controls its markup, not us) and was one of the actual causes of
       header overflow on phones — the custom lang-switcher dropdown
       right next to it is the intended user-facing control already, so
       the raw widget is hidden here rather than sized down (it still
       has to exist in the DOM for Google's script to attach to, just
       not be visible). */
    #google_translate_element { display: none; }

    /* Icon-only language switcher on mobile: keep the flag, drop the
       "EN"/"አማ" text label — same reasoning as the theme button above. */
    .lang-switcher-btn span:not(.flag) { display: none; }
    .lang-switcher-btn { padding: 8px 10px; }

    .icon-btn { width: 30px; height: 30px; font-size: 0.85rem; }

    .panel { padding: 16px; }
    .data-table th, .data-table td { padding: 10px; font-size: 0.82rem; }
    .modal-box { padding: 18px; }
}

@media (max-width: 480px) {
    .dash-header-left { gap: 8px; }
    .brand-font { font-size: 1.3rem; }
    .logo-mark { width: 32px; height: 32px; }
    .stat-cards { grid-template-columns: 1fr; }
    .dash-page-head { gap: 10px; }
    .dash-page-head h1 { font-size: 1.25rem; }
    .mini-bar-row { grid-template-columns: 88px 1fr auto; gap: 8px; }
    .mini-bar-label { font-size: 0.74rem; }
    .mini-bar-value { font-size: 0.74rem; }
}

@media (max-width: 560px) {
    .stats-grid { grid-template-columns: 1fr; }
    section { padding: 60px 0; }
}

@media (max-width: 480px) {
    /* Prevent horizontal page overflow on small phones: the 260px grid
       column floor (set at 980px breakpoint) can exceed the available
       width once container padding is subtracted, forcing the whole
       page to scroll/zoom sideways instead of the grid stacking cleanly. */
    .container { padding: 0 16px; }
    .grid, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}

.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

#goog-gt-tt, .goog-te-balloon-frame {
    display: none !important;
}

/* =====================================================================
   Multi-step registration wizard — slides between form sections instead
   of one long scroll. Progressive enhancement: without JS, all steps
   are simply visible at once (still a valid, submittable form).
   ===================================================================== */
.wizard-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.wizard-dot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wizard-dot-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s var(--ease);
}

.wizard-dot.is-active .wizard-dot-circle {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    border-color: transparent;
    color: var(--navy);
    transform: scale(1.1);
    box-shadow: var(--shadow-gold);
}

.wizard-dot.is-complete .wizard-dot-circle {
    background: var(--success);
    border-color: transparent;
    color: #fff;
}

.wizard-dot-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
}
.wizard-dot.is-active .wizard-dot-label { color: var(--text); }

.wizard-connector {
    width: 24px;
    height: 2px;
    background: var(--border);
    flex-shrink: 0;
}

.wizard-step {
    display: none;
    animation: wizardStepIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wizard-step.is-active { display: block; }

@keyframes wizardStepIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .wizard-dot-label { display: none; }
    .wizard-connector { width: 12px; }
}

/* =====================================================================
   CINEMATIC SCROLL BACKGROUND — homepage brand video
   =====================================================================
   A fixed, full-viewport static brand image sitting behind all homepage
   content (previously an autoplaying looping video). Real brand
   photography (clapperboard, film reels, camera, the Zearada logo)
   replaces the earlier hand-built SVG scene. Content scrolls normally
   on top; sections use a translucent glass panel (.cine-glass-panel,
   .stats-strip) rather than a flat opaque background so the image stays
   visible underneath, never fully hidden.
   ===================================================================== */
.cine-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #05070c;
    pointer-events: none;
}

.cine-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Static camera-viewfinder graphic — shown crisp, no blur, since
       there's no motion to soften and the logo/text should stay legible. */
    filter: brightness(0.9) saturate(1.05);
}

.cine-bg-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(5,7,12,0.35) 0%, rgba(5,7,12,0.75) 80%),
        linear-gradient(180deg, rgba(20, 24, 34, 0.18) 0%, rgba(5,7,12,0.05) 40%, rgba(5,7,12,0.18) 100%);
}

/* =====================================================================
   Accordion / sliding dropdown — liquid-glass panel that expands with a
   smooth height + fade slide, used for FAQs, course outlines, and any
   other long content that benefits from being collapsed by default.
   ===================================================================== */
/* Course outline list: a thin connecting line down the left edge, like
   a syllabus roadmap, tying each numbered accordion item together
   visually rather than having them float as disconnected boxes. */
.outline-list {
    position: relative;
    padding-left: 22px;
}
.outline-list::before {
    content: '';
    position: absolute;
    left: 6px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold) 0%, rgba(246, 184, 13, 0.15) 100%);
}
.outline-list .accordion-item {
    position: relative;
}
.outline-list .accordion-item::before {
    content: '';
    position: absolute;
    left: -22px; top: 24px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--bg);
}

.accordion-item {
    background: var(--card-glass);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.accordion-item.is-open {
    border-color: rgba(79, 143, 232, 0.35);
    box-shadow: var(--shadow-blue);
}

.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
}

.accordion-trigger-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--studio-blue);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.accordion-item.is-open .accordion-trigger-icon { transform: rotate(45deg); }

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }

.accordion-panel-inner {
    overflow: hidden;
    contain: layout;
}

.accordion-panel-content {
    padding: 0 20px 18px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

@media (max-width: 780px) {
    .hero-content {
        max-width: 100%;
        margin: 0;
    }
    .hero-scrim {
        background:
            radial-gradient(ellipse 100% 60% at 50% 100%, rgba(5,7,12,0.92) 0%, rgba(5,7,12,0.65) 50%, transparent 80%),
            linear-gradient(0deg, rgba(5,7,12,0.5) 0%, transparent 25%);
    }
}

/* =====================================================================
   Google Translate widget overrides
   ---------------------------------------------------------------------
   Hides the top banner iframe Google injects when a translation is
   active. !important is used deliberately here (an acknowledged
   exception to normal CSS practice) because Google's own script sets
   this banner's styles inline, and a plain stylesheet rule can't win
   against an inline style — only a stylesheet rule with !important can
   beat a plain (non-important) inline one.

   Deliberately NOT included: forcing body { top: 0 !important }. If
   Google ever changes its markup and this hide rule stops matching,
   the fallback should be the page naturally shifting down below the
   banner (still fully readable) — not the banner sitting on top of
   content that's been forced back to top:0. An earlier version of this
   fix tried to force that with JavaScript (a MutationObserver racing
   against Google's own re-applied inline styles) and only worked
   inconsistently; this CSS-only version is simpler and has a safer
   failure mode if it ever stops matching.
   ===================================================================== */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame {
    display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
    box-shadow: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

.goog-logo-link,
.goog-te-gadget span,
div.goog-te-gadget {
    color: transparent !important;
}

.goog-te-gadget {
    font-size: 0 !important;
}

.goog-te-gadget select {
    color: #333 !important; /* keep the language dropdown's own text visible */
    font-size: 14px !important;
}