:root{
    --az-primary:#1264d8;
    --az-primary-dark:#0849a5;
    --az-navy:#0b1728;
    --az-text:#182235;
    --az-muted:#64748b;
    --az-border:#e5eaf1;
    --az-bg:#f5f7fa;
    --az-white:#fff;
    --az-radius:18px;
    --az-shadow:0 10px 30px rgba(15,35,65,.08);
    --az-shadow-hover:0 18px 45px rgba(15,35,65,.14);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-width:320px;
    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;
}

/* ================================================
   HOME BOOKING
   ================================================ */

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

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

#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{
    width:100%;
    min-height:54px;
    padding:0 16px;
    border:1px solid #dfe5ed;
    border-radius:13px;
    background:#fff;
    color:var(--az-text);
    outline:none;
    transition:.18s ease;
}

#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,.09);
}

#homepage-booking-form .az-book-button,
#homepage-booking-form button[type="submit"]{
    width:100%;
    min-height:55px;
    border:0;
    border-radius:13px;
    background:var(--az-primary);
    color:#fff;
    font-weight:800;
    box-shadow:0 8px 20px rgba(18,100,216,.18);
    transition:.18s ease;
}

#homepage-booking-form .az-book-button:hover,
#homepage-booking-form button[type="submit"]:hover{
    background:var(--az-primary-dark);
    transform:translateY(-1px);
}

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

.az-autocomplete{
    position:absolute;
    z-index:99999;
    left:0;
    right:0;
    top:calc(100% + 5px);
    display:none;
    max-height:300px;
    overflow-y:auto;
    background:#fff;
    border:1px solid var(--az-border);
    border-radius:13px;
    box-shadow:0 18px 40px rgba(15,35,65,.15);
}

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

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

.az-autocomplete-item:last-child{
    border-bottom:0;
}

.az-autocomplete-item:hover,
.az-autocomplete-item:active{
    background:#f3f7ff;
}

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

.vehicle-section{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    padding:42px 0 65px;
}

.vehicle-section > h1{
    margin:0;
    color:var(--az-navy);
    text-align:center;
    font-size:clamp(30px,4vw,46px);
    line-height:1.1;
    letter-spacing:-.035em;
}

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

/* ================================================
   3 x 2 VEHICLE GRID
   ================================================ */

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

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

.vehicle-card{
    position:relative;
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    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:#cbd8ea;
}

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

.vehicle-card.selected::before{
    content:"SELECTED";
    position:absolute;
    z-index:5;
    top:12px;
    right:12px;
    padding:6px 9px;
    border-radius:7px;
    background:var(--az-primary);
    color:#fff;
    font-size:10px;
    font-weight:850;
    letter-spacing:.04em;
}

/* ================================================
   VEHICLE IMAGE
   ================================================ */

.az-vehicle-image{
    position:relative;
    height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 20px 8px;
    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f7f9fc 100%
        );
    border-bottom:1px solid #edf0f4;
}

.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.025);
}

/* hide old cartoon icon presentation */
.vehicle-card .vehicle-icon,
.vehicle-card .car-icon,
.vehicle-card .cartoon-car{
    display:none !important;
}

/* ================================================
   CARD CONTENT
   ================================================ */

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

.vehicle-card h3{
    margin:17px 0 6px;
    color:var(--az-navy);
    font-size:21px;
    font-weight:800;
}

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

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

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

.vehicle-card button,
.vehicle-card .select-vehicle,
.vehicle-card [data-action="select"]{
    width:calc(100% - 40px);
    min-height:48px;
    margin:15px 20px 20px;
    border:0;
    border-radius:12px;
    background:#edf4ff;
    color:var(--az-primary);
    font-weight:800;
    transition:.18s ease;
}

.vehicle-card button:hover,
.vehicle-card .select-vehicle:hover,
.vehicle-card [data-action="select"]:hover{
    background:var(--az-primary);
    color:#fff;
}

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

#continue-booking{
    display:block;
    width:min(440px,100%);
    min-height:55px;
    margin:30px auto 0;
    border:0;
    border-radius:13px;
    background:var(--az-primary);
    color:#fff;
    font-weight:850;
    box-shadow:0 10px 25px rgba(18,100,216,.2);
}

#continue-booking:hover{
    background:var(--az-primary-dark);
}

/* ================================================
   GENERAL FORMS
   ================================================ */

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

.vehicle-section input,
.vehicle-section select,
.vehicle-section textarea{
    width:100%;
    min-height:52px;
    border:1px solid var(--az-border);
    border-radius:12px;
    padding:0 14px;
    background:#fff;
    outline:none;
}

.vehicle-section textarea{
    min-height:110px;
    padding-top:13px;
}

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

/* ================================================
   TABLET
   ================================================ */

@media(max-width:900px){

    .vehicle-section{
        width:calc(100% - 26px);
        padding-top:32px;
    }

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

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

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

@media(max-width:620px){

    body{
        overflow-x:hidden;
    }

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

    #homepage-booking-form input,
    #homepage-booking-form select,
    #homepage-booking-form .az-book-button,
    #homepage-booking-form button[type="submit"]{
        min-height:54px;
    }

    .vehicle-section{
        width:calc(100% - 20px);
        padding:25px 0 45px;
    }

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

    .vehicle-section > p{
        font-size:13px;
    }

    #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 24px 8px;
    }

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

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

    .vehicle-card button,
    .vehicle-card .select-vehicle,
    .vehicle-card [data-action="select"]{
        min-height:52px;
    }

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

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

    .az-autocomplete-item{
        padding:14px;
        font-size:13px;
    }
}

/* ================================================
   VERY SMALL MOBILE
   ================================================ */

@media(max-width:380px){

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

    .vehicle-section{
        width:calc(100% - 14px);
    }

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

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

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

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