/* Vacation 3D Map -- everything scoped to the block container .vacation3d-map */
.vacation3d-map { position: relative; width: 100%; min-height: 240px; background: #0b1a2b; overflow: hidden; border-radius: 6px;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
.vacation3d-map .v3d-canvas { position: absolute; inset: 0; }

/* play / pause / stop */
.vacation3d-map .v3d-player { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; }
.vacation3d-map .v3d-player button {
  width: 40px; height: 40px; border: 0; border-radius: 6px; background: #fff; color: #222; cursor: pointer; margin: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.1); display: grid; place-items: center; padding: 0; line-height: 0;
}
.vacation3d-map .v3d-player button:hover { background: #f2f2f2; }
.vacation3d-map .v3d-player button svg { width: 20px; height: 20px; fill: #222; }
.vacation3d-map .v3d-player button.active { background: #ffb020; }
.vacation3d-map .v3d-player[data-state="idle"]    .v3d-pause, .vacation3d-map .v3d-player[data-state="idle"]    .v3d-stop,
.vacation3d-map .v3d-player[data-state="idle"]    .v3d-resume, .vacation3d-map .v3d-player[data-state="idle"]   .v3d-ff,
.vacation3d-map .v3d-player[data-state="idle"]    .v3d-next { display: none; }
.vacation3d-map .v3d-player[data-state="playing"] .v3d-play,  .vacation3d-map .v3d-player[data-state="playing"] .v3d-resume { display: none; }
.vacation3d-map .v3d-player[data-state="paused"]  .v3d-play,  .vacation3d-map .v3d-player[data-state="paused"]  .v3d-pause { display: none; }
.vacation3d-map .v3d-hud { position: absolute; top: 10px; left: 198px; z-index: 3; background: rgba(255,255,255,.92); color: #222; border-radius: 6px;
  padding: 0 12px; height: 40px; display: flex; align-items: center; font-size: 13px; font-weight: 600; box-shadow: 0 0 0 2px rgba(0,0,0,.1); white-space: nowrap; }
.vacation3d-map .v3d-hud[hidden] { display: none; }

/* elevation profile */
.vacation3d-map .v3d-profile { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 110px; z-index: 2;
  background: rgba(18, 26, 38, .85); border-radius: 10px; backdrop-filter: blur(6px); }
.vacation3d-map .v3d-profile[hidden] { display: none; }
.vacation3d-map .v3d-profile canvas { width: 100%; height: 100%; display: block; }
.vacation3d-map .maplibregl-ctrl button.v3d-fullscreen svg { width: 18px; height: 18px; margin: 5px; fill: none; stroke: #333; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vacation3d-map .maplibregl-ctrl button.v3d-profile-toggle svg { width: 20px; height: 20px; margin: 4px; fill: none; stroke: #333; stroke-width: 2; stroke-linejoin: round; }
.vacation3d-map .maplibregl-ctrl button.v3d-profile-toggle.active { background: #d9e6f5; }

/* labels */
.vacation3d-map .v3d-poi { display: flex; flex-direction: column; align-items: center; pointer-events: none; transform: translateY(-50%); }
.vacation3d-map .v3d-poi .dot { width: 16px; height: 16px; border-radius: 50%; background: #ff3b1f; border: 2px solid #fff; box-shadow: 0 0 6px rgba(0,0,0,.6); }
.vacation3d-map .v3d-poi .lbl { margin-top: 2px; color: #ff3b1f; font-weight: 800; font-size: 20px; line-height: 1.1; white-space: nowrap;
  text-shadow: 0 0 4px #000, 0 0 8px #000, 1px 1px 0 #000; }
.vacation3d-map .v3d-poi--break .dot { width: 12px; height: 12px; background: #ffb020; }
.vacation3d-map .v3d-poi--break .lbl { font-size: 15px; color: #ffb020; }
.vacation3d-map .v3d-hiker { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #222; box-shadow: 0 0 10px rgba(0,0,0,.8); }
.vacation3d-map .maplibregl-popup-content { color: #222; font-size: 12px; }

.vacation3d-map .v3d-loading { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(255, 176, 32, .95); color: #222; font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.4); white-space: nowrap; }
.vacation3d-map .v3d-loading[hidden] { display: none; }
.vacation3d-map .v3d-loading a { color: #222; text-decoration: underline; }

/* fullscreen: native (:fullscreen) and the CSS fallback (.v3d-fs) */
.vacation3d-map:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.vacation3d-map.v3d-fs { position: fixed !important; inset: 0; width: 100vw; height: 100vh !important; max-width: none; margin: 0;
  z-index: 2147483000; border-radius: 0; }
html.v3d-fs-page, html.v3d-fs-page body { overflow: hidden !important; }

/* small screens: HUD under the buttons, smaller labels */
@media (max-width: 600px) {
  .vacation3d-map .v3d-hud { left: 10px; top: 58px; height: 32px; font-size: 12px; }
  .vacation3d-map .v3d-poi .lbl { font-size: 15px; }
  .vacation3d-map .v3d-profile { height: 90px; }
}

/* ?v3ddebug log panel */
.vacation3d-map .v3d-debug { position: absolute; left: 0; right: 0; bottom: 0; max-height: 45%; overflow: auto; z-index: 5;
  background: rgba(0,0,0,.8); color: #9f9; font: 10px/1.35 Menlo, Consolas, monospace; padding: 6px 8px; white-space: pre-wrap; word-break: break-all; }