/*
 * ظاهرِ شیشه‌ایِ صفحهٔ BMI — «شیشهٔ داروخانه‌ای».
 *
 * ── چرا جدا از bmi.html ───────────────────────────────────────────────────
 * آن فایل خروجیِ ابزارِ طراحی است و رندررش نودها را clone و بازسازی می‌کند.
 * هرچه کمتر دستش بزنیم بهتر؛ پس ظاهر این‌جاست و در HTML فقط چند کلاس اضافه
 * می‌شود. کلاس‌ها از clone جانِ سالم به در می‌برند، عنصرِ تازه نه.
 *
 * ── فضاسازی با ::before و ::after روی body ───────────────────────────────
 * شیشه بدونِ چیزی که پشتش بشکند، فقط یک مستطیلِ کدر است. پس زمینه لایه‌های
 * نورِ سبز و طلایی دارد. عمداً pseudo-element است نه div: رندرر ممکن است
 * هر نودی را جابه‌جا کند، ولی به pseudo-elementها کاری ندارد.
 *
 * ── دانه (grain) ─────────────────────────────────────────────────────────
 * ثابت و pointer-events:none و بیرونِ جریانِ اسکرول. روی کانتینرِ اسکرول‌شونده
 * بگذاری، هر فریم دوباره رسم می‌شود و موبایل را زمین می‌زند.
 */

:root {
  --ink: #f0eade;
  --ink-soft: #c3d0c6;
  --ink-dim: #9fb2a4;
  --gold: #cba25a;
  --gold-lit: #e8d4a6;
  --bg: #07110e;

  /* شیشه: یک گرادیانِ روشنیِ کم‌رمق روی تهِ تیره، نه صرفاً سفیدِ شفاف */
  /*
    فیلِ پنل عمداً کم‌جان مانده: روشن‌کردنش کنتراستِ متنِ کرِمی را پایین
    می‌آورد. آنچه «شیشه» را می‌سازد لبه است نه تنِ پنل — پس نور روی رینگ
    و درزها خرج شده، نه روی سطح.
  */
  --glass: linear-gradient(158deg, rgba(234, 227, 210, 0.1), rgba(228, 240, 232, 0.03) 44%, rgba(234, 227, 210, 0.07));
  --glass-line: rgba(238, 246, 240, 0.3);
  --glass-shadow: 0 30px 70px -28px rgba(0, 22, 15, 0.95), 0 4px 16px -6px rgba(0, 16, 11, 0.6);
  --glass-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  --r: 22px;
}

/* ── فضا ─────────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
}

/*
  ── چرا این لایه پررنگ است ──────────────────────────────────────────────
  نسخهٔ اول همه‌اش سبزِ تیره روی سیاه بود: دامنهٔ روشناییِ پشتِ شیشه تقریباً
  صفر، پس blur چیزی برای پخش‌کردن نداشت و پنل فقط «کمی روشن‌تر» می‌شد نه
  شیشه. حالا چند حوضچهٔ نورِ اشباع‌شده هست که زیرِ پنل‌ها می‌افتند؛ عبورِ
  همین نور از پشتِ شیشه است که چشم «شیشه» می‌خواندش.
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 46% at 50% -6%, rgba(46, 132, 100, 0.55), rgba(7, 17, 14, 0) 62%),
    radial-gradient(30% 26% at 20% 34%, rgba(64, 176, 132, 0.34), rgba(7, 17, 14, 0) 64%),
    radial-gradient(26% 24% at 82% 26%, rgba(214, 170, 92, 0.3), rgba(7, 17, 14, 0) 62%),
    radial-gradient(34% 30% at 66% 62%, rgba(38, 122, 96, 0.36), rgba(7, 17, 14, 0) 66%),
    radial-gradient(30% 28% at 14% 76%, rgba(190, 150, 84, 0.2), rgba(7, 17, 14, 0) 64%),
    radial-gradient(40% 34% at 88% 86%, rgba(34, 104, 82, 0.34), rgba(7, 17, 14, 0) 66%),
    var(--bg);
}

/* دانهٔ ریز — شیشه بدونِ بافت، پلاستیک دیده می‌شود */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* محتوا باید بالای فضا بنشیند */
.bmi-root {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

/* ── شیشه ────────────────────────────────────────────────────────────── */
.g {
  position: relative;
  /*
    ── چرا همهٔ درخشش‌ها این‌جاست و نه در ::before/::after ──────────────
    نسخهٔ قبل دو pseudo-element با z-index:-1 داشت، داخلِ عنصری که
    backdrop-filter دارد. این ترکیب در کروم یک بستهٔ ترکیب‌بندیِ تازه
    می‌سازد و هنگامِ رِپینتِ پی‌درپی (مثلاً وقتی کاربر اسلایدر را می‌کشد)
    ترتیبِ لایه‌ها می‌لرزد — همان «هالهٔ سفیدی که می‌رود و می‌آید».
    وقتی همه‌چیز لایه‌های پس‌زمینهٔ خودِ عنصر باشد، لایهٔ اضافه‌ای برای
    لرزیدن نمی‌ماند. ترتیب: اولی بالاتر.
  */
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.055) 48%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 72% at 88% -12%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 56%),
    radial-gradient(95% 62% at 8% 110%, rgba(219, 178, 104, 0.13), rgba(255, 255, 255, 0) 62%),
    var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(108%);
  backdrop-filter: blur(30px) saturate(185%) brightness(108%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* شیشهٔ آرام‌تر برای کارت‌های ریز */
.g-sm {
  background: linear-gradient(160deg, rgba(234, 227, 210, 0.075), rgba(234, 227, 210, 0.022));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(238, 246, 240, 0.22);
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 26px -18px rgba(0, 20, 14, 0.8);
}

/* نوار بالا */
.g-nav {
  background: rgba(8, 19, 15, 0.62) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(234, 227, 210, 0.1) !important;
}

/* ── واکنش‌گرایی ─────────────────────────────────────────────────────── */
/*
  صفحه هیچ media query نداشت: شبکهٔ دوستونی، ردیفِ چهارتاییِ دسته‌ها، فوترِ
  چهارستونی و نوارِ افقیِ لینک‌ها روی موبایل همان‌طور می‌ماندند و محتوا از
  لبه بیرون می‌زد. در RTL این سرریز حتی در scrollWidth هم دیده نمی‌شود.
*/
.bmi-main {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 26px;
  /*
    align-items:start نه stretch. پانلِ ورودی ذاتاً کوتاه‌تر از پانلِ نتیجه
    است؛ با stretch کشیده می‌شد و وسطش یک حفرهٔ خالی می‌ماند که روی شیشه
    بیشتر هم به چشم می‌آمد. دو شیشهٔ شناورِ هم‌عرض با قدِ متفاوت، ترکیبِ
    عمدی به نظر می‌رسد؛ یک پانلِ کشیده با حفره، خرابی.
  */
  align-items: start;
}

@media (max-width: 1000px) {
  .bmi-main {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.bmi-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

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

@media (max-width: 420px) {
  .bmi-cats {
    grid-template-columns: 1fr;
  }
}

/* نوارِ لینک‌ها: روی موبایل به‌جای شکستن، افقی می‌لغزد */
.nav-links {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1080px) {
  .nav-links {
    overflow-x: auto;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to left, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
}

@media (max-width: 720px) {
  .g-nav {
    padding: 12px 5% !important;
    gap: 12px !important;
  }
}

/* فوتر */
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 520px) {
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* تیتر و فاصله‌ها */
.bmi-h1 {
  font-size: clamp(27px, 6.4vw, 44px);
  line-height: 1.35;
}

.bmi-lead {
  font-size: clamp(14px, 3.4vw, 15.5px);
}

@media (max-width: 720px) {
  .bmi-head {
    padding: 40px 6% 6px !important;
  }
  .bmi-main {
    padding: 26px 6% 28px !important;
  }
  .g-pad {
    padding: 26px 22px !important;
  }
  .bmi-cta-box {
    padding: 38px 8% !important;
  }
}

@media (max-width: 420px) {
  .g-pad {
    padding: 22px 17px !important;
  }
}

/* ── عددِ نتیجه ──────────────────────────────────────────────────────── */
.bmi-number {
  font-size: clamp(46px, 13vw, 60px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 24px rgba(203, 162, 90, 0.16);
}

/*
  یادداشتِ آرامش — درست زیرِ عدد، نه ته صفحه.
  چرا این‌جا: نگرانی دقیقاً همان لحظه‌ای اوج می‌گیرد که عدد و برچسب را
  می‌بیند. جمله‌ای که ۱۵۰۰ پیکسل پایین‌تر باشد، آن لحظه را نمی‌گیرد.
*/
.bmi-note {
  border-top: 1px solid rgba(234, 227, 210, 0.1);
  margin-top: 22px;
  padding-top: 16px;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--ink-dim);
  max-width: 400px;
}

/* ── اسلایدر: حلقهٔ فوکوس و ناحیهٔ لمس ───────────────────────────────── */
/*
  ناحیهٔ لمس روی موبایل باید دست‌کم ۴۴ پیکسل باشد؛ ارتفاعِ خودِ ورودی
  همین کار را می‌کند بی‌آن‌که شیارِ نازک چاق شود.
*/
@media (max-width: 720px) {
  .bmi-range {
    height: 44px !important;
  }
}

/*
  عقربه دیگر ترنزیشنِ CSS ندارد.
  دلیلش: هر رویدادِ input یک ترنزیشنِ ۰٫۵۵ ثانیه‌ای را از نو آغاز می‌کرد و
  موقعِ کشیدنِ سریع، ده‌ها بار در ثانیه. اندازه‌گیری روی کشیدنِ واقعیِ ماوس
  نشان داد زاویه بینِ دو فریم تا ۱۶۳ درجه می‌پرد؛ نتیجه‌اش شلاق‌خوردنِ عقربه
  بود. حالا bmi-calc.js با requestAnimationFrame آن را میرا می‌چرخاند و
  همیشه از موقعیتِ *فعلی* به سمتِ هدف می‌رود، نه از نو.
*/
#bmiNeedle {
  transition: none !important;
}

/* ── حرکت و شفافیت: احترام به تنظیماتِ کاربر ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #bmiNeedle {
    transition: none !important;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*
  بعضی کاربران شفافیت را خاموش می‌کنند (سرگیجه، کم‌بینایی). آن‌وقت شیشه
  باید به سطحِ توپُر تبدیل شود، نه این‌که متن روی پس‌زمینهٔ شلوغ بماند.
*/
@media (prefers-reduced-transparency: reduce) {
  .g,
  .g-sm,
  .g-nav {
    background: #0d1f19 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body::after {
    display: none;
  }
}

/* پس‌زمینهٔ پشتِ شیشه را در چاپ لازم نداریم */
@media print {
  body::before,
  body::after {
    display: none;
  }
}