/* ============================================================
   MoCrafts — Cart Drawer Styles
   Shared CSS for the slide-out cart drawer (overlay, panel, line
   items, coupon box, free-shipping/free-gift progress bars, and
   the "Added to cart" toast). Used together with cart-drawer.html
   (markup) + cart-drawer.js (behaviour) on every page.

   Link this from every page's <head>, AFTER the page's own <style>
   block (or its own stylesheet link) so --pink, --blush, --ink etc.
   custom properties are already defined:
     <link rel="stylesheet" href="/cart-drawer.css">

   build: cart-drawer-css-v1 (2026-09-05) — extracted from the
   previously-duplicated inline copies in checkout.html and
   anniversary-gift-combo.html. Where those two differed slightly,
   this file keeps whichever version was better (see comments below)
   rather than picking one page's copy arbitrarily.
   ============================================================ */

.overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(44,36,48,0.4);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  z-index:60;
}
.overlay.open{display:block;}
.drawer{
  position:fixed;
  top:0; right:0;
  height:100%;
  width:380px;
  max-width:92vw;
  background:#fff;
  z-index:61;
  transform:translateX(100%);
  transition:transform 0.38s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-head{
  padding:20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2px dashed var(--blush-2);
}
.drawer-head h3{font-size:20px;}
.drawer-close{
  background:var(--blush);
  border:none;
  width:32px; height:32px;
  border-radius:50%;
  font-size:16px;
  color:var(--pink-deep);
  font-weight:800;
}
.drawer-body{padding:18px 18px 6px; flex:1; overflow-y:auto;}

/* Premium cart line item — elevated card instead of a plain flex row */
.cart-item{
  display:flex;
  gap:13px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--blush-2);
  border-radius:16px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.cart-item:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.cart-item .cart-thumb{
  width:62px; height:62px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--blush) 0%, var(--blush-2) 100%);
  border:1px solid var(--blush-2);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  flex-shrink:0;
  overflow:hidden;
}
.cart-item .cart-thumb img{width:100%; height:100%; object-fit:cover; border-radius:inherit;}
.cart-item-info{flex:1; min-width:0;}
.cart-item-info h4{font-family:'Baloo 2', sans-serif; font-size:14px; font-weight:800; color:var(--ink); margin-bottom:2px; letter-spacing:-0.1px; line-height:1.3;}
.cart-item-info .unit{font-size:11.5px; color:var(--ink-soft); font-weight:700; margin-bottom:9px;}
.cart-item-info .row{display:flex; align-items:center; justify-content:space-between;}
.cart-item-info .stepper{background:var(--blush); border:1px solid var(--blush-2); border-radius:50px;}
.cart-item-info .stepper button{width:27px; height:27px; min-height:0; font-size:13.5px; background:transparent; color:var(--pink-deep);}
.cart-item-info .stepper span{width:22px; font-size:12px; font-weight:800;}
.remove-link{font-size:11px; color:#9c8f9d; font-weight:700; background:none; border:none; text-decoration:underline; text-underline-offset:2px; transition:color 0.15s ease;}
.remove-link:hover{color:var(--pink-deep);}
.cart-empty{text-align:center; padding:40px 10px; color:var(--ink-soft); font-weight:600; font-size:14px;}

/* Drawer footer: coupon box + order totals + Proceed to Checkout */
.drawer-foot{padding:14px 22px 16px; border-top:2px dashed var(--blush-2);}
.subtotal-row{display:flex; justify-content:space-between; font-family:'Baloo 2', sans-serif; font-size:13.5px; margin-bottom:5px;}
.subtotal-row.total-row{
  font-size:16px; font-weight:800; margin-top:6px; padding-top:8px;
  border-top:1.5px dashed var(--blush-2); margin-bottom:12px;
}
.gift-row{color:var(--gold-deep); font-weight:800;}
.discount-row{color:#1f9d55;}
.drawer-foot .btn-primary{padding:11px 20px; font-size:13.5px; box-shadow:0 10px 18px -8px rgba(255,0,176,0.45);}
.drawer-foot .btn-wa{width:100%; justify-content:center;}
.drawer-note{font-size:10.5px; color:var(--ink-soft); text-align:center; margin-top:6px; font-weight:600;}

/* Free shipping progress bar — compact banner strip */
.ship-progress{padding:9px 20px 8px; background:linear-gradient(135deg, var(--blush) 0%, var(--blush-2) 100%); border-bottom:1px solid var(--blush-2); position:relative; overflow:hidden;}
.ship-progress-msg{font-size:11px; font-weight:800; color:var(--ink); margin-bottom:5px; text-align:center; line-height:1.3;}
.ship-progress-msg strong{color:var(--pink-deep);}
.ship-progress.unlocked .ship-progress-msg strong{color:#1f9d55;}
.ship-bar-track{width:100%; height:5px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(44,36,48,0.1);}
.ship-bar-fill{height:100%; width:0%; border-radius:20px; background:linear-gradient(90deg, var(--pink), var(--gold)); background-size:200% 100%; transition:width 0.6s cubic-bezier(.34,1.56,.64,1); animation:shimmerBar 1.8s linear infinite;}
@keyframes shimmerBar{0%{background-position:0% 0;}100%{background-position:200% 0;}}
.ship-progress.unlocked .ship-bar-fill{background:linear-gradient(90deg, #2bd977, var(--wa)); background-size:200% 100%;}
.ship-progress.unlocked{animation:shipPulseGlow 0.7s ease;}
@keyframes shipPulseGlow{
  0%{box-shadow:inset 0 0 0 0 rgba(43,217,119,0);}
  40%{box-shadow:inset 0 0 0 3px rgba(43,217,119,0.35);}
  100%{box-shadow:inset 0 0 0 0 rgba(43,217,119,0);}
}
.confetti-piece{position:absolute; top:50%; left:50%; font-size:15px; pointer-events:none; animation:confettiPop 0.9s ease-out forwards; z-index:2;}
@keyframes confettiPop{
  0%{transform:translate(-50%,-50%) scale(0.3) rotate(0deg); opacity:1;}
  100%{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); opacity:0;}
}

/* Coupon code box */
.coupon-box{display:flex; gap:8px; margin-bottom:8px;}
.coupon-box input{
  flex:1; min-width:0; padding:11px 13px; border-radius:10px;
  border:1.5px solid var(--blush-2); font-family:inherit; font-size:13px; font-weight:700;
  color:var(--ink); background:#fff;
}
.coupon-box input::placeholder{color:var(--ink-soft); font-weight:600;}
.coupon-box input:focus{outline:none; border-color:var(--pink);}
.coupon-box button{
  flex-shrink:0; padding:11px 18px; border-radius:10px; border:none;
  background:linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 55%, var(--gold-deep) 100%);
  background-size:160% 160%;
  color:#fff; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:12.5px;
  box-shadow:0 8px 16px -6px rgba(255,0,176,0.45);
  transition:background-position 0.3s ease, transform 0.15s ease;
}
.coupon-box button:hover{background-position:100% 100%; transform:translateY(-1px);}
.coupon-msg{font-size:12px; font-weight:700; margin:-2px 0 14px; min-height:14px;}
.coupon-msg.success{color:#1f9d55;}
.coupon-msg.error{color:#e0405a;}

/* Compact version of the coupon box + message specifically inside the
   cart drawer footer (scoped to #cartFoot so a page that also has its
   own separate on-page coupon box, like checkout.html's order summary,
   isn't affected — only the drawer gets the tighter spacing). */
#cartFoot .coupon-box{margin-bottom:5px;}
#cartFoot .coupon-box input, #cartFoot .coupon-box button{padding:8px 12px;}
#cartFoot .coupon-msg{margin:-2px 0 8px; min-height:auto; font-size:11px;}

/* "Remove applied coupon" link shown inline in the success message */
.coupon-msg.success{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.coupon-clear-btn{
  background:none; border:none; color:#8a7f8b; font-size:11.5px;
  font-weight:700; text-decoration:underline; text-underline-offset:2px;
  cursor:pointer; font-family:inherit; padding:0;
}
.coupon-clear-btn:hover{color:#c9008c;}

/* "Use FLAT10 — ..." suggestion chips, injected below the coupon box */
.coupon-suggestions{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;}
.coupon-suggest-chip{
  background:#fff0f8; border:1.5px dashed #ff00b0; color:#c9008c;
  border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700;
  cursor:pointer; font-family:inherit; line-height:1.3;
}
.coupon-suggest-chip:hover{background:#ffe1f2;}

/* Free gift progress bar — compact banner strip, matches ship-progress sizing */
.gift-progress{padding:9px 20px 8px; background:linear-gradient(135deg, #fff4d9 0%, #ffe6b8 100%); border-bottom:1px solid var(--gold); position:relative; overflow:hidden;}
.gift-progress-msg{font-size:11px; font-weight:800; color:var(--ink); margin-bottom:5px; text-align:center; line-height:1.3;}
.gift-progress-msg strong{color:var(--gold-deep);}
.gift-progress.unlocked .gift-progress-msg strong{color:#1f9d55;}
.gift-bar-track{width:100%; height:5px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(44,36,48,0.1);}
.gift-bar-fill{height:100%; width:0%; border-radius:20px; background:linear-gradient(90deg, var(--gold), var(--pink)); background-size:200% 100%; transition:width 0.6s cubic-bezier(.34,1.56,.64,1); animation:shimmerBar 1.8s linear infinite;}
.gift-progress.unlocked .gift-bar-fill{background:linear-gradient(90deg, #2bd977, var(--wa)); background-size:200% 100%;}
.gift-progress.unlocked{animation:shipPulseGlow 0.7s ease;}

/* "Added to cart" toast */
.toast{
  position:fixed;
  bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  border-radius:30px;
  font-size:13.5px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:all 0.25s ease;
  z-index:70;
  white-space:nowrap;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:520px){
  .toast{bottom:calc(92px + env(safe-area-inset-bottom, 0px)); font-size:12.5px; padding:10px 16px;}
}
