/* Booking wizard, confirmation, manage (/book/*, /booking/*, /my-booking). */
@import 'tailwindcss' source(none);
@import './core/theme.css';
@import './core/fonts.css';
@import './core/base.css';
@import './core/components.css';

@source '../views/components';
@source '../views/components/address-autocomplete.blade.php';
@source '../views/components/date-time-picker.blade.php';
@source not '../views/components/media-picker.blade.php';
@source '../views/layouts/base.blade.php';
@source '../views/layouts/booking.blade.php';
@source '../views/layouts/booking';
@source '../js/ui';
@source '../../app/Modules/Booking/Views';
@source '../../app/Modules/Styleguide/Views/previews/booking.blade.php';

@layer components {
    .booking-wizard {
        --bw-radius: 1rem;
        color: var(--ink);
    }

    .booking-shell {
        display: grid;
        gap: 1.75rem;
        align-items: start;
    }

    @media (width >= 64rem) {
        .booking-shell {
            grid-template-columns: minmax(0, 1fr) 22rem;
            gap: 2.5rem;
        }
    }

    .booking-main {
        min-width: 0;
        display: grid;
        gap: 1.25rem;
        /* Keep sticky Continue/Back from covering extras and lower fields. */
        padding-bottom: 5.5rem;
    }

    .booking-panel__head {
        margin-bottom: 1.15rem;
    }

    .booking-panel__eyebrow {
        margin: 0 0 .35rem;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-sky-700);
    }

    .booking-panel__title {
        margin: 0;
        font-size: clamp(1.45rem, 2.4vw, 1.9rem);
        font-weight: 800;
        letter-spacing: -.035em;
        line-height: 1.12;
        color: var(--ink);
    }

    .booking-panel__lede {
        margin: .45rem 0 0;
        color: var(--ink-muted);
        max-width: 38rem;
        line-height: 1.5;
    }

    .booking-group {
        display: grid;
        gap: .75rem;
        margin-top: 1.25rem;
        padding: 1rem 1.05rem;
        border-radius: 1.05rem;
        border: 1px solid var(--line);
        background: color-mix(in oklab, var(--surface-sunken) 45%, var(--surface));
    }

    .booking-group__title {
        margin: 0;
        font-size: .95rem;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .booking-group__title .opt,
    .opt {
        font-weight: 500;
        color: var(--ink-muted);
        font-size: .82rem;
    }

    .booking-route {
        display: grid;
        grid-template-columns: 1.1rem minmax(0, 1fr);
        gap: .85rem;
        margin-top: 1rem;
        padding: 1rem 1.05rem;
        border-radius: 1.15rem;
        border: 1px solid var(--line);
        background: linear-gradient(180deg, color-mix(in oklab, var(--color-navy-50) 70%, var(--surface)), var(--surface));
    }

    .booking-route__rail {
        display: grid;
        grid-template-rows: auto 1fr auto;
        justify-items: center;
        padding-block: 1.9rem .9rem;
    }

    .booking-route__dot {
        width: .7rem;
        height: .7rem;
        border-radius: 999px;
        box-shadow: 0 0 0 4px color-mix(in oklab, var(--surface) 90%, #fff);
    }

    .booking-route__dot--a { background: var(--color-teal-400); }
    .booking-route__dot--b { background: var(--color-sky-600); }

    .booking-route__line {
        width: 2px;
        margin-block: .35rem;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--color-teal-400), var(--color-sky-500));
        opacity: .55;
    }

    .booking-route__fields {
        display: grid;
        gap: .85rem;
        min-width: 0;
    }

    .booking-party {
        display: grid;
        gap: .75rem;
    }

    @media (width >= 40rem) {
        .booking-party {
            grid-template-columns: 1fr 1fr;
        }
    }

    .booking-stepper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        min-height: 3.1rem;
        padding: .55rem .8rem;
        border-radius: .9rem;
        border: 1px solid var(--line);
        background: var(--surface);
        font-size: .85rem;
        font-weight: 700;
    }

    .booking-stepper div {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
    }

    .booking-stepper button {
        width: 2.1rem;
        height: 2.1rem;
        border: 0;
        border-radius: 999px;
        background: var(--surface-sunken);
        color: var(--ink);
        font-size: 1.05rem;
        font-weight: 700;
        cursor: pointer;
    }

    .booking-stepper strong {
        min-width: 1.4rem;
        text-align: center;
        font-size: 1.1rem;
    }

    .booking-grid {
        display: grid;
        gap: .9rem;
    }

    @media (width >= 40rem) {
        .booking-grid {
            grid-template-columns: 1fr 1fr;
        }

        .booking-field--sm {
            max-width: 7rem;
        }
    }

    .booking-field {
        display: grid;
        gap: .35rem;
        font-size: .88rem;
        font-weight: 600;
        color: var(--ink);
    }

    .booking-field--full {
        grid-column: 1 / -1;
    }

    .booking-field .opt {
        font-weight: 500;
        color: var(--ink-muted);
    }

    .booking-field input,
    .booking-field select,
    .booking-field textarea {
        min-height: 2.75rem;
        width: 100%;
        border-radius: .75rem;
        border: 1px solid var(--line);
        background: var(--surface);
        padding: .65rem .85rem;
        font: inherit;
        font-weight: 500;
        color: var(--ink);
    }

    .booking-field textarea {
        min-height: 5.5rem;
        resize: vertical;
    }

    .booking-field em,
    .booking-field__error,
    .booking-error {
        margin: 0;
        font-style: normal;
        font-size: .82rem;
        font-weight: 600;
        line-height: 1.35;
        color: var(--danger-ink, #b42318);
    }

    .booking-field.is-invalid input,
    .booking-field.is-invalid select,
    .booking-field.is-invalid textarea,
    .booking-field.is-invalid .address-ac__input-wrap input,
    .booking-field.is-invalid .dt-picker__trigger {
        border-color: color-mix(in oklab, #b42318 55%, var(--line));
        box-shadow: 0 0 0 3px color-mix(in oklab, #b42318 18%, transparent);
    }

    .booking-check.is-invalid {
        color: var(--danger-ink, #b42318);
    }

    .booking-seg {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .3rem;
        margin-bottom: 1rem;
        padding: .28rem;
        border-radius: .85rem;
        background: color-mix(in oklab, var(--color-navy-900) 5%, var(--surface-sunken));
    }

    .booking-seg--compact {
        margin-bottom: .85rem;
    }

    .booking-seg__btn {
        min-height: 2.5rem;
        border: 0;
        border-radius: .65rem;
        background: transparent;
        font: inherit;
        font-weight: 700;
        color: var(--ink-muted);
        cursor: pointer;
    }

    .booking-seg__btn.is-active {
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 .25rem .7rem rgb(19 43 82 / .1);
    }

    .booking-airports {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
        margin: 0 0 .75rem;
    }

    .booking-chip {
        min-height: 2.15rem;
        padding: .4rem .85rem;
        border-radius: 999px;
        border: 1px solid color-mix(in oklab, var(--color-navy-900) 12%, transparent);
        background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--color-sky-50) 55%, var(--surface)));
        color: var(--color-navy-900);
        font: inherit;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer;
        transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .booking-chip:hover {
        border-color: var(--color-sky-500);
        box-shadow: 0 .35rem .9rem rgb(19 43 82 / .12);
        transform: translateY(-1px);
    }


    .vehicle-grid,
    .extras-grid,
    .account-grid,
    .pay-grid {
        display: grid;
        gap: .75rem;
    }

    @media (width >= 40rem) {
        .vehicle-grid {
            grid-template-columns: 1fr 1fr;
        }

        .account-grid,
        .pay-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    .vehicle-card,
    .account-card,
    .pay-card,
    .extra-chip {
        position: relative;
        border-radius: var(--bw-radius);
        border: 1px solid var(--line);
        background: var(--surface);
        text-align: start;
        transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .vehicle-card,
    .account-card {
        display: grid;
        gap: .45rem;
        padding: 1rem 1.05rem;
        cursor: pointer;
        font: inherit;
        color: inherit;
        text-decoration: none;
    }

    .vehicle-card:hover:not(:disabled),
    .account-card:hover,
    .pay-card:hover {
        border-color: color-mix(in oklab, var(--color-sky-500) 55%, var(--line));
        box-shadow: 0 .6rem 1.4rem rgb(19 43 82 / .08);
    }

    .vehicle-card.is-request:not(.is-selected) {
        background: color-mix(in oklab, var(--color-warning-100) 55%, var(--surface));
    }

    .vehicle-card.is-selected,
    .account-card.is-active,
    .pay-card.is-active,
    .extra-chip.is-on {
        border-color: var(--color-sky-500);
        background: color-mix(in oklab, var(--color-sky-50) 70%, var(--surface));
        box-shadow:
            0 0 0 2px color-mix(in oklab, var(--color-sky-500) 45%, transparent),
            0 .75rem 1.6rem rgb(19 43 82 / .12);
    }

    .vehicle-card.is-unavailable {
        opacity: .55;
        cursor: not-allowed;
    }

    .vehicle-card__badge,
    .vehicle-card__selected-label {
        position: absolute;
        top: .65rem;
        inset-inline-end: .65rem;
        border-radius: 999px;
        background: var(--color-navy-900);
        color: #fff;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: .2rem .5rem;
    }

    .vehicle-card__selected-label {
        background: var(--color-sky-600, #0284c7);
    }

    .vehicle-card__check,
    .account-card__check,
    .pay-card__check,
    .extra-chip__check {
        display: inline-grid;
        place-items: center;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 999px;
        background: var(--color-sky-600, #0284c7);
        color: #fff;
        font-size: .75rem;
        font-weight: 800;
        line-height: 1;
        flex: 0 0 auto;
    }

    .vehicle-card__check {
        position: absolute;
        top: .65rem;
        inset-inline-start: .65rem;
    }

    .account-card__check,
    .pay-card__check {
        position: absolute;
        top: .75rem;
        inset-inline-end: .75rem;
    }

    .extra-chip__label {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        min-width: 0;
    }

    .vehicle-card.is-selected .vehicle-card__top {
        padding-inline-start: 1.5rem;
    }

    .vehicle-card__top {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        align-items: baseline;
    }

    .vehicle-card__price {
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--color-navy-950);
    }

    .vehicle-card__meta {
        margin: 0;
        font-size: .8rem;
        color: var(--ink-muted);
        text-transform: capitalize;
    }

    .vehicle-card__includes {
        margin: .25rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: .2rem;
        font-size: .78rem;
        color: var(--ink-muted);
    }

    .extra-chip {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .65rem;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: .8rem .9rem;
        cursor: pointer;
        font: inherit;
        font-size: .9rem;
        font-weight: 600;
        color: var(--ink);
    }

    .extra-chip:hover,
    .extra-chip:focus-visible {
        border-color: color-mix(in oklab, var(--color-sky-500) 55%, var(--line));
        box-shadow: 0 .6rem 1.4rem rgb(19 43 82 / .08);
        outline: none;
    }

    .extra-chip:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-sky-500) 35%, transparent);
    }

    .extra-chip strong {
        font-weight: 800;
        color: var(--color-navy-950);
        white-space: nowrap;
    }

    @media (width >= 40rem) {
        .extras-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    .pay-card {
        display: grid;
        gap: .35rem;
        padding: 1rem 1.05rem;
        cursor: pointer;
    }

    .pay-card input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .pay-card p,
    .account-card p {
        margin: 0;
        font-size: .84rem;
        color: var(--ink-muted);
        font-weight: 500;
    }

    .booking-check {
        display: flex;
        gap: .65rem;
        align-items: flex-start;
        margin-top: .9rem;
        font-size: .9rem;
        color: var(--ink);
    }

    .booking-check input {
        margin-top: .2rem;
        accent-color: var(--color-navy-900);
    }

    .booking-inline {
        display: flex;
        gap: .5rem;
    }

    .booking-inline input {
        flex: 1;
    }

    .booking-nav {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        justify-content: flex-end;
        margin-top: 1.25rem;
        padding: .85rem 0 .85rem;
        border-top: 1px solid var(--line);
        position: sticky;
        bottom: 0;
        background: linear-gradient(180deg, color-mix(in oklab, var(--canvas) 0%, transparent), var(--canvas) 28%);
        z-index: 5;
        /* Gradient may paint over content; clicks must reach fields/extras below. */
        pointer-events: none;
    }

    /* Date picker open — don't cover the calendar with sticky Continue. */
    .booking-main:has(.dt-picker__trigger[aria-expanded='true']) .booking-nav {
        position: static;
        background: transparent;
        border-top-color: transparent;
    }

    .booking-nav > * {
        pointer-events: auto;
    }

    .booking-nav .booking-btn:not(.booking-btn--ghost) {
        flex: 1;
        min-width: 10rem;
        max-width: 18rem;
    }

    .booking-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.85rem;
        padding: .65rem 1.15rem;
        border-radius: .8rem;
        border: 0;
        background: linear-gradient(135deg, var(--color-navy-900), var(--color-sky-700));
        color: #fff;
        font: inherit;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 .55rem 1.25rem rgb(19 43 82 / .22);
        transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    }

    .booking-btn:hover {
        filter: brightness(1.06);
        box-shadow: 0 .7rem 1.45rem rgb(19 43 82 / .28);
    }

    .booking-btn:disabled {
        opacity: .6;
        cursor: wait;
    }

    .booking-btn--ghost {
        background: transparent;
        color: var(--ink);
        border: 1px solid var(--line);
    }

    .booking-btn--ghost:hover {
        background: var(--surface-sunken);
    }

    .booking-alert {
        margin: 0 0 .85rem;
        padding: .85rem 1rem;
        border-radius: .85rem;
        background: color-mix(in oklab, var(--color-warning-100) 80%, var(--surface));
        color: var(--color-navy-950);
        font-weight: 600;
        font-size: .9rem;
        line-height: 1.4;
    }

    .booking-alert--error {
        background: color-mix(in oklab, #fee4e2 88%, var(--surface));
        color: #7a271a;
        border: 1px solid color-mix(in oklab, #b42318 22%, transparent);
    }

    .booking-empty {
        color: var(--ink-muted);
        grid-column: 1 / -1;
    }

    .booking-resume {
        margin: 0;
        font-size: .78rem;
        color: var(--ink-muted);
        word-break: break-all;
    }

    .booking-summary {
        border-radius: 1.25rem;
        border: 1px solid color-mix(in oklab, var(--color-navy-900) 10%, transparent);
        background:
            linear-gradient(165deg, color-mix(in oklab, var(--color-navy-950) 96%, #000), color-mix(in oklab, var(--color-navy-900) 88%, var(--color-sky-800)));
        color: #fff;
        padding: 1.2rem 1.15rem;
        box-shadow: 0 1.25rem 2.5rem rgb(6 18 40 / .28);
    }

    @media (width >= 64rem) {
        .booking-summary {
            position: sticky;
            top: 1.25rem;
        }
    }

    .booking-summary h2 {
        margin: 0 0 .85rem;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .booking-summary__route {
        display: grid;
        gap: .55rem;
        margin-bottom: .9rem;
        padding-bottom: .9rem;
        border-bottom: 1px solid rgb(255 255 255 / .14);
    }

    .booking-summary__route p {
        margin: 0;
        display: grid;
        gap: .15rem;
    }

    .booking-summary__route span {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgb(255 255 255 / .62);
    }

    .booking-summary__route strong {
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.35;
        word-break: break-word;
    }

    .booking-summary dl {
        margin: 0;
        display: grid;
        gap: .55rem;
    }

    .booking-summary dl div {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        font-size: .86rem;
    }

    .booking-summary dt {
        color: rgb(255 255 255 / .62);
        font-weight: 500;
    }

    .booking-summary dd {
        margin: 0;
        text-align: end;
        font-weight: 700;
    }

    .booking-summary__total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-top: 1rem;
        padding-top: .9rem;
        border-top: 1px solid rgb(255 255 255 / .14);
        gap: .75rem;
        font-weight: 700;
    }

    .booking-summary__total strong {
        font-size: 1.55rem;
        font-weight: 800;
        letter-spacing: -.03em;
        color: #fff;
    }

    .booking-summary__lines {
        margin: .75rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: .35rem;
        font-size: .78rem;
        color: rgb(255 255 255 / .72);
    }

    .booking-summary__lines li {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
    }

    .booking-summary__note {
        margin: .85rem 0 0;
        font-size: .75rem;
        line-height: 1.45;
        color: rgb(255 255 255 / .58);
    }

    .confirm__hero {
        margin-bottom: 1.5rem;
        padding: 1.35rem 1.4rem;
        border-radius: 1.2rem;
        background:
            radial-gradient(circle at top right, color-mix(in oklab, var(--color-teal-400) 28%, transparent), transparent 55%),
            linear-gradient(135deg, var(--color-navy-950), var(--color-navy-800));
        color: #fff;
    }

    .confirm__eyebrow {
        margin: 0;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .8;
    }

    .confirm__title {
        margin: .35rem 0;
        font-size: clamp(1.7rem, 3vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.03em;
    }

    .confirm__lede {
        margin: 0;
        max-width: 36rem;
        opacity: .9;
    }

    .confirm__grid {
        display: grid;
        gap: 1rem;
    }

    @media (width >= 48rem) {
        .confirm__grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    .confirm__card {
        border-radius: 1rem;
        border: 1px solid var(--line);
        background: var(--surface);
        padding: 1.1rem 1.15rem;
    }

    .confirm__card h2 {
        margin: 0 0 .75rem;
        font-size: 1rem;
        font-weight: 700;
    }

    .confirm__card dl {
        margin: 0;
        display: grid;
        gap: .55rem;
    }

    .confirm__card dl div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        font-size: .9rem;
    }

    .confirm__card dt {
        color: var(--ink-muted);
    }

    .confirm__card dd {
        margin: 0;
        text-align: end;
        font-weight: 600;
    }

    .confirm__actions {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        margin-top: 1.25rem;
    }

    .lookup-card,
    .manage-card {
        max-width: 32rem;
        margin-inline: auto;
        border-radius: 1.15rem;
        border: 1px solid var(--line);
        background: var(--surface);
        padding: 1.35rem 1.4rem;
        box-shadow: 0 1rem 2rem rgb(19 43 82 / .07);
    }

    .lookup-card h1,
    .manage-card h1 {
        margin: 0 0 .35rem;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .lookup-card p,
    .manage-card > p {
        margin: 0 0 1rem;
        color: var(--ink-muted);
    }

    .address-ac {
        position: relative;
        display: grid;
        gap: .45rem;
    }

    .address-ac__field {
        display: grid;
        gap: .35rem;
        font-size: .88rem;
        font-weight: 600;
    }

    .address-ac__input-wrap {
        position: relative;
    }

    .address-ac__input-wrap input {
        min-height: 2.75rem;
        width: 100%;
        border-radius: .75rem;
        border: 1px solid var(--line);
        background: var(--surface);
        padding: .65rem 2.4rem .65rem .85rem;
        font: inherit;
        font-weight: 500;
    }

    .address-ac__clear {
        position: absolute;
        inset-inline-end: .35rem;
        top: 50%;
        translate: 0 -50%;
        width: 2rem;
        height: 2rem;
        border: 0;
        border-radius: .5rem;
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        font-size: 1.1rem;
    }

    .address-ac__suggest {
        position: absolute;
        z-index: 40;
        inset-inline: 0;
        top: calc(100% + .2rem);
        margin: 0;
        padding: .35rem;
        list-style: none;
        border-radius: .85rem;
        border: 1px solid var(--line);
        background: var(--surface);
        box-shadow: 0 .8rem 1.8rem rgb(19 43 82 / .14);
        max-height: 14rem;
        overflow: auto;
    }

    .address-ac__status {
        padding: .55rem .7rem;
        font-size: .8rem;
        color: var(--ink-muted);
    }

    .address-ac__suggest button {
        width: 100%;
        display: grid;
        gap: .15rem;
        text-align: start;
        border: 0;
        border-radius: .55rem;
        background: transparent;
        padding: .55rem .7rem;
        cursor: pointer;
        color: var(--ink);
        font: inherit;
    }

    .address-ac__suggest button.is-active,
    .address-ac__suggest button:hover {
        background: var(--surface-sunken);
    }

    .address-ac__suggest strong {
        font-size: .88rem;
    }

    .address-ac__suggest span {
        font-size: .75rem;
        color: var(--ink-muted);
    }

    .address-ac__map-tools {
        display: flex;
        justify-content: flex-start;
    }

    .address-ac__map-toggle {
        min-height: 2rem;
        padding: .3rem .75rem;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--surface);
        color: var(--ink);
        font-size: .78rem;
        font-weight: 700;
        cursor: pointer;
    }

    .address-ac__map {
        position: relative;
        overflow: hidden;
        border-radius: .85rem;
        border: 1px solid var(--line);
        background: var(--surface-sunken);
        aspect-ratio: 16 / 9;
        max-height: 9.5rem;
    }

    .address-ac__map iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .address-ac__map-link {
        position: absolute;
        inset-inline-end: .5rem;
        bottom: .5rem;
        border-radius: 999px;
        background: rgb(255 255 255 / .94);
        color: var(--ink);
        font-size: .72rem;
        font-weight: 700;
        padding: .35rem .65rem;
        text-decoration: none;
    }

    /* Premium date/time picker (booking) */
    .dt-picker {
        position: relative;
        display: grid;
        gap: .35rem;
        min-width: 0;
    }

    .dt-picker__label {
        font-size: .88rem;
        font-weight: 600;
        color: var(--ink);
    }

    .dt-picker__trigger {
        display: flex;
        align-items: center;
        gap: .7rem;
        width: 100%;
        min-height: 2.75rem;
        padding: .65rem .85rem;
        border-radius: .75rem;
        border: 1px solid var(--line);
        background:
            linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--color-sky-50) 55%, var(--surface)));
        font: inherit;
        font-size: .92rem;
        font-weight: 700;
        color: var(--ink);
        text-align: start;
        cursor: pointer;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .dt-picker__trigger:hover,
    .dt-picker__trigger[aria-expanded='true'] {
        border-color: var(--color-sky-500);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-sky-400) 22%, transparent);
    }

    .dt-picker__icon {
        display: inline-flex;
        width: 2.1rem;
        height: 2.1rem;
        align-items: center;
        justify-content: center;
        border-radius: .65rem;
        background: linear-gradient(135deg, var(--color-navy-900), var(--color-sky-700));
        color: #fff;
        flex: none;
    }

    .dt-picker__cancel {
        border: 0;
        background: transparent;
        color: var(--ink-muted);
        font: inherit;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer;
        min-height: 2rem;
    }

    .quote-picker {
        display: grid;
        gap: .4rem;
        width: min(100%, 16.25rem);
        max-width: 100%;
        min-width: 0;
        margin-top: .35rem;
        margin-inline: auto;
        padding: .55rem .6rem .6rem;
        border-radius: .85rem;
        border: 1px solid color-mix(in oklab, var(--color-navy-900) 10%, transparent);
        background:
            radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--color-teal-200) 35%, transparent), transparent 55%),
            linear-gradient(165deg, var(--surface), color-mix(in oklab, var(--color-sky-50) 45%, var(--surface)));
        box-shadow: 0 .85rem 1.75rem rgb(19 43 82 / .14);
        overflow: hidden;
        z-index: 20;
    }

    .quote-picker__head {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: .35rem;
    }

    .quote-picker__month {
        margin: 0;
        text-align: center;
        font-size: .88rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--color-navy-950);
    }

    .quote-picker__nav {
        width: 1.85rem;
        height: 1.85rem;
        border: 0;
        border-radius: 999px;
        background: var(--surface);
        box-shadow: 0 .15rem .4rem rgb(19 43 82 / .1);
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        color: var(--color-navy-900);
    }

    .quote-picker__weekdays {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: .1rem;
        text-align: center;
        font-size: .58rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--color-navy-500);
    }

    .quote-picker__grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: .12rem;
        width: 100%;
    }

    .quote-picker__day {
        width: 100%;
        max-width: 1.7rem;
        height: 1.7rem;
        margin-inline: auto;
        border: 0;
        border-radius: .4rem;
        background: transparent;
        font-size: .7rem;
        font-weight: 700;
        color: var(--color-navy-900);
        cursor: pointer;
    }

    .quote-picker__day:hover:not(:disabled) {
        background: color-mix(in oklab, var(--color-sky-100) 80%, var(--surface));
    }

    .quote-picker__day.is-muted { color: var(--color-navy-400); }
    .quote-picker__day.is-today {
        box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--color-sky-500) 55%, transparent);
    }
    .quote-picker__day.is-selected {
        background: linear-gradient(145deg, var(--color-navy-900), var(--color-sky-700));
        color: #fff;
        box-shadow: 0 .25rem .65rem rgb(19 43 82 / .22);
    }
    .quote-picker__day.is-disabled,
    .quote-picker__slot.is-disabled {
        opacity: .35;
        cursor: not-allowed;
    }

    .quote-picker__times-label {
        margin: 0 0 .25rem;
        font-size: .6rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-navy-600);
    }

    .quote-picker__slots {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .22rem;
        max-width: 100%;
        max-height: 5.25rem;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 .05rem .15rem 0;
        scrollbar-width: thin;
    }

    .quote-picker__slot {
        min-height: 1.55rem;
        min-width: 0;
        padding: .15rem .2rem;
        border-radius: .4rem;
        border: 1px solid color-mix(in oklab, var(--color-navy-900) 12%, transparent);
        background: var(--surface);
        font-size: .66rem;
        font-weight: 700;
        color: var(--color-navy-800);
        cursor: pointer;
        white-space: nowrap;
    }

    .quote-picker__slot.is-selected {
        border-color: transparent;
        background: linear-gradient(135deg, var(--color-teal-400), var(--color-sky-500));
        color: var(--color-navy-950);
        box-shadow: 0 .2rem .55rem rgb(79 194 191 / .28);
    }

    .quote-picker__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }

    .quote-picker__confirm {
        min-height: 2rem;
        padding: 0 .85rem;
        border: 0;
        border-radius: .55rem;
        background: linear-gradient(135deg, var(--color-navy-900), var(--color-sky-700));
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer;
    }

    .booking-progress {
        display: flex;
        gap: .35rem;
        margin-bottom: 1rem;
        overflow-x: auto;
        padding-bottom: .15rem;
        scrollbar-width: none;
    }

    .booking-progress__step {
        flex: 1;
        min-width: 4.5rem;
        display: grid;
        gap: .35rem;
        justify-items: center;
        text-align: center;
    }

    .booking-progress__dot {
        width: 100%;
        height: .28rem;
        border-radius: 999px;
        background: var(--line);
    }

    .booking-progress__step.is-done .booking-progress__dot,
    .booking-progress__step.is-current .booking-progress__dot {
        background: linear-gradient(90deg, var(--color-navy-900), var(--color-sky-600));
    }

    .booking-progress__label {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ink-muted);
    }

    .booking-progress__step.is-current .booking-progress__label,
    .booking-progress__step.is-done .booking-progress__label {
        color: var(--ink);
    }

    .booking-panel {
        position: relative;
        border-radius: 1.35rem;
        border: 1px solid color-mix(in oklab, var(--color-navy-900) 8%, var(--line));
        background:
            radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--color-teal-100) 55%, transparent), transparent 50%),
            linear-gradient(165deg, var(--surface), color-mix(in oklab, var(--color-sky-50) 35%, var(--surface)));
        padding: 1.2rem 1.15rem 1.3rem;
        box-shadow: 0 1.1rem 2.4rem rgb(19 43 82 / .08);
    }

    @media (width >= 40rem) {
        .booking-panel {
            padding: 1.4rem 1.4rem 1.5rem;
        }
    }

    .pay-checkout {
        display: grid;
        gap: 1.5rem;
    }

    .pay-checkout__eyebrow {
        margin: 0 0 .45rem;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-sky-700);
    }

    .pay-checkout__title {
        margin: 0;
        font-size: clamp(1.8rem, 4vw, 2.4rem);
        font-weight: 750;
        letter-spacing: -.03em;
    }

    .pay-checkout__lede {
        margin: .55rem 0 0;
        color: var(--ink-muted);
    }

    .pay-checkout__grid {
        display: grid;
        gap: 1.25rem;
    }

    @media (width >= 64rem) {
        .pay-checkout__grid {
            grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr);
            align-items: start;
        }
    }

    .pay-checkout__panel,
    .pay-checkout__summary {
        border-radius: 1.2rem;
        border: 1px solid var(--line);
        background: var(--surface);
        padding: 1.25rem;
        box-shadow: 0 1rem 2rem rgb(19 43 82 / .06);
    }

    .pay-checkout__panel-title,
    .pay-checkout__summary h2 {
        margin: 0 0 1rem;
        font-size: 1.1rem;
        font-weight: 750;
    }

    .pay-checkout__element {
        min-height: 12rem;
        margin-bottom: 1rem;
    }

    .pay-checkout__note {
        margin: 0 0 1rem;
        color: var(--ink-muted);
        line-height: 1.5;
    }

    .pay-checkout__summary dl {
        margin: 0;
        display: grid;
        gap: .75rem;
    }

    .pay-checkout__summary div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .pay-checkout__summary dt {
        color: var(--ink-muted);
        font-size: .85rem;
    }

    .pay-checkout__summary dd {
        margin: 0;
        text-align: end;
        font-weight: 650;
    }

    .pay-checkout__secure {
        margin: 1.25rem 0 0;
        font-size: .82rem;
        color: var(--ink-muted);
        line-height: 1.45;
    }
}