/* Lanka Taxi – custom overrides (loaded after Landrick CSS)
   ============================================================ */

/* === CSS Variables — "Wayfinding" design regime ==========================
   Derived from Sri Lankan expressway signage (green on retroreflective
   white), sodium street lighting and asphalt. Replaces the previous
   maroon/olive/orange Landrick palette.

   The variable NAMES are unchanged so every existing rule keeps working
   and no markup or copy had to move. Only the values are repointed.

   Colour discipline: expressway green is the workhorse interactive
   colour; sodium amber is scarce and reserved for the primary call to
   action and focus rings. Amber must never carry white text — it fails
   contrast at roughly 1.7:1 — so buttons take their text colour from a
   paired foreground token.
   ======================================================================= */
:root {
    /* --- Core, sampled from taxi-logo.png ---------------------------
       The logo's car body is #5C7C24 and its wordmark #340424. The exact
       logo green FAILS as a page ground — sodium amber over it is 2.63:1,
       below the 3:1 floor for UI components — so the ground is that same
       olive darkened until white (8.75:1) and amber (4.78:1) both clear.
       The exact value is kept for interactive states on light surfaces. */
    --taxi-ground: #3B5211;     /* logo olive, darkened for legibility */
    --taxi-ground-2: #465F1A;   /* raised surface on the olive ground */
    --taxi-logo-green: #5C7C24; /* sampled exact from the logo */
    --taxi-ink: #630A46;        /* maroon — every text colour on light */
    --taxi-expressway: #4C6C14; /* primary brand — dark enough to set text */
    --taxi-highland: #5C7C24;   /* interactive — the exact logo green */
    --taxi-sodium: #FFB020;     /* the scarce CTA colour */
    --taxi-sodium-hi: #FFC04A;  /* CTA hover */
    --taxi-sodium-ink: #A35A00; /* sodium darkened until it carries small text
                                  — #FFB020 is 1.8:1 on the light ground */
    --taxi-reflect: #F1F2E9;    /* light ground, olive-biased */
    --taxi-surface: #F8F9F2;    /* raised surface */
    --taxi-line: #DCDDCD;       /* hairline */
    --taxi-kerb: #7A6070;       /* secondary text, maroon-biased */
    --taxi-plate: #E2472B;      /* errors only */

    /* --- Existing names, repointed onto the regime ------------------ */
    --taxi-green: #4C6C14;
    --taxi-green-light: rgba(92, 124, 36, 0.10);
    --taxi-green-medium: rgba(92, 124, 36, 0.15);
    --taxi-green-medium-text: rgba(92, 124, 36, 0.60);
    --taxi-maroon: #630A46;
    --taxi-menu: #630A46;
    --taxi-menu-active: #4C6C14;
    --taxi-h1: #630A46;
    --taxi-h2: #630A46;
    --taxi-btn-bg: #4C6C14;     /* generic primary — olive, white text */
    --taxi-btn-hover: #5C7C24;
    --taxi-btn-fg: #FFFFFF;
    --taxi-yellow: #FFB020;     /* focus-state border colour for form fields */

    /* --- The one CTA ------------------------------------------------ */
    --taxi-cta-bg: #FFB020;
    --taxi-cta-fg: #630A46;
    --taxi-cta-hover: #FFC04A;

    /* --- Type ------------------------------------------------------- */
    --taxi-font-display: "Archivo", "Archivo Variable", system-ui, sans-serif;
    --taxi-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --taxi-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* === Main Navigation === */
/* Grow the topnav to fit the larger logo (default Landrick height clips it). */
#topnav { min-height: 92px; padding: 6px 0; }
#topnav .logo, #topnav .logo:hover { line-height: normal; height: auto; }
#topnav .logo img { display: inline-block; max-height: 72px; width: auto; vertical-align: middle; }
#topnav.nav-sticky .logo img { max-height: 60px; }

#topnav .navigation-menu > li > a {
    color: var(--taxi-menu);
    font-weight: 600;
}
#topnav .navigation-menu > li:hover > a,
#topnav .navigation-menu > li.active > a,
#topnav .navigation-menu > li > a:focus {
    color: var(--taxi-menu-active) !important;
}
#topnav .navigation-menu .sub-menu-item:hover,
#topnav .navigation-menu .sub-menu-item:focus {
    color: var(--taxi-menu-active) !important;
}

/* === Headings === */
h1, .h1 {
    color: var(--taxi-h1);
}
h2, .h2 {
    color: var(--taxi-h2);
}

/* === Primary Brand Button === */
.btn-taxi {
    background: var(--taxi-btn-bg);
    color: #fff;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-taxi:hover,
.btn-taxi:focus {
    background: var(--taxi-btn-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(237, 140, 21, 0.35);
    transform: translateY(-1px);
}

/* === Generic buttons (btn-primary overrides) === */
.btn-primary {
    background: var(--taxi-btn-bg) !important;
    border-color: var(--taxi-btn-bg) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--taxi-btn-hover) !important;
    border-color: var(--taxi-btn-hover) !important;
    color: #fff !important;
}

/* === Hero Section === */
.hero-taxi {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.trust-badge {
    text-align: center;
    padding: 20px 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}
.trust-badge:hover {
    transform: translateY(-3px);
}
.trust-badge h4 {
    font-weight: 700;
}
.trust-badge p {
    font-size: 14px;
    margin-bottom: 0;
}

/* === Booking Type Cards === */
.booking-type-card {
    padding: 40px 30px 30px;
    border-radius: 12px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.booking-type-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(42, 79, 10, 0.15);
    border-color: var(--taxi-green);
}

.bt-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.booking-type-tab {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
}
.booking-type-tab.active,
.booking-type-tab:hover {
    background: var(--taxi-btn-bg);
    color: #fff;
}

/* === Form Labels (maroon) === */
.form-label {
    color: var(--taxi-maroon) !important;
}

/* === Form default border (maroon) — applies to all text inputs, selects,
       textareas across the site so they pick up the brand colour out of the
       box. Explicit border-width + border-style (not just colour) because the
       parent Landrick CSS sometimes resets border to 0, which made the maroon
       invisible. */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
    border: 1.5px solid var(--taxi-maroon) !important;
}

/* === Form Focus State (yellow border) === */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: var(--taxi-yellow) !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 180, 0, 0.30) !important;
}

/* === Native date / time inputs — match the surrounding text size so the
       displayed date doesn't look noticeably smaller than text inputs next
       to it. Browsers don't inherit font-size into these by default. */
input[type="date"].form-control-lg,
input[type="time"].form-control-lg,
input[type="datetime-local"].form-control-lg {
    font-size: 1.125rem;
    line-height: 1.5;
    min-height: calc(1.5em + 1rem + 3px);
    font-family: inherit;
}
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
    font-family: inherit;
}

/* === Booking Form Cards (inner pages) === */
.booking-form-card {
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
    background: #fff;
}
.booking-form-card h2 {
    color: var(--taxi-green) !important;
}
.booking-form-card h2 + p.text-muted {
    color: var(--taxi-green-medium-text) !important;
}

.booking-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
}

/* === Page Hero (inner pages) === */
.page-hero {
    padding: 100px 0 60px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* === Feature Cards === */
.feature-card {
    padding: 30px 24px;
    border-radius: 12px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.feature-card .icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px;
}

/* === Vehicle Cards === */
.vehicle-card {
    border-radius: 12px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}
.vehicle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.vehicle-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* === Driver Cards === */
.driver-card {
    border-radius: 12px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;
}
.driver-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* === Info Cards (booking sidebars) === */
.info-card {
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
    background: #fff;
}

/* === CTA Banner === */
.cta-banner {
    background: linear-gradient(135deg, #f0f4e8 0%, #e8f0dc 100%);
    border-top: 3px solid var(--taxi-green);
}

/* === Step/Progress Indicators === */
.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: #e9ecef;
    color: #6c757d;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}
.step-circle.active {
    background: var(--taxi-green);
    color: #fff;
    border-color: var(--taxi-green);
}
.step-circle.completed {
    background: var(--taxi-green);
    color: #fff;
    border-color: var(--taxi-green);
}

.step-label {
    font-size: 12px;
    color: #6c757d;
    margin-top: 6px;
    font-weight: 500;
}
.step-label.active {
    color: var(--taxi-green);
    font-weight: 700;
}

.step-line {
    flex: 1;
    height: 2px;
    background: #dee2e6;
    margin: 0 8px;
    position: relative;
    top: -10px;
}
.step-line.completed {
    background: var(--taxi-green);
}

/* === Top Bar (fixed above nav) === */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
#topnav {
    top: 36px !important;
}
body {
    margin-top: 36px;
}
.topbar .buy-button {
    margin: 0;
    gap: 6px;
}

/* === Nav Switcher (Language & Currency) === */
.nav-switcher {
    position: relative;
    display: inline-block;
}
.nav-switcher-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 2px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.nav-switcher-btn:hover {
    border-color: #ED8C15;
    color: #ED8C15;
}
/* On the booking wizard the header bg is white — the default white-on-
   transparent button is invisible. Override to dark text + visible border. */
.booking-header-switchers .nav-switcher-btn {
    color: var(--taxi-green, #2F4206);
    border-color: var(--taxi-green, #2F4206);
    background: #fff;
}
.booking-header-switchers .nav-switcher-btn:hover {
    color: #fff;
    background: var(--taxi-green, #2F4206);
    border-color: var(--taxi-green, #2F4206);
}
.switcher-arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
}
.nav-switcher.open .switcher-arrow {
    transform: rotate(180deg);
}
.nav-switcher-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    z-index: 1060;
    display: none;
    margin-top: 6px;
}
.nav-switcher.open .nav-switcher-menu {
    display: block;
    animation: fadeInDown 0.2s ease;
}
/* Both element types, because the menu contains both.
   The language entries are <a> — they carry a real href so the switcher
   works without JavaScript and a crawler can follow it — and the currency
   entries are <button>, because changing currency is not a navigation.
   Only the buttons were ever styled, so the ten language links rendered as
   unstyled inline text: no padding, no block layout, running together inside
   a 200px menu. They were there and they worked, but they could not be read
   or reliably hit, which is what "the dropdown does not switch" looked like.
   The same <a>-versus-<button> assumption had already broken the active tick
   and the enabled-languages filter in switcher-scripts.hbs. */
.nav-switcher-menu button,
.nav-switcher-menu a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.nav-switcher-menu button:hover,
.nav-switcher-menu a:hover {
    background: #f8f9fa;
    color: #495057;
}
.nav-switcher-menu button.active-item,
.nav-switcher-menu a.active-item {
    color: var(--taxi-green);
    font-weight: 600;
}
.switcher-header {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #adb5bd;
    letter-spacing: 0.5px;
}
.check-icon {
    color: var(--taxi-green);
    font-size: 14px;
}

/* === Upload Components === */
.upload-form-wrapper {
    padding: 20px;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    text-align: center;
    transition: border-color 0.2s ease;
}
.upload-form-wrapper:hover {
    border-color: var(--taxi-green);
}
.upload-btn {
    display: inline-block;
    padding: 8px 20px;
    background: var(--taxi-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease;
}
.upload-btn:hover {
    background: #1e3a07;
}
.upload-progress {
    height: 4px;
    border-radius: 2px;
    background: #e9ecef;
    overflow: hidden;
    margin-top: 10px;
}
.upload-progress .bar {
    height: 100%;
    background: var(--taxi-green);
    transition: width 0.3s ease;
}
.upload-success {
    color: var(--taxi-green);
    font-weight: 600;
}

/* === Buy Button (header CTA area) === */
.buy-button {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

/* === Animation === */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Pagination (brand maroon / yellow active state) ===
   Overrides Bootstrap's blue defaults that were leaking into /booking/fare,
   /admin/bookings, and every paginated admin list. */
.pagination {
    /* Override Bootstrap 5's CSS variables — needed because some classes
       (e.g. .page-link:active when the mouse button is held) read from
       these vars and would otherwise render the default Bootstrap blue. */
    --bs-pagination-color: var(--taxi-maroon);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--taxi-maroon);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--taxi-maroon);
    --bs-pagination-hover-border-color: var(--taxi-maroon);
    --bs-pagination-focus-color: var(--taxi-maroon);
    --bs-pagination-focus-bg: #fff;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(245, 180, 0, 0.30);
    --bs-pagination-active-color: #422006;
    --bs-pagination-active-bg: var(--taxi-yellow);
    --bs-pagination-active-border-color: var(--taxi-yellow);
    --bs-pagination-disabled-color: #999;
    --bs-pagination-disabled-bg: #f5f5f5;
    --bs-pagination-disabled-border-color: #e0e0e0;
}
.pagination .page-link {
    color: var(--taxi-maroon) !important;
    border-color: var(--taxi-maroon) !important;
    background: #fff !important;
}
.pagination .page-link:hover {
    color: #fff !important;
    background: var(--taxi-maroon) !important;
    border-color: var(--taxi-maroon) !important;
}
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus,
.pagination .page-item.active .page-link:focus-visible {
    color: #422006 !important;
    background: var(--taxi-yellow) !important;
    border-color: var(--taxi-yellow) !important;
    font-weight: 600;
}
.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link:hover {
    color: #999 !important;
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
}
.pagination .page-link:focus,
.pagination .page-link:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(245, 180, 0, 0.30) !important;
    outline: 0;
}
/* :active = mouse button held down. Bootstrap's primary blue leaks through
   here without an explicit override. */
.pagination .page-link:active {
    color: #fff !important;
    background: var(--taxi-maroon) !important;
    border-color: var(--taxi-maroon) !important;
}

/* === Responsive === */
@media (max-width: 991px) {
    .hero-taxi {
        padding: 100px 0 60px;
    }
    .buy-button {
        margin-left: 0;
        margin-top: 10px;
    }
    .nav-switcher-menu {
        right: auto;
        left: 0;
    }
    #topnav {
        top: 36px !important;
    }
}

@media (max-width: 767px) {
    .hero-taxi {
        padding: 80px 0 40px;
    }
    .booking-type-card {
        padding: 30px 20px 24px;
    }
    .trust-badge {
        padding: 12px 6px;
    }
    .trust-badge h4 {
        font-size: 1.1rem;
    }
}

/* NOTE: style.min.css (the Landrick theme) sets
   .form-check-input{border:1px solid #e9ecef} — near-white on white, which is
   why an unticked box could not be seen. It also uses class doubling
   (.form-check-input.form-check-input:checked) to win ties, so the rules below
   do the same rather than reaching for !important, which nothing could then
   override. */

/* ── Checkboxes, radios and switches ──────────────────────────────────────
   Bootstrap's default border is rgba(0,0,0,.25), which on white in a dense
   table is close to invisible — the RBAC permission grid is a wall of boxes
   whose edges could not be made out, so an unticked box and a missing control
   looked the same.

   Three states have to be distinguishable at a glance, because the grid is
   read by scanning rather than by inspecting each cell:

     unticked   a clear empty box
     ticked     filled, in the admin green
     disabled   still legible. Bootstrap dims to opacity .5, which on a ticked
                box that cannot be changed (the admin role's own permissions)
                reads as "off" rather than "on and locked" — the opposite of
                what it means.
*/
.form-check-input.form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #6b7280;
    background-color: #fff;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.15em;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.form-check-input.form-check-input:hover:not(:disabled) {
    border-color: var(--taxi-green, #0E7A4A);
}

.form-check-input.form-check-input:checked {
    background-color: var(--taxi-green, #0E7A4A);
    border-color: var(--taxi-green, #0E7A4A);
    /* The tick is drawn here too. With appearance:none declared above, the
       control has no native mark, so relying on Bootstrap's background-image
       would leave a checked box looking merely filled. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Keyboard focus has to be visible on its own, not only as a colour shift. */
.form-check-input.form-check-input:focus,
.form-check-input.form-check-input:focus-visible {
    border-color: var(--taxi-green, #0E7A4A);
    box-shadow: 0 0 0 3px rgba(14, 122, 74, .25);
    outline: none;
}

/* Locked, not absent. Full opacity, a heavier border and a not-allowed
   cursor say "this is fixed" where a faded box says "this is off". */
.form-check-input.form-check-input:disabled {
    opacity: 1;
    cursor: not-allowed;
    border-color: #9ca3af;
    background-color: #f3f4f6;
}

.form-check-input.form-check-input:disabled:checked {
    background-color: #9ca3af;
    border-color: #6b7280;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

/* A switch keeps its pill shape; only the border weight is inherited. */
.form-check-input[role="switch"],
.form-switch .form-check-input {
    width: 2.1em;
    border-radius: 2em;
}

/* Text inputs and selects get the same treatment, so a form does not mix a
   crisp checkbox with a field whose edge is guesswork. */
.form-control.form-control,
.form-select.form-select {
    border: 1px solid var(--taxi-input-border, #9ca3af);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--taxi-green, #0E7A4A);
    box-shadow: 0 0 0 3px rgba(14, 122, 74, .18);
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile topbar, tap targets and input sizing            (2026-08-22)

   Three defects found by a headless audit at 360px:
   1. The topbar row did not wrap or shrink, so the language/currency
      switcher was pushed 67px past the viewport and was unreachable.
      The .buy-button margin-top:10px below 991px also grew the bar past
      its fixed 36px offset, which pushed #topnav down over the logo.
   2. Footer links rendered 15-22px tall, under the 24px WCAG 2.5.8 AA
      target minimum.
   3. The newsletter email field was 14px, which makes iOS zoom the page
      on focus and then leaves it zoomed.
   ═══════════════════════════════════════════════════════════════════════ */

/* The topbar is a fixed 36px band. Nothing inside it may add height. */
.topbar .buy-button {
    margin-top: 0;
}
.topbar .topbar-contact {
    min-width: 0;
}
.topbar .topbar-phone {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .topbar {
        font-size: 12px;
    }
    /* The email address alone is wider than a 360px viewport. The phone
       number is the actionable one on a phone, so the email gives way. */
    .topbar .topbar-email,
    .topbar .topbar-sep {
        display: none;
    }
    .nav-switcher-btn {
        padding: 3px 8px;
        font-size: 11px;
    }
    .nav-switcher-menu {
        min-width: 170px;
    }
}

/* WCAG 2.5.8 Target Size (Minimum), AA: 24x24 CSS px. Footer links are
   inline by default, so vertical padding is what gives them a hit area. */
.footer .text-foot,
.footer li > a,
footer .text-foot {
    display: inline-block;
    padding-block: 5px;
}

/* iOS zooms any field it focuses below 16px and does not zoom back out. */
input.form-control,
select.form-select,
textarea.form-control,
.footer input.form-control {
    font-size: 16px;
}

/* Iteration 2: two targets still under 24px after the block above.
   The hamburger is the primary mobile navigation control and was 18px
   tall, so it gets a full 44px touch target rather than the 24px floor. */
.topbar .topbar-phone {
    display: inline-block;
    padding-block: 3px;   /* 20px -> 26px, clears the 24px floor; still inside the 36px band */
}
#topnav .navbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Iteration 3: the topbar's real height never matched the 36px offsets
   hardcoded into #topnav and body, so the bar sat 8px over the nav and
   clipped the logo at every width. This predates the fixes above.
   Deriving both offsets from one variable makes the overlap impossible. */
:root {
    --topbar-h: 44px;
}
.topbar {
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
}
/* Scoped with :has() so the offset applies only to pages that actually
   render a topbar. admin.hbs, admin-login.hbs and booking.hbs never
   include header.hbs, yet the old unscoped `body{margin-top:36px}` gave
   them a 36px dead band above the content. Safari 15.4+ / iOS 15.4+. */
body:has(.topbar) #topnav {
    top: var(--topbar-h) !important;
}
body:has(.topbar) {
    margin-top: var(--topbar-h);
}
body:not(:has(.topbar)) {
    margin-top: 0;
}

/* The email link is hidden below 768px but still needs a hit area above it. */
.topbar .topbar-email {
    display: inline-block;
    padding-block: 3px;
}
@media (max-width: 767px) {
    .topbar .topbar-email,
    .topbar .topbar-sep {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   WAYFINDING REGIME — typography, surfaces and the one CTA  (2026-08-22)

   Applied without touching markup or copy. A few rules carry !important
   because the values they replace are inline style attributes in the
   templates (the topbar background and the trust-badge headings), and an
   inline style otherwise out-ranks any external sheet.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Type ------------------------------------------------------------
   Archivo at expanded width reads as signage and vehicle plate. Display
   type is set tight: large type needs negative tracking, and default
   spacing at display size is the clearest amateur tell there is. */
body {
    font-family: var(--taxi-font-sans);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4,
.display-1, .display-2, .display-3, .display-4 {
    font-family: var(--taxi-font-display);
    font-variation-settings: "wdth" 112, "wght" 800;
    letter-spacing: -0.028em;
    line-height: 1.06;
}
h1, .h1, .display-1, .display-2, .display-3, .display-4 {
    font-variation-settings: "wdth" 116, "wght" 850;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

/* Prices, times, distances and registration plates read as measured
   facts rather than marketing claims. Tabular so digits stack. */
.price, .fare, .fare-amount, .amount, .booking-ref, .reg-plate,
td.num, .text-mono {
    font-family: var(--taxi-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
table {
    font-variant-numeric: tabular-nums;
}

/* --- Ground ----------------------------------------------------------
   Off-white with a green-grey bias. Pure #fff is the loudest generic
   tell on the web, and the hero gradient went with it — a flat field
   with one soft key reads as more expensive than a gradient. */
body {
    background: var(--taxi-reflect);
}
.hero-taxi {
    background: var(--taxi-reflect);
}
.hero-taxi::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        60% 70% at 78% 12%,
        rgba(255, 176, 32, 0.10) 0%,
        rgba(255, 176, 32, 0) 70%
    );
}

/* The topbar background is an inline style attribute in header.hbs. */
.topbar {
    background: var(--taxi-ground) !important;
}

/* --- The one CTA -----------------------------------------------------
   Sodium amber is scarce by design. .btn-taxi is the brand call to
   action; every other primary button stays expressway green so the
   amber keeps its scarcity and therefore its pull. Amber never carries
   white text — it fails contrast at about 1.7:1. */
.btn-taxi {
    background: var(--taxi-btn-bg);
    color: var(--taxi-btn-fg);
    letter-spacing: 0.005em;
}
.btn-taxi:hover,
.btn-taxi:focus {
    background: var(--taxi-btn-hover);
    color: var(--taxi-btn-fg);
    box-shadow: 0 4px 12px rgba(4, 106, 56, 0.28);
}

/* The scarce one. Applied to the two hero calls to action only — the
   homepage already carries seven .btn-taxi instances, and amber loses
   all of its pull the moment it stops being rare. */
.btn-cta {
    background: var(--taxi-cta-bg) !important;
    color: var(--taxi-cta-fg) !important;
    border: none;
    font-weight: 700;
}
.btn-cta:hover,
.btn-cta:focus {
    background: var(--taxi-cta-hover) !important;
    color: var(--taxi-cta-fg) !important;
    box-shadow: 0 4px 12px rgba(255, 176, 32, 0.30);
}

/* Landrick sets .rounded-pill to 50rem. The regime is 3px on cards and
   2px on chips and controls; a fully rounded button reads as a template. */
.btn.rounded-pill,
.rounded-pill.btn {
    border-radius: 2px !important;
}

/* --- Surfaces --------------------------------------------------------
   3px on cards, 2px on chips, 0 on full-bleed panels. Never a 12px
   radius on everything. A 1px hairline is preferred to a soft shadow;
   where a shadow is needed it is tinted with the surface hue rather
   than being pure black at low opacity. */
.trust-badge,
.booking-type-card,
.feature-card,
.vehicle-card,
.driver-card,
.info-card {
    border-radius: 3px;
    border: 1px solid var(--taxi-line);
    background: var(--taxi-surface);
    box-shadow: 0 1px 2px rgba(18, 23, 26, 0.04),
                0 12px 28px -16px rgba(18, 23, 26, 0.18);
}
.trust-badge:hover,
.booking-type-card:hover,
.vehicle-card:hover,
.driver-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(18, 23, 26, 0.05),
                0 22px 44px -20px rgba(18, 23, 26, 0.24);
}

/* Trust-badge headings carry an inline colour attribute in index.hbs. */
.trust-badge h4 {
    color: var(--taxi-ink) !important;
    font-family: var(--taxi-font-display);
    font-variation-settings: "wdth" 112, "wght" 800;
    letter-spacing: -0.02em;
}
.trust-badge p {
    color: var(--taxi-kerb);
}

/* --- Focus ring ------------------------------------------------------
   Sodium at 2px with a 3px offset, visible on both grounds. */
:focus-visible {
    outline: 2px solid var(--taxi-sodium);
    outline-offset: 3px;
}

::selection {
    background: var(--taxi-sodium);
    color: var(--taxi-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   PUBLIC PAGES — Wayfinding components + driver-first touch targets
                                                            (2026-08-22)

   Scoped with body:not(:has(.admin-sidebar)) so none of this reaches the
   admin. The admin is a desk tool; everything below assumes a phone.

   Drivers are the primary users and they are on mobile, so the touch
   target floor here is 44px (WCAG 2.5.5 / Apple HIG), not the 24px AA
   minimum applied earlier. A headless audit at 360px found 35 controls
   under 44px on /book-a-taxi alone.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Surfaces ---------------------------------------------------------
   3px on cards, hairline borders, one tinted shadow. Landrick ships 12px
   radii and soft grey drop shadows on everything, which is the single
   clearest "off-the-shelf theme" tell on the site. */
body:not(:has(.admin-sidebar)) .card,
body:not(:has(.admin-sidebar)) .booking-form-card,
body:not(:has(.admin-sidebar)) .fare-card,
body:not(:has(.admin-sidebar)) .driver-option-card {
    border-radius: 3px;
    border: 1px solid var(--taxi-line);
    background: var(--taxi-surface);
    box-shadow: 0 1px 2px rgba(99, 10, 70, 0.04),
                0 12px 28px -16px rgba(99, 10, 70, 0.16);
}

/* Inner-page hero bands: flat ground, no grey gradient. */
body:not(:has(.admin-sidebar)) .page-hero,
body:not(:has(.admin-sidebar)) .inner-hero {
    background: var(--taxi-reflect);
}

/* --- Data reads as measured fact, not marketing ----------------------- */
body:not(:has(.admin-sidebar)) .fare-amount,
body:not(:has(.admin-sidebar)) .fare-total,
body:not(:has(.admin-sidebar)) .price,
body:not(:has(.admin-sidebar)) .booking-ref,
body:not(:has(.admin-sidebar)) .distance,
body:not(:has(.admin-sidebar)) .duration {
    font-family: var(--taxi-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* --- Touch targets ----------------------------------------------------
   Applied at every width, because a 44px control is not wrong on desktop
   — it is just generous. Height is set with min-height plus centring so
   nothing reflows. */
@media (max-width: 991px) {
    body:not(:has(.admin-sidebar)) .footer .text-foot,
    body:not(:has(.admin-sidebar)) footer .text-foot {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding-block: 0;
    }

    body:not(:has(.admin-sidebar)) .form-select,
    body:not(:has(.admin-sidebar)) .form-select-lg,
    body:not(:has(.admin-sidebar)) .form-control,
    body:not(:has(.admin-sidebar)) .form-control-lg {
        min-height: 44px;
    }

    body:not(:has(.admin-sidebar)) .booking-type-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body:not(:has(.admin-sidebar)) a.rounded,
    body:not(:has(.admin-sidebar)) .btn-icon,
    body:not(:has(.admin-sidebar)) .logo-footer,
    body:not(:has(.admin-sidebar)) .social-icon li a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The topbar is a fixed band, so raising the phone link to 44px means
       raising the band with it or the two disagree and the nav overlaps
       the logo again. */
    :root { --topbar-h: 52px; }
    body:not(:has(.admin-sidebar)) .topbar .topbar-phone,
    body:not(:has(.admin-sidebar)) .nav-switcher-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding-block: 0;
    }

    /* Primary actions get real thumb area on a phone. */
    body:not(:has(.admin-sidebar)) .btn-lg,
    body:not(:has(.admin-sidebar)) .btn-taxi,
    body:not(:has(.admin-sidebar)) .btn-cta {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* A 17px checkbox on the driver signup form is the smallest target on the
   site, on the form drivers actually have to complete. The control grows
   and its label becomes part of the target, which is what people aim at. */
@media (max-width: 991px) {
    body:not(:has(.admin-sidebar)) .form-check-input {
        width: 24px;
        height: 24px;
        margin-top: 0;
    }
    body:not(:has(.admin-sidebar)) .form-check {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 44px;
    }
    body:not(:has(.admin-sidebar)) .form-check-label {
        min-height: 44px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   STYLE-GUIDE CONFORMANCE — swept from a live audit of every public page
                                                            (2026-08-23)

   The audit found three places where Landrick still won:

   1. Nunito survived on 12-21 elements per page. body{font-family} does
      not reach them because the theme sets the family on classes, and a
      class selector beats inheritance. The heading-utility classes and
      the footer/menu classes have to be named explicitly.

   2. .booking-form-card and .card.shadow-sm.border-0 kept 12px radii —
      the multi-class selectors out-rank the single-class rule above.

   3. The back-to-top control (.btn-icon.btn-primary) sat at 6px while
      every other button is 2px.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- 1. Type: no Nunito anywhere on the public site -------------------- */
body:not(:has(.admin-sidebar)) .h1,
body:not(:has(.admin-sidebar)) .h2,
body:not(:has(.admin-sidebar)) .h3,
body:not(:has(.admin-sidebar)) .h4,
body:not(:has(.admin-sidebar)) .h5,
body:not(:has(.admin-sidebar)) .h6,
body:not(:has(.admin-sidebar)) .title,
body:not(:has(.admin-sidebar)) .section-title,
body:not(:has(.admin-sidebar)) .footer-head {
    font-family: var(--taxi-font-display) !important;
    font-variation-settings: "wdth" 108, "wght" 700;
    letter-spacing: -0.018em;
}

body:not(:has(.admin-sidebar)) .sub-menu-item,
body:not(:has(.admin-sidebar)) .navigation-menu a,
body:not(:has(.admin-sidebar)) .text-foot,
body:not(:has(.admin-sidebar)) .form-label,
body:not(:has(.admin-sidebar)) label,
body:not(:has(.admin-sidebar)) .btn {
    font-family: var(--taxi-font-sans) !important;
}

/* --- 2. Card radii: 3px, whatever the class stack ---------------------- */
body:not(:has(.admin-sidebar)) .booking-form-card,
body:not(:has(.admin-sidebar)) .card.shadow-sm,
body:not(:has(.admin-sidebar)) .card.border-0,
body:not(:has(.admin-sidebar)) .card.shadow,
body:not(:has(.admin-sidebar)) div[class*="-card"] {
    border-radius: 3px !important;
}

/* --- 3. Buttons: one radius across the whole system -------------------- */
body:not(:has(.admin-sidebar)) .btn,
body:not(:has(.admin-sidebar)) .btn-icon,
body:not(:has(.admin-sidebar)) .btn-icon.btn-primary,
body:not(:has(.admin-sidebar)) .back-to-top {
    border-radius: 2px !important;
}

/* Bootstrap's .rounded-* utilities ship !important, so a card carrying
   .rounded-3 keeps 12px however specific the card rule is. Naming the
   utility alongside .card scopes the override to cards only — a bare
   .rounded-3 override would break every deliberate use elsewhere. */
body:not(:has(.admin-sidebar)) .card.rounded-1,
body:not(:has(.admin-sidebar)) .card.rounded-2,
body:not(:has(.admin-sidebar)) .card.rounded-3,
body:not(:has(.admin-sidebar)) .card.rounded-4,
body:not(:has(.admin-sidebar)) .card.rounded,
body:not(:has(.admin-sidebar)) [class*="-card"].rounded-3 {
    border-radius: 3px !important;
}

/* Bare h1-h6 elements that carry no .hN utility still inherited Nunito
   from the theme's element selector. */
body:not(:has(.admin-sidebar)) h1,
body:not(:has(.admin-sidebar)) h2,
body:not(:has(.admin-sidebar)) h3,
body:not(:has(.admin-sidebar)) h4,
body:not(:has(.admin-sidebar)) h5,
body:not(:has(.admin-sidebar)) h6 {
    font-family: var(--taxi-font-display) !important;
}

/* Icon elements render their glyph from ::before with the Unicons face;
   the element's own family only affects any adjacent text. */
body:not(:has(.admin-sidebar)) i[class^="uil"],
body:not(:has(.admin-sidebar)) i[class*=" uil"] {
    font-family: unicons-line !important;
}

/* Something in the theme sets the card radius with !important at a
   specificity that beats both a scoped multi-class selector and an inline
   style. Class doubling raises specificity without inventing a new class
   or reaching for a wrapper — the same technique this file already uses
   for .form-check-input. */
body:not(:has(.admin-sidebar)) .card.card.card,
body:not(:has(.admin-sidebar)) .booking-form-card.booking-form-card {
    border-radius: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SHAPE AND SEMANTIC COLOUR                                 (2026-08-23)

   Buttons were consistent at 2px, but three families of control were not
   buttons and so escaped that sweep:

     .booking-type-tab          50px pills
     .d-inline-flex icon badge  50% circles
     .badge.rounded-pill        800px, in Bootstrap's default green/blue

   The badge colours matter more than the shape: rgb(46,202,139) and
   rgb(47,85,212) appear nowhere in this palette. Semantic colour is
   legitimately separate from the brand accent, but it still has to be
   drawn from the same world.
   ═══════════════════════════════════════════════════════════════════════ */

/* One radius for everything that behaves like a control. */
body:not(:has(.admin-sidebar)) .booking-type-tab,
body:not(:has(.admin-sidebar)) .badge,
body:not(:has(.admin-sidebar)) .badge.rounded-pill,
body:not(:has(.admin-sidebar)) .nav-pills .nav-link {
    border-radius: 2px !important;
}

/* The decorative pin-in-a-circle above the booking form is the icon-in-a-
   circle pattern this design deliberately avoids. Squared to 3px it reads
   as a panel marker rather than a sticker. */
body:not(:has(.admin-sidebar)) .booking-form-card .d-inline-flex.rounded-circle,
body:not(:has(.admin-sidebar)) .booking-form-card .rounded-circle {
    border-radius: 3px !important;
}

/* --- Semantic colour, drawn from the palette --------------------------
   Kept distinct from the brand accent so state still reads as state, but
   no longer Bootstrap's stock green and blue. */
body:not(:has(.admin-sidebar)) .badge.bg-success,
body:not(:has(.admin-sidebar)) .bg-success {
    background-color: var(--taxi-expressway, #4C6C14) !important;
    color: #fff !important;
}
body:not(:has(.admin-sidebar)) .badge.bg-primary,
body:not(:has(.admin-sidebar)) .bg-primary {
    background-color: var(--taxi-ink, #630A46) !important;
    color: #fff !important;
}
body:not(:has(.admin-sidebar)) .badge.bg-warning,
body:not(:has(.admin-sidebar)) .bg-warning {
    background-color: var(--taxi-sodium, #FFB020) !important;
    color: var(--taxi-ink, #630A46) !important;
}
body:not(:has(.admin-sidebar)) .badge.bg-danger,
body:not(:has(.admin-sidebar)) .bg-danger {
    background-color: var(--taxi-plate, #E2472B) !important;
    color: #fff !important;
}
body:not(:has(.admin-sidebar)) .text-primary { color: var(--taxi-ink, #630A46) !important; }
body:not(:has(.admin-sidebar)) .text-success { color: var(--taxi-expressway, #4C6C14) !important; }
/* The last unmapped Bootstrap colour. .text-warning rendered #ffc107, which
   is near enough the brand sodium to look like a mistake rather than a
   choice, and far enough to be one. */
body:not(:has(.admin-sidebar)) .text-warning { color: var(--taxi-sodium, #FFB020) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME HERO — Wayfinding, server-rendered            (2026-08-23)

   The homepage hero is Handlebars, not a static build, so it keeps SSR,
   the shared header with its language and currency switchers, the SEO
   head and all 9 locales. A static page at / had none of those — a Tamil
   or German visitor landing on the homepage could not switch language.
   ═══════════════════════════════════════════════════════════════════════ */

.hero-wayfinding {
    position: relative;
    background: var(--taxi-ground) !important;
    color: var(--taxi-reflect);
    overflow: hidden;
    isolation: isolate;
    padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(3rem, 7vh, 5rem);
}
.hero-wayfinding::after {
    background: radial-gradient(58% 62% at 82% 8%, rgba(255, 176, 32, 0.16), transparent 70%);
}

.hero-wf__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.hero-wf__ghost {
    fill: none;
    stroke: rgba(237, 243, 239, 0.12);
    stroke-width: 1;
    stroke-dasharray: 4 8;
    vector-effect: non-scaling-stroke;
}
.hero-wf__stroke {
    fill: none;
    stroke: var(--taxi-sodium);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.45;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
    animation: heroDraw 1100ms cubic-bezier(0.65, 0, 0.35, 1) 280ms forwards;
}
@keyframes heroDraw { to { stroke-dashoffset: 0; } }

.hero-wf__in { position: relative; }

.hero-wf__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--taxi-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(237, 243, 239, 0.6);
    margin: 0 0 1.1rem;
}
.hero-wf__pin {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--taxi-sodium);
    box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.18);
    flex: none;
}

.hero-wf__h1 {
    font-family: var(--taxi-font-display) !important;
    font-variation-settings: "wdth" 116, "wght" 850;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--taxi-reflect) !important;
    margin: 0;
    max-width: 15ch;
    transform: translateY(14px);
    animation: heroRise 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-wf__deck {
    margin: 1.35rem 0 0;
    max-width: 46ch;
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(237, 243, 239, 0.75);
    transform: translateY(14px);
    animation: heroRise 620ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

.hero-wf__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.8rem;
    transform: translateY(14px);
    animation: heroRise 620ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}

.hero-wf__ghostbtn {
    background: transparent;
    color: var(--taxi-reflect) !important;
    border: 1px solid rgba(237, 243, 239, 0.28);
}
.hero-wf__ghostbtn:hover,
.hero-wf__ghostbtn:focus {
    border-color: var(--taxi-sodium);
    color: var(--taxi-sodium) !important;
    background: rgba(255, 176, 32, 0.08);
}

@keyframes heroRise { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .hero-wf__h1,
    .hero-wf__deck,
    .hero-wf__actions { transform: none; animation: none; }
    .hero-wf__stroke { stroke-dashoffset: 0; animation: none; }
}

/* The trust badges sit on the olive ground here, not on white. */
.hero-wayfinding .trust-badge {
    background: rgba(237, 243, 239, 0.06) !important;
    border: 1px solid rgba(237, 243, 239, 0.14) !important;
    box-shadow: none !important;
}
.hero-wayfinding .trust-badge h4 { color: var(--taxi-reflect) !important; }
.hero-wayfinding .trust-badge p  { color: rgba(237, 243, 239, 0.65) !important; }

/* The homepage hero is dark, and #topnav is transparent over it, so the
   maroon nav text dropped to roughly 1.4:1 against the olive — "Become a
   Driver" was effectively invisible. Every other page has a light ground
   under the nav, which is why this only showed here.

   Giving the nav its own light ground fixes the contrast and makes the
   header identical on every page, which is the point. The hero is offset
   so it starts below rather than behind it. */
body:not(:has(.admin-sidebar)) #topnav {
    background: var(--taxi-reflect) !important;
    border-bottom: 1px solid var(--taxi-line);
}
body:not(:has(.admin-sidebar)) #topnav .navigation-menu > li > a {
    color: var(--taxi-ink) !important;
}
body:not(:has(.admin-sidebar)) #topnav .navigation-menu > li:hover > a,
body:not(:has(.admin-sidebar)) #topnav .navigation-menu > li.active > a {
    color: var(--taxi-expressway) !important;
}

/* The logo asset carries a baked-in white box. Against the light nav
   ground it is invisible; a blend keeps it from reading as a white card
   until a transparent asset replaces it. */
body:not(:has(.admin-sidebar)) #topnav .logo img {
    mix-blend-mode: multiply;
}

/* #topnav is sticky and overlays the hero, so the eyebrow sat behind it.
   Clear the nav's own height rather than guessing a padding value. */
body:not(:has(.admin-sidebar)) .hero-wayfinding {
    padding-top: calc(92px + clamp(1.5rem, 4vh, 3rem));
}
@media (max-width: 991px) {
    body:not(:has(.admin-sidebar)) .hero-wayfinding {
        padding-top: calc(92px + 1.25rem);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT FORM                                              (2026-08-23)
   No email address is rendered anywhere on the public site; this form is
   the only route in. Styled on the same system as the booking forms.
   ═══════════════════════════════════════════════════════════════════════ */

.contact-note {
    display: grid;
    gap: 0.15rem;
    padding: 0.9rem 1.1rem;
    border-radius: 3px;
    margin-bottom: 1.25rem;
    border-left: 3px solid;
}
.contact-note strong { font-weight: 600; }
.contact-note span { font-size: 0.92rem; }
.contact-note--ok {
    background: rgba(76, 108, 20, 0.10);
    border-left-color: var(--taxi-expressway);
    color: var(--taxi-ink);
}
.contact-note--bad {
    background: rgba(226, 71, 43, 0.10);
    border-left-color: var(--taxi-plate);
    color: var(--taxi-ink);
}

/* The honeypot must be reachable to a bot but invisible and unfocusable
   to a person. display:none is skipped by the better bots, so it is moved
   off-canvas instead. */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.req { color: var(--taxi-plate); font-weight: 600; }
.opt {
    font-family: var(--taxi-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--taxi-kerb);
    margin-left: 0.35rem;
}

.form-hint {
    margin: 0.4rem 0 0;
    font-size: 0.83rem;
    color: var(--taxi-kerb);
}
.form-hint--warn { color: var(--taxi-plate); }

/* A file input is the one control Bootstrap leaves looking like 1998. */
body:not(:has(.admin-sidebar)) input[type="file"].form-control {
    padding: 0.55rem 0.7rem;
    background: #fff;
}
body:not(:has(.admin-sidebar)) input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    margin-inline-end: 0.8rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--taxi-expressway);
    border-radius: 2px;
    background: transparent;
    color: var(--taxi-expressway);
    cursor: pointer;
    min-height: 40px;
}
body:not(:has(.admin-sidebar)) input[type="file"]::file-selector-button:hover {
    background: var(--taxi-expressway);
    color: #fff;
}

/* #topnav is sticky and overlays whatever follows it, so inner-page heroes
   clipped their heading the same way the homepage did — 12px at 360px,
   where the nav is tallest relative to the hero padding. Offsetting by the
   nav's own height fixes every inner page at once rather than per-page. */
body:not(:has(.admin-sidebar)) .page-hero {
    padding-top: calc(92px + clamp(1.25rem, 3vh, 2.5rem));
}


/* ═══════════════════════════════════════════════════════════════════════
   OFFERS LIST — "Choose your driver & car"                  (2026-08-23)

   Consolidated. This replaces 645 lines that had accumulated across a
   dozen passes: .vehicle-photo was declared seven times, .driver-select-btn
   ten, and rules from different iterations were overriding each other, so
   a change in one place produced an unpredictable result somewhere else.
   That unpredictability was the real defect — the layout only looked
   arbitrary because it had become arbitrary.

   Everything the screen needs is here, once, in one order.

   THE SHAPE OF THE PROBLEM
   This is a comparison table. Its single requirement is that the options
   are visible together and their fields line up, so the eye can run down a
   column and find the difference. A stack of tall cards cannot do that,
   which is why the row is a grid with fixed tracks rather than Bootstrap
   columns that size to their own content.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────────────────────── */
body:not(:has(.admin-sidebar)) .fare-head__title {
    font-family: var(--taxi-font-display);
    font-variation-settings: "wdth" 112, "wght" 800;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: var(--taxi-ink);
}
body:not(:has(.admin-sidebar)) .fare-head__sub {
    color: var(--taxi-kerb);
    font-size: 1rem;
    max-width: 54ch;
}

/* ── The row ─────────────────────────────────────────────────────────── */
body:not(:has(.admin-sidebar)) .driver-card {
    border: 1px solid var(--taxi-line) !important;
    border-radius: 3px !important;
    background: var(--taxi-surface) !important;
    box-shadow: none !important;
    margin-bottom: 0.5rem !important;
    cursor: pointer;
    transition: border-color 120ms cubic-bezier(.65,0,.35,1),
                background 120ms cubic-bezier(.65,0,.35,1);
}
body:not(:has(.admin-sidebar)) .driver-card:hover {
    border-color: var(--taxi-expressway) !important;
    background: #fff !important;
}
/* The selection is marked on the edge, not by tinting the row: an edge
   survives greyscale and a phone in sunlight, a wash does not. */
body:not(:has(.admin-sidebar)) .driver-card.selected {
    border-color: var(--taxi-expressway) !important;
    border-left: 3px solid var(--taxi-sodium) !important;
    background: #fff !important;
}
body:not(:has(.admin-sidebar)) .driver-card:focus-visible {
    outline: 2px solid var(--taxi-sodium);
    outline-offset: 2px;
}
body:not(:has(.admin-sidebar)) .driver-card .card-body {
    padding: 0.95rem 1.25rem !important;
}

@media (min-width: 900px) {
    body:not(:has(.admin-sidebar)) .driver-card .row {
        display: grid !important;
        grid-template-columns: minmax(15rem, 1.05fr) minmax(16rem, 1fr) minmax(12rem, auto);
        column-gap: 2rem;
        align-items: center;
        --bs-gutter-x: 0;
        margin: 0;
    }
    body:not(:has(.admin-sidebar)) .driver-card .row > div {
        width: auto; max-width: none; flex: none;
        padding: 0; margin: 0; border: 0;
    }
    /* Driver leads: in a marketplace the first question is who is quoting. */
    body:not(:has(.admin-sidebar)) .driver-card .row > div:nth-child(2) { order: 1; }
    body:not(:has(.admin-sidebar)) .driver-card .row > div:nth-child(1) { order: 2; }
    body:not(:has(.admin-sidebar)) .driver-card .row > div:nth-child(3) {
        order: 3;
        text-align: right;
        border-left: 1px solid var(--taxi-line);
        padding-left: 1.5rem;
    }
}

/* ── Driver ──────────────────────────────────────────────────────────── */
body:not(:has(.admin-sidebar)) .driver-avatar {
    width: 72px; height: 72px;
    border-radius: 3px;
    object-fit: cover;
    object-position: center 30%;
    flex: none;
    background: var(--taxi-ground);
    color: var(--taxi-reflect);
    border: 1px solid var(--taxi-line);
    display: inline-flex; align-items: center; justify-content: center;
}
body:not(:has(.admin-sidebar)) .driver-avatar--empty {
    font-family: var(--taxi-font-display);
    font-variation-settings: "wdth" 118, "wght" 850;
    font-size: 0.9rem;
}
body:not(:has(.admin-sidebar)) .driver-card .flex-shrink-0.me-3 {
    margin-right: 0.9rem !important;
}
body:not(:has(.admin-sidebar)) .driver-card h6 {
    font-size: 1.02rem; font-weight: 600;
    letter-spacing: -0.012em; line-height: 1.25;
    color: var(--taxi-ink);
}
/* The operator carries the brand colour: in a marketplace, who is quoting
   is the field people scan for. */
body:not(:has(.admin-sidebar)) .driver-card .text-muted.small:first-of-type {
    color: var(--taxi-expressway) !important;
    font-weight: 500;
    font-size: 0.84rem;
}
/* Ratings in brand olive, never the orange that competes with the CTA. */
body:not(:has(.admin-sidebar)) .driver-card .stars,
body:not(:has(.admin-sidebar)) .driver-card [class*="star"] {
    color: var(--taxi-expressway);
    font-size: 0.82rem;
}
body:not(:has(.admin-sidebar)) .driver-card .rating-empty { opacity: 0.35; }

/* One quiet chip. Three stacked ticks said the same of every driver and
   cost the height that stopped the list being comparable. */
body:not(:has(.admin-sidebar)) .trust-chip {
    display: inline-flex; align-items: center; gap: 0.28rem;
    font-family: var(--taxi-font-mono);
    font-size: 0.65rem; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--taxi-expressway);
    background: rgba(76,108,20,.09);
    border-radius: 2px; padding: 0.1rem 0.4rem;
    cursor: help;
}
body:not(:has(.admin-sidebar)) .trust-chip .mdi { font-size: 0.8rem; }

/* ── Vehicle ─────────────────────────────────────────────────────────── */
/* The photo is a SIBLING of .small, so the flex pair goes on the column. */
body:not(:has(.admin-sidebar)) .driver-card .col-md-4:first-child {
    display: flex !important;
    /* Explicit, because something in the vendor stack resolves this column
       to `column` and no flex-direction rule in our sheets matches it — a
       flex-flow shorthand somewhere in the theme. Stating the axis costs
       nothing and removes a dependency on finding it. */
    flex-direction: row !important;
    align-items: center;
    gap: 0.85rem;
}
body:not(:has(.admin-sidebar)) .driver-card .col-md-4:first-child > .small {
    flex: 1 1 auto; min-width: 0;
}
body:not(:has(.admin-sidebar)) .vehicle-photo {
    flex: none;
    width: 96px; max-width: 96px;
    aspect-ratio: 4 / 3;
    object-fit: contain;       /* whole car — never crop a vehicle listing */
    background: #fff;
    border: 1px solid var(--taxi-line);
    border-radius: 3px;
    margin: 0 !important;
    padding: 2px;
}
body:not(:has(.admin-sidebar)) .driver-card .col-md-4:first-child .fw-semibold {
    font-size: 0.94rem; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body:not(:has(.admin-sidebar)) .vehicle-spec {
    font-family: var(--taxi-font-mono);
    font-size: 0.72rem;
    color: var(--taxi-kerb);
    text-transform: capitalize;   /* the class code is stored lowercase */
    margin-top: 0.1rem;
}
body:not(:has(.admin-sidebar)) .reg-plate {
    display: inline-block;
    font-family: var(--taxi-font-mono);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em;
    color: #12171A; background: #fff;
    border: 1px solid var(--taxi-line);
    border-left: 3px solid var(--taxi-plate);
    border-radius: 2px; padding: 0.1rem 0.4rem;
    white-space: nowrap;
}
body:not(:has(.admin-sidebar)) .driver-card .badge.bg-light {
    border-radius: 2px !important;
    font-family: var(--taxi-font-mono); font-size: 0.66rem;
    background: var(--taxi-reflect) !important;
    color: var(--taxi-ink) !important;
    border-color: var(--taxi-line) !important;
}

/* ── Price ───────────────────────────────────────────────────────────── */
/* Tabular mono so the column of fares aligns digit-for-digit down the
   list — the entire point of the screen. */
body:not(:has(.admin-sidebar)) .driver-card .h4 {
    font-family: var(--taxi-font-mono) !important;
    font-variant-numeric: tabular-nums;
    font-size: 1.45rem !important;
    font-weight: 500; letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--taxi-ink) !important;
}
body:not(:has(.admin-sidebar)) .fare-base,
body:not(:has(.admin-sidebar)) .driver-card .fare-inclusion {
    font-family: var(--taxi-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--taxi-kerb);
    margin-top: 0.1rem;
}
body:not(:has(.admin-sidebar)) .driver-card .fare-breakdown {
    font-family: var(--taxi-font-mono);
    font-size: 0.64rem; line-height: 1.4;
    color: var(--taxi-kerb); opacity: 0.6;
    max-width: 30ch; margin-left: auto;
    word-break: keep-all; hyphens: none;
}

/* ── Action ──────────────────────────────────────────────────────────── */
/* One control, carrying its own state. */
body:not(:has(.admin-sidebar)) .driver-select-btn {
    border: 1px solid var(--taxi-expressway);
    border-radius: 2px;
    background: transparent;
    color: var(--taxi-expressway);
    font-weight: 600; font-size: 0.86rem;
    min-height: 38px; min-width: 7rem;
    padding-inline: 1rem;
    margin-top: 0.6rem;
    transition: background 120ms cubic-bezier(.65,0,.35,1),
                color 120ms cubic-bezier(.65,0,.35,1);
}
body:not(:has(.admin-sidebar)) .driver-select-btn:hover {
    background: var(--taxi-expressway); color: #fff;
}
body:not(:has(.admin-sidebar)) .driver-select-btn .lbl-picked { display: none; }
body:not(:has(.admin-sidebar)) .driver-card.selected .driver-select-btn .lbl-pick { display: none; }
body:not(:has(.admin-sidebar)) .driver-card.selected .driver-select-btn .lbl-picked { display: inline; }
body:not(:has(.admin-sidebar)) .driver-card.selected .driver-select-btn {
    background: var(--taxi-sodium) !important;
    border-color: var(--taxi-sodium) !important;
    color: var(--taxi-ink) !important;
}
body:not(:has(.admin-sidebar)) .driver-card.selected .driver-select-btn:hover {
    background: #FFC04A !important; border-color: #FFC04A !important;
}

/* ── Phone ───────────────────────────────────────────────────────────── */
@media (max-width: 899.98px) {
    body:not(:has(.admin-sidebar)) .driver-card .row > div + div {
        border-top: 1px solid var(--taxi-line);
        padding-top: 0.8rem; margin-top: 0.8rem;
    }
    body:not(:has(.admin-sidebar)) .driver-select-btn { width: 100%; min-height: 44px; }
    body:not(:has(.admin-sidebar)) .driver-avatar { width: 64px; height: 64px; }
    body:not(:has(.admin-sidebar)) .driver-card .fare-breakdown { margin-left: 0; }
}

/* ===========================================================================
   Home page — how it works / quote comparison / fare arithmetic
   ---------------------------------------------------------------------------
   Built mobile-first: this site is reached mainly by drivers on phones, so the
   single-column stack is the real layout and the desktop grid is the override,
   not the other way round. Every control clears 44px so it can be hit with a
   thumb.

   Scoped with the same body:not(:has(.admin-sidebar)) guard the rest of the
   public styles use, so nothing here can reach the admin.
   ========================================================================= */

body:not(:has(.admin-sidebar)) .wf-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taxi-sodium-ink);
  margin-bottom: 0.5rem;
}

body:not(:has(.admin-sidebar)) .wf-lede {
  max-width: 60ch;
  color: var(--taxi-kerb);
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

body:not(:has(.admin-sidebar)) .wf-note {
  margin-top: 1.1rem;
  margin-bottom: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--taxi-kerb);
  max-width: 62ch;
}

/* --- How it works ------------------------------------------------------- */

body:not(:has(.admin-sidebar)) .wf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

body:not(:has(.admin-sidebar)) .wf-step {
  border: 1px solid var(--taxi-line);
  border-radius: 3px;
  background: #fff;
  padding: 1.35rem 1.25rem;
  /* The counter is the only thing carrying the sequence, so it gets the
     accent rather than the heading. */
  border-top: 3px solid var(--taxi-logo-green);
}

body:not(:has(.admin-sidebar)) .wf-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--taxi-reflect);
  color: var(--taxi-ground);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
}

body:not(:has(.admin-sidebar)) .wf-step__h {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--taxi-ink);
  margin-bottom: 0.35rem;
}

body:not(:has(.admin-sidebar)) .wf-step__p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--taxi-kerb);
  margin: 0;
}

/* --- Lead image with its calls to action ---------------------------------- */

/* The buttons sat below the picture, and on the destination pages below the
   article as well — so the one thing the page is asking for was the last
   thing on it. Beside the image they are in the first screen, and the image
   stops being a full-width band with nothing next to it.
   The image keeps the larger share: it is what the reader came to look at. */
body:not(:has(.admin-sidebar)) .dp-hero {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  body:not(:has(.admin-sidebar)) .dp-hero:has(.dp-hero__img) {
    grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr);
    align-items: center;
    gap: 1.75rem;
  }
}

body:not(:has(.admin-sidebar)) .dp-hero__cta {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Full width of their column, so the two read as one stack of choices rather
   than two buttons that happen to be near each other. */
body:not(:has(.admin-sidebar)) .dp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  border-radius: 4px;
}

/* Bootstrap's outline-primary is its own blue: the secondary button on these
   pages rendered in a colour that appears nowhere else on the site, next to a
   primary button that had been overridden to the brand olive. */
body:not(:has(.admin-sidebar)) .btn-outline-primary {
  color: var(--taxi-btn-bg);
  border-color: var(--taxi-btn-bg);
  background: transparent;
}

body:not(:has(.admin-sidebar)) .btn-outline-primary:hover,
body:not(:has(.admin-sidebar)) .btn-outline-primary:focus {
  color: #fff;
  background: var(--taxi-btn-bg);
  border-color: var(--taxi-btn-bg);
}

/* --- Destination pages ---------------------------------------------------- */

/* Section headings here take the brand olive rather than the site's maroon,
   and it is the same olive as the fact chips and the drivers' note below
   them — one green on the page, not three that nearly match. */
body:not(:has(.admin-sidebar)) .dp-h2 {
  color: var(--taxi-ground);
}

/* --- Destination facts --------------------------------------------------- */

/* The four facts a visitor plans around: distance, drive time, how long to
   allow, and whether there is a gate to queue at. They were a pale maroon
   tint carrying default body text; olive is the brand's own ground and the
   colour every other factual chip on the site uses. */
body:not(:has(.admin-sidebar)) .dp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.85rem;
}

body:not(:has(.admin-sidebar)) .dp-fact {
  background: var(--taxi-reflect);
  color: var(--taxi-ground);
  border: 1px solid var(--taxi-line);
  border-radius: 3px;
  padding: 0.3rem 0.6rem;
}

/* The drivers' note is the one piece of first-hand advice on the page, and it
   was a wash of cream behind a border at 35% opacity — quieter than the facts
   above it. Full-strength sodium at two pixels draws the perimeter; the label
   inside is the brand olive, darkened to carry small text on the cream. */
body:not(:has(.admin-sidebar)) .dp-tip {
  background: #FFF8E8;
  border: 2px solid var(--taxi-sodium);
  border-radius: 6px;
  padding: 1rem 1.1rem;
}

body:not(:has(.admin-sidebar)) .dp-tip__label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taxi-ground);
  margin-bottom: 0.35rem;
}

/* --- The quote list ----------------------------------------------------- */

body:not(:has(.admin-sidebar)) .wf-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--taxi-ink);
  margin-bottom: 1.1rem;
}

body:not(:has(.admin-sidebar)) .wf-route__tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taxi-ground);
  background: var(--taxi-reflect);
  border: 1px solid var(--taxi-line);
  border-radius: 2px;
  padding: 0.2rem 0.5rem;
}

body:not(:has(.admin-sidebar)) .wf-offers {
  display: grid;
  gap: 0.85rem;
}

body:not(:has(.admin-sidebar)) .wf-offer {
  background: #fff;
  border: 1px solid var(--taxi-line);
  border-radius: 3px;
  padding: 1.1rem;
  display: grid;
  gap: 0.9rem;
  box-shadow: 0 1px 2px rgba(99, 10, 70, 0.05);
}

/* The cheapest row is the answer to the question the section asks, so it is
   marked structurally rather than merely coloured. */
body:not(:has(.admin-sidebar)) .wf-offer--best {
  border-left: 3px solid var(--taxi-logo-green);
  /* The accent replaces a 1px border, so without this the whole row's content
     box starts 2px right of every other row and is 2px narrower. */
  padding-left: calc(1.1rem - 2px);
}

body:not(:has(.admin-sidebar)) .wf-offer__who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

body:not(:has(.admin-sidebar)) .wf-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--taxi-reflect);
  border: 1px solid var(--taxi-line);
  display: grid;
  place-items: center;
}

body:not(:has(.admin-sidebar)) .wf-avatar__txt {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--taxi-ground);
}

/* Sits over the initials. If the photo 404s the <img> removes itself and the
   initials are already behind it, so a missing portrait never leaves a hole. */
body:not(:has(.admin-sidebar)) .wf-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

body:not(:has(.admin-sidebar)) .wf-offer__names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body:not(:has(.admin-sidebar)) .wf-offer__driver {
  font-weight: 700;
  color: var(--taxi-ink);
  line-height: 1.3;
}

body:not(:has(.admin-sidebar)) .wf-offer__org,
body:not(:has(.admin-sidebar)) .wf-offer__rides {
  font-size: 0.8rem;
  color: var(--taxi-kerb);
  line-height: 1.4;
}

body:not(:has(.admin-sidebar)) .wf-offer__car {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* Only rendered when a photo exists, so this never reserves empty space. */
body:not(:has(.admin-sidebar)) .wf-offer__pic {
  width: 100%;
  max-width: 190px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--taxi-line);
  margin-bottom: 0.35rem;
}

body:not(:has(.admin-sidebar)) .wf-offer__model {
  font-weight: 600;
  color: var(--taxi-ink);
}

body:not(:has(.admin-sidebar)) .wf-offer__cls {
  font-size: 0.82rem;
  color: var(--taxi-kerb);
}

/* Registration is read character by character at the kerb, so it is set in a
   mono face at full contrast rather than as another muted meta line. */
body:not(:has(.admin-sidebar)) .wf-plate {
  align-self: flex-start;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--taxi-ink);
  background: var(--taxi-reflect);
  border: 1px solid var(--taxi-line);
  border-radius: 2px;
  padding: 0.15rem 0.45rem;
  margin-top: 0.15rem;
}

body:not(:has(.admin-sidebar)) .wf-offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

body:not(:has(.admin-sidebar)) .wf-offer__amt {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--taxi-ink);
  font-variant-numeric: tabular-nums;
}

body:not(:has(.admin-sidebar)) .wf-offer__tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--taxi-ground);
  border-radius: 2px;
  padding: 0.2rem 0.45rem;
}

body:not(:has(.admin-sidebar)) .wf-offer__pick {
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --- The arithmetic ----------------------------------------------------- */

body:not(:has(.admin-sidebar)) .wf-calc__box {
  max-width: 40rem;
  background: #fff;
  border: 1px solid var(--taxi-line);
  border-radius: 3px;
  overflow: hidden;
}

body:not(:has(.admin-sidebar)) .wf-calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--taxi-line);
  font-size: 0.92rem;
  color: var(--taxi-kerb);
}

body:not(:has(.admin-sidebar)) .wf-calc__v {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--taxi-ink);
  white-space: nowrap;
}

body:not(:has(.admin-sidebar)) .wf-calc__row--total {
  border-bottom: 0;
  background: var(--taxi-reflect);
  font-weight: 700;
  color: var(--taxi-ink);
}

body:not(:has(.admin-sidebar)) .wf-calc__row--total .wf-calc__v {
  font-size: 1.2rem;
}

/* --- Desktop ------------------------------------------------------------ */

@media (min-width: 768px) {
  body:not(:has(.admin-sidebar)) .wf-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 900px) {
  /* Driver, then vehicle, then price — the order the eye needs to answer
     "who, in what, for how much". The price column is right-aligned and
     ruled off so the four rows compare down the column. */
  body:not(:has(.admin-sidebar)) .wf-offer {
    /* Each row is its own grid, so a track sized to its content cannot line
       up with the row above it. The price column was `auto`: on the cheapest
       row it also holds the LOWEST badge, so that row's price track grew and
       pushed its driver and vehicle columns left of every other row's. Both
       bounds are fixed lengths here, which is what makes the tracks resolve
       to the same widths on every row — the comparison down the column this
       section is for. */
    grid-template-columns: minmax(12rem, 1fr) minmax(11rem, 1fr) minmax(11rem, 19rem);
    align-items: center;
    column-gap: 2rem;
    padding: 1.25rem 1.5rem;
  }

  body:not(:has(.admin-sidebar)) .wf-offer--best {
    padding-left: calc(1.5rem - 2px);
  }

  body:not(:has(.admin-sidebar)) .wf-offer__price {
    justify-content: flex-end;
    text-align: right;
    border-left: 1px solid var(--taxi-line);
    padding-left: 1.5rem;
    min-height: 3.2rem;
  }

  body:not(:has(.admin-sidebar)) .wf-offer__pick {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   Hero price rail
   ---------------------------------------------------------------------------
   Sits on the dark hero ground, so its colours are drawn from the reflect/
   sodium end of the palette rather than the ink used on light sections.

   Scrolls horizontally on a phone instead of wrapping: wrapped chips read as
   separate rows of unrelated facts, where a single scrolling line stays
   legible as one set of comparable prices. Scroll snapping keeps a chip from
   being left half cut off at rest.
   ------------------------------------------------------------------------- */

body:not(:has(.admin-sidebar)) .hero-wf__rail {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body:not(:has(.admin-sidebar)) .hero-wf__rail::-webkit-scrollbar { display: none; }

body:not(:has(.admin-sidebar)) .hero-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.9rem;
  min-height: 44px;
  border: 1px solid rgba(241, 242, 233, 0.22);
  border-radius: 3px;
  background: rgba(241, 242, 233, 0.04);
  color: var(--taxi-reflect);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

body:not(:has(.admin-sidebar)) .hero-chip:hover,
body:not(:has(.admin-sidebar)) .hero-chip:focus-visible {
  border-color: var(--taxi-sodium);
  background: rgba(255, 176, 32, 0.1);
  color: var(--taxi-reflect);
}

body:not(:has(.admin-sidebar)) .hero-chip__label {
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

body:not(:has(.admin-sidebar)) .hero-chip__price {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--taxi-sodium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The basis for the figure. Without it "from LKR 4,225" is a flat fare the
   quote flow would then contradict. */
body:not(:has(.admin-sidebar)) .hero-chip__note {
  font-size: 0.68rem;
  color: rgba(241, 242, 233, 0.6);
  white-space: nowrap;
}

@media (min-width: 992px) {
  body:not(:has(.admin-sidebar)) .hero-wf__rail {
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* ---------------------------------------------------------------------------
   Choose Your Ride — the capacity ladder
   ---------------------------------------------------------------------------
   Replaces a photo grid whose every image 404'd and whose stock art was wrong
   for the class it sat on. What picks a vehicle is capacity and rate, so those
   are what the card is built around; the silhouette carries recognition and
   relative size.

   Cards are equal height by grid rather than by content, which is what made
   the old row ragged when some images loaded and others did not.
   ------------------------------------------------------------------------- */

body:not(:has(.admin-sidebar)) .fleet-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

body:not(:has(.admin-sidebar)) .fleet-cls__link {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.6rem;
  height: 100%;
  padding: 1.15rem 1.25rem 1rem;
  background: #fff;
  border: 1px solid var(--taxi-line);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body:not(:has(.admin-sidebar)) .fleet-cls__link:hover,
body:not(:has(.admin-sidebar)) .fleet-cls__link:focus-visible {
  border-color: var(--taxi-logo-green);
  box-shadow: 0 4px 14px rgba(99, 10, 70, 0.09);
  transform: translateY(-2px);
}

/* The silhouettes share one viewBox and are drawn to scale against each
   other, so the box must not normalise their size — a tuk tuk is meant to
   look smaller than a bus. */
body:not(:has(.admin-sidebar)) .fleet-cls__art {
  display: block;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--taxi-line);
}

body:not(:has(.admin-sidebar)) .veh-sil {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  fill: var(--taxi-ground);
  opacity: 0.9;
  transition: fill 0.18s ease;
}

body:not(:has(.admin-sidebar)) .fleet-cls__link:hover .veh-sil {
  fill: var(--taxi-logo-green);
}

body:not(:has(.admin-sidebar)) .fleet-cls__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

body:not(:has(.admin-sidebar)) .fleet-cls__name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--taxi-ink);
  line-height: 1.25;
}

body:not(:has(.admin-sidebar)) .fleet-cls__cap {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  white-space: nowrap;
}

/* Capacity is the scan target, so it is the largest figure on the card
   after the name. */
body:not(:has(.admin-sidebar)) .fleet-cls__capn {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--taxi-ground);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

body:not(:has(.admin-sidebar)) .fleet-cls__capl {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--taxi-kerb);
}

body:not(:has(.admin-sidebar)) .fleet-cls__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--taxi-line);
}

body:not(:has(.admin-sidebar)) .fleet-cls__rate {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}

/* Tabular so the rates compare straight down the column. */
body:not(:has(.admin-sidebar)) .fleet-cls__ratev {
  font-weight: 700;
  color: var(--taxi-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body:not(:has(.admin-sidebar)) .fleet-cls__rateu {
  font-size: 0.72rem;
  color: var(--taxi-kerb);
  white-space: nowrap;
}

body:not(:has(.admin-sidebar)) .fleet-cls__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  background: var(--taxi-ground);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.18s ease;
}

body:not(:has(.admin-sidebar)) .fleet-cls__link:hover .fleet-cls__go {
  background: var(--taxi-logo-green);
}

/* The whole card is the target, so the inner button must not also be one. */
body:not(:has(.admin-sidebar)) .fleet-cls__link:focus-visible {
  outline: 2px solid var(--taxi-sodium);
  outline-offset: 2px;
}

/* Column counts that divide the ten classes exactly — 1, 2, then 5. A
   three-column grid strands the bus alone on a fourth row, which reads as a
   layout fault rather than the end of a list. */
@media (min-width: 576px) {
  body:not(:has(.admin-sidebar)) .fleet-ladder { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  body:not(:has(.admin-sidebar)) .fleet-ladder {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
  }

  /* Five columns is a narrower card, so the footer stacks rather than
     letting the rate and the button fight over one line. */
  body:not(:has(.admin-sidebar)) .fleet-cls__link { padding: 0.9rem 0.85rem 0.8rem; }
  body:not(:has(.admin-sidebar)) .fleet-cls__foot { flex-wrap: wrap; row-gap: 0.5rem; }
  body:not(:has(.admin-sidebar)) .fleet-cls__go { width: 100%; justify-content: center; }
  body:not(:has(.admin-sidebar)) .fleet-cls__name { font-size: 0.94rem; }
}

@media (min-width: 1200px) {
  body:not(:has(.admin-sidebar)) .fleet-ladder { gap: 1rem; }
  body:not(:has(.admin-sidebar)) .fleet-cls__link { padding: 1.05rem 1rem 0.9rem; }
  body:not(:has(.admin-sidebar)) .fleet-cls__go { width: auto; }
  body:not(:has(.admin-sidebar)) .fleet-cls__foot { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-sidebar)) .fleet-cls__link { transition: none; }
  body:not(:has(.admin-sidebar)) .fleet-cls__link:hover { transform: none; }
}


/* ═══════════════════════════════════════════
   TAXONOMY LABELS
   ═══════════════════════════════════════════

   One hue per destination category. The shape is identical for every label —
   only the colour differs — which is what lets a colour read as meaning
   rather than as decoration.

   To add a category: add one rule below, named for its slug. The template
   builds the class name from the category itself, so nothing else changes. */

.lt-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .02em;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Taxonomy: destination categories ─────────────────────────────
   One hue per category, at a consistent lightness so no single category
   shouts. Text colours are the dark end of the same hue, which keeps every
   pair above 4.5:1 against its own background.

   To add a category: add one rule here and use `lt-label--tax-<slug>`.
   Nothing else needs changing.                                             */
.lt-label--tax-cultural-triangle { background: #efe3d0; color: #6b4a12; }
.lt-label--tax-temple            { background: #f3e2ec; color: #6d1c4c; }
.lt-label--tax-colonial-coastal  { background: #dfe8ef; color: #1f4664; }
.lt-label--tax-national-park     { background: #dbebdd; color: #235c30; }
.lt-label--tax-hill-country      { background: #e0ebe4; color: #1f5340; }
.lt-label--tax-beach             { background: #dcecf0; color: #12545f; }
.lt-label--tax-wildlife          { background: #eae4f0; color: #4a2f6b; }

/* Fallback for a category with no rule yet — visible, not broken. */
.lt-label--tax { background: #ececef; color: #45454d; }

/* A "New" flag on a booking-type card.
   Positioned against the card, which is why the card is the relative one. */
body:not(:has(.admin-sidebar)) .booking-type-card { position: relative; }

body:not(:has(.admin-sidebar)) .bt-new {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--taxi-sodium);
    color: var(--taxi-ink);
    font-family: var(--taxi-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}

/* The lead image sits at two thirds of the prose column.
   ---------------------------------------------------------------------
   At the full 760px it dominated the page: the first thing a reader met was
   a photograph rather than the heading and the opening sentence, which are
   what tell them they are in the right place. Two thirds is wide enough to
   be the picture and narrow enough to be an illustration.

   The sizes attribute in the markup follows this — telling the browser 700px
   when the image renders at 500 makes it fetch a larger file than it needs. */
.pi-lead { max-width: 500px; }
@media (max-width: 560px) {
  /* On a phone the column is already narrow; two thirds of it is a stamp. */
  .pi-lead { max-width: 100%; }
}

/* Images on CMS-backed pages.
   ---------------------------------------------------------------------
   The aspect ratio comes from the width and height attributes rather than
   from CSS, so the space is reserved before any stylesheet is parsed. All
   this adds is the rounding and the fact that it never overflows its
   column. */
.pi-fig { margin: 0 0 18px; }
.pi-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #f1f1f1;
}

/* ───────────────────────────────────────────────────────────────────────────
   Taxi Hub mega menu.

   Opens on hover AND on keyboard focus — :focus-within is what makes it
   reachable by tab, and without it the whole hub tree is mouse-only.

   The panel is always in the DOM with real hrefs; only its visibility is
   toggled. Building it on hover would hide every link from crawlers, which
   defeats the reason for adding it.
   ─────────────────────────────────────────────────────────────────────────── */
body:not(:has(.admin-sidebar)) #topnav .navigation-menu > li.has-mega {
  position: static; /* the panel spans the bar, not the item */
}

body:not(:has(.admin-sidebar)) .mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1200;
  background: #fff;
  border-top: 3px solid var(--taxi-expressway);
  border-bottom: 1px solid var(--taxi-line);
  box-shadow: 0 18px 38px -22px rgba(36, 22, 38, 0.45);
  padding: 1.4rem 0 1.6rem;
  /* Hidden without leaving the accessibility tree mid-transition. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

body:not(:has(.admin-sidebar)) .has-mega:hover > .mega-panel,
body:not(:has(.admin-sidebar)) .has-mega:focus-within > .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body:not(:has(.admin-sidebar)) .mega-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 1.1rem 1.6rem;
}

body:not(:has(.admin-sidebar)) .mega-head {
  display: block;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--taxi-sodium-ink);
  padding-bottom: .45rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--taxi-line);
  text-decoration: none;
}

body:not(:has(.admin-sidebar)) a.mega-head:hover {
  color: var(--taxi-expressway);
}

body:not(:has(.admin-sidebar)) .mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body:not(:has(.admin-sidebar)) .mega-col li + li {
  margin-top: .1rem;
}

body:not(:has(.admin-sidebar)) .mega-col a:not(.mega-head) {
  display: block;
  padding: .26rem 0;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--taxi-ink);
  text-decoration: none;
}

body:not(:has(.admin-sidebar)) .mega-col a:not(.mega-head):hover,
body:not(:has(.admin-sidebar)) .mega-col a:not(.mega-head):focus-visible {
  color: var(--taxi-expressway);
  text-decoration: underline;
}

/* On a phone the drop-down is a nested list rather than a floating panel:
   a 5-column grid pinned to the viewport top is unusable at 360px. */
@media (max-width: 991px) {
  body:not(:has(.admin-sidebar)) .mega-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    border-bottom: 0;
    padding: .4rem 0 .8rem;
  }
  body:not(:has(.admin-sidebar)) .mega-grid {
    grid-template-columns: 1fr;
    gap: .9rem;
    padding: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Chauffeur-driven luxury tile.

   Sits above the vehicle dropdown, sodium-edged so it reads as a different
   offer rather than a repeat of the field below it.
   ─────────────────────────────────────────────────────────────────────────── */
body:not(:has(.admin-sidebar)) .chauffeur-tile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--taxi-sodium);
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    rgba(255, 176, 32, 0.08),
    rgba(255, 176, 32, 0.02)
  );
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}

body:not(:has(.admin-sidebar)) .chauffeur-tile:hover,
body:not(:has(.admin-sidebar)) .chauffeur-tile:focus-visible {
  border-color: var(--taxi-sodium-ink);
  background: rgba(255, 176, 32, 0.13);
  text-decoration: none;
}

body:not(:has(.admin-sidebar)) .chauffeur-tile.is-selected {
  border-color: var(--taxi-sodium-ink);
  background: rgba(255, 176, 32, 0.16);
  box-shadow: inset 0 0 0 1px var(--taxi-sodium-ink);
}

body:not(:has(.admin-sidebar)) .chauffeur-tile__art {
  flex: 0 0 auto;
  width: 72px;
  color: var(--taxi-sodium-ink);
}

body:not(:has(.admin-sidebar)) .chauffeur-tile__art .veh-sil {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}

body:not(:has(.admin-sidebar)) .chauffeur-tile__text {
  min-width: 0;
  flex: 1 1 auto;
}

body:not(:has(.admin-sidebar)) .chauffeur-tile__title {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--taxi-ink);
}

body:not(:has(.admin-sidebar)) .chauffeur-tile__desc {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--taxi-kerb);
}

body:not(:has(.admin-sidebar)) .chauffeur-tile__badge {
  display: inline-block;
  margin-inline-start: 0.45rem;
  padding: 0.08rem 0.42rem;
  border-radius: 3px;
  background: var(--taxi-sodium-ink);
  color: #fff;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.12em;
}

/* Only meaningful once chosen, so it is absent rather than greyed out. */
body:not(:has(.admin-sidebar)) .chauffeur-tile__tick {
  flex: 0 0 auto;
  font-size: 1.3rem;
  color: var(--taxi-sodium-ink);
  opacity: 0;
  transition: opacity .12s;
}

body:not(:has(.admin-sidebar)) .chauffeur-tile.is-selected .chauffeur-tile__tick {
  opacity: 1;
}

@media (max-width: 480px) {
  body:not(:has(.admin-sidebar)) .chauffeur-tile__art { width: 56px; }
  body:not(:has(.admin-sidebar)) .chauffeur-tile__desc { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   The chauffeur booking card.

   Deliberately the only card in the booking-type grid that is not brand
   green. It is a different kind of offer — a car and a chauffeur for a
   period rather than a journey — and it was asked to read as separate from
   the others rather than as a fifth of the same thing.
   ─────────────────────────────────────────────────────────────────────────── */
body:not(:has(.admin-sidebar)) .booking-type-card--chauffeur {
  border: 1px solid var(--taxi-sodium);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.18);
  background: linear-gradient(
    180deg,
    rgba(255, 176, 32, 0.055),
    rgba(255, 255, 255, 0) 46%
  ) !important;
}

body:not(:has(.admin-sidebar)) .booking-type-card--chauffeur:hover {
  border-color: var(--taxi-sodium-ink);
}

body:not(:has(.admin-sidebar)) .bt-new--premium {
  background: var(--taxi-sodium-ink);
  color: #fff;
}

body:not(:has(.admin-sidebar)) .bt-cta-chauffeur {
  background: var(--taxi-sodium-ink);
  border-color: var(--taxi-sodium-ink);
  color: #fff;
}

body:not(:has(.admin-sidebar)) a:hover .bt-cta-chauffeur {
  background: var(--taxi-ink);
  border-color: var(--taxi-ink);
  color: #fff;
}

/* ───────────────────────────────────────────────────────────────────────────
   District map. Leaflet, our own boundary file, pins from our own table.
   ─────────────────────────────────────────────────────────────────────────── */
body:not(:has(.admin-sidebar)) .district-map-wrap {
  border: 1px solid var(--taxi-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--taxi-surface);
}

body:not(:has(.admin-sidebar)) .district-map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--taxi-line);
}

body:not(:has(.admin-sidebar)) .district-map-title {
  font-weight: 600;
  color: var(--taxi-ink);
}

body:not(:has(.admin-sidebar)) .district-map-sub {
  font-size: 0.82rem;
  color: var(--taxi-kerb);
  font-variant-numeric: tabular-nums;
}

body:not(:has(.admin-sidebar)) .district-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

body:not(:has(.admin-sidebar)) .map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--taxi-line);
  background: #fff;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.8rem;
  color: var(--taxi-kerb);
  cursor: pointer;
}

/* Off is the state that needs marking, because on is the default. */
body:not(:has(.admin-sidebar)) .map-toggle:not(.is-on) {
  opacity: 0.45;
  text-decoration: line-through;
}

body:not(:has(.admin-sidebar)) .map-toggle:focus-visible {
  outline: 2px solid var(--taxi-sodium-ink);
  outline-offset: 2px;
}

body:not(:has(.admin-sidebar)) .map-toggle .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
body:not(:has(.admin-sidebar)) .dot--hotel { background: #630A46; }
body:not(:has(.admin-sidebar)) .dot--attraction { background: #A35A00; }
body:not(:has(.admin-sidebar)) .dot--city { background: #4C6C14; }
body:not(:has(.admin-sidebar)) .dot--airport { background: #1F5FA8; }

body:not(:has(.admin-sidebar)) .district-map {
  height: 520px;
  width: 100%;
  background: var(--taxi-reflect);
}

@media (max-width: 640px) {
  body:not(:has(.admin-sidebar)) .district-map { height: 380px; }
}

body:not(:has(.admin-sidebar)) .district-map-foot {
  padding: 9px 16px;
  font-size: 0.74rem;
  color: var(--taxi-kerb);
  border-top: 1px solid var(--taxi-line);
}

/* "New to the platform" — a badge, not an absence.
   A real driver who has not completed a booking yet has nothing to show in
   the trips line, and a blank space there reads as something withheld. The
   badge states the fact instead, in a colour that reads as informational
   rather than as a warning. Amber on a pale amber ground clears WCAG AA at
   this size; the border carries the shape for anyone who cannot see the
   fill. */
.driver-new {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid #E0A800;
    border-radius: 999px;
    background: #FFF8E1;
    color: #6B4E00;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}