/* ============================================================================
   light.css — LIGHT MODE, local trial only (26 October 2026).

   Loaded after the eight shared stylesheets by light/index.html and nowhere
   else, so the live page is untouched. It changes colour only: the sections,
   their order, their copy and their layout are the live page's own.

   Colour roles follow the Figma reference (Product UI, frame 1769:147,
   "Concept 03 — نسخة النهار (فاتحة)") on the 60-30-10 rule:
     60  light  — the day footage under a white wash, white glass cards
     30  navy   — the "with Express"
                  panel, step numbers, the active nav item and all type
     10  red    — actions, eyebrows, the accent word, active states
   Red and navy are the brand's approved values from base.css (--red #de0113,
   --navy #0a1b35) and are not redefined here.
   ========================================================================== */

/* ─────────────────────────  light tokens  ───────────────────────── */
.theme-light {
    --ink: var(--navy);
    /* Silver is "what a card explains". On white it has no contrast, so in light mode that role is
       taken by Steel, the brand's own grey (5.3:1 on white). */
    /* 26 Oct 2026: darkened from Steel (#5b6b82) to the Figma frame's slate (#475569, 7.6:1 on white),
       so every secondary line — ledes, card details, footer links — reads like the hero lede. */
    --silver: #475569;
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.56));
    --glass-border: rgba(255, 255, 255, 0.85);
    --hairline: rgba(10, 27, 53, 0.1);
    /* Text-only shades for the two status colours: the brand's green and amber are kept for dots and
       tints, but as 11px type on white they read at 3.3:1 and 2:1. */
    --green-text: #0e7f3f;
    --amber-text: #b45309;

    background-color: var(--cloud);
    color: var(--ink);
    text-shadow: none;
}

/* The navy islands: everything inside them is the live page's dark treatment again. */
.theme-light :is(.panel--good, .mock__toast) {
    --ink: #fff;
    --silver: #d5dbe3;
    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.13);
    --hairline: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ───────────────────────────  the footage  ─────────────────────────── */
/* The scrim eases to white rather than navy past the hero (SCRIM_MAX in light/js/scroll-scene.js). */
.theme-light #scrim { background: #fff; }

/* ─────────────────────────────  type  ──────────────────────────────── */
.theme-light .headline { text-shadow: none; }   /* the white glow was removed at the client's request, 26 Oct 2026 */

/* ──────────────────────────────  glass  ────────────────────────────── */
.theme-light .glass,
.theme-light .chat {
    color: var(--ink);
    box-shadow: 0 18px 44px -22px rgba(10, 27, 53, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.theme-light .glass .pill { border-color: rgba(10, 27, 53, 0.18); color: var(--silver); }

/* The "with Express" panel is the 30% inside a light section: solid navy glass, white type. */
.theme-light .panel--good {
    background: rgba(10, 27, 53, 0.92);
    border-color: rgba(222, 1, 19, 0.5);
    box-shadow: 0 24px 50px -24px rgba(10, 27, 53, 0.55);
}

/* Hover keeps the live page's red foot line; the pointer light and the lift shadow go light. */
.theme-light :is(.step, .why__card, .panel, .passport, .docs__list, .chat, .mock, .hero__card):hover {
    background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
        rgba(255, 255, 255, 0.7), transparent 70%);
    box-shadow: 0 28px 60px -24px rgba(10, 27, 53, 0.32), inset 0 -2px 0 var(--red),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.theme-light .panel--good:hover {
    background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
        rgba(255, 255, 255, 0.12), transparent 70%);
    box-shadow: 0 28px 64px -24px rgba(2, 6, 18, 0.85), inset 0 -2px 0 var(--red),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────  buttons  ───────────────────────────── */
.theme-light .btn { color: var(--ink); }
.theme-light .btn--primary { color: #fff; }
.theme-light .btn--secondary { border-color: rgba(10, 27, 53, 0.25); }
.theme-light .btn--secondary:hover { border-color: rgba(10, 27, 53, 0.5); }
.theme-light .btn--whatsapp:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(10, 27, 53, 0.16); }
.theme-light .btn__icon { background: rgba(10, 27, 53, 0.08); }
.theme-light .btn--whatsapp:hover .btn__icon { background: rgba(10, 27, 53, 0.14); }
.theme-light .btn__icon svg { fill: var(--ink); }

.theme-light :is(a, .btn):focus-visible { outline-color: rgba(10, 27, 53, 0.85); }

/* ───────────────────────────────  nav  ─────────────────────────────── */
.theme-light .nav.is-stuck,
.theme-light .nav.is-open {
    background: rgba(255, 255, 255, 0.74);
    border-bottom-color: var(--hairline);
}
.theme-light .nav__links a { color: var(--ink); }
.theme-light .nav__links a:hover { background: rgba(10, 27, 53, 0.06); }
.theme-light .nav__links a.is-active { background: var(--navy); color: #fff; }
.theme-light .lang a,
.theme-light .nav__toggle { color: var(--ink); }
/* The lockups in navy: the nav's and, since the footer went light (26 Oct 2026), the footer's. */
.theme-light .brand-lockup--stacked { content: url('../assets/brand-stacked-ar.svg'); }
[dir='ltr'] .theme-light .brand-lockup--stacked { content: url('../assets/brand-stacked-en.svg'); }

.theme-light .to-top { color: var(--ink); box-shadow: 0 18px 40px -18px rgba(10, 27, 53, 0.4); }
.theme-light .to-top:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(10, 27, 53, 0.16); }

/* ────────────────────────────  01 — hero  ──────────────────────────── */
/* The copy sits inside the cabin window, over a bright sky; a soft white light behind it is what
   lets navy type read there. `translate` already makes .hero__copy a stacking context. */
.theme-light .hero__copy { position: relative; }
.theme-light .hero__copy::before {
    content: "";
    position: absolute;
    inset: -56px -64px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.6) 62%, rgba(255, 255, 255, 0));
    filter: blur(6px);
    pointer-events: none;
}
.theme-light .hero__eyebrow {
    border-color: rgba(10, 27, 53, 0.16);
    background: rgba(255, 255, 255, 0.6);
}

/* ─────────────────────────  cards and pieces  ──────────────────────── */
.theme-light .card__badge { color: var(--green-text); background: rgba(18, 161, 80, 0.12); }

.theme-light .authorities__cell:hover { background: rgba(10, 27, 53, 0.03); }

.theme-light .step__num { background: var(--navy); color: #fff; }

.theme-light .chat__head { background: rgba(255, 255, 255, 0.4); }
.theme-light .chat__avatar { box-shadow: none; }
.theme-light .bubble--in { background: rgba(255, 255, 255, 0.88); }
.theme-light .bubble--out { background: rgba(18, 161, 80, 0.12); border-color: rgba(18, 161, 80, 0.3); }
.theme-light .bubble__ticks { color: var(--green-text); opacity: 1; }
.theme-light .chat__input { background: rgba(255, 255, 255, 0.75); }

.theme-light .mock__btn,
.theme-light .mock__count,
.theme-light .option-tag { color: #fff; }
.theme-light .mock__kpi,
.theme-light .mock__notice { background: rgba(255, 255, 255, 0.62); }
.theme-light .mock__notice--new { background: rgba(18, 161, 80, 0.1); }
.theme-light .mock__link { background: rgba(10, 27, 53, 0.06); box-shadow: inset 0 0 0 1px rgba(10, 27, 53, 0.12); }
.theme-light .mock__meter-bar { background: rgba(10, 27, 53, 0.1); }
.theme-light .mock__badge { color: var(--steel); background: rgba(91, 107, 130, 0.1); box-shadow: inset 0 0 0 1px rgba(91, 107, 130, 0.25); }
.theme-light .mock__badge--amber { color: var(--amber-text); background: rgba(242, 169, 59, 0.16); box-shadow: inset 0 0 0 1px rgba(242, 169, 59, 0.4); }
.theme-light .mock__badge--green { color: var(--green-text); background: rgba(18, 161, 80, 0.12); box-shadow: inset 0 0 0 1px rgba(18, 161, 80, 0.35); }
.theme-light .mock__amount--in { color: var(--green-text); }
.theme-light .mock__toast { background: rgba(10, 27, 53, 0.9); }

/* White inactive dots with a hairline navy ring, so they show over both bright and busy frames
   (the client, 26 Oct 2026: grey dots disappeared over the tower). */
.theme-light .slider__dot { background: #fff; box-shadow: 0 0 0 1px rgba(10, 27, 53, 0.18), 0 2px 6px rgba(10, 27, 53, 0.2); }
.theme-light .slider__dot:hover { background: #fff; box-shadow: 0 0 0 1px rgba(10, 27, 53, 0.4), 0 2px 6px rgba(10, 27, 53, 0.25); }
.theme-light .slider__dot.is-active { box-shadow: none; }
.theme-light .slider__dot.is-active { background: var(--red); }
.theme-light .slider__dot:focus-visible { outline-color: rgba(10, 27, 53, 0.85); }

/* ──────────────────────────  mobile menu  ──────────────────────────── */
@media (max-width: 1100px) {
    .theme-light .nav__menu {
        background: #fff;
        border-color: var(--hairline);
        box-shadow: 0 24px 48px rgba(10, 27, 53, 0.18);
    }
}

/* Body copy over the footage carries no text shadow. A soft white halo sat here until 26 Oct 2026,
   when the client asked for it to go; contrast over bright frames is the open item from the a11y pass. */
.theme-light :is(.lede, .hero__lede, .hero__features, .why__lede) {
    text-shadow: none;   /* the white halo was removed at the client's request, 26 Oct 2026 */
}

/* 26 Oct 2026, the client: «لماذا إكسبرس ترافل؟ في خلفيه كحلي شلها» — the why section is light like the
   rest. Its secondary words and the white logomark beside them were drawn for navy. */
.theme-light .why__line img { content: url('../assets/logomark-navy-mark.svg'); }

/* 26 Oct 2026, the client: the CTA band and the footer go light like the rest of the page. */
.theme-light .footer {
    /* The same frosted glass as the cards (the client, 26 Oct 2026), as one full-width band. */
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -18px 44px -22px rgba(10, 27, 53, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.theme-light .footer__col a:hover { color: var(--ink); }
.theme-light .footer__credit a { border-bottom-color: rgba(10, 27, 53, 0.25); }
.theme-light .footer__credit a:hover { color: var(--ink); }
.theme-light .brand-lockup--horizontal { content: url('../assets/brand-horizontal-ar.svg'); }
[dir='ltr'] .theme-light .brand-lockup--horizontal { content: url('../assets/brand-horizontal-en.svg'); }

/* ───────────  accessibility pass (the client, 26 Oct 2026)  ───────────
   1. Nothing on the page is smaller than 12px. These were 10–11px. */
.theme-light :is(.card__badge, .card__note, .voucher__fact dt, .pill, .bubble__meta,
    .chat__status, .chat__input, .mock__kpi span, .mock__ref, .mock__badge, .mock__notice time) {
    font-size: 12px;
}
.theme-light .voucher__fact dt { line-height: 15px; }

/* 2. The red eyebrows (الجهات المعتمدة, كيف تعمل؟ …): 13px → 14px, then 16px at the client's request. */
.theme-light .eyebrow { font-size: 16px; }

/* 3. Slider dots: the dot stays 10px, but its touch target is 24px tall (WCAG 2.2 target size).
      The overlay is invisible; the gap goes 10px → 14px so neighbouring 24px targets touch but never overlap. */
.theme-light .slider__dots { gap: 14px; }
.theme-light .slider__dot { position: relative; }
.theme-light .slider__dot::before { content: ""; position: absolute; inset: -7px; border-radius: 99px; }

/* Hero, under the button (the client, 26 Oct 2026: «الحته دي … مش ظاهره حلو» — «في فيجما واضحه»).
   Matched to the Figma frame (Product UI 1769:147): no plate behind the features, darker slate type
   (#475569, 7.6:1 on white) instead of Steel, navy separator dots, and the white light behind the copy
   reaching down past the feature line, where the clouds are brightest. */
.theme-light .hero__lede,
.theme-light .hero__features { color: #475569; }
.theme-light .hero__features { font-weight: 500; }
.theme-light .hero__features img { content: url('../assets/dot-navy.svg'); width: 4px; height: 4px; }
.theme-light .hero__copy::before {
    inset: -56px -80px -90px;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.66) 64%, rgba(255, 255, 255, 0));
}

/* The loading screen in light colours (the client, 26 Oct 2026): the page's cloud background instead of
   navy, navy digits on light cells, and the plane's dotted path and end dots in navy rather than white.
   js/loader.js draws those as SVG attributes; CSS outranks a presentation attribute. */
.theme-light .loader { background: var(--cloud); color: var(--navy); }
.theme-light .flapcell { background: #fff; border-color: rgba(10, 27, 53, 0.12); box-shadow: 0 8px 20px -14px rgba(10, 27, 53, 0.35); }
.theme-light .loader path[stroke-dasharray="2 6"] { stroke: rgba(10, 27, 53, 0.22); }
.theme-light .loader circle { fill: rgba(10, 27, 53, 0.35); }

/* "Before Express Travel" list: the bullets take the text's own slate (the client, 26 Oct 2026);
   they were Silver, drawn for the navy page. */
.theme-light .panel--bad img { content: url('../assets/dot-slate.svg'); }

/* Section ledes over the footage (the client, 26 Oct 2026: «برضو مش واضحين اوي»): slate was still
   lost over the busier frames — the pyramids, the new capital — and a text shadow is ruled out, so
   the lede goes to navy and one weight heavier. Card text is on glass and keeps its slate. */
/* One style for every subtitle under a heading, the hero's included (the client, 26 Oct 2026: «كله يبقي واحد»). */
.theme-light :is(.lede, .why__lede, .hero__lede) { color: var(--navy); font-weight: 500; }
.theme-light .why__lede { font-size: 15px; line-height: 26px; }   /* was 14/24 — now the same size as every other subtitle */