/* ==========================================
   iSplit Premium Transit — Design System
   Modern Uber/Bolt-inspired light theme
   ========================================== */

/* Self-hosted Inter + Outfit — replaces the previous Google Fonts @import
   to keep the CSP allowlist tight (no fonts.googleapis.com / fonts.gstatic.com)
   and remove the third-party round-trip. These are the same variable-font
   woff2 slices Google serves under the hood; the `unicode-range` on each
   @font-face lets the browser skip Cyrillic on Latin-only pages and vice
   versa, so total bytes-over-wire matches the original @import. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/static/fonts/inter/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/static/fonts/inter/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/static/fonts/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/static/fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('/static/fonts/outfit/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('/static/fonts/outfit/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted Material Symbols Rounded — avoids the Google CDN round-trip
   that was causing icons to render as their text labels (e.g. "local_taxi")
   for ~300-800ms on first paint. `font-display: block` gives a short blank
   period instead of the text-readout fallback; with the font now on the
   same origin and preloaded in base.html, that blank period is ~50ms. */
@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('/static/fonts/material-symbols-rounded.woff2?v=31') format('woff2');
}

:root {
    --bg-base: #f7f7f7;
    --bg-white: #ffffff;
    --acc-primary: #d32f2f;
    --acc-primary-hover: #b71c1c;
    --acc-primary-glow: rgba(211, 47, 47, 0.18);
    --acc-blue: #276ef1;
    --acc-blue-light: rgba(39, 110, 241, 0.08);
    --acc-green: #05944f;
    --acc-green-light: rgba(5, 148, 79, 0.08);
    --acc-danger: #e11900;
    --acc-danger-light: rgba(225, 25, 0, 0.08);
    --acc-orange: #ff6937;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #6b6b6b;
    --text-light: #999999;
    --border-light: #e2e2e2;
    --border-subtle: #eeeeee;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition-fast: 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-spring: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

html, body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    /* No `overflow:hidden` / `height:100vh` at the document level — the
     * body MUST scroll for normal text pages (home, register, profile,
     * privacy, terms). Pages that need a viewport-locked shell (the
     * map-driven /ride/, /drive/, /airport/* routes) opt-in to the
     * lock via a body class — see the rule block immediately below. */
    min-height: 100dvh;
}

/* Viewport-locked pages opt-in here. These pages render a full-screen
 * map under a bottom drawer / floating CTA; the body must not scroll
 * because the inner .page-layout fills the viewport and manages its
 * own internal scroll context. The body class is set inline at the top
 * of each page's template ({passenger,driver,airport_*}.html). */
body.passenger-page,
body.driver-page,
body.airport-page {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    min-height: 0;
}

h1, h2, h3, h4 {
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: -0.5px;
    font-weight: 700;
}

/* ==========================================
   Page Layout — Map above, drawer below (no overlap)
   ========================================== */
.page-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}

/* ==========================================
   Map Layer (fills remaining space above drawer)
   ========================================== */
#map {
    flex: 1;
    min-height: 180px;
    position: relative;
    z-index: 1;
}

/* ==========================================
   Glass Header — Floating Top Bar
   ========================================== */
.glass-header {
    position: fixed; top: 0; left: 0; right: 0;
    padding: 0 20px;
    height: 64px;
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0) 100%);
    z-index: 100;
    pointer-events: none;
}
.glass-header > * { pointer-events: auto; }

/* Header back button (between logo and status) */
.header-back-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    padding: 0;
    flex-shrink: 0;
}
.header-back-btn:active { transform: scale(0.92); }
.header-back-btn .material-symbols-rounded { font-size: 22px; }

.logo {
    font-weight: 800; font-size: 1.6rem;
    color: #000000;
    letter-spacing: -1px;
}

.user-status {
    padding: 6px 14px;
    border-radius: 100px;
    font-weight: 600; font-size: 0.78rem;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    color: var(--text-muted);
    display: flex; align-items: center; gap: 6px;
}
.user-status::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-light);
    display: inline-block;
}
.user-status.online::before { background: var(--acc-green); }
.user-status.searching::before { background: var(--acc-orange); animation: pulse-dot 1.5s infinite; }

/* Driver header toggle — makes the status pill tappable */
.user-status.driver-toggle {
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
    padding: 8px 16px;
    font-size: 0.82rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.user-status.driver-toggle:active {
    transform: scale(0.93);
    box-shadow: var(--shadow-md);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

/* ==========================================
   Button System
   ========================================== */
.btn {
    border: none;
    border-radius: var(--radius-sm);
    padding: 16px 24px;
    margin-top: 10px;
    font-size: 1rem; font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    letter-spacing: -0.2px;
    position: relative;
    overflow: hidden;
}
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn:disabled { opacity: 0.4; pointer-events: none; }

/* Loading lockdown state for buttons that are mid-async-action */
.btn.btn-loading {
    opacity: 0.55;
    pointer-events: none;
    cursor: wait;
    filter: grayscale(0.4);
    position: relative;
}
.btn.btn-loading::after {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    margin-left: 8px;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

.btn-primary {
    background: var(--acc-primary);
    color: #fff;
    box-shadow: 0 4px 14px var(--acc-primary-glow);
}
.btn-primary:hover { background: var(--acc-primary-hover); }

.btn-accent {
    background: var(--acc-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(39, 110, 241, 0.25);
}

.btn-success {
    background: var(--acc-green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(5, 148, 79, 0.25);
}

.btn-danger {
    background: var(--acc-danger);
    color: #fff;
    box-shadow: 0 4px 14px rgba(225, 25, 0, 0.2);
}

.btn-secondary {
    background: var(--bg-base);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-light);
}

.btn-sm {
    padding: 10px 16px;
    font-size: 0.88rem;
    margin-top: 0;
}

.btn-icon {
    width: 48px; height: 48px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0;
}

/* ==========================================
   Bottom Sheet / Drawer System
   ========================================== */
.glass-drawer {
    background: var(--bg-white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 20px 20px 52px;
    z-index: 50;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.08);
    /* svh = small viewport unit (mobile chrome assumed visible). Guarantees
       the drawer cap fits the on-screen area at first paint, regardless of
       URL-bar / toolbar state. vh kept as fallback for legacy WebViews. */
    max-height: 60vh;
    max-height: 60svh;
    overflow-y: auto;
    /* Was flex-shrink: 0 — drawer would refuse to shrink and get clipped by
       .page-layout { overflow: hidden } when the parent ran short (small
       landscape, large Dynamic Type). Allowing shrink lets the internal
       scroll absorb overflow instead of hiding the button. */
    flex-shrink: 1;
    -webkit-overflow-scrolling: touch;
}
/* Drawer overlap discipline: only one share-* drawer is visible at a
   time. The JS toggles `hidden-down` exclusively across share-drawer /
   share-searching-drawer / share-connected-drawer / passenger-drawer.
   This rule is the safety net — if a state-machine bug ever leaves
   two drawers visible, the LATER one in DOM order wins (since they
   share `position` and layout flow). Without this, both would
   stack, pushing content off the visible area on small phones.

   The `hidden-down` itself is `display:none` so the layout collapses
   correctly; this comment exists so future refactors don't switch to
   opacity-only hiding without thinking about layout overlap.
*/
.glass-drawer.hidden-down { display: none; }

/* Keyboard-active state for the booking drawer: while a pickup/dropoff
   input is focused on a touch device, lift the drawer to fill the
   viewport so Google Places' autocomplete dropdown isn't covered by the
   on-screen keyboard. JS toggles `.kb-active` on focusin/focusout of
   the two inputs. */
#passenger-drawer.kb-active {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    z-index: 1000;
    padding-top: max(env(safe-area-inset-top), 16px);
}
body.kb-active #map { visibility: hidden; }

@media (max-height: 640px) {
    .glass-drawer {
        /* 50dvh on a ≤640px viewport (320px) cannot hold title + 2 inputs +
           CTA + standalone-mode safe-area padding-bottom. Raise to 60svh so
           the button is always reachable on first paint. */
        max-height: 60vh;
        max-height: 60svh;
        padding: 16px 16px 40px;
    }
}

/* ==========================================
   Input System
   ========================================== */
.input-group { position: relative; margin-bottom: 12px; }
/* Anchors the absolutely-positioned clear button to the input only,
   so sibling rows (e.g. #btn-use-my-location) don't shift its vertical centre. */
.input-clear-wrap { position: relative; }

/* Clear (X) button at the right end of an input */
.input-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-muted);
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 0 1px;
    z-index: 5;
}
.input-clear-btn:hover { background: var(--text-light); color: #fff; }
.input-group.has-value .input-clear-btn { display: flex; }
.input-group.has-value .beautiful-input { padding-right: 38px; }

.input-row {
    display: flex; align-items: center; gap: 12px;
    position: relative;
}

.input-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--text-muted);
    background: transparent;
}
.input-dot.pickup { border-color: var(--acc-primary); background: var(--acc-primary); }
.input-dot.dropoff { border-color: var(--acc-blue); background: var(--acc-blue); }

.input-connector {
    position: absolute;
    left: 4px; top: 34px;
    width: 2px; height: calc(100% - 24px);
    background: var(--border-light);
}

.beautiful-input {
    width: 100%;
    background: var(--bg-base);
    border: 2px solid transparent;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    /* 16px floor — iOS Safari auto-zooms the page on focus when an editable
       field computes < 16px, which is what was shifting the UI. max() keeps
       upward scaling for users who bumped their default font size. */
    font-size: max(16px, 1rem); font-weight: 500;
    outline: none;
    transition: all var(--transition-fast);
}
.beautiful-input::placeholder { color: var(--text-light); font-weight: 400; }
.beautiful-input:focus {
    background: var(--bg-white);
    border-color: var(--acc-primary);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}

/* Google Places Autocomplete dropdown styling */
.pac-container {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 4px !important;
    font-family: 'Inter', sans-serif !important;
    z-index: 10000 !important;
    max-height: 180px !important;
    overflow-y: auto !important;
}
.pac-item {
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    border-top: 1px solid var(--border-subtle) !important;
    cursor: pointer;
}
.pac-item:first-child { border-top: none !important; }
.pac-item:hover { background: var(--bg-base) !important; }
.pac-item-query { font-weight: 600 !important; color: var(--text-primary) !important; }
.pac-icon { display: none !important; }

/* ==========================================
   Vehicle Selector
   ========================================== */
.vehicle-selector {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding: 4px 0;
    margin: 16px 0;
    scrollbar-width: none;
}
.vehicle-selector::-webkit-scrollbar { display: none; }

.vehicle-option {
    flex: 1; min-width: 0;
    background: var(--bg-base);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.vehicle-option:hover { border-color: var(--border-light); }
.vehicle-option.selected {
    border-color: var(--acc-primary);
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
}
.vehicle-option .vehicle-icon { font-size: 1.6rem; margin-bottom: 4px; }
.vehicle-option .vehicle-name { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.vehicle-option .vehicle-price { font-size: 0.85rem; font-weight: 800; color: var(--acc-primary); margin-top: 2px; }
.vehicle-option .vehicle-eta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* ==========================================
   Fare Estimate Bar
   ========================================== */
.fare-estimate {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0;
    margin-top: 8px;
    border-top: 1px solid var(--border-subtle);
}
.fare-estimate .est-label { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; }
.fare-estimate .est-price { font-size: 1.6rem; font-weight: 800; color: var(--acc-primary); letter-spacing: -0.5px; }

.fare-breakdown {
    display: flex; gap: 16px; align-items: center;
}
.fare-detail {
    display: flex; flex-direction: column; align-items: center;
}
.fare-detail .label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.fare-detail .value { font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); }

/* ==========================================
   Ride Info Cards
   ========================================== */
.ride-info-card {
    background: var(--bg-base);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
}

.ride-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0;
}
.ride-info-row + .ride-info-row { border-top: 1px solid var(--border-subtle); }
.ride-info-row .label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.ride-info-row .value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
/* Full A→Z trip price — emphasized so users see the absolute bill alongside their split. */
.ride-info-row.full-price .label { font-weight: 700; color: var(--text-primary); }
.ride-info-row.full-price .value { font-weight: 800; font-size: 1rem; }

/* Driver Card (shown to passenger during tracking) */
.driver-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px;
    background: var(--bg-base);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}
.driver-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--border-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700; color: var(--text-muted);
    flex-shrink: 0;
}
.driver-details { flex: 1; min-width: 0; }
.driver-details .name { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.driver-details .car { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
.driver-details .taxi-id { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-top: 2px; }
.driver-details .rating { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

.driver-fare {
    text-align: right; flex-shrink: 0;
}
.driver-fare .price-label { font-size: 0.72rem; color: var(--text-muted); }
.driver-fare .price { font-size: 1.3rem; font-weight: 800; color: var(--acc-primary); }

/* ==========================================
   Route Summary (shown after directions calculated)
   ========================================== */
.route-summary {
    display: flex; gap: 20px; align-items: center;
    padding: 12px 0;
    margin-bottom: 8px;
}
.route-stat {
    display: flex; flex-direction: column;
}
.route-stat .stat-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.route-stat .stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

/* ==========================================
   Incoming Ride Request (Driver Side)
   ========================================== */
.request-card {
    background: var(--bg-base);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}
.ride-card__central {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin: -4px 0 10px;
    background: linear-gradient(90deg, #ff6937 0%, #ff8a5b 100%);
    color: #fff;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(255,105,55,0.25);
}
.ride-card__central-label {
    letter-spacing: 0.08em;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
}
.ride-card__central-phone { font-variant-numeric: tabular-nums; }
.ride-card__central:active { opacity: 0.85; }
.request-card .location-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
}
.request-card .location-row + .location-row { border-top: 1px solid var(--border-subtle); }
.request-card .location-dot {
    width: 8px; height: 8px; border-radius: 50%;
    margin-top: 5px; flex-shrink: 0;
}
.request-card .location-dot.pickup-dot { background: var(--acc-primary); }
.request-card .location-dot.dropoff-dot { background: var(--acc-blue); }
.request-card .location-text {
    font-size: 0.9rem; font-weight: 500; color: var(--text-primary);
}
.request-card .request-fare {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.request-card .request-fare .fare-amount {
    font-size: 1.4rem; font-weight: 800; color: var(--acc-primary);
}
.request-card .request-fare .fare-distance {
    font-size: 0.85rem; color: var(--text-muted); font-weight: 500;
}

.action-buttons {
    display: flex; gap: 10px;
}
.action-buttons .btn { flex: 1; margin-top: 0; }
#btn-pass-ride,
#btn-decline-queued {
    flex: 0 0 auto;
    width: auto;
    align-self: flex-start;
}

/* Green circle phone-call button (passenger + driver) */
.tracking-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.tracking-header-row .tracking-text { flex: 1; min-width: 0; }
.tracking-header-row .tracking-text .section-title,
.tracking-header-row .tracking-text .section-subtitle {
    margin-bottom: 2px;
}
.call-circle-btn {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #05944f;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(5, 148, 79, 0.35);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.call-circle-btn:active { transform: scale(0.92); }
.call-circle-btn .material-symbols-rounded {
    font-size: 26px;
    color: #fff;
}
.call-circle-btn.hidden { display: none !important; }

/* ==========================================
   Driver Dashboard Stats
   ========================================== */
.stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin: 16px 0;
}
.stat-card {
    background: var(--bg-base);
    border-radius: var(--radius-md);
    padding: 14px 12px;
    text-align: center;
}
.stat-card .stat-number { font-size: 1.3rem; font-weight: 800; color: var(--acc-primary); }
.stat-card .stat-desc { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

/* ==========================================
   Landing / Auth Screens
   ========================================== */
.landing-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-white);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 200; padding: 32px 24px;
}
.landing-wrapper h2 {
    font-size: 2.4rem;
    margin-bottom: 8px;
    text-align: center;
    line-height: 1.1;
    color: var(--acc-primary);
    letter-spacing: -1px;
}
.landing-wrapper p {
    color: var(--text-muted);
    margin-bottom: 32px;
    text-align: center;
    font-weight: 500;
    font-size: 0.95rem;
}
.landing-wrapper .btn { max-width: 320px; }

.auth-container {
    width: 100%; max-width: 340px;
}
.auth-container .beautiful-input { margin-bottom: 12px; }
.auth-divider {
    text-align: center;
    color: var(--text-light);
    font-size: 0.8rem;
    margin: 16px 0;
}

/* ==========================================
   Fullscreen Modals / Overlays
   ========================================== */
.overlay-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.overlay-modal.visible { opacity: 1; pointer-events: auto; }

.modal-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    padding: 28px 22px;
    border-radius: var(--radius-xl);
    text-align: center;
    width: calc(100% - 32px);
    max-width: 380px;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    -webkit-overflow-scrolling: touch;
}
.modal-card h2 {
    margin: 12px 0 6px;
    color: var(--acc-primary);
    font-size: 1.15rem;
    line-height: 1.25;
}
.modal-card p {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.88rem;
    line-height: 1.45;
}
.modal-card .btn,
.modal-card button.btn {
    min-height: 44px;
    font-size: 0.95rem;
    padding: 10px 16px;
}
@media (max-height: 640px) {
    .modal-card {
        padding: 20px 18px;
    }
    .modal-card h2 { font-size: 1.05rem; margin-top: 6px; }
    .modal-card p { font-size: 0.82rem; }
}
@media (min-width: 481px) {
    .modal-card { padding: 32px 28px; max-width: 420px; }
    .modal-card h2 { font-size: 1.3rem; }
    .modal-card p { font-size: 0.92rem; }
}

/* customConfirm body — rich rows for solo/joined/savings/distance. */
.share-confirm-body {
    margin: 12px 0 4px;
    text-align: left;
}
.share-confirm-body .confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.92rem;
}
.share-confirm-body .confirm-row:last-child { border-bottom: none; }
.share-confirm-body .confirm-row span { color: var(--text-muted); }
.share-confirm-body .confirm-row b {
    color: var(--text-primary);
    font-weight: 700;
}
.share-confirm-body .confirm-row.confirm-row-savings b {
    color: #2e7d32;
}

/* ==========================================
   Spinner / Loading
   ========================================== */
.search-timer {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border-light);
    border-top-color: var(--acc-primary);
    border-radius: 50%;
    animation: spin 0.8s infinite linear;
    margin: 0 auto;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

.skeleton {
    background: linear-gradient(90deg, var(--bg-base) 25%, var(--border-subtle) 50%, var(--bg-base) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ==========================================
   Utility Classes
   ========================================== */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }

/* Section title in drawers */
.section-title {
    font-size: 1.2rem; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.section-subtitle {
    font-size: 0.85rem; color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 16px;
}

/* ==========================================
   Legal Pages
   ========================================== */
.legal-wrapper {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-white);
    z-index: 500;
    overflow-y: auto;
    color: var(--text-primary);
    line-height: 1.8;
    padding: 48px 24px 48px;
}
.legal-wrapper > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.legal-wrapper h2 { font-size: 2rem; margin-bottom: 0.25rem; color: var(--acc-primary); }
.legal-wrapper h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--acc-primary); }
.legal-wrapper p { color: var(--text-primary); margin-bottom: 0.8rem; }
.legal-wrapper ul { margin: 0.5rem 0 1rem 1.5rem; list-style: disc; padding-left: 1rem; }
.legal-wrapper li { margin-bottom: 0.4rem; display: list-item; }
.legal-wrapper a { color: var(--acc-blue); text-decoration: none; }
.legal-wrapper a:hover { text-decoration: underline; }
.legal-back { display: inline-block; margin-top: 1rem; font-weight: 600; }

/* ==========================================
   Footer
   ========================================== */
.app-footer {
    text-align: center;
    padding: 20px 16px;
    font-size: 0.78rem;
    color: var(--text-light);
}
.app-footer a { color: var(--text-light); text-decoration: none; }
.app-footer a:hover { color: var(--text-muted); }

/* ==========================================
   Responsive — Small phones (< 360px)
   ========================================== */
@media (max-width: 359px) {
    .glass-header { padding: 0 12px; height: 56px; }
    .logo { font-size: 1.3rem; }
    .user-status { font-size: 0.7rem; padding: 4px 10px; }

    .glass-drawer { padding: 16px 14px 44px; }
    .section-title { font-size: 1.05rem; }
    .section-subtitle { font-size: 0.8rem; }

    /* Tighter padding on tiny screens, but keep font-size at the 16px floor
       so iOS Safari does not auto-zoom the page on focus. */
    .beautiful-input { padding: 12px 14px; font-size: max(16px, 1rem); }
    .btn { padding: 14px 16px; font-size: 0.92rem; }

    .vehicle-selector { gap: 6px; }
    .vehicle-option { padding: 10px 8px; }
    .vehicle-option .vehicle-icon { font-size: 1.3rem; }
    .vehicle-option .vehicle-name { font-size: 0.7rem; }
    .vehicle-option .vehicle-price { font-size: 0.78rem; }

    .fare-estimate .est-price { font-size: 1.3rem; }
    .landing-wrapper h2 { font-size: 1.8rem; }
    .landing-wrapper p { font-size: 0.85rem; }

    .driver-card { padding: 12px; gap: 10px; }
    .driver-avatar { width: 42px; height: 42px; font-size: 1.1rem; }
    .driver-fare .price { font-size: 1.1rem; }

    .stats-grid { gap: 6px; }
    .stat-card { padding: 10px 8px; }
    .stat-card .stat-number { font-size: 1.1rem; }
}

/* ==========================================
   Responsive — Standard phones (360–479px)
   ========================================== */
@media (min-width: 360px) and (max-width: 479px) {
    .glass-drawer { padding: 18px 18px 48px; }
}

/* ==========================================
   Responsive — Large phones (480–767px)
   ========================================== */
@media (min-width: 480px) and (max-width: 767px) {
    .glass-drawer {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }
    .modal-card { max-width: 380px; }
}

/* ==========================================
   Responsive — Tablets (768–1023px)
   ========================================== */
@media (min-width: 768px) {
    .glass-header { padding: 0 24px; height: 68px; }

    .glass-drawer {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        max-height: 50vh;
    }

    .landing-wrapper h2 { font-size: 3rem; }
    .landing-wrapper p { font-size: 1.05rem; }
    .auth-container { max-width: 380px; }

    .modal-card { max-width: 400px; width: 70%; }

    .legal-wrapper { padding: 60px 40px; }
}

/* ==========================================
   Responsive — Desktop (1024px+)
   ========================================== */
@media (min-width: 1024px) {
    .glass-header { padding: 0 32px; }

    .glass-drawer {
        max-width: 420px;
        padding: 24px 24px 32px;
    }

    .landing-wrapper h2 { font-size: 3.5rem; }
    .landing-wrapper { padding: 48px; }

    .vehicle-selector { gap: 12px; }
    .vehicle-option { padding: 16px 14px; }

    .stats-grid { gap: 12px; }
    .stat-card { padding: 18px 16px; }
    .stat-card .stat-number { font-size: 1.5rem; }
}

/* ==========================================
   Responsive — Wide desktop (1440px+)
   ========================================== */
@media (min-width: 1440px) {
    .glass-drawer {
        max-width: 440px;
    }
}

/* ==========================================
   Safe area insets (notched phones)
   ========================================== */
@supports (padding-top: env(safe-area-inset-top)) {
    .glass-header {
        padding-top: env(safe-area-inset-top);
        height: calc(64px + env(safe-area-inset-top));
    }
    .page-layout {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .glass-drawer {
        padding-bottom: calc(52px + env(safe-area-inset-bottom));
    }
    .landing-wrapper {
        padding-bottom: calc(52px + env(safe-area-inset-bottom));
    }
    .home-container {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .home-footer {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }
}

/* ==========================================
   Installed PWA — extra bottom padding for gesture bars
   (safe-area-inset-bottom can be 0 on Android even with gesture nav)
   ========================================== */
@media (display-mode: standalone) {
    .glass-drawer {
        padding-bottom: max(52px, calc(52px + env(safe-area-inset-bottom, 24px)));
    }
    .landing-wrapper {
        padding-bottom: max(52px, calc(52px + env(safe-area-inset-bottom, 24px)));
    }
    .home-container {
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    }
    .home-footer {
        padding-bottom: max(28px, calc(28px + env(safe-area-inset-bottom, 16px)));
    }
    .overlay-modal .modal-card {
        margin-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    }
}

/* ==========================================
   Landscape orientation
   ========================================== */
@media (orientation: landscape) and (max-height: 500px) {
    .glass-drawer {
        max-height: 55vh;
        max-height: 55svh;
        padding: 14px 18px 40px;
    }
    .section-title { font-size: 1rem; }
    .vehicle-selector { margin: 10px 0; }
    .vehicle-option { padding: 10px 8px; }
    .btn { padding: 12px 16px; }
    .landing-wrapper h2 { font-size: 2rem; }
}

/* ==========================================
   Reduced motion preference
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   Leaflet overrides — clean up default chrome
   ========================================== */
.leaflet-control-attribution {
    font-size: 10px !important;
    background: rgba(255,255,255,0.6) !important;
    padding: 2px 6px !important;
}

/* Hide default Leaflet marker icon styles */
.osm-marker-pickup, .osm-marker-dropoff,
.osm-driver-marker, .osm-driver-track,
.osm-dest-marker {
    background: none !important;
    border: none !important;
}

/* ==========================================
   Incoming Ride Alert Pulse Animation
   ========================================== */
@keyframes rideAlertPulse {
    0%   { box-shadow: 0 0 0 0 rgba(39, 110, 241, 0.6); }
    50%  { box-shadow: 0 0 0 12px rgba(39, 110, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(39, 110, 241, 0); }
}

.ride-alert-pulse {
    animation: rideAlertPulse 1.2s ease-in-out infinite;
    border: 2px solid var(--acc-blue) !important;
}

/* #incoming-ride is the single offer overlay. When the driver is in an
   active trip, both #incoming-ride and #active-trip-drawer can be visible
   simultaneously. Elevate #incoming-ride out of the flex flow so it
   stacks on top instead of squeezing the active-trip drawer. */
#incoming-ride:not(.hidden-down) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    max-height: 70vh;
    max-height: 70dvh;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
}

/* ── Queued next-ride inline status (compact badge inside active-trip-drawer) ── */
.queued-ride-status {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(39, 110, 241, 0.06);
    border: 1.5px solid var(--acc-blue);
    border-radius: var(--radius-md);
}
.queued-ride-status.hidden { display: none !important; }
.queued-next-pickup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 4px;
    margin-top: 8px;
    border-top: 1px dashed rgba(39, 110, 241, 0.18);
}
.queued-next-pickup .label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.queued-next-pickup .value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.queued-status-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.queued-status-label {
    flex: 1;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--acc-blue);
}
.queued-status-close {
    background: transparent; border: none;
    color: var(--text-muted); cursor: pointer;
    padding: 4px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.queued-status-close:hover { background: rgba(0,0,0,0.06); }
.queued-ride-confirmed {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 0.88rem; color: var(--acc-green);
    padding: 8px 0 0;
}
.queued-ride-confirmed.hidden { display: none; }
.queued-ride-awaiting {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 0.88rem; color: var(--acc-orange);
    padding: 8px 0 0;
}
.queued-ride-awaiting.hidden { display: none; }

/* ── Queued ride modal: pickup highlight + map ── */
.queued-pickup-highlight {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 12px;
    background: rgba(76, 175, 80, 0.08);
    border: 1.5px solid rgba(76, 175, 80, 0.35);
    border-radius: var(--radius-md);
}
.queued-pickup-highlight .location-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: #4CAF50;
}
.queued-pickup-highlight span {
    font-size: 1rem; font-weight: 700; color: var(--text-primary);
    line-height: 1.3;
}
#queued-map { z-index: 0; }

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

/* ── Stale driver location warning (passenger tracking drawer) ── */
.stale-driver-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--acc-danger-light);
    border: 1px solid rgba(225, 25, 0, 0.2);
    border-radius: var(--radius-md);
    animation: slideUpFade 0.3s ease-out;
}
.stale-driver-banner.hidden { display: none; }
.stale-driver-icon {
    font-size: 20px;
    color: var(--acc-danger);
    flex-shrink: 0;
}
.stale-driver-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--acc-danger);
    line-height: 1.3;
}

/* ==========================================
   Home Page — Role Selection & Dashboard
   ========================================== */

/* ── Home-page shell ──
 *
 * The home page used to render inside a fixed-position .home-container
 * overlay (100dvh, internal overflow). That fought every layout we put
 * inside it (mobile chrome collapse, sticky anchors, scroll math) and
 * has been retired. Today the home page is a normal document: the
 * sticky <header>, the <main class="page-shell">, and the <footer> are
 * siblings; the body scrolls.
 *
 * Subpages don't use .page-shell — they override {% block content %}
 * and bring their own layout.
 */
.page-shell {
    display: block;
    min-height: 100vh;
}

/* ── Sticky home header ── */
.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 50;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.home-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.home-logo-mark {
    display: block;
    height: 36px;
    width: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.home-logo-accent {
    color: var(--acc-primary);
}

/* Subpage glass-header brand mark (replaces the old panorama image). */
.header-logo-mark {
    display: block;
    height: 24px;
    width: auto;
    padding: 0 4px;
    user-select: none;
    -webkit-user-drag: none;
}

.menu-toggle {
    width: 44px; height: 44px;
    border: none;
    background: var(--bg-base);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.menu-toggle:hover {
    background: var(--border-light);
}
.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: all var(--transition-fast);
}
.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* .home-body has been retired alongside .home-container. The home page
 * uses normal document flow now; each top-level state under
 * .page-shell owns its own horizontal padding. */

/* ── Login forms (passenger / driver OTP screens) ──
 *
 * These are top-level sections under .page-shell. The viewport-fill
 * is now done with min-height (dvh accounts for mobile chrome) rather
 * than flex:1 from a now-deleted parent. The vertical centering of
 * the inner form continues to work via the same flex column.
 */
.home-welcome {
    min-height: calc(100dvh - 64px);   /* viewport minus sticky header */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
}

.home-welcome .home-tagline {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

.home-welcome .home-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 36px;
    max-width: 280px;
}

/* ── Role cards + home-divider styles for the GUEST landing have been
 * moved out of this file. The new landing lives at
 *     pwa_frontend/static/css/landing.css
 * under a BEM `.landing__*` namespace. Anything reaching for
 * `.role-card` / `.role-cards` / `.home-divider` is touching dead
 * markup — delete it, don't restyle here. */

/* ── Passenger Home Dashboard (logged-in state) ──
 *
 * Top-level under .page-shell. Same visual stack of CTAs as before,
 * just no longer relying on flex:1 from the deleted .home-body.
 */
.home-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px 48px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}

.home-greeting {
    margin-bottom: 4px;
}
.home-greeting h2 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.home-greeting p {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* ── Banner Ad ── */
.banner-ad {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #d32f2f 0%, #1a1a2e 100%);
    min-height: 120px;
    display: flex;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    transition: all var(--transition-smooth);
}

/* Missed-event banner — surfaced on home when a trip ended while the user
   was away (P1-7). Distinct visual from promo banner above. */
.missed-event-banner {
    width: 100%;
    border-radius: var(--radius-md);
    background: #fff8e1;
    border: 1px solid #f6c453;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.missed-event-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f6c453;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.missed-event-icon .material-symbols-rounded { font-size: 22px; }
.missed-event-text { flex: 1; min-width: 0; }
.missed-event-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1a2e;
    margin-bottom: 2px;
}
.missed-event-desc {
    font-size: 0.82rem;
    color: #4a4a5e;
    line-height: 1.35;
}
.missed-event-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #6b6b7a;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.missed-event-close:hover { background: rgba(0,0,0,0.06); }
.missed-event-close .material-symbols-rounded { font-size: 20px; }
.banner-ad:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-md);
}
.banner-ad-content {
    position: relative;
    z-index: 2;
    color: #fff;
}
.banner-ad-content .banner-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
    margin-bottom: 6px;
}
.banner-ad-content .banner-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}
.banner-ad-content .banner-desc {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 4px;
    font-weight: 400;
}
.banner-ad-emoji {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    opacity: 0.3;
    z-index: 1;
}

/* ── CTA Section ── */
.home-cta-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-cta {
    border: none;
    border-radius: var(--radius-md);
    padding: 20px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--transition-fast);
    letter-spacing: -0.2px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.home-cta:active {
    transform: scale(0.97);
}

.home-cta-primary {
    background: var(--text-primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.home-cta-primary:hover {
    background: #222;
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}

.home-cta-secondary {
    background: var(--bg-base);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.home-cta-secondary:hover {
    background: var(--bg-white);
    border-color: var(--text-muted);
}

.cta-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cta-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.home-cta-primary .cta-icon {
    background: rgba(255,255,255,0.15);
}
.home-cta-secondary .cta-icon {
    background: var(--bg-white);
}

.cta-text .cta-title {
    font-weight: 700;
    font-size: 1rem;
}
.cta-text .cta-desc {
    font-size: 0.75rem;
    opacity: 0.7;
    font-weight: 400;
    margin-top: 1px;
}

.cta-arrow {
    font-size: 1.2rem;
    opacity: 0.5;
}

/* ── Slide-out Menu ── */
.home-menu-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-smooth);
}
.home-menu-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.home-menu {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 100%;
    background: var(--bg-white);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform var(--transition-spring);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}
.home-menu.open {
    transform: translateX(0);
}

.menu-header {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.menu-header .menu-user-name {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.menu-header .menu-user-phone {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Lifetime stats panel directly under the user header. Two side-by-side
   cards: total saved (MKD) and finished trips. Values are integers
   (the API rounds; the FE just renders). */
.menu-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 20px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.menu-stat {
    background: linear-gradient(135deg, #fff5f7, #fde7ec);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
}
.menu-stat-value {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--acc-primary, #1aa84a);
    font-variant-numeric: tabular-nums;
}
.menu-stat-label {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.menu-nav {
    flex: 1;
    padding: 12px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.menu-item:hover {
    background: var(--bg-base);
}
.menu-item-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.menu-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-subtle);
}
.menu-footer-links {
    display: flex;
    gap: 16px;
}
.menu-footer-links a {
    font-size: 0.75rem;
    color: var(--text-light);
    text-decoration: none;
}
.menu-footer-links a:hover {
    color: var(--text-muted);
}

/* ── Driver Menu: hamburger in glass-header ── */
.glass-header .menu-toggle {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    pointer-events: auto;
}

/* ── Driver page: solid top bar (Google-Docs-style) above the map ──
   Without this the floating gradient header overlaps the Leaflet zoom
   controls (top-left of the map) and the logo text bleeds into the
   map tiles. Scoped to .driver-page so the passenger/home pages keep
   their translucent glass look. */
body.driver-page .glass-header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    justify-content: center;
}
body.driver-page .glass-header .logo {
    font-size: 1.25rem;
    margin: 0;
}
body.driver-page .glass-header .user-status {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
/* Standalone hamburger pinned to the top-left of the viewport, above the
   bar. Kept outside .glass-header so its click binding and stacking are
   independent of the header's pointer-events:none + children:auto trick. */
body.driver-page > #driver-menu-toggle,
body.driver-page #driver-menu-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 110;
    width: 36px; height: 36px;
    background: transparent;
    border-radius: 50%;
    gap: 4px;
}
body.driver-page #driver-menu-toggle:hover,
body.driver-page #driver-menu-toggle:active {
    background: var(--bg-base);
}
body.driver-page #driver-menu-toggle span {
    width: 18px;
    height: 2px;
    background: var(--text-primary);
}
@media (min-width: 768px) {
    body.driver-page #driver-menu-toggle { top: 16px; }
}
/* Push the map (and its Leaflet controls) below the solid bar so
   zoom buttons and the logo no longer overlap. */
body.driver-page .page-layout {
    padding-top: 64px;
}
@media (max-width: 359px) {
    body.driver-page .page-layout { padding-top: 56px; }
}
@media (min-width: 768px) {
    body.driver-page .page-layout { padding-top: 68px; }
}

/* ── Passenger page: same solid bar as driver ── */
body.passenger-page .glass-header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    justify-content: center;
}
body.passenger-page .glass-header .logo {
    font-size: 1.25rem;
    margin: 0;
}
body.passenger-page .glass-header .user-status {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
body.passenger-page #passenger-menu-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 110;
    width: 36px; height: 36px;
    background: transparent;
    border-radius: 50%;
    gap: 4px;
}
body.passenger-page #passenger-menu-toggle:hover,
body.passenger-page #passenger-menu-toggle:active {
    background: var(--bg-base);
}
body.passenger-page #passenger-menu-toggle span {
    width: 18px;
    height: 2px;
    background: var(--text-primary);
}
@media (min-width: 768px) {
    body.passenger-page #passenger-menu-toggle { top: 16px; }
}
/* Top padding must track the notch — .glass-header itself grows by
   env(safe-area-inset-top) on notched devices (see @supports block above),
   so the layout's top inset has to grow with it or the flex content gets
   pinned under the header. The env(... , 0px) form is a no-op on devices
   without a notch. */
body.passenger-page .page-layout {
    padding-top: 64px;
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
}
@media (max-width: 359px) {
    body.passenger-page .page-layout {
        padding-top: 56px;
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }
}
@media (min-width: 768px) {
    body.passenger-page .page-layout {
        padding-top: 68px;
        padding-top: calc(68px + env(safe-area-inset-top, 0px));
    }
}

/* ── Trip History Overlay ── */
.trip-history-panel {
    background: var(--bg-white);
    width: 92%; max-width: 420px;
    max-height: 85vh;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.trip-history-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--border-subtle);
}
.trip-history-header h2 {
    font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0;
}
.trip-history-close {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--text-muted); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.trip-history-close:hover { background: var(--bg-base); }
.trip-history-list {
    flex: 1; overflow-y: auto; padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
}
.trip-history-empty {
    text-align: center; color: var(--text-muted); padding: 32px 0;
    font-size: 0.9rem; font-weight: 500;
}
.trip-card {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: 14px; margin-bottom: 10px;
}
.trip-card-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.trip-date { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.trip-status {
    font-size: 0.75rem; font-weight: 600; padding: 2px 8px;
    border-radius: 20px;
}
.trip-status-completed { background: rgba(76,175,80,.1); color: #2e7d32; }
.trip-status-cancelled { background: rgba(244,67,54,.1); color: #c62828; }
.trip-status-noshow { background: rgba(255,152,0,.1); color: #e65100; }
.trip-locations { margin-bottom: 10px; }
.trip-loc-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 0.88rem; color: var(--text-primary);
}
.trip-loc-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.trip-loc-dot.pickup-dot { background: var(--acc-primary); }
.trip-loc-dot.dropoff-dot { background: var(--acc-blue); }
.trip-card-bottom {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.82rem; color: var(--text-muted);
    padding-top: 8px; border-top: 1px solid var(--border-subtle);
}
.trip-fare { font-weight: 700; color: var(--text-primary); }
.trip-taxi-id { font-weight: 600; color: var(--text-primary); }
.trip-history-pager {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--border-subtle);
}
.trip-history-pager span {
    font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
}

/* ── Notification Toggle Switch ── */
.notif-switch {
    position: relative; width: 44px; height: 24px; flex-shrink: 0;
}
.notif-switch input { opacity: 0; width: 0; height: 0; }
.notif-slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-light); border-radius: 24px;
    cursor: pointer; transition: background 0.2s;
}
.notif-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform 0.2s;
}
.notif-switch input:checked + .notif-slider { background: var(--acc-blue); }
.notif-switch input:checked + .notif-slider::before { transform: translateX(20px); }

/* ── Home Page Footer ──
 * Normal block at the end of body; safe-area padding accounts for
 * iOS home indicator / Android nav bar.
 */
.home-footer {
    text-align: center;
    padding: 28px 16px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    font-size: 0.75rem;
    color: var(--text-light);
    background: var(--bg-white);
    border-top: 1px solid rgba(0,0,0,0.04);
}
.home-footer a {
    color: var(--text-light);
    text-decoration: none;
}
.home-footer a:hover {
    color: var(--text-muted);
}

/* ── Quick Access Cards ── */
.quick-access {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.quick-card {
    background: var(--bg-base);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
}
.quick-card:hover {
    border-color: var(--border-light);
    background: var(--bg-white);
}
.quick-card-icon {
    font-size: 1.6rem;
    margin-bottom: 6px;
}
.quick-card-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Responsive adjustments ── */
@media (min-width: 768px) {
    .home-body {
        max-width: 480px;
        margin: 0 auto;
        padding: 0 24px 40px;
    }
    .home-welcome .home-tagline {
        font-size: 2.6rem;
    }
    .role-cards {
        max-width: 440px;
    }
    .home-menu {
        width: 320px;
    }
}

@media (min-width: 1024px) {
    .home-body {
        max-width: 520px;
    }
    .home-welcome .home-tagline {
        font-size: 3rem;
    }
}

/* ── Login Form Components ── */
.login-back-btn {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 12px;
    transition: color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.login-back-btn:hover {
    color: var(--text-primary);
}

.login-error {
    text-align: center;
    color: var(--acc-danger);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--acc-danger-light);
    border-radius: var(--radius-sm);
}

/* ==========================================
   Material Symbols — Global Styling
   ========================================== */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    /* Rounded + filled for premium look */
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Icon-size overrides for landing role / feature tiles live in landing.css. */

.menu-item-icon .material-symbols-rounded {
    font-size: 20px;
    color: var(--text-secondary);
}

.cta-icon .material-symbols-rounded {
    font-size: 22px;
}

.cta-arrow .material-symbols-rounded {
    font-size: 20px;
}

.quick-card-icon .material-symbols-rounded {
    font-size: 28px;
    color: var(--acc-primary);
}

.banner-ad-emoji .material-symbols-rounded {
    font-size: 56px;
    color: rgba(255,255,255,0.3);
}

/* ── Login Hero Icon ── */
.login-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.login-hero-icon .material-symbols-rounded {
    font-size: 32px;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.login-hero-icon.passenger-bg {
    background: linear-gradient(135deg, rgba(211,47,47,0.12) 0%, rgba(211,47,47,0.04) 100%);
}
.login-hero-icon.passenger-bg .material-symbols-rounded {
    color: var(--acc-primary);
}
.login-hero-icon.driver-bg {
    background: linear-gradient(135deg, rgba(39,110,241,0.12) 0%, rgba(39,110,241,0.04) 100%);
}
.login-hero-icon.driver-bg .material-symbols-rounded {
    color: var(--acc-blue);
}

/* ── Dispatch refactor additions ───────────────────────────── */

/* Tier-3 "queued offer" chip — signals to a busy driver that they were
   offered this ride because they're within the Tier-3 pickup radius. */
.queued-ride-tier3-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    background: var(--acc-orange, #ff6937);
    color: #fff;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

/* Ghost-state recovery toast — confirms to the driver/passenger that the
   UI state was restored, not re-issued. */
.ghost-recovery-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.92);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 5000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    animation: ghost-toast-fade 2.5s ease forwards;
}
@keyframes ghost-toast-fade {
    0%   { opacity: 0; transform: translate(-50%, -10px); }
    10%  { opacity: 1; transform: translate(-50%, 0); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -10px); }
}
/* ====================================================================
   RIDESHARE — share/carpool flow on /ride/.
   Additive only. Reuses existing tokens (.btn-*, .glass-drawer,
   .overlay-modal, --acc-primary, --border-light, etc.). Markup gated by
   {% if rideshare_pwa_enabled %} — these styles are only exercised when
   the toggle renders.
   ==================================================================== */

/* ── Segmented mode toggle (Solo / Сподели) ────────────────────── */
.share-mode-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #eef0f3;
    border-radius: 999px;
    padding: 4px;
    margin: 6px 0 14px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}
.share-mode-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: color .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.share-mode-btn:active { transform: scale(.97); }
.share-mode-btn .material-symbols-rounded {
    font-size: 19px;
    transition: color .2s ease;
}
.share-mode-btn.share-mode-active {
    color: #fff;
    background: linear-gradient(135deg, var(--acc-primary), var(--acc-primary-hover));
    box-shadow: 0 4px 14px var(--acc-primary-glow), 0 1px 2px rgba(0, 0, 0, .08);
}
.share-mode-btn.share-mode-active .material-symbols-rounded { color: #fff; }

/* ── Pill tab strip inside the share drawer ───────────────────── */
.share-tab-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: #f5f6f8;
    border-radius: 12px;
    padding: 4px;
    margin: 4px 0 14px;
}
.share-tab {
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.share-tab:active { transform: scale(.97); }
.share-tab.share-tab-active {
    background: #fff;
    color: var(--acc-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.share-pane { padding: 4px 0; animation: share-fade-in .2s ease; }
@keyframes share-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.share-women-only {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fff5f7, #fde7ec);
    border: 1px solid #f5d6dd;
    border-radius: 12px;
    font-size: 0.86rem;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.share-women-only:active { transform: scale(.99); }
.share-women-only input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--acc-primary);
}
.share-women-only span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.share-women-only .material-symbols-rounded { font-size: 18px; color: var(--acc-primary); }

.share-route-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 8px;
    background: #fafbfc;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    margin: 10px 0 14px;
}
.share-route-summary .route-stat {
    text-align: center;
}
.share-route-summary .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #1a1a1a);
    display: block;
}
.share-route-summary .stat-label {
    font-size: 0.7rem;
    color: #888;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.share-create-hint {
    font-size: 0.78rem;
    color: #888;
    margin: 10px 2px 0;
    text-align: center;
}

.share-peer-list {
    display: flex;
    gap: 8px;
    margin: 10px 0 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.share-peer-list::-webkit-scrollbar { display: none; }
.share-peer-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.share-peer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acc-primary);
    box-shadow: 0 0 0 3px var(--acc-primary-glow);
    animation: share-pulse 1.6s ease infinite;
}
@keyframes share-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--acc-primary-glow); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ── Connected drawer: co-rider profile cards ─────────────────── */
.share-peer-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 12px;
}
/* Override the .share-peer-card pill style for the connected drawer:
   the inner DOM here is a multi-line card (avatar + name + sub +
   right-aligned chat icon) and needs a full-width rounded card, not
   a horizontal pill. */
.share-peer-card-list .share-peer-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border-light);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: normal;
}
.share-peer-card-chat {
    position: relative;
    margin-left: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: #fff;
    color: var(--acc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.share-peer-card-chat:hover { background: var(--bg-base); }
.share-peer-card-chat .material-symbols-rounded {
    font-size: 22px;
}

/* Handoff status block — mirror the connected peer card aesthetic. */
.share-handoff-status {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    margin: 8px 0 12px;
}
.share-handoff-status.hidden { display: none; }
.share-handoff-driver-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.share-handoff-driver-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.share-handoff-driver-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.share-handoff-driver-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text, #1a1a1a);
}
.share-handoff-driver-plate {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.share-handoff-driver-taxi-id {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.share-handoff-text {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin-top: 4px;
}
/* BookingShareTrip drawer — two-option chooser between "now" and
   "schedule for later". Buttons stack vertically with comfortable
   tap targets; the schedule sub-section is hidden until the user
   taps "Закажи за подоцна". */
.booking-share-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 10px;
}
.booking-share-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    font-weight: 600;
}
.booking-share-schedule {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: #fafafa;
}
.booking-share-schedule.hidden {
    display: none;
}
.booking-share-schedule label {
    display: block;
    margin-bottom: 6px;
    color: #4b5563;
    font-size: 0.85rem;
}

.share-peer-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fafbfc, #f5f6f8);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
.share-peer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acc-primary), var(--acc-primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.share-peer-meta { flex: 1; min-width: 0; }
.share-peer-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-peer-sub {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
}

/* ── Connected drawer: ordered stop list (A, B, C, D) ─────────── */
.share-stops-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: #fafbfc;
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
.share-stop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-light);
}
.share-stop-row:last-child { border-bottom: 0; }
.share-stop-row-mine .share-stop-meta { color: var(--acc-primary); }
/* Stop-letter circles in the connected drawer's stop list. The map
   already paints colored A/B/C/D pins, so the inline list uses a
   neutral white pill with black centered letters and a thin colored
   border to indicate pickup vs dropoff. Less visual noise next to
   addresses while still keeping the role cue. */
.share-stop-letter {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
    border: 2px solid #d1d5db;  /* default — overridden below */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    box-sizing: border-box;
}
/* JS emits ``share-stop-letter pickup`` / ``share-stop-letter dropoff``
   (space-separated). The legacy ``-pickup`` / ``-dropoff`` BEM rules
   below stay for any future code that might use them; the matched
   ones are the modifier classes the JS actually outputs today. */
.share-stop-letter.pickup,
.share-stop-letter-pickup {
    border-color: #43a047;
}
.share-stop-letter.dropoff,
.share-stop-letter-dropoff {
    border-color: #e53935;
}

/* Pill-tag variant of a map marker — used for the OTHER passenger's
   pickup in the match-found preview so the pin reads "Патник Vancho"
   instead of a cryptic "H" letter. Anchored bottom-left of the lat/lng
   point (iconAnchor [0, 12] in JS) so the tag pokes up-right from the
   actual coordinate, leaving the geo-point near the pill's base. */
.share-stop-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #fff;
    color: #1a1a1a;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    border: 2px solid #d1d5db;
    white-space: nowrap;
    transform: translateY(-100%);  /* lift above the geo-point */
}
.share-stop-pill.pickup  { border-color: #43a047; }
.share-stop-pill.dropoff { border-color: #e53935; }
/* Leaflet's default divIcon styles add a white box around content;
   the pill provides its own chrome, so clear the parent so it
   doesn't double-frame. */
.share-mini-map-marker--pill {
    background: transparent !important;
    border: 0 !important;
}

/* Mini-map embedded in the join-preview confirm modal. Fixed height + rounded corners so it
   sits cleanly inside the modal-card. The container is sized at
   render time; ``invalidateSize`` after the modal opens makes Leaflet
   re-measure once layout is final. */
.share-mini-map {
    height: 180px;
    width: 100%;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-light, #e5e7eb);
    background: #f3f4f6;  /* shows while tiles load */
}
.share-stop-meta { flex: 1; min-width: 0; }
.share-stop-label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.share-stop-address {
    font-size: 0.84rem;
    color: var(--text, #1a1a1a);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Small "(passenger name)" caption under each stop's address. Lets the
   user see at a glance which row is theirs vs the peer's pickup/dropoff
   in the connected drawer's stop list. */
.share-stop-who {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--acc-primary, #1aa84a);
    margin-top: 1px;
    letter-spacing: 0.02em;
}

/* Driver rideshare stop list (offer + active trip): leading naselba pill, no role label; reuses .share-stop-letter. */
.driver-rs-stops {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 4px;
}
.driver-rs-stop {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-light);
}
.driver-rs-stop:last-child { border-bottom: 0; }
/* Badge stacked above the address so neither is cropped. */
.driver-rs-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.driver-rs-hood {
    align-self: flex-start;
    max-width: 100%;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef1f5;
    color: #374151;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}
.driver-rs-addr {
    font-size: 0.88rem;
    color: var(--text, #1a1a1a);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Post-trip star rating modal (window.RatingPrompt). */
.rate-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.rate-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border-light);
}
.rate-row:last-child { border-bottom: 0; }
.rate-who { display: flex; flex-direction: column; min-width: 0; }
.rate-name {
    font-weight: 700; font-size: 0.95rem; color: var(--text, #1a1a1a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rate-role { font-size: 0.72rem; color: var(--text-muted, #6b7280); }
.rate-stars { display: flex; gap: 2px; flex-shrink: 0; }
.rate-star {
    background: none; border: 0; padding: 6px 5px; margin: 0; cursor: pointer;
    line-height: 1; font-size: 1.9rem; color: #d1d5db; transition: color .1s;
}
.rate-star.on { color: #f5a623; }
.rate-row.rated .rate-star { cursor: default; }

.share-report-fab {
    position: fixed;
    right: 16px;
    top: 76px;
    z-index: 800;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .08);
    display: grid;
    place-items: center;
    color: var(--acc-primary);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.share-report-fab:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
}
.share-report-fab:active { transform: scale(.95); }
.share-report-fab .material-symbols-rounded { font-size: 22px; }

.share-savings-card {
    text-align: center;
    padding: 20px 0 8px;
}
.share-savings-saved {
    background: linear-gradient(135deg, #fff5f7, #fde7ec);
    border-radius: 16px;
    padding: 22px 16px;
    margin-bottom: 14px;
}
.share-savings-saved .stat-value {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--acc-primary);
    letter-spacing: -.02em;
    display: block;
}
.share-savings-saved .stat-label {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 4px;
    display: block;
}
.share-savings-breakdown {
    padding: 14px 16px;
    background: #fafbfc;
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.share-rate-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}
.share-star {
    background: transparent;
    border: 0;
    font-size: 2.2rem;
    color: #d6d8de;
    padding: 4px 6px;
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.share-star:hover { transform: scale(1.1); }
.share-star.share-star-active { color: #ffb300; text-shadow: 0 2px 8px rgba(255, 179, 0, .35); }

.share-report-kinds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0;
}
.share-report-kinds label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 0.84rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.share-report-kinds label:hover { border-color: var(--acc-primary); background: #fff5f7; }
.share-report-kinds label input { accent-color: var(--acc-primary); margin: 0; }

/* ── Booking-flow CTAs (shared base + 3 variants) ────────────────────
   All three buttons (search / taxi / share) use the same base size so
   the route-preview card stacks cleanly. Variants differ only in
   color + icon tint to communicate the action.
*/
.btn.btn-cta {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
    margin-top: 10px;
}
.btn.btn-cta:first-of-type { margin-top: 0; }
.btn.btn-cta:active { transform: scale(.98); }
.btn.btn-cta .material-symbols-rounded { font-size: 22px; }
.btn.btn-cta:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Search — neutral dark slab (replaces the prior red primary). */
.btn.btn-cta-search {
    background: #1e1e22;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.btn.btn-cta-search:hover { background: #2c2c33; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }

/* Taxi — yellow cab livery, bold black text. */
.btn.btn-cta-taxi {
    background: #ffcd00;
    color: #1a1a1a;
    box-shadow: 0 4px 14px rgba(255, 205, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.btn.btn-cta-taxi:hover { background: #ffd633; box-shadow: 0 6px 18px rgba(255, 205, 0, .42), inset 0 -2px 0 rgba(0, 0, 0, .14); }
.btn.btn-cta-taxi .material-symbols-rounded { color: #1a1a1a; }

/* Share — light green, prominent (drives the new feature). */
.btn.btn-cta-share {
    background: linear-gradient(135deg, #5cb85c, #4caf50);
    color: #fff;
    box-shadow: 0 6px 18px rgba(76, 175, 80, .35);
}
.btn.btn-cta-share:hover {
    background: linear-gradient(135deg, #66c266, #57b860);
    box-shadow: 0 8px 22px rgba(76, 175, 80, .42);
}
.btn.btn-cta-share .material-symbols-rounded { color: #fff; }

/* Match-found modal — list of compatible existing trips returned by the
   server-side match filter when the user taps 'Сподели возење'. */
.share-match-list {
    max-height: 50vh;
    overflow-y: auto;
    margin: 12px 0 4px;
    padding-right: 2px;
}

/* Live diagnostic strip on the searching drawer — gives the host a
   visible signal that the WS channel is alive while waiting. Pulses
   green when connected, fades red when dropped. The event counter
   ticks on every WS message so a silent disconnect can't pretend
   to be "still waiting". */
.share-status-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 10px 0;
    background: #fafbfc;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: 0.74rem;
    color: #6b7280;
}
.share-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6d8de;
    box-shadow: 0 0 0 0 transparent;
}
.share-status-dot[data-state="open"] {
    background: #4caf50;
    animation: share-status-pulse 1.6s ease infinite;
}
.share-status-dot[data-state="closed"] {
    background: #e53935;
}
.share-status-dot[data-state="connecting"] {
    background: #ffb300;
}
@keyframes share-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, .55); }
    50%      { box-shadow: 0 0 0 5px rgba(76, 175, 80, 0); }
}
.share-status-label { font-weight: 600; }
.share-status-spacer { flex: 1; }
.share-event-flash {
    animation: share-event-flash-anim .6s ease;
}
@keyframes share-event-flash-anim {
    0%   { background: #fff5d6; }
    100% { background: #fafbfc; }
}

/* Hint paragraph under the 'Сподели возење' button on the route preview.
   Soft, secondary text — explains the value prop ("save up to 50%"). */
.route-share-hint {
    margin: 8px 4px 0;
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    line-height: 1.3;
}

.share-chat-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.share-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
}
.share-chat-head .icon-btn {
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.share-chat-head .icon-btn:hover { background: #f3f4f6; }
.share-chat-title { font-weight: 700; font-size: 1rem; }
.share-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.share-chat-bubble {
    max-width: 75%;
    /* Tightened padding so a single short message ("кај си") doesn't
       render as a tall block. Vertical padding shrinks to 4px while
       horizontal stays roomy enough for rounded corners + readable
       letter spacing. */
    padding: 4px 10px 5px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.2;
    word-wrap: break-word;
    white-space: pre-wrap;
}
/* Reset the per-line height of the body text — without this, a single
   short message inherits the bubble's 1.2 line-height which still
   leaves visible slack above and below caps. 1.15 hugs the glyphs. */
.share-chat-bubble-body {
    line-height: 1.15;
}
/* Long-ETA dual-confirm countdown line inside the chat card. The server
   timeout task is authoritative; this is the visible "Преостанато: Nс". */
.eta-confirm-timer {
    margin-top: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--acc-primary, #1aa84a);
}
.share-chat-bubble-mine {
    align-self: flex-end;
    background: var(--acc-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.share-chat-bubble-theirs {
    align-self: flex-start;
    background: #fff;
    color: var(--text, #1a1a1a);
    border: 1px solid var(--border-light);
    border-bottom-left-radius: 4px;
}
/* Sender name label rendered on top of every bubble (both sides). The
   tiny uppercase header gives a clear "who" without competing with the
   message body for visual weight. Color differs by side so the label
   stays legible against the bubble background.
   ``line-height: 1`` collapses the header's vertical box to match its
   font size — eliminates the empty band that used to sit above and
   below the name. ``margin-bottom: 1px`` keeps a hair of separation
   from the body so they don't touch. */
.share-chat-bubble-from {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
    opacity: 0.85;
}
.share-chat-bubble-mine .share-chat-bubble-from {
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
}
.share-chat-bubble-theirs .share-chat-bubble-from {
    color: var(--acc-primary, #1aa84a);
    text-align: left;
}
.share-chat-empty {
    text-align: center;
    color: #888;
    font-size: 0.85rem;
    margin: auto 0;
}
.share-chat-form {
    display: flex;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-light);
    background: #fff;
}
.share-chat-form input { flex: 1; }
.share-chat-form .btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
}
.share-chat-form .btn .material-symbols-rounded { font-size: 20px; }

/* ───────────────────────────────────────────────────────────────────
   iSplit Airport — responsive foundation
   ───────────────────────────────────────────────────────────────────
   Layout for ``/airport/``, ``/airport/agent/``, ``/airport/driver/``.

   Foundation (Layer 1): viewport overrides, design tokens, container,
   typography. Components (Layer 2): card, step, hero, pillars, status,
   modal, timeline, banner, wallet, offer, queue, agent grid, footer.
   Breakpoints (Layer 3): four cuts only — base (<360), phone (360–767),
   tablet (768–1023), desktop (≥1024). All Material-Symbols icons size
   from a small set of CSS variables; one knob retunes the whole page.

   Class names that the airport JS reads (.airport-status-pill /
   .airport-status-{state} / .airport-flight-info-ok /
   .airport-paypal-btn-text / .airport-paypal-btn-spin /
   .airport-submit-label / .airport-submit-spinner /
   .airport-request-row) are preserved verbatim.
*/


/* ── Layer 1a: html/body unlock ───────────────────────────────────── */
/* The cab/passenger flow locks ``html, body { overflow: hidden;
   height: 100vh; width: 100vw }`` so the Leaflet map fills the viewport.
   The airport page is a long scrollable form; the lock breaks it.
   The 100vw value is also the source of horizontal scroll on iOS Safari
   (100vw includes the scrollbar gutter), so we override width too. */
html.airport-page,
html.airport-page body,
body.airport-page {
    overflow: auto !important;
    height: auto !important;
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-overflow-scrolling: touch;
}
body.airport-page #app-container,
body.airport-page main {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100%;
}


/* ── Layer 1b: design tokens (kept at :root so the home-page role
   card at ``.role-card.airport-card`` can still read them). ──────── */
:root {
    --air-primary: #16324b;
    --air-primary-2: #2a5d8a;
    --air-bg: #f6f7fa;
    --air-card: #ffffff;
    --air-border: #eef0f3;
    --air-border-strong: #c2c8d0;
    --air-text: #14213d;
    --air-text-muted: #5a6c84;
    --air-success: #157a4a;
    --air-warning: #b06900;
    --air-danger: #b00020;
    --air-info: #1565c0;
    --air-radius: 14px;
    --air-radius-sm: 10px;
    --air-shadow: 0 2px 8px rgba(20, 33, 61, 0.08);
    --air-shadow-strong: 0 6px 18px rgba(20, 33, 61, 0.12);

    /* Icon sizes — single source of truth for every Material Symbol
       inside the airport page. Avoid one-off ``font-size: 22px`` rules. */
    --air-icon-xs: 14px;
    --air-icon-sm: 16px;
    --air-icon-md: 18px;
    --air-icon-lg: 22px;
    --air-icon-xl: 32px;

    /* Spacing scale — 4px rhythm. */
    --air-space-1: 4px;
    --air-space-2: 8px;
    --air-space-3: 12px;
    --air-space-4: 16px;
    --air-space-5: 20px;
    --air-space-6: 24px;

    /* Glass-header clearance: header is fixed 64px (56px <360px).
       Airport pages reserve this much top padding so the hero
       doesn't sit behind the floating chrome. */
    --air-header-clearance: calc(72px + env(safe-area-inset-top, 0px));
}


/* ── Layer 1c: page container ─────────────────────────────────────── */
.airport-page {
    padding-top: var(--air-header-clearance);
    padding-right: clamp(12px, 4vw, 32px);
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    padding-left: clamp(12px, 4vw, 32px);
    box-sizing: border-box;
    background: var(--air-bg);
    color: var(--air-text);
    /* Belt-and-braces: even if a child overflows, the page itself
       refuses to scroll horizontally. The previous ``width: 100vw``
       on body could leak; this is the second line of defence. */
    overflow-x: hidden;
}
.airport-page .hidden,
.airport-card .hidden { display: none !important; }

.airport-shell {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.airport-driver-page {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.airport-agent-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* ── Layer 2a: hero (passenger landing + driver/agent compact) ────── */
.airport-hero {
    text-align: center;
    padding: 28px 16px 12px;
}
.airport-hero-compact { padding: 20px 16px 8px; }
.airport-hero-marketing { padding: 36px 16px 20px; }
.airport-hero-icon {
    /* Scales with viewport so the icon doesn't look toy-sized on
       desktop; clamp guarantees it stays usable on 320px. */
    width: clamp(56px, 12vw, 80px);
    height: clamp(56px, 12vw, 80px);
    border-radius: 50%;
    margin: 0 auto 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--air-primary), var(--air-primary-2));
    color: #fff;
    box-shadow: 0 4px 14px rgba(22, 50, 75, 0.25);
}
.airport-hero-icon .material-symbols-rounded {
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1;
}
.airport-hero-title {
    font-size: clamp(1.3rem, 4.5vw, 1.7rem);
    font-weight: 700; margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.airport-hero-sub,
.airport-hero-tagline {
    margin: 0 auto 12px; color: var(--air-text-muted);
    font-size: 0.92rem; line-height: 1.5;
    max-width: 44ch;
}
.airport-hero-tagline { margin-bottom: 18px; }

.airport-hero-pillars {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin: 0;
}
.airport-hero-pillar {
    background: var(--air-card); border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: var(--air-shadow);
    /* Children must be allowed to shrink — without this, a long word
       inside a pillar pushes its column wider than the available
       grid track and overflows the parent. */
    min-width: 0;
}
.airport-hero-pillar .material-symbols-rounded {
    font-size: var(--air-icon-lg);
    color: var(--air-primary);
}
.airport-hero-pillar strong {
    display: block; font-size: 1.05rem; margin: 4px 0 2px;
}
.airport-hero-pillar span { font-size: 0.72rem; color: var(--air-text-muted); }


/* ── Layer 2b: card + step header ─────────────────────────────────── */
.airport-card {
    background: var(--air-card);
    border-radius: var(--air-radius);
    box-shadow: var(--air-shadow);
    margin-bottom: 14px;
    /* clip-path lets children paint their focus rings outside the
       card while preserving the rounded corners on backgrounds. */
    clip-path: inset(0 round var(--air-radius));
}
.airport-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--air-border);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--air-text);
}
.airport-card-body { padding: 16px; }
.airport-card-body.is-centered { text-align: center; }
.airport-card-body .beautiful-input { width: 100%; box-sizing: border-box; }

/* Step header: a top-stripe variant of the card header used between
   sections inside the booking card. The first one in a card has no
   top border so it doesn't double-line with the card edge. */
.airport-step-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--air-bg);
    border-top: 1px solid var(--air-border);
    border-bottom: 1px solid var(--air-border);
    font-size: 0.92rem;
    color: var(--air-text);
}
.airport-card-header:first-child,
.airport-step-header:first-child { border-top: none; }
.airport-step-num {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--air-primary); color: #fff;
    font-size: 0.78rem; font-weight: 700;
    flex-shrink: 0;
}


/* ── Layer 2c: form fields ────────────────────────────────────────── */
.airport-field-group { margin-bottom: 18px; }
.airport-field-group:last-child { margin-bottom: 0; }
.airport-field-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 600;
    color: var(--air-text); margin: 0 0 8px;
}
.airport-field-label .material-symbols-rounded {
    font-size: var(--air-icon-md);
    color: var(--air-primary);
    line-height: 1;
}
.airport-optional {
    font-weight: 400; color: var(--air-text-muted); font-size: 0.78rem;
}

/* Flight row: input fights the button for width. Without min-width: 0
   the input bottoms out at its placeholder length and the button
   wraps onto two lines on narrow viewports. */
.airport-flight-row {
    display: flex; gap: 8px; align-items: stretch;
}
.airport-flight-row .beautiful-input {
    flex: 1 1 auto;
    min-width: 0;
}
.airport-flight-btn {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.airport-flight-btn .material-symbols-rounded { font-size: var(--air-icon-md); }
.airport-flight-info {
    font-size: 0.85rem; color: var(--air-text-muted);
    margin: 6px 0 0; min-height: 1.2em;
    display: flex; align-items: center; gap: 4px;
}
.airport-flight-info-ok { color: var(--air-success); }
.airport-flight-info .material-symbols-rounded { font-size: var(--air-icon-sm); }
.airport-terminal-input { margin-top: 8px; }

.airport-name-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.airport-name-row > * { min-width: 0; }
.airport-notes-input { margin-top: 8px; }

/* Custom-styled <select>: native arrow varies by OS (invisible against
   grey input on Android). Append a chevron via inline SVG. */
.airport-zone-select {
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%2316324b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 38px;
}

.airport-fare-pill {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 6px 12px; border-radius: 999px;
    background: #e8f5ee; color: var(--air-success);
    font-size: 0.85rem; font-weight: 600;
}
.airport-fare-pill .material-symbols-rounded { font-size: var(--air-icon-sm); }

/* Time toggle: outer pill clips its children so the active pill's
   inset shadow doesn't bleed past the rounded corner. */
.airport-time-toggle {
    display: flex; gap: 0;
    background: #eef0f3; padding: 4px; border-radius: 999px;
    overflow: hidden;
}
.airport-time-pill {
    flex: 1; border: none; background: transparent;
    padding: 8px 12px; border-radius: 999px;
    font-weight: 600; font-size: 0.88rem;
    color: var(--air-text-muted); cursor: pointer;
    transition: background 0.15s, color 0.15s;
    min-width: 0;
}
.airport-time-pill.active {
    background: var(--air-card); color: var(--air-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.airport-scheduled-controls {
    margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
}
.airport-link-btn {
    align-self: flex-start;
    background: none; border: none; padding: 4px 0;
    color: var(--air-primary); font-weight: 600; font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.airport-link-btn .material-symbols-rounded { font-size: var(--air-icon-sm); }
.airport-link-btn:hover { text-decoration: underline; }
.airport-scheduled-hint {
    margin: 0; font-size: 0.78rem; color: var(--air-text-muted);
    line-height: 1.4;
}


/* ── Layer 2d: dropoff map ────────────────────────────────────────── */
.airport-map {
    height: 220px; width: 100%;
    border-radius: var(--air-radius-sm);
    border: 1px solid var(--air-border);
    margin-bottom: 8px;
    background: #e8ecf0;
}
.airport-address-input { font-size: 0.88rem; }
.airport-pin-hint {
    margin: 6px 0 0; font-size: 0.78rem; color: var(--air-text-muted);
}


/* ── Layer 2e: submit / errors ────────────────────────────────────── */
.airport-submit-btn {
    width: 100%; margin-top: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 48px; font-weight: 600;
}
.airport-submit-btn .material-symbols-rounded { font-size: var(--air-icon-lg); line-height: 1; }
.airport-submit-btn:disabled {
    background: var(--air-border);
    color: var(--air-text-muted);
    cursor: not-allowed;
}
.airport-submit-btn:disabled .material-symbols-rounded { color: var(--air-text-muted); }
.airport-submit-spinner .material-symbols-rounded { font-size: var(--air-icon-lg); }
.airport-submit-spinner.spin,
.airport-submit-spinner .spin { animation: airport-spin 1s linear infinite; }
@keyframes airport-spin { to { transform: rotate(360deg); } }

.airport-error {
    color: var(--air-danger); font-size: 0.88rem;
    margin: 10px 0 0;
    display: flex; align-items: center; gap: 6px;
}
.airport-error::before {
    /* Inline error glyph via Material Symbols — uses the same font
       so the icon color and weight track the rest of the page. */
    content: 'error';
    font-family: 'Material Symbols Rounded';
    font-size: var(--air-icon-md);
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    flex-shrink: 0;
}


/* ── Layer 2f: auth gate ──────────────────────────────────────────── */
.airport-auth-required { text-align: center; padding: 20px 8px; }
.airport-auth-icon {
    width: 56px; height: 56px; border-radius: 50%;
    margin: 0 auto 12px;
    display: grid; place-items: center;
    background: #fff3cd; color: var(--air-warning);
}
.airport-auth-icon .material-symbols-rounded {
    font-size: 28px; line-height: 1;
}
.airport-auth-required h3 { margin: 0 0 4px; }
.airport-auth-required p { color: var(--air-text-muted); margin: 0 0 16px; }


/* ── Layer 2g: pending-payment banner ─────────────────────────────── */
.airport-pending-banner {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 1px solid #f5d77a;
    border-radius: var(--air-radius);
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: var(--air-shadow);
}
.airport-pending-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--air-warning); color: #fff;
    display: grid; place-items: center; flex-shrink: 0;
}
.airport-pending-icon .material-symbols-rounded { font-size: var(--air-icon-lg); line-height: 1; }
.airport-pending-text { flex: 1; min-width: 0; }
.airport-pending-text strong { display: block; font-size: 0.95rem; color: var(--air-text); }
.airport-pending-text p { margin: 2px 0 0; font-size: 0.82rem; color: var(--air-text-muted); }
.airport-pending-btn {
    flex-shrink: 0; min-height: 40px; padding: 8px 14px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.88rem;
    white-space: nowrap;
}
.airport-pending-btn .material-symbols-rounded { font-size: var(--air-icon-md); }


/* ── Layer 2h: status drawer ──────────────────────────────────────── */
.airport-status-card .airport-card-body { padding: 16px; }
.airport-status-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.airport-status-flight {
    color: var(--air-text-muted); font-size: 0.85rem;
    min-width: 0;
}
.airport-status-pill {
    display: inline-block; padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.02em;
    background: #eef0f3; color: #333;
}
.airport-status-pill .material-symbols-rounded { font-size: var(--air-icon-sm); }
.airport-status-pending_driver { background: #fff3cd; color: var(--air-warning); }
.airport-status-matched        { background: #d4edda; color: var(--air-success); }
.airport-status-driver_arrived { background: #cce5ff; color: var(--air-info); }
.airport-status-picked_up      { background: #cce5ff; color: var(--air-info); }
.airport-status-completed      { background: #e0f2f1; color: #00695c; }
.airport-status-cancelled      { background: #f8d7da; color: var(--air-danger); }
.airport-status-no_show        { background: #f8d7da; color: var(--air-danger); }
.airport-status-expired        { background: #e2e3e5; color: #383d41; }

.airport-timeline {
    list-style: none; padding: 0; margin: 12px 0 16px;
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: relative;
}
.airport-timeline::before {
    content: ""; position: absolute;
    top: 9px; left: 8%; right: 8%; height: 2px;
    background: var(--air-border); z-index: 0;
}
.airport-timeline li {
    position: relative; z-index: 1;
    text-align: center;
    font-size: 0.7rem; color: var(--air-text-muted);
    line-height: 1.2;
    min-width: 0;
}
.airport-timeline li span {
    display: block;
    width: 18px; height: 18px; margin: 0 auto 4px;
    border-radius: 50%;
    background: var(--air-border); border: 2px solid var(--air-card);
    box-sizing: border-box;
}
.airport-timeline li.done    { color: var(--air-success); }
.airport-timeline li.done span { background: var(--air-success); }
.airport-timeline li.current { color: var(--air-primary); font-weight: 700; }
.airport-timeline li.current span {
    background: var(--air-primary);
    box-shadow: 0 0 0 4px rgba(22, 50, 75, 0.15);
}

.airport-driver-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: var(--air-radius-sm);
    background: var(--air-bg); margin-bottom: 12px;
}
.airport-driver-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--air-primary); color: #fff;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.airport-driver-icon .material-symbols-rounded { font-size: var(--air-icon-lg); line-height: 1; }
.airport-driver-meta { flex: 1; min-width: 0; }
.airport-driver-name { font-weight: 600; font-size: 0.92rem; }
.airport-driver-vehicle { color: var(--air-text-muted); font-size: 0.82rem; margin-top: 2px; }
.airport-driver-call {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--air-success); color: #fff;
    display: grid; place-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.airport-driver-call .material-symbols-rounded { font-size: var(--air-icon-lg); }

.airport-fare-line {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-top: 1px solid var(--air-border);
    color: var(--air-text-muted); font-size: 0.9rem;
}
.airport-fare-line strong { color: var(--air-text); font-size: 1.05rem; }

.airport-cancel-btn { width: 100%; margin-top: 8px; }


/* ── Layer 2i: checkout summary (passenger) ───────────────────────── */
.airport-checkout-summary {
    padding: 16px;
    border-top: 2px solid var(--air-border);
    background: var(--air-bg);
}
.airport-checkout-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    margin-bottom: 6px;
}
.airport-checkout-row strong {
    font-size: 1.2rem;
    color: var(--air-primary);
    letter-spacing: -0.01em;
}
.airport-checkout-meta {
    font-size: 0.82rem;
    color: var(--air-text-muted);
}
.airport-checkout-meta > span { min-width: 0; }
.airport-checkout-btn { margin-top: 10px; }


/* ── Layer 2j: PayPal mock modal ──────────────────────────────────── */
.airport-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 25, 40, 0.55);
    display: grid; place-items: center;
    z-index: 9000; padding: 16px;
    backdrop-filter: blur(2px);
}
.airport-modal {
    background: #fff; border-radius: 18px;
    width: 100%;
    max-width: 380px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 24px 20px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    animation: air-modal-in 0.18s ease;
}
@keyframes air-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.airport-modal-close {
    position: absolute; top: 8px; right: 8px;
    background: transparent; border: none; cursor: pointer;
    color: var(--air-text-muted);
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
}
.airport-modal-close .material-symbols-rounded { font-size: var(--air-icon-lg); }
.airport-modal-close:hover { background: var(--air-bg); }
.airport-paypal-modal { text-align: left; }
.airport-paypal-brand {
    display: flex; align-items: center; gap: 8px;
    /* Reserve space for the close button (top-right, 36px wide + 8px
       inset = 44px) so the PayPal logo never collides with it. */
    padding-right: 44px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.airport-paypal-logo {
    font-family: -apple-system, system-ui, sans-serif;
    font-style: italic; font-weight: 800;
    font-size: 1.5rem;
    background: linear-gradient(90deg, #003087 0%, #009cde 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}
.airport-paypal-mock-tag {
    display: inline-block;
    padding: 2px 6px; border-radius: 4px;
    background: #fff3cd; color: var(--air-warning);
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.airport-paypal-amount {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px; flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px solid var(--air-border);
    margin-bottom: 14px;
}
.airport-paypal-amount span { color: var(--air-text-muted); font-size: 0.85rem; }
.airport-paypal-amount strong {
    /* Avoid the €30,00 EUR strong overflowing on 320px viewports. */
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    white-space: nowrap;
}
.airport-paypal-desc {
    color: var(--air-text-muted); font-size: 0.85rem;
    margin-bottom: 18px; line-height: 1.5;
}
.airport-paypal-desc small {
    display: block; color: var(--air-text); font-weight: 600;
    margin-top: 4px;
}
.airport-paypal-btn {
    width: 100%; min-height: 48px;
    background: linear-gradient(135deg, #ffc439 0%, #f9b32d 100%);
    color: #003087; border: none; border-radius: 999px;
    font-weight: 700; font-size: 1rem;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
}
.airport-paypal-btn:hover { box-shadow: 0 6px 16px rgba(255, 196, 57, 0.4); }
.airport-paypal-btn:active { transform: translateY(1px); }
.airport-paypal-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.airport-paypal-btn-spin .material-symbols-rounded { color: #003087; font-size: var(--air-icon-lg); }
.airport-paypal-success {
    margin-top: 14px; padding: 14px; border-radius: var(--air-radius-sm);
    background: #e8f5ee; color: var(--air-success);
    text-align: center;
}
.airport-paypal-success-icon .material-symbols-rounded {
    font-size: 36px;
    color: var(--air-success);
    line-height: 1;
}
.airport-paypal-success-title { font-weight: 700; margin-top: 4px; }
.airport-paypal-success-id {
    font-family: 'SF Mono', 'Menlo', monospace; font-size: 0.78rem;
    color: var(--air-text-muted); margin-top: 4px;
    word-break: break-all;
}
.airport-paypal-disclaimer {
    margin: 14px 0 0; font-size: 0.72rem; color: var(--air-text-muted);
    text-align: center; font-style: italic;
}


/* ── Layer 2k: status drawer details + wallet row ─────────────────── */
.airport-detail-block {
    margin: 14px 0; padding: 12px;
    border-radius: var(--air-radius-sm);
    background: var(--air-bg);
}
.airport-detail-block summary {
    cursor: pointer; font-weight: 600; color: var(--air-primary);
    display: flex; align-items: center; gap: 6px;
}
.airport-detail-block summary .material-symbols-rounded { font-size: var(--air-icon-md); }
.airport-detail-list {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 6px 12px;
    font-size: 0.85rem;
}
.airport-detail-list dt { color: var(--air-text-muted); }
.airport-detail-list dd {
    margin: 0; color: var(--air-text); font-weight: 500;
    /* Long addresses can push the dd column wider than its track on
       narrow viewports without ``min-width: 0``. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.airport-wallet-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; margin: 12px 0;
}
.airport-wallet-btn {
    padding: 10px 8px;
    border-radius: var(--air-radius-sm);
    border: 1px solid var(--air-border);
    background: var(--air-card); color: var(--air-text);
    font-weight: 600; font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; min-height: 44px;
    transition: background 0.1s;
    min-width: 0;
}
.airport-wallet-btn:hover { background: var(--air-bg); }
.airport-wallet-btn .material-symbols-rounded { font-size: var(--air-icon-md); }
.airport-wallet-apple  { background: #000; color: #fff; border-color: #000; }
.airport-wallet-apple:hover { background: #222; }
.airport-wallet-google { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.airport-wallet-google:hover { background: #1665c8; }


/* ── Layer 2l: footer links ───────────────────────────────────────── */
.airport-footer-links {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 8px;
    font-size: 0.85rem;
}
.airport-footer-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--air-text-muted); text-decoration: none;
    padding: 8px 12px;
    min-height: 40px;
    border-radius: 999px;
}
.airport-footer-link:hover {
    color: var(--air-primary);
    background: rgba(22, 50, 75, 0.04);
}
.airport-footer-link .material-symbols-rounded { font-size: var(--air-icon-sm); }
.airport-footer-sep {
    color: var(--air-border-strong);
    user-select: none;
}


/* ── Layer 2m: driver flow ────────────────────────────────────────── */
.airport-driver-state-text {
    text-align: center; color: var(--air-text-muted);
    margin-bottom: 12px; font-size: 0.92rem;
}
.airport-driver-position-card {
    text-align: center; padding: 24px 16px;
    border-radius: 12px; background: var(--air-bg);
    margin-bottom: 14px;
}
.airport-driver-position-label {
    font-size: 0.78rem; color: var(--air-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
#airport-driver-position {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    font-weight: 800; line-height: 1;
    color: var(--air-primary);
    margin: 6px 0 8px;
}
.airport-driver-position-sub {
    color: var(--air-text-muted); font-size: 0.85rem;
}

.airport-bridge-card {
    background: linear-gradient(135deg, #f0f6ff, #e6efff);
}
.airport-bridge-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px; font-size: 0.95rem;
}
.airport-bridge-header .material-symbols-rounded {
    font-size: var(--air-icon-lg); color: var(--air-primary);
}
.airport-bridge-card p {
    color: var(--air-text-muted); font-size: 0.88rem;
    margin: 0 0 14px; line-height: 1.5;
}

.airport-offer-card {
    border: 2px solid var(--air-primary);
    animation: air-offer-pulse 2s ease-in-out 2;
}
@keyframes air-offer-pulse {
    0%, 100% { box-shadow: var(--air-shadow); }
    50%      { box-shadow: 0 0 0 6px rgba(22, 50, 75, 0.18); }
}
.airport-offer-header {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--air-primary), var(--air-primary-2));
    color: #fff;
    border-bottom: none;
}
.airport-offer-header .material-symbols-rounded { font-size: var(--air-icon-lg); }
.airport-offer-details {
    display: grid;
    /* Cap the dt column so long Cyrillic labels don't push dd to ~30px
       wide on narrow viewports. ``minmax(0, ...)`` lets the dd column
       shrink to its content + line-wrap. */
    grid-template-columns: minmax(0, min(120px, 35%)) minmax(0, 1fr);
    gap: 8px 14px; font-size: 0.9rem; margin: 0 0 16px;
}
.airport-offer-details dt {
    color: var(--air-text-muted); font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
}
.airport-offer-details dd {
    margin: 0; color: var(--air-text);
    min-width: 0;
    overflow-wrap: anywhere;
}
.airport-offer-fare {
    color: var(--air-success); font-weight: 700; font-size: 1.05rem;
}
.airport-offer-actions {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px;
}
.airport-offer-pass-btn,
.airport-offer-accept-btn {
    min-height: 48px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
}
.airport-offer-accept-btn {
    background: var(--air-success);
    border-color: var(--air-success);
    color: #fff;
}
.airport-offer-accept-btn:hover { background: #0e6038; }
.airport-offer-pass-btn .material-symbols-rounded,
.airport-offer-accept-btn .material-symbols-rounded { font-size: var(--air-icon-md); }


/* ── Layer 2n: agent flow ─────────────────────────────────────────── */
.airport-agent-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    align-items: start;
}
.airport-agent-grid > * { min-width: 0; }

.airport-requests-list { list-style: none; margin: 0; padding: 0; }
.airport-request-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--air-border);
    display: flex; flex-direction: column; gap: 6px;
}
.airport-request-row:last-child { border-bottom: none; }
.airport-request-meta {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-size: 0.9rem;
}
.airport-request-pax {
    font-size: 0.82rem; color: var(--air-text-muted);
    overflow-wrap: anywhere;
}

.airport-queue-table {
    width: 100%; border-collapse: collapse; font-size: 0.9rem;
    table-layout: fixed;
}
.airport-queue-table th,
.airport-queue-table td {
    text-align: left; padding: 8px;
    border-bottom: 1px solid var(--air-border);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.airport-queue-table th {
    color: var(--air-text-muted); font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.airport-empty {
    text-align: center; color: var(--air-text-muted);
    padding: 18px 0; font-size: 0.88rem;
}

.airport-auth-gate { max-width: 420px; margin: 32px auto; }
.airport-auth-inner { text-align: center; }
.airport-auth-inner h2 { margin: 0 0 4px; }
.airport-auth-inner p  { color: var(--air-text-muted); margin: 0 0 14px; }
.airport-help-block {
    margin-top: 18px; padding: 12px;
    border-radius: var(--air-radius-sm);
    background: var(--air-bg); text-align: left;
    font-size: 0.85rem; color: var(--air-text-muted);
}
.airport-help-block summary {
    cursor: pointer; font-weight: 600; color: var(--air-primary);
}
.airport-help-block p { margin: 8px 0; }
.airport-help-block pre {
    background: #fff; padding: 8px; border-radius: 6px;
    font-size: 0.78rem; overflow-x: auto; margin: 0;
}


/* ── Layer 2o: utilities used in templates (replaces inline style="") */
.airport-stack-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.airport-mb-md { margin-bottom: 16px; }


/* ── Misc / cross-page reuses ─────────────────────────────────────── */
.btn-small { padding: 4px 10px; font-size: 0.8rem; }

/* The home-page airport role card is gone — replaced by a full-width
 * `.landing__airport-card` defined in landing.css. The airport
 * sub-pages (driver / agent / passenger) keep their own `.airport-card`
 * styles further up in this file; do NOT confuse them with the
 * deleted `.role-card.airport-card` from the old home page. */


/* ── Layer 3: breakpoints ─────────────────────────────────────────── */

/* Base (≤359px) — iPhone SE width and smaller. Stack everything. */
@media (max-width: 359px) {
    :root { --air-header-clearance: calc(64px + env(safe-area-inset-top, 0px)); }

    .airport-flight-row { flex-direction: column; align-items: stretch; }
    .airport-flight-btn { width: 100%; justify-content: center; }
    .airport-name-row { grid-template-columns: 1fr; gap: 10px; }

    /* Hero pillars: stack to 1-column chip strip with left-aligned text. */
    .airport-hero-pillars { grid-template-columns: 1fr; gap: 8px; }
    .airport-hero-pillar {
        display: flex; align-items: center; justify-content: flex-start;
        text-align: left;
        gap: 10px; padding: 10px 12px;
    }
    .airport-hero-pillar strong { margin: 0; font-size: 1rem; }
    .airport-hero-pillar span { font-size: 0.78rem; }
    .airport-hero-pillar .material-symbols-rounded { font-size: var(--air-icon-xl); }

    /* Timeline: tighten so the 5 labels stay in their dot tracks. */
    .airport-timeline li { font-size: 0.62rem; line-height: 1.15; }
    .airport-timeline li span { width: 16px; height: 16px; }
    .airport-timeline::before { top: 8px; }
}

/* Phone (<420px) — wallet row stacks 2+1, pending banner stacks. */
@media (max-width: 419px) {
    .airport-wallet-row { grid-template-columns: 1fr 1fr; }
    .airport-wallet-row .airport-wallet-btn:nth-child(3) { grid-column: 1 / -1; }
    .airport-pending-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .airport-pending-btn { width: 100%; justify-content: center; }
    /* Drop the icon at 360-419px to free up text width. */
    .airport-pending-btn .material-symbols-rounded { display: none; }
}

/* Phone landscape / tablet portrait — small map upgrade. */
@media (min-width: 480px) {
    .airport-map { height: 280px; }
}

/* Tablet (≥768px) — shell breathes, map grows, hero pillars sit
   shoulder-to-shoulder, card paddings step up. */
@media (min-width: 768px) {
    .airport-shell { max-width: 720px; }
    .airport-driver-page { max-width: 560px; }
    .airport-page {
        padding-right: clamp(20px, 5vw, 40px);
        padding-left: clamp(20px, 5vw, 40px);
    }
    .airport-hero-marketing { padding: 48px 24px 24px; }
    .airport-card-body { padding: 20px; }
    .airport-step-header { padding: 14px 20px; }
    .airport-checkout-summary { padding: 20px; }
    .airport-map { height: 340px; }

    /* Agent grid: 2 columns. Create panel left, list+queue stacked right. */
    .airport-agent-grid {
        grid-template-columns: 5fr 4fr;
    }
    .airport-create-panel { grid-row: span 2; }
}

/* Desktop (≥1024px) — full marketing pillar sizing, checkout button
   capped to a sensible width so it doesn't span the whole row. */
@media (min-width: 1024px) {
    .airport-shell { max-width: 760px; }
    .airport-driver-page { max-width: 640px; }
    .airport-hero-pillar { padding: 16px 12px; }
    .airport-hero-pillar strong { font-size: 1.15rem; }
    .airport-checkout-btn {
        max-width: 360px;
        margin-left: auto; margin-right: auto;
    }
}

/* Wide desktop (≥1200px) — agent grid becomes 3 columns. */
@media (min-width: 1200px) {
    .airport-agent-grid {
        grid-template-columns: 5fr 4fr 4fr;
    }
    .airport-create-panel { grid-row: span 2; }
}

/* XL desktop (≥1280px) — passenger landing splits hero / form into
   two columns so the page stops being a thin centred ribbon on
   1920×1080 monitors. Status drawer + footer stay full-width below. */
@media (min-width: 1280px) {
    .airport-passenger-page .airport-shell {
        max-width: 1180px;
    }
    .airport-passenger-page .airport-shell {
        display: grid;
        grid-template-columns: minmax(380px, 440px) minmax(0, 720px);
        gap: 32px;
        align-items: start;
    }
    .airport-passenger-page .airport-shell > .airport-hero,
    .airport-passenger-page .airport-shell > #airport-auth-required {
        grid-column: 1;
    }
    .airport-passenger-page .airport-shell > #airport-pax-pending-payment,
    .airport-passenger-page .airport-shell > #airport-booking-card,
    .airport-passenger-page .airport-shell > #airport-pax-status-card {
        grid-column: 2;
    }
    .airport-passenger-page .airport-shell > #airport-paypal-modal,
    .airport-passenger-page .airport-shell > footer {
        grid-column: 1 / -1;
    }
}


/* ── Focus-visible, scoped to airport pages ───────────────────────── */
.airport-page button:focus-visible,
.airport-page select:focus-visible,
.airport-page input:focus-visible,
.airport-page textarea:focus-visible,
.airport-page a:focus-visible,
.airport-page summary:focus-visible {
    outline: 2px solid var(--air-primary);
    outline-offset: 2px;
}

/* The guest landing page styles previously lived here. They've moved to
 * pwa_frontend/static/css/landing.css under a `.landing__*` BEM
 * namespace. The only carry-over kept here is the slide-out menu's
 * language segmented control, which the logged-in passenger menu also
 * uses. */

/* Language switcher in the slide-out menu */
.lang-segmented {
    display: inline-flex;
    background: var(--bg-base);
    border-radius: 999px;
    padding: 2px;
}
.lang-segmented .lang-opt {
    border: none;
    background: transparent;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.lang-segmented .lang-opt.active {
    background: var(--acc-primary);
    color: #fff;
}

/* ── Registration forms ───────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--bg-light, #f7f7f9);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    padding: 28px 22px 24px;
    position: relative;
}
.auth-card-wide { max-width: 560px; }
.auth-hero { text-align: center; margin: 6px 0 22px; }
.auth-hero h1 { margin: 12px 0 4px; font-size: 1.4rem; font-weight: 700; }
.auth-hero p { color: var(--text-muted, #666); font-size: 0.9rem; margin: 0; }

.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row > span,
.form-row > legend { font-size: 0.82rem; font-weight: 600; color: var(--text-muted, #555); }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row.two > label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.form-hint { color: var(--text-muted, #888); font-size: 0.75rem; }
.form-hint code { background: #f1f1f3; padding: 1px 4px; border-radius: 3px; }

.phone-row { display: flex; gap: 8px; align-items: stretch; }
.phone-row .phone-country { flex: 0 0 130px; }
.phone-row .phone-number { flex: 1 1 auto; }
.phone-country-locked {
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f1f3; border: 1px solid #e0e0e3; border-radius: 8px;
    padding: 0 12px; font-weight: 600; color: #333;
}

.plate-row { display: flex; gap: 8px; align-items: stretch; }
.plate-row .plate-prefix {
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f1f3; border: 1px solid #e0e0e3; border-radius: 8px;
    padding: 0 14px; font-weight: 700; letter-spacing: 0.5px; color: #333;
    flex: 0 0 auto;
}
.plate-row .plate-digits  { flex: 1 1 auto; text-align: center; letter-spacing: 2px; font-weight: 600; }
.plate-row .plate-letters { flex: 0 0 88px; text-align: center; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }

.radio-row { display: flex; gap: 10px; }
.radio-pill {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #e0e0e3; border-radius: 12px;
    padding: 10px 12px; font-weight: 600; cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill:has(input:checked) {
    border-color: var(--acc-primary, #d32f2f);
    background: rgba(211, 47, 47, 0.06);
}

.terms-row { flex-direction: row; align-items: flex-start; gap: 10px; }
.terms-row input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.terms-row span { font-size: 0.85rem; color: var(--text-dark, #222); }
.terms-row a { color: var(--acc-primary, #d32f2f); }

.btn-block { width: 100%; }
.otp-hint { color: var(--text-muted, #666); font-size: 0.88rem; text-align: center; margin: 0 0 14px; }

/* `.role-card .role-card-register` was a one-off "Register me" link
 * baked into the old home-page role card. The new landing uses a
 * dedicated `.landing__role-cta` element instead. */


/* ────────────────────────────────────────────────────────────────
 * Airport Transfer — /airport/
 *
 * Premium booking page. Uses the project's design tokens
 * (--acc-*, --radius-*, --shadow-*, --text-*) so the visual
 * language matches /ride/. Scrolls naturally on its own — does
 * NOT use the viewport-lock body class that /ride/ uses.
 * ──────────────────────────────────────────────────────────────── */

/* Override the viewport lock that body.airport-page applies in the
 * shared layout block. The booking page is content-rich and scrolls. */
body.airport-passenger-page {
    overflow: auto !important;
    height: auto !important;
    min-height: 100dvh;
    background:
        radial-gradient(ellipse at top, rgba(211, 47, 47, 0.06), transparent 60%),
        var(--bg-base);
}
body.airport-passenger-page #map { display: none; }
body.airport-passenger-page .page-layout {
    height: auto;
    overflow: visible;
}

.ap-shell {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 32px) clamp(16px, 4vw, 24px) 80px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 28px);
}

/* ── Hero ─────────────────────────────────────────────────────── */

.ap-hero {
    text-align: center;
    padding: clamp(20px, 4vw, 32px) 0 0;
}
.ap-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--acc-primary-glow);
    color: var(--acc-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.ap-hero__eyebrow .material-symbols-rounded { font-size: 16px; }
.ap-hero__title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.ap-hero__subtitle {
    color: var(--text-muted);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

.ap-hero__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.ap-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.ap-hero__pill .material-symbols-rounded {
    font-size: 18px;
    color: var(--acc-primary);
}

/* ── Card primitive ───────────────────────────────────────────── */

.ap-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    animation: ap-fade-up 0.35s var(--transition-spring) both;
}
@keyframes ap-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ap-card__header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, rgba(247,247,247,0.4), transparent);
}
.ap-card__title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ap-card__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--acc-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Outfit', 'Inter', sans-serif;
    box-shadow: 0 2px 8px var(--acc-primary-glow);
}
.ap-card__body { padding: 22px; }

/* ── Pricing card ─────────────────────────────────────────────── */

.ap-pricing__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ap-pricing__route {
    position: relative;
    background: var(--bg-base);
    border-radius: var(--radius-md);
    padding: 18px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    border: 1px solid var(--border-subtle);
}
.ap-pricing__route:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.ap-pricing__direction {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--acc-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.ap-pricing__direction .material-symbols-rounded { font-size: 18px; }
.ap-pricing__name {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0 0 12px;
}
.ap-pricing__meta {
    display: flex;
    gap: 14px;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 14px;
}
.ap-pricing__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ap-pricing__meta .material-symbols-rounded {
    font-size: 16px;
    color: var(--text-light);
}
.ap-pricing__fare {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light);
}
.ap-pricing__fare-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ap-pricing__fare-amount {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--acc-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.ap-pricing__fare-tier {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

@media (max-width: 640px) {
    .ap-pricing__row { grid-template-columns: 1fr; }
}

/* ── Form sections ────────────────────────────────────────────── */

.ap-fieldgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.ap-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-field--full { grid-column: 1 / -1; }
.ap-field__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}
.ap-field__label .ap-optional {
    font-weight: 500;
    color: var(--text-light);
    margin-left: 4px;
    font-size: 0.76rem;
}
.ap-field__hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}
.ap-field__error {
    font-size: 0.78rem;
    color: var(--acc-danger);
    font-weight: 600;
    margin: 0;
}

.ap-input,
.ap-select,
.ap-textarea {
    width: 100%;
    background: var(--bg-base);
    border: 2px solid transparent;
    padding: 13px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: max(16px, 0.95rem);
    font-weight: 500;
    font-family: inherit;
    outline: none;
    transition: all var(--transition-fast);
}
.ap-input::placeholder,
.ap-textarea::placeholder { color: var(--text-light); font-weight: 400; }
.ap-input:focus,
.ap-select:focus,
.ap-textarea:focus {
    background: var(--bg-white);
    border-color: var(--acc-primary);
    box-shadow: 0 0 0 4px var(--acc-primary-glow);
}
.ap-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6b6b' viewBox='0 0 16 16'><path d='M3.204 5.5a.5.5 0 0 1 .708 0L8 9.588l4.088-4.088a.5.5 0 0 1 .708.708l-4.442 4.442a.5.5 0 0 1-.708 0L3.204 6.208a.5.5 0 0 1 0-.708Z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 38px;
}
.ap-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

/* Phone group: country + national */
.ap-phone {
    display: grid;
    grid-template-columns: minmax(120px, 0.4fr) 1fr;
    gap: 8px;
}
.ap-phone .ap-select { padding-right: 30px; background-position: right 8px center; }

/* Checkbox: toggle "I also need a return transfer" */
.ap-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 14px;
    background: var(--bg-base);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
}
.ap-checkbox:hover { border-color: var(--border-light); }
.ap-checkbox input { display: none; }
.ap-checkbox__box {
    width: 20px; height: 20px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}
.ap-checkbox__box .material-symbols-rounded {
    font-size: 16px;
    color: #fff;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.ap-checkbox input:checked + .ap-checkbox__box {
    background: var(--acc-primary);
    border-color: var(--acc-primary);
}
.ap-checkbox input:checked + .ap-checkbox__box .material-symbols-rounded { opacity: 1; }

/* Return slot: collapsible row */
.ap-return-slot { display: none; }
.ap-return-slot.is-open {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    animation: ap-fade-up 0.25s ease both;
}

/* Payment radio cards */
.ap-payment-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}
.ap-payment {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--bg-white);
}
.ap-payment:hover { border-color: var(--text-light); }
.ap-payment input { position: absolute; opacity: 0; pointer-events: none; }
.ap-payment__icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.ap-payment__icon .material-symbols-rounded { font-size: 22px; }
.ap-payment__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-payment__label {
    font-weight: 700; color: var(--text-primary);
    font-size: 0.95rem;
}
.ap-payment__hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.ap-payment:has(input:checked) {
    border-color: var(--acc-primary);
    background: var(--acc-primary-glow);
    box-shadow: 0 0 0 4px var(--acc-primary-glow);
}
.ap-payment:has(input:checked) .ap-payment__icon {
    background: var(--acc-primary);
    color: #fff;
}

/* Captcha + submit */
.ap-captcha {
    background: linear-gradient(135deg, var(--bg-base), var(--bg-white));
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ap-captcha__q {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'Outfit', 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ap-captcha__q .material-symbols-rounded {
    color: var(--acc-primary);
    font-size: 20px;
}
.ap-captcha__row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.ap-captcha__row .ap-input { max-width: 200px; }
.ap-iconbtn {
    width: 44px;
    border: 1px solid var(--border-light);
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.ap-iconbtn:hover {
    border-color: var(--acc-primary);
    color: var(--acc-primary);
    background: var(--bg-white);
}

.ap-submit {
    width: 100%;
    margin-top: 18px;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--acc-primary), var(--acc-primary-hover));
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px var(--acc-primary-glow);
    transition: all var(--transition-fast);
}
.ap-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px var(--acc-primary-glow);
}
.ap-submit:active { transform: translateY(0); }
.ap-submit:disabled {
    background: var(--text-light);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.ap-submit .material-symbols-rounded { font-size: 20px; }
.ap-submit .ap-spinner { display: none; }
.ap-submit.is-loading .ap-submit__label { display: none; }
.ap-submit.is-loading .ap-spinner {
    display: inline-flex;
    animation: ap-spin 1s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

.ap-form-error {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--acc-danger-light);
    border: 1px solid rgba(225, 25, 0, 0.2);
    color: var(--acc-danger);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ap-form-error[hidden] { display: none; }
.ap-form-error .material-symbols-rounded { font-size: 18px; flex-shrink: 0; }

.ap-consent {
    text-align: center;
    color: var(--text-light);
    font-size: 0.76rem;
    margin: 14px 0 0;
    line-height: 1.5;
}

/* ── Active card ──────────────────────────────────────────────── */

.ap-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}
.ap-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
}
.ap-status[data-status="pending_driver"] { background: var(--acc-orange); }
.ap-status[data-status="accepted"]       { background: var(--acc-green); }
.ap-status[data-status="completed"]      { background: var(--acc-blue); }
.ap-status[data-status="cancelled"]      { background: var(--acc-danger); }

.ap-driver {
    margin: 0 0 20px;
    padding: 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--acc-green-light), rgba(5,148,79,0.02));
    border: 1px solid rgba(5, 148, 79, 0.18);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    animation: ap-fade-up 0.4s var(--transition-spring) both;
}
.ap-driver__icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--acc-green);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(5, 148, 79, 0.25);
}
.ap-driver__icon .material-symbols-rounded { font-size: 24px; }
.ap-driver__meta { flex: 1; min-width: 0; }
.ap-driver__title {
    font-size: 0.78rem;
    color: var(--acc-green);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin: 0 0 4px;
}
.ap-driver__name {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.ap-driver__line {
    font-size: 0.88rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
}
.ap-driver__line .material-symbols-rounded {
    font-size: 16px;
    color: var(--text-light);
}
.ap-driver__call {
    background: var(--acc-green);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(5, 148, 79, 0.3);
    transition: transform var(--transition-fast);
}
.ap-driver__call:hover { transform: scale(1.05); }

.ap-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.ap-summary__item {
    background: var(--bg-base);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    min-width: 0;
}
.ap-summary__item--full { grid-column: 1 / -1; }
.ap-summary__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 4px;
}
.ap-summary__label .material-symbols-rounded { font-size: 14px; color: var(--text-light); }
.ap-summary__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.ap-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.ap-actions > button { flex: 1; min-width: 160px; }

@media (max-width: 600px) {
    .ap-fieldgrid,
    .ap-payment-group,
    .ap-summary { grid-template-columns: 1fr; }
    .ap-return-slot.is-open { grid-template-columns: 1fr; }
    .ap-phone { grid-template-columns: minmax(0, 0.45fr) 1fr; }
    .ap-actions > button { min-width: 0; }
}

/* ── Back link ────────────────────────────────────────────────── */

.ap-back {
    text-align: center;
    padding-top: 10px;
}
.ap-back__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 10px 18px;
    border-radius: 999px;
    transition: all var(--transition-fast);
}
.ap-back__link:hover {
    color: var(--acc-primary);
    background: var(--acc-primary-glow);
}

/* ── Reduced-motion respect ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ap-card, .ap-driver, .ap-return-slot.is-open { animation: none; }
    .ap-submit:hover, .ap-pricing__route:hover { transform: none; }
}