/* =========================================================
   AZTRANSFER PREMIUM GLOBAL DESIGN
   UI ONLY — NO BOOKING / QUOTE / PAYMENT LOGIC CHANGES
   ========================================================= */

:root{
    --az-navy:#0b1728;
    --az-blue:#1264d8;
    --az-blue-dark:#0849a5;
    --az-text:#152033;
    --az-muted:#64748b;
    --az-border:#e5eaf1;
    --az-bg:#f7f9fc;
    --az-white:#ffffff;
    --az-radius:18px;
    --az-shadow:0 12px 35px rgba(15,35,65,.09);
    --az-shadow-hover:0 20px 50px rgba(15,35,65,.15);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--az-bg);
    color:var(--az-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    -webkit-font-smoothing:antialiased;
}

img{
    max-width:100%;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.container,
.az-container,
.vehicle-section{
    width:min(1180px,calc(100% - 32px));
    margin-left:auto;
    margin-right:auto;
}

/* =========================================================
   HEADINGS
   ========================================================= */

h1,h2,h3,h4{
    color:var(--az-navy);
    letter-spacing:-.025em;
}

h1{
    font-size:clamp(32px,5vw,54px);
    line-height:1.06;
}

h2{
    font-size:clamp(28px,4vw,40px);
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.az-book-button,
#continue-booking,
a.button,
.btn{
    border:0;
    border-radius:12px;
    min-height:50px;
    padding:0 24px;
    background:var(--az-blue);
    color:#fff;
    font-weight:750;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

button:hover,
.az-book-button:hover,
#continue-booking:hover,
a.button:hover,
.btn:hover{
    background:var(--az-blue-dark);
    transform:translateY(-1px);
    box-shadow:0 10px 25px rgba(18,100,216,.22);
}

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

input,
select,
textarea{
    width:100%;
    border:1px solid var(--az-border);
    background:#fff;
    color:var(--az-text);
    border-radius:12px;
    min-height:52px;
    padding:0 15px;
    outline:none;
    transition:border-color .15s,box-shadow .15s;
}

textarea{
    padding-top:14px;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--az-blue);
    box-shadow:0 0 0 4px rgba(18,100,216,.09);
}

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

#homepage-booking-form{
    position:relative;
    width:min(1040px,calc(100% - 28px));
    margin:0 auto;
    padding:26px;
    background:#fff;
    border:1px solid rgba(229,234,241,.9);
    border-radius:22px;
    box-shadow:var(--az-shadow);
}

#homepage-booking-form .az-field{
    margin-bottom:16px;
}

#homepage-booking-form label{
    display:block;
    margin-bottom:8px;
    color:var(--az-navy);
    font-size:13px;
    font-weight:750;
}

#homepage-booking-form .az-book-button{
    width:100%;
    margin-top:5px;
}

/* =========================================================
   AUTOCOMPLETE
   ========================================================= */

.az-autocomplete{
    position:absolute;
    z-index:9999;
    left:0;
    right:0;
    top:calc(100% + 4px);
    display:none;
    background:#fff;
    border:1px solid var(--az-border);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(15,35,65,.14);
}

.az-autocomplete.show{
    display:block;
}

.az-autocomplete-item{
    padding:13px 15px;
    border-bottom:1px solid #eef1f5;
    background:#fff;
    cursor:pointer;
    color:#334155;
    font-size:14px;
}

.az-autocomplete-item:hover{
    background:#f4f8ff;
}

/* =========================================================
   VEHICLE PAGE
   ========================================================= */

.vehicle-section{
    padding-top:42px;
    padding-bottom:60px;
}

.vehicle-section > h1{
    margin:0 0 12px;
    text-align:center;
}

.vehicle-section > p{
    margin:5px 0;
    text-align:center;
    color:var(--az-muted);
}

#vehicle-list,
.vehicle-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    margin-top:34px;
}

/* =========================================================
   PREMIUM VEHICLE CARD
   ========================================================= */

.vehicle-card{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--az-border);
    border-radius:20px;
    box-shadow:var(--az-shadow);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.vehicle-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--az-shadow-hover);
    border-color:#cdd9e9;
}

/* vehicle image area */
.vehicle-card .az-vehicle-image{
    height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 22px 4px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 100%
        );
}

.vehicle-card .az-vehicle-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    transition:transform .25s ease;
}

.vehicle-card:hover .az-vehicle-image img{
    transform:scale(1.035);
}

/* card content */
.vehicle-card > div:not(.az-vehicle-image){
    padding-left:20px;
    padding-right:20px;
}

.vehicle-card h3{
    margin:17px 0 7px;
    font-size:20px;
}

.vehicle-card p{
    color:var(--az-muted);
    font-size:13px;
    line-height:1.55;
}

.vehicle-card .vehicle-price,
.vehicle-card .price,
.vehicle-card [id*="price"]{
    color:var(--az-navy);
    font-size:24px;
    font-weight:850;
}

/* selected */
.vehicle-card.selected{
    border:2px solid var(--az-blue);
    box-shadow:0 15px 40px rgba(18,100,216,.16);
}

.vehicle-card.selected::after{
    content:"SELECTED";
    position:absolute;
    top:13px;
    right:13px;
    padding:6px 9px;
    border-radius:7px;
    background:var(--az-blue);
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
}

/* =========================================================
   CONTINUE BOOKING
   ========================================================= */

#continue-booking{
    width:min(420px,100%);
    display:block;
    margin:30px auto 0;
    min-height:54px;
}

/* =========================================================
   DATE / PASSENGER / LUGGAGE AREA
   ========================================================= */

.vehicle-section label{
    display:block;
    color:var(--az-navy);
    font-size:13px;
    font-weight:750;
    margin-bottom:7px;
}

.vehicle-section form,
.booking-form,
.checkout-form{
    background:#fff;
    border:1px solid var(--az-border);
    border-radius:20px;
    box-shadow:var(--az-shadow);
}

/* =========================================================
   CHECKOUT / PAYMENT / CONFIRMATION
   ========================================================= */

.booking-page,
.checkout-page,
.payment-page,
.confirmation-page{
    width:min(1000px,calc(100% - 32px));
    margin:40px auto;
}

.booking-page > *,
.checkout-page > *,
.payment-page > *,
.confirmation-page > *{
    max-width:100%;
}

.card,
.booking-card,
.checkout-card,
.payment-card,
.confirmation-card{
    background:#fff;
    border:1px solid var(--az-border);
    border-radius:20px;
    box-shadow:var(--az-shadow);
}

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

@media(max-width:900px){

    #vehicle-list,
    .vehicle-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .vehicle-card .az-vehicle-image{
        height:180px;
    }
}

@media(max-width:620px){

    .container,
    .az-container,
    .vehicle-section{
        width:calc(100% - 22px);
    }

    #homepage-booking-form{
        width:calc(100% - 18px);
        padding:18px;
        border-radius:18px;
    }

    #vehicle-list,
    .vehicle-grid{
        grid-template-columns:1fr !important;
        gap:16px;
        margin-top:24px;
    }

    .vehicle-card .az-vehicle-image{
        height:205px;
    }

    .vehicle-section{
        padding-top:25px;
    }

    .vehicle-section > h1{
        font-size:32px;
    }

    button,
    .az-book-button,
    #continue-booking{
        min-height:54px;
    }
}

/* =========================================================
   REMOVE CARTOON-LIKE VEHICLE PRESENTATION
   ========================================================= */

.vehicle-card svg{
    max-width:100%;
}

.vehicle-card .vehicle-icon,
.vehicle-card .car-icon,
.vehicle-card .cartoon-car{
    display:none !important;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible{
    outline:3px solid rgba(18,100,216,.28);
    outline-offset:2px;
}