/**
 * TRAVELLIN - SINGLE FIELD STANDARD AND CONTAINER RESET
 * =====================================================
 *
 * WHY THIS FILE EXISTS AS A SEPARATE STYLESHEET
 * ---------------------------------------------
 * Field geometry was being set in six different stylesheets, and those six
 * load in three different orders depending on which page is rendered (see
 * src/Assets/FrontendAssets.php). Two of the rules are exact specificity
 * ties that resolve purely by source order:
 *
 *     .travellin-filter-group select   travellin-app.css   (0,1,1)
 *     .travellin-filter-group select   travellin-hotel.css (0,1,1)  <- wins
 *
 * Editing the six files individually would mean six coordinated edits whose
 * outcome depends on load order per page - the exact class of bug that cost
 * this project a release when .elementor img beat .travellin-deal-media img
 * on a tie. One stylesheet, enqueued last with an explicit dependency chain,
 * gives a deterministic result on every page.
 *
 * Rollback is one line: remove the wp_enqueue_style('travellin-fields', ...)
 * call. Not a single pre-existing rule is modified, so removing this file
 * returns the site byte-for-byte to its previous appearance.
 *
 *
 * THE REFERENCE - MEASURED, NOT ASSUMED
 * -------------------------------------
 * Taken from the live "Where from / Where to" control on
 * https://travellin.info/search/ at viewport 1470, via getComputedStyle:
 *
 *     .travellin-endpoints          (the visible frame)
 *         border        1px solid rgb(218, 220, 224)   #dadce0
 *         border-radius 8px
 *         background    rgb(255, 255, 255)
 *         padding       0
 *         box-sizing    border-box
 *         height        58px   (56 content + 2 * 1px border)
 *
 *     .travellin-autocomplete-input (the control inside it)
 *         height        56px
 *         border        0
 *         border-radius 0
 *         background    transparent
 *         padding       8px 32px 8px 58px   (58 left = leading icon)
 *         font-size     18px
 *         font-weight   600
 *         color         rgb(15, 23, 42)     #0f172a
 *         line-height   24px
 *
 *     ::placeholder     rgb(100, 116, 139)  #64748b, 18px, weight 400
 *
 *
 * ARCHITECTURAL DECISION - WHERE THE FRAME IS PAINTED
 * ---------------------------------------------------
 * The reference control has `border: 0; border-radius: 0` because the frame
 * the customer sees belongs to the group wrapper around the pair, not to the
 * input. Copying `border: 0` literally onto a standalone control - a checkout
 * name field, a sort dropdown - would delete its only visible boundary and
 * leave an invisible box. That would be a faithful copy of the CSS and a
 * broken copy of the design.
 *
 * So the rule is: reproduce the reference BOX. Where a control already sits
 * inside a group wrapper that paints the frame (the endpoints pair), the
 * wrapper keeps painting it and the control stays borderless - untouched.
 * Everywhere else the control paints the identical frame itself. On screen
 * the two are indistinguishable: same 1px #dadce0, same 8px radius, same
 * 56px, same 18px/600. Only the DOM level that owns the paint differs.
 *
 *
 * SCOPE OF THE PADDING/MARGIN RESET
 * ---------------------------------
 * Requested: zero on the template wrappers and on the sections inside them;
 * cards and modals keep their interior spacing.
 *
 * Measured on the live checkout, exactly 9 elements carry spacing, and they
 * separate cleanly into two groups:
 *
 *   paints nothing (pure grouping) -> reset
 *     .travellin-checkout-steps      padding 0 0 0 20px; margin 16px 0
 *     .travellin-price-lock          margin 8px 0 20.8px
 *     .travellin-checkout-locking    margin 0 0 25.6px
 *
 *   paints a surface (card / alert / button) -> untouched
 *     .travellin-checkout-package-summary  border 1px, padding 8px
 *     .travellin-checkout-aside            bg #fff, border 1px, padding 20px
 *     .travellin-checkout-error            tinted bg, padding 10px
 *     .travellin-traveller-fieldset        border 1px, padding 14px
 *     .travellin-add-traveller             bg #fff, border 1px
 *     .travellin-checkout-continue         the submit button, padding 10px 20px
 *
 * CSS cannot select "has no background", so the reset list below is
 * enumerated by hand rather than applied by wildcard. An explicit list can be
 * read and audited; a wildcard would have flattened the submit button.
 */

:root {
    /* The reference box, as one set of tokens. Any future page picks these
     * up instead of inventing a seventh geometry. */
    --tvl-field-height: 56px;
    --tvl-field-border-width: 1px;
    --tvl-field-border-color: #dadce0;
    --tvl-field-radius: 8px;
    --tvl-field-bg: #fff;
    --tvl-field-pad-y: 8px;
    --tvl-field-pad-x: 12px;
    --tvl-field-font-size: 18px;
    --tvl-field-font-weight: 600;
    --tvl-field-color: #0f172a;
    --tvl-field-placeholder: #64748b;

    /* The search form wrapper reads this with a 24px fallback
     * (travellin-frontend.css). Defining it here is the extension point that
     * file already documented, so no rule needs editing. */
    --travellin-form-pad: 0px;
    --travellin-template-pad: 0px;

    /* The panel standard — see section 6. Taken from the flight card, which
     * was measured as the most complete of the three surfaces. */
    --tvl-panel-pad: 20px;
    --tvl-panel-radius: 12px;
    --tvl-panel-border-color: #dfe1e6;
    --tvl-panel-bg: #fff;

    /* Mobile side gutter for panels — see section 7. */
    --tvl-panel-pad-x-mobile: 10px;

    /* Action buttons — see section 24. One place, because a border that
     * thickens on hover has to agree with the radius it thickens inside. */
    --tvl-btn-border-width: 1px;
    --tvl-btn-border-width-hover: 2px;
    --tvl-btn-radius: 10px;

    /* The notice band. Both notices read it, so a change to the tint is one
     * edit rather than two that will eventually disagree. */
    --tvl-notice-bg: #eaf1fd;
    --tvl-notice-border: #c9dcf7;

    /* The trip-type tab strip reads all three of these (travellin-app.css
     * lines 113/126/139), each with its own fallback. Setting them here is
     * the extension point that file documents for exactly this purpose, so
     * the strip and its dividers join the standard without a single new
     * rule being written against them — and the Elementor "Tabs Style"
     * controls keep working, because they set the same variables at a
     * narrower scope and still win. */
    --travellin-tab-border-width: var(--tvl-field-border-width);
    --travellin-tab-border-color: var(--tvl-field-border-color);
    --travellin-tab-border-radius: var(--tvl-field-radius);
}

/* -- 1. THE FIELD ----------------------------------------------------
 *
 * Scoped under each Travellin root. No bare element selector appears here:
 * this stylesheet must never reach a form the theme or another plugin owns.
 */
.travellin-search-form input[type="text"],
.travellin-search-form input[type="email"],
.travellin-search-form input[type="tel"],
.travellin-search-form input[type="date"],
.travellin-search-form input[type="number"],
.travellin-search-form input[type="search"],
.travellin-search-form select,
.travellin-search-form textarea,
.travellin-results input[type="text"],
.travellin-results input[type="email"],
.travellin-results input[type="tel"],
.travellin-results input[type="date"],
.travellin-results input[type="number"],
.travellin-results input[type="search"],
.travellin-results select,
.travellin-results textarea,
.travellin-package-details input[type="text"],
.travellin-package-details input[type="email"],
.travellin-package-details input[type="tel"],
.travellin-package-details input[type="date"],
.travellin-package-details input[type="number"],
.travellin-package-details select,
.travellin-package-details textarea,
.travellin-checkout input[type="text"],
.travellin-checkout input[type="email"],
.travellin-checkout input[type="tel"],
.travellin-checkout input[type="date"],
.travellin-checkout input[type="number"],
.travellin-checkout select,
.travellin-checkout textarea,
.travellin-flight-booking input[type="text"],
.travellin-flight-booking input[type="email"],
.travellin-flight-booking input[type="tel"],
.travellin-flight-booking input[type="date"],
.travellin-flight-booking input[type="number"],
.travellin-flight-booking select,
.travellin-flight-booking textarea,
.travellin-flight-review input[type="text"],
.travellin-flight-review input[type="email"],
.travellin-flight-review input[type="tel"],
.travellin-flight-review input[type="date"],
.travellin-flight-review select,
.travellin-flight-review textarea,
.travellin-flightsel input[type="text"],
.travellin-flightsel input[type="date"],
.travellin-flightsel select,
.travellin-customer-dashboard input[type="text"],
.travellin-customer-dashboard input[type="email"],
.travellin-customer-dashboard input[type="tel"],
.travellin-customer-dashboard input[type="date"],
.travellin-customer-dashboard select,
.travellin-customer-dashboard textarea,
.travellin-booking-confirmation input[type="text"],
.travellin-booking-confirmation input[type="email"],
.travellin-booking-confirmation select,
.travellin-booking-confirmation textarea {
    box-sizing: border-box;
    min-height: var(--tvl-field-height);
    padding: var(--tvl-field-pad-y) var(--tvl-field-pad-x);
    border: var(--tvl-field-border-width) solid var(--tvl-field-border-color);
    border-radius: var(--tvl-field-radius);
    background-color: var(--tvl-field-bg);
    font-family: inherit;
    font-size: var(--tvl-field-font-size);
    font-weight: var(--tvl-field-font-weight);
    color: var(--tvl-field-color);
    line-height: 24px;
}

/* A textarea is the one control the reference cannot describe: it is
 * multi-line by definition, so a fixed 56px would clip the second line. It
 * takes every other token and grows downward from the same floor. */
.travellin-search-form textarea,
.travellin-results textarea,
.travellin-package-details textarea,
.travellin-checkout textarea,
.travellin-flight-booking textarea,
.travellin-flight-review textarea,
.travellin-customer-dashboard textarea,
.travellin-booking-confirmation textarea {
    height: auto;
    line-height: 1.5;
    resize: vertical;
}

.travellin-search-form input::placeholder,
.travellin-search-form textarea::placeholder,
.travellin-results input::placeholder,
.travellin-package-details input::placeholder,
.travellin-checkout input::placeholder,
.travellin-checkout textarea::placeholder,
.travellin-flight-booking input::placeholder,
.travellin-flight-review input::placeholder,
.travellin-customer-dashboard input::placeholder,
.travellin-booking-confirmation input::placeholder {
    color: var(--tvl-field-placeholder);
    font-weight: 400;
}

/* -- 1b. SPECIFICITY INSIDE THE SEARCH FORM --------------------------
 *
 * MEASURED, not assumed. With section 1 applied live, the date and select
 * controls in the search form took the new radius (16px -> 8px) and the new
 * min-height, but kept border-width: 1.5px. Adding an otherwise identical
 * test rule at (0,3,1) changed it to 1px; at (0,2,1) it did not. The rival
 * is travellin-app.css:
 *
 *     .travellin-search-form .travellin-field input[type="date"]   (0,3,1)
 *         border-width: 1.5px
 *
 * and section 1 above is only (0,2,1), so it loses on that one property
 * while winning on every other. A field that is 1px on the reference box and
 * 1.5px two controls to the right is exactly the inconsistency this file
 * exists to remove, so the search form gets a matching (0,3,1) selector.
 * It ties with the rival and wins on source order, because this stylesheet
 * is enqueued last — see enqueueFieldStandard() for why that ordering is
 * enforced rather than hoped for.
 *
 * No !important anywhere: a tie plus a guaranteed load order is enough, and
 * !important would take the property out of reach of the Elementor widget
 * controls that are supposed to be able to override it per instance.
 */
.travellin-search-form .travellin-field input[type="text"],
.travellin-search-form .travellin-field input[type="email"],
.travellin-search-form .travellin-field input[type="tel"],
.travellin-search-form .travellin-field input[type="date"],
.travellin-search-form .travellin-field input[type="number"],
.travellin-search-form .travellin-field input[type="search"],
.travellin-search-form .travellin-field select,
.travellin-search-form .travellin-field textarea,
.travellin-search-form .travellin-travellers-toggle,
.travellin-search-form .travellin-dates-toggle {
    border-width: var(--tvl-field-border-width);
    border-style: solid;
    border-color: var(--tvl-field-border-color);
    border-radius: var(--tvl-field-radius);
    min-height: var(--tvl-field-height);
}

/* -- 2. THE ONE EXCEPTION, AND WHY -----------------------------------
 *
 * The origin/destination pair is the reference itself. Its frame is on
 * .travellin-endpoints and its inputs are deliberately borderless so the two
 * read as one control with a divider - which is what the screenshot shows.
 * Section 1 above would have given each input its own frame and split that
 * single control into two boxes, changing the very design being copied.
 *
 * Specificity: (0,3,1) here against (0,1,1) in section 1, so it wins
 * regardless of source order.
 */
.travellin-search-form .travellin-endpoints .travellin-autocomplete-input[type="text"] {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    min-height: var(--tvl-field-height);
}

/* Same reasoning for any other control that sits inside a wrapper which
 * already paints the frame. .travellin-input-wrap is that wrapper's class. */
.travellin-search-form .travellin-input-wrap > input[type="text"],
.travellin-search-form .travellin-input-wrap > input[type="search"] {
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

/* The group wrappers themselves carry the reference frame, so the customer
 * sees the identical box either way. */
.travellin-search-form .travellin-endpoints {
    border: var(--tvl-field-border-width) solid var(--tvl-field-border-color);
    border-radius: var(--tvl-field-radius);
    background-color: var(--tvl-field-bg);
}

/* Checkboxes and radios are not text fields and must keep their native box.
 * Listed explicitly because a future edit to the selector list above could
 * otherwise sweep them in and turn every tickbox into a 56px slab. */
.travellin-search-form input[type="checkbox"],
.travellin-search-form input[type="radio"],
.travellin-results input[type="checkbox"],
.travellin-results input[type="radio"],
.travellin-package-details input[type="checkbox"],
.travellin-package-details input[type="radio"],
.travellin-checkout input[type="checkbox"],
.travellin-checkout input[type="radio"],
.travellin-flightsel input[type="checkbox"],
.travellin-flightsel input[type="radio"] {
    min-height: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
}

/* -- 3. HOVER AND FOCUS, CARRIED OVER FROM THE REFERENCE -------------
 *
 * The search form already had both. Extending them is what makes the fields
 * identical in every state, not just at rest - a field that matches when
 * idle and diverges the moment it is clicked is not a copy.
 */
.travellin-results input[type="text"]:hover,
.travellin-results select:hover,
.travellin-package-details input[type="text"]:hover,
.travellin-package-details select:hover,
.travellin-checkout input:hover,
.travellin-checkout select:hover,
.travellin-checkout textarea:hover,
.travellin-flight-booking input:hover,
.travellin-flight-booking select:hover,
.travellin-customer-dashboard input:hover,
.travellin-customer-dashboard select:hover {
    border-color: #cbd5e1;
}

.travellin-results input:focus-visible,
.travellin-results select:focus-visible,
.travellin-package-details input:focus-visible,
.travellin-package-details select:focus-visible,
.travellin-checkout input:focus-visible,
.travellin-checkout select:focus-visible,
.travellin-checkout textarea:focus-visible,
.travellin-flight-booking input:focus-visible,
.travellin-flight-booking select:focus-visible,
.travellin-customer-dashboard input:focus-visible,
.travellin-customer-dashboard select:focus-visible {
    outline: none;
    border-color: var(--travellin-primary, #0866ff);
    /* Fixed fallback first: an unsupported color-mix() invalidates the whole
     * declaration, and CSS then keeps the last value it DID understand. The
     * order matters - reversed, old browsers get no focus ring at all. */
    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, #0866ff) 25%, transparent);
}

/* -- 4. TEMPLATE WRAPPERS AND GROUPING SECTIONS ----------------------
 *
 * Roots first. .travellin-search-form and .travellin-stay are driven by the
 * two variables set at the top of this file, so they are already at zero and
 * are not repeated here. These are the ones that hard-code a value.
 */
.travellin-results,
.travellin-checkout,
.travellin-flight-booking,
.travellin-flight-review,
.travellin-flightsel,
.travellin-customer-dashboard,
.travellin-booking-confirmation,
.travellin-legal-notices,
.travellin-package-archive {
    padding: 0;
    margin: 0;
}

.travellin-builder {
    padding: 0;
    margin: 0;
}

/* Grouping containers - the ones measured as painting no background and no
 * border. Enumerated, never wildcarded: see the header note. */
.travellin-checkout-steps,
.travellin-price-lock,
.travellin-checkout-locking,
.travellin-results-layout,
.travellin-results-area,
.travellin-results-title-row,
.travellin-fields-row,
.travellin-builder-cols,
.travellin-builder-col,
.travellin-builder-head,
.travellin-builder-list,
.travellin-account-content {
    padding: 0;
    margin: 0;
}

/*
 * THE RESULTS TITLE IS IN THAT GROUP, AND SHOULD NOT BE ZEROED.
 *
 * Measured on /search-results/ before this rule:
 *
 *     travellin-app.css     .travellin-results-title-row   margin: 8px 0 16px
 *     travellin-fields.css  the group above                margin: 0
 *     applied                                              0px / 0px
 *
 * Both selectors carry one class, so the tie is settled by order, and this
 * file loads last by design — the header note says so, and that is normally
 * exactly what is wanted. Here it took the heading's spacing away: the filter
 * chips ended up flush against the <h1>, and the 12px above it were bleeding
 * in from the summary bar's own margin rather than belonging to the title.
 *
 * The heading is not a grouping container. It is a row with a heading in it,
 * and it owns its spacing — so moving or hiding either neighbour cannot
 * reopen the gap, which is what would happen if this were solved by growing
 * .travellin-search-summary-bar instead.
 *
 * .travellin-results is display:block, so these margins collapse against the
 * neighbours' rather than adding to them: 30 above and 30 below, not 42.
 *
 * The mobile step is deliberately larger than the tablet one. On a narrow
 * screen the title wraps to two or three lines and sits directly above a
 * horizontally scrolling chip row, so it needs more separation there, not
 * less.
 */
.travellin-results-title-row {
    margin-top: 30px;
    margin-bottom: 30px;
}

@media (max-width: 1024px) {
    .travellin-results-title-row {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .travellin-results-title-row {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

/* .travellin-checkout-steps is an <ol>. Zeroing its padding removes the
 * browser's list indent, which is where the native numbers are drawn -
 * without this they would be clipped outside the box. The stepper draws its
 * own markers, so the native ones are not needed. */
.travellin-checkout-steps {
    list-style: none;
}

/* The mobile override in travellin-app.css re-applies 16px side padding to
 * .travellin-stay below 981px. Same specificity, and this file loads later,
 * so this returns it to zero at every width rather than only on desktop. */
@media (max-width: 980px) {
    .travellin-stay {
        padding-left: 0;
        padding-right: 0;
    }
}

/* -- 5. MOBILE -------------------------------------------------------
 *
 * The search form already drops to 15px below 768px (travellin-frontend.css)
 * - asked for previously, and above the 12px floor where mobile Safari zooms
 * the viewport on focus. The other templates have to follow the same step or
 * they would be identical on desktop and divergent on a phone.
 */
@media (max-width: 767px) {
    .travellin-results input,
    .travellin-results select,
    .travellin-results textarea,
    .travellin-package-details input,
    .travellin-package-details select,
    .travellin-package-details textarea,
    .travellin-checkout input,
    .travellin-checkout select,
    .travellin-checkout textarea,
    .travellin-flight-booking input,
    .travellin-flight-booking select,
    .travellin-flight-review input,
    .travellin-flightsel input,
    .travellin-flightsel select,
    .travellin-customer-dashboard input,
    .travellin-customer-dashboard select,
    .travellin-booking-confirmation input {
        font-size: 15px;
    }
}

/* -- 6. THE THREE PANELS ---------------------------------------------
 *
 * MEASURED on the live checkout at 3.128.0, viewport 1470. The three stacked
 * surfaces a customer sees on the Travellers step disagreed on four separate
 * properties while being exactly the same width (772px):
 *
 *                          padding   radius   border     background
 *   .travellin-checkout-flights          20px     12px     #dfe1e6    #fff
 *   .travellin-checkout-package-summary   8px     10px     #dce3ec    transparent
 *   .travellin-traveller-fieldset        14px     10px     #dce3ec    transparent
 *
 * Three paddings, two radii, two border colours, two backgrounds — stacked
 * directly on top of one another, so the inconsistency is visible without
 * scrolling.
 *
 * The flight card is the reference: it is the only one of the three that
 * paints a full surface (white background) and the only one whose radius
 * matches the card treatment used elsewhere on the page. The other two are
 * brought up to it rather than the reverse, because flattening the flight
 * card down to 8px would have removed finish rather than added consistency.
 *
 * SCOPE NOTE — this is deliberately narrower than "every card on the site".
 * Only the three surfaces named above are touched. .travellin-checkout-aside
 * (the price summary), .travellin-add-traveller and .travellin-checkout-error
 * are the same kind of element and are NOT included, because they were not
 * part of what was measured and asked about. They are listed here so the next
 * person can see the omission was a decision, not an oversight.
 */
.travellin-checkout-flights,
.travellin-checkout-package-summary,
.travellin-traveller-fieldset {
    box-sizing: border-box;
    padding: var(--tvl-panel-pad);
    border: 1px solid var(--tvl-panel-border-color);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-panel-bg);
}

/* A <fieldset> carries browser defaults that a <div> does not — its own
 * min-inline-size keeps it from shrinking inside a flex or grid parent, and
 * the legend sits in a gap cut out of the top border. The padding above
 * would be applied on top of the UA's, so it is reset explicitly rather
 * than left to differ between Chrome, Firefox and Safari. */
.travellin-traveller-fieldset {
    min-inline-size: 0;
    margin-inline: 0;
}

/* -- 7. PANEL SIDE PADDING ON MOBILE ---------------------------------
 *
 * Requested: 10px left and right on mobile, on every panel of this kind in
 * every template. Only the horizontal padding is touched — the vertical
 * padding stays whatever each panel already had, because "10 ляво и дясно"
 * is a side gutter, not a full padding reset, and collapsing the top and
 * bottom would close the gap between a panel's heading and its border.
 *
 * BREAKPOINT: 767px, matching the mobile step already used in section 5 and
 * in travellin-frontend.css. A second, different mobile breakpoint would
 * mean panels and the type inside them changed at different widths.
 *
 * WHAT COUNTS AS "A PANEL LIKE THESE"
 * -----------------------------------
 * A sweep of the stylesheets found 108 selectors that carry a border, a
 * radius and a padding together. Applying a 10px side gutter to all 108
 * would have hit every button, chip, badge and pill on the site — a 999px
 * pill with 10px sides is a different control, and .travellin-deal-cta or
 * .tvl-locale-save would have been visibly rebuilt. So the list below is
 * the filtered set: block-level content surfaces only.
 *
 * DELIBERATELY EXCLUDED, so the next reader knows it was a decision:
 *   - every button, CTA, toggle, chip, badge and pill (radius 999px / 50%,
 *     or a *-btn / *-cta / *-continue / *-close / *-remove class)
 *   - floating overlays: .travellin-calendar-popover,
 *     .travellin-travellers-popover, .travellin-autocomplete-suggestions,
 *     .travellin-gfbar-menu. They are positioned layers whose width is
 *     computed against the trigger, not the page, so a page-level gutter
 *     does not apply to them and could shift them off their anchor.
 *   - .travellin-search-form, which is a template wrapper and is governed
 *     by --travellin-form-pad in section 4.
 */
@media (max-width: 767px) {
    /* Checkout and booking */
    .travellin-checkout-flights,
    .travellin-checkout-package-summary,
    .travellin-traveller-fieldset,
    .travellin-checkout-aside,
    .travellin-add-traveller,
    .travellin-special-requests,
    .travellin-price-box,
    .travellin-review-price-card,
    .travellin-review-seller,
    .travellin-linked-flight,
    .travellin-flight-row,
    .travellin-flight-booking-success,
    .travellin-baggage-item,
    .travellin-alternative-card,

    /* Results, search and the builder */
    .travellin-filters-sidebar,
    .travellin-results-rankinfo,
    .travellin-search-insight,
    .travellin-sort-controls,
    .travellin-saved-package-row,
    .travellin-saved-search-row,
    .travellin-sticky-booking-panel,
    .travellin-builder,
    .travellin-builder-warnings,
    .travellin-expansion-notice,
    .travellin-legal-placeholder-notice,
    .tvl-flight-card,

    /* Stay / package details */
    .travellin-package-summary,
    .travellin-stay .stay-leg,
    .travellin-stay .stay-need,
    .travellin-stay .stay-rev,
    .travellin-stay .stay-steps,
    .travellin-stay .stay-avail-reserve,
    .travellin-stay .travellin-stay-infobar,
    .travellin-stay .travellin-stay-sticky,

    /* Flight selection */
    .travellin-flightsel .fs-fare,
    .travellin-flightsel .fs-itin-leg,
    .travellin-flightsel .fs-more,
    .travellin-flightsel .fs-tl-carrier {
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }

    /* Four of the selectors above are two classes deep (.travellin-stay .x,
     * .travellin-flightsel .x) and so outrank the single-class ones in the
     * same list. That is harmless here because every selector in the group
     * sets the identical pair of properties — but if a future edit gives
     * this block a second declaration, the deeper selectors will still win
     * their own rule and the shallower ones will not. Split the group then
     * rather than raising specificity on all of it. */
}

/* -- 8. THE REMAINING SEAMS ------------------------------------------
 *
 * MEASURED on the live search form, one viewport, one screen — six elements
 * sitting within 500px of each other, disagreeing three ways on width, two
 * on colour and three on radius:
 *
 *                              width   colour     radius
 *   .travellin-endpoints        1px    #dadce0    8px          <- reference
 *   .travellin-dates-toggle     1.5px  #e2e8f0    16px
 *   .travellin-travellers-toggle 1.5px #dadce0    16px
 *   trip-type tab strip         1px    #e2e8f0    16px 16px 0 0
 *   divider between tabs        1px    #e2e8f0    -
 *   .travellin-search-submit    0      -          16px
 *
 * The toggles are already brought in by section 1b. The tab strip is handled
 * by the three variables set at the top of this file, not by a rule here —
 * it was built to be driven that way, and a live test confirmed it: setting
 * --travellin-tab-border-color at :root repainted the strip immediately.
 *
 * THE DIVIDER BETWEEN TABS IS UNVERIFIED. travellin-app.css:139 declares
 *
 *     .travellin-tab-btn { border-inline-end: 1px solid
 *         var(--travellin-tab-border-color, var(--travellin-border)); }
 *
 * so by source it must follow the same variable. Live, it does not. The
 * variable demonstrably reaches the button — getComputedStyle on the button
 * returned the injected test value — and the strip beside it repainted from
 * that same variable in the same test, yet the button's computed
 * border-inline-end-color stayed #e2e8f0. It also refused an explicit
 * border-inline-end-color rule at (0,2,0). Two separate instruments, no
 * movement.
 *
 * That is either a harness limitation or a rule this sweep did not find.
 * It is NOT being papered over with !important: the variable above is
 * correct against the source, so if the fault is in the measurement the
 * divider will follow in production, and if it is a real rule then adding
 * force here would hide it rather than fix it. Check this one on a real
 * browser after deploying, and if it is still #e2e8f0, hunt the rule.
 *
 * That leaves the submit button. It reads var(--travellin-radius), which is
 * 16px and is shared by a large number of unrelated components, so the
 * variable itself must not be changed to 8px to fix one button. An explicit
 * rule is the narrow instrument here; redefining the token would have been
 * the wide one.
 */
.travellin-search-form .travellin-search-submit,
.travellin-search-form .travellin-search-submit > button {
    border-radius: var(--tvl-field-radius);
}

/* -- 9. DATE OF BIRTH ------------------------------------------------
 *
 * Built by hand in checkout-app.js so the input method is the same on a
 * desktop, a tablet and a phone — the reasoning is in dateOfBirthControl().
 * This is the styling half of that: three segments that read as ONE field.
 *
 * The pattern is the same one the reference control already uses. The
 * wrapper paints the frame; the controls inside are borderless. That is how
 * "Where from / Where to" reads as a single box with a divider rather than
 * two boxes, and it is the reason a DD / MM / YYYY row does not look like
 * three separate inputs that happen to sit next to each other.
 *
 * SPECIFICITY: section 1 matches .travellin-checkout input[type="text"]
 * at (0,2,1), and the segments ARE type="text" — without the rule below
 * each of the three would take its own 1px frame, 8px radius and 56px
 * height, and the single control would visibly break into three. The
 * selector here is (0,3,0), which outranks it on class count.
 */
.travellin-checkout .travellin-dob {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: var(--tvl-field-height);
    padding: var(--tvl-field-pad-y) var(--tvl-field-pad-x);
    border: var(--tvl-field-border-width) solid var(--tvl-field-border-color);
    border-radius: var(--tvl-field-radius);
    background-color: var(--tvl-field-bg);
}

.travellin-checkout .travellin-dob .travellin-dob-part {
    box-sizing: content-box;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    font-family: inherit;
    font-size: var(--tvl-field-font-size);
    font-weight: var(--tvl-field-font-weight);
    color: var(--tvl-field-color);
    line-height: 24px;
    text-align: center;
}

/* Fixed widths, so the separators do not shuffle sideways as digits are
 * typed. A segment that moves while you fill it is the single most obvious
 * tell that a control was assembled rather than provided. */
.travellin-checkout .travellin-dob .travellin-dob-day,
.travellin-checkout .travellin-dob .travellin-dob-month {
    width: 2.2ch;
}

.travellin-checkout .travellin-dob .travellin-dob-year {
    width: 4.2ch;
}

.travellin-checkout .travellin-dob .travellin-dob-part::placeholder {
    color: var(--tvl-field-placeholder);
    font-weight: 400;
}

.travellin-checkout .travellin-dob .travellin-dob-part:focus-visible {
    outline: none;
    box-shadow: none;
}

.travellin-checkout .travellin-dob-sep {
    color: var(--tvl-field-placeholder);
    font-size: var(--tvl-field-font-size);
    font-weight: 400;
    user-select: none;
}

/* The frame reacts, not the segment inside it — the focus ring belongs to
 * the control the customer sees, which is the whole field. */
.travellin-checkout .travellin-dob:focus-within {
    border-color: var(--travellin-primary, #0866ff);
    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, #0866ff) 25%, transparent);
}

.travellin-checkout .travellin-dob:hover:not(:focus-within) {
    border-color: #cbd5e1;
}

/* Only ever set when all three segments are filled and the result is not a
 * real past date — never while the customer is still mid-entry. */
.travellin-checkout .travellin-dob.is-invalid {
    border-color: #b32d2e;
}

/* Mobile keeps the same step the other fields take at this breakpoint, so
 * the row does not become the one thing on the page at a different size. */
@media (max-width: 767px) {
    .travellin-checkout .travellin-dob .travellin-dob-part,
    .travellin-checkout .travellin-dob-sep {
        font-size: 15px;
    }
}

/* -- 10. NATIONALITY ---------------------------------------------------
 *
 * A country picker built in checkout-app.js — flag, name, and a search box
 * inside the dropdown. The reasoning for replacing the old free-text
 * "2-letter code" input is in nationalityControl().
 *
 * The closed control has to be indistinguishable from every other field on
 * the page, so the trigger takes the same reference box as section 1: same
 * 1px #dadce0, same 8px radius, same 56px, same 18px/600. It is a <button>
 * rather than an input, and a button that paints a background must also
 * name its text colour — the theme's own button rules would otherwise win
 * and the country name would come out in whatever colour Astra uses for
 * buttons. Both are declared below.
 */
.travellin-checkout .travellin-country {
    position: relative;
}

.travellin-checkout .travellin-country-trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--tvl-field-height);
    padding: var(--tvl-field-pad-y) var(--tvl-field-pad-x);
    border: var(--tvl-field-border-width) solid var(--tvl-field-border-color);
    border-radius: var(--tvl-field-radius);
    background-color: var(--tvl-field-bg);
    color: var(--tvl-field-color);
    font-family: inherit;
    font-size: var(--tvl-field-font-size);
    font-weight: var(--tvl-field-font-weight);
    line-height: 24px;
    text-align: start;
    cursor: pointer;
}

/* The placeholder state matches the placeholder of a real input rather than
 * inventing a third grey — an empty country field and an empty name field
 * sit two rows apart and must read as equally empty. */
.travellin-checkout .travellin-country-trigger.is-empty {
    color: var(--tvl-field-placeholder);
    font-weight: 400;
}

.travellin-checkout .travellin-country-trigger:hover {
    border-color: #cbd5e1;
}

.travellin-checkout .travellin-country-trigger:focus-visible {
    outline: none;
    border-color: var(--travellin-primary, #0866ff);
    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, #0866ff) 25%, transparent);
}

.travellin-checkout .travellin-country-flag {
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
}

.travellin-checkout .travellin-country-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The panel is absolutely positioned so opening it does not push the rest
 * of the traveller form down the page — a form that reflows under the
 * pointer while being filled loses the customer their place. */
.travellin-checkout .travellin-country-panel {
    position: absolute;
    z-index: 60;
    inset-inline: 0;
    top: calc(100% + 4px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    padding: 10px;
    border: 1px solid var(--tvl-field-border-color);
    border-radius: var(--tvl-field-radius);
    background: #fff;
    box-shadow: 0 12px 32px rgba(9, 30, 66, 0.18);
}

.travellin-checkout .travellin-country-panel[hidden] {
    display: none;
}

/* The search box is a type="text" inside .travellin-checkout, so section 1
 * would give it the full 56px field treatment. Inside a 320px dropdown that
 * would eat a third of the visible list, so it is scaled down here — at
 * (0,3,0) against section 1's (0,2,1). */
.travellin-checkout .travellin-country-panel .travellin-country-search {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--tvl-field-border-color);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 400;
}

.travellin-checkout .travellin-country-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    /* -webkit- prefix for iOS Safari, which is the browser most likely to
     * be scrolling a 249-row list on a small screen. */
    -webkit-overflow-scrolling: touch;
}

.travellin-checkout .travellin-country-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 400;
    color: var(--tvl-field-color);
    cursor: pointer;
}

/* Keyboard highlight and pointer hover paint the same, so arrowing down the
 * list and running the mouse down it look like the same act. */
.travellin-checkout .travellin-country-opt:hover,
.travellin-checkout .travellin-country-opt.is-active {
    background: #f4f8ff;
}

.travellin-checkout .travellin-country-opt[aria-selected="true"] {
    font-weight: 700;
}

.travellin-checkout .travellin-country-empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 15px;
    color: var(--tvl-field-placeholder);
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-country-trigger {
        font-size: 15px;
    }
}

/* -- 11. CONTACT PHONE -------------------------------------------------
 *
 * The country picker from section 10 with a number field beside it. Both
 * halves have to read as ONE control, the same way the endpoints pair does
 * — so the two sit in a single row and the pair, not each half, carries the
 * focus ring.
 */
.travellin-checkout .travellin-phone {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* The picker shrinks to its content here: in this field it shows a flag and
 * a dial code, not a country name, so a full-width trigger would leave the
 * number squeezed into whatever was left. */
.travellin-checkout .travellin-phone > .travellin-country {
    flex: 0 0 auto;
}

.travellin-checkout .travellin-phone > .travellin-country > .travellin-country-trigger {
    width: auto;
    gap: 6px;
    white-space: nowrap;
}

.travellin-checkout .travellin-phone .travellin-phone-number {
    flex: 1 1 auto;
    min-width: 0;
}

/* The dial code is the value being read in the closed state, so it takes the
 * field's own weight; in the open list it is secondary to the country name
 * and is pushed to the end. */
.travellin-checkout .travellin-phone-dial {
    font-variant-numeric: tabular-nums;
}

.travellin-checkout .travellin-country-opt .travellin-phone-dial {
    margin-inline-start: auto;
    padding-inline-start: 12px;
    color: var(--tvl-field-placeholder);
}

/* The panel belongs to the picker, which is now only as wide as a dial code.
 * Left at inset-inline: 0 it would be a ~110px column trying to hold country
 * names, so it is released to a readable width and anchored to the start. */
.travellin-checkout .travellin-phone .travellin-country-panel {
    inset-inline: auto;
    inset-inline-start: 0;
    width: min(340px, 80vw);
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-phone .travellin-phone-number {
        font-size: 15px;
    }
}

/* -- 12. TRAVELLER FORM LAYOUT ---------------------------------------
 *
 * Title alone on the first line at 15%, top left. Every other field two to
 * a line.
 *
 * Two columns, and Title is the one item that spans both — spanning is what
 * puts it alone on its row. Its 15% is then taken inside that full-width
 * track, so the percentage is measured against the form, not against one
 * half of it. Putting Title in a single column instead would have left an
 * empty half-row beside it that the next field would fall into.
 */
.travellin-checkout .travellin-traveller-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Column gap wider than the row gap: the eye needs a clear break to
     * read two fields as separate rather than as one wide one, and needs
     * less of one to read two rows as a list. */
    gap: 14px 20px;
    align-items: start;
}

.travellin-checkout .travellin-traveller-grid > label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* minmax(0, 1fr) above plus this: without it a long country name or a
     * wide select sets the column's minimum content width and the two
     * columns stop being equal. */
    min-width: 0;
}

.travellin-checkout .travellin-traveller-grid > .travellin-field-title {
    grid-column: 1 / -1;
    width: 15%;
}

/* An odd number of remaining fields leaves the last one in column 1 at half
 * width, which is correct — it stays aligned with the field above it rather
 * than stretching and breaking the two-column rhythm. */

@media (max-width: 767px) {
    .travellin-checkout .travellin-traveller-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 15% of a phone is about 55px — narrower than the word "Miss" plus a
     * dropdown arrow, so the control would clip its own content. On one
     * column the field is given a width that fits what it holds. */
    .travellin-checkout .travellin-traveller-grid > .travellin-field-title {
        width: 45%;
        min-width: 110px;
    }
}

/* The select keeps the reference box from section 1 — it is matched there by
 * `.travellin-checkout select` already, so nothing is restated here except
 * the one thing a select needs and an input does not. */
.travellin-checkout .travellin-title-select {
    /* Leave the native arrow alone. appearance:none would remove it and
     * then the control would need a hand-drawn one to still read as a
     * dropdown — guard check 35 exists because that has been got wrong
     * before. */
    cursor: pointer;
}

/* -- 13. PACKAGE SUMMARY THUMBNAIL -----------------------------------
 *
 * Measured before: the image is a fixed 64 x 64 square while the text beside
 * it is four lines and 91.8px tall, in a container set to align-items:center
 * — so the picture floats in the middle of a block half again its height,
 * with a ragged gap above and below it.
 *
 *   width   64px  ->  94px desktop, 84px tablet, fluid on mobile
 *   height  64px  ->  whatever the text next to it is
 *
 * HOW THE HEIGHT IS MATCHED
 * -------------------------
 * Not with a number. Any fixed value would be right for a four-line summary
 * and wrong the moment an offer has a longer property name or a second
 * flight line, and this block's height is supplier-driven — nothing here
 * gets to assume how many lines arrive.
 *
 * Instead the container stops centring and starts stretching, and the image
 * gives up its fixed height. A flex item is stretched to the line's cross
 * size only when its cross-size property is `auto`, which is why `height`
 * is set back to auto rather than to 100% — a percentage height here would
 * resolve against a container whose height is itself being derived from
 * this row, and the two would be defining each other.
 *
 * object-fit: cover was already there and does the rest: the box is now
 * whatever shape the text makes it, and the photograph is cropped to fill
 * that shape instead of being squashed into it.
 *
 * The min-height floor is today's 64px. If an offer ever arrives with a
 * one-line summary, the picture shrinks to a letterbox strip without it.
 */
.travellin-checkout .travellin-checkout-package-summary {
    align-items: stretch;
}

.travellin-checkout .travellin-checkout-summary-image {
    width: 94px;
    height: auto;
    align-self: stretch;
    min-height: 64px;
    object-fit: cover;
    border-radius: var(--tvl-field-radius);
    flex-shrink: 0;
}

/* Tablet. 1024px is the breakpoint the tab strip already uses, so the page
 * changes shape at one width rather than at two. */
@media (max-width: 1024px) {
    .travellin-checkout .travellin-checkout-summary-image {
        width: 84px;
    }
}

/* Mobile: fluid rather than another fixed step. The card itself is already
 * near the width of the screen here, so a hard pixel value would be a
 * different proportion on every handset. clamp keeps it between a floor
 * that stays recognisable and a ceiling that never crowds out the text. */
@media (max-width: 767px) {
    .travellin-checkout .travellin-checkout-summary-image {
        width: clamp(72px, 24vw, 110px);
    }
}

/* The text is what sets the height, so it must not be stretched into a
 * shape it did not ask for — it stays at its natural height and sits at the
 * top, which is where the eye starts reading. */
.travellin-checkout .travellin-checkout-summary-text {
    align-self: center;
    min-width: 0;
}

/* -- 14. ENTRY/EXIT SYSTEM NOTICE ------------------------------------
 *
 * An informational band above the traveller form. It is not an error and
 * not a warning, so it takes the brand's own blue tint rather than the red
 * of .travellin-checkout-error — a border requirement the traveller can
 * plan around should not look like something that has gone wrong.
 *
 * Background and text colour are declared together. Guard check 35 exists
 * because a control that paints one and inherits the other has shipped
 * before and came out unreadable when the theme's colour won.
 */
.travellin-checkout .travellin-ees-notice {
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--tvl-notice-border);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-notice-bg);
    color: var(--tvl-field-color);
    font-size: 15px;
    font-weight: 400;
    /* Slightly looser than the form around it: this is prose to be read
     * once, not a label to be scanned. */
    line-height: 1.55;
}

.travellin-checkout .travellin-ees-link {
    color: inherit;
    /* Underlined rather than recoloured. Inside a tinted band a blue link on
     * blue loses most of its contrast, and underline is the one link cue
     * that survives being read by someone who cannot separate the hues. */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.travellin-checkout .travellin-ees-link:hover,
.travellin-checkout .travellin-ees-link:focus-visible {
    text-decoration-thickness: 2px;
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-ees-notice {
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }
}

/* -- 15. CONTACT DETAILS AND NOTIFICATIONS ---------------------------
 *
 * The contact section is the account, the travellers below it are the trip.
 * They are given the same two-column grid so the page reads as one form, but
 * a heading and an explanatory line separate them — a customer who cannot
 * tell the two apart puts the passenger's address on their own invoice.
 */
/* The section panel, same as Traveller details and Round-trip transfer.
 * Measured from the traveller fieldset: 20px padding, 12px radius, 1px
 * #dfe1e6, white. */
.travellin-checkout .travellin-contact {
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: var(--tvl-panel-pad);
    border: 1px solid var(--tvl-panel-border-color);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-panel-bg);
}

.travellin-checkout .travellin-contact-title,
.travellin-checkout .travellin-travellers-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-contact-intro,
.travellin-checkout .travellin-travellers-intro {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tvl-field-placeholder);
}

/* Same grid as the traveller form — see section 12 for why the two-column
 * rhythm is set with minmax(0, 1fr) rather than 1fr. */
.travellin-checkout .travellin-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: start;
}

.travellin-checkout .travellin-contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.travellin-checkout .travellin-contact-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tvl-field-color);
}

/* Street name is the one field a two-column row makes worse: an address line
 * is long and a house number is short, so they get the full width and a
 * narrow column respectively rather than an equal half each. */
.travellin-checkout .travellin-contact-address {
    grid-column: 1 / -1;
}

.travellin-checkout .travellin-contact-help {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tvl-field-placeholder);
}

/* Notifications. A fieldset again, so a screen reader announces the group
 * before reading the individual choices. */
/* Inside the panel now, so it gives up its own frame — a border a few
 * pixels inside another border reads as one badly drawn edge. A single rule
 * across the panel's full inner width separates it instead, which is what
 * a change of subject inside one card actually is. */
.travellin-checkout .travellin-notify {
    box-sizing: border-box;
    margin: 20px calc(var(--tvl-panel-pad) * -1) 0;
    padding: 20px var(--tvl-panel-pad) 0;
    border: 0;
    border-top: 1px solid var(--tvl-panel-border-color);
    border-radius: 0;
    background: none;
    min-inline-size: 0;
    width: calc(100% + var(--tvl-panel-pad) * 2);
}

/* No padding around it any more: that gap existed to clear the fieldset's
 * own border, and with the border gone it just indents the heading past
 * everything above it. */
.travellin-checkout .travellin-notify-legend {
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

/* The line stating what cannot be turned off sits above the choices and is
 * not styled as one — it is a fact, and a sentence that looks like an option
 * invites someone to look for the switch. */
.travellin-checkout .travellin-notify-fixed {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tvl-field-placeholder);
}

.travellin-checkout .travellin-notify-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tvl-field-color);
    cursor: pointer;
}

.travellin-checkout .travellin-notify-opt:last-child {
    margin-bottom: 0;
}

/* The tick is aligned to the first line of its label, not to the middle of a
 * label that wraps to three. */
.travellin-checkout .travellin-notify-opt input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
}

.travellin-checkout .travellin-contact-account {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tvl-panel-border-color);
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .travellin-checkout .travellin-contact {
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }

    /* Tracks the panel's own gutter, or the separator stops short of the
     * edge it is supposed to span. */
    .travellin-checkout .travellin-notify {
        margin-inline: calc(var(--tvl-panel-pad-x-mobile) * -1);
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
        width: calc(100% + var(--tvl-panel-pad-x-mobile) * 2);
    }
}

/* -- 16. THIRD-PARTY EXTRA SECTIONS ----------------------------------
 *
 * Car hire and Airport Parking. The markup inside .travellin-extra-slot is
 * an affiliate widget this stylesheet has never seen, so nothing here reaches
 * into it — only the frame around it is styled. A rule targeting a provider's
 * internal class names would break the first time they redeploy.
 */
.travellin-checkout .travellin-extra-section {
    margin: 0 0 24px;
    padding: var(--tvl-panel-pad);
    border: 1px solid var(--tvl-panel-border-color);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-panel-bg);
}

.travellin-checkout .travellin-extra-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-extra-intro {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tvl-field-placeholder);
}

/* The widget is given a clean box and left alone. overflow-x rather than
 * hidden: a provider's table that is wider than the column should scroll,
 * not be silently cropped so the last column of prices disappears. */
.travellin-checkout .travellin-extra-slot {
    max-width: 100%;
    overflow-x: auto;
}

.travellin-checkout .travellin-extra-slot img {
    max-width: 100%;
    height: auto;
}

/* Says who charges and who converts. Placed after the widget, because it
 * describes what the customer has just read rather than introducing it. */
.travellin-checkout .travellin-extra-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tvl-field-placeholder);
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-extra-section {
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }
}

/* -- 17. INSURANCE AND CANCEL FOR ANY REASON -------------------------
 *
 * Both are two-option fieldsets rather than single checkboxes, for the
 * reason stated in the renderers: an unticked box cannot distinguish a
 * considered "no" from an unread one, and on these two products that
 * difference decides whether somebody travels uninsured or believes they
 * hold a refund they do not.
 */
.travellin-checkout .travellin-insurance {
    margin: 0 0 16px;
    padding: var(--tvl-panel-pad);
    border: 1px solid var(--tvl-panel-border-color);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-panel-bg);
    min-inline-size: 0;
}

.travellin-checkout .travellin-insurance legend {
    padding: 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

/* The refund figure is the headline of this product, so it is typeset as
 * one — a customer scanning the page should be able to read what they get
 * back without reading the bullets. */

.travellin-checkout .travellin-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tvl-field-color);
    cursor: pointer;
}

.travellin-checkout .travellin-radio:last-child {
    margin-bottom: 0;
}

.travellin-checkout .travellin-radio input[type="radio"] {
    flex: 0 0 auto;
    margin-top: 3px;
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-insurance {
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }
}

/* -- 18. EXTRA ROW DETAIL --------------------------------------------
 *
 * Journey time, price units, cover benefits and the two terms lines. All of
 * these are secondary to the choice itself, so none of them competes with
 * the option label for weight.
 */
.travellin-checkout .travellin-extra-meta {
    color: var(--tvl-field-placeholder);
    font-size: 14px;
}

.travellin-checkout .travellin-insurance-benefits {
    margin: 4px 0 10px;
    padding-inline-start: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-insurance-unit {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--tvl-field-placeholder);
}

/* The two terms lines. Smaller than the options they qualify, but not grey
 * enough to disappear — a condition nobody can read is a condition nobody
 * agreed to, whatever the checkbox says. */
.travellin-checkout .travellin-insurance-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5a6472;
}

/* -- 19. FARE CATEGORY ------------------------------------------------
 *
 * The room heading that used to live here has been removed at the
 * operator's request. Recorded rather than silently deleted: it was added
 * to keep two rooms' worth of identical fields apart, so if multi-room
 * bookings ever read as one long undivided list, this is the thing that
 * used to separate them.
 */

/* Secondary to the traveller number it sits beside — it identifies the
 * person, it does not name the section. */
.travellin-checkout .travellin-traveller-category {
    font-weight: 400;
    color: var(--tvl-field-placeholder);
}

/* -- 20. BAGGAGE ROW DETAIL ------------------------------------------
 *
 * Dimensions and the airline/agency fee split, both printed under the
 * option they describe. The split is the reason this exists: a customer who
 * can see which part of the price is the carrier's and which is ours has no
 * reason to suspect the difference.
 */
.travellin-checkout .travellin-baggage-dims,
.travellin-checkout .travellin-baggage-fees {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tvl-field-placeholder);
}

.travellin-checkout .travellin-baggage-fees {
    font-variant-numeric: tabular-nums;
}

/* -- 21. TRAVELPAYOUTS CAR HIRE CONTAINER ----------------------------
 *
 * The widget builds its own interface inside this element, so the only
 * thing set here is the space it lands in. min-height reserves that space
 * before the async script arrives — without it the section collapses to
 * nothing and then pushes the whole page down when the widget appears,
 * which is a layout shift on a checkout the customer is mid-way through.
 */
.travellin-checkout .travellin-tp-carhire {
    min-height: 320px;
}

.travellin-checkout .travellin-tp-carhire iframe {
    max-width: 100%;
    border: 0;
}

/* -- 22. ROUND-TRIP TRANSFER -----------------------------------------
 *
 * One card per option. Four regions on a line at desktop — mark, name and
 * journey time, price with its unit, action — collapsing to two rows on a
 * phone rather than four columns squeezed into 360px.
 *
 * Grid, not flex: the price column has to line up down the list even when
 * one option is called "Shared Standard Shuttle" and the next "Private
 * Premium Car". With flex each row sizes itself and the prices stagger,
 * which is the difference between a price list and three unrelated boxes.
 */
/* THE SECTION PANEL — the pattern every option section uses from here on.
 *
 * Same frame as a traveller fieldset, measured from it: 20px padding, 12px
 * radius, 1px #dfe1e6, white. One panel per section, not one per option.
 *
 * WHY THE OPTIONS INSIDE LOSE THEIR OWN FRAME
 * -------------------------------------------
 * A bordered card inside a bordered panel draws two lines a few pixels
 * apart and the eye reads them as one thick, badly aligned edge. Traveller
 * details is a single panel holding fields; this is a single panel holding
 * rows. The rows are separated by a hairline instead, which is what a list
 * of alternatives actually is.
 *
 * The selected row then cannot be shown by a border it no longer has, so it
 * takes a tint that bleeds to the panel's inner edge — see below. Losing
 * the frame without replacing the signal would have left the customer with
 * no way to see which option they had taken.
 */
.travellin-checkout .travellin-transfers {
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: var(--tvl-panel-pad);
    border: 1px solid var(--tvl-panel-border-color);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-panel-bg);
}

.travellin-checkout .travellin-transfers-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

/* The two promises. A tick before each, drawn with a pseudo-element so the
 * list carries no markup that a screen reader would read as "image". */
.travellin-checkout .travellin-transfers-promises {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.travellin-checkout .travellin-transfers-promises li {
    position: relative;
    padding-inline-start: 28px;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-transfers-promises li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 6px;
    width: 12px;
    height: 7px;
    border-inline-start: 2px solid #1e874b;
    border-bottom: 2px solid #1e874b;
    transform: rotate(-45deg);
}

.travellin-checkout .travellin-transfer-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    /* No row gap: the duration row sets its own top margin, and a gap as
     * well would double the space on the one card that has no duration. */
    gap: 0 18px;
    margin: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--tvl-panel-border-color);
    background: none;
}

/* No rule above the first row or below the last — the panel's own edge is
 * already there, and a second line 20px inside it reads as a mistake. */
.travellin-checkout .travellin-transfer-card:first-of-type {
    padding-top: 0;
}

.travellin-checkout .travellin-transfer-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.travellin-checkout .travellin-transfer-mark {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The glyph takes the brand blue for its body and a paler tint for glazing,
 * so the three vehicle marks read as one family rather than three icons. */
/* Five parts, so the three vehicles read as one family: body in the brand
 * blue, glazing two steps lighter, tyres near-black with a pale hub, and a
 * gold trim reserved for premium. */
.travellin-checkout .travellin-transfer-glyph .tvl-tr-body {
    fill: var(--travellin-primary, #0866ff);
}

.travellin-checkout .travellin-transfer-glyph .tvl-tr-glass {
    fill: #cfe0ff;
}

.travellin-checkout .travellin-transfer-glyph .tvl-tr-glass-lite {
    fill: #e4eeff;
}

.travellin-checkout .travellin-transfer-glyph .tvl-tr-wheel {
    fill: #1f2a3d;
}

.travellin-checkout .travellin-transfer-glyph .tvl-tr-hub {
    fill: #f7f9fc;
}

.travellin-checkout .travellin-transfer-glyph .tvl-tr-trim {
    fill: #f5b301;
}

.travellin-checkout .travellin-transfer-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

/* Journey time carries the same tick as the promises above it — it is a
 * fact about the option, presented the way the other facts are. */
/* Full width, first column — beneath the mark rather than beneath the name.
 * Placed explicitly at column 1 because the grid would otherwise flow it
 * into the next free cell, which is the one the price occupies. */
.travellin-checkout .travellin-transfer-duration {
    position: relative;
    grid-column: 1 / -1;
    margin: 10px 0 0;
    padding-inline-start: 24px;
    font-size: 15px;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-transfer-duration::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    top: 6px;
    width: 11px;
    height: 6px;
    border-inline-start: 2px solid #1e874b;
    border-bottom: 2px solid #1e874b;
    transform: rotate(-45deg);
}

.travellin-checkout .travellin-transfer-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}

.travellin-checkout .travellin-transfer-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--tvl-field-color);
    font-variant-numeric: tabular-nums;
}

.travellin-checkout .travellin-transfer-unit {
    font-size: 14px;
    color: var(--tvl-field-placeholder);
}

/* The radio is hidden from sight but not from the accessibility tree, so
 * the choice is still announced and still reachable by keyboard. Never
 * display:none — that removes it from both. */
.travellin-checkout .travellin-transfer-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.travellin-checkout .travellin-transfer-select {
    /* border-box, or width:100% on mobile overflows by exactly the padding
     * plus the border. Measured at a 360px container: the card was 360 wide
     * and the button 389, pushing 40px of the card off the screen. A <label>
     * gets no box-sizing from the field rules above, which only cover form
     * controls, so it has to be stated here. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    min-height: 48px;
    padding: 0 24px;
    border: var(--tvl-btn-border-width) solid var(--travellin-primary, #0866ff);
    border-radius: var(--tvl-btn-radius);
    background-color: #fff;
    color: var(--travellin-primary, #0866ff);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.travellin-checkout .travellin-transfer-select:hover {
    background-color: #f4f8ff;
}

/* Chosen state, driven by the input rather than by a class a script has to
 * remember to add and remove. */
.travellin-checkout .travellin-transfer-input:checked + .travellin-transfer-select {
    background-color: var(--travellin-primary, #0866ff);
    color: #fff;
}

.travellin-checkout .travellin-transfer-input:focus-visible + .travellin-transfer-select {
    outline: none;
    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, #0866ff) 25%, transparent);
}

/* The taken row, marked without a border.
 *
 * The tint is pulled out to the panel's padding on both sides and given the
 * width back, so it reads as a full-width band rather than a floating strip
 * with two gaps beside it. The row above it drops its rule, or the band
 * appears to have a line resting on its shoulder.
 */
.travellin-checkout .travellin-transfer-card:has(.travellin-transfer-input:checked) {
    margin-inline: calc(var(--tvl-panel-pad) * -1);
    padding-inline: var(--tvl-panel-pad);
    width: calc(100% + var(--tvl-panel-pad) * 2);
    background-color: #f4f8ff;
    border-bottom-color: transparent;
}

.travellin-checkout .travellin-transfer-card:has(.travellin-transfer-input:checked)
    + .travellin-transfer-card {
    border-top: 0;
}

@media (max-width: 767px) {
    /* Two rows: mark + name on the first, price and action on the second.
     * Four columns at 360px would leave the name two words wide. */
    .travellin-checkout .travellin-transfer-card {
        grid-template-columns: 48px minmax(0, 1fr);
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }

    .travellin-checkout .travellin-transfer-price {
        grid-column: 1 / -1;
        align-items: flex-start;
        text-align: start;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
    }

    .travellin-checkout .travellin-transfer-select {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* -- 23. CANCEL FOR ANY REASON ---------------------------------------
 *
 * One card. Mark and headline on a row, the points beneath spanning the
 * full width, the action anchored bottom-right, and the terms line outside
 * the card entirely.
 *
 * Grid with two columns and named placement rather than a stack of flex
 * rows: the points and the button have to start at the card's left edge and
 * its right edge respectively, regardless of how wide the glyph is, and
 * nesting flex containers to achieve that makes the button's position depend
 * on content above it.
 */
.travellin-checkout .travellin-cfar {
    margin: 0 0 24px;
}

.travellin-checkout .travellin-cfar-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-cfar-card {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px 16px;
    padding: 20px;
    border: 1px solid var(--tvl-panel-border-color);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-panel-bg);
}

.travellin-checkout .travellin-cfar-mark {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.travellin-checkout .travellin-cfar-glyph .tvl-cf-body { fill: #eef2f8; }
.travellin-checkout .travellin-cfar-glyph .tvl-cf-head { fill: var(--travellin-primary, #0866ff); }
.travellin-checkout .travellin-cfar-glyph .tvl-cf-ring { fill: #1f2a3d; }
.travellin-checkout .travellin-cfar-glyph .tvl-cf-day  { fill: #b9c7dd; }

/* The struck-out day is the whole point of the picture, so it is the one
 * element that takes a different colour. */
.travellin-checkout .travellin-cfar-glyph .tvl-cf-day.is-off { fill: #b32d2e; }

.travellin-checkout .travellin-cfar-head {
    grid-column: 2 / -1;
}

.travellin-checkout .travellin-cfar-headline {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-cfar-price {
    margin: 4px 0 0;
    font-size: 16px;
    color: var(--tvl-field-placeholder);
}

/* Points span the whole card, ticks drawn as pseudo-elements so nothing in
 * the list is announced as an image. */
.travellin-checkout .travellin-cfar-points,
.travellin-checkout .travellin-cfar-more {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.travellin-checkout .travellin-cfar-points li,
.travellin-checkout .travellin-cfar-more li {
    position: relative;
    padding-inline-start: 28px;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-cfar-points li::before,
.travellin-checkout .travellin-cfar-more li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 7px;
    width: 12px;
    height: 7px;
    border-inline-start: 2px solid #1e874b;
    border-bottom: 2px solid #1e874b;
    transform: rotate(-45deg);
}

.travellin-checkout .travellin-cfar-more li::before {
    border-color: #8a94a6;
}

.travellin-checkout .travellin-cfar-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--tvl-field-placeholder);
    font-family: inherit;
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.travellin-checkout .travellin-cfar-toggle:hover {
    color: var(--tvl-field-color);
}

/* Hidden from sight, not from the accessibility tree — see the transfer
 * cards for why display:none is wrong here. */
.travellin-checkout .travellin-cfar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.travellin-checkout .travellin-cfar-add {
    box-sizing: border-box;
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    min-height: 52px;
    margin-top: 8px;
    padding: 0 24px;
    border: var(--tvl-btn-border-width) solid var(--travellin-primary, #0866ff);
    border-radius: var(--tvl-btn-radius);
    background-color: #fff;
    color: var(--travellin-primary, #0866ff);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.travellin-checkout .travellin-cfar-add:hover {
    background-color: #f4f8ff;
}

.travellin-checkout .travellin-cfar-input:checked + .travellin-cfar-add {
    background-color: var(--travellin-primary, #0866ff);
    color: #fff;
}

.travellin-checkout .travellin-cfar-input:focus-visible + .travellin-cfar-add {
    outline: none;
    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, #0866ff) 25%, transparent);
}

.travellin-checkout .travellin-cfar-card:has(.travellin-cfar-input:checked) {
    border-color: var(--travellin-primary, #0866ff);
}

.travellin-checkout .travellin-cfar-terms {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6472;
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-cfar-card {
        grid-template-columns: 48px minmax(0, 1fr);
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }

    .travellin-checkout .travellin-cfar-add {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
    }
}

/* -- 24. ACTION BUTTON BORDERS ---------------------------------------
 *
 * Given as an Elementor Border panel: solid, 1px on all four sides at rest,
 * 2px on hover, 10px radius in both states.
 *
 * WHY THE HOVER RULE IS ONLY border-width
 * ---------------------------------------
 * The radius does not change between the two states, so it is not restated.
 * A hover rule that repeats a value it does not alter is a value that will
 * one day be changed in one place and not the other, and the bug will only
 * appear while the pointer is over the button — the hardest kind to catch
 * in a screenshot.
 *
 * WHY NOTHING MOVES WHEN IT THICKENS
 * ----------------------------------
 * box-sizing is border-box on both buttons, so growing the border from 1px
 * to 2px takes the extra pixel from the inside rather than from the layout.
 * Without that the card would twitch on every hover — a whole extra pixel
 * on each side, on a row that sits next to two other rows that did not
 * move. The min-width and min-height hold the box, and the label is centred
 * in whatever is left.
 *
 * SCOPE: the two outlined action buttons this checkout uses — Select on a
 * transfer, Add on the cancellation waiver. Filled buttons (Continue, Pay)
 * carry no border and are deliberately untouched; giving them one would put
 * a blue outline around a blue rectangle.
 */
.travellin-checkout .travellin-transfer-select:hover,
.travellin-checkout .travellin-cfar-add:hover {
    border-width: var(--tvl-btn-border-width-hover);
}

/* The chosen state fills and keeps the resting weight — a selected option is
 * not hovered, and it should not look thicker than its neighbours when the
 * pointer is elsewhere. */
.travellin-checkout .travellin-transfer-input:checked + .travellin-transfer-select,
.travellin-checkout .travellin-cfar-input:checked + .travellin-cfar-add {
    border-width: var(--tvl-btn-border-width);
}

.travellin-checkout .travellin-transfer-input:checked + .travellin-transfer-select:hover,
.travellin-checkout .travellin-cfar-input:checked + .travellin-cfar-add:hover {
    border-width: var(--tvl-btn-border-width-hover);
}

/* -- 26. SUPPLIER TERMS NOTICE ---------------------------------------
 *
 * Same panel as every other section — Contact details, Traveller details,
 * Round-trip transfer — because it is a section, not a footnote. A legal
 * disclosure set in small grey type at the foot of a form is a disclosure
 * designed to be skipped, and this one allocates responsibility between the
 * traveller, the supplier and this platform.
 *
 * So it takes the same frame and readable body type. It is quieter than an
 * option section only in that its heading does not compete with the ones
 * that ask for a decision.
 */
/* The same band as the EES notice, not the white panel the option sections
 * use. Both of these tell the customer something about the rules of the
 * trip; neither asks for a decision. Giving them a shared colour means the
 * distinction between "read this" and "choose this" is carried by the page
 * itself rather than by whether the reader notices there is no control. */
.travellin-checkout .travellin-notice {
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: var(--tvl-panel-pad);
    border: 1px solid var(--tvl-notice-border);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-notice-bg);
}

.travellin-checkout .travellin-notice-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

/* 15px and 1.6, not 13px and 1.4. These are three paragraphs somebody is
 * expected to actually read before agreeing to them. */
.travellin-checkout .travellin-notice-p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-notice-p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-notice {
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }
}

/* -- 27. TRAVEL INSURANCE (EKTA, referral) ---------------------------
 *
 * The section panel, same as the others. The rows inside are dividers, not
 * cards — the pattern established for Round-trip transfer.
 *
 * The one visible difference from an option section is the action: a link,
 * not a Select. That is deliberate and the whole point. Nothing here is
 * added to the booking, so nothing here should look like it can be.
 */
.travellin-checkout .travellin-insurance-ref {
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: var(--tvl-panel-pad);
    border: 1px solid var(--tvl-panel-border-color);
    border-radius: var(--tvl-panel-radius);
    background-color: var(--tvl-panel-bg);
}

.travellin-checkout .travellin-insurance-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.travellin-checkout .travellin-insurance-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

/* The insurer's name sits in the heading row, not in the small print. The
 * customer is choosing a policy; whose policy it is belongs where they are
 * looking. */
.travellin-checkout .travellin-insurance-provider {
    font-size: 14px;
    font-weight: 700;
    color: var(--tvl-field-placeholder);
    white-space: nowrap;
}

/* Two columns of ticks — ten headings in one column is a tall list nobody
 * reads to the end. */
.travellin-checkout .travellin-insurance-coverage {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 24px;
}

.travellin-checkout .travellin-insurance-coverage li {
    position: relative;
    padding-inline-start: 26px;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tvl-field-color);
    break-inside: avoid;
}

.travellin-checkout .travellin-insurance-coverage li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 6px;
    width: 11px;
    height: 6px;
    border-inline-start: 2px solid #1e874b;
    border-bottom: 2px solid #1e874b;
    transform: rotate(-45deg);
}

/*
 * Every tariff is a card, on the same terms as the decline row below them.
 *
 * They were divider-separated lines inside one panel, which read as a table
 * of information; a raised card reads as a thing you choose. Since the "View"
 * button is gone and the row itself is the control, the card shape is also
 * the honest one — it shows the click target instead of hiding it behind a
 * 22px circle at the far edge.
 *
 * Three columns: name/options, price, radio.
 */
.travellin-checkout .travellin-insurance-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0 18px;
    margin: 0 0 12px;
    padding: 22px 26px;
    border: 1px solid #f0f1f3;
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(23, 43, 77, .06), 0 2px 8px rgba(23, 43, 77, .04);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.travellin-checkout .travellin-insurance-row:hover {
    border-color: var(--travellin-primary, #0866ff);
    box-shadow: 0 1px 2px rgba(23, 43, 77, .08), 0 4px 12px rgba(23, 43, 77, .07);
}

/* The whole card carries the selected state, not just the dot. */
.travellin-checkout .travellin-insurance-row:has(.travellin-insurance-radio:checked) {
    border-color: var(--travellin-primary, #0866ff);
}

/* Focus visible on the card: the radio sits at the far edge, where a ring
 * around it alone is easy to miss. */
.travellin-checkout .travellin-insurance-row:has(.travellin-insurance-radio:focus-visible) {
    outline: 2px solid var(--travellin-primary, #0866ff);
    outline-offset: 2px;
}

.travellin-checkout .travellin-insurance-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-insurance-opts {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--tvl-field-placeholder);
}

.travellin-checkout .travellin-insurance-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}

.travellin-checkout .travellin-insurance-amount {
    font-size: 17px;
    font-weight: 700;
    color: var(--tvl-field-color);
    font-variant-numeric: tabular-nums;
}

.travellin-checkout .travellin-insurance-unit,
.travellin-checkout .travellin-insurance-estimate {
    font-size: 13px;
    color: var(--tvl-field-placeholder);
}

/* The figure that will actually appear in the summary, in the summary's own
 * currency — set in the body colour rather than the muted one, because it is
 * the number the customer is agreeing to pay. */
.travellin-checkout .travellin-insurance-incart {
    font-size: 13px;
    font-weight: 600;
    color: var(--tvl-field-color);
}

/* Shown instead when no rate is available to convert the provider's price:
 * the row stays honest about who charges and in what, and stays out of the
 * total rather than contributing a number nobody can reproduce. */
.travellin-checkout .travellin-insurance-nofx {
    font-size: 13px;
    color: var(--tvl-field-placeholder);
}


/*
 * Declining is now a card, not a footnote.
 *
 * It reuses .travellin-insurance-row for its metrics but overrides the grid:
 * this row has two children, not four, so the radio must be told to sit in the
 * second column or it would land under the price column and float mid-row.
 *
 * The raised-surface treatment (hairline plus soft shadow) separates it from
 * the tariff rows above without a heavy divider — it is a peer of them, but
 * the one that costs nothing.
 */
/*
 * The decline card now inherits everything from .travellin-insurance-row —
 * shape, shadow, hover, selected and focus states. Only two things differ: it
 * has no price column, and it sits slightly apart from the priced options
 * above it.
 */
.travellin-checkout .travellin-insurance-decline {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 16px;
}

.travellin-checkout .travellin-insurance-decline-note {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--tvl-field-placeholder);
    max-width: 62ch;
}

/*
 * A native radio, resized — not a hidden input with a drawn substitute.
 * Screen readers, forced-colours mode and keyboard arrow navigation all keep
 * working, which is the whole reason to pay the styling cost.
 */
.travellin-checkout .travellin-insurance-radio {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--travellin-primary, #0866ff);
    cursor: pointer;
}


/* Readable, not buried. This paragraph says who is paid and by whom; set
 * in 11px grey it would be a disclosure in name only. */
/* Under the total, stating it once for the whole figure. Small, because it is
 * a reassurance and not a heading — but not grey-on-grey, because a claim the
 * customer cannot read is a claim that was not made. */
.travellin-checkout .tvl-sum-incl {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tvl-field-placeholder);
    text-align: end;
}

.travellin-checkout .travellin-insurance-disclosure {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #5a6472;
}

@media (max-width: 767px) {
    .travellin-checkout .travellin-insurance-ref {
        padding-left: var(--tvl-panel-pad-x-mobile);
        padding-right: var(--tvl-panel-pad-x-mobile);
    }

    .travellin-checkout .travellin-insurance-coverage {
        columns: 1;
    }

    .travellin-checkout .travellin-insurance-row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The decline card keeps its two columns on mobile. Stacking it would put
     * the radio below three lines of consent text, far from what it consents
     * to; the card is short enough that it does not need to stack. */
    .travellin-checkout .travellin-insurance-decline {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 16px;
        gap: 0 12px;
    }

    .travellin-checkout .travellin-insurance-price {
        align-items: flex-start;
        text-align: start;
        margin-top: 8px;
    }


}


/* ===========================================================================
 * BAGGAGE — tile cards, per direction and per passenger
 *
 * Matches the reference checkout: a grid of upright cards, each with its
 * illustration, name, constraints, price and the fee split, and a radio at the
 * foot. Scoped under .travellin-checkout throughout — these names are generic
 * enough that an unscoped rule would eventually collide with a theme.
 * ======================================================================== */

.travellin-checkout .travellin-baggage-section {
    margin: 0 0 28px;
}

.travellin-checkout .travellin-baggage-heading {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-baggage-subtitle {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tvl-field-placeholder);
}

/*
 * The state where the supplier published no allowance.
 *
 * Deliberately quiet: no warning colour, no icon. This is not an error and
 * not a problem with the booking — it is one fact the fare did not carry,
 * and dressing it as an alert would make every such itinerary look broken.
 * It reads as a note, and it occupies the space where the selector would
 * have been so the step is never simply absent.
 */
.travellin-checkout .travellin-baggage-unknown-text {
    margin: 0;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tvl-field-placeholder);
    background: var(--tvl-field-bg, #f7f7f8);
    border: 1px solid var(--tvl-field-border, #e3e3e6);
    border-radius: 8px;
}

/*
 * A <details>, so open/closed is a browser state rather than one this
 * stylesheet and a script have to agree on. The marker is replaced with a
 * chevron drawn in CSS: the default triangle is not the reference's mark and
 * differs between browsers.
 */
.travellin-checkout .travellin-baggage-passenger {
    margin: 0 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fff;
}

.travellin-checkout .travellin-baggage-passenger-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    font-size: 17px;
    font-weight: 700;
    color: var(--tvl-field-color);
    cursor: pointer;
    list-style: none;
}

.travellin-checkout .travellin-baggage-passenger-name::-webkit-details-marker {
    display: none;
}

.travellin-checkout .travellin-baggage-passenger-name::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.travellin-checkout .travellin-baggage-passenger[open] .travellin-baggage-passenger-name::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/*
 * auto-fit rather than a fixed column count: two options sit side by side, one
 * fills the row, and four wrap — without a breakpoint per case.
 */
.travellin-checkout .travellin-baggage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 0 20px 20px;
}

.travellin-checkout .travellin-baggage-section > .travellin-baggage-grid {
    padding: 0;
}

.travellin-checkout .travellin-baggage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease;
}

/*
 * Hover darkens the edge rather than tinting it with the accent: the accent
 * means "chosen" on this card, and using it for "the pointer is here" made
 * a hovered card indistinguishable from the selected one at a glance. The
 * second hover rule further down already used this value; both now agree.
 */
.travellin-checkout .travellin-baggage-card:hover {
    border-color: var(--tvl-field-text, #1e0023);
}

/*
 * The chosen card, in the same colour as the dot inside it.
 *
 * This used --travellin-primary, which resolves blue, while the radio uses
 * the widget's own pink — so the selected option was outlined in one colour
 * and marked in another. Measured live: border rgb(8,102,255), radio
 * rgb(209,10,107). The reference uses a single accent for both.
 *
 * This selector, not the .is-selected class further down, is what actually
 * decides the colour: :has() carries a class's worth of specificity, so it
 * outranks it. The class stays as the fallback for browsers without :has()
 * and now names the same colour, which is why both had to be corrected
 * rather than one of them.
 */
.travellin-checkout .travellin-baggage-card:has(.travellin-baggage-radio:checked) {
    border-color: #d10a6b;
}

/* Focus belongs on the card: the radio sits at its foot, where a ring around
 * a 20px circle is easy to miss. */
/*
 * The keyboard focus ring, in the widget's own colour.
 *
 * It was the site's blue while the selected card is pink, so a chosen card
 * that still held focus wore two rings in two colours — an outer blue and an
 * inner pink, which reads as two different states at once. Same hue, offset
 * outwards, so focus and selection stack instead of arguing.
 */
.travellin-checkout .travellin-baggage-card:has(.travellin-baggage-radio:focus-visible) {
    outline: 2px solid #d10a6b;
    outline-offset: 3px;
}

.travellin-checkout .travellin-baggage-art {
    display: block;
    margin-bottom: 4px;
    line-height: 0;
}

.travellin-checkout .travellin-baggage-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tvl-field-color);
}

.travellin-checkout .travellin-baggage-desc,
.travellin-checkout .travellin-baggage-dims {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--tvl-field-placeholder);
}

.travellin-checkout .travellin-baggage-price {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--tvl-field-color);
    font-variant-numeric: tabular-nums;
}

.travellin-checkout .travellin-baggage-fees {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--tvl-field-placeholder);
}

.travellin-checkout .travellin-baggage-radio {
    width: 20px;
    height: 20px;
    margin: 6px 0 0;
    /*
     * The same literal as the selected card's outline. Two declarations for
     * the same radio pointed at two different tokens, and the card at a
     * third; whichever won was a matter of source order rather than intent.
     * One colour, written out, in every rule that touches this control.
     */
    accent-color: #d10a6b;
    cursor: pointer;
}

/* The submission checkbox is driven by the radio and must never be seen. */
.travellin-checkout .baggage-card-input {
    display: none;
}

.travellin-checkout .baggage-summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tvl-panel-border-color, #e0e0e0);
}

.travellin-checkout .total-price-label {
    font-size: 15px;
    color: var(--tvl-field-color);
}

.travellin-checkout #baggage-total-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .travellin-checkout .travellin-baggage-grid {
        grid-template-columns: 1fr;
        padding: 0 14px 16px;
    }
}


/* ===========================================================================
 * THE STICKY BAR MUST NOT OUTLIVE THE OVERLAY
 *
 * Measured in the stylesheets:
 *
 *     .travellin-lightbox        position: fixed    z-index: 10000
 *     .travellin-stay-modal      position: fixed    z-index:  9999
 *     .travellin-stay-sticky     position: sticky   z-index:    30
 *
 * A z-index of 30 against 10000 sounds settled, and it is — for painting. It
 * is not settled for a sticky element, because `position: sticky` keeps the
 * bar in the page's own scrolling flow rather than lifting it into the
 * overlay's stacking context. Reported as "the Continue button doesn't work":
 * the bar stayed on screen beneath the open photo viewer, looking live, while
 * every click landed on the lightbox backdrop above it.
 *
 * A visible control that does nothing is worse than an absent one. The
 * customer presses it, nothing happens, and the reasonable conclusion is that
 * the site is broken rather than that the button is behind something.
 *
 * body.has-stay-modal is already set by openStayModal() and openLightbox()
 * and cleared by both closers — including the case where the lightbox closes
 * back onto the photos modal, which deliberately keeps the lock. So the class
 * is already an accurate answer to "is an overlay open"; it simply was not
 * being used for anything but the scroll lock.
 *
 * visibility rather than display: the bar is sticky, and removing it from
 * layout while the page is scroll-locked underneath would shift the content
 * behind the overlay — visible the moment the overlay closes.
 * ======================================================================== */

body.has-stay-modal .travellin-stay-sticky {
    visibility: hidden;
    pointer-events: none;
}

/* =========================================================================
 * BAGGAGE — matched to the reference checkout, measured not guessed
 * =========================================================================
 *
 * Every figure below was read off secure.lastminute.com with getComputedStyle
 * on 2026-08-07, at a 501px content column:
 *
 *   section heading      18px / 700 / rgb(30,0,35)   line-height 28px
 *   section subtitle     14px / 400                  line-height 20px
 *   flight row title     14px / 700 / rgb(30,0,35)   line-height 20px
 *   flight row subtitle  14px / 400 / rgb(114,110,115)
 *   passenger accordion  16px / 700                  line-height 24px
 *   card                 190x284, padding 16, radius 8
 *   card border          1px solid rgb(229,228,229)
 *   card selected        2px solid rgb(219,0,102)
 *   card title           14px / 400 / rgb(30,0,35)
 *   card detail          12px / 400 / rgb(114,110,115)
 *   grid                 flex row, gap 8px
 *
 * The accent is taken from the site's own token rather than the reference's
 * magenta: copying a competitor's brand colour into our checkout would be
 * both wrong and someone else's property. Geometry, weight and rhythm are
 * what was asked for and what is reproduced.
 *
 * Appended at the end of this file deliberately — travellin-fields.css is
 * enqueued last, so these win over the earlier group resets without needing
 * a raised specificity that would be hard to override later.
 * ========================================================================= */

.travellin-checkout .travellin-baggage-slot {
    display: block;
}

.travellin-checkout .travellin-baggage-section {
    margin: 0 0 24px;
}

.travellin-checkout .travellin-baggage-heading {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: var(--tvl-field-text, #1e0023);
}

.travellin-checkout .travellin-baggage-subtitle {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--tvl-field-text, #1e0023);
}

/* The flight this group of bags belongs to. */
.travellin-checkout .travellin-baggage-passenger {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.travellin-checkout .travellin-baggage-passenger-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tvl-field-text, #1e0023);
}

.travellin-checkout .travellin-baggage-fees {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--tvl-field-placeholder, #726e73);
}

/* Per-passenger accordion. */
.travellin-checkout .travellin-baggage-section details {
    border: 1px solid var(--tvl-field-border, #e5e4e5);
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 8px;
    background: #fff;
}

.travellin-checkout .travellin-baggage-section summary {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--tvl-field-text, #1e0023);
}

/*
 * Two per row at the reference width, wrapping rather than shrinking below
 * a readable card. 190px is the measured card; 8px the measured gutter.
 */
.travellin-checkout .travellin-baggage-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

.travellin-checkout .travellin-baggage-card {
    flex: 1 1 190px;
    max-width: 100%;
    min-height: 284px;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--tvl-field-border, #e5e4e5);
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease;
}

.travellin-checkout .travellin-baggage-card:hover {
    border-color: var(--tvl-field-text, #1e0023);
}

/*
 * Selected is a 2px border, so the card must lose 1px of padding to keep
 * its box the same size — without this the row jumps as the traveller
 * moves between options.
 */
/*
 * --tvl-accent resolves blue on this installation, not the widget's pink.
 * Measured live: the token gave rgb(8,102,255) while the radio inside the
 * same card rendered rgb(209,10,107). The colour is named outright so the
 * outline and the dot cannot disagree again, whatever a theme sets.
 */
.travellin-checkout .travellin-baggage-card.is-selected {
    border-width: 2px;
    border-color: #d10a6b;
    padding: 15px;
}

.travellin-checkout .travellin-baggage-card svg,
.travellin-checkout .travellin-baggage-card img {
    display: block;
    margin: 0 auto 12px;
}

.travellin-checkout .travellin-baggage-name {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--tvl-field-text, #1e0023);
}

.travellin-checkout .travellin-baggage-desc,
.travellin-checkout .travellin-baggage-dims,
.travellin-checkout .travellin-baggage-fees {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--tvl-field-placeholder, #726e73);
}

.travellin-checkout .travellin-baggage-price {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tvl-field-text, #1e0023);
}

/* The radio sits last and centred, as in the reference. */
.travellin-checkout .travellin-baggage-card input[type="radio"] {
    margin: 12px auto 0;
    width: 20px;
    height: 20px;
    accent-color: #d10a6b;
}

@media (max-width: 520px) {
    .travellin-checkout .travellin-baggage-card {
        flex: 1 1 100%;
        min-height: 0;
    }
}

/* -------------------------------------------------------------------------
 * The panel the cards live in — measured off the reference, 2026-08-07.
 *
 * Cards were sitting straight on the page. In the reference every group is
 * a white rounded panel with 16px of padding, and the passenger accordion
 * is that same panel with a heading. Without it two groups have no edge
 * between them and the section reads as one long list.
 * ------------------------------------------------------------------------- */
/*
 * Measured off the reference: the passenger box is white, 8px radius, 16px
 * padding — and carries NO border. It reads as a card because the page
 * behind it is grey, not because it is outlined. The border this used to
 * have made every group look like a form fieldset.
 */
.travellin-checkout .travellin-baggage-panel {
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    border: 0;
    margin: 16px 0 0;
}

/*
 * A lone card keeps a card's width instead of stretching across the row.
 *
 * flex: 1 1 190px let a single option grow to the full 772px column, which
 * turned one checked bag into a banner. The reference holds ~190 whatever
 * the count. Growth is capped rather than forbidden so two and three across
 * still fill the row evenly.
 */
.travellin-checkout .travellin-baggage-card {
    max-width: 260px;
}

/* The included pill: stated, not priced. */
.travellin-checkout .travellin-baggage-included {
    display: inline-block;
    margin: 8px 0 0;
    padding: 6px 14px;
    border-radius: 6px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

/*
 * The detail lines take the reference's neutral grey directly. The token
 * this used resolves to a blue-tinted slate on this site (rgb(100,116,139)),
 * which reads as a different colour family beside the reference's warm grey.
 */
.travellin-checkout .travellin-baggage-desc,
.travellin-checkout .travellin-baggage-dims,
.travellin-checkout .travellin-baggage-fees {
    color: #726e73;
}

/* -------------------------------------------------------------------------
 * Three measured differences against the reference, 2026-08-07.
 * ------------------------------------------------------------------------- */

/*
 * 1. THE SELECTED CARD AND ITS RADIO DISAGREED ON COLOUR.
 *
 * Measured on the live card: border rgb(8,102,255), radio rgb(209,10,107).
 * The site's accent token resolves blue in one place and falls back to the
 * widget's pink in the other, so the chosen option was outlined in one
 * colour and dotted in another. The reference uses a single accent for both,
 * and so does this: the radio's colour is the one already on screen, so the
 * border follows it rather than the other way round.
 */
.travellin-checkout .travellin-baggage-card.is-selected {
    border-color: #d10a6b;
}

/*
 * 2. THE ILLUSTRATION WAS A THIRD OF THE REFERENCE'S SIZE.
 *
 * 46x56 against roughly 90 square. At that size the drawing stops being the
 * thing the eye lands on first, which is the whole job it has on a card the
 * customer is choosing between.
 */
.travellin-checkout .travellin-baggage-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    margin: 0 0 12px;
}

.travellin-checkout .travellin-baggage-art svg {
    width: auto;
    height: 88px;
    max-width: 100%;
}

/*
 * 3. A HUNDRED AND EIGHT PIXELS OF NOTHING AT THE FOOT OF EVERY CARD.
 *
 * Card 284 tall, content 144, the remainder dead space below the radio. The
 * reference fills the card: the radio sits at the bottom edge and the text
 * block takes the middle. Pushing the radio down with an automatic top
 * margin closes the gap without fixing any heights, so cards with a long
 * description and cards with none still line up.
 */
.travellin-checkout .travellin-baggage-radio {
    margin-top: auto;
}

.travellin-checkout .travellin-baggage-card {
    justify-content: flex-start;
}

/* =========================================================================
 * EXACT DIMENSIONS — every figure read off the reference with
 * getComputedStyle on 2026-08-07, then read off ours the same way and the
 * difference closed. Nothing here is estimated from a screenshot.
 *
 *   card            190 x 284      ours was 227 wide
 *   card padding    16             matched
 *   card radius     8              matched
 *   card border     1px #e5e4e5    matched
 *   selected        2px, padding stays 16 (card grows to 191)
 *   illustration    64 x 64        ours was 73 x 88
 *   grid            flex, gap 8, no padding    ours had 0 20px 20px
 *   heading         margin 0       ours had 0 0 4px
 *   card row gap    normal         ours had 6px
 * ========================================================================= */

.travellin-checkout .travellin-baggage-card {
    flex: 0 0 190px;
    width: 190px;
    max-width: 190px;
    gap: normal;
}

/*
 * The reference does not shrink the padding to absorb the second border
 * pixel — the selected card simply measures 191 instead of 190. Matching
 * that exactly means the row moves by one pixel on selection, which is what
 * the original does, and is less wrong than a card that is a pixel narrower
 * than its neighbours.
 */
.travellin-checkout .travellin-baggage-card.is-selected {
    padding: 16px;
    flex-basis: 191px;
    width: 191px;
    max-width: 191px;
}

.travellin-checkout .travellin-baggage-art {
    height: 64px;
    margin: 0 0 12px;
}

.travellin-checkout .travellin-baggage-art svg {
    width: 64px;
    height: 64px;
}

.travellin-checkout .travellin-baggage-grid {
    padding: 0;
}

.travellin-checkout .travellin-baggage-heading {
    margin: 0;
}

/*
 * The checked-luggage advice, as a notice.
 *
 * Reference: pale blue panel, text rgb(0, 113, 199), same 14px/20px as the
 * plain subtitle it replaces. Measured 2026-08-07 alongside the hand-luggage
 * caption, which stays plain — the two lines are not the same kind of thing.
 */
.travellin-checkout .travellin-baggage-subtitle--notice {
    padding: 12px 16px;
    border-radius: 8px;
    background: #eaf4fd;
    color: #0071c7;
}

/*
 * The baggage radio keeps its own appearance under the checkout's focus
 * styling.
 *
 * The shared rule for inputs in this checkout paints a filled background on
 * focus — sensible for a text field, wrong for a radio, which came out as a
 * blue square behind a pink dot. Measured live: background-color
 * rgb(4, 107, 210) on the focused radio. The control draws itself; only the
 * accent is ours to set.
 */
.travellin-checkout .travellin-baggage-radio,
.travellin-checkout .travellin-baggage-radio:focus,
.travellin-checkout .travellin-baggage-radio:focus-visible {
    background: transparent;
    box-shadow: none;
    outline: none;
    border: 0;
}

/*
 * The recalculation pulse, in the blue the specification named.
 *
 * #005EB8 is the figure from the brief, not a colour picked here. It is used
 * only for this moment — the widget's own accent stays pink for selection, so
 * the two never compete: pink means "this is your choice", blue means "the
 * sum is being redone".
 *
 * A sweep rather than a spinner. A spinner over a number that takes a fifth
 * of a second to add up reads as a failure; a bar that crosses the figure
 * once reads as an acknowledgement.
 */
.travellin-checkout .baggage-summary-bar {
    position: relative;
    overflow: hidden;
}

.travellin-checkout .baggage-summary-bar.is-recalculating::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #005eb8;
    transform-origin: left center;
    animation: tvl-baggage-recalc 220ms linear;
}

@keyframes tvl-baggage-recalc {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/*
 * Reduced motion: the sweep is decoration on top of a number that changes
 * anyway. Somebody who has asked the system for less movement gets the
 * number and none of the movement.
 */
@media (prefers-reduced-motion: reduce) {
    .travellin-checkout .baggage-summary-bar.is-recalculating::after {
        animation: none;
    }
}

/*
 * Mobile: one card per row, full width, comfortable for a thumb.
 *
 * The exact-dimension block above pins cards to 190px so they match the
 * reference on a desktop column. On a 360px phone that leaves a ragged half
 * column, so below the breakpoint the fixed width is released and each
 * option takes the full row — the same thing the specification asks a
 * dropdown to become when it turns into a bottom sheet: one target at a
 * time, sized for a thumb rather than a pointer.
 */
@media (max-width: 560px) {
    .travellin-checkout .travellin-baggage-card,
    .travellin-checkout .travellin-baggage-card.is-selected {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-height: 0;
    }

    .travellin-checkout .travellin-baggage-card .travellin-baggage-radio {
        width: 24px;
        height: 24px;
    }

    .travellin-checkout .travellin-baggage-panel {
        padding: 12px;
    }
}

/*
 * The two payments, told apart in the summary.
 *
 * Each block is a bounded card with its own total and its own button, so the
 * customer can see that paying one does not settle the other. They are the
 * same weight deliberately: neither payment is the main one, and styling the
 * flight as primary would suggest the stay is optional.
 */
.travellin-checkout .tvl-sum-part {
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid var(--tvl-field-border, #e5e4e5);
    border-radius: 8px;
    background: #fff;
}

.travellin-checkout .tvl-sum-part-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tvl-field-text, #1e0023);
}

.travellin-checkout .tvl-sum-part-note {
    margin: 4px 0 12px;
    font-size: 12px;
    line-height: 16px;
    color: #726e73;
}

.travellin-checkout .tvl-pay-button {
    width: 100%;
    margin: 0;
}

/* -------------------------------------------------------------------------
 * The per-flight wrapper, measured off the reference on 2026-08-07.
 *
 *   section         501 wide, content 469  → 16px each side
 *   leg wrapper     469 wide, padding 0 24px
 *   passenger box   421 wide, radius 8, padding 16, white, no border
 *
 * 469 − 48 = 421, which is where the box width comes from. Nothing here is
 * a round number chosen for looking right; they are the figures the original
 * computes to.
 * ------------------------------------------------------------------------- */
.travellin-checkout .travellin-baggage-leg {
    padding: 0 24px;
    margin: 0 0 8px;
}

.travellin-checkout .travellin-baggage-leg-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 12px;
}

.travellin-checkout .travellin-baggage-leg-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tvl-field-text, #1e0023);
}

.travellin-checkout .travellin-baggage-leg-route {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #726e73;
}

/*
 * The passenger accordion is that same white box: no border, the page behind
 * it does the separating.
 */
.travellin-checkout .travellin-baggage-section details {
    border: 0;
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 8px;
    background: #fff;
}

@media (max-width: 560px) {
    .travellin-checkout .travellin-baggage-leg {
        padding: 0;
    }
}

/* =========================================================================
 * THE FOUR REMAINING DIFFERENCES, MEASURED FROM BOTH LIVE PAGES
 * 2026-08-07, 50 properties compared, 42 already matched.
 *
 *   #02  section padding    16px      ours 0
 *   #03  section background white     ours transparent
 *   #17  leg wrapper margin  0        ours 0 0 8px
 *   #31  passenger box margin 0 0 12px ours 0 0 8px
 *
 * The first two are the container this whole section has been about: in the
 * reference the section IS a white card, and the passenger boxes are white
 * on white, separated only by their spacing. Ours floated on the page with
 * no card behind it, which is why the boxes read as detached panels rather
 * than as parts of one section.
 * ========================================================================= */

.travellin-checkout .travellin-baggage-section {
    padding: 16px;
    background: #fff;
    border-radius: 12px;
}

.travellin-checkout .travellin-baggage-leg {
    margin: 0;
}

.travellin-checkout .travellin-baggage-section details {
    margin: 0 0 12px;
}

/*
 * THE SEPARATION, MEASURED RATHER THAN GUESSED.
 *
 * White box on a white section reads as nothing at all — which is exactly
 * what shipped. The reference does not solve this with a border (measured:
 * "0px none") but with three stacked shadows, copied here verbatim from
 * getComputedStyle on the live passenger box:
 *
 *   rgba(0,0,0,.04) 0 10px 20px 0
 *   rgba(0,0,0,.04) 0 2px 10px 0
 *   rgba(0,0,0,.02) 0 0 4px 0
 *
 * The wide soft one gives the lift, the tight one the edge, the last the
 * hairline. A single shadow cannot do all three.
 */
.travellin-checkout .travellin-baggage-section details {
    box-shadow:
        0 10px 20px 0 rgba(0, 0, 0, 0.04),
        0 2px 10px 0 rgba(0, 0, 0, 0.04),
        0 0 4px 0 rgba(0, 0, 0, 0.02);
}

/*
 * DISPLAY, TAKEN BACK FROM THE THEME.
 *
 * Measured live: the passenger <details> computed to display:flex,
 * flex-direction:row — not from this file, which never sets it, but from a
 * theme rule matching the element. The summary and the card grid became
 * flex siblings, so "Passenger 1" sat to the LEFT of its own luggage and the
 * cards floated in the middle of an over-wide box.
 *
 * A <details> is a block: the summary is its heading and the content follows
 * underneath. Stated here so no theme can take it away again.
 */
.travellin-checkout .travellin-baggage-section details {
    display: block;
}

/*
 * The heading, with no disclosure marker.
 *
 * The reference has no marker because it has no <details> — measured:
 * querySelectorAll('details').length is 0 on that page. Ours keeps the
 * element for keyboard and screen-reader behaviour, so the marker has to
 * be turned off in three places: list-style for the standard ::marker,
 * the ::marker rule itself, and WebKit's own triangle pseudo-element.
 * Removing only one of the three leaves the arrow on some browsers.
 */
.travellin-checkout .travellin-baggage-section summary {
    display: block;
    width: 100%;
    list-style: none;
    cursor: pointer;
}

.travellin-checkout .travellin-baggage-section summary::marker {
    content: "";
}

.travellin-checkout .travellin-baggage-section summary::-webkit-details-marker {
    display: none;
}

/* =========================================================================
 * THE CARD, MEASURED ELEMENT BY ELEMENT AGAINST THE LIVE REFERENCE
 * 2026-08-07, cart 20F88EBC…, hand-luggage group, four cards.
 *
 * Everything below is a number read off getComputedStyle on that page, not
 * a value chosen here. Where the reference and this file already agreed —
 * 191x284, radius 8px, padding 16px, flex column, align-items center, the
 * 1px #e5e4e5 unselected border, 14px/400 title, 12px/400 #726e73 body —
 * nothing is restated.
 * ========================================================================= */

/*
 * VERTICAL CENTRING.
 *
 * Reference: justify-content center, and the proof is in the offsets — the
 * icon starts 38px below the card's top edge and the radio ends 38px above
 * its bottom. Ours packed everything to the top (icon at 12px), so a card
 * with fewer lines than its neighbour hung its radio in mid-air.
 */
.travellin-checkout .travellin-baggage-card {
    justify-content: center;
}

/*
 * Selected outline: 2px solid rgb(219, 0, 102). Ours was rgb(209, 10, 107).
 *
 * Both selectors are named on purpose. The colour is set in two places in
 * this file — once on .is-selected and once on :has(radio:checked) — and
 * :has() carries the specificity of its argument, so the :has rule scores
 * 0,4,0 against .is-selected's 0,3,0 and wins. Overriding only the class
 * changes nothing on screen, which is what happened on the first attempt.
 */
.travellin-checkout .travellin-baggage-card.is-selected,
.travellin-checkout .travellin-baggage-card:has(.travellin-baggage-radio:checked),
.travellin-checkout .travellin-baggage-card:has(input[type="radio"]:checked) {
    border: 2px solid #db0066;
}

/*
 * THE 8PX RHYTHM.
 *
 * Reference offsets from the card's top edge: icon 38-102, title at 110,
 * grey block 138-192, price at 200, radio at 228. Every gap is 8px, and it
 * is carried by a top margin on each element rather than by bottom margins,
 * so the last element never pushes the card's own padding open.
 */
.travellin-checkout .travellin-baggage-name {
    margin: 8px 0 0;
}

.travellin-checkout .travellin-baggage-desc {
    margin: 8px 0 0;
}

.travellin-checkout .travellin-baggage-dims {
    margin: 0;
}

.travellin-checkout .travellin-baggage-price {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #1e0023;
    background: none;
    padding: 0;
    border-radius: 0;
}

.travellin-checkout .travellin-baggage-fees {
    margin: 0;
}

/*
 * THE RADIO.
 *
 * Reference: 18x18 both states, transparent fill in both. Unselected is a
 * 1px hairline in rgb(135, 133, 135). Selected is not a dot drawn inside a
 * ring — it is the same 18px box with a 5px border in rgb(242, 0, 125),
 * which leaves an 8px white core. One property changes between the states,
 * so the control cannot jump when it is picked.
 *
 * Ours was 20x20 and drew the dot a different way.
 */
.travellin-checkout .travellin-baggage-card .travellin-baggage-radio,
.travellin-checkout .travellin-baggage-card input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex: 0 0 18px;
    margin: 8px 0 0;
    padding: 0;
    border: 1px solid #878587;
    border-radius: 50%;
    background: transparent;
}

.travellin-checkout .travellin-baggage-card .travellin-baggage-radio:checked,
.travellin-checkout .travellin-baggage-card input[type="radio"]:checked {
    border: 5px solid #f2007d;
    background: transparent;
}

/*
 * The pill is gone from the markup; this keeps any cached page that still
 * carries the class from showing a green box on a white card.
 */
.travellin-checkout .travellin-baggage-included {
    margin: 8px 0 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #1e0023;
    background: none;
    border-radius: 0;
}

/*
 * Grey body line-height: 18px. Ours computed to 16px, which is the one
 * remaining number out of 31 compared on the live pair. It matters more
 * than it sounds: the reference's description wraps to two lines plus the
 * dimensions, so a 2px error per line moves everything below it by 6px.
 */
.travellin-checkout .travellin-baggage-desc,
.travellin-checkout .travellin-baggage-dims,
.travellin-checkout .travellin-baggage-fees {
    line-height: 18px;
}

/*
 * The chevron goes. It was mine, not the reference's — a 10px box with two
 * borders rotated 45deg, added when the passenger panels were meant to be
 * closed. They open by default now, and the reference has no marker of any
 * kind next to "Passenger 1", so the arrow is a mark the original does not
 * carry. Hidden rather than deleted: the rule above still governs it, and
 * a future closed-by-default variant only has to unset this one line.
 */
.travellin-checkout .travellin-baggage-passenger-name::after {
    display: none;
}

/* =========================================================================
 * THE COLLAPSED PASSENGER ROW, AND THE CHECKED-LUGGAGE CARD
 * Measured 2026-08-07 on a live cart, both groups side by side.
 * ========================================================================= */

/*
 * Name on the left, state on the right, one row 40px tall. Measured:
 * flex row 437 x 40, label 16px/700 rgb(30,0,35), state lines 14px/400
 * rgb(114,110,115).
 */
.travellin-checkout .travellin-baggage-section summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.travellin-checkout .travellin-baggage-passenger-label {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #1e0023;
}

.travellin-checkout .travellin-baggage-passenger-state {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #726e73;
    text-align: right;
}

/*
 * An open panel already shows the cards, so repeating the choice above them
 * would say the same thing twice. The reference hides it for the same
 * reason — its expanded passenger row carries the name alone.
 */
.travellin-checkout .travellin-baggage-passenger[open] > summary .travellin-baggage-passenger-state {
    display: none;
}

/*
 * CHECKED LUGGAGE: THE NARROW CARD.
 *
 * Four options have to fit where hand luggage fits two, so every measurement
 * changes. All of these are read off the live reference:
 *
 *   card 97 x 274, radius 4px, 1px #e5e4e5, padding 16px
 *   justify-content space-between  (not centre — the row of four must align
 *                                   its titles, prices and radios across
 *                                   cards of unequal text length)
 *   row gap 16px
 *   illustration 60 x 60
 *   title  16px / 700  #1e0023
 *   price  14px / 400  #726e73
 *   fee    12px / 400  #726e73
 */
.travellin-checkout .travellin-baggage-section--checked .travellin-baggage-grid {
    gap: 16px;
}

.travellin-checkout .travellin-baggage-section--checked .travellin-baggage-card {
    flex: 1 1 97px;
    min-height: 274px;
    border-radius: 4px;
    justify-content: space-between;
}

.travellin-checkout .travellin-baggage-section--checked .travellin-baggage-card svg,
.travellin-checkout .travellin-baggage-section--checked .travellin-baggage-art svg {
    width: 60px;
    height: 60px;
}

.travellin-checkout .travellin-baggage-section--checked .travellin-baggage-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #1e0023;
}

.travellin-checkout .travellin-baggage-section--checked .travellin-baggage-price {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #726e73;
}

.travellin-checkout .travellin-baggage-section--checked .travellin-baggage-fees {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #726e73;
}

/* =========================================================================
 * THE FLIGHT PAYMENT GATE AND ITS CONFIRMATION
 * ========================================================================= */

/*
 * The line that stands where the second button will be. It has to read as a
 * sequence rather than as a fault, so it keeps the summary's own type and
 * sits in the space the button would occupy — nothing shifts when the button
 * finally appears.
 */
.travellin-checkout .tvl-sum-gate {
    margin: 12px 0 0;
    padding: 12px;
    font-size: 13px;
    line-height: 18px;
    color: #726e73;
    background: #f7f7f7;
    border-radius: 8px;
    text-align: center;
}

.tvl-paid-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(30, 0, 35, 0.55);
    overflow-y: auto;
}

/*
 * max-height with its own scroll: this text is long, and on a short laptop
 * window a dialog taller than the viewport puts its own button off screen —
 * the customer would be left with a confirmation they cannot dismiss.
 */
.tvl-paid-dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow:
        0 10px 20px 0 rgba(0, 0, 0, 0.08),
        0 2px 10px 0 rgba(0, 0, 0, 0.06);
}

.tvl-paid-dialog:focus {
    outline: none;
}

.tvl-paid-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    color: #1e0023;
}

.tvl-paid-subtitle {
    margin: 20px 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #1e0023;
}

.tvl-paid-text {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: #1e0023;
}

/*
 * The supplier notice is set apart because it is a different kind of
 * sentence — a legal condition rather than an instruction — and a reader
 * skimming for "what do I do next" should be able to tell them apart.
 */
.tvl-paid-note {
    margin: 20px 0 16px;
    padding: 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: #726e73;
    background: #f7f7f7;
    border-radius: 8px;
}

.tvl-paid-button {
    width: 100%;
    margin: 8px 0 0;
}

@media (max-width: 560px) {
    .tvl-paid-dialog {
        padding: 16px;
    }

    .tvl-paid-title {
        font-size: 19px;
        line-height: 25px;
    }
}

/* ── Price-hold last call ───────────────────────────────────────────────
 *
 * The dialog that opens for the final thirty seconds of a price hold.
 * Geometry is deliberately identical to .tvl-paid-* above — same overlay
 * tint, same panel width, same radius and shadow — because the two dialogs
 * appear in the same flow and a customer who has seen one should recognise
 * the other. What differs is the colour of the count, which is the warning
 * amber the price-lock line already switches to at five minutes, so the
 * modal reads as the same warning escalating rather than a new one.
 *
 * The panel is short by design (four lines and two buttons), so unlike
 * .tvl-paid-dialog it needs no max-height scroll of its own.
 */
.tvl-lastcall-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(30, 0, 35, 0.55);
}

.tvl-lastcall-dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: 460px;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    box-shadow:
        0 10px 20px 0 rgba(0, 0, 0, 0.08),
        0 2px 10px 0 rgba(0, 0, 0, 0.06);
}

.tvl-lastcall-dialog:focus {
    outline: none;
}

.tvl-lastcall-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    color: #1e0023;
}

.tvl-lastcall-text {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 22px;
    color: #4a3d4f;
}

/*
 * Tabular figures so the number does not shift the panel as it counts down
 * from 30 to 9 — a dialog that jitters once a second reads as broken.
 */
.tvl-lastcall-count {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
    font-variant-numeric: tabular-nums;
    color: var(--travellin-warning-text, #78350f);
}

.tvl-lastcall-note {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 19px;
    color: var(--travellin-muted, #64748b);
}

.tvl-lastcall-reload {
    width: 100%;
}

/*
 * The secondary action is a link-weight button, not a second filled one:
 * two equal buttons ask the customer to weigh them, and only one of these
 * is the answer.
 */
.tvl-lastcall-dismiss {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 8px;
    background: none;
    border: 0;
    font-size: 14px;
    line-height: 20px;
    color: #4a3d4f;
    text-decoration: underline;
    cursor: pointer;
}

.tvl-lastcall-dismiss:hover,
.tvl-lastcall-dismiss:focus-visible {
    color: #1e0023;
}

@media (max-width: 480px) {
    .tvl-lastcall-dialog {
        padding: 20px 16px;
    }

    .tvl-lastcall-count {
        font-size: 28px;
        line-height: 34px;
    }
}