/* =====================================
   CART ROOT ISOLATION
===================================== */

.cart-drawer,
.cart-overlay,
.floating-basket {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  box-sizing: border-box;
}

.cart-drawer * {
  box-sizing: border-box;
}


/* =====================================
   FLOATING BASKET
===================================== */

.floating-basket{
position:fixed;
bottom:25px;
right:25px;

background:linear-gradient(145deg,#8b5e3c,#6b4e2e);
color:white;

padding:12px 18px;
border-radius:40px;

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

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,0.25);

display:none;
align-items:center;
gap:8px;

z-index:999999;

transition:all .25s ease;
}

.floating-basket:hover{
transform:translateY(-3px);
box-shadow:0 16px 35px rgba(0,0,0,0.35);
}

.floating-basket::after{
content:"";
position:absolute;
inset:0;
border-radius:40px;

background:linear-gradient(
180deg,
rgba(255,255,255,0.18),
transparent
);

pointer-events:none;
}

#basket-count{
background:white;
color:#6b4e2e;

border-radius:50%;
padding:3px 8px;

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



/* =====================================
   OVERLAY
===================================== */

.cart-overlay{
position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.35);

opacity:0;
pointer-events:none;

transition:.3s;

z-index:999999;
}

.cart-overlay.active{
opacity:1;
pointer-events:auto;
}

.cart-overlay,
.cart-drawer{
position:fixed;
top:0;
}


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

.cart-drawer{

position:fixed;
top:0;
right:0;
bottom:0;

width:420px !important;
max-width:100%;
height:100vh;

background:
linear-gradient(180deg,#fffaf4 0%,#f5ede4 100%),
radial-gradient(circle at top,rgba(255,255,255,0.6),transparent 60%);

border-left:1px solid rgba(80,50,30,0.15);

box-shadow:-14px 0 40px rgba(60,40,20,0.25);

z-index:999999;

display:flex;
flex-direction:column;

padding:22px;
padding-bottom:90px;

transform:translateX(100%);
transition:transform .35s ease;

overflow-y:hidden;
overflow-x:hidden;
}

.cart-drawer.active{
transform:translateX(0);
}


/* =====================================
   CART HEADER
===================================== */

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

border-bottom:1px solid rgba(80,50,30,0.12);

padding-bottom:12px;
margin-bottom:18px;
}

.cart-header h3{
font-size:20px;
letter-spacing:.4px;
color:#3b2a1f;
}

.cart-header button{
background:none;
border:none;

color:#6b4e2e;

font-size:22px;
cursor:pointer;

transition:.2s;
}

.cart-header button:hover{
transform:scale(1.15);
}


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

#cart-items{
flex:1;
overflow-y:auto;
overflow-x:hidden;
min-height:0;
padding-right:4px;
margin-bottom:16px;
}


/* =====================================
   CART ITEM
===================================== */

.cart-item{

display:flex;
align-items:center;

gap:12px;

background:#fff8f0;

border-radius:12px;

padding:14px 16px;

margin-bottom:12px;

border:1px solid rgba(60,40,20,0.08);

box-shadow:0 4px 10px rgba(0,0,0,0.05);

font-size:14px;

}


/* item name */

.cart-item-name{

flex:1;

font-weight:600;

color:#3b2a1f;

line-height:1.3;

overflow:hidden;
text-overflow:ellipsis;

}


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

.cart-item-qty{

display:flex;
align-items:center;

gap:6px;

white-space:nowrap;

flex-shrink:0;

}

.qty-btn{

background:#f3e6da;

border:1px solid rgba(60,40,20,0.15);

padding:4px 8px;

border-radius:6px;

font-size:13px;

cursor:pointer;

transition:.2s;
}

.qty-btn:hover{
background:#e8d6c4;
transform:scale(1.05);
}


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

.cart-item-price{

min-width:60px;

text-align:right;

font-size:13px;

color:#6b4e2e;

flex-shrink:0;

}


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

.remove-btn{

background:transparent;

border:1px solid rgba(60,40,20,0.15);

padding:6px 12px;

border-radius:8px;

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

color:#6b4e2e;

cursor:pointer;

white-space:nowrap;

transition:.25s;

}

.remove-btn:hover{

background:#f3e6da;

border-color:#8b5e3c;

transform:translateY(-1px);

box-shadow:0 4px 10px rgba(0,0,0,0.08);

}


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

#cart-summary{

background:#f1e7dc;

border-radius:12px;

padding:14px;

margin-bottom:14px;

font-size:14px;
line-height:1.6;

border:1px solid rgba(60,40,20,0.1);

box-shadow:0 2px 6px rgba(0,0,0,0.04);

flex-shrink:0;

}


/* =====================================
   FORM
===================================== */

.cart-form{
flex-shrink:0;
position:sticky;
bottom:0;
background:#f5ede4;
padding-top:10px;
}

.cart-form input,
.cart-form textarea{

width:100%;

background:#fffdf9;

border:1px solid rgba(80,50,30,0.18);

border-radius:8px;

padding:12px;

font-size:14px;

margin-bottom:10px;

transition:.2s;
}

.cart-form textarea{
min-height:70px;
resize:vertical;
}

.cart-form input:focus,
.cart-form textarea:focus{

outline:none;

border-color:#8b5e3c;

box-shadow:0 0 0 2px rgba(139,94,60,0.15);

}


/* =====================================
   WHATSAPP BUTTON
===================================== */

.cart-form button{

width:100%;

background:linear-gradient(145deg,#8b5e3c,#6b4e2e);

color:white;

border:none;

padding:14px;

border-radius:10px;

font-weight:600;

letter-spacing:.3px;

cursor:pointer;

transition:.25s;

box-shadow:0 6px 14px rgba(0,0,0,0.2);

}

.cart-form button:hover{

transform:translateY(-2px);

box-shadow:0 10px 20px rgba(0,0,0,0.28);

}


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

@media (max-width:600px){

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

.floating-basket{
bottom:20px;
right:18px;
}

.cart-item{
padding:12px;
}

.cart-item-name{
font-size:13px;
}

.cart-item-price{
min-width:50px;
}

}

@media (max-width:768px){

.cart-drawer{
width:85%;
max-width:85%;
}

}