/* =============================================================================
   vector_follow_map.css
   La Strada – Vector Follow Display Engine overlay
  v20260720_bottom_bar_left_anchor_v1
   Design: sötét espresso / arany / olasz trikolór
   ============================================================================= */

/* ── Root overlay ──────────────────────────────────────────────────────────── */
.vfm-root {
  position: fixed;
  inset: 0;
  z-index: 10000020;
  display: flex;
  flex-direction: column;
  background: #0e0b08;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.vfm-root[hidden],
.vfm-root.vfm-hidden { display: none !important; }
.vfm-root .vfm-hidden { display: none !important; }

/* ── Map canvas ─────────────────────────────────────────────────────────────── */
.vfm-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vfm-root button,
.vfm-menu-item {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vfm-back-btn,
.vfm-recenter-btn,
.vfm-zoom-btn,
.vfm-elev-btn,
.vfm-menu-close,
.vfm-menu-item {
  min-width: 48px;
  min-height: 48px;
  position: relative;
}

@media (pointer: coarse) {
  .vfm-back-btn::after,
  .vfm-recenter-btn::after,
  .vfm-zoom-btn::after,
  .vfm-elev-btn::after,
  .vfm-menu-close::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

.vfm-root button.vfm-pressing:not(.vfm-menu-item),
.vfm-root button:active:not(.vfm-menu-item) {
  transform: scale(0.94);
  filter: brightness(1.35);
}

/* ── Top bar ────────────────────────────────────────────────────────────────── */
.vfm-topbar {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(to bottom, rgba(14,11,8,0.93) 0%, transparent 100%);
  pointer-events: none;
}
.vfm-topbar > * { pointer-events: auto; }

.vfm-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,230,66,0.55);
  background: rgba(14,11,8,0.82);
  color: #F5E642;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.vfm-back-btn:active { background: rgba(245,230,66,0.18); }

.vfm-route-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #e8dbb0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.vfm-device-status {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(14,11,8,0.72);
  border: 1px solid rgba(245,230,66,0.25);
  border-radius: 999px;
  padding: 4px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.vfm-battery-icon {
  position: relative;
  width: 24px;
  height: 12px;
  border: 2px solid #41d96b;
  border-radius: 3px;
  box-sizing: border-box;
}

.vfm-battery-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 3px;
  width: 3px;
  height: 4px;
  background: #41d96b;
  border-radius: 0 2px 2px 0;
}

.vfm-battery-fill {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  max-width: calc(100% - 2px);
  background: #41d96b;
  border-radius: 1px;
}

.vfm-charge-icon {
  color: #F5E642;
  font-size: 13px;
  line-height: 1;
}

.vfm-battery-text {
  color: #41d96b;
  font-size: 10px;
  font-weight: 800;
}

.vfm-network-icon {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 18px;
  height: 14px;
}

.vfm-network-icon span {
  width: 3px;
  border-radius: 2px 2px 0 0;
  background: rgba(255,255,255,0.22);
}

.vfm-network-icon span:nth-child(1) { height: 4px; }
.vfm-network-icon span:nth-child(2) { height: 7px; }
.vfm-network-icon span:nth-child(3) { height: 10px; }
.vfm-network-icon span:nth-child(4) { height: 13px; }

.vfm-network-1 span:nth-child(-n+1),
.vfm-network-2 span:nth-child(-n+2),
.vfm-network-3 span:nth-child(-n+3),
.vfm-network-4 span:nth-child(-n+4) {
  background: #41d96b;
}

.vfm-network-0 span {
  background: #CE2B37;
}

.vfm-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  background: rgba(245,230,66,0.15);
  border: 1px solid rgba(245,230,66,0.4);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #F5E642;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.vfm-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F5E642;
  animation: vfm-pulse 2s ease-in-out infinite;
}

/* ── Bal oszlop: kanyar HUD + lejtőszög ────────────────────────────────────── */
.vfm-left-col {
  position: absolute;
  top: 62px;
  left: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.vfm-left-col > * { pointer-events: auto; }

.vfm-hud-turn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(14,11,8,0.88);
  border: 1.5px solid rgba(245,230,66,0.45);
  border-radius: 14px;
  pointer-events: none;
  min-width: 120px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vfm-hud-turn.vfm-hidden { display: none !important; }

.vfm-slope-hud {
  padding: 6px 14px;
  background: rgba(14,11,8,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #e8dbb0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  min-width: 60px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.vfm-turn-icon { font-size: 42px; line-height: 1; flex-shrink: 0; color: #F5E642; text-shadow: 0 2px 0 #111; }
.vfm-turn-dist { display: flex; flex-direction: column; }
.vfm-turn-dist-val { font-size: 40px; font-weight: 900; color: #fff; line-height: 0.9; }
.vfm-turn-dist-unit { font-size: 20px; color: #F5E642; letter-spacing: 0.02em; text-transform: none; }

/* ── Jobb oldali gomboszlop (magasság + elev + recenter) ─────────────────── */
.vfm-right-col {
  position: absolute;
  top: 62px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vfm-hud-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 10px;
  background: rgba(14,11,8,0.82);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-width: 48px;
}
.vfm-alt-val { font-size: 34px; font-weight: 900; color: #e8dbb0; line-height: 0.9; text-align: center; }
.vfm-alt-unit { font-size: 18px; color: #F5E642; letter-spacing: 0.02em; text-transform: none; margin-top: 2px; }

.vfm-zoom-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,230,66,0.4);
  background: rgba(14,11,8,0.85);
  color: #F5E642;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vfm-zoom-btn:active { background: rgba(245,230,66,0.25); }

.vfm-elev-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(0,146,70,0.5);
  background: rgba(14,11,8,0.85);
  cursor: pointer;
  gap: 2px;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.vfm-elev-btn:active,
.vfm-elev-btn.vfm-elev-active {
  background: rgba(0,146,70,0.22);
  border-color: rgba(0,146,70,0.9);
}
.vfm-elev-btn-icon { font-size: 18px; line-height: 1; }
.vfm-elev-btn-label { font-size: 8px; color: #6fcf97; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }

.vfm-recenter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,230,66,0.4);
  background: rgba(14,11,8,0.85);
  color: #F5E642;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.vfm-recenter-btn:active { background: rgba(245,230,66,0.22); }
.vfm-recenter-btn.vfm-recenter-pulse {
  background: rgba(245,230,66,0.35);
  box-shadow: 0 0 0 8px rgba(245,230,66,0.15);
}

/* ── Bottom panel ───────────────────────────────────────────────────────────── */
.vfm-bottom {
  position: absolute;
  bottom: 0; /* a képernyő legaljára, a trikolor csík fölé */
  left: 0;
  right: 0;
  z-index: 10;
  background: linear-gradient(to top, rgba(14,11,8,0.96) 0%, transparent 100%);
  padding: 12px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
}
.vfm-bottom-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  pointer-events: auto;
}
.vfm-bottom-inner > * { pointer-events: auto; }

.vfm-bottom-controls,
.vfm-bottom-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vfm-bottom-controls {
  flex-shrink: 0;
}

.vfm-bottom-stats {
  flex: 1;
  min-width: 0;
}
/* F2: bottom-bar hamburger gomb */
.vfm-bottom-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 72px;
  padding: 0;
  margin-left: max(22px, calc(env(safe-area-inset-left, 0px) + 16px));
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.32);
  border-radius: 18px;
  font-size: 34px;
  line-height: 1;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  position: relative;
  z-index: 30;
  flex-shrink: 0;
}
.vfm-root.vfm-dark .vfm-bottom-menu-btn {
  background: rgba(0,229,255,0.12);
  border-color: rgba(0,229,255,0.42);
  color: rgba(0,229,255,0.95);
}

.vfm-status-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(0,146,70,0.22);
  border: 1px solid rgba(0,146,70,0.55);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  color: #6fcf97;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.vfm-status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6fcf97;
  animation: vfm-pulse 1.4s ease-in-out infinite;
}
.vfm-status-pill.vfm-status-paused {
  background: rgba(245, 180, 0, 0.22);
  border-color: rgba(245, 180, 0, 0.55);
  color: #F5C400;
}
.vfm-status-pill.vfm-status-paused::before {
  background: #F5C400;
  animation: none;
}
.vfm-eco-badge {
  display: none;
  align-items: center;
  padding: 3px 8px;
  background: rgba(245,180,0,0.18);
  border: 1px solid rgba(245,180,0,0.45);
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  color: #F5C400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.vfm-eco-badge.vfm-eco-visible { display: flex; }
.vfm-eco-badge.vfm-eco2 {
  background: rgba(245,100,0,0.18);
  border-color: rgba(245,100,0,0.45);
  color: #F56400;
}
.vfm-dest-distance {
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(206,43,55,0.18);
  border: 1px solid rgba(206,43,55,0.45);
  color: #ffb3b3;
  font-size: clamp(18px, 5.2vw, 26px);
  font-weight: 900;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  line-height: 1.05;
}
.vfm-travelled {
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(65,217,107,0.12);
  border: 1px solid rgba(65,217,107,0.3);
  color: #41d96b;
  font-size: clamp(14px, 4.2vw, 20px);
  font-weight: 800;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.05;
}
.vfm-eta {
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(245,230,66,0.10);
  border: 1px solid rgba(245,230,66,0.25);
  color: #F5E642;
  font-size: clamp(14px, 4.2vw, 20px);
  font-weight: 800;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.05;
}
.vfm-arrival {
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0,229,255,0.10);
  border: 1px solid rgba(0,229,255,0.28);
  color: #7fe0ff;
  font-size: clamp(14px, 4.2vw, 20px);
  font-weight: 800;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.05;
}
.vfm-bottom-route {
  flex: 1;
  font-size: clamp(12px, 3.4vw, 15px);
  color: #b0a070;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vfm-elevation-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  z-index: 16;
  height: 120px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(14,11,8,0.90);
  border: 1.5px solid rgba(245,230,66,0.45);
  box-shadow: 0 10px 34px rgba(0,0,0,0.45);
  pointer-events: none;
}
.vfm-elevation-title {
  font-size: 11px;
  font-weight: 800;
  color: #F5E642;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.vfm-elevation-canvas {
  width: 100%;
  height: 78px;
  display: block;
}
.vfm-elevation-empty {
  position: absolute;
  inset: 42px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8dbb0;
  font-size: 13px;
}

.vfm-mini-toast {
  position: absolute;
  left: 50%;
  bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 18;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(14,11,8,0.92);
  color: #F5E642;
  border: 1px solid rgba(245,230,66,0.4);
  font-weight: 800;
  font-size: 13px;
}

/* ── Következő pont mini HUD kártya ─────────────────────────────────────────
  Version: 20260716_next_point_top_center_landscape_v1
  Diszkrét kártya: landscape-ben fent középen (a topbar alatt), portraitban
  a bal oszlop (kanyar HUD + lejtőszög) alatt. Következő mandatory pont neve,
  útvonal menti távolsága, és a "Kihagyom" gomb. A gomb ugyanazt a
   vfm:request-skip-next-point eseményt dobja, mint a menü skip gombja.     */
.vfm-next-point-card {
  position: absolute;
  z-index: 12;
  top: calc(58px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(60vw, 300px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px 8px 12px;
  border-radius: 16px;
  background: rgba(14,11,8,0.80);
  border: 1px solid rgba(245,230,66,0.30);
  box-shadow: 0 8px 26px rgba(0,0,0,0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.vfm-next-point-text {
  min-width: 0;
  flex: 1;
}
.vfm-next-point-label {
  font-size: 9px;
  color: rgba(245,230,66,0.78);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.vfm-next-point-name {
  margin-top: 3px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vfm-next-point-dist {
  margin-top: 2px;
  color: #e8dbb0;
  font-size: 15px;
  font-weight: 800;
}
.vfm-next-point-skip {
  position: relative;
  min-width: 84px;
  min-height: 48px;
  border: 1.5px solid rgba(245,230,66,0.55);
  border-radius: 14px;
  background: rgba(245,230,66,0.16);
  color: #F5E642;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.vfm-next-point-skip:active { background: rgba(245,230,66,0.28); }
.vfm-next-point-skip-disabled,
.vfm-next-point-skip:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (pointer: coarse) {
  .vfm-next-point-skip::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
}
/* Portrait: a kártya a lejtőszög indicator (vfm-slope-hud) ALA kerül.
   A bal oszlop (turn HUD + slope HUD) valós magasságát JS méri és
   --vfm-left-col-h CSS változóba írja. A kártya bal szélről indul
   (12px), jobb oldalt 118px marad a magasság HUD-nak. Ez a kiosztás
   mintegy 2,5× szélesebb helyet ad a pont nevének, mint a korábbi
   kanyar HUD melletti elhelyezés.
   Version: 20260716_next_point_top_center_landscape_v1 */
@media (orientation: portrait) {
  .vfm-next-point-card {
    top: calc(62px + var(--vfm-left-col-h, 120px) + 8px);
    bottom: auto;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(118px, calc(env(safe-area-inset-right, 0px) + 118px));
    max-width: none;
    transform: none;
    padding: 6px 10px;
    gap: 10px;
  }
  .vfm-next-point-label { display: none; }
  .vfm-next-point-name { font-size: 13px; }
  .vfm-next-point-dist { font-size: 14px; margin-top: 1px; }
  .vfm-next-point-skip {
    min-width: 76px;
    min-height: 48px;
    font-size: 11px;
  }
}
/* Alacsony landscape (telefon fektetve): kompaktabb, közelebb az alsó sávhoz. */
@media (orientation: landscape) and (max-height: 560px) {
  .vfm-next-point-card {
    top: calc(50px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    max-width: min(55vw, 280px);
    padding: 7px 8px 7px 10px;
  }
  .vfm-next-point-name { font-size: 12px; }
  .vfm-next-point-skip {
    min-width: 76px;
    min-height: 44px;
    font-size: 11px;
  }
}
/* Domborzat-peek alatt a kártya is halványul és NEM kattintható —
   az elevation panel pointer-events:none, ezen átütne a Kihagyom tap. */
.vfm-root.vfm-elevation-peek .vfm-next-point-card {
  opacity: 0.35 !important;
  pointer-events: none !important;
}

/* ── Tricolor ───────────────────────────────────────────────────────────────── */
.vfm-tricolor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  z-index: 11; /* az alsó infósáv gradiens FÖLÖTT, mindig látszódjon */
  background: linear-gradient(to right, #009246 33.3%, #ffffff 33.3% 66.6%, #ce2b37 66.6%);
  pointer-events: none;
}

/* ── Hamburger menü panel (bottom sheet) ────────────────────────────────────── */
.vfm-menu-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: #1a1510;
  border-radius: 20px 20px 0 0;
  border-top: 1.5px solid rgba(245,230,66,0.3);
  box-shadow: 0 -4px 32px rgba(0,0,0,0.6);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, calc(100% - env(safe-area-inset-top, 0px) - 8px));
  overflow: hidden;
}
.vfm-menu-panel.vfm-hidden {
  transform: translateY(110%);
  pointer-events: none;
}
.vfm-menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 19;
  background: transparent;
}
.vfm-menu-backdrop.vfm-hidden { display: none; }

.vfm-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.vfm-menu-title {
  font-size: 13px;
  font-weight: 700;
  color: #F5E642;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vfm-menu-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #b0a070;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.vfm-menu-close:active { background: rgba(255,255,255,0.12); }

.vfm-menu-items {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.vfm-menu-item {
  touch-action: pan-y;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-size: 14px;
  color: #e8dbb0;
  font-weight: 500;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.vfm-menu-item:active {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
}
.vfm-menu-item:disabled,
.vfm-menu-item.vfm-menu-item-disabled {
  opacity: 0.42;
  pointer-events: none;
  cursor: not-allowed;
}
.vfm-menu-item-pause {
  border-color: rgba(245,180,0,0.24);
}
/* P2-B: erosebb kontraszt a paused allapothoz — a korabbi 0.10/0.42 alfa
   tul gyenge volt telefonon gyors pillantasra; a label sajat szine/sulya is
   kiemeli a "Folytatás" feliratot, nem csak az ikon+badge valtozott. */
.vfm-menu-item-pause.vfm-menu-item-paused {
  background: rgba(245,180,0,0.18);
  border-color: rgba(245,180,0,0.65);
}
.vfm-menu-item-pause.vfm-menu-item-paused .vfm-menu-item-label {
  color: #F5C400;
  font-weight: 700;
}
.vfm-menu-item-value.vfm-val-paused {
  color: #F5C400;
  background: rgba(245,180,0,0.22);
  border-color: rgba(245,180,0,0.55);
  font-weight: 700;
}
.vfm-menu-item-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.vfm-menu-item-label { flex: 1; }
.vfm-menu-item-value {
  font-size: 11px;
  color: #F5E642;
  font-weight: 600;
  background: rgba(245,230,66,0.12);
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid rgba(245,230,66,0.3);
  flex-shrink: 0;
}
.vfm-menu-item-value.vfm-val-eco { color: #F5C400; background: rgba(245,180,0,0.12); border-color: rgba(245,180,0,0.3); }
.vfm-menu-item-value.vfm-val-eco2 { color: #F56400; background: rgba(245,100,0,0.12); border-color: rgba(245,100,0,0.3); }
.vfm-menu-item-value.vfm-val-on  { color: #6fcf97; background: rgba(0,146,70,0.14); border-color: rgba(0,146,70,0.35); }
.vfm-menu-item-value.vfm-val-sun { color: #F5A000; background: rgba(245,160,0,0.14); border-color: rgba(245,160,0,0.35); }
.vfm-menu-item-value.vfm-val-disabled { color: #a89a82; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

.vfm-menu-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a89a82;
  padding: 6px 4px 2px;
}
.vfm-segmented {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 4px;
}
.vfm-segment {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 4px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #a89a82;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s;
}
.vfm-segment-icon { font-size: 16px; line-height: 1; }
.vfm-segment-label { line-height: 1.1; }
.vfm-segment.is-active {
  background: rgba(245,160,0,0.18);
  color: #F5A000;
  font-weight: 700;
}
.vfm-segment:active { background: rgba(255,255,255,0.05); }
.vfm-segment.is-active:active { background: rgba(245,160,0,0.24); }

.vfm-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 4px 0;
}
.vfm-menu-item-exit {
  color: #e08080;
  border-color: rgba(206,43,55,0.2);
}
.vfm-menu-item-exit:active { background: rgba(206,43,55,0.12); border-color: rgba(206,43,55,0.5); }

/* ── Engine selector modal ──────────────────────────────────────────────────── */
.vfm-engine-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000030;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.vfm-engine-modal-backdrop[hidden], .vfm-engine-modal-backdrop.vfm-hidden { display: none !important; }

.vfm-engine-modal {
  background: #1a1510;
  border-radius: 20px 20px 0 0;
  border-top: 1.5px solid rgba(245,230,66,0.3);
  padding: 20px 20px 28px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.6);
}
.vfm-engine-modal-title { font-size: 16px; font-weight: 700; color: #F5E642; text-align: center; margin-bottom: 6px; }
.vfm-engine-modal-sub { font-size: 12px; color: #7a6f50; text-align: center; margin-bottom: 20px; }
.vfm-engine-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.vfm-engine-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(245,230,66,0.25);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  width: 100%;
}
.vfm-engine-btn:active { background: rgba(245,230,66,0.12); border-color: rgba(245,230,66,0.6); }
.vfm-engine-btn.vfm-engine-selected { border-color: rgba(245,230,66,0.7); background: rgba(245,230,66,0.08); }
.vfm-engine-btn.vfm-engine-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.vfm-engine-icon { font-size: 28px; flex-shrink: 0; width: 36px; text-align: center; }
.vfm-engine-text { flex: 1; }
.vfm-engine-label { font-size: 15px; font-weight: 700; color: #e8dbb0; line-height: 1.2; }
.vfm-engine-desc { font-size: 11px; color: #7a6f50; margin-top: 2px; line-height: 1.4; }
.vfm-engine-unavail { font-size: 10px; color: #ce2b37; font-weight: 600; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; }

.vfm-engine-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 14px;
}
.vfm-remember-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7a6f50; cursor: pointer; }
.vfm-remember-label input[type="checkbox"] { accent-color: #F5E642; width: 15px; height: 15px; }
.vfm-engine-modal-cancel { font-size: 12px; color: #5a5040; background: none; border: none; cursor: pointer; padding: 4px 8px; text-decoration: underline; -webkit-tap-highlight-color: transparent; }

/* ── Fallback toast ─────────────────────────────────────────────────────────── */
.vfm-fallback-toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000040;
  background: rgba(14,11,8,0.96);
  border: 1.5px solid rgba(206,43,55,0.7);
  border-radius: 16px;
  padding: 20px 24px;
  text-align: center;
  max-width: 300px;
  width: calc(100% - 40px);
  pointer-events: none;
}
.vfm-fallback-toast[hidden] { display: none !important; }
.vfm-fallback-icon { font-size: 32px; margin-bottom: 8px; }
.vfm-fallback-title { font-size: 14px; font-weight: 700; color: #F5E642; margin-bottom: 4px; }
.vfm-fallback-body { font-size: 12px; color: #b0a070; line-height: 1.5; }

/* ── Sötét OLED mód – HUD/UI felülírások ────────────────────────────────────
   A MapLibre style váltást a JS végzi (setStyle CARTO dark-matter).
   A HUD elemek és az overlay saját stílusát itt írjuk felül dark módban.   */
.vfm-root.vfm-dark .vfm-hud-turn {
  background: rgba(0,0,12,0.92);
  border-color: rgba(0,229,255,0.5);
}
.vfm-root.vfm-dark .vfm-turn-icon { color: #00E5FF; }
.vfm-root.vfm-dark .vfm-turn-dist-val { color: #00E5FF; }
.vfm-root.vfm-dark .vfm-turn-dist-unit { color: #006070; }
.vfm-root.vfm-dark .vfm-slope-hud {
  background: rgba(0,0,12,0.88);
  border-color: rgba(0,229,255,0.2);
  color: #b0d8e0;
}
.vfm-root.vfm-dark .vfm-hud-alt {
  background: rgba(0,0,12,0.88);
  border-color: rgba(0,229,255,0.2);
}
.vfm-root.vfm-dark .vfm-alt-val { color: #00E5FF; }
.vfm-root.vfm-dark .vfm-badge {
  background: rgba(0,229,255,0.12);
  border-color: rgba(0,229,255,0.4);
  color: #00E5FF;
}
.vfm-root.vfm-dark .vfm-badge::before { background: #00E5FF; }
.vfm-root.vfm-dark .vfm-back-btn { border-color: rgba(0,229,255,0.4); color: #00E5FF; }
.vfm-root.vfm-dark .vfm-bottom { background: linear-gradient(to top, rgba(0,0,12,0.97) 0%, transparent 100%); }
.vfm-root.vfm-dark .vfm-status-pill { background: rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.4); color: #00E5FF; }
.vfm-root.vfm-dark .vfm-status-pill::before { background: #00E5FF; }
.vfm-root.vfm-dark .vfm-recenter-btn { border-color: rgba(0,229,255,0.35); color: #00E5FF; }
.vfm-root.vfm-dark .vfm-elev-btn { border-color: rgba(0,229,255,0.35); }
.vfm-root.vfm-dark .vfm-elev-btn-label { color: #00E5FF; }
.vfm-root.vfm-dark { background: #000008; }

/* ── Világos mód – tiszta, vidám LaStrada nézet ─────────────────────────────
   Világos térkép előtt NINCSENEK fekete dobozok: a feliratok maguk kapnak
   erős színt (trikolor paletta) + fehér körvonal-halo az olvashatóságért.   */
.vfm-root:not(.vfm-dark) .vfm-topbar {
  background: linear-gradient(to bottom, rgba(255,255,255,0.82) 0%, transparent 100%);
}
.vfm-root:not(.vfm-dark) .vfm-route-name {
  color: #1a1208;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.vfm-root:not(.vfm-dark) .vfm-device-status {
  background: rgba(255,255,255,0.85);
  border-color: rgba(26,18,8,0.25);
}
.vfm-root:not(.vfm-dark) .vfm-battery-text { color: #009246; }
.vfm-root:not(.vfm-dark) .vfm-battery-icon { border-color: #009246; }
.vfm-root:not(.vfm-dark) .vfm-battery-icon::after,
.vfm-root:not(.vfm-dark) .vfm-battery-fill { background: #009246; }
.vfm-root:not(.vfm-dark) .vfm-charge-icon { color: #A66B00; }
.vfm-root:not(.vfm-dark) .vfm-badge {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,146,70,0.5);
  color: #009246;
}
.vfm-root:not(.vfm-dark) .vfm-badge::before { background: #009246; }
.vfm-root:not(.vfm-dark) .vfm-back-btn,
.vfm-root:not(.vfm-dark) .vfm-zoom-btn,
.vfm-root:not(.vfm-dark) .vfm-recenter-btn {
  background: rgba(255,255,255,0.88);
  border-color: rgba(26,18,8,0.3);
  color: #1a1208;
}
.vfm-root:not(.vfm-dark) .vfm-bottom-menu-btn {
  background: rgba(255,255,255,0.94);
  border-color: #000;
  color: #000;
  font-weight: 900;
  box-shadow:
    0 2px 10px rgba(255,255,255,0.55),
    0 2px 12px rgba(0,0,0,0.18);
}
.vfm-root:not(.vfm-dark) .vfm-elev-btn {
  background: rgba(255,255,255,0.88);
  border-color: rgba(0,146,70,0.55);
}
.vfm-root:not(.vfm-dark) .vfm-elev-btn-label { color: #009246; }

/* Kanyar HUD: doboz nélkül, erős színek + fehér halo */
.vfm-root:not(.vfm-dark) .vfm-hud-turn {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 4px 6px;
}
.vfm-root:not(.vfm-dark) .vfm-turn-icon {
  color: #CE2B37;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 0 10px rgba(255,255,255,0.9);
}
.vfm-root:not(.vfm-dark) .vfm-turn-dist-val {
  color: #1a1208;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 0 10px rgba(255,255,255,0.9);
}
.vfm-root:not(.vfm-dark) .vfm-turn-dist-unit {
  color: #009246;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* Lejtő + magasság HUD: doboz nélkül */
.vfm-root:not(.vfm-dark) .vfm-slope-hud {
  background: transparent;
  border-color: transparent;
  color: #1a1208;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 0 8px rgba(255,255,255,0.9);
}
.vfm-root:not(.vfm-dark) .vfm-hud-alt {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.vfm-root:not(.vfm-dark) .vfm-alt-val {
  color: #1a1208;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 0 8px rgba(255,255,255,0.9);
}
.vfm-root:not(.vfm-dark) .vfm-alt-unit {
  color: #009246;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* Alsó infósáv: nincs sötét gradiens, a feliratok színesek + halo */
.vfm-root:not(.vfm-dark) .vfm-bottom { background: none; }
.vfm-root:not(.vfm-dark) .vfm-status-pill {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,146,70,0.55);
  color: #009246;
}
.vfm-root:not(.vfm-dark) .vfm-status-pill::before { background: #009246; }
.vfm-root:not(.vfm-dark) .vfm-eco-badge {
  background: rgba(255,255,255,0.85);
  border-color: rgba(166,107,0,0.5);
  color: #A66B00;
}
.vfm-root:not(.vfm-dark) .vfm-dest-distance {
  background: transparent;
  border-color: transparent;
  color: #CE2B37;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 0 8px rgba(255,255,255,0.9);
}
.vfm-root:not(.vfm-dark) .vfm-travelled {
  background: transparent;
  border-color: transparent;
  color: #009246;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 0 8px rgba(255,255,255,0.9);
}
.vfm-root:not(.vfm-dark) .vfm-eta {
  background: transparent;
  border-color: transparent;
  color: #A66B00;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 0 8px rgba(255,255,255,0.9);
}
.vfm-root:not(.vfm-dark) .vfm-arrival {
  background: transparent;
  border-color: transparent;
  color: #0077A6;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 0 8px rgba(255,255,255,0.9);
}
.vfm-root:not(.vfm-dark) .vfm-bottom-route {
  color: #1a1208;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* Elevation panel + mini toast világosban */
.vfm-root:not(.vfm-dark) .vfm-elevation-panel {
  background: rgba(255,255,255,0.94);
  border-color: rgba(0,146,70,0.55);
  box-shadow: 0 10px 34px rgba(26,18,8,0.25);
}
.vfm-root:not(.vfm-dark) .vfm-elevation-title { color: #009246; }
.vfm-root:not(.vfm-dark) .vfm-elevation-empty { color: #1a1208; }
.vfm-root:not(.vfm-dark) .vfm-mini-toast {
  background: rgba(255,255,255,0.94);
  color: #1a1208;
  border-color: rgba(0,146,70,0.55);
}

/* ── Elevation peek bridge ───────────────────────────────────────────────────
   Peek alatt a Vector overlay átlátszóvá válik, a régi elevation panel a
   Vector fölé kerül.                                                          */
.vfm-root.vfm-elevation-peek {
  background: rgba(0,0,0,0.08) !important;
  pointer-events: none !important;
}
.vfm-root.vfm-elevation-peek .vfm-map {
  opacity: 0.72 !important;
  filter: grayscale(0.15) brightness(0.75) !important;
}
.vfm-root.vfm-elevation-peek .vfm-topbar,
.vfm-root.vfm-elevation-peek .vfm-left-col,
.vfm-root.vfm-elevation-peek .vfm-bottom,
.vfm-root.vfm-elevation-peek .vfm-tricolor {
  opacity: 0.35 !important;
  pointer-events: none !important;
}
.vfm-root.vfm-elevation-peek .vfm-right-col {
  opacity: 0.85 !important;
  pointer-events: auto !important;
}
body.vfm-elevation-peek-active #elevPanel,
body.vfm-elevation-peek-active #elevHeader {
  z-index: 10000035 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.vfm-elevation-peek-active.follow-eco-suppressed #elevPanel {
  display: flex !important;
  pointer-events: none !important;
}
body.vfm-elevation-peek-active.follow-eco-suppressed #elevHeader {
  display: flex !important;
  pointer-events: auto !important;
}

/* ── MapLibre attribution override ─────────────────────────────────────────── */
.vfm-map .maplibregl-ctrl-attrib {
  background: rgba(14,11,8,0.75) !important;
  color: rgba(180,160,100,0.7) !important;
  font-size: 9px !important;
}
.vfm-map .maplibregl-ctrl-attrib a { color: rgba(245,230,66,0.5) !important; }
.vfm-map .maplibregl-ctrl-bottom-right { bottom: 80px !important; }
.vfm-root.vfm-dark .vfm-map .maplibregl-ctrl-attrib { color: rgba(0,229,255,0.4) !important; }

/* ── MapLibre POI popup ─────────────────────────────────────────────────────── */
.vfm-root .maplibregl-popup-content {
  background: rgba(14,11,8,0.94) !important;
  border: 1px solid rgba(245,230,66,0.45) !important;
  color: #e8dbb0 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}
.vfm-root .maplibregl-popup-tip { border-top-color: rgba(14,11,8,0.94) !important; }
.vfm-root.vfm-dark .maplibregl-popup-content {
  background: rgba(0,0,12,0.95) !important;
  border-color: rgba(0,229,255,0.4) !important;
  color: #00E5FF !important;
}

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes vfm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Landscape ──────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 480px) {
  .vfm-left-col {
    top: 50px;
    left: calc(12px + env(safe-area-inset-left, 0px));
  }
  .vfm-right-col {
    top: 50px;
    right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .vfm-bottom { padding: 8px 16px 8px; }
  .vfm-engine-modal { border-radius: 16px; padding: 14px 18px 18px; max-height: 90vh; overflow-y: auto; }
  .vfm-menu-panel {
    max-height: min(96dvh, calc(100% - env(safe-area-inset-top, 0px) - 4px));
    border-radius: 16px 16px 0 0;
  }
  .vfm-menu-header {
    padding: 10px 14px 8px;
  }
  .vfm-menu-item {
    padding: 10px 12px;
    font-size: 13px;
  }
  .vfm-menu-items {
    padding: 6px 10px 10px;
    gap: 3px;
  }
}

/* ── Landscape: menügomb fixen a bal szélen ──────────────────────────────────
   A .vfm-bottom-inner (max-width:520px; margin:0 auto) landscape-ben a teljes
   alsó sávot középre tolja, ezért a ☰ gomb a képernyő kb. harmadánál jelenik
   meg, összecsúszva a FOLLOW/ECO2/adatsorral. Landscape-ben a gomb kikerül a
   flex-folyamból, a .vfm-bottom-inner bal széléhez van rögzítve, a sáv pedig
   padding-lefttel lefoglalja a helyét — alá sose kerülhet semmi. Portrait-ban
   változatlan (ott a sáv már eleve teljes szélességű, a hiba ott nem áll fenn).
   Version: 20260720_bottom_bar_left_anchor_v1 */
@media (orientation: landscape) {
  .vfm-bottom-inner {
    position: relative;
    margin: 0;
    padding-left: calc(max(22px, calc(env(safe-area-inset-left, 0px) + 16px)) + 72px + 10px);
    min-height: 72px;
  }
  .vfm-bottom-menu-btn {
    position: absolute;
    top: 0;
    left: max(22px, calc(env(safe-area-inset-left, 0px) + 16px));
    margin-left: 0;
  }
}

@media (orientation: portrait) {
  .vfm-bottom-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-width: min(100%, 520px);
  }

  .vfm-bottom-controls,
  .vfm-bottom-stats {
    width: 100%;
  }

  .vfm-bottom-controls {
    justify-content: flex-start;
  }

  .vfm-bottom-stats {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
  }

  .vfm-bottom-route {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }
}


/* =============================================================================
   Vector menu landscape phone safe-area + scroll fix
  Version: 20260702_bottom_menu_fix_v1
   Kötelező együtt verziózni: poi.html CSS/JS ?v=, JS MODULE_VERSION, CSS fejléc.
   ============================================================================= */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .vfm-menu-panel {
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    width: min(420px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px)) !important;
    max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px) !important;
    max-height: none !important;
    height: auto !important;
    border-radius: 16px !important;
    border: 1.5px solid rgba(245,230,66,0.35) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  .vfm-menu-panel.vfm-hidden {
    transform: translateX(calc(100% + env(safe-area-inset-right, 0px) + 24px)) !important;
  }

  .vfm-menu-header {
    padding: 8px 12px 7px !important;
    min-height: 44px !important;
  }

  .vfm-menu-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 76px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 6px 8px 8px !important;
    gap: 3px !important;
  }

  .vfm-menu-item {
    min-height: 42px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
    touch-action: pan-y !important;
  }

  .vfm-menu-close {
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .vfm-menu-backdrop {
    background: rgba(0,0,0,0.16) !important;
  }
}

/* ── Vector betöltés splash ─────────────────────────────────────────────────── */
.vfm-loading-splash {
  position: fixed;
  inset: 0;
  z-index: 10000025;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e0b08;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.28s ease;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.vfm-loading-splash[hidden],
.vfm-loading-splash.vfm-hidden { display: none !important; }
body.ls-rotating #vfmLoadingSplash,
body.ls-rotating .vfm-loading-splash {
  display: none !important;
  pointer-events: none !important;
}
.vfm-loading-splash.vfm-splash-hiding {
  opacity: 0;
  pointer-events: none;
}
.vfm-loading-splash .vfm-splash-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.vfm-loading-splash .vfm-splash-portrait { display: none; }
.vfm-loading-splash .vfm-splash-landscape { display: none; }
@media (orientation: portrait) {
  .vfm-loading-splash .vfm-splash-portrait { display: block; }
}
@media (orientation: landscape) {
  .vfm-loading-splash .vfm-splash-landscape { display: block; }
}


/* ── CSS-first rotation guard kiegészítés ────────────────────────────────────
   Ha a vector CSS önállóan töltődik, a Vector splash akkor se villanjon be,
   amikor az iOS előbb rajzolja át a viewportot, mint ahogy a JS esemény lefut. */
body.ls-rotation-armed.ls-rotation-unsettled #vfmLoadingSplash,
body.ls-rotation-armed.ls-rotation-unsettled .vfm-loading-splash {
  display: none !important;
  pointer-events: none !important;
}

@media (orientation: landscape) {
  body.ls-rotation-armed.ls-orientation-settled-portrait.vfm-active .vfm-root,
  body.ls-rotation-armed.ls-rotation-unsettled.vfm-active .vfm-root {
    visibility: hidden !important;
  }
  body.ls-rotation-armed.ls-orientation-settled-portrait.vfm-active #lsRotationOverlay,
  body.ls-rotation-armed.ls-orientation-settled-portrait.vfm-active .ls-rotation-overlay,
  body.ls-rotation-armed.ls-rotation-unsettled.vfm-active #lsRotationOverlay,
  body.ls-rotation-armed.ls-rotation-unsettled.vfm-active .ls-rotation-overlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
@media (orientation: portrait) {
  body.ls-rotation-armed.ls-orientation-settled-landscape.vfm-active .vfm-root,
  body.ls-rotation-armed.ls-rotation-unsettled.vfm-active .vfm-root {
    visibility: hidden !important;
  }
  body.ls-rotation-armed.ls-orientation-settled-landscape.vfm-active #lsRotationOverlay,
  body.ls-rotation-armed.ls-orientation-settled-landscape.vfm-active .ls-rotation-overlay,
  body.ls-rotation-armed.ls-rotation-unsettled.vfm-active #lsRotationOverlay,
  body.ls-rotation-armed.ls-rotation-unsettled.vfm-active .ls-rotation-overlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* =============================================================================
   Rotation freeze hard guard v3
   A forgatás alatti képi splash és minden Vector HUD réteg eltűnik.
   Nincs transition kép, nincs image rescale, nincs szürke kockás textúra.
   ============================================================================= */
body.ls-rotating .vfm-loading-splash,
body.ls-rotation-unsettled .vfm-loading-splash,
body.ls-rotation-freeze .vfm-loading-splash,
body.ls-rotating #vfmLoadingSplash,
body.ls-rotation-unsettled #vfmLoadingSplash,
body.ls-rotation-freeze #vfmLoadingSplash {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ls-rotating .vfm-loading-splash .vfm-splash-img,
body.ls-rotation-unsettled .vfm-loading-splash .vfm-splash-img,
body.ls-rotation-freeze .vfm-loading-splash .vfm-splash-img {
  display: none !important;
  visibility: hidden !important;
}

body.ls-rotation-freeze .vfm-root,
body.ls-rotation-freeze .vfm-map,
body.ls-rotation-freeze .maplibregl-map,
body.ls-rotation-freeze .maplibregl-canvas,
body.ls-rotation-freeze .maplibregl-control-container,
body.ls-rotation-freeze .vfm-topbar,
body.ls-rotation-freeze .vfm-left-col,
body.ls-rotation-freeze .vfm-right-col,
body.ls-rotation-freeze .vfm-bottom,
body.ls-rotation-freeze .vfm-elevation-panel,
body.ls-rotation-freeze .vfm-mini-toast,
body.ls-rotation-freeze .vfm-menu-panel,
body.ls-rotation-freeze .vfm-menu-backdrop {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ls-rotation-freeze #lsRotationOverlay,
body.ls-rotation-freeze .ls-rotation-overlay {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}