/* =========================
   BOOKING CARD
========================= */

.booking-card{
    background:#F7F5EF;
    border-radius:28px;
    padding:25px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
    position:relative;
    overflow:visible;
    width:100%;
    max-width:1200px;
    margin:auto;
}

/* =========================
   TABS
========================= */

.booking-tabs{
    display:flex;
    gap:10px;
    margin-bottom:10px;
}

.tab-btn{
    border:none;
    background:#DCE7EF;
    color:#333;
    padding:8px 90px;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.tab-btn:hover{
    background:#2A7FB8;
}

.tab-btn.active{
    background:#C89154;
    color:#fff;
}

.tab-btn i{
    margin-right:8px;
}

/* =========================
   TRIP TYPE
========================= */

.trip-selector{
    display:flex;
    gap:35px;
    margin-bottom:10px;
    flex-wrap:wrap;
}

.trip-selector label{
    font-weight:600;
    cursor:pointer;
color:#0B5D8B;
}

.trip-selector input{
    margin-right:6px;
}

/* =========================
   GRID
========================= */

.airports-row{
    display:grid;
    grid-template-columns:
        1fr 80px 1fr;
    gap:10px;
    margin-bottom:10px;
}

.date-grid{
    display:grid;
    grid-template-columns:
        1fr 1fr;
    gap:20px;
    margin-top:5px;
}

.options-grid{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(180px,1fr));
    gap:10px;
    margin-top:10px;
}






/* =========================
   FIELDS
========================= */

.field{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.field label,
.passenger-box label{
    margin-bottom:6px;
    font-size:14px;
    font-weight:700;
    color:#0B5D8B;
}

.field input,
.field select,
.field button,
#passengerToggle{
    width:100%;
    height:40px;
    border:1px solid #2A7FB8;
    border-radius:14px;
    padding:0 8px;
    font-size:16px;
    box-sizing:border-box;
}

.field input:focus,
.field select:focus{
    border-color:#2A7FB8;
    outline:none;
    box-shadow:0 0 0 4px rgba(0,123,255,.12);
}

/* =========================
   AIRPORT INPUTS
========================= */

.airport-wrapper{
    position:relative;
}

.airport-dropdown{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border-radius:14px;
    box-shadow:0 15px 50px rgba(0,0,0,.12);
    display:none;
    z-index:1000;
    overflow:hidden;
    margin-top:4px;
}

.airport-item{
    padding:4px 4px;
    cursor:pointer;
    transition:.3s;
}

.airport-item:hover{
    background:#f6f9ff;
}

.airport-item strong{
    display:block;
    font-size:14px;
}

.airport-item span{
    color:#777;
    font-size:13px;
}

/* =========================
   SWAP BUTTON
========================= */

.swap-btn-wrapper{
    display:flex;
    justify-content:center;
    align-items:end;
}

#swapAirports{
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#2A7FB8;
    font-size:22px;
    cursor:pointer;
    transition:.3s;
    color:#fff;
}

#swapAirports:hover{
    background:#007bff;
    color:#fff;
    transform:rotate(180deg);
}

/* =========================
   MULTI CITY SEGMENT
========================= */

.segment{
    background:#ffffff;
    border:1px solid #dfe7f3;
    border-radius:20px;
    padding:10px;
    margin-bottom:10px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.8s;
}

.segment:hover{
    box-shadow:0 12px 35px rgba(0,0,0,.10);
    border-color:#0b6fb8;
}

.segment h5{
    margin:0 0 5px;
    font-size:18px;
    font-weight:700;
    color:#0b6fb8;
    display:flex;
    align-items:center;
    gap:5px;
}

.segment h5::before{
    content:"✈";
    font-size:18px;
}

.segment .airports-row{
    margin-bottom:10px;
}

.segment .date-grid{
    margin-top:0;
}

.segment .field input,
.segment .field select{
    height:30px;
    border:1px solid #0B5D8B;
    border-radius:14px;
    background:#fff;
    transition:.3s;
}

.segment .field input:focus{
    border-color:#0b6fb8;
    box-shadow:0 0 0 4px rgba(11,111,184,.12);
}

.segment .swapSegment{
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#edf7fd;
    color:#0b6fb8;
    font-size:18px;
    cursor:pointer;
    transition:.3s;
}

.segment .swapSegment:hover{
    background:#0b6fb8;
    color:#fff;
    transform:rotate(180deg);
}


/* =========================
  ADD FLIGHT BUTTON
========================= */



.add-flight-btn{
    width:100%;
    margin-top:12px;
    height:46px;
    border:none;
    border-radius:12px;
    background:#007bff;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.add-flight-btn{
    background:#0069d9;
}

.add-flight-btn{
    transform:scale(0.98);
}



/* =========================
   PASSENGERS
========================= */

.passenger-box{
    position:relative;
}

#passengerToggle{
    width:100%;
    height:40px;
    border:1px solid #2A7FB8;
    border-radius:12px;
    background:#fff;
    text-align:left;
    padding:0 15px;
}

.passenger-popup{
    position:absolute;
    top:100%;
    left:0;
    width:320px;
    background:#fff;
border:1px solid #2A7FB8;
    border-radius:16px;
    padding:10px;
    margin-top:2px;
    box-shadow:0 15px 50px rgba(0,0,0,.12);
    display:none;
    z-index:1000;
}
.hotelGuestPopup{
    position:absolute;
    top:100%;
    left:0;
    width:320px;
    background:#fff;
border:1px solid #2A7FB8;
    border-radius:16px;
    padding:10px;
    margin-top:4px;
    box-shadow:0 15px 50px rgba(0,0,0,.12);
    display:none;
    z-index:1000;
}

.counter{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:2px;
}

.counter:last-child{
    margin-bottom:0;
}

.counter span{
    min-width:30px;
    text-align:center;
    font-weight:600;
}

.counter button{
    width:34px;
    height:28px;
    border:none;
    border-radius:50%;
    background:#eef4ff;
    color:#007bff;
    cursor:pointer;
}

.counter button:hover{
    background:#007bff;
    color:#fff;
}

.hotel-btn{
    width:100%;
    margin-top:12px;
    height:46px;
    border:none;
    border-radius:12px;
    background:#007bff;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.done-btn{
    width:100%;
    margin-top:4px;
    height:46px;
    border:none;
    border-radius:12px;
    background:#007bff;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.done-btn:hover{
    background:#0069d9;
}

.done-btn:active{
    transform:scale(0.98);
}
/* =========================
   CHECKBOX GROUP
========================= */

.checkbox-group{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
}

.checkbox-option{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    border:1px solid #2A7FB8;
    border-radius:14px;
    background:#fff;
    transition:.3s;
}

.checkbox-option:hover{
    border-color:#0B5D8B;
    background:#F3F8FC;
}

.checkbox-option label{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    justify-content:center;
    cursor:pointer;
    font-weight:600;
    color:#0B5D8B;
    user-select:none;
}

.checkbox-option input[type="checkbox"]{
    width:18px;
    height:14px;
    accent-color:#C89154;
    cursor:pointer;
}
/* =========================
   RECENT SEARCHES
========================= */

.recent-searches{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #2A7FB8;
}

.recent-searches h5{
    margin-bottom:10px;
    font-weight:600;
}

.recent-search-item{
    background:#f7f9fc;
    padding:8px 12px;
    border-radius:10px;
    margin-bottom:8px;
    cursor:pointer;
    transition:25s;
 border:1px solid var(--border);
 border-left:5px solid var(--accent);
}

.recent-search-item:hover{
    background:#eef4ff;
}

/* =========================
   SEARCH BUTTON
========================= */

.search-btn{
    margin-top:25px;
    width:100%;
    height:58px;
    border:none;
    border-radius:14px;
    background:#007bff;
    color:#fff;
    font-size:16px;
    font-weight:600;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    cursor:pointer;
    transition:.3s;
}

.search-btn:hover{
    background:#0069d9;
}

/* =========================
   SPINNER
========================= */

.spinner{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .8s linear infinite;
    display:none;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

/* =========================
   HOTEL FORM
========================= */

#hotelSearch .search-grid{
    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));
}

/* =========================
   MOBILE
========================= */

@media(max-width:991px){

    .search-grid{
        grid-template-columns:1fr;
    }

    .swap-btn-wrapper{
        justify-content:center;
    }

    #swapAirports{
        transform:rotate(90deg);
    }

    .options-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .passenger-popup{
        width:100%;
        left:0;
    }

}

@media(max-width:576px){

    .booking-card{
        padding:20px;
    }

    .booking-tabs{
        flex-direction:column;
    }

    .trip-selector{
        gap:12px;
    }

}
    .options-grid{
        grid-template-columns:1fr;
    }


.counter{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #edf1f6;
}

.counter:last-child{
    border-bottom:none;
}

.counter strong{
    display:block;
    font-size:15px;
}

.counter small{
    color:#888;
    font-size:12px;
}

.counter-controls{
    display:flex;
    align-items:center;
    gap:12px;
}

.counter-controls span{
    min-width:25px;
    text-align:center;
    font-weight:600;
}

.counter-controls button{
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:#eef4ff;
    color:#007bff;
    cursor:pointer;
    transition:.3s;
}

.counter-controls button:hover{
    background:#007bff;
    color:#fff;
}



.flatpickr-input{
    cursor:pointer;
}

.flatpickr-calendar{
    border:none !important;
    border-radius:16px !important;
    box-shadow:0 15px 50px rgba(0,0,0,.15) !important;
}

.flatpickr-day.selected{
    background:#007bff !important;
    border-color:#007bff !important;
}


@media(max-width:991px){

    .airports-row{
        grid-template-columns:1fr;
    }

    .date-grid{
        grid-template-columns:1fr;
    }

    .swap-btn-wrapper{
        justify-content:center;
    }

    #swapAirports{
        transform:rotate(90deg);
    }

}




.airport-dropdown{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#fff;

    border-radius:14px;

    box-shadow:0 12px 35px rgba(0,0,0,.12);

    overflow-y:auto;

    max-height:350px;

    display:none;

    z-index:9999;

}

.airport-item{

    padding:12px 16px;

    cursor:pointer;

    border-bottom:1px solid #f2f2f2;

}

.airport-item:last-child{

    border-bottom:none;

}

.airport-item:hover{

    background:#eef7ff;

}

.airport-item strong{

    display:block;

    color:#0B5D8B;

    font-size:15px;

}

.airport-item span{

    display:block;

    font-size:13px;

    color:#666;

    margin-top:2px;

}