/* ==========================================
   Kaufsmart24 - Central Stylesheet
   ==========================================
   ساختار فایل:
   1. Reset & Base
   2. Design Tokens (رنگ‌ها و متغیرها)
   3. Layout Utilities
   4. Header
   5. Footer
   6. Buttons
   7. Forms
   8. Cards & Product Grid
   9. Tables (پنل‌های مدیریتی)
   10. Modal
   11. Badges & Status
   12. Responsive
   15. Category Tree (منوی درختی دسته‌بندی)
   ========================================== */

/* ---------- 1. Reset & Base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  direction: ltr;
  text-align: left;
}

/* === جدید === جلوگیری از اورفلوی افقی (باگ معروف موبایل: اگه یه المنت
   جایی از عرض واقعی صفحه‌نمایش پهن‌تر بشه، مرورگرهای اندروید معمولاً
   کل صفحه رو بزرگ‌تر از دیوایس رندر می‌کنن و همه‌چیز جمع/جابه‌جا به‌نظر
   می‌رسه؛ این قانون به‌صورت قطعی جلوی اون اسکرول/overflow افقی رو
   می‌گیره، صرف‌نظر از این‌که کدوم المنت باعثش شده) */
html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* === جدید === اعداد، قیمت‌ها، آدرس‌ها و کدپستی/شماره‌تلفن‌ها همیشه باید
   لاتین نمایش داده بشن -- فارغ از زبون صفحه، چون بعضی مرورگرها/گوشی‌ها
   خودشون اعداد رو بر اساس زبون سیستم به فارسی/عربی تبدیل می‌کنن */
input[type="text"][inputmode="decimal"],
input[type="tel"],
.ltr-numbers,
.product-card__price,
.product-card__price-old,
.data-table td[dir="ltr"] {
  direction: ltr;
  unicode-bidi: plaintext;
  font-variant-numeric: normal;
}

body {
  font-family: 'Vazirmatn', sans-serif;
  background-color: #f4f6f9;
  color: #1e293b;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ff7a00;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 2. Design Tokens ---------- */
:root {
  --color-navy:        #071c46;
  --color-navy-light:  #1e3a8a;
  --color-orange:      #ff7a00;
  --color-orange-dark: #e06b00;
  --color-bg:          #f4f6f9;
  --color-surface:     #ffffff;
  --color-border:      #e2e8f0;
  --color-text:        #1e293b;
  --color-text-muted:  #64748b;
  --color-success-bg:  #d1fae5;
  --color-success-fg:  #065f46;
  --color-error-bg:    #fee2e2;
  --color-error-fg:    #991b1b;
  --color-pending-bg:  #fef3c7;
  --color-pending-fg:  #d97706;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 10px 25px rgba(0,0,0,0.08);
}

/* ---------- 3. Layout Utilities ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-orange { color: var(--color-orange) !important; }
.text-muted  { color: var(--color-text-muted) !important; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 25px;
  box-shadow: var(--shadow-card);
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title i { color: var(--color-orange); }

/* === جدید === تب‌های داشبورد فروشنده (محصولات / سفارش‌ها) */
.dash-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 4px;
}
.dash-tab-btn {
  background: none;
  border: none;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-tab-btn.is-active {
  color: var(--color-orange);
  border-bottom-color: var(--color-orange);
}

/* ---------- 4. Header ---------- */
.site-header {
  background-color: var(--color-navy);
  padding: 0 5%;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  flex-wrap: wrap;
  gap: 15px;
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-header__logo img {
  height: 46px;
  width: auto;
  object-fit: contain;
}

.site-nav {
  display: flex;
  gap: 24px;
}

.site-nav a {
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-dropdown { position: relative; }
.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  min-width: 220px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
  z-index: 100;
}
.nav-dropdown.is-open .nav-dropdown__menu { display: block; }
.nav-dropdown__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  line-height: 1.2;
  color: var(--color-navy) !important;
  font-size: 13px;
  font-weight: 500;
}
.nav-dropdown__menu a:hover { background: #f8fafc; color: var(--color-orange) !important; }
.nav-dropdown__menu a i { color: var(--color-orange); width: 16px; }
.nav-dropdown__all {
  border-top: 1px solid var(--color-border);
  margin-top: 6px;
  padding-top: 12px !important;
  font-weight: 700 !important;
}
.nav-dropdown__empty { display: block; padding: 9px 16px; font-size: 12px; color: #94a3b8; }

.nav-dropdown__sort-label {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}
.nav-dropdown__sort-active { color: var(--color-orange) !important; font-weight: 700 !important; }
.nav-dropdown__sort-item { font-size: 9.5px !important; }

/* === جدید === ردیف‌های کوتاه‌تر (هم بخش مرتب‌سازی، هم لیست فروشگاه‌ها)
   مخصوص دراپ‌داون «فروشگاه‌ها» توی هدر */
.nav-dropdown__menu--stores a {
  padding: 2px 14px;
  line-height: 1.15;
  font-size: 12px;
}
.nav-dropdown__menu--stores .nav-dropdown__sort-item {
  padding: 1px 14px;
}
.nav-dropdown__divider { border-top: 1px solid var(--color-border); margin: 6px 0; }

.site-nav a:hover,
.site-nav a.active {
  color: var(--color-orange);
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* === جدید === این دو تا فقط بسته‌بندی منطقی هستن (ردیف اول: خانه+ورود،
   ردیف دوم: موقعیت+زبان+درباره‌ما)؛ روی دسکتاپ display:contents یعنی
   کاملاً نامرئی‌ان و بچه‌هاشون عین قبل مستقیم توی صف افقی site-header__right
   قرار می‌گیرن — هیچ تغییری توی ظاهر دسکتاپ ایجاد نمی‌شه */
.site-header__row1,
.site-header__row2 {
  display: contents;
}

.site-header__badge {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.site-header__badge:hover { background: rgba(255,255,255,0.16); }

.site-header__user {
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-header__user i { color: var(--color-orange); font-size: 18px; }

/* === جدید === آیکون سبد خرید توی هدر (ماژول فروش آنلاین) */
.site-header__cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}
.site-header__cart-link:hover { background: rgba(255,255,255,0.15); }
.site-header__cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--color-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--color-navy);
}

/* === جدید === دکمه‌ی همبرگری موبایل؛ فقط زیر 768px نمایش داده می‌شه */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 6px 4px;
  cursor: pointer;
  line-height: 1;
}

/* === جدید === اورلی تیره پشت منوی کشویی موبایل */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 28, 70, 0.55);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-nav-overlay.is-open {
  display: block;
  opacity: 1;
}

/* دکمه‌ی بستن داخل منوی کشویی، فقط توی حالت موبایل دیده می‌شه */
.site-nav__close {
  display: none;
}

/* ---------- 5. Footer ---------- */
.site-footer {
  background: var(--color-navy);
  padding: 35px 5%;
  margin-top: 50px;
  border-top: 3px solid var(--color-orange);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  text-align: center;
}

.site-footer__stat-number {
  font-size: 26px;
  font-weight: 800;
  color: #ffaa00;
}

.site-footer__stat-label {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 4px;
}

/* === جدید === شعارهای تبلیغاتی که از صفحه اصلی به فوتر منتقل شدن:
   پس‌زمینه مثل هدر (navy)، نوشته‌ها سفید، آیکون‌ها نارنجی */
.site-footer__features {
  background: var(--color-navy);
  padding: 25px 5%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* === جدید === ردیف کادرهای نارنجی شعارها -- بالای فوتر، بدون فاصله چسبیده بهش */
.site-footer__slogans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 16px 5% 0;
  margin-bottom: 0;
  background: #fff;
}
.site-footer__slogan-box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-orange);
  border: 2px solid var(--color-navy);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  padding: 8px 14px;
}
.site-footer__slogan-box i {
  color: var(--color-navy);
  font-size: 18px;
  flex-shrink: 0;
}
.site-footer__slogan-box h4 {
  color: #fff;
  font-size: 12.5px;
  margin: 0;
  white-space: nowrap;
}
.site-footer__slogan-box p {
  color: rgba(255,255,255,0.9);
  font-size: 10.5px;
  margin: 0;
  white-space: nowrap;
}

.site-footer__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
}

.site-footer__feature i {
  font-size: 24px;
  color: var(--color-orange);
  flex-shrink: 0;
}

.site-footer__feature h4 {
  font-size: 14px;
  color: #fff;
  margin: 0 0 2px;
}

.site-footer__feature p {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

/* === جدید === ستون اطلاعات تماس، کنار همون شعارهای بالا توی یه ردیف */
.site-footer__contact-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.site-footer__contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}

.site-footer__contact-item i {
  color: var(--color-orange);
  font-size: 13px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.site-footer__contact-item a {
  color: #fff;
  text-decoration: none;
}

.site-footer__contact-item a:hover {
  text-decoration: underline;
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.btn--orange {
  background: var(--color-orange);
  color: #fff;
}
.btn--orange:hover { background: var(--color-orange-dark); }

.btn--navy {
  background: var(--color-navy);
  color: #fff;
}
.btn--navy:hover { background: #0d2a5e; }

.btn--outline-light {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.btn--outline-light:hover { background: rgba(255,255,255,0.16); }

.btn--outline-orange {
  background: #fff;
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
}
.btn--outline-orange:hover { background: #fff7ed; }

.btn--danger {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
}
.btn--danger:hover { opacity: 0.85; }

.btn--block { width: 100%; }
.btn:disabled { background: #cbd5e1; cursor: not-allowed; opacity: 0.7; }

/* ---------- 7. Forms ---------- */
.form-group { margin-bottom: 16px; text-align: left; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  background: #fff;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(255,122,0,0.1);
}

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.password-field-wrapper { position: relative; }
.password-field-wrapper .form-input { padding-right: 40px; }
.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.password-toggle-btn:hover { color: #475569; }

.price-field-wrapper { position: relative; }
.price-field-wrapper .form-input { padding-right: 34px; }
.price-field-wrapper .price-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
}
.price-field-wrapper input[type=number]::-webkit-inner-spin-button,
.price-field-wrapper input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.price-field-wrapper input[type=number] { -moz-appearance: textfield; }

.alert-box {
  padding: 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
}
.alert-box--success { background: var(--color-success-bg); color: var(--color-success-fg); border: 1px solid #a7f3d0; }
.alert-box--error   { background: var(--color-error-bg);   color: var(--color-error-fg);   border: 1px solid #fecaca; }

/* ---------- 7b. Search Section & Category Pills ---------- */
.search-section {
  background-color: var(--color-navy);
  padding: 20px 5% 40px 5%;
}

.search-box {
  background: #fff;
  border-radius: var(--radius-sm);
  display: flex;
  overflow: hidden;
  max-width: 480px;
}

.search-box input {
  border: none;
  padding: 9px 16px;
  width: 100%;
  outline: none;
  font-size: 13px;
}

.search-box button {
  background: var(--color-orange);
  color: #fff;
  border: none;
  padding: 0 18px;
  cursor: pointer;
  font-size: 15px;
}

.category-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pill:hover { background: rgba(255,255,255,0.15); }
.pill--active { background: var(--color-orange); border-color: var(--color-orange); color: #fff; }

/* === جدید === سطح دوم و سوم پیل‌ها: کوچیک‌تر و روشن‌تر از سطح قبلی خودشون،
   تا تمایز بصری بین سطوح دسته‌بندی واضح باشه */
.pill--sub {
  padding: 6px 13px;
  font-size: 12px;
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
}
.pill--sub:hover { background: rgba(255,255,255,0.24); }

.pill--subsub {
  padding: 5px 11px;
  font-size: 11px;
  background: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.32);
}
.pill--subsub:hover { background: rgba(255,255,255,0.34); }

/* حالت انتخاب‌شده (نارنجی) باید روی هر دو سطح، بدون توجه به رنگ روشن‌تر
   پس‌زمینه‌ی پیش‌فرضش، همیشه یکسان و برجسته بمونه */
.pill--sub.pill--active,
.pill--subsub.pill--active {
  background: var(--color-orange);
  border-color: var(--color-orange);
}

/* === جدید === کادر کلی دور تمام زیرشاخه‌ها، دقیقاً به اندازه‌ی
   محتواش (نه تمام‌عرض)، وسط‌چین، با فلش کوچیکی که موقعیتش رو خودِ
   جاوااسکریپت (بر اساس آیتم فعال ردیف بالا) تنظیم می‌کنه */
.cat-sub-box {
  position: relative;
  border: 2px solid var(--color-orange);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 18px auto 0;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cat-sub-box--level3 {
  margin-top: 14px;
  border-color: rgba(255,122,0,0.6);
}

/* === جدید === فلش کوچیک کنار هر پیل که دراپ‌داون زیرشاخه‌های همون
   دسته‌بندی رو باز می‌کنه؛ خودِ ردیف پیل‌ها افقی و دست‌نخورده می‌مونه */
.cat-pill-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cat-pill-arrow {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e2e8f0;
  border-radius: var(--radius-sm);
  width: 30px;
  height: 34px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: background 0.2s;
}
.cat-pill-arrow:hover { background: rgba(255,255,255,0.18); }
.cat-pill-dropdown.is-open .cat-pill-arrow i { transform: rotate(180deg); }
.cat-pill-arrow i { display: inline-block; transition: transform 0.2s; }

.cat-pill-dropdown .nav-dropdown__menu {
  left: 0;
  min-width: 240px;
  padding: 4px 0;
}
.cat-pill-dropdown .nav-dropdown__menu .cat-tree {
  border: none;
  max-width: none;
  padding: 0;
}

/* ---------- 8. Cards & Product Grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 12px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.product-card__img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  margin: 8px 0;
}

.product-card__discount {
  position: absolute;
  top: 6px;
  left: 8px;
  background: var(--color-orange);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  z-index: 2;
}

/* === جدید === آیکون حلال، بالا سمت راست هر کارت محصول، هم‌تراز با درصد تخفیف
   نکته: عکس اصلی لوگو مستطیلیه (نسبت ۱.۵ به ۱)، نه مربع؛ object-fit:contain
   باعث می‌شه با حفظ نسبت واقعی داخل کادر جا بگیره، بدون کش اومدن/فشرده شدن */
.product-card__halal {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 51px;
  height: 51px;
  object-fit: contain;
  z-index: 2;
}

.product-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  min-height: 38px;
  text-align: center;
}

.product-card__price {
  color: var(--color-orange);
  font-weight: 800;
  font-size: 17px;
  margin-top: 8px;
}

.product-card__price-old {
  text-decoration: line-through;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 400;
  margin-left: 6px;
}

.product-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed #f1f5f9;
}
/* === اصلاح === اسم فروشگاه/دسته کنار هم می‌مونن؛ فقط اگه واقعاً خیلی
   طولانی بودن بریده می‌شن (نه همیشه) */
.product-card__meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* === جدید === دکمه‌ی «افزودن به سبد» روی کارت محصول -- فقط وقتی
   ماژول فروش آنلاین (ECOMMERCE_ENABLED) روشن باشه رندر می‌شه */
.product-card__add-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  background: var(--color-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.product-card__add-cart:hover {
  background: var(--color-orange-dark, #e56a00);
}
.product-card__add-cart.is-added {
  background: #16a34a;
}

/* ---------- 9. Tables ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  vertical-align: middle;
}

/* === اصلاح مهم === وقتی سایت راست‌به‌چپه، جدول‌ها هم باید راست‌چین
   بشن -- قانون بالا (چپ‌چین) قبل از پشتیبانی RTL نوشته شده بود و باهاش
   تداخل داشت */
body.lang-rtl-text .data-table th,
body.lang-rtl-text .data-table td {
  text-align: right;
}

.data-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
}

/* === جدید === خط‌بندی کامل + سرفصل ثابت، مخصوص صفحات حسابداری
   (دفتر روزنامه/کل/معین/تفضیلی/یکجا، سند حسابداری، سود و زیان) --
   کلاس عمومی .data-table دست‌نخورده می‌مونه، این فقط جای اضافه‌ست */
.acc-scroll-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
}
.acc-grid-table {
  border-collapse: collapse;
}
.acc-grid-table th,
.acc-grid-table td {
  border: 1px solid var(--color-border, #e2e8f0);
}
.acc-grid-table thead tr:not(:first-child) th {
  position: sticky;
  z-index: 2;
  background: #f8fafc;
}
.acc-grid-table thead tr:nth-child(2) th {
  top: 0;
}
.acc-grid-table thead tr:nth-child(3) th {
  top: 41px;
}
/* === جدید === ستون اول (ردیف/نام حساب) هنگام اسکرول افقی ثابت بمونه
   -- inset-inline-start خودکار با جهت RTL/LTR سازگاره */
.acc-grid-table th:first-child,
.acc-grid-table td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: #fff;
}
.acc-grid-table thead tr:not(:first-child) th:first-child {
  z-index: 3; /* بالاتر از هم ردیف و هم ستون چسبان، برای گوشه‌ی مشترک */
  background: #f8fafc;
}
@media print {
  .acc-scroll-wrap { max-height: none; overflow: visible; border: none; }
  .acc-grid-table thead th { position: static; }
  .acc-grid-table th:first-child,
  .acc-grid-table td:first-child { position: static; }
  .ks24-print-only-header { display: block !important; }
}

/* ---------- 9b. Admin/Dashboard Layout ---------- */
.admin-layout {
  display: flex;
  min-height: calc(100vh - 72px);
}

.admin-sidebar {
  width: 250px;
  background: var(--color-navy);
  color: #fff;
  flex-shrink: 0;
  border-right: 2px solid var(--color-orange);
}

.admin-sidebar__header {
  padding: 20px;
  font-size: 18px;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.admin-sidebar__menu button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #cbd5e1;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
}

.admin-sidebar__menu button:hover,
.admin-sidebar__menu button.active {
  background: rgba(255,122,0,0.15);
  color: var(--color-orange);
  border-left: 4px solid var(--color-orange);
}

.admin-main {
  flex: 1;
  padding: 30px;
  overflow-x: auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #fff;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.stat-card h4 { font-size: 13px; color: #64748b; margin-bottom: 8px; }
.stat-card .stat-card__number { font-size: 24px; font-weight: 800; color: var(--color-navy); }

.stat-card--clickable {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-orange);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- 10. Modal ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.is-open { display: flex; }

.modal-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modal-box__close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
  color: #94a3b8;
}
.modal-box__close:hover { color: var(--color-navy); }

.modal-box h3 { color: var(--color-navy); margin-bottom: 10px; }
.modal-box p { color: var(--color-text-muted); font-size: 14px; margin-bottom: 20px; }

.modal-box__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- 11. Badges & Status ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.badge--pending { background: var(--color-pending-bg); color: var(--color-pending-fg); }

/* === جدید === پیام‌های اطلاع‌رسانی (پنل مدیریت فروش آنلاین) */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
}
.alert--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* === جدید === دکمه‌ی تغییر تعداد سبد خرید (سراسری، برای cart.php و
   سبد خرید داخل صفحه‌ی هر فروشگاه) */
.shop-qty-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--color-border);
  background: #fff; color: var(--color-navy); font-weight: 800; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.shop-qty-btn:hover { background: #f8fafc; }
.badge--active  { background: var(--color-success-bg); color: var(--color-success-fg); }
.badge--closed  { background: var(--color-error-bg);   color: var(--color-error-fg); }

/* ---------- 13. Print (فقط مودال بررسی مدرک) ---------- */
@media print {
  body * { visibility: hidden; }
  #documentReviewModal, #documentReviewModal * { visibility: visible; }
  #documentReviewModal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
  }
  #documentReviewModal .modal-box {
    max-width: 100% !important;
    box-shadow: none !important;
    padding: 15mm !important;
  }
  #documentReviewModal .modal-box__close,
  #documentReviewModal form { display: none !important; }

  #documentReviewModal .card-title { page-break-after: avoid; }

  #modalDocImageWrapper {
    page-break-before: always;
    max-height: none !important;
    overflow: visible !important;
    text-align: center;
  }
  #modalDocImage {
    width: auto !important;
    max-width: 100% !important;
    max-height: 27cm !important;
    object-fit: contain;
  }

  /* === جدید === صفحه‌ی چاپ جداگانه برای گواهی حلال، اگه موجود باشه */
  #modalHalalDocImageWrapper {
    page-break-before: always;
    max-height: none !important;
    overflow: visible !important;
    text-align: center;
  }
  #modalHalalDocImage {
    width: auto !important;
    max-width: 100% !important;
    max-height: 27cm !important;
    object-fit: contain;
  }
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* === جدید === بازنویسی کامل بخش موبایل: به‌جای مخفی‌کردن ناوبری،
   اون رو به یه منوی کشویی (off-canvas) با دکمه‌ی همبرگری تبدیل می‌کنیم؛
   علاوه‌براون فونت/فاصله/گرید صفحات مختلف رو برای صفحه‌های کوچیک تنظیم می‌کنیم. */
@media (max-width: 768px) {
  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .site-header { padding: 0 4%; }
  .site-header__bar { min-height: 60px; gap: 10px; }
  .site-header__logo img { height: 36px; }

  /* منوی اصلی به‌جای مخفی‌شدن، به پنل کشویی سمت چپ تبدیل می‌شه */
  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    left: -300px;
    width: 82%;
    max-width: 300px;
    height: 100vh;
    background: #fff;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
    padding: 60px 0 24px;
    overflow-y: auto;
    z-index: 999;
    transition: left 0.28s ease;
  }
  .site-nav.is-open { left: 0; }

  .site-nav__close {
    display: block;
    position: absolute;
    top: 10px;
    left: 14px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-navy);
    padding: 8px;
    cursor: pointer;
  }

  .site-nav > a,
  .site-nav .nav-dropdown > a {
    color: var(--color-navy);
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    justify-content: space-between;
    display: flex;
  }

  /* دراپ‌داون‌ها داخل منوی موبایل، به‌جای شناور بودن، به‌صورت آکاردئون
     زیر همون آیتم باز می‌شن (ارثی از همون کلاس is-open که با کلیک
     ست می‌شه، بدون نیاز به تغییر در جاوااسکریپت) */
  .nav-dropdown__menu {
    position: static;
    display: none;
    box-shadow: none;
    border-radius: 0;
    max-height: none;
    width: 100%;
    margin-top: 0;
    background: #f8fafc;
  }
  .nav-dropdown.is-open .nav-dropdown__menu { display: block; }

  .nav-dropdown__menu--categories { border: none; }

  /* دسته‌بندی‌های تودرتو (flyout) هم روی موبایل به‌صورت باز/زیرمجموعه‌ی
     همون سطح نمایش داده می‌شن، نه پنل شناور کنار */
  .cat-flyout-panel {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin-left: 0;
    padding-left: 14px;
    min-width: 0;
  }

  /* === جدید === سمت راست هدر روی موبایل به دو ردیف مجزا تقسیم می‌شه:
     ردیف اول (خانه + ورود/ثبت‌نام)، ردیف دوم (موقعیت + زبان + درباره‌ما) */
  .site-header__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .site-header__row1,
  .site-header__row2 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-header__badge { padding: 7px 10px; font-size: 12px; }
  .site-header__badge span,
  .site-header__badge { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-header__user span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn { padding: 8px 12px; font-size: 12.5px; }

  .container { padding: 0 14px; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .site-footer { flex-direction: column; gap: 25px; padding: 30px 6%; text-align: center; }
  .site-footer__features { flex-direction: column; gap: 20px; padding: 25px 6%; }
  .site-footer__slogans { flex-direction: column; align-items: center; padding: 16px 6% 0; }
  .site-footer__contact-column { align-items: center; }
  .site-footer__contact-columns-wrap { flex-direction: column; align-items: center; gap: 16px !important; }

  .card { padding: 16px; }
  .card-title { font-size: 15px; }

  h1 { font-size: 22px; }
  h2 { font-size: 19px; }

  /* جدول‌های پنل مدیریتی/فروشنده روی موبایل قابل اسکرول افقی بشن،
     به‌جای اینکه کل صفحه رو فشرده کنن */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* === جدید === صفحه‌ی اصلی: ستون کناری ثابت ۲۸۰ پیکسلی (نشان حلال،
     موقعیت، دانلود اپ) که باعث overflow افقی و ریز دیده‌شدن کل سایت
     می‌شد، روی موبایل زیر ستون فروشگاه‌ها می‌ره (تک‌ستونه). چون این
     grid با inline style تعریف شده، override با !important لازمه. */
  #homeLayout {
    grid-template-columns: 1fr !important;
  }

  /* === جدید === صفحه‌ی فروشگاه: ردیف افقی لوگو+اطلاعات+ساعات‌کاری
     روی موبایل زیر هم قرار می‌گیرن تا فضای کافی برای خوانا بودن
     آدرس/تلفن/ایمیل باشه (به‌جای فشرده‌شدن توی چند ده پیکسل) */
  #storeInfoRow {
    flex-direction: column;
  }
  #storeLogoRow {
    flex-direction: column;
    min-width: 0 !important;
    width: 100%;
  }
  #storeContactGrid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  #storeHoursCard {
    min-width: 0 !important;
    width: 100%;
  }
}

/* === جدید === پنل ادمین از اول هیچ تنظیم موبایلی نداشت -- منو
   (۲۵۰px ثابت) همیشه کنار محتوا می‌موند و روی صفحه‌ی باریک محتوا رو
   تقریباً کامل می‌بلعید. اینجا روی صفحه‌ی باریک، منو می‌ره بالای
   محتوا (تمام‌عرض)، نه کنارش -- محتوا هم تمام‌عرض و کامل دیده می‌شه. */
@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--color-orange);
  }
  .admin-main {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .site-footer__stat-number { font-size: 21px; }
}

/* ---------- 14. RTL Support (فارسی/عربی/کردی سورانی) ----------
   === تغییر مهم ===
   قبلاً این قانون فقط روی یه لیست دستی از تگ‌ها (p, label, td...) اعمال
   می‌شد -- یعنی هر عنصر جدیدی (مثل یه <div> ساده) که به سایت اضافه می‌شد،
   خودکار RTL نمی‌گرفت و همیشه باید یادمون می‌موند اونم اضافه کنیم.

   حالا این قانون مستقیم روی خودِ body اعمال می‌شه. چون «direction» و
   «text-align» جزو ویژگی‌های ارثی (inherited) CSS هستن، خودکار به تمام
   فرزندهای body (هر تگی، چه الان وجود داشته باشه چه بعداً اضافه بشه)
   ارث می‌رسه -- این باگ دیگه هیچ‌وقت تکرار نمی‌شه. */
body.lang-rtl-text {
  direction: rtl;
  text-align: right;
}

/* ---------- 15. Category Tree (منوی درختی پلکانی دسته‌بندی) ----------
   === جدید ===
   استفاده در دو جا: (۱) داخل دراپ‌داون «دسته‌بندی‌ها» توی هدر،
   (۲) زیر نوار جستجو در صفحات اصلی/دسته‌بندی/جستجو. هر سطح با کلیک
   روی فلش باز/بسته می‌شه (مثل Explorer در VSCode)؛ فقط مسیر فعلی
   خودکار بازه، بقیه بسته می‌مونن. */
.cat-tree {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-width: 700px;
  margin: 0 auto;
  padding: 6px 0;
  text-align: left;
  direction: ltr;
}

.nav-dropdown__menu .cat-tree {
  border: none;
  max-width: none;
  padding: 4px 0;
}

.cat-tree__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-tree__link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
}
.cat-tree__link:hover { background: #f8fafc; color: var(--color-orange); }
.cat-tree__link i { color: var(--color-orange); width: 16px; }

.cat-tree__item--active > .cat-tree__link {
  color: var(--color-orange);
}

.cat-tree__toggle {
  background: none;
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  color: #94a3b8;
}
.cat-tree__toggle:hover { color: var(--color-orange); }
.cat-tree__toggle i {
  display: inline-block;
  transition: transform 0.2s;
}
.cat-tree__toggle.is-open i {
  transform: rotate(180deg);
}

.cat-tree__children {
  display: none;
  margin-left: 22px;
  padding-left: 12px;
  border-left: 1px dashed var(--color-border);
}
.cat-tree__children.is-open {
  display: block;
}

.cat-tree__children .cat-tree__link {
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  padding: 7px 12px;
}
.cat-tree__children .cat-tree__children .cat-tree__link {
  font-size: 11.5px;
  color: #64748b;
}

/* ---------- 16. Cascading Flyout Menu (منوی «دسته‌بندی‌ها» توی هدر) ----------
   === جدید ===
   کلیک روی هر ردیف، اگه فرزند داشته باشه، یه پنل شناور سمت راستِ
   همون ردیف و کمی پایین‌تر باز می‌کنه (مثل منوهای تودرتوی سیستم‌عامل).
   هیچ آیکون فلشی نیست؛ خودِ کلیک روی متن تصمیم می‌گیره. */
.nav-dropdown__menu--categories {
  overflow: visible;
  max-height: none;
  border: 1px solid var(--color-border);
}

.cat-flyout-item {
  position: relative;
}
.cat-flyout-item + .cat-flyout-item {
  border-top: 1px solid var(--color-border);
}

.cat-flyout-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-navy);
}
.cat-flyout-link:hover { background: #f8fafc; color: var(--color-orange); }
.cat-flyout-link i { color: var(--color-orange); width: 14px; font-size: 12px; }

.cat-flyout-panel {
  display: none;
  position: absolute;
  top: 6px;
  left: 100%;
  margin-left: 2px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  min-width: 170px;
  /* نکته: عمداً اسکرول (overflow-y) اینجا گذاشته نشده. طبق قوانین CSS،
     اگه overflow-y چیزی غیر از visible باشه، overflow-x هم مجبور
     می‌شه از visible خارج بشه و همین باعث می‌شد پنل زیرِزیرشاخه
     (سطح سوم) که باید از کنار این پنل بیرون بزنه، داخلش «بریده» و
     گیر بیفته. چون هر پنل حداکثر چند آیتم داره، نیازی به اسکرول نیست. */
  padding: 4px 0;
  z-index: 200;
}
.cat-flyout-panel.is-open {
  display: block;
}

/* حالت «انتخاب‌شده» برای برگ‌های درخت وقتی به‌عنوان انتخابگر فرم
   استفاده می‌شه (نه ناوبری) - داشبورد فروشنده، افزودن/ویرایش محصول */
.cat-tree__item--selected > .cat-tree__link {
  background: #fff7ed;
  color: var(--color-orange-dark) !important;
  font-weight: 700;
  position: relative;
}
.cat-tree__item--selected > .cat-tree__link::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  color: var(--color-orange);
  font-size: 11px;
}

.cat-picker-summary {
  background: #fff7ed;
  border: 1px dashed var(--color-orange);
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  text-align: center;
}
.cat-picker-summary--empty {
  background: #f8fafc;
  border-color: var(--color-border);
  color: #94a3b8;
  font-weight: 500;
}