/* ==========================================================================
   base.css — بازنشانی، راست‌چینی، تایپوگرافی پایه و عناصر مشترک مدال
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  /* زمینه و نقشِ نوریِ رویش، هر دو از توکن می‌آیند تا از پنل قابل
     تغییر باشند. اگر تصویر پس‌زمینه انتخاب شود، وردپرس همین را
     با تصویر جایگزین می‌کند. */
  background-color: var(--bg-safhe);
  background-image: var(--bg-naghsh);
  background-attachment: fixed;
  color: var(--shir);
  font-family: var(--font-matn);
  font-size: var(--fs-matn);
  line-height: var(--lh-matn);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* وقتی تور یا کشو باز است، صفحه پشت آن نباید اسکرول شود */
body.is-locked {
  overflow: hidden;
}

/* ★ صفحه نقشه دقیقاً یک صفحه است و هرگز نباید اسکرول داشته باشد.
   اگر اسکرول داشته باشد، بعد از بستن کشو کاربر می‌تواند در فضای
   خالیِ زیر نقشه گیر کند و فکر کند صفحه قفل شده — همان ایرادی که
   روی موبایل دیده می‌شد. */
html:has(.hero),
body:has(.hero) {
  height: calc(100dvh - var(--wp-bar, 0px));
  max-height: calc(100dvh - var(--wp-bar, 0px));
  overflow: hidden;
  overscroll-behavior: none;
}

/* ★ نوار مدیریت وردپرس با margin-top روی <html> می‌نشیند. اگر
   حسابش نکنیم، صفحهٔ نقشه به‌اندازهٔ همان نوار از پایین بیرون می‌زند
   و نام نمایشگاه‌ها و راهنما زیر لبهٔ صفحه گم می‌شوند. */
body.admin-bar {
  --wp-bar: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    --wp-bar: 46px;
  }
}
body:has(.hero) > main {
  margin: 0;
  padding: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
textarea {
  /* افقی، در صفحهٔ راست‌چین چیدمان را به‌هم می‌ریزد */
  resize: vertical;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--tala);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
a:hover {
  color: var(--tala-roshan);
}

/* ── تیتر ──────────────────────────────────────────────────────────────
   Amiri فقط اینجا. هیچ‌وقت letter-spacing روی متن فارسی.
   -------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-titr);
  font-weight: 400;
  line-height: var(--lh-titr);
  margin: 0;
}

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
h2 {
  font-size: var(--fs-titr);
}
h3 {
  font-size: var(--fs-h3);
  font-family: var(--font-matn);
  font-weight: 600;
}

p {
  margin: 0 0 var(--s4);
}
p:last-child {
  margin-bottom: 0;
}

/* نام‌های لاتین: SALOR، Cadillac، Veronika، Rafael */
.latin {
  font-family: var(--font-latin);
  font-weight: 500;
  letter-spacing: 0.06em; /* لاتین letter-spacing می‌گیرد، فارسی نه */
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── دسترسی‌پذیری ───────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--tala);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s4);
  top: -100px;
  z-index: 999;
  background: var(--gerdoo-roshan);
  color: var(--shir);
  padding: var(--s3) var(--s5);
  border: 1px solid var(--tala-saye);
  transition: top var(--dur-kotah) var(--ease-narm);
}
.skip-link:focus {
  top: var(--s4);
}

/* ── طلا ────────────────────────────────────────────────────────────────
   دو ابزار مشترک. طلا هیچ‌جای دیگری تخت استفاده نمی‌شود.
   -------------------------------------------------------------------- */

/* متن طلایی با گرادیان عمودی — مثل خود لوگو */
.gold {
  background-image: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* اگر مرورگر background-clip:text را نداشت، متن ناخوانا نشود */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold {
    color: var(--tala);
  }
}

/* خط برنجی افقی */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background-image: var(--gold-rule);
}

/* ── تابش ──────────────────────────────────────────────────────────────
   نور بسیار آرام که روی طلا حرکت می‌کند، مثل عبور از کنار طلاکاری.
   نامحسوس و بدون هزینه چیدمان — فقط موقعیت گرادیان تغییر می‌کند.
   -------------------------------------------------------------------- */
.tabesh {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tabesh::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(245, 237, 221, 0.14) 50%,
    transparent 60%
  );
  background-size: 300% 100%;
  animation: tabesh var(--dur-tabesh) linear infinite;
}
@keyframes tabesh {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -150% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tabesh::after {
    animation: none;
    opacity: 0;
  }
}

/* ── دکمه ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px; /* حداقل ناحیه لمسی */
  padding: var(--s3) var(--s5);
  border: 1px solid var(--marz-por);
  border-radius: var(--radius);
  /* شیشه‌ای: پشتش دیده می‌شود ولی متن خوانا می‌ماند */
  background: var(--shishe);
  color: var(--tala-roshan);
  font-size: var(--fs-kootah);
  font-weight: 500;
  transition: background var(--dur-kotah) var(--ease-narm),
    border-color var(--dur-kotah) var(--ease-narm),
    color var(--dur-kotah) var(--ease-narm);
}
/* ★ تارکردنِ پس‌زمینه فقط جایی که واقعاً چیزی پشت دکمه هست: نوار
   بالا، نمای هوایی، تور، کشو و پیام‌ها.

   backdrop-filter مرورگر را وادار می‌کند از هر چیزی که پشت عنصر است
   یک تصویر بگیرد. روی دکمه‌ای که وسط یک صفحهٔ بلندِ معمولی نشسته،
   این کار روی بعضی کارت‌های گرافیک کلِ صفحه را از رندر می‌انداخت —
   صفحه محصول کاملاً خالی دیده می‌شد. پشت آن دکمه هم چیزی جز رنگ
   زمینه نبود، پس چیزی از دست نمی‌رود. */
.bar .btn,
.hero .btn,
.stage .btn,
.sheet .btn,
.hint .btn {
  -webkit-backdrop-filter: var(--shishe-blur);
  backdrop-filter: var(--shishe-blur);
}

.btn:hover {
  background: var(--marz-kam);
  border-color: var(--tala);
  color: var(--sadaf);
}

.btn--solid {
  background: var(--gold-edge);
  border-color: transparent;
  color: var(--aabnoos);
  font-weight: 600;
}
.btn--solid:hover {
  background: var(--tala-roshan);
  color: var(--aabnoos);
}

/* ── نشانگر بارگذاری: نقش چهارپر لوگو ────────────────────────────────
   به‌جای اسپینر عمومی، چهار پرِ نشان برند یکی‌یکی کشیده می‌شوند.
   -------------------------------------------------------------------- */

.quatrefoil {
  width: 64px;
  height: 76px;
  overflow: visible;
}
.quatrefoil [stroke] {
  fill: none;
  stroke: var(--tala);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.quatrefoil .qf-ring {
  stroke: var(--tala-saye);
  stroke-width: 1.4;
}
.quatrefoil .qf-petal {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: qf-draw 2.4s var(--ease-narm) infinite;
}
.quatrefoil .qf-petal:nth-of-type(2) {
  animation-delay: 0.15s;
}
.quatrefoil .qf-petal:nth-of-type(3) {
  animation-delay: 0.3s;
}
.quatrefoil .qf-petal:nth-of-type(4) {
  animation-delay: 0.45s;
}
@keyframes qf-draw {
  0% {
    stroke-dashoffset: 130;
    opacity: 0.25;
  }
  45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  75% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -130;
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quatrefoil .qf-petal {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
}

/* ── ابزار چیدمان ─────────────────────────────────────────────────────── */

.wrap {
  width: min(100% - 2 * var(--s5), var(--max-w));
  margin-inline: auto;
}

.eyebrow {
  font-size: var(--fs-riz);
  color: var(--shir-kam);
  line-height: var(--lh-kootah);
  margin: 0 0 var(--s2);
}

/* ── نوار بالا ─────────────────────────────────────────────────────────── */

.bar {
  /* ★ نوار شناور است و روی محتوا می‌افتد. نیمهٔ پایینش شفاف است ولی
     باز هم کلیک‌ها را می‌گرفت: هر فیلد یا دکمه‌ای که زیرِ آن قسمتِ
     شفاف می‌رسید، دیگر کلیک نمی‌شد. پس خودِ نوار کلیک نمی‌گیرد و
     فقط چیزهای داخلش می‌گیرند. */
  pointer-events: none;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-bar);
  height: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--s5);
  background: linear-gradient(to bottom, rgba(33, 0, 0, 0.72), transparent);
  backdrop-filter: blur(2px);
}
.bar::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: var(--s5);
  height: 1px;
  background-image: var(--gold-rule);
  opacity: 0.55;
}

/* وقتی کشوی محصول باز است، نوار سایت کنار می‌رود.
   عمداً به وضعیت واقعی کشو گره خورده، نه به یک کلاس روی body:
   کلاس ممکن است گیر کند و نوار برای همیشه پنهان بماند. */
body:has(#sheet.is-open) .bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-kotah) var(--ease-narm);
}

/* ★ چند صدم ثانیه بعد از بسته‌شدن کشو، نوار هنوز کلیک نمی‌گیرد.
   دلیلش در product-sheet.js نوشته شده: کلیکِ شبحِ لمس، درست روی
   دکمه «بازگشت به نقشه» می‌نشست و کاربر را از تور بیرون می‌انداخت. */
body.sheet-cooldown .bar {
  pointer-events: none;
}

/* اجزای نوار، خودشان کلیک می‌گیرند */
.bar > * {
  pointer-events: auto;
}

.bar__logo {
  display: block;
  line-height: 0;
}
.bar__logo img {
  height: calc(var(--bar) - 1.4rem);
  width: auto;
}

.bar__sound {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding-inline: var(--s3);
  color: var(--shir-kam);
  font-size: var(--fs-riz);
  transition: color var(--dur-kotah) var(--ease-narm);
}
.bar__sound:hover {
  color: var(--tala);
}
.bar__sound .ic-wave {
  display: none;
}
.bar__sound[aria-pressed='true'] {
  color: var(--tala);
}
.bar__sound[aria-pressed='true'] .ic-wave {
  display: block;
}
.bar__sound[aria-pressed='true'] .ic-mute {
  display: none;
}
.bar__sound-label {
  white-space: nowrap;
}
@media (max-width: 30rem) {
  .bar__sound-label {
    display: none;
  }
}