/* ==========================================================================
   HOME PAGE FLIGHT SEARCH PANEL - REDESIGN
   Loaded only from Views/Home/Index.cshtml. Rules are scoped to the flight tab
   (#divTabFlight, which wraps Views/Shared/_SearchFlights.cshtml) plus the
   home-only .search_container. Markup, IDs, names and scripts are untouched.
   ========================================================================== */

/* ---------- Card ---------- */
.search_container .tab_full_container .tab-content {
    padding: 16px 20px 20px;
    background: rgba(255, 255, 255, .97);
    border-radius: 20px;
    box-shadow: 0 24px 50px rgba(11, 34, 51, .28), 0 2px 8px rgba(11, 34, 51, .08);
}

/* Sticky state (layout script adds .fixed after scrolling 400px): navy bar to match the result page */
.search_container.fixed {
    padding: 10px 0;
    background: linear-gradient(135deg, #12324a 0%, #0b2233 100%);
    box-shadow: 0 10px 24px rgba(11, 34, 51, .3);
}

/* ---------- Trip type: segmented pills ---------- */
#divTabFlight .form_full .radio-full {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

#divTabFlight .radio-full .radio-inline {
    margin: 0;
    padding: 0;
}

    #divTabFlight .radio-full .radio-inline [type=radio]:checked + label,
    #divTabFlight .radio-full .radio-inline [type=radio]:not(:checked) + label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 16px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        color: #3b4a57;
        background: #f3f6f8;
        border: 1px solid #e1e8ed;
        border-radius: 999px;
        transition: background-color .2s, color .2s, border-color .2s;
    }

        #divTabFlight .radio-full .radio-inline [type=radio]:not(:checked) + label:hover {
            border-color: #a9cfcf;
            background: #eef6f6;
        }

    #divTabFlight .radio-full .radio-inline [type=radio]:checked + label {
        color: #fff;
        background: linear-gradient(135deg, #12324a 0%, #0b2233 100%);
        border-color: #12324a;
        box-shadow: 0 6px 14px rgba(11, 34, 51, .25);
    }

        /* Replace the old radio circle with a trip icon */
        #divTabFlight .radio-full .radio-inline [type=radio]:checked + label:before,
        #divTabFlight .radio-full .radio-inline [type=radio]:not(:checked) + label:before {
            position: static;
            width: auto;
            height: auto;
            font-family: FontAwesome;
            font-size: 13px;
            font-weight: normal;
            line-height: 1;
            color: inherit;
            background: none;
            border: 0;
            border-radius: 0;
        }

        #divTabFlight .radio-full #chkRoundTrip1 + label:before {
            content: "\f0ec";
        }

        #divTabFlight .radio-full #chkOneWay1 + label:before {
            content: "\f178";
        }

        #divTabFlight .radio-full .radio-inline [type=radio]:checked + label:after,
        #divTabFlight .radio-full .radio-inline [type=radio]:not(:checked) + label:after {
            display: none;
        }

    #divTabFlight .radio-full .radio-inline [type=radio]:focus-visible + label {
        outline: 3px solid rgba(8, 113, 113, .3);
        outline-offset: 2px;
    }

/* Direct flights only */
#divTabFlight .form_full .radio-full .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 0 6px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #3b4a57;
}

    #divTabFlight .form_full .radio-full .checkbox-inline input[type=checkbox] {
        position: static;
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #087171;
        cursor: pointer;
    }

/* ---------- Fields ---------- */
#divTabFlight .form_full {
    margin-left: 4px;
    margin-right: 4px;
}

#divTabFlight .form-group {
    margin-bottom: 0;
}

    /* Label: small caps at the top-left of each field */
    #divTabFlight .form-group > label {
        top: 9px;
        left: 14px;
        width: auto;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: .8px;
        color: #6b7a86;
        pointer-events: none;
    }

    /* Icon: teal, aligned with the value line */
    #divTabFlight .form-group > span.icon {
        top: 30px;
        bottom: auto;
        left: 14px;
        z-index: 1;
        height: auto;
        font-size: 15px;
        line-height: 1;
        color: #087171;
        pointer-events: none;
    }

    #divTabFlight .form-group .form-control {
        height: 58px;
        line-height: normal;
        padding: 24px 12px 6px 36px;
        font-size: 15px;
        font-weight: 600;
        color: #1d2b36;
        background-color: #f7f9fb;
        border: 1px solid #dfe6eb;
        border-radius: 12px;
        box-shadow: none;
        transition: border-color .2s, box-shadow .2s, background-color .2s;
    }

        #divTabFlight .form-group .form-control::placeholder {
            line-height: normal;
            font-weight: 500;
            color: #9aa7b1;
        }

        #divTabFlight .form-group .form-control:hover {
            border-color: #a9cfcf;
        }

        #divTabFlight .form-group .form-control:focus,
        #divTabFlight .form-group .form-control.f-traveller[aria-expanded="true"] {
            background-color: #fff;
            border-color: #087171;
            box-shadow: 0 0 0 3px rgba(8, 113, 113, .15);
        }

        /* Traveller(s) / Cabin Class (div-based "fields" without an icon) */
        #divTabFlight .form-group .form-control.f-traveller {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            padding: 0 22px 9px 12px;
            font-size: 14px;
            line-height: normal;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
            background-position: right 8px center;
        }

        /* The Traveller(s) column is only 10% wide - keep its label from crowding */
        #divTabFlight #divFlightPax > label {
            left: 12px;
            letter-spacing: .4px;
        }

/* ---------- Search button ---------- */
#divTabFlight .search-button {
    margin-left: 4px;
    margin-right: 4px;
}

    #divTabFlight .search-button .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 58px;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: .5px;
        color: #fff;
        background: linear-gradient(135deg, #f9a03f 0%, #f7931e 40%, #e8641a 100%);
        border: 0;
        border-radius: 12px;
        box-shadow: 0 10px 22px rgba(232, 100, 26, .35);
        transition: transform .15s, box-shadow .2s;
    }

        #divTabFlight .search-button .btn:hover,
        #divTabFlight .search-button .btn:focus {
            color: #fff;
            background: linear-gradient(135deg, #f9a03f 0%, #f7931e 40%, #e8641a 100%);
            transform: translateY(-1px);
            box-shadow: 0 14px 26px rgba(232, 100, 26, .45);
        }

        #divTabFlight .search-button .btn:focus-visible {
            outline: 3px solid rgba(232, 100, 26, .4);
            outline-offset: 2px;
        }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 767px) {
    .search_container .tab_full_container .tab-content {
        padding: 14px 12px 16px;
        border-radius: 16px;
    }

    /* Fields wrap into rows on phones - add a gap between rows */
    #divTabFlight .row-custom .width_large,
    #divTabFlight .row-custom .width_medium,
    #divTabFlight .row-custom .width_small {
        margin-bottom: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #divTabFlight .search-button .btn,
    #divTabFlight .form-group .form-control,
    #divTabFlight .radio-full .radio-inline label {
        transition: none;
    }
}