/* =========================================
CART BUTTON
========================================= */
.cart-btn{
position:relative;
width:55px;
height:55px;
margin-left:35px;
margin-right:25px;
flex-shrink:0;
border-radius:18px;
background:#111827;
border:1px solid #ffffff15;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.3s ease;
}
.cart-btn:hover{
transform:translateY(-4px);
box-shadow:
0 0 20px #00d9ff50;
}
.cart-btn i{
font-size:22px;
color:white;

}
#cartCount{
position:absolute;
top:-8px;
right:-8px;
width:28px;
height:28px;
border-radius:50%;
background:#ff008c;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
}
/* =========================================
OVERLAY
========================================= */
.cart-overlay{
position:fixed;
inset:0;
background:#00000080;
backdrop-filter:blur(4px);
opacity:0;
visibility:hidden;

transition:.3s ease;
z-index:999;
}
.cart-overlay.active{
opacity:1;
visibility:visible;
}
/* =========================================
DRAWER
========================================= */
.cart-drawer{
position:fixed;
top:0;
right:-500px;
width:450px;
max-width:100%;
height:100vh;
background:#090214;
border-left:1px solid #ffffff12;
z-index:1000;
display:flex;
flex-direction:column;
transition:.4s ease;
}
.cart-drawer.active{
right:0;

}
/* =========================================
HEADER
========================================= */
.cart-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:25px;
border-bottom:1px solid #ffffff12;
}
.cart-header h2{
color:white;
}
.cart-header button{
background:none;
border:none;
color:white;
font-size:28px;
cursor:pointer;
}
/* =========================================
ITEMS
========================================= */
#cartItems{
flex:1;

overflow-y:auto;
padding:25px;
}
.cart-item{
display:flex;
gap:15px;
margin-bottom:25px;
background:#111827;
border-radius:20px;
padding:15px;
}
.cart-item img{
width:100px;
height:100px;
object-fit:cover;
border-radius:16px;
}
.cart-item-info{
flex:1;
}
.cart-item-info h3{
color:white;
margin-bottom:10px;
line-height:1.4;

}
.cart-price{
color:#00ff99;
font-size:22px;
font-weight:700;
margin-bottom:12px;
}
/* =========================================
QUANTITY
========================================= */
.quantity-controls{
display:flex;
align-items:center;
gap:10px;
}
.quantity-controls button{
width:32px;
height:32px;
border:none;
border-radius:10px;
background:#ff008c;
color:white;
cursor:pointer;
}
/* =========================================
FOOTER
========================================= */

.cart-footer{
padding:25px;
border-top:1px solid #ffffff12;
}
.cart-total{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
color:white;
}
.checkout-btn{
width:100%;
border:none;
background:
linear-gradient(
90deg,
#00d9ff,
#00ff99
);
color:#000;
padding:20px;
border-radius:18px;
font-size:18px;
font-weight:900;
cursor:pointer;

}