:root{
    --zt-navy:#044C48;
    --zt-navy-2:#0b3a63;
    --zt-gold:#dda928;
    --zt-gold-dark:#c7931f;
    --zt-text:#315B57;
    --zt-muted:#71818d;
    --zt-border:#dde6eb;
    --zt-soft:#f5f7f8;
    --zt-white:#ffffff;
    --zt-green:#188653;
}


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

.zt-page{
    min-height:100vh;
    padding:35px 0 80px;
    background:#f7f9fb;
}

.zt-container{
    width:min(1220px,calc(100% - 40px));
    margin:0 auto;
}


/* ==========================================================
   SEARCH BAR
========================================================== */

.zt-search{
    margin-bottom:20px;
    padding:13px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    background:var(--zt-navy);
    border-radius:14px;

    color:#fff;
}

.zt-search-items{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.zt-search-chip{
    min-height:34px;
    padding:0 12px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    background:#fff;
    color:var(--zt-navy);

    border-radius:20px;

    font-size:11px;
    font-weight:700;
}

.zt-search-chip i{
    color:var(--zt-gold-dark);
}

.zt-search-arrow{
    color:var(--zt-gold);
    font-size:15px;
}

.zt-modify{
    height:38px;
    padding:0 16px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    border:0;
    border-radius:20px;

    background:#fff;
    color:var(--zt-navy);

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

    cursor:pointer;
}


/* ==========================================================
   SEARCH FORM
========================================================== */

.zt-search-form{
    display:none;

    margin-bottom:20px;
    padding:20px;

    background:#fff;
    border:1px solid var(--zt-border);
    border-radius:14px;
}

.zt-search-form.show{
    display:block;
}

.zt-form-grid{
    display:grid;
    grid-template-columns:1.2fr 1.2fr .9fr .8fr .7fr .7fr auto;
    gap:10px;
    align-items:end;
}

.zt-field label{
    display:block;
    margin-bottom:6px;

    color:#536b7b;
    font-size:10px;
    font-weight:800;
}

.zt-field select,
.zt-field input{
    width:100%;
    height:46px;

    padding:0 11px;

    border:1px solid var(--zt-border);
    border-radius:8px;

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

    outline:0;

    font-family:inherit;
    font-size:11px;
}

.zt-field select:focus,
.zt-field input:focus{
    border-color:var(--zt-gold);
}

.zt-search-submit{
    height:46px;
    padding:0 18px;

    border:0;
    border-radius:8px;

    background:var(--zt-gold);
    color:var(--zt-navy);

    font-size:11px;
    font-weight:900;

    cursor:pointer;
}


/* ==========================================================
   ROUTE CARD
========================================================== */

.zt-route-card{
    margin-bottom:27px;

    padding:20px;

    display:grid;
    grid-template-columns:390px minmax(0,1fr);
    gap:22px;

    background:#fff;

    border:1px solid var(--zt-border);
    border-radius:15px;

    box-shadow:
        0 7px 25px rgba(6,43,79,.05);
}

.zt-route-left{
    padding:3px 5px;
}

.zt-title{
    display:flex;
    align-items:center;
    gap:8px;

    margin:0 0 18px;

    color:var(--zt-navy);

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

.zt-title i{
    color:var(--zt-gold);
}


/* LOCATIONS */

.zt-location{
    position:relative;

    padding-left:27px;
    margin-bottom:18px;
}

.zt-location-dot{
    position:absolute;
    top:5px;
    left:0;

    width:10px;
    height:10px;

    border-radius:50%;
}

.zt-location-dot.pickup{
    background:#21905c;
}

.zt-location-dot.dropoff{
    background:#d94452;
}

.zt-location small{
    display:block;

    margin-bottom:4px;

    color:#42596a;

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

.zt-location strong{
    display:block;

    color:var(--zt-navy);

    font-size:13px;
}

.zt-location span{
    display:block;

    margin-top:4px;

    color:#83919a;

    font-size:9px;
}


/* STATS */

.zt-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;

    margin-top:19px;
}

.zt-stat{
    min-height:100px;

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

    border-radius:9px;

    background:var(--zt-soft);

    text-align:center;
}

.zt-stat i{
    margin-bottom:8px;

    color:var(--zt-gold);

    font-size:25px;
}

.zt-stat small{
    color:#71818d;

    font-size:9px;
}

.zt-stat strong{
    margin-top:5px;

    color:var(--zt-navy);

    font-size:16px;
}


/* ARRIVAL */

.zt-arrival{
    margin-top:10px;
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border-radius:8px;

    background:var(--zt-soft);

    color:#546b7c;

    font-size:11px;
}

.zt-arrival i{
    color:var(--zt-gold);
}

.zt-arrival strong{
    color:var(--zt-navy);
}


/* ==========================================================
   MAP
========================================================== */

.zt-map-side{
    min-width:0;
}

#ztTransferMap{
    width:100%;
    height:335px;

    overflow:hidden;

    border-radius:12px;

    background:#e8eef2;
}

.zt-map-note{
    margin-top:8px;

    text-align:center;

    color:#7e8c96;

    font-size:9px;
}

.zt-map-note i{
    color:var(--zt-gold);
}

.leaflet-routing-container{
    display:none !important;
}


/* ==========================================================
   VEHICLE HEADING
========================================================== */

.zt-vehicles-title{
    margin:0 0 15px;

    display:flex;
    align-items:center;
    gap:9px;

    color:var(--zt-navy);

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

.zt-vehicles-title > i{
    color:var(--zt-gold);
}

.zt-count{
    padding:5px 8px;

    border-radius:5px;

    background:var(--zt-navy);
    color:#fff;

    font-size:9px;
    font-weight:700;
}


/* ==========================================================
   VEHICLE LIST
========================================================== */

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

.zt-vehicle-card{
    min-width:0;

    display:grid;
    grid-template-columns:220px minmax(0,1fr);

    overflow:hidden;

    border:1px solid var(--zt-border);
    border-radius:14px;

    background:#fff;

    box-shadow:
        0 7px 25px rgba(6,43,79,.05);
}

.zt-vehicle-image{
    min-height:300px;

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

    overflow:hidden;

    background:#f0f2f3;
}

.zt-vehicle-image img{
    width:100%;
    height:100%;

    min-height:300px;

    display:block;

    object-fit:cover;
}

.zt-vehicle-content{
    padding:17px;
}

.zt-vehicle-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.zt-vehicle-top h3{
    margin:0;

    color:var(--zt-navy);

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

.zt-capacity{
    display:flex;
    gap:5px;
}

.zt-capacity span{
    padding:4px 7px;

    display:inline-flex;
    align-items:center;
    gap:4px;

    border-radius:5px;

    background:#78858f;
    color:#fff;

    font-size:8px;
    font-weight:700;
}


/* FEATURES */

.zt-features{
    margin:8px 0 12px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}

.zt-feature{
    display:inline-flex;
    align-items:center;
    gap:4px;

    color:#27704f;

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


/* SUITABLE */

.zt-suitable{
    margin-bottom:13px;
    padding:10px 11px;

    border:1px solid #a9d8be;
    border-radius:6px;

    background:#e7f5ec;

    color:#1d6041;

    font-size:10px;
    line-height:1.5;
}

.zt-suitable i{
    margin-right:4px;
}


/* DESCRIPTION */

.zt-description{
    margin:0 0 12px;

    color:#7b8993;

    font-size:9px;
    line-height:1.6;
}


/* PRICE BOX */

.zt-price-box{
    padding:12px;

    border-radius:8px;

    background:#f5f7f8;
}

.zt-price-line{
    padding:7px 0;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;

    color:#71818d;

    font-size:9px;
}

.zt-price-line + .zt-price-line{
    border-top:1px solid #dfe5e8;
}

.zt-price-line strong{
    color:var(--zt-navy);

    font-size:11px;
}

.zt-price-line.total strong{
    color:var(--zt-gold-dark);

    font-size:15px;
}


/* BUTTON */

.zt-select-btn{
    width:100%;
    min-height:42px;

    margin-top:11px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    border:0;
    border-radius:8px;

    background:var(--zt-gold);

    color:var(--zt-navy);

    font-family:inherit;
    font-size:10px;
    font-weight:900;

    cursor:pointer;
}

.zt-select-btn:hover{
    background:var(--zt-gold-dark);
}


/* EMPTY */

.zt-empty{
    padding:45px 20px;

    background:#fff;

    border:1px solid var(--zt-border);
    border-radius:14px;

    text-align:center;
}

.zt-empty i{
    margin-bottom:10px;

    color:var(--zt-gold);

    font-size:36px;
}

.zt-empty h3{
    margin:0 0 7px;

    color:var(--zt-navy);
}

.zt-empty p{
    margin:0;

    color:#71818d;

    font-size:11px;
}


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

@media(max-width:1100px){

    .zt-route-card{
        grid-template-columns:340px 1fr;
    }

    .zt-vehicle-list{
        grid-template-columns:1fr;
    }

    .zt-form-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:800px){

    .zt-route-card{
        grid-template-columns:1fr;
    }

    #ztTransferMap{
        height:300px;
    }

    .zt-search{
        align-items:flex-start;
        flex-direction:column;
    }

    .zt-form-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:560px){

    .zt-container{
        width:calc(100% - 24px);
    }

    .zt-form-grid{
        grid-template-columns:1fr;
    }

    .zt-vehicle-card{
        grid-template-columns:1fr;
    }

    .zt-vehicle-image,
    .zt-vehicle-image img{
        min-height:220px;
        max-height:240px;
    }
}


/* ==========================================================
   ZAN PEARL TRANSFER PAGE FINAL LAYOUT FIX
   HEADER + VEHICLE IMAGE
========================================================== */


/* ==========================================================
   1. HEADER MUST NEVER OVERLAP TRANSFER CONTENT
========================================================== */

body .site-header{
    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    width:100% !important;

    z-index:1000 !important;

    background:#044C48 !important;

    transform:none !important;

    margin:0 !important;
}


body .site-header .main-navbar{
    position:relative !important;

    top:auto !important;

    width:100% !important;

    background:#044C48 !important;

    z-index:1001 !important;
}


body .site-header .nav-container{
    min-height:105px !important;

    display:flex !important;

    align-items:center !important;
}


/* MENU */

body .site-header .main-menu{
    position:relative !important;

    top:auto !important;

    display:flex !important;

    align-items:center !important;

    gap:38px !important;

    z-index:10 !important;
}


body .site-header .main-menu a{
    color:#ffffff !important;

    opacity:1 !important;

    font-size:14px !important;

    font-weight:700 !important;

    white-space:nowrap !important;
}


body .site-header .main-menu a:hover,
body .site-header .main-menu a.active{
    color:#dda928 !important;
}


/* LOGO */

body .site-header .site-logo{
    position:relative !important;

    top:auto !important;
    left:auto !important;

    flex:none !important;

    margin:0 !important;
}


body .site-header .site-logo img{
    max-height:76px !important;

    width:auto !important;

    object-fit:contain !important;
}


/* ==========================================================
   TRANSFER PAGE SHOULD START BELOW HEADER
========================================================== */

.zt-page{
    position:relative !important;

    padding-top:24px !important;

    margin-top:0 !important;

    z-index:1 !important;

    background:#f7f9fb !important;
}


.zt-container{
    position:relative !important;

    z-index:2 !important;
}


/* SUMMARY BAR */

.zt-search{
    position:relative !important;

    top:auto !important;

    margin-top:0 !important;
    margin-bottom:24px !important;

    z-index:5 !important;
}


/* ==========================================================
   2. VEHICLE AREA
========================================================== */

.zt-vehicle-list{
    display:grid !important;

    grid-template-columns:1fr !important;

    gap:22px !important;

    max-width:100% !important;
}


/* Vehicle card wider and cleaner */

.zt-vehicle-card{
    width:100% !important;

    max-width:950px !important;

    min-height:310px !important;

    display:grid !important;

    grid-template-columns:340px minmax(0,1fr) !important;

    overflow:hidden !important;

    background:#ffffff !important;

    border:1px solid #dde6eb !important;

    border-radius:15px !important;

    box-shadow:
        0 8px 28px
        rgba(6,43,79,.06) !important;
}


/* ==========================================================
   VEHICLE IMAGE - SHOW COMPLETE CAR
========================================================== */

.zt-vehicle-image{
    position:relative !important;

    width:100% !important;

    min-height:310px !important;

    padding:14px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            145deg,
            #f8f9fa,
            #eef2f4
        ) !important;
}


.zt-vehicle-image img{
    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:300px !important;

    min-height:0 !important;

    display:block !important;

    object-fit:contain !important;

    object-position:center center !important;

    margin:auto !important;

    padding:0 !important;

    transform:none !important;
}


/* Never zoom image */

.zt-vehicle-image:hover img{
    transform:none !important;

    scale:1 !important;
}


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

.zt-vehicle-content{
    min-width:0 !important;

    padding:25px 27px !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;
}


.zt-vehicle-top h3{
    color:#044C48 !important;

    font-size:24px !important;

    line-height:1.25 !important;

    font-weight:800 !important;
}


.zt-description{
    color:#6f808c !important;

    font-size:12px !important;

    line-height:1.7 !important;
}


/* Capacity tags */

.zt-capacity span{
    padding:6px 9px !important;

    background:#6e7d88 !important;

    color:#ffffff !important;

    border-radius:6px !important;

    font-size:9px !important;
}


/* Features */

.zt-features{
    margin:12px 0 15px !important;

    gap:11px !important;
}


.zt-feature{
    font-size:9px !important;
}


/* Suitable box */

.zt-suitable{
    padding:12px 14px !important;

    margin-bottom:15px !important;

    font-size:11px !important;

    line-height:1.6 !important;
}


/* ==========================================================
   PRICE
========================================================== */

.zt-price-box{
    padding:12px 14px !important;

    background:#f5f7f8 !important;

    border-radius:9px !important;
}


.zt-price-line{
    min-height:36px !important;

    font-size:10px !important;
}


.zt-price-line strong{
    font-size:12px !important;
}


.zt-price-line.total strong{
    color:#d19b1d !important;

    font-size:17px !important;

    font-weight:900 !important;
}


/* BUTTON */

.zt-select-btn{
    min-height:48px !important;

    margin-top:14px !important;

    background:#dda928 !important;

    color:#044C48 !important;

    border-radius:9px !important;

    font-size:11px !important;

    font-weight:900 !important;
}


.zt-select-btn:hover{
    background:#c99620 !important;
}


/* ==========================================================
   MAP CARD EXTRA SPACING
========================================================== */

.zt-route-card{
    margin-top:0 !important;

    margin-bottom:32px !important;
}


#ztTransferMap{
    min-height:350px !important;
}


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

@media(max-width:1000px){

    body .site-header .main-menu{
        gap:22px !important;
    }

    .zt-vehicle-card{
        max-width:100% !important;

        grid-template-columns:300px minmax(0,1fr) !important;
    }

}


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

@media(max-width:760px){

    body .site-header .nav-container{
        min-height:85px !important;
    }


    .zt-page{
        padding-top:16px !important;
    }


    .zt-vehicle-card{
        grid-template-columns:1fr !important;

        max-width:100% !important;
    }


    .zt-vehicle-image{
        min-height:245px !important;

        padding:15px !important;
    }


    .zt-vehicle-image img{
        height:225px !important;

        max-height:225px !important;

        object-fit:contain !important;
    }


    .zt-vehicle-content{
        padding:20px !important;
    }

}