:root{
    --az-primary:#1264d8;
    --az-primary-dark:#0849a5;
    --az-navy:#0b1728;
    --az-text:#172033;
    --az-muted:#64748b;
    --az-border:#e4e9f0;
    --az-bg:#f5f7fa;
    --az-white:#fff;
    --az-radius:18px;
    --az-shadow:0 10px 35px 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;
    background:var(--az-bg);
    color:var(--az-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

img{
    max-width:100%;
}

a{
    color:inherit;
}

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

button{
    cursor:pointer;
}

/* ==================================================
   GLOBAL SITE
   ================================================== */

header,
.site-header,
.main-header,
.navbar{
    background:#fff !important;
    border-bottom:1px solid var(--az-border);
}

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

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

.hero,
.hero-section,
.home-hero{
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fc 100%
        ) !important;
    padding:65px 0 45px;
}

.hero h1,
.hero-section h1,
.home-hero h1{
    color:var(--az-navy);
    font-size:clamp(34px,5vw,58px);
    line-height:1.05;
    letter-spacing:-.035em;
}

/* ==================================================
   MAIN BOOKING WIDGET
   ================================================== */

#homepage-booking-form{
    position:relative;
    z-index:20;

    width:min(1080px,calc(100% - 28px));
    margin:25px auto 60px;

    padding:28px;

    background:#fff;
    border:1px solid var(--az-border);
    border-radius:24px;

    box-shadow:
        0 20px 60px rgba(15,35,65,.12);
}

/* FROM / TO vertical */

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

#homepage-booking-form label{
    display:block;
    margin-bottom:8px;

    color:var(--az-navy);
    font-size:13px;
    font-weight:800;
}

#homepage-booking-form input,
#homepage-booking-form select{
    width:100%;
    min-height:56px;

    border:1px solid var(--az-border);
    border-radius:13px;

    padding:0 16px;

    background:#fff;
    color:var(--az-text);

    outline:none;
}

#homepage-booking-form input:focus{
    border-color:var(--az-primary);

    box-shadow:
        0 0 0 4px rgba(18,100,216,.09);
}

/* BOOK NOW */

#homepage-booking-form .az-book-button,
#homepage-booking-form button[type="submit"]{
    width:100%;
    min-height:58px;

    border:0;
    border-radius:13px;

    background:var(--az-primary);
    color:#fff;

    font-weight:800;
    font-size:16px;

    box-shadow:
        0 10px 25px rgba(18,100,216,.20);

    transition:.2s 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 !important;
    z-index:99999 !important;

    left:0;
    right:0;
    top:calc(100% + 4px);

    max-height:300px;
    overflow:auto;

    background:#fff;

    border:1px solid var(--az-border);
    border-radius:13px;

    box-shadow:
        0 20px 45px rgba(15,35,65,.15);
}

.az-autocomplete-item{
    padding:14px 16px;

    border-bottom:1px solid #edf0f4;

    background:#fff;
    color:#334155;

    font-size:14px;

    cursor:pointer;
}

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

/* ==================================================
   ALL PAGES — PREMIUM CONTENT
   ================================================== */

main,
section{
    position:relative;
}

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

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

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

    padding:45px 0 70px;
}

.vehicle-section > h1{
    margin:0 0 10px;

    text-align:center;

    color:var(--az-navy);
    font-size:clamp(32px,4vw,46px);
    letter-spacing:-.03em;
}

.vehicle-section > p{
    margin:6px 0;

    text-align:center;

    color:var(--az-muted);
}

/* 3 COLUMNS */

#vehicle-list,
.vehicle-grid{
    display:grid !important;

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

    gap:24px;

    margin-top:38px;
}

/* ==================================================
   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(-5px);

    box-shadow:var(--az-shadow-hover);

    border-color:#cbd7e7;
}

/* ==================================================
   REAL PHOTO AREA
   ================================================== */

.vehicle-card .az-vehicle-image{
    position:relative;

    height:215px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:15px 20px 0;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f4f6f9 100%
        );
}

.vehicle-card .az-vehicle-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    border:0;

    transition:transform .25s ease;
}

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

/* NEVER show cartoon presentation */

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

/* ==================================================
   VEHICLE CONTENT
   ================================================== */

.vehicle-card h3{
    margin:18px 20px 6px;

    color:var(--az-navy);

    font-size:21px;
    font-weight:800;
}

.vehicle-card p{
    margin:6px 20px;

    color:var(--az-muted);

    font-size:13px;
    line-height:1.55;
}

.vehicle-card .vehicle-price,
.vehicle-card .price,
.vehicle-card [id*="price"]{
    margin:12px 20px;

    color:var(--az-navy);

    font-size:26px;
    font-weight:900;
}

/* SELECT */

.vehicle-card.selected{
    border:2px solid var(--az-primary);

    box-shadow:
        0 15px 45px 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-primary);
    color:#fff;

    font-size:10px;
    font-weight:900;
}

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

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

    border:0;
    border-radius:12px;

    background:var(--az-primary);
    color:#fff;

    font-weight:800;
}

.vehicle-card button{
    width:calc(100% - 40px);
    margin:12px 20px 20px;
}

#continue-booking{
    display:block;

    width:min(430px,100%);

    margin:35px auto 0;

    min-height:56px;
}

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

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

    background:#fff;
    color:var(--az-text);

    outline:none;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--az-primary);

    box-shadow:
        0 0 0 4px rgba(18,100,216,.08);
}

/* ==================================================
   PAYMENT / CONFIRMATION / CUSTOMER
   ================================================== */

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

    margin:45px auto 70px;
}

.booking-page h1,
.checkout-page h1,
.payment-page h1,
.confirmation-page h1{
    color:var(--az-navy);
}

/* ==================================================
   FOOTER
   ================================================== */

footer,
.site-footer{
    background:#0b1728 !important;
    color:#fff !important;
}

footer a,
.site-footer a{
    color:#dbe7f8 !important;
}

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

@media(max-width:900px){

    .hero,
    .hero-section,
    .home-hero{
        padding:42px 0 30px;
    }

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

        gap:18px;
    }

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

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

@media(max-width:620px){

    body{
        overflow-x:hidden;
    }

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

    .hero,
    .hero-section,
    .home-hero{
        padding:30px 0 20px;
    }

    .hero h1,
    .hero-section h1,
    .home-hero h1{
        font-size:34px;
    }

    #homepage-booking-form{
        width:calc(100% - 14px);

        margin:15px auto 40px;

        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{
        padding:28px 0 45px;
    }

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

    #vehicle-list,
    .vehicle-grid{
        grid-template-columns:1fr !important;

        gap:16px;

        margin-top:25px;
    }

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

    .vehicle-card .az-vehicle-image{
        height:205px;
        padding:14px 20px 0;
    }

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

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

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

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

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

@media(max-width:380px){

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

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

    .vehicle-card .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;
}