/* =====================================================================
   VI TAXI — Core stylesheet
   Public site · booking flow · trip pass · driver app · partner portal
   ===================================================================== */

:root {
  /* Navy — credibility and operational structure */
  --navy-950: #071d2c;
  --navy-900: #0b2638;
  --navy-800: #12364a;

  /* Teal — the principal action colour */
  --teal-700: #087d83;
  --teal-600: #07979a;
  --teal-500: #16b4b2;
  --teal-300: #72d7d3;
  --teal-100: #dff5f3;
  --teal-50:  #f1fbfa;

  --sky-500:  #54b9e8;
  --sky-100:  #e6f6fc;

  /* Yellow — a taxi accent, never the brand */
  --yellow-500: #ffc928;
  --yellow-400: #ffd954;
  --yellow-100: #fff5c7;

  --coral-500: #f28b68;
  --coral-100: #fde7df;

  --sand-100: #f4f0e8;
  --sand-50:  #fbf9f5;

  --white: #ffffff;
  --ink: #10202a;
  --gray-700: #52616a;
  --gray-500: #7f8c93;
  --gray-300: #d6dde1;
  --gray-200: #e7ecef;
  --gray-100: #f3f6f7;

  --red-600: #c8402f;
  --red-100: #fbe3e0;
  --green-600: #1c8259;
  --green-100: #dff3e9;

  /* Type scale */
  --display-xl: clamp(3.5rem, 7vw, 6rem);
  --display:    clamp(2.8rem, 5vw, 4.5rem);
  --h1:         clamp(2.3rem, 4vw, 3.8rem);
  --h2:         clamp(2rem, 3vw, 3rem);
  --h3:         clamp(1.4rem, 2vw, 2rem);
  --body-lg:    1.25rem;
  --body:       1.0625rem;
  --small:      0.875rem;

  /* Structure */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-sm: 0 2px 8px -2px rgba(11, 38, 56, .10);
  --shadow: 0 10px 30px -18px rgba(11, 38, 56, .38);
  --shadow-lg: 0 26px 60px -32px rgba(11, 38, 56, .45);
  --shadow-card: 0 1px 2px rgba(11,38,56,.04), 0 12px 34px -24px rgba(11,38,56,.40);

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);

  --ease: cubic-bezier(.22, .68, .34, 1);
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`. Setting overflow-x:hidden on body makes it a
     scroll container, and position:fixed children then anchor to that
     container instead of the viewport — which is why the driver app's
     bottom nav scrolled with the page instead of sticking. `clip` gives
     the same protection against sideways scroll without creating a
     scroll container. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--teal-700); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -.015em; }
p  { margin: 0 0 1em; }

/* Operational figures always align */
.num, .kpi__value, table td.num, .pass__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-900); color: #fff; padding: 14px 20px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------- */
/* The user-agent rule for [hidden] is display:none, but ANY author rule that
   sets display — .field-row{display:grid}, .chips{display:flex} — overrides it,
   because author styles always win over user-agent styles regardless of
   specificity. Without this guard, hiding an element by adding `hidden` does
   nothing at all. */
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
.wrap--mid { max-width: 940px; }

/* Two full sections meeting used to put over 200px of air between them.
   Halved, with the vw term reduced so it does not keep growing on wide
   screens where the eye is already travelling further. */
.section { padding-block: clamp(44px, 4.6vw, 68px); }
.section--tight { padding-block: clamp(32px, 3.2vw, 46px); }
.section--sea { background: linear-gradient(180deg, var(--teal-50) 0%, var(--white) 100%); }
.section--sand { background: var(--sand-50); }
.section--navy { background: var(--navy-900); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255,255,255,.76); }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.lead { font-size: var(--body-lg); color: var(--gray-700); line-height: 1.55; }
.muted { color: var(--gray-700); }
.small { font-size: var(--small); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--yellow-500); border-radius: 2px;
}

.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--teal-600);
  color: #fff;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
  box-shadow: 0 10px 22px -14px rgba(7, 151, 154, .9);
}
.btn:hover { background: var(--teal-700); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--gray-300); box-shadow: none; }
.btn--ghost:hover { background: var(--gray-100); border-color: var(--gray-500); }

.btn--navy { background: var(--navy-900); box-shadow: none; }
.btn--navy:hover { background: var(--navy-800); }


.btn--white { background: #fff; color: var(--navy-900); box-shadow: var(--shadow); }
.btn--white:hover { background: var(--gray-100); }

.btn--danger { background: var(--red-600); box-shadow: none; }
.btn--danger:hover { background: #a83424; }

.btn--block { width: 100%; }
.btn--lg { padding: 20px 34px; font-size: 1.125rem; }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}

/* ---------------------------------------------------------------------
   Site header
   --------------------------------------------------------------------- */
/* --- Brand lockup ----------------------------------------------------- */
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--navy-950);
}
.brand__mark {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--yellow-500); color: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem; letter-spacing: -.02em;
}
.brand__name {
  display: block; font-weight: 800; font-size: 1.12rem;
  letter-spacing: -.02em; line-height: 1.1; color: var(--navy-950);
}
.brand__sub {
  display: block; font-size: .63rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--gray-500); line-height: 1.3; margin-top: 2px;
  white-space: nowrap;
}
.brand:hover .brand__name { color: var(--teal-700); }

/* =====================================================================
   Header — floating pill with mega menu
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 80;
  padding: 14px var(--gutter) 0;
  background: transparent;
}
.site-header__inner {
  display: flex; align-items: center; gap: 18px;
  max-width: var(--wrap); margin-inline: auto;
  padding: 9px 12px 9px 20px;
  background: #fff; border-radius: 34px;
  box-shadow: 0 6px 26px rgba(7,29,44,.10), 0 1px 3px rgba(7,29,44,.06);
}
.site-header__inner .brand { flex: 0 0 auto; margin-right: 6px; }

.site-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-group { position: relative; }

.site-nav__link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 14px 7px; border: 0; border-radius: 16px;
  background: transparent; color: var(--gray-700);
  font-family: inherit; font-size: .84rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  white-space: nowrap;            /* labels must never wrap */
  transition: background .15s var(--ease), color .15s var(--ease);
}
.site-nav__icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500);
  transition: color .15s var(--ease), transform .18s var(--ease);
}
.site-nav__label { display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; }
.site-nav__label svg { opacity: .5; transition: transform .18s var(--ease); }

.site-nav__link:hover { background: var(--gray-100); color: var(--ink); }
/* The icon takes the group's own accent on hover and while open, which is
   what makes the four sections read as distinct places rather than a list. */
.site-nav__link:hover .site-nav__icon { color: var(--nav-accent, var(--teal-600)); }
.site-nav__link:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }

.site-nav__link[aria-current="page"],
.site-nav__link[data-current="true"],
.site-nav__link[aria-expanded="true"] {
  background: var(--gray-100); color: var(--ink);
}
.site-nav__link[aria-current="page"] .site-nav__icon,
.site-nav__link[data-current="true"] .site-nav__icon,
.site-nav__link[aria-expanded="true"] .site-nav__icon { color: var(--nav-accent, var(--teal-600)); }
.site-nav__link[aria-expanded="true"] .site-nav__label svg { transform: rotate(180deg); opacity: 1; }

/* Mega panel */
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  min-width: 340px; z-index: 90;
}
.mega[hidden] { display: none; }
.mega__inner {
  background: #fff; border-radius: 20px;
  box-shadow: 0 20px 54px rgba(7,29,44,.16), 0 2px 8px rgba(7,29,44,.06);
  padding: 26px 28px 22px;
  animation: megaIn .16s var(--ease);
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.mega__cols { display: flex; gap: 40px; }
.mega__col { min-width: 240px; }
.mega__heading {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: var(--gray-500); margin-bottom: 14px;
}
.mega__item {
  display: block; padding: 9px 10px; margin: 0 -10px;
  border-radius: 11px; text-decoration: none;
}
.mega__item:hover { background: var(--gray-100); }
.mega__item-title {
  display: block; font-weight: 700; font-size: .97rem; color: var(--navy-950);
  line-height: 1.3;
}
.mega__item-desc {
  display: block; font-size: .84rem; color: var(--gray-500); margin-top: 2px;
  line-height: 1.4;
}
.mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gray-200);
  font-size: .85rem; color: var(--gray-500);
}
.mega__foot a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--teal-700); text-decoration: none; white-space: nowrap;
}
.mega__foot a:hover { text-decoration: underline; }

.nav-scrim { position: fixed; inset: 0; z-index: 70; background: transparent; }
.nav-scrim[hidden] { display: none; }

.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }


.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--gray-300);
  border-radius: 11px; padding: 10px 13px; cursor: pointer;
}
.nav-toggle span { display: block; width: 19px; height: 2px; background: var(--navy-900); border-radius: 2px; }
.nav-toggle span + span { margin-top: 4px; }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .header-actions { margin-left: auto; }
  .site-nav {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-radius: 20px; padding: 12px;
    box-shadow: 0 18px 44px rgba(7,29,44,.16);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .18s var(--ease), opacity .18s var(--ease);
    max-height: 76vh; overflow-y: auto;
  }
  .site-nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav__link {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    width: 100%; padding: 13px 14px; font-size: 1rem; border-radius: 12px;
  }
  .site-nav__label { flex: 1; justify-content: space-between; }
  .nav-group { position: static; }
  .mega {
    position: static; transform: none; min-width: 0; width: 100%;
  }
  .mega__inner { box-shadow: none; padding: 4px 0 12px 12px; animation: none; border-radius: 0; }
  .mega__cols { flex-direction: column; gap: 18px; }
  .mega__col { min-width: 0; }
  .mega__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------------------------------------------------------------------
   Hero
   The photo slot: drop a JPEG at assets/img/hero-stt.jpg and it replaces
   the painted panel automatically. Until then this renders as a layered
   sea-and-hillside gradient rather than a grey box.
   --------------------------------------------------------------------- */
/* =====================================================================
   Hero — light split. Content left, illustration right. The photograph or
   illustration is a sibling of the text, never a backdrop behind it, so
   nothing has to be legible over an image.
   ===================================================================== */
.hero--split {
  background: var(--sand-50);
  color: var(--ink);
  padding: 0;
  overflow: visible;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: 0;
  max-width: 1560px;
  margin-inline: auto;
}
.hero__col {
  /* No bottom padding: the trust row is the last element, so the column ends
     exactly where it ends. Both grid children stretch to the same row height,
     which puts the bottom of the illustration on the same line as the trust
     row rather than below it. */
  padding: clamp(48px, 5vw, 76px) clamp(24px, 4vw, 60px) 0;
  max-width: 660px;
  margin-left: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.hero__eyebrow { color: var(--teal-700); }
.hero--split h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--navy-950);
  margin: 0 0 .38em;
}
.hero__sub {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  color: var(--gray-600);
  max-width: 42ch;
  margin: 0 0 28px;
}

/* Illustration panel */
.hero__figure {
  position: relative;
  min-height: 420px;
  border-radius: 40px 0 0 40px;
  overflow: hidden;
}
.hero__figure .hero__bg { position: absolute; inset: 0; z-index: 0; }

/* Painted panel, used until a photograph or illustration is supplied. */
.hero__bg {
  background-color: var(--navy-950);
  background-image:
    radial-gradient(120% 90% at 78% 8%,  rgba(114,215,211,.55) 0%, rgba(114,215,211,0) 55%),
    radial-gradient(90% 70% at 12% 92%,  rgba(255,201,40,.20) 0%, rgba(255,201,40,0) 60%),
    linear-gradient(168deg, var(--navy-950) 0%, var(--navy-900) 42%, var(--teal-700) 118%);
  background-size: cover;
  background-position: center;
}
/* A supplied image replaces the gradient. Navy stays underneath so a slow
   or failed load never leaves the panel empty. */
.hero__bg--photo {
  background-color: var(--navy-950);
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Trust row */
.hero__trust {
  list-style: none; margin: 28px 0 0; padding: 22px 0 clamp(26px, 3vw, 34px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  border-top: 1px solid var(--gray-200);
  margin-top: auto;   /* pin to the bottom if the column is shorter than the figure */
}
.hero__trust li {
  display: flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--gray-700);
}
.hero__trust-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.hero__trust-icon--blue   { background: #dbeafe; color: #1d4ed8; }
.hero__trust-icon--green  { background: #d1fae5; color: #047857; }
.hero__trust-icon--yellow { background: #fef3c7; color: #a16207; }
.hero__trust-icon--purple { background: #ede9fe; color: #6d28d9; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__col {
    max-width: none; margin-inline: auto; order: 2;
    padding-bottom: clamp(36px, 6vw, 52px);
  }
  .hero__figure { order: 1; min-height: 300px; border-radius: 0; }
  .hero__trust { grid-template-columns: repeat(2, 1fr); gap: 14px 4px; }
}
@media (max-width: 460px) {
  .hero__trust { grid-template-columns: 1fr 1fr; }
  .hero__trust li { font-size: .76rem; }
}


.hero__content { max-width: 620px; }
.hero h1 {
  font-size: var(--display);
  letter-spacing: -.038em;
  margin-bottom: .32em;
  text-wrap: balance;
}
.hero__eyebrow::before { background: var(--yellow-500); }

/* ---------------------------------------------------------------------
   Booking card — the app-like control that sits over the hero
   --------------------------------------------------------------------- */
.booking {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 8px 8px 26px;
  position: relative; z-index: 10;
  color: var(--ink);
}
.booking__tabs {
  display: flex; gap: 6px; padding: 6px;
  background: var(--gray-100); border-radius: 18px; margin-bottom: 22px;
}
.booking__tab {
  flex: 1; padding: 14px 16px; border: 0; background: transparent;
  border-radius: 14px; font-weight: 700; cursor: pointer; color: var(--gray-700);
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.booking__tab[aria-selected="true"] {
  background: #fff; color: var(--navy-900); box-shadow: var(--shadow-sm);
}
.booking__body { padding-inline: clamp(14px, 2.2vw, 24px); }

.field-row {
  display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;   /* columns of unequal height must top-align, or the
                           shorter one drops and the labels stop lining up */
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field__label {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-500);
}
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field input[type="password"], .field input[type="date"], .field input[type="time"],
.field input[type="number"], .field input[type="datetime-local"],
.field select, .field textarea, .input {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: 13px;
  background: #fff;
  font-size: 1.0625rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover { border-color: var(--gray-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(22,180,178,.16);
}
.field__hint { font-size: .82rem; color: var(--gray-500); }
.field__error { font-size: .86rem; color: var(--red-600); font-weight: 600; }
.field--error input, .field--error select { border-color: var(--red-600); }

/* Segmented control — passengers, luggage */
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label {
  padding: 12px 18px; border: 1.5px solid var(--gray-300); border-radius: 12px;
  cursor: pointer; font-weight: 700; color: var(--gray-700); background: #fff;
  transition: all .16s var(--ease); min-width: 56px; text-align: center;
}
.segmented label:hover { border-color: var(--teal-300); }
.segmented input:checked + label {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}
.segmented input:focus-visible + label { outline: 3px solid var(--teal-500); outline-offset: 2px; }

/* Checkbox row */
.check-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.check {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-weight: 600; color: var(--gray-700);
}
.check input { width: 20px; height: 20px; accent-color: var(--teal-600); cursor: pointer; }

.booking__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Location chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
  border: 1.5px solid var(--gray-300); background: #fff; border-radius: 999px;
  padding: 8px 15px; font-size: .88rem; font-weight: 600; color: var(--gray-700);
  cursor: pointer; transition: all .15s var(--ease); text-decoration: none;
}
.chip:hover { border-color: var(--teal-500); color: var(--teal-700); background: var(--teal-50); }
.chip[aria-pressed="true"] { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-card);
}
.card--flat { box-shadow: none; }
.card--tint { background: var(--teal-50); border-color: var(--teal-100); }
.card--sand { background: var(--sand-50); border-color: var(--sand-100); }
.card__title { font-size: 1.15rem; font-weight: 800; margin-bottom: .35em; letter-spacing: -.02em; }

/* Destination cards — painted panels until real photography is dropped in */
.dest-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-card); border: 1px solid var(--gray-200);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.dest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.dest-card:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 3px; }

/* Photo sits in its own block, so nothing is read over an image and the
   picture never has to leave room for text. */
.dest-card__media {
  display: block; position: relative;
  aspect-ratio: 16 / 10; width: 100%; overflow: hidden;
  background: var(--navy-900);
}
.dest-card__art {
  position: absolute; inset: 0;
  background-color: var(--navy-900);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform .5s var(--ease);
}
.dest-card:hover .dest-card__art { transform: scale(1.04); }

/* background-image, never the `background` shorthand — the shorthand resets
   background-size and a supplied photograph would stop covering the block. */
.dest-card__art--airport { background-image: linear-gradient(160deg, #12364a 0%, #07979a 100%); }
.dest-card__art--beach   { background-image: linear-gradient(160deg, #16b4b2 0%, #54b9e8 60%, #f4f0e8 100%); }
.dest-card__art--town    { background-image: linear-gradient(160deg, #0b2638 0%, #087d83 100%); }
.dest-card__art--cruise  { background-image: linear-gradient(160deg, #12364a 0%, #54b9e8 100%); }
.dest-card__art--hotel   { background-image: linear-gradient(160deg, #087d83 0%, #ffc928 155%); }
.dest-card__art--marina  { background-image: linear-gradient(160deg, #071d2c 0%, #16b4b2 110%); }
.dest-card__art--other   { background-image: linear-gradient(160deg, #12364a 0%, #72d7d3 120%); }

.dest-card__body {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 20px 20px; flex: 1;
}
.dest-card__label {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--teal-700);
}
.dest-card__name {
  font-weight: 800; font-size: 1.16rem; letter-spacing: -.02em;
  color: var(--navy-950); line-height: 1.25;
}
.dest-card__blurb {
  font-size: .9rem; color: var(--gray-600); line-height: 1.5;
  flex: 1;
}
.dest-card__go {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; font-weight: 700; font-size: .9rem;
  color: var(--teal-700);
}
.dest-card__go svg { transition: transform .2s var(--ease); }
.dest-card:hover .dest-card__go svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .dest-card, .dest-card__art, .dest-card__go svg { transition: none; }
  .dest-card:hover { transform: none; }
  .dest-card:hover .dest-card__art { transform: none; }
}

/* ---------------------------------------------------------------------
   Ride option cards
   --------------------------------------------------------------------- */
.ride-option {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 18px; align-items: center;
  padding: 20px; border: 1.5px solid var(--gray-300); border-radius: var(--radius);
  background: #fff; cursor: pointer; transition: all .16s var(--ease); width: 100%;
  text-align: left;
}
.ride-option:hover { border-color: var(--teal-300); background: var(--teal-50); }
.ride-option[aria-pressed="true"], .ride-option--selected {
  border-color: var(--teal-600); background: var(--teal-50);
  box-shadow: 0 0 0 3px rgba(22,180,178,.14);
}
.ride-option__icon {
  width: 62px; height: 48px; border-radius: 12px; background: var(--navy-900);
  display: grid; place-items: center; color: var(--yellow-500);
}
.ride-option__icon svg { width: 34px; height: 24px; }
.ride-option__name { font-weight: 800; font-size: 1.08rem; letter-spacing: -.015em; }
.ride-option__meta { font-size: .9rem; color: var(--gray-700); }
.ride-option__eta { text-align: right; font-weight: 800; color: var(--teal-700); white-space: nowrap; }
.ride-option__eta small { display: block; font-weight: 600; color: var(--gray-500); font-size: .76rem; }

/* ---------------------------------------------------------------------
   TRIP PASS — the signature element
   A boarding pass with a real perforation and notches. Used for every
   confirmed ride on the passenger and partner sides.
   --------------------------------------------------------------------- */
.pass {
  --notch: 17px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  max-width: 520px;
}
.pass__head {
  background: var(--navy-900); color: #fff; padding: 20px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pass__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.03em; }
.pass__brand .brand__mark { width: 30px; height: 30px; border-radius: 9px; font-size: .78rem; }
.pass__kind { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
              color: var(--teal-300); }

.pass__route {
  padding: 26px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
}
.pass__place { min-width: 0; }
.pass__place--to { text-align: right; }
.pass__label {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 5px;
}
.pass__value { font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; line-height: 1.25;
               overflow-wrap: break-word; }
.pass__arrow { color: var(--teal-600); display: grid; place-items: center; }
.pass__arrow svg { width: 46px; height: 16px; }

/* The perforation */
.pass__perf {
  position: relative; height: 1px; margin: 0 26px;
  background-image: linear-gradient(90deg, var(--gray-300) 0 8px, transparent 8px 16px);
  background-size: 16px 1px;
}
.pass__perf::before, .pass__perf::after {
  content: ""; position: absolute; top: 50%; width: var(--notch); height: var(--notch);
  border-radius: 50%; background: var(--sand-50); transform: translateY(-50%);
  border: 1px solid var(--gray-200);
}
.pass__perf::before { left: calc(-26px - var(--notch) / 2); }
.pass__perf::after  { right: calc(-26px - var(--notch) / 2); }

.pass__grid {
  padding: 22px 26px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.pass__foot {
  padding: 18px 26px; background: var(--gray-100); border-top: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.pass__ref { font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* On the sand background the notches need to match the page */
.section--sand .pass__perf::before, .section--sand .pass__perf::after { background: var(--sand-50); }
.section--sea  .pass__perf::before, .section--sea  .pass__perf::after { background: var(--teal-50); }

/* ---------------------------------------------------------------------
   Status rail — passenger-visible progress
   --------------------------------------------------------------------- */
.rail { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.rail__step { flex: 1; position: relative; padding-top: 30px; text-align: center; min-width: 0; }
.rail__step::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--gray-300);
  transform: translateX(-50%); z-index: 2;
}
.rail__step::after {
  content: ""; position: absolute; top: 14px; left: 50%; width: 100%; height: 2.5px;
  background: var(--gray-300); z-index: 1;
}
.rail__step:last-child::after { display: none; }
.rail__step[data-state="done"]::before { background: var(--teal-600); border-color: var(--teal-600); }
.rail__step[data-state="done"]::after  { background: var(--teal-600); }
.rail__step[data-state="current"]::before {
  background: var(--yellow-500); border-color: var(--yellow-500);
  box-shadow: 0 0 0 6px rgba(255,201,40,.28);
}
.rail__label {
  font-size: .74rem; font-weight: 700; color: var(--gray-500); line-height: 1.3;
  padding-inline: 3px;
}
.rail__step[data-state="done"] .rail__label,
.rail__step[data-state="current"] .rail__label { color: var(--navy-900); }

/* Marker pulse for the live step */
@keyframes railPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255,201,40,.28); }
  50%      { box-shadow: 0 0 0 10px rgba(255,201,40,.12); }
}
.rail__step[data-state="current"]::before { animation: railPulse 2.4s ease-in-out infinite; }

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge--go     { background: var(--teal-100);   color: #04595e; border-color: #b9e9e5; }
.badge--info   { background: var(--sky-100);    color: #14607f; border-color: #c3e6f5; }
.badge--warn   { background: var(--yellow-100); color: #7a5806; border-color: #f4e39a; }
.badge--urgent { background: var(--red-100);    color: #96301f; border-color: #f2c5be; }
.badge--done   { background: var(--green-100);  color: #14603f; border-color: #bde6d1; }
.badge--off    { background: var(--gray-100);   color: var(--gray-700); border-color: var(--gray-200); }

.badge--demo {
  background: var(--yellow-100); color: #7a5806; border-color: #f4e39a;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; padding: 4px 10px;
}

/* ---------------------------------------------------------------------
   Notices
   --------------------------------------------------------------------- */
.notice {
  border-radius: var(--radius); padding: 16px 20px; border: 1px solid;
  display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; line-height: 1.55;
}
.notice--info   { background: var(--teal-50);   border-color: var(--teal-100);   color: #0a5457; }
.notice--warn   { background: var(--yellow-100);border-color: #f4e39a;           color: #6f5006; }
.notice--urgent { background: var(--red-100);   border-color: #f2c5be;           color: #8c2f26; }
.notice--ok     { background: var(--green-100); border-color: #bde6d1;           color: #14603f; }
.notice strong { font-weight: 800; }

.flash {
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; font-weight: 600;
  border: 1px solid;
}
.flash--ok    { background: var(--green-100); border-color: #bde6d1; color: #14603f; }
.flash--warn  { background: var(--yellow-100);border-color: #f4e39a; color: #6f5006; }
.flash--error { background: var(--red-100);   border-color: #f2c5be; color: #8c2f26; }

/* ---------------------------------------------------------------------
   Maps
   --------------------------------------------------------------------- */
.map {
  width: 100%; height: 380px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--teal-50); border: 1px solid var(--gray-200);
  /* Leaflet gives its panes z-index 400 and its zoom controls 1000. Without a
     stacking context of its own the map escapes and paints over modals, the
     sticky header and the mega menu. `isolate` traps those values inside. */
  position: relative; z-index: 0; isolation: isolate;
}
.map--tall { height: 520px; }
.map--full { height: 100%; min-height: 420px; border-radius: 0; border: 0; }
.leaflet-container { font: inherit; background: #dce9ee; }
.map__fallback {
  display: grid; place-items: center; height: 100%; text-align: center; padding: 24px;
  color: var(--gray-700); font-size: .95rem;
}

/* Custom Leaflet markers */
.vt-marker {
  width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 3px 10px -2px rgba(11,38,56,.5); display: grid; place-items: center;
  font-size: .62rem; font-weight: 800; color: #fff;
}
.vt-marker--available { background: var(--teal-600); }
.vt-marker--ontrip    { background: var(--navy-900); }
.vt-marker--request   { background: var(--yellow-500); color: var(--navy-950); }
.vt-marker--partner   { background: var(--coral-500); }
.vt-marker--queue     { background: var(--sky-500); }
.vt-marker--pickup    { background: var(--yellow-500); color: var(--navy-950); }
.vt-marker--dest      { background: var(--navy-900); }

@keyframes markerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,201,40,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255,201,40,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,201,40,0); }
}
.vt-marker--pulse { animation: markerPulse 2.2s ease-out infinite; }

.map-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px;
  font-size: .84rem; color: var(--gray-700); font-weight: 600;
}
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--gray-200); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.data th {
  text-align: left; padding: 13px 16px; background: var(--gray-100);
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gray-700); white-space: nowrap; border-bottom: 1px solid var(--gray-200);
}
table.data td { padding: 14px 16px; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--teal-50); }
table.data td.num { text-align: right; }
table.data a { font-weight: 700; text-decoration: none; }
table.data a:hover { text-decoration: underline; }

.empty {
  padding: 46px 24px; text-align: center; color: var(--gray-700);
}
.empty__title { font-weight: 800; color: var(--navy-900); font-size: 1.1rem; margin-bottom: 6px; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--navy-950); color: rgba(255,255,255,.72); padding-block: 64px 34px; }
.site-footer h4 {
  color: #fff; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 16px; font-weight: 800;
}
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-grid {
  display: grid; gap: 34px 30px;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.55);
}
.footer-brand .brand { color: #fff; }
.footer-brand p { margin-top: 14px; max-width: 34ch; font-size: .93rem; }
.footer-credit { font-size: .8rem; }
.footer-credit a { font-weight: 700; }

/* =====================================================================
   DRIVER APP
   Bigger targets, less chrome, status always obvious.
   ===================================================================== */
.driver-body { background: var(--gray-100); padding-bottom: 84px; }

.driver-top {
  background: var(--navy-900); color: #fff;
  /* Added to the home screen the status bar is translucent and the web view
     runs underneath it, so the header has to inset itself or the taxi number
     collides with the clock. Falls back to 18px in a normal browser tab. */
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 22px;
  position: sticky; top: 0; z-index: 40;
}
.driver-top__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.driver-top__name { font-size: 1.42rem; font-weight: 800; letter-spacing: -.03em; }
.driver-top__taxi {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; color: var(--yellow-500);
  text-transform: uppercase;
}
.driver-shell {
  /* The nav is about 62px plus the home indicator. 96px leaves clear air
     beneath the last card rather than tucking it right against the bar. */
  padding: 20px var(--gutter)
           calc(96px + env(safe-area-inset-bottom, 0px));
  max-width: 640px; margin-inline: auto;
}

/* The online toggle is the single largest control in the app */
.toggle-online {
  width: 100%; border: 0; border-radius: var(--radius-lg); padding: 26px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  cursor: pointer; font: inherit; text-align: left;
  transition: background .2s var(--ease);
}
.toggle-online--off { background: var(--gray-200); color: var(--gray-700); }
.toggle-online--on  { background: var(--teal-600); color: #fff;
                      box-shadow: 0 16px 34px -20px rgba(7,151,154,.95); }
.toggle-online__label { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.toggle-online__sub { font-size: .93rem; opacity: .82; font-weight: 600; }
.toggle-online__switch {
  width: 68px; height: 38px; border-radius: 999px; background: rgba(0,0,0,.18);
  position: relative; flex: none;
}
.toggle-online__switch::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 30px; height: 30px;
  border-radius: 50%; background: #fff; transition: transform .22s var(--ease);
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.toggle-online--on .toggle-online__switch::after { transform: translateX(30px); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat {
  background: #fff; border-radius: var(--radius); padding: 18px 16px; text-align: center;
  border: 1px solid var(--gray-200);
}
.stat__value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.035em; line-height: 1;
               font-variant-numeric: tabular-nums; }
.stat__label { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
               color: var(--gray-500); margin-top: 7px; }

/* Incoming offer */
.offer {
  background: #fff; border: 2.5px solid var(--yellow-500); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 22px 50px -26px rgba(11,38,56,.55);
}
.offer__timer {
  background: var(--yellow-500); color: var(--navy-950); padding: 12px 20px;
  font-weight: 800; display: flex; align-items: center; justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.offer__bar { height: 5px; background: rgba(0,0,0,.12); }
.offer__bar span { display: block; height: 100%; background: var(--navy-950); width: 100%;
                   transition: width 1s linear; }
.offer__body { padding: 22px; }
.offer__actions { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: 0 22px 22px; }

.route-line { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.route-line__marks { position: relative; padding-top: 6px; }
.route-line__marks::before {
  content: ""; position: absolute; left: 9px; top: 16px; bottom: 16px; width: 2px;
  background: var(--gray-300);
}
.route-line__dot { width: 20px; height: 20px; border-radius: 50%; position: relative; z-index: 2;
                   border: 4px solid #fff; }
.route-line__dot--from { background: var(--yellow-500); }
.route-line__dot--to   { background: var(--navy-900); margin-top: calc(100% - 20px); }
.route-line__places { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.route-line__place { min-width: 0; }
.route-line__label {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-500);
}
.route-line__name { font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; }

.meta-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px;
            font-size: .92rem; color: var(--gray-700); font-weight: 600; }
.meta-row span { display: inline-flex; align-items: center; gap: 7px; }

/* Driver trip action — the one button that matters right now */
.action-primary {
  width: 100%; padding: 26px; border: 0; border-radius: var(--radius-lg);
  background: var(--teal-600); color: #fff; font-size: 1.35rem; font-weight: 800;
  letter-spacing: -.02em; cursor: pointer; box-shadow: 0 16px 34px -20px rgba(7,151,154,.95);
  transition: background .18s var(--ease);
}
.action-primary:hover { background: var(--teal-700); }
.action-primary--navy { background: var(--navy-900); box-shadow: none; }
.action-primary--navy:hover { background: var(--navy-800); }
.action-primary--yellow { background: var(--yellow-500); color: var(--navy-950); }
.action-primary--yellow:hover { background: var(--yellow-400); }

/* Bottom navigation */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  /* Fully opaque. It was rgba(255,255,255,.97) with a backdrop blur, which
     looks good until the blur is unavailable — iOS drops it in some
     contexts, and page content then shows through the bar. A driver
     glancing down mid-shift needs the labels legible, not layered over
     whatever happens to be behind them. */
  background: #fff;
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -2px 14px rgba(7, 29, 44, .07);
  display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; text-decoration: none; color: var(--gray-500);
  font-size: .68rem; font-weight: 700; border-radius: 12px;
}
.bottom-nav a[aria-current="page"] { color: var(--teal-700); }
.bottom-nav svg { width: 22px; height: 22px; }

/* =====================================================================
   PARTNER PORTAL
   Simpler and calmer than the Association admin.
   ===================================================================== */
.partner-body { background: var(--sand-50); }
.partner-top {
  background: #fff; border-bottom: 1px solid var(--gray-200);
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 18px;
  position: sticky; top: 0; z-index: 40;
}
.partner-top__inner {
  max-width: 1080px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.partner-id__name { font-weight: 800; font-size: 1.14rem; letter-spacing: -.025em; }
.partner-id__by {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gray-500);
}
.partner-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.partner-nav a {
  padding: 9px 15px; border-radius: 10px; text-decoration: none; color: var(--navy-800);
  font-weight: 600; font-size: .95rem;
}
.partner-nav a:hover { background: var(--gray-100); }
.partner-nav a[aria-current="page"] { background: var(--navy-900); color: #fff; }
.partner-shell { max-width: 1080px; margin-inline: auto; padding: 30px var(--gutter) 70px; }

/* =====================================================================
   AUTH SCREENS
   ===================================================================== */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 30px var(--gutter);
  background:
    radial-gradient(90% 70% at 80% 0%, rgba(114,215,211,.30) 0%, rgba(114,215,211,0) 60%),
    linear-gradient(170deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--teal-700) 150%);
}
.auth__card {
  background: #fff; border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 44px);
  width: 100%; max-width: 430px; box-shadow: var(--shadow-lg);
}
.auth__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.auth h1 { font-size: 1.75rem; margin-bottom: .2em; }
.auth__sub { color: var(--gray-700); margin-bottom: 26px; }
.auth__demo {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-200);
  font-size: .87rem; color: var(--gray-700); line-height: 1.7;
}
.auth__demo code {
  background: var(--gray-100); padding: 2px 7px; border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; color: var(--navy-900);
}
.auth__back { display: block; margin-top: 22px; text-align: center; color: rgba(255,255,255,.72);
              font-size: .9rem; text-decoration: none; }
.auth__back:hover { color: #fff; }

/* =====================================================================
   MISC
   ===================================================================== */
.split { display: grid; gap: clamp(24px, 3.4vw, 44px); grid-template-columns: 1fr; align-items: start; }
/* Where one column is a block of prose and the other a list or card stack,
   centring removes the pocket of empty space beneath the shorter one. */
.split--center { align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr .85fr; } }
@media (min-width: 900px) { .split--even { grid-template-columns: 1fr 1fr; } }

.kv { display: grid; gap: 14px; }
.kv__row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
           padding-bottom: 12px; border-bottom: 1px solid var(--gray-200); }
.kv__row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv__k { color: var(--gray-500); font-size: .85rem; font-weight: 700; letter-spacing: .04em;
         text-transform: uppercase; }
.kv__v { font-weight: 700; text-align: right; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 20px 26px; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--teal-600); border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--teal-100);
}
.timeline li::after {
  content: ""; position: absolute; left: 5px; top: 19px; bottom: 0; width: 1.5px; background: var(--gray-200);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline__when { font-size: .8rem; color: var(--gray-500); font-weight: 700; }
.timeline__what { font-weight: 700; }
.timeline__note { font-size: .88rem; color: var(--gray-700); }

.step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.step-head > span:last-child { flex: 1 1 auto; min-width: 0; }
.step-head__n {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%; background: var(--navy-900); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .92rem; flex: none;
}
.step-head__t { font-size: 1.4rem; font-weight: 800; letter-spacing: -.025em; }

.faq { border-top: 1px solid var(--gray-200); }
.faq details { border-bottom: 1px solid var(--gray-200); }
.faq summary {
  padding: 20px 0; cursor: pointer; font-weight: 700; font-size: 1.06rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--teal-600); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details > *:not(summary) { padding-bottom: 20px; color: var(--gray-700); }

.demo-note {
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700;
  color: #7a5806; background: var(--yellow-100); border: 1px solid #f4e39a;
  padding: 6px 13px; border-radius: 999px;
}

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

/* Entrance for freshly arrived queue cards */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.animate-in { animation: cardIn .32s var(--ease) both; }

/* ---------------------------------------------------------------------
   Print — the trip pass should print cleanly
   --------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .bottom-nav, .btn, .no-print { display: none !important; }
  body { background: #fff; }
  .pass { box-shadow: none; border: 1px solid #999; }
}

/* --- Rate tables ---------------------------------------------------- */
.data--rates th[scope="row"] { font-weight: 700; color: var(--ink); white-space: nowrap; }
.data--rates thead th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.data--rates thead tr:first-child th[colspan] {
  text-align: center; border-bottom: 1px solid var(--gray-200);
}
.data--rates td.num, .data--rates th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data--rates tbody tr:nth-child(even) { background: rgba(0,0,0,.015); }
@media (max-width: 640px) {
  .data--rates { font-size: .88rem; }
  .data--rates th[scope="row"] { white-space: normal; min-width: 9rem; }
}

/* --- Partner portal identity block ----------------------------------- */
.partner-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* =====================================================================
   Booking card — hero variant
   ===================================================================== */
.hero--split .booking {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(7,29,44,.10);
  overflow: hidden;
}
.hero--split .booking__tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; padding: 10px 10px 0;
  background: transparent; border: 0;
}
.hero--split .booking__tab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--gray-600);
  font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.hero--split .booking__tab svg { opacity: .7; }
.hero--split .booking__tab:hover { background: var(--gray-100); color: var(--ink); }
.hero--split .booking__tab[aria-selected="true"] {
  background: var(--navy-950); color: #fff;
}
.hero--split .booking__tab[aria-selected="true"] svg { opacity: 1; }
.booking__form { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 14px; }

/* Pickup / destination with the connecting rail */
.route-input { display: flex; gap: 12px; }
.route-input__rail {
  flex: 0 0 auto; width: 16px;
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0;
}
.route-input__dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.route-input__dot--from { border-radius: 50%; background: var(--navy-950); }
.route-input__dot--to   { background: var(--navy-950); }
.route-input__line { flex: 1; width: 2px; background: var(--gray-300); margin: 5px 0; }
.route-input__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.route-input__field { position: relative; }
.route-input__field input {
  width: 100%; padding: 15px 46px 15px 15px;
  border: 1px solid var(--gray-200); border-radius: 12px;
  background: var(--gray-50, #fafafa);
  font-family: inherit; font-size: 1rem; color: var(--ink);
}
.route-input__field input::placeholder { color: var(--gray-500); }
.route-input__field input:focus-visible {
  outline: 2px solid var(--teal-600); outline-offset: 0;
  border-color: var(--teal-600); background: #fff;
}
.route-input__icon {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: transparent; color: var(--gray-500);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.route-input__icon:hover { background: var(--gray-100); color: var(--teal-700); }
.route-input__icon--static { pointer-events: none; }

.chips--tight { gap: 6px; }
.chips--tight .chip { padding: 6px 12px; font-size: .82rem; }

.booking__pax { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.booking__pax-label {
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gray-500);
}
.booking__note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; font-size: .82rem; color: var(--gray-500);
}

/* Yellow primary action */
.btn--yellow {
  background: var(--yellow-500); color: var(--navy-950);
  border-color: var(--yellow-500); font-weight: 800; letter-spacing: .01em;
}
.btn--yellow:hover { background: #ffd44f; border-color: #ffd44f; color: var(--navy-950); }
.btn--yellow svg { transition: transform .2s var(--ease); }
.btn--yellow:hover svg { transform: translateX(4px); }

/* Header call button */
.header-call {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 99px;
  background: var(--yellow-500); color: var(--navy-950);
  font-weight: 800; font-size: .92rem; text-decoration: none;
  white-space: nowrap;
}
.header-call:hover { background: #ffd44f; color: var(--navy-950); }
@media (max-width: 900px) { .header-call span { display: none; } .header-call { padding: 11px 13px; } }

@media (prefers-reduced-motion: reduce) {
  .btn--yellow svg, .hero--split .booking__tab { transition: none; }
}

/* =====================================================================
   Footer with illustration
   ---------------------------------------------------------------------
   The artwork sits at the top at its own aspect ratio. Beneath it the
   footer's background colour — sampled from the artwork's own bottom edge
   in PHP — continues down behind the links and logo, so the illustration
   reads as extending further than the file actually does. No image
   editing is needed to make room for content.
   ===================================================================== */
.site-footer--art {
  background: var(--footer-bg, var(--navy-950));
  padding-block: 0 34px;
  position: relative;
}

.site-footer__art {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  background-image: var(--footer-art);
  background-size: cover;
  /* Anchored to the BOTTOM, not the top. The colour continuing beneath this
     block is sampled from the image's bottom edge, so that edge has to be the
     one touching the solid colour. Anchoring to the top crops the bottom away
     and leaves a hard seam where mid-image meets the sampled colour. It also
     keeps the horizon and foreground visible, which is where the subject of a
     landscape illustration usually is. */
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Both edges of the artwork are blended rather than butted against a flat
   colour. The sampled colour is an average of the image's bottom row, so on
   a textured edge — foliage, waves — no single value matches exactly and a
   hairline shows. Fading over a band removes the seam whatever the artwork
   does, and the same treatment at the top dissolves the join with the page
   above instead of starting the illustration on a hard line. */
.site-footer__art::before,
.site-footer__art::after {
  content: ""; position: absolute; left: 0; right: 0;
  pointer-events: none;
}
/* Kept deliberately shallow. These only need to hide a hairline, not veil
   the artwork — at 26% and 38% they covered nearly two thirds of the image
   between them and the illustration all but disappeared. */
.site-footer__art::before {
  top: 0; height: 10%;
  background: linear-gradient(180deg,
    var(--footer-top-blend, var(--sand-50)) 0%,
    color-mix(in srgb, var(--footer-top-blend, var(--sand-50)) 30%, transparent) 55%,
    transparent 100%);
}
.site-footer__art::after {
  bottom: 0; height: 16%;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--footer-bg) 25%, transparent) 55%,
    color-mix(in srgb, var(--footer-bg) 85%, transparent) 88%,
    var(--footer-bg) 100%);
}

/* color-mix is widely supported but not universal; without it the two stops
   either side still give a clean fade. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-footer__art::before {
    background: linear-gradient(180deg, var(--footer-top-blend, var(--sand-50)) 0%, transparent 100%);
  }
  .site-footer__art::after {
    background: linear-gradient(180deg, transparent 0%, var(--footer-bg) 92%, var(--footer-bg) 100%);
  }
}
.site-footer--art .site-footer__body { padding-top: 8px; }

.site-footer__lead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  padding-bottom: 40px; margin-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.site-footer__lead h2 {
  margin: 0; color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.03em; line-height: 1.1;
}

/* Light artwork: flip the text to navy so it stays readable. */
.site-footer--light { color: rgba(11,38,56,.78); }
.site-footer--light h4,
.site-footer--light .brand__name,
.site-footer--light .site-footer__lead h2 { color: var(--navy-950); }
.site-footer--light a { color: rgba(11,38,56,.78); }
.site-footer--light a:hover { color: var(--navy-950); }
.site-footer--light .brand__sub { color: rgba(11,38,56,.55); }
.site-footer--light .site-footer__lead,
.site-footer--light .footer-bottom { border-color: rgba(11,38,56,.18); }

@media (max-width: 720px) {
  /* Narrower viewport crops less horizontally, so a taller box shows more of
     the scene without scaling the artwork up. */
  .site-footer__art { aspect-ratio: 5 / 4; max-height: 46vh; }
  .site-footer__lead { padding-bottom: 30px; margin-bottom: 30px; }
}

/* --- Supplied logo image --------------------------------------------- */
.brand--img { display: inline-flex; align-items: center; }
.brand__img {
  display: block;
  width: auto;
  height: 38px;          /* the lockup is ~3.1:1, so this reads ~118px wide */
  max-width: 210px;
  object-fit: contain;
}
.site-header__inner .brand__img { height: 36px; }
.site-footer .brand__img { height: 42px; }

@media (max-width: 600px) {
  .brand__img { height: 32px; max-width: 160px; }
}

/* =====================================================================
   Section tint + stat blocks
   ---------------------------------------------------------------------
   The page runs light from the hero down and resolves into the dark green
   footer, so the footer is the only dark moment rather than one of three.
   Emphasis here comes from a tint and a rule, not from a slab of navy
   that belonged to the old dark hero.
   ===================================================================== */
.section--tint {
  background: linear-gradient(180deg, var(--teal-50) 0%, var(--sand-50) 100%);
}

.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-block {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
}
.stat-block__value {
  font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}
.stat-block__label {
  margin-top: 8px; font-size: .88rem; font-weight: 600;
  color: var(--gray-600); line-height: 1.4;
}
@media (max-width: 520px) {
  .stat-pair { grid-template-columns: 1fr; }
}

/* =====================================================================
   Route divider
   ---------------------------------------------------------------------
   Sits between "where people go" and "how you arrive" — the point where
   the page turns from destinations to arrivals. A dashed road with a taxi
   on it, carrying a line of live figures so the space says something true
   about the network rather than just filling a gap.
   ===================================================================== */
.route-divider {
  display: flex; align-items: center; gap: 0;
  max-width: 620px; margin: 4px auto 0; padding-inline: var(--gutter);
}
.route-divider__line {
  flex: 1; height: 3px; border-radius: 2px;
  background-image: linear-gradient(90deg, var(--gray-300) 0 10px, transparent 10px 20px);
  background-size: 20px 3px;
  background-repeat: repeat-x;
}
.route-divider__badge {
  flex: 0 0 auto; width: 52px; height: 52px; margin-inline: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--yellow-500); color: var(--navy-950);
  box-shadow: 0 6px 18px rgba(255,201,40,.42);
  animation: routeBob 3.2s ease-in-out infinite;
}
@keyframes routeBob {
  0%, 100% { transform: translateX(-7px); }
  50%      { transform: translateX(7px); }
}
.route-divider__note {
  max-width: 60ch; margin: 18px auto 0; padding-inline: var(--gutter);
  text-align: center; font-size: .92rem; color: var(--gray-600);
}
.route-divider__note strong {
  color: var(--teal-700); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .route-divider__badge { animation: none; }
}

/* --- Long-form text (privacy, terms) --------------------------------- */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: 1.25rem; margin: 34px 0 10px; letter-spacing: -.02em;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; line-height: 1.7; color: var(--gray-700); }
.prose a { color: var(--teal-700); }

/* =====================================================================
   Taxi meter clock
   ---------------------------------------------------------------------
   Atlantic Standard Time, in the header. Styled as the meter head in a
   cab: dark recessed plate, amber digits, a little glow. Decorative, but
   genuinely useful — most visitors arrive from a different time zone.
   ===================================================================== */
.meter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  background: linear-gradient(180deg, #1b1d21 0%, #0e1013 100%);
  border: 1px solid #2c2f35;
  border-radius: 10px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.5);
  user-select: none;
}
.meter__label {
  font-size: .56rem; font-weight: 800; letter-spacing: .14em;
  color: #6b7078; line-height: 1;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.meter__digits {
  display: inline-flex; align-items: baseline;
  font-family: "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 1.12rem; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--yellow-500);
  text-shadow: 0 0 7px rgba(255,201,40,.55), 0 0 18px rgba(255,201,40,.22);
}
.meter__digits time { font: inherit; color: inherit; }
.meter__colon {
  font-style: normal; padding-inline: 1px;
  animation: meterTick 2s steps(1, end) infinite;
}
@keyframes meterTick { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }

@media (max-width: 1080px) { .meter { display: none; } }
@media (prefers-reduced-motion: reduce) { .meter__colon { animation: none; } }

/* --- Geolocate button states ----------------------------------------- */
.route-input__icon.is-busy { color: var(--teal-600); }
.route-input__icon.is-busy svg { animation: geoSpin 1s linear infinite; }
.route-input__icon.is-set { color: var(--teal-700); background: var(--teal-50); }
@keyframes geoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .route-input__icon.is-busy svg { animation: none; }
}

/* The datalist chevron iOS draws sits where our own icon does, so give the
   field room for both rather than letting them stack on top of each other. */
.route-input__field input { padding-right: 74px; }
.route-input__field input::-webkit-calendar-picker-indicator { margin-right: 30px; }

/* --- Avatar (public side) --------------------------------------------
   trip.php previously borrowed .side__avatar from admin.css, which public
   pages never load — so it rendered as an unstyled grey square. */
.avatar {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
}
.avatar--navy  { background: var(--navy-900); color: #fff; }
.avatar--muted { background: var(--gray-200); color: var(--gray-600); }

/* --- Status rail: vertical on small screens --------------------------
   Six labels cannot sit side by side on a phone — "Driver assigned" alone
   is wider than a sixth of a 390px screen, so they collide. Stacking is
   both readable and the conventional pattern for a progress tracker on
   mobile. */
@media (max-width: 700px) {
  .rail { flex-direction: column; }
  .rail__step {
    flex: none; text-align: left; min-width: 0;
    padding: 0 0 20px 32px;
  }
  .rail__step:last-child { padding-bottom: 0; }
  .rail__step::before { top: 1px; left: 0; transform: none; }
  .rail__step::after {
    top: 20px; left: 8px; width: 3px; height: calc(100% - 20px);
    transform: none;
  }
  .rail__label { font-size: .92rem; padding-inline: 0; }
}

/* "Updating live" should not compete with the page heading on a phone. */
@media (max-width: 560px) {
  .live-dot { font-size: .78rem; }
}

/* --- Shared with the admin console -----------------------------------
   These were defined only in admin.css, which public pages never load, so
   about.php, rates.php and ride-options.php were rendering them unstyled.
   Defined here as the base; admin.css may still refine them. */
.form-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-grid--full { grid-column: 1 / -1; }

.checklist { margin: 0; padding-left: 1.25em; }
.checklist li { margin-bottom: 14px; line-height: 1.6; font-size: .93rem; }
.checklist li:last-child { margin-bottom: 0; }
.checklist strong { display: block; margin-bottom: 2px; }

/* --- Payment method chooser ------------------------------------------ */
.pay-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md); cursor: pointer; background: #fff;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.pay-option:hover { border-color: var(--teal-300); }
.pay-option--selected { border-color: var(--teal-600); background: var(--teal-50); }
.pay-option:focus-within { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.pay-option__icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--navy-900);
}
.pay-option--selected .pay-option__icon { background: #fff; color: var(--teal-700); }
.pay-option__name { display: block; font-weight: 700; font-size: 1rem; }
.pay-option__blurb { display: block; font-size: .86rem; color: var(--gray-600); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .pay-option { transition: none; } }

/* --- Payment flag (driver app) --------------------------------------- */
.pay-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  font-size: .78rem; font-weight: 700;
  background: var(--gray-100); color: var(--gray-700);
}
.pay-flag--cash        { background: var(--green-100); color: #14624a; }
.pay-flag--card_driver { background: #dbeafe; color: #1d4ed8; }
.pay-flag--online      { background: var(--teal-100); color: var(--teal-700); }

/* --- Logo on a dark background --------------------------------------- */
/* Used when only the standard (dark-panel) logo exists and it has to sit on
   navy. Drop in assets/logo/logo-light.* and this stops being applied. */
.brand--plate {
  background: #fff; padding: 8px 12px; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.brand--plate .brand__img { height: 30px; }

/* --- Passenger payment panel ------------------------------------------ */
.paypanel {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.paypanel__head {
  display: flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray-500); margin-bottom: 12px;
}
.paypanel__amount {
  font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em;
  color: var(--navy-950); line-height: 1; font-variant-numeric: tabular-nums;
}
.paypanel__sub { margin: 8px 0 0; font-size: .87rem; color: var(--gray-600); line-height: 1.5; }
.paypanel__ref { margin: 8px 0 0; font-size: .78rem; color: var(--gray-500); }
.paypanel__slot { margin-top: 16px; }

.paypanel--done { border-color: var(--teal-500); background: var(--teal-50); }
.paypanel--done .paypanel__head { color: var(--teal-700); }
.paypanel--due  { border-color: var(--yellow-500); background: #fffdf4; }
.paypanel--due  .paypanel__head { color: #8a6200; }
.paypanel--pending { border-style: dashed; }

/* --- Trip alerts panel (driver) --------------------------------------- */
.push {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.push__head {
  display: flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px;
}
.push__body { margin: 0 0 14px; font-size: .89rem; line-height: 1.55; color: var(--gray-700); }
.push__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.push__status { margin: 12px 0 0; font-size: .82rem; color: var(--gray-500); min-height: 1em; }
.push__status--ok   { color: var(--teal-700); font-weight: 600; }
.push__status--warn { color: #8a6200; font-weight: 600; }

/* One state visible at a time, driven by data-state on the panel. */
.push__body { display: none; }
.push[data-state="off"]         .push__body--off,
.push[data-state="loading"]     .push__body--off,
.push[data-state="on"]          .push__body--on,
.push[data-state="ios"]         .push__body--ios,
.push[data-state="unsupported"] .push__body--unsupported,
.push[data-state="denied"]      .push__body--denied { display: block; }

.push[data-state="on"]          { border-color: var(--teal-500); background: var(--teal-50); }
.push[data-state="on"] #push-enable,
.push[data-state="ios"] .push__actions,
.push[data-state="unsupported"] .push__actions { display: none; }
.push[data-state="on"] .push__actions { display: flex; }
.push[data-state="loading"] .push__actions { visibility: hidden; }

/* --- "Look for" note (driver offer card) ------------------------------
   The passenger's description of themselves. At a busy dock this is what
   stops a driver circling, so it gets weight rather than small grey text. */
.spot-note {
  margin-top: 14px; padding: 12px 14px;
  background: var(--yellow-100, #fff5c7); border-radius: 12px;
  font-size: .92rem; line-height: 1.5; color: #5c4300; font-weight: 600;
}
.spot-note__label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #8a6200; margin-bottom: 3px;
}