#map-wrapper {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

/* موبایل و تبلت: نقشه از چپ و راست ۴px با لبه‌ی صفحه فاصله دارد (کنترل‌های
   روی نقشه هم با آن جابه‌جا می‌شوند) */
@media (max-width: 1024px) {
  #map-wrapper {
    width: calc(100% - 8px);
  }
}

/* جدِ positioned مستقل برای نقشه + overlayهای ثابتش (پایین‌تر توضیح داده
   شده) — عمداً از #map-wrapper جداست. */
#map-stage {
  position: relative;
}

#map {
  width: 100%;
  height: 500px;
  border-radius: 12px;
  margin-top: 4px;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border);
}

/* نشانگر انتخاب لوکیشن (کلیک روی نقشه) — کاملاً رایگان، بدون نیاز به API key.
   خودِ رنگ/شکل پین در SVG داخلی map.js ساخته می‌شود (تابع pinSvg).
   نکته: هیچ transition/transform روی خودِ این عنصر ریشه نگذارید — MapLibre
   موقعیت مارکر را با transform inline روی همین عنصر کنترل می‌کند و هر
   transform دیگری در CSS با آن تداخل و در drag گلیچ ایجاد می‌کند. */
.map-location-marker {
  width: 34px;
  height: 44px;
  cursor: grab;
}

.map-location-marker:active {
  cursor: grabbing;
}

.map-location-marker svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* دسکتاپ: پین‌ها ۲۰٪ کوچک‌تر (در موبایل همان اندازه‌ی لمسی قبلی می‌ماند).
   فقط width/height عوض می‌شود، نه transform — رجوع به نکته‌ی بالا. */
@media (min-width: 701px) {
  .map-location-marker {
    width: 27.2px;
    height: 35.2px;
  }
}

/* موقعیت (bottom/right) این دو عنصر همیشه ثابت است — نه در هیچ media query
   جابه‌جا می‌شوند، نه هیچ‌جای دیگری غیر از همین گوشه‌ی داخل باکس نقشه؛ فقط
   اندازه‌شان با clamp() نسبت به عرض صفحه ریسپانسیو کوچک/بزرگ می‌شود. */
#map-location-readout {
  display: none;
  position: absolute;
  bottom: 14px;
  right: 60px;
  max-width: calc(100% - 80px);
  z-index: 5;
  padding: clamp(6px, 1.8vw, 8px) clamp(10px, 3vw, 14px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: clamp(10px, 2.6vw, 13px);
  color: #333;
  direction: rtl;
  align-items: center;
  gap: 6px;
  /* padding داخل max-width حساب شود؛ وگرنه باکس از لبه‌ی چپ صفحه بیرون می‌زد */
  box-sizing: border-box;
}

/* موبایل: متن یک پوینت ریزتر و عرض باکس ۲۰٪ کوتاه‌تر */
@media (max-width: 700px) {
  #map-location-readout {
    max-width: calc((100% - 80px) * 0.8);
    font-size: clamp(9px, calc(2.6vw - 1px), 12px);
  }
}

/* id selector از [hidden] مرورگر قوی‌تر است؛ بدون این، دکمه‌های پخش و
   ناوبری حتی قبل از داشتن مسیر هم دیده می‌شدند و جا می‌گرفتند */
#map-play-route-btn[hidden],
#map-start-nav-btn[hidden] {
  display: none;
}

/* دکمه‌ی پخش صوتی مسیر — فقط وقتی instructionsFa واقعی داریم دیده می‌شود
   (با hidden در HTML)؛ هیچ‌وقت خودکار پخش نمی‌شود، فقط با کلیک همین. */
#map-play-route-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f2edf8;
  cursor: pointer;
  flex-shrink: 0;
}

#map-play-route-btn:hover {
  background: #e5dbf2;
}

/* دکمه‌ی شروع ناوبری زنده — دقیقاً هم‌سبک دکمه‌ی پخش صوتی بالا (دایره‌ی
   کوچک، پس‌زمینه‌ی روشن)، کنارش در همان ردیف readout. */
#map-start-nav-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f2edf8;
  cursor: pointer;
  flex-shrink: 0;
}

#map-start-nav-btn:hover {
  background: #e5dbf2;
}

/* بنر ناوبری زنده — نوار کوچک بالای باکس نقشه، فقط حین ناوبری فعال دیده
   می‌شود. بنفش سلطنتی با آلفای ۰.۵ (شیشه‌ای) + backdrop-filter تا هم‌سبک
   افکت شیشه‌ای پنل‌های پلن باشد. وسط‌چین و width:max-content با
   max-width:50vw تا هیچ‌وقت (نه موبایل نه دسکتاپ) از نصف عرض مرورگر
   بیشتر نشود — عمداً به عرض باکس نقشه محدود نشده چون آن باکس خودش
   می‌تواند تا 960px باشد. */
/* نکته‌ی مهم: چون این selector آی‌دی است، specificity‌اش از قانون پیش‌فرض
   مرورگر `[hidden]{display:none}` (attribute selector) بیشتر است — اگر
   display اینجا بدون قید تنظیم شود، حتی وقتی attribute «hidden» ست است هم
   بنر واقعاً رندر می‌شود (خالی ولی روی صفحه). با `:not([hidden])` این
   قانون فقط وقتی hidden نیست اعمال می‌شود. */
#map-nav-banner:not([hidden]) {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: max-content;
  max-width: 50vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(109, 58, 224, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  padding: clamp(4px, 1.2vw, 6px) clamp(6px, 2vw, 10px);
}

#map-nav-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

#map-nav-texts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#map-nav-distance {
  font-weight: 700;
  font-size: clamp(10px, 2.2vw, 12px);
}

#map-nav-instruction {
  font-size: clamp(9px, 1.8vw, 10px);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#map-nav-stop-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}

#map-nav-stop-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* نقطه‌ی آبی زنده‌ی موقعیت کاربر حین ناوبری — جایگزین پین A. حلقه‌ی
   پالس‌دار دورش با یک keyframe ساده (scale+opacity) تکرار می‌شود، مشابه
   نشانگر «موقعیت من» در گوگل‌مپ/سایر اپ‌های ناوبری. هیچ transform دیگری
   روی خودِ ریشه‌ی عنصر گذاشته نمی‌شود (همان دلیل .map-location-marker
   بالا — MapLibre خودش transform موقعیت را کنترل می‌کند). */
.live-location-dot {
  width: 22px;
  height: 22px;
  position: relative;
}

.live-location-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(66, 133, 244, 0.35);
  animation: live-dot-pulse 1.8s ease-out infinite;
}

.live-location-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4285f4;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@keyframes live-dot-pulse {
  0% { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* دکمه‌ی «موقعیت من» — جایگزین آیکون پیش‌فرض MapLibre، گوشه‌ی پایین‌راست
   باکس نقشه (#map-layer-switch بالای همین ستون است، تداخلی ندارند). */
#map-locate-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 6;
  width: clamp(30px, 8vw, 40px);
  height: clamp(30px, 8vw, 40px);
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#map-locate-btn svg {
  width: clamp(15px, 4vw, 20px);
  height: clamp(15px, 4vw, 20px);
}

#map-locate-btn:hover {
  background: #f7f5fa;
}

#map-locate-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* متن راهنما روی نقشه — رنگ بنفش سلطنتی، غیرقابل‌کلیک تا مزاحم نقشه نشود */
#map-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 5;
  transition: opacity 0.15s ease, scale 0.3s ease;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  color: #6d3ae0;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* ضربان قلب فقط در زوم اولیه — با اولین تغییر زوم، map.js کلاس is-beating
   را برمی‌دارد. وسط‌چین با ویژگی مستقل «translate» و تپش با «scale» است؛
   مرورگر translate را بعد از scale اعمال می‌کند، پس تپش دور مرکز باکس است.
   (با transform:translate مرکز تپش به گوشه‌ی پایین-راست می‌افتاد.) تپش دوتایی (لاب‌داب)
   + حلقه‌ی نور بنفش لوگو که پخش و محو می‌شود. */
#map-hint.is-beating {
  animation: hint-heartbeat 1.6s ease-in-out infinite;
}

@keyframes hint-heartbeat {
  0% {
    scale: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(153, 101, 253, 0.55);
  }
  14% { scale: 1.12; }
  28% { scale: 1; }
  42% { scale: 1.09; }
  70% {
    scale: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 16px rgba(153, 101, 253, 0);
  }
  100% {
    scale: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(153, 101, 253, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #map-hint.is-beating { animation: none; }
}

/* هم‌راستا با breakpoint موبایل/تبلت بقیه‌ی پروژه (مثلاً .feature-box در
   components.css). عرض ثابت 80% قبلی باعث می‌شد باکس بزرگ‌تر از خودِ متن
   باشد (حاشیه‌ی خالی زیاد)؛ حالا با width:max-content دقیقاً به اندازه‌ی
   متن جمع می‌شود، فقط با max-width به‌عنوان سقف ایمنی (۱۰ پیکسل حاشیه از
   هر طرفِ باکس نقشه) تا در عریض‌ترین حالت هم به لبه نچسبد. */
@media (max-width: 860px) {
  #map-hint {
    width: max-content;
    max-width: calc(100% - 20px);
    font-size: 10px;
  }
}

/* انتخاب نوع پیمایش مسیر (خودرو/دوچرخه/پیاده) — سمت چپ باکس نقشه، آینه‌ی
   #map-layer-switch که سمت راست است. برخلاف پنل‌های پلن، این‌ها کنترل عملکردی‌اند
   (نه تبلیغاتی) پس افکت شیشه‌ای/برجسته ندارند؛ فقط کارت‌های ساده‌ی
   سفید/بنفش با وضوح انتخاب بالا. */
#map-profile-switch {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-btn,
.layer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(109, 58, 224, 0.25);
  border-radius: 999px;
  /* ۷۰٪ شفاف (آلفای ۰.۳) + بلور برای افکت شیشه‌ای — فقط حالت غیرفعال؛
     حالت .active پایین‌تر با specificity بالاتر (دو کلاس) این را override
     می‌کند و دست‌نخورده می‌ماند (بنفش/سفید توپر). */
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--brand-deep);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(74, 31, 150, 0.18);
  cursor: pointer;
}

.profile-btn i,
.layer-btn i {
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.profile-btn.active {
  background: #6d3ae0;
  border-color: #6d3ae0;
  color: #fff;
}

/* لایه‌های حمل‌ونقل (مترو/طرح ترافیک/زوج‌وفرد) — سمت راست باکس نقشه،
   آینه‌ی #map-profile-switch؛ همان ظاهر شیشه‌ای. حالت روشن با رنگ خودِ
   لایه روی نقشه (style.json در pmtiles-server) تا دکمه راهنمای رنگ هم باشد. */
#map-layer-switch {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.layer-btn[aria-pressed="true"] { color: #fff; }
.layer-btn[data-layer="metro"][aria-pressed="true"] { background: #d7263d; border-color: #d7263d; }
.layer-btn[data-layer="traffic"][aria-pressed="true"] { background: #56565c; border-color: #56565c; }
.layer-btn[data-layer="odd_even"][aria-pressed="true"] { background: #7c8493; border-color: #7c8493; }

/* موبایل و تبلت: دکمه‌های نوع پیمایش شناور روی گوشه‌ی بالا-چپ نقشه و ۱۰٪
   کوچک‌تر. #map-wrapper جدِ positioned است و #map-stage اولین فرزندش،
   پس top/left آن دقیقاً گوشه‌ی بالا-چپ نقشه است؛ absolute یعنی به ارتفاع
   #map-stage اضافه نمی‌شود و لنگر overlayهای پایین نقشه جابه‌جا نمی‌شود.
   ستونی (نه ردیفی) تا با بنر ناوبری وسط‌بالا تداخل نکند. */
/* موبایل: باکس ایستاده‌ی ۵۰۰px با نسبت ابعاد تقریباً مربعیِ محدوده‌ی داده‌ی
   ایران (ارتفاع/عرض مرکاتور ≈ ۰.۹۷) جور نبود؛ fitBounds (contain) بالا و
   پایین نقشه را خالی می‌گذاشت و نوار بی‌داده‌ی بالای نقشه مثل فاصله از
   هدر دیده می‌شد. با aspect-ratio ارتفاع دقیقاً به اندازه‌ی ایران می‌شود. */
@media (max-width: 700px) {
  #map {
    height: auto;
    aspect-ratio: 100 / 97;
  }
}

@media (max-width: 1024px) {
  #map-profile-switch {
    position: absolute;
    /* ۴px فاصله‌ی نقشه از هدر (margin-top #map) + ۱۶px = دقیقاً ۲۰px زیر هدر */
    top: 16px;
    left: 10px;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  #map-layer-switch {
    top: 16px;
    right: 10px;
    transform: none;
    gap: 5px;
  }

  .profile-btn,
  .layer-btn {
    gap: 5.4px;
    padding: 4.5px 9px;
    font-size: 9.9px;
  }

  .profile-btn i,
  .layer-btn i {
    font-size: 10.8px;
    width: 12.6px;
  }
}

/* ── موبایل (≤700px): ۷ دکمه → ۲ کنترل جمع‌وجور (الگوی Google/Apple Maps) ──
   ۱) نوع مسیر: یک کپسول شیشه‌ای افقی با ۴ آیکون بدون متن (بالا-چپ).
   ۲) لایه‌ها: یک دکمه‌ی گرد (بالا-راست) که منوی کوچک ۳ لایه را باز می‌کند؛
      نقطه‌ی رنگی روی دکمه یعنی حداقل یک لایه روشن است. */
#map-layer-toggle {
  display: none;
}

@media (max-width: 700px) {
  #map-profile-switch {
    /* ۱۰px بالاتر از تبلت تا روی نام دریای خزر/دریاچه‌ی ارومیه نیفتد */
    top: 6px;
    flex-direction: row;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid rgba(109, 58, 224, 0.18);
    box-shadow: 0 2px 10px rgba(74, 31, 150, 0.18);
  }

  #map-profile-switch .profile-btn {
    display: grid;
    place-items: center;
    width: 32px;
    /* ۴px کوتاه‌تر از قبل (۳۰ → ۲۶): باکس ۳۸ → ۳۴px؛ آیکون‌ها همان ۱۴px */
    height: 26px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background 0.2s ease, color 0.2s ease;
  }

  #map-profile-switch .profile-btn span {
    display: none;
  }

  #map-profile-switch .profile-btn i {
    width: auto;
    font-size: 14px;
  }

  #map-profile-switch .profile-btn.active {
    background: #6d3ae0;
    color: #fff;
  }

  #map-layer-toggle {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(109, 58, 224, 0.18);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 2px 10px rgba(74, 31, 150, 0.18);
    color: var(--brand-deep);
    font-size: 15px;
    cursor: pointer;
  }

  #map-layer-toggle[aria-expanded="true"] {
    background: #6d3ae0;
    color: #fff;
  }

  /* نقطه‌ی «لایه‌ی روشن» با گرادیان برند */
  #map-layer-toggle.has-active::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--grad);
    border: 1.5px solid #fff;
  }

  /* منوی لایه‌ها زیر دکمه، با انیمیشن کوتاه باز شدن */
  #map-layer-switch {
    top: 48px;
    right: 10px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(74, 31, 150, 0.2);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.18s;
  }

  #map-layer-switch:not(.is-open) {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.92) translateY(-4px);
    pointer-events: none;
  }

  #map-layer-switch .layer-btn {
    padding: 7px 12px;
    font-size: 11px;
    box-shadow: none;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  #map-layer-switch { transition: none; }
}

/* برچسب «رنگ انتخاب‌شده · رنگ دیگر» روی نقشه (js/map-theme-banner.js)؛ ۴٫۲ ثانیه
   بعد از انتخاب رنگ پنهان می‌شود. لمسش صفحه را به بنر رنگ‌ها برمی‌گرداند. */
.map-theme-pill {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(29, 19, 54, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-theme-pill.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.mtp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c1) 58%, var(--c2) 58%);
  box-shadow: 0 0 0 1.5px #fff;
}

.mtp-more {
  font-weight: 500;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .map-theme-pill { transition: none; }
}