/* =============================================================
   DOODLY — Premium cart drawer + nav cart icon
   Frosted slide-in drawer, staggered item cards, animated
   summary, fly-to-cart, toast. Transform/opacity only, GPU
   friendly, reduced-motion aware. No pricing/logic change —
   values come straight from the catalogue.
   ============================================================= */

/* ---- nav cart icon + animated count ---- */
.cart-btn { position:relative; }
.cart-btn .cart-count { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; border-radius:999px; background:var(--leaf); color:#fff;
  font-size:.66rem; font-weight:800; line-height:1; box-shadow:0 2px 6px rgba(15,61,46,.3);
  transform:scale(0); transition:transform .28s cubic-bezier(.2,1.5,.4,1); }
.cart-btn .cart-count.show { transform:scale(1); }
.cart-btn.bounce { animation:cartBounce .5s cubic-bezier(.2,1.2,.3,1); }
@keyframes cartBounce { 0%,100%{ transform:translateY(0); } 30%{ transform:translateY(-6px) scale(1.08); } 60%{ transform:translateY(0) scale(.96); } }
.cart-count .cc-roll { display:inline-block; }
.cart-count.roll .cc-roll { animation:ccRoll .34s ease; }
@keyframes ccRoll { 0%{ transform:translateY(-60%); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }

/* ---- backdrop + drawer ---- */
/* z-index above the floating chat/help FABs (1200–1250) so the drawer + backdrop
   cleanly cover them instead of the FABs overlapping the checkout button/total */
.cart-backdrop { position:fixed; inset:0; z-index:1290; background:rgba(8,30,21,.34);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.cart-backdrop.show { opacity:1; pointer-events:auto; }
.cart-drawer { position:fixed; top:0; right:0; bottom:0; z-index:1300; width:min(420px, 92vw);
  display:flex; flex-direction:column; background:var(--glass-bg); border-left:1px solid var(--glass-brd);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:-24px 0 60px rgba(15,61,46,.22);
  transform:translateX(102%); transition:transform .42s cubic-bezier(.22,1,.36,1); will-change:transform; }
[data-theme="dark"] .cart-drawer { background:rgba(14,32,24,.78); }
.cart-drawer.open { transform:translateX(0); }
.cart-drawer:focus { outline:none; }

.cart-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.cart-head h2 { font-family:"Fraunces",serif; font-weight:600; color:var(--forest); font-size:1.22rem; display:flex; align-items:center; gap:.5rem; }
.cart-head .cart-n { font-size:.78rem; font-weight:800; color:var(--leaf-600); background:var(--mint-soft); border-radius:999px; padding:.12rem .5rem; }
.cart-close { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line);
  background:var(--surface); color:var(--forest); cursor:pointer; transition:transform .2s, background .2s; }
.cart-close:hover { transform:rotate(90deg); background:var(--mint-soft); }
.cart-close:focus-visible { outline:none; box-shadow:var(--ring); }

.cart-body { flex:1; overflow-y:auto; padding:14px 16px; -webkit-overflow-scrolling:touch; }
.cart-body::-webkit-scrollbar { width:8px; } .cart-body::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }

/* ---- item card ---- */
.ci { display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center; padding:12px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line); margin-bottom:10px; box-shadow:var(--shadow-sm);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  animation:ciIn .42s cubic-bezier(.2,.85,.3,1) both; }
.ci:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.ci.removing { animation:ciOut .34s ease forwards; }
.ci-img { width:64px; height:64px; border-radius:12px; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(180deg,#fff,#f3faf5); border:1px solid var(--line); }
.ci-img img { width:auto; height:54px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(15,61,46,.16)); }
.ci-main { min-width:0; }
.ci-name { font-weight:800; color:var(--forest); font-size:.94rem; line-height:1.2; }
.ci-meta { font-size:.76rem; color:var(--ink-3); margin-top:2px; display:flex; flex-wrap:wrap; gap:.3rem .5rem; align-items:center; }
.ci-eta { display:inline-flex; align-items:center; gap:.25rem; color:var(--leaf-600); font-weight:600; }
.ci-save { font-size:.72rem; font-weight:700; color:var(--leaf-600); background:var(--mint-soft); border-radius:999px; padding:.1rem .42rem; margin-top:5px; display:inline-block; }
.ci-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.ci-price { font-weight:800; color:var(--forest); font-size:.96rem; white-space:nowrap; }
.ci-price small { font-weight:600; color:var(--ink-3); }
/* qty stepper */
.qstep { display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface); }
.qstep button { width:28px; height:28px; display:grid; place-items:center; border:0; background:transparent; color:var(--forest); cursor:pointer; font-size:1rem; transition:background .15s; }
.qstep button:hover { background:var(--mint-soft); color:var(--leaf-600); }
.qstep button:disabled { opacity:.35; cursor:not-allowed; }
.qstep .qn { min-width:26px; text-align:center; font-weight:800; font-size:.88rem; color:var(--forest); }
.qstep .qn.bump { animation:qBump .3s ease; }
@keyframes qBump { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); color:var(--leaf); } }
.ci-remove { background:transparent; border:0; color:var(--ink-3); cursor:pointer; font-size:.74rem; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; transition:color .2s; padding:0; }
.ci-remove:hover { color:#c0392b; }

/* ---- empty state ---- */
.cart-empty { text-align:center; padding:50px 24px; }
.cart-empty .ce-ic { width:76px; height:76px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:var(--mint-soft); color:var(--leaf-600); animation:ceFloat 3.4s ease-in-out infinite; }
@keyframes ceFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.cart-empty h3 { font-family:"Fraunces",serif; color:var(--forest); font-size:1.2rem; }
.cart-empty p { color:var(--ink-3); margin:6px 0 18px; font-size:.9rem; }

/* ---- serviceable-pincode gate ---- */
.cart-pincode { margin-bottom:10px; }
.cart-pincode .pc-input { padding-top:.62rem; padding-bottom:.62rem; }
.cart-gate { display:flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:#a32b1b; margin-bottom:12px; }
.cart-gate[hidden] { display:none; }
.cart-gate svg { flex:0 0 auto; }
[data-theme="dark"] .cart-gate { color:#ff9d8a; }

/* ---- delivery start-date banner ---- */
.cart-sched { margin-bottom:12px; }
.cart-sched-bar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:10px 12px; border:1px solid var(--mint); background:var(--mint-soft); border-radius:14px; }
.csb-k { font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--leaf-600); display:flex; align-items:center; gap:.3rem; }
.csb-k svg { color:var(--leaf-600); }
.csb-v { font-weight:800; color:var(--forest); font-size:.86rem; margin-top:2px; }
.csb-edit { background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.32rem .8rem; font-weight:700; font-size:.78rem; color:var(--leaf-600); cursor:pointer; transition:background .2s, border-color .2s; }
.csb-edit:hover { background:var(--mint-soft); border-color:var(--mint); }
.cart-sched-pick { margin-top:10px; }

/* ---- summary + checkout ---- */
.cart-foot { border-top:1px solid var(--line); padding:14px 18px 16px; background:var(--surface); }
[data-theme="dark"] .cart-foot { background:rgba(14,32,24,.6); }
.cart-sum { display:grid; gap:7px; margin-bottom:12px; }
.cart-sum .row { display:flex; justify-content:space-between; font-size:.88rem; color:var(--ink-2); }
.cart-sum .row b { color:var(--forest); font-weight:700; }
.cart-sum .row.free b { color:var(--leaf-600); }
.cart-sum .row.save { color:var(--leaf-600); }
.cart-sum .row.total { border-top:1px dashed var(--line); padding-top:9px; margin-top:2px; font-size:1.06rem; }
.cart-sum .row.total span { font-weight:700; color:var(--forest); }
.cart-sum .row.total b { font-family:"Fraunces",serif; font-size:1.2rem; color:var(--forest); }
.cart-checkout { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.2rem; border-radius:14px; border:0; cursor:pointer; font:inherit; font-weight:800; font-size:1rem; color:#fff;
  background:linear-gradient(120deg,#169A57,#1FAE66 40%,#2bc77a 72%,#38d98a); background-size:200% 100%;
  box-shadow:0 10px 24px rgba(15,61,46,.22); transition:transform .2s, box-shadow .25s, background-position .5s; }
.cart-checkout:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(15,61,46,.3); background-position:100% 50%; }
.cart-checkout:active { transform:translateY(0); }
.cart-trust { text-align:center; font-size:.74rem; color:var(--ink-3); margin-top:9px; display:flex; align-items:center; justify-content:center; gap:.35rem; }

/* ---- fly-to-cart clone ---- */
.cart-fly { position:fixed; z-index:1400; pointer-events:none; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 24px rgba(15,61,46,.28); will-change:transform,opacity; }
.cart-fly img { width:100%; height:100%; object-fit:contain; }

/* ---- toast ---- */
.cart-toast-wrap { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:1350; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.cart-toast { display:flex; align-items:center; gap:.6rem; background:var(--forest); color:#fff; font-weight:600; font-size:.88rem;
  padding:.7rem 1rem; border-radius:14px; box-shadow:0 12px 30px rgba(15,61,46,.32); max-width:90vw;
  transform:translateY(16px) scale(.96); opacity:0; transition:transform .3s cubic-bezier(.2,1.2,.3,1), opacity .3s; }
.cart-toast.show { transform:translateY(0) scale(1); opacity:1; }
.cart-toast .ct-ic { width:22px; height:22px; border-radius:50%; background:var(--leaf); display:grid; place-items:center; flex:0 0 auto; }
.cart-toast .ct-thumb { width:26px; height:26px; border-radius:7px; object-fit:contain; background:#fff; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cart-drawer { transition:none; }
  .ci, .cart-empty .ce-ic, .cart-btn.bounce, .cart-count.roll .cc-roll, .cart-toast { animation:none !important; }
  .cart-fly { display:none !important; }
}