/* ==========================================================================
   قارقارک — فوتر فروشگاهی
   منبع: mehrpartfooterrtl — از پالت فیروزه‌ای/زعفرانی «مهرپارت» به پالت
   رسمی گرافیت/برنجی قارقارک منتقل شد، لینک Google Fonts حذف شد (فونت
   لوکال است) و کنترل تمِ تکراریِ داخل فوتر برداشته شد؛ تنها کنترل تم
   صفحه در هدر است.

   خودِ <footer> یک container است: تمام ریسپانسیو با @container انجام
   می‌شود، پس فوتر به عرضِ «خودش» واکنش نشان می‌دهد نه به عرض ویوپورت.
   ========================================================================== */
.fo {
  container: fo / inline-size;
  position: relative;
  isolation: isolate;
  overflow: clip;
  text-align: center;
  background: linear-gradient(to bottom, var(--bg), var(--bg-2));
  color: var(--text);
  padding-block-start: var(--sp-12);
  border-block-start: 1px solid var(--line);
}

/* هاله‌ی محیطی — دو کره‌ی نرم، بدون هیچ تصویری */
.fo__aurora {
  position: absolute; inset-block-start: -30%; inset-inline: -10%;
  block-size: 70%; z-index: -2; pointer-events: none;
  filter: blur(70px);
  background:
    radial-gradient(38% 60% at 68% 40%, var(--accent-soft) 0%, transparent 70%),
    radial-gradient(34% 55% at 26% 55%, rgba(85,97,112,.16) 0%, transparent 70%);
  animation: auroraDrift 26s var(--e-expo) infinite alternate;
}
@keyframes auroraDrift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* نوار گره‌چینی (شمسه‌ی هشت‌پر) — امضای بصری فوتر، لبه‌ی بالا */
.fo__girih {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: clamp(76px, 14cqi, 140px);
  z-index: -1; pointer-events: none;
  color: var(--accent);
  opacity: .16;
}
:root[data-theme="dark"] .fo__girih { opacity: .2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fo__girih { opacity: .2; }
}

.fo__inner { inline-size: min(76rem, 100% - (var(--gutter) * 2)); margin-inline: auto; }

/* جداکننده‌ی مویی با محو شدن در دو سر — نه سایه، نه باکس */
.fo__rule {
  block-size: 1px; border: 0; margin-block: var(--sp-8); margin-inline: 0;
  background: linear-gradient(to left, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* ---------- بلوک برند ---------- */
.fo__brand { display: grid; justify-items: center; gap: var(--sp-3); }
.fo__medallion {
  inline-size: clamp(60px, 9cqi, 76px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--inner-hair), var(--shadow-md);
  transition: transform var(--d-slow) var(--e-expo);
}
.fo:hover .fo__medallion { transform: rotate(30deg); }
.fo__medallion svg { inline-size: 62%; block-size: 62%; }
.fo__medallion:has(img){inline-size:174px;block-size:104px;padding:.35rem .6rem;border-radius:18px}.fo__medallion img{inline-size:100%;block-size:100%;object-fit:contain;mix-blend-mode:multiply}@media(prefers-color-scheme:dark){html:not([data-theme=light]) .fo__medallion img{mix-blend-mode:screen;filter:invert(1)}}html[data-theme=dark] .fo__medallion img{mix-blend-mode:screen;filter:invert(1)}

.fo__name {
  font-size: var(--fs-2xl); font-weight: 800; line-height: 1.35;
  letter-spacing: var(--tracking-brand);
  color: var(--text-strong);
}
.fo__tag {
  font-size: var(--fs-sm); color: var(--text-muted);
  max-inline-size: 44ch; margin-inline: auto; line-height: 1.9;
}

/* آمار — سه عدد به‌عنوان المان گرافیکی، با جداکننده‌ی مویی */
.fo__stats {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-2) var(--sp-4); margin-block-start: var(--sp-2);
}
.fo__stats li { display: grid; gap: 2px; min-inline-size: 8ch; }
.fo__stats li + li { border-inline-start: 1px solid var(--line-strong); padding-inline-start: var(--sp-4); }
.fo__stats b { font-size: var(--fs-lg); font-weight: 800; color: var(--accent-text); line-height: 1.2; }
.fo__stats span { font-size: var(--fs-3xs); color: var(--text-faint); }

/* ---------- خبرنامه ---------- */
/* ==========================================================================
   خبرنامه
   ----------------------------------------------------------------------
   باگ: زیر ۳۹۰px، فرم و برچسب ۳۵۳px پهنا می‌گرفتند در حالی که ستون فوتر
   ۳۱۷px بود، و دکمه‌ی «عضویت» از لبه‌ی شروعِ خط بیرون می‌زد (اندازه‌گیری در
   ۳۶۰px: left = −۲۲px). علت، ترکیب دو چیز بود:
   ۱) ترک ضمنیِ `auto` در گرید هرگز زیر min-content خودش کوچک نمی‌شود؛
   ۲) min-content فرم برابر ۳۵۳px بود، چون عرضِ ذاتیِ یک <input> (بدون
      خصیصه‌ی size یعنی ۲۰ نویسه ≈ ۲۲۴px) در محاسبه‌ی min-content ظاهر
      می‌شود — `min-inline-size:0` فقط اجازه‌ی فشرده‌شدن می‌دهد، سهمِ
      min-content را صفر نمی‌کند.
   پس هم ترک با minmax(0,1fr) از کفِ min-content آزاد شد، هم به input یک
   پایه‌ی کوچکِ صریح داده شد.
   ========================================================================== */
.news {
  margin-block-start: var(--sp-6);
  display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; gap: var(--sp-3);
}
.news__label { font-size: var(--fs-xs); color: var(--text-muted); }
.news__form {
  display: flex; align-items: center; gap: var(--sp-1);
  inline-size: min(100%, 30rem);
  max-inline-size: 100%;
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--inner-hair);
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.news__form:focus-within {
  border-color: var(--accent);
  box-shadow: var(--inner-hair), 0 0 0 4px var(--accent-soft);
}
.news__form input {
  /* پایه‌ی صریح و کوچک به‌جای عرضِ ذاتیِ ۲۰ نویسه‌ای؛ flex-grow آن را
     تا انتهای فضای موجود باز می‌کند. */
  flex: 1 1 5rem; inline-size: 5rem; min-inline-size: 0;
  background: none; border: 0; outline: 0;
  padding-inline: var(--sp-4); padding-block: var(--sp-2);
  font-size: var(--fs-sm); text-align: start;
}
.news__form input::placeholder { color: var(--text-faint); }
.news__form .btn { border-radius: var(--r-pill); min-block-size: 42px; }
.news__note {
  font-size: var(--fs-3xs); color: var(--text-faint);
  min-block-size: 1.4em; transition: color var(--d-base) var(--e-out);
}
.news__note[data-state="ok"] { color: var(--ok); font-weight: 600; }
.news__note[data-state="err"] { color: var(--danger); font-weight: 600; }

/* ---------- نوار اعتماد ---------- */
.fo__trust { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.trust__item {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
/* اسپات‌لایت دنبال‌کننده‌ی نشانگر */
.trust__item::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--d-base) var(--e-out);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 65%);
}
.trust__item:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.trust__item:hover::before { opacity: 1; }
.trust__item svg { inline-size: 1.55rem; block-size: 1.55rem; color: var(--accent-text); }
.trust__item b { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.trust__item > span { font-size: var(--fs-3xs); color: var(--text-faint); line-height: 1.75; }

/* ---------- ستون‌های لینک — در موبایل آکاردئون ---------- */
.cols { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
.col { border-block-end: 1px solid var(--line); }
.col > summary {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding-block: var(--sp-3);
  cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong);
}
.col > summary::-webkit-details-marker { display: none; }
.col__chev {
  inline-size: .85rem; block-size: .85rem; color: var(--text-faint);
  transition: transform var(--d-base) var(--e-out);
}
.col[open] .col__chev { transform: rotate(180deg); }
.col__list {
  display: grid; gap: var(--sp-2);
  padding-block-end: var(--sp-4);
  animation: colIn var(--d-slow) var(--e-expo) both;
}
@keyframes colIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.col__list a {
  position: relative; display: inline-block;
  font-size: var(--fs-sm); color: var(--text-muted);
  padding-block: 2px;
  transition: color var(--d-fast) var(--e-out);
}
/* هاور: زیرخط از سمت راست (جهت خواندن) باز می‌شود — نه opacity */
.col__list a::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 0; block-size: 1px; background: var(--accent);
  transition: inline-size var(--d-base) var(--e-out);
}
.col__list a:hover { color: var(--accent-text); }
.col__list a:hover::after { inline-size: 100%; }

/* خط لهجه‌ی کوتاه زیر عنوان هر ستون (فقط در چیدمان دسکتاپ) */
.col__title-line {
  display: none; inline-size: 1.75rem; block-size: 2px;
  margin-inline: auto; margin-block-start: calc(var(--sp-1) * -1);
  margin-block-end: var(--sp-3);
  border-radius: 2px;
  background: linear-gradient(to left, var(--accent), var(--qq-steel-400));
}

/* ---------- تماس ---------- */
.fo__contact { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.contact__item {
  display: grid; justify-items: center; gap: 2px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
}
.contact__item svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--accent-text); }
.contact__item dt {
  display: grid; justify-items: center; gap: var(--sp-1);
  font-size: var(--fs-3xs); color: var(--text-faint);
}
.contact__item dd { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
/* هدف لمسی ≥۴۴px — WCAG 2.5.8؛ لینک تک‌خطی داخل dd به‌خودی‌خود ۲۳px می‌شد */
.contact__item a {
  display: inline-flex; align-items: center; min-block-size: 44px;
  transition: color var(--d-fast) var(--e-out);
}
.contact__item a:hover { color: var(--accent-text); }

/* ---------- شبکه‌های اجتماعی — دکمه‌های مغناطیسی ---------- */
.social {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin-block-start: var(--sp-6);
}
.social a {
  inline-size: 2.9rem; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  will-change: transform;
  transition: color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
.social a:hover { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent); }
.social svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* ---------- نمادها و درگاه‌ها ---------- */
.badges,
.fo__badges {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: var(--sp-2); margin-block-start: var(--sp-6);
}
.fo__badge {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  inline-size: clamp(96px, 24cqi, 116px); min-block-size: 88px;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-faint);
  transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.fo__badge:hover { border-color: var(--accent); color: var(--text-muted); }
.fo__badge svg { inline-size: 1.35rem; block-size: 1.35rem; color: var(--accent-text); }
.fo__badge b { font-size: var(--fs-3xs); font-weight: 700; color: var(--text-muted); }
.fo__badge span { font-size: var(--fs-3xs); line-height: 1.6; }

.pays { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.pay {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding-inline: var(--sp-3); padding-block: 6px;
  border-radius: var(--r-pill);
  font-size: var(--fs-3xs); color: var(--text-muted);
  background: var(--accent-softer);
  border: 1px solid var(--line);
}
.pay svg { inline-size: .9rem; block-size: .9rem; color: var(--accent-text); }

/* ---------- نوار پایانی ---------- */
.fo__bottom {
  margin-block-start: var(--sp-8);
  border-block-start: 1px solid var(--line);
  background: var(--surface-2);
}
.fo__bottomInner {
  inline-size: min(76rem, 100% - (var(--gutter) * 2)); margin-inline: auto;
  padding-block: var(--sp-4);
  display: grid; gap: var(--sp-3); justify-items: center;
}
.copy { font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.9; }
.copy b { color: var(--text-muted); font-weight: 600; }
.fo__tools { display: flex; align-items: center; gap: var(--sp-2); }
.fo__tools a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 40px; padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-3xs); font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.fo__tools a:hover { color: var(--accent-text); border-color: var(--accent); }
.fo__tools svg { inline-size: 1rem; block-size: 1rem; }

/* واترمارک غول‌پیکر برند — نصفه بریده، خط پایانی صفحه */
.watermark {
  display: block; inline-size: 100%; text-align: center;
  font-size: clamp(3.5rem, 1rem + 15cqi, 13rem);
  font-weight: 900; line-height: .78;
  color: var(--text);
  opacity: .055;
  margin-block-start: calc(var(--sp-4) * -1);
  translate: 0 16%;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
:root[data-theme="dark"] .watermark { opacity: .07; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .watermark { opacity: .07; }
}

/* ---------- ریسپانسیو با CONTAINER QUERY ---------- */
@container fo (min-width: 34rem) {        /* ≈ ۵۴۴px */
  .fo__trust { grid-template-columns: repeat(2, 1fr); }
  .fo__contact { grid-template-columns: repeat(3, 1fr); }
  .fo__bottomInner { grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .fo__bottomInner .fo__tools { justify-self: end; }
  .copy { text-align: start; }
}
@container fo (min-width: 52rem) {        /* ≈ ۸۳۲px */
  .fo__trust { grid-template-columns: repeat(4, 1fr); }
  .cols { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); align-items: start; }
  .col { border-block-end: 0; }
  .col > summary { cursor: default; padding-block: 0; margin-block-end: var(--sp-3); }
  .col__chev { display: none; }
  .col__list { animation: none; padding-block-end: 0; }
  .cols .col__title-line { display: block; }
}