/**
 * Styles for the Tier 1 (non-Elementor) intelligent search form, results
 * grid, and package details pages — assets/js/search-app.js,
 * results-app.js, package-app.js. Reuses the --travellin-* CSS variables
 * defined in travellin-frontend.css so both tiers stay visually consistent.
 */

.travellin-search-form form {
    position: relative;
}

/* Trip type tabs — horizontal on every breakpoint per the design brief
 * (section 1/3/6): equal-width flex segments on desktop (wrapping to a
 * second row only if the container genuinely can't fit them), a single
 * horizontally-scrollable row with snap points on tablet and mobile —
 * never a vertical column at any breakpoint. Every value below is a CSS
 * variable so the Elementor "Search Form (Full)" widget's Tabs Style
 * controls can override it per-instance without editing this file.
 *
 * Selector is the compound `.travellin-field.travellin-trip-type-tabs`
 * (not just `.travellin-trip-type-tabs` alone) deliberately: the tabs
 * container also carries the generic `.travellin-field` class (same
 * markup as every other field wrapper), and `.travellin-field` sets
 * `flex-direction: column`. A single-class selector here has the exact
 * same CSS specificity as `.travellin-field`, so whichever rule happens
 * to be declared later in the file wins — which silently flipped the
 * tabs back to a vertical column the first time this was built with a
 * single-class selector. The compound selector is strictly more specific
 * than `.travellin-field` alone, so it wins regardless of source order. */
.travellin-field.travellin-trip-type-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    gap: var(--travellin-tab-gap, 0px);
    margin: 0 0 var(--travellin-tab-content-spacing, 16px);
    padding: 0;
    background: var(--travellin-tab-bg, var(--travellin-form-bg, #fff));
    border: var(--travellin-tab-border-width, 1px) solid var(--travellin-tab-border-color, var(--travellin-border));
    border-radius: var(--travellin-tab-border-radius, var(--travellin-radius)) var(--travellin-tab-border-radius, var(--travellin-radius)) 0 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.travellin-tab-btn {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--travellin-tab-icon-gap, 8px);
    min-width: var(--travellin-tab-min-width, 100px);
    background: transparent;
    color: var(--travellin-tab-text-color, var(--travellin-inactive-icon, var(--travellin-secondary)));
    border: none;
    border-inline-end: 1px solid var(--travellin-tab-border-color, var(--travellin-border));
    border-bottom: var(--travellin-tab-active-indicator-height, 3px) solid transparent;
    border-radius: 0;
    padding: var(--travellin-tab-padding, 16px 20px);
    font-size: var(--travellin-tab-label-size, 16px);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--travellin-tab-transition, 200ms ease),
        border-color var(--travellin-tab-transition, 200ms ease),
        background-color var(--travellin-tab-transition, 200ms ease);
}

.travellin-tab-btn:last-child {
    border-inline-end: none;
}

.travellin-tab-btn:hover {
    color: var(--travellin-tab-hover-text-color, var(--travellin-primary));
    background: var(--travellin-tab-hover-bg, transparent);
}

.travellin-tab-btn.is-active {
    color: var(--travellin-tab-active-text-color, var(--travellin-primary));
    background: var(--travellin-tab-active-bg, transparent);
    border-bottom-color: var(--travellin-tab-active-indicator-color, var(--travellin-primary));
}

/* Filled/pill variant — applied when the widget's "Tab Style" control is
 * set to Filled instead of the default Underline. */
.travellin-trip-type-tabs.travellin-tabs--filled {
    background: transparent;
    border: none;
    gap: 6px;
}

.travellin-tabs--filled .travellin-tab-btn {
    flex: 0 0 auto;
    flex-direction: row;
    background: var(--travellin-form-bg, #f3f4f6);
    border-top: 1px solid transparent;
    border-inline-start: 1px solid transparent;
    border-inline-end: 1px solid transparent;
    border-radius: var(--travellin-radius);
    padding: 8px 14px;
}

.travellin-tabs--filled .travellin-tab-btn:hover {
    background: var(--travellin-border);
}

.travellin-tabs--filled .travellin-tab-btn.is-active {
    background: var(--travellin-primary);
    color: #fff;
    border-bottom-color: transparent;
}

.travellin-tabs--filled .travellin-tab-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.travellin-tab-icon {
    display: inline-flex;
    width: var(--travellin-tab-icon-size, 30px);
    height: var(--travellin-tab-icon-size, 30px);
    flex: 0 0 var(--travellin-tab-icon-size, 30px);
}

.travellin-tab-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.travellin-tab-label {
    line-height: 1.2;
}

/* Tablet: single row, horizontal scroll (never a grid, never a vertical
 * column) — fixed tab width instead of the equal-width desktop split.
 * Selector must be the same compound `.travellin-field.travellin-trip-type-tabs`
 * as the base rule (not just `.travellin-trip-type-tabs`) — a media query
 * does not add specificity on its own, so a lower-specificity override
 * here would silently lose to the base rule's `flex-wrap: wrap` at every
 * viewport width, leaving tabs wrapped into an ugly grid on mobile
 * instead of scrolling horizontally. */
@media (max-width: 1024px) {
    .travellin-field.travellin-trip-type-tabs {
        flex-wrap: nowrap;
    }

    .travellin-tab-btn {
        flex: 0 0 132px;
        min-width: 132px;
        min-height: 86px;
    }

    /* Design Standard v1.0 section 4: tab icon is 20px on Tablet.
     * Also overrides the Filled variant's own unconditional 16px rule
     * (.travellin-tabs--filled .travellin-tab-icon, two classes) — a
     * single-class .travellin-tab-icon rule here would lose to it
     * regardless of this media query, since specificity doesn't care
     * about breakpoints. Matched at equal specificity so the media query
     * correctly decides instead. */
    .travellin-tab-icon,
    .travellin-tabs--filled .travellin-tab-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }
}

/* Mobile: single row, horizontal finger-swipe scroll with snap points.
 * Only the tab strip scrolls horizontally; the page itself never does. */
@media (max-width: 600px) {
    .travellin-field.travellin-trip-type-tabs {
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
    }

    .travellin-tab-btn {
        flex: 0 0 110px;
        min-width: 110px;
        min-height: 74px;
        padding: 10px 6px;
        font-size: 13px;
        scroll-snap-align: start;
    }

    .travellin-tab-icon,
    .travellin-tabs--filled .travellin-tab-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }
}

.travellin-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.travellin-field[hidden] {
    display: none;
}

.travellin-field label,
.travellin-field legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--travellin-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Design spec section 5 (Typography): label style scoped to the search
 * form specifically — .travellin-field label/legend above is shared
 * with checkout and other pages, which keep their original look. */
.travellin-search-form .travellin-field label,
.travellin-search-form .travellin-field legend {
    font-size: 14px;
    font-weight: 500;
    color: var(--travellin-muted-text, var(--travellin-secondary));
    text-transform: none;
    letter-spacing: 0.01em;
}

/* Design spec section 9: decorative icon (location pin / calendar /
 * person) inside each search field, left-aligned to the input row.
 * Purely presentational — added as a sibling <span> in the template,
 * no input name/id/behaviour touched.
 *
 * .travellin-input-wrap (relative, wraps only icon+input+clear-button)
 * is what makes top:0/height:100% actually align with the input —
 * .travellin-field itself also contains the airport-group checkbox and
 * suggestions list below the input, so anchoring to *its* edges (the
 * original approach) put the icon/clear button well below the input,
 * confirmed by live measurement (icon rendered ~25px lower than the
 * input, overlapping the checkbox row instead of centered in the field). */
.travellin-input-wrap {
    position: relative;
    width: 100%;
}

.travellin-input-wrap input {
    width: 100%;
    box-sizing: border-box;
}

.travellin-field-icon {
    position: absolute;
    inset-inline-start: 20px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--travellin-inactive-icon, var(--travellin-muted-text, #64748b));
    pointer-events: none;
}

.travellin-field-icon svg {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.travellin-origin .travellin-autocomplete-input[type="text"],
.travellin-destination .travellin-autocomplete-input[type="text"] {
    padding-inline-start: 58px;
}

.travellin-dates-toggle .travellin-field-icon,
.travellin-travellers-toggle .travellin-field-icon {
    position: static;
    height: auto;
}

.travellin-field input[type="text"],
.travellin-field input[type="date"],
.travellin-field input[type="number"],
.travellin-field select {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 8px 12px;
    font-size: 15px;
    min-height: var(--travellin-input-height, 52px);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* Design spec sections 5/6/8: value typography (18px/600/#0F172A) and
 * 1.5px border with a hover state (#CBD5E1) — scoped to the search form
 * specifically; .travellin-field input above is shared with checkout,
 * which keeps its original border/typography. */
.travellin-search-form .travellin-field input[type="text"],
.travellin-search-form .travellin-field input[type="date"],
.travellin-search-form .travellin-field input[type="number"],
.travellin-search-form .travellin-field select,
.travellin-search-form .travellin-travellers-toggle {
    border-width: 1.5px;
    font-size: 18px;
    font-weight: 600;
    color: var(--travellin-secondary);
}

.travellin-search-form .travellin-field input[type="text"]:hover,
.travellin-search-form .travellin-field input[type="date"]:hover,
.travellin-search-form .travellin-field input[type="number"]:hover,
.travellin-search-form .travellin-field select:hover,
.travellin-search-form .travellin-travellers-toggle:hover {
    border-color: #cbd5e1;
}

/* Must come after (and match) the hover rule above in both specificity
 * and source order — confirmed by testing that without this, a field
 * that's simultaneously hovered and focused (e.g. just clicked into,
 * mouse still over it) showed the hover border instead of the focus
 * ring, because the original .travellin-field input:focus-visible rule
 * (assets/css/travellin-app.css, further below) has lower specificity
 * than this file's .travellin-search-form-scoped hover rule. */
.travellin-search-form .travellin-field input[type="text"]:focus-visible,
.travellin-search-form .travellin-field input[type="date"]:focus-visible,
.travellin-search-form .travellin-field input[type="number"]:focus-visible,
.travellin-search-form .travellin-field select:focus-visible,
.travellin-search-form .travellin-travellers-toggle:focus-visible {
    outline: none;
    border-color: var(--travellin-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--travellin-primary) 25%, transparent);
}

.travellin-search-form .travellin-field input[type="text"]::placeholder {
    color: var(--travellin-muted-text);
    font-weight: 400;
}

/* Design Standard v1.0 section 2/15: every interactive control needs a
 * visible, accessibility-compliant focus state. Previously only the
 * autocomplete suggestion list had one — the actual text/date/select
 * inputs, the trip type tabs, and the travellers toggle had none at all. */
.travellin-field input[type="text"]:focus-visible,
.travellin-field input[type="date"]:focus-visible,
.travellin-field input[type="number"]:focus-visible,
.travellin-field select:focus-visible,
.travellin-travellers-toggle:focus-visible {
    outline: none;
    border-color: var(--travellin-primary);
    /* Fallback first (a fixed semi-transparent blue) for browsers without
     * color-mix() support — an unsupported color-mix() value makes the
     * whole declaration invalid and CSS ignores it, keeping whichever
     * box-shadow was declared last that it DOES understand, so this
     * fallback line must come before the color-mix() one, not instead
     * of it. Without this, unsupported browsers would get no visible
     * focus ring at all — the opposite of this fix's purpose. */
    box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.25);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--travellin-primary) 25%, transparent);
}

.travellin-tab-btn:focus-visible {
    outline: 2px solid var(--travellin-primary);
    outline-offset: -2px;
}

/* Autocomplete */

.travellin-autocomplete-field {
    position: relative;
}

.travellin-autocomplete-suggestions {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 40;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    box-shadow: var(--travellin-shadow);
    max-height: 260px;
    overflow-y: auto;
}

.travellin-suggestion {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.travellin-suggestion:hover,
.travellin-suggestion:focus {
    background: rgba(11, 95, 255, 0.08);
}

/* Dates */

.travellin-dates-inputs {
    display: flex;
    gap: 8px;
}

.travellin-flex-dates {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.travellin-flex-btn {
    border: 1px solid var(--travellin-border);
    background: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.travellin-flex-btn.is-active {
    background: var(--travellin-primary);
    border-color: var(--travellin-primary);
    color: #fff;
}

/*
 * Section 5.1 "any London airport" — revealed only after the customer picks
 * a specific airport/city that belongs to a known multi-airport city group
 * (see AirportCityGroups on the backend). Off by default: ticking it is an
 * explicit choice, never an assumption made for the customer.
 */
.travellin-airport-group-toggle {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--travellin-text-muted, #666);
    cursor: pointer;
}

.travellin-airport-group-toggle[hidden] {
    display: none;
}

.travellin-airport-group-toggle input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.travellin-flex-month {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--travellin-text-muted, #666);
}

.travellin-flex-month-input {
    border: 1px solid var(--travellin-border);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
}

/* Traveller popover */

.travellin-travellers-field {
    position: relative;
}

.travellin-travellers-toggle {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding-block: 8px;
    padding-inline: 20px 12px;
    background: #fff;
    min-height: var(--travellin-input-height, 52px);
    text-align: start;
    cursor: pointer;
    font-size: 15px;
}

.travellin-travellers-popover {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 40;
    margin-top: 4px;
    width: 320px;
    background: #fff;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    box-shadow: var(--travellin-shadow);
    padding: 20px;
}

/* Premium calendar (Design System spec: "Improve appearance only...
 * two-month desktop layout, one-month responsive layout, modern range
 * selection and hover state, consistent popup styling"). Toggle button
 * styled identically to the other search-form fields for a unified
 * look; popover mirrors .travellin-travellers-popover's positioning
 * pattern (absolute, top:100%, same border/radius/shadow tokens). */
.travellin-dates-toggle {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    text-align: start;
    background: #fff;
    border: 1.5px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding-block: 8px;
    padding-inline: 20px 12px;
    min-height: var(--travellin-input-height, 52px);
    font-size: 18px;
    font-weight: 600;
    color: var(--travellin-secondary);
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.travellin-dates-toggle:hover {
    border-color: #cbd5e1;
}

.travellin-dates-toggle:active,
.travellin-travellers-toggle:active {
    background: var(--travellin-light-bg, #f5f8fc);
}

/* Filled state clear (×) button — Design Audit section 6. Positioned
 * to the right of origin/destination text inputs, only shown once the
 * field has a value (assets/js/search-app.js toggles `hidden`). */
.travellin-field-clear {
    position: absolute;
    inset-inline-end: 10px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--travellin-muted-text, #64748b);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.travellin-field-clear:hover {
    color: var(--travellin-secondary);
}

.travellin-origin .travellin-autocomplete-input[type="text"],
.travellin-destination .travellin-autocomplete-input[type="text"] {
    padding-inline-end: 32px;
}

.travellin-dates-toggle:focus-visible {
    outline: none;
    border-color: var(--travellin-primary);
    box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.25);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--travellin-primary) 25%, transparent);
}

.travellin-dates-summary {
    color: inherit;
}

/* Native inputs stay in the DOM and keep receiving real values (the
 * calendar JS writes to them directly) — only hidden visually, and only
 * once initCalendar() has fully succeeded (assets/js/search-app.js).
 * Not display:none, so they're still part of layout/measurement and
 * form submission is completely unaffected either way. */
.travellin-visually-hidden-inputs {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.travellin-calendar-popover {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 40;
    margin-top: 4px;
    width: 640px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    box-shadow: var(--travellin-shadow);
    padding: 16px;
}

.travellin-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.travellin-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--travellin-border);
    border-radius: 8px;
    color: var(--travellin-secondary);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.travellin-calendar-nav:hover {
    background: var(--travellin-light-bg, #f5f8fc);
    border-color: #cbd5e1;
}

.travellin-calendar-months-labels {
    display: flex;
    gap: 0;
    flex: 1;
    justify-content: space-around;
    font-weight: 600;
    font-size: 15px;
    color: var(--travellin-secondary);
}

.travellin-calendar-grids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.travellin-calendar-day-names {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.travellin-calendar-day-names span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--travellin-muted-text, #64748b);
    text-transform: uppercase;
}

.travellin-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.travellin-calendar-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    color: var(--travellin-secondary);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.travellin-calendar-day--blank {
    cursor: default;
    pointer-events: none;
}

.travellin-calendar-day:hover:not(:disabled):not(.travellin-calendar-day--blank):not(.travellin-calendar-day--start):not(.travellin-calendar-day--end):not(.travellin-calendar-day--in-range) {
    background: var(--travellin-light-bg, #f5f8fc);
}

.travellin-calendar-day--start:hover,
.travellin-calendar-day--end:hover {
    background: #1d4ed8;
}

.travellin-calendar-day--past {
    color: #cbd5e1;
    cursor: not-allowed;
}

.travellin-calendar-day--today {
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--travellin-primary);
}

.travellin-calendar-day--in-range {
    background: var(--travellin-light-bg, #eef4ff);
    border-radius: 0;
}

.travellin-calendar-day--start,
.travellin-calendar-day--end {
    background: var(--travellin-primary);
    color: #fff;
    font-weight: 700;
}

.travellin-calendar-day--start {
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.travellin-calendar-day--end {
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.travellin-calendar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--travellin-border);
}

.travellin-calendar-range-summary {
    font-size: 13px;
    color: var(--travellin-muted-text, #64748b);
}

.travellin-calendar-done {
    background: var(--travellin-primary);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Design spec: two-month desktop, one-month responsive — collapses to a
 * single visible month grid + full-width popover on tablet/mobile. The
 * second month is still rendered (simpler, more robust than conditional
 * JS rendering) but hidden via CSS. */
@media (max-width: 1024px) {
    .travellin-calendar-popover {
        width: 320px;
    }

    .travellin-calendar-grids {
        grid-template-columns: 1fr;
    }

    .travellin-calendar-second-label,
    .travellin-calendar-month:nth-child(2) {
        display: none;
    }
}

@media (max-width: 600px) {
    .travellin-calendar-popover {
        position: fixed;
        top: auto;
        bottom: 0;
        inset-inline: 0;
        width: auto;
        max-width: none;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        margin-top: 0;
    }

    .travellin-calendar-day {
        font-size: 14px;
    }
}

.travellin-traveller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--travellin-border);
    font-size: 15px;
    font-weight: 500;
    color: var(--travellin-secondary);
}

.travellin-traveller-row[hidden] {
    display: none;
}

.travellin-traveller-row:last-of-type {
    border-bottom: none;
}

.travellin-traveller-row small {
    display: block;
    color: var(--travellin-muted-text, #666);
    font-weight: 400;
    font-size: 13px;
}

.travellin-stepper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.travellin-stepper button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--travellin-border);
    background: #fff;
    color: var(--travellin-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.travellin-stepper button:hover:not(:disabled) {
    border-color: var(--travellin-primary);
    color: var(--travellin-primary);
    background: var(--travellin-light-bg, #f5f8fc);
}

.travellin-stepper button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.travellin-stepper output {
    min-width: 22px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
}

.travellin-children-ages {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.travellin-children-ages[hidden] {
    display: none;
}

.travellin-child-age-row label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    gap: 8px;
}

.travellin-travellers-done {
    margin-top: 16px;
    width: 100%;
    background: var(--travellin-primary);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 10px 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Budget & filters */

.travellin-more-filters {
    width: 100%;
    flex-basis: 100%;
}

.travellin-more-filters summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--travellin-primary);
    padding: 6px 0;
}

.travellin-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding-top: 8px;
}

.travellin-filter-item {
    border: none;
    padding: 0;
    margin: 0;
}

.travellin-budget-row {
    display: flex;
    gap: 8px;
}

.travellin-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    color: var(--travellin-text);
    padding: 2px 0;
}

.travellin-form-error {
    color: var(--travellin-error);
    margin-top: 8px;
    font-size: 13px;
}

/* Results */

.travellin-search-summary-bar {
    font-weight: 600;
    margin-bottom: 12px;
}

.travellin-sort-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.travellin-filters-toggle {
    display: none;
    background: none;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 6px 12px;
    cursor: pointer;
}

/*
 * .travellin-results-layout / .travellin-filters-sidebar / .travellin-results-area
 * had no layout rules at all before this — the sidebar rendered as a
 * zero-width, zero-content <aside> next to the results (section 5.1
 * filters / section 11 "Filters Sidebar" template). results-app.js now
 * actually populates it; this gives it a real two-column layout.
 */
.travellin-results-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.travellin-filters-sidebar {
    flex: 0 0 220px;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 16px;
}

.travellin-filters-sidebar:empty {
    display: none;
}

.travellin-results-area {
    flex: 1;
    min-width: 0;
}

.travellin-filter-group {
    border-bottom: 1px solid var(--travellin-border);
    padding: 12px 0;
}

.travellin-filter-group:first-of-type {
    padding-top: 0;
}

.travellin-filter-group:last-of-type {
    border-bottom: none;
    padding-bottom: 8px;
}

.travellin-filter-group summary {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--travellin-secondary);
    cursor: pointer;
    list-style: none;
}

.travellin-filter-group summary::-webkit-details-marker {
    display: none;
}

.travellin-filter-group summary::after {
    content: '+';
    float: right;
    font-weight: 400;
}

.travellin-filter-group[open] summary::after {
    content: '\2212';
}

.travellin-filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
}

.travellin-filter-group select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
}

.travellin-filter-price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.travellin-filter-price-inputs input[type="range"] {
    flex: 1;
}

.travellin-filters-clear {
    background: none;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 6px 12px;
    cursor: pointer;
    width: 100%;
}

/*
 * Horizontal quick-filter bar — a curated subset of the sidebar's own
 * filters, rendered as toggle chips above the results grid (lastminute.com
 * -style). Shares activeFilters state with the sidebar via
 * syncFilterUI() in results-app.js, so a chip and its matching sidebar
 * checkbox always agree.
 */
.travellin-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.travellin-quick-filters:empty {
    display: none;
    margin-bottom: 0;
}

/*
 * Section 33 No-Results Logic / section 5.1 "any London airport" —
 * discloses whenever the backend widened a search to sibling same-city
 * airports (see SearchController::expandAndMerge + response.expansion).
 * Hidden by default; results-app.js only unhides it when expansion actually
 * happened, never as decoration.
 */
.travellin-expansion-notice {
    background: #fff8e6;
    border: 1px solid #f0d999;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: #6b5300;
    margin-bottom: 16px;
}

.travellin-expansion-notice[hidden] {
    display: none;
}

.travellin-quick-filter-chip {
    background: #fff;
    border: 1px solid var(--travellin-border);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.travellin-quick-filter-chip.is-active {
    background: var(--travellin-primary);
    border-color: var(--travellin-primary);
    color: #fff;
}

/* Related packages */

.travellin-related-packages:empty {
    display: none;
}

.travellin-related-packages h2 {
    font-size: 18px;
    margin: 32px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--travellin-border);
}

.travellin-related-cards {
    opacity: 0.96;
}

.travellin-results-pagination {
    text-align: center;
    margin: 24px 0;
}

.travellin-results-pagination:hidden {
    display: none;
}

.travellin-load-more {
    background: #fff;
    border: 1px solid var(--travellin-primary);
    color: var(--travellin-primary);
    border-radius: var(--travellin-radius);
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
}

.travellin-load-more:hover {
    background: var(--travellin-primary);
    color: #fff;
}

@media (max-width: 768px) {
    .travellin-filters-toggle {
        display: inline-block;
        order: -1;
    }

    .travellin-results-layout {
        flex-direction: column;
    }

    .travellin-filters-sidebar {
        display: none;
        flex-basis: auto;
        width: 100%;
    }

    .travellin-filters-sidebar.is-open {
        display: block;
    }
}

.travellin-results-loading,
.travellin-results-empty,
.travellin-results-error {
    color: #555;
}

.travellin-card-media {
    height: 200px;
    background: linear-gradient(135deg, rgba(11, 95, 255, 0.12), rgba(255, 122, 69, 0.12));
    overflow: hidden;
    position: relative;
}

.travellin-card-discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: var(--travellin-accent-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.travellin-card-overlay-actions {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.travellin-card-overlay-actions .travellin-card-save,
.travellin-card-compare-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.5);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.travellin-card-overlay-actions .travellin-card-save:hover,
.travellin-card-compare-toggle:hover {
    background: rgba(20, 20, 20, 0.75);
}

.travellin-card-save.is-saved {
    color: var(--travellin-accent-dark);
    background: rgba(255, 255, 255, 0.9);
}

.travellin-card-compare-toggle {
    position: relative;
}

.travellin-card-compare-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.travellin-card-compare-toggle:has(input:checked) {
    background: var(--travellin-primary);
}

.travellin-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.travellin-card-media-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(27, 42, 74, 0.35);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 8px;
}

.travellin-package-gallery-empty {
    width: 100%;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(11, 95, 255, 0.08), rgba(255, 122, 69, 0.08));
    color: rgba(27, 42, 74, 0.4);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--travellin-radius);
}

/* Shared slider (travellin-slider.js) — used both compact (result cards)
 * and full-size (package gallery). Compact variant shrinks the arrows/dots
 * so they don't overwhelm a 140px-tall card. */
.travellin-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.travellin-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.travellin-slider-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.travellin-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    z-index: 2;
}

.travellin-slider-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Deliberately physical (not logical) left/right — these represent
 * image sequence order (prev/next slide), not text reading direction.
 * Flipping them for RTL would put the "prev" arrow on the visual right,
 * which is more confusing for gallery navigation than consistent, not
 * an RTL accessibility requirement. */
.travellin-slider-arrow--prev {
    left: 8px;
}

.travellin-slider-arrow--next {
    right: 8px;
}

.travellin-slider-dots {
    position: absolute;
    bottom: 8px;
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.travellin-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.6);
    padding: 0;
    cursor: pointer;
}

.travellin-slider-dot.is-active {
    background: #fff;
}

.travellin-slider--compact .travellin-slider-arrow {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 11px;
}

.travellin-slider--compact .travellin-slider-dot {
    width: 6px;
    height: 6px;
}

.travellin-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.travellin-badge {
    background: var(--travellin-accent-dark);
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

.travellin-badge--best_value {
    background: var(--travellin-success);
}

.travellin-badge--best_for_families {
    background: var(--travellin-primary);
}

.travellin-card-title {
    margin: 0 0 4px;
    font-size: 16px;
}

.travellin-card-stars {
    margin: 0 0 6px;
    color: #e8a33d;
    letter-spacing: 1px;
}

.travellin-card-more-toggle {
    background: none;
    border: none;
    color: var(--travellin-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    margin: 0 0 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.travellin-card-more-caret {
    display: inline-block;
    transition: transform 0.15s ease;
}

.travellin-card-more-toggle.is-open .travellin-card-more-caret {
    transform: rotate(180deg);
}

.travellin-card-more-panel {
    margin: 0 0 8px;
    padding: 8px 10px;
    background: #f7f8fa;
    border-radius: var(--travellin-radius);
    font-size: 12px;
}

.travellin-card-more-panel dt {
    font-weight: 600;
    color: #555;
    float: left;
    clear: left;
    margin-inline-end: 6px;
}

.travellin-card-more-panel dd {
    margin: 0 0 4px;
}

.travellin-card-more-panel::after {
    content: '';
    display: block;
    clear: both;
}

.travellin-card-duration {
    font-size: 13px;
    color: #555;
    margin: 0 0 4px;
}

.travellin-card-supplier-note {
    font-size: 12px;
    color: #666;
}

.travellin-card-price-block {
    margin: 8px 0;
}

.travellin-card-price-was {
    font-size: 13px;
    color: #888;
    text-decoration: line-through;
    margin: 0;
}

.travellin-card-price {
    font-size: 18px;
    margin: 2px 0;
}

.travellin-card-savings {
    font-size: 12px;
    color: var(--travellin-success);
    font-weight: 600;
    margin: 0 0 4px;
}

.travellin-card-view {
    background: var(--travellin-primary);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 10px 14px;
    cursor: pointer;
    width: 100%;
    font-weight: 600;
    font-size: 14px;
}

/* Package details */

.travellin-package-details section:empty {
    display: none;
}

.travellin-package-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.travellin-package-breadcrumb a {
    color: var(--travellin-primary);
    text-decoration: none;
}

.travellin-package-breadcrumb a:hover {
    text-decoration: underline;
}

.travellin-package-breadcrumb-current {
    color: var(--travellin-text);
    font-weight: 600;
}

.travellin-package-gallery {
    margin-bottom: 16px;
    border-radius: var(--travellin-radius);
    overflow: hidden;
}

/* Two-column body: main content + a genuinely sticky price/booking
 * sidebar. Previously there was zero layout CSS for this at all — the
 * "sticky" panel wasn't sticky, and everything (hero through alternatives)
 * simply stacked full-width in document order. */
.travellin-package-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.travellin-package-guest-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
}

.travellin-guest-rating-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 8px;
    background: var(--travellin-primary, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 6px;
}

.travellin-guest-rating-count {
    color: var(--travellin-muted-text, #64748b);
    font-size: 14px;
}

.travellin-package-main {
    flex: 1 1 auto;
    min-width: 0;
}

.travellin-sticky-booking-panel {
    flex: 0 0 320px;
    width: 320px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.travellin-sticky-total {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.travellin-sticky-availability {
    font-size: 13px;
    color: var(--travellin-success);
    margin-bottom: 12px;
}

.travellin-select-package-sticky {
    background: var(--travellin-primary);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 12px 16px;
    width: 100%;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .travellin-package-layout {
        flex-direction: column;
    }

    .travellin-sticky-booking-panel {
        position: static;
        width: 100%;
        flex-basis: auto;
        order: -1;
    }
}

.travellin-package-gallery .travellin-slider {
    height: 360px;
}

@media (max-width: 768px) {
    .travellin-package-gallery .travellin-slider {
        height: 220px;
    }
}

.travellin-package-price-summary dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    margin: 0;
}

.travellin-package-price-summary dt {
    color: #666;
}

.travellin-package-unavailable {
    padding: 24px;
    text-align: center;
    color: var(--travellin-error);
}

.travellin-back-to-results {
    color: var(--travellin-primary);
    text-decoration: none;
    font-weight: 600;
}

.travellin-package-alternatives h2 {
    font-size: 18px;
    margin: 24px 0 12px;
}

.travellin-alternatives-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.travellin-alternative-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 12px 14px;
    text-decoration: none;
    color: var(--travellin-text);
}

.travellin-alternative-card:hover {
    border-color: var(--travellin-primary);
}

.travellin-alternative-title {
    font-weight: 600;
    font-size: 14px;
}

.travellin-alternative-stars {
    color: var(--travellin-accent-dark);
    font-size: 12px;
}

.travellin-alternative-price {
    font-weight: 600;
}

@media (max-width: 768px) {
    .travellin-travellers-popover {
        width: 100%;
        inset-inline: 0;
    }
}

/* Checkout wizard */

.travellin-checkout-steps {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.travellin-checkout-steps li {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    border-bottom: 3px solid var(--travellin-border);
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
}

.travellin-checkout-steps li.is-current {
    border-bottom-color: var(--travellin-primary);
    color: var(--travellin-secondary);
}

.travellin-traveller-fieldset {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 14px;
    margin-bottom: 14px;
}

.travellin-traveller-fieldset legend {
    font-weight: 700;
    padding: 0 6px;
}

.travellin-traveller-fieldset label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.travellin-traveller-fieldset input {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 8px;
    font-size: 14px;
    font-weight: 400;
}

.travellin-add-traveller {
    background: #fff;
    border: 1px dashed var(--travellin-primary);
    color: var(--travellin-primary);
    border-radius: var(--travellin-radius);
    padding: 8px 14px;
    cursor: pointer;
    margin-bottom: 14px;
}

.travellin-checkout-continue,
.travellin-checkout-form button[type="submit"] {
    background: var(--travellin-primary);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
}

.travellin-checkout-continue:disabled,
.travellin-checkout-form button[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

/* Enterprise Audit Part 2, section 3: "Verify loading indicators during
 * API requests" — the review step's PUT /checkout/session/{id} call
 * previously only disabled the button, with no visual sign anything was
 * happening. Same spinner pattern as .travellin-search-submit.is-loading
 * (assets/css/travellin-frontend.css). */
.travellin-checkout-continue.is-loading,
.travellin-checkout-form button[type="submit"].is-loading {
    color: transparent;
}

.travellin-checkout-continue.is-loading::after,
.travellin-checkout-form button[type="submit"].is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: travellin-button-spin 700ms linear infinite;
}

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

.travellin-checkout-error,
.travellin-price-change-notice,
.travellin-consent-error {
    color: var(--travellin-error);
    background: rgba(179, 45, 46, 0.06);
    border-radius: var(--travellin-radius);
    padding: 10px;
    margin-bottom: 14px;
}

.travellin-price-breakdown {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.travellin-price-breakdown th,
.travellin-price-breakdown td {
    text-align: left;
    padding: 8px 4px;
    border-bottom: 1px solid var(--travellin-border);
}

.travellin-price-breakdown tfoot th,
.travellin-price-breakdown tfoot td {
    font-weight: 700;
}

.travellin-selections-summary {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--travellin-form-bg, #f8f9fb);
}

.travellin-selections-summary h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #666;
    margin: 0 0 8px;
}

.travellin-selections-summary ul {
    margin: 0;
    padding-inline-start: 18px;
}

.travellin-selections-summary li {
    font-size: 14px;
    margin-bottom: 4px;
}

.travellin-special-requests {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 16px;
    margin: 16px 0;
}

.travellin-special-requests legend {
    font-weight: 700;
    padding: 0 6px;
}

.travellin-special-requests .description {
    font-size: 12px;
    color: #777;
    margin: 0 0 14px;
}

.travellin-special-requests .travellin-field {
    margin-bottom: 12px;
}

.travellin-special-requests .travellin-field input,
.travellin-special-requests .travellin-field select,
.travellin-special-requests .travellin-field textarea {
    width: 100%;
}

.travellin-checkout-review form label,
.travellin-checkout-form label.travellin-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 10px;
}

.travellin-payment-unavailable {
    color: var(--travellin-warning);
    background: rgba(185, 137, 0, 0.08);
    border-radius: var(--travellin-radius);
    padding: 12px;
    margin: 12px 0;
}

#travellin-pay-button {
    background: var(--travellin-accent-dark);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 12px 24px;
    cursor: pointer;
}

#travellin-pay-button:disabled {
    background: #ccc;
    color: #6b6b6b;
    cursor: not-allowed;
}

.travellin-payment-security-note {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
}

.travellin-retry-flexible {
    display: block;
    margin: 12px auto 0;
    background: #fff;
    border: 1px solid var(--travellin-primary);
    color: var(--travellin-primary);
    border-radius: var(--travellin-radius);
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 600;
}

.travellin-retry-flexible:disabled {
    opacity: 0.6;
    cursor: default;
}

.travellin-no-results-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.travellin-no-results-suggestions .travellin-retry-flexible {
    margin: 0;
}

.travellin-save-search {
    display: inline-block;
    margin-inline-start: 12px;
    background: none;
    border: 1px solid var(--travellin-border);
    color: var(--travellin-secondary);
    border-radius: var(--travellin-radius);
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}

.travellin-save-search.is-saved {
    border-color: var(--travellin-primary);
    color: var(--travellin-primary);
    cursor: default;
}

.travellin-save-search:disabled {
    opacity: 0.7;
}

/* Compare (section 34) */

.travellin-card-compare {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    color: var(--travellin-text);
    margin-top: 8px;
    cursor: pointer;
}

.travellin-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.travellin-compare-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--travellin-secondary);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--travellin-radius);
    margin-top: 16px;
    z-index: 30;
}

.travellin-compare-count {
    font-weight: 600;
    flex: 1;
}

.travellin-compare-view {
    background: var(--travellin-accent-dark);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 8px 16px;
    cursor: pointer;
}

.travellin-compare-clear {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    border-radius: var(--travellin-radius);
    padding: 8px 14px;
    cursor: pointer;
}

.travellin-compare-modal {
    position: fixed;
    inset: 0;
    background: rgba(16, 35, 63, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.travellin-compare-modal-inner {
    background: #fff;
    border-radius: var(--travellin-radius);
    padding: 20px;
    max-width: 100%;
    max-height: 90vh;
    overflow: auto;
}

.travellin-compare-close {
    background: var(--travellin-border);
    border: none;
    border-radius: var(--travellin-radius);
    padding: 8px 14px;
    cursor: pointer;
    margin-bottom: 14px;
}

.travellin-compare-table {
    border-collapse: collapse;
    width: 100%;
}

.travellin-compare-table th,
.travellin-compare-table td {
    border: 1px solid var(--travellin-border);
    padding: 8px 12px;
    text-align: left;
    font-size: 13px;
    white-space: nowrap;
}

.travellin-compare-table thead th {
    background: var(--travellin-form-bg);
    position: sticky;
    top: 0;
}

.travellin-compare-table tbody th {
    background: rgba(11, 95, 255, 0.04);
    font-weight: 600;
}

@media (max-width: 768px) {
    .travellin-compare-bar {
        flex-wrap: wrap;
    }
}

/* Save (section 19) — round overlay icon variant defined above
 * alongside .travellin-card-overlay-actions; --login keeps the same round
 * shape (icon only, no text) but a distinct colour so a logged-out visitor
 * can tell at a glance it behaves differently (goes to login, not a toggle). */

.travellin-card-save--login {
    color: var(--travellin-accent-dark);
}

/* Account dashboard */

.travellin-account-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--travellin-border);
    margin-bottom: 16px;
}

.travellin-account-nav a {
    padding: 10px 16px;
    text-decoration: none;
    color: #666;
    border-bottom: 2px solid transparent;
}

.travellin-account-nav a.is-active {
    color: var(--travellin-primary);
    border-bottom-color: var(--travellin-primary);
    font-weight: 600;
}

.travellin-account-pending {
    color: #666;
    padding: 20px;
    background: var(--travellin-form-bg);
    border-radius: var(--travellin-radius);
}

.travellin-saved-package-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 12px 16px;
    margin-bottom: 10px;
}

.travellin-saved-package-info h4 {
    margin: 0 0 4px;
}

.travellin-saved-package-price {
    font-weight: 600;
    margin: 0;
}

.travellin-saved-package-expired {
    color: var(--travellin-warning);
    font-size: 12px;
    margin: 4px 0 0;
}

.travellin-profile-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 420px;
}

.travellin-profile-form .travellin-field input:disabled {
    background: var(--travellin-form-bg);
    color: #888;
}

.travellin-profile-form button[type="submit"] {
    align-self: flex-start;
    background: var(--travellin-primary);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 10px 20px;
    cursor: pointer;
}

.travellin-profile-status {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--travellin-radius);
}

.travellin-profile-status.is-success {
    color: #1a7f37;
    background: rgba(26, 127, 55, 0.08);
}

.travellin-profile-status.is-error {
    color: var(--travellin-error);
    background: rgba(179, 45, 46, 0.06);
}

.travellin-saved-package-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.travellin-saved-package-view {
    color: var(--travellin-primary);
}

.travellin-saved-package-remove {
    background: none;
    border: 1px solid var(--travellin-error);
    color: var(--travellin-error);
    border-radius: var(--travellin-radius);
    padding: 6px 12px;
    cursor: pointer;
}

.travellin-saved-search-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 12px 16px;
    margin-bottom: 10px;
}

.travellin-saved-search-info h4 {
    margin: 0 0 4px;
}

.travellin-saved-search-alerts {
    color: #666;
    font-size: 12px;
    margin: 0;
}

.travellin-saved-search-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.travellin-saved-search-actions .travellin-saved-search-run {
    background: none;
    border: 1px solid var(--travellin-primary);
    color: var(--travellin-primary);
    border-radius: var(--travellin-radius);
    padding: 6px 12px;
    cursor: pointer;
}

.travellin-saved-search-actions .travellin-saved-search-remove {
    background: none;
    border: 1px solid var(--travellin-error);
    color: var(--travellin-error);
    border-radius: var(--travellin-radius);
    padding: 6px 12px;
    cursor: pointer;
}

/*
 * "Your saved searches" quick-select list on the search form itself
 * (search-app.js initSavedSearches/buildSavedSearchChip) — built earlier
 * this session but never given real styling, so it was rendering as bare
 * unstyled buttons. Distinct markup from the dashboard list above
 * (chips in a horizontal wrap vs. rows in a vertical list) since the
 * search form has much less width to work with.
 */
.travellin-saved-searches {
    margin-bottom: 16px;
}

.travellin-saved-searches-heading {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px;
}

.travellin-saved-searches-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.travellin-saved-search-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--travellin-border);
    border-radius: 999px;
    padding: 4px 6px 4px 14px;
    background: var(--travellin-form-bg);
}

.travellin-saved-search-chip .travellin-saved-search-run {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 2px;
    color: inherit;
}

.travellin-saved-search-chip .travellin-saved-search-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 50%;
}

.travellin-saved-search-chip .travellin-saved-search-remove:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--travellin-error);
}


/* Legal Notices (section 21 #27 / section 12 #26) */

.travellin-legal-notices {
    max-width: 760px;
    margin: 0 auto;
}

.travellin-legal-section {
    margin-bottom: 28px;
}

.travellin-legal-section h2 {
    font-size: 18px;
    margin: 0 0 10px;
}

.travellin-legal-placeholder-notice {
    background: rgba(185, 137, 0, 0.08);
    border: 1px dashed var(--travellin-warning);
    border-radius: var(--travellin-radius);
    padding: 12px 14px;
    color: #6b5300;
}

.travellin-legal-suppliers-table {
    width: 100%;
    border-collapse: collapse;
}

.travellin-legal-suppliers-table th,
.travellin-legal-suppliers-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--travellin-border);
    vertical-align: top;
}

.travellin-checkout-legal-link {
    margin: 0 0 12px;
    font-size: 13px;
}

.travellin-checkout-package-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
}

.travellin-checkout-package-summary:empty {
    display: none;
    border: none;
    padding: 0;
    margin: 0;
}

.travellin-checkout-summary-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--travellin-radius);
    flex-shrink: 0;
}

.travellin-checkout-summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

/*
 * Product decision: affiliate/white-label supplier offers (e.g.
 * TravelPayouts) are shown for price reference only — never bookable
 * anywhere on this site. The sticky button is disabled rather than hidden
 * so the customer still sees the offer is real, just not actionable here.
 */
.travellin-select-package-sticky--reference-only {
    cursor: not-allowed;
    opacity: 0.65;
    background: #9a9a9a;
    border-color: #9a9a9a;
}

/* Shared notification toasts (travellin-notify.js) — used across every
 * Tier 1 app (search, results, package details, checkout, account) so a
 * failure anywhere is always visible on screen, not only inline or in the
 * console. Fixed to the viewport, stacks top-down, dismissible. */
#travellin-notify-container {
    position: fixed;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.travellin-notify-toast {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--travellin-radius, 6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    line-height: 1.4;
    background: var(--travellin-secondary, #1b2a4a);
    color: #fff;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.travellin-notify-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.travellin-notify-toast--error {
    background: #b3261e;
}

.travellin-notify-toast--success {
    background: #1e7d4f;
}

.travellin-notify-toast__text {
    flex: 1;
}

.travellin-notify-toast__close {
    background: none;
    border: none;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
}

.travellin-notify-toast__close:hover {
    opacity: 1;
}