/*
==========================================================
 Product Page Styling

 Modern dealership product layout

==========================================================
*/


.product-page {

    padding:30px 15px;

}





/* ==========================
   Product Header
========================== */


.product-header {

    margin-bottom:30px;

}



.product-header h1 {

    font-size:34px;

    font-weight:700;

    color:#333;

}





/* ==========================
   Gallery
========================== */


.product-gallery {

    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    padding:15px;

}



.product-gallery ul {

    padding:0;

    margin:0;

}



.product-gallery li {

    list-style:none;

}



.product-gallery img {

    width:100%;

    max-height:600px;

    object-fit:contain;

}





.product-gallery a {

    color:#0066cc;

}





/* ==========================
   Product Information
========================== */


.product-info-card {


    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    padding:20px;

    margin-bottom:20px;


}



.product-price {


    font-size:34px;

    color:#000000;

    font-weight:700;

    margin-top:0;


}



.product-info-card table {


    margin-top:20px;


}





/* ==========================
   Order Box
========================== */


.product-order-card {


    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    padding:20px;


}



.product-order-card h3 {


    margin-top:0;

    font-size:22px;


}





/* ==========================
   Full Width Sections
========================== */


.product-section {


    margin-top:30px;

    border-radius:10px;

}



.product-section .panel-heading {


    font-size:18px;

    font-weight:bold;


}





/* ==========================
   Buttons
========================== */


.product-page .btn {


    border-radius:5px;


}





/* ==========================
   Mobile
========================== */


@media(max-width:768px){



.product-header h1 {


    font-size:25px;


}



.product-price {


    font-size:28px;


}



.product-gallery img {


    max-height:400px;


}



}

.product-detail-card {

    border:1px solid #ddd;
    border-radius:8px;
    margin-top:30px;
    background:#fff;
    overflow:hidden;

}


.product-detail-card-title {

    padding:15px 20px;
    font-size:20px;
    font-weight:700;
    background:#f7f7f7;
    border-bottom:1px solid #ddd;

}


.product-detail-card-content {

    padding:20px;
    font-size:16px;
    line-height:1.7;
    text-align:left;

}

.order-login-message {

    border:2px solid #f0ad4e;

    border-radius:8px;

    margin-top:15px;

    overflow:hidden;

}


.order-login-title {

    background:#f0ad4e;

    color:#fff;

    font-size:22px;

    font-weight:700;

    padding:15px;

    text-align:center;

}


.order-login-content {

    padding:20px;

    text-align:center;

    font-size:16px;

    line-height:1.6;

}


.order-login-content .btn {

    margin:5px;

    min-width:120px;

}

/* ==========================================
   Product right column layout
   Desktop: match gallery height
========================================== */


@media (min-width: 992px) {


.product-page .row {

    display:flex;

    align-items:stretch;

}



.product-page .col-md-7,
.product-page .col-md-5 {

    display:flex;

    flex-direction:column;

}



.product-page .col-md-5 {

    gap:20px;

}



.product-page .product-info-card,
.product-page .content-card {

    width:100%;

}




.product-page .product-gallery {

    height:100%;

}




.product-page .col-md-7 .product-gallery img {

    max-height:600px;

    object-fit:contain;

}


}

.product-right-column {

    display:flex;

    flex-direction:column;

}
/* ==========================================================
   PRODUCT GALLERY
========================================================== */

.product-gallery-card{

    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    padding:16px;

    margin-bottom:25px;

}


.product-main-image{

    display:flex;

    justify-content:center;

    align-items:center;

}


.product-main-image img{

    width:100%;

    max-height:650px;

    object-fit:contain;

    cursor:pointer;

}


.gallery-classic-link{

    text-align:center;

    margin-top:12px;

}


.gallery-classic-link a{

    font-size:14px;

}
/* ==========================================================
   PRODUCT INFO CARD
========================================================== */

.product-info-card{

    margin-bottom:20px;

}


.product-price{

    font-size:34px;

    font-weight:700;

    color:#d9831f;

    margin-bottom:20px;

    text-align:center;

}


.product-specs{

    margin-bottom:0;

}


.product-specs th{

    width:35%;

    font-weight:600;

    background:#fafafa;

}


.product-specs td{

    vertical-align:middle;

}
/* ==========================================================
   PRODUCT ORDER CARD
========================================================== */

.product-order-card{

    margin-bottom:25px;

}

.order-card-title{

    text-align:center;

    font-size:24px;

    font-weight:700;

    margin-bottom:20px;

}

.order-login-box{

    text-align:center;

}

.product-order-card .btn{

    border-radius:6px;

}

.product-order-card select{

    margin-bottom:5px;

}

/* ==========================================================
   PRODUCT CONTENT CARDS
========================================================== */

.product-section{

    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    padding:24px;

    margin-top:25px;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.product-section h3{

    margin-top:0;

    margin-bottom:18px;

    font-size:24px;

    font-weight:700;

    padding-bottom:12px;

    border-bottom:1px solid #eee;

}

.product-description{

    line-height:1.8;

}

.product-section p{

    line-height:1.8;

}

/*=========================================================
MODERN PRODUCT GALLERY
=========================================================*/

.product-gallery-card{

    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    padding:18px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

.product-main-image{

    display:flex;

    align-items:center;

    justify-content:center;

    height:520px;

    overflow:hidden;

    background:#fafafa;

    border-radius:8px;

    cursor:pointer;

}

.product-main-image img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    transition:.25s;

}

.product-main-image:hover img{

    transform:scale(1.02);

}

.product-thumbnails{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

}

.gallery-thumb{

    width:90px;

    height:70px;

    object-fit:cover;

    border:2px solid transparent;

    border-radius:6px;

    cursor:pointer;

    transition:.2s;

}

.gallery-thumb:hover{

    border-color:#f0ad4e;

}

.gallery-thumb.active{

    border-color:#f0ad4e;

}

.gallery-hidden{

    display:none;

}

.gallery-link{

    margin-top:20px;

}

@media(max-width:991px){

.product-main-image{

    height:380px;

}

.gallery-thumb{

    width:70px;

    height:55px;

}

}

/* ==========================================================
   DESKTOP PRODUCT LAYOUT POLISH
========================================================== */

@media (min-width: 1200px){

    /* Top row */
    .product-top-row{

        display:flex;
        align-items:flex-start;
        gap:30px;
    }

    /* Gallery column */
    .product-top-row > .col-lg-7{

        flex:0 0 calc(58.333333% - 15px);
        max-width:calc(58.333333% - 15px);
        width:calc(58.333333% - 15px);
    }

    /* Right column */
    .product-top-row > .product-right-column{

        flex:0 0 calc(41.666667% - 15px);
        max-width:calc(41.666667% - 15px);
        width:calc(41.666667% - 15px);

        display:flex;
        flex-direction:column;
        gap:20px;

        position:sticky;
        top:90px;
    }

    /* Both cards equal width */
    .product-right-column .product-info-card,
    .product-right-column .product-order-card{

        width:100%;
        margin:0;
    }

    /* Make the order card grow to balance the gallery height */
    .product-right-column .product-order-card{

        flex:1;
    }

    /* Better spacing inside the order card */
    .product-order-card form,
    .product-order-card .order-login-box{

        display:flex;
        flex-direction:column;
        height:100%;
    }

    /* Larger action button */
    .product-order-card .btn-warning.btn-lg{

        margin-top:auto;
        padding:14px 20px;
        font-size:18px;
        font-weight:700;
    }

    /* Keep the gallery visually balanced */
    .gallery-main{

        height:620px;
    }
}


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

@media (min-width: 992px) and (max-width: 1199px){

    .product-right-column{

        display:flex;
        flex-direction:column;
        gap:20px;
    }

    .gallery-main{

        height:520px;
    }
}


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

@media (max-width: 991px){

    .product-right-column{

        margin-top:25px;
    }
}

/* ==========================================================
   ORDER CARD HEADER
========================================================== */

.order-card-header{

    border-bottom:1px solid #eee;
    margin:-24px -24px 24px -24px;
    padding:18px 24px;
    background:#fafafa;
    border-radius:10px 10px 0 0;
}

.order-card-title{

    margin:0;
    text-align:center;
    font-size:24px;
    font-weight:700;
}

/* ==========================================================
   PRODUCT PAGE POLISH
========================================================== */

.product-page{
    padding-top:25px;
    padding-bottom:40px;
}

/* Breadcrumb */
.product-breadcrumb{
    margin-bottom:20px;
    font-size:14px;
    color:#777;
}

.product-breadcrumb a{
    color:#555;
    text-decoration:none;
}

.product-breadcrumb a:hover{
    color:#ec971f;
}

.breadcrumb-separator{
    margin:0 8px;
    color:#bbb;
}

/* Header */
.product-header{
    margin-bottom:30px;
}

.product-header h1{
    font-size:34px;
    font-weight:800;
    color:#222;
    line-height:1.3;
    margin:0;
}

/* Sticky sidebar */
.product-sidebar-sticky{
    position:sticky;
    top:20px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* Price box */
.product-price-box{
    background:#fff8ef;
    border:1px solid #f4d7b5;
    border-radius:16px;
    padding:18px 20px;
    margin-bottom:18px;
}

.product-price-label{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#a06a22;
    margin-bottom:6px;
}

.product-price{
    font-size:38px;
    font-weight:800;
    color:#000000;
    line-height:1.1;
}

/* Specs */
.product-specs-title{
    font-size:18px;
    font-weight:700;
    color:#222;
    margin-bottom:12px;
}

.product-specs-table{
    margin-bottom:0;
}

.product-specs-table > tbody > tr > th{
    width:42%;
    font-weight:700;
    color:#444;
    border-top:1px solid #eee;
    padding:14px 0;
}

.product-specs-table > tbody > tr > td{
    border-top:1px solid #eee;
    padding:14px 0;
    color:#222;
}

.product-specs-table > tbody > tr:first-child > th,
.product-specs-table > tbody > tr:first-child > td{
    border-top:none;
}

/* Better spacing between content cards */
.product-content-section .content-card{
    margin-top:24px;
}

/* Mobile */
@media (max-width: 991px){

    .product-sidebar-sticky{
        position:static;
    }

    .product-top-row{
        display:flex;
        flex-direction:column;
        gap:22px;
    }
}

@media (max-width: 767px){

    .product-specs-table > tbody > tr > th{
        width:42%;
        white-space:nowrap;
        padding:12px 0;
        font-size:14px;
    }

    .product-specs-table > tbody > tr > td{
        padding:12px 0;
        font-size:14px;
    }

    .product-specs-table td .product-status-badge{
        font-size:11px;
        padding:5px 10px;
    }
}

/* ==========================================================
   PRODUCT STATUS BADGE FIX
========================================================== */

.product-specs-table td .product-status-badge{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;

    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    line-height:1.2;
    white-space:nowrap;

    margin:0;
    vertical-align:middle;
}

.product-specs-table td .status-available{
    background:#e8f7ee !important;
    color:#1f7a3f !important;
    border:1px solid #b8e3c8 !important;
}

.product-specs-table td .status-pending{
    background:#fff4df !important;
    color:#a56600 !important;
    border:1px solid #f2d29b !important;
}

.product-specs-table td .status-sold{
    background:#fdeaea !important;
    color:#b42318 !important;
    border:1px solid #f3c2c2 !important;
}


/* ==========================================================
   Product Order Card
========================================================== */

.order-card {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 18px;
    padding: 26px;
    margin-top: 22px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.order-card-title {
    margin: 0 0 18px;
    font-size: 2.2rem;
    font-weight: 700;
    color: #222;
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #ececec;
}

.order-card-notice {
    background: #f8f5ef;
    border: 1px solid #ead9b8;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
    color: #444;
    font-size: 1.4rem;
}

.order-card-notice p {
    margin: 0 0 10px;
}

.order-notice-list {
    margin: 0;
    padding-left: 18px;
}

.order-notice-list li + li {
    margin-top: 8px;
}

.order-card .form-group {
    margin-bottom: 18px;
}

.order-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.order-card .form-control {
    height: 46px;
    border-radius: 10px;
    border: 1px solid #d6d6d6;
    box-shadow: none;
}

.order-card .form-control:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(236,151,31,.15);
}

.order-card-actions {
    margin-top: 10px;
}

.order-card-actions .btn {
    height: 46px;
    border-radius: 10px;
    font-weight: 600;
}

.product-unavailable-alert {
    margin: 0;
    border-radius: 14px;
    line-height: 1.6;
}