/* =============== ROOT COLORS =============== */
:root{
    --gold:#c9a961;
    --dark:#111;
    --gray:#777;
    --border:#eee;
    --bg:#fafafa;
}

/* =============== OVERLAY =============== */
.cart-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    z-index:9998;
    opacity:0;
    visibility:hidden;
    transition:.3s;
}
.cart-overlay.active{
    opacity:1;
    visibility:visible;
}

/* =============== OFFCANVAS =============== */
.cart-offcanvas{
    position:fixed;
    top:0;
    right:-460px;
    width:460px;
    height:100vh;
    background:#fff;
    z-index:9999;
    display:flex;
    flex-direction:column;
    box-shadow:-10px 0 40px rgba(0,0,0,.15);
    transition:.4s cubic-bezier(.25,.8,.25,1);
}
.cart-offcanvas.active{ right:0 }

/* =============== HEADER =============== */
.cart-header{
    padding:22px 26px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(to right,#fff,#fafafa);
}

.cart-header-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.cart-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:21px;
    font-weight:700;
    color:var(--dark);
}

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

.cart-header-count{
    font-size:13px;
    color:var(--gray);
}

.cart-close{
    background:none;
    border:none;
    font-size:26px;
    cursor:pointer;
    color:#888;
    transition:.2s;
}

.cart-close:hover{
    color:#000;
    transform:rotate(90deg);
}

/* =============== BODY =============== */
.cart-body{
    flex:1;
    overflow-y:auto;
    padding:22px 26px;
    background:var(--bg);
}

.cart-items{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* =============== ITEM CARD =============== */
.cart-item{
    display:flex;
    gap:16px;
    padding:16px;
    border-radius:14px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    transition:.25s;
    animation:fadeIn .3s ease;
}

.cart-item:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,0,0,.1);
}

/* IMAGE */
.cart-item-image{
    width:82px;
    height:105px;
    border-radius:10px;
    overflow:hidden;
    background:#f3f3f3;
}

.cart-item-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* DETAILS */
.cart-item-details{
    flex:1;
    display:flex;
    flex-direction:column;
}

.cart-item-title{
    font-size:14px;
    font-weight:700;
    letter-spacing:.4px;
}

.cart-item-variant{
    font-size:12px;
    color:var(--gray);
    margin-top:2px;
}

.cart-item-price{
    font-size:17px;
    font-weight:700;
    margin-top:6px;
    color:var(--dark);
}

/* =============== ACTIONS =============== */
.cart-item-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:auto;
}

/* =============== QTY CONTROL =============== */
.quantity-selector{
    display:flex;
    align-items:center;
    gap:8px;
    height:34px;
    padding:3px;
    border-radius:40px;
    background:#f5f5f5;
    border:1px solid #e4e4e4;
}

.qty-btn{
    width:28px;
    height:28px;
    border-radius:50%;
    border:none;
    background:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.qty-btn:hover{
    background:var(--dark);
    color:#fff;
}

.qty-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
}

.qty-value{
    min-width:28px;
    text-align:center;
    font-size:14px;
    font-weight:700;
}

/* =============== REMOVE =============== */
.cart-item-remove{
    background:none;
    border:none;
    font-size:12px;
    color:#aaa;
    cursor:pointer;
    transition:.2s;
}

.cart-item-remove:hover{
    color:#e53935;
    transform:scale(1.05);
}

/* =============== EMPTY =============== */
.cart-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:70px 20px;
    text-align:center;
}

.empty-cart-icon{
    font-size:90px;
    color:#ddd;
}

.cart-empty h3{
    margin:12px 0;
    font-weight:700;
}

.continue-shopping-btn{
    margin-top:22px;
    padding:13px 36px;
    background:var(--gold);
    color:#fff;
    border:none;
    border-radius:30px;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
}

.continue-shopping-btn:hover{
    background:#b8935a;
    transform:translateY(-1px);
}

/* =============== FOOTER =============== */
.cart-footer{
    padding:22px 26px;
    border-top:1px solid var(--border);
    background:#fff;
}

/* =============== PROMO =============== */
.promo-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px;
    border:1px dashed var(--gold);
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    background:#fffdf7;
}

.promo-input-wrapper{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.promo-input{
    flex:1;
    padding:11px;
    border:1px solid var(--border);
    border-radius:8px;
}

.promo-apply-btn{
    padding:11px 20px;
    background:var(--dark);
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:.25s;
}

.promo-apply-btn:hover{
    background:var(--gold);
}

/* =============== SUMMARY =============== */
.summary-row{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    font-size:14px;
}

.total-row{
    border-top:2px solid var(--border);
    padding-top:12px;
    font-weight:700;
}

.total-amount{
    font-size:22px;
    color:var(--gold);
}

/* =============== CTA =============== */
.checkout-btn{
    width:100%;
    padding:16px;
    background:linear-gradient(135deg,#111,#333);
    color:#fff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    transition:.25s;
}

.checkout-btn:hover{
    background:linear-gradient(135deg,var(--gold),#b8935a);
}

.continue-shopping-link{
    width:100%;
    padding:13px;
    border:1px solid var(--border);
    background:#fff;
    border-radius:8px;
    cursor:pointer;
}

/* =============== FREE SHIPPING =============== */
.free-shipping-banner{
    margin-top:12px;
    padding:12px;
    background:linear-gradient(135deg,#e8f5e9,#f1fff3);
    border-radius:8px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
}

/* =============== MOBILE =============== */
@media(max-width:768px){

    .cart-offcanvas{
        width:100%;
        right:-100%;
    }

    .cart-body{
        padding:18px;
    }

}

/* =============== SCROLL =============== */
.cart-body::-webkit-scrollbar{
    width:5px;
}

.cart-body::-webkit-scrollbar-thumb{
    background:var(--gold);
    border-radius:4px;
}

/* =============== ANIMATION =============== */
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* =============== PLUS / MINUS COLORS =============== */

/* PLUS BUTTON */
.qty-plus{
    background:#e8f5e9 !important;
    color:#2e7d32 !important;
}

.qty-plus:hover{
    background:#2e7d32 !important;
    color:#fff !important;
}

/* MINUS BUTTON */
.qty-minus{
    background:#fdecea !important;
    color:#d32f2f !important;
}

.qty-minus:hover{
    background:#d32f2f !important;
    color:#fff !important;
}

/* DISABLED MINUS */
.qty-minus:disabled{
    background:#f5f5f5 !important;
    color:#bbb !important;
}


/* ========== 3D REMOVE BUTTON ========== */

.cart-item-remove{
    display:flex;
    align-items:center;
    gap:6px;

    padding:6px 14px;
    border:none;
    border-radius:8px;

    background:linear-gradient(145deg,#ffebee,#ffcdd2);
    color:#c62828;

    font-size:12px;
    font-weight:600;

    cursor:pointer;

    box-shadow:
        3px 3px 6px rgba(0,0,0,.15),
        -2px -2px 6px rgba(255,255,255,.8);

    transition:all .2s ease;
}

/* ICON */
.cart-item-remove i{
    font-size:13px;
}

/* HOVER */
.cart-item-remove:hover{
    background:linear-gradient(145deg,#e53935,#c62828);
    color:#fff;

    box-shadow:
        inset 2px 2px 4px rgba(0,0,0,.2),
        inset -2px -2px 4px rgba(255,255,255,.2);

    transform:translateY(1px);
}

/* CLICK (PRESS EFFECT) */
.cart-item-remove:active{
    transform:translateY(2px);

    box-shadow:
        inset 3px 3px 6px rgba(0,0,0,.3);
}

/* ========== MOBILE FULL SCROLL FIX ========== */

@media (max-width: 768px) {

    /* Full height container */
    .cart-offcanvas {
        height: 100vh; /* Better than 100vh for mobile */
        display: flex;
        flex-direction: column;
    }

    /* Scroll only middle area */
    .cart-body {
        flex: 1;
        min-height: 0; /* IMPORTANT for flex scroll */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep footer visible */
    .cart-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 20;
    }

    /* Keep header visible */
    .cart-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 20;
    }
}