/* ------------------------------------------------------------------ *
 *  Vendégtérkép (public/js/vendegterkep.js). Csak azon a lapon töltődik
 *  be, amelyiken a térkép van. A színek a weboldal saját változói, így a
 *  sötét téma magától működik; a víz és a „rendelő” színe külön.
 * ------------------------------------------------------------------ */
.vt {
  --vt-viz: #9CC3D8;
  --vt-viz-vonal: #6FA3C0;
  --vt-ut: #D8A25A;
  --vt-otthon: #B5432E;
  --vt-pont: var(--accent);
  margin: 1.8em 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vt {
    --vt-viz: #2B4E61;
    --vt-viz-vonal: #3F6F88;
    --vt-ut: #8E6A3A;
    --vt-otthon: #FF8A70;
  }
}
:root[data-theme="dark"] .vt {
  --vt-viz: #2B4E61;
  --vt-viz-vonal: #3F6F88;
  --vt-ut: #8E6A3A;
  --vt-otthon: #FF8A70;
}

/* A .prose a közvetlen gyerekek közé térközt tesz – a térképen belül nem kell. */
.prose .vt .vt-doboz > *,
.prose .vt .vt-keret > * { margin-top: 0; }

.vt-doboz {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius, 16px);
  background: var(--raised);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.vt-keret {
  position: relative;
  height: min(72vh, 560px);
  min-height: 340px;
  touch-action: manipulation;
  outline: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vt-keret:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.vt-keret.vt-huz { cursor: grabbing; }
.vt-svg { display: block; width: 100%; height: 100%; }
.vt-betolt { margin: 0; padding: 40px 20px; text-align: center; color: var(--soft); }
.vt-doboz noscript img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }

/* Háttér */
.vt-kulfold { fill: var(--bg); }
.vt-orszag { fill: var(--raised); }
.vt-bp { fill: var(--line); opacity: .45; }
.vt-megye { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vt-hatar { fill: none; stroke: var(--slate); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .8; }
.vt-to { fill: var(--vt-viz); stroke: var(--vt-viz-vonal); stroke-width: .8; vector-effect: non-scaling-stroke; }
.vt-folyo { fill: none; stroke: var(--vt-viz-vonal); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.vt-ut { fill: none; stroke: var(--vt-ut); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: .75; }

/* Távolság-körök, a 20–30 km-es sáv */
.vt-sav { fill: var(--accent); opacity: .09; }
.vt-gyuru { fill: none; stroke: var(--soft); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }
.vt-gyuru-sav { stroke: var(--accent); opacity: .8; stroke-width: 1.4; }

/* Vendégpontok */
.vt-pont {
  fill: var(--vt-pont); fill-opacity: .5;
  stroke: var(--vt-pont); stroke-width: 1.2; vector-effect: non-scaling-stroke;
}
.vt-kicsi { fill: var(--vt-pont); fill-opacity: .55; stroke: var(--raised); stroke-width: .8; vector-effect: non-scaling-stroke; }
.vt-pont-otthon { fill: var(--vt-otthon); fill-opacity: .9; stroke: var(--raised); stroke-width: 2.5; }
.vt-pont-kijelolt { stroke: var(--ink); stroke-width: 2.5; fill-opacity: .75; }

/* Feliratok – a betűméretet a szkript állítja, képpontban állandóra */
.vt-feliratok { pointer-events: none; }
.vt-fel {
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--raised); stroke-linejoin: round;
}
.vt-fel-db { font-weight: 700; fill: var(--accent); }
.vt-fel-otthon { font-weight: 700; }
.vt-fel-otthon .vt-fel-db { fill: var(--vt-otthon); }
.vt-fel-kicsi { fill: var(--soft); }
.vt-fel-varos { fill: var(--soft); text-anchor: middle; font-style: italic; }
.vt-fel-gyuru { fill: var(--soft); text-anchor: middle; font-weight: 600; }

/* Gombok */
.vt-gombok {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.vt-gomb {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--raised); color: var(--ink);
  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.vt-gomb svg { width: 22px; height: 22px; }
.vt-gomb:hover { border-color: var(--accent); color: var(--accent); }
.vt-gomb:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.vt-gomb:disabled { opacity: .4; cursor: default; }
.vt-gomb-plusz { border-radius: 12px 12px 4px 4px; }
.vt-gomb-minusz { border-radius: 4px 4px 12px 12px; margin-top: -5px; margin-bottom: 6px; }

.vt-tipp {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 82%;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(17, 26, 19, .82); color: #fff;
  font-size: 16px; line-height: 1.35; text-align: center;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.vt-tipp-latszik { opacity: 1; }

.vt-info {
  border-top: 1px solid var(--line);
  padding: 11px 16px;
  min-height: 3.3em;
  font-size: 16.5px; line-height: 1.4;
  color: var(--soft);
  background: var(--raised);
}
.vt-info strong { color: var(--ink); }

/* Teljes képernyő */
html.vt-zarolva, html.vt-zarolva body { overflow: hidden; }
.vt-doboz.vt-teljes {
  position: fixed; inset: 0; z-index: 2000;
  border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column;
}
.vt-teljes .vt-keret { flex: 1; height: auto; min-height: 0; touch-action: none; }
.vt-teljes .vt-info { padding-bottom: max(11px, env(safe-area-inset-bottom)); }
.vt-teljes .vt-gombok { top: max(10px, env(safe-area-inset-top)); }

/* Felirat és táblázat a térkép alatt */
.vt figcaption.vt-felirat { text-align: left; font-size: 16px; line-height: 1.5; margin-top: 12px; }
.vt-jelmagyarazat { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; padding: 0; list-style: none; }
.prose .vt-jelmagyarazat li + li { margin-top: 0; }
.vt-jel { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.vt-tablazat table { font-size: 16.5px; }
.vt-tablazat td:nth-child(2), .vt-tablazat td:nth-child(3),
.vt-tablazat th:nth-child(2), .vt-tablazat th:nth-child(3) { text-align: right; white-space: nowrap; }
.vt-tablazat .vt-tabla-gorget { overflow-x: auto; }
.vt-nevsor { font-size: 16px; }
.prose .vt-nevsor li + li { margin-top: .5em; }

@media (max-width: 480px) {
  .vt-keret { height: min(68vh, 520px); }
  .vt-gomb { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-tipp { transition: none; }
}