/* ======================================================= */
/* NEW DESIGN SYSTEM */
/* ======================================================= */

[hidden] {
    display: none !important;
}

html.eridura-preferences-prepaint .quick-lang,
html.eridura-preferences-prepaint .pill--currency {
    visibility: hidden;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}



:root {
    /* Colors */
    --color-primary: #1A73E8;
    /* New, accessible brand blue for solid buttons */
    --color-primary-dark: #185ABC;
    /* For hover states on primary buttons */
    --color-accent: #2F80ED;
    /* Your original, lighter blue for secondary elements */
    --color-background: #F8F9FA;
    /* The light grey for the page body */
    --color-surface: #FFFFFF;
    /* Pure white for cards, inputs, etc. */
    --color-text-primary: #212529;
    /* Dark, readable text */
    --color-text-secondary: #5F6368;
    /* Lighter text for labels, subtitles */
    --color-border: #E0E0E0;
    /* Subtle borders */
    /* Typography & Layout */
    --font-family: 'Inter', sans-serif;
    --container-width: 1200px;
    --border-radius: 8px;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Global Body Styles */
body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    margin: 0;
    padding-top: 64px;
    /* Offset for the new fixed header */
}

.trip-sections {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-top: 40px;
}

.or-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #555;
    margin: 40px auto;
    max-width: 600px;
}

.or-divider hr {
    flex-grow: 1;
    height: 1px;
    border: none;
    background-color: #ccc;
}


/*------------------------------------*\ #BUDGET CONTAINER (BLUE CARD) \*------------------------------------*/
.budget-container {
    background-color: #4285F4;
    color: #fff;
    padding: 30px;
    border-radius: 20px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    width: 650px;
}

.budget-container h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
}

.budget-container .search-box {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    height: 55px;
}

.budget-container .currency-icon {
    background-color: #e2edff;
    color: #3367d6;
    font-size: 18px;
    font-weight: bold;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 100%;
    border-right: 1px solid #d0e0f0;
    border-radius: 10px 0 0 10px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s;
}

.budget-container .budget-input {
    border: none;
    outline: none;
    padding: 0 20px;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    flex-grow: 1;
    height: 100%;
}

.budget-container .budget-input::-webkit-outer-spin-button,
.budget-container .budget-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.budget-container .search-btn {
    background-color: #4285F4;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    height: 90%;
    min-width: 100px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.budget-container .search-btn:hover {
    background-color: #3367D6;
}

/* Passenger & Date Inputs for .budget-container */
.budget-container .extra-inputs {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 20px;
    align-items: flex-end;
}

.budget-container .passenger-wrapper {
    position: relative;
    display: inline-block;
}

.budget-container .passenger-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #a0c3ff;
    border-radius: 8px;
    padding: 10px 14px;
    /* Height implicitly set by padding & content */
    width: 160px;
    background-color: #fff;
    font-size: 16px;
    cursor: pointer;
    color: #1F2937;
    transition: box-shadow 0.2s ease;
}

.budget-container .passenger-button:hover {
    box-shadow: 0 0 5px rgba(66, 133, 244, 0.3);
}

.budget-container .passenger-button .material-icons-outlined {
    font-size: 20px;
    color: #5F6368;
}

.budget-container .passenger-button .label {
    flex: 1;
    margin-left: 10px;
}

.budget-container .passenger-button .arrow {
    margin-left: auto;
}

.budget-container .passenger-dropdown {
    /* Specific to budget container's dropdown */
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 260px;
    z-index: 100;
    /* Ensure this is less than widget dropdown if they can overlap */
}

.budget-container .passenger-dropdown label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    font-size: 15px;
    color: #333;
}

.budget-container .passenger-dropdown input {
    width: 70px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
}

.budget-container .date-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.budget-container .date-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    color: white;
}

.budget-container .date-input {
    padding: 10px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    min-width: 140px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #1F2937;
}

.budget-container .date-input::placeholder {
    color: #6c757d;
}



/*-----------------------------------------------------------------------------------*\ #FLIGHT-SEARCH-WIDGET (NEW GREY CARD - uses #4285F4 ACCENT) This replaces/evolves the old .manual-trip-card styling for this specific widget. \*-----------------------------------------------------------------------------------*/
:root {
    --widget-bg: #F8F9FA;
    --widget-surface-bg: #FFFFFF;
    --widget-text-primary: #212529;
    --widget-text-secondary: #5F6368;
    --widget-border-color: #DADCE0;
    --widget-accent-blue: #4285F4;
    --widget-accent-hover-bg: #3367D6;
    --widget-focus-ring-shadow: 0 0 0 1px var(--widget-accent-blue);
    /* Simplified focus */
    --widget-input-hover-border: #A8C5F7;
    --widget-hover-bg: #F1F3F4;
}

/* Base for the new widget. This element might also have class .manual-trip-card */
/* Properties from old .manual-trip-card are merged or overridden here */
#flight-search-module {
    background-color: var(--widget-bg);
    /* Override from old .manual-trip-card if needed */
    color: var(--widget-text-primary);
    /* Override from old .manual-trip-card */
    padding: 20px 24px;
    /* Specific padding for this widget */
    border-radius: 8px;
    /* Specific radius */
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    /* Google style shadow */
    max-width: 950px;
    /* Override max-width from .manual-trip-card */
    width: 100%;
    font-family: 'Inter', 'Roboto', sans-serif;
    margin: 30px auto;
    /* Center it if it's a standalone component */
    position: relative;
    /* For absolute positioned children like dropdowns */
    z-index: 2;
    /* Ensure it's above default flow, but popups will need higher */
}

/* If .manual-trip-card:hover is still desired for this new widget, it would need to be: #flight-search-module:hover { box-shadow: 0 16px 36px rgba(0,0,0,0.1); } But the new shadow is already quite prominent. */
.flight-search-widget {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.flight-search-widget .widget-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Top Controls */
.flight-search-widget .top-controls {
    padding-bottom: 12px;
}

.flight-search-widget .control-group {
    position: relative;
}

.flight-search-widget .widget-select,
.flight-search-widget .passenger-input-trigger {
    background-color: var(--widget-surface-bg);
    color: var(--widget-text-primary);
    border: 1px solid var(--widget-border-color);
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    height: 38px;
    display: flex;
    align-items: center;
}

.flight-search-widget .widget-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235F6368' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}

.flight-search-widget .widget-select:hover,
.flight-search-widget .passenger-input-trigger:hover {
    border-color: var(--widget-input-hover-border);
    background-color: var(--widget-hover-bg);
}

.flight-search-widget .widget-select:focus,
.flight-search-widget .passenger-input-trigger:focus {
    outline: none;
    border-color: var(--widget-accent-blue);
    box-shadow: var(--widget-focus-ring-shadow);
}

.flight-search-widget .passenger-input-trigger {
    gap: 6px;
}

.flight-search-widget .passenger-input-trigger > .material-icons-outlined:first-child,
.flight-search-widget .field-icon {
    color: #0d6efd;
}

.flight-search-widget .passenger-input-trigger .arrow-down {
    font-size: 20px;
    color: var(--widget-text-secondary);
}

/* Widget Passenger Dropdown */
.flight-search-widget .passenger-control-group {
    position: relative;
}

.flight-search-widget .widget-passenger-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background-color: var(--widget-surface-bg);
    border: 1px solid var(--widget-border-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 16px;
    width: 280px;
    z-index: 1010;
    /* Higher than widget base */
    color: var(--widget-text-primary);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.flight-search-widget .passenger-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flight-search-widget .passenger-type label {
    font-size: 14px;
}

.flight-search-widget .passenger-type label small {
    color: var(--widget-text-secondary);
    font-size: 12px;
}

.flight-search-widget .passenger-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.flight-search-widget .passenger-stepper .stepper-btn {
    background-color: var(--widget-hover-bg);
    color: var(--widget-text-secondary);
    border: 1px solid transparent;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flight-search-widget .passenger-stepper .stepper-btn:hover {
    background-color: #E8EAED;
    color: var(--widget-text-primary);
}

.flight-search-widget .passenger-stepper .stepper-btn:active {
    background-color: #DDE1E5;
}

.flight-search-widget .passenger-stepper .stepper-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent;
}

.flight-search-widget .passenger-stepper input[type="number"] {
    width: 30px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--widget-text-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 0;
}

.flight-search-widget .passenger-stepper input[type="number"]::-webkit-outer-spin-button,
.flight-search-widget .passenger-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.flight-search-widget .passenger-done-btn {
    background-color: var(--widget-accent-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-end;
    margin-top: 8px;
    transition: background-color 0.15s;
}

.flight-search-widget .passenger-done-btn:hover {
    background-color: var(--widget-accent-hover-bg);
}

/* Main Inputs */
.flight-search-widget .main-inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto auto;
    /* Origin, Swap, Dest, Date, Date */
    gap: 10px;
    align-items: stretch;
}

.flight-search-widget .input-field-group {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--widget-surface-bg);
    border: 1px solid var(--widget-border-color);
    border-radius: 4px;
    flex-grow: 1;
    min-width: 150px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.flight-search-widget .input-field-group:hover {
    border-color: var(--widget-input-hover-border);
    background-color: var(--widget-hover-bg);
}

.flight-search-widget .input-field-group:focus-within {
    border-color: var(--widget-accent-blue);
    box-shadow: var(--widget-focus-ring-shadow);
    background-color: var(--widget-surface-bg);
}

.flight-search-widget .origin-field,
.flight-search-widget .destination-field {
    flex-basis: 30%;
}

.flight-search-widget .date-field {
    flex-basis: 20%;
    min-width: 160px;
}

.flight-search-widget .widget-input {
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 12px 10px 8px;
    font-size: 15px;
    color: var(--widget-text-primary);
    width: 100%;
    height: 36px;
    box-sizing: border-box;
}

.flight-search-widget .widget-input::placeholder {
    color: var(--widget-text-secondary);
    opacity: 1;
}

.flight-search-widget .widget-date-input[type="text"] {
    color: var(--widget-text-secondary);
}

.flight-search-widget .widget-date-input[type="date"] {
    color: var(--widget-text-primary);
}

.flight-search-widget .widget-date-input::-webkit-calendar-picker-indicator {
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s;
    padding-right: 4px;
}

.flight-search-widget .widget-date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.flight-search-widget .field-icon {
    padding-left: 12px;
    font-size: 20px;
}

.flight-search-widget .icon-btn {
    background: transparent;
    border: none;
    color: var(--widget-text-secondary);
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
    height: 38px;
    width: 38px;
}

.flight-search-widget .icon-btn:hover {
    background-color: var(--widget-hover-bg);
    color: var(--widget-text-primary);
}

.flight-search-widget .swap-btn {
    margin: 0 -5px;
}

/* Autocomplete */
.flight-search-widget .widget-autocomplete {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background-color: var(--widget-surface-bg);
    border: 1px solid var(--widget-border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    /* Ensure below passenger dropdown if they could overlap */
    max-height: 250px;
    overflow-y: auto;
}

.flight-search-widget .widget-autocomplete div {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--widget-text-primary);
    border-bottom: 1px solid var(--widget-hover-bg);
}

.flight-search-widget .widget-autocomplete div:last-child {
    border-bottom: none;
}

.flight-search-widget .widget-autocomplete div:hover,
.flight-search-widget .widget-autocomplete div.autocomplete-active {
    background-color: var(--widget-hover-bg);
}

.flight-search-widget .widget-autocomplete div strong {
    font-weight: 500;
}

.flight-search-widget .widget-autocomplete div small {
    color: var(--widget-text-secondary);
}

/* Action Button */
.flight-search-widget .action-row {
    justify-content: flex-end;
    padding-top: 8px;
}

.flight-search-widget .explore-btn {
    background-color: var(--widget-accent-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0 24px;
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.flight-search-widget .explore-btn:hover {
    background-color: var(--widget-accent-hover-bg);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 2px 1px -1px rgba(0, 0, 0, 0.1);
}

.flight-search-widget .explore-btn .material-icons-outlined {
    font-size: 20px;
}

/* Flight Results */
.flight-search-widget .results-placeholder {
    text-align: center;
    color: var(--widget-text-secondary);
    font-size: 14px;
    padding: 20px 0;
}

.flight-search-widget .flight-offer-card {
    border: 1px solid var(--widget-border-color);
    border-radius: 8px;
    padding: 15px;
    background-color: var(--widget-surface-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--widget-text-primary);
    margin-bottom: 15px;
}

.flight-search-widget .flight-offer-card strong {
    color: var(--widget-text-primary);
    font-size: 1.4em;
    font-weight: 500;
}

.flight-search-widget .flight-offer-card .price-currency {
    font-size: 0.9em;
    color: var(--widget-text-secondary);
}

.flight-search-widget .flight-offer-card .seats-left {
    font-size: 0.9em;
    color: var(--widget-text-secondary);
}

.flight-search-widget .flight-offer-card .itinerary {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.flight-search-widget .flight-offer-card .itinerary:not(:last-child) {
    border-bottom: 1px dashed var(--widget-hover-bg);
}

.flight-search-widget .flight-offer-card .itinerary-type {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 1.05em;
}

.flight-search-widget .flight-offer-card .itinerary-duration {
    font-weight: normal;
    font-size: 0.9em;
    color: var(--widget-text-secondary);
}

.flight-search-widget .flight-offer-card .segment {
    border-left: 3px solid var(--widget-accent-blue);
    padding-left: 10px;
    margin-bottom: 8px;
}

.flight-search-widget .flight-offer-card .segment p {
    margin: 4px 0;
    line-height: 1.4;
}

.flight-search-widget .flight-offer-card .segment .location-code {
    font-weight: 500;
}

.flight-search-widget .flight-offer-card .segment .location-datetime {
    font-size: 0.9em;
    color: var(--widget-text-secondary);
}

.flight-search-widget .flight-offer-card .segment .airline-info {
    font-size: 0.95em;
}

.flight-search-widget .flight-offer-card .segment .aircraft-info {
    font-size: 0.9em;
    color: var(--widget-text-secondary);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .flight-search-widget .main-inputs {
        grid-template-columns: 1fr;
    }

    .flight-search-widget .swap-btn {
        grid-row: 2;
        margin: 5px auto;
    }

    .flight-search-widget .top-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .flight-search-widget .action-row {
        justify-content: center;
    }

    #flight-search-module {
        padding: 15px;
    }

    .flight-search-widget .explore-btn {
        width: 100%;
        justify-content: center;
    }

    .budget-container {
        width: auto;
        margin-left: 15px;
        margin-right: 15px;
    }

    .currency-popup {
        width: 95%;
    }
}

/* LEGACY/OTHER .manual-trip-card styles (if used for a *different* component than #flight-search-module) */
/* If .manual-trip-card is ONLY used as the base class for #flight-search-module, these might be redundant or need careful merging. */
/* For now, keeping them separate as they define a simpler white card. */
.manual-trip-card {
    /* This refers to the original simpler white card, not #flight-search-module */
    background-color: #FFFFFF;
    padding: 32px 36px;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    width: 100%;
    position: relative;
    /* z-index conflicts if this is the same element as #flight-search-module */
    z-index: 1;
    color: #1F2937;
}

.manual-trip-card:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.manual-trip-card input[type="text"],
.manual-trip-card input[type="date"] {
    width: 100%;
    min-width: 200px;
}

.manual-trip-card input:focus {
    outline: none;
    border-color: #4a90e2;
    /* Different blue from widget */
    box-shadow: 0 0 4px rgba(74, 144, 226, 0.3);
}

/* styles.css */
/* --- START: PASSENGER DETAILS FORM STYLES --- */
#passenger-details-container {
    background-color: var(--widget-bg, #F8F9FA);
    /* Use your variable, with a fallback */
    color: var(--widget-text-primary, #212529);
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    max-width: 950px;
    width: 100%;
    margin: 30px auto;
}

#passenger-form h3 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--widget-border-color, #DADCE0);
}

.form-section,
.passenger-form-section {
    margin-bottom: 20px;
}

.passenger-form-section {
    padding: 20px;
    border: 1px solid var(--widget-border-color, #DADCE0);
    border-radius: 8px;
    background-color: var(--widget-surface-bg, #FFFFFF);
}

.passenger-title {
    font-size: 18px;
    color: var(--widget-accent-blue, #4285F4);
    margin-top: 0;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
    gap: 20px;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
    min-width: 200px;
    /* Helps with wrapping */
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--widget-text-secondary, #5F6368);
}

/* Reusing your input styles for consistency */
.form-input,
.form-select {
    background: transparent;
    border: 1px solid var(--widget-border-color, #DADCE0);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 15px;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--widget-accent-blue, #4285F4);
    box-shadow: var(--widget-focus-ring-shadow, 0 0 0 1px #4285F4);
}

.contact-section p {
    font-size: 14px;
    color: #666;
    margin-top: -15px;
    margin-bottom: 15px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--widget-border-color, #DADCE0);
}

/* Define a new style for the cancel button */
.back-btn {
    background: var(--widget-surface-bg, #FFFFFF);
    border: 1px solid var(--widget-border-color, #DADCE0);
    color: var(--widget-text-primary, #212529);
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s;
}

.back-btn:hover {
    background-color: var(--widget-hover-bg, #F1F3F4);
}

/* --- END: PASSENGER DETAILS FORM STYLES --- */
/* Add these two new rules to the end of your file */
.view-active {
    display: block !important;
}

.view-hidden {
    display: none !important;
}

/* --- START: VALIDATION ERROR STYLES --- */
/* Style for the container that will hold the list of errors */
.form-error-summary {
    background-color: #FFF0F0;
    /* Light red background */
    border: 1px solid #D32F2F;
    /* Red border */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    color: #444;
}

.form-error-summary h4 {
    margin-top: 0;
    color: #D32F2F;
    /* Red title */
}

.form-error-summary ul {
    margin: 0;
    padding-left: 20px;
}

/* This class will be added by JavaScript to any input field that fails validation */
.input-error {
    border-color: #D32F2F !important;
    box-shadow: 0 0 0 1px #D32F2F !important;
}

/* --- END: VALIDATION ERROR STYLES --- */
/* --- START: RESPONSIVE & MOBILE STYLES --- */
/* This media query targets all screens that are 768px wide or smaller (most tablets and all phones) */
@media (max-width: 768px) {

    /* --- General Layout & Typography --- */
    body {
        -webkit-text-size-adjust: 100%;
        /* Prevents iOS from zooming in on text */
    }

    .trip-sections {
        margin-top: 20px;
        gap: 20px;
    }

    /* Make the language switcher less intrusive on small screens */
   

    /* --- Budget Container --- */
    .budget-container {
        width: auto;
        /* Allow it to shrink */
        margin-left: 15px;
        margin-right: 15px;
        padding: 20px;
    }

    .budget-container h2 {
        font-size: 24px;
        /* Make title smaller */
    }

    .budget-container .search-box {
        flex-direction: column;
        /* Stack the input and button vertically */
        height: auto;
        gap: 10px;
    }

    .budget-container .budget-input {
        width: 100%;
        box-sizing: border-box;
        /* Ensure padding is included in width */
        height: 50px;
        text-align: center;
    }

    .budget-container .search-btn {
        width: 100%;
        height: 45px;
        margin: 0;
    }

    .budget-container .extra-inputs {
        flex-direction: column;
        /* Stack passenger and date inputs */
        align-items: stretch;
        /* Make them all full width */
        gap: 12px;
    }

    .budget-container .passenger-button {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Main Flight Search Widget --- */
    #flight-search-module {
        margin-left: 15px;
        margin-right: 15px;
        padding: 15px;
    }

    .flight-search-widget .top-controls {
        flex-direction: column;
        /* Stack trip type, passengers, class */
        align-items: stretch;
        gap: 10px;
    }

    .flight-search-widget .main-inputs {
        /* This was already a grid, let's adjust it for mobile */
        grid-template-columns: 1fr;
        /* Each input gets its own row */
        gap: 10px;
    }

    .flight-search-widget .swap-btn {
        /* The swap button was between inputs, let's place it smartly */
        grid-row: 2;
        /* Put it on the second row */
        margin: -5px auto 5px;
        /* Center it between origin and destination */
        transform: rotate(90deg);
        /* Rotate it to signify up/down swap */
    }

    .flight-search-widget .destination-field {
        grid-row: 3;
        /* Ensure destination is on the third row */
    }

    /* --- Passenger Details Form --- */
    #passenger-details-container {
        margin-left: 15px;
        margin-right: 15px;
    }

    .form-row {
        flex-direction: column;
        /* Stack form fields vertically */
        gap: 12px;
    }
}

/* --- END: RESPONSIVE & MOBILE STYLES --- */
/* --- START: RICH FLIGHT OFFER STYLES --- */
.flight-offer-card.rich-offer {
    padding: 0;
    border: 1px solid #DADCE0;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    /* Ensures child elements don't break the border radius */
}

/* styles.css */
.rich-offer .offer-main {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    /* Creates space between elements */
    padding: 1rem;
}

.rich-offer .airline-logo {
    flex-shrink: 0;
    /* Prevents logo from shrinking */
    width: 100px;
    text-align: center;
}

.rich-offer .itinerary-details {
    flex-grow: 1;
    /* Allows this section to take up the most space */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rich-offer .itinerary-main-line,
.itinerary-sub-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.rich-offer .itinerary-main-line {
    font-weight: 600;
    font-size: 1.2rem;
}

.rich-offer .itinerary-sub-line {
    font-size: 0.9rem;
    color: #5F6368;
}

/* We keep the price section styling as it was, it's good */
.rich-offer .price-section {
    text-align: right;
    flex-shrink: 0;
}

.rich-offer .price-section {
    text-align: right;
}

.rich-offer .price {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
}

.rich-offer .price-info {
    font-size: 0.8rem;
    color: #5F6368;
    margin-bottom: 0.5rem;
}

.rich-offer .select-flight-btn {
    /* Re-using your existing button style, but ensuring it's correct */
    background-color: var(--widget-accent-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.rich-offer .offer-details {
    background-color: #F8F9FA;
    font-size: 0.9rem;
}

.rich-offer .offer-details summary {
    cursor: pointer;
    padding: 0.5rem 1rem;
    background-color: #F1F3F4;
    border-top: 1px solid #DADCE0;
}

.rich-offer .offer-details summary:hover {
    background-color: #E8EAED;
}

.rich-offer .details-content {
    padding: 1rem;
}

.rich-offer .itinerary-leg {
    margin-top: 1rem;
    border-top: 1px dashed #ccc;
    padding-top: 1rem;
}

.rich-offer .itinerary-leg:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* --- END: RICH FLIGHT OFFER STYLES --- */
/* --- START: LAYOVER STYLES --- */
.rich-offer .segment {
    padding-left: 15px;
    border-left: 3px solid #4285F4;
    /* Blue line for flight legs */
    padding-top: 5px;
    padding-bottom: 5px;
}

.rich-offer .layover {
    padding-left: 15px;
    border-left: 3px dashed #9E9E9E;
    /* Grey dashed line for layovers */
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.9em;
    font-style: italic;
    color: #5F6368;
}

.rich-offer .layover p,
.rich-offer .segment p {
    margin: 0;
}

/* --- END: LAYOVER STYLES --- */
/* --- START: CORRECTED FLIGHT OFFER STYLES --- */
.rich-offer .offer-itineraries {
    flex-grow: 1;
    /* Allows this section to take up available space */
}

.rich-offer .itinerary-summary {
    display: grid;
    grid-template-areas: "route route" "time stops" "carrier duration";
    grid-gap: 4px 1rem;
    align-items: center;
    font-size: 0.9rem;
    color: #5F6368;
}

/* A simple divider for round trips */
.itinerary-divider {
    border: none;
    border-top: 1px solid #E8EAED;
    margin: 0.75rem 0;
}

/* --- END: CORRECTED FLIGHT OFFER STYLES --- */
.flight-search-widget .widget-input {
    /* These three properties work together to add the '...' */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add to styles.css */
/* Add to styles.css to make the filter sidebar a distinct "card" */
/* Add some spacing to the top of the "Available Flights" title */
#flight-results-content h3 {
    margin-top: 0;
}

/* Add to styles.css */
select option:disabled {
    color: #cccccc;
}

/* Add to the end of styles.css */
.stops-direct {
    color: #2E7D32;
    /* A clear, dark green */
    font-weight: 500;
}

.stops-layover {
    color: #EF6C00;
    /* A noticeable but friendly amber/orange */
    font-weight: 500;
}

/* Add these definitive layout rules to the end of styles.css */
/* This turns the container into a flexbox, creating the columns */
/* This styles the left column (sidebar) */
/* ADD THIS BLOCK TO THE END OF STYLES.CSS */
/* This rule targets the main container and makes it a flexbox */
/* This rule styles the left column (the filter sidebar) */
/* This rule styles the right column (the flight list) */
#flight-results-content {
    flex-grow: 1;
    /* Allows this column to take up the remaining space */
}

/* =================================================================== */
/* DEFINITIVE FLIGHT RESULTS LAYOUT */
#widget-flight-results-area {
    max-width: 950px;
    width: 100%;
    margin: 30px auto;
}

/* This rule targets the LEFT column (the filter sidebar). */
#filter-sidebar {
    width: 220px;
    flex-shrink: 0;
    /* This prevents the sidebar from shrinking */
    background-color: var(--widget-surface-bg);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--widget-border-color);
}

/* This rule targets the RIGHT column (the list of flights). */
#flight-results-content {
    flex-grow: 1;
    /* This allows the results list to take up all remaining space */
}

/* ------------------------------------------------------------------- Two-column layout for Filters + Results ------------------------------------------------------------------- */
/* 1) Outer wrapper becomes a flex container with some breathing room */
#widget-flight-results-area {
    display: flex;
    gap: 24px;
    /* space between sidebar & list */
    align-items: flex-start;
    /* align both items at the top */
    max-width: 950px;
    /* match your search widget width */
    width: 100%;
    margin: 32px auto 0;
    /* 32px top margin, center horizontally */
}

/* 2) Filter sidebar: fixed width “card” that flows normally */
#filter-sidebar {
    width: 220px;
    flex-shrink: 0;
    /* never shrink */
    background-color: var(--widget-surface-bg, #FFF);
    border: 1px solid var(--widget-border-color, #DADCE0);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px rgba(60, 64, 67, 0.15);
    position: relative;
    /* remove any “sticky” behavior */
    top: auto;
}

/* 3) Results column: fills remaining space */
#flight-results-content {
    flex-grow: 1;
}

/* 4) Tidy up your “Available Flights” heading */
#flight-results-content h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

/* =================================================================== */
/* DEFINITIVE, PERMANENT TWO-COLUMN LAYOUT */
/* This is the only block needed. Add it to the end of styles.css. */
/* =================================================================== */
/* This rule targets the main container and makes it a permanent flexbox. */
#widget-flight-results-area {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    /* These rules align it with the search widget above it */
    max-width: 950px;
    width: 100%;
    margin: 30px auto;
}

/* This rule permanently styles the LEFT column (the filter sidebar). */
#widget-flight-results-area>#filter-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #FFFFFF;
}

/* This rule permanently styles the RIGHT column (the flight list). */
#widget-flight-results-area>#flight-results-content {
    flex-grow: 1;
    /* Allows this column to take up remaining space */
}

/* Add this to the end of styles.css. This will be our only visibility utility. */
.hidden {
    display: none;
}

/* 2. Main Module Widths (Wider Layout) */
#flight-search-module,
#widget-flight-results-area {
    max-width: 1100px;
    /* Increased width for a more spacious feel */
}

/* 3. Main Results Container */
#widget-flight-results-area {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    margin: 30px auto;
}

/* New Search Button Styling */
#new-search-btn {
    position: absolute;
    top: -50px;
    /* Position it above the results area */
    left: 0;
}

/* 4. Left Column (Filter Sidebar) */
#filter-sidebar {
    width: 240px;
    /* Slightly wider for balance */
    flex-shrink: 0;
    background-color: var(--widget-surface-bg, #FFF);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--widget-border-color, #DADCE0);
    position: sticky;
    /* Makes the sidebar stick on scroll */
    top: 20px;
}

#filter-sidebar h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

#filter-airlines-checklist .checklist-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

#filter-airlines-checklist .checklist-item input {
    margin-right: 0.5rem;
}

/* 5. Right Column (Flight List) */
#flight-results-content {
    flex-grow: 1;
}

#flight-results-content>h3 {
    /* Target only the direct h3 child */
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

/* 6. NEW: Confirmation/Price Review Card Styling */
.confirmation-container {
    background-color: var(--widget-surface-bg, #FFF);
    border: 1px solid var(--widget-border-color, #DADCE0);
    border-radius: 8px;
    padding: 24px;
}

.confirmation-container h3 {
    margin-top: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--widget-border-color, #DADCE0);
}

.price-summary {
    background-color: var(--widget-bg, #F8F9FA);
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-summary p {
    margin: 0;
    font-size: 1.1rem;
}

.price-summary .total {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--widget-text-primary);
}

.confirmation-container .form-actions {
    justify-content: space-between;
    margin-top: 20px;
    border-top: 1px solid var(--widget-border-color, #DADCE0);
    padding-top: 20px;
}

/* 7. Responsive adjustments */
@media (max-width: 768px) {
    #widget-flight-results-area {
        flex-direction: column;
    }

    #filter-sidebar {
        width: 100%;
        position: static;
        /* Disable sticky sidebar on mobile */
        box-sizing: border-box;
    }

    #new-search-btn {
        position: relative;
        top: 0;
        margin-bottom: 20px;
    }
}

/* Add to the end of styles.css */
#payment-form {
    display: flex;
    flex-direction: column;
}

#payment-form #submit-payment-btn {
    align-self: center;
    /* This centers the button */
    padding-left: 40px;
    /* Give it some nice horizontal padding */
    padding-right: 40px;
}

/* ADD THIS TO THE END OF styles.css */
/* =================================================================== */
/* BOOKING DETAILS LIST STYLING */
/* =================================================================== */
.confirmation-container h4 {
    font-size: 1.1rem;
    color: var(--widget-text-secondary);
    margin-top: 24px;
    margin-bottom: 12px;
}

.confirmation-container h4:first-of-type {
    margin-top: 0;
}

.booking-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--widget-bg, #F8F9FA);
    border: 1px solid var(--widget-border-color, #E0E0E0);
    border-radius: 8px;
    padding: 16px;
}

.booking-details-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--widget-text-primary);
}

.booking-details-list li:not(:last-child) {
    margin-bottom: 12px;
}

.booking-details-list .material-icons-outlined {
    color: var(--widget-accent-blue);
}

/* ADD THIS TO THE END OF styles.css */
/* =================================================================== */
/* REVIEW PAGE ITINERARY SEGMENT STYLES */
/* =================================================================== */
.review-segment {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.review-segment-time {
    text-align: right;
    flex-basis: 60px;
    flex-shrink: 0;
}

.review-segment-time p {
    margin: 0;
    line-height: 1.4;
}

.review-segment-route {
    flex-grow: 1;
}

.review-segment-route p {
    margin: 0;
    font-weight: 500;
}

.route-line {
    height: 20px;
    border-left: 2px dotted var(--widget-border-color, #ccc);
    margin-left: 10px;
    /* Indent the line slightly */
    margin-top: 4px;
    margin-bottom: 4px;
}

.review-segment-info {
    flex-basis: 100px;
    flex-shrink: 0;
    text-align: right;
    color: var(--widget-text-secondary, #5F6368);
}

.review-segment-info p {
    margin: 0;
}

/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */
/* =================================================================== */
/* STYLISH FLATPCIKR THEME OVERRIDES */
/* =================================================================== */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif;
    background: var(--widget-surface-bg, #FFFFFF);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--widget-border-color, #E0E0E0);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--widget-accent-blue, #4285F4);
    border-color: var(--widget-accent-blue, #4285F4);
    color: #fff;
}

.flatpickr-day.today {
    border-color: var(--widget-accent-blue, #4285F4);
    color: var(--widget-accent-blue, #4285F4);
}

.flatpickr-day:hover {
    background: var(--widget-hover-bg, #F1F3F4);
}

/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */
/* It replaces the old review page styles. */
/* =================================================================== */
/* REVIEW PAGE DETAILED ITINERARY V2 */
/* =================================================================== */
.review-segment-detailed {
    display: flex;
    gap: 16px;
    padding: 16px 0;
}

.review-time {
    display: flex;
    flex-direction: column;
    text-align: right;
    flex-basis: 70px;
    flex-shrink: 0;
}

.review-time p {
    margin: 0;
    line-height: 1.2;
}

.review-time p small {
    font-size: 0.8em;
    color: var(--widget-text-secondary);
}

.review-time .time-line {
    flex-grow: 1;
    min-height: 20px;
    border-right: 2px dotted var(--widget-border-color);
    margin: 8px 10px 8px 0;
}

.review-route-info {
    flex-grow: 1;
}

.review-route-info p {
    margin: 0;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.2;
}

.review-route-info p:first-child {
    margin-bottom: 30px;
    /* Spacing between departure and arrival airport */
}

.review-flight-details {
    flex-basis: 200px;
    flex-shrink: 0;
    text-align: right;
    color: var(--widget-text-secondary);
    font-size: 0.9rem;
}

.review-flight-details p {
    margin: 0;
}

.review-flight-details .aircraft-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.review-flight-details .aircraft-info .material-icons-outlined {
    font-size: 16px;
}

.review-flight-details .operated-by {
    font-style: italic;
    font-size: 0.85rem;
    margin-top: 8px;
}

.review-layover {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    margin: 8px 0;
    background-color: var(--widget-bg, #F8F9FA);
    border-radius: 4px;
    color: var(--widget-text-secondary);
    font-style: italic;
    font-size: 0.9rem;
}

/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */
/* =================================================================== */
/* DETAILED AMENITY LIST STYLING */
/* =================================================================== */
.booking-details-list .amenity-item {
    display: flex;
    justify-content: space-between;
    /* Pushes items to opposite ends */
    align-items: center;
    padding: 8px 0;
}

.booking-details-list .amenity-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.amenity-status {
    font-weight: 500;
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Green for things that are included */
.amenity-status.included {
    color: #2E7D32;
    background-color: #E8F5E9;
}

/* Amber/Orange for things that are chargeable */
.amenity-status.chargeable {
    color: #BF360C;
    background-color: #FFF3E0;
}

/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */
/* =================================================================== */
/* ANCILLARY & MODAL STYLING */
/* =================================================================== */
.ancillary-options {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--widget-border-color, #E0E0E0);
}

.ancillary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--widget-hover-bg, #F1F3F4);
    border: 1px solid var(--widget-border-color, #DADCE0);
    color: var(--widget-accent-blue);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ancillary-btn:hover {
    background-color: #E8EAED;
}

/* --- MODAL STYLES --- */
#modal-container {
    position: fixed;
    /* Or absolute, depending on scroll behavior */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    /* High z-index to be on top of everything */
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.baggage-options-list {
    margin: 20px 0;
    max-height: 300px;
    overflow-y: auto;
}

.baggage-option {
    display: block;
    border: 1px solid var(--widget-border-color, #DADCE0);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.baggage-option:hover {
    border-color: var(--widget-accent-blue);
}

.baggage-option input[type="radio"] {
    display: none;
    /* Hide the actual radio button */
}

.baggage-option input[type="radio"]:checked+.baggage-option-details {
    /* Style the details when the hidden radio is checked */
    border-left: 3px solid var(--widget-accent-blue);
    padding-left: 12px;
}

.baggage-option-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid transparent;
}

.baggage-option-details strong {
    color: var(--widget-text-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */
/* --- ANCILLARY & MODAL STYLING --- */
.ancillary-options {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--widget-border-color, #E0E0E0);
}

.ancillary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--widget-hover-bg, #F1F3F4);
    border: 1px solid var(--widget-border-color, #DADCE0);
    color: var(--widget-accent-blue);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ancillary-btn:hover {
    background-color: #E8EAED;
}

#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.baggage-options-list {
    margin: 20px 0;
    max-height: 300px;
    overflow-y: auto;
}

.baggage-option {
    display: block;
    border: 1px solid var(--widget-border-color, #DADCE0);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.baggage-option:hover {
    border-color: var(--widget-accent-blue);
}

.baggage-option input[type="radio"] {
    display: none;
}

.baggage-option input[type="radio"]:checked+.baggage-option-details {
    border-left: 3px solid var(--widget-accent-blue);
    padding-left: 12px;
}

.baggage-option-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid transparent;
}

.baggage-option-details strong {
    color: var(--widget-text-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */
/* --- ANCILLARY & MODAL STYLING --- */
.ancillary-options {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--widget-border-color, #E0E0E0);
}

.ancillary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--widget-hover-bg, #F1F3F4);
    border: 1px solid var(--widget-border-color, #DADCE0);
    color: var(--widget-accent-blue);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ancillary-btn:hover {
    background-color: #E8EAED;
}

.ancillary-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.baggage-options-list {
    margin: 20px 0;
    max-height: 300px;
    overflow-y: auto;
}

.baggage-option {
    display: block;
    border: 1px solid var(--widget-border-color, #DADCE0);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.baggage-option:hover {
    border-color: var(--widget-accent-blue);
}

.baggage-option input[type="radio"] {
    display: none;
}

.baggage-option input[type="radio"]:checked+.baggage-option-details {
    border-left: 3px solid var(--widget-accent-blue);
    padding-left: 12px;
}

.baggage-option-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid transparent;
}

.baggage-option-details strong {
    color: var(--widget-text-primary);
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

/* ADD THIS TO THE END OF styles.css */
.ancillary-options {
    position: relative;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--widget-border-color, #E0E0E0);
}

.ancillary-btn:disabled {
    background-color: #F1F3F4;
    color: #9E9E9E;
    cursor: not-allowed;
    border-color: #E0E0E0;
}

.ancillary-unavailable-note {
    font-size: 0.9em;
    color: #5F6368;
    margin-top: 0.75rem;
    padding: 10px;
    background-color: #F8F9FA;
    border-radius: 4px;
    border: 1px solid #E8EAED;
}

/* ADD THIS TO THE END of styles.css */
/* --- SMART STAY HOTEL CARD STYLES --- */
.smart-stay-card {
    border: 1px solid #4285F4;
    /* Blue accent to stand out */
    border-radius: 8px;
    margin: 1rem 0;
    background-color: #F8F9FA;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
    overflow: hidden;
}

.smart-stay-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #4285F4;
    color: white;
    padding: 8px 12px;
    font-weight: 500;
}

.smart-stay-body {
    display: flex;
    gap: 16px;
    padding: 16px;
}

.smart-stay-photo {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.smart-stay-details {
    flex-grow: 1;
}

.smart-stay-details h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.smart-stay-details p {
    margin: 0 0 4px 0;
    font-size: 0.9em;
}

.smart-stay-price {
    text-align: right;
}

.smart-stay-price small {
    display: block;
    font-size: 0.8em;
    color: var(--widget-text-secondary);
}

.smart-stay-price span {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--widget-accent-blue);
}

/* =================================================================== */
/* DEFINITIVE, PERMANENT TWO-COLUMN LAYOUT */
/* =================================================================== */
/* This rule targets the main container and makes it a permanent flexbox. */
#widget-flight-results-area {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    /* These rules align it with the search widget above it */
    max-width: 950px;
    width: 100%;
    margin: 30px auto;
}

/* This rule permanently styles the LEFT column (the filter sidebar). */
#widget-flight-results-area>#filter-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #FFFFFF;
}

/* This rule permanently styles the RIGHT column (the flight list). */
#widget-flight-results-area>#flight-results-content {
    flex-grow: 1;
    /* Allows this column to take up remaining space */
}

/* =================================================================== */
/* GLOBAL BUTTON STYLES (FOR MODALS) */
/* =================================================================== */
.explore-btn {
    background-color: var(--widget-accent-blue, #4285F4);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.explore-btn:hover {
    background-color: var(--widget-accent-hover-bg, #3367D6);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.back-btn {
    background: var(--widget-surface-bg, #FFFFFF);
    border: 1px solid var(--widget-border-color, #DADCE0);
    color: var(--widget-text-primary, #212529);
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s;
}

.back-btn:hover {
    background-color: var(--widget-hover-bg, #F1F3F4);
}

/* =================================================================== */
/* MODAL BUTTON STYLES (OVERRIDE) */
/* =================================================================== */
.modal-actions .explore-btn {
    background-color: #4285F4;
    color: white;
    border: none;
}

.modal-actions .explore-btn:hover {
    background-color: #3367D6;
}

.modal-actions .back-btn {
    background-color: #f8f9fa;
    color: #3c4043;
    border: 1px solid #dadce0;
}

.modal-actions .back-btn:hover {
    background-color: #f1f3f4;
    border-color: #c6cace;
}

/* Make the hotel card photo slightly larger */
.smart-stay-photo {
    width: 200px;
    height: 120px;
}

/* Add to end of styles.css */
.smart-stay-price span {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--widget-accent-blue);
    display: block;
    /* Make it take its own line */
    line-height: 1.2;
}

.smart-stay-price small {
    display: block;
    font-size: 0.85em;
    color: var(--widget-text-secondary);
    line-height: 1.3;
}

/* Auth Forms (login/register) */
.auth-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 30px;
    background-color: var(--widget-surface-bg, #FFFFFF);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.auth-container h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
}

.auth-btn {
    width: 100%;
    margin-top: 10px;
    justify-content: center;
}

.auth-switch {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}

.auth-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    text-align: center;
}

/* In styles.css */
/* This will apply to any row of form inputs */
.form-row {
    display: flex;
    gap: 15px;
    /* Adds space between the fields */
}

/* Make sure each form group in a row takes up equal space */
.form-row .form-group {
    flex: 1;
}

/* =================================== */
/* Confirmation Page Enhancements */
/* =================================== */
.confirmation-content-wrapper {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}

.confirmation-header {
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.confirmation-header h1 {
    font-size: 2.5rem;
    margin: 10px 0;
}

.confirmation-header .success-icon {
    font-size: 60px;
    color: #28a745;
}

.confirmation-details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.confirmation-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.confirmation-section h3 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.itinerary-leg {
    margin-bottom: 20px;
}

.itinerary-leg h4 {
    margin-bottom: 10px;
}

.review-segment-detailed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.review-segment-detailed:last-child {
    border-bottom: none;
}

p.segment-time {
    font-size: 0.85em;
    color: #666;
    margin-top: 4px;
}

.traveler-list {
    list-style: none;
    padding: 0;
}

.traveler-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.hotel-suggestion-card {
    margin-top: 40px;
    border-top: 1px solid #e0e0e0;
    padding-top: 30px;
}

/* =================================== */
/* My Bookings Page Styles */
/* =================================== */
.page-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.page-header h1 {
    font-size: 2rem;
    margin: 0;
}

#bookings-list-container {
    display: grid;
    gap: 20px;
}

.booking-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #4285F4;
    /* Blue for confirmed */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.booking-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.booking-card.pending_payment {
    border-left-color: #ffc107;
    /* Yellow for pending */
}

.booking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.booking-destination {
    font-weight: 600;
    font-size: 1.1rem;
}

.booking-status {
    background-color: #4285F4;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    text-transform: capitalize;
}

.booking-card.pending_payment .booking-status {
    background-color: #ffc107;
    color: #333;
}

.booking-card-body {
    padding: 20px;
    line-height: 1.6;
}

.booking-card-body p {
    margin: 0 0 10px;
}

.booking-card-footer {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #f0f0f0;
}

/* =================================== */
/* New Main Header Styles */
/* =================================== */
.main-header {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 40px;
    box-sizing: border-box;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    height: 64px;
}

/* ======================================= */
/* CORRECT LOGO STYLES */
/* ======================================= */
/* Style the container (the <a> tag) to be a flex item */
.header-logo {
    display: inline-block;
    /* Or flex, depending on header layout */
    flex-shrink: 0;
    /* Prevents logo from shrinking */
}

/* Style the image ITSELF */


.header-user-section {
    position: relative;
}

.auth-link {
    margin-left: 10px;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.auth-link.explore-btn {
    background-color: #007bff;
    color: white;
}

/* User Profile Dropdown */
.user-profile-dropdown {
    position: relative;
}

.user-menu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s;
}

.user-menu-button:hover {
    background-color: #f5f5f5;
}

.user-menu-content {
    position: absolute;
    top: 110%;
    right: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 200px;
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.user-menu-content.hidden,
.user-menu-content[hidden] {
    display: none !important;
}

.user-menu-content a,
.user-menu-content button {
    padding: 12px 16px;
    text-align: left;
    text-decoration: none;
    color: #333;
    display: block;
    width: 100%;
    background: none;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
}

.user-menu-content a:hover,
.user-menu-content button:hover {
    background-color: #f5f5f5;
}

.user-menu-content hr {
    margin: 4px 0;
    border: none;
    border-top: 1px solid #e0e0e0;
}

/* =================================== */
/* Profile Page Styles */
/* =================================== */
.profile-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}

.profile-section {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

.profile-section h3 {
    margin-top: 0;
    font-size: 1.25rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.message-banner {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.message-banner.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message-banner.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* =================================== */
/* Saved Travelers Styles */
/* =================================== */
.saved-travelers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.saved-traveler-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.traveler-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.delete-traveler-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.delete-traveler-btn:hover {
    color: #d9534f;
    /* red */
}

#add-traveler-form h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Styles for the Saved Traveler dropdown in the booking form */
.saved-traveler-select {
    background-color: #f0f5ff;
    border: 1px solid #cce;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

/* =================================== */
/* Assign Travelers UI Styles */
/* =================================== */
#assign-travelers-container .form-container {
    max-width: 700px;
    margin: 40px auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.assignment-row {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}

.assignment-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.assignment-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.assignment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.assignment-actions .assign-saved-btn,
.assignment-actions .assign-new-btn {
    padding: 10px 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.assignment-actions .assign-saved-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.assignment-actions .assign-new-btn {
    color: #007bff;
    border-color: #007bff;
}

.assigned-traveler-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e7f3ff;
    border: 1px solid #b3d7ff;
    padding: 12px 15px;
    border-radius: 6px;
}

.assigned-traveler-card span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.change-assignment-btn {
    background: none;
    border: none;
    text-decoration: underline;
    color: #007bff;
    cursor: pointer;
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    /* Explicitly white */
    border-bottom: 1px solid #e0e0e0;
    /* The subtle separator line */
    padding: 0 40px;
    box-sizing: border-box;
    z-index: 1000;
    /* Optional: add a very subtle shadow to lift it off the page */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    /* Add some padding for spacing */
    background-color: #f8f9fa;
    /* Example background color */
}

.logo a {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem;
    color: #333;
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a,
.nav-links .person-icon {
    text-decoration: none;
    color: #333;
    margin-left: 1.5rem;
    font-size: 1rem;
}

.nav-links .person-icon {
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 0.5rem;
}

.form-extra-links {
    text-align: right;
    font-size: 0.9em;
    margin-bottom: 15px;
}

/* =================================================================== */
/* SEAT MAP MODAL & RENDERER STYLES (COMPLETE REWRITE) */
/* =================================================================== */
/* =================================================================== */
/* SEAT MAP MODAL & RENDERER STYLES (COMPLETE REWRITE) */
/* =================================================================== */
/* --- The Modal Window --- */
.seat-map-modal {
    max-width: 95vw;
    /* Allow the modal to be very wide on large screens */
    width: fit-content;
    /* Let the content inside determine the width */
    max-height: 90vh;
    /* Limit height to prevent overflow on small screens */
    display: flex;
    flex-direction: column;
}

.seat-map-modal h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

/* --- The Main Scrollable Area --- */
#seat-map-render-area {
    margin: 10px 0;
    overflow-y: auto;
    /* Makes the seat map scrollable if the plane is long */
    padding: 20px 10px;
    /* Top/bottom and left/right padding */
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    flex-grow: 1;
    /* Allows this area to take up available vertical space */
}

/* --- The Airplane Fuselage Shape --- */
.seat-map-fuselage {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    /* This creates the curved airplane body shape using different radii for horizontal/vertical */
    border-radius: 50px / 200px;
    padding: 40px 30px;
    /* Generous padding inside the "plane" */
    margin: 0 auto;
    width: fit-content;
    /* Shrink-wraps the content */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.seat-map-segment {
    margin-bottom: 30px;
}

.seat-map-segment:last-child {
    margin-bottom: 0;
}

.seat-map-segment h4 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
}

/* --- The CSS Grid for the Seats --- */
.seat-map-grid {
    display: grid;
    gap: 8px 5px;
    /* 8px between rows, 5px between columns */
    justify-content: center;
    align-items: center;
}

/* --- Individual Seat/Label/Aisle Styles --- */
.seat,
.seat-label,
.seat-aisle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    box-sizing: border-box;
}

.seat-label {
    font-weight: bold;
    color: #6c757d;
}

.seat-aisle {
    /* This is intentionally empty to create the aisle gap */
}

.seat {
    border: 1px solid;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

/* --- Seat Color States (Based on Research) --- */
/* AVAILABLE: Green is universally understood for "go" or "available" */
.seat.available {
    background-color: #e8f5e9;
    /* Light Green */
    border-color: #a5d6a7;
    color: #2e7d32;
}

.seat.available:hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(46, 125, 50, 0.4);
    border-color: #2e7d32;
}

/* OCCUPIED: Red is too aggressive; a neutral grey is standard and less alarming */
.seat.occupied {
    background-color: #e9ecef;
    border-color: #ced4da;
    cursor: not-allowed;
    color: #adb5bd;
}

/* EXTRA LEGROOM: Blue or gold often signify a premium/upgraded option */
.seat.extra-legroom {
    border-color: #1e88e5;
    /* A strong blue border */
    color: #1e88e5;
    position: relative;
}

/* A star icon for premium seats */
.seat.extra-legroom::after {
    content: '★';
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 9px;
    color: #1e88e5;
}

/* YOUR SELECTION: A vibrant, primary color to clearly indicate selection */
.seat.selected {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* --- Legend Styling --- */
.seat-map-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 25px;
    /* More space for a cleaner look */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

/* Use solid colors in the legend for clarity */
.legend-item .seat {
    width: 28px;
    height: 28px;
    cursor: default;
}

.legend-item .seat:hover {
    transform: none;
    box-shadow: none;
}

.legend-item .seat.available {
    background-color: #a5d6a7;
}

.legend-item .seat.occupied {
    background-color: #e9ecef;
}

.legend-item .seat.selected {
    background-color: #007bff;
}

/* In styles.css */
/* Enhancements for Rich Flight Offer Card */
.flight-offer-card-rich {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.offer-main-content {
    display: flex;
    justify-content: space-between;
    padding: 16px;
}

.airline-and-itinerary {
    display: flex;
    gap: 16px;
    flex-grow: 1;
}

.airline-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.8em;
    color: #64748b;
    min-width: 80px;
}

.airline-logo-section img {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}

.itinerary-summaries {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.itinerary-leg-summary-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.time-and-route small {
    display: block;
    color: #64748b;
    font-size: 0.9em;
}

.stop-and-duration {
    text-align: right;
}

.stop-and-duration small {
    display: block;
    color: #64748b;
    font-size: 0.9em;
}

.stops-direct {
    color: #16a34a;
}

.stops-layover {
    color: #ea580c;
    font-weight: 600;
}

.price-action-section-v2 {
    text-align: right;
    padding-left: 24px;
    border-left: 1px solid #e2e8f0;
    min-width: 150px;
}

.price-total {
    font-size: 1.4em;
    font-weight: 600;
}

.price-subtext {
    font-size: 0.8em;
    color: #64748b;
    margin-bottom: 8px;
}

.offer-details-dropdown {
    border-top: 1px solid #f1f5f9;
}

.offer-details-dropdown summary {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9em;
    color: #475569;
}

.offer-details-dropdown .details-content {
    padding: 0 16px 16px;
    background-color: #f8fafc;
}

.itinerary-leg-details {
    padding-top: 8px;
}

.layover-details {
    padding-left: 16px;
    margin: 4px 0;
    border-left: 2px solid #cbd5e1;
    font-size: 0.9em;
    color: #64748b;
}

/* Container for all header controls */
.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* even spacing between each block */
}

/* Generic icon‑button styling */
.icon-menu-button {
    display: flex;
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center inside its own box */
    width: 2.5rem;
    /* equal hit‐area for each icon */
    height: 2.5rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Material icon inside button */
.icon-menu-button .material-icons-outlined {
    font-size: 1.6rem;
    /* nice, tappable size */
    line-height: 1;
}

/* If you want the language “EN” text next to arrow aligned */
#language-menu-trigger {
    gap: 0.25rem;
    font-size: 0.9rem;
    color: #fff;
}

/* Profile icon button tweak */
.profile-icon-btn {
    position: relative;
}

/* Dropdown arrow (the little expand_more) */
.icon-menu-button .arrow-down {
    font-size: 1.2rem;
    margin-left: 0.1rem;
    vertical-align: middle;
}

/* Base for both auth buttons */
.auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 150ms, color 150ms, border-color 150ms;
}

/* Solid (primary) */
.solid-btn {
    background-color: #2f80ed;
    /* your blue */
    color: #fff;
    border: 2px solid #2f80ed;
}

.solid-btn:hover {
    background-color: #2569c6;
    border-color: #2569c6;
}

/* Ghost (secondary) */
.ghost-btn {
    background-color: transparent;
    color: #2f80ed;
    border: 2px solid #2f80ed;
}

.ghost-btn:hover {
    background-color: rgba(47, 128, 237, 0.1);
    color: #1e5ab8;
    border-color: #1e5ab8;
}

/* === FINAL RUNWAY LIGHTS LOADER (Paste at end of styles.css) === */
/* The full-screen overlay */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    /* A clean, semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.loader-overlay.hidden {
    display: none;
}

/* The container for the lights */
.runway-strip {
    display: flex;
}

/* A single runway light */
.light {
    width: 12px;
    height: 40px;
    margin: 0 8px;
    background-color: #d0d0d0;
    /* Dim, default color */
    border-radius: 4px;
    animation: light-up 1.2s infinite ease-in-out;
}

/* The animation that makes the lights "light up" */
@keyframes light-up {

    0%,
    100% {
        background-color: #d0d0d0;
        transform: scaleY(1);
    }

    50% {
        background-color: #007bff;
        /* The bright blue from your buttons */
        transform: scaleY(1.1);
        /* Slightly grow the light for effect */
    }
}

/* This is the magic: each light has a different delay, creating the sequence */
.light:nth-child(2) {
    animation-delay: 0.1s;
}

.light:nth-child(3) {
    animation-delay: 0.2s;
}

.light:nth-child(4) {
    animation-delay: 0.3s;
}

.light:nth-child(5) {
    animation-delay: 0.4s;
}

/* ================================================== */
/* DEFINITIVE HEADER & AUTH STYLES */
/* ================================================== */
/* --- 1. HEADER LOGO --- */
/* This rule styles the logo link container */
.header-logo {
    flex-shrink: 0;
    /* Prevents the logo from shrinking */
}



/* --- 2. AUTH FORM BUTTONS & DIVIDER --- */
/* This rule styles BOTH the "Create Account" and "Google" buttons */
.explore-btn.auth-btn {
    position: relative;
    /* This is the key for centering the text */
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    text-align: center;
    /* This centers the text perfectly */
}

/* Style the Google button's icon using position:absolute */
.explore-btn.auth-btn img {
    position: absolute;
    /* Takes the icon out of the text flow */
    left: 16px;
    /* Positions it on the left */
    top: 50%;
    transform: translateY(-50%);
    /* Centers it vertically */
    height: 20px;
    width: 20px;
    filter: brightness(0) invert(1);
    /* Makes the black 'G' white */
}

/* Make the main form button text BOLD */
#register-form .explore-btn.auth-btn,
#login-form .explore-btn.auth-btn {
    font-weight: 600;
}

/* Make the Google button text REGULAR */
.social-login-container .explore-btn.auth-btn {
    font-weight: 400;
}

/* This styles the "or" divider correctly */
.or-divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 24px 0;
    color: #64748b;
}

.or-divider hr {
    flex-grow: 1;
    border: none;
    border-top: 1px solid #e2e8f0;
}

.or-divider span {
    padding: 0 1rem;
}

/* Auth screen polish and unified button treatment */
.auth-container {
    width: min(414px, calc(100vw - 32px));
    max-width: 414px;
    padding: 32px 28px 34px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
}

.auth-container h2 {
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: 0;
}

.auth-subtitle {
    max-width: 330px;
    margin: 0 auto 24px;
    color: #536173;
    font-size: 0.94rem;
    line-height: 1.45;
    text-align: center;
}

.auth-container .form-group label {
    display: block;
    margin-bottom: 7px;
    color: #15233a;
    font-size: 0.86rem;
    font-weight: 600;
}

.auth-container .form-input {
    min-height: 38px;
    border: 1px solid #cbd7e5;
    border-radius: 6px;
    color: #0f172a;
    font: inherit;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.auth-container .form-input:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
    outline: none;
}

/* Auth name row: two equal columns inside the 414px card. The legacy
   .form-row rule mixed flex with .form-group { min-width: 200px } which
   forced the two name fields to overflow / overlap inside the auth card.
   Grid with min-width:0 children guarantees deterministic equal columns. */
.auth-container .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.auth-container .form-row > .form-group {
    min-width: 0;
    width: 100%;
}

@media (max-width: 480px) {
    .auth-container .form-row {
        grid-template-columns: 1fr;
    }
}

.auth-container .explore-btn.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--color-primary, #1a73e8) !important;
    border-radius: 8px !important;
    background: var(--color-primary, #1a73e8) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1;
}

.auth-container .explore-btn.auth-btn:hover {
    border-color: var(--color-primary-dark, #185abc) !important;
    background: var(--color-primary-dark, #185abc) !important;
}

.auth-container .social-login-container .explore-btn.auth-btn {
    border-color: #c7d3e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 600;
}

.auth-container .social-login-container .explore-btn.auth-btn:hover {
    border-color: #8ea5bf !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

.auth-container .explore-btn.auth-btn img {
    left: 18px;
    width: 18px;
    height: 18px;
    filter: none;
}

.auth-container .or-divider {
    margin: 24px 0 20px;
}

.auth-container .or-divider span {
    color: #64748b;
    font-size: 0.88rem;
    white-space: nowrap;
}

.auth-container .auth-switch a,
.auth-container .form-extra-links a {
    color: #0056b3;
    font-weight: 600;
}

body.auth-page {
    background: #eef2f7;
}

body.auth-page .main-header {
    background: #ffffff;
}

body.auth-page .auth-container {
    margin: 72px auto 54px;
}

body.auth-page .auth-site-footer {
    border-top: 0;
    box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.06);
}

body.auth-page .auth-site-footer .footer-shell {
    margin-top: 0;
    padding-top: 32px;
}

/* ======================================= */
/* FORM FIELD SPACING FIX */
/* ======================================= */
/* This adds a consistent bottom margin to every form field group, fixing the inconsistent vertical spacing. */
.form-group {
    margin-bottom: 15px;
}

.btn.primary {
    background: var(--brand);
    border-color: transparent
}

.btn[disabled] {
    opacity: .5;
    cursor: not-allowed
}

.status {
    margin-left: 12px;
    color: var(--muted);
    font-size: 13px
}

.shell {
    max-width: 820px;
    margin: 28px auto 22px;
    border-radius: 32px;
    padding: 22px
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
    font-size: 14px;
    margin-bottom: 8px
}

.topbar small {
    color: var(--muted)
}

.cabin {
    background: linear-gradient(180deg, #0d1628, #0a1324);
    border: 1px solid #1f2937;
    border-radius: 36px;
    padding: 22px 18px 22px 18px;
    position: relative;
    overflow: hidden
}

.cabin::after {
    /* aisle runner */
    content: "";
    position: absolute;
    inset: 18px 50%;
    width: 18px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(148, 163, 184, .15), rgba(148, 163, 184, .05));
    border-left: 1px dashed rgba(148, 163, 184, .25);
    border-right: 1px dashed rgba(148, 163, 184, .25);
    border-radius: 10px;
    pointer-events: none
}

.letters {
    display: grid;
    grid-template-columns: 36px repeat(3, 38px) 18px repeat(3, 38px) 36px;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    text-align: center
}

.letters span {
    line-height: 1
}

.grid {
    --seat: 38px;
    --gap: 10px;
    display: grid;
    grid-auto-rows: var(--seat);
    grid-template-columns: 36px repeat(3, var(--seat)) 18px repeat(3, var(--seat)) 36px;
    gap: var(--gap);
    align-items: center;
    justify-content: center
}

.row-num {
    color: var(--muted);
    font-size: 12px;
    text-align: center
}

.seat {
    appearance: none;
    border: 2px solid var(--seat-stroke);
    background: var(--seat);
    color: #0b1220;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    display: grid;
    place-items: center;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border .2s ease, color .2s ease
}

.seat:hover {
    transform: translateY(-2px)
}

.seat:active {
    transform: translateY(0) scale(.98)
}

.seat.occupied {
    background: var(--seat-oc);
    border-color: var(--seat-oc-stroke);
    color: #334155;
    cursor: not-allowed;
    box-shadow: none
}

.seat.selected {
    background: var(--seat-sel);
    border-color: transparent;
    color: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .25)
}

.exit-row {
    outline: 2px dashed #64748b;
    outline-offset: 6px;
    border-radius: 12px
}

.exit-chip {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #94a3b8;
    border: 1px dashed #475569;
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(2px)
}

.legend {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid transparent;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px
}

.d-available {
    background: var(--seat);
    border-color: var(--seat-stroke)
}

.d-selected {
    background: var(--seat-sel)
}

.d-occupied {
    background: var(--seat-oc);
    border-color: var(--seat-oc-stroke)
}

.d-exit {
    background: transparent;
    border: 2px dashed #64748b
}

@media (max-width:720px) {
    .shell {
        padding: 18px
    }

    .grid,
    .letters {
        --seat: 34px;
        gap: 8px;
        grid-template-columns: 28px repeat(3, var(--seat)) 14px repeat(3, var(--seat)) 28px
    }
}

/* ======================================= */
/* DARK MODE BACKGROUND REMOVAL */
/* ======================================= */
/* 1. Set a light grey background for the entire page body. This is the foundation for a professional, clean look. */
body {
    background-color: #f0f2f5 !important;
    /* A professional light grey */
    color: #212529 !important;
    /* A standard dark text color for readability */
}

/* 2. Make all the content cards (filters, flights, hotel) pure white. */
#filter-sidebar,
.flight-offer-card.rich-offer,
.smart-stay-card {
    background-color: #ffffff !important;
}

/* 3. Ensure the text inside the flight cards is dark. */
.flight-offer-card.rich-offer,
.flight-offer-card.rich-offer .price,
.flight-offer-card.rich-offer .itinerary-sub-line,
#flight-results-content h3 {
    color: #212529 !important;
    /* A standard dark charcoal text color */
}

/* 4. Ensure the body of the Smart Stay card is white, but keeps its blue header. */
.smart-stay-body {
    background-color: #ffffff !important;
}

/* 5. Make sure the Smart Stay card's text is also dark. */
.smart-stay-details h4,
.smart-stay-details p {
    color: #212529 !important;
}

/* ======================================================= */
/* NEW HOMEPAGE & HEADER CSS */
/* ======================================================= */
/* --- New Header --- */
.main-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0 2rem;
    /* Spacing on the sides */
    box-sizing: border-box;
    position: fixed;
    /* Makes the header stick to the top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    height: 64px;
}

.header-logo img {
    height: 105px;
    /* A more standard, less intrusive logo height */
    width: auto;
}

/* --- New Hero Section --- */
.hero {
    background: linear-gradient(45deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
}

.hero-content {
    max-width: 950px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

/* --- New Tabbed Search --- */
.search-container {
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 1rem;
}

.search-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.tab-link {
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.tab-link:hover {
    color: var(--color-primary);
}

.tab-link.active {
    color: var(--color-primary);
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 3px 3px 0 0;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* --- Tweaks for your existing modules to fit the new design --- */
#budget-search-module,
#flight-search-module {
    box-shadow: none;
    /* The container now provides the shadow */
    margin: 0;
    padding: 0;
    max-width: 100%;
}

/* ======================================================= */
/* NEW CONSISTENT INTERIOR PAGE STYLES */
/* ======================================================= */
.page-container {
    max-width: var(--container-width);
    margin: 40px auto;
    padding: 0 20px;
}

.page-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
    font-size: 2.5rem;
    margin: 0;
}

/* Ensure profile sections use the new surface color and shadow */
.profile-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--card-shadow);
}

/* ======================================================= */
/* FIX FOR USER DROPDOWN MENU POSITIONING */
/* ======================================================= */
/* 1. Make the container for the button and menu the "anchor". This is the most critical part of the fix. */
.icon-dropdown {
    position: relative;
}

/* 2. Position the dropdown menu absolutely *inside* its anchor. */
.user-menu-content {
    position: absolute;
    top: 100%;
    /* Place it directly below the anchor */
    right: 0;
    /* Align the right edge of the menu to the right edge of the anchor */
    margin-top: 8px;
    /* Add a little bit of space */
    width: 180px;
    /* Give it a consistent width */
    z-index: 1100;
    /* Ensure it appears on top of other content */
}

/* =================================================================== */
/* UNIFIED SEARCH & ACCESSIBLE BUTTON STYLES */
/* (PASTE THIS ENTIRE BLOCK AT THE END OF CSS) */
/* =================================================================== */
/* --- 1. UNIFY TAB PANEL BACKGROUND --- */
/* This creates the new grey panel inside the white search card */
.tab-content {
    background: #F3F4F6;
    padding: 24px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* --- 2. MAKE INNER MODULES TRANSPARENT --- */
/* This makes the old blue/grey backgrounds disappear so the new panel shows through */
.search-container #budget-search-module,
.search-container #flight-search-module,
.search-container .budget-container {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

/* --- 3. FIX TEXT COLOR ON BUDGET MODULE --- */
/* Makes the text readable on the new light grey background */
.search-container .budget-container h2 {
    color: var(--color-text-primary);
}

.search-container .budget-container .date-label {
    color: var(--color-text-secondary);
}

/* --- 4. UPDATE EXISTING BUTTON CLASSES (NO HTML CHANGE NEEDED) --- */
/* Update your PRIMARY buttons (.solid-btn, .explore-btn, .search-btn) */
.solid-btn,
.explore-btn,
.search-btn,
.budget-container .search-btn {
    background-color: var(--color-primary) !important;
    /* Use new accessible blue */
    color: #fff !important;
    border-color: var(--color-primary) !important;
}

.solid-btn:hover,
.explore-btn:hover,
.search-btn:hover,
.budget-container .search-btn:hover {
    background-color: var(--color-primary-dark) !important;
    /* Use new darker hover blue */
    border-color: var(--color-primary-dark) !important;
}

/* Update your SECONDARY buttons (.ghost-btn) */
.ghost-btn {
    color: var(--color-accent) !important;
    /* Use the lighter accent blue */
    border-color: var(--color-accent) !important;
}

.ghost-btn:hover {
    background-color: rgba(47, 128, 237, 0.1) !important;
}

/* =================================================================== */
/* PROFESSIONAL & BALANCED HERO SEARCH STYLES */
/* (PASTE THIS ENTIRE BLOCK AT THE END OF CSS) */
/* =================================================================== */
/* --- 1. UNIFIED LIGHT GREY PANEL BACKGROUND --- */
/* This creates the subtle, professional card-within-a-card effect. */
.tab-content {
    background: #F3F4F6;
    /* A clean, slightly darker grey than the page body */
    padding: 24px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* --- 2. MAKE INNER MODULES TRANSPARENT --- */
/* This is crucial. It makes the old blue/grey widget backgrounds disappear. */
.search-container #budget-search-module,
.search-container #flight-search-module,
.search-container .budget-container {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- 3. FIX TEXT COLORS FOR BUDGET MODULE --- */
/* This makes sure the text is dark and readable on the new light grey panel. */
.search-container .budget-container h2 {
    color: var(--color-text-primary) !important;
}

.search-container .budget-container .date-label {
    color: var(--color-text-secondary) !important;
}

.search-container .passenger-button {
    border-color: #D1D5DB;
    /* A slightly darker border for definition */
}

/* --- 4. USE ACCENT COLOR CORRECTLY FOR ACTIVE TAB --- */
/* This ensures the active tab uses the vibrant "Google Blue" for its text and underline. */
.tab-link.active {
    color: var(--color-primary);
}

.tab-link.active::after {
    background-color: var(--color-primary);
}

/* --- 5. ENSURE BUTTONS USE THE CORRECT ACCENT COLOR --- */
/* This re-confirms that your main action buttons use the vibrant blue. */
.solid-btn,
.explore-btn,
.search-btn,
.budget-container .search-btn {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.solid-btn:hover,
.explore-btn:hover,
.search-btn:hover,
.budget-container .search-btn:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* =================================================================== */
/* PROFESSIONAL & BALANCED HERO SEARCH STYLES */
/* (PASTE THIS ENTIRE BLOCK AT THE END OF CSS) */
/* =================================================================== */
/* --- 1. UNIFIED LIGHT GREY PANEL BACKGROUND --- */
/* This creates the subtle, professional card-within-a-card effect. */
.tab-content {
    background: #F3F4F6;
    /* A clean, slightly darker grey than the page body */
    padding: 24px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* --- 2. MAKE INNER MODULES TRANSPARENT --- */
/* This is crucial. It makes the old blue/grey widget backgrounds disappear. */
.search-container #budget-search-module,
.search-container #flight-search-module,
.search-container .budget-container {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- 3. FIX TEXT COLORS FOR BUDGET MODULE --- */
/* This makes sure the text is dark and readable on the new light grey panel. */
.search-container .budget-container h2 {
    color: var(--color-text-primary) !important;
}

.search-container .budget-container .date-label {
    color: var(--color-text-secondary) !important;
}

.search-container .passenger-button {
    border-color: #D1D5DB;
    /* A slightly darker border for definition */
}

/* --- 4. USE ACCENT COLOR CORRECTLY FOR ACTIVE TAB --- */
/* This ensures the active tab uses the vibrant "Google Blue" for its text and underline. */
.tab-link.active {
    color: var(--color-primary);
}

.tab-link.active::after {
    background-color: var(--color-primary);
}

/* --- 5. ENSURE BUTTONS USE THE CORRECT ACCENT COLOR --- */
/* This re-confirms that your main action buttons use the vibrant blue. */
.solid-btn,
.explore-btn,
.search-btn,
.budget-container .search-btn {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.solid-btn:hover,
.explore-btn:hover,
.search-btn:hover,
.budget-container .search-btn:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* =================================================================== */
/* DEFINITIVE GREY TAB PANEL STYLES (TEST OPTIONS) */
/* (PASTE THIS ENTIRE BLOCK AT THE END OF CSS) */
/* =================================================================== */
/* --- 1. CHOOSE YOUR GREY BACKGROUND --- */
/* To test a color, remove the slashes (//) from ONE of the lines below. */
/* Make sure only one is active at a time! */
.tab-content {
    background: #f5f5f6;
    /* OPTION A: Subtle & Clean (Recommended starting point) */
    /* background: #E5E7EB; */
    /* OPTION B: Defined & Crisp */
    /* background: #F4F4F5; */
    /* OPTION C: Soft & Warm */
    /* --- These styles apply to all options --- */
    padding: 24px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* --- 2. COMPANION STYLES (REQUIRED) --- */
/* These styles make the chosen grey background work correctly. */
/* Makes the old blue/grey widget backgrounds transparent */
.search-container #budget-search-module,
.search-container #flight-search-module,
.search-container .budget-container {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Makes the text readable on the new light grey background */
.search-container .budget-container h2 {
    color: var(--color-text-primary) !important;
}

.search-container .budget-container .date-label {
    color: var(--color-text-secondary) !important;
}

/* Adds a clean border to the passenger button for definition */
.search-container .passenger-button {
    border-color: #D1D5DB !important;
}

/* ======================================================= */
/* FIX FOR BUDGET DATE PICKER ALIGNMENT */
/* ======================================================= */
.budget-container .date-input {
    height: 38px;
    /* Matches the passenger button height */
    box-sizing: border-box;
    /* Ensures padding is included in the height */
    padding: 8px 10px;
    /* Standard input padding */
}

/* =================================================================== */
/* MODERN "DIRECT FLIGHTS" SWITCH TOGGLE STYLES */
/* =================================================================== */
/* 1. Add spacing above the options row */
.options-row {
    margin-top: 15px;
    /* Align with the start of the inputs above */
}

/* 2. The main container for the switch */
.switch-control {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

/* 3. Hide the original, ugly checkbox */
.switch-control .widget-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* 4. The grey background "track" of the switch */
.switch-track {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    background-color: #CDD5DF;
    /* A neutral grey for the "off" state */
    border-radius: 12px;
    transition: background-color 0.2s ease-in-out;
}

/* 5. The white circular "thumb" that slides */
.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
}

/* 6. The "ON" state: when the hidden checkbox is checked... */
.widget-checkbox:checked+.switch-track {
    background-color: var(--color-primary);
    /* Use your vibrant brand blue */
}

.widget-checkbox:checked+.switch-track .switch-thumb {
    transform: translateX(20px);
    /* Slide the thumb to the right */
}

/* 7. Style the label text */
.switch-label {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* =================================================================== */
/* DEFINITIVE STYLES FOR MODERN FORM DROPDOWNS */
/* =================================================================== */
/* --- 1. Unify the base style for all top-row controls --- */
.flight-search-widget .widget-select,
.flight-search-widget .passenger-input-trigger {
    background-color: var(--color-surface);
    border: 1px solid #D1D5DB;
    /* A clean, modern grey border */
    border-radius: var(--border-radius);
    /* Use your 8px global radius */
    color: var(--color-text-primary);
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* --- 2. Add a modern focus glow --- */
.flight-search-widget .widget-select:focus,
.flight-search-widget .passenger-input-trigger:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
    /* Soft blue glow */
}

/* --- 3. Style the custom dropdown arrow --- */
.flight-search-widget .widget-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* A cleaner, more modern SVG for the arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235F6368' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

/* =================================================================== */
/* DEFINITIVE "MY BOOKINGS" CARD REDESIGN STYLES */
/* =================================================================== */
/* --- Base Card Structure --- */
.booking-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Ensures child elements respect the border radius */
}

/* --- Main Content Area (Destination + Status) --- */
.booking-card-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
}

.booking-card-info {
    flex-grow: 1;
}

/* --- Destination Heading --- */
.booking-destination {
    margin: 0 0 16px 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* --- Grouped Details (Date, Price, ID) --- */
.booking-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    /* Vertical and horizontal gap */
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.detail-item .material-icons-outlined {
    font-size: 18px;
}

/* --- Status Pill Redesign --- */
.status-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 99px;
    /* Pill shape */
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Status Colors */
.status-pill.confirmed {
    background-color: #E8F5E9;
    /* Light green */
    color: #2E7D32;
    /* Dark green */
}

.status-pill.pending_payment {
    background-color: #FFF3E0;
    /* Light orange */
    color: #E65100;
    /* Dark orange */
}

.status-pill.cancelled {
    background-color: #FFEBEE;
    /* Light red */
    color: #B71C1C;
    /* Dark red */
}

/* --- Footer with Action Buttons --- */
.booking-card-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background-color: #F8F9FA;
    /* A slightly off-white footer */
    border-top: 1px solid var(--color-border);
}

/* Ensure buttons use the new global styles */
.booking-card-footer .button--primary,
.booking-card-footer .button--ghost {
    padding: 8px 16px;
    font-size: 0.9rem;
    flex: 0 1 auto;
}

/* ======================================================= */
/* STYLE FOR DISABLED BUTTONS/LINKS */
/* ======================================================= */
.button--primary.disabled,
.button--ghost.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    /* Prevents clicks */
}

/* =================================================================== */
/* DEFINITIVE FIX FOR BOOKING CARD BUTTONS */
/* =================================================================== */
/* This rule is more specific and will correctly style the <a> tags */
.booking-card-footer a.button--primary,
.booking-card-footer a.button--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Primary Button Style */
.booking-card-footer a.button--primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border: 1px solid var(--color-primary);
}

.booking-card-footer a.button--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Ghost (Secondary) Button Style */
.booking-card-footer a.button--ghost {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.booking-card-footer a.button--ghost:hover {
    background-color: rgba(47, 128, 237, 0.1);
}

/* This is the existing disabled style, just ensure it's there */
.booking-card-footer a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #E5E7EB;
    border-color: #D1D5DB;
    color: var(--color-text-secondary);
}

/* =================================================================== */
/* DEFINITIVE STYLES FOR EXISTING CONFIRMATION PAGE */
/* =================================================================== */
/* --- Main container for the card --- */
.confirmation-container {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin: 40px auto;
    max-width: 800px;
    padding: 0;
    /* Remove old padding, we'll control it section by section */
}

/* --- Header Section (Checkmark & Title) --- */
.confirmation-header {
    text-align: center;
    padding: 32px 24px;
    border-bottom: 1px solid var(--color-border);
}

.confirmation-header .success-icon {
    font-size: 48px;
    color: #2E7D32;
    line-height: 1;
}

.confirmation-header h2 {
    font-size: 2rem;
    margin: 16px 0 8px 0;
}

.confirmation-header p {
    color: var(--color-text-secondary);
    margin: 0;
}

/* --- Universal Section Styling --- */
.confirmation-section {
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.confirmation-section:last-of-type {
    border-bottom: none;
}

.confirmation-section h4 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--color-text-primary);
}

.confirmation-section p {
    margin: 0 0 8px 0;
}

/* --- Traveler List --- */
ul.traveler-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.traveler-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* --- Itinerary Display --- */
/* (This assumes your JS generates similar structures, if not we can adapt) */
.itinerary-leg {
    margin-bottom: 24px;
}

.itinerary-leg h5 {
    /* Assuming h5 for Outbound/Return */
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0 0 12px 0;
}

.conf-segment {
    /* A generic class for a flight segment */
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 8px;
    border-left: 3px solid var(--color-primary);
}

/* --- Action Buttons & Guest Form --- */
#download-itinerary-btn,
#send-email-btn {
    width: 100%;
    box-sizing: border-box;
    /* Ensures padding is included in width */
}

/* --- Footer Links --- */
.confirmation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: #F8F9FA;
    border-top: 1px solid var(--color-border);
}

.confirmation-footer a {
    text-decoration: none;
    font-weight: 600;
    color: var(--color-primary);
}

.confirmation-footer a:hover {
    text-decoration: underline;
}

/* --- Error State Styling --- */
.error-container {
    text-align: center;
    padding: 40px;
}

.error-icon {
    font-size: 48px;
    color: #B71C1C;
    /* Dark Red */
}

/* =================================================================== */
/* DEFINITIVE FIX FOR ALL LINK-BASED BUTTONS */
/* =================================================================== */
/* --- This is the key: style <a> tags with button classes --- */
a.button--primary,
a.button--ghost {
    display: inline-flex;
    /* Treats the link like a flexible box */
    align-items: center;
    /* Vertically centers everything inside (icon and text) */
    justify-content: center;
    /* Horizontally centers everything inside */
    text-decoration: none;
    /* Removes the default underline */
    box-sizing: border-box;
    gap: 8px;
    /* Creates space between icon and text */
}

/* --- Style the icon specifically when it's inside a button --- */
a.button--primary .material-icons-outlined,
a.button--ghost .material-icons-outlined {
    font-size: 20px;
}

/* =================================================================== */
/* DEFINITIVE FIX FOR "MY BOOKINGS" CARD BUTTONS */
/* =================================================================== */
/* --- 1. Create a NEW, smaller button style for use inside cards --- */
.button--card,
.button--card-ghost {
    padding: 6px 14px;
    /* Smaller padding */
    font-size: 0.875rem;
    /* Slightly smaller text */
    font-weight: 600;
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* --- 2. Style the primary card button --- */
.button--card {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border: 1px solid var(--color-primary);
}

.button--card:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* --- 3. Style the secondary (ghost) card button --- */
.button--card-ghost {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.button--card-ghost:hover {
    background-color: rgba(47, 128, 237, 0.1);
}

/* --- 4. Style for disabled card buttons --- */
.button--card.disabled,
.button--card-ghost.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #E5E7EB;
    border-color: #D1D5DB;
    color: var(--color-text-secondary);
}

/* =================================================================== */
/* DEFINITIVE FIX FOR CONFIRMATION PAGE ACTIONS */
/* =================================================================== */
/* --- 1. Create a dedicated container for the main action button --- */
.confirmation-actions {
    padding: 24px;
    text-align: center;
    /* This horizontally centers the button */
    border-bottom: 1px solid var(--color-border);
}

/* --- 2. Ensure the button itself is styled correctly --- */
#download-itinerary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* --- 3. Style the footer links for better balance --- */
.confirmation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: #F8F9FA;
}

.confirmation-footer a {
    /* Uses the smaller card button style for a more subtle look */
    padding: 6px 14px;
    font-size: 0.875rem;
}

/* =================================================================== */
/* DEFINITIVE FLIGHT RESULTS PAGE LAYOUT & STYLES */
/* =================================================================== */
/* --- 1. Main Container for the entire results area --- */
#widget-flight-results-area {
    display: flex;
    flex-direction: row;
    /* This creates the columns */
    gap: 24px;
    /* This is the space between the columns */
    align-items: flex-start;
    /* Aligns the tops of both columns */
    max-width: 1100px;
    width: 100%;
    margin: 40px auto;
    /* Centers the entire layout on the page */
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    /* Anchor for the "New Search" button */
}

/* --- 2. Left Column (Filter Sidebar) --- */
#filter-sidebar {
    width: 240px;
    flex-shrink: 0;
    /* Prevents the sidebar from shrinking */
    background-color: var(--color-surface);
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    position: sticky;
    /* Makes the filters stick to the top as you scroll */
    top: 96px;
    /* Space from the main header (72px header + 24px gap) */
}

#filter-sidebar h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

#filter-airlines-checklist .checklist-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

#filter-airlines-checklist .checklist-item input {
    margin-right: 8px;
}

/* --- 3. Right Column (Flight Results List) --- */
#flight-results-content {
    flex-grow: 1;
    /* Allows this column to take all remaining space */
}

#flight-results-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* --- 4. "New Search" Button Fix --- */
#new-search-btn {
    position: absolute;
    top: -60px;
    /* Positions it ABOVE the results area */
    left: 20px;
    /* Aligns with the padding of the main container */
    /* Apply a clean button style */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 8px 16px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

#new-search-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =================================================================== */
/* DEFINITIVE "REVIEW YOUR FLIGHT" PAGE STYLES */
/* =================================================================== */
/* --- 1. Main Container --- */
/* This ensures the review card has a consistent width and centering */
.confirmation-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0;
    /* Remove padding to allow sections to control it */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* --- 2. Main Title --- */
.confirmation-container h3 {
    padding: 24px;
    margin: 0;
    font-size: 1.75rem;
    border-bottom: 1px solid var(--color-border);
}

/* --- 3. Section Headers (Itinerary, What's Included, etc.) --- */
.confirmation-container h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 24px;
    margin: 24px 0 16px 0;
}

/* --- 4. Itinerary Leg Redesign --- */
.itinerary-leg {
    padding: 0 24px;
    margin-bottom: 16px;
}

.itinerary-leg h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.review-segment-detailed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}

.review-segment-detailed>div {
    flex-basis: 33.33%;
}

.review-segment-detailed>div:nth-child(2) {
    text-align: center;
    color: var(--color-text-secondary);
}

.review-segment-detailed>div:last-child {
    text-align: right;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* --- 5. "What's Included" Section --- */
.confirmation-section {
    padding: 0 24px;
    margin-bottom: 24px;
}

.booking-details-list {
    background-color: #F8F9FA;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 16px;
}

.booking-details-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-details-list li .material-icons-outlined {
    color: var(--color-primary);
}

/* --- 6. "Add-ons" Section --- */
.ancillary-options {
    padding: 0 24px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
}

/* --- 7. Price Summary Redesign --- */
.price-summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 24px;
    background-color: #F8F9FA;
    border-top: 1px solid var(--color-border);
}

.price-summary p {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.price-summary .total {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* --- 8. Footer Action Buttons --- */
.confirmation-container .form-actions {
    display: flex;
    justify-content: space-between;
    padding: 24px;
    border-top: 1px solid var(--color-border);
}

.review-segment-detailed {
    display: grid;
    grid-template-columns: 1fr 32px 1fr auto;
    /* dep | arrow | arr | meta */
    align-items: center;
    column-gap: 12px;
    font-variant-numeric: tabular-nums;
    /* keeps times aligned */
}

.review-segment-detailed>div:nth-child(2) {
    text-align: center;
    color: var(--color-text-secondary);
}

.review-segment-detailed>div:last-child {
    text-align: right;
    font-size: .9rem;
    color: var(--color-text-secondary);
}

.confirmation-container .form-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--color-border);
}

.itinerary-leg {
    padding: 12px 24px;
    margin: 0 24px 12px;
    background: #fff;
    border-radius: 8px;
}

.itinerary-leg h5 {
    margin: 0 0 8px;
    font-weight: 600;
}

#proceed-to-details-btn {
    min-width: 260px;
}

.ancillary-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .review-segment-detailed {
        column-gap: 8px;
        font-size: .95rem;
    }

    .price-summary .total {
        font-size: 1.6rem;
    }
}

/* =================================================================== */
/* DEFINITIVE CIRCULAR CLOCK FILTER VISUALS */
/* =================================================================== */
.clock-filter-container {
    margin-bottom: 2rem;
    /* Add more space between filter groups */
}

.clock-filter-container h4 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.1rem;
    text-align: center;
    /* Center the title above the clock */
}

/* --- The main clock container --- */
.clock-filter {
    position: relative;
    /* This is the anchor for the segments */
    width: 180px;
    /* The diameter of the clock */
    height: 180px;
    margin: 0 auto;
    /* Center the clock horizontally */
    border-radius: 50%;
    /* Makes the container a perfect circle */
}

/* --- Individual Clock Segments --- */
.clock-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- This is the magic: using clip-path to create the pie shapes --- */
/* Top-left segment (Morning) */
.clock-segment:nth-child(1) {
    top: 0;
    left: 0;
    clip-path: circle(100% at 100% 100%);
    border-radius: 100% 0 0 0;
}

/* Top-right segment (Afternoon) */
.clock-segment:nth-child(2) {
    top: 0;
    right: 0;
    clip-path: circle(100% at 0% 100%);
    border-radius: 0 100% 0 0;
}

/* Bottom-left segment (Night) */
.clock-segment:nth-child(3) {
    bottom: 0;
    left: 0;
    clip-path: circle(100% at 100% 0%);
    border-radius: 0 0 0 100%;
}

/* Bottom-right segment (Evening) */
.clock-segment:nth-child(4) {
    bottom: 0;
    right: 0;
    clip-path: circle(100% at 0% 0%);
    border-radius: 0 0 100% 0;
}

/* --- Hover and Active States --- */
.clock-segment:hover {
    background-color: #E5E7EB;
    border-color: #D1D5DB;
    z-index: 10;
    /* Bring hovered segment to the front */
}

.clock-segment.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary-dark);
    transform: scale(1.05);
    /* Slightly enlarge the active segment */
    z-index: 20;
    /* Ensure active is always on top */
}

/* CLOCK — CSS-only fix: bigger circle + inward label nudge */
.clock-filter {
    --clock-size: 184px;
    /* tweak 176–196 if needed (was 160px) */
    --inset: 12px;
    /* how far to pull text toward the center */
    width: var(--clock-size);
    height: var(--clock-size);
}

.clock-segment {
    box-sizing: border-box;
    /* lets us add padding without changing size */
    overflow: hidden;
    /* keep text inside the curve */
    line-height: 1.15;
    text-align: center;
    font-size: 0.85rem;
    /* slightly smaller than 0.9rem */
    /* (flex centering already in your CSS) */
}

/* Nudge each quadrant toward the center by padding the outer edges */
.clock-segment:nth-child(1) {
    /* Morning (top-left) → ↘ */
    padding-top: var(--inset);
    padding-left: var(--inset);
}

.clock-segment:nth-child(2) {
    /* Afternoon (top-right) → ↙ */
    padding-top: var(--inset);
    padding-right: var(--inset);
}

.clock-segment:nth-child(3) {
    /* Night (bottom-left) → ↗ */
    padding-bottom: var(--inset);
    padding-left: var(--inset);
}

.clock-segment:nth-child(4) {
    /* Evening (bottom-right) → ↖ */
    padding-bottom: var(--inset);
    padding-right: var(--inset);
}

/* Polished circular time filter */
.clock-filter-container h4 {
    margin-bottom: 14px;
    color: #1f2937;
    font-size: 1.03rem;
    font-weight: 750;
    letter-spacing: 0;
}

.clock-filter {
    isolation: isolate;
    background: radial-gradient(circle at 50% 50%, #ffffff 0 22%, #eef5ff 23% 100%);
    border: 1px solid #d6e3f2;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12), inset 0 0 0 7px rgba(255, 255, 255, 0.62);
}

.clock-filter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 15;
    border-radius: 50%;
    pointer-events: none;
    background:
        linear-gradient(to right, transparent calc(50% - 0.5px), rgba(148, 163, 184, 0.35) calc(50% - 0.5px), rgba(148, 163, 184, 0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(148, 163, 184, 0.35) calc(50% - 0.5px), rgba(148, 163, 184, 0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.75), inset 0 10px 30px rgba(255, 255, 255, 0.65);
}

.clock-filter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 35;
    width: 18px;
    height: 18px;
    border: 4px solid #1a73e8;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(26, 115, 232, 0.12), 0 5px 12px rgba(15, 23, 42, 0.18);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.clock-segment {
    background: linear-gradient(145deg, #fbfdff 0%, #eef4fb 100%);
    border-color: rgba(203, 213, 225, 0.92);
    color: #526173;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.18s ease, background-color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.clock-segment:nth-child(1) {
    background: linear-gradient(145deg, #fffaf0 0%, #eef6ff 100%);
}

.clock-segment:nth-child(2) {
    background: linear-gradient(145deg, #f9fbff 0%, #eaf2ff 100%);
}

.clock-segment:nth-child(3) {
    background: linear-gradient(145deg, #f8fbff 0%, #eef2f7 100%);
}

.clock-segment:nth-child(4) {
    background: linear-gradient(145deg, #fbf7ff 0%, #eef7ff 100%);
}

.clock-segment:hover {
    background: linear-gradient(145deg, #ffffff 0%, #e8f2ff 100%);
    border-color: #b8d4f4;
    color: #0f3f8f;
    box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.12);
}

.clock-segment.active {
    background: linear-gradient(145deg, #0b63ce 0%, #1a73e8 58%, #4f96f5 100%);
    color: #ffffff;
    border-color: #075ab9;
    text-shadow: none;
    box-shadow: 0 10px 22px rgba(26, 115, 232, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transform: scale(1.035);
}

/* ======= FINAL: sticky filter with symmetric gaps ======= */
:root {
    --header-h: 64px;
    /* your fixed header height */
    --sticky-gap: 20px;
}

/* Ensure wrapper doesn't clip sticky and stays as the scroll context */
#widget-flight-results-area {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* FINAL sidebar rule (overrides earlier ones) */
#filter-sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--sticky-gap));
    bottom: var(--sticky-gap);
    /* keep the same bottom gap at the floor */
    align-self: flex-start;
    height: fit-content;
    max-height: calc(100vh - (var(--header-h) + 2 * var(--sticky-gap)));
    overflow: auto;
    /* sidebar scrolls internally when tall */
    scrollbar-gutter: stable both-edges;
    /* avoids layout shift when scrollbar appears */
}

/* Price column layout + button offset */
.flight-offer-card.rich-offer .price-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* keep numbers right-aligned */
    gap: 4px;
    /* small space between price and "Total price" */
}

.flight-offer-card.rich-offer .price-section .explore-btn {
    margin-top: 12px;
    /* <-- lower the button a bit (tweak 8–16px) */
}

/* =================================================================== */
/* SEARCH SUMMARY BAR & EXPANDABLE WIDGET STYLES */
/* =================================================================== */
/* --- The container for both the bar and the hidden widget --- */
.search-summary-container {
    flex-basis: 100%;
    /* Makes it take the full width above the columns */
    margin-bottom: 24px;
}

/* --- The clickable summary bar --- */
.search-summary-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--card-shadow);
}

.search-summary-bar:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
    /* Focus glow */
}

.search-summary-bar .material-icons-outlined {
    color: var(--color-primary);
    font-size: 24px;
}

.summary-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

#summary-details {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* --- The hidden full search widget --- */
#search-widget-in-results {
    margin-top: 16px;
    padding: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

#search-widget-in-results #flight-search-module {
    padding: 0;
    margin: 0;
    box-shadow: none;
    max-width: 100%;
}

/* =================================================================== */
/* SEARCH SUMMARY BAR & EXPANDABLE WIDGET STYLES */
/* =================================================================== */
/* --- The container for both the bar and the hidden widget --- */
.search-summary-container {
    flex-basis: 100%;
    /* Makes it take the full width above the columns */
    margin-bottom: 24px;
}

/* --- The clickable summary bar --- */
.search-summary-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--card-shadow);
}

.search-summary-bar:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
    /* Focus glow */
}

.search-summary-bar .material-icons-outlined {
    color: var(--color-primary);
    font-size: 24px;
}

.summary-text {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#summary-details {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* --- The hidden full search widget --- */
#search-widget-in-results {
    margin-top: 16px;
    padding: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

#search-widget-in-results #flight-search-module {
    padding: 0;
    margin: 0;
    box-shadow: none;
    max-width: 100%;
}

/* === FINAL LAYOUT OVERRIDES (paste at the very end) === */
/* 1) Results area becomes a normal block, not a row flex */
#widget-flight-results-area {
    display: block !important;
    max-width: 1100px;
    width: 100%;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Search summary sits above the two columns */
#widget-flight-results-area .search-summary-container {
    margin-bottom: 24px;
}

/* 2) Two-column layout: sidebar (fixed width) + results (fluid) */
.results-layout-container {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* 3) Sidebar behavior & size */
#filter-sidebar {
    position: sticky;
    /* stays visible while scrolling */
    top: calc(64px + 16px);
    /* header height + a little gap */
    width: 100%;
    max-height: calc(100vh - 64px - 32px);
    overflow: auto;
    /* make sure any earlier "relative/absolute" rules are neutralized */
    left: auto;
    right: auto;
}

/* Let the results column actually shrink inside the grid (prevents overlap) */
#flight-results-content {
    min-width: 0;
}

/* Mobile: stack sidebar above results */
@media (max-width: 768px) {
    .results-layout-container {
        grid-template-columns: 1fr;
    }

    #filter-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* === MINOR LAYOUT POLISH === */
:root {
    --header-h: 64px;
    /* your fixed header */
    --gap: 24px;
}

/* keep the summary bar above the columns with a little space */
#widget-flight-results-area .search-summary-container {
    margin-bottom: 16px;
}

/* two clean columns, give the results proper shrink behavior */
.results-layout-container {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    /* sidebar | results */
    gap: var(--gap);
    align-items: start;
}

/* sticky sidebar with a comfortable offset under the header */
#filter-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    /* header + breathing room */
    max-height: calc(100vh - (var(--header-h) + 32px));
    overflow: auto;
}

/* let the results column actually shrink within the grid */
#flight-results-content {
    min-width: 0;
}

/* mobile: stack sidebar above the results */
@media (max-width: 768px) {
    .results-layout-container {
        grid-template-columns: 1fr;
    }

    #filter-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* === RESULTS COLUMN WIDTH TUNE === */
:root {
    --results-col: 780px;
    /* try 720–820px if you want tighter/looser */
}

/* Two columns: 240px sidebar + fixed-width results column */
.results-layout-container {
    display: grid;
    grid-template-columns: 240px minmax(0, var(--results-col));
    gap: 24px;
    align-items: start;
    justify-content: center;
    /* centers the grid within the page width */
}

/* Make the results column respect the fixed width */
#flight-results-content {
    max-width: var(--results-col);
    min-width: 0;
    /* prevents price column from forcing overflow */
}

/* Ensure all cards fit the new column (no rogue widths) */
#flight-results-content .flight-offer-card,
#flight-results-content .flight-offer-card.rich-offer,
#flight-results-content .flight-offer-card-rich,
#flight-results-content .smart-stay-card {
    width: 100%;
    box-sizing: border-box;
}

/* (Optional) keep the sidebar sticky under the header */
#filter-sidebar {
    position: sticky;
    top: calc(64px + 16px);
    max-height: calc(100vh - (64px + 32px));
    overflow: auto;
}

/* Mobile: stack */
@media (max-width: 768px) {
    .results-layout-container {
        grid-template-columns: 1fr;
    }

    #filter-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* FINAL: lock visibility regardless of earlier rules */
#widget-flight-results-area:not(.hidden) {
    display: block !important;
}

#widget-flight-results-area.hidden {
    display: none !important;
}

/* RESULTS LAYOUT — force two real columns and allow the right side to shrink */
.results-layout-container {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    /* sidebar | results */
    gap: 24px !important;
    align-items: start;
    justify-content: start !important;
    /* stop centering the whole grid */
}

/* Sidebar stays sticky but doesn't hog width */
#filter-sidebar {
    position: sticky;
    top: calc(64px + 16px);
    width: 100%;
    max-width: 240px;
    z-index: 1;
    /* optional: keeps it above card shadows */
}

/* Results column is fluid (kill old fixed widths) */
#flight-results-content {
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    /* critical so it can shrink instead of sliding under the sidebar */
    float: none !important;
    /* neutralize any legacy float */
    margin-left: 0 !important;
    /* neutralize any legacy left margins */
}

/* Cards fill their column */
#flight-results-content .flight-offer-card,
#flight-results-content .flight-offer-card.rich-offer,
#flight-results-content .flight-offer-card-rich {
    width: 100% !important;
    box-sizing: border-box;
}

/* Mobile: stack sidebar above results (unchanged) */
@media (max-width: 768px) {
    .results-layout-container {
        grid-template-columns: 1fr !important;
    }

    #filter-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

#flight-results-content * {
    max-width: 100%;
}

/* Keep the two columns and let the right side shrink */
.results-layout-container {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    /* sidebar | results */
    gap: 24px !important;
    align-items: start;
}

/* FIX: prevent the sidebar's padding from overflowing its grid track */
#filter-sidebar {
    box-sizing: border-box !important;
    /* include padding/border inside 240px */
    width: 100% !important;
    max-width: 240px !important;
    position: sticky;
    top: calc(64px + 16px);
    z-index: 0;
    /* don't sit above the results */
}

/* Make sure the results can shrink and render above if needed */
#flight-results-content {
    min-width: 0 !important;
    /* critical inside grids */
    max-width: none !important;
    width: auto !important;
    position: relative;
    z-index: 1;
}

/* Cards fill the column cleanly */
#flight-results-content .flight-offer-card,
#flight-results-content .flight-offer-card.rich-offer,
#flight-results-content .flight-offer-card-rich {
    width: 100% !important;
    box-sizing: border-box;
}

.search-summary-bar .date-chip {
  border: 0;
  background: #eef2ff;
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
.search-summary-bar .date-chip:focus { outline: 2px solid #4f46e5; }
.search-summary-bar .date-sep { margin: 0 6px; opacity: .6; }
.search-summary-bar .dot { margin: 0 8px; opacity: .5; }
.search-summary-bar .meta { opacity: .8; }


.search-summary-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.search-summary-bar .summary-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 28px;
}

.summary-update-btn {
    margin-left: auto;
}

.route-chip,
.meta-chip,
.date-chip {
    border: 0;
    background: #eef2ff;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.date-sep {
    margin: 0 6px;
    opacity: .5;
}

.dot {
    margin: 0 8px;
    opacity: .5;
}

/* Popover */
.inline-popover {
    position: absolute;
    z-index: 3000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    width: max-content;
    max-width: 92vw;
}

.inline-popover .row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.inline-popover input[type="text"],
.inline-popover input[type="number"],
.inline-popover select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 180px;
}

.inline-popover .stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inline-popover .stepper button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
}

.inline-popover .actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

.inline-popover .ghost {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 10px;
}

.inline-popover .apply {
    background: #2563eb;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 6px 12px;
}

/* tiny */
.comma {
    opacity: .6;
}

/* Make the bar the positioning context for absolute popovers */
.search-summary-container {
    position: relative;
}

:root {
    --accent: #1a73e8;
    /* match your Update button */
    --chip-bg: #f5f7fb;
    --chip-fg: #111827;
    --chip-fg-subtle: #6b7280;
    --chip-ring: rgba(26, 115, 232, .15);
}

/* Summary chips */
.summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    margin-right: 10px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: var(--chip-fg);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    cursor: pointer;
    user-select: none;
}

.summary-chip:hover {
    border-color: #d1d5db;
}

.summary-chip.active,
.summary-chip:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--chip-ring);
}

.summary-chip .subtle {
    color: var(--chip-fg-subtle);
    font-weight: 500;
}

/* Small blue “pill” treatment (used for dates to match button color) */
.summary-chip.blue {
    border-color: var(--accent);
    background: #eef5ff;
}

/* Generic popover */
.summary-popover {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    width: max-content;
}

/* Select menu style (Cabin / Direct) */
.select-menu {
    padding: 8px;
}

.select-menu .item {
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.select-menu .item:hover {
    background: #f3f4f6;
}

.select-menu .item.active {
    background: #eef5ff;
    border: 1px solid var(--accent);
}

/* Route popover layout */
.route-pop {
    width: 520px;
    max-width: calc(100vw - 32px);
}

.route-pop .row {
    display: flex;
    gap: 8px;
}

.route-pop .field {
    position: relative;
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
}

.route-pop .swap-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
}

.route-pop .ac-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-top: 6px;
    max-height: 220px;
    overflow: auto;
    display: none;
}

.route-pop .ac-list>div {
    padding: 8px 10px;
    cursor: pointer;
}

.route-pop .ac-list>div:hover {
    background: #f3f4f6;
}

/* Popover footer */
.pop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* Compact pax popover (if you used it earlier) */
.summary-popover.pax {
    max-width: 360px;
    width: max-content;
}

/* ---- Flatpickr range: draw a thin blue line for in-between days ---- */
.flatpickr-calendar.range-one {
    /* keep it tidy on small screens */
    max-width: calc(100vw - 32px);
}

.flatpickr-day.inRange {
    background: none !important;
    position: relative;
}

.flatpickr-day.inRange::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: calc(50% - 1px);
    height: 2px;
    background: var(--accent);
}

.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

.flatpickr-day.startRange.inRange::after,
.flatpickr-day.endRange.inRange::after {
    /* keep the line continuous through the start/end cells */
    left: 12%;
    right: 12%;
}

/* Buttons you already have */
.pop-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.pop-btn.primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* same look for both date chips */
.date-chip--primary {
    background: #E8F0FE;
    color: #1a73e8;
    border: 1px solid #1a73e8;
}

.date-chip--primary:hover,
.date-chip--primary:focus {
    filter: brightness(0.96);
}

/* Clean light-blue bar for the selected range (no dark line) */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
    background: #E8F0FE !important;
    /* the bar */
    border-color: #E8F0FE !important;
    color: inherit !important;
    /* Fill the 1–2px gaps between day cells with SAME color (no visible line) */
    box-shadow: -2px 0 0 #E8F0FE, 2px 0 0 #E8F0FE !important;
}

/* Keep hover from changing the bar color */
.flatpickr-day.inRange:hover {
    background: #E8F0FE !important;
}

/* Solid pills for the ends of the range */
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #1A73E8 !important;
    border-color: #1A73E8 !important;
    color: #fff !important;
}

.flatpickr-day.startRange {
    border-top-left-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
}

.flatpickr-day.endRange {
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}

/* Make sure day borders don’t show as lines */
.flatpickr-day {
    border: 0 !important;
}

/* Remove any underline drawn by themes (before/after or box-shadow) */
.flatpickr-calendar .flatpickr-day.inRange::before,
.flatpickr-calendar .flatpickr-day.inRange::after,
.flatpickr-calendar .flatpickr-day.startRange::before,
.flatpickr-calendar .flatpickr-day.startRange::after,
.flatpickr-calendar .flatpickr-day.endRange::before,
.flatpickr-calendar .flatpickr-day.endRange::after,
.flatpickr-calendar .flatpickr-day.selected::before,
.flatpickr-calendar .flatpickr-day.selected::after {
    content: none !important;
    display: none !important;
}

.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected {
    box-shadow: none !important;
    /* kill theme lines */
    border: 0 !important;
}

/* Keep the clean bar + solid ends */
.flatpickr-calendar .flatpickr-day.inRange {
    background: #E8F0FE !important;
    /* light blue bar */
    color: inherit !important;
}

.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: #1A73E8 !important;
    /* solid pills at ends */
    color: #fff !important;
}

.flatpickr-calendar .flatpickr-day.startRange {
    border-top-left-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
}

.flatpickr-calendar .flatpickr-day.endRange {
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}

/* ===== Review page: remove the search chips / Update button ===== */
.page-review #update-search-btn,
.page-review #new-search-btn,
.page-review .search-toolbar,
.page-review .search-chip-row,
.page-review .search-summary,
.page-review .top-controls {
    /* fallback if your chips live here */
    display: none !important;
}

/* ===== Review page: kill the results two-column layout and sidebar ===== */
.page-review #widget-flight-results-area {
    display: block !important;
    max-width: 860px;
    /* feel free to tweak (800–900px works well) */
    margin: 40px auto !important;
}

.page-review #filter-sidebar,
.page-review #new-search-btn {
    /* any extra buttons that sit with results */
    display: none !important;
}

/* Ensure the review card itself is centered and full width inside that area */
.page-review .confirmation-container {
    max-width: 860px;
    margin: 40px auto;
}

/* ===== REVIEW PAGE OVERRIDES (no body class needed) ===== */
/* Hide the chips bar + Update Search when the review card is on the page */
body:has(.confirmation-container) .search-summary-container,
body:has(.confirmation-container) .search-summary-bar,
body:has(.confirmation-container) .search-toolbar,
body:has(.confirmation-container) .search-chip-row,
body:has(.confirmation-container) #update-search-btn,
body:has(.confirmation-container) .update-search-btn,
body:has(.confirmation-container) [id*="update"][class*="search"],
body:has(.confirmation-container) [class*="update"][class*="search"] {
    display: none !important;
}

/* Collapse any results layout and center the review card */
body:has(.confirmation-container) #widget-flight-results-area {
    display: block !important;
    max-width: 860px;
    margin: 32px auto !important;
}

/* Center the inner column if it exists */
body:has(.confirmation-container) #flight-results-content {
    max-width: 860px !important;
    margin: 0 auto !important;
    min-width: 0 !important;
}

/* Sidebar/“New search” never appear on review */
body:has(.confirmation-container) #filter-sidebar,
body:has(.confirmation-container) #new-search-btn {
    display: none !important;
}

/* Make sure the card itself has a nice width */
body:has(.confirmation-container) .confirmation-container {
    max-width: 860px !important;
    margin: 32px auto !important;
}

/* ===== Review page: widen layout & hide stray bits ===== */

/* 1) Make the review card nice and wide */
body:has(.confirmation-container) .confirmation-container {
    /* grows on big screens, doesn’t crush mobile */
    width: clamp(720px, 70vw, 980px);
    max-width: 980px !important;
    margin: 32px auto !important;
}

/* 2) If the card sits inside any results wrapper, let the wrapper expand */
body:has(.confirmation-container) #widget-flight-results-area,
body:has(.confirmation-container) #flight-results-content,
body:has(.confirmation-container) .results-layout-container {
    display: block !important;
    max-width: 1100px !important;
    width: min(1100px, calc(100% - 40px)) !important;
    margin: 32px auto !important;
    min-width: 0 !important;
}

/* 3) Kill any sidebar/new-search remnants just in case */
body:has(.confirmation-container) #filter-sidebar,
body:has(.confirmation-container) #new-search-btn {
    display: none !important;
}

/* Hide the summary bar + inline search widget anywhere except Results */
.page-review .search-summary-container,
.page-review #search-widget-in-results,
.page-passengers .search-summary-container,
.page-passengers #search-widget-in-results {
    display: none !important;
}

/* If those containers render but are empty, just hide them */
.search-summary-container:empty,
#search-widget-in-results:empty {
    display: none !important;
}

/* Also keep the homepage tabbed search UI off non-results pages */
.page-review .search-container,
.page-passengers .search-container,
.page-results .search-container {
    /* (optional) if you only want it on the homepage */
    display: none !important;
}

/* Hide summary/search widgets on non-results pages */
.page-review .search-summary-container,
.page-review #search-widget-in-results,
.page-passengers .search-summary-container,
.page-passengers #search-widget-in-results {
    display: none !important;
}

/* If they render but are empty, hide them */
.search-summary-container:empty,
#search-widget-in-results:empty {
    display: none !important;
}

/* (Optional) keep homepage search off other pages */
.page-review .search-container,
.page-passengers .search-container {
    display: none !important;
}

/* ===== Passenger Details – Pro Theme (scoped) ===== */
:root {
    --brand-700: #1456b8;
    --brand-600: #1a73e8;
    --brand-50: #eef5ff;
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --border: #e5e7eb;
    --panel: #ffffff;
    --bg: #f8fafc;
    --danger-600: #dc2626;
    --danger-50: #fef2f2;
    --success-600: #16a34a;
}

#passenger-details-container {
    padding: 24px;
    background: var(--bg);
}

#passenger-form {
    max-width: 1140px;
    margin: 0 auto;
}

#passenger-form h3 {
    margin: 0 0 16px;
    color: var(--ink-900);
}

#passenger-form h4 {
    margin: 24px 0 12px;
    color: var(--ink-900);
    font-weight: 700;
}

/* Layout (content + sticky summary) */
.booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
}

@media (max-width: 1024px) {
    .booking-layout {
        grid-template-columns: 1fr;
    }
}

/* Card */
.passenger-form-section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, .06);
    margin: 16px 0;
}

.passenger-title {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ink-900);
}

.passenger-title .badge {
    background: var(--brand-50);
    color: var(--brand-700);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}

/* Grid rows */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

@media (max-width: 720px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-group label {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
    color: var(--ink-700);
}

#passenger-form input[type="text"],
#passenger-form input[type="date"],
#passenger-form input[type="email"],
#passenger-form input[type="tel"],
#passenger-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    color: var(--ink-900);
    background: #fff;
    transition: box-shadow .15s, border-color .15s;
}

#passenger-form input::placeholder {
    color: var(--ink-500);
}

#passenger-form input:focus,
#passenger-form select:focus {
    outline: 0;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .18);
}

/* Error summary + field errors (your JS already toggles these) */
#form-error-summary {
    display: block;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--danger-50);
    border: 1px solid #fecaca;
    border-left: 5px solid var(--danger-600);
    color: #7f1d1d;
    padding: 14px 16px;
}

#passenger-form .input-error {
    border-color: var(--danger-600) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
    background: #fff;
}

/* Saved traveler selector */
.saved-traveler-select {
    background: #fafafa;
    border: 1px dashed var(--border);
    padding: 10px 12px;
    border-radius: 12px;
    margin: 0 0 12px;
}

/* Form actions */
.form-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.form-actions .back-btn {
    background: #fff;
    color: var(--ink-700);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
}

.form-actions .back-btn:hover {
    background: #f9fafb;
}

.form-actions .explore-btn {
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
}

/* Sticky CTA on mobile */
@media (max-width:640px) {
    .form-actions {
        position: sticky;
        bottom: 0;
        background: var(--panel);
        padding: 12px;
        margin: 16px -12px -12px;
        border-top: 1px solid var(--border);
        box-shadow: 0 -10px 24px rgba(2, 6, 23, .05);
    }

    .form-actions .explore-btn {
        flex: 1;
    }
}

/* Trip summary (optional aside) */
.booking-summary {
    position: sticky;
    top: 18px;
    height: fit-content;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, .06);
    padding: 18px;
}

.booking-summary h5 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--ink-900);
}

.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
    color: var(--ink-700);
}

.summary-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    color: var(--ink-900);
}

.summary-tag {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: .78rem;
}

.clock-filter {
    user-select: none;
}

.clock-filter [data-role="drag-overlay"] {
    pointer-events: none;
}

/* Make flex text columns allow ellipsis instead of overflowing */
.flight-card .col-carrier,
.flight-card .col-times,
.flight-card .col-route {
    min-width: 0;
    /* CRUCIAL for flex + ellipsis */
}

/* Truncate very long airline names to one line with … */
.flight-card .carrier-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* If your row is flex, keep columns on one line */
.flight-card .row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}



/* ==== Global, subtle scrollbar styling (Chrome/Edge/Safari + Firefox) ==== */
:root {
    --scrollbar-size: 10px;
    --scrollbar-radius: 999px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(0, 0, 0, .22);
    --scrollbar-thumb-hover: rgba(0, 0, 0, .34);
    --scrollbar-thumb-active: rgba(0, 0, 0, .48);
}

@media (prefers-color-scheme: dark) {
    :root {
        --scrollbar-thumb: rgba(255, 255, 255, .22);
        --scrollbar-thumb-hover: rgba(255, 255, 255, .34);
        --scrollbar-thumb-active: rgba(255, 255, 255, .48);
    }
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome/Edge/Safari */
*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
    border: 2px solid transparent;
    /* creates a nice inset look */
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active);
}

/* Prevent layout shift when scrollbars appear/disappear */
html,
body {
    scrollbar-gutter: stable both-edge;
}

/* Filter sidebar: sticky + own scroll, never blocks page */
#filter-sidebar {
    position: sticky;
    top: 16px;
    /* match your header spacing */
    max-height: calc(100vh - 32px);
    /* viewport-safe */
    overflow: auto;
    /* keep its own scrollbar */
    padding-right: 4px;
    /* room so thumb never overlaps content */
}

/* Optional: airline checklist spacing so long lists stay readable */
#filter-airlines-checklist .checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}


/* Airline block: logo above, name below */
.airline-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 96px;
    /* reserve a tidy column so it never overlaps times */
    max-width: 120px;
    /* keep names tidy on small screens */
}

.airline-logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* Name below logo, wraps gracefully (2 lines max) */
.airline-name {
    text-align: center;
    font-size: .78rem;
    line-height: 1.15;
    max-width: 100%;
    display: -webkit-box;
    /* nice 2-line clamp on WebKit */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fallback clamp for browsers without -webkit-line-clamp support */
@supports not (-webkit-line-clamp: 2) {
    .airline-name {
        white-space: normal;
        max-height: 2.3em;
        /* roughly 2 lines */
        overflow: hidden;
    }
}

/* Make sure the card layout leaves space for the airline column */
.flight-offer-card .offer-main {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    /* airline | itinerary | price */
    gap: 16px;
    align-items: center;
}

.validating-badge {
    margin-top: 6px;
    font-size: .72rem;
    color: #64748b;
    /* slate-500 */
    background: #f1f5f9;
    /* slate-100 */
    border: 1px solid #e2e8f0;
    /* slate-200 */
    border-radius: 6px;
    padding: 3px 6px;
    display: inline-block;
}

/* Global modern scrollbar for the whole site */
* {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #c7d2fe transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c7d2fe;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* Pagination bar */
.pager {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 16px 0 6px;
    flex-wrap: wrap;
}

.pager-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.pager-btn:hover:not(:disabled) {
    background: #f8fafc;
}

.pager-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.pager-btn.active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

.pager-ellipsis {
    padding: 0 4px;
    color: #64748b;
}

/* airline name below logo */
.airline-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 96px;
}

.airline-name-under {
    font-size: .78rem;
    line-height: 1.18;
    text-align: center;
    margin: 6px 0 0 0;
    white-space: normal;
    overflow: hidden;
    max-width: 96px;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.results-pager {
    display: flex;
    justify-content: center;
    margin: 16px 0 32px;
}

.pager-bar {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pager-bar button {
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.pager-bar button.active {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}

.pager-bar button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

#return-clock-container {
    display: block !important;
}

/* Make .hidden win for the passenger popovers */
.flight-search-widget .widget-passenger-dropdown.hidden {
    display: none;
}

.budget-container .passenger-dropdown.hidden {
    display: none;
}

.input-field-group {
    position: relative;
}

.widget-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow: auto;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    border-radius: 8px;
    z-index: 1000;
    /* sit on top of results/filters */
    pointer-events: auto;
    /* ensure it can be clicked */
}

.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
}

.autocomplete-item:hover {
    background: #f2f6ff;
}

.input-field-group {
    position: relative;
}

.widget-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
}

.field-icon {
    pointer-events: none;
}


/* === RESULTS PAGE: compact passenger dropdown (same as homepage) === */
#widget-flight-results-area .passenger-control-group {
    position: relative;
}

#widget-flight-results-area .widget-passenger-dropdown,
#widget-flight-results-area .passenger-dropdown {
    position: absolute;
    /* anchor to the trigger */
    top: calc(100% + 8px);
    left: 0;
    right: auto !important;
    /* prevent stretching */
    width: 320px !important;
    /* compact width */
    max-width: 90vw;
    /* safe on mobile */
    background: #fff;
    border: 1px solid var(--widget-border-color, #DADCE0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 16px;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    z-index: 1010;
}

/* tidy inner rows so they stack nicely */
#widget-flight-results-area .passenger-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#widget-flight-results-area .passenger-stepper input[type="number"] {
    width: 36px;
    text-align: center;
}

#widget-flight-results-area .passenger-done-btn {
    align-self: flex-end;
}

/* ensure any element using the HTML `hidden` attribute is actually hidden */
[hidden] {
    display: none !important;
}

/* =========================
   Budget discovery UX
   ========================= */
.search-container #budget-search-module .budget-container {
    display: grid;
    gap: 14px;
}

.budget-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.budget-kicker {
    display: inline-flex;
    margin-bottom: 6px;
    color: #0056b3;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.budget-panel-top h2 {
    margin: 0;
    color: #111827 !important;
    font-size: clamp(1.25rem, 1.7vw, 1.7rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
}

.budget-origin-control {
    position: relative;
    justify-self: end;
}

.budget-origin-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dbe6f5;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.budget-origin-chip .material-icons-outlined {
    color: #0056b3;
    font-size: 18px;
}

.budget-origin-chip strong {
    color: #0f172a;
    font-weight: 700;
}

.budget-origin-chip:hover,
.budget-origin-chip:focus-visible,
.budget-origin-chip.is-overridden {
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12);
    outline: none;
}

.budget-origin-popover {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    width: 220px;
    box-sizing: border-box;
    padding: 9px;
    display: grid;
    gap: 7px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.13);
    z-index: 1300;
}

.budget-origin-popover label {
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
}

.budget-origin-popover input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
}

.budget-origin-popover input:focus {
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.14);
    outline: none;
}

.budget-origin-results {
    display: grid;
    gap: 5px;
    max-height: 160px;
    overflow: auto;
}

.budget-origin-option {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 1px 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 7px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
}

.budget-origin-option strong {
    grid-row: 1 / 3;
    align-self: center;
    color: #0056b3;
    font-size: 0.82rem;
    font-weight: 700;
}

.budget-origin-option span,
.budget-origin-option small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-origin-option span {
    font-size: 0.82rem;
    font-weight: 600;
}

.budget-origin-option small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
}

.budget-origin-option:hover {
    border-color: #0056b3;
    background: #f4f8ff;
}

.budget-origin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding-top: 2px;
}

.budget-origin-reset,
.budget-origin-close {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.budget-origin-reset {
    border: 1px solid #d8e2ef;
    background: #fff;
    color: #334155;
}

.budget-origin-close {
    border: 1px solid #0056b3;
    background: #0056b3;
    color: #fff;
}

.budget-discovery-form {
    display: grid;
    gap: 10px;
}

.budget-intent-picker {
    margin: 0;
    padding: 0;
    border: 0;
}

.budget-intent-picker legend {
    margin: 0 0 8px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
}

.budget-intent-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.budget-intent-option {
    min-width: 0;
    min-height: 63px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 8px 8px;
    border: 1px solid #dbe6f5;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    cursor: pointer;
}

.budget-intent-option .material-icons-outlined {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef6ff;
    color: #0056b3;
    font-size: 18px;
}

.budget-intent-option strong {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.1;
}

.budget-intent-option small {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.1;
}

.budget-intent-option:hover,
.budget-intent-option:focus-visible {
    border-color: #0b6bd3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
    outline: none;
}

.budget-intent-option.is-active {
    border-color: #0056b3;
    background: #f3f8ff;
    box-shadow: inset 0 0 0 1px #0056b3, 0 10px 24px rgba(0, 86, 179, 0.1);
}

.budget-intent-option.is-active .material-icons-outlined {
    background: #0056b3;
    color: #fff;
}

.budget-money-field {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
        "currency input"
        "currency input";
    align-items: center;
    overflow: hidden;
    min-height: 66px;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.budget-money-field .currency-icon {
    grid-area: currency;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #dce5f0;
    border-radius: 0;
    background: #eaf2ff;
    color: #0056b3;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.budget-money-field label {
    grid-area: label;
    align-self: end;
    padding: 8px 16px 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 600;
}

.budget-container .budget-money-field .budget-input {
    grid-area: input;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: auto;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: clamp(1.12rem, 2vw, 1.62rem);
    font-weight: 600;
    text-align: left;
}

.budget-container .budget-money-field .budget-input::placeholder {
    color: #9ca3af;
}

.budget-container .budget-money-field .budget-input:focus {
    outline: none;
}

.budget-money-field:focus-within {
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.14), 0 10px 24px rgba(15, 23, 42, 0.06);
}

.budget-control-grid {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(145px, 1fr) minmax(145px, 1fr) 154px;
    gap: 10px;
    align-items: end;
}

.budget-container .passenger-wrapper {
    position: relative;
    display: block;
}

.budget-container .passenger-button,
.budget-container .date-input,
.budget-control-grid .flatpickr-input,
.budget-search-submit {
    min-height: 42px;
    border-radius: 9px;
}

.budget-container .passenger-button {
    width: 100%;
    border: 1px solid #d1dbe8 !important;
    background: #fff;
    color: #111827;
    padding: 0 12px;
    font-size: 0.92rem;
    font-weight: 500;
}

.budget-container .passenger-button .material-icons-outlined {
    color: #0056b3;
}

.budget-container .passenger-button .label {
    margin-left: 8px;
    text-align: left;
    font-weight: 500;
}

.budget-container .passenger-button #passenger-count {
    font-weight: 500;
}

.budget-container .passenger-button .arrow {
    color: #64748b;
}

.budget-container .date-group {
    display: grid;
    gap: 5px;
}

.budget-container .date-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #475569 !important;
    font-size: 0.76rem;
    font-weight: 600;
}

.budget-container .date-label .material-icons-outlined {
    color: #0056b3;
    font-size: 17px;
}

.budget-container .date-input,
.budget-control-grid .flatpickr-input {
    width: 100%;
    border: 1px solid #d1dbe8;
    background: #fff;
    color: #111827;
    padding: 0 12px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
}

.budget-container .date-input:focus,
.budget-control-grid .flatpickr-input:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.14);
}

.budget-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.budget-search-submit .material-icons-outlined {
    font-size: 18px;
}

.budget-search-submit:disabled {
    cursor: wait;
    opacity: 0.72;
}

.budget-container .passenger-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    transform: none;
    width: 250px;
    max-width: min(90vw, 300px);
    padding: 10px;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.15);
    z-index: 1200;
}

.budget-pax-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #eef2f7;
    color: #111827;
}

.budget-pax-row:first-child {
    padding-top: 0;
}

.budget-pax-row strong,
.budget-pax-row small {
    display: block;
}

.budget-pax-row strong {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.08;
}

.budget-pax-row small {
    margin-top: 1px;
    color: #64748b;
    font-size: 0.7rem;
    line-height: 1.05;
}

.budget-stepper {
    display: inline-grid;
    grid-template-columns: 28px 34px 28px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
}

.budget-stepper button,
.budget-stepper input {
    height: 28px;
    border: 0;
    background: #fff;
    color: #0f172a;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
}

.budget-stepper button {
    color: #0056b3;
    cursor: pointer;
}

.budget-stepper button:hover {
    background: #edf5ff;
}

.budget-stepper input {
    width: 34px !important;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0 !important;
    background: #f8fafc;
    padding: 0 !important;
    pointer-events: none;
    -moz-appearance: textfield;
}

.budget-stepper input::-webkit-outer-spin-button,
.budget-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.budget-stepper input:focus {
    outline: none;
}

.budget-dropdown-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-top: 8px;
    margin-left: auto;
    padding: 0 14px;
    border: 1px solid #0056b3;
    border-radius: 8px;
    background: #0056b3;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.budget-quick-row {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
}

.budget-quick-chip {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #d8e2ef;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
}

.budget-quick-chip:hover,
.budget-quick-chip.active {
    border-color: #0056b3;
    background: #eaf2ff;
    color: #0056b3;
}

.budget-search-feedback {
    min-height: 0;
    margin: 2px 0 0;
    color: #b42318 !important;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
}

.budget-search-feedback:empty {
    display: none;
}

.search-container .tab-link {
    font-weight: 500;
}

.search-container .tab-link.active {
    font-weight: 600;
}

.budget-buckets-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #dbe6f5;
    border-radius: 999px;
    background: #fff;
}

.budget-buckets-preview span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    border-right: 1px solid #e2e8f0;
}

.budget-buckets-preview span:last-child {
    border-right: 0;
}

.budget-results-shell {
    display: grid;
    gap: 16px;
}

.budget-results-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.budget-results-header h2 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.2rem;
}

.budget-results-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.budget-results-meta span,
.budget-fit-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 800;
}

.budget-results-total {
    color: #0056b3;
    text-align: right;
    font-size: 1.45rem;
    font-weight: 900;
    white-space: nowrap;
}

.budget-results-list {
    display: grid;
    gap: 14px;
}

.budget-result-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.46fr);
    gap: 18px;
    align-items: start;
    position: relative;
    padding: 18px;
    border: 1px solid #dbe6f5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.budget-result-card.is-complete {
    border-color: #b8ead0;
}

.budget-trip-ready {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48;
    font-size: 0.78rem;
    font-weight: 900;
}

.budget-trip-ready .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #12b76a;
    color: #fff;
    font-size: 14px;
}

.budget-trip-ready small {
    color: #027a48;
    font-size: 0.72rem;
    font-weight: 800;
}

.budget-result-card--pending {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 168px;
    border-style: dashed;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    color: #475569;
}

.budget-result-card--pending.is-active {
    border-style: solid;
    border-color: #bfdbfe;
}

.budget-result-card--pending strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    margin-bottom: 4px;
}

.budget-result-card--pending p {
    margin: 0;
    color: #64748b;
    font-weight: 700;
}

.budget-trip-pending-loader {
    position: relative;
    width: 124px;
    display: block;
}

/* The exact Eridura logo draws itself in: a left-to-right reveal of the real
   logo (so the plane is exactly its logo size), a soft light leading the
   draw edge, a gentle settle + shadow on landing, a calm "still loading"
   breath, then a graceful fade and redraw. */
.budget-trip-pending-logo {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    pointer-events: none;
    transform-origin: 50% 60%;
    clip-path: inset(0 100% 0 0);
    transform: translateY(6px) scale(0.985);
    filter: drop-shadow(0 5px 9px rgba(11, 103, 216, 0));
    animation: budget-eridura-draw 3.6s cubic-bezier(0.33, 0, 0.22, 1) infinite;
}

/* Soft light leading the draw edge. */
.budget-trip-pending-loader::after {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 18px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(56, 132, 255, 0.55), rgba(56, 132, 255, 0));
    filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    animation: budget-eridura-spark 3.6s cubic-bezier(0.33, 0, 0.22, 1) infinite;
}

@keyframes budget-eridura-draw {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(6px) scale(0.985);
        filter: drop-shadow(0 5px 9px rgba(11, 103, 216, 0));
    }
    6% {
        opacity: 1;
    }
    50% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 7px 12px rgba(11, 103, 216, 0.22));
    }
    /* Calm "still loading" breathing while assembled as the logo. */
    66% {
        transform: translateY(0) scale(1.015);
    }
    82% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 7px 12px rgba(11, 103, 216, 0.22));
    }
    96% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 5px 9px rgba(11, 103, 216, 0));
    }
}

@keyframes budget-eridura-spark {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }
    8% {
        opacity: 1;
    }
    46% {
        opacity: 1;
        transform: translateX(116px);
    }
    54% {
        opacity: 0;
        transform: translateX(126px);
    }
    100% {
        opacity: 0;
        transform: translateX(126px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .budget-trip-pending-logo {
        animation: none;
        opacity: 1;
        clip-path: none;
        transform: none;
        filter: none;
    }
    .budget-trip-pending-loader::after {
        animation: none;
        opacity: 0;
    }
}

.budget-result-main {
    min-width: 0;
}

.budget-result-title {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.budget-result-title h3 {
    margin: 0;
    color: #111827;
    font-size: 1.18rem;
}

.budget-fit-badge {
    background: #e7f7ef;
    color: #027a48;
}

.budget-fit-badge--intent {
    background: #eef6ff;
    color: #0056b3;
}

.budget-visa-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #dbe6f5;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 900;
}

.budget-visa-badge--free {
    border-color: #bbf7d0;
    background: #ecfdf3;
    color: #027a48;
}

.budget-visa-badge--required {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b42318;
}

.budget-visa-badge--conditional {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.budget-intent-reason {
    margin: 6px 0 0;
    color: #40566f;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
}

.budget-result-sub {
    margin: 6px 0 16px;
    color: #64748b;
    font-weight: 700;
}

.budget-cost-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.budget-cost-grid div {
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5edf7;
}

.budget-cost-grid span {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
}

.budget-cost-grid strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 0.96rem;
}

.budget-flight-summary {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #fbfdff;
}

.budget-flight-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.budget-flight-kicker {
    display: block;
    margin-bottom: 2px;
    color: #0056b3;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.budget-flight-summary-head strong {
    display: block;
    color: #111827;
    font-size: 0.96rem;
}

.budget-flight-route-note {
    display: block;
    max-width: 360px;
    margin-top: 3px;
    color: #52657d;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.35;
}

.budget-flight-price {
    text-align: right;
}

.budget-flight-price small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

.budget-flight-legs {
    display: grid;
    gap: 8px;
}

.budget-flight-leg {
    padding: 10px;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    background: #fff;
}

.budget-flight-leg-overview {
    display: grid;
    grid-template-columns: 68px minmax(120px, 1fr) auto minmax(100px, 0.7fr);
    align-items: center;
    gap: 10px;
}

.budget-flight-leg-overview > span {
    color: #0056b3;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.budget-flight-route strong,
.budget-flight-duration strong {
    display: block;
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.15;
}

.budget-flight-route small,
.budget-flight-duration small,
.budget-flight-route em {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
}

.budget-flight-route em {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-flight-route.is-arrival em {
    margin-left: auto;
}

.budget-flight-duration {
    min-width: 78px;
    padding: 7px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    text-align: center;
}

.budget-flight-duration.is-direct {
    border-color: #bbf7d0;
    background: #ecfdf3;
}

.budget-flight-duration.has-stops {
    border-color: #fed7aa;
    background: #fff7ed;
}

.budget-flight-duration strong {
    color: #0056b3;
    font-size: 0.8rem;
}

.budget-flight-duration small {
    color: #0056b3;
    font-size: 0.68rem;
}

.budget-flight-duration.is-direct strong,
.budget-flight-duration.is-direct small {
    color: #047857;
}

.budget-flight-duration.has-stops strong,
.budget-flight-duration.has-stops small {
    color: #c2410c;
}

.budget-flight-route.is-arrival {
    text-align: right;
}

.budget-flight-segments {
    display: grid;
    gap: 6px;
    width: 100%;
    margin: 12px 0 0;
    padding: 12px 12px 0;
    border-top: 1px solid #e5edf7;
}

.budget-flight-details {
    display: grid;
    justify-items: stretch;
    margin-top: 18px;
}

.budget-flight-details summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1.5px solid #111827;
    border-radius: 999px;
    background: #ffffff;
    color: #0056b3;
    cursor: pointer;
    font-size: 0.89rem;
    font-weight: 800;
    list-style: none;
    justify-self: center;
}

.budget-flight-details[open] summary {
    border-color: #0056b3;
    background: #eff6ff;
}

.budget-flight-details summary::-webkit-details-marker {
    display: none;
}

.airport-code-tooltip {
    border-bottom: 1px dotted currentColor;
    cursor: help;
    text-decoration: none;
}

/* Signed-in account pill */
.main-header .icon-dropdown {
    position: relative;
}

.main-header .user-menu-button {
    --profile-initial: "A";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 36px;
    padding: 0 12px 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.main-header .user-menu-button:hover,
.main-header .user-menu-button[aria-expanded="true"] {
    border-color: #1a73e8;
    background: #f8fbff;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.main-header .user-menu-button:focus-visible {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}

.main-header .user-menu-button .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0056b3;
    font-size: 18px;
    line-height: 1;
}

.main-header .user-menu-button #welcome-message-username {
    display: inline-block;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.main-header .user-menu-button::after {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin-left: 1px;
    border-right: 1.7px solid #64748b;
    border-bottom: 1.7px solid #64748b;
    transform: translateY(-1px) rotate(45deg);
    transition: transform 0.16s ease;
}

.main-header .user-menu-button[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(225deg);
}

.main-header .user-menu-content {
    top: calc(100% + 10px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 210px;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.main-header .user-menu-content a,
.main-header .user-menu-content button {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: #243047;
    font-size: 13px;
    font-weight: 700;
    line-height: 40px;
}

.main-header .user-menu-content a:hover,
.main-header .user-menu-content button:hover,
.main-header .user-menu-content a:focus-visible,
.main-header .user-menu-content button:focus-visible {
    outline: none;
    background: #f1f6ff;
    color: #0056b3;
}

.main-header .user-menu-content hr {
    margin: 6px -6px;
    border: 0;
    border-top: 1px solid #edf2f7;
}

.status-pill.guest {
    background: #eff6ff;
    color: #0056b3;
}

.bookings-list {
    display: grid;
    gap: 16px;
}

.booking-subtitle {
    margin: -8px 0 14px;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
}

.bookings-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 620px;
    margin: 28px auto 0;
    padding: 34px 24px;
    border: 1px solid #d8e4f4;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    text-align: center;
}

.bookings-empty-state .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0056b3;
}

.bookings-empty-state strong {
    color: #0f172a;
    font-size: 1.1rem;
}

.bookings-empty-state p {
    max-width: 460px;
    margin: 0;
    color: #52637a;
    line-height: 1.55;
}

.bookings-empty-state.is-error {
    border-color: #fecaca;
    background: #fff7f7;
}

.bookings-empty-state.is-error .material-icons-outlined {
    background: #fee2e2;
    color: #dc2626;
}

.bookings-empty-state .explore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #0b63ce;
    border-radius: 8px;
    background: #0b63ce;
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
}

.profile-page .page-container,
.my-bookings-page .page-container {
    max-width: 1200px;
}

/* Nudge the header logo a touch to the left on account-private pages so it
   visually aligns with the left edge of the card grid below the header. */
body.profile-page .header-logo,
body.my-bookings-page .header-logo {
    margin-left: -24px;
}

.profile-page .profile-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.75fr);
    gap: 30px;
}

.profile-page .profile-section {
    border: 1px solid #d8e4f4;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.profile-page .profile-section h3,
.profile-page .profile-section h4 {
    color: #0f172a;
}

.profile-page .profile-section > h3 {
    margin-bottom: 18px;
    border-bottom: 1px solid #e8eef7;
}

.profile-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8eef7;
}

.profile-section-heading h3 {
    margin: 0 0 4px;
    padding: 0;
    border: 0;
}

.profile-section-heading p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.profile-section-heading > .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #eaf2ff;
    color: #0056b3;
}

.profile-page .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.profile-page aside .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-page .form-group {
    min-width: 0;
}

.profile-page .form-group label {
    color: #243047;
    font-size: 0.86rem;
    font-weight: 800;
}

.profile-page .form-input {
    height: 42px;
    border: 1px solid #cbd8ea;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.95rem;
}

.profile-page .form-input:focus {
    border-color: #0b63ce;
    box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.14);
}

.profile-page .flatpickr-input,
.profile-page .flatpickr-input[readonly] {
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.profile-page .flatpickr-calendar {
    border: 1px solid #d8e4f4;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.profile-page .flatpickr-day.disabled,
.profile-page .flatpickr-day.disabled:hover {
    color: #cbd5e1;
    background: transparent;
    cursor: not-allowed;
}

.passport-profile-warning {
    margin: 8px 0 0;
    padding: 10px 12px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}

.passport-profile-warning.is-critical {
    border-color: #fecaca;
    background: #fff7f7;
    color: #b91c1c;
}

.profile-page .form-actions {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed #d8e4f4;
}

.profile-page .form-actions .explore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border: 1px solid #0b63ce;
    border-radius: 8px;
    background: #0b63ce;
    color: #ffffff;
    font-weight: 800;
}

.profile-page .form-actions .explore-btn:hover {
    background: #084fa6;
    border-color: #084fa6;
}

.profile-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px 18px;
    border: 1px dashed #cbd8ea;
    border-radius: 10px;
    background: #f8fbff;
    text-align: center;
}

.profile-empty-state .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0056b3;
}

.profile-empty-state strong {
    color: #0f172a;
}

.profile-empty-state p {
    margin: 0;
    color: #64748b;
    line-height: 1.45;
}

.profile-empty-state--error {
    border-color: #fecaca;
    background: #fff7f7;
}

.profile-empty-state--error .material-icons-outlined {
    background: #fee2e2;
    color: #dc2626;
}

.profile-page .saved-travelers-list {
    gap: 12px;
}

.profile-page .saved-traveler-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #d8e4f4;
    border-radius: 10px;
    background: #ffffff;
}

.profile-page .traveler-avatar {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0056b3;
    font-size: 0.82rem;
    font-weight: 900;
}

.profile-page .traveler-card-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.profile-page .traveler-card-info strong {
    color: #0f172a;
    font-size: 0.98rem;
}

.profile-page .traveler-card-info span,
.profile-page .traveler-card-info small {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.3;
}

.profile-page .delete-traveler-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    background: #fff7f7;
    color: #dc2626;
    font-size: 1rem;
}

.profile-page .delete-traveler-btn .material-icons-outlined {
    font-size: 18px;
}

.profile-page .delete-traveler-btn:hover {
    background: #fee2e2;
    color: #b91c1c;
}

@media (max-width: 980px) {
    .profile-page .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .profile-page .form-row,
    .profile-page aside .form-row {
        grid-template-columns: 1fr;
    }
}

.budget-flight-segment {
    display: grid;
    grid-template-columns: minmax(78px, 0.85fr) minmax(86px, 0.8fr) minmax(78px, 0.85fr);
    align-items: center;
    gap: 8px;
}

.budget-flight-timepoint strong {
    display: block;
    color: #111827;
    font-size: 0.84rem;
    line-height: 1.1;
}

.budget-flight-timepoint span {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 800;
}

.budget-flight-timepoint small {
    display: block;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
}

.budget-flight-timepoint .budget-airport-name {
    max-width: 124px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #52657d;
    font-size: 0.62rem;
}

.budget-flight-timepoint.is-arrival .budget-airport-name {
    margin-left: auto;
}

.budget-flight-timepoint.is-arrival {
    text-align: right;
}

.budget-flight-path {
    display: grid;
    gap: 3px;
    align-items: center;
    color: #0056b3;
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
}

.budget-flight-path > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 5px;
}

.budget-flight-path i {
    display: block;
    height: 1px;
    background: #cbdaf0;
}

.budget-flight-path .material-icons-outlined {
    color: #0d6efd;
    font-size: 16px;
}

.budget-flight-segment-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 8px;
    border-radius: 9px;
    background: #f8fafc;
}

.budget-flight-segment-meta span {
    display: block;
    color: #64748b;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.budget-flight-segment-meta strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 0.7rem;
    line-height: 1.2;
}

.budget-flight-layover {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px dashed #bfdbfe;
    border-radius: 999px;
    background: #f8fbff;
    color: #52657d;
    font-size: 0.68rem;
    font-weight: 800;
}

.budget-flight-layover .material-icons-outlined {
    color: #0d6efd;
    font-size: 14px;
}

.budget-hotel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.budget-hotel-photo-wrap {
    position: relative;
    flex: 0 0 165px;
    width: 165px;
    height: 115px;
    overflow: hidden;
    border-radius: 10px;
    background: #eaf3ff;
}

.budget-hotel-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.budget-hotel-photo-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #0056b3;
    font-size: 30px;
}

.budget-hotel-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.52);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
}

.budget-hotel-nav--prev {
    left: 6px;
}

.budget-hotel-nav--next {
    right: 6px;
}

.budget-hotel-nav .material-icons-outlined {
    font-size: 18px;
}

.budget-hotel-photo-count {
    position: absolute;
    right: 7px;
    bottom: 7px;
    z-index: 2;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 22px;
}

.budget-hotel-summary div {
    min-width: 0;
}

.budget-hotel-text {
    flex: 1 1 auto;
}

.budget-hotel-kicker {
    display: block;
    margin-bottom: 2px;
    color: #0056b3;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.budget-hotel-summary strong {
    display: block;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.budget-hotel-summary small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
}

.budget-hotel-text small:not(.budget-hotel-clean-details) {
    display: none;
}

.budget-hotel-cancellation-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    max-width: 100%;
    min-height: 26px;
    margin-top: 7px;
    padding: 0 10px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

.budget-hotel-cancellation-badge .material-icons-outlined {
    font-size: 16px;
}

.budget-hotel-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #0056b3;
    font-size: 0.76rem;
    font-weight: 700;
}

.budget-hotel-badge.is-live {
    border-color: #bbf7d0;
    background: #ecfdf3;
    color: #027a48;
}

.budget-hotel-badge.is-estimate {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.page-budget-results {
    background: #eef3f9;
    min-height: 100vh;
    overflow-x: clip;
}

.budget-results-page {
    width: var(--eridura-results-rail-width, min(var(--container-width), calc(100% - 64px)));
    max-width: none;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: var(--eridura-results-rail-left, max(32px, calc((100vw - var(--container-width)) / 2)));
    padding: 34px 0 72px;
}

.budget-results-page-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 26px 28px;
    border: 1px solid #d8e4f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

.budget-results-page-hero h1 {
    margin: 4px 0 8px;
    color: #111827;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.budget-results-page-hero p {
    max-width: 680px;
    margin: 0;
    color: #475569;
    font-size: 1rem;
    line-height: 1.55;
}

.budget-results-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #0056b3;
    border-radius: 8px;
    background: #fff;
    color: #0056b3;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.budget-results-action:hover {
    background: #eff6ff;
}

.budget-results-page-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.budget-results-page-summary span,
.budget-results-page-summary strong {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dbe6f5;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
}

.budget-results-page-summary strong {
    background: #eaf3ff;
    color: #0056b3;
}

.budget-results-page-shell {
    display: grid;
    gap: 16px;
}

@media (max-width: 760px) {
    .budget-results-page {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }
}

.budget-results-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 150px;
    border: 1px solid #dbe6f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
    color: #334155;
    font-weight: 700;
}

.budget-results-loading .runway-strip.mini {
    position: static;
    transform: none;
    width: auto;
    height: auto;
}

.budget-results-loading .runway-strip.mini .light {
    width: 10px;
    height: 32px;
}

.budget-result-side {
    display: grid;
    align-content: start;
    align-items: stretch;
    gap: 16px;
    min-width: 0;
    text-align: right;
}

.budget-result-card.is-complete .budget-result-side {
    padding-top: 36px;
}

.budget-result-weather {
    align-self: start;
    width: 100%;
    min-width: 0;
    text-align: left;
}

.budget-result-weather:empty {
    display: none;
}

.budget-result-weather .trip-weather-card {
    margin-top: 0;
    padding: 14px 13px;
    max-height: none;
    overflow: visible;
    text-align: left;
}

.budget-result-weather .trip-weather-card-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.budget-result-weather .trip-weather-icon-slot {
    position: static !important;
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
    margin-top: 0;
    justify-self: center;
}

.budget-result-weather .trip-weather-icon-slot img,
.budget-result-weather .trip-weather-icon-slot > .material-icons-outlined {
    width: 24px;
    height: 24px;
    font-size: 22px;
    line-height: 1;
}

.budget-result-weather .trip-weather-card-head > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.budget-result-weather .trip-weather-card small {
    display: grid;
    gap: 1px;
    font-size: 0.68rem;
    line-height: 1.2;
}

.budget-result-weather .trip-weather-card strong {
    margin-top: 4px;
    font-size: 0.9rem;
    line-height: 1.25;
}

.budget-result-weather .trip-weather-day-summary {
    min-width: 0;
}

.budget-result-weather .trip-weather-day-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.budget-result-weather .trip-weather-day-top > div {
    min-width: 0;
}

.budget-result-weather .trip-weather-day-top strong {
    justify-self: end;
    max-width: 150px;
    white-space: normal;
    text-align: right;
    line-height: 1.18;
}

.budget-result-weather .trip-weather-extend {
    margin-top: 10px;
}

.budget-result-weather .trip-weather-extend summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 36px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #0056b3;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 850;
    list-style: none;
}

.budget-result-weather .trip-weather-extend summary::-webkit-details-marker {
    display: none;
}

.budget-result-weather .trip-weather-extend summary .material-icons-outlined {
    font-size: 17px;
}

.budget-result-weather .trip-weather-days--extended {
    margin-top: 10px;
}

.budget-result-weather .trip-weather-days--extended .trip-weather-day-card,
.trip-weather-card--budget .trip-weather-days--extended .trip-weather-day-card {
    background: rgba(255, 255, 255, 0.92);
}

.budget-est-total span,
.budget-headroom span {
    display: block;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
}

.budget-est-total strong {
    color: #111827;
    font-size: 1.45rem;
    font-weight: 900;
}

.budget-headroom strong {
    color: #027a48;
    font-size: 1rem;
    font-weight: 900;
}

.budget-trip-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #0b67d8;
    color: #fff;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(11, 103, 216, 0.18);
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.budget-trip-select-btn:hover {
    background: #075bbf;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(11, 103, 216, 0.22);
}

.budget-trip-select-btn:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.budget-inline-error {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-weight: 700;
}

.budget-card-details {
    grid-column: 1 / -1;
    border-top: 1px solid #eef2f7;
    padding-top: 12px;
}

.budget-card-details summary {
    cursor: pointer;
    color: #0056b3;
    font-weight: 800;
}

.budget-buckets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.budget-buckets-grid div {
    padding: 10px;
    border: 1px solid #e5edf7;
    border-radius: 10px;
    background: #f8fafc;
}

.budget-buckets-grid span {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
}

.budget-buckets-grid strong {
    display: block;
    margin-top: 4px;
    color: #111827;
}

.budget-data-source {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.budget-data-source--warning {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
}

.budget-data-source--warning strong {
    display: block;
    margin-bottom: 4px;
    color: #7c2d12;
}

.budget-data-source--warning p {
    margin: 0;
    line-height: 1.45;
}

.budget-empty-state {
    padding: 28px;
    border: 1px solid #dbe6f5;
    border-radius: 12px;
    background: #fff;
    color: #475569;
    text-align: center;
}

.budget-empty-state h3 {
    margin: 0 0 8px;
    color: #111827;
}

.trip-weather-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    color: #0f172a;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.results-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}

.results-top-grid .results-header {
    margin-bottom: 0;
}

.results-weather-side .trip-weather-card {
    margin: 0;
}

.flight-results-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.flight-results-board--with-weather {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.flight-results-list-column {
    min-width: 0;
}

.flight-card-list {
    display: grid;
    gap: 16px;
}

.flight-card-list .flight-offer-card {
    margin: 0;
}

.flight-results-weather-rail {
    position: sticky;
    top: 88px;
    min-width: 0;
}

.flight-results-weather-rail .trip-weather-card {
    margin: 0;
}

#widget-flight-results-area #filter-sidebar {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-width: none;
}

#widget-flight-results-area #filter-sidebar::-webkit-scrollbar {
    display: none;
}

.trip-weather-card--muted {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.trip-weather-card-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
}

.trip-weather-card-head > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.trip-weather-icon-slot {
    grid-column: 1;
    grid-row: 1;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-top: 0;
    border-radius: 12px;
    background: #eef5ff;
    justify-self: center;
    overflow: hidden;
}

.trip-weather-icon-slot img,
.trip-weather-icon-slot > .material-icons-outlined {
    position: static !important;
    display: block;
    width: 26px;
    height: 26px;
    min-width: 0;
    flex: none;
}

.trip-weather-icon-slot > .material-icons-outlined {
    color: #0b6fe8;
    font-size: 26px;
    line-height: 1;
}

.trip-weather-card small {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.trip-weather-card small span {
    display: block;
}

.trip-weather-card strong {
    display: block;
    margin-top: 2px;
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.trip-weather-card p {
    margin: 9px 0 0;
    color: #64748b;
    line-height: 1.5;
}

.trip-weather-note {
    font-size: 0.76rem;
    color: #64748b;
}

.trip-weather-meta,
.trip-weather-day-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.trip-weather-meta span,
.trip-weather-day-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
}

.trip-weather-days {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.trip-weather-day-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
}

.trip-weather-day-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.trip-weather-day-top small {
    text-transform: none;
    font-size: 0.74rem;
    font-weight: 800;
    color: #334155;
}

.trip-weather-day-top span {
    display: block;
    margin-top: 2px;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
}

.trip-weather-day-top strong {
    flex: 0 0 auto;
    margin-top: 0;
    font-size: 0.95rem;
    white-space: nowrap;
}

.trip-weather-day-meta {
    margin-top: 0;
    gap: 6px;
}

.trip-weather-day-meta span {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.72rem;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.trip-clothes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trip-clothes-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fbff;
}

.trip-clothes-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

.trip-clothes-icon em {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.budget-result-weather .trip-weather-days {
    grid-template-columns: 1fr;
}

.trip-weather-card--specific .trip-weather-days {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .results-top-grid {
        grid-template-columns: 1fr;
    }

    .flight-results-board--with-weather {
        grid-template-columns: 1fr;
    }

    .flight-results-weather-rail {
        position: static;
    }

    .budget-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-intent-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-intent-option {
        min-height: 65px;
        border-radius: 18px;
    }

    .budget-search-submit {
        grid-column: 1 / -1;
    }

    .budget-result-card {
        grid-template-columns: 1fr;
    }

    .budget-result-side {
        text-align: left;
    }

    .budget-result-weather {
        grid-column: 1;
    }

    .budget-flight-leg-overview,
    .budget-flight-segment,
    .budget-flight-segment-meta {
        grid-template-columns: 1fr;
    }

    .budget-flight-route.is-arrival,
    .budget-flight-timepoint.is-arrival {
        text-align: left;
    }
}

@media (max-width: 640px) {
    html,
    body {
        overflow-x: hidden;
    }

    .main-header {
        padding: 0 12px !important;
    }

    .main-header .header-content {
        min-width: 0;
        gap: 8px;
    }

    .main-header .header-logo img {
        max-width: 112px;
    }

    .main-header .header-controls,
    .main-header .quick-prefs {
        min-width: 0;
        gap: 6px;
    }

    .main-header #auth-links-logged-out,
    .main-header #auth-links-logged-in {
        display: none !important;
    }

    .main-header .pill--currency {
        min-width: 54px;
        padding: 0 10px;
    }

    .quick-lang select,
    #language-switcher select {
        width: 106px !important;
    }

    .hero {
        padding: 56px 14px;
        overflow-x: hidden;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .hero h1 {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        font-size: 2.35rem;
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    .hero p {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem;
        line-height: 1.45;
    }

    .search-container {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        min-width: 0;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        padding: 0.75rem;
    }

    .tab-content {
        padding: 16px !important;
    }

    .budget-panel-top,
    .budget-results-header {
        display: grid;
    }

    .budget-origin-chip {
        justify-content: center;
        width: 100%;
    }

    .budget-origin-control {
        position: static;
        width: 100%;
        justify-self: stretch;
    }

    .budget-origin-popover {
        position: static;
        width: 100%;
        margin-top: 8px;
    }

    .budget-money-field {
        grid-template-columns: 86px minmax(0, 1fr);
        min-height: 62px;
    }

    .budget-money-field .currency-icon {
        padding: 0 8px;
        font-size: 0.86rem;
    }

    .budget-container .budget-money-field .budget-input {
        min-width: 0;
        font-size: 1.14rem;
    }

    .budget-control-grid,
    .budget-cost-grid,
    .budget-buckets-preview {
        grid-template-columns: 1fr;
    }

    .budget-buckets-preview {
        border-radius: 12px;
    }

    .budget-buckets-preview span {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .budget-buckets-preview span:last-child {
        border-bottom: 0;
    }

    .budget-container .passenger-dropdown {
        width: 100%;
    }

    .budget-quick-row {
        display: none;
    }

    .budget-quick-chip {
        width: 100%;
    }

    .budget-results-total {
        text-align: left;
    }
}

/* =========================
   RESULTS PAGE POPOVERS (chips)
   ========================= */
.search-summary-container {
    position: relative;
}

/* Make chip popovers compact and anchored under the chip */
.inline-popover {
    position: absolute;
    width: 360px;
    /* <- make this smaller/larger if you like */
    max-width: 90vw;
    background: #fff;
    border: 1px solid #DADCE0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    padding: 16px;
    z-index: 1010;
}

/* Layout for the pax editor inside the popover */
.inline-popover .row {
    display: grid;
    grid-template-columns: 1fr auto;
    /* label left, stepper right (stacked rows) */
    align-items: center;
    gap: 10px 14px;
}

.inline-popover .stepper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.inline-popover .stepper input[type="number"] {
    width: 56px;
    text-align: center;
}

.inline-popover .actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* If any element uses the HTML hidden attribute, force-hide it */
[hidden] {
    display: none !important;
}

/* =========================
   CLONED SEARCH BAR DROPDOWN (results page)
   ========================= */

/* Ensure the trigger area is the positioning anchor */
#search-widget-in-results .passenger-control-group,
#search-widget-in-results .passenger-control-group * {
    position: relative;
}

/* Make the cloned passenger dropdown a compact popover */
#search-widget-in-results #widget-passenger-dropdown-clone {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 340px;
    /* <- match homepage feel; adjust if needed */
    max-width: 90vw;
    background: #fff;
    border: 1px solid #DADCE0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    padding: 14px;
    z-index: 1010;
}

/* Typical inner layout for the cloned dropdown */
#search-widget-in-results #widget-passenger-dropdown-clone .passenger-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#search-widget-in-results #widget-passenger-dropdown-clone .passenger-stepper input[type="number"] {
    width: 44px;
    text-align: center;
}

/* The 'Done' button aligns right */
#search-widget-in-results #widget-passenger-dropdown-clone .passenger-done-btn {
    display: inline-flex;
    margin-left: auto;
}

/* === 1) On results pages, completely disable the hero/home search === */
/* Primary (uses :has) */
.header:has(.search-recap),
.header:has(.results-toolbar),
.header:has(.available-flights) {
    /* nothing here; selector used to scope the rules below */
}

.header:has(.search-recap) .hero,
.header:has(.results-toolbar) .hero,
.header:has(.available-flights) .hero {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
    /* push it behind everything */
}

.header:has(.search-recap) .hero *,
.header:has(.results-toolbar) .hero *,
.header:has(.available-flights) .hero * {
    pointer-events: none !important;
}

/* Fallback (no :has support): if the results toolbar/recap is a sibling before .hero */
.header .search-recap~.hero,
.header .results-toolbar~.hero,
.header .available-flights~.hero {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
}

/* === 2) Cancel any focus-within rule that re-opens the hero on results === */
.header:has(.search-recap):focus-within .hero,
.header:has(.results-toolbar):focus-within .hero,
.header:has(.available-flights):focus-within .hero {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* === 3) Make the compact modify-search popovers always clickable/above === */
.search-recap .popover,
.results-toolbar .popover {
    position: absolute;
    z-index: 10000 !important;
}

/* === 4) Ensure any hero/backdrop/mask cannot steal clicks on results === */
.header:has(.search-recap) .hero .backdrop,
.header:has(.results-toolbar) .hero .backdrop,
.header:has(.available-flights) .hero .backdrop,
.header:has(.search-recap) .hero [data-backdrop],
.header:has(.results-toolbar) .hero [data-backdrop],
.header:has(.available-flights) .hero [data-backdrop],
.header .search-recap~.hero .backdrop,
.header .results-toolbar~.hero .backdrop,
.header .available-flights~.hero .backdrop {
    display: none !important;
}

/* RESULTS MODE: completely suppress the home/hero search bar */
body:has(.search-recap) .hero,
body:has(.results-toolbar) .hero,
body:has(.available-flights) .hero,
body:has(.search-recap) .hero:is(:focus, :focus-within, :target),
body:has(.results-toolbar) .hero:is(:focus, :focus-within, :target),
body:has(.available-flights) .hero:is(:focus, :focus-within, :target),
body:has(.search-recap) .hero.is-open,
body:has(.results-toolbar) .hero.is-open,
body:has(.available-flights) .hero.is-open,
body:has(.search-recap) .hero[aria-expanded="true"],
body:has(.results-toolbar) .hero[aria-expanded="true"],
body:has(.available-flights) .hero[aria-expanded="true"] {
    display: none !important;
    /* kill it entirely so it can’t flicker back */
}

/* Belt & suspenders: nothing inside can capture clicks */
body:has(.search-recap) .hero *,
body:has(.results-toolbar) .hero *,
body:has(.available-flights) .hero * {
    pointer-events: none !important;
}

/* Hide any hero overlay/backdrop that might still be present */
body:has(.search-recap) .hero-backdrop,
body:has(.results-toolbar) .hero-backdrop,
body:has(.available-flights) .hero-backdrop,
body:has(.search-recap) [data-backdrop],
body:has(.results-toolbar) [data-backdrop],
body:has(.available-flights) [data-backdrop] {
    display: none !important;
}

/* Keep the compact modify-search popovers on top */
.search-recap .popover,
.results-toolbar .popover {
    z-index: 10000 !important;
}

/* If the results UI is present, hard-disable ANY hero/home search instance */
:root:has(.available-flights),
:root:has(.results-toolbar),
:root:has(.search-recap) {
    /* kill the hero + any common variants by id/class substrings */
    --_kill-hero: [class*="hero"], [class*="Hero"], [id*="hero"], [id*="Hero"],
        [class*="HomeSearch"], [class*="LandingSearch"], .hero, .home-search;
}

/* 1) Never render the hero on results (even if some :checked/aria state flips) */
:root:has(.available-flights) :is(var(--_kill-hero)),
:root:has(.results-toolbar) :is(var(--_kill-hero)),
:root:has(.search-recap) :is(var(--_kill-hero)) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2) Also hide any hero/landing backdrops or overlays that might be toggled */
:root:has(.available-flights) :is(.hero-backdrop, [data-backdrop], [class*="Backdrop"], [id*="backdrop"]),
:root:has(.results-toolbar) :is(.hero-backdrop, [data-backdrop], [class*="Backdrop"], [id*="backdrop"]),
:root:has(.search-recap) :is(.hero-backdrop, [data-backdrop], [class*="Backdrop"], [id*="backdrop"]) {
    display: none !important;
    pointer-events: none !important;
}

/* 3) If some inline style forces it visible anyway, shove it off-screen & under everything */
:root:has(.available-flights) :is(var(--_kill-hero)) {
    position: fixed !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    z-index: -1 !important;
    overflow: hidden !important;
}

/* 4) Keep the compact modify-search and its popovers always on top */
.results-toolbar,
.search-recap,
.results-toolbar .popover,
.search-recap .popover {
    z-index: 10000 !important;
}

/* Keep the edit/modify tray above everything */
.modify-search,
.search-editor,
.search-edit-tray {
    position: relative;
    z-index: 50;
}

/* The small/compact chips bar on the results page */
.results-search-summary,
.search-summary,
.search-chips-bar {
    position: relative;
    z-index: 10;
}

/* Hide + disable the compact bar while editing (modern browsers) */
body:has(.modify-search:focus-within) .results-search-summary,
body:has(.search-editor:focus-within) .results-search-summary,
body:has(.search-edit-tray:focus-within) .results-search-summary,
body:has(.modify-search .dropdown-menu.show) .results-search-summary,
body:has(.modify-search .popover.show) .results-search-summary,
body:has([data-state="open"]) .results-search-summary,
body:has([aria-expanded="true"]) .results-search-summary {
    display: none !important;
    pointer-events: none !important;
}

/* Fallback for older browsers without :has() — works if the
   edit tray and the compact bar are siblings on the page */
.modify-search:focus-within~.results-search-summary,
.search-editor:focus-within~.results-search-summary,
.search-edit-tray:focus-within~.results-search-summary {
    display: none !important;
    pointer-events: none !important;
}

/* Safety: if you still see flicker, keep the compact bar below the tray */
.results-search-summary,
.search-summary,
.search-chips-bar {
    pointer-events: auto;
}

body:has(.modify-search:focus-within) .results-search-summary,
body:has(.search-editor:focus-within) .results-search-summary {
    pointer-events: none;
}

/* Make sure any passenger dropdown that has the `hidden` attribute stays hidden */
.widget-passenger-dropdown[hidden] {
    display: none !important;
}

.search-summary-container {
    position: relative;
}

.search-summary-bar {
    position: relative;
    z-index: 1;
}

#search-widget-in-results {
    position: relative;
    z-index: 2;
}

.summary-editor-tray {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: -1rem 0 1.5rem;
    z-index: 2;
}

.summary-editor-tray .row,
.summary-editor-tray .popover-row,
.summary-editor-tray .actions,
.summary-editor-tray .popover-actions {
    max-width: 720px;
}

.summary-editor-tray .flatpickr-calendar {
    margin: 0;
}

/* =========================================================
   CURRENCY POPUP (definitive, uniform tiles)
   ========================================================= */
.currency-popup {
    position: fixed;
    top: 72px;
    right: 16px;
    transform: none;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 12px;
    box-shadow: var(--card-shadow, 0 12px 30px rgba(0, 0, 0, .12));
    padding: 12px;
    width: min(360px, calc(100vw - 24px));
    max-height: min(72vh, 520px);
    overflow: auto;
    z-index: 10050;
    font-size: 14px;
    color: var(--color-text-primary, #212529);
}

.currency-popup.hidden {
    display: none !important;
}

.currency-popup .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.currency-popup .popup-header h3 {
    margin: 0;
    font-size: 15px;
    color: var(--color-text-primary, #212529);
}

.currency-popup .close-popup {
    font-size: 20px;
    cursor: pointer;
    color: var(--color-text-secondary, #5F6368);
    padding: 2px 10px;
    border-radius: 4px;
    transition: background-color .2s ease;
}

.currency-popup .close-popup:hover {
    background-color: #eee;
}

.currency-popup .popup-subtext {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: var(--color-text-secondary, #5F6368);
    line-height: 1.4;
}

/* Grid of currencies with equal tile height */
.currency-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 40px;
    gap: 6px;
}

.currency-popup li {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    background-color: #f6f9ff;
    border: 1px solid #e4ecff;
    border-radius: 8px;
    padding: 0 12px;

    white-space: nowrap;
    /* prevent wrap */
    overflow: hidden;
    text-overflow: ellipsis;

    cursor: pointer;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.currency-popup li:hover {
    background-color: #e6efff;
    border-color: #d6e4ff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.currency-popup li.selected {
    background-color: #d0e6ff;
    color: #1a4d91;
    font-weight: 600;
    border-color: #c5dcff;
}

/* =========================================================
   HEADER LAYOUT — currency + language together (left of auth)
   ========================================================= */
.main-header .header-content {
    display: flex;
    align-items: center;
}

.main-header .header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.main-header .quick-prefs {
    display: flex;
    align-items: center;
    gap: 8px;
    /* distance between the two pills */
    order: 0;
}

.main-header #auth-links-logged-out,
.main-header #auth-links-logged-in {
    display: flex;
    gap: 10px;
    order: 1;
}

html.eridura-auth-pending .main-header #auth-links-logged-out,
html.eridura-auth-pending .main-header #auth-links-logged-in {
    visibility: hidden;
    pointer-events: none;
}

.main-header #auth-links-logged-out.hidden,
.main-header #auth-links-logged-in.hidden,
.main-header #auth-links-logged-out[hidden],
.main-header #auth-links-logged-in[hidden] {
    display: none !important;
}

/* Remove any legacy absolute positioning from the language switcher */
.main-header #language-switcher {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin: 0;
}

/* =========================================================
   PILL STYLING (currency + language)
   ========================================================= */
.pill,
.pill--currency,
.pill--lang,
#language-switcher select {
    height: 32px;
    border-radius: 9999px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #212529);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.pill .pill-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pill:hover,
#language-switcher select:hover {
    border-color: var(--color-primary, #1A73E8);
    background-color: #f6f9ff;
}

.pill:focus-visible,
.pill--lang:focus-within,
#language-switcher select:focus-visible {
    outline: none;
    border-color: var(--color-primary, #1A73E8);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .2);
}

/* =========================================================
   SINGLE-PILL LANGUAGE SELECT (native select inside a pill)
   ========================================================= */
.quick-lang {
    position: relative;
}

.quick-lang select,
#language-switcher select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit;
    font: inherit;

    height: 28px;
    /* visually centered inside 32px pill */
    line-height: 28px;
    padding: 0 18px 0 0;
    /* room for caret */
    width: 70px;
    /* compact width; tweak 120–150px */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Caret for the native select */
.quick-lang::after {
    content: "expand_more";
    font-family: 'Material Icons Outlined';
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-secondary, #5F6368);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* If you render a .fi flag span before the text */
#language-switcher .fi {
    font-size: 16px;
    line-height: 1;
    margin-right: 6px;
}

/* Small screens: a touch tighter */
@media (max-width: 640px) {
    .main-header .header-controls {
        gap: 8px;
    }

    .quick-lang select,
    #language-switcher select {
        width: 120px;
    }
}




/* Minimal styles */
.offer-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}

.offer-tab {
    padding: .5rem .8rem;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}

.offer-tab.active {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}
/* ======================================= */
/*      FLIGHT SORTING BUTTON STYLES       */
/* ======================================= */

/* This container uses Flexbox to position the title and buttons */
.results-header {
    display: flex;
    justify-content: space-between;
    /* Pushes title to the left, buttons to the right */
    align-items: center;
    margin-bottom: 1.5rem;
    /* Space between header and the first flight card */
}

.results-header h3 {
    margin: 0;
    /* Remove default heading margin */
    font-size: 1.5rem;
    font-weight: 600;
}

/* ======================================= */
/*      DEFINITIVE RESULTS PAGE STYLES     */
/* ======================================= */

/* --- 1. Overall Page Layout & Background --- */

/* This sets the light grey background for the entire results area */
body {
    background-color: #f8f9fa;
    /* A professional, very light grey */
}

/* This is the main container for your filters and flight list */
#widget-flight-results-area {
    background-color: transparent;
    /* Ensure it doesn't have its own background color */
    box-shadow: none;
    border: none;
}

/* --- 2. Results Header & NEW Sort Buttons --- */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.results-header h3 {
    margin: 0;
    font-size: 1.75rem;
    /* Larger, more impactful title */
    font-weight: 700;
    /* Bolder */
}

.sort-options {
    display: flex;
    gap: 0.5rem;
}

.sort-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 99px;
    /* This creates the perfect pill shape */
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* INACTIVE STATE STYLE (like the "Fastest" button) */
    background-color: #ffffff;
    /* Pure white background */
    color: #333;
    /* Dark text */
    border: 1px solid #d0d5dd;
    /* Light grey border */
}

.sort-button:hover {
    border-color: #888;
}

/* ACTIVE STATE STYLE (like the "Cheapest" button) */
.sort-button.active {
    background-color: #e2edff;
    /* Very light blue background */
    color: #0056b3;
    /* Strong blue text */
    border: 2px solid #0056b3;
    /* Thicker, dark blue border */
}

/* --- 3. Refined Flight Offer Card Style --- */

.flight-offer-card.rich-offer {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    /* Slightly more rounded corners */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease-in-out;
}

.flight-offer-card.rich-offer:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* ======================================= */
/*      SEARCH SUMMARY BAR STYLES          */
/* ======================================= */

/* The main white bar at the top of the results page */
.search-summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background-color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    margin-bottom: 2rem;
    /* Space between the bar and the results header */
}

/* Container for all the little info pills */
.summary-pills {
    display: flex;
    flex-wrap: wrap;
    /* Allows pills to wrap on smaller screens */
    gap: 0.5rem;
}

/* Individual pill style */
.summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;

    background-color: #f1f3f4;
    /* Light grey background */
    color: #333;
    border: 1px solid transparent;
    border-radius: 99px;
    /* Pill shape */

    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.summary-pill:hover {
    background-color: #e8eaed;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    /* Blue glow on hover */
}

.summary-pill .material-icons-outlined {
    font-size: 1rem;
    /* Smaller icon size for pills */
}

/* "Update Search" button style */
.update-search-btn {
    background-color: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    /* Prevents the button from shrinking */
    transition: background-color 0.2s;
}

.update-search-btn:hover {
    background-color: #004494;
}

/* ======================================= */
/*    DEFINITIVE POPOVER STYLES (NO CONFLICTS)   */
/* ======================================= */

/* This is the main popover container */
.inline-popover {
    position: absolute;
    z-index: 10;
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    width: 350px;
    /* A fixed, clean width */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Styles for elements ONLY inside the popover --- */

.inline-popover .popover-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.inline-popover .popover-row label {
    flex-grow: 1;
    font-weight: 500;
}

.inline-popover .popover-stepper {
    display: flex;
    align-items: center;
}

.inline-popover .popover-stepper button {
    width: 28px;
    height: 28px;
    border: 1px solid #d0d5dd;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
}

.inline-popover .popover-stepper input {
    width: 40px;
    height: 28px;
    text-align: center;
    border: 1px solid #d0d5dd;
    border-left: none;
    border-right: none;
    font-size: 1rem;
}

.inline-popover .popover-stepper button:first-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.inline-popover .popover-stepper button:last-of-type {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.inline-popover .popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid #f0f2f5;
}

.inline-popover .popover-btn-apply {
    background-color: #0056b3;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

.inline-popover .popover-btn-ghost {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Polished inline editors for the results-page Update Search tray. */
.summary-editor-tray.inline-popover {
    position: static !important;
    width: min(100%, 520px) !important;
    padding: 16px;
    margin: -14px 0 24px;
    border: 1px solid #d9e0ea;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    gap: 0;
}

.summary-editor-tray .popover-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #eef2f6;
}

.summary-editor-tray .popover-row:first-child {
    padding-top: 4px;
}

.summary-editor-tray .popover-row label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #1f2937;
    font-weight: 600;
}

.summary-editor-tray .popover-row label span {
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 500;
}

.summary-editor-tray .popover-stepper {
    display: grid;
    grid-template-columns: 34px 58px 34px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    background: #fff;
}

.summary-editor-tray .popover-stepper button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: #f7f9fc;
    color: #0056b3;
    font-size: 1rem;
    font-weight: 700;
}

.summary-editor-tray .popover-stepper button:hover {
    background: #edf4ff;
}

.summary-editor-tray .popover-stepper input {
    width: 58px;
    height: 34px;
    border: 0;
    border-left: 1px solid #e5ebf2;
    border-right: 1px solid #e5ebf2;
    padding: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    appearance: textfield;
}

.summary-editor-tray .popover-stepper input::-webkit-outer-spin-button,
.summary-editor-tray .popover-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.summary-editor-tray .popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    margin-top: 0;
    border-top: 0;
}

.summary-editor-tray .popover-btn-ghost,
.summary-editor-tray .popover-btn-apply {
    min-width: 86px;
    height: 36px;
    border-radius: 7px;
    padding: 0 16px;
    font-weight: 700;
}

.summary-editor-tray .popover-btn-ghost {
    background: #fff;
    color: #374151;
    border: 1px solid #cfd8e3;
}

.summary-editor-tray .popover-btn-apply {
    background: #0056b3;
    color: #fff;
    border: 1px solid #0056b3;
}

/* Size each Update Search editor to its actual job. */
.summary-editor-route.inline-popover {
    width: min(100%, 430px) !important;
}

.summary-editor-date.inline-popover {
    width: fit-content !important;
    padding: 10px;
}

.summary-editor-pax.inline-popover {
    width: min(100%, 360px) !important;
    padding: 14px 16px;
}

.summary-editor-cabin.inline-popover,
.summary-editor-stops.inline-popover {
    width: min(100%, 320px) !important;
}

.summary-editor-cabin.inline-popover {
    width: min(100%, 360px) !important;
    padding: 12px;
}

.summary-editor-route .route-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    grid-template-rows: auto 36px;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
}

.summary-editor-route .route-field-label {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.summary-editor-route .route-field {
    position: relative;
    min-width: 0;
}

.summary-editor-route input[type="text"],
.summary-editor-cabin select {
    width: 100%;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    padding: 0 11px;
    color: #111827;
    background: #fff;
    font-weight: 600;
}

.summary-editor-route input[type="text"]:focus,
.summary-editor-cabin select:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12);
}

.summary-editor-route .route-swap {
    width: 36px;
    height: 36px;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.summary-editor-route .route-swap .material-icons-outlined {
    font-size: 18px;
}

.summary-editor-route .route-airport-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 50;
    max-height: 190px;
    overflow: auto;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.summary-editor-route .route-airport-option {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 2px 8px;
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid #eef2f6;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.summary-editor-route .route-airport-option:hover {
    background: #f5f8fc;
}

.summary-editor-route .route-airport-option strong {
    grid-row: span 2;
    color: #0056b3;
}

.summary-editor-route .route-airport-option span,
.summary-editor-route .route-airport-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-editor-route .route-airport-option small {
    color: #64748b;
}

.summary-editor-route .actions,
.summary-editor-cabin .actions,
.summary-editor-stops .actions {
    margin-top: 14px;
}

.summary-editor-date .flatpickr-calendar {
    box-shadow: none;
    border: 0;
}

.summary-editor-pax .popover-row {
    grid-template-columns: minmax(108px, 1fr) auto;
    gap: 14px;
    padding: 11px 0;
}

.summary-editor-pax .popover-stepper {
    grid-template-columns: 30px 42px 30px;
}

.summary-editor-pax .popover-stepper button {
    width: 30px !important;
    height: 32px !important;
}

.summary-editor-pax .popover-stepper input {
    display: block !important;
    width: 42px !important;
    height: 32px !important;
    min-width: 42px !important;
    color: #111827 !important;
    background: #fff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #111827;
}

.summary-editor-cabin .row,
.summary-editor-stops .row {
    display: block;
}

.summary-editor-cabin .cabin-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.summary-editor-cabin .cabin-choice {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid #d7e1ec;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.summary-editor-cabin .cabin-choice:hover {
    border-color: #9fc3ef;
    background: #f8fbff;
}

.summary-editor-cabin .cabin-choice:focus-visible {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.12);
}

.summary-editor-cabin .cabin-choice.is-selected {
    border-color: #0056b3;
    background: #eef6ff;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

.summary-editor-cabin .cabin-choice .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #edf4ff;
    color: #0b63ce;
    font-size: 18px;
}

.summary-editor-cabin .cabin-choice strong,
.summary-editor-cabin .cabin-choice small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-editor-cabin .cabin-choice strong {
    font-size: 0.88rem;
    line-height: 1.15;
}

.summary-editor-cabin .cabin-choice small {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
}

.summary-editor-stops .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.summary-editor-stops label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 10px;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
}

/* Footer shell + spacing */
.site-footer .footer-shell {
    max-width: var(--container-width, 1100px);
    margin: 40px auto 20px;
    padding: 0 20px;
}

/* Locale pills row */
.site-footer .footer-locale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* Center the copyright line */
.site-footer .footer-bottom {
    text-align: center;
    margin-top: 16px;
}

/* Make sure the popup overlays above footer content when opened */
#footer-currency-popup {
    position: absolute;
    /* same pattern as your header popup */
    z-index: 1500;
}
/* === Global Footer === */
.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.site-footer .footer-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 32px 20px;
}

/* Locale row */
.footer-locale {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.pill.pill--locale {
    background: #F1F3F4;
    border: 1px solid var(--color-border);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Link columns */
.footer-links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    padding: 12px 0 8px;
}

.footer-col-title {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text-primary);
    cursor: pointer;
    /* becomes an accordion on mobile */
}

.footer-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col-list a {
    display: inline-block;
    padding: 6px 0;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.footer-col-list a:hover {
    color: var(--color-primary);
}

/* Bottom line */
.footer-bottom {
    border-top: 1px solid var(--color-border);
    margin-top: 24px;
    padding-top: 16px;
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}

/* Mobile: turn columns into accordions */
@media (max-width: 768px) {
    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .footer-col-title[aria-expanded="false"]+.footer-col-list {
        display: none;
    }

    .footer-col-title[aria-expanded="true"]+.footer-col-list {
        display: block;
    }

    .footer-locale {
        flex-wrap: wrap;
    }
}

/* Very small screens: single column */
@media (max-width: 480px) {
    .footer-links {
        grid-template-columns: 1fr;
    }
}

/* Footer shell + centering */
.site-footer .footer-shell {
    max-width: var(--container-width, 1100px);
    margin: 40px auto 20px;
    padding: 0 20px;
}

.site-footer .footer-locale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.site-footer .footer-bottom {
    text-align: center;
    margin-top: 16px;
}

/* Make sure the footer popup sits above content */
#footer-currency-popup {
    position: absolute;
    z-index: 1500;
}

/* Footer shell + spacing */
.site-footer {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.site-footer .footer-shell {
    max-width: 1100px;
    margin: 32px auto 40px;
    padding: 0 20px;
}

/* Locale row (your pills already styled) */
.site-footer .footer-locale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 20px;
}

/* Links grid */
.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
    padding: 12px 0 8px;
}

/* Column title as accordion trigger on mobile */
.footer-col-title {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 6px 0;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

/* List */
.footer-col-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}

.footer-col-list li {
    margin: 8px 0;
}

.footer-col-list a {
    color: #2b2f34;
    text-decoration: none;
    font-size: 0.92rem;
}

.footer-col-list a:hover {
    text-decoration: underline;
}

/* Copyright */
.site-footer .footer-bottom {
    position: relative;
    margin-top: 22px;
    padding-top: 14px;
    text-align: center;
}

.site-footer .footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    /* full-bleed divider */
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

/* Responsive: switch to accordions on mobile */
@media (max-width: 900px) {
    .footer-links-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .footer-links-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* collapse lists when aria-expanded="false" */
    .footer-col-title[aria-expanded="false"]+.footer-col-list {
        display: none;
    }

    .footer-col-title[aria-expanded="true"]+.footer-col-list {
        display: block;
    }
}
/* Footer: remove grey bar under © by killing bottom margin */
.site-footer .footer-shell {
    margin: 32px auto 0;
    /* was: 32px auto 40px */
    padding-bottom: 40px;
    /* keep the space, but inside the white footer */
}
/* Fix horizontal scrollbar caused by the full-bleed divider */
.site-footer .footer-bottom::before {
    width: 100%;
    /* not 100vw */
    left: 0;
    transform: none;
}
/* Footer language pill: space between flag and text */
.site-footer #footer-language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* <- the space */
}

.site-footer #footer-language-switcher .fi {
    margin-right: 0;
    /* gap handles spacing */
    line-height: 1;
}

.site-footer #footer-language-switcher select {
    padding-left: 2px;
    /* small breathing room inside the select */
}

/* Keep synced language pills readable for longer language names. */
.quick-lang.pill--lang {
    min-width: 118px;
}

.quick-lang select,
#language-switcher select,
.site-footer #footer-language-switcher select {
    width: 92px !important;
    min-width: 92px;
    text-overflow: clip;
}

.quick-lang.language-picker {
    position: relative;
    min-width: 132px;
    gap: 8px;
    overflow: visible;
    padding-right: 9px;
}

#language-switcher.quick-lang.language-picker,
#footer-language-switcher.quick-lang.language-picker {
    position: relative !important;
    z-index: 5200;
}

.quick-lang.language-picker::after {
    display: none;
}

.quick-lang.language-picker > select {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.quick-lang.language-picker .fi {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
}

.language-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-width: 82px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111827;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.language-picker-button:focus,
.language-picker-button:focus-visible {
    outline: none;
}

.language-picker-label {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

.language-picker-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 5px solid #64748b;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    margin-top: 1px;
    transition: transform 0.16s ease;
}

.quick-lang.language-picker.is-open {
    border-color: var(--color-primary, #1a73e8);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}

.quick-lang.language-picker.is-open .language-picker-caret {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5000;
    width: 198px;
    max-height: min(340px, calc(100vh - 120px));
    overflow: auto;
    padding: 6px;
    border: 1px solid #d7e2f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.quick-lang.language-picker.drop-up .language-menu {
    top: auto;
    bottom: calc(100% + 8px);
}

.language-menu-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1f2937;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.language-menu-option:hover,
.language-menu-option:focus-visible {
    background: #f1f6ff;
    color: #075ec4;
    outline: none;
}

.language-menu-option.is-selected {
    background: #e8f2ff;
    color: #075ec4;
}

.language-menu-option.is-selected::after {
    content: "check";
    justify-self: end;
    color: #075ec4;
    font-family: 'Material Icons Outlined';
    font-size: 17px;
    line-height: 1;
}

/* Company information pages */
.info-page-body {
    background: #f4f7fb;
    color: #111827;
    min-height: 100vh;
}

.info-page-body .main-header {
    background: #fff;
    border-bottom: 1px solid #e5eaf2;
}

.info-header-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.info-header-nav a {
    color: #334155;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.info-header-nav a:hover {
    color: #0056b3;
}

.info-page {
    width: min(100% - 40px, 1060px);
    margin: 0 auto;
    padding: 70px 0 88px;
}

.info-breadcrumb {
    width: min(100% - 40px, 1060px);
    margin: 22px auto 0;
    color: #64748b;
    font-size: 0.88rem;
}

.info-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.info-breadcrumb li::after {
    content: "/";
    margin-left: 8px;
    color: #94a3b8;
}

.info-breadcrumb li:last-child::after {
    content: "";
    margin: 0;
}

.info-breadcrumb a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 700;
}

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

.info-hero {
    max-width: 820px;
    margin-bottom: 42px;
}

.info-eyebrow {
    color: #0056b3;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.info-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.info-hero p {
    max-width: 720px;
    margin: 20px 0 0;
    color: #475569;
    font-size: 1.08rem;
    line-height: 1.7;
}

.info-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin: 34px 0;
    padding: 32px 0;
    border-top: 1px solid #dbe3ee;
    border-bottom: 1px solid #dbe3ee;
}

.info-band h2,
.info-steps h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 1.2rem;
}

.info-band p,
.info-steps p,
.info-grid p {
    margin: 0;
    color: #526173;
    line-height: 1.65;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.info-grid article {
    min-height: 170px;
    padding: 22px;
    background: #fff;
    border: 1px solid #dde6f1;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.info-grid .material-icons-outlined {
    display: inline-flex;
    color: #0056b3;
    font-size: 24px;
    margin-bottom: 14px;
}

.info-grid h3 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 1.02rem;
}

.info-steps {
    display: grid;
    gap: 14px;
    margin: 34px 0;
}

.info-steps article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid #dbe3ee;
}

.info-steps strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: #0056b3;
    border-radius: 50%;
    font-weight: 800;
}

.info-cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 38px;
    padding: 26px;
    background: #fff;
    border: 1px solid #dde6f1;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.info-cta-band h2 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.18rem;
}

.info-cta-band p {
    margin: 0;
    color: #526173;
    line-height: 1.6;
}

.explore-data-panel {
    margin: 0 0 34px;
    padding: 26px;
    background: #fff;
    border: 1px solid #d7e2ef;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.explore-data-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.explore-data-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #0056b3;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.explore-data-kicker .material-icons-outlined {
    font-size: 18px;
}

.explore-data-panel h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.2;
}

.explore-data-panel h3 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 1rem;
}

.explore-data-panel p {
    margin: 10px 0 0;
    color: #526173;
    line-height: 1.65;
}

.explore-origin-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    max-width: 220px;
    padding: 0 14px;
    border: 1px solid #b8d4f8;
    border-radius: 999px;
    background: #f5f9ff;
    color: #0056b3;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.explore-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.explore-metric-grid article {
    min-height: 110px;
    padding: 16px;
    border: 1px solid #e1e9f3;
    border-radius: 8px;
    background: #f8fbff;
}

.explore-metric-grid strong {
    display: block;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.1;
}

.explore-metric-grid span {
    display: block;
    margin-top: 8px;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 800;
}

.explore-metric-grid small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    line-height: 1.45;
}

.explore-data-split {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 22px;
    align-items: start;
}

.explore-hub-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.explore-hub-card {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.explore-hub-card h4 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.3;
}

.explore-hub-card p {
    margin-top: 7px;
    color: #526173;
    font-size: 0.9rem;
    line-height: 1.45;
}

.explore-hub-card small,
.explore-spend-card small {
    display: block;
    margin-top: 12px;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.5;
}

.explore-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.explore-chip-row span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef5ff;
    color: #0056b3;
    font-size: 0.78rem;
    font-weight: 800;
}

.explore-spend-card {
    padding: 18px;
    border: 1px solid #dbe6f3;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.explore-spend-card h3 {
    margin-bottom: 8px;
}

.explore-spend-card p {
    margin: 0;
    font-size: 0.92rem;
}

.explore-spend-bars {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.explore-spend-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
}

.explore-spend-row span,
.explore-spend-row strong {
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
}

.explore-spend-row i {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.explore-spend-row b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0b6fe8;
}

.explore-data-note {
    margin-top: 18px !important;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    color: #64748b !important;
    font-size: 0.9rem;
}

.explore-empty-state {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.explore-market-panel {
    margin: 0 0 36px;
    padding: 32px 0;
    border-top: 1px solid #dbe3ee;
    border-bottom: 1px solid #dbe3ee;
}

.explore-market-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.explore-market-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.65rem;
    line-height: 1.2;
}

.explore-market-header p:not(.explore-data-kicker) {
    max-width: 780px;
    margin: 10px 0 0;
    color: #526173;
    line-height: 1.65;
}

.explore-market-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid #b8d4f8;
    border-radius: 999px;
    background: #f5f9ff;
    color: #0056b3;
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
}

.explore-market-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 20px;
    align-items: stretch;
}

.explore-chart-block {
    padding: 20px;
    border: 1px solid #dbe6f3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.explore-chart-block h3,
.explore-local-list-block h3 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 1rem;
}

.explore-market-chart {
    display: grid;
    gap: 14px;
}

.explore-market-chart-row {
    display: grid;
    gap: 7px;
}

.explore-market-chart-row div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
}

.explore-market-chart-row strong {
    color: #0f172a;
    font-weight: 800;
    white-space: nowrap;
}

.explore-market-chart-row i {
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eef8;
}

.explore-market-chart-row b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b6fe8 0%, #5aa7ff 100%);
}

.explore-market-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.explore-market-card-grid article,
.explore-benefit-grid article,
.explore-market-list article {
    padding: 16px;
    border: 1px solid #e1e9f3;
    border-radius: 8px;
    background: #fff;
}

.explore-market-card-grid .material-icons-outlined,
.explore-benefit-grid .material-icons-outlined {
    color: #0b6fe8;
    font-size: 22px;
}

.explore-market-card-grid small {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.explore-market-card-grid strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: 1.42rem;
    line-height: 1.15;
}

.explore-market-card-grid p,
.explore-benefit-grid p,
.explore-market-list p {
    margin: 8px 0 0;
    color: #526173;
    font-size: 0.9rem;
    line-height: 1.55;
}

.explore-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.explore-benefit-grid h3 {
    margin: 10px 0 0;
    color: #111827;
    font-size: 1rem;
}

.explore-local-list-block {
    margin-top: 24px;
}

.explore-market-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.explore-market-list h4 {
    margin: 0;
    color: #111827;
    font-size: 0.96rem;
    line-height: 1.3;
}

.explore-market-list strong {
    display: block;
    margin-top: 9px;
    color: #0056b3;
    font-size: 1.02rem;
}

/* Partner pages */
.partner-page .info-hero {
    max-width: 860px;
}

.partner-proof-panel {
    margin: 0 0 34px;
    padding: 26px;
    border: 1px solid #d7e2ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.partner-proof-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.partner-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #0056b3;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.partner-kicker .material-icons-outlined {
    font-size: 18px;
}

.partner-proof-panel h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.2;
}

.partner-proof-panel h3 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 1rem;
}

.partner-proof-panel p {
    margin: 10px 0 0;
    color: #526173;
    line-height: 1.65;
}

.partner-origin-badge {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    max-width: 230px;
    padding: 0 14px;
    border: 1px solid #b8d4f8;
    border-radius: 999px;
    background: #f5f9ff;
    color: #0056b3;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.partner-metric-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.partner-metric-strip article {
    min-height: 112px;
    padding: 16px;
    border: 1px solid #e1e9f3;
    border-radius: 8px;
    background: #f8fbff;
}

.partner-metric-strip strong {
    display: block;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.1;
}

.partner-metric-strip span {
    display: block;
    margin-top: 8px;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 800;
}

.partner-metric-strip small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    line-height: 1.45;
}

.partner-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
    gap: 22px;
    align-items: start;
}

.partner-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.partner-signal-grid article {
    min-height: 155px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.partner-signal-grid h4 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 0.96rem;
    line-height: 1.35;
}

.partner-signal-grid strong {
    display: block;
    color: #0056b3;
    font-size: 1.1rem;
}

.partner-signal-grid p {
    margin-top: 10px;
    color: #526173;
    font-size: 0.88rem;
    line-height: 1.5;
}

.partner-source-note {
    padding: 18px;
    border: 1px solid #dbe6f3;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.partner-source-note h3 {
    margin-bottom: 8px;
}

.partner-source-note p {
    margin: 0;
    font-size: 0.92rem;
}

.partner-data-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.partner-data-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #0056b3;
    font-size: 0.78rem;
    font-weight: 800;
}

.partner-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 34px 0;
    padding: 32px 0;
    border-top: 1px solid #dbe3ee;
    border-bottom: 1px solid #dbe3ee;
}

.partner-channel-grid h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 1.15rem;
}

.partner-channel-grid p {
    margin: 0;
    color: #526173;
    line-height: 1.65;
}

.partner-check-list {
    display: grid;
    gap: 9px;
    margin: 16px 0 0;
    padding: 0;
    color: #334155;
    list-style: none;
}

.partner-check-list li {
    position: relative;
    padding-left: 22px;
    line-height: 1.55;
}

.partner-check-list li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0056b3;
}

.partner-cta-band {
    align-items: center;
}

.legal-page .info-hero {
    margin-bottom: 30px;
}

.legal-updated {
    margin-top: 14px !important;
    color: #64748b !important;
    font-size: 0.92rem !important;
}

.legal-content {
    display: grid;
    gap: 0;
    background: #fff;
    border: 1px solid #dde6f1;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.legal-content article {
    padding: 24px 28px;
    border-bottom: 1px solid #eef2f7;
}

.legal-content article:last-child {
    border-bottom: 0;
}

.legal-content h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 1.08rem;
}

.legal-content p {
    margin: 0;
    color: #526173;
    line-height: 1.7;
}

.legal-content p + p {
    margin-top: 12px;
}

.legal-table-wrap {
    overflow-x: auto;
    margin-top: 14px;
}

.legal-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    color: #334155;
    font-size: 0.94rem;
}

.legal-table th,
.legal-table td {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: #f8fafc;
    color: #111827;
    font-weight: 800;
}

.legal-list {
    margin: 12px 0 0;
    padding-left: 20px;
    color: #526173;
    line-height: 1.7;
}

@media (max-width: 760px) {
    .info-page {
        width: min(100% - 28px, 1060px);
        padding: 46px 0 64px;
    }

    .info-breadcrumb {
        width: min(100% - 28px, 1060px);
        margin-top: 16px;
        font-size: 0.82rem;
    }

    .info-header-nav {
        display: none;
    }

    .info-band,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .info-hero h1 {
        font-size: 2.25rem;
    }

    .legal-content article {
        padding: 20px;
    }

    .info-cta-band {
        display: grid;
        padding: 22px;
    }

    .explore-data-panel {
        padding: 20px;
    }

    .explore-data-topline,
    .explore-data-split,
    .explore-market-header,
    .explore-market-layout {
        display: grid;
    }

    .explore-origin-pill {
        max-width: 100%;
        justify-content: center;
    }

    .explore-metric-grid,
    .explore-hub-list,
    .explore-market-card-grid,
    .explore-benefit-grid,
    .explore-market-list {
        grid-template-columns: 1fr;
    }

    .explore-market-mode {
        justify-content: center;
        width: 100%;
    }

    .explore-spend-row {
        grid-template-columns: 76px minmax(0, 1fr) 40px;
    }

    .partner-proof-panel {
        padding: 20px;
    }

    .partner-proof-header,
    .partner-proof-grid {
        display: grid;
    }

    .partner-origin-badge {
        max-width: 100%;
        justify-content: center;
    }

    .partner-metric-strip,
    .partner-signal-grid,
    .partner-channel-grid {
        grid-template-columns: 1fr;
    }
}

/* Modern stops filter: segmented buttons instead of a native select */
.stops-filter-group label {
    margin-bottom: 10px;
}

.stops-segmented-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.stops-filter-option {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #d8e2f0;
    border-radius: 8px;
    background: #f8fbff;
    color: #344055;
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.1;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.stops-filter-option:hover:not(:disabled) {
    border-color: #9fc7ff;
    background: #f0f7ff;
    color: #0b63ce;
}

.stops-filter-option.active {
    border-color: #0b63ce;
    background: #eaf3ff;
    color: #075abb;
    box-shadow: inset 0 0 0 1px rgba(11, 99, 206, 0.18), 0 4px 12px rgba(11, 99, 206, 0.08);
}

.stops-filter-option:focus-visible {
    outline: none;
    border-color: #0b63ce;
    box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.18);
}

.stops-filter-option:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

/* Support pages */
.support-page .info-hero {
    margin-bottom: 30px;
}

.support-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.support-panel-stack {
    display: grid;
    gap: 18px;
    align-content: start;
}

.support-panel {
    background: #fff;
    border: 1px solid #dde6f1;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.support-panel-highlight {
    background: #f8fbff;
}

.support-cancel-panel {
    background: #ffffff;
}

.support-recent-panel {
    display: grid;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.support-recent-panel.hidden {
    display: none;
}

.support-recent-heading {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.support-recent-heading .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 50%;
    background: #eef5ff;
}

.support-recent-heading h2 {
    margin-bottom: 4px;
}

.support-recent-heading p,
.support-recent-note {
    margin: 0 !important;
    color: #526173;
    font-size: 0.92rem;
    line-height: 1.5;
}

.support-recent-reference {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #d7e6f8;
    border-radius: 8px;
    background: #f5f9ff;
}

.support-recent-reference span {
    color: #526173;
    font-size: 0.82rem;
    font-weight: 800;
}

.support-recent-reference strong {
    color: #0f172a;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.support-panel .material-icons-outlined,
.support-contact-band .material-icons-outlined {
    color: #0056b3;
    font-size: 26px;
    margin-bottom: 12px;
}

.support-panel h2,
.support-contact-band h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 1.12rem;
}

.support-panel p,
.support-contact-band p {
    margin: 0 0 18px;
    color: #526173;
    line-height: 1.65;
}

.support-panel .support-sensitive-note {
    margin-bottom: 0;
    padding: 12px 14px;
    border: 1px solid #d7e6f8;
    border-radius: 8px;
    background: #f5f9ff;
    color: #334155;
    font-size: 0.9rem;
}

.support-panel .support-sensitive-note a {
    color: #0056b3;
    font-weight: 800;
    text-decoration: none;
}

.support-panel .support-sensitive-note a:hover {
    text-decoration: underline;
}

.support-primary-link,
.support-submit,
.support-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid #0056b3;
    background: #0056b3;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.support-secondary-button {
    background: #fff;
    color: #0056b3;
}

.support-primary-link:hover,
.support-submit:hover,
.support-secondary-button:hover {
    filter: brightness(0.96);
}

.support-submit:disabled {
    cursor: wait;
    opacity: 0.72;
}

.support-form {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    width: min(100%, 430px);
}

.support-form label {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 800;
}

.support-form input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
}

.support-form .support-submit {
    width: 100%;
}

.support-form input:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.16);
}

.support-message {
    min-height: 20px;
    margin: 4px 0 0 !important;
    font-size: 0.92rem;
}

.support-message.error {
    color: #b42318;
}

.support-message.success {
    color: #027a48;
}

.support-contact-band {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin: 34px 0;
    padding: 28px;
    background: #fff;
    border: 1px solid #dde6f1;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.support-contact-band p {
    max-width: 650px;
    margin-bottom: 0;
}

.support-safety-list {
    margin-top: 34px;
}

@media (max-width: 760px) {
    .support-actions-grid,
    .support-contact-band {
        grid-template-columns: 1fr;
    }

    .support-actions-grid {
        display: grid;
    }

    .support-panel-stack {
        gap: 14px;
    }

    .support-recent-reference {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .support-contact-band {
        display: grid;
        align-items: start;
    }

    .support-primary-link,
    .support-submit,
    .support-secondary-button {
        width: 100%;
    }
}

/* Homepage budget card sizing */
.hero .search-container {
    width: min(874px, calc(100vw - 56px)) !important;
    max-width: min(874px, calc(100vw - 56px)) !important;
    margin-left: auto;
    margin-right: auto;
}

.budget-money-field label {
    font-size: 0.72rem;
}

.budget-container .budget-money-field .budget-input {
    font-size: clamp(1rem, 1.65vw, 1.38rem);
}

@media (max-width: 640px) {
    .hero .search-container {
        width: calc(100vw - 56px) !important;
        max-width: calc(100vw - 56px) !important;
        padding: 0.7rem;
    }

    .budget-container .budget-money-field .budget-input {
        font-size: 1rem;
    }
}

/* Flight review redesign */
body:has(.flight-review-card) #flight-results-content,
body:has(.flight-review-card) #widget-flight-results-area,
body:has(.flight-review-card) .results-layout-container {
    width: min(1120px, calc(100% - 40px)) !important;
    max-width: 1120px !important;
}

.confirmation-container.flight-review-card {
    width: min(1060px, calc(100vw - 48px)) !important;
    max-width: 1060px !important;
    margin: 28px auto !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #dbe3ee;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
}

.flight-review-card h3,
.confirmation-container.flight-review-card h3 {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 1.85rem;
    line-height: 1.15;
    letter-spacing: 0;
    color: #0f172a;
}

.flight-review-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding: 28px;
    border-bottom: 1px solid #e6edf5;
    background: #ffffff;
}

.flight-review-kicker,
.flight-review-section-heading span {
    display: block;
    margin-bottom: 6px;
    color: #0b63ce;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flight-review-hero p {
    max-width: 560px;
    margin: 8px 0 0;
    color: #526173;
    font-size: 0.98rem;
    line-height: 1.5;
}

.flight-review-price-pill {
    min-width: 190px;
    padding: 16px 18px;
    border: 1px solid #d6e4f7;
    border-radius: 8px;
    background: #f7fbff;
    text-align: right;
}

.flight-review-price-pill span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.flight-review-price-pill strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.1;
}

.flight-review-overview {
    display: grid;
    grid-template-columns: 1fr 1.45fr 0.95fr 1fr;
    gap: 12px;
    padding: 18px 28px;
    background: #f8fafc;
    border-bottom: 1px solid #e6edf5;
}

.flight-review-info-tile {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.flight-review-info-tile .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eef6ff;
    color: #0b63ce;
    font-size: 20px;
}

.flight-review-info-tile span:not(.material-icons-outlined) {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flight-review-info-tile strong {
    display: block;
    margin-top: 2px;
    color: #101828;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
}

.flight-review-section {
    padding: 24px 28px;
    border-bottom: 1px solid #e6edf5;
}

.flight-review-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin-bottom: 16px;
}

.flight-review-section-heading strong {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: right;
}

.flight-review-itinerary {
    display: grid;
    gap: 16px;
}

.flight-review-leg {
    padding: 18px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
}

.flight-review-leg header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 6px;
}

.flight-review-leg header span {
    display: block;
    color: #0b63ce;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.flight-review-leg header strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 1rem;
}

.flight-review-leg-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.flight-review-leg-badges span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #cfe0f5;
    border-radius: 999px;
    background: #f4f9ff;
    color: #0f4f9f;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.flight-review-route-mini {
    margin-bottom: 16px;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
}

.flight-review-segment {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(170px, 0.7fr) minmax(140px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 10px 0;
}

.flight-review-timepoint {
    min-width: 0;
}

.flight-review-timepoint--arrival {
    text-align: right;
}

.flight-review-time {
    display: block;
    color: #0f172a;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
}

.flight-review-timepoint strong {
    display: inline-block;
    margin-top: 5px;
    color: #101828;
    font-size: 1rem;
}

.flight-review-timepoint span:not(.flight-review-time),
.flight-review-timepoint small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.3;
}

.flight-review-path {
    display: grid;
    gap: 8px;
    align-items: center;
    text-align: center;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.flight-review-path div {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    gap: 6px;
    align-items: center;
}

.flight-review-path i {
    display: block;
    height: 1px;
    background: #cbd5e1;
}

.flight-review-path .material-icons-outlined {
    color: #0b63ce;
    font-size: 22px;
}

.flight-review-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
}

.flight-review-meta-grid div span {
    display: block;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flight-review-meta-grid div strong {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #101828;
    font-size: 0.88rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flight-review-layover {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff7ed;
    color: #92400e;
    font-size: 0.86rem;
    font-weight: 700;
}

.flight-review-layover .material-icons-outlined {
    font-size: 19px;
}

.flight-review-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    gap: 24px;
}

.flight-review-included-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.flight-review-addons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.flight-review-addon-btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
}

.flight-review-addon-btn:disabled {
    opacity: 0.58;
}

.flight-review-addon-note {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.4;
}

.flight-review-addon-note--small {
    margin-top: 8px;
    font-size: 0.8rem;
}

.flight-review-price-box {
    display: grid;
    gap: 10px;
    padding: 22px 28px;
    background: #f8fafc;
    border-bottom: 1px solid #e6edf5;
}

.flight-review-price-box > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    color: #475467;
    font-size: 0.95rem;
}

.flight-review-price-box strong {
    color: #101828;
    font-weight: 800;
}

.flight-review-price-total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #d9e2ee;
    color: #0f172a !important;
    font-size: 1.08rem !important;
}

.flight-review-price-total strong {
    font-size: 1.45rem;
}

.confirmation-container.flight-review-card .flight-review-actions {
    position: static;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    border-top: 0;
    background: #ffffff;
}

.confirmation-container.flight-review-card .flight-review-actions .explore-btn {
    min-width: 260px;
}

@media (max-width: 920px) {
    .flight-review-overview,
    .flight-review-included-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flight-review-two-column {
        grid-template-columns: 1fr;
    }

    .flight-review-segment {
        grid-template-columns: 1fr;
    }

    .flight-review-timepoint--arrival {
        text-align: left;
    }

    .flight-review-path div {
        grid-template-columns: 1fr 30px 1fr;
    }
}

@media (max-width: 640px) {
    body:has(.flight-review-card) #widget-flight-results-area,
    body:has(.flight-review-card) #flight-results-content,
    body:has(.flight-review-card) .results-layout-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .confirmation-container.flight-review-card {
        width: calc(100vw - 24px) !important;
        margin: 16px auto !important;
    }

    .flight-review-hero,
    .confirmation-container.flight-review-card .flight-review-actions {
        display: grid;
        padding: 20px;
    }

    .flight-review-price-pill {
        width: 100%;
        text-align: left;
    }

    .flight-review-overview,
    .flight-review-included-grid {
        grid-template-columns: 1fr;
        padding-left: 20px;
        padding-right: 20px;
    }

    .flight-review-section,
    .flight-review-price-box {
        padding: 20px;
    }

    .flight-review-section-heading,
    .flight-review-leg header {
        display: grid;
    }

    .flight-review-section-heading strong {
        text-align: left;
    }

    .flight-review-meta-grid {
        grid-template-columns: 1fr;
    }

    .confirmation-container.flight-review-card .flight-review-actions .back-btn,
    .confirmation-container.flight-review-card .flight-review-actions .explore-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Passenger details checkout polish */
.page-passengers main {
    background: #eef2f7;
}

.page-passengers .hero {
    display: none !important;
}

.page-passengers #passenger-details-container {
    display: block;
    width: min(1060px, calc(100vw - 48px));
    max-width: 1060px;
    margin: 28px auto 36px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.page-passengers #passenger-details-container.hidden {
    display: none !important;
}

.passenger-checkout-card {
    overflow: visible;
    padding: 0 !important;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
}

.passenger-checkout-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding: 28px;
    border-bottom: 1px solid #e6edf5;
    background: #ffffff;
}

.passenger-checkout-kicker,
.passenger-section-heading span,
.passenger-card-header span {
    display: block;
    margin-bottom: 6px;
    color: #0b63ce;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.passenger-checkout-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.85rem;
    line-height: 1.15;
}

.passenger-checkout-header p {
    max-width: 620px;
    margin: 8px 0 0;
    color: #526173;
    font-size: 0.98rem;
    line-height: 1.5;
}

.passenger-checkout-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 190px;
    padding: 14px;
    border: 1px solid #d6e4f7;
    border-radius: 8px;
    background: #f7fbff;
}

.passenger-checkout-step span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0b63ce;
    color: #ffffff;
    font-weight: 800;
}

.passenger-checkout-step strong {
    color: #0f172a;
    font-size: 0.92rem;
}

#passenger-form {
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 28px 28px;
}

#form-error-summary.hidden,
#form-error-summary[hidden] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#form-error-summary {
    margin: 0 0 18px !important;
    padding: 14px 16px !important;
    border: 1px solid #fecaca !important;
    border-left: 5px solid #dc2626 !important;
    border-radius: 8px !important;
    background: #fff5f5 !important;
    color: #7f1d1d !important;
}

.page-passengers #passenger-forms-wrapper {
    display: grid;
    gap: 18px;
}

.page-passengers .passenger-form-section,
.page-passengers .passenger-contact-section {
    margin: 0;
    padding: 22px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.page-passengers .passenger-contact-section {
    margin-top: 20px;
}

.passenger-card-header,
.passenger-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.passenger-card-header h5,
.passenger-section-heading h4 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 1.1rem !important;
    line-height: 1.25;
}

.passenger-card-header small,
.passenger-section-heading p {
    margin: 0;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
}

.page-passengers #passenger-form .form-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    margin: 0 0 18px !important;
}

.page-passengers #passenger-form .form-row:last-child {
    margin-bottom: 0 !important;
}

.page-passengers #passenger-form .form-row:last-child .form-group:only-child {
    max-width: calc(50% - 10px);
}

.page-passengers #passenger-form .form-group {
    display: grid !important;
    min-width: 0 !important;
    gap: 7px;
}

.page-passengers #passenger-form .form-group label,
.page-passengers #passenger-form .saved-traveler-select label {
    margin: 0 !important;
    color: #344054 !important;
    font-size: 0.86rem !important;
    font-weight: 750 !important;
    line-height: 1.2;
}

.page-passengers #passenger-form input[type="text"],
.page-passengers #passenger-form input[type="date"],
.page-passengers #passenger-form input[type="email"],
.page-passengers #passenger-form input[type="tel"],
.page-passengers #passenger-form select,
.page-passengers #passenger-form .flatpickr-input {
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    padding: 0 14px !important;
    border: 1px solid #cfd8e5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font: inherit !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
}

.page-passengers #passenger-form input[type="hidden"] {
    display: none !important;
}

.page-passengers #passenger-form input::placeholder {
    color: #667085 !important;
}

.page-passengers #passenger-form input:focus,
.page-passengers #passenger-form select:focus,
.page-passengers #passenger-form .flatpickr-input:focus {
    outline: 0 !important;
    border-color: #0b63ce !important;
    box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.14) !important;
}

.page-passengers #passenger-form .input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.passport-expiry-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 0 !important;
    padding: 9px 10px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
}

.passport-expiry-warning::before {
    content: "!";
    display: grid;
    flex: 0 0 18px;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: #f97316;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.passport-expiry-warning.is-critical {
    border-color: #fecaca;
    background: #fff5f5;
    color: #991b1b;
}

.passport-expiry-warning.is-critical::before {
    background: #dc2626;
}

.passport-expiry-warning.hidden {
    display: none !important;
}

.page-passengers .saved-traveler-select {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px dashed #b8c7da;
    border-radius: 8px;
    background: #f8fafc;
}

.page-passengers .saved-traveler-select.hidden {
    display: none !important;
}

.page-passengers .traveler-save-preference {
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid #cfe0f7;
    border-radius: 8px;
    background: #f7fbff;
}

.page-passengers .traveler-save-preference label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    cursor: pointer;
}

.page-passengers .traveler-save-preference input {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 2px 0 0;
    accent-color: #0b63ce;
}

.page-passengers .traveler-save-preference strong,
.page-passengers .traveler-save-preference small {
    display: block;
    line-height: 1.35;
}

.page-passengers .traveler-save-preference strong {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 800;
}

.page-passengers .traveler-save-preference small {
    margin-top: 3px;
    color: #56657a;
    font-size: 0.82rem;
    font-weight: 600;
}

.page-passengers #passenger-form .form-actions {
    position: static;
    display: flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 24px -28px -28px !important;
    padding: 18px 28px !important;
    border-top: 1px solid #e6edf5 !important;
    background: #fbfdff !important;
    box-shadow: none;
}

.page-passengers #passenger-form .form-actions .back-btn,
.page-passengers #passenger-form .form-actions .explore-btn {
    min-height: 44px;
    border-radius: 8px !important;
    font-weight: 800 !important;
}

.page-passengers #passenger-form .form-actions .explore-btn {
    min-width: 230px;
}

@media (max-width: 760px) {
    .page-passengers #passenger-details-container {
        width: calc(100vw - 24px);
        margin: 16px auto 28px;
    }

    .passenger-checkout-header,
    .passenger-card-header,
    .passenger-section-heading {
        display: grid;
    }

    .passenger-checkout-header {
        padding: 20px;
    }

    .passenger-checkout-step {
        min-width: 0;
    }

    #passenger-form {
        padding: 20px;
    }

    .page-passengers .passenger-form-section,
    .page-passengers .passenger-contact-section {
        padding: 18px;
    }

    .passenger-card-header small,
    .passenger-section-heading p {
        text-align: left;
    }

    .page-passengers #passenger-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .page-passengers #passenger-form .form-row:last-child .form-group:only-child {
        max-width: none;
    }

    .page-passengers #passenger-form .form-actions {
        display: grid !important;
        margin: 22px -20px -20px !important;
        padding: 14px 20px !important;
    }

    .page-passengers #passenger-form .form-actions .back-btn,
    .page-passengers #passenger-form .form-actions .explore-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Checkout flow alignment */
:root {
    --checkout-card-width: 980px;
}

body:has(.flight-review-card) #flight-results-content,
body:has(.flight-review-card) #widget-flight-results-area,
body:has(.flight-review-card) .results-layout-container {
    width: min(calc(var(--checkout-card-width) + 60px), calc(100% - 40px)) !important;
    max-width: calc(var(--checkout-card-width) + 60px) !important;
}

.confirmation-container.flight-review-card,
.page-passengers #passenger-details-container {
    width: min(var(--checkout-card-width), calc(100vw - 48px)) !important;
    max-width: var(--checkout-card-width) !important;
}

.passenger-checkout-card {
    width: 100%;
}

.flight-review-hero,
.passenger-checkout-header {
    align-items: flex-start;
}

.flight-review-hero > div:first-child,
.passenger-checkout-header > div:first-child {
    min-width: 0;
    max-width: 420px;
}

.checkout-steps {
    display: grid;
    flex: 0 0 min(480px, 100%);
    width: min(480px, 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.checkout-step {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid #d6e4f7;
    border-radius: 0.375rem;
    background: #ffffff;
    color: #0f172a;
}

.checkout-step span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eaf3ff;
    color: #0b63ce;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.checkout-step strong {
    overflow: hidden;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-step.is-active,
.checkout-step.is-complete {
    border-color: #b9d7ff;
    background: #f7fbff;
}

.checkout-step.is-active span,
.checkout-step.is-complete span {
    background: #0b63ce;
    color: #ffffff;
}

.checkout-step:not(.is-active):not(.is-complete) {
    color: #667085;
}

.flight-review-leg-badges span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 62px;
    height: 28px;
    min-height: 28px;
    padding: 0 12px;
    line-height: 1;
    text-align: center;
}

.confirmation-container.flight-review-card .flight-review-actions,
.page-passengers #passenger-form .form-actions {
    align-items: center;
}

.confirmation-container.flight-review-card .flight-review-actions .back-btn,
.page-passengers #passenger-form .form-actions .back-btn,
.confirmation-container.flight-review-card .flight-review-actions .explore-btn,
.page-passengers #passenger-form .form-actions .explore-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color 150ms, color 150ms, border-color 150ms !important;
}

.confirmation-container.flight-review-card .flight-review-actions .back-btn,
.page-passengers #passenger-form .form-actions .back-btn {
    min-width: 130px;
    border: 2px solid var(--color-accent, #2f80ed) !important;
    background: transparent !important;
    color: var(--color-accent, #2f80ed) !important;
}

.confirmation-container.flight-review-card .flight-review-actions .back-btn:hover,
.page-passengers #passenger-form .form-actions .back-btn:hover {
    border-color: var(--color-primary-dark, #1e5ab8) !important;
    background: rgba(47, 128, 237, 0.1) !important;
    color: var(--color-primary-dark, #1e5ab8) !important;
}

.confirmation-container.flight-review-card .flight-review-actions .explore-btn,
.page-passengers #passenger-form .form-actions .explore-btn {
    min-width: 230px;
    border: 2px solid var(--color-primary, #2f80ed) !important;
    background: var(--color-primary, #2f80ed) !important;
    color: #ffffff !important;
}

.confirmation-container.flight-review-card .flight-review-actions .explore-btn:hover,
.page-passengers #passenger-form .form-actions .explore-btn:hover {
    border-color: var(--color-primary-dark, #2569c6) !important;
    background: var(--color-primary-dark, #2569c6) !important;
}

@media (max-width: 760px) {
    .confirmation-container.flight-review-card,
    .page-passengers #passenger-details-container {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .flight-review-hero > div:first-child,
    .passenger-checkout-header > div:first-child {
        max-width: none;
    }

    .checkout-steps {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .checkout-step strong {
        white-space: normal;
    }

    .confirmation-container.flight-review-card .flight-review-actions .back-btn,
    .page-passengers #passenger-form .form-actions .back-btn,
    .confirmation-container.flight-review-card .flight-review-actions .explore-btn,
    .page-passengers #passenger-form .form-actions .explore-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Checkout side progress rail */
.checkout-flow-shell,
.page-passengers #passenger-details-container {
    position: relative;
    width: min(var(--checkout-card-width), calc(100vw - 48px)) !important;
    max-width: var(--checkout-card-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.checkout-flow-shell .confirmation-container.flight-review-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.checkout-progress-rail {
    position: absolute;
    top: 18px;
    left: calc(100% + 12px);
    z-index: 8;
    display: grid;
    gap: 8px;
    width: 132px;
}

.checkout-progress-rail a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    text-decoration: none;
    opacity: 0.54;
    transition: opacity 160ms, background-color 160ms, border-color 160ms, box-shadow 160ms, color 160ms;
}

.checkout-progress-rail a span {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #c7d7eb;
}

.checkout-progress-rail a strong {
    color: inherit;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.15;
}

.checkout-progress-rail a.is-active {
    border-color: #b9d7ff;
    background: #ffffff;
    color: #0b63ce;
    opacity: 1;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.checkout-progress-rail a.is-active span {
    background: #0b63ce;
    box-shadow: 0 0 0 4px #e8f2ff;
}

/* Softer review typography */
.confirmation-container.flight-review-card h3,
.flight-review-card h3 {
    font-weight: 600 !important;
}

.flight-review-kicker,
.flight-review-section-heading span,
.flight-review-leg header span,
.flight-review-info-tile span:not(.material-icons-outlined),
.flight-review-meta-grid div span {
    font-weight: 600 !important;
}

.flight-review-info-tile strong,
.flight-review-leg header strong,
.flight-review-timepoint strong,
.flight-review-meta-grid div strong,
.flight-review-price-box strong,
.flight-review-included-grid strong {
    font-weight: 500 !important;
}

.flight-review-time {
    font-weight: 600 !important;
}

.flight-review-price-total strong {
    font-weight: 650 !important;
}

/* Budget passenger selector aligned with By destination */
.budget-container .passenger-dropdown {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 280px;
    max-width: min(90vw, 280px);
    padding: 16px;
    border-radius: 4px;
}

.budget-pax-row {
    gap: 15px;
    padding: 0;
    border-bottom: 0;
}

.budget-pax-row strong {
    font-size: 0.875rem;
    font-weight: 500;
}

.budget-pax-row small {
    font-size: 0.75rem;
}

.budget-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.budget-stepper button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--widget-hover-bg, #f1f3f4);
    color: #5f6368;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
}

.budget-stepper button:hover {
    background: #e8eaed;
    color: #202124;
}

.budget-stepper input {
    width: 30px !important;
    height: 32px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.budget-dropdown-done {
    min-height: 34px;
    border-radius: 6px;
    font-weight: 650;
}

/* Budget search polish: compact the closed card and let open traveler menu reserve space. */
.hero .search-container {
    padding: 0.86rem;
}

.hero #budget-search-content.tab-content {
    padding: 18px 24px;
}

.hero #budget-search-module .budget-container {
    gap: 10px;
}

.hero #budget-search-module .budget-panel-top {
    align-items: center;
}

.hero #budget-search-module .budget-kicker {
    margin-bottom: 4px;
}

.hero #budget-search-module .budget-intent-picker legend {
    margin-bottom: 6px;
}

.hero #budget-search-module .budget-intent-options {
    gap: 9px;
}

.hero #budget-search-module .budget-intent-option {
    min-height: 56px;
    gap: 1px;
    padding: 3px 8px;
}

.hero #budget-search-module .budget-intent-option .material-icons-outlined {
    width: 23px;
    height: 23px;
    font-size: 15px;
}

.hero #budget-search-module .budget-intent-option strong {
    font-size: 0.82rem;
    line-height: 1.05;
}

.hero #budget-search-module .budget-intent-option small {
    font-size: 0.64rem;
    line-height: 1.05;
}

.hero #budget-search-module .budget-money-field {
    min-height: 60px;
    grid-template-columns: 96px minmax(0, 1fr);
}

.hero #budget-search-module .budget-control-grid {
    gap: 9px;
}

.hero #budget-search-module .passenger-button,
.hero #budget-search-module .date-input,
.hero #budget-search-module .budget-control-grid .flatpickr-input,
.hero #budget-search-module .budget-search-submit {
    min-height: 38px;
}

.hero #budget-search-module .budget-search-submit {
    height: 38px !important;
}

.hero #budget-search-module .budget-container.is-passenger-open .budget-control-grid {
    align-items: start;
}

.hero #budget-search-module .budget-container.is-passenger-open .passenger-dropdown {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 280px;
    max-width: min(100%, 280px);
    margin-top: 8px;
    z-index: 2;
}

/* Payment confirmation return page */
.payment-confirmation-page {
    margin: 0;
    min-height: 100vh;
    background: #eef2f7;
    color: #0f172a;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.payment-confirmation-page .main-header {
    background: #ffffff;
    border-bottom: 1px solid #dbe4ef;
}

.payment-confirmation-main {
    min-height: calc(100vh - 74px);
    background: linear-gradient(180deg, #f7faff 0%, #eef2f7 100%);
}

.payment-confirmation-page .confirmation-page-container {
    width: min(980px, calc(100vw - 32px));
    min-height: calc(100vh - 74px);
    display: grid;
    place-items: center;
    margin: 0 auto;
    padding: 34px 0 56px;
    box-sizing: border-box;
}

.payment-confirmation-page #loading-indicator,
.payment-confirmation-page #error-display,
.payment-confirmation-page #confirmation-details {
    width: 100%;
}

.payment-confirmation-page #loading-indicator.hidden,
.payment-confirmation-page #error-display.hidden,
.payment-confirmation-page #confirmation-details.hidden {
    display: none !important;
}

.payment-confirmation-page .confirmation-status-card {
    width: min(720px, 100%);
    margin: 0 auto !important;
    padding: 34px 32px !important;
    overflow: visible !important;
    box-sizing: border-box;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
    text-align: center;
}

.payment-confirmation-page #loading-indicator {
    display: grid;
    justify-items: center;
    gap: 16px;
    width: min(540px, 100%);
    padding: 38px 34px !important;
}

.payment-confirmation-page #loading-message,
.payment-confirmation-page #error-message {
    max-width: 560px;
    margin: 0 auto;
    color: #334155;
    font-size: 1rem;
    line-height: 1.6;
}

.payment-confirmation-page .confirmation-loading-mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #e8f2ff;
}

.payment-confirmation-page #loading-indicator h1 {
    margin: 0;
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: 0;
}

.payment-confirmation-page .loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #c9ddf5;
    border-top-color: #0b63ce;
    border-radius: 50%;
    animation: spin 850ms linear infinite;
}

.payment-confirmation-page .confirmation-loading-steps {
    display: inline-flex;
    gap: 7px;
    margin-top: 2px;
}

.payment-confirmation-page .confirmation-loading-steps span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d2deed;
}

.payment-confirmation-page .confirmation-loading-steps .is-active {
    width: 22px;
    border-radius: 999px;
    background: #0b63ce;
}

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

.payment-confirmation-page .error-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff1f2;
    color: #dc2626;
    font-size: 26px;
}

.payment-confirmation-page #error-display[data-tone="processing"] .error-icon {
    background: #e8f2ff;
    color: #0b63ce;
}

.payment-confirmation-page .error-container h2 {
    margin: 0 0 12px;
    border: 0;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.2;
    font-weight: 650;
}

.payment-confirmation-page .confirmation-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 24px;
    padding: 0 18px;
    border: 1px solid #b8c7da;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.payment-confirmation-page .confirmation-home-link:hover {
    background: #f8fafc;
    border-color: #8ea5bf;
}

.payment-confirmation-page #confirmation-details .confirmation-container {
    width: min(900px, 100%);
    max-width: 900px;
    margin: 0 auto !important;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

.payment-confirmation-page .confirmation-header {
    padding: 34px 28px 30px;
}

.payment-confirmation-page .confirmation-section {
    margin: 0;
    padding: 22px 34px;
    border-radius: 0;
    border-bottom: 1px solid #e5edf6;
    background: #ffffff;
    box-shadow: none;
    text-align: left;
}

.payment-confirmation-page .confirmation-section h4 {
    margin: 0 0 12px;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-confirmation-page .booking-summary-section {
    padding-top: 24px;
    padding-bottom: 24px;
}

.payment-confirmation-page .booking-summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.payment-confirmation-page .booking-summary-list > div {
    display: grid;
    gap: 6px;
}

.payment-confirmation-page .booking-summary-list dt {
    margin: 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-confirmation-page .booking-summary-list dd {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 650;
}

.payment-confirmation-page .confirmation-section p {
    margin: 0;
}

.payment-confirmation-page ul.traveler-list {
    margin: 0;
    padding: 0;
}

.payment-confirmation-page ul.traveler-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 4px 0;
}

.payment-confirmation-page .itinerary-leg {
    margin: 0;
}

.payment-confirmation-page .itinerary-leg h4 {
    margin: 0 0 14px !important;
    color: #475569;
    font-size: 0.86rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-confirmation-page .review-segment-detailed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 10px 0;
}

.payment-confirmation-page .review-segment-detailed > div:nth-child(2) {
    color: #64748b;
    text-align: center;
}

.payment-confirmation-page .review-segment-detailed > div:last-child {
    text-align: right;
}

.payment-confirmation-page .itinerary-divider {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid #e5edf6;
}

.payment-confirmation-page .itinerary-email-card {
    background: #f8fbff;
}

.payment-confirmation-page .cancellation-request-card {
    background: #ffffff;
}

.payment-confirmation-page .itinerary-email-card__header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.payment-confirmation-page .cancellation-request-card__header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.payment-confirmation-page .itinerary-email-card__header > .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #e8f2ff;
    color: #0b63ce;
    font-size: 22px;
}

.payment-confirmation-page .cancellation-request-card__header > .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 21px;
}

.payment-confirmation-page .itinerary-email-card__header h4 {
    margin-bottom: 4px;
    color: #0f172a;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
}

.payment-confirmation-page .cancellation-request-card__header h4 {
    margin: 0 0 4px;
    color: #0f172a;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.03rem;
}

.payment-confirmation-page .itinerary-email-card__header p {
    margin: 0;
    color: #526173;
    font-size: 0.92rem;
}

.payment-confirmation-page .cancellation-request-card__header p {
    margin: 0;
    color: #526173;
    font-size: 0.92rem;
    line-height: 1.55;
}

.payment-confirmation-page #guest-email-form,
.payment-confirmation-page .cancellation-account-actions,
.payment-confirmation-page .cancellation-request-form,
.payment-confirmation-page .travel-policy-summary,
.payment-confirmation-page .cancellation-email-fallback {
    margin-left: 54px;
}

.payment-confirmation-page .travel-policy-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.payment-confirmation-page .travel-policy-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d7e6f8;
    border-radius: 8px;
    background: #f8fbff;
}

.payment-confirmation-page .travel-policy-card > div {
    display: grid;
    gap: 3px;
}

.payment-confirmation-page .travel-policy-card > div span,
.payment-confirmation-page .travel-policy-card dt {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-confirmation-page .travel-policy-card > div strong {
    color: #0f172a;
    font-size: 0.96rem;
}

.payment-confirmation-page .travel-policy-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.payment-confirmation-page .travel-policy-card dd {
    display: grid;
    gap: 5px;
    margin: 0;
    color: #526173;
    font-size: 0.86rem;
    line-height: 1.45;
}

.payment-confirmation-page .policy-status {
    width: max-content;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
}

.payment-confirmation-page .policy-status--allowed {
    background: #e7f8ef;
    color: #047857;
}

.payment-confirmation-page .policy-status--blocked {
    background: #feeceb;
    color: #b42318;
}

.payment-confirmation-page .policy-status--review {
    background: #fff7df;
    color: #855d0b;
}

.payment-confirmation-page .cancellation-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 18px;
}

.payment-confirmation-page .cancellation-account-actions.hidden,
.payment-confirmation-page .cancellation-account-actions[hidden] {
    display: none;
}

.payment-confirmation-page #guest-email-form label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 600;
}

.payment-confirmation-page .cancellation-request-form label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 650;
}

.payment-confirmation-page .cancellation-request-form label span {
    color: #64748b;
    font-weight: 500;
}

.payment-confirmation-page .support-action-options,
.payment-confirmation-page .cancellation-scope-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.payment-confirmation-page .support-action-options {
    margin-bottom: 16px;
}

.payment-confirmation-page .support-action-options legend,
.payment-confirmation-page .cancellation-scope-options legend {
    width: 100%;
    margin-bottom: 2px;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 650;
}

.payment-confirmation-page .support-action-options label,
.payment-confirmation-page .cancellation-scope-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #cbd7e5;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 0.88rem;
    cursor: pointer;
}

.payment-confirmation-page .cancellation-scope-options label {
    align-items: flex-start;
    min-width: 190px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.payment-confirmation-page .cancellation-scope-options label > span {
    display: grid;
    gap: 3px;
}

.payment-confirmation-page .cancellation-scope-options label strong {
    font-size: 0.9rem;
}

.payment-confirmation-page .cancellation-scope-options label small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
}

.payment-confirmation-page .cancellation-scope-options label.is-disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.payment-confirmation-page .support-action-options input,
.payment-confirmation-page .cancellation-scope-options input {
    width: 16px;
    height: 16px;
    accent-color: #0b63ce;
}

.payment-confirmation-page .date-change-fields {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid #d7e6f8;
    border-radius: 8px;
    background: #f8fbff;
}

.payment-confirmation-page .date-change-fields.hidden {
    display: none;
}

.payment-confirmation-page .date-change-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payment-confirmation-page .flight-change-quote {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1px solid #d7e6f8;
    background: #ffffff;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.5;
}

.payment-confirmation-page .flight-change-quote.hidden {
    display: none;
}

.payment-confirmation-page .flight-change-quote strong {
    color: #0f2747;
}

.payment-confirmation-page .flight-change-quote small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.78rem;
}

.payment-confirmation-page .flight-change-quote .material-icons-outlined {
    font-size: 16px;
    vertical-align: -3px;
    margin-right: 4px;
}

.payment-confirmation-page .flight-change-quote.is-loading {
    color: #64748b;
}

.payment-confirmation-page .flight-change-quote.is-blocked {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

.payment-confirmation-page .flight-change-quote.is-paymore {
    border-color: #fdba74;
    background: #fff7ed;
}

.payment-confirmation-page .flight-change-quote.is-refund {
    border-color: #86efac;
    background: #f0fdf4;
}

.payment-confirmation-page .flight-change-quote.is-info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.payment-confirmation-page .date-change-grid label {
    margin-bottom: 6px;
}

.payment-confirmation-page .date-change-grid input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    border: 1px solid #cbd7e5;
    border-radius: 8px;
    padding: 0 11px;
    color: #0f172a;
    font: inherit;
}

.payment-confirmation-page .date-change-grid input:disabled {
    background: #edf3fb;
    color: #94a3b8;
}

.payment-confirmation-page #cancellation-reason {
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    resize: vertical;
    border: 1px solid #cbd7e5;
    border-radius: 8px;
    padding: 11px 12px;
    color: #0f172a;
    font: inherit;
    line-height: 1.45;
}

.payment-confirmation-page #cancellation-reason:focus {
    outline: none;
    border-color: #0b63ce;
    box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.14);
}

.payment-confirmation-page .itinerary-email-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.payment-confirmation-page .cancellation-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
}

.payment-confirmation-page .cancellation-request-actions .guest-message {
    margin-top: 0;
    min-height: 20px;
    display: block;
    flex: 1 1 260px;
}

.payment-confirmation-page .cancellation-request-btn {
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    justify-content: center;
    gap: 8px;
    white-space: normal;
    text-align: center;
}

.payment-confirmation-page .cancellation-request-btn span:last-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.18;
}

.payment-confirmation-page .cancellation-request-btn.is-requested {
    min-width: 210px;
    border-color: #bdd7f5;
    background: #f5f9ff;
    color: #0b63ce;
    cursor: default;
    opacity: 1;
}

.payment-confirmation-page .cancellation-request-btn.is-requested .confirmation-action-icon {
    background: #e4f1ff;
    color: #0b63ce;
}

.payment-confirmation-page .cancellation-email-fallback {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #d7e6f8;
    border-radius: 8px;
    background: #f8fbff;
}

.payment-confirmation-page .cancellation-email-fallback strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 0.92rem;
}

.payment-confirmation-page .cancellation-email-fallback p {
    color: #526173;
    font-size: 0.9rem;
    line-height: 1.55;
}

.payment-confirmation-page .cancellation-email-fallback a {
    color: #0b63ce;
    font-weight: 800;
    text-decoration: none;
}

.payment-confirmation-page .cancellation-email-fallback a:hover {
    text-decoration: underline;
}

.payment-confirmation-page #guest-email-input {
    min-height: 42px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd7e5;
    border-radius: 8px;
    padding: 0 12px;
    color: #0f172a;
    font: inherit;
}

.payment-confirmation-page #send-email-btn {
    min-height: 42px;
    min-width: 128px;
    border-radius: 8px;
    white-space: nowrap;
}

.payment-confirmation-page .guest-message {
    min-height: 20px;
    margin: 10px 0 0;
    color: #526173;
    font-size: 0.9rem;
}

.payment-confirmation-page .guest-message.success {
    color: #047857;
}

.payment-confirmation-page .guest-message.error {
    color: #b42318;
}

.payment-confirmation-page .guest-message.notice {
    color: #855d0b;
}

.payment-confirmation-page .confirmation-footer {
    gap: 12px;
    padding: 18px 34px;
    border-top: 0;
    background: #f8fafc;
}

.payment-confirmation-page .confirmation-actions {
    padding-left: 34px;
    padding-right: 34px;
    text-align: left;
    background: #ffffff;
}

.payment-confirmation-page .confirmation-actions #download-itinerary-btn {
    min-height: 42px;
    border-radius: 8px;
}

.payment-confirmation-page .confirmation-document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 24px 34px;
    border-top: 1px solid #e6edf5;
    border-bottom: 1px solid #e6edf5;
    background: #ffffff;
}

.payment-confirmation-page .confirmation-document-actions.hidden {
    display: none;
}

.payment-confirmation-page .confirmation-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    min-width: 166px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.payment-confirmation-page .confirmation-action-btn:hover {
    transform: translateY(-1px);
}

.payment-confirmation-page .confirmation-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.18);
}

.payment-confirmation-page .confirmation-action-btn:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.payment-confirmation-page .confirmation-action-btn[aria-disabled="true"],
.payment-confirmation-page .confirmation-action-btn.is-loading {
    cursor: wait;
    opacity: 0.82;
    pointer-events: none;
    transform: none;
}

.payment-confirmation-page .confirmation-download-message {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: #40526f;
}

.payment-confirmation-page .confirmation-download-message.hidden {
    display: none;
}

.payment-confirmation-page .confirmation-download-message[data-tone="success"] {
    color: #047857;
}

.payment-confirmation-page .confirmation-download-message[data-tone="error"] {
    color: #b42318;
}

.payment-confirmation-page .confirmation-action-btn--primary {
    border: 1px solid #0b63ce;
    background: #0b63ce;
    color: #ffffff;
}

.payment-confirmation-page .confirmation-action-btn--primary:hover {
    border-color: #084fba;
    background: #084fba;
}

.payment-confirmation-page .confirmation-action-btn--secondary {
    border: 1px solid #bfd7f7;
    background: #ffffff;
    color: #0b63ce;
}

.payment-confirmation-page .confirmation-action-btn--secondary:hover {
    border-color: #8dbcf5;
    background: #f4f9ff;
}

.payment-confirmation-page .confirmation-action-icon {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    overflow: hidden;
    font-family: "Material Icons Outlined";
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    font-feature-settings: "liga";
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}

.payment-confirmation-page .confirmation-action-btn--primary .confirmation-action-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.payment-confirmation-page .confirmation-action-btn--secondary .confirmation-action-icon {
    background: #eef5ff;
    color: #0b63ce;
}

@media (max-width: 680px) {
    .payment-confirmation-page .booking-summary-list {
        grid-template-columns: 1fr;
    }

    .payment-confirmation-page .travel-policy-summary,
    .payment-confirmation-page .date-change-grid,
    .payment-confirmation-page .itinerary-email-form-row,
    .payment-confirmation-page .cancellation-request-actions,
    .payment-confirmation-page .confirmation-footer {
        grid-template-columns: 1fr;
        display: grid;
    }

    .payment-confirmation-page #send-email-btn,
    .payment-confirmation-page #request-cancellation-btn,
    .payment-confirmation-page .confirmation-footer .back-btn {
        width: 100%;
    }

    .payment-confirmation-page #guest-email-form,
    .payment-confirmation-page .travel-policy-summary,
    .payment-confirmation-page .cancellation-request-form,
    .payment-confirmation-page .cancellation-email-fallback,
    .payment-confirmation-page .cancellation-account-actions {
        margin-left: 0;
    }

    .payment-confirmation-page .cancellation-account-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .payment-confirmation-page .confirmation-document-actions {
        display: grid;
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .payment-confirmation-page .confirmation-action-btn {
        width: 100% !important;
    }
}

/* Admin dashboard */
.admin-dashboard-page {
    min-height: 100vh;
    background: #eef3f9;
    color: #0f172a;
}

.admin-dashboard-page .main-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
}

.admin-dashboard-page .header-content {
    max-width: 1320px;
}

.admin-environment-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #d8e5f5;
    border-radius: 999px;
    background: #f8fbff;
    color: #39506c;
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-shell {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 24px;
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 0 54px;
}

.admin-sidebar {
    position: sticky;
    top: 84px;
    align-self: start;
    display: grid;
    gap: 14px;
}

.admin-sidebar-card,
.admin-sidebar-status,
.admin-panel,
.admin-hero,
.admin-auth-gate,
.admin-metric-card {
    border: 1px solid #d8e5f5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
}

.admin-sidebar-card {
    padding: 20px;
}

.admin-kicker {
    display: block;
    margin-bottom: 7px;
    color: #0b63ce;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-sidebar-card h1,
.admin-hero h2,
.admin-panel h3,
.admin-detail-header h2,
.admin-section-title h3 {
    margin: 0;
    letter-spacing: 0;
}

.admin-sidebar-card h1 {
    font-size: 1.42rem;
    line-height: 1.1;
}

.admin-sidebar-card p,
.admin-hero p,
.admin-panel-meta,
.admin-muted {
    color: #64748b;
}

.admin-sidebar-card p {
    margin: 10px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.admin-nav {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid #d8e5f5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.admin-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.admin-nav-link:hover,
.admin-nav-link.is-active {
    border-color: #bdd7f5;
    background: #f2f7ff;
    color: #0b63ce;
}

.admin-nav-link .material-icons-outlined {
    font-size: 20px;
}

.admin-sidebar-status {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.admin-sidebar-provider {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-sidebar-provider span,
.admin-provider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
}

.admin-sidebar-provider.is-online span,
.admin-provider-item.is-online .admin-provider-dot {
    background: #059669;
}

.admin-sidebar-provider.is-warning span,
.admin-provider-item.is-warning .admin-provider-dot {
    background: #f59e0b;
}

.admin-sidebar-provider.is-missing span,
.admin-provider-item.is-missing .admin-provider-dot {
    background: #ef4444;
}

.admin-main {
    min-width: 0;
}

.admin-dashboard {
    display: grid;
    gap: 18px;
}

.admin-auth-gate {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 680px;
    margin: 110px auto 0;
    padding: 38px 28px;
    text-align: center;
}

.admin-auth-gate > .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0b63ce;
    font-size: 26px;
}

.admin-auth-gate.is-error {
    border-color: #fecaca;
    background: #fff7f7;
}

.admin-auth-gate.is-error > .material-icons-outlined {
    background: #fee2e2;
    color: #dc2626;
}

.admin-auth-gate h2 {
    margin: 0;
    font-size: 1.55rem;
}

.admin-auth-gate p {
    max-width: 520px;
    margin: 0;
    color: #52637a;
    line-height: 1.55;
}

.admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px;
}

.admin-hero h2 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.02;
}

.admin-hero p {
    max-width: 650px;
    margin: 12px 0 0;
    font-size: 1rem;
    line-height: 1.55;
}

.admin-hero-actions,
.admin-detail-actions,
.admin-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-primary-btn,
.admin-ghost-btn,
.admin-link-btn,
.admin-row-action,
.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.admin-primary-btn {
    border: 1px solid #0b63ce;
    background: #0b63ce;
    color: #ffffff;
    padding: 0 16px;
}

.admin-primary-btn:hover {
    border-color: #084fba;
    background: #084fba;
    transform: translateY(-1px);
}

.admin-ghost-btn,
.admin-row-action {
    border: 1px solid #bdd7f5;
    background: #ffffff;
    color: #0b63ce;
    padding: 0 14px;
}

.admin-ghost-btn:hover,
.admin-row-action:hover {
    background: #f2f7ff;
}

.admin-link-btn {
    min-height: 36px;
    border: 0;
    background: transparent;
    color: #0b63ce;
    padding: 0;
}

.admin-icon-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border: 1px solid #d8e5f5;
    background: #ffffff;
    color: #334155;
}

.admin-primary-btn:disabled,
.admin-ghost-btn:disabled,
.admin-row-action:disabled {
    cursor: wait;
    opacity: 0.62;
    transform: none;
}

.admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.admin-metric-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
}

.admin-metric-card.is-loading {
    min-height: 96px;
    border: 1px dashed #d6e0ee;
    background: linear-gradient(90deg, #f1f5fc 0%, #ffffff 50%, #f1f5fc 100%);
    background-size: 220% 100%;
    animation: adminSkeleton 1.4s ease-in-out infinite;
}

.admin-metric-card > .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    background: #eaf2ff;
    color: #0b63ce;
}

.admin-metric-card--green > .material-icons-outlined {
    background: #e8f7ef;
    color: #047857;
}

.admin-metric-card--orange > .material-icons-outlined {
    background: #fff4e4;
    color: #c05621;
}

.admin-metric-card--purple > .material-icons-outlined {
    background: #f0eaff;
    color: #6d28d9;
}

.admin-metric-card strong {
    display: block;
    color: #0f172a;
    font-size: 1.65rem;
    line-height: 1;
}

.admin-metric-card span:not(.material-icons-outlined) {
    display: block;
    margin-top: 7px;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 850;
}

.admin-metric-card small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-grid {
    display: grid;
    gap: 18px;
}

.admin-grid--two {
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
}

.admin-panel {
    min-width: 0;
    padding: 20px;
}

.admin-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-panel-header--stacked {
    display: grid;
    gap: 16px;
}

.admin-panel h3 {
    color: #0f172a;
    font-size: 1.15rem;
}

.admin-panel-meta {
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-revenue-chart {
    display: flex;
    align-items: end;
    gap: 8px;
    min-height: 190px;
    padding: 16px 12px 8px;
    border: 1px solid #e2ebf7;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.admin-chart-bar {
    display: grid;
    align-items: end;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.admin-chart-bar span {
    width: 100%;
    max-width: 30px;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(180deg, #0b63ce 0%, #5aa4ff 100%);
}

.admin-chart-bar small {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
}

.admin-provider-list,
.admin-support-queue,
.admin-request-list,
.admin-traveler-list {
    display: grid;
    gap: 10px;
}

.admin-provider-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e2ebf7;
    border-radius: 8px;
    background: #f8fbff;
}

.admin-provider-item strong,
.admin-support-card h4,
.admin-detail-card strong,
.admin-policy-card strong,
.admin-request-detail h4,
.admin-traveler-list strong {
    color: #0f172a;
}

.admin-provider-item small,
.admin-support-card small,
.admin-detail-card p,
.admin-policy-card p,
.admin-traveler-list small {
    color: #64748b;
}

.admin-provider-item strong,
.admin-provider-item small {
    display: block;
}

.admin-provider-item em {
    color: #334155;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-support-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #d8e5f5;
    border-radius: 8px;
    background: #f8fbff;
}

.admin-support-card h4 {
    margin: 7px 0 4px;
}

.admin-support-card p,
.admin-support-card small {
    margin: 0;
}

.admin-filter-row {
    width: 100%;
}

.admin-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    min-width: min(460px, 100%);
    flex: 1 1 360px;
    border: 1px solid #cbd7e5;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
}

.admin-search-field .material-icons-outlined {
    color: #64748b;
    font-size: 19px;
}

.admin-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #0f172a;
    font: inherit;
    font-size: 0.9rem;
}

.admin-filter-row select,
.admin-request-controls select,
.admin-request-controls input {
    min-height: 42px;
    border: 1px solid #cbd7e5;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
}

.admin-filter-row select {
    padding: 0 34px 0 12px;
}

.admin-table-wrap {
    overflow: auto;
    border: 1px solid #e2ebf7;
    border-radius: 8px;
}

.admin-bookings-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: #ffffff;
}

.admin-bookings-table th,
.admin-bookings-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e9eff7;
    text-align: left;
    vertical-align: middle;
}

.admin-bookings-table th {
    background: #f8fbff;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.admin-bookings-table td strong,
.admin-bookings-table td small {
    display: block;
}

.admin-bookings-table td strong {
    color: #0f172a;
    font-size: 0.9rem;
}

.admin-bookings-table td small {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
}

.admin-bookings-table tr:hover td {
    background: #fbfdff;
}

.admin-status-pill,
.admin-support-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
}

.admin-status-pill--confirmed,
.admin-status-pill--resolved {
    background: #e7f8ef;
    color: #047857;
}

.admin-status-pill--pending_payment,
.admin-status-pill--processing,
.admin-status-pill--reviewing,
.admin-status-pill--requested {
    background: #fff7df;
    color: #9a5b00;
}

.admin-status-pill--failed,
.admin-status-pill--rejected,
.admin-status-pill--canceled {
    background: #feeceb;
    color: #b42318;
}

.admin-support-badge {
    background: #eaf2ff;
    color: #0b63ce;
}

.admin-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
}

.admin-table-footer span {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 800;
}

.admin-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 18px;
    border: 1px dashed #cbd7e5;
    border-radius: 8px;
    background: #f8fbff;
    text-align: center;
}

.admin-empty-state--table {
    margin: 12px;
}

.admin-empty-state.is-error {
    border-color: #fecaca;
    background: #fff7f7;
}

.admin-empty-state > .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0b63ce;
}

.admin-empty-state.is-error > .material-icons-outlined {
    background: #fee2e2;
    color: #dc2626;
}

.admin-empty-state strong,
.admin-empty-state p {
    margin: 0;
}

.admin-table-loading,
.admin-detail-loading {
    display: grid;
    gap: 10px;
    padding: 24px;
}

.admin-loading-line {
    display: block;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #edf3fb, #f8fbff, #edf3fb);
    background-size: 220% 100%;
    animation: adminSkeleton 1.2s ease-in-out infinite;
}

.admin-loading-line:nth-child(2) {
    width: 75%;
}

.admin-loading-line:nth-child(3) {
    width: 48%;
}

@keyframes adminSkeleton {
    0% { background-position: 0% 50%; }
    100% { background-position: -220% 50%; }
}

.admin-detail-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}

.admin-detail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    transition: background-color 180ms ease;
}

.admin-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(760px, 100%);
    height: 100%;
    overflow-y: auto;
    transform: translateX(100%);
    border-left: 1px solid #d8e5f5;
    background: #f8fbff;
    box-shadow: -22px 0 44px rgba(15, 23, 42, 0.15);
    transition: transform 180ms ease;
}

.admin-detail-drawer.is-open {
    pointer-events: auto;
}

.admin-detail-drawer.is-open .admin-detail-overlay {
    background: rgba(15, 23, 42, 0.28);
}

.admin-detail-drawer.is-open .admin-detail-panel {
    transform: translateX(0);
}

.admin-detail-close {
    position: sticky;
    top: 14px;
    left: calc(100% - 54px);
    z-index: 2;
    margin: 14px 14px 0 auto;
}

.admin-detail-content {
    display: grid;
    gap: 16px;
    padding: 0 24px 28px;
}

.admin-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0 4px;
}

.admin-detail-header h2 {
    font-size: 2rem;
}

.admin-detail-header p {
    margin: 6px 0 0;
    color: #64748b;
}

.admin-detail-price {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.admin-detail-price strong {
    font-size: 1.55rem;
}

.admin-detail-grid,
.admin-policy-grid,
.admin-payment-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-detail-card,
.admin-policy-card,
.admin-payment-breakdown > div,
.admin-request-detail,
.admin-traveler-list article,
.admin-empty-inline {
    border: 1px solid #d8e5f5;
    border-radius: 8px;
    background: #ffffff;
}

.admin-detail-card,
.admin-policy-card,
.admin-payment-breakdown > div {
    padding: 14px;
}

.admin-detail-card > span,
.admin-policy-card > span,
.admin-payment-breakdown span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.admin-detail-card strong,
.admin-payment-breakdown strong {
    display: block;
    font-size: 1rem;
}

.admin-detail-card p,
.admin-policy-card p {
    margin: 7px 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
}

.admin-detail-section {
    display: grid;
    gap: 12px;
}

.admin-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e2ebf7;
    padding-bottom: 10px;
}

.admin-request-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
    gap: 14px;
    padding: 14px;
}

.admin-request-detail h4,
.admin-request-detail p {
    margin: 7px 0 0;
}

.admin-request-detail blockquote {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #0b63ce;
    background: #f2f7ff;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.45;
}

.admin-request-controls {
    display: grid;
    gap: 9px;
    align-content: start;
}

.admin-request-controls input,
.admin-request-controls select {
    width: 100%;
    box-sizing: border-box;
    padding: 0 11px;
}

.admin-traveler-list article {
    padding: 12px 14px;
}

.admin-traveler-list span,
.admin-traveler-list small {
    display: block;
    margin-top: 3px;
}

.admin-empty-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
}

.admin-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 120;
    max-width: min(420px, calc(100vw - 48px));
    padding: 13px 16px;
    border: 1px solid #b7e2c8;
    border-radius: 8px;
    background: #ecfdf3;
    color: #047857;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    font-size: 0.9rem;
    font-weight: 850;
}

.admin-toast--error {
    border-color: #fecaca;
    background: #fff7f7;
    color: #b42318;
}

body.admin-drawer-open {
    overflow: hidden;
}

@media (max-width: 1120px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
    }

    .admin-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-nav-link {
        justify-content: center;
    }

    .admin-sidebar-status {
        display: none;
    }

    .admin-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-grid--two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-shell {
        width: min(100% - 24px, 1320px);
        padding-top: 16px;
    }

    .admin-hero,
    .admin-panel-header,
    .admin-detail-header,
    .admin-table-footer {
        display: grid;
        justify-items: stretch;
    }

    .admin-metrics-grid,
    .admin-detail-grid,
    .admin-policy-grid,
    .admin-payment-breakdown,
    .admin-request-detail,
    .admin-support-card {
        grid-template-columns: 1fr;
    }

    .admin-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-hero {
        padding: 22px;
    }

    .admin-hero h2 {
        font-size: 2.15rem;
    }

    .admin-detail-content {
        padding: 0 14px 24px;
    }
}

/* Arabic locale / RTL polish */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] .route-chip,
html[dir="rtl"] .date-chip,
html[dir="rtl"] .meta-chip,
html[dir="rtl"] .flight-route,
html[dir="rtl"] .airport-code,
html[dir="rtl"] .price,
html[dir="rtl"] .money,
html[dir="rtl"] .pill--currency {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .main-header .header-content,
html[dir="rtl"] .header-controls,
html[dir="rtl"] .quick-prefs,
html[dir="rtl"] .footer-locale,
html[dir="rtl"] .flight-review-actions,
html[dir="rtl"] .confirmation-footer,
html[dir="rtl"] .payment-method-grid,
html[dir="rtl"] .checkout-stepper {
    direction: rtl;
}

html[dir="rtl"] .material-icons-outlined,
html[dir="rtl"] .fi,
html[dir="rtl"] .google-login-container img,
html[dir="rtl"] .social-login-container img {
    direction: ltr;
}

html[dir="rtl"] .footer-col-title {
    text-align: right;
}

html[dir="rtl"] .language-menu {
    left: auto;
    right: 0;
    text-align: right;
}

html[dir="rtl"] .language-menu-option {
    justify-content: flex-start;
}

@media (max-width: 1180px) {
    .checkout-progress-rail {
        position: static;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0 0 12px;
    }

    .checkout-progress-rail a {
        min-height: 34px;
        justify-content: center;
    }
}

/* Keep the checkout card centered inside the results shell while the side rail sits outside it. */
body.page-review #widget-flight-results-area {
    box-sizing: border-box !important;
    width: min(calc(var(--checkout-card-width) + 40px), calc(100% - 40px)) !important;
    max-width: calc(var(--checkout-card-width) + 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

body.page-review .results-layout-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.page-review #flight-results-content {
    width: min(var(--checkout-card-width), 100%) !important;
    max-width: var(--checkout-card-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.page-review .checkout-flow-shell {
    width: 100% !important;
    max-width: var(--checkout-card-width) !important;
}

/* Checkout timeline and payment page */
body.page-review .checkout-progress-rail {
    position: fixed;
    top: 148px;
    left: max(18px, calc(50vw - (var(--checkout-card-width) / 2) - 246px));
    z-index: 40;
    width: 214px;
}

body.page-review .checkout-progress-shell {
    padding: 14px;
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(10px);
}

body.page-review .checkout-progress-header {
    padding: 2px 4px 12px;
    border-bottom: 1px solid #edf2f8;
    margin-bottom: 10px;
}

body.page-review .checkout-progress-header span,
body.page-review .checkout-progress-header strong {
    display: block;
}

body.page-review .checkout-progress-header span {
    color: #0b63ce;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.page-review .checkout-progress-header strong {
    margin-top: 3px;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 650;
}

body.page-review .checkout-progress-track {
    position: relative;
    display: grid;
    gap: 7px;
}

body.page-review .checkout-progress-track::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 14px;
    width: 2px;
    border-radius: 999px;
    background: #d9e6f5;
}

body.page-review .checkout-progress-rail a {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 46px;
    padding: 8px 10px 8px 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #667085;
    opacity: 0.72;
    box-shadow: none;
    transition: opacity 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

body.page-review .checkout-progress-rail a span {
    position: relative;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid #cbd9ea;
    background: #ffffff;
    box-shadow: 0 0 0 4px #ffffff;
}

body.page-review .checkout-progress-rail a strong {
    color: inherit;
    font-size: 0.88rem;
    font-weight: 620;
    line-height: 1.2;
}

body.page-review .checkout-progress-rail a.is-past {
    color: #516174;
    opacity: 0.82;
}

body.page-review .checkout-progress-rail a.is-past span {
    border-color: #8fb2db;
    background: #8fb2db;
}

body.page-review .checkout-progress-rail a.is-past span::after {
    content: "";
    width: 5px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(40deg) translateY(-1px);
}

body.page-review .checkout-progress-rail a.is-active {
    min-height: 50px;
    padding: 9px 12px 9px 0;
    border-color: #c9ddf7;
    background: #f7fbff;
    color: #075ec4;
    opacity: 1;
    box-shadow: inset 3px 0 0 #0b63ce, 0 10px 22px rgba(15, 23, 42, 0.08);
}

body.page-review .checkout-progress-rail a.is-active span {
    border-color: #0b63ce;
    background: #0b63ce;
    box-shadow: 0 0 0 4px #e7f1ff;
}

body.page-review .checkout-progress-rail a.is-active span::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #ffffff;
}

#suggested-hotels-container {
    position: relative;
    width: min(var(--checkout-card-width), calc(100vw - 48px)) !important;
    max-width: var(--checkout-card-width) !important;
    margin: 28px auto 0;
    padding: 0;
}

#suggested-hotels-container.hidden,
#suggested-hotels-container[hidden] {
    display: none !important;
}

.suggested-hotels-checkout-card {
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
}

.suggested-hotels-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding: 28px;
    border-bottom: 1px solid #e6edf5;
}

.suggested-hotels-kicker {
    display: block;
    margin-bottom: 6px;
    color: #0b63ce;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.suggested-hotels-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
}

.suggested-hotels-header p {
    max-width: 620px;
    margin: 8px 0 0;
    color: #526173;
    font-size: 0.96rem;
    line-height: 1.5;
}

.suggested-hotels-header .suggested-hotels-policy-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 680px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #f0f7ff;
    color: #0f4f9f;
    font-size: 0.88rem;
    font-weight: 600;
}

.suggested-hotels-policy-note .material-icons-outlined {
    color: #0b63ce;
    font-size: 18px;
}

.suggested-hotels-summary {
    flex: 0 0 auto;
    min-width: 180px;
    padding: 12px 14px;
    border: 1px solid #d8e7fb;
    border-radius: 8px;
    background: #f7fbff;
    text-align: right;
}

.suggested-hotels-summary span,
.suggested-hotels-summary strong {
    display: block;
}

.suggested-hotels-summary span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.suggested-hotels-summary strong {
    margin-top: 4px;
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 650;
}

.suggested-hotels-grid {
    display: grid;
    gap: 16px;
    padding: 24px 28px 16px;
}

.suggested-hotel-card {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.suggested-hotel-card.is-selected {
    border-color: #0b63ce;
    box-shadow: 0 12px 26px rgba(11, 99, 206, 0.14);
}

.suggested-hotel-media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 178px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef5ff;
}

.suggested-hotel-media img {
    width: 100%;
    height: 100%;
    min-height: 178px;
    object-fit: cover;
    cursor: pointer;
}

.suggested-hotel-media img:focus-visible {
    outline: 3px solid rgba(11, 99, 206, 0.45);
    outline-offset: -3px;
}

.suggested-hotel-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 58px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.46));
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
}

.suggested-hotel-media:hover::after,
.suggested-hotel-media:focus-within::after {
    opacity: 1;
}

.suggested-hotel-zoom-hint {
    position: absolute;
    left: 10px;
    bottom: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
}

.suggested-hotel-media:hover .suggested-hotel-zoom-hint,
.suggested-hotel-media:focus-within .suggested-hotel-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}

.suggested-hotel-zoom-hint .material-icons-outlined {
    color: #0b63ce;
    font-size: 16px;
}

.suggested-hotel-photo-icon {
    color: #0b63ce;
    font-size: 38px;
}

.hotel-image-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(219, 231, 245, 0.92);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0b63ce;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    transform: translateY(-50%);
    cursor: pointer;
}

.hotel-image-nav--prev {
    left: 8px;
}

.hotel-image-nav--next {
    right: 8px;
}

.hotel-image-nav .material-icons-outlined {
    font-size: 20px;
}

.suggested-hotel-photo-count {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 650;
}

.suggested-hotel-body {
    min-width: 0;
}

.suggested-hotel-label {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: #0b63ce;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.suggested-hotel-label .material-icons-outlined {
    font-size: 18px;
}

.suggested-hotel-card h4 {
    margin: 8px 0 6px;
    color: #0f172a;
    font-size: 1.12rem;
    font-weight: 620;
    line-height: 1.25;
}

.suggested-hotel-card p {
    margin: 0;
    color: #526173;
    font-size: 0.9rem;
    line-height: 1.45;
}

.suggested-hotel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.suggested-hotel-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid #cfe3ff;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
    color: #24425f;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 5px 12px rgba(11, 99, 206, 0.06);
}

.suggested-hotel-meta span:nth-child(2) {
    border-color: #b9dcff;
    background: #eaf4ff;
    color: #0b63ce;
}

.suggested-hotel-meta span:nth-child(3) {
    border-color: #d7c7ff;
    background: #f4f0ff;
    color: #4c2c91;
}

body.hotel-lightbox-open {
    overflow: hidden;
}

/* Free-preview registration gate modal -- shown when an anonymous IP
   has used /api/budget-search the configured number of times (default
   10). Locks the body scroll while open, dismissable via close button,
   backdrop click, or Escape. */
body.budget-gate-open {
    overflow: hidden;
}

.budget-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: budget-gate-fade-in 180ms ease;
}

@keyframes budget-gate-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.budget-gate-card {
    position: relative;
    max-width: 460px;
    width: 100%;
    padding: 32px 28px 26px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4);
    text-align: left;
    animation: budget-gate-slide-up 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes budget-gate-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.budget-gate-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.budget-gate-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.budget-gate-close .material-icons-outlined {
    font-size: 20px;
}

.budget-gate-kicker {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #0b4fc4;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.budget-gate-card h2 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 800;
}

.budget-gate-card > p {
    margin: 0 0 16px;
    color: #475569;
    font-size: 0.94rem;
    line-height: 1.45;
}

.budget-gate-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    gap: 8px;
}

.budget-gate-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 600;
}

.budget-gate-perks li .material-icons-outlined {
    flex: 0 0 auto;
    font-size: 20px;
    color: #16a34a;
}

.budget-gate-actions {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.budget-gate-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font: inherit;
    font-size: 0.96rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.budget-gate-cta--primary {
    background: #0b6be8;
    color: #fff;
    box-shadow: 0 6px 16px rgba(11, 107, 232, 0.32);
}

.budget-gate-cta--primary:hover {
    background: #0b4fc4;
    transform: translateY(-1px);
}

.budget-gate-cta--secondary {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.budget-gate-cta--secondary:hover {
    background: #e2e8f0;
}

.budget-gate-footnote {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    text-align: center;
}

.budget-gate-footnote a {
    color: #0b6be8;
    font-weight: 700;
    text-decoration: none;
}

.budget-gate-footnote a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .budget-gate-card {
        padding: 26px 20px 22px;
    }

    .budget-gate-card h2 {
        font-size: 1.25rem;
    }
}

.hotel-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 34px;
}

.hotel-image-lightbox.hidden {
    display: none !important;
}

.hotel-image-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 18, 34, 0.78);
    backdrop-filter: blur(6px);
}

.hotel-image-lightbox__panel {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100vw - 56px));
    max-height: calc(100vh - 56px);
}

.hotel-image-lightbox figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: #071222;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

.hotel-image-lightbox img {
    display: block;
    width: 100%;
    height: min(72vh, 680px);
    object-fit: contain;
    background: #071222;
}

.hotel-image-lightbox figcaption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 13px 16px;
    background: #ffffff;
    color: #0f172a;
}

.hotel-image-lightbox figcaption strong {
    overflow: hidden;
    font-size: 0.96rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotel-image-lightbox figcaption span {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 650;
}

.hotel-image-lightbox__close,
.hotel-image-lightbox__nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(219, 231, 245, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #0b63ce;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}

.hotel-image-lightbox__close {
    top: -18px;
    right: -18px;
    width: 42px;
    height: 42px;
}

.hotel-image-lightbox__nav {
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
}

.hotel-image-lightbox__nav--prev {
    left: -24px;
}

.hotel-image-lightbox__nav--next {
    right: -24px;
}

.hotel-image-lightbox__close .material-icons-outlined,
.hotel-image-lightbox__nav .material-icons-outlined {
    font-size: 24px;
}

@media (max-width: 760px) {
    .hotel-image-lightbox {
        padding: 18px;
    }

    .hotel-image-lightbox__panel {
        width: 100%;
        max-height: calc(100vh - 36px);
    }

    .hotel-image-lightbox img {
        height: min(68vh, 560px);
    }

    .hotel-image-lightbox__close {
        top: 10px;
        right: 10px;
    }

    .hotel-image-lightbox__nav--prev {
        left: 10px;
    }

    .hotel-image-lightbox__nav--next {
        right: 10px;
    }
}

.suggested-hotel-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin-top: 16px;
}

.suggested-hotel-footer strong,
.suggested-hotel-footer span,
.suggested-hotel-footer small {
    display: block;
}

.suggested-hotel-footer strong {
    color: #061832;
    font-size: 1.12rem;
    font-weight: 650;
}

.suggested-hotel-footer span,
.suggested-hotel-footer small {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
}

.select-suggested-hotel-btn {
    min-width: 104px;
    min-height: 38px;
    border: 2px solid #0b63ce !important;
    color: #0b63ce !important;
}

.select-suggested-hotel-btn.is-selected {
    background: #0b63ce !important;
    color: #ffffff !important;
}

.suggested-hotels-empty {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    margin: 24px 28px 16px;
    padding: 18px;
    border: 1px solid #d8e7fb;
    border-radius: 8px;
    background: #f7fbff;
    color: #526173;
}

.suggested-hotels-empty .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8f2ff;
    color: #0b63ce;
}

.suggested-hotels-empty strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-weight: 650;
}

.suggested-hotels-note {
    margin: 0 28px 20px;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.45;
}

.suggested-hotels-total {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0 28px 20px;
    overflow: hidden;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #dfe7f1;
}

.suggested-hotels-total > div {
    min-width: 0;
    padding: 14px 16px;
    background: #fbfdff;
}

.suggested-hotels-total span {
    display: block;
    overflow: hidden;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggested-hotels-total strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggested-hotels-total-final strong {
    color: #0b63ce;
}

.suggested-hotels-actions {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px 28px;
    border-top: 1px solid #e6edf5;
    background: #fbfdff;
}

.suggested-hotels-actions .back-btn,
.suggested-hotels-actions .explore-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.suggested-hotels-actions .back-btn {
    min-width: 168px;
    border: 2px solid var(--color-accent, #2f80ed) !important;
    background: transparent !important;
    color: var(--color-accent, #2f80ed) !important;
}

.suggested-hotels-actions .explore-btn {
    min-width: 220px;
    border: 2px solid var(--color-primary, #2f80ed) !important;
    background: var(--color-primary, #2f80ed) !important;
    color: #ffffff !important;
}

#payment-details-container {
    position: relative;
    width: min(var(--checkout-card-width), calc(100vw - 48px)) !important;
    max-width: var(--checkout-card-width) !important;
    margin: 28px auto 44px;
    padding: 0;
}

#payment-details-container.hidden,
#payment-details-container[hidden] {
    display: none !important;
}

.payment-checkout-card {
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
}

.payment-checkout-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding: 28px;
    border-bottom: 1px solid #e6edf5;
}

.payment-checkout-kicker {
    display: block;
    margin-bottom: 6px;
    color: #0b63ce;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payment-checkout-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
}

.payment-checkout-header p {
    max-width: 560px;
    margin: 8px 0 0;
    color: #526173;
    font-size: 0.96rem;
    line-height: 1.5;
}

.payment-checkout-header > strong {
    flex: 0 0 auto;
    color: #061832;
    font-size: 1.55rem;
    font-weight: 650;
    line-height: 1.1;
}

.payment-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 0 28px;
    border-bottom: 1px solid #e6edf5;
    background: #e6edf5;
}

.payment-hotel-summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 20px 28px 0;
    padding: 14px 16px;
    border: 1px solid #d8e7fb;
    border-radius: 8px;
    background: #f7fbff;
}

.payment-hotel-summary > .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8f2ff;
    color: #0b63ce;
}

.payment-hotel-summary strong,
.payment-hotel-summary p {
    display: block;
    margin: 0;
}

.payment-hotel-summary strong {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 650;
}

.payment-hotel-summary p {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
}

.payment-hotel-summary > div:last-child {
    text-align: right;
}

.payment-hotel-summary--empty {
    grid-template-columns: 38px minmax(0, 1fr);
}

.payment-summary-strip div {
    min-width: 0;
    padding: 16px 14px;
    background: #fbfdff;
}

.payment-summary-strip span,
.payment-actions span {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 600;
}

.payment-summary-strip strong,
.payment-actions strong {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#payment-form {
    display: grid;
}

.payment-form-panel {
    display: grid;
    gap: 18px;
    padding: 28px;
}

.payment-secure-note {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #d8e7fb;
    border-radius: 8px;
    background: #f7fbff;
    color: #0f172a;
}

.payment-secure-note .material-icons-outlined {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e8f2ff;
    color: #0b63ce;
    font-size: 19px;
}

.payment-secure-note strong {
    display: block;
    font-size: 0.96rem;
    font-weight: 600;
}

.payment-secure-note span:not(.material-icons-outlined) {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.86rem;
}

.payment-element-card {
    min-height: 280px;
    padding: 18px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
}

.payment-actions {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px 28px;
    border-top: 1px solid #e6edf5;
    background: #fbfdff;
}

#payment-form #submit-payment-btn {
    align-self: auto;
    min-width: 220px;
    min-height: 44px;
    border-radius: 8px;
    font-weight: 650;
}

.payment-error-message {
    min-height: 20px;
    padding: 0 28px 18px;
    color: #b42318;
    font-size: 0.9rem;
}

.payment-loading-panel,
.payment-error-panel {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 42px 28px;
    color: #526173;
}

.payment-loading-bars {
    display: inline-flex;
    gap: 7px;
    align-items: end;
    height: 34px;
}

.payment-loading-bars span {
    width: 9px;
    height: 26px;
    border-radius: 999px;
    background: #0b63ce;
    animation: paymentPulse 900ms ease-in-out infinite alternate;
}

.payment-loading-bars span:nth-child(2) {
    animation-delay: 120ms;
}

.payment-loading-bars span:nth-child(3) {
    animation-delay: 240ms;
}

.payment-error-panel {
    justify-items: start;
    grid-template-columns: 24px minmax(0, 1fr);
    margin: 28px;
    padding: 16px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff7f7;
    color: #b42318;
}

.payment-error-panel .material-icons-outlined {
    font-size: 22px;
}

@keyframes paymentPulse {
    from { opacity: 0.45; transform: scaleY(0.72); }
    to { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 1280px) {
    body.page-review .checkout-progress-rail {
        position: sticky;
        top: 12px;
        width: min(var(--checkout-card-width), 100%);
        margin: 0 auto 12px;
    }

    body.page-review .checkout-progress-shell {
        padding: 10px;
    }

    body.page-review .checkout-progress-header {
        display: none;
    }

    body.page-review .checkout-progress-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    body.page-review .checkout-progress-track::before {
        top: 16px;
        bottom: auto;
        left: 10%;
        right: 10%;
        width: auto;
        height: 2px;
    }

    body.page-review .checkout-progress-rail a {
        grid-template-columns: 20px minmax(0, auto);
        justify-content: center;
        padding-right: 8px;
    }

    body.page-review .checkout-progress-rail a.is-active {
        box-shadow: inset 0 -3px 0 #0b63ce, 0 10px 22px rgba(15, 23, 42, 0.08);
    }
}

@media (max-width: 760px) {
    #suggested-hotels-container {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 16px auto 0;
    }

    .suggested-hotels-header,
    .suggested-hotels-actions,
    .suggested-hotel-card,
    .suggested-hotel-footer {
        display: grid;
    }

    .suggested-hotels-header,
    .suggested-hotels-grid,
    .suggested-hotels-actions {
        padding: 20px;
    }

    .suggested-hotel-card {
        grid-template-columns: 1fr;
    }

    .suggested-hotels-summary {
        min-width: 0;
        text-align: left;
    }

    .suggested-hotels-note {
        margin: 0 20px 18px;
    }

    .suggested-hotels-total {
        grid-template-columns: 1fr;
        margin: 0 20px 18px;
    }

    .payment-hotel-summary {
        grid-template-columns: 38px minmax(0, 1fr);
        margin: 18px 20px 0;
    }

    .payment-hotel-summary > div:last-child {
        text-align: left;
    }

    .suggested-hotels-actions .back-btn,
    .suggested-hotels-actions .explore-btn,
    .select-suggested-hotel-btn {
        width: 100%;
        min-width: 0;
    }

    #payment-details-container {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 16px auto 32px;
    }

    .payment-checkout-header,
    .payment-actions {
        display: grid;
        padding: 20px;
    }

    .payment-summary-strip {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .payment-form-panel {
        padding: 20px;
    }

    .payment-element-card {
        padding: 14px;
    }

    #payment-form #submit-payment-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Results shell alignment and compact weather rail */
:root {
    --eridura-results-shell-width: var(--container-width);
    --weather-rail-width: 244px;
    --results-filter-width: 220px;
    --results-layout-gap: 18px;
    --results-board-gap: 14px;
}

body.page-results {
    overflow-x: clip;
}

body.page-results #widget-flight-results-area {
    box-sizing: border-box;
    width: var(--eridura-results-rail-width, min(var(--eridura-results-shell-width), calc(100vw - 64px))) !important;
    max-width: none !important;
}

body.page-results #widget-flight-results-area {
    margin-top: 28px !important;
    margin-right: auto !important;
    margin-bottom: 44px !important;
    margin-left: var(--eridura-results-rail-left, max(32px, calc((100vw - var(--eridura-results-shell-width)) / 2))) !important;
}

body.page-results #widget-flight-results-area .search-summary-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.page-results #widget-flight-results-area .search-summary-bar {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

body.page-results .results-layout-container {
    grid-template-columns: var(--results-filter-width) minmax(0, 1fr) !important;
    gap: var(--results-layout-gap) !important;
    justify-content: stretch !important;
}

body.page-results .flight-results-board--with-weather {
    grid-template-columns: minmax(0, 1fr) var(--weather-rail-width) !important;
    gap: var(--results-board-gap) !important;
}

body.page-results .flight-results-weather-rail {
    width: var(--weather-rail-width);
    max-width: var(--weather-rail-width);
    min-width: 0;
}

body.page-results .flight-results-weather-rail .trip-weather-card {
    box-sizing: border-box;
    max-width: 100%;
}

body.page-results #filter-sidebar {
    width: var(--results-filter-width) !important;
    max-width: var(--results-filter-width) !important;
}

body.page-results #flight-results-content,
body.page-results .flight-results-board,
body.page-results .flight-results-list-column,
body.page-results .flight-card-list {
    width: 100%;
    min-width: 0;
}

body.page-results .flight-card-list .flight-offer-card {
    width: 100%;
    box-sizing: border-box;
}

body.page-results .flight-offer-card.rich-offer .offer-main {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) minmax(132px, auto) !important;
    gap: 14px !important;
}

body.page-results .flight-offer-card.rich-offer .airline-logo {
    width: 86px;
}

body.page-results .flight-offer-card.rich-offer .itinerary-main-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

body.page-results .flight-offer-card.rich-offer .itinerary-timepoint {
    min-width: 0;
    white-space: normal;
    line-height: 1.15;
}

body.page-results .flight-offer-card.rich-offer .itinerary-timepoint .date-display {
    display: inline-block;
    margin-left: 3px;
    white-space: nowrap;
}

body.page-results .flight-offer-card.rich-offer .itinerary-timepoint--arrival {
    text-align: right;
}

body.page-results .flight-offer-card.rich-offer .itinerary-duration-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #cfe0f7;
    border-radius: 999px;
    background: #f4f8ff;
    color: #0b63ce;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

body.page-results .flight-offer-card.rich-offer .itinerary-sub-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

body.page-results .flight-offer-card.rich-offer .itinerary-sub-line > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-weather-card--specific {
    padding: 12px;
}

.trip-weather-card--specific .trip-weather-card-head {
    gap: 8px;
}

.trip-weather-card--specific .trip-weather-icon-slot {
    width: 28px;
    height: 28px;
}

.trip-weather-card--specific .trip-weather-icon-slot img,
.trip-weather-card--specific .trip-weather-icon-slot > .material-icons-outlined {
    width: 22px;
    height: 22px;
    font-size: 23px;
}

.trip-weather-card--specific small {
    font-size: 0.68rem;
    line-height: 1.2;
}

.trip-weather-card--specific strong {
    font-size: 0.9rem;
}

.trip-weather-card--specific .trip-weather-meta {
    gap: 6px;
    margin-top: 10px;
}

.trip-weather-card--specific .trip-weather-meta span {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.74rem;
}

.trip-weather-day-card {
    display: block;
}

.trip-weather-day-card > summary {
    list-style: none;
}

.trip-weather-day-card > summary::-webkit-details-marker {
    display: none;
}

.trip-weather-day-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.trip-weather-day-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: #0b63ce;
    background: #eef5ff;
    font-size: 18px !important;
    transition: transform 0.18s ease;
}

.trip-weather-day-card[open] .trip-weather-day-arrow {
    transform: rotate(180deg);
}

.trip-weather-day-expanded {
    display: grid;
    gap: 8px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #e6eef8;
}

.trip-weather-card--specific .trip-weather-day-top strong {
    font-size: 0.86rem;
}

.trip-weather-card--specific .trip-weather-day-top span {
    font-size: 0.72rem;
}

.trip-weather-card--specific .trip-weather-days {
    grid-template-columns: 1fr !important;
}

body.page-results .flight-results-weather-rail .trip-weather-card--specific .trip-weather-card-head {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

body.page-results .flight-results-weather-rail .trip-weather-card--specific .trip-weather-card-head > div {
    min-width: 0;
    padding-top: 1px;
}

body.page-results .flight-results-weather-rail .trip-weather-card--specific .trip-weather-icon-slot {
    justify-self: start;
}

body.page-results .flight-results-weather-rail .trip-weather-day-summary {
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 6px;
}

body.page-results .flight-results-weather-rail .trip-weather-day-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    min-width: 0;
}

body.page-results .flight-results-weather-rail .trip-weather-day-card .trip-weather-day-date,
body.page-results .flight-results-weather-rail .trip-weather-day-card .trip-weather-day-temp {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    line-height: 1.12;
}

body.page-results .flight-results-weather-rail .trip-weather-day-card .trip-weather-day-temp {
    justify-content: center;
    width: fit-content;
}

.trip-weather-card--specific .trip-clothes-icon {
    width: 30px;
    height: 30px;
}

.trip-weather-card--specific .trip-clothes-icon img {
    width: 21px;
    height: 21px;
}

.trip-weather-day-card {
    --weather-temp-color: #0b63ce;
    --weather-temp-bg: #eef5ff;
    --weather-temp-border: #cfe0f7;
}

.trip-weather-day-card.trip-weather-tone-freezing,
.trip-weather-day-card.trip-weather-tone-cold {
    --weather-temp-color: #075985;
    --weather-temp-bg: #e0f2fe;
    --weather-temp-border: #bae6fd;
}

.trip-weather-day-card.trip-weather-tone-cool {
    --weather-temp-color: #0369a1;
    --weather-temp-bg: #eaf7ff;
    --weather-temp-border: #bfdbfe;
}

.trip-weather-day-card.trip-weather-tone-mild {
    --weather-temp-color: #047857;
    --weather-temp-bg: #ecfdf5;
    --weather-temp-border: #bbf7d0;
}

.trip-weather-day-card.trip-weather-tone-warm {
    --weather-temp-color: #c2410c;
    --weather-temp-bg: #fff7ed;
    --weather-temp-border: #fed7aa;
}

.trip-weather-day-card.trip-weather-tone-hot {
    --weather-temp-color: #b91c1c;
    --weather-temp-bg: #fef2f2;
    --weather-temp-border: #fecaca;
}

.trip-weather-day-card .trip-weather-day-date,
.trip-weather-day-card .trip-weather-day-temp {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--weather-temp-border);
    border-radius: 999px;
    background: var(--weather-temp-bg);
    color: var(--weather-temp-color);
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.trip-weather-day-card .trip-weather-day-temp {
    justify-content: center;
    min-width: 128px;
    font-size: 0.74rem;
    white-space: nowrap;
}

.trip-weather-day-estimate {
    display: block;
    width: fit-content;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0;
}

@media (max-width: 1100px) {
    body.page-results .flight-results-board--with-weather {
        grid-template-columns: 1fr !important;
    }

    body.page-results .flight-results-weather-rail {
        position: static;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 760px) {
    body.page-results #widget-flight-results-area {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

/* Compact budget date controls: match the By Destination search inputs. */
.search-container #budget-search-module .budget-container .date-group,
.hero #budget-search-module .budget-container .date-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.search-container #budget-search-module .budget-container .date-label,
.hero #budget-search-module .budget-container .date-label {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1;
}

.search-container #budget-search-module .budget-container .date-label .material-icons-outlined,
.hero #budget-search-module .budget-container .date-label .material-icons-outlined {
    color: #0056b3;
    font-size: 19px;
    line-height: 20px;
}

.search-container #budget-search-module .budget-container .date-input,
.search-container #budget-search-module .budget-control-grid .flatpickr-input,
.hero #budget-search-module .budget-container .date-input,
.hero #budget-search-module .budget-control-grid .flatpickr-input {
    height: 38px;
    min-height: 38px;
    padding-left: 40px;
}

/* ==========================================================
   Device Responsiveness Pass
   Keeps the desktop layout intact while making phones/tablets
   use stacked, tap-friendly layouts without horizontal drift.
   ========================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

body {
    min-width: 0;
}

.main-header .header-content,
.hero-content,
.page-container {
    max-width: var(--container-width, 1180px);
}

.main-header .header-controls,
.main-header .quick-prefs,
.search-tabs,
.budget-results-page-summary,
.results-header {
    min-width: 0;
}

.main-header #auth-links-logged-out:not(.hidden):not([hidden]),
.main-header #auth-links-logged-in:not(.hidden):not([hidden]) {
    display: flex !important;
}

@media (max-width: 1180px) {
    .main-header {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .main-header .header-content,
    .hero-content,
    .page-container,
    .budget-results-page,
    body.page-results #widget-flight-results-area {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .budget-results-page {
        padding-top: 26px;
    }

    .results-layout-container {
        grid-template-columns: minmax(190px, 228px) minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    body.page-results .flight-results-board--with-weather,
    .flight-results-board--with-weather {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
        gap: 14px;
    }
}

@media (max-width: 980px) {
    .main-header .header-content {
        min-height: 64px;
        gap: 12px;
    }

    .main-header .header-logo img {
        width: 132px !important;
        height: auto !important;
    }

    .main-header .header-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .main-header .quick-prefs {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .main-header .pill,
    .main-header .auth-link,
    .main-header .user-menu-button {
        min-height: 36px;
    }

    .main-header .pill--currency {
        min-width: 62px;
        padding: 0 10px;
    }

    .main-header .quick-lang,
    .main-header #language-switcher {
        max-width: 156px;
    }

    .main-header .quick-lang select,
    .main-header #language-switcher select {
        width: 118px !important;
        min-height: 34px;
        line-height: 1.3;
    }

    .hero {
        padding: 48px 0 58px;
    }

    .hero .search-container,
    .search-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-container .tab-content,
    .hero #budget-search-content.tab-content {
        padding: 18px !important;
    }

    .budget-panel-top,
    .budget-results-header,
    .budget-results-page-hero,
    .flight-review-hero,
    .payment-checkout-header,
    .suggested-hotels-header {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .budget-origin-control {
        justify-self: start;
    }

    .budget-control-grid,
    .hero #budget-search-module .budget-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-search-submit,
    .hero #budget-search-module .budget-search-submit {
        grid-column: 1 / -1;
    }

    .flight-search-widget .top-controls,
    .flight-search-widget .main-inputs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .flight-search-widget .control-group,
    .flight-search-widget .input-field-group,
    .flight-search-widget .widget-select,
    .flight-search-widget .passenger-input-trigger,
    .flight-search-widget .date-field {
        width: 100%;
        min-width: 0;
    }

    .flight-search-widget .swap-btn {
        justify-self: center;
        align-self: center;
        margin: 0;
    }

    .flight-search-widget .action-row {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .flight-search-widget .explore-btn {
        width: 100%;
    }

    .results-top-grid,
    .results-layout-container,
    body.page-results .flight-results-board--with-weather,
    .flight-results-board--with-weather {
        grid-template-columns: 1fr !important;
    }

    body.page-results .flight-results-weather-rail,
    .flight-results-weather-rail,
    #filter-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #flight-results-content {
        max-width: none;
        width: 100%;
    }

    .checkout-flow-shell,
    .page-passengers #passenger-details-container,
    #suggested-hotels-container,
    #payment-details-container {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    body.page-review .checkout-progress-rail,
    .checkout-progress-rail {
        position: static !important;
        width: 100% !important;
        margin: 0 auto 14px !important;
    }

    body.page-review .checkout-progress-shell {
        padding: 12px;
    }

    body.page-review .checkout-progress-track {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    body.page-review .checkout-progress-track::before {
        display: none;
    }

    body.page-review .checkout-progress-rail a {
        flex: 0 0 auto;
        min-width: 148px;
        padding: 8px 10px;
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .profile-page .profile-grid,
    .my-bookings-page .page-container,
    .booking-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-top: 0 !important;
    }

    .main-header {
        position: static !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .main-header .header-content,
    .hero-content,
    .page-container,
    .budget-results-page,
    body.page-results #widget-flight-results-area {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
    }

    .main-header .header-content {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 0;
    }

    .main-header .header-controls {
        width: 100%;
        justify-content: center;
        gap: 7px;
    }

    .main-header #auth-links-logged-out:not(.hidden):not([hidden]),
    .main-header #auth-links-logged-in:not(.hidden):not([hidden]) {
        display: flex !important;
        gap: 7px;
    }

    .main-header .auth-link {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.86rem;
    }

    .main-header .user-menu-content {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 190px;
    }

    .hero {
        padding: 34px 0 42px;
    }

    .hero h1 {
        font-size: clamp(2rem, 10vw, 2.65rem);
    }

    .hero p {
        font-size: 0.98rem;
    }

    .search-tabs {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 2px;
    }

    .search-container .tab-link {
        flex: 0 0 auto;
        min-height: 42px;
    }

    .search-container .tab-content,
    .hero #budget-search-content.tab-content {
        padding: 14px !important;
    }

    .budget-panel-top {
        gap: 10px;
    }

    .budget-origin-control,
    .budget-origin-chip {
        width: 100%;
    }

    .budget-origin-chip {
        justify-content: center;
    }

    .budget-origin-popover {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
    }

    .budget-intent-options,
    .hero #budget-search-module .budget-intent-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .budget-intent-option,
    .hero #budget-search-module .budget-intent-option {
        min-height: 50px;
        border-radius: 16px;
    }

    .hero #budget-search-module .budget-money-field,
    .budget-money-field {
        grid-template-columns: 78px minmax(0, 1fr);
        min-height: 54px;
    }

    .hero #budget-search-module .budget-money-field .currency-icon,
    .budget-money-field .currency-icon {
        padding: 0 8px;
        font-size: 0.82rem;
    }

    .hero #budget-search-module .budget-control-grid,
    .budget-control-grid,
    .flight-search-widget .top-controls,
    .flight-search-widget .main-inputs,
    .payment-summary-strip,
    .suggested-hotels-total,
    .payment-hotel-summary,
    .payment-confirmation-page .booking-summary-list,
    .payment-confirmation-page .travel-policy-summary,
    .payment-confirmation-page .date-change-grid,
    .payment-confirmation-page .itinerary-email-form-row,
    .payment-confirmation-page .cancellation-request-actions {
        grid-template-columns: 1fr !important;
    }

    .hero #budget-search-module .budget-container.is-passenger-open .passenger-dropdown,
    .budget-container .passenger-dropdown,
    .flight-search-widget .widget-passenger-dropdown {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px;
    }

    .flight-search-widget .swap-btn {
        width: 38px;
        height: 38px;
        transform: rotate(90deg);
    }

    .search-summary-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .search-summary-bar .summary-text {
        flex: 1 1 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.35;
    }

    .results-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sort-toggle {
        justify-content: stretch;
    }

    .sort-toggle button {
        flex: 1 1 0;
    }

    body.page-results .flight-offer-card.rich-offer .offer-main,
    .flight-offer-card.rich-offer .offer-main {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body.page-results .flight-offer-card.rich-offer .airline-logo,
    .flight-offer-card.rich-offer .airline-logo {
        width: 62px;
    }

    body.page-results .flight-offer-card.rich-offer .itinerary-details,
    .flight-offer-card.rich-offer .itinerary-details {
        min-width: 0;
    }

    body.page-results .flight-offer-card.rich-offer .price-section,
    .flight-offer-card.rich-offer .price-section {
        grid-column: 1 / -1;
        align-items: stretch;
        text-align: left;
    }

    body.page-results .flight-offer-card.rich-offer .price-section .explore-btn,
    .flight-offer-card.rich-offer .price-section .explore-btn {
        width: 100%;
    }

    body.page-results .flight-offer-card.rich-offer .itinerary-main-line,
    .flight-offer-card.rich-offer .itinerary-main-line {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        text-align: left;
    }

    body.page-results .flight-offer-card.rich-offer .itinerary-timepoint--arrival,
    .flight-offer-card.rich-offer .itinerary-timepoint--arrival {
        text-align: left;
    }

    body.page-results .flight-offer-card.rich-offer .itinerary-duration-chip,
    .flight-offer-card.rich-offer .itinerary-duration-chip {
        width: fit-content;
    }

    .budget-results-page-hero {
        padding: 20px;
    }

    .budget-results-page-hero h1 {
        font-size: 2.2rem;
    }

    .budget-result-card {
        padding: 14px;
    }

    .budget-trip-ready {
        position: static;
        width: fit-content;
        margin-left: auto;
    }

    .budget-cost-grid,
    .budget-buckets-grid,
    .flight-review-overview,
    .flight-review-included-grid,
    .flight-review-meta-grid,
    .profile-page .form-row,
    .profile-page aside .form-row {
        grid-template-columns: 1fr !important;
    }

    .budget-flight-summary-head,
    .suggested-hotels-header,
    .suggested-hotel-footer,
    .suggested-hotels-actions,
    .payment-checkout-header,
    .payment-actions,
    .payment-confirmation-page .confirmation-footer,
    .payment-confirmation-page .confirmation-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        text-align: left;
    }

    .budget-flight-price,
    .budget-result-side,
    .suggested-hotels-summary,
    .payment-checkout-header > strong,
    .payment-hotel-summary > div:last-child {
        text-align: left;
    }

    .budget-flight-leg-overview {
        grid-template-columns: 1fr !important;
    }

    .budget-flight-route.is-arrival,
    .budget-flight-timepoint.is-arrival {
        text-align: left;
    }

    .suggested-hotel-card {
        grid-template-columns: 1fr;
    }

    .suggested-hotel-media,
    .suggested-hotel-media img {
        min-height: 210px;
    }

    .confirmation-container.flight-review-card,
    .page-passengers #passenger-details-container,
    #suggested-hotels-container,
    #payment-details-container {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    .flight-review-hero,
    .flight-review-section,
    .flight-review-price-box,
    .confirmation-container.flight-review-card .flight-review-actions,
    .payment-checkout-header,
    .suggested-hotels-header,
    .suggested-hotels-grid,
    .suggested-hotels-actions,
    .payment-confirmation-page .confirmation-header,
    .payment-confirmation-page .confirmation-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .flight-review-price-pill,
    .flight-review-section-heading strong,
    .flight-review-timepoint--arrival,
    .payment-confirmation-page .review-segment-detailed > div:last-child {
        text-align: left;
    }

    .payment-confirmation-page #guest-email-form,
    .payment-confirmation-page .cancellation-account-actions,
    .payment-confirmation-page .cancellation-request-form,
    .payment-confirmation-page .travel-policy-summary,
    .payment-confirmation-page .cancellation-email-fallback {
        margin-left: 0;
    }

    .payment-confirmation-page #error-display,
    .payment-confirmation-page #loading-indicator,
    .payment-confirmation-page #confirmation-details,
    .payment-confirmation-page #error-display .confirmation-status-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .payment-confirmation-page .review-segment-detailed {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 520px) {
    .main-header .header-controls,
    .main-header .quick-prefs {
        width: 100%;
    }

    .main-header .quick-prefs,
    .main-header #auth-links-logged-out:not(.hidden):not([hidden]),
    .main-header #auth-links-logged-in:not(.hidden):not([hidden]) {
        justify-content: center;
    }

    .main-header .pill--currency {
        min-width: 64px;
    }

    .main-header .quick-lang,
    .main-header #language-switcher {
        max-width: 148px;
    }

    .hero-content,
    .page-container,
    .budget-results-page,
    body.page-results #widget-flight-results-area {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }

    .search-container .tab-content,
    .hero #budget-search-content.tab-content {
        padding: 12px !important;
    }

    .budget-intent-options,
    .hero #budget-search-module .budget-intent-options {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .budget-intent-option,
    .hero #budget-search-module .budget-intent-option {
        min-height: 48px;
        padding: 4px 6px;
    }

    .budget-intent-option small,
    .hero #budget-search-module .budget-intent-option small {
        display: none;
    }

    .budget-money-field,
    .hero #budget-search-module .budget-money-field {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .budget-money-field .budget-input,
    .budget-container .budget-money-field .budget-input {
        font-size: 1rem;
    }

    .budget-results-page-hero h1,
    .page-header h1 {
        font-size: clamp(2rem, 11vw, 2.55rem);
        line-height: 1.06;
    }

    .budget-result-title h3 {
        font-size: 1.05rem;
    }

    .budget-trip-select-btn,
    .suggested-hotels-actions .explore-btn,
    .suggested-hotels-actions .back-btn,
    #payment-form #submit-payment-btn,
    .confirmation-container.flight-review-card .flight-review-actions .explore-btn,
    .confirmation-container.flight-review-card .flight-review-actions .back-btn {
        width: 100%;
        min-width: 0 !important;
    }

    .trip-weather-card-head,
    .budget-result-weather .trip-weather-card-head,
    body.page-results .flight-results-weather-rail .trip-weather-card--specific .trip-weather-card-head {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
    }

    .trip-weather-card strong,
    .budget-result-weather .trip-weather-card strong {
        font-size: 0.88rem;
    }

    .trip-weather-day-summary,
    .budget-result-weather .trip-weather-day-summary {
        grid-template-columns: minmax(0, 1fr) 22px;
    }

    .trip-weather-day-card .trip-weather-day-temp {
        min-width: 0;
        width: fit-content;
        white-space: normal;
    }

    .profile-page .profile-section,
    .booking-card,
    .bookings-empty-state,
    .payment-confirmation-page .confirmation-status-card {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .booking-card-footer {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .main-header .auth-link,
    .main-header .user-menu-button,
    .main-header .pill {
        font-size: 0.8rem;
    }

    .main-header .quick-lang,
    .main-header #language-switcher {
        max-width: 136px;
    }

    .main-header .quick-lang select,
    .main-header #language-switcher select {
        width: 102px !important;
    }

    .budget-intent-option strong,
    .hero #budget-search-module .budget-intent-option strong {
        font-size: 0.76rem;
    }

    .hero #budget-search-module .budget-money-field,
    .budget-money-field {
        grid-template-columns: 66px minmax(0, 1fr);
    }
}

/* Custom trip builder */
.page-custom-trip {
    background: #eef3f9;
    min-height: 100vh;
}

.custom-trip-page {
    width: min(var(--container-width, 1180px), calc(100% - 64px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.custom-trip-hero,
.custom-trip-topbar,
.custom-edit-panel,
.custom-theme-panel,
.custom-map-panel,
.custom-trip-side,
.custom-trip-cta {
    border: 1px solid #d7e3f4;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
}

.custom-trip-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border-radius: 12px;
}

.custom-trip-hero h1 {
    margin: 4px 0 8px;
    color: #111827;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.custom-trip-hero p {
    max-width: 720px;
    margin: 0;
    color: #334155;
    font-size: 1.08rem;
    line-height: 1.55;
}

.custom-trip-back-link,
.custom-edit-toggle,
.custom-map-back,
.custom-apply-details,
.custom-panel-action,
.custom-trip-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.custom-trip-back-link,
.custom-edit-toggle,
.custom-map-back,
.custom-panel-action {
    border: 1px solid #0b6be8;
    background: #fff;
    color: #0056b3;
    padding: 0 16px;
}

.custom-trip-topbar {
    display: grid;
    grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin: 18px 0;
    padding: 16px;
    border-radius: 12px;
}

.custom-budget-meter {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff, #fff);
}

.custom-budget-label {
    color: #52657d;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.custom-budget-meter strong {
    color: #0056b3;
    font-size: 2rem;
    line-height: 1.05;
}

.custom-budget-meter small {
    color: #64748b;
    font-weight: 600;
}

.custom-context-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.custom-context-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.custom-context-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #172033;
    font-weight: 700;
    white-space: nowrap;
}

.custom-context-pill .material-icons-outlined {
    color: #0b6be8;
    font-size: 18px;
}

.custom-edit-panel {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.45fr)
        repeat(2, minmax(118px, 0.78fr))
        repeat(3, minmax(100px, 0.76fr))
        minmax(132px, 0.82fr)
        76px;
    align-items: flex-end;
    gap: 12px;
    margin: 0 0 18px;
    padding: 16px;
    border-radius: 12px;
}

.custom-edit-panel.hidden {
    display: none;
}

.custom-date-gate {
    display: grid;
    grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr);
    gap: 18px;
    align-items: end;
    margin: 0 0 18px;
    padding: 20px;
    border: 1px solid #cfe0f6;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.custom-date-gate.is-complete {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #ffffff 0%, #f3fff8 100%);
}

.custom-date-gate-copy h2 {
    margin: 4px 0 6px;
    color: #111827;
    font-size: 1.35rem;
}

.custom-date-gate-copy p {
    margin: 0;
    color: #52657d;
    line-height: 1.45;
}

.custom-date-gate-fields {
    display: grid;
    grid-template-columns: minmax(160px, 1.1fr) repeat(2, minmax(135px, 0.9fr)) minmax(150px, 0.9fr) minmax(150px, 0.9fr) auto;
    gap: 12px;
    align-items: end;
}

.custom-date-gate-fields label,
.custom-gate-field {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 800;
}

.custom-date-gate-fields label > span,
.custom-gate-field-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.custom-date-gate-fields .material-icons-outlined {
    color: #0b6be8;
    font-size: 18px;
}

.custom-date-gate-fields input,
.custom-date-gate-fields select,
.custom-start-travelers-toggle {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd8ea;
    border-radius: 9px;
    padding: 0 12px;
    background: #ffffff;
    color: #111827;
    font: inherit;
}

.custom-date-gate-fields select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230b3a6c'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 34px;
}

.custom-start-travelers {
    position: relative;
}

.custom-start-travelers-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
}

.custom-start-travelers-toggle .material-icons-outlined {
    color: #64748b;
}

.custom-start-travelers-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 45;
    width: min(330px, 88vw);
    padding: 12px;
    border: 1px solid #cbd8ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.custom-start-travelers-menu.hidden,
.custom-start-travelers-menu[hidden] {
    display: none;
}

.custom-traveler-stepper-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf2f7;
}

.custom-traveler-stepper-row span {
    display: grid;
    gap: 2px;
}

.custom-traveler-stepper-row strong {
    color: #0f172a;
    font-size: 0.9rem;
}

.custom-traveler-stepper-row small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 600;
}

.custom-traveler-stepper-controls {
    display: inline-grid;
    grid-template-columns: 34px 40px 34px;
    align-items: center;
    border: 1px solid #cfe0f6;
    border-radius: 999px;
    overflow: hidden;
    background: #f8fbff;
}

.custom-traveler-stepper-controls button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #0056b3;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.custom-traveler-stepper-controls button:disabled {
    color: #b8c4d4;
    cursor: not-allowed;
}

.custom-traveler-stepper-controls output {
    text-align: center;
    color: #111827;
    font-weight: 800;
}

.custom-start-travelers-done {
    width: 100%;
    min-height: 38px;
    margin-top: 12px;
    border: 0;
    border-radius: 10px;
    background: #0b6be8;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.custom-start-continue,
.custom-city-check-flight-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    /* Subtle blue gradient + inner highlight so the button has depth
       without looking heavy. The 1px white inset at the top reads as a
       gloss line that catches the eye. */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, #1f7dff 0%, #0b6be8 100%);
    color: #ffffff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    /* Keep the label on one line; the side panel column is narrow so
       multi-line wrap was making the button feel chunky and the icon
       float visually disconnected. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow:
        0 6px 14px rgba(11, 107, 232, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: background 160ms ease, transform 140ms ease, box-shadow 160ms ease;
}

.custom-start-continue {
    padding: 0 20px;
}

.custom-city-check-flight-btn {
    width: 100%;
    padding: 12px 16px;
    margin-top: 8px;
    border: 1px solid #b9d7ff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(235, 244, 255, 0.96) 100%);
    color: #075bbf;
    box-shadow:
        0 7px 16px rgba(37, 99, 235, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.custom-start-continue:hover:not(:disabled),
.custom-city-check-flight-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.custom-start-continue:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, #1469e6 0%, #0b4fc4 100%);
    box-shadow:
        0 10px 22px rgba(11, 107, 232, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.custom-city-check-flight-btn:hover:not(:disabled) {
    border-color: #6aa8ff;
    background:
        linear-gradient(180deg, #ffffff 0%, #dcecff 100%);
    color: #0549a3;
    box-shadow:
        0 10px 22px rgba(37, 99, 235, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.custom-start-continue:active:not(:disabled),
.custom-city-check-flight-btn:active:not(:disabled) {
    transform: translateY(0);
}

.custom-start-continue:active:not(:disabled) {
    box-shadow:
        0 4px 10px rgba(11, 107, 232, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.custom-city-check-flight-btn:active:not(:disabled) {
    box-shadow:
        0 4px 10px rgba(37, 99, 235, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.custom-start-continue:disabled,
.custom-city-check-flight-btn:disabled {
    border: 1px solid #d7e5f7;
    background:
        linear-gradient(180deg, #f6f9fd 0%, #e9f0f8 100%);
    color: #7890ad;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    cursor: not-allowed;
    transform: none;
}

.custom-city-check-flight-btn .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(11, 107, 232, 0.1);
    font-size: 17px;
    flex: 0 0 auto;
}

.custom-city-check-flight-btn:disabled .material-icons-outlined {
    background: rgba(120, 144, 173, 0.12);
}

.custom-date-gate-feedback {
    grid-column: 1 / -1;
    min-height: 18px;
    margin: 0;
    color: #52657d;
    font-size: 0.86rem;
    font-weight: 700;
}

.custom-date-gate-feedback[data-tone="error"] {
    color: #b42318;
}

.custom-date-gate-feedback[data-tone="success"] {
    color: #027a48;
}

.custom-builder-grid.hidden,
.custom-builder-grid[hidden] {
    display: none !important;
}

.custom-edit-panel label,
.custom-edit-panel .custom-edit-field {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
}

.custom-edit-panel .custom-edit-field--origin {
    min-width: 0;
}

.custom-edit-panel label small,
.custom-edit-panel .custom-edit-field small {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.68rem;
    margin-left: 4px;
}

.custom-edit-panel input,
.custom-edit-panel select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd8ea;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: #111827;
    font: inherit;
}

.custom-apply-details {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: #0b6be8;
    color: #ffffff;
    padding: 0 16px;
    box-shadow: 0 10px 22px rgba(11, 107, 232, 0.2);
}

.custom-apply-details:hover {
    background: #075bbf;
    transform: translateY(-1px);
}

.custom-edit-feedback {
    grid-column: 1 / -1;
    min-height: 18px;
    margin: -2px 0 0;
    color: #52657d;
    font-size: 0.84rem;
    font-weight: 700;
}

.custom-edit-feedback:empty {
    display: none;
}

.custom-edit-feedback[data-tone="error"] {
    color: #b42318;
}

.custom-edit-panel select.custom-edit-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230b3a6c'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 34px;
}

/* Origin autocomplete dropdown ------------------------------------------- */
.custom-origin-search {
    position: relative;
    width: 100%;
}

.custom-origin-search input {
    width: 100%;
}

.custom-origin-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #cbd8ea;
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
}

.custom-origin-results.hidden,
.custom-origin-results[hidden] {
    display: none;
}

.custom-origin-results li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.3;
}

.custom-origin-results li:hover {
    background: #f4f9ff;
}

.custom-origin-results li strong {
    color: #0f2747;
    font-size: 0.88rem;
    font-weight: 700;
}

.custom-origin-results li small {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 500;
}

.custom-origin-empty {
    padding: 10px 12px;
    color: #64748b;
    font-size: 0.82rem;
    cursor: default;
}

/* Map zoom controls ------------------------------------------------------- */
.custom-map-wrap {
    position: relative;
}

/* "Selected city" details panel that lives directly under the world map.
   When the user clicks "Show hotels and flight" on a city card in the side
   bar, the chosen city's hotels + best-arrival flight are rendered here
   instead of cluttering the side bar -- the side bar stays a clean
   city-picker. */
.custom-city-details-below-map {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #d8e4f4;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}
.custom-city-details-below-map.hidden,
.custom-city-details-below-map[hidden] { display: none !important; }

.custom-city-details-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.custom-city-details-head h3 {
    margin: 2px 0 0;
    color: #0b3a6c;
    font-size: 1.25rem;
}
.custom-city-details-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 700;
}
.custom-city-details-kicker {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #0b6be8;
}
.custom-city-details-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e4f4;
    background: #f7f9fd;
    border-radius: 8px;
    color: #334155;
    cursor: pointer;
}
.custom-city-details-close:hover { background: #eaf3ff; border-color: #0b6be8; color: #0b3a6c; }

.custom-city-details-flight,
.custom-city-details-hotels { margin-top: 14px; }
.custom-city-details-flight h4,
.custom-city-details-hotels h4 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.custom-city-details-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    color: #475569;
    font-weight: 600;
    font-size: 0.92rem;
}
.custom-city-details-loading .material-icons-outlined { color: #0b6be8; }

.custom-city-package-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.28fr);
    gap: 16px;
    align-items: start;
    padding: 16px;
    border: 1px solid #b8ead0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.custom-city-package-main {
    min-width: 0;
}

.custom-city-package-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.custom-city-package-title > div:first-child > span,
.custom-city-section-head span,
.custom-city-flight-kicker {
    display: block;
    color: #0056b3;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.custom-city-package-title h4 {
    margin: 3px 0 0;
    color: #111827;
    font-size: 1.12rem;
}

.custom-city-package-chips {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.custom-city-package-chips span {
    min-height: 26px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f1f6ff;
    color: #0b4fc4;
    font-size: 0.75rem;
    font-weight: 800;
}

.custom-city-package-side {
    display: grid;
    gap: 10px;
    justify-items: stretch;
}

.custom-city-package-side > div {
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #ffffff;
}

.custom-city-package-side span {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
}

.custom-city-package-side strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.custom-city-ready {
    justify-self: end;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48 !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
}

.custom-city-ready .material-icons-outlined {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #12b76a;
    color: #fff;
    font-size: 14px;
}

.custom-city-package-total {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
}

.custom-city-mixed-note {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.custom-city-ready.is-pending {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c !important;
}

.custom-city-ready.is-pending .material-icons-outlined {
    background: #f97316;
}

.custom-city-local-spend,
.custom-city-flight-gate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fbff;
}

.custom-city-local-spend strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 900;
}

.custom-city-local-spend strong small {
    margin-left: 4px;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

.custom-city-local-spend p,
.custom-city-flight-gate small {
    margin: 4px 0 0;
    color: #52657d;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.custom-city-local-spend > div:last-child {
    min-width: 150px;
    padding: 10px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #ffffff;
    text-align: right;
}

.custom-city-local-spend > div:last-child span,
.custom-city-local-spend > div:last-child small {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.custom-city-flight-gate {
    grid-template-columns: 44px minmax(0, 1fr);
    margin: 8px 0 0;
    background: #ffffff;
}

.custom-city-flight-gate > .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #0b6be8;
}

.custom-city-flight-gate strong {
    display: block;
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 900;
}

.custom-city-flight-gate em {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 800;
}

.custom-city-flight-gate.is-muted {
    opacity: 0.78;
}

.custom-city-flight-gate.is-loading > .material-icons-outlined {
    animation: customSpin 900ms linear infinite;
}

@keyframes customSpin {
    to { transform: rotate(360deg); }
}

/* Check-out CTA in the city flight + hotel side panel. The primary
   action on this entire panel -- "I've picked my flight + hotel, take
   my money". Visually heavier than the refresh-flight button above it:
   bigger padding, brighter green gradient with an inner gloss line,
   subtle press-down on click. The arrow icon on the right reinforces
   "go forward to checkout". */
.custom-city-checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 14px 18px;
    border: 0;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(180deg, #18b86a 0%, #087642 100%);
    color: #ffffff;
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    /* Keep label on a single line; the narrow side-panel column was
       wrapping "Proceed to checkout" to two lines which made the button
       feel awkward and pushed the chevron icon off-center. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow:
        0 9px 20px rgba(8, 118, 66, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.custom-city-checkout-btn:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(180deg, #0fa65a 0%, #075f36 100%);
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(8, 118, 66, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.custom-city-checkout-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
        0 4px 10px rgba(21, 128, 61, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.custom-city-checkout-btn:disabled,
.custom-city-checkout-btn.is-disabled {
    border: 1px solid #d7e5f7;
    background:
        linear-gradient(180deg, #f6f9fd 0%, #e7eef7 100%);
    color: #7890ad;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    cursor: not-allowed;
    transform: none;
}

.custom-city-checkout-btn.is-loading {
    cursor: progress;
}

.custom-city-checkout-btn .material-icons-outlined {
    font-size: 22px;
    flex: 0 0 auto;
    /* Gentle pulse on hover so the icon hints "click me, this leads
       somewhere". Stops at default state to avoid being annoying. */
    transition: transform 200ms ease;
}

.custom-city-checkout-btn:hover:not(:disabled) .material-icons-outlined {
    transform: translateX(2px);
}

.custom-city-flight-summary {
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.custom-city-flight-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.custom-city-flight-head strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 1rem;
}

.custom-city-flight-head small,
.custom-city-flight-price small {
    display: block;
    color: #52657d;
    font-size: 0.76rem;
    font-weight: 700;
}

.custom-city-flight-price {
    text-align: right;
    white-space: nowrap;
}

.custom-city-flight-price strong {
    color: #0f172a;
    font-size: 1.08rem;
}

.custom-city-flight-legs {
    display: grid;
    gap: 9px;
}

.custom-city-flight-leg {
    border: 1px solid #e0ecfb;
    border-radius: 10px;
    padding: 10px;
    background: #fbfdff;
}

.custom-city-flight-overview {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 126px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.custom-city-flight-overview > span {
    color: #0056b3;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.custom-city-flight-overview strong,
.custom-city-flight-segment strong {
    display: block;
    color: #0f172a;
    font-size: 1rem;
}

.custom-city-flight-overview small,
.custom-city-flight-segment small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.custom-city-flight-overview em {
    display: block;
    color: #52657d;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-city-flight-overview .is-arrival,
.custom-city-flight-segment .is-arrival {
    text-align: right;
}

.custom-city-flight-duration {
    justify-self: center;
    min-width: 94px;
    padding: 7px 12px;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    text-align: center;
}

.custom-city-flight-duration.is-direct {
    border-color: #bbf7d0;
    background: #ecfdf3;
    color: #027a48;
}

.custom-city-flight-duration strong {
    color: inherit;
    font-size: 0.86rem;
}

.custom-city-flight-duration small {
    color: inherit;
    font-size: 0.72rem;
}

.custom-city-flight-details {
    margin-top: 10px;
    text-align: center;
}

.custom-city-flight-details summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #0f172a;
    border-radius: 999px;
    color: #0056b3;
    font-size: 0.84rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.custom-city-flight-details summary::-webkit-details-marker {
    display: none;
}

.custom-city-flight-segments {
    display: grid;
    gap: 8px;
    max-width: 560px;
    margin: 10px auto 0;
    text-align: left;
}

.custom-city-flight-segment {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 160px minmax(120px, 1fr);
    gap: 12px;
    align-items: center;
}

.custom-city-flight-path {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #0056b3;
    font-size: 0.76rem;
    font-weight: 900;
}

.custom-city-flight-path > span:first-child {
    flex: 0 0 100%;
    text-align: center;
}

.custom-city-flight-path i {
    display: inline-block;
    width: 55px;
    height: 1px;
    background: #bfd7f7;
}

.custom-city-flight-path .material-icons-outlined {
    color: #0b6be8;
    font-size: 18px;
    transform: rotate(90deg);
}

.custom-city-flight-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 560px;
    margin: 4px auto 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f6f9fd;
}

.custom-city-flight-meta span {
    display: block;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.custom-city-flight-meta strong {
    color: #0f172a;
    font-size: 0.78rem;
}

.custom-city-flight-layover {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 4px calc((100% - 560px) / 2);
    padding: 6px 10px;
    border: 1px dashed #bfdbfe;
    border-radius: 999px;
    background: #f8fbff;
    color: #0b4fc4;
    font-size: 0.76rem;
    font-weight: 900;
}

.custom-city-flight-layover .material-icons-outlined {
    font-size: 15px;
}

.custom-city-hotel-options {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.custom-city-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.custom-city-section-head small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-city-hotel-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.custom-city-hotel-option:hover,
.custom-city-hotel-option:focus-visible {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    outline: none;
}

.custom-city-hotel-option.is-selected {
    border-color: #86efac;
    background: linear-gradient(180deg, #f8fffb 0%, #ffffff 100%);
    box-shadow: 0 0 0 1px rgba(18, 183, 106, 0.1);
}

.custom-city-hotel-photo {
    position: relative;
    flex: 0 0 112px;
    width: 112px;
    height: 78px;
    overflow: hidden;
    border-radius: 10px;
    background: #eaf3ff;
}

.custom-city-hotel-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.custom-city-hotel-photo > .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #0056b3;
    font-size: 28px;
}

.custom-city-hotel-photo .budget-hotel-photo-count {
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 20px;
}

.custom-city-hotel-body {
    flex: 1 1 auto;
    min-width: 0;
}

.custom-city-hotel-kicker {
    display: block;
    margin-bottom: 2px;
    color: #0056b3;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.custom-city-hotel-body strong {
    display: block;
    color: #111827;
    font-size: 0.96rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-city-hotel-body small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-city-hotel-cancel,
.custom-city-hotel-provider,
.custom-city-hotel-selected {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    margin-top: 6px;
    padding: 0 9px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48;
    font-size: 0.72rem;
    font-weight: 900;
}

.custom-city-hotel-cancel .material-icons-outlined {
    font-size: 15px;
}

.custom-city-hotel-provider {
    flex: 0 0 auto;
    margin-top: 0;
}

.custom-city-hotel-selected {
    flex: 0 0 auto;
    margin-top: 0;
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #0056b3;
}

.custom-city-hotel-option.is-selected .custom-city-hotel-selected {
    border-color: #bbf7d0;
    background: #ecfdf3;
    color: #027a48;
}

/* ----- Hotel card v2 -------------------------------------------------
   Richer layout than the trips page: hero photo (180px) on top with the
   nav arrows + 1/N counter, a thumbnail strip below the hero so the user
   can preview 4 more photos at a glance, then an info row split into
   name + rating + cancel-badge on the left and a price column on the
   right. Used by .custom-city-hotel-option.v2 (rendered by
   renderCityHotelOption). All existing .custom-city-hotel-option styles
   above still apply -- v2 overrides only what differs. */
.custom-city-hotel-option.v2 {
    display: block;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}

.custom-city-hotel-option.v2 .custom-city-hotel-hero {
    position: relative;
    width: 100%;
    height: 188px;
    background: linear-gradient(140deg, #eaf3ff 0%, #f6fbff 100%);
    overflow: hidden;
}

.custom-city-hotel-option.v2 .custom-city-hotel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.custom-city-hotel-option.v2 .custom-city-hotel-hero > .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #0056b3;
    font-size: 40px;
}

.custom-city-hotel-option.v2 .budget-hotel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 2;
    transition: background 140ms ease;
}

.custom-city-hotel-option.v2 .budget-hotel-nav:hover {
    background: rgba(15, 23, 42, 0.85);
}

.custom-city-hotel-option.v2 .budget-hotel-nav--prev { left: 10px; }
.custom-city-hotel-option.v2 .budget-hotel-nav--next { right: 10px; }

.custom-city-hotel-option.v2 .budget-hotel-photo-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 24px;
    z-index: 2;
}

.custom-city-hotel-option.v2 .custom-city-hotel-kicker-overlay {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0056b3;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

/* Thumbnail strip: 4 small previews under the hero. Each thumb jumps the
   hero to that index when clicked. Stock supplemental thumbs (those past
   providerPhotoCount) get a soft "Similar style" tag so the UI is honest
   about which photos are the property's own and which are stand-ins. */
.custom-city-hotel-option.v2 .custom-city-hotel-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 6px;
    background: #f8fbff;
    border-bottom: 1px solid #eaf3ff;
}

.custom-city-hotel-option.v2 .custom-city-hotel-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: #fff;
    transition: border-color 140ms ease, transform 140ms ease;
}

.custom-city-hotel-option.v2 .custom-city-hotel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.custom-city-hotel-option.v2 .custom-city-hotel-thumb:hover {
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.custom-city-hotel-option.v2 .custom-city-hotel-thumb.is-stock img {
    opacity: 0.88;
}

.custom-city-hotel-option.v2 .custom-city-hotel-thumb-tag {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* Bottom info row: name + meta on the left, price column on the right.
   On narrow screens these stack so the price block sits below the name. */
.custom-city-hotel-option.v2 .custom-city-hotel-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px 16px;
    align-items: center;
}

.custom-city-hotel-option.v2 .custom-city-hotel-info-main {
    min-width: 0;
}

.custom-city-hotel-option.v2 .custom-city-hotel-info-main strong {
    display: block;
    color: #0f172a;
    font-size: 1.04rem;
    font-weight: 800;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-city-hotel-option.v2 .custom-city-hotel-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.custom-hotel-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #f59e0b;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.custom-hotel-stars-empty {
    color: #cbd5e1;
}

.custom-hotel-stars-text {
    margin-left: 4px;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-city-hotel-option.v2 .custom-city-hotel-cancel,
.custom-city-hotel-option.v2 .custom-city-hotel-provider {
    margin-top: 0;
}

.custom-city-hotel-option.v2 .custom-city-hotel-pricecol {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 130px;
    text-align: right;
}

.custom-city-hotel-nightly {
    color: #475569;
    font-size: 0.86rem;
    font-weight: 700;
}

.custom-city-hotel-nightly small {
    margin-left: 4px;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 600;
}

.custom-city-hotel-option.v2 .custom-city-hotel-total {
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.1;
}

.custom-city-hotel-option.v2 .custom-city-hotel-nights {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.custom-city-hotel-option.v2 .custom-city-hotel-selected {
    min-height: 32px;
    padding: 0 14px;
    margin-top: 4px;
    line-height: 30px;
    font-size: 0.8rem;
    background: #0b6be8;
    color: #fff;
    border-color: #0b4fc4;
}

.custom-city-hotel-option.v2.is-selected .custom-city-hotel-selected {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
}

@media (max-width: 620px) {
    .custom-city-hotel-option.v2 .custom-city-hotel-hero {
        height: 160px;
    }

    .custom-city-hotel-option.v2 .custom-city-hotel-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .custom-city-hotel-option.v2 .custom-city-hotel-pricecol {
        align-items: flex-start;
        text-align: left;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .custom-city-hotel-option.v2 .custom-city-hotel-selected {
        margin-left: auto;
    }
}

/* Empty-state inside the city-trip-builder. Used when the flight or hotel
   section can't render (most often: user hasn't set dates). Replaces the
   plain "No live hotel prices..." paragraph with an icon + clearer copy +
   a "Set travel dates" button that opens the edit panel and focuses the
   departure date input. */
.custom-city-empty-state {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin: 10px 0;
    border: 1px dashed #cfe0f6;
    border-radius: 12px;
    background: #f8fbff;
    color: #0f172a;
    flex-wrap: wrap;
}

.custom-city-empty-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #e0eefe;
    color: #0b6be8;
    font-size: 22px;
}

.custom-city-empty-text {
    flex: 1 1 220px;
    min-width: 0;
}

.custom-city-empty-text strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
}

.custom-city-empty-text small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.custom-city-empty-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    background: #0b6be8;
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}

.custom-city-empty-cta:hover {
    background: #0b4fc4;
    transform: translateY(-1px);
}

.custom-city-empty-cta .material-icons-outlined {
    font-size: 18px;
}

@media (max-width: 520px) {
    .custom-city-empty-state {
        padding: 14px;
    }

    .custom-city-empty-cta {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 920px) {
    .custom-edit-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custom-edit-panel .custom-edit-field--origin,
    .custom-edit-panel .custom-apply-details,
    .custom-edit-feedback {
        grid-column: 1 / -1;
    }

    .custom-date-gate {
        grid-template-columns: 1fr;
    }

    .custom-date-gate-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custom-start-continue {
        grid-column: 1 / -1;
    }

    .custom-city-package-card {
        grid-template-columns: 1fr;
    }

    .custom-city-package-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .custom-city-ready {
        justify-self: start;
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .custom-edit-panel {
        grid-template-columns: 1fr;
    }

    .custom-date-gate {
        padding: 16px;
    }

    .custom-date-gate-fields {
        grid-template-columns: 1fr;
    }

    .custom-city-local-spend {
        grid-template-columns: 1fr;
    }

    .custom-city-local-spend > div:last-child {
        text-align: left;
    }

    .custom-city-details-below-map {
        padding: 14px;
    }

    .custom-city-package-title,
    .custom-city-flight-head,
    .custom-city-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .custom-city-package-chips {
        justify-content: flex-start;
    }

    .custom-city-flight-price {
        text-align: left;
    }

    .custom-city-flight-overview {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .custom-city-flight-overview .is-arrival,
    .custom-city-flight-segment .is-arrival {
        text-align: left;
    }

    .custom-city-flight-duration {
        justify-self: start;
    }

    .custom-city-flight-segment {
        grid-template-columns: 1fr;
    }

    .custom-city-flight-meta {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .custom-city-flight-layover {
        margin-left: 0;
    }

    .custom-city-hotel-option {
        align-items: flex-start;
    }

    .custom-city-package-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .custom-city-hotel-option {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .custom-city-hotel-photo {
        width: 96px;
        flex-basis: 96px;
    }

    .custom-city-hotel-provider {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Two-column grid for the inline hotel mini-cards inside the panel so we
   don't stack three tall rows -- they sit shoulder-to-shoulder on desktop
   and collapse to single column on narrow screens. */
.custom-city-details-hotels .custom-hotel-mini {
    margin-bottom: 8px;
}
@media (min-width: 800px) {
    .custom-city-details-hotels {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .custom-city-details-hotels h4 { grid-column: 1 / -1; }
}

.custom-map-zoom-controls {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.custom-map-zoom-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0b3a6c;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.custom-map-zoom-btn:hover,
.custom-map-zoom-btn:focus-visible {
    background: #eaf3ff;
    border-color: #0b6be8;
    outline: none;
}

.custom-map-zoom-btn:active {
    transform: scale(0.94);
}

.custom-map-zoom-btn .material-icons-outlined {
    font-size: 1.3rem;
}

.custom-apply-details,
.custom-trip-cta__button {
    border: 1px solid #0b6be8;
    background: #0b6be8;
    color: #fff;
    padding: 0 18px;
}

.custom-theme-panel {
    margin: 0 0 18px;
    padding: 20px;
    border-radius: 12px;
}

.custom-theme-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.custom-theme-head h2 {
    margin: 4px 0 6px;
    color: #111827;
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.1;
}

.custom-theme-head p {
    max-width: 760px;
    margin: 0;
    color: #52657d;
    line-height: 1.45;
}

.custom-theme-clear {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid #cfe0f6;
    border-radius: 999px;
    background: #fff;
    color: #0b4fc4;
    font-weight: 800;
    cursor: pointer;
}

.custom-theme-clear.hidden,
.custom-theme-spots.hidden,
.custom-theme-spots[hidden] {
    display: none !important;
}

.custom-theme-clear .material-icons-outlined {
    font-size: 18px;
}

.custom-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.custom-theme-card {
    min-height: 118px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #d7e3f4;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f9fcff);
    color: #111827;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.custom-theme-card:hover,
.custom-theme-card:focus-visible,
.custom-theme-card.is-active {
    border-color: var(--theme-accent, #0b6be8);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    outline: none;
    transform: translateY(-1px);
}

.custom-theme-card.is-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent, #0b6be8) 10%, #ffffff), #ffffff);
}

.custom-theme-card-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--theme-accent, #0b6be8) 12%, #ffffff);
    color: var(--theme-accent, #0b6be8);
    font-size: 24px;
}

.custom-theme-card-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.custom-theme-card-copy strong {
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.15;
}

.custom-theme-card-copy small {
    color: #52657d;
    font-size: 0.82rem;
    line-height: 1.35;
}

.custom-theme-card-copy em {
    color: #0b4fc4;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-theme-card-count {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--theme-accent, #0b6be8);
    font-size: 0.82rem;
    font-weight: 900;
}

.custom-theme-spots {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #d7e3f4;
    border-radius: 14px;
    background: #f8fbff;
}

.custom-theme-spots-head {
    display: grid;
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
    margin-bottom: 12px;
}

.custom-theme-spots-head span {
    color: #0056b3;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.custom-theme-spots-head h3 {
    margin: 2px 0 0;
    color: #111827;
    font-size: 1.1rem;
}

.custom-theme-spots-head p {
    margin: 0;
    color: #52657d;
    font-size: 0.86rem;
    line-height: 1.45;
}

.custom-theme-spot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 10px;
}

.custom-theme-spot {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    padding: 10px;
    border: 1px solid #d7e3f4;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
}

.custom-theme-spot:hover,
.custom-theme-spot:focus-visible,
.custom-theme-spot.is-active {
    border-color: #0b6be8;
    background: #eff6ff;
    outline: none;
}

.custom-theme-spot > span {
    grid-row: span 3;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eaf3ff;
    color: #0056b3;
    font-weight: 900;
}

.custom-theme-spot strong,
.custom-theme-spot small,
.custom-theme-spot em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-theme-spot strong {
    font-size: 0.9rem;
}

.custom-theme-spot small {
    color: #52657d;
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-theme-spot em {
    color: #64748b;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}

/* ---------- Theme cards v2: image-driven hero ----------
   Each card now leads with a real photo (Petra for World Wonders, lions
   for Safari, etc.). The image lives in .custom-theme-card-media, with
   a gradient overlay for text contrast and a circular icon badge in
   the corner. If the image fails to load the fallback icon and the
   theme-accent gradient still convey the topic. */
.custom-theme-card.v2 {
    grid-template-columns: 1fr;
    grid-template-rows: 140px auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}

.custom-theme-card.v2 .custom-theme-card-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Neutral grey gradient as the fallback. The previous gradient used
       the theme accent, which on Ancient Civilizations (purple) ended up
       looking RED at the seams when Loremflickr returned a red error
       placeholder -- the placeholder + the purple gradient mixed into an
       ugly red wash on the card's left/right edges. A neutral grey can't
       conflict with anything the image source returns. */
    background: linear-gradient(135deg, #cbd5e1, #f1f5f9);
}

.custom-theme-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Most landmark + scenery photos put the subject in the lower-middle
       third of the frame with sky on top. Default object-position is
       center (50% 50%), which means the card can end up showing the
       sky/clouds and crop the landmark out of view. Pulling the focus
       to 65% from the top makes the temple / wildlife / coast actually
       appear in the visible window. */
    object-position: center 65%;
    display: block;
    transition: transform 320ms ease;
}

.custom-theme-card.v2:hover .custom-theme-card-img {
    transform: scale(1.04);
}

/* Sits BEHIND the img -- only visible when the img is missing/loading
   (we set display:none on broken img via onerror). The .v2 card's media
   bg already shows the gradient; this material icon centers on top. */
.custom-theme-card-fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 44px;
    color: rgba(255, 255, 255, 0.85);
    z-index: 0;
    pointer-events: none;
}

/* Subtle bottom-up gradient so the title/summary sitting BELOW the media
   has visual continuity with the photo, and any caption sitting on the
   photo stays readable. Applied with a thin black->transparent fade. */
.custom-theme-card-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 50%, rgba(15, 23, 42, 0.45) 100%);
    pointer-events: none;
    z-index: 1;
}

.custom-theme-card-icon-badge {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    /* Slight backdrop-filter + subtle ring so the badge stays crisp on
       ANY hero image (bright sky, blown-out beach, dark night). Pure
       white alone was disappearing on cloudy/sky-dominated photos. */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--theme-accent, #0b6be8);
    font-size: 22px;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
}

.custom-theme-card.v2 .custom-theme-card-count {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    line-height: 28px;
    text-align: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 900;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

.custom-theme-card.v2 .custom-theme-card-copy {
    padding: 12px 14px 14px;
    gap: 6px;
}

.custom-theme-card.v2.is-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent, #0b6be8) 14%, #ffffff), #ffffff);
}

.custom-theme-card.v2.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 2px solid var(--theme-accent, #0b6be8);
    pointer-events: none;
}

.custom-theme-card.v2 {
    position: relative;
}

/* ---------- Spot cards v2 ----------
   Tile of 6-8 spots underneath the active theme. Each is a small image
   tile (90px tall) with a 1/2/3 index badge top-left, an optional tag
   chip top-right (e.g. "Marble mausoleum" for Taj Mahal), and the
   destination name + city below. Selected state highlights with the
   theme accent. */
.custom-theme-spot-grid.v2 {
    grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
    gap: 12px;
}

.custom-theme-spot.v2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 110px auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d7e3f4;
    border-radius: 12px;
    background: #fff;
    position: relative;
}

.custom-theme-spot.v2:hover,
.custom-theme-spot.v2:focus-visible,
.custom-theme-spot.v2.is-active {
    border-color: var(--theme-accent, #0b6be8);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    outline: none;
    transform: translateY(-1px);
}

.custom-theme-spot.v2.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 2px solid var(--theme-accent, #0b6be8);
    pointer-events: none;
}

.custom-theme-spot-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Neutral grey gradient as the fallback. The previous gradient used
       the theme accent, which on Ancient Civilizations (purple) ended up
       looking RED at the seams when Loremflickr returned a red error
       placeholder -- the placeholder + the purple gradient mixed into an
       ugly red wash on the card's left/right edges. A neutral grey can't
       conflict with anything the image source returns. */
    background: linear-gradient(135deg, #cbd5e1, #f1f5f9);
}

.custom-theme-spot-media .custom-theme-card-img {
    transition: transform 320ms ease;
}

.custom-theme-spot.v2:hover .custom-theme-spot-media .custom-theme-card-img {
    transform: scale(1.06);
}

.custom-theme-spot-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, 0.55) 100%);
    pointer-events: none;
    z-index: 1;
}

.custom-theme-spot-index {
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    line-height: 24px;
    text-align: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--theme-accent, #0b6be8);
    font-size: 0.74rem;
    font-weight: 900;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
}

.custom-theme-spot-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: 60%;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-theme-spot-body {
    padding: 10px 12px 12px;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.custom-theme-spot-body strong {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-theme-spot-body small {
    color: #52657d;
    font-size: 0.76rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Michelin Guide presence badge -- shown on Food Trip spot cards only.
   Deliberately styled distinct from Michelin's own brand: their colour is
   a saturated red on white; ours uses a warm amber chip with a GENERIC
   5-point star icon (NOT the trademarked rosette/flower mark). The
   wordmark "Michelin Guide" is a factual source citation, not a logo. */
.custom-theme-spot-michelin {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #fff8ef;
    border: 1px solid #f7d49a;
    color: #92400e;
    font: inherit;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.custom-theme-spot-michelin:hover,
.custom-theme-spot-michelin:focus-visible {
    background: #fff1dc;
    border-color: #f0b25a;
    transform: translateY(-1px);
    outline: none;
}

.custom-theme-spot-michelin-star {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #d97706;
    filter: drop-shadow(0 1px 0 rgba(146, 64, 14, 0.18));
}

.custom-theme-spot-michelin-text {
    display: grid;
    gap: 0;
    min-width: 0;
    line-height: 1.15;
}

.custom-theme-spot-michelin-text strong {
    font-size: 0.72rem;
    font-weight: 800;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-theme-spot-michelin-text small {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b45309;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .custom-theme-card.v2 {
        grid-template-rows: 120px auto;
    }

    .custom-theme-spot.v2 {
        grid-template-rows: 100px auto;
    }
}

.custom-theme-unavailable {
    display: grid;
    gap: 8px;
}

.custom-theme-unavailable > .material-icons-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eff6ff;
    color: #0b6be8;
}

.custom-theme-unavailable h2,
.custom-theme-unavailable p {
    margin: 0;
}

.custom-theme-unavailable-note {
    color: #52657d;
}

.custom-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.34fr);
    gap: 18px;
    align-items: start;
}

.custom-map-panel,
.custom-trip-side {
    border-radius: 12px;
    min-width: 0;
}

.custom-map-panel {
    padding: 20px;
}

.custom-map-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.custom-map-heading > div > span {
    color: #0056b3;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.custom-map-heading .material-icons-outlined,
.custom-trip-back-link .material-icons-outlined,
.custom-edit-toggle .material-icons-outlined,
.custom-context-pill .material-icons-outlined,
.custom-trip-cta__button .material-icons-outlined {
    font-family: "Material Icons Outlined";
    font-weight: normal;
    text-transform: none;
    line-height: 1;
}

.custom-map-heading h2 {
    margin: 4px 0 0;
    color: #111827;
}

.custom-map-back.hidden {
    display: none;
}

.custom-world-map {
    position: relative;
    min-height: 470px;
    border: 1px solid #cfe0f6;
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(11, 107, 232, 0.10), transparent 30%),
        radial-gradient(circle at 78% 70%, rgba(34, 197, 94, 0.08), transparent 30%),
        linear-gradient(180deg, #f4f9ff, #e7f1ff);
}

.custom-world-map svg {
    display: block;
    width: 100%;
    height: auto;
}

.custom-world-map .cw-sphere {
    fill: #eaf3ff;
    stroke: #cfe0f6;
    stroke-width: 0.5;
}

/* d3.zoom drives wheel + grab-to-pan; show the right cursor so the user
   knows they can grab the map. Country/sphere click handlers still fire on
   non-drag clicks. */
.custom-world-map svg {
    cursor: grab;
}
.custom-world-map svg:active {
    cursor: grabbing;
}
.custom-world-map.is-zoomed .cw-country.is-served {
    cursor: pointer;
}

.custom-world-map .cw-country {
    fill: #d4deec;
    stroke: #ffffff;
    stroke-width: 0.4;
    stroke-linejoin: round;
    transition: fill 160ms ease, opacity 220ms ease;
}

/* World view shows merged continent shapes only; zoomed view shows countries. */
.custom-world-map.is-world .cw-countries { display: none; }
.custom-world-map.is-zoomed .cw-continents { display: none; }

.custom-world-map .cw-continent {
    fill: #d4deec;
    stroke: #ffffff;
    stroke-width: 0.6;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 160ms ease, opacity 200ms ease;
}

.custom-world-map .cw-continent[data-continent="north-america"] { fill: #bcd4f2; }
.custom-world-map .cw-continent[data-continent="south-america"] { fill: #b6e0c9; }
.custom-world-map .cw-continent[data-continent="europe"] { fill: #c9c6ef; }
.custom-world-map .cw-continent[data-continent="africa"] { fill: #f0d9b5; }
.custom-world-map .cw-continent[data-continent="asia"] { fill: #efc6cb; }
.custom-world-map .cw-continent[data-continent="oceania"] { fill: #bfdfe9; }
.custom-world-map .cw-continent[data-continent="antarctica"] { fill: #e6ecf3; }

.custom-world-map .cw-continent:hover,
.custom-world-map .cw-continent:focus-visible {
    fill: #0b6be8;
    outline: none;
}

.custom-world-map .cw-continent.is-theme-match {
    stroke: #0b6be8;
    stroke-width: 1.2;
    filter: drop-shadow(0 4px 8px rgba(11, 107, 232, 0.18));
}

.custom-world-map .cw-continent.is-empty {
    cursor: default;
    pointer-events: none;
    opacity: 0.5;
}

.custom-world-map .cw-continent-label {
    fill: #0f2747;
    font-size: 13px;
    font-weight: 800;
    text-anchor: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
}

.custom-world-map .cw-continent-count {
    fill: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

/* Hide ALL continent labels when the map is zoomed into a continent.
   At base zoom these float at each continent's centroid (Europe, Asia,
   etc.) -- helpful for the world view. After zooming into one
   continent, the labels for the OTHER continents drift into the
   corners of the visible viewport and read as random dark text blobs
   in the top-left / top-right (the user described this as "something
   shining darkly"). Cleaner to just hide them all once we're zoomed in;
   the user knows which continent they picked. */
.custom-world-map.is-zoomed .cw-continent-label {
    display: none;
}

/* When the user is zoomed into a continent, KILL the continent shapes
   entirely -- not just hide the parent group. Belt-and-suspenders fix
   for the "something shining darkly in the top-left" report: clicking a
   continent gives that <path> keyboard focus, and the :focus-visible
   style paints it the saturated dark blue (#0b6be8). If d3 leaves the
   focused element in the DOM (display:none on the parent doesn't move
   focus elsewhere), it could still be reachable during the zoom
   transition or after any re-render. Forcing pointer-events:none +
   visibility:hidden on the shape directly + clearing the focus fill
   guarantees the dark wash never shows. */
.custom-world-map.is-zoomed .cw-continent,
.custom-world-map.is-zoomed .cw-continent:hover,
.custom-world-map.is-zoomed .cw-continent:focus,
.custom-world-map.is-zoomed .cw-continent:focus-visible {
    pointer-events: none !important;
    fill: transparent !important;
    stroke: transparent !important;
    visibility: hidden !important;
}

.custom-world-map.is-zoomed .cw-country.is-dim {
    fill: #e3e9f1;
    opacity: 0.35;
    pointer-events: none;
}

.custom-world-map.is-zoomed .cw-country.is-unserved {
    fill: #c9d2e0;
    pointer-events: none;
}

/* Visa-required destinations greyed out when the visa-free filter is on.
   Applies at BOTH world view and zoomed-continent view so users see the
   filter take effect immediately instead of only after picking a continent. */
.custom-world-map .cw-country.is-visa-blocked {
    fill: #cbd5e1 !important;
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.custom-world-map.is-zoomed .cw-country.is-served {
    fill: #2563eb;
    cursor: pointer;
}

.custom-world-map.is-zoomed .cw-country.is-served:hover,
.custom-world-map.is-zoomed .cw-country.is-served:focus-visible {
    fill: #0b4fc4;
    outline: none;
}

.custom-world-map .cw-country.is-active {
    fill: #16a34a !important;
    stroke: #15803d;
    stroke-width: 1;
    paint-order: stroke;
}

.custom-world-map.is-zoomed .cw-country.is-theme-match:not(.is-active):not(.is-visa-blocked) {
    fill: #38bdf8;
    stroke: #075985;
    stroke-width: 0.8;
    paint-order: stroke;
}

.custom-world-map .cw-theme-markers {
    pointer-events: none;
}

.custom-world-map .cw-theme-marker {
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.20));
    transition: opacity 160ms ease;
}

.custom-world-map .cw-theme-marker circle {
    stroke: #ffffff;
    stroke-width: 2.4;
}

.custom-world-map .cw-theme-marker text {
    fill: #ffffff;
    font-size: 9px;
    font-weight: 900;
    pointer-events: none;
}

.custom-world-map .cw-theme-marker:hover,
.custom-world-map .cw-theme-marker:focus-visible,
.custom-world-map .cw-theme-marker.is-active {
    outline: none;
}

.custom-world-map .cw-theme-marker:hover circle,
.custom-world-map .cw-theme-marker:focus-visible circle,
.custom-world-map .cw-theme-marker.is-active circle {
    r: 11;
}

/* City-landmark markers -- shown when the user focuses a country. Each
   marker is a circular white pill with the destination's emoji centred
   inside (🗼 Paris, 🐪 Cairo, 🦁 Nairobi, etc.) plus the city name as a
   small caption below. Sits in the d3 zoom group so it translates and
   scales with the country geometry. Click opens the city flight+stay
   panel. The emoji renders via the OS's native colour-emoji font (Noto
   Color Emoji on Android/Linux, Apple Color Emoji on macOS/iOS, Segoe
   UI Emoji on Windows) -- no extra icon font needed. */
.custom-world-map .cw-city-landmarks {
    pointer-events: none;
}

.custom-world-map .cw-city-landmark {
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.32));
    transition: opacity 160ms ease, transform 200ms ease;
    transform-origin: center;
    transform-box: fill-box;
    /* Soft pop-in when markers first appear so the user can't miss them
       arriving on the map after a country is selected. */
    animation: cw-landmark-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes cw-landmark-pop {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

.custom-world-map .cw-city-landmark-halo {
    fill: rgba(11, 107, 232, 0.18);
    stroke: rgba(11, 107, 232, 0.35);
    stroke-width: 1.2;
    transition: r 200ms ease, fill 200ms ease;
}

.custom-world-map .cw-city-landmark-bg {
    fill: #ffffff;
    stroke: #0b6be8;
    stroke-width: 2.4;
    transition: stroke 140ms ease, r 140ms ease, fill 140ms ease;
}

.custom-world-map .cw-city-landmark-icon {
    /* Use an emoji-capable font stack so the OS picks its colour-emoji
       font. Without this, Chrome on some Linux distros falls back to a
       monochrome glyph. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
    font-size: 24px;
    pointer-events: none;
    user-select: none;
}

.custom-world-map .cw-city-landmark-label {
    fill: #0f172a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
    pointer-events: none;
    user-select: none;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linejoin: round;
}

.custom-world-map .cw-city-landmark:hover .cw-city-landmark-bg,
.custom-world-map .cw-city-landmark:focus-visible .cw-city-landmark-bg {
    stroke: #16a34a;
    r: 25;
}

.custom-world-map .cw-city-landmark:hover .cw-city-landmark-halo {
    fill: rgba(22, 163, 74, 0.22);
    stroke: rgba(22, 163, 74, 0.45);
}

.custom-world-map .cw-city-landmark:hover {
    outline: none;
}

/* Continent variant -- one marker per served country, shown immediately
   when the user zooms to a continent (no country click required). They
   share the same SVG element structure as country-variant markers, but
   we shrink them down + hide the name caption to keep the continent
   view scannable instead of crowded. Clicking one of these drills into
   that country and swaps in the full 5-city country-variant view. */
.custom-world-map .cw-city-landmarks[data-variant="continent"] .cw-city-landmark-halo {
    r: 18;
}
.custom-world-map .cw-city-landmarks[data-variant="continent"] .cw-city-landmark-bg {
    r: 14;
    stroke-width: 1.8;
}
.custom-world-map .cw-city-landmarks[data-variant="continent"] .cw-city-landmark-icon {
    font-size: 17px;
}
.custom-world-map .cw-city-landmarks[data-variant="continent"] .cw-city-landmark-label {
    display: none;
}
.custom-world-map .cw-city-landmarks[data-variant="continent"] .cw-city-landmark:hover .cw-city-landmark-bg,
.custom-world-map .cw-city-landmarks[data-variant="continent"] .cw-city-landmark:focus-visible .cw-city-landmark-bg {
    r: 17;
}

.custom-world-map .cw-theme-marker.is-active circle {
    stroke: #111827;
    stroke-width: 2.8;
}

.custom-world-map .cw-theme-marker.is-outside-continent {
    opacity: 0.12;
    pointer-events: none;
}

.custom-world-map .cw-disputed-overlays {
    pointer-events: auto;
}

.custom-world-map .cw-disputed-overlay {
    /* Soft sand fill (was a diagonal-stripe pattern earlier; the stripes
       doubled up over Western Sahara's own polygon and made the area look
       broken). Solid fill + dashed border keeps the territory visually
       distinct from its neighbour without looking noisy. */
    fill: #e7d3b6;
    stroke: #8b6f47;
    stroke-width: 0.6;
    stroke-dasharray: 3 2;
    paint-order: stroke;
    cursor: help;
    fill-opacity: 0.85;
}

/* Kill the default UA focus rectangle (the "yellow box") on SVG paths.
   The selected country is shown by its green SHAPE, not a box. Keyboard
   focus still gets a subtle outline-traced shape, never a bounding box. */
.custom-world-map .cw-country:focus,
.custom-world-map .cw-continent:focus {
    outline: none;
}

.custom-world-map .cw-country:focus-visible,
.custom-world-map .cw-continent:focus-visible {
    outline: none;
    stroke: #0b4fc4;
    stroke-width: 1.4;
    paint-order: stroke;
}

/* Disputed-territory styling. Eridura is politically neutral on contested
   sovereignty: Western Sahara (EH) renders as a SEPARATE polygon from
   Morocco (MA) -- both already exist as distinct features in
   world-atlas/countries-110m.json, we just paint EH with a warm sand
   tone that signals "not the same country, not a routed destination
   either" without taking a position on the dispute. The dashed grey
   border on EH's edges signals "this boundary is contested" -- standard
   cartographic shorthand used by the UN and respected atlases.
   The !important defeats the continent-tinted fill applyMapMode sets,
   so the political treatment doesn't get overwritten when Africa is
   themed green. */
.custom-world-map .cw-country.is-disputed-territory {
    fill: #e7d3b6 !important;
    fill-opacity: 0.92;
    stroke: #8b6f47;
    stroke-width: 0.6;
    stroke-dasharray: 3 2;
    paint-order: stroke;
    cursor: help;
}

.custom-world-map.is-zoomed .cw-country.is-disputed-territory {
    stroke: #6b5436;
    stroke-width: 0.9;
}

.custom-world-map .cw-country.is-display-overridden,
.custom-world-map .cw-disputed-overlay.is-display-overridden {
    fill: #dbeafe !important;
    stroke: #0b4fc4;
    stroke-width: 0.85;
    stroke-dasharray: 2 2;
    paint-order: stroke;
}

/* Disputed-territory tooltip variant -- amber accent so the user knows
   this hover isn't a "click me" prompt but informational context. */
.custom-world-map .cw-name.is-disputed {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
    max-width: 280px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
}

/* Legend that explains the diagonal-stripe fill. Sits in the top-right
   of the map container so it doesn't compete with the .cw-hint pill at
   bottom-left or the zoom controls at bottom-right. */
.custom-world-map .cw-disputed-legend {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #cfe0f6;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    max-width: 280px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.custom-world-map .cw-disputed-swatch {
    flex: 0 0 auto;
    display: inline-block;
    width: 18px;
    height: 12px;
    border-radius: 3px;
    border: 1px dashed #8b6f47;
    background: #e7d3b6;
}

@media (max-width: 720px) {
    .custom-world-map .cw-disputed-legend {
        font-size: 0.68rem;
        right: 10px;
        top: 10px;
        max-width: 220px;
    }
}

.custom-world-map .cw-hint {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 4;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #cfe0f6;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-world-map .cw-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #52657d;
    font-weight: 700;
}

.custom-country-search {
    position: relative;
    margin: 0 0 14px;
}

.custom-country-search > .material-icons-outlined {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-family: "Material Icons Outlined";
    pointer-events: none;
}

.custom-country-search input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1px solid #cfe0f6;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-weight: 600;
}

.custom-country-search input:focus-visible {
    outline: none;
    border-color: #0b6be8;
    box-shadow: 0 0 0 3px rgba(11, 107, 232, 0.16);
}

.custom-country-search-results {
    position: absolute;
    z-index: 8;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 280px;
    overflow: auto;
    background: #fff;
    border: 1px solid #cfe0f6;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.custom-country-search-results.hidden {
    display: none;
}

.custom-country-search-results li {
    margin: 0;
}

.custom-country-search-results button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #111827;
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.custom-country-search-results button:hover,
.custom-country-search-results button.is-active,
.custom-country-search-results button:focus-visible {
    background: #eef5ff;
    outline: none;
}

.custom-country-search-results button span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-country-search-empty {
    padding: 12px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
}

.custom-visa-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #cfe0f6;
    border-radius: 12px;
    background: #f4f9ff;
    cursor: pointer;
    user-select: none;
}

.custom-visa-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-visa-toggle-switch {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 160ms ease;
    margin-top: 1px;
}

.custom-visa-toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform 160ms ease;
}

.custom-visa-toggle input:checked + .custom-visa-toggle-switch {
    background: #0b6be8;
}

.custom-visa-toggle input:checked + .custom-visa-toggle-switch::after {
    transform: translateX(16px);
}

.custom-visa-toggle input:focus-visible + .custom-visa-toggle-switch {
    outline: 2px solid #0b4fc4;
    outline-offset: 2px;
}

.custom-visa-toggle-text {
    color: #0f2747;
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.3;
}

.custom-visa-toggle-text small {
    display: block;
    color: #64748b;
    font-weight: 500;
    font-size: 0.76rem;
    margin-top: 2px;
}

/* Passport selector: sits above the visa toggle, lets users override the
   nationality Eridura infers from their departure airport. e.g. a user
   flying from Algiers but holding a French passport. The visa filter and
   country-detail visa pill both re-key off this value. */
.custom-passport-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #cfe0f6;
    border-radius: 12px;
    background: #f4f9ff;
    flex-wrap: wrap;
}

.custom-passport-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 200px;
    cursor: pointer;
}

.custom-passport-label .material-icons-outlined {
    color: #0b6be8;
    font-size: 22px;
    flex: 0 0 auto;
}

.custom-passport-label-text {
    color: #0f2747;
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.3;
}

.custom-passport-label-text small {
    display: block;
    color: #64748b;
    font-weight: 500;
    font-size: 0.76rem;
    margin-top: 2px;
}

.custom-passport-select {
    flex: 0 1 240px;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #fff;
    color: #0f2747;
    font: inherit;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.custom-passport-select:hover {
    border-color: #0b6be8;
}

.custom-passport-select:focus-visible {
    outline: none;
    border-color: #0b4fc4;
    box-shadow: 0 0 0 3px rgba(11, 107, 232, 0.18);
}

/* Pulse the select while we refetch the visa-keyed map data for the newly
   chosen passport. Disabled state prevents a second change firing mid-flight
   (which would race the two awaits in initPassportSelector). */
.custom-passport-select.is-loading {
    cursor: progress;
    animation: custom-passport-pulse 900ms ease-in-out infinite;
}

@keyframes custom-passport-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(11, 107, 232, 0);
        border-color: #cfe0f6;
    }
    50% {
        box-shadow: 0 0 0 4px rgba(11, 107, 232, 0.18);
        border-color: #0b6be8;
    }
}

.custom-country-search-submit {
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: #0b6be8;
    color: #fff;
    font: inherit;
    font-weight: 700;
    padding: 10px 18px;
    margin-left: 8px;
    cursor: pointer;
    transition: background 150ms ease;
}

.custom-country-search-submit:hover,
.custom-country-search-submit:focus-visible {
    background: #0b4fc4;
    outline: none;
}

.custom-country-search {
    display: flex;
    align-items: center;
}

.custom-country-search input {
    flex: 1 1 auto;
}

/* Clean hover name label (replaces the removed dark box). */
.custom-world-map .cw-name {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
    padding: 5px 11px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #cfe0f6;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
    color: #0f2747;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.custom-world-map .cw-name.is-muted {
    color: #64748b;
    font-weight: 600;
}

/* Country detail panel */
.custom-detail-loading {
    display: grid;
    gap: 10px;
    color: #334155;
}

.custom-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.custom-detail-kicker {
    color: #0056b3;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.custom-detail-head h2 {
    margin: 4px 0 0;
    color: #111827;
}

.custom-visa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid transparent;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
}

.custom-visa-badge .material-icons-outlined {
    font-size: 16px;
}

.custom-visa-badge.is-free {
    background: #ecfdf3;
    color: #15803d;
    border-color: #86efac;
}

.custom-visa-badge.is-required {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.custom-visa-badge.is-conditional {
    background: #fffbeb;
    color: #b45309;
    border-color: #fcd34d;
}

.custom-visa-badge.is-unknown {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.custom-detail-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    border: 1px solid #cfe0f6;
    border-radius: 12px;
    background: #f4f9ff;
    color: #0b4fc4;
    font: inherit;
    font-weight: 700;
    padding: 11px 14px;
    cursor: pointer;
}

.custom-detail-action:hover:not(:disabled),
.custom-detail-action:focus-visible {
    border-color: #0b6be8;
    outline: none;
}

.custom-detail-action:disabled {
    opacity: 0.6;
    cursor: default;
}

.custom-arrival-slot:not(:empty) {
    margin-top: 10px;
}

.custom-arrival-loading {
    color: #64748b;
    font-weight: 600;
    font-size: 0.85rem;
}

.custom-arrival-card {
    display: grid;
    gap: 4px;
    border: 1px solid #cfe0f6;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
}

.custom-arrival-card .custom-quote-badge {
    justify-self: start;
}

.custom-arrival-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0b4fc4;
}

.custom-cities-title {
    margin: 18px 0 2px;
    color: #111827;
}

/* Visa-required / conditional / unknown destinations show a full-width
   warning banner above the "See live flights" CTA so the user can't miss
   it -- the tiny visa pill alone wasn't loud enough. Cities/hotels move
   into a collapsed <details> so the page doesn't look bookable until the
   user actively opens it. */
.custom-visa-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 12px 0 10px;
    padding: 13px 14px;
    border: 1px solid #fde2e2;
    border-left: 4px solid #b91c1c;
    border-radius: 12px;
    background: #fff5f5;
    color: #7f1d1d;
}
.custom-visa-banner--conditional {
    border-color: #fde9c8;
    border-left-color: #b45309;
    background: #fff8eb;
    color: #7c2d12;
}
.custom-visa-banner--unknown {
    border-color: #dbeafe;
    border-left-color: #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
}
.custom-visa-banner-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(185, 28, 28, 0.12);
    color: #b91c1c;
    font-size: 1.5rem;
}
.custom-visa-banner--conditional .custom-visa-banner-icon {
    background: rgba(180, 83, 9, 0.14);
    color: #b45309;
}
.custom-visa-banner--unknown .custom-visa-banner-icon {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}
.custom-visa-banner-body {
    flex: 1;
    min-width: 0;
}
.custom-visa-banner-body strong {
    display: block;
    font-size: 0.94rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: inherit;
}
.custom-visa-banner-body p {
    margin: 0 0 6px;
    color: inherit;
    font-size: 0.82rem;
    line-height: 1.45;
}
.custom-visa-banner-body p:last-child {
    margin-bottom: 0;
}
.custom-visa-banner-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 140ms ease;
}
.custom-visa-banner-link:hover,
.custom-visa-banner-link:focus-visible {
    background: #1d4ed8;
    outline: none;
}
.custom-visa-banner-link .material-icons-outlined {
    font-size: 1rem;
}

.custom-detail.is-visa-restricted .custom-detail-action {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: none;
}
.custom-detail.is-visa-restricted .custom-detail-action:hover,
.custom-detail.is-visa-restricted .custom-detail-action:focus-visible {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.custom-cities-collapse {
    margin: 12px 0 0;
    border: 1px solid #d8e7f8;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 39, 71, 0.04);
}
.custom-cities-collapse > summary {
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.86rem;
    color: #0f2747;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.custom-cities-collapse > summary::-webkit-details-marker {
    display: none;
}
.custom-cities-collapse > summary::after {
    content: "+";
    font-size: 1.2rem;
    font-weight: 700;
    color: #2563eb;
    transition: transform 160ms ease;
}
.custom-cities-collapse > summary span,
.custom-cities-collapse > summary small {
    display: block;
}
.custom-cities-collapse > summary small {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
}
.custom-cities-collapse[open] > summary::after {
    transform: rotate(45deg);
}
.custom-cities-collapse > .custom-cities-title,
.custom-cities-collapse > .custom-cities-note,
.custom-cities-collapse > .custom-city-list {
    padding-left: 14px;
    padding-right: 14px;
}
.custom-cities-collapse > .custom-cities-title { margin-top: 8px; }
.custom-cities-collapse > .custom-city-list { padding-bottom: 14px; }

.custom-cities-note {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 0.8rem;
}

.custom-city-list {
    display: grid;
    gap: 12px;
}

.custom-city-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    background: #fff;
}

.custom-city-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.custom-city-top h4 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
}

.custom-city-spend {
    font-weight: 800;
    color: #0b4fc4;
}

.custom-city-spend small {
    color: #64748b;
    font-weight: 600;
}

.custom-city-weather {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 600;
}

.custom-city-weather .material-icons-outlined {
    font-size: 18px;
    color: #0b6be8;
}

.custom-city-weather small {
    color: #94a3b8;
}

.custom-good-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.custom-good-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 2px;
}

.custom-good-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eef2f7;
    color: #475569;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.5;
}

/* A small leading dot reinforces the per-traveller colour coding. */
.custom-good-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex: 0 0 auto;
}

.custom-good-chip[data-intent="any"]::before {
    display: none;
}

/* Solo = blue */
.custom-good-chip[data-intent="solo"] {
    background: #e6efff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

/* Couple = pink */
.custom-good-chip[data-intent="couple"] {
    background: #fde7f1;
    color: #be185d;
    border-color: #fbcfe8;
}

/* Friends = green */
.custom-good-chip[data-intent="friends"] {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}

/* Family = yellow */
.custom-good-chip[data-intent="family"] {
    background: #fef4c7;
    color: #a16207;
    border-color: #fde047;
}

.custom-transit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #475569;
    font-weight: 600;
    margin-bottom: 12px;
}

.custom-transit-bar {
    flex: 1 1 auto;
    height: 7px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.custom-transit-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #0b6be8);
}

.custom-city-hotels-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #fff;
    color: #0b4fc4;
    font: inherit;
    font-weight: 700;
    padding: 9px 12px;
    cursor: pointer;
}

.custom-city-hotels-btn:hover:not(:disabled),
.custom-city-hotels-btn:focus-visible {
    border-color: #0b6be8;
    outline: none;
}

.custom-city-hotels {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.custom-city-hotels.hidden {
    display: none;
}

.custom-hotel-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px;
}

.custom-hotel-mini img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
}

.custom-hotel-mini > .material-icons-outlined {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    color: #94a3b8;
    flex: 0 0 auto;
}

.custom-hotel-mini strong {
    display: block;
    color: #111827;
    font-size: 0.88rem;
}

.custom-hotel-mini span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.custom-city-empty {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 2px;
}

.custom-trip-side {
    padding: 20px;
}

.custom-selection-panel {
    display: grid;
    gap: 10px;
    color: #334155;
}

.custom-selection-panel > .material-icons-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eff6ff;
    color: #0b6be8;
}

.custom-selection-panel h2 {
    margin: 0;
    color: #111827;
}

.custom-selection-panel p {
    margin: 0;
    line-height: 1.5;
}

.custom-error-icon {
    background: #fff1f2 !important;
    color: #dc2626 !important;
}

.custom-price-loader {
    display: inline-flex;
    align-items: end;
    gap: 7px;
    height: 52px;
    margin-top: 10px;
}

.custom-price-loader i {
    display: block;
    width: 10px;
    height: 32px;
    border-radius: 999px;
    background: #0b6be8;
    animation: customPricePulse 760ms ease-in-out infinite alternate;
}

.custom-price-loader i:nth-child(2) {
    animation-delay: 110ms;
}

.custom-price-loader i:nth-child(3) {
    animation-delay: 220ms;
}

.custom-price-loader i:nth-child(4) {
    animation-delay: 330ms;
}

@keyframes customPricePulse {
    from {
        opacity: 0.35;
        transform: scaleY(0.58);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.custom-quote-card {
    display: grid;
    gap: 10px;
}

.custom-quote-badge {
    width: fit-content;
    border-radius: 999px;
    background: #dcfce7;
    color: #047857;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 900;
}

.custom-quote-route {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #52657d;
    font-weight: 700;
}

.custom-quote-price {
    color: #0056b3;
    font-size: 2.2rem;
    line-height: 1;
}

.custom-quote-details {
    display: grid;
    gap: 8px;
    margin: 6px 0 0;
}

.custom-quote-details div {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid #d7e3f4;
    border-radius: 10px;
    background: #f8fbff;
}

.custom-quote-details dt {
    color: #52657d;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.custom-quote-details dd {
    margin: 0;
    color: #111827;
    font-weight: 700;
}

.custom-quote-next {
    padding-top: 8px;
    border-top: 1px solid #d7e3f4;
    color: #52657d;
    font-size: 0.92rem;
}

.custom-trip-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
}

.custom-trip-cta h3 {
    margin: 0 0 6px;
    color: #111827;
}

.custom-trip-cta p {
    margin: 0;
    color: #52657d;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .custom-trip-topbar,
    .custom-builder-grid,
    .custom-trip-cta {
        grid-template-columns: 1fr;
    }

    .custom-context-wrap,
    .custom-trip-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .custom-edit-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custom-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custom-theme-spots-head {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .custom-trip-page {
        width: calc(100% - 20px);
        padding-top: 18px;
    }

    .custom-trip-hero,
    .custom-trip-topbar,
    .custom-edit-panel,
    .custom-theme-panel,
    .custom-map-panel,
    .custom-trip-side {
        padding: 16px;
    }

    .custom-theme-head {
        align-items: stretch;
        flex-direction: column;
    }

    .custom-theme-grid {
        grid-template-columns: 1fr;
    }

    .custom-theme-card {
        min-height: 0;
    }

    .custom-trip-hero h1 {
        font-size: clamp(2.1rem, 12vw, 3.1rem);
    }

    .custom-world-map {
        min-height: 320px;
    }

    .custom-edit-panel {
        grid-template-columns: 1fr;
    }

    .custom-budget-meter strong,
    .custom-quote-price {
        font-size: 1.8rem;
    }
}

/* ===== Seat map add-on ===== */
.seatmap-host { position: fixed; inset: 0; z-index: 1200; }
.seatmap-modal { position: fixed; inset: 0; display: grid; place-items: center; }
.seatmap-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.seatmap-card {
    position: relative;
    z-index: 1;
    width: min(560px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}
.seatmap-loading, .seatmap-empty {
    padding: 40px 24px;
    text-align: center;
    color: #52657d;
    font-weight: 600;
}
.seatmap-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #e7eef7;
}
.seatmap-head h3 { margin: 0 0 4px; color: #111827; }
.seatmap-head p { margin: 0; color: #64748b; font-size: 0.85rem; }
.seatmap-x {
    border: 0; background: transparent; font-size: 1.6rem; line-height: 1;
    color: #64748b; cursor: pointer; padding: 0 4px;
}
.seatmap-tabs { display: flex; gap: 8px; padding: 12px 20px 0; flex-wrap: wrap; }
.seatmap-tab {
    border: 1px solid #cfe0f6; background: #f4f9ff; color: #0b4fc4;
    border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700;
    font-size: 0.8rem; cursor: pointer;
}
.seatmap-tab.is-active { background: #0b6be8; color: #fff; border-color: #0b6be8; }
.seatmap-legend {
    display: flex; gap: 16px; padding: 12px 20px; color: #52657d;
    font-size: 0.78rem; font-weight: 600;
}
.seatmap-legend .lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; }
.lg--free { background: #d8ecff; border: 1px solid #8fc3f5; }
.lg--sel { background: #16a34a; }
.lg--taken { background: #d7dee8; }
.seatmap-body { overflow: auto; padding: 8px 20px 20px; }
.seatmap-grid { display: inline-flex; flex-direction: column; gap: 6px; min-width: 100%; }
.seatmap-row { display: flex; align-items: center; gap: 6px; }
.seatmap-rownum { width: 22px; text-align: right; color: #94a3b8; font-size: 0.72rem; font-weight: 700; }
.seat {
    width: 34px; height: 34px; border-radius: 7px; border: 1px solid transparent;
    font: inherit; font-size: 0.66rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.seat--none { background: transparent; cursor: default; }
.seat--free { background: #d8ecff; border-color: #8fc3f5; color: #0b4fc4; }
.seat--free:hover { background: #b9ddff; }
.seat--taken { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }
.seat.is-selected { background: #16a34a; border-color: #16a34a; color: #fff; }
.seatmap-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-top: 1px solid #e7eef7; flex-wrap: wrap;
}
.seatmap-summary { color: #334155; font-weight: 700; font-size: 0.85rem; }
.seatmap-actions { display: flex; gap: 8px; }
.seatmap-btn { border-radius: 10px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.seatmap-btn.ghost { background: #fff; border-color: #cfd9e6; color: #475569; }
.seatmap-btn.solid { background: #0b6be8; color: #fff; }
.seatmap-btn.solid:hover { background: #0b4fc4; }

/* ===== Itinerary "How to get there" transit directions ===== */
.transit-directions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.transit-leg {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: flex-start;
    gap: 14px;
    min-height: 164px;
    border: 1px solid #d8e7f8;
    border-radius: 16px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 39, 71, 0.06);
}
.transit-leg::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
    background: linear-gradient(180deg, #0b6be8, #72b5ff);
}
.transit-leg__icon {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #edf5ff;
    color: #0b6be8;
    box-shadow: inset 0 0 0 1px #d8e7f8;
}
.transit-leg__icon .material-icons-outlined { font-family: "Material Icons Outlined"; font-size: 1.35rem; }
.transit-leg__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.transit-leg__eyebrow {
    margin: 0;
    color: #0b6be8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.transit-leg__title {
    margin: 0;
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.2;
}
.transit-leg__route {
    margin: 0;
    color: #52657d;
    font-size: 0.84rem;
    line-height: 1.35;
}
.transit-leg__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.transit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid #cfe0f6;
    border-radius: 999px;
    padding: 7px 12px;
    background: #fff;
    color: #0b4fc4;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.transit-link--primary {
    background: #0b6be8;
    border-color: #0b6be8;
    color: #fff;
}
.transit-link:hover {
    background: #eef5ff;
    border-color: #0b6be8;
    color: #0b4fc4;
    transform: translateY(-1px);
}
.transit-link--primary:hover {
    background: #0b4fc4;
    border-color: #0b4fc4;
    color: #fff;
}
.transit-link .material-icons-outlined { font-family: "Material Icons Outlined"; font-size: 1rem; }
.transit-note {
    margin: 2px 0 0;
    color: #6b7f99;
    font-size: 0.77rem;
    line-height: 1.4;
}
@media (max-width: 760px) {
    .transit-directions { grid-template-columns: 1fr; }
    .transit-leg {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 0;
        padding: 16px;
    }
    .transit-leg__icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

/* =========================================================
   Budget panel -> Visa-free toggle + Customise Trip CTA share a row
   beneath the Explore button. They sit side-by-side on desktop and
   stack on narrow screens to keep vertical space tight.
   ========================================================= */
.budget-secondary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
}
.budget-secondary-row > .custom-visa-toggle,
.budget-secondary-row > .budget-custom-trip-cta {
    flex: 1 1 0;
    min-width: 260px;
    margin-top: 0;
}

/* Mirrors the visa toggle box (.custom-visa-toggle) exactly: same background,
   border, radius, padding, gap, typography, AND vertical centering so the
   two boxes feel like a single matched pair when sat side-by-side. */
.budget-custom-trip-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #cfe0f6;
    border-radius: 12px;
    background: #f4f9ff;
    color: #0f2747;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
.budget-custom-trip-cta:hover,
.budget-custom-trip-cta:focus-visible {
    background: #eaf3ff;
    border-color: #0b6be8;
    outline: none;
}
.budget-custom-trip-cta-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0b6be8;
    font-size: 1.2rem;
}
.budget-custom-trip-cta-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: #0f2747;
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.3;
}
.budget-custom-trip-cta-body strong {
    font-weight: 700;
    font-size: 0.86rem;
    color: #0f2747;
    line-height: 1.3;
}
.budget-custom-trip-cta-body small {
    display: block;
    color: #64748b;
    font-weight: 500;
    font-size: 0.76rem;
    margin-top: 2px;
    line-height: 1.3;
}
.budget-custom-trip-cta-arrow {
    flex: 0 0 auto;
    color: #0b6be8;
    font-size: 1.2rem;
    transition: transform 160ms ease;
}
.budget-custom-trip-cta:hover .budget-custom-trip-cta-arrow,
.budget-custom-trip-cta:focus-visible .budget-custom-trip-cta-arrow {
    transform: translateX(3px);
}

/* When the visa toggle is inside the secondary row alongside the CTA the
   bottom margin would push the CTA below it visually; cancel it there. */
.budget-secondary-row > .custom-visa-toggle {
    margin: 0;
}

/* =========================================================================
   Google Translate Website Widget -- hide all visible UI
   -------------------------------------------------------------------------
   We integrate Google Translate via services/translate-widget.js so the
   user's pill selection translates every page (header, footer, custom-
   trip, budget-results, login, register, etc.) without us having to
   maintain per-string translation files. The widget itself injects a
   top banner, a floating tooltip, and a couple of iframes -- we hide
   all of that visual chrome and keep only Eridura's own language pill.
   ========================================================================= */
#eridura-translate-host,
.skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-gadget-icon,
.goog-te-menu-value,
.goog-te-menu-frame,
.goog-tooltip,
.goog-tooltip-popup,
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* When Google injects its translation banner it adds an inline `top:40px`
   on <body>. That offset shoves Eridura's sticky header off-screen.
   Force the body back to the top so layout stays intact. !important
   needed to beat Google's inline style. */
body {
    top: 0 !important;
}

/* Google wraps every translated text node in a <font> element so it can
   later reverse the translation. Those wrappers can subtly inherit the
   wrong color / font-weight / background in some browsers. Force them
   to inherit everything so translated text reads identical to source. */
font[style*="vertical-align"] {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}