:root{
     --background-color: rgba(188, 131, 74, 1);
     --panel-color: rgba(255, 248, 239, 0.95);
     --panel-border: rgba(94, 53, 23, 0.18);
     --text-color: #3d2411;
     --accent-color: #bb5d2f;
     --accent-soft: rgba(187, 93, 47, 0.12);
}

body{
    background-color: var(--background-color);
    color: var(--text-color);
}

.cart-page{
    width:min(1100px, calc(100% - 2rem));
    margin: 1.5rem auto 8rem;
}

.cart-panel{
    display:flex;
    flex-direction:column;
    gap:5vh;
    background: var(--panel-color);
    border: 1px solid var(--panel-border);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 18px 48px rgba(69, 34, 12, 0.16);
    backdrop-filter: blur(4px);
    color : var(--text-color);
}

.cart-header{
    display:flex;
    flex-direction:column;
    gap:0.35rem;
    margin-bottom:1rem;
}

.cart-header h1,
footer h1{
    margin:0;
}

.cart-subtitle{
    margin:0;
    opacity:0.85;
    color : var(--text-color);
}

.cart-notification{
    min-height: 0;
    margin-bottom: 1rem;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    transition: max-height 0.2s ease, padding 0.2s ease, margin 0.2s ease, opacity 0.2s ease;
    max-height: 0;
    opacity: 0;
}

.cart-notification.is-visible{
    max-height: 120px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    background: #6e2f14;
    color: #fff7f1;
    opacity: 1;
}

.cart-empty-state{
    padding: 2rem 1.5rem;
    border: 1px dashed rgba(61, 36, 17, 0.22);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.35);
    color:#3d2411;
}

.cart-empty-state h2{
    margin-top:0;
    margin-bottom:0.5rem;
}

.cart-empty-state p{
    margin:0;
}

.cart-items{
    display:grid;
    gap:1rem;
}

.cart-item{
    display:grid;
    grid-template-columns: 84px 1fr auto;
    gap:1rem;
    align-items:center;
    padding:1rem;
    border-radius:20px;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(61, 36, 17, 0.08);
}

.cart-item__image{
    width:84px;
    height:84px;
    object-fit:cover;
    border-radius:16px;
    background: var(--accent-soft);
}

.cart-item__details{
    display:flex;
    flex-direction:column;
    gap:0.45rem;
    min-width:0;
    color : var(--text-color);
}

.cart-item__title-row{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:flex-start;
}

.cart-item__title-row h2{
    margin:0;
    font-size:1.05rem;
}

.cart-item__price,
.cart-item__subtotal,
.cart-item__meta{
    margin:0;
}

.cart-item__controls{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:0.7rem;
}

.cart-quantity{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.35rem;
    border-radius:999px;
    background: var(--accent-soft);
}

.cart-quantity button,
.cart-remove-btn{
    border:none;
    cursor:pointer;
    font:inherit;
}

.cart-quantity button{
    width:2rem;
    height:2rem;
    border-radius:50%;
    background: var(--accent-color);
    color:#fff;
}

.cart-remove-btn{
    padding:0.6rem 0.9rem;
    border-radius:999px;
    background: rgba(61, 36, 17, 0.08);
    color: var(--text-color);
}

footer{
    position:fixed;
    background:url(../img/devider.png);
    background-size:cover;
    width:100%;
    bottom:0;
    left:0;
    padding: 0.75rem 1rem;
}

.footer-content{
    width:min(1200px, 100%);
    margin:0 auto;
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    align-items:flex-start;
    gap:1rem;
}

.footer-section{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    margin-bottom:0.5rem;
}

.footer-section h2{
    margin:0;
    font-size:1rem;
}

.footer-section-total{
    justify-content:center;
}

.footer-section-action{
    justify-content:center;
    align-items:flex-end;
}

.checkbox-option{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.95rem;
    min-height:1.4rem;
}

.footer-section .checkbox-option + .checkbox-option{
    margin-top:0.2rem;
}

.checkbox-option input{
    width:1rem;
    height:1rem;
}

.delivery-address-fields{
    display:grid;
    grid-template-columns: 1fr;
    gap:0.35rem;
    margin-top:0.35rem;
    margin-bottom:0.75rem;
}

.delivery-address-fields[hidden]{
    display:none !important;
}

.delivery-address-fields input{
    border:1px solid rgba(61, 36, 17, 0.26);
    border-radius:10px;
    padding:0.45rem 0.55rem;
    font:inherit;
}

.checkout-btn{
    padding:10px 20px;
    border-radius:5px;
    min-width:10rem;
    display:flex;
    justify-content:center;
    align-items:center;
    border:none;
    border-radius:50px;
    background:var(--accent-color);
    color:white;
    cursor:pointer;
    font-size:1rem;
}

.checkout-btn:disabled{
    opacity:0.65;
    cursor:not-allowed;
}

@media (max-width: 720px){
    .cart-page{
        width: calc(100% - 1rem);
        margin-top: 1rem;
        margin-bottom: 16rem;
    }

    .cart-panel{
        padding:1rem;
    }

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

    .cart-item__controls{
        align-items:flex-start;
    }

    footer{
        position:static;
        padding: 0.75rem;
    }

    .footer-content{
        grid-template-columns: 1fr;
    }

    .checkout-btn{
        width:100%;
    }

    .footer-section-action{
        align-items:stretch;
    }
}