/* =========================================================
   Gem Store — cart, checkout payment, and the add-to-cart toast

   Rides on style.css: same tokens, same nav, same starfield.
   Deliberately self-contained beyond that (same rule blog.css and
   product.css already follow) — this file loads on EVERY page (the
   header badge and the toast can fire from the product page), so it
   may not depend on product.css's --glass-* tokens, which only exist
   where product.css itself is loaded.

   Cart panels use the plain --surface/--line/--e-* register — the
   same one .prod/.post/.card already use — not the frosted-glass
   treatment from the product page. That treatment is for the hero
   scenes sitting over the starfield/aurora; a checkout flow reads
   better as solid, legible content than as a see-through pane.

   The aurora IS here now (below), same as the account page — but only
   as an ambient background layer. The cards on top stay fully solid;
   only the empty space around them gets the cosmic glow. Ambient
   backdrop and opaque content aren't in tension — that's the same
   split my-account already uses.
   ========================================================= */

/* ---------------- header cart icon ---------------- */
.nav__cart{
  position:relative; display:grid; place-items:center;
  inline-size:44px; block-size:44px; border-radius:50%;
  color:var(--ink); flex:none;
  transition:background .18s var(--ease-out), transform .18s var(--ease-out);
}
.nav__cart:hover{ background:var(--surface-2); }
.nav__cart svg{
  inline-size:21px; block-size:21px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.nav__cart-count{
  position:absolute; inset-block-start:2px; inset-inline-end:2px;
  min-inline-size:16px; block-size:16px; padding-inline:3px;
  border-radius:var(--r-full);
  background:var(--ink); color:var(--on-ink);
  font-size:.625rem; font-weight:900; line-height:16px; text-align:center;
  box-shadow:0 0 0 2px var(--bg);
  transform:scale(0); transition:transform .25s var(--ease-fan);
}
.nav__cart-count:not(:empty){ transform:scale(1); }
/* یک تکان کوچک وقتی cart-notify.js عدد را تازه‌عوض‌شده علامت می‌زند —
   بدون این، تغییر عدد در گوشه‌ی چشم دیده نمی‌شود. */
.nav__cart-count.is-bump{ animation:uc-cart-bump .4s var(--ease-fan); }
@keyframes uc-cart-bump{
  0%{ transform:scale(1); } 35%{ transform:scale(1.45); } 100%{ transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .nav__cart-count.is-bump{ animation:none; }
}

/* ---------------- add-to-cart toast ---------------- */
.uc-toast-region{
  position:fixed; inset-block-start:calc(var(--s-6) + 60px); inset-inline-end:var(--s-5);
  z-index:60; display:flex; flex-direction:column; gap:var(--s-2);
  max-inline-size:min(360px, calc(100vw - var(--s-5) * 2));
  pointer-events:none;
}
.uc-toast{
  display:flex; align-items:center; gap:var(--s-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--e-3); padding:var(--s-3);
  pointer-events:auto;
  animation:uc-toast-in .32s var(--ease-fan) both;
}
.uc-toast.is-leaving{ animation:uc-toast-out .22s var(--ease-out) both; }
@keyframes uc-toast-in{
  from{ opacity:0; transform:translateY(-10px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes uc-toast-out{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to{ opacity:0; transform:translateY(-6px) scale(.97); }
}
@media (prefers-reduced-motion:reduce){
  .uc-toast{ animation:none; }
  .uc-toast.is-leaving{ animation:none; }
}
.uc-toast__art{
  inline-size:44px; block-size:44px; border-radius:var(--r-md); overflow:hidden;
  flex:none; background:var(--surface-2); display:grid; place-items:center;
}
.uc-toast__art img{ inline-size:100%; block-size:100%; object-fit:cover; }
.uc-toast__art svg{ inline-size:20px; block-size:20px; color:var(--text-muted); }
.uc-toast__body{ display:grid; gap:1px; min-inline-size:0; flex:1; }
.uc-toast__head{ display:flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; color:var(--emerald); }
.uc-toast__head svg{ inline-size:15px; block-size:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.uc-toast__title{
  font-size:var(--t-sm); font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.uc-toast__link{ font-size:.75rem; color:var(--text-muted); text-decoration:underline; text-underline-offset:2px; }
.uc-toast__link:hover{ color:var(--ink); }
.uc-toast__close{
  flex:none; inline-size:26px; block-size:26px; border-radius:50%; display:grid; place-items:center;
  color:var(--text-muted); align-self:flex-start;
}
.uc-toast__close:hover{ background:var(--surface-2); color:var(--ink); }
.uc-toast__close svg{ inline-size:13px; block-size:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

/* هدف لمسی ۴۴×۴۴ بدون تغییر اندازه‌ی دیداری.
   اندازه‌ی کوچکِ دکمه بخشی از طراحی است، ولی ناحیه‌ی قابل لمس نباید کوچک
   بماند (حداقل ۴۴×۴۴ — اولویت ۲ ui-ux-pro-max). ::after ناحیه را بیرون از
   کادر گسترش می‌دهد؛ چیزی دیده نمی‌شود و چیدمان هم جابه‌جا نمی‌شود. */
.uc-toast__close{ position:relative; }
.uc-toast__close::after{ content:''; position:absolute; inset:-9px; }  /* 26 + 2*9 = 44 */
/* خطای افزودن به سبد (مثلاً موجودی تمام شده) — همان قالب، رنگ دیگر. */
.uc-toast--error .uc-toast__head{ color:var(--pink); }

/* دکمه‌ی افزودن به سبد حین درخواست AJAX — روی هر دکمه‌ای که
   cart-notify.js موقع ارسال فرم اضافه می‌کند، جدا از استایل خودِ دکمه. */
.is-busy{ opacity:.6; pointer-events:none; }

/* پیام‌های ووکامرس («به سبد اضافه شد»، خطای کوپن، ...) — چون CSS
   پیش‌فرض ووکامرس روی صفحه‌ی سبد خاموش است، این کلاس‌های استاندارد
   (woocommerce_before_cart آن‌ها را چاپ می‌کند) بدون این‌ها کاملاً
   بی‌قاب می‌ماندند. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3);
  list-style:none; margin:0 0 var(--s-4); padding:var(--s-4);
  border-radius:var(--r-md); font-size:var(--t-sm);
  background:var(--surface); border:1px solid var(--line); border-inline-start:4px solid var(--emerald);
}
.woocommerce-info{ border-inline-start-color:var(--cyan); }
.woocommerce-error{ border-inline-start-color:var(--pink); }
/* آیکون نوتیس، از موقعیت مطلق به یک عضو عادی فلکس.
   ووکامرس آیکون را با position:absolute و right:1.5em می‌گذارد و جایش را با
   padding:1em 3.5em 1em 2em باز می‌کند. قاعده‌ی بالا آن padding را با یک مقدار
   یکنواخت بازنویسی می‌کند، پس فضای رزروشده از بین می‌رفت ولی آیکون سر جای خودش
   می‌ماند — نتیجه، آیکون روی متن. در تسویه‌حساب هم روی «آیا کد تخفیف دارید؟»
   می‌افتاد و هم روی پیام خطای روش پرداخت.

   حالا آیکون از جریان بیرون نیست، پس همان gap ظرف فلکس فاصله‌اش را می‌سازد و
   در RTL خودبه‌خود سمت درست می‌نشیند، بدون اینکه لازم باشد عددی برای راست و
   چپ حدس زده شود.

   ::after یک clearfix با display:table است که در ظرف فلکس به یک عضو تبدیل
   می‌شود و یک gap خالی اضافه می‌کند؛ اینجا کاری ندارد. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  position:static; inset:auto;
  flex:0 0 auto; line-height:1;
}
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after{ display:none; }

.woocommerce-message a.button,
.woocommerce-error a.button{
  margin-inline-start:auto; display:inline-flex; align-items:center;
  min-block-size:36px; padding-inline:var(--s-4); border-radius:var(--r-full);
  background:var(--ink); color:var(--on-ink); font-weight:700; font-size:.8125rem;
}

/* ---------------- cart page ---------------- */
:root, :root[data-theme="light"]{ --cart-aurora-op: .34; }
:root[data-theme="dark"]{ --cart-aurora-op: .8; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --cart-aurora-op: .8; }
}

.cart-wrap{ position:relative; max-width:1120px; margin-inline:auto; padding:var(--s-7) var(--s-5) var(--s-9); scroll-margin-block-start:104px; }
.cart-wrap h1{ font-size:var(--t-xl); font-weight:900; margin-block-end:var(--s-6); }
.cart-wrap .aurora{ position:absolute; inset:-8% -5% auto; block-size:640px; z-index:0; pointer-events:none; overflow:hidden; }
.cart-wrap .aurora__blob{
  position:absolute; display:block; inline-size:clamp(240px,36vw,480px); aspect-ratio:1;
  border-radius:50%; filter:blur(70px); opacity:var(--cart-aurora-op); will-change:transform;
}
.cart-wrap .aurora__blob--a{ inset-block-start:-10%; inset-inline-start:-6%; background:radial-gradient(circle, var(--violet) 0%, transparent 68%); animation:cart-drift-a 25s ease-in-out infinite; }
.cart-wrap .aurora__blob--b{ inset-block-start:20%; inset-inline-end:-8%; background:radial-gradient(circle, var(--teal) 0%, transparent 68%); animation:cart-drift-b 30s ease-in-out infinite; }
@keyframes cart-drift-a{ 50%{ transform:translate(6%,8%) scale(1.1); } }
@keyframes cart-drift-b{ 50%{ transform:translate(-7%,-6%) scale(.9); } }
@media (prefers-reduced-motion:reduce){
  .cart-wrap .aurora__blob{ animation:none; }
}
.cart-wrap > :not(.aurora){ position:relative; z-index:1; }

.cart-layout{ display:grid; gap:var(--s-6); grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){
  .cart-layout{ grid-template-columns:minmax(0,1fr) 340px; }
}

.cart-items{ display:flex; flex-direction:column; gap:var(--s-3); }

.cart-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-4); align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--e-1); padding:var(--s-4);
}
.cart-item__art{
  inline-size:76px; block-size:76px; border-radius:var(--r-md); overflow:hidden; flex:none;
  background:var(--surface-2); display:grid; place-items:center;
}
.cart-item__art img{ inline-size:100%; block-size:100%; object-fit:cover; }
.cart-item__art svg{ inline-size:26px; block-size:26px; color:var(--text-muted); }

.cart-item__main{ min-inline-size:0; display:grid; gap:6px; }
.cart-item__name{ font-size:var(--t-base); font-weight:700; }
.cart-item__name a{ color:var(--text); }
.cart-item__name a:hover{ color:var(--accent, var(--ink)); }
.cart-item__meta{ font-size:.8125rem; color:var(--text-muted); }
.cart-item__price{ font-size:.8125rem; color:var(--text-muted); }
.cart-item__price .amount{ color:var(--text); font-weight:700; }

.cart-item__side{ display:grid; gap:var(--s-3); justify-items:end; }

/* پله‌ی تعداد — دور input.qty بومی ووکامرس ساخته می‌شود (cart.js) تا
   حذف/AJAX خودِ ووکامرس دست‌نخورده بماند، فقط ظاهرش عوض می‌شود. */
.cart-item__qty{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:var(--r-full); background:var(--surface-2);
}
/* ۴۴×۴۴ حداقل هدف لمسیِ استاندارد (WCAG/Apple HIG) — قبلاً ۳۰px بود،
   روی موبایل به‌سختی دقیق لمس می‌شد. */
.cart-item__qty button{
  inline-size:44px; block-size:44px; border-radius:50%; display:grid; place-items:center;
  color:var(--text); font-size:1.0625rem; font-weight:700; line-height:1;
  background:transparent; border:0; cursor:pointer;
}
.cart-item__qty button:hover{ background:color-mix(in oklch, var(--violet) 18%, var(--surface)); color:var(--violet); }
.cart-item__qty button:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.cart-item__qty button:active{ background:color-mix(in oklch, var(--violet) 28%, var(--surface)); }
.cart-item__qty button:disabled{ opacity:.35; pointer-events:none; }
.cart-item__qty input.qty{
  inline-size:38px; block-size:44px; border:0; background:transparent; text-align:center;
  font-family:inherit; font-size:.9375rem; font-weight:700; color:var(--text);
  -moz-appearance:textfield;
}
.cart-item__qty input.qty::-webkit-outer-spin-button,
.cart-item__qty input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.cart-item__subtotal{ font-size:var(--t-base); font-weight:900; color:var(--text); }

/* ۴۴×۴۴ همان استاندارد پله‌ی تعداد — قبلاً فقط متن کوچک بی‌پدینگ بود. */
.cart-item__remove{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-inline-size:44px; min-block-size:44px; padding-inline:var(--s-2); border-radius:var(--r-full);
  color:var(--text-muted); font-size:.75rem; transition:background .16s var(--ease-out), color .16s var(--ease-out);
}
.cart-item__remove:hover{ color:var(--pink); background:var(--surface-2); }
.cart-item__remove svg{ inline-size:14px; block-size:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

@media (max-width:560px){
  .cart-item{ grid-template-columns:auto 1fr; }
  .cart-item__side{ grid-column:1 / -1; justify-items:stretch; grid-template-columns:1fr auto; display:grid; align-items:center; }
}

/* کوپن + به‌روزرسانی سبد */
.cart-actions{
  display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s-4);
}
.cart-coupon{ display:flex; gap:var(--s-2); flex:1; min-inline-size:220px; }
.cart-coupon input{
  flex:1; min-inline-size:0; border:1px solid var(--line); border-radius:var(--r-full);
  padding-inline:var(--s-4); min-block-size:42px; background:var(--surface-2);
  font-family:inherit; font-size:var(--t-sm); color:var(--text);
}
.cart-coupon input{ transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.cart-coupon input:hover{ border-color:var(--violet); }
.cart-coupon input:focus-visible{
  outline:2px solid var(--violet); outline-offset:2px;
  border-color:var(--violet); box-shadow:0 0 0 4px color-mix(in oklch, var(--violet) 18%, transparent);
}
.cart-actions .button{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:42px; padding-inline:var(--s-4); border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:inherit; font-weight:700; font-size:var(--t-sm); box-shadow:var(--e-1);
  transition:background .18s var(--ease-out), transform .18s var(--ease-out);
}
.cart-actions .button:hover{ background:var(--surface-2); transform:translateY(-1px); }
.cart-actions [name="update_cart"]{ margin-inline-start:auto; }

/* ستون جمع — .cart_totals مارک‌آپ خودِ ووکامرس است (cart/cart-totals.php،
   بازنویسی نشده)؛ فقط با اختصاصیت بیشتر روی همان کلاس‌ها کار می‌کنیم. */
.cart-collaterals{ display:grid; gap:var(--s-4); }
.cart_totals{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--e-2); padding:var(--s-5);
  position:sticky; inset-block-start:calc(104px + var(--s-4));
}
.cart_totals h2{ font-size:var(--t-lg); font-weight:900; margin-block-end:var(--s-4); }
.cart_totals table{ width:100%; border-collapse:collapse; }
.cart_totals tr{ border-block-end:1px solid var(--line); }
.cart_totals tr:last-child{ border-block-end:0; }
.cart_totals th,
.cart_totals td{ padding-block:var(--s-3); text-align:start; font-size:var(--t-sm); font-weight:400; color:var(--text-muted); }
.cart_totals td{ text-align:end; color:var(--text); font-weight:700; }
.cart_totals .order-total th,
.cart_totals .order-total td{ font-size:var(--t-lg); font-weight:900; color:var(--text); }
.cart_totals .woocommerce-shipping-destination{ display:none; } /* آدرس خام «Shipping to…» — سبد هنوز فیلد آدرس نمی‌گیرد */
.wc-proceed-to-checkout{ margin-block-start:var(--s-4); }
.checkout-button.button{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-block-size:48px; border-radius:var(--r-full);
  background:var(--ink); color:var(--on-ink) !important;
  font-family:inherit; font-weight:700; font-size:var(--t-sm);
  box-shadow:var(--e-2), var(--edge);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.checkout-button.button:hover{ transform:translateY(-2px); box-shadow:var(--e-3), var(--edge); }

/* سبد خالی */
.cart-empty{
  max-width:520px; margin-inline:auto; padding:var(--s-9) var(--s-5); text-align:center;
}
.cart-empty svg{ inline-size:56px; block-size:56px; color:var(--text-muted); margin-block-end:var(--s-4); fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.cart-empty h1{ font-size:var(--t-lg); font-weight:900; margin-block-end:var(--s-2); }
.cart-empty p{ color:var(--text-muted); margin-block-end:var(--s-5); }

/* ---------------- checkout: payment section ----------------
   فقط بخش انتخاب درگاه بازطراحی شده (checkout/payment.php override).
   فیلدهای صورت‌حساب/ارسال و جدول سفارش هنوز از تمپلیت پیش‌فرض ووکامرس
   می‌آیند و همچنان استایل پیش‌فرض خودشان را می‌گیرند (functions.php
   این استایل را فقط در صفحه‌ی سبد خاموش می‌کند، نه پرداخت) — پس اینجا
   با اختصاصیت بالاتر روی همان بخش کار می‌کنیم، نه کل صفحه. */
.woocommerce-checkout-payment{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--e-2); padding:var(--s-5);
}
ul.wc_payment_methods.payment_methods.methods{
  list-style:none; margin:0 0 var(--s-4); padding:0; display:grid; gap:var(--s-3);
}
li.wc_payment_method{ position:relative; }
li.wc_payment_method > input.input-radio{
  position:absolute; inset-block-start:0; inset-inline-start:0; inline-size:1px; block-size:1px; opacity:0;
}
li.wc_payment_method > label{
  display:flex; align-items:center; gap:var(--s-3); cursor:pointer;
  padding:var(--s-4); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line);
  font-weight:700; font-size:var(--t-sm); color:var(--text);
  transition:border-color .18s var(--ease-out), background .18s var(--ease-out);
}
li.wc_payment_method > label::before{
  content:''; inline-size:19px; block-size:19px; border-radius:50%; flex:none;
  border:2px solid var(--line); box-sizing:border-box;
  background:radial-gradient(circle, var(--ink) 0 0) center/0 0 no-repeat;
  transition:background-size .16s var(--ease-out), border-color .16s var(--ease-out);
}
li.wc_payment_method > input.input-radio:checked + label{
  border-color:var(--ink); background:var(--surface);
}
li.wc_payment_method > input.input-radio:checked + label::before{
  border-color:var(--ink); background-size:9px 9px;
}
li.wc_payment_method > input.input-radio:focus-visible + label{ outline:2px solid var(--ink); outline-offset:2px; }
li.wc_payment_method img{ block-size:20px; width:auto; margin-inline-start:auto; }
.payment_box{
  margin:var(--s-2) 0 0; padding:var(--s-4); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:var(--t-sm); color:var(--text-muted); line-height:1.9;
}
.payment_box p:last-child{ margin-block-end:0; }

/* حالتی که هنوز هیچ درگاهی فعال نیست */
.uc-no-gateway{
  display:grid; gap:var(--s-2); justify-items:center; text-align:center;
  padding:var(--s-6) var(--s-4); border-radius:var(--r-md);
  background:var(--surface-2); border:1px dashed var(--line);
}
.uc-no-gateway svg{
  inline-size:34px; block-size:34px; color:var(--text-muted);
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.uc-no-gateway strong{ font-size:var(--t-base); color:var(--text); }
.uc-no-gateway p{ margin:0; color:var(--text-muted); font-size:var(--t-sm); max-width:38ch; }

/* دکمه‌ی ثبت سفارش و قوانین — دکمه از .btn/.btn--primary موجود استفاده
   می‌کند (کلاسش در payment.php override اضافه شده)، اینجا فقط عرض کامل. */
.form-row.place-order{ margin-block-start:var(--s-4); display:grid; gap:var(--s-3); }
.form-row.place-order .btn{ width:100%; }
.woocommerce-terms-and-conditions-wrapper{ font-size:.8125rem; color:var(--text-muted); }
.woocommerce-form__label-for-checkbox{ display:flex; align-items:center; gap:var(--s-2); cursor:pointer; }
.woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox{ inline-size:16px; block-size:16px; accent-color:var(--ink); }