/* ============================================================
   S'DINGO DESIGN SYSTEM
   Brand-derived tokens · layered depth · motion with restraint
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ------------------------------------------------------------ */
:root {
  /* Brand reds */
  --red: #D40404;
  --red-bright: #FC0404;
  --red-dark: #8C0404;
  --red-deep: #540202;

  /* Brand blues */
  --blue: #0561C9;
  --blue-mid: #044CB4;
  --blue-dark: #041C5C;
  --blue-bright: #0F73DB;
  --sky: #66A3E0;

  /* Neutrals */
  --black: #040404;
  --charcoal: #1C1C1C;
  --grey-dark: #343434;
  --grey: #787980;
  --silver: #C3B6BC;
  --line: #E4DFE2;
  --surface: #F4F4F4;
  --offwhite: #EFEDEF;
  --white: #FFFFFF;
  --green: #16803C;
  --gold: #F5B301;

  /* Gradients lifted from the logo */
  --gradient-red: linear-gradient(180deg, #FC0404 0%, #D40404 45%, #8C0404 100%);
  --gradient-blue: linear-gradient(180deg, #0561C9 0%, #044CB4 50%, #041C5C 100%);
  --gradient-dark: linear-gradient(180deg, #343434 0%, #040404 100%);

  /* Typography */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Shape */
  --radius: 24px;
  --radius-sm: 14px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(4, 4, 4, .04), 0 8px 24px -12px rgba(4, 28, 92, .18);
  --shadow-md: 0 4px 12px rgba(4, 4, 4, .05), 0 24px 60px -24px rgba(4, 28, 92, .28);
  --shadow-lg: 0 10px 30px rgba(4, 4, 4, .08), 0 50px 100px -30px rgba(4, 28, 92, .4);

  /* Layout */
  --container: 1320px;
}

/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

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

a {
  color: var(--blue);
  text-decoration: none;
  transition: color .25s;
}

a:hover {
  color: var(--red);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--black);
  margin: 0;
}

p {
  margin: 0;
}

::selection {
  background: var(--red);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 4px;
  border-radius: 6px;
}

.container-sd {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 28px;
}

section {
  position: relative;
}

section[id] {
  scroll-margin-top: 120px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--blue-mid), var(--blue-dark));
  border-radius: 20px;
  border: 2px solid var(--surface);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/* ------------------------------------------------------------
   3. UTILITY & GLOBAL ELEMENTS
   ------------------------------------------------------------ */

/* Grain overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 1100;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-dark) 35%, var(--blue) 70%, var(--blue-bright) 100%);
}

/* Skip link */
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 1200;
  background: var(--black);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 700;
}

.skip-link:focus {
  top: 14px;
  color: #fff;
}

/* Typography helpers */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-mid);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}

.eyebrow.light {
  color: var(--sky);
}

.section-title {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  letter-spacing: -.045em;
}

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

.section-title .outline {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--charcoal);
}

.section-lead {
  color: var(--grey);
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  max-width: 56ch;
  line-height: 1.8;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}

.section-head .section-lead {
  max-width: 44ch;
}

.mono {
  font-family: var(--font-mono);
}

.text-red {
  color: var(--red) !important;
}

.text-blue {
  color: var(--blue) !important;
}

/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */

/* Primary button — signature gradient red */
.btn-sd {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1.02rem 1.65rem;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  font-size: .94rem;
  letter-spacing: .005em;
  line-height: 1.2;
  color: #fff;
  background: var(--gradient-red);
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 10px 24px -10px rgba(212, 4, 4, .65),
    0 3px 0 var(--red-deep);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), filter .3s;
}

/* Shine sweep effect */
.btn-sd::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .35) 48%, transparent 72%);
  transform: translateX(-130%);
  transition: transform .8s var(--ease);
}

.btn-sd:hover {
  color: #fff;
  transform: translateY(-3px);
  filter: saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 18px 34px -12px rgba(212, 4, 4, .7),
    0 4px 0 var(--red-deep);
}

.btn-sd:hover::before {
  transform: translateX(130%);
}

.btn-sd:active {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3), 0 1px 0 var(--red-deep);
}

.btn-sd .bi {
  font-size: 1.05em;
  transition: transform .4s var(--ease);
}

.btn-sd:hover .bi-arrow-right,
.btn-sd:hover .bi-arrow-up-right {
  transform: translate(3px, -2px);
}

/* Blue variant */
.btn-sd.btn-blue {
  background: var(--gradient-blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .25),
    0 10px 24px -10px rgba(5, 97, 201, .6),
    0 3px 0 var(--blue-dark);
}

.btn-sd.btn-blue:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 18px 34px -12px rgba(5, 97, 201, .7),
    0 4px 0 var(--blue-dark);
}

/* Dark variant */
.btn-sd.btn-dark {
  background: var(--gradient-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 10px 24px -12px rgba(0, 0, 0, .6),
    0 3px 0 #000;
}

/* Size variants */
.btn-sd.btn-lg {
  padding: 1.2rem 2.1rem;
  font-size: 1.02rem;
  border-radius: 16px;
}

.btn-sd.btn-sm {
  padding: .72rem 1.1rem;
  font-size: .82rem;
  border-radius: 11px;
}

/* Ghost button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.45rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--charcoal);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 2px 0 rgba(4, 4, 4, .03);
  transition: all .35s var(--ease);
}

.btn-ghost:hover {
  color: var(--blue);
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px rgba(5, 97, 201, .5);
}

.btn-ghost .bi {
  transition: transform .35s var(--ease);
}

.btn-ghost:hover .bi {
  transform: translateX(3px);
}

/* Text link button */
.btn-link-sd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--blue);
  border: 0;
  background: none;
  padding: 0;
}

.btn-link-sd:hover {
  color: var(--red);
  gap: 12px;
}

/* Icon button */
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--charcoal);
  transition: all .3s var(--ease);
}

.icon-btn:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
  transform: rotate(-8deg);
}

/* ------------------------------------------------------------
   5. PILLS & BADGES
   ------------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--surface);
  color: var(--charcoal);
  border: 1px solid var(--line);
}

.pill .bi {
  font-size: .85rem;
}

.pill-red {
  background: #FDEDED;
  color: var(--red-dark);
  border-color: #F6CFCF;
}

.pill-blue {
  background: #EAF2FD;
  color: var(--blue-mid);
  border-color: #CBDDF7;
}

.pill-green {
  background: #E9F6EE;
  color: var(--green);
  border-color: #C5E7D1;
}

/* Live indicator dot */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  position: relative;
  flex: none;
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: pulseRing 2.4s ease-out infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(.6);
    opacity: .9;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ------------------------------------------------------------
   6. CARDS
   ------------------------------------------------------------ */
.sd-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}

.sd-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: #CFC4CB;
}

/* ------------------------------------------------------------
   7. NAVIGATION — Floating command bar
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: 18px 0;
  transition:
    padding .4s var(--ease),
    transform .65s cubic-bezier(.22, 1, .36, 1),
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    filter .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity, filter;
  transform-origin: top center;
}

.site-header.scrolled {
  padding: 6px 0;
}

/* ============================================================
   MOBILE SMART-HIDE NAVBAR — "The Curtain Retreat"
   ------------------------------------------------------------
   On screens <= 1099px the navbar is a cinematic curtain:
   • Scrolling DOWN  → it retreats upward, scales down, blurs,
     and fades out with a subtle 3D tilt.
   • Scrolling UP    → it glides back in with a spring reveal.
   • At the very top → it is always visible and pristine.

   The .nav-shell inside gets a synchronized brand-gradient
   edge glow so the exit feels intentional and expensive.

   Desktop (>= 1100px) is untouched — the shrink-on-scroll
   behaviour continues to work exactly as before.
   ============================================================ */

@media (max-width: 1099px) {
  .site-header {
    /* Slightly longer, springier transition for the retreat */
    transition:
      transform .7s cubic-bezier(.22, 1, .36, 1),
      opacity .55s cubic-bezier(.22, 1, .36, 1),
      filter .55s cubic-bezier(.22, 1, .36, 1),
      padding .4s var(--ease);
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  /* ---------- RETREAT: user is scrolling down ---------- */
  .site-header.nav-hidden {
    transform:
      translate3d(0, calc(-100% - 24px), 0)
      scale(.94)
      rotateX(-6deg);
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
    /* Snappier exit so the content feels instantly freer */
    transition:
      transform .55s cubic-bezier(.55, 0, .85, .3),
      opacity .4s cubic-bezier(.55, 0, .85, .3),
      filter .5s cubic-bezier(.55, 0, .85, .3),
      padding .4s var(--ease);
  }

  /* ---------- REVEAL: user is scrolling up ---------- */
  .site-header.nav-returning {
    transform:
      translate3d(0, 0, 0)
      scale(1)
      rotateX(0deg);
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
    /* Springier entrance — that "shock the world" feel */
    transition:
      transform .8s cubic-bezier(.34, 1.4, .5, 1),
      opacity .55s cubic-bezier(.22, 1, .36, 1),
      filter .55s cubic-bezier(.22, 1, .36, 1),
      padding .4s var(--ease);
  }

  /* ---------- The nav-shell gets a travelling brand glow ---------- */
  .site-header .nav-shell {
    position: relative;
    transition:
      box-shadow .5s var(--ease),
      border-color .5s var(--ease),
      transform .45s var(--ease);
  }

  /* A luminous brand-gradient rim appears as the curtain exits */
  .site-header.nav-hidden .nav-shell {
    box-shadow:
      0 0 0 1px rgba(252, 4, 4, .35),
      0 -8px 32px -8px rgba(252, 4, 4, .45),
      0 12px 40px -12px rgba(15, 115, 219, .35),
      inset 0 1px 0 rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .22);
  }

  /* On return, a brief celebratory pulse that fades out */
  .site-header.nav-returning .nav-shell {
    animation: navReturnPulse .9s cubic-bezier(.22, 1, .36, 1) 1;
  }

  @keyframes navReturnPulse {
    0% {
      box-shadow:
        0 0 0 1px rgba(15, 115, 219, .45),
        0 12px 40px -12px rgba(15, 115, 219, .55),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    }
    55% {
      box-shadow:
        0 0 0 1px rgba(245, 179, 1, .35),
        0 18px 50px -14px rgba(245, 179, 1, .35),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    }
    100% {
      box-shadow:
        0 12px 40px -12px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .09);
    }
  }

  /* Failsafe: when at the very top, always show the nav pristine */
  .site-header.nav-at-top {
    transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
  }

  /* The mobile drawer must NOT be affected by the retreat */
  .mobile-drawer.open ~ .site-header,
  body.drawer-open .site-header {
    transform: translate3d(0, 0, 0) scale(1) rotateX(0deg) !important;
    opacity: 1 !important;
    filter: blur(0) !important;
    pointer-events: auto !important;
  }
}

/* ---------- Respect reduced-motion users ---------- */
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.nav-hidden,
  .site-header.nav-returning {
    transition-duration: .001ms !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .site-header.nav-returning .nav-shell {
    animation: none !important;
  }
}

.nav-shell {
  max-width: 1400px;
  margin-inline: auto;
  padding: 10px 14px 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(9, 10, 14, .9);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 100px;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
  transition: all .45s var(--ease);
}

.site-header.scrolled .nav-shell {
  padding: 6px 12px 6px 10px;
  box-shadow: 0 18px 50px -14px rgba(0, 0, 0, .6);
  border-color: rgba(255, 255, 255, .2);
  transform: scale(.97);
  transform-origin: top center;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.brand-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: all .4s var(--ease-spring);
}

.brand:hover .brand-plate {
  transform: translateY(-2px) rotate(-2deg);
}

.brand-logo {
  height: 52px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  transition: all .4s var(--ease);
}

.site-header.scrolled .brand-logo {
  height: 40px;
  max-width: 130px;
}

.brand-type {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.05;
  transition: all .4s var(--ease);
}

.site-header.scrolled .brand-type {
  font-size: .95rem;
}

.brand-type small {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .28em;
  font-weight: 500;
  color: var(--silver);
  margin-top: 5px;
  transition: all .4s var(--ease);
}

.site-header.scrolled .brand-type small {
  font-size: 6px;
  letter-spacing: .2em;
  margin-top: 3px;
}

/* Navigation links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link-sd {
  position: relative;
  padding: 11px 15px;
  border-radius: 100px;
  color: rgba(255, 255, 255, .76);
  font-size: .84rem;
  font-weight: 600;
  transition: all .3s;
}

.site-header.scrolled .nav-link-sd {
  padding: 8px 12px;
  font-size: .78rem;
}

.nav-link-sd::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red-bright);
  transform: translateX(-50%) scale(0);
  transition: transform .3s var(--ease-spring);
}

.nav-link-sd:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.nav-link-sd.active {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.nav-link-sd.active::after {
  transform: translateX(-50%) scale(1);
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  transition: all .3s;
}

.site-header.scrolled .nav-login {
  padding: 8px 12px;
  font-size: .74rem;
}

.nav-login:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  transform: translateY(-2px);
}

.nav-call {
  color: rgba(255, 255, 255, .8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16);
  transition: all .3s;
}

.site-header.scrolled .nav-call {
  width: 36px;
  height: 36px;
}

.nav-call:hover {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  transform: rotate(12deg);
}

.nav-book {
  padding: .85rem 1.35rem;
  font-size: .85rem;
  border-radius: 100px;
  transition: all .4s var(--ease);
}

.site-header.scrolled .nav-book {
  padding: .7rem 1.1rem;
  font-size: .78rem;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(4, 10, 25, .97);
  backdrop-filter: blur(20px);
  padding: 100px 28px 40px;
  display: flex;
  flex-direction: column;
  transform: translateY(-102%);
  transition: transform .6s var(--ease);
  overflow-y: auto;
}

.mobile-drawer.open {
  transform: translateY(0);
}

.mobile-drawer .close-drawer {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
}

.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 20px 0 32px;
}

.drawer-links a {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.03em;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.drawer-links a span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--red-bright);
  font-weight: 500;
}

.drawer-links a:hover {
  color: var(--sky);
  padding-left: 10px;
  transition: all .3s;
}

.drawer-foot {
  margin-top: auto;
  color: var(--silver);
  font-size: .85rem;
}

.drawer-foot a {
  color: #fff;
}

/* ------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding: 170px 0 70px;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

/* ============================================================
   AURORA GLASS HERO BACKGROUND — Multi-layer luminous canvas
   Layers (bottom → top):
     1. Deep base gradient (navy → midnight → soft white)
     2. Animated aurora mesh (red/blue/gold conic blooms)
     3. Holographic light sweep (screen blend)
     4. Fine grid + dot matrix (technical texture)
     5. Floating particle dust (JS-injected)
     6. Soft vignette + edge glow
     7. Grain overlay (global)
   ============================================================ */

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    /* Layer 1 — deep luminous base */
    radial-gradient(1400px 900px at 12% -10%, #0A2B6B 0%, transparent 55%),
    radial-gradient(1200px 800px at 88% 110%, #061A44 0%, transparent 60%),
    linear-gradient(165deg, #F6F8FE 0%, #EAF0FB 38%, #E2EAF7 70%, #DDE6F4 100%);
}

/* Layer 2 — Animated aurora mesh (the show-stopper) */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  background:
    /* Red aurora bloom — top-left */
    radial-gradient(circle 520px at 18% 22%, rgba(212, 4, 4, .18) 0%, rgba(252, 4, 4, .10) 35%, transparent 70%),
    /* Blue aurora bloom — top-right */
    radial-gradient(circle 640px at 82% 18%, rgba(5, 97, 201, .22) 0%, rgba(15, 115, 219, .12) 40%, transparent 72%),
    /* Gold accent bloom — bottom center */
    radial-gradient(circle 560px at 55% 92%, rgba(245, 179, 1, .14) 0%, rgba(245, 179, 1, .06) 40%, transparent 70%),
    /* Deep blue bottom-right */
    radial-gradient(circle 700px at 92% 78%, rgba(4, 28, 92, .20) 0%, transparent 65%),
    /* Soft magenta whisper — mid-left */
    radial-gradient(circle 420px at 6% 62%, rgba(140, 4, 4, .10) 0%, transparent 68%);
  filter: blur(28px) saturate(1.15);
  animation: auroraDrift 24s ease-in-out infinite alternate;
  will-change: transform, filter;
}

@keyframes auroraDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(28px) saturate(1.15) hue-rotate(0deg);
  }
  50% {
    transform: translate3d(-2%, 1.5%, 0) scale(1.06) rotate(1.5deg);
    filter: blur(34px) saturate(1.28) hue-rotate(6deg);
  }
  100% {
    transform: translate3d(2%, -1%, 0) scale(1.02) rotate(-1deg);
    filter: blur(30px) saturate(1.2) hue-rotate(-4deg);
  }
}

/* Layer 3 — Holographic light sweep + fine grid + dot matrix */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    /* Fine technical grid */
    linear-gradient(rgba(4, 28, 92, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 28, 92, .055) 1px, transparent 1px),
    /* Dot matrix */
    radial-gradient(rgba(4, 28, 92, .10) 1px, transparent 1.2px),
    /* Holographic sweep */
    linear-gradient(115deg,
      transparent 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, .55) 48%,
      rgba(255, 255, 255, 0) 62%,
      transparent 100%);
  background-size:
    78px 78px,
    78px 78px,
    26px 26px,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0,
    -120% 0;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  animation: holoSweep 9s ease-in-out infinite, gridFloat 40s linear infinite;
  mix-blend-mode: normal;
  opacity: .85;
}

@keyframes holoSweep {
  0%   { background-position: 0 0, 0 0, 0 0, -120% 0; }
  45%  { background-position: 0 0, 0 0, 0 0, 120% 0; }
  100% { background-position: 0 0, 0 0, 0 0, 120% 0; }
}

@keyframes gridFloat {
  to { background-position: 78px 78px, 78px 78px, 26px 26px, 120% 0; }
}

/* Soft vignette + brand edge glow — adds depth without darkening text area */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    /* Top edge brand glow */
    linear-gradient(180deg, rgba(212, 4, 4, .06) 0%, transparent 12%),
    /* Bottom fade into trust strip */
    linear-gradient(0deg, rgba(4, 28, 92, .08) 0%, transparent 22%),
    /* Vignette corners */
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 28, 92, .10) 100%);
  mix-blend-mode: multiply;
}

/* Ghost typography — keep but soften for the lighter canvas */
.hero-ghost {
  position: absolute;
  right: -40px;
  top: 40px;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(12rem, 30vw, 30rem);
  line-height: 1;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(4, 28, 92, .09);
  text-shadow: 0 0 60px rgba(5, 97, 201, .06);
  user-select: none;
  pointer-events: none;
  opacity: .9;
}

/* Ensure hero content sits above all background layers */
.hero .container-sd {
  position: relative;
  z-index: 5;
}

/* Bottom of the hero softens into the booking section.
   Instead of a hard cut, the cream glow gently sinks into the
   twilight navy, as if the sky is meeting the ground. */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(221, 230, 244, .35) 45%,
    rgba(200, 215, 245, .25) 75%,
    rgba(27, 35, 80, .10) 100%
  );
  mix-blend-mode: multiply;
}

.hero-scroll-hint {
  z-index: 6;
}

/* Reduced motion — calm the aurora */
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before,
  .hero-bg::after {
    animation: none !important;
  }
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center;
}

.hero-availability {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: .76rem;
  font-weight: 600;
  color: var(--grey-dark);
  margin-bottom: 30px;
}

.hero-availability .sep {
  width: 1px;
  height: 12px;
  background: var(--line);
}

.hero-title {
  font-size: clamp(2.9rem, 6.5vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 800;
}

.hero-title .line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  position: relative;
}

.hero-title .city-index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--grey);
  align-self: flex-start;
  margin-top: 12px;
  flex: none;
}

.hero-title .dot {
  color: var(--red);
}

.hero-title .line-outline {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--charcoal);
}

.hero-title .line-red {
  color: var(--red);
  font-size: .76em;
  letter-spacing: -.05em;
}

.hero-title .line-red .city-index {
  margin-top: 8px;
}

.hero-sub {
  margin-top: 28px;
  max-width: 46ch;
  color: var(--grey-dark);
  font-size: 1.03rem;
  line-height: 1.85;
}

.hero-sub strong {
  color: var(--black);
  font-weight: 700;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
  flex-wrap: wrap;
}

.avatar-stack {
  display: flex;
  padding-left: 0;
}

.avatar-stack span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #fff;
  margin-left: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}

.avatar-stack span:first-child {
  margin-left: 0;
}

.proof-stars {
  color: var(--red);
  font-size: .72rem;
  letter-spacing: 2px;
}

.proof-text {
  font-size: .78rem;
  color: var(--grey);
  line-height: 1.5;
}

.proof-text strong {
  color: var(--black);
  font-weight: 700;
}

/* Hero stage (image frame) */
.hero-stage {
  position: relative;
  padding: 14px 0 90px;
}

.stage-frame {
  position: relative;
  border-radius: 32px 32px 120px 32px;
  overflow: hidden;
  aspect-ratio: 1.12/1;
  background: linear-gradient(150deg, #101827, #041C5C 60%, #040404);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .14);
  transform-style: preserve-3d;
}

.stage-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  filter: saturate(1.05);
}

.stage-frame:hover img {
  transform: scale(1.05);
}

.stage-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 10, 25, .25) 0%, transparent 35%, rgba(4, 10, 25, .86) 100%);
}

.stage-top {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.stage-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  padding: 8px 13px;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 600;
}

.stage-bottom {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  color: #fff;
}

.stage-route {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.stage-route .bi {
  color: var(--red-bright);
  font-size: 1.1rem;
}

.stage-meta {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(255, 255, 255, .75);
  flex-wrap: wrap;
}

.stage-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Floating boarding pass */
.boarding-pass {
  position: absolute;
  left: -26px;
  bottom: 38px;
  width: 262px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  transform: rotate(-6deg);
  transition: transform .55s var(--ease-spring);
  z-index: 2;
}

.boarding-pass:hover {
  transform: rotate(0deg) translateY(-6px);
}

.bp-top {
  padding: 16px 18px 14px;
}

.bp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--grey);
  text-transform: uppercase;
}

.bp-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}

.bp-route strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
}

.bp-route .bi {
  color: var(--red);
  font-size: 1rem;
}

.bp-perf {
  position: relative;
  height: 1px;
  border-top: 2px dashed var(--line);
  margin: 0 14px;
}

.bp-perf::before,
.bp-perf::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
}

.bp-perf::before {
  left: -24px;
}

.bp-perf::after {
  right: -24px;
}

.bp-bottom {
  padding: 14px 18px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.bp-bottom .bp-value {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--black);
  margin-top: 4px;
}

.barcode {
  display: flex;
  gap: 2px;
  height: 30px;
  align-items: stretch;
  opacity: .85;
}

.barcode i {
  display: block;
  width: 2px;
  background: var(--black);
}

.barcode i:nth-child(3n) {
  width: 4px;
}

.barcode i:nth-child(4n) {
  width: 1px;
}

/* Floating status badge */
.stage-float {
  position: absolute;
  right: -14px;
  top: 34px;
  z-index: 5;
  background: #fff;
  border-radius: 16px;
  padding: 13px 17px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
  animation: floaty 6s ease-in-out infinite;
}

.stage-float strong {
  display: block;
  font-size: .82rem;
  color: var(--black);
}

.stage-float small {
  font-size: .68rem;
  color: var(--grey);
}

@keyframes floaty {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.stage-orbit {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 1px dashed rgba(5, 97, 201, .25);
  border-radius: 50%;
  right: -40px;
  bottom: 0;
  animation: spin 40s linear infinite;
  pointer-events: none;
}

.stage-orbit::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hero countdown / departure stub */
.hero-countdown {
  position: relative;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  margin-left: auto;
  margin-right: 0;
  padding: 12px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  width: auto;
  max-width: 100%;
}

.hero-countdown .cd-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #EAF2FD;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex: none;
}

.hero-countdown .cd-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: var(--font-mono);
  color: var(--grey);
}

.hero-countdown .cd-time {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: .02em;
}

/* ------------------------------------------------------------
   9. TRUST STRIP
   ------------------------------------------------------------ */
.trust-strip {
  background: var(--black);
  position: relative;
  overflow: hidden;
  border-top: 0;
  padding-top: 2px;
}

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

.trust-item {
  position: relative;
  padding: 30px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .09);
  transition: background .4s;
}

.trust-item:last-child {
  border-right: 0;
}

.trust-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
  transition: height .4s var(--ease);
}

.trust-item:nth-child(2)::before {
  background: #343434;
}

.trust-item:nth-child(3)::before {
  background: var(--blue);
}

.trust-item:nth-child(4)::before {
  background: var(--red-dark);
}

.trust-item:hover {
  background: rgba(255, 255, 255, .04);
}

.trust-item:hover::before {
  height: 5px;
}

.trust-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(212, 4, 4, .16);
  color: #FF6B6B;
  flex: none;
  transition: transform .4s var(--ease-spring);
}

.trust-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  display: block;
}

.trust-item:nth-child(2) .trust-icon {
  background: rgba(255, 255, 255, .08);
  color: #ddd;
}

.trust-item:nth-child(3) .trust-icon {
  background: rgba(5, 97, 201, .22);
  color: #7DB8FF;
}

.trust-item:nth-child(4) .trust-icon {
  background: rgba(212, 4, 4, .16);
  color: #FF6B6B;
}

.trust-item:hover .trust-icon {
  transform: translateY(-4px) rotate(-6deg);
}

.trust-item h4 {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
}

.trust-item p {
  font-size: .74rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 3px;
}

/* ------------------------------------------------------------
   10. HERO SCROLL HINT
   ------------------------------------------------------------ */
.hero-scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 46%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10;
  color: rgba(4, 10, 25, .55);
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 600;
  animation: scrollFadeIn 1s ease 1.5s both;
  pointer-events: none;
}

.hero-scroll-hint > span {
  display: block;
  color: rgba(4, 10, 25, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.hero-scroll-hint .scroll-line {
  width: 2px;
  height: 50px;
  background: linear-gradient(180deg, var(--red-bright), transparent);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.hero-scroll-hint .scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--red-bright), transparent);
  animation: scrollDown 1.8s ease-in-out infinite;
}

@keyframes scrollDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes scrollFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 1100px) {
  .hero-scroll-hint {
    left: 50%;
    bottom: 20px;
  }
}

@media (max-width: 767px) {
  .hero-scroll-hint {
    display: none;
  }
}

/* ------------------------------------------------------------
   10.5 HERO AURORA PARTICLES
   Luminous motes layered above the aurora mesh, below content.
   ------------------------------------------------------------ */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.hero-particle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform, opacity;
  filter: blur(0.3px);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  animation: particleFloat 0s linear;
}

@keyframes particleFloat {
  /* Reserved for future per-particle animations. Currently driven by JS RAF. */
}

/* On very small screens, soften particles so they don't distract */
@media (max-width: 480px) {
  .hero-particles {
    opacity: .75;
  }
}

/* Respect reduced motion — hide the field entirely */
@media (prefers-reduced-motion: reduce) {
  .hero-particles {
    display: none;
  }
}

/* ------------------------------------------------------------
   10.6 HERO CURSOR SPOTLIGHT
   A soft brand-tinted glow that follows the cursor. Feels alive.
   ------------------------------------------------------------ */
.hero-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  background:
    radial-gradient(circle,
      rgba(5, 97, 201, 0.22) 0%,
      rgba(15, 115, 219, 0.12) 28%,
      rgba(245, 179, 1, 0.06) 52%,
      transparent 72%);
  filter: blur(18px);
  mix-blend-mode: screen;
  transition: opacity .6s var(--ease);
  will-change: transform, opacity;
}

.hero-spotlight.active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-spotlight {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero-spotlight {
    width: 380px;
    height: 380px;
  }
}

/* ------------------------------------------------------------
   11. MOVING YELLOW LANE
   ------------------------------------------------------------ */
.hero-road {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--gold, #F5B301) 0 46px, transparent 46px 92px);
  animation: roadMove 1.6s linear infinite;
  box-shadow: 0 0 20px rgba(245, 179, 1, .55), 0 2px 10px rgba(245, 179, 1, .35);
  z-index: 6;
  pointer-events: none;
}

@keyframes roadMove {
  to {
    background-position: 92px 0;
  }
}

@media (max-width: 767px) {
  .hero-road {
    height: 5px;
    background: repeating-linear-gradient(90deg, var(--gold, #F5B301) 0 34px, transparent 34px 68px);
    animation: roadMove 1.5s linear infinite;
  }
  @keyframes roadMove {
    to {
      background-position: 68px 0;
    }
  }
}

/* ------------------------------------------------------------
   12. RIBBON — Moving marquee
   ------------------------------------------------------------ */
.ribbon {
  background: linear-gradient(90deg, var(--black) 0%, var(--blue-dark) 50%, var(--black) 100%);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--red), var(--blue), var(--red)) 1;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 20px 20px;
}

.ribbon-track {
  display: flex;
  width: max-content;
  animation: marquee 90s linear infinite;
  gap: 0;
  position: relative;
  z-index: 2;
  will-change: transform;
}

.ribbon:hover .ribbon-track {
  animation-play-state: paused;
}

.ribbon-set {
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: 0;
  flex: none;
}

.ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .03em;
  color: #fff;
  white-space: nowrap;
  position: relative;
  transition: all .3s;
}

.ribbon-item i {
  font-size: 1.1rem;
  transition: transform .3s;
}

.ribbon-item:hover i {
  transform: scale(1.2) rotate(-8deg);
}

.ribbon-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold, #F5B301);
  box-shadow: 0 0 12px var(--gold, #F5B301);
}

.ribbon-item:nth-child(odd) {
  background: linear-gradient(135deg, rgba(212, 4, 4, .9), rgba(140, 4, 4, .9));
}

.ribbon-item:nth-child(even) {
  background: linear-gradient(135deg, rgba(5, 97, 201, .9), rgba(4, 28, 92, .9));
}

.ribbon-item:nth-child(3n) {
  background: linear-gradient(135deg, rgba(245, 179, 1, .85), rgba(212, 4, 4, .85));
}

.ribbon-item:nth-child(4n) {
  background: linear-gradient(135deg, rgba(22, 128, 60, .85), rgba(5, 97, 201, .85));
}

.ribbon-item .ribbon-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .85rem;
  flex: none;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ribbon-track {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  .ribbon-item {
    padding: 14px 20px;
    font-size: .78rem;
    gap: 8px;
  }
  .ribbon-item .ribbon-icon {
    width: 24px;
    height: 24px;
    font-size: .75rem;
  }
  .ribbon-track {
    animation-duration: 110s;
  }
}

@media (max-width: 480px) {
  .ribbon-track {
    animation-duration: 130s;
  }
}

/* ------------------------------------------------------------
   13. BOOKING CONSOLE
   ------------------------------------------------------------ */

/* ============================================================
   ULTRA-PREMIUM CONSOLE BACKGROUND
   A living, breathing canvas that sits behind the booking
   console. Eight layered systems cooperate to produce a
   luminous, holographic, aurora-lit scene with a signature
   route ribbon — engineered to feel like nothing else on the
   web. Every layer is GPU-composited. Zero dependencies.
   ============================================================ */

.book-section {
  position: relative;
  padding: 120px 0 140px;
  isolation: isolate;
  overflow: hidden;
  /* Softer, more luminous navy that bridges the light hero above
     with the deep footer below. Reads as "evening sky", not midnight. */
  background: linear-gradient(180deg, #1B2350 0%, #232E63 40%, #1B2350 100%);
  color: #fff;
}

/* Soft seam: the top of the booking section melts into the hero's
   luminous cream glow above, so there's no hard line between them. */
.book-section::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 160px;
  pointer-events: none;
  z-index: 8;
  background: linear-gradient(
    180deg,
    rgba(246, 248, 254, .95) 0%,
    rgba(234, 240, 251, .65) 22%,
    rgba(200, 215, 245, .25) 55%,
    transparent 100%
  );
  mix-blend-mode: screen;
}

/* Container sits above every background layer */
.book-section > .container-sd {
  position: relative;
  z-index: 20;
}

/* ---------- Background host (now a canvas aurora mount) ---------- */
.bc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Legacy .bc-base / .bc-aurora / .bc-grid / .bc-sheen / .bc-ribbon /
   .bc-orbs / .bc-orb* / .bc-particles / .bc-particle / .bc-vignette
   are no longer in the DOM — the canvas engine replaces them. */

/* ============================================================
   LAYER 1 · Base luminous gradient
   Deep navy → midnight → faint red horizon
   ============================================================ */
.bc-base {
  position: absolute;
  inset: 0;
  background:
    /* Soft blue glow — top-left (brighter than before) */
    radial-gradient(1500px 950px at 10% -5%, #2A4A9B 0%, transparent 58%),
    /* Indigo-blue glow — bottom-right */
    radial-gradient(1400px 1050px at 92% 110%, #1F3A80 0%, transparent 62%),
    /* Warm brand red whisper — centre */
    radial-gradient(950px 750px at 50% 50%, rgba(212, 4, 4, .14) 0%, transparent 62%),
    /* The main twilight gradient — lighter than midnight */
    linear-gradient(180deg, #1B2350 0%, #232E63 38%, #28356E 65%, #1B2350 100%);
}

/* ============================================================
   LAYER 2 · Aurora mesh (the living colour field)
   Five conic blooms drift, scale, and hue-shift over 22s.
   ============================================================ */
.bc-aurora {
  position: absolute;
  inset: -15%;
  z-index: 1;
  background:
    /* Warm red bloom — top-left (softened) */
    radial-gradient(circle 660px at 18% 22%, rgba(252, 74, 74, .30) 0%, rgba(212, 4, 4, .12) 40%, transparent 74%),
    /* Blue bloom — top-right (brighter, more sky-like) */
    radial-gradient(circle 780px at 82% 20%, rgba(80, 160, 240, .34) 0%, rgba(15, 115, 219, .16) 42%, transparent 76%),
    /* Gold accent — bottom centre (gentle) */
    radial-gradient(circle 640px at 55% 92%, rgba(245, 179, 1, .16) 0%, rgba(245, 179, 1, .06) 42%, transparent 72%),
    /* Deep indigo — bottom-right (lightened) */
    radial-gradient(circle 820px at 88% 78%, rgba(60, 90, 180, .35) 0%, transparent 68%),
    /* Magenta whisper — mid-left (lighter) */
    radial-gradient(circle 560px at 8% 68%, rgba(180, 60, 60, .18) 0%, transparent 70%);
  filter: blur(44px) saturate(1.15);
  animation: bcAuroraDrift 22s ease-in-out infinite alternate;
  will-change: transform, filter;
}

@keyframes bcAuroraDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(38px) saturate(1.25) hue-rotate(0deg);
  }
  50% {
    transform: translate3d(-2.5%, 1.5%, 0) scale(1.08) rotate(1.6deg);
    filter: blur(46px) saturate(1.4) hue-rotate(8deg);
  }
  100% {
    transform: translate3d(2.5%, -1.2%, 0) scale(1.04) rotate(-1.2deg);
    filter: blur(42px) saturate(1.3) hue-rotate(-6deg);
  }
}

/* ============================================================
   LAYER 3 · Animated technical grid + dot matrix
   Slow drift gives the section a "moving blueprint" feel.
   ============================================================ */
.bc-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(160, 200, 245, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, .10) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px);
  background-size:
    76px 76px,
    76px 76px,
    24px 24px;
  background-position: 0 0, 0 0, 0 0;
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 65%, transparent 100%);
  animation: bcGridDrift 60s linear infinite;
  opacity: .85;
}

@keyframes bcGridDrift {
  to {
    background-position: 76px 76px, 76px 76px, 24px 24px;
  }
}

/* ============================================================
   LAYER 4 · Holographic diagonal sheen sweep
   A single, slow light pass that reveals the whole section.
   ============================================================ */
.bc-sheen {
  position: absolute;
  inset: -20%;
  z-index: 3;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, .14) 48%,
    rgba(245, 179, 1, .10) 50%,
    rgba(255, 255, 255, .14) 52%,
    rgba(255, 255, 255, 0) 58%,
    transparent 62%,
    transparent 100%
  );
  transform: translateX(-40%) skewX(-14deg);
  animation: bcSheen 11s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: .9;
  will-change: transform;
}

@keyframes bcSheen {
  0%   { transform: translateX(-40%) skewX(-14deg); }
  45%  { transform: translateX(120%) skewX(-14deg); }
  100% { transform: translateX(120%) skewX(-14deg); }
}

/* ============================================================
   LAYER 5 · SIGNATURE ROUTE RIBBON
   Three gradient ribbons curve across the section like the
   Nelspruit → Gauteng journey itself. They breathe and pulse.
   ============================================================ */
.bc-ribbon {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: .9;
  mix-blend-mode: screen;
}

.bc-ribbon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bc-ribbon-path {
  stroke-dasharray: 40 22;
  animation: bcRibbonFlow 22s linear infinite, bcRibbonPulse 8s ease-in-out infinite;
  transform-origin: center;
}

.bc-ribbon-p1 { animation-duration: 20s, 7s;  }
.bc-ribbon-p2 { animation-duration: 28s, 9s; animation-delay: -4s, -2s; }
.bc-ribbon-p3 { animation-duration: 34s, 11s; animation-delay: -8s, -5s; }

@keyframes bcRibbonFlow {
  to { stroke-dashoffset: -620; }
}

@keyframes bcRibbonPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ============================================================
   LAYER 6 · Floating glass orbs
   Five brand-tinted glass spheres drift on independent paths.
   ============================================================ */
.bc-orbs {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.bc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.5px);
  will-change: transform;
  mix-blend-mode: screen;
}

/* Every orb shares a glassy radial gradient + soft outer halo */
.bc-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .25) 18%, transparent 42%),
    radial-gradient(circle at 50% 50%, var(--orb-core) 0%, var(--orb-edge) 62%, transparent 80%);
}

.bc-orb::after {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb-glow) 0%, transparent 65%);
  filter: blur(18px);
  opacity: .8;
}

.bc-orb-red  { --orb-core: rgba(252, 4, 4, .85);  --orb-edge: rgba(140, 4, 4, .4); --orb-glow: rgba(212, 4, 4, .45); }
.bc-orb-blue { --orb-core: rgba(15, 115, 219, .85); --orb-edge: rgba(4, 28, 92, .4); --orb-glow: rgba(5, 97, 201, .45); }
.bc-orb-gold { --orb-core: rgba(245, 179, 1, .85);  --orb-edge: rgba(212, 4, 4, .35); --orb-glow: rgba(245, 179, 1, .4); }
.bc-orb-sky  { --orb-core: rgba(102, 163, 224, .85); --orb-edge: rgba(4, 76, 180, .35); --orb-glow: rgba(102, 163, 224, .4); }
.bc-orb-warm { --orb-core: rgba(255, 107, 107, .8);  --orb-edge: rgba(212, 4, 4, .3); --orb-glow: rgba(255, 107, 107, .4); }

/* Individual placement, size & drift */
.bc-orb-red {
  width: 260px; height: 260px;
  top: 6%; left: 4%;
  animation: bcOrbDrift1 26s ease-in-out infinite alternate;
}
.bc-orb-blue {
  width: 340px; height: 340px;
  top: 12%; right: 2%;
  animation: bcOrbDrift2 32s ease-in-out infinite alternate;
}
.bc-orb-gold {
  width: 190px; height: 190px;
  bottom: 8%; left: 12%;
  animation: bcOrbDrift3 24s ease-in-out infinite alternate;
}
.bc-orb-sky {
  width: 300px; height: 300px;
  bottom: 4%; right: 8%;
  animation: bcOrbDrift4 30s ease-in-out infinite alternate;
}
.bc-orb-warm {
  width: 150px; height: 150px;
  top: 44%; left: 48%;
  animation: bcOrbDrift5 22s ease-in-out infinite alternate;
}

@keyframes bcOrbDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(120px, 80px, 0) scale(1.15); }
}
@keyframes bcOrbDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-160px, 60px, 0) scale(1.1); }
}
@keyframes bcOrbDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(90px, -110px, 0) scale(1.2); }
}
@keyframes bcOrbDrift4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-80px, -140px, 0) scale(1.08); }
}
@keyframes bcOrbDrift5 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-60px, 60px, 0) scale(1.25); }
}

/* ============================================================
   LAYER 7 · Constellation particles (JS-injected spans)
   ============================================================ */
.bc-particles {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  mix-blend-mode: screen;
}

.bc-particle {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  filter: blur(0.4px);
}

/* ============================================================
   LAYER 8 · Vignette & edge glow
   Keeps the centre luminous and the edges cinematic.
   ============================================================ */
.bc-vignette {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  /* Softer vignette — no more black edges. The section fades
     gently into itself rather than being swallowed by darkness. */
  background:
    radial-gradient(140% 100% at 50% 45%, transparent 55%, rgba(30, 45, 100, .35) 100%),
    linear-gradient(180deg,
      rgba(27, 35, 80, .55) 0%,
      transparent 15%,
      transparent 85%,
      rgba(27, 35, 80, .55) 100%);
  mix-blend-mode: multiply;
}

/* ============================================================
   CONSOLE SURFACES — re-skin for the dark canvas
   The console and its inner surfaces become a glassy, luminous
   island floating on the aurora scene.
   ============================================================ */

.console {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, .99);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 30px;
  box-shadow:
    /* Soft blue shadow instead of a black one — feels lifted, not carved out */
    0 40px 100px -32px rgba(10, 20, 65, .55),
    0 22px 55px -22px rgba(15, 115, 219, .22),
    0 8px 22px -12px rgba(212, 4, 4, .18),
    0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.console::before {
  /* Signature brand bar above the console */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red) 0%, var(--gold) 33%, var(--blue) 66%, var(--red) 100%);
  background-size: 200% 100%;
  animation: bcSignatureBar 6s linear infinite;
  z-index: 2;
}

@keyframes bcSignatureBar {
  to { background-position: 200% 0; }
}

/* Booking-section heading text must be light on the dark canvas */
.book-section .section-title { color: #fff; }
.book-section .section-title .accent { color: var(--gold); }
.book-section .eyebrow { color: var(--sky); }
.book-section .section-lead { color: rgba(255, 255, 255, .7); }

/* Booking-pill strip at the bottom of the console */
.book-section .pill {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.book-section .pill.pill-blue {
  background: rgba(15, 115, 219, .18);
  border-color: rgba(102, 163, 224, .35);
  color: #B9D8FF;
}

/* ============================================================
   DEPARTURE BOARD — inherit the dark canvas language
   ============================================================ */
.board-section {
  position: relative;
  padding: 100px 0 120px;
  /* Same twilight family as the console — one shade deeper so it
     reads as a natural continuation, not a different world. */
  background: linear-gradient(180deg, #1B2350 0%, #202A5A 50%, #1B2350 100%);
  color: #fff;
  overflow: hidden;
}

/* Soft top seam: the boarding console above glows gently into
   this section, avoiding a hard line. */
.board-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(35, 46, 99, .9) 0%,
    rgba(35, 46, 99, .4) 45%,
    transparent 100%
  );
}

/* A quieter sibling of the console background — same family,
   fewer layers, so the section reads as a continuation. */
.board-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(950px 660px at 12% 15%, rgba(252, 74, 74, .22) 0%, transparent 62%),
    radial-gradient(950px 660px at 88% 85%, rgba(80, 160, 240, .26) 0%, transparent 64%),
    radial-gradient(760px 540px at 50% 50%, rgba(245, 179, 1, .10) 0%, transparent 66%),
    linear-gradient(180deg, #1B2350 0%, #202A5A 50%, #1B2350 100%);
  filter: blur(2px);
  animation: bcAuroraDrift 30s ease-in-out infinite alternate;
}

.board-section > .container-sd {
  position: relative;
  z-index: 5;
}

.board-section .section-title { color: #fff; }
.board-section .section-title .accent { color: var(--gold); }
.board-section .eyebrow { color: var(--sky); }
.board-section .section-lead { color: rgba(255, 255, 255, .68); }

.board {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -34px rgba(4, 12, 45, .55),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.board-row {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}

.board-row:hover { background: rgba(255, 255, 255, .08); }
.board-row:last-child { border-bottom: 0; }

.board-time { color: #fff; }
.board-time small { color: rgba(255, 255, 255, .45); }
.board-path { color: rgba(255, 255, 255, .9); }
.board-path small { color: rgba(255, 255, 255, .55); }
.board-seats span { color: rgba(255, 255, 255, .7) !important; }

.board-tab {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .75);
}

.board-tab.active {
  background: #fff;
  color: var(--black);
  border-color: #fff;
}

.board-tab:hover:not(.active) {
  border-color: var(--sky);
  color: #fff;
}

.board-section p[style*="color:var(--grey)"] {
  color: rgba(255, 255, 255, .45) !important;
}

.seats-bar { background: rgba(255, 255, 255, .08); }

/* Section-head for the board should sit on white text */
.board-section .section-head { position: relative; z-index: 5; }

/* ============================================================
   Reduced motion — collapse the motion, keep the beauty
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bc-aurora,
  .bc-grid,
  .bc-sheen,
  .bc-ribbon-path,
  .bc-orb,
  .console::before,
  .board-section::before {
    animation: none !important;
  }
  .bc-sheen { opacity: .35; }
}

/* ============================================================
   Mobile — dial it down so phones stay smooth
   ============================================================ */
@media (max-width: 767px) {
  .book-section { padding: 80px 0 100px; }
  .board-section { padding: 70px 0 90px; }

  .bc-aurora { filter: blur(34px) saturate(1.1); }

  .bc-sheen { animation-duration: 16s; opacity: .5; }

  .bc-orb-red, .bc-orb-blue,
  .bc-orb-gold, .bc-orb-sky, .bc-orb-warm {
    width: 140px; height: 140px;
    filter: blur(1.5px);
  }
  .bc-orb-sky { width: 200px; height: 200px; }

  .bc-ribbon { opacity: .6; }

  .bc-particles { opacity: .75; }

  /* Soften the seam further on small screens */
  .book-section::after { height: 110px; }
  .board-section::after { height: 90px; }
}

.console.flash {
  animation: consoleFlash 1.2s ease;
}

@keyframes consoleFlash {
  0%, 100% {
    box-shadow: var(--shadow-lg);
  }
  40% {
    box-shadow: 0 0 0 6px rgba(212, 4, 4, .18), var(--shadow-lg);
  }
}

.console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 30px;
  background: var(--gradient-dark);
  color: #fff;
  flex-wrap: wrap;
}

.console-head h3 {
  color: #fff;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 11px;
}

.console-head h3 .bi {
  color: var(--red-bright);
}

.seg {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100px;
  padding: 4px;
}

.seg button {
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  padding: 9px 20px;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 700;
  transition: color .3s;
}

.seg button[aria-pressed="true"] {
  color: #fff;
}

.seg-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 100px;
  background: var(--gradient-red);
  box-shadow: 0 4px 12px rgba(212, 4, 4, .4);
  transition: transform .45s var(--ease);
}

.seg[data-mode="return"] .seg-indicator {
  transform: translateX(100%);
}

.console-body {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 0;
}

.console-form {
  padding: 32px;
}

.direction-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 24px;
}

.swap-btn {
  width: 44px;
  height: 54px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s var(--ease);
}

.swap-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.swap-btn:hover .bi {
  transform: rotate(180deg);
}

.swap-btn .bi {
  transition: transform .5s var(--ease);
}

/* Form fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  min-width: 0;
}

.field label,
.field .field-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
  display: flex;
  align-items: center;
  gap: 6px;
}

.field label .bi {
  font-size: 11px;
  color: var(--blue);
}

.control {
  width: 100%;
  height: 54px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FBFAFB;
  color: var(--black);
  font-size: .92rem;
  font-weight: 600;
  transition: all .3s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.control:hover {
  border-color: var(--silver);
}

.control:focus {
  outline: none;
  border-color: var(--blue-bright);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(15, 115, 219, .13);
}

.control:disabled {
  background: var(--surface);
  color: var(--grey-dark);
  cursor: not-allowed;
  border-style: dashed;
}

select.control {
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23787980'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

textarea.control {
  height: auto;
  min-height: 110px;
  padding: 14px 15px;
  line-height: 1.7;
  resize: vertical;
}

input[type="date"].control {
  cursor: pointer;
  min-width: 0;
}

input[type="date"].control::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
}

/* ============================================================
   SATURDAY BLOCK — visual cue for closed days
   ============================================================ */
input[type="date"].control[data-closed="true"] {
  border-color: var(--red);
  background: #FFF7F7;
  box-shadow: 0 0 0 4px rgba(212, 4, 4, .12);
}

input[type="date"].control[data-closed="true"]::after {
  content: "Saturdays closed";
}

/* Small closed-day badge for the fare-summary zone row */
.fs-row.zone-row {
  color: #FFD5A6;
}

.fs-row.zone-row strong {
  color: #FFD5A6;
}

/* Saturday badge on the ticket grid */
.ticket-saturday-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #FDEDED;
  border: 1px solid #F6CFCF;
  color: var(--red-dark);
  font-size: .78rem;
  font-weight: 700;
  margin-top: 14px;
}

.ticket-saturday-note .bi {
  font-size: 1rem;
}

.field-hint {
  font-size: .72rem;
  color: var(--grey);
  line-height: 1.5;
}

.was-validated .control:invalid,
.control.is-invalid {
  border-color: var(--red);
  background: #FFF7F7;
}

.invalid-feedback {
  font-size: .72rem;
  color: var(--red-dark);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-grid.three {
  grid-template-columns: 1.1fr 1fr 1fr;
}

/* Stepper (passenger count) */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FBFAFB;
  padding: 5px;
}

.stepper button {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
}

.stepper button:hover:not(:disabled) {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

.stepper button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.stepper output {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 30px;
  text-align: center;
  color: var(--black);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-text-fill-color: var(--black);
  opacity: 1;
}

/* Checkbox line */
.check-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .82rem;
  color: var(--grey-dark);
  line-height: 1.6;
  cursor: pointer;
}

.check-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  margin-top: 2px;
  flex: none;
  cursor: pointer;
}

.console-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: .75rem;
  color: var(--grey);
}

.console-note .bi {
  color: var(--green);
}

/* Fare summary — blue ticket */
.fare-summary {
  position: relative;
  padding: 32px 28px;
  color: #fff;
  background: var(--gradient-blue);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
}

.fare-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 22px 22px;
}

.fare-summary > * {
  position: relative;
}

.fs-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}

.fs-route {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-top: 12px;
}

.fs-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: rgba(255, 255, 255, .6);
  font-size: .75rem;
  font-family: var(--font-mono);
}

.fs-line::before {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, .25);
}

.fs-line::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, .25);
}

.fs-rows {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: .83rem;
}

.fs-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, .82);
}

.fs-row strong {
  color: #fff;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: .85rem;
}

.fs-row.discount strong {
  color: #9EE7B8;
}

/* Zone surcharge row */
.fs-row.zone-row strong {
  color: #FFD5A6;
}

/* Saturday closed pill (used in the hero countdown) */
.cd-label .sat-closed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(212, 4, 4, .18);
  color: #FF9B9B;
  font-size: .58rem;
  letter-spacing: .08em;
  border: 1px solid rgba(212, 4, 4, .25);
}

.fs-divider {
  border-top: 2px dashed rgba(255, 255, 255, .25);
  margin: 22px -28px;
  position: relative;
}

.fs-divider::before,
.fs-divider::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
}

.fs-divider::before {
  left: -11px;
}

.fs-divider::after {
  right: -11px;
}

.fs-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.fs-total .amount {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
}

.fs-total .per {
  font-size: .72rem;
  color: rgba(255, 255, 255, .65);
  margin-top: 6px;
}

.fs-cta {
  width: 100%;
  justify-content: space-between;
}

.fs-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  color: rgba(255, 255, 255, .85);
  font-size: .8rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  padding: 12px;
  transition: all .3s;
}

.fs-alt:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.fs-fine {
  font-size: .68rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 16px;
  line-height: 1.6;
  text-align: center;
}

/* ============================================================
   S'DINGO · THE DEPARTURE FORM — flagship booking UI system
   ------------------------------------------------------------
   The mother form. Dark glass on aurora. Boarding-pass labels,
   luminous inputs, hero address cards, tactile stepper,
   departure-slot date field, boarding action bar.
   Every field preserves its original id / name / value.
   ============================================================ */

/* ---------- 1 · FORM SHELL ---------- */
/* The form panel now uses the SAME solid blue gradient as the
   .fare-summary on the right. The console becomes a matched
   pair: dark-glass form on the left, solid-blue receipt on the
   right — the classic premium booking layout. */
.console-form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 34px 30px;
  border-radius: 26px;
  background: var(--gradient-blue);
  color: #fff;
  /* Subtle dot matrix — matches the fare-summary's own texture */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0),
    var(--gradient-blue);
  background-size: 22px 22px, 100% 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 30px 70px -30px rgba(4, 12, 45, 0.7);
}

/* Soft top seam — the same red-gold-blue rule across the head */
.console-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  right: 34px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg,
    rgba(252, 4, 4, 0.75) 0%,
    rgba(245, 179, 1, 0.65) 45%,
    rgba(15, 115, 219, 0.75) 100%);
  opacity: 0.95;
  z-index: 2;
}

/* Ensure every direct child stacks above the texture */
.console-form > * {
  position: relative;
  z-index: 1;
}
/* Soft top seam — a faint red-gold-blue rule across the form head */
.console-form::before {
  content: "";
  position: absolute;
  top: 0; left: 34px; right: 34px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg,
    rgba(252, 4, 4, 0.65) 0%,
    rgba(245, 179, 1, 0.55) 45%,
    rgba(15, 115, 219, 0.65) 100%);
  opacity: 0.9;
}

/* ---------- 2 · FIELD WRAPPER ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-width: 0;
}

/* ---------- 3 · BOARDING-PASS LABEL ---------- */
/* Each label becomes a chip pinned to the top-left of its field */
.field > label,
.field .field-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px 6px 10px;
  margin-bottom: 2px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.4s cubic-bezier(.22, 1, .36, 1);
}

.field > label .bi,
.field .field-label .bi {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  color: #fff;
  background: linear-gradient(140deg, #FC0404, #8C0404);
  box-shadow: 0 0 0 2px rgba(252, 4, 4, 0.22);
  transition: all 0.4s cubic-bezier(.22, 1, .36, 1);
}

/* Icon-color variants — data-icon on the label */
.field > label[data-icon="blue"] .bi { background: linear-gradient(140deg, #0F73DB, #041C5C); box-shadow: 0 0 0 2px rgba(15, 115, 219, 0.22); }
.field > label[data-icon="gold"] .bi { background: linear-gradient(140deg, #F5B301, #8A5300); box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.22); color: #2B1A00; }
.field > label[data-icon="green"] .bi { background: linear-gradient(140deg, #1FA04E, #16803C); box-shadow: 0 0 0 2px rgba(31, 160, 78, 0.22); }
.field > label[data-icon="sky"] .bi { background: linear-gradient(140deg, #66A3E0, #0561C9); box-shadow: 0 0 0 2px rgba(102, 163, 224, 0.22); }

/* Focus state — the chip "lights up" when its field is focused */
.field:focus-within > label .bi {
  transform: rotate(-6deg) scale(1.12);
}
.field:focus-within > label {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.10);
}

/* ---------- 4 · LUMINOUS INPUTS ---------- */
.control {
  width: 100%;
  height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 0.35s cubic-bezier(.22, 1, .36, 1);
  appearance: none;
  -webkit-appearance: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.control::placeholder {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
}

.control:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.05) 100%);
}

/* The signature focus: a 3-stop gradient border animates on */
.control:focus {
  outline: none;
  border-color: transparent;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 100%) padding-box,
    linear-gradient(135deg,
      #FC0404 0%,
      #F5B301 45%,
      #0F73DB 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 4px rgba(15, 115, 219, 0.14),
    0 12px 30px -12px rgba(15, 115, 219, 0.45);
}

.control:disabled {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
  border-style: dashed;
  cursor: not-allowed;
}

/* Select — custom chevron */
select.control {
  padding-right: 44px;
  cursor: pointer;
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.03) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23A9B5CC'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 16px center;
  background-size: 100% 100%, 14px 14px;
}

select.control option {
  background: #0A1430;
  color: #fff;
}

/* Date input — replace the calendar icon with a luminous one */
input[type="date"].control {
  position: relative;
  cursor: pointer;
  color-scheme: dark;
}
input[type="date"].control::-webkit-calendar-picker-indicator {
  opacity: 0.75;
  cursor: pointer;
  filter: invert(1) brightness(1.4) saturate(0.5) hue-rotate(180deg);
}

/* Closed-day guard (Saturday block) — keeps its red ring but on dark */
input[type="date"].control[data-closed="true"] {
  border-color: #FC0404;
  background:
    linear-gradient(180deg,
      rgba(252, 4, 4, 0.14) 0%,
      rgba(140, 4, 4, 0.08) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 4px rgba(252, 4, 4, 0.16);
}

/* Textarea on dark */
textarea.control {
  height: auto;
  min-height: 120px;
  padding: 16px 18px;
  line-height: 1.7;
  resize: vertical;
  font-weight: 500;
}

/* ---------- 5 · FIELD HINT ---------- */
.field-hint {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
  padding-left: 4px;
}

/* ---------- 6 · DIRECTION ROW (From / Swap / To) ---------- */
.direction-row {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 26px;
}

.swap-btn {
  width: 52px;
  height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.5s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.swap-btn:hover {
  background: linear-gradient(140deg, #D40404, #8C0404);
  border-color: transparent;
  transform: rotate(180deg) scale(1.05);
  box-shadow:
    0 12px 26px -10px rgba(212, 4, 4, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---------- 7 · FORM GRID ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.form-grid.three {
  grid-template-columns: 1.1fr 1fr 1fr;
}

/* ---------- 8 · TACTILE STEPPER ---------- */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 4px;
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stepper button {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all 0.4s cubic-bezier(.34, 1.56, .64, 1);
}

.stepper button:hover:not(:disabled) {
  background: linear-gradient(140deg, #FC0404, #8C0404);
  border-color: transparent;
  transform: scale(1.08);
  box-shadow: 0 10px 22px -8px rgba(252, 4, 4, 0.6);
}

.stepper button:active:not(:disabled) {
  transform: scale(0.94);
}

.stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.stepper output {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  min-width: 34px;
  text-align: center;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(.34, 1.56, .64, 1);
  -webkit-text-fill-color: #fff;
}

/* Pop animation when the count changes — triggered by JS adding .is-bumping */
.stepper output.is-bumping {
  animation: stepperBump 0.5s cubic-bezier(.34, 1.56, .64, 1);
  color: #F5B301;
  -webkit-text-fill-color: #F5B301;
}

@keyframes stepperBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- 9 · CHECK LINE (luggage / child) ---------- */
.check-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.22, 1, .36, 1);
}

.check-line:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.20);
}

.check-line:has(input:checked) {
  background: linear-gradient(140deg,
    rgba(15, 115, 219, 0.18),
    rgba(4, 28, 92, 0.18));
  border-color: rgba(102, 163, 224, 0.4);
  color: #fff;
}

.check-line input {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  accent-color: #FC0404;
  flex: none;
  cursor: pointer;
}

/* ---------- 10 · HERO ADDRESS CARDS ---------- */
.sd-address-field {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
  padding: 22px;
  border-radius: 22px;
  /* On the solid blue panel, the address field becomes a
     DARKER inset surface so the two address cards stand out.
     This reads as "a dedicated address zone" inside the form. */
  background:
    radial-gradient(120% 100% at 0% 0%,
      rgba(252, 4, 4, 0.14) 0%, transparent 60%),
    radial-gradient(120% 100% at 100% 100%,
      rgba(15, 115, 219, 0.14) 0%, transparent 60%),
    rgba(4, 12, 45, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.sd-address-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sd-address-label i {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(140deg, #FC0404, #8C0404);
  color: #fff;
  font-size: 10px;
  box-shadow: 0 0 0 3px rgba(252, 4, 4, 0.14);
}
.sd-address-label-hint {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9EE7B8;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(22, 128, 60, 0.18);
  border: 1px solid rgba(158, 231, 184, 0.28);
}

/* Base trigger — a large, dense, gorgeous card */
.sd-address-trigger {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 60px 1fr 40px 0px;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1.5px dashed rgba(255, 255, 255, 0.32);
  /* On the darker inset, the trigger becomes slightly BRIGHTER
     glass so the two address cards pop forward. */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 100%);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
  min-width: 0;
  width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 12px -6px rgba(0, 0, 0, 0.3);
}

.sd-address-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg,
    rgba(252, 4, 4, 0.90) 0%,
    rgba(140, 4, 4, 0.90) 45%,
    rgba(4, 28, 92, 0.95) 100%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(.22, 1, .36, 1);
}

/* Blue variant for drop-off */
.sd-address-trigger-blue::before {
  background: linear-gradient(140deg,
    rgba(15, 115, 219, 0.90) 0%,
    rgba(5, 97, 201, 0.90) 45%,
    rgba(4, 28, 92, 0.95) 100%);
}

.sd-address-trigger:hover,
.sd-address-trigger:focus-visible {
  transform: translateY(-3px);
  border-style: solid;
  border-color: transparent;
  box-shadow:
    0 22px 44px -18px rgba(252, 4, 4, 0.55),
    0 8px 20px -10px rgba(4, 12, 45, 0.5);
  outline: none;
}
.sd-address-trigger-blue:hover,
.sd-address-trigger-blue:focus-visible {
  box-shadow:
    0 22px 44px -18px rgba(15, 115, 219, 0.55),
    0 8px 20px -10px rgba(4, 12, 45, 0.5);
}

.sd-address-trigger:hover::before,
.sd-address-trigger:focus-visible::before { opacity: 1; }

/* Filled state — triggered by JS adding .is-set */
.sd-address-trigger.is-set {
  border-style: solid;
  border-color: rgba(158, 231, 184, 0.42);
  background:
    linear-gradient(180deg,
      rgba(158, 231, 184, 0.14) 0%,
      rgba(22, 128, 60, 0.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 18px -8px rgba(31, 160, 78, 0.45);
}

.sd-address-trigger.is-set::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1.5px solid transparent;
  background:
    linear-gradient(140deg,
      #FC0404 0%,
      #F5B301 50%,
      #0F73DB 100%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.65;
}

.sd-address-trigger > * { position: relative; z-index: 1; }

/* Icon orb */
.sd-address-trigger-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: linear-gradient(140deg, #FC0404, #540202);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 24px -10px rgba(252, 4, 4, 0.55);
  transition: all 0.55s cubic-bezier(.34, 1.56, .64, 1);
  flex: none;
}

.sd-address-trigger-blue .sd-address-trigger-icon {
  background: linear-gradient(140deg, #0F73DB, #041C5C);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 24px -10px rgba(15, 115, 219, 0.55);
}

.sd-address-trigger:hover .sd-address-trigger-icon {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Live pin pulse inside the icon orb */
.sd-address-trigger-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
}
.sd-address-trigger:hover .sd-address-trigger-icon::after {
  animation: pinPulse 1.6s ease-out infinite;
  opacity: 1;
}
@keyframes pinPulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Trigger body */
.sd-address-trigger-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sd-address-trigger-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sd-address-trigger:hover .sd-address-trigger-tag {
  color: rgba(255, 255, 255, 0.8);
}

.sd-address-trigger-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.35s;
}

.sd-address-trigger-meta {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.35s;
}
.sd-address-trigger:hover .sd-address-trigger-meta { color: rgba(255, 255, 255, 0.85); }

/* Arrow */
.sd-address-trigger-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.45s cubic-bezier(.34, 1.56, .64, 1);
  flex: none;
}
.sd-address-trigger:hover .sd-address-trigger-arrow {
  background: #fff;
  color: #0A1430;
  transform: rotate(45deg) scale(1.05);
}

/* Check pill — appears when address is set */
.sd-address-trigger-check {
  width: 0;
  height: 24px;
  overflow: hidden;
  border-radius: 100px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #1FA04E, #16803C);
  color: #fff;
  font-size: 0.82rem;
  transition:
    width 0.5s cubic-bezier(.34, 1.56, .64, 1),
    padding 0.4s;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sd-address-trigger-check:not([hidden]) { width: 24px; padding: 0 4px; }
.sd-address-trigger-check-blue:not([hidden]) {
  background: linear-gradient(140deg, #0F73DB, #041C5C);
}

/* Live row: hint + zone badge */
.sd-address-live-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.zone-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(.22, 1, .36, 1);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.12);
}

.zone-badge[data-zone="1"] {
  background: rgba(22, 128, 60, 0.18);
  border-color: rgba(158, 231, 184, 0.32);
  color: #9EE7B8;
}
.zone-badge[data-zone="2"] {
  background: rgba(245, 179, 1, 0.18);
  border-color: rgba(245, 179, 1, 0.38);
  color: #FFD966;
}

/* ---------- 11 · BOARDING ACTION BAR ---------- */
.console-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

.console-note .bi {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(22, 128, 60, 0.2);
  color: #9EE7B8;
  font-size: 0.72rem;
  flex: none;
  box-shadow: 0 0 0 3px rgba(22, 128, 60, 0.1);
}

/* ---------- 12 · RESPONSIVE — every breakpoint ---------- */
@media (max-width: 1024px) {
  .console-form { padding: 30px 26px 26px; }
  .form-grid.three { grid-template-columns: 1fr 1fr; }
  .form-grid.three > .field:first-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .console-form {
    padding: 24px 18px 22px;
    border-radius: 20px;
  }
  .console-form::before { left: 18px; right: 18px; }

  .direction-row {
    grid-template-columns: 1fr 44px 1fr;
    gap: 8px;
  }
  .swap-btn { width: 44px; height: 54px; font-size: 1rem; }
  .control { height: 54px; font-size: 0.92rem; }

  .form-grid,
  .form-grid.three {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Address triggers stack nicely */
  .sd-address-field { padding: 16px; gap: 12px; }
  .sd-address-label-hint { display: none; }

  .sd-address-trigger {
    grid-template-columns: 48px 1fr 32px 0px;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 14px;
  }
  .sd-address-trigger-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 1.2rem;
  }
  .sd-address-trigger-arrow {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .sd-address-trigger-value { font-size: 0.92rem; }
  .sd-address-trigger-meta { font-size: 0.7rem; }

  .stepper { height: 54px; }
  .stepper button { width: 40px; height: 40px; }
  .stepper output { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .console-form { padding: 22px 14px 18px; border-radius: 18px; }
  .console-form::before { left: 14px; right: 14px; }

  .field > label,
  .field .field-label {
    font-size: 9px;
    padding: 5px 10px 5px 8px;
    letter-spacing: 0.16em;
  }
  .field > label .bi { width: 16px; height: 16px; font-size: 8px; }

  .sd-address-trigger {
    grid-template-columns: 44px 1fr 30px 0px;
    padding: 12px;
    gap: 10px;
  }
  .sd-address-trigger-icon { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 12px; }
  .sd-address-trigger-value { font-size: 0.88rem; }
}

/* ---------- 13 · REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .control, .swap-btn, .stepper button, .stepper output,
  .sd-address-trigger, .sd-address-trigger-icon,
  .sd-address-trigger-arrow, .sd-address-trigger-check,
  .field > label, .field > label .bi,
  .check-line {
    transition-duration: 0.001ms !important;
  }
  .sd-address-trigger:hover,
  .sd-address-trigger-icon,
  .stepper button:hover:not(:disabled),
  .swap-btn:hover {
    transform: none !important;
  }
  .stepper output.is-bumping { animation: none !important; }
  .sd-address-trigger-icon::after { animation: none !important; }
}

/* ============================================================
   S'DINGO · BOOKING MODAL — same glass language as the form
   ============================================================ */

#bookingModal .modal-content {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(165deg,
      #0A1430 0%,
      #101E4A 45%,
      #0A1430 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  color: #fff;
  overflow: hidden;
  box-shadow:
    0 60px 140px -40px rgba(0, 0, 0, 0.85),
    0 20px 50px -20px rgba(5, 97, 201, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Aurora bloom behind the modal */
#bookingModal .modal-content::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 460px at 12% 18%, rgba(252, 74, 74, 0.32) 0%, transparent 65%),
    radial-gradient(circle 520px at 88% 82%, rgba(15, 115, 219, 0.35) 0%, transparent 65%),
    radial-gradient(circle 380px at 50% 100%, rgba(245, 179, 1, 0.18) 0%, transparent 65%);
  filter: blur(46px);
  animation: modalAurora 22s ease-in-out infinite alternate;
}

@keyframes modalAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

#bookingModal .modal-content > * {
  position: relative;
  z-index: 1;
}

/* Brand strip stays, but animates through the triad */
#bookingModal .modal-strip {
  height: 4px;
  background: linear-gradient(90deg,
    #FC0404 0%,
    #F5B301 33%,
    #0F73DB 66%,
    #FC0404 100%);
  background-size: 200% 100%;
  animation: modalStrip 6s linear infinite;
}
@keyframes modalStrip { to { background-position: 200% 0; } }

/* Modal head */
#bookingModal .modal-inner-head {
  padding: 30px 32px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

#bookingModal .modal-inner-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1.1;
}

#bookingModal .modal-inner-head p {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.68);
  margin-top: 8px;
  line-height: 1.65;
}

#bookingModal .modal-inner-head .eyebrow {
  color: #9EE7B8;
  margin-bottom: 10px;
}
#bookingModal .modal-inner-head .eyebrow::before {
  background: #9EE7B8;
}

#bookingModal .modal-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: all 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
#bookingModal .modal-close:hover {
  background: #FC0404;
  border-color: #FC0404;
  color: #fff;
  transform: rotate(90deg) scale(1.05);
}

/* Booking recap — the receipt-style summary */
#bookingModal .booking-recap {
  margin: 22px 32px 0;
  padding: 20px 22px;
  border-radius: 18px;
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#bookingModal .booking-recap .br-route {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
}

#bookingModal .booking-recap .br-meta {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  line-height: 1.5;
}

#bookingModal .booking-recap .br-price {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #fff 0%, #FFD966 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* Body */
#bookingModal .modal-body {
  padding: 26px 32px 30px;
}

/* Inputs inside the modal — same dark-glass controls */
#bookingModal .control {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#bookingModal .control:focus {
  border-color: transparent;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 100%) padding-box,
    linear-gradient(135deg, #FC0404, #F5B301 45%, #0F73DB 100%) border-box;
}

/* Field labels in the modal — chips like the console */
#bookingModal .field > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 11px 5px 9px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 2px;
}
#bookingModal .field > label .bi {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  color: #fff;
  background: linear-gradient(140deg, #FC0404, #8C0404);
  box-shadow: 0 0 0 2px rgba(252, 4, 4, 0.22);
}

/* Address confirm block on dark */
#bookingModal .sd-confirm-addresses {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

#bookingModal .sd-confirm-address-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#bookingModal .sd-confirm-address-row-blue {
  border-color: rgba(102, 163, 224, 0.28);
  background:
    linear-gradient(180deg,
      rgba(15, 115, 219, 0.10) 0%,
      rgba(4, 28, 92, 0.10) 100%);
}

#bookingModal .sd-confirm-address-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  background: linear-gradient(140deg, #FC0404, #540202);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 20px -8px rgba(252, 4, 4, 0.55);
  flex: none;
}

#bookingModal .sd-confirm-address-ico-blue {
  background: linear-gradient(140deg, #0F73DB, #041C5C);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 20px -8px rgba(15, 115, 219, 0.55);
}

#bookingModal .sd-confirm-address-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#bookingModal .sd-confirm-address-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

#bookingModal .sd-confirm-address-body strong {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bookingModal .sd-confirm-address-body small {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bookingModal .sd-confirm-address-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.22, 1, .36, 1);
  flex: none;
}
#bookingModal .sd-confirm-address-edit:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}

/* Consent check-line inside modal */
#bookingModal .check-line {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.82);
}
#bookingModal .check-line:has(input:checked) {
  background: linear-gradient(140deg,
    rgba(15, 115, 219, 0.18),
    rgba(4, 28, 92, 0.18));
  border-color: rgba(102, 163, 224, 0.4);
  color: #fff;
}
#bookingModal .btn-link-sd { color: #66A3E0; }
#bookingModal .btn-link-sd:hover { color: #9EE7B8; }

/* Modal footer */
#bookingModal .modal-footer {
  padding: 0 32px 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
}

#bookingModal .modal-footer .btn-ghost {
  flex: 0 1 auto;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
#bookingModal .modal-footer .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

#bookingModal .modal-footer .btn-sd {
  flex: 1 1 auto;
  min-width: 180px;
}

/* Modal scroll area */
#bookingModal .modal-dialog-scrollable .modal-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
#bookingModal .modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 6px;
}
#bookingModal .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 100px;
}

/* Responsive modal */
@media (max-width: 767px) {
  #bookingModal .modal-inner-head {
    padding: 22px 20px 0;
    flex-direction: row;
    align-items: flex-start;
  }
  #bookingModal .modal-inner-head h2 { font-size: 1.35rem; }
  #bookingModal .booking-recap {
    margin: 18px 20px 0;
    padding: 16px 16px;
  }
  #bookingModal .booking-recap .br-price { font-size: 1.5rem; }
  #bookingModal .modal-body { padding: 20px 20px 24px; }
  #bookingModal .modal-footer { padding: 0 20px 22px; }
  #bookingModal .modal-footer .btn-sd,
  #bookingModal .modal-footer .btn-ghost {
    width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  #bookingModal .modal-inner-head { padding: 20px 16px 0; }
  #bookingModal .booking-recap { margin: 16px 16px 0; padding: 14px; }
  #bookingModal .modal-body { padding: 18px 16px 22px; }
  #bookingModal .modal-footer { padding: 0 16px 20px; }
  #bookingModal .sd-confirm-address-row {
    grid-template-columns: 40px 1fr auto;
    padding: 12px 12px;
    gap: 10px;
  }
  #bookingModal .sd-confirm-address-ico {
    width: 40px; height: 40px; font-size: 1rem; border-radius: 12px;
  }
}

/* Reduced motion for the modal */
@media (prefers-reduced-motion: reduce) {
  #bookingModal .modal-content::before,
  #bookingModal .modal-strip {
    animation: none !important;
  }
  #bookingModal .modal-close:hover { transform: none; }
}

/* ------------------------------------------------------------
   14. DEPARTURE BOARD
   ------------------------------------------------------------ */
.board-section {
  padding: 80px 0;
  background: var(--surface);
}

.board-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.board-tab {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--grey-dark);
  transition: all .3s;
}

.board-tab.active {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

.board-tab:hover:not(.active) {
  border-color: var(--blue);
  color: var(--blue);
}

.board {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.board-row {
  display: grid;
  grid-template-columns: 110px 1fr 130px 120px 130px;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  transition: background .3s;
}

.board-row:last-child {
  border-bottom: 0;
}

.board-row:hover {
  background: #FAFBFE;
}

.board-time {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--black);
}

.board-time small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--grey);
  font-weight: 500;
  margin-top: 2px;
}

.board-path {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  font-weight: 600;
  flex-wrap: wrap;
}

.board-path .bi {
  color: var(--red);
  font-size: .85rem;
}

.board-path small {
  display: block;
  font-weight: 500;
  color: var(--grey);
  font-size: .74rem;
  margin-top: 3px;
}

.seats-bar {
  height: 5px;
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  margin-top: 7px;
}

.seats-bar i {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 10px;
  transition: width .6s var(--ease);
}

.seats-bar.low i {
  background: var(--red);
}

.board-status {
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
}

.board-status.limited {
  color: var(--red-dark);
}


/* ============================================================
   EXPERIENCE SECTION — MIRRORED AURORA BACKGROUND (v2.2)
   ------------------------------------------------------------
   Ported 1:1 from animation.html. Every curve, swoosh, route,
   glow, pin, shuttle, halftone and particle is mirrored on BOTH
   axes (MIRROR_X = true, MIRROR_Y = true → full 180° reversal).
   The WebGL shader receives the exact same uniforms and does the
   same domain-warp + ridged fbm the animation.html file uses.
   The Canvas 2D layer runs the exact same render order:
     1. clear
     2. glass orbs
     3. neon departure arc
     4. halftone
     5. swooshes
     6. route splines + travelling pulses
     7. streaks
     8. pluses & shuttle icons
     9. door-to-door pins
    10. particles
    11. cursor halo

   STABILITY (identical contract to animation.html):
     • WebGL missing  → CSS-gradient fallback, static
     • Slow network   → Save-Data / 2g / 3g / slow-2g → static
     • Low-end device → RAM ≤ 2GB or cores ≤ 2 → static
     • Reduced motion → one static frame, then stop
     • Tab hidden     → rAF paused
     • FPS < 28       → qualityScale × 0.75
     • DPR capped at 2 (1.5 on mobile)
   ============================================================ */

/* ---------- Section frame ---------- */
.experience {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 0;
  /* Fallback background — visible before the canvas boots and
     whenever the engine enters static mode. Matches the mirror:
     red bloom originally top-left → now bottom-right; gold
     originally bottom-centre → now top-centre. */
  background:
    radial-gradient(1200px 800px at 88% 88%, rgba(212, 4, 4, .35) 0%, transparent 58%),
    radial-gradient(1000px 700px at 12% 12%, rgba(245, 179, 1, .22) 0%, transparent 58%),
    radial-gradient(1100px 850px at 50% 50%, rgba(5, 97, 201, .30) 0%, transparent 62%),
    linear-gradient(160deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
  color: #fff;
}

.experience > .container-sd {
  position: relative;
  z-index: 20;
}

/* ---------- Aurora host ---------- */
.experience-aurora-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Same mirrored CSS-gradient fallback as the section, so the
     background never flashes when the canvas layer is hidden. */
  background:
    radial-gradient(1200px 800px at 88% 88%, rgba(212, 4, 4, .35) 0%, transparent 58%),
    radial-gradient(1000px 700px at 12% 12%, rgba(245, 179, 1, .22) 0%, transparent 58%),
    radial-gradient(1100px 850px at 50% 50%, rgba(5, 97, 201, .30) 0%, transparent 62%),
    linear-gradient(160deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
}

/* ---------- Canvases (mirrored exactly like animation.html) ---------- */
.exp-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* MIRROR_X = true, MIRROR_Y = true → full 180° reversal */
  transform: scale(-1, -1);
  transform-origin: 50% 50%;
  will-change: transform;
}

.exp-aurora-webgl { z-index: 1; }
.exp-aurora-fx    { z-index: 2; }

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

/* ---------- Vignette (mirrored stops) ---------- */
.exp-aurora-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 55%, transparent 55%, rgba(4, 12, 45, .5) 100%),
    linear-gradient(180deg,
      rgba(4, 12, 45, .5) 0%,
      transparent 15%,
      transparent 88%,
      rgba(4, 12, 45, .4) 100%);
}

/* ---------- Static freeze mode ----------
   When the engine detects a slow network, low-end device, or
   reduced-motion preference, it sets `data-aurora-static="1"`
   on the host. Canvases hide; the mirrored CSS gradient above
   stays visible. Absolutely nothing moves. */
.experience-aurora-host[data-aurora-static="1"] .exp-aurora-canvas {
  display: none !important;
}

/* ---------- Ensure headings and step cards stay readable ---------- */
.experience .section-title { color: #fff; }
.experience .section-title .outline {
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .55);
}
.experience .section-lead { color: rgba(255, 255, 255, .72); }
.experience .eyebrow { color: var(--sky, #66A3E0); }

/* Step cards on the dark aurora get a glassy dark treatment */
.experience .how-step {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 18px 40px -22px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}
.experience .how-step:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .26);
}
.experience .how-step h4 { color: #fff; }
.experience .how-step p  { color: rgba(255, 255, 255, .72); }
.experience .how-num {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  color: var(--sky, #66A3E0);
  box-shadow:
    0 10px 22px -12px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}
.experience .how-num::after { border-color: transparent; }

/* Reduced motion — freeze */
@media (prefers-reduced-motion: reduce) {
  .experience-aurora-host[data-aurora-static="1"] .exp-aurora-canvas {
    display: none !important;
  }
}

/* Mobile — lower layer cost */
@media (max-width: 767px) {
  .experience { padding: 80px 0; }
}

/* ============================================================
   HOW IT WORKS — numbered step cards
   The Experience section's four-step guide, rendered as glassy
   self-contained cards with numbered badges that lift on hover.
   ============================================================ */

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
  margin-top: 56px;
}

/* Dashed connector line behind the step numbers (desktop only) */
.how-grid::before {
  content: "";
  position: absolute;
  top: 63px;
  left: 8%;
  right: 8%;
  border-top: 2px dashed var(--line);
  z-index: 0;
  pointer-events: none;
}

.how-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 26px 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(228, 223, 226, .9);
  box-shadow:
    0 18px 40px -22px rgba(4, 28, 92, .22),
    0 4px 12px -6px rgba(4, 28, 92, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition:
    transform .5s var(--ease),
    box-shadow .5s var(--ease),
    border-color .4s var(--ease),
    background .4s var(--ease);
  overflow: hidden;
}

/* Brand-tinted top edge that lights up on hover */
.how-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--gold) 45%, var(--blue) 100%);
  opacity: .55;
  transition: opacity .4s var(--ease);
}

.how-step:hover {
  transform: translateY(-8px);
  border-color: rgba(203, 221, 247, .9);
  box-shadow:
    0 30px 60px -26px rgba(4, 28, 92, .32),
    0 8px 20px -8px rgba(212, 4, 4, .14),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.how-step:hover::before {
  opacity: 1;
}

/* Number badge — the big circular numeral */
.how-num {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--blue-mid);
  box-shadow:
    0 10px 24px -12px rgba(5, 97, 201, .35),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  margin-bottom: 4px;
  transition: all .45s var(--ease-spring);
  position: relative;
  flex: none;
}

.how-num::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 25px;
  border: 1px solid transparent;
  transition: border-color .4s;
}

.how-step:hover .how-num {
  background: var(--gradient-red);
  color: #fff;
  border-color: transparent;
  transform: translateY(-4px) rotate(-6deg);
  box-shadow:
    0 16px 30px -12px rgba(212, 4, 4, .55),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}

.how-step:hover .how-num::after {
  border-color: rgba(212, 4, 4, .25);
}

/* Step copy */
.how-step > div:last-child {
  min-width: 0;
}

.how-step h4 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--black);
  margin: 0 0 10px;
  line-height: 1.25;
}

.how-step p {
  font-size: .86rem;
  color: var(--grey);
  line-height: 1.8;
  margin: 0;
}

/* ------------------------------------------------------------
   16. FLEET — Quantum Route Nebula background
   ------------------------------------------------------------
   Identical visual language to the "11 / Trip alerts" section.
   The host canvas runs the same shader + Canvas 2D story layer
   used there, so the Fleet section becomes the same living
   cosmic route network — aurora nebula, hyperspace channel,
   orbital rings, holographic boarding passes, route nodes,
   travelling shuttle and stardust.
   ------------------------------------------------------------ */
.fleet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 0;
  color: #fff;
  /* Base fallback — matches the shader palette so nothing flashes
     while the canvas boots or when it enters static mode. */
  background:
    radial-gradient(1200px 800px at 10% 82%, rgba(252, 4, 4, .32) 0%, transparent 58%),
    radial-gradient(1000px 720px at 90% 80%, rgba(15, 115, 219, .34) 0%, transparent 58%),
    radial-gradient(900px 700px at 54% 4%, rgba(245, 179, 1, .18) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #0A1430 55%, #041C5C 100%);
}

/* Kill the old blue/red glow orbs */
.fleet::before,
.fleet::after {
  content: none !important;
}

/* ---------- Nebula host ---------- */
.fleet-nebula-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 10% 82%, rgba(252, 4, 4, .34) 0%, transparent 58%),
    radial-gradient(1000px 720px at 90% 80%, rgba(15, 115, 219, .36) 0%, transparent 58%),
    radial-gradient(900px 700px at 54% 4%, rgba(245, 179, 1, .18) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #0A1430 55%, #041C5C 100%);
}

/* ---------- Canvases ---------- */
.fleet-nebula-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.fleet-nebula-webgl { z-index: 1; }
.fleet-nebula-fx    { z-index: 2; }

/* ---------- Vignette (identical to Alerts nebula) ---------- */
.fleet-nebula-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 52%, rgba(4, 28, 92, .62) 100%),
    linear-gradient(180deg,
      rgba(4, 28, 92, .35) 0%,
      transparent 20%,
      transparent 78%,
      rgba(10, 20, 48, .62) 100%);
  mix-blend-mode: multiply;
}

/* ---------- Film grain (identical to Alerts nebula) ---------- */
.fleet-nebula-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Static freeze mode ---------- */
.fleet-nebula-host[data-aurora-static="1"] .fleet-nebula-canvas {
  display: none !important;
}

/* ---------- Content sits above every nebula layer ---------- */
.fleet > .container-sd {
  position: relative;
  z-index: 20;
}

/* ---------- Reduced motion — freeze the nebula ---------- */
@media (prefers-reduced-motion: reduce) {
  .fleet-nebula-grain { display: none; }
}

/* ---------- Mobile — compact padding, lighter blur ---------- */
@media (max-width: 767px) {
  .fleet { padding: 80px 0; }
}

.fleet .section-title {
  color: #fff;
}

.fleet .section-title .outline {
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .6);
}

.fleet .section-lead {
  color: rgba(255, 255, 255, .6);
}

.fleet-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 64px;
  align-items: center;
  z-index: 2;
}

.fleet-stage {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #10141c;
  border: 1px solid rgba(255, 255, 255, .12);
  aspect-ratio: 1.35/1;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}

.fleet-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s, transform 1s var(--ease);
}

.fleet-stage:hover img {
  transform: scale(1.04);
}

.fleet-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .6));
  pointer-events: none;
}

.fleet-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, .5);
  z-index: 3;
}

.fleet-corner.tl {
  top: 16px;
  left: 16px;
  border-right: 0;
  border-bottom: 0;
}

.fleet-corner.tr {
  top: 16px;
  right: 16px;
  border-left: 0;
  border-bottom: 0;
}

.fleet-corner.bl {
  bottom: 16px;
  left: 16px;
  border-right: 0;
  border-top: 0;
}

.fleet-corner.br {
  bottom: 16px;
  right: 16px;
  border-left: 0;
  border-top: 0;
}

.fleet-caption {
  position: absolute;
  left: 26px;
  bottom: 24px;
  z-index: 3;
}

.fleet-caption h4 {
  color: #fff;
  font-size: 1.4rem;
}

.fleet-caption p {
  font-size: .76rem;
  color: rgba(255, 255, 255, .65);
  margin-top: 5px;
}

/* Hotspots */
.hotspot {
  position: absolute;
  z-index: 5;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .18);
  transition: all .35s var(--ease-spring);
}

.hotspot:hover,
.hotspot.open {
  background: var(--red);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 10px rgba(212, 4, 4, .22);
}

.hotspot-pop {
  position: absolute;
  z-index: 6;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 190px;
  background: #fff;
  color: var(--charcoal);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .76rem;
  line-height: 1.6;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all .35s var(--ease);
  pointer-events: none;
}

.hotspot-pop strong {
  display: block;
  color: var(--black);
  font-size: .82rem;
  margin-bottom: 4px;
}

.hotspot.open .hotspot-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.fleet-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.fleet-thumb {
  width: 96px;
  height: 66px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #151a24;
  padding: 0;
  transition: all .35s;
  opacity: .55;
}

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

.fleet-thumb.active {
  border-color: var(--red);
  opacity: 1;
}

.fleet-thumb:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.fleet-info h3 {
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-bottom: 20px;
}

.fleet-info > p {
  color: rgba(255, 255, 255, .62);
  font-size: .95rem;
  line-height: 1.9;
  margin-bottom: 28px;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}

.spec {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: all .35s;
}

.spec:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .25);
  transform: translateX(4px);
}

.spec .bi {
  font-size: 1.15rem;
  color: var(--sky);
}

.spec svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  display: block;
}

.spec strong {
  display: block;
  font-size: .83rem;
  color: #fff;
  font-weight: 700;
}

.spec small {
  font-size: .7rem;
  color: rgba(255, 255, 255, .5);
}

.fleet-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.fleet-badges .pill {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .85);
}

/* ------------------------------------------------------------
   17. FARES — Perforated tickets
   ------------------------------------------------------------ */
/* ============================================================
   FARES — "THE BOARDING PASS GALLERY"
   Cool paper-white canvas with a subtle ticket-perforation
   lattice and soft brand-colour washes behind each card.
   Feels like a premium departure lounge.
   ============================================================ */
.fares {
  padding: 110px 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #F8F9FC 0%, #EEF2F9 50%, #F8F9FC 100%);
}

/* Layer 1 — Perforation dot lattice (subtle, uniform) */
.fares::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(4, 28, 92, .10) 1px, transparent 1.4px),
    radial-gradient(rgba(212, 4, 4, .06) 1px, transparent 1.2px);
  background-size: 28px 28px, 56px 56px;
  background-position: 0 0, 14px 14px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 0%, #000 55%, transparent 95%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 0%, #000 55%, transparent 95%);
  opacity: .9;
}

/* Layer 2 — Soft brand-colour aurora behind cards */
.fares::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 560px at 18% 30%, rgba(212, 4, 4, .10) 0%, transparent 62%),
    radial-gradient(circle 640px at 82% 70%, rgba(5, 97, 201, .12) 0%, transparent 64%),
    radial-gradient(circle 480px at 50% 90%, rgba(245, 179, 1, .08) 0%, transparent 66%);
  filter: blur(30px);
  animation: faresAuroraDrift 26s ease-in-out infinite alternate;
}

@keyframes faresAuroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
}

/* Section content sits above */
.fares .container-sd {
  position: relative;
  z-index: 3;
}

/* Tickets — glassy premium paper */
.ticket {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    0 24px 60px -28px rgba(4, 28, 92, .26),
    0 6px 18px -10px rgba(212, 4, 4, .12),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.ticket.featured {
  border-color: rgba(187, 210, 242, .8);
  box-shadow:
    0 30px 70px -28px rgba(5, 97, 201, .35),
    0 8px 22px -10px rgba(5, 97, 201, .18),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

@media (prefers-reduced-motion: reduce) {
  .fares::after { animation: none; }
}

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.ticket {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  overflow: hidden;
}

.ticket::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-red);
}

.ticket.featured::before {
  background: var(--gradient-blue);
}

.ticket:hover {
  transform: translateY(-10px) rotate(-.6deg);
  box-shadow: var(--shadow-lg);
}

.ticket.featured {
  border-color: #BBD2F2;
  box-shadow: 0 20px 50px -24px rgba(5, 97, 201, .4);
}

.ticket-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ticket-code {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--grey);
}

.ticket-route {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.ticket-route span {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--black);
  line-height: 1.15;
}

.ticket-route .bi {
  color: var(--red);
  font-size: 1rem;
  margin: 4px 0;
}

.ticket-meta {
  display: flex;
  gap: 16px;
  font-size: .75rem;
  color: var(--grey);
  margin: 18px 0 24px;
  flex-wrap: wrap;
}

.ticket-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ticket-perf {
  position: relative;
  border-top: 2px dashed var(--line);
  margin: 0 -28px;
}

.ticket-perf::before,
.ticket-perf::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
}

.ticket-perf::before {
  left: -13px;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}

.ticket-perf::after {
  right: -13px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}

.ticket-price {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 24px 0 20px;
}

.ticket-price .amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1;
  color: var(--black);
}

.ticket-price .unit {
  font-size: .76rem;
  color: var(--grey);
  padding-bottom: 5px;
}

.ticket-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ticket-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .83rem;
  color: var(--grey-dark);
}

.ticket-features li .bi {
  color: var(--green);
  font-size: .9rem;
}

.ticket .btn-sd,
.ticket .btn-ghost {
  width: 100%;
}

.ticket-barcode {
  display: flex;
  justify-content: center;
  gap: 3px;
  height: 22px;
  margin-top: 24px;
  opacity: .25;
}

.ticket-barcode i {
  width: 2px;
  background: var(--black);
}

.ticket-barcode i:nth-child(3n) {
  width: 4px;
}

.fare-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
  font-size: .8rem;
  color: var(--grey);
  text-align: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   18. TRACKING
   ------------------------------------------------------------ */
/* ============================================================
   TRACKING — Quantum Route Nebula background
   ------------------------------------------------------------
   Identical visual language to the "11 / Trip alerts" section.
   The host canvas runs the same shader + Canvas 2D story layer
   used there, so the Track section becomes the same living
   cosmic route network — aurora nebula, hyperspace channel,
   orbital rings, holographic boarding passes, route nodes,
   travelling shuttle and stardust.
   ============================================================ */
.track-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 0;
  color: #fff;
  /* Base fallback — matches the shader palette so nothing flashes
     while the canvas boots or when it enters static mode. */
  background:
    radial-gradient(1200px 800px at 10% 82%, rgba(252, 4, 4, .32) 0%, transparent 58%),
    radial-gradient(1000px 720px at 90% 80%, rgba(15, 115, 219, .34) 0%, transparent 58%),
    radial-gradient(900px 700px at 54% 4%, rgba(245, 179, 1, .18) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #0A1430 55%, #041C5C 100%);
}

/* Kill the old starfield + route-graph pseudo-elements */
.track-section::before,
.track-section::after {
  content: none !important;
}

/* ---------- Nebula host ---------- */
.track-nebula-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 10% 82%, rgba(252, 4, 4, .34) 0%, transparent 58%),
    radial-gradient(1000px 720px at 90% 80%, rgba(15, 115, 219, .36) 0%, transparent 58%),
    radial-gradient(900px 700px at 54% 4%, rgba(245, 179, 1, .18) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #0A1430 55%, #041C5C 100%);
}

/* ---------- Canvases ---------- */
.track-nebula-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.track-nebula-webgl { z-index: 1; }
.track-nebula-fx    { z-index: 2; }

/* ---------- Vignette (identical to Alerts nebula) ---------- */
.track-nebula-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 52%, rgba(4, 28, 92, .62) 100%),
    linear-gradient(180deg,
      rgba(4, 28, 92, .35) 0%,
      transparent 20%,
      transparent 78%,
      rgba(10, 20, 48, .62) 100%);
  mix-blend-mode: multiply;
}

/* ---------- Film grain (identical to Alerts nebula) ---------- */
.track-nebula-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Static freeze mode ---------- */
.track-nebula-host[data-aurora-static="1"] .track-nebula-canvas {
  display: none !important;
}

/* ---------- Content sits above every nebula layer ---------- */
.track-section > .container-sd {
  position: relative;
  z-index: 20;
}

/* ---------- Reduced motion — freeze the nebula ---------- */
@media (prefers-reduced-motion: reduce) {
  .track-nebula-grain { display: none; }
}

/* ---------- Mobile — compact padding, lighter blur ---------- */
@media (max-width: 767px) {
  .track-section { padding: 70px 0; }
}

/* Content above */
.track-section .container-sd {
  position: relative;
  z-index: 3;
}

/* Section heading colours for dark canvas */
.track-section .section-title { color: #fff; }
.track-section .section-title .outline {
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .55);
}
.track-section .section-lead { color: rgba(255, 255, 255, .68); }
.track-section .eyebrow { color: var(--sky); }

/* Console becomes a glassy observatory panel */
.track-console {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow:
    0 40px 100px -32px rgba(0, 0, 0, .6),
    0 8px 24px -12px rgba(5, 97, 201, .35),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Big tracking button adapts to dark canvas */
.track-big-btn {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 20px 50px -22px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.track-big-btn strong { color: #fff; }
.track-big-btn small { color: rgba(255, 255, 255, .6); }

.sample-chip { color: rgba(255, 255, 255, .7); }
.sample-chip code {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: var(--sky);
}

/* Perks list text on dark */
.request-perks li { color: rgba(255, 255, 255, .82); }
.request-perks li .bi {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: var(--sky);
}

@media (prefers-reduced-motion: reduce) {
  .track-section::before { animation: none; opacity: 1; }
}

.track-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}

.track-visual {
  position: relative;
  margin-top: 36px;
}

/* ------------------------------------------------------------
   TRACK BIG BUTTON — base (works on both light & dark)
   Inside .track-section it must be readable on deep navy.
   ------------------------------------------------------------ */
.track-big-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 24px 26px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--charcoal);
  box-shadow: var(--shadow-md);
  transition: all .45s var(--ease);
  overflow: hidden;
  cursor: pointer;
}

.track-big-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-blue);
  opacity: 0;
  transition: opacity .45s var(--ease);
  z-index: 0;
}

.track-big-btn:hover {
  transform: translateY(-5px);
  border-color: transparent;
  color: #fff;
}

.track-big-btn:hover::before {
  opacity: 1;
}

/* Every direct child sits above the gradient overlay */
.track-big-btn > * {
  position: relative;
  z-index: 1;
}

.track-big-btn .tb-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #EAF2FD;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex: none;
  transition: all .45s var(--ease);
}

.track-big-btn:hover .tb-icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.track-big-btn strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--black);
  transition: color .4s var(--ease);
}

.track-big-btn small {
  display: block;
  font-size: .8rem;
  color: var(--grey);
  transition: color .4s var(--ease);
}

.track-big-btn .bi-arrow-up-right {
  margin-left: auto;
  color: var(--red);
  font-size: 1.3rem;
  flex: none;
  transition: all .4s var(--ease);
}

.track-big-btn:hover strong,
.track-big-btn:hover small {
  color: #fff;
}

.track-big-btn:hover .bi-arrow-up-right {
  color: #fff;
  transform: translate(3px, -3px);
}

/* ------------------------------------------------------------
   TRACK BIG BUTTON — dark "constellation" context
   Scoped LAST so it always wins on the deep-navy track section.
   ------------------------------------------------------------ */
.track-section .track-big-btn {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  color: #ffffff;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 20px 50px -22px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

.track-section .track-big-btn strong {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.track-section .track-big-btn small {
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}

.track-section .track-big-btn .tb-icon {
  background: rgba(255, 255, 255, .12);
  color: var(--sky);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.track-section .track-big-btn .bi-arrow-up-right {
  color: var(--sky);
}

/* Hover on the dark context — same gradient fill, but ensure text stays white */
.track-section .track-big-btn:hover strong,
.track-section .track-big-btn:hover small {
  color: #ffffff;
}

.track-section .track-big-btn:hover .tb-icon {
  background: rgba(255, 255, 255, .22);
  color: #ffffff;
}

.track-section .track-big-btn:hover .bi-arrow-up-right {
  color: #ffffff;
}

.sample-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: .78rem;
  color: var(--grey);
  background: none;
  border: 0;
  padding: 0;
}

.sample-chip code {
  font-family: var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 7px;
  color: var(--blue-mid);
  font-weight: 600;
}

.sample-chip:hover code {
  border-color: var(--blue);
}

/* Track console */
.track-console {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.tc-head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.tc-head h3 {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tc-head h3 .bi {
  color: var(--blue);
}

.tc-body {
  padding: 28px;
}

.track-input-row {
  display: flex;
  gap: 10px;
}

.track-input-row .control {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
}

.recent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: .72rem;
  color: var(--grey);
}

.recent-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--blue-mid);
  transition: all .25s;
}

.recent-chip:hover {
  border-color: var(--blue);
  background: #EAF2FD;
}

.track-empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--grey);
  font-size: .86rem;
}

.track-empty .bi {
  font-size: 2.4rem;
  color: var(--silver);
  display: block;
  margin-bottom: 14px;
}

.track-result {
  animation: fadeUp .55s var(--ease);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tr-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.tr-ref {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--grey);
}

.tr-ref strong {
  display: block;
  font-size: 1.15rem;
  color: var(--black);
  letter-spacing: .04em;
  margin-top: 5px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: .74rem;
  font-weight: 700;
  background: #EAF2FD;
  color: var(--blue-mid);
  border: 1px solid #CBDDF7;
}

.status-pill.received {
  background: #FFF4E5;
  color: #8A5300;
  border-color: #F3DDB8;
}

.status-pill.confirmed {
  background: #E9F6EE;
  color: var(--green);
  border-color: #C5E7D1;
}

.status-pill.departed {
  background: #FDEDED;
  color: var(--red-dark);
  border-color: #F6CFCF;
}

.status-pill.completed {
  background: var(--surface);
  color: var(--charcoal);
  border-color: var(--line);
}

.status-pill.declined {
  background: #FDEDED;
  color: var(--red-dark);
  border-color: #F6CFCF;
}

.tr-route {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border-radius: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tr-route strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.tr-route .bi {
  color: var(--red);
}

.tr-route .tr-meta {
  margin-left: auto;
  font-size: .74rem;
  color: var(--grey);
  text-align: right;
}

/* Timeline */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--line);
}

.timeline li {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 26px;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.tl-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--silver);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex: none;
  z-index: 2;
  transition: all .5s;
}

.timeline li.done .tl-node {
  background: var(--blue-mid);
  border-color: var(--blue-mid);
  color: #fff;
}

.timeline li.current .tl-node {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(212, 4, 4, .14);
  animation: nodePulse 2.6s ease-in-out infinite;
}

@keyframes nodePulse {
  0%, 100% {
    box-shadow: 0 0 0 6px rgba(212, 4, 4, .14);
  }
  50% {
    box-shadow: 0 0 0 11px rgba(212, 4, 4, .05);
  }
}

.tl-content {
  padding-top: 5px;
  flex: 1;
  min-width: 0;
}

.tl-content strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--charcoal);
}

.tl-content small {
  font-size: .76rem;
  color: var(--grey);
  line-height: 1.6;
  display: block;
  margin-top: 3px;
}

.timeline li.pending .tl-content strong {
  color: var(--silver);
}

.timeline li.pending .tl-content small {
  color: #B5B0B4;
}

.tr-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

.tr-actions .btn-ghost,
.tr-actions .btn-sd {
  flex: 1;
  min-width: 130px;
  font-size: .8rem;
  padding: .8rem 1rem;
}

.tr-notice {
  margin-top: 18px;
  font-size: .72rem;
  color: var(--grey);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.7;
}

.tr-notice .bi {
  flex: none;
  margin-top: 3px;
  color: var(--blue);
}

.track-error {
  padding: 22px;
  border-radius: 16px;
  background: #FFF4F4;
  border: 1px solid #F6CFCF;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.track-error .bi {
  color: var(--red);
  font-size: 1.3rem;
  flex: none;
}

.track-error strong {
  display: block;
  font-size: .92rem;
  color: var(--red-dark);
  margin-bottom: 5px;
}

.track-error p {
  font-size: .8rem;
  color: var(--grey-dark);
  line-height: 1.7;
}

/* ------------------------------------------------------------
   19. MULTI-STEP REQUEST
   ------------------------------------------------------------ */
/* ============================================================
   REQUEST — "THE BLUEPRINT"
   Architect's grid paper with brand-colour trace lines.
   Feels like planning a custom route on a drafting table.
   ============================================================ */
.request-section {
  padding: 110px 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #FBFCFE 0%, #EFF4FB 50%, #FBFCFE 100%);
}

/* Layer 1 — Blueprint grid (fine + bold) */
.request-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Fine grid */
    linear-gradient(rgba(5, 97, 201, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 97, 201, .07) 1px, transparent 1px),
    /* Bold grid */
    linear-gradient(rgba(5, 97, 201, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 97, 201, .13) 1px, transparent 1px);
  background-size:
    24px 24px,
    24px 24px,
    120px 120px,
    120px 120px;
  -webkit-mask-image: radial-gradient(140% 100% at 50% 40%, #000 0%, #000 55%, transparent 95%);
  mask-image: radial-gradient(140% 100% at 50% 40%, #000 0%, #000 55%, transparent 95%);
  opacity: .85;
}

/* Layer 2 — Diagonal brand "trace" lines + red corner accent */
.request-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Diagonal traces — like a route sketch */
    repeating-linear-gradient(115deg,
      transparent 0 180px,
      rgba(212, 4, 4, .07) 180px 181px,
      transparent 181px 360px),
    repeating-linear-gradient(-65deg,
      transparent 0 220px,
      rgba(5, 97, 201, .08) 220px 221px,
      transparent 221px 440px),
    /* Warm corner glow */
    radial-gradient(circle 560px at 88% 12%, rgba(245, 179, 1, .14) 0%, transparent 68%),
    radial-gradient(circle 640px at 6% 92%, rgba(212, 4, 4, .10) 0%, transparent 66%);
  opacity: .9;
}

/* Content above */
.request-section .container-sd {
  position: relative;
  z-index: 3;
}

/* Request card — a glassy drafting surface */
.request-card {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    0 30px 80px -30px rgba(4, 28, 92, .25),
    0 8px 22px -12px rgba(212, 4, 4, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* Aside contact block gets a blueprint panel treatment */
.request-contact {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, .9);
  box-shadow:
    0 18px 40px -22px rgba(4, 28, 92, .22),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.request-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px;
  align-items: start;
}

.request-aside {
  position: sticky;
  top: 130px;
}

.request-aside .section-lead {
  margin-top: 22px;
}

/* ------------------------------------------------------------
   REQUEST PERKS — base (light "blueprint" context)
   Used by .request-section (light background)
   ------------------------------------------------------------ */
.request-perks {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request-perks li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: .87rem;
  color: var(--grey-dark);
  line-height: 1.7;
}

/* The numbered perk badge (1 / 2 / 3) inside the perks list */
.request-perks li .perk-num {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex: none;
  font-size: .85rem;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
}

/* Icon variant (used in .request-aside) */
.request-perks li .bi {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex: none;
  font-size: .9rem;
}

/* The text span inside a perk — allow wrapping and keep it readable */
.request-perks li > span {
  flex: 1 1 auto;
  min-width: 0;
}

.request-perks li strong {
  color: var(--black);
  font-weight: 700;
}

/* ------------------------------------------------------------
   REQUEST PERKS — dark "constellation" context
   Used by .track-section (deep navy observatory background).
   Scoped LAST so it always wins over the base rules above.
   ------------------------------------------------------------ */
.track-section .request-perks li {
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.track-section .request-perks li strong {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

.track-section .request-perks li .perk-num {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  color: var(--sky);
  box-shadow:
    0 4px 14px -6px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.track-section .request-perks li .bi {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  color: var(--sky);
  box-shadow:
    0 4px 14px -6px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.request-contact {
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.request-contact small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
}

.request-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--black);
  margin-top: 10px;
}

.request-contact a:hover {
  color: var(--red);
}

.request-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.steps-head {
  display: flex;
  gap: 8px;
  padding: 24px 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.step-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: var(--grey);
}

.step-tab .step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  flex: none;
  transition: all .4s;
}

.step-tab strong {
  font-size: .78rem;
  font-weight: 700;
  display: block;
  line-height: 1.3;
}

.step-tab small {
  font-size: .66rem;
  color: var(--grey);
  display: block;
  margin-top: 2px;
}

.step-tab.active {
  color: var(--black);
}

.step-tab.active .step-num {
  background: var(--gradient-red);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(212, 4, 4, .3);
}

.step-tab.done .step-num {
  background: var(--blue-mid);
  color: #fff;
  border-color: var(--blue-mid);
}

.step-progress {
  height: 3px;
  background: var(--surface);
}

.step-progress i {
  display: block;
  height: 100%;
  width: 33.33%;
  background: var(--gradient-red);
  transition: width .5s var(--ease);
}

.step-panel {
  padding: 32px 28px;
  animation: fadeUp .45s var(--ease);
}

.step-panel h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.step-panel > .step-desc {
  font-size: .84rem;
  color: var(--grey);
  margin-bottom: 26px;
}

.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
  border-top: 1px solid var(--line);
  background: #FCFBFC;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 24px;
}

.review-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .85rem;
}

.review-item dt {
  color: var(--grey);
  font-weight: 500;
}

.review-item dd {
  margin: 0;
  color: var(--black);
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.review-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 22px;
}

/* ------------------------------------------------------------
   21. TESTIMONIALS
   ------------------------------------------------------------ */
.testimonials {
  padding: 100px 0;
  background: var(--surface);
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 3;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface), transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface), transparent);
}

.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 55s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.quote-card {
  width: 370px;
  flex: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: all .4s var(--ease);
}

.quote-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: #CBBFC6;
}

.quote-stars {
  color: var(--red);
  font-size: .78rem;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.quote-card blockquote {
  margin: 0 0 22px;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--grey-dark);
  font-weight: 500;
}

.quote-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quote-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
  color: #fff;
  flex: none;
}

.quote-person strong {
  display: block;
  font-size: .85rem;
  color: var(--black);
}

.quote-person small {
  font-size: .72rem;
  color: var(--grey);
}

.quote-verified {
  margin-left: auto;
  color: var(--green);
  font-size: .9rem;
}

/* ------------------------------------------------------------
   22. FAQ
   ------------------------------------------------------------ */
.faq {
  padding: 110px 0;
  background: #fff;
}

.faq-grid {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 70px;
  align-items: start;
}

.faq-list {
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 24px 26px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--black);
  transition: background .3s, color .3s;
}

.faq-question:hover {
  background: #FAFAFB;
  color: var(--blue);
}

.faq-question .faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex: none;
  transition: all .4s var(--ease);
}

.faq-question[aria-expanded="true"] {
  color: var(--red);
}

.faq-question[aria-expanded="true"] .faq-icon {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 26px 24px;
  font-size: .88rem;
  color: var(--grey);
  line-height: 1.9;
}

.faq-answer a {
  font-weight: 700;
}

/* ------------------------------------------------------------
   23. ALERTS & FINAL CTA
   ------------------------------------------------------------ */
.alerts {
  padding: 80px 0;
  background: var(--surface);
}

.alerts-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.alerts-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.alerts-form .control {
  flex: 1;
  min-width: 180px;
  background: #fff;
}

.alerts-form select.control {
  flex: 0 0 170px;
}

.alerts-fine {
  font-size: .72rem;
  color: var(--grey);
  margin-top: 14px;
}

/* ============================================================
   FINAL CTA — Signature aurora background
   ------------------------------------------------------------
   Deep navy aurora with the "LET'S RIDE." ghost text preserved
   on top. The canvas engine (WebGL + Canvas 2D) lives inside
   .final-cta-aurora-host; the ghost wordmark is a CSS
   pseudo-element on .final-cta itself, layered ABOVE the host.

   Slow-device / slow-network contract:
     • Static CSS gradient is ALWAYS visible underneath
     • When the engine enters static mode it sets
       data-aurora-static="1" on the host and the canvases are
       hidden — the gradient takes over.
   ============================================================ */
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0;
  color: #fff;
  /* Static fallback — matches the shader palette so nothing flashes
     and slow devices still see a beautiful section. */
  background:
    radial-gradient(1200px 800px at 12% 82%, rgba(252, 4, 4, .32) 0%, transparent 58%),
    radial-gradient(1000px 720px at 88% 55%, rgba(15, 115, 219, .32) 0%, transparent 58%),
    radial-gradient(900px 700px at 55% 12%, rgba(245, 179, 1, .16) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #0A1430 55%, #041C5C 100%);
}

/* "LET'S RIDE." ghost wordmark — layered ABOVE the canvas host
   Upgraded: signature aurora gradient fill, crisp white stroke,
   and a soft brand-colour halo. Still a background element —
   the content above (z-index: 20) is completely unaffected. */
.final-cta::before {
  content: "LET'S RIDE.";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 20rem);
  font-weight: 800;
  letter-spacing: -.06em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;

  /* ── SIGNATURE AURORA GRADIENT FILL ──
     Red → Gold → White → Sky → Blue
     Colour steps are deliberately low-opacity so the wordmark
     reads as "premium background art", not a foreground headline. */
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    135deg,
    rgba(252, 4, 4, 0.24) 0%,
    rgba(245, 179, 1, 0.30) 28%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(102, 163, 224, 0.30) 72%,
    rgba(15, 115, 219, 0.24) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;

  /* ── CRISP OUTLINE ──
     Painted underneath the gradient in WebKit, above in Blink.
     Result in both: a clean 2px white rim that defines the
     letterforms without overwhelming the fill. */
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.26);

  /* ── SOFT BRAND HALO ──
     Three stacked drop-shadows (sky · gold · red) create the
     "shock the world" glow. Each is subtle enough that the
     CTA headline above stays razor-readable. */
  filter:
    drop-shadow(0 0 40px rgba(102, 163, 224, 0.35))
    drop-shadow(0 0 90px rgba(245, 179, 1, 0.18))
    drop-shadow(0 0 140px rgba(252, 4, 4, 0.10));
}

/* Mobile tuning — keeps the wordmark elegant on small screens
   without losing the aura. The content above is untouched. */
@media (max-width: 767px) {
  .final-cta::before {
    -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.24);
    filter:
      drop-shadow(0 0 24px rgba(102, 163, 224, 0.32))
      drop-shadow(0 0 55px rgba(245, 179, 1, 0.16));
  }
}

/* Respect reduced-motion — kill the heavy glow blur (which can
   feel like animation to some users) but keep the gradient +
   stroke, so the wordmark still reads as designed. */
@media (prefers-reduced-motion: reduce) {
  .final-cta::before {
    filter: none;
  }
}

/* Content stack above the ghost text + aurora */
.final-cta > .container-sd {
  position: relative;
  z-index: 20;
}

/* ---------- Aurora host ---------- */
.final-cta-aurora-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Base fallback (matches section gradient) so the host itself
     is never empty during the first frame or in static mode. */
  background:
    radial-gradient(1200px 800px at 12% 82%, rgba(252, 4, 4, .32) 0%, transparent 58%),
    radial-gradient(1000px 720px at 88% 55%, rgba(15, 115, 219, .32) 0%, transparent 58%),
    radial-gradient(900px 700px at 55% 12%, rgba(245, 179, 1, .16) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #0A1430 55%, #041C5C 100%);
}

/* ---------- Canvases ---------- */
.final-cta-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.final-cta-aurora-webgl { z-index: 1; }
.final-cta-aurora-fx    { z-index: 2; }

/* ---------- Film grain (matches uploaded file: opacity .035) ---------- */
.final-cta-aurora-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Vignette (matches uploaded file) ---------- */
.final-cta-aurora-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 45%, transparent 55%, rgba(10, 20, 48, .45) 100%),
    linear-gradient(180deg,
      rgba(10, 20, 48, .35) 0%,
      transparent 18%,
      transparent 82%,
      rgba(10, 20, 48, .45) 100%);
  mix-blend-mode: multiply;
}

/* ---------- Static freeze mode ---------- */
.final-cta-aurora-host[data-aurora-static="1"] .final-cta-aurora-canvas {
  display: none !important;
}

/* ---------- Reduced motion — freeze the grain too ---------- */
@media (prefers-reduced-motion: reduce) {
  .final-cta-aurora-grain { display: none; }
}

/* ---------- Mobile — compact padding ---------- */
@media (max-width: 767px) {
  .final-cta { padding: 70px 0; }
}

.final-inner {
  position: relative;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}

.final-inner h2 {
  color: #fff;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  letter-spacing: -.05em;
}

.final-inner h2 span {
  color: #FF6B6B;
}

.final-inner p {
  color: rgba(255, 255, 255, .7);
  margin: 22px auto 34px;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.85;
}

.final-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.final-actions .btn-ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

.final-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.final-mini {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 36px;
  font-size: .76rem;
  color: rgba(255, 255, 255, .55);
}

.final-mini span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.final-mini .bi {
  color: #9EE7B8;
}

/* ------------------------------------------------------------
   24. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: linear-gradient(180deg, #071029 0%, #040404 100%);
  color: rgba(255, 255, 255, .65);
  padding: 80px 0 0;
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red) 0 25%, var(--black) 25% 50%, var(--blue) 50% 75%, var(--red-dark) 75% 100%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 56px;
}

.footer-brand .brand-plate {
  background: transparent;
  display: inline-flex;
}

.footer-brand p {
  font-size: .86rem;
  line-height: 1.9;
  margin-top: 22px;
  max-width: 34ch;
  color: rgba(255, 255, 255, .55);
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .75);
  font-size: 1rem;
  transition: all .35s var(--ease);
}

.footer-social a:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-4px);
}

.footer-col h5 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a,
.footer-col button {
  color: rgba(255, 255, 255, .6);
  font-size: .86rem;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  transition: all .3s;
}

.footer-col a:hover,
.footer-col button:hover {
  color: #fff;
  padding-left: 5px;
}

.footer-contact li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .85rem;
}

.footer-contact .bi {
  color: var(--sky);
  margin-top: 4px;
  flex: none;
}

.footer-contact a {
  color: rgba(255, 255, 255, .8);
}

.footer-hours {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: .78rem;
}

.footer-hours strong {
  color: #fff;
  display: block;
  margin-bottom: 5px;
  font-size: .8rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .75rem;
  color: rgba(255, 255, 255, .45);
}

.footer-bottom .footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom button {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .45);
  font-size: .75rem;
  padding: 0;
}

.footer-bottom button:hover {
  color: #fff;
}

.footer-sa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-sa .flag {
  display: inline-flex;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  flex: none;
  background: linear-gradient(180deg, #16803C 0 33%, #fff 33% 45%, #044CB4 45% 55%, #fff 55% 67%, #D40404 67% 100%);
}

/* ------------------------------------------------------------
   25. FLOATING UI — Support dock, back-to-top, concierge
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   SUPPORT DOCK — Direct WhatsApp launcher
   Single button. No hover clutter. Click → opens WhatsApp.
   ------------------------------------------------------------ */
.support-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.dock-main {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(145deg, #25D366 0%, #1EBE5D 55%, #128C7E 100%);
  color: #fff;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow:
    0 12px 30px -8px rgba(37, 211, 102, .65),
    0 4px 12px -4px rgba(18, 140, 126, .35),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: all .4s var(--ease-spring);
  cursor: pointer;
}


.dock-main::after {
  /* Online indicator dot */
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, .35);
}

.dock-main:hover,
.dock-main:focus-visible {
  color: #fff;
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 20px 44px -10px rgba(37, 211, 102, .8),
    0 6px 16px -4px rgba(18, 140, 126, .45),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  outline: none;
}

.dock-main:active {
  transform: translateY(-1px) scale(.98);
}

.dock-main .bi {
  transition: transform .4s var(--ease-spring);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
}

.dock-main:hover .bi {
  transform: rotate(-8deg) scale(1.08);
}

/* Tooltip — slides in from the right on hover */
.dock-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--black);
  color: #fff;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 9px 14px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .45);
  transition: all .35s var(--ease);
}

.dock-tooltip::after {
  /* Little arrow pointing right toward the button */
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--black);
}

.dock-main:hover .dock-tooltip,
.dock-main:focus-visible .dock-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}



/* Reduced motion — no spin, no hover lift */
@media (prefers-reduced-motion: reduce) {
  .dock-main,
  .dock-main:hover,
  .dock-main:active {
    transform: none;
  }
  .dock-main .bi,
  .dock-main:hover .bi {
    transform: none;
  }
}

/* Mobile — smaller button, tooltip hidden (no hover on touch) */
@media (max-width: 767px) {
  .support-dock {
    right: 16px;
    bottom: 92px;
  }
  .dock-main {
    width: 54px;
    height: 54px;
    font-size: 1.5rem;
  }
  .dock-tooltip {
    display: none;
  }
}

.back-top {
  position: fixed;
  right: 30px;
  bottom: 100px;
  z-index: 1035;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all .4s var(--ease);
}

.back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-top:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

/* Concierge chat */
.concierge {
  position: fixed;
  right: 24px;
  bottom: 100px;
  width: 360px;
  max-width: calc(100vw - 32px);
  z-index: 1060;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(24px) scale(.96);
  opacity: 0;
  visibility: hidden;
  transform-origin: bottom right;
  transition: all .45s var(--ease);
}

.concierge.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

.conc-head {
  background: var(--gradient-blue);
  padding: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}

.conc-head .ch-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.conc-head strong {
  display: block;
  font-size: .92rem;
}

.conc-head small {
  font-size: .7rem;
  color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.conc-head .live-dot {
  background: #9EE7B8;
}

.conc-close {
  margin-left: auto;
  background: rgba(255, 255, 255, .12);
  border: 0;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conc-messages {
  height: 280px;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FAFAFB;
}

.msg {
  max-width: 88%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: .82rem;
  line-height: 1.7;
  animation: fadeUp .3s var(--ease);
}

.msg.bot {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  color: var(--grey-dark);
  align-self: flex-start;
}

.msg.user {
  background: var(--gradient-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.conc-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 14px 18px 0;
}

.conc-chips button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 100px;
  padding: 6px 12px;
  font-size: .72rem;
  color: var(--blue-mid);
  font-weight: 600;
  transition: all .25s;
}

.conc-chips button:hover {
  background: var(--blue-mid);
  color: #fff;
  border-color: var(--blue-mid);
}

.conc-form {
  display: flex;
  gap: 8px;
  padding: 16px 18px 18px;
}

.conc-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 13px;
  font-size: .82rem;
  background: #FAFAFB;
}

.conc-form input:focus {
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(15, 115, 219, .12);
}

.conc-form button {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 12px;
  background: var(--gradient-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conc-fine {
  font-size: .65rem;
  color: var(--grey);
  text-align: center;
  padding: 0 18px 14px;
}

/* Mobile action bar */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .08);
}

.mobile-bar .mb-price small {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--grey);
  font-family: var(--font-mono);
}

.mobile-bar .mb-price strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -.03em;
}

.mobile-bar .btn-sd {
  flex: 1;
  padding: .85rem 1rem;
  font-size: .85rem;
  border-radius: 12px;
}

.mobile-bar .mb-track {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* ================================================================
   S'DINGO · THE PROCESSING CEREMONY
   ----------------------------------------------------------------
   The world's most beautiful processing spinner.
   A triple-ring aurora orbit, orbiting brand particles, a live
   progress bar, and a six-stage checklist. 100% responsive,
   reduced-motion safe, and accessible.

   Everything is GPU-composited. The spinner runs at 60fps on
   modern phones and degrades gracefully on older devices.
   ================================================================ */

/* ---------- Full-screen overlay ---------- */
.sd-ceremony-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
  -webkit-tap-highlight-color: transparent;
}

.sd-ceremony-overlay[hidden] {
  display: none !important;
}

.sd-ceremony-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* Backdrop — dark, blurred, cinematic */
.sd-ceremony-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 45%,
      rgba(10, 20, 48, 0.72) 0%,
      rgba(4, 8, 22, 0.88) 65%,
      rgba(2, 4, 12, 0.94) 100%);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* ---------- The card ---------- */
.sd-ceremony-card {
  position: relative;
  isolation: isolate;
  width: min(480px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 40px 32px 30px;
  border-radius: 30px;
  background:
    radial-gradient(130% 100% at 0% 0%,
      rgba(252, 4, 4, 0.18) 0%, transparent 55%),
    radial-gradient(130% 100% at 100% 100%,
      rgba(15, 115, 219, 0.20) 0%, transparent 55%),
    linear-gradient(165deg, #0A1430 0%, #101E4A 45%, #0A1430 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow:
    0 60px 140px -40px rgba(0, 0, 0, 0.9),
    0 20px 50px -20px rgba(5, 97, 201, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(24px) scale(0.94);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sd-ceremony-card::-webkit-scrollbar { width: 6px; }
.sd-ceremony-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 100px;
}

.sd-ceremony-overlay.is-visible .sd-ceremony-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---------- Aurora backdrop inside the card ---------- */
.sd-ceremony-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.sd-ceremony-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(46px) saturate(1.3);
}

.sd-ceremony-orb-red {
  width: 340px;
  height: 340px;
  top: -25%;
  left: -20%;
  background: radial-gradient(circle, rgba(252, 74, 74, 0.55) 0%, transparent 68%);
  animation: sdCeremonyOrbFloat 20s ease-in-out infinite alternate;
}

.sd-ceremony-orb-blue {
  width: 380px;
  height: 380px;
  bottom: -30%;
  right: -20%;
  background: radial-gradient(circle, rgba(80, 160, 240, 0.55) 0%, transparent 68%);
  animation: sdCeremonyOrbFloat 26s ease-in-out infinite alternate-reverse;
}

.sd-ceremony-orb-gold {
  width: 260px;
  height: 260px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 179, 1, 0.30) 0%, transparent 68%);
  animation: sdCeremonyOrbFloat 32s ease-in-out infinite alternate;
}

@keyframes sdCeremonyOrbFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(28px, 20px, 0) scale(1.08); }
}

.sd-ceremony-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(160, 200, 245, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 55%, transparent 100%);
  opacity: 0.55;
}

/* ---------- Brand strip at the top ---------- */
.sd-ceremony-strip {
  position: relative;
  z-index: 2;
  height: 4px;
  margin: -40px -32px 24px;
  background: linear-gradient(90deg,
    #FC0404 0%, #F5B301 33%, #0F73DB 66%, #FC0404 100%);
  background-size: 200% 100%;
  animation: sdCeremonyStrip 6s linear infinite;
}

@keyframes sdCeremonyStrip {
  to { background-position: 200% 0; }
}

/* ---------- THE SPINNER ---------- */
.sd-ceremony-spinner {
  position: relative;
  z-index: 2;
  width: 160px;
  height: 160px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
}

/* Base ring style */
.sd-ceremony-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Outer ring — gold, slow, thin */
.sd-ceremony-ring-outer {
  inset: 0;
  border: 2px solid transparent;
  border-top-color: rgba(245, 179, 1, 0.9);
  border-right-color: rgba(245, 179, 1, 0.35);
  box-shadow:
    0 0 24px rgba(245, 179, 1, 0.45),
    inset 0 0 20px rgba(245, 179, 1, 0.15);
  animation: sdCeremonySpin 3.2s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}

/* Mid ring — brand gradient, medium, thick */
.sd-ceremony-ring-mid {
  inset: 14px;
  border: 3px solid transparent;
  border-top-color: #FC0404;
  border-right-color: rgba(252, 4, 4, 0.4);
  border-bottom-color: rgba(15, 115, 219, 0.4);
  border-left-color: #0F73DB;
  box-shadow:
    0 0 30px rgba(212, 4, 4, 0.5),
    0 0 40px rgba(15, 115, 219, 0.3);
  animation: sdCeremonySpin 2.1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite reverse;
}

/* Inner ring — blue, fast, thin */
.sd-ceremony-ring-inner {
  inset: 30px;
  border: 1.5px solid transparent;
  border-top-color: rgba(102, 163, 224, 0.95);
  border-bottom-color: rgba(102, 163, 224, 0.35);
  box-shadow: 0 0 18px rgba(102, 163, 224, 0.55);
  animation: sdCeremonySpin 1.4s linear infinite;
}

@keyframes sdCeremonySpin {
  to { transform: rotate(360deg); }
}

/* Pulsing halo behind the core */
.sd-ceremony-halo {
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(245, 179, 1, 0.55) 0%,
    rgba(252, 74, 74, 0.25) 45%,
    transparent 72%);
  filter: blur(10px);
  animation: sdCeremonyHaloPulse 2.4s ease-in-out infinite;
}

@keyframes sdCeremonyHaloPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* Central shuttle icon */
.sd-ceremony-core {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    linear-gradient(140deg, #101E4A 0%, #041C5C 60%, #0A1430 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 30px rgba(245, 179, 1, 0.35),
    0 8px 20px -8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: sdCeremonyCoreBob 2.6s ease-in-out infinite;
}

.sd-ceremony-core svg {
  filter: drop-shadow(0 0 6px rgba(245, 179, 1, 0.55));
}

@keyframes sdCeremonyCoreBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.04); }
}

/* ---------- Orbiting particles ---------- */
.sd-ceremony-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.sd-ceremony-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform-origin: 0 0;
  will-change: transform;
  animation: sdCeremonyParticleOrbit var(--dur, 6s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

.sd-ceremony-particle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color, #F5B301);
  box-shadow:
    0 0 8px var(--glow, rgba(245, 179, 1, 0.8)),
    0 0 16px var(--glow, rgba(245, 179, 1, 0.5));
}

@keyframes sdCeremonyParticleOrbit {
  0% {
    transform: rotate(0deg) translateX(var(--radius, 70px)) scale(1);
    opacity: 0;
  }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% {
    transform: rotate(360deg) translateX(var(--radius, 70px)) scale(0.4);
    opacity: 0;
  }
}

/* ---------- Head ---------- */
.sd-ceremony-head {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 20px;
}

.sd-ceremony-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9EE7B8;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(22, 128, 60, 0.18);
  border: 1px solid rgba(158, 231, 184, 0.28);
  margin-bottom: 14px;
}

.sd-ceremony-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 4px rgba(158, 231, 184, 0.18);
  position: relative;
  flex: none;
}

.sd-ceremony-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #9EE7B8;
  animation: pulseRing 2.4s ease-out infinite;
}

.sd-ceremony-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 8px;
}

.sd-ceremony-title-accent {
  background: linear-gradient(90deg, #FC0404 0%, #F5B301 50%, #66A3E0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sdCeremonyTitleFlow 7s linear infinite;
}

@keyframes sdCeremonyTitleFlow {
  to { background-position: 200% 0; }
}

.sd-ceremony-sub {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  max-width: 38ch;
  margin: 0 auto;
}

/* ---------- Stage label ---------- */
.sd-ceremony-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 40px;
}

.sd-ceremony-stage-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(245, 179, 1, 0.18);
  color: #FFD966;
  font-size: 0.78rem;
  flex: none;
  transition: all 0.4s ease;
}

.sd-ceremony-stage-icon .bi {
  animation: sdCeremonyIconPulse 1.6s ease-in-out infinite;
}

@keyframes sdCeremonyIconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

.sd-ceremony-stage-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Progress bar ---------- */
.sd-ceremony-progress-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: 22px;
}

.sd-ceremony-progress {
  position: relative;
  height: 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.sd-ceremony-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 100px;
  background: linear-gradient(90deg,
    #D40404 0%, #F5B301 45%, #0F73DB 100%);
  background-size: 200% 100%;
  box-shadow:
    0 0 12px rgba(245, 179, 1, 0.55),
    0 0 24px rgba(252, 4, 4, 0.35);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  animation: sdCeremonyFillFlow 3.5s linear infinite;
}

@keyframes sdCeremonyFillFlow {
  to { background-position: 200% 0; }
}

.sd-ceremony-progress-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  animation: sdCeremonyShine 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sdCeremonyShine {
  0%   { left: -40%; }
  55%  { left: 110%; }
  100% { left: 110%; }
}

.sd-ceremony-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.sd-ceremony-progress-pct {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.sd-ceremony-progress-pct strong {
  font-size: 1.5rem;
  color: #fff;
}

.sd-ceremony-progress-pct span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.sd-ceremony-progress-step {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Stage checklist ---------- */
.sd-ceremony-checklist {
  position: relative;
  z-index: 2;
  list-style: none;
  padding: 14px;
  margin: 0 0 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sd-ceremony-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.35s ease;
}

.sd-ceremony-checklist li .sdc-check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
  flex: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sd-ceremony-checklist li.is-active {
  color: #fff;
}

.sd-ceremony-checklist li.is-active .sdc-check {
  background: rgba(245, 179, 1, 0.22);
  border-color: rgba(245, 179, 1, 0.5);
  color: #FFD966;
  animation: sdCeremonyCheckPulse 1.6s ease-in-out infinite;
}

@keyframes sdCeremonyCheckPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 1, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 179, 1, 0.05); }
}

.sd-ceremony-checklist li.is-done {
  color: rgba(158, 231, 184, 0.95);
}

.sd-ceremony-checklist li.is-done .sdc-check {
  background: linear-gradient(140deg, #1FA04E, #16803C);
  border-color: rgba(158, 231, 184, 0.5);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 128, 60, 0.18);
}

/* ---------- Fine print ---------- */
.sd-ceremony-fine {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.55;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(4, 12, 45, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
}

.sd-ceremony-fine .bi {
  flex: none;
  margin-top: 2px;
  color: #9EE7B8;
  font-size: 0.88rem;
}

/* ---------- Success / Fail micro-states ---------- */
.sd-ceremony-overlay.is-success .sd-ceremony-ring {
  animation-duration: 0.6s;
}
.sd-ceremony-overlay.is-success .sd-ceremony-halo {
  animation: sdCeremonyHaloSuccess 0.8s ease-out 1 forwards;
}
@keyframes sdCeremonyHaloSuccess {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

.sd-ceremony-overlay.is-success .sd-ceremony-core {
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.45) 0%, transparent 45%),
    linear-gradient(140deg, #1FA04E 0%, #16803C 55%, #0B4A20 100%);
  border-color: rgba(158, 231, 184, 0.7);
  box-shadow:
    0 0 36px rgba(31, 160, 78, 0.65),
    0 0 60px rgba(31, 160, 78, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: sdCeremonyCoreSuccess 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

@keyframes sdCeremonyCoreSuccess {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.sd-ceremony-overlay.is-error .sd-ceremony-core {
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    linear-gradient(140deg, #FC0404 0%, #D40404 55%, #540202 100%);
  border-color: rgba(255, 107, 107, 0.7);
  box-shadow:
    0 0 36px rgba(252, 4, 4, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sd-ceremony-overlay.is-leaving {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.55, 0, 0.85, 0.3);
}

.sd-ceremony-overlay.is-leaving .sd-ceremony-card {
  transform: translateY(-12px) scale(0.96);
  transition:
    transform 0.4s cubic-bezier(0.55, 0, 0.85, 0.3),
    opacity 0.35s ease;
  opacity: 0;
}

/* ================================================================
   RESPONSIVE — every screen, every device
   ================================================================ */

/* Tablets */
@media (max-width: 767px) {
  .sd-ceremony-overlay { padding: 16px; }

  .sd-ceremony-card {
    padding: 32px 24px 24px;
    border-radius: 24px;
  }
  .sd-ceremony-strip { margin: -32px -24px 20px; }

  .sd-ceremony-spinner { width: 140px; height: 140px; margin-bottom: 20px; }
  .sd-ceremony-core { width: 56px; height: 56px; }
  .sd-ceremony-core svg { width: 30px; height: 30px; }
  .sd-ceremony-halo { inset: 36px; }
  .sd-ceremony-ring-mid { inset: 12px; }
  .sd-ceremony-ring-inner { inset: 26px; }

  .sd-ceremony-title { font-size: 1.45rem; }
  .sd-ceremony-sub { font-size: 0.82rem; }
  .sd-ceremony-stage { font-size: 0.8rem; padding: 9px 14px; }
  .sd-ceremony-progress-pct strong { font-size: 1.3rem; }
  .sd-ceremony-checklist li { font-size: 0.78rem; }
}

/* Phones */
@media (max-width: 480px) {
  .sd-ceremony-overlay { padding: 12px; }

  .sd-ceremony-card {
    padding: 26px 18px 20px;
    border-radius: 22px;
  }
  .sd-ceremony-strip { margin: -26px -18px 16px; height: 3px; }

  .sd-ceremony-spinner { width: 120px; height: 120px; margin-bottom: 16px; }
  .sd-ceremony-core { width: 48px; height: 48px; }
  .sd-ceremony-core svg { width: 26px; height: 26px; }
  .sd-ceremony-halo { inset: 30px; }
  .sd-ceremony-ring-mid { inset: 10px; border-width: 2.5px; }
  .sd-ceremony-ring-inner { inset: 22px; border-width: 1.5px; }
  .sd-ceremony-ring-outer { border-width: 2px; }

  .sd-ceremony-eyebrow { font-size: 9px; padding: 5px 11px; letter-spacing: 0.18em; }
  .sd-ceremony-title { font-size: 1.3rem; }
  .sd-ceremony-sub { font-size: 0.78rem; max-width: 100%; }
  .sd-ceremony-stage { font-size: 0.76rem; padding: 8px 12px; min-height: 36px; }
  .sd-ceremony-stage-icon { width: 22px; height: 22px; font-size: 0.72rem; }

  .sd-ceremony-progress { height: 8px; }
  .sd-ceremony-progress-pct strong { font-size: 1.2rem; }
  .sd-ceremony-progress-pct span { font-size: 0.8rem; }
  .sd-ceremony-progress-step { font-size: 0.64rem; }

  .sd-ceremony-checklist { padding: 12px; gap: 6px; border-radius: 14px; }
  .sd-ceremony-checklist li { font-size: 0.74rem; gap: 8px; }
  .sd-ceremony-checklist li .sdc-check { width: 18px; height: 18px; font-size: 0.66rem; }

  .sd-ceremony-fine { font-size: 0.68rem; padding: 9px 10px; }
}

/* Very small phones */
@media (max-width: 360px) {
  .sd-ceremony-card { padding: 22px 14px 16px; border-radius: 20px; }
  .sd-ceremony-strip { margin: -22px -14px 14px; }
  .sd-ceremony-spinner { width: 104px; height: 104px; margin-bottom: 14px; }
  .sd-ceremony-core { width: 42px; height: 42px; }
  .sd-ceremony-core svg { width: 22px; height: 22px; }
  .sd-ceremony-title { font-size: 1.2rem; }
  .sd-ceremony-stage { font-size: 0.72rem; }
  .sd-ceremony-checklist li { font-size: 0.7rem; }
}

/* Landscape phones — compact, so the checklist isn't clipped */
@media (max-height: 560px) and (orientation: landscape) {
  .sd-ceremony-card {
    padding: 22px 26px 18px;
    max-height: calc(100dvh - 16px);
  }
  .sd-ceremony-strip { margin: -22px -26px 14px; }
  .sd-ceremony-spinner { width: 96px; height: 96px; margin-bottom: 12px; }
  .sd-ceremony-core { width: 40px; height: 40px; }
  .sd-ceremony-core svg { width: 22px; height: 22px; }
  .sd-ceremony-head { margin-bottom: 12px; }
  .sd-ceremony-title { font-size: 1.2rem; }
  .sd-ceremony-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .sd-ceremony-checklist li { font-size: 0.7rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sd-ceremony-orb,
  .sd-ceremony-ring,
  .sd-ceremony-halo,
  .sd-ceremony-core,
  .sd-ceremony-particle,
  .sd-ceremony-progress-fill,
  .sd-ceremony-progress-shine,
  .sd-ceremony-strip,
  .sd-ceremony-title-accent,
  .sd-ceremony-live-dot::after,
  .sd-ceremony-stage-icon .bi {
    animation: none !important;
  }
  .sd-ceremony-progress-fill {
    background: #F5B301;
  }
  .sd-ceremony-progress-shine {
    display: none;
  }
  .sd-ceremony-card,
  .sd-ceremony-overlay.is-visible .sd-ceremony-card {
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .sd-ceremony-overlay { display: none !important; }
}


/* ============================================================
   AURORA TOAST NOTIFICATION SYSTEM
   The most beautiful notification UX in the industry.
   ============================================================ */

/* ---------- Stack container (top-right) ---------- */
.aurora-toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
  max-height: 100vh;
  padding: 4px;
  overflow: visible;
}

/* ---------- Base toast ---------- */
.aurora-toast {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 16px 16px;
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .98), rgba(250, 250, 252, .95));
  color: var(--charcoal);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 -1px 0 rgba(4, 4, 4, .04) inset,
    0 4px 12px -4px rgba(4, 28, 92, .14),
    0 20px 50px -18px rgba(4, 28, 92, .35),
    0 40px 100px -30px rgba(212, 4, 4, .25);
  border: 1px solid rgba(255, 255, 255, .8);
  font-family: var(--font-body);
  pointer-events: auto;
  cursor: default;
  will-change: transform, opacity, filter;
  transform-origin: top right;

  /* Entrance: off-screen to the right, tilted, blurred */
  opacity: 0;
  transform: translateX(calc(100% + 32px)) scale(.94) rotate(2deg);
  filter: blur(8px);
  transition:
    transform .75s cubic-bezier(.16, 1.2, .3, 1),
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    filter .55s ease,
    box-shadow .4s ease;
}

/* Entered state */
.aurora-toast.at-in {
  opacity: 1;
  transform: translateX(0) scale(1) rotate(0deg);
  filter: blur(0);
}

/* Leaving state — collapse up and fade */
.aurora-toast.at-out {
  opacity: 0;
  transform: translateX(calc(100% + 40px)) scale(.9) rotate(-2deg);
  filter: blur(10px);
  transition:
    transform .55s cubic-bezier(.55, 0, .85, .3),
    opacity .45s ease,
    filter .5s ease;
}

/* Collapsing stack — smooth removal when others are present */
.aurora-toast.at-collapse {
  transition: all .4s cubic-bezier(.22, 1, .36, 1);
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: -14px !important;
  opacity: 0 !important;
  transform: scale(.85) !important;
}

/* ---------- Aurora gradient border (animated hue) ---------- */
.at-aurora {
  position: absolute;
  inset: -1px;
  z-index: -3;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from 0deg,
    #D40404 0deg,
    #FC0404 60deg,
    #F5B301 120deg,
    #0561C9 180deg,
    #0F73DB 240deg,
    #66A3E0 300deg,
    #D40404 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: at-auroraSpin 6s linear infinite;
  opacity: .9;
  filter: saturate(1.2) brightness(1.05);
}

@keyframes at-auroraSpin {
  to { transform: rotate(360deg); }
}

/* ---------- Holographic shimmer sweep ---------- */
.at-shimmer {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.at-shimmer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -150%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, .85) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: skewX(-22deg);
  animation: at-shimmerSweep 3.2s ease-in-out infinite;
  animation-delay: .6s;
  mix-blend-mode: overlay;
}

@keyframes at-shimmerSweep {
  0%   { left: -150%; }
  35%  { left: 150%; }
  100% { left: 150%; }
}

/* ---------- Particle burst container ---------- */
.at-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.at-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  animation: at-particleBurst 1.4s cubic-bezier(.16, 1.2, .3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes at-particleBurst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translate(var(--px, 0), var(--py, 0)) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--px, 0) * 2.2), calc(var(--py, 0) * 2.2)) scale(0);
  }
}

/* ---------- Icon with progress ring ---------- */
.at-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
}

.at-icon-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 60%);
  opacity: 0;
  transform: scale(.6);
  transition: all .8s cubic-bezier(.34, 1.56, .64, 1);
}

.aurora-toast.at-in .at-icon-ring {
  opacity: 1;
  transform: scale(1);
  animation: at-iconPulse 2.6s ease-in-out infinite;
  animation-delay: .5s;
}

@keyframes at-iconPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: .55; }
}

.at-icon-core {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--gradient-red);
  box-shadow:
    0 6px 16px -4px rgba(212, 4, 4, .55),
    inset 0 1px 0 rgba(255, 255, 255, .4);
  transform: scale(0) rotate(-90deg);
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 2;
}

.aurora-toast.at-in .at-icon-core {
  transform: scale(1) rotate(0deg);
}

.at-icon-svg {
  width: 20px;
  height: 20px;
  display: block;
  animation: at-iconDraw .6s ease .35s both;
}

@keyframes at-iconDraw {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Progress ring */
.at-progress-ring {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.at-progress-track {
  fill: none;
  stroke: rgba(4, 28, 92, .08);
  stroke-width: 2;
}

.at-progress-bar {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgba(212, 4, 4, .55));
}

/* ---------- Body content ---------- */
.at-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.at-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: 0;
  transform: translateY(-4px);
  transition: all .55s cubic-bezier(.22, 1, .36, 1);
}

.aurora-toast.at-in .at-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .18s;
}

.at-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 128, 60, .18);
  position: relative;
}

.at-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: at-dotPulse 2.2s ease-out infinite;
}

@keyframes at-dotPulse {
  0%   { transform: scale(.5); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

.at-message {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--black);
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  opacity: 0;
  transform: translateY(6px);
  transition: all .6s cubic-bezier(.22, 1, .36, 1);
}

.aurora-toast.at-in .at-message {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .24s;
}

.at-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  color: var(--grey);
  font-family: var(--font-mono);
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(4px);
  transition: all .6s cubic-bezier(.22, 1, .36, 1);
}

.aurora-toast.at-in .at-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s;
}

/* ---------- Close button ---------- */
.at-close {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(4, 28, 92, .1);
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
  flex: none;
  align-self: flex-start;
  margin-top: 2px;
}

.at-close span {
  position: absolute;
  width: 12px;
  height: 1.8px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
}

.at-close span:nth-child(1) { transform: rotate(45deg); }
.at-close span:nth-child(2) { transform: rotate(-45deg); }

.at-close:hover {
  background: var(--red);
  border-color: var(--red);
  transform: rotate(180deg) scale(1.1);
  box-shadow: 0 6px 18px -4px rgba(212, 4, 4, .6);
}

.at-close:hover span {
  background: #fff;
  width: 14px;
  height: 2px;
}

/* ---------- Bottom edge accent (variant driven) ---------- */
.at-edge {
  position: absolute;
  bottom: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--red) 0%,
    var(--red-bright) 40%,
    var(--blue) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1) .2s;
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(212, 4, 4, .4));
}

.aurora-toast.at-in .at-edge {
  transform: scaleX(1);
}

/* ============================================================
   VARIANTS
   ============================================================ */

/* Success — green aurora accent */
.aurora-toast[data-variant="success"] .at-icon-core {
  background: linear-gradient(145deg, #1FA04E 0%, #16803C 60%, #0B4A20 100%);
  box-shadow:
    0 6px 16px -4px rgba(22, 128, 60, .6),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}
.aurora-toast[data-variant="success"] .at-progress-bar {
  stroke: #16803C;
  filter: drop-shadow(0 0 4px rgba(22, 128, 60, .55));
}
.aurora-toast[data-variant="success"] .at-edge {
  background: linear-gradient(90deg, #16803C 0%, #1FA04E 50%, #0561C9 100%);
  filter: drop-shadow(0 0 6px rgba(22, 128, 60, .45));
}
.aurora-toast[data-variant="success"] .at-dot {
  background: #16803C;
  box-shadow: 0 0 0 3px rgba(22, 128, 60, .18);
}
.aurora-toast[data-variant="success"] .at-dot::after {
  border-color: #16803C;
}

/* Info — blue aurora accent */
.aurora-toast[data-variant="info"] .at-icon-core {
  background: linear-gradient(145deg, #0F73DB 0%, #0561C9 55%, #041C5C 100%);
  box-shadow:
    0 6px 16px -4px rgba(5, 97, 201, .6),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}
.aurora-toast[data-variant="info"] .at-progress-bar {
  stroke: #0561C9;
  filter: drop-shadow(0 0 4px rgba(5, 97, 201, .55));
}
.aurora-toast[data-variant="info"] .at-edge {
  background: linear-gradient(90deg, #041C5C 0%, #0561C9 50%, #0F73DB 100%);
}
.aurora-toast[data-variant="info"] .at-dot {
  background: #0561C9;
  box-shadow: 0 0 0 3px rgba(5, 97, 201, .18);
}
.aurora-toast[data-variant="info"] .at-dot::after {
  border-color: #0561C9;
}

/* Warning — gold aurora accent */
.aurora-toast[data-variant="warning"] .at-icon-core {
  background: linear-gradient(145deg, #F5B301 0%, #D48D01 60%, #8A5300 100%);
  box-shadow:
    0 6px 16px -4px rgba(245, 179, 1, .6),
    inset 0 1px 0 rgba(255, 255, 255, .5);
  color: #2B1A00;
}
.aurora-toast[data-variant="warning"] .at-progress-bar {
  stroke: #D48D01;
  filter: drop-shadow(0 0 4px rgba(245, 179, 1, .55));
}
.aurora-toast[data-variant="warning"] .at-edge {
  background: linear-gradient(90deg, #8A5300 0%, #F5B301 50%, #D40404 100%);
}
.aurora-toast[data-variant="warning"] .at-dot {
  background: #F5B301;
  box-shadow: 0 0 0 3px rgba(245, 179, 1, .2);
}
.aurora-toast[data-variant="warning"] .at-dot::after {
  border-color: #F5B301;
}

/* Error — red aurora accent (default look) */
.aurora-toast[data-variant="error"] .at-icon-core {
  background: linear-gradient(145deg, #FC0404 0%, #D40404 55%, #540202 100%);
  box-shadow:
    0 6px 16px -4px rgba(212, 4, 4, .65),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora-toast,
  .aurora-toast.at-in,
  .aurora-toast.at-out {
    transition-duration: .001ms !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .at-aurora,
  .at-shimmer::before,
  .at-icon-ring,
  .at-dot::after,
  .at-particle {
    animation: none !important;
  }
}

/* ---------- Responsive — mobile ---------- */
@media (max-width: 767px) {
  .aurora-toast-stack {
    top: auto;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    left: 12px;
    width: auto;
    align-items: stretch;
  }
  .aurora-toast {
    grid-template-columns: 48px 1fr 28px;
    gap: 12px;
    padding: 14px 14px 14px 12px;
    border-radius: 18px;
  }
  .at-icon-wrap { width: 48px; height: 48px; }
  .at-icon-core { width: 38px; height: 38px; border-radius: 12px; }
  .at-icon-svg { width: 18px; height: 18px; }
  .at-progress-ring { width: 48px; height: 48px; }
  .at-message { font-size: .86rem; }
  .at-close { width: 28px; height: 28px; }
  .at-close span { width: 11px; }
}

@media (max-width: 380px) {
  .aurora-toast {
    grid-template-columns: 42px 1fr 24px;
    gap: 10px;
    padding: 12px 12px 12px 10px;
  }
  .at-icon-wrap { width: 42px; height: 42px; }
  .at-icon-core { width: 34px; height: 34px; border-radius: 10px; }
  .at-icon-svg { width: 16px; height: 16px; }
  .at-progress-ring { width: 42px; height: 42px; }
  .at-message { font-size: .82rem; }
}

/* ---------- Print ---------- */
@media print {
  .aurora-toast-stack { display: none !important; }
}

/* ------------------------------------------------------------
   26. MODALS
   ------------------------------------------------------------ */
.modal-backdrop.show {
  background: rgba(4, 10, 25, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.modal {
  z-index: 1080;
}

.modal-content {
  border: 0;
  border-radius: 28px;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .6);
  overflow: hidden;
  background: #fff;
}

.modal-header {
  border: 0;
  padding: 0;
  position: relative;
}

.modal-strip {
  height: 6px;
  background: var(--gradient-red);
}

.modal-strip.blue {
  background: var(--gradient-blue);
}

.modal-inner-head {
  padding: 30px 32px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.modal-inner-head h2 {
  font-size: 1.8rem;
  letter-spacing: -.04em;
}

.modal-inner-head p {
  font-size: .85rem;
  color: var(--grey);
  margin-top: 8px;
  line-height: 1.7;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: all .3s;
}

.modal-close:hover {
  background: var(--black);
  color: #fff;
  transform: rotate(90deg);
}

.modal-body {
  padding: 26px 32px 32px;
}

.modal-footer {
  border: 0;
  padding: 0 32px 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-footer .btn-sd,
.modal-footer .btn-ghost {
  flex: 1;
  min-width: 150px;
}

.booking-recap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.booking-recap .br-route {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.booking-recap .br-meta {
  font-size: .75rem;
  color: var(--grey);
  margin-top: 5px;
}

.booking-recap .br-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -.04em;
}

.password-wrap {
  position: relative;
}

.password-wrap .control {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  color: var(--grey);
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  color: var(--blue);
}

.login-notice {
  display: flex;
  gap: 11px;
  padding: 16px;
  border-radius: 14px;
  background: #EAF2FD;
  border: 1px solid #CBDDF7;
  font-size: .78rem;
  color: var(--blue-mid);
  line-height: 1.7;
  margin-top: 20px;
}

.login-notice .bi {
  flex: none;
  margin-top: 3px;
  font-size: 1rem;
}

/* ================================================================
   S'DINGO · THE ARRIVAL — SUCCESS MODAL
   ----------------------------------------------------------------
   A cinematic confirmation panel. Aurora-lit glass, embossed
   reference ticket, glowing action buttons, a signature floating
   close orb, and a confetti host. Fully responsive. Respects
   reduced motion. Every pixel intentional.
   ================================================================ */

/* ---------- Dialog sizing ---------- */
.sd-arrival-dialog {
  max-width: 560px;
  width: calc(100% - 32px);
  margin: 0.5rem auto;
}

/* ---------- The modal card ---------- */
.sd-arrival {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(130% 100% at 0% 0%,
      rgba(252, 4, 4, 0.20) 0%, transparent 55%),
    radial-gradient(130% 100% at 100% 100%,
      rgba(15, 115, 219, 0.22) 0%, transparent 55%),
    linear-gradient(165deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow:
    0 60px 140px -40px rgba(0, 0, 0, 0.85),
    0 20px 50px -20px rgba(5, 97, 201, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ---------- Aurora backdrop ---------- */
.sd-arrival-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sd-arrival-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(48px) saturate(1.3);
}

.sd-arrival-orb-red {
  width: 380px;
  height: 380px;
  top: -25%;
  left: -15%;
  background: radial-gradient(circle, rgba(252, 74, 74, 0.55) 0%, transparent 68%);
  animation: sdArrivalOrb 22s ease-in-out infinite alternate;
}

.sd-arrival-orb-blue {
  width: 440px;
  height: 440px;
  top: -10%;
  right: -20%;
  background: radial-gradient(circle, rgba(80, 160, 240, 0.55) 0%, transparent 68%);
  animation: sdArrivalOrb 28s ease-in-out infinite alternate-reverse;
}

.sd-arrival-orb-gold {
  width: 320px;
  height: 320px;
  bottom: -25%;
  left: 40%;
  background: radial-gradient(circle, rgba(245, 179, 1, 0.32) 0%, transparent 68%);
  animation: sdArrivalOrb 32s ease-in-out infinite alternate;
}

@keyframes sdArrivalOrb {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(28px, 20px, 0) scale(1.08); }
}

.sd-arrival-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(160, 200, 245, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 60%, transparent 100%);
}

/* ---------- Brand strip ---------- */
.sd-arrival-strip {
  position: relative;
  z-index: 2;
  height: 5px;
  background: linear-gradient(90deg,
    #FC0404 0%, #F5B301 33%, #0F73DB 66%, #FC0404 100%);
  background-size: 200% 100%;
  animation: sdArrivalStrip 6s linear infinite;
}

@keyframes sdArrivalStrip {
  to { background-position: 200% 0; }
}

/* ---------- Confetti host ---------- */
.sd-arrival-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.sd-arrival-confetti .confetti {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  opacity: 0;
  border-radius: 2px;
  animation: sdArrivalConfettiFall 2.8s ease-out forwards;
}

@keyframes sdArrivalConfettiFall {
  0%   { opacity: 1; transform: translateY(-20px) rotate(0); }
  100% { opacity: 0; transform: translateY(560px) rotate(700deg); }
}

/* ---------- Body ---------- */
.sd-arrival-body {
  position: relative;
  z-index: 3;
  padding: 40px 34px 34px;
  text-align: center;
}

/* ---------- Seal (checkmark hero) ---------- */
.sd-arrival-seal {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
}

.sd-arrival-seal-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(31, 160, 78, 0.45));
  position: relative;
  z-index: 2;
}

.sd-arrival-check-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: sdArrivalCheckDraw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}

@keyframes sdArrivalCheckDraw {
  to { stroke-dashoffset: 0; }
}

.sd-arrival-seal-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid rgba(158, 231, 184, 0.45);
  pointer-events: none;
  animation: sdArrivalRing 2.8s ease-out infinite;
  opacity: 0;
}

.sd-arrival-seal-ring-2 {
  animation-delay: 1.4s;
}

@keyframes sdArrivalRing {
  0%   { transform: scale(0.85); opacity: 0.85; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ---------- Eyebrow ---------- */
.sd-arrival-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9EE7B8;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(22, 128, 60, 0.18);
  border: 1px solid rgba(158, 231, 184, 0.28);
  margin-bottom: 16px;
}

.sd-arrival-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 4px rgba(158, 231, 184, 0.18);
  position: relative;
  flex: none;
}

.sd-arrival-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #9EE7B8;
  animation: pulseRing 2.4s ease-out infinite;
}

/* ---------- Title ---------- */
.sd-arrival-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.06;
  color: #fff;
  margin: 0 0 12px;
}

.sd-arrival-title-accent {
  background: linear-gradient(90deg, #FC0404 0%, #F5B301 50%, #66A3E0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sdArrivalTextFlow 7s linear infinite;
}

@keyframes sdArrivalTextFlow {
  to { background-position: 200% 0; }
}

.sd-arrival-sub {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  max-width: 44ch;
  margin: 0 auto 30px;
}

/* ══════════════════════════════════════════════════════════════
   THE EMBOSSED REFERENCE TICKET
   ══════════════════════════════════════════════════════════════ */
.sd-arrival-ticket {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 24px 20px;
  border-radius: 22px;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 55%,
      rgba(4, 12, 45, 0.35) 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 24px 50px -24px rgba(0, 0, 0, 0.7),
    0 8px 20px -10px rgba(5, 97, 201, 0.3);
  margin-bottom: 26px;
  text-align: left;
}

.sd-arrival-ticket-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 200px at 0% 0%, rgba(252, 4, 4, 0.30) 0%, transparent 65%),
    radial-gradient(circle 240px at 100% 100%, rgba(15, 115, 219, 0.30) 0%, transparent 65%);
  filter: blur(30px);
  animation: sdArrivalOrb 20s ease-in-out infinite alternate;
}

.sd-arrival-ticket-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(160, 200, 245, 0.14) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: 0.5;
  mask-image: radial-gradient(100% 100% at 50% 50%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 0%, transparent 100%);
}

.sd-arrival-ticket > * {
  position: relative;
  z-index: 2;
}

.sd-arrival-ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sd-arrival-ticket-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.sd-arrival-ticket-label i {
  color: #FFD966;
  font-size: 12px;
}

.sd-arrival-ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9EE7B8;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(22, 128, 60, 0.22);
  border: 1px solid rgba(158, 231, 184, 0.32);
}

.sd-arrival-ticket-perf {
  height: 1px;
  margin: 16px 0;
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 50%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
}

.sd-arrival-ticket-ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.sd-arrival-ticket-ref {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  overflow-wrap: anywhere;
  line-height: 1.2;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 0 30px rgba(245, 179, 1, 0.28);
}

/* Copy button */
.sd-arrival-copy {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  flex: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 12px -4px rgba(0, 0, 0, 0.4);
}

.sd-arrival-copy:hover {
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px -8px rgba(0, 0, 0, 0.55);
}

.sd-arrival-copy:active {
  transform: translateY(0);
}

.sd-arrival-copy-icon {
  font-size: 1rem;
  color: var(--sky);
  transition: transform 0.4s ease, color 0.3s ease;
}

.sd-arrival-copy:hover .sd-arrival-copy-icon {
  transform: rotate(-8deg) scale(1.1);
  color: #FFD966;
}

.sd-arrival-copy-done {
  display: none;
  font-size: 1rem;
  color: #9EE7B8;
}

.sd-arrival-copy.is-copied .sd-arrival-copy-icon { display: none; }
.sd-arrival-copy.is-copied .sd-arrival-copy-text { color: #9EE7B8; }
.sd-arrival-copy.is-copied .sd-arrival-copy-done { display: inline-flex; }
.sd-arrival-copy.is-copied {
  background: rgba(22, 128, 60, 0.20);
  border-color: rgba(158, 231, 184, 0.42);
}

.sd-arrival-ticket-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   ACTION BUTTONS
   ══════════════════════════════════════════════════════════════ */
.sd-arrival-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* Primary CTA — the cosmic one */
.sd-arrival-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 18px;
  border: 0;
  text-align: left;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}

.sd-arrival-cta-primary {
  background:
    linear-gradient(115deg, #D40404 0%, #8C0404 45%, #0561C9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 14px 30px -12px rgba(212, 4, 4, 0.6),
    0 4px 0 rgba(4, 12, 45, 0.5);
}

.sd-arrival-cta-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 200px at 15% 20%, rgba(255, 255, 255, 0.28) 0%, transparent 65%),
    radial-gradient(circle 240px at 85% 80%, rgba(102, 163, 224, 0.35) 0%, transparent 65%);
  filter: blur(24px);
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.sd-arrival-cta-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 48%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0.28) 52%,
    transparent 70%
  );
  transform: translateX(-140%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: screen;
}

.sd-arrival-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 22px 44px -14px rgba(212, 4, 4, 0.8),
    0 6px 0 rgba(4, 12, 45, 0.6);
}

.sd-arrival-cta-primary:hover .sd-arrival-cta-aurora {
  opacity: 0.85;
}

.sd-arrival-cta-primary:hover .sd-arrival-cta-shine {
  transform: translateX(140%);
}

.sd-arrival-cta-primary:active {
  transform: translateY(1px) scale(0.99);
}

/* CTA internals */
.sd-arrival-cta-icon {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sd-arrival-cta:hover .sd-arrival-cta-icon {
  transform: rotate(-6deg) scale(1.06);
}

.sd-arrival-cta-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
}

.sd-arrival-cta-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 3px;
}

.sd-arrival-cta-body small {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

.sd-arrival-cta-arrow {
  position: relative;
  z-index: 2;
  font-size: 1.1rem;
  color: #fff;
  flex: none;
  transition: transform 0.4s ease;
}

.sd-arrival-cta:hover .sd-arrival-cta-arrow {
  transform: translateX(4px);
}

/* Secondary row */
.sd-arrival-secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sd-arrival-cta-secondary,
.sd-arrival-cta-whatsapp {
  flex-direction: row;
  padding: 12px 14px;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 12px -6px rgba(0, 0, 0, 0.4);
}

.sd-arrival-cta-secondary:hover,
.sd-arrival-cta-whatsapp:hover {
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-2px);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 24px -10px rgba(0, 0, 0, 0.55);
}

.sd-arrival-cta-icon-plain {
  width: 36px;
  height: 36px;
  font-size: 1rem;
  border-radius: 11px;
  background: rgba(102, 163, 224, 0.18);
  border-color: rgba(102, 163, 224, 0.32);
  color: var(--sky);
  box-shadow: none;
}

.sd-arrival-cta-icon-whatsapp {
  width: 36px;
  height: 36px;
  font-size: 1.05rem;
  border-radius: 11px;
  background: linear-gradient(140deg, #25D366 0%, #1EBE5D 55%, #128C7E 100%);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 6px 14px -6px rgba(37, 211, 102, 0.55);
}

.sd-arrival-cta-secondary .sd-arrival-cta-body strong,
.sd-arrival-cta-whatsapp .sd-arrival-cta-body strong {
  font-size: 0.86rem;
  margin-bottom: 1px;
}

.sd-arrival-cta-secondary .sd-arrival-cta-body small,
.sd-arrival-cta-whatsapp .sd-arrival-cta-body small {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Fine print */
.sd-arrival-fine {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(4, 12, 45, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
}

.sd-arrival-fine i {
  flex: none;
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--sky);
}

/* ══════════════════════════════════════════════════════════════
   THE SIGNATURE CLOSE ORB
   ══════════════════════════════════════════════════════════════ */
.sd-close-orb {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: grid;
  place-items: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.sd-close-orb-arrival {
  top: 18px;
  right: 18px;
}

.sd-close-orb:hover,
.sd-close-orb:focus-visible {
  transform: rotate(90deg) scale(1.08);
  outline: none;
}

.sd-close-orb .sco-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sd-close-orb .sco-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  opacity: 0;
}

.sd-close-orb .sco-ring-outer {
  animation: sdScoRing 3s ease-out infinite;
}

.sd-close-orb .sco-ring-inner {
  animation: sdScoRing 3s ease-out infinite;
  animation-delay: 1.5s;
}

@keyframes sdScoRing {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.sd-close-orb .sco-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(252, 4, 4, 0.55) 0%,
    rgba(245, 179, 1, 0.30) 40%,
    transparent 72%);
  filter: blur(10px);
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

.sd-close-orb:hover .sco-glow,
.sd-close-orb:focus-visible .sco-glow {
  opacity: 1;
}

.sd-close-orb .sco-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 28%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.28) 22%,
      transparent 48%),
    linear-gradient(145deg, #D40404 0%, #8C0404 55%, #540202 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 6px 16px -6px rgba(212, 4, 4, 0.75);
  transition: all 0.4s ease;
}

.sd-close-orb:hover .sco-sheen,
.sd-close-orb:focus-visible .sco-sheen {
  background:
    radial-gradient(circle at 30% 28%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.42) 22%,
      transparent 48%),
    linear-gradient(145deg, #FC0404 0%, #8C0404 55%, #540202 100%);
}

.sd-close-orb .sco-x {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.sd-close-orb .sco-bar {
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.sd-close-orb .sco-bar-1 { transform: rotate(45deg); }
.sd-close-orb .sco-bar-2 { transform: rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .sd-arrival-dialog {
    width: calc(100% - 20px);
    margin: 0.25rem auto;
  }
  .sd-arrival { border-radius: 22px; }
  .sd-arrival-body { padding: 32px 20px 26px; }
  .sd-arrival-seal { width: 96px; height: 96px; margin-bottom: 18px; }
  .sd-arrival-title { font-size: clamp(1.65rem, 6vw, 2rem); }
  .sd-arrival-sub { font-size: 0.86rem; margin-bottom: 24px; }
  .sd-arrival-ticket { padding: 18px 18px 16px; border-radius: 18px; margin-bottom: 22px; }
  .sd-arrival-ticket-ref { font-size: 1.3rem; }
  .sd-arrival-cta-icon { width: 40px; height: 40px; font-size: 1.1rem; }
  .sd-arrival-cta-body strong { font-size: 0.96rem; }
  .sd-arrival-cta-body small { font-size: 0.7rem; }
  .sd-arrival-secondary-row { grid-template-columns: 1fr; }
  .sd-close-orb { width: 40px; height: 40px; top: 12px; right: 12px; }
  .sd-close-orb-arrival { top: 14px; right: 14px; }
}

@media (max-width: 380px) {
  .sd-arrival-body { padding: 28px 16px 22px; }
  .sd-arrival-title { font-size: 1.5rem; }
  .sd-arrival-ticket { padding: 16px 16px 14px; }
  .sd-arrival-ticket-ref { font-size: 1.15rem; letter-spacing: 0.04em; }
  .sd-arrival-copy { padding: 8px 12px; font-size: 0.78rem; }
  .sd-arrival-cta { padding: 14px 16px; gap: 12px; }
  .sd-arrival-cta-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 11px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sd-arrival-orb,
  .sd-arrival-ticket-glow,
  .sd-arrival-strip,
  .sd-arrival-title-accent,
  .sd-arrival-seal-ring,
  .sd-arrival-live-dot::after,
  .sd-close-orb .sco-ring,
  .sd-arrival-cta-shine,
  .sd-arrival-confetti .confetti {
    animation: none !important;
  }
  .sd-arrival-check-path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .sd-close-orb:hover,
  .sd-close-orb:focus-visible { transform: none; }
  .sd-arrival-cta-primary:hover,
  .sd-arrival-cta-secondary:hover,
  .sd-arrival-cta-whatsapp:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   SIGNATURE CLOSE ORB — BOOKING MODAL VARIANT
   Positions the orb correctly inside the booking modal header,
   which has a 4px brand strip + 30px top padding.
   ══════════════════════════════════════════════════════════════ */
#bookingModal .sd-close-orb-booking {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: grid;
  place-items: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

#bookingModal .sd-close-orb-booking:hover,
#bookingModal .sd-close-orb-booking:focus-visible {
  transform: rotate(90deg) scale(1.08);
  outline: none;
}

/* On phones, pull it slightly tighter so it never collides with the title */
@media (max-width: 640px) {
  #bookingModal .sd-close-orb-booking {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }
}

/* Reduced motion — kill the spin */
@media (prefers-reduced-motion: reduce) {
  #bookingModal .sd-close-orb-booking:hover,
  #bookingModal .sd-close-orb-booking:focus-visible {
    transform: none;
  }
  #bookingModal .sd-close-orb-booking .sco-ring {
    animation: none !important;
  }
}

/* Gallery modal */
.gallery-img-wrap {
  border-radius: 18px;
  overflow: hidden;
  background: #10141c;
  aspect-ratio: 16/10;
}

.gallery-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.gallery-caption strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.gallery-caption p {
  font-size: .78rem;
  color: var(--grey);
  margin-top: 4px;
}

/* Legal modal */
.legal-body {
  font-size: .88rem;
  color: var(--grey-dark);
  line-height: 1.95;
}

.legal-body h4 {
  font-size: 1.05rem;
  margin: 22px 0 8px;
}

.legal-body p + p {
  margin-top: 12px;
}

/* ------------------------------------------------------------
   27. MEDIA WRAPPERS & REVEAL ANIMATIONS
   ------------------------------------------------------------ */

/* Image fallback — layout never breaks if an image is missing */
.media-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #101827, #041C5C);
}

.media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  text-align: center;
  padding: 20px;
}

.media-fallback .bi {
  font-size: 3rem;
  color: rgba(255, 255, 255, .3);
}

.media-wrap img.is-missing {
  visibility: hidden;
}

/* Scroll reveal (activated by .js class on html) */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal.delay-1 {
  transition-delay: .1s;
}

.reveal.delay-2 {
  transition-delay: .2s;
}

.reveal.delay-3 {
  transition-delay: .3s;
}

/* ------------------------------------------------------------
   28. PASS STACK — Boarding pass + departure stub fused
   ------------------------------------------------------------ */
.hero-stage {
  padding: 14px 0 132px;
}

.pass-stack {
  position: absolute;
  left: -26px;
  bottom: -70px;
  width: 262px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transform: rotate(-6deg);
  transition: transform .55s var(--ease-spring);
  filter: drop-shadow(0 26px 28px rgba(4, 28, 92, .38)) drop-shadow(0 4px 8px rgba(4, 4, 4, .12));
}

.pass-stack:hover {
  transform: rotate(0deg) translateY(-6px);
}

/* Top half: the boarding pass */
.pass-stack .boarding-pass {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  transform: none;
  box-shadow: none;
  z-index: 2;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  -webkit-mask:
    radial-gradient(circle 9px at 0 100%, #0000 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 100%, #0000 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 9px at 0 100%, #0000 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 100%, #0000 98%, #000) right/51% 100% no-repeat;
}

.pass-stack .boarding-pass:hover {
  transform: none;
}

/* Bottom half: the departure stub */
.pass-stack .hero-countdown {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 18px 18px;
  background: #fff;
  box-shadow: none;
  border: 1px solid var(--line);
  border-top: 2px dashed var(--line);
  border-radius: 0 0 18px 18px;
  -webkit-mask:
    radial-gradient(circle 9px at 0 0, #0000 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 0, #0000 98%, #000) right/51% 100% no-repeat;
  mask:
    radial-gradient(circle 9px at 0 0, #0000 98%, #000) left/51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 0, #0000 98%, #000) right/51% 100% no-repeat;
}

/* Brand-colour edge along the bottom of the ticket */
.pass-stack .hero-countdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-dark) 35%, var(--blue) 70%, var(--blue-bright) 100%);
}

.pass-stack .cd-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.pass-stack .cd-row > div {
  min-width: 0;
}

.pass-stack .cd-icon {
  width: 34px;
  height: 34px;
  font-size: 1rem;
  border-radius: 11px;
}

.pass-stack .cd-label {
  font-size: .62rem;
  letter-spacing: .14em;
  white-space: nowrap;
}

.pass-stack .cd-time {
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pass-stack .cd-in {
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.pass-stack .cd-big {
  font-size: 1.5rem;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--red);
  font-weight: 600;
}

/* Pass stack responsive */
@media (max-width: 767px) {
  .hero-stage {
    padding: 14px 0 136px;
  }
  .pass-stack {
    width: 224px;
    left: -6px;
    bottom: -70px;
  }
  .pass-stack .hero-countdown {
    padding: 14px 14px 16px;
  }
  .pass-stack .cd-label {
    font-size: .58rem;
    letter-spacing: .1em;
  }
  .pass-stack .cd-time {
    font-size: .84rem;
  }
  .pass-stack .cd-big {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .hero-stage {
    padding: 14px 0 144px;
  }
  .pass-stack {
    width: 206px;
    left: 0;
    bottom: -70px;
  }
  .pass-stack .cd-icon {
    width: 28px;
    height: 28px;
    font-size: .88rem;
    border-radius: 9px;
  }
  .pass-stack .cd-row {
    gap: 9px;
  }
  .pass-stack .cd-label {
    font-size: .52rem;
    letter-spacing: .05em;
  }
  .pass-stack .cd-time {
    font-size: .78rem;
  }
  .pass-stack .cd-big {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pass-stack,
  .pass-stack:hover {
    transform: rotate(-6deg);
  }
}

/* ------------------------------------------------------------
   29. RESPONSIVE — Every screen
   ------------------------------------------------------------ */

@media (max-width: 1280px) {
  .brand-type {
    display: none;
  }
  .nav-link-sd {
    padding: 10px 12px;
    font-size: .8rem;
  }
  .hero-grid {
    gap: 40px;
  }
  .console-body {
    grid-template-columns: 1fr 320px;
  }
  .fleet-grid {
    gap: 44px;
  }
  .track-grid,
  .request-grid,
  .faq-grid {
    gap: 44px;
  }
}

@media (max-width: 1100px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-call {
    display: none;
  }
  .hero {
    padding-top: 150px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .hero-copy {
    max-width: 760px;
  }
  .hero-title {
    font-size: clamp(3rem, 9vw, 5.4rem);
  }
  .hero-stage {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }
  .hero-countdown {
    max-width: 100%;
    margin-inline: auto;
    width: auto;
    display: inline-flex;
  }
  .trust-item {
    padding: 24px 18px;
    gap: 12px;
  }
  .trust-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .trust-item h4 {
    font-size: .72rem;
  }
  .trust-item p {
    font-size: .68rem;
  }
  .console-body {
    grid-template-columns: 1fr;
  }
  .fare-summary {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .fs-total {
    margin-bottom: 18px;
  }
  .fare-summary .fs-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 30px;
  }
  .fs-divider {
    margin: 22px -28px;
  }
  .board-row {
    grid-template-columns: 90px 1fr 110px 110px;
    gap: 16px;
  }
  .board-row .board-seats {
    display: none;
  }
  .fleet-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .fleet-stage {
    max-width: 760px;
  }
  .fleet-info {
    max-width: 760px;
  }
  .ticket-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ticket:last-child {
    grid-column: 1 / -1;
  }
  .track-grid,
  .request-grid,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .request-aside {
    position: static;
  }
  .business-panel {
    padding: 44px;
    gap: 40px;
    grid-template-columns: 1fr;
  }
  .stats-panel {
    max-width: 520px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .how-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .how-grid::before {
    display: none;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 100px;
  }
  section[id] {
    scroll-margin-top: 100px;
  }
  .container-sd {
    padding-inline: 20px;
  }
  .site-header {
    padding: 12px 0;
  }
  .nav-shell {
    border-radius: 22px;
    padding: 8px 10px;
    gap: 10px;
  }
  .brand-plate {
    padding: 5px 8px;
    border-radius: 12px;
  }
  .brand-logo {
    height: 42px;
    max-width: 132px;
  }
  .nav-login {
    padding: 9px 12px;
    font-size: .74rem;
  }
  .nav-book {
    display: none;
  }
  .nav-toggle {
    width: 40px;
    height: 40px;
  }
  .hero {
    padding: 132px 0 50px;
  }
  .hero-title {
    font-size: clamp(2.6rem, 10.5vw, 4.2rem);
  }
  .hero-title .line {
    gap: 10px;
  }
  .hero-title .city-index {
    font-size: 9px;
    margin-top: 8px;
  }
  .hero-title .line-red {
    font-size: .72em;
  }
  .hero-sub {
    font-size: .95rem;
    margin-top: 22px;
  }
  .hero-availability {
    font-size: .68rem;
    padding: 8px 12px;
    margin-bottom: 24px;
  }
  .hero-cta {
    gap: 10px;
    margin-top: 28px;
  }
  .hero-cta .btn-sd,
  .hero-cta .btn-ghost {
    padding: .95rem 1.3rem;
    font-size: .86rem;
    flex: 1;
  }
  .hero-proof {
    margin-top: 28px;
    gap: 12px;
  }
  .stage-frame {
    border-radius: 24px 24px 80px 24px;
    aspect-ratio: 1.15/1;
  }
  .hero-stage {
    padding: 14px 0 110px;
  }
  .boarding-pass {
    width: 224px;
    left: -6px;
    bottom: 46px;
  }
  .bp-top {
    padding: 13px 15px;
  }
  .bp-route strong {
    font-size: 1.15rem;
  }
  .stage-float {
    right: -4px;
    top: 20px;
    padding: 10px 13px;
  }
  .stage-float strong {
    font-size: .74rem;
  }
  .stage-top {
    top: 16px;
    left: 16px;
    right: 16px;
  }
  .stage-bottom {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .stage-route {
    font-size: 1.2rem;
  }
  .stage-meta {
    font-size: .65rem;
    gap: 12px;
  }
  .hero-countdown {
    padding: 10px 14px;
    gap: 12px;
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    z-index: 8;
    display: inline-flex;
  }
  .hero-countdown .cd-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
  .hero-countdown .cd-label {
    font-size: .6rem;
    letter-spacing: .1em;
  }
  .hero-countdown .cd-time {
    font-size: .92rem;
  }
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
  .trust-item {
    padding: 22px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
  }
  .trust-item:nth-child(2) {
    border-right: 0;
  }
  .trust-item:nth-child(3),
  .trust-item:nth-child(4) {
    border-bottom: 0;
  }
  .book-section,
  .experience,
  .fleet,
  .fares,
  .track-section,
  .request-section,
  .faq,
  .testimonials,
  .alerts {
    padding: 70px 0;
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
  }
  .section-head .section-lead {
    max-width: 100%;
  }
  .section-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .console {
    border-radius: 22px;
  }
  .console-head {
    padding: 18px 20px;
    gap: 14px;
  }
  .console-head h3 {
    font-size: 1rem;
  }
  .seg button {
    padding: 8px 15px;
    font-size: .74rem;
  }
  .console-form {
    padding: 24px 20px;
  }
  .form-grid,
  .form-grid.three {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .direction-row {
    grid-template-columns: 1fr 40px 1fr;
    gap: 8px;
  }
  .swap-btn {
    width: 40px;
  }
  .fare-summary {
    padding: 26px 22px;
  }
  .fare-summary .fs-rows {
    grid-template-columns: 1fr;
  }
  .fs-divider {
    margin-inline: -22px;
  }
  .fs-total .amount {
    font-size: 2.4rem;
  }
  .board-section {
    padding: 60px 0;
  }
  .board-row {
    grid-template-columns: 76px 1fr 100px;
    gap: 12px;
    padding: 18px;
  }
  .board-row .board-status-col {
    display: none;
  }
  .board-time {
    font-size: 1.35rem;
  }
  .board-path {
    font-size: .8rem;
    gap: 8px;
  }
  .board .btn-sd {
    padding: .65rem .8rem;
    font-size: .74rem;
  }

  .how-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .how-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    align-items: start;
  }
  .how-num {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    font-size: 1.2rem;
    margin-bottom: 0;
  }
  .ticket-grid {
    grid-template-columns: 1fr;
  }
  .ticket:last-child {
    grid-column: auto;
  }
  .ticket {
    padding: 28px 24px 24px;
  }
  .ticket-perf {
    margin-inline: -24px;
  }
  .track-input-row {
    flex-direction: column;
  }
  .track-input-row .btn-sd {
    width: 100%;
  }
  .tc-body {
    padding: 22px 20px;
  }
  .tc-head {
    padding: 20px;
  }
  .tr-route .tr-meta {
    margin-left: 0;
    text-align: left;
    width: 100%;
  }
  .tr-actions .btn-ghost,
  .tr-actions .btn-sd {
    min-width: 120px;
  }
  .request-card {
    border-radius: 22px;
  }
  .steps-head {
    padding: 18px 16px;
    gap: 6px;
  }
  .step-tab {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .step-tab small {
    display: none;
  }
  .step-tab strong {
    font-size: .7rem;
  }
  .step-panel {
    padding: 24px 20px;
  }
  .step-nav {
    padding: 18px 20px;
  }

  .quote-card {
    width: 300px;
    padding: 24px;
  }
  .faq-grid {
    gap: 32px;
  }
  .faq-question {
    padding: 20px;
    font-size: .95rem;
  }
  .faq-answer {
    padding: 0 20px 20px;
  }
  .alerts {
    padding: 60px 0;
  }
  .alerts-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .alerts-form select.control {
    flex: 1 1 100%;
  }
  .final-cta {
    padding: 70px 0;
  }
  .final-actions .btn-sd,
  .final-actions .btn-ghost {
    width: 100%;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mobile-bar {
    display: flex;
  }
  body {
    padding-bottom: 76px;
  }
  .support-dock {
    right: 16px;
    bottom: 92px;
  }
  .dock-main {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 1.4rem;
  }
  .back-top {
    right: 20px;
    bottom: 160px;
    width: 40px;
    height: 40px;
  }
  .concierge {
    right: 16px;
    bottom: 158px;
    width: 340px;
  }
  .toasts {
    top: 96px;
    right: 16px;
    width: calc(100vw - 32px);
    max-width: 360px;
  }
  .modal-inner-head {
    padding: 24px 22px 0;
  }
  .modal-inner-head h2 {
    font-size: 1.5rem;
  }
  .modal-body {
    padding: 22px;
  }
  .modal-footer {
    padding: 0 22px 24px;
  }
  .success-body {
    padding: 32px 22px 26px;
  }
  .success-ref strong {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .container-sd {
    padding-inline: 16px;
  }
  .hero-title {
    font-size: clamp(2.25rem, 11vw, 3.2rem);
  }
  .hero-title .city-index {
    display: none;
  }
  .hero-title .line-red {
    font-size: .78em;
  }
  .hero-cta {
    flex-direction: column;
  }
  .hero-cta .btn-sd,
  .hero-cta .btn-ghost {
    width: 100%;
  }
  .stage-float {
    display: none;
  }
  .hero-stage {
    padding: 14px 0 120px;
  }
  .boarding-pass {
    width: 200px;
    left: 0;
    bottom: 56px;
  }
  .bp-bottom {
    padding: 12px 14px;
  }
  .hero-countdown {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    z-index: 8;
    display: inline-flex;
  }
  .hero-countdown .cd-icon {
    width: 30px;
    height: 30px;
    font-size: .9rem;
    border-radius: 10px;
  }
  .hero-countdown .cd-label {
    font-size: .56rem;
    letter-spacing: .08em;
  }
  .hero-countdown .cd-time {
    font-size: .84rem;
  }
  .bp-route strong {
    font-size: 1.05rem;
  }
  .trust-item {
    padding: 20px 14px;
    gap: 10px;
  }
  .trust-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 1rem;
  }
  .trust-item h4 {
    font-size: .66rem;
    letter-spacing: .09em;
  }
  .trust-item p {
    font-size: .64rem;
  }
  .board-row {
    grid-template-columns: 66px 1fr;
    gap: 12px;
  }
  .board-row .board-action {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
  }
  .board-path small {
    font-size: .7rem;
  }
  .spec-grid {
    grid-template-columns: 1fr;
  }
  .how-step {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }
  .how-num {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.05rem;
  }

  .tr-top {
    gap: 12px;
  }
  .tr-ref strong {
    font-size: 1rem;
  }
  .concierge {
    bottom: 152px;
  }
  .step-tab strong {
    font-size: .64rem;
  }
  .step-tab .step-num {
    width: 28px;
    height: 28px;
    font-size: .68rem;
  }
  .modal-footer {
    flex-direction: column;
  }
  .modal-footer .btn-sd,
  .modal-footer .btn-ghost {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .brand-logo {
    height: 36px;
    max-width: 110px;
  }
  .nav-login span {
    display: none;
  }
  .nav-login {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }
  .hero-title {
    font-size: 2.05rem;
  }
  .stage-route {
    font-size: 1.05rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .mobile-bar {
    display: flex;
  }
  body {
    padding-bottom: 76px;
  }
  .support-dock {
    bottom: 92px;
  }
  .back-top {
    bottom: 160px;
  }
}



/* ============================================================
   LIVE ZONE BADGE (inside the booking console)
   ============================================================ */
.address-live-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.address-live-row .field-hint { flex: 1 1 200px; }

.zone-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: all .4s var(--ease);
  border: 1px solid transparent;
}

.zone-badge[data-zone="1"] {
  background: #E9F6EE;
  color: var(--green);
  border-color: #C5E7D1;
}

.zone-badge[data-zone="2"] {
  background: #FFF4E5;
  color: #8A5300;
  border-color: #F3DDB8;
}

.zone-badge .bi { font-size: .85rem; }

/* Inline "pick on map" button inside the address label */
.address-map-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blue);
  background: #EAF2FD;
  border: 1px solid #CBDDF7;
  transition: all .3s var(--ease);
}

.address-map-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-1px);
}

.address-map-btn .bi { font-size: .8rem; color: inherit !important; }

/* ============================================================
   ADDRESS MAP PICKER MODAL
   ============================================================ */
.map-modal-content {
  max-width: 960px;
  margin-inline: auto;
}

.map-modal-body {
  padding: 22px 32px 28px;
}

.map-search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.map-search-wrap {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
}

.map-search-wrap .bi-search {
  position: absolute;
  left: 14px;
  color: var(--grey);
  font-size: .95rem;
  pointer-events: none;
}

.map-search-wrap .control {
  padding-left: 40px;
  padding-right: 40px;
  height: 52px;
}

.map-search-clear {
  position: absolute;
  right: 6px;
  width: 38px; height: 38px;
  border: 0;
  background: none;
  color: var(--grey);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-search-clear:hover { background: var(--surface); color: var(--charcoal); }

.map-canvas-wrap {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #EAF2FD;
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 6px rgba(4, 28, 92, .06);
  cursor: crosshair;
}

.map-canvas {
  position: absolute;
  inset: 0;
  transition: transform .4s var(--ease);
  transform-origin: center;
  will-change: transform;
}

.map-canvas svg { width: 100%; height: 100%; display: block; }

.map-canvas-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(4, 28, 92, .1);
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blue-dark);
  box-shadow: 0 4px 12px -4px rgba(4, 28, 92, .25);
}

.map-chip .bi { color: var(--red); font-size: .7rem; }

.map-chip-nelspruit { left: 20%; top: 62%; }
.map-chip-pretoria  { left: 64%; top: 30%; }
.map-chip-joburg    { left: 74%; top: 68%; }

.map-zoom-row {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.map-zoom-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -6px rgba(4, 28, 92, .35);
  transition: all .3s var(--ease);
}

.map-zoom-btn:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 46px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 8px 14px rgba(212, 4, 4, .45));
  transition: left .5s cubic-bezier(.34, 1.56, .64, 1),
              top .5s cubic-bezier(.34, 1.56, .64, 1);
}

.map-pin svg { width: 100%; height: 100%; display: block; }

/* Live measurement panel */
.map-live-panel {
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: 20px;
  background: #FAFBFC;
  border: 1px solid var(--line);
  transition: all .4s var(--ease);
}

.mlp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.mlp-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex: none;
  background: #E9F6EE;
  color: var(--green);
  transition: all .4s var(--ease);
}

.mlp-text { flex: 1 1 auto; min-width: 0; }

.mlp-text strong {
  display: block;
  font-size: .95rem;
  color: var(--black);
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mlp-text small {
  display: block;
  font-size: .76rem;
  color: var(--grey);
  margin-top: 4px;
  line-height: 1.5;
}

.mlp-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex: none;
  padding: 8px 14px;
  border-radius: 14px;
  background: #E9F6EE;
  border: 1px solid #C5E7D1;
  color: var(--green);
  transition: all .4s var(--ease);
}

.mlp-badge span {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mlp-badge small {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: 2px;
}

.mlp-badge[data-zone="2"] {
  background: #FFF4E5;
  border-color: #F3DDB8;
  color: #8A5300;
}

.mlp-bar {
  height: 6px;
  border-radius: 100px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 12px;
}

.mlp-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, #16803C, #1FA04E);
  transition: width .6s var(--ease), background .4s ease;
}

.mlp-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--grey-dark);
}

.mlp-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mlp-legend .bi { font-size: .55rem; }

@media (max-width: 767px) {
  .map-modal-body { padding: 18px 20px 22px; }
  .map-search-row { flex-direction: column; }
  .map-search-wrap { width: 100%; }
  .map-search-row .btn-sd { width: 100%; }
  .map-canvas-wrap { aspect-ratio: 4 / 3; }
  .mlp-row { flex-wrap: wrap; }
  .mlp-badge { margin-left: auto; }
  .map-chip { font-size: .55rem; padding: 3px 8px; }
}

/* ============================================================
   24-HOUR ADVANCE BOOKING — visual cue
   ============================================================ */
input[type="date"].control[data-closed="true"] {
  border-color: var(--red);
  background: #FFF7F7;
  box-shadow: 0 0 0 4px rgba(212, 4, 4, .12);
}

.field-hint.rule-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--blue-mid);
  padding: 4px 10px;
  border-radius: 100px;
  background: #EAF2FD;
  border: 1px solid #CBDDF7;
}

.field-hint.rule-hint .bi { font-size: .8rem; }


/* ------------------------------------------------------------
   30. MOTION PREFERENCES & PRINT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .ribbon-track,
  .marquee-track {
    animation: none !important;
  }
  .marquee {
    overflow-x: auto;
  }
  .stage-float {
    animation: none;
  }
}

@media print {
  .site-header,
  .support-dock,
  .back-top,
  .mobile-bar,
  .concierge,
  .toasts,
  .grain,
  .scroll-progress,
  .ribbon,
  .trust-strip {
    display: none !important;
  }
  body {
    padding: 0;
    color: #000;
  }
  .track-console {
    box-shadow: none;
    border: 1px solid #999;
  }
  section {
    padding: 20px 0 !important;
  }
}

/* ------------------------------------------------------------
   10.7 HERO TEXT CONTRAST PROTECTION
   Keeps headline and body copy razor sharp on the aurora canvas.
   ------------------------------------------------------------ */
.hero-title,
.hero-sub,
.hero-availability,
.hero-proof {
  position: relative;
  z-index: 6;
}

.hero-title {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 40px rgba(255, 255, 255, 0.35);
}

.hero-title .line-outline {
  text-shadow: none; /* outline text stays crisp */
}

.hero-title .line-red {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 30px rgba(212, 4, 4, 0.28);
}

.hero-sub {
  color: var(--grey-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hero-sub strong {
  color: var(--black);
}

.hero-availability {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 8px 24px -10px rgba(4, 28, 92, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.proof-text {
  color: var(--grey-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ============================================================
   GROUP FEATURE PANEL — flagship replacement for multi-step form
   ============================================================ */
.group-feature-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 40px 36px;
  border-radius: 28px;
  background: linear-gradient(165deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow:
    0 40px 100px -34px rgba(4, 12, 45, .65),
    0 12px 30px -12px rgba(5, 97, 201, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Aurora blooms */
.gfp-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 560px at 15% 20%, rgba(252, 74, 74, .35) 0%, transparent 68%),
    radial-gradient(circle 620px at 85% 25%, rgba(80, 160, 240, .38) 0%, transparent 68%),
    radial-gradient(circle 520px at 55% 95%, rgba(245, 179, 1, .22) 0%, transparent 68%),
    radial-gradient(circle 640px at 90% 85%, rgba(140, 4, 4, .22) 0%, transparent 68%);
  filter: blur(44px) saturate(1.25);
  animation: gfpAurora 20s ease-in-out infinite alternate;
}

@keyframes gfpAurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.08); }
}

/* Technical grid */
.gfp-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(160, 200, 245, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, .07) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 60%, transparent 100%);
  animation: gfpGridDrift 60s linear infinite;
}

@keyframes gfpGridDrift {
  to { background-position: 68px 68px, 68px 68px; }
}

/* Glass orbs */
.gfp-orbs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gfp-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(1px);
}
.gfp-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, var(--oc, rgba(15,115,219,.7)) 0%, transparent 75%);
}
.gfp-orb-1 { width: 260px; height: 260px; top: 4%; left: -6%; --oc: rgba(252,4,4,.6); animation: gfpOrb1 24s ease-in-out infinite alternate; }
.gfp-orb-2 { width: 320px; height: 320px; top: 40%; right: -8%; --oc: rgba(15,115,219,.6); animation: gfpOrb2 30s ease-in-out infinite alternate; }
.gfp-orb-3 { width: 180px; height: 180px; bottom: -6%; left: 40%; --oc: rgba(245,179,1,.55); animation: gfpOrb3 26s ease-in-out infinite alternate; }

@keyframes gfpOrb1 { to { transform: translate3d(80px, 60px, 0) scale(1.15); } }
@keyframes gfpOrb2 { to { transform: translate3d(-110px, 50px, 0) scale(1.1); } }
@keyframes gfpOrb3 { to { transform: translate3d(60px, -80px, 0) scale(1.2); } }

/* Content above layers */
.group-feature-panel > *:not(.gfp-aurora):not(.gfp-grid):not(.gfp-orbs) {
  position: relative;
  z-index: 3;
}

/* Head */
.gfp-head { margin-bottom: 30px; }

.gfp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9EE7B8;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(22, 128, 60, .18);
  border: 1px solid rgba(158, 231, 184, .28);
  margin-bottom: 20px;
}

.gfp-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 4px rgba(158, 231, 184, .18);
  position: relative;
  flex: none;
}
.gfp-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #9EE7B8;
  animation: pulseRing 2.4s ease-out infinite;
}

.gfp-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 16px;
}

.gfp-gradient-text {
  background: linear-gradient(90deg, #FC0404 0%, #F5B301 35%, #66A3E0 70%, #0F73DB 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gfpTextFlow 8s linear infinite;
}

@keyframes gfpTextFlow {
  to { background-position: 200% 0; }
}

.gfp-sub {
  font-size: .95rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.85;
  max-width: 62ch;
}

/* Capability tiles — the star of the show */
.gfp-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}

.gfp-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: all .45s cubic-bezier(.22, 1, .36, 1);
  cursor: pointer;
  overflow: hidden;
}

.gfp-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(212, 4, 4, .25), rgba(5, 97, 201, .25));
  opacity: 0;
  transition: opacity .45s ease;
}

.gfp-tile:hover,
.gfp-tile:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .35);
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  outline: none;
}

.gfp-tile:hover::before,
.gfp-tile:focus-visible::before {
  opacity: 1;
}

.gfp-tile-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .4s ease;
}

.gfp-tile:hover .gfp-tile-icon,
.gfp-tile:focus-visible .gfp-tile-icon {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(255, 255, 255, .22);
}

.gfp-tile-body { flex: 1 1 auto; min-width: 0; }

.gfp-tile-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: 2px;
}

.gfp-tile-body small {
  display: block;
  font-size: .74rem;
  color: rgba(255, 255, 255, .62);
  line-height: 1.45;
}

.gfp-tile-arrow {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  color: rgba(255, 255, 255, .8);
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
}

.gfp-tile:hover .gfp-tile-arrow,
.gfp-tile:focus-visible .gfp-tile-arrow {
  background: #fff;
  color: var(--black);
  transform: rotate(45deg);
}

/* Value ticker */
.gfp-ticker {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  margin: 0 -40px 22px;
  border-top: 1px dashed rgba(255, 255, 255, .12);
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.gfp-ticker-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: gfpTicker 40s linear infinite;
}

.gfp-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  letter-spacing: .01em;
}

.gfp-ticker-item .bi { color: #9EE7B8; font-size: .95rem; }

.gfp-ticker-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  flex: none;
}

@keyframes gfpTicker {
  to { transform: translateX(-50%); }
}

/* Live stat counters */
.gfp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}

.gfp-stat {
  position: relative;
  text-align: center;
  padding: 18px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: all .4s cubic-bezier(.22, 1, .36, 1);
}

.gfp-stat:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  transform: translateY(-3px);
}

.gfp-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #B9D8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.gfp-stat-num::after {
  content: attr(data-suffix);
  font-size: .55em;
  -webkit-text-fill-color: #9EE7B8;
  margin-left: 2px;
}

.gfp-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  line-height: 1.5;
}

/* Dual CTA row */
.gfp-cta-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.gfp-cta-primary {
  justify-content: center;
  font-size: .92rem;
  padding: 1.05rem 1.4rem;
}

.gfp-cta-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.3rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  text-decoration: none;
  transition: all .35s cubic-bezier(.22, 1, .36, 1);
}

.gfp-cta-secondary:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  transform: translateY(-2px);
}

.gfp-cta-secondary .bi {
  font-size: 1.15rem;
  color: var(--sky);
  flex: none;
}

.gfp-cta-secondary small {
  display: block;
  font-size: .68rem;
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 2px;
}

.gfp-cta-secondary strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.gfp-fine {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .74rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.6;
  margin-top: 6px;
}

.gfp-fine .bi {
  flex: none;
  color: #9EE7B8;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 900px) {
  .gfp-tiles { grid-template-columns: 1fr; }
  .gfp-stats { grid-template-columns: repeat(2, 1fr); }
  .gfp-cta-row { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .group-feature-panel { padding: 32px 22px 26px; border-radius: 22px; }
  .gfp-ticker { margin-inline: -22px; }
  .gfp-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }
}

@media (max-width: 480px) {
  .group-feature-panel { padding: 28px 18px 22px; }
  .gfp-ticker { margin-inline: -18px; }
  .gfp-tile { padding: 14px; gap: 12px; }
  .gfp-tile-icon { width: 40px; height: 40px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gfp-aurora,
  .gfp-grid,
  .gfp-orb-1,
  .gfp-orb-2,
  .gfp-orb-3,
  .gfp-ticker-track,
  .gfp-gradient-text,
  .gfp-live-dot::after {
    animation: none !important;
  }
}

/* ============================================================
   TRACKING LAUNCH CARD — replaces the old inline trackConsole
   ============================================================ */
.track-launch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 32px 30px;
  border-radius: 26px;
  background: linear-gradient(165deg, #0A1430 0%, #101E4A 45%, #0A1430 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, .55),
    0 12px 32px -14px rgba(5, 97, 201, .35),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.tlc-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 460px at 15% 20%, rgba(80, 160, 240, .40) 0%, transparent 68%),
    radial-gradient(circle 500px at 85% 80%, rgba(212, 4, 4, .28) 0%, transparent 68%),
    radial-gradient(circle 380px at 50% 95%, rgba(245, 179, 1, .18) 0%, transparent 68%);
  filter: blur(38px) saturate(1.2);
  animation: tlcAurora 22s ease-in-out infinite alternate;
}

@keyframes tlcAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

.tlc-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tlc-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(1px);
}
.tlc-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.7) 0%, transparent 42%),
    radial-gradient(circle at 50% 50%, var(--oc) 0%, transparent 75%);
}
.tlc-orb-1 { width: 220px; height: 220px; top: -12%; right: -6%; --oc: rgba(15, 115, 219, .65); animation: tlcOrb1 28s ease-in-out infinite alternate; }
.tlc-orb-2 { width: 160px; height: 160px; bottom: -14%; left: -4%; --oc: rgba(252, 74, 74, .55); animation: tlcOrb2 24s ease-in-out infinite alternate; }

@keyframes tlcOrb1 { to { transform: translate3d(-70px, 60px, 0) scale(1.15); } }
@keyframes tlcOrb2 { to { transform: translate3d(80px, -50px, 0) scale(1.1); } }

.track-launch > *:not(.tlc-aurora):not(.tlc-orbs) {
  position: relative;
  z-index: 2;
}

.tlc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9EE7B8;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(22, 128, 60, .16);
  border: 1px solid rgba(158, 231, 184, .28);
  margin-bottom: 18px;
}

.tlc-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 4px rgba(158, 231, 184, .18);
  position: relative;
  flex: none;
}
.tlc-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #9EE7B8;
  animation: pulseRing 2.4s ease-out infinite;
}

.tlc-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 12px;
}

.tlc-grad {
  background: linear-gradient(90deg, #FC0404 0%, #F5B301 45%, #66A3E0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: tlcTextFlow 8s linear infinite;
}

@keyframes tlcTextFlow { to { background-position: 200% 0; } }

.tlc-sub {
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.75;
  margin-bottom: 22px;
}

.tlc-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

.tlc-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  transition: all .35s var(--ease);
}

.tlc-feature:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
  transform: translateX(3px);
}

.tlc-feature-icon {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--sky);
}

.tlc-feature strong {
  display: block;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.005em;
}

.tlc-feature small {
  display: block;
  font-size: .72rem;
  color: rgba(255, 255, 255, .58);
  margin-top: 2px;
  line-height: 1.4;
}

.tlc-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 0;
  background: linear-gradient(115deg, #D40404 0%, #8C0404 45%, #0561C9 100%);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 14px 30px -12px rgba(212, 4, 4, .55),
    0 4px 0 rgba(4, 12, 45, .55);
  transition: all .45s cubic-bezier(.22, 1, .36, 1);
}

.tlc-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .9s var(--ease);
}

.tlc-cta:hover,
.tlc-cta:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 20px 40px -14px rgba(212, 4, 4, .75),
    0 5px 0 rgba(4, 12, 45, .65);
  outline: none;
}

.tlc-cta:hover::before,
.tlc-cta:focus-visible::before {
  transform: translateX(140%);
}

.tlc-cta:active {
  transform: translateY(1px) scale(.99);
}

.tlc-cta-icon {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}

.tlc-cta-body { flex: 1 1 auto; min-width: 0; }
.tlc-cta-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
}
.tlc-cta-body small {
  display: block;
  font-size: .74rem;
  color: rgba(255, 255, 255, .78);
  margin-top: 3px;
}

.tlc-cta-arrow {
  font-size: 1.1rem;
  transition: transform .4s var(--ease);
}
.tlc-cta:hover .tlc-cta-arrow { transform: translate(3px, -3px); }

.tlc-sample {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .65);
  font-size: .76rem;
  font-family: inherit;
  cursor: pointer;
  transition: color .3s;
}
.tlc-sample:hover { color: #fff; }
.tlc-sample code {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--sky);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: .72rem;
}
.tlc-sample .bi-stars { color: #FFD966; }

@media (max-width: 767px) {
  .track-launch { padding: 26px 22px 22px; border-radius: 22px; }
  .tlc-title { font-size: 1.5rem; }
}

/* ============================================================
   TRACKING MODAL — the flagship tracking experience
   ============================================================ */
.track-modal-dialog {
  max-width: 640px;
  width: calc(100% - 32px);
  margin-inline: auto;
}

.track-modal-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(170deg, #0A1430 0%, #101E4A 50%, #0A1430 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    0 40px 120px -20px rgba(0, 0, 0, .75),
    0 12px 32px -10px rgba(5, 97, 201, .35),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* Aurora background */
.tm-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.tm-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(46px) saturate(1.3);
}
.tm-orb-1 {
  width: 380px; height: 380px;
  top: -25%; left: -15%;
  background: radial-gradient(circle, rgba(252, 74, 74, .55) 0%, transparent 68%);
  animation: tmOrb 22s ease-in-out infinite alternate;
}
.tm-orb-2 {
  width: 440px; height: 440px;
  top: -10%; right: -20%;
  background: radial-gradient(circle, rgba(80, 160, 240, .55) 0%, transparent 68%);
  animation: tmOrb 28s ease-in-out infinite alternate-reverse;
}
.tm-orb-3 {
  width: 320px; height: 320px;
  bottom: -25%; left: 40%;
  background: radial-gradient(circle, rgba(245, 179, 1, .35) 0%, transparent 68%);
  animation: tmOrb 32s ease-in-out infinite alternate;
}

@keyframes tmOrb {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(30px, 20px, 0) scale(1.1); }
}

.tm-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(160, 200, 245, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 60%, transparent 100%);
}

.tm-strip {
  background: linear-gradient(90deg, #D40404 0%, #F5B301 33%, #0561C9 66%, #D40404 100%);
  background-size: 200% 100%;
  animation: tlcTextFlow 6s linear infinite;
  height: 4px;
}

.track-modal-content > *:not(.tm-bg) {
  position: relative;
  z-index: 2;
}

/* Head */
.tm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px 0;
}

.tm-head-left { min-width: 0; }

.tm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9EE7B8;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(22, 128, 60, .18);
  border: 1px solid rgba(158, 231, 184, .28);
  margin-bottom: 14px;
}

.tm-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 4px rgba(158, 231, 184, .18);
  position: relative;
  flex: none;
}
.tm-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #9EE7B8;
  animation: pulseRing 2.4s ease-out infinite;
}

.tm-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 8px;
}

.tm-title-accent {
  background: linear-gradient(90deg, #FC0404 0%, #F5B301 50%, #66A3E0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: tlcTextFlow 8s linear infinite;
}

.tm-sub {
  font-size: .88rem;
  color: rgba(255, 255, 255, .68);
  line-height: 1.65;
  max-width: 42ch;
}

.tm-close {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  flex: none;
}
.tm-close:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: rotate(90deg);
}

/* Body */
.tm-body {
  padding: 24px 30px 30px;
}

.tm-form { margin-bottom: 14px; }

.tm-input-row {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.tm-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sky);
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 2;
}

.tm-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding-left: 46px !important;
  padding-right: 16px;
  font-family: var(--font-mono);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 14px;
  color: var(--black);
  transition: all .3s var(--ease);
}

.tm-input::placeholder {
  color: #98A0B0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
}

.tm-input:focus {
  background: #fff;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(102, 163, 224, .25);
  outline: none;
}

.tm-submit {
  padding: 0 22px;
  font-size: .88rem;
  flex: none;
  height: 56px;
  border-radius: 14px;
}

/* Recent chips */
.tm-recent {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: .74rem;
  color: rgba(255, 255, 255, .6);
}

.tm-recent-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tm-chips {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tm-chips .recent-chip {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .3s var(--ease);
}

.tm-chips .recent-chip:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .35);
  transform: translateY(-2px);
}

/* Sample prompt */
.tm-sample {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .65);
  font-size: .76rem;
  font-family: inherit;
  cursor: pointer;
  transition: color .3s;
}
.tm-sample:hover { color: #fff; }
.tm-sample code {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--sky);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: .72rem;
}
.tm-sample .bi-stars { color: #FFD966; }

/* Output area */
.tm-output {
  border-radius: 18px;
  min-height: 180px;
  transition: all .4s var(--ease);
}

.tm-output:empty,
.tm-output > * {
  animation: fadeUp .5s var(--ease);
}

.tm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .18);
}

.tm-empty-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--sky);
  background: rgba(102, 163, 224, .14);
  border: 1px solid rgba(102, 163, 224, .25);
  margin-bottom: 16px;
}

.tm-empty strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.tm-empty p {
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.65;
  max-width: 34ch;
}

/* Adjust the existing .track-result when it renders inside the dark modal */
.tm-output .track-result {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 22px;
  color: #fff;
}

.tm-output .tr-ref { color: rgba(255, 255, 255, .6); }
.tm-output .tr-ref strong { color: #fff; }
.tm-output .tr-route {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}
.tm-output .tr-route strong { color: #fff; }
.tm-output .tr-route .tr-meta { color: rgba(255, 255, 255, .62); }
.tm-output .timeline::before { background: rgba(255, 255, 255, .12); }
.tm-output .tl-node {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .6);
}
.tm-output .tl-content strong { color: #fff; }
.tm-output .tl-content small { color: rgba(255, 255, 255, .6); }
.tm-output .timeline li.pending .tl-content strong { color: rgba(255, 255, 255, .35); }
.tm-output .timeline li.pending .tl-content small { color: rgba(255, 255, 255, .28); }
.tm-output .review-box {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.tm-output .review-box strong { color: #fff !important; }
.tm-output .review-box p { color: rgba(255, 255, 255, .68) !important; }
.tm-output .tr-actions { border-color: rgba(255, 255, 255, .12); }
.tm-output .seats-bar { background: rgba(255, 255, 255, .08); }
.tm-output .tr-notice { color: rgba(255, 255, 255, .55); }
.tm-output .tr-notice .bi { color: var(--sky); }

/* Error blocks on dark */
.tm-output .track-error {
  background: rgba(212, 4, 4, .14);
  border: 1px solid rgba(255, 107, 107, .3);
}
.tm-output .track-error strong { color: #FFB3B3; }
.tm-output .track-error p { color: rgba(255, 255, 255, .75); }
.tm-output .track-error .bi { color: #FF6B6B; }

/* Notice at the bottom of the modal */
.tm-notice { color: rgba(255, 255, 255, .55); }

/* Responsive */
@media (max-width: 767px) {
  .tm-head { padding: 22px 20px 0; }
  .tm-body { padding: 20px 20px 24px; }
  .track-modal-dialog { max-width: 100%; width: calc(100% - 20px); }
  .track-modal-content { border-radius: 22px; }
  .tm-input-row { flex-direction: column; align-items: stretch; }
  .tm-input { padding-left: 42px !important; height: 52px; }
  .tm-submit { width: 100%; height: 52px; }
  .tm-close { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .tlc-aurora, .tlc-orb-1, .tlc-orb-2,
  .tlc-grad, .tm-orb, .tm-title-accent, .tm-strip, .tlc-live-dot::after, .tm-live-dot::after {
    animation: none !important;
  }
}



/* ============================================================
   DEPARTURE BOARD — Aurora-lit evening sky
   Same visual language as the group feature panel and the
   business section: layered aurora, technical grid, glass
   orbs, signature route ribbon, vignette.
   ============================================================ */

/* Rebase the section — deep twilight family */
.board-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0 120px;
  background: linear-gradient(180deg, #0A1430 0%, #101E4A 45%, #0A1430 100%);
  color: #fff;
}

/* Old flat-gradient seam — keep a soft top fade, but let the aurora glow through */
.board-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 8;
  background: linear-gradient(
    180deg,
    rgba(27, 35, 80, .55) 0%,
    rgba(27, 35, 80, .22) 45%,
    transparent 100%
  );
}

/* Ensure content sits above the new aurora layers */
.board-section > .container-sd {
  position: relative;
  z-index: 20;
}

/* ---------- Background host (now a canvas aurora mount) ---------- */
.db-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Legacy .db-aurora / .db-grid / .db-orbs / .db-orb* / .db-ribbon /
   .db-ribbon-path / .db-vignette are no longer in the DOM — the
   canvas engine replaces them. */

/* ---------- LAYER 1 · Aurora mesh ---------- */
.db-aurora {
  position: absolute;
  inset: -15%;
  z-index: 1;
  background:
    /* Red bloom — top-left */
    radial-gradient(circle 640px at 18% 22%, rgba(252, 74, 74, .28) 0%, rgba(212, 4, 4, .12) 40%, transparent 74%),
    /* Blue bloom — top-right (brighter) */
    radial-gradient(circle 760px at 82% 20%, rgba(80, 160, 240, .32) 0%, rgba(15, 115, 219, .15) 42%, transparent 76%),
    /* Gold accent — bottom centre */
    radial-gradient(circle 620px at 55% 92%, rgba(245, 179, 1, .16) 0%, rgba(245, 179, 1, .06) 42%, transparent 72%),
    /* Deep indigo — bottom-right */
    radial-gradient(circle 800px at 88% 78%, rgba(60, 90, 180, .35) 0%, transparent 68%),
    /* Magenta whisper — mid-left */
    radial-gradient(circle 540px at 8% 68%, rgba(180, 60, 60, .16) 0%, transparent 70%);
  filter: blur(46px) saturate(1.18);
  animation: dbAurora 24s ease-in-out infinite alternate;
  will-change: transform, filter;
}

@keyframes dbAurora {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(42px) saturate(1.22) hue-rotate(0deg);
  }
  50% {
    transform: translate3d(-2.5%, 1.5%, 0) scale(1.06) rotate(1.4deg);
    filter: blur(50px) saturate(1.35) hue-rotate(6deg);
  }
  100% {
    transform: translate3d(2.5%, -1.2%, 0) scale(1.03) rotate(-1.2deg);
    filter: blur(46px) saturate(1.28) hue-rotate(-4deg);
  }
}

/* ---------- LAYER 2 · Technical grid ---------- */
.db-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(160, 200, 245, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, .08) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px);
  background-size:
    76px 76px,
    76px 76px,
    24px 24px;
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 0%, #000 62%, transparent 100%);
  animation: dbGridDrift 60s linear infinite;
  opacity: .85;
}

@keyframes dbGridDrift {
  to {
    background-position: 76px 76px, 76px 76px, 24px 24px;
  }
}

/* ---------- LAYER 3 · Floating glass orbs ---------- */
.db-orbs {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.db-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.5px);
  mix-blend-mode: screen;
  will-change: transform;
}

.db-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .22) 18%, transparent 42%),
    radial-gradient(circle at 50% 50%, var(--oc) 0%, var(--oe) 62%, transparent 80%);
}

.db-orb::after {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--og) 0%, transparent 65%);
  filter: blur(20px);
  opacity: .8;
}

.db-orb-1 {
  width: 280px; height: 280px;
  top: 5%; left: 3%;
  --oc: rgba(252, 4, 4, .8);
  --oe: rgba(140, 4, 4, .4);
  --og: rgba(212, 4, 4, .45);
  animation: dbOrb1 26s ease-in-out infinite alternate;
}

.db-orb-2 {
  width: 340px; height: 340px;
  top: 12%; right: 2%;
  --oc: rgba(15, 115, 219, .8);
  --oe: rgba(4, 28, 92, .4);
  --og: rgba(5, 97, 201, .45);
  animation: dbOrb2 32s ease-in-out infinite alternate;
}

.db-orb-3 {
  width: 200px; height: 200px;
  bottom: 6%; left: 42%;
  --oc: rgba(245, 179, 1, .8);
  --oe: rgba(212, 4, 4, .35);
  --og: rgba(245, 179, 1, .4);
  animation: dbOrb3 24s ease-in-out infinite alternate;
}

@keyframes dbOrb1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(110px, 80px, 0) scale(1.12); }
}
@keyframes dbOrb2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-140px, 60px, 0) scale(1.1); }
}
@keyframes dbOrb3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-70px, -90px, 0) scale(1.18); }
}

/* ---------- LAYER 4 · Signature route ribbon ---------- */
.db-ribbon {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: .85;
  mix-blend-mode: screen;
  pointer-events: none;
}

.db-ribbon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.db-ribbon-path {
  stroke-dasharray: 40 22;
  animation: dbRibbonFlow 22s linear infinite, dbRibbonPulse 8s ease-in-out infinite;
}

.db-ribbon-p1 { animation-duration: 20s, 7s; }
.db-ribbon-p2 { animation-duration: 28s, 9s; animation-delay: -4s, -2s; }

@keyframes dbRibbonFlow {
  to { stroke-dashoffset: -620; }
}

@keyframes dbRibbonPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ---------- LAYER 5 · Vignette ---------- */
.db-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 45%, transparent 58%, rgba(10, 20, 48, .35) 100%),
    linear-gradient(180deg,
      rgba(10, 20, 48, .5) 0%,
      transparent 15%,
      transparent 85%,
      rgba(10, 20, 48, .5) 100%);
  mix-blend-mode: multiply;
}

/* ============================================================
   BOARD SURFACES — glassy, luminous, matching the flagship panels
   ============================================================ */

.board-section .section-title { color: #fff; }
.board-section .section-title .accent { color: var(--gold); }
.board-section .eyebrow { color: var(--sky); }

.board {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -34px rgba(4, 12, 45, .7),
    0 14px 40px -18px rgba(5, 97, 201, .35),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* Signature brand bar across the top of the board */
.board::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #D40404 0%, #F5B301 33%, #0561C9 66%, #D40404 100%);
  background-size: 200% 100%;
  animation: dbSignatureBar 7s linear infinite;
  z-index: 2;
}

@keyframes dbSignatureBar {
  to { background-position: 200% 0; }
}

.board-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr 130px 120px 130px;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  transition: background .4s var(--ease), transform .4s var(--ease);
}

.board-row:hover {
  background: rgba(255, 255, 255, .09);
}

.board-row:hover .board-time {
  transform: translateX(3px);
}

.board-row:last-child { border-bottom: 0; }

.board-time {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  transition: transform .4s var(--ease);
}

.board-time small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .5);
  font-weight: 500;
  margin-top: 3px;
}

.board-path {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .9rem;
  font-weight: 600;
}

.board-path > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .95);
}

.board-path .bi {
  color: var(--red-bright);
  font-size: .85rem;
}

.board-path small {
  display: block;
  font-weight: 500;
  color: rgba(255, 255, 255, .6);
  font-size: .74rem;
}

.board-seats span {
  color: rgba(255, 255, 255, .75) !important;
  font-size: .74rem;
}

.seats-bar {
  height: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
  margin-top: 8px;
}

.seats-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #66A3E0, #0F73DB);
  border-radius: 10px;
  transition: width .6s var(--ease);
  box-shadow: 0 0 12px rgba(102, 163, 224, .5);
}

.seats-bar.low i {
  background: linear-gradient(90deg, #FC0404, #8C0404);
  box-shadow: 0 0 12px rgba(212, 4, 4, .55);
}

.board-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 100px;
  background: rgba(22, 128, 60, .18);
  border: 1px solid rgba(158, 231, 184, .28);
  color: #9EE7B8;
}

.board-status.limited {
  background: rgba(212, 4, 4, .18);
  border-color: rgba(255, 107, 107, .32);
  color: #FF9B9B;
}

.board-status .bi { font-size: .85rem; }

/* Select button — glassy pill */
.board-action .btn-sd {
  background: linear-gradient(115deg, #D40404 0%, #8C0404 45%, #0561C9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 10px 22px -10px rgba(212, 4, 4, .55),
    0 3px 0 rgba(4, 12, 45, .55);
  transition: all .4s cubic-bezier(.22, 1, .36, 1);
}

.board-action .btn-sd:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 16px 30px -12px rgba(212, 4, 4, .7),
    0 4px 0 rgba(4, 12, 45, .65);
}

/* Tabs — glass pills with the brand accent on active */
.board-tab {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .78);
  transition: all .35s var(--ease);
}

.board-tab.active {
  background: #fff;
  color: var(--black);
  border-color: #fff;
  box-shadow: 0 8px 20px -8px rgba(255, 255, 255, .45);
}

.board-tab:hover:not(.active) {
  border-color: var(--sky);
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

/* Small caption below the board */
.board-section p[style*="color:var(--grey)"] {
  color: rgba(255, 255, 255, .55) !important;
  position: relative;
  z-index: 10;
}

/* ============================================================
   Mobile — dial down the layers so phones stay smooth
   ============================================================ */
@media (max-width: 767px) {
  .board-section {
    padding: 70px 0 90px;
  }
  .db-aurora { filter: blur(38px) saturate(1.1); }
  .db-orb-1, .db-orb-2 { width: 180px; height: 180px; }
  .db-orb-3 { width: 130px; height: 130px; }
  .db-ribbon { opacity: .55; }
  .board::before { height: 3px; }
  .board {
    border-radius: 20px;
  }
  .board-row {
    grid-template-columns: 76px 1fr 100px;
    gap: 12px;
    padding: 18px;
  }
  .board-row .board-status-col { display: none; }
  .board-time { font-size: 1.35rem; }
  .board-path { font-size: .82rem; }
  .board-path small { font-size: .68rem; }
}

@media (max-width: 480px) {
  .board-row {
    grid-template-columns: 66px 1fr;
    gap: 12px;
  }
  .board-row .board-action {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
  }
}

/* ============================================================
   Reduced motion — freeze the scene, keep the beauty
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .db-aurora,
  .db-grid,
  .db-orb-1,
  .db-orb-2,
  .db-orb-3,
  .db-ribbon-path,
  .board::before {
    animation: none !important;
  }
}

/* ============================================================
   FLAGSHIP FARE TOGGLE — the most beautiful segmented control
   on the web. Aurora-lit, magnetic, spring-animated, fully
   responsive, and screen-reader perfect.
   ============================================================ */

/* ---------- Wrapper ---------- */
.fare-toggle-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* ---------- The toggle itself ---------- */
.fare-toggle {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  border-radius: 24px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .96), rgba(246, 248, 254, .92));
  border: 1px solid rgba(4, 28, 92, .10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 -1px 0 rgba(4, 4, 4, .04) inset,
    0 10px 28px -14px rgba(4, 28, 92, .28),
    0 4px 10px -6px rgba(5, 97, 201, .14);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  overflow: hidden;
  width: min(440px, 100%);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}

.fare-toggle:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 -1px 0 rgba(4, 4, 4, .05) inset,
    0 18px 40px -16px rgba(4, 28, 92, .35),
    0 8px 18px -8px rgba(5, 97, 201, .22);
}

/* ---------- The gliding pill (the magic) ---------- */
.fare-toggle-glider {
  position: absolute;
  z-index: 0;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: calc(50% - 11px);
  border-radius: 18px;
  background:
    linear-gradient(140deg, #FC0404 0%, #D40404 45%, #8C0404 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 14px 32px -10px rgba(212, 4, 4, .55),
    0 4px 10px -4px rgba(4, 28, 92, .35);
  transition:
    transform .65s cubic-bezier(.34, 1.56, .64, 1),
    background .5s var(--ease),
    box-shadow .5s var(--ease);
  will-change: transform;
}

/* Returning state — pill slides right, becomes blue */
.fare-toggle[data-mode="return"] .fare-toggle-glider {
  transform: translateX(calc(100% + 6px));
  background:
    linear-gradient(140deg, #0F73DB 0%, #0561C9 50%, #041C5C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .22),
    0 14px 32px -10px rgba(5, 97, 201, .6),
    0 4px 10px -4px rgba(4, 28, 92, .4);
}

/* Shine sweep across the glider */
.fare-toggle-glider::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, .55) 50%,
    transparent 70%);
  transform: translateX(-120%);
  animation: fareGliderShine 4.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes fareGliderShine {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ---------- Options ---------- */
.fare-toggle-option {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  transition:
    color .35s var(--ease),
    transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.fare-toggle-option:hover {
  transform: translateY(-1px);
}

.fare-toggle-option:active {
  transform: translateY(1px) scale(.985);
}

.fare-toggle-option:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 20px;
}

/* ---------- Option icon ---------- */
.fto-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: #EAF2FD;
  color: var(--blue);
  flex: none;
  transition:
    background .4s var(--ease),
    color .4s var(--ease),
    transform .5s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .4s var(--ease);
}

/* ---------- Option text ---------- */
.fto-text { min-width: 0; display: flex; flex-direction: column; }

.fto-text strong {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--black);
  line-height: 1.15;
  transition: color .4s var(--ease);
}

.fto-text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 3px;
  transition: color .4s var(--ease);
}

/* ---------- Price badge ---------- */
.fto-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--blue-mid);
  background: #EAF2FD;
  border: 1px solid #CBDDF7;
  white-space: nowrap;
  transition:
    background .4s var(--ease),
    color .4s var(--ease),
    border-color .4s var(--ease),
    transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.fto-badge-save {
  color: var(--green);
  background: #E9F6EE;
  border-color: #C5E7D1;
}

.fto-badge-save .bi {
  font-size: .82rem;
  animation: fareSavePulse 2.4s ease-in-out infinite;
}

@keyframes fareSavePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ---------- Sparkle on the return option ---------- */
.fto-sparkle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD966 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}

.fare-toggle[data-mode="return"] .fto-sparkle {
  opacity: 1;
  animation: fareSparkle 2s ease-in-out infinite;
}

@keyframes fareSparkle {
  0%, 100% { transform: scale(.6); opacity: .3; }
  50%      { transform: scale(1.4); opacity: 1; }
}

/* ============================================================
   ACTIVE STATE — when this option is selected
   ============================================================ */
.fare-toggle-option[aria-pressed="true"] {
  color: #fff;
}

.fare-toggle-option[aria-pressed="true"] .fto-icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.fare-toggle-option[aria-pressed="true"] .fto-text strong {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.fare-toggle-option[aria-pressed="true"] .fto-text small {
  color: rgba(255, 255, 255, .8);
}

.fare-toggle-option[aria-pressed="true"] .fto-badge {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  transform: scale(1.02);
}

.fare-toggle-option[aria-pressed="true"] .fto-badge-save {
  background: rgba(158, 231, 184, .22);
  color: #D6FBE2;
  border-color: rgba(158, 231, 184, .35);
}

/* Idle (unselected) option dims slightly so active pops */
.fare-toggle-option[aria-pressed="false"] {
  opacity: .82;
}
.fare-toggle-option[aria-pressed="false"]:hover {
  opacity: 1;
}

/* ---------- Microcopy under the toggle ---------- */
.fare-toggle-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: var(--grey);
  line-height: 1.6;
  max-width: 46ch;
}

.fare-toggle-note .bi {
  color: var(--blue);
  font-size: .9rem;
  flex: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet — tighten spacing */
@media (max-width: 900px) {
  .fare-toggle { width: 100%; max-width: 520px; }
  .fare-toggle-option { padding: 13px 15px; gap: 10px; }
  .fto-icon { width: 32px; height: 32px; }
  .fto-text strong { font-size: .94rem; }
}

/* Mobile — stack vertically for maximum readability */
@media (max-width: 600px) {
  .fare-toggle {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px;
    border-radius: 22px;
    width: 100%;
  }

  /* On stacked mobile, the glider moves top↔bottom instead */
  .fare-toggle-glider {
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: auto;
    width: auto;
    height: calc(50% - 8px);
    border-radius: 16px;
    transition: transform .65s cubic-bezier(.34, 1.56, .64, 1),
                background .5s var(--ease),
                box-shadow .5s var(--ease);
  }

  .fare-toggle[data-mode="return"] .fare-toggle-glider {
    transform: translateY(calc(100% + 4px));
  }

  .fare-toggle-option {
    grid-template-columns: 36px 1fr auto;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .fto-badge { font-size: .7rem; padding: 5px 10px; }
  .fto-text small { font-size: 9px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .fare-toggle-option { padding: 12px 12px; gap: 9px; }
  .fto-icon { width: 30px; height: 30px; font-size: .92rem; border-radius: 10px; }
  .fto-text strong { font-size: .88rem; }
  .fto-text small { letter-spacing: .1em; }
  .fto-badge { font-size: .66rem; padding: 4px 8px; }
  .fto-badge-save .bi { display: none; }
}

/* ============================================================
   REDUCED MOTION — keep it beautiful, kill the movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fare-toggle-glider,
  .fare-toggle-option,
  .fto-icon,
  .fto-badge {
    transition-duration: .001ms !important;
  }
  .fare-toggle-glider::after,
  .fto-badge-save .bi,
  .fto-sparkle {
    animation: none !important;
  }
  .fare-toggle-glider::after { opacity: .35; }
}

/* ================================================================
   S'DINGO · GOOGLE MAPS PICKER — ULTRA-RESPONSIVE, WORLD-CLASS
   Fixes: coordinates not visible on scroll, buttons hidden behind
   the map/search on mobile, and non-responsive layout on all screens.
   ================================================================ */

/* ================================================================
   S'DINGO · THE ADDRESS PORTAL
   ----------------------------------------------------------------
   Two card buttons. Each is a self-contained micro-universe:
     • Aurora bloom (crimson for pickup, sapphire for drop-off)
     • Faint technical grid overlay
     • Gradient icon orb with a live pulse ring
     • Boarding-pass style tag chip
     • Bold display-type value + monospace meta line
     • Action arrow that rotates on hover
     • Emerald check pill that springs in when address is set
     • Shimmer sweep + lift + gradient border on hover
   Fully responsive from 360px to 4K. Respects reduced motion.
   ================================================================ */

/* ---------- The outer field wrapper ---------- */
.sd-address-portal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
  padding: 22px;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 0% 0%,
      rgba(252, 4, 4, 0.10) 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 100%,
      rgba(15, 115, 219, 0.10) 0%, transparent 55%),
    rgba(4, 12, 45, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

/* ---------- Portal head ---------- */
.sd-portal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.sd-portal-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.sd-portal-title i {
  font-size: 13px;
  color: #FFD966;
}

.sd-portal-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sd-portal-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 3px rgba(158, 231, 184, 0.20);
  position: relative;
  flex: none;
  animation: sdPortalHintPulse 2.4s ease-in-out infinite;
}

@keyframes sdPortalHintPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(158, 231, 184, 0.20); }
  50%      { box-shadow: 0 0 0 7px rgba(158, 231, 184, 0.02); }
}

/* ---------- THE CARD BUTTON ---------- */
.sd-portal-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 60px 1fr 42px 0px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1.5px solid transparent;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 8px 20px -12px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- PICKUP — CRIMSON NEBULA ---------- */
.sd-portal-card-pickup {
  background:
    radial-gradient(120% 130% at 0% 0%,
      rgba(252, 4, 4, 0.28) 0%,
      rgba(140, 4, 4, 0.18) 35%,
      transparent 68%),
    radial-gradient(120% 130% at 100% 100%,
      rgba(4, 28, 92, 0.45) 0%,
      rgba(4, 12, 45, 0.55) 100%),
    linear-gradient(140deg, #101E4A 0%, #0A1430 100%);
  border-color: rgba(252, 4, 4, 0.28);
}

/* ---------- DROP-OFF — SAPPHIRE NEBULA ---------- */
.sd-portal-card-dropoff {
  background:
    radial-gradient(120% 130% at 100% 0%,
      rgba(15, 115, 219, 0.30) 0%,
      rgba(5, 97, 201, 0.18) 35%,
      transparent 68%),
    radial-gradient(120% 130% at 0% 100%,
      rgba(4, 28, 92, 0.45) 0%,
      rgba(4, 12, 45, 0.55) 100%),
    linear-gradient(140deg, #0E1F45 0%, #0A1430 100%);
  border-color: rgba(15, 115, 219, 0.30);
}

/* ---------- Aurora bloom layer ---------- */
.sd-portal-aurora {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  filter: blur(34px) saturate(1.25);
  transition: opacity 0.55s ease, transform 0.9s ease;
}

.sd-portal-card-pickup .sd-portal-aurora {
  background:
    radial-gradient(circle 260px at 18% 22%, rgba(252, 74, 74, 0.55) 0%, transparent 70%),
    radial-gradient(circle 220px at 82% 88%, rgba(140, 4, 4, 0.42) 0%, transparent 70%);
  animation: sdPortalAurora 14s ease-in-out infinite alternate;
}

.sd-portal-card-dropoff .sd-portal-aurora {
  background:
    radial-gradient(circle 280px at 82% 18%, rgba(80, 160, 240, 0.55) 0%, transparent 70%),
    radial-gradient(circle 220px at 18% 88%, rgba(4, 76, 180, 0.42) 0%, transparent 70%);
  animation: sdPortalAurora 16s ease-in-out infinite alternate-reverse;
}

@keyframes sdPortalAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-6%, 5%, 0) scale(1.08); }
}

/* ---------- Faint technical grid ---------- */
.sd-portal-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(160, 200, 245, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 0%, #000 55%, transparent 100%);
  opacity: 0.55;
  transition: opacity 0.45s ease;
}

/* ---------- Gradient icon orb ---------- */
.sd-portal-orb {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #fff;
  flex: none;
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.5s ease;
}

.sd-portal-card-pickup .sd-portal-orb {
  background: linear-gradient(140deg, #FC0404 0%, #D40404 45%, #540202 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 10px 24px -10px rgba(252, 4, 4, 0.65);
}

.sd-portal-card-dropoff .sd-portal-orb {
  background: linear-gradient(140deg, #0F73DB 0%, #0561C9 45%, #041C5C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 10px 24px -10px rgba(15, 115, 219, 0.65);
}

/* Live pulse ring around the orb */
.sd-portal-orb-ring {
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  border: 1.5px solid currentColor;
  opacity: 0;
  pointer-events: none;
}

.sd-portal-card:hover .sd-portal-orb-ring,
.sd-portal-card:focus-visible .sd-portal-orb-ring {
  animation: sdPortalOrbRing 1.8s ease-out infinite;
  opacity: 1;
}

@keyframes sdPortalOrbRing {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- Body copy ---------- */
.sd-portal-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sd-portal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.35s ease;
}

.sd-portal-tag i {
  font-size: 6px;
  line-height: 1;
}

.sd-portal-card-pickup .sd-portal-tag i { color: #FF6B6B; }
.sd-portal-card-dropoff .sd-portal-tag i { color: #66A3E0; }

.sd-portal-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.35s ease;
}

.sd-portal-meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.35s ease;
}

/* ---------- Action arrow ---------- */
.sd-portal-action {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex: none;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}

.sd-portal-card:hover .sd-portal-action,
.sd-portal-card:focus-visible .sd-portal-action {
  transform: rotate(45deg) scale(1.08);
  background: #fff;
  color: #0A1430;
  border-color: #fff;
}

/* ---------- Emerald check pill ---------- */
.sd-portal-check {
  position: relative;
  z-index: 3;
  width: 0;
  height: 24px;
  overflow: hidden;
  border-radius: 100px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #1FA04E, #16803C);
  color: #fff;
  font-size: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 12px -4px rgba(31, 160, 78, 0.55);
  flex: none;
  transition:
    width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    padding 0.45s ease;
}

.sd-portal-check:not([hidden]) {
  width: 24px;
  padding: 0 4px;
}

.sd-portal-check-blue {
  background: linear-gradient(140deg, #0F73DB, #041C5C);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 12px -4px rgba(15, 115, 219, 0.55);
}

/* ---------- HOVER / FOCUS — the lift ---------- */
.sd-portal-card:hover,
.sd-portal-card:focus-visible {
  transform: translateY(-4px);
  outline: none;
}

.sd-portal-card-pickup:hover,
.sd-portal-card-pickup:focus-visible {
  border-color: rgba(252, 74, 74, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 22px 46px -20px rgba(252, 4, 4, 0.60),
    0 8px 20px -10px rgba(0, 0, 0, 0.5);
}

.sd-portal-card-dropoff:hover,
.sd-portal-card-dropoff:focus-visible {
  border-color: rgba(80, 160, 240, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 22px 46px -20px rgba(15, 115, 219, 0.60),
    0 8px 20px -10px rgba(0, 0, 0, 0.5);
}

.sd-portal-card:hover .sd-portal-orb,
.sd-portal-card:focus-visible .sd-portal-orb {
  transform: rotate(-6deg) scale(1.06);
}

.sd-portal-card:hover .sd-portal-orb-ring,
.sd-portal-card:focus-visible .sd-portal-orb-ring {
  animation-play-state: running;
}

.sd-portal-card:hover .sd-portal-tag,
.sd-portal-card:focus-visible .sd-portal-tag {
  color: #fff;
}

.sd-portal-card:hover .sd-portal-meta,
.sd-portal-card:focus-visible .sd-portal-meta {
  color: rgba(255, 255, 255, 0.85);
}

.sd-portal-card:hover .sd-portal-grid,
.sd-portal-card:focus-visible .sd-portal-grid {
  opacity: 0.85;
}

/* ---------- Shimmer sweep on hover ---------- */
.sd-portal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.10) 52%,
    transparent 70%
  );
  transform: translateX(-140%);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: screen;
}

.sd-portal-card:hover::after,
.sd-portal-card:focus-visible::after {
  transform: translateX(140%);
}

/* ---------- FILLED STATE — emerald ring when address is set ---------- */
.sd-portal-card.is-set {
  border-color: rgba(158, 231, 184, 0.42) !important;
}

.sd-portal-card.is-set::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1.5px solid transparent;
  background:
    linear-gradient(140deg, #FC0404 0%, #F5B301 50%, #0F73DB 100%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
}

.sd-portal-card.is-set .sd-portal-value {
  color: #fff;
}

/* ---------- Foot row ---------- */
.sd-portal-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 6px;
}

.sd-portal-foot .field-hint {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  padding-left: 2px;
  flex: 1 1 220px;
}

.sd-portal-foot .zone-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all 0.4s ease;
}

.sd-portal-foot .zone-badge[data-zone="1"] {
  background: rgba(22, 128, 60, 0.18);
  color: #9EE7B8;
  border-color: rgba(158, 231, 184, 0.28);
}

.sd-portal-foot .zone-badge[data-zone="2"] {
  background: rgba(245, 179, 1, 0.18);
  color: #FFD966;
  border-color: rgba(245, 179, 1, 0.32);
}

/* ---------- RESPONSIVE ---------- */

/* Tablets */
@media (max-width: 900px) {
  .sd-address-portal { padding: 18px; gap: 12px; }
  .sd-portal-card { grid-template-columns: 54px 1fr 38px 0px; padding: 18px 18px; gap: 14px; }
  .sd-portal-orb { width: 54px; height: 54px; font-size: 1.35rem; border-radius: 16px; }
  .sd-portal-action { width: 38px; height: 38px; font-size: 0.92rem; }
  .sd-portal-value { font-size: 0.98rem; }
  .sd-portal-meta { font-size: 0.74rem; }
}

/* Phones */
@media (max-width: 640px) {
  .sd-address-portal { padding: 16px; gap: 10px; border-radius: 18px; margin-top: 20px; }
  .sd-portal-head { margin-bottom: 0; }
  .sd-portal-title { font-size: 9.5px; letter-spacing: 0.18em; }
  .sd-portal-hint { font-size: 0.68rem; padding: 4px 9px; }

  .sd-portal-card {
    grid-template-columns: 48px 1fr 34px 0px;
    padding: 14px 15px;
    gap: 12px;
    border-radius: 16px;
  }
  .sd-portal-orb {
    width: 48px; height: 48px;
    font-size: 1.15rem;
    border-radius: 14px;
  }
  .sd-portal-orb-ring { border-radius: 18px; }
  .sd-portal-tag { font-size: 9px; letter-spacing: 0.18em; }
  .sd-portal-value { font-size: 0.9rem; }
  .sd-portal-meta { font-size: 0.7rem; }
  .sd-portal-action {
    width: 34px; height: 34px;
    font-size: 0.82rem;
  }
  .sd-portal-check:not([hidden]) { width: 20px; padding: 0 3px; height: 20px; font-size: 0.72rem; }

  /* Hide the head hint on phones — noise */
  .sd-portal-hint { display: none; }
  .sd-portal-foot .field-hint { flex: 1 1 100%; }
}

/* Small phones */
@media (max-width: 420px) {
  .sd-address-portal { padding: 14px; gap: 9px; }
  .sd-portal-card {
    grid-template-columns: 44px 1fr 30px 0px;
    padding: 12px 13px;
    gap: 10px;
  }
  .sd-portal-orb { width: 44px; height: 44px; font-size: 1.05rem; border-radius: 13px; }
  .sd-portal-value { font-size: 0.86rem; }
  .sd-portal-meta { font-size: 0.66rem; }
  .sd-portal-action { width: 30px; height: 30px; font-size: 0.76rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sd-portal-card,
  .sd-portal-card:hover,
  .sd-portal-card:focus-visible { transform: none; }
  .sd-portal-orb,
  .sd-portal-card:hover .sd-portal-orb,
  .sd-portal-card:focus-visible .sd-portal-orb { transform: none; }
  .sd-portal-action,
  .sd-portal-card:hover .sd-portal-action,
  .sd-portal-card:focus-visible .sd-portal-action { transform: none; }
  .sd-portal-card::after { display: none; }
  .sd-portal-aurora { animation: none; }
  .sd-portal-hint-dot { animation: none; }
  .sd-portal-orb-ring { display: none; }
}

/* ---------- The address confirm card (inside bookingModal) ---------- */
.sd-confirm-addresses {
  display: flex; flex-direction: column; gap: 10px;
}
.sd-confirm-address-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(140deg, #F8FBFF, #EEF4FE);
  border: 1px solid #CBDDF7;
}
.sd-confirm-address-row-blue {
  background: linear-gradient(140deg, #F5FAFF, #E6F0FC);
  border-color: #CBDDF7;
}
.sd-confirm-address-ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  font-size: 1.15rem;
  background: #fff; color: var(--red);
  border: 1px solid #F6CFCF;
  flex: none;
}
.sd-confirm-address-ico-blue { color: var(--blue); border-color: #CBDDF7; }
.sd-confirm-address-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-confirm-address-tag {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--grey);
}
.sd-confirm-address-body strong {
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 800;
  color: var(--black);
  letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis;
}
.sd-confirm-address-body small {
  font-size: .72rem; color: var(--grey);
  overflow: hidden; text-overflow: ellipsis;
}
.sd-confirm-address-edit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: .72rem; font-weight: 700; color: var(--blue);
  cursor: pointer;
  transition: all .3s var(--ease);
  flex: none;
}
.sd-confirm-address-edit:hover {
  background: var(--blue); color: #fff; border-color: var(--blue);
  transform: translateY(-2px);
}

/* ============================================================
   THE MAP MODAL — fully responsive, self-scrolling, all
   components visible and reachable on every screen size.

   v2 — DARK AURORA GLASS SHELL
   ------------------------------------------------------------
   The modal shell now matches the "Make it official" booking
   modal exactly: same dark aurora gradient, same animated
   brand strip, same signature floating close orb. The map
   tiles, sidebar panels, tabs and footer keep their bright
   surfaces so the map stays legible — but everything sits on
   the same premium dark glass backdrop.
   ============================================================ */
.sd-map-dialog {
  max-width: min(1240px, calc(100vw - 24px));
  width: 100%;
  margin: 0.5rem auto;
  height: calc(100dvh - 1rem);
  max-height: calc(100dvh - 1rem);
}

/* ---------- SHELL — dark aurora glass, mirrors #bookingModal ---------- */
.sd-map-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  border-radius: 28px;
  background:
    radial-gradient(130% 100% at 0% 0%,  rgba(252, 4, 4, 0.16) 0%, transparent 55%),
    radial-gradient(130% 100% at 100% 100%, rgba(15, 115, 219, 0.20) 0%, transparent 55%),
    linear-gradient(165deg, #0A1430 0%, #101E4A 45%, #0A1430 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow:
    0 60px 140px -40px rgba(0, 0, 0, 0.88),
    0 20px 50px -20px rgba(5, 97, 201, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Aurora bloom behind the whole card */
.sd-map-content::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 480px at 8% 12%,  rgba(252, 74, 74, 0.30) 0%, transparent 65%),
    radial-gradient(circle 520px at 92% 88%, rgba(15, 115, 219, 0.32) 0%, transparent 65%),
    radial-gradient(circle 380px at 50% 100%, rgba(245, 179, 1, 0.16) 0%, transparent 65%);
  filter: blur(52px);
  animation: sdMapAuroraDrift 24s ease-in-out infinite alternate;
}

@keyframes sdMapAuroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

/* Every direct child stacks above the ambient aurora bloom */
.sd-map-content > * {
  position: relative;
  z-index: 1;
}

/* ---------- BRAND STRIP ---------- */
.sd-map-strip {
  height: 4px;
  flex: none;
  background: linear-gradient(90deg,
    #FC0404 0%, #F5B301 33%, #0F73DB 66%, #FC0404 100%);
  background-size: 200% 100%;
  animation: sdMapStrip 6s linear infinite;
}
@keyframes sdMapStrip { to { background-position: 200% 0; } }

/* ---------- HEAD ---------- */
.sd-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 32px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  flex: none;
  flex-wrap: wrap;
}
.sd-map-head-left { min-width: 0; flex: 1 1 220px; }

.sd-map-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9EE7B8;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(22, 128, 60, 0.18);
  border: 1px solid rgba(158, 231, 184, 0.28);
  margin-bottom: 12px;
}

.sd-map-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 4px rgba(158, 231, 184, 0.18);
  position: relative;
  flex: none;
}
.sd-map-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #9EE7B8;
  animation: pulseRing 2.4s ease-out infinite;
}

.sd-map-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 10px;
}

.sd-map-title-grad {
  background: linear-gradient(90deg, #FC0404 0%, #F5B301 50%, #66A3E0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sdMapStrip 8s linear infinite;
}

.sd-map-sub {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  max-width: 62ch;
}
.sd-map-sub strong {
  color: #fff;
  font-weight: 700;
}

/* ---------- CLOSE BUTTON — becomes the signature close orb ---------- */
.sd-map-close {
  /* The `.modal-close` base class already styles the button — we
     override to reposition it in the dark head, but the button
     itself becomes the signature floating orb via the markup
     (see EDIT in index.html). This rule just handles placement. */
  flex: none;
}

/* Tabs */
.sd-map-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 32px 0;
  background: transparent;
  flex: none;
}
.sd-map-tab {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 26px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.45s var(--ease);
  min-width: 0;
}
.sd-map-tab:hover {
  border-color: rgba(102, 163, 224, 0.55);
  transform: translateY(-2px);
}
.sd-map-tab.active {
  border-color: rgba(252, 74, 74, 0.85);
  background:
    linear-gradient(140deg,
      rgba(252, 74, 74, 0.22) 0%,
      rgba(4, 12, 45, 0.55) 100%);
  box-shadow: 0 14px 30px -14px rgba(252, 74, 74, 0.55);
}
.sd-map-tab[data-pick="dropoff"].active {
  border-color: rgba(80, 160, 240, 0.85);
  background:
    linear-gradient(140deg,
      rgba(15, 115, 219, 0.22) 0%,
      rgba(4, 12, 45, 0.55) 100%);
  box-shadow: 0 14px 30px -14px rgba(15, 115, 219, 0.55);
}
.sd-map-tab-ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--red), var(--red-dark));
  color: #fff; font-size: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(212,4,4,.55);
  flex: none;
}
.sd-map-tab-ico-blue {
  background: linear-gradient(140deg, var(--blue-bright), var(--blue-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(5,97,201,.55);
}
.sd-map-tab-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sd-map-tab-body strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-map-tab-body small {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-map-tab-check {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  font-size: .8rem;
  opacity: 0; transform: scale(.4);
  transition: all .4s var(--ease-spring);
  flex: none;
}
.sd-map-tab[data-pick="dropoff"] .sd-map-tab-check { background: var(--blue); }
.sd-map-tab.active .sd-map-tab-check { opacity: 1; transform: scale(1); }

/* ============================================================
   BODY — the KEY fix. This is a flex row on desktop, and a
   flex column on mobile. The BODY scrolls, not the whole modal.
   That means the footer is ALWAYS visible and the coordinates
   are ALWAYS reachable.
   ============================================================ */
/* ============================================================
   MAP BODY — Desktop: two-column grid.
   Mobile: single scroll column (map first, then sidebar).
   ============================================================ */
.sd-map-body {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-areas: "sidebar map";
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  /* Dark aurora glass — matches the shell above.
     The map viewport itself gets its own dark frame below. */
  background: rgba(4, 12, 45, 0.30);
  overflow: hidden;
}

/* On tablet/mobile, become a single scroll column with the map
   at the top, then the sidebar, and NO internal scroll traps. */
@media (max-width: 1024px) {
  .sd-map-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* Sidebar column — dark glass column that matches the shell */
.sd-map-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 28px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.02) 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  max-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.sd-map-side::-webkit-scrollbar { width: 6px; }
.sd-map-side::-webkit-scrollbar-track { background: transparent; }
.sd-map-side::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 100px;
}
.sd-map-side::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.42);
}


@keyframes sdSpin { to { transform: rotate(360deg); } }

/* Suggestions dropdown */
.sd-map-suggestions {
  list-style: none; padding: 6px; margin: 6px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 50px -20px rgba(4, 28, 92, .35);
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 30;
  max-height: 320px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sd-map-suggestion {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s;
}
.sd-map-suggestion:hover,
.sd-map-suggestion.focused {
  background: #EAF2FD;
}
.sd-map-suggestion-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: #EAF2FD; color: var(--blue);
  font-size: .95rem; flex: none;
}
.sd-map-suggestion-body { min-width: 0; }
.sd-map-suggestion-main {
  font-size: .88rem; font-weight: 700;
  color: var(--black);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-map-suggestion-secondary {
  font-size: .75rem; color: var(--grey);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-map-suggestion-empty {
  padding: 22px 14px; text-align: center;
  color: var(--grey); font-size: .82rem;
}

/* Sidebar panel */
.sd-map-panel {
  display: flex; flex-direction: column; gap: 18px;
}
.sd-panel-block {
  padding: 16px 18px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.sd-panel-label {
  display: block !important;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 12px;
}
.sd-panel-address {
  display: grid; grid-template-columns: 44px 1fr;
  gap: 12px; align-items: flex-start;
  min-width: 0;
}
.sd-panel-address-icon {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--red), var(--red-dark));
  color: #fff; font-size: 1.1rem;
  box-shadow: 0 8px 20px -8px rgba(212,4,4,.55);
  transition: all .4s var(--ease);
  flex: none;
}
.sd-panel-address-text { min-width: 0; }
.sd-panel-address-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: -0.015em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sd-panel-address-text small {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 4px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Zone meter */
.sd-zone-meter-track {
  position: relative;
  height: 10px;
  border-radius: 100px;
  background: linear-gradient(90deg,
    #C5E7D1 0%, #C5E7D1 40%,
    #F3DDB8 40%, #F3DDB8 70%,
    #F6CFCF 70%, #F6CFCF 100%);
  overflow: visible;
  margin-bottom: 22px;
}
.sd-zone-meter-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #16803C, #1FA04E);
  border-radius: 100px;
  transition: width .6s var(--ease), background .4s ease;
}
.sd-zone-meter-pin {
  position: absolute; top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--black);
  display: grid; place-items: center;
  font-size: .8rem;
  color: var(--black);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.3);
  transition: left .6s var(--ease-spring), border-color .3s, color .3s;
  z-index: 2;
}
.sd-zone-meter-mark {
  position: absolute; top: 100%; margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px; color: var(--grey);
  transform: translateX(-50%);
  white-space: nowrap;
}
.sd-zone-meter-mark-30 { left: 60%; }
.sd-zone-meter-mark-50 { left: 100%; }
.sd-zone-meter-readout {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 6px; flex-wrap: wrap;
}
.sd-zone-meter-km {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff !important;
}
.sd-zone-meter-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: all .4s var(--ease);
}
.sd-zone-meter-badge[data-zone="1"] {
  background: rgba(22, 128, 60, 0.20) !important;
  color: #9EE7B8 !important;
  border: 1px solid rgba(158, 231, 184, 0.35) !important;
}
.sd-zone-meter-badge[data-zone="2"] {
  background: rgba(245, 179, 1, 0.20) !important;
  color: #FFD966 !important;
  border: 1px solid rgba(245, 179, 1, 0.38) !important;
}

/* Surcharge breakdown */
.sd-surcharge-rows {
  display: flex; flex-direction: column; gap: 8px;
}
.sd-surcharge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72) !important;
  flex-wrap: wrap;
}
.sd-surcharge-row strong {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff !important;
}
.sd-surcharge-row-total {
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.sd-surcharge-row-total strong {
  font-size: 1rem;
  color: var(--red);
}
.sd-surcharge-row-total.is-free strong {
  color: var(--green);
}

/* Coordinates — the row that was disappearing */
.sd-panel-coords { padding-bottom: 18px; }
.sd-panel-coords-code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff !important;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(4, 12, 45, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: block;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* Map viewport — the right column on desktop */
.sd-map-viewport {
  position: relative;
  background: #EAF2FD;
  overflow: hidden;
  border-left: 1px solid var(--line);
  min-height: 320px;
  height: 100%;
}
.sd-map-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.sd-map-overlay-top {
  position: absolute; top: 16px; left: 16px; right: 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
  z-index: 5; pointer-events: none;
}
.sd-map-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(4,28,92,.1);
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue-dark);
  box-shadow: 0 6px 16px -6px rgba(4,28,92,.22);
  pointer-events: auto;
}
.sd-map-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); position: relative;
}
.sd-map-chip-dot::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid var(--green);
  animation: pulseRing 2.2s ease-out infinite;
}
.sd-map-chip-hint {
  color: var(--charcoal); text-transform: none;
  letter-spacing: 0; font-family: var(--font-body);
  font-size: .74rem; font-weight: 700;
  margin-left: auto;
}
.sd-map-chip-hint .bi { color: var(--red); }

.sd-map-overlay-bottom {
  position: absolute; bottom: 20px; left: 16px;
  display: flex; gap: 8px; z-index: 5;
  flex-wrap: wrap;
}
.sd-map-ctl {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 100px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(4,28,92,.1);
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700;
  color: var(--charcoal);
  cursor: pointer;
  transition: all .3s var(--ease);
  box-shadow: 0 8px 20px -8px rgba(4,28,92,.3);
}
.sd-map-ctl:hover {
  background: var(--black); color: #fff;
  border-color: var(--black);
  transform: translateY(-2px);
}
.sd-map-ctl .bi { color: var(--red); transition: color .3s; }
.sd-map-ctl:hover .bi { color: #fff; }
.sd-map-ctl-ghost .bi { color: var(--blue); }

/* Fallback when Google Maps is unavailable */
.sd-map-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  background: linear-gradient(140deg, #F5FAFF, #E6F0FC);
  padding: 40px;
  gap: 8px;
  z-index: 10;
}
.sd-map-fallback .bi {
  font-size: 3rem; color: var(--blue);
  display: block; margin: 0 auto 12px;
}
.sd-map-fallback strong {
  display: block; font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800;
  color: var(--black); margin-bottom: 6px;
}
.sd-map-fallback p {
  font-size: .86rem; color: var(--grey);
  max-width: 42ch; line-height: 1.7;
}

/* ============================================================
   FOOTER — pinned at the bottom, never hidden behind the map.
   ============================================================ */
/* ============================================================
   SIDEBAR — search bar no longer clipped at the top.
   The sidebar gets a little more breathing room, and the
   search input sits comfortably without being cut in half.
   ============================================================ */
/* ============================================================
   SIDEBAR — base (desktop only).
   On tablet/mobile, the sidebar flows UNDER the map and the
   whole body scrolls as one column (see responsive block).
   ============================================================ */
.sd-map-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 26px;
  background: #fff;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  max-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(4, 28, 92, .25) transparent;
  scroll-padding-top: 12px;
}

/* On tablets and below, the sidebar must NOT be its own scroll
   trap — the whole `.sd-map-body` scrolls as one column, so the
   search bar (which sits above the map in the grid) is always
   the first thing the user sees on a phone. */
@media (max-width: 1024px) {
  .sd-map-side {
    overflow-y: visible !important;
    max-height: none !important;
    border-right: 0 !important;
    scroll-padding-top: 0 !important;
  }
}
.sd-map-side::-webkit-scrollbar { width: 6px; }
.sd-map-side::-webkit-scrollbar-track { background: transparent; }
.sd-map-side::-webkit-scrollbar-thumb {
  background: rgba(4, 28, 92, .22);
  border-radius: 100px;
}
.sd-map-side::-webkit-scrollbar-thumb:hover {
  background: rgba(4, 28, 92, .4);
}

/* ---------- SEARCH — fully visible, never clipped ---------- */
.sd-map-search {
  position: relative;
  flex: none;
  width: 100%;
  margin-top: 2px;
}
.sd-map-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px;
  transition: all 0.3s;
  height: 52px;
  box-sizing: border-box;
  overflow: visible;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 640px) {
  .sd-map-search-wrap { height: 46px; border-radius: 12px; }
  .sd-map-search-input { font-size: .86rem; padding: 0 40px 0 38px; }
  .sd-map-search-icon { left: 12px; font-size: .92rem; }
}
@media (max-width: 420px) {
  .sd-map-search-wrap { height: 44px; }
  .sd-map-search-input { font-size: .84rem; padding: 0 38px 0 36px; }
}
@media (max-width: 360px) {
  .sd-map-search-wrap { height: 42px; }
  .sd-map-search-input { font-size: .8rem; padding: 0 34px 0 34px; }
  .sd-map-search-icon { left: 10px; font-size: .86rem; }
}
.sd-map-search-wrap:focus-within {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(15,115,219,.13);
}
.sd-map-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}
.sd-map-search-input {
  width: 100%;
  height: 100%;
  padding: 0 44px 0 42px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff !important;
  border-radius: 14px;
  outline: none;
  min-width: 0;
  line-height: 1.2;
}
.sd-map-search-input::placeholder {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5) !important;
}
.sd-map-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6) !important;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sd-map-search-clear:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.sd-map-search-spinner {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: sdSpin .9s linear infinite;
}
@keyframes sdSpin { to { transform: rotate(360deg); } }

/* ============================================================
   FOOTER — compact, never clips the Save button.
   The summary can shrink; the actions NEVER shrink.
   On very small screens the layout stacks so both buttons
   get their own full-width row and nothing is ever cut off.
   ============================================================ */
.sd-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.015) 100%);
  flex: none;
  flex-wrap: nowrap;
  position: relative;
  z-index: 10;
  box-shadow: 0 -6px 16px -12px rgba(0, 0, 0, 0.35);
  min-height: 60px;
  max-height: 90px;
  box-sizing: border-box;
}

/* Summary — allowed to shrink and ellipsis, never pushes buttons off */
.sd-map-footer-summary {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;                      /* can grow and shrink */
  overflow: hidden;
}

.sd-map-footer-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  flex: none;
}
.sd-map-footer-label::after {
  content: "·";
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.35);
}

.sd-map-footer-value {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  transition: color 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.sd-map-footer-value.sd-free { color: #9EE7B8; }
.sd-map-footer-value.sd-charged { color: #FF9B9B; }

/* Actions — MUST stay fully visible. Never shrink. */
.sd-map-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto;                      /* NEVER shrink */
  min-width: 0;
}

/* Cancel button — auto-width but never clipped */
.sd-map-footer-actions .btn-ghost {
  padding: 8px 14px;
  font-size: 0.82rem;
  border-radius: 11px;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
}
.sd-map-footer-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.40);
  color: #fff;
}

/* Save button — the hero. Auto-width but NEVER clipped. */
.sd-map-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(140deg, #D40404, #8C0404 45%, #041C5C);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 18px -8px rgba(212,4,4,.55),
    0 2px 0 rgba(4,12,45,.5);
  transition: all .35s var(--ease);
  line-height: 1;
  flex: 0 0 auto;                      /* NEVER shrink */
  white-space: nowrap;
  min-width: 0;
}
.sd-map-save:not([disabled]):hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 14px 26px -12px rgba(212,4,4,.7),
    0 3px 0 rgba(4,12,45,.6);
}
.sd-map-save[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.sd-map-save .bi {
  font-size: 1rem;
  line-height: 1;
  flex: none;
}
.sd-map-save span {
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE — the footer stops getting cramped. Once the
   horizontal row can't fit both buttons cleanly, we STACK:
   summary on top (full width), buttons side-by-side below.
   Nothing is ever cut off.
   ============================================================ */

/* ---------- Tablets / small laptops ---------- */
@media (max-width: 1024px) {
  .sd-map-footer {
    padding: 10px 20px;
    gap: 10px;
  }
  .sd-map-footer-label::after { margin-left: 6px; }
}

/* ---------- Tablets portrait / large phones ---------- */
@media (max-width: 768px) {
  .sd-map-footer {
    padding: 10px 16px;
    gap: 10px;
    flex-wrap: wrap;                   /* allow stacking when needed */
    max-height: none;
    row-gap: 8px;
  }
  .sd-map-footer-summary {
    flex: 1 1 100%;                    /* summary takes full row */
    justify-content: flex-start;
  }
  .sd-map-footer-actions {
    flex: 1 1 100%;                    /* actions take full row */
    justify-content: flex-end;
    gap: 8px;
  }
  .sd-map-footer-actions .btn-ghost,
  .sd-map-save {
    flex: 0 0 auto;                    /* still auto-width */
  }
}

/* ---------- Phones portrait ---------- */
@media (max-width: 640px) {
  .sd-map-footer {
    padding: 10px 14px;
    gap: 8px;
    row-gap: 8px;
  }
  .sd-map-footer-summary {
    justify-content: flex-start;
    gap: 6px;
  }
  .sd-map-footer-label { font-size: 8.5px; letter-spacing: .14em; }
  .sd-map-footer-label::after { margin-left: 5px; }
  .sd-map-footer-value { font-size: .84rem; }

  .sd-map-footer-actions {
    justify-content: stretch;          /* buttons share the full width */
    gap: 8px;
  }
  .sd-map-footer-actions .btn-ghost {
    padding: 9px 12px;
    font-size: .78rem;
    border-radius: 10px;
    flex: 0 0 auto;
  }
  .sd-map-save {
    padding: 10px 14px;
    font-size: .8rem;
    border-radius: 10px;
    flex: 1 1 auto;                    /* Save grows to fill the row */
    justify-content: center;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  .sd-map-footer {
    padding: 10px 12px;
    gap: 6px;
    row-gap: 8px;
  }
  .sd-map-footer-value { font-size: .8rem; }
  .sd-map-footer-actions { gap: 6px; }

  .sd-map-footer-actions .btn-ghost {
    padding: 9px 10px;
    font-size: .74rem;
    border-radius: 9px;
  }
  .sd-map-save {
    padding: 10px 12px;
    font-size: .76rem;
    border-radius: 9px;
    gap: 6px;
  }
  .sd-map-save .bi { font-size: .9rem; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 360px) {
  .sd-map-footer {
    padding: 8px 10px;
    row-gap: 6px;
  }
  .sd-map-footer-label { display: none; }
  .sd-map-footer-summary { justify-content: flex-start; }
  .sd-map-footer-value { font-size: .76rem; }

  .sd-map-footer-actions { gap: 5px; }

  .sd-map-footer-actions .btn-ghost {
    padding: 8px 8px;
    font-size: .7rem;
  }
  .sd-map-save {
    padding: 9px 10px;
    font-size: .72rem;
    gap: 5px;
  }
  /* On tiny screens hide "Save address" text and keep just the check icon */
  .sd-map-save span { display: none; }
  .sd-map-save::after {
    content: "Save";
    font-size: .7rem;
  }
}

/* ---------- Landscape phones (short height) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .sd-map-footer {
    padding: 8px 14px;
    max-height: 60px;
    row-gap: 0;
    flex-wrap: nowrap;
  }
  .sd-map-footer-summary { flex: 1 1 auto; }
  .sd-map-footer-actions { flex: 0 0 auto; }
  .sd-map-footer-label { display: none; }
  .sd-map-footer-value { font-size: .78rem; }
  .sd-map-footer-actions .btn-ghost { padding: 7px 10px; font-size: .72rem; }
  .sd-map-save { padding: 8px 12px; font-size: .74rem; }
}

/* ============================================================
   RESPONSIVE OVERRIDES for the compact footer + clean search
   ============================================================ */

/* ---------- Tablets / small laptops ---------- */
@media (max-width: 1024px) {
  .sd-map-side { padding: 16px 20px 24px; }
  .sd-map-footer { padding: 10px 20px; }
  .sd-map-footer-summary { flex-wrap: wrap; }
  .sd-map-footer-label::after { margin-left: 6px; }
}

/* ---------- Tablets portrait / large phones ---------- */
@media (max-width: 768px) {
  .sd-map-side { padding: 14px 16px 22px; }
  .sd-map-footer {
    padding: 10px 16px;
    flex-direction: row;               /* keep horizontal — more compact */
    align-items: center;
    gap: 10px;
  }
  .sd-map-footer-summary {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .sd-map-footer-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  .sd-map-footer-actions .btn-ghost,
  .sd-map-save {
    flex: 0 0 auto;
  }
  .sd-map-search-wrap { height: 48px; }
  .sd-map-search-input { font-size: .88rem; }
}

/* ---------- Phones portrait ---------- */
@media (max-width: 640px) {
  .sd-map-side { padding: 12px 14px 20px; gap: 12px; }
  .sd-map-search { margin-top: 0; }
  .sd-map-search-wrap { height: 46px; border-radius: 12px; }
  .sd-map-search-input { font-size: .86rem; padding: 0 40px 0 38px; }
  .sd-map-search-icon { left: 12px; font-size: .92rem; }
  .sd-map-footer {
    padding: 8px 14px;
    gap: 8px;
    min-height: 54px;
  }
  .sd-map-footer-label { font-size: 8.5px; letter-spacing: .14em; }
  .sd-map-footer-value { font-size: .84rem; }
  .sd-map-footer-actions .btn-ghost {
    padding: 7px 11px;
    font-size: .76rem;
    border-radius: 10px;
  }
  .sd-map-save {
    padding: 8px 13px;
    font-size: .78rem;
    border-radius: 10px;
  }
  /* On very narrow screens hide the inline "Cancel" text and keep
     just the arrow icon, so the row never wraps */
  .sd-map-footer-actions .btn-ghost span {
    display: none;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  .sd-map-side { padding: 10px 12px 18px; }
  .sd-map-search-wrap { height: 44px; }
  .sd-map-search-input { font-size: .84rem; padding: 0 38px 0 36px; }
  .sd-map-footer {
    padding: 8px 12px;
    min-height: 50px;
  }
  .sd-map-footer-value { font-size: .8rem; }
  .sd-map-save {
    padding: 7px 12px;
    font-size: .74rem;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width: 360px) {
  .sd-map-side { padding: 10px 10px 16px; }
  .sd-map-search-wrap { height: 42px; }
  .sd-map-search-input { font-size: .8rem; padding: 0 34px 0 34px; }
  .sd-map-search-icon { left: 10px; font-size: .86rem; }
  .sd-map-footer {
    padding: 6px 10px;
    min-height: 46px;
  }
  .sd-map-footer-label { display: none; }
  .sd-map-footer-value { font-size: .76rem; }
  .sd-map-footer-actions .btn-ghost { padding: 6px 10px; font-size: .72rem; }
  .sd-map-save { padding: 7px 10px; font-size: .72rem; }
}

/* ---------- Google Maps info window chrome ---------- */
.gm-style-iw-c {
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 20px 40px -12px rgba(4,28,92,.4) !important;
}
.gm-style-iw-d { overflow: hidden !important; }
.gm-style-iw-tc::after { background: #fff !important; }
.sd-gm-iw {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--charcoal);
  line-height: 1.5;
}
.sd-gm-iw strong { color: var(--black); }
.sd-gm-iw small { color: var(--grey); display: block; margin-top: 2px; }

/* ============================================================
   RESPONSIVE BREAKPOINTS — every screen, every device.
   ============================================================ */

/* ============================================================
   RESPONSIVE — THE AUTHORITATIVE BREAKPOINTS
   ------------------------------------------------------------
   This block WINS. It comes last in the file and uses specific
   selectors + !important on the layout-critical rules so no
   earlier block can override the footer height or the Save
   button visibility.
   ============================================================ */

/* ============================================================
   RESPONSIVE — THE AUTHORITATIVE BREAKPOINTS (v3 — admin parity)
   ------------------------------------------------------------
   Mobile behaviour now matches the admin dashboard sdmap modal:
     • Search bar sits ABOVE the map, not below
     • The whole `.sd-map-body` becomes ONE scroll column
       (map first, then sidebar stacked below)
     • Footer buttons stay pinned to the card bottom
     • No nested sidebar scroll trap on phones
   ============================================================ */

/* ---------- Large tablets / small laptops (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  /* The dialog fills the viewport height so nothing overflows */
  .sd-map-dialog {
    height: calc(100dvh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
  }

   /* Collapse into ONE scrollable column — everything scrolls together */
  .sd-map-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Dynamic viewport height so iOS Safari doesn't cut the footer */
    max-height: calc(100dvh - 4rem) !important;
  }

  /* ==========================================================
     MOBILE MAP MODAL — SEARCH → TABS → MAP → PANELS
     ----------------------------------------------------------
     Visual order on phones:
       1. Search bar          (top, always first)
       2. Pickup + Drop-off   (side-by-side, one row)
       3. The map
       4. Address / zone / surcharge / coordinates
       5. Footer (pinned)
     The whole .sd-map-body scrolls as ONE column.
     ========================================================== */

  /* 1 — Search bar: rendered ABOVE the tabs.
     We pull it out of the sidebar via display:contents and
     re-order it to slot #1 inside the body. */
  .sd-map-side {
    display: contents !important;
  }

  .sd-map-search {
    order: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 12px 16px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* 2 — Pickup + Drop-off tabs stay SIDE BY SIDE (2 columns).
     This is the key fix: on ≤768px the old rule forced them
     into a single vertical column. We now force 2 columns. */
  .sd-map-tabs {
    order: 1 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 16px 12px !important;
    background: transparent !important;
    flex: 0 0 auto !important;
  }

  /* 3 — Map: comes AFTER search + tabs */
  .sd-map-viewport {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 38vh !important;
    min-height: 200px !important;
    max-height: 38vh !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
  }

  /* 4 — Panels: below the map */
  .sd-map-panel {
    order: 3 !important;
    padding: 14px 16px 22px !important;
    gap: 12px !important;
  }

  /* Footer stays visible at the card bottom */
  .sd-map-footer {
    padding: 10px 20px !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
  }
  .sd-map-footer-summary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .sd-map-footer-actions {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }
  .sd-map-footer-actions .btn-ghost,
  .sd-map-save {
    flex: 0 0 auto !important;
  }

  .sd-map-head { padding: 20px 22px 14px !important; }
  .sd-map-tabs { padding: 14px 22px 0 !important; }
}

/* ---------- Tablets portrait / large phones (≤ 768px) ---------- */
@media (max-width: 768px) {
  .sd-map-dialog {
    max-width: 100% !important;
    width: calc(100% - 16px) !important;
    height: calc(100dvh - 0.75rem) !important;
    max-height: calc(100dvh - 0.75rem) !important;
    margin: 0.375rem auto !important;
  }
  .sd-map-content { border-radius: 22px !important; }

  .sd-map-head { padding: 18px 18px 12px !important; }

  /* Keep the two tabs on the SAME row — side by side.
     Only tighten their internal spacing so they fit on a phone. */
  .sd-map-tabs {
    grid-template-columns: 1fr 1fr !important;
    padding: 10px 14px 12px !important;
    gap: 6px !important;
  }

  /* Compact tabs — icon + label + check, no subtext, tighter */
  .sd-map-tab {
    grid-template-columns: 34px 1fr 20px !important;
    padding: 9px 12px !important;
    gap: 10px !important;
    border-radius: 13px !important;
  }
  .sd-map-tab-ico {
    width: 34px !important;
    height: 34px !important;
    font-size: .9rem !important;
    border-radius: 10px !important;
  }
  .sd-map-tab-body strong {
    font-size: .84rem !important;
    font-weight: 800 !important;
  }
  /* Hide the subtext — it's the biggest space waster */
  .sd-map-tab-body small {
    display: none !important;
  }
  .sd-map-tab-check {
    width: 20px !important;
    height: 20px !important;
    font-size: .66rem !important;
  }

  .sd-map-side { padding: 14px 16px 20px !important; }

  /* Map takes a proportional slice on tablets */
  .sd-map-viewport {
    height: 38vh !important;
    min-height: 200px !important;
    max-height: 38vh !important;
  }

  /* Footer — single compact row */
  .sd-map-footer {
    padding: 8px 14px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    row-gap: 0 !important;
    min-height: 52px !important;
  }
  .sd-map-footer-summary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  .sd-map-footer-label {
    font-size: 8.5px !important;
    letter-spacing: .14em !important;
  }
  .sd-map-footer-value {
    font-size: .82rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .sd-map-footer-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  .sd-map-footer-actions .btn-ghost {
    padding: 8px 12px !important;
    font-size: .76rem !important;
    border-radius: 10px !important;
  }
  .sd-map-save {
    padding: 9px 14px !important;
    font-size: .78rem !important;
    border-radius: 10px !important;
    gap: 6px !important;
  }
  .sd-map-save .bi { font-size: .9rem !important; }
  /* Hide the "Cancel" text — keep just the arrow icon */
  .sd-map-footer-actions .btn-ghost span { display: none !important; }

  .sd-panel-address { grid-template-columns: 40px 1fr !important; gap: 10px !important; }
  .sd-panel-address-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; border-radius: 12px !important; }
  .sd-zone-meter-km { font-size: 1.25rem !important; }
  .sd-panel-coords-code { font-size: .74rem !important; padding: 7px 10px !important; }
}

/* ---------- Phones portrait (≤ 640px) ---------- */
@media (max-width: 640px) {
  .sd-map-dialog {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }
  .sd-map-content {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .sd-map-head { padding: 16px 14px 10px !important; }
  .sd-map-eyebrow {
    font-size: 9px !important;
    padding: 5px 10px !important;
    letter-spacing: .18em !important;
    margin-bottom: 8px !important;
  }
  .sd-map-title { font-size: 1.3rem !important; }
  .sd-map-sub { font-size: .8rem !important; line-height: 1.5 !important; }

  /* Tabs compact — TWO COLUMNS side-by-side, no subtext,
     smaller icons so they fit comfortably on any phone width. */
  .sd-map-tabs {
    grid-template-columns: 1fr 1fr !important;
    padding: 10px 14px 12px !important;
    gap: 6px !important;
  }
  .sd-map-tab {
    grid-template-columns: 30px 1fr 18px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }
  .sd-map-tab-ico {
    width: 30px !important;
    height: 30px !important;
    font-size: .82rem !important;
    border-radius: 9px !important;
  }
  .sd-map-tab-body strong { font-size: .78rem !important; }
  /* Kill the subtext — saves the most vertical space */
  .sd-map-tab-body small { display: none !important; }
  .sd-map-tab-check { width: 18px !important; height: 18px !important; font-size: .62rem !important; }

  /* Map smaller so sidebar gets room */
  .sd-map-viewport {
    height: 34vh !important;
    min-height: 180px !important;
    max-height: 34vh !important;
  }

  .sd-map-side { padding: 12px 14px 20px !important; gap: 12px !important; }
  .sd-panel-block { padding: 12px 14px !important; border-radius: 14px !important; }
  .sd-map-panel { gap: 12px !important; }

  /* Compact address block */
  .sd-panel-address { grid-template-columns: 36px 1fr !important; gap: 10px !important; }
  .sd-panel-address-icon { width: 36px !important; height: 36px !important; font-size: .95rem !important; border-radius: 11px !important; }
  .sd-panel-address-text strong { font-size: .82rem !important; }
  .sd-panel-address-text small { font-size: .68rem !important; }

  .sd-zone-meter-km { font-size: 1.05rem !important; }
  .sd-zone-meter-badge { font-size: .6rem !important; padding: 4px 8px !important; }
  .sd-surcharge-row { font-size: .76rem !important; }
  .sd-surcharge-row strong { font-size: .78rem !important; }
  .sd-surcharge-row-total strong { font-size: .9rem !important; }
  .sd-panel-coords-code { font-size: .68rem !important; padding: 6px 9px !important; }

  /* Footer — compact, single row, buttons fully visible */
  .sd-map-footer {
    padding: 8px 12px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    row-gap: 0 !important;
    min-height: 50px !important;
    max-height: none !important;
  }
  .sd-map-footer-summary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }
  .sd-map-footer-label { font-size: 8px !important; letter-spacing: .12em !important; }
  .sd-map-footer-label::after { margin-left: 4px !important; }
  .sd-map-footer-value {
    font-size: .78rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .sd-map-footer-actions {
    flex: 0 0 auto !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
  }
  .sd-map-footer-actions .btn-ghost {
    padding: 8px 11px !important;
    font-size: .74rem !important;
    border-radius: 10px !important;
  }
  .sd-map-save {
    padding: 9px 13px !important;
    font-size: .76rem !important;
    border-radius: 10px !important;
    gap: 5px !important;
  }
  .sd-map-save .bi { font-size: .88rem !important; }

  /* Address triggers in the booking console */
  /* Compact address triggers — smaller icon, tighter padding,
     meta text on one line so they never take 3 rows on a phone */
  .sd-address-trigger {
    grid-template-columns: 36px 1fr 26px 0px !important;
    padding: 10px 12px !important;
    gap: 9px !important;
    border-radius: 14px !important;
  }
  .sd-address-trigger-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: .95rem !important;
    border-radius: 10px !important;
  }
  .sd-address-trigger-value {
    font-size: .82rem !important;
    font-weight: 800 !important;
  }
  .sd-address-trigger-meta {
    font-size: .64rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .sd-address-trigger-arrow {
    width: 26px !important;
    height: 26px !important;
    font-size: .76rem !important;
  }
  /* Hide the "Press to open the map" hint on phones — pure noise */
  .sd-address-label-hint {
    display: none !important;
  }
  .sd-address-label-hint { display: none !important; }

  .sd-confirm-address-row { grid-template-columns: 38px 1fr auto !important; gap: 10px !important; padding: 12px 12px !important; }
  .sd-confirm-address-ico { width: 38px !important; height: 38px !important; font-size: 1rem !important; border-radius: 11px !important; }
  .sd-confirm-address-body strong { font-size: .84rem !important; }
  .sd-confirm-address-body small { font-size: .68rem !important; }
  .sd-confirm-address-edit { padding: 6px 10px !important; font-size: .66rem !important; }
}

/* ---------- Small phones (≤ 420px) ---------- */
@media (max-width: 420px) {
  .sd-map-title { font-size: 1.2rem !important; }
  .sd-map-viewport { height: 32vh !important; min-height: 170px !important; max-height: 32vh !important; }
  .sd-map-side { padding: 12px 12px 20px !important; }
  .sd-panel-block { padding: 12px 12px !important; }
  .sd-zone-meter-km { font-size: 1rem !important; }
  .sd-map-footer { padding: 10px 12px !important; }
  .sd-map-save { padding: 10px 14px !important; font-size: .82rem !important; }
  .sd-map-footer-actions .btn-ghost { padding: 9px 12px !important; font-size: .78rem !important; }
  .sd-map-footer-actions { gap: 8px !important; }

  .sd-address-trigger {
    grid-template-columns: 40px 1fr 28px 0px !important;
    padding: 12px 12px !important;
    gap: 9px !important;
  }
  .sd-address-trigger-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; border-radius: 11px !important; }
  .sd-address-trigger-value { font-size: .84rem !important; }
  .sd-address-trigger-meta { font-size: .64rem !important; }
  .sd-address-trigger-arrow { width: 28px !important; height: 28px !important; font-size: .78rem !important; }
}

/* ---------- Very small phones (≤ 360px) ---------- */
@media (max-width: 360px) {
  .sd-map-head { padding: 16px 12px 10px !important; }
  .sd-map-title { font-size: 1.05rem !important; }
  .sd-map-sub { font-size: .76rem !important; }
  .sd-map-tabs {
    grid-template-columns: 1fr 1fr !important;
    padding: 8px 10px 10px !important;
    gap: 5px !important;
  }
  .sd-map-tab {
    grid-template-columns: 26px 1fr !important;
    padding: 8px 8px !important;
    gap: 6px !important;
  }
  .sd-map-tab-ico {
    width: 26px !important;
    height: 26px !important;
    font-size: .74rem !important;
    border-radius: 8px !important;
  }
  .sd-map-tab-body strong { font-size: .72rem !important; }
  .sd-map-tab-body small { display: none !important; }
  /* Hide the checkmark bubble on the tiniest screens — the icon +
     border colour already communicate "selected" */
  .sd-map-tab-check { display: none !important; }

  .sd-map-viewport { height: 30vh !important; min-height: 160px !important; max-height: 30vh !important; }
  .sd-map-side { padding: 10px 10px 18px !important; }
  .sd-panel-block { padding: 10px 10px !important; border-radius: 12px !important; }
  .sd-zone-meter-km { font-size: .92rem !important; }
  .sd-panel-coords-code { font-size: .64rem !important; padding: 6px 8px !important; }

  .sd-map-footer { padding: 10px 10px !important; }
  .sd-map-footer-value { font-size: .86rem !important; }
  .sd-map-save { padding: 9px 12px !important; font-size: .76rem !important; }
  .sd-map-footer-actions .btn-ghost { padding: 8px 10px !important; font-size: .72rem !important; }
  .sd-map-footer-label { display: none !important; }
}

/* ---------- Landscape phones (≤ 500px tall) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .sd-map-dialog {
    height: calc(100dvh - 0.5rem) !important;
    max-height: calc(100dvh - 0.5rem) !important;
    margin: 0.25rem auto !important;
  }
  .sd-map-body {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow: hidden !important;
  }
  .sd-map-viewport {
    flex: 1 1 55% !important;
    order: -1 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    border-bottom: 0 !important;
    border-right: 1px solid var(--line) !important;
  }
  .sd-map-side {
    flex: 1 1 45% !important;
    order: 0 !important;
    overflow-y: auto !important;
    max-height: 100% !important;
    padding: 10px 14px 14px !important;
  }
  .sd-map-head { padding: 12px 18px 8px !important; }
  .sd-map-title { font-size: 1.1rem !important; }
  .sd-map-sub { display: none !important; }
  .sd-map-tabs { padding: 8px 18px 0 !important; }
  .sd-map-tab { padding: 8px 12px !important; }
  .sd-map-footer { padding: 8px 18px !important; }
  .sd-map-footer-actions .btn-ghost,
  .sd-map-save { padding: 9px 14px !important; font-size: .8rem !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sd-map-strip,
  .sd-map-title-grad,
  .sd-map-search-spinner,
  .sd-map-live-dot::after,
  .sd-map-chip-dot::after,
  .sd-zone-meter-pin,
  .sd-zone-meter-fill {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   S'DINGO · AURORA CANVAS BACKGROUNDS
   ----------------------------------------------------------------
   Two isolated canvas engines live inside index.html:

     data-aurora-engine="journey"  →  #book  (.bc-bg)
     data-aurora-engine="panel"    →  #departures  (.db-bg)

   Each one hosts:
     • a WebGL aurora canvas (domain-warped noise)
     • a Canvas 2D story canvas (icons, pins, tickets, splines)
     • a film grain overlay
     • a soft vignette

   Performance & stability model:
     • Static SVG-grade gradient fallback when WebGL is missing
       OR when the device is detected as low-end OR when the
       network is Save-Data / 2g / effective type of 'slow-2g'.
     • Adaptive quality scaling (fps-driven) — drops particle
       counts to 0.2× on struggling devices.
     • Hidden-tab pause via the Page Visibility API.
     • prefers-reduced-motion → paints one static frame and stops.
     • Capped device-pixel-ratio to keep fill-rate sane.
     • All critical paths wrapped in try/catch; failure is silent.
   ================================================================ */

/* ---------- Shared host layout ---------- */
.bc-aurora-host,
.db-aurora-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  /* Static, no-WebGL fallback — always visible, always brand-correct */
  background:
    radial-gradient(1200px 800px at 15% 85%, rgba(212, 4, 4, .35) 0%, transparent 55%),
    radial-gradient(1000px 700px at 85% 15%, rgba(245, 179, 1, .22) 0%, transparent 55%),
    radial-gradient(1100px 850px at 50% 50%, rgba(5, 97, 201, .30) 0%, transparent 62%),
    linear-gradient(165deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
}

/* The booking console needs the lighter family — slightly brighter
   so the paper-white console keeps its glow. */
.bc-aurora-host {
  background:
    radial-gradient(1400px 900px at 10% 0%, rgba(42, 74, 155, .55) 0%, transparent 58%),
    radial-gradient(1200px 900px at 90% 100%, rgba(31, 58, 128, .55) 0%, transparent 60%),
    radial-gradient(950px 750px at 50% 50%, rgba(212, 4, 4, .14) 0%, transparent 62%),
    linear-gradient(180deg, #1B2350 0%, #232E63 40%, #1B2350 100%);
}

/* ---------- The canvases ---------- */
.bc-aurora-canvas,
.db-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.bc-aurora-webgl,
.db-aurora-webgl { z-index: 1; }

.bc-aurora-fx,
.db-aurora-fx     { z-index: 2; }

/* ---------- Film grain ---------- */
.bc-aurora-grain,
.db-aurora-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Vignette ---------- */
.bc-aurora-vignette,
.db-aurora-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 45%, transparent 55%, rgba(4, 12, 45, .50) 100%),
    linear-gradient(180deg,
      rgba(4, 12, 45, .35) 0%,
      transparent 12%,
      transparent 85%,
      rgba(4, 12, 45, .45) 100%);
}

/* ---------- Static freeze mode ----------
   When the engine detects a low-end device, a slow network, or a
   reduced-motion preference, it sets `data-aurora-static="1"` on
   the host. In that mode the WebGL and 2D canvases are hidden and
   the host falls back to its CSS background (already applied above).
   The canvases are also given a `will-change: auto` reset so the
   browser can reclaim GPU memory. */
.bc-aurora-host[data-aurora-static="1"] .bc-aurora-canvas,
.db-aurora-host[data-aurora-static="1"] .db-aurora-canvas {
  display: none !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bc-aurora-grain,
  .db-aurora-grain {
    animation: none !important;
  }
}

/* ---------- Ensure section content stacks above the aurora ---------- */
.book-section > .container-sd,
.board-section > .container-sd {
  position: relative;
  z-index: 20;
}

/* ============================================================
   SATELLITE-ONLY MAP MODE — chrome tuned for satellite imagery
   The map canvas is now always satellite, so the surrounding
   UI gets a slightly deeper, more cinematic treatment so the
   satellite tiles pop. Nothing functional changes.
   ============================================================ */

/* Darker map viewport frame so satellite imagery is the hero */
.sd-map-viewport {
  background: #0A1430;             /* deep navy shows through tile gaps */
}

/* When satellite tiles load, the map is dark — the overlay chips
   need a touch more contrast so they never disappear into shadow. */
.sd-map-chip {
  background: rgba(10, 20, 48, 0.78);
  border-color: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.sd-map-chip-dot {
  background: #9EE7B8;
  box-shadow: 0 0 0 3px rgba(158, 231, 184, 0.22);
}
.sd-map-chip-dot::after {
  border-color: #9EE7B8;
}

.sd-map-chip-hint {
  color: rgba(255, 255, 255, 0.9);
}
.sd-map-chip-hint .bi {
  color: #FFD966;                  /* gold hand icon = "grab the pin" */
}

/* Control buttons on the map — dark glass so they read on satellite */
.sd-map-ctl {
  background: rgba(10, 20, 48, 0.82);
  border-color: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}
.sd-map-ctl:hover {
  background: #FFFFFF;
  color: #0A1430;
  border-color: #FFFFFF;
}
.sd-map-ctl .bi { color: #FFD966; }
.sd-map-ctl:hover .bi { color: #0A1430; }
.sd-map-ctl-ghost .bi { color: #66A3E0; }
.sd-map-ctl-ghost:hover .bi { color: #0A1430; }

/* Marker pin — add a subtle white glow so the red pin never
   gets lost against dark rooftops or dense vegetation. */
.sd-map-canvas img[src^="data:image/svg"] {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55))
          drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

/* Google's own zoom / street-view / fullscreen controls sit on
   the satellite tiles — give them a dark glass treatment too. */
.gm-bundled-control .gm-svpc,
.gm-bundled-control .gmnoprint > div,
.gm-fullscreen-control {
  background-color: rgba(10, 20, 48, 0.82) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6) !important;
}
.gm-bundled-control .gm-svpc img,
.gm-bundled-control .gmnoprint img,
.gm-fullscreen-control img {
  filter: invert(1) brightness(1.4) !important;
}

/* Info window — dark glass, so it matches the satellite mood */
.gm-style-iw-c {
  background: rgba(10, 20, 48, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.gm-style-iw-d { color: #FFFFFF !important; }
.gm-style-iw-tc::after { background: rgba(10, 20, 48, 0.95) !important; }
/* ================================================================
   AURORA HOST + CANVAS — FINAL FIX
   ----------------------------------------------------------------
   Ensures the two canvases always fill their parent `.bc-bg` /
   `.db-bg` host exactly, so the JS can read `clientWidth` /
   `clientHeight` and render at the true section aspect ratio.
   Without this, `clientHeight` would be 0 (inline canvas default),
   and everything would render at the wrong size.
   ================================================================ */
.bc-bg,
.db-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Force the browser to give the host an actual box so
     clientWidth/clientHeight are never zero. */
  min-height: 1px;
}

.bc-aurora-canvas,
.db-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Stops the tiny 300×150 default flash before the first draw. */
.bc-aurora-webgl,
.db-aurora-webgl,
.bc-aurora-fx,
.db-aurora-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Booking console & departure board must sit above the aurora. */
.book-section > .container-sd,
.board-section > .container-sd {
  position: relative;
  z-index: 20;
}

/* ================================================================
   S'DINGO · FARES AURORA BACKGROUND
   ----------------------------------------------------------------
   Hosts the WebGL aurora + Canvas 2D story layer behind the
   "05 / Transparent fares" section, styled to feel like a
   premium departure lounge floating in a midnight sky.

   Stability contract:
     • Static CSS gradient remains visible at all times as base
     • Canvas hidden + gradient frozen on:
         – WebGL failure
         – reduced-motion
         – slow network (Save-Data / 2g / 3g / slow-2g)
         – low-end devices (RAM ≤ 2GB or cores ≤ 2)
     • Capped DPR (1.5 mobile / 2 desktop)
     • Pauses on hidden tab
     • Re-inits on resize (ResizeObserver on the host)
     • Every critical path wrapped in try/catch
   ================================================================ */

/* ---------- Section frame — deep twilight canvas ---------- */
.fares {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Deep navy base — kept as the fallback for static mode */
  background:
    radial-gradient(1200px 800px at 15% 85%, rgba(212, 4, 4, .30) 0%, transparent 58%),
    radial-gradient(1000px 700px at 85% 15%, rgba(15, 115, 219, .30) 0%, transparent 58%),
    radial-gradient(1100px 850px at 50% 50%, rgba(5, 97, 201, .22) 0%, transparent 62%),
    linear-gradient(165deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
  color: #fff;
}

/* Kill the old light-paper overlays so the aurora is the hero */
.fares::before,
.fares::after {
  content: none !important;
}

/* ---------- Aurora host ---------- */
.fares-aurora-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Base fallback: same palette as the section so nothing flashes */
  background:
    radial-gradient(1200px 800px at 15% 85%, rgba(212, 4, 4, .35) 0%, transparent 55%),
    radial-gradient(1000px 700px at 85% 15%, rgba(15, 115, 219, .35) 0%, transparent 55%),
    radial-gradient(1100px 850px at 50% 50%, rgba(5, 97, 201, .30) 0%, transparent 62%),
    linear-gradient(165deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
}

/* ---------- Canvases ---------- */
.fares-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.fares-aurora-webgl { z-index: 1; }
.fares-aurora-fx    { z-index: 2; }

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

/* ---------- Vignette ---------- */
.fares-aurora-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 45%, transparent 55%, rgba(4, 12, 45, .50) 100%),
    linear-gradient(180deg,
      rgba(4, 12, 45, .35) 0%,
      transparent 12%,
      transparent 85%,
      rgba(4, 12, 45, .45) 100%);
}

/* ---------- Static freeze mode ---------- */
.fares-aurora-host[data-aurora-static="1"] .fares-aurora-canvas {
  display: none !important;
}

/* ---------- Content sits above every aurora layer ---------- */
.fares > .container-sd {
  position: relative;
  z-index: 20;
}

/* ---------- Re-skin the section chrome for the dark canvas ---------- */
.fares .section-title { color: #fff; }
.fares .section-title .outline {
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .55);
  color: transparent;
}
.fares .section-lead { color: rgba(255, 255, 255, .72); }
.fares .eyebrow { color: var(--sky, #66A3E0); }
.fares .eyebrow::before { background: var(--red-bright); }

/* ---------- Fare toggle (One way / Return) on dark ---------- */
.fares .fare-toggle {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  border-color: rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 12px 32px -14px rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.fares .fare-toggle-option { color: rgba(255, 255, 255, .85); }
.fares .fare-toggle-option .fto-text strong { color: #fff; }
.fares .fare-toggle-option .fto-text small { color: rgba(255, 255, 255, .6); }
.fares .fare-toggle-option .fto-icon {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}
.fares .fare-toggle-option[aria-pressed="true"] .fto-text strong { color: #fff; }
.fares .fare-toggle-note { color: rgba(255, 255, 255, .65); }
.fares .fare-toggle-note .bi { color: var(--sky); }

/* ---------- Ticket cards on dark — glassy premium paper ---------- */
.fares .ticket {
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, .65),
    0 8px 22px -12px rgba(5, 97, 201, .35),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: #fff;
}
.fares .ticket.featured {
  border-color: rgba(102, 163, 224, .45);
  box-shadow:
    0 34px 80px -28px rgba(5, 97, 201, .55),
    0 10px 24px -12px rgba(5, 97, 201, .3),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
.fares .ticket::before {
  background: linear-gradient(90deg, #D40404 0%, #F5B301 33%, #0561C9 66%, #D40404 100%);
  background-size: 200% 100%;
  animation: faresBar 7s linear infinite;
}
.fares .ticket.featured::before {
  background: linear-gradient(90deg, #0561C9 0%, #66A3E0 50%, #0F73DB 100%);
  background-size: 200% 100%;
  animation: faresBar 7s linear infinite;
}
@keyframes faresBar { to { background-position: 200% 0; } }

.fares .ticket-code { color: rgba(255, 255, 255, .5); }
.fares .ticket-route span { color: #fff; }
.fares .ticket-route .bi { color: var(--red-bright); }
.fares .ticket-meta { color: rgba(255, 255, 255, .6); }
.fares .ticket-meta span { color: rgba(255, 255, 255, .7); }

.fares .ticket-perf { border-top-color: rgba(255, 255, 255, .18); }
.fares .ticket-perf::before,
.fares .ticket-perf::after {
  background: #0A1430;
  border-color: rgba(255, 255, 255, .18);
}

.fares .ticket-price .amount {
  background: linear-gradient(180deg, #fff 0%, #B9D8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.fares .ticket-price .unit { color: rgba(255, 255, 255, .6); }

.fares .ticket-features li { color: rgba(255, 255, 255, .82); }
.fares .ticket-features li .bi { color: #9EE7B8; }

.fares .ticket-barcode { opacity: .18; }
.fares .ticket-barcode i { background: #fff; }

/* ---------- Pills on dark ---------- */
.fares .pill {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .9);
}
.fares .pill-red {
  background: rgba(212, 4, 4, .22);
  border-color: rgba(255, 107, 107, .35);
  color: #FFB3B3;
}
.fares .pill-blue {
  background: rgba(15, 115, 219, .22);
  border-color: rgba(102, 163, 224, .35);
  color: #B9D8FF;
}
.fares .pill-green {
  background: rgba(22, 128, 60, .22);
  border-color: rgba(158, 231, 184, .35);
  color: #9EE7B8;
}

/* ---------- Ghost buttons on dark ---------- */
.fares .btn-ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.fares .btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

/* ---------- Fare note on dark ---------- */
.fares .fare-note {
  color: rgba(255, 255, 255, .65);
}
.fares .fare-note .btn-link-sd { color: var(--sky); }
.fares .fare-note .btn-link-sd:hover { color: #fff; }

/* ---------- Reduced motion — freeze the aurora ---------- */
@media (prefers-reduced-motion: reduce) {
  .fares .ticket::before { animation: none !important; }
  .fares-aurora-host { background-attachment: scroll; }
}

/* ---------- Mobile — dial down layers to keep phones buttery ---------- */
@media (max-width: 767px) {
  .fares { padding: 80px 0; }
  .fares .ticket { backdrop-filter: blur(10px); }
}

/* ================================================================
   S'DINGO · REQUEST AURORA BACKGROUND
   ----------------------------------------------------------------
   Hosts the "Living Aurora Route" engine behind the
   "07 / Custom & group requests" section. The section becomes a
   deep midnight sky with the N4 route ribbon and the shuttle
   travelling across it — while the group panel itself floats
   above on glass.

   Stability contract:
     • Static gradient remains visible at all times
     • Canvas hidden on reduced-motion / slow network / low-end
     • Pauses on hidden tab + when section scrolls off-screen
     • Capped DPR (1.5 WebGL / 2 2D)
     • Every critical path wrapped in try/catch
   ================================================================ */

/* ---------- Section frame — deep midnight canvas ---------- */
.request-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Base fallback — always visible, always brand-correct */
  background:
    radial-gradient(1200px 800px at 12% 18%, rgba(252, 4, 4, .28) 0%, transparent 58%),
    radial-gradient(1000px 720px at 88% 82%, rgba(15, 115, 219, .32) 0%, transparent 58%),
    radial-gradient(900px 700px at 55% 100%, rgba(245, 179, 1, .16) 0%, transparent 62%),
    linear-gradient(165deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
  color: #fff;
}

/* Kill the old blueprint / grid-paper background layers */
.request-section::before,
.request-section::after {
  content: none !important;
}

/* ---------- Aurora host ---------- */
.request-aurora-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 12% 18%, rgba(252, 4, 4, .30) 0%, transparent 58%),
    radial-gradient(1000px 720px at 88% 82%, rgba(15, 115, 219, .34) 0%, transparent 58%),
    radial-gradient(900px 700px at 55% 100%, rgba(245, 179, 1, .16) 0%, transparent 62%),
    linear-gradient(165deg, #0A1430 0%, #0F1E4A 45%, #0A1430 100%);
}

/* ---------- Canvases ---------- */
.request-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.request-aurora-webgl { z-index: 1; }
.request-aurora-fx    { z-index: 2; }

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

/* ---------- Vignette ---------- */
.request-aurora-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 45%, transparent 55%, rgba(10, 20, 48, .55) 100%),
    linear-gradient(180deg,
      rgba(10, 20, 48, .45) 0%,
      transparent 18%,
      transparent 82%,
      rgba(10, 20, 48, .55) 100%);
}

/* ---------- Static freeze mode ---------- */
.request-aurora-host[data-aurora-static="1"] .request-aurora-canvas {
  display: none !important;
}

/* ---------- Content sits above every aurora layer ---------- */
.request-section > .container-sd {
  position: relative;
  z-index: 20;
}

/* ================================================================
   RE-SKIN THE EXISTING SECTION CHROME FOR THE DARK CANVAS
   (all content stays identical — only the surrounding styles
   adjust so the panel keeps its premium look on the aurora)
   ================================================================ */

/* Section heading + eyebrow on dark */
.request-section .section-title { color: #fff; }
.request-section .section-title .accent { color: var(--gold, #F5B301); }
.request-section .section-title .outline {
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .55);
  color: transparent;
}
.request-section .section-lead { color: rgba(255, 255, 255, .72); }
.request-section .eyebrow { color: var(--sky, #66A3E0); }
.request-section .eyebrow::before { background: var(--red-bright, #FC0404); }

/* The perks list (left column) on dark */
.request-section .request-perks li { color: rgba(255, 255, 255, .82); }
.request-section .request-perks li strong { color: #fff; }
.request-section .request-perks li .bi,
.request-section .request-perks li .perk-num {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  color: var(--sky, #66A3E0);
  box-shadow:
    0 4px 14px -6px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* The "Prefer to talk it through?" contact card on dark */
.request-section .request-contact {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    0 20px 50px -24px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}
.request-section .request-contact small { color: rgba(255, 255, 255, .6); }
.request-section .request-contact a { color: #fff; }
.request-section .request-contact a:hover { color: var(--sky, #66A3E0); }

/* The group feature panel — already dark glass; just lift it */
.request-section .group-feature-panel {
  background: linear-gradient(165deg, #0A1430 0%, #101E4A 45%, #0A1430 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 40px 100px -34px rgba(4, 12, 45, .75),
    0 12px 30px -12px rgba(5, 97, 201, .35),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ---------- Reduced motion — freeze the aurora ---------- */
@media (prefers-reduced-motion: reduce) {
  .request-aurora-grain { display: none; }
}

/* ---------- Mobile — reduce padding and lighten layers ---------- */
@media (max-width: 767px) {
  .request-section { padding: 70px 0; }
  .request-section .group-feature-panel { backdrop-filter: blur(10px); }
}

/* ================================================================
   S'DINGO · TESTIMONIALS AURORA PRIME BACKGROUND (v3.0)
   ----------------------------------------------------------------
   Hosts the Aurora Prime v3.0 engine behind the
   "09 / On the record" testimonials section. The section becomes
   a deep cosmic sky with layered aurora, four route splines with
   travelling pulses, comet, sparkles, stardust, plus-signs,
   door-to-door pins, glass orbs, halftone, swooshes — while the
   marquee quote cards float above.

   Stability contract:
     • Static CSS gradient remains visible at all times
     • Canvas hidden on reduced-motion / slow network / low-end
     • Adaptive quality driven by live FPS
     • Pauses on hidden tab + when section scrolls off-screen
     • Capped DPR (1.5 mobile / 2 desktop)
     • Every critical path wrapped in try/catch
   ================================================================ */

/* ---------- Section frame — deep cosmic canvas ---------- */
.testimonials {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Base fallback — matches the shader palette so nothing flashes */
  background:
    radial-gradient(1200px 800px at 12% 18%, rgba(212, 4, 4, .28) 0%, transparent 58%),
    radial-gradient(1000px 720px at 88% 82%, rgba(15, 115, 219, .32) 0%, transparent 58%),
    radial-gradient(900px 700px at 55% 100%, rgba(245, 179, 1, .16) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #050D2E 55%, #0A1430 100%);
  color: #fff;
}

/* Kill any inherited background overlays from the old styling */
.testimonials::before,
.testimonials::after {
  content: none !important;
}

/* ---------- Aurora host ---------- */
.testimonials-aurora-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 12% 18%, rgba(212, 4, 4, .30) 0%, transparent 58%),
    radial-gradient(1000px 720px at 88% 82%, rgba(15, 115, 219, .34) 0%, transparent 58%),
    radial-gradient(900px 700px at 55% 100%, rgba(245, 179, 1, .16) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #050D2E 55%, #0A1430 100%);
}

/* ---------- Canvases ---------- */
.testimonials-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.testimonials-aurora-webgl { z-index: 1; }
.testimonials-aurora-fx    { z-index: 2; }

/* ---------- Film grain (identical to Aurora Prime) ---------- */
.testimonials-aurora-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Vignette (identical to Aurora Prime) ---------- */
.testimonials-aurora-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(150% 110% at 50% 45%, transparent 52%, rgba(4, 12, 45, 0.55) 100%),
    linear-gradient(180deg,
      rgba(4, 12, 45, 0.45) 0%,
      transparent 10%,
      transparent 88%,
      rgba(4, 12, 45, 0.6) 100%);
}

/* ---------- Static freeze mode ---------- */
.testimonials-aurora-host[data-aurora-static="1"] .testimonials-aurora-canvas {
  display: none !important;
}

/* ---------- Content sits above every aurora layer ---------- */
.testimonials > .container-sd {
  position: relative;
  z-index: 20;
}

/* ================================================================
   RE-SKIN THE SECTION CHROME FOR THE DARK CANVAS
   (content stays identical; only surrounding styles adjust)
   ================================================================ */

/* Section heading + eyebrow on dark */
.testimonials .section-title { color: #fff; }
.testimonials .section-title .outline {
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .55);
  color: transparent;
}
.testimonials .section-lead { color: rgba(255, 255, 255, .72); }
.testimonials .eyebrow { color: var(--sky, #66A3E0); }
.testimonials .eyebrow::before { background: var(--red-bright, #FC0404); }

/* Marquee edge fades — swap the light surface fade for dark */
.testimonials .marquee::before {
  background: linear-gradient(90deg, rgba(4, 12, 45, .85), transparent);
}
.testimonials .marquee::after {
  background: linear-gradient(270deg, rgba(4, 12, 45, .85), transparent);
}

/* Quote cards — glassy premium paper over the aurora */
.testimonials .quote-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, .65),
    0 10px 24px -12px rgba(5, 97, 201, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}
.testimonials .quote-card:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .28);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, .75),
    0 14px 30px -14px rgba(5, 97, 201, .35),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
.testimonials .quote-card blockquote { color: rgba(255, 255, 255, .85); }
.testimonials .quote-stars { color: var(--gold, #F5B301); }
.testimonials .quote-person strong { color: #fff; }
.testimonials .quote-person small { color: rgba(255, 255, 255, .6); }
.testimonials .quote-verified { color: #9EE7B8; }

/* Avatar chips keep their gradient but pick up a ring */
.testimonials .quote-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .1), 0 4px 10px rgba(0, 0, 0, .35);
}

/* The "sample content" note at the bottom */
.testimonials p[style*="color:var(--grey)"] {
  color: rgba(255, 255, 255, .5) !important;
}

/* ---------- Reduced motion — freeze the aurora ---------- */
@media (prefers-reduced-motion: reduce) {
  .testimonials-aurora-grain { display: none; }
}

/* ---------- Mobile — reduce padding, lighten blur ---------- */
@media (max-width: 767px) {
  .testimonials { padding: 70px 0; }
  .testimonials .quote-card { backdrop-filter: blur(10px); }
}

/* ================================================================
   S'DINGO · ALERTS QUANTUM ROUTE NEBULA BACKGROUND
   ----------------------------------------------------------------
   Hosts the Quantum Route Nebula engine behind the
   "11 / Trip alerts" section. The section becomes a deep cosmic
   route network — aurora nebula, hyperspace channel, orbital
   rings, shuttle on its infinite route, holographic boarding
   passes and route nodes — while the alerts panel floats above
   on glass.

   Stability contract:
     • Static gradient remains visible at all times
     • Canvas hidden on reduced-motion / slow network / low-end
     • Pauses on hidden tab + when section scrolls off-screen
     • Capped DPR (1.5 WebGL / 2 2D)
     • Every critical path wrapped in try/catch
   ================================================================ */

/* ---------- Section frame — deep cosmic canvas ---------- */
.alerts {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Base fallback — matches the shader palette so nothing flashes */
  background:
    radial-gradient(1200px 800px at 10% 82%, rgba(252, 4, 4, .32) 0%, transparent 58%),
    radial-gradient(1000px 720px at 90% 80%, rgba(15, 115, 219, .34) 0%, transparent 58%),
    radial-gradient(900px 700px at 54% 4%, rgba(245, 179, 1, .18) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #0A1430 55%, #041C5C 100%);
  color: #fff;
}

/* Kill any inherited background overlays from the old styling */
.alerts::before,
.alerts::after {
  content: none !important;
}

/* ---------- Nebula host ---------- */
.alerts-nebula-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 10% 82%, rgba(252, 4, 4, .34) 0%, transparent 58%),
    radial-gradient(1000px 720px at 90% 80%, rgba(15, 115, 219, .36) 0%, transparent 58%),
    radial-gradient(900px 700px at 54% 4%, rgba(245, 179, 1, .18) 0%, transparent 62%),
    linear-gradient(165deg, #041C5C 0%, #0A1430 55%, #041C5C 100%);
}

/* ---------- Canvases ---------- */
.alerts-nebula-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.alerts-nebula-webgl { z-index: 1; }
.alerts-nebula-fx    { z-index: 2; }

/* ---------- Vignette (identical to Quantum Route Nebula) ---------- */
.alerts-nebula-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 52%, rgba(4, 28, 92, .62) 100%),
    linear-gradient(180deg,
      rgba(4, 28, 92, .35) 0%,
      transparent 20%,
      transparent 78%,
      rgba(10, 20, 48, .62) 100%);
  mix-blend-mode: multiply;
}

/* ---------- Film grain (identical to Quantum Route Nebula) ---------- */
.alerts-nebula-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Static freeze mode ---------- */
.alerts-nebula-host[data-aurora-static="1"] .alerts-nebula-canvas {
  display: none !important;
}

/* ---------- Content sits above every nebula layer ---------- */
.alerts > .container-sd {
  position: relative;
  z-index: 20;
}

/* ================================================================
   RE-SKIN THE SECTION CHROME FOR THE DARK CANVAS
   (content stays identical; only surrounding styles adjust)
   ================================================================ */

/* Section heading + eyebrow on dark */
.alerts .section-title { color: #fff; }
.alerts .section-title .accent { color: var(--gold, #F5B301); }
.alerts .section-lead { color: rgba(255, 255, 255, .72); }
.alerts .eyebrow { color: var(--sky, #66A3E0); }
.alerts .eyebrow::before { background: var(--red-bright, #FC0404); }

/* Alerts panel — glassy premium card over the nebula */
.alerts .alerts-panel {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
  padding: 44px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    0 40px 100px -34px rgba(0, 0, 0, .7),
    0 14px 32px -14px rgba(5, 97, 201, .32),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* Form controls on dark glass */
.alerts .alerts-form .control {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .20);
  color: #fff;
  transition: all .3s var(--ease);
}
.alerts .alerts-form .control::placeholder {
  color: rgba(255, 255, 255, .5);
}
.alerts .alerts-form .control:hover {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .09);
}
.alerts .alerts-form .control:focus {
  border-color: var(--sky, #66A3E0);
  background: rgba(255, 255, 255, .10);
  box-shadow: 0 0 0 4px rgba(102, 163, 224, .18);
  outline: none;
}
.alerts .alerts-form select.control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23C3B6BC'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Ensure select options are readable in the native dropdown */
.alerts .alerts-form select.control option {
  background: #0A1430;
  color: #fff;
}

/* Fine print under the form */
.alerts .alerts-fine {
  color: rgba(255, 255, 255, .55);
}
.alerts .alerts-fine .bi {
  color: #9EE7B8;
}

/* ---------- Reduced motion — freeze the nebula ---------- */
@media (prefers-reduced-motion: reduce) {
  .alerts-nebula-grain { display: none; }
}

/* ---------- Mobile — compact padding, lighter blur ---------- */
@media (max-width: 767px) {
  .alerts { padding: 70px 0; }
  .alerts .alerts-panel {
    padding: 30px 22px;
    border-radius: 22px;
    backdrop-filter: blur(10px);
  }
  .alerts .alerts-form .control {
    backdrop-filter: blur(8px);
  }
}

/* ============================================================
   S'DINGO · DUPLICATE REQUEST MODAL — "THE ARRIVAL DESK"
   ------------------------------------------------------------
   v5 · World-class.
   Same dark aurora glass as #bookingModal (Make it official).
   Every section is a distinct, elevated card.
   Signature close orb preserved.
   ============================================================ */

/* ---------- 1 · DIALOG SIZING ---------- */
.sd-dup-dialog {
  max-width: 640px;
  width: calc(100% - 32px);
  margin: 0.5rem auto;
}

/* ---------- 2 · SHELL — same dark aurora as bookingModal ---------- */
#sdDupRequestModal .sdd-modal-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(130% 100% at 0% 0%,  rgba(252, 4, 4, 0.16) 0%, transparent 55%),
    radial-gradient(130% 100% at 100% 100%, rgba(15, 115, 219, 0.20) 0%, transparent 55%),
    linear-gradient(165deg, #0A1430 0%, #101E4A 45%, #0A1430 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow:
    0 60px 140px -40px rgba(0, 0, 0, 0.88),
    0 20px 50px -20px rgba(5, 97, 201, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Aurora bloom behind the whole card */
#sdDupRequestModal .sdd-modal-content::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 480px at 8% 12%,  rgba(252, 74, 74, 0.30) 0%, transparent 65%),
    radial-gradient(circle 520px at 92% 88%, rgba(15, 115, 219, 0.32) 0%, transparent 65%),
    radial-gradient(circle 380px at 50% 100%, rgba(245, 179, 1, 0.16) 0%, transparent 65%);
  filter: blur(52px);
  animation: sddAuroraDrift 24s ease-in-out infinite alternate;
}

@keyframes sddAuroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

#sdDupRequestModal .sdd-modal-content > * {
  position: relative;
  z-index: 1;
}

/* ---------- 3 · BRAND STRIP ---------- */
#sdDupRequestModal .sdd-strip {
  height: 4px;
  background: linear-gradient(90deg,
    #FC0404 0%, #F5B301 33%, #0F73DB 66%, #FC0404 100%);
  background-size: 200% 100%;
  animation: sddStripFlow 6s linear infinite;
}

@keyframes sddStripFlow { to { background-position: 200% 0; } }

/* ---------- 4 · HEAD ---------- */
#sdDupRequestModal .sdd-head {
  padding: 30px 34px 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

#sdDupRequestModal .sdd-head-left {
  min-width: 0;
  flex: 1 1 auto;
}

#sdDupRequestModal .sdd-head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9EE7B8;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(22, 128, 60, 0.18);
  border: 1px solid rgba(158, 231, 184, 0.28);
  margin-bottom: 12px;
}

#sdDupRequestModal .sdd-head-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 3px rgba(158, 231, 184, 0.22);
  position: relative;
  flex: none;
  animation: sddHeadDotPulse 2.2s ease-in-out infinite;
}

@keyframes sddHeadDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(158, 231, 184, 0.22); }
  50%      { box-shadow: 0 0 0 7px rgba(158, 231, 184, 0.02); }
}

#sdDupRequestModal .sdd-head-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 10px;
}

#sdDupRequestModal .sdd-head-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
  line-height: 1.6;
  max-width: 52ch;
}

#sdDupRequestModal .sdd-close-orb {
  flex: none;
}

/* ---------- 5 · BODY ---------- */
#sdDupRequestModal .sdd-modal-body {
  padding: 24px 34px 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

#sdDupRequestModal .sdd-modal-body::-webkit-scrollbar { width: 6px; }
#sdDupRequestModal .sdd-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 100px;
}

.sdd-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- 6 · HERO CARD ---------- */
.sdd-hero {
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 26px 26px;
  border-radius: 22px;
  background:
    radial-gradient(circle 320px at 15% 20%, rgba(252, 74, 74, 0.24) 0%, transparent 70%),
    radial-gradient(circle 280px at 85% 90%, rgba(15, 115, 219, 0.20) 0%, transparent 70%),
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  border: 1.5px solid rgba(102, 163, 224, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 36px -16px rgba(5, 97, 201, 0.55);
}

.sdd-hero-aurora,
.sdd-hero-grid {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.sdd-hero-aurora {
  inset: 0;
  background:
    radial-gradient(circle 340px at 18% 22%, rgba(80, 160, 240, 0.35) 0%, transparent 70%),
    radial-gradient(circle 300px at 82% 78%, rgba(245, 179, 1, 0.18) 0%, transparent 70%);
  filter: blur(38px) saturate(1.3);
  animation: sddHeroAurora 20s ease-in-out infinite alternate;
}

@keyframes sddHeroAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}

.sdd-hero-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(160, 200, 245, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 200, 245, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 0%, transparent 100%);
  opacity: 0.5;
}

.sdd-hero-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
}
.sdd-hero-orb-red {
  width: 200px; height: 200px;
  top: -45%; left: -8%;
  background: radial-gradient(circle, rgba(252, 74, 74, 0.55) 0%, transparent 70%);
  animation: sddOrbRed 18s ease-in-out infinite alternate;
}
.sdd-hero-orb-blue {
  width: 180px; height: 180px;
  bottom: -45%; right: -6%;
  background: radial-gradient(circle, rgba(80, 160, 240, 0.55) 0%, transparent 70%);
  animation: sddOrbBlue 22s ease-in-out infinite alternate;
}
@keyframes sddOrbRed  { to { transform: translate3d(46px, 34px, 0) scale(1.18); } }
@keyframes sddOrbBlue { to { transform: translate3d(-46px, -34px, 0) scale(1.18); } }

.sdd-hero > *:not(.sdd-hero-aurora):not(.sdd-hero-grid):not(.sdd-hero-orb) {
  position: relative;
  z-index: 2;
}

.sdd-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

/* ---- Icon seal ---- */
.sdd-hero-icon {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: #fff;
  background: linear-gradient(140deg, #0F73DB 0%, #0561C9 55%, #041C5C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -3px 0 rgba(0, 0, 0, 0.30),
    0 20px 44px -14px rgba(15, 115, 219, 0.80),
    0 8px 18px -6px rgba(0, 0, 0, 0.5);
  flex: none;
  animation: sddIconFloat 4s ease-in-out infinite;
  overflow: visible;
}

@keyframes sddIconFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-3deg); }
}

.sdd-hero-icon-ring {
  position: absolute;
  inset: -6px;
  border-radius: 28px;
  border: 1.5px solid rgba(102, 163, 224, 0.62);
  pointer-events: none;
  animation: sddIconRing 2.6s ease-out infinite;
}
.sdd-hero-icon-ring-2 {
  animation-delay: 1.3s;
}

@keyframes sddIconRing {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---- Text block ---- */
.sdd-hero-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}

.sdd-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9EE7B8;
  margin-bottom: 10px;
}

.sdd-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9EE7B8;
  box-shadow: 0 0 0 3px rgba(158, 231, 184, 0.22);
  position: relative;
  flex: none;
  animation: sddHeadDotPulse 2s ease-in-out infinite;
}

.sdd-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.sdd-hero-name {
  background: linear-gradient(90deg, #FC0404 0%, #F5B301 50%, #66A3E0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sddNameFlow 8s linear infinite;
}

@keyframes sddNameFlow { to { background-position: 200% 0; } }

.sdd-hero-sub {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 56ch;
  overflow-wrap: anywhere;
}
.sdd-hero-sub strong { color: #fff; font-weight: 700; }

/* ---- Full-width live badge ---- */
.sdd-hero-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 15px;
  border-radius: 16px;
  background:
    linear-gradient(140deg, rgba(15, 115, 219, 0.22) 0%, rgba(4, 12, 45, 0.55) 100%);
  border: 1px solid rgba(102, 163, 224, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 22px -10px rgba(15, 115, 219, 0.55);
  width: 100%;
  min-width: 0;
}

.sdd-hero-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: linear-gradient(140deg, #0F73DB, #041C5C);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 16px -6px rgba(15, 115, 219, 0.65);
  flex: none;
}

.sdd-hero-badge-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sdd-hero-badge-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.sdd-hero-badge-date {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #B9D8FF;
  line-height: 1.2;
  text-shadow: 0 0 16px rgba(102, 163, 224, 0.55);
  overflow-wrap: anywhere;
}

/* ---------- 7 · SMART SUMMARY ---------- */
.sdd-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 20px;
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.sdd-summary-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 4px;
  min-width: 0;
}

.sdd-summary-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  margin-bottom: 2px;
}
.sdd-summary-icon-blue {
  background: rgba(15, 115, 219, 0.20);
  color: #B9D8FF;
  border: 1px solid rgba(15, 115, 219, 0.32);
}
.sdd-summary-icon-sky {
  background: rgba(102, 163, 224, 0.20);
  color: #B9D8FF;
  border: 1px solid rgba(102, 163, 224, 0.32);
}
.sdd-summary-icon-gold {
  background: rgba(245, 179, 1, 0.20);
  color: #FFD966;
  border: 1px solid rgba(245, 179, 1, 0.32);
}

.sdd-summary-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.2;
}

.sdd-summary-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
}

.sdd-summary-value.sdd-summary-gold {
  background: linear-gradient(180deg, #fff 0%, #FFD966 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sdd-summary-divider {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 6px;
}

/* ---------- 8 · LIST HEAD ---------- */
.sdd-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 2px;
  flex-wrap: wrap;
}

.sdd-list-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.sdd-list-title .bi { color: #FFD966; font-size: 0.95rem; }

.sdd-list-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.sdd-list-hint .bi { color: var(--sky); font-size: 0.82rem; }

/* ---------- 9 · REQUEST CARDS ---------- */
.sdd-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sdd-req-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: 18px;
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.4s ease;
}

.sdd-req-card:hover {
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(102, 163, 224, 0.42);
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px -18px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.sdd-req-card.is-live {
  border-color: rgba(158, 231, 184, 0.35);
}

.sdd-req-aurora {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle 220px at 15% 25%, rgba(15, 115, 219, 0.42) 0%, transparent 70%),
    radial-gradient(circle 200px at 85% 80%, rgba(252, 74, 74, 0.32) 0%, transparent 70%);
  filter: blur(24px);
}

.sdd-req-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.10) 52%,
    transparent 65%
  );
  transform: translateX(-140%);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: screen;
}

.sdd-req-card:hover .sdd-req-shine {
  transform: translateX(140%);
}

.sdd-req-card > *:not(.sdd-req-aurora):not(.sdd-req-shine) {
  position: relative;
  z-index: 2;
}

/* -- Top row: ref + status -- */
.sdd-req-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sdd-req-ref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #B9D8FF;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(15, 115, 219, 0.16);
  border: 1px solid rgba(102, 163, 224, 0.34);
}
.sdd-req-ref .bi { color: var(--sky); font-size: 0.86rem; }

.sdd-req-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: rgba(15, 115, 219, 0.16);
  color: #B9D8FF;
  border: 1px solid rgba(15, 115, 219, 0.32);
  white-space: nowrap;
}

.sdd-req-status-ico {
  font-size: 0.82rem;
}

.sdd-req-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.sdd-req-status[data-status="confirmed"] {
  background: rgba(22, 128, 60, 0.20);
  color: #9EE7B8;
  border-color: rgba(158, 231, 184, 0.38);
}
.sdd-req-status[data-status="on_road"] {
  background: rgba(252, 4, 4, 0.20);
  color: #FFB3B3;
  border-color: rgba(255, 107, 107, 0.42);
}
.sdd-req-status[data-status="received"],
.sdd-req-status[data-status="reviewed"] {
  background: rgba(245, 179, 1, 0.18);
  color: #FFD966;
  border-color: rgba(245, 179, 1, 0.34);
}

.sdd-req-card.is-live .sdd-req-status-dot {
  animation: sddStatusDotPulse 2s ease-in-out infinite;
}
@keyframes sddStatusDotPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.02); }
}

/* -- Route row: City → City with a travelling bus -- */
.sdd-req-route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sdd-req-city {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.2;
}

.sdd-req-arrow-wrap {
  position: relative;
  flex: 1 1 60px;
  min-width: 40px;
  max-width: 140px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sdd-req-arrow-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background-image: linear-gradient(90deg,
    rgba(102, 163, 224, 0.55) 50%,
    transparent 50%);
  background-size: 8px 1.5px;
  background-repeat: repeat-x;
}

.sdd-req-arrow-bus {
  position: relative;
  z-index: 2;
  font-size: 0.82rem;
  color: #FFD966;
  background: rgba(10, 20, 48, 0.95);
  padding: 0 5px;
  filter: drop-shadow(0 0 6px rgba(245, 179, 1, 0.55));
}

/* -- Meta row -- */
.sdd-req-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.sdd-req-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.sdd-req-meta-item .bi { color: var(--sky); font-size: 0.82rem; }

.sdd-req-meta-gold {
  color: #FFD966;
}
.sdd-req-meta-gold .bi { color: #FFD966; }

/* ---------- 10 · CTA HEAD ---------- */
.sdd-cta-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px 0;
}

.sdd-cta-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
}

.sdd-cta-sub {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}

/* ---------- 11 · CTA GRID ---------- */
.sdd-cta-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sdd-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  color: #fff;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 20px -10px rgba(0, 0, 0, 0.55);
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.sdd-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sdd-cta-whatsapp::before {
  background: linear-gradient(140deg, #25D366 0%, #128C7E 100%);
}
.sdd-cta-phone::before {
  background: linear-gradient(140deg, #0F73DB 0%, #041C5C 100%);
}
.sdd-cta-email::before {
  background: linear-gradient(140deg, #FC0404 0%, #8C0404 100%);
}

.sdd-cta:hover,
.sdd-cta:focus-visible {
  transform: translateY(-3px);
  border-color: transparent;
  color: #fff;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 20px 40px -14px rgba(0, 0, 0, 0.7);
}
.sdd-cta:hover::before,
.sdd-cta:focus-visible::before {
  opacity: 1;
}
.sdd-cta:active {
  transform: translateY(-1px) scale(0.99);
}

.sdd-cta-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  flex: none;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sdd-cta-whatsapp .sdd-cta-icon {
  background: linear-gradient(140deg, #25D366 0%, #128C7E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px -8px rgba(37, 211, 102, 0.65);
}
.sdd-cta-phone .sdd-cta-icon {
  background: linear-gradient(140deg, #0F73DB 0%, #041C5C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px -8px rgba(15, 115, 219, 0.65);
}
.sdd-cta-email .sdd-cta-icon {
  background: linear-gradient(140deg, #FC0404 0%, #8C0404 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px -8px rgba(252, 4, 4, 0.65);
}

.sdd-cta:hover .sdd-cta-icon,
.sdd-cta:focus-visible .sdd-cta-icon {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 10px 24px -8px rgba(0, 0, 0, 0.35);
}

.sdd-cta-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sdd-cta-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.25;
}

.sdd-cta-body small {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.4s ease;
}

.sdd-cta:hover .sdd-cta-body small,
.sdd-cta:focus-visible .sdd-cta-body small {
  color: rgba(255, 255, 255, 0.9);
}

.sdd-cta-arrow {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.55);
  flex: none;
  transition: all 0.4s ease;
}

.sdd-cta:hover .sdd-cta-arrow,
.sdd-cta:focus-visible .sdd-cta-arrow {
  color: #fff;
  transform: translate(3px, -3px);
}

/* ---------- 12 · FINE PRINT ---------- */
.sdd-fine {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(4, 12, 45, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
}
.sdd-fine .bi {
  flex: none;
  margin-top: 2px;
  color: #9EE7B8;
  font-size: 0.95rem;
}

/* ---------- 13 · RESPONSIVE ---------- */
@media (max-width: 767px) {
  #sdDupRequestModal .sdd-head {
    padding: 22px 20px 2px;
  }
  #sdDupRequestModal .sdd-head-title { font-size: 1.35rem; }
  #sdDupRequestModal .sdd-modal-body { padding: 20px 20px 24px; }
  .sdd-body { gap: 18px; }

  .sdd-hero {
    padding: 24px 20px 22px;
    border-radius: 18px;
    gap: 18px;
  }
  .sdd-hero-top { gap: 16px; }
  .sdd-hero-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    font-size: 1.65rem;
  }
  .sdd-hero-icon-ring { inset: -5px; border-radius: 22px; }
  .sdd-hero-title { font-size: 1.22rem; }
  .sdd-hero-sub { font-size: 0.84rem; line-height: 1.65; }

  .sdd-hero-badge {
    padding: 13px 14px 15px;
    gap: 12px;
    border-radius: 14px;
  }
  .sdd-hero-badge-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    font-size: 1rem;
  }
  .sdd-hero-badge-date { font-size: 0.9rem; }

  .sdd-summary { padding: 14px 12px; gap: 2px; }
  .sdd-summary-icon { width: 30px; height: 30px; font-size: 0.82rem; }
  .sdd-summary-value { font-size: 1.2rem; }
  .sdd-summary-label { font-size: 8px; letter-spacing: 0.12em; }
  .sdd-summary-divider { height: 30px; margin: 0 2px; }

  .sdd-list-title { font-size: 0.94rem; }
  .sdd-list-hint { font-size: 8px; letter-spacing: 0.12em; }

  .sdd-req-card { padding: 16px 16px; border-radius: 16px; }
  .sdd-req-ref { font-size: 0.76rem; padding: 4px 10px; }
  .sdd-req-status { font-size: 8px; padding: 4px 9px; }
  .sdd-req-city { font-size: 0.94rem; }
  .sdd-req-meta { gap: 10px; padding-top: 10px; }
  .sdd-req-meta-item { font-size: 0.68rem; }

  .sdd-cta-head { padding: 2px 2px 0; }
  .sdd-cta-title { font-size: 1.1rem; }
  .sdd-cta-sub { font-size: 0.82rem; }
  .sdd-cta-grid { gap: 9px; }
  .sdd-cta { padding: 14px 16px; gap: 14px; border-radius: 14px; }
  .sdd-cta-icon { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 12px; }
  .sdd-cta-body strong { font-size: 0.92rem; }
  .sdd-cta-body small { font-size: 0.74rem; }

  .sdd-fine { font-size: 0.74rem; padding: 12px 14px; }
}

@media (max-width: 480px) {
  #sdDupRequestModal .sdd-head { padding: 20px 16px 2px; }
  #sdDupRequestModal .sdd-head-title { font-size: 1.2rem; }
  #sdDupRequestModal .sdd-modal-body { padding: 18px 16px 22px; }
  .sdd-body { gap: 16px; }

  .sdd-hero {
    padding: 20px 16px 20px;
    gap: 16px;
    border-radius: 16px;
  }
  .sdd-hero-top { gap: 14px; }
  .sdd-hero-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    font-size: 1.45rem;
  }
  .sdd-hero-icon-ring { inset: -4px; border-radius: 20px; }
  .sdd-hero-title { font-size: 1.1rem; }
  .sdd-hero-sub { font-size: 0.8rem; line-height: 1.65; }
  .sdd-hero-eyebrow { font-size: 9px; letter-spacing: 0.2em; margin-bottom: 8px; }

  .sdd-hero-badge {
    padding: 12px 13px 14px;
    gap: 10px;
    border-radius: 14px;
  }
  .sdd-hero-badge-icon {
    width: 32px; height: 32px;
    font-size: 0.9rem;
    border-radius: 9px;
  }
  .sdd-hero-badge-date { font-size: 0.86rem; }
  .sdd-hero-badge-lbl { font-size: 8px; letter-spacing: 0.18em; }

  .sdd-summary { padding: 12px 8px; }
  .sdd-summary-icon { width: 28px; height: 28px; font-size: 0.76rem; border-radius: 8px; }
  .sdd-summary-value { font-size: 1.05rem; }
  .sdd-summary-label { font-size: 7.5px; }
  .sdd-summary-divider { height: 26px; }

  .sdd-cta { padding: 12px 14px; gap: 12px; }
  .sdd-cta-icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 11px; }
  .sdd-cta-body strong { font-size: 0.86rem; }
  .sdd-cta-body small { font-size: 0.7rem; }
}

@media (max-width: 380px) {
  #sdDupRequestModal .sdd-head { padding: 18px 14px 2px; }
  #sdDupRequestModal .sdd-head-title { font-size: 1.1rem; }
  #sdDupRequestModal .sdd-modal-body { padding: 16px 14px 20px; }
  .sdd-body { gap: 14px; }

  .sdd-hero {
    padding: 16px 14px 18px;
    gap: 14px;
    border-radius: 14px;
  }
  .sdd-hero-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sdd-hero-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    font-size: 1.35rem;
  }
  .sdd-hero-icon-ring { inset: -3px; border-radius: 17px; }
  .sdd-hero-title { font-size: 1.05rem; }
  .sdd-hero-sub { font-size: 0.78rem; line-height: 1.6; }

  .sdd-hero-badge {
    padding: 10px 11px 12px;
    gap: 9px;
    border-radius: 12px;
  }
  .sdd-hero-badge-icon {
    width: 28px; height: 28px;
    font-size: 0.82rem;
    border-radius: 8px;
  }
  .sdd-hero-badge-lbl { font-size: 7.5px; letter-spacing: 0.16em; }
  .sdd-hero-badge-date { font-size: 0.8rem; }

  .sdd-summary { grid-template-columns: 1fr 1fr 1fr; padding: 10px 4px; }
  .sdd-summary-divider { display: none; }
  .sdd-summary-icon { width: 26px; height: 26px; font-size: 0.72rem; }
  .sdd-summary-value { font-size: 0.98rem; }
  .sdd-summary-label { font-size: 7px; letter-spacing: 0.1em; }

  .sdd-req-city { font-size: 0.86rem; }
  .sdd-req-arrow-wrap { max-width: 60px; }

  .sdd-cta-head { padding: 2px 2px 0; }
  .sdd-cta-title { font-size: 1rem; }
  .sdd-cta-sub { font-size: 0.78rem; }
  .sdd-cta { padding: 11px 12px; gap: 10px; }
  .sdd-cta-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
  .sdd-cta-body strong { font-size: 0.82rem; }
  .sdd-cta-body small { font-size: 0.68rem; }

  .sdd-fine { font-size: 0.72rem; padding: 11px 12px; }
}

/* ---------- 14 · REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  #sdDupRequestModal .sdd-modal-content::before,
  .sdd-hero-aurora,
  .sdd-hero-orb-red,
  .sdd-hero-orb-blue,
  .sdd-hero-icon,
  .sdd-hero-icon-ring,
  .sdd-hero-dot,
  .sdd-hero-name,
  #sdDupRequestModal .sdd-strip,
  #sdDupRequestModal .sdd-head-eyebrow-dot,
  .sdd-req-shine,
  .sdd-req-status-dot {
    animation: none !important;
  }
  .sdd-req-card,
  .sdd-req-card:hover,
  .sdd-cta,
  .sdd-cta:hover,
  .sdd-cta:focus-visible,
  .sdd-cta:active {
    transform: none !important;
  }
  .sdd-cta:hover .sdd-cta-icon,
  .sdd-cta:focus-visible .sdd-cta-icon {
    transform: none !important;
  }
  .sdd-req-card:hover .sdd-req-shine {
    transform: translateX(-140%) !important;
  }
}

/* ============================================================
   S'DINGO · "This contact is blocked" modal — v4 · THE AURORA
   ------------------------------------------------------------
   Rebuilt from scratch. Clean vertical rhythm, distinct
   section cards, bold typography, world-class buttons.
   Every section has its own background tint + border so the
   eye can scan: HERO → REASON → NEXT STEPS → CONTACT → FINE.
   ============================================================ */

/* ---------- 1 · SHELL — deep aurora glass ---------- */
#sdBlockedCustomerModal .sdb-modal-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(130% 100% at 0% 0%,  rgba(252, 4, 4, 0.18) 0%, transparent 55%),
    radial-gradient(130% 100% at 100% 100%, rgba(15, 115, 219, 0.22) 0%, transparent 55%),
    linear-gradient(165deg, #0A1430 0%, #101E4A 45%, #0A1430 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow:
    0 60px 140px -40px rgba(0, 0, 0, 0.9),
    0 20px 50px -20px rgba(5, 97, 201, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#sdBlockedCustomerModal .sdb-modal-content::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 480px at 8% 12%,  rgba(252, 74, 74, 0.32) 0%, transparent 65%),
    radial-gradient(circle 520px at 92% 88%, rgba(15, 115, 219, 0.34) 0%, transparent 65%),
    radial-gradient(circle 380px at 50% 100%, rgba(245, 179, 1, 0.18) 0%, transparent 65%);
  filter: blur(52px);
  animation: sdbAuroraDrift 24s ease-in-out infinite alternate;
}

@keyframes sdbAuroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

#sdBlockedCustomerModal .sdb-modal-content > * {
  position: relative;
  z-index: 1;
}

/* ---------- 2 · BRAND STRIP ---------- */
#sdBlockedCustomerModal .sdb-strip {
  height: 4px;
  background: linear-gradient(90deg,
    #FC0404 0%, #F5B301 33%, #0F73DB 66%, #FC0404 100%);
  background-size: 200% 100%;
  animation: sdbStripFlow 6s linear infinite;
}

@keyframes sdbStripFlow { to { background-position: 200% 0; } }

/* ---------- 3 · HEAD ---------- */
#sdBlockedCustomerModal .sdb-head {
  padding: 30px 34px 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

#sdBlockedCustomerModal .sdb-head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF9B9B;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(252, 74, 74, 0.16);
  border: 1px solid rgba(252, 74, 74, 0.32);
  margin-bottom: 12px;
}

#sdBlockedCustomerModal .sdb-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 10px;
}

#sdBlockedCustomerModal .sdb-head p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
  line-height: 1.6;
  max-width: 52ch;
}

#sdBlockedCustomerModal .sdb-close-orb {
  flex: none;
}

/* ---------- 4 · BODY — vertical stack of distinct cards ---------- */
#sdBlockedCustomerModal .sdb-body {
  padding: 24px 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#sdBlockedCustomerModal .modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
#sdBlockedCustomerModal .modal-body::-webkit-scrollbar { width: 6px; }
#sdBlockedCustomerModal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 100px;
}

/* ---------- 5 · HERO — full-width, stacked icon + text ---------- */
.sdb-hero {
  position: relative;
  isolation: isolate;
  /* NOTE: overflow visible so orbs / ring glows are never clipped.
     Only the inner aurora + grid layers use overflow: hidden. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 28px 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle 320px at 15% 20%, rgba(252, 74, 74, 0.30) 0%, transparent 70%),
    radial-gradient(circle 280px at 85% 90%, rgba(245, 179, 1, 0.18) 0%, transparent 70%),
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  border: 1.5px solid rgba(252, 74, 74, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 36px -16px rgba(212, 4, 4, 0.55);
}

/* The aurora + grid + orbs are decorative and MUST be clipped
   to the hero's own border-radius — but the hero itself stays
   overflow: visible so the icon ring can pulse outside. */
.sdb-hero-aurora,
.sdb-hero-grid {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.sdb-hero-aurora {
  inset: 0;
  background:
    radial-gradient(circle 340px at 18% 22%, rgba(252, 74, 74, 0.45) 0%, transparent 70%),
    radial-gradient(circle 300px at 82% 78%, rgba(245, 179, 1, 0.28) 0%, transparent 70%);
  filter: blur(38px) saturate(1.3);
  animation: sdbHeroAurora 20s ease-in-out infinite alternate;
}

@keyframes sdbHeroAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}

.sdb-hero-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 74, 74, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 74, 74, 0.09) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 0%, transparent 100%);
  opacity: 0.5;
}

/* Orbs — clipped to the hero's rounded corners so they never
   leak outside and get visually cut. */
.sdb-hero-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
}
.sdb-hero-orb-red {
  width: 200px; height: 200px;
  top: -45%; left: -8%;
  background: radial-gradient(circle, rgba(252, 74, 74, 0.65) 0%, transparent 70%);
  animation: sdbOrbRed 18s ease-in-out infinite alternate;
}
.sdb-hero-orb-gold {
  width: 170px; height: 170px;
  bottom: -45%; right: -6%;
  background: radial-gradient(circle, rgba(245, 179, 1, 0.50) 0%, transparent 70%);
  animation: sdbOrbGold 22s ease-in-out infinite alternate;
}
@keyframes sdbOrbRed  { to { transform: translate3d(46px, 34px, 0) scale(1.18); } }
@keyframes sdbOrbGold { to { transform: translate3d(-46px, -34px, 0) scale(1.18); } }

/* Every non-decorative child sits above all the aurora layers */
.sdb-hero > *:not(.sdb-hero-aurora):not(.sdb-hero-grid):not(.sdb-hero-orb) {
  position: relative;
  z-index: 2;
}

/* ---- Top row: icon + text side by side ---- */
.sdb-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

/* ---- Icon seal ---- */
.sdb-hero-icon {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: #fff;
  background: linear-gradient(140deg, #FC0404 0%, #D40404 55%, #540202 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -3px 0 rgba(0, 0, 0, 0.30),
    0 20px 44px -14px rgba(212, 4, 4, 0.80),
    0 8px 18px -6px rgba(0, 0, 0, 0.5);
  flex: none;
  animation: sdbIconFloat 4s ease-in-out infinite;
  /* Allow the ring to pulse OUTSIDE the seal without clipping */
  overflow: visible;
}

@keyframes sdbIconFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-3deg); }
}

.sdb-hero-icon-ring {
  position: absolute;
  inset: -6px;
  border-radius: 28px;
  border: 1.5px solid rgba(252, 74, 74, 0.62);
  pointer-events: none;
  animation: sdbIconRing 2.6s ease-out infinite;
}

@keyframes sdbIconRing {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---- Hero text block ---- */
.sdb-hero-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}

.sdb-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF9B9B;
  margin-bottom: 10px;
}

.sdb-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF9B9B;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22);
  position: relative;
  flex: none;
  animation: sdbDotPulse 2s ease-in-out infinite;
}

@keyframes sdbDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 107, 107, 0.02); }
}

.sdb-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.sdb-hero-name {
  background: linear-gradient(90deg, #FF6B6B 0%, #F5B301 60%, #FC0404 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sdbNameFlow 8s linear infinite;
}

@keyframes sdbNameFlow { to { background-position: 200% 0; } }

.sdb-hero-sub {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 56ch;
  overflow-wrap: anywhere;
}

.sdb-hero-sub strong {
  color: #fff;
  font-weight: 700;
}

/* ---- Bottom row: full-width date card ---- */
.sdb-hero-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background:
    linear-gradient(140deg, rgba(252, 74, 74, 0.22) 0%, rgba(4, 12, 45, 0.55) 100%);
  border: 1px solid rgba(252, 74, 74, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 22px -10px rgba(212, 4, 4, 0.55);
  width: 100%;
  min-width: 0;
  /* Prevent the badge from being cut on the bottom by any
     inherited clipping — this is the visible fix. */
  overflow: visible;
}

.sdb-hero-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: linear-gradient(140deg, #FC0404, #540202);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 16px -6px rgba(212, 4, 4, 0.65);
  flex: none;
}

.sdb-hero-badge-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sdb-hero-badge-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.sdb-hero-badge-date {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFD966;
  line-height: 1.2;
  text-shadow: 0 0 16px rgba(245, 179, 1, 0.55);
  overflow-wrap: anywhere;
}

/* ---------- 6 · REASON CARD ---------- */
.sdb-reason {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 20px;
  background:
    linear-gradient(140deg,
      rgba(252, 74, 74, 0.14) 0%,
      rgba(245, 179, 1, 0.06) 100%);
  border: 1.5px solid rgba(252, 74, 74, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.sdb-reason-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(140deg, #FC0404, #8C0404);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 24px -10px rgba(212, 4, 4, 0.70);
  flex: none;
}

.sdb-reason-body { min-width: 0; }

.sdb-reason-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #FF9B9B;
  margin-bottom: 8px;
}

.sdb-reason-text {
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- 7 · WHAT HAPPENS NEXT ---------- */
.sdb-next {
  padding: 24px 24px 22px;
  border-radius: 20px;
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.sdb-next-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 20px;
}

.sdb-next-title .bi {
  color: #FFD966;
  font-size: 1.05rem;
  filter: drop-shadow(0 0 8px rgba(245, 179, 1, 0.6));
}

.sdb-next-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .sdb-next-steps { grid-template-columns: repeat(3, 1fr); }
}

.sdb-next-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(4, 12, 45, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sdb-next-step:hover {
  background: rgba(4, 12, 45, 0.72);
  border-color: rgba(102, 163, 224, 0.40);
  transform: translateY(-3px);
  box-shadow:
    0 16px 32px -16px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sdb-next-num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: #1a1000;
  background: linear-gradient(140deg, #F5B301, #8A5300);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 6px 14px -5px rgba(245, 179, 1, 0.60);
  flex: none;
}

.sdb-next-step strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 3px;
}

.sdb-next-step small {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}

/* ---------- 8 · CTA HEADING ---------- */
.sdb-cta-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px 0;
}

.sdb-cta-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
}

.sdb-cta-sub {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}

/* ---------- 9 · CTA GRID — 3 stacked full-width buttons ---------- */
.sdb-cta-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sdb-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  color: #fff;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 20px -10px rgba(0, 0, 0, 0.55);
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.sdb-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sdb-cta-whatsapp::before {
  background: linear-gradient(140deg, #25D366 0%, #128C7E 100%);
}
.sdb-cta-phone::before {
  background: linear-gradient(140deg, #0F73DB 0%, #041C5C 100%);
}
.sdb-cta-email::before {
  background: linear-gradient(140deg, #FC0404 0%, #8C0404 100%);
}

.sdb-cta:hover,
.sdb-cta:focus-visible {
  transform: translateY(-3px);
  border-color: transparent;
  color: #fff;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 20px 40px -14px rgba(0, 0, 0, 0.7);
}

.sdb-cta:hover::before,
.sdb-cta:focus-visible::before {
  opacity: 1;
}

.sdb-cta:active {
  transform: translateY(-1px) scale(0.99);
}

.sdb-cta-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  flex: none;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sdb-cta-whatsapp .sdb-cta-icon {
  background: linear-gradient(140deg, #25D366 0%, #128C7E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px -8px rgba(37, 211, 102, 0.65);
}

.sdb-cta-phone .sdb-cta-icon {
  background: linear-gradient(140deg, #0F73DB 0%, #041C5C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px -8px rgba(15, 115, 219, 0.65);
}

.sdb-cta-email .sdb-cta-icon {
  background: linear-gradient(140deg, #FC0404 0%, #8C0404 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px -8px rgba(252, 4, 4, 0.65);
}

.sdb-cta:hover .sdb-cta-icon,
.sdb-cta:focus-visible .sdb-cta-icon {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 10px 24px -8px rgba(0, 0, 0, 0.35);
}

.sdb-cta-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sdb-cta-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.25;
}

.sdb-cta-body small {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.4s ease;
}

.sdb-cta:hover .sdb-cta-body small,
.sdb-cta:focus-visible .sdb-cta-body small {
  color: rgba(255, 255, 255, 0.9);
}

.sdb-cta-arrow {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.55);
  flex: none;
  transition: all 0.4s ease;
}

.sdb-cta:hover .sdb-cta-arrow,
.sdb-cta:focus-visible .sdb-cta-arrow {
  color: #fff;
  transform: translate(3px, -3px);
}

/* ---------- 10 · FINE PRINT ---------- */
.sdb-fine {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(4, 12, 45, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
}

.sdb-fine .bi {
  flex: none;
  margin-top: 2px;
  color: #9EE7B8;
  font-size: 0.95rem;
}

/* ---------- 11 · RESPONSIVE ---------- */
@media (max-width: 767px) {
  #sdBlockedCustomerModal .sdb-head {
    padding: 22px 20px 2px;
  }
  #sdBlockedCustomerModal .sdb-head h2 { font-size: 1.35rem; }
  #sdBlockedCustomerModal .sdb-body { padding: 20px 20px 24px; gap: 18px; }

  .sdb-hero {
    padding: 24px 20px 22px;
    border-radius: 18px;
    gap: 18px;
    /* Ensure the date badge + icon ring never get clipped by
       the hero's bottom border on any mobile screen. */
    overflow: visible;
  }
  .sdb-hero-top {
    gap: 16px;
    align-items: flex-start;
  }
  .sdb-hero-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    font-size: 1.65rem;
  }
  .sdb-hero-icon-ring { inset: -5px; border-radius: 22px; }
  .sdb-hero-title { font-size: 1.22rem; }
  .sdb-hero-sub { font-size: 0.84rem; line-height: 1.65; }

  .sdb-hero-badge {
    padding: 13px 14px;
    gap: 12px;
    /* Explicit bottom padding so the date never sits on the edge */
    padding-bottom: 15px;
  }
  .sdb-hero-badge-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    font-size: 1rem;
  }
  .sdb-hero-badge-date { font-size: 0.9rem; }

  .sdb-reason { padding: 16px 18px; gap: 14px; border-radius: 18px; }
  .sdb-reason-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 1.15rem; }
  .sdb-reason-text { font-size: 0.88rem; }

  .sdb-next { padding: 20px 18px 18px; border-radius: 18px; }
  .sdb-next-title { font-size: 0.98rem; margin-bottom: 16px; }
  .sdb-next-steps { gap: 10px; }
  .sdb-next-step { padding: 14px 16px; }
  .sdb-next-step strong { font-size: 0.86rem; }
  .sdb-next-step small { font-size: 0.74rem; }

  .sdb-cta-head { padding: 4px 2px 0; }
  .sdb-cta-title { font-size: 1.1rem; }
  .sdb-cta-sub { font-size: 0.82rem; }
  .sdb-cta-grid { gap: 9px; }
  .sdb-cta { padding: 14px 16px; gap: 14px; border-radius: 14px; }
  .sdb-cta-icon { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 12px; }
  .sdb-cta-body strong { font-size: 0.92rem; }
  .sdb-cta-body small { font-size: 0.74rem; }

  .sdb-fine { font-size: 0.74rem; padding: 12px 14px; }
}

@media (max-width: 480px) {
  #sdBlockedCustomerModal .sdb-head { padding: 20px 16px 2px; }
  #sdBlockedCustomerModal .sdb-head h2 { font-size: 1.2rem; }
  #sdBlockedCustomerModal .sdb-body { padding: 18px 16px 22px; gap: 16px; }

  .sdb-hero {
    padding: 20px 16px 20px;
    gap: 16px;
    border-radius: 16px;
    overflow: visible;
  }
  .sdb-hero-top {
    gap: 14px;
    align-items: flex-start;
  }
  .sdb-hero-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    font-size: 1.45rem;
  }
  .sdb-hero-icon-ring { inset: -4px; border-radius: 20px; }
  .sdb-hero-title { font-size: 1.1rem; }
  .sdb-hero-sub { font-size: 0.8rem; line-height: 1.65; }
  .sdb-hero-eyebrow { font-size: 9px; letter-spacing: 0.2em; margin-bottom: 8px; }

  .sdb-hero-badge {
    padding: 12px 13px;
    gap: 10px;
    /* Extra bottom room so the ribbon never touches the
       hero's rounded bottom edge */
    padding-bottom: 14px;
    border-radius: 14px;
  }
  .sdb-hero-badge-icon {
    width: 32px; height: 32px;
    font-size: 0.9rem;
    border-radius: 9px;
  }
  .sdb-hero-badge-date { font-size: 0.86rem; }
  .sdb-hero-badge-lbl { font-size: 8px; letter-spacing: 0.18em; }

  .sdb-cta { padding: 12px 14px; gap: 12px; }
  .sdb-cta-icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 11px; }
  .sdb-cta-body strong { font-size: 0.86rem; }
  .sdb-cta-body small { font-size: 0.7rem; }
}

/* ---------- Extra small phones (≤ 380px) ---------- */
@media (max-width: 380px) {
  #sdBlockedCustomerModal .sdb-head { padding: 18px 14px 2px; }
  #sdBlockedCustomerModal .sdb-head h2 { font-size: 1.1rem; }
  #sdBlockedCustomerModal .sdb-body { padding: 16px 14px 20px; gap: 14px; }

  .sdb-hero {
    padding: 16px 14px 18px;
    gap: 14px;
    border-radius: 14px;
    overflow: visible;
  }
  .sdb-hero-top {
    /* On very narrow screens, stack icon ABOVE text so the
       text never gets squeezed to 2 characters wide. */
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sdb-hero-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    font-size: 1.35rem;
  }
  .sdb-hero-icon-ring { inset: -3px; border-radius: 17px; }
  .sdb-hero-title { font-size: 1.05rem; }
  .sdb-hero-sub { font-size: 0.78rem; line-height: 1.6; }

  .sdb-hero-badge {
    padding: 10px 11px 12px;
    gap: 9px;
    border-radius: 12px;
  }
  .sdb-hero-badge-icon {
    width: 28px; height: 28px;
    font-size: 0.82rem;
    border-radius: 8px;
  }
  .sdb-hero-badge-lbl { font-size: 7.5px; letter-spacing: 0.16em; }
  .sdb-hero-badge-date { font-size: 0.8rem; }

  .sdb-reason { padding: 14px 14px; gap: 12px; }
  .sdb-reason-icon { width: 38px; height: 38px; font-size: 1rem; border-radius: 11px; }
  .sdb-reason-text { font-size: 0.84rem; }

  .sdb-next { padding: 18px 14px 16px; }
  .sdb-next-title { font-size: 0.92rem; }
  .sdb-next-step { padding: 12px 14px; }
  .sdb-next-step strong { font-size: 0.82rem; }
  .sdb-next-step small { font-size: 0.72rem; }

  .sdb-cta-head { padding: 2px 2px 0; }
  .sdb-cta-title { font-size: 1rem; }
  .sdb-cta-sub { font-size: 0.78rem; }
  .sdb-cta { padding: 11px 12px; gap: 10px; }
  .sdb-cta-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
  .sdb-cta-body strong { font-size: 0.82rem; }
  .sdb-cta-body small { font-size: 0.68rem; }

  .sdb-fine { font-size: 0.72rem; padding: 11px 12px; }
}

/* ---------- 12 · REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  #sdBlockedCustomerModal .sdb-modal-content::before,
  .sdb-hero-aurora,
  .sdb-hero-orb-red,
  .sdb-hero-orb-gold,
  .sdb-hero-icon,
  .sdb-hero-icon-ring,
  .sdb-hero-dot,
  .sdb-hero-name,
  #sdBlockedCustomerModal .sdb-strip {
    animation: none !important;
  }
  .sdb-next-step:hover,
  .sdb-cta:hover,
  .sdb-cta:focus-visible,
  .sdb-cta:active {
    transform: none !important;
  }
  .sdb-cta:hover .sdb-cta-icon,
  .sdb-cta:focus-visible .sdb-cta-icon {
    transform: none !important;
  }
}


/* ============================================================
   MAP MODAL — DARK GLASS CATCH-ALL
   ------------------------------------------------------------
   Defeats any lingering white/pale rule anywhere in the file.
   Uses #addressMapModal prefix + !important so nothing earlier
   can override it. Safe to leave at the bottom permanently.
   ============================================================ */

#addressMapModal .sd-map-side {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.02) 100%) !important;
  border-right-color: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}

#addressMapModal .sd-panel-block {
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

#addressMapModal .sd-panel-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

#addressMapModal .sd-panel-address-text strong {
  color: #fff !important;
}

#addressMapModal .sd-panel-address-text small {
  color: rgba(255, 255, 255, 0.6) !important;
}

#addressMapModal .sd-zone-meter-km {
  color: #fff !important;
}

#addressMapModal .sd-surcharge-row {
  color: rgba(255, 255, 255, 0.72) !important;
}

#addressMapModal .sd-surcharge-row strong {
  color: #fff !important;
}

#addressMapModal .sd-panel-coords-code {
  color: #fff !important;
  background: rgba(4, 12, 45, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

#addressMapModal .sd-map-search-wrap {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

#addressMapModal .sd-map-search-input {
  color: #fff !important;
}

#addressMapModal .sd-map-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

#addressMapModal .sd-map-search-clear {
  color: rgba(255, 255, 255, 0.6) !important;
}

#addressMapModal .sd-map-search-clear:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

#addressMapModal .sd-map-search-icon {
  color: rgba(255, 255, 255, 0.6) !important;
}

#addressMapModal .sd-map-suggestions {
  background: rgba(10, 20, 48, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

#addressMapModal .sd-map-suggestion {
  color: #fff !important;
}

#addressMapModal .sd-map-suggestion:hover,
#addressMapModal .sd-map-suggestion.focused {
  background: rgba(255, 255, 255, 0.10) !important;
}

#addressMapModal .sd-map-suggestion-ico {
  background: rgba(15, 115, 219, 0.22) !important;
  color: #B9D8FF !important;
}

#addressMapModal .sd-map-suggestion-main {
  color: #fff !important;
}

#addressMapModal .sd-map-suggestion-secondary {
  color: rgba(255, 255, 255, 0.6) !important;
}

#addressMapModal .sd-map-suggestion-empty {
  color: rgba(255, 255, 255, 0.55) !important;
}

#addressMapModal .sd-zone-meter-badge[data-zone="1"] {
  background: rgba(22, 128, 60, 0.20) !important;
  color: #9EE7B8 !important;
  border-color: rgba(158, 231, 184, 0.35) !important;
}

#addressMapModal .sd-zone-meter-badge[data-zone="2"] {
  background: rgba(245, 179, 1, 0.20) !important;
  color: #FFD966 !important;
  border-color: rgba(245, 179, 1, 0.38) !important;
}

#addressMapModal .sd-map-footer {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.015) 100%) !important;
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

#addressMapModal .sd-map-footer-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

#addressMapModal .sd-map-footer-value {
  color: #fff !important;
}

#addressMapModal .sd-map-footer-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #fff !important;
}

#addressMapModal .sd-map-footer-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #fff !important;
}

#addressMapModal .sd-map-tab {
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 100%) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

#addressMapModal .sd-map-tab-body strong {
  color: #fff !important;
}

#addressMapModal .sd-map-tab-body small {
  color: rgba(255, 255, 255, 0.62) !important;
}