/* =========================================================
   تکفورال — پوسته آبی حرفه‌ای (RTL فارسی)
   ========================================================= */

:root {
  /* رنگ اصلی: آبی */
  --primary: #0c84fc;
  --primary-dark: #0a6fd6;
  --primary-darker: #0a3f7c;
  --primary-light: #eef6ff;
  --primary-soft: #d9ebfe;
  --secondary: #0ea5e9;
  --secondary-dark: #0284c7;

  --accent: #f59e0b;
  --success: #10b981;
  --success-light: #ecfdf5;
  --danger: #e11d48;
  --danger-light: #fff1f2;
  --warning: #f59e0b;
  --info: #0c84fc;

  --navy: #0b1e3d;
  --navy-2: #102a54;

  --bg: #f4f7fc;
  --bg-alt: #eaf1fb;
  --card: #ffffff;
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border: #e2e8f0;
  --border-light: #eef2f7;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 2px 10px rgba(15, 23, 42, .07);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, .09);
  --shadow-lg: 0 14px 34px rgba(15, 23, 42, .12);
  --shadow-blue: 0 8px 24px rgba(12, 132, 252, .26);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --transition: all .22s cubic-bezier(.4, 0, .2, 1);
  --font: "Vazirmatn", "Tahoma", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  direction: rtl;
  text-align: right;
  font-size: 15px;
}

a { color: inherit; text-decoration: none; transition: var(--transition); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; transition: var(--transition); }
input, select, textarea { font-family: inherit; }

.container { width: min(1280px, 94%); margin: 0 auto; }

/* ---------- آیکون‌ها ---------- */
.icon {
  width: 20px; height: 20px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 1.8;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 26px; height: 26px; }
.icon-xl { width: 34px; height: 34px; stroke-width: 1.6; }

/* =========================================================
   نوار اطلاع‌رسانی
   ========================================================= */
.top-notice {
  background: linear-gradient(90deg, var(--primary-darker), var(--primary), var(--secondary));
  color: #fff;
  font-size: 13px;
  padding: 9px 0;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.top-notice a { color: #fff; font-weight: 800; border-bottom: 1px dashed rgba(255,255,255,.6); }
.top-notice a:hover { border-bottom-style: solid; }

/* =========================================================
   هدر
   ========================================================= */
header.site {
  background: #fff;
  border-bottom: 1px solid var(--border-light);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.header-main { display: flex; align-items: center; gap: 22px; padding: 14px 0; }

.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 23px; color: var(--primary-darker);
  white-space: nowrap; flex-shrink: 0;
}
.logo-mark {
  width: 46px; height: 46px; flex: none; display: block;
  filter: drop-shadow(0 5px 12px rgba(0, 55, 115, .18));
}
.logo-name { font-size: 23px; font-weight: 900; color: var(--primary-darker); letter-spacing: -.4px; }
.logo b { color: var(--primary); }

.search-wrap { flex: 1; position: relative; }
.search {
  display: flex; align-items: center;
  background: var(--bg-alt);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
}
.search:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(12,132,252,.1); }
.search input {
  flex: 1; border: none; background: transparent;
  padding: 12px 18px; font-size: 14px; outline: none; color: var(--text);
}
.search input::placeholder { color: var(--text-muted); }
.search button {
  border: none; background: transparent; color: var(--text-muted);
  padding: 0 16px; display: grid; place-items: center;
}
.search button:hover { color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.action-btn {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border);
  padding: 10px 15px; border-radius: var(--radius-xl);
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  white-space: nowrap;
}
.action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.action-btn .text { display: none; }
@media (min-width: 900px) { .action-btn .text { display: inline; } }

.cart-count {
  position: absolute; top: -6px; left: -6px;
  background: var(--primary); color: #fff;
  min-width: 20px; height: 20px; border-radius: 10px;
  font-size: 11px; font-weight: 800;
  display: grid; place-items: center; padding: 0 5px;
  box-shadow: var(--shadow-blue);
}

/* نوار ناوبری */
.nav-bar { background: #fff; border-top: 1px solid var(--border-light); }
.nav-inner {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 0; overflow-x: auto; scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-xl);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap;
}
.nav-inner a .icon { width: 17px; height: 17px; }
.nav-inner a:hover, .nav-inner a.active { background: var(--primary-light); color: var(--primary); }
.nav-inner a.nav-all { background: var(--primary); color: #fff; }
.nav-inner a.nav-all:hover { background: var(--primary-dark); color: #fff; }

/* =========================================================
   هیرو
   ========================================================= */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #12386e 48%, var(--primary) 100%);
  border-radius: var(--radius-lg);
  padding: 58px 50px;
  margin: 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  overflow: hidden; position: relative;
}
.hero::before {
  content: ''; position: absolute; top: -55%; left: -15%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(14,165,233,.35) 0%, transparent 68%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -60%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(12,132,252,.45) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 540px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.14); color: #dbeafe;
  border: 1px solid rgba(255,255,255,.22);
  padding: 7px 14px; border-radius: var(--radius-xl);
  font-size: 12px; font-weight: 700; margin-bottom: 16px;
  backdrop-filter: blur(6px);
}
.hero h1 { font-size: 40px; line-height: 1.35; margin-bottom: 16px; color: #fff; font-weight: 800; }
.hero h1 span { color: #7dd3fc; }
.hero p { font-size: 16px; color: rgba(255,255,255,.82); margin-bottom: 26px; line-height: 1.9; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-primary, .btn-ghost, .btn-secondary, .btn-buy, .btn-cart-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; font-family: inherit; font-weight: 700; cursor: pointer;
  transition: var(--transition);
}
.hero .btn-primary {
  background: #fff; color: var(--primary-darker);
  padding: 13px 28px; border-radius: var(--radius-lg); font-size: 15px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.28); }
.hero .btn-ghost {
  background: rgba(255,255,255,.1); color: #fff;
  padding: 13px 26px; border-radius: var(--radius-lg); font-size: 15px;
  border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px);
}
.hero .btn-ghost:hover { background: rgba(255,255,255,.2); }

.hero-visual {
  position: relative; z-index: 1;
  width: 240px; height: 240px; flex-shrink: 0;
  display: grid; place-items: center;
  animation: float 5s ease-in-out infinite;
}
.hero-visual .icon { width: 110px; height: 110px; color: #e0f2fe; stroke-width: 1.1; }
/* لوگوی عمودی برند (904×958) — نسبت واقعی حفظ می‌شود و کارت سفید کمی بلندتر از مربع است */
.hero-logo {
  width: 196px; height: auto; display: block;
  background: #fff; border-radius: 32px; padding: 18px;
  object-fit: contain;
  box-shadow: 0 24px 60px -18px rgba(2, 20, 50, .66), 0 0 0 12px rgba(255, 255, 255, .07);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@media (max-width: 860px) {
  .hero { flex-direction: column-reverse; text-align: center; padding: 38px 24px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 14px; }
  .hero-btns { justify-content: center; }
  .hero-visual { width: 150px; height: 150px; }
  .hero-visual .icon { width: 70px; height: 70px; }
  .hero-logo { width: 132px; padding: 12px; border-radius: 24px; }
}

/* =========================================================
   بنرهای تبلیغاتی
   ========================================================= */
.promo-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
.promo-banner {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius-md); padding: 22px; color: #fff;
  display: flex; align-items: center; gap: 14px;
  transition: var(--transition); box-shadow: var(--shadow);
}
.promo-banner:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.promo-banner:nth-child(2) { background: linear-gradient(135deg, #0a3f7c, #0c63b8); }
.promo-banner:nth-child(3) { background: linear-gradient(135deg, #0369a1, #0ea5e9); }
.promo-banner .icon-wrap {
  width: 46px; height: 46px; border-radius: var(--radius);
  background: rgba(255,255,255,.18); display: grid; place-items: center; flex-shrink: 0;
}
.promo-banner .icon { width: 24px; height: 24px; }
.promo-banner h3 { font-size: 15px; margin-bottom: 2px; font-weight: 800; }
.promo-banner p { font-size: 12px; opacity: .9; }
@media (max-width: 860px) { .promo-banners { grid-template-columns: 1fr; } }

/* =========================================================
   بخش‌ها
   ========================================================= */
.section { margin: 44px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; }
.section-head h2 {
  font-size: 21px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
}
.section-head h2 .line { width: 4px; height: 26px; background: var(--primary); border-radius: 2px; }
.section-head h2 .icon { color: var(--primary); }
/* لینک‌های متنی سرِ بخش‌ها؛ دکمه‌ها استثنا هستند تا رنگ خودشان را حفظ کنند */
.section-head a:not(.btn) {
  color: var(--primary); font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; gap: 4px;
}
.section-head a:not(.btn):hover { gap: 8px; }

/* =========================================================
   دسته‌بندی‌ها
   ========================================================= */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.cat-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 24px 16px; text-align: center;
  transition: var(--transition); box-shadow: var(--shadow-sm);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--primary-soft); }
.cat-card .icon-wrap {
  width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: var(--radius-lg); display: grid; place-items: center;
  background: var(--primary-light); color: var(--primary);
  transition: var(--transition);
}
.cat-card:hover .icon-wrap { background: var(--primary); color: #fff; transform: scale(1.06); }
.cat-card .icon { width: 30px; height: 30px; }
.cat-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.cat-card p { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }

/* =========================================================
   کارت محصول
   ========================================================= */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 18px; }
.product-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); overflow: hidden;
  transition: var(--transition); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; position: relative;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-soft); }

.product-thumb {
  background: #f7fafd; position: relative;
  aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.product-card:hover .product-thumb img { transform: scale(1.05); }

.badges { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; }
.badge {
  font-size: 11px; font-weight: 800; padding: 4px 9px;
  border-radius: var(--radius-sm); color: #fff;
}
.badge.new { background: var(--primary); }
.badge.sale { background: var(--danger); }
.badge.hot { background: var(--success); }

.discount-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--danger); color: #fff;
  font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: var(--radius-sm);
}

.fav-btn {
  position: absolute; bottom: 12px; left: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-muted);
  opacity: 0; transform: translateY(6px);
}
.product-card:hover .fav-btn { opacity: 1; transform: translateY(0); }
.fav-btn:hover { color: var(--danger); border-color: var(--danger); }
.fav-btn.active { color: var(--danger); background: var(--danger-light); border-color: #fecdd3; opacity: 1; transform: translateY(0); }

.product-body { padding: 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-brand {
  font-size: 11.5px; color: var(--text-muted); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.product-name {
  font-size: 13.5px; font-weight: 700; line-height: 1.65; color: var(--text);
  min-height: 44px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-name:hover { color: var(--primary); }

.rating { display: flex; align-items: center; gap: 5px; font-size: 12.5px; }
.rating .stars { color: var(--accent); display: inline-flex; align-items: center; gap: 3px; }
.rating .stars .icon { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; }
.rating .count { color: var(--text-muted); }

.price-row { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 10px; }
.price-wrap { display: flex; flex-direction: column; gap: 1px; }
.price { color: var(--text); font-weight: 800; font-size: 16.5px; }
/* کالای بدون قیمت (استعلامی) */
.price-inquire {
  font-size: 14px; font-weight: 800; color: #b45309;
  background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 8px;
  padding: 3px 9px; line-height: 1.7;
}
.price .unit { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.old-price { color: var(--text-muted); text-decoration: line-through; font-size: 12px; }

.add-btn {
  background: var(--primary-light); color: var(--primary);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius); padding: 9px 12px;
  font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.add-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.add-btn .icon { width: 16px; height: 16px; }

/* =========================================================
   پیشنهاد شگفت‌انگیز
   ========================================================= */
.amazing-section {
  background: linear-gradient(135deg, var(--primary-darker), var(--primary) 60%, var(--secondary));
  border-radius: var(--radius-lg); padding: 28px; margin: 38px 0; color: #fff;
  box-shadow: var(--shadow-blue);
}
.amazing-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.amazing-header h2 { font-size: 21px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.amazing-header .timer {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: 800;
  background: rgba(255,255,255,.18); padding: 8px 16px; border-radius: var(--radius);
  backdrop-filter: blur(6px);
}
.amazing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.amazing-card { background: #fff; border-radius: var(--radius); overflow: hidden; transition: var(--transition); }
.amazing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.amazing-card .thumb { aspect-ratio: 1 / 1; background: #f7fafd; display: grid; place-items: center; overflow: hidden; }
.amazing-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.amazing-card .info { padding: 13px; }
.amazing-card .name {
  font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.amazing-card .price-row { display: flex; align-items: center; justify-content: space-between; }
.amazing-card .discount {
  background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.amazing-card .price { font-size: 14px; font-weight: 800; color: var(--text); }

/* =========================================================
   نوار اعتماد
   ========================================================= */
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 36px 0; padding: 14px;
  background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.trust-item { display: flex; align-items: center; gap: 12px; padding: 14px; }
.trust-item .icon-wrap {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--primary-light); color: var(--primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.trust-item .icon { width: 24px; height: 24px; }
.trust-item h4 { font-size: 13.5px; font-weight: 700; margin-bottom: 1px; }
.trust-item p { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 860px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-bar { grid-template-columns: 1fr; } }

/* =========================================================
   فیلترها
   ========================================================= */
.toolbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 14px;
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.toolbar label {
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: #fff;
  padding: 7px 15px; border-radius: var(--radius-xl);
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
}
.chip .icon { width: 15px; height: 15px; }
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-blue); }

/* =========================================================
   جزئیات محصول
   ========================================================= */
.detail-wrap {
  background: var(--card); border-radius: var(--radius-lg);
  border: 1px solid var(--border-light); box-shadow: var(--shadow); overflow: hidden;
}
.detail { display: grid; grid-template-columns: 1fr 1fr; }
.detail .gallery { background: #f7fafd; padding: 36px; display: grid; place-items: center; }
.detail .gallery img { width: 100%; max-width: 390px; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.detail .info { padding: 34px; display: flex; flex-direction: column; }
.detail .brand {
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.detail h1 { font-size: 25px; font-weight: 800; margin-bottom: 12px; line-height: 1.45; }
.detail .rating-big { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.detail .rating-big .stars { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.detail .rating-big .stars .icon { width: 17px; height: 17px; fill: currentColor; stroke-width: 0; }
.detail .rating-big .score {
  background: var(--success-light); color: var(--success);
  padding: 3px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700;
}
.detail .old-big { font-size: 15px; color: var(--text-muted); text-decoration: line-through; margin-bottom: 2px; }
.detail .big-price { font-size: 30px; font-weight: 800; color: var(--text); margin: 10px 0 4px; }
.detail .big-price .unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.detail .saving {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: var(--danger-light); color: var(--danger);
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 700; margin-bottom: 12px;
}
.detail .desc { color: var(--text-secondary); margin: 14px 0; line-height: 1.9; font-size: 14px; }

.spec-list { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.spec-list li {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  padding: 7px 13px; border-radius: var(--radius); font-size: 12.5px;
  font-weight: 600; color: var(--primary-darker);
}
.spec-list li .icon { width: 14px; height: 14px; color: var(--primary); }

.qty {
  display: inline-flex; align-items: center;
  border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.qty button {
  width: 42px; height: 46px; border: none; background: var(--bg);
  color: var(--text-secondary); display: grid; place-items: center;
}
.qty button:hover { background: var(--primary-light); color: var(--primary); }
.qty input { width: 52px; text-align: center; border: none; font-size: 15px; font-weight: 700; outline: none; }

.buy-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.btn-cart-add {
  background: var(--primary); color: #fff;
  padding: 15px 32px; border-radius: var(--radius-lg); font-size: 15px;
  box-shadow: var(--shadow-blue);
}
.btn-cart-add:hover { background: var(--primary-dark); transform: translateY(-2px); }
.btn-buy { background: var(--success); color: #fff; padding: 15px 32px; border-radius: var(--radius-lg); font-size: 15px; }
.btn-buy:hover { background: #059669; transform: translateY(-2px); }

@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; }
  .detail .gallery, .detail .info { padding: 22px; }
}

/* =========================================================
   سبد خرید
   ========================================================= */
.cart-page { display: grid; grid-template-columns: 1fr 350px; gap: 22px; margin: 22px 0; align-items: start; }
.cart-list { display: flex; flex-direction: column; gap: 11px; }
.cart-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); padding: 18px; border-radius: var(--radius-md);
  border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
}
.cart-item:hover { box-shadow: var(--shadow-md); }
.cart-item img { width: 92px; height: 92px; border-radius: var(--radius); object-fit: cover; background: #f7fafd; }
.cart-item .info { flex: 1; }
.cart-item .info h4 { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.cart-item .info h4 a { color: var(--text); transition: var(--transition); }
.cart-item .info h4 a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.cart-item .ci-thumb { flex-shrink: 0; display: block; border-radius: var(--radius); }
.cart-item .ci-thumb img { display: block; transition: var(--transition); }
.cart-item .ci-thumb:hover img { box-shadow: 0 0 0 2px var(--primary-soft); }
.cart-item .info .brand { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
.cart-item .actions { display: flex; align-items: center; gap: 14px; }
.cart-item .remove {
  color: var(--danger); background: var(--danger-light);
  border: 1px solid #fecdd3; width: 36px; height: 36px;
  border-radius: var(--radius); display: grid; place-items: center;
}
.cart-item .remove:hover { background: var(--danger); color: #fff; }
.cart-item.removing { opacity: 0; transform: translateX(-14px); transition: var(--transition); }

/* فیلد تعداد قابل‌تایپ در سبد خرید */
.qty input.qty-input {
  width: 58px; padding: 0; height: 46px;
  border: none; outline: none; background: transparent;
  text-align: center; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--text); -moz-appearance: textfield; appearance: textfield;
}
.qty input.qty-input::-webkit-outer-spin-button,
.qty input.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input.qty-input:focus { background: var(--primary-light); color: var(--primary-dark); }
.qty button:disabled { opacity: .38; cursor: not-allowed; }
.qty button:disabled:hover { background: var(--bg); color: var(--text-secondary); }

/* ---------- پیام شناور سبد خرید ---------- */
.cart-toast-box {
  position: fixed; z-index: 1200; inset-block-end: 22px; inset-inline-start: 22px;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.cart-toast {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border-light);
  border-inline-start: 4px solid var(--success);
  border-radius: var(--radius-md); padding: 12px 16px;
  box-shadow: var(--shadow-md); max-width: 340px;
  font-size: 12.8px; font-weight: 700; color: var(--text);
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.cart-toast.show { opacity: 1; transform: translateY(0); }
.cart-toast.tone-error { border-inline-start-color: var(--danger); }
.cart-toast .ct-ico {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--success-light); color: var(--success);
}
.cart-toast.tone-error .ct-ico { background: var(--danger-light); color: var(--danger); }
.cart-toast .ct-ico svg { width: 14px; height: 14px; }
.cart-toast .ct-txt { line-height: 1.7; }

.cart-count.bump { animation: cartBump .35s ease; }
@keyframes cartBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.add-btn.is-busy, .pd-add.is-busy { opacity: .7; cursor: progress; }

@media (max-width: 640px) {
  .cart-toast-box { inset-inline: 12px; inset-block-end: 12px; }
  .cart-toast { max-width: none; }
}

.cart-summary {
  background: var(--card); padding: 24px; border-radius: var(--radius-md);
  border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
  position: sticky; top: 100px; height: fit-content;
}
.cart-summary h3 {
  font-size: 17px; font-weight: 800; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 2px solid var(--border-light);
  display: flex; align-items: center; gap: 8px;
}
.cart-summary .row { display: flex; justify-content: space-between; margin: 9px 0; font-size: 13.5px; color: var(--text-secondary); }
.cart-summary .row.total {
  font-size: 20px; font-weight: 800; color: var(--text);
  border-top: 2px dashed var(--border); padding-top: 14px; margin-top: 14px;
}
.cart-summary .checkout-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--success); color: #fff; border: none;
  padding: 15px; border-radius: var(--radius-lg); font-weight: 800; font-size: 15px;
  margin-top: 18px; box-shadow: 0 8px 20px rgba(16,185,129,.28);
}
.cart-summary .checkout-btn:hover { background: #059669; transform: translateY(-2px); }
@media (max-width: 900px) { .cart-page { grid-template-columns: 1fr; } .cart-summary { position: static; } }

/* =========================================================
   فوتر
   ========================================================= */
footer.site { background: var(--navy); color: #b6c6dd; margin-top: 56px; }

/* ---------- نوار خدمات ---------- */
.footer-services {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.fs-item { display: flex; align-items: center; gap: 11px; }
.fs-ico {
  width: 42px; height: 42px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(12, 132, 252, .18); border: 1px solid rgba(125, 211, 252, .18);
  color: #7dd3fc;
}
.fs-ico .icon { width: 20px; height: 20px; }
.fs-item div b { display: block; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; }
.fs-item div span { font-size: 11.5px; color: #8ba3c0; }

.footer-top { padding: 38px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 30px; }
.footer-brand .logo-footer {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 21px; color: #fff; margin-bottom: 12px;
}
.footer-brand .logo-footer img {
  width: 42px; height: 42px; display: block; flex: none;
}
.footer-brand p { font-size: 13px; line-height: 1.9; color: #93a9c4; }
.footer-col h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.footer-col a, .footer-col p {
  font-size: 13px; color: #93a9c4; display: flex; align-items: center; gap: 7px;
  margin-bottom: 9px; line-height: 1.8;
}
.footer-col a:hover { color: #fff; }
.footer-col .icon { width: 15px; height: 15px; flex-shrink: 0; }
.footer-col a .icon { color: #5f7ba0; }
.footer-col a:hover .icon { color: #7dd3fc; }

/* ستون دسته‌بندی‌ها */
.footer-cats a { justify-content: flex-start; gap: 6px; }
.footer-cats .fcat-ico {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-grid; place-items: center; color: #5f7ba0;
}
.footer-cats a:hover .fcat-ico { color: #7dd3fc; }
.footer-cats .fcat-ico .icon { width: 16px; height: 16px; }
.footer-cats .fcat-name { flex: 1; }
.footer-cats .fcat-n {
  font-size: 10.5px; font-weight: 700; color: #9fb4cf;
  background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 1px 7px;
}

.footer-social { display: flex; gap: 8px; margin-top: 16px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: var(--radius);
  background: rgba(255,255,255,.07); display: grid; place-items: center; color: #cbd5e1;
}
.footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

/* ---------- نشان‌های اعتماد ---------- */
.footer-badges {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
  padding: 18px 0 20px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.fb-sep { width: 1px; height: 84px; background: rgba(255, 255, 255, .12); }
.fb-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fb-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #8ba3c0;
}
.fb-title .icon { width: 15px; height: 15px; color: #7dd3fc; }
.fb-items { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-tile {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; padding: 7px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22); transition: var(--transition);
}
.fb-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.fb-tile img { display: block; }
.fb-tile .fb-ecunion { width: 96px; height: 144px; }

/* اینماد: جای‌نگهدار ثابت تا وقتی لوگو از دامنهٔ ثبت‌شده بارگذاری شود */
.fb-tile.is-enamad {
  position: relative; width: 110px; height: 158px; overflow: hidden;
  border: 1px solid #e2e8f0;
}
.fb-tile.is-enamad::before {
  content: "نماد اعتماد الکترونیکی";
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; padding: 8px;
  font-size: 10.5px; font-weight: 800; line-height: 1.8;
  color: #64748b; text-align: center;
}
.fb-tile.is-enamad img {
  position: relative; z-index: 1; background: #fff;
  max-height: 100%; max-width: 100%; width: auto; height: auto;
}
.fb-tile.is-fallback { border-style: dashed; }

.fb-pay { align-items: flex-start; }
.fb-pay-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  color: #dbeafe; border-radius: 10px; padding: 9px 14px;
  font-size: 12px; font-weight: 700;
}
.pay-chip .icon { width: 16px; height: 16px; color: #7dd3fc; }
.fb-note { font-size: 11.5px; color: #7d93b0; line-height: 1.95; max-width: 260px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 16px 0; font-size: 12.5px; color: #6b81a0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.footer-legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-legal a { font-size: 12.5px; color: #8ba3c0; }
.footer-legal a:hover { color: #fff; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.5fr repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 860px) {
  .footer-services { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-badges { justify-content: flex-start; gap: 18px; }
  .fb-sep { display: none; }
}
@media (max-width: 520px) {
  .footer-services { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-legal { justify-content: center; }
}

/* =========================================================
   هشدارها و توست
   ========================================================= */
.alert-success, .alert-dev, .alert-error {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-radius: var(--radius); margin: 18px 0;
  font-size: 13.5px; font-weight: 600;
}
.alert-success { background: var(--success-light); color: #047857; border: 1px solid #a7f3d0; }
.alert-dev { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.alert-error { background: var(--danger-light); color: #be123c; border: 1px solid #fecdd3; }

#toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--navy); color: #fff;
  padding: 13px 24px; border-radius: var(--radius-lg);
  font-weight: 700; font-size: 13.5px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  transition: .4s cubic-bezier(.4,0,.2,1); z-index: 300;
  display: flex; align-items: center; gap: 8px;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* =========================================================
   خالی
   ========================================================= */
.empty { text-align: center; padding: 66px 20px; color: var(--text-muted); }
.empty .icon-big {
  width: 78px; height: 78px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--primary-light); color: var(--primary);
  display: grid; place-items: center;
}
.empty .icon-big .icon { width: 36px; height: 36px; }
.empty h2, .empty h3 { font-size: 19px; color: var(--text); margin-bottom: 6px; font-weight: 800; }
.empty p { font-size: 13.5px; margin-bottom: 18px; }
.empty .btn { display: inline-flex; }

/* =========================================================
   فرم و احراز هویت
   ========================================================= */
.auth-page { min-height: calc(100vh - 240px); display: grid; place-items: center; padding: 34px 0; }
.auth-wrap { width: 100%; max-width: 450px; }
.auth-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-lg);
}
.auth-card .auth-logo { text-align: center; margin-bottom: 22px; }
.auth-card .auth-logo .mark {
  width: 58px; height: 58px; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; border-radius: var(--radius-lg); margin-bottom: 12px;
  box-shadow: var(--shadow-blue);
}
.auth-card .auth-logo .mark .icon { width: 28px; height: 28px; }
.auth-card .auth-logo h2 { font-size: 21px; font-weight: 800; }
.auth-card .auth-logo p { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

.field { margin-bottom: 16px; }
.field label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; margin-bottom: 7px; color: var(--text-secondary);
}
.field label .icon { width: 15px; height: 15px; color: var(--primary); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 15px;
  border: 2px solid var(--border-light); border-radius: var(--radius);
  font-size: 13.5px; outline: none; background: #fff; transition: var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(12,132,252,.08);
}
.field .text-danger { color: var(--danger); font-size: 11.5px; margin-top: 5px; display: block; font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: var(--radius); padding: 13px 22px;
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: var(--transition);
}
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(12,132,252,.24); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
.btn-secondary { background: var(--bg-alt); color: var(--text-secondary); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: var(--danger-light); color: var(--danger); border: 1px solid #fecdd3; }
.btn-danger:hover { background: var(--danger); color: #fff; }

.auth-tabs {
  display: flex; gap: 6px; margin-bottom: 18px;
  background: var(--bg); padding: 4px; border-radius: var(--radius-lg);
}
.auth-tabs button {
  flex: 1; padding: 11px; border: none; background: transparent;
  border-radius: var(--radius); font-weight: 700; font-size: 12.5px; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.auth-tabs button .icon { width: 16px; height: 16px; }
.auth-tabs button.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }

.seg { display: flex; gap: 9px; margin-bottom: 16px; }
.seg label {
  flex: 1; border: 2px solid var(--border-light); border-radius: var(--radius);
  padding: 13px; text-align: center; cursor: pointer;
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: var(--transition);
}
.seg input { display: none; }
.seg label .icon { width: 17px; height: 17px; }
.seg label:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

.link-row { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 16px; font-weight: 600; gap: 10px; flex-wrap: wrap; }
.link-row a { color: var(--primary); }
.link-row a:hover { text-decoration: underline; }

.demo-box {
  margin-top: 18px; padding: 14px 16px;
  background: var(--primary-light); border: 1px dashed var(--primary-soft);
  border-radius: var(--radius); font-size: 12px; color: var(--primary-darker);
  line-height: 1.9;
}
.demo-box strong { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; }
.demo-box code {
  background: #fff; padding: 1px 7px; border-radius: 6px;
  font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--primary-dark);
  border: 1px solid var(--primary-soft); direction: ltr; display: inline-block;
}

/* =========================================================
   پنل
   ========================================================= */
/* minmax(0, 1fr) نه 1fr: ستون 1fr حداقلِ خود را از min-content محتوا می‌گیرد و
   یک جدول/نمودار پهن، کل ستون را از عرض دید بیرون می‌برد. */
.panel { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 22px; margin: 26px 0; align-items: start; }
.panel-side {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 18px;
  box-shadow: var(--shadow-sm); position: sticky; top: 100px;
}
.panel-side .user-info {
  text-align: center; padding-bottom: 16px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.panel-side .avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; display: inline-grid; place-items: center; margin-bottom: 9px;
  box-shadow: var(--shadow-blue);
}
.panel-side .avatar .icon { width: 28px; height: 28px; }
.panel-side .user-info h4 { font-size: 14.5px; font-weight: 700; }
.panel-side .user-info p { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.panel-side a {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-radius: var(--radius);
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 3px; font-weight: 600;
}
.panel-side a .icon { width: 18px; height: 18px; color: var(--text-muted); }
.panel-side a:hover, .panel-side a.active { background: var(--primary-light); color: var(--primary); }
.panel-side a:hover .icon, .panel-side a.active .icon { color: var(--primary); }
.panel-side .divider { height: 1px; background: var(--border-light); margin: 10px 0; }

.panel-main {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
  min-height: 420px; min-width: 0;
}
.panel-main h2 {
  font-size: 19px; font-weight: 800; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.panel-main h2 .icon { color: var(--primary); }
.panel-main h3 { font-size: 15.5px; font-weight: 800; margin: 18px 0 12px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card {
  background: linear-gradient(135deg, var(--primary-light), #fff);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 18px; display: flex; align-items: center; gap: 13px;
  transition: var(--transition);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-card .icon-wrap {
  width: 46px; height: 46px; border-radius: var(--radius);
  background: #fff; color: var(--primary); display: grid; place-items: center;
  border: 1px solid var(--primary-soft); flex-shrink: 0;
}
.stat-card .icon { width: 22px; height: 22px; }
.stat-card .n { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.3; }
.stat-card .l { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

@media (max-width: 860px) {
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel-side { position: static; }
  .panel-side a { display: inline-flex; margin: 3px; }
  .panel-side .user-info { display: none; }
}

/* =========================================================
   جدول
   ========================================================= */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border-light); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 12px 11px; border-bottom: 1px solid var(--border-light); text-align: right; }
.table th { color: var(--text-muted); font-size: 11.5px; font-weight: 700; background: var(--bg); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--primary-light); }

.badge-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-xl); font-size: 11.5px; font-weight: 700; }
.st-Pending { background: #fffbeb; color: #b45309; }
.st-Paid { background: var(--primary-light); color: var(--primary-dark); }
.st-Shipped { background: #e0f2fe; color: #0369a1; }
.st-Delivered { background: var(--success-light); color: #047857; }
.st-Cancelled { background: var(--danger-light); color: #be123c; }

.row-actions { display: inline-flex; align-items: center; gap: 10px; }
.row-actions a, .row-actions button {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--primary); font-weight: 700;
  border: none; background: none; cursor: pointer;
}
.row-actions a .icon, .row-actions button .icon { width: 15px; height: 15px; }
.row-actions .danger { color: var(--danger); }

/* =========================================================
   صفحات محتوایی
   ========================================================= */
.page-hero {
  background: linear-gradient(135deg, var(--navy), var(--primary-darker) 60%, var(--primary));
  color: #fff; border-radius: var(--radius-lg);
  padding: 44px; margin: 26px 0; text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; top: -40%; left: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(14,165,233,.28), transparent 70%);
}
.page-hero h1 { font-size: 29px; font-weight: 800; margin-bottom: 10px; position: relative; }
.page-hero p { font-size: 14.5px; opacity: .86; max-width: 620px; margin: 0 auto; position: relative; line-height: 1.9; }

.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); margin: 18px 0 0;
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .icon { width: 13px; height: 13px; }

/* ---------- سوالات متداول ---------- */
.faq-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.faq-search {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 10px 14px; max-width: 520px; box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.faq-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(12, 132, 252, .1); }
.faq-search .icon { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
.faq-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--text); min-width: 0;
}
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-chip {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  background: #fff; border: 1px solid var(--border-light); border-radius: 999px;
  padding: 6px 13px; transition: var(--transition);
}
.faq-chip:hover { color: var(--primary); border-color: var(--primary-soft); background: var(--primary-light); }

.faq-group { margin-top: 26px; scroll-margin-top: 90px; }
.faq-group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 800; color: var(--primary-darker);
  margin-bottom: 12px;
}
.faq-group-title .icon { width: 16px; height: 16px; color: var(--primary); }
.faq-group-title span {
  background: var(--primary-light); color: var(--primary-dark);
  border: 1px solid var(--primary-soft); border-radius: 999px;
  padding: 1px 9px; font-size: 11px; font-weight: 700;
}

.faq-list { margin-top: 0; }
.faq-item {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); margin-bottom: 10px;
  box-shadow: var(--shadow-sm); transition: var(--transition);
  overflow: hidden;
}
.faq-item:hover { border-color: var(--primary-soft); box-shadow: var(--shadow-md); }
.faq-item[open] { border-color: var(--primary-soft); }
.faq-item > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 15px 18px; list-style: none; font-size: 13.8px; font-weight: 700;
  color: var(--primary-darker);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary .icon { color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; }
.faq-item > summary .faq-q { flex: 1; }
.faq-item > summary .icon:last-child { transition: transform .2s ease; color: var(--text-muted); }
.faq-item[open] > summary .icon:last-child { transform: rotate(180deg); }
.faq-a {
  padding: 0 18px 16px 44px; color: var(--text-secondary);
  font-size: 13px; line-height: 1.95;
}

.faq-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 22px 0; }
.faq-empty a { color: var(--primary); font-weight: 700; }

.faq-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 30px; padding: 20px 22px;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  border-radius: var(--radius-md);
}
.faq-cta b { font-size: 14px; color: var(--primary-darker); }
.faq-cta p { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }

.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 22px; }
.about-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 26px; text-align: center;
  box-shadow: var(--shadow-sm); transition: var(--transition);
}
.about-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.about-card .icon-wrap {
  width: 60px; height: 60px; border-radius: var(--radius-lg);
  background: var(--primary-light); color: var(--primary);
  display: inline-grid; place-items: center; margin-bottom: 14px;
}
.about-card .icon { width: 28px; height: 28px; }
.about-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.about-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.85; }

.prose { max-width: 820px; }
.prose p { color: var(--text-secondary); line-height: 2; font-size: 14px; margin-bottom: 14px; }
.prose h3 { font-size: 17px; font-weight: 800; margin: 22px 0 10px; }
.prose ul { padding-right: 20px; margin-bottom: 14px; }
.prose li { color: var(--text-secondary); font-size: 13.5px; line-height: 1.95; margin-bottom: 6px; }

/* بقیهٔ عناصری که رندرکنندهٔ مارک‌داون تولید می‌کند
   (صفحه‌های قوانین و حریم خصوصی از همین‌ها استفاده می‌کنند) */
.prose h2 { font-size: 19px; font-weight: 800; margin: 26px 0 10px; }
.prose h4 { font-size: 15px; font-weight: 800; margin: 20px 0 8px; }
.prose h3:first-child, .prose h2:first-child { margin-top: 0; }
.prose ol { padding-right: 22px; margin-bottom: 14px; }
.prose ol li { list-style: persian; }
.prose strong { color: var(--text); font-weight: 800; }
.prose a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--primary-dark); }
.prose blockquote {
  margin: 16px 0; padding: 12px 16px;
  background: var(--primary-light); border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.95; color: var(--primary-darker);
}
.prose blockquote p { margin: 0; color: inherit; }
.prose hr { border: none; border-top: 1px dashed var(--border); margin: 22px 0; }
.prose code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px;
  background: #f1f5f9; border: 1px solid var(--border-light); border-radius: 6px;
  padding: 1px 6px; direction: ltr; display: inline-block;
}
.prose table {
  width: 100%; border-collapse: collapse; margin: 16px 0 18px;
  font-size: 13px; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  overflow: hidden;
}
.prose table th {
  background: var(--bg); color: var(--text); font-weight: 800; font-size: 12.5px;
  padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--border);
}
.prose table td {
  padding: 10px 12px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light); line-height: 1.9;
}
.prose table tr:last-child td { border-bottom: none; }
.prose table tr:hover td { background: var(--primary-light); }
@media (max-width: 640px) {
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* =========================================================
   بلاگ
   ========================================================= */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.blog-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: var(--transition);
  display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-soft); }
.blog-cover {
  aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--primary-light), var(--bg-alt));
  display: grid; place-items: center; color: var(--primary);
  position: relative; overflow: hidden;
}
.blog-cover .icon { width: 54px; height: 54px; stroke-width: 1.3; }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-cat {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.95); color: var(--primary-dark);
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.blog-body { padding: 17px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-title {
  font-size: 15px; font-weight: 800; line-height: 1.65; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card:hover .blog-title { color: var(--primary); }
.blog-excerpt {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-meta {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--text-muted); gap: 8px;
}
.blog-meta span { display: inline-flex; align-items: center; gap: 4px; }
.blog-meta .icon { width: 14px; height: 14px; }

/* مقاله */
.article-wrap { max-width: 860px; margin: 0 auto; }
.article-head { text-align: center; margin: 26px 0 20px; }
.article-head .blog-cat-static {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary-light); color: var(--primary-dark);
  font-size: 12px; font-weight: 800; padding: 5px 13px;
  border-radius: var(--radius-xl); margin-bottom: 14px;
}
.article-head h1 { font-size: 30px; font-weight: 800; line-height: 1.5; margin-bottom: 14px; }
.article-meta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted);
}
.article-meta span { display: inline-flex; align-items: center; gap: 5px; }
.article-meta .icon { width: 15px; height: 15px; }
.article-cover {
  border-radius: var(--radius-lg); overflow: hidden; margin: 22px 0;
  background: linear-gradient(135deg, var(--primary-light), var(--bg-alt));
  display: grid; place-items: center; min-height: 220px; color: var(--primary);
}
.article-cover .icon { width: 76px; height: 76px; stroke-width: 1.2; }
.article-cover img { width: 100%; display: block; }
.article-body {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm);
  font-size: 14.5px; line-height: 2.1; color: var(--text-secondary);
  white-space: pre-line;
}
.article-body h2, .article-body h3 { color: var(--text); font-weight: 800; margin: 20px 0 10px; }
.article-body img { border-radius: var(--radius); margin: 14px 0; }

/* =========================================================
   تماس با ما
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; align-items: start; }
.contact-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-start; gap: 14px;
}
.contact-card .icon-wrap {
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--primary-light); color: var(--primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.contact-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.contact-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.85; }
.contact-form {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  /* در موبایل فرم تماس قبل از کارت‌های اطلاعات نمایش داده می‌شود */
  .contact-grid .contact-form { order: -1; }
}

/* =========================================================
   انیمیشن
   ========================================================= */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .45s ease forwards; }

/* اسکرول‌بار */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* موبایل */
@media (max-width: 620px) {
  .header-main { flex-wrap: wrap; gap: 10px; }
  .search-wrap { order: 3; flex-basis: 100%; }
  .logo { font-size: 19px; }
  .logo-mark { width: 38px; height: 38px; }
  .logo-name { font-size: 20px; }
  .action-btn { padding: 8px 11px; }
  .hero { padding: 30px 18px; }
  .hero h1 { font-size: 23px; }
  .auth-card { padding: 22px; }
  .cart-item { flex-wrap: wrap; }
  .cart-item img { width: 76px; height: 76px; }
  .article-body { padding: 20px; }
  .article-pre { padding: 12px 13px; font-size: 11.5px; line-height: 1.8; border-radius: 10px; }
  .article-table { font-size: 12px; }
  .article-head h1 { font-size: 22px; }
  .page-hero { padding: 30px 20px; }
  .page-hero h1 { font-size: 22px; }
  .panel-main { padding: 18px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 11px; }
  .product-body { padding: 11px; }
  .product-name { font-size: 12.5px; min-height: 40px; }
  .price { font-size: 14.5px; }
}

/* =========================================================
   صفحات احراز هویت (بدون هدر و فوتر سایت)
   ========================================================= */
.auth-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 88% 8%, #dbeafe 0%, transparent 46%),
    radial-gradient(circle at 8% 92%, #e0f2fe 0%, transparent 42%),
    linear-gradient(160deg, #f8fbff 0%, var(--bg) 52%, #eaf1fb 100%);
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}

.auth-deco {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  z-index: 0;
}
.auth-deco-1 {
  width: 340px; height: 340px; top: -140px; left: -110px;
  background: radial-gradient(circle, rgba(12, 132, 252, .13), transparent 68%);
}
.auth-deco-2 {
  width: 420px; height: 420px; bottom: -190px; right: -150px;
  background: radial-gradient(circle, rgba(14, 165, 233, .13), transparent 68%);
}

.auth-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 26px 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}

/* نوار بالای صفحه احراز هویت (برند + بازگشت) */
.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-darker);
  text-decoration: none;
  letter-spacing: -.2px;
}
.auth-brand b { color: var(--primary); font-weight: 900; }
.auth-brand .auth-mark {
  width: 42px; height: 42px; display: block; flex: none;
  border-radius: 50%; box-shadow: var(--shadow-blue);
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border);
  padding: 8px 13px;
  border-radius: 999px;
  text-decoration: none;
  transition: var(--transition);
}
.auth-back .icon { width: 15px; height: 15px; }
.auth-back:hover {
  color: var(--primary);
  border-color: var(--primary-soft);
  background: var(--primary-light);
  transform: translateX(-2px);
}

.auth-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* کارت داخل قالب بدون هدر/فوتر */
.auth-body .auth-page {
  min-height: auto;
  padding: 0;
  display: block;
}
.auth-body .auth-wrap { max-width: 100%; }
.auth-body .auth-card {
  border-radius: var(--radius-xl);
  padding: 30px 28px;
  box-shadow: 0 22px 60px -18px rgba(15, 23, 42, .18), 0 0 0 1px rgba(12, 132, 252, .04);
}

/* پانویس مینیمال */
.auth-foot {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.auth-foot span { display: inline-flex; align-items: center; gap: 5px; }
.auth-foot .icon { width: 14px; height: 14px; color: var(--success); }
.auth-foot a { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.auth-foot a:hover { color: var(--primary); }
.auth-foot .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: #cbd5e1; display: inline-block;
}

@media (max-width: 620px) {
  .auth-shell { padding: 16px 14px 22px; }
  .auth-body .auth-card { padding: 22px 18px; border-radius: var(--radius-lg); }
  .auth-brand { font-size: 16px; }
  .auth-brand .mark { width: 34px; height: 34px; }
  .auth-back { font-size: 11.5px; padding: 7px 11px; }
  .auth-foot { font-size: 11px; }
}


/* =========================================================
   منوی دسته‌بندی‌ها (مگا‌منو)
   ========================================================= */
.nav-bar { position: relative; }
.nav-shell { display: flex; align-items: center; gap: 8px; }
.nav-inner { flex: 1; min-width: 0; }
.nav-sep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; margin: 0 4px; }

/* دکمه اصلی */
.nav-all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: none; border-radius: var(--radius-xl);
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(12, 132, 252, .25);
  transition: var(--transition);
}
.nav-all .icon { width: 17px; height: 17px; }
.nav-all .chev { display: inline-flex; transition: var(--transition); }
.nav-all .chev .icon { width: 15px; height: 15px; opacity: .85; }
.nav-all:hover { background: var(--primary-dark); }
.cat-menu.open .nav-all { background: var(--primary-dark); box-shadow: 0 6px 18px rgba(12, 132, 252, .32); }
.cat-menu.open .nav-all .chev { transform: rotate(180deg); }

/* پنل */
.mega {
  position: absolute;
  top: 100%; right: 0; left: 0;
  background: #fff;
  border-top: 1px solid var(--border-light);
  box-shadow: 0 26px 60px -16px rgba(15, 23, 42, .26);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 95;
}
.cat-menu.open .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-inner { width: min(1280px, 94%); margin: 0 auto; padding: 16px 0 14px; }

.mega-grid {
  display: grid; grid-template-columns: 272px 1fr;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ستون دسته‌ها */
.mega-list {
  background: var(--bg);
  border-left: 1px solid var(--border-light);
  padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.mega-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border: none; background: transparent;
  border-radius: var(--radius);
  text-align: right; color: var(--text);
  font-family: inherit; cursor: pointer;
  transition: var(--transition);
}
.mega-item .mi-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #fff; color: var(--primary);
  border: 1px solid var(--border-light);
  transition: var(--transition);
}
.mega-item .mi-icon .icon { width: 19px; height: 19px; }
.mega-item .mi-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mega-item .mi-text b { font-size: 12.8px; font-weight: 700; }
.mega-item .mi-text small { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.mega-item > .icon { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.mega-item:hover { background: #fff; }
.mega-item:hover > .icon { color: var(--primary); }
.mega-item.active {
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--primary-darker);
}
.mega-item.active .mi-icon {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 10px rgba(12, 132, 252, .28);
}
.mega-item.active .mi-text small { color: var(--primary); }
.mega-item.active > .icon { color: var(--primary); }
.mega-item-all { margin-top: 4px; border-top: 1px dashed var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.mega-item-all .mi-icon { background: var(--primary-light); border-color: var(--primary-soft); }

/* بدنه */
.mega-body { padding: 16px 20px 18px; min-height: 316px; }
.mega-pane { display: none; }
.mega-pane.active { display: block; animation: fadeIn .22s ease; }

.mega-pane-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.mega-pane-head h3 { font-size: 15px; font-weight: 800; color: var(--text); }
.mega-pane-head p { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.mega-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); padding: 6px 12px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.mega-more .icon { width: 14px; height: 14px; }
.mega-more:hover { background: var(--primary-soft); }

.mega-cols { display: grid; grid-template-columns: 1.15fr 1fr 196px; gap: 22px; }
.mega-col h4 {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--text-secondary);
  margin-bottom: 10px;
}
.mega-col h4 .icon { width: 14px; height: 14px; color: var(--primary); }

.mega-links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
.mega-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 9px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.mega-links a:hover { background: var(--primary-light); color: var(--primary); }
.mega-links .cnt {
  font-size: 10px; font-weight: 700;
  background: var(--bg-alt); color: var(--text-muted);
  padding: 1px 6px; border-radius: 999px;
  min-width: 20px; text-align: center;
}
.mega-links a:hover .cnt { background: #fff; color: var(--primary); }

.mega-brands { display: flex; flex-wrap: wrap; gap: 6px; }
.mega-brands a {
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border: 1px solid var(--border);
  border-radius: 999px; color: var(--text-secondary);
  background: #fff;
}
.mega-brands a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.mega-all-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 11.5px; font-weight: 700; color: var(--primary);
}
.mega-all-btn .icon { width: 15px; height: 15px; }
.mega-all-btn:hover { color: var(--primary-dark); }
.mega-empty { font-size: 11.5px; color: var(--text-muted); }

/* کارت پیشنهادی */
.mega-promo {
  display: block; position: relative;
  padding: 10px; border-radius: 14px;
  border: 1px solid var(--border-light);
  background: linear-gradient(165deg, #fff 0%, var(--primary-light) 100%);
  transition: var(--transition);
}
.mega-promo:hover { border-color: var(--primary-soft); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mp-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
}
.mp-badge .icon { width: 13px; height: 13px; }
.mega-promo img { width: 100%; height: 104px; object-fit: contain; display: block; }
.mp-name {
  display: block; margin-top: 6px;
  font-size: 11.5px; font-weight: 700; line-height: 1.7; color: var(--text);
  height: 38px; overflow: hidden;
}
.mp-price { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--primary); }
.mp-price small { font-size: 10px; font-weight: 600; color: var(--text-muted); }

/* سربرگ و پانویس پنل */
.mega-head { display: none; }
.mega-close { display: none; }
.mega-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-light);
  font-size: 11px; color: var(--text-muted);
}
.mega-foot span { display: inline-flex; align-items: center; gap: 6px; }
.mega-foot .icon { width: 15px; height: 15px; color: var(--primary); }

/* ---------- موبایل: پنل تمام‌صفحه ---------- */
@media (max-width: 980px) {
  .mega-cols { grid-template-columns: 1fr 1fr; }
  .mega-col-promo { display: none; }
}

@media (max-width: 860px) {
  .mega {
    position: fixed; inset: 0;
    border-top: none;
    overflow-y: auto;
    padding-bottom: 24px;
    transform: translateY(-14px);
  }
  .cat-menu.open .mega { transform: none; }
  .mega-inner { width: 100%; max-width: none; padding: 0 12px 16px; }

  .mega-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 6;
    background: #fff; padding: 13px 4px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
  }
  .mega-head strong { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
  .mega-head .icon { width: 16px; height: 16px; color: var(--primary); }
  .mega-close {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--border); background: #fff; color: var(--text-secondary);
  }
  .mega-close .icon { width: 18px; height: 18px; }

  .mega-grid { grid-template-columns: 1fr; border: none; border-radius: 0; overflow: visible; }
  .mega-list {
    flex-direction: row; overflow-x: auto; gap: 6px;
    padding: 2px 0 10px; background: transparent;
    border-left: none; border-bottom: 1px solid var(--border-light);
    scrollbar-width: none;
  }
  .mega-list::-webkit-scrollbar { display: none; }
  .mega-item {
    flex: 0 0 auto; width: auto; gap: 7px;
    padding: 8px 12px; background: #fff;
    border: 1px solid var(--border-light); border-radius: 999px;
  }
  .mega-item .mi-text small, .mega-item > .icon { display: none; }
  .mega-item .mi-text b { font-size: 12px; }
  .mega-item .mi-icon { width: 26px; height: 26px; border: none; background: transparent; }
  .mega-item .mi-icon .icon { width: 16px; height: 16px; }
  .mega-item.active { box-shadow: var(--shadow-sm); border-color: var(--primary-soft); }
  .mega-item-all { margin-top: 0; border-top: 1px solid var(--border-light); }

  .mega-body { padding: 14px 2px 4px; min-height: 0; }
  .mega-pane-head { flex-direction: column; gap: 8px; }
  .mega-cols { grid-template-columns: 1fr; gap: 18px; }
  .mega-links { grid-template-columns: 1fr 1fr; }
  .mega-foot { gap: 12px; font-size: 10.5px; }
}

body.cat-open { overflow: hidden; }

/* =========================================================
   مجله — صفحه فهرست
   ========================================================= */
.magazine-hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: center;
  background: linear-gradient(135deg, var(--navy) 0%, #14346b 55%, var(--primary) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 34px 34px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
.magazine-hero::after {
  content: ""; position: absolute; width: 320px; height: 320px;
  left: -90px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none;
}
.magazine-hero-text h1 { font-size: 26px; font-weight: 900; line-height: 1.6; margin: 8px 0 8px; color: #fff; }
.magazine-hero-text p { font-size: 13px; line-height: 1.95; color: rgba(255,255,255,.82); max-width: 520px; }
.magazine-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #fff;
  backdrop-filter: blur(6px);
}
.magazine-eyebrow .icon { width: 15px; height: 15px; }
.magazine-hero-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.magazine-hero-stats span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85);
}
.magazine-hero-stats .icon { width: 15px; height: 15px; color: #93c5fd; }

.magazine-search { display: flex; gap: 8px; align-items: center; position: relative; z-index: 1; }
.magazine-search-box {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: var(--radius);
  padding: 0 14px; height: 46px;
  box-shadow: 0 8px 24px rgba(2, 20, 60, .22);
}
.magazine-search-box .icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.magazine-search-box input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--text); height: 100%;
}
.magazine-search-box input::placeholder { color: var(--text-muted); }
.ms-clear { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--text-muted); }
.ms-clear .icon { width: 13px; height: 13px; }
.ms-clear:hover { background: var(--danger-light); color: var(--danger); }
.magazine-search .btn { height: 46px; padding: 0 20px; white-space: nowrap; }

/* مقاله شاخص */
.magazine-featured {
  display: grid; grid-template-columns: 42% 1fr;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); margin-bottom: 22px;
  transition: var(--transition);
}
.magazine-featured:hover { box-shadow: var(--shadow-lg); border-color: var(--primary-soft); transform: translateY(-3px); }
.mf-cover {
  position: relative; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--primary-light), var(--bg-alt) 60%, #e0f2fe);
  color: var(--primary); min-height: 240px; overflow: hidden;
}
.mf-cover img { width: 100%; height: 100%; object-fit: cover; }
.mf-icon .icon { width: 72px; height: 72px; stroke-width: 1.2; }
.mf-badge {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  box-shadow: var(--shadow-blue);
}
.mf-badge .icon { width: 13px; height: 13px; }
.mf-body { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.mf-body h2 { font-size: 20px; font-weight: 800; line-height: 1.7; color: var(--text); }
.magazine-featured:hover .mf-body h2 { color: var(--primary); }
.mf-body p {
  font-size: 13px; line-height: 2; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mf-body .article-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-light); }
.mf-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--primary);
}
.mf-cta .icon { width: 15px; height: 15px; transition: var(--transition); }
.magazine-featured:hover .mf-cta .icon { transform: translateX(-4px); }

/* نوار ابزار */
.magazine-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.magazine-cats { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-count {
  font-size: 10px; font-weight: 700;
  background: var(--bg-alt); color: var(--text-muted);
  padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
.chip.active .chip-count { background: rgba(255,255,255,.25); color: #fff; }
.magazine-sort { display: flex; align-items: center; gap: 7px; }
.magazine-sort label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.magazine-sort label .icon { width: 15px; height: 15px; }
.magazine-sort select {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; font-family: inherit; font-size: 12.5px;
  background: #fff; color: var(--text); outline: none; cursor: pointer;
}
.magazine-sort select:focus { border-color: var(--primary); }

/* برچسب‌ها */
.magazine-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--card); border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.mt-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.mt-label .icon { width: 14px; height: 14px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  background: var(--bg); color: var(--text-secondary);
  border: 1px solid transparent;
}
.tag-chip span { font-size: 10px; color: var(--text-muted); }
.tag-chip:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary-soft); }
.tag-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tag-chip.active span { color: rgba(255,255,255,.8); }
.tag-chip.clear { background: var(--danger-light); color: var(--danger); }
.tag-chip .icon { width: 13px; height: 13px; }

.magazine-filter-note {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  border-radius: var(--radius); padding: 11px 14px; margin-bottom: 16px;
  font-size: 12.5px; color: var(--primary-darker);
}
.magazine-filter-note .icon { width: 15px; height: 15px; color: var(--primary); }
.magazine-filter-note b { color: var(--primary-dark); }
.magazine-filter-note a { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primary); }
.magazine-filter-note a .icon { width: 14px; height: 14px; }

.blog-pin {
  position: absolute; bottom: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.94); color: var(--primary);
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.blog-pin .icon { width: 12px; height: 12px; }

/* صفحه‌بندی */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-wrap: wrap; margin: 26px 0 6px;
}
.pg-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: #fff;
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
}
.pg-btn .icon { width: 16px; height: 16px; }
.pg-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pg-btn.disabled { opacity: .45; pointer-events: none; }
.pg-num {
  min-width: 36px; height: 36px; display: inline-grid; place-items: center;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: #fff; font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
}
.pg-num:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pg-num.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-blue); }

/* =========================================================
   مجله — صفحه مقاله
   ========================================================= */
.article-lead {
  font-size: 14px; line-height: 2; color: var(--text-secondary);
  max-width: 760px; margin: 10px 0 4px;
}
.article-layout {
  display: grid; grid-template-columns: 1fr 288px;
  gap: 22px; align-items: start; margin-top: 20px;
}
.article-main { min-width: 0; max-width: 100%; }

.article-body { white-space: normal; min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.article-body p { margin: 0 0 14px; }
.article-body p:last-child { margin-bottom: 0; }
.article-body .article-h { margin: 26px 0 12px; scroll-margin-top: 96px; }
.article-body .article-h:first-child { margin-top: 0; }
.article-body .article-list { margin: 0 0 14px; padding-right: 20px; }
.article-body .article-list li { margin-bottom: 7px; }
.article-body blockquote {
  margin: 16px 0; padding: 14px 18px;
  background: var(--primary-light); border-right: 4px solid var(--primary);
  border-radius: var(--radius); color: var(--primary-darker);
  font-size: 13.5px;
}
.article-body code {
  background: var(--bg-alt); color: var(--primary-darker);
  padding: 2px 7px; border-radius: 6px;
  font-family: ui-monospace, monospace; font-size: 12.5px;
}
.article-body a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article-body .article-hr { border: none; border-top: 1px dashed var(--border); margin: 22px 0; }
.preview-empty { color: var(--text-muted); font-size: 13px; }

.article-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin: 18px 0; padding-top: 16px; border-top: 1px dashed var(--border);
}
.at-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.at-label .icon { width: 14px; height: 14px; }

.article-share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 12px 15px; margin-bottom: 18px;
}
.as-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-left: 4px; }
.as-label .icon { width: 15px; height: 15px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text-secondary);
  cursor: pointer;
}
.share-btn .icon { width: 15px; height: 15px; }
.share-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.share-btn.tg:hover { border-color: #229ED9; color: #229ED9; background: #e8f6fd; }
.share-btn.wa:hover { border-color: #25D366; color: #128C4A; background: #e9fbf1; }
.share-btn.tw:hover { border-color: #0f172a; color: #0f172a; background: #f1f5f9; }

.article-product {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, #fff, var(--primary-light));
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 18px;
}
.ap-cover { width: 88px; height: 88px; border-radius: var(--radius); background: #f7fafd; overflow: hidden; flex-shrink: 0; }
.ap-cover img { width: 100%; height: 100%; object-fit: contain; }
.ap-body { flex: 1; min-width: 180px; }
.ap-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--primary); }
.ap-label .icon { width: 13px; height: 13px; }
.ap-name { font-size: 14.5px; font-weight: 800; margin: 3px 0 2px; color: var(--text); }
.ap-brand { font-size: 11.5px; color: var(--text-muted); }
.ap-price { font-size: 15px; font-weight: 900; color: var(--primary); margin-top: 3px; }
.ap-price small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }

.article-author {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 18px;
}
.aa-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; font-size: 20px; font-weight: 800;
  box-shadow: var(--shadow-blue);
}
.aa-body { flex: 1; min-width: 160px; }
.aa-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.aa-name { font-size: 14px; font-weight: 800; color: var(--text); }
.aa-body p { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.an-item {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 13px 15px;
  transition: var(--transition);
}
.an-item:hover { border-color: var(--primary-soft); background: var(--primary-light); }
.an-item.next { text-align: left; align-items: flex-end; }
.an-dir { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--primary); }
.an-dir .icon { width: 14px; height: 14px; }
.an-title {
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary); line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.an-item:hover .an-title { color: var(--primary-darker); }
.an-item.disabled { visibility: hidden; }

/* سایدبار مقاله */
.article-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 12px; }
.aside-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 15px 16px;
  box-shadow: var(--shadow-sm);
}
.aside-card h4 {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--text);
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}
.aside-card h4 .icon { width: 15px; height: 15px; color: var(--primary); }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: 6px 9px; border-radius: 8px; border-right: 2px solid transparent;
}
.toc-list a:hover { background: var(--primary-light); color: var(--primary); border-right-color: var(--primary); }
.toc-list .lvl-2 a { padding-right: 20px; font-size: 11.5px; }
.toc-list .lvl-3 a { padding-right: 32px; font-size: 11px; color: var(--text-muted); }

.aside-facts { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.aside-facts li { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; }
.aside-facts span { color: var(--text-muted); }
.aside-facts b { color: var(--text-secondary); font-weight: 700; }
.aside-cta p { font-size: 11.5px; line-height: 1.9; color: var(--text-muted); margin-bottom: 10px; }

/* =========================================================
   مجله — پنل مدیریت
   ========================================================= */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 13px 14px;
  box-shadow: var(--shadow-sm);
}
.sc-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--primary-light); color: var(--primary);
}
.sc-icon.ok { background: var(--success-light); color: var(--success); }
.sc-icon.warn { background: #fffbeb; color: var(--warning); }
.sc-icon .icon { width: 20px; height: 20px; }
.stat-card b { display: block; font-size: 17px; font-weight: 900; color: var(--text); line-height: 1.3; }
.stat-card span { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.manage-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 11px 13px;
}
.mf-search {
  display: flex; align-items: center; gap: 7px;
  flex: 1; min-width: 190px;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 0 11px; height: 38px;
}
.mf-search .icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.mf-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 12.5px; }
.manage-filter select {
  height: 38px; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 10px; font-family: inherit; font-size: 12px;
  background: #fff; color: var(--text); outline: none; cursor: pointer;
}

.mt-title { display: flex; align-items: flex-start; gap: 9px; }
.mt-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--primary-light); color: var(--primary);
}
.mt-icon .icon { width: 16px; height: 16px; }
.mt-name { display: block; font-weight: 700; font-size: 13px; color: var(--text); max-width: 300px; line-height: 1.7; }
.mt-name:hover { color: var(--primary); }
.mt-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.mt-sub span { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-muted); }
.mt-sub .icon { width: 11px; height: 11px; }

/* =========================================================
   مجله — ادیتور
   ========================================================= */
.blog-form { display: flex; flex-direction: column; gap: 14px; }
.editor-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 16px 16px 4px;
  box-shadow: var(--shadow-sm);
}
/* عنوان کارت‌های کمکی داخل فرم مجله (مثل متاتگ‌ها) */
.editor-card-head {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--text);
}
.editor-card-head .icon { width: 17px; height: 17px; color: var(--primary); }
.editor-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.field-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 5px; min-height: 16px;
}
.field-foot .hint, .field .hint { font-size: 10.5px; color: var(--text-muted); }
.counter { font-size: 10.5px; font-weight: 700; color: var(--text-muted); direction: ltr;
  white-space: nowrap; flex: 0 0 auto; }
.text-danger { color: var(--danger); font-size: 11px; font-weight: 600; }

.editor-shell {
  border: 2px solid var(--border-light); border-radius: var(--radius);
  overflow: hidden; background: #fff;
  transition: var(--transition);
}
.editor-shell:focus-within { border-color: var(--primary-soft); box-shadow: 0 0 0 4px rgba(12, 132, 252, .08); }
.editor-toolbar {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 7px 8px; background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}
.editor-toolbar button {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-secondary); cursor: pointer;
}
.editor-toolbar button:hover { background: #fff; border-color: var(--border); color: var(--primary); }
.editor-toolbar button .icon { width: 15px; height: 15px; }
.editor-toolbar .ed-spacer { flex: 1; }
.editor-toolbar .ed-preview { background: #fff; border-color: var(--border); color: var(--primary); }
.editor-toolbar .ed-preview.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.editor-shell textarea {
  width: 100%; border: none; outline: none; resize: vertical;
  padding: 16px; font-family: inherit; font-size: 13.5px; line-height: 2.1;
  color: var(--text); background: #fff; min-height: 320px;
}
.editor-preview { padding: 18px 20px; min-height: 320px; font-size: 14px; line-height: 2.1; color: var(--text-secondary); }
.editor-preview h2, .editor-preview h3, .editor-preview h4 { color: var(--text); font-weight: 800; margin: 18px 0 10px; }
.editor-preview h2:first-child { margin-top: 0; }
.editor-preview p { margin-bottom: 12px; }
.editor-preview ul, .editor-preview ol { padding-right: 20px; margin-bottom: 12px; }
.editor-preview li { margin-bottom: 6px; }
.editor-preview blockquote {
  margin: 14px 0; padding: 12px 16px;
  background: var(--primary-light); border-right: 4px solid var(--primary);
  border-radius: var(--radius); color: var(--primary-darker);
}
.editor-preview code { background: var(--bg-alt); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; }
.editor-preview a { color: var(--primary); font-weight: 700; text-decoration: underline; }

.publish-box {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 13px 16px;
}
.switch-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.switch-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }
.switch-row b { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); }
.switch-row b .icon { width: 15px; height: 15px; color: var(--success); }
.switch-row small { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.9; margin-top: 2px; }

.form-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.editor-tips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
  font-size: 11.5px; color: #92400e; line-height: 1.9;
}
.editor-tips .icon { width: 15px; height: 15px; }
.editor-tips code { background: #fff; padding: 1px 6px; border-radius: 5px; font-size: 11px; direction: ltr; display: inline-block; }

.editor-meta-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 9px 14px; margin-bottom: 12px;
  font-size: 11.5px; color: var(--text-muted);
}
.editor-meta-strip span { display: inline-flex; align-items: center; gap: 5px; }
.editor-meta-strip .icon { width: 14px; height: 14px; }

/* ---------- ریسپانسیو مجله ---------- */
@media (max-width: 1040px) {
  .article-layout { grid-template-columns: 1fr 250px; }
}
@media (max-width: 900px) {
  .magazine-hero { grid-template-columns: 1fr; padding: 26px 22px; gap: 18px; }
  .magazine-hero-text h1 { font-size: 21px; }
  .magazine-featured { grid-template-columns: 1fr; }
  .mf-cover { min-height: 170px; }
  .mf-body { padding: 18px 20px; }
  .article-layout { display: flex; flex-direction: column-reverse; align-items: stretch; }
  .article-aside { position: static; width: 100%; }
  .article-body { padding: 22px 18px; }
}
@media (max-width: 620px) {
  .magazine-search { flex-direction: column; align-items: stretch; }
  .magazine-search .btn { width: 100%; }
  .magazine-toolbar { flex-direction: column; align-items: stretch; }
  .magazine-sort { justify-content: space-between; }
  .article-nav { grid-template-columns: 1fr; }
  .an-item.next { text-align: right; align-items: flex-start; }
  .article-product { flex-direction: column; align-items: flex-start; }
  .article-product .btn { width: 100%; justify-content: center; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .manage-filter { flex-direction: column; align-items: stretch; }
  .manage-filter select { width: 100%; }
  .editor-toolbar button span { display: none; }
}

/* اعداد فارسی برای لیست شماره‌دار مقالات */
.article-body ol.article-list, .editor-preview ol { list-style-type: persian; }

/* =========================================================
   دیالوگ تایید
   ========================================================= */
.cf-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .18s ease;
}
.cf-overlay.show { opacity: 1; }
.cf-card {
  width: min(420px, 100%);
  background: #fff; border-radius: var(--radius-lg);
  padding: 26px 24px 20px;
  box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .45);
  text-align: center;
  transform: translateY(10px) scale(.97);
  transition: transform .2s cubic-bezier(.34, 1.4, .64, 1);
}
.cf-overlay.show .cf-card { transform: none; }
.cf-icon {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 50%;
}
.cf-icon svg { width: 26px; height: 26px; }
.cf-card.tone-danger .cf-icon { background: var(--danger-light); color: var(--danger); }
.cf-card.tone-primary .cf-icon { background: var(--primary-light); color: var(--primary); }
.cf-card h3 { font-size: 16.5px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.cf-card p { font-size: 13px; line-height: 2; color: var(--text-secondary); margin-bottom: 20px; }
.cf-actions { display: flex; gap: 9px; }
.cf-actions .btn { flex: 1; justify-content: center; }
body.cf-open { overflow: hidden; }

/* ===== کاور مقاله ===== */
.cover-box {
  display: grid; grid-template-columns: 240px 1fr; gap: 16px;
  padding: 14px; border: 1px dashed var(--border-strong, #cbd5e1);
  border-radius: var(--radius-lg); background: var(--surface-2, #f8fafc);
}
.cover-preview {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius);
  overflow: hidden; background: #fff; border: 1px solid var(--border);
  display: grid; place-items: center;
}
.cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-empty {
  display: grid; place-items: center; gap: 8px;
  color: var(--text-muted); font-size: 12px; text-align: center; padding: 10px;
}
.cover-empty svg { width: 28px; height: 28px; opacity: .55; }
.cover-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cover-actions .btn { padding: 8px 13px; font-size: 12.5px; }
.file-btn { cursor: pointer; }
.cover-url input { width: 100%; direction: ltr; text-align: left; font-size: 12.5px; }
.cover-side .hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.9; margin: 0; }
.cover-side .hint.err { color: var(--danger); font-weight: 700; }
@media (max-width: 700px) {
  .cover-box { grid-template-columns: 1fr; }
  .cover-preview { aspect-ratio: 16 / 9; }
}

/* ===== مودال افزودن تصویر ===== */
.img-modal {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center; padding: 20px;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px);
}
.img-modal-card {
  width: min(520px, 100%); max-height: 90vh; overflow: auto;
  background: #fff; border-radius: var(--radius-lg);
  padding: 20px; box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .5);
}
.img-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.img-modal-head b {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 800; color: var(--text);
}
.img-modal-x {
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: var(--surface-2, #f1f5f9); color: var(--text-secondary);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.img-modal-x:hover { background: var(--danger-light); color: var(--danger); }
.img-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.img-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text-secondary); cursor: pointer;
  font-family: inherit;
}
.img-tab.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.drop-zone {
  display: grid; place-items: center; gap: 6px; cursor: pointer;
  padding: 26px 16px; text-align: center;
  border: 2px dashed var(--border-strong, #cbd5e1);
  border-radius: var(--radius-lg); background: var(--surface-2, #f8fafc);
  transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone.drag { border-color: var(--primary); background: var(--primary-light); }
.dz-icon { color: var(--primary); opacity: .8; }
.dz-icon svg { width: 30px; height: 30px; }
.dz-title { font-size: 13px; font-weight: 800; color: var(--text); }
.dz-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.8; max-width: 320px; }
.img-preview {
  margin-top: 12px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2, #f8fafc);
  max-height: 190px; display: grid; place-items: center;
}
.img-preview img { max-width: 100%; max-height: 190px; object-fit: contain; display: block; }
.img-err {
  margin: 10px 0 0; font-size: 12px; font-weight: 700;
  color: var(--danger); background: var(--danger-light);
  padding: 8px 11px; border-radius: 8px;
}
.img-modal-foot { display: flex; gap: 9px; margin-top: 16px; }
.img-modal-foot .btn { flex: 1; justify-content: center; }
body.img-modal-open { overflow: hidden; }

/* ===== تصاویر داخل متن مقاله ===== */
.article-figure { margin: 22px 0; text-align: center; }
.article-figure img {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
}
.article-figure figcaption {
  margin-top: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.9;
}
.article-img {
  max-width: 100%; height: auto; display: block; margin: 18px auto;
  border-radius: var(--radius); border: 1px solid var(--border);
}

/* جدول‌های داخل مقاله */
.article-table-wrap {
  margin: 20px 0; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.article-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  min-width: 380px; background: var(--card);
}
.article-table th,
.article-table td {
  padding: 10px 13px; text-align: right; vertical-align: top;
  border-bottom: 1px solid var(--border-light); line-height: 1.9;
}
.article-table th {
  background: var(--bg-alt); font-weight: 800; color: var(--text);
  white-space: nowrap; border-bottom: 1px solid var(--border);
}
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:hover td { background: rgba(12,132,252,.035); }

/* بلوک کد داخل مقاله */
.article-pre {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box;
  margin: 18px 0; padding: 14px 16px; overflow-x: auto; overflow-y: hidden;
  background: #0f172a; color: #e2e8f0;
  border-radius: var(--radius); border: 1px solid #1e293b;
  font-family: Consolas, "Courier New", monospace; font-size: 12.5px;
  line-height: 1.85; direction: ltr; text-align: left;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: #475569 transparent;
}
.article-pre::-webkit-scrollbar { height: 8px; }
.article-pre::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 4px; }
.article-pre::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
.article-pre::-webkit-scrollbar-thumb:hover { background: #64748b; }
.article-pre code {
  display: block; min-width: max-content;
  font-family: inherit; color: inherit; background: none;
  padding: 0; border: none; white-space: pre; overflow-wrap: normal; word-break: normal;
}

/* =========================================================
   نظرات کاربران (بلاگ و فروشگاه)
   ========================================================= */
.cm-section {
  margin-top: 30px; background: var(--card);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-sm); scroll-margin-top: 90px;
}
.cm-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}
.cm-head h2 {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 800; color: var(--text); margin: 0;
}
.cm-head h2 .icon { width: 20px; height: 20px; color: var(--primary); }
.cm-count {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px;
  padding: 0 7px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary);
  font-size: 11.5px; font-weight: 800;
}
.cm-head-sub { margin-right: auto; font-size: 11.5px; color: var(--text-muted); }

.cm-layout { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.cm-layout-plain { grid-template-columns: 1fr; }
.cm-main { min-width: 0; }

/* ---------- خلاصه امتیاز ---------- */
.cm-summary {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 16px; position: sticky; top: 90px;
}
.cm-avg { text-align: center; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.cm-avg-num { font-size: 38px; font-weight: 900; color: var(--text); line-height: 1.15; }
.cm-avg-stars { display: inline-flex; gap: 2px; margin: 4px 0 6px; }
.cm-avg-stars i { color: #cbd5e1; display: inline-flex; }
.cm-avg-stars i.on { color: var(--accent); }
.cm-avg-stars i.on svg { fill: var(--accent); stroke: var(--accent); }
.cm-avg-stars .icon { width: 15px; height: 15px; }
.cm-avg-sub { font-size: 11px; color: var(--text-muted); }

.cm-dist { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.cm-dist-row { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--text-secondary); }
.cm-dist-lbl { width: 42px; flex-shrink: 0; }
.cm-dist-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.cm-dist-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.cm-dist-num { width: 22px; text-align: left; color: var(--text-muted); font-weight: 700; }

/* ---------- فرم نظر ---------- */
.cm-login {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px;
}
.cm-login-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; background: #fff; color: var(--primary);
}
.cm-login-body { flex: 1; min-width: 150px; }
.cm-login-body b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }
.cm-login-body p { font-size: 11.5px; color: var(--text-secondary); margin: 0; line-height: 1.8; }

.cm-form {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 15px; margin-bottom: 20px;
}
.cm-form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cm-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; font-size: 14px; font-weight: 800;
}
.cm-form-who b { display: block; font-size: 13px; font-weight: 800; color: var(--text); }
.cm-form-who span { font-size: 11px; color: var(--text-muted); }
.cm-form-who { margin-left: auto; }
.cm-form-head .cm-badge { margin-right: 0; }

.cm-rate-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.cm-rate-label { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.cm-rate { display: inline-flex; gap: 3px; }
.cm-star-btn {
  border: none; background: none; padding: 0; cursor: pointer;
  color: #cbd5e1; display: inline-flex; transition: transform .12s;
}
.cm-star-btn .icon { width: 22px; height: 22px; }
.cm-star-btn.on { color: var(--accent); }
.cm-star-btn.on .icon { fill: var(--accent); stroke: var(--accent); }
.cm-star-btn:hover { transform: scale(1.12); }

.cm-form textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 13px; font-family: inherit; font-size: 13px; line-height: 1.9;
  background: #fff; color: var(--text); outline: none; resize: vertical;
}
.cm-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.cm-form-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; }
.cm-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.cm-hint .icon { width: 13px; height: 13px; }
.cm-form-foot .btn { margin-right: auto; }

/* ---------- لیست نظرات ---------- */
.cm-list { display: flex; flex-direction: column; gap: 2px; }
.cm-item {
  display: flex; gap: 11px; padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.cm-item:last-child { border-bottom: none; }
.cm-item.cm-mine {
  background: var(--primary-light); border-radius: var(--radius);
  padding: 14px; border-bottom: 1px solid var(--primary-soft); margin: 4px 0;
}
.cm-body { flex: 1; min-width: 0; }
.cm-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.cm-name { font-size: 12.5px; font-weight: 800; color: var(--text); }
.cm-tag-mine {
  font-size: 10px; font-weight: 800; color: var(--primary);
  background: #fff; border: 1px solid var(--primary-soft);
  border-radius: 999px; padding: 1px 7px;
}
.cm-stars { display: inline-flex; gap: 1px; }
.cm-stars i { color: #d7dee9; display: inline-flex; }
.cm-stars i.on { color: var(--accent); }
.cm-stars i.on svg { fill: var(--accent); stroke: var(--accent); }
.cm-stars .icon { width: 13px; height: 13px; }
.cm-date { margin-right: auto; font-size: 10.5px; color: var(--text-muted); }
.cm-text { font-size: 13px; line-height: 2; color: var(--text-secondary); margin: 0; white-space: pre-line; }
.cm-flags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.cm-edited { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-muted); }
.cm-edited .icon { width: 12px; height: 12px; }

.cm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px;
  border: 1px solid transparent;
}
.cm-badge.cm-ok { background: var(--success-light); color: #047857; border-color: #a7f3d0; }
.cm-badge.cm-wait { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.cm-badge.cm-no { background: var(--danger-light); color: var(--danger); border-color: #fecdd3; }

.cm-reply {
  margin-top: 10px; padding: 10px 12px;
  background: #f8fafc; border: 1px solid var(--border-light);
  border-right: 3px solid var(--primary); border-radius: var(--radius-sm);
}
.cm-reply-head {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; color: var(--primary); margin-bottom: 4px;
}
.cm-reply-head .icon { width: 14px; height: 14px; }
.cm-reply p { margin: 0; font-size: 12px; line-height: 1.95; color: var(--text-secondary); }

.cm-actions { margin-top: 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cm-act {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--primary);
}
.cm-act .icon { width: 13px; height: 13px; }
.cm-act-reply { border: none; background: none; cursor: pointer; font-family: inherit; padding: 0; }
.cm-act-reply:hover { text-decoration: underline; }

/* ---------- پاسخ کاربران به نظرات ---------- */
.cm-replies {
  margin-top: 10px; padding-right: 14px;
  border-right: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.cm-subitem {
  display: flex; gap: 9px; padding: 10px 12px;
  background: #f8fafc; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.cm-subitem.cm-mine { background: var(--primary-light); border-color: var(--primary-soft); }
.cm-subitem .cm-text { font-size: 12.5px; }
.cm-avatar-sm { width: 28px; height: 28px; font-size: 12px; }

/* نوار «پاسخ به ...» بالای فرم نظر */
.cm-reply-to {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  color: var(--primary); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 11.5px; font-weight: 700; margin-bottom: 10px;
}
.cm-reply-to[hidden] { display: none; }
.cm-reply-cancel {
  margin-right: auto; background: #fff; color: var(--danger);
  font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  border-radius: 999px; padding: 2px 9px; border: 1px solid var(--border);
}
.cm-reply-cancel:hover { border-color: var(--danger); }

.cm-empty { text-align: center; padding: 34px 16px; }
.cm-empty-icon {
  display: inline-grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--bg); color: var(--text-muted); margin-bottom: 10px;
}
.cm-empty-icon .icon { width: 30px; height: 30px; }
.cm-empty b { display: block; font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.cm-empty p { font-size: 12px; color: var(--text-muted); margin: 0; }

/* ---------- پنل: نظرات من ---------- */
.cm-filter { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0; }
.chip-active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-blue); }
.chip-active:hover { color: #fff; }

.cm-mine-list, .cm-mod-list { display: flex; flex-direction: column; gap: 11px; }
.cm-mine-card, .cm-mod-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm);
}
.cmc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cmc-type {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; color: var(--primary);
  background: var(--primary-light); border-radius: 999px; padding: 2px 8px;
}
.cmc-type .icon { width: 13px; height: 13px; }
.cmc-target { font-size: 12.5px; font-weight: 700; color: var(--text); }
.cmc-target:hover { color: var(--primary); }
.cmc-head .cm-badge { margin-right: auto; }
.cmc-text { font-size: 12.5px; line-height: 1.95; color: var(--text-secondary); margin: 0 0 6px; white-space: pre-line; }
.cmc-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border-light);
}
.cmc-date {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--text-muted);
}
.cmc-date .icon { width: 12px; height: 12px; }
.cmc-foot .row-actions { margin-right: auto; }
.cmc-edit { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.cmc-edit textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font-family: inherit; font-size: 12.5px; line-height: 1.9;
  background: #fff; color: var(--text); outline: none; resize: vertical;
}
.cmc-edit textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.cmc-edit-foot { display: flex; gap: 8px; margin-top: 8px; }
.cm-edit-btn { border: none; background: none; color: var(--primary); cursor: pointer; display: inline-flex; }

/* ---------- پنل: مدیریت نظرات ---------- */
.cm-result-note { font-size: 11.5px; color: var(--text-muted); margin: 0 0 10px; }
.cmm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cmm-who { flex: 1; min-width: 0; }
.cmm-who b { display: block; font-size: 12.5px; font-weight: 800; color: var(--text); }
.cmm-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-muted); }
.cmm-meta .icon { width: 12px; height: 12px; }
.cmm-target {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg); border-radius: var(--radius-sm);
  padding: 6px 10px; margin-bottom: 9px;
}
.cmm-target a { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.cmm-target a:hover { color: var(--primary); }
.cmm-text { font-size: 12.5px; line-height: 1.95; color: var(--text-secondary); margin: 0; white-space: pre-line; }
.cmm-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.cmm-actions form { margin: 0; }
.cmm-actions .btn { padding: 7px 12px; font-size: 11.5px; border-radius: var(--radius-sm); }
.btn-ok { background: var(--success-light); color: #047857; border: 1px solid #a7f3d0; }
.btn-ok:hover { background: #d1fae5; }
.cmm-reply-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.cmm-reply-form textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font-family: inherit; font-size: 12.5px; line-height: 1.9;
  background: #fff; color: var(--text); outline: none; resize: vertical;
}
.cmm-reply-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.cmm-reply-foot { display: flex; gap: 8px; margin-top: 8px; }

/* رنگ آیکون کارت‌های آماری */
.sc-icon.sc-ok { background: var(--success-light); color: var(--success); }
.sc-icon.sc-wait { background: #fffbeb; color: var(--warning); }
.sc-icon.sc-no { background: var(--danger-light); color: var(--danger); }

@media (max-width: 860px) {
  .cm-layout { grid-template-columns: 1fr; }
  .cm-summary { position: static; }
  .cm-section { padding: 16px; }
  .cm-form-foot .btn { margin-right: 0; width: 100%; justify-content: center; }
}

/* =========================================================
   صفحه محصول (Product Detail)
   ========================================================= */
.bc-current {
  color: var(--text-muted); max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: bottom;
}

.pd { display: block; margin-top: 14px; }
.pd-top {
  display: grid; grid-template-columns: minmax(300px, 430px) 1fr;
  gap: 26px; align-items: start;
}

/* ---------- گالری ---------- */
.pd-gallery { min-width: 0; }
.pd-stage {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(160deg, #f7fafd, #eef4fb);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  display: grid; place-items: center; cursor: zoom-in;
}
.pd-main-img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .35s ease;
}
.pd-stage:hover .pd-main-img { transform: scale(1.04); }

.pd-badges {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.pd-badge {
  font-size: 11px; font-weight: 800; color: #fff;
  padding: 4px 10px; border-radius: 999px;
  background: var(--primary); box-shadow: var(--shadow-sm);
}
.pd-badge.pd-badge-off { background: var(--danger); }
.pd-badge.new { background: var(--success); }
.pd-badge.hot { background: var(--accent); }
.pd-badge.sale { background: var(--danger); }

.pd-zoom {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--text-secondary);
  border: 1px solid var(--border); display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.pd-zoom:hover { color: var(--primary); border-color: var(--primary); }
.pd-zoom .icon { width: 18px; height: 18px; }

.pd-counter {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  background: rgba(15,23,42,.62); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  display: inline-flex; gap: 3px; align-items: center;
}
.pd-counter b { font-weight: 900; }

.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumb {
  width: 68px; height: 68px; padding: 0; overflow: hidden;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: #fff; cursor: pointer; transition: var(--transition);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { border-color: var(--primary-soft); }
.pd-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ---------- ویدیو محصول در صفحه محصول ---------- */
.pd-video {
  margin-top: 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  background: #fff; overflow: hidden;
}
.pd-video-head {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; font-size: 12px; font-weight: 800; color: var(--text);
  background: var(--bg-alt); border-bottom: 1px solid var(--border-light);
}
.pd-video-head .icon { width: 15px; height: 15px; color: var(--primary); }
.pd-video video { display: block; width: 100%; max-height: 340px; background: #000; }
.pd-video-frame { position: relative; padding-top: 56.25%; }
.pd-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pd-video-link { margin: 12px; }

.pd-share {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.pd-share-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-muted); font-weight: 600;
}
.pd-share-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg); border: 1px solid var(--border-light);
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  font-family: inherit;
}
.pd-share-btn:hover { color: var(--primary); border-color: var(--primary-soft); background: var(--primary-light); }
.pd-share-btn .icon { width: 14px; height: 14px; }
.pd-share-btn.tg:hover { color: #0ea5e9; border-color: #bae6fd; background: #f0f9ff; }
.pd-share-btn.wa:hover { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
.pd-share-btn.tw:hover { color: #0f172a; border-color: #cbd5e1; background: #f8fafc; }

/* لینک کوتاه تولیدشده در بلوک اشتراک‌گذاری */
.share-short {
  display: inline-flex; align-items: center; direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.6;
  color: var(--primary-dark); background: var(--primary-light);
  border: 1px dashed var(--primary-soft); border-radius: 6px; padding: 2px 8px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- اطلاعات ---------- */
.pd-info { min-width: 0; display: flex; flex-direction: column; }
.pd-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
.pd-brand {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--primary); font-weight: 700;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  padding: 2px 9px; border-radius: 999px;
}
.pd-brand .icon { width: 13px; height: 13px; }
.pd-cat { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pd-cat:hover { color: var(--primary); }
.pd-cat .icon { width: 13px; height: 13px; }
.pd-sep { color: var(--border); }
.pd-sku { margin-right: auto; font-size: 11px; color: var(--text-muted); }
.pd-sku span { font-family: monospace; }

.pd-title {
  font-size: 22px; font-weight: 800; line-height: 1.65;
  color: var(--text); margin-bottom: 10px;
}

.pd-rate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-stars { display: inline-flex; gap: 1px; }
.pd-stars i { color: #d7dee9; display: inline-flex; }
.pd-stars i.on { color: var(--accent); }
.pd-stars i.on svg { fill: var(--accent); stroke: var(--accent); }
.pd-stars .icon { width: 15px; height: 15px; }
.pd-rate-num { font-size: 13px; font-weight: 900; color: var(--text); }
.pd-rate-count {
  font-size: 11.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); padding: 2px 9px; border-radius: 999px;
}
.pd-rate-count:hover { background: var(--primary-soft); }
.pd-rate-hot {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a;
  padding: 2px 8px; border-radius: 999px;
}

.pd-highlights {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 7px 12px; margin-bottom: 16px;
}
.pd-highlights li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.8;
}
.pd-highlights .icon { width: 13px; height: 13px; color: var(--success); flex-shrink: 0; margin-top: 4px; }

/* ---------- جعبه خرید ---------- */
.pd-buybox {
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 16px; margin-top: auto;
}
.pd-price { margin-bottom: 10px; }
.pd-price-old {
  font-size: 12.5px; color: var(--text-muted); text-decoration: line-through;
  margin-bottom: 2px;
}
.pd-price-old span { font-size: 10.5px; }
.pd-price-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-price-main.pd-price-inquire b { font-size: 20px; color: #b45309; }
.pd-price-main b { font-size: 28px; font-weight: 900; color: var(--text); line-height: 1.2; }
.pd-price-unit { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.pd-price-off {
  background: var(--danger); color: #fff; font-size: 12px; font-weight: 800;
  padding: 3px 9px; border-radius: 8px;
}
.pd-price-save {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--danger);
}
.pd-price-save .icon { width: 13px; height: 13px; }

.pd-stock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; margin-bottom: 12px;
}
.pd-stock .icon { width: 14px; height: 14px; }
.pd-stock.ok { background: var(--success-light); color: #047857; border: 1px solid #a7f3d0; }
.pd-stock.low { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.pd-stock.out { background: var(--danger-light); color: var(--danger); border: 1px solid #fecdd3; }

.pd-buy { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.pd-qty {
  display: inline-flex; align-items: center; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: #fff;
}
.pd-qty button {
  width: 40px; height: 46px; border: none; background: #fff;
  color: var(--text-secondary); display: grid; place-items: center;
}
.pd-qty button:hover { background: var(--primary-light); color: var(--primary); }
.pd-qty input {
  width: 48px; height: 46px; text-align: center; border: none;
  font-size: 15px; font-weight: 800; outline: none; font-family: inherit;
  -moz-appearance: textfield;
}
.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pd-add {
  flex: 1; min-width: 170px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius); font-family: inherit;
  font-size: 14px; font-weight: 800;
  box-shadow: var(--shadow-blue);
}
.pd-add:hover { background: var(--primary-dark); }
.pd-add:disabled { background: var(--text-muted); box-shadow: none; cursor: not-allowed; }

.pd-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-actions form { flex: 1; display: flex; }
.pd-act {
  flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text-secondary);
  white-space: nowrap;
}
.pd-act:hover { color: var(--primary); border-color: var(--primary-soft); background: var(--primary-light); }
.pd-act.on { color: var(--danger); border-color: #fecdd3; background: var(--danger-light); }
.pd-act.on svg { fill: var(--danger); }
.pd-act .icon { width: 16px; height: 16px; }

/* ---------- فروشنده ---------- */
.pd-seller {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 10px 12px; margin-top: 12px; background: #fff;
}
.pd-seller-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; font-size: 15px; font-weight: 800;
}
.pd-seller-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pd-seller-label { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.pd-seller-body b { font-size: 12.5px; font-weight: 800; color: var(--text); }
.pd-seller-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--text-muted);
}
.pd-seller-meta .icon { width: 12px; height: 12px; }
.pd-seller-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: #047857;
  background: var(--success-light); border: 1px solid #a7f3d0;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.pd-seller-badge .icon { width: 13px; height: 13px; }

/* ---------- تحویل و گارانتی ---------- */
.pd-delivery {
  list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 14px;
}
.pd-delivery li { display: flex; align-items: flex-start; gap: 9px; }
.pd-dl-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--primary-light); color: var(--primary);
}
.pd-dl-icon .icon { width: 17px; height: 17px; }
.pd-delivery b { display: block; font-size: 12px; font-weight: 800; color: var(--text); }
.pd-delivery span { font-size: 11px; color: var(--text-muted); line-height: 1.8; }

/* ---------- تب‌ها ---------- */
.pd-tabs {
  margin-top: 26px; background: var(--card);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.pd-tabnav {
  display: flex; gap: 4px; padding: 8px;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto; scrollbar-width: none;
}
.pd-tabnav::-webkit-scrollbar { display: none; }
.pd-tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 10px 16px; border: none; border-radius: var(--radius);
  background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: 13px; font-weight: 700;
}
.pd-tab .icon { width: 15px; height: 15px; }
.pd-tab:hover { background: var(--bg); color: var(--primary); }
.pd-tab.active { background: var(--primary-light); color: var(--primary); }
.pd-tab-num {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  background: var(--bg); color: var(--text-muted);
  font-size: 10.5px; font-weight: 800;
}
.pd-tab.active .pd-tab-num { background: #fff; color: var(--primary); }

.pd-panel { display: none; padding: 20px; }
.pd-panel.active { display: block; }

.pd-spec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pd-spec-table th {
  width: 190px; text-align: right; vertical-align: top;
  padding: 11px 14px; background: #f8fafc; color: var(--text-muted);
  font-weight: 700; border-bottom: 1px solid var(--border-light);
  border-left: 1px solid var(--border-light);
}
.pd-spec-table td {
  padding: 11px 14px; color: var(--text); border-bottom: 1px solid var(--border-light);
  line-height: 1.9;
}
.pd-spec-table tr:hover th { background: var(--primary-light); color: var(--primary-darker); }
.pd-spec-table a { color: var(--primary); font-weight: 700; }
.pd-inline-ok { display: inline-flex; align-items: center; gap: 4px; color: #047857; font-weight: 700; }
.pd-inline-out { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-weight: 700; }
.pd-inline-ok .icon, .pd-inline-out .icon { width: 13px; height: 13px; }

.pd-desc h3 { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.pd-desc p { font-size: 13.5px; line-height: 2.1; color: var(--text-secondary); margin-bottom: 16px; }
.pd-desc h4 {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 10px;
}
.pd-desc h4 .icon { width: 16px; height: 16px; color: var(--success); }
/* متن توضیحات با همان رندر مقاله نمایش داده می‌شود؛ تیترها و لیست‌ها باید
   با فاصله‌های خودشان بنشینند، نه مثل تیتر درون‌خطیِ «نکات کلیدی». */
.pd-desc .article-h { display: block; margin: 20px 0 10px; }
.pd-desc ul.article-list { margin: 0 0 16px; padding-inline-start: 22px; }
.pd-desc ul.article-list li {
  font-size: 13.5px; line-height: 2; color: var(--text-secondary); margin-bottom: 5px;
}
.pd-desc-empty { color: var(--text-muted); }
.pd-feature-list {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.pd-feature-list li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.9;
}
.pd-feature-list .icon { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; margin-top: 4px; }

/* ---------- مقالات مرتبط ---------- */
.pd-articles { display: flex; flex-direction: column; gap: 9px; }
.pd-article {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 10px 12px; background: #fff;
}
.pd-article:hover { border-color: var(--primary-soft); background: var(--primary-light); }
.pd-article-icon {
  width: 54px; height: 54px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--primary-light); color: var(--primary);
}
.pd-article-icon img { width: 100%; height: 100%; object-fit: cover; }
.pd-article-icon .icon { width: 26px; height: 26px; }
.pd-article-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-article-cat { font-size: 10px; font-weight: 800; color: var(--primary); }
.pd-article-body b {
  font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.7;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pd-article-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-muted); }
.pd-article-meta .icon { width: 12px; height: 12px; }
.pd-article > .icon { color: var(--text-muted); width: 16px; height: 16px; flex-shrink: 0; }

.pd-empty { text-align: center; padding: 30px 16px; color: var(--text-muted); }
.pd-empty .icon { width: 30px; height: 30px; opacity: .5; margin-bottom: 8px; }
.pd-empty b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.pd-empty p { font-size: 12px; margin-bottom: 12px; }

.pd-recent-note {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-muted);
}
.pd-recent-note .icon { width: 14px; height: 14px; }

/* ---------- لایت‌باکس ---------- */
.pd-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; padding: 30px;
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(4px);
}
.pd-lightbox img {
  max-width: min(880px, 92vw); max-height: 88vh;
  border-radius: var(--radius-lg); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}
.pd-lb-close {
  position: absolute; top: 20px; left: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: none;
  display: grid; place-items: center;
}
.pd-lb-close:hover { background: rgba(255,255,255,.28); }
body.pd-lb-open { overflow: hidden; }

/* ---------- برچسب ناموجود روی کارت ---------- */
.out-tag {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  background: rgba(15,23,42,.82); color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}
.add-btn:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }

@media (max-width: 900px) {
  .pd-top { grid-template-columns: 1fr; gap: 18px; }
  .pd-stage { max-width: 420px; margin: 0 auto; }
  .pd-thumbs { justify-content: center; }
  .pd-title { font-size: 19px; }
  .pd-price-main b { font-size: 24px; }
  .pd-highlights { grid-template-columns: 1fr; }
  .pd-feature-list { grid-template-columns: 1fr; }
  .pd-spec-table th { width: 120px; padding: 9px 10px; font-size: 11.5px; }
  .pd-spec-table td { padding: 9px 10px; font-size: 11.5px; }
  .pd-panel { padding: 14px; }
  .pd-seller-badge { display: none; }
}

@media (max-width: 560px) {
  .pd-add { min-width: 0; width: 100%; }
  .pd-buy { gap: 8px; }
  .pd-qty { width: 100%; justify-content: space-between; }
  .pd-qty input { flex: 1; }
  .pd-thumb { width: 56px; height: 56px; }
}

/* ---------- لینک فروشگاه فروشنده ---------- */
.pd-seller-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  transition: background .18s, color .18s;
}
.pd-seller-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pd-seller-link .icon { width: 13px; height: 13px; }

/* ---------- نوار فروشنده در صفحه فروشگاه ---------- */
.shop-seller-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  color: var(--primary-dark); border-radius: var(--radius-md);
  padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px;
}
.shop-seller-note .icon { width: 15px; height: 15px; }
.shop-seller-note b { font-weight: 800; }
.shop-seller-note a {
  margin-right: auto; font-size: 11.5px; font-weight: 700;
  color: var(--primary-dark); background: #fff; border: 1px solid var(--primary-soft);
  padding: 4px 10px; border-radius: 999px;
}
.shop-seller-note a:hover { background: var(--primary); color: #fff; }

.shop-sort { margin-right: auto; cursor: pointer; }
.shop-count {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px;
}
.shop-count .icon { width: 13px; height: 13px; color: var(--success); }

@media (max-width: 640px) {
  .pd-seller { flex-wrap: wrap; }
  .pd-seller-link { width: 100%; justify-content: center; }
  .shop-sort { margin-right: 0; width: 100%; }
}

/* ---------- نوار خرید چسبان ---------- */
.pd-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px;
  padding: 10px max(16px, calc((100vw - 1200px) / 2));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 26px rgba(15, 23, 42, .10);
  animation: pdStickyIn .22s ease;
}
@keyframes pdStickyIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

.pd-sticky-img {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--border-light); background: #fff;
}
.pd-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pd-sticky-info b {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-sticky-price {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--primary-dark);
}
.pd-sticky-price small { font-size: 10.5px; font-weight: 500; color: var(--text-muted); }
.pd-sticky-off {
  font-size: 10px; font-style: normal; font-weight: 700; color: #fff;
  background: var(--danger); border-radius: 999px; padding: 1px 7px;
}
.pd-sticky-form { display: contents; }
.pd-sticky .pd-add { min-width: 190px; }

body.pd-sticky-on { padding-bottom: 74px; }

@media (max-width: 640px) {
  .pd-sticky { padding: 8px 12px; gap: 9px; }
  .pd-sticky-img { display: none; }
  .pd-sticky .pd-add { min-width: 0; padding: 0 14px; font-size: 12.5px; }
  .pd-sticky-info b { font-size: 11.5px; }
}

/* ---------- هشدار موجودی در سبد خرید ---------- */
.cart-stock-warn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; font-size: 10.5px; font-weight: 600;
  color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
  padding: 2px 8px; border-radius: 999px;
}
.cart-stock-warn .icon { width: 12px; height: 12px; }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }

/* ================= مدیریت محصولات (پنل فروشنده) ================= */

.prod-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.prod-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; background: #fff;
  border: 1px solid var(--border-light); border-radius: var(--radius);
  transition: var(--transition);
}
.prod-stat:hover { border-color: var(--primary-soft); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.prod-stat.on { border-color: var(--primary); background: var(--primary-light); box-shadow: var(--shadow-sm); }
.prod-stat.static { cursor: default; }
.prod-stat.static:hover { transform: none; box-shadow: none; border-color: var(--border-light); }
.prod-stat b { display: block; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.25; }
.prod-stat small { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.ps-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
}
.ps-icon .icon { width: 18px; height: 18px; }
.ps-icon.all { background: var(--primary-light); color: var(--primary); }
.ps-icon.ok { background: var(--success-light); color: var(--success); }
.ps-icon.low { background: #fffbeb; color: #b45309; }
.ps-icon.out { background: var(--danger-light); color: var(--danger); }
.ps-icon.val { background: #f5f3ff; color: #7c3aed; }

.prod-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.pt-search {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 180px; height: 38px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 11px;
}
.pt-search .icon { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.pt-search input {
  border: 0; outline: 0; background: transparent; width: 100%; height: 100%;
  font-family: inherit; font-size: 12.5px; color: var(--text);
}
.pt-select {
  height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font-family: inherit; font-size: 12px; color: var(--text);
  padding: 0 9px; cursor: pointer;
}
.pt-go { height: 38px; padding: 0 14px; font-size: 12px; }
.pt-clear {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--danger);
}
.pt-clear:hover { text-decoration: underline; }
.prod-count {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
}
.prod-count .icon { width: 13px; height: 13px; color: var(--success); }
.prod-count span { color: var(--text-muted); }

.prod-table th { white-space: nowrap; }
.prod-cell { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.prod-thumb {
  width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
  object-fit: cover; background: #f7fafd; border: 1px solid var(--border-light);
}
.prod-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prod-name {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-name:hover { color: var(--primary); }
.prod-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-muted); }
.prod-sub i { font-style: normal; opacity: .55; }
.prod-badge { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.prod-badge.b-new { background: var(--primary-light); color: var(--primary); }
.prod-badge.b-sale { background: var(--danger-light); color: var(--danger); }
.prod-badge.b-hot { background: #fffbeb; color: #b45309; }

.prod-cat {
  font-size: 11px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border-light); color: var(--text-secondary);
}
.prod-price { display: flex; flex-direction: column; gap: 1px; }
.prod-price b { font-size: 12.5px; font-weight: 800; color: var(--text); }
.prod-price s { font-size: 10.5px; color: var(--text-muted); }
.prod-price em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--danger); }

.prod-stock-form {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff;
}
.prod-stock-input {
  width: 54px; height: 30px; border: 0; outline: 0; text-align: center;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text);
  -moz-appearance: textfield;
}
.prod-stock-input::-webkit-outer-spin-button,
.prod-stock-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prod-stock-form button {
  width: 28px; height: 30px; border: 0; border-inline-start: 1px solid var(--border);
  background: var(--bg); color: var(--text-secondary); cursor: pointer;
  display: grid; place-items: center;
}
.prod-stock-form button:hover { background: var(--primary); color: #fff; }
.prod-stock-form button .icon { width: 13px; height: 13px; }

.prod-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.prod-pill.ok { background: var(--success-light); color: #047857; border: 1px solid #a7f3d0; }
.prod-pill.low { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.prod-pill.out { background: var(--danger-light); color: var(--danger); border: 1px solid #fecdd3; }
.prod-rate { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: #b45309; }

/* ---------- فرم محصول ---------- */
.pf-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.pf-head h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.pf-head h2 .icon { width: 20px; height: 20px; color: var(--primary); }
.pf-head p { font-size: 12px; color: var(--text-muted); margin: 0; }
.pf-head-actions { display: flex; gap: 8px; }
.pf-alert {
  display: flex; align-items: center; gap: 8px;
  background: var(--danger-light); border: 1px solid #fecdd3; color: var(--danger);
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; margin-bottom: 14px;
}
.pf-alert .icon { width: 16px; height: 16px; flex-shrink: 0; }

.pf-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 18px; }
.pf-card h3 {
  font-size: 13.5px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 7px; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-light);
}
.pf-card h3 .icon { width: 17px; height: 17px; color: var(--primary); }
.pf-card .field:last-child { margin-bottom: 0; }
/* چک‌باکس داخل برچسب: .field input عرض ۱۰۰٪ می‌گیرد و متن را به ستون باریک
   می‌راند؛ اینجا فقط چک‌باکس اندازهٔ خودش را دارد. */
.pf-card .pf-check {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 0; font-weight: 600; cursor: pointer;
}
.pf-card .pf-check input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 18px; padding: 0; margin-top: 2px;
  border: 0; accent-color: var(--primary); cursor: pointer;
}
.pf-card .pf-check span { font-size: 12px; line-height: 1.85; color: var(--text-secondary); }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req { color: var(--danger); font-weight: 800; }
.pf-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.pf-hint { font-size: 10.5px; color: var(--text-muted); line-height: 1.9; display: block; margin-top: 4px; }
.pf-hint.ok { color: #047857; }
.pf-hint.low { color: #b45309; }
.pf-hint.out { color: var(--danger); }
.pf-discount {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--danger);
  background: var(--danger-light); border: 1px solid #fecdd3;
  padding: 7px 11px; border-radius: var(--radius-sm); margin-bottom: 14px;
}
.pf-discount .icon { width: 14px; height: 14px; }
.pf-spec-preview { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pf-spec-preview li {
  font-size: 10.5px; background: var(--bg); border: 1px solid var(--border-light);
  border-radius: 999px; padding: 3px 9px; color: var(--text-secondary);
}

.pf-img {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 10px;
  border: 1px dashed var(--border); border-radius: var(--radius); background: #f8fafc;
}
.pf-img img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.pf-img-tag {
  position: absolute; top: 8px; inset-inline-start: 8px;
  font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--success-light); color: #047857; border: 1px solid #a7f3d0;
}
.pf-img-tag.gen { background: var(--primary-light); color: var(--primary); border-color: var(--primary-soft); }
.pf-img-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pf-img-actions .btn { padding: 7px 11px; font-size: 11.5px; }
.pf-url-row { margin-bottom: 8px; }
.pf-err { font-size: 11.5px; color: var(--danger); font-weight: 600; margin-top: 6px; }
.pf-err[hidden] { display: none; }

/* ---------- گالری تصاویر محصول ---------- */
.pf-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-inline-start: 4px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary);
  font-size: 11px; font-weight: 800;
}
.pf-gallery { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.pf-gallery:empty { display: none; }
.pf-gthumb {
  position: relative; width: 62px; height: 62px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: #f8fafc;
}
.pf-gthumb.main { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.pf-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-gthumb-badge {
  position: absolute; bottom: 0; inset-inline-start: 0; inset-inline-end: 0;
  background: var(--primary); color: #fff; text-align: center;
  font-size: 9px; font-weight: 700; padding: 1px 0;
}
.pf-gthumb-act {
  position: absolute; top: 2px; width: 17px; height: 17px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: none; border-radius: 50%; font-size: 11px; line-height: 1;
  background: rgba(15, 23, 42, .62); color: #fff;
  transition: background .15s;
}
.pf-gthumb-act:hover { background: var(--primary); }
.pf-gthumb-act.star { inset-inline-start: 2px; }
.pf-gthumb-act.del { inset-inline-end: 2px; }
.pf-gthumb-act.del:hover { background: var(--danger); }

/* ---------- ویدیو محصول ---------- */
.pf-video { margin-bottom: 10px; border-radius: var(--radius); overflow: hidden; background: #0f172a; }
.pf-video[hidden] { display: none; }
.pf-video video { display: block; width: 100%; max-height: 240px; }
.pf-video-link {
  display: flex; align-items: center; gap: 6px;
  background: #f8fafc; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 8px 11px; margin-bottom: 10px;
  font-size: 11px; color: var(--text-secondary);
  word-break: break-all;
}
.pf-video-link[hidden] { display: none; }
.pf-video-link .icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--primary); }

/* ---------- خلاصهٔ خطاهای فرم ---------- */
.pf-alert { align-items: flex-start; }
.pf-alert-body { flex: 1; min-width: 0; }
.pf-alert-body b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.pf-alert-body ul { margin: 0; padding-inline-start: 16px; }
.pf-alert-body li { font-size: 11.5px; font-weight: 500; line-height: 1.9; }

.pf-emoji input { margin-bottom: 8px; }
.pf-emoji-picks { display: flex; flex-wrap: wrap; gap: 5px; }
.pf-emoji-picks button {
  width: 30px; height: 30px; border: 1px solid var(--border-light); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 15px; line-height: 1;
  transition: var(--transition);
}
.pf-emoji-picks button:hover { border-color: var(--primary); background: var(--primary-light); }

.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-badge-opt input { display: none; }
.pf-badge-opt span {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); color: var(--text-secondary); background: #fff;
  transition: var(--transition);
}
.pf-badge-opt span:hover { border-color: var(--primary-soft); }
.pf-badge-opt input:checked + span {
  border-color: var(--primary); background: var(--primary-light); color: var(--primary);
}

.pf-summary .pf-mini {
  display: flex; gap: 10px; align-items: center; padding: 10px;
  border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--bg);
}
.pf-mini-thumb {
  width: 58px; height: 58px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border-light); display: grid; place-items: center;
}
.pf-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-mini-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-mini-brand { font-size: 9.5px; color: var(--text-muted); }
.pf-mini-name {
  font-size: 12px; font-weight: 700; color: var(--text);
  max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-mini-price { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--primary-dark); }
.pf-mini-price small { font-size: 9.5px; font-weight: 500; color: var(--text-muted); }
.pf-mini-price em {
  font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff;
  background: var(--danger); padding: 0 6px; border-radius: 999px;
}
.pf-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border-light);
}

@media (max-width: 980px) {
  .pf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prod-stats { grid-template-columns: repeat(2, 1fr); }
  .pf-row { grid-template-columns: 1fr; }
  .pf-card { padding: 14px; }
  .pf-head-actions { width: 100%; }
  .pf-head-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- تضمین خوانایی دکمه اصلی ----------
   بعضی بلوک‌ها (مثل .section-head، .panel-side، .cmm-target) رنگ لینک‌های داخل
   خود را آبی می‌کنند و متن دکمه را روی پس‌زمینه آبی ناپدید می‌کنند. */
a.btn-primary,
button.btn-primary,
.btn.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:visited {
  color: #fff;
}
a.btn-primary .icon,
button.btn-primary .icon,
.btn.btn-primary .icon { color: currentColor; }

/* استثنای هدر اصلی: روی پس‌زمینه تیره، دکمه سفید با متن تیره است */
.hero a.btn-primary,
.hero .btn-primary { color: var(--primary-darker); }

a.btn-danger:hover,
button.btn-danger:hover { color: #fff; }

/* ============================================================
   تسویه حساب / پرداخت (Checkout)
   ============================================================ */
.ck-steps {
  display: flex; align-items: center; gap: 10px; list-style: none;
  margin: 0 0 20px; padding: 0; flex-wrap: wrap;
}
.ck-steps li {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px 7px 8px;
  font-size: 12.5px; color: var(--text-muted);
}
.ck-steps li .n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-alt); color: var(--text-muted); font-size: 11.5px; font-weight: 700;
}
.ck-steps li b { font-weight: 700; }
.ck-steps li.done { color: var(--success); border-color: #bbf7d0; background: var(--success-light); }
.ck-steps li.done .n { background: var(--success); color: #fff; }
.ck-steps li.active { color: var(--primary-dark); border-color: var(--primary-soft); background: var(--primary-light); }
.ck-steps li.active .n { background: var(--primary); color: #fff; }
.ck-steps li + li::before { content: none; }

.ck-alert {
  margin-bottom: 18px; align-items: flex-start;
  scroll-margin-top: 100px;
}
.ck-alert > .icon { flex: none; margin-top: 3px; }
.ck-alert ul { margin: 6px 0 0; padding-inline-start: 18px; }
.ck-alert li { font-size: 12.5px; line-height: 1.9; }
.ck-alert li::marker { color: #f43f5e; }
.ck-alert b { font-weight: 800; }
.ck-alert-jump {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; font-size: 11.5px; font-weight: 800;
  color: #be123c; text-decoration: underline; text-underline-offset: 3px;
}
.ck-alert-jump .icon { width: 13px; height: 13px; }
.ck-alert:focus { outline: none; }

/* ---------- دکمهٔ اصلی «پرداخت و ثبت سفارش» ----------
   این دکمه در سبد خرید و تسویه حساب استفاده می‌شود. قاعدهٔ سراسری اینجاست
   تا در هر دو صفحه یکسان دیده شود (قبلاً فقط داخل .cart-summary استایل داشت
   و در صفحهٔ تسویه حساب به شکل دکمهٔ خاکستری پیش‌فرض مرورگر رندر می‌شد). */
.checkout-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; padding: 13px 20px;
  border: 0; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #12b981 0%, #059669 100%);
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 800;
  line-height: 1.5; letter-spacing: -.1px; cursor: pointer;
  text-decoration: none; /* دکمه‌های <a> در سبد خرید */
  box-shadow: 0 10px 22px -8px rgba(16, 185, 129, .65);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.checkout-btn .icon { width: 18px; height: 18px; flex: none; }
.ck-btn-inner { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.checkout-btn:hover:not(:disabled) {
  filter: brightness(1.05); transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(16, 185, 129, .72);
}
.checkout-btn:active:not(:disabled) { transform: translateY(0); }
.checkout-btn:focus-visible { outline: 3px solid rgba(16, 185, 129, .4); outline-offset: 3px; }
.checkout-btn:disabled { cursor: progress; box-shadow: none; filter: grayscale(.2); }
/* حالت «در حال ارسال»: اسپینر + متن، بدون قفل‌شدن دائمی */
.checkout-btn .ck-spin {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: ckSpin .7s linear infinite;
}
@keyframes ckSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .checkout-btn { transition: none; }
  .checkout-btn .ck-spin { animation-duration: 2s; }
}

.ck-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px; align-items: start;
}
.ck-main { display: flex; flex-direction: column; gap: 16px; }
.ck-side { position: sticky; top: 90px; }

.ck-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 18px 18px 20px;
  box-shadow: var(--shadow-sm);
}
.ck-card h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light); color: var(--text);
}
.ck-card h3 .icon { color: var(--primary); }
.ck-optional { font-size: 11px; font-weight: 500; color: var(--text-muted); }

.ck-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ck-row .field { margin-bottom: 14px; }
.ck-card .field:last-child { margin-bottom: 0; }
.ck-check-field { display: flex; flex-direction: column; justify-content: center; }

.ck-saved { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.ck-saved-label { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.ck-addr {
  border: 1px dashed var(--border); background: var(--bg);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px;
  color: var(--text-secondary); cursor: pointer; transition: var(--transition);
  display: inline-flex; align-items: center; gap: 5px;
}
.ck-addr:hover, .ck-addr.active {
  border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark);
}
.ck-addr .icon { width: 13px; height: 13px; }

.ck-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--text-secondary); cursor: pointer; line-height: 1.8;
}
.ck-check input { width: 16px; height: 16px; accent-color: var(--primary); margin-top: 3px; }
.ck-check a { color: var(--primary); text-decoration: none; }
.ck-check a:hover { text-decoration: underline; }
.ck-terms { margin-top: 14px; }

/* روش ارسال */
.ck-ship { display: flex; flex-direction: column; gap: 10px; }
.ck-ship-item {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; transition: var(--transition);
  background: var(--card);
}
.ck-ship-item:hover { border-color: var(--primary-soft); background: var(--primary-light); }
.ck-ship-item.active { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px rgba(12,132,252,.08); }
.ck-ship-item input { margin-top: 4px; accent-color: var(--primary); }
.ck-ship-body { flex: 1; min-width: 0; }
.ck-ship-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ck-ship-top b { font-size: 13px; }
.ck-ship-cost { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ck-ship-cost.free { color: var(--success); }
.ck-ship-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; font-size: 11.5px; color: var(--text-muted); }
.ck-ship-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ck-hint {
  display: flex; align-items: center; gap: 6px; margin: 12px 0 0;
  font-size: 12px; color: var(--primary-dark); background: var(--primary-light);
  border: 1px solid var(--primary-soft); border-radius: var(--radius); padding: 9px 12px;
}

/* روش پرداخت */
.ck-pay {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--primary); background: var(--primary-light);
  border-radius: var(--radius); padding: 14px; box-shadow: 0 0 0 3px rgba(12,132,252,.08);
}
.ck-pay input { margin-top: 4px; accent-color: var(--primary); }
.ck-pay-body { display: flex; gap: 12px; align-items: center; }
.ck-pay-body b { font-size: 13px; display: block; }
.ck-pay-body p { margin: 3px 0 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.8; }
.ck-pay-logo {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 9px 12px; border-radius: 10px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(245,158,11,.28);
}

/* خلاصه سفارش */
.ck-summary h3 { margin-bottom: 14px; }
.ck-items {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 320px; overflow-y: auto; padding-bottom: 12px;
  margin-bottom: 12px; border-bottom: 1px dashed var(--border);
}
.ck-item { display: flex; gap: 10px; align-items: center; }
.ck-item img {
  width: 46px; height: 46px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--border-light); background: var(--bg); flex: 0 0 auto;
}
.ck-item-info { flex: 1; min-width: 0; }
.ck-item-info b {
  display: block; font-size: 12px; font-weight: 700; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-item-qty { font-size: 11px; color: var(--text-muted); }
.ck-item-price { font-size: 12px; font-weight: 700; white-space: nowrap; }

.ck-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--text-secondary); padding: 5px 0;
}
.ck-total-row.grand {
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 14px; font-weight: 800; color: var(--text);
}
.ck-total-row.grand span:last-child { color: var(--primary-dark); font-size: 16px; }

.ck-summary .checkout-btn { width: 100%; margin-top: 16px; }
.ck-secure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px 0 0; font-size: 11px; color: var(--text-muted); text-align: center;
  line-height: 1.8;
}
.ck-secure .icon { flex: none; }

/* نتیجهٔ پرداخت */
.ck-result {
  max-width: 780px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 34px 28px; box-shadow: var(--shadow-md); text-align: center;
}
.ck-result-icon {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 18px;
}
.ck-result-icon.ok { background: var(--success-light); color: var(--success); border: 1px solid #bbf7d0; }
.ck-result-icon.fail { background: var(--danger-light); color: var(--danger); border: 1px solid #fecdd3; }
.ck-result-icon.warn { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.ck-result h1 { font-size: 20px; margin: 0 0 8px; }
.ck-result-sub { font-size: 13px; color: var(--text-secondary); line-height: 2; margin: 0 auto 22px; max-width: 560px; }
.ck-result-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; text-align: right; margin: 0 auto 22px; max-width: 640px;
}
.ck-result-grid > div {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 11px 13px;
}
.ck-result-grid span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.ck-result-grid b { font-size: 13px; word-break: break-all; }
.ck-result-addr {
  text-align: right; background: var(--primary-light); border: 1px solid var(--primary-soft);
  border-radius: var(--radius); padding: 14px 16px; margin: 0 auto 22px; max-width: 640px;
}
.ck-result-addr h3 { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 0 0 8px; color: var(--primary-dark); }
.ck-result-addr p { margin: 0; font-size: 12.5px; line-height: 2; color: var(--text-secondary); }
.ck-muted { color: var(--text-muted); font-size: 12px; }
.ck-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.ck-result-note {
  display: flex; align-items: flex-start; gap: 7px; justify-content: center;
  font-size: 11.5px; color: var(--text-muted); line-height: 1.9; margin: 0;
  border-top: 1px solid var(--border-light); padding-top: 16px;
}

/* نشان وضعیت پرداخت */
.pay-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
}
.pay-pill.paid { background: var(--success-light); color: #047857; border-color: #a7f3d0; }
.pay-pill.unpaid { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pay-pill.failed { background: var(--danger-light); color: #be123c; border-color: #fecdd3; }
.pay-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.pay-hint.ok { color: var(--success); }

.od-pay {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.od-pay > div { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 11px 13px; }
.od-pay span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.od-pay b { font-size: 12.5px; }

/* ---------- جزئیات سفارش (تکمیل‌شده) ---------- */
.od-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.od-head h2 { margin: 0; }
.od-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.od-badges {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-light);
}
.od-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-muted);
}
.od-meta .icon { width: 15px; height: 15px; }
.od-invoice b { color: var(--text-secondary); font-family: ui-monospace, monospace; }

.od-steps {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 20px 0 26px; flex-wrap: wrap;
}
.od-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 62px; }
.od-dot {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-alt); color: var(--text-muted);
}
.od-dot.done { background: var(--primary); color: #fff; }
.od-step-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.od-step-label.done { color: var(--text); }
.od-step-date { font-size: 10.5px; color: var(--text-muted); }
.od-bar {
  flex: 1; min-width: 20px; height: 3px; border-radius: 2px;
  background: var(--border); margin-top: 16px;
}
.od-bar.done { background: var(--primary); }

.od-pname { font-weight: 700; color: var(--text); text-decoration: none; display: block; }
.od-pname:hover { color: var(--primary); }
.od-psku { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.od-pseller {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted); margin-top: 3px;
}
.od-pseller .icon { width: 12px; height: 12px; }

.od-totals {
  margin-top: 14px; padding: 14px 16px;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  border-radius: var(--radius);
}
.od-totals .row {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 12.5px; color: var(--text-secondary); padding: 4px 0;
}
.od-totals .row b { color: var(--text); font-variant-numeric: tabular-nums; }
.od-totals .row.free b { color: var(--success); }
.od-totals .row.grand {
  border-top: 1px solid var(--primary-soft); margin-top: 6px; padding-top: 9px;
  font-size: 14px; font-weight: 800; color: var(--text);
}
.od-totals .row.grand b { font-size: 18px; color: var(--primary-dark); }

.od-note, .od-address {
  font-size: 13px; color: var(--text-secondary); line-height: 1.95;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 14px 16px;
}
.od-note { border-right: 3px solid var(--accent); }

.od-ship {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.od-ship > div {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 11px 13px;
}
.od-ship span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.od-ship b { font-size: 12.5px; }
.od-track {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: #fff; border: 1px dashed var(--primary-soft);
  font-family: ui-monospace, monospace; color: var(--primary-dark);
}
.od-muted { color: var(--text-muted); font-weight: 500; font-size: 11.5px; }

@media (max-width: 700px) {
  .od-head { flex-direction: column; align-items: flex-start; }
  .od-steps { gap: 2px; }
  .od-step { min-width: 54px; }
  .od-dot { width: 28px; height: 28px; }
  .od-bar { margin-top: 13px; }
}

/* ---------- سفارش‌های دریافتی فروشنده ---------- */
.so-head { margin-bottom: 16px; }
.so-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.so-card {
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 16px 18px; margin-bottom: 14px; background: #fff;
  box-shadow: var(--shadow-sm);
}

.so-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-light);
}
.so-id { display: flex; align-items: center; gap: 9px; }
.so-id strong { font-size: 15px; }
.so-meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.so-meta span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-muted);
}
.so-meta .icon { width: 14px; height: 14px; }
.so-track b { font-family: ui-monospace, monospace; color: var(--primary-dark); }
.so-amount { text-align: left; }
.so-amount span { display: block; font-size: 11px; color: var(--text-muted); }
.so-amount strong { font-size: 16px; color: var(--primary-dark); }

.so-buyer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 14px; margin: 12px 0 4px;
}
.so-buyer > div {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 8px 11px;
}
.so-buyer span { display: block; font-size: 10.5px; color: var(--text-muted); margin-bottom: 2px; }
.so-buyer b { font-size: 12.5px; }

.so-note {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.9;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius);
  padding: 9px 12px; margin: 8px 0;
}
.so-note .icon { width: 14px; height: 14px; margin-top: 4px; flex-shrink: 0; color: #b45309; }

.so-pname { font-weight: 700; color: var(--text); text-decoration: none; display: block; }
.so-pname:hover { color: var(--primary); }
.so-sku { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.so-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light);
}
.so-track-form { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: 1; min-width: 240px; }
.so-track-form input {
  flex: 1; min-width: 150px; padding: 9px 12px; font-size: 12.5px;
  font-family: var(--font); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
}
.so-track-form input:focus { outline: none; border-color: var(--primary); background: #fff; }
.so-track-form .btn, .so-actions .btn { padding: 9px 15px; font-size: 12.5px; }

.so-status-form {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-light);
}
.so-status-form label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.so-status-form .chip {
  border: 1px solid var(--border); cursor: pointer; background: #fff;
  padding: 7px 11px; border-radius: var(--radius-sm); font-family: var(--font); font-size: 12.5px;
}
.so-status-form .btn { padding: 9px 15px; font-size: 12.5px; }
.so-date {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-muted);
}
.so-date .icon { width: 13px; height: 13px; }

@media (max-width: 700px) {
  .so-top { flex-direction: column; align-items: flex-start; }
  .so-amount { text-align: right; }
}

@media (max-width: 900px) {
  .ck-layout { grid-template-columns: 1fr; }
  .ck-side { position: static; }
  .ck-row { grid-template-columns: 1fr; gap: 0; }
  .ck-result { padding: 24px 16px; }
}
.ck-result-grid b.ck-pan { white-space: nowrap; letter-spacing: .4px; font-size: 12.5px; }

/* =========================================================
   حساب کاربری — ورود و ثبت‌نام دو روشی
   ========================================================= */
.ltr { direction: ltr; text-align: left; unicode-bidi: isolate; }
.field input.ltr { font-family: ui-monospace, "SFMono-Regular", "Vazirmatn", monospace; letter-spacing: .3px; }
.field-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.9; }
.opt { font-weight: 600; color: var(--text-muted); font-size: 11px; }

.auth-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  color: var(--primary-darker); border-radius: var(--radius);
  padding: 13px 15px; font-size: 12.8px; line-height: 1.95; margin-bottom: 16px;
}
.auth-note .icon { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; margin-top: 3px; }
.auth-note b { color: var(--primary-dark); }

.otp-boxes { display: flex; direction: ltr; gap: 8px; justify-content: center; margin: 4px 0 8px; }
.otp-boxes input {
  width: 100%; max-width: 54px; height: 56px; text-align: center;
  font-size: 21px; font-weight: 800; color: var(--text);
  border: 2px solid var(--border-light); border-radius: var(--radius);
  background: #fff; outline: none; transition: var(--transition);
  font-family: ui-monospace, "SFMono-Regular", monospace;
}
.otp-boxes input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(12, 132, 252, .1);
}
.otp-boxes input.filled { border-color: var(--primary-soft); background: var(--primary-light); color: var(--primary-dark); }

.otp-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 14px; font-size: 12.3px; font-weight: 600; flex-wrap: wrap;
}
.otp-actions a { color: var(--primary); display: inline-flex; align-items: center; gap: 5px; }
.otp-actions a:hover { text-decoration: underline; }
.otp-actions a .icon, .linkish .icon { width: 14px; height: 14px; }

/* شمارش معکوس اعتبار کد یک‌بار مصرف */
#otpExpiryNote.is-expired { background: #fff5f5; border-color: #f0b4b4; color: #8a1c1c; }
#otpExpiryValue.is-expired { color: #b91c1c; }
.otp-expired-msg { margin-top: 6px; font-size: 12px; font-weight: 700; color: #b91c1c; }
.linkish {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--primary); font-size: 12.3px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.linkish:hover:not(:disabled) { text-decoration: underline; }
.linkish:disabled, .linkish.counting { color: var(--text-muted); cursor: not-allowed; }

.pwd-wrap { position: relative; }
.pwd-wrap input { padding-left: 46px; }
.pwd-eye {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer; color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  transition: var(--transition);
}
.pwd-eye:hover { background: var(--primary-light); color: var(--primary); }
.pwd-eye.on { color: var(--primary); }
.pwd-eye .icon { width: 17px; height: 17px; }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; font-size: 12.3px; font-weight: 600; flex-wrap: wrap;
}
.auth-row a { color: var(--primary); }
.auth-row a:hover { text-decoration: underline; }

.check-inline, .check-block {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; line-height: 1.9;
}
.check-inline input, .check-block input {
  width: 16px; height: 16px; margin-top: 3px; accent-color: var(--primary); flex-shrink: 0;
}
.check-block { margin: 4px 0 2px; }
.check-block a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px; color: var(--text-muted); font-size: 11.5px; font-weight: 600;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border-light);
}

.btn-outline {
  background: #fff; color: var(--primary);
  border: 2px solid var(--primary-soft); box-shadow: none;
}
.btn-outline:hover { background: var(--primary-light); border-color: var(--primary); transform: translateY(-1px); }
.btn-sm { padding: 9px 15px; font-size: 12px; }

.auth-steps { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.auth-step {
  flex: 1; min-width: 92px; text-align: center;
  font-size: 10.8px; font-weight: 700; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: 999px; padding: 6px 8px;
}
.auth-step.done { background: var(--primary-light); color: var(--primary); border-color: var(--primary-soft); }

/* پنل — سربرگ و کارت‌های حساب کاربری */
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.panel-head h2 { margin-bottom: 0; }
.card-box {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 20px;
}
.account-meta { margin-top: 22px; display: grid; gap: 9px; }
.meta-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.9;
}
.meta-row .icon { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.meta-row b { color: var(--text); font-weight: 700; }

@media (max-width: 480px) {
  .otp-boxes { gap: 6px; }
  .otp-boxes input { max-width: 46px; height: 50px; font-size: 18px; }
  .auth-row { justify-content: flex-start; }
  .otp-actions { font-size: 11.5px; }
}

/* پروفایل — کارت هویت و نشان‌ها */
.profile-hero {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px; background: linear-gradient(135deg, var(--primary-light), #fff);
  border: 1px solid var(--primary-soft); border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-blue);
}
.profile-avatar .icon { width: 26px; height: 26px; }
.profile-id { flex: 1; min-width: 150px; }
.profile-name { font-weight: 800; font-size: 15px; color: var(--text); }
.profile-login { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.profile-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: #fff; color: var(--text-secondary); border: 1px solid var(--border);
}
.pill .icon { width: 13px; height: 13px; }
.pill.ok { background: var(--success-light); color: #047857; border-color: #a7f3d0; }
.pill.warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.meta-link { color: var(--primary); font-weight: 700; font-size: 12.5px; text-decoration: underline; }

/* آزمایش سرویس پیامک و ایمیل */
.delivery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.delivery-card {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 18px;
}
.delivery-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 12px;
}
.delivery-head .icon { width: 18px; height: 18px; color: var(--primary); }
.delivery-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 14px; flex-wrap: wrap;
}
.delivery-status b { color: var(--text); }
.delivery-card .alert-success, .delivery-card .alert-error { font-size: 12px; padding: 10px 13px; }

/* =========================================================
   اعتبارسنجی فرم‌ها (سمت کلاینت)
   ========================================================= */
.field input.input-invalid,
.field select.input-invalid,
.field textarea.input-invalid,
.field input.input-validation-error,
.field select.input-validation-error,
.field textarea.input-validation-error {
  border-color: var(--danger);
  background: #fffafa;
}
.field input.input-invalid:focus,
.field select.input-invalid:focus,
.field textarea.input-invalid:focus {
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .09);
}
.field .field-validation-error,
.field .text-danger {
  display: block;
  color: var(--danger);
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.8;
}
.field .field-validation-valid { display: none; }
.field .req { color: var(--danger); font-weight: 800; margin-inline-start: 2px; }
.field .char-count {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.field .char-count.near { color: var(--warning); }
.check-block .field-validation-error { margin-top: 4px; }
.btn.is-loading { opacity: .65; pointer-events: none; }

/* =========================================================
   یادداشت «نوع حساب» در ثبت‌نام
   ========================================================= */
.account-type-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  margin: 2px 0 16px;
  border-radius: var(--radius);
  background: var(--primary-light);
  border: 1px solid var(--primary-soft);
  font-size: 12px;
  line-height: 2.1;
  color: var(--primary-darker);
}
.account-type-note .icon { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; margin-top: 4px; }
.account-type-note b { font-weight: 800; }
.account-type-note a {
  color: var(--primary-dark); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

/* =========================================================
   فرم تماس با ما
   ========================================================= */
.contact-form-title {
  font-size: 18px; font-weight: 800; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.contact-form-title .icon { color: var(--primary); }
.contact-form-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.9; margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-privacy {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-muted); margin: 2px 0 14px;
}
.contact-privacy .icon { width: 14px; height: 14px; color: var(--success); }
.contact-privacy a { color: var(--primary); text-decoration: underline; }
.contact-card a:hover { color: var(--primary); }
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 20px; }
}

/* =========================================================
   پنل مدیر
   ========================================================= */
.panel-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.95; margin: -6px 0 18px; }
.panel-sub b { color: var(--text-secondary); }
.side-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  color: var(--text-muted); padding: 2px 12px 6px; text-transform: uppercase;
}

/* نشان نقش‌های کاربر در سرصفحهٔ سایدبار پنل */
.role-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.role-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(12, 132, 252, .12); color: var(--primary-dark);
}
.role-chip .icon { width: 11px; height: 11px; }
.role-chip.admin { background: #fef3c7; color: #92400e; }
.role-chip.seller { background: #cffafe; color: #0e7490; }
.role-chip.buyer { background: var(--primary-light); color: var(--primary-dark); }

/* ---------- پنل یکپارچه ---------- */
.pn-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.pn-head h2 { margin: 0; }
.pn-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.pn-quick { display: flex; gap: 8px; flex-wrap: wrap; }

.pn-section {
  margin-bottom: 26px; padding-bottom: 4px;
  border-top: 1px solid var(--border-light); padding-top: 18px;
}
.pn-section:first-of-type { border-top: 0; padding-top: 0; }
.pn-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.pn-section-head h3 {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 800; color: var(--text);
}
.pn-section-head h3 .icon { width: 18px; height: 18px; color: var(--primary); }
.pn-section-head > a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--primary); text-decoration: none;
}
.pn-section-head > a:hover { color: var(--primary-dark); }
.pn-section-head > a .icon { width: 14px; height: 14px; }

.pn-actions { display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0; }
.pn-actions .btn { padding: 9px 15px; font-size: 12.5px; }

.pn-row-actions { display: flex; gap: 8px; align-items: center; }
.pn-row-actions a { color: var(--primary); display: inline-flex; }
.pn-row-actions a:hover { color: var(--primary-dark); }

.stat-card.warn .icon-wrap { background: #fef3c7; color: #b45309; }
.stat-card.warn .n { color: #b45309; }

/* ---------- آمار و گزارش پنل ---------- */
.pn-scope {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-soft, #f1f5f9); border: 1px solid var(--border-light);
  border-radius: 999px; padding: 3px 9px;
}
.pn-scope .icon { width: 12px; height: 12px; }

.pn-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 9px; margin-bottom: 14px;
}
.pn-kpi {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 11px;
}
.pn-kpi .k-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--primary-light); color: var(--primary-dark);
}
.pn-kpi .k-ico .icon { width: 15px; height: 15px; }
.pn-kpi .k-txt { min-width: 0; }
.pn-kpi b {
  display: block; font-size: 13.5px; font-weight: 800; color: var(--text);
  line-height: 1.45; letter-spacing: -.2px;
}
.pn-kpi span { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.6; }
.pn-kpi.warn .k-ico { background: #fef3c7; color: #b45309; }
.pn-kpi.warn b { color: #b45309; }

.pn-charts {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 14px; margin-bottom: 14px;
}
.pn-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
}
.pn-card + .pn-card { margin-top: 14px; }
.pn-charts .pn-card + .pn-card { margin-top: 0; }
.pn-card h4 {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 12px;
}
.pn-card h4 .icon { width: 15px; height: 15px; color: var(--primary); }
.pn-empty { font-size: 11.5px; color: var(--text-muted); padding: 22px 0; text-align: center; }

.pn-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.pn-tables .pn-card + .pn-card { margin-top: 0; }

/* نمودار ستونی ماهانه */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 148px; }
.bar {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 5px; cursor: default;
}
.bar .bv {
  font-size: 9.5px; font-weight: 700; color: var(--text-secondary);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bar .track { width: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.bar .fill {
  width: 78%; max-width: 42px; min-height: 3px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #4fb0ff, var(--primary));
  transition: filter .18s;
}
.bar:hover .fill { filter: brightness(.9) saturate(1.15); }
/* روز بدون بازدید هیچ ستونی نمی‌گیرد؛ min-height فقط برای مقادیر کوچکِ غیرصفر است. */
.bar .fill.zero { min-height: 0; }
.bar .bm { font-size: 10.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

/* توزیع وضعیت سفارش‌ها */
.dist { display: flex; flex-direction: column; gap: 9px; }
.dist-row {
  display: grid; grid-template-columns: 96px 1fr 34px;
  align-items: center; gap: 8px; font-size: 11.5px;
}
.dist-row .dl { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.dist-row .dt {
  height: 9px; border-radius: 999px; background: var(--border-light);
  overflow: hidden; display: block;
}
.dist-row .df { display: block; height: 100%; border-radius: 999px; background: var(--primary); min-width: 2px; }
.dist-row .df.s-Pending { background: #f59e0b; }
.dist-row .df.s-Paid { background: var(--primary); }
.dist-row .df.s-Shipped { background: #6366f1; }
.dist-row .df.s-Delivered { background: #10b981; }
.dist-row .df.s-Cancelled { background: #ef4444; }
.dist-row .dn {
  text-align: left; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* جدول پرفروش‌ها */
.pn-top { width: 100%; border-collapse: collapse; }
.pn-top td {
  padding: 7px 5px; font-size: 11.5px;
  border-bottom: 1px solid var(--border-light); vertical-align: middle;
}
.pn-top tr:last-child td { border-bottom: 0; }
.pn-top .trank {
  width: 22px; text-align: center; font-weight: 800;
  color: var(--text-muted); font-size: 11px;
}
.pn-top .tname { font-weight: 700; color: var(--text); }
.pn-top .tname a { color: inherit; text-decoration: none; }
.pn-top .tname a:hover { color: var(--primary); }
.pn-top .tqty { width: 74px; color: var(--text-secondary); white-space: nowrap; }
.pn-top .tshare { width: 96px; }
.pn-top .tshare .st {
  display: block; height: 7px; border-radius: 999px;
  background: var(--border-light); overflow: hidden;
}
.pn-top .tshare .sf {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #00aed0, var(--primary));
}
.pn-top .tmoney { width: 116px; text-align: left; font-weight: 700; white-space: nowrap; }

@media (max-width: 860px) {
  .pn-charts { grid-template-columns: 1fr; }
  .pn-top .tshare { display: none; }
  .dist-row { grid-template-columns: 88px 1fr 30px; }
  /* کارت آخر اگر تنها در سطر بماند، تمام‌عرض می‌شود */
  .pn-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.admin-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--bg); padding: 5px; border-radius: var(--radius-md); margin-bottom: 14px;
}
.admin-tabs a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--radius); font-size: 12.5px; font-weight: 700;
  color: var(--text-secondary);
}
.admin-tabs a span {
  font-size: 10.5px; padding: 1px 7px; border-radius: 20px;
  background: var(--border-light); color: var(--text-muted); font-weight: 700;
}
.admin-tabs a:hover { background: #fff; color: var(--primary); }
.admin-tabs a.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.admin-tabs a.active span { background: var(--primary-light); color: var(--primary-dark); }

.admin-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-search input {
  flex: 1; min-width: 200px; padding: 11px 14px; font-size: 13px;
  border: 2px solid var(--border-light); border-radius: var(--radius);
  font-family: inherit; outline: none; background: #fff;
}
.admin-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(12,132,252,.08); }
.admin-search .btn { padding: 11px 18px; }

.admin-count { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-table th { font-size: 11.5px; }
.admin-table td { font-size: 12.5px; vertical-align: middle; }
.admin-user { display: flex; align-items: center; gap: 9px; }
.admin-user > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-user b { font-size: 12.5px; font-weight: 700; }
.admin-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--primary-light); color: var(--primary);
}
.admin-avatar .icon { width: 18px; height: 18px; }
.admin-contact { font-size: 11.5px; line-height: 1.9; color: var(--text-secondary); }
.admin-contact .muted { color: var(--text-muted); }
.admin-contact .tick { color: var(--success); display: inline-flex; vertical-align: middle; }
.admin-contact .tick .icon { width: 13px; height: 13px; }

.badge-pill.role-Admin { background: #eef2ff; color: #4338ca; }
.badge-pill.role-Seller { background: var(--primary-light); color: var(--primary-dark); }
.badge-pill.role-Buyer { background: var(--bg-alt); color: var(--text-secondary); }

.admin-role-form { display: flex; align-items: center; gap: 6px; }
.admin-role-form select {
  padding: 7px 9px; font-size: 12px; font-family: inherit;
  border: 2px solid var(--border-light); border-radius: var(--radius-sm);
  background: #fff; outline: none; color: var(--text);
}
.admin-role-form select:focus { border-color: var(--primary); }
.admin-role-form select:disabled { background: var(--bg); color: var(--text-muted); }
.btn-sm { padding: 7px 12px; font-size: 11.5px; border-radius: var(--radius-sm); }
.btn-sm:disabled { opacity: .5; pointer-events: none; }

.admin-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 18px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600;
}
.admin-pager a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--border-light); color: var(--primary);
}
.admin-pager a:hover { background: var(--primary-light); border-color: var(--primary-soft); }
.admin-pager .icon { width: 14px; height: 14px; }

/* ---- صندوق پیام‌ها ---- */
.msg-list { display: grid; gap: 9px; }
.msg-item {
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 14px 16px;
  transition: var(--transition);
}
.msg-item:hover { border-color: var(--primary-soft); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.msg-item.unread { background: #fbfdff; border-color: var(--primary-soft); }
.msg-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0;
  background: transparent;
}
.msg-item.unread .msg-dot { background: var(--primary); box-shadow: 0 0 0 3px rgba(12,132,252,.14); }
.msg-body { flex: 1; min-width: 0; }
.msg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.msg-top b { font-size: 13px; font-weight: 800; color: var(--text); }
.msg-item.unread .msg-top b { color: var(--primary-dark); }
.msg-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.msg-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: var(--text-muted); margin-top: 4px;
}
.msg-meta span { display: inline-flex; align-items: center; gap: 4px; }
.msg-meta .icon { width: 13px; height: 13px; }
.msg-snippet {
  font-size: 12px; color: var(--text-secondary); line-height: 1.85; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.msg-note {
  color: var(--success); background: var(--success-light);
  border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0;
}
.msg-note .icon { width: 13px; height: 13px; }

.msg-head { margin-bottom: 14px; }
.msg-back { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; }
.msg-back:hover { color: var(--primary); }
.msg-back .icon { width: 14px; height: 14px; }
.msg-head h2 { margin-bottom: 0; }

.msg-detail {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm);
}
.msg-detail-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--border-light); margin-bottom: 16px;
}
.msg-detail-meta > div { display: flex; flex-direction: column; gap: 3px; }
.msg-detail-meta .k { font-size: 10.5px; color: var(--text-muted); font-weight: 700; }
.msg-detail-meta .v { font-size: 12.5px; font-weight: 700; color: var(--text); }
.msg-detail-meta a.v { color: var(--primary); }
.msg-text {
  font-size: 13px; line-height: 2.05; color: var(--text-secondary);
  white-space: pre-wrap; overflow-wrap: break-word; margin-bottom: 18px;
}
.msg-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; border-bottom: 1px dashed var(--border-light); }
.msg-actions .btn { padding: 10px 16px; font-size: 12px; }
.msg-note-form { margin-top: 16px; display: grid; gap: 8px; }
.msg-note-form label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.msg-note-form textarea {
  width: 100%; padding: 11px 14px; font-family: inherit; font-size: 12.5px;
  border: 2px solid var(--border-light); border-radius: var(--radius);
  outline: none; resize: vertical; line-height: 1.9;
}
.msg-note-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(12,132,252,.08); }
.msg-note-form .btn { justify-self: start; }
.msg-note-date { font-size: 11px; color: var(--text-muted); }

@media (max-width: 780px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr {
    border: 1px solid var(--border-light); border-radius: var(--radius-md);
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
  }
  .admin-table td { padding: 5px 0; border: none; }
  .admin-table td[data-label] {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
  }
  .admin-table td[data-label]::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0;
  }
  .admin-role-form { margin-top: 4px; }
}

/* ---------- ریدایرکت‌ها: جدول با ستون‌های ثابت ----------
   مسیرهای فارسی قدیمی بلندند؛ بدون table-layout:fixed ستون اول همهٔ عرض را می‌برد
   و دکمه‌های اقدام به دو ردیف می‌شکنند. */
.rr-table { table-layout: fixed; }
.rr-table td { padding-top: 9px; padding-bottom: 9px; vertical-align: top; }
.rr-path {
  display: block; max-width: 100%;
  font-size: 11.5px; line-height: 1.75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: right;
}
.rr-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.rr-note {
  font-size: 10px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: right;
}
.rr-actions { display: flex; gap: 5px; flex-wrap: nowrap; }
.rr-actions .btn { padding: 7px 10px; }
.rr-code { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }

@media (max-width: 780px) {
  .rr-table td[data-label] { align-items: flex-start; gap: 10px; }
  .rr-table td[data-label] > * { min-width: 0; flex: 1; }
  .rr-actions { flex-wrap: wrap; }
}

/* نوار اعلان خالی نباید دیده شود */
#toast:empty { display: none; }

/* کاربر بدون نقش (مثلاً حساب‌های وارد‌شده از سایت قدیمی) */
.badge-pill.role-none { background: var(--danger-light); color: #be123c; }

/* کد ناقص در جعبه‌های یک‌بار مصرف */
.otp-boxes.invalid input {
  border-color: var(--danger);
  background: #fffafa;
}
.otp-boxes.invalid input.filled {
  border-color: var(--danger);
  background: #fff5f6;
  color: var(--danger);
}
@keyframes otpShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.otp-boxes.invalid { animation: otpShake .28s ease; }

/* =========================================================
   تنظیمات سایت در پنل مدیریت
   ========================================================= */
.settings-form { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.settings-card { padding: 18px 20px; scroll-margin-top: 80px; }

/* ناوبری سریع بین بخش‌های تنظیمات (صفحه بلند است) */
.settings-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: 760px; margin: 0 0 14px;
}
.settings-nav a {
  display: inline-flex; align-items: center;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border-light);
  color: var(--text-secondary); font-size: 12px; font-weight: 700;
  text-decoration: none; transition: all .16s;
}
.settings-nav a:hover {
  color: var(--primary); border-color: var(--primary-soft);
  background: var(--primary-light);
}
.settings-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--text);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light);
}
.settings-card .field:last-child { margin-bottom: 0; }
.settings-card textarea { min-height: 76px; }
.settings-check { margin: 4px 0 8px; }
.settings-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 5;
  padding: 12px 0; background: linear-gradient(to top, var(--bg) 65%, transparent);
}

/* ستاره امتیاز در فرم ویرایش نظر */
.cmc-rate { margin-bottom: 8px; }
.cmc-rate .cm-rate-label { font-size: 11.5px; }
.cmc-rate .cm-star-btn .icon { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .settings-card { padding: 14px; }
  .settings-form { gap: 10px; }
}

/* =========================================================
   جزئیات کاربر — پنل مدیر
   ========================================================= */
.muted { color: var(--text-muted); }

.pill.danger { background: var(--danger-light); color: #be123c; border-color: #fecdd3; }
.pill.info { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-soft); }

.admin-user-link { color: inherit; text-decoration: none; }
.admin-user-link:hover b { color: var(--primary); text-decoration: underline; }

.admin-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-row-actions form { display: inline-flex; }
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-light);
  background: #fff; color: var(--text-secondary); cursor: pointer;
  transition: var(--transition);
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary-soft); background: var(--primary-light); }
.icon-btn.danger:hover { color: var(--danger); border-color: #fecdd3; background: var(--danger-light); }
.icon-btn .icon { width: 16px; height: 16px; }

.admin-table tr.row-locked td { background: #fffdf6; }

.status-banner {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 15px; margin-bottom: 12px;
  border-radius: var(--radius); border: 1px solid;
  font-size: 12.5px; font-weight: 600; line-height: 1.85;
}
.status-banner .icon { width: 16px; height: 16px; flex-shrink: 0; }
.status-banner.info { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-soft); }
.status-banner.warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.status-banner.danger { background: var(--danger-light); color: #be123c; border-color: #fecdd3; }

.ud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ud-card {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 18px;
  box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.ud-card h3 {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 14px;
}
.ud-card h3 .icon { width: 17px; height: 17px; color: var(--primary); }

.ud-info { display: grid; gap: 10px; }
.ud-info > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding-bottom: 9px; border-bottom: 1px dashed var(--border-light);
}
.ud-info > div:last-child { border-bottom: none; padding-bottom: 0; }
.ud-info dt { color: var(--text-muted); font-weight: 700; flex-shrink: 0; }
.ud-info dd {
  color: var(--text); font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  text-align: left; min-width: 0;
}
.ud-id { font-size: 11px; word-break: break-all; }

.ud-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-light);
}
.ud-stats > div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg); border-radius: var(--radius-sm); padding: 9px 4px;
}
.ud-stats .n { font-size: 15px; font-weight: 800; color: var(--primary-dark); }
.ud-stats .k { font-size: 10.5px; color: var(--text-muted); font-weight: 700; }

.ud-actions { display: grid; }
.ud-action {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px dashed var(--border-light);
}
.ud-action:last-child { border-bottom: none; }
.ud-action-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ud-action-text b { font-size: 12.5px; font-weight: 800; color: var(--text); }
.ud-action-text span { font-size: 11.5px; color: var(--text-muted); line-height: 1.85; }
.ud-action > form { flex-shrink: 0; }
.ud-action.danger-zone .ud-action-text b { color: var(--danger); }
.ud-action .btn:disabled, .ud-action .btn[disabled] { opacity: .5; pointer-events: none; }

@media (max-width: 780px) {
  .ud-action { flex-direction: column; align-items: flex-start; gap: 9px; }
  .ud-action > form, .ud-action .admin-row-actions { width: 100%; }
  .ud-stats { grid-template-columns: repeat(2, 1fr); }
  .ud-info > div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ud-info dd { justify-content: flex-start; text-align: right; }
}

/* =========================================================
   مدیریت دسته‌بندی‌ها (/Admin/Categories)
   ========================================================= */
.admin-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.admin-head-row h2 { margin: 0; }

.cat-admin-summary {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px;
}
.cas-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.cas-item > span { color: var(--primary); display: inline-flex; }
.cas-item > span .icon { width: 16px; height: 16px; }
.cas-item b { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.4; }
.cas-item small { font-size: 10.5px; color: var(--text-muted); text-align: center; }
.cas-item.warn { border-color: #fde68a; background: #fffdf5; }
.cas-item.warn > span { color: var(--warning); }
.cas-item.warn b { color: #b45309; }

.admin-hint {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--primary-light); border: 1px solid var(--primary-soft);
  border-radius: var(--radius); font-size: 12px; line-height: 1.95; color: var(--text-secondary);
}
.admin-hint .icon { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.admin-hint b { color: var(--text); }
.admin-hint.warn { background: #fffdf5; border-color: #fde68a; }
.admin-hint.warn .icon { color: var(--warning); }

.cat-admin-list { display: flex; flex-direction: column; gap: 12px; }

.cat-admin-card {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: var(--transition);
  scroll-margin-top: 90px;
}
.cat-admin-card:target { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(12, 132, 252, .12); }
.cat-admin-card.is-off { background: #fcfcfd; border-style: dashed; }

.cac-head { display: flex; align-items: flex-start; gap: 13px; padding: 15px 16px; }
.cac-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid var(--primary-soft); border-radius: var(--radius);
}
.cac-icon .icon { width: 22px; height: 22px; }
.is-off .cac-icon { background: #f1f5f9; color: var(--text-muted); border-color: var(--border); }

.cac-title { flex: 1; min-width: 0; }
.cac-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cac-name b { font-size: 14.5px; font-weight: 800; color: var(--text); }
.cac-title p {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.9;
  margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis;
}
.cac-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 7px; }
.cac-meta span, .cac-meta a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted);
}
.cac-meta a { color: var(--primary); font-weight: 600; }
.cac-meta .icon { width: 13px; height: 13px; }

.cac-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cac-actions form { display: inline-flex; }
.icon-btn:disabled, .icon-btn[disabled] { opacity: .35; pointer-events: none; }
.icon-btn.ok { color: var(--success); border-color: #a7f3d0; background: var(--success-light); }

.cac-subs { border-top: 1px solid var(--border-light); background: #fbfdff; }
.cac-subs > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  user-select: none;
}
.cac-subs > summary::-webkit-details-marker { display: none; }
.cac-subs > summary:hover { background: var(--primary-light); color: var(--primary); }
.cac-subs > summary > .icon { width: 14px; height: 14px; transition: var(--transition); }
.cac-subs[open] > summary > .icon { transform: rotate(180deg); }
.cac-subs > summary > span {
  background: var(--primary-light); color: var(--primary-dark);
  border: 1px solid var(--primary-soft); border-radius: 999px;
  padding: 1px 8px; font-size: 10.5px; font-weight: 700;
}
.cac-subs > summary .cac-unmatched {
  display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto;
  background: #fffbeb; color: #b45309; border-color: #fde68a;
}
.cac-subs > summary .cac-unmatched .icon { width: 12px; height: 12px; }

.sub-list { display: flex; flex-direction: column; padding: 0 16px 12px; }
/* گرید صریح: هیچ‌وقت به خط بعد نمی‌شکند؛ ورودی‌های متنی خودشان جمع می‌شوند */
.sub-row {
  display: grid;
  grid-template-columns: 22px minmax(90px, 1fr) minmax(0, 150px) auto auto;
  align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  border-bottom: 1px dashed var(--border-light);
  transition: var(--transition);
}
.sub-row:last-child { border-bottom: none; }
.sub-row:hover { background: #fff; }
.sub-row.off { opacity: .62; }
.sub-row input[type="text"] {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 7px 10px; font: inherit; font-size: 12px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: var(--transition);
}
.sub-row input.kw { font-size: 11.5px; color: var(--text-secondary); }
.sub-row input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12, 132, 252, .1);
}
.sub-idx {
  text-align: center; font-size: 11px; color: var(--text-muted);
}
.sub-btns { display: flex; align-items: center; gap: 4px; }
.sub-count {
  justify-self: end; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; color: var(--success);
  background: var(--success-light); border: 1px solid #a7f3d0;
  border-radius: 999px; padding: 2px 8px;
}
.sub-count.zero { color: var(--text-muted); background: #f8fafc; border-color: var(--border); }

.cac-empty { font-size: 11.5px; color: var(--text-muted); padding: 4px 16px 12px; }

.sub-add {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px dashed var(--border);
  background: #f8fbff;
}
.sub-add-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--text-secondary);
  white-space: nowrap;
}
.sub-add-label .icon { width: 14px; height: 14px; color: var(--primary); }
.sub-add input[type="text"] {
  flex: 1 1 150px; min-width: 110px;
  padding: 8px 11px; font: inherit; font-size: 12px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sub-add input.kw { flex: 1 1 170px; font-size: 11.5px; }
.sub-add input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12, 132, 252, .1);
}

/* --- فرم دسته‌بندی --- */
.admin-form { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.admin-form-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-light);
}
.admin-form-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.danger-text { color: var(--danger) !important; }
.danger-btn { background: var(--danger); border-color: var(--danger); }
.danger-btn:hover { background: #be123c; border-color: #be123c; }
.admin-form-foot .btn-secondary.danger-text { background: #fff; border-color: #fecdd3; }

.icon-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; margin-top: 4px;
}
.icon-pick {
  position: relative; /* تا رادیوی مطلق داخل همین کاشی بماند */
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px; cursor: pointer; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  transition: var(--transition);
}
.icon-pick input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.icon-pick .icon { width: 20px; height: 20px; color: var(--text-secondary); }
.icon-pick span { font-size: 10.5px; color: var(--text-muted); line-height: 1.5; }
.icon-pick:hover { border-color: var(--primary-soft); background: var(--primary-light); }
.icon-pick:hover .icon { color: var(--primary); }

/* حالت انتخاب‌شده از خودِ رادیو خوانده می‌شود (نه کلاس سمت سرور)
   وگرنه با کلیک کاربر، رادیو عوض می‌شد ولی هایلایت سر جایش می‌ماند. */
.icon-pick:has(input:checked),
.icon-pick.active {
  border-color: var(--primary); background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(12, 132, 252, .1);
}
.icon-pick:has(input:checked) .icon,
.icon-pick.active .icon { color: var(--primary); }
.icon-pick:has(input:checked) span,
.icon-pick.active span { color: var(--primary-dark); font-weight: 700; }
.icon-pick:has(input:checked)::after {
  content: ""; position: absolute; inset-block-start: 5px; inset-inline-end: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}
.icon-pick:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.icon-pick:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- صفحهٔ حذف دسته --- */
.danger-box {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin: 12px 0 16px;
  background: var(--danger-light); border: 1px solid #fecdd3;
  border-radius: var(--radius); font-size: 12.5px; line-height: 1.95; color: #9f1239;
}
.danger-box .icon { width: 20px; height: 20px; color: var(--danger); flex-shrink: 0; margin-top: 2px; }
.danger-box b { color: var(--danger); }
.danger-box p { margin: 4px 0 0; }

.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.impact-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 13px 8px; background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.impact-item > span { color: var(--text-muted); display: inline-flex; }
.impact-item > span .icon { width: 16px; height: 16px; }
.impact-item b { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.4; }
.impact-item small { font-size: 10.5px; color: var(--text-muted); text-align: center; }

.del-option {
  padding: 14px 16px; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  transition: var(--transition);
}
.del-option:hover { border-color: var(--primary-soft); background: #fcfdff; }
.del-radio { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.del-radio input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.del-radio b { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--text); }
.del-radio b .icon { width: 15px; height: 15px; color: var(--primary); }
.del-radio small { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.9; margin-top: 3px; }
.del-radio.danger input { accent-color: var(--danger); }
.del-radio.danger b, .del-radio.danger b .icon { color: var(--danger); }

@media (max-width: 900px) {
  .cat-admin-summary { grid-template-columns: repeat(3, 1fr); }
  .impact-grid { grid-template-columns: 1fr; }
  .sub-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas:
      "idx name name"
      "idx kw   kw"
      "idx cnt  btns";
    row-gap: 6px;
  }
  .sub-idx { grid-area: idx; align-self: start; }
  .sub-row input[name="name"] { grid-area: name; }
  .sub-row input.kw { grid-area: kw; }
  .sub-count { grid-area: cnt; justify-self: start; }
  .sub-btns { grid-area: btns; justify-self: end; }
}

@media (max-width: 780px) {
  .cat-admin-summary { grid-template-columns: repeat(2, 1fr); }
  .cac-head { flex-wrap: wrap; }
  .cac-title { flex: 1 1 100%; order: 3; }
  .cac-actions { margin-inline-start: auto; }
  .cac-meta { gap: 10px; }
  .sub-add { flex-direction: column; align-items: stretch; }
  .sub-add input[type="text"] { flex: 1 1 auto; }
  .admin-form { padding: 15px; }
  .admin-form-foot .btn { flex: 1 1 auto; justify-content: center; }
}


/* ---------- صفحهٔ آمار و تحلیل ---------- */
.an-range {
  display: flex; gap: 3px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.an-range a {
  font-size: 11.5px; font-weight: 700; color: var(--text-secondary);
  text-decoration: none; padding: 5px 9px; border-radius: 7px; white-space: nowrap;
}
.an-range a:hover { background: var(--primary-light); color: var(--primary-dark); }
.an-range a.on { background: var(--primary); color: #fff; }

.an-grid { margin-bottom: 14px; min-width: 0; }
/* min(320px, 100%) تا وقتی عرض دید از ۳۲۰px کمتر است، ستون از صفحه بیرون نزند. */
.an-grid.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.an-grid.two > * { min-width: 0; }
.an-grid.two .pn-card + .pn-card { margin-top: 0; }

/* نمودار دو سری (بازدید + بازدیدکنندهٔ یکتا) */
.bars.two .track { gap: 3px; }
.bars.two .fill { width: 44%; max-width: 22px; }
.fill.alt { background: linear-gradient(180deg, #7dd3fc, #00aed0); }
.legend {
  display: flex; gap: 14px; justify-content: center;
  margin-top: 8px; font-size: 10.5px; color: var(--text-muted);
}
.legend .lg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 4px; }
.lg-main { background: linear-gradient(180deg, #4fb0ff, var(--primary)); }
.lg-alt { background: linear-gradient(180deg, #7dd3fc, #00aed0); }

.bars.compact { height: 108px; }
.bars.compact .bar .bv { display: none; }
.bars.compact .bar .bm { font-size: 8.5px; }

/* فهرست رتبه‌بندی */
.rank { display: flex; flex-direction: column; gap: 8px; }
.rank-row {
  display: grid; grid-template-columns: minmax(88px, 1.25fr) 1fr 32px;
  align-items: center; gap: 8px; font-size: 11.5px;
}
.rk-name {
  color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-name a { color: inherit; text-decoration: none; }
.rk-name a:hover { color: var(--primary); }
.rk-extra {
  display: block; font-style: normal; font-size: 10px; font-weight: 500;
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
}
.rk-track { height: 8px; border-radius: 999px; background: var(--border-light); overflow: hidden; }
.rk-fill {
  display: block; height: 100%; border-radius: 999px; min-width: 2px;
  background: linear-gradient(90deg, #00aed0, var(--primary));
}
.rk-val { text-align: left; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* جدول کلید-مقدار */
.an-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.an-kv > div {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px dashed var(--border-light); font-size: 11.5px;
}
.an-kv span { color: var(--text-secondary); }
.an-kv b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-kv b.ok { color: #047857; }
.an-kv b.warn { color: #b45309; }
.an-note { font-size: 11px; color: var(--text-muted); line-height: 2; margin-top: 8px; }

/* جدول آخرین بازدیدها */
.an-recent td { font-size: 11px; }
.an-recent .an-time { white-space: nowrap; color: var(--text-secondary); }
.an-recent .an-path { font-weight: 700; }
.an-recent .an-ref, .an-recent .an-ip { color: var(--text-muted); font-size: 10.5px; }

/* موبایل: ۷ ستون در ۳۳۰px جا نمی‌شود و اسکرول افقی فقط ۲ ستون نشان می‌داد؛
   هر ردیف به یک کارت با برچسب ستون (data-label) تبدیل می‌شود. */
@media (max-width: 700px) {
  .an-table { overflow: visible; border: 0; border-radius: 0; }
  .an-recent, .an-recent tbody { display: block; }
  .an-recent thead { display: none; }
  .an-recent tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px;
    border: 1px solid var(--border-light); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 8px;
  }
  .an-recent tr:hover td { background: none; }
  .an-recent td {
    display: block; border: 0; padding: 0; text-align: right; font-size: 11px;
  }
  .an-recent td::before {
    content: attr(data-label) " · ";
    color: var(--text-muted); font-size: 10px; font-weight: 600;
  }
  .an-recent .an-time { grid-column: 1 / -1; color: var(--text-muted); font-size: 10.5px; }
  .an-recent .an-path {
    grid-column: 1 / -1; font-size: 12.5px; padding-bottom: 5px;
    border-bottom: 1px dashed var(--border-light); margin-bottom: 1px;
  }
  .an-recent .an-path::before { display: none; }
  .an-recent .an-ip { font-size: 10px; }
}

@media (max-width: 860px) {
  .an-range { width: 100%; justify-content: space-between; }
  .rank-row { grid-template-columns: minmax(70px, 1fr) 1fr 30px; }
  /* برچسب‌های nowrap در عرض کم، صفحه را افقی می‌کشند؛ خود نمودار اسکرول می‌شود.
     min-width را کم نگه می‌داریم تا ۷ و ۲۴ ستون بدون اسکرول جا شوند و فقط
     ۳۰/۹۰ روز اسکرول افقی بخورد. */
  /* padding-inline: برچسب روز اول/آخر از جعبهٔ ۸px ستون بیرون می‌زند و باعث
     اسکرول ۵px می‌شد؛ این پدینگ جا برایشان باز می‌کند. */
  .bars { overflow-x: auto; overflow-y: hidden; padding: 0 8px 2px; gap: 2px; }
  .bars .bar { min-width: 8px; }
  .bars.compact { gap: 2px; }
  .bars.compact .bar { min-width: 8px; }
  .bars .bar .bm { font-size: 8px; }
}