/* =========================================================================
   DOCK — نوارِ ناوبریِ شناورِ بالای صفحه
   -------------------------------------------------------------------------
   جای سربرگِ قبلی را گرفته: یک قرصِ شیشه‌ایِ سرمه‌ای که برند، پنج آیکونِ
   ناوبری و دکمه‌ی «استعلام قیمت» را یکجا دارد. رنگ‌ها همه از توکن‌های سایت
   می‌آیند — سرمه‌ای برای بدنه، طلایی برای حالت فعال.

   چراغِ حالتِ فعال سه لایه است:
     1. LED    — میله‌ی کوچکِ طلایی روی لبه‌ی بالا
     2. beam   — مخروطِ نوری که از LED به پایین باز می‌شود و آیکون را
                 روشن می‌کند
     3. glow   — هاله‌ی نرمِ دورِ LED، با کمی شعله در لحظه‌ی فرود

   JS فقط جای‌گذاری را انجام می‌دهد (transform و width از اندازه‌ی واقعیِ
   آیتم)؛ رنگ، هاله و شکلِ مخروط اینجاست.
   ========================================================================= */

.dock {
  /* ------------------------------------------------- ابعاد */
  --dock-h: 64px;
  --dock-top: 14px;         /* فاصله از بالای صفحه */
  --dock-icon: 20px;
  --dock-item: 62px;        /* پهنای هر آیتمِ ناوبری */
  --dock-led-w: 0.52;       /* پهنای چراغ نسبت به آیتم */
  --dock-led-h: 5px;

  /* ------------------------------------------------- رنگ — از توکن‌ها */
  --dock-lit: var(--accent-400);
  --dock-core: var(--accent-500);
  --dock-flare: 0;

  /* مدتِ حرکتِ چراغ؛ JS همین را می‌خواند */
  --dock-move: 560ms;

  position: fixed;
  z-index: var(--z-header);
  top: max(var(--dock-top), env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translate(-50%, 0);

  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  height: var(--dock-h);
  padding-inline: 10px 18px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;

  /* افکت گلس قوی و بسیار شفاف — رنگ پایدار در تمام اسکرول */
  background:
    linear-gradient(180deg, rgba(17, 34, 48, 0.55), rgba(7, 16, 25, 0.70));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35);

  transition:
    transform 520ms var(--ease-out),
    opacity 380ms var(--ease-out),
    visibility 0s linear 0s;
}

/* لبه‌ی طلاییِ بسیار ظریف */
.dock::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(240, 163, 46, 0.14);
  pointer-events: none;
  z-index: 5;
}

/* پنهان — روی صحنه‌ی خطوطِ طلایی (Stage تصمیم می‌گیرد).
   به‌جای پریدن، به بالا می‌لغزد و محو می‌شود؛ visibility با تأخیر خاموش
   می‌شود تا پس از پایانِ حرکت هم قابل Tab نماند. */
.dock.is-hidden {
  transform: translate(-50%, calc(-100% - var(--dock-top) - 8px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 520ms var(--ease-out),
    opacity 300ms var(--ease-out),
    visibility 0s linear 520ms;
}

/* ------------------------------------------------------------ برند */
.dock__brand {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding-inline-start: 8px;
}

.brand__logo {
  display: block;
  object-fit: contain;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: transform 0.3s var(--ease-out);
}

.dock__brand:hover .brand__logo {
  transform: scale(1.15);
}

.dock__brand .brand__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------ آیتم‌ها */
.dock__list {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  margin: 0 auto;        /* وسطِ نوار */
  padding: 0;
  list-style: none;
}

@media (min-width: 861px) {
  .dock__list {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.dock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: var(--dock-item);
  height: 100%;
  color: var(--text-muted);
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.dock__item svg {
  width: var(--dock-icon);
  height: var(--dock-icon);
  flex-shrink: 0;
  transition: filter var(--dur) var(--ease-out);
}

.dock__label {
  font-family: var(--font-fa);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease-out);
  white-space: nowrap;
}

.dock__item:hover {
  color: var(--accent-bright);
}

.dock__item:hover .dock__label {
  opacity: 1;
}

.dock__item:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: -8px;
  border-radius: 999px;
}

.dock__item[aria-current='page'] {
  color: var(--dock-lit);
  transform: translateY(1px);
}

.dock__item[aria-current='page'] .dock__label {
  opacity: 1;
}

.dock__item[aria-current='page'] svg {
  filter:
    drop-shadow(0 0 5px rgba(240, 163, 46, 0.7))
    drop-shadow(0 0 12px rgba(240, 163, 46, 0.28));
}

/* ================================================== چراغِ حالتِ فعال */
.dock__led {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  height: var(--dock-led-h);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-300), var(--dock-core));
  box-shadow:
    0 0 calc(8px + var(--dock-flare) * 6px) rgba(255, 185, 76, 0.95),
    0 0 calc(20px + var(--dock-flare) * 14px) rgba(240, 163, 46, 0.5);
  transition: box-shadow 240ms var(--ease-out);
  pointer-events: none;
}

.dock__beam {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  clip-path: polygon(28% 0%, 72% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(
    180deg,
    rgba(240, 163, 46, calc(0.26 + var(--dock-flare) * 0.12)),
    rgba(240, 163, 46, 0.07) 55%,
    rgba(240, 163, 46, 0) 92%
  );
  filter: blur(5px);
  transition: background 240ms var(--ease-out);
  pointer-events: none;
}

.dock:not(.is-ready) .dock__led,
.dock:not(.is-ready) .dock__beam {
  opacity: 0;
}

/* ------------------------------------------------------------ واکنش‌گرا */
@media (max-width: 1000px) {
  .dock {
    --dock-h: 58px;
    --dock-item: 52px;
    --dock-icon: 19px;
  }

  .dock__brand .brand__tag {
    display: none;
  }

  .dock__label {
    font-size: 0.55rem;
  }
}

/* تبلت (<= 860px): متن برند پنهان می‌شود تا ناوبری بدون بریدگی در مرکز قرار گیرد */
@media (max-width: 860px) {
  .dock {
    --dock-h: 54px;
    --dock-item: 50px;
    --dock-icon: 19px;
    padding-inline: 8px 14px;
  }

  .dock__brand {
    padding-inline-start: 4px;
    flex-shrink: 0;
  }

  .dock__brand .brand__text {
    display: none;
  }

  .dock__list {
    position: relative;
    left: auto;
    transform: none;
    margin: 0 auto;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* موبایل: برند فقط نشان، آیتم‌ها سهمِ مساوی و بدون فشردگی */
@media (max-width: 640px) {
  .dock {
    --dock-h: 52px;
    --dock-top: max(8px, env(safe-area-inset-top, 0px));
    --dock-icon: 19px;
    gap: 4px;
    width: min(calc(100% - 16px), 540px);
    padding-inline: 6px 8px;
    box-sizing: border-box;
  }

  .dock__brand {
    padding-inline-start: 4px;
    flex-shrink: 0;
  }

  .dock__brand .brand__text {
    display: none;
  }

  /* در موبایل برچسب‌های متنی مخفی می‌شوند تا آیکون‌ها بدون فشردگی و تمیز قرار گیرند */
  .dock__label {
    display: none;
  }

  .dock__list {
    flex: 1 1 auto;
    margin: 0;
    display: flex;
    justify-content: space-around;
  }

  .dock__list > li {
    flex: 1 1 0;
    min-width: 0;
  }

  .dock__item {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 6px 0;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 380px) {
  .dock {
    --dock-h: 48px;
    --dock-icon: 18px;
    width: calc(100% - 12px);
    padding-inline: 4px 6px;
    gap: 2px;
  }

  .dock__brand .brand__logo {
    width: 28px;
    height: 28px;
  }
}

/* ------------------------------------------------------- کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  .dock,
  .dock.is-hidden {
    transition: opacity 1ms, visibility 0s;
  }

  .dock__item {
    transition: color var(--dur) var(--ease-out);
    transform: none;
  }
}