/*
 * اسپشیال — استایل یکپارچه
 *
 * ادغام سه فایل <style> طرح‌های اولیه در یک فایل قابل کش.
 * تفاوت‌های جزئی بین صفحات (مثل شفافیت گلس‌مورفیسم) با کلاس بدنه
 * page-shop / page-product دقیقاً حفظ شده تا ظاهر هر صفحه مو‌به‌مو
 * همان چیزی باشد که در طرح اولیه بود.
 */

/* ── محافظ viewport و overflow افقی موبایل ─────────────────────── */
html,
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
  background-color: #F8FAFC;
  color: #0F172A;
  font-family: 'Vazirmatn', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.dark body {
  background-color: #0B0F17;
  color: #F8FAFC;
}

.no-overflow-x {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── اسکرول‌بار ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── تعامل لمسی ─────────────────────────────────────────────────── */
.active-press { transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1); }
.active-press:active { transform: scale(0.95); }
.page-product .active-press:active { transform: scale(0.96); }

/* ── گلس‌مورفیسم هدر ────────────────────────────────────────────── */
.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dark .glass-header {
  background: rgba(11, 15, 23, 0.85);
  backdrop-filter: blur(16px);
}

.page-shop .glass-header,
.page-product .glass-header { background: rgba(255, 255, 255, 0.9); }

.dark .page-shop .glass-header,
.dark .page-product .glass-header { background: rgba(11, 15, 23, 0.9); }

/* ── داک پایین موبایل ───────────────────────────────────────────── */
.glass-dock {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .glass-dock {
  background: rgba(18, 24, 36, 0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.page-product .glass-dock { background: rgba(255, 255, 255, 0.95); }
.dark .page-product .glass-dock { background: rgba(18, 24, 36, 0.95); }

/* ── انیمیشن شیت‌ها و دراورها ───────────────────────────────────── */
.sheet-overlay { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.bottom-sheet { transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-closed { transform: translateY(100%); }

.side-drawer { transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.drawer-closed { transform: translateX(-100%); }

/* ── زوم ملایم تصاویر ───────────────────────────────────────────── */
.img-container,
.img-hover-zoom {
  overflow: hidden;
  position: relative;
}

.img-container img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.img-container:hover img { transform: scale(1.06); }

.img-hover-zoom img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.img-hover-zoom:hover img { transform: scale(1.06); }

/* تگ picture نباید چیدمان تصویر را بشکند */
.img-container picture,
.img-hover-zoom picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── نشانگر زنده بودن انبار ─────────────────────────────────────── */
.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ── کارت انتخاب حالت سفارش (صفحه محصول) ───────────────────────── */
.mode-card.selected {
  border-color: #0F172A;
  background-color: rgba(15, 23, 42, 0.03);
}

.dark .mode-card.selected {
  border-color: #F8FAFC;
  background-color: rgba(255, 255, 255, 0.05);
}

/* ── وضعیت اسکلتون هنگام بارگذاری فیلترها ──────────────────────── */
.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.2s; }

/* ── اندازه متن فیلدها در موبایل ────────────────────────────────
 *
 * سافاری iOS هر فیلدی را که اندازه متنش کمتر از ۱۶ پیکسل باشد، هنگام
 * فوکوس به‌زور بزرگ‌نمایی می‌کند و صفحه بزرگ‌شده باقی می‌ماند. فیلدهای
 * این پروژه text-xs (۱۲ پیکسل) و text-sm (۱۴ پیکسل) هستند.
 *
 * پیش‌تر جلوی این رفتار با user-scalable=no در تگ viewport گرفته شده
 * بود، اما آن راه‌حل زوم را برای همه‌ی صفحه می‌بست — کاربری که
 * می‌خواست جدول سری‌بندی را بزرگ ببیند هم نمی‌توانست.
 *
 * حالا زوم آزاد است و به‌جایش خودِ فیلدها در موبایل ۱۶ پیکسل می‌شوند
 * تا سافاری دلیلی برای بزرگ‌نمایی خودکار نداشته باشد. فقط روی موبایل
 * اعمال می‌شود؛ در دسکتاپ همه‌چیز مثل قبل است.
 */
@media (max-width: 767px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px;
  }
}