/**
 * Toska Product Cards — cart.css  |  v30.22.0 (NEW)
 */

/* ── دکمه افزودن به سبد (روی خود کارت‌ها) ────────────────────────── */
/* BUG FIX (v30.27): تم سایت روی <button> ها استایل سراسری (پدینگ/فونت
   بزرگ‌تر) اعمال می‌کرد و این دکمه را در موبایل غیرمنتظره بزرگ می‌کرد.
   all:unset این ارث‌بری ناخواسته را قطع می‌کند. */
.epc-add-to-cart {
  all:             unset !important;
  box-sizing:      border-box !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px !important;
  width:           100% !important;
  margin-top:      10px !important;
  padding:         12px 16px !important;
  background:      #fff !important;
  color:           #6366f1 !important;
  border:          2px solid #6366f1 !important;
  border-radius:   12px !important;
  font-family:     inherit !important;
  font-size:       14px !important;
  font-weight:     700 !important;
  cursor:          pointer !important;
  transition:      background .2s, color .2s, transform .15s !important;
}
.epc-add-to-cart:hover  { background: #6366f1; color: #fff; }
.epc-add-to-cart:hover svg path,
.epc-add-to-cart:hover svg circle { stroke: #fff; fill: #fff; }
.epc-add-to-cart-added  { animation: epc-cart-added-pulse .5s ease; }
@keyframes epc-cart-added-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(.95); background: #16a34a; color: #fff; border-color: #16a34a; }
  100% { transform: scale(1); }
}

/* ── حباب شناور سبد خرید ─────────────────────────────────────────── */
/* BUG FIX (v30.28): قبلاً پایین-راست بود، دقیقاً زیر دکمه‌ی شناور تماس
   می‌افتاد و روی هم می‌ریختند. حالا به وسط صفحه، سمت چپ منتقل شد تا از
   دکمه‌ی تماس (که پایین-راست است) کاملاً جدا باشد. */
/* BUG FIX (v30.27): همون مشکل دکمه‌های تعداد — تمِ سایت روی هر <button>
   استایل سراسری (پدینگ/عرض/فونت) اعمال می‌کرد و همین حباب گرد کوچک را به
   یک نوار بزرگ در موبایل تبدیل می‌کرد. با all:unset این تداخل قطع می‌شود. */
#epc-cart-bubble {
  all:             unset !important;
  box-sizing:      border-box !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
  position:        fixed !important;
  top:             50% !important;
  left:            14px !important;
  right:           auto !important;
  bottom:          auto !important;
  transform:       translateY(-50%) !important;
  z-index:         999998 !important;
  width:           58px !important;
  height:          58px !important;
  min-width:       58px !important;
  max-width:       58px !important;
  min-height:      58px !important;
  max-height:      58px !important;
  border-radius:   50% !important;
  background:      linear-gradient(135deg, #6366f1, #ec4899) !important;
  box-shadow:      0 8px 26px rgba(99,102,241,.45) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  cursor:          pointer !important;
  transition:      transform .2s !important;
}
#epc-cart-bubble:hover { transform: translateY(-50%) scale(1.08) !important; }

#epc-cart-badge {
  position:      absolute;
  top:           -4px;
  right:         -4px;
  min-width:     20px;
  height:        20px;
  padding:       0 4px;
  border-radius: 10px;
  background:    #16a34a;
  color:         #fff;
  font-size:     11px;
  font-weight:   700;
  display:       none;
  align-items:   center;
  justify-content: center;
  border:        2px solid #fff;
}
#epc-cart-badge.epc-cart-badge-show { display: flex; }

/* ── کشوی سبد خرید ───────────────────────────────────────────────── */
#epc-cart-drawer {
  position:   fixed;
  inset:      0;
  z-index:    999999;
  visibility: hidden;
  opacity:    0;
  transition: opacity .3s ease, visibility .3s;
}
#epc-cart-drawer.open { visibility: visible; opacity: 1; }

#epc-cart-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(15,15,25,.55);
}

#epc-cart-panel {
  position:       absolute;
  top:            0; bottom: 0;
  right:          0; /* BUG FIX (v30.24): مثل بالا — right فیزیکی به‌جای inset-inline-end */
  width:          min(380px, 92vw);
  background:     #fff;
  box-shadow:     -10px 0 40px rgba(0,0,0,.2);
  display:        flex;
  flex-direction: column;
  transform:      translateX(0);
  direction:      rtl;
  font-family:    Tahoma, sans-serif;
}
[dir="ltr"] #epc-cart-panel { direction: rtl; } /* سبد همیشه راست‌به‌چپ نمایش داده می‌شود */

#epc-cart-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 18px;
  border-bottom:   1px solid #eee;
  font-weight:     700;
  font-size:       16px;
}
#epc-cart-close {
  all: unset !important;
  box-sizing: border-box !important;
  background: none !important; font-size: 18px !important; cursor: pointer !important; color: #666 !important;
  padding: 4px !important; line-height: 1 !important;
}

#epc-cart-body { flex: 1; overflow-y: auto; padding: 8px 12px; }

#epc-cart-list { list-style: none; margin: 0; padding: 0; }
#epc-cart-list li {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        10px 6px;
  border-bottom:  1px solid #f3f3f6;
  width:          100%;
  max-width:      100%;
  box-sizing:     border-box;
}
#epc-cart-list li.epc-cart-empty {
  justify-content: center;
  color:           #888;
  padding:         40px 10px;
  border-bottom:   0;
  display:         block;
  text-align:      center;
}
/* ردیف بالا: عکس + عنوان/قیمت + دکمه حذف */
.epc-cart-li-top {
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       100%;
  box-sizing:  border-box;
}
/* BUG FIX (v30.24): !important روی اندازه‌ی عکس — بعضی قالب‌ها/افزونه‌ها
   یک قانون سراسری img{width:100%!important} دارند که باعث می‌شد عکس کوچک
   ۴۸ در ۴۸ کل کشوی سبد را بگیرد و دکمه‌های تعداد/حذف را له کند. */
#epc-cart-list img,
.epc-cart-li-noimg {
  width:      48px !important;
  height:     48px !important;
  max-width:  48px !important;
  min-width:  48px !important;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f0f0f4;
}
.epc-cart-li-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.epc-cart-li-title { font-size: 13px; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epc-cart-li-price { font-size: 12px; color: #6366f1; font-weight: 700; }

/* BUG FIX (v30.27): تم/قالب سایت روی همه‌ی <button> ها استایل سراسری
   (پدینگ/فونت بزرگ) اعمال می‌کرد و دکمه‌های کوچک +/− را در موبایل به
   شکل قرص‌های غول‌پیکر درمی‌آورد. حالا با !important این استایل‌ها را
   کامل بازنویسی می‌کنیم تا مستقل از تم همیشه کوچک و دایره‌ای بمانند.
   NEW (v30.27): طبق درخواست کاربر، ردیف تعداد (+/−) به‌جای کنار عکس،
   زیر آن (تمام عرض) قرار می‌گیرد. */
.epc-cart-li-qty {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             14px !important;
  width:           100% !important;
  font-size:       13px !important;
  font-weight:     700 !important;
}
.epc-cart-li-qty button,
.epc-cart-remove {
  all:             unset !important;
  box-sizing:      border-box !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
}
.epc-cart-li-qty button {
  width:           26px !important;
  height:          26px !important;
  min-width:       26px !important;
  max-width:       26px !important;
  min-height:      26px !important;
  max-height:      26px !important;
  border-radius:   50% !important;
  border:          1px solid #ddd !important;
  background:      #f8f8fb !important;
  color:           #333 !important;
  cursor:          pointer !important;
  font-size:       15px !important;
  line-height:     1 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
}
.epc-cart-li-qty span { min-width: 18px; text-align: center; }
.epc-cart-remove {
  color:      #d63638 !important;
  cursor:     pointer !important;
  font-size:  14px !important;
  padding:    4px 6px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

#epc-cart-foot { border-top: 1px solid #eee; padding: 14px 18px 18px; }
#epc-cart-total-row {
  display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 10px;
}
#epc-cart-total-row strong { font-size: 16px; color: #16a34a; }

#epc-cart-checkout-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#epc-cart-checkout-form input {
  padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 13px;
}
#epc-cart-msg { font-size: 12px; min-height: 16px; text-align: center; margin: 0; }
#epc-cart-msg.error   { color: #d63638; }
#epc-cart-msg.success { color: #16a34a; }

#epc-cart-checkout-btn {
  all:           unset !important;
  box-sizing:    border-box !important;
  display:       block !important;
  width:         100% !important;
  padding:       13px !important;
  border-radius: 10px !important;
  cursor:        pointer !important;
  background:    linear-gradient(135deg, #6366f1, #ec4899) !important;
  color:         #fff !important;
  font-family:   inherit !important;
  font-size:     14px !important;
  font-weight:   700 !important;
  text-align:    center !important;
}
#epc-cart-checkout-btn:disabled { opacity: .6 !important; cursor: default !important; }

@media (max-width: 480px) {
  #epc-cart-bubble {
    width: 52px !important; height: 52px !important;
    min-width: 52px !important; max-width: 52px !important;
    min-height: 52px !important; max-height: 52px !important;
    left: 10px !important;
  }
}