/* ==========================
   CART DRAWER
========================== */

.cart-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:998;

}

.cart-overlay.active{

    opacity:1;

    visibility:visible;

}

.cart-drawer{

    position:fixed;

    top:0;

    right:-420px;

    width:420px;

    height:100vh;

    background:#153e0f;

    transition:.35s ease;

    z-index:999;

    display:flex;

    flex-direction:column;

}

.cart-drawer.active{

    right:0;

}

.cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border-bottom:1px solid #3A9605;

}

.cart-header button{

    border:none;

    background:none;

    font-size:30px;

    cursor:pointer;

}

.cart-items{

    flex:1;

    overflow-y:auto;

    padding:25px;

}

.cart-footer{

    border-top:1px solid #3A9605;

    padding:25px;

}

.checkout-btn{

    width:100%;

    padding:18px;

    margin-top:20px;

    background:black;

    color:white;

    border:none;

    cursor:pointer;

}



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

.cart-item{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}

.cart-item img{

    width:90px;

    height:110px;

    object-fit:cover;

}

.cart-item-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.cart-item-info h4{

    margin-bottom:8px;

    font-size:18px;

}

.cart-item-info p{

    margin:3px 0;

    color:whitesmoke;

}



.cart-item-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:10px;

}

.remove-item{

    border:none;

    background:none;

    cursor:pointer;

    color:whitesmoke;

    font-size:14px;

    transition:.3s;

}

.remove-item:hover{

    color:red;

}


/* ==========================
   CART COUNT
========================== */


.cart-quantity{

    display:flex;

    align-items:center;

    gap:15px;

    margin:10px 0;

}

.cart-quantity button{

    width:28px;

    height:28px;

    border:1px solid #ddd;

    background:white;

    cursor:pointer;

    transition:.25s;

}

.cart-quantity button:hover{

    background:#111;

    color:white;

}

/*Empty Cart*/

.empty-cart{

    text-align:center;

    padding:60px 20px;

}

.empty-cart h3{

    font-size:22px;

    margin-bottom:12px;

    font-weight:500;

}

.empty-cart p{

    color:#777;

    font-size:15px;

}

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

@media (max-width: 768px) {

    .cart-drawer {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }

    .cart-header {
        padding: 20px;
    }

    .cart-items {
        padding: 20px;
    }

    .cart-footer {
        padding: 20px;
    }

    .cart-item {
        gap: 12px;
    }

    .cart-item img {
        width: 75px;
        height: 95px;
    }

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

    .cart-item-info p {
        font-size: 14px;
    }

    .checkout-btn {
        padding: 16px;
    }

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