/* Shuttle form components (22 Aug 2026) - the BOOKING HERO's own field
   vocabulary, reproduced under an `shf-` namespace so the shuttle search
   section and the departures step's search bar look exactly like the rest
   of the site's forms (main_booking_hero.css / main_contact.php) without
   touching their load-bearing ids and classes.

   Values are the hero's: 44px fields, radius-lg, the platform border and
   focus colours, 16px text inside a control (iOS never zooms), the round
   stepper buttons, the gradient search button. Behaviour for the dressed
   selects lives in assets/js/sections/shuttle_form.js. */

.shf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.shf-label { font-size: var(--font-size-xs, 12px); font-weight: var(--font-weight-semibold, 600); color: var(--color-text-primary, #192024); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The control shell: one look for inputs, dressed selects, the static
   destination and the passengers button. */
.shf-ctl {
    position: relative; display: flex; align-items: center; gap: 8px;
    width: 100%; height: var(--button-height, 44px); padding: 0 12px;
    font-size: var(--font-size-lg, 16px); font-family: var(--font-family, inherit); color: var(--color-text-primary, #192024);
    background: var(--color-bg-white, #fff); border: 1px solid var(--color-border-primary, #d9e2e8); border-radius: var(--radius-lg, 8px);
    transition: border-color .2s ease, background-color .2s ease; cursor: pointer; text-align: left; overflow: hidden;
}
.shf-ctl:hover { border-color: var(--color-border-medium, #b8c5d0); background: var(--color-bg-gray, #f9fafb); }
.shf-ctl.is-active, .shf-ctl:focus-within, .shf-ctl:focus-visible { border-color: var(--color-field-focus, #192024); background: var(--color-bg-white, #fff); outline: none; }
.shf-ctl--static { cursor: default; background: var(--color-bg-gray-light, #f1f3f5); border-color: var(--color-border-light, #e5ebf1); }
.shf-ctl--static:hover { border-color: var(--color-border-light, #e5ebf1); background: var(--color-bg-gray-light, #f1f3f5); }
.shf-ctl--static .shf-ico { color: var(--color-text-muted, #8f9ca8); }
.shf-ctl--static .shf-text { color: var(--color-text-secondary, #5a6872); }
.shf-ico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-text-primary, #192024); }
.shf-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--font-weight-medium, 500); }
.shf-ctl.is-placeholder .shf-text { color: var(--color-text-muted, #8f9ca8); font-weight: var(--font-weight-normal, 400); }
.shf-arrow { flex: 0 0 auto; width: 14px; height: 14px; color: var(--color-text-muted, #8f9ca8); transition: transform .2s ease; margin-left: auto; }
.shf-ctl.is-active .shf-arrow { transform: rotate(180deg); }
.shf-sub { flex: 0 0 auto; font-size: var(--font-size-sm, 13px); color: var(--color-text-muted, #8f9ca8); white-space: nowrap; }

/* A real text/date input wearing the shell. */
.shf-input {
    flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none;
    font-size: var(--font-size-lg, 16px); font-family: inherit; color: var(--color-text-primary, #192024); font-weight: var(--font-weight-medium, 500);
    cursor: inherit;
}
.shf-input::placeholder { color: var(--color-text-muted, #8f9ca8); font-weight: 400; }
.shf-input[type="date"] { appearance: none; -webkit-appearance: none; }
.shf-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

/* The x inside a control (clears the return). */
.shf-x {
    flex: 0 0 auto; width: 26px; height: 26px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted, #8f9ca8); cursor: pointer; transition: background .15s, color .15s;
}
.shf-x svg { width: 14px; height: 14px; }
.shf-x:hover { background: var(--color-bg-hover, #e6ebef); color: var(--color-text-primary, #192024); }

/* ── Dressed select (the contact form's cf-select, the hero's trigger) ──── */
.shf-select-wrapper { position: relative; width: 100%; }
.shf-select-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.shf-select-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1000;
    background: var(--color-bg-white, #fff); border: 1px solid var(--color-border-primary, #d9e2e8); border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-md, 0 3px 6px rgba(25,32,36,.16)); display: none; max-height: 320px; overflow: hidden auto;
}
.shf-select-dropdown.is-open { display: block; }
.shf-select-option {
    padding: 11px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-size: var(--font-size-md, 15px); color: var(--color-text-primary, #192024); border-bottom: 1px solid var(--color-bg-gray-light, #f1f3f5);
    transition: background-color .15s ease;
}
.shf-select-option:last-child { border-bottom: 0; }
.shf-select-option:hover, .shf-select-option.is-kbd { background: var(--color-bg-hover, #e6ebef); }
.shf-select-option.is-selected { background: var(--color-bg-gray, #f9fafb); font-weight: var(--font-weight-semibold, 600); }
.shf-select-option-sub { margin-left: auto; font-size: var(--font-size-sm, 13px); color: var(--color-text-secondary, #5a6872); font-weight: 400; white-space: nowrap; }

/* ── Trip toggle: the hero's field shell as a two-way switch ────────────── */
.shf-seg { display: inline-flex; padding: 3px; background: var(--color-bg-gray-light, #f1f3f5); border-radius: var(--radius-lg, 8px); height: var(--button-height, 44px); }
.shf-seg-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    font-family: inherit; font-size: var(--font-size-base, 14px); font-weight: var(--font-weight-semibold, 600); color: var(--color-text-secondary, #5a6872); white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
}
.shf-seg-btn.is-active { background: var(--color-bg-white, #fff); color: var(--color-text-primary, #192024); box-shadow: 0 1px 3px rgba(25,32,36,.14); }
.shf-seg-btn:focus-visible { outline: 2px solid var(--color-theme-accent, #192024); outline-offset: 2px; }
/* The GET form's radios inside labels, same look. */
.shf-seg-opt { position: relative; display: inline-flex; }
.shf-seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.shf-seg-opt > span { display: inline-flex; align-items: center; justify-content: center; height: 100%; padding: 0 14px; border-radius: 6px; font-size: var(--font-size-base, 14px); font-weight: var(--font-weight-semibold, 600); color: var(--color-text-secondary, #5a6872); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.shf-seg-opt.is-on > span { background: var(--color-bg-white, #fff); color: var(--color-text-primary, #192024); box-shadow: 0 1px 3px rgba(25,32,36,.14); }
.shf-seg-opt input:focus-visible + span { outline: 2px solid var(--color-theme-accent, #192024); outline-offset: 2px; }

/* ── Passengers: the hero's counter button + popup ──────────────────────── */
.shf-pax-btn { justify-content: space-between; font-size: var(--font-size-base, 14px); font-weight: var(--font-weight-semibold, 600); font-family: inherit; }
.shf-pax-btn .shf-text { font-weight: var(--font-weight-semibold, 600); font-size: var(--font-size-base, 14px); }
.shf-pax-btn .shf-arrow { color: var(--color-text-primary, #192024); width: 16px; height: 16px; }
.shf-pax-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; min-width: 300px; max-width: calc(100vw - 32px); padding: 20px;
    background: var(--color-bg-white, #fff); border: 1px solid var(--color-border-primary, #d9e2e8); border-radius: var(--radius-lg, 8px);
    box-shadow: 0 12px 30px rgba(25,32,36,.16); display: none;
}
.shf-pax-pop.is-open { display: block; }
.shf-pax-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border-light, #e5ebf1); }
.shf-pax-info { display: flex; flex-direction: column; gap: 2px; }
.shf-pax-type { font-size: var(--font-size-md, 15px); font-weight: var(--font-weight-semibold, 600); color: var(--color-text-primary, #192024); }
.shf-pax-desc { font-size: var(--font-size-sm, 13px); color: var(--color-text-muted, #8f9ca8); }
.shf-pax-ctl { display: flex; align-items: center; gap: 12px; }
.shf-pax-step {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border-primary, #d9e2e8); background: var(--color-bg-white, #fff);
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; padding: 0; font-family: inherit; color: var(--color-text-primary, #192024);
}
.shf-pax-step:hover:not(:disabled) { border-color: var(--color-text-primary, #192024); }
.shf-pax-step:disabled { opacity: .3; cursor: not-allowed; }
.shf-pax-step svg { width: 14px; height: 14px; }
.shf-pax-count { font-size: var(--font-size-lg, 16px); font-weight: var(--font-weight-semibold, 600); color: var(--color-text-primary, #192024); min-width: 20px; width: 36px; text-align: center; border: 0; background: transparent; padding: 0; font-family: inherit; -moz-appearance: textfield; appearance: textfield; outline: none; }
.shf-pax-count::-webkit-outer-spin-button, .shf-pax-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shf-pax-note { margin: 10px 0 0; font-size: var(--font-size-sm, 13px); color: var(--color-text-secondary, #5a6872); line-height: 1.45; }
.shf-pax-done {
    width: 100%; height: var(--button-height, 44px); margin-top: 16px; background: var(--color-bg-white, #fff); border: 1px solid var(--color-text-primary, #192024);
    border-radius: var(--radius-lg, 8px); color: var(--color-text-primary, #192024); font-family: inherit; font-size: var(--font-size-base, 14px); font-weight: var(--font-weight-semibold, 600); cursor: pointer; transition: all .2s ease;
}
.shf-pax-done:hover { background: var(--color-bg-gray, #f9fafb); }

/* ── The search button (the hero's) ─────────────────────────────────────── */
.shf-search-btn {
    position: relative; height: var(--button-height, 44px); padding: 0 28px; border: 0; border-radius: var(--radius-lg, 8px);
    background: var(--color-primary-gradient, var(--color-primary, #192024)); color: #fff;
    font-family: inherit; font-size: var(--font-size-base, 14px); font-weight: var(--font-weight-semibold, 600); cursor: pointer; white-space: nowrap; transition: all .2s ease;
}
.shf-search-btn:hover { background: var(--color-primary-gradient-hover, var(--color-primary, #192024)); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 25,32,36), .3); }
.shf-search-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.shf-search-btn:focus-visible { outline: 2px solid var(--color-theme-accent, #192024); outline-offset: 2px; }

/* Address autocomplete list under a zone field. */
.shf-preds {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000;
    background: #fff; border: 1px solid var(--color-border-primary, #d9e2e8); border-radius: var(--radius-lg, 8px); box-shadow: var(--shadow-md, 0 3px 6px rgba(25,32,36,.16));
    max-height: 260px; overflow-y: auto;
}
.shf-preds[hidden] { display: none; }
.shf-pred { display: block; width: 100%; text-align: left; padding: 11px 16px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--font-size-md, 15px); color: var(--color-text-primary, #192024); }
.shf-pred:hover { background: var(--color-bg-hover, #e6ebef); }

.shf-hint { margin-top: 4px; font-size: var(--font-size-sm, 13px); color: #b45309; }
.shf-hint[hidden] { display: none; }

/* Tap targets on touch screens (perfection pass, 22 Aug 2026): the clear-x
   and the steppers were 26/32px, under the 44px rule. Desktop keeps the hero's
   own sizes. */
@media (max-width: 991px) {
    .shf-x { width: 40px; height: 40px; margin-right: -8px; }
    .shf-pax-step { width: 40px; height: 40px; }
    .shf-pax-row { padding: 14px 0; }
}