/**
 * Travellin Elementor — base styles.
 * Section 30 "Style Architecture": every widget reads from these CSS
 * variables; Elementor style controls override them per-widget via
 * `--travellin-*` selectors (see e.g. SearchFormWidget's form_background
 * control), never by writing hard-coded global CSS or `!important`.
 */
:root {
    --travellin-primary: #0866ff;
    --travellin-secondary: #102542;
    --travellin-accent: #ff7a45;
    --travellin-accent-dark: #a34825;
    --travellin-text: #1a1a1a;
    --travellin-border: #dce3ec;
    --travellin-radius: 10px;
    --travellin-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --travellin-success: #1a7f37;
    --travellin-warning: #b98900;
    --travellin-error: #b32d2e;
    --travellin-grid-columns: 3;
    --travellin-grid-gap: 20px;
    --travellin-form-bg: #ffffff;
    --travellin-light-bg: #f5f8fc;
    --travellin-input-height: 52px;
}

/**
 * Travellin Search Form UI Design Audit & Specification — exact values
 * from the reference design, scoped to .travellin-search-form only via
 * CSS custom property override. Every existing rule elsewhere in this
 * file/travellin-app.css that reads var(--travellin-primary) etc. picks
 * these up automatically for anything inside the search form, while
 * results/checkout/single-trip pages (which share the same variable
 * names) keep their own already-tested values — this redesign is
 * explicitly scoped to "Tabs and Search Form" only, not a site-wide
 * palette change.
 */
.travellin-search-form {
    --travellin-primary: #2563eb;
    --travellin-secondary: #0f172a;
    --travellin-text: #334155;
    --travellin-border: #e2e8f0;
    --travellin-muted-text: #64748b;
    --travellin-inactive-icon: #475569;
    --travellin-radius: 16px;
    --travellin-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    --travellin-input-height: 56px;
    background: var(--travellin-form-bg);
    border: 1.5px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    box-shadow: var(--travellin-shadow);
    padding: 24px;
    color: var(--travellin-text);
    font-family: 'Inter', -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif;
}

/* =====================================================================
   THEME NORMALIZATION LAYER — read this before adding component CSS.
   =====================================================================

   The host theme styles bare ELEMENT selectors, and those declarations
   land on every button, input, label and fieldset inside our components.
   Measured on travellin.info (Astra 4.13.6) on 2026-07-28 — 12 rules in the
   theme's 67 KB inline Customizer block plus 20 in its main stylesheet were
   winning on our elements:

     body, button, input, select, textarea, .ast-button   -> 94 elements
         font-family, font-weight, font-size, line-height
     button, .ast-button, .button, input[type=submit]     -> 91 elements
         border-radius (all four corners)
     .menu-toggle, button, .ast-button, .button, ...      -> 91 elements
         border-style, border-width, color, padding
     label, legend                                        -> 66 elements
         color, font-size, font-style, font-weight, line-height
     fieldset                                             -> 13 elements
         padding, border-radius
     input                                                ->  3 elements
         outline

   None of this was a specificity war we were losing — it was a COVERAGE
   GAP. Our component rules simply never declared those properties, so the
   theme's declaration was the only one present and won by default. That is
   the same root cause behind three separate visual defects already fixed
   one at a time: invisible white-on-white chips, a swap control crushed to
   an ellipse by 30px of inherited padding, and day-step arrows spread to
   122px. Patching them individually does not stop the next one.

   SPECIFICITY CONTRACT — the whole layer depends on it:

     theme element selectors  `button`, `label`, `fieldset`   = (0,0,1)
     THIS layer               `.travellin-x button`           = (0,1,1)  wins
     our component rules      `.travellin-x .travellin-y`     = (0,2,0)  wins

   So this layer neutralises the theme without ever outranking a real
   component rule. Do NOT raise it to (0,2,1) — an earlier attempt used
   `button:not(.travellin-search-submit)`, which did exactly that and broke
   the active filter chip and both Done buttons.

   Only properties the theme actually sets are reset here. Anything else is
   left to the browser default on purpose, so this layer stays a shield and
   never becomes a second, competing design system.

   SCOPE — deliberately NOT applied everywhere.

   The aggressive part (button padding / border / radius / background) runs
   ONLY inside `.travellin-search-form`, whose components are all styled at
   (0,2,0) in this file and therefore survive it. The results page is
   excluded: its buttons — `.travellin-load-more`,
   `.travellin-quick-filter-chip`, `.travellin-filter-pill-remove` and around
   170 more — live in travellin-app.css / travellin-hotel.css at (0,1,0), and
   a (0,1,1) reset outranks them. That exact mistake shipped in 3.5.0 and
   stripped padding and colour across the whole results page; it is not
   repeated here. Those components already declare their own colour and
   padding, so the theme has nothing to leak into.

   Everywhere else only the harmless, genuinely-inherited properties are
   normalised. */
.travellin-search-form button,
.travellin-search-form input,
.travellin-search-form select,
.travellin-search-form textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: normal;
    color: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* Every other container: font only. Enough to stop the theme's font-family /
   size / weight leaking in, without touching anything a component styles. */
.travellin-results input,
.travellin-results select,
.travellin-results textarea,
.travellin-package-details input,
.travellin-package-details select,
.travellin-checkout input,
.travellin-checkout select,
.travellin-checkout textarea,
.travellin-flight-booking input,
.travellin-customer-dashboard input {
    font-family: inherit;
    font-size: inherit;
}
.travellin-results button,
.travellin-package-details button,
.travellin-checkout button,
.travellin-flight-booking button,
.travellin-customer-dashboard button,
.travellin-booking-confirmation button,
.travellin-package-archive button,
.travellin-legal-notices button {
    font-family: inherit;
}

/* `label, legend` is styled by the theme with colour AND typography, which is
   why field labels and fieldset legends drifted. Labels are not styled by any
   component rule, so this is safe in every container. */
.travellin-search-form label,
.travellin-search-form legend,
.travellin-results label,
.travellin-results legend,
.travellin-package-details label,
.travellin-checkout label,
.travellin-checkout legend,
.travellin-customer-dashboard label {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: normal;
    line-height: inherit;
}

/* `<legend>` keeps its own theme chrome even after the label rule above:
   `fieldset legend { padding: 0 0.5em }` and `legend { border-width: 0 }` were
   the last declarations still winning on any tab — 2 to 12 per trip type,
   depending on how many filter fieldsets that tab shows. Split out from the
   label rule so `padding` is never applied to <label>. */
.travellin-search-form legend,
.travellin-results legend,
.travellin-checkout legend {
    padding: 0;
    border: 0;
}

/* The theme gives every fieldset padding and a rounded border. We use
   fieldsets purely as grouping wrappers. */
.travellin-search-form fieldset,
.travellin-results fieldset,
.travellin-checkout fieldset {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    /* The theme's `fieldset` rule sets font-size too — the last 13 leaking
       declarations the live measurement found after the rest of this layer
       was in place. */
    font-size: inherit;
}

.travellin-search-form form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.travellin-fields-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

/* Design Standard v1.0 section 3: Desktop shows the search fields on a
 * single horizontal row with the Search button at the end. The trip
 * type tab strip stays on its own row above them (every real OTA —
 * Booking.com, Expedia — does this too). Previously achieved via a CSS
 * Grid trick (tabs grid-column:1/-1) because flexbox couldn't give tabs
 * their own row while sharing a container with nowrap field siblings.
 * Now unnecessary — .travellin-fields-row is a separate element from
 * the tabs (template change, tabs are a sibling, not sharing this flex
 * context at all), so plain flexbox works safely here.
 *
 * Per-field flex-grow weights, not equal 1fr columns: matches the
 * reference's proportions, where the location field is visibly wider
 * than Dates/Travellers and the Search button stays compact rather than
 * stretching — equal-width columns (the previous approach) don't
 * reflect that each field's actual content needs a different amount of
 * room (a destination name vs. "2 travellers, 1 room" vs a date range). */
@media (min-width: 1025px) {
    .travellin-fields-row {
        flex-wrap: nowrap;
    }

    /* Dead since 3.5.0, removed after an archive audit confirmed they match
     * nothing: `.travellin-origin` / `.travellin-destination` are now children
     * of `.travellin-endpoints`, not of the row, and `.travellin-more-filters`
     * was moved out of the row entirely. The live weights are in the
     * "Google-Flights 1:1" block further down. */

    .travellin-fields-row > .travellin-dates {
        flex: 1.6 1 0;
        min-width: 0;
    }

    .travellin-fields-row > .travellin-travellers-field {
        flex: 1.3 1 0;
        min-width: 0;
    }

    .travellin-fields-row > .travellin-search-submit {
        flex: 0 0 auto;
        align-self: flex-start;
        margin-top: 20px;
    }
}

.travellin-search-submit {
    background: var(--travellin-primary);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 10px 24px;
    min-height: var(--travellin-input-height, 52px);
    cursor: pointer;
    transition: background-color 220ms ease, opacity 220ms ease;
    position: relative;
}

.travellin-search-submit:hover:not(:disabled) {
    background: #0552cc;
    background: color-mix(in srgb, var(--travellin-primary) 88%, #000);
}

.travellin-search-submit:active:not(:disabled) {
    background: #043e9e;
    background: color-mix(in srgb, var(--travellin-primary) 75%, #000);
    transform: translateY(1px);
}

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

.travellin-search-submit:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.travellin-search-submit.is-loading {
    color: transparent;
}

.travellin-search-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-spin 700ms linear infinite;
}

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

.travellin-result-cards {
    display: grid;
    grid-template-columns: repeat(var(--travellin-grid-columns), 1fr);
    gap: var(--travellin-grid-gap);
}

/* Skeleton loaders (Enterprise Audit Part 2, section 1: "Implement
 * skeleton loaders instead of empty content flashes") — deliberately
 * reuses .travellin-result-cards' own grid so the skeleton occupies
 * exactly the space the real cards will, and .travellin-card-media's
 * own 200px height (assets/css/travellin-app.css) so there's no layout
 * shift when real cards replace these. */
.travellin-skeleton-card {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    overflow: hidden;
}

.travellin-skeleton-media {
    height: 200px;
    background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: travellin-skeleton-shimmer 1.4s ease infinite;
}

.travellin-skeleton-line {
    height: 12px;
    margin: 12px 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: travellin-skeleton-shimmer 1.4s ease infinite;
}

.travellin-skeleton-line--title {
    width: 70%;
    height: 16px;
}

.travellin-skeleton-line--stars {
    width: 40%;
}

.travellin-skeleton-line--price {
    width: 35%;
    height: 20px;
    margin-bottom: 16px;
}

@keyframes travellin-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .travellin-skeleton-media,
    .travellin-skeleton-line {
        animation: none;
    }
}

.travellin-result-card {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    overflow: hidden;
    box-shadow: var(--travellin-shadow);
}

/* Compact single-row flight layout — matches Travelpayouts' own
   flight-price-list widget pattern (airline, route, dates, price on
   one line) rather than the full card format. */
.travellin-flight-row {
    display: grid;
    /* 8 columns: airline · route · dates · stops · badges · price · view · caret.
       The 8th (caret) column is what keeps the dropdown indicator on the same
       line, at the far right — without it the extra child wrapped to a new row.
       Columns are tightened so the whole row fits before wrapping. */
    grid-template-columns:
        minmax(90px, 0.9fr)
        minmax(110px, 1fr)
        minmax(105px, 0.95fr)
        minmax(104px, auto)
        auto
        minmax(80px, auto)
        auto
        40px;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    background: #fff;
    margin-bottom: 8px;
}

.travellin-flight-row-baggage {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--travellin-muted-text, #666);
    padding-top: 4px;
    border-top: 1px dashed var(--travellin-border);
}

.travellin-flight-row-airline {
    display: flex;
    align-items: center;
    gap: 8px;
}
.travellin-flight-row-airline-name {
    font-weight: 600;
    font-size: 14px;
}
.travellin-flight-row-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e8eaed;
    flex: none;
}
/* Placeholder for fares whose feed doesn't name the carrier — keeps the row
   aligned with the ones that do, without implying an airline we don't know. */
.travellin-flight-row-logo--none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f4;
    color: #9aa0a6;
}
.travellin-flight-row-airline-name--none {
    font-weight: 400;
    font-size: 12px;
    color: #70757a;
}

.travellin-flight-row-route {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
}

.travellin-flight-row-arrow {
    color: var(--travellin-muted-text, #888);
}

.travellin-flight-row-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
    color: var(--travellin-muted-text, #666);
}

.travellin-flight-row-times {
    font-weight: 600;
    color: var(--travellin-text, #1a1a1a);
    font-size: 14px;
    width: 100%;
}

.travellin-flight-row-stops {
    font-size: 12px;
    color: var(--travellin-muted-text, #666);
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* "Direct · 2h 45m" stays on one line instead of breaking mid-duration. */
    white-space: nowrap;
}

.travellin-flight-row-layover {
    font-size: 11px;
    color: var(--travellin-muted-text, #888);
}

/* ---- Flight accordion (Google-Flights-style expanded itinerary) ---- */
.travellin-flight-row-expand {
    /* Google Flights sizing: a large chevron inside a circular 40px target. */
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 24px;
    color: #5f6368;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    transition: transform 0.2s ease, background-color 0.15s ease;
    line-height: 1;
}
.travellin-flight-row-expand:hover { background: #f1f3f4 !important; }
.travellin-flight-row.is-expanded .travellin-flight-row-expand { transform: rotate(180deg); }
/* Never let the theme's button styling fill the caret blue on focus/active */
.travellin-flight-row-expand,
.travellin-flight-row-expand:hover,
.travellin-flight-row-expand:focus,
.travellin-flight-row-expand:active {
    background: transparent !important;
    box-shadow: none !important;
    color: #5f6368;
}
.travellin-flight-row-expand:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
/* Hide the airline cell when the supplier gives no name or logo (stub offers) */
.travellin-flight-row-airline:empty { display: none; }

.travellin-flight-detail {
    grid-column: 1 / -1;
    margin-top: 12px;
    border-top: 1px solid #e8eaed;
    padding-top: 4px;
}
.tl-flight-card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #202124;
}
.tl-flight-card * { box-sizing: border-box; }

/* Return itinerary inside the booking-options panel. Only appears once the
   round trip's departure_token has been resolved, since a search response
   carries the outbound leg and the round-trip price but no return detail. */
.tl-ret { border-top: 1px solid #eceef1; padding: 12px 4px 4px; margin-bottom: 8px; }
.tl-ret-title { font-size: 14px; font-weight: 600; color: #202124; margin-bottom: 10px; }
.tl-ret-seg { display: flex; gap: 12px; padding: 6px 0; }
.tl-ret-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 50%; background: #fff; flex: none; margin-top: 2px; }
.tl-ret-body { min-width: 0; }
.tl-ret-time { font-size: 14px; font-weight: 500; color: #202124; }
.tl-ret-route { font-size: 13px; color: #3c4043; }
.tl-ret-meta { font-size: 12px; color: #70757a; }
.tl-ret-warn { display: inline-block; font-size: 12px; color: #a50e0e; margin-right: 8px; }
.tl-ret-layover {
    font-size: 12px;
    color: #70757a;
    padding: 6px 0 6px 32px;
    border-top: 1px dashed #e0e0e0;
    border-bottom: 1px dashed #e0e0e0;
    margin: 4px 0;
}
.tl-ret-foot { font-size: 12px; color: #3c4043; padding-top: 8px; font-weight: 500; }

/* Google-Flights first row: Round trip ▾ | 1 ▾ | Economy ▾ — compact inline
   dropdowns above the location/date fields. */
.travellin-gfbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 0 0 4px; }
.travellin-gfbar[hidden] { display: none; }
.travellin-gfbar-item { position: relative; }
.travellin-gfbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    border-radius: 4px;
    color: #3c4043;
    font-size: 14px;
    line-height: 1.2;
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.travellin-gfbar-btn:hover { background: #f1f3f4; }
.travellin-gfbar-btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; }
.travellin-gfbar-caret { font-size: 10px; color: #5f6368; }
.travellin-gfbar-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 45;
    min-width: 180px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
}
.travellin-gfbar-menu[hidden] { display: none; }
.travellin-gfbar-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font-size: 14px;
    color: #3c4043;
    padding: 9px 16px;
    cursor: pointer;
}
.travellin-gfbar-menu button:hover { background: #f1f3f4; }
.travellin-gfbar-menu button[aria-checked="true"] { background: #e8f0fe; color: #174ea6; font-weight: 500; }

/* Google-Flights results heading: "Best departing flights" + the note that
   explains how the ranking is decided. */
.travellin-results-heading { margin: 4px 0 2px; font-size: 18px; font-weight: 500; color: #202124; }
.travellin-results-subheading { margin: 0 0 12px; font-size: 12px; color: #5f6368; }
.travellin-results-subheading button {
    background: none;
    border: 0;
    padding: 0;
    color: #1a73e8;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.travellin-results-rankinfo {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    color: #3c4043;
    line-height: 1.5;
}
.travellin-results-rankinfo[hidden] { display: none; }

/* Google-Flights filter chip bar: All filters · Stops · Airlines · Price ·
   Emissions · Duration · Deals. Each chip opens a small panel. */
.travellin-gf-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 12px; }
.travellin-gf-allfilters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    color: #1a73e8;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: 16px;
    cursor: pointer;
}
.travellin-gf-allfilters:hover { background: #f1f8fe; }
.travellin-gf-chip { position: relative; }
.travellin-gf-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 18px;
    color: #3c4043;
    font-size: 14px;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.travellin-gf-chip-btn:hover { background: #f1f3f4; }
.travellin-gf-chip.is-active .travellin-gf-chip-btn {
    background: #e8f0fe;
    border-color: #1a73e8;
    color: #174ea6;
    font-weight: 500;
}
.travellin-gf-caret { font-size: 10px; color: #5f6368; }
.travellin-gf-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
}
.travellin-gf-chip.is-open .travellin-gf-panel { display: block; }
.travellin-gf-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3c4043; padding: 5px 0; cursor: pointer; }
.travellin-gf-out { font-size: 13px; color: #202124; font-weight: 500; padding: 2px 0 8px; }
.travellin-gf-panel input[type="range"] { width: 100%; }
@media (max-width: 700px) {
    .travellin-gf-panel { left: auto; right: 0; min-width: 200px; }
}

/* Google-Flights search bar: circular swap control sitting between the two
   location fields, and the day-step arrows at the date field's right edge. */
.travellin-swap {
    align-self: end;
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
    border: 1px solid #dadce0;
    border-radius: 50%;
    background: #fff;
    color: #5f6368;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.travellin-swap:hover { background: #f1f3f4; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.travellin-swap:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

.travellin-date-step { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; }
.travellin-date-step-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #5f6368;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.travellin-date-step-btn:hover { background: #f1f3f4; }
.travellin-date-step-btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; }

/* The mobile swap rule that used to live here was superseded in 3.5.0: the
 * control is now absolutely positioned on the divider inside
 * `.travellin-endpoints`, so `align-self` and `margin: 0 auto` no longer mean
 * anything, and its `transform` was already being overridden by the more
 * specific `.travellin-endpoints > .travellin-swap` rule in the same media
 * query further down. Removed after an archive audit. */

/* =====================================================================
   Google-Flights 1:1 search bar — Phase 1 (defect repair) + Phase 2
   (structure). Audited against the live site on 2026-07-28; see
   docs/AUDIT-search-bar-vs-google-flights.md for the measurements.
   ===================================================================== */

/* --- Phase 1.1: neutralise the host theme's global button styling ------
 *
 * Astra ships `button { color: #fff; padding: 15px 30px; }` from both
 * main.min.css and an inline Customizer rule. None of our icon/chip
 * buttons declare colour or padding, so they inherited both. Measured
 * consequences on the live site: the swap control rendered 62x36 with its
 * SVG squeezed to width 0 (a hollow ellipse with no arrow), the day-step
 * arrows spread to 122px, and every inactive date-flexibility chip was
 * white text on a white background — invisible.
 *
 * Scoped to our own containers and excluding the submit button, so no
 * theme button anywhere else on the site is affected and our one
 * genuinely white-on-blue button keeps its colour. */
/* Specificity is load-bearing here, so it is stated explicitly:
 *
 *   Astra's rule            `button`                        = (0,0,1)
 *   this reset              `.travellin-search-form button` = (0,1,1)  wins
 *   our component rules     `.travellin-search-form .x`     = (0,2,0)  wins
 *
 * A first attempt used `button:not(.travellin-search-submit)`, which is
 * (0,2,1) — that beat our own single-class component rules too, and the live
 * test caught the result: the active "Exact" chip and both "Done" buttons went
 * dark-on-blue with their padding collapsed to zero. Hence the deliberately
 * modest (0,1,1) here, with every component override scoped to (0,2,0). */
/* The button reset that used to sit here has moved into the THEME
 * NORMALIZATION LAYER near the top of this file, which now also covers
 * inputs, selects, labels, legends and fieldsets — the audit showed the theme
 * leaking into all of them, not only buttons. Everything below is the
 * component styling that sits ON TOP of that layer at (0,2,0). */
.travellin-search-form .travellin-flex-btn,
.travellin-search-form .travellin-date-step-btn,
.travellin-search-form .travellin-calendar-nav,
.travellin-search-form .travellin-calendar-day,
.travellin-search-form .travellin-travellers-toggle,
.travellin-search-form .travellin-dates-toggle,
.travellin-search-form .travellin-swap {
    color: #3c4043;
}
.travellin-search-form .travellin-flex-btn { padding: 6px 12px; }
.travellin-search-form .travellin-flex-btn.is-active { color: #fff; }
.travellin-search-form .travellin-calendar-day { padding: 0; }
.travellin-search-form .travellin-calendar-done,
.travellin-search-form .travellin-travellers-done { padding: 8px 16px; color: #fff; }
.travellin-search-form .travellin-search-submit { padding: 0 24px; color: #fff; }
.travellin-search-form .travellin-stepper button { padding: 0; color: #3c4043; }
.travellin-search-form .travellin-gfbar-btn { padding: 8px 10px; color: #3c4043; }
.travellin-search-form .travellin-gfbar-menu button { padding: 9px 16px; color: #3c4043; }
.travellin-search-form .travellin-gfbar-menu button[aria-checked="true"] { color: #174ea6; }
/* The trip-mode and passenger chips carry an icon and the cabin chip does not,
 * which left the third chip sitting 3px lower than the other two (measured).
 * Centring inside each item rather than relying on the row's own alignment
 * makes the baseline independent of whether a chip has an icon. */
.travellin-gfbar-item { display: flex; align-items: center; }

/* --- Phase 2.1: From + To share one bordered container ---------------
 * Google binds the two location fields into a single box split by a
 * vertical divider, with the swap circle centred on that divider. The
 * wrapper supplies the border and the positioning context; the fields
 * themselves lose only their own border, never their identity. */
.travellin-endpoints {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 2.4 1 0;
    min-width: 0;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
}
.travellin-endpoints > .travellin-field { flex: 1 1 0; min-width: 0; }
.travellin-endpoints > .travellin-destination { border-left: 1px solid #dadce0; }
.travellin-endpoints .travellin-input-wrap { border: 0; background: transparent; }
/* Specificity note: the base rule is
 * `.travellin-search-form .travellin-field input[type="text"]` (0,3,1), so a
 * plain `.travellin-endpoints .travellin-autocomplete-input` (0,2,0) loses and
 * the inner fields keep their own 1.5px/16px border — measured on the live
 * page. Matched here deliberately rather than resorting to !important. */
.travellin-search-form .travellin-endpoints .travellin-field input[type="text"].travellin-autocomplete-input {
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    height: 56px;
}
/* The swap sits ON the divider, so it must escape the normal flow.
 *
 * Anchored to the 56px input LINE (top: 28px), never to the container's own
 * height. `top: 50%` was wrong and the live test proved it: picking a city
 * that has several airports reveals the "Also search the other Paris airports"
 * checkbox, which grows the origin field 56px -> 106px and the container to
 * 108px. The swap then centred on 108px and landed 25px BELOW the text line —
 * detached from the two fields it belongs between, which is exactly the
 * "swap button between the fields is broken" report. */
.travellin-endpoints > .travellin-swap {
    position: absolute;
    left: 50%;
    top: 28px;
    transform: translate(-50%, -50%);
    z-index: 3;
    align-self: auto;
    margin: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}

/* The multi-airport checkbox is a secondary option; it must not resize the
 * search bar. As an overlay under its own field it keeps the bar at 58px, so
 * Dates / Travellers / Search never move either (they were being pushed 25px
 * down — measured). */
.travellin-endpoints > .travellin-field { position: relative; }
.travellin-endpoints .travellin-airport-group-toggle {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    line-height: 1.35;
    color: #3c4043;
}
.travellin-endpoints .travellin-airport-group-toggle[hidden] { display: none; }
.travellin-endpoints > .travellin-swap svg { flex: 0 0 auto; }
/* `hidden` must actually hide it — the element is absolutely positioned and
   display:flex, both of which override the user-agent [hidden] rule. */
.travellin-endpoints > .travellin-swap[hidden] { display: none; }

/* With no origin field the remaining destination should fill the container
   rather than sit in half of it. */
.travellin-endpoints > .travellin-field[hidden] { display: none; }
/* Keep the input text — and the clear "×" — clear of the swap circle, which
 * straddles the divider and would otherwise sit on top of both. The swap is
 * 36px centred on the divider, so it reaches 18px into each side.
 *
 * The padding goes on the FIELD, not on .travellin-input-wrap: the field icon
 * is `position: absolute` inside the wrap and the input carries a matching
 * `padding-left: 58px` to clear it. Padding the wrap moves the input but not
 * that 58px, which opened a 68px gap between the pin and the placeholder —
 * measured on the live page. Padding the field moves icon and input together
 * and the relationship survives. */
.travellin-endpoints > .travellin-origin { padding-right: 22px; }
.travellin-endpoints > .travellin-destination { padding-left: 22px; }

/* --- Phase 2.2: no field labels, Google-style -------------------------
 * The labels stay in the DOM (they carry `for=`, `data-role` and the
 * trip-type-driven text that assistive technology and our own JS rely
 * on) but are removed visually. search-app.js mirrors each label into
 * its input's placeholder so the field name is never lost on screen. */
.travellin-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Phase 2.3: one 56px field line ----------------------------------
 * `align-items: flex-start`, not `center`: if any field ever grows taller
 * than the line (an inline validation message, an autocomplete hint), centring
 * would push every sibling down to re-centre against it. Top alignment keeps
 * the bar visually stable no matter what one field does. */
.travellin-fields-row { align-items: flex-start; gap: 8px; }

/* An element carrying the `hidden` attribute must stay hidden. Our own
 * `.travellin-field-clear { display: flex }` is an author rule and so beats
 * the user-agent `[hidden] { display: none }` regardless of specificity —
 * which is why an empty From/To field still showed a stray clear "x". */
.travellin-search-form [hidden] { display: none; }
.travellin-field > .travellin-input-wrap,
.travellin-dates-toggle,
.travellin-travellers-toggle {
    height: 56px;
}
.travellin-dates .travellin-input-wrap {
    position: relative;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
}
.travellin-dates-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 76px 0 14px;
    background: none;
    border: 0;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}
/* Day-step arrows INSIDE the date box at its right edge, which is where
 * Google puts them — they used to sit under the field, which is what made
 * the row 192px tall and knocked the swap control out of line. */
.travellin-dates .travellin-date-step {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}
.travellin-autocomplete-input,
.travellin-dates-summary,
.travellin-travellers-summary {
    font-size: 16px;
}
.travellin-autocomplete-input { border-radius: 8px; }
.travellin-endpoints,
.travellin-dates .travellin-input-wrap,
.travellin-travellers-field .travellin-travellers-toggle {
    border-color: #dadce0;
}

/* Travellers field relocated into the row-1 passengers chip (flight-only
   searches). The visible toggle collapses to nothing — the chip button IS the
   toggle — while the popover and every hidden input stay live. */
.travellin-travellers-field.is-in-gfbar {
    position: static;
    flex: none;
    width: 0;
    min-width: 0;
    margin: 0;
}
.travellin-travellers-field.is-in-gfbar > .travellin-travellers-toggle { display: none; }
.travellin-travellers-field.is-in-gfbar > .travellin-travellers-popover {
    left: 0;
    top: calc(100% + 6px);
}

/* Date flexibility now lives inside the calendar popover. */
.travellin-calendar-popover .travellin-flex-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 0;
}
.travellin-calendar-popover .travellin-flex-month {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 0;
    font-size: 13px;
    color: #5f6368;
}

/* --- Phase 2.4: filters on their own line ---------------------------- */
.travellin-more-filters { margin-top: 4px; }
.travellin-more-filters > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #1a73e8;
    font-size: 14px;
    font-weight: 500;
}

@media (min-width: 1025px) {
    /* Supersedes the earlier per-field weights: origin/destination are no
       longer direct children of the row, they live inside .travellin-endpoints. */
    .travellin-fields-row > .travellin-dates { flex: 1.4 1 0; min-width: 0; }
    .travellin-fields-row > .travellin-travellers-field { flex: 1.1 1 0; min-width: 0; }
    .travellin-fields-row > .travellin-search-submit {
        align-self: center;
        margin-top: 0;
    }
}

@media (max-width: 1024px) {
    .travellin-endpoints { flex: 1 1 100%; }
}
@media (max-width: 782px) {
    /* Stacked: the divider becomes horizontal and the swap rotates onto it. */
    .travellin-endpoints { flex-direction: column; }
    .travellin-endpoints > .travellin-destination { border-left: 0; border-top: 1px solid #dadce0; }
    .travellin-endpoints > .travellin-swap { transform: translate(-50%, -50%) rotate(90deg); left: auto; right: 12px; }
    .travellin-endpoints > .travellin-origin .travellin-input-wrap,
    .travellin-endpoints > .travellin-destination .travellin-input-wrap { padding-right: 56px; padding-left: 14px; }
}

/* Google-Flights expanded card header:
   [logo] Departure · Tue, Mar 03 ....... CO2e / ±% · [Select flight] · price */
.tl-gf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 4px 16px;
    flex-wrap: wrap;
}
.tl-gf-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tl-gf-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: contain; background: #fff; flex: none; }
.tl-gf-date { font-size: 16px; font-weight: 600; color: #202124; }
.tl-gf-head-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.tl-gf-co2 { display: flex; flex-direction: column; align-items: flex-end; }
.tl-gf-co2-val { font-size: 14px; color: #3c4043; }
.tl-gf-co2-pct { font-size: 12px; color: #70757a; }
.tl-gf-co2-pct--low { color: #137333; }
.tl-gf-co2-pct--high { color: #a50e0e; }
.tl-gf-select {
    background: #fff;
    border: 1px solid #dadce0;
    color: #1a73e8;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tl-gf-select:hover { background: #f1f8fe; border-color: #1a73e8; }
.tl-gf-price { text-align: right; display: flex; flex-direction: column; }
.tl-gf-price-amount { font-size: 18px; font-weight: 700; color: #202124; }
.tl-gf-price-sub { font-size: 12px; color: #70757a; }

/* Reliability warning, printed under the carrier line like Google does. */
.tl-gf-delayed { font-size: 12px; color: #a50e0e; margin-top: 4px; margin-left: 22px; }

/* Fare policy line at the foot of the itinerary (not chips on top). */
.tl-gf-fare { font-size: 12px; color: #70757a; padding: 10px 4px 4px; }

@media (max-width: 700px) {
    .tl-gf-head { gap: 10px; }
    .tl-gf-head-right { width: 100%; justify-content: space-between; gap: 12px; }
}

/* Slim head: CO2 (two-line) + price, pushed right */
.tl-detail-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    padding: 16px 4px 20px;
}
.tl-co2-summary { display: flex; flex-direction: column; align-items: flex-end; }
.tl-co2-val { font-size: 15px; font-weight: 500; color: #3c4043; }
.tl-co2-badge { font-size: 12px; color: #70757a; }
.tl-price-block { text-align: right; }
.tl-price-amount { font-size: 18px; font-weight: 700; color: #202124; }
.tl-price-sub { font-size: 12px; color: #70757a; }

/* Phase 1: price insight banner + fare pills + reliability flags */
.tl-price-insight {
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 4px 0 12px;
    background: #f1f3f4;
    color: #3c4043;
}
.tl-price-insight--low { background: #e6f4ea; color: #137333; }
.tl-price-insight--high { background: #fce8e6; color: #a50e0e; }
.tl-fare-ext { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px 4px; }
.tl-fare-pill {
    font-size: 12px;
    color: #3c4043;
    background: #f1f3f4;
    border-radius: 12px;
    padding: 3px 10px;
}
.tl-amenity-warn { color: #a50e0e; }
.tl-amenity-warn .tl-amenity-icon { color: #a50e0e; }

/* Destination hero (SerpApi airports imagery) */
.travellin-dest-hero {
    grid-column: 1 / -1;
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.travellin-dest-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.travellin-dest-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    color: #fff;
}
.travellin-dest-hero-title { font-size: 22px; font-weight: 600; line-height: 1.2; }
.travellin-dest-hero-sub { font-size: 14px; opacity: 0.9; margin-top: 2px; }
@media (max-width: 700px) { .travellin-dest-hero { height: 150px; } }

/* Booking options (lazy SerpApi follow-up) */
.tl-book { padding: 12px 4px 4px; border-top: 1px solid #eceef1; margin-top: 12px; }
.tl-book-btn {
    background: #fff; border: 1px solid #dadce0; color: #1a73e8;
    font-weight: 500; font-size: 14px; padding: 8px 18px; border-radius: 18px; cursor: pointer;
}
.tl-book-btn:hover { background: #f1f8fe; border-color: #1a73e8; }
.tl-book-btn:disabled { opacity: 0.6; cursor: default; }
.tl-book-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.tl-book-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1px solid #e8eaed; border-radius: 10px;
}
.tl-book-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tl-book-logo { border-radius: 4px; object-fit: contain; background: #fff; flex: none; }
.tl-book-seller { font-size: 14px; font-weight: 500; color: #202124; }
.tl-book-sep { font-size: 11px; color: #70757a; font-weight: 400; }
.tl-book-policy { font-size: 12px; color: #70757a; margin-top: 2px; }
.tl-book-bag { font-size: 12px; color: #3c4043; margin-top: 2px; }
.tl-book-go {
    background: #1a73e8; color: #fff; border: 0; border-radius: 18px;
    font-weight: 500; font-size: 13px; padding: 8px 16px; cursor: pointer; white-space: nowrap;
}
.tl-book-go:hover { background: #1666d0; }
.tl-book-form { margin: 0; }
.tl-book-price { font-size: 15px; font-weight: 700; color: #202124; white-space: nowrap; }
.tl-book-phone { font-size: 12px; color: #3c4043; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.tl-book-empty { font-size: 13px; color: #70757a; padding: 4px 0; }

.tl-price-history { margin: 4px 0 12px; }
.tl-ph-title { font-size: 12px; color: #70757a; margin-bottom: 4px; }
.tl-ph-svg { width: 100%; height: 46px; display: block; }
.tl-ph-range { display: flex; justify-content: space-between; font-size: 11px; color: #70757a; margin-top: 2px; }

.travellin-flight-row-flags { display: inline-flex; gap: 6px; margin-left: 6px; }
.travellin-flight-row-flag {
    font-size: 11px;
    color: #5f6368;
    background: #f1f3f4;
    border-radius: 10px;
    padding: 1px 8px;
}
.travellin-flight-row-flag--warn { color: #a50e0e; background: #fce8e6; }

/* Body + legs */
.tl-flight-body { display: flex; flex-direction: column; gap: 24px; padding-bottom: 8px; }
.tl-flight-leg { display: grid; grid-template-columns: 1fr 280px; gap: 32px; padding-left: 8px; }

.tl-timeline { position: relative; display: flex; flex-direction: column; }
.tl-time-node { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.tl-node-circle { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #5f6368; background: #fff; flex: none; }
.tl-node-info { font-size: 15px; font-weight: 500; color: #202124; }
.tl-node-info .tl-time { font-weight: 700; }
.tl-node-info .tl-dot { margin: 0 4px; color: #70757a; }
.tl-timeline-line { margin-left: 4px; border-left: 2px dotted #bdc1c6; padding: 12px 0 12px 18px; margin-top: -2px; margin-bottom: -2px; }
.tl-duration-txt { font-size: 13px; color: #70757a; }
.tl-leg-details { font-size: 13px; color: #70757a; margin-top: 16px; margin-left: 22px; }

/* Amenities column */
.tl-amenities-col { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: #3c4043; justify-content: center; }
.tl-amenity-item { display: flex; align-items: center; gap: 8px; }
.tl-amenity-item .tl-amenity-icon { width: 16px; height: 16px; color: #5f6368; flex: none; }

/* Summary panel (affiliate stub offers without per-leg itinerary) */
.tl-summary { gap: 14px; padding: 4px 4px 12px; }
.tl-sum-leg { display: flex; flex-direction: column; gap: 2px; }
.tl-sum-route { font-size: 15px; font-weight: 600; color: #202124; }
.tl-sum-when { font-size: 13px; color: #3c4043; }
.tl-sum-meta { font-size: 12px; color: #70757a; }
.tl-sum-price { font-size: 16px; font-weight: 700; color: #202124; }
.tl-sum-price span { font-size: 12px; font-weight: 400; color: #70757a; }
.tl-sum-note { font-size: 12px; color: #70757a; border-top: 1px solid #eceef1; padding-top: 10px; }
.tl-sum-carrier { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #202124; }
.tl-sum-logo { border-radius: 4px; object-fit: contain; background: #fff; flex: none; }

/* Layover divider */
.tl-layover-row { border-top: 1px solid #e8eaed; border-bottom: 1px solid #e8eaed; padding: 14px 22px; font-size: 14px; color: #202124; font-weight: 500; margin: 8px 0; }

/* Real airline logo in the compact row */
.tl-logo-img { border-radius: 50%; object-fit: contain; background: #fff; }

@media (max-width: 768px) {
    .tl-flight-leg { grid-template-columns: 1fr; gap: 20px; }
    .tl-amenities-col { border-top: 1px solid #f1f3f4; padding-top: 12px; }
}

.travellin-flight-row-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.travellin-flight-row-price {
    text-align: right;
    font-size: 16px;
    white-space: nowrap;
}

.travellin-flight-row-price strong {
    font-size: 18px;
}

.travellin-flight-row-currency {
    font-size: 12px;
    color: var(--travellin-muted-text, #666);
}

.travellin-flight-row-view {
    background: var(--travellin-primary, #00A991);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    white-space: nowrap;
}

.travellin-flight-row-view:hover {
    opacity: 0.9;
}

@media (max-width: 782px) {
    .travellin-flight-row {
        grid-template-columns: 1fr 1fr 40px;
        grid-template-areas:
            "airline price price"
            "route route caret"
            "dates stops stops"
            "badges view view";
    }
    .travellin-flight-row-airline { grid-area: airline; }
    .travellin-flight-row-price { grid-area: price; }
    .travellin-flight-row-route { grid-area: route; }
    .travellin-flight-row-dates { grid-area: dates; }
    .travellin-flight-row-stops { grid-area: stops; }
    .travellin-flight-row-badges { grid-area: badges; }
    .travellin-flight-row-view { grid-area: view; }
    /* Keep the dropdown caret on the row (right edge) instead of wrapping. */
    .travellin-flight-row-expand { grid-area: caret; justify-self: end; }
    .travellin-flight-detail { grid-column: 1 / -1; }
}

.travellin-result-card .travellin-card-body {
    padding: 12px 16px;
}

.travellin-price-box {
    border: 1px solid var(--travellin-border);
    border-radius: var(--travellin-radius);
    padding: 16px;
}

.travellin-price-box--sticky {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.travellin-price-box-total {
    font-size: 24px;
    font-weight: 700;
    color: var(--travellin-secondary);
}

.travellin-select-package-sticky {
    background: var(--travellin-accent-dark);
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 12px 20px;
    width: 100%;
    cursor: pointer;
}

.travellin-booking-progress ol {
    display: flex;
    list-style: none;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.travellin-booking-progress--vertical ol {
    flex-direction: column;
}

.travellin-booking-progress li.is-current {
    font-weight: 700;
    color: var(--travellin-primary);
}

.travellin-editor-notice {
    margin: 8px 0;
}

@media (max-width: 768px) {
    .travellin-search-form form {
        flex-direction: column;
        align-items: stretch;
    }

    .travellin-search-submit {
        width: 100%;
    }

    .travellin-result-cards {
        grid-template-columns: 1fr;
    }

    .travellin-price-box--sticky {
        position: static;
    }
}

/* Flight Booking — Tab 2 success screen */
.travellin-flight-booking-success {
    text-align: center;
    padding: 40px 20px;
    border: 1px solid #86efac;
    background: #f0fdf4;
    border-radius: var(--travellin-radius);
    margin-top: 20px;
}

.travellin-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 28px;
    margin-bottom: 12px;
}

.travellin-flight-booking-continue {
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: var(--travellin-radius);
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}

.travellin-flight-booking-continue:hover {
    opacity: 0.9;
}

.travellin-flight-booking-manual-fallback {
    text-align: center;
    margin-top: 16px;
}

.travellin-link-button {
    background: none;
    border: none;
    color: var(--travellin-muted-text, #666);
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
}

.travellin-linked-flight {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--travellin-radius);
    padding: 10px 14px;
    margin-top: 8px;
}