/* ============================================================
   TravlFun · map.css · v1.0 · © Luxa Grid LLC
   Composition for map.html (mp- prefix). Loads after search.css
   and the design system.
   ============================================================ */

body { margin: 0; }

.mp-main { max-width: 1240px; margin-inline: auto; padding: 18px 24px 60px; display: flex; flex-direction: column; gap: 14px; }
.mp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-head h1 { font: var(--tf-text-h3); margin: 0; flex: 1; }
.mp-head h1 span { color: var(--tf-ink-3); font-weight: 500; }

/* Layer chips */
.mp-layers { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-chip { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--tf-font-body);
  border: 1.5px solid var(--tf-border-strong); background: var(--tf-surface); color: var(--tf-ink-2);
  border-radius: var(--tf-r-pill); padding: 7px 13px; cursor: pointer; }
.mp-chip .swatch { width: 10px; height: 10px; border-radius: 50%; }
.mp-chip.is-on { border-color: currentColor; }
.mp-chip--hotel.is-on { color: var(--tf-color-primary); background: var(--tf-color-primary-soft); }
.mp-chip--restaurant.is-on { color: var(--tf-color-love); background: var(--tf-color-love-soft); }
.mp-chip--attraction.is-on { color: var(--tf-color-secondary-active); background: var(--tf-color-secondary-soft); }
.mp-chip--parking.is-on { color: var(--tf-ink); background: var(--tf-surface-2); }

/* Map stage */
.mp-stage { position: relative; border-radius: var(--tf-r-card); overflow: hidden;
  border: 1px solid var(--tf-border); box-shadow: var(--tf-shadow-2); background: #EAF4EA;
  height: min(72vh, 640px); touch-action: none; }
.mp-stage svg.world { width: 100%; height: 100%; display: block; cursor: grab; }
.mp-stage svg.world:active { cursor: grabbing; }

/* Pins */
.mp-pin { cursor: pointer; }
.mp-pin circle.bg { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 2px 3px rgba(18,48,74,.35)); }
.mp-pin.is-dim { opacity: .35; }
.mp-pin.is-sel circle.bg { stroke: var(--tf-raw-yellow-500); stroke-width: 3.5; }
.mp-pin text { font: 700 11px var(--tf-font-display); fill: #fff; text-anchor: middle; pointer-events: none; }
.mp-pin use { pointer-events: none; }

/* Zoom controls */
.mp-zoom { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.mp-zoom button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--tf-border);
  background: var(--tf-surface); color: var(--tf-ink); font: 700 17px var(--tf-font-body);
  cursor: pointer; box-shadow: var(--tf-shadow-1); }
.mp-zoom button:hover { color: var(--tf-color-primary); }

/* Attribution-style note */
.mp-note { position: absolute; left: 12px; bottom: 10px; font: 500 10.5px var(--tf-font-body);
  color: var(--tf-ink-2); background: color-mix(in srgb, var(--tf-surface) 85%, transparent);
  border-radius: 8px; padding: 3px 8px; pointer-events: none; }

/* POI popover */
.mp-pop { position: absolute; z-index: 30; width: 250px; background: var(--tf-surface);
  border: 1px solid var(--tf-border); border-radius: 16px; box-shadow: var(--tf-shadow-3); padding: 14px 16px;
  display: none; flex-direction: column; gap: 6px; }
.mp-pop.is-open { display: flex; }
.mp-pop b { font: 600 14.5px var(--tf-font-display); }
.mp-pop .meta { font: var(--tf-text-body-s); color: var(--tf-ink-2); }
.mp-pop .kind { font: 600 10.5px var(--tf-font-body); letter-spacing: .1em; text-transform: uppercase; }
.mp-pop__btns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mp-pop__close { position: absolute; top: 8px; right: 8px; border: 0; background: none;
  color: var(--tf-ink-3); font-weight: 700; cursor: pointer; padding: 4px; }
@media (max-width: 700px) {
  .mp-pop { position: fixed; left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; z-index: 60; }
}

/* Route panel */
.mp-route { position: absolute; left: 14px; top: 14px; z-index: 25; width: 250px;
  background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: 16px;
  box-shadow: var(--tf-shadow-2); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mp-route h2 { font: var(--tf-text-h4); font-size: 14px; margin: 0; display: flex; gap: 8px; align-items: center; }
.mp-route h2 svg { width: 15px; height: 15px; color: var(--tf-color-primary); }
.mp-route .ab { font: var(--tf-text-body-s); color: var(--tf-ink-2); display: flex; flex-direction: column; gap: 3px; }
.mp-route .ab b { color: var(--tf-ink); font-weight: 600; }
.mp-route .stats { font: 600 15px var(--tf-font-display); font-variant-numeric: tabular-nums; }
.mp-route .stats small { font: 500 12px var(--tf-font-body); color: var(--tf-ink-3); }
.mp-route .note { font: var(--tf-text-body-s); color: var(--tf-ink-2); font-size: 12px; }
.mp-mode { display: flex; background: var(--tf-surface-2); border-radius: var(--tf-r-pill); padding: 3px; }
.mp-mode button { flex: 1; font: 600 12px var(--tf-font-display); color: var(--tf-ink-3);
  border: 0; background: none; cursor: pointer; border-radius: var(--tf-r-pill); padding: 7px 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mp-mode button svg { width: 13px; height: 13px; }
.mp-mode button.is-on { background: var(--tf-surface); color: var(--tf-ink); box-shadow: var(--tf-shadow-1); }
@media (max-width: 700px) {
  .mp-route { left: 10px; right: 10px; width: auto; top: 10px; padding: 10px 12px; }
  .mp-zoom { top: auto; bottom: 46px; }
}

/* Route line */
.mp-routeline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mp-routeline.casing { stroke: #fff; stroke-width: 9; opacity: .85; }
.mp-routeline.line { stroke: var(--tf-raw-blue-500); stroke-width: 5; stroke-dasharray: 12 10; animation: mp-dash 1.2s linear infinite; }
.mp-routeline.line.walk { stroke: var(--tf-raw-teal-500); stroke-dasharray: 2 11; }
@keyframes mp-dash { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .mp-routeline.line { animation: none; } }

.mp-hint { font: var(--tf-text-body-s); color: var(--tf-ink-3); }