/*
 * Booking widget — overlay on top of the Vuexy Bootstrap 5 dark bundle.
 *
 * Palette and type are taken from the amheer.com marketing site the widget is
 * embedded into, so the iframe reads as part of the page rather than a panel
 * dropped onto it. Bootstrap supplies the grid, form controls and buttons.
 */

/* Outfit, self-hosted. One variable file per subset covers 300-700. */
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/Outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/Outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Brand blue. It is darker than every surface here, so it is only ever a
       fill under white text; anything that has to read *on* the panel — rules,
       focus rings, icons — uses the lighter tint of the same hue instead. */
    --wx-blue: #002559;
    --wx-blue-hover: #0a3c7f;
    --wx-accent: #3c6fb8;
    --wx-accent-soft: rgba(60, 111, 184, 0.16);

    /* Site background, so the iframe blends into the host page. */
    --wx-bg: #030b1d;
    /* Solid, not translucent: letting the photograph through put a moving
       backdrop behind the form, and the fields lost their edge wherever
       something bright fell behind them. */
    --wx-panel: #050b17;
    --wx-surface: #0a142c;
    --wx-surface-2: #0d1a38;
    --wx-border: #16244a;
    --wx-border-strong: #1e2f5c;

    /* Overridden inline by the view when a hero photograph is configured.
       The gradient is the fallback, not a placeholder — the hero has to look
       finished with no image present. */
    --wx-hero: linear-gradient(118deg, #071229 0%, #0e1c3a 46%, #1b2c50 100%);

    --wx-text: #ffffff;
    --wx-muted: #8b9ab8;
    --wx-radius: 10px;
    --wx-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------ shell */

html,
body {
    background: var(--wx-bg) !important;
    color: var(--wx-text);
}

/* Embedded, the host page owns the backdrop: the document has to be
   transparent for the translucent panel to have anything to sit on. Set from
   the layout before first paint. Standalone keeps the solid navy. */
html.wx-embedded,
html.wx-embedded body {
    background: transparent !important;
}

/* Vuexy sets :root { color-scheme: dark }, under which the browser paints its
   own opaque canvas behind a transparent root — the panel would sit on flat
   #121212 instead of the host page. Every control here carries an explicit
   background, so dropping the scheme costs nothing. */
html.wx-embedded {
    color-scheme: normal;
}

body {
    font-family: var(--wx-font) !important;
    /* Embedded in an iframe: the host page owns the outer scroll. */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.wx-app,
.wx-app button,
.wx-app input,
.wx-app select,
.wx-app textarea {
    font-family: var(--wx-font);
}

.wx-app {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 48px;
    background: var(--wx-panel);
    border-radius: 16px;
}

/* ------------------------------------------------------------------- hero */

/* Step 1 sits in a full-height hero: photograph behind, headline on the left,
   the booking panel on the right. The section stays in the DOM for every step
   and is collapsed by .is-flow below, so moving between steps never remounts
   the panel — Maps, Stripe and the pickers all stay warm. */
.wx-shell.is-hero .wx-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--wx-bg);
    /* No scrim: the photograph is shown at its own exposure. What keeps the
       headline readable over a daylit window is the shadow on the type itself
       — see .wx-hero__title — rather than darkening the image to suit it. */
    background-image: var(--wx-hero);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wx-shell.is-hero .wx-hero__inner {
    width: 100%;
    /* A contained column, not the full viewport: the indent this leaves on the
       left is part of the composition, and it is what keeps the headline
       wrapping to short lines instead of running the width of the screen. */
    max-width: 1140px;
    margin: 0 auto;
    padding: 56px clamp(20px, 4vw, 50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 50px);
}

.wx-shell.is-hero .wx-hero__copy {
    flex: 1 1 auto;
    max-width: 560px;
    /* Hung from the bottom of the row, not centred in it. The panel is the tall
       item, so the row's content box is the panel's height and this lands the
       copy's last line just inside the panel's lower edge — which is what sets
       the headline's height on the page. Centring it instead floats the copy
       up as the panel grows. */
    align-self: flex-end;
    margin-bottom: clamp(16px, 4.7vh, 44px);
}

.wx-shell.is-hero .wx-app {
    flex: 0 0 430px;
    max-width: 430px;
    margin: 0;
    padding: 30px 26px 34px;
}

.wx-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--wx-text);
    margin: 0;
    /* The only thing holding the headline up now that the image is undimmed:
       a tight shadow for edge contrast against light areas, and a wide soft one
       to seat the block on whatever falls behind it. */
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.6),
        0 4px 30px rgba(0, 0, 0, 0.75);
}

.wx-hero__sub {
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.65;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.65),
        0 3px 22px rgba(0, 0, 0, 0.8);
}

.wx-quoting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    color: var(--wx-muted);
    font-size: 0.95rem;
}

/* Past the search the hero has nothing left to say and the vehicle list needs
   the width, so the section flattens back to a plain page. */
.wx-shell.is-flow .wx-hero {
    min-height: 0;
    display: block;
    background: none;
}

.wx-shell.is-flow .wx-hero__inner {
    display: block;
    max-width: none;
    padding: 0;
}

.wx-shell.is-flow .wx-hero__copy {
    display: none;
}

/* .is-hero is static on the shell so the photograph paints without waiting for
   Vue, which means it is still matching here — the panel has to be handed its
   full width back explicitly rather than by the hero rule falling away. */
.wx-shell.is-flow .wx-app {
    flex: none;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

/* ------------------------------------------------------------------- bare */

/* The panel on its own, which is the default and what every embed gets: a host
   site has already designed the page this sits in, and a photograph of ours
   would only stack a second one behind theirs. The hero wrappers are still in
   the markup — see index.blade.php — so they are flattened rather than hidden.

   Only ?hero=1 takes the .is-hero branch above instead. */
.wx-shell.is-bare .wx-hero {
    min-height: 0;
    display: block;
    background: none;
}

.wx-shell.is-bare .wx-hero__inner {
    display: block;
    max-width: none;
    padding: 0;
}

/* Same two widths the hero presentation uses: a narrow card for the search,
   the full panel from the vehicle list on. Both classes are on the shell, so
   this outweighs the .is-flow rule above and has to restate the width.

   The border and shadow are what make it read as a card: the panel and the
   surface behind it are near enough the same navy that without them the form
   looks loose on the background. Applied either way — a host page is as likely
   to sit it on a dark backdrop as our own page is. */
.wx-shell.is-bare .wx-app {
    flex: none;
    max-width: 430px;
    margin: 0 auto;
    padding: 30px 26px 34px;
    border: 1px solid var(--wx-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.wx-shell.is-bare.is-flow .wx-app {
    max-width: 900px;
    padding: 28px 20px 48px;
}

/* Standing on its own page the panel wants air around it. */
.wx-shell.is-bare {
    padding: clamp(20px, 6vh, 56px) 16px;
}

/* Embedded the host owns the spacing, but not zero: the shadow needs somewhere
   to fall, and a card flush against the frame edge reads as clipped. Small and
   fixed rather than the viewport-relative padding above, so the frame heights
   in EMBED.md stay predictable. */
html.wx-embedded .wx-shell.is-bare {
    padding: 14px;
}

/* An embed that asked for the hero anyway still drops the photograph: the host
   page has its own behind the frame. */
html.wx-embedded .wx-shell.is-hero .wx-hero {
    min-height: 0;
    display: block;
    background: none;
}

html.wx-embedded .wx-shell.is-hero .wx-hero__inner {
    display: block;
    max-width: none;
    padding: 0;
}

html.wx-embedded .wx-shell.is-hero .wx-hero__copy {
    display: none;
}

html.wx-embedded .wx-shell.is-hero .wx-app {
    flex: none;
    margin: 0 auto;
}

/* Stacked: the headline leads, the panel follows it down the page. The
   photograph stays, since it is most of what the screen is at this width. */
@media (max-width: 991.98px) {
    /* min-height stays 100vh: stacked, the content is usually shorter than the
       viewport, and dropping it would end the photograph mid-screen with a band
       of flat navy under it. */
    .wx-shell.is-hero .wx-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: 48px clamp(16px, 5vw, 40px);
    }

    .wx-shell.is-hero .wx-hero__copy {
        max-width: none;
    }

    .wx-shell.is-hero .wx-app {
        flex: none;
        margin: 0 auto;
        width: 100%;
    }

    .wx-hero__sub {
        max-width: none;
    }
}

/* Brand lockup, shown above the tabs on step 1. The mark is the gold
   infinity; the wordmark is set rather than imaged, as the only lockup asset
   we hold sets "amheer" in navy, which this panel would swallow. */
.wx-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 26px;
}

.wx-brand__mark {
    height: 19px;
    width: auto;
}

.wx-brand__word {
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.38em;
    /* Tracking leaves a trailing gap that would push the lockup off centre. */
    margin-right: -0.38em;
    color: var(--wx-text);
}

/* Hide the in-DOM template until Vue has compiled it. */
[v-cloak] {
    display: none !important;
}

/* Section headings mirror the site: solid white lead, muted tail. */
.wx-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--wx-text);
    margin: 0;
}

.wx-title small,
.wx-title .wx-title__soft {
    color: var(--wx-muted);
    font-size: inherit;
    font-weight: inherit;
}

.wx-muted {
    color: var(--wx-muted);
}

.wx-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wx-accent);
    margin-bottom: 8px;
}

/* ------------------------------------------------------------- step tabs */

.wx-tabs {
    display: flex;
    border-bottom: 1px solid var(--wx-border);
    margin-bottom: 28px;
}

.wx-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--wx-muted);
    padding: 14px 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.wx-tab:hover {
    color: var(--wx-text);
}

.wx-tab.is-active {
    color: var(--wx-text);
    border-bottom-color: var(--wx-accent);
}

/* -------------------------------------------------- floating label fields */

.wx-field {
    position: relative;
    margin-bottom: 14px;
}

.wx-field > label {
    position: absolute;
    top: 9px;
    left: 16px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--wx-muted);
    pointer-events: none;
    transition: color 0.15s ease;
}

/* background-color, not the background shorthand — the shorthand would reset
   background-image and take Bootstrap's select chevron with it. */
.wx-field .form-control,
.wx-field .form-select {
    background-color: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    color: var(--wx-text);
    height: auto;
    padding: 26px 16px 10px;
    font-size: 0.92rem;
    width: 100%;
}

.wx-field .form-control::placeholder {
    color: transparent;
}

.wx-field .form-control:hover,
.wx-field .form-select:hover {
    border-color: var(--wx-border-strong);
}

/* !important is not decoration here: the Vuexy theme sets
   .form-control:focus { border-color: #FDD765 !important }, so without it every
   field focuses gold. Same reason for the two picker rules further down. */
.wx-field .form-control:focus,
.wx-field .form-select:focus {
    background-color: var(--wx-surface);
    border-color: var(--wx-accent) !important;
    box-shadow: 0 0 0 3px var(--wx-accent-soft) !important;
    color: var(--wx-text);
    outline: none;
}

.wx-field:focus-within > label {
    color: var(--wx-accent);
}

.wx-field .form-select {
    /* Clear the chevron Bootstrap paints at the right edge. */
    padding-right: 40px;
    background-position: right 14px center;
}

.wx-field textarea.form-control {
    min-height: 104px;
    resize: vertical;
}

/* Native date/time pickers render dark and need a visible indicator. */
.wx-field input[type="date"],
.wx-field input[type="time"] {
    color-scheme: dark;
}

/* --------------------------------------------------------- flatpickr */

/* flatpickr swaps in an altInput sibling and hides the original; the styling
   above targets .form-control, which altInput inherits via inputClass. */
.wx-field--picker .form-control {
    cursor: pointer;
    padding-right: 42px;
}

.wx-field__icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wx-muted);
    pointer-events: none;
    font-size: 1.05rem;
}

.wx-field--picker:focus-within .wx-field__icon {
    color: var(--wx-accent);
}

/* Its dark theme repaints readonly inputs at a specificity a field selector
   cannot reach; without this the date box sits two shades lighter than the
   time box beside it. */
.wx-field .flatpickr-input[readonly],
.wx-field .flatpickr-input ~ .form-control[readonly] {
    background-color: var(--wx-surface) !important;
}

.dark-style .flatpickr-calendar {
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    font-family: var(--wx-font);
}

.dark-style .flatpickr-calendar.arrowTop::before,
.dark-style .flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--wx-surface-2);
}

.dark-style .flatpickr-calendar.arrowBottom::before,
.dark-style .flatpickr-calendar.arrowBottom::after {
    border-top-color: var(--wx-surface-2);
}

.dark-style .flatpickr-days,
.dark-style .flatpickr-weeks,
.dark-style .flatpickr-months,
.dark-style .flatpickr-month,
.dark-style .flatpickr-current-month,
.dark-style .flatpickr-weekdays,
.dark-style span.flatpickr-weekday {
    background: transparent;
    color: var(--wx-text);
    fill: var(--wx-text);
}

.dark-style span.flatpickr-weekday {
    color: var(--wx-muted);
    font-weight: 500;
}

.dark-style .flatpickr-prev-month,
.dark-style .flatpickr-next-month {
    background-color: transparent;
}

.dark-style .flatpickr-months .flatpickr-prev-month svg,
.dark-style .flatpickr-months .flatpickr-next-month svg {
    fill: var(--wx-muted);
}

.dark-style .flatpickr-months .flatpickr-prev-month:hover svg,
.dark-style .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--wx-accent);
}

.dark-style .flatpickr-day {
    color: var(--wx-text);
    border-radius: 8px;
}

.dark-style .flatpickr-day:hover {
    background: var(--wx-border);
    border-color: var(--wx-border);
}

.dark-style .flatpickr-day.today {
    border-color: var(--wx-accent);
}

.dark-style .flatpickr-day.selected,
.dark-style .flatpickr-day.selected:hover,
.dark-style .flatpickr-day.selected:focus,
.dark-style .flatpickr-day.selected.prevMonthDay,
.dark-style .flatpickr-day.selected.nextMonthDay {
    background: var(--wx-accent) !important;
    border-color: var(--wx-accent) !important;
    color: #fff !important;
    font-weight: 600;
}

.dark-style .flatpickr-day.inRange,
.dark-style .flatpickr-day.prevMonthDay.inRange,
.dark-style .flatpickr-day.nextMonthDay.inRange {
    background: var(--wx-border) !important;
    border-color: var(--wx-border) !important;
    color: var(--wx-text) !important;
}

.dark-style .flatpickr-day.flatpickr-disabled,
.dark-style .flatpickr-day.prevMonthDay,
.dark-style .flatpickr-day.nextMonthDay {
    color: rgba(139, 154, 184, 0.4);
}

.dark-style .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--wx-muted);
}

.dark-style .numInputWrapper span.arrowDown:after {
    border-top-color: var(--wx-muted);
}

.dark-style .numInputWrapper:hover {
    background: transparent;
}

.dark-style .flatpickr-time input,
.dark-style .flatpickr-time .flatpickr-time-separator,
.dark-style .flatpickr-time .flatpickr-am-pm {
    color: var(--wx-text);
    background: transparent;
}

.dark-style .flatpickr-time input:hover,
.dark-style .flatpickr-time input:focus,
.dark-style .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--wx-border);
}

.dark-style .flatpickr-innerContainer,
.dark-style .flatpickr-time {
    border-color: var(--wx-border);
}

/* -------------------------------------------------- intl-tel-input */

.wx-field--tel .iti {
    width: 100%;
    display: block;
}

/* The flag/dial-code block sits inside the field, so the input needs room
   for it on the left in place of the usual padding. */
.wx-field--tel .iti--separate-dial-code .iti__selected-flag {
    background: transparent;
    border-radius: var(--wx-radius) 0 0 var(--wx-radius);
    /* Sits on the value line, leaving the label its row above. */
    padding-top: 24px;
}

.wx-field--tel .iti--separate-dial-code .iti__selected-dial-code {
    color: var(--wx-text);
    font-size: 0.92rem;
}

.wx-field--tel .iti--separate-dial-code input.form-control {
    padding-left: 96px;
}

/* Label keeps the same 16px indent as every other field, sitting in the space
   above the flag rather than beside it. The z-index is required: the plugin
   wraps the input in a position:relative .iti that follows the label in the
   DOM, so without one the input's opaque background paints over it. */
.wx-field--tel > label {
    left: 16px;
    z-index: 3;
}

.wx-field--tel .iti__arrow {
    border-top-color: var(--wx-muted);
}

.wx-field--tel .iti__arrow--up {
    border-bottom-color: var(--wx-muted);
}

/* Country dropdown */
.iti__country-list {
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    font-family: var(--wx-font);
    color: var(--wx-text);
    max-height: 260px;
}

.iti__country {
    padding: 8px 12px;
    font-size: 0.88rem;
}

.iti__country.iti__highlight {
    background-color: var(--wx-border);
}

.iti__dial-code {
    color: var(--wx-muted);
}

.iti__divider {
    border-bottom-color: var(--wx-border-strong);
}

.iti__country-list::-webkit-scrollbar {
    width: 8px;
}

.iti__country-list::-webkit-scrollbar-track {
    background: transparent;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: var(--wx-border-strong);
    border-radius: 4px;
}

.wx-field-error {
    color: #ff9b9d;
    font-size: 0.78rem;
    margin: -8px 0 14px 2px;
}

/* ------------------------------------------------- jquery-timepicker */

/* The dropdown is appended to <body>, outside our stacking context. */
.dark-style .ui-timepicker-wrapper {
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    z-index: 10000;
    font-family: var(--wx-font);
    outline: none;
    /* Plugin defaults are a 105px-wide, 150px-tall box — too cramped to
       scan a 15-minute ladder. */
    min-width: 160px;
    max-height: 264px;
}

.dark-style .ui-timepicker-list {
    background: transparent;
}

.dark-style .ui-timepicker-list li {
    color: var(--wx-text);
    font-size: 0.9rem;
    padding: 7px 14px;
}

.dark-style .ui-timepicker-list li:hover,
.dark-style .ui-timepicker-list li.ui-timepicker-selected:hover {
    background: var(--wx-border);
    color: var(--wx-text);
}

.dark-style .ui-timepicker-list li.ui-timepicker-disabled,
.dark-style .ui-timepicker-list li.ui-timepicker-disabled:hover {
    background: transparent !important;
    color: rgba(139, 154, 184, 0.4) !important;
}

.dark-style .ui-timepicker-list li.ui-timepicker-selected,
.dark-style .ui-timepicker-list .ui-timepicker-selected:hover {
    background: var(--wx-accent) !important;
    color: #fff !important;
    font-weight: 600;
}

.dark-style .ui-timepicker-list li.ui-timepicker-disabled {
    color: rgba(139, 154, 184, 0.4);
}

.dark-style .ui-timepicker-duration {
    color: var(--wx-muted);
}

.dark-style .ui-timepicker-list li.ui-timepicker-selected .ui-timepicker-duration {
    color: rgba(255, 255, 255, 0.75);
}

/* Scrollbar inside the list, so it does not render as a light strip. */
.dark-style .ui-timepicker-wrapper::-webkit-scrollbar {
    width: 8px;
}

.dark-style .ui-timepicker-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.dark-style .ui-timepicker-wrapper::-webkit-scrollbar-thumb {
    background: var(--wx-border-strong);
    border-radius: 4px;
}

/* -------------------------------------------------------------- toggles */

.wx-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.92rem;
}

.wx-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    border: none;
    background: #22315c;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.wx-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

/* The lighter tint, not the brand blue: #002559 against the #22315c off state
   is barely a state change. */
.wx-toggle.is-on {
    background: var(--wx-accent);
}

.wx-toggle.is-on::after {
    transform: translateX(20px);
    background: #fff;
}

/* ---------------------------------------------------------- blue button */

.wx-btn {
    display: block;
    width: 100%;
    background-color: var(--wx-blue);
    border: none;
    border-bottom-color: var(--wx-blue);
    color: #fff;
    border-radius: var(--wx-radius);
    padding: 15px;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* Lighter on hover, not darker: #002559 is already close to black. */
.wx-btn:hover:not(:disabled) {
    background-color: var(--wx-blue-hover);
}

.wx-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wx-btn-ghost {
    background: none;
    border: 1px solid var(--wx-border-strong);
    color: var(--wx-muted);
    border-radius: var(--wx-radius);
    padding: 10px 20px;
    font-size: 0.86rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.wx-btn-ghost:hover {
    color: var(--wx-text);
    border-color: var(--wx-muted);
}

/* ------------------------------------------- fleet rows (full horizontal) */

.wx-pill {
    display: inline-block;
    background: rgba(40, 199, 111, 0.14);
    color: #4ade80;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 6px 13px;
    border-radius: 999px;
}

.wx-fleet {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wx-fleet:hover {
    border-color: var(--wx-border-strong);
    background: var(--wx-surface-2);
}

.wx-fleet.is-selected {
    border-color: var(--wx-accent);
    box-shadow: 0 0 0 1px var(--wx-accent);
}

.wx-fleet__img {
    width: 190px;
    height: 96px;
    object-fit: contain;
    flex-shrink: 0;
}

.wx-fleet__info {
    flex: 1;
    min-width: 0;
}

.wx-fleet__name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 2px;
}

.wx-fleet__sub {
    color: var(--wx-muted);
    font-size: 0.84rem;
    margin-bottom: 10px;
}

.wx-fleet__range {
    display: inline-block;
    background-color: var(--wx-blue);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.wx-fleet__meta {
    display: flex;
    gap: 18px;
    color: var(--wx-muted);
    font-size: 0.84rem;
    margin-top: 10px;
}

.wx-fleet__price {
    text-align: right;
    flex-shrink: 0;
    min-width: 150px;
}

.wx-fleet__fare {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--wx-text);
    line-height: 1.2;
}

.wx-fleet__note {
    color: var(--wx-muted);
    font-size: 0.72rem;
    margin-top: 4px;
}

.wx-fleet__cta {
    margin-top: 10px;
    background: none;
    border: 1px solid var(--wx-accent);
    color: var(--wx-accent);
    border-radius: 8px;
    padding: 7px 20px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    width: 100%;
}

.wx-fleet.is-selected .wx-fleet__cta,
.wx-fleet:hover .wx-fleet__cta {
    background-color: var(--wx-blue);
    border-color: var(--wx-blue);
    color: #fff;
}

@media (max-width: 767.98px) {
    .wx-fleet {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        text-align: center;
    }

    .wx-fleet__img {
        width: 100%;
        height: 120px;
    }

    .wx-fleet__meta {
        justify-content: center;
    }

    .wx-fleet__price {
        text-align: center;
        min-width: 0;
    }
}

/* ------------------------------------------------------- feature cards */

/* Stretches via the column's flex-grow rather than height:100%, which
   overflowed the column by the height of the label sitting above it. */
.wx-feature {
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
}

.wx-feature__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* A small icon chip, not a photograph: the widget carries no imagery of
   people. */
.wx-feature__media {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wx-feature__media > i {
    font-size: 1.35rem;
    color: var(--wx-accent);
}

.wx-feature__body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wx-feature__body p {
    color: var(--wx-muted);
    font-size: 0.84rem;
    line-height: 1.6;
    flex: 1;
}

/* -------------------------------------------------------- fare summary */

.wx-summary {
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: 14px;
    padding: 20px;
}

.wx-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--wx-muted);
    padding: 6px 0;
}

/* Pickup → drop-off, joined by a connector line down the gutter. */
.wx-route {
    border-bottom: 1px solid var(--wx-border);
    padding-bottom: 14px;
    margin-bottom: 10px;
}

.wx-route__leg {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wx-route__leg + .wx-route__leg {
    margin-top: 14px;
}

.wx-route__leg:first-child::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 16px;
    bottom: -14px;
    width: 1px;
    background: var(--wx-border-strong);
}

.wx-route__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wx-accent);
    flex-shrink: 0;
    margin-top: 6px;
}

.wx-route__dot--end {
    background: none;
    border: 2px solid var(--wx-accent);
}

.wx-route__label {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--wx-muted);
}

.wx-route__place {
    color: var(--wx-text);
    font-size: 0.92rem;
    line-height: 1.4;
}

.wx-summary__row.is-total {
    border-top: 1px solid var(--wx-border);
    margin-top: 10px;
    padding-top: 14px;
    color: var(--wx-text);
    font-size: 1.1rem;
    font-weight: 600;
}

/* ------------------------------------------------------ payment method */

.wx-pay {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.wx-pay__opt {
    flex: 1;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    padding: 15px;
    color: var(--wx-muted);
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.wx-pay__opt:hover {
    border-color: var(--wx-border-strong);
}

.wx-pay__opt.is-active {
    border-color: var(--wx-accent);
    color: var(--wx-accent);
    background: var(--wx-accent-soft);
}

/* Stripe Elements renders in its own iframe, so it only needs a frame. */
.wx-stripe {
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    padding: 17px 16px;
}

.wx-stripe.is-focused {
    border-color: var(--wx-accent);
    box-shadow: 0 0 0 3px var(--wx-accent-soft);
}

/* -------------------------------------------------------------- states */

.wx-alert {
    background: rgba(224, 87, 91, 0.1);
    border: 1px solid rgba(224, 87, 91, 0.35);
    color: #ff9b9d;
    border-radius: var(--wx-radius);
    padding: 13px 16px;
    font-size: 0.86rem;
    margin-bottom: 16px;
}

.wx-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wx-spin 0.6s linear infinite;
    vertical-align: -3px;
    margin-right: 8px;
}

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

.wx-success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--wx-blue);
    /* The fill is darker than the panel, so it needs an edge to read as a
       disc rather than a hole. */
    border: 1px solid var(--wx-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    margin: 0 auto 22px;
}

.wx-ref {
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 12px;
    text-align: left;
}

.wx-ref__id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--wx-accent);
    font-size: 1rem;
    font-weight: 600;
}

/* Google's Places dropdown is appended to <body>, outside our stacking
   context, so it needs styling and a z-index of its own. */
.pac-container {
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
    border-radius: 8px;
    z-index: 10000;
    font-family: var(--wx-font);
}

.pac-item {
    color: var(--wx-muted);
    border-top-color: var(--wx-border);
    padding: 9px 13px;
}

.pac-item:hover,
.pac-item-selected {
    background: var(--wx-surface);
}

.pac-item-query {
    color: var(--wx-text);
}

@media (max-width: 575.98px) {
    .wx-app,
    .wx-shell.is-hero .wx-app,
    .wx-shell.is-bare .wx-app,
    .wx-shell.is-bare.is-flow .wx-app {
        padding: 22px 16px 32px;
    }

    /* Tight, but not to the edge: the panel is a bordered card and running it
       flush cuts its own outline off against the viewport. */
    .wx-shell.is-bare {
        padding: 16px 12px;
    }

    .wx-hero__sub {
        font-size: 0.94rem;
    }

    .wx-pay {
        flex-direction: column;
    }

    .wx-title {
        font-size: 1.25rem;
    }
}