/* ==========================================================================
   Custom Travel Booking Form Architecture - design.css
   ========================================================================== */

/* 1. Main Booking Content Panel (Kept Clean White) */
.custom-flight-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    background-color: #ffffff !important;
    padding: 35px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box;
}

/* Base flex rows configuration */
.booking-layout-row {
    display: flex !important;
    width: 100% !important;
}

/* 2. ROW 1: Meta Toggles & Header Alignments */
.row-meta-settings {
    justify-content: space-between;
    align-items: center;
    color: #2b2f3c !important;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 14px;
}

.trip-type-options {
    display: flex;
    gap: 24px;
}

.radio-label-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #4a5568;
}

    .radio-label-wrapper input[type="radio"] {
        accent-color: #0064e6;
    }

.ancillary-settings {
    display: flex;
    gap: 16px;
}

.meta-input-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}

.meta-inline-select {
    background: #f5f7fa !important;
    border: 1px solid #e2e8f0 !important;
    color: #2d3748 !important;
    padding: 0 12px;
    height: 35px !important;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

/* 3. Global Control Field Rule: Forces Labels on Top */
.custom-flight-panel .field {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

    /* Formats and positions labels cleanly above inputs */
    .custom-flight-panel .field label {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-bottom: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #4a5568 !important;
        order: 1 !important; /* Forces layout ordering to top */
    }

    /* Base input and select layout elements */
    .custom-flight-panel .field input,
    .custom-flight-panel .field select {
        order: 2 !important;
        width: 100% !important;
    }

    /* Systematically positions icons vertically centered ONLY inside the 45px box area */
    .custom-flight-panel .field > i {
        position: absolute !important;
        bottom: 0 !important;
        height: 45px !important;
        display: flex !important;
        align-items: center !important;
        left: 15px !important;
        top: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        z-index: 3 !important;
        pointer-events: none;
        color: #a0aec0 !important;
    }

/* 4. ROW 2: Route Controls Layout (Aligns items seamlessly along input baselines) */
.row-routing-inputs {
    align-items: flex-end !important;
    gap: 12px !important; /* Separation gap to prevent control overlapping */
}

.flex-basis-40 {
    flex: 4 !important;
}

.flex-basis-20 {
    flex: 2 !important;
}

/* Uniform Light Gray Text Fields & Select Menus matching identically */
.text-input-clean,
.passenger-box-item select.booking-select {
    background-color: #f5f7fa !important; /* Matching uniform light gray color background */
    color: #2d3748 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    height: 45px !important; /* Fixed at exactly 45px height */
    padding: 0 15px 0 42px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

    .text-input-clean:focus {
        background-color: #ffffff !important;
        border-color: #0064e6 !important;
        box-shadow: 0 0 0 3px rgba(0, 100, 230, 0.1) !important;
    }

/* Strip native background layout arrow icons from text input boxes */
.text-input-clean,
input[type="text"].booking-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #f5f7fa !important;
 
}

.routing-box-item::after,
.routing-box-item::before {
    display: none !important;
    content: none !important;
}

/* Central Swap Arrow Position Container (Sits level with 45px inputs) */
.routing-swap-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 45px !important; /* Matches text box vertical scope flawlessly */
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

/* Directional Arrow Swap Button Core Styling */
.functional-swap-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e2e8f0 !important;
    background-color: #f5f7fa !important;
    color: #4a5568 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

    .functional-swap-btn:hover {
        background-color: #0064e6 !important; /* Brand Highlight Blue on interaction */
        color: #ffffff !important;
        border-color: #0064e6 !important;
        transform: scale(1.05);
    }

    .functional-swap-btn svg {
        width: 14px;
        height: 14px;
        display: block;
    }

/* 5. ROW 3: Passenger Breakdowns & Main Action */
.row-passenger-actions {
    justify-content: space-between;
    align-items: flex-end !important;
    margin-top: 4px;
}

.passenger-segmented-groups {
    display: flex;
    gap: 16px;
}

.passenger-box-item {
    min-width: 145px;
}

/* Action Search Button Configuration */
.submission-btn-wrapper {
    display: flex;
    align-items: flex-end;
}

.execution-search-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 45px !important; /* Fixed at 45px to sync perfectly horizontally */
    background-color: #0064e6 !important;
    color: #ffffff !important;
    padding: 0 45px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 100, 230, 0.2) !important;
    transition: all 0.2s ease;
}

    .execution-search-btn:hover {
        background-color: #0052cc !important;
        box-shadow: 0 6px 20px rgba(0, 100, 230, 0.3) !important;
    }

/* 6. Mobile Layout Media Queries */
@media (max-width: 991px) {
    .row-routing-inputs, .row-passenger-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .routing-swap-container {
        transform: rotate(90deg);
        margin: 0 auto;
        height: 34px;
    }

    .passenger-segmented-groups {
        flex-direction: column;
        gap: 14px;
    }

    .submission-btn-wrapper, .execution-search-btn {
        width: 100% !important;
    }

    .row-meta-settings {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}


/*Booking Tabs/Sections*/


/*
            DB autocomplete flyout.
            The flyout is appended to document.body by JavaScript and positioned with fixed coordinates.
            This prevents it from being hidden behind the date field, passenger dropdowns, buttons, or parent containers.
            */
.tn-autocomplete-flyout {
    position: fixed;
    z-index: 2147483647;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    display: none;
}

.tn-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
}

    .tn-autocomplete-item:last-child {
        border-bottom: none;
    }

    .tn-autocomplete-item:hover,
    .tn-autocomplete-item.active {
        background: #f3f7ff;
    }

.tn-autocomplete-code {
    font-weight: 700;
    color: #0057d9;
    margin-right: 8px;
    font-size: 13px;
}

.tn-autocomplete-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 13px;
}

.tn-autocomplete-country {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

.tn-autocomplete-empty,
.tn-autocomplete-loading {
    padding: 12px 14px;
    color: #64748b;
    font-size: 13px;
}

.tn-db-autocomplete-input {
    position: relative;
    z-index: 1;
}

.tn-booking,
.tn-booking__content,
.custom-flight-panel,
.tab-content,
.tab-pane {
    overflow: visible !important;
}

/* Added styling for relative wrapper and clear inputs */
.tn-autocomplete-field {
    position: relative;
}

.tn-input-clear-btn {
    position: absolute;
    right: 14px;
    top: 70%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #a0aec0;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    display: none;
    padding: 0;
    line-height: 1;
}

    .tn-input-clear-btn:hover {
        color: #e53e3e;
    }

/* Force cursor pointer on calendar input fields and datepicker pickers */
.tn-date {
    cursor: pointer !important;
}

.datepicker, .datepicker table, .datepicker td, .datepicker th {
    cursor: pointer !important;
}


/* flight search on Result.cshtml page*/

/*
    ============================================================
    RESULT PAGE FLIGHT SEARCH PANEL
    ============================================================

    This is the small flight-search form shown on the result page.
    It reuses the same autocomplete endpoint as Index.cshtml:
        /TravelportLookup/Airports?term=...

    It supports:
        OneWay
        RoundTrip
        MultiLeg

    NOTE:
    We use "result-" prefixes on IDs/classes to avoid conflicts with
    Index.cshtml and with the main template scripts.
*/

.result-flight-search-panel {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.result-flight-search-panel__title {
    margin-bottom: 16px;
}

    .result-flight-search-panel__title h4 {
        margin-bottom: 4px;
        font-size: 18px;
        font-weight: 900;
        color: #07105f;
        text-transform: none;
    }

    .result-flight-search-panel__title p {
        margin-bottom: 0;
        font-size: 13px;
        color: #64748b;
    }

.result-flight-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
    margin-bottom: 14px;
}

.result-flight-field {
    position: relative;
    flex: 1;
}

    .result-flight-field.is-small {
        flex: 0 0 165px;
    }

    .result-flight-field label {
        display: block;
        margin-bottom: 7px;
        font-size: 12px;
        font-weight: 800;
        color: #475569;
    }

    .result-flight-field i {
        position: absolute;
        left: 14px;
        bottom: 14px;
        color: #94a3b8;
        z-index: 2;
        pointer-events: none;
    }

.result-flight-input,
.result-flight-select {
    width: 100%;
    height: 45px;
    background: #f5f7fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 38px 0 42px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
}

.result-flight-select {
    padding-left: 14px;
    cursor: pointer;
}

    .result-flight-input:focus,
    .result-flight-select:focus {
        background: #ffffff;
        border-color: #0064e6;
        box-shadow: 0 0 0 3px rgba(0, 100, 230, 0.1);
    }

.result-flight-date {
    cursor: pointer !important;
}

.result-flight-trip-types {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 16px;
}

    .result-flight-trip-types label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 800;
        color: #475569;
    }

    .result-flight-trip-types input {
        accent-color: #0064e6;
    }

.result-clear-btn {
    position: absolute;
    right: 11px;
    bottom: 11px;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: none;
    z-index: 5;
    padding: 0;
    line-height: 1;
}

    .result-clear-btn:hover {
        color: #e53e3e;
    }

.result-swap-btn {
    width: 42px;
    height: 45px;
    border: 1px solid #e2e8f0;
    background: #f5f7fa;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
    flex: 0 0 42px;
}

    .result-swap-btn:hover {
        background: #0064e6;
        color: #ffffff;
        border-color: #0064e6;
    }

.result-flight-passengers {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.result-flight-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 12px;
}

.result-search-btn {
    height: 45px;
    border: 0;
    border-radius: 8px;
    padding: 0 32px;
    background: #0064e6;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

    .result-search-btn:hover {
        background: #0052cc;
    }

.result-add-leg-btn {
    height: 38px;
    border-radius: 8px;
    border: 1px dashed #0064e6;
    background: #f8fbff;
    color: #0064e6;
    font-size: 13px;
    font-weight: 800;
    padding: 0 16px;
    cursor: pointer;
}

.result-remove-leg-btn {
    position: absolute;
    right: -8px;
    top: -8px;
    border: 0;
    background: #ef4444;
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 22px;
}

.result-multileg-wrapper {
    display: none;
    margin-top: 8px;
}

.result-multileg-row {
    position: relative;
    padding: 14px;
    margin-bottom: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

/*
    Autocomplete flyout for result page search.
    It is appended to document.body by JavaScript so it appears above filters/cards.
*/
.tn-autocomplete-flyout {
    position: fixed;
    z-index: 2147483647;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    display: none;
}

.tn-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
}

    .tn-autocomplete-item:last-child {
        border-bottom: none;
    }

    .tn-autocomplete-item:hover,
    .tn-autocomplete-item.active {
        background: #f3f7ff;
    }

.tn-autocomplete-code {
    font-weight: 700;
    color: #0057d9;
    margin-right: 8px;
    font-size: 13px;
}

.tn-autocomplete-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 13px;
}

.tn-autocomplete-country {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

.tn-autocomplete-empty,
.tn-autocomplete-loading {
    padding: 12px 14px;
    color: #64748b;
    font-size: 13px;
}

@media (max-width: 991px) {
    .result-flight-row {
        flex-direction: column;
        align-items: stretch;
    }

    .result-flight-field.is-small {
        flex: 1;
    }

    .result-swap-btn {
        width: 100%;
        flex: none;
    }

    .result-flight-actions {
        justify-content: stretch;
    }

    .result-search-btn {
        width: 100%;
    }
}



/*
    ============================================================
    SORT BUTTONS: CHEAPEST / FASTEST / BEST
    ============================================================

    These buttons sort the flight result cards on the client side.

    Cheapest:
        Lowest Naira price first.

    Fastest:
        Shortest journey duration first.

    Best:
        Balanced sorting using price + duration + number of stops.

    The buttons work together with the sidebar filters.
*/

.flight-sort-bar {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.flight-sort-label {
    font-size: 12px;
    font-weight: 900;
    color: #8a8177;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-right: 4px;
}

.flight-sort-btn {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    border-radius: 999px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s ease;
}

    .flight-sort-btn:hover {
        border-color: #003b95;
        color: #003b95;
    }

    .flight-sort-btn.active {
        background: #003b95;
        border-color: #003b95;
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(0, 59, 149, 0.24);
    }

@media (max-width: 575px) {
    .flight-sort-bar {
        align-items: stretch;
    }

    .flight-sort-btn {
        flex: 1;
        padding-left: 12px;
        padding-right: 12px;
    }
}