/* ============================================================
   BOARDING PASS THEME — the departure hall.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   The hall: a split-flap departures board in board black with
   amber flaps, boarding passes on white card with a perforated
   stub and a barcode, luggage tags on their loops, passport
   stamps, amber gate signs with black pictograms, and at night
   the runway's edge lights. Headlines and signs in a wayfinding
   sans, every board, code, time and number in a cockpit mono.
   By day the hall is white, passport navy and amber; after dark
   it is the night terminal, the board glowing and the apron lit
   blue and green beyond the glass.

   The theme sets the --theme-* ramp itself (passport navy by day,
   amber at night), so the admin's accent colour does not apply
   while it is active.
   ============================================================ */

:root {
  --font-display: 'Overpass', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-ui:      'Overpass', 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  /* Prices and counts in the wayfinding sans' tabular figures; the board's
     flaps, codes and clocks in the cockpit mono */
  --font-num:     'Overpass', 'Segoe UI', system-ui, sans-serif;
  --font-flap:    'B612 Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --paper:        #f3f4f6;
  --paper-2:      #ffffff;
  --paper-3:      #e7eaef;
  --ink:          #13213d;
  --ink-2:        #2b3956;
  --ink-soft:     #55617a;
  --rule:         rgba(19, 33, 61, 0.14);
  --rule-soft:    rgba(19, 33, 61, 0.07);
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 0 rgba(19, 33, 61, .05), 0 10px 22px -16px rgba(19, 33, 61, .45);
  --shadow-md:    0 1px 0 rgba(19, 33, 61, .05), 0 22px 40px -22px rgba(19, 33, 61, .55);

  /* Passport navy */
  --theme-50:  #eef2f8;
  --theme-100: #dce4f0;
  --theme-200: #b7c6de;
  --theme-300: #8aa2c7;
  --theme-400: #5476a8;
  --theme-500: #2a4b7d;
  --theme-600: #14284b;
  --theme-700: #0f2140;
  --theme-800: #0b1933;
  --theme-900: #071126;
  --theme-500-rgb: 42, 75, 125;
  --theme-600-rgb: 20, 40, 75;
  --theme-600-ink: #ffffff;

  /* The hall's colours: each with its deep shade, an ink that reads on
     white, and a soft wash */
  --bdp-amber:      #ffb000;
  --bdp-amber-deep: #c98500;
  --bdp-amber-ink:  #8f5600;
  --bdp-amber-soft: rgba(255, 176, 0, .16);
  --bdp-navy:       #14284b;
  --bdp-navy-2:     #1f3a68;
  --bdp-navy-ink:   #14284b;
  --bdp-navy-soft:  rgba(20, 40, 75, .08);
  --bdp-green:      #1aa260;
  --bdp-green-deep: #10794a;
  --bdp-green-ink:  #0d7a43;
  --bdp-green-soft: rgba(26, 162, 96, .12);
  --bdp-red:        #e5484d;
  --bdp-red-deep:   #b8282d;
  --bdp-red-ink:    #c02a30;
  --bdp-red-soft:   rgba(229, 72, 77, .11);
  --bdp-blue:       #2f7dff;
  --bdp-blue-ink:   #1f5fd1;
  --bdp-blue-soft:  rgba(47, 125, 255, .1);

  /* The board: black housing, flap cells split by their hinge */
  --bdp-board:   #121418;
  --bdp-board-2: #1b1e24;
  --bdp-board-3: #262a31;
  --bdp-flap:    linear-gradient(180deg, #2a2e35 0 49%, #08090b 49% 51%, #22262c 51%);
  --bdp-flap-ink: #ffb000;
  --bdp-flap-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .5);

  /* Boarding pass card: white stock, a navy band, the stub's perforation */
  --bdp-pass:      #ffffff;
  --bdp-pass-2:    #f6f7f9;
  --bdp-pass-band: #14284b;
  --bdp-pass-ink:  #13213d;
  --bdp-perf:      radial-gradient(circle, var(--rule) 0 1.6px, transparent 2px) 0 50% / 9px 9px repeat-y;
  --bdp-perf-x:    radial-gradient(circle, var(--rule) 0 1.6px, transparent 2px) 50% 0 / 9px 9px repeat-x;
  /* A barcode, for stubs and tags */
  --bdp-barcode: repeating-linear-gradient(90deg, #13213d 0 2px, transparent 2px 4px, #13213d 4px 5px, transparent 5px 8px, #13213d 8px 11px, transparent 11px 12px, #13213d 12px 13px, transparent 13px 16px);

  /* Older names some shared rules use */
  --gold:       #14284b;
  --gold-2:     #ffb000;
  --gold-soft:  rgba(20, 40, 75, 0.07);
  --gold-ink:   #13213d;
  --felt:       #121418;
  --felt-2:     #1b1e24;
  --on-felt:    #f4f1ea;
  --on-felt-soft: rgba(244, 241, 234, 0.76);
  --peacock:    #14284b;
  --peacock-soft: rgba(20, 40, 75, 0.08);
  --red:        #c02a30;
  --red-soft:   rgba(229, 72, 77, 0.1);
  --rose:       #e5484d;
  --rose-soft:  rgba(229, 72, 77, 0.09);

  /* The night apron: footer, splash, arrivals board */
  --night:   #0c0e12;
  --night-2: #15181e;
  --night-3: #20242b;
  --on-night: #f4f1ea;
  --on-night-soft: rgba(244, 241, 234, .74);

  --notify-accent: var(--theme-600);
  --nav-accent:    var(--ink);
  --hdr-strip-bg:  #121418;
  --hdr-strip-rule: #121418;
  --text-primary:  var(--ink);

  /* Buttons: an amber gate sign lettered in board black, pressed in a
     step when tapped */
  --btn-bg:       #ffb000;
  --btn-bg-hover: #ffbd2b;
  --btn-ink:      #121418;
  --btn-side:     #b97a00;
  --btn-shadow:   inset 0 0 0 1px rgba(18, 20, 24, .12), 0 3px 0 var(--btn-side), 0 10px 18px -12px rgba(150, 95, 0, .8);
  --btn-shadow-hover: inset 0 0 0 1px rgba(18, 20, 24, .12), 0 3px 0 var(--btn-side), 0 14px 24px -12px rgba(150, 95, 0, .9);

  /* The hall floor: big pale terrazzo slabs out in the gutters, a calm
     column down the middle, daylight from the roof glazing at the top */
  --bdp-gutters: linear-gradient(90deg, transparent calc(50% - 700px), var(--paper) calc(50% - 664px), var(--paper) calc(50% + 664px), transparent calc(50% + 700px));
  --bdp-gutter-pat:
    radial-gradient(circle at 30% 40%, rgba(19, 33, 61, .08) 0 1px, transparent 1.6px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(201, 133, 0, .12) 0 1px, transparent 1.6px) 0 0 / 31px 27px,
    linear-gradient(90deg, rgba(19, 33, 61, .07) 0 1px, transparent 1px) 0 0 / 160px 100%,
    linear-gradient(0deg, rgba(19, 33, 61, .07) 0 1px, transparent 1px) 0 0 / 100% 160px;
  --page-bg: linear-gradient(180deg, rgba(220, 228, 240, .7), rgba(220, 228, 240, 0) 360px) no-repeat, var(--bdp-gutters), var(--bdp-gutter-pat), var(--paper);

  /* Art colours (includes/art.php reads these, the light set its fallback) */
  --bdp-a-floor: #e3e7ee; --bdp-a-floor2: #cfd5df; --bdp-a-paper: #ffffff; --bdp-a-paper2: #eef1f5;
  --bdp-a-line: #13213d; --bdp-a-metal: #9aa4b5; --bdp-a-metal2: #67728a; --bdp-a-glass: #dfe8f6;
  --bdp-a-case: #14284b; --bdp-a-case2: #1f3a68; --bdp-a-strap: #2b3956;

  /* The accent that carries links, rules and active states: passport navy
     by day, the board's amber at night */
  --bdp-accent:      #14284b;
  --bdp-accent-deep: #0a1630;
  --bdp-accent-ink:  #14284b;
  --bdp-accent-soft: rgba(20, 40, 75, .08);
  --bdp-accent-on:   #ffffff;
  /* The hall's band: the amber tab, then navy */
  --bdp-strip: linear-gradient(90deg, #ffb000 0 44px, var(--bdp-navy) 44px);
  --bdp-strip-glow: 0 0 0 transparent;
  /* The glazing at the end of the hall, for walls that carry a scene:
     mullions over a navy sky by day */
  --bdp-wall: linear-gradient(90deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px) 0 0 / 96px 100%, linear-gradient(0deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px) 0 0 / 100% 120px, linear-gradient(180deg, #2a4f8c, #14284b 75%);
  --bdp-floor: linear-gradient(180deg, #eef1f5, #e3e7ee 60%, #d7dce5);
  --bdp-gloss: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%);
  --bdp-chip-bg: rgba(19, 33, 61, .055);
}

/* After dark: the night terminal */
html.dark {
  --paper:        #0c0e12;
  --paper-2:      #15181e;
  --paper-3:      #20242b;
  --ink:          #f1eee7;
  --ink-2:        #d3d0c8;
  --ink-soft:     #a29f98;
  --rule:         rgba(241, 238, 231, 0.15);
  --rule-soft:    rgba(241, 238, 231, 0.07);
  --shadow:       0 1px 0 rgba(0, 0, 0, .4), 0 14px 30px -16px rgba(0, 0, 0, .9);
  --shadow-md:    0 1px 0 rgba(0, 0, 0, .4), 0 24px 44px -20px rgba(0, 0, 0, .95);

  --theme-50:  #1f1a0d;
  --theme-100: #2b230f;
  --theme-200: #4a3a10;
  --theme-300: #ffd27a;
  --theme-400: #ffc443;
  --theme-500: #ffb81f;
  --theme-600: #ffb000;
  --theme-700: #ffc94d;
  --theme-800: #ffdb85;
  --theme-900: #ffeec2;
  --theme-500-rgb: 255, 184, 31;
  --theme-600-rgb: 255, 176, 0;
  --theme-600-ink: #121418;

  --bdp-amber:      #ffb000;
  --bdp-amber-deep: #c98500;
  --bdp-amber-ink:  #ffc233;
  --bdp-amber-soft: rgba(255, 176, 0, .15);
  --bdp-navy:       #1f3a68;
  --bdp-navy-2:     #2b4c85;
  --bdp-navy-ink:   #9fb6e0;
  --bdp-navy-soft:  rgba(120, 160, 230, .12);
  --bdp-green:      #2fd67b;
  --bdp-green-deep: #18a65a;
  --bdp-green-ink:  #5fe39a;
  --bdp-green-soft: rgba(47, 214, 123, .13);
  --bdp-red:        #ff5a5f;
  --bdp-red-deep:   #c8353a;
  --bdp-red-ink:    #ff8a8d;
  --bdp-red-soft:   rgba(255, 90, 95, .14);
  --bdp-blue:       #4a90ff;
  --bdp-blue-ink:   #8ab8ff;
  --bdp-blue-soft:  rgba(74, 144, 255, .14);

  --bdp-board:   #08090b;
  --bdp-board-2: #121418;
  --bdp-board-3: #1d2026;
  --bdp-flap:    linear-gradient(180deg, #23272e 0 49%, #000 49% 51%, #1b1e24 51%);

  --bdp-pass:      #1b1e24;
  --bdp-pass-2:    #22262d;
  --bdp-pass-band: #0c0e12;
  --bdp-pass-ink:  #f1eee7;
  --bdp-barcode: repeating-linear-gradient(90deg, #f1eee7 0 2px, transparent 2px 4px, #f1eee7 4px 5px, transparent 5px 8px, #f1eee7 8px 11px, transparent 11px 12px, #f1eee7 12px 13px, transparent 13px 16px);

  --gold:       #ffb000;
  --gold-2:     #ffb000;
  --gold-soft:  rgba(255, 176, 0, 0.12);
  --gold-ink:   #f1eee7;
  --peacock:    #ffc233;
  --peacock-soft: rgba(255, 176, 0, 0.14);
  --red:        #ff8a8d;
  --red-soft:   rgba(255, 90, 95, 0.15);
  --rose:       #ff5a5f;
  --rose-soft:  rgba(255, 90, 95, 0.14);

  --hdr-strip-bg:  #050607;
  --hdr-strip-rule: rgba(241, 238, 231, .1);

  --btn-bg:       #ffb000;
  --btn-bg-hover: #ffc233;
  --btn-ink:      #121418;
  --btn-side:     #8a5a00;
  --btn-shadow:   inset 0 0 0 1px rgba(0, 0, 0, .15), 0 3px 0 var(--btn-side), 0 0 24px -6px rgba(255, 176, 0, .55);
  --btn-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 3px 0 var(--btn-side), 0 0 32px -4px rgba(255, 176, 0, .75);

  /* Out in the gutters, the apron at night: rows of blue edge lights,
     a green centreline between them */
  --bdp-gutter-pat:
    radial-gradient(circle, rgba(74, 144, 255, .5) 0 1.4px, transparent 2.4px) 0 0 / 56px 56px,
    radial-gradient(circle, rgba(47, 214, 123, .32) 0 1.2px, transparent 2.2px) 28px 28px / 56px 56px;
  --page-bg:
    radial-gradient(1300px 480px at 50% -200px, rgba(255, 176, 0, .1), transparent 70%) no-repeat,
    var(--bdp-gutters),
    var(--bdp-gutter-pat),
    var(--paper);

  --bdp-a-floor: #1b1e24; --bdp-a-floor2: #2a2e36; --bdp-a-paper: #262a31; --bdp-a-paper2: #30353d;
  --bdp-a-line: #000000; --bdp-a-metal: #6b7384; --bdp-a-metal2: #4b5262; --bdp-a-glass: #1e2a3d;
  --bdp-a-case: #2b4c85; --bdp-a-case2: #3a5e9c; --bdp-a-strap: #121418;

  --bdp-accent:      #ffb000;
  --bdp-accent-deep: #8a5a00;
  --bdp-accent-ink:  #ffc233;
  --bdp-accent-soft: rgba(255, 176, 0, .13);
  --bdp-accent-on:   #121418;
  --bdp-strip: linear-gradient(90deg, #ffb000 0 44px, #2b4c85 44px);
  --bdp-strip-glow: 0 0 14px rgba(255, 176, 0, .45);
  --bdp-wall: radial-gradient(circle, rgba(74, 144, 255, .9) 0 1.5px, rgba(74, 144, 255, .2) 2.5px, transparent 4px) 0 100% / 48px 22px repeat-x, linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px) 0 0 / 96px 100%, radial-gradient(120% 70% at 50% 110%, rgba(74, 144, 255, .18), transparent 60%), linear-gradient(180deg, #0c1018, #050607 80%);
  --bdp-floor: linear-gradient(180deg, #15181e, #0c0e12 60%, #08090b);
  --bdp-gloss: linear-gradient(180deg, rgba(255, 176, 0, .06), rgba(255, 176, 0, 0) 45%);
  --bdp-chip-bg: rgba(241, 238, 231, .07);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. A board is a
   panel of the departures board: the hall's white with navy by day,
   board black after dark; tiles climb from paper to amber to navy. */
:root {
  --game-bg:        #e7eaef;
  --game-surface:   #cfd5df;
  --game-surface-2: #ffffff;
  --game-ink:       #13213d;
  --game-muted:     #55617a;
  --game-accent:    #ffb000;
  --game-accent-ink:#121418;
  --game-good:      #0d7a43;
  --game-bad:       #c02a30;
  --game-tile-1:    #ffffff;
  --game-tile-2:    #ffe3a3;
  --game-tile-3:    #ffc94d;
  --game-tile-4:    #ffb000;
  --game-tile-5:    #1aa260;
  --game-tile-6:    #2f7dff;
  --game-tile-7:    #14284b;
  --game-tile-8:    #121418;
  --game-radius:    6px;
  --game-font:      'B612 Mono', ui-monospace, monospace;
  --game-font-css:  "/assets/themes/boarding-pass/assets/fonts/fonts.css";
  --game-arena-screen: #e7eaef;
  --game-arena-coins:  #8f5600;
  --game-arena-win:    #0d7a43;
  --game-arena-danger: #c02a30;
  --game-pattern:   linear-gradient(90deg, rgba(19, 33, 61, .06) 0 1px, transparent 1px) 0 0 / 40px 100%, linear-gradient(0deg, rgba(19, 33, 61, .06) 0 1px, transparent 1px) 0 0 / 100% 40px;
}
html.dark {
  --game-bg:        #15181e;
  --game-surface:   #08090b;
  --game-surface-2: #23272e;
  --game-ink:       #f1eee7;
  --game-muted:     #a29f98;
  --game-accent:    #ffb000;
  --game-accent-ink:#121418;
  --game-good:      #5fe39a;
  --game-bad:       #ff8a8d;
  --game-tile-1:    #23272e;
  --game-tile-2:    #3a3324;
  --game-tile-3:    #8a5a00;
  --game-tile-4:    #ffb000;
  --game-tile-5:    #2fd67b;
  --game-tile-6:    #4a90ff;
  --game-tile-7:    #2b4c85;
  --game-tile-8:    #f1eee7;
  --game-arena-screen: #15181e;
  --game-arena-coins:  #ffc233;
  --game-arena-win:    #5fe39a;
  --game-arena-danger: #ff8a8d;
  --game-pattern:   radial-gradient(circle, rgba(74, 144, 255, .3) 0 1px, transparent 1.8px) 0 0 / 28px 28px;
}

/* B612 Mono is Latin only: other scripts' figures and codes fall to a
   system mono, and headlines to a heavy system sans */
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) {
  --font-display: system-ui, 'Segoe UI', 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(el)) {
  --font-ui: system-ui, 'Segoe UI', 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ── Base ── */
html body {
  font-family: var(--font-ui);
  background: var(--page-bg);
  color: var(--ink);
}
html .font-sans { font-family: var(--font-ui); }
html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.015em;
}
.display-italic { font-style: normal; }
/* Figures in tabular columns take the board's mono */
html .font-display.tabular-nums, html .font-display[class*="tabular"], html .tabular-nums { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
::selection { background: #ffb000; color: #121418; }
html.dark ::selection { background: #ffb000; color: #121418; }

.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--bdp-amber-ink); }

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* The eyebrow: a gate sign, an amber plate with a black arrow, then
   the words */
:root {
  --bdp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M12 5l7 7-7 7' fill='none' stroke='%23121418' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E");
  --bdp-case: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3zm1.6 1.6V6h2.8V4.6zM8 9v9h1.6V9zm6.4 0v9H16V9z' fill='%23121418'/%3E%3Cpath d='M7 20.5h2M15 20.5h2' stroke='%23121418' stroke-width='2'/%3E%3C/svg%3E");
  --bdp-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 18.6h19v1.9h-19zM3.6 12.2l2.2-.6 2.3 2 4.1-1.2-3.9-6.2 2.4-.7 6.1 5.1 3.7-1c1.1-.3 2.2.3 2.5 1.3.2.7-.2 1.4-.9 1.6L5.4 16.7c-.8.2-1.6-.1-2-.8L2.6 14c-.3-.7.2-1.5 1-1.8z' fill='%23121418'/%3E%3C/svg%3E");
}
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .8rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0; width: 22px; height: 22px; border-radius: 4px;
  background: var(--bdp-arrow) center / 14px no-repeat, #ffb000;
  box-shadow: inset 0 0 0 1.5px rgba(18, 20, 24, .85);
}
[dir="rtl"] .section-eyebrow::before { transform: scaleX(-1); }

/* View all: a small gate sign; its arrow walks on hover or focus */
.btn-view-all {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  transition: transform .15s ease, box-shadow .15s ease, gap .3s ease, background-color .2s ease, color .2s ease;
}
.btn-view-all:hover, .btn-view-all:focus-visible { gap: .8rem; outline: none; background: #ffb000; color: #121418; border-color: #121418; }
.btn-view-all:active { transform: translateY(2px); }
html.dark .btn-view-all { border-color: rgba(241, 238, 231, .6); }
html.dark .btn-view-all:hover, html.dark .btn-view-all:focus-visible { border-color: #ffb000; }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%); }
html.dark .ed-grain::before { background: none; }

.ed-folio { font-family: var(--font-num); font-weight: 700; color: var(--ink-soft); }

[dir="rtl"] .bdp-flip-rtl { transform: scaleX(-1); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--bdp-navy); box-shadow: 0 0 0 4px var(--bdp-amber-soft); }
html.dark #desktopHeader .hdr-search:focus-within { border-color: #ffb000; }
.ed-search { background: transparent; border: none; }

/* The top strip: a slim departures board above the hall */
.hdr-strip, .hdr-strip .ed-status { color: #ffcf66; }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffffff; }
html.dark .hdr-strip, html.dark .hdr-strip .ed-status { color: #ffcf66; }
html.dark .hdr-strip a:hover, html.dark .hdr-strip button:hover { color: #ffffff; }

/* Under the main header bar, the hall's wayfinding band: navy with an
   amber edge */
.bdp-band { height: 5px; background: linear-gradient(180deg, var(--bdp-navy) 0 3px, #ffb000 3px); }
html.dark .bdp-band { background: linear-gradient(180deg, #050607 0 3px, #ffb000 3px); box-shadow: 0 0 12px rgba(255, 176, 0, .35); }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0; padding-right: 1.25rem; border-right: 1px solid var(--rule);
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: #ffb000; color: #121418; box-shadow: inset 0 0 0 1.5px rgba(18, 20, 24, .8); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--bdp-navy); outline-offset: 2px; }

/* ── Links and buttons ──
   Primary: an amber gate sign lettered in black, sinking a step when
   pressed. Secondary: a white sign with a navy rim. */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: 14px; color: var(--ink);
  background: linear-gradient(#ffb000, #ffb000) left 100% / 24px 3px no-repeat;
  padding-bottom: 3px;
  transition: gap .25s ease, background-size .3s ease;
}
.ed-link-arrow:hover, .ed-link-arrow:focus-visible { gap: 0.7rem; background-size: 100% 3px; }
[dir="rtl"] .ed-link-arrow { background-position: right 100%; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 1.4rem .72rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 800; letter-spacing: .01em;
  text-decoration: none;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 6px;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: background-color .2s ease, box-shadow .15s ease, transform .12s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background-color: var(--btn-bg-hover); color: var(--btn-ink); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px);
}
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px rgba(18, 20, 24, .2), 0 0 0 var(--btn-side); }
html .ed-btn-primary svg { transition: transform .2s ease; }
html .ed-btn-primary:hover svg, html .ed-btn-primary:focus-visible svg { transform: translateX(3px); }
[dir="rtl"] .ed-btn-primary:hover svg.bdp-flip-rtl, [dir="rtl"] .ed-btn-primary:focus-visible svg.bdp-flip-rtl { transform: scaleX(-1) translateX(3px); }
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: #ffb000; color: #121418; box-shadow: 0 3px 0 #8a5a00, 0 0 22px -4px rgba(255, 176, 0, .6); }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--bdp-navy); outline-offset: 3px; }
html.dark .ed-btn-primary:focus-visible, html.dark .ed-btn-secondary:focus-visible { outline-color: #ffffff; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .74rem 1.3rem .68rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 800; letter-spacing: .01em;
  color: var(--bdp-navy-ink);
  background: var(--paper-2);
  border: 2px solid var(--bdp-navy);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--bdp-navy);
  transition: box-shadow .15s ease, transform .12s ease, color .2s ease, background-color .2s ease;
}
.ed-btn-secondary:hover { transform: translateY(-1px); background: var(--bdp-navy); color: #ffffff; }
.ed-btn-secondary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--bdp-navy); }
html.dark .ed-btn-secondary { background: rgba(21, 24, 30, .8); color: var(--ink); border-color: rgba(241, 238, 231, .55); box-shadow: 0 3px 0 rgba(241, 238, 231, .3); }
html.dark .ed-btn-secondary:hover { color: #121418; background: #f1eee7; border-color: #f1eee7; box-shadow: 0 3px 0 rgba(241, 238, 231, .5); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }
@media (prefers-reduced-motion: reduce) {
  html .ed-btn-primary, html .ed-btn-secondary, html .ed-plan-cta, .btn-view-all { transition: none; }
  html .ed-btn-primary:hover, html .ed-btn-secondary:hover { transform: none; }
  html .ed-btn-primary:hover svg { transform: none; }
}

/* ── Cards: a boarding pass. White stock, a navy band along the top
   with its amber tab, lifted on hover or focus as if picked up ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--bdp-pass);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease, border-color .3s ease;
}
html .ed-plan::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, #ffb000 0 44px, var(--bdp-navy) 44px); pointer-events: none;
}
[dir="rtl"] .ed-plan::before { background: linear-gradient(270deg, #ffb000 0 44px, var(--bdp-navy) 44px); }
html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-md); border-color: rgba(20, 40, 75, .3); }
html.dark .ed-plan:hover, html.dark .shop-card:hover, html.dark .shop-card:focus-within { border-color: rgba(255, 176, 0, .45); }
html .ed-plan-featured {
  background: var(--bdp-board) !important;
  color: #f1eee7;
  border-color: transparent;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(241, 238, 231, .16); }
@media (prefers-reduced-motion: reduce) { html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: none; } }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink-soft); }
.ed-topnav-link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffffff; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.2rem 1.5rem .5rem;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.drawer-section-label::before { content: ''; flex-shrink: 0; width: 14px; height: 14px; border-radius: 3px; background: var(--bdp-arrow) center / 10px no-repeat, #ffb000; }
[dir="rtl"] .drawer-section-label::before { transform: scaleX(-1); }
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
html body #sideMenu .drawer-section-label { color: var(--ink-soft) !important; }
/* Count badges on drawer rows: an amber tab */
html body #sideMenu span.rounded-full.text-white[style*="--theme-600"] { background: #ffb000 !important; color: #121418 !important; }
.drawer-nav-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1.5rem;
  font-size: 15.5px; font-weight: 700; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); box-shadow: inset 4px 0 0 #ffb000; }
[dir="rtl"] .drawer-nav-row:hover { box-shadow: inset -4px 0 0 #ffb000; }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  border: 1.5px solid var(--rule); border-radius: 6px;
  font-weight: 800; color: var(--red);
}
.drawer-logout:hover { background: var(--red-soft); }

.mobile-glass-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 0;
  box-shadow: 0 3px 0 var(--bdp-navy), 0 5px 0 #ffb000;
}
html.dark .mobile-glass-header { background: rgba(12, 14, 18, 0.95); box-shadow: 0 3px 0 #050607, 0 5px 0 #ffb000; }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px #ffb000; }

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.ed-dropdown::before { content: ''; display: block; height: 4px; margin: -1px -1px 0; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, #ffb000 0 36px, var(--bdp-navy) 36px); }
.ed-dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem;
  font-size: 14.5px; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  padding: .7rem 1.25rem .35rem;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.ed-mobile-link.active { color: var(--nav-accent); }

/* ── Dark/light toggle: the departures board rolls down ──
   A board of split-flap rows comes down the screen from the top, row
   by row, each cell clattering through figures as it lands; once the
   board is solid the mode changes behind it, and the rows flip away
   from the top again with the new mode under them. The board's colours
   are fixed, so nothing changes at the flip. Built by boarding-pass.js. */
.px-fx--bdp-board { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; perspective: 900px; }
/* A win's dialog waits behind the board (boarding-pass.js) and appears once
   the rows have lifted */
html.bdp-fx-hold :is(#prizeModal, .fixed.inset-0[role="dialog"]) { visibility: hidden; }
.px-fx--bdp-board .bdp-fx-row {
  position: absolute; left: 0; right: 0; top: calc(var(--r) * var(--rh));
  height: calc(var(--rh) + 1px);
  display: flex;
  background: #08090b;
  transform-origin: 50% 0;
  transform: rotateX(-92deg);
  backface-visibility: hidden;
  transition: transform .2s cubic-bezier(.35, 1.5, .55, 1);
}
.px-fx--bdp-board .bdp-fx-row.is-down { transform: none; }
.px-fx--bdp-board .bdp-fx-row.is-gone { transform-origin: 50% 100%; transform: rotateX(92deg); transition: transform .19s cubic-bezier(.5, 0, .9, .5); }
.px-fx--bdp-board .bdp-fx-cell {
  position: relative; flex: 1 1 0; margin: 2px 1px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #25292f 0 49%, #000 49% 51%, #1d2026 51%);
  border-radius: 3px;
  font: 700 calc(var(--rh) * .52)/1 'B612 Mono', ui-monospace, monospace; color: #ffb000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.px-fx--bdp-board .bdp-fx-cell.is-lit { color: #2fd67b; }
.px-fx--bdp-board .bdp-fx-veil { position: absolute; inset: 0; background: #08090b; opacity: 0; }
.px-fx--bdp-board.is-solid .bdp-fx-veil { opacity: 1; }
.px-fx--bdp-board.is-clear .bdp-fx-veil { opacity: 0; }

/* ── Footer: the far end of the hall. A strip of the departures board
   with its last rows, the glazing beyond it (the apron by day, the
   runway lights after dark), and the hall's floor under the links ── */
.bdp-footer {
  background: linear-gradient(180deg, #ffffff, #f0f2f5) !important;
  color: var(--ink-2);
}
html.dark .bdp-footer {
  background: radial-gradient(900px 260px at 50% 0%, rgba(255, 176, 0, .08), transparent 70%), #08090b !important;
}
/* The glazing over the footer: sky and mullions by day, the apron and its
   edge lights after dark; a rail of signs hung in front */
.bdp-footer-top {
  position: relative; height: 128px; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(19, 33, 61, .16) 0 3px, transparent 3px) 0 0 / 120px 100%,
    linear-gradient(180deg, #cfe0f5, #eef4fb 70%, #e3e7ee 70% 74%, #f3f4f6 74%);
}
html.dark .bdp-footer-top {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .6) 0 3px, transparent 3px) 0 0 / 120px 100%,
    radial-gradient(circle, #4a90ff 0 1.6px, rgba(74, 144, 255, .3) 2.4px, transparent 4px) 0 82% / 40px 10px repeat-x,
    radial-gradient(circle, #2fd67b 0 1.2px, transparent 2.6px) 20px 88% / 40px 10px repeat-x,
    linear-gradient(180deg, #05070b, #0c1018 70%, #121418 70% 74%, #08090b 74%);
}
.bdp-footer-plane { position: absolute; top: 6px; inset-inline-end: 8%; width: 120px; opacity: .85; }
.bdp-footer-plane svg { display: block; width: 100%; height: auto; }
[dir="rtl"] .bdp-footer-plane svg { transform: scaleX(-1); }
html.dark .bdp-footer-plane { opacity: .35; }
.bdp-footer-rail { position: absolute; left: 0; right: 0; top: 20px; height: 6px; background: #2b3956; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
html.dark .bdp-footer-rail { background: #20242b; }
.bdp-footer-signs { position: absolute; top: 26px; inset-inline-start: 6%; display: flex; flex-wrap: wrap; gap: 10px; max-width: 70%; }
.bdp-fsign {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem .38rem .45rem; margin-top: 12px;
  font: 900 12px/1.1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  border-radius: 4px;
}
[dir="rtl"] .bdp-fsign { padding: .45rem .45rem .38rem .75rem; }
.bdp-fsign::before, .bdp-fsign::after { content: ''; position: absolute; top: -12px; width: 2px; height: 12px; background: #67728a; }
.bdp-fsign::before { left: 14px; } .bdp-fsign::after { right: 14px; }
.bdp-fsign i { width: 22px; height: 22px; border-radius: 3px; flex-shrink: 0; }
.bdp-fsign--dep, .bdp-fsign--arr { background: #ffb000; color: #121418; box-shadow: inset 0 0 0 1.5px #121418; }
.bdp-fsign--bag { background: #121418; color: #ffb000; box-shadow: inset 0 0 0 1.5px rgba(255, 176, 0, .5); }
.bdp-fsign--dep i, .bdp-fsign--arr i { background: #121418; -webkit-mask: var(--bdp-plane) center / 20px no-repeat; mask: var(--bdp-plane) center / 20px no-repeat; }
.bdp-fsign--arr i { transform: rotate(32deg); }
.bdp-fsign--bag i { background: #ffb000; -webkit-mask: var(--bdp-case) center / 18px no-repeat; mask: var(--bdp-case) center / 18px no-repeat; }
[dir="rtl"] .bdp-fsign i { transform: scaleX(-1); }
[dir="rtl"] .bdp-fsign--arr i { transform: scaleX(-1) rotate(32deg); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .bdp-fsign { letter-spacing: 0; font-size: 12.5px; }
@media (max-width: 639px) {
  .bdp-footer-top { height: 112px; }
  .bdp-footer-signs { inset-inline-start: 16px; max-width: calc(100% - 32px); gap: 6px; }
  .bdp-fsign { font-size: 10.5px; letter-spacing: .06em; }
  .bdp-fsign--bag { display: none; }
  .bdp-footer-plane { width: 84px; top: 52px; }
}
.bdp-footer a:hover { color: var(--bdp-navy-ink); }
html.dark .bdp-footer a:hover { color: #ffc233; }
html .bdp-footer .ed-footer-heading {
  font-family: var(--font-ui); font-weight: 900; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: var(--ink) !important; }
html .bdp-footer .ed-footer-link { color: var(--ink-2); background: linear-gradient(#ffb000, #ffb000) left 100% / 0 2px no-repeat; transition: background-size .3s ease, color .2s ease; }
html .bdp-footer .ed-footer-link:hover, html .bdp-footer .ed-footer-link:focus-visible { background-size: 100% 2px; color: var(--ink); }
[dir="rtl"] .bdp-footer .ed-footer-link { background-position: right 100%; }

/* The floating nav: a row of gate signs, the current one lit amber */
html .ed-floating-nav {
  position: relative;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--bdp-navy);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--bdp-navy), var(--shadow-md);
}
html.dark .ed-floating-nav { background: rgba(18, 20, 24, .97); border-color: rgba(241, 238, 231, .2); box-shadow: 0 3px 0 #000, 0 20px 40px -20px rgba(0, 0, 0, .9); }
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; font-weight: 700; color: var(--ink-2); border-radius: 6px; }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: #ffb000; color: #121418 !important; box-shadow: inset 0 0 0 1.5px rgba(18, 20, 24, .8); }
html body .ed-floating-nav a.ed-floating-link.active > span { color: #121418 !important; }

/* The newsletter: a strip of the departures board, its hazard-banded
   edge at the start */
html body .bdp-footer .ed-newsletter {
  position: relative; overflow: hidden;
  background: var(--bdp-board) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 40px -22px rgba(19, 33, 61, .7) !important;
}
html.dark body .bdp-footer .ed-newsletter { box-shadow: inset 0 0 0 1px rgba(255, 176, 0, .25), 0 0 40px -14px rgba(255, 176, 0, .4) !important; }
html body .bdp-footer .ed-newsletter::before { display: block !important; content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 10px; background: repeating-linear-gradient(180deg, #ffb000 0 10px, #121418 10px 20px); opacity: 1; border-radius: 0; }
html body .bdp-footer .ed-newsletter::after { display: none !important; }
html body .bdp-footer .ed-newsletter, html body .bdp-footer .ed-newsletter * { --ink: #f1eee7; --ink-2: #e2ded5; --ink-soft: #cfcac0; }
html body .bdp-footer .ed-newsletter h4, html.dark body .bdp-footer .ed-newsletter h4 { color: #ffb000 !important; font-family: var(--font-ui); font-weight: 900; letter-spacing: .01em; }
html body .bdp-footer .ed-newsletter p:not(#newsletter-msg), html.dark body .bdp-footer .ed-newsletter p:not(#newsletter-msg) { color: #e2ded5 !important; opacity: 1; }
html body .bdp-footer .ed-newsletter-input, html.dark body .bdp-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #13213d !important; border: 1.5px solid rgba(255, 255, 255, .6) !important; border-radius: 6px; }
html body .bdp-footer .ed-newsletter-input::placeholder { color: #55617a; }
html body .bdp-footer .ed-newsletter-input:focus { border-color: #ffb000 !important; box-shadow: 0 0 0 4px rgba(255, 176, 0, .35); }
html body .bdp-footer .ed-newsletter-btn { background: #ffb000; color: #121418; border: 0; border-radius: 6px; font-family: var(--font-ui); font-weight: 800; box-shadow: 0 3px 0 #8a5a00; transition: transform .12s ease, box-shadow .12s ease; }
html body .bdp-footer .ed-newsletter-btn:hover { background: #ffc233; }
html body .bdp-footer .ed-newsletter-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #8a5a00; }
html body .bdp-footer .ed-newsletter-age, html body .bdp-footer .ed-newsletter label { color: #e2ded5 !important; }

/* Logo plate: the light-mode logo on a white sign wherever it sits on
   the board */
.bdp-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.4rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: inset 0 -4px 0 #ffb000, 0 14px 28px -14px rgba(0, 0, 0, .7);
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the night terminal instead. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(12, 14, 18, 0.95) !important; border-bottom-color: transparent !important; }
html.dark #desktopFooter { background: #08090b !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(18, 20, 24, 0.97) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: #ffb000 !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #20242b, #0c0e12, #15181e, #050607) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with #0d1117; here fields are
   the board's black. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #08090b !important;
  border-color: rgba(241, 238, 231, .22) !important;
  color: #f1eee7 !important;
}

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. After dark those panels take the board's black. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #050607;
  --paper: #f1eee7;
  border-color: rgba(241, 238, 231, .18);
}

html header.safe-top-header[style] { background: rgba(255, 255, 255, .96) !important; }
html.dark header.safe-top-header[style] { background: rgba(12, 14, 18, .96) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(12, 14, 18, .96); }

/* ── Login / register / forgot-password brand panel: the glazing at
   the end of the hall. Navy sky by day, the runway lit at night; a
   strip of the departures board along the top ── */
:root {
  --brand-gradient: linear-gradient(170deg, #1f3a68, #14284b);
  --brand-glow-1: rgba(255, 255, 255, 0.14);
  --brand-glow-2: rgba(255, 176, 0, 0.2);
}
html.dark {
  --brand-gradient: linear-gradient(170deg, #121418, #050607);
  --brand-glow-1: rgba(74, 144, 255, 0.16);
  --brand-glow-2: rgba(255, 176, 0, 0.16);
}
html body .brand-panel {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px) 0 0 / 25% 100%,
    linear-gradient(180deg, #2a4f8c, #14284b 70%) !important;
  color: #ffffff;
}
html.dark body .brand-panel {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px) 0 0 / 25% 100%,
    radial-gradient(120% 60% at 50% 100%, rgba(74, 144, 255, .18), transparent 60%),
    linear-gradient(180deg, #0c1018, #050607 70%) !important;
}
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the runway's edge lights running away to the
   horizon. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  width: auto !important; height: 38% !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--art-runway) center bottom / 100% 100% no-repeat !important;
  box-shadow: none !important;
}
/* login.css's other glow becomes a strip of the departures board along
   the top */
html .brand-panel::before {
  top: 0 !important; bottom: auto !important; left: 0 !important; right: 0 !important; width: auto !important; height: 14px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: repeating-linear-gradient(90deg, #121418 0 20px, #ffb000 20px 21px, #121418 21px 22px) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3) !important;
}
html body .brand-panel .text-purple-200,
html body .brand-panel [class*="text-purple-200"],
html body .brand-panel .text-white\/80, html body .brand-panel .text-white\/70 { color: rgba(255, 255, 255, .88) !important; }
html body .brand-panel .text-white, html body .brand-panel h1, html body .brand-panel h2 { color: #ffffff !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 900 !important; }

/* ── Wallet balance card: a page of the passport. Navy cover board
   round a cream page, a guilloche of fine waves across it, the binding
   stitched down one edge and stamps in the corner; the balance in the
   board's mono ── */
html body .wallet-hero {
  position: relative;
  background:
    repeating-radial-gradient(ellipse at 110% 120%, rgba(20, 40, 75, 0) 0 14px, rgba(20, 40, 75, .06) 14px 15px),
    repeating-radial-gradient(ellipse at -10% -20%, rgba(201, 133, 0, 0) 0 18px, rgba(201, 133, 0, .07) 18px 19px),
    linear-gradient(160deg, #fffaf0, #f6eedc);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 6px #14284b, 0 0 0 7px rgba(255, 176, 0, .6), 0 26px 44px -22px rgba(19, 33, 61, .75);
  color: #13213d;
  overflow: hidden;
  margin: 7px 7px 15px;
}
html body .wallet-hero::before {
  content: ''; position: absolute; top: 12px; bottom: 12px; inset-inline-start: 12px; left: auto; right: auto; width: 2px; height: auto; margin: 0;
  border: 0; border-radius: 0; transform: none; opacity: .55;
  background: repeating-linear-gradient(180deg, #14284b 0 6px, transparent 6px 11px);
  pointer-events: none;
}
html:not([dir="rtl"]) body .wallet-hero::before { left: 12px; }
[dir="rtl"] body .wallet-hero::before { right: 12px; }
html body .wallet-hero::after {
  content: ''; position: absolute; inset-inline-end: 18px; top: 14px; left: auto; bottom: auto; width: 132px; height: 96px; margin: 0;
  border-radius: 0; transform: none; opacity: .85; filter: none;
  background: var(--art-stamps) center / contain no-repeat;
  box-shadow: none;
  pointer-events: none;
}
@media (max-width: 639px) {
  html body .wallet-hero::after { width: 80px; height: 60px; top: 12px; inset-inline-end: 10px; }
}
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-hero .wallet-ref { margin-inline-end: 140px; color: #55617a !important; letter-spacing: .16em; font-size: .66rem; font-weight: 800; }
@media (max-width: 639px) { html body .wallet-hero .wallet-ref { margin-inline-end: 84px; } }
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: #55617a !important; }
html body .wallet-hero [style*="color:#fff"], html body .wallet-hero [style*="color: #fff"], html body .wallet-hero .text-white { color: #13213d !important; }
html body .wallet-hero .h-px { background: rgba(20, 40, 75, .2) !important; }
html body .wallet-balance-num {
  font-family: var(--font-num); font-variation-settings: normal; font-weight: 900; letter-spacing: -.01em;
  color: #13213d; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
}
html body .wallet-hero-btn-primary { background: #ffb000; color: #121418; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 6px; box-shadow: 0 3px 0 #b97a00; transition: transform .12s ease, box-shadow .12s ease; }
html body .wallet-hero-btn-primary:hover { background: #ffbd2b; color: #121418; }
html body .wallet-hero-btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 #b97a00; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 800; color: #14284b; background: rgba(255, 255, 255, .6); border: 2px solid #14284b; border-radius: 6px; }
html body .wallet-hero-btn-secondary:hover { background: #14284b; color: #ffffff; }
/* After dark the passport lies under the terminal's lamps: the cream
   page dimmed to lamplight, an amber rim of light round the cover */
html.dark body .wallet-hero {
  background:
    repeating-radial-gradient(ellipse at 110% 120%, rgba(20, 40, 75, 0) 0 14px, rgba(20, 40, 75, .07) 14px 15px),
    repeating-radial-gradient(ellipse at -10% -20%, rgba(201, 133, 0, 0) 0 18px, rgba(201, 133, 0, .08) 18px 19px),
    linear-gradient(160deg, #e6dcc6, #d3c6aa);
  box-shadow: 0 0 0 6px #0b1830, 0 0 0 7px rgba(255, 176, 0, .5), 0 0 60px -14px rgba(255, 176, 0, .35);
}

/* ── Box card (styled by assets/css/pages/home.css) ── */
html .ed-card-mystery {
  position: relative;
  background: var(--bdp-pass);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
html .ed-card-mystery::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 5px; border-radius: 0;
  background: linear-gradient(90deg, #ffb000 0 44px, var(--bdp-navy) 44px); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the check-in desk's counter card ── */
html body .pd-buybox {
  position: relative;
  background: var(--bdp-pass);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, #ffb000 0 64px, var(--bdp-navy) 64px);
}
[dir="rtl"] body .pd-buybox::before { background: linear-gradient(270deg, #ffb000 0 64px, var(--bdp-navy) 64px); }
html body .pd-buybox .font-display.text-4xl { color: var(--ink); overflow-wrap: normal; font-family: var(--font-num); font-weight: 900; letter-spacing: -.01em; }
.pd-title { font-weight: 900 !important; }

/* The box page's own spin button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill; readable here on
   plugin releases without their own fix. */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the hall's navy, amber after dark. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-600); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-700); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600, html .text-blue-600, html .text-blue-500 { color: var(--bdp-navy-ink); }
html.dark .text-purple-500, html.dark .text-purple-600, html.dark .text-indigo-500, html.dark .text-indigo-600, html.dark .text-violet-600, html.dark .text-blue-600, html.dark .text-blue-500 { color: var(--bdp-amber-ink); }
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 6px; box-shadow: 0 3px 0 var(--btn-side);
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100, html .bg-blue-50 { background-color: var(--bdp-navy-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50, html.dark .bg-blue-50 { background-color: var(--bdp-amber-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200, html .border-blue-200 { border-color: rgba(20, 40, 75, .25); }
html.dark .border-violet-200 { border-color: rgba(255, 176, 0, .3) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(255, 176, 0, .4); }
html .focus\:border-purple-400:focus { border-color: var(--bdp-navy); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the hall's gate signs. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(18, 20, 24, .3); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--bdp-pass); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease; }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* ── Cart and checkout: the order total on a boarding pass ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--bdp-pass) !important; border: 1px solid var(--rule) !important; border-radius: 12px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--bdp-pass) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, #ffb000 0 64px, var(--bdp-navy) 64px);
}
[dir="rtl"] .rounded-2xl:has(> div > div > #summary-total)::before,
[dir="rtl"] section.rounded-2xl:has([x-text="totalDisplay()"])::before { background: linear-gradient(270deg, #ffb000 0 64px, var(--bdp-navy) 64px); }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  letter-spacing: -.03em;
  color: var(--ink);
  overflow-wrap: normal;
  font-variant-numeric: lining-nums tabular-nums;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .1em; }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}

/* The hero's board is drawn by components/home/hero.css, which arrives
   after this sheet; until it does, the bare markup would paint as plain
   rows, so the board waits out of sight. */
.bdp-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; }

/* ── The hall's small pieces ── */
/* The five colours banners and categories are mapped to (bdp_tone_for()) */
:root { --bdp-t1: #14284b; --bdp-t2: #ffb000; --bdp-t3: #1aa260; --bdp-t4: #2f7dff; --bdp-t5: #e5484d; }
html.dark { --bdp-t1: #8fb0e8; --bdp-t2: #ffb000; --bdp-t3: #2fd67b; --bdp-t4: #4a90ff; --bdp-t5: #ff5a5f; }
.bdp-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }

/* A flap: one character cell of the departures board, split by its
   hinge. .bdp-flaps holds a run of them; .bdp-flap--wide carries a whole
   word (a status, a destination) on one long flap. */
.bdp-flaps { display: inline-flex; gap: 2px; direction: ltr; }
.bdp-flap {
  position: relative; display: inline-grid; place-items: center;
  min-width: 1.05em; padding: .14em .08em .1em;
  font-family: var(--font-flap); font-weight: 700; line-height: 1; letter-spacing: 0;
  color: var(--bdp-flap-ink);
  background: var(--bdp-flap);
  border-radius: 3px;
  box-shadow: var(--bdp-flap-shadow);
  font-variant-numeric: tabular-nums;
}
.bdp-flap--wide { padding: .3em .55em .26em; min-width: 0; font-family: var(--font-ui); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bdp-flap--go { color: #2fd67b; }
.bdp-flap--hold { color: #ff6b6f; }

/* "Boarding": a green lamp that breathes */
.bdp-lamp { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2fd67b; box-shadow: 0 0 0 2px rgba(47, 214, 123, .2), 0 0 8px rgba(47, 214, 123, .9); flex-shrink: 0; }
.bdp-lamp--amber { background: #ffb000; box-shadow: 0 0 0 2px rgba(255, 176, 0, .2), 0 0 8px rgba(255, 176, 0, .9); }
.bdp-lamp--off { background: #6b7384; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .bdp-lamp:not(.bdp-lamp--off) { animation: bdp-lamp 1.6s ease-in-out infinite; }
}
@keyframes bdp-lamp { 50% { opacity: .45; } }

/* A gate sign: amber plate, black pictogram or figures */
.bdp-gate {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .6rem .24rem;
  font: 800 12px/1.1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: #121418; background: #ffb000;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(18, 20, 24, .85);
  white-space: nowrap;
}
.bdp-gate b { font-family: var(--font-flap); font-weight: 700; letter-spacing: 0; }
.bdp-gate--navy { color: #ffffff; background: #14284b; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.bdp-gate--plane::before { content: ''; width: 15px; height: 15px; flex-shrink: 0; background: var(--bdp-plane) center / contain no-repeat; }
[dir="rtl"] .bdp-gate--plane::before { transform: scaleX(-1); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .bdp-gate { letter-spacing: .01em; font-size: 12.5px; }

/* A stamp: a rubber-stamp frame in one of the inks, a little rotated */
.bdp-stamp {
  --sc: var(--bdp-green-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .32rem .7rem .26rem;
  font: 800 11px/1.1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc);
  border: 2px solid currentColor; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--paper-2), inset 0 0 0 3px currentColor;
  transform: rotate(-4deg);
  white-space: nowrap;
}
.bdp-stamp--navy { --sc: var(--bdp-navy-ink); }
.bdp-stamp--amber { --sc: var(--bdp-amber-ink); }
.bdp-stamp--red { --sc: var(--bdp-red-ink); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .bdp-stamp { letter-spacing: .01em; }

.bdp-balance, .bdp-icon-btn { border: 1.5px solid var(--rule); color: var(--ink); background: var(--paper-2); transition: border-color .2s ease, transform .12s ease, box-shadow .12s ease; box-shadow: 0 2px 0 var(--rule); }
.bdp-balance:hover, .bdp-icon-btn:hover { border-color: var(--bdp-navy); }
html.dark .bdp-balance:hover, html.dark .bdp-icon-btn:hover { border-color: #ffb000; }
.bdp-balance:active, .bdp-icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--rule); }
.bdp-balance [data-raw] { font-family: var(--font-num); font-weight: 800; font-variant-numeric: tabular-nums; }

/* A boarding pass for dialogs and sheets: white stock, the navy band
   with its amber tab along the top */
.bdp-sheet {
  position: relative; overflow: hidden;
  background: var(--bdp-pass);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(19, 33, 61, .5);
}
.bdp-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #ffb000 0 56px, var(--bdp-navy) 56px); }
[dir="rtl"] .bdp-sheet::before { background: linear-gradient(270deg, #ffb000 0 56px, var(--bdp-navy) 56px); }
html.dark .bdp-sheet { box-shadow: 0 0 0 1px rgba(255, 176, 0, .14), 0 24px 50px -20px rgba(0, 0, 0, .9); }
html body [style*="background:#16a34a"] { background: var(--bdp-green) !important; }
/* The floating nav pill is printed inside the footer; it floats over the
   page and keeps the page's own colours. */
html body .bdp-footer .ed-floating-nav { --ink: #13213d; --ink-2: #2b3956; --paper-3: #e7eaef; }
html.dark body .bdp-footer .ed-floating-nav { --ink: #f1eee7; --ink-2: #d3d0c8; --paper-3: #20242b; }
/* The phone menu button: a white sign */
html body .menu-btn, html.dark body .menu-btn { background: var(--paper-2) !important; border: 1.5px solid var(--rule) !important; box-shadow: 0 2px 0 var(--rule); }
html body .menu-btn:hover, html.dark body .menu-btn:hover { background: var(--paper-3) !important; transform: none; }
html body .menu-btn:active { transform: translateY(2px); box-shadow: none; }

/* ── Micro-interactions shared by the whole hall ──
   A badge lands like a passport stamp when it appears (.bdp-stamped); a
   featured countdown's figures flip like a split-flap cell as they roll
   over (.bdp-tick, gated in boarding-pass.js; never on cards); whatever
   bids, buys or adds to the cart is scanned at the gate, a green line
   sweeping across it (.bdp-scan, boarding-pass.js). */
@media (prefers-reduced-motion: no-preference) {
  .bdp-stamped { animation: bdp-stamped .42s cubic-bezier(.3, 1.6, .5, 1) both; }
  .bdp-tick { animation: bdp-tick .3s cubic-bezier(.4, 0, .6, 1); transform-origin: 50% 0; }
}
@keyframes bdp-stamped { 0% { transform: scale(1.5) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bdp-tick { 0% { transform: perspective(160px) rotateX(38deg); } 100% { transform: none; } }
.bdp-scan {
  position: fixed; z-index: 2147482000; pointer-events: none;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(47, 214, 123, .75), 0 0 18px rgba(47, 214, 123, .5);
  animation: bdp-scan-box .7s ease-out forwards;
}
.bdp-scan::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; width: 3px; left: 0;
  background: #2fd67b; box-shadow: 0 0 10px 2px rgba(47, 214, 123, .9);
  animation: bdp-scan-line .5s cubic-bezier(.5, 0, .5, 1) forwards;
}
[dir="rtl"] .bdp-scan::before { left: auto; right: 0; animation-name: bdp-scan-line-rtl; }
@keyframes bdp-scan-line { from { left: 0; } to { left: calc(100% - 3px); } }
@keyframes bdp-scan-line-rtl { from { right: 0; } to { right: calc(100% - 3px); } }
@keyframes bdp-scan-box { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ── Walls: the glazing's mullions beside the words ──
   A wall that carries words draws a faint grid of the terminal's
   glazing (the runway's lights after dark) on a layer of its own,
   masked away from the copy: down both sides of a centred copy, on the
   far side of a copy that sits to one side, nowhere at phone width. */
:root {
  --bdp-wall-pat: linear-gradient(90deg, rgba(20, 40, 75, .1) 0 1px, transparent 1px) 0 0 / 48px 100%, linear-gradient(0deg, rgba(20, 40, 75, .1) 0 1px, transparent 1px) 0 0 / 100% 72px;
  --bdp-mask-c: linear-gradient(90deg, #000 0, #000 7%, transparent 19%, transparent 81%, #000 93%, #000 100%);
  --bdp-mask-s: linear-gradient(90deg, transparent 0, transparent 52%, #000 64%, #000 100%);
}
html.dark { --bdp-wall-pat: radial-gradient(circle, rgba(74, 144, 255, .45) 0 1.3px, transparent 2.2px) 0 0 / 36px 36px; }
[dir="rtl"] { --bdp-mask-s: linear-gradient(270deg, transparent 0, transparent 52%, #000 64%, #000 100%); }
@media (max-width: 1023px) {
  :root, [dir="rtl"] { --bdp-mask-c: linear-gradient(transparent, transparent); --bdp-mask-s: linear-gradient(transparent, transparent); }
}
.bdp-wn, html body .bdp-lamplit, html body .bdp-err, body.bdp-404, html body .brand-panel, .ga-marquee { isolation: isolate; }
.bdp-wn::before, html body .bdp-lamplit::before, html body .bdp-err::before, body.bdp-404::before, .ga-marquee::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bdp-wall-pat);
  -webkit-mask: var(--bdp-mask-c); mask: var(--bdp-mask-c);
}
.ga-marquee::after { -webkit-mask: var(--bdp-mask-s); mask: var(--bdp-mask-s); display: block; }
body.bdp-404::before { position: fixed; }
.bdp-lamps { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bdp-wall-pat); -webkit-mask: var(--bdp-mask-c); mask: var(--bdp-mask-c); }

/* Phones: headings break only between words, never mid-word. */
@media (max-width: 639px) {
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two (a long German label was cut
   off); a lot page's browse link drops under its heading (its German
   label pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* The top edge of a caption card: the amber tab, then the navy band */
:root { --bdp-topline: linear-gradient(90deg, #ffb000 0 56px, var(--bdp-navy) 56px); }
[dir="rtl"] { --bdp-topline: linear-gradient(270deg, #ffb000 0 56px, var(--bdp-navy) 56px); }

/* A product's white ground: thumbnails, the prize in a dialog, the icon
   of a notice */
:root {
  --bdp-face: radial-gradient(80% 80% at 50% 20%, #ffffff, #e9edf3);
  --bdp-face-ring: inset 0 0 0 1px rgba(19, 33, 61, .1), inset 0 -3px 0 #ffb000;
  --bdp-photo: var(--bdp-face);
  /* A pool of daylight from the roof glazing */
  --bdp-window: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  /* A meter: flap cells filling in amber */
  --bdp-meter: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .25) 9px 11px), linear-gradient(90deg, #ffb000, #ffd166);
}
html.dark {
  --bdp-face: radial-gradient(80% 80% at 50% 20%, #2a2e36, #15181e);
  /* Product photos are cut out for light grounds; after dark their
     thumbnails keep a lit glazing grey so black or navy goods still show. */
  --bdp-photo: radial-gradient(80% 80% at 50% 20%, #e3e8f0, #aeb8c9);
  --bdp-face-ring: inset 0 0 0 1px rgba(241, 238, 231, .14), inset 0 -3px 0 #ffb000;
  --bdp-window: radial-gradient(closest-side, rgba(255, 176, 0, .18), rgba(255, 176, 0, 0));
}
/* Phones: a long single word in a big section title ("funktioniert's")
   gets a size that fits the row instead of breaking */
@media (max-width: 639px) {
  html body h2.text-fit.text-4xl { font-size: clamp(1.35rem, 6.6vw, 2.25rem); }
}

/* The price-offer form on an item page brings its own amber Send button;
   it takes the theme's button like every other primary action. */
html body #shopB2bNegotiateForm button[type="submit"] { background: var(--btn-bg) !important; color: var(--btn-ink) !important; box-shadow: var(--btn-shadow); }
html body #shopB2bNegotiateForm button[type="submit"]:hover { background: var(--btn-bg-hover, var(--btn-bg)) !important; }

/* While the wheel turns the spin button is disabled, and the shared
   disabled grey made it look dead; it keeps its colour, a little softer. */
html body.is-spinning #spinButton:disabled { background: var(--btn-bg) !important; color: var(--btn-ink) !important; opacity: .8; cursor: progress; }

/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
   for the shared .px-tone-* chips and notes, each set so its chip and text
   read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #0d7842; --px-warn: #8f5600; --px-crit: #c02a30; --px-info: #14294c; }
html.dark:root { --px-good: #2ed67b; --px-warn: #ffb81f; --px-crit: #ff9497; --px-info: #85b2ff; }
/* The cart's urgent "Complete Payment" prints white on the crit tone; the
   night crit is light, so its label takes the dark paper instead. */
html.dark body a[style*="background:var(--px-crit)"] { color: var(--paper) !important; }

/* Changing language: rows of the departures board (boarding-pass.js). The
   flap is the board's own, painted behind each line of text; over a gold
   button's own background too, or its amber letters would vanish into it. */
.bdp-lang-board {
  background: var(--bdp-flap) !important;
  color: var(--bdp-flap-ink, #ffb000) !important;
  box-shadow: var(--bdp-flap-shadow);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bdp-lang-a { animation: bdp-lang-turn-a 55ms steps(2, end) both; }
.bdp-lang-b { animation: bdp-lang-turn-b 55ms steps(2, end) both; }
@keyframes bdp-lang-turn-a { from { filter: brightness(.55); } to { filter: none; } }
@keyframes bdp-lang-turn-b { from { filter: brightness(.55); } to { filter: none; } }

/* Changing language, the scene (boarding-pass.js): the pass, the route the
   plane flies before the reload and lands on after it, and the arrival
   stamp. The pass is the same on both pages, so the reload never shows. */
.bdp-lang-stage { background: color-mix(in srgb, var(--theme-900, #071126) 62%, transparent); }
.bdp-lang-pass {
  position: relative; display: flex; width: min(600px, 100%); box-sizing: border-box;
  color: var(--ink); background: var(--paper-2); border-radius: 16px;
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .6);
  font-family: var(--font-ui);
}
.bdp-lang-main { flex: 1 1 auto; min-width: 0; padding: 18px 22px 16px; }
.bdp-lang-head {
  display: flex; align-items: center; gap: 10px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--rule); font: 600 12px/1 var(--font-flap); letter-spacing: .12em; color: var(--ink-soft);
}
.bdp-lang-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--theme-600); font-size: 13px; }
.bdp-lang-date { margin-inline-start: auto; }
.bdp-lang-route { display: flex; align-items: center; gap: 12px; padding: 16px 0 10px; }
.bdp-lang-end { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; text-align: center; }
.bdp-lang-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.bdp-lang-code { font: 800 clamp(30px, 9vw, 46px)/1 var(--font-display); letter-spacing: .02em; color: var(--theme-600); }
.bdp-lang-name { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; max-width: 9em; }
.bdp-lang-path { position: relative; flex: 1 1 auto; min-width: 60px; height: 40px; }
.bdp-lang-trail {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform-origin: left center;
  background: repeating-linear-gradient(90deg, var(--ink-soft) 0 6px, transparent 6px 12px);
}
.bdp-lang-plane {
  position: absolute; top: 50%; left: 0; margin: -14px 0 0 -14px; width: 28px; height: 28px;
  display: grid; place-items: center; font-size: 22px; color: var(--gold-2, #ffb000);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.bdp-lang-board-row {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 10px; border-radius: 4px;
  background: var(--bdp-flap, #10182b); color: var(--bdp-flap-ink, #ffb000); font: 700 13px/1.2 var(--font-flap); letter-spacing: .08em;
}
.bdp-lang-stub {
  flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-inline-start: 2px dashed var(--rule); padding: 14px 10px;
}
.bdp-lang-stub .bdp-lang-code { font-size: 22px; }
.bdp-lang-barcode { width: 60px; height: 54px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px); opacity: .85; }
.bdp-lang-stamp {
  position: absolute; right: 108px; bottom: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 50%; border: 3px solid #1f8f4e; color: #1f8f4e;
  font: 800 13px/1 var(--font-flap); letter-spacing: .1em; transform: rotate(-14deg); opacity: 0; pointer-events: none;
}
.bdp-lang-stamp span { font-size: 26px; line-height: 1; }

/* Out: the pass slides up, the route draws and the plane takes off. */
.px-lang-stage-out .bdp-lang-pass { animation: bdp-lang-pass-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .bdp-lang-trail { animation: bdp-lang-trail .55s ease-in-out .3s both; }
.px-lang-stage-out .bdp-lang-plane { animation: bdp-lang-takeoff .75s cubic-bezier(.45, 0, .55, 1) .32s both; }
.px-lang-stage-out .bdp-lang-status { animation: bdp-lang-blink .4s steps(2, end) .3s 3 both; }
/* In: it starts where out ended, lands, and the pass is stamped. */
.px-lang-stage-in .bdp-lang-plane { animation: bdp-lang-land .5s cubic-bezier(.3, .7, .3, 1) both; }
.px-lang-stage-in .bdp-lang-end:last-child .bdp-lang-code { animation: bdp-lang-arrive .35s ease-out .45s both; }
.px-lang-stage-in .bdp-lang-stamp { animation: bdp-lang-stamp .32s cubic-bezier(.2, .9, .3, 1.35) .62s both; }
.px-lang-stage-in .bdp-lang-pass { animation: bdp-lang-pass-out .26s ease-in 1s both; }
@keyframes bdp-lang-pass-in { from { transform: translateY(40px) rotate(-2deg); opacity: 0; } }
@keyframes bdp-lang-pass-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes bdp-lang-trail { from { transform: scaleX(0); } }
@keyframes bdp-lang-takeoff {
  0%   { left: 0; transform: none; }
  70%  { left: 78%; transform: translateY(-4px) rotate(-6deg); }
  100% { left: 100%; transform: translateY(-16px) rotate(-14deg) scale(1.08); }
}
@keyframes bdp-lang-land {
  0%   { left: 100%; transform: translateY(-16px) rotate(-14deg) scale(1.08); }
  70%  { left: 100%; transform: translateY(1px) rotate(2deg); }
  100% { left: 100%; transform: none; }
}
@keyframes bdp-lang-arrive { 50% { color: var(--gold-2, #ffb000); transform: scale(1.08); } }
@keyframes bdp-lang-stamp { from { transform: rotate(-14deg) scale(2.2); opacity: 0; } to { transform: rotate(-14deg); opacity: .92; } }
@keyframes bdp-lang-blink { 50% { opacity: .25; } }
@media (max-width: 460px) {
  .bdp-lang-stub { display: none; }
  .bdp-lang-stamp { right: 12px; bottom: 8px; width: 64px; height: 64px; }
  .bdp-lang-main { padding: 16px; }
}

/* Phones: the hero's two buttons stay side by side, each as wide as its
   label needs, their text and padding shrinking with the screen; a label
   still too long takes two even lines inside its button. A home section's title and its "View all" link
   share one row too: the title keeps a little over half of it, breaking
   between words if it must, and only a very long link label takes two
   lines. */
@media (max-width: 639px) {
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) {
    flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance;
    padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15;
  }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) > :is(svg, i, img) { flex: none; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 55%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 45%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}

/* Recent winners strip. It also stops while one of its cards has focus,
   slides towards the reading side on right-to-left pages (the shared loop
   only runs leftwards, which empties the row there), and holds still with
   each winner shown once when there are too few of them to fill the row
   (data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }
/* rev 868fe5109c9f2a2b */