/* =============================================================================
   Soft Days — cart.css  (PHASE 1: front-end cart UI only)
   -----------------------------------------------------------------------------
   Styling for the cart icon + badge (injected into the header by cart.js),
   the slide-in cart drawer, the empty state, the bundle suggestion, and the
   "add to cart" buttons. Uses ONLY the existing Soft Days design tokens from
   softdays.css, so it inherits day/night themes automatically.
   No payment logic. No secrets. Pure presentation.
============================================================================= */

/* ---- cart icon in the header (matches .icon-btn shape) -------------------- */
.sd-cart-btn{
  position:relative;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);color:var(--text);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .2s, border-color .2s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
.sd-cart-btn:hover{
  transform:translateY(-1px);
  border-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 8%,var(--card));
}
.sd-cart-btn svg{width:21px;height:21px}

/* item-count badge */
.sd-cart-badge{
  position:absolute;top:-5px;inset-inline-end:-5px;
  min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;
  background:var(--sage-dark);color:#fff;
  font-family:"Tajawal",system-ui,sans-serif;
  font-size:.7rem;font-weight:700;line-height:19px;text-align:center;
  box-shadow:0 2px 6px -1px rgba(0,0,0,.25);
  transform:scale(0);transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.sd-cart-badge.on{transform:scale(1)}
:root[data-theme="night"] .sd-cart-badge{color:#2B1834}

/* tiny pop animation when an item is added */
@keyframes sd-cart-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.sd-cart-btn.pop{animation:sd-cart-pop .32s ease}

/* ---- overlay + drawer ----------------------------------------------------- */
.sd-cart-overlay{
  position:fixed;inset:0;z-index:1200;
  background:rgba(30,38,29,.42);
  opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease;
  backdrop-filter:blur(2px);
}
.sd-cart-overlay.open{opacity:1;visibility:visible}

.sd-cart-drawer{
  position:fixed;top:0;inset-inline-end:0;z-index:1201;
  width:min(94vw,408px);height:100%;
  background:var(--bg);
  border-inline-start:1px solid var(--border);
  box-shadow:-24px 0 60px -30px rgba(30,38,29,.5);
  display:flex;flex-direction:column;
  /* CLOSED BY DEFAULT — pushed fully off-canvas AND hidden.
     The hide direction depends on which physical edge inset-inline-end maps to:
       LTR  -> right edge -> hide to the right  (translateX( 110%))
       RTL  -> left  edge -> hide to the left   (translateX(-110%))
     visibility:hidden is a hard guarantee: even if a transform is ever off,
     the drawer stays invisible and non-interactive until .open is set. */
  transform:translateX(110%);
  visibility:hidden;
  transition:transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s;
  font-family:"Tajawal",system-ui,sans-serif;
}
[dir="rtl"] .sd-cart-drawer{transform:translateX(-110%)}
.sd-cart-drawer.open,
[dir="rtl"] .sd-cart-drawer.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .34s cubic-bezier(.4,0,.2,1), visibility 0s;
}

/* header of the drawer */
.sd-cart-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--border);
  background:var(--card);
}
.sd-cart-head h2{
  margin:0;font-family:"Cormorant Garamond",serif;
  font-size:1.4rem;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:9px;
}
.sd-cart-head .sd-cart-count-lbl{
  font-family:"Tajawal",sans-serif;font-size:.8rem;color:var(--muted);font-weight:500;
}
.sd-cart-close{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--border);background:var(--bg-soft);color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.sd-cart-close:hover{background:color-mix(in srgb,var(--sage) 18%,transparent)}
.sd-cart-close svg{width:18px;height:18px}

/* scrollable items area */
.sd-cart-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}

/* one cart line */
.sd-cart-item{
  display:flex;gap:13px;align-items:center;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:11px;
}
.sd-cart-thumb{
  width:60px;height:60px;flex:0 0 auto;border-radius:11px;overflow:hidden;
  background:var(--bg-soft);display:grid;place-items:center;
}
.sd-cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sd-cart-thumb .sd-thumb-fallback{
  font-family:"Cormorant Garamond",serif;font-size:1.3rem;color:var(--sage-dark);opacity:.6;
}
.sd-cart-meta{flex:1;min-width:0}
.sd-cart-meta .nm{
  font-size:.95rem;font-weight:500;color:var(--text);
  margin:0 0 3px;line-height:1.4;
}
.sd-cart-meta .pr{font-size:.9rem;color:var(--sage-dark);font-weight:700}
.sd-cart-item .sd-cart-remove{
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;
  border:1px solid var(--border);background:transparent;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.sd-cart-item .sd-cart-remove:hover{
  color:var(--brown);border-color:color-mix(in srgb,var(--brown) 40%,var(--border));
  background:color-mix(in srgb,var(--brown) 8%,transparent);
}
.sd-cart-item .sd-cart-remove svg{width:16px;height:16px}

/* bundle upsell / suggestion banner */
.sd-cart-suggest{
  border:1px dashed color-mix(in srgb,var(--gold) 55%,var(--border));
  background:color-mix(in srgb,var(--gold) 9%,transparent);
  border-radius:var(--radius-sm);padding:13px 14px;
  display:flex;flex-direction:column;gap:9px;
}
.sd-cart-suggest p{margin:0;font-size:.88rem;color:var(--text);line-height:1.6}
.sd-cart-suggest .sd-suggest-act{
  align-self:flex-start;font-size:.85rem;font-weight:700;
  padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold);background:transparent;color:var(--brown);
  transition:.2s;
}
:root[data-theme="night"] .sd-cart-suggest .sd-suggest-act{color:var(--gold)}
.sd-cart-suggest .sd-suggest-act:hover{background:color-mix(in srgb,var(--gold) 16%,transparent)}

/* empty state */
.sd-cart-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px;padding:40px 26px;color:var(--muted);
}
.sd-cart-empty .ic{
  width:64px;height:64px;border-radius:50%;
  background:var(--bg-soft);display:grid;place-items:center;color:var(--sage-dark);
}
.sd-cart-empty .ic svg{width:30px;height:30px}
.sd-cart-empty h3{margin:0;font-family:"Cormorant Garamond",serif;font-size:1.3rem;color:var(--text);font-weight:600}
.sd-cart-empty p{margin:0;font-size:.9rem;line-height:1.7;max-width:26ch}
.sd-cart-empty .sd-empty-cta{
  margin-top:4px;font-size:.9rem;font-weight:600;text-decoration:none;
  padding:10px 20px;border-radius:999px;
  border:1.5px solid var(--olive);color:var(--sage-dark);transition:.2s;
}
:root[data-theme="night"] .sd-cart-empty .sd-empty-cta{color:var(--sage)}
.sd-cart-empty .sd-empty-cta:hover{background:color-mix(in srgb,var(--sage) 16%,transparent)}

/* footer: totals + checkout (disabled in phase 1) */
.sd-cart-foot{
  border-top:1px solid var(--border);background:var(--card);
  padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px;
}
/* RC7 item 4: an empty cart hides the total + checkout buttons entirely
   (display:flex above would otherwise keep the footer visible when [hidden]). */
.sd-cart-foot[hidden]{ display:none !important; }
.sd-cart-total{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:1.05rem;color:var(--text);
}
.sd-cart-total .amt{
  font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.45rem;color:var(--sage-dark);
}
:root[data-theme="night"] .sd-cart-total .amt{color:var(--sage)}

/* checkout button — PHASE 2: active. Posts item slugs to cart-checkout.php. */
.sd-cart-checkout{
  width:100%;border:none;border-radius:14px;
  padding:14px 18px;cursor:pointer;
  font-family:"Tajawal",sans-serif;font-size:1rem;font-weight:700;
  background:var(--sage-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .2s, filter .2s;
}
:root[data-theme="night"] .sd-cart-checkout{color:#2B1834}
.sd-cart-checkout:hover{transform:translateY(-1px);filter:brightness(1.05)}
.sd-cart-checkout svg{width:17px;height:17px}
/* PHASE 2: dimmed look for regular visitors (cart checkout not open yet) */
.sd-cart-checkout.sd-checkout-locked{
  background:color-mix(in srgb,var(--sage) 40%,var(--bg-soft));
  color:color-mix(in srgb,var(--text) 55%,transparent);
}
:root[data-theme="night"] .sd-cart-checkout.sd-checkout-locked{color:color-mix(in srgb,var(--text) 55%,transparent)}
.sd-cart-checkout.sd-checkout-locked:hover{transform:none;filter:none}
.sd-cart-continue{
  width:100%;text-align:center;text-decoration:none;
  font-size:.92rem;font-weight:600;color:var(--sage-dark);
  padding:10px;border-radius:12px;border:1px solid var(--border);
  background:transparent;cursor:pointer;transition:.2s;
}
:root[data-theme="night"] .sd-cart-continue{color:var(--sage)}
.sd-cart-continue:hover{background:color-mix(in srgb,var(--sage) 14%,transparent)}

/* the "cart under construction" note shown when the disabled checkout is tapped */
.sd-cart-soon-note{
  margin:0;font-size:.85rem;line-height:1.6;text-align:center;
  color:var(--brown);
  background:color-mix(in srgb,var(--mocha) 20%,transparent);
  border-radius:10px;padding:10px 12px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .3s ease, opacity .3s ease, padding .3s ease;
  padding-block:0;
}
.sd-cart-soon-note.show{max-height:120px;opacity:1;padding-block:10px}

/* ---- injected "add to cart" button (next to existing buy buttons) --------- */
.sd-add-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;font-family:"Tajawal",sans-serif;font-weight:600;
  border-radius:999px;transition:transform .2s, background .2s, border-color .2s;
  border:1.5px solid var(--olive);background:transparent;color:var(--sage-dark);
  padding:12px 22px;font-size:1rem;
}
:root[data-theme="night"] .sd-add-btn{color:var(--sage)}
.sd-add-btn:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--sage) 16%,transparent)}
.sd-add-btn svg{width:19px;height:19px}
.sd-add-btn.added{border-color:var(--sage-dark);background:color-mix(in srgb,var(--sage) 24%,transparent)}

/* add-to-cart button inside homepage product cards (full width like .pcard .btn) */
.pcard .sd-add-btn{width:100%;margin-top:8px;padding:11px 16px;font-size:.94rem}

/* toast (gentle notice) */
.sd-cart-toast{
  position:fixed;z-index:1300;
  bottom:24px;inset-inline-start:50%;transform:translateX(-50%) translateY(20px);
  background:var(--text);color:var(--bg);
  font-family:"Tajawal",sans-serif;font-size:.9rem;font-weight:500;
  padding:12px 20px;border-radius:999px;
  box-shadow:0 12px 34px -18px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .26s ease, transform .26s ease, visibility .26s ease;
  max-width:88vw;text-align:center;
}
.sd-cart-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* lock page scroll only while the drawer is open */
html.sd-cart-lock,html.sd-cart-lock body{overflow:hidden}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sd-cart-drawer,.sd-cart-overlay,.sd-cart-badge,.sd-cart-toast,.sd-cart-soon-note{transition:none}
  .sd-cart-btn.pop{animation:none}
}