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

:root{
    --primary:#5A321E;
    --primary-dark:#321A10;
    --primary-light:#87573B;

    --gold:#C99B3C;
    --gold-dark:#A97922;
    --gold-light:#F3D995;

    --cream:#FFF9F0;
    --cream-dark:#F5E9D8;
    --soft-bg:#FBF6EF;

    --white:#FFFFFF;
    --dark:#251B16;
    --text:#62544D;
    --muted:#8A7B73;
    --border:#E9DDCF;

    --danger:#C74B50;
    --danger-dark:#A9343D;
    --success:#2E8B57;

    --shadow-sm:0 8px 24px rgba(70,42,25,.08);
    --shadow-md:0 16px 38px rgba(70,42,25,.14);
}


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

.cart-page{
    min-height:100vh;
    padding:80px 8%;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(201,155,60,.10),
            transparent 26%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(90,50,30,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--cream),
            var(--soft-bg)
        );

    color:var(--dark);
}

.cart-container{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
    gap:30px;

    margin-top:40px;
}


/* ==============================
   CART ITEMS
============================== */

.cart-items{
    padding:24px;

    overflow:hidden;

    border:1px solid rgba(201,155,60,.22);
    border-radius:18px;

    background:rgba(255,255,255,.95);

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

.cart-header{
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr 80px;
    gap:15px;

    margin-bottom:10px;
    padding:0 0 16px;

    border-bottom:2px solid var(--cream-dark);

    color:var(--primary);

    font-size:14px;
    font-weight:700;
}

.cart-product{
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr 80px;
    align-items:center;
    gap:15px;

    padding:22px 0;

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

    transition:
        background .3s ease,
        transform .3s ease;
}

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

.cart-product:hover{
    background:rgba(255,249,240,.75);
}


/* ==============================
   PRODUCT INFO
============================== */

.product-info{
    display:flex;
    align-items:center;
    gap:16px;
}

.product-info img{
    width:92px;
    height:92px;

    flex-shrink:0;

    object-fit:cover;

    border:1px solid rgba(201,155,60,.25);
    border-radius:12px;

    background:var(--cream);

    box-shadow:0 8px 20px rgba(70,42,25,.10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.cart-product:hover .product-info img{
    transform:scale(1.04);

    box-shadow:0 12px 26px rgba(70,42,25,.15);
}

.product-info h4{
    margin-bottom:7px;

    color:var(--primary);

    font-size:17px;
    font-weight:700;
    line-height:1.4;
}

.product-info p{
    color:var(--muted);

    font-size:13px;
    line-height:1.6;
}


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

.cart-product > div:not(.product-info):not(.quantity-box){
    color:var(--text);

    font-size:14px;
    font-weight:600;
}


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

.quantity-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.qty-btn{
    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(201,155,60,.30);
    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--white);

    cursor:pointer;

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

    box-shadow:0 6px 16px rgba(70,42,25,.16);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.qty-btn:hover{
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    transform:translateY(-2px);

    box-shadow:0 9px 20px rgba(169,121,34,.22);
}

.qty-btn:active{
    transform:translateY(0);
}

.qty-number{
    min-width:28px;

    color:var(--dark);

    text-align:center;
    font-size:14px;
    font-weight:700;
}


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

.remove-btn{
    width:41px;
    height:41px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #D85A62,
            var(--danger-dark)
        );

    color:var(--white);

    cursor:pointer;

    box-shadow:0 7px 18px rgba(169,52,61,.20);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.remove-btn:hover{
    background:
        linear-gradient(
            135deg,
            var(--danger),
            #8C2931
        );

    transform:scale(1.08);

    box-shadow:0 10px 24px rgba(169,52,61,.28);
}


/* ==============================
   CART SUMMARY
============================== */

.cart-summary{
    position:sticky;
    top:110px;

    height:fit-content;
    padding:27px;

    border:1px solid rgba(201,155,60,.24);
    border-radius:18px;

    background:rgba(255,255,255,.96);

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

.cart-summary h3{
    margin-bottom:22px;
    padding-bottom:13px;

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

    color:var(--primary);

    font-size:22px;
    font-weight:700;
}

.cart-summary h3::after{
    content:"";

    width:48px;
    height:3px;

    margin-top:8px;

    display:block;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--primary)
    );
}

.summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    margin:15px 0;

    color:var(--text);

    font-size:14px;
}

.summary-row span:last-child{
    color:var(--dark);

    font-weight:600;
}

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

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

    color:var(--primary);

    font-size:21px;
    font-weight:700;
}

.summary-row.total span:last-child{
    color:var(--gold-dark);

    font-size:23px;
}


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

.checkout-btn,
.clear-btn{
    width:100%;
    min-height:50px;

    margin-top:14px;
    padding:13px 18px;

    border:none;
    border-radius:26px;

    cursor:pointer;

    color:var(--white);

    font-size:14px;
    font-weight:700;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.checkout-btn{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:0 10px 24px rgba(70,42,25,.22);
}

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

    transform:translateY(-2px);

    box-shadow:0 13px 28px rgba(169,121,34,.25);
}

.clear-btn{
    background:
        linear-gradient(
            135deg,
            #D85A62,
            var(--danger-dark)
        );

    box-shadow:0 8px 20px rgba(169,52,61,.18);
}

.clear-btn:hover{
    background:
        linear-gradient(
            135deg,
            var(--danger),
            #8C2931
        );

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(169,52,61,.25);
}


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

.coupon-box{
    display:flex;
    gap:10px;

    margin:22px 0 8px;
}

.coupon-box input{
    width:100%;
    flex:1;

    padding:12px 14px;

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

    background:var(--cream);

    color:var(--dark);

    font-family:inherit;
    font-size:13px;

    outline:none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.coupon-box input::placeholder{
    color:var(--muted);
}

.coupon-box input:focus{
    border-color:var(--gold);

    background:var(--white);

    box-shadow:0 0 0 3px rgba(201,155,60,.13);
}

.coupon-box button{
    padding:12px 20px;

    flex-shrink:0;

    border:none;
    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--white);

    cursor:pointer;

    font-size:13px;
    font-weight:700;

    transition:
        transform .3s ease,
        background .3s ease;
}

.coupon-box button:hover{
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    transform:translateY(-2px);
}

#couponMessage{
    min-height:20px;
    margin-top:10px;

    color:var(--success);

    font-size:13px;
    font-weight:600;
    line-height:1.5;
}


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

.empty-cart{
    padding:95px 20px;

    text-align:center;
}

.empty-cart i{
    margin-bottom:22px;

    color:var(--gold);

    font-size:78px;

    filter:drop-shadow(0 10px 16px rgba(169,121,34,.18));
}

.empty-cart h2{
    margin-bottom:8px;

    color:var(--primary);

    font-size:27px;
}

.empty-cart p{
    color:var(--muted);

    font-size:14px;
}

.shop-btn{
    margin-top:22px;
    padding:13px 30px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border-radius:26px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--white);

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    box-shadow:0 10px 24px rgba(70,42,25,.22);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.shop-btn:hover{
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(169,121,34,.25);
}


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

@media(max-width:1100px){

    .cart-page{
        padding-left:5%;
        padding-right:5%;
    }

    .cart-container{
        grid-template-columns:1fr;
    }

    .cart-summary{
        position:static;
    }

}


@media(max-width:992px){

    .cart-header{
        display:none;
    }

    .cart-product{
        grid-template-columns:1fr;
        gap:17px;

        padding:24px 0;

        text-align:center;
    }

    .product-info{
        flex-direction:column;

        text-align:center;
    }

    .product-info img{
        width:115px;
        height:115px;
    }

    .quantity-box{
        justify-content:center;
    }

    .remove-btn{
        margin:auto;
    }

}


@media(max-width:600px){

    .cart-page{
        padding:55px 15px;
    }

    .cart-container{
        margin-top:28px;
        gap:20px;
    }

    .cart-items,
    .cart-summary{
        padding:19px 16px;

        border-radius:15px;
    }

    .product-info h4{
        font-size:16px;
    }

    .summary-row.total{
        font-size:19px;
    }

    .summary-row.total span:last-child{
        font-size:21px;
    }

    .coupon-box{
        flex-direction:column;
    }

    .coupon-box button{
        width:100%;
    }

    .empty-cart{
        padding:70px 15px;
    }

    .empty-cart i{
        font-size:64px;
    }

    .empty-cart h2{
        font-size:23px;
    }

}


@media(max-width:360px){

    .cart-page{
        padding-left:10px;
        padding-right:10px;
    }

    .cart-items,
    .cart-summary{
        padding-left:13px;
        padding-right:13px;
    }

    .product-info img{
        width:100px;
        height:100px;
    }

    .qty-btn{
        width:33px;
        height:33px;
    }

}