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

.cart-page{

 padding-top:140px;
padding-bottom:100px;

min-height:100vh;
 
}

.breadcrumb{

 margin-bottom:30px;

color:var(--gray);
 
}

.breadcrumb a{

 color:var(--primary);
 
}

.page-title{

 margin-bottom:50px;
 
}

.page-title h1{

 font-size:3rem;

margin-bottom:10px;
 
}

.page-title p{

 color:var(--gray);
 
}

/* ==========================
LAYOUT
========================== */

.cart-layout{

 display:grid;

grid-template-columns:
2fr 1fr;

gap:40px;

align-items:start;
 
}

/* ==========================
PRODUCTS
========================== */

.cart-products{

 background:white;

border-radius:20px;

overflow:hidden;

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

.cart-table-header{

 display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

padding:25px;

background:#f8fafc;

font-weight:600;

border-bottom:1px solid var(--border);
 
}

/* ==========================
CART ITEM
========================== */

.cart-item{

 display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:20px;

align-items:center;

padding:25px;

border-bottom:1px solid var(--border);
 
}

.cart-product{

 display:flex;

gap:20px;

align-items:center;
 
}

.cart-product img{

 width:120px;
height:120px;

object-fit:cover;

border-radius:15px;
 
}

.cart-product h3{

 margin-bottom:10px;
 
}

.cart-product p{

 color:var(--gray);
 
}

/* ==========================
QUANTITY
========================== */

.quantity-box{

 display:flex;

align-items:center;

gap:10px;
 
}

.quantity-box button{

 width:40px;
height:40px;

border-radius:10px;

background:#f8fafc;

font-size:1.1rem;
 
}

.quantity-box input{

 width:70px;

text-align:center;

padding:10px;

border:1px solid var(--border);

border-radius:10px;
 
}

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

.price{

 font-weight:700;

color:var(--primary);

font-size:1.1rem;
 
}

/* ==========================
REMOVE BUTTON
========================== */

.remove-btn{

 background:#fee2e2;

color:#dc2626;

padding:12px 18px;

border-radius:10px;

font-weight:600;
 
}

.remove-btn:hover{

 transform:translateY(-2px);
 
}

/* ==========================
COUPON
========================== */

.coupon-section{

 padding:30px;
 
}

.coupon-section h3{

 margin-bottom:15px;
 
}

.coupon-box{

 display:flex;

gap:15px;
 
}

.coupon-box input{

 flex:1;

padding:15px;

border:1px solid var(--border);

border-radius:12px;
 
}

/* ==========================
ORDER SUMMARY
========================== */

.order-summary{

 background:white;

border-radius:20px;

padding:35px;

box-shadow:var(--shadow);

 
}

.order-summary h2{

 margin-bottom:30px;
 
}

.summary-row{

 display:flex;

justify-content:space-between;

padding:15px 0;

border-bottom:1px solid var(--border);
 
}

.summary-row.total{

 font-size:1.3rem;

font-weight:700;

color:var(--primary);
 
}

/* ==========================
SHIPPING
========================== */

.shipping-estimate{

 margin-top:30px;
 
}

.shipping-estimate h4{

 margin-bottom:15px;
 
}

.shipping-estimate select{

 width:100%;

padding:15px;

border:1px solid var(--border);

border-radius:12px;
 
}

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

.checkout-btn{

 width:100%;

margin-top:30px;
 
}

.continue-shopping{

 display:block;

text-align:center;

margin-top:20px;

color:var(--primary);

font-weight:600;
 
}

/* ==========================
EMPTY CART
========================== */

.empty-cart{

 display:none;
 
}

.empty-cart-box{

 text-align:center;

max-width:600px;

margin:auto;

padding:80px 40px;

background:white;

border-radius:20px;

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

.empty-cart-box h2{

 margin-bottom:20px;
 
}

.empty-cart-box p{

 color:var(--gray);

margin-bottom:30px;
 
}

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

@media (max-width:1200px){

 .cart-layout{

    grid-template-columns:1fr;
}

.order-summary{

    position:relative;

    top:auto;
}
 
}

@media (max-width:992px){

 .cart-table-header{

    display:none;
}

.cart-item{

    grid-template-columns:1fr;

    text-align:center;
}

.cart-product{

    flex-direction:column;
}

.quantity-box{

    justify-content:center;
}
 
}

@media (max-width:768px){

 .cart-page{

    padding-top:120px;
}

.page-title h1{

    font-size:2.2rem;
}

.coupon-box{

    flex-direction:column;
}

.coupon-box button{

    width:100%;
}
 
}

@media (max-width:576px){

 .cart-product img{

    width:100px;
    height:100px;
}

.order-summary{

    padding:25px;
}

.page-title h1{

    font-size:1.8rem;
}
 
}


.reveal{

    opacity:1;

    transform:none;

    transition:
    opacity .9s ease,
    transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:
    translateY(0);

}

.hamburger{

    display:none;

    font-size:30px;

    cursor:pointer;

}

@media(max-width:1200px){

    .hamburger{

        display:block;

    }

    .nav{

        position:absolute;

        top:80px;

        right:20px;

        width:220px;

        background:#fff;

        border-radius:12px;

        box-shadow:
        0 10px 30px
        rgba(0,0,0,.15);

        display:none;

        z-index:999;

    }

    .nav.active{

        display:block;

    }

    .nav-links{

        flex-direction:column;

        padding:15px;

        gap:15px;

    }

}

/* ==========================
   CART PAGE DARK MODE FIX
========================== */

.dark-mode .cart-page{
    background:#020617;
    color:#f8fafc;
}

.dark-mode .breadcrumb,
.dark-mode .breadcrumb a,
.dark-mode .page-title h1,
.dark-mode .page-title p{
    color:#f8fafc;
}

.dark-mode .cart-products,
.dark-mode .order-summary,
.dark-mode .shipping-estimate,
.dark-mode .empty-cart-box,
.dark-mode .coupon-section{
    background:#0f172a !important;
    color:#f8fafc !important;
    box-shadow:
    0 15px 40px rgba(0,0,0,.35);
}

.dark-mode .cart-table-header{
    background:#111827 !important;
    color:#f8fafc !important;
    border-bottom:1px solid #334155;
}

.dark-mode #cartItemsContainer{
    background:#0f172a;
    color:#f8fafc;
}

.dark-mode #cartItemsContainer *{
    color:#f8fafc;
}

.dark-mode .cart-item,
.dark-mode .cart-product,
.dark-mode .cart-row{
    background:#111827 !important;
    color:#f8fafc !important;
    border-bottom:1px solid #334155;
}

.dark-mode .cart-item h3,
.dark-mode .cart-item p,
.dark-mode .cart-product h3,
.dark-mode .cart-product p,
.dark-mode .cart-row h3,
.dark-mode .cart-row p{
    color:#f8fafc !important;
}

.dark-mode .summary-row{
    color:#f8fafc;
    border-bottom:1px solid #334155;
}

.dark-mode .summary-row span,
.dark-mode .summary-row strong{
    color:#f8fafc;
}

.dark-mode .summary-row.total{
    color:#fbbf24;
}

.dark-mode .summary-row.total span,
.dark-mode .summary-row.total strong{
    color:#fbbf24;
}

.dark-mode .shipping-estimate h4,
.dark-mode .coupon-section h3{
    color:#f8fafc;
}

.dark-mode .shipping-estimate select,
.dark-mode .coupon-box input{
    background:#111827;
    color:#f8fafc;
    border:1px solid #334155;
}

.dark-mode .shipping-estimate select option{
    background:#111827;
    color:#f8fafc;
}

.dark-mode .continue-shopping{
    color:#fbbf24;
}

.dark-mode .empty-cart{
    background:#020617;
}

.dark-mode .empty-cart-box h2{
    color:#f8fafc;
}

.dark-mode .empty-cart-box p{
    color:#cbd5e1;
}

/* ==========================
   CART REMOVE BUTTON DARK MODE
========================== */

.dark-mode .remove-btn,
.dark-mode .remove-cart-btn,
.dark-mode .cart-remove-btn,
.dark-mode .delete-btn,
.dark-mode button[data-action="remove"]{
    background:#7f1d1d !important;
    color:#ffffff !important;
    border:1px solid #ef4444 !important;
    border-radius:10px;
    padding:10px 14px;
    font-weight:700;
}

.dark-mode .remove-btn:hover,
.dark-mode .remove-cart-btn:hover,
.dark-mode .cart-remove-btn:hover,
.dark-mode .delete-btn:hover,
.dark-mode button[data-action="remove"]:hover{
    background:#dc2626 !important;
    color:#ffffff !important;
}


/* =========================================================
   CompanionReviewHub REQUEST REVIEW CART IMPROVEMENTS
   Add this section at the bottom of cart.css
========================================================= */

/* Page spacing and safe width */
.cart-page{
    background:#f8fafc;
}

.cart-page .container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

/* Request Review Notice added by cart.js */
.request-review-notice{
    width:90%;
    max-width:1200px;
    margin:0 auto 35px;
    padding:30px 34px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-left:6px solid #d97706;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.request-review-notice h3{
    font-size:1.45rem;
    color:#92400e;
    margin-bottom:12px;
}

.request-review-notice p{
    color:#4b5563;
    line-height:1.8;
    margin-bottom:10px;
}

.request-review-notice p:last-child{
    margin-bottom:0;
}

/* Empty request message inside sidebar */
.cart-empty-message{
    padding:22px;
    text-align:center;
    color:#4b5563;
}

.cart-empty-message p{
    margin-bottom:10px;
    line-height:1.7;
}

.cart-empty-message p:first-child{
    font-weight:800;
    color:#111827;
}

/* Cart item text generated by cart.js */
.request-status-text{
    display:inline-block;
    margin-top:8px;
    padding:7px 12px;
    background:#ecfdf5;
    color:#047857 !important;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
}

.cart-product h3{
    line-height:1.35;
}

.cart-product p{
    line-height:1.6;
}

/* Better cart product layout */
.cart-products{
    border:1px solid #e5e7eb;
}

.cart-item:last-child{
    border-bottom:none;
}

.cart-item .price{
    line-height:1.55;
    word-break:normal;
}

/* Make summary clearer after payment removal */
.order-summary{
    position:sticky;
    top:110px;
    border:1px solid #e5e7eb;
}

.order-summary h2{
    color:#111827;
    line-height:1.3;
}

.summary-row span{
    color:#4b5563;
    line-height:1.5;
}

.summary-row strong{
    color:#111827;
    text-align:right;
}

.summary-row.total{
    margin-top:8px;
    padding-top:20px;
}

/* Shipping estimate section */
.shipping-estimate{
    padding-top:5px;
}

.shipping-estimate select{
    background:#ffffff;
    color:#111827;
    outline:none;
}

.shipping-estimate select:focus,
.coupon-box input:focus{
    border-color:#d97706;
    box-shadow:0 0 0 4px rgba(217,119,6,.12);
}

/* Buttons */
.checkout-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    border-radius:999px;
    font-weight:800;
    text-align:center;
}

.continue-shopping{
    line-height:1.6;
}

/* Better empty cart section */
.empty-cart{
    padding-top:140px;
    padding-bottom:100px;
    min-height:100vh;
    background:#f8fafc;
}

.empty-cart-box{
    border:1px solid #e5e7eb;
}

.empty-cart-box h2{
    color:#111827;
    line-height:1.3;
}

.empty-cart-box p{
    line-height:1.8;
}

/* Sidebar cart item created by cart.js */
.cart-product-item{
    display:grid;
    grid-template-columns:75px 1fr 42px;
    gap:14px;
    align-items:center;
    padding:16px;
    border-bottom:1px solid #e5e7eb;
}

.cart-product-item img{
    width:75px;
    height:75px;
    object-fit:cover;
    border-radius:14px;
}

.cart-product-item h4{
    font-size:1rem;
    line-height:1.35;
    margin-bottom:6px;
    color:#111827;
}

.cart-product-item p{
    margin:4px 0;
    color:#4b5563;
    font-size:.92rem;
    line-height:1.45;
}

.cart-product-item button{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fee2e2;
    color:#dc2626;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cart-product-item button:hover{
    background:#dc2626;
    color:#ffffff;
}


/* =========================================================
   DARK MODE REQUEST REVIEW CART IMPROVEMENTS
========================================================= */

.dark-mode .cart-page{
    background:#020617;
}

.dark-mode .request-review-notice{
    background:#1e293b;
    border:1px solid #334155;
    border-left:6px solid #d97706;
    box-shadow:0 15px 40px rgba(0,0,0,.4);
}

.dark-mode .request-review-notice h3{
    color:#fbbf24;
}

.dark-mode .request-review-notice p{
    color:#cbd5e1;
}

.dark-mode .request-status-text{
    background:#064e3b;
    color:#d1fae5 !important;
}

.dark-mode .cart-empty-message{
    color:#cbd5e1;
}

.dark-mode .cart-empty-message p:first-child{
    color:#f8fafc;
}

.dark-mode .cart-products,
.dark-mode .order-summary{
    border:1px solid #334155;
}

.dark-mode .order-summary h2{
    color:#f8fafc;
}

.dark-mode .summary-row span{
    color:#cbd5e1;
}

.dark-mode .summary-row strong{
    color:#f8fafc;
}

.dark-mode .empty-cart{
    background:#020617;
}

.dark-mode .empty-cart-box{
    border:1px solid #334155;
}

.dark-mode .shipping-estimate select:focus,
.dark-mode .coupon-box input:focus{
    border-color:#d97706;
    box-shadow:0 0 0 4px rgba(217,119,6,.2);
}

.dark-mode .cart-product-item{
    background:#0f172a;
    border-bottom:1px solid #334155;
}

.dark-mode .cart-product-item h4{
    color:#f8fafc;
}

.dark-mode .cart-product-item p{
    color:#cbd5e1;
}

.dark-mode .cart-product-item button{
    background:#7f1d1d;
    color:#ffffff;
    border:1px solid #ef4444;
}

.dark-mode .cart-product-item button:hover{
    background:#dc2626;
    color:#ffffff;
}


/* =========================================================
   RESPONSIVE REQUEST REVIEW CART FIXES
========================================================= */

@media(max-width:1200px){

    .order-summary{
        position:relative;
        top:auto;
    }

    .request-review-notice{
        margin-bottom:30px;
    }

}

@media(max-width:992px){

    .cart-layout{
        gap:30px;
    }

    .cart-products{
        overflow:visible;
        border-radius:18px;
    }

    .cart-item{
        display:grid;
        grid-template-columns:1fr;
        gap:18px;
        text-align:center;
        padding:26px 20px;
    }

    .cart-product{
        justify-content:center;
    }

    .cart-item .price{
        font-size:1rem;
    }

    .request-status-text{
        margin-left:auto;
        margin-right:auto;
    }

}

@media(max-width:768px){

    .request-review-notice{
        width:90%;
        padding:24px 20px;
        border-radius:18px;
    }

    .request-review-notice h3{
        font-size:1.2rem;
    }

    .request-review-notice p{
        font-size:.95rem;
        line-height:1.75;
    }

    .cart-page{
        padding-top:115px;
        padding-bottom:70px;
    }

    .page-title{
        margin-bottom:32px;
    }

    .page-title h1{
        font-size:2rem;
        line-height:1.25;
    }

    .page-title p{
        line-height:1.7;
    }

    .cart-layout{
        gap:25px;
    }

    .cart-products,
    .order-summary,
    .empty-cart-box{
        border-radius:18px;
    }

    .cart-product img{
        width:110px;
        height:110px;
    }

    .order-summary{
        padding:28px 22px;
    }

    .summary-row{
        gap:20px;
        align-items:flex-start;
    }

    .summary-row span,
    .summary-row strong{
        font-size:.95rem;
    }

    .summary-row.total span,
    .summary-row.total strong{
        font-size:1.08rem;
    }

    .checkout-btn{
        min-height:52px;
        padding:14px 18px;
    }

}

@media(max-width:576px){

    .cart-page .container{
        width:92%;
    }

    .request-review-notice{
        width:92%;
        padding:22px 18px;
        margin-bottom:24px;
    }

    .cart-item{
        padding:22px 16px;
    }

    .cart-product img{
        width:96px;
        height:96px;
    }

    .cart-product h3{
        font-size:1.05rem;
    }

    .request-status-text{
        font-size:.78rem;
        padding:6px 10px;
    }

    .order-summary{
        padding:24px 18px;
    }

    .summary-row{
        padding:13px 0;
    }

    .cart-product-item{
        grid-template-columns:62px 1fr 36px;
        gap:10px;
        padding:14px 12px;
    }

    .cart-product-item img{
        width:62px;
        height:62px;
        border-radius:12px;
    }

    .cart-product-item h4{
        font-size:.92rem;
    }

    .cart-product-item p{
        font-size:.82rem;
    }

    .cart-product-item button{
        width:34px;
        height:34px;
    }

}

@media(max-width:420px){

    .summary-row{
        flex-direction:column;
        gap:5px;
    }

    .summary-row strong{
        text-align:left;
    }

    .page-title h1{
        font-size:1.7rem;
    }

}