/* --- Base Structure (Keeping original logic) --- */
.clr { clear: both; }
.sliderbox { width: 100%; height: auto; padding: 0; margin: auto; position: relative; font-family: 'Inter', 'Segoe UI', sans-serif; }
.desktop_ticket { 
    position: absolute; 
    width: 100%; 
    height: auto; 
    padding: 0; 
    margin: auto; 
    /* Center it vertically */
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 10;
}
.mobile_ticket { display: none; }

/* --- Container & Fly Box --- */
.search-panel { width: 100%; height: auto; padding: 0 7%; margin: auto; }
.search-fly {
    width: 100%;
    padding: 0 25px 25px 25px;
    margin-top: 120px;
    /* Semi-transparent background */
    background: rgba(244, 249, 255, 0.75); 
    /* The magic "Blur" effect */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    /* Sharp white border looks like glass edges */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-radius: 12px; /* Subtle rounding is better than sharp corners */
}
.form_sec { background: none; width: 100%; padding: 11px 10px; border-radius: 0; }
.flight-row { 
    width: 100%; 
    height: auto; 
    padding: 15px 20px; 
    margin: auto; 
    background: #ffffff; 
    /*border-radius: 20px; */
    box-shadow: 0 2px 10px rgba(0, 99, 219, 0.05);
}
/* --- Form Controls --- */
.flight_shedule .form-control::placeholder { 
    color: #99aab5; 
}

.flight_shedule input.form-control { 
    font-size: 15px; 
    font-weight: 500; 
    height: 48px; 
    border: none; 
    background: transparent; 
    transition: all 0.3s; 
}

.search-fly .form-group { 
    margin-right: 10px; 
    display: inline-block; 
    margin-bottom: 0; 
}

.form-control:focus { 
    border-color: transparent; 
    box-shadow: none; 
    outline: none; 
}

/* --- Layout Columns (Fixed Original Widths) --- */
.flight-row .searchcol-1 { 
    width: 20%; 
    height: auto; 
    padding: 0; 
    margin: auto; 
    float: left; 
    position: relative; 
}

.flight-row .searchcol-2 { 
    width: 7%; 
    height: auto; 
    padding: 12px 2% 0 0; 
    margin: auto; 
    float: left; 
    position: relative; 
}

.flight-row .searchcol-3 { 
    width: 20%; 
    height: auto; 
    padding: 0; 
    margin: auto; 
    float: left; 
    border-right: solid 1px #edf2f7; 
    position: relative; 
}

.flight-row .searchcol-4 { 
    width: 18%; 
    height: auto; 
    padding: 0 0 0 4%; 
    margin: auto; 
    float: left; 
    position: relative; 
}

.flight-row .searchcol-5 { 
    width: 19%; 
    height: auto; 
    padding: 0 0 0 4%; 
    margin: auto; 
    float: left; 
    position: relative; 
}

.flight-row .searchcol-6 { 
    width: 16%; 
    height: auto; 
    padding: 1px 0 0 0; 
    margin: auto; 
    float: left; 
}
/* --- Select Styling --- */
#FormControlSelect1 {
    height: 48px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding-left: 45px !important;
    padding-right: 30px !important;
    background-color: transparent !important;
    background-image: url(https://scancheapflights.com/images/flight-icon.png), 
                      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 8px center, right 12px center !important;
    background-size: 26px, 12px !important;
    border: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none;
}

#FormControlSelect2 { background-image: url(https://scancheapflights.com/images/adult.png); background-repeat: no-repeat; background-size: 15%; background-position: 4% 50%; padding-left: 30px; }
#FormControlSelect3 { background-image: url(https://scancheapflights.com/images/seat.png); background-repeat: no-repeat; background-size: 15%; background-position: 4% 50%; padding-left: 30px; }

select.form-control { font-size: 15px; font-weight: 500; height: 48px; border: none; background: none; }

#FormControlInput3, #FormControlInput2, #FormControlInput1 { background-repeat: no-repeat; background-size: 22px; background-position: 1% 50%; padding-left: 45px; outline: none; transition: 0.3s; }
#FormControlInput1 { background-image: url(https://scancheapflights.com/images/take-flight.png); }
#FormControlInput2 { background-image: url(https://scancheapflights.com/images/land-flight.png); }

.NumberofTraveler {
    height: 48px !important;
    width: 180px !important; 
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding-left: 35px !important;
    padding-right: 30px !important;
    background-color: transparent !important;
    background-image: url(https://scancheapflights.com/images/traveller-icon.png), 
                      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 8px center, right 12px center !important;
    background-size: 26px, 12px !important;
    border: none !important;
    outline: none !important;
}

/* --- Specific Classes --- */
.flight-row .sFromTbox { width: 100%; height: auto; padding: 12px 7px 12px 35px; margin: auto; background: url(https://scancheapflights.com/images/take-flight.png) no-repeat center left; border: none; outline: none; }
.flight-row .sToTbox { width: 100%; height: auto; padding: 12px 7px 12px 35px; margin: auto; background: url(https://scancheapflights.com/mages/land-flight.png) no-repeat center left; border: none; outline: none; }
.search-reverse { width: 25px; height: auto; padding: 0; margin: auto; transition: 0.3s; cursor: pointer; }
.search-reverse:hover { transform: rotate(180deg); opacity: 0.8; }
.search-reverse img { width: 100%; height: auto; }

.flight-row .sDepartDTbox, .flight-row .sRerurnDTbox { width: 100%; height: auto; padding: 12px 7px 12px 35px; margin: auto; background: url(https://scancheapflights.com/images/calander-icon.png) no-repeat center left; background-size: 22px !important; border: none; outline: none; }

/* --- Search Button --- */
.flight-row .sf_button {
    width: 100%; height: auto; padding: 12px 15px; margin: 2px auto 0 auto;
    /* Color Change: Red to Black Gradient */
    background: linear-gradient(135deg, #dc3545 0%, #00467f 100%);
    border-radius: 14px; font-size: 16px; color: #ffffff; border: none; font-weight: 600;
    /* Color Change: Red Shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease !important;
}

.flight-row .sf_button:hover { 
    /* Color Change: Solid Black or deep burgundy feel */
    background: linear-gradient(135deg, #00467f 0%, #dc3545 100%); 
    transform: translateY(-1px); 
    /* Color Change: Stronger Red Shadow on Hover */    
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4); 
    cursor: pointer; 
}

.flight-row .sf_button .fa { 
    position: relative; top: 3px; left: -5px; 
}
/* --- Passenger Box --- */
.adult { width: 180px; padding: 15px; background: #fff; border: none; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: none; position: absolute; z-index: 100; }
.traveler-label { margin-bottom: 5px; font-size: 13px; font-weight: 500; color: #666; }
.sliderbox .btn { transition: all 0.4s ease-in-out; background-color: #00467f; padding: 5px 12px; border-radius: 5px; }
.sliderbox .btn:hover { background-color: #00467f; color: #fff; }

.ntravellers { width: 60px; padding: 0 0 0 25px; margin: 0 5px 0 0; border: solid 1px #e1e1e1; border-radius: 4px; }
.qtyminus, .qtyminus1, .qtyminus2, .qtyplus, .qtyplus1, .qtyplus2 { width: 35px; padding: 0 !important; margin: 0 5px 0 0; color: #fff; background: #00467f; border: none; border-radius: 4px; transition: 0.2s; }
[class*="qty"]:hover { background-color: #00467f !important; color: #fff !important; }
.bootstrap-touchspin { margin: 0 0 5px 0; }
.closedropdown { font-size: 13px; color: #00467f; font-weight: 600; text-decoration: none; }

/* --- Select 3 & Focus States --- */
.ipt3 {
    height: 48px !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; padding-left: 35px !important; padding-right: 30px !important; background-color: transparent !important;
    background-image: url(https://scancheapflights.com/images/class-icon.png), 
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important; background-position: 8px center, right 12px center !important; background-size: 26px, 12px !important; border: none !important; outline: none !important; appearance: none !important; -webkit-appearance: none;
}
#search-box { padding: 30px; border: #e0e0e0 1px solid; border-radius: 12px; }

#FormControlSelect1:focus, 
.NumberofTraveler:focus, 
.ipt3:focus {
    background-color: #ffffff !important;
    color: #dc3545 !important;
    box-shadow: 0 8px 25px rgba(0, 99, 219, 0.15) !important; 
    border-radius: 10px !important;
    border: none !important;
    outline: none !important;
    transition: all 0.3s ease;
}/* ----- Country Listing & Autocomplete Modernized ----- */
#country-list, #country-list1 {
    padding: 5px 0;
    width: 300px;
    margin-top: 45px;
    position: absolute;
    left: -24px;
    float: left;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 999;
}

#country-list li {
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    transition: all 0.2s ease;
}

#country-list li:hover {
    background: #f0f7ff;
    color: #dc3545;
    cursor: pointer;
}

.ui-autocomplete {
    float: left;
    list-style: none;
    padding: 8px 0;
    width: 380px;
    position: absolute;
    margin-top: 30px;
    left: -24px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 9999;
}

.ui-menu .ui-menu-item {
    padding: 0px !important;
    background: #fff;
    border-bottom: 1px solid #f8f9fa;
}

.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 8px 15px;
    transition: background 0.2s;
}

.ui-menu .ui-menu-item:hover, 
.ui-menu .ui-menu-item-wrapper:hover {
    background: #f4f9ff !important;
    cursor: pointer;
}

/* --- Search Result Row Interior --- */
.select-airport { font: bold 16px 'Segoe UI', Arial; color: #1a1c1e; margin-top: 2px; }
.select-city { font: 500 12px 'Segoe UI', Arial; color: #dc3545; margin-top: 1px; }
.select-icon { color: #dc3545; margin-top: 6px; font: normal 14px Arial; opacity: 0.7; }

.fsrow { padding: 10px 15px; margin: 0; background: #fff; transition: background 0.2s; }
.fsrow:hover { background: #f4f9ff; }
.fs-col1 { width: 20%; height: auto; float: left; }
.fs-col2 { width: 60%; height: auto; float: left; }
.fs-col3 { width: 20%; height: auto; float: left; text-align: right; }

/* ----- Media Query: Tablet/Small Desktop ----- */
@media (min-width: 1000px) and (max-width: 1200px) {
    .search-panel { width: 100%; height: auto; padding: 0 2%; margin: auto; }
    .flight-row .sf_button { width: 100%; height: auto; padding: 12px 5%; margin: 2px auto 0 auto; font-size: 14px; }
 }

/* ----- Media Query: Mobile Modernization ----- */
@media (min-width: 300px) and (max-width: 993px) {
    .desktop_ticket { display: none; }
    .mobile_ticket { display: block; }

    .search-fly { 
        margin-top: -30px; 
        padding: 20px; 
        box-shadow: 0 8px 30px rgba(0,0,0,0.1); 
        background-color: #fff; 
        border-radius: 15px; 
    }
    
    .form_sec { background: #fff; width: 100%; padding: 8px 0px; border-radius: 0; }
    .tab-content { padding: 15px 15px 0px 15px; }
    .search-fly .form-group { width: 100%; border-bottom: solid 1px #f5f5f5; padding: 0 0 10px 0; margin: 0 0 15px 0; }

    .search-from { width: 45%; height: 50px; float: left; position: relative; }
    .search-reverse { width: 10%; height: auto; float: left; text-align: center; }
    .search-reverse img { width: 28px; height: auto; margin: 18px 0 8px 0; transition: transform 0.3s; }
    
    .search-from1 { width: 50%; height: auto; float: left; position: relative; }
    .search-label-top { width: 100%; font-size: 12px; color: #8e96a3; font-weight: 600; text-transform: uppercase; }
    .search-label-topr { width: 100%; font-size: 12px; color: #8e96a3; text-align: right; font-weight: 600; text-transform: uppercase; }

    .mobile_ticket .form-control { width: 100%; padding: 8px 0; border: none !important; background: none; font-weight: 600; }
    
    .NumberofTraveler { 
        width: 90% !important; 
        margin: 0 0 0 10%; 
        border: none; 
        background: #fff url(https://scancheapflights.com/images/traveller-arrow.png) no-repeat !important; 
        background-position: 98% center !important; 
        background-size: 9px !important; 
    }

    .fs-btn { 
        width: 100%; 
        height: 54px; 
        color: #ffffff; 
        background: linear-gradient(135deg, #dc3545 0%, #00467f 100%); 
       /* border-radius: 12px;*/
        font-size: 18px; 
        font-weight: 600; 
        border: none;
        box-shadow: 0 5px 15px rgba(0,99,219,0.3);
    }
    
    .fs-btn:hover { background: #00467f; }

    /* 1. Elevate the entire search container */
    .search-fly, .desktop_ticket, .mobile_ticket {
        position: relative;
        z-index: 1000 !important; /* Forces the whole search block to a high layer */
    }

    /* 2. Elevate the row containing the inputs */
    .flight-row {
        position: relative;
        z-index: 1010 !important;
        overflow: visible !important; /* Allows the dropdown to spill out */
    }

    /* 3. Force the dropdown to the absolute front */
    .adult, #country-list, .ui-autocomplete {
        z-index: 999999 !important;
        background: #ffffff !important; /* Ensure it's not transparent */
        opacity: 1 !important;
    }
}

/* --- Mobile Suggestion Box Positioning --- */
@media (min-width: 300px) and (max-width: 993px) {
    .suggesstion-boxs {
    position: relative !important;
    z-index: 9999; 
    }
    #country-list { width: 100% !important; left: 0 !important; margin-top: 5px !important; }
    
    .adult { 
            width: 100% !important; 
            max-width: 320px; 
            position: absolute;
            left: 0; 
            right: 0;
            margin: 10px auto 0 auto; 
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2); 
            padding: 20px;
            display: none; 
            z-index: 9999; 
        }

        /* Force the counter row to be a single horizontal line */
        .bootstrap-touchspin { 
            display: flex !important;
            flex-direction: row !important; /* Forces horizontal */
            flex-wrap: nowrap !important;  /* Prevents jumping to next line */
            align-items: center;
            justify-content: center; /* Centers the whole group */
            margin-bottom: 15px; 
            width: 100%;
        }
        

        .form-inline label {display: inline-block;} 

        /* Standardize all buttons and inputs to prevent stacking */
        .qtyminus, .qtyplus, .qtyminus1, .qtyplus1, .qtyminus2, .qtyplus2, .ntravellers, .traveller-tb {
            display: inline-flex !important; /* Essential for flex alignment */
            float: none !important;          /* Kills any old float logic */
            margin: 0 2px !important;        /* Small gap between buttons */
        }

        /* Button Sizing */
        .qtyminus, .qtyplus, .qtyminus1, .qtyplus1, .qtyminus2, .qtyplus2 {
            width: 40px !important;
            height: 40px !important;
            font-size: 18px;
            align-items: center;
            justify-content: center;
            border-radius: 6px !important;
        }

        /* Number Input Sizing */
        .ntravellers, .traveller-tb {
            width: 60px !important;
            height: 40px !important;
            text-align: center;
            border: 1px solid #d1d9e0 !important;
            border-radius: 6px;
            padding: 0 !important;
            background: #fdfdfd;
        }
    }

/* --- Dynamic Adjustments for Specific Mobile Widths --- */
@media (min-width: 481px) and (max-width: 993px) {
    #country-list1 { left: -70% !important; top: -5px !important; }
}

@media (min-width: 390px) and (max-width: 481px) {
    #country-list1 { left: -120% !important; top: -5px !important; }
}

@media (min-width: 300px) and (max-width: 390px) {
    #country-list1 { width: 280px !important; left: -130% !important; top: -5px !important; }
}

/* --- Footer/Header Utilities --- */
.socialMedia { display: block; }
.header-email { display: inline-block; }

@media (min-width: 300px) and (max-width: 769px) {
    .socialMedia { display: none; }
    .header-email { display: none; }
}