:root{
    --az-primary:#1264d8;
    --az-primary-dark:#0849a5;
    --az-navy:#0b1728;
    --az-text:#172033;
    --az-muted:#64748b;
    --az-border:#e4eaf2;
    --az-bg:#f6f8fb;
    --az-white:#fff;
    --az-radius:18px;
    --az-shadow:0 12px 35px rgba(15,35,65,.08);
    --az-shadow-hover:0 20px 50px rgba(15,35,65,.14);
}

*{
    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,
.az-container,
.vehicle-section{
    width:min(1180px,calc(100% - 32px));
    margin-left:auto;
    margin-right:auto;
}

main{
    min-height:40vh;
}

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(27px,4vw,40px);
}

p{
    line-height:1.65;
}

a{
    color:var(--az-primary);
}

/* =========================================
   HEADER
========================================= */

header,
.site-header,
.az-header,
.navbar{
    position:relative;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid var(--az-border);
}

header .container,
.site-header .container,
.az-header .container,
.navbar .container{
    min-height:72px;
    display:flex;
    align-items:center;
}

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

#homepage-booking-form{
    position:relative;
    width:min(1080px,calc(100% - 24px));
    margin:24px auto;
    padding:26px;
    background:#fff;
    border:1px solid var(--az-border);
    border-radius:22px;
    box-shadow:var(--az-shadow);
}

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

#homepage-booking-form input,
#homepage-booking-form select{
    min-height:54px;
    border:1px solid var(--az-border);
    border-radius:12px;
    background:#fff;
    padding:0 15px;
    outline:none;
}

#homepage-booking-form input:focus,
#homepage-booking-form select:focus{
    border-color:var(--az-primary);
    box-shadow:0 0 0 4px rgba(18,100,216,.08);
}

.az-book-button,
button[type="submit"],
#continue-booking,
.btn,
.button{
    border:0;
    border-radius:12px;
    min-height:52px;
    padding:0 24px;
    background:var(--az-primary);
    color:#fff;
    font-weight:750;
    transition:.18s ease;
}

.az-book-button:hover,
button[type="submit"]:hover,
#continue-booking:hover,
.btn:hover,
.button:hover{
    background:var(--az-primary-dark);
    transform:translateY(-1px);
    box-shadow:0 10px 25px rgba(18,100,216,.2);
}

/* =========================================
   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:13px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(15,35,65,.15);
}

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

.az-autocomplete-item{
    padding:14px 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:42px 0 65px;
}

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

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

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

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

.vehicle-card{
    position:relative;
    overflow:hidden;
    min-width:0;
    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);
    border-color:#cbd7e6;
    box-shadow:var(--az-shadow-hover);
}

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

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

/* REAL VEHICLE PHOTO */

.az-vehicle-image{
    height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 22px 5px;
    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f5f7fa 100%
        );
}

.az-vehicle-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

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

.vehicle-card p{
    margin:6px 20px;
    color:var(--az-muted);
    font-size:13px;
}

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

.vehicle-card button{
    margin:12px 20px 20px;
}

/* REMOVE CARTOON PRESENTATION */

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

/* =========================================
   OTHER PAGES
========================================= */

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

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

input,
select,
textarea{
    border-color:var(--az-border);
    border-radius:12px;
}

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

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

@media(max-width:900px){

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

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

    .az-vehicle-image{
        height:185px;
    }
}

@media(max-width:620px){

    body{
        overflow-x:hidden;
    }

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

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

    #homepage-booking-form input,
    #homepage-booking-form select,
    #homepage-booking-form button,
    #homepage-booking-form .az-book-button{
        min-height:54px;
    }

    .vehicle-section{
        padding:25px 0 45px;
    }

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

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

    .vehicle-card{
        border-radius:17px;
    }

    .az-vehicle-image{
        height:210px;
        padding:18px 22px 8px;
    }

    .vehicle-card h3{
        font-size:20px;
    }

    .vehicle-card .vehicle-price,
    .vehicle-card .price,
    .vehicle-card [id*="price"]{
        font-size:24px;
    }

    #continue-booking{
        width:100%;
        min-height:56px;
        margin-top:22px;
    }

    .booking-page,
    .checkout-page,
    .payment-page,
    .confirmation-page{
        width:calc(100% - 20px);
        margin:25px auto;
    }

    .az-autocomplete{
        max-height:260px;
        overflow-y:auto;
    }
}

@media(max-width:380px){

    #homepage-booking-form{
        padding:14px;
    }

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

    .az-vehicle-image{
        height:190px;
    }
}

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