/* ==========================================================================
   Homepage booking widget ("dispatch" card)
   Dark navy panel with gold accents, built on the tokens in style.css.
   ========================================================================== */

.dispatch {
    --d-bg: #0B1424;
    --d-surface: #13213A;
    --d-surface-2: #0F1B30;
    --d-line: rgba(255, 255, 255, .12);
    --d-text: var(--off-white);
    --d-muted: #A9B3C4;          /* 7.6:1 on --d-bg */
    --d-placeholder: #8C98AB;    /* 5.4:1 on --d-surface */

    background: linear-gradient(180deg, #0E1A2E 0%, var(--d-bg) 100%);
    border: 1px solid rgba(201, 164, 94, .28);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
    color: var(--d-text);
    padding: clamp(1rem, 2.4vw, 1.3rem);
}

.dispatch-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .55rem; border-bottom: 1px solid var(--d-line); margin-bottom: .55rem; }
.dispatch-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--d-text); margin: 0; display: flex; align-items: center; gap: .6rem; white-space: nowrap; min-width: 0; }
.dispatch-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 164, 94, .18); flex-shrink: 0; }
.dispatch-live { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7EE2B0; background: rgba(46, 160, 103, .16); border: 1px solid rgba(126, 226, 176, .35); padding: .3rem .6rem; border-radius: 999px; white-space: nowrap; }
.dispatch-live span { font-size: .55rem; vertical-align: 1px; }
.dispatch-sub { color: var(--d-muted); font-size: .85rem; margin: -.4rem 0 1rem; }

/* Journey type: segmented control built from radio buttons */
.dispatch-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; background: var(--d-bg); border: 1px solid var(--d-line); border-radius: 12px; padding: .25rem; margin: 0 0 .8rem; }
.dispatch-modes label {
    display: flex; align-items: center; justify-content: center; gap: .35rem; text-align: center;
    min-height: 40px; padding: .35rem .4rem; border-radius: 9px; cursor: pointer; line-height: 1.15;
    font-size: .8rem; font-weight: 700; color: var(--d-muted); white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dispatch-modes label:hover { color: var(--d-text); }
.dispatch-modes input:checked + label { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--navy); box-shadow: 0 4px 14px rgba(201, 164, 94, .3); }
.dispatch-modes input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }

.dispatch-field { margin-bottom: .55rem; }
.dispatch-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-muted); margin-bottom: .3rem; }
.dispatch-gps { background: none; border: 0; color: var(--gold); font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; padding: 0; min-height: 24px; cursor: pointer; }
.dispatch-gps:hover { color: var(--gold-light); text-decoration: underline; }
.dispatch-gps[aria-busy="true"] { opacity: .7; cursor: progress; }

.dispatch-input { position: relative; }
.dispatch-input > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; z-index: 4; font-size: 1rem; }
.dispatch .form-control, .dispatch .form-select {
    background-color: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-text);
    min-height: 44px;
    border-radius: 12px;
    color-scheme: dark;
}
.dispatch .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A9B3C4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.dispatch .form-select option { background: var(--d-surface); color: var(--d-text); }
.dispatch-input > .form-control, .dispatch-input > .form-select { padding-left: 2.6rem; }
.dispatch .form-control::placeholder { color: var(--d-placeholder); }
.dispatch .form-control:focus, .dispatch .form-select:focus { background-color: #172848; border-color: var(--gold); color: var(--d-text); box-shadow: 0 0 0 .2rem rgba(201, 164, 94, .25); }
.dispatch .form-control.is-invalid, .dispatch .form-select.is-invalid { border-color: #F28B82; background-image: none; }
.dispatch .invalid-feedback { color: #F6A49D; }
.dispatch textarea.form-control { min-height: 70px; }

.dispatch-hint { font-size: .78rem; color: var(--d-muted); margin: .3rem 0 0; }
.dispatch-hint:empty { display: none; }
.dispatch-hint.is-warning { color: #F6C177; }

/* Live price panel */
.dispatch-price {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: 14px;
    padding: .6rem .9rem; margin: .1rem 0 .5rem; min-height: 0;
    transition: border-color var(--dur) var(--ease);
}
.dispatch-price.is-fixed { border-color: rgba(201, 164, 94, .55); }
.dispatch-price.is-loading .dispatch-price-amount { opacity: .45; }
.dispatch-price-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-muted); margin: 0 0 .2rem; }
.dispatch-price-amount { font-family: var(--font-heading); font-size: clamp(1.8rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; color: var(--gold); line-height: 1.05; margin: 0; font-variant-numeric: lining-nums; transition: opacity var(--dur) ease; white-space: nowrap; }
.dispatch-price-note { font-size: .75rem; color: var(--d-muted); margin: .35rem 0 0; max-width: 190px; margin-left: auto; }
.dispatch-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: #7EE2B0; background: rgba(46, 160, 103, .16); border: 1px solid rgba(126, 226, 176, .35); padding: .25rem .6rem; border-radius: 999px; }
.dispatch-badge.is-night { color: #C9B8FF; background: rgba(140, 110, 255, .15); border-color: rgba(201, 184, 255, .35); }

.dispatch-cta { min-height: 50px; letter-spacing: .1em; text-transform: uppercase; font-size: .92rem; background: linear-gradient(180deg, #E2C58C 0%, var(--gold) 100%); border: 0; }

/* Step 2 */
.dispatch-back { background: none; border: 0; color: var(--gold); font-weight: 600; font-size: .85rem; padding: 0; min-height: 36px; margin-bottom: .5rem; }
.dispatch-back:hover { text-decoration: underline; }
.dispatch-summary { background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .88rem; color: var(--d-muted); }
.dispatch-summary strong { color: var(--d-text); font-weight: 600; }
.dispatch-summary .dispatch-summary-price { font-family: var(--font-heading); color: var(--gold); font-size: 1.25rem; font-weight: 700; }
.dispatch-check .form-check-label { color: var(--d-muted); font-size: .82rem; }
.dispatch-check .form-check-input { background-color: var(--d-surface); border-color: #6B778A; }
.dispatch-check .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.dispatch a { color: var(--gold-light); }

.dispatch-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-top: .7rem; font-size: .76rem; color: var(--d-muted); }
.dispatch-foot i { color: #7EE2B0; }
.dispatch-attribution { text-align: center; font-size: .68rem; color: var(--d-muted); margin: .5rem 0 0; }

@media (max-width: 575.98px) {
    .dispatch-title { white-space: normal; line-height: 1.25; }
    .dispatch-modes label { font-size: .74rem; flex-direction: column; gap: .1rem; min-height: 48px; }
}

/* Return journey toggle */
.dispatch-return-fields { margin-top: -.1rem; }
.dispatch-switch { display: flex; align-items: center; gap: .45rem; min-height: 24px; padding-left: 0; margin: 0 0 .3rem; }
.dispatch-switch .form-check-input { float: none; margin: 0; width: 2.3em; height: 1.25em; background-color: var(--d-surface); border-color: #6B778A; cursor: pointer;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23A9B3C4'/%3e%3c/svg%3e"); }
.dispatch-switch .form-check-input:checked { background-color: var(--gold); border-color: var(--gold);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23101D33'/%3e%3c/svg%3e"); }
.dispatch-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(201, 164, 94, .3); border-color: var(--gold); }
.dispatch-switch .form-check-label { color: var(--gold-light); font-weight: 600; font-size: .8rem; cursor: pointer; white-space: nowrap; }

/* Keep the card within the screen on desktop; very short windows scroll inside the card. */
@media (min-width: 992px) {
    .hero:has(.dispatch) { padding-block: .75rem; }
    .dispatch {
        position: sticky;
        top: calc(var(--nav-height) + .75rem);
        max-height: calc(100svh - var(--nav-height) - var(--topbar-height) - 1.5rem);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(201, 164, 94, .5) transparent;
    }
}

.dispatch-assurance { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--d-muted); margin: .15rem 0 .7rem; }
.dispatch-assurance i { color: #7EE2B0; }

/* Short desktop screens (e.g. 1366×768 laptops): tighten spacing so the card fits under the top bar and menu. */
@media (min-width: 992px) and (max-height: 820px) and (pointer: fine) {
    .dispatch { padding: .85rem 1.1rem; }
    .dispatch-head { padding-bottom: .45rem; margin-bottom: .5rem; }
    .dispatch-modes { margin-bottom: .55rem; }
    .dispatch-modes label { min-height: 36px; }
    .dispatch-field { margin-bottom: .45rem; }
    .dispatch-label { margin-bottom: .2rem; }
    .dispatch .form-control, .dispatch .form-select { min-height: 40px; padding-top: .3rem; padding-bottom: .3rem; }
    .dispatch-price { padding: .5rem .9rem; }
    .dispatch-cta { min-height: 46px; }
}

/* Without JavaScript the whole form shows at once and posts normally. */
.no-js .dispatch-step[hidden], .no-js .dispatch [data-return][hidden] { display: block !important; }
.no-js .dispatch [data-next], .no-js .dispatch [data-back], .no-js .dispatch [data-gps], .no-js .dispatch-price { display: none !important; }

@media (max-width: 400px) {
    .dispatch-modes label { font-size: .66rem; letter-spacing: .04em; }
    .dispatch-price { flex-direction: column; align-items: flex-start; }
    .dispatch-price .text-end { text-align: left !important; }
    .dispatch-price-note { margin-left: 0; max-width: none; }
}