/* Multi-city flight search — scoped to enableMultiCity forms (preview + multi-city results). */

.multi-city-panel {
    width: 100%;
    margin: 0;
}

.multi-city-panel[hidden] {
    display: none !important;
}

/* Same white shell language as .flight-search-form__search-params
   (extended form: square top-left so tabs connect with no blue crescent). */
.multi-city-panel__shell {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0 10px 10px;
    background: #fff;
    position: relative;
    overflow: visible;
}

.multi-city-panel__segments {
    display: flex;
    flex-direction: column;
}

.multi-city-segment {
    display: grid;
    /* No Flight N column on desktop — label is visually hidden (aria-label on the row). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 0.85fr) 40px;
    grid-template-areas: "from to date remove";
    align-items: stretch;
    border-bottom: 1px solid #e5e7eb;
}

.multi-city-segment:last-child {
    border-bottom: 1px solid #e5e7eb;
}

/* Head wraps Flight N + remove; display:contents so remove stays in the desktop grid. */
.multi-city-segment__head {
    display: contents;
}

.multi-city-segment__label {
    display: none !important;
}

.multi-city-segment__from { grid-area: from; }
.multi-city-segment__to { grid-area: to; }
.multi-city-segment__date { grid-area: date; }
.multi-city-segment__remove { grid-area: remove; }

/*
 * Segment fields: reuse .flight-search-form .search-field height/typography/padding.
 * Only structural overrides for the multi-city grid (dividers + shrink-to-cell).
 * --mc-rt-field-height is set from the live Round-trip/Search field (multiCityForm.js).
 */
.multi-city-segment .search-field {
    min-width: 0;
    width: auto;
    min-height: var(--mc-rt-field-height, auto);
    border-bottom: none !important;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    /* Dropdown is appended inside .search-field (same as RT/OW); never clip it. */
    overflow: visible;
}

/* Raise the open airport field above sibling segment rows (same stacking need as calendars). */
.multi-city-segment:has(.select2-container--open) {
    position: relative;
    z-index: 30;
}

.multi-city-segment .search-field:has(.select2-container--open) {
    z-index: 31;
}

.multi-city-segment .search-field:last-of-type {
    border-right: none;
}

/* Select2 — mirror #departure / #destination treatment in flight-search-form.scss */
.multi-city-segment .select2-container {
    width: 100% !important;
}

.multi-city-segment .select2-container .selection .select2-selection {
    display: flex;
    align-items: center;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
}

.multi-city-segment .select2-container .selection .select2-selection__arrow {
    display: none;
}

.multi-city-segment .select2-container .selection .select2-selection__rendered {
    padding: 0;
    color: #10374c;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.multi-city-segment .select2-container .selection .select2-selection__placeholder {
    color: #c3cdd2;
    font-weight: 400;
}

@media (min-width: 576px) {
    .multi-city-segment .select2-container .selection .select2-selection__rendered {
        font-size: 16px;
        line-height: 22px;
    }
}

/*
 * Desktop (≥1025): mirror flight-search-form.scss #departure/#destination — hide
 * the outer Select2 chrome so only the absolute .departure-dropdown /
 * .destination-dropdown results panel is visible.
 * Below 1025: keep the solid white dropdown (RT uses the airport modal instead).
 */
.multi-city-segment .select2-container + .select2-container .select2-dropdown {
    z-index: 40;
}

@media (min-width: 1025px) {
    .multi-city-segment .select2-container.select2-container--open + .select2-container .select2-dropdown,
    .multi-city-segment .select2-container + .select2-container .select2-dropdown {
        background: transparent;
        border: none;
        box-shadow: none;
    }
}

/* Mobile/tablet: solid panel so sibling segment rows do not show through. */
@media (max-width: 1024px) {
    .multi-city-segment .select2-container + .select2-container .select2-dropdown.departure-dropdown,
    .multi-city-segment .select2-container + .select2-container .select2-dropdown.destination-dropdown {
        background-color: #fff;
        box-shadow: 0 4px 37.2px 0 rgba(0, 0, 0, 0.15);
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }
}

.multi-city-segment__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.multi-city-segment__remove:hover {
    border-color: #f54b4e;
    color: #f54b4e;
}

.multi-city-segment__remove[hidden] {
    visibility: hidden;
    pointer-events: none;
}

.multi-city-panel__footer {
    display: flex;
    flex-wrap: nowrap;
    /* Stretch like #standardSearchParams so Passengers matches Search field height;
       Search button is vertically centered via inherited .search-field:last-child padding. */
    align-items: stretch;
    gap: 0;
    min-height: 0;
}

.multi-city-panel__add {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    min-height: 36px;
    margin: 0 8px 0 12px;
    padding: 0 14px;
    border: 1px solid #cfe3f5;
    border-radius: 8px;
    background: #f3f9ff;
    color: #1b91e0;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.multi-city-panel__add:hover {
    background: #e8f4fd;
    color: #157dc4;
    border-color: #1b91e0;
}

.multi-city-panel__add:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.multi-city-panel__footer-controls {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
}

/* Keep + Add flight vertically centered against the stretched Passengers/Search row. */
.multi-city-panel__footer > .multi-city-panel__add {
    align-self: center;
}

/* Relocated Passengers + Search: keep RT padding/type; only layout in the footer row. */
.multi-city-panel__footer-controls .search-field {
    border-bottom: none !important;
    width: auto;
    flex: 0 0 auto;
}

.multi-city-panel__footer-controls .search-field_passengers {
    border-right: 1px solid #e5e7eb;
    max-width: none;
}

/* Match .search-field_passengers @ 1200px from flight-search-form.scss */
@media (min-width: 1200px) {
    .multi-city-panel__footer-controls .search-field_passengers {
        flex: none;
        width: 236px;
    }
}

.multi-city-panel__footer-controls .search-field:last-child {
    border-right: none;
    margin-left: 0;
    margin-right: 0;
    /* Center Search inside the stretched footer row (RT desktop uses last-child padding;
       below 1025px that padding alone is not enough when Passengers is taller). */
    justify-content: center;
}

/*
 * Desktop (≥1025): shared horizontal inset for Add flight / Remove / Search
 * button boundaries — match .search-field content padding (24px L/R from
 * flight-search-form.scss), not the shell edge alone. Tablet/mobile unchanged.
 */
@media (min-width: 1025px) {
    .multi-city-panel {
        --mc-action-inset: 24px;
    }

    .multi-city-segment {
        /* Remove col = button (32px) + right inset */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 0.85fr) calc(32px + var(--mc-action-inset));
    }

    .multi-city-segment__remove {
        margin-right: var(--mc-action-inset);
    }

    .multi-city-panel__add {
        margin-left: var(--mc-action-inset);
    }

    /* Align Search button’s right edge with Remove; field padding would otherwise oversit. */
    .multi-city-panel__footer-controls .search-field:last-child {
        margin-right: var(--mc-action-inset);
        padding-right: 0;
        justify-content: flex-end;
    }
}

/* Hide standard OW/RT params shell while multi-city is active (JS also relocates controls). */
.flight-search-form.is-multi-city #standardSearchParams {
    display: none !important;
}

.flight-search-form.is-multi-city .find-hotels-checkbox,
.flight-search-form.is-multi-city #findHotelsCheckbox,
.flight-search-form.is-multi-city label[for="findHotels"] {
    display: none !important;
}

/*
 * Results page only (this file is also loaded on homepage + all results pages).
 * Multi-city hides the date-range bar via opacity/visibility but it still reserved
 * min-height: 50px — an empty strip above Filters / sort tabs. Collapse the bar
 * only while the form is in multi-city mode so RT/OW keep the existing date bar.
 * Zero result-layout padding-top for MC so the only spacer left is the shared
 * section.flight-search margin-top.
 */
body.flight-search-result:has(.flight-search-form.is-multi-city) .date-range-bar-wrapper {
    display: none !important;
}

/* Beat compiled .flight-search-result .main … .result-layout padding (18px / 12px). */
body.flight-search-result:has(.flight-search-form.is-multi-city) .main .flight-search .formWrapper .search-results .result-layout {
    padding-top: 0;
}

/* Booking modal: multi-city legs — date + toggle only (no Flight N heading). */
.fdm__leg-head--untitled {
    justify-content: space-between;
}

.fdm__leg-head--untitled .fdm__leg-date {
    min-width: 0;
}

/* --------------------------------------------------------------------------
 * Tablet (768–1024): approved pre-experiment layout — unchanged.
 * Scoped with min-width so ≤767 gets the mobile card experiment instead.
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .multi-city-segment {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "from to remove"
            "date date date";
    }

    .multi-city-segment__from { grid-area: from; }
    .multi-city-segment__to { grid-area: to; border-right: none; }
    .multi-city-segment__date {
        grid-area: date;
        border-right: none;
        border-top: 1px solid #e5e7eb;
    }
    .multi-city-segment__remove {
        grid-area: remove;
        margin: 8px 12px 0 0;
    }

    .multi-city-panel__footer {
        flex-direction: column;
    }

    .multi-city-panel__add {
        margin: 10px 12px;
        align-self: flex-start;
    }

    .multi-city-panel__footer-controls {
        width: 100%;
        border-top: 1px solid #e5e7eb;
    }
}

/* --------------------------------------------------------------------------
 * Mobile (≤767): experimental per-segment cards — desktop/tablet above untouched.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .multi-city-panel__shell {
        border: none;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    .multi-city-panel__segments {
        gap: 12px;
        overflow: visible;
    }

    .multi-city-segment {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        overflow: visible;
        /* Reset desktop grid areas */
        grid-template-columns: none;
        grid-template-areas: none;
    }

    /*
     * Flight 1 must square its top-left like .flight-search-form__search-params
     * (extended: 0 10px 10px) so trip-type tabs connect with no blue crescent.
     * Bounding boxes already abut (gap 0); the seam was border-radius cutout.
     */
    .multi-city-segment:first-child {
        border-radius: 0 10px 10px;
    }

    .multi-city-segment:last-child {
        border-bottom: 1px solid #e5e7eb;
    }

    .multi-city-segment__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 40px;
        padding: 8px 12px 0;
        flex: 0 0 auto;
    }

    .multi-city-segment__label {
        display: block !important;
        margin: 0;
        padding: 0;
        color: #10374c;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 18px;
        letter-spacing: 0.01em;
    }

    .multi-city-segment__remove {
        grid-area: unset;
        align-self: center;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        min-width: 44px;
        min-height: 44px;
        margin: 0 -6px 0 0;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #6b7280;
        font-size: 22px;
        line-height: 1;
    }

    .multi-city-segment__remove[hidden] {
        visibility: hidden;
        pointer-events: none;
    }

    /*
     * Fields: inherit .flight-search-form .search-field (height/pad/gap/type).
     * Only structural overrides for stacked card rows — no hardcoded field chrome.
     * Divider via inset shadow (not border-top) so label/value baselines match RT
     * (border-top + border-box would shift content down 1px).
     */
    .multi-city-segment .search-field {
        grid-area: unset;
        width: 100%;
        box-sizing: border-box;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: inset 0 1px 0 #e5e7eb;
        overflow: visible;
    }

    /* Departure is :last-child; undo Search-button padding so it matches From/To. */
    .multi-city-segment .search-field:last-child {
        padding: 10px 24px;
    }

    @media (min-width: 576px) {
        .multi-city-segment .search-field:last-child {
            padding: 16px 24px;
        }
    }

    /* Date input: same as .search-field input (flight-search-form.scss). */
    .multi-city-segment .multi-city-date {
        width: 100%;
        cursor: pointer;
    }

    /* Footer: Add flight full-width, then Passengers + Search stacked */
    .multi-city-panel__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 12px;
        padding: 0;
        background: transparent;
    }

    .multi-city-panel__footer > .multi-city-panel__add,
    .multi-city-panel__add {
        align-self: stretch;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 10px 14px;
        border: 1px solid rgba(27, 145, 224, 0.45);
        border-radius: 10px;
        background: rgba(243, 249, 255, 0.85);
        color: #1b91e0;
        font-size: 15px;
        font-weight: 700;
        box-sizing: border-box;
    }

    .multi-city-panel__footer-controls {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        overflow: visible;
    }

    .multi-city-panel__footer-controls .search-field_passengers {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        width: 100%;
        max-width: none;
        min-height: 56px;
        padding: 10px 14px;
        box-sizing: border-box;
    }

    .multi-city-panel__footer-controls .search-field:last-child {
        width: 100%;
        min-height: 56px;
        padding: 10px 14px;
        box-sizing: border-box;
        justify-content: stretch;
        align-items: stretch;
    }

    .multi-city-panel__footer-controls .search-button {
        max-width: none;
        width: 100%;
        margin: 0;
        min-height: 48px;
        border-radius: 8px;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
 * Results Edit Search: host the real Multi-city form inside #mobileSearchModal
 * (≤1024). Pinned Cancel/Search footer stays outside the scroll body.
 * -------------------------------------------------------------------------- */
.mobile-search-modal.is-multi-city-edit [data-msm-duplicate-form] {
    display: none !important;
}

.mobile-search-modal.is-multi-city-edit [data-flight-mobile-form-host] {
    display: block !important;
}

.mobile-search-modal.is-multi-city-edit .msm-mc-actions {
    display: flex !important;
}

.mobile-search-modal .msm-mc-actions {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb;
    background: #fff;
    box-sizing: border-box;
}

.mobile-search-modal .msm-mc-actions[hidden] {
    display: none !important;
}

.mobile-search-modal [data-flight-mobile-form-host] {
    margin: 0;
}

.mobile-search-modal [data-flight-mobile-form-host][hidden] {
    display: none !important;
}

.mobile-search-modal [data-flight-mobile-form-host] .flight-search-form {
    display: block;
}

.mobile-search-modal [data-flight-mobile-form-host] .multi-city-panel {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .mobile-search-modal [data-flight-mobile-form-host] .multi-city-panel__footer-controls .search-field:last-child[hidden] {
        display: none !important;
    }

    /* Passengers alone when Search is hidden in the hosted sheet. */
    .mobile-search-modal [data-flight-mobile-form-host] .multi-city-panel__footer-controls .search-field_passengers {
        border-bottom: none;
    }
}