/* ============================================================
   سیستم طراحی پریمیوم «شارژر استور» (Design System)
   الهام‌گرفته از Apple / Stripe / Vercel — مدرن، تمیز، با جزئیات دقیق.
   🧑‍🏫 این فایل ریشهٔ ظاهر کل سایت است و اول از همه در base.html لود می‌شود.
        برای تغییر هویت بصری سایت، فقط همین متغیرها را عوض کن.
   ============================================================ */

/* ---------- فونت پریمیوم فارسی (وزیرمتن، با وزن‌های متنوع) ---------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== پالت رنگ ===== */
  --brand: #170C79;            /* قرمز اصلی برند */
  --brand-dark: #2F2FE4;       /* قرمز تیره (hover) */
  --brand-light: #f0f2ff;      /* قرمز خیلی روشن (پس‌زمینهٔ ملایم) */
  --brand-glow: rgba(44, 8, 184, 0.25);  /* هالهٔ قرمز برای سایه دکمه‌ها */

  /* رنگ مکمل (آبی روشن برای تنوع و گرادیان) */
  --accent: #2563eb;
  --accent-light: #eff4ff;

  /* خنثی‌ها (مقیاس خاکستری دقیق و مدرن) */
  --bg: #f7f8fa;               /* پس‌زمینهٔ کل صفحه */
  --bg-soft: #eef1f5;          /* پس‌زمینهٔ ملایم‌تر برای بخش‌های متناوب */
  --surface: #ffffff;          /* کارت‌ها و باکس‌ها */
  --text: #0f172a;             /* متن اصلی (تیرهٔ عمیق، نه مشکی محض) */
  --text-soft: #334155;        /* متن ثانویه */
  --text-muted: #94a3b8;       /* متن کم‌رنگ */
  --border: #e8ebef;           /* خطوط و حاشیه‌ها */
  --border-strong: #d6dbe2;

  /* رنگ‌های وضعیت */
  --success: #10b981;
  --success-light: #ecfdf5;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* ===== گرادیان‌ها ===== */
  --gradient-brand: linear-gradient(135deg, #170C79 0%, #2F2FE4 50%, #2563eb 100%);
  --gradient-dark: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --gradient-hero: linear-gradient(120deg, #0f172a 0%, #1e293b 40%, #1411c1 100%);
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);

  /* ===== گردی گوشه‌ها ===== */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 999px;

  /* ===== سایه‌های نرم چندلایه (Soft Shadows) ===== */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.14);
  --shadow-brand: 0 10px 28px var(--brand-glow);

  /* ===== گلسمورفیسم (شیشه‌ای) ===== */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(16px) saturate(160%);

  /* ===== انیمیشن و transition ===== */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* نرم و پریمیوم برای ورود عناصر */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* فنری برای hover */
  --t-fast: 0.18s;
  --t: 0.28s;
  --t-slow: 0.5s;

  /* ===== چیدمان ===== */
  --max-width: 1520px;
  --header-h: 64px;
}

/* ---------- بازنشانی پایه ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }   /* اسکرول نرم در کل سایت */

/* 🧑‍🏫 جلوگیری از اسکرول افقی کل صفحه (مثلاً وقتی iframe نقشه یا عنصر
   با عرض ثابت توی موبایل کمی سرریز می‌کنه) — یه شبکهٔ ایمنی سراسری. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  font-family: "Vazirmatn", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;   /* فونت صاف‌تر در مک/کروم */
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";          /* اعداد فارسی زیباتر در وزیرمتن */
}

a { color: inherit; }
img { max-width: 100%; }

/* ---------- کانتینر مرکزی ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* ---------- عنوان بخش‌ها (مشترک) ---------- */
.section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 36px 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.02em;
}
.section-title::before {
  content: "";
  width: 5px;
  height: 1.4em;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
  display: inline-block;
}

/* عنوان بخش با «نمایش همه» در کنار */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 36px 0 22px;
}
.section-head .section-title { margin: 0; }
.section-head .see-all {
  font-size: 0.85rem;
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--t-fast) var(--ease);
}
.section-head .see-all:hover { gap: 8px; }

/* ---------- اسکرول‌بار سفارشی (ظریف، مدرن) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---------- انیمیشن‌های مشترک (کلاس کمکی) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fade-up { animation: fadeUp var(--t-slow) var(--ease-out) both; }
.animate-fade-in { animation: fadeIn var(--t-slow) var(--ease) both; }

/* اسکلت لودینگ (Loading Skeleton) برای حالت بارگذاری */
.skeleton {
  background: linear-gradient(90deg, #eef1f5 25%, #e2e6ec 50%, #eef1f5 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}

/* اسپینر لودینگ مشترک */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* احترام به ترجیح کاربر برای کاهش انیمیشن (دسترس‌پذیری) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}
/* ============================================================
   استایل‌های عمومی مکمل
   🧑‍🏫 بازنشانی پایه و فونت و کانتینر در variables.css است.
        این فایل فقط چند کلاس کمکی عمومی دارد.
   ============================================================ */

/* دکمهٔ عمومی پریمیوم (قابل استفاده در کل سایت) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t) var(--ease),
              background var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--brand-glow); }

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* بخش با پس‌زمینهٔ متناوب */
.section-alt { background: var(--bg-soft); }

/* فاصلهٔ عمودی استاندارد بین بخش‌ها */
.section-pad { padding: 32px 0; }
/* ============================================================
   هدر پریمیوم — چسبان، شیشه‌ای (glassmorphism)، با جزئیات دقیق
   🧑‍🏫 نام کلاس‌ها همان قالب base.html توست؛ فقط ظاهر ارتقا یافته.
   ============================================================ */

header {
  position: relative;
  top: 0;
  z-index: 1000;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}

/* نوار اعلان بالا (announcement bar) */
.top-banner {
  background: var(--gradient-dark);
  overflow: hidden;
}
.top-banner img {
  width: 100%;
  display: block;
  max-height: 85px;
  object-fit: cover;
  opacity: 0.95;
}

/* هدر میانی */
.middle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
}
.right-box {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}
.logo img {
  height: 54px;
  width: auto;
  display: block;
  transition: transform var(--t) var(--ease-spring);
}
.logo:hover img {
  transform: scale(1.04);
}
/* 🧑‍🏫 وقتی کاربر لاگین کرده، توی نوبار موبایل دکمه‌های بیشتری
   (پروفایل/سبد/خروج) هست و لوگوی فعلی کنارشون فشرده/زشت می‌شه؛
   برای همین یه لوگوی جمع‌وجورتر جایگزینش می‌کنیم — فقط در موبایل. */
.logo img.logo-img-compact {
  display: none;
}
@media (max-width: 900px) {
  .logo.has-alt-logo .logo-img-default {
    display: none;
  }
  .logo.has-alt-logo .logo-img-compact {
    display: block;
    height: 40px;
    width: auto;
  }
}

/* جستجوی مرکزی */
.middle-section {
  flex: 1;
  max-width: 580px;
}
.middle-section form {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.middle-section form:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-light);
}
.search-bar {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 18px;
  font-size: 0.95rem;
  outline: none;
  font-family: inherit;
  color: var(--text);
}
.search-bar::placeholder {
  color: var(--text-muted);
}
.search-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 0 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--t-fast) var(--ease);
}
.search-btn:hover {
  color: var(--brand);
}

/* بخش چپ: ورود/پروفایل و سبد */
.left-box {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.partner-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius-full, 999px);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.35);
  transition: transform var(--t-fast, 0.15s) var(--ease-spring, ease), box-shadow var(--t, 0.2s) ease;
}
.partner-panel-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.45);
}
.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t) var(--ease);
}
.btn-login:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}
.divider {
  width: 1px;
  height: 30px;
  background: var(--border);
}

.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  transition: all var(--t) var(--ease);
}
.header-icon:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}
#cart-count {
  position: absolute;
  top: -8px;
  left: -8px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: var(--shadow-brand);
}

/* نوار پایینی ناوبری */
.bottom-header {
  border-top: 1px solid var(--border);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6px 20px;
  height: 50px;
}
.nav-links > li > a,
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--t) var(--ease);
}
.nav-links > li > a:hover,
.nav-link:hover {
  background: var(--brand-light);
  color: var(--brand);
}

/* دکمهٔ دسته‌بندی (متمایز با گرادیان) */
.category-dropdown > .nav-link {
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-brand);
}
.category-dropdown > .nav-link:hover {
  background-color: var(--brand-light);
  color: #0716a0;
  transform: translateY(-1px);
}

/* مگامنو (شیشه‌ای، با انیمیشن ورود) */
.category-dropdown {
  position: relative;
}
.mega-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  width: 780px;
  max-width: 92vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none;
  grid-template-columns: 230px 1fr;
  overflow: hidden;
  z-index: 200;
}
.mega-menu.open {
  display: grid;
  animation: fadeUp 0.3s var(--ease-out);
}
.main-categories {
  background: var(--bg-soft);
  list-style: none;
  padding: 10px 0;
  margin: 0;
}
.main-categories .category-item {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all var(--t-fast) var(--ease);
  position: relative;
}
.main-categories .category-item:hover,
.main-categories .category-item.active {
  background: var(--surface);
  color: var(--brand);
}
.main-categories .category-item.active::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-brand);
}
.sub-categories-container {
  padding: 22px;
}
.sub-content {
  display: none;
}
.sub-content.active {
  display: block;
  animation: fadeIn var(--t) var(--ease);
}
.sub-column h4 {
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.sub-column h4 a {
  color: var(--brand);
  text-decoration: none;
}
.sub-column ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sub-column ul li a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color var(--t-fast);
}
.sub-column ul li a:hover {
  color: var(--brand);
}

/* پیام‌های سیستمی (alert) */
.alert {
  padding: 13px 20px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  animation: fadeUp var(--t) var(--ease-out);
}
.alert-success {
  background: var(--success-light);
  color: #047857;
}
.alert-error,
.alert-danger {
  background: #fef2f2;
  color: #b91c1c;
}
.alert-info {
  background: var(--accent-light);
  color: #1d4ed8;
}
.alert-warning {
  background: #fffbeb;
  color: #b45309;
}

.mobile-nav-toggle {
  display: none;
}
/* واکنش‌گرا */

@media (max-width: 900px) {

  /* ========================= Header ========================= */
  .middle-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
  } /* ========================= Logo ========================= */
  .logo {
    order: 1;
    flex: 1;
    min-width: 0;
  }
  .logo img {
    display: block;
    width: 150px;
    height: auto;
    transition: transform var(--t) var(--ease-spring);
  } /* ========================= Header Buttons ========================= */
  .right-box {
    display: contents;
  }
  .left-box {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .btn-login {
    padding: 7px 10px;
    font-size: 0.78rem;
    gap: 4px;
  }
  .partner-panel-btn {
    padding: 7px 12px;
    font-size: 0.76rem;
  }
  .header-icon {
    width: 38px;
    height: 38px;
  }
  .divider {
    height: 20px;
  } /* ========================= Search + Hamburger ========================= */
  .middle-section {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 8px;
  } /* Search */
  .middle-section .search-box {
    flex: 1;
    min-width: 0;
  } /* Hamburger */
  .hamburger-menu {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  } /* ========================= Mega Menu ========================= */
  .mega-menu,
  .mega-menu.cascade {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .cascade-col-2,
  .cascade-col-3,
  .cascade-col-4 {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 600px) {
  .logo img {
    height: 42px;
    width: auto;
    max-width: 140px;
    display: block;
    transition: transform var(--t) var(--ease-spring);
  }
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 8px 20px;
    z-index: 500;
  }
  .nav-links.open {
    display: flex;
  }
  .bottom-header {
    position: relative;
  }
  .top-banner{
    display: none;
  }

  /* 🧑‍🏫 مگامنو در موبایل: فقط دسته‌های اصلی (ستون ۱) به‌صورت یه لیست
     ساده باز می‌شه؛ ستون‌های ۲ تا ۴ (پنل‌های زیردسته که کنارش باز
     می‌شدن) کاملاً مخفی‌ان — چون روی موبایل جا نداره و باعث می‌شد
     صفحه به‌هم‌بریزه. با تپ روی هر دسته‌ی اصلی هم مستقیم به همون
     صفحهٔ دسته می‌ره (چون خودش لینکه). */
  .mega-menu.cascade {
    position: static;
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    box-shadow: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: 6px;
  }
  .cascade-col-2,
  .cascade-col-3,
  .cascade-col-4 {
    display: none !important;
  }
  .cascade-item .caret {
    display: none; /* روی موبایل زیرمنویی باز نمی‌شه، پس این فلش گمراه‌کننده‌ست */
  }
}

/* ===== مگامنوی آبشاری ۴ سطحی ===== */
.mega-menu.cascade {
  display: none;
  /* 🧑‍🏫 این none حیاتیه: بدون این، مقدار grid-template-columns:230px 1fr
     که روی خودِ .mega-menu (قانون پایه) تعریف شده هنوز فعاله و
     مگامنو رو به ۲ ستون ثابت محدود می‌کنه، حتی با grid-auto-flow. */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  width: auto;
  min-width: 200px;
  max-width: 92vw;
}
.mega-menu.cascade.open {
  display: grid;
}

.cascade-col {
  border-left: 1px solid var(--border);
  padding: 8px 0;
  min-height: 100%;
  margin-bottom: 0;
}
.cascade-col:last-child {
  border-left: none;
}
.cascade-col-1 {
  background: var(--bg-soft);
  list-style: none;
  margin: 0;
}

/* پنل‌های ستون ۲ تا ۴ پیش‌فرض پنهان */
.cascade-col-2,
.cascade-col-3,
.cascade-col-4 {
  display: none;
}
.cascade-col-2.show,
.cascade-col-3.show,
.cascade-col-4.show {
  display: block;
}
.cascade-panel {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cascade-panel.show {
  display: block;
}

.cascade-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  transition:
    0.15s,
    color 0.15s;
}
.cascade-item > a {
  text-decoration: none;
  color: var(--text-soft);
  font-size: 0.86rem;
  flex: 1;
}
.cascade-item:hover {
  background: var(--surface);
}
.cascade-item:hover > a,
.cascade-item.active > a {
  color: var(--brand);
  font-weight: 700;
}
.cascade-item .caret {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.cascade-col-1 .cascade-item.active {
  background: var(--surface);
}

/* پل نامرئی بین دکمه و منو تا ماوس موقع عبور «بیرون» حساب نشود */
.category-dropdown .mega-menu::before {
  content: "";
  position: absolute;
  top: -12px; /* به اندازهٔ همان فاصله، رو به بالا کشیده می‌شود */
  right: 0;
  left: 0;
  height: 12px;
  background: transparent;
}


/* 🧑‍🏫 روی موبایل، دکمهٔ «پنل همکاران» از نوار بالا برداشته می‌شه (تا لوگو
   و بقیهٔ دکمه‌ها فشرده/بی‌کیفیت نشن) و به‌جاش داخل منوی همبرگری
   (لیست nav-links پایین هدر) به‌صورت یک آیتم کامل نمایش داده می‌شه. */
.mobile-only-link {
  display: none;
}
@media (max-width: 600px) {
  .partner-panel-btn {
    display: none;
  }
  .mobile-only-link {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff !important;
    border-radius: var(--radius-sm);
    margin: 4px 0;
    font-weight: 700;
  }
  .mobile-only-link:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
  }
}
/* ============================================================
   کارت محصول پریمیوم + گرید + مودال مشاهدهٔ سریع
   🧑‍🏫 این فایل در base.html لود می‌شود تا کارت‌ها همه‌جا یک‌شکل باشند.
   ============================================================ */

/* ---------- گرید محصولات ---------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

/* ---------- کارت محصول ---------- */
.product-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t) var(--ease-out),
              box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* بج تخفیف */
.product-card .discount-tag {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  z-index: 3;
  box-shadow: var(--shadow-brand);
}

/* دکمه‌های شناور (علاقه‌مندی + مشاهدهٔ سریع) */
.card-float-actions {
  position: absolute;
  top: 14px; left: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.product-card:hover .card-float-actions { opacity: 1; transform: translateX(0); }
.icon-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--text-soft);
  box-shadow: var(--shadow-sm);
  transition: all var(--t) var(--ease-spring);
}
.icon-btn:hover { color: var(--brand); transform: scale(1.12); }
.wish-btn.active { background: #fef2f2; }
/* 🧑‍🏫 رنگ رو صریح ست می‌کنیم (نه ارث‌بری از parent) که روی هر پس‌زمینه‌ای
   (حتی شیشه‌ای روی عکس محصول) همیشه واضح دیده بشه. */
.wish-btn { color: #64748b; }
.wish-btn.active { color: #ef4444; }
.wish-btn .heart-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: fill 0.15s ease;
}
.wish-btn.active .heart-path {
  fill: currentColor;
}
.wish-form { display: flex; }

/* تصویر */
.product-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  padding: 20px;
  background: var(--gradient-soft);
  overflow: hidden;
}
.product-thumb img {
  max-height: 100%; max-width: 100%; object-fit: contain;
  transition: transform var(--t-slow) var(--ease-out);
}
.product-card:hover .product-thumb img { transform: scale(1.08); }
.product-thumb .dummy-img { color: var(--text-muted); font-size: 0.85rem; text-align: center; }

/* اطلاعات */
.product-info { padding: 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.tech-specs { font-size: 0.74rem; color: var(--text-muted); display: flex; gap: 5px; align-items: center; }
.tech-specs .dot { opacity: 0.5; }
.product-info h3 { font-size: 0.9rem; line-height: 1.7; min-height: 3em; font-weight: 600; }
.product-info h3 a { color: var(--text); text-decoration: none; transition: color var(--t-fast); }
.product-info h3 a:hover { color: var(--brand); }

/* امتیاز ستاره */
.card-rating { display: flex; align-items: center; gap: 2px; font-size: 0.85rem; }
.card-rating .star { color: #d6dbe2; }
.card-rating .star.full { color: #fbbf24; }
.card-rating .rating-num { color: var(--text-muted); font-size: 0.75rem; margin-right: 4px; }

/* وضعیت موجودی */
.stock-badge { font-size: 0.74rem; font-weight: 600; display: inline-flex; width: fit-content; }
.stock-badge.in { color: var(--success); }
.stock-badge.out { color: var(--text-muted); }

/* قیمت */
.price-box { margin-top: auto; padding-top: 4px; }
.price-box .old-price {
  display: block; color: var(--text-muted); text-decoration: line-through; font-size: 0.78rem;
}
.price-box .main-price { font-weight: 800; color: var(--text); font-size: 1.05rem; }
.price-box .main-price small { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }

/* دکمهٔ افزودن به سبد */
.add-to-cart-btn {
  width: 100%;
  border: none;
  background: var(--text);
  color: #fff;
  padding: 11px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86rem;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.add-to-cart-btn:hover:not(:disabled) { background: var(--gradient-brand); transform: translateY(-1px); }
.add-to-cart-btn:active:not(:disabled) { transform: scale(0.97); }
.add-to-cart-btn:disabled { background: var(--border-strong); cursor: not-allowed; }

/* حالت خالی */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state p { margin-bottom: 18px; }

/* ---------- مودال مشاهدهٔ سریع ---------- */
.qv-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.qv-overlay.open { opacity: 1; pointer-events: auto; }
.qv-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 820px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform var(--t) var(--ease-out);
}
.qv-overlay.open .qv-modal { transform: translateY(0) scale(1); }
.qv-close {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  border: none; background: var(--bg); cursor: pointer; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center; color: var(--text-soft);
  transition: all var(--t) var(--ease);
}
.qv-close:hover { background: var(--brand-light); color: var(--brand); }
.qv-loading { padding: 60px; text-align: center; }

.qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px; }
.qv-image {
  position: relative; background: var(--gradient-soft); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 280px;
}
.qv-image img { max-width: 100%; max-height: 320px; object-fit: contain; }
.qv-image .discount-tag {
  position: absolute; top: 14px; right: 14px; background: var(--gradient-brand);
  color: #fff; font-size: 0.78rem; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-full);
}
.qv-info h2 { font-size: 1.3rem; margin: 8px 0; letter-spacing: -0.02em; }
.qv-desc { color: var(--text-soft); font-size: 0.9rem; line-height: 2; margin: 12px 0; }
.qv-info .price-box { margin: 16px 0; }
.qv-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.qv-actions form { flex: 1; }
.qv-actions .btn { width: 100%; }

@media (max-width: 640px) {
  .qv-grid { grid-template-columns: 1fr; }
}

/* ---------- گرید ۲ محصول در هر ردیف، موبایل ---------- */
@media (max-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .product-thumb {
    height: 130px;
    padding: 10px;
  }
  .product-info {
    padding: 10px;
    gap: 6px;
  }
  .product-info h3 {
    font-size: 0.78rem;
    line-height: 1.5;
  }
  .tech-specs { font-size: 0.68rem; }
  .card-rating { font-size: 0.72rem; }
  .card-rating .rating-num { display: none; } /* روی کارت کوچیک جا نمی‌شه، فقط ستاره کافیه */
  .stock-badge { font-size: 0.68rem; }
  .price-box .old-price { font-size: 0.68rem; }
  .price-box .main-price { font-size: 0.88rem; }
  .add-to-cart-btn {
    padding: 8px;
    font-size: 0.76rem;
  }
  .discount-tag { top: 8px; right: 8px; font-size: 0.68rem; padding: 3px 7px; }
  .card-float-actions { top: 8px; left: 8px; gap: 5px; }
  .icon-btn { width: 30px; height: 30px; }
}
/* ============================================================
   صفحهٔ اصلی — طراحی مدرن (الهام از فروشگاه‌های بزرگ)
   بخش‌ها: بنر اصلی، دستیار هوشمند، بنرهای دسته، شبکهٔ محصولات،
            پیشنهاد شگفت‌انگیز، دسترسی سریع دایره‌ای.
   ============================================================ */

/* ---------- بنر اصلی (Hero) ---------- */
.hero-banner {
    width: 100%;
    height: 390px; /* همان ارتفاع اسلایدر */
    border-radius: 28px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.hero-banner:hover img {
    transform: scale(1.03);
}
/* ---------- دستیار هوشمند انتخاب شارژر ---------- */
.charger-finder {
  margin: 32px auto;
}
.finder-card {
  background: linear-gradient(135deg, #170c79 0%, #0303b3 50%, #002f94 100%);
  border-radius: var(--radius-lg);
  padding: 32px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  /* 🧑‍🏫 overflow:hidden عمداً حذف شد — همین باعث می‌شد لیست سرچ مدل
     گوشی (که پایین‌تر از کارت باز می‌شه) نصفه دیده بشه. به‌جاش، نوار
     تزئینی بالای کارت خودش گردی گوشه می‌گیره تا نیازی به overflow:hidden
     روی کل کارت نباشه. */
}
/* یک نوار قرمز تزئینی بالای کارت */
.finder-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--brand), var(--warning));
}
.finder-info h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.finder-info p {
  color: #cbd5e1;
  margin-bottom: 24px;
  font-size: 0.9rem;
  line-height: 1.8;
}
.finder-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.finder-form .form-group {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finder-form label {
  font-size: 0.85rem;
  color: #cbd5e1;
}
.finder-form select {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: none;
  background: #fff;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}
.finder-form select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- سرچ‌بار انتخاب مدل گوشی ---------- */
.model-search-wrap {
  position: relative;
}
.model-search-input {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border-radius: var(--radius);
  border: none;
  background: #fff;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
}
.model-search-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.model-search-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-light, rgba(99, 102, 241, 0.35));
}
.model-search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.model-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  z-index: 60;
}
.model-search-results.hidden {
  display: none;
}
.model-search-item {
  padding: 11px 14px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.model-search-item:hover {
  background: var(--bg-soft, #f1f5f9);
  color: var(--brand);
}
.model-search-empty {
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: #94a3b8;
}
.finder-btn {
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius);
  background: #dde6f0;
  color: #000000;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition:
    transform 0.15s,
    background 0.15s,
    opacity 0.15s;
}
.finder-btn:hover:not(:disabled) {
  background: var(--brand-dark);
  color: #fff;
  transform: translateY(-2px);
}
.finder-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* نتیجهٔ دستیار */
.finder-result {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.finder-result.hidden {
  display: none;
}
.finder-result-title {
  font-size: 1rem;
  margin-bottom: 14px;
  color: var(--text);
}
.finder-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.finder-products-grid + .finder-result-title,
.finder-suggestion-title {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.finder-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-decoration: none;
  color: inherit;
  background: #f8fafc;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.finder-product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.finder-product-img {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.finder-product-img img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.finder-product-card h4 {
  font-size: 0.85rem;
  margin-bottom: 6px;
  line-height: 1.5;
}
.finder-product-price .old-price {
  display: block;
  color: #94a3b8;
  text-decoration: line-through;
  font-size: 0.75rem;
}
.finder-product-price .main-price {
  font-weight: 800;
  color: var(--success);
}
.finder-empty,
.finder-loading,
.finder-error {
  text-align: center;
  color: var(--text-muted);
  padding: 10px;
}
.finder-empty a {
  color: var(--brand);
}

/* ---------- بنرهای دسته‌بندی ---------- */
.promo-banners {
  margin: 32px auto;
}
.banners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.banner-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.banner-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.banner-img-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.banner-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  color: #fff;
}
.banner-overlay h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}
.banner-overlay span {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* 🧑‍🏫 .products-grid عمداً اینجا حذف شد — این قانون توی cards.css
   (که سراسر سایت لود می‌شه) تعریف شده. چون home.css بعد از cards.css
   لود می‌شه، این نسخهٔ تکراری همیشه نسخهٔ موبایل (۲ ستونی) رو بی‌اثر
   می‌کرد. برای جلوگیری از این تداخل، فقط یک‌جا (cards.css) تعریفش می‌کنیم. */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.product-thumb {
  position: relative;
  display: block;
  padding: 16px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-thumb img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.product-thumb .dummy-img {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}
/* برچسب تخفیف روی کارت */
.discount-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}
.product-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.product-info h3 {
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 2.9em;
}
.product-info h3 a {
  color: var(--text);
  text-decoration: none;
}
.product-info h3 a:hover {
  color: var(--brand);
}
.tech-specs {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 4px;
}
.price-box {
  margin-top: auto;
}
.price-box .old-price {
  display: block;
  color: #94a3b8;
  text-decoration: line-through;
  font-size: 0.78rem;
}
.price-box .main-price {
  font-weight: 800;
  color: var(--text);
  font-size: 1rem;
}
.add-to-cart-btn {
  width: 100%;
  border: none;
  background: var(--brand);
  color: #fff;
  padding: 10px;
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.add-to-cart-btn:hover {
  background: var(--brand-dark);
}

/* ---------- پیشنهاد شگفت‌انگیز ---------- */
.super-deal-section {
  margin: 36px auto;
}
.deal-wrapper {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.deal-timer-box {
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.deal-timer-box h2 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.deal-timer-box p {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-bottom: 18px;
}
.countdown-timer {
  display: flex;
  gap: 8px;
}
.time-segment {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
  font-size: 0.7rem;
  min-width: 48px;
}
.time-segment span {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
}
.deal-products {
  display: flex;
  gap: 14px;
  padding: 18px;
  overflow-x: auto;
  background: var(--surface);
}
.deal-card {
  flex: 0 0 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-decoration: none;
  color: var(--text);
  position: relative;
  text-align: center;
  transition: box-shadow 0.2s;
}
.deal-card:hover {
  box-shadow: var(--shadow);
}
.badge-red {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 20px;
}
.deal-img {
  height: 110px;
  object-fit: contain;
  margin: 8px auto;
  max-width: 100%;
}
.deal-card h3 {
  font-size: 0.82rem;
  min-height: 2.6em;
  line-height: 1.6;
  margin-bottom: 8px;
}
.deal-prices del {
  color: #94a3b8;
  font-size: 0.78rem;
  display: block;
}
.deal-prices ins {
  color: var(--success);
  font-weight: 800;
  text-decoration: none;
}

/* ---------- دسترسی سریع دایره‌ای ---------- */
.quick-access {
  margin: 36px auto;
}
.circle-links-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.circle-item {
  text-decoration: none;
  color: var(--text);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.circle-img-box {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.circle-item:hover .circle-img-box {
  border-color: var(--brand);
  transform: scale(1.05);
}
.circle-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.circle-item span {
  font-size: 0.82rem;
}

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 900px) {
  .banners-grid {
    grid-template-columns: 1fr 1fr;
  }
  .deal-wrapper {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .banners-grid {
    grid-template-columns: 1fr 1fr;
  }
  .finder-form {
    flex-direction: column;
    align-items: stretch;
  }
  .finder-card {
    padding: 20px;
  }
}

/* ════════════ بخش‌های پریمیوم صفحهٔ اصلی ════════════ */

/* ---------- اسلایدر هرو ---------- */
.hero-slider {
  position: relative;
  margin: 22px auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 340px;
}
.hero-track {
  height: 100%;
  position: relative;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  /* background: var(--slide-bg, var(--gradient-hero)); */
  padding: 0 48px;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity var(--t-slow) var(--ease),
    transform 6s linear;
  pointer-events: none;
  background-image: url("/static/images/background.png");
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.hero-content {
  color: #fff;
  z-index: 2;
}
.hero-badge {
  display: inline-block;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
  box-shadow: var(--shadow-brand);
}
.hero-content h1 {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.hero-content p {
  color: #cbd5e1;
  margin-bottom: 22px;
  font-size: 1rem;
}
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.hero-visual img {
  max-height: 95%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
  border-radius: 25px;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t) var(--ease);
}
.hero-arrow:hover {
  background: #fff;
  color: var(--brand);
}
.hero-arrow.prev {
  right: 18px;
}
.hero-arrow.next {
  left: 18px;
}
.hero-dots {
  position: absolute;
  bottom: 18px;
  right: 48px;
  display: flex;
  gap: 8px;
  z-index: 5;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  transition: all var(--t) var(--ease);
}
.hero-dot.active {
  background: #fff;
  width: 28px;
  border-radius: var(--radius-full);
}

/* ---------- تایمر شمارش معکوس ارتقایافته ---------- */
.countdown-timer {
  display: flex;
  align-items: center;
  gap: 6px;
}
.time-segment {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 56px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.time-segment span {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
}
.time-segment small {
  font-size: 0.68rem;
  opacity: 0.85;
}
.time-sep {
  font-size: 1.4rem;
  font-weight: 800;
  opacity: 0.6;
}

/* ---------- کاروسل برندها ---------- */
.brand-carousel-section {
  margin: 36px auto;
}
.brand-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  scroll-snap-type: x mandatory;
  /* 🧑‍🏫 وقتی محتوا از عرض صفحه بیشتره و اسکرول‌شدنیه، center باعث
     می‌شد آیتم اول از همون ابتدا نصفه بیرون از صفحه (زیر لبه) بیفته.
     flex-start یعنی از لبه شروع بشه، بدون بریدگی؛ روی دسکتاپ که معمولاً
     جا میشه، دوباره وسط‌چین می‌کنیم. */
  justify-content: flex-start;
}
@media (min-width: 992px) {
  .brand-carousel {
    justify-content: center;
  }
}
/* 🧑‍🏫 موبایل و تبلت: به‌جای نوار اسکرول‌شونده، یه گرید تمیز
   دوتا-دوتا (بدون اسکرول افقی). */
@media (max-width: 991.98px) {
  .brand-carousel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 12px;
    padding: 6px 2px 4px;
  }
  .brand-item {
    flex: unset;
    width: 100%;
  }
}
.brand-carousel::-webkit-scrollbar {
  height: 6px;
}
.brand-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  height: 100px;
  padding: 0 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-soft);
  font-weight: 700;
  font-size: 1rem;
  transition: all var(--t) var(--ease-out);
}
.brand-item:hover {
  border-color: var(--brand);
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow);
}
.brand-item-logo {
  max-width: 125px;
  max-height: 65px;
  object-fit: contain;
}

/* ---------- نظرات مشتریان ---------- */
.testimonials-section {
  padding: 40px 0;
  margin-top: 36px;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.testimonial-stars {
  color: #fbbf24;
  font-size: 1.1rem;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.testimonial-card p {
  color: var(--text-soft);
  line-height: 2;
  font-size: 0.92rem;
  margin-bottom: 18px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-author .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
}
.testimonial-author strong {
  display: block;
  font-size: 0.9rem;
}
.testimonial-author small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ---------- خبرنامه ---------- */
.newsletter-card {
  margin: 36px auto;
  background: var(--gradient-dark);
  border-radius: var(--radius-xl);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.newsletter-card::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
}
.newsletter-text {
  color: #fff;
  z-index: 1;
}
.newsletter-text h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.newsletter-text p {
  color: #cbd5e1;
  font-size: 0.92rem;
}
.newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 1;
  align-items: center;
}
.newsletter-form input {
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  border: none;
  min-width: 240px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.nl-msg {
  color: #4ade80;
  font-weight: 700;
  font-size: 0.9rem;
  width: 100%;
}

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .hero-slider {
    height: auto;
  }
  .hero-slide {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    text-align: center;
  }
  .hero-visual {
    display: none;
  }
  .hero-content h1 {
    font-size: 1.6rem;
  }
  .hero-dots {
    right: 50%;
    transform: translateX(50%);
  }
}
@media (max-width: 560px) {
  .newsletter-card {
    padding: 28px 22px;
  }
  .newsletter-form input {
    min-width: 100%;
  }
}
/* مقالات بلاگ */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px; margin: 24px 0;
}
.blog-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-card-img { height: 180px; background: var(--gradient-soft); overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.blog-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.blog-card-body h3 { font-size: 1.05rem; line-height: 1.6; }
.blog-card-body p { color: var(--text-soft); font-size: 0.88rem; line-height: 1.9; }
.blog-readmore { color: var(--brand); font-weight: 700; font-size: 0.85rem; margin-top: auto; }

/* صفحهٔ مقاله */
.blog-article { max-width: 820px; margin: 28px auto; }
.blog-hero-img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 22px; box-shadow: var(--shadow); }
.blog-article h1 { font-size: 1.7rem; font-weight: 800; line-height: 1.6; margin-bottom: 10px; }
.blog-meta { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 24px; }
.blog-body { color: var(--text-soft); line-height: 2.2; font-size: 1rem; }
.blog-body p { margin-bottom: 16px; }
/* ============================================================
   بازطراحی صفحهٔ مقاله — الهام از سایت‌های مجله‌ای (دیجیاتو و مشابه)
   ============================================================ */

.blog-breadcrumb {
  margin: 18px auto 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}
.blog-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--brand); }

/* هیرو تمام‌عرض با عنوان روی عکس */
.blog-hero {
  position: relative;
  width: 100%;
  height: 420px;
  margin-top: 14px;
  overflow: hidden;
}
.blog-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
}
.blog-hero-inner { padding-bottom: 32px; }
.blog-hero-inner h1 {
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.6;
  max-width: 820px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.blog-title-plain {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.6;
  margin: 28px 0 0;
  max-width: 820px;
  margin-inline: auto;
}

/* خط اطلاعات نویسنده/تاریخ/زمان مطالعه + اشتراک‌گذاری */
.blog-byline {
  max-width: 820px;
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.blog-byline-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}
.blog-byline-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.blog-byline-meta {
  display: flex; gap: 6px; align-items: center;
  font-size: 0.8rem; color: var(--text-muted);
}
.blog-byline-meta .dot { opacity: 0.5; }

.blog-share { display: flex; gap: 8px; }
.share-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.share-btn:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; }

/* تایپوگرافی بدنهٔ مقاله (خروجی CKEditor) */
.blog-body {
  max-width: 820px;
  margin: 28px auto 0;
  color: var(--text-soft);
  line-height: 2.2;
  font-size: 1.02rem;
}
.blog-body > *:first-child { margin-top: 0; }
.blog-body p { margin-bottom: 18px; }
.blog-body h2 {
  font-size: 1.35rem; font-weight: 800; color: var(--text);
  margin: 36px 0 16px;
  padding-right: 12px;
  border-right: 4px solid var(--brand);
}
.blog-body h3 {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin: 28px 0 14px;
}
.blog-body ul, .blog-body ol {
  margin: 0 0 18px 0;
  padding-right: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.blog-body a { color: var(--brand); text-decoration: underline; }
.blog-body img {
  border-radius: var(--radius-lg);
  margin: 20px 0;
  box-shadow: var(--shadow);
}
.blog-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-right: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
}
.blog-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.blog-body table td, .blog-body table th {
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 0.9rem;
}

.blog-others-title { max-width: 820px; margin: 48px auto 0 !important; }
.blog-article .blog-grid { max-width: 820px; margin-inline: auto; }

@media (max-width: 768px) {
  .blog-hero { height: 260px; }
  .blog-hero-inner h1, .blog-title-plain { font-size: 1.35rem; }
  .blog-byline { flex-wrap: wrap; }
}

/* عکس اول مقاله و عنوان زیر آن */
.blog-hero {
  width: calc(100% - 32px);
  max-width: 820px;
  height: auto;
  margin: 24px auto 0;
  overflow: hidden;
}

.blog-hero > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-lg);
}

.blog-hero-overlay {
  position: static;
  display: block;
  background: none;
}

.blog-hero-inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 20px 0 0;
}

.blog-hero-inner h1 {
  color: var(--text);
  font-size: 1.7rem;
  line-height: 1.7;
  text-shadow: none;
  text-align: right;
  margin: 0;
}

/* وسط‌چین شدن تصاویر داخل مقاله */
.blog-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
}

/* تصاویر دارای قاب در ویرایشگر */
.blog-body figure.image {
  float: none !important;
  max-width: 100%;
  margin: 20px auto !important;
}

.blog-body figure.image img {
  margin: 0 auto;
}

.blog-body figure.image figcaption {
  text-align: center !important;
}

@media (max-width: 768px) {
  .blog-hero {
    height: auto;
  }

  .blog-hero-inner h1 {
    font-size: 1.35rem;
  }
}:root {
  --cs-primary: #155ed8;
  --cs-primary-dark: #0d3e9f;
  --cs-accent: #20b9f5;
  --cs-text: #15254a;
  --cs-muted: #66769b;
  --cs-line: #d9e8ff;
  --cs-surface: #ffffff;
  --cs-soft: #f6faff;
  --cs-danger: #e8384f;
  --cs-shadow: 0 18px 55px rgba(31, 82, 158, 0.12);
}


/* ---------------- Footer ---------------- */
.cs-footer {
  direction: rtl;
  margin-top: 60px;
  padding: 0 0 24px;
  color: var(--cs-text);
  background: #f8fbff;
}

.cs-footer-shell {
  position: relative;
  border: 1px solid var(--cs-line);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 50% 120%,
      rgba(32, 185, 245, 0.11),
      transparent 36%
    ),
    linear-gradient(145deg, #ffffff, #f7fbff);
  box-shadow: var(--cs-shadow);
  overflow: hidden;
}

.cs-footer-shell::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(21, 94, 216, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 94, 216, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}

.cs-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.cs-footer-section {
  display: flex;
  flex-direction: column;
  padding: 32px;
  min-width: 0;
  border-left: 1px solid #e2edfb;
}

.cs-footer-section:last-child {
  border-left: 0;
}

.cs-footer-section h3 {
  color: var(--cs-primary-dark);
  height: 42px;
  margin-bottom: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.08rem;
}

.cs-footer-section h3 i {
  color: var(--cs-primary);
  font-size: 1.22rem;
}

.cs-contact-list,
.cs-important-phones {
  display: grid;
  gap: 10px;
}

.cs-contact-row,
.cs-important-phones a {
  min-height: 60px;
  padding: 14px 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #edf3fc;
  border-radius: 16px;
  color: var(--cs-text);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(40, 87, 154, 0.06);
  text-decoration: none;
  transition: 0.2s ease;
}

.cs-contact-row:hover,
.cs-important-phones a:hover {
  border-color: #b8d7ff;
  transform: translateY(-2px);
}

.cs-contact-row i,
.cs-important-phones a i {
  color: var(--cs-primary);
}

.cs-contact-row span,
.cs-important-phones a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.cs-contact-row b,
.cs-important-phones a b {
  color: var(--cs-primary-dark);
  font-size: 0.95rem;
  font-weight: 900;
}

.cs-important-phones a {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.cs-location-card img {
  width: 100%;
  height: 416px;
  border-radius: 18px;
  object-fit: cover;
}

.cs-location-card p {
  flex: 1;

  margin: 18px 0;

  font-size: 0.9rem;

  line-height: 2;

  color: #5f6d8a;

  display: flex;

  align-items: flex-start;
}

.cs-location-phone {
  margin-top: 10px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  font-weight: 700;
}

.cs-location-phone i,
.cs-location-phone b {
  color: var(--cs-primary);
}

.cs-enamad-card {
  min-height: 245px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #dceafb;
  border-radius: 20px;
  color: var(--cs-muted);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(31, 82, 158, 0.08);
}

.cs-enamad-card img {
  width: 120px;
  max-height: 135px;
  object-fit: contain;
}

/* 🧑‍🏫 نقشهٔ گوگل با width/height ثابت (اینلاین) تو HTML اومده؛ روی
   گوشی‌های باریک‌تر از ۳۰۰px همین باعث سرریز افقی و به‌هم‌ریختن
   فوتر می‌شد. اینجا مجبورش می‌کنیم از عرض واقعی ستونش پیروی کنه. */
.cs-trust-section iframe {
  width: 100%;
  max-width: 100%;
  height: 220px;
}

.cs-enamad-card span {
  font-size: 0.77rem;
  font-weight: 800;
}

.cs-footer-bottom {
  position: relative;
  z-index: 1;
  min-height: 125px;
  padding: 23px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border-top: 1px solid #dceafa;
}

.cs-developer {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 6px;

  margin-right: 45px;
}

.cs-developer img {
  width: 170px;
  max-height: 118px;
  object-fit: contain;
  border-radius: 90px;
}

.cs-social-wrap {
  text-align: center;
}

.cs-social-wrap > span {
  display: block;
  margin-bottom: 11px;
  color: var(--cs-muted);
  font-size: 1rem;
}

.cs-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.cs-social-icons a {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid #dce9fa;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 18px rgba(40, 87, 154, 0.08);
  transition: 0.2s ease;
}

.cs-social-icons a:hover {
  transform: translateY(-3px) scale(1.03);
}

.cs-social-icons img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.cs-copyright {
  justify-self: end;
  margin: 0;
  color: var(--cs-muted);
  font-size: 1rem;
  line-height: 1.9;
}

.cs-copyright span {
  color: var(--cs-primary-dark);
  font-weight: 900;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1199.98px) {
  .cs-header-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
  }

  .cs-brand {
    justify-self: center;
  }

  .cs-actions {
    justify-self: end;
  }

  .cs-search {
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .cs-brand-logo {
    width: 72px;
    height: 72px;
  }

  .cs-brand-copy {
    display: none;
  }

  .cs-footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-footer-section {
    border: none;

    background: white;

    border-radius: 22px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    margin: 16px;
  }

  .cs-footer-section:nth-child(3n) {
    border-left: 0;
  }

  .cs-trust-section {
    grid-column: span 1;
  }
}

@media (max-width: 991.98px) {
  .cs-header {
    padding-bottom: 12px;
  }

  .cs-header-box {
    margin-top: 10px;
    padding: 17px;
    border-radius: 22px;
  }

  .cs-header-row {
    grid-template-columns: auto 1fr;
  }

  .cs-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .cs-brand-logo {
    width: 72px;
    height: 72px;
  }

  .cs-header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
  }

  .cs-header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 58px;
  }

  .cs-action-card {
    min-width: 74px;
    min-height: 68px;
    border-radius: 15px;
  }

  .cs-action-card i {
    font-size: 1.3rem;
  }

  .cs-footer-grid {
    gap: 24px;

    padding: 24px;
  }

  .cs-footer-section:nth-child(3n) {
    border-left: 1px solid #e2edfb;
  }

  .cs-footer-section:nth-child(2n) {
    border-left: 0;
  }

  .cs-trust-section {
    grid-column: 1 / -1;
  }

  .cs-enamad-card {
    min-height: 190px;
  }

  .cs-footer-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .cs-social-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .cs-developer {
    grid-column: 1;
    grid-row: 2;
  }
  .cs-copyright {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 575.98px) {
  .cs-shipping-inner {
    min-height: 42px;
    font-size: 0.82rem;
  }

  .cs-header-box {
    padding: 14px;
  }

  .cs-header-row {
    grid-template-columns: 64px 1fr;
    gap: 10px;
  }

  .cs-brand-logo {
    width: 58px;
    height: 58px;
  }

  .cs-header-actions {
    gap: 6px;
  }

  .cs-action-card {
    min-width: 58px;
    min-height: 58px;
    padding: 7px;
  }

  .cs-action-card span:not(.cs-cart-count) {
    display: none;
  }

  .cs-header-search {
    height: 52px;
  }

  .cs-header-search input {
    padding-right: 18px;
    padding-left: 62px;
    font-size: 0.9rem;
  }

  .cs-header-search button {
    width: 42px;
    height: 42px;
  }

  .cs-footer {
    margin-top: 38px;
  }

  .cs-footer-shell {
    border-radius: 22px;
  }

  .cs-footer-grid {
    grid-template-columns: 1fr;
  }

  .cs-footer-section,
  .cs-footer-section:nth-child(2n),
  .cs-footer-section:nth-child(3n) {
    padding: 24px 18px;
    border-left: 0;
    border-bottom: 1px solid #e2edfb;
  }

  .cs-location-card p {
    min-height: 0;
  }

  .cs-footer-bottom {
    padding: 24px 18px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cs-social-wrap,
  .cs-developer,
  .cs-copyright {
    grid-column: 1;
    justify-self: center;
  }

  .cs-social-wrap {
    grid-row: 1;
  }

  .cs-developer {
    grid-row: 2;
    flex-direction: column;
  }

  .cs-copyright {
    grid-row: 3;
    text-align: center;
  }

  .cs-social-icons {
    flex-wrap: wrap;
  }
}

/* 🧑‍🏫 قبلاً .cs-contact-row سه ستون گرید داشت ولی فقط ۲ فرزند واقعی
   (آیکون+نام و شماره) توش بود؛ نتیجه: ستون نام هرچقدر می‌خواست عرض
   می‌گرفت و شماره رو توی فضای باقی‌مونده له می‌کرد. این‌جا تک‌ستونه‌ش
   می‌کنیم تا نام/سمت بالا و شماره زیرش، جدا و خوانا بیاد.
   🧑‍🏫 قبلاً این فیکس فقط زیر ۵۷۵px بود؛ تبلت (۵۷۶ تا ۹۹۱px) هنوز باگ
   قدیمی رو داشت — برای همین سقفش رو به ۹۹۱.۹۸px (همون بریک‌پوینت
   تبلت که .cs-footer-grid ازش استفاده می‌کنه) بردیم بالا. */
@media (max-width: 991.98px) {
  .cs-contact-row,
  .cs-important-phones a {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 4px;
    min-height: 0;
    padding: 12px 14px;
  }
  .cs-contact-row span,
  .cs-important-phones a span {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .cs-contact-row b,
  .cs-important-phones a b {
    font-size: 1rem;
  }
}

/* ---------- Compatibility and functional fixes ---------- */
.cs-cart-action {
  width: auto;
  margin: 0;
}

.cart-badge.cs-cart-count {
  right: auto;
  left: -5px;
  width: auto;
  min-width: 25px;
  height: 25px;
  box-sizing: border-box;
  z-index: 2;
}

.cs-action-danger,
.cs-action-danger i {
  color: var(--cs-danger);
}

.cs-action-danger:hover {
  color: #b91c32;
  border-color: rgba(232, 56, 79, 0.35);
  background: #fff7f8;
}

.cs-mobile-search {
  width: 100%;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .cs-header-row {
    grid-template-columns: 100px minmax(250px, 1fr) auto;
    gap: 14px;
  }

  .cs-brand-logo {
    width: 82px;
    height: 82px;
  }

  .cs-action-card {
    min-width: 72px;
    min-height: 72px;
    padding: 8px;
  }

  .cs-action-card span {
    font-size: 0.68rem;
  }
}

/* =========================================================
   Charger Store - Mobile Footer Fix
   فقط شماره‌ها و تصاویر موبایل
   ========================================================= */
@media (max-width: 768px) {
  .cs-contact-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .cs-contact-row {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 95px !important;
    padding: 10px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .cs-contact-row i {
    width: 100% !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }

  .cs-contact-row span {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
  }

  .cs-contact-row b {
    display: block !important;
    width: 100% !important;
    direction: ltr !important;
    text-align: center !important;
    font-size: 0.86rem !important;
    white-space: nowrap !important;
  }

  .cs-contact-row:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    width: calc(50% - 4px) !important;
    justify-self: center !important;
  }

  .cs-location-card img {
    width: 100% !important;
    height: 170px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }
}