/* ==========================================================================
   VENDORHA — استایل اجزای مشترک صفحات
   مگامنو، کشوها، نوار عنوان صفحه، مسیر راهنما، فیلترها، گرید، کارت تأمین‌کننده.
   همگی از توکن‌های tokens.css استفاده می‌کنند تا با دارک/نرمال و RTL هماهنگ بمانند.
   ========================================================================== */


/* ======================================================================
   ۲) کشوهای کناری (سبد / علاقه‌مندی)
   ====================================================================== */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.drawer-overlay[hidden] { display: none; }
.drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 61;
  width: min(420px, 92vw); display: flex; flex-direction: column;
  background: var(--surface); border-inline-end: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.drawer[hidden] { display: none; }
/* جهت باز شدن وابسته به چیدمان: راست‌چین از راست، چپ‌چین از چپ */
[dir="rtl"] .drawer { animation: drawer-in-rtl .25s ease; }
[dir="ltr"] .drawer { animation: drawer-in-ltr .25s ease; }
@keyframes drawer-in-rtl { from { transform: translateX(8%); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes drawer-in-ltr { from { transform: translateX(-8%); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 1.05rem;
}
.drawer-close { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; color: var(--slate); }
.drawer-close:hover { background: var(--bg); color: var(--offer-text); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px;
               display: flex; flex-direction: column; }
.drawer-empty { color: var(--slate); font-size: .9rem; line-height: 2; }

/* ======================================================================
   ۳) نوار عنوان صفحه + مسیر راهنما
   ====================================================================== */
.page-band {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(0, 168, 89, .10), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(22px, 3vw, 34px);
}
.page-band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 900; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.breadcrumb { margin-top: 12px; font-size: .85rem; color: var(--slate); display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--green-text); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

.page-content { padding-block: clamp(24px, 4vw, 44px); min-height: 80vh!important;}

/* چیدمان دوستونی صفحات لیست (فیلتر + نتایج) */
.list-layout { display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: start; }

/* ======================================================================
   ۴) فیلترها
   ====================================================================== */
.filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; position: sticky; top: 96px;
}
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.filters-head b { font-size: 1rem; }
.filters-reset { font-size: .8rem; color: var(--green-text); font-weight: 700; }
.filter-group { padding-block: 14px; border-top: 1px solid var(--line); }
.filter-group h4 { font-size: .9rem; margin-bottom: 10px; font-weight: 700; }
.filter-group label { display: flex; align-items: center; gap: 8px; font-size: .86rem; padding: 5px 0; cursor: pointer; }
.price-range { display: flex; gap: 8px; }
.price-range input {
  width: 100%; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .85rem;
}
.price-range input:focus { outline: none; border-color: var(--green); }

/* ======================================================================
   ۵) نوار ابزار گرید (انتخاب ۱ تا ۶ ستون + مرتب‌سازی)
   ====================================================================== */
.grid-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.grid-cols { display: flex; align-items: center; gap: 4px; }
.grid-cols-label { font-size: .82rem; color: var(--slate); margin-inline-end: 6px; }
.gc-btn {
  width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid var(--line);
  font-weight: 700; font-size: .85rem; color: var(--slate); background: var(--surface);
}
.gc-btn:hover { border-color: var(--green); color: var(--green-text); }
.gc-btn.on { background: var(--green-btn); border-color: var(--green); color: var(--on-green); }
.grid-sort select {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 7px 10px; font: inherit; font-size: .85rem;
}

/* گرید نتایج: تعداد ستون از متغیر --cols کنترل می‌شود (پیش‌فرض ۴) */
.result-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
}

/* ======================================================================
   ۶) کارت تأمین‌کننده (با نشان وریفای و اتحادیه‌ها)
   ====================================================================== */
.scard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: .2s;
  position: relative; overflow: hidden;
}
.scard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--green), transparent); opacity: 0; transition: .2s;
}
.scard:hover { border-color: var(--green); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.scard:hover::before { opacity: 1; }
.scard-top { display: flex; align-items: flex-start; gap: 12px; }
.scard-logo {
  width: 48px; height: 48px; border-radius: 14px; flex: none; overflow: hidden;
  background: var(--green-100); color: var(--green-text-soft);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.2rem;
}
[data-theme="dark"] .scard-logo { color: var(--green-text); }
.scard-logo img { width: 100%; height: 100%; object-fit: cover; }
.scard-id { flex: 1; min-width: 0; }
.scard-type {
  font-size: .72rem; color: var(--green-text); font-weight: 700;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.scard-type .verify { font-size: .62rem; padding: 1px 7px; }   /* وریفای کوچک کنار نوع */
.scard-name {
  font-size: 1rem; font-weight: 800; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  /* نام بلند نمی‌شکند */
}
.scard-unions { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: var(--green-100); color: var(--green-text-soft); white-space: nowrap;
}
[data-theme="dark"] .chip { color: var(--green-text); }
.scard-meta { display: flex; gap: 14px; font-size: .8rem; color: var(--slate); flex-wrap: wrap; }
.scard-meta .s { color: var(--star); }
.scard-actions { display: flex; gap: 8px; margin-top: auto; }
.scard-actions .btn { flex: 1; justify-content: center; padding: 9px 10px; font-size: .82rem; }

/* ======================================================================
   ۷) ریسپانسیو اجزای صفحات
   ====================================================================== */
@media (max-width: 980px) {
  .list-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
}
@media (max-width: 768px) {
  /* ستون‌ها طبق انتخاب کاربر (۱ تا ۶) اعمال می‌شود؛ پیش‌فرض موبایل را JS تنظیم می‌کند */
  .result-grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; }
}

/* ======================================================================
   کارت اتحادیهٔ صنفی (صفحهٔ اتحادیه‌ها)
   ====================================================================== */
.gcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; transition: .2s;
}
.gcard:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow); }
.gcard-icon {
  width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center;
  justify-content: center; background: var(--green-100); font-size: 2rem;
}
.gcard-name { font-size: 1.05rem; font-weight: 800; }
.gcard-cat { font-size: .82rem; color: var(--green-text); font-weight: 700; }
.gcard-meta { font-size: .82rem; color: var(--slate); }
.gcard-link { margin-top: 6px; width: 100%; justify-content: center; }


/* ======================================================================
   مودال جزئیات تأمین‌کننده (بند ۳۷)
   ====================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/*
  ⚠️ باگ رفع‌شده: مودال در موبایل از کادر بیرون می‌زد.

  پیش‌تر `inset-inline-start: 50%` با `translate(50%, -50%)`
  ترکیب می‌شد. `inset-inline-start` **منطقی** است (در RTL
  یعنی راست) ولی `translate` **فیزیکی** — پس هر دو به یک سمت
  هل می‌دادند و مودال به راست می‌رفت.

  روی دسکتاپ فضا بود و دیده نمی‌شد؛ روی موبایل عنوان و متن
  بریده می‌شد.

  حالا `inset: 0` + `margin: auto` — به جهت وابسته نیست و
  برای مودال بلندتر از صفحه هم امن است.
*/
.modal {
  position: fixed; z-index: 71;
  inset: 0; margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, calc(100vh - 32px));
  height: fit-content;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: 20px; padding: 26px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .2s ease;
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.modal-close {
  position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--bg); color: var(--slate); font-size: 1rem;
}
.modal-close:hover { background: var(--offer-btn); color: var(--on-offer); }
.modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.modal-logo {
  width: 64px; height: 64px; border-radius: 16px; flex: none; display: flex; align-items: center;
  justify-content: center; background: var(--green-100); color: var(--green-text-soft); font-size: 1.7rem; font-weight: 900;
}
.modal-type { font-size: .82rem; color: var(--slate); display: flex; align-items: center; gap: 8px; }
.modal-name { font-size: 1.3rem; font-weight: 900; }
.modal-unions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.modal-about { color: var(--slate); line-height: 1.9; margin-bottom: 16px; }
.modal-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px;
  background: var(--bg); border-radius: 14px; padding: 14px;
}
.modal-stats div { text-align: center; }
.modal-stats b { display: block; font-size: 1rem; }
.modal-stats span { font-size: .72rem; color: var(--slate); }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; justify-content: center; }

/* ======================================================================
   صفحهٔ ویژهٔ تأمین‌کننده
   ====================================================================== */
.vendor-hero {
  background:
    radial-gradient(70% 130% at 100% 0%, rgba(0, 168, 89, .14), transparent 60%),
    linear-gradient(160deg, var(--surface), var(--bg));
  border-bottom: 1px solid var(--line); padding-block: clamp(24px, 4vw, 40px);
}
.vendor-hero-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vendor-hero-logo {
  width: 84px; height: 84px; border-radius: 22px; flex: none; display: flex; align-items: center;
  justify-content: center; background: var(--green-btn); color: var(--on-green); font-size: 2.2rem; font-weight: 900;
}
.vendor-hero-id { flex: 1; min-width: 200px; }
.vendor-hero-type { font-size: .85rem; color: var(--slate); display: flex; align-items: center; gap: 8px; }
.vendor-hero-name { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; margin: 4px 0 8px; }
.vendor-hero-unions { display: flex; flex-wrap: wrap; gap: 6px; }
.vendor-hero-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px;
}
.vendor-hero-stats div {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center;
}
.vendor-hero-stats b { display: block; font-size: 1.1rem; }
.vendor-hero-stats span { font-size: .74rem; color: var(--slate); }
.vendor-about { margin-top: 24px; }
.vendor-about h2 { font-size: 1.2rem; margin-bottom: 8px; }
.vendor-about p { color: var(--slate); line-height: 1.9; max-width: 760px; }

/* ======================================================================
   صفحهٔ محصول
   ====================================================================== */
/* ==========================================================================
   صفحهٔ محصول — چیدمان سه‌بخشی
   --------------------------------------------------------------------------
   موبایل  : گالری → اطلاعات → کارت خرید (پشت سر هم)
   دسکتاپ : گالری | اطلاعات | کارت خرید چسبان
   کارت خرید جدا شده تا قیمت و دکمهٔ خرید همیشه در دید بمانند — مهم‌ترین
   کار این صفحه است.
   ========================================================================== */
/*
  ⚠️ ستون‌ها `minmax(0, 1fr)`اند، نه `1fr`.

  کمینهٔ خودکارِ `1fr` برابر `min-content` است؛ یعنی هر
  فرزندی که نتواند کوچک شود، ستون را پهن می‌کند. نوار
  بندانگشتیِ افقی دقیقاً همین است: با هشت تصویر، عرضش ۵۳۶
  پیکسل می‌شد و ستون را تا همان‌جا می‌کشید — روی موبایلِ
  ۳۶۰ پیکسلی کلِ صفحه افقی اسکرول می‌خورد.

  ⚠️ در ۱۱۸۰ پیکسل همین از اول درست بود؛ دو نقطهٔ دیگر
  جا مانده بودند.
*/
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 16px;
  align-items: start;
}
@media (min-width: 800px) {
  .product-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px;
  }
}
@media (min-width: 1180px) {
  .product-detail { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 310px; gap: 24px; }
  .pd-buybox { position: sticky; top: 84px; }
}
.pd-main {
  position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--line);
  padding: 14px;
}
.pd-main img { width: 100%; height: 100%; object-fit: contain; }
.pd-main .mark { width: 45%; color: var(--green-text); opacity: .5; }
.pd-main .off {
  position: absolute; top: 14px; inset-inline-start: 14px; background: var(--offer-btn);
  color: var(--on-offer); font-weight: 800; padding: 5px 12px; border-radius: 10px;
}
/*
  ⚠️ یک نوار افقی، نه شبکهٔ چندردیفه.

  با هشت تصویر، شبکهٔ چهارستونه دو ردیف می‌شد و ارتفاع
  ستون گالری را از ستون مشخصاتِ کنارش بلندتر می‌کرد. نوار
  تک‌خطی همیشه یک ارتفاع دارد، هرچند تصویر باشد.

  ⚠️ عرض خانه‌ها **ثابت** است، نه درصدی از ظرف.

  نسخهٔ اول `calc((100% - gap*3) / 4 * .8)` بود تا دقیقاً
  ۰٫۸ چهارستونهٔ قبلی باشد. در چیدمان دوستونهٔ دسکتاپ درست
  کار می‌کرد، ولی در چیدمان تک‌ستونهٔ موبایل ستونِ گالری
  عرض معیّن ندارد؛ درصد قابل حل نبود، کل اعلان `flex`
  بی‌اعتبار می‌شد و خانه‌ها به اندازهٔ ذاتی تصویر باز
  می‌شدند — نوار از عرض صفحه بیرون می‌زد و کل صفحه افقی
  اسکرول می‌خورد.

  ۹۲ و ۷۴ پیکسل همان ۰٫۸ اندازهٔ پیشین در دو چیدمان رایج‌اند
  و به حل‌شدنِ درصد وابسته نیستند.
*/
/* ⚠️ ستون گالری هم باید بتواند کوچک شود، نه فقط ردیفِ داخلش. */
.pd-gallery { min-width: 0; }

.pd-thumbs {
  --thumb-gap: 10px;
  --thumb-w: 92px;

  display: flex; gap: var(--thumb-gap); margin-top: 10px;
  /* ⚠️ بدون این، نوار ظرفش را پهن می‌کند به‌جای اسکرول. */
  min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;

  /*
    ⚠️ `touch-action` دست‌نخورده می‌ماند.

    اسکرول لمسی را خودِ مرورگر با اینرسی انجام می‌دهد؛
    گرفتنش با جاوااسکریپت یعنی از دست دادن آن حس. کشیدن با
    موس جداگانه در `templates/pages/product.html` اضافه شده
    و فقط برای `pointerType === "mouse"` کار می‌کند.
  */
  scroll-snap-type: x proximity;

  /* ⚠️ کشیدن افقی نباید صفحه را عقب ببرد (اشارهٔ «بازگشت»). */
  overscroll-behavior-x: contain;

  /* ⚠️ رنگ نوار از توکن مشترک — نه رنگ ثابت، تا تم تیره هم درست بماند. */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.pd-thumbs::-webkit-scrollbar { height: 6px; }
.pd-thumbs::-webkit-scrollbar-track { background: transparent; }
.pd-thumbs::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: var(--r-full);
}
.pd-thumbs::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

/*
  ⚠️ در حال کشیدن، انتخاب متن و چفت‌شدن اسکرول متوقف می‌شود.

  `scroll-snap` هنگام کشیدن، نوار را می‌کِشد و حرکت را
  کُند و پرشی نشان می‌دهد.
*/
.pd-thumbs.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pd-thumbs.is-dragging * { pointer-events: none; user-select: none; }

.pd-thumb {
  flex: 0 0 var(--thumb-w); width: var(--thumb-w);
  scroll-snap-align: start;
  /* ⚠️ تصویر داخل خانه نباید با ماوس «برداشته» شود. */
  -webkit-user-drag: none; user-select: none;
  aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); display: flex;
  align-items: center; justify-content: center; background: var(--surface); cursor: pointer;
}
.pd-thumb svg { width: 50%; color: var(--green-text); opacity: .4; }
.pd-thumb:hover { border-color: var(--green); }
.pd-vendor { display: inline-flex; align-items: center; gap: 8px; color: var(--green-text); font-weight: 700; }
.pd-title { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 900; margin: 8px 0; line-height: 1.5; }
.pd-price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 6px; }
.pd-price .now { font-size: 1.6rem; font-weight: 900; }
.pd-price .now small { font-size: .8rem; font-weight: 600; color: var(--slate); }
.pd-price .old { font-size: 1rem; color: var(--slate); text-decoration: line-through; }
.pd-note { font-size: .85rem; color: var(--slate); background: var(--green-100); padding: 10px 14px; border-radius: 12px; margin-bottom: 18px; }
/* مورد ۱۰ + ۹: چیدمان متوازن دکمه‌های صفحهٔ کالا */
.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pd-buy-form { display: flex; gap: 8px; align-items: stretch; flex: 1; min-width: 200px; }
.pd-buy { flex: 1; justify-content: center; }
.pd-tools { display: flex; gap: 8px; align-items: center; }
/* همهٔ آیکن‌های ثانویه یک‌شکل: دایره‌ای، هم‌اندازه، متوازن */
.pd-tool, .pd-tools .fav {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pd-tool:hover, .pd-tools .fav:hover { border-color: var(--green); color: var(--green-text-soft); background: var(--green-100); }
.pd-tool .icon, .pd-tools .fav .icon { width: 20px; height: 20px; }
.pd-tools .fav.on {
  color: var(--danger-text); border-color: var(--danger-text);
}
.pd-tools form { display: inline-flex; margin: 0; }
@media (max-width: 560px) {
  .pd-actions { flex-direction: column; align-items: stretch; }
  .pd-buy-form { min-width: 0; }
  .pd-tools { justify-content: center; }
}
.pd-desc { margin-top: 36px; max-width: 820px; }
.pd-desc h2 { font-size: 1.2rem; margin-bottom: 8px; }
.pd-desc p { color: var(--slate); line-height: 2; }

/* ======================================================================
   صفحهٔ مقایسه
   ====================================================================== */
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td {
  border: 1px solid var(--line); padding: 14px; text-align: center; vertical-align: middle;
}
.compare-table thead th { background: var(--surface); }
.compare-table tbody th { background: var(--bg); font-weight: 700; text-align: start; white-space: nowrap; }
.ct-thumb { width: 80px; height: 80px; margin: 0 auto 8px; color: var(--green-text); opacity: .5; }
.ct-title { font-size: .88rem; font-weight: 600; display: inline-block; max-width: 200px; }
.ct-title:hover { color: var(--green-text); }

/* ======================================================================
   ریسپانسیو صفحات جزئی
   ====================================================================== */
@media (max-width: 920px) {
  /* چیدمان محصول در بلوک خودش تعریف شده (تک‌ستونی → دو → سه)؛
     اینجا بازنویسی نمی‌کنیم تا حالت تبلت از بین نرود. */
  .vendor-hero-stats, .modal-stats { grid-template-columns: repeat(3, 1fr); }
  /* مورد ۹: صفحهٔ محصول موبایل‌فرندلی — عنوان و قیمت خواناتر */
  .pd-info h1 { font-size: 1.3rem; line-height: 1.5; }
  .pd-price { font-size: 1.4rem; }
  .pd-thumbs { --thumb-gap: 6px; --thumb-w: 74px; }
  .pd-desc { margin-top: 24px; }
  .spec-table { font-size: .86rem; }
  .spec-table th { width: 38%; }
}
@media (max-width: 560px) {
  .vendor-hero-stats, .modal-stats { grid-template-columns: repeat(2, 1fr); }
  /* بند ۲: دکمه‌های مودال تأمین‌کننده در موبایل زیر هم بچینند تا بیرون نزنند */
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; }
  /* مودال کمی جمع‌وجورتر تا در صفحهٔ کوچک جا شود */
  /*
    ⚠️ روی موبایل مودال از پایین بالا می‌آید — الگوی آشنای
    برنامه‌های موبایل و راحت‌تر برای دست.
  */
  .modal {
    padding: 22px 18px 26px;
    width: 100%; max-width: none;
    inset: auto 0 0 0; margin: 0;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    animation: modal-up .22s ease;
  }

  @keyframes modal-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /*
    ⚠️ پنج ستون آمار روی ۳۹۰ پیکسل یعنی هر کدام ۶۸ پیکسل —
    عدد و برچسب هر دو بریده می‌شوند.
  */
  .modal-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px; padding: 12px;
  }

  /* لوگو و عنوان هم کوچک‌تر */
  .modal-logo {
    width: 52px; height: 52px; font-size: 1.4rem;
    border-radius: 14px;
  }
  .modal-name { font-size: 1.08rem; line-height: 1.5; }
  .modal-head { gap: 11px; }

  /*
    ⚠️ دکمهٔ بستن نباید روی عنوان بیفتد.
  */
  .modal-close { top: 12px; inset-inline-end: 12px; }
  .modal-head { padding-inline-end: 40px; }
  .modal-stats { padding: 12px; gap: 8px; }
  .modal-stats b { font-size: .92rem; }
}

/* ======================================================================
   جستجوی موبایل (مودال) + دکمهٔ فیلتر موبایل + کشوی فیلتر موبایل
   ====================================================================== */
/* مودال جستجو */
.search-modal { position: fixed; inset: 0; z-index: 80; }
.search-modal[hidden] { display: none; }
.search-modal-overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* ==========================================================================
   جست‌وجوی موبایل
   --------------------------------------------------------------------------
   ⚠️ استایل این بخش در `enhance.css` است، نه اینجا.

   آن فایل **بعد از** این بارگذاری می‌شود و مجموعهٔ کاملی برای
   همین کلاس‌ها دارد؛ هر قاعده‌ای که اینجا نوشته شود بی‌صدا
   بازنویسی می‌گردد.

   فقط چیدمان پایه اینجا می‌ماند.
   ========================================================================== */
.search-modal-box {
  position: absolute; top: 0; inset-inline: 0;
  display: flex; align-items: center;
}

/* دکمهٔ فیلترها (فقط موبایل) */
.filters-open-btn {
  display: none; align-items: center; gap: 7px; font-weight: 700; font-size: .85rem;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 8px 14px;
}
.filters-open-btn .icon { width: 18px; height: 18px; }
.filters-open-btn:hover { border-color: var(--green); color: var(--green-text); }
.filters-head-actions { display: flex; align-items: center; gap: 10px; }
.filters-close { display: none; font-size: 1rem; color: var(--slate); width: 28px; height: 28px; border-radius: 8px; }
.filters-close:hover { background: var(--bg); color: var(--offer-text); }
.filters-overlay { position: fixed; inset: 0; z-index: 62; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.filters-overlay[hidden] { display: none; }

@media (max-width: 980px) {
  /* روی تبلت/موبایل: فیلتر به‌صورت کشوی کناری، نه ستون دائمی */
  .filters-open-btn { display: inline-flex; }
  .filters-close { display: flex; }
  .filters {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 63;
    width: min(330px, 86vw); margin: 0; border-radius: 0; overflow-y: auto;
    transform: translateX(-105%); transition: transform .25s ease;
  }
  [dir="rtl"] .filters { transform: translateX(105%); }
  .filters.open { transform: none; }
}

/* ======================================================================
   زیباسازی و ریسپانسیو کارت‌ها (اصلاحیهٔ ظرافت)
   ====================================================================== */

/* ---------- کارت تأمین‌کننده: ظریف‌تر و ضدسرریز ---------- */
.scard { padding: 18px; border-radius: 20px; gap: 14px; }
.scard-top { align-items: center; }
.scard-logo {
  width: 54px; height: 54px; border-radius: 16px; font-size: 1.3rem;
  background: linear-gradient(140deg, var(--green-100), var(--surface));
  box-shadow: inset 0 0 0 1px var(--line);
}
.scard-name { font-size: 1.05rem; line-height: 1.4; }
.scard-meta {
  padding-top: 10px; margin-top: 2px; border-top: 1px dashed var(--line);
  align-items: center; gap: 16px;
}
/* دکمه‌ها هرگز قطع نمی‌شوند: اگر جا کم بود زیر هم می‌روند */
.scard-actions { flex-wrap: wrap; gap: 8px; }
.scard-actions .btn { flex: 1 1 120px; }

/* ---------- کارت محصول: پرداخت بصری ---------- */
.pcard { border-radius: 18px; transition: .2s; }
.pthumb { background: linear-gradient(140deg, var(--green-100), var(--surface)); }

/* ==========================================================================
   تصویر کالا در کارت
   --------------------------------------------------------------------------
   ⚠️ باگی که این رفع می‌کند:

   تصویر با `style="object-fit:cover"` درون‌خطی رندر می‌شد.
   قاب مربع است ولی عکس فروشندگان هر نسبتی دارد، و `cover`
   تصویر را بزرگ می‌کند تا قاب پر شود و بیرون‌زدگی را می‌برد —
   یعنی لپ‌تاپِ پهن از دو طرف قیچی می‌شد و جعبهٔ بلند از بالا و
   پایین. روی صفحهٔ فروشگاه، نیمی از کالاها ناقص دیده می‌شدند.

   ⚠️ چرا کلاس و نه همان `style` درون‌خطی:

   با استایل درون‌خطی، تنظیمِ ادمین هیچ راهی برای اثرگذاری
   نداشت — و CSP هم استایل درون‌خطی را دوست ندارد.

   `padding` فقط در حالت `contain` می‌آید: در `cover` فضای
   خالی‌ای نیست که نفس بکشد، و padding فقط تصویر را
   بیشتر می‌بُرد.
   ========================================================================== */
.pthumb-img { width: 100%; height: 100%; display: block; }

.pthumb-img.fit-cover { object-fit: cover; }

.pthumb-img.fit-contain {
  object-fit: contain;
  padding: 10px;
  /* ⚠️ وگرنه padding به عرض اضافه می‌شود و تصویر سرریز می‌کند */
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .pthumb-img.fit-contain { padding: 7px; }
}
.pbtn-buy { box-shadow: 0 6px 16px rgba(0,168,89,.22); }

/* ---------- کارت اتحادیه ---------- */
.gcard { padding: 22px 18px; border-radius: 20px; }
.gcard-icon { box-shadow: inset 0 0 0 1px var(--line); }

/* ======================================================================
   چیدمان واکنش‌گرا بر اساس تعداد ستونِ انتخابی کاربر
   حالت ۱ ستون = نمای «لیستی» افقی و خوانا (روی موبایل پیش‌فرض است)
   ====================================================================== */
.result-grid[data-cols="1"] .scard {
  flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px;
}
.result-grid[data-cols="1"] .scard-top { flex: 1 1 240px; }
.result-grid[data-cols="1"] .scard-unions { flex: 0 1 auto; }
.result-grid[data-cols="1"] .scard-meta {
  flex: 0 0 auto; margin: 0; padding: 0; border: none;
}
.result-grid[data-cols="1"] .scard-actions {
  flex: 0 0 auto; width: auto; margin: 0;
}
.result-grid[data-cols="1"] .scard-actions .btn { flex: 0 0 auto; padding: 9px 18px; }

.result-grid[data-cols="1"] .pcard { flex-direction: row; align-items: stretch; }
.result-grid[data-cols="1"] .pthumb {
  width: clamp(110px, 34%, 200px); flex: none; aspect-ratio: 1;
}
.result-grid[data-cols="1"] .pbody { flex: 1; }

/* ======================================================================
   ریزه‌کاری موبایل کارت‌ها
   ====================================================================== */
@media (max-width: 560px) {
  .scard { padding: 16px; }
  .scard-logo { width: 48px; height: 48px; }
  /* در حالت لیستیِ موبایل، اکشن‌ها تمام‌عرض و خوانا */
  .result-grid[data-cols="1"] .scard-actions { width: 100%; }
  .result-grid[data-cols="1"] .scard-actions .btn { flex: 1 1 0; }
}

/* ======================================================================
   چیدمان ستون در موبایل (انتخاب ستون مخفی؛ دیفالت ثابت و مرتب)
   ====================================================================== */
@media (max-width: 768px) {
  /* انتخاب تعداد ستون در موبایل لازم نیست */
  .grid-cols { display: none !important; }

  /* تأمین‌کننده‌ها: تک‌ستونیِ لیستیِ خوانا */
  .result-grid:has(.scard) { grid-template-columns: 1fr !important; }
  .result-grid:has(.scard) .scard {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px;
  }
  .result-grid:has(.scard) .scard-top { flex: 1 1 60%; }
  .result-grid:has(.scard) .scard-unions { flex: 1 1 100%; }
  .result-grid:has(.scard) .scard-meta { flex: 0 0 auto; margin: 0; padding: 0; border: none; }
  .result-grid:has(.scard) .scard-actions { flex: 1 1 100%; width: 100%; margin: 0; }

  /* محصولات: دو ستونه و جمع‌وجور (بدون سرریز متن) */
  .result-grid:has(.pcard) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .pcard .pbody { padding: 10px; gap: 6px; }
  .pcard .ptitle { font-size: .82rem; -webkit-line-clamp: 2; line-clamp: 2; }
  .pcard .pvendor { font-size: .68rem; }
  .pcard .pvendor .verify { font-size: .56rem; padding: 1px 5px; }
  .pcard .pprice .now { font-size: .9rem; }
  .pcard .pprice .old { font-size: .68rem; }
  .pcard .pbtn-buy { padding: 8px 10px; font-size: .8rem; }
  .pthumb-tools { top: 8px; inset-inline-end: 8px; gap: 6px; }
  .fav { width: 30px; height: 30px; }
}

/* ======================================================================
   بخش ۴: فرم‌ها، سبد، پرداخت، پیگیری، بلاگ، احراز هویت
   ====================================================================== */

/* ---- فرم عمومی ---- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.form-card h3 { font-size: 1.1rem; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.field-full { grid-column: 1 / -1; }
.field span { font-size: .85rem; color: var(--slate); font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); outline: none; width: 100%;
  box-sizing: border-box;      /* padding نباید عرض را از ستون بیرون ببرد */
}
.field input:focus, .field textarea:focus { border-color: var(--green); }
.form-card .btn { margin-top: 16px; }

/* ---- سبد / چک‌اوت ---- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 12px; }
.cart-row {
  display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.cart-thumb { width: 64px; height: 64px; flex: none; border-radius: 12px; background: linear-gradient(140deg, var(--green-100), var(--surface)); display: flex; align-items: center; justify-content: center; }
.cart-thumb svg { width: 60%; color: var(--green-text); opacity: .5; }
.cart-info { flex: 1; min-width: 0; }
.cart-title { font-weight: 600; font-size: .92rem; display: block; }
.cart-title:hover { color: var(--green-text); }
.cart-vendor { font-size: .76rem; color: var(--green-text); margin-top: 3px; }
.cart-qty { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 10px; padding: 4px 10px; }
.cart-qty button { width: 24px; height: 24px; border-radius: 6px; background: var(--surface); font-weight: 800; }
.cart-qty button:hover { color: var(--green-text); }
.cart-price { font-weight: 800; white-space: nowrap; }
.cart-price small { font-size: .7rem; color: var(--slate); font-weight: 600; }
.cart-remove { width: 30px; height: 30px; border-radius: 8px; color: var(--slate); }
.cart-remove:hover { background: var(--bg); color: var(--offer-text); }
.cart-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: sticky; top: 96px; }
.cart-summary h3 { font-size: 1.05rem; margin-bottom: 16px; }
.sum-row { display: flex; justify-content: space-between; font-size: .9rem; padding: 8px 0; color: var(--slate); }
.sum-row b { color: var(--ink); }
.sum-total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 14px; font-size: 1rem; }
.cart-next { width: 100%; justify-content: center; margin-top: 16px; }
.cart-continue { display: block; text-align: center; margin-top: 12px; font-size: .85rem; color: var(--green-text); }

/* ---- مراحل خرید ---- */
.steps { display: flex; gap: 8px; margin-bottom: 22px; }
.step { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--slate); }
.step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.step.done { color: var(--green-700); border-color: var(--green); }
.step.done .step-n { background: var(--green-btn); color: var(--on-green); }
/* مراحل قابل بازگشت لینک‌اند؛ مرحلهٔ جاری برجسته می‌ماند */
a.step { text-decoration: none; transition: background .15s, border-color .15s; }
a.step:hover { background: var(--green-100); border-color: var(--green); }
.step.on { background: var(--green-100); border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-100); }

/* ---- روش پرداخت ---- */
.pay-method { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; margin-bottom: 10px; cursor: pointer; }
.pay-method:has(input:checked) { border-color: var(--green); background: var(--green-100); }
.pay-ic { font-size: 1.4rem; }
.pay-name { font-weight: 700; }
.pay-bal { margin-inline-start: auto; font-size: .8rem; color: var(--slate); }
.pay-secure { font-size: .82rem; color: var(--slate); margin-top: 12px; text-align: center; }

/* ---- پیگیری سفارش + تایم‌لاین ---- */
.track-form { display: flex; gap: 10px; max-width: 560px; margin-bottom: 24px; }
.track-form input { flex: 1; font: inherit; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); outline: none; }
.track-form input:focus { border-color: var(--green); }
.track-head { font-size: 1.05rem; margin-bottom: 18px; }
.timeline { list-style: none; padding-inline-start: 8px; }
.tl-item { position: relative; padding-inline-start: 28px; padding-bottom: 22px; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.tl-dot { position: absolute; inset-inline-start: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.tl-item.done .tl-dot { background: var(--green-btn); border-color: var(--green); }
.tl-item.done:not(:last-child)::before { background: var(--green-btn); }
.tl-body b { display: block; font-size: .92rem; }

/* ==========================================================================
   مورد ۳ — خط زمانی پیگیری، مدرن‌تر
   ========================================================================== */

/*
  ⚠️ نقطهٔ مرحله باید بتواند آیکن در خود جا بدهد.
*/
.tl-dot { display: grid; place-items: center; }

/*
  مرحله‌ای که انجام شده ولی هنوز تاریخ نخورده = در جریان.

  ⚠️ حلقهٔ نرم دورش، بدون اینکه اندازهٔ نقطه عوض شود — وگرنه
  خط عمودی وسط‌چین نمی‌ماند.
*/
.tl-item.done.is-soon .tl-dot {
  box-shadow: 0 0 0 4px var(--green-100);
}

/* مرحلهٔ نرسیده کم‌رنگ‌تر تا چشم روی مرحلهٔ جاری بماند */
.tl-item.is-soon:not(.done) .tl-body b {
  color: var(--slate); font-weight: 600;
}

.tl-soon {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--warn-text) !important;
  font-weight: 600;
}

/*
  ساعت شنی متحرک.

  ⚠️ `prefers-reduced-motion` محترم شمرده می‌شود — چرخش
  بی‌وقفه برای بعضی کاربران سرگیجه‌آور است.
*/
.tl-glass {
  font-size: 9px; line-height: 1;
  animation: tl-flip 2.4s ease-in-out infinite;
}

.tl-glass-sm {
  display: inline-block; font-size: .82rem; line-height: 1;
  animation: tl-flip 2.4s ease-in-out infinite;
}

@keyframes tl-flip {
  0%, 45% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tl-glass, .tl-glass-sm { animation: none; }
}

/* خط زمانی خواناتر */
.timeline { padding-block: 4px; }
.tl-item { padding-bottom: 24px; }
.tl-body span { font-size: .8rem; color: var(--slate); }

/* ---- تماس / درباره ---- */
.contact-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.contact-info { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.ci-item b { display: block; font-size: .9rem; }
.ci-item span { font-size: .85rem; color: var(--slate); }
.ci-item a { font-size: .85rem; color: var(--green-text); font-weight: 700; text-decoration: none; }
.ci-item a[dir="ltr"] { display: inline-block; unicode-bidi: isolate; }
.ci-item .ci-map { display: inline-block; margin-top: 6px; font-size: .8rem; }
/* تله ربات‌ها — پنهان از کاربر و صفحه‌خوان */
.cf-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
         clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }
.cf-err { display: block; margin-top: 4px; color: var(--danger-text); font-size: .76rem; font-weight: 700; }
.cf-alert { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
            background: var(--danger-bg); color: var(--danger-text); font-size: .85rem; }
.nl-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: .84rem;
          font-weight: 700; background: rgba(255, 255, 255, .08); color: #fff; }
.nl-msg.is-ok { background: rgba(74, 222, 128, .16); }
.nl-msg.is-err { background: rgba(248, 113, 113, .18); }
.prose { max-width: 760px; line-height: 2; color: var(--slate); }
.prose p { margin-bottom: 14px; }
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.stats-band div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-align: center; }
.stats-band b { display: block; font-size: 1.6rem; font-weight: 900; color: var(--green-text); }
.stats-band span { font-size: .82rem; color: var(--slate); }

/* ---- بلاگ ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: .2s; }
.blog-card:hover { border-color: var(--green); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.blog-thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; background: linear-gradient(140deg, var(--green-100), var(--surface)); }
.blog-thumb svg { width: 34%; color: var(--green-text); opacity: .45; }
.blog-cat { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--green-btn); color: var(--on-green); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.blog-body { padding: 16px; }
.blog-meta { font-size: .76rem; color: var(--slate); }
.blog-title { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.5; margin: 8px 0; }
.blog-title:hover { color: var(--green-text); }
.blog-excerpt { font-size: .86rem; color: var(--slate); line-height: 1.8; }
.blog-more { display: inline-block; margin-top: 10px; color: var(--green-text); font-weight: 700; font-size: .85rem; }
.post-hero { aspect-ratio: 21/9; border-radius: 18px; background: linear-gradient(140deg, var(--green-100), var(--surface)); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.post-hero svg { width: 18%; color: var(--green-text); opacity: .45; }
.post-meta { font-size: .82rem; color: var(--slate); margin-bottom: 16px; }
.post-body { max-width: 760px; }

/* ---- درخواست همکاری (نقش‌ها) ---- */
.join-intro { color: var(--slate); margin-bottom: 20px; max-width: 720px; }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.role-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; transition: .18s; }
.role-card:has(input:checked) { border-color: var(--green); background: var(--green-100); }
.role-card input { position: absolute; opacity: 0; }
.role-ic { font-size: 1.8rem; }
.role-card b { font-size: 1rem; }
.role-desc { font-size: .78rem; color: var(--slate); }
.join-note { font-size: .82rem; color: var(--slate); margin-top: 12px; }

/* ---- احراز هویت ---- */
.auth-card { max-width: 420px; margin: 30px auto; display: flex; flex-direction: column; gap: 14px; }
.auth-title { font-size: 1.5rem; font-weight: 900; text-align: center; }
.auth-sub { text-align: center; color: var(--slate); font-size: .88rem; margin-top: -6px; }
.auth-submit { width: 100%; justify-content: center; }
.auth-alt, .auth-foot, .auth-vendor { text-align: center; font-size: .85rem; color: var(--slate); }
.auth-alt a, .auth-foot a, .auth-vendor a { color: var(--green-text); font-weight: 700; }

/* ---- خالی ---- */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state p { color: var(--slate); margin-bottom: 18px; }

/* ---- ریسپانسیو بخش ۴ ---- */
@media (max-width: 920px) {
  .cart-layout, .contact-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .steps { font-size: .78rem; }
  .step span:not(.step-n) { display: none; }
  /* بند ۱۱: چیدمان سبد در موبایل — گرید تمیز به‌جای wrap درهم */
  /* ⚠️ قاعدهٔ موبایل به انتهای فایل منتقل شد.

     دلیلش در همان‌جا توضیح داده شده: یک قاعدهٔ بی‌مدیا
     پایین‌تر، عرض تصویر را بازنویسی می‌کرد. */
  .cart-unit, .tier-hint { font-size: .72rem; }
  .tier-hint { margin-top: 4px; }
}

/* دکمهٔ دنبال‌کردن تأمین‌کننده (فعال) */
.btn[data-follow].following { background: var(--green-btn); color: var(--on-green); border-color: var(--green-btn); }
.vendor-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ======================================================================
   نشان وریفای تصویری (چهار سطح: bronze/silver/gold/premium)
   ====================================================================== */
.verify-badge { height: 18px; width: auto; vertical-align: middle; display: inline-block; }
.pvendor .verify-badge { height: 15px; }
.vendor-hero-type .verify-badge { height: 26px; }
.modal-type .verify-badge, .scard-type .verify-badge { height: 19px; }
.filter-group .verify-badge { height: 16px; }
.compare-table .verify-badge { height: 20px; }

/* ======================================================================
   اصلاح کارت اتحادیه در موبایل — دقیقاً مثل کارت تأمین‌کننده (تک‌ستونی لیستی)
   ====================================================================== */
@media (max-width: 768px) {
  .result-grid:has(.gcard) { grid-template-columns: 1fr !important; }
  .result-grid:has(.gcard) .gcard {
    flex-direction: row; align-items: center; text-align: start; gap: 14px; flex-wrap: wrap;
  }
  .result-grid:has(.gcard) .gcard-icon { flex: none; margin: 0; }
  .result-grid:has(.gcard) .gcard-body { flex: 1 1 50%; text-align: start; }
  .result-grid:has(.gcard) .gcard-link { flex: 1 1 100%; width: 100%; margin: 0; }

  /* بادج وریفای جمع‌وجور روی کارت محصول موبایل */
  .pcard .pvendor .verify-badge { height: 13px; }
}

/* خطاهای فرم */
.form-errors { background: #fdecea; color: #b3261e; border-radius: 12px; padding: 10px 14px; font-size: .85rem; margin-bottom: 12px; }
[data-theme="dark"] .form-errors { background: #3a1714; color: #ff9b8f; }
.field-err { color: var(--danger-text); font-size: .76rem; }

/* ======================================================================
   احراز هویت، پروفایل، پیام‌ها
   ====================================================================== */
.messages { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 11px 16px; border-radius: 12px; font-size: .9rem; font-weight: 600; }
.msg-success { background: var(--green-100); color: var(--green-text-soft); }
.msg-error { background: #fdecea; color: #b3261e; }
[data-theme="dark"] .msg-error { background: #3a1714; color: #ff9b8f; }
.msg-info { background: var(--bg); color: var(--ink); }

.dev-code { background: #fff7e6; color: #8a5a00; border: 1px dashed #e8b923; border-radius: 10px; padding: 8px 12px; font-size: .85rem; margin-bottom: 12px; text-align: center; }
[data-theme="dark"] .dev-code { background: #2a2210; color: #ffd766; }
.auth-card .btn { margin-top: 4px; }

/* پروفایل */
.profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.profile-side { display: flex; flex-direction: column; gap: 14px; }
.profile-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; text-align: center; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px; background: var(--green-btn); color: var(--on-green); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 900; }
.profile-card b { display: block; }
.profile-role { font-size: .8rem; color: var(--green-text); font-weight: 700; }
.profile-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; }
.profile-nav a, .profile-soon { padding: 11px 14px; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--slate); display: flex; justify-content: space-between; align-items: center; }
.profile-nav a:hover { background: var(--bg); color: var(--green-text); }
.profile-nav a.on { background: var(--green-100); color: var(--green-text-soft); }
.profile-soon { opacity: .6; cursor: default; }
.profile-soon i { font-size: .68rem; background: var(--bg); padding: 2px 8px; border-radius: 10px; font-style: normal; }
.profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pstat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; }
.pstat b { display: block; font-size: 1.4rem; font-weight: 900; color: var(--green-text); }
.pstat span { font-size: .8rem; color: var(--slate); }
.profile-h2 { font-size: 1.15rem; margin: 26px 0 14px; }
.profile-info { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 20px; }
.profile-info div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.profile-info div:last-child { border-bottom: none; }
.profile-info span { color: var(--slate); }
.profile-empty { color: var(--slate); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px; }

@media (max-width: 860px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================================
   پروفایل کاربری — هیرو، آمار، سفارش‌ها، آدرس‌ها (چشمگیر)
   ====================================================================== */
.pf-hero {
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(0,168,89,.22), transparent 60%),
    linear-gradient(135deg, #00824A 0%, #00A859 60%, #16C173 120%);
  color: #fff; padding: 30px 0 26px;
}
.pf-hero-inner { display: flex; align-items: center; gap: 18px; }
.pf-avatar {
  width: 78px; height: 78px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pf-id { flex: 1; }
.pf-id h1 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 900; }
.pf-role { display: inline-block; margin-top: 6px; background: rgba(255,255,255,.2); padding: 3px 12px; border-radius: 20px; font-size: .8rem; font-weight: 700; }
.pf-logout { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); color: #fff; }
.pf-logout:hover { background: rgba(0,0,0,.2); color: #fff; }

/* سایدبار (هم‌پوشانی با هیرو) */
.profile-side .profile-nav { margin-top: -34px; position: relative; z-index: 2; box-shadow: var(--shadow); }

/* آمار */
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pf-stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  display: flex; flex-direction: column; gap: 4px; transition: .2s; position: relative; overflow: hidden;
}
.pf-stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; }
.pf-stat-amber::before { background: #f59e0b; }
.pf-stat-green::before { background: var(--green-btn); }
.pf-stat-blue::before { background: #3b82f6; }
.pf-stat-purple::before { background: #8b5cf6; }
a.pf-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--green); }
.pf-stat-ic { font-size: 1.5rem; }
.pf-stat b { font-size: 1.7rem; font-weight: 900; }
.pf-stat span:last-child { font-size: .82rem; color: var(--slate); }

.pf-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 14px; }
.pf-sec-head h2 { font-size: 1.15rem; font-weight: 800; }
/* لینک‌های سادهٔ سرصفحه سبز می‌شوند، ولی دکمه‌ها نه — وگرنه متن سبز روی
   پس‌زمینهٔ سبز می‌نشیند و نامرئی می‌شود (کنتراست ۱:۱). */
.pf-sec-head a:not(.btn) { color: var(--green-text); font-weight: 700; font-size: .88rem; }
.pf-sec-head a.btn-primary { color: var(--on-green); }
.pf-sec-head a.btn-ghost { color: var(--ink); }

/* تب‌ها */
.pf-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.pf-tabs a { padding: 10px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--slate); }
.pf-tabs a.on { background: var(--green-100); color: var(--green-text-soft); border-color: var(--green); }

/* لیست سفارش */
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-row {
  display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px;
}
.order-ic { width: 48px; height: 48px; border-radius: 14px; flex: none; background: var(--green-100); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.order-main { flex: 1; min-width: 0; }
.order-top { display: flex; align-items: center; gap: 10px; }
.order-meta { font-size: .8rem; color: var(--slate); margin-top: 4px; }
.order-total { font-weight: 800; white-space: nowrap; }
.order-total small { font-size: .7rem; color: var(--slate); font-weight: 600; }
.order-track { font-size: .85rem; font-weight: 700; color: var(--green-text); white-space: nowrap; }
.order-badge { font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
.order-pending { background: #fef3c7; color: #92400e; }
.order-processing { background: #dbeafe; color: #1e40af; }
.order-shipped { background: #e0e7ff; color: #3730a3; }
/* «تحویل‌شده» عمداً قرمز است تا در فهرست وضعیت‌ها فوری دیده شود —
   کاربر بداند کارِ این سفارش تمام شده. */
.order-delivered { background: var(--danger-bg); color: var(--danger-text); }
.order-cancelled { background: #fee2e2; color: #991b1b; }

/* آدرس‌ها */
.addr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.addr-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.addr-card.addr-default { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.addr-badge { position: absolute; top: 14px; inset-inline-end: 14px; background: var(--green-btn); color: var(--on-green); font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
.addr-card b { display: block; margin-bottom: 6px; }
.addr-card p { color: var(--slate); font-size: .88rem; line-height: 1.8; }
.addr-phone { font-size: .82rem; color: var(--slate); display: block; margin-top: 8px; }
.addr-actions { display: flex; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.addr-link { font-size: .84rem; font-weight: 700; color: var(--green-text); }
/* حذف نشانی — قرمز روشن در هر دو مود، چون `--offer` زرد پس‌زمینه
   است و روی سفید و تیره هر دو محو می‌شد. */
.addr-del { color: var(--danger-text); font-weight: 700; }
.addr-del:hover { color: var(--danger-btn, var(--danger-text)); }
.addr-check { flex-direction: row !important; align-items: center; gap: 8px; }
.addr-check input { width: auto; }

/* خالی */
.pf-empty { text-align: center; padding: 36px 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: 16px; }
.pf-empty span { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.pf-empty p { color: var(--slate); margin-bottom: 14px; }

@media (max-width: 860px) {
  .pf-stats { grid-template-columns: repeat(2, 1fr); }
  .addr-grid { grid-template-columns: 1fr; }
  .profile-side .profile-nav { margin-top: 14px; }
}
@media (max-width: 560px) {
  /* موبایل: گرید تمیز به‌جای wrap که نشان وضعیت را روی مبلغ می‌انداخت */
  .order-row {
    display: grid; gap: 4px 12px; padding: 14px;
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "ic    main"
      "ic    total"
      "track track";
  }
  .order-ic { grid-area: ic; width: 44px; height: 44px; align-self: start; }
  .order-main { grid-area: main; }
  /* شماره و نشان وضعیت زیر هم، نه کنار هم */
  .order-top { flex-direction: column; align-items: flex-start; gap: 5px; }
  .order-top b { font-size: .84rem; line-height: 1.6; }
  .order-badge { align-self: flex-start; }
  .order-meta { font-size: .74rem; }
  .order-total {
    grid-area: total; justify-self: start;
    font-size: 1.02rem; font-weight: 800; margin-top: 6px;
  }

  /*
    ⚠️ مورد ۲-۳ — ناحیهٔ `track` باید به **پوشش دکمه‌ها**
    برسد، نه به یکی از فرزندانش.

    پیش‌تر `grid-area: track` روی `.order-track` بود، ولی آن
    فرزند `.order-acts` است نه فرزند مستقیم گرید. نتیجه:
    `.order-acts` جای مشخصی نداشت و به چیدمان خودکار
    می‌افتاد — همان به‌هم‌ریختگی تصویر.
  */
  .order-acts {
    grid-area: track; width: 100%;
    display: grid; gap: 8px;
    grid-auto-flow: column; grid-auto-columns: 1fr;
    padding-top: 12px; margin-top: 8px;
    border-top: 1px solid var(--line);
  }

  /*
    ⚠️ فرم از چیدمان حذف می‌شود تا دکمه‌اش مستقیم عضو گرید
    شود — وگرنه ارتفاعش با بقیه جور نیست.
  */
  .order-acts form { display: contents; }

  .order-acts > *,
  .order-acts form > button {
    width: 100%; box-sizing: border-box;
    height: 40px; display: inline-flex;
    align-items: center; justify-content: center;
    text-align: center; border-radius: 12px;
    font-size: .84rem; font-weight: 700;
  }

  .order-track {
    background: var(--bg-subtle); color: var(--ink-soft);
  }

  .order-cancel {
    background: var(--danger-bg); color: var(--danger-text);
  }
}

/* ======================================================================
   پروفایل: عکس کاربر، گزارش‌ها، درخواست‌ها
   ====================================================================== */
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ویرایش عکس */
.avatar-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.avatar-preview { width: 84px; height: 84px; border-radius: 50%; flex: none; overflow: hidden; background: var(--green-100); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900; color: var(--green-text-soft); }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload { cursor: pointer; }
.avatar-upload span { display: inline-block; background: var(--green-100); color: var(--green-text-soft); font-weight: 700; padding: 8px 16px; border-radius: 10px; font-size: .85rem; margin-bottom: 6px; }
.avatar-upload input { display: block; font-size: .8rem; }

/* گزارش‌ها */
.report-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.report-bar-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.rb-label { width: 130px; font-size: .85rem; color: var(--slate); flex: none; }
.rb-track { flex: 1; height: 12px; background: var(--bg); border-radius: 8px; overflow: hidden; }
.rb-fill { height: 100%; border-radius: 8px; background: var(--green-btn); transition: width .4s; min-width: 2px; }
.rb-pending { background: #f59e0b; } .rb-processing { background: #3b82f6; }
.rb-shipped { background: #6366f1; } .rb-delivered { background: var(--green-btn); }
.rb-cancelled { background: #ef4444; }
.rb-count { width: 34px; text-align: center; font-weight: 800; flex: none; }
.report-months { display: flex; align-items: flex-end; gap: 14px; height: 200px; }
.rm-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.rm-bar { width: 70%; min-height: 4px; background: linear-gradient(to top, var(--green), var(--green-400, #34d399)); border-radius: 8px 8px 0 0; transition: height .4s; }
.rm-label { font-size: .72rem; color: var(--slate); }

/* درخواست‌ها */
.req-list { display: flex; flex-direction: column; gap: 12px; }
.req-card { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.req-thumb { width: 90px; height: 90px; flex: none; border-radius: 12px; overflow: hidden; background: var(--green-100); display: flex; align-items: center; justify-content: center; color: var(--green-text-soft); font-weight: 700; font-size: .8rem; }
.req-thumb img { width: 100%; height: 100%; object-fit: cover; }
.req-main { flex: 1; min-width: 0; }
.req-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.req-meta { font-size: .78rem; color: var(--slate); margin: 6px 0; }
.req-desc { font-size: .88rem; color: var(--slate); line-height: 1.7; }
.req-foot { margin-top: 8px; font-size: .82rem; color: var(--green-text); font-weight: 700; }
.order-open { background: #dbeafe; color: #1e40af; }
.order-answered { background: var(--green-100); color: var(--green-text-soft); }
.order-closed { background: #e5e7eb; color: #4b5563; }

@media (max-width: 560px) {
  .report-months { height: 160px; }
  .req-card { flex-direction: column; }
  .req-thumb { width: 100%; height: 140px; }
  .rb-label { width: 96px; }
}

/* ======================================================================
   رفع اسکرول افقی موبایل در پروفایل
   ریشه: آیتم‌های گرید به‌صورت پیش‌فرض min-width:auto دارند و اجازه نمی‌دهند
   محتوای عریض (ردیف سفارش/نمودار) کوچک شود؛ با min-width:0 حل می‌شود.
   ====================================================================== */
.profile-layout { min-width: 0; }
.profile-layout > * { min-width: 0; }
.profile-main { min-width: 0; overflow-x: hidden; }
.pf-hero-inner { min-width: 0; flex-wrap: wrap; }
.pf-id { min-width: 0; }
.pf-id h1 { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  /* تضمین نبود اسکرول افقی صفحه در موبایل.
     نکته: overflow-x روی body باعث می‌شود مرورگر overflow-y را هم auto کند
     و body به ظرف اسکرول تبدیل شود — آن‌وقت padding-bottom آن دیده نمی‌شود
     و نوار پایین روی محتوا می‌افتد. پس روی <html> می‌گذاریمش. */
  html { overflow-x: hidden; }
  /* نمودار ماهانه: اگر جا نشد، داخل کارت اسکرول شود نه کل صفحه */
  .report-months { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rm-col { min-width: 44px; }
}

@media (max-width: 560px) {
  /* هیرو جمع‌وجورتر و بدون سرریز */
  .pf-hero-inner { gap: 12px; }
  .pf-avatar { width: 60px; height: 60px; font-size: 1.5rem; }
  .pf-logout { margin-inline-start: auto; }
  /* آمار: در گوشی‌های خیلی باریک هم دو ستون مرتب */
  .pf-stat { padding: 16px; min-width: 0; }
  .pf-stat b { font-size: 1.3rem; overflow-wrap: anywhere; }
  /* نمودار ماهانه اگر لازم شد اسکرول داخلی داشته باشد نه کل صفحه */
  .report-months { gap: 8px; }
  .report-card { padding: 16px; }
  .rb-label { width: 84px; font-size: .78rem; }
}

/* ======================================================================
   پنل تأمین‌کننده — مدیریت زیرمجموعه‌ها
   ====================================================================== */
.panel-hero { background: linear-gradient(135deg, #0f3d2e 0%, #00824A 60%, #00A859 120%); }
.member-list { display: flex; flex-direction: column; gap: 14px; }
.member-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.member-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.member-ava { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--green-btn); color: var(--on-green); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.member-id { flex: 1; min-width: 0; }
.member-id b { display: block; }
.member-id span { font-size: .8rem; color: var(--slate); }
.member-remove { color: var(--danger-text); font-weight: 700; font-size: .82rem; }
.member-perms { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font-size: .82rem; cursor: pointer; }
.perm-chip:has(input:checked) { background: var(--green-100); border-color: var(--green); color: var(--green-text-soft); font-weight: 700; }
.perm-chip input { width: auto; }
.member-save { margin-top: 12px; }

/* ثبت موقعیت مکانی در آدرس */
.geo-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--bg); }
.geo-map { height: 240px; width: 100%; border-radius: 10px; overflow: hidden; z-index: 0; }
.geo-controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.geo-status { font-size: .82rem; color: var(--slate); }
.geo-status.set { color: var(--green-700); font-weight: 700; }
.addr-map-link { display: inline-block; margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--green-text); }
.leaflet-container { font: inherit; }

/* دکمهٔ دنبال‌کردن واقعی */
.follow-btn.following { background: var(--green-btn); color: var(--on-green); border-color: var(--green-btn); }

/* ======================================================================
   پنل: مدیریت کالا + پاسخ RFQ + سایدبار وندور
   ====================================================================== */
.prod-list { display: flex; flex-direction: column; gap: 10px; }
.prod-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.prod-row.prod-off { opacity: .55; }
.prod-thumb { width: 54px; height: 54px; flex: none; border-radius: 10px; overflow: hidden; background: var(--green-100); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-main { flex: 1; min-width: 0; }
.prod-main b { display: block; font-size: .92rem; }
.prod-meta { font-size: .78rem; color: var(--slate); }
.prod-meta s { opacity: .7; }
.prod-meta i { color: var(--danger-text); font-style: normal; font-weight: 700; }
.prod-actions { display: flex; gap: 12px; flex: none; }

.rfq-answer { margin-top: 10px; }
.rfq-answer summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--green-text); list-style: none; }
.rfq-answer summary::-webkit-details-marker { display: none; }
.rfq-form { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--bg); border-radius: 12px; padding: 14px; }
.rfq-form .field-full { grid-column: 1 / -1; }
.rfq-form .btn { grid-column: 1 / -1; justify-self: start; }

.pnav-vendor { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; }
.pnav-vname { padding: 8px 14px 4px; font-size: .78rem; font-weight: 800; color: var(--slate); }
.pnav-vendor a { padding-inline-start: 26px; }

@media (max-width: 560px) {
  .prod-row { flex-wrap: wrap; }
  .prod-actions { width: 100%; justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--line); }
  .rfq-form { grid-template-columns: 1fr; }
}

/* پیشنهادهای تأمین‌کنندگان در درخواست مشتری */
.offer-list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.offer-row { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.offer-row b { margin-inline-end: 8px; }
.offer-price { float: inline-end; font-weight: 800; color: var(--green-700); }
.offer-row p { font-size: .85rem; color: var(--slate); margin-top: 6px; clear: both; }

/* لینک افزودن کالا در سایدبار */
.pnav-add { color: var(--green) !important; font-weight: 700; }

/* فرم کامل کالا در پنل */
.pform-h { margin: 22px 0 10px; font-size: .98rem; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.pform-h:first-of-type { margin-top: 0; }
.pform-hint { font-size: .8rem; color: var(--slate); margin-bottom: 10px; }
.field-hint { font-size: .72rem; color: var(--slate); }
.dyn-rows { display: flex; flex-direction: column; gap: 8px; }
.dyn-row { display: grid; grid-template-columns: 1fr 1fr 36px; gap: 8px; }
.dyn-row input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; }
.dyn-row input:focus { border-color: var(--green); outline: none; }
.dyn-del { border-radius: 10px; background: var(--bg); color: var(--offer-text); font-weight: 800; }
.dyn-add { margin-top: 10px; }
.pform-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 560px) { .dyn-row { grid-template-columns: 1fr 1fr 32px; } }

/* صفحهٔ محصول: قیمت پلکانی، همکار، مشخصات */
.pd-flash { background: linear-gradient(90deg, var(--offer, #e63946), #ff7b54); color: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 800; font-size: .88rem; margin: 12px 0; }
.pd-sale-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--slate); margin: 10px 0; }
.pd-tiers { margin: 14px 0; }
.pd-tiers h4 { font-size: .95rem; margin-bottom: 8px; }
.tier-table, .spec-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; overflow: hidden; }
.tier-table th, .tier-table td, .spec-table th, .spec-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: start; font-size: .88rem; }
.tier-table th { background: var(--green-100); color: var(--green-text-soft); font-weight: 800; }
.spec-table th { width: 34%; background: var(--bg); color: var(--slate); font-weight: 700; }
.tier-table tr:last-child td, .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
.pd-colleague { background: var(--green-100); color: var(--green-text-soft); border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin: 10px 0; }

/* ======================================================================
   گالری کالا (تصویر/ویدیو) + گالری فرم پنل
   ====================================================================== */
.pd-main video, .pd-main img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.pd-thumb { position: relative; padding: 0; overflow: hidden; cursor: pointer; border: 2px solid transparent; }
.pd-thumb.on { border-color: var(--green); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; pointer-events: none; }
.pd-vid-ic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #0f1115; color: #fff; font-size: 1rem; }

/* گالری فرم پنل */
.gal-existing { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.gal-item { position: relative; width: 96px; }
.gal-item img, .gal-item video { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; background: #0f1115; }
.gal-badge { position: absolute; top: 4px; inset-inline-start: 4px; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; padding: 0 6px; font-size: .7rem; }
.gal-remove { display: block; font-size: .72rem; color: var(--danger-text); margin-top: 4px; cursor: pointer; }
.gal-remove input { width: auto; }

/* سبد/چک‌اوت واقعی */
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cart-unit { font-size: .78rem; color: var(--slate); margin-top: 4px; }
.cart-qty-form button { background: none; }
.cart-count { display: inline-flex; align-items: center; justify-content: center; }
.addr-pick { display: flex; flex-direction: column; gap: 10px; }
.addr-pick-item { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; }
.addr-pick-item:has(input:checked) { border-color: var(--green); background: var(--green-100); }
.addr-pick-item p { font-size: .85rem; color: var(--slate); margin: 4px 0; }
.addr-pick-item span { font-size: .8rem; color: var(--slate); }
.co-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.co-item:last-child { border-bottom: none; }
.pd-buy-form { display: flex; gap: 10px; align-items: stretch; }
.pd-qty { width: 80px; text-align: center; font: inherit; padding: 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.pd-qty:focus { border-color: var(--green); outline: none; }

/* صفحهٔ موفقیت */
.order-done { max-width: 520px; margin: 30px auto; text-align: center; }
.od-check { font-size: 3.4rem; margin-bottom: 10px; }
.order-done h1 { font-size: 1.5rem; font-weight: 900; }
.order-done > p { color: var(--slate); margin: 8px 0 20px; }
.od-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; text-align: start; }
.od-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* روش پرداخت + درگاه دمو + راهنمای پله */
.pay-demo { background: #fde68a; color: #92400e; border-radius: 6px; padding: 1px 8px; font-size: .7rem; font-weight: 700; margin-inline-start: 6px; }
.tier-hint { margin-top: 6px; font-size: .78rem; color: var(--green-text-soft); background: var(--green-100); border-radius: 8px; padding: 4px 8px; display: inline-block; }
.gateway-box { max-width: 460px; margin: 30px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.gw-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; background: linear-gradient(135deg, #0f3d2e, #00824A); color: #fff; }
.gw-logo { font-size: 1.8rem; }
.gw-body { padding: 24px 22px; }
.gw-amount { font-size: 2rem; font-weight: 900; text-align: center; color: var(--green-700); }
.gw-amount small { font-size: 1rem; font-weight: 400; }
.gw-meta { display: flex; justify-content: space-between; margin: 18px 0; gap: 10px; }
.gw-meta div { display: flex; flex-direction: column; gap: 4px; }
.gw-meta span { font-size: .75rem; color: var(--slate); }
.gw-demo-note { background: #eff6ff; color: #1e40af; border-radius: 10px; padding: 10px 12px; font-size: .82rem; margin-bottom: 16px; }
.gw-actions { display: flex; flex-direction: column; gap: 10px; }
.pay-secure { font-size: .8rem; color: var(--slate); margin-top: 12px; }

/* لینک‌های ویژهٔ سایدبار پروفایل */
.profile-nav .admin-link span { color: #b91c1c; font-weight: 800; }
.profile-nav .ext-link span { color: var(--green-700); font-weight: 700; }

/* ردیف پلکان با مخاطب و درصد */
.tier-row { grid-template-columns: 90px 1fr 110px 120px 36px; }
.tier-row select { font: inherit; padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
@media (max-width: 640px) { .tier-row { grid-template-columns: 1fr 1fr; } .tier-row .dyn-del { grid-column: -1; } }

/* انتخابگر ارز در نوار بالا */
.currency-form { display: inline-flex; margin-inline-end: 10px; }
.currency-form select { font: inherit; font-size: .78rem; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 2px 8px; }
.currency-form select option { color: #111; }

/* هینت و نشان قیمت پلکانی */
.tier-flag { display: inline-block; background: var(--green-100); color: var(--green-text-soft); border-radius: 8px; padding: 1px 8px; font-size: .72rem; font-weight: 800; margin-inline-start: 8px; }
.tier-hint { font-size: .76rem; color: var(--slate); margin-top: 4px; }

/* ======================================================================
   کیف پول + باشگاه مشتریان
   ====================================================================== */
.wallet-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: linear-gradient(135deg, #0f3d2e, #00824A); color: #fff; border-radius: 18px; padding: 24px; flex-wrap: wrap; }
.wh-balance span { font-size: .82rem; opacity: .85; display: block; }
.wh-balance b { font-size: 1.9rem; font-weight: 900; }
.wh-balance small { font-size: .9rem; font-weight: 700; }
.wh-club { text-align: end; }
.wh-club span { display: block; font-weight: 800; margin-bottom: 6px; }
.wh-club a { color: #d9f7e8; font-size: .85rem; font-weight: 700; }
.wallet-charge { margin-top: 4px; max-width: 520px; }
.wc-amounts { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.wc-quick { background: var(--green-100); color: var(--green-text-soft); border-radius: 10px; padding: 8px 14px; font-weight: 800; font-size: .85rem; }
.tx-list { display: flex; flex-direction: column; gap: 8px; }
.tx-row { display: grid; grid-template-columns: 110px 1fr auto 150px; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .85rem; }
.tx-kind { font-weight: 800; }
.tx-deposit { color: var(--green-700); } .tx-payment { color: #b91c1c; }
.tx-amount { font-weight: 900; } .tx-amount.neg { color: #b91c1c; }
.tx-date { color: var(--slate); font-size: .76rem; text-align: end; }
.pay-bal { font-size: .78rem; color: var(--green-700); font-weight: 800; margin-inline-start: auto; }
.pay-demo { font-size: .7rem; background: #fef3c7; color: #92400e; border-radius: 8px; padding: 2px 8px; font-weight: 800; }

.club-hero { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, #4c1d95, #7c3aed); color: #fff; border-radius: 18px; padding: 24px; }
.club-badge { font-size: 3rem; }
.club-info b { display: block; font-size: 1.3rem; }
.club-info span { font-weight: 800; opacity: .95; }
.club-info small { display: block; margin-top: 6px; opacity: .85; }
.club-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.club-lv { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; opacity: .55; }
.club-lv.reached { opacity: 1; border-color: var(--green); background: var(--green-100); }
.club-lv .lv-ic { font-size: 1.5rem; display: block; }
.club-lv b { display: block; margin: 6px 0 2px; font-size: .9rem; }
.club-lv small { color: var(--slate); font-size: .72rem; }
@media (max-width: 640px) {
  .club-levels { grid-template-columns: repeat(2, 1fr); }
  .tx-row { grid-template-columns: 1fr auto; }
  .tx-desc { grid-column: 1 / -1; }
  .tx-date { grid-column: 1 / -1; text-align: start; }
  .wallet-hero { flex-direction: column; align-items: flex-start; }
  .wh-club { text-align: start; }
}

/* ======================================================================
   زنگولهٔ اعلان زنده
   ====================================================================== */
/* زنگ اعلان باید دقیقاً هم‌اندازهٔ بقیهٔ آیکن‌های هدر (.act) باشد،
   وگرنه نوار آیکن‌ها پس از ورود کاربر ناهماهنگ می‌شود. */
.notif-bell { position: relative; display: flex; }
.nb-btn {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: 8px 10px; border-radius: 12px; min-width: 46px;
  min-height: 39px;              /* دقیقاً هم‌ارتفاع .act */
  font-size: .7rem; color: var(--slate);
}
.nb-btn:hover { background: var(--bg); color: var(--green-text); }
.nb-btn .icon { width: 22px; height: 22px; flex: none; }
/* نشان: کوچک، گرد و کاملاً درون کادر — پیش‌تر از لبه بیرون می‌زد */
.nb-badge {
  position: absolute; top: 3px; inset-inline-start: 3px;
  background: var(--offer-btn); color: var(--on-offer);
  font-size: .6rem; font-weight: 900; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; box-shadow: 0 0 0 2px var(--surface);
}
.nb-panel { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 330px; max-width: 86vw; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.14); z-index: 60; overflow: hidden; }
.notif-bell.open .nb-panel { display: block; }
.nb-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.nb-head a { color: var(--green-text); font-weight: 700; font-size: .8rem; }
.nb-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.nb-item:hover { background: var(--bg); }
.nb-item.unread { background: var(--green-100); }
.nb-ic { font-size: 1.1rem; flex: none; }
.nb-tx { min-width: 0; }
.nb-tx b { display: block; font-size: .82rem; }
.nb-tx small { display: block; color: var(--slate); font-size: .74rem; }
.nb-tx i { font-style: normal; color: var(--slate); font-size: .68rem; }
.nb-empty { padding: 22px; text-align: center; color: var(--slate); font-size: .85rem; }
.side-badge { background: var(--offer-btn); color: var(--on-offer); border-radius: 9px; font-size: .68rem; font-weight: 900; padding: 1px 7px; font-style: normal; }
.notif-row.unread { border-inline-start: 3px solid var(--green); }

/* ======================================================================
   دوستان + چت زنده
   ====================================================================== */
.fr-actions { display: flex; gap: 8px; }
.chat-list { display: flex; flex-direction: column; gap: 8px; }
.chat-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.chat-item:hover { border-color: var(--green); }
.ci-main { flex: 1; min-width: 0; }
.ci-main b { display: block; font-size: .9rem; }
.ci-main small { color: var(--slate); font-size: .78rem; }
.ci-unread { background: var(--green-btn); color: var(--on-green); border-radius: 10px; font-size: .72rem; font-weight: 900; padding: 2px 9px; }

.chat-wrap { max-width: 720px; }
.chat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ch-title { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.chat-box { height: 55vh; min-height: 320px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; align-self: flex-start; }
.msg.mine { align-self: flex-end; }
.msg-body { background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: .9rem; line-height: 1.7; word-break: break-word; }
.msg.mine .msg-body { background: var(--green-btn); color: var(--on-green); border-color: var(--green-btn); border-radius: 14px 14px 4px 14px; }
.msg-meta { font-size: .66rem; color: var(--slate); margin-top: 3px; padding-inline: 6px; }
.msg.mine .msg-meta { text-align: end; }
.chat-form { display: flex; gap: 10px; margin-top: 12px; }
.chat-form input { flex: 1; font: inherit; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.chat-form input:focus { border-color: var(--green); outline: none; }

/* مقایسهٔ واقعی + دکمه‌های فعال */
/*
  ⚠️ مورد ۲۰ — قلب علاقه‌مندی باید قرمز باشد، نه زرد.

  `--offer` رنگ پس‌زمینهٔ برچسب تخفیف است؛ استفاده‌اش برای
  `color` قلب را زرد می‌کرد.
*/
.fav.on { color: var(--danger-text); }
.fav-compare.on { color: var(--green-text); }
.fav-share:hover { color: var(--green-text); }
.compare-scroll { overflow-x: auto; }
.compare-table { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--surface); border-radius: 16px; overflow: hidden; }
.compare-table th, .compare-table td { border: 1px solid var(--line); padding: 12px 14px; text-align: center; font-size: .88rem; vertical-align: top; }
.ct-label { background: var(--bg); font-weight: 800; color: var(--slate); width: 140px; text-align: start !important; }
.ct-prod { position: relative; min-width: 170px; }
.ct-prod img { width: 90px; height: 70px; object-fit: cover; border-radius: 10px; display: block; margin: 0 auto 8px; }
.ct-prod b { display: block; font-size: .88rem; }
.ct-prod small { color: var(--slate); }
.ct-remove { position: absolute; top: 6px; inset-inline-end: 8px; color: var(--danger-text); font-weight: 900; }
.ct-price { color: var(--green-700); }
.ct-off { display: inline-block; background: var(--offer-btn); color: var(--on-offer); border-radius: 8px; padding: 0 8px; font-size: .72rem; font-weight: 800; margin-inline-start: 6px; }
.search-page { display: flex; gap: 10px; max-width: 640px; }
.search-page .search-input { flex: 1; font: inherit; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }

/* ویجت شناور چت (همهٔ صفحات) */
.chat-launcher { position: fixed; bottom: 86px; inset-inline-start: 18px; z-index: 70; }
@media (min-width: 900px) { .chat-launcher { bottom: 24px; } }
.cl-fab { width: 54px; height: 54px; border-radius: 50%; background: var(--green-btn); color: var(--on-green); font-size: 1.35rem; box-shadow: 0 10px 26px rgba(0,130,74,.4); position: relative; }
.cl-badge { position: absolute; top: -4px; inset-inline-end: -4px; background: var(--offer-btn); color: var(--on-offer); border-radius: 10px; min-width: 19px; height: 19px; font-size: .68rem; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.cl-panel { display: none; position: absolute; bottom: 64px; inset-inline-start: 0; width: 290px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.16); overflow: hidden; }
.chat-launcher.open .cl-panel { display: block; }
.cl-head { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.cl-head a { color: var(--green-text); font-size: .8rem; font-weight: 700; }
.cl-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.cl-item:hover { background: var(--bg); }
.cl-item b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ======================================================================
   محیط چت دوپنله (فهرست + پنجرهٔ گفتگو)
   ====================================================================== */
.chat-env { display: grid; grid-template-columns: 280px 1fr; gap: 16px; max-width: 1000px; margin: 0 auto; }
.ce-side { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; align-self: start; }
.ce-side-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ce-side-list { max-height: 62vh; overflow-y: auto; }
.ce-side-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.ce-side-item b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ce-side-item:hover { background: var(--bg); }
.ce-side-item.on { background: var(--green-100); border-inline-start: 3px solid var(--green); }
.ce-main { min-width: 0; }
.ch-sub { display: block; color: var(--slate); font-size: .72rem; }
.ce-back { display: none; }
@media (max-width: 860px) {
  .chat-env { grid-template-columns: 1fr; }
  .ce-side { display: none; }          /* موبایل: فهرست در صفحهٔ گفتگوها */
  .ce-back { display: inline-flex; }
}
.chat-form button { white-space: nowrap; }

/* ======================================================================
   زیباسازی سبد خرید
   ====================================================================== */
.cart-row { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; transition: box-shadow .18s, border-color .18s; }
.cart-row:hover { border-color: var(--green); box-shadow: 0 8px 24px rgba(0,130,74,.08); }
.cart-thumb { width: 92px; height: 92px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--green-100), var(--bg)); display: flex; align-items: center; justify-content: center; flex: none; }
.cart-title { font-weight: 800; font-size: .95rem; }
.cart-title:hover { color: var(--green-text); }
.cart-vendor { display: inline-block; background: var(--bg); border: 1px solid var(--line); color: var(--slate); border-radius: 999px; padding: 2px 10px; font-size: .72rem; margin-top: 6px; }
.cart-qty { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
.cart-qty button { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); font-weight: 900; font-size: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: background .15s, color .15s; }
.cart-qty button:hover { background: var(--green-btn); color: var(--on-green); }
.cart-qty span { min-width: 34px; text-align: center; font-weight: 800; }
.cart-price { font-weight: 900; color: var(--green-700); font-size: 1.02rem; white-space: nowrap; }
.cart-remove { width: 32px; height: 32px; border-radius: 50%; color: var(--slate); transition: all .15s; }
.cart-remove:hover { background: #fee2e2; color: #b91c1c; }
.cart-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.05); position: sticky; top: 90px; }
.cart-summary h3 { border-bottom: 2px dashed var(--line); padding-bottom: 12px; margin-bottom: 6px; }
.sum-total { border-top: 2px dashed var(--line); margin-top: 8px; padding-top: 12px; font-size: 1.02rem; }
.sum-total b { color: var(--green-700); }
/* مورد ۷: دکمهٔ ادامهٔ خرید به‌جای تمام‌عرض، به سمت مناسبِ جهت صفحه تراز شود.
   با logical properties در RTL به چپ و در LTR به راست می‌رود — خودکار. */
.cart-next { display: inline-flex; margin-inline-start: auto; margin-top: 14px; padding-inline: 34px; box-shadow: 0 8px 20px rgba(0,130,74,.3); }
.cart-foot-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.tier-hint { background: #fffbeb; border: 1px dashed #f59e0b; color: #92400e; border-radius: 10px; padding: 6px 10px; margin-top: 8px; display: inline-block; }

/* کارت‌های علاقه‌مندی (و کارت‌ها در کل) کمی لوکس‌تر */
.pcard { transition: transform .18s, box-shadow .18s; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.pthumb-tools .fav { backdrop-filter: blur(6px); background: rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.pthumb-tools .fav:hover { transform: scale(1.12); }
.pthumb-tools .fav.on { background: #fff; }

/* کشویی‌ها: آیتم‌های تمیزتر */
/* تب‌های پنل تأمین‌کننده + سفارش‌ها + گزارش */
.panel-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 20px; border-bottom: 2px solid var(--line); }
.panel-tabs a { padding: 10px 16px; font-size: .88rem; font-weight: 700; color: var(--slate); border-radius: 12px 12px 0 0; }
.panel-tabs a.on { background: var(--surface); color: var(--green-700); border: 2px solid var(--line); border-bottom-color: var(--surface); margin-bottom: -2px; }
.vorder { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.vorder-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vorder-items { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.vo-item { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .8rem; }
.vorder-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 12px; }
.vorder-status { display: flex; gap: 8px; }
.vorder-status select { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.stock-low { border-color: #f59e0b; background: #fffbeb; }

/* چت مدرن: هدر گرادیانی، جستجو، حباب دم‌دار، یادداشت */
.chat-head-modern { background: linear-gradient(120deg, #0f3d2e, #00824A); color: #fff; border-radius: 18px 18px 0 0; padding: 12px 16px; margin-bottom: 0; }
.chat-head-modern .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.ava-lg { width: 42px; height: 42px; font-size: 1.05rem; background: rgba(255,255,255,.18); color: #fff; }
.ch-sub { color: #cdeede; }
.ch-actions { margin-inline-start: auto; display: flex; gap: 6px; }
.ch-tool { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 1rem; transition: background .15s; }
.ch-tool:hover, .ch-tool.on { background: rgba(255,255,255,.3); }
.ce-search { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ce-search input { width: 100%; font: inherit; font-size: .82rem; padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.ce-search input:focus { border-color: var(--green); outline: none; }
.note-box { display: none; background: #fffbeb; border: 1px dashed #f59e0b; border-top: none; padding: 10px 14px; }
.note-box.open { display: block; }
.note-box form { display: flex; gap: 8px; }
.note-box input { flex: 1; font: inherit; font-size: .84rem; padding: 8px 12px; border-radius: 10px; border: 1px solid #f59e0b; background: #fff; }
.chat-box-modern { border-radius: 0; border-top: none; background: linear-gradient(180deg, var(--bg), var(--surface)); }
.chat-box-modern .msg-body { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.chat-form-modern { margin-top: 0; background: var(--surface); border: 1px solid var(--line); border-top: none; border-radius: 0 0 18px 18px; padding: 12px; }
.chat-send-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--green-btn); color: var(--on-green); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,130,74,.35); transition: transform .15s; }
.chat-send-btn:hover { transform: scale(1.08); }
.chat-send-btn .icon { width: 20px; height: 20px; }

/* بنرهای CMS */
.cms-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cms-banner { position: relative; min-height: 130px; border-radius: 18px; padding: 22px; background: linear-gradient(120deg, #0f3d2e, #00824A); background-size: cover; background-position: center; color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 6px; overflow: hidden; transition: transform .18s; }
.cms-banner:hover { transform: translateY(-3px); }
.cms-banner b { font-size: 1.15rem; font-weight: 900; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.cms-banner span { font-size: .85rem; opacity: .92; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.static-body { max-width: 760px; margin: 0 auto; line-height: 2.1; font-size: .95rem; }

/* ======================================================================
   بخش ویزیتور + درخت سازمانی
   ====================================================================== */
.visitor-badge { display: flex; flex-direction: column; gap: 3px; background: linear-gradient(120deg, #1e3a8a, #3b82f6); color: #fff; border-radius: 16px; padding: 16px 20px; margin-bottom: 16px; }
.visitor-badge.vb-internal { background: linear-gradient(120deg, #0f3d2e, #00824A); }
.visitor-badge span { font-size: .78rem; opacity: .85; }
.visitor-badge b { font-size: 1.15rem; }
.visitor-badge small { opacity: .8; }
.sc-meta { display: block; color: var(--slate); font-size: .74rem; margin-top: 2px; }

.org-tree { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; overflow-x: auto; }
.org-root { display: inline-flex; flex-direction: column; background: linear-gradient(120deg, #4c1d95, #7c3aed); color: #fff; border-radius: 14px; padding: 12px 20px; margin-bottom: 8px; }
.org-root small { opacity: .8; font-size: .72rem; }
.org-list { list-style: none; margin: 0; padding-inline-start: 22px; border-inline-start: 2px dashed var(--line); }
.org-tree > .org-list { border: none; padding-inline-start: 0; }
.org-node { margin: 8px 0; position: relative; }
.org-card { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.org-card.org-internal { border-color: var(--green); }
.org-card.org-independent { border-color: #3b82f6; }
.org-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--green-btn); color: var(--on-green); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.org-independent .org-ava { background: #3b82f6; }
.org-info b { display: block; font-size: .9rem; }
.org-info span { font-size: .78rem; color: var(--slate); }
.org-info small { display: block; font-size: .72rem; color: var(--green-700); }

/* اکشن‌های سر گفتگوها + خوانایی دکمه‌ها */
.chat-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-head-actions .btn-primary { color: #fff; }        /* متن سفید روی سبز */
.cl-head a, .ce-side-head a { color: var(--green-700); }

/* ======================================================================
   درختوارهٔ لیستی جمع‌شونده (زیبا و ساده)
   ====================================================================== */
.tree-root, .tnode-children { list-style: none; margin: 0; padding: 0; }
.tnode-children { padding-inline-start: 22px; margin-inline-start: 10px; border-inline-start: 1.5px dashed var(--line); display: none; }
.tnode.open > .tnode-children { display: block; }
.tnode-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.tnode-toggle { width: 26px; height: 26px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: .8rem; color: var(--slate); flex: none; transition: transform .18s, background .15s; }
.tnode-toggle:hover { background: var(--green-100); color: var(--green-text-soft); }
.tnode.open > .tnode-row > .tnode-toggle { transform: rotate(90deg); }
.tnode-leaf { width: 26px; text-align: center; color: var(--line); flex: none; }
.tnode-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; transition: border-color .15s, box-shadow .15s; }
.tnode-link:hover { border-color: var(--green); box-shadow: 0 4px 14px rgba(0,130,74,.1); }
.tnode-ava { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex: none; }
.ava-internal { background: linear-gradient(135deg, #2563eb, #1e40af); }
.ava-independent { background: linear-gradient(135deg, #00824A, #0f3d2e); }
.tnode-main { min-width: 0; }
.tnode-main b { display: block; font-size: .9rem; }
.tnode-main small { color: var(--slate); font-size: .74rem; }

/* صفحهٔ جزئیات ویزیتور + تب‌ها */
.vd-head { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.vd-ava { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: #fff; flex: none; }
.vd-headinfo b { font-size: 1.05rem; display: block; margin-bottom: 4px; }
.vd-headinfo small { display: block; color: var(--slate); margin-top: 4px; }
.vd-tabs { display: flex; flex-wrap: wrap; }
.vd-tabs > input[type="radio"] { display: none; }
.vd-tabs > label { padding: 10px 18px; font-weight: 700; font-size: .88rem; color: var(--slate); cursor: pointer; border-radius: 12px 12px 0 0; border: 2px solid transparent; }
.vd-tabs > label:hover { color: var(--green-700); }
.vd-panel { display: none; order: 99; width: 100%; border-top: 2px solid var(--line); padding-top: 16px; }
#vdt-info:checked ~ label[for="vdt-info"],
#vdt-income:checked ~ label[for="vdt-income"],
#vdt-team:checked ~ label[for="vdt-team"],
#vdt-prod:checked ~ label[for="vdt-prod"] { color: var(--green-700); border-color: var(--line); border-bottom-color: var(--surface); background: var(--surface); }
#vdt-info:checked ~ .vd-panel[data-for="vdt-info"],
#vdt-income:checked ~ .vd-panel[data-for="vdt-income"],
#vdt-team:checked ~ .vd-panel[data-for="vdt-team"],
#vdt-prod:checked ~ .vd-panel[data-for="vdt-prod"] { display: block; }
.vd-teamsum { background: var(--green-100); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; font-size: .9rem; }

/* تیکت */
.ticket-thread { display: flex; flex-direction: column; gap: 10px; }
.tk-msg { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.tk-staff { background: var(--green-100); border-color: var(--green); }
.tk-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .82rem; }
.tk-head small { color: var(--slate); }
.tk-body { font-size: .9rem; line-height: 1.8; }

/* ======================================================================
   هدر: فقط آیکون + نشان ورود
   ====================================================================== */
.actions .act { font-size: 0; padding: 9px; border-radius: 12px; position: relative; }
.actions .act .icon { width: 21px; height: 21px; }
.actions .act:hover { background: var(--bg); }
/* کاربر واردشده: آیکون سبز + نقطهٔ وضعیت */
.act-authed { color: var(--green-text-soft); background: var(--green-100); }
.act-authed:hover { background: var(--green-btn); color: var(--on-green); }
.act-dot { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; border: 1.5px solid var(--surface); }
.act-authed:hover .act-dot { border-color: var(--green); }

/* پیوست تیکت */
.tk-att { display: inline-block; margin-top: 8px; }
.tk-att img { max-width: 220px; max-height: 160px; border-radius: 10px; border: 1px solid var(--line); }

/* موقعیت و مدارک در فرم فروشنده شوید */
.geo-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.geo-state { font-size: .82rem; color: var(--slate); }
.geo-state.on { color: var(--green-700); font-weight: 700; }
.geo-hint, .docs-hint { display: block; color: var(--slate); font-size: .78rem; margin-top: 6px; }
.docs-box { border: 1px dashed var(--line); border-radius: 16px; padding: 18px; margin: 18px 0; background: var(--bg); }
.docs-box h3 { margin: 0 0 4px; font-size: 1rem; }
.docs-box .docs-hint { margin-bottom: 12px; }
.docs-box input[type=file] { font-size: .82rem; }

/* ==========================================================================
   بند ۳: فوتر همیشه در پایین صفحه (حتی صفحهٔ خالی) و فقط با اسکرول دیده شود
   ========================================================================== */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }        /* محتوا فضای خالی را پر می‌کند */
body > footer, body > .footer { flex-shrink: 0; }

/* ==========================================================================
   بند ۱۴/۱۵: کشویی کناری موبایل (هم‌سبک با کشوی فیلتر فروشگاه)
   ========================================================================== */
.msheet { position: fixed; inset: 0; z-index: 95; }
.msheet[hidden] { display: none; }
.msheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.msheet-panel {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 340px);
  background: var(--surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: msheet-in .22s ease;
}
@keyframes msheet-in { from { transform: translateX(var(--sheet-from, -100%)); } to { transform: none; } }
html[dir="rtl"] .msheet-panel { --sheet-from: -100%; }
html[dir="ltr"] .msheet-panel { --sheet-from: -100%; }
.msheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none;
}
.msheet-head b { font-size: 1rem; }
.msheet-close { font-size: 1.1rem; color: var(--slate); width: 32px; height: 32px; border-radius: 8px; }
.msheet-close:hover { background: var(--bg); color: var(--offer-text); }
.msheet-body { padding: 14px 16px 26px; overflow-y: auto; flex: 1; }
.msheet-user {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px;
}
.msheet-user:hover { border-color: var(--green); }
.msheet-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #00824A, #0f3d2e); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.msheet-user b { display: block; font-size: .9rem; }
.msheet-user small { color: var(--slate); font-size: .76rem; }
.msheet-login { width: 100%; justify-content: center; margin-bottom: 14px; }
.msheet-nav { display: flex; flex-direction: column; }
.msheet-nav a {
  padding: 11px 8px; border-radius: 10px; font-size: .9rem; font-weight: 600;
  display: flex; align-items: center; gap: 9px;
}
.msheet-nav a:hover { background: var(--green-100); color: var(--green-text-soft); }
.msheet-group { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.msheet-group summary {
  cursor: pointer; font-weight: 800; font-size: .82rem; color: var(--slate);
  padding: 6px 8px; list-style: none;
}
.msheet-group summary::-webkit-details-marker { display: none; }
.msheet-group summary::after { content: "▾"; float: inline-end; transition: transform .18s; }
.msheet-group[open] summary::after { transform: rotate(180deg); }
.msheet-langs { display: flex; gap: 6px; margin-top: 14px; }
.msheet-langs button {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: var(--slate); background: var(--surface);
}
.msheet-langs button.on { background: var(--green-btn); border-color: var(--green); color: var(--on-green); }
.msheet-logout {
  display: block; text-align: center; margin-top: 16px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; font-size: .85rem;
  color: var(--danger-text); font-weight: 700;
}
.msheet-logout:hover {
  background: var(--danger-bg);
  border-color: var(--danger-text);
}

/* ==========================================================================
   بند ۱۲: نوار مقایسه (پایین صفحه)
   ========================================================================== */
.cmp-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,.10); animation: cmp-up .22s ease;
}
.cmp-bar[hidden] { display: none; }
@keyframes cmp-up { from { transform: translateY(100%); } to { transform: none; } }
.cmp-bar-in { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.cmp-bar-items { display: flex; align-items: center; gap: 8px; flex: 1; overflow-x: auto; }
.cmp-bar-label { font-weight: 800; font-size: .82rem; color: var(--slate); flex: none; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 6px 5px 10px; font-size: .78rem;
}
.cmp-chip img, .cmp-chip i {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none;
  display: flex; align-items: center; justify-content: center; background: var(--surface);
  font-style: normal;
}
.cmp-chip b { font-weight: 600; white-space: nowrap; }
.cmp-chip-x {
  width: 20px; height: 20px; border-radius: 50%; font-size: .65rem;
  color: var(--slate); background: transparent; flex: none;
}
.cmp-chip-x:hover { background: var(--offer-btn); color: var(--on-offer); }
.cmp-bar-actions { display: flex; gap: 8px; flex: none; }
.cmp-bar-actions .btn { padding: 8px 14px; font-size: .82rem; }
/* در موبایل، نوار بالای منوی پایین بنشیند */
@media (max-width: 780px) {
  .cmp-bar { bottom: 58px; }
  .cmp-bar-in { flex-direction: column; align-items: stretch; gap: 8px; }
  .cmp-bar-actions .btn { flex: 1; justify-content: center; }
  .cmp-clear { flex: 0 0 auto; }
}

/* ==========================================================================
   بند ۹: شیت اشتراک‌گذاری استاندارد
   ========================================================================== */
.vh-share { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.vh-share-ov { position: absolute; inset: 0; background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vh-share-box {
  position: relative; background: var(--surface); border-radius: 20px 20px 0 0;
  width: min(460px, 100%); padding: 18px; box-shadow: var(--shadow-lg);
  animation: share-up .22s ease;
}
@keyframes share-up { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 640px) {
  .vh-share { align-items: center; }
  .vh-share-box { border-radius: 20px; animation: share-pop .18s ease; }
  @keyframes share-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
}
.vh-share-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.vh-share-head b { font-size: 1rem; }
.vh-share-x { width: 30px; height: 30px; border-radius: 8px; color: var(--slate); }
.vh-share-x:hover { background: var(--bg); color: var(--offer-text); }
.vh-share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.vh-share-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 12px; font-size: .74rem; font-weight: 600;
  color: var(--ink); transition: background .15s;
}
.vh-share-item:hover { background: var(--green-100); color: var(--green-text-soft); }
.vh-share-ic {
  width: 42px; height: 42px; border-radius: 50%; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.vh-share-copy { display: flex; gap: 8px; margin-top: 16px; }
.vh-share-copy input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: .78rem; direction: ltr; text-align: left; background: var(--bg); color: var(--slate);
}
.vh-share-copy .btn { flex: none; }
.vh-share-copy .btn.ok { background: #16a34a; }

/* ==========================================================================
   بند ۱۶: ویجت چت شیشه‌ای — با هاور پررنگ
   ========================================================================== */
.chat-launcher-btn, .cl-fab {
  background: rgba(0, 130, 74, .45) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  opacity: .72;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.chat-launcher-btn:hover, .cl-fab:hover,
.chat-launcher-btn:focus-visible, .cl-fab:focus-visible {
  background: var(--green-btn) !important;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 130, 74, .34);
}

/* بند ۸: نشان نوع و چت در صفحهٔ کالا */
.pd-vendor-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-kind {
  font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: var(--green-100); color: var(--green-text-soft);
}
.pd-kind-service { background: #dbeafe; color: #1e40af; }
.pd-vtype { font-size: .72rem; color: var(--slate); }
.pd-chat-link {
  font-size: .74rem; font-weight: 700; color: var(--green-700);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.pd-chat-link:hover { background: var(--green-btn); border-color: var(--green); color: var(--on-green); }

/* ==========================================================================
   بند ۵ و ۶: منوی داشبورد/پنل به‌صورت کشویی در موبایل
   ========================================================================== */
.pside-toggle { display: none; }
@media (max-width: 900px) {
  .pside-toggle {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
    padding: 11px 14px; font-weight: 800; font-size: .88rem; color: var(--ink);
    margin-bottom: 10px;
  }
  .pside-toggle .icon { width: 18px; height: 18px; color: var(--green-700); }
  .pside-toggle span { flex: 1; text-align: start; }
  .pside-caret { font-style: normal; color: var(--slate); transition: transform .2s; }
  .pside-toggle[aria-expanded="true"] { border-color: var(--green); }
  .pside-toggle[aria-expanded="true"] .pside-caret { transform: rotate(180deg); }
  /*
    منو در موبایل یک کشوی روی صفحه است، نه آکاردئون داخل جریان.

    چرا؟ با آکاردئونِ سقف‌دار، دو ناحیهٔ اسکرول روی هم می‌افتادند و
    کاربر باید نوار باریک کنار منو را پیدا می‌کرد تا خودِ صفحه را
    حرکت دهد. با کشو، اسکرول صفحه قفل می‌شود و فقط یک چیز حرکت
    می‌کند: خود منو.

    ضمناً وقتی منو باز است اصلاً دلیلی برای اسکرول صفحه نیست —
    باز می‌کنید، انتخاب می‌کنید، بسته می‌شود.
  */
  .profile-side { display: none; }

  /*
    پنجره وسط صفحه می‌نشیند، نه چسبیده به لبه.

    `position: fixed` با `inset: 0` و `margin: auto` — به‌جای
    `top: 50%` و `translateY(-50%)`. دلیلش این است که با روش
    ترجمه‌ای، اگر محتوا از ارتفاع صفحه بلندتر شود، بالای پنجره از
    لبه بیرون می‌زند و دیگر قابل اسکرول نیست. با `margin: auto` و
    `max-height` پنجره هرگز از کادر بیرون نمی‌رود.

    `100dvh` نه `100vh`: در موبایل نوار آدرس مرورگر جمع و باز
    می‌شود و `vh` همیشه بزرگ‌ترین حالت را می‌گیرد.
  */
  .profile-side.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 96;            /* بالاتر از نوار ثابت پایین (۵۰) */
    margin: auto;
    width: min(90vw, 380px);
    height: fit-content;
    max-height: min(82dvh, 640px);
    padding: 0 14px 18px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    animation: pside-in .2s ease;
  }

  /* ظاهرشدن از مرکز — بدون جهت، پس در RTL و LTR یکسان است */
  @keyframes pside-in {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- نوار بالای کشو ---------- */
  /* این بلوک را pages.js می‌سازد، تا چهار قالب پایه دست‌نخورده بمانند */
  .pside-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* حاشیهٔ منفی تا نوار تا لبهٔ پنجره کشیده شود، با گوشه‌های گرد
       هماهنگ با خودِ پنجره */
    margin: 0 -14px 12px;
    padding: 13px 16px;
    border-radius: 18px 18px 0 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .pside-bar b { font-size: .95rem; font-weight: 800; }

  .pside-close {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border: 0; border-radius: 10px; cursor: pointer;
    background: var(--bg); color: var(--slate);
    font-size: 1rem;
  }
  .pside-close:active { background: var(--green-100); color: var(--green-text-soft); }

  /* ---------- پس‌زمینهٔ تیره ---------- */
  .pside-backdrop {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .pside-backdrop.on { opacity: 1; pointer-events: auto; }

  .profile-layout { display: block; }
}

/* پس‌زمینه فقط در حالت کشویی معنا دارد */
@media (min-width: 901px) {
  .pside-backdrop { display: none; }
}

/* ==========================================================================
   بند ۲ و ۴: نشان پیام جدید در فهرست چت + اسکرول مستقل + کشویی موبایل
   ========================================================================== */
/* اسکرول مستقل: با رسیدن به انتهای لیست، صفحه حرکت نکند */
.ce-side-list { overscroll-behavior: contain; scrollbar-width: thin; }
/* نشان گفتگوی دارای پیام جدید */
.ce-side-item.has-new { background: var(--green-100); }
.ce-side-item.has-new b { font-weight: 900; }
.ce-side-item .member-ava { position: relative; }
.ava-dot {
  position: absolute; top: -1px; inset-inline-end: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--offer-btn); border: 2px solid var(--surface);
  animation: dot-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}
.ci-unread { min-width: 22px; text-align: center; flex: none; }

/* کشویی انتخاب مخاطب (فقط موبایل) */
.cs-picker { display: none; }
@media (max-width: 900px) {
  .chat-env { display: block; }
  .cs-picker {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
    padding: 10px 14px; margin-bottom: 10px; position: relative;
  }
  .cs-picker b { flex: 1; text-align: start; font-size: .9rem; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
  .cs-picker[aria-expanded="true"] { border-color: var(--green); }
  .cs-picker[aria-expanded="true"] .pside-caret { transform: rotate(180deg); }
  .cs-picker-badge { animation: dot-pulse 1.8s ease-in-out infinite; }
  /* فهرست پیش‌فرض بسته → فضا اشغال نمی‌کند */
  .ce-side { display: none; margin-bottom: 12px; }
  .ce-side.open { display: block; animation: pside-in .18s ease; }
  .ce-side-list { max-height: 50vh; }
}

/* ==========================================================================
   بند ۱۰: اسلایدشوی صفحه‌ها (تأمین‌کنندگان، کارخانه‌ها، فروشندگان، خدمات…)
   با یک اسلاید، حرکت متوقف و تصویر ثابت می‌ماند.
   ========================================================================== */
.pshow { padding: 14px 0 0; }
.pshow .wrap { position: relative; }
.pshow-track {
  position: relative; border-radius: 20px; overflow: hidden;
  height: clamp(180px, 26vw, 300px); background: var(--band);
}
.pshow-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
  background-size: cover; background-position: center;
  display: flex; align-items: center; padding: 0 clamp(18px, 4vw, 48px);
}
.pshow-slide.on { opacity: 1; }
/* یک اسلاید → بدون انیمیشن و بدون گذار */
.pshow-static .pshow-slide { opacity: 1; transition: none; animation: none; }
.pshow-body { max-width: 560px; color: #fff; }
.pshow-tag {
  display: inline-block; background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 3px 12px; font-size: .72rem; font-weight: 700;
  margin-bottom: 8px;
}
.pshow-body h2 { font-size: clamp(1.1rem, 2.6vw, 1.75rem); line-height: 1.5; margin: 0 0 6px; }
.pshow-body h2 span { color: var(--green-100); }
.pshow-body p { font-size: .84rem; opacity: .9; margin: 0 0 12px; }
.pshow-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.pshow-dots button {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line);
  transition: width .2s, background .2s;
}
.pshow-dots button.on { width: 22px; border-radius: 999px; background: var(--green-btn); }
@media (max-width: 640px) {
  .pshow-track { height: 190px; border-radius: 14px; }
  .pshow-body p { display: none; }

  /* بند ۸: صفحهٔ چت در موبایل — ورودی پیام نباید زیر نوار ناوبری برود.
     چون فوتر در موبایل حذف شده، فاصلهٔ کافی را این‌جا می‌سازیم. */
  .chat-env { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .chat-box { height: auto; max-height: 58vh; }
  /* ورودی پیام کمی از نوار پایین فاصله بگیرد تا خوانا و قابل‌لمس بماند */
  .chat-form, .chat-form-modern { margin-bottom: 6px; }
}

/* ==========================================================================
   بند ۱۱: محتوای کشوی سبد/علاقه‌مندی — با لینک ورود به صفحه‌ها
   ========================================================================== */
.dr-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
/* ردیف کشو: گرید سه‌ستونه تا عنوان بلند روی قیمت نیفتد */
.dr-item {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
  background: var(--surface); transition: border-color .15s; overflow: hidden;
}
.dr-item:hover { border-color: var(--green); }
.dr-item:hover .dr-main b { color: var(--green-text); }
/* لینک ردیف: گرید سه‌ستونه مثل قبل، ولی حالا داخل کارت */
.dr-item-link {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 46px 1fr auto;
  align-items: center; gap: 10px; padding: 10px;
}
/* دکمهٔ حذف: ستون انتهایی داخل همان کارت */
.dr-x {
  width: 42px; flex: none; border: none; border-inline-start: 1px solid var(--line);
  background: transparent; color: var(--slate); font-size: .82rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.dr-x:hover { background: var(--green-100); color: var(--offer-text); }
/* کالای تازه‌افزوده کوتاه برجسته می‌شود */
.dr-item-new { animation: dr-flash 1.4s ease; }
@keyframes dr-flash {
  0%, 55% { background: var(--green-100); border-color: var(--green); }
  100% { background: var(--surface); }
}
.dr-thumb {
  width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
  background: var(--green-100); display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem;
}
.dr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dr-main { min-width: 0; }                       /* اجازهٔ کوتاه‌شدن متن */
.dr-main b {
  display: block; font-size: .82rem; font-weight: 700; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-main small { color: var(--slate); font-size: .72rem; display: block; }
.dr-price {
  font-size: .82rem; font-weight: 800; white-space: nowrap;
  color: var(--green-text); text-align: end;
}
/* پای کشو: همیشه ته کشو، جدا از فهرست */
.dr-foot {
  flex: none; border-top: 1px solid var(--line);
  padding-top: 12px; margin-top: auto;
}
.dr-total { display: flex; justify-content: space-between; align-items: baseline;
            margin-bottom: 10px; gap: 8px; }
.dr-total span { font-size: .8rem; color: var(--slate); }
.dr-total b { font-size: .98rem; white-space: nowrap; }
.dr-total b small { font-size: .7rem; font-weight: 600; }
.dr-actions { display: flex; gap: 8px; }
.dr-actions .btn { flex: 1; justify-content: center; padding: 10px; font-size: .82rem; }
.drawer-empty-cta { display: flex; justify-content: center; margin-top: 12px; }

/* ==========================================================================
   نشان تبدیل ارز — کوچک، خوانا، در هر دو تم
   ========================================================================== */
.conv-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 9px; font-size: .7rem; font-weight: 600; color: var(--slate);
  cursor: help; vertical-align: middle; white-space: nowrap;
}
.conv-badge:hover, .conv-badge:focus-visible {
  border-color: var(--green); color: var(--green-700); outline: none;
}
.conv-badge-ic { font-size: .78rem; opacity: .8; }
/* نسخهٔ ریز روی کارت‌ها (فقط نشانه) */
.conv-note {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; font-size: .66rem;
  background: var(--bg); border: 1px solid var(--line); color: var(--slate);
  cursor: help; margin-inline-start: 3px; vertical-align: middle;
}
.conv-note:hover { border-color: var(--green); color: var(--green-700); }
@media (max-width: 560px) { .conv-badge-txt { display: none; } }

/* اعلام مبنای ارزی سفارش */
.cur-basis {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 11px; margin: 10px 0; font-size: .76rem; color: var(--slate);
}
.cur-basis-ic { font-size: .9rem; flex: none; }
.cur-basis small { display: block; margin-top: 3px; opacity: .85; line-height: 1.7; }
.cur-basis-conv { border-color: var(--green); background: var(--green-100); color: var(--green-text-soft); }
/* ==========================================================================
   کلید آپلود مدرن (جایگزین Choose file پیش‌فرض مرورگر)
   ========================================================================== */
.up { display: flex; flex-direction: column; gap: 8px; }
.up-label { font-size: .82rem; font-weight: 700; color: var(--slate); }
.up-box {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 130px; padding: 14px; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 16px; background: var(--bg);
  transition: border-color .18s, background .18s;
}
.up-box:hover, .up-box:focus-visible { border-color: var(--green); background: var(--green-100); outline: none; }
.up-box.is-drag { border-color: var(--green); background: var(--green-100); border-style: solid; }
.up-box.has-file { border-style: solid; border-color: var(--line); background: var(--surface); }
/* خودِ input پنهان اما فعال می‌ماند (دسترس‌پذیری و کلیک) */
.up-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.up-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.up-ic {
  width: 44px; height: 44px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: var(--green-text); margin-bottom: 4px;
}
.up-ic svg { width: 22px; height: 22px; }
.up-empty b { font-size: .84rem; font-weight: 700; }
.up-empty small { font-size: .72rem; color: var(--slate); }
.up-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }

/*
  ⚠️ `display: flex` صفت `hidden` را بی‌اثر می‌کند.

  مرورگر `[hidden]` را با `display: none` در شیوه‌نامهٔ پیش‌فرض
  اعمال می‌کند، ولی قاعدهٔ نویسنده بر آن غالب است. نتیجه:
  پیش‌نمایشِ خالی با `<img src="">` دیده می‌شد و مرورگر آن را
  به‌شکل «تصویر شکسته» رندر می‌کرد — همان کادر خالی وسط باکس
  آپلود.

  ⚠️ همین الگو برای `.up-bar` از قبل بسته شده بود؛ این یکی
  جا افتاده بود.
*/
.up-preview[hidden],
.up-empty[hidden] { display: none; }
.up-preview img {
  max-width: 100%; max-height: 150px; border-radius: 12px; object-fit: contain;
  background: var(--bg);
}
.up-file { font-size: .74rem; color: var(--slate); word-break: break-all; text-align: center; }
.up-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.up-bar[hidden] { display: none; }
.up-btn {
  font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.up-btn:hover { border-color: var(--green); color: var(--green-text); }
.up-btn-x:hover { border-color: var(--danger-text); color: var(--danger-text); }
.up-hint { font-size: .72rem; color: var(--slate); line-height: 1.8; }

/* سوییچ حذف */
.up-del { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.up-del input { position: absolute; opacity: 0; width: 0; height: 0; }
.up-del-sw {
  width: 34px; height: 19px; border-radius: 999px; background: var(--line);
  position: relative; transition: background .18s; flex: none;
}
.up-del-sw::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.up-del input:checked + .up-del-sw { background: var(--offer-btn); }
.up-del input:checked + .up-del-sw::after { transform: translateX(15px); }
html[dir="rtl"] .up-del input:checked + .up-del-sw::after { transform: translateX(-15px); }
.up-del input:focus-visible + .up-del-sw { box-shadow: 0 0 0 3px var(--green-100); }
.up-del-tx { font-size: .78rem; font-weight: 600; color: var(--slate); }
.up-del input:checked ~ .up-del-tx { color: var(--offer-text); font-weight: 700; }
/* وقتی حذف تیک خورده، پیش‌نمایش کم‌رنگ می‌شود */
.up.will-delete .up-preview { opacity: .35; filter: grayscale(1); }

/* ==========================================================================
   فوتر در موبایل: فقط برند + شعار + مجوزها + خبرنامه،
   و فقط در صفحهٔ اول و فروشگاه.
   ========================================================================== */
@media (max-width: 900px) {
  /* صفحه‌هایی که اجازه ندارند، اصلاً فوتر نشان نمی‌دهند */
  .footer-m-off { display: none; }

  .footer-m-on .cols { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  /* ستون‌های لینک در موبایل حذف — ناوبری از نوار پایین انجام می‌شود */
  .footer-m-on .fcol-links { display: none; }

  /*
    ⚠️ لوگوی فوتر تازه دیده می‌شود.

    پیش‌تر قاعدهٔ بدون‌دامنهٔ هدر آن را `absolute` می‌کرد و
    روی متن می‌افتاد؛ نام سایت هم پنهان بود.
  */
  .footer-m-on .fcol-brand .logo {
    position: static;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .footer-m-on .fcol-brand .logo img { height: 34px; }

  .footer-m-on .fcol-brand .logo b {
    display: inline;
    font-size: 1.15rem;
  }
  .footer-m-on .about { max-width: 34ch; margin-inline: auto; }
  .footer-m-on .trust-marks { justify-content: center; }
  .footer-m-on .socials { justify-content: center; }
  /* خبرنامه: فقط فرم عضویت، بدون توضیح اضافه */
  .footer-m-on .fcol-news .about { display: none; }
  .footer-m-on .fcol-news .search { margin-top: 0; }
  .footer-m-on .copy { font-size: .72rem; }
}

/* ==========================================================================
   فیلد تاریخ با تقویم شمسی/قمری/میلادی
   ========================================================================== */
.df { position: relative; display: flex; flex-direction: column; gap: 6px; }
.df-label { font-size: .82rem; font-weight: 700; color: var(--slate); }
/* یک کادر یکپارچه که دکمهٔ تاریخ + ساعت + حذف را کنار هم و هم‌تراز نگه می‌دارد */
.df-wrap {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  overflow: hidden; transition: border-color .15s;
}
.df-wrap:focus-within { border-color: var(--green); }
.df-wrap.has-value { border-color: var(--green); }
/* دکمهٔ تاریخ: بخش اصلی */
.df-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  justify-content: flex-start; padding: 11px 13px; border: none;
  background: transparent; font-size: .85rem; font-weight: 700; color: var(--ink);
  text-align: start; cursor: pointer;
}
.df-btn:hover { background: var(--green-100); }
.df-btn.is-empty { color: var(--slate); font-weight: 500; }
.df-ic { width: 17px; height: 17px; color: var(--green-text); flex: none; }
.df-btn span[data-df-text] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ساعت: جمع‌وجور، با جداکنندهٔ باریک از تاریخ */
.df-time {
  width: auto; padding: 11px 10px; border: none; border-inline-start: 1px solid var(--line);
  background: transparent; font-size: .84rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.df-time:focus { outline: none; background: var(--green-100); }
/* حذف: بخش انتهایی داخل همان کادر */
.df-x {
  width: 40px; border: none; border-inline-start: 1px solid var(--line);
  background: transparent; color: var(--slate); font-size: .85rem; flex: none; cursor: pointer;
}
.df-x:hover { background: var(--green-100); color: var(--offer-text); }

/* پنجرهٔ تقویم */
.df-pop {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 40; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 12px; width: 290px;
}
.df-pop[hidden] { display: none; }
.df-loading { font-size: .8rem; color: var(--slate); text-align: center; padding: 24px 0; }

.dp-cals { display: flex; gap: 4px; background: var(--bg); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.dp-cal {
  flex: 1; padding: 6px; border-radius: 8px; font-size: .76rem; font-weight: 700;
  color: var(--slate); background: transparent;
}
.dp-cal:hover { color: var(--green-text); }
.dp-cal.on { background: var(--green-btn); color: var(--on-green); }

.dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-size: .86rem; font-weight: 800; }
.dp-arrow {
  width: 28px; height: 28px; border-radius: 8px; background: var(--bg);
  font-size: 1.1rem; font-weight: 800; color: var(--slate);
}
.dp-arrow:hover { background: var(--green-100); color: var(--green-text-soft); }

.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { font-size: .68rem; font-weight: 800; color: var(--slate); text-align: center; padding: 4px 0; }
.dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: .78rem; font-weight: 600; background: transparent;
}
.dp-day:hover { background: var(--green-100); color: var(--green-text-soft); }
.dp-day.today { border: 1.5px solid var(--green); font-weight: 800; }
.dp-day.on { background: var(--green-btn); color: var(--on-green); font-weight: 800; }
.dp-blank { pointer-events: none; }

.dp-foot { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-today, .dp-clear { flex: 1; padding: 7px; border-radius: 9px; font-size: .76rem; font-weight: 700; background: var(--bg); }
.dp-today:hover { background: var(--green-100); color: var(--green-text-soft); }
.dp-clear:hover { color: var(--offer-text); }
@media (max-width: 460px) { .df-pop { width: min(290px, calc(100vw - 40px)); } }

/* اصلاح ظاهر ورودی ساعت بومی مرورگر داخل فیلد تاریخ */
.df-time::-webkit-calendar-picker-indicator {
  /* آیکن ساعت پیش‌فرض را به رنگ برند و کوچک‌تر */
  filter: grayscale(1) opacity(.5);
  cursor: pointer; margin-inline-start: 4px;
}
.df-time::-webkit-calendar-picker-indicator:hover { filter: none; opacity: 1; }
[data-theme="dark"] .df-time::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }
/* در تم تیره، حباب ساعت باید با سطح هماهنگ باشد نه سیاه مطلق */
.df-time::-webkit-datetime-edit { color: var(--ink); }
.df-time:invalid::-webkit-datetime-edit { color: var(--slate); }

/* ==========================================================================
   آپلود چندفایل: شبکهٔ کارت با ضربدر حذف روی هر فایل
   ========================================================================== */
/* حالت چندتایی: کادر به‌صورت ستونی، گرید تصاویر داخل خودِ کادر (مورد ۸) */
.up-multi .up-box {
  min-height: 92px; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 12px;
}
.up-multi .up-box.has-file { padding: 12px; }
.up-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px; width: 100%;
}
.up-grid[hidden] { display: none; }
.up-card {
  position: relative; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--surface); aspect-ratio: 1;
  display: flex; flex-direction: column;
}
.up-card-img { width: 100%; height: 100%; object-fit: cover; flex: 1; min-height: 0; }
.up-card-ic {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; background: var(--green-100);
}
.up-card-meta {
  padding: 4px 6px; background: var(--surface); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1px;
}
.up-card-name {
  font-size: .64rem; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.up-card-size { font-size: .6rem; color: var(--slate); }
/* ضربدر حذف: گوشهٔ بالای هر کارت */
.up-card-x {
  position: absolute; top: 5px; inset-inline-end: 5px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%; border: none;
  background: rgba(15, 17, 21, .72); color: #fff; font-size: .72rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(2px); transition: background .15s;
}
.up-card-x:hover { background: var(--offer-btn); }
.up-count { font-size: .72rem; color: var(--green-text); font-weight: 700; margin-top: 6px; display: block; }
.up-count[hidden] { display: none; }

/* ==========================================================================
   بند ۳: نوار جستجوی مستقل هر صفحه (کارخانه‌ها/فروشندگان/خدمات)
   ========================================================================== */
.page-search {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 4px 12px; max-width: 520px; transition: border-color .15s;
}
.page-search:focus-within { border-color: var(--green); }
.page-search-ic { color: var(--slate); flex: none; display: flex; }
.page-search-ic svg { width: 18px; height: 18px; }
.page-search input {
  flex: 1; min-width: 0; border: none; background: none; font: inherit;
  padding: 9px 2px; color: var(--ink); outline: none;
}
.page-search input::placeholder { color: var(--slate); }
.page-search-x {
  width: 26px; height: 26px; border-radius: 50%; border: none; flex: none;
  background: var(--bg); color: var(--slate); font-size: .74rem; cursor: pointer;
}
.page-search-x:hover { background: var(--green-100); color: var(--offer-text); }
.search-empty { text-align: center; color: var(--slate); padding: 30px 0; font-size: .9rem; }
/* wrapper نباید چیدمان گرید را بشکند */
.search-item { display: contents; }

/* ==========================================================================
   مورد ۳: صفحهٔ بازبینی و تأیید کالاها
   ========================================================================== */
.rv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--offer-btn); color: var(--on-offer); font-size: .74rem; font-weight: 800;
  vertical-align: middle; margin-inline-start: 6px;
}
.rv-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.rv-tab {
  padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: var(--bg); color: var(--slate); border: 1px solid var(--line);
}
.rv-tab:hover { border-color: var(--green); color: var(--green-text); }
.rv-tab.on { background: var(--green-btn); color: var(--on-green); border-color: transparent; }
.rv-list { display: flex; flex-direction: column; gap: 16px; }
.rv-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  background: var(--surface);
}
.rv-card-head { display: flex; gap: 14px; align-items: flex-start; }
.rv-thumb {
  width: 68px; height: 68px; border-radius: 12px; overflow: hidden; flex: none;
  background: var(--green-100); display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
}
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-head-main { flex: 1; min-width: 0; }
.rv-head-main h3 { font-size: 1.02rem; font-weight: 800; margin: 0 0 6px; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--slate); }
.rv-desc { margin: 12px 0; font-size: .86rem; line-height: 1.9; color: var(--ink); }
.rv-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; margin: 12px 0;
}
.rv-gal-item {
  aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.rv-gal-item img { width: 100%; height: 100%; object-fit: cover; }
.rv-gal-vid { font-size: 1.6rem; }
.rv-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; margin: 12px 0; }
.rv-specs div { display: flex; gap: 6px; font-size: .8rem; padding: 5px 8px; background: var(--bg); border-radius: 8px; }
.rv-specs dt { color: var(--slate); font-weight: 700; }
.rv-specs dd { margin: 0; color: var(--ink); }
.rv-actions {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 12px; margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed var(--line);
}
.rv-reject summary { list-style: none; cursor: pointer; }
.rv-reject summary::-webkit-details-marker { display: none; }
.rv-reject-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rv-reject-form input {
  flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); font: inherit;
}
.btn-danger { background: var(--offer-btn); color: var(--on-offer); }
.btn-danger:hover { filter: brightness(1.05); }
/* ---------- اقدام‌های کارت بررسی ---------- */
/*
  دو بلوک جدا: «پیش‌نمایش + تأیید» در یک ردیف، و «رد کردن» در کادر
  خودش. قبلاً هر سه در یک ردیف فلکس بودند و کادر دلیل رد در موبایل
  به چند پیکسل می‌رسید.
*/
.rv-act-main {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rv-act-main form { margin: 0; }

.rv-reject-box {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; margin: 0;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
}

.rv-reject-lbl {
  font-size: .8rem; font-weight: 700; color: var(--ink);
}
.rv-opt { font-weight: 500; color: var(--slate); }

.rv-reason {
  width: 100%; box-sizing: border-box;
  min-height: 84px; resize: vertical;
  padding: 10px 12px; font: inherit; font-size: .84rem;
  line-height: var(--lh-normal, 1.8);
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
}
.rv-reason:focus { outline: none; border-color: var(--green); }
.rv-reason::placeholder { color: var(--slate); }

/* دکمهٔ رد سمت شروع بایستد، نه کش بیاید */
.rv-reject-box .btn { align-self: flex-start; }

/* متن دلیلِ ثبت‌شده برای کالاهای ردشده */
.rv-reject-said {
  width: 100%; margin: 0;
  padding: 10px 14px; border-radius: var(--r);
  background: var(--warn-bg, var(--bg-subtle));
  color: var(--offer-text);
  font-size: .82rem; line-height: 1.9;
}
.rv-empty { text-align: center; padding: 50px 0; color: var(--slate); }
.rv-empty-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--green-100);
  color: var(--green-text-soft); font-size: 1.6rem; margin-bottom: 12px;
}

/* ==========================================================================
   مورد ۲: کد تخفیف در سبد
   ========================================================================== */
.coupon-form { display: flex; gap: 8px; margin: 12px 0; }
.coupon-form input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); font: inherit;
}
.coupon-form input:focus { outline: none; border-color: var(--green); }
.coupon-form .btn { flex: none; }
.sum-discount { color: var(--green-text); }
.sum-discount b { color: var(--green-text); }
.coupon-tag {
  font-size: .72rem; background: var(--green-100); color: var(--green-text-soft);
  padding: 2px 7px; border-radius: 6px; font-weight: 700; letter-spacing: .5px;
}
.coupon-remove-form { margin: 0 0 12px; }
.coupon-remove-btn {
  border: none; background: none; color: var(--offer-text); font-size: .78rem;
  cursor: pointer; padding: 0;
}
.coupon-remove-btn:hover { text-decoration: underline; }

/* ==========================================================================
   موارد ۱۶ و ۱۷: نمودارهای داشبورد (SVG/CSS سبک، بدون کتابخانهٔ خارجی)
   ========================================================================== */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.chart-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; margin: 16px 0;
}
.mini-chart-title { font-size: .9rem; font-weight: 800; margin-bottom: 14px; color: var(--ink); }
.mini-chart-bars {
  display: flex; align-items: flex-end; gap: 6px; height: 160px;
  border-bottom: 2px solid var(--line); padding-bottom: 0;
}
.mc-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.mc-bar {
  width: 100%; max-width: 32px; min-height: 2px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--green), var(--green-700, #016B3D));
  transition: height .3s;
}
.mc-lbl { font-size: .6rem; color: var(--slate); white-space: nowrap; }
@media (max-width: 640px) {
  .chart-row { grid-template-columns: 1fr; }
  .mc-lbl { font-size: .52rem; }
}

/* مورد ۱۷: گزارش‌ساز */
.report-filters {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; margin-bottom: 18px;
}
.report-filters .field { flex: 1; min-width: 140px; }
.report-filters select, .report-filters input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); font: inherit;
}
.report-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
.report-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.report-table th, .report-table td { padding: 12px 14px; text-align: start; font-size: .86rem; }
.report-table thead th { background: var(--green-100); color: var(--green-text-soft); font-weight: 800; }
.report-table tbody tr { border-top: 1px solid var(--line); }
.report-table tbody tr:hover { background: var(--bg); }

/* مورد ۱: ویرایش‌های در انتظار تأیید */
.rv-edit-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px dashed var(--line); }
.rv-edit-title { font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.rv-edit-hint { font-size: .8rem; color: var(--slate); margin-bottom: 14px; }
.rv-card-edit { border-color: var(--offer-btn); }
.rv-changes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; margin: 12px 0; }
.rv-changes div { display: flex; gap: 6px; font-size: .8rem; padding: 5px 8px; background: var(--green-100); border-radius: 8px; }
.rv-changes dt { color: var(--green-text-soft); font-weight: 700; }
.rv-changes dd { margin: 0; color: var(--ink); }

/* موارد ۷ و ۹: اطلاعات بانکی */
.bank-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 20px; }
.bank-card {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; background: var(--surface);
}
.bank-card.is-default { border-color: var(--green); }
.bank-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bank-def { font-size: .68rem; background: var(--green-100); color: var(--green-text-soft); padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.bank-row { display: flex; justify-content: space-between; font-size: .82rem; padding: 4px 0; border-top: 1px dashed var(--line); }
.bank-row span { color: var(--slate); }
.bank-del { margin-top: 10px; }
.bank-form { max-width: 640px; }
.field-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; }

/* توضیح اطلاعات بانکی (فقط برای واریز، نه درگاه) */
.bank-note {
  font-size: .82rem; color: var(--slate); background: var(--green-100);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
}

/* ==========================================================================
   مورد ۸: زمان تأمین + زیباسازی فرم کالا (موبایل‌فرندلی)
   ========================================================================== */
.supply-field { grid-column: 1 / -1; }
.supply-field > span { display: block; margin-bottom: 8px; font-weight: 600; }
.supply-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.supply-opt {
  /* position:relative لازم است تا رادیوی مخفی داخلش لنگر بگیرد؛ بدون آن
     رادیو نسبت به کل صفحه جای می‌گیرد و مرورگر هنگام کلیک صفحه را به
     بالا اسکرول می‌کند. */
  position: relative;
  flex: 1; min-width: 90px; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 10px; border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; font-size: .86rem; font-weight: 600; background: var(--surface);
  transition: border-color .15s, background .15s, color .15s; user-select: none;
}
.supply-opt input {
  /* رادیوی مخفی — بدون این ابعاد، از قاعدهٔ عمومی width:100% عرض می‌گیرد
     و صفحه را افقی سرریز می‌کند. */
  position: absolute; inset-inline-start: 0; top: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.supply-opt:hover { border-color: var(--green); }
.supply-opt.on { border-color: var(--green); background: var(--green-100); color: var(--green-text-soft); }
.supply-value-box { margin-top: 10px; }

/* زیباسازی عمومی فرم کالا + موبایل‌فرندلی */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid .field { display: flex; flex-direction: column; gap: 6px; }
.form-grid .field > span { font-size: .84rem; font-weight: 600; color: var(--ink); }
.form-grid .field input, .form-grid .field select, .form-grid .field textarea {
  padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--surface); font: inherit; transition: border-color .15s;
}
.form-grid .field input:focus, .form-grid .field select:focus, .form-grid .field textarea:focus {
  outline: none; border-color: var(--green);
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; gap: 13px; }
  .supply-opt { min-width: 0; padding: 11px 6px; font-size: .8rem; }
  .pform-h { font-size: 1rem; }
}

/* مورد ۱: toast سادهٔ کپی لینک (جایگزین شیت سفارشی حذف‌شده) */
.vh-copy-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--surface); padding: 10px 18px;
  border-radius: 999px; font-size: .85rem; z-index: 200; animation: toast-in .2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 90vw; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; direction: ltr;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ==========================================================================
   پیام «این بخش موقتاً خاموش است»
   --------------------------------------------------------------------------
   ⚠️ چرا `direction: rtl` و `white-space: normal`:

   `.vh-copy-toast` برای نشانیِ کپی‌شده ساخته شده بود، پس
   `direction: ltr` و تک‌خطی است. پیام فارسی در آن برعکس و
   بریده نمایش داده می‌شود.
   ========================================================================== */
.vh-notice {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--surface); padding: 12px 20px;
  border-radius: 14px; font-size: .88rem; line-height: 1.7; z-index: 240;
  animation: toast-in .2s ease; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  max-width: min(92vw, 420px); direction: rtl; text-align: center;
  white-space: normal;
}
.vh-notice.is-warn { background: var(--amber-600, #b45309); color: #fff; }

/* مورد ۴: نشان‌های وضعیت کالا در پنل */
.prod-status {
  display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px;
  border-radius: 6px; margin-top: 4px; margin-inline-end: 4px;
}
.st-active { background: var(--green-100); color: var(--green-text-soft); }
.st-inactive { background: #f1f5f9; color: #475569; }
.st-pending { background: #fef3c7; color: #92400e; }
.st-rejected { background: #fee2e2; color: #b91c1c; }
.st-draft { background: #f1f5f9; color: #475569; }
.prod-reject { display: block; font-size: .74rem; color: #b91c1c; margin-top: 4px; }
/* فرم ویرایش کالای ردشده / در انتظار — راهنمای ارسال دوباره */
.prod-resubmit { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px;
  padding: 12px 16px; border-radius: 12px; font-size: .84rem; line-height: 1.9;
  background: var(--danger-bg); color: var(--danger-text); border: 1px solid rgba(185, 28, 28, .18); }
.prod-resubmit.is-pending { background: var(--warn-bg); color: var(--warn-text); border-color: rgba(146, 64, 14, .18); }
.prod-resubmit b { font-size: .9rem; }

/* مورد ۳: بزرگ‌نمایی تصویر در بازبینی (lightbox) */
[data-zoom] { cursor: zoom-in; }
.rv-lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center; padding: 20px;
}
.rv-lightbox[hidden] { display: none; }
.rv-lightbox-ov { position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.rv-lightbox img {
  position: relative; max-width: 95vw; max-height: 90vh; border-radius: 12px;
  object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); z-index: 1;
}
.rv-lightbox-x {
  position: absolute; top: 20px; inset-inline-end: 20px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.15); color: #fff; font-size: 1.2rem; cursor: pointer;
}
.rv-lightbox-x:hover { background: rgba(255,255,255,.3); }

/* ==========================================================================
   شبکهٔ اجتماعی (فید) — استایل اینستاگرامی موبایل‌فرندلی (موارد ۲-۵)
   ========================================================================== */
.feed-wrap { max-width: 600px; margin: 0 auto; padding: 12px; }
.feed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.feed-head h1 { font-size: 1.3rem; }
.feed-head-link { font-size: .85rem; color: var(--green-text-soft); }
.feed-list { display: flex; flex-direction: column; gap: 20px; }

.post-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.post-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.post-vendor { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.post-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--green-100);
  display: grid; place-items: center; font-size: 1.1rem;
}
.post-follow {
  border: 1.5px solid var(--green); background: transparent; color: var(--green-text-soft);
  padding: 5px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.post-follow.on { background: var(--green-100); border-color: var(--line); color: var(--slate); }

.post-media { position: relative; background: #000; aspect-ratio: 1/1; display: grid; place-items: center; }
.post-media img, .post-media video { width: 100%; height: 100%; object-fit: contain; }
.post-media-text {
  color: var(--ink); background: var(--surface); padding: 30px 20px; font-size: 1.05rem;
  line-height: 1.9; text-align: center; aspect-ratio: auto; width: 100%;
}
.post-media-count {
  position: absolute; top: 10px; inset-inline-end: 10px; background: rgba(0,0,0,.6);
  color: #fff; font-size: .7rem; padding: 2px 8px; border-radius: 999px;
}

.post-actions { display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px; }
.post-act {
  display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none;
  cursor: pointer; font-size: 1.25rem; color: var(--ink); padding: 4px; border-radius: 8px;
}
.post-act span { font-size: .82rem; color: var(--slate); }
.post-act-chat { margin-inline-start: auto; }
.post-like.on { animation: pop .3s; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

.post-caption { padding: 4px 14px 8px; font-size: .9rem; line-height: 1.8; }
.post-caption b { font-weight: 700; }
.post-product { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; }
.post-buy { flex: 1; text-align: center; }
.post-time { display: block; padding: 0 14px 12px; font-size: .72rem; color: var(--slate); }

/* نظرها */
.post-comments { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.post-comments h3 { font-size: 1rem; margin-bottom: 12px; }
.comment-form { display: flex; gap: 8px; margin-bottom: 16px; }
.comment-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; }
.comment-list { display: flex; flex-direction: column; gap: 12px; }
.comment-item { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.comment-item b { font-weight: 700; }
.comment-item time { font-size: .68rem; color: var(--slate); }
.comment-empty, .comment-login { color: var(--slate); font-size: .85rem; }

.feed-empty { text-align: center; padding: 60px 20px; color: var(--slate); }
.feed-empty-ic { font-size: 3rem; display: block; margin-bottom: 12px; }

@media (max-width: 640px) {
  .feed-wrap { padding: 8px; }
  .post-media { aspect-ratio: 4/5; }
}

/* فاز ۴: مدیریت پست فروشنده */
.attach-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.myposts-list { display: flex; flex-direction: column; gap: 10px; }
.mypost-row { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mypost-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--green-100); display: grid; place-items: center; flex-shrink: 0; }
.mypost-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mypost-main { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.mypost-actions { display: flex; flex-direction: column; gap: 4px; }
/* تعریف .rv-reason یکجا در بخش «بررسی کالای ویزیتوری» پایین‌تر آمده —
   این نسخهٔ تک‌خطی حذف شد چون با آن یکی می‌جنگید. */

/* ==========================================================================
   تبلیغات (شبیه دیوار) — مورد ۱
   ========================================================================== */
.ads-wrap { max-width: 1000px; margin: 0 auto; padding: 16px; }
.ads-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ads-head h1 { font-size: 1.4rem; }
.ads-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px; }
.ads-cat {
  flex-shrink: 0; padding: 8px 16px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.ads-cat.on { background: var(--green-100); border-color: var(--green); color: var(--green-text-soft); }
.ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ad-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: var(--surface); transition: box-shadow .15s, transform .15s;
}
.ad-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.ad-card-img { aspect-ratio: 4/3; background: var(--green-100); display: grid; place-items: center; font-size: 2rem; }
.ad-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ad-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.ad-card-body b { font-size: .9rem; line-height: 1.5; }
.ad-price { color: var(--green-text-soft); font-weight: 700; font-size: .85rem; }
.ad-loc { font-size: .74rem; color: var(--slate); }

/* پرداخت تبلیغ */
.pay-box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.pay-box h3 { margin-bottom: 16px; }
.pay-row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.pay-row span { color: var(--slate); }
.pay-total b { color: var(--green-text-soft); font-size: 1.1rem; }

/* جزئیات تبلیغ */
.ad-detail { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ad-detail-img { background: #000; }
.ad-detail-img img { width: 100%; max-height: 500px; object-fit: contain; }
.ad-detail h1 { padding: 16px 18px 8px; font-size: 1.3rem; }
.ad-detail-price { padding: 0 18px 8px; color: var(--green-text-soft); font-weight: 800; font-size: 1.2rem; }
.ad-detail-desc { padding: 12px 18px; line-height: 1.9; }
.ad-contact { padding: 8px 18px; font-weight: 700; }
.ad-meta { padding: 12px 18px; font-size: .78rem; color: var(--slate); border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .ads-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* دکمه‌های ساخت پست در سر فید */
.feed-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feed-new-btn { font-size: .82rem; padding: 7px 14px; }

/* سرآیند بخش‌های صفحهٔ اصلی (تبلیغات و…) */
.home-sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.home-sec-head h2 { font-size: 1.2rem; }
.home-sec-more { font-size: .85rem; color: var(--green-text-soft); font-weight: 600; }

/* ویرایش رسانه‌های پست */
.edit-media-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.edit-media-item { position: relative; width: 90px; height: 90px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.edit-media-item img { width: 100%; height: 100%; object-fit: cover; }
.edit-media-vid { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.6rem; background: var(--green-100); }
.edit-media-del { position: absolute; top: 4px; inset-inline-end: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: .8rem; }

/* نوار جستجوی فید و آگهی */
.feed-search { display: flex; gap: 8px; margin-bottom: 18px; }
.feed-search input {
  flex: 1; padding: 11px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  font: inherit; background: var(--surface);
}
.feed-search input:focus { outline: none; border-color: var(--green); }
.feed-search button {
  padding: 11px 18px; border: none; border-radius: 999px; background: var(--green-btn);
  color: var(--on-green); cursor: pointer; font-size: 1rem;
}
.feed-search button:hover { opacity: .9; }
.ads-search { max-width: 100%; }

/* ==========================================================================
   مورد ۴: کاروسل کشیدنی جامع
   ========================================================================== */
.vh-carousel {
  position: relative; overflow: hidden; width: 100%; cursor: grab;
  touch-action: pan-y;                 /* اجازهٔ اسکرول عمودی، گرفتن افقی */
  -webkit-user-select: none; user-select: none;
}
.vh-carousel:active { cursor: grabbing; }
.vh-carousel-track { display: flex; will-change: transform; }
.vh-carousel-slide {
  flex: 0 0 100%; width: 100%; -webkit-user-select: none; user-select: none;
}
.vh-carousel-slide img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  pointer-events: none;                /* تصویر مزاحم درگ نشود */
  -webkit-user-drag: none; user-drag: none;
}
.vh-carousel-slide video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.vh-carousel-dots {
  position: absolute; bottom: 10px; left: 0; right: 0; display: flex;
  justify-content: center; gap: 6px; z-index: 2;
}
.vh-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.55); cursor: pointer; transition: background .2s, width .2s;
}
.vh-dot.on { background: #fff; width: 20px; border-radius: 4px; }
.vh-carousel-count {
  position: absolute; top: 10px; inset-inline-end: 10px; background: rgba(0,0,0,.6);
  color: #fff; font-size: .7rem; padding: 2px 8px; border-radius: 999px; z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   کتابخانهٔ فایل تأمین‌کننده و گزارش سهمیه (موارد ۷، ۸، ۹)
   ========================================================================== */
.quota-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.quota-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; }
.quota-head { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 8px; font-size: .85rem; }
.quota-head b { font-weight: 800; font-size: .88rem; }
.quota-bar { height: 8px; border-radius: 999px; background: var(--green-100); overflow: hidden; }
.quota-fill { display: block; height: 100%; background: var(--green-btn); border-radius: 999px;
  transition: width .3s; }
.quota-fill.q-warn { background: #d97706; }
.quota-fill.q-danger { background: #dc2626; }
.quota-card small { display: block; margin-top: 6px; font-size: .74rem; color: var(--slate); }

.media-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.media-filter input { flex: 1; min-width: 140px; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: .85rem; background: var(--surface); color: var(--ink); }
.media-filter select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .85rem; background: var(--surface); color: var(--ink); }

.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.media-item { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column; }
.media-item.media-locked { opacity: .82; }
.media-thumb { aspect-ratio: 4/3; background: var(--green-100); display: grid;
  place-items: center; font-size: 1.8rem; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: .76rem; }
.media-info b { font-size: .8rem; font-weight: 700; }
.media-info span { color: var(--slate); }
.media-saved { color: var(--green-text-soft); font-style: normal; font-weight: 700; }
.media-area { font-size: .68rem; }
.media-act { padding: 0 10px 10px; }
.media-lock { font-size: .72rem; color: var(--slate); }

@media (min-width: 700px) {
  .quota-cards { grid-template-columns: repeat(3, 1fr); }
  .media-grid { grid-template-columns: repeat(4, 1fr); }
}

/* نمایش محل استفادهٔ فایل (مورد ۱۰) */
.media-used { display: flex; flex-direction: column; gap: 4px; }
.media-used-link { font-size: .72rem; color: var(--green-text-soft); text-decoration: underline; }
.media-used small { font-size: .68rem; color: var(--slate); }
.media-soft { display: block; font-size: .68rem; color: var(--slate); margin-bottom: 4px; }

/* انتخاب سیاست فروش ویزیتوری */
.vis-policy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* دکمهٔ کوچک ویزیتور در صفحهٔ کالا (مورد ۴) */
.vis-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--green);
  background: var(--green-100); color: var(--green-text-soft);
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.vis-chip:hover { transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(10, 164, 106, .45); }
.vis-chip span { white-space: nowrap; }
.vis-pending { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.vis-rejected { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.vis-approved { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }

/* ==========================================================================
   ویزیتور مستقل — ویترین، درخواست‌ها و قیمت‌گذاری
   ========================================================================== */
.pf-sub { font-size: .95rem; font-weight: 700; margin: 22px 0 10px; }

.vreq-list { display: flex; flex-direction: column; gap: 8px; }
.vreq-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); }
.vreq-row b { display: block; font-size: .88rem; }
.vreq-row small { display: block; font-size: .74rem; color: var(--slate); }
.vreq-reason { color: #b91c1c !important; }
.vreq-pending { background: #fffbeb; border-color: #fde68a; }
.vreq-rejected { background: #fef2f2; border-color: #fecaca; }

.vend-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vend-chip { padding: 9px 16px; border-radius: 999px; background: var(--green-100);
  color: var(--green-text-soft); text-decoration: none; font-size: .85rem; font-weight: 600; }
.vend-chip span { font-size: .72rem; opacity: .8; margin-inline-start: 6px; }

.vlist { display: flex; flex-direction: column; gap: 10px; }
.vlist-item { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.vlist-off { opacity: .7; }
.vlist-main b { display: block; font-size: .92rem; margin-bottom: 3px; }
.vlist-main > small { display: block; font-size: .74rem; color: var(--slate); margin-bottom: 8px; }
.vlist-prices { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem;
  color: var(--slate); margin-bottom: 8px; }
.vlist-prices b { display: inline; font-size: .82rem; color: var(--ink); }
.vlist-price { color: var(--green-text-soft) !important; }
.vlist-profit { color: #0369a1 !important; }
.vlist-flags { display: flex; flex-wrap: wrap; gap: 5px; }
.vflag { font-size: .68rem; padding: 2px 9px; border-radius: 999px;
  background: #e5e7eb; color: #374151; }
.vflag-ok { background: #d1fae5; color: #065f46; }
.vflag-warn { background: #fef3c7; color: #92400e; }
.vflag-off { background: #fee2e2; color: #991b1b; }
.vlist-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.vl-src { padding: 12px 16px; border-radius: 12px; background: var(--green-100);
  margin-bottom: 12px; font-size: .88rem; }
.vl-src small { display: block; font-size: .75rem; color: var(--slate); margin-top: 3px; }
.vl-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.vl-rules > div { padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  text-align: center; background: var(--surface); }
.vl-rules span { display: block; font-size: .7rem; color: var(--slate); margin-bottom: 4px; }
.vl-rules b { font-size: .9rem; }
.vl-floor { border-color: var(--green) !important; background: var(--green-100) !important; }
.rv-msg { font-size: .8rem; color: var(--slate); margin-top: 6px; }

@media (max-width: 560px) {
  .vlist-item { flex-direction: column; }
  .vlist-act { flex-direction: row; align-self: stretch; }
  .vl-rules { grid-template-columns: 1fr; }
}

/* ویترین عمومی ویزیتور */
.sc-head { text-align: center; margin-bottom: 22px; }
.sc-head h1 { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.sc-head p { font-size: .85rem; color: var(--slate); }
.sc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sc-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column; }
.sc-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.sc-ph { aspect-ratio: 4/3; display: grid; place-items: center; font-size: 2rem;
  background: var(--green-100); }
.sc-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sc-body b { font-size: .88rem; }
.sc-body small { font-size: .74rem; color: var(--slate); }
.sc-price { display: flex; align-items: center; gap: 8px; }
.sc-price s { font-size: .76rem; color: var(--slate); }
.sc-price b { font-size: .95rem; color: var(--green-text-soft); }
@media (min-width: 700px) { .sc-grid { grid-template-columns: repeat(4, 1fr); } }

/* نشان فروشندهٔ ویزیتور روی کارت کالا */
.pc-vis { font-size: .62rem; padding: 1px 6px; border-radius: 999px;
  background: #dbeafe; color: #1e40af; font-weight: 700; }

/* لیست ویزیتورهای فعال هر کالا (مورد ۱) */
.vsell-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.vsell-group { border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden; }
.vsell-group summary { padding: 12px 16px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; gap: 10px; list-style: none; }
.vsell-group summary::-webkit-details-marker { display: none; }
.vsell-group summary b { font-size: .88rem; }
.vsell-count { font-size: .72rem; padding: 2px 10px; border-radius: 999px;
  background: var(--green-100); color: var(--green-text-soft); font-weight: 700; }
.vsell-rows { border-top: 1px solid var(--line); }
.vsell-row { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.vsell-row:last-child { border-bottom: none; }
.vsell-off { opacity: .6; }
.vsell-who b { display: block; font-size: .84rem; }
.vsell-who small { font-size: .72rem; color: var(--slate); }
.vsell-act { display: flex; gap: 10px; align-items: center; }

/* ==========================================================================
   مودال مشترک سایت (موارد ۴ و ۵)
   ========================================================================== */
.vh-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
/* بسیار مهم: display:grid بالا، رفتار پیش‌فرض [hidden] را بازنویسی می‌کند.
   بدون این قاعده، مودالِ «بسته‌شده» نامرئی می‌ماند ولی همچنان کلیک‌ها را
   می‌گیرد و کاربر فکر می‌کند صفحه قفل شده است. */
.vh-modal[hidden] { display: none !important; }
.vh-modal-ov { position: absolute; inset: 0; background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px); animation: vhFade .18s ease; }
.vh-modal-box {
  position: relative; z-index: 1; width: min(420px, calc(100vw - 32px));
  background: var(--surface); border-radius: 20px; padding: 26px 24px 20px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
  text-align: center; animation: vhPop .2s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes vhFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes vhPop { from { opacity: 0; transform: translateY(14px) scale(.96) } }
.vh-modal-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 30px;
  height: 30px; border: none; background: transparent; border-radius: 50%;
  cursor: pointer; font-size: .95rem; color: var(--slate); }
.vh-modal-x:hover { background: var(--green-100); color: var(--ink); }
.vh-modal-ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem; font-weight: 800;
  background: var(--green-100); color: var(--green-text-soft); }
.vh-tone-warn { background: #fef3c7; color: #92400e; }
.vh-tone-error { background: #fee2e2; color: #991b1b; }
.vh-tone-success { background: #d1fae5; color: #065f46; }
.vh-tone-info { background: #dbeafe; color: #1e40af; }
.vh-modal-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; }
.vh-modal-body { font-size: .88rem; color: var(--slate); line-height: 2; }
.vh-modal-body p { margin-bottom: 8px; }
.vh-modal-foot { display: flex; gap: 8px; margin-top: 20px; }
.vh-modal-foot .btn { flex: 1; }
.vh-modal-body input[type=text], .vh-modal-body textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font: inherit; font-size: .86rem; margin-top: 8px;
  background: var(--surface); color: var(--ink); text-align: start;
}
.vh-modal-rows { text-align: start; display: flex; flex-direction: column; gap: 6px;
  margin: 10px 0; font-size: .82rem; }
.vh-modal-rows div { display: flex; justify-content: space-between; gap: 10px; }
.vh-modal-rows b { color: var(--ink); }

/* محاسبهٔ زندهٔ قیمت ویترین (مورد ۳) */
.vl-live { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border-radius: 12px; background: var(--green-100); font-size: .82rem; }
.vl-live > div { display: flex; justify-content: space-between; gap: 10px; }
.vl-live b { font-weight: 800; }
.vl-profit { color: var(--green-text-soft); }
.vl-bad { background: #fef2f2; }
.vl-warn { display: block !important; color: #b91c1c; font-size: .76rem;
  line-height: 1.8; padding-top: 6px; border-top: 1px solid #fecaca; }

/* مقایسهٔ قبل/بعد در بازبینی ویرایش کالا */
.rv-changes dd s { color: var(--slate); opacity: .8; margin-inline-end: 6px; }
.rv-changes dd b { color: var(--green-text-soft); font-weight: 700; }

/* مودال محل استفادهٔ فایل */
.media-lock-btn { border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: .72rem; color: #92400e; padding: 4px 0;
  text-decoration: underline; }
.vh-used-list { display: flex; flex-direction: column; gap: 10px;
  text-align: start; margin-top: 12px; }
.vh-used-item { padding: 10px 12px; border-radius: 10px; background: var(--green-100); }
.vh-used-item a, .vh-used-item b { display: block; font-size: .85rem;
  color: var(--green-text-soft); font-weight: 700; text-decoration: none; }
.vh-used-item a:hover { text-decoration: underline; }
.vh-used-item small { display: block; font-size: .74rem; color: var(--slate);
  margin-top: 3px; line-height: 1.7; }

/* بررسی کالاهای ویزیتوری */
.rv-money { margin-top: 6px; font-size: .78rem; }
.rv-money b { color: var(--ink); }
.rv-price { color: var(--green-text-soft) !important; }

/* جدول حساب‌ها */
.acc-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--surface); }
.acc-head, .acc-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 8px; padding: 11px 14px; align-items: center; }
.acc-simple .acc-head, .acc-simple .acc-row { grid-template-columns: 1fr auto; }
.acc-head { background: var(--green-100); font-size: .74rem; font-weight: 700;
  color: var(--green-text-soft); }
.acc-row { border-top: 1px solid var(--line); font-size: .8rem; }
.acc-name { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.acc-name small { font-size: .68rem; color: var(--slate); font-weight: 400; }
.acc-credit { color: var(--green-text-soft); }
.acc-debit { color: #b45309; }
.acc-balance { display: flex; flex-direction: column; gap: 2px; font-weight: 800;
  text-align: end; }
.acc-balance small { font-size: .66rem; font-weight: 400; color: var(--slate); }
.acc-pos { color: var(--green-text-soft); }
.acc-neg { color: #b91c1c; }
@media (max-width: 560px) {
  .acc-head { display: none; }
  .acc-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .acc-credit, .acc-debit { font-size: .72rem; color: var(--slate); }
}
.acc-fee { background: color-mix(in srgb, var(--slate) 5%, transparent); }

/* خطوط مالیات و تخفیف در خلاصهٔ سبد */
.sum-tax span { color: var(--slate); }
.sum-tax b { font-weight: 600; }
.sum-disc b { color: var(--green-text-soft); }

/* اطلاع‌رسانی مالیات در فرم کالا */
.tax-note { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
  padding: 12px 16px; }
.tax-note > span { font-weight: 700; font-size: .85rem; color: #1e40af; }
.tax-note ul { list-style: none; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.tax-note li { font-size: .82rem; }
.tax-note i { font-style: normal; color: var(--slate); font-size: .74rem; }
.tax-note small { font-size: .74rem; color: var(--slate); line-height: 1.8; }

/* نشان ضمانت بازگشت در صفحهٔ کالا */
.pd-return { display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding: 12px 16px; border-radius: 14px; background: #ecfdf5;
  border: 1px solid #a7f3d0; }
.pd-return-ic { font-size: 1.4rem; flex-shrink: 0; }
.pd-return b { display: block; font-size: .88rem; color: #065f46; }
.pd-return small { display: block; font-size: .76rem; color: #047857; line-height: 1.7; }

/* ==========================================================================
   بخش مالی
   ========================================================================== */
.fin-cards .quota-card small { display: block; margin-top: 4px; font-size: .68rem;
  color: var(--slate); }
.fin-filters { border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); margin-bottom: 14px; overflow: hidden; }
.fin-filters summary { padding: 12px 16px; cursor: pointer; font-weight: 700;
  font-size: .86rem; list-style: none; }
.fin-filters summary::-webkit-details-marker { display: none; }
.fin-form { display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 0 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.fin-form label { display: flex; flex-direction: column; gap: 4px; }
.fin-form span { font-size: .76rem; font-weight: 600; color: var(--slate); }
.fin-form input, .fin-form select { padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: .84rem;
  background: var(--surface); color: var(--ink); }
.fin-form-actions { display: flex; gap: 8px; }

.fin-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-bottom: 14px; }
.fin-summary > div { padding: 10px 14px; border-radius: 12px;
  background: var(--green-100); text-align: center; }
.fin-summary span { display: block; font-size: .7rem; color: var(--slate); }
.fin-summary b { font-size: .88rem; font-weight: 800; }

.fin-cur { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-bottom: 16px; }
.fin-cur-item { padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); }
.fin-cur-item b { display: block; font-size: .84rem; }
.fin-cur-item span { display: block; font-size: .92rem; font-weight: 800;
  color: var(--green-text-soft); margin: 3px 0; }
.fin-cur-item small { font-size: .68rem; color: var(--slate); }

.fin-table { display: flex; flex-direction: column; gap: 8px; }
.fin-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fin-row.fin-paid { border-inline-start: 3px solid var(--green); }
.fin-row.fin-held { border-inline-start: 3px solid #d97706; }
.fin-row.fin-reversed { opacity: .65; border-inline-start: 3px solid #dc2626; }
.fin-main { flex: 1; min-width: 0; }
.fin-main > b { display: block; font-size: .86rem; margin-bottom: 5px; }
.fin-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .7rem; color: var(--slate); }
.fin-order { color: var(--green-text-soft); text-decoration: none; font-weight: 700; }
.fin-ostat { padding: 1px 8px; border-radius: 999px; background: var(--green-100);
  color: var(--green-text-soft); font-weight: 600; }
.fin-kind { padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.fin-k-supplier { background: #dbeafe; color: #1e40af; }
.fin-k-visitor { background: #fef3c7; color: #92400e; }
.fin-k-platform { background: #d1fae5; color: #065f46; }
.fin-k-tax { background: #ede9fe; color: #5b21b6; }
.fin-k-refund { background: #fee2e2; color: #991b1b; }
.fin-k-debt { background: #fecaca; color: #7f1d1d; }
.fin-amount { text-align: end; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.fin-neg { color: #b91c1c; }
.fin-status { display: block; font-size: .66rem; font-weight: 400; color: var(--slate); }
.fin-act { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.btn-xs { padding: 5px 12px; font-size: .74rem; }
.fin-empty { padding: 30px; text-align: center; color: var(--slate); font-size: .86rem; }

@media (min-width: 700px) {
  .fin-form { grid-template-columns: repeat(3, 1fr); }
  .fin-summary { grid-template-columns: repeat(6, 1fr); }
  .fin-cur { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .fin-row { flex-wrap: wrap; }
  .fin-act { flex-direction: row; width: 100%; }
}

/* مرجوعی کالا */
.ret-list { display: flex; flex-direction: column; gap: 10px; }
.ret-card { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); text-decoration: none; color: var(--ink); flex-wrap: wrap; }
.ret-main b { display: block; font-size: .88rem; }
.ret-main small { display: block; font-size: .72rem; color: var(--slate); margin-top: 3px; }
.ret-status { font-size: .7rem; padding: 3px 11px; border-radius: 999px; font-weight: 700; }
.ret-s-requested, .ret-s-reviewing { background: #dbeafe; color: #1e40af; }
.ret-s-awaiting, .ret-s-received, .ret-s-inspecting { background: #fef3c7; color: #92400e; }
.ret-s-approved { background: #d1fae5; color: #065f46; }
.ret-s-rejected, .ret-s-cancelled { background: #fee2e2; color: #991b1b; }
.ret-form-wrap summary { list-style: none; cursor: pointer; }
.ret-form-wrap summary::-webkit-details-marker { display: none; }
.ret-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 12px; width: 100%; }
.ret-form label { display: flex; flex-direction: column; gap: 4px; }
.ret-form span { font-size: .74rem; font-weight: 600; color: var(--slate); }
.ret-form input, .ret-form select, .ret-form textarea {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .84rem; background: var(--surface); color: var(--ink); }
.ret-full { grid-column: 1/-1; }
.ret-form button { grid-column: 1/-1; }

.ret-steps { display: flex; gap: 4px; margin: 16px 0 20px; overflow-x: auto;
  padding-bottom: 6px; }
.ret-step { flex: 1; min-width: 78px; text-align: center; position: relative; }
.ret-dot { display: grid; place-items: center; width: 32px; height: 32px;
  margin: 0 auto 6px; border-radius: 50%; font-size: .8rem; font-weight: 800;
  background: var(--line); color: var(--slate); }
.ret-step.on .ret-dot { background: var(--green-btn); color: var(--on-green); }
.ret-step.now .ret-dot { background: #b45309; color: #fff;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, .2); }
.ret-step small { font-size: .68rem; color: var(--slate); }
.ret-step.on small, .ret-step.now small { color: var(--ink); font-weight: 600; }
.fin-why { font-size: .68rem; color: var(--slate); white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; background: var(--green-100); }

/* صفحهٔ ثبت تحویل (حمل‌ونقل) */
.dd-wrap { max-width: 620px; }
.dd-head { text-align: center; margin-bottom: 22px; }
.dd-head h1 { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
.dd-head p { font-size: .86rem; color: var(--slate); }
.dd-form { display: flex; flex-direction: column; gap: 14px;
  padding: 22px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); }
.dd-code-label span, .dd-note-label span { display: block; font-size: .8rem;
  font-weight: 600; margin-bottom: 6px; color: var(--slate); }
.dd-code { width: 100%; padding: 18px; text-align: center; font-size: 1.9rem;
  font-weight: 800; letter-spacing: .5rem; border: 2px solid var(--line);
  border-radius: 14px; background: var(--surface); color: var(--ink); }
.dd-code:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-100); }
.dd-note-label input { width: 100%; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 12px; font: inherit; font-size: .88rem;
  background: var(--surface); color: var(--ink); }
.dd-submit { padding: 14px; font-size: 1rem; }
.dd-result { margin-top: 18px; padding: 16px 18px; border-radius: 14px; }
.dd-ok { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.dd-bad { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.dd-result b { display: block; font-size: .95rem; margin-bottom: 8px; }
.dd-order { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; }
.dd-stats { display: flex; gap: 10px; margin: 20px 0; }
.dd-stats > div { flex: 1; padding: 14px; border-radius: 14px;
  background: var(--green-100); text-align: center; }
.dd-stats span { display: block; font-size: .72rem; color: var(--slate); }
.dd-stats b { font-size: 1.2rem; font-weight: 800; }
.tb-courier { background: var(--green-100); padding: 2px 10px; border-radius: 999px;
  font-weight: 700;
  /* رنگ متن صریح لازم است: نوار بالا متن روشن دارد ولی این نشان
     پس‌زمینهٔ روشن می‌گیرد، پس بدون این قاعده ناخوانا می‌شد. */
  color: var(--green-text-soft) !important; }
.tb-courier:hover { background: var(--green-btn); color: var(--on-green) !important; }

/* ==========================================================================
   فاکتور خرید (مورد ۷)
   ========================================================================== */
.inv-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.invoice { background: #fff; color: #111827; border: 1px solid var(--line);
  border-radius: 16px; padding: 26px; max-width: 900px; margin: 0 auto; }
.inv-head { display: flex; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.inv-brand { display: flex; gap: 14px; align-items: flex-start; }
.inv-brand img { height: 56px; width: auto; object-fit: contain; }
.inv-logo-text { font-size: 1.3rem; font-weight: 800; color: #0aa46a; }
.inv-brand-info { display: flex; flex-direction: column; gap: 3px; }
.inv-brand-info b { font-size: 1rem; }
.inv-brand-info span { font-size: .74rem; color: #6b7280; }
.inv-title h1 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.inv-no { display: flex; gap: 8px; font-size: .8rem; }
.inv-no span { color: #6b7280; }

.inv-party { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 16px 0; border-bottom: 1px solid #e5e7eb; }
.inv-party > div { display: flex; gap: 8px; font-size: .82rem; }
.inv-party span { color: #6b7280; min-width: 58px; }
.inv-party-wide { grid-column: 1/-1; }

.inv-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .8rem; }
.inv-table th { background: #f3f4f6; padding: 9px 8px; text-align: center;
  font-weight: 700; border: 1px solid #e5e7eb; }
.inv-table td { padding: 9px 8px; text-align: center; border: 1px solid #e5e7eb; }
.inv-name { text-align: start !important; font-weight: 600; }
.inv-seller { text-align: start !important; }
.inv-seller small { display: block; font-size: .64rem; color: #6b7280; }

.inv-sum { display: flex; flex-direction: column; gap: 6px; margin-inline-start: auto;
  max-width: 330px; font-size: .84rem; }
.inv-sum > div { display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; }
.inv-sum span { color: #6b7280; }
.inv-total { border-top: 2px solid #111827; margin-top: 6px; padding-top: 10px !important;
  font-size: 1rem; }
.inv-total b { font-weight: 800; color: #0aa46a; }

.inv-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.inv-status { display: flex; flex-wrap: wrap; gap: 8px; font-size: .78rem;
  margin-bottom: 10px; }
.inv-status span { color: #6b7280; }
.inv-note { font-size: .72rem; color: #6b7280; line-height: 1.8; }
.inv-print { font-size: .68rem; color: #9ca3af; margin-top: 4px; }

@media print {
  /* نام کلاس‌ها باید با قالب واقعی بخواند؛ نام اشتباه یعنی هدر و منو
     روی فاکتور چاپ می‌شوند. */
  .no-print, .header, .site-header, .topbar, .footer, .site-footer,
  .mobile-nav, .mobile-tabbar, .mega, .msheet, .search-modal,
  .drawer, .drawer-overlay, .chat-fab, .chat-launcher, #chatLauncherMount,
  .cmp-bar, .breadcrumb, .pd-mobile-bar, .hamburger, .search,
  .search-mobile-btn, .actions, .notif-bell, .lang-pick, .theme-btn,
  .inv-actions { display: none !important; }

  body, .page-content, .wrap, main {
    background: #fff !important; padding: 0 !important; margin: 0 !important;
    max-width: 100% !important;
  }
  body::after { display: none !important; }        /* فاصله‌گیر نوار موبایل */
  .invoice { border: none; border-radius: 0; padding: 0; max-width: 100%;
    box-shadow: none; }
  /* رنگ‌ها در چاپ باید مسطح و خوانا باشند */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { text-decoration: none; color: inherit; }
  @page { margin: 1.2cm; }
}
@media (max-width: 560px) {
  .inv-party { grid-template-columns: 1fr; }
  .inv-table { font-size: .7rem; }
  .inv-table th, .inv-table td { padding: 6px 4px; }
  .inv-sum { max-width: 100%; }
}

/* اطلاع‌رسانی هزینه‌های سربار در فرم کالا */
.fee-note { background: #fdf4ff; border: 1px solid #f0abfc; border-radius: 12px;
  padding: 12px 16px; }
.fee-note > span { font-weight: 700; font-size: .85rem; color: #86198f; }
.fee-note ul { list-style: none; margin: 8px 0; display: flex;
  flex-direction: column; gap: 5px; }
.fee-note li { font-size: .82rem; }
.fee-note small { font-size: .72rem; color: var(--slate); }
.fee-note i { display: block; font-style: normal; font-size: .72rem;
  color: var(--slate); }

/* ورودی‌های پنل هرگز از عرض ستون بیرون نزنند */
.field input, .field select, .field textarea {
  max-width: 100%; box-sizing: border-box;
}
.form-grid { min-width: 0; }
.form-grid > * { min-width: 0; }

/* ==========================================================================
   بخش مدیریت سایت و دسترسی‌ها
   ========================================================================== */
.adm-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.adm-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.adm-card:hover { transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.2); border-color: var(--green); }
.adm-ic { font-size: 1.5rem; }
.adm-card b { font-size: .92rem; }
.adm-card small { font-size: .74rem; color: var(--slate); line-height: 1.7; }
.adm-card-key { background: var(--green-100); border-color: var(--green); }

.acc-pages { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.acc-chip { font-size: .66rem; padding: 2px 8px; border-radius: 999px;
  background: var(--green-100); color: var(--green-text-soft); }

.acc-form { display: flex; flex-direction: column; gap: 14px; }
.acc-group { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: var(--surface); }
.acc-group legend { font-size: .84rem; font-weight: 800; padding: 0 8px;
  color: var(--green-text-soft); }
.acc-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
  cursor: pointer; }
.acc-item input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.acc-item-body b { display: block; font-size: .86rem; font-weight: 600; }
.acc-item-body small { display: block; font-size: .72rem; color: var(--slate);
  line-height: 1.7; margin-top: 2px; }
.acc-actions { display: flex; gap: 8px; }

@media (min-width: 700px) {
  .adm-grid { grid-template-columns: repeat(3, 1fr); }
}
.acc-danger { padding: 10px 14px; border-radius: 12px; background: #fef3c7;
  border: 1px solid #fde68a; align-items: flex-start; }
.acc-danger small { display: block; font-size: .7rem; color: #92400e;
  line-height: 1.7; margin-top: 3px; font-weight: 400; }

/* کالاهای قابل فروش ویزیتور */
.avl-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.avl-card { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 13px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); flex-wrap: wrap; }
.avl-main b { display: block; font-size: .88rem; }
.avl-main small { display: block; font-size: .72rem; color: var(--slate); margin: 2px 0 5px; }
.avl-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .74rem; color: var(--slate); }
.avl-tag { padding: 1px 9px; border-radius: 999px; font-weight: 700; font-size: .68rem; }
.avl-open { background: #dbeafe; color: #1e40af; }
.avl-ok { background: #d1fae5; color: #065f46; }
@media (min-width: 800px) { .avl-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   بخش ویزیتوری — منوی کناری اختصاصی
   ========================================================================== */
.vz-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; }
.vz-nav { display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px;
  background: var(--surface); height: fit-content; }
.vz-nav a { display: block; padding: 9px 13px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-size: .84rem;
  transition: background .15s; }
.vz-nav a:hover { background: var(--green-100); }
.vz-nav a.on { background: var(--green-btn); color: var(--on-green); font-weight: 700; }
.vz-back { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0 !important;
  margin-bottom: 6px; padding-bottom: 12px !important; color: var(--slate) !important;
  font-size: .78rem !important; }
.vz-back:hover { color: var(--green-text-soft) !important; }
.vz-group { display: block; font-size: .68rem; font-weight: 800; color: var(--slate);
  padding: 10px 13px 4px; letter-spacing: .02em; }
.vz-body { min-width: 0; }
@media (min-width: 900px) {
  .vz-wrap { grid-template-columns: 210px 1fr; }
}

/* ==========================================================================
   مشتری‌های ویزیتور
   ========================================================================== */
.cst-row { text-decoration: none; color: var(--ink); }
.cst-acc { color: var(--green-text-soft) !important; font-weight: 700; }
.cst-req { color: #b45309 !important; font-weight: 700; }
.cst-map { width: 100%; height: 260px; border-radius: 12px;
  border: 1px solid var(--line); margin: 6px 0; overflow: hidden; }
.cst-info { display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); margin-bottom: 16px; }
.cst-info > div { display: flex; gap: 10px; font-size: .84rem; }
.cst-info span { color: var(--slate); min-width: 76px; }
.cst-wide { grid-column: 1/-1; }
.cst-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cst-doc { padding: 8px 14px; border-radius: 10px; background: var(--green-100);
  color: var(--green-text-soft); text-decoration: none; font-size: .8rem;
  font-weight: 600; }
.cst-doc:hover { background: var(--green-btn); color: var(--on-green); }
@media (min-width: 700px) { .cst-info { grid-template-columns: 1fr 1fr; } }

/* فرم سفارش دستی */
.mo-rows { display: flex; flex-direction: column; gap: 8px; }
.mo-row { display: grid; grid-template-columns: 1fr 70px 110px 36px; gap: 6px;
  align-items: center; }
.mo-row select, .mo-row input { padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: .82rem; min-width: 0;
  background: var(--surface); color: var(--ink); box-sizing: border-box; }
.mo-del { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--danger-text); cursor: pointer; font-size: .9rem; }
.mo-del:hover { background: color-mix(in srgb, var(--danger-text) 15%, transparent); }
.mo-total { display: flex; justify-content: space-between; padding: 12px 16px;
  border-radius: 12px; background: var(--green-100); font-size: .9rem; }
.mo-total b { font-weight: 800; color: var(--green-text-soft); }
@media (max-width: 560px) {
  .mo-row { grid-template-columns: 1fr 1fr; }
  .mo-row select, .mo-row .mo-pick { grid-column: 1/-1; }
}

/* اقلام سفارش دستی در بررسی ادمین */
.mo-items { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mo-chip { font-size: .7rem; padding: 3px 10px; border-radius: 999px;
  background: var(--green-100); color: var(--green-text-soft); }
.cst-map-warn { position: absolute; inset-inline: 12px; bottom: 12px; z-index: 500;
  padding: 9px 13px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line); font-size: .74rem; color: var(--slate);
  text-align: center; }
.cst-map { position: relative; }

/* مودال اعلان */
.nt-meta { display: flex; justify-content: space-between; gap: 10px;
  font-size: .72rem; color: var(--slate); padding-bottom: 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.nt-kind { font-weight: 700; color: var(--green-text-soft); }
.nt-body { font-size: .86rem; line-height: 2.1; text-align: start;
  white-space: normal; word-break: break-word; max-height: 46vh;
  overflow-y: auto; }
.nt-body i { color: var(--slate); }
/* ردیف اعلان حالا دکمه است — ظاهرش باید مثل قبل بماند */
button.notif-row { width: 100%; text-align: start; font: inherit;
  background: none; border: none; cursor: pointer; }

/* ==========================================================================
   باکس هر فروش در بخش مالی
   ========================================================================== */
.og-list { display: flex; flex-direction: column; gap: 10px; }
.og-box { border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); overflow: hidden; }
.og-head { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.og-head::-webkit-details-marker { display: none; }
.og-head::after { content: "▾"; color: var(--slate); font-size: .8rem; }
.og-box[open] .og-head::after { content: "▴"; }
.og-main > b { display: block; font-size: .9rem; }
.og-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px;
  font-size: .72rem; color: var(--slate); }
.og-amounts { text-align: end; white-space: nowrap; }
.og-amounts b { font-size: .95rem; font-weight: 800; }
.og-amounts small { display: block; font-size: .66rem; color: var(--slate); }
.og-body { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.og-sub { font-size: .8rem; font-weight: 800; margin: 14px 0 8px;
  color: var(--green-text-soft); }
.og-items { display: flex; flex-direction: column; gap: 6px; }
.og-item { display: grid; grid-template-columns: 2fr 1.2fr auto auto;
  gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px;
  background: var(--bg); font-size: .78rem; }
.og-item-name { font-weight: 600; }
.og-item-vendor { color: var(--slate); font-size: .72rem; }
.og-item-qty { color: var(--slate); }
.og-item-sum { font-weight: 700; text-align: end; }
.og-buyer { display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 12px 14px; border-radius: 10px; background: var(--bg); font-size: .8rem; }
.og-buyer > div { display: flex; gap: 10px; }
.og-buyer span { color: var(--slate); min-width: 52px; }
.og-wide { grid-column: 1/-1; }
.og-private { color: var(--slate); font-size: .74rem; }
.og-total { display: flex; justify-content: space-between; margin-top: 10px;
  padding: 11px 14px; border-radius: 10px; background: var(--green-100);
  font-size: .84rem; }
.og-total b { font-weight: 800; color: var(--green-text-soft); }
.og-empty { padding: 14px; text-align: center; color: var(--slate); font-size: .8rem; }
@media (min-width: 700px) { .og-buyer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .og-item { grid-template-columns: 1fr auto; }
  .og-item-vendor { grid-column: 1/-1; }
}

/* ==========================================================================
   مدیریت زیرمجموعه‌های تأمین‌کننده
   ========================================================================== */
.mbr-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.mbr-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: var(--surface); }
.mbr-off { opacity: .6; }
.mbr-head { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mbr-who b { display: block; font-size: .9rem; }
.mbr-who small { font-size: .74rem; color: var(--slate); }
.mbr-switch { display: flex; align-items: center; gap: 6px; font-size: .78rem;
  cursor: pointer; }
.mbr-switch input { width: 17px; height: 17px; }
.mbr-perms { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 12px 0; }
.mbr-perm { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; transition: background .15s; }
.mbr-perm:hover { background: var(--green-100); }
.mbr-perm input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; }
.mbr-perm-body b { display: block; font-size: .84rem; font-weight: 600; }
.mbr-perm-body small { display: block; font-size: .71rem; color: var(--slate);
  line-height: 1.7; margin-top: 1px; }
.mbr-actions { display: flex; gap: 10px; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--line); }
.mbr-add { border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 700px) { .mbr-perms { grid-template-columns: 1fr 1fr; } }

/* صفحهٔ عدم دسترسی — نمایش دلیل */
.dn-reasons { max-width: 460px; margin: 0 auto 14px; }
.dn-reason { padding: 11px 15px; border-radius: 12px; background: #fef3c7;
  border: 1px solid #fde68a; color: #92400e; font-size: .84rem;
  line-height: 1.9; margin-bottom: 8px; text-align: start; }
.dn-hint { font-size: .8rem; color: var(--slate); margin-top: 14px; }
.dn-vendors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 8px; }
.pnav-vname small { font-size: .62rem; font-weight: 400; opacity: .75;
  margin-inline-start: 4px; }

/* انتخابگر کالا با جستجو (سفارش دستی) */
.mo-pick { position: relative; min-width: 0; }
.mo-pick-input { width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: .82rem; box-sizing: border-box;
  background: var(--surface); color: var(--ink); }
.mo-pick-input:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100); }
.mo-pick-list { position: absolute; inset-inline: 0; top: calc(100% + 4px);
  z-index: 60; max-height: 260px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.28); }
.mo-pick-item { display: block; width: 100%; text-align: start; padding: 9px 13px;
  border: none; background: none; cursor: pointer; font: inherit;
  border-bottom: 1px solid var(--line); color: var(--ink); }
.mo-pick-item:last-child { border-bottom: none; }
.mo-pick-item:hover, .mo-pick-item:focus { background: var(--green-100); outline: none; }
.mo-pick-t { display: block; font-size: .84rem; font-weight: 600; }
.mo-pick-item small { display: block; font-size: .7rem; color: var(--slate); margin-top: 2px; }
.mo-pick-empty { padding: 14px; text-align: center; font-size: .8rem; color: var(--slate); }

/* ==========================================================================
   اتصال ویزیتورها به گروه (مدیریت ویزیتورها)
   ========================================================================== */
.vg-box { border: 1px solid var(--line); border-radius: 14px; padding: 0;
  background: var(--surface); margin-bottom: 18px; overflow: hidden; }
.vg-head { padding: 14px 16px; cursor: pointer; font-weight: 700;
  font-size: .88rem; list-style: none; }
.vg-head::-webkit-details-marker { display: none; }
.vg-head small { font-weight: 400; color: var(--slate); font-size: .74rem; }
.vg-form { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 14px; }
.vg-search input { width: 100%; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: .84rem; box-sizing: border-box;
  background: var(--surface); color: var(--ink); }
.vg-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 12px; }
.vg-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.vg-item:last-child { border-bottom: none; }
.vg-item:hover { background: var(--green-100); }
.vg-item input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; }
.vg-item-body b { display: block; font-size: .85rem; }
.vg-item-body small { display: block; font-size: .72rem; color: var(--slate);
  margin-top: 2px; }
.vg-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vg-empty { padding: 18px; text-align: center; color: var(--slate); font-size: .82rem; }

/* صفحهٔ تخصیص کالا */
.asg-form { display: flex; flex-direction: column; gap: 12px; }
.asg-modes { display: grid; grid-template-columns: 1fr; gap: 8px; }
.asg-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
  background: var(--surface); transition: border-color .15s, background .15s; }
.asg-mode:hover { border-color: var(--green); }
.asg-mode.on { border-color: var(--green); background: var(--green-100); }
.asg-mode input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; }
.asg-mode b { display: block; font-size: .85rem; }
.asg-mode small { display: block; font-size: .72rem; color: var(--slate);
  margin-top: 2px; }
@media (min-width: 760px) { .asg-modes { grid-template-columns: 1fr 1fr; } }

/* دکمهٔ مرور کالا و مودال فهرست */
.mo-browse { position: absolute; inset-inline-end: 6px; top: 50%;
  transform: translateY(-50%); width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer;
  font-size: .9rem; line-height: 1; padding: 0; }
.mo-browse:hover { background: var(--green-100); border-color: var(--green); }
.mo-pick-input { padding-inline-end: 42px; }

.mb-wrap { display: flex; flex-direction: column; gap: 10px; }
.mb-search { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line);
  border-radius: 11px; font: inherit; font-size: .88rem; box-sizing: border-box;
  background: var(--surface); color: var(--ink); }
.mb-search:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100); }
.mb-count { font-size: .72rem; color: var(--slate); }
.mb-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 12px; }
.mb-item { display: block; width: 100%; text-align: start; padding: 11px 14px;
  border: none; border-bottom: 1px solid var(--line); background: none;
  cursor: pointer; font: inherit; color: var(--ink); }
.mb-item:last-child { border-bottom: none; }
.mb-item:hover, .mb-item:focus { background: var(--green-100); outline: none; }
.mb-t { display: block; font-size: .86rem; font-weight: 600; }
.mb-item small { display: block; font-size: .72rem; color: var(--slate);
  margin-top: 2px; }
.mb-empty { padding: 24px; text-align: center; color: var(--slate); font-size: .84rem; }


/* ==========================================================================
   محافظ رنگ دکمه‌ها
   --------------------------------------------------------------------------
   قواعدی مثل `.pf-sec-head a { color: green }` به دکمه‌های داخلشان هم
   می‌رسند و متن سبز روی پس‌زمینهٔ سبز نامرئی می‌شود. این قاعده رنگ درست
   دکمه‌ها را در هر ظرفی تضمین می‌کند.
   ========================================================================== */
a.btn-primary, button.btn-primary { color: var(--on-green); }
a.btn-ghost, button.btn-ghost { color: var(--ink); }
a.btn-danger, button.btn-danger { color: #fff; }
a.btn-primary:hover, button.btn-primary:hover { color: var(--on-green); }

/* نشان «موارد تازه» روی کارت‌های مدیریت */
.adm-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 6px;
  border-radius: 999px; background: #dc2626; color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1; vertical-align: middle; }
.adm-card.has-new { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-100); }

/* ==========================================================================
   بخش مدیریت سایت — منوی کناری
   ========================================================================== */
/* منوی مدیریتی — همان ساختار منوی پروفایل، با میان‌بُرهای بازگشت */
.adm-back { color: var(--slate) !important; font-size: .78rem !important; }
.adm-back:hover { color: var(--green-text-soft) !important; }
.adm-nav .pnav-vendor { margin-top: 10px; }
.adm-hero { background: linear-gradient(135deg, #0f5132, #075e35); }

/* مدیریت سفارش‌ها (ادمین) */
.oa-card { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); text-decoration: none;
  color: var(--ink); flex-wrap: wrap; }
.oa-card:hover { border-color: var(--green); }
.oa-main b { display: block; font-size: .9rem; }
.oa-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px;
  font-size: .72rem; color: var(--slate); }
.oa-side { text-align: end; white-space: nowrap; }
.oa-side b { display: block; font-size: .95rem; font-weight: 800; }
.oa-status { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); margin-bottom: 16px; }
.oa-status small { flex: 1 1 100%; font-size: .72rem; color: var(--slate); }
.oa-vendor { border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.oa-vendor-head { display: flex; justify-content: space-between;
  margin-bottom: 8px; font-size: .86rem; }

/* موجودی انبار در فهرست کالاهای تأمین‌کننده */
.prod-stock { font-weight: 600; }
.prod-stock.low { color: #b45309; }
.prod-stock.out { color: var(--danger-text); }

/* ==========================================================================
   کارت خرید — ستون سوم صفحهٔ محصول
   ========================================================================== */
.pd-buybox {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.pd-buy-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd-buy-price .now { font-size: 1.5rem; font-weight: 900; letter-spacing: -.01em; }
.pd-buy-price .old { font-size: .92rem; color: var(--slate); text-decoration: line-through; }
.pd-buy-price .off {
  font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: var(--offer-btn); color: var(--on-offer);
}
.pd-buy-unit { font-size: .74rem; color: var(--slate); }

/* نوار اعتماد: سه نشانهٔ کوتاه که پیش از خرید پاسخ می‌دهند */
.pd-trust { display: grid; gap: 8px; padding: 12px 0; border-block: 1px solid var(--line); }
.pd-trust-row { display: flex; gap: 9px; align-items: flex-start; font-size: .78rem; }
.pd-trust-ic { flex: none; width: 20px; text-align: center; }
.pd-trust b { font-weight: 700; display: block; font-size: .8rem; }
.pd-trust small { color: var(--slate); font-size: .72rem; line-height: 1.7; }

/* وضعیت موجودی */
.pd-stock { font-size: .8rem; font-weight: 700; display: flex; gap: 7px; align-items: center; }
.pd-stock.ok { color: var(--green-text-soft); }
.pd-stock.low { color: #b45309; }
.pd-stock.out { color: var(--danger-text); }
.pd-stock-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--line);
  overflow: hidden; }
.pd-stock-bar i { display: block; height: 100%; background: var(--green-btn);
  border-radius: 999px; }
.pd-stock.low .pd-stock-bar i { background: #f59e0b; }

/* بخش‌بندی محتوای پایین صفحه */
.pd-sections { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.pd-block { border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); overflow: hidden; }
.pd-block-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; cursor: pointer; list-style: none; font-weight: 800;
  font-size: .92rem;
}
.pd-block-head::-webkit-details-marker { display: none; }
.pd-block-head::after { content: "▾"; color: var(--slate); font-size: .78rem; }
.pd-block[open] .pd-block-head::after { content: "▴"; }
.pd-block-body { padding: 0 18px 18px; border-top: 1px solid var(--line); padding-top: 15px; }
.pd-block-head small { font-weight: 400; color: var(--slate); font-size: .74rem;
  margin-inline-start: 6px; }

/* جدول مشخصات */
.pd-specs { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line);
  border-radius: 10px; overflow: hidden; }
.pd-spec { display: flex; gap: 12px; padding: 10px 13px; background: var(--surface);
  font-size: .82rem; }
.pd-spec dt { color: var(--slate); min-width: 120px; flex: none; }
.pd-spec dd { margin: 0; font-weight: 600; }
@media (min-width: 700px) { .pd-specs { grid-template-columns: 1fr 1fr; } }

/* نوار خرید چسبان موبایل */
.pd-mobile-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
  display: none; gap: 10px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.pd-mobile-bar .price { font-weight: 900; font-size: .95rem; white-space: nowrap; }
.pd-mobile-bar .btn { flex: 1; justify-content: center; }
@media (max-width: 799px) {
  .pd-mobile-bar { display: flex; }
  /* فضای امن: نوار خرید روی نوار ناوبری می‌نشیند */
  body:has(.pd-mobile-bar) .mobile-nav { bottom: 62px; }
  body:has(.pd-mobile-bar)::after { height: calc(126px + env(safe-area-inset-bottom)); }
}

/*
  ⚠️ دکمهٔ چت هم باید بالای نوار خرید برود.

  نوار ناوبری با `:has()` جابه‌جا می‌شد ولی دکمهٔ چت جا
  می‌ماند و روی قیمت و دکمهٔ «افزودن به سبد» می‌نشست — یعنی
  دقیقاً روی مهم‌ترین دکمهٔ صفحه.

  ۱۲۶ پیکسل همان ارتفاع دو نوار روی هم است (۶۲ نوار خرید +
  ۶۴ ناوبری)؛ ۱۲ پیکسل فاصلهٔ تنفس.

  ⚠️ `:has()` در فهرست انتخابگرها بخشنده نیست — اگر مرورگری
  آن را نشناسد، **کل** قاعده دور انداخته می‌شود. پس تنها در
  قاعدهٔ خودش می‌آید.
*/
@media (max-width: 799px) {
  body:has(.pd-mobile-bar) .chat-launcher {
    bottom: calc(138px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   فهرست مدیریتی کالاها
   ========================================================================== */
.pa-list { display: flex; flex-direction: column; gap: 8px; }
.pa-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px;
  align-items: center; width: 100%; text-align: start; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s; }
.pa-row:hover { border-color: var(--green); background: var(--green-100); }
.pa-thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); font-size: 1.1rem; flex: none; }
.pa-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pa-main { min-width: 0; }
.pa-main b { display: block; font-size: .86rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pa-main small { display: block; font-size: .72rem; color: var(--slate); margin-top: 2px; }
.pa-num { text-align: center; min-width: 74px; }
.pa-num b { display: block; font-size: .84rem; font-weight: 700; }
.pa-num small { font-size: .66rem; color: var(--slate); }
.pa-low { color: #b45309; }
.pa-out { color: var(--danger-text); }
.pa-off, .pa-pend { color: #b45309; font-weight: 700; }
@media (max-width: 700px) {
  .pa-row { grid-template-columns: 44px 1fr; }
  .pa-num { text-align: start; min-width: 0; grid-column: 2; display: inline-block;
    margin-inline-end: 14px; }
}

/* مودال جزئیات کالا */
.pm-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pm-head { display: flex; gap: 12px; align-items: flex-start; }
.pm-img { width: 78px; height: 78px; border-radius: 12px; object-fit: cover;
  background: var(--bg); flex: none; }
.pm-head h4 { font-size: .98rem; margin-bottom: 4px; }
.pm-head small { color: var(--slate); font-size: .74rem; }
.pm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pm-stat { padding: 10px 12px; border-radius: 10px; background: var(--green-100);
  text-align: center; }
.pm-stat b { display: block; font-size: .95rem; font-weight: 800;
  color: var(--green-text-soft); }
.pm-stat small { font-size: .68rem; color: var(--slate); }
.pm-sec { border-top: 1px solid var(--line); padding-top: 12px; }
.pm-sec h5 { font-size: .84rem; font-weight: 800; margin-bottom: 8px; }
.pm-rows { display: flex; flex-direction: column; gap: 5px; }
.pm-item { display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 11px; border-radius: 8px; background: var(--bg); font-size: .76rem; }
.pm-item small { color: var(--slate); }
.pm-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: .78rem; }
.pm-kv > div { display: flex; gap: 8px; }
.pm-kv span { color: var(--slate); }
.pm-empty { padding: 12px; text-align: center; color: var(--slate); font-size: .76rem; }
@media (min-width: 620px) { .pm-stats { grid-template-columns: repeat(4, 1fr); } }

/* نمودار تغییر قیمت */
.pm-chart { width: 100%; height: 130px; }
.pm-chart .ln { fill: none; stroke: var(--green-btn); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round; }
.pm-chart .ar { fill: var(--green-100); }
.pm-chart .dot { fill: var(--green-btn); }
.pm-chart .gl { stroke: var(--line); stroke-width: 1; }
.pm-chart text { font-size: 9px; fill: var(--slate); }

/* ==========================================================================
   نظرات کاربران — دو ستون با اسکرول داخلی
   ========================================================================== */
.rv-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 900px) {
  /* فرم باریک سمت راست، نظرات پهن سمت چپ */
  .rv-wrap { grid-template-columns: 300px minmax(0, 1fr); }
}
.rv-count { font-weight: 400; color: var(--slate); font-size: .82rem; }

/* ---- ستون فرم ---- */
.rv-form {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  padding: 16px; display: flex; flex-direction: column; gap: 11px;
}
.rv-form h3 { font-size: .95rem; font-weight: 800; }
.rv-form .field { display: flex; flex-direction: column; gap: 5px; }
.rv-form .field span { font-size: .76rem; font-weight: 600; color: var(--slate); }
.rv-form input, .rv-form select, .rv-form textarea {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .84rem; background: var(--surface); color: var(--ink);
  box-sizing: border-box; width: 100%;
}
.rv-form textarea { resize: vertical; min-height: 92px; }
.rv-form input:focus, .rv-form select:focus, .rv-form textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-100);
}
.rv-login p { font-size: .82rem; color: var(--slate); line-height: 1.9; }
@media (min-width: 900px) { .rv-form { position: sticky; top: 84px; } }

/* ---- ستون نظرات ---- */
.rv-main { min-width: 0; }
.rv-scroll {
  max-height: 520px; overflow-y: auto; padding-inline-end: 8px;
  display: flex; flex-direction: column; gap: 10px;
  /* اسکرول نرم و بدون پرش هنگام باز شدن نظرهای بیشتر */
  scroll-behavior: smooth; overscroll-behavior: contain;
}
.review-item {
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px;
  background: var(--surface);
}
.rv-head { display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  font-size: .8rem; margin-bottom: 5px; }
.rv-head b { font-weight: 700; }
.rv-rate { color: #f59e0b; font-weight: 700; }
.rv-date { color: var(--slate); font-size: .72rem; margin-inline-start: auto; }
.rv-title { display: block; font-size: .86rem; margin-bottom: 3px; }
.review-item p { font-size: .83rem; line-height: 2; color: var(--ink); }
.rv-toggle { width: 100%; margin-top: 10px; justify-content: center; }
.rv-rest { color: var(--slate); font-size: .78rem; margin-inline-start: 4px; }
.rv-empty { border: 1px dashed var(--line); border-radius: 14px; padding: 32px;
  text-align: center; color: var(--slate); }
.rv-empty span { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.rv-empty p { font-size: .85rem; }

/* ==========================================================================
   اسکرول‌بار سفارشی
   --------------------------------------------------------------------------
   نازک و هم‌رنگ تم. در تم تیره روشن‌تر می‌شود تا دیده شود. روی موبایل
   اسکرول‌بار سیستمی دست‌نخورده می‌ماند (لمسی پنهان است).
   ========================================================================== */
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }   /* اسکرول‌بار سیستمی هم تیره شود */

* {
  scrollbar-width: thin;                                  /* فایرفاکس */
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
*::-webkit-scrollbar { width: 9px; height: 9px;
  background: var(--scroll-track); }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 999px;
  /* حاشیهٔ هم‌رنگ track (نه شفاف) وگرنه در تم تیره سفید می‌زند */
  border: 2px solid var(--scroll-track); background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover);
  background-clip: content-box; }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }

/* اسکرول ظرف‌های داخلی کمی محسوس‌تر تا کاربر بفهمد قابل اسکرول است */
.rv-scroll::-webkit-scrollbar,
.vg-list::-webkit-scrollbar,
.mb-list::-webkit-scrollbar,
.mo-pick-list::-webkit-scrollbar,
.nt-body::-webkit-scrollbar { width: 7px; }

/* سفارش تحویل‌شده — وضعیت قفل */
.vorder-locked { display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-radius: 11px; background: var(--green-100);
  border: 1px solid var(--green); font-size: .82rem; font-weight: 700;
  color: var(--green-text-soft); }
.vorder-locked small { font-weight: 400; font-size: .72rem; color: var(--slate); }

/* ==========================================================================
   سفارش‌های دستی ویزیتوری — کارت با مراحل
   ========================================================================== */
.mo-card { border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); overflow: hidden; }
.mo-card.mo-wait { border-color: var(--green); }
.mo-sum { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none;
  flex-wrap: wrap; }
.mo-sum::-webkit-details-marker { display: none; }
.mo-sum-main b { display: block; font-size: .9rem; }
.mo-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 5px;
  font-size: .72rem; color: var(--slate); }
.mo-sum-side { text-align: end; white-space: nowrap; }
.mo-sum-side b { display: block; font-size: .92rem; font-weight: 800; }
.mo-body { padding: 0 16px 16px; border-top: 1px solid var(--line);
  padding-top: 14px; }
.mo-h { font-size: .82rem; font-weight: 800; margin: 14px 0 8px; }

/* مراحل سفارش دستی */
.mo-steps { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 760px) { .mo-steps { grid-template-columns: repeat(4, 1fr); } }
.mo-step { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.mo-step-n { width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); font-size: .74rem; font-weight: 700;
  color: var(--slate); }
.mo-step.done { border-color: var(--green); background: var(--green-100); }
.mo-step.done .mo-step-n { background: var(--green-btn); color: var(--on-green); }
.mo-step.bad { border-color: var(--danger-text); }
/* پس‌زمینهٔ ثابت تیره لازم است: --danger-text در تم تیره روشن می‌شود و
   متن سفید رویش ناخوانا می‌گردد. */
.mo-step.bad .mo-step-n { background: #B91C1C; color: #fff; }
.mo-step b { display: block; font-size: .78rem; }
.mo-step small { display: block; font-size: .68rem; color: var(--slate);
  margin-top: 2px; line-height: 1.6; }
.mo-note { margin-top: 12px; padding: 10px 13px; border-radius: 10px;
  background: var(--bg); font-size: .8rem; color: var(--slate); }
.og-item-name small { color: var(--slate); font-size: .72rem; }

/* ==========================================================================
   میز تحویل (پیک)
   ========================================================================== */
.dd-box { border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); padding: 18px; margin-bottom: 18px; }
.dd-hint { font-size: .82rem; color: var(--slate); margin-bottom: 12px; }
.dd-form { display: flex; gap: 9px; flex-wrap: wrap; }
.dd-code, .dd-note { padding: 11px 14px; border: 1.5px solid var(--line);
  border-radius: 11px; font: inherit; background: var(--surface); color: var(--ink); }
.dd-code { flex: 1 1 160px; font-size: 1.05rem; font-weight: 800;
  letter-spacing: .12em; text-align: center; }
.dd-note { flex: 2 1 200px; font-size: .84rem; }
.dd-code:focus, .dd-note:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100); }
.dd-result { margin-top: 12px; padding: 11px 14px; border-radius: 11px;
  font-size: .85rem; font-weight: 700; }
.dd-result.ok { background: var(--green-100); color: var(--green-text-soft); }
.dd-result.bad { background: #FEE2E2; color: #B91C1C; }
.dd-result a { margin-inline-start: 8px; font-weight: 400; }

.dd-row { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 15px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--surface); flex-wrap: wrap; }
.dd-row-main b { display: block; font-size: .88rem; }
.dd-row-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px;
  font-size: .72rem; color: var(--slate); }
.dd-addr { display: block; margin-top: 5px; font-size: .72rem; color: var(--slate); }
.dd-row-side { text-align: end; display: flex; flex-direction: column; gap: 5px;
  align-items: flex-end; }
.dd-row-side b { font-size: .88rem; font-weight: 800; }
.dd-done { opacity: .85; }

/* اطلاعات فروشگاه در صفحهٔ گفتگو */
.ci-vendor { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: var(--surface); margin-bottom: 10px; }
.ci-vendor-head { display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; }
.ci-vendor-head b { font-size: .92rem; }
.ci-vtype { font-size: .7rem; padding: 2px 9px; border-radius: 999px;
  background: var(--green-100); color: var(--green-text-soft); font-weight: 700; }
.ci-vendor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: .8rem; margin-bottom: 10px; }
.ci-vendor-grid > div { display: flex; gap: 8px; }
.ci-vendor-grid span { color: var(--slate); }
.ci-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ci-chip { padding: 5px 12px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--line); font-size: .78rem; }
@media (min-width: 620px) { .ci-vendor-grid { grid-template-columns: repeat(3, 1fr); } }

/* صفحهٔ سند چاپی (فاکتور) — بدون هدر و منو */
.print-page { background: var(--bg); min-height: 100vh; }
.print-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; }
.print-wrap .inv-actions { display: flex; gap: 9px; margin-bottom: 16px;
  flex-wrap: wrap; }
@media print { .print-wrap { padding: 0; max-width: 100%; } }

/* هیرو بخش ویزیتوری */
.vz-hero { background: linear-gradient(135deg, #0f5132, #0a6e3f); }
.profile-nav.vz-nav .vz-group { display: block; padding: 10px 13px 5px;
  font-size: .7rem; font-weight: 700; color: var(--slate); }
.vz-back { color: var(--slate) !important; font-size: .78rem !important; }

/* دکمهٔ افزودن به دوستان در سربرگ گفتگو */
.ch-friend { font-size: .82rem; letter-spacing: -.05em; }
.ch-friend.on { background: var(--green-100); color: var(--green-text-soft); }
.ch-tool-off { opacity: .6; cursor: default; }

/* مازاد فروش ویزیتور */
.mo-markup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: .8rem; }
.mo-markup > div { display: flex; gap: 8px; padding: 8px 11px;
  border-radius: 9px; background: var(--bg); }
.mo-markup span { color: var(--slate); }
.mo-markup-hi { background: var(--green-100) !important; }
.mo-markup-hi b { color: var(--green-text-soft); }
.mo-mk-chip { padding: 2px 8px; border-radius: 999px; background: var(--green-100);
  color: var(--green-text-soft); font-weight: 700; }
@media (min-width: 700px) { .mo-markup { grid-template-columns: repeat(4, 1fr); } }

/* شخصیت درخواست‌دهندهٔ برداشت */
.wr-row { cursor: pointer; }
.wr-row:hover { border-color: var(--green); }
.wr-persona { padding: 2px 8px; border-radius: 999px; font-weight: 700;
  font-size: .68rem; background: var(--bg); }
.wr-p-vendor { background: var(--green-100); color: var(--green-text-soft); }
.wr-p-visitor { background: #FEF3C7; color: #92400E; }
.wr-p-staff { background: #EDE9FE; color: #5B21B6; }

/* ==========================================================================
   تحویل دستی سفارش‌ها
   ========================================================================== */
.md-warn { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: #FEF3C7; border: 1px solid #F59E0B; margin-bottom: 16px; }
.md-warn-ic { font-size: 1.3rem; flex: none; }
.md-warn b { display: block; font-size: .88rem; color: #92400E; }
.md-warn p { font-size: .78rem; color: #92400E; line-height: 1.9; margin-top: 3px; }
[data-theme="dark"] .md-warn { background: #3A2E0A; border-color: #A16207; }
[data-theme="dark"] .md-warn b, [data-theme="dark"] .md-warn p { color: #FDE68A; }

.md-card { border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); overflow: hidden; }
.md-card.md-wait { border-color: #F59E0B; }
.md-sum { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.md-sum::-webkit-details-marker { display: none; }
.md-sum-main b { display: block; font-size: .9rem; }
.md-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 5px;
  font-size: .72rem; color: var(--slate); }
.md-sum-side { text-align: end; white-space: nowrap; }
.md-sum-side b { display: block; font-size: .92rem; font-weight: 800; }
.md-body { padding: 0 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.md-reason { padding: 10px 13px; border-radius: 10px; background: var(--bg);
  font-size: .8rem; color: var(--slate); }
.md-form { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.md-confirm { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1.5px solid #F59E0B; border-radius: 12px; background: #FFFBEB;
  cursor: pointer; }
[data-theme="dark"] .md-confirm { background: #3A2E0A; }
.md-confirm input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.md-confirm span { font-size: .8rem; line-height: 1.9; color: #92400E; font-weight: 600; }
[data-theme="dark"] .md-confirm span { color: #FDE68A; }
.md-done { padding: 12px 15px; border-radius: 11px; background: var(--green-100);
  color: var(--green-text-soft); font-size: .82rem; font-weight: 700; }
.md-done small { display: block; font-weight: 400; color: var(--slate);
  margin-top: 4px; font-size: .74rem; }

/* ==========================================================================
   سامانهٔ گارانتی
   ========================================================================== */
/* نوار ابزار سربرگ گارانتی — دکمه‌ها هم‌اندازه و در موبایل تمام‌عرض */
.wr-head-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wr-head-acts .btn {
  /* ارتفاع یکسان صرف‌نظر از اینکه لینک است یا دکمه */
  min-height: 34px; padding: 7px 14px; font-size: .78rem;
  justify-content: center;
}
@media (max-width: 620px) {
  /* در موبایل عنوان بالا و دکمه‌ها زیرش، تمام‌عرض */
  .pf-sec-head:has(.wr-head-acts) { flex-direction: column;
    align-items: stretch; gap: 10px; }
  .wr-head-acts { width: 100%; }
  .wr-head-acts .btn { flex: 1 1 auto; }
}

/* --- فهرست قالب‌ها --- */
.wt-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .wt-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .wt-grid { grid-template-columns: repeat(3, 1fr); } }
.wt-card { border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); overflow: hidden; display: flex;
  flex-direction: column; }
.wt-thumb { display: block; aspect-ratio: 3/4; background: var(--bg);
  overflow: hidden; }
.wt-thumb img { width: 100%; height: 100%; object-fit: contain; }
.wt-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
  flex: 1; }
.wt-body b { font-size: .88rem; }
.wt-body small { font-size: .72rem; color: var(--slate); }
.wt-warn { color: #b45309 !important; font-weight: 600; }
.wt-acts { display: flex; gap: 7px; padding: 0 14px 13px; flex-wrap: wrap;
  align-items: center; }
.wt-acts .btn { min-height: 32px; padding: 6px 13px; font-size: .76rem; }
.wt-acts form { display: contents; }

/* --- طراح کادر --- */
.wt-designer { border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); padding: 12px; margin: 10px 0; }
.wt-stage { position: relative; max-width: 420px; margin: 0 auto;
  user-select: none; cursor: crosshair; }
.wt-stage img { display: block; width: 100%; border-radius: 8px; }
.wt-empty { padding: 60px 20px; text-align: center; color: var(--slate);
  font-size: .84rem; border: 2px dashed var(--line); border-radius: 10px; }
.wt-box { position: absolute; border: 2px solid #16a34a;
  background: rgba(22,163,74,.16); cursor: move; box-sizing: border-box; }
.wt-box-label { position: absolute; top: -20px; inset-inline-start: 0;
  font-size: .64rem; font-weight: 700; background: #16a34a; color: #fff;
  padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.wt-handle { position: absolute; inset-inline-end: -6px; bottom: -6px;
  width: 13px; height: 13px; background: #16a34a; border: 2px solid #fff;
  border-radius: 50%; cursor: se-resize; }
.wt-info { text-align: center; margin-top: 10px; font-size: .78rem;
  color: var(--slate); }
.wt-info b { color: var(--ink); }

/* --- استعلام عمومی --- */
.wl-wrap { max-width: 620px; margin: 0 auto; }
.wl-form { display: flex; gap: 9px; flex-wrap: wrap; margin: 18px 0; }
.wl-input { flex: 1 1 220px; padding: 13px 16px; border: 1.5px solid var(--line);
  border-radius: 12px; font: inherit; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .08em; text-align: center; text-transform: uppercase;
  background: var(--surface); color: var(--ink); }
.wl-input:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100); }
.wl-result { border-radius: 16px; padding: 20px; margin-top: 18px; }
.wl-ok { background: var(--green-100); border: 1.5px solid var(--green); }
.wl-bad { background: #FEE2E2; border: 1.5px solid #FCA5A5; }
[data-theme="dark"] .wl-bad { background: #3F1D1D; border-color: #7F1D1D; }
.wl-badge { display: inline-flex; align-items: center; gap: 6px;
  font-size: 1.05rem; font-weight: 800; margin-bottom: 12px; }
.wl-ok .wl-badge { color: var(--green-text-soft); }
.wl-bad .wl-badge { color: #B91C1C; }
[data-theme="dark"] .wl-bad .wl-badge { color: #FCA5A5; }
.wl-kv { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 12px; }
.wl-kv > div { display: flex; gap: 10px; padding: 9px 12px; border-radius: 9px;
  background: var(--surface); font-size: .84rem; }
.wl-kv span { color: var(--slate); min-width: 100px; }
.wl-kv b { font-weight: 700; }
@media (min-width: 560px) { .wl-kv { grid-template-columns: 1fr 1fr; } }
.wl-activate { margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line); }
.wl-note { font-size: .76rem; color: var(--slate); line-height: 1.9;
  margin-top: 10px; }

/* --- جزئیات دسته --- */
.wb-grid { display: grid; grid-template-columns: 1fr; gap: 8px;
  font-size: .82rem; }
@media (min-width: 700px) { .wb-grid { grid-template-columns: repeat(3, 1fr); } }
.wb-grid > div { display: flex; gap: 8px; padding: 9px 12px;
  border-radius: 9px; background: var(--bg); }
.wb-grid span { color: var(--slate); }
.wc-row { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); font-size: .8rem;
  flex-wrap: wrap; }
.wc-code { font-family: monospace; font-weight: 700; letter-spacing: .04em; }
.wc-void { opacity: .55; text-decoration: line-through; }

/* پیش‌نمایش چیدمان برچسب */
.wb-preview { display: grid; grid-template-columns: 1fr; gap: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); margin-bottom: 14px; }
@media (min-width: 800px) { .wb-preview { grid-template-columns: 240px 1fr; } }
.wb-preview-img { display: flex; justify-content: center; }
.wb-preview-img img { max-width: 100%; max-height: 320px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.wb-preview-side { display: flex; flex-direction: column; gap: 10px; }
.wb-stat { display: flex; flex-direction: column; gap: 5px; }
.wb-stat-row { display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 9px; background: var(--surface);
  font-size: .8rem; }
.wb-stat-row span { color: var(--slate); }
.wb-eff-ok b { color: var(--green-text-soft); }
.wb-eff-mid b { color: #b45309; }
.wb-eff-low b { color: var(--danger-text); }
.wb-tips { display: flex; flex-direction: column; gap: 6px; }
.wb-tip { padding: 9px 12px; border-radius: 9px; font-size: .78rem;
  line-height: 1.8; background: var(--surface); border: 1px solid var(--line); }
.wb-tip-rotate, .wb-tip-margin, .wb-tip-gap {
  background: #FFFBEB; border-color: #F59E0B; color: #92400E; }
[data-theme="dark"] .wb-tip-rotate, [data-theme="dark"] .wb-tip-margin,
[data-theme="dark"] .wb-tip-gap { background: #3A2E0A; color: #FDE68A; }
.wb-tip-warn { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
[data-theme="dark"] .wb-tip-warn { background: #3F1D1D; color: #FCA5A5; }
.wb-tip-ok { background: var(--green-100); border-color: var(--green);
  color: var(--green-text-soft); }

/* پیش‌نمایش قالب با کد نمونه */
.wt-preview { display: grid; grid-template-columns: 1fr; gap: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); }
@media (min-width: 700px) { .wt-preview { grid-template-columns: 200px 1fr; } }
.wt-preview img { width: 100%; max-height: 300px; object-fit: contain;
  border-radius: 8px; background: #fff; }
.wt-preview-note { display: flex; flex-direction: column; gap: 9px; }
.wt-preview-note p { font-size: .8rem; color: var(--slate); line-height: 1.9; }

/* ==========================================================================
   مرکز امنیت — کاربران مسدود و رویدادها
   ========================================================================== */
.sc-card { border: 1px solid #FCA5A5; border-radius: 14px;
  background: var(--surface); overflow: hidden; }
.sc-sum { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none;
  flex-wrap: wrap; }
.sc-sum::-webkit-details-marker { display: none; }
.sc-main b { display: block; font-size: .9rem; }
.sc-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 5px;
  font-size: .72rem; color: var(--slate); }
.sc-reason { margin-top: 7px; padding: 8px 11px; border-radius: 9px;
  background: #FEE2E2; color: #B91C1C; font-size: .78rem; }
.sc-reason small { display: block; color: inherit; opacity: .8;
  font-size: .7rem; margin-top: 2px; }
[data-theme="dark"] .sc-reason { background: #3F1D1D; color: #FCA5A5; }
.sc-body { padding: 0 16px 16px; border-top: 1px solid var(--line);
  padding-top: 14px; }
.sc-rows { display: flex; flex-direction: column; gap: 6px; }
.sc-item { display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 9px; background: var(--bg);
  font-size: .78rem; flex-wrap: wrap; }
.sc-item small { color: var(--slate); font-size: .7rem; }
.sc-item-block { border-inline-start: 3px solid #DC2626; }
.sc-form { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.sc-form input { flex: 1 1 200px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; font: inherit;
  font-size: .82rem; background: var(--surface); color: var(--ink); }
.sc-row { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 15px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); flex-wrap: wrap; }
.sc-new { border-inline-start: 3px solid #F59E0B; }
.sc-where { display: block; margin-top: 5px; font-size: .7rem;
  color: var(--slate); }
.sc-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-badge { padding: 1px 8px; border-radius: 999px; background: #FEE2E2;
  color: #B91C1C; font-weight: 700; font-size: .66rem; }
[data-theme="dark"] .sc-badge { background: #3F1D1D; color: #FCA5A5; }

/* گارانتی‌های فعال */
.wa-card { border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); overflow: hidden; }
.wa-card.wa-warn { border-color: #F59E0B; }
.wa-card.wa-done { opacity: .8; }
.wa-sum { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none;
  flex-wrap: wrap; }
.wa-sum::-webkit-details-marker { display: none; }
.wa-main b { display: block; font-size: .86rem; }
.wa-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 5px;
  font-size: .72rem; color: var(--slate); }
.wa-claim { color: #b45309; font-weight: 700; }
.wa-side { text-align: end; white-space: nowrap; }
.wa-left { font-size: .84rem; font-weight: 800;
  color: var(--green-text-soft); }
.wa-ended { font-size: .82rem; font-weight: 700; color: var(--danger-text); }
.wa-side small { display: block; font-size: .66rem; color: var(--slate); }
.wa-body { padding: 0 16px 16px; border-top: 1px solid var(--line);
  padding-top: 14px; }

/* نتیجهٔ استعلام — مدت باقی‌مانده */
.wl-remain { margin: 14px 0; padding: 14px 16px; border-radius: 12px;
  background: var(--surface); text-align: center; }
.wl-remain b { display: block; font-size: 1.25rem; font-weight: 900;
  color: var(--green-text-soft); }
.wl-remain small { font-size: .74rem; color: var(--slate); }
.wl-remain.wl-over b { color: var(--danger-text); }

/* ناحیهٔ خطر — حذف دسته */
.wd-zone { margin-top: 20px; border: 1.5px solid #FCA5A5; border-radius: 14px;
  background: var(--surface); overflow: hidden; }
.wd-zone > summary { padding: 13px 16px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: .84rem; color: #B91C1C; }
.wd-zone > summary::-webkit-details-marker { display: none; }
[data-theme="dark"] .wd-zone > summary { color: #FCA5A5; }
.wd-body { padding: 0 16px 16px; border-top: 1px solid #FCA5A5;
  padding-top: 14px; }
.wd-body p { font-size: .8rem; line-height: 1.9; color: var(--slate);
  margin-bottom: 12px; }
.wd-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.wd-form input { padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: .84rem;
  background: var(--surface); color: var(--ink); }
.wd-del { align-self: flex-start; border-color: #FCA5A5 !important;
  color: #B91C1C !important; }
[data-theme="dark"] .wd-del { color: #FCA5A5 !important; }

/* ورود کدهای موجود */
.wi-intro { border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); padding: 14px 18px; margin-bottom: 16px; }
.wi-intro p { font-size: .84rem; line-height: 2; margin-bottom: 8px; }
.wi-intro ul { padding-inline-start: 20px; }
.wi-intro li { font-size: .78rem; line-height: 2; color: var(--slate); }
.wi-cols { display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
  margin: 12px 0; font-size: .8rem; color: var(--slate); }
.wi-sample { max-height: 320px; overflow-y: auto; }
.wi-new { border-inline-start: 3px solid var(--green); padding-inline-start: 13px;
  margin: 12px 0; }

/* فرم ثبت مالک گارانتی */
.wl-owner { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.wl-owner .field { display: flex; flex-direction: column; gap: 5px; }
.wl-owner .field span { font-size: .78rem; font-weight: 600; color: var(--slate); }
.wl-owner input, .wl-owner select, .wl-owner textarea {
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .86rem; background: var(--surface);
  color: var(--ink); box-sizing: border-box; width: 100%; }
.wl-owner input:focus, .wl-owner select:focus, .wl-owner textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100); }
.wl-verified { display: flex; gap: 9px; align-items: center; padding: 10px 13px;
  border-radius: 10px; background: var(--green-100); font-size: .84rem; }
.wl-verified a { margin-inline-start: auto; font-size: .76rem; }
.wl-toggle { display: flex; gap: 9px; flex-wrap: wrap; }
.wl-toggle label { flex: 1 1 130px; display: flex; gap: 8px; align-items: center;
  padding: 10px 13px; border: 1.5px solid var(--line); border-radius: 11px;
  cursor: pointer; font-size: .84rem; }
.wl-toggle label:has(input:checked) { border-color: var(--green);
  background: var(--green-100); }
.wl-legal { border-inline-start: 3px solid var(--green);
  padding-inline-start: 12px; }

/* بخش هویت در پروفایل */
.pf-legal { border-inline-start: 3px solid var(--green);
  padding-inline-start: 13px; margin: 10px 0; }
.pf-ok { color: var(--green-text-soft); font-size: .72rem; font-weight: 700; }
.pf-verify { padding: 12px 15px; border-radius: 11px; background: #FFFBEB;
  border: 1px solid #F59E0B; margin: 12px 0; }
.pf-verify p { font-size: .82rem; color: #92400E; margin-bottom: 9px; }
[data-theme="dark"] .pf-verify { background: #3A2E0A; }
[data-theme="dark"] .pf-verify p { color: #FDE68A; }
.wl-owner-info { margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line); }
.wl-owner-info h3 { font-size: .92rem; margin-bottom: 10px; }

/* ---------- کف قیمت سفارش دستی ---------- */
.mo-price-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mo-floor { font-size: .72rem; color: var(--slate); line-height: 1.7; }
.mo-floor.is-error { color: var(--danger-text); font-weight: 700; }
.mo-price.is-below-floor { border-color: var(--danger); }

/* ==========================================================================
   گزارش‌های پنل
   ========================================================================== */
.rep-range { display: flex; gap: 6px; flex-wrap: wrap; }

.rep-chip {
  padding: 6px 14px; border-radius: 999px; font-size: .8rem;
  font-weight: 600; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: all .2s ease;
}
.rep-chip:hover { border-color: var(--green); }
.rep-chip.on { background: var(--green-btn); border-color: var(--green-btn);
               color: var(--on-green); }

/* ---------- کارت‌های کلیدی ---------- */
.rep-cards {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.rep-card {
  position: relative; padding: 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rep-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

.rep-card::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: var(--grad-brand);
}

.rep-ic { font-size: 1.4rem; }
.rep-card b { font-size: 1.4rem; font-weight: 900; line-height: 1.3;
              color: var(--ink); }
.rep-card > span:last-of-type { font-size: .78rem; color: var(--slate); }
.rep-card small { font-size: .74rem; color: var(--slate); }

.rep-growth { font-weight: 700; }
.rep-growth.up { color: var(--success-text); }
.rep-growth.down { color: var(--danger-text); }

/* ---------- پنل‌ها ---------- */
.rep-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; margin-bottom: 20px;
}

.rep-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.rep-panel-head h3 { font-size: .95rem; font-weight: 800; margin: 0; }
.rep-panel-head small { font-size: .76rem; color: var(--slate); }

/* ---------- نمودار ---------- */
.rep-chart { padding: 16px; }
.rc-svg { width: 100%; height: 220px; overflow: visible; }
.rc-line { fill: none; stroke: var(--green); stroke-width: 2.5;
           stroke-linejoin: round; stroke-linecap: round;
           vector-effect: non-scaling-stroke; }
.rc-area { fill: var(--green); opacity: .1; }
.rc-dot { fill: var(--surface); stroke: var(--green); stroke-width: 2;
          vector-effect: non-scaling-stroke; }
.rc-grid { stroke: var(--line); stroke-width: 1;
           vector-effect: non-scaling-stroke; }
/*
  مورد ۱۴ — خوانایی متن نمودار.

  ⚠️ ارقام باید هم‌عرض باشند وگرنه ستون اعداد محور عمودی
  لرزان به‌نظر می‌رسد.
*/
.rc-xlabel, .rc-ylabel {
  font-size: 11px; fill: var(--slate);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

/* ⚠️ در موبایل ۱۱ پیکسل خوانا نیست */
@media (max-width: 640px) {
  .rc-xlabel, .rc-ylabel { font-size: 12px; }
  .rc-svg { height: 190px; }
}
.rc-ylabel { text-anchor: start; }
.rep-chart-empty { padding: 40px; text-align: center; color: var(--slate);
                   font-size: .85rem; }

/* ---------- جدول ---------- */
.rep-table-wrap { overflow-x: auto; }
.rep-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.rep-table th {
  text-align: start; padding: 11px 16px; font-weight: 700;
  background: var(--bg-subtle); color: var(--ink-soft);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rep-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); }
.rep-table tbody tr:last-child td { border-bottom: 0; }
.rep-table tbody tr:hover { background: var(--bg-subtle); }
.rep-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-empty { text-align: center; color: var(--slate); padding: 30px; }

/* ---------- وضعیت موجودی ---------- */
.rep-stock-sum { display: flex; gap: 8px; flex-wrap: wrap; }

.stk {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  background: var(--bg-subtle); color: var(--ink-soft);
}
.stk-ok { background: var(--success-bg); color: var(--success-text); }
.stk-low { background: var(--warn-bg); color: var(--warn-text); }
.stk-out { background: var(--danger-bg); color: var(--danger-text); }
.stk-unlimited { background: var(--info-bg); color: var(--info-text); }

.rep-alert {
  margin: 12px 18px; padding: 12px 16px; border-radius: 12px;
  background: var(--warn-bg); color: var(--warn-text);
  font-size: .82rem; line-height: 1.9;
}
.rep-actions { display: flex; gap: 8px; }

/* ==========================================================================
   جزئیات سفارش تأمین‌کننده
   ========================================================================== */
.vo-detail {
  display: inline-block; margin-top: 4px; font-size: .78rem;
  font-weight: 700; color: var(--green-text);
}

.od-timeline {
  display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap;
}

.od-step {
  flex: 1; min-width: 90px; padding: 12px 8px; text-align: center;
  border-radius: 12px; background: var(--bg-subtle);
  border: 1px solid var(--line); opacity: .55;
  transition: all .2s ease;
}
.od-step.done { opacity: 1; background: var(--green-100);
                border-color: var(--green-100); }
.od-step.now { border-color: var(--green); box-shadow: var(--sh-sm); }
.od-step-ic { display: block; font-size: 1.3rem; margin-bottom: 4px; }
.od-step-label { font-size: .76rem; font-weight: 700; }

.od-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.od-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px;
}
.od-panel h3 { font-size: .92rem; font-weight: 800; margin-bottom: 12px; }

.od-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px;
           font-size: .84rem; margin: 0; }
.od-list dt { font-weight: 700; color: var(--slate); }
.od-list dd { margin: 0; }

.od-note, .od-info, .od-warn, .od-ok {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  font-size: .8rem; line-height: 1.9;
}
.od-note { background: var(--bg-subtle); color: var(--slate); }
.od-info { background: var(--info-bg); color: var(--info-text); }
.od-warn { background: var(--warn-bg); color: var(--warn-text); }
.od-ok { background: var(--success-bg); color: var(--success-text); }
.vo-est { display: block; font-size: .72rem; color: var(--slate);
          font-weight: 400; margin-top: 2px; }

/* ---------- تب‌ها و اکشن گروهی مالی ---------- */
.fin-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.fin-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; font-size: .84rem;
  font-weight: 600; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: all .2s ease;
}
.fin-tab:hover { border-color: var(--green); }
.fin-tab.on { background: var(--green-btn); border-color: var(--green-btn);
              color: var(--on-green); }

.fin-tab-n {
  padding: 1px 8px; border-radius: 999px; font-size: .74rem;
  background: var(--bg-subtle); color: var(--slate);
}
.fin-tab.on .fin-tab-n { background: rgba(255,255,255,.22); color: #fff; }

.og-bulk {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 0 14px; margin-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.og-bulk form { margin: 0; }

/* ==========================================================================
   تارگت‌های فروش ویزیتور
   ========================================================================== */
.tg-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; margin-bottom: 16px;
}

.tg-head { display: flex; align-items: center; gap: 10px;
           flex-wrap: wrap; margin-bottom: 14px; }
.tg-head h3 { font-size: 1rem; font-weight: 800; margin: 0; }
.tg-scope, .tg-window {
  font-size: .74rem; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-subtle); color: var(--slate);
}

.tg-stats { display: flex; gap: 24px; margin-bottom: 14px; flex-wrap: wrap; }
.tg-stats div { display: flex; flex-direction: column; }
.tg-stats b { font-size: 1.2rem; font-weight: 900; }
.tg-stats span { font-size: .74rem; color: var(--slate); }

.tg-min, .tg-final, .tg-pending {
  padding: 12px 16px; border-radius: 12px; margin-bottom: 12px;
  font-size: .84rem; line-height: 1.9;
}
.tg-min { background: var(--warn-bg); color: var(--warn-text); }
.tg-min.ok { background: var(--success-bg); color: var(--success-text); }
.tg-final { background: var(--info-bg); color: var(--info-text); }
.tg-final.ok { background: var(--success-bg); color: var(--success-text); }
.tg-pending { background: var(--green-100); color: var(--green-text);
              font-weight: 700; }
.tg-note { margin: 6px 0 0; font-size: .76rem; opacity: .85; }

.tg-bar {
  height: 8px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin: 8px 0 4px;
}
.tg-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--grad-brand); transition: width .4s ease;
}

.tg-sub { font-size: .88rem; font-weight: 800; margin: 16px 0 10px; }

.tg-tiers { display: grid; gap: 10px;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.tg-tier {
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-subtle); border: 1px solid var(--line);
}
.tg-tier.done { background: var(--success-bg); border-color: transparent; }
.tg-tier-head { display: flex; justify-content: space-between;
                gap: 8px; flex-wrap: wrap; font-size: .82rem; }
.tg-reward { font-size: .74rem; color: var(--slate); }
.tg-tier small { font-size: .72rem; color: var(--slate); }

.tg-empty { padding: 40px; text-align: center; color: var(--slate);
            background: var(--surface); border: 1px solid var(--line);
            border-radius: 16px; }

/* ---------- بخش‌بندی صفحهٔ تخصیص ---------- */
.asg-sec {
  border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 12px; background: var(--surface); overflow: hidden;
}

.asg-sec > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; cursor: pointer; list-style: none;
  background: var(--bg-subtle);
  transition: background .2s ease;
}
.asg-sec > summary::-webkit-details-marker { display: none; }
.asg-sec > summary::after {
  content: "▾"; margin-inline-start: auto; color: var(--slate);
  transition: transform .2s ease;
}
.asg-sec[open] > summary::after { transform: rotate(180deg); }
.asg-sec > summary:hover { background: var(--green-100); }
.asg-sec > summary h3 { margin: 0; font-size: .92rem; }
.asg-sec > summary small { font-size: .74rem; color: var(--slate); }

.asg-body { padding: 16px 18px; display: flex; flex-direction: column;
            gap: 12px; }

/* ⚠️ `color` دو بار نوشته شده بود؛ اولی مرده بود. */
.asg-hint {
  font-size: .78rem; line-height: 1.9;
  padding: 10px 14px; border-radius: 10px; background: var(--info-bg);
  color: var(--info-text); margin: 0;
}

.vr-grid { display: grid; gap: 16px;
           grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ==========================================================================
   نوار بخش‌های مدیریت ویزیتورها
   ========================================================================== */
.vadm-nav {
  display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.vadm-nav::-webkit-scrollbar { display: none; }

.vadm-nav a {
  flex: none; scroll-snap-align: start; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; font-size: .82rem;
  font-weight: 600; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: all .2s ease;
}
.vadm-nav a:hover { border-color: var(--green); }
.vadm-nav a.on { background: var(--green-btn); border-color: var(--green-btn);
                 color: var(--on-green); }

/* ---------- کارت‌های تفکیکی ---------- */
.vk-grid { display: grid; gap: 14px; margin-bottom: 20px;
           grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.vk-card {
  padding: 18px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line);
}
.vk-card h4 { display: flex; align-items: center; gap: 8px;
              font-size: .92rem; font-weight: 800; margin: 0 0 12px; }
.vk-rows { display: grid; grid-template-columns: auto 1fr;
           gap: 6px 14px; font-size: .84rem; }
.vk-rows dt { color: var(--slate); }
.vk-rows dd { margin: 0; font-weight: 700; text-align: end;
              font-variant-numeric: tabular-nums; }

/* ---------- ابزار سطر ---------- */
.vrow-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.vrow-tools .btn { padding: 4px 10px; font-size: .72rem; }

/* ---------- فرم گزارش‌ساز ---------- */
.rb-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; margin-bottom: 18px;
}
.rb-row { display: grid; gap: 12px; margin-bottom: 12px;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* ---------- انتخاب سنجه‌ها ----------
   باگ: چک‌باکس‌ها کشیده می‌شدند (۵۷×۱۳) و متن دوخطی می‌شکست، چون
   `flex: 1` از قاعدهٔ عمومی فرم به ارث می‌رسید. */
.rb-metrics {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

.rb-metric {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  height: 40px;
  border-radius: var(--r-full);
  cursor: pointer;
  background: var(--bg-subtle);
  border: 1.5px solid var(--line);
  font-size: var(--fs-sm);
  /* متن نباید بشکند */
  white-space: nowrap;
  flex: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.rb-metric:hover { border-color: var(--green); }

/* چک‌باکس ابعاد ثابت — بدون این، از قاعدهٔ فرم کش می‌آید */
.rb-metric input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--green-btn);
  cursor: pointer;
}

.rb-metric span { line-height: 1; }

.rb-metric:has(input:checked) {
  background: var(--green-100);
  border-color: var(--green);
  font-weight: 700;
}

/* برچسب بالای گروه سنجه‌ها */
.rb-form > .field > span {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: var(--sp-1);
}

/* فاصلهٔ دکمه‌های ساخت گزارش از چک‌باکس‌ها.

   بدون این، دکمه‌ها به سنجه‌ها می‌چسبند و معلوم نیست کدام بخش
   کجا تمام می‌شود. */
.rb-form .fin-form-actions {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* گروه سنجه‌ها هم از ردیف بالا فاصله بگیرد */
.rb-form > .field {
  margin-top: var(--sp-2);
}

@media (max-width: 640px) {
  .rb-metric { height: 38px; padding-inline: var(--sp-3); }
  .rb-form .fin-form-actions { margin-top: var(--sp-4); }
}

@media print {
  .vadm-nav, .rb-form, .pf-side, .profile-side, .rep-actions,
  .site-header, .footer, .mobile-nav { display: none !important; }
  .rep-panel { border: 0; box-shadow: none; }
}

/* ---------- دکمه‌های کوچک بخش مدیریت ---------- */
.vadm-nav ~ * .btn-xs,
.vrow-tools .btn,
.rep-actions .btn-xs,
.pf-sec-head .btn-xs {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* دکمه‌های ابزار سطر مربعی و لمس‌پذیر */
.vrow-tools .btn {
  min-width: 34px;
  min-height: 34px;
  padding: 4px 8px;
}

/* ---------- زیربخش منوی مدیریت ---------- */
.profile-nav a.pnav-sub {
  padding-inline-start: var(--sp-6);
  font-size: .84rem;
}
.profile-nav a.pnav-sub::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--sp-4);
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: var(--line-strong);
}
.profile-nav a.pnav-sub.on::after { background: var(--green); }

/* ---------- بخش کالاهای صفحهٔ اصلی ---------- */
.hsec-products { margin-top: 18px; }

.hsec-prod { position: relative; }

.hsec-badge {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  z-index: 2; padding: 4px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 800;
  background: var(--grad-brand); color: var(--on-green);
  box-shadow: var(--sh-sm);
}

.hsec-cta { margin-top: 22px; text-align: center; }

/* ==========================================================================
   مدیریت محتوا در پنل
   ========================================================================== */
.ct-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ct-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease,
              border-color .2s ease;
}
.ct-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--green);
}

/*
  ⚠️ عنوان کارت عمداً کوچک است.

  این کارت‌ها یک شبکهٔ فشرده‌اند و کاربر آن‌ها را **اسکن**
  می‌کند نه می‌خواند؛ عنوان بزرگ یعنی دو سطر شدن روی نام‌های
  بلند («اسلایدهای صفحهٔ اصلی») و به‌هم‌ریختن ارتفاع ردیف.
*/
.ct-ic { font-size: 1.35rem; line-height: 1; }
.ct-card b {
  font-size: .92rem; font-weight: 700; line-height: 1.6;
  color: var(--ink);
}
.ct-count {
  align-self: flex-start;
  padding: 2px 10px; border-radius: 999px;
  background: var(--surface-sunken);
  font-size: .74rem; font-weight: 600; color: var(--slate);
}
.ct-count small { opacity: .75; font-weight: 400; }
.ct-pending {
  align-self: flex-start;
  padding: 2px 10px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-text);
  font-size: .72rem; font-weight: 600;
}

/* آیکن بالا-چپ، عنوان زیرش — نه وسط‌چین درهم */
.ct-card {
  align-items: flex-start;
  text-align: start;
}

/* ---------- فرم محتوا ---------- */
.ct-form { display: flex; flex-direction: column; gap: 14px; }

.ct-form .field.has-error input,
.ct-form .field.has-error select,
.ct-form .field.has-error textarea { border-color: var(--danger); }

.ct-form .err { color: var(--danger-text); font-size: .76rem; }

/* جعبهٔ چندانتخابی (کالاها) جا داشته باشد */
.ct-form select[multiple] { min-height: 180px; }

/* ویرایشگر متن بلند */
.ct-form textarea { min-height: 120px; resize: vertical; }

/* ==========================================================================
   صفحهٔ اعلان‌ها
   --------------------------------------------------------------------------
   پیش‌تر از `tx-row` استفاده می‌کرد که برای جدول تراکنش‌هاست: سه ستون
   هم‌عرض که متن بلند را می‌شکست و تاریخ را از عنوان جدا می‌انداخت.
   ========================================================================== */
.nt-unread-pill {
  padding: 4px 12px; border-radius: 999px; font-size: .76rem;
  font-weight: 700; background: var(--green-100);
  color: var(--green-text);
}

/* ---------- جستجو ---------- */
.nt-search { position: relative; margin-bottom: 16px; }

.nt-search input {
  width: 100%; height: 46px; padding-inline: 16px 42px;
  border-radius: var(--r-full); border: 1px solid var(--line);
  background: var(--surface); font-size: .88rem;
}
.nt-search input:focus { border-color: var(--green); outline: none; }

.nt-clear {
  position: absolute; inset-inline-end: 14px; inset-block-start: 50%;
  transform: translateY(-50%); color: var(--slate);
  font-size: .9rem; line-height: 1;
}

/* ---------- فهرست ---------- */
.nt-list { display: flex; flex-direction: column; gap: 10px; }

.nt-item {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; padding: 16px 18px; text-align: start;
  border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .16s ease, box-shadow .16s ease,
              border-color .16s ease;
}
.nt-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
  border-color: var(--green);
}

/* خوانده‌نشده: نوار کناری سبز تا در فهرست بلند فوری پیدا شود */
.nt-item.unread {
  background: var(--green-50, #f2fbf6);
  border-inline-start: 3px solid var(--green);
}

.nt-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--bg-subtle);
}
.nt-item.unread .nt-icon { background: var(--surface); }

/* ---------- متن ---------- */
.nt-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
}

.nt-top {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}

.nt-title {
  font-size: .92rem; font-weight: 700; line-height: 1.6;
}

.nt-kind {
  font-size: .7rem; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-subtle); color: var(--slate);
  white-space: nowrap;
}

.nt-text {
  font-size: .82rem; color: var(--ink-soft); line-height: 1.9;
  /* متن بلند دو خط بماند، نه اینکه کارت را دراز کند */
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

.nt-date { font-size: .74rem; color: var(--slate); }

/* نقطهٔ خوانده‌نشده */
.nt-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); margin-top: 6px;
}

/* ---------- موبایل ---------- */
@media (max-width: 640px) {
  .nt-item { padding: 14px; gap: 11px; }
  .nt-icon { width: 36px; height: 36px; font-size: 1rem; }
  .nt-title { font-size: .86rem; }
  .nt-kind { font-size: .66rem; }
}

/* ارسال جدا از مبلغ کالا در کارت مالی */
.og-ship {
  display: block; margin-top: 2px; font-size: .72rem;
  color: var(--slate); font-weight: 600;
}

/* صندوق حمل‌ونقل در جمع‌بندی مالی */
.fin-summary .fin-ship {
  background: var(--info-bg);
  border-radius: 10px;
  padding: 10px 14px;
}
.fin-summary .fin-ship > span { color: var(--info-text); }
.fin-summary .fin-ship > b { color: var(--info-text); }
.fin-summary .fin-ship > small {
  display: block; margin-top: 2px; font-size: .7rem;
  color: var(--slate); font-weight: 600;
}

/* صندوق ارسال — رنگ متمایز تا با صندوق‌های اصلی اشتباه نشود */
.quota-card.qc-ship {
  background: var(--info-bg);
  border-color: color-mix(in srgb, var(--info-text) 22%, transparent);
}
.quota-card.qc-ship .quota-head > span,
.quota-card.qc-ship .quota-head > b { color: var(--info-text); }

/* ---------- دفتر کل ---------- */
.lg-tabs { margin-bottom: 18px; }
.lg-tabs .fin-tab { cursor: pointer; border: 1px solid var(--line); }

.lg-link {
  color: var(--green-text); font-weight: 600;
  border-bottom: 1px dashed currentColor;
}
/*
  ⚠️ `--green-hover` هیچ‌جا تعریف نشده بود، پس این اعلان
  نامعتبر می‌شد و لینک اصلاً رنگ hover نمی‌گرفت.

  `--green-700` در هر دو تم نسبت به `--green-text` (رنگ
  عادی لینک) تیره‌تر/پررنگ‌تر است، یعنی همان چیزی که از
  hover انتظار می‌رود.
*/
.lg-link:hover { color: var(--green-700); }

.lg-kind {
  padding: 1px 8px; border-radius: 999px; font-size: .7rem;
  background: var(--bg-subtle); color: var(--slate);
}

@media print {
  .lg-tabs, .rb-form, .fin-form { display: none !important; }
  [data-lg-pane] { display: block !important; }
  [data-lg-pane][hidden] { display: none !important; }
}

/* ==========================================================================
   چاپ سراسری
   --------------------------------------------------------------------------
   هر صفحه‌ای که چاپ شود باید فقط محتوای اصلی را بدهد: بدون سربرگ
   سبز، منوی کناری، نوار بالا، فوتر و دکمه‌ها.

   این قاعده آخر فایل است تا بر قواعد پراکندهٔ پیشین غالب شود.
   ========================================================================== */
@media print {
  /* ---------- ناوبری و تزئینات ---------- */
  .topbar,
  .site-header,
  header.site-header,
  .header-wrap,
  .pf-hero,
  .pf-logout,
  .profile-side,
  .pside-toggle,
  .profile-nav,
  .vadm-nav,
  .lg-tabs,
  .fin-tabs,
  .mobile-nav,
  .bottom-nav,
  .site-footer,
  footer,
  .footer,
  .drawer,
  .drawers,
  .cart-drawer,
  .wish-drawer,
  .chat-launcher,
  .compare-bar,
  .back-to-top,
  .toast,
  .messages,
  .breadcrumb,
  .skip-link { display: none !important; }

  /* ---------- فرم‌ها و دکمه‌ها ---------- */
  .rb-form,
  .fin-form,
  .nt-search,
  .rep-actions,
  .acc-actions,
  .fin-form-actions,
  .vrow-tools,
  .btn,
  button,
  input[type="submit"],
  select,
  .lg-link[href] { display: none !important; }

  /* لینک سفارش متن بماند، ولی بدون ظاهر لینک */
  td .lg-link { display: inline !important; color: #000 !important;
                border: 0 !important; text-decoration: none !important; }

  /* ---------- چیدمان تمام‌عرض ---------- */
  .profile-layout,
  .page-content,
  .wrap,
  .profile-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
  }

  body { background: #fff !important; }

  /* ---------- کارت‌ها و جدول‌ها ---------- */
  .rep-panel,
  .rep-card,
  .quota-card,
  .od-panel,
  .tg-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  .rep-table-wrap { overflow: visible !important; }
  .rep-table { min-width: 0 !important; font-size: 10pt; }
  .rep-table thead { display: table-header-group; }
  .rep-table tr { break-inside: avoid; }

  /* پنل‌های تب‌دار: فقط پنل باز چاپ شود */
  [data-lg-pane] { display: block !important; }
  [data-lg-pane][hidden] { display: none !important; }

  /* ---------- تنظیم صفحه ---------- */
  @page { margin: 12mm; }

  a[href]::after { content: none !important; }

  /*
    ⚠️ ردیف تخفیف در چاپ سیاه‌وسفید.

    رنگ سبز روی کاغذ خاکستری می‌شود و از هزینه‌ها
    قابل تشخیص نیست؛ ضخامت قلم تفکیک را نگه می‌دارد.
  */
  .inv-off b { font-weight: 900; }
}

/* پذیرش قوانین در فرم‌های ثبت‌نام */
.terms-check {
  margin: 14px 0 4px;
  align-items: flex-start;
  line-height: 1.9;
}
.terms-check input[type="checkbox"] { margin-top: 5px; }
.terms-check span { font-size: .84rem; color: var(--ink-soft); }
.terms-check a {
  color: var(--green-text); font-weight: 700;
  border-bottom: 1px solid currentColor;
}

/* ==========================================================================
   درخواست‌های همکاری در پنل
   ========================================================================== */
.vr-count {
  display: inline-block; margin-inline-start: 5px;
  padding: 1px 7px; border-radius: 999px; font-size: .68rem;
  background: var(--bg-subtle); color: var(--slate); font-style: normal;
}
.fin-tab.on .vr-count { background: var(--surface); color: var(--green-text); }

.vr-list { display: flex; flex-direction: column; gap: 10px; }

.vr-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .16s ease, box-shadow .16s ease,
              border-color .16s ease;
}
.vr-card:hover {
  transform: translateY(-1px); box-shadow: var(--sh-sm);
  border-color: var(--green);
}

.vr-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--bg-subtle);
}

.vr-body { flex: 1; min-width: 0; display: flex;
           flex-direction: column; gap: 5px; }
.vr-name { font-size: .94rem; font-weight: 800; }

.vr-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: .78rem; color: var(--ink-soft);
}
.vr-date { font-size: .73rem; color: var(--slate); }

/* ---------- پرونده ---------- */
.vr-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.vr-kind {
  padding: 3px 12px; border-radius: 999px; font-size: .78rem;
  background: var(--bg-subtle); color: var(--slate);
}

.vr-grid {
  display: grid; gap: 14px; padding: 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.vr-grid > div { display: flex; flex-direction: column; gap: 3px; }
.vr-grid span { font-size: .74rem; color: var(--slate); }
.vr-grid b { font-size: .88rem; font-weight: 700; }
.vr-wide { grid-column: 1 / -1; }
.vr-note { font-weight: 500 !important; line-height: 1.9; }

/* ---------- مدارک ---------- */
.vr-docs {
  display: grid; gap: 12px; padding: 18px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.vr-doc {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: 12px; text-align: center;
  background: var(--bg-subtle); border: 1px solid var(--line);
  transition: border-color .16s ease;
}
.vr-doc:hover { border-color: var(--green); }
.vr-doc img {
  width: 100%; height: 92px; object-fit: cover; border-radius: 8px;
}
.vr-doc-ic { font-size: 2.4rem; line-height: 92px; }
.vr-doc-name { font-size: .74rem; color: var(--ink-soft); }

/* ---------- عملیات ---------- */
.vr-actions {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 18px;
  align-items: center;
}
.vr-reject { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.vr-reject input {
  flex: 1; height: 42px; padding-inline: 14px;
  border-radius: var(--r-full); border: 1px solid var(--line);
  background: var(--surface); font-size: .84rem;
}

@media (max-width: 640px) {
  .vr-card { padding: 14px; gap: 11px; }
  .vr-ic { width: 38px; height: 38px; font-size: 1.05rem; }
  .vr-actions > form { width: 100%; }
  .vr-reject { min-width: 0; }
}

/* کارت تأمین‌کننده در فهرست مدیریتی */
.vnd-card { align-items: center; }
.vnd-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.vh-quick { margin-top: 20px; }

@media (max-width: 640px) {
  .vnd-card { flex-wrap: wrap; }
  .vnd-side { flex-direction: row; width: 100%;
              justify-content: space-between; }
}

/* سطر هزینه در جمع‌بندی سبد و پرداخت */
.sum-row.sum-fee > span { display: flex; flex-direction: column; }
.sum-note { font-size: .7rem; color: var(--slate); }

/* ==========================================================================
   تب‌های اعلان
   --------------------------------------------------------------------------
   روی موبایل افقی می‌لغزد؛ هفت تب در عرض ۳۹۰ پیکسل جا نمی‌شود و
   شکستن به چند خط صفحه را شلوغ می‌کند.
   ========================================================================== */
.nt-tabs {
  display: flex; gap: 8px; margin-bottom: 16px;

  /*
    ⚠️ `overflow-x: auto` عمودی هم می‌برد.

    مرورگر برای اسکرول افقی یک ظرف می‌سازد که هر دو محور را
    کلیپ می‌کند. با `translateY(-1px)` هنگام هاور، لبهٔ بالای
    تب زیر همان برش می‌رفت و ناقص دیده می‌شد.

    راه‌حل: فضای امن بالا و پایین با `padding`، و
    `margin` منفی تا فاصلهٔ بصری عوض نشود.
  */
  overflow-x: auto;
  padding: 6px 2px 8px;
  margin-block-start: -6px;

  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.nt-tabs::-webkit-scrollbar { height: 4px; }
.nt-tabs::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
}

.nt-tab {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-full);
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background .16s ease, color .16s ease,
              border-color .16s ease, transform .16s ease;
}
.nt-tab:hover { border-color: var(--green); transform: translateY(-1px); }

.nt-tab.on {
  background: var(--grad-brand); color: var(--on-green);
  border-color: transparent; font-weight: 800;
  box-shadow: var(--sh-sm);
}

.nt-tab-ic { font-size: .95rem; line-height: 1; }

.nt-tab-n {
  padding: 1px 7px; border-radius: 999px; font-style: normal;
  font-size: .68rem; font-weight: 700;
  background: var(--bg-subtle); color: var(--slate);
}
.nt-tab.on .nt-tab-n {
  background: rgba(255, 255, 255, .25); color: var(--on-green);
}

/* حالت خالی با دکمهٔ راهنما */
.nt-empty { display: flex; flex-direction: column;
            align-items: center; gap: 10px; }

/* ---------- موبایل ---------- */
@media (max-width: 640px) {
  .nt-tabs { gap: 6px; margin-inline: -4px; padding-inline: 4px; }
  .nt-tab { padding: 8px 12px; font-size: .78rem; }
  .nt-tab-label { display: none; }
  .nt-tab.on .nt-tab-label { display: inline; }
  .nt-tab-ic { font-size: 1.05rem; }
}

/* ---------- سربرگ اعلان‌ها ---------- */
.nt-head-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* متن کامل — فقط در حالت باز */
.nt-full { display: none; }

.nt-item.open {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.nt-item.open .nt-text { display: none; }
.nt-item.open .nt-full {
  display: block; font-size: .84rem; line-height: 2;
  color: var(--ink-soft); white-space: pre-line;
}

/* ---------- مودال ---------- */
.nt-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(3px);
  animation: ntFade .18s ease;
}
.nt-modal[hidden] { display: none; }

@keyframes ntFade { from { opacity: 0; } to { opacity: 1; } }

.nt-modal-box {
  width: 100%; max-width: 400px; padding: 28px 24px;
  border-radius: 20px; text-align: center;
  background: var(--surface); box-shadow: var(--sh-lg);
  animation: ntPop .2s ease;
}

@keyframes ntPop {
  from { transform: scale(.94) translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.nt-modal-ic {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  font-size: 1.5rem; margin-bottom: 12px;
  background: var(--green-100); color: var(--green-text);
}

.nt-modal-box h3 { font-size: 1.05rem; margin-bottom: 8px; }
.nt-modal-box p {
  font-size: .85rem; color: var(--ink-soft); line-height: 1.9;
  margin-bottom: 20px;
}

.nt-modal-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.nt-modal-actions .btn { min-width: 120px; }

@media (max-width: 480px) {
  .nt-modal-box { padding: 24px 18px; }
  .nt-modal-actions { flex-direction: column-reverse; }
  .nt-modal-actions .btn, .nt-modal-actions form { width: 100%; }
}

/* ==========================================================================
   مودال متن اعلان
   ========================================================================== */
.nt-item[data-notif] {
  cursor: pointer; text-align: start; width: 100%;
  font-family: inherit;
}

.nt-view-box { position: relative; text-align: start; max-width: 460px; }

.nt-view-close {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-subtle); color: var(--slate);
  border: 0; font-size: .9rem;
  transition: background .16s ease, color .16s ease;
}
.nt-view-close:hover { background: var(--danger-bg); color: var(--danger-text); }

.nt-view-ic {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  font-size: 1.4rem; margin-bottom: 10px;
  background: var(--green-100);
}

.nt-view-kind {
  display: inline-block; margin-inline-start: 8px;
  padding: 3px 11px; border-radius: 999px;
  font-size: .72rem; vertical-align: middle;
  background: var(--bg-subtle); color: var(--slate);
}

.nt-view-box h3 {
  font-size: 1.02rem; font-weight: 800; margin: 6px 0 12px;
  line-height: 1.8;
}

.nt-view-body {
  font-size: .88rem; line-height: 2.1; color: var(--ink);
  white-space: pre-line; margin-bottom: 14px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg-subtle);
}

/* کد تحویل — قرمز و درشت تا در متن گم نشود */
.nt-code {
  display: inline-block; direction: ltr;
  padding: 2px 10px; margin-inline: 3px; border-radius: 8px;
  font-size: 1.15rem; font-weight: 900; letter-spacing: .08em;
  color: var(--danger-text); background: var(--danger-bg);
}

.nt-view-date {
  font-size: .76rem; color: var(--slate); margin-bottom: 18px;
}

.nt-view-box .nt-modal-actions { justify-content: flex-start; }

@media (max-width: 480px) {
  .nt-view-box { padding: 22px 16px; }
  .nt-view-box .nt-modal-actions { flex-direction: column-reverse; }
  .nt-view-box .nt-modal-actions .btn { width: 100%; }
  .nt-code { font-size: 1.05rem; }
}

/* ==========================================================================
   اسلایدشوی حرفه‌ای
   --------------------------------------------------------------------------
   هر اسلاید پس‌زمینهٔ خودش را دارد: تصویر یا یکی از طرح‌های آماده.
   چیدمان دوستونی روی دسکتاپ، تک‌ستونی روی موبایل.
   ========================================================================== */
.pshow { position: relative; }

.pshow-track {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.pshow-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  background-size: cover;
  background-position: center;
  transition: opacity .6s ease, transform .6s ease;
}
.pshow-slide.on { opacity: 1; visibility: visible; position: relative; }

/* ---------- ارتفاع‌ها ---------- */
.pshow-compact .pshow-track { min-height: 240px; }
.pshow-normal .pshow-track  { min-height: 360px; }
.pshow-tall .pshow-track    { min-height: 480px; }
.pshow-full .pshow-track    { min-height: min(78vh, 640px); }

.pshow-compact .pshow-slide { min-height: 240px; }
.pshow-normal .pshow-slide  { min-height: 360px; }
.pshow-tall .pshow-slide    { min-height: 480px; }
.pshow-full .pshow-slide    { min-height: min(78vh, 640px); }

/* ---------- تیرگی روی تصویر ---------- */
.pshow-ov { position: absolute; inset: 0; pointer-events: none; }

/* ---------- چیدمان درونی ---------- */
.pshow-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  width: 100%;
  padding: 42px 44px;
}

.pshow-body { max-width: 620px; }

.pshow-al-center .pshow-inner { grid-template-columns: 1fr; }
.pshow-al-center .pshow-body { max-width: 720px; margin-inline: auto;
                                text-align: center; }
.pshow-al-center .pshow-acts { justify-content: center; }

.pshow-al-end .pshow-inner { grid-template-columns: auto 1fr; }
.pshow-al-end .pshow-body { margin-inline-start: auto; text-align: end; }
.pshow-al-end .pshow-acts { justify-content: flex-end; }

/* ---------- متن ---------- */
.pshow-tag {
  display: inline-block;
  padding: 5px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .25);
}

.pshow-slide h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1.55;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}
.pshow-slide h2 span { color: var(--mint, #86EFAC); }

.pshow-slide p {
  font-size: clamp(.86rem, 1.4vw, 1rem);
  line-height: 2.1;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 22px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .22);
}

/* ---------- دکمه‌ها ---------- */
.pshow-acts { display: flex; flex-wrap: wrap; gap: 10px; }

.pshow-acts .btn {
  min-width: 132px;
  height: 46px;
  padding-inline: 24px;
  font-weight: 800;
  border-radius: var(--r-full);
}

.pshow-b-solid {
  background: var(--grad-brand, var(--green));
  color: var(--on-green, #fff);
  border: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.pshow-b-outline {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(6px);
}
/* رنگ ثابت — روی سفید است، پس نباید با تم تیره روشن شود */
.pshow-b-light { background: #fff; color: #0F5132; border: 0; }
.pshow-b-dark  { background: rgba(0, 0, 0, .55); color: #fff; border: 0; }

.pshow-acts .btn:hover { transform: translateY(-2px); }

/* ---------- تصویر کناری ---------- */
.pshow-side { flex: none; }

.pshow-side img {
  display: block;
  width: clamp(180px, 24vw, 300px);
  height: auto;
  max-height: 320px;
  object-fit: contain;
}

.pshow-s-float img { animation: pshowFloat 4.5s ease-in-out infinite; }

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

.pshow-s-card img {
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

.pshow-s-circle img {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 5px solid rgba(255, 255, 255, .3);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
  .pshow-s-float img { animation: none; }
}

/* ---------- ناوبری ---------- */
.pshow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.pshow-arrow {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .16s ease, transform .16s ease;
}
.pshow-arrow:hover {
  /* رنگ ثابت: `--green` و `--green-text` هرکدام در یک تم کنتراست
     کافی نمی‌دهند، پس سبز تیرهٔ ثابت با متن سفید. */
  background: #0F5132;
  color: #fff;
  border-color: transparent;
  transform: scale(1.06);
}

.pshow-dots { display: flex; gap: 7px; }

.pshow-dots button {
  width: 9px; height: 9px; padding: 0;
  border-radius: 999px; cursor: pointer;
  background: var(--line); border: 0;
  transition: width .2s ease, background .2s ease;
}
.pshow-dots button.on { width: 26px; background: var(--green); }

/* ---------- گذرها ---------- */
[data-transition="fade"] .pshow-slide { transform: none; }
[data-transition="zoom"] .pshow-slide:not(.on) { transform: scale(1.06); }
[data-transition="flip"] .pshow-slide:not(.on) { transform: rotateY(12deg); }

/* ---------- موبایل ---------- */
@media (max-width: 780px) {
  .pshow-track { border-radius: 16px; }

  .pshow-inner {
    grid-template-columns: 1fr !important;
    gap: 18px;
    padding: 30px 22px;
    text-align: center;
  }

  .pshow-body { max-width: 100%; margin-inline: auto !important;
                text-align: center !important; }

  .pshow-acts { justify-content: center !important; }
  .pshow-acts .btn { flex: 1; min-width: 0; height: 44px; }

  /* تصویر کناری بالای متن می‌آید تا اول دیده شود */
  .pshow-side { order: -1; margin-inline: auto; }
  .pshow-side img { width: min(200px, 52vw); max-height: 190px; }

  .pshow-compact .pshow-track,
  .pshow-compact .pshow-slide { min-height: 300px; }
  .pshow-normal .pshow-track,
  .pshow-normal .pshow-slide { min-height: 380px; }
  .pshow-tall .pshow-track,
  .pshow-tall .pshow-slide { min-height: 440px; }
  .pshow-full .pshow-track,
  .pshow-full .pshow-slide { min-height: 72vh; }

  .pshow-arrow { width: 34px; height: 34px; }
}

@media (max-width: 420px) {
  .pshow-inner { padding: 24px 16px; }
  .pshow-slide h2 { font-size: 1.32rem; }
  .pshow-acts { flex-direction: column; }
  .pshow-acts .btn { width: 100%; }
}

/* ---------- بازبینی اسلاید ---------- */
.sl-thumb {
  flex: none;
  width: 92px; height: 54px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}

.sl-card .vr-name small {
  display: block; font-weight: 500;
  font-size: .78rem; color: var(--slate);
}

.sl-inline { display: inline-flex; gap: 6px; align-items: center; }

.sl-reject input {
  width: 130px; height: 30px;
  padding-inline: 10px; font-size: .76rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
}

@media (max-width: 640px) {
  .sl-thumb { width: 64px; height: 40px; }
  .sl-reject input { width: 100%; }
  .sl-card .vrow-tools { flex-wrap: wrap; gap: 6px; }
}

/* ---------- هیروی صفحهٔ اصلی با فیلدهای تازه ---------- */
.slide-ov { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.slide-inner { position: relative; z-index: 2; }

.hero-center .slide-inner { text-align: center; margin-inline: auto; }
.hero-center .slide-cta { justify-content: center; }
.hero-end .slide-inner { text-align: end; margin-inline-start: auto; }
.hero-end .slide-cta { justify-content: flex-end; }

.slide-side {
  position: absolute;
  inset-inline-end: 5%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.slide-side img {
  display: block;
  width: clamp(160px, 20vw, 280px);
  max-height: 300px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .slide-side { display: none; }
}

/* ---------- فرم اسلاید در پنل ---------- */
input.sl-color {
  width: 64px; height: 38px; padding: 3px;
  border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface);
}

input.sl-range {
  width: 100%; height: 34px;
  accent-color: var(--green);
  cursor: pointer;
}

/* پیش‌نمایش زنده کنار فرم */
.sl-preview-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--info-bg); border: 1px solid var(--line);
}
.sl-preview-bar small { font-size: .76rem; color: var(--slate); }

/* ==========================================================================
   اصلاح هیروی صفحهٔ اصلی
   --------------------------------------------------------------------------
   سه باگ:
     ۱) `.slide-1/2/3` در theme.css پس‌زمینهٔ ثابت داشتند و تصویر
        انتخابی ادمین را می‌پوشاندند
     ۲) تصویر کناری روی موبایل `display:none` می‌شد
     ۳) کادر متن بدون پس‌زمینه روی تصویر ناخوانا بود
   ========================================================================== */

/* ---------- ۱) پس‌زمینهٔ انتخابی غالب شود ---------- */
.slide[style*="background"] {
  background-image: none;
  background-size: cover;
  background-position: center;
}
.slide[style*="background-image"] {
  background-image: var(--slide-bg, none);
}

/* وقتی ادمین تصویر یا طرح داده، طرح ثابت قالب کنار می‌رود */
.slide.has-bg { background: none; }
.slide.has-bg .slide-blobs { opacity: .35; }

/* ---------- ۲) چیدمان دوستونی ---------- */
.slide {
  display: flex !important;
  align-items: center;
  gap: 26px;
}

.slide-inner {
  flex: 1;
  min-width: 0;
  max-width: 640px;
}

.slide-side {
  position: static !important;
  transform: none !important;
  flex: none;
  z-index: 2;
}

.slide-side img {
  display: block;
  width: clamp(170px, 22vw, 300px);
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .32));
}

/* ---------- ۳) کادر متن خوانا ---------- */
.slide-inner {
  padding: 26px 30px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}

/* روی گرادیان‌های تیره کادر لازم نیست — شفاف‌تر می‌شود */
.slide:not(.has-bg) .slide-inner {
  background: rgba(0, 0, 0, .12);
  border-color: rgba(255, 255, 255, .1);
}

.slide-inner .tag {
  display: inline-block;
  padding: 5px 14px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
}

.slide-inner h1, .slide-inner .slide-title {
  font-size: clamp(1.5rem, 3.3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 12px;
}

.slide-inner p {
  font-size: clamp(.86rem, 1.35vw, 1rem);
  line-height: 2;
  color: rgba(255, 255, 255, .94);
  margin-bottom: 20px;
  max-width: 56ch;
}

.slide-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slide-cta .btn {
  min-width: 140px;
  height: 48px;
  padding-inline: 26px;
  font-weight: 800;
  border-radius: var(--r-full);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.slide-cta .btn:hover { transform: translateY(-2px); }

/* ---------- موبایل ---------- */
@media (max-width: 900px) {
  .slide {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 26px 20px;
    text-align: center;
  }

  /* تصویر بالای متن — اول دیده شود */
  .slide-side {
    display: block !important;
    order: -1;
  }
  .slide-side img {
    width: min(190px, 46vw);
    max-height: 180px;
  }

  .slide-inner {
    max-width: 100%;
    padding: 20px 18px;
    text-align: center;
    margin-inline: auto !important;
  }

  .slide-cta { justify-content: center !important; }
  .slide-cta .btn { flex: 1; min-width: 0; height: 46px; }

  .slide-inner::before { display: none; }
}

@media (max-width: 430px) {
  .slide-inner h1, .slide-inner .slide-title { font-size: 1.34rem; }
  .slide-cta { flex-direction: column; }
  .slide-cta .btn { width: 100%; }
  .slide-side img { max-height: 140px; }
}

/* ---------- حذف/جایگزینی تصویر در فرم ---------- */
.ct-file-now {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--bg-subtle); border: 1px solid var(--line);
}
.ct-file-thumb {
  width: 78px; height: 46px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
}
.ct-file-now .field-check { margin: 0; }
.ct-file-now small { flex-basis: 100%; font-size: .72rem; }

/* ==========================================================================
   ویرایشگر گرافیکی اسلاید
   ========================================================================== */
.sd-wrap { position: relative; }

.sd-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}

.sd-modes { display: flex; gap: 6px; }

.sd-mode {
  padding: 8px 16px; border-radius: var(--r-full);
  font-size: .82rem; font-weight: 700; cursor: pointer;
  background: var(--bg-subtle); border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background .16s ease, color .16s ease;
}
.sd-mode.on {
  background: var(--grad-brand, var(--green));
  color: var(--on-green); border-color: transparent;
}

.sd-tools { display: flex; gap: 8px; flex-wrap: wrap; }

/*
  نتیجهٔ ذخیره — کنار نوار ابزار، نه مودال.

  ⚠️ پیش‌تر پیام «اسلاید ساخته شد» هنگام **ورود** به
  ویرایشگر نشان داده می‌شد، در حالی که هنوز چیزی طراحی و
  ذخیره نشده بود. حالا این خط فقط پس از پاسخ سرور پر
  می‌شود و متن خطا را هم — که پیش‌تر دور ریخته می‌شد —
  نشان می‌دهد.
*/
.sd-save-note {
  margin: 8px 0 0; padding: 7px 11px;
  border-radius: 10px;
  font-size: .78rem; font-weight: 600; line-height: 1.8;
}
.sd-save-note.is-ok {
  background: var(--bg-subtle); color: var(--green-text);
}
.sd-save-note.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

.sd-hint {
  font-size: .78rem; color: var(--slate);
  line-height: 1.9; margin-bottom: 12px;
}

/* ---------- بوم ---------- */
.sd-stage {
  /* `flex` بوم را به اندازهٔ محتوا جمع می‌کرد؛ `block` تمام عرض
     موجود را می‌دهد تا طراحی در ابعاد واقعی دیده شود. */
  display: block;
  padding: 14px; border-radius: var(--r);
  background: var(--bg-subtle); border: 1px solid var(--line);
}

.sd-canvas {
  position: relative;
  /* عرض تمام ظرف، ارتفاع از نسبتِ خودِ اسلاید — `--sd-ratio` را
     قالب می‌گذارد تا بوم دقیقاً شکل بنر واقعی باشد. */
  width: 100%;
  aspect-ratio: var(--sd-ratio, 3.2);
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--sh-md);
  /* شبکهٔ راهنما — چشم را در تراز کردن کمک می‌کند */
  background-image: var(--sd-bg, none);
}

.sd-canvas::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 10% 10%;
}

.sd-stage-mobile .sd-canvas {
  width: 380px; aspect-ratio: 9 / 15;
}

.sd-ov { position: absolute; inset: 0; pointer-events: none; }

/* ---------- المان‌ها ---------- */
.sd-el {
  position: relative;
  padding: 8px 10px;
  cursor: grab;
  border: 1.5px dashed transparent;
  border-radius: 10px;
  user-select: none;
  touch-action: none;
  transition: border-color .14s ease, background .14s ease;
  z-index: 3;
}
.sd-el:hover { border-color: rgba(255, 255, 255, .5);
               background: rgba(255, 255, 255, .07); }
.sd-el.on {
  border-color: var(--green);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 3px rgba(32, 201, 151, .28);
}
.sd-el:active { cursor: grabbing; }
.sd-el[hidden] { display: none; }

.sd-el h2 {
  font-size: 1.7em; font-weight: 900; line-height: 1.5;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.sd-el p {
  font-size: .95em; line-height: 1.9;
  color: rgba(255,255,255,.94);
}
.sd-tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: .8em; font-weight: 800;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3);
}
.sd-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-btns .btn { height: 40px; padding-inline: 20px; font-size: .84em; }

.sd-l > span,
.sd-l > img { pointer-events: none; }

.sd-el-img img {
  display: block; width: 100%; height: auto;
  max-height: 260px; object-fit: contain;
  pointer-events: none;
}

/* دستگیرهٔ تغییر اندازه */
.sd-handle {
  position: absolute;
  inset-inline-start: -6px; inset-block-end: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green); border: 2px solid #fff;
  cursor: nwse-resize; opacity: 0;
  transition: opacity .14s ease;
}
.sd-el:hover .sd-handle,
.sd-el.on .sd-handle { opacity: 1; }

.sd-grab { display: none; }

/* ---------- پنل تنظیمات ---------- */
.sd-panel {
  margin-top: 14px; padding: 16px 18px;
  border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.sd-panel[hidden] { display: none; }

.sd-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.sd-panel-x {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-subtle); border: 0; cursor: pointer;
  color: var(--slate);
}

.sd-fields {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.sd-fields > label { display: flex; flex-direction: column; gap: 5px; }
.sd-fields span { font-size: .76rem; color: var(--slate); }
.sd-fields input[type="range"] { accent-color: var(--green); }

/* ---------- موبایل ---------- */
@media (max-width: 720px) {
  .sd-bar { flex-direction: column; align-items: stretch; }
  .sd-modes, .sd-tools { justify-content: center; }
  .sd-stage { padding: 10px; }
  .sd-stage-mobile .sd-canvas { width: 100%; max-width: 340px; }
  .sd-fields { grid-template-columns: 1fr; }
}

/* چیدمان دستی: المان‌ها مطلق می‌شوند، پس ظرف باید مرجع باشد */
.slide.has-layout { position: relative; display: block !important; }
.slide.has-layout .slide-inner {
  position: static; padding: 0; background: none;
  border: 0; box-shadow: none; backdrop-filter: none;
  max-width: none;
}
.slide.has-layout [data-el] { z-index: 3; }

/* ==========================================================================
   ویرایشگر لایه‌ای اسلاید
   --------------------------------------------------------------------------
   بوم تمام‌عرض با نسبت واقعی بنر، پنل ویژگی‌ها کنارش، فهرست لایه‌ها
   زیر آن. روی موبایل پنل زیر بوم می‌رود.
   ========================================================================== */
.sd { position: relative; }

/* ---------- نوار بالا ---------- */
.sd-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 10px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}

.sd-modes, .sd-add, .sd-ops { display: flex; gap: 6px; flex-wrap: wrap; }

.sd-mode, .sd-add button {
  padding: 8px 14px; border-radius: var(--r-full);
  font-size: .8rem; font-weight: 700; cursor: pointer;
  background: var(--bg-subtle); border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.sd-mode.on {
  background: var(--grad-brand, var(--green));
  color: var(--on-green); border-color: transparent;
}
.sd-add button:hover {
  background: var(--green-100); color: var(--green-text-soft);
  border-color: var(--green);
}

/* ---------- چیدمان کار ---------- */
.sd-work {
  display: grid; grid-template-columns: 1fr 300px; gap: 14px;
  align-items: start;
}

/* ---------- بوم ---------- */
.sd-stage {
  padding: 14px; border-radius: var(--r);
  background: var(--bg-subtle); border: 1px solid var(--line);
}

.sd-canvas {
  /*
    ارتفاع **پیکسلی** است نه نسبی — بنر واقعی هم همین‌طور است.
    با نسبت ثابت، در عرض‌های مختلف ارتفاع فرق می‌کرد و چیدمان
    جابه‌جا دیده می‌شد.
  */
  position: relative;
  width: 100%;
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--sh-md);
  touch-action: none;
  transition: width .25s ease, aspect-ratio .25s ease;
}

/*
  نمای موبایل: عرض گوشی و **ارتفاع دقیقِ همان بنر روی موبایل**.

  نسبت‌گذاری بوم را بلند می‌کرد و طراح فکر می‌کرد فضای بیشتری
  دارد؛ بعد روی گوشی المان‌ها بیرون می‌زدند.
*/
.sd-canvas.sd-mobile {
  /* `!important` لازم است: `aspect-ratio` درون‌خطیِ قالب وگرنه
     غالب می‌شود و ارتفاع را دوباره از نسبت می‌گیرد. */
  width: min(390px, 100%);
  margin-inline: auto;
  aspect-ratio: auto !important;
  height: var(--sd-h-mobile, 300px) !important;
}

/* شبکهٔ راهنما — چشم را در تراز کردن کمک می‌کند */
.sd-canvas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 10% 10%;
}

.sd-ov { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.sd-ruler {
  margin-top: 8px; text-align: center;
  font-size: .74rem; color: var(--slate);
}

/* ---------- لایه‌ها روی بوم ---------- */
.sd-l {
  cursor: grab;
  user-select: none;
  /* محتوای درونی نباید رویداد را ببلعد — کشیدن از هر جای لایه */
  touch-action: none;
  box-sizing: border-box;
  outline: 1.5px dashed transparent;
  outline-offset: 2px;
  transition: outline-color .12s ease;
}
.sd-l:hover { outline-color: rgba(255, 255, 255, .55); }
.sd-l.on {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.sd-l:active { cursor: grabbing; }
.sd-l.is-hidden { opacity: .28 !important; }

.sd-l-noimg {
  display: grid; place-items: center;
  font-size: .78rem; color: rgba(255, 255, 255, .8);
  background: rgba(0, 0, 0, .3);
  border: 1.5px dashed rgba(255, 255, 255, .4);
  border-radius: 12px;
}

.sd-float { animation: sdFloat 4.5s ease-in-out infinite; }
@keyframes sdFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* دستگیره‌های گوشه */
.sd-h {
  position: absolute; width: 13px; height: 13px;
  border-radius: 50%; background: var(--green);
  border: 2px solid #fff; opacity: 0;
  transition: opacity .12s ease; z-index: 5;
}
.sd-l:hover .sd-h, .sd-l.on .sd-h { opacity: 1; }

.sd-h-nw { inset-block-start: -7px; inset-inline-start: -7px; cursor: nwse-resize; }
.sd-h-ne { inset-block-start: -7px; inset-inline-end: -7px; cursor: nesw-resize; }
.sd-h-sw { inset-block-end: -7px; inset-inline-start: -7px; cursor: nesw-resize; }
.sd-h-se { inset-block-end: -7px; inset-inline-end: -7px; cursor: nwse-resize; }

.sd-link-mark {
  position: absolute; inset-block-start: -9px; inset-inline-end: -9px;
  font-size: .7rem; font-style: normal; z-index: 6;
  background: var(--surface); border-radius: 50%;
  width: 18px; height: 18px; display: grid; place-items: center;
  box-shadow: var(--sh-sm);
}

/* ---------- پنل ویژگی‌ها ---------- */
.sd-panel {
  border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); overflow: hidden;
  position: sticky; top: 80px;
  max-height: calc(100vh - 100px); overflow-y: auto;
}

.sd-empty {
  padding: 40px 20px; text-align: center; color: var(--slate);
}
.sd-empty span { font-size: 2rem; display: block; margin-bottom: 8px; }
.sd-empty p { font-size: .8rem; line-height: 1.9; }

.sd-props-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 14px;
  background: var(--bg-subtle); border-bottom: 1px solid var(--line);
}
.sd-props-head b { font-size: .88rem; }

.sd-layer-ops { display: flex; gap: 4px; }
.sd-layer-ops button {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-size: .78rem; line-height: 1;
}
.sd-layer-ops button:hover { background: var(--green-100); }

/* ---------- گروه‌های تنظیم ---------- */
.sd-grp { border-bottom: 1px solid var(--line); }
.sd-grp[hidden] { display: none; }

.sd-grp > summary {
  padding: 11px 14px; cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 700;
  transition: background .15s ease;
}
.sd-grp > summary::-webkit-details-marker { display: none; }
.sd-grp > summary::after {
  content: "▾"; float: inline-end; color: var(--slate);
  transition: transform .18s ease;
}
.sd-grp[open] > summary::after { transform: rotate(180deg); }
.sd-grp > summary:hover { background: var(--bg-subtle); }

.sd-grp > label,
.sd-grp > .sd-xy > label {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 14px;
}
.sd-grp > label[hidden] { display: none; }

.sd-grp span { font-size: .72rem; color: var(--slate); font-weight: 600; }

.sd-grp input[type="text"],
.sd-grp input[type="number"],
.sd-grp select,
.sd-grp textarea {
  width: 100%; padding: 7px 10px; font: inherit; font-size: .82rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); box-sizing: border-box;
}
.sd-grp textarea { resize: vertical; min-height: 46px; }

.sd-grp input[type="color"] {
  width: 100%; height: 34px; padding: 2px;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); cursor: pointer;
}

.sd-grp input[type="range"] {
  width: 100%; accent-color: var(--green); cursor: pointer;
}

.sd-xy {
  display: grid; grid-template-columns: 1fr 1fr;
  padding-block: 2px;
}

/*
  `min-width: 0` حیاتی است.

  آیتم‌های گرید پیش‌فرض `min-width: auto` دارند، یعنی کوچک‌تر از عرض
  ذاتی محتوایشان نمی‌شوند. عرض ذاتی <input type="number"> در کروم
  حدود ۱۵۰px است، پس دو ستون با پدینگ‌ها به ~۴۰۰px می‌رسیدند در حالی
  که پنل ۳۰۰px است — و چون `.sd-panel` مقدار `overflow: hidden` دارد،
  ستون دوم بریده می‌شد.

  `width: 100%` روی خودِ اینپوت این را حل نمی‌کند؛ محدودیت روی آیتم
  گرید است نه روی اینپوت.
*/
.sd-xy > label {
  padding-block: 6px;
  min-width: 0;
}

/* همان قاعده برای اینپوت‌ها: عرض ذاتی نباید کف عرض بسازد */
.sd-grp input,
.sd-grp select,
.sd-grp textarea {
  min-width: 0;
}

/* برچسب‌ها هم نباید با یک کلمهٔ بلند ستون را باز کنند */
.sd-grp > label,
.sd-grp > .sd-xy > label {
  min-width: 0;
}

.sd-grp span {
  overflow-wrap: anywhere;
}

/*
  پنل باریک‌تر از ~۲۶۰px دیگر جای دو ستون ندارد؛ تک‌ستونی می‌شود.
  `container` بر پایهٔ عرض خودِ پنل است نه پنجره، چون در حالت موبایل
  پنل تمام‌عرض می‌شود ولی در دسکتاپ باریک می‌ماند.
*/
.sd-props { container-type: inline-size; }

@container (max-width: 260px) {
  .sd-xy { grid-template-columns: 1fr; }
}

.sd-check {
  flex-direction: row !important; align-items: center; gap: 8px;
}
.sd-check input { width: auto !important; }
.sd-check span { font-size: .78rem !important; color: var(--ink) !important; }

.sd-hide-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: var(--warn-bg);
}
.sd-hide-row span { color: var(--warn-text) !important; }

/* انتخاب تصویر */
.sd-img-pick { display: flex; flex-direction: column; gap: 8px; }
.sd-img-pick img {
  width: 100%; max-height: 110px; object-fit: contain;
  border-radius: 8px; background: var(--bg-subtle);
  border: 1px solid var(--line);
}

/* ---------- فهرست لایه‌ها ---------- */
.sd-layers { padding: 12px 14px; border-top: 1px solid var(--line); }
.sd-layers > b { font-size: .8rem; display: block; margin-bottom: 8px; }
.sd-layers ul { list-style: none; display: flex; flex-direction: column;
                gap: 3px; margin: 0; padding: 0; }

.sd-layers li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  font-size: .78rem; background: var(--bg-subtle);
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.sd-layers li:hover { background: var(--green-100); }
.sd-layers li.on { border-color: var(--green); background: var(--green-100); }
.sd-layers li.off { opacity: .5; }

.sd-layers li b {
  flex: 1; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-layers li button {
  border: 0; background: none; cursor: pointer;
  font-size: .78rem; padding: 2px;
}

/* ---------- موبایل ---------- */
@media (max-width: 900px) {
  .sd-work { grid-template-columns: 1fr; }
  .sd-panel { position: static; max-height: none; }
  .sd-top { flex-direction: column; align-items: stretch; }
  .sd-modes, .sd-add, .sd-ops { justify-content: center; }
  .sd-stage { padding: 8px; }
}

/* ==========================================================================
   رندر لایه‌ها روی سایت واقعی
   ========================================================================== */
.slide.has-layers,
.pshow-slide.has-layers {
  /*
    اسلاید باید کاملاً ظرف را پر کند تا درصدهای لایه درست بخوانند.

    `!important` لازم است چون قواعد موبایلِ پیشین (`position` و
    `min-height`) بعدتر می‌آیند و ارتفاع را نصف می‌کردند.
  */
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/*
  ظرف اسلایدشو ارتفاع را می‌گیرد — `--slide-h` را JS از
  `data-slide-h` می‌گذارد و همان عددی است که بوم ویرایشگر دارد.
  بدون این، `min-height` قالب غالب می‌شد و نسبت فرق می‌کرد.
*/
.slider.has-layer-slide,
.pshow-track.has-layer-slide {
  height: var(--slide-h, 360px);
  min-height: 0 !important;
}

/* موبایل: بلندتر، چون لایه‌ها ستونی می‌شوند */
@media (max-width: 900px) {
  .slider.has-layer-slide,
  .pshow-track.has-layer-slide {
    height: var(--slide-h-m, 460px);
  }
}

/*
  ⚠️ نسبت بر ارتفاع پیکسلی اولویت دارد.

  بوم ویرایشگر با `--sd-ratio` کار می‌کند و با هر عرضی شکلش را
  نگه می‌دارد. سایت ولی ارتفاع ثابت می‌گرفت، و چون عرض محتوای
  سایت از ۱۱۵۲ (پایهٔ محاسبهٔ بوم) بیشتر است، بنر روی سایت از
  طرح کشیده‌تر می‌شد و `cover` تصویر را از بالا و پایین می‌برید.

  با نسبت، آنچه ادمین می‌بیند دقیقاً همان است که کاربر می‌بیند.
*/
.slider.has-ratio-slide,
.pshow-track.has-ratio-slide {
  aspect-ratio: var(--slide-ratio, 2.6);
  height: auto;
  min-height: 0 !important;
}

@media (max-width: 900px) {
  .slider.has-ratio-slide,
  .pshow-track.has-ratio-slide {
    aspect-ratio: var(--slide-ratio-m, var(--slide-ratio, 1.2));
  }
}

/*
  ⚠️ اسلاید باید ظرف را پر کند، حتی اگر موقعیت‌دهی مطلق از دست برود.

  باگ گزارش‌شده دقیقاً همین بود: بنر روی سایت فقط ۱۳۶ پیکسل
  ارتفاع داشت — یعنی دقیقاً `۶۸ + ۶۸`، همان
  `padding: clamp(24px, 5vw, 68px)`. اسلاید در جریان عادی نشسته
  بود با محتوای صفر، پس ارتفاعش فقط padding بود و پس‌زمینه هم
  همان نوار باریک را رنگ می‌کرد.

  `inset: 0` در `theme.css` هست ولی وقتی به هر دلیلی اثر نکند
  (فایل ثابتِ کهنه، بازنویسی در قالبی دیگر، اسلاید بدون محتوا)،
  نتیجه یک بنرِ نواری است. این دو خط تضمین می‌کنند اسلاید در هر
  حالت ظرفش را پر کند.
*/
.slider .slide,
.pshow-track .slide {
  position: absolute;
  inset: 0;
  min-height: 100%;
  box-sizing: border-box;
}

/*
  اسلاید طراحی‌شده padding هم لازم ندارد — محتوایش لایه‌های
  موقعیت‌دار است و padding فقط ناحیهٔ قابل استفاده را کوچک
  می‌کند.
*/
.slide.has-bg:not(:has(.slide-inner)) {
  padding: 0;
}

.slide.has-layers .slide-inner,
.slide.has-layers .slide-blobs,
.slide.has-layers .slide-mark { display: none !important; }

.vh-layer {
  position: absolute;
  box-sizing: border-box;
  z-index: 3;
}
.vh-layer img { display: block; width: 100%; }

a.vh-layer { text-decoration: none; }
a.vh-layer:hover { filter: brightness(1.06); }

.vh-layer-float img { animation: sdFloat 4.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .vh-layer-float img, .sd-float { animation: none; }
}

/* دکمه‌های ردیف لایه */
.sd-layers li button {
  width: 24px; height: 24px; flex: none;
  border-radius: 6px; display: grid; place-items: center;
  transition: background .12s ease;
}
.sd-li-eye:hover { background: var(--green-100); }
.sd-li-del:hover { background: var(--danger-bg); }

/* ---------- کنترل پس‌زمینه در ویرایشگر ---------- */
.sd-bg {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; border-radius: var(--r-full);
  background: var(--bg-subtle); border: 1px solid var(--line);
}

.sd-bg img {
  width: 34px; height: 22px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line);
}

.sd-bg-state { font-size: .74rem; color: var(--slate); font-weight: 700; }

.sd-bg button {
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: .74rem; font-weight: 700; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft);
}
.sd-bg button:hover { background: var(--green-100); }

.sd-bg-both {
  display: flex; align-items: center; gap: 4px;
  font-size: .72rem; color: var(--slate); cursor: pointer;
}
.sd-bg-both input { cursor: pointer; }

@media (max-width: 720px) {
  .sd-bg { justify-content: center; }
}

/* ---------- محو کردن پس‌زمینه ---------- */
/* فیلتر روی خودِ اسلاید متن را هم محو می‌کند، پس لایهٔ جدا لازم است */
/*
  قاعدهٔ قدیمی حذف شد: `backdrop-filter` هرچه **پشتش** بود را محو
  می‌کرد — یعنی کل صفحه. جایگزینش پایین‌تر است و فقط لایهٔ تصویر
  را می‌گیرد.
*/

/* ---------- تنظیمات پس‌زمینه در ویرایشگر ---------- */
.sd-bg-more { position: relative; }
.sd-bg-more > summary {
  list-style: none; cursor: pointer;
  padding: 5px 9px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .78rem;
}
.sd-bg-more > summary::-webkit-details-marker { display: none; }

/* جای‌گیری را جاوااسکریپت می‌چیند — توضیحش کنار .sd-slide-opts است */
.sd-bg-opts {
  position: fixed;
  inset: auto;
  left: var(--sd-x, 0px);
  top: var(--sd-y, 0px);
  z-index: 40; width: min(220px, calc(100vw - 24px));
  max-height: var(--sd-maxh, min(70vh, 460px)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}
.sd-bg-opts label { display: flex; flex-direction: column; gap: 4px; }
.sd-bg-opts span { font-size: .72rem; color: var(--slate); }
.sd-bg-opts select {
  padding: 6px 8px; font-size: .78rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink);
}
.sd-bg-opts input[type="range"] { accent-color: var(--green); }

/* روی عرض کم، جاوااسکریپت خودش داخل پنجره محدود می‌کند؛
   قاعدهٔ قدیمیِ inset-inline با جای‌گیری fixed می‌جنگید. */

/* ---------- نوار انتشار در ویرایشگر ---------- */
.sd-pub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; border-radius: var(--r-full);
  background: var(--bg-subtle); border: 1px solid var(--line);
}

.sd-live {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.sd-live input { cursor: pointer; }

/*
  همهٔ ورودی‌های نوار یک ظاهر دارند.

  `font: inherit` لازم است چون `<input>` و `<select>` فونت پیش‌فرض
  مرورگر را می‌گیرند، نه فونت سایت — بدون این، کنار بقیهٔ نوار
  ناهماهنگ دیده می‌شوند.
*/
.sd-pub select,
.sd-pub input[type="number"],
.sd-pub input[type="text"] {
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sd-pub select:focus,
.sd-pub input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100);
}

.sd-pub input[type="number"] { width: 58px; }

/* لینک بنر: کمی پهن‌تر، متنش LTR ولی وسط‌چین */
.sd-pub input[type="text"] {
  width: min(190px, 40vw);
  text-align: center;
}
.sd-pub input[type="text"]::placeholder {
  color: var(--slate);
  font-weight: 500;
}

/* `select` فلش خودش را دارد؛ فضای کافی بگیرد */
.sd-pub select { padding-inline-end: 22px; }

@media (max-width: 720px) {
  .sd-pub { justify-content: center; }
}

/* ==========================================================================
   لایهٔ تصویر پس‌زمینه
   --------------------------------------------------------------------------
   تصویر روی یک لایهٔ جدا می‌نشیند، نه خودِ اسلاید:

     • محو کردن فقط تصویر را می‌گیرد، نه متن و نه بقیهٔ صفحه
     • کادر با `overflow` تصویرِ بزرگ را داخل گوشه‌های گرد نگه
       می‌دارد

   بدون `position: absolute` این `<span>` جریان عادی می‌گیرد، عرض
   صفر می‌شود و تصویر جای نامربوط می‌افتد.
   ========================================================================== */
.vh-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
}

/* ظرف باید مرجع جای‌گیری باشد و تصویر را ببُرد */
.slide.has-bg,
.pshow-slide.has-bg,
.sd-canvas {
  overflow: hidden;
  isolation: isolate;
}

.slide.has-bg,
.pshow-slide.has-bg { position: relative; }

/*
  محو کردن فقط روی لایهٔ تصویر.

  `scale` لبه‌های محوشده را می‌پوشاند؛ چون ظرف `overflow: hidden`
  دارد، بزرگ‌شدگی بیرون نمی‌زند.
*/
.vh-bg-blur > .vh-bg-layer {
  filter: blur(var(--vh-bg-blur, 0));
  transform: scale(1.08);
  will-change: filter;      /* لایهٔ رندر جدا — روی متن اثر نگذارد */
}

/* ==========================================================================
   انیمیشن ورود لایه‌ها
   --------------------------------------------------------------------------
   هر لایه انیمیشن مستقل خودش را دارد. `animation-fill-mode: both`
   لازم است تا پیش از شروع هم در حالت اولیه بماند و نپرد.
   ========================================================================== */
.vh-anim {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22, .8, .3, 1);
}

/*
  لایه‌ای که هم انیمیشن ورود دارد هم موشن پیوسته: دو نام انیمیشن
  پشت سر هم. ترتیب اینجا با ترتیب مدت‌هایی که JS می‌نویسد یکی است
  — ورود اول، موشن دوم.
*/
.vh-anim.vh-motion { animation-iteration-count: 1, infinite; }

.vh-anim-loop {
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.vh-anim-fade   { animation-name: vhFade; }
.vh-anim-up     { animation-name: vhUp; }
.vh-anim-down   { animation-name: vhDown; }
.vh-anim-start  { animation-name: vhStart; }
.vh-anim-end    { animation-name: vhEnd; }
.vh-anim-zoom   { animation-name: vhZoom; }
.vh-anim-flip   { animation-name: vhFlip; }
.vh-anim-bounce { animation-name: vhBounce; }

@keyframes vhFade  { from { opacity: 0; } to { opacity: 1; } }

@keyframes vhUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vhDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* جهت‌دار: در RTL «شروع» سمت راست است */
@keyframes vhStart {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vhEnd {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: translateX(0); }
}
[dir="ltr"] .vh-anim-start { animation-name: vhEnd; }
[dir="ltr"] .vh-anim-end   { animation-name: vhStart; }

@keyframes vhZoom {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes vhFlip {
  from { opacity: 0; transform: rotateY(58deg); }
  to   { opacity: 1; transform: rotateY(0); }
}
@keyframes vhBounce {
  0%   { opacity: 0; transform: translateY(-24px); }
  55%  { opacity: 1; transform: translateY(8px); }
  75%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .vh-anim { animation: none !important; }
}

/* ==========================================================================
   تنظیمات اسلاید در ویرایشگر
   ========================================================================== */
.sd-slide-more { position: relative; }

.sd-slide-more > summary {
  list-style: none; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--bg-subtle); border: 1px solid var(--line);
  font-size: .78rem; font-weight: 700; color: var(--ink-soft);
  transition: background .15s ease;
}
.sd-slide-more > summary::-webkit-details-marker { display: none; }
.sd-slide-more > summary:hover { background: var(--green-100); }

/*
  چرا `fixed` و نه `absolute`؟

  این پنل داخل نوار ابزاری است که `flex-wrap` دارد. با `absolute`،
  مبدأ مختصات خودِ دکمه است؛ وقتی نوار سطر می‌شکند یا دکمه نزدیک لبهٔ
  پنجره می‌رود، پنل از کادر بیرون می‌زند و هیچ قاعدهٔ ایستایی نمی‌تواند
  جلویش را بگیرد. `--sd-shift` قبلی هم هرگز مقداردهی نمی‌شد.

  با `fixed` مبدأ خودِ پنجره است و `slide-designer.js` مختصات را از
  `getBoundingClientRect()` دکمه حساب می‌کند و داخل پنجره محدودش
  می‌کند. جهت هم از `direction` سند خوانده می‌شود، پس در راست‌چین
  لبه‌های راست و در چپ‌چین لبه‌های چپ هم‌تراز می‌شوند.

  مزیت دیگر: `fixed` از `overflow: hidden` هیچ نیایی بریده نمی‌شود.
*/
.sd-slide-opts {
  position: fixed;
  inset: auto;
  left: var(--sd-x, 0px);
  top: var(--sd-y, 0px);
  z-index: 45; width: min(320px, calc(100vw - 24px));
  max-height: var(--sd-maxh, min(70vh, 520px)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}

.sd-slide-opts fieldset {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sd-slide-opts legend {
  font-size: .8rem; font-weight: 800; margin-bottom: 6px;
  padding-bottom: 6px; width: 100%;
  border-bottom: 1px solid var(--line);
}
.sd-slide-opts label {
  display: flex; flex-direction: column; gap: 4px;
}
.sd-slide-opts span { font-size: .72rem; color: var(--slate); }

.sd-slide-opts select,
.sd-slide-opts input[type="number"],
.sd-slide-opts input[type="datetime-local"] {
  padding: 7px 9px; font: inherit; font-size: .78rem;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink);
  box-sizing: border-box; width: 100%;
}
.sd-slide-opts input[type="color"] {
  width: 100%; height: 34px; padding: 2px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); cursor: pointer;
}
.sd-slide-opts input[type="range"] {
  width: 100%; accent-color: var(--green);
}

/* همان دلیل بالا */

/* ==========================================================================
   جنس شیشه — گلس‌مورفیسم و لیکویید
   --------------------------------------------------------------------------
   `backdrop-filter` هرچه پشتش است را می‌گیرد؛ روی لایه‌های کوچک
   دقیقاً همان چیزی است که می‌خواهیم.
   ========================================================================== */
.vh-glass-soft {
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
}

.vh-glass-frost {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}

/*
  لیکویید: لبهٔ روشن بالا و سایهٔ درونی پایین، حس ضخامت شیشه را
  می‌سازد — همان امضای بصری سایت.
*/
.vh-glass-liquid {
  /*
    `position` اینجا تعریف نمی‌شود: لایه‌ها روی سایت `absolute`
    هستند و `relative` جای‌گیری‌شان را می‌شکست — در ویرایشگر درست
    دیده می‌شد چون آنجا استایل درون‌خطی غالب بود.
  */
  backdrop-filter: blur(14px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.08);
  background: linear-gradient(135deg,
              rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .18),
              inset 0 1px 1px rgba(255, 255, 255, .5),
              inset 0 -8px 22px rgba(255, 255, 255, .08);
}
.vh-glass-liquid::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
              transparent 30%, rgba(255, 255, 255, .16) 45%,
              transparent 60%);
}

.vh-glass-dark {
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  background: rgba(10, 15, 20, .45);
  border: 1px solid rgba(255, 255, 255, .12);
}

.vh-glass-mirror {
  backdrop-filter: blur(6px) saturate(200%) contrast(110%);
  -webkit-backdrop-filter: blur(6px) saturate(200%) contrast(110%);
  background: linear-gradient(160deg,
              rgba(255, 255, 255, .34), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .4);
}

/* ==========================================================================
   موشن پیوسته
   ========================================================================== */
.vh-motion {
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /*
    مبدأ چرخش وسط خودِ لایه — پیش‌فرض مرورگر هم همین است، ولی
    قواعد دیگر می‌توانند عوضش کنند و آن‌وقت لایه دور نقطهٔ نامربوط
    می‌چرخد و جابه‌جا دیده می‌شود.
  */
  transform-origin: center center;
  transform-box: border-box;
  /*
    مدت از متغیر می‌آید تا کاربر عدد دقیق بدهد. کلاس‌های
    slow/fast جواب نمی‌دادند چون `animation-name` بعدشان می‌آمد و
    `animation` سرشاخه مدت را بازنشانی می‌کرد.
  */
  animation-duration: var(--vh-motion-time, 4.5s);
}

.vh-m-float   { animation-name: vhMFloat; }
.vh-m-sway    { animation-name: vhMSway; }
.vh-m-pulse   { animation-name: vhMPulse; }
.vh-m-breathe { animation-name: vhMBreathe; }
/*
  چرخش کامل روی متن یا کادرِ عریض، آن را دور مرکزِ خودش می‌چرخاند و
  گوشه‌ها بیرون می‌زنند — روی سایت جابه‌جا دیده می‌شود.

  راه‌حل: چرخش به یک لایهٔ درونی منتقل می‌شود. ظرف سرِ جایش ثابت
  می‌ماند و فقط محتوا می‌چرخد.
*/
.vh-m-spin {
  animation-name: none !important;
}
.vh-m-spin > * {
  animation: vhMSpin var(--vh-motion-time, 4.5s) linear infinite;
  transform-origin: center center;
  display: inline-block;
}
.vh-m-wobble  { animation-name: vhMWobble; }
.vh-m-tilt    { animation-name: vhMTilt; }



/* ترکیب انیمیشن ورود و موشن پیوسته */
.vh-anim-fade.vh-m-float { animation-name: vhFade, vhMFloat; }
.vh-anim-fade.vh-m-sway { animation-name: vhFade, vhMSway; }
.vh-anim-fade.vh-m-pulse { animation-name: vhFade, vhMPulse; }
.vh-anim-fade.vh-m-breathe { animation-name: vhFade, vhMBreathe; }
.vh-anim-fade.vh-m-spin { animation-name: vhFade, vhMSpin; }
.vh-anim-fade.vh-m-wobble { animation-name: vhFade, vhMWobble; }
.vh-anim-fade.vh-m-tilt { animation-name: vhFade, vhMTilt; }
.vh-anim-up.vh-m-float { animation-name: vhUp, vhMFloat; }
.vh-anim-up.vh-m-sway { animation-name: vhUp, vhMSway; }
.vh-anim-up.vh-m-pulse { animation-name: vhUp, vhMPulse; }
.vh-anim-up.vh-m-breathe { animation-name: vhUp, vhMBreathe; }
.vh-anim-up.vh-m-spin { animation-name: vhUp, vhMSpin; }
.vh-anim-up.vh-m-wobble { animation-name: vhUp, vhMWobble; }
.vh-anim-up.vh-m-tilt { animation-name: vhUp, vhMTilt; }
.vh-anim-down.vh-m-float { animation-name: vhDown, vhMFloat; }
.vh-anim-down.vh-m-sway { animation-name: vhDown, vhMSway; }
.vh-anim-down.vh-m-pulse { animation-name: vhDown, vhMPulse; }
.vh-anim-down.vh-m-breathe { animation-name: vhDown, vhMBreathe; }
.vh-anim-down.vh-m-spin { animation-name: vhDown, vhMSpin; }
.vh-anim-down.vh-m-wobble { animation-name: vhDown, vhMWobble; }
.vh-anim-down.vh-m-tilt { animation-name: vhDown, vhMTilt; }
.vh-anim-start.vh-m-float { animation-name: vhStart, vhMFloat; }
.vh-anim-start.vh-m-sway { animation-name: vhStart, vhMSway; }
.vh-anim-start.vh-m-pulse { animation-name: vhStart, vhMPulse; }
.vh-anim-start.vh-m-breathe { animation-name: vhStart, vhMBreathe; }
.vh-anim-start.vh-m-spin { animation-name: vhStart, vhMSpin; }
.vh-anim-start.vh-m-wobble { animation-name: vhStart, vhMWobble; }
.vh-anim-start.vh-m-tilt { animation-name: vhStart, vhMTilt; }
.vh-anim-end.vh-m-float { animation-name: vhEnd, vhMFloat; }
.vh-anim-end.vh-m-sway { animation-name: vhEnd, vhMSway; }
.vh-anim-end.vh-m-pulse { animation-name: vhEnd, vhMPulse; }
.vh-anim-end.vh-m-breathe { animation-name: vhEnd, vhMBreathe; }
.vh-anim-end.vh-m-spin { animation-name: vhEnd, vhMSpin; }
.vh-anim-end.vh-m-wobble { animation-name: vhEnd, vhMWobble; }
.vh-anim-end.vh-m-tilt { animation-name: vhEnd, vhMTilt; }
.vh-anim-zoom.vh-m-float { animation-name: vhZoom, vhMFloat; }
.vh-anim-zoom.vh-m-sway { animation-name: vhZoom, vhMSway; }
.vh-anim-zoom.vh-m-pulse { animation-name: vhZoom, vhMPulse; }
.vh-anim-zoom.vh-m-breathe { animation-name: vhZoom, vhMBreathe; }
.vh-anim-zoom.vh-m-spin { animation-name: vhZoom, vhMSpin; }
.vh-anim-zoom.vh-m-wobble { animation-name: vhZoom, vhMWobble; }
.vh-anim-zoom.vh-m-tilt { animation-name: vhZoom, vhMTilt; }
.vh-anim-flip.vh-m-float { animation-name: vhFlip, vhMFloat; }
.vh-anim-flip.vh-m-sway { animation-name: vhFlip, vhMSway; }
.vh-anim-flip.vh-m-pulse { animation-name: vhFlip, vhMPulse; }
.vh-anim-flip.vh-m-breathe { animation-name: vhFlip, vhMBreathe; }
.vh-anim-flip.vh-m-spin { animation-name: vhFlip, vhMSpin; }
.vh-anim-flip.vh-m-wobble { animation-name: vhFlip, vhMWobble; }
.vh-anim-flip.vh-m-tilt { animation-name: vhFlip, vhMTilt; }
.vh-anim-bounce.vh-m-float { animation-name: vhBounce, vhMFloat; }
.vh-anim-bounce.vh-m-sway { animation-name: vhBounce, vhMSway; }
.vh-anim-bounce.vh-m-pulse { animation-name: vhBounce, vhMPulse; }
.vh-anim-bounce.vh-m-breathe { animation-name: vhBounce, vhMBreathe; }
.vh-anim-bounce.vh-m-spin { animation-name: vhBounce, vhMSpin; }
.vh-anim-bounce.vh-m-wobble { animation-name: vhBounce, vhMWobble; }
.vh-anim-bounce.vh-m-tilt { animation-name: vhBounce, vhMTilt; }

.vh-m-shine {
  position: relative;
  overflow: hidden;
}
.vh-m-shine::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 35%,
              rgba(255, 255, 255, .38) 50%, transparent 65%);
  animation: vhMShine 3.5s ease-in-out infinite;
}

@keyframes vhMFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes vhMSway {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(14px); }
}
@keyframes vhMPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes vhMBreathe {
  0%, 100% { opacity: .78; transform: scale(.99); }
  50%      { opacity: 1;   transform: scale(1.02); }
}
@keyframes vhMSpin { to { transform: rotate(360deg); } }
@keyframes vhMWobble {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-2.5deg); }
  75%      { transform: rotate(2.5deg); }
}
@keyframes vhMTilt {
  0%, 100% { transform: perspective(600px) rotateY(0); }
  50%      { transform: perspective(600px) rotateY(9deg); }
}
@keyframes vhMShine {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .vh-motion, .vh-m-shine::before { animation: none !important; }
}

/* ==========================================================================
   جلوه‌های متن
   ========================================================================== */
.vh-tx-gradient {
  background-image: linear-gradient(
    var(--vh-tx-angle, 135deg),
    var(--vh-tx-c1, #fff), var(--vh-tx-c2, #86EFAC));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.vh-tx-outline {
  color: transparent !important;
  -webkit-text-stroke: 1.5px var(--vh-tx-c1, #fff);
  text-stroke: 1.5px var(--vh-tx-c1, #fff);
}

.vh-tx-glow {
  text-shadow: 0 0 10px var(--vh-tx-c1, #fff),
               0 0 28px var(--vh-tx-c2, rgba(134, 239, 172, .7));
}

.vh-tx-emboss {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45),
               0 -1px 0 rgba(0, 0, 0, .35);
}

/*
  اندازهٔ خودکار — کادر به محتوا می‌چسبد.

  `width: auto` روی عنصرِ مطلق یعنی «تا لبهٔ مقابل کشیده شو»، پس
  `fit-content` لازم است تا واقعاً به محتوا بچسبد.
*/
.vh-autosize {
  width: fit-content !important;
  height: fit-content !important;
  max-width: 92%;
}

/*
  متن گرادیانی روی کادرِ گرادیان‌دار محو می‌شود، چون هر دو
  `background-image` می‌خواهند. متن به یک `<span>` درونی می‌رود.
*/
.vh-tx-gradient > span,
.vh-tx-gradient {
  background-image: linear-gradient(
    var(--vh-tx-angle, 135deg),
    var(--vh-tx-c1, #fff), var(--vh-tx-c2, #86EFAC));
}

/* لینک کل بنر — زیر لایه‌ها می‌نشیند تا دکمه‌ها اولویت داشته باشند */
.vh-slide-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

/* ==========================================================================
   منوی کناری — نشانهٔ صفحهٔ جاری
   --------------------------------------------------------------------------
   `.current` قرارداد جنگو است (`#nav-sidebar .current`) و کنار
   `.on` می‌آید تا هر دو سبک پشتیبانی شود.
   ========================================================================== */
.profile-nav { scroll-behavior: smooth; }

.profile-nav a.on,
.profile-nav a.current,
.profile-nav a[aria-current="page"] {
  position: relative;
  font-weight: 800;
}

/*
  نوار کنارهٔ سبز روی مورد جاری — در RTL سمت راست می‌نشیند و در
  LTR سمت چپ، چون `inline-start` با جهت سند می‌چرخد.
*/
.profile-nav a.on::before,
.profile-nav a.current::before,
.profile-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--green);
}

/* منوی کناری اسکرول‌شدنی بماند تا مورد جاری قابل رساندن باشد */
.profile-side {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: thin;
}

@media (max-width: 900px) {
  /*
    فقط حالت بسته. سقف ارتفاع دسکتاپ نباید روی کشو اثر بگذارد —
    کشو خودش تمام‌ارتفاع است و اسکرول داخلی دارد.
  */
  .profile-side:not(.open) { max-height: none; overflow: visible; }
}

/* ==========================================================================
   پنل ترجمه‌ها
   ========================================================================== */
.tr-filter {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.tr-filter select,
.tr-filter input {
  font: inherit; font-size: .82rem;
  padding: 8px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink);
}
.tr-filter input[type="search"] { flex: 1; min-width: 180px; }

.tr-list { display: flex; flex-direction: column; gap: 10px; }

.tr-row {
  padding: 14px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s ease;
}
.tr-row:hover { border-color: var(--green); }
.tr-row.is-locked { background: var(--bg-subtle); }

.tr-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: .72rem;
}
.tr-lang {
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
  font-weight: 800; text-transform: uppercase;
}
.tr-ctx { color: var(--slate); font-family: monospace; }
.tr-hits { color: var(--slate); }

.tr-origin {
  padding: 2px 9px; border-radius: var(--r-full);
  font-weight: 700; margin-inline-start: auto;
}
.tr-o-auto { background: var(--info-bg); color: var(--info-text); }
.tr-o-human { background: var(--green-100); color: var(--green-text-soft); }
.tr-o-glossary { background: var(--warn-bg); color: var(--warn-text); }

.tr-src {
  font-size: .92rem; font-weight: 700; line-height: 1.9;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}

.tr-edit { display: flex; gap: 8px; align-items: flex-start; }
.tr-edit textarea {
  flex: 1; font: inherit; font-size: .86rem; line-height: 1.9;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); resize: vertical; min-height: 44px;
}
.tr-edit textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100);
}
.tr-edit textarea[readonly] { background: var(--bg-subtle); }

.tr-fixed {
  flex: 1; padding: 9px 12px; font-size: .86rem;
  border-radius: 10px; background: var(--bg-subtle);
}

.tr-ops { display: flex; gap: 4px; }
.tr-ops .btn { min-width: 38px; }

@media (max-width: 640px) {
  .tr-edit { flex-direction: column; }
  .tr-ops { align-self: stretch; }
  .tr-ops .btn { flex: 1; }
}

/* ---------- صفحه‌بندی ---------- */
.pg {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 18px;
}
.pg-btn {
  padding: 8px 16px; border-radius: var(--r-full);
  font-size: .8rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); text-decoration: none;
  transition: background .15s ease;
}
.pg-btn:hover { background: var(--green-100); border-color: var(--green); }
.pg-btn.is-off { opacity: .4; pointer-events: none; }
.pg-now { font-size: .78rem; color: var(--slate); font-weight: 700; }

/* ==========================================================================
   پرداخت چندارزی
   --------------------------------------------------------------------------
   سبدی که چند ارز دارد، هر گروه را جدا نشان می‌دهد تا کاربر ببیند
   چه چیزی با چه درگاهی پرداخت می‌شود.
   ========================================================================== */
.pay-groups { margin-block: 14px; }

.pay-title {
  display: block; font-size: .88rem; font-weight: 800;
  margin-bottom: 6px;
}

.pay-group {
  margin-bottom: 10px; padding: 12px 14px;
  border-radius: var(--r);
  background: var(--bg-subtle); border: 1px solid var(--line);
}

.pay-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px dashed var(--line);
}

.pay-cur {
  padding: 3px 12px; border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
  font-size: .76rem; font-weight: 800;
}

.pay-methods { display: flex; flex-direction: column; gap: 6px; }

.pay-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .84rem;
  transition: border-color .15s ease, background .15s ease;
}
.pay-opt:hover { border-color: var(--green); background: var(--green-100); }
.pay-opt input { cursor: pointer; }
.pay-opt small { color: var(--slate); font-size: .74rem; }
.pay-opt .pay-fee { color: var(--warn-text); font-weight: 700; }

/* درگاه ترکیبی — همهٔ ارزها را یک‌جا می‌گیرد */
.pay-combined {
  margin-top: 12px; padding: 12px 14px;
  border-radius: var(--r);
  background: var(--info-bg); border: 1px solid var(--line);
}
.pay-combined > b {
  display: block; font-size: .84rem; margin-bottom: 8px;
}

.pay-single { margin-block: 14px; }

/* ارز بدون درگاه — خرید بسته است */
.pay-blocked ul {
  margin: 8px 0 0; padding-inline-start: 18px;
  font-size: .8rem; line-height: 2;
}

@media (max-width: 640px) {
  .pay-group-head { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   کالا و خدمات — نشان نوع
   ========================================================================== */
.pf-add-pair { display: inline-flex; gap: 8px; flex-wrap: wrap; }

.pf-kind-badge {
  display: inline-block; margin-inline-start: 10px;
  padding: 3px 14px; border-radius: var(--r-full);
  font-size: .74rem; font-weight: 800;
  background: var(--green-100); color: var(--green-text-soft);
  vertical-align: middle;
}
.pf-kind-badge.is-service {
  background: var(--info-bg); color: var(--info-text);
}

@media (max-width: 560px) {
  .pf-add-pair { width: 100%; }
  .pf-add-pair .btn { flex: 1; }
}

/* ==========================================================================
   صف بازبینی نظرات
   ========================================================================== */
.rq-list { display: flex; flex-direction: column; gap: 10px; }

.rq-row {
  padding: 14px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  transition: opacity .25s ease, border-color .15s ease;
}
.rq-row.is-flagged { border-color: var(--warn); }
.rq-row.is-done { opacity: .4; pointer-events: none; }

.rq-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: .78rem;
}
.rq-product { font-weight: 800; text-decoration: none; }
.rq-stars { color: var(--warn-text); letter-spacing: 1px; }

.rq-verified {
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
  font-weight: 700; font-size: .72rem;
}
.rq-unverified {
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
  font-size: .72rem;
}
.rq-when { margin-inline-start: auto; color: var(--slate); }

/* واژهٔ گزارشی — باید فوری دیده شود */
.rq-flag {
  margin-bottom: 8px; padding: 7px 12px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn-text);
  font-size: .78rem; font-weight: 700;
}

.rq-title { display: block; font-size: .9rem; margin-bottom: 4px; }
.rq-body {
  margin: 0 0 10px; font-size: .86rem; line-height: 2;
  white-space: pre-wrap;
}

.rq-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: .78rem;
}
.rq-author { color: var(--slate); }
.rq-ops { display: flex; gap: 6px; }

.rq-state { font-weight: 700; }
.rq-state-approved { color: var(--green-text-soft); }
.rq-state-rejected { color: var(--danger-text); }

.rv-tab-warn.on { background: var(--warn-bg); color: var(--warn-text); }

@media (max-width: 560px) {
  .rq-foot { flex-direction: column; align-items: stretch; }
  .rq-ops .btn { flex: 1; }
}

/* ==========================================================================
   پالت رنگی دسته‌ها
   --------------------------------------------------------------------------
   انتخابی است نه آزاد: انتخابگر رنگ به ادمین یعنی ترکیب‌های
   ناخوانا. این نُه گزینه با پالت سایت هماهنگ‌اند و کنتراست هر
   کدام سنجیده شده.

   هر کلاس سه متغیر می‌دهد که کارت، نشان و حاشیه از آن‌ها
   می‌خوانند — پس افزودن رنگ تازه فقط یک بلوک است.
   ========================================================================== */
.pal-blue {
  --pal: #0284C7; --pal-soft: #E0F2FE; --pal-text: #075985;
}
.pal-purple {
  --pal: #7C3AED; --pal-soft: #EDE9FE; --pal-text: #5B21B6;
}
.pal-orange {
  --pal: #EA580C; --pal-soft: #FFEDD5; --pal-text: #9A3412;
}
.pal-red {
  --pal: #DC2626; --pal-soft: #FEE2E2; --pal-text: #991B1B;
}
.pal-teal {
  --pal: #0D9488; --pal-soft: #CCFBF1; --pal-text: #115E59;
}
.pal-pink {
  --pal: #DB2777; --pal-soft: #FCE7F3; --pal-text: #9D174D;
}
.pal-amber {
  --pal: #D97706; --pal-soft: #FEF3C7; --pal-text: #92400E;
}
.pal-slate {
  --pal: #475569; --pal-soft: #F1F5F9; --pal-text: #1E293B;
}

/*
  پیش‌فرض: سبز سایت.

  ⚠️ باگ رفع‌شده: پالت رنگی دسته‌ها اصلاً کار نمی‌کرد.

  انتخابگر قبلی `[class*="pal-"]` بود که خودِ `.pal-blue` و
  بقیه را هم می‌گرفت، هم‌وزنشان بود و چون پایین‌تر آمده بود
  بر آن‌ها غالب می‌شد. آن‌وقت `--pal: var(--pal, …)` روی همان
  عنصر یعنی ارجاع به خودش — و متغیرِ خودارجاع طبق استاندارد
  **بی‌اعتبار** می‌شود. نتیجهٔ عملی: هر هشت پالت به سبز
  پیش‌فرض می‌افتادند و رنگ دسته‌ها هیچ‌وقت دیده نمی‌شد.

  حالا فقط `.pal-default` می‌ماند که تعریف دیگری ندارد. بقیهٔ
  مصرف‌کننده‌ها هم `var(--pal, …)` با پشتیبانِ سبز می‌نویسند،
  پس دسته‌ای که رنگ ندارد باز هم سبز می‌ماند.
*/
.pal-default {
  --pal: var(--green);
  --pal-soft: var(--green-100);
  --pal-text: var(--green-text-soft);
}

/*
  ---- همان پالت‌ها در تم تیره ----

  ⚠️ رنگ‌های بالا فقط برای تم روشن ساخته شده بودند: `--pal-soft`
  تقریباً سفید است و `--pal-text` خیلی تیره. روی پس‌زمینهٔ تیره،
  اولی کور می‌کند و دومی خوانده نمی‌شود.

  به‌جای بازنویسی دستیِ هشت پالت، هر دو از خودِ `--pal` مشتق
  می‌شوند: تیره‌کردنش می‌دهد سطح، روشن‌کردنش می‌دهد متن. پس
  اگر روزی پالت تازه‌ای اضافه شود، تم تیره‌اش خودبه‌خود درست
  است.

  ⚠️ `--pal` عمداً دست‌نخورده می‌ماند — رنگ برندِ دسته است.
*/
[data-theme="dark"] .pal-blue,
[data-theme="dark"] .pal-purple,
[data-theme="dark"] .pal-orange,
[data-theme="dark"] .pal-red,
[data-theme="dark"] .pal-teal,
[data-theme="dark"] .pal-pink,
[data-theme="dark"] .pal-amber,
[data-theme="dark"] .pal-slate,
[data-theme="dark"] .pal-default {
  --pal-soft: color-mix(in srgb, var(--pal) 20%, #0E1614);
  --pal-text: color-mix(in srgb, var(--pal) 45%, #FFFFFF);
}

/* ---- کاربردها ---- */
.cat-card { border-top: 3px solid var(--pal, var(--green)); }

.cat-chip {
  display: inline-block; padding: 3px 12px;
  border-radius: var(--r-full); font-size: .74rem; font-weight: 800;
  background: var(--pal-soft, var(--green-100));
  color: var(--pal-text, var(--green-text-soft));
}

.cat-icon-box {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--pal-soft, var(--green-100));
  color: var(--pal, var(--green));
  font-size: 1.3rem;
}

.cat-bar { height: 3px; border-radius: 3px;
           background: var(--pal, var(--green)); }


/* ---------- زیرمجموعه در منوی موبایل ---------- */
.msheet-cats { gap: 2px; }

.msheet-sub {
  border-radius: 10px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.msheet-sub[open] {
  background: var(--pal-soft, var(--green-100));
}

.msheet-sub > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 11px 13px; cursor: pointer;
  font-size: .86rem; font-weight: 700;
  list-style: none;
}
.msheet-sub > summary::-webkit-details-marker { display: none; }
.msheet-sub > summary::after {
  content: "▾"; color: var(--slate);
  transition: transform .2s ease;
}
.msheet-sub[open] > summary::after { transform: rotate(180deg); }

.msheet-sub-count {
  font-style: normal; font-size: .7rem; font-weight: 800;
  padding: 1px 8px; border-radius: var(--r-full);
  background: var(--surface); color: var(--slate);
  margin-inline-start: auto; margin-inline-end: 6px;
}

.msheet-sub-list {
  display: flex; flex-direction: column;
  padding: 4px 8px 10px;
}
.msheet-sub-list a {
  padding: 9px 14px; border-radius: 8px;
  font-size: .82rem; color: var(--ink-soft); text-decoration: none;
}
.msheet-sub-list a:active { background: var(--surface); }

.msheet-sub-all {
  font-weight: 800;
  color: var(--pal-text, var(--green-text-soft)) !important;
}

.msheet-all { font-weight: 800; }

/* ==========================================================================
   فرم کالا و خدمات — بخش‌های جمع‌شونده
   --------------------------------------------------------------------------
   فرم بلند است و نمایش همه‌چیز یک‌جا روی موبایل غیرقابل استفاده
   می‌شود. دو بخش ضروری باز می‌مانند، بقیه با کلیک.

   کلاس‌های آپلود تصویر (`up-box`) دست‌نخورده‌اند.
   ========================================================================== */
.pform-sec {
  margin-bottom: 12px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .15s ease;
}
.pform-sec[open] { border-color: var(--green-300); }

.pform-sec > summary.pform-h {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; cursor: pointer;
  margin: 0; font-size: .92rem; font-weight: 800;
  background: var(--bg-subtle);
  list-style: none;
  user-select: none;
  transition: background .15s ease;
}
.pform-sec > summary::-webkit-details-marker { display: none; }
.pform-sec > summary:hover { background: var(--green-100); }

.pform-h-ico {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--surface);
  font-size: 1rem;
}
.pform-h-txt { flex: 1; }

/* نشانهٔ باز/بسته */
.pform-h-mark {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--slate);
  transition: transform .2s ease;
}
.pform-h-mark::before { content: "▾"; }
.pform-sec[open] .pform-h-mark { transform: rotate(180deg); }

.pform-body { padding: 16px; }

/* بخش باز، مرز نرم بین سرصفحه و بدنه */
.pform-sec[open] > summary { border-bottom: 1px solid var(--line); }

/* ---- کلید توافقی ---- */
.pform-toggle {
  display: flex !important; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--info-bg); border: 1px solid var(--line);
  cursor: pointer;
}
.pform-toggle input { margin-top: 3px; cursor: pointer; }
.pform-toggle b { display: block; font-size: .86rem; }
.pform-toggle small {
  display: block; color: var(--slate); font-size: .76rem;
  margin-top: 2px;
}

/* قیمت غیرفعال وقتی توافقی است */
[data-price-field].is-off { opacity: .45; pointer-events: none; }

/* ستارهٔ فیلد الزامی */
.field .req {
  color: var(--danger-text); font-style: normal;
  margin-inline-start: 3px;
}

/* ---- موبایل ---- */
@media (max-width: 640px) {
  .pform-sec > summary.pform-h {
    padding: 12px 13px; font-size: .86rem;
  }
  .pform-h-ico { width: 28px; height: 28px; font-size: .9rem; }
  .pform-body { padding: 13px; }
}

/* ---------- مجوز تسویهٔ ارزی ---------- */
.pform-permit .pform-toggle {
  background: var(--warn-bg);
  border-color: var(--warn);
}
.pform-permit-warn {
  color: var(--warn-text) !important;
  font-weight: 600;
  margin-top: 4px;
}

/* ==========================================================================
   پروندهٔ رفتاری کاربر
   ========================================================================== */
.bh-list { display: flex; flex-direction: column; gap: 8px; }

.bh-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease;
}
.bh-row:hover { border-color: var(--green); }

.bh-ava {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green-100); color: var(--green-text-soft);
  font-weight: 800;
}

.bh-id { flex: 1; }
.bh-id b { display: block; font-size: .88rem; }
.bh-id small { color: var(--slate); font-size: .76rem; }

.bh-stat { text-align: center; min-width: 56px; }
.bh-stat b { display: block; font-size: .95rem; }
.bh-stat small { color: var(--slate); font-size: .7rem; }

.bh-go { color: var(--slate); font-size: 1.1rem; }

/* ---- جمع‌بندی ---- */
.bh-summary {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px; margin-bottom: 18px;
  border-radius: var(--r);
  background: var(--info-bg); border: 1px solid var(--line);
}
.bh-summary-ico { font-size: 1.5rem; line-height: 1; }
.bh-summary p {
  margin: 0; font-size: .88rem; line-height: 2;
}

.bh-h {
  font-size: .95rem; margin: 20px 0 10px;
}

/* ---- نوار علاقه ---- */
.bh-bars { display: flex; flex-direction: column; gap: 12px; }

.bh-bar-row {
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}

.bh-bar-head {
  display: flex; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; font-size: .86rem; font-weight: 700;
}

.bh-bar-track {
  height: 8px; border-radius: 8px;
  background: var(--bg-subtle); overflow: hidden;
}
.bh-bar-fill {
  display: block; height: 100%;
  background: var(--pal, var(--green));
  border-radius: 8px;
  transition: width .4s ease;
}

.bh-bar-meta {
  display: block; margin-top: 6px;
  color: var(--slate); font-size: .74rem;
}

/* ---- سفارش‌ها ---- */
.bh-orders { display: flex; flex-direction: column; gap: 6px; }
.bh-order {
  display: flex; gap: 12px; align-items: center;
  padding: 9px 14px; border-radius: 10px;
  background: var(--bg-subtle); font-size: .82rem;
}
.bh-order b { flex: 1; }
.bh-order-state { color: var(--slate); }

@media (max-width: 560px) {
  .bh-row { flex-wrap: wrap; }
  .bh-id { flex: 1 1 100%; order: -1; }
}

/* ---------- بررسی کالای ویزیتوری: موبایل ---------- */
@media (max-width: 560px) {
  .rv-card { padding: 13px; }

  /* دکمه‌ها تمام‌عرض تا هدف لمس بزرگ بماند */
  .rv-act-main { flex-direction: column; align-items: stretch; }
  .rv-act-main .btn,
  .rv-act-main form,
  .rv-act-main form .btn { width: 100%; }

  .rv-reject-box .btn { align-self: stretch; width: 100%; }

  /* ارقام قیمت در عرض کم نباید ردیف را بشکنند */
  .rv-money { gap: 6px 12px; }
}

/* ==========================================================================
   کیف پول — بازطراحی
   --------------------------------------------------------------------------
   قبلاً هر سه بخش (شارژ، برداشت، تراکنش‌ها) پشت سر هم و تمام‌عرض
   بودند؛ فرم‌ها `max-width: 520px` داشتند و در صفحهٔ پهن، سمت دیگر
   خالی می‌ماند. حالا دو تب: عملیات مالی، و تاریخچه.
   ========================================================================== */

/* ---------- کارت موجودی ---------- */
.wallet-hero {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, #0f3d2e, #00824A);
  color: #fff; border-radius: 18px; padding: 22px 24px;
}

.wh-balance span { font-size: .8rem; opacity: .85; display: block; }
.wh-balance b { font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 900; }
.wh-balance small { font-size: .9rem; font-weight: 700; }

/* کل بلوک باشگاه یک لینک است، نه فقط متن کوچکش */
.wh-club {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .13);
  color: #eafff5; text-decoration: none;
  transition: background .15s ease;
}
.wh-club:hover { background: rgba(255, 255, 255, .22); }
.wh-club-ic { font-size: 1.5rem; line-height: 1; }
.wh-club-txt { display: flex; flex-direction: column; line-height: 1.35; }
.wh-club-txt small { font-size: .7rem; opacity: .8; }
.wh-club-txt b { font-size: .88rem; font-weight: 800; }
.wh-club-go { font-size: 1rem; opacity: .7; }

/* ---------- تب‌ها ---------- */
/* رادیوها فقط حامل وضعیت‌اند؛ دیده نمی‌شوند ولی حذف هم نمی‌شوند
   (display:none تمرکز کیبورد را می‌برد). */
.wtab-in {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.wtabs { margin-top: 18px; }

.wtabs-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 5px; margin-bottom: 16px;
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
}

.wtab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--r-full);
  font-size: .86rem; font-weight: 700; color: var(--slate);
  cursor: pointer; user-select: none;
  transition: background .15s ease, color .15s ease;
}
.wtab:hover { color: var(--ink); }
.wtab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.wtab-n {
  padding: 1px 8px; border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
  font-size: .72rem; font-weight: 800;
}

/* پنل‌ها پیش‌فرض پنهان؛ `:checked ~` تب متناظر را باز می‌کند */
.wtab-panel { display: none; }

#wtab-money:checked ~ .wtabs-bar label[for="wtab-money"],
#wtab-tx:checked    ~ .wtabs-bar label[for="wtab-tx"] {
  background: var(--surface);
  color: var(--green-text-soft);
  box-shadow: var(--sh-sm, 0 1px 3px rgba(0, 0, 0, .08));
}

#wtab-money:checked ~ .wtab-money { display: block; }
#wtab-tx:checked    ~ .wtab-tx    { display: block; }

/* ---------- کارت‌های عملیات ---------- */
.wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

.wcard {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 20px;
  border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line);
}

.wcard-h {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: .98rem; font-weight: 800;
}
.wcard-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: var(--green-100); font-size: 1rem;
}

/* دکمهٔ اصلی هر کارت تمام‌عرض — هدف لمس بزرگ و قابل پیش‌بینی */
.wcard-go { width: 100%; justify-content: center; }

.wcard-note {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-subtle); color: var(--slate);
  font-size: .76rem; line-height: 1.9;
}

/* دکمه‌های مبلغ آماده */
.wc-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.wc-quick {
  flex: 1 1 auto; min-width: 92px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--green-100); color: var(--green-text-soft);
  font-weight: 800; font-size: .85rem;
  transition: background .15s ease;
}
.wc-quick:hover { background: var(--green-300, var(--green-100)); }

/* ---------- تراکنش‌ها ---------- */
.tx-row {
  display: grid;
  grid-template-columns: 104px 1fr auto 150px;
  gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .85rem;
}
.tx-desc { min-width: 0; overflow-wrap: anywhere; }

/* ---------- موبایل ---------- */
@media (max-width: 700px) {
  .wallet-hero {
    flex-direction: column; align-items: stretch;
    gap: 14px; padding: 18px;
  }
  .wh-club { justify-content: space-between; }

  .wtabs-bar { border-radius: var(--r); }
  .wtab { flex: 1 1 auto; justify-content: center; padding: 10px 12px; }

  .wcard { padding: 16px; }

  /*
    تراکنش در موبایل به دو ردیف می‌شکند:
      نوع + مبلغ   /   شرح   /   تاریخ
    گرید چهارستونی در ۳۶۰ پیکسل هر ستون را به ~۴۰px می‌رساند.
  */
  .tx-row {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
  }
  .tx-desc  { grid-column: 1 / -1; order: 3; color: var(--slate); font-size: .8rem; }
  .tx-kind  { order: 1; }
  .tx-amount{ order: 2; text-align: end; }
  .tx-date  { grid-column: 1 / -1; order: 4; text-align: start; }
}

/* ==========================================================================
   فرم کالا/خدمت در پنل تأمین‌کننده  (?form=1)
   --------------------------------------------------------------------------
   سه ایراد ظاهری داشت:

   ۱) `.form-card` یک کارت با حاشیه و پدینگ است و داخلش چند
      `.pform-sec` که هرکدام باز هم کارت‌اند — کادر توی کادر، با دو
      لایه حاشیه و پدینگ. همان شلوغی‌ای که در تصویر دیده می‌شد.

   ۲) عرض بی‌حد: روی نمایشگر پهن، فیلد «عنوان» بیش از ۱۲۰۰ پیکسل
      کشیده می‌شد. خواندن و پرکردن فرم را سخت می‌کند.

   ۳) دکمهٔ ثبت ته یک فرم بسیار بلند بود؛ کاربر باید تا آخر اسکرول
      می‌کرد.
   ========================================================================== */

/* کارت بیرونی به یک ظرف ساده تبدیل می‌شود — کارت‌ها خودِ بخش‌ها هستند.

   عرض محدود نمی‌کنیم: ظرفِ پنل خودش عرض را مهار کرده و سقف گذاشتن
   اینجا فقط باعث می‌شد فرم به یک سمت بچسبد و نیمهٔ دیگر خالی بماند. */
.pf-form-wrap {
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* جدا از قاعدهٔ بالا — تا اگر `:has()` پشتیبانی نشود، آن یکی بماند */
form.form-card:has(> .pform-sec) {
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* بخش‌ها کمی از هم فاصله بگیرند */
form.form-card:has(> .pform-sec) > .pform-sec { margin-bottom: 14px; }

/* خطای فرم بالای همه، پررنگ */
form.form-card > .form-errors { margin-bottom: 14px; }

/* ---------- بدنهٔ بخش ---------- */
.pform-body { padding: 18px 16px; }

/* فاصلهٔ عمودی بین گروه‌های داخل یک بخش */
.pform-body > * + * { margin-top: 16px; }

/* گرید داخل بخش‌ها در عرض متوسط هم دوستونی بماند، در کم تک‌ستونی */
@media (max-width: 720px) {
  .pform-body { padding: 14px 13px; }
  .pform-sec > summary.pform-h { padding: 12px 13px; font-size: .88rem; }
  .pform-h-ico { width: 28px; height: 28px; font-size: .9rem; }
}

/* ---------- پابرگ فرم ---------- */
/*
  دکمهٔ ثبت به پایین پنجره می‌چسبد. فرم چند صد پیکسل ارتفاع دارد و
  بدون این، هر تغییر کوچکی یک اسکرول بلند تا ته لازم داشت.
*/
.pform-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 0; padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-subtle);
}

form.form-card:has(> .pform-sec) > .btn[type="submit"],
form.form-card:has(> .pform-sec) > button[type="submit"] {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  width: 100%;
  justify-content: center;
  margin-top: 14px;
  padding-block: 14px;
  font-size: .95rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

/* ---------- ردیف‌های پویا (پلکان قیمت / مشخصات) ---------- */
@media (max-width: 560px) {
  /*
    گرید `1fr 1fr 36px` در ۳۶۰ پیکسل هر ستون را به ~۱۴۰px می‌رساند و
    با پدینگ، متن داخل کادر جا نمی‌شود. دو ردیفه‌اش می‌کنیم.
  */
  .dyn-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-inline-end: 44px;
    position: relative;
  }
  .dyn-del {
    position: absolute;
    inset-inline-end: 0; top: 0;
    width: 36px; height: 100%;
  }
}

/* ==========================================================================
   فرم کالا — عرض و چیدمان ستون‌ها
   --------------------------------------------------------------------------
   `.form-grid` پایه دوستونیِ ثابت است (`1fr 1fr`). در فرم کالا که
   داخل پنل با منوی کناری ۲۸۰ پیکسلی نشسته، این یعنی روی نمایشگر پهن
   دو ستون خیلی کشیده و روی تبلت دو ستون خیلی تنگ.

   `auto-fit` با کف ۲۴۰ پیکسل، تعداد ستون را با فضای واقعی تطبیق
   می‌دهد: سه ستون روی نمایشگر پهن، دو ستون روی تبلت، یک ستون روی
   موبایل — بدون هیچ بریک‌پوینتی.
   ========================================================================== */
/*
  هدف: هر سطر تا انتها پر شود — نه اینکه یک فیلد تنها نصف سطر را
  بگیرد و نیمهٔ دیگر خالی بماند.

  چرا نه `grid-template-columns: repeat(2, 1fr)`؟
    دو ستون درست می‌دهد، ولی فیلد سومِ تنها در ردیف دوم نصف عرض
    می‌ماند و کنارش خالی است. همان چیزی که شکایت داشتید.

  چرا نه `repeat(auto-fit, minmax(240px, 1fr))`؟
    `auto-fit` یک ستون را فقط وقتی جمع می‌کند که در همهٔ ردیف‌ها خالی
    باشد؛ فیلدهای تمام‌عرضِ این فرم همهٔ ستون‌ها را می‌پوشانند، پس
    هیچ ستونی جمع نمی‌شد.

  راه‌حل: فلکس با پایهٔ **نصف عرض**.
    - دو فیلد در هر سطر، دقیقاً مثل قبل
    - فیلد تنهای آخر با `flex-grow` تا انتهای سطر کش می‌آید
    - در عرض کم، `min-width` آن را به یک ستون می‌شکند

  نکتهٔ مهم دربارهٔ ترتیب: قاعدهٔ تمام‌عرض **بعد** از قاعدهٔ پایه و با
  مشخصیت بالاتر می‌آید. در نسخهٔ قبل `div.field` (۰،۳،۱) از
  `.field-full` (۰،۳،۰) قوی‌تر بود و کارت‌های تمام‌عرض را باریک
  می‌کرد.
*/
.pform-body > .form-grid,
.pform-body .form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.pform-body .form-grid > .field,
.pform-body .form-grid > label.field,
.pform-body .form-grid > div.field {
  flex: 1 1 calc(50% - 8px);   /* 8px = نصف gap */
  min-width: 240px;
  max-width: 100%;
}

/*
  تمام‌عرض‌ها — مشخصیت عمداً بالاتر از قاعدهٔ بالا.

  ⚠️ هیچ `:has()`ای در این فهرست نیست، و این عمدی است.

  `:has()` بخشنده نیست: اگر مرورگر پشتیبانی‌اش نکند، **کل قاعده** دور
  ریخته می‌شود، نه فقط همان یک سلکتور. نسخهٔ قبلی `:has()` را با
  کلاس‌های اصلی در یک فهرست گذاشته بود؛ روی مرورگر بدون پشتیبانی
  هیچ فیلدی تمام‌عرض نمی‌شد و همه در یک سطر می‌ریختند.

  `flex-shrink: 0` هم لازم است: با `1 1 100%` آیتم اجازه داشت کوچک
  شود و کنار بقیه در همان سطر بنشیند — همان کادر «اجازهٔ تسویه با
  ارزهای دیگر» که به یک ستون باریک تبدیل شده بود.
*/
.pform-body .form-grid > div.field.field-full,
.pform-body .form-grid > label.field.field-full,
.pform-body .form-grid > div.field.supply-field,
.pform-body .form-grid > div.field.pform-permit,
.pform-body .form-grid > .field[style*="grid-column"] {
  flex: 1 0 100%;
  min-width: 100%;
}

/*
  این‌ها جدا هستند تا اگر `:has()` پشتیبانی نشود فقط همین قاعده بیفتد
  و قاعدهٔ بالا سالم بماند.

  در عمل هم لازم نیستند: توضیحات و تصویر و کلیدها همگی در قالب کلاس
  `field-full` دارند. اینجا فقط برای اطمینان از فرم‌های آینده‌اند.
*/
.pform-body .form-grid > .field:has(> textarea),
.pform-body .form-grid > .field:has(> .pform-toggle),
.pform-body .form-grid > .field:has(> .up-label) {
  flex: 1 0 100%;
  min-width: 100%;
}

/* ==========================================================================
   کلید توافقی — «اجازهٔ تسویه با ارزهای دیگر» و هم‌خانواده‌هایش
   --------------------------------------------------------------------------
   قبلاً یک چک‌باکس ۱۳ پیکسلی کنار دو پاراگراف توضیح بود: هدف لمس
   کوچک، و در حالت روشن هیچ نشانهٔ بصری‌ای نداشت.

   حالا یک کلید کشویی واقعی با حالت روشن دیده‌شدنی.
   ========================================================================== */
.pform-toggle {
  display: flex !important;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 14px;
  background: var(--info-bg);
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.pform-toggle:hover { border-color: var(--green-300, var(--green)); }

/*
  چک‌باکس اصلی پنهان نمی‌شود (تمرکز کیبورد لازم است)، فقط بی‌اندازه
  می‌شود و ظاهرش را از `::before` روی برادرش می‌گیرد.
*/
.pform-toggle > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 44px;
  height: 25px;
  margin: 1px 0 0;
  border-radius: 999px;
  background: var(--line-strong, #cbd5d1);
  border: 0;
  cursor: pointer;
  position: relative;
  transition: background .18s ease;
}

/* دستهٔ کلید */
.pform-toggle > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}

.pform-toggle > input[type="checkbox"]:checked {
  background: var(--green);
}

/*
  در راست‌چین دسته باید به چپ برود و در چپ‌چین به راست.
  `translateX` جهت را نمی‌فهمد، پس علامتش را از `direction` می‌گیریم.
*/
.pform-toggle > input[type="checkbox"]:checked::after {
  transform: translateX(19px);
}
[dir="rtl"] .pform-toggle > input[type="checkbox"]:checked::after {
  transform: translateX(-19px);
}

.pform-toggle > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.pform-toggle > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pform-toggle b {
  display: block;
  font-size: .89rem;
  font-weight: 800;
  line-height: 1.6;
}

.pform-toggle small {
  display: block;
  color: var(--slate);
  font-size: .77rem;
  line-height: 1.85;
  margin: 0;
}

/* ---- حالت هشداردار (اجازهٔ ارز) ---- */
.pform-permit .pform-toggle {
  background: var(--warn-bg);
  border-color: var(--warn);
}

/*
  هشدار فقط وقتی معنا دارد که کلید **خاموش** باشد — متنش دربارهٔ
  حالت خاموش است. با روشن‌شدن پنهانش می‌کنیم تا کاربر توضیحِ
  بی‌ربط نخواند.
*/
.pform-permit-warn {
  color: var(--warn-text) !important;
  font-weight: 600;
  margin-top: 5px !important;
  padding-top: 5px;
  border-top: 1px dashed var(--warn);
}

.pform-toggle > input[type="checkbox"]:checked ~ span .pform-permit-warn {
  display: none;
}

/* ---- موبایل ---- */
@media (max-width: 560px) {
  .pform-toggle { padding: 13px; gap: 11px; }
  .pform-toggle b { font-size: .85rem; }
  .pform-toggle small { font-size: .74rem; }
}

/* ==========================================================================
   فرم کالا — فاصله‌ها، گروه‌های دکمه‌ای، تاریخ و ساعت
   ========================================================================== */

/* ---------- گروه‌های انتخابی (ندارد/دارد، فوری/ساعت/روز) ---------- */
/*
  `.supply-opt` مقدار `flex: 1` دارد یعنی `flex-basis: 0` — پس دو
  گزینه‌ای‌ها هم مثل سه‌گزینه‌ای‌ها کل سطر را می‌گیرند، ولی چون
  `min-width: 90px` دارند در عرض کم می‌شکنند و زیر هم می‌افتند.
  پایه را ۰ نگه می‌داریم ولی کف را کمتر می‌کنیم تا دو تایی کنار هم بمانند.
*/
.opt-row,
.supply-picker,
.vis-policy {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.opt-row > .supply-opt,
.supply-picker > .supply-opt,
.vis-policy > .supply-opt {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 12px 14px;
}

/* برچسب بالای هر گروه از خودِ گروه فاصله بگیرد */
.field > span + .opt-row,
.field > span + .supply-picker,
.field > span + .vis-policy { margin-top: 8px; }

/* توضیح زیر گروه نباید بچسبد */
.opt-row + small,
.supply-picker + small,
.vis-policy + small,
.field > small {
  display: block;
  margin-top: 8px;
  line-height: 1.9;
  color: var(--slate);
}

/* ---------- تاریخ و ساعت ---------- */
/*
  ورودی `datetime-local` عرض ذاتی خودش را دارد و آیکن تقویم را داخل
  کادر می‌کشد. بدون ارتفاع و پدینگ هماهنگ با بقیهٔ فیلدها، کوتاه‌تر
  و بریده دیده می‌شد.
*/
/*
  ⚠️ `:not(.df-time)` حیاتی است.

  کادر ساعتِ ویجت تاریخ (`.df-time`) هم یک input[type=time] داخل
  `.form-grid` است. مشخصیت این قاعده (۰،۲،۱) از `.df-time` (۰،۱،۰)
  بیشتر است، پس بدون استثنا، `width: 100%` را به آن تحمیل می‌کرد،
  کادر ساعت تمام عرض را می‌گرفت و دکمهٔ تقویم کنارش تا نزدیک صفر
  جمع می‌شد.
*/
.field input[type="datetime-local"]:not(.df-time),
.field input[type="date"]:not(.df-time),
.field input[type="time"]:not(.df-time),
.form-grid input[type="datetime-local"]:not(.df-time),
.form-grid input[type="date"]:not(.df-time),
.form-grid input[type="time"]:not(.df-time) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 48px;
  padding: 0 13px;
  font: inherit;
  font-size: .86rem;
  line-height: normal;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  /* ارقام و ترتیب تاریخ همیشه چپ‌چین خوانده می‌شوند */
  direction: ltr;
  text-align: start;
}

.field input[type="datetime-local"]:focus,
.field input[type="date"]:focus,
.field input[type="time"]:focus { outline: none; border-color: var(--green); }

/* آیکن تقویم کروم — اندازه و فاصلهٔ درست، و کلیک‌پذیر بماند */
.field input[type="datetime-local"]:not(.df-time)::-webkit-calendar-picker-indicator,
.field input[type="date"]:not(.df-time)::-webkit-calendar-picker-indicator,
.field input[type="time"]:not(.df-time)::-webkit-calendar-picker-indicator {
  margin-inline-start: 6px;
  padding: 3px;
  cursor: pointer;
  opacity: .6;
}
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---------- بارگذاری فایل ---------- */
/* کادرهای «افزودن تصاویر / ویدیوها» هم‌عرض ستون خودشان بمانند */
.pform-body .up-label,
.pform-body .up-bar,
.pform-body .up-preview {
  width: 100%;
  box-sizing: border-box;
}

/* برچسب بالای کادر آپلود از خودش فاصله بگیرد */
.pform-body .field > span + .up-label { margin-top: 8px; }

/* راهنمای زیر کادر */
.pform-body .up-hint { display: block; margin-top: 8px; line-height: 1.9; }

/* ---------- ریتم عمودی داخل بخش ---------- */
.pform-body > * + * { margin-top: 18px; }
.pform-body .form-grid + .form-grid { margin-top: 18px; }

/* چک‌باکس «کالا فعال باشد» ته فرم نباید به کادر بالایی بچسبد */
.pform-foot { margin-top: 4px; }

/* ---------- موبایل ---------- */
@media (max-width: 560px) {
  /* در عرض کم، هر فیلد یک سطر کامل.
     `min-width` هم صفر می‌شود وگرنه کف ۲۴۰ پیکسلی روی صفحهٔ ۳۲۰
     پیکسلی باعث سرریز افقی می‌شد. */
  .pform-body .form-grid > .field,
  .pform-body .form-grid > label.field,
  .pform-body .form-grid > div.field {
    flex: 1 1 100%;
    min-width: 0;
  }

  .opt-row > .supply-opt,
  .supply-picker > .supply-opt,
  .vis-policy > .supply-opt {
    min-width: 0;
    padding: 11px 8px;
    font-size: .8rem;
  }
}

/* ==========================================================================
   فرم کالا — پابرگ مستقل، گروه‌های هم‌اندازه، تقویم
   ========================================================================== */

/* ---------- ۱) پابرگ مستقل: «کالا فعال باشد» + دکمهٔ ثبت ---------- */
/*
  این بلوک از داخل بخش گالری بیرون آمد. تا وقتی درون <details> بود،
  با بسته‌شدن آن بخش کاملاً ناپدید می‌شد و کاربر می‌توانست بدون
  دیدنش فرم را ثبت کند.
*/
.pform-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /*
    ⚠️ در دسکتاپ نمی‌شکند.

    تیک «کالا فعال باشد» یک سر و گروه دکمه‌ها سر دیگر؛ با
    `wrap`، گروه به خط بعد می‌افتاد و نوار دو ردیفهٔ نامرتب
    می‌شد. در موبایل (زیر ۵۶۰) خودش ستونی می‌شود.
  */
  flex-wrap: nowrap;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  /* به پایین پنجره می‌چسبد تا لازم نباشد تا ته فرم بلند اسکرول شود */
  position: sticky;
  bottom: 12px;
  z-index: 5;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}

.pform-active {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  /*
    ⚠️ در یک خط بماند.

    نوار دیگر نمی‌شکند (`nowrap`)، پس این برچسب زیر فشارِ
    گروه دکمه‌ها به دو خط می‌رفت: «کالا فعال / باشد».
  */
  flex: none;
  white-space: nowrap;
}

.pform-active input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--green);
  cursor: pointer;
}

/*
  ⚠️ گروه دکمه‌ها، نه دکمه‌های پراکنده.

  ظرف `pform-final` روی `space-between` است. وقتی دکمهٔ دومی
  («ذخیرهٔ پیش‌نویس») اضافه شد، هر سه عنصر — تیک، ثبت،
  پیش‌نویس — به سه گوشه پرت شدند با فاصله‌های بی‌معنی وسطشان.
  حالا تیک یک سر است و هر دو دکمه، کنار هم، سر دیگر.
*/
.pform-btns {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap;
  /*
    ⚠️ `min-width: 0` وگرنه گروه به خط بعد می‌افتد.

    یادداشتِ داخل گروه، عرضِ طبیعیِ گروه را به اندازهٔ کل
    جملهٔ بدون شکست بزرگ می‌کند؛ آن‌وقت گروه کنار تیک جا
    نمی‌شود و نوار دو ردیفه می‌شود با یک فاصلهٔ خالی وسط.
  */
  min-width: 0;
}

.pform-final .btn[type="submit"] {
  flex: 0 0 auto;
  justify-content: center;
  padding-block: 13px;
  font-size: .92rem;
}

/* ⚠️ فقط دکمهٔ اصلی عرض ثابت می‌گیرد.
   قاعدهٔ قبلی روی «هر دکمهٔ submit» بود و پیش‌نویس را هم
   ۱۹۰ پیکسل می‌کرد؛ دو دکمهٔ هم‌اندازه یعنی کاربر نمی‌فهمد
   کدام عمل اصلی است. */
.pform-final .btn-primary[type="submit"] { min-width: 190px; }

.pform-draft-btn { font-size: .86rem; padding-inline: 16px; }

/*
  ⚠️ یادداشت مدت، زیر همان دکمه‌ای که توضیحش می‌دهد.

  `flex-basis: 100%` آن را به خط بعدیِ **همین گروه** می‌برد،
  نه به یک ردیف تمام‌عرضِ جدا در نوار — که به هیچ‌چیز وصل
  نبود.
*/
.pform-draft-note {
  flex-basis: 100%;
  margin: 0;
  text-align: end;
  font-size: .72rem;
  line-height: 1.8;
  color: var(--slate);
}

/* قاعدهٔ چسبندگیِ نسخهٔ قبل روی دکمهٔ تنها دیگر لازم نیست.

   ⚠️ `relative` نه `static`: لایهٔ موجِ `.btn::before` با `inset: 0`
   مطلق است. با `static` آن لایه به جای خودِ دکمه، کل صفحه (۱۴۰۰×۹۰۰)
   را می‌پوشاند — نشانگر موس روی همهٔ فرم «دست» می‌شد و با هر حرکت
   بین دست و فلش عوض می‌شد، و کلیک روی فیلدها به دکمهٔ ذخیره می‌خورد. */
form.form-card > .btn[type="submit"] {
  position: relative;
  box-shadow: none;
}

@media (max-width: 560px) {
  .pform-final {
    flex-direction: column;
    align-items: stretch;
    padding: 13px;
  }
  .pform-btns { width: 100%; justify-content: stretch; }
  .pform-final .btn[type="submit"] { flex: 1 1 auto; width: 100%; min-width: 0; }
  .pform-draft-note { text-align: center; }
}

/* ---------- ۲) گروه‌های انتخابی هم‌اندازه ---------- */
/*
  `flex: 1 1 auto` عرض را از محتوا می‌گرفت، پس «آزاد برای همه (بدون
  مجوز)» پهن‌تر از «ندارد» می‌شد و دو ردیفِ زیر هم ناهم‌اندازه بودند.

  `flex-basis: 0` یعنی عرض فقط از سهم رشد می‌آید — همهٔ گزینه‌ها
  دقیقاً هم‌عرض، صرف‌نظر از طول متن. `min-width` فقط تعیین می‌کند
  کِی به سطر بعد بشکنند.
*/
.opt-row > .supply-opt,
.supply-picker > .supply-opt,
.vis-policy > .supply-opt {
  flex: 1 1 0;
  min-width: 130px;
  min-height: 46px;
  padding: 11px 12px;
  text-align: center;
}

/* هر سه گروه یک فاصله و یک ریتم داشته باشند */
.opt-row,
.supply-picker,
.vis-policy {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 560px) {
  .opt-row > .supply-opt,
  .supply-picker > .supply-opt,
  .vis-policy > .supply-opt {
    min-width: 96px;
    font-size: .78rem;
    padding: 10px 6px;
  }
}

/* ---------- ۳الف) پنجرهٔ تقویم بریده می‌شد ---------- */
/*
  `.pform-sec` مقدار `overflow: hidden` دارد تا گوشه‌های گردِ سرصفحه
  بیرون نزنند. ولی همان قاعده پنجرهٔ تقویم را هم که `position: absolute`
  است می‌برید — تقویم زیر لبهٔ بخش ناپدید می‌شد.

  راه‌حل: وقتی بخش باز است سرریز آزاد باشد؛ گوشه‌های گرد را خودِ
  سرصفحه با border-radius نگه می‌دارد.
*/
.pform-sec[open] { overflow: visible; }

.pform-sec[open] > summary.pform-h {
  border-radius: var(--r) var(--r) 0 0;
}

/* لنگر پنجره — بدون این، تقویم نسبت به کل صفحه جای می‌گیرد */
.df { position: relative; }

.df-pop {
  z-index: 60;
  max-width: calc(100vw - 24px);
}

/*
  اگر فیلد در نیمهٔ پایینی صفحه باشد، تقویم به‌جای پایین، بالای کادر
  باز می‌شود. کلاس را datefield.js می‌گذارد؛ بدون آن رفتار قبلی است.
*/
.df-pop.is-up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}

/* ---------- ۳ب) اندازهٔ کادر تاریخ و ساعت ---------- */
/*
  ارتفاع کادر باید با بقیهٔ فیلدهای فرم (۴۸px) یکی باشد. قبلاً از
  padding می‌آمد و چند پیکسل کوتاه‌تر بود.
*/
.df-wrap {
  min-height: 48px;
  align-items: stretch;
}

/*
  از `.df-wrap` شروع می‌شود تا از تعریف اصلی `.df-btn` (که پدینگ
  `11px 13px` می‌دهد و در فایل بالاتر است) قوی‌تر باشد. با پدینگ
  عمودی، ارتفاع دکمه از ظرفش بیشتر می‌شد و کادر ناهم‌تراز می‌ماند.
*/
.df-wrap .df-btn {
  min-height: 46px;
  padding: 0 13px;
  font-size: .86rem;
}

.df-ic { width: 18px; height: 18px; }

/*
  کادر ساعت جای کافی برای «--:--» داشته باشد و له نشود.

  سلکتور از `.df-wrap` شروع می‌شود تا مشخصیتش (۰،۲،۰) از قواعد
  عمومیِ `input[type=time]` بالاتر بماند و دوباره گروگان نشود.
*/
.df-wrap .df-time {
  flex: 0 0 auto;
  width: 104px;
  min-width: 104px;
  max-width: 104px;
  height: auto;
  padding: 0 10px;
  font-size: .86rem;
  text-align: center;
  border: 0;
  border-inline-start: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  direction: ltr;
}

/* دکمهٔ تاریخ باید فضای باقی‌مانده را بگیرد، نه اینکه جمع شود */
.df-wrap .df-btn {
  flex: 1 1 auto;
  min-width: 120px;
}

.df-wrap .df-x { width: 42px; flex: 0 0 auto; font-size: .9rem; }

@media (max-width: 480px) {
  .df-wrap .df-time {
    width: 88px; min-width: 88px; max-width: 88px; padding: 0 6px;
  }
  .df-wrap .df-btn { min-width: 96px; padding: 0 10px; font-size: .8rem; }
  .df-wrap .df-x { width: 36px; }
}

/* ==========================================================================
   مبالغ برگشتی در داشبورد مالی
   --------------------------------------------------------------------------
   جدا از جمع فروش نمایش داده می‌شود: جریان معکوس با درآمد قاطی
   نمی‌شود و ادمین هر دو عدد را جدا می‌بیند.
   ========================================================================== */
.fin-refund > div { position: relative; }

.fin-refund small {
  display: block; margin-top: 2px;
  font-size: .68rem; color: var(--slate);
}

.fin-refund .is-done b { color: var(--green-text-soft); }
.fin-refund .is-wait b { color: var(--warn-text); }

.fin-refund-list {
  margin-block: 14px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.fin-refund-list > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; cursor: pointer;
  font-size: .88rem; font-weight: 800;
  background: var(--bg-subtle);
  list-style: none;
}
.fin-refund-list > summary::-webkit-details-marker { display: none; }
.fin-refund-list > summary::after {
  content: "▾"; margin-inline-start: auto; color: var(--slate);
  transition: transform .2s ease;
}
.fin-refund-list[open] > summary::after { transform: rotate(180deg); }

.fin-refund-list > summary > span {
  padding: 1px 10px; border-radius: var(--r-full);
  background: var(--surface); color: var(--slate);
  font-size: .72rem;
}

/* ---- نشان وضعیت ---- */
.rf-badge {
  display: inline-block;
  padding: 2px 11px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 700;
  white-space: nowrap;
}
/* در جریان — نیاز به اقدام */
.rf-badge.rf-requested,
.rf-badge.rf-reviewing,
.rf-badge.rf-awaiting,
.rf-badge.rf-received,
.rf-badge.rf-inspecting { background: var(--warn-bg);
                          color: var(--warn-text); }

/* پول برگشته */
.rf-badge.rf-approved  { background: var(--green-100);
                         color: var(--green-text-soft); }

/* بسته — تعهدی نیست */
.rf-badge.rf-rejected,
.rf-badge.rf-cancelled { background: var(--bg-subtle);
                         color: var(--slate); }

/* ردیف بسته کم‌رنگ‌تر — چشم روی موارد فعال بماند */
tr.rf-rejected,
tr.rf-cancelled { opacity: .55; }

@media (max-width: 640px) {
  .fin-refund-list > summary { padding: 11px 13px; font-size: .82rem; }
}

/* ---------- جست‌وجوی تراکنش کیف پول ---------- */
.tx-search { margin-bottom: 14px; }

.txs-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--bg-subtle); border: 1px solid var(--line);
}

.txs-row input {
  font: inherit; font-size: .84rem;
  padding: 9px 13px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.txs-row input:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100);
}

.txs-q { flex: 1; min-width: 170px; }
.txs-date { width: 116px; text-align: center; }

.txs-found {
  margin: 8px 0 0; font-size: .78rem; color: var(--slate);
}

/* شمارهٔ سفارش کنار تراکنش */
.tx-order {
  display: inline-block; margin-inline-start: 8px;
  padding: 1px 9px; border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
  font-size: .72rem; font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tx-order:hover { background: var(--green-50); }

@media (max-width: 560px) {
  .txs-q { flex: 1 1 100%; }
  .txs-date { flex: 1; width: auto; }
}

/* ==========================================================================
   واژه‌های ممنوعه
   ========================================================================== */
.bw-stats {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.bw-stats > div {
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.bw-stats span {
  display: block; font-size: .72rem; color: var(--slate);
}
.bw-stats b { font-size: 1.2rem; }
.bw-stats .is-block b { color: var(--danger-text); }

.bw-tools {
  display: flex; gap: 9px; flex-wrap: wrap;
  align-items: center; margin-bottom: 12px;
}

.bw-imp { display: inline; }

.bw-file {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
  font-size: .82rem; font-weight: 700; cursor: pointer;
}
.bw-file:hover { background: var(--green-50); }
.bw-file input { display: none; }

.bw-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 12px;
  border-radius: var(--r); background: var(--bg-subtle);
  border: 1px solid var(--line);
}
.bw-filter input, .bw-filter select {
  font: inherit; font-size: .82rem;
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.bw-filter input[type="search"] { flex: 1; min-width: 150px; }

.bw-tbl tr.is-off { opacity: .5; }

.bw-sev {
  padding: 2px 10px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.bw-sev.bw-block { background: var(--danger-bg); color: var(--danger-text); }
.bw-sev.bw-flag  { background: var(--warn-bg); color: var(--warn-text); }

.bw-mini { font-size: .78rem; color: var(--slate); }

/* کلید روشن/خاموش */
.bw-toggle {
  width: 38px; height: 21px; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: var(--slate-light); cursor: pointer;
  position: relative; transition: background .18s ease;
}
.bw-toggle.on { background: var(--green-btn); }
.bw-toggle span {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; transition: inset-inline-start .18s ease;
}
.bw-toggle.on span { inset-inline-start: 20px; }

.bw-hits {
  margin-top: 18px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  overflow: hidden;
}
.bw-hits > summary {
  padding: 12px 15px; cursor: pointer;
  font-size: .86rem; font-weight: 800;
  background: var(--warn-bg); color: var(--warn-text);
  list-style: none;
}
.bw-hits > summary::-webkit-details-marker { display: none; }
.bw-hits > summary span {
  margin-inline-start: 8px; padding: 1px 9px;
  border-radius: var(--r-full); background: var(--surface);
  font-size: .74rem;
}

/* ---- مودال ---- */
.bw-modal {
  border: 0; border-radius: 18px; padding: 0;
  max-width: 480px; width: calc(100% - 32px);
  box-shadow: var(--sh-lg);
  /* وسط‌چین — `<dialog>` بومی فقط افقی وسط می‌شود */
  position: fixed;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  margin: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

html[dir="ltr"] .bw-modal {
  transform: translate(-50%, -50%);
}
.bw-modal::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
}
.bw-modal form { padding: 22px 24px; }
.bw-modal h3 { margin: 0 0 16px; font-size: 1rem; }
.bw-modal .field { margin-bottom: 13px; }
.bw-modal .field small {
  display: block; margin-top: 3px;
  font-size: .72rem; color: var(--slate);
}
.bw-modal-act {
  display: flex; gap: 9px; justify-content: flex-end;
  margin-top: 18px;
}

/* ==========================================================================
   مودال بخش خاموش
   ========================================================================== */
.fmodal {
  border: 0; padding: 0; border-radius: 20px;
  max-width: 420px; width: calc(100% - 32px);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
  background: var(--surface); color: var(--ink);

  /*
    وسط‌چین افقی و عمودی.

    `<dialog>` بومی با `margin: auto` فقط افقی وسط می‌شود و به
    بالای صفحه می‌چسبد. `position: fixed` با `transform` هر دو
    محور را می‌گیرد.
  */
  position: fixed;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  margin: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* در LTR جهت جابه‌جایی برعکس است */
html[dir="ltr"] .fmodal {
  transform: translate(-50%, -50%);
}

/* ورود نرم */
@keyframes fmodal-in {
  from { opacity: 0; transform: translate(50%, -46%) scale(.96); }
  to   { opacity: 1; }
}

html[dir="ltr"] .fmodal[open] {
  animation: fmodal-in-ltr .22s ease-out;
}

@keyframes fmodal-in-ltr {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to   { opacity: 1; }
}

.fmodal[open] { animation: fmodal-in .22s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .fmodal[open] { animation: none; }
}
.fmodal::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
}

.fmodal-inner { padding: 30px 28px 24px; text-align: center; }

.fmodal-icon {
  font-size: 3rem; line-height: 1;
  margin-bottom: 16px;
}

.fmodal-img {
  width: 110px; height: 110px; margin: 0 auto 16px;
  border-radius: 20px; overflow: hidden;
  background: var(--bg-subtle);
  display: grid; place-items: center;
}
.fmodal-img img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}

.fmodal h3 {
  margin: 0 0 10px; font-size: 1.1rem; font-weight: 900;
}

.fmodal p {
  margin: 0 0 22px; font-size: .9rem; line-height: 2;
  color: var(--ink-soft);
}

.fmodal-act {
  display: flex; gap: 9px; justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 420px) {
  .fmodal-inner { padding: 24px 20px 20px; }
  .fmodal-act .btn { flex: 1; }
}

/* ==========================================================================
   آمار بازدید کالاها
   ========================================================================== */
.ps-sum {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.ps-sum > div {
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.ps-sum span {
  display: block; font-size: .72rem; color: var(--slate);
}
.ps-sum b { font-size: 1.2rem; }
.ps-sum .is-rate b { color: var(--green-text-soft); }

.ps-tabs { margin-bottom: 10px; }

.ps-hint {
  margin: 0 0 12px; padding: 10px 14px;
  border-radius: var(--r); font-size: .82rem;
  background: var(--info-bg); color: var(--info-text);
  line-height: 1.9;
}

.ps-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--r); background: var(--bg-subtle);
  border: 1px solid var(--line);
}
.ps-filter input, .ps-filter select {
  font: inherit; font-size: .8rem;
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.ps-filter input[type="search"] { flex: 1; min-width: 150px; }
.ps-filter input[name$="_price"] { width: 105px; }

.ps-mini { font-size: .78rem; color: var(--slate); }

.ps-kind {
  margin-inline-start: 6px; padding: 1px 8px;
  border-radius: var(--r-full); font-size: .68rem;
  background: var(--info-bg); color: var(--info-text);
}

.ps-sold { color: var(--green-text-soft); font-weight: 800; }

/* ==========================================================================
   جدول پنل — `.tbl`
   --------------------------------------------------------------------------
   ⚠️ این کلاس در شش صفحهٔ پنل استفاده می‌شد و **هیچ استایلی
   نداشت**.

   جدول با ظاهر پیش‌فرض مرورگر رندر می‌شد: بدون خط، بدون
   فاصله، ستون‌ها به هم چسبیده و سرستون‌ها از بدنه جدا نبودند.
   ========================================================================== */
.tbl-wrap {
  /*
    ⚠️ `overflow-x: auto` روی پوشش، نه خود جدول.

    جدول با ستون زیاد در موبایل جا نمی‌شود؛ اسکرول افقی باید
    داخل کارت بماند نه اینکه کل صفحه را بلغزاند.
  */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  /*
    ⚠️ بدون این، ستون‌ها با متن بلند فارسی به هم می‌ریزند و
    عرضشان در هر بارگذاری فرق می‌کند.
  */
  min-width: 560px;
}

.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 14px;
  text-align: start;
  white-space: nowrap;
  font-size: .76rem;
  font-weight: 800;
  color: var(--slate);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
}

.tbl tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  line-height: 1.9;
}

.tbl tbody tr:last-child td { border-bottom: 0; }

.tbl tbody tr { transition: background .15s ease; }
.tbl tbody tr:hover { background: var(--bg-subtle); }

/* ستون‌های عددی — ارقام هم‌عرض تا زیر هم بنشینند */
.tbl td b,
.tbl .is-num {
  font-variant-numeric: tabular-nums;
}

/*
  ⚠️ ستون اول نباید در اسکرول افقی گم شود.

  در جدول کالاها، نام کالا مرجع خواندن بقیهٔ ستون‌هاست.
*/
.tbl td:first-child { font-weight: 600; }

.tbl a { color: var(--ink); text-decoration: none; }
.tbl a:hover { color: var(--green); text-decoration: underline; }

@media (max-width: 640px) {
  .tbl { font-size: .8rem; }
  .tbl thead th,
  .tbl tbody td { padding: 9px 11px; }
}

/* ---- ستون‌های جدول آمار ---- */
.ps-tbl th:first-child,
.ps-tbl td:first-child { min-width: 190px; }

/*
  ⚠️ ستون‌های عددی راست‌چین نمی‌شوند.

  در RTL «راست» ابتدای خط است؛ عدد باید ته ستون بنشیند، پس
  `text-align: end`.
*/
.ps-tbl td:nth-child(n+4) { text-align: end; }
.ps-tbl th:nth-child(n+4) { text-align: end; }

/* ==========================================================================
   پنل دیتابیس
   ========================================================================== */
.db-warn {
  padding: 11px 15px; margin-bottom: 14px;
  border-radius: var(--r); font-size: .84rem;
  background: var(--warn-bg); color: var(--warn-text);
}
.db-warn.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

.db-sum {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.db-sum > div {
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.db-sum span {
  display: block; font-size: .72rem; color: var(--slate);
}
.db-sum b { font-size: 1.1rem; }

.db-links { margin: 0 0 16px; }

.db-crumb {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; margin: 0 0 14px; font-size: .82rem;
}
.db-crumb code {
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--bg-subtle); font-size: .76rem;
}
.db-crumb span { color: var(--slate); }

.db-mini { font-size: .74rem; color: var(--slate); }
.db-tbl code.db-mini { display: block; margin-top: 2px; }

.db-app {
  margin-bottom: 8px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  overflow: hidden;
}
.db-app > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; cursor: pointer;
  font-size: .86rem; background: var(--bg-subtle);
  list-style: none;
}
.db-app > summary::-webkit-details-marker { display: none; }
.db-app > summary span {
  margin-inline-start: auto; font-size: .74rem;
  color: var(--slate);
}

.db-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 10px;
  border-radius: var(--r); background: var(--bg-subtle);
  border: 1px solid var(--line);
}
.db-filter input {
  font: inherit; font-size: .8rem;
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.db-filter input[type="search"] { flex: 1; min-width: 160px; }
.db-filter input[name="from"], .db-filter input[name="to"] {
  width: 115px; text-align: center;
}

/* جدول داده — ستون‌های زیاد، پس اسکرول افقی */
.db-scroll { overflow-x: auto; }
.db-data { font-size: .78rem; white-space: nowrap; }
.db-data td { max-width: 260px; overflow: hidden;
              text-overflow: ellipsis; }

.db-dead { color: var(--danger-text); font-weight: 700; }

/* ==========================================================================
   ترجمهٔ انبوه
   ========================================================================== */
.bulk {
  margin-bottom: 16px; padding: 16px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg,
              var(--green-100), var(--surface));
  border: 1px solid var(--green-100);
}

.bulk-head {
  display: flex; align-items: center; gap: 14px;
}
.bulk-head b { font-size: .92rem; display: block; }
.bulk-head small {
  font-size: .76rem; color: var(--slate);
  display: block; margin-top: 2px;
}

/* کلید */
.bulk-switch {
  margin-inline-start: auto; flex: none;
  position: relative; cursor: pointer;
}
.bulk-switch input { position: absolute; opacity: 0; }
.bulk-switch span {
  display: block; width: 48px; height: 27px;
  border-radius: var(--r-full);
  background: var(--slate-light);
  transition: background .2s ease;
  position: relative;
}
.bulk-switch span::after {
  content: ""; position: absolute;
  top: 3px; inset-inline-start: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-sm);
  transition: inset-inline-start .2s ease;
}
.bulk-switch input:checked + span { background: var(--green-btn); }
.bulk-switch input:checked + span::after {
  inset-inline-start: 24px;
}
.bulk-switch input:disabled + span { opacity: .4; cursor: not-allowed; }

/* وضعیت هر زبان */
.bulk-langs {
  display: grid; gap: 7px; margin-top: 14px;
}
.bulk-lang {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem;
}
.bl-code {
  width: 30px; flex: none; font-weight: 800;
  color: var(--green-text-soft);
  font-family: ui-monospace, monospace;
}
.bl-bar {
  flex: 1; height: 7px; border-radius: var(--r-full);
  background: var(--surface); overflow: hidden;
  border: 1px solid var(--line);
}
.bl-fill {
  height: 100%; background: var(--green-btn);
  transition: width .4s ease;
}
.bulk-lang.is-done .bl-fill { background: var(--success-text); }
.bl-pct {
  width: 42px; flex: none; text-align: end;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.bl-left {
  width: 78px; flex: none; color: var(--slate);
  font-size: .72rem;
}

/* نوار پیشرفت اصلی */
.bulk-progress {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--green-100);
}
.bulk-bar {
  position: relative; height: 26px;
  border-radius: var(--r-full);
  background: var(--surface); overflow: hidden;
  border: 1px solid var(--line);
}
.bulk-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg,
              var(--green-btn), var(--green));
  transition: width .5s ease;
}
.bulk-fill.is-done { background: var(--success-text); }
.bulk-pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800;
  color: var(--ink);
  text-shadow: 0 0 6px var(--surface);
}
.bulk-meta {
  display: flex; justify-content: space-between;
  margin-top: 7px; font-size: .76rem; color: var(--slate);
}
.bulk-log { margin-top: 9px; }
.bulk-log > summary {
  font-size: .76rem; color: var(--slate); cursor: pointer;
}
.bulk-log pre {
  margin: 7px 0 0; padding: 10px 12px;
  border-radius: var(--r); background: var(--ink);
  color: var(--surface); font-size: .72rem;
  max-height: 150px; overflow-y: auto;
  direction: ltr; text-align: left;
}

/* مودال */
.bulk-modal {
  border: 0; padding: 0; border-radius: 20px;
  max-width: 430px; width: calc(100% - 32px);
  box-shadow: var(--sh-lg);
  /* وسط‌چین — `<dialog>` بومی فقط افقی وسط می‌شود */
  position: fixed;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  margin: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

html[dir="ltr"] .bulk-modal {
  transform: translate(-50%, -50%);
}
.bulk-modal::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
}
.bulk-modal-in { padding: 26px 24px 20px; text-align: center; }
.bulk-modal-icon { font-size: 2.6rem; margin-bottom: 12px; }
.bulk-modal h3 { margin: 0 0 9px; font-size: 1.02rem; }
.bulk-modal p {
  margin: 0 0 14px; font-size: .88rem; color: var(--ink-soft);
}
.bulk-note {
  padding: 10px 13px; border-radius: var(--r);
  background: var(--warn-bg); color: var(--warn-text);
  font-size: .78rem; line-height: 1.9; text-align: start;
  margin-bottom: 18px;
}
.bulk-modal-act {
  display: flex; gap: 9px; justify-content: center;
}

/* ==========================================================================
   خطاهای سامانه
   ========================================================================== */
.er-sum {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.er-sum > div {
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.er-sum span {
  display: block; font-size: .72rem; color: var(--slate);
}
.er-sum b { font-size: 1.2rem; }
.er-sum .is-open b { color: var(--warn-text); }
.er-sum .is-crit b { color: var(--danger-text); }

.er-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--r); background: var(--bg-subtle);
  border: 1px solid var(--line);
}
.er-filter input, .er-filter select {
  font: inherit; font-size: .8rem;
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.er-filter input[type="search"] { flex: 1; min-width: 160px; }

/* ---- فهرست ---- */
.er-list { display: grid; gap: 8px; }

.er-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--slate-light);
}
.er-item.lvl-error    { border-inline-start-color: var(--danger-text); }
.er-item.lvl-critical { border-inline-start-color: #7F1D1D; }
.er-item.lvl-warning  { border-inline-start-color: var(--warn-text); }
.er-item.is-done { opacity: .55; }

.er-main { flex: 1; min-width: 0; }

.er-kind {
  font-weight: 800; font-size: .88rem;
  color: var(--danger-text); text-decoration: none;
  font-family: ui-monospace, monospace;
}
.er-kind:hover { text-decoration: underline; }

.er-msg {
  margin: 4px 0 6px; font-size: .82rem;
  color: var(--ink-soft); line-height: 1.8;
}

.er-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: .72rem; color: var(--slate);
}
.er-meta code {
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--bg-subtle); font-size: .7rem;
}

.er-side {
  display: flex; flex-direction: column; gap: 7px;
  align-items: center; flex: none;
}

.er-count {
  padding: 2px 11px; border-radius: var(--r-full);
  background: var(--danger-bg); color: var(--danger-text);
  font-size: .76rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.er-btn {
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer;
  font-size: .85rem;
}
.er-btn:hover { background: var(--green-100); }

/* ---- جزئیات ---- */
.er-badge {
  padding: 2px 11px; border-radius: var(--r-full);
  font-size: .74rem; font-weight: 700;
}
.er-badge.lvl-error    { background: var(--danger-bg); color: var(--danger-text); }
.er-badge.lvl-critical { background: #7F1D1D; color: #fff; }
.er-badge.lvl-warning  { background: var(--warn-bg); color: var(--warn-text); }

.er-detail {
  padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.er-detail h3 {
  margin: 20px 0 8px; font-size: .88rem;
  color: var(--slate);
}
.er-detail h3:first-child { margin-top: 0; }

.er-pre {
  margin: 0; padding: 13px 15px;
  border-radius: var(--r); background: var(--ink);
  color: var(--surface); font-size: .78rem;
  line-height: 1.75; overflow-x: auto;
  direction: ltr; text-align: left;
  white-space: pre-wrap; word-break: break-word;
}
.er-trace { max-height: 380px; overflow-y: auto; font-size: .72rem; }

.er-facts {
  display: grid; gap: 9px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.er-facts > div {
  padding: 9px 12px; border-radius: var(--r);
  background: var(--bg-subtle);
}
.er-facts span {
  display: block; font-size: .7rem; color: var(--slate);
}
.er-facts code, .er-facts b { font-size: .8rem; }

.er-resolve { margin-top: 22px; }
.er-actions { margin-top: 10px; }

.er-done {
  margin-top: 12px; padding: 10px 14px;
  border-radius: var(--r); background: var(--success-bg);
  color: var(--success-text); font-size: .82rem;
}

.er-similar { list-style: none; padding: 0; margin: 0; }
.er-similar li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: var(--r);
  background: var(--bg-subtle); margin-bottom: 5px;
  font-size: .8rem;
}

.er-danger {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   فعالیت کاربران
   ========================================================================== */
.ac-sum {
  display: grid; gap: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.ac-sum > div {
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.ac-sum span {
  display: block; font-size: .72rem; color: var(--slate);
}
.ac-sum b { font-size: 1.15rem; }
.ac-sum .is-warn b { color: var(--warn-text); }

.ac-chips {
  display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px;
}
.ac-chip {
  padding: 5px 13px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .78rem; text-decoration: none; color: var(--ink);
}
.ac-chip:hover { background: var(--green-100); }
.ac-chip.on {
  /*
    رنگ صریح نه متغیر: `--green-btn` با سفید ۳.۳ می‌دهد که زیر
    حد WCAG است. `#0F5132` نسبت ۸.۹ می‌دهد.
  */
  background: #0F5132; color: #fff;
  border-color: #0F5132;
}
.ac-chip span {
  margin-inline-start: 5px; font-size: .72rem; opacity: .75;
}

.ac-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--r); background: var(--bg-subtle);
  border: 1px solid var(--line);
}
.ac-filter input, .ac-filter select {
  font: inherit; font-size: .8rem;
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.ac-filter input[name="who"], .ac-filter input[name="q"] {
  flex: 1; min-width: 140px;
}
.ac-filter input[name="ip"] { width: 130px; }

.ac-tbl { font-size: .82rem; }
.ac-time {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--slate); font-size: .76rem;
}
.ac-mini { font-size: .76rem; color: var(--slate); }
.ac-mini code {
  padding: 1px 6px; border-radius: var(--r-full);
  background: var(--bg-subtle); font-size: .7rem;
}

.ac-kind {
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--bg-subtle); font-size: .74rem;
  white-space: nowrap;
}

/* کنش‌های حساس برجسته */
.ac-tbl tr.k-login_failed .ac-kind,
.ac-tbl tr.k-permission_change .ac-kind,
.ac-tbl tr.k-data_export .ac-kind {
  background: var(--danger-bg); color: var(--danger-text);
  font-weight: 700;
}
.ac-tbl tr.k-payment .ac-kind,
.ac-tbl tr.k-withdraw .ac-kind {
  background: var(--warn-bg); color: var(--warn-text);
}

/* ---- صفحهٔ یک کاربر ---- */
.ac-cols {
  display: grid; gap: 16px;
  grid-template-columns: 260px 1fr;
}
@media (max-width: 900px) {
  .ac-cols { grid-template-columns: 1fr; }
}

.ac-side {
  padding: 15px 17px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  align-self: start;
}
.ac-side h3 {
  margin: 0 0 10px; font-size: .84rem; color: var(--slate);
}
.ac-side h3 + h3 { margin-top: 18px; }

.ac-summary, .ac-ips { list-style: none; padding: 0; margin: 0; }
.ac-summary li, .ac-ips li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0; font-size: .8rem;
  border-bottom: 1px solid var(--line);
}
.ac-summary li:last-child, .ac-ips li:last-child { border: 0; }
.ac-summary li > span, .ac-ips li > code { flex: 1; }
.ac-summary b, .ac-ips b {
  font-variant-numeric: tabular-nums;
}
.ac-summary small, .ac-ips small {
  font-size: .68rem; color: var(--slate);
}

.ac-alert {
  margin: 10px 0 0; padding: 9px 12px;
  border-radius: var(--r); background: var(--warn-bg);
  color: var(--warn-text); font-size: .76rem; line-height: 1.8;
}

/* خط زمان */
.ac-timeline {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.ac-timeline::before {
  content: ""; position: absolute;
  inset-inline-start: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line);
}
.ac-timeline li {
  position: relative; padding-inline-start: 26px;
  margin-bottom: 10px;
}
.ac-dot {
  position: absolute; inset-inline-start: 2px; top: 12px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--slate-light);
  border: 2px solid var(--surface);
}
.ac-timeline li.k-login_failed .ac-dot,
.ac-timeline li.k-permission_change .ac-dot {
  background: var(--danger-text);
}
.ac-timeline li.k-payment .ac-dot,
.ac-timeline li.k-order_placed .ac-dot {
  background: var(--green-btn);
}

.ac-body {
  padding: 11px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.ac-head {
  display: flex; justify-content: space-between; gap: 10px;
  align-items: baseline; flex-wrap: wrap;
}
.ac-head b { font-size: .85rem; }
.ac-head span {
  font-size: .72rem; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.ac-body p {
  margin: 5px 0 0; font-size: .8rem; color: var(--ink-soft);
}
.ac-meta {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
  font-size: .7rem; color: var(--slate);
}
.ac-meta code {
  padding: 1px 6px; border-radius: var(--r-full);
  background: var(--bg-subtle);
}

/* ==========================================================================
   نوار وضعیت چت
   ========================================================================== */
.chat-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px; min-height: 26px;
  font-size: .74rem;
}

.chat-status { color: var(--slate); }

.chat-status.is-live {
  color: var(--green-text-soft); font-weight: 700;
}
.chat-status.is-live::before {
  content: "●"; margin-inline-end: 4px;
  color: var(--green-btn);
}

.chat-status.is-polling { color: var(--warn-text); }
.chat-status.is-polling::before {
  content: "◐"; margin-inline-end: 4px;
}

.chat-status.is-warn {
  color: var(--danger-text); font-weight: 700;
}

.chat-typing {
  color: var(--slate); font-style: italic;
  margin-inline-start: auto;
}

/* پیام‌های زندهٔ WebSocket */
.msg-row { display: flex; margin-bottom: 8px; }
.msg-row.mine { justify-content: flex-end; }

.msg-bubble {
  max-width: 72%; padding: 8px 13px;
  border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line);
}
.msg-row.mine .msg-bubble {
  background: var(--green-100); border-color: var(--green-100);
}

.msg-who {
  display: block; font-size: .72rem;
  color: var(--green-text-soft); margin-bottom: 2px;
}
.msg-bubble p {
  margin: 0; font-size: .86rem; line-height: 1.8;
  word-break: break-word;
}
.msg-bubble time {
  display: block; margin-top: 3px;
  font-size: .68rem; color: var(--slate);
}

/* ==========================================================================
   تاریخچهٔ چت
   ========================================================================== */
.ch-warn {
  padding: 11px 15px; margin-bottom: 14px;
  border-radius: var(--r); font-size: .82rem;
  background: var(--warn-bg); color: var(--warn-text);
}

.ch-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--r); background: var(--bg-subtle);
  border: 1px solid var(--line);
}
.ch-filter input, .ch-filter select {
  font: inherit; font-size: .8rem;
  padding: 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.ch-filter input[type="search"] { flex: 1; min-width: 130px; }
.ch-filter input[type="number"] { width: 92px; }
.ch-filter input[name="from"],
.ch-filter input[name="to"] { width: 115px; text-align: center; }

.ch-count {
  margin: 0 0 12px; font-size: .82rem; color: var(--slate);
}

.ch-mini { font-size: .76rem; color: var(--slate); }
.ch-arrow { margin: 0 6px; color: var(--slate); }

.ch-kind {
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--bg-subtle); font-size: .72rem;
}
.ch-kind.is-support {
  background: var(--info-bg); color: var(--info-text);
}

/* ---- فهرست پیام ---- */
.ch-list { display: grid; gap: 8px; }

.ch-item {
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.ch-head {
  display: flex; gap: 10px; align-items: baseline;
  flex-wrap: wrap; font-size: .78rem;
}
.ch-head b { font-size: .82rem; }
.ch-in { color: var(--slate); }
.ch-head time {
  margin-inline-start: auto; color: var(--slate);
  font-size: .72rem; font-variant-numeric: tabular-nums;
}
.ch-body {
  margin: 6px 0 0; font-size: .86rem; line-height: 1.9;
  word-break: break-word;
}

/* ---- نمای گفتگو ---- */
.ch-thread {
  padding: 16px; border-radius: var(--r-lg);
  background: var(--bg-subtle); border: 1px solid var(--line);
  max-height: 640px; overflow-y: auto;
}

.ch-msg { display: flex; margin-bottom: 9px; }
.ch-msg.right { justify-content: flex-end; }

.ch-msg-in {
  max-width: 70%; padding: 9px 14px;
  border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line);
}
.ch-msg.right .ch-msg-in {
  background: var(--green-100); border-color: var(--green-100);
}
.ch-msg-in b {
  display: block; font-size: .72rem;
  color: var(--green-text-soft);
}
.ch-msg-in p {
  margin: 3px 0; font-size: .86rem; line-height: 1.85;
  word-break: break-word;
}
.ch-msg-in time {
  font-size: .68rem; color: var(--slate);
}

/* ==========================================================================
   جست‌وجوی گفتگوها
   ========================================================================== */
.cs-search {
  padding: 16px 18px; margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}

.cs-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: flex-end; margin-bottom: 12px;
}
.cs-row:last-child { margin-bottom: 0; }

.cs-field { flex: 1; min-width: 130px; }
.cs-field > span {
  display: block; margin-bottom: 5px;
  font-size: .74rem; color: var(--slate); font-weight: 700;
}
.cs-field input, .cs-field select {
  width: 100%; font: inherit; font-size: .84rem;
  padding: 10px 15px;
  /* گردی بیشتر — هم‌خوان با کارت‌های نتیجه */
  border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-subtle);
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.cs-field input:focus, .cs-field select:focus {
  outline: none; border-color: var(--green-btn);
  background: var(--surface);
}

.cs-narrow { flex: 0 0 140px; }
.cs-tiny   { flex: 0 0 92px; }
.cs-wide   { flex: 1; min-width: 220px; }

/* دو شخص کنار هم */
.cs-people {
  padding: 12px 14px; border-radius: var(--r);
  background: var(--green-100); margin-bottom: 8px;
}
.cs-between {
  flex: 0 0 auto; padding-bottom: 9px;
  font-size: 1.25rem; color: var(--green-text-soft);
}

.cs-hint {
  margin: 0 0 14px; font-size: .76rem;
  color: var(--slate); line-height: 1.9;
}

.cs-actions {
  display: flex; gap: 8px; flex: 0 0 auto;
}

.cs-count {
  margin-bottom: 12px; font-size: .86rem;
}
.cs-count b { font-size: 1.05rem; }
.cs-count span { color: var(--slate); font-size: .78rem; }

/* ---- کارت گفتگو ---- */
.cs-list { display: grid; gap: 10px; }

.cs-card {
  display: block; padding: 14px 16px;
  border-radius: var(--r-lg); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--slate-light);
  color: var(--ink); transition: border-color .15s ease;
}
.cs-card:hover {
  border-color: var(--green-btn);
  border-inline-start-color: var(--green-btn);
  text-decoration: none;
}
.cs-card.is-support {
  border-inline-start-color: var(--info-text);
}

.cs-card-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px; font-size: .74rem;
}
.cs-id {
  font-family: ui-monospace, monospace;
  color: var(--slate); font-weight: 700;
}
.cs-tag {
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--bg-subtle); font-size: .7rem;
}
.cs-tag.is-support {
  background: var(--info-bg); color: var(--info-text);
}
.cs-card-head time {
  margin-inline-start: auto; color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.cs-parties {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.cs-person { min-width: 0; }
.cs-person b {
  display: block; font-size: .88rem; line-height: 1.6;
}
.cs-person code {
  font-size: .76rem; color: var(--slate);
  font-family: ui-monospace, monospace;
}
.cs-swap {
  color: var(--green-text-soft); font-size: 1.15rem;
  flex: 0 0 auto;
}

.cs-card-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--slate);
}
.cs-open {
  margin-inline-start: auto; color: var(--green-text-soft);
  font-weight: 700;
}

/* ==========================================================================
   نمای یک گفتگو
   ========================================================================== */
.ct-head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}

.ct-back {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-subtle);
  color: var(--ink); text-decoration: none; font-size: 1.1rem;
}
.ct-back:hover { background: var(--green-100); }

.ct-side {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.ct-side b { display: block; font-size: .88rem; }
.ct-side code {
  font-size: .74rem; color: var(--slate);
  font-family: ui-monospace, monospace;
}

.ct-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.ct-dot.ct-a { background: var(--green-btn); }
.ct-dot.ct-b { background: #7C3AED; }

.ct-vs { color: var(--slate); font-size: 1.1rem; }

.ct-meta {
  margin-inline-start: auto; display: flex;
  align-items: center; gap: 9px;
}
.ct-count {
  padding: 3px 12px; border-radius: var(--r-full);
  background: var(--bg-subtle); font-size: .76rem;
}

/* ---- خط گفتگو ---- */
.ct-thread {
  padding: 18px 16px; border-radius: var(--r-lg);
  background: var(--bg-subtle); border: 1px solid var(--line);
  max-height: 70vh; overflow-y: auto;
}

.ct-day {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
}
.ct-day::before, .ct-day::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.ct-day span {
  font-size: .74rem; color: var(--slate);
  padding: 3px 14px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
}
.ct-thread > .ct-day:first-child { margin-top: 0; }

.ct-msg { display: flex; margin-bottom: 10px; }
.ct-msg.side-b { justify-content: flex-end; }

.ct-bubble {
  max-width: 68%; padding: 10px 14px;
  border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line);
  border-start-start-radius: 4px;
}
.ct-msg.side-b .ct-bubble {
  background: var(--green-100); border-color: var(--green-100);
  border-start-start-radius: 16px;
  border-start-end-radius: 4px;
}

.ct-who {
  display: flex; align-items: baseline; gap: 7px;
  margin-bottom: 4px;
}
.ct-who b {
  font-size: .76rem; color: var(--green-text-soft);
}
.ct-msg.side-b .ct-who b { color: #6D28D9; }
.ct-who code {
  font-size: .68rem; color: var(--slate);
  font-family: ui-monospace, monospace;
}

.ct-bubble p {
  margin: 0; font-size: .88rem; line-height: 1.95;
  word-break: break-word; white-space: pre-wrap;
}

.ct-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 5px; justify-content: flex-end;
}
.ct-foot time {
  font-size: .68rem; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.ct-read { color: var(--green-btn); font-size: .68rem; }
.ct-unread { color: var(--slate-light); font-size: .68rem; }

@media (max-width: 640px) {
  .ct-bubble { max-width: 88%; }
  .cs-narrow, .cs-tiny { flex: 1 1 100px; }
  .cs-between { display: none; }
}

/* ==========================================================================
   فعالیت کاربران — نمای تازه
   ========================================================================== */
.ac-chips-label {
  font-size: .74rem; color: var(--slate); font-weight: 700;
}

.ac-start {
  padding: 46px 24px; text-align: center;
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
  border: 1px dashed var(--line);
}
.ac-start > span { font-size: 2.6rem; display: block; }
.ac-start h3 {
  margin: 14px 0 8px; font-size: 1rem;
}
.ac-start p {
  margin: 0 auto; max-width: 420px;
  font-size: .84rem; color: var(--slate); line-height: 2;
}
.ac-start small {
  display: block; margin-top: 16px;
  font-size: .74rem; color: var(--warn-text);
}

/* خط فعالیت */
.ac-feed {
  padding: 6px 0;
}

.ac-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 14px; margin-bottom: 6px;
  border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--slate-light);
}

.ac-row > time {
  flex: 0 0 62px; font-size: .74rem; color: var(--slate);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}

.ac-badge {
  flex: 0 0 auto; padding: 3px 11px;
  border-radius: var(--r-full);
  background: var(--bg-subtle); font-size: .73rem;
  white-space: nowrap;
}

.ac-body { flex: 1; min-width: 0; }
.ac-body p {
  margin: 0 0 4px; font-size: .84rem; line-height: 1.8;
}

.ac-user {
  color: var(--green-text-soft); font-weight: 700;
  text-decoration: none;
  font-family: ui-monospace, monospace;
}
.ac-user:hover { text-decoration: underline; }

.ac-ip { color: var(--slate); }

/* کنش‌های حساس */
.ac-row.k-login_failed,
.ac-row.k-permission_change,
.ac-row.k-data_export {
  border-inline-start-color: var(--danger-text);
}
.ac-row.k-login_failed .ac-badge,
.ac-row.k-permission_change .ac-badge,
.ac-row.k-data_export .ac-badge {
  background: var(--danger-bg); color: var(--danger-text);
  font-weight: 700;
}

.ac-row.k-payment, .ac-row.k-withdraw,
.ac-row.k-wallet_charge {
  border-inline-start-color: var(--warn-text);
}
.ac-row.k-payment .ac-badge,
.ac-row.k-withdraw .ac-badge,
.ac-row.k-wallet_charge .ac-badge {
  background: var(--warn-bg); color: var(--warn-text);
}

.ac-row.k-login, .ac-row.k-order_placed {
  border-inline-start-color: var(--green-btn);
}

@media (max-width: 640px) {
  .ac-row { flex-wrap: wrap; }
  .ac-row > time { flex: 0 0 auto; }
}

/* ==========================================================================
   منوی کشویی موبایل — همهٔ پنل‌ها
   ========================================================================== */
@media (max-width: 900px) {
  /*
    قاعدهٔ پیشین فقط `.profile-side` را می‌شناخت. پنل
    تأمین‌کننده، مدیریت سایت و ویزیتور شناسهٔ دیگری دارند.
  */
  #adminSide, #visitorSide, .pf-side, .vadm-side {
    display: none;
    margin-bottom: 12px;
  }

  #adminSide.open, #visitorSide.open,
  .pf-side.open, .vadm-side.open {
    display: block;
    animation: pside-in .18s ease;
  }

  /* دکمه همیشه دیده شود */
  .pside-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; margin-bottom: 12px;
    border-radius: 12px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line);
    font: inherit; font-size: .86rem; color: var(--ink);
  }
  .pside-toggle:hover { background: var(--green-100); }
  .pside-toggle[aria-expanded="true"] {
    background: var(--green-100);
    border-color: var(--green-btn);
  }

  /*
    ⚠️ `overflow: hidden` روی `body` حذف شد.

    منو **داخل جریان صفحه** باز می‌شود (نه روی‌هم)، پس
    قفل‌کردن اسکرول بدنه یعنی خود منو هم اسکرول نمی‌شود —
    و آیتم‌های پایینی دست‌نیافتنی می‌مانند.

    اگر روزی منو به شکل روی‌هم (overlay) درآمد، آن‌وقت
    قفل معنا پیدا می‌کند.
  */

  /* منو بلند می‌شود — خودش اسکرول داشته باشد */
  #profileSide.open, #adminSide.open,
  #visitorSide.open, .profile-side.open,
  .pf-side.open, .vadm-side.open {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

@media (min-width: 901px) {
  /* در دسکتاپ دکمه لازم نیست */
  .pside-toggle { display: none; }
}

/* ==========================================================================
   نوار ابزار موبایل
   --------------------------------------------------------------------------
   رنگ از `--band` (سبز تیرهٔ برند) با دو لایهٔ نور و سایه — نه سبز
   روشنِ `--green` که روی آن متن سفید کنتراست کافی نداشت و در حالت
   تیره نئونی می‌شد. دکمه‌ها شیشه‌ای با حاشیهٔ مویی، آیکون‌ها SVG.
   ========================================================================== */
.mbar { display: none; }

@media (max-width: 900px) {
  /* نوار بالایی دسکتاپ در موبایل جا ندارد — جایش همین نوار */
  .topbar { display: none; }

  .mbar {
    --mb-h: 34px;
    --mb-glass: rgba(255, 255, 255, .08);
    --mb-glass-on: rgba(255, 255, 255, .16);
    --mb-rim: rgba(255, 255, 255, .14);
    --mb-ink: #fff;
    --mb-ink-soft: rgba(255, 255, 255, .72);

    display: block;
    position: relative;
    color: var(--mb-ink);
    background:
      radial-gradient(120% 180% at 100% 0%, rgba(255, 255, 255, .12) 0%, transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(0, 0, 0, .14) 100%),
      var(--band);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07);
  }

  [data-theme="dark"] .mbar {
    background:
      radial-gradient(120% 180% at 100% 0%, rgba(74, 222, 128, .10) 0%, transparent 55%),
      linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .32) 100%),
      var(--band);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
  }

  .mbar-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
    max-width: 100%; overflow-x: auto;
    scrollbar-width: none;
  }
  .mbar-in::-webkit-scrollbar { display: none; }

  .mbar-group { display: flex; align-items: center; gap: 6px; flex: none; }
  .mbar-end { margin-inline-start: auto; }

  /* ---- دکمهٔ آیکونی ---- */
  .mbar-btn {
    position: relative; flex: none;
    width: var(--mb-h); height: var(--mb-h);
    display: grid; place-items: center;
    padding: 0; border-radius: 11px;
    border: 1px solid var(--mb-rim);
    background: var(--mb-glass);
    color: var(--mb-ink);
    text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, transform .12s ease, border-color .18s ease;
  }
  .mbar-btn:hover { background: var(--mb-glass-on); }
  .mbar-btn:active { transform: scale(.92); background: var(--mb-glass-on); }
  .mbar-btn:focus-visible,
  .mbar-login:focus-visible,
  .mbar-lang:focus-visible,
  .mbar-sel select:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px;
  }

  .mbar-svg { width: 18px; height: 18px; display: block; }

  /* نشان تعداد */
  .mbar-dot {
    position: absolute; top: -5px; inset-inline-end: -5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #F87171, #DC2626);
    color: #fff;
    font-size: .6rem; font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 2px var(--band), 0 2px 6px rgba(220, 38, 38, .45);
  }

  /* ---- ورود مهمان ---- */
  .mbar-login {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--mb-h); padding-inline: 10px 12px;
    border-radius: 11px;
    border: 1px solid var(--mb-rim);
    background: var(--mb-glass);
    color: var(--mb-ink); text-decoration: none;
    font-size: .74rem; font-weight: 700; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, transform .12s ease;
  }
  .mbar-login .mbar-svg { width: 16px; height: 16px; opacity: .9; }
  .mbar-login:active { transform: scale(.96); background: var(--mb-glass-on); }

  /* ---- تم: ماه ↔ خورشید با چرخش نرم ---- */
  .mbar-theme { overflow: hidden; }
  .mbar-theme .mbar-svg {
    grid-area: 1 / 1;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
  }
  .mbar-theme .mbar-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
  [data-theme="dark"] .mbar-theme .mbar-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
  [data-theme="dark"] .mbar-theme .mbar-sun { opacity: 1; transform: none; color: #FDE68A; }

  /* ---- ارز ---- */
  .mbar-sel { flex: none; margin: 0; }
  .mbar-sel select {
    -webkit-appearance: none; appearance: none;
    height: var(--mb-h);
    padding-block: 0;
    padding-inline: 12px 28px;
    border-radius: 11px;
    border: 1px solid var(--mb-rim);
    background-color: var(--mb-glass);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: left 10px center;
    color: var(--mb-ink);
    font: inherit; font-size: .76rem; font-weight: 700;
    cursor: pointer;
    field-sizing: content;          /* پهنا به اندازهٔ ارزِ انتخاب‌شده */
  }
  [dir="ltr"] .mbar-sel select { background-position: right 10px center; }
  .mbar-sel select option { color: var(--ink); background: var(--surface); }

  /* ---- زبان: کنترل بخش‌بندی‌شده ---- */
  .mbar-langs {
    display: flex; align-items: center; gap: 2px; flex: none;
    height: var(--mb-h); padding: 3px;
    border-radius: 11px;
    background: rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .06);
  }

  /*
    هر زبان یک <form> است؛ `display: flex` تا ارتفاع فرم از
    line-height نیاید و دکمه‌ها ناهم‌تراز نشوند.
  */
  .mbar-lang-form { margin: 0; display: flex; height: 100%; }

  .mbar-lang {
    display: block; height: 100%; min-width: 32px;
    padding: 0 8px;
    border-radius: 8px; border: 0;
    background: transparent; cursor: pointer;
    color: var(--mb-ink-soft);
    font: inherit; font-size: .66rem; font-weight: 800;
    letter-spacing: .06em; line-height: 1;
    direction: ltr; white-space: nowrap;   /* کدهای زبان لاتین‌اند */
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, color .18s ease;
  }
  .mbar-lang:hover { color: #fff; }
  .mbar-lang.on {
    background: #fff;
    color: var(--band);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  }
  [data-theme="dark"] .mbar-lang.on { background: #E8EFEB; color: #0F3B25; }

}

/* گوشی‌های باریک (۳۶۰ پیکسل): نوار بدون اسکرول افقی جا شود */
@media (max-width: 369px) {
  .mbar-in { gap: 6px; padding-inline: 10px; }
  .mbar-group { gap: 5px; }
  .mbar-login { width: var(--mb-h); padding: 0; justify-content: center; }
  .mbar-login span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .mbar-lang { min-width: 28px; padding: 0 6px; }
  .mbar-sel select { padding-inline: 10px 24px; background-position: left 8px center; }
  [dir="ltr"] .mbar-sel select { background-position: right 8px center; }
}

/* ردیف لوگوی موبایل: دکمه‌های منو و جست‌وجو یک‌دست و قرینه */
@media screen and (max-width: 768px) {
  .header .hamburger,
  .header .search-mobile-btn {
    width: 42px; height: 42px; min-width: 42px; min-height: 42px;
    display: inline-grid; place-items: center;
    padding: 0; border-radius: 13px;
    border: 1px solid var(--line);
    background: var(--surface-sunken);
    color: var(--ink);
    transition: background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .header .search-mobile-btn {
    margin-inline-start: auto;        /* منو یک طرف، جست‌وجو طرف دیگر */
    border-color: transparent;
    background: var(--green-50);
    color: var(--green-text);
    box-shadow: inset 0 0 0 1px var(--green-100);
  }
  .header .hamburger:active,
  .header .search-mobile-btn:active { transform: scale(.94); }
  .header .hamburger .icon,
  .header .search-mobile-btn .icon { width: 21px; height: 21px; }
}

/* ==========================================================================
   شارژ کیف پول برای سفارش
   ========================================================================== */
.wp-page { max-width: 480px; margin: 32px auto; }

.wp-card {
  padding: 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}

.wp-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.wp-ico { font-size: 1.8rem; }
.wp-head h1 { margin: 0; font-size: 1.1rem; }

.wp-order {
  display: flex; justify-content: space-between;
  padding: 10px 14px; margin-bottom: 16px;
  border-radius: var(--r); background: var(--bg-subtle);
  font-size: .84rem;
}

.wp-rows {
  display: grid; gap: 1px; margin-bottom: 20px;
  border-radius: var(--r); overflow: hidden;
  background: var(--line);
}
.wp-row {
  display: flex; justify-content: space-between;
  padding: 12px 15px; background: var(--surface);
  font-size: .86rem;
}
.wp-row.is-gap {
  background: var(--warn-bg); color: var(--warn-text);
  font-weight: 800;
}

.wp-field { display: block; margin-bottom: 12px; }
.wp-field > span {
  display: block; margin-bottom: 6px;
  font-size: .78rem; color: var(--slate); font-weight: 700;
}
.wp-field input {
  width: 100%; font: inherit; font-size: 1.05rem;
  font-weight: 800; text-align: center;
  padding: 13px 16px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--bg-subtle);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wp-field input:focus {
  outline: none; border-color: var(--green-btn);
  background: var(--surface);
}

.wp-quick {
  display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px;
}
.wp-quick button {
  flex: 1; min-width: 84px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: var(--bg-subtle); border: 1px solid var(--line);
  font: inherit; font-size: .76rem; color: var(--ink);
}
.wp-quick button:hover {
  background: var(--green-100); border-color: var(--green-btn);
}

.wp-go { width: 100%; padding: 14px; font-size: .95rem; }

.wp-note {
  margin: 16px 0 0; font-size: .78rem;
  color: var(--slate); line-height: 2; text-align: center;
}

.wp-back {
  display: block; margin-top: 14px; text-align: center;
  font-size: .82rem; color: var(--slate); text-decoration: none;
}
.wp-back:hover { color: var(--green-text-soft); }

/* ==========================================================================
   پرداخت با کیف پول
   ========================================================================== */
.pay-wallet.is-short { opacity: .78; }

.pay-short {
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--warn-bg); color: var(--warn-text);
  font-size: .72rem; font-weight: 800;
}

/* مودال کسری */
.wshort-in { padding: 26px 24px; text-align: center; }

.wshort-ico { font-size: 2.4rem; display: block; }

.wshort-in h3 {
  margin: 12px 0 18px; font-size: 1.02rem;
}

.wshort-rows {
  display: grid; gap: 1px; margin-bottom: 16px;
  border-radius: var(--r); overflow: hidden;
  background: var(--line); text-align: start;
}
.wshort-rows > div {
  display: flex; justify-content: space-between;
  padding: 11px 15px; background: var(--surface);
  font-size: .85rem;
}
.wshort-rows .is-gap {
  background: var(--warn-bg); color: var(--warn-text);
  font-weight: 800;
}

.wshort-in p {
  margin: 0 0 18px; font-size: .82rem;
  color: var(--slate); line-height: 2;
}

.wshort-acts {
  display: grid; gap: 8px;
}
.wshort-acts .btn { width: 100%; }

.wshort-close {
  margin-top: 14px; padding: 8px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--slate);
}
.wshort-close:hover { color: var(--ink); }

/* ==========================================================================
   تأیید پرداخت از کیف پول
   ========================================================================== */
.wc-page { max-width: 460px; margin: 32px auto; }

.wc-card {
  padding: 26px 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}

.wc-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.wc-ico { font-size: 1.9rem; }
.wc-head h1 { margin: 0; font-size: 1.05rem; }

.wc-order {
  margin: 0 0 20px; font-size: .82rem; color: var(--slate);
}

.wc-rows {
  display: grid; gap: 1px; margin-bottom: 22px;
  border-radius: var(--r); overflow: hidden;
  background: var(--line);
}
.wc-row {
  display: flex; justify-content: space-between;
  padding: 13px 16px; background: var(--surface);
  font-size: .88rem;
}
.wc-row.is-ok {
  background: var(--success-bg); color: var(--success-text);
  font-weight: 700;
}
.wc-row.is-gap {
  background: var(--warn-bg); color: var(--warn-text);
  font-weight: 800;
}

/* تیک تأیید */
.wc-check {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 16px;
  border-radius: 12px; cursor: pointer;
  background: var(--bg-subtle);
  border: 2px solid var(--line);
  transition: border-color .15s ease;
}
.wc-check:has(input:checked) {
  border-color: var(--green-btn);
  background: var(--green-100);
}
.wc-check input {
  width: 19px; height: 19px; flex: none;
  margin-top: 1px; cursor: pointer;
  accent-color: var(--green-btn);
}
.wc-check span {
  font-size: .84rem; line-height: 1.9;
}

.wc-go { width: 100%; padding: 14px; font-size: .95rem; }
.wc-go:disabled {
  opacity: .5; cursor: not-allowed;
}

.wc-note {
  margin: 16px 0 0; padding: 11px 14px;
  border-radius: var(--r); background: var(--bg-subtle);
  font-size: .78rem; color: var(--slate);
  line-height: 1.95; text-align: center;
}

.wc-short { text-align: center; }
.wc-short p {
  margin: 0 0 16px; font-size: .86rem;
  color: var(--warn-text);
}
.wc-acts { display: grid; gap: 8px; }
.wc-acts .btn { width: 100%; }

.wc-back {
  display: block; margin-top: 18px; text-align: center;
  font-size: .82rem; color: var(--slate); text-decoration: none;
}
.wc-back:hover { color: var(--green-text-soft); }

/* ==========================================================================
   رسانهٔ در انتظار تأیید — صفحهٔ بازبینی
   ========================================================================== */
.rv-pending {
  margin: 14px 0;
  padding: 13px 15px;
  border-radius: var(--r);
  background: var(--warn-bg);
  border: 1px dashed var(--warn-text);
}

.rv-pending-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 11px;
}

.rv-pending-badge {
  padding: 4px 13px; border-radius: var(--r-full);
  /* رنگ صریح — نسبت ۵.۱ با سفید */
  background: #92400E; color: #fff;
  font-size: .76rem; font-weight: 800;
}

.rv-pending-head small {
  color: var(--warn-text); font-size: .74rem;
}

.rv-pending-grid {
  display: flex; gap: 9px; flex-wrap: wrap;
}

.rv-pending-item {
  position: relative; margin: 0;
  width: 92px;
  border-radius: 10px; overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--warn-text);
}

/* تصویر اصلی برجسته‌تر */
.rv-pending-item[data-slot="main"] {
  border-color: var(--green-btn);
  box-shadow: 0 0 0 2px var(--green-100);
}

.rv-pending-item img {
  width: 100%; height: 78px;
  object-fit: cover; display: block; cursor: zoom-in;
}

.rv-pending-item .rv-gal-vid {
  display: grid; place-items: center;
  height: 78px; font-size: 1.6rem;
  background: var(--bg-subtle);
}

.rv-pending-item figcaption {
  padding: 4px 6px; text-align: center;
  font-size: .66rem; line-height: 1.5;
  background: var(--bg-subtle);
}

/* دکمهٔ حذف تک‌فایل */
.rv-drop {
  position: absolute; top: 3px;
  inset-inline-end: 3px; margin: 0;
}
.rv-drop button {
  width: 21px; height: 21px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(220, 38, 38, .92); color: #fff;
  font-size: .7rem; line-height: 1;
}
.rv-drop button:hover { background: #B91C1C; }

/* نشان انتظار روی تصویر اصلی */
.rv-thumb { position: relative; }

.rv-wait-tag {
  position: absolute; top: 4px;
  inset-inline-end: 4px;
  padding: 1px 7px; border-radius: var(--r-full);
  background: #92400E; color: #fff;
  font-size: .68rem;
}

@media (max-width: 640px) {
  .rv-pending-item { width: 78px; }
  .rv-pending-item img,
  .rv-pending-item .rv-gal-vid { height: 66px; }
}

/* ==========================================================================
   مودال نتیجهٔ عملیات
   --------------------------------------------------------------------------
   ⚠️ جایگزین نوار پیام بالای صفحه.

   پیام موفق خودکار بسته می‌شود؛ پیام خطا **نمی‌شود** — کاربر
   باید دلیل را بخواند.
   ========================================================================== */
.rm-wrap {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 20px;
}
.rm-wrap.is-gone { display: none; }

.rm-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(3px);
  animation: rm-fade .2s ease;
}

.rm-card {
  position: relative;
  width: 100%; max-width: 360px;
  padding: 32px 26px 24px;
  border-radius: 22px; text-align: center;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
  animation: rm-pop .38s cubic-bezier(.16, 1, .3, 1);
  overflow: hidden;
}
.rm-card + .rm-card { display: none; }

/* ---- آیکون ---- */
.rm-icon { margin-bottom: 16px; }

.rm-svg {
  width: 76px; height: 76px;
  stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
}

.rm-ring {
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: rm-ring .55s cubic-bezier(.65, 0, .45, 1) forwards;
}

.rm-check, .rm-x, .rm-bang {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: rm-draw .35s cubic-bezier(.65, 0, .45, 1) .38s
             forwards;
}

.rm-dot {
  opacity: 0;
  animation: rm-fade .25s ease .62s forwards;
}

/* رنگ بر پایهٔ نوع */
.rm-ok .rm-ring, .rm-ok .rm-check { stroke: #16A34A; }
.rm-bad .rm-ring, .rm-bad .rm-x { stroke: #DC2626; }
.rm-warn .rm-ring, .rm-warn .rm-bang { stroke: #D97706; }
.rm-warn .rm-dot { fill: #D97706; }
.rm-info .rm-ring, .rm-info .rm-bang { stroke: #2563EB; }
.rm-info .rm-dot { fill: #2563EB; }

/* ---- متن ---- */
.rm-title {
  margin: 0 0 8px; font-size: 1.15rem; font-weight: 800;
}
.rm-success .rm-title { color: #15803D; }
.rm-error .rm-title { color: #B91C1C; }
.rm-warning .rm-title { color: #B45309; }
.rm-info .rm-title { color: #1D4ED8; }

.rm-text {
  margin: 0 0 22px; font-size: .9rem;
  line-height: 2; color: var(--ink-soft);
  word-break: break-word;
}

.rm-btn {
  width: 100%; padding: 13px;
  border-radius: 14px; border: 0; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 700;
  background: var(--bg-subtle); color: var(--ink);
  transition: background .15s ease;
}
.rm-btn:hover { background: var(--line); }

.rm-success .rm-btn { background: #DCFCE7; color: #15803D; }
.rm-error .rm-btn { background: #FEE2E2; color: #B91C1C; }
.rm-warning .rm-btn { background: #FEF3C7; color: #B45309; }

/* ---- نوار زمان ---- */
.rm-timer {
  position: absolute; bottom: 0; inset-inline: 0;
  height: 3px; background: var(--line);
}
.rm-timer span {
  display: block; height: 100%; width: 100%;
  background: currentColor; opacity: .5;
  transform-origin: right;
  animation: rm-timer 4s linear forwards;
}
html[dir="ltr"] .rm-timer span { transform-origin: left; }

/* ---- موشن ---- */
@keyframes rm-pop {
  from { opacity: 0; transform: scale(.86) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rm-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes rm-ring {
  to { stroke-dashoffset: 0; }
}
@keyframes rm-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes rm-timer {
  from { transform: scaleX(1); } to { transform: scaleX(0); }
}
@keyframes rm-out {
  to { opacity: 0; transform: scale(.94) translateY(8px); }
}

.rm-card.is-closing { animation: rm-out .22s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .rm-card, .rm-ring, .rm-check, .rm-x,
  .rm-bang, .rm-dot, .rm-timer span {
    animation: none !important;
  }
  .rm-ring, .rm-check, .rm-x, .rm-bang {
    stroke-dashoffset: 0;
  }
  .rm-dot { opacity: 1; }
}

@media (max-width: 480px) {
  .rm-card { max-width: 100%; padding: 28px 20px 20px; }
  .rm-svg { width: 64px; height: 64px; }
}

/* جلوگیری از اسکرول وقتی مودال باز است */
body.rm-open { overflow: hidden; }

/* ضربدر بستن سریع در مودال نتیجه */
.rm-close {
  position: absolute; top: 12px;
  inset-inline-start: 12px;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--bg-subtle); color: var(--slate);
  font-size: .82rem; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.rm-close:hover {
  background: var(--line); color: var(--ink);
}

/* ==========================================================================
   فرم آدرس درون‌خطی در سبد
   ========================================================================== */
.addr-new-toggle {
  border-style: dashed !important;
}
.addr-new-toggle b { color: var(--green-text-soft); }

/*
  ⚠️ `[hidden]` باید صریح باشد.

  بدون این، هر قاعده‌ای که `display` می‌دهد صفت `hidden` را
  بازنویسی می‌کند و فرم همیشه دیده می‌شود.
*/
.addr-form[hidden] { display: none !important; }

.addr-form {
  margin-top: 12px; padding: 16px;
  border-radius: var(--r);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  animation: addr-in .22s ease;
}

@keyframes addr-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; }
}

.addr-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.addr-row > .addr-field { flex: 1; min-width: 150px; }

.addr-field {
  display: block; margin-bottom: 12px;
}
.addr-field > span {
  display: block; margin-bottom: 5px;
  font-size: .76rem; color: var(--slate); font-weight: 700;
}
.addr-field > span b {
  color: var(--danger-text); font-weight: 800;
}

.addr-field input,
.addr-field textarea {
  width: 100%; font: inherit; font-size: .86rem;
  padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); resize: vertical;
}
.addr-field input:focus,
.addr-field textarea:focus {
  outline: none; border-color: var(--green-btn);
}

/* ==========================================================================
   مودال تأیید شمارهٔ مهمان
   ========================================================================== */
.gv { max-width: 350px; }
.gv-in { padding: 30px 24px 22px; text-align: center; }

.gv-ico { font-size: 2.3rem; display: block; }

.gv-in h3 { margin: 12px 0 8px; font-size: 1.05rem; }

.gv-note {
  margin: 0 0 20px; font-size: .84rem;
  color: var(--slate); line-height: 2;
}
.gv-note b {
  color: var(--ink); font-family: ui-monospace, monospace;
}

.gv-code {
  width: 100%; padding: 15px;
  border-radius: 14px; border: 2px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
  font: inherit; font-size: 1.5rem; font-weight: 800;
  text-align: center; letter-spacing: .55em;
  text-indent: .55em;
  font-variant-numeric: tabular-nums;
}
.gv-code:focus {
  outline: none; border-color: var(--green-btn);
  background: var(--surface);
}

.gv-error {
  margin: 10px 0 0; padding: 9px 13px;
  border-radius: 10px; font-size: .8rem;
  background: var(--danger-bg); color: var(--danger-text);
}

.gv-go {
  width: 100%; margin-top: 16px; padding: 13px;
  font-size: .92rem;
}
.gv-go:disabled { opacity: .6; cursor: wait; }

.gv-resend {
  display: block; width: 100%; margin-top: 12px;
  padding: 8px; background: none; border: 0;
  font: inherit; font-size: .82rem; color: var(--green-text-soft);
  cursor: pointer;
}
.gv-resend:disabled {
  color: var(--slate); cursor: default;
}

.gv-close {
  display: block; width: 100%; margin-top: 6px;
  padding: 8px; background: none; border: 0;
  font: inherit; font-size: .8rem; color: var(--slate);
  cursor: pointer;
}

/* ==========================================================================
   ورودی شمارهٔ موبایل بین‌المللی
   ========================================================================== */
.pi { position: relative; margin-bottom: 14px; }

.pi-label {
  display: block; margin-bottom: 6px;
  font-size: .78rem; color: var(--slate); font-weight: 700;
}
.pi-label b { color: var(--danger-text); }

.pi-box {
  /*
    ⚠️ `direction: ltr` عمدی است.

    شمارهٔ تلفن همیشه چپ‌به‌راست خوانده می‌شود — چه سایت RTL
    باشد چه LTR. پس پرچم و پیش‌شماره **همیشه سمت چپ** می‌مانند
    و رقم‌ها از چپ پر می‌شوند.

    این همان قراردادی است که همهٔ سایت‌های بین‌المللی دارند.
  */
  direction: ltr;

  display: flex; align-items: stretch;
  border-radius: 13px; overflow: hidden;
  border: 2px solid var(--line);
  background: var(--surface);
  transition: border-color .15s ease;
}
.pi-box:focus-within { border-color: var(--green-btn); }

/* دکمهٔ کشور */
.pi-flag {
  display: flex; align-items: center; gap: 6px;
  padding: 0 13px; flex: none; cursor: pointer;
  border: 0;
  color: var(--ink);
  font: inherit;
  /* پس‌زمینه و خط جداکننده برداشته شد — یکدست‌تر */
  background: transparent;
}
.pi-flag:hover { background: var(--green-100); }

.pi-emoji { font-size: 1.25rem; line-height: 1; }

.pi-dial {
  font-size: .84rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pi-caret { font-size: .6rem; color: var(--slate); }

/* ورودی شماره */
.pi-number {
  flex: 1; min-width: 0; border: 0;
  padding: 13px 15px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 1rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.pi-number:focus { outline: none; }

/* ---- فهرست کشورها ---- */
.pi-drop {
  /*
    ⚠️ جهت از `html` گرفته می‌شود، نه از `.pi-box` که LTR است.

    نام کشورها فارسی است و باید راست‌چین بماند، هرچند فیلد
    شماره چپ‌چین است.
  */
  position: absolute; z-index: 60;
  inset-inline-start: 0; inset-inline-end: 0;
  margin-top: 5px;
  border-radius: 14px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(15, 23, 42, .18);
  animation: pi-in .16s ease;
}

@keyframes pi-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; }
}

.pi-search-box {
  padding: 9px; border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}
.pi-search {
  width: 100%; font: inherit; font-size: .84rem;
  padding: 9px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.pi-search:focus {
  outline: none; border-color: var(--green-btn);
}

.pi-list {
  list-style: none; margin: 0; padding: 5px;
  max-height: 260px; overflow-y: auto;
  overscroll-behavior: contain;
}

.pi-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--ink);
  font: inherit; font-size: .86rem; text-align: start;
}
.pi-item:hover { background: var(--green-100); }

.pi-i-flag { font-size: 1.2rem; flex: none; }
.pi-i-name { flex: 1; }
.pi-i-dial {
  color: var(--slate); font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

html[dir="rtl"] .pi-drop { direction: rtl; }
html[dir="ltr"] .pi-drop { direction: ltr; }

.pi-empty {
  margin: 0; padding: 20px; text-align: center;
  font-size: .82rem; color: var(--slate);
}

/* راهنمای زنده */
.pi-hint {
  margin: 6px 0 0; min-height: 18px;
  font-size: .76rem; color: var(--slate);
  font-variant-numeric: tabular-nums;
  /* هم‌راستا با خود فیلد که LTR است */
  direction: ltr; text-align: start;
}
.pi-hint.is-ok { color: var(--green-text-soft); }
.pi-hint.is-bad { color: var(--warn-text); }

/* موبایل */
@media (max-width: 480px) {
  .pi-flag { padding: 0 10px; gap: 4px; }
  .pi-dial { font-size: .78rem; }
  .pi-number { font-size: .95rem; padding: 12px; }
  .pi-list { max-height: 46vh; }
  .pi-item { padding: 12px; font-size: .9rem; }
}

/* تصویر پرچم در انتخابگر شماره */
.pi-flag-img {
  width: 22px; height: 15px;
  object-fit: cover; border-radius: 2px; display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.pi-i-img {
  width: 24px; height: 16px; flex: none;
  object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* ==========================================================================
   ورودی شناسه — موبایل یا ایمیل
   ========================================================================== */
.idf { margin-bottom: 14px; }

.idf-tabs {
  display: flex; gap: 5px; margin-bottom: 10px;
  padding: 4px; border-radius: 12px;
  background: var(--bg-subtle);
}

.idf-tab {
  flex: 1; padding: 9px; cursor: pointer;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--slate);
  font: inherit; font-size: .84rem; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.idf-tab.on {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.idf-email {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 13px 15px; border-radius: 13px;
  border: 2px solid var(--line); background: var(--surface);
  color: var(--ink);
  /* ایمیل هم مثل شماره همیشه چپ‌به‌راست */
  direction: ltr; text-align: start;
}
.idf-email:focus {
  outline: none; border-color: var(--green-btn);
}

@media (max-width: 480px) {
  .idf-tab { font-size: .8rem; padding: 10px 6px; }
}

/* دکمهٔ باز کردن قفل در ترجمهٔ انبوه */
.bulk-unlock {
  width: 100%; margin-bottom: 10px;
  font-size: .84rem;
  background: var(--warn-bg) !important;
  color: var(--warn-text) !important;
  border-color: var(--warn-text) !important;
}

/* ==========================================================================
   سلکت استان با جست‌وجو
   ========================================================================== */
.prov { position: relative; }

.prov-btn {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface); color: var(--slate);
  font: inherit; font-size: .86rem; text-align: start;
}
.prov-btn:hover { border-color: var(--green-btn); }

.prov-btn [data-prov-label].is-set { color: var(--ink); }

.prov-caret { font-size: .62rem; color: var(--slate); }

.prov-drop {
  position: absolute; z-index: 50;
  inset-inline: 0; margin-top: 4px;
  border-radius: 12px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
}

.prov-search {
  width: 100%; font: inherit; font-size: .84rem;
  padding: 11px 14px; border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
}
.prov-search:focus { outline: none; }

.prov-list {
  list-style: none; margin: 0; padding: 4px;
  max-height: 230px; overflow-y: auto;
  overscroll-behavior: contain;
}

.prov-item {
  width: 100%; padding: 10px 13px; cursor: pointer;
  border: 0; border-radius: 8px; text-align: start;
  background: transparent; color: var(--ink);
  font: inherit; font-size: .86rem;
}
.prov-item:hover { background: var(--green-100); }

/* ==========================================================================
   انتخاب موقعیت روی نقشه
   ========================================================================== */
.addr-map { margin-bottom: 12px; }

.addr-map-btn {
  width: 100%; padding: 12px 15px; cursor: pointer;
  border-radius: 11px; border: 1px dashed var(--line);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .86rem; text-align: start;
}
.addr-map-btn:hover {
  border-color: var(--green-btn); background: var(--green-100);
}
.addr-map-btn small {
  display: block; margin-top: 3px;
  font-size: .72rem; color: var(--slate);
}
.addr-map-btn:disabled { opacity: .7; cursor: wait; }

.addr-map-box {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
}

.addr-map-canvas {
  height: 260px; background: var(--bg-subtle);
}

.addr-map-act {
  display: flex; gap: 7px; padding: 9px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--line);
}
.addr-map-act .btn { flex: 1; }

.addr-map-hint {
  margin: 0; padding: 9px 13px;
  font-size: .76rem; color: var(--slate);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.addr-map-hint.is-ok { color: var(--green-text-soft); }

@media (max-width: 640px) {
  .addr-map-canvas { height: 220px; }
  .prov-list { max-height: 44vh; }
  .prov-item { padding: 12px 13px; font-size: .9rem; }
}

/* پیام حساب موجود در مودال مهمان */
.gv-known {
  margin: 12px 0 0; padding: 11px 14px;
  border-radius: 11px; font-size: .8rem; line-height: 1.95;
  background: var(--info-bg); color: var(--info-text);
  text-align: start;
}

/* جست‌وجوی نشانی روی نقشه */
.map-search {
  display: flex; gap: 6px; padding: 9px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
}
.map-search input {
  flex: 1; font: inherit; font-size: .84rem;
  padding: 9px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.map-search input:focus {
  outline: none; border-color: var(--green-btn);
}
.map-search button {
  flex: none; width: 40px; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); font-size: .95rem;
}
.map-search button:hover { background: var(--green-100); }

.map-results {
  list-style: none; margin: 0; padding: 5px;
  max-height: 180px; overflow-y: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.map-results button {
  width: 100%; padding: 9px 12px; cursor: pointer;
  border: 0; border-radius: 8px; text-align: start;
  background: transparent; color: var(--ink);
  font: inherit; font-size: .8rem; line-height: 1.8;
}
.map-results button:hover { background: var(--green-100); }

/* ورودی متنی استان وقتی فهرست خالی است */
.prov-free {
  width: 100%; font: inherit; font-size: .86rem;
  padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.prov-free:focus {
  outline: none; border-color: var(--green-btn);
}

.ctry { position: relative; }

/* مرحلهٔ تأیید شماره در مودال مهمان */
.gv-phone-box {
  display: flex; gap: 6px; margin: 16px 0 10px;
}
.gv-phone-box input {
  flex: 1; font: inherit; font-size: 1.05rem;
  font-weight: 700; text-align: center;
  padding: 13px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--bg-subtle);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.gv-phone-box input:focus {
  outline: none; border-color: var(--green-btn);
  background: var(--surface);
}
.gv-phone-box button {
  flex: none; width: 44px; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--slate);
  font-size: 1.1rem;
}
.gv-phone-box button:hover {
  background: var(--green-100); color: var(--ink);
}

.gv-tip {
  margin: 0 0 16px; padding: 10px 13px;
  border-radius: 10px; font-size: .78rem; line-height: 1.95;
  background: var(--info-bg); color: var(--info-text);
  text-align: start;
}

/* ==========================================================================
   صفحهٔ ورود و ثبت‌نام
   --------------------------------------------------------------------------
   دو ستونه: برند سمت راست (RTL)، فرم سمت دیگر.

   ⚠️ ستون برند در موبایل به نشان کوچک بالای فرم تبدیل می‌شود،
   نه اینکه حذف شود.
   ========================================================================== */
.auth {
  /*
    ⚠️ `page-content` دور این نیست، پس حاشیهٔ پیش‌فرض صفحه
    اعمال نمی‌شود. با `margin` منفی، پنل تا لبه‌ها می‌رسد.
  */
  min-height: calc(100vh - 148px);
  display: flex; align-items: stretch;
  margin-block: -1px;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  align-items: stretch;
}

/* ---------- ستون برند ---------- */
.auth-side {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: 48px 44px;
  background: linear-gradient(135deg, #0B3D26 0%, #0F5132 55%,
                              #14653D 100%);
  color: #fff;
}

.auth-side-in {
  position: relative; z-index: 2;
  width: 100%; max-width: 420px;
  margin-inline: auto;
}

.auth-logo {
  display: inline-flex; align-items: center; gap: 11px;
  margin-bottom: 34px; text-decoration: none; color: #fff;
}
.auth-logo b { font-size: 1.15rem; }

.auth-logo-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 13px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 1.25rem; font-weight: 800;
  backdrop-filter: blur(4px);
}
.auth-logo-mark.sm {
  width: 34px; height: 34px; border-radius: 11px;
  font-size: 1rem;
  background: var(--green-100);
  border-color: var(--green-btn);
  color: var(--green-text-soft);
}

.auth-pitch {
  margin: 0 0 30px;
  font-size: 1.6rem; line-height: 1.75; font-weight: 800;
  letter-spacing: -.01em;
}

.auth-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px;
}
.auth-points li {
  display: flex; gap: 13px; align-items: flex-start;
}
.ap-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 12px; font-size: 1.15rem;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .17);
}
.auth-points b {
  display: block; margin-bottom: 3px; font-size: .92rem;
}
.auth-points p {
  margin: 0; font-size: .81rem; line-height: 1.9;
  color: rgba(255, 255, 255, .78);
}

/* لکه‌های تزئینی */
.auth-blob {
  position: absolute; z-index: 1;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle,
              rgba(74, 222, 128, .22) 0%, transparent 68%);
  inset-block-start: -110px; inset-inline-end: -110px;
  pointer-events: none;
}
.auth-blob.two {
  width: 300px; height: 300px;
  inset-block-start: auto; inset-inline-end: auto;
  inset-block-end: -90px; inset-inline-start: -90px;
  background: radial-gradient(circle,
              rgba(255, 255, 255, .1) 0%, transparent 66%);
}

/* ---------- ستون فرم ---------- */
.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
  /*
    پس‌زمینه از خود صفحه می‌آید — تا با تم روشن و تیره
    هماهنگ بماند و لبهٔ ناخواسته نسازد.
  */
}

.auth-box {
  width: 100%; max-width: 400px;
  padding: 36px 32px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(15, 23, 42, .07);
}

/* نشان موبایل */
.auth-mini {
  display: none; align-items: center; gap: 9px;
  margin-bottom: 22px; text-decoration: none;
  color: var(--ink);
}
.auth-mini b { font-size: .98rem; }

.auth-head { margin-bottom: 26px; }

.auth-head h1 {
  margin: 0 0 7px; font-size: 1.45rem; font-weight: 800;
  letter-spacing: -.01em;
}
.auth-head p {
  margin: 0; font-size: .86rem; color: var(--slate);
  line-height: 1.9;
}

.auth-badge {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 15px;
  border-radius: 16px; font-size: 1.5rem;
  background: var(--green-100);
}

/* ---------- فرم ---------- */
.auth-form { display: block; }

.auth-field { display: block; margin-bottom: 16px; }

.auth-field > span {
  display: block; margin-bottom: 7px;
  font-size: .79rem; font-weight: 700; color: var(--slate);
}

.auth-field > input {
  width: 100%; font: inherit; font-size: .97rem;
  padding: 13px 15px; border-radius: 13px;
  border: 2px solid var(--line);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s ease;
}
.auth-field > input:focus {
  outline: none; border-color: var(--green-btn);
}

/* کادر کد */
.auth-code {
  text-align: center !important;
  font-size: 1.5rem !important; font-weight: 800;
  letter-spacing: .5em; text-indent: .5em;
  font-variant-numeric: tabular-nums;
  background: var(--bg-subtle) !important;
}

.auth-pass { animation: auth-slide .2s ease; }

@keyframes auth-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; }
}

.auth-go {
  width: 100%; padding: 14px; margin-top: 4px;
  font-size: .95rem; font-weight: 700;
  border-radius: 13px;
}

/* ==========================================================================
   دکمهٔ ورود وقتی کلیدش خاموش است
   --------------------------------------------------------------------------
   دکمه می‌ماند تا کاربر بداند این راه وجود دارد، ولی باید
   بی‌درنگ «غیرفعال» دیده شود — وگرنه کلیک می‌کند و فکر
   می‌کند سایت خراب است.
   ========================================================================== */
.auth-go[disabled],
.auth-go[aria-disabled="true"] {
  background: var(--line); color: var(--slate);
  box-shadow: none; cursor: not-allowed; opacity: .75;
}
.auth-go[disabled]:hover { background: var(--line); }

.auth-off {
  margin-top: 8px; font-size: .78rem; line-height: 1.9;
  color: var(--slate); text-align: center;
}

/* جداکنندهٔ «یا» */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  font-size: .76rem; color: var(--slate);
}
.auth-or::before,
.auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.auth-switch {
  display: block; width: 100%; padding: 12px;
  cursor: pointer; border-radius: 13px;
  border: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font: inherit; font-size: .88rem; font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.auth-switch:hover {
  background: var(--green-100);
  border-color: var(--green-btn);
}

.auth-foot {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center; font-size: .85rem; color: var(--slate);
}
.auth-foot a {
  color: var(--green-text-soft); font-weight: 700;
  text-decoration: none;
}
.auth-foot a:hover { text-decoration: underline; }

/* ورودی شماره داخل کارت ورود */
.auth-form .pi { margin-bottom: 0; }

/* ---------- تبلت و موبایل ---------- */
@media (max-width: 900px) {
  .auth { min-height: auto; }

  .auth-grid { grid-template-columns: 1fr; }

  /*
    ⚠️ ستون برند حذف نمی‌شود — به نوار کوتاه تبدیل می‌شود
    تا کاربر بداند کجاست.
  */
  .auth-side { display: none; }

  .auth-mini { display: inline-flex; }

  .auth-main {
    padding: 26px 16px 40px;
  }

  .auth-box {
    max-width: 460px;
    padding: 28px 22px;
    box-shadow: none;
  }

  .auth-head h1 { font-size: 1.3rem; }
}

@media (max-width: 420px) {
  .auth-box {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .auth-code { font-size: 1.3rem !important; letter-spacing: .38em; }
}

/* تیک پذیرش قوانین در فرم ثبت‌نام */
.auth-terms {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 18px; padding: 12px 14px;
  border-radius: 12px; cursor: pointer;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  transition: border-color .15s ease;
}
.auth-terms:has(input:checked) {
  border-color: var(--green-btn);
  background: var(--green-100);
}
.auth-terms input {
  width: 18px; height: 18px; flex: none;
  margin-top: 1px; cursor: pointer;
  accent-color: var(--green-btn);
}
.auth-terms span {
  font-size: .8rem; line-height: 1.95; color: var(--ink-soft);
}
.auth-terms a {
  color: var(--green-text-soft); font-weight: 700;
}

.auth-vendor {
  margin-top: 12px; text-align: center;
  font-size: .8rem; color: var(--slate);
}
.auth-vendor a {
  color: var(--green-text-soft); font-weight: 700;
  text-decoration: none;
}
.auth-vendor a:hover { text-decoration: underline; }

/* کد حالت توسعه */
.dev-code {
  margin-bottom: 16px; padding: 10px 14px;
  border-radius: 10px; font-size: .82rem;
  background: var(--warn-bg); color: var(--warn-text);
  text-align: center;
}
.dev-code b {
  font-family: ui-monospace, monospace; font-size: 1rem;
  letter-spacing: .1em;
}

/* ==========================================================================
   مدیریت کشورها
   ========================================================================== */
.ct-head {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; justify-content: space-between;
  margin-bottom: 20px;
}
.ct-head h1 { margin: 0 0 4px; font-size: 1.3rem; }
.ct-sub { margin: 0; font-size: .84rem; color: var(--slate); }
.ct-acts { display: flex; gap: 8px; flex-wrap: wrap; }

.ct-warn {
  padding: 11px 15px; margin-bottom: 16px;
  border-radius: var(--r); font-size: .82rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
}

.ct-search {
  display: flex; gap: 8px; margin-bottom: 16px;
  max-width: 420px;
}
.ct-search input {
  flex: 1; font: inherit; font-size: .86rem;
  padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.ct-search input:focus {
  outline: none; border-color: var(--green-btn);
}

/* ---- جدول ---- */
.ct-table-wrap {
  overflow-x: auto; border-radius: var(--r);
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.ct-table {
  width: 100%; min-width: 680px;
  border-collapse: collapse; font-size: .85rem;
}
.ct-table th {
  padding: 11px 13px; text-align: start;
  font-size: .78rem; font-weight: 700; color: var(--slate);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ct-table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ct-table tbody tr:last-child td { border-bottom: 0; }
.ct-table tbody tr:hover { background: var(--bg-subtle); }
.ct-table tr.is-off { opacity: .55; }

.ct-table td b { display: block; }
.ct-table td small {
  display: block; font-size: .72rem; color: var(--slate);
}
.ct-table code {
  font-size: .8rem; padding: 2px 7px;
  border-radius: 6px; background: var(--bg-subtle);
}

.ct-flag { font-size: 1.4rem; }
.ct-flag img {
  width: 28px; height: 19px;
  object-fit: cover; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.ct-ok { color: var(--green-text-soft); font-weight: 800; }
.ct-dim { color: var(--slate); }

.ct-pill {
  padding: 4px 13px; cursor: pointer;
  border-radius: var(--r-full); border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--slate);
  font: inherit; font-size: .74rem; font-weight: 700;
}
.ct-pill.on {
  background: var(--green-100); color: var(--green-text-soft);
  border-color: var(--green-btn);
}

.ct-edit {
  font-size: .8rem; color: var(--green-text-soft);
  text-decoration: none; font-weight: 700;
}
.ct-edit:hover { text-decoration: underline; }

.ct-empty {
  padding: 30px !important; text-align: center;
  color: var(--slate);
}

/* ---- فرم ---- */
.ct-form-wrap { max-width: 760px; }

.ct-fs {
  margin: 0 0 18px; padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
}
.ct-fs legend {
  padding: 0 8px; font-size: .84rem; font-weight: 800;
  color: var(--green-text-soft);
}

.ct-note {
  margin: 0 0 14px; font-size: .8rem;
  color: var(--slate); line-height: 1.9;
}

.ct-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.ct-row > .ct-field { flex: 1; min-width: 150px; }

.ct-field { display: block; margin-bottom: 12px; }
.ct-field > span {
  display: block; margin-bottom: 5px;
  font-size: .78rem; font-weight: 700; color: var(--slate);
}
.ct-field > span b { color: var(--danger-text); }
.ct-field input {
  width: 100%; font: inherit; font-size: .88rem;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.ct-field input:focus {
  outline: none; border-color: var(--green-btn);
}
.ct-field small {
  display: block; margin-top: 4px;
  font-size: .72rem; color: var(--slate);
}

.ct-flag-prev {
  margin-top: 8px; width: 54px; height: 36px;
  object-fit: cover; border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}

.ct-check {
  display: flex; gap: 9px; align-items: center;
  padding: 10px 13px; cursor: pointer;
  border-radius: 10px; background: var(--bg-subtle);
}
.ct-check input {
  width: 17px; height: 17px; cursor: pointer;
  accent-color: var(--green-btn);
}
.ct-check span { font-size: .84rem; }

.ct-form-acts {
  display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px;
}

.ct-guide {
  padding: 14px 18px; margin-bottom: 18px;
  border-radius: var(--r);
  background: var(--info-bg); color: var(--info-text);
  font-size: .82rem; line-height: 2;
}
.ct-guide b { display: block; margin-bottom: 6px; }
.ct-guide p { margin: 8px 0 0; }
.ct-guide ol { margin: 8px 0 0; padding-inline-start: 20px; }

/* ---- موبایل ---- */
@media (max-width: 640px) {
  .ct-head { flex-direction: column; gap: 12px; }
  .ct-acts { width: 100%; }
  .ct-acts .btn { flex: 1; }
  .ct-search { max-width: none; }
  .ct-table { font-size: .8rem; }
  .ct-table th, .ct-table td { padding: 9px 10px; }
  .ct-row > .ct-field { min-width: 100%; }
}

/* ==========================================================================
   خروج کالا
   ========================================================================== */
.dx-head {
  display: flex; align-items: center; gap: 14px;
  justify-content: space-between; flex-wrap: wrap;
  margin-bottom: 18px;
}
.dx-head h1 { margin: 0; font-size: 1.25rem; }
.dx-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }

.dx-note {
  margin: 0 0 18px; font-size: .84rem;
  color: var(--slate); line-height: 1.95;
}

/* سند ناتمام */
.dx-draft {
  display: flex; align-items: center; gap: 14px;
  justify-content: space-between; flex-wrap: wrap;
  padding: 14px 17px; margin-bottom: 16px;
  border-radius: var(--r);
  background: var(--warn-bg); color: var(--warn-text);
  border: 1px dashed var(--warn-text);
}
.dx-draft p { margin: 3px 0 0; font-size: .82rem; }

/* دکمهٔ سند تازه */
.dx-new {
  display: flex; align-items: center; gap: 15px;
  padding: 20px; margin-bottom: 26px;
  border-radius: var(--r-lg); text-decoration: none;
  background: var(--surface); color: var(--ink);
  border: 2px dashed var(--line);
  transition: border-color .15s ease, background .15s ease;
}
.dx-new:hover {
  border-color: var(--green-btn); background: var(--green-100);
}
.dx-new-ico {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  border-radius: 14px; font-size: 1.5rem;
  background: var(--green-100); color: var(--green-text-soft);
}
.dx-new b { display: block; font-size: .96rem; }
.dx-new p {
  margin: 3px 0 0; font-size: .8rem; color: var(--slate);
}

.dx-sub { font-size: 1rem; margin: 0 0 12px; }

.dx-list { display: grid; gap: 8px; }
.dx-row {
  display: flex; align-items: center; gap: 12px;
  justify-content: space-between;
  padding: 13px 16px; border-radius: var(--r);
  text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
}
.dx-row:hover { border-color: var(--green-btn); }
.dx-row-main b { display: block; font-size: .9rem; }
.dx-row-main small,
.dx-row-meta small {
  font-size: .74rem; color: var(--slate);
}
.dx-row-meta { text-align: end; }
.dx-row-meta span {
  display: block; font-size: .82rem; font-weight: 700;
}

/* ---- فرم ---- */
.dx-form-wrap { max-width: 820px; }

.dx-row { display: flex; gap: 12px; flex-wrap: wrap; }
.dx-row > .dx-field { flex: 1; min-width: 160px; }

.dx-field { display: block; margin-bottom: 13px; }
.dx-field > span {
  display: block; margin-bottom: 5px;
  font-size: .78rem; font-weight: 700; color: var(--slate);
}
.dx-field > span b { color: var(--danger-text); }
.dx-field input,
.dx-field select,
.dx-field textarea {
  width: 100%; font: inherit; font-size: .88rem;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); resize: vertical;
}
.dx-field input:focus,
.dx-field select:focus,
.dx-field textarea:focus {
  outline: none; border-color: var(--green-btn);
}

.dx-acts { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---- صفحهٔ اسکن ---- */
.dx-scan-wrap { max-width: 760px; }

.dx-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  justify-content: space-between;
  padding: 13px 17px; margin-bottom: 12px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
.dx-bar b { display: block; font-size: .92rem; }
.dx-bar small { font-size: .74rem; color: var(--slate); }

.dx-count { text-align: center; flex: none; }
.dx-count span {
  display: block; font-size: 1.5rem; font-weight: 800;
  color: var(--green-text-soft); line-height: 1.2;
}
.dx-count small { font-size: .7rem; color: var(--slate); }

.dx-hint {
  margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--r); font-size: .79rem; line-height: 1.9;
  background: var(--info-bg); color: var(--info-text);
}

.dx-input-box {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.dx-input-box input {
  font: inherit; padding: 14px 16px;
  border-radius: 12px; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink);
}
#dxCode {
  flex: 1; min-width: 0;
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em;
}
#dxCode:focus {
  outline: none; border-color: var(--green-btn);
}
#dxPrice { width: 130px; flex: none; font-size: .88rem; }

.dx-cam {
  flex: none; width: 54px; cursor: pointer;
  border-radius: 12px; border: 2px solid var(--line);
  background: var(--bg-subtle); font-size: 1.3rem;
}
.dx-cam:hover {
  background: var(--green-100); border-color: var(--green-btn);
}

.dx-msg {
  margin: 0 0 12px; padding: 10px 14px;
  border-radius: 10px; font-size: .84rem; font-weight: 700;
}
.dx-msg.is-ok {
  background: var(--success-bg); color: var(--success-text);
}
.dx-msg.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

/* دوربین */
.dx-camera {
  position: relative; margin-bottom: 14px;
  border-radius: var(--r); overflow: hidden;
  background: #000;
}
.dx-camera video {
  width: 100%; max-height: 300px;
  object-fit: cover; display: block;
}
.dx-cam-frame {
  position: absolute; inset: 22% 16%;
  border: 3px solid rgba(255, 255, 255, .85);
  border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .32);
}
.dx-cam-close {
  position: absolute; bottom: 10px;
  inset-inline-start: 50%; transform: translateX(50%);
  padding: 8px 18px; cursor: pointer;
  border-radius: var(--r-full); border: 0;
  background: rgba(255, 255, 255, .94);
  font: inherit; font-size: .82rem; font-weight: 700;
}

/* فهرست اقلام */
.dx-items {
  display: grid; gap: 5px; margin-bottom: 20px;
  max-height: 340px; overflow-y: auto;
}
.dx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .83rem;
}
.dx-item.is-new {
  animation: dx-in .3s ease;
  border-color: var(--green-btn);
  background: var(--green-100);
}
@keyframes dx-in {
  from { opacity: 0; transform: translateY(-8px); }
}
.dx-item code {
  font-size: .82rem; font-weight: 700;
  padding: 2px 8px; border-radius: 6px;
  background: var(--bg-subtle);
}
.dx-item-p { flex: 1; color: var(--slate); }
.dx-item-price {
  font-size: .78rem; font-variant-numeric: tabular-nums;
}
.dx-del {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 0;
  background: var(--danger-bg); color: var(--danger-text);
  font-size: .7rem;
}

.dx-finish {
  padding: 16px; border-radius: var(--r);
  background: var(--bg-subtle); border: 1px solid var(--line);
}
.dx-done { width: 100%; padding: 14px; font-size: .95rem; }

/* ---- جزئیات ---- */
.dx-card {
  padding: 16px 18px; margin-bottom: 14px;
  border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.dx-card h2 {
  margin: 0 0 12px; font-size: .92rem;
  color: var(--green-text-soft);
}
.dx-kv {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.dx-kv > div { font-size: .85rem; }
.dx-kv span {
  display: block; font-size: .73rem; color: var(--slate);
}
.dx-addr {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .83rem; line-height: 1.95;
}

.dx-lines { display: grid; gap: 7px; }
.dx-line {
  display: flex; justify-content: space-between;
  padding: 9px 13px; border-radius: 9px;
  background: var(--bg-subtle); font-size: .85rem;
}

/* ---- گزارش ---- */
.dx-filters {
  display: grid; gap: 8px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dx-filters input,
.dx-filters select {
  font: inherit; font-size: .84rem;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.dx-filters input:focus,
.dx-filters select:focus {
  outline: none; border-color: var(--green-btn);
}

.dx-totals {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.dx-totals > div {
  padding: 13px 16px; border-radius: var(--r);
  background: var(--green-100); text-align: center;
}
.dx-totals span {
  display: block; font-size: .74rem;
  color: var(--green-text-soft);
}
.dx-totals b {
  font-size: 1.15rem; color: var(--green-text-soft);
}

/* ---- موبایل ---- */
@media (max-width: 640px) {
  .dx-bar { padding: 11px 13px; }
  .dx-count span { font-size: 1.3rem; }
  #dxPrice { width: 96px; }
  .dx-cam { width: 48px; }
  .dx-row > .dx-field { min-width: 100%; }
  .dx-items { max-height: 44vh; }
  .dx-item { font-size: .79rem; padding: 9px 11px; }
  .dx-item-p { display: none; }
  .dx-filters { grid-template-columns: 1fr 1fr; }
}

/* کارت اعلان مرورگر */
.push-card {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px; margin-bottom: 18px;
  border-radius: var(--r); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
}
.push-card[data-state="on"] {
  border-color: var(--green-btn); background: var(--green-100);
}
.push-card[data-state="denied"],
.push-card[data-state="unsupported"] { opacity: .75; }

.push-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 13px; font-size: 1.3rem;
  background: var(--bg-subtle);
}
.push-card[data-state="on"] .push-ico { background: var(--surface); }

.push-txt { flex: 1; min-width: 150px; }
.push-txt b { display: block; font-size: .9rem; }
.push-txt p {
  margin: 3px 0 0; font-size: .79rem;
  color: var(--slate); line-height: 1.85;
}
.push-acts { display: flex; gap: 7px; flex-wrap: wrap; }

@media (max-width: 520px) {
  .push-acts { width: 100%; }
  .push-acts .btn { flex: 1; }
}



/* ==========================================================================
   مودال جزئیات کالا در بازبینی
   --------------------------------------------------------------------------
   ⚠️ نکتهٔ کلیدی: تصویر **نباید** کادر را پر کند.

   تصویر کوچک یا با نسبت عجیب، با `object-fit: contain` در
   کادر ثابت می‌نشیند و بقیهٔ اطلاعات دیده می‌شود.
   ========================================================================== */

/* دکمه‌ها کنار هم — پیش‌تر زیر هم بودند */
/*
  ⚠️ دکمه‌ها **کنار هم** در دسکتاپ.

  علت قبلی: `.rv-actions` پدر `display: grid` داشت که روی
  فرزندها غالب می‌شد — `flex` روی خودش کافی نبود.
*/
.rv-actions.rv-actions-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px; flex-wrap: wrap;
  align-items: center;
  grid-template-columns: none !important;
}

.rv-actions-row > form,
.rv-actions-row > .rv-reject,
.rv-actions-row > button {
  display: inline-flex; margin: 0; width: auto;
}

.rv-actions-row .btn { white-space: nowrap; }
.rv-actions-row .rv-reject { position: relative; }

/*
  فرم دلیل رد — شناور، تا ردیف را بلند نکند.
*/
.rv-actions-row .rv-reject[open] .rv-reject-form {
  position: absolute; z-index: 20;
  top: calc(100% + 6px); inset-inline-start: 0;
  min-width: 230px; padding: 10px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}

.btn-danger-ghost {
  border: 1px solid var(--danger-text);
  background: transparent; color: var(--danger-text);
}
.btn-danger-ghost:hover { background: var(--danger-bg); }

/* ---- پوسته ---- */
.rvm {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.rvm[hidden] { display: none; }

.rvm-back {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(3px);
}

.rvm-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 720px;
  /*
    ⚠️ ارتفاع سقف دارد و بدنه خودش اسکرول می‌شود.

    بدون این، مودال از صفحه بیرون می‌زند و دکمهٔ بستن گم
    می‌شود.
  */
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .34);
  animation: rvm-in .18s ease;
}
@keyframes rvm-in {
  from { opacity: 0; transform: translateY(12px); }
}

.rvm-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; flex: none;
  border-bottom: 1px solid var(--line);
}
.rvm-head b {
  flex: 1; font-size: .98rem; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

.rvm-x {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; font-size: .8rem;
  background: var(--bg-subtle); color: var(--slate);
}
.rvm-x:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

.rvm-body {
  padding: 16px 18px 22px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  text-align: start;
}

.rvm-load {
  padding: 44px 20px; text-align: center; color: var(--slate);
}

/* ---- هشدارها ---- */
.rvm-flags { display: grid; gap: 6px; margin-bottom: 14px; }
.rvm-flag {
  padding: 9px 13px; border-radius: 9px;
  font-size: .8rem; font-weight: 600; line-height: 1.8;
}
.rvm-flag.is-warn {
  background: var(--warn-bg); color: var(--warn-text);
}
.rvm-flag.is-info {
  background: var(--info-bg); color: var(--info-text);
}

/* ==========================================================================
   اسلایدر
   --------------------------------------------------------------------------
   ⚠️ ارتفاع **ثابت** است، نه نسبت‌محور.

   با `aspect-ratio` یک تصویر عریض کادر را بلند می‌کند و
   اطلاعات زیرش از صفحه بیرون می‌زند.
   ========================================================================== */
.rvm-slider {
  position: relative; margin-bottom: 16px;
  border-radius: 12px; overflow: hidden;
  background: #0F172A;
  height: 300px;
}

.rvm-track {
  display: flex; height: 100%;
  transition: transform .26s ease;
}

.rvm-slide {
  position: relative; flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/*
  ⚠️ `contain` نه `cover`.

  تصویر یک‌پیکسلی یا با نسبت عجیب نباید کشیده شود — همان
  اندازهٔ واقعی وسط کادر می‌نشیند.
*/
.rvm-slide img,
.rvm-slide video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

.rvm-tag {
  position: absolute; top: 10px; inset-inline-start: 10px;
  padding: 3px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  background: rgba(255, 255, 255, .95); color: #0F172A;
}
.rvm-tag.is-pending { background: #FDE68A; color: #78350F; }

.rvm-size {
  position: absolute; bottom: 10px; inset-inline-start: 10px;
  padding: 2px 9px; border-radius: 6px; font-size: .68rem;
  background: rgba(0, 0, 0, .6); color: #fff;
}

.rvm-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; cursor: pointer; z-index: 2;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; font-size: 1.25rem;
  background: rgba(255, 255, 255, .94); color: #0F172A;
}
.rvm-nav.is-prev { inset-inline-start: 10px; }
.rvm-nav.is-next { inset-inline-end: 10px; }

.rvm-count {
  position: absolute; bottom: 10px; inset-inline-end: 10px;
  padding: 3px 11px; border-radius: 999px; font-size: .74rem;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ---- اطلاعات ---- */
.rvm-grid {
  display: grid; gap: 9px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.rvm-kv {
  padding: 10px 13px; border-radius: 10px;
  background: var(--bg-subtle);
  min-width: 0;
}
.rvm-kv span {
  display: block; font-size: .7rem; color: var(--slate);
  margin-bottom: 3px;
}
.rvm-kv b {
  font-size: .86rem; display: block;
  overflow: hidden; text-overflow: ellipsis;
}

.rvm-h {
  margin: 18px 0 8px; font-size: .86rem; font-weight: 800;
  color: var(--green-text-soft);
}

.rvm-text {
  margin: 0; font-size: .84rem; line-height: 2.05;
  color: var(--ink-soft); word-break: break-word;
}
.rvm-long {
  max-height: 220px; overflow-y: auto;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-subtle);
}

.rvm-table {
  width: 100%; border-collapse: collapse; font-size: .82rem;
}
.rvm-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.rvm-table td:first-child { color: var(--slate); width: 42%; }
.rvm-table tr:last-child td { border-bottom: 0; }

/* ---- موبایل ---- */
@media (max-width: 640px) {
  .rvm { padding: 0; }
  .rvm-box {
    max-width: none; max-height: 100vh;
    height: 100vh; border-radius: 0;
  }
  .rvm-slider { height: 220px; }
  .rvm-grid { grid-template-columns: repeat(2, 1fr); }
  .rv-actions-row { width: 100%; }
  .rv-actions-row > * { flex: 1 1 auto; }
}

/* ==========================================================================
   نوار رسانهٔ در انتظار — بخش ویرایش‌ها
   --------------------------------------------------------------------------
   ⚠️ پیش‌تر این بخش هیچ رسانه‌ای نشان نمی‌داد و «تغییر محسوسی
   ثبت نشده» می‌گفت — حتی وقتی ده تصویر عوض شده بود.
   ========================================================================== */
.rv-pending-media {
  margin: 12px 0; padding: 12px 14px;
  border-radius: 12px;
  background: var(--warn-bg);
  border: 1px dashed var(--warn-text);
}

.rv-pm-head {
  margin-bottom: 10px; font-size: .82rem; font-weight: 700;
  color: var(--warn-text);
}
.rv-pm-head small {
  display: block; margin-top: 2px;
  font-size: .72rem; font-weight: 400; opacity: .85;
}

.rv-pm-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.rv-pm-item {
  position: relative; flex: 0 0 auto;
  width: 74px; height: 74px;
  border-radius: 9px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.rv-pm-item img {
  width: 100%; height: 100%; object-fit: cover;
}

.rv-pm-vid { font-size: 1.6rem; }

.rv-pm-tag {
  position: absolute; bottom: 3px; inset-inline-start: 3px;
  padding: 1px 5px; border-radius: 5px; font-size: .64rem;
  background: rgba(0, 0, 0, .62); color: #fff;
}

@media (max-width: 640px) {
  .rv-pm-item { width: 62px; height: 62px; }
}

/* نشان تصویر اصلی روی بندانگشتی گالری */
.pd-thumb { position: relative; }

.pd-main-tag {
  position: absolute; top: 2px; inset-inline-start: 2px;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: .58rem;
  /* سبز تیره‌تر — نسبت ۵.۴ با سفید */
  background: #15803D; color: #fff;
  pointer-events: none;
}

/* ==========================================================================
   نمایشگر بزرگ‌نمای رسانه
   --------------------------------------------------------------------------
   ⚠️ جدا از مودال کامل: کاربر فقط می‌خواهد یک تصویر را بزرگ
   ببیند، نه همهٔ اطلاعات کالا را.
   ========================================================================== */
.rvp {
  position: fixed; inset: 0; z-index: 3200;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
}
.rvp[hidden] { display: none; }

.rvp-back {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .88);
}

.rvp-box {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.rvp-box img,
.rvp-box video {
  max-width: 100%; max-height: calc(100vh - 64px);
  width: auto; height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

.rvp-x {
  position: absolute; top: 16px; inset-inline-end: 16px;
  z-index: 2; width: 38px; height: 38px; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; font-size: .9rem;
  background: rgba(255, 255, 255, .94); color: #0F172A;
}

/* آیتم رسانه به دکمه تبدیل شد */
button.rv-pm-item {
  padding: 0; cursor: zoom-in; font: inherit;
}
button.rv-pm-item:hover {
  border-color: var(--green-btn);
}

/* ریل مودال — نشانهٔ کشیدن */
.rvm-track { cursor: grab; touch-action: pan-y; }
.rvm-slide img,
.rvm-slide video { user-select: none; -webkit-user-drag: none; }

@media (max-width: 640px) {
  .rvp { padding: 0; }
  .rvp-box img, .rvp-box video {
    max-height: 100vh; border-radius: 0;
  }
}

/* بازخورد رسیدن به سقف تعداد */
.pd-qty.is-capped,
input[name="qty"].is-capped {
  animation: qty-cap .3s ease;
  border-color: var(--warn-text) !important;
}
@keyframes qty-cap {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ==========================================================================
   سفارش مستمر
   ========================================================================== */
.rc-intro {
  margin-bottom: 18px; font-size: .88rem; line-height: 2;
  color: var(--ink-soft);
}

.rc-new {
  display: flex; gap: 9px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.rc-new input {
  flex: 1; min-width: 200px;
  font: inherit; font-size: .88rem;
  padding: 11px 15px; border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

.rc-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.rc-card {
  display: block; padding: 16px 18px;
  border-radius: 15px; text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line); color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.rc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .09);
}
.rc-card.is-active { border-color: var(--green-btn); }
.rc-card.is-paused { opacity: .78; }

.rc-card-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 9px;
}
.rc-card-head b { flex: 1; font-size: .96rem; }

.rc-state {
  padding: 2px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  background: var(--bg-subtle); color: var(--slate);
}
.rc-state.is-active {
  background: var(--success-bg); color: var(--success-text);
}
.rc-state.is-paused {
  background: var(--warn-bg); color: var(--warn-text);
}

.rc-meta {
  display: grid; gap: 4px; margin-bottom: 11px;
  font-size: .75rem; color: var(--slate);
}

.rc-items {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-bottom: 11px;
}
.rc-chip {
  padding: 3px 10px; border-radius: 999px;
  font-size: .71rem;
  background: var(--bg-subtle); color: var(--ink-soft);
}
.rc-empty-items { font-size: .73rem; color: var(--slate); }

.rc-foot {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--line);
  font-size: .77rem;
}
.rc-total { font-weight: 700; color: var(--green-text-soft); }
.rc-next { margin-inline-start: auto; color: var(--slate); }

.rc-note {
  margin-top: 9px; padding: 7px 11px; border-radius: 8px;
  font-size: .72rem;
  background: var(--warn-bg); color: var(--warn-text);
}

/* ---- جزئیات ---- */
.rc-alert {
  padding: 12px 16px; margin-bottom: 16px;
  border-radius: 11px; font-size: .85rem; font-weight: 600;
}
.rc-alert.is-ok {
  background: var(--success-bg); color: var(--success-text);
}
.rc-alert.is-warn {
  background: var(--warn-bg); color: var(--warn-text);
}
.rc-alert.is-off {
  background: var(--bg-subtle); color: var(--slate);
}

.rc-item-list { display: grid; gap: 8px; }

.rc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 11px;
  background: var(--bg-subtle);
}
.rc-item.is-off { opacity: .6; }

.rc-item-info { flex: 1; min-width: 0; }
.rc-item-info b {
  display: block; font-size: .86rem;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-item-info small {
  display: block; font-size: .71rem; color: var(--slate);
}
.rc-item-info .is-warn { color: var(--warn-text); }

.rc-item-qty {
  display: flex; gap: 4px; margin: 0;
}
.rc-item-qty input {
  width: 62px; font: inherit; font-size: .82rem;
  padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  text-align: center;
}
.rc-item-qty button,
.rc-item-del {
  width: 30px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--slate);
  font-size: .8rem;
}
.rc-item-del:hover {
  background: var(--danger-bg); color: var(--danger-text);
  border-color: var(--danger-text);
}

.rc-sum {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .84rem;
}
.rc-sum b {
  color: var(--green-text-soft); font-size: .95rem;
}
.rc-sum small {
  display: block; margin-top: 3px;
  font-size: .7rem; color: var(--slate);
}

/* ⚠️ تیک تأیید — برجسته، چون پول از کیف پول کم می‌شود */
.rc-consent {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 16px; padding: 14px 16px;
  border-radius: 12px; cursor: pointer;
  background: var(--warn-bg);
  border: 1px solid var(--warn-text);
}
.rc-consent input {
  width: 19px; height: 19px; flex: none; margin-top: 2px;
  cursor: pointer; accent-color: var(--green-btn);
}
.rc-consent b {
  display: block; font-size: .85rem; color: var(--warn-text);
}
.rc-consent small {
  display: block; margin-top: 4px;
  font-size: .74rem; line-height: 1.9;
  color: var(--warn-text); opacity: .88;
}

.rc-runs { display: grid; gap: 6px; }

.rc-run {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px; border-radius: 9px;
  font-size: .78rem; background: var(--bg-subtle);
}
.rc-run.is-ok { border-inline-start: 3px solid var(--green-btn); }
.rc-run.is-no_funds,
.rc-run.is-no_stock,
.rc-run.is-error {
  border-inline-start: 3px solid var(--danger-text);
}
.rc-run.is-partial {
  border-inline-start: 3px solid var(--warn-text);
}

.rc-run-when { color: var(--slate); font-size: .73rem; }
.rc-run-result { font-weight: 700; }
.rc-run-order {
  margin-inline-start: auto; color: var(--green-text-soft);
}
.rc-run small {
  width: 100%; font-size: .71rem; color: var(--slate);
}

.rc-danger { margin-top: 22px; text-align: center; }

.rc-admin-acts { display: flex; gap: 4px; margin: 0; }

@media (max-width: 640px) {
  .rc-grid { grid-template-columns: 1fr; }
  .rc-new { flex-direction: column; }
  .rc-new input, .rc-new .btn { width: 100%; }
  .rc-item { flex-wrap: wrap; }
  .rc-item-info { width: 100%; }
}

/* ==========================================================================
   ساعت ۲۴ ساعته
   --------------------------------------------------------------------------
   ⚠️ `<input type="time">` بر پایهٔ زبان **سیستم عامل** تصمیم
   می‌گیرد AM/PM نشان دهد یا نه — نه زبان صفحه.

   کاربر ویندوز انگلیسی، AM/PM می‌بیند حتی در صفحهٔ فارسی.

   با `lang="fa-IR"` روی خود فیلد، مرورگر ۲۴ ساعته می‌دهد.
   ========================================================================== */
input[type="time"] {
  direction: ltr; text-align: center;
  font-variant-numeric: tabular-nums;
}

/*
  ⚠️ بخش AM/PM پنهان نشود.

  مرورگر ۱۲ یا ۲۴ساعته‌بودن را از تنظیمات سیستم‌عامل می‌گیرد، نه همیشه
  از `lang`. پنهان‌کردنش در مرورگرهای ۱۲ساعته «۱۸:۰۰» را «06:00»
  نشان می‌داد و انتخاب «بعدازظهر» ممکن نبود.
*/

/* ==========================================================================
   لغو سفارش
   ========================================================================== */
.order-acts {
  display: flex; gap: 7px; align-items: center;
}

.order-cancel {
  padding: 6px 13px; cursor: pointer;
  border-radius: 9px; font: inherit; font-size: .76rem;
  background: transparent; color: var(--danger-text);
  border: 1px solid var(--danger-text);
}
.order-cancel:hover { background: var(--danger-bg); }

/* ---- مودال ---- */
.cm {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cm[hidden] { display: none; }

.cm-back {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(3px);
}

.cm-box {
  position: relative; z-index: 1;
  width: min(440px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .3);
}

.cm-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; flex: none;
  border-bottom: 1px solid var(--line);
}
.cm-head b { flex: 1; font-size: .92rem; }

.cm-x {
  width: 29px; height: 29px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; font-size: .78rem;
  background: var(--bg-subtle); color: var(--slate);
}

.cm-body { padding: 18px; overflow-y: auto; }

.cm-load, .cm-bad {
  padding: 24px 10px; text-align: center; font-size: .86rem;
}
.cm-load { color: var(--slate); }
.cm-bad { color: var(--danger-text); font-weight: 600; }

.cm-money, .cn-money {
  display: grid; gap: 8px; margin-bottom: 14px;
}

.cm-m, .cn-m {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 13px; border-radius: 9px;
  background: var(--bg-subtle); font-size: .84rem;
}
.cm-m span, .cn-m span { flex: 1; color: var(--slate); }
.cm-m b, .cn-m b { font-variant-numeric: tabular-nums; }

.cm-m.is-minus b, .cn-m.is-minus b { color: var(--danger-text); }

.cm-m.is-refund, .cn-m.is-refund {
  background: var(--success-bg);
}
.cm-m.is-refund b, .cn-m.is-refund b {
  color: var(--success-text); font-size: .98rem;
}

.cm-note {
  margin: 0 0 10px; font-size: .77rem; line-height: 1.9;
  color: var(--slate);
}

.cm-reason {
  display: grid; gap: 5px; margin-top: 12px;
  font-size: .78rem; color: var(--slate);
}
.cm-reason input {
  font: inherit; font-size: .85rem;
  padding: 10px 13px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
}

.cm-foot {
  display: flex; gap: 8px; padding: 14px 18px; flex: none;
  border-top: 1px solid var(--line);
  background: var(--bg-subtle);
}

/* ---- پنل مدیر ---- */
.cn-sum {
  padding: 12px 16px; margin-bottom: 14px;
  border-radius: 11px; font-size: .86rem; font-weight: 700;
  background: var(--warn-bg); color: var(--warn-text);
}

.cn-list { display: grid; gap: 12px; }

.cn-card {
  padding: 15px 17px; border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.cn-head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.cn-head b { font-size: .92rem; }
.cn-user { font-size: .8rem; color: var(--ink-soft); }
.cn-when {
  margin-inline-start: auto;
  font-size: .74rem; color: var(--slate);
}

.cn-meta {
  margin-bottom: 12px; font-size: .77rem; color: var(--slate);
}

.cn-acts {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.cn-acts input {
  flex: 1; min-width: 150px;
  font: inherit; font-size: .82rem;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
}

.cn-done {
  padding: 10px 14px; border-radius: 9px;
  font-size: .81rem; font-weight: 600;
  background: var(--bg-subtle); color: var(--slate);
}
.cn-done.is-approved {
  background: var(--success-bg); color: var(--success-text);
}
.cn-done.is-rejected {
  background: var(--danger-bg); color: var(--danger-text);
}

/* ---- صف انتظار در پنل تأمین‌کننده ---- */
.vo-waiting {
  margin-bottom: 20px; padding: 15px 17px;
  border-radius: 13px;
  background: var(--warn-bg);
  border: 1px dashed var(--warn-text);
}

.vo-waiting-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 7px;
}
.vo-waiting-head b {
  font-size: .89rem; color: var(--warn-text);
}
.vo-waiting-head span {
  padding: 2px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  /* کهربایی تیره — نسبت ۵.۹ با سفید */
  background: #78350F; color: #fff;
}

.vo-waiting-note {
  margin: 0 0 12px; font-size: .77rem; line-height: 1.9;
  color: var(--warn-text); opacity: .9;
}

.vo-waiting-list { display: grid; gap: 7px; }

.vo-wait-row {
  display: flex; align-items: center; gap: 11px;
  flex-wrap: wrap;
  padding: 10px 13px; border-radius: 9px;
  background: var(--surface); font-size: .81rem;
}
.vo-wait-when { color: var(--slate); font-size: .77rem; }
.vo-wait-left {
  padding: 2px 9px; border-radius: 999px; font-size: .72rem;
  background: var(--bg-subtle); color: var(--slate);
}
.vo-wait-total {
  margin-inline-start: auto; font-weight: 700;
}

@media (max-width: 640px) {
  .cm { padding: 0; }
  .cm-box { max-height: 100vh; height: 100vh; border-radius: 0; }
  .cm-foot { flex-direction: column-reverse; }
  .cm-foot .btn { width: 100%; }
  /*
    ⚠️ قاعدهٔ فلکس قدیمی برداشته شد.

    با گرید بالا تداخل داشت و ترتیب فایل تعیین می‌کرد کدام
    برنده شود.
  */
  .cn-acts { flex-direction: column; }
  .cn-acts input, .cn-acts .btn { width: 100%; }
}

/* ==========================================================================
   تب‌های سفارش و جست‌وجو
   ========================================================================== */
.ot-tabs a b {
  margin-inline-start: 5px; padding: 1px 7px;
  border-radius: 999px; font-size: .68rem;
  background: var(--bg-subtle); color: var(--slate);
}
.ot-tabs a.on b {
  background: rgba(255, 255, 255, .28); color: inherit;
}

.pf-tabs a b {
  margin-inline-start: 5px; padding: 1px 7px;
  border-radius: 999px; font-size: .68rem;
  background: var(--bg-subtle); color: var(--slate);
}
/*
  مورد ۴ — نشان شمارنده روی تب انتخاب‌شده.

  ⚠️ `rgba(255,255,255,.28)` روی پس‌زمینهٔ سبزِ **کم‌رنگ**
  تقریباً نامرئی است — سفیدِ نیمه‌شفاف روی زمینهٔ روشن هیچ
  تضادی نمی‌سازد.

  رنگ برند توپر با متن روشن، در هر دو تم خوانا می‌ماند.
*/
.pf-tabs a.on b {
  background: var(--green-btn);
  color: var(--on-green);
  font-weight: 800;
}

/*
  مورد ۲-۲ — جست‌وجوی زنده با آیکن داخل کادر.

  ⚠️ دکمهٔ جداگانه در موبایل زیر کادر می‌افتاد و ردیف را
  می‌شکست. حالا ذره‌بین داخل کادر است و فیلتر با تایپ انجام
  می‌شود.
*/
.ot-search {
  position: relative;
  display: flex; align-items: center;
  margin: 12px 0 16px;
}

/*
  ⚠️ عنصر `absolute` بدون مختصات عمودی، بالای ظرف می‌چسبد.

  `align-items: center` والد فقط روی عضوهای عادی فلکس کار
  می‌کند؛ عنصر `absolute` از جریان بیرون است و آن قاعده
  شاملش نمی‌شود. نتیجه: ذره‌بین بالای کادر می‌نشست.

  `top: 50%` + `translateY(-50%)` مستقل از ارتفاع کادر،
  دقیقاً وسط می‌نشاندش.
*/
.ot-search-ic {
  position: absolute; inset-inline-start: 14px;
  top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  line-height: 1;
  font-size: .92rem; opacity: .5; pointer-events: none;
}

.ot-search input {
  flex: 1; width: 100%; box-sizing: border-box;
  font: inherit; font-size: .88rem;
  padding: 13px 44px; border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease,
              background .16s ease;
}
.ot-search input:focus {
  outline: none; background: var(--surface);
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100);
}

/* ⚠️ ضربدر داخلی مرورگر با دکمهٔ ما تداخل دارد */
.ot-search input::-webkit-search-cancel-button { display: none; }

.ot-clear {
  position: absolute; inset-inline-end: 11px;
  /* ⚠️ همان دلیل ذره‌بین — وسط‌چین عمودی صریح */
  top: 50%; transform: translateY(-50%);
  width: 27px; height: 27px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; font-size: .76rem;
  background: var(--line); color: var(--slate);
}
.ot-clear:hover { color: var(--ink); }

.ot-none {
  padding: 26px 14px; text-align: center;
  color: var(--slate); font-size: .86rem;
}

.ot-note {
  padding: 11px 15px; margin-bottom: 14px;
  border-radius: 10px; font-size: .8rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
}

/* تاریخ ارسال روی کارت سفارش */
.vo-sched {
  display: inline-block; margin-top: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .73rem;
  background: var(--warn-bg); color: var(--warn-text);
}

/* ---- هزینهٔ دستی در پنل لغو ---- */
.cn-charge {
  margin-bottom: 10px;
}
.cn-charge summary {
  cursor: pointer; font-size: .78rem; font-weight: 600;
  color: var(--green-text-soft); padding: 5px 0;
}

.cn-charge-form {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-top: 9px; padding: 11px;
  border-radius: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
}
.cn-charge-form input {
  font: inherit; font-size: .82rem;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.cn-charge-form input[name="amount"] { width: 130px; }
.cn-charge-form input[name="reason"] { flex: 1; min-width: 150px; }

.cn-charge-del {
  display: inline-flex; margin: 0 0 0 6px;
}
.cn-charge-del button {
  width: 20px; height: 20px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 5px; font-size: .68rem;
  background: transparent; color: var(--slate);
}
.cn-charge-del button:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

@media (max-width: 640px) {
  .ot-search { flex-direction: column; }
  .cn-charge-form { flex-direction: column; }
  .cn-charge-form input { width: 100% !important; }
}

/* ==========================================================================
   کالای استعلامی
   ========================================================================== */
.pd-inquiry-form {
  display: grid; gap: 11px;
}

.pd-inq-qty {
  display: grid; gap: 5px;
  font-size: .8rem; color: var(--slate);
}
.pd-inq-qty input {
  font: inherit; font-size: .92rem;
  padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  text-align: center;
}

.pd-inq-note {
  font-size: .74rem; line-height: 1.9; color: var(--slate);
}

/* تیک استعلامی در فرم تأمین‌کننده */
.pf-inquiry-box {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: 12px; cursor: pointer;
  background: var(--bg-subtle);
  border: 1px dashed var(--line);
}
.pf-inquiry-box input {
  width: 18px; height: 18px; flex: none; margin-top: 2px;
  cursor: pointer; accent-color: var(--green-btn);
}
.pf-inquiry-box b {
  display: block; font-size: .85rem;
}
.pf-inquiry-box small {
  display: block; margin-top: 4px;
  font-size: .73rem; line-height: 1.9; color: var(--slate);
}

.field .req { color: var(--danger-text); }

/* ==========================================================================
   افزودن کالا به سفارش مستمر
   ========================================================================== */
.rc-add {
  position: relative; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--line);
}

.rc-add-label {
  display: grid; gap: 6px;
  font-size: .82rem; font-weight: 600;
  color: var(--green-text-soft);
}
.rc-add-label input {
  font: inherit; font-size: .88rem; font-weight: 400;
  padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.rc-add-label input:focus {
  outline: none; border-color: var(--green-btn);
}

.rc-results {
  position: absolute; z-index: 30;
  inset-inline: 0; top: 100%;
  max-height: 320px; overflow-y: auto;
  margin-top: 5px; border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}
.rc-results[hidden] { display: none; }

.rc-hit {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.rc-hit:last-child { border-bottom: 0; }

.rc-hit-info { flex: 1; min-width: 0; }
.rc-hit-info b {
  display: block; font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-hit-info small {
  display: block; margin-top: 2px;
  font-size: .72rem; color: var(--slate);
}

.rc-hit-done {
  font-size: .74rem; font-weight: 700;
  color: var(--success-text);
}

.rc-none {
  padding: 20px; text-align: center;
  font-size: .82rem; color: var(--slate);
}

/* دکمهٔ صفحهٔ کالا */
.pd-recurring {
  width: 100%; margin-top: 9px;
  padding: 11px 16px; cursor: pointer;
  border-radius: 12px; font: inherit; font-size: .84rem;
  font-weight: 600;
  background: transparent; color: var(--green-text-soft);
  border: 1px dashed var(--green-btn);
  transition: background .15s ease;
}
.pd-recurring:hover { background: var(--green-100); }

/* مودال انتخاب لیست */
.rcp {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rcp[hidden] { display: none; }

.rcp-back {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(3px);
}

.rcp-box {
  position: relative; z-index: 1;
  width: min(380px, 100%);
  border-radius: 16px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
}

.rcp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 17px;
  border-bottom: 1px solid var(--line);
}
.rcp-head b { flex: 1; font-size: .89rem; }

.rcp-x {
  width: 28px; height: 28px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; font-size: .75rem;
  background: var(--bg-subtle); color: var(--slate);
}

.rcp-body { padding: 16px 17px 18px; }

.rcp-hint {
  margin: 0 0 11px; font-size: .8rem; color: var(--slate);
}

.rcp-item {
  display: block; width: 100%; margin-bottom: 7px;
  padding: 12px 15px; cursor: pointer; text-align: start;
  border-radius: 11px; font: inherit; font-size: .86rem;
  background: var(--bg-subtle); color: var(--ink);
  border: 1px solid transparent;
}
.rcp-item:hover {
  background: var(--green-100);
  border-color: var(--green-btn);
}
.rcp-item:disabled { opacity: .5; }

.rcp-new {
  display: block; margin-top: 11px; padding: 9px;
  text-align: center; font-size: .8rem;
  color: var(--green-text-soft); text-decoration: none;
}

.rcp-load, .rcp-none {
  padding: 22px 10px; text-align: center;
  font-size: .84rem; color: var(--slate);
}

.rcp-ok {
  padding: 20px 12px; text-align: center;
  font-size: .88rem; font-weight: 700;
  color: var(--success-text);
}

@media (max-width: 640px) {
  .rcp { padding: 0; align-items: flex-end; }
  .rcp-box {
    width: 100%; border-radius: 18px 18px 0 0;
  }
}

/* ==========================================================================
   انتخاب الگوی تکرار — بصری
   --------------------------------------------------------------------------
   ⚠️ بازطراحی: «هر N بار» و «روز ماه» عددی گنگ بود.

   کاربر نمی‌فهمید «هر ۲ با بازهٔ هفتگی» یعنی چه. حالا روزها
   را مستقیم روی تقویم می‌زند.
   ========================================================================== */
.rp {
  margin-top: 16px; padding: 15px 17px;
  border-radius: 13px; background: var(--bg-subtle);
}

.rp-label {
  display: block; margin-bottom: 11px;
  font-size: .84rem; font-weight: 700;
  color: var(--green-text-soft);
}

.rp-modes {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-bottom: 14px;
}

.rp-mode {
  cursor: pointer;
}
.rp-mode input { position: absolute; opacity: 0; }
.rp-mode span {
  display: block; padding: 9px 15px;
  border-radius: 999px; font-size: .82rem;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: background .15s ease;
}
.rp-mode input:checked + span {
  background: #15803D; color: #fff;
  border-color: #15803D; font-weight: 700;
}

.rp-panel[hidden] { display: none; }
.rp-panel > small {
  display: block; margin-bottom: 9px;
  font-size: .76rem; color: var(--slate);
}

.rp-inline {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem;
}
.rp-inline input {
  width: 72px; font: inherit; font-size: .9rem;
  padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  text-align: center;
}

/* روزهای هفته */
.rp-week {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.rp-day { cursor: pointer; }
.rp-day input { position: absolute; opacity: 0; }
.rp-day span {
  display: block; padding: 9px 14px;
  border-radius: 10px; font-size: .8rem;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.rp-day input:checked + span {
  background: var(--green-100);
  border-color: var(--green-btn);
  color: var(--green-text-soft); font-weight: 700;
}

/* تقویم عددی ماه */
.rp-month {
  display: grid; gap: 5px;
  grid-template-columns: repeat(7, 1fr);
  max-width: 340px;
}

.rp-num { cursor: pointer; }
.rp-num input { position: absolute; opacity: 0; }
.rp-num span {
  display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 9px;
  font-size: .8rem; font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.rp-num input:checked + span {
  background: #15803D; color: #fff;
  border-color: #15803D; font-weight: 700;
}

.rp-note {
  display: block; margin-top: 9px;
  font-size: .7rem; color: var(--warn-text);
}

.rp-hour {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rp-hour[hidden] { display: none; }

.rp-preview {
  margin-top: 14px; padding: 11px 15px;
  border-radius: 10px; font-size: .84rem; font-weight: 700;
  background: var(--success-bg); color: var(--success-text);
}

/* ---- تأیید دو مرحله‌ای ---- */
.rcp-confirm { text-align: center; }

.rcp-q {
  margin: 0 0 10px; font-size: .86rem; color: var(--slate);
}

.rcp-pick {
  display: block; padding: 12px;
  margin-bottom: 12px; border-radius: 11px;
  font-size: .95rem;
  background: var(--green-100);
  color: var(--green-text-soft);
}

.rcp-warn {
  margin: 0 0 16px; padding: 11px 14px;
  border-radius: 10px; text-align: start;
  font-size: .76rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
}

.rcp-acts {
  display: flex; gap: 8px;
}
.rcp-acts .btn { flex: 1; }

@media (max-width: 640px) {
  .rp-month { max-width: none; }
  .rp-modes { gap: 5px; }
  .rp-mode span { font-size: .77rem; padding: 8px 12px; }
}

/* ==========================================================================
   جادوگر ساخت لیست مستمر — درون مودال
   --------------------------------------------------------------------------
   ⚠️ کاربر نباید صفحهٔ کالا را ترک کند تا لیست بسازد.
   ========================================================================== */
.wz-dots {
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 16px;
}

.wz-dot {
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--line);
  transition: background .2s ease;
}
.wz-dot.is-done { background: var(--green-btn); opacity: .5; }
.wz-dot.is-on { background: #15803D; }

.wz-q {
  margin: 0 0 13px; font-size: .92rem; font-weight: 700;
  text-align: center;
}

.wz-hint {
  margin: 18px 0 9px; font-size: .78rem; color: var(--slate);
}

/*
  ⚠️ فاصلهٔ عمودی بین بخش‌های جادوگر.

  پیش‌تر بعضی بخش‌ها به هم چسبیده بودند — چشم نمی‌فهمید
  کجا یک گروه تمام می‌شود و بعدی شروع.
*/
.wz-modes + .wz-hint,
.wz-days + .wz-inline,
.wz-nums + .wz-inline,
.wz-picks + .wz-hint { margin-top: 20px; }

.wz-modes { margin-bottom: 4px; }

.wz-inline + .wz-inline { margin-top: 12px; }

.wz-days, .wz-nums, .wz-picks { margin-bottom: 4px; }

.rp-note { margin-top: 12px; }

.wz-quick { margin-top: 12px; }

.rcp-acts { margin-top: 20px; }

.wz-input {
  width: 100%; font: inherit; font-size: .92rem;
  padding: 12px 15px; border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
}
.wz-input:focus {
  outline: none; border-color: var(--green-btn);
  background: var(--surface);
}

.wz-quick {
  display: flex; gap: 7px; margin-top: 10px;
}
.wz-quick button {
  flex: 1; padding: 9px; cursor: pointer;
  border-radius: 9px; font: inherit; font-size: .8rem;
  background: var(--bg-subtle); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.wz-quick button:hover {
  background: var(--green-100);
  border-color: var(--green-btn);
}

/* الگوها */
.wz-modes {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.wz-mode {
  padding: 9px 14px; cursor: pointer;
  border-radius: 999px; font: inherit; font-size: .8rem;
  background: var(--bg-subtle); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.wz-mode.is-on {
  background: #15803D; color: #fff;
  border-color: #15803D; font-weight: 700;
}

/* روزهای هفته */
.wz-days {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.wz-day {
  padding: 8px 12px; cursor: pointer;
  border-radius: 9px; font: inherit; font-size: .78rem;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.wz-day.is-on {
  background: var(--green-100);
  border-color: var(--green-btn);
  color: var(--green-text-soft); font-weight: 700;
}

/* تقویم عددی */
.wz-nums {
  display: grid; gap: 4px;
  grid-template-columns: repeat(7, 1fr);
}
.wz-num {
  aspect-ratio: 1; cursor: pointer;
  border-radius: 8px; font: inherit; font-size: .78rem;
  font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.wz-num.is-on {
  background: #15803D; color: #fff;
  border-color: #15803D; font-weight: 700;
}

.wz-inline {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: .84rem;
}
.wz-inline input {
  width: 68px; font: inherit; font-size: .88rem;
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
  text-align: center;
}

/* آدرس و روش ارسال */
.wz-picks {
  display: grid; gap: 6px;
}
.wz-pick {
  padding: 11px 14px; cursor: pointer; text-align: start;
  border-radius: 10px; font: inherit; font-size: .82rem;
  background: var(--bg-subtle); color: var(--ink);
  border: 1px solid transparent;
}
.wz-pick.is-on {
  background: var(--green-100);
  border-color: var(--green-btn);
  color: var(--green-text-soft); font-weight: 700;
}

/* خلاصه */
.wz-sum {
  display: grid; gap: 8px; margin-bottom: 14px;
}
.wz-sum > div {
  display: flex; gap: 10px; align-items: baseline;
  padding: 10px 13px; border-radius: 9px;
  background: var(--bg-subtle); font-size: .82rem;
}
.wz-sum span { flex: none; color: var(--slate); width: 68px; }
.wz-sum b { flex: 1; }

.wz-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 14px; padding: 12px 14px;
  border-radius: 11px; cursor: pointer; text-align: start;
  background: var(--warn-bg);
  border: 1px solid var(--warn-text);
}
.wz-consent input {
  width: 18px; height: 18px; flex: none; margin-top: 2px;
  cursor: pointer; accent-color: var(--green-btn);
}
.wz-consent b {
  display: block; font-size: .81rem; color: var(--warn-text);
}
.wz-consent small {
  display: block; margin-top: 4px;
  font-size: .71rem; line-height: 1.85;
  color: var(--warn-text); opacity: .88;
}

.wz-err {
  margin: 0 0 11px; padding: 9px 13px;
  border-radius: 9px; font-size: .79rem; font-weight: 600;
  background: var(--danger-bg); color: var(--danger-text);
}

button.rcp-new {
  display: block; width: 100%; margin-top: 11px;
  padding: 10px; cursor: pointer;
  border-radius: 10px; font: inherit; font-size: .82rem;
  background: transparent; color: var(--green-text-soft);
  border: 1px dashed var(--green-btn);
}
button.rcp-new:hover { background: var(--green-100); }

@media (max-width: 640px) {
  .wz-modes { gap: 5px; }
  .wz-mode { font-size: .76rem; padding: 8px 11px; }
}

/* ارسال فوری در جادوگر */
.wz-pick.wz-express {
  border-color: var(--warn-text);
  background: var(--warn-bg);
}
.wz-pick.wz-express small {
  display: block; margin-top: 3px;
  font-size: .71rem; font-weight: 400; opacity: .82;
}
.wz-pick.wz-express.is-on {
  background: #78350F; color: #fff; border-color: #78350F;
}

/* نوار کیف پول در سفارش مستمر */
.rc-wallet {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 14px;
  border-radius: 13px;
  background: var(--success-bg);
  border: 1px solid transparent;
}
.rc-wallet.is-low {
  background: var(--warn-bg);
  border-color: var(--warn-text);
}

.rc-wallet-main, .rc-wallet-need {
  display: grid; gap: 3px;
}
.rc-wallet-main span, .rc-wallet-need span {
  font-size: .74rem; color: var(--slate);
}
.rc-wallet-main b {
  font-size: 1.15rem; color: var(--success-text);
}
.rc-wallet.is-low .rc-wallet-main b { color: var(--warn-text); }

.rc-wallet-need { margin-inline-start: auto; }
.rc-wallet-need b {
  font-size: .92rem; color: var(--ink-soft);
}
.rc-wallet-main b small {
  font-size: .68rem; font-weight: 400;
}

.rc-wallet-warn {
  margin: 0 0 14px; padding: 10px 15px;
  border-radius: 10px; font-size: .81rem; font-weight: 600;
  background: var(--danger-bg); color: var(--danger-text);
}

@media (max-width: 640px) {
  .rc-wallet { gap: 11px; }
  .rc-wallet-need { margin-inline-start: 0; }
  .rc-wallet .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   ارسال فوری در صندوق
   ========================================================================== */
.xp {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.xp[hidden] { display: none; }

.xp-head { margin-bottom: 11px; }
.xp-head b { display: block; font-size: .88rem; }
.xp-head small {
  display: block; margin-top: 3px;
  font-size: .74rem; color: var(--slate);
}

.xp-list { display: grid; gap: 8px; }

.xp-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-radius: 11px; cursor: pointer;
  background: var(--warn-bg);
  border: 1px solid transparent;
}
.xp-item input { margin-top: 3px; accent-color: #78350F; }
.xp-item:has(input:checked) {
  border-color: var(--warn-text);
  box-shadow: 0 0 0 1px var(--warn-text);
}

.xp-item b { font-size: .85rem; }
.xp-item p {
  margin: 3px 0 0; font-size: .76rem; color: var(--slate);
}
.xp-meta {
  display: block; margin-top: 4px;
  font-size: .72rem; color: var(--slate);
}
.xp-free { color: var(--success-text); font-weight: 700; }

.xp-item.xp-none {
  background: var(--bg-subtle);
}
.xp-item.xp-none:has(input:checked) {
  border-color: var(--line); box-shadow: none;
}

.xp-time {
  margin-top: 12px; padding: 12px 14px;
  border-radius: 10px; background: var(--bg-subtle);
}
.xp-time[hidden] { display: none; }
.xp-time label { display: grid; gap: 6px; }
.xp-time span { font-size: .79rem; color: var(--slate); }
.xp-time input {
  font: inherit; font-size: .88rem;
  padding: 10px 13px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.xp-time small {
  display: block; margin-top: 6px;
  font-size: .72rem; color: var(--slate);
}

.xp-warn {
  margin-top: 12px; padding: 11px 15px;
  border-radius: 10px; font-size: .81rem; font-weight: 600;
  background: var(--success-bg); color: var(--success-text);
  line-height: 1.9;
}
.xp-warn[hidden] { display: none; }
.xp-warn.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

/* ---- ویرایش آدرس ---- */
.addr-pick-item { position: relative; }

.addr-edit-btn {
  position: absolute; inset-inline-end: 12px; top: 12px;
  width: 28px; height: 28px; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 8px; border: 0; font-size: .78rem;
  background: var(--bg-subtle); color: var(--slate);
}
.addr-edit-btn:hover {
  background: var(--green-100); color: var(--green-text-soft);
}

.addr-has-point {
  display: inline-block; margin-inline-start: 8px;
  padding: 1px 8px; border-radius: 999px;
  font-size: .68rem;
  background: var(--success-bg); color: var(--success-text);
}

.addr-err-top {
  margin: 0 0 14px; padding: 11px 15px;
  border-radius: 10px; font-size: .81rem; font-weight: 600;
  background: var(--danger-bg); color: var(--danger-text);
}

/* ذخیرهٔ مستقل آدرس */
.addr-save {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}

.addr-save-note {
  margin: 10px 0 0; padding: 9px 13px;
  border-radius: 9px; font-size: .79rem; font-weight: 600;
}
.addr-save-note.is-ok {
  background: var(--success-bg); color: var(--success-text);
}
.addr-save-note.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

/* رادیوی ارسال فوری مسدود */
.xp-item.is-blocked {
  background: var(--bg-subtle); opacity: .82;
}
.xp-item.is-blocked input { accent-color: var(--slate); }

.xp-block {
  margin: 4px 0 0 !important;
  font-size: .75rem; color: var(--warn-text) !important;
  line-height: 1.85;
}

/* ظرفیت در پنل مدیر */
.ex-zone-cap {
  font-size: .7rem; padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface); color: var(--slate);
}
.ex-zone-cap.is-full {
  background: var(--danger-bg); color: var(--danger-text);
  font-weight: 700;
}


/* ==========================================================================
   تقویم انتخاب زمان تحویل
   --------------------------------------------------------------------------
   ⚠️ بازطراحی: تقویم غول‌آسا شده بود.

   `aspect-ratio: 1` بدون سقف عرض یعنی هر خانه یک‌هفتم عرض
   کارت — روی دسکتاپ ۱۰۰ پیکسل، بزرگ‌تر از دکمهٔ پرداخت.

   حالا عرض کل تقویم محدود است و خانه‌ها اندازهٔ ثابت دارند.
   ========================================================================== */
.cal {
  /*
    ⚠️ سقف عرض — هفت ستون ۴۰ پیکسلی به‌علاوهٔ فاصله و حاشیه.

    بدون این، تقویم تا لبهٔ کارت کش می‌آید.
  */
  width: 100%; max-width: 330px;
  margin: 14px 0;
  border-radius: 12px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

.cal-kinds {
  display: flex; padding: 4px;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}

.cal-kind {
  flex: 1; padding: 6px 4px; cursor: pointer;
  border-radius: 7px; font: inherit; font-size: .72rem;
  background: transparent; color: var(--slate);
  border: 0;
}
.cal-kind.is-on {
  background: var(--surface); color: var(--green-text-soft);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.cal-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px 6px;
}

.cal-title {
  flex: 1; text-align: center; font-size: .82rem;
  font-weight: 700;
}

.cal-arrow {
  width: 26px; height: 26px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 7px; border: 0;
  background: var(--bg-subtle); color: var(--ink-soft);
  font-size: .95rem; line-height: 1;
}
.cal-arrow:hover {
  background: var(--green-100); color: var(--green-text-soft);
}

.cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0 8px 4px;
}
.cal-head span {
  text-align: center; font-size: .64rem;
  color: var(--slate); font-weight: 600;
}

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; padding: 0 8px 10px;
}

/*
  ⚠️ ارتفاع ثابت نه `aspect-ratio`.

  با نسبت تصویر، خانه به عرض ستون وابسته می‌شود و روی کارت
  عریض غول‌آسا می‌گردد.
*/
.cal-cell {
  height: 34px; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 8px; border: 0;
  font: inherit; font-size: .76rem;
  font-variant-numeric: tabular-nums;
  background: transparent; color: var(--ink-soft);
}

.cal-cell.is-blank {
  cursor: default; pointer-events: none;
}

/*
  ⚠️ روز بسته و گذشته باید آشکارا غیرقابل کلیک به‌نظر برسند —
  وگرنه کاربر بارها می‌زند و فکر می‌کند خراب است.
*/
.cal-cell.is-past,
.cal-cell.is-closed {
  cursor: not-allowed; color: var(--slate); opacity: .32;
}

.cal-cell.is-open {
  background: var(--green-100);
  color: var(--green-text-soft); font-weight: 700;
}
.cal-cell.is-open:hover {
  /* سبز تیره‌تر — نسبت ۵.۴ با سفید */
  background: #15803D; color: #fff;
}

.cal-cell.is-today {
  box-shadow: inset 0 0 0 1.5px var(--green-btn);
}

.cal-cell.is-on {
  background: #15803D; color: #fff; font-weight: 700;
}

.cal-empty {
  margin: 0; padding: 0 10px 10px;
  text-align: center; font-size: .72rem;
  color: var(--slate);
}

/*
  ⚠️ روی موبایل تمام عرض — فضای بیشتری برای انگشت.
*/
@media (max-width: 640px) {
  .cal { max-width: none; }
  .cal-cell { height: 38px; font-size: .8rem; }
  .cal-kind { font-size: .7rem; }
}

/*
  ⚠️ نشان تغییر مبلغ — تا کاربر متوجه شود عدد عوض شد.
*/
.sum-row.is-changed b {
  animation: sum-flash .6s ease;
}
@keyframes sum-flash {
  0% { background: var(--warn-bg); }
  100% { background: transparent; }
}

/* ارسال بین‌شهری در صندوق */
.fr-item {
  background: var(--bg-subtle);
}
.fr-item:has(input:checked) {
  background: var(--green-100);
  border-color: var(--green-btn);
}

.fr-postpaid {
  font-size: .8rem; font-weight: 600;
  color: var(--warn-text);
}

.fr-note {
  display: block; margin-top: 4px;
  font-size: .72rem; color: var(--slate);
}

/* ==========================================================================
   نقشهٔ ارسال در صندوق
   --------------------------------------------------------------------------
   ⚠️ پیشوند `sp-` — پیش از افزودن بررسی شد که با هیچ قاعدهٔ
   موجودی تصادم ندارد.
   ========================================================================== */

.sp-warn {
  padding: 12px 15px; margin: 0 0 13px;
  border-radius: 11px; font-size: .82rem; line-height: 1.8;
  background: var(--warn-bg);
  color: var(--warn-text);
}

.sp-split-note {
  padding: 12px 15px; margin: 0 0 14px;
  border-radius: 11px; font-size: .84rem; line-height: 1.8;
  background: var(--green-100); color: var(--green-text-soft);
  border: 1px solid var(--green);
}

.sp-groups { display: grid; gap: 14px; }

.sp-group {
  border-radius: 13px; padding: 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
}

.sp-group-head {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.sp-group-head b { font-size: .92rem; }

.sp-group-count { font-size: .77rem; color: var(--slate); }

/*
  ⚠️ فهرست کالاها جمع‌شده است.

  با ۵۰ قلم کالا، باز کردن همه صفحه را غیرقابل استفاده
  می‌کند. تعداد کافی است و جزئیات با یک کلیک می‌آید.
*/
.sp-items { margin-bottom: 11px; }

.sp-items summary {
  cursor: pointer; font-size: .78rem; color: var(--slate);
  padding: 5px 0;
}

.sp-items ul {
  list-style: none; margin: 7px 0 0; padding: 9px 12px;
  max-height: 190px; overflow-y: auto;
  border-radius: 9px; background: var(--bg-subtle);
}

.sp-items li {
  font-size: .78rem; line-height: 1.9;
  border-bottom: 1px solid var(--line);
}
.sp-items li:last-child { border-bottom: 0; }
.sp-items li small { color: var(--slate); }

.sp-opts { display: grid; gap: 8px; }

.sp-opt {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 13px; cursor: pointer;
  border-radius: 11px; border: 1.5px solid var(--line);
}

/*
  ⚠️ `:has()` در فهرست انتخابگرها بخشنده نیست — اگر مرورگری
  آن را نشناسد، **کل** قاعده دور انداخته می‌شود. پس تنها در
  قاعدهٔ خودش می‌آید.
*/
.sp-opt:has(input:checked) {
  border-color: var(--green); background: var(--green-100);
}

.sp-opt input { margin-top: 3px; flex: none; }

.sp-opt-body { flex: 1; min-width: 0; }

.sp-opt-body b {
  display: block; font-size: .86rem; line-height: 1.6;
}

.sp-opt-body small {
  display: block; margin-top: 3px;
  font-size: .74rem; color: var(--slate);
}

.sp-opt-price {
  display: block; margin-top: 3px;
  font-size: .82rem; font-weight: 600;
}

.sp-opt-price em {
  font-style: normal; font-size: .74rem; font-weight: 400;
  color: var(--slate);
}

.sp-free { color: var(--green); font-weight: 700; }

.sp-none {
  margin: 0; padding: 12px 14px;
  border-radius: 10px; font-size: .8rem; line-height: 1.8;
  background: var(--warn-bg);
  color: var(--warn-text);
}

.addr-req { color: var(--danger-text); }

.addr-map-err {
  margin: 8px 0 0; padding: 9px 12px;
  border-radius: 9px; font-size: .79rem;
  background: var(--danger-bg); color: var(--danger-text);
}

/*
  ⚠️ وقتی نقطه ثبت شد ولی تیک نخورده، باید به چشم بیاید —
  وگرنه کاربر نقشه را می‌بندد و ذخیره باز هم رد می‌شود.
*/
.addr-geo-ok.needs-tick {
  padding: 8px 11px; border-radius: 9px;
  background: var(--warn-bg);
  color: var(--warn-text);
}

/* تیک تأیید مقصد */
.addr-geo-ok {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 10px; cursor: pointer;
  font-size: .8rem; line-height: 1.7;
}
.addr-geo-ok input {
  width: 17px; height: 17px; flex: none; margin-top: 2px;
  cursor: pointer;
}

@media (max-width: 640px) {
  .sp-group { padding: 12px; }
  .sp-group-head { flex-direction: column; gap: 3px; }
  .sp-opt { padding: 11px; }
}


/* ==========================================================================
   آدرس پروفایل — جست‌وجوی نقشه و دکمه‌ها
   ========================================================================== */
.geo-search { display: flex; gap: 6px; margin-bottom: 8px; }

.geo-search input {
  flex: 1; min-width: 0;
  padding: 9px 12px; font: inherit; font-size: .82rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

.geo-results {
  list-style: none; margin: 0 0 8px; padding: 0;
  max-height: 200px; overflow-y: auto;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface);
}
.geo-results li { border-bottom: 1px solid var(--line); }
.geo-results li:last-child { border-bottom: 0; }

.geo-results button {
  display: block; width: 100%; text-align: start;
  padding: 9px 12px; border: 0; cursor: pointer;
  font: inherit; font-size: .78rem; line-height: 1.7;
  background: transparent; color: var(--ink-soft);
}
.geo-results button:hover { background: var(--bg-subtle); }

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

@media (max-width: 640px) {
  .addr-form-act { flex-direction: column; }
  .addr-form-act .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   بخش فرعی فرم پنل (تنظیمات اختیاری)
   ========================================================================== */
.pform-sub {
  margin-top: 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg-subtle);
}

.pform-sub-head {
  padding: 11px 14px;
  font-size: .84rem; font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.pform-sub-body { padding: 14px; }

.pform-sub-body .field { margin-bottom: 12px; }
.pform-sub-body .field:last-child { margin-bottom: 0; }

/* ---- تب بازدیدکنندگان ---- */
.ps-ip { width: 210px; }

.ps-ip-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  white-space: nowrap;
}
.ps-ip-cell a { color: var(--ink); }
.ps-ip-cell a:hover { color: var(--green); }

.ps-guest { color: var(--slate); }

/*
  ⚠️ منبع مکان باید دیده شود.

  «آدرس کاربر» دقیق است ولی «پایگاه IP» تقریبی — مدیر باید
  بداند به کدام عدد چقدر اعتماد کند.
*/
.ps-src {
  display: inline-block; margin-inline-start: 6px;
  padding: 1px 7px; border-radius: var(--r-full);
  font-size: .64rem;
  background: var(--bg-subtle); color: var(--slate);
}

.ps-hint.is-warn {
  background: var(--warn-bg); color: var(--warn-text);
}
.ps-hint.is-warn a { color: inherit; text-decoration: underline; }

.ps-tbl td:nth-child(4),
.ps-tbl th:nth-child(4) { text-align: start; }

/* ==========================================================================
   نوار پیش‌فاکتور در انتظار
   ========================================================================== */
.pfx-banner {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; position: relative;
  padding: 14px 16px; margin-bottom: 16px;
  border-radius: 13px;
  background: var(--green-100);
  border: 1.5px solid var(--green-btn);
}

.pfx-banner-body { flex: 1; min-width: 200px; }

.pfx-banner-body b {
  display: block; font-size: .9rem;
  color: var(--green-text-soft);
}

.pfx-banner-body span {
  display: block; margin-top: 3px;
  font-size: .8rem; line-height: 1.8; color: var(--ink-soft);
}

.pfx-banner-x {
  flex: none; width: 28px; height: 28px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; font-size: .8rem;
  background: transparent; color: var(--slate);
}
.pfx-banner-x:hover {
  background: var(--surface); color: var(--ink);
}

@media (max-width: 640px) {
  .pfx-banner { align-items: flex-start; }
  .pfx-banner .btn { width: 100%; text-align: center; }
}

/* زمان آماده‌سازی پیش‌فاکتور */
.pfx-ready {
  padding: 11px 15px; margin-bottom: 14px;
  border-radius: 10px; font-size: .84rem; line-height: 1.8;
  background: var(--bg-subtle); color: var(--ink-soft);
}
.pfx-ready b { color: var(--green-text-soft); }

/* ==========================================================================
   وضعیت باز/بستهٔ مجموعه
   ========================================================================== */
.vh-state {
  display: inline-flex; align-items: center; gap: 7px;
  flex-wrap: wrap; margin-top: 8px;
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: .78rem; font-weight: 700;
  background: var(--surface);
}

.vh-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.vh-state.is-open { color: var(--green-text-soft); }
.vh-state.is-open .vh-dot { background: var(--green-btn); }

.vh-state.is-shut { color: var(--slate); }
.vh-state.is-shut .vh-dot { background: var(--slate); }

.vh-more { display: inline; }
.vh-more summary {
  cursor: pointer; font-weight: 400; font-size: .74rem;
  color: var(--slate); display: inline;
}
.vh-more ul {
  list-style: none; margin: 8px 0 0; padding: 8px 0 0;
  border-top: 1px solid var(--line);
  font-weight: 400;
}
.vh-more li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 3px 0; font-size: .75rem;
}
.vh-more li.is-off { color: var(--slate); }

/* ==========================================================================
   مورد ۲-۱ — تب‌های پروفایل در موبایل
   ========================================================================== */
@media (max-width: 640px) {
  /*
    ⚠️ چهار تب کنار هم در ۳۶۰ پیکسل جا نمی‌شوند و به دو ردیف
    نامرتب می‌افتادند.

    نوار افقی قابل‌کشیدن، هم مرتب است هم همهٔ تب‌ها را در
    دسترس نگه می‌دارد.

    ⚠️ `overflow-x` عمودی هم می‌برد، پس فضای امن بالا و پایین
    لازم است وگرنه حاشیهٔ تب فعال کلیپ می‌شود.
  */
  .pf-tabs {
    gap: 7px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 5px 2px 8px;
    margin-block-start: -5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pf-tabs::-webkit-scrollbar { display: none; }

  .pf-tabs a {
    flex: none; white-space: nowrap;
    padding: 10px 15px; font-size: .83rem;
    border-radius: 13px;
  }
}

/* ==========================================================================
   مورد ۴ و ۵ — تب انتخاب‌شده، خوانا و مدرن‌تر
   ========================================================================== */

/*
  ⚠️ فرزندان تب باید رنگ را به ارث ببرند.

  ایموجی و متن داخل تب گاهی رنگ خودشان را دارند و روی
  پس‌زمینهٔ انتخاب‌شده ناخوانا می‌شوند.
*/
.pf-tabs a.on,
.rep-chip.on,
.nt-tab.on { position: relative; }

/*
  ⚠️ نشانهٔ بصری تب فعال، مستقل از رنگ.

  کاربر با اختلال تشخیص رنگ نباید فقط به رنگ تکیه کند.
*/
.pf-tabs a.on::after {
  content: ""; position: absolute;
  inset-inline: 22%; bottom: 5px; height: 2px;
  border-radius: 2px; background: currentColor; opacity: .55;
}

/* حالت روی‌آمدن نرم‌تر برای همهٔ تب‌ها */
.pf-tabs a {
  transition: background .16s ease, border-color .16s ease,
              color .16s ease;
}
.pf-tabs a:not(.on):hover {
  border-color: var(--green);
  color: var(--green-text-soft);
}

/* ==========================================================================
   مورد ۷ — سبد خرید در موبایل
   --------------------------------------------------------------------------
   ⚠️ چرا این بلوک به انتهای فایل آمده.

   قاعدهٔ `.cart-thumb { width: 92px }` در بخش «زیباسازی سبد
   خرید» **بدون media** نوشته شده و بعد از قاعدهٔ موبایل
   می‌آمد. با ویژگی برابر، ترتیب برنده را تعیین می‌کند — پس
   تصویر ۹۲ پیکسلی در ستون گرید ۵۶ پیکسلی می‌نشست و روی متن
   سرریز می‌کرد. همان به‌هم‌ریختگی تصویر.

   به‌جای `!important`، بلوک را بعد از آن قرار می‌دهیم.
   ========================================================================== */
@media (max-width: 640px) {
  /*
    ⚠️ دو ردیف روشن به‌جای سه ستون فشرده.

    بالا: تصویر، مشخصات، حذف.
    پایین: تعداد و قیمت با خط جداکننده.

    سه ستون در ۳۶۰ پیکسل، عنوان بلند کالا را به سه خط
    می‌شکست و ردیف پایین را به‌هم می‌ریخت.
  */
  .cart-row {
    display: grid; gap: 10px 12px; padding: 14px;
    border-radius: 18px; align-items: start;
    grid-template-columns: 60px 1fr auto;
    grid-template-areas:
      "thumb info del"
      "foot  foot foot";
  }

  .cart-thumb {
    grid-area: thumb;
    width: 60px; height: 60px; border-radius: 12px;
  }
  .cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

  .cart-info { grid-area: info; min-width: 0; }

  .cart-title {
    font-size: .87rem; line-height: 1.7; font-weight: 700;
    /* ⚠️ عنوان بلند نباید کارت را بکشد */
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }

  .cart-vendor { margin-top: 5px; }

  .cart-del-form { grid-area: del; align-self: start; }

  .cart-remove {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 10px; background: var(--bg-subtle);
    color: var(--slate);
  }

  /*
    ⚠️ خط جداکنندهٔ ردیف پایین با شبه‌عنصر ساخته می‌شود.

    یک `<div>` تازه در قالب یعنی دست‌زدن به نشانه‌گذاری؛
    اینجا فقط CSS کافی است.
  */
  .cart-row::after {
    content: ""; grid-area: foot;
    height: 1px; background: var(--line);
  }

  .cart-qty-form {
    grid-area: foot; justify-self: start; align-self: center;
    margin-top: 12px;
  }

  .cart-price {
    grid-area: foot; justify-self: end; align-self: center;
    margin-top: 12px;
    font-size: 1.02rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  /* ⚠️ دکمه‌های ± باید به اندازهٔ قابل لمس برسند */
  .cart-qty { padding: 4px; gap: 6px; }
  .cart-qty button {
    width: 32px; height: 32px; font-size: 1.05rem;
    border-radius: 999px;
  }
  .cart-qty input, .cart-qty span { min-width: 30px; text-align: center; }

  /*
    ⚠️ کد تخفیف زیر هم.

    کادر و دکمه کنار هم، دکمه را به عرضی می‌رساندند که متنش
    بریده می‌شد.
  */
  .coupon-form { flex-direction: column; align-items: stretch; }
  .coupon-form input,
  .coupon-form button { width: 100%; }

  .sum-row { font-size: .86rem; }
  .sum-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
}

/* ==========================================================================
   مورد ۸ — گزینهٔ پرداخت (کیف پول) در موبایل
   ========================================================================== */
@media (max-width: 640px) {
  /*
    ⚠️ پنج عضو در یک ردیف فلکس، در ۳۶۰ پیکسل جا نمی‌شوند.

    رادیو + آیکن + «کیف پول» + «موجودی: …» + «کسری …» کنار هم
    فشرده می‌شدند؛ نام به دو خط می‌شکست و اعداد روی هم
    می‌افتادند.

    گرید دو ردیفه: بالا هویت گزینه، پایین ارقام.
  */
  .pay-opt {
    display: grid; gap: 6px 9px; padding: 13px 14px;
    align-items: center; border-radius: 13px;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "radio ic   name"
      "nums  nums nums";
  }

  .pay-opt > input[type="radio"] { grid-area: radio; }
  .pay-opt .pay-ic { grid-area: ic; font-size: 1.15rem; }

  .pay-opt .pay-name {
    grid-area: name; white-space: nowrap;
    font-size: .92rem; font-weight: 700;
  }

  /*
    ⚠️ `margin-inline-start: auto` در گرید بی‌اثر است.

    باید صفر شود وگرنه ارقام از ناحیهٔ خودشان بیرون می‌زنند.
  */
  .pay-opt .pay-bal,
  .pay-opt .pay-short {
    grid-area: nums; margin-inline-start: 0;
    align-self: center;
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
  }

  .pay-opt .pay-bal { justify-self: start; }
  .pay-opt .pay-short { justify-self: end; }

  /* بدون کسری، موجودی تنها می‌ماند و ته‌چین می‌شود */
  .pay-opt .pay-bal:last-child { justify-self: end; }

  .pay-opt small,
  .pay-opt .pay-fee {
    grid-area: nums; justify-self: end;
    font-variant-numeric: tabular-nums;
  }
}

/* ==========================================================================
   مورد ۱۳ — عملیات کالا در موبایل
   ========================================================================== */
@media (max-width: 640px) {
  /*
    ⚠️ چهار لینک متنی، هر کدام داخل `<form style="display:inline">`.

    فرم یک عضو فلکس با ارتفاع محتوایش می‌سازد، لینک‌ها ارتفاع
    متن دارند — هیچ‌کدام هم‌تراز نیستند و در عرض کم به سه
    ردیف نامرتب می‌شکنند. هدف لمس هم زیر حد استاندارد بود.

    `display: contents` فرم را از چیدمان حذف می‌کند تا دکمه‌اش
    مستقیم عضو گرید شود.
  */
  .prod-actions {
    width: 100%; padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--line);
    display: grid; gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    justify-content: initial;
  }

  .prod-actions form { display: contents; }

  .prod-actions .addr-link,
  .prod-actions button.addr-link {
    height: 40px; width: 100%; box-sizing: border-box;
    display: inline-flex; align-items: center;
    justify-content: center; gap: 5px; cursor: pointer;
    border-radius: 12px; font-size: .83rem; font-weight: 700;
    background: var(--bg-subtle); color: var(--ink-soft);
    border: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
  }

  .prod-actions .addr-link:hover {
    border-color: var(--green); color: var(--green-text-soft);
  }

  /* ⚠️ حذف باید از بقیه متمایز باشد */
  .prod-actions .addr-del {
    background: var(--danger-bg); color: var(--danger-text);
  }
}

/* ==========================================================================
   مورد ۱۵ — فهرست پست‌ها و آگهی‌ها
   ========================================================================== */
@media (max-width: 640px) {
  /*
    ⚠️ عملیات پست ستون عمودی از لینک‌های متنی بود.

    سه لینک زیر هم با ارتفاع متن، ردیف را کشیده و نامرتب
    می‌کرد — و `<form>` وسطشان چیدمان را می‌شکست.
  */
  .mypost-row {
    display: grid; gap: 10px 12px; padding: 12px;
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "thumb main"
      "acts  acts";
    align-items: start;
  }

  .mypost-thumb { grid-area: thumb; width: 52px; height: 52px; }
  .mypost-main { grid-area: main; min-width: 0; }
  .mypost-main p { margin: 0; line-height: 1.8; }

  .mypost-actions {
    grid-area: acts;
    display: grid; gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 11px;
    border-top: 1px solid var(--line);
  }

  .mypost-actions form { display: contents; }

  .mypost-actions .addr-link,
  .mypost-actions button.addr-link {
    height: 38px; width: 100%; box-sizing: border-box;
    display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer;
    border-radius: 11px; font-size: .81rem; font-weight: 700;
    background: var(--bg-subtle); color: var(--ink-soft);
    border: 1px solid transparent;
  }

  .mypost-actions .addr-del {
    background: var(--danger-bg); color: var(--danger-text);
  }
}

/* ==========================================================================
   دکمه‌های ردیف سفارش — دسکتاپ
   --------------------------------------------------------------------------
   ⚠️ «لغو سفارش» فقط متن با حاشیه بود.

   کنار دکمهٔ توپر «پرداخت» ناهماهنگ به‌نظر می‌رسید و ارتفاعش
   هم با آن جور نبود.
   ========================================================================== */
.order-acts {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/*
  ⚠️ فرم از چیدمان حذف می‌شود تا دکمه‌اش مستقیم عضو ردیف شود.
*/
.order-acts .order-abandon { display: contents; }

.order-acts .order-track,
.order-acts .order-cancel,
.order-acts .btn {
  height: 34px; box-sizing: border-box;
  display: inline-flex; align-items: center;
  justify-content: center; gap: 5px;
  padding-inline: 14px; cursor: pointer;
  border-radius: 10px; font-size: .8rem; font-weight: 700;
  white-space: nowrap; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease;
}

/* پیگیری — خنثی */
.order-acts .order-track {
  background: var(--bg-subtle); color: var(--ink-soft);
}
.order-acts .order-track:hover {
  border-color: var(--green); color: var(--green-text-soft);
}

/*
  ⚠️ لغو، هم‌شکل «پرداخت» ولی قرمز.

  توکن‌های `danger` در هر دو تم خوانا می‌مانند؛ قرمز ثابت
  روی پس‌زمینهٔ تیره تضاد کافی ندارد.
*/
.order-acts .order-cancel {
  background: var(--danger-bg); color: var(--danger-text);
  border-color: transparent;
}
.order-acts .order-cancel:hover {
  border-color: var(--danger-text);
}

/* ---------- پرسش تأیید در مودال ---------- */
.cm-ask {
  margin: 0 0 8px; font-size: .95rem; font-weight: 700;
  line-height: 1.9;
}

/* ==========================================================================
   گزینهٔ ارسال مسدود — کد پستی لازم است
   ========================================================================== */
/*
  ⚠️ مسدود یعنی کم‌رنگ، نه نامرئی.

  کاربر باید بداند این روش وجود دارد ولی شرطی دارد.
*/
.sp-opt.is-blocked {
  opacity: .62; cursor: not-allowed;
  border-style: dashed;
}
.sp-opt.is-blocked:hover { border-color: var(--line); }

.sp-block {
  display: block; margin-top: 5px;
  padding: 7px 10px; border-radius: 8px;
  font-size: .74rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
}
.sp-block a {
  color: inherit; text-decoration: underline;
  font-weight: 700; white-space: nowrap;
}

/* گزینهٔ باربری مسدود — همان ظاهر روش عادی */
.fr-item.is-blocked {
  opacity: .62; cursor: not-allowed; border-style: dashed;
}

/* ==========================================================================
   تغییر مقصد سفارش — اختلاف هزینه
   ========================================================================== */
/*
  ⚠️ اختلاف باید پیش از تأیید برجسته باشد.

  مشتری نباید بعد از ثبت بفهمد از کیفش کم شده.
*/
.cd-money {
  display: grid; gap: 4px; margin: 16px 0;
  padding: 14px 16px; border-radius: 13px;
  border: 1.5px solid transparent;
}
.cd-money b { font-size: .92rem; }
.cd-money span { font-size: 1.15rem; font-weight: 800; }
.cd-money small { font-size: .78rem; opacity: .85; }

.cd-money.is-refund {
  background: var(--green-100); color: var(--green-text-soft);
  border-color: var(--green-btn);
}
.cd-money.is-extra {
  background: var(--warn-bg); color: var(--warn-text);
  border-color: var(--warn-text);
}

/* مبلغ مابه‌التفاوت در مودال تأیید */
.cd-amount {
  margin: 0 0 10px; text-align: center;
  font-size: 1.6rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.cd-amount.is-refund { color: var(--green-text-soft); }
.cd-amount.is-extra { color: var(--warn-text); }

/* ==========================================================================
   وضعیت فعلی سفارش — صفحهٔ تغییر ارسال
   ========================================================================== */
/*
  ⚠️ کاربر باید پیش از تغییر بداند الان چه چیزی ثبت شده.

  بدون این، نمی‌فهمد دارد چه چیزی را عوض می‌کند.
*/
.cd-current {
  margin: 14px 0 18px; padding: 16px 18px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.cd-current h3 {
  margin: 0 0 12px; font-size: .95rem; font-weight: 800;
}

.cd-rows {
  display: grid; gap: 10px 18px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cd-rows > div { min-width: 0; }
.cd-rows .is-wide { grid-column: 1 / -1; }

.cd-rows dt {
  font-size: .74rem; color: var(--slate); margin-bottom: 2px;
}
.cd-rows dd {
  margin: 0; font-size: .87rem; line-height: 1.8;
  word-break: break-word;
}

.cd-warn {
  margin: 14px 0 0; padding: 9px 12px;
  border-radius: 9px; font-size: .78rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
}

.wc-back {
  margin: 8px 0 0; font-size: .76rem; line-height: 1.9;
  color: var(--slate);
}

#cdTopUp { margin: 12px 0 0; text-align: center; }
#cdTopUp .btn { width: 100%; }

/* ==========================================================================
   باشگاه — کارت‌های جایزه
   ========================================================================== */
.cb-points {
  font-size: .82rem; font-weight: 800;
  color: var(--green-text-soft);
  background: var(--green-100);
  padding: 5px 13px; border-radius: var(--r-full);
}

.cb-grid {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.cb-card {
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .16s ease, transform .16s ease,
              box-shadow .16s ease;
}
.cb-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 130, 74, .1);
}

/*
  ⚠️ جایزهٔ غیرقابل‌دریافت کم‌رنگ می‌شود، نه پنهان.

  اگر جایزهٔ سطح بالاتر نمایش داده نشود، کاربر انگیزه‌ای
  برای رسیدن به آن سطح پیدا نمی‌کند.
*/
.cb-card.is-locked { opacity: .72; }
.cb-card.is-locked:hover {
  transform: none; border-color: var(--line); box-shadow: none;
}

.cb-media {
  position: relative; height: 118px;
  display: grid; place-items: center;
  background: linear-gradient(135deg,
              var(--green-100), var(--bg-subtle));
}
.cb-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.cb-emoji { font-size: 2.6rem; line-height: 1; }

.cb-cost {
  position: absolute; inset-block-start: 9px;
  inset-inline-end: 9px;
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 4px 11px; border-radius: var(--r-full);
  font-size: .86rem; font-weight: 900;
  background: var(--green-btn); color: var(--on-green);
}
.cb-cost small { font-size: .62rem; font-weight: 700; }

.cb-body { padding: 13px 14px; flex: 1; }
.cb-body b { display: block; font-size: .9rem; line-height: 1.7; }
.cb-body p {
  margin: 5px 0 0; font-size: .78rem; line-height: 1.9;
  color: var(--slate);
}

.cb-facts {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px;
}
.cb-facts span {
  font-size: .7rem; padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--ink-soft);
}

.cb-foot {
  padding: 0 14px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.cb-foot .btn { width: 100%; }

.cb-why {
  font-size: .74rem; line-height: 1.8; color: var(--slate);
}
.cb-short {
  font-size: .72rem; font-weight: 700; color: var(--warn-text);
}

.cb-code {
  font-family: ui-monospace, monospace; direction: ltr;
  padding: 2px 8px; border-radius: 6px;
  background: var(--green-100); color: var(--green-text-soft);
  font-weight: 700;
}

@media (max-width: 640px) {
  .cb-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .cb-media { height: 96px; }
}

/* ==========================================================================
   فاکتور — ردیف تخفیف
   ========================================================================== */
/*
  ⚠️ تخفیف باید از هزینه‌ها متمایز باشد.

  در ستون ارقام، «۳٬۰۰۰٬۰۰۰» تخفیف و «۳٬۰۰۰٬۰۰۰» هزینه از هم
  قابل تشخیص نیستند مگر با رنگ و علامت.
*/
.inv-off b { color: var(--green-text-soft); }

.inv-off code {
  font-family: ui-monospace, monospace; direction: ltr;
  font-size: .72rem; padding: 1px 7px; border-radius: 5px;
  background: var(--green-100); color: var(--green-text-soft);
}


/* ==========================================================================
   باشگاه — تب، جوایز من، کپی کد
   ========================================================================== */
.cb-tabs { margin: 18px 0 16px; }

/* ---------- جوایز من ---------- */
.cb-mine { display: grid; gap: 10px; }

.cb-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}

/*
  ⚠️ وضعیت با رنگ **و** نشان متنی.

  فقط رنگ برای کاربر با اختلال تشخیص رنگ کافی نیست.
*/
.cb-row.is-used { opacity: .68; }
.cb-row.is-expired { opacity: .6; border-style: dashed; }

.cb-row-ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px; font-size: 1.25rem;
  background: var(--green-100);
}

.cb-row-body { flex: 1; min-width: 0; }
.cb-row-body b { display: block; font-size: .88rem; line-height: 1.7; }

.cb-row-meta {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px;
  font-size: .72rem; color: var(--slate);
}

.cb-tag {
  padding: 2px 9px; border-radius: var(--r-full);
  font-weight: 700;
}
.cb-tag.is-live {
  background: var(--green-100); color: var(--green-text-soft);
}
.cb-tag.is-used {
  background: var(--bg-subtle); color: var(--slate);
}
.cb-tag.is-expired {
  background: var(--warn-bg); color: var(--warn-text);
}

/* ---------- کپی کد ---------- */
.cb-copy {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px;
}
.cb-copy code {
  font-family: ui-monospace, monospace; direction: ltr;
  padding: 4px 11px; border-radius: 8px;
  font-size: .82rem; font-weight: 700;
  background: var(--green-100); color: var(--green-text-soft);
  user-select: all;
}

.cb-copy-btn {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); font-size: .82rem;
  transition: border-color .15s ease, background .15s ease;
}
.cb-copy-btn:hover { border-color: var(--green); }
.cb-copy-btn.is-done {
  background: var(--green-btn); color: var(--on-green);
  border-color: var(--green-btn);
}

/* ---------- مودال دریافت ---------- */
.cb-ask {
  margin: 0 0 10px; font-size: 1rem; font-weight: 700;
  line-height: 1.9; text-align: center;
}
.cb-cost-line {
  margin: 0 0 8px; text-align: center; font-size: .88rem;
}
.cb-cost-line b {
  color: var(--green-text-soft); font-size: 1.05rem;
}

/* امتیاز منفی در تاریخچه */
.tx-amount.is-out { color: var(--warn-text); }

/* ==========================================================================
   مودال اطلاعات جایزه — رو به مشتری
   ========================================================================== */
/*
  ⚠️ دکمهٔ اطلاعات روی کارت شناور است.

  فضای کارت کم است و دکمهٔ عادی، چیدمان را می‌شکند.
*/
.cb-info-btn {
  position: absolute; inset-block-start: 9px;
  inset-inline-start: 9px; z-index: 2;
  width: 30px; height: 30px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; font-size: .85rem;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  transition: transform .14s ease;
}
.cb-info-btn:hover { transform: scale(1.1); }
.cb-info-btn:active { transform: scale(.94); }

/* روی سطر «جوایز من» — درون‌خطی */
.cb-info-btn.is-inline {
  position: static; width: auto; height: auto;
  margin-top: 7px; padding: 4px 11px;
  border-radius: var(--r-full); font-size: .73rem;
  font-weight: 700; box-shadow: none;
  background: var(--bg-subtle); color: var(--ink-soft);
}
.cb-info-btn.is-inline:hover {
  background: var(--green-100); color: var(--green-text-soft);
  transform: none;
}

.cb-card { position: relative; }

/* ---------- جعبهٔ مودال ---------- */
.ci-box {
  position: relative; z-index: 1;
  width: min(520px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  animation: ci-in .26s cubic-bezier(.22, 1, .36, 1);
}

@keyframes ci-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.ci-head {
  display: flex; align-items: center; gap: 13px;
  padding: 20px 22px;
  background: linear-gradient(135deg,
              var(--green-100), var(--bg-subtle));
}

.ci-icon {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px; font-size: 1.7rem;
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.ci-head-text { flex: 1; min-width: 0; }
.ci-head-text b {
  display: block; font-size: 1.02rem; line-height: 1.6;
}
.ci-head-text span {
  font-size: .75rem; color: var(--slate);
}

/*
  ⚠️ بدنه اسکرول می‌شود، نه کل مودال.

  سربرگ و دکمه‌ها باید همیشه دیده شوند.
*/
.ci-body {
  padding: 18px 22px; overflow-y: auto;
  flex: 1 1 auto; min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.ci-desc {
  margin: 0 0 15px; font-size: .86rem; line-height: 2;
  color: var(--ink-soft);
}

/* ---------- کد ---------- */
.ci-code {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 16px; padding: 12px 15px;
  border-radius: 13px;
  background: var(--green-100);
  border: 1.5px dashed var(--green);
}
.ci-code > span {
  font-size: .74rem; color: var(--green-text-soft);
  font-weight: 700;
}
.ci-code code {
  flex: 1; font-family: ui-monospace, monospace;
  direction: ltr; text-align: center;
  font-size: 1.02rem; font-weight: 900;
  color: var(--green-text-soft); user-select: all;
}

/* ---------- ارقام ---------- */
.ci-facts {
  display: grid; gap: 9px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.ci-fact {
  padding: 11px 13px; border-radius: 12px;
  background: var(--bg-subtle);
}
.ci-fact span {
  display: block; font-size: .7rem; color: var(--slate);
}
.ci-fact b {
  display: block; margin-top: 3px;
  font-size: .92rem; font-variant-numeric: tabular-nums;
}

/* ---------- دامنه ---------- */
.ci-scope { margin-bottom: 15px; }
.ci-scope h4 {
  margin: 0 0 9px; font-size: .82rem; font-weight: 800;
}

.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.ci-chip {
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: .75rem; line-height: 1.7;
  background: var(--green-100); color: var(--green-text-soft);
  border: 1px solid var(--green);
}

.ci-note {
  margin: 0; padding: 12px 15px; border-radius: 12px;
  font-size: .81rem; line-height: 1.9;
  background: var(--green-100); color: var(--green-text-soft);
}

.ci-foot {
  display: flex; gap: 10px; padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.ci-foot .btn { flex: 1; }

@media (max-width: 640px) {
  .ci-box { width: 100%; max-height: 92vh; border-radius: 20px; }
  .ci-head { padding: 16px 18px; }
  .ci-body { padding: 15px 18px; }
  .ci-foot { padding: 14px 18px; }
  .ci-facts { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================

/* ==========================================================================
   دسته‌بندی صفحهٔ نخست — چیدمان قابل تنظیم
   ==========================================================================

   ⚠️ ستون‌ها از تنظیمات سایت می‌آیند.

   پیش‌تر `repeat(8, 1fr)` ثابت بود و ادمین نمی‌توانست
   عوضش کند.
   ========================================================================== */
.cats.is-grid {
  display: grid;
  grid-template-columns: repeat(var(--cat-cols, 7), minmax(0, 1fr));
  gap: 14px;
}

/*
  ⚠️ در حالت شبکه‌ای هم ارتفاع یکسان.

  `1fr` عرض را مساوی می‌کند ولی ارتفاع را نه.
*/
.cats.is-grid .cat {
  min-height: 132px;
  justify-content: center;
}
.cats.cat-sm.is-grid .cat { min-height: 108px; }
.cats.cat-lg.is-grid .cat { min-height: 158px; }


/*
  ⚠️ حالت اسکرول افقی.

  `grid-auto-flow: column` همه را در یک ردیف می‌چیند و
  `overflow-x` بقیه را قابل کشیدن می‌کند.
*/
.cats.is-scroll {
  display: grid;
  grid-auto-flow: column;
  /*
    ⚠️ باگ رفع‌شده: بهم‌ریختن اندازهٔ کارت‌ها در چیدمان افقی.

    `theme.css` روی `.cats` یک شبکهٔ **صریح** می‌گذارد:
    `grid-template-columns: repeat(8, 1fr)` (و در بازه‌های
    ریسپانسیو ۴ و ۳ و ۲ ستون).

    آن قاعده این‌جا بازنویسی نمی‌شد، پس در حالت افقی هر دو
    با هم فعال بودند: هشت کارت اول داخل ستون‌های صریحِ
    `1fr` می‌افتادند — که در ظرف اسکرول‌دار به عرض ظرف
    فشرده می‌شوند — و کارت‌های بعدی در ستون‌های ضمنیِ
    `grid-auto-columns` با عرض درست. نتیجه: چند کارت باریکِ
    له‌شده در ابتدای ردیف و بقیه سالم.

    `none` شبکهٔ صریح را برمی‌دارد تا **همهٔ** کارت‌ها از
    `grid-auto-columns` عرض بگیرند. همین کار در بلوک موبایل
    پایین‌تر انجام شده بود؛ فقط از حالت دسکتاپ جا مانده بود.
  */
  grid-template-columns: none;
  /*
    ⚠️ عرض **ثابت**، نه `1fr`.

    در ظرف اسکرول‌دار، `1fr` به‌معنای «سهم مساوی از فضای
    آزاد» نیست — هر ستون به اندازهٔ محتوایش کش می‌آید.
  */
  grid-auto-columns: 150px;
  /*
    ⚠️ کشیدن با ماوس.

    بدون آن، کاربر دسکتاپ فقط با نوار اسکرول می‌تواند
    جابه‌جا کند.
  */
  cursor: grab;
  user-select: none;
  gap: 12px;
  overflow-x: auto;
  /*
    ⚠️ زنجیرهٔ اسکرول قطع می‌شود.

    وقتی به ته ردیف رسیدیم، ادامهٔ کشیدن نباید صفحه را
    افقی ببرد.
  */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /*
    ⚠️ فضا برای hover — در **هر دو** طرف، نه فقط پایین.

    `overflow-x: auto` طبق استاندارد محور عمودی را هم از
    `visible` به `auto` می‌برد؛ یعنی این ظرف از بالا و
    پایین **می‌بُرد**، حتی اگر فقط اسکرول افقی بخواهیم.

    کارت روی hover سه پیکسل بالا می‌رود (`translateY(-3px)`)
    و سایهٔ `--sh-md` هم `0 4px 12px` است. پس بالای کارت
    حدود ۱۱ پیکسل و پایینش حدود ۱۳ پیکسل فضا لازم دارد.

    ۶ پیکسلِ قبلی فقط پایین بود و برای هیچ‌کدام کافی نبود —
    نتیجه: لبهٔ بالای کارتِ hover شده بیرون کادر بریده
    می‌شد و سایه‌اش اصلاً دیده نمی‌شد.
  */
  padding-block: 12px 14px;
  scrollbar-width: thin;
}
/*
  ⚠️ ارتفاع یکسان مستقل از طول نام.

  نام سه‌خطی کارت را بلندتر می‌کرد و ردیف ناهموار می‌شد.
*/
.cats.is-scroll .cat {
  scroll-snap-align: start;
  min-height: 132px;
  justify-content: center;
  /*
    ⚠️ `min-width: 0` حیاتی است.

    عضو گرید به‌طور پیش‌فرض کوچک‌تر از محتوایش نمی‌شود؛
    بدون این، نام بلند کارت را پهن می‌کند و `grid-auto-columns`
    بی‌اثر می‌ماند — دقیقاً چیزی که در تصویر دیده می‌شود.
  */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ⚠️ هنگام کشیدن، نشانگر عوض شود */
.cats.is-scroll.is-dragging { cursor: grabbing; }
.cats.is-scroll.is-dragging .cat { pointer-events: none; }

.cats.is-scroll .cat > span:last-child,
.cats.is-grid .cat > span:last-child {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  /*
    ⚠️ `min-width: 0` و `word-break` هر دو لازم‌اند.

    بدون اولی، کلمهٔ بلند کارت را پهن می‌کند؛ بدون دومی،
    کلمهٔ بی‌فاصله بریده نمی‌شود و سرریز می‌کند.
  */
  min-width: 0; max-width: 100%;
  word-break: break-word;
}

/* اندازهٔ کوچک و بزرگ */
.cats.cat-sm.is-scroll { grid-auto-columns: 124px; }
.cats.cat-sm.is-scroll .cat { min-height: 108px; }

.cats.cat-lg.is-scroll { grid-auto-columns: 178px; }
.cats.cat-lg.is-scroll .cat { min-height: 158px; }
.cats.is-scroll::-webkit-scrollbar { height: 6px; }
.cats.is-scroll::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
}

/* ---------- اندازهٔ کارت ---------- */
.cats.cat-sm .cat { padding: 12px 8px; gap: 7px; font-size: .78rem; }
.cats.cat-sm .ic { width: 40px; height: 40px; font-size: 1.15rem; }

.cats.cat-lg .cat { padding: 24px 14px; gap: 13px; font-size: .95rem; }
.cats.cat-lg .ic { width: 68px; height: 68px; font-size: 1.9rem; }

/* ⚠️ تصویر باید کادر آیکن را پر کند */
.cats .ic { overflow: hidden; }
.cats .ic img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   موبایل — همیشه اسکرول افقی
   ==========================================================================

   ⚠️ مستقل از تنظیم ادمین.

   شبکه در موبایل یعنی کارت‌های ریز یا ستون بلند؛ اسکرول
   افقی الگوی آشنای فروشگاه‌های موبایلی است.
   ========================================================================== */
@media (max-width: 768px) {
  .cats,
  .cats.is-grid,
  .cats.is-scroll {
    display: grid;
    grid-auto-flow: column;
    /*
      ⚠️ سه کارت در عرض معمول گوشی.

      `calc` عرض را از خود پنجره می‌گیرد تا در هر اندازه‌ای
      دقیقاً سه‌تا جا شود و چهارمی نیمه پیدا باشد — نشانهٔ
      اینکه ادامه دارد.
    */
    grid-auto-columns: calc((100% - 24px) / 3.3);
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /*
      ⚠️ همان بریدگیِ بالا و پایینِ حالت دسکتاپ.

      روی گوشی‌های لمسی هم `:hover` بعد از لمس می‌چسبد و
      کارت بالا می‌رود؛ ضمناً سایهٔ کارت در حالت عادی هم
      نباید بریده شود.
    */
    padding-block: 12px 14px;
    scrollbar-width: none;
  }
  .cats::-webkit-scrollbar { display: none; }

  .cats .cat {
    scroll-snap-align: start;
    padding: 12px 6px; gap: 7px; font-size: .72rem;
    line-height: 1.6;
    /* ⚠️ ارتفاع یکسان مستقل از طول نام */
    min-height: 104px;
    justify-content: center;
  }
  .cats .ic { width: 42px; height: 42px; font-size: 1.2rem; }

  /*
    ⚠️ نام دسته در دو خط.

    کارت باریک است و بریدن نام، کاربر را سردرگم می‌کند.
  */
  .cats .cat > span:last-child {
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
}


/* ==========================================================================
   درختوارهٔ دسته‌بندی — پنل مدیریت
   ==========================================================================

   ⚠️ فهرست تخت رابطهٔ والد و فرزند را نشان نمی‌داد.

   خط عمودی و انشعاب افقی، ساختار را در یک نگاه می‌رسانند.
   ========================================================================== */
.tv { list-style: none; margin: 0; padding: 0; }
.tv-kids { list-style: none; margin: 0; padding: 0; }

.tv-node { position: relative; }

.tv-node > details > summary,
.tv-single {
  display: flex; align-items: center; gap: 6px;
  list-style: none; cursor: pointer;
}
.tv-node > details > summary::-webkit-details-marker { display: none; }
.tv-node > details > summary::marker { content: ""; }

/* ---------- فلش باز/بسته ---------- */
.tv-caret {
  flex: none; width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--slate); font-size: .7rem;
  transition: transform .18s ease;
}
.tv-caret::before { content: "▾"; }
.tv-caret.is-empty::before { content: ""; }

/* ⚠️ در RTL چرخش معکوس است */
.tv-node > details:not([open]) > summary .tv-caret {
  transform: rotate(90deg);
}

/* ---------- خطوط راهنما ---------- */
/*
  ⚠️ خط عمودی از فلش والد تا آخرین فرزند.

  `inset-inline-start: 9px` مرکز فلش ۲۰ پیکسلی است؛ هر عدد
  دیگری خط را کج نشان می‌دهد.
*/
.tv-kids {
  position: relative;
  margin-inline-start: 9px;
  padding-inline-start: 20px;
  border-inline-start: 1.5px solid var(--line);
}

/*
  ⚠️ انشعاب افقی به هر فرزند.

  بدون آن، خط عمودی معلق به‌نظر می‌رسد و به ردیف وصل
  نمی‌شود.
*/
.tv-kids > .tv-node::before {
  content: ""; position: absolute;
  inset-inline-start: -20px;
  top: 50%; width: 20px; height: 1.5px;
  background: var(--line);
}

/*
  ⚠️ خط عمودی پس از آخرین فرزند بریده می‌شود.

  وگرنه تا انتهای ظرف ادامه می‌یابد و به هیچ ردیفی وصل
  نیست.
*/
.tv-kids > .tv-node:last-child::after {
  content: ""; position: absolute;
  inset-inline-start: -21.5px;
  top: calc(50% + 1px); bottom: -4px;
  width: 1.5px; background: var(--bg);
}

/* ---------- ردیف ---------- */
.tv-row {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin: 3px 0;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .15s ease, background .15s ease;
}
.tv-row:hover {
  border-color: var(--green); background: var(--green-100);
}
.tv-row.is-off { opacity: .55; border-style: dashed; }

.tv-ic {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px; font-size: .95rem;
  background: var(--green-100); overflow: hidden;
}
.tv-ic img { width: 100%; height: 100%; object-fit: cover; }

/*
  ⚠️ جای خالی تصویر باید دیده شود، نه اینکه غیبش بزند.

  اگر خانهٔ تصویر وقتی خالی است حذف شود، ردیف‌ها هم‌تراز
  نمی‌مانند و ادمین هم نمی‌فهمد تصویر نگذاشته.
*/
.tv-ic-none { opacity: .28; font-style: normal; font-size: .8rem; }

/*
  آیکنِ منو — خانهٔ جدا از تصویر.

  ⚠️ این دو یک چیز نیستند: تصویر در کارت صفحه می‌آید و آیکن
  در مگامنو. یک خانه برای هر دو یعنی ادمین نمی‌فهمد کدام را
  جا انداخته.
*/
.tv-emoji {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px; font-size: .9rem;
  background: var(--bg-subtle); color: var(--slate);
  border: 1px dashed transparent;
}
.tv-emoji.is-none {
  border-color: var(--line); background: transparent;
  font-size: .7rem; opacity: .5;
}

.tv-name {
  font-size: .85rem; font-weight: 700;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}

.tv-slug {
  font-family: ui-monospace, monospace; direction: ltr;
  font-size: .68rem; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-subtle); color: var(--slate);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 180px;
}

.tv-num {
  font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
}

.tv-off {
  font-size: .66rem; padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--danger-bg); color: var(--danger-text);
}

/* ⚠️ دکمه‌ها به انتهای ردیف چسبیده بمانند */
.tv-acts {
  margin-inline-start: auto; flex: none;
  display: flex; align-items: center; gap: 4px;
}
.tv-acts form { display: contents; }

.tv-acts a,
.tv-acts button {
  width: 30px; height: 30px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; font-size: .82rem;
  background: transparent; color: inherit;
}
.tv-acts a:hover { background: var(--green-100); }
.tv-acts button:hover { background: var(--danger-bg); }

/* ---------- شمارندهٔ زیرمجموعه ---------- */
/*
  ⚠️ روی خودِ شاخه، نه داخل ردیف.

  حالا که شاخه‌ها بسته‌اند، کاربر باید پیش از باز کردن بداند
  چند تا داخلش هست — وگرنه باید یکی‌یکی باز کند تا پیدا کند.
*/
.tv-kidnum {
  flex: none; min-width: 22px; text-align: center;
  margin-inline-start: 6px;
  font-size: .66rem; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
}
.tv-branch[open] > summary .tv-kidnum {
  background: var(--green-100); color: var(--green-text-soft);
}

/* ---------- تفکیک والد از فرزند ---------- */
/*
  ⚠️ پیش‌تر ردیف والد و فرزند دقیقاً یک شکل بودند.

  در درختی که حالا چند سطح دارد، فقط تورفتگی برای فهمیدن
  «این زیرمجموعهٔ کیست» کافی نیست. شاخه‌ها کمی پررنگ‌ترند و
  برگ‌ها سبک‌تر.
*/
.tv-branch > summary > .tv-row {
  background: var(--bg-subtle);
  border-color: var(--line);
}
.tv-branch > summary > .tv-row .tv-name { font-weight: 800; }

.tv-branch[open] > summary > .tv-row {
  background: var(--surface);
  border-color: var(--green);
}

.tv-node.is-leaf > .tv-single > .tv-row .tv-name {
  font-weight: 600; color: var(--slate);
}

/* ⚠️ خط راهنمای شاخهٔ باز، پررنگ‌تر از شاخهٔ بسته */
.tv-branch[open] > .tv-kids { border-inline-start-color: var(--green-200, var(--green)); }

@media (max-width: 640px) {
  .tv-slug { display: none; }
  .tv-emoji { display: none; }
  .tv-kids { padding-inline-start: 14px; }
  .tv-kids > .tv-node::before { inset-inline-start: -14px; width: 14px; }
  .tv-kids > .tv-node:last-child::after { inset-inline-start: -15.5px; }
}


/* ==========================================================================
   مگامنو
   ==========================================================================

   همهٔ قواعد مگامنو این‌جاست — پیش‌تر در هفت جای پراکندهٔ همین
   فایل بود و لایه‌های وصله روی هم، خودش منبع باگ شده بود.

   دو سطح، یک DOM:
     • دسکتاپ — ستون دسته‌ها کنار ستون زیرمجموعه‌ها.
     • موبایل — درِیل‌داون؛ سطح دو از کنار می‌آید.

   ⚠️ رنگ هر دسته از `--pal` می‌آید (کلاس `pal-*` که فیلتر
   `|pal` می‌گذارد). اگر دسته رنگ نداشته باشد، سبز برند
   جایگزین می‌شود — پس هیچ‌جا رنگ سخت‌کدشده لازم نیست.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱) قاب و پوشش
   --------------------------------------------------------------------------

   ⚠️ `fixed` نه `absolute`.

   هدر `sticky` است؛ پنلِ درون‌جریان با اسکرول بالا می‌رفت و
   عملاً دیده نمی‌شد. `fixed` منو را به پنجره می‌چسباند و
   `--mega-top` (که JS از ارتفاع واقعی هدر حساب می‌کند) دقیقاً
   زیر هدر می‌نشاندش.
   -------------------------------------------------------------------------- */
.mega {
  position: fixed;
  inset-block-start: var(--mega-top, 78px);
  inset-inline: 0;
  z-index: 60;
  max-height: calc(100dvh - var(--mega-top, 78px));
}
.mega[hidden] { display: none; }

/*
  ⚠️ جبران عرض نوار اسکرول.

  با فعال‌شدن قفل اسکرول، نوار اسکرول می‌رود و پنجره چند پیکسل
  پهن‌تر می‌شود. بدنه با `padding` سرِ جایش می‌ماند ولی `.mega`
  که `fixed` است پهن‌تر می‌شود و پنلِ وسط‌چین نصفِ آن مقدار
  می‌لغزد. `--vh-lock-gap` را `vhLockScroll` تنظیم می‌کند.
*/
body.vh-locked .mega { padding-inline-end: var(--vh-lock-gap, 0px); }

/* پوشش تیره — تمرکز روی منو، و کلیک بیرون طبیعی می‌شود */
.mega::before {
  content: ""; position: fixed;
  inset-block-start: var(--mega-top, 78px);
  inset-inline: 0; inset-block-end: 0;
  background: rgba(8, 20, 14, .46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: mega-fade .2s ease;
  z-index: -1;
}

@keyframes mega-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   ۲) پنل
   --------------------------------------------------------------------------

   ⚠️ سقف ارتفاع، نه ارتفاع آزاد.

   ستون دسته‌ها بیست‌ودو ردیف دارد و اگر پنل بگذارد کامل باز
   شود، تا کف صفحه کش می‌آید — همان بیابانِ خالی زیر
   زیرمجموعه‌ها. حالا پنل سقف دارد و ستون دسته‌ها خودش اسکرول
   می‌شود.

   ⚠️ سقف **ثابت** است، نه وابسته به محتوا: با جابه‌جایی بین
   دسته‌ها ارتفاع پنل نمی‌پرد.
   -------------------------------------------------------------------------- */
.mega-panel {
  position: relative;
  margin: 10px auto 0;
  /*
    ⚠️ عرض ۱۷۸۰ پیکسل عمداً حفظ شده.

    `min()` روی پنجرهٔ کوچک‌تر خودش را وفق می‌دهد.
  */
  width: min(1780px, calc(100% - 32px));
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  /*
    ⚠️ سایهٔ چندلایه، نه یک سایهٔ تخت.

    لایهٔ نزدیک لبه را تعریف می‌کند و لایهٔ دور، پنل را از
    صفحه جدا می‌کند — همان چیزی که «شناور» به‌نظر رسیدن را
    می‌سازد.
  */
  box-shadow:
    0 1px 2px rgba(16, 22, 20, .04),
    0 8px 24px -8px rgba(16, 22, 20, .12),
    0 32px 64px -24px rgba(16, 22, 20, .28);
  overflow: hidden;
  animation: mega-in .22s cubic-bezier(.16, 1, .3, 1);
}

@keyframes mega-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.mega-v2 {
  display: grid;
  grid-template-columns: minmax(240px, 286px) 1fr;
  grid-template-rows: 1fr auto;
  max-height: min(calc(100dvh - var(--mega-top, 78px) - 28px), 566px);
}

@media (min-width: 1400px) {
  /* با عرض ۱۷۸۰، ستون ۲۸۶ پیکسلی نامتوازن به‌نظر می‌رسد */
  .mega-v2 { grid-template-columns: minmax(280px, 320px) 1fr; }
}

/*
  ⚠️ `min-height: 0` حیاتی است.

  عضو گرید به‌طور پیش‌فرض کوچک‌تر از محتوایش نمی‌شود و
  `overflow-y` بی‌اثر می‌ماند.
*/
.mega-rail,
.mega-pane {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* تا رسیدن به ته فهرست، صفحهٔ پشت تکان نخورد */
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.mega-rail::-webkit-scrollbar,
.mega-pane::-webkit-scrollbar { width: 7px; }

.mega-rail::-webkit-scrollbar-thumb,
.mega-pane::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
}
.mega-rail::-webkit-scrollbar-thumb:hover,
.mega-pane::-webkit-scrollbar-thumb:hover { background: var(--slate); }

/* --------------------------------------------------------------------------
   ۳) ستون دسته‌های اصلی
   -------------------------------------------------------------------------- */
.mega-rail {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px 18px;
  /* ⚠️ پشتیبان ساده: مرورگری که `color-mix` ندارد، کل اعلانِ
     گرادیان را دور می‌ریزد و ستون بی‌پس‌زمینه می‌ماند. */
  background: var(--bg-subtle);
  background:
    linear-gradient(180deg,
      var(--bg-subtle) 0%,
      color-mix(in srgb, var(--bg-subtle) 55%, transparent) 100%);
  border-inline-end: 1px solid var(--line);
  /*
    ⚠️ محو شدن لبهٔ پایین یعنی «ادامه دارد».

    فهرست بلند است و بدون این نشانه، کاربر فکر می‌کند به ته
    رسیده. `mask` روی خودِ ظرفِ اسکرول‌شونده کار می‌کند چون
    نسبت به ناحیهٔ دید محاسبه می‌شود.
  */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
}

.mega-rail-head {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 12px 6px;
  font-size: .7rem; font-weight: 800;
  color: var(--slate); letter-spacing: .4px;
}
.mega-rail-head::after {
  content: ""; flex: 1; height: 1px;
  background: var(--line);
}
.mega-rail-head:not(:first-child) { margin-top: 10px; }

.mega-tab {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 11px 8px 11px;
  padding-inline-start: 15px;
  border: 1px solid transparent; border-radius: 13px;
  cursor: pointer;
  background: transparent; color: var(--ink);
  font: inherit; font-size: .845rem; font-weight: 600;
  text-align: start;
  transition: background .16s ease, color .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}

/*
  ⚠️ نوار رنگی کنارهٔ دستهٔ فعال.

  با `scaleY` رشد می‌کند تا جابه‌جایی بین دسته‌ها حس حرکت
  بدهد، نه پرش.
*/
.mega-tab::before {
  content: ""; position: absolute;
  inset-block: 10px; inset-inline-start: 5px;
  width: 3px; border-radius: 3px;
  background: var(--pal, var(--green));
  transform: scaleY(0); transform-origin: center;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.mega-tab:hover {
  background: var(--surface);
  border-color: var(--line);
}

.mega-tab.on {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--pal, var(--green)) 26%, var(--line));
  color: var(--pal-text, var(--green-text-soft));
  font-weight: 800;
  box-shadow: 0 2px 8px -2px color-mix(in srgb,
              var(--pal, var(--green)) 30%, transparent);
}
.mega-tab.on::before { transform: scaleY(1); }

/* آیکن دسته در چیپ گرد */
.mega-tab-ico {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--pal-soft, var(--green-100));
  font-size: .98rem; line-height: 1;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.mega-tab.on .mega-tab-ico { transform: scale(1.06); }

/*
  ⚠️ دو خط، نه سه‌نقطه.

  «تجهیزات نگهداری و پرورش ح…» به کاربر نمی‌گوید داخلش چیست.
  دو خط در ستون ۲۸۶ پیکسلی برای بلندترین نام کافی است.
*/
.mega-tab-name {
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/*
  ⚠️ فلش با جهت صفحه می‌چرخد.

  کاراکتر `›` فیزیکی است؛ در RTL باید به چپ اشاره کند.
*/
.mega-tab-arrow {
  flex: none;
  color: var(--slate); font-size: 1.05rem; line-height: 1;
  opacity: .5;
  transform: scaleX(var(--dir-x, -1));
  transition: opacity .16s ease, translate .16s ease;
}
[dir="ltr"] .mega-tab-arrow { --dir-x: 1; }

.mega-tab:hover .mega-tab-arrow { opacity: 1; }
.mega-tab.on .mega-tab-arrow {
  opacity: 1; color: var(--pal, var(--green));
}

/* --------------------------------------------------------------------------
   ۴) ستون زیرمجموعه‌ها
   -------------------------------------------------------------------------- */
.mega-pane {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column;
  padding: 20px 24px 22px;
  /* `z-index: 0` بافت چینشی می‌سازد تا درخشش زیر محتوا بماند */
  position: relative; z-index: 0;
}

/*
  ⚠️ فضای خالی زیر زیرمجموعه‌ها.

  ارتفاع پنل را ستونِ بیست‌ودو ردیفیِ دسته‌ها تعیین می‌کند، پس
  دسته‌ای با چهار زیرمجموعه ناگزیر زیرش جا می‌ماند. ارتفاع
  متغیر بدترین گزینه بود: با هر بار عبور ماوس، پنل بالا و
  پایین می‌پرید.

  به‌جایش، آن فضا یک درخشش بسیار کم‌رنگ از رنگ **همان دسته**
  می‌گیرد که با جابه‌جایی عوض می‌شود — عمدی به‌نظر می‌رسد،
  نه رهاشده. جایگزینِ آن بلوک سبزِ محوِ قبلی.

  ⚠️ درخشش روی خودِ ستون است تا زیر `padding` هم برود.

  اگر روی `<section>` داخلی می‌نشست، لبه‌اش دقیقاً سرِ
  `padding` ستون قطع می‌شد و یک پله‌ی روشن می‌ساخت.

  ⚠️ رنگش را JS می‌آورد: کلاس `pal-*` دستهٔ فعال روی همین
  ستون هم گذاشته می‌شود، وگرنه `--pal` به این‌جا نمی‌رسید و
  درخشش همیشه سبز می‌ماند.

  ⚠️ مرکز گرادیان **پایین‌تر از** کف کادر و بلندتر از آن
  است. با بیضیِ کوچک‌تر، لبه‌اش داخل کادر می‌افتاد و یک خط
  افقی محو می‌ساخت — لکه، نه درخشش.
*/
.mega-pane::before {
  content: ""; position: absolute;
  inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 120% at 14% 118%,
    color-mix(in srgb, var(--pal, var(--green)) 10%, transparent) 0%,
    transparent 100%);
  transition: background .28s ease;
}
[dir="ltr"] .mega-pane::before {
  background: radial-gradient(70% 120% at 86% 118%,
    color-mix(in srgb, var(--pal, var(--green)) 10%, transparent) 0%,
    transparent 100%);
}

.mega-sub { display: none; }
.mega-sub.on {
  display: flex; flex-direction: column;
  /* ⚠️ ارتفاع ستون را پر کند، وگرنه درخشش فقط پشت متن می‌افتد */
  flex: 1; min-height: 0;
  animation: mega-sub-in .24s cubic-bezier(.16, 1, .3, 1);
}

@keyframes mega-sub-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.mega-sub-head {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 15px; margin-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

/*
  ⚠️ آیکن سرستون با گرادیان رنگ دسته.

  تخت بودنش، سرِ ستون را از فهرست زیرش جدا نمی‌کرد.
*/
.mega-sub-ico {
  flex: none;
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 16px;
  font-size: 1.45rem; line-height: 1;
  background: var(--pal-soft, var(--green-100));   /* پشتیبان */
  background: linear-gradient(140deg,
    var(--pal-soft, var(--green-100)),
    color-mix(in srgb, var(--pal, var(--green)) 16%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb,
              var(--pal, var(--green)) 18%, transparent);
}

.mega-sub-id { min-width: 0; flex: 1; }
.mega-sub-id b {
  display: block; font-size: 1.06rem; font-weight: 800;
  color: var(--ink); line-height: 1.5;
}
.mega-sub-n {
  display: block; font-size: .74rem; font-weight: 600;
  color: var(--slate);
}

/*
  ⚠️ «همهٔ موارد» دکمه است، نه لینک متنی.

  مقصد اصلیِ این ستون است و باید در یک نگاه پیدا شود.
*/
.mega-all {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-full);
  font-size: .79rem; font-weight: 800; text-decoration: none;
  color: var(--pal-text, var(--green-text-soft));
  background: var(--pal-soft, var(--green-100));
  border: 1px solid transparent;
  transition: background .16s ease, color .16s ease,
              border-color .16s ease, translate .16s ease;
}
.mega-all:hover {
  background: var(--pal, var(--green));
  border-color: var(--pal, var(--green));
  color: #fff;
}
.mega-all span { transform: scaleX(var(--dir-x, 1)); }
[dir="ltr"] .mega-all span { --dir-x: -1; }

.mega-sub-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}

.mega-sub-list a {
  display: flex; align-items: center; gap: 9px;
  /*
    ⚠️ ارتفاع ثابت، نه وابسته به طول متن.

    با `padding` تنها، نام دوخطی کارت را بلندتر می‌کرد و
    ردیف ناهموار می‌شد.
  */
  min-height: 54px; padding: 0 14px;
  border-radius: 13px;
  font-size: .82rem; font-weight: 600; line-height: 1.5;
  text-decoration: none; color: var(--ink-soft);
  background: var(--bg-subtle);
  border: 1px solid transparent;
  overflow: hidden; min-width: 0;
  transition: background .16s ease, color .16s ease,
              border-color .16s ease, transform .16s ease,
              box-shadow .16s ease;
}

/* نقطهٔ رنگی به‌جای گلوله — وقتی آیکن ندارد */
.mega-sub-list a::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pal, var(--green));
  opacity: .55;
  transition: opacity .16s ease, transform .16s ease;
}
.mega-kid-ico { font-style: normal; flex: none; font-size: .95rem; }

.mega-sub-list a > span {
  min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

.mega-sub-list a:hover {
  background: var(--pal-soft, var(--green-100));
  color: var(--pal-text, var(--green-text-soft));
  border-color: color-mix(in srgb, var(--pal, var(--green)) 38%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px color-mix(in srgb,
              var(--pal, var(--green)) 45%, transparent);
}
.mega-sub-list a:hover::before { opacity: 1; transform: scale(1.35); }

.mega-sub-empty {
  display: flex; align-items: center; gap: 9px;
  padding: 22px; margin: 0;
  border: 1px dashed var(--line); border-radius: 14px;
  background: var(--bg-subtle);
  color: var(--slate); font-size: .83rem;
}

/* --------------------------------------------------------------------------
   ۵) میان‌بُرها — نوار پایینِ تمام‌عرض
   --------------------------------------------------------------------------

   ⚠️ بیرون از ستون‌هاست تا هم روی دسکتاپ نوار پیوسته بسازد و
   هم روی موبایل در هر دو سطح در دسترس بماند.
   -------------------------------------------------------------------------- */
.mega-quick {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px 24px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--line);
}

.mega-quick a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 8px 12px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .81rem; font-weight: 700;
  color: var(--ink-soft); text-decoration: none;
  transition: border-color .16s ease, color .16s ease,
              transform .16s ease, box-shadow .16s ease;
}
.mega-quick a > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mega-quick-ic {
  flex: none; font-size: 1.05rem; line-height: 1;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.mega-quick a:hover {
  border-color: var(--green);
  color: var(--green-text-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px color-mix(in srgb,
              var(--green) 45%, transparent);
}
.mega-quick a:hover .mega-quick-ic { transform: scale(1.15); }

/* --------------------------------------------------------------------------
   ۶) نوار بالا و دکمهٔ بستن — فقط موبایل
   -------------------------------------------------------------------------- */
.mega-bar { display: none; }

.mega-x {
  width: 36px; height: 36px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  font-size: .88rem; line-height: 1;
  transition: border-color .16s ease, color .16s ease;
}
.mega-x:hover { border-color: var(--green); color: var(--green-text-soft); }

/* --------------------------------------------------------------------------
   ۷) موبایل — درِیل‌داون تمام‌عرض
   --------------------------------------------------------------------------

   ⚠️ چرا درِیل‌داون و نه دو ستونِ فشرده.

   روی گوشی، ستون باریکِ دسته‌ها نام‌ها را می‌شکست
   («تجهیزات نگهداری و…») و هدف لمس را ریز می‌کرد. حالا هر
   سطح تمام عرض صفحه را دارد.

   ⚠️ جهت اسلاید با `--mega-x-dir` حل شده، نه با کد جداگانه
   برای RTL و LTR. در RTL سطح دو از **چپ** می‌آید (خلاف جهت
   خواندن) و در LTR از راست.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mega {
    --mega-x-dir: -1;
    inset-block-start: var(--mega-top, 60px);
    inset-block-end: 0;
    max-height: none;
    display: flex; align-items: stretch;
    padding: 8px;
  }
  [dir="ltr"] .mega { --mega-x-dir: 1; }

  .mega-panel {
    width: 100%; margin: 0;
    border-radius: 18px;
    animation: mega-in-m .24s cubic-bezier(.16, 1, .3, 1);
  }

  @keyframes mega-in-m {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /*
    ⚠️ سه ردیف: نوار بالا، محتوا، میان‌بُرها.

    هر دو ستون در **یک** خانهٔ گرید می‌نشینند و با
    `translate` جابه‌جا می‌شوند — این چیزی است که حسِ
    «رفتن به صفحهٔ بعد» را می‌سازد.
  */
  .mega-v2 {
    grid-template-columns: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: none; height: 100%;
  }

  .mega-bar {
    grid-column: 1; grid-row: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

  .mega-bar-title {
    flex: 1; min-width: 0;
    font-size: .95rem; font-weight: 800; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .mega-back {
    width: 36px; height: 36px; flex: none; cursor: pointer;
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--ink);
    font-size: 1.15rem; line-height: 1;
    /* فلش فیزیکی است و باید با جهت صفحه بچرخد */
    transition: opacity .18s ease, visibility .18s ease;
  }
  .mega-back > span { display: block; transform: scaleX(var(--dir-x, -1)); }
  [dir="ltr"] .mega-back > span { --dir-x: 1; }

  /* در سطح ۱ جایی برای بازگشت نیست، ولی جای عنوان نباید بلرزد */
  .mega-panel[data-level="1"] .mega-back {
    opacity: 0; visibility: hidden;
  }

  .mega-rail,
  .mega-pane {
    grid-column: 1; grid-row: 2;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1),
                opacity .2s ease, visibility .28s;
  }

  .mega-rail {
    padding: 10px 10px 16px;
    border-inline-end: 0;
    background: var(--surface);
    -webkit-mask-image: none; mask-image: none;
  }

  .mega-pane { padding: 16px 14px 20px; }

  /* ---- سطح ۱: فهرست دسته‌ها جلو ---- */
  .mega-panel[data-level="1"] .mega-rail {
    transform: none; opacity: 1;
  }
  .mega-panel[data-level="1"] .mega-pane {
    transform: translateX(calc(var(--mega-x-dir, -1) * 100%));
    opacity: 0; visibility: hidden;
  }

  /* ---- سطح ۲: زیرمجموعه‌ها جلو ---- */
  .mega-panel[data-level="2"] .mega-rail {
    transform: translateX(calc(var(--mega-x-dir, -1) * -100%));
    opacity: 0; visibility: hidden;
  }
  .mega-panel[data-level="2"] .mega-pane {
    transform: none; opacity: 1;
  }

  /*
    ⚠️ ردیف‌های درشت‌تر برای انگشت.

    ۴۴ پیکسل کف پذیرفتهٔ هدف لمس است؛ ۵۴ راحت‌تر است و حالا
    که ستون تمام‌عرض شده، جا هست.
  */
  .mega-tab {
    min-height: 54px; padding: 9px 12px;
    font-size: .89rem; border-radius: 14px;
  }
  .mega-tab-ico { width: 34px; height: 34px; font-size: 1.05rem; }
  .mega-tab-name { white-space: normal; }

  .mega-rail-head { font-size: .68rem; padding: 12px 12px 6px; }

  /* سرستون زیرمجموعه‌ها: عمودی تا «همهٔ موارد» تمام‌عرض شود */
  .mega-sub-head {
    flex-wrap: wrap; gap: 11px;
    padding-bottom: 13px; margin-bottom: 14px;
  }
  .mega-sub-ico { width: 44px; height: 44px; font-size: 1.3rem; }
  .mega-sub-id b { font-size: 1rem; }
  .mega-all {
    flex: 1 0 100%;
    justify-content: center; padding: 12px 16px;
    font-size: .84rem;
  }

  /* ستون باریک است؛ دو ستون یعنی متن بریده */
  .mega-sub-list { grid-template-columns: 1fr; gap: 7px; }
  .mega-sub-list a { min-height: 52px; font-size: .85rem; }

  .mega-quick {
    grid-column: 1; grid-row: 3;
    grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 10px 12px;
    padding-bottom: calc(10px + var(--safe-bottom, 0px));
  }
  .mega-quick a {
    min-height: 44px; font-size: .77rem;
    justify-content: flex-start;
  }
}

/*
  ⚠️ در دسکتاپ نوار بالا و ضربدر لازم نیست — و مزاحم‌اند.

  سه راه خروج هست: کلیک بیرون، کلید Escape، و دوباره زدن دکمهٔ
  «همه دسته‌ها». دکمه فقط پنهان می‌شود، نه حذف، تا در بازهٔ
  موبایل دست‌نخورده بماند.
*/
@media (min-width: 901px) {
  .mega-bar { display: none; }
}

/* حرکت کمتر برای کسانی که خواسته‌اند */
@media (prefers-reduced-motion: reduce) {
  .mega-panel,
  .mega-sub.on,
  .mega::before { animation: none; }

  .mega-rail,
  .mega-pane,
  .mega-tab,
  .mega-tab::before,
  .mega-tab-ico,
  .mega-sub-list a,
  .mega-quick a,
  .mega-all { transition: none; }
}

/*
  ⚠️ تبلت — همان درِیل‌داون، ولی دو ستونه.

  بین ۶۲۰ تا ۹۰۰ پیکسل، الگوی لمسی هنوز درست است (صفحهٔ
  لمسی، هدف بزرگ) ولی فهرست تک‌ستونه نصف عرض را هدر می‌داد و
  کاربر برای رسیدن به دستهٔ آخر کلی اسکرول می‌کرد.
*/
@media (min-width: 620px) and (max-width: 900px) {
  .mega-rail {
    display: grid; gap: 6px;
    grid-template-columns: 1fr 1fr;
    align-content: start;
  }
  /* سرگروه‌ها («کالاها»، «خدمات») تمام‌عرض بمانند */
  .mega-rail-head { grid-column: 1 / -1; }

  .mega-sub-list { grid-template-columns: 1fr 1fr; }

  .mega-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   مگامنو — لایه‌های سوم به بعد (طرح «کارت + مسیر راهنما»)
   --------------------------------------------------------------------------
   ⚠️ ساختار و ظاهر دو ستونیِ منو عمداً دست‌نخورده مانده.

   همان ریل، همان شبکهٔ کارت، همان سرستون. تنها چیزی که اضافه
   می‌شود دو نشانهٔ کوچک روی کارت (تعداد و پیکان) و یک نوار
   مسیر راهنما بالای سرستون است. هر پله‌ای که پایین برویم،
   دقیقاً همین نما تکرار می‌شود — پس عمق نامحدود، بدون هیچ
   چیدمان تازه‌ای که کاربر باید یاد بگیرد.

   ⚠️ روی موبایل هیچ قاعدهٔ جداگانه‌ای لازم نیست.

   درِیل‌داون موبایل از قبل همین الگو بود؛ سطح سوم فقط یک پلهٔ
   دیگر از همان است.
   ========================================================================== */

/*
  ⚠️ شمارنده و پیکان **بعد** از نام می‌آیند.

  اگر پیش از نام بنشینند، لبهٔ چپ کارت‌ها ناهموار می‌شود و
  چشم دیگر نمی‌تواند فهرست را عمودی بخواند.
*/
.mega-cnt {
  flex: none; margin-inline-start: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  font-size: .66rem; font-weight: 800; font-style: normal;
  line-height: 1;
  background: color-mix(in srgb, var(--pal, var(--green)) 14%, transparent);
  color: var(--pal-text, var(--green-text-soft));
  transition: background .16s ease, color .16s ease;
}
.mega-sub-list a:hover .mega-cnt {
  background: color-mix(in srgb, var(--pal, var(--green)) 26%, transparent);
}

/*
  ⚠️ مرزهای فیزیکی، نه منطقی.

  پیکان هندسه است نه متن: با `border-inline-*` در حالت
  راست‌به‌چپ وارونه می‌شد و به بالا اشاره می‌کرد. جهتش را
  `[dir]` جدا می‌چرخاند.
*/
.mega-sub-list a.has-kids::after {
  content: ""; flex: none;
  width: 7px; height: 7px;
  border: 2px solid currentColor;
  border-top: 0; border-left: 0;
  transform: rotate(135deg);
  opacity: .4;
  transition: opacity .16s ease, translate .16s ease;
}
[dir="ltr"] .mega-sub-list a.has-kids::after { transform: rotate(-45deg); }

.mega-sub-list a.has-kids:hover::after { opacity: .85; translate: -2px 0; }
[dir="ltr"] .mega-sub-list a.has-kids:hover::after { translate: 2px 0; }

/*
  ⚠️ کارتِ در حال بارگذاری باید بی‌جواب به‌نظر نرسد.

  فقط در فروشگاه‌های خیلی بزرگ پیش می‌آید — جایی که شاخه‌ای
  جدا از شبکه گرفته می‌شود.
*/
.mega-sub-list a.is-loading { opacity: .55; pointer-events: none; }
.mega-sub-list a.is-loading::after {
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; width: 12px; height: 12px;
  transform: none; opacity: .8;
  animation: mega-spin .7s linear infinite;
}
@keyframes mega-spin { to { transform: rotate(360deg); } }

/* ---- نوار مسیر راهنما ---- */

/*
  ⚠️ بالای سرستون، نه داخلش.

  سرستون همان چیزی است که در سطح ۲ هم دیده می‌شود؛ چپاندن
  مسیر داخلش یعنی ارتفاعش بین سطوح می‌پرد.
*/
.mega-crumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-bottom: 14px;
  font-size: .78rem; font-weight: 600;
}
.mega-crumb a {
  color: var(--slate); text-decoration: none;
  padding: 3px 2px; border-radius: 6px;
  transition: color .16s ease;
}
.mega-crumb a:hover { color: var(--pal-text, var(--green-text-soft)); }
.mega-crumb b {
  color: var(--ink); font-weight: 800;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* جداکننده در راست‌به‌چپ باید به چپ اشاره کند */
.mega-crumb-sep { opacity: .45; transform: scaleX(var(--dir-x, -1)); }
[dir="ltr"] .mega-crumb-sep { --dir-x: 1; }

/*
  ⚠️ دکمهٔ بازگشتِ گرد، جدا از دکمهٔ نوار بالای موبایل.

  آن یکی از سطح ۲ به ۱ برمی‌گردد و روی دسکتاپ پنهان است؛ این
  یکی در هر عمقی یک پله بالا می‌رود و در هر دو حالت دیده
  می‌شود.
*/
.mega-crumb-back {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: border-color .16s ease, color .16s ease,
              background .16s ease;
}
.mega-crumb-back:hover {
  border-color: var(--pal, var(--green));
  color: var(--pal-text, var(--green-text-soft));
  background: var(--pal-soft, var(--green-100));
}
.mega-crumb-back > span { display: block; transform: scaleX(var(--dir-x, -1)); }
[dir="ltr"] .mega-crumb-back > span { --dir-x: 1; }

/*
  ⚠️ روی موبایل مسیر راهنما کلاً پنهان می‌شود.

  زیر ۹۰۱ پیکسل، نوار بالای پنل (`.mega-bar`) دیده می‌شود و
  همان دو کار را می‌کند: نام جای فعلی را نشان می‌دهد و
  دکمهٔ «بازگشت» دارد. نگه‌داشتن مسیر یعنی نام یک‌بار در
  نوار، یک‌بار در مسیر و یک‌بار در سرستون تکرار شود — سه
  ردیف متنِ یکسان پیش از اولین کارت، روی صفحه‌ای که ارتفاعش
  گران‌ترین چیز است.

  ⚠️ این دو دقیقاً مکمل‌اند: نوار بالا در `min-width: 901px`
  پنهان می‌شود و مسیر راهنما درست از همان‌جا ظاهر می‌شود.
*/
@media (max-width: 900px) {
  .mega-crumb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-cnt,
  .mega-sub-list a.has-kids::after,
  .mega-crumb a,
  .mega-crumb-back { transition: none; }

  .mega-sub-list a.is-loading::after { animation: none; }
}

/*
  ⚠️ حالت «نشد» در ستون زیرمجموعه‌ها.

  کارتی که زیرمجموعه دارد هیچ‌وقت کاربر را به صفحهٔ فیلتر
  پرت نمی‌کند؛ اگر داده نیامد، همین‌جا می‌ماند و راه ادامه
  را نشان می‌دهد.
*/
.mega-retry {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 10px; padding: 7px 14px;
  border: 1px solid transparent; border-radius: var(--r-full);
  font: inherit; font-size: .78rem; font-weight: 800;
  cursor: pointer; text-decoration: none;
  color: #fff; background: var(--pal, var(--green));
  transition: background .16s ease, color .16s ease,
              border-color .16s ease;
}
.mega-retry:hover {
  background: color-mix(in srgb, var(--pal, var(--green)) 82%, #000);
}

/* راه دوم: رفتن به خودِ دسته — کم‌رنگ‌تر، چون گزینهٔ دوم است */
.mega-retry.is-ghost {
  color: var(--pal-text, var(--green-text-soft));
  background: var(--pal-soft, var(--green-100));
  border-color: color-mix(in srgb, var(--pal, var(--green)) 26%, transparent);
}
.mega-retry.is-ghost:hover {
  background: color-mix(in srgb, var(--pal, var(--green)) 22%, transparent);
}

@media (max-width: 620px) {
  .mega-sub-empty { flex-wrap: wrap; }
  .mega-retry { margin-inline-start: 0; margin-block-start: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-retry { transition: none; }
}


/* ==========================================================================
   صفحهٔ کالا — نیمهٔ پایین: توضیحات، مشخصات، نظرات
   --------------------------------------------------------------------------
   ⚠️ پیش‌تر این‌ها سه ستون متن پشت هم بودند.

   توضیحات، جدول مشخصات و نظرات، بدون هیچ مرزی زیر هم می‌آمدند
   و روی متن سئویی هزارکلمه‌ای، جدول مشخصات و نظرها عملاً دیده
   نمی‌شدند. حالا هرکدام یک کارت مستقل با سرتیتر خودش است.
   ========================================================================== */
.pd-panels {
  display: grid; gap: 16px; margin-top: 30px;
  grid-template-columns: minmax(0, 1fr);
}

/*
  ⚠️ یک ستون، در هر عرضی.

  پیش‌تر در دسکتاپ مشخصات کنار توضیحات می‌نشست تا فضا هدر
  نرود؛ اما حالا هر دو کارت جمع می‌شوند و بلندی‌شان کنترل
  شده است، پس چیدن پشت سر هم خواناتر است: چشم یک ستون را
  دنبال می‌کند، نه دو ستون با ارتفاع نابرابر.
*/

/*
  ⚠️ `padding-block` سراسریِ `section` باید خنثی شود.

  در `theme.css` هر `section` تا ۶۴ پیکسل فاصلهٔ بالا و پایین
  می‌گیرد — برای بخش‌های صفحه درست است، اما این‌ها کارت‌اند و
  آن فاصله داخلِ کادر می‌افتاد: سرتیتر ۶۴ پیکسل پایین‌تر از
  لبهٔ کارت و همان‌قدر جای خالی زیر دکمه.
*/
.pd-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  padding-block: 0;
}

.pd-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--green) 5%, transparent), transparent);
}
.pd-card-head h2 { font-size: 1.02rem; font-weight: 800; margin: 0; }

.pd-card-ic {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; font-size: .9rem;
  background: var(--green-100);
}

.pd-card-num {
  margin-inline-start: auto;
  font-size: .7rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
}

.pd-card-body { padding: 18px; }

/* ---------- متن ساده ---------- */
.pd-desc { margin-top: 0; max-width: none; }
.pd-desc h2 { margin-bottom: 0; }

.pd-longtext p {
  color: var(--slate); line-height: 2.15; font-size: .9rem;
  text-align: justify;
}

/*
  ⚠️ متن بلند تا شده، نه بریده.

  توضیحات سئویی این سایت گاهی هزار کلمه است. `max-height` با
  محوشدگی، خواننده را از دیوار متن نجات می‌دهد بدون اینکه
  محتوایی از دسترس موتور جست‌وجو خارج شود (متن در DOM هست).
*/
/*
  ⚠️ جمع‌کننده از تایپوگرافی جداست.

  `pd-fold` فقط ارتفاع را می‌بندد و محوشدگی می‌گذارد، پس
  می‌شود آن را دور هر چیزی پیچید: متن ساده، بلوک‌های
  ویرایشگر، یا جدول مشخصات. اگر قواعد متنیِ `pd-longtext`
  روی همین کلاس بود، روی بلوک‌ها و جدول هم می‌افتاد.
*/
.pd-fold.is-clamped {
  position: relative; max-height: 300px; overflow: hidden;
}
.pd-fold.is-clamped::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 110px;
  background: linear-gradient(180deg, transparent, var(--surface));
  pointer-events: none;
}

.pd-more {
  margin-top: 10px; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 700;
  padding: 9px 16px; border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--green-text);
}
.pd-more:hover { border-color: var(--green); background: var(--green-100); }

/* ---------- مشخصات فنی ---------- */
/*
  ⚠️ `pd-speccard` و نه `pd-specs`.

  `pd-specs` از قبل در همین فایل یک شبکهٔ دوستونی است
  (خط ۳۸۲۷) و کارت تازه را افقی می‌کرد: سرتیتر یک ستون،
  فهرست ستون دیگر.
*/
/*
  ⚠️ `dl` به‌جای `table`.

  جدول دو ستونی در موبایل یا افقی اسکرول می‌خورد یا ستونش به
  دو حرف می‌رسد. با `dl` می‌شود در صفحهٔ باریک، هر مشخصه را
  زیر عنوانش برد.
*/
.spec-list { display: flex; flex-direction: column; gap: 2px; }

/*
  ⚠️ ستون عنوان با `minmax`، نه درصد ثابت.

  ستون مشخصات باریک است؛ ۴۰٪ ثابت یعنی «ظرفیت» در دو خط
  می‌شکند و کنارش «۱۲۸ گیگابایت» هم. حداقلِ ثابت با سقف
  درصدی، هر دو را در یک خط نگه می‌دارد.
*/
.spec-row {
  display: grid; grid-template-columns: minmax(72px, 38%) 1fr; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: .8rem; line-height: 1.8;
}
/* ⚠️ راه‌راه، برای دنبال‌کردن ردیف با چشم */
.spec-row:nth-child(odd) { background: var(--bg-subtle); }

.spec-row dt { color: var(--slate); font-weight: 600; }
.spec-row dd { margin: 0; font-weight: 700; }

@media (max-width: 520px) {
  .spec-row { grid-template-columns: 1fr; gap: 2px; }
  .spec-row dt { font-size: .76rem; }
}

/* ---------- توضیح کوتاه بالای صفحه ---------- */
/*
  ⚠️ فقط دسکتاپ.

  این متن در جای خالیِ بین تصویر و کارت خرید می‌نشیند. در
  صفحهٔ کوچک چنین فضایی نیست و هرچه این‌جا بیاید، قیمت و
  دکمهٔ خرید را از نمای اول بیرون می‌برد.
*/
.pd-brief {
  margin-top: 14px; padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--green);
  background: var(--bg-subtle);
  color: var(--ink); font-size: .88rem; line-height: 2;
}
@media (max-width: 900px) { .pd-brief { display: none; } }

/* ==========================================================================
   نظرات — خلاصهٔ امتیاز
   ========================================================================== */
/*
  ⚠️ چرا خلاصه بالای فهرست آمد.

  عدد ۴.۲ به‌تنهایی چیزی نمی‌گوید: چهل نظر پنج‌ستاره و ده
  نظر یک‌ستاره، همان میانگین پنجاه نظر چهارستاره را می‌دهد.
  نوار توزیع، این دو را از هم جدا می‌کند.
*/
.rv-summary {
  display: grid; gap: 18px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: 16px; margin-bottom: 18px;
  border-radius: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
}
@media (min-width: 700px) {
  .rv-summary { grid-template-columns: 170px minmax(0, 1fr); }
}

.rv-score { text-align: center; }
.rv-score b { display: block; font-size: 2.5rem; font-weight: 900; line-height: 1.1; }
.rv-score small { display: block; font-size: .72rem; color: var(--slate); margin-top: 4px; }

.rv-stars { font-size: 1rem; letter-spacing: 2px; color: var(--line); }
.rv-stars .on { color: #f59e0b; }

.rv-bars { display: flex; flex-direction: column; gap: 6px; }
.rv-bar { display: flex; align-items: center; gap: 9px; font-size: .74rem; }
.rv-bar-n { flex: none; width: 40px; color: var(--slate); font-weight: 700; }
.rv-bar-c { flex: none; width: 34px; text-align: end; color: var(--slate); }

.rv-bar-track {
  flex: 1; height: 7px; border-radius: var(--r-full);
  background: var(--line); overflow: hidden;
}
.rv-bar-fill {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

/* ---------- انتخاب ستاره در فرم ---------- */
/*
  ⚠️ رادیوی واقعی زیرش هست.

  ستاره‌ها فقط ظاهرند؛ بدون جاوااسکریپت هم فرم کار می‌کند و
  صفحه‌خوان یک `radiogroup` درست می‌بیند.

  ⚠️ `row-reverse` چون گزینه‌ها از ۵ به ۱ چیده شده‌اند.

  ترتیب DOM برای انتخابگر `~` لازم است (پرکردن ستاره‌های
  کوچک‌تر)، ولی چشم باید ۱ تا ۵ ببیند.
*/
.rv-pick {
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
  gap: 2px; margin-bottom: 2px;
}
.rv-pick-s { position: relative; cursor: pointer; }
.rv-pick-s input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.rv-pick-s span {
  display: block; font-size: 1.5rem; line-height: 1;
  color: var(--line); transition: color .12s ease, transform .12s ease;
}
.rv-pick-s em { display: none; }

.rv-pick-s:hover span,
.rv-pick-s:hover ~ .rv-pick-s span { color: #fbbf24; }

.rv-pick-s input:checked ~ span { color: #f59e0b; }
/* ⚠️ ستاره‌های کوچک‌تر از انتخاب‌شده هم پر می‌شوند */
.rv-pick-s:has(input:checked) ~ .rv-pick-s span { color: #f59e0b; }

.rv-pick-s input:focus-visible ~ span {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px;
}

/* ---------- کارت نظر ---------- */
.rv-ava {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%; font-weight: 800; font-size: .85rem;
  background: var(--green-100); color: var(--green-text-soft);
}
.rv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-who .rv-date { margin-inline-start: 0; }

.rv-login { align-items: center; text-align: center; }
.rv-login-ic { font-size: 1.5rem; }

/* ==========================================================================
   توضیحات بلوکیِ کالا — `partials/_desc_blocks.html`
   ========================================================================== */
.dsc { display: flex; flex-direction: column; gap: 18px; }

.dsc-h { font-weight: 800; line-height: 1.6; margin: 0; }
.dsc-p { color: var(--slate); line-height: 2.1; margin: 0; }

/* اندازه‌ها — همان چهار مقداری که `clean()` می‌پذیرد */
.dsc-s-sm { font-size: .8rem; }
.dsc-s-md { font-size: .92rem; }
.dsc-s-lg { font-size: 1.1rem; }
.dsc-s-xl { font-size: 1.35rem; }
.dsc-h.dsc-s-sm { font-size: .95rem; }
.dsc-h.dsc-s-md { font-size: 1.12rem; }
.dsc-h.dsc-s-lg { font-size: 1.35rem; }
.dsc-h.dsc-s-xl { font-size: 1.6rem; }

.dsc-a-start { text-align: start; }
.dsc-a-center { text-align: center; }
.dsc-a-end { text-align: end; }
/* ⚠️ همتراز دو طرف — برای متن فارسیِ بلند در ستون پهن. */
.dsc-a-justify { text-align: justify; text-justify: inter-word; }

/*
  ⚠️ قالب‌بندیِ درون‌متنی — کلاس، نه استایل درون‌خطی.

  فروشنده روی بخشی از متن پررنگ/کج/زیرخط/رنگ می‌گذارد.
  اگر مقدارِ رنگ مستقیم در `style` می‌نشست، هر رشته‌ای که
  می‌نوشت به صفت می‌رسید. کلیدهای مجاز در
  `apps/catalog/desc_blocks.py::COLORS` است و هر کدام یک
  کلاسِ زیر.
*/
.rt-b { font-weight: 800; }
.rt-i { font-style: italic; }
.rt-u { text-decoration: underline; text-underline-offset: 3px; }

.rt-c-green { color: var(--green-text); }
.rt-c-red { color: var(--danger-text); }
.rt-c-amber { color: var(--warn-text); }
.rt-c-blue { color: var(--info-text); }
.rt-c-slate { color: var(--slate); }
.rt-c-ink { color: var(--ink); }

.dsc-ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; }
.dsc-ul li {
  position: relative; padding-inline-start: 22px;
  font-size: .88rem; line-height: 1.95; color: var(--slate);
}
.dsc-ul li::before {
  content: "✓"; position: absolute; inset-inline-start: 0;
  color: var(--green-text); font-weight: 800; font-size: .8rem;
}

/*
  ⚠️ اندازهٔ فهرست روی `li` می‌نشیند، نه روی `ul`.

  خودِ `li` بالاتر `font-size` دارد؛ کلاسِ عمومیِ
  `.dsc-s-*` روی والد را بی‌اثر می‌کند. این چهار قاعده
  همان مقدارها را روی فرزند تکرار می‌کنند. `md` عمداً
  برابرِ مقدارِ امروز است تا محتوای موجود تکان نخورد.
*/
.dsc-ul.dsc-s-sm li { font-size: .78rem; }
.dsc-ul.dsc-s-md li { font-size: .88rem; }
.dsc-ul.dsc-s-lg li { font-size: 1.02rem; }
.dsc-ul.dsc-s-xl li { font-size: 1.2rem; }

/* ⚠️ نشانهٔ ✓ در حالت وسط‌چین/راست‌چین سرگردان می‌شود. */
.dsc-ul.dsc-a-center li,
.dsc-ul.dsc-a-end li { padding-inline-start: 0; }
.dsc-ul.dsc-a-center li::before,
.dsc-ul.dsc-a-end li::before {
  position: static; margin-inline-end: 6px;
}

.dsc-quote {
  margin: 0; padding: 14px 18px;
  border-radius: 14px;
  border-inline-start: 3px solid var(--green);
  background: var(--bg-subtle);
  font-size: .92rem; line-height: 2; font-weight: 600;
}

/*
  ⚠️ ویژگیِ بالاتر لازم است.

  `.dsc-quote` و `.dsc-s-lg` هر دو (۰,۱,۰) هستند و
  `.dsc-quote` پایین‌تر آمده، پس برنده می‌شد و اندازه
  هیچ اثری نداشت.
*/
.dsc-quote.dsc-s-sm { font-size: .8rem; }
.dsc-quote.dsc-s-md { font-size: .92rem; }
.dsc-quote.dsc-s-lg { font-size: 1.1rem; }
.dsc-quote.dsc-s-xl { font-size: 1.35rem; }

.dsc-fig { margin: 0; }
.dsc-fig img { display: block; width: 100%; border-radius: 14px; }
.dsc-fig figcaption {
  margin-top: 8px; text-align: center;
  font-size: .76rem; color: var(--slate);
}

/*
  ⚠️ چینشِ تصویرِ باریک — با `margin`، نه `text-align`.

  تصویر `display:block` است؛ `text-align` روی بلوک اثری
  ندارد. وقتی عرض کمتر از ۱۰۰٪ شد، این حاشیه‌ها تعیین
  می‌کنند به کدام لبه بچسبد.
*/
.dsc-fig.dsc-a-center img,
.dsc-stack-img.dsc-a-center img { margin-inline: auto; }
.dsc-fig.dsc-a-end img,
.dsc-stack-img.dsc-a-end img { margin-inline-start: auto; }
.dsc-fig.dsc-a-justify img,
.dsc-stack-img.dsc-a-justify img { margin-inline: auto; }

.dsc-fig.dsc-a-start figcaption { text-align: start; }
.dsc-fig.dsc-a-end figcaption { text-align: end; }

/* ---------- تصویر و متن کنار هم ---------- */
.dsc-split { display: grid; gap: 16px; align-items: center; }

/*
  ⚠️ عرضِ تصویر با متغیر، نه با چهار قاعدهٔ تکراری.

  دلیلش `dsc-side-end` است: وقتی تصویر `order: 2` می‌گیرد،
  ستونِ **اول** مالِ متن می‌شود. اگر عرض را مستقیم روی
  ستون اول می‌نوشتیم، با جابه‌جایی سمت، اندازه به متن
  می‌رسید نه تصویر. متغیر اجازه می‌دهد همان مقدار در
  ستون درست بنشیند.
*/
@media (min-width: 720px) {
  .dsc-split {
    grid-template-columns: var(--dsc-img, minmax(0, 1fr)) minmax(0, 1fr);
  }
  /* ⚠️ «سمت» یعنی سمتِ تصویر */
  .dsc-split.dsc-side-end {
    grid-template-columns: minmax(0, 1fr) var(--dsc-img, minmax(0, 1fr));
  }
  .dsc-split.dsc-side-end .dsc-split-img { order: 2; }
}

/* ⚠️ `md` یعنی نصف‌ونصف — همان چیزی که تا امروز بوده. */
.dsc-split.dsc-w-xs { --dsc-img: 25%; }
.dsc-split.dsc-w-sm { --dsc-img: 35%; }
.dsc-split.dsc-w-md { --dsc-img: minmax(0, 1fr); }
.dsc-split.dsc-w-lg { --dsc-img: 65%; }
.dsc-split.dsc-w-full { --dsc-img: 78%; }

.dsc-split.is-solo { grid-template-columns: minmax(0, 1fr); }

.dsc-split-img img,
.dsc-stack-img img { display: block; width: 100%; border-radius: 14px; }

/*
  ⚠️ در `stack` و تصویرِ تنها، عرض روی خودِ تصویر است.

  آن‌جا ستونی در کار نیست؛ تصویر تمام‌عرض والد است و
  کوچک‌کردنش یعنی درصدِ کمتر. `full` پیش‌فرض است تا
  محتوای موجود دست‌نخورده بماند.
*/
.dsc-stack-img.dsc-w-xs img, .dsc-fig.dsc-w-xs img { width: 25%; }
.dsc-stack-img.dsc-w-sm img, .dsc-fig.dsc-w-sm img { width: 40%; }
.dsc-stack-img.dsc-w-md img, .dsc-fig.dsc-w-md img { width: 55%; }
.dsc-stack-img.dsc-w-lg img, .dsc-fig.dsc-w-lg img { width: 75%; }
.dsc-stack-img.dsc-w-full img, .dsc-fig.dsc-w-full img { width: 100%; }

.dsc-split-txt h4,
.dsc-stack-txt h4 { font-size: 1.02rem; font-weight: 800; margin: 0 0 7px; }
.dsc-split-txt p,
.dsc-stack-txt p { font-size: .88rem; line-height: 2.05; color: var(--slate); margin: 0; }

/*
  ⚠️ اندازه روی `h4` و `p` تکرار می‌شود، نه روی والد.

  هر دو `font-size` مستقیم دارند، پس مقدارِ والد را
  نمی‌بینند. `md` برابرِ مقدارِ امروز است.
*/
.dsc-split-txt.dsc-s-sm h4, .dsc-stack-txt.dsc-s-sm h4 { font-size: .9rem; }
.dsc-split-txt.dsc-s-md h4, .dsc-stack-txt.dsc-s-md h4 { font-size: 1.02rem; }
.dsc-split-txt.dsc-s-lg h4, .dsc-stack-txt.dsc-s-lg h4 { font-size: 1.18rem; }
.dsc-split-txt.dsc-s-xl h4, .dsc-stack-txt.dsc-s-xl h4 { font-size: 1.4rem; }

.dsc-split-txt.dsc-s-sm p, .dsc-stack-txt.dsc-s-sm p { font-size: .78rem; }
.dsc-split-txt.dsc-s-md p, .dsc-stack-txt.dsc-s-md p { font-size: .88rem; }
.dsc-split-txt.dsc-s-lg p, .dsc-stack-txt.dsc-s-lg p { font-size: 1.02rem; }
.dsc-split-txt.dsc-s-xl p, .dsc-stack-txt.dsc-s-xl p { font-size: 1.2rem; }

.dsc-stack { display: flex; flex-direction: column; gap: 12px; }

.dsc-gap { border: 0; border-top: 1px dashed var(--line); margin: 4px 0; }

.cart-variant {
  display: inline-flex; align-items: center;
  margin-inline-start: 7px; padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: .7rem; font-weight: 700;
  background: var(--green-100); color: var(--green-text);
}


/* ==========================================================================
   انتخاب ترکیب مشخصات ویژه — صفحهٔ کالا
   --------------------------------------------------------------------------
   ⚠️ اولین تصمیمِ مشتری، پس یک کارتِ مستقل — ولی سبک.

   قیمت، موجودی و حتی حداقل سفارش به همین انتخاب بسته‌اند.

   ⚠️ هر مشخصه **کارتِ خودش** را دارد.

   با سه مشخصه و چند مقدار، یک قابِ یکپارچه به دیوار دکمه
   تبدیل می‌شود و معلوم نیست کدام دکمه به کدام پرسش جواب
   می‌دهد. کارت‌های جدا این مرز را بدون خطِ جداکننده
   می‌سازند.

   ⚠️ رنگ هر ردیف از `--vp-tint` می‌آید.

   تأمین‌کننده هنگام تعریف مشخصه رنگ انتخاب می‌کند و قالب
   آن را روی همین متغیر می‌نشاند. سبزِ سایت پیش‌فرض است، پس
   کالاهای قدیمی — که رنگ ندارند — دقیقاً مثل قبل‌اند.
   ========================================================================== */
.vp {
  /*
    ⚠️ `padding-block: 0` اجباری است — این‌جا `<section>` است.

    `theme.css` قاعدهٔ سراسری `section { padding-block:
    clamp(34px, 5vw, 64px) }` دارد که برای بخش‌های صفحهٔ اصلی
    نوشته شده. کارتِ انتخاب مشخصات هم `<section>` است، پس
    بی‌صدا ۶۴ پیکسل فضای خالی بالای سربرگ و زیر آخرین ردیف
    می‌گرفت.
  */
  padding-block: 0;
  margin: 8px 0 22px;

  /*
    ⚠️ سبزِ دکمه، نه سبزِ برند.

    روی قرصِ انتخاب‌شده متن سفید می‌نشیند و `--green`
    (#00A859) با سفید کنتراست ۳ می‌دهد. `--green-btn` همان
    سبزی است که پروژه برای همین کار تیره کرده. مقدارش
    این‌جا ثابت است چون کنتراست به تم بستگی ندارد و نسخهٔ
    تیرهٔ `--green-btn` دوباره روشن می‌شود.
  */
  --vp-tint: #047A46;

  border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--green) 5%, var(--surface)),
    var(--bg-subtle));
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent),
              0 18px 40px -28px color-mix(in srgb, var(--ink) 40%, transparent);
}

/* ---------- سربرگ ---------- */
.vp-top {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 18px 13px;
}

.vp-top-ic {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  color: var(--green-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent);
}
/* ⚠️ آیکن برداری، رنگش از `currentColor` — نه ایموجی. */
.vp-top-ic svg { width: 19px; height: 19px; display: block; }

.vp-top-t {
  margin: 0;
  font-size: .96rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink);
}

/* ---------- بدنه ---------- */
.vp-list {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 12px 14px;
}

/*
  ⚠️ شبکهٔ دو ستونی، نه یک ردیفِ `flex`.

  کارتِ کالا در ستون میانی صفحه است و اندازه‌گیری نشان داد
  عرضش بین ۳۵۵ تا ۵۴۱ پیکسل می‌ماند — حتی روی نمایشگر
  ۱۶۰۰. با `flex` تک‌خطی، نام و آیکون جای گزینه‌ها را
  می‌خوردند و قرص‌ها دو طبقه می‌شدند.

  حالا نام بالا، گزینه‌ها زیر آن با تمام عرض، و آیکون در
  ستون دوم که هر دو سطر را می‌گیرد و وسط می‌ایستد. بدون
  آیکون، ستون دوم خودش صفر می‌شود.
*/
.vp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px 12px;
  padding: 12px 16px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 3%, transparent),
              0 10px 22px -20px color-mix(in srgb, var(--ink) 35%, transparent);
}

/* ---------- نام مشخصه ---------- */
.vp-head {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}

/*
  ⚠️ نقطهٔ کنار نام، رنگِ همان مشخصه را می‌گیرد.

  با سه ردیف پشت هم، این تنها نشانه‌ای است که چشم را بدون
  خواندن به ردیفِ درست می‌برد.
*/
.vp-name {
  display: flex; align-items: center; gap: 7px;
  font-size: .85rem; font-weight: 700; color: var(--ink);
}
.vp-name::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vp-tint);
}

/* ---------- گزینه‌ها ---------- */
.vp-opts {
  grid-column: 1; grid-row: 2; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}

/*
  ⚠️ هدف لمس ۴۴ پیکسل.

  این دکمه‌ها روی موبایل با انگشت زده می‌شوند و اشتباهِ
  انتخاب یعنی مشتری ترکیب دیگری بخرد.
*/
.vp-opt {
  position: relative; cursor: pointer;
  min-height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: .87rem; font-weight: 700;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.vp-opt:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--vp-tint) 55%, var(--line));
  color: color-mix(in srgb, var(--vp-tint) 70%, var(--ink));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--vp-tint) 50%, transparent);
}
.vp-opt:active:not(:disabled) { transform: translateY(0); }

.vp-opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-tint) 28%, transparent);
}

/*
  ⚠️ انتخاب‌شده با نشانِ ✓، نه فقط با رنگ.

  رنگ‌تنها برای کسی که رنگ را تشخیص نمی‌دهد هیچ نمی‌گوید.

  ⚠️ نشان **درون** دکمه است، نه چسبیده به گوشهٔ بیرونی‌اش.

  نسخهٔ قبل یک دایرهٔ ۲۱ پیکسلی بیرون از قاب می‌گذاشت که
  با دکمهٔ بغلی تداخل می‌کرد و ردیف را شلوغ نشان می‌داد.
*/
.vp-opt.is-on {
  border-color: transparent;
  color: #fff; font-weight: 800;
  /*
    ⚠️ هر دو سرِ گرادیان از خودِ رنگ **تیره‌تر**اند.

    رنگ ذخیره‌شده تضمین می‌کند متن سفید رویش دست‌کم ۴٫۵
    کنتراست دارد (`apps/catalog/icons.py`). اگر سرِ روشنِ
    گرادیان از آن روشن‌تر می‌شد، همان تضمین می‌شکست.
  */
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--vp-tint) 96%, #000),
    color-mix(in srgb, var(--vp-tint) 74%, #000));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-tint) 20%, transparent),
              0 10px 20px -10px color-mix(in srgb, var(--vp-tint) 65%, transparent);
}
.vp-opt.is-on::before {
  content: ""; flex: none; order: -1;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--vsel-ic-tick) center / contain no-repeat;
  mask: var(--vsel-ic-tick) center / contain no-repeat;
}

/*
  ⚠️ ناموجود فقط در ستون اول دیده می‌شود.

  ستون‌های پایین‌تر وابسته‌اند و مقدارِ ناسازگارشان اصلاً
  رندر نمی‌شود (دلیل در `static/js/variant-picker.js`).
  آن‌چه این‌جا می‌ماند، مقداری است که هست ولی تمام شده.
*/
.vp-opt:disabled {
  cursor: not-allowed;
  padding: 0 15px; gap: 6px;
  border-color: transparent;
  background: var(--bg-subtle);
  /*
    ⚠️ `--slate-light` این‌جا کافی نیست.

    روی `--bg-subtle` کنتراستش ۳٫۱ می‌شود. قرصِ غیرفعال از
    نظر WCAG معاف است، ولی مشتری باید بتواند بخواند کدام
    گزینه تمام شده — و `check_contrast` هم درست ایراد گرفت.
  */
  color: var(--slate);
  font-weight: 600; box-shadow: none;
}
.vp-opt:disabled .vp-opt-t { text-decoration: line-through; }

/* ⚠️ نشانِ «ممنوع» پیش از متن، تا بدون خواندن هم پیدا باشد. */
.vp-opt:disabled::before {
  content: ""; flex: none; order: -1;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--vp-ic-ban) center / contain no-repeat;
  mask: var(--vp-ic-ban) center / contain no-repeat;
}

.vp-opt-t { line-height: 1.4; }

/*
  ⚠️ «ناموجود» هم‌خط است، نه زیرِ برچسب.

  دو خط، قرصِ ناموجود را بلندتر از بقیه می‌کرد و ردیف
  ناهموار می‌شد.
*/
.vp-opt-x {
  flex: none;
  font-size: .68rem; font-weight: 600;
  opacity: .8;
}

/* ---------- آیکون مشخصه ---------- */
/*
  ⚠️ فقط یک طرف، انتهای ردیف.

  آیکون در هر دو سرِ ردیف، همان اطلاعات را دو بار می‌داد و
  ردیف را قرینه و بی‌جهت می‌کرد. یک قرصِ بزرگ در انتها،
  فضای خالی‌ای را پر می‌کند که با دو گزینه باقی می‌ماند.
*/
.vp-orb {
  grid-column: 2; grid-row: 1 / span 2;
  position: relative; align-self: center;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  color: var(--vp-tint);
}

.vp-orb-in {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    color-mix(in srgb, var(--vp-tint) 26%, var(--surface)),
    color-mix(in srgb, var(--vp-tint) 9%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp-tint) 16%, transparent),
              0 8px 18px -12px color-mix(in srgb, var(--vp-tint) 80%, transparent);
}
.vp-orb-in svg { width: 21px; height: 21px; display: block; }
.vp-orb-t { font-size: 1.05rem; line-height: 1; font-weight: 400; }

/* ⚠️ کمان و نقطه تزئینی‌اند و کلیک نمی‌گیرند. */
.vp-orb-arc, .vp-orb-dot { position: absolute; pointer-events: none; }

.vp-orb-arc {
  inset: 0; border-radius: 50%;
  border: 1.5px solid transparent;
  border-block-start-color: color-mix(in srgb, var(--vp-tint) 42%, transparent);
  border-inline-start-color: color-mix(in srgb, var(--vp-tint) 42%, transparent);
  transform: rotate(38deg);
}
.vp-orb-dot {
  inset-block-start: 6px; inset-inline-start: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vp-tint);
}

/* ---------- هشدار ---------- */
.vp-warn {
  margin: 0; padding: 11px 20px;
  font-size: .79rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
  border-top: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}

.vp-fallback { display: flex; flex-direction: column; gap: 7px; }
.vp-fallback select {
  padding: 10px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface); color: inherit; font: inherit;
}

@media (max-width: 600px) {
  .vp { border-radius: 22px; }
  .vp-top { padding-inline: 14px; }
  .vp-list { padding-inline: 9px; }
  .vp-row { padding: 11px 13px; border-radius: 18px; }
  .vp-opt { padding: 0 15px; font-size: .84rem; }
  /* ⚠️ روی موبایل آیکون فضایی ندارد که پر کند. */
  .vp-orb { width: 42px; height: 42px; }
  .vp-orb-in { width: 36px; height: 36px; }
  .vp-orb-in svg { width: 18px; height: 18px; }
}

/* ⚠️ حرکت را برای کسی که نمی‌خواهد، برنمی‌داریم. */
@media (prefers-reduced-motion: reduce) {
  .vp-opt { transition: none; }
  .vp-opt:hover:not(:disabled) { transform: none; }
}


/* ⚠️ نبودِ انتخاب زمان تحویل — کارت باید خودش را نشان دهد.
   جزئیات در `static/js/checkout-calendar.js`. */
.dt-error {
  margin: 0 0 12px; padding: 10px 13px;
  border-radius: var(--r-sm);
  background: var(--danger-bg, var(--warn-bg));
  color: var(--danger-text, var(--warn-text));
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-size: .82rem; font-weight: 700; line-height: 1.9;
}
.dt-card.is-missing {
  border-color: var(--danger, var(--warn));
  box-shadow: 0 0 0 3px color-mix(in srgb,
    var(--danger, var(--warn)) 16%, transparent);
}

/* ==========================================================================
   نشانگر نقشه — پین برداری
   --------------------------------------------------------------------------
   ⚠️ `divIcon` به‌طور پیش‌فرض پس‌زمینه و قاب سفید می‌گیرد.

   `leaflet.css` برای `.leaflet-div-icon` یک کادر سفید با
   حاشیهٔ آبی تعریف کرده؛ بدون برداشتنش، پین داخل یک مربع
   می‌نشیند.
   ========================================================================== */
.vh-pin,
.leaflet-div-icon.vh-pin {
  background: none; border: 0;
  color: var(--green-btn);
  /* سایهٔ نرم تا روی نقشهٔ روشن هم لبه داشته باشد */
  filter: drop-shadow(0 2px 3px rgba(16, 22, 20, .35));
}
.vh-pin svg { display: block; }

/* ⚠️ نشانگرِ قابل‌کشیدن باید دستش را نشان دهد. */
.leaflet-marker-draggable.vh-pin { cursor: grab; }
.leaflet-dragging .leaflet-marker-draggable.vh-pin { cursor: grabbing; }

/* ==========================================================================
   ردیف خرید — مقصدِ نوار چسبان موبایل
   --------------------------------------------------------------------------
   ⚠️ هدر صفحه چسبان است.

   پرشِ خام به `#pdBuy` ردیف خرید را دقیقاً زیر هدر می‌برد و
   کاربر چیزی نمی‌بیند. این فاصله، مقصد را پایین‌تر از هدر
   نگه می‌دارد — حتی وقتی مرورگر خودش پرش می‌کند و
   جاوااسکریپتی در کار نیست.
   ========================================================================== */
#pdBuy { scroll-margin-top: 96px; }

/* ⚠️ یک تپشِ کوتاه تا کاربر بفهمد کجا آمده. */
#pdBuy.is-flash {
  animation: pdFlash 1.1s var(--ease-out);
  border-radius: var(--r-lg);
}
@keyframes pdFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25%, 60% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 30%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  #pdBuy.is-flash { animation: none; }
}

/* ==========================================================================
   فرم مشتریِ ویزیتور — `templates/visitors/customer_form.html`
   --------------------------------------------------------------------------
   ⚠️ فرم بیست‌وچند فیلد دارد.

   در یک ستونِ پیوسته، ویزیتور برای رسیدن به «مدارک» باید از
   کنار ده فیلد اختیاری رد شود. بخش‌ها `<details>` هستند: دو
   بخشِ لازم باز، بقیه بسته — و هر بخشی که داده دارد خودکار
   باز می‌شود تا کاربر فکر نکند اطلاعاتش پاک شده.
   ========================================================================== */
.cf-form { display: flex; flex-direction: column; gap: 12px; }

.cf-sec {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); overflow: hidden;
}

.cf-sum {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; cursor: pointer;
  font-size: .9rem; list-style: none;
}
/* ⚠️ مثلثِ پیش‌فرض در سافاری با `list-style` نمی‌رود. */
.cf-sum::-webkit-details-marker { display: none; }

.cf-sum b { font-weight: 800; color: var(--ink); }
.cf-sum small { color: var(--slate); font-size: .74rem; }

/* نشانگرِ باز/بسته — به‌جای مثلثِ مرورگر */
.cf-sum::after {
  content: "▾"; margin-inline-start: auto;
  color: var(--slate); font-size: .8rem;
  transition: transform .15s;
}
.cf-sec[open] > .cf-sum::after { transform: rotate(180deg); }
.cf-sec[open] > .cf-sum { border-bottom: 1px dashed var(--line); }

.cf-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--bg-subtle); font-size: .95rem;
}

.cf-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; padding: 16px;
}
.cf-wide { grid-column: 1 / -1; }

.cf-grid .field { display: flex; flex-direction: column; gap: 6px; }
.cf-grid .field > span {
  font-size: .82rem; font-weight: 600; color: var(--ink);
}
.cf-grid .field input,
.cf-grid .field textarea {
  padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: 11px; background: var(--surface);
  font: inherit; transition: border-color .15s;
}
.cf-grid .field input:focus,
.cf-grid .field textarea:focus {
  outline: none; border-color: var(--green);
}

.cf-hint { color: var(--slate); font-size: .74rem; }

/*
  ورودیِ نام کاربری با `@` چسبیده.

  ⚠️ `@` بخشی از فیلد نیست.

  اگر داخل مقدار می‌رفت، نصف کاربرها `@name` می‌نوشتند و
  نصف دیگر `name` — و خروجی اکسل دو شکل متفاوت می‌شد.
*/
.cf-at {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--line); border-radius: 11px;
  overflow: hidden; transition: border-color .15s;
}
.cf-at:focus-within { border-color: var(--green); }
.cf-at > i {
  display: flex; align-items: center; padding: 0 11px;
  background: var(--bg-subtle); color: var(--slate);
  font-style: normal; font-size: .85rem;
}
.cf-grid .cf-at input {
  flex: 1 1 auto; min-width: 0;
  border: 0; border-radius: 0; background: transparent;
}
.cf-grid .cf-at input:focus { border: 0; }

.cf-tail { border: 0; padding: 0; }

/*
  نوار عملِ چسبیده به پایین.

  ⚠️ فرم بلند است؛ بدون این، ذخیره‌کردن یعنی اسکرول تا ته —
  و روی موبایل یعنی رهاکردنِ فرم.
*/
.cf-bar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .06);
}

.cf-warn {
  margin: 0 0 12px; padding: 11px 14px; border-radius: 12px;
  background: var(--warn-bg); color: var(--warn-text);
  font-size: .82rem; font-weight: 600; line-height: 1.9;
}
.cf-warn-bad { background: var(--danger-bg); color: var(--danger-text); }

@media (max-width: 640px) {
  .cf-grid { grid-template-columns: 1fr; gap: 12px; padding: 13px; }
  .cf-sum { padding: 11px 13px; }
  .cf-bar { padding: 10px 12px; }
}

/* دکمه‌های کنارِ عنوان در فهرست مشتریان */
.cf-head-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* هشدارِ مشتریِ تکراری — با نشانی به پروندهٔ موجود */
.cf-twin {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 8px 0; padding: 9px 12px; border-radius: 10px;
  background: var(--surface); font-weight: 700;
}
.cf-twin small { font-weight: 600; color: var(--slate); }

/* ==========================================================================
   مودال مشترک — «وی‌اچ مودال»
   --------------------------------------------------------------------------
   یک قطعهٔ واحد برای هر پنجره‌ای که وسط صفحه باز می‌شود:
   شرایط ضمانت بازگشت، و در موبایل توضیحات و مشخصات فنی.

   ⚠️ چرا یکی و نه چند تا:

   پیش‌تر هر بخش پنجرهٔ خودش را داشت (`rcp` برای سفارش مستمر،
   `vis-` برای ویزیتور). هر کدام باز و بستهٔ خودش را داشت و
   رفتارشان با Escape و اسکرول پس‌زمینه یکی نبود.

   ⚠️ ارتفاع با `dvh` بسته می‌شود نه `vh`.

   در موبایل نوار آدرس مرورگر جمع و باز می‌شود؛ با `vh` کف
   مودال زیر نوار آدرس گیر می‌کرد و دکمهٔ بستن دیده نمی‌شد.
   ========================================================================== */
.vhm[hidden] { display: none; }

.vhm {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

.vhm-back {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
  animation: vhm-fade .18s ease;
}

.vhm-box {
  position: relative;
  width: min(560px, 100%);
  max-height: min(82dvh, 720px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  overflow: hidden;
  animation: vhm-rise .2s ease;
}

.vhm-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.vhm-head b { font-size: 1rem; display: flex; align-items: center; gap: 8px; }

.vhm-x {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--slate);
  font-size: 1rem; cursor: pointer; line-height: 1;
}
.vhm-x:hover { border-color: var(--green); color: var(--green-text); }

.vhm-body {
  padding: 18px; overflow-y: auto; overscroll-behavior: contain;
  line-height: 2; color: var(--ink);
}

/* ⚠️ اسکرول صفحهٔ پشت مودال باید قفل شود، وگرنه کاربر
   به‌جای متن مودال، صفحه را می‌لغزاند. */
body.vhm-open { overflow: hidden; }

@keyframes vhm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vhm-rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .vhm { padding: 0; align-items: flex-end; }
  .vhm-box {
    width: 100%; max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    animation: vhm-sheet .22s ease;
  }
}
@keyframes vhm-sheet {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vhm-back, .vhm-box { animation: none; }
}

/* ==========================================================================
   ضمانت بازگشت — پیوند و محتوای مودال
   ========================================================================== */
.pd-return-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 0;
  font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--green-text); background: none; border: none;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.pd-return-link:hover { text-decoration-thickness: 2px; }
/* ==========================================================================
   محصولات مرتبط — فاصله تا بخش بعدی
   --------------------------------------------------------------------------
   ⚠️ بدون این، کارت‌های مرتبط به کارتِ «نظرات کاربران»
   می‌چسبند و مرزِ دو بخش گم می‌شود.
   ========================================================================== */
.pd-related { margin-bottom: 32px; }

@media (max-width: 760px) {
  .pd-related { margin-bottom: 22px; }
}

.rg-lead { margin: 0 0 14px; font-size: .94rem; }
.rg-lead b { color: var(--green-text); }

.rg-note {
  margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--green-100);
}
.rg-note b { display: block; font-size: .82rem; margin-bottom: 4px; }
.rg-note p { margin: 0; font-size: .86rem; color: var(--slate); }

.rg-sub { display: block; font-size: .88rem; margin-bottom: 8px; }

.rg-steps {
  margin: 0 0 16px; padding-inline-start: 20px;
  font-size: .87rem; color: var(--slate);
}
.rg-steps li { margin-bottom: 6px; }

.rg-fine {
  margin: 0; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: .8rem; color: var(--slate);
}

.rg-go { display: inline-block; margin-top: 14px; }

/* ==========================================================================
   توضیحات / مشخصات فنی داخل مودال (موبایل)
   --------------------------------------------------------------------------
   ⚠️ جمع‌کننده داخل مودال نباید جمع کند.

   `pd-fold.is-clamped` با اسکریپت برداشته می‌شود، ولی این
   قاعده کمربند دوم است: اگر گره با کلاس وارد شد، باز
   بماند — وگرنه کاربر مودال را باز می‌کند و باز هم متن
   بریده می‌بیند.
   ========================================================================== */
.vhm-body .pd-fold.is-clamped { max-height: none; overflow: visible; }
.vhm-body .pd-fold.is-clamped::after { content: none; }

/* متن داخل مودال فضای خودش را دارد؛ حاشیهٔ کارت لازم نیست */
.vhm-body .pd-fold { margin: 0; }
.vhm-body .spec-list { margin: 0; }

/* ==========================================================================
   پنل صفحهٔ ورود — نشان و آیکن تصویری
   --------------------------------------------------------------------------
   ⚠️ `contain` نه `cover`.

   نشان برند و آیکن نکته‌ها لوگو هستند، نه عکس فضا. بریدنشان
   یعنی حرفی از لوگو گم می‌شود.
   ========================================================================== */
.auth-logo-mark.has-img,
.ap-ico.has-img { padding: 6px; overflow: hidden; }

.auth-logo-mark.has-img img,
.ap-ico.has-img img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}

/* ==========================================================================
   پنل صفحهٔ ورود — لایهٔ پس‌زمینه و تصویر داخل باکس
   --------------------------------------------------------------------------
   ⚠️ چرا لایهٔ جدا و نه `background` روی خودِ `.auth-side`:

   گزینهٔ «محوکردن» با `filter: blur()` کار می‌کند و روی هر
   عنصری که بگذاری، **فرزندانش را هم محو می‌کند**. اگر روی
   `.auth-side` می‌نشست، عنوان و نکته‌ها هم تار می‌شدند.

   این لایه خواهرِ `.auth-side-in` است، نه والدش — پس متن
   همیشه واضح می‌ماند.

   `z-index: 0` در برابر `z-index: 2`ِ محتوا: پس‌زمینه زیر
   می‌ماند بی‌آنکه `.auth-blob`ها را که تزئینی‌اند بپوشاند.
   ========================================================================== */
.auth-bg {
  position: absolute; inset: 0; z-index: 0;
  display: block; pointer-events: none;
}

/* تصویر تزئینی داخل باکس — زیر نکته‌ها */
.auth-extra {
  display: block; width: 100%; max-width: 280px;
  margin: 22px auto 0;
  border-radius: 16px;
  object-fit: contain;
}
@media (max-width: 900px) {
  .auth-extra { max-width: 200px; margin-top: 16px; }
}

/* ==========================================================================
   طراح پنل صفحهٔ ورود — تفاوت‌های اندک با طراح اسلاید
   --------------------------------------------------------------------------
   ⚠️ بقیهٔ ظاهر از کلاس‌های `sd-*` می‌آید.

   نسخهٔ پیشین چیدمان و استایل مستقل خودش را داشت و نتیجه‌اش
   صفحه‌ای بود که نه شبیه بقیهٔ پنل بود نه رفتارش آشنا. اینجا
   فقط چیزهایی تعریف می‌شوند که طراح اسلاید معادلشان را ندارد.
   ========================================================================== */

/*
  ⚠️ بوم اندازهٔ ثابت دارد، نه ارتفاع دلخواه.

  اسلاید نسبت تصویر دارد و کاربر عوضش می‌کند؛ باکس ورود
  همیشه همان نسبت است. حالت موبایل هم ندارد چون چیدمانش
  تک‌ستونی است و نمای موبایل چیز تازه‌ای نشان نمی‌داد.
*/
/* ==========================================================================
   لایه‌های آزاد پنل ورود — متن، دکمه، تصویر، کادر
   --------------------------------------------------------------------------
   ⚠️ همان قاعده‌ها هم روی صفحهٔ ورود و هم روی بوم طراح.

   دو مجموعهٔ جدا یعنی پیش‌نمایش با نتیجه فرق می‌کرد — همان
   چیزی که کل این طراح برای رفعش ساخته شد.
   ========================================================================== */
.auth-free {
  position: absolute; inset: 0; z-index: 3;

  /*
    ⚠️ لایه‌ها کلیک را نمی‌گیرند مگر پیوند داشته باشند.

    وگرنه یک کادر تزئینیِ بزرگ روی فرم می‌افتد و کاربر
    نمی‌تواند در فیلدها بنویسد.
  */
  pointer-events: none;
}

.afl { position: absolute; }

.afl-text,
.afl-button {
  display: flex; align-items: center;
  text-decoration: none;
}

.afl-button {
  pointer-events: auto;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

a.afl-image { pointer-events: auto; }

.afl-image img { display: block; width: 100%; height: 100%; }

/*
  ⚠️ `min-width: 0` روی آیتمِ متن.

  آیتم فلکس به‌صورت پیش‌فرض کوچک‌تر از محتوایش نمی‌شود
  (`min-width: auto`). متن بلندِ یک لایه از عرضِ تعیین‌شده بیرون
  می‌زد و از لبهٔ صفحه بریده می‌شد — دقیقاً همان چیزی که در
  صفحهٔ ورود دیده می‌شد.
*/
.afl span {
  white-space: pre-wrap;
  min-width: 0;
  max-width: 100%;
}

/* بدون این، جهتِ چینش در فلکس با جهت سند نمی‌خواند */
.afl-text { justify-content: flex-start; }

.ld .sd-canvas { aspect-ratio: 4 / 3; height: auto; padding: 0; }

/* روی بوم، لایه‌ها گرفتنی‌اند */
.ld-free { pointer-events: auto; }
.ld-free .sd-l { cursor: grab; touch-action: none; }
.ld-free .sd-l.is-hidden { opacity: .3; outline: 1px dashed #fff; }

.ld-preview { width: 100%; height: 100%; }
.ld-preview.is-off { opacity: .4; filter: grayscale(.6); }

/* لایه‌های قابل انتخاب روی بوم */
.ld-pick-layer {
  cursor: pointer; border-radius: 10px;
  outline: 1.5px dashed transparent; outline-offset: 3px;
  transition: outline-color .12s ease;
}
.ld-pick-layer:hover { outline-color: rgba(255, 255, 255, .5); }
.ld-pick-layer.is-picked { outline-color: #fff; outline-style: solid; }

/* ردیف فهرست لایه‌ها */
.ld-layer {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  font-size: .78rem; background: var(--bg-subtle, var(--bg));
  border: 1px solid transparent;
}
.ld-layer:hover { border-color: var(--line); }
.ld-layer.on { border-color: var(--green); background: var(--green-100); }

.ld .sd-save-note.is-bad { color: var(--danger, #b91c1c); }

.ld-bucket code {
  padding: 1px 6px; border-radius: 6px;
  background: var(--green-100); color: var(--green-text);
}

/* لینک‌های صفحه‌ساز در منوهای کناری — جدا با یک خط نازک */
.pnav-cms { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #E2EAE5); }

/* ==========================================================================
   فرم محتوا — گزینه‌ها، سوییچ و بخش «دسترسی و نمایش»

   ⚠️ همه با پیشوند `cf-`، تا قاعدهٔ عمومیِ `.field input` (تمام‌عرض)
   روی دکمه‌های رادیویی و تیک‌ها ننشیند.
   ========================================================================== */
.cf-section {
  margin: 20px 0 8px; padding: 18px 20px;
  border: 1px solid var(--line, #E2EAE5); border-radius: 18px;
  background: var(--surface-sunken, #F5F8F6);
}
.cf-section-title { margin: 0 0 14px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.cf-section-grid { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cf-section-grid > .cf-choices { grid-column: 1 / -1; }

/* گزینه‌های رادیویی و چندتایی — تراشه‌های کنار هم */
.cf-choices { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.cf-choices legend { padding: 0; margin-bottom: 8px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--line, #E2EAE5); background: var(--surface, #fff);
  color: var(--ink); font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cf-chip input { width: auto !important; margin: 0; accent-color: var(--green, #00A859); }
.cf-chip:hover { border-color: var(--line-strong, #C9D6CF); }
.cf-chip:has(input:checked) { border-color: var(--green, #00A859); background: var(--success-bg, #E7F6EE); }
.cf-chip:has(input:focus-visible) { outline: 2px solid var(--green, #00A859); outline-offset: 2px; }
.cf-choices .muted, .cf-choices .err { display: block; margin-top: 6px; }

/* تیک تکی — سوییچ در یک ردیف با متنش */
.cf-switch {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--line, #E2EAE5); background: var(--surface, #fff);
  cursor: pointer;
}
.cf-switch input { position: absolute; opacity: 0; width: 1px !important; height: 1px; pointer-events: none; }
.cf-switch-ui {
  position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px;
  background: var(--line-strong, #C9D6CF); transition: background .18s;
}
.cf-switch-ui::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .18s;
}
.cf-switch input:checked + .cf-switch-ui { background: var(--band, #0F5132); }
.cf-switch input:checked + .cf-switch-ui::after { inset-inline-start: 21px; }
.cf-switch input:focus-visible + .cf-switch-ui { outline: 2px solid var(--green, #00A859); outline-offset: 2px; }
.cf-switch-text { font-size: .88rem; font-weight: 700; color: var(--ink); }
.cf-switch-text .muted { display: block; font-weight: 400; }
.cf-inline { display: inline; margin: 0; }

/* نوار پیش‌نمایش صفحهٔ غیرفعال — فقط برای مدیر محتوا */
.sp-preview {
  margin: 12px auto; max-width: 1200px; padding: 12px 16px; border-radius: 14px;
  background: var(--warn-bg, #FFF4DB); color: var(--warn-text, #6B4A00);
  font-size: .88rem; font-weight: 700; line-height: 1.9;
}

/* ==========================================================================
   کمیسیون و خالص دریافتی در فرم کالا

   ⚠️ باید کنار خودِ ورودی قیمت باشد، نه در صفحه‌ای دیگر — تصمیم
   قیمت‌گذاری همان‌جا گرفته می‌شود.
   ========================================================================== */
.net-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin: 0 0 14px; border-radius: 16px;
  background: var(--info-bg, #E8F1FB); color: var(--info-text, #0B4A7F);
  border: 1px solid var(--line, #E2EAE5);
}
.net-note-ic { font-size: 1.2rem; line-height: 1.4; }
.net-note b { display: block; font-size: .9rem; font-weight: 800; }
.net-note-hint { display: block; margin-top: 4px; font-size: .78rem; line-height: 1.9; opacity: .9; }
.net-out {
  display: block; margin-top: 6px; padding: 7px 12px; border-radius: 10px;
  background: var(--surface-sunken, #F5F8F6); color: var(--slate, #6A7B72);
  font-size: .78rem; line-height: 1.9;
}
.net-out b { color: var(--ink, #14231C); font-variant-numeric: tabular-nums; }
.net-out-strong { color: var(--green-700, #027A48) !important; font-weight: 900; }


/* ==========================================================================
   بلوک‌های ویدیو و فایل دانلودی (وبلاگ) — کنار بقیهٔ `dsc-*`
   ========================================================================== */
/* ویدیو و فایل — در صفحهٔ مطلب و هرجا `_desc_blocks` رندر شود */
.dsc-video video {
  display: block; width: 100%; border-radius: 18px; background: #000;
  box-shadow: 0 16px 40px -24px rgba(0,0,0,.45);
}
.dsc-video.dsc-a-center video { margin-inline: auto; }
.dsc-video.dsc-a-end video { margin-inline-start: auto; }
.dsc-video.dsc-w-xs video { width: 25%; } .dsc-video.dsc-w-sm video { width: 40%; }
.dsc-video.dsc-w-md video { width: 55%; } .dsc-video.dsc-w-lg video { width: 75%; }
@media (max-width: 600px) { .dsc-video[class*="dsc-w-"] video { width: 100%; } }

.dsc-file {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--sh-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.dsc-file:hover { border-color: var(--green); box-shadow: var(--sh-md); transform: translateY(-1px); }
.dsc-file-ic {
  --fc: #64748b;
  flex: none; width: 50px; height: 58px; position: relative;
  display: grid; place-items: end center; padding-bottom: 9px;
  border-radius: 10px 18px 10px 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 85%, #fff), var(--fc));
  color: #fff; font-size: .64rem; font-weight: 900; letter-spacing: .04em; direction: ltr;
  box-shadow: 0 8px 18px -8px var(--fc);
}
[dir="rtl"] .dsc-file-ic { border-radius: 18px 10px 10px 10px; }
.dsc-file-ic::before {
  content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 16px; height: 16px;
  background: rgba(255,255,255,.35); border-end-start-radius: 8px;
}
.dsc-file-ic[data-ext="pdf"] { --fc: #dc2626; }
.dsc-file-ic[data-ext="zip"], .dsc-file-ic[data-ext="rar"], .dsc-file-ic[data-ext="7z"] { --fc: #d97706; }
.dsc-file-ic[data-ext="docx"], .dsc-file-ic[data-ext="doc"] { --fc: #2563eb; }
.dsc-file-ic[data-ext="xlsx"], .dsc-file-ic[data-ext="xls"], .dsc-file-ic[data-ext="csv"] { --fc: #059669; }
.dsc-file-ic[data-ext="pptx"], .dsc-file-ic[data-ext="ppt"] { --fc: #ea580c; }
.dsc-file-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dsc-file-txt b { font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }
.dsc-file-txt p { margin: 0; font-size: .8rem; color: var(--slate); line-height: 1.8; }
.dsc-file-txt small { font-size: .72rem; color: var(--slate); }
.dsc-file-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--r-full);
  background: var(--green-btn); color: var(--on-green);
  font-size: .82rem; font-weight: 800;
  box-shadow: 0 8px 20px -10px var(--green);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.dsc-file-btn svg { width: 17px; height: 17px; }
.dsc-file-btn:hover { background: var(--green-btn-hover); transform: translateY(-1px); color: var(--on-green); }
@media (max-width: 520px) {
  .dsc-file { flex-wrap: wrap; }
  .dsc-file-btn { flex-basis: 100%; justify-content: center; }
}


/* پیش‌نمایش کالای منتشرنشده برای صاحب کالا (دکمهٔ «مشاهده» در کالاهای من) */
.pd-preview { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  padding: 10px 14px; border-radius: 12px; font-size: .88rem; margin-bottom: 12px; }
.pd-preview b { font-weight: 800; }
.pd-preview-note { margin: 0; padding: 10px 12px; border-radius: 10px; text-align: center;
  background: #fffbeb; border: 1px dashed #fcd34d; color: #92400e; font-size: .85rem; }
[data-theme="dark"] .pd-preview,
[data-theme="dark"] .pd-preview-note { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); color: #fcd34d; }

/* ==========================================================================
   اسلایدر صفحهٔ اصلی — اسلایدِ غیرفعال نباید کلیک را بگیرد
   --------------------------------------------------------------------------
   ⚠️ باگ: همهٔ اسلایدها `position:absolute; inset:0` روی هم‌اند و
   غیرفعال‌ها فقط `opacity:0` داشتند. اسلایدی که در DOM بعد از اسلاید
   فعال می‌آمد، نامرئی ولی **روی** آن می‌نشست و کلیک دکمه‌ها و لینک‌های
   لایه‌ها (به‌ویژه لایه‌های موشن‌دار) را می‌گرفت.

   `visibility` با تأخیرِ هم‌اندازهٔ محوشدن عوض می‌شود تا انتقال نرم
   بماند.
   ========================================================================== */
.slider .slide:not(.on) {
  pointer-events: none;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.slider .slide.on {
  z-index: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s linear 0s;
}

/* اسلاید طراحی‌شدهٔ بدون لایه هم متن قالب ندارد */
.pshow-slide.has-layers .pshow-inner { display: none !important; }

/* ==========================================================================
   دسترس‌پذیری (Lighthouse ۱۴۰۵/۰۸/۰۶)
   --------------------------------------------------------------------------
   • متن فوتر با `opacity` کم‌رنگ می‌شد و نسبت تضاد به زیر ۴٫۵ می‌رسید
   • دکمه‌های زبان نوار موبایل سفیدِ نیمه‌شفاف روی سبز بودند
   • کلید منو و لوگو روی موبایل کمتر از ۴۴ پیکسل جای لمس داشتند
   ========================================================================== */
.footer .copy,
.footer .about {
  opacity: 1;
  color: #E2E8F0;
}
@media (max-width: 900px) {
  .mbar-lang { color: #fff; }
  .hamburger { min-width: 44px; min-height: 44px; }
  .logo { min-height: 44px; display: inline-flex; align-items: center; }
}

/* شبکه‌های اجتماعی فوتر — تعداد نامحدود، پس شکستن خط؛ آیکون فایلی */
.socials { flex-wrap: wrap; }
.socials .social-img { width: 20px; height: 20px; object-fit: contain; display: block; }

/* H1 صفحهٔ اصلی — فقط برای موتور جست‌وجو و صفحه‌خوان؛ دیده نمی‌شود */
.vh-h1 {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   صفحهٔ ۴۰۴
   ========================================================================== */
.nf-page { padding-block: clamp(28px, 6vw, 64px); }
.nf-card {
  max-width: 720px; margin-inline: auto; text-align: center;
  padding: clamp(24px, 5vw, 44px) clamp(18px, 4vw, 40px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px; box-shadow: var(--sh-md, 0 10px 30px rgba(0,0,0,.06));
}
.nf-code {
  font-size: clamp(4.2rem, 16vw, 7.5rem); font-weight: 900; line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--band), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nf-title { margin: 14px 0 8px; font-size: clamp(1.15rem, 3.4vw, 1.5rem); }
.nf-text { margin: 0 auto 22px; max-width: 520px; color: var(--slate); line-height: 2; font-size: .92rem; }
.nf-search {
  display: flex; gap: 8px; max-width: 520px; margin: 0 auto 18px;
}
.nf-search input {
  flex: 1 1 auto; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-sunken); color: var(--ink); font: inherit;
}
.nf-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-50); }
.nf-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.nf-cats { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.nf-cats > b { display: block; margin-bottom: 10px; font-size: .9rem; }
.nf-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: var(--green-50); color: var(--green-text); text-decoration: none;
  border: 1px solid var(--green-100);
}
.nf-chip:hover { background: var(--green-100); }
@media (max-width: 480px) {
  .nf-search { flex-direction: column; }
  .nf-actions .btn { flex: 1 1 40%; justify-content: center; }
}