/*==================================================
    VEHICLE DETAIL
==================================================*/

.vehicle-detail{

    background:var(--white);

    padding-top:140px;

}

.vehicle-detail-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:70px;

}

.vehicle-detail-image{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-lg);

    background:var(--surface);

    box-shadow:var(--shadow-sm);

}

.vehicle-detail-image img{

    display:block;

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

}

.vehicle-detail-badge{

    position:absolute;

    top:22px;

    left:22px;

    padding:8px 18px;

    border-radius:30px;

    background:var(--primary);

    color:#111;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.vehicle-detail-content{

    max-width:560px;

}

.vehicle-detail-title{

    margin:8px 0 20px;

    color:var(--title);

    font-size:clamp(34px,4vw,52px);

    line-height:1.1;

    font-weight:800;

}

.vehicle-detail-description{

    margin:0 0 30px;

    color:var(--text);

    font-size:15px;

    line-height:1.8;

}

.vehicle-detail-specs{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:30px;

}

.vehicle-spec{

    display:flex;

    align-items:center;

    gap:13px;

    padding:16px;

    border:1px solid #ECECEC;

    border-radius:var(--radius-md);

    background:var(--surface);

}

.vehicle-spec > i{

    color:var(--primary);

    font-size:19px;

    width:24px;

    text-align:center;

}

.vehicle-spec span{

    display:block;

    margin-bottom:3px;

    color:#888;

    font-size:12px;

}

.vehicle-spec strong{

    display:block;

    color:var(--title);

    font-size:14px;

}

.vehicle-detail-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding-top:25px;

    border-top:1px solid #ECECEC;

}

.vehicle-price span{

    color:#777;

    font-size:13px;

}

.vehicle-detail-footer .btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    white-space:nowrap;

}

.vehicle-detail-footer .btn i{

    transition:var(--transition);

}

.vehicle-detail-footer .btn:hover i{

    transform:translateX(4px);

}

/*==================================================
    NOT FOUND
==================================================*/

.vehicle-not-found{

    min-height:600px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.vehicle-not-found-content{

    max-width:600px;

    margin:auto;

}

.vehicle-not-found-content > i{

    display:block;

    margin-bottom:25px;

    color:var(--primary);

    font-size:55px;

}

.vehicle-not-found-content h1{

    margin:10px 0 15px;

    color:var(--title);

}

.vehicle-not-found-content p{

    margin-bottom:30px;

    color:var(--text);

}

/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:992px){

    .vehicle-detail{

        padding-top:120px;

    }

    .vehicle-detail-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .vehicle-detail-content{

        max-width:100%;

    }

}

@media(max-width:768px){

    .vehicle-detail{

        padding-top:110px;

    }

    .vehicle-detail-specs{

        grid-template-columns:1fr 1fr;

    }

    .vehicle-detail-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .vehicle-detail-footer .btn{

        justify-content:center;

    }

}

@media(max-width:480px){

    .vehicle-detail-specs{

        grid-template-columns:1fr;

    }

    .vehicle-detail-image img{

        aspect-ratio:4/3;

    }

    .vehicle-detail-title{

        font-size:34px;

    }

}
.vehicle-detail-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.vehicle-detail-actions .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    white-space:nowrap;

}

.vehicle-detail-actions .btn i{

    font-size:16px;

}

@media(max-width:768px){

    .vehicle-detail-actions{

        width:100%;

        flex-direction:column;

    }

    .vehicle-detail-actions .btn{

        width:100%;

    }

}

/*==================================================
    VEHICLE SIMILAR
==================================================*/

.vehicle-similar{

    background:var(--surface);

}

.vehicle-similar .section-heading{

    margin-bottom:40px;

}

.vehicle-similar-grid{

    display:grid;

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

    gap:30px;

}

.vehicle-similar-item{

    min-width:0;

}


/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:992px){

    .vehicle-similar-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .vehicle-similar-grid{

        grid-template-columns:1fr;

    }

}