/* ======================================================
   CAR DETAIL PAGE
====================================================== */

.car-detail-page{
    background:#ffffff;
    padding:30px 0 80px;
    font-family:'Poppins',sans-serif;
}

/* ======================================================
   CONTAINER
====================================================== */

.car-detail-page .container{
    max-width:1280px;
}

/* ======================================================
   BREADCRUMB
====================================================== */

.car-detail-page .car-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
    font-size:14px;
    margin-bottom:30px;
}

.car-detail-page .car-breadcrumb a{
    color:#8C8C8C;
    text-decoration:none;
    transition:.25s;
}

.car-detail-page .car-breadcrumb a:hover{
    color:#003963;
}

.car-detail-page .car-breadcrumb span{
    color:#8C8C8C;
}

.car-detail-page .car-breadcrumb .active{
    color:#003963;
    font-weight:600;
}

/* ======================================================
   MAIN IMAGE
====================================================== */

.car-detail-page .car-main-image{
    background:#F8FAFC;
    border-radius:24px;
    overflow:hidden;
    border:1px solid #E7ECF3;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.car-detail-page .car-main-image img{
    width:100%;
    height:520px;
    object-fit:cover;
    transition:.35s;
}

.car-detail-page .car-main-image:hover img{
    transform:scale(1.02);
}

/* ======================================================
   THUMBNAIL
====================================================== */

.car-detail-page .car-thumb{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    border:2px solid transparent;
    cursor:pointer;
    transition:.25s;
    background:#fff;
}

.car-detail-page .car-thumb img{
    width:100%;
    height:110px;
    object-fit:cover;
}

.car-detail-page .car-thumb:hover{
    border-color:#003963;
}

.car-detail-page .car-thumb.active{
    border-color:#003963;
}

.car-detail-page .thumb-more{
    position:relative;
}

.car-detail-page .thumb-more .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    font-weight:600;
}

/* ======================================================
   SECTION TITLE
====================================================== */

.car-detail-page .section-title{
    color:#003963;
    font-size:32px;
    font-weight:700;
    margin-bottom:0;
}

.car-detail-page .section-subtitle{
    margin-top:8px;
    color:#7B8794;
    font-size:15px;
    line-height:1.7;
}

/* ======================================================
   TECHNICAL SPECIFICATION
====================================================== */

.car-detail-page .technical-section{
    margin-top:60px;
}

.car-detail-page .spec-card{
    background:#fff;
    border:1px solid #E8EDF3;
    border-radius:20px;
    padding:24px;
    transition:.3s;
    height:100%;
    box-shadow:0 8px 25px rgba(0,0,0,.04);
}

.car-detail-page .spec-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.car-detail-page .spec-icon{
    width:60px;
    height:60px;
    border-radius:16px;
    background:#EEF6FF;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}

.car-detail-page .spec-icon i{
    color:#003963;
    font-size:28px;
}

.car-detail-page .spec-title{
    font-size:14px;
    color:#7A869A;
    margin-bottom:8px;
}

.car-detail-page .spec-value{
    font-size:20px;
    color:#003963;
    font-weight:700;
}

/* ======================================================
   SPEC TABLE
====================================================== */

.car-detail-page .spec-table{
    margin-top:35px;
    background:#fff;
    border-radius:22px;
    border:1px solid #E7ECF3;
    padding:28px;
    box-shadow:0 8px 28px rgba(0,0,0,.04);
}

.car-detail-page .spec-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;
    border-bottom:1px solid #ECEFF4;
}

.car-detail-page .spec-row:last-child{
    border-bottom:none;
}

.car-detail-page .spec-row span{
    color:#7B8794;
    font-size:15px;
}

.car-detail-page .spec-row strong{
    color:#003963;
    font-weight:600;
    font-size:15px;
}

/* ======================================================
   BOOKING SIDEBAR
====================================================== */

.car-detail-page .booking-sidebar{
    background:#FFFFFF;
    border:1px solid #E7ECF3;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    position:sticky;
    top:100px;
}

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

.car-detail-page .booking-header{
    padding:28px;
    background:#FFFFFF;
    border-bottom:1px solid #EDF1F5;
}

.car-detail-page .booking-header small{
    display:block;
    color:#7B8794;
    font-size:14px;
    margin-bottom:6px;
}

.car-detail-page .booking-price{
    font-size:34px;
    font-weight:700;
    color:#003963;
    margin:0;
    line-height:1;
}

/* ======================================================
   STATUS BADGE
====================================================== */

.car-detail-page .status-available{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:999px;
    background:#E9F9EF;
    color:#16A34A;
    font-size:13px;
    font-weight:600;
}

.car-detail-page .status-available i{
    font-size:14px;
}

/* ======================================================
   BOOKING BODY
====================================================== */

.car-detail-page .booking-body{
    padding:28px;
}

.car-detail-page .booking-group{
    margin-bottom:22px;
}

.car-detail-page .booking-group label{
    display:block;
    margin-bottom:10px;
    font-size:14px;
    font-weight:600;
    color:#003963;
}

/* ======================================================
   INPUT BOX
====================================================== */

.car-detail-page .booking-input{
    display:flex;
    align-items:center;
    gap:12px;
    height:56px;
    padding:0 18px;
    background:#F8FAFC;
    border:1px solid #E5EAF0;
    border-radius:14px;
    color:#4B5563;
    font-size:14px;
    transition:.25s;
}

.car-detail-page .booking-input:hover{
    border-color:#003963;
}

.car-detail-page .booking-input i{
    color:#003963;
    font-size:18px;
}

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

.car-detail-page .price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:18px 0;
    color:#4B5563;
    font-size:15px;
}

.car-detail-page .price-row strong{
    color:#003963;
    font-weight:600;
}

.car-detail-page .price-row.total{
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid #E5EAF0;
}

.car-detail-page .price-row.total span{
    color:#003963;
    font-weight:600;
}

.car-detail-page .price-row.total h3{
    margin:0;
    font-size:30px;
    color:#003963;
    font-weight:700;
}

/* ======================================================
   BOOKING BUTTON
====================================================== */

.car-detail-page .booking-btn{
    width:100%;
    height:58px;
    margin-top:28px;
    border:none;
    border-radius:16px;
    background:#003963;
    color:#FFFFFF;
    font-size:17px;
    font-weight:600;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
}

.car-detail-page .booking-btn:hover{
    background:#00558F;
    color:#FFFFFF;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,57,99,.25);
}

/* ======================================================
   WHATSAPP BOX
====================================================== */

.car-detail-page .whatsapp-box{
    margin-top:26px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px;
    border-radius:18px;
    background:#F8FAFC;
    border:1px solid #E7ECF3;
}

.car-detail-page .wa-icon{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#25D366;
    color:#FFFFFF;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.car-detail-page .wa-icon i{
    font-size:28px;
}

.car-detail-page .whatsapp-box small{
    display:block;
    color:#6B7280;
    font-size:13px;
    line-height:1.6;
}

.car-detail-page .chat-now{
    margin-top:6px;
    color:#25D366;
    font-weight:600;
    font-size:14px;
}

/* ======================================================
   FEATURE BOX
====================================================== */

.car-detail-page .feature-box{
    height:110px;
    background:#FFFFFF;
    border:1px solid #E7ECF3;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
    transition:.3s;
}

.car-detail-page .feature-box:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(0,0,0,.08);
}

.car-detail-page .feature-box i{
    font-size:28px;
    color:#003963;
}

.car-detail-page .feature-box{
    font-size:15px;
    font-weight:600;
    color:#003963;
}

/* ======================================================
   CUSTOMER REVIEW SECTION
====================================================== */

.car-detail-page .customer-review-section{
    margin-top:80px;
}

.car-detail-page .overall-rating{
    text-align:right;
}

.car-detail-page .overall-rating h2{
    margin:0;
    font-size:48px;
    font-weight:700;
    color:#003963;
    line-height:1;
}

.car-detail-page .rating-stars{
    margin:10px 0;
}

.car-detail-page .rating-stars i{
    color:#FFC107;
    font-size:18px;
    margin:0 1px;
}

.car-detail-page .overall-rating small{
    color:#7B8794;
    font-size:14px;
}

/* ======================================================
   REVIEW CARD
====================================================== */

.car-detail-page .review-card{
    background:#FFFFFF;
    border:1px solid #E7ECF3;
    border-radius:24px;
    padding:28px;
    height:100%;
    box-shadow:0 8px 28px rgba(0,0,0,.04);
    transition:.3s;
}

.car-detail-page .review-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 35px rgba(0,0,0,.08);
}

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

.car-detail-page .review-header{
    display:flex;
    align-items:center;
    margin-bottom:20px;
}

.car-detail-page .review-header img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    margin-right:16px;
    border:3px solid #EDF3F8;
}

.car-detail-page .review-header h5{
    margin:0;
    font-size:17px;
    font-weight:600;
    color:#003963;
}

.car-detail-page .review-header small{
    color:#8A94A6;
    font-size:13px;
}

.car-detail-page .review-stars{
    margin-left:auto;
    white-space:nowrap;
}

.car-detail-page .review-stars i{
    color:#FFC107;
    font-size:15px;
    margin-left:2px;
}

/* ======================================================
   REVIEW TEXT
====================================================== */

.car-detail-page .review-text{
    margin:0;
    color:#5F6B7A;
    font-size:15px;
    line-height:1.9;
}

/* ======================================================
   DIVIDER
====================================================== */

.car-detail-page hr{
    border-color:#EDF2F7;
    opacity:1;
}

/* ======================================================
   SMOOTH TRANSITION
====================================================== */

.car-detail-page *{
    transition:
        background-color .25s,
        color .25s,
        border-color .25s,
        box-shadow .25s;
}

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

@media (max-width:1199px){

    .car-detail-page .booking-sidebar{
        position:relative;
        top:auto;
    }

}

@media (max-width:991px){

    .car-detail-page{
        padding:25px 0 60px;
    }

    .car-detail-page .section-title{
        font-size:28px;
    }

    .car-detail-page .booking-sidebar{
        margin-top:40px;
    }

    .car-detail-page .overall-rating{
        text-align:left;
        margin-top:25px;
    }

    .car-detail-page .car-main-image img{
        height:420px;
    }

}

@media (max-width:767px){

    .car-detail-page .section-title{
        font-size:24px;
    }

    .car-detail-page .car-main-image img{
        height:280px;
    }

    .car-detail-page .car-thumb img{
        height:80px;
    }

    .car-detail-page .booking-price{
        font-size:28px;
    }

    .car-detail-page .price-row.total h3{
        font-size:24px;
    }

    .car-detail-page .review-header{
        flex-wrap:wrap;
    }

    .car-detail-page .review-stars{
        width:100%;
        margin-top:10px;
        margin-left:0;
    }

    .car-detail-page .feature-box{
        height:90px;
    }

}

@media (max-width:576px){

    .car-detail-page .booking-header,
    .car-detail-page .booking-body,
    .car-detail-page .review-card,
    .car-detail-page .spec-table,
    .car-detail-page .spec-card{
        padding:20px;
    }

    .car-detail-page .booking-btn{
        height:54px;
        font-size:16px;
    }

    .car-detail-page .overall-rating h2{
        font-size:38px;
    }

    .car-detail-page .spec-value{
        font-size:18px;
    }

    .car-detail-page .review-text{
        font-size:14px;
    }

}

/* ======================================================
   END DETAIL CSS
====================================================== */