/*==================================
BOOKING HERO
==================================*/

.booking-hero{

position:relative;

height:340px;

overflow:hidden;

display:flex;

align-items:center;

}

.booking-hero img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}

.booking-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.booking-hero-content{

position:relative;

z-index:2;

color:white;

}

.booking-hero-content h1{

font-size:60px;

margin-bottom:18px;

font-weight:800;

}

.breadcrumb{

display:flex;

align-items:center;

gap:10px;

font-size:16px;

}

.breadcrumb a{

color:white;

}

.breadcrumb span{

color:#A7F3D0;

}

/*==================================
BOOKING STEPS
==================================*/

.booking-steps{

background:white;

padding:35px 0;

}

.steps{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

}

.steps::before{

content:"";

position:absolute;

top:22px;

left:0;

width:100%;

height:2px;

background:#E5E7EB;

z-index:1;

}

.step{

position:relative;

z-index:2;

display:flex;

flex-direction:column;

align-items:center;

flex:1;

}

.step span{

width:46px;

height:46px;

border-radius:50%;

background:#E5E7EB;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

color:#475569;

margin-bottom:12px;

}

.step p{

font-size:15px;

font-weight:600;

color:#64748B;

}

.step.active span{

background:#0F766E;

color:white;

}

.step.active p{

color:#0F766E;

}

/*=====================================
BOOKING PAGE
=====================================*/

.booking-page{

    padding:80px 0;

    background:#f8f9fb;

}

.booking-card{

    max-width:1100px;

    margin:auto;

    background:#fff;

    border-radius:20px;

    padding:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.booking-section{

    margin-top:40px;

}

.booking-section h3{

    font-size:28px;

    color:#0d8b7d;

    margin-bottom:25px;

    font-weight:700;

}
/*=====================================
PACKAGE HEADER
=====================================*/

.booking-header{

    display:flex;

    gap:25px;

    align-items:center;

    margin-bottom:40px;

}

.booking-header img{

    width:220px;

    height:160px;

    object-fit:cover;

    border-radius:15px;

}

.booking-header h2{

    font-size:34px;

    color:#222;

    margin-bottom:10px;

}

.booking-header p{

    color:#666;

    font-size:17px;

    margin:8px 0;

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

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}
/*=====================================
FORM
=====================================*/

.booking-section label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:#333;

}

.booking-section input,
.booking-section select{

    width:100%;

    height:55px;

    border:1px solid #ddd;

    border-radius:12px;

    padding:0 18px;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.booking-section input:focus,
.booking-section select:focus{

    border-color:#0d8b7d;

}
/*=====================================
ITINERARY
=====================================*/

.itinerary-day{

    display:flex;

    gap:25px;

    align-items:center;

    background:#fff;

    border:1px solid #e5e5e5;

    border-radius:18px;

    padding:25px;

    margin-bottom:20px;

}

.day-number{

    width:110px;

    min-width:110px;

    background:#0b2341;

    color:#fff;

    border-radius:16px;

    text-align:center;

    padding:25px 10px;

}

.day-number h4{

    font-size:28px;

    margin:0;

}

.day-number p{

    margin-top:8px;

    font-size:16px;

}

.day-details{

    flex:1;

    display:grid;

    grid-template-columns:1fr 1fr 180px;

    gap:20px;

    align-items:end;

}
#addDayBtn{

    width:100%;

    height:60px;

    border:2px dashed #d8b36a;

    background:#fff;

    color:#b8860b;

    border-radius:15px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

#addDayBtn:hover{

    background:#fdf7ea;

}
/*=====================================
VEHICLES
=====================================*/

.vehicle-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.vehicle-card{

    position:relative;

    border:2px solid #e5e5e5;

    border-radius:18px;

    padding:25px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

    background:#fff;

}

.vehicle-card:hover{

    transform:translateY(-5px);

    border-color:#0d8b7d;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.vehicle-card img{

    width:100%;

    height:160px;

    object-fit:contain;

    margin:15px 0;

}

.vehicle-card h4{

    margin-bottom:8px;

    color:#222;

}

.vehicle-card p{

    color:#666;

    font-size:15px;

}

.vehicle-card input{

    position:absolute;

    top:18px;

    right:18px;

}

.vehicle-dropdown{

    display:none;

    margin-top:20px;

}

.vehicle-dropdown select,

.vehicle-dropdown input{

    margin-top:12px;

}
/*==============================
PAYMENT MODAL
==============================*/

.payment-modal{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.55);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.payment-box{

    width:500px;

    max-width:90%;

    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:20px;

    padding:30px;

    position:relative;

    animation:popup .25s ease;

}

@keyframes popup{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

#closePayment{

    position:absolute;

    right:20px;

    top:15px;

    font-size:30px;

    cursor:pointer;

    font-weight:bold;

}

.payment-summary{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin:25px 0;

}

.payment-summary div{

    display:flex;

    justify-content:space-between;

    font-size:17px;

}

#paymentQR{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:25px 0;

}

#paymentQR canvas,
#paymentQR img{

    width:220px !important;

    height:220px !important;

}

.payment-box input{

    width:100%;

    padding:14px;

    border:1px solid #ddd;

    border-radius:10px;

    margin-bottom:15px;

}

#submitBooking{

    width:100%;

    padding:16px;

    border:none;

    border-radius:10px;

    background:#0f766e;

    color:#fff;

    font-size:18px;

    cursor:pointer;

}