/* UI152_PHONE_DISABLE_PAGE_ZOOM (keep Leaflet map zoom) */
html, body{
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation; /* prevent double-tap zoom; allow scroll */
}
#map, .leaflet-container{
  touch-action: none; /* allow Leaflet to handle pinch/drag on map */
}

/* /hilversum/risk/styles.css */
:root{
  --vv-bg:#DF5000;
  --vv-panel:#111b33;
  --vv-panel2:#0f1730;
  --vv-text:#e8eefc;
  --vv-muted:#b6c2e8;
  --vv-accent:#ff4d00;
  --vv-primary:#2b5cff;
  --vv-danger:#ff3b3b;
  --vv-border:rgba(232,238,252,.14);
  --vv-shadow: 0 12px 30px rgba(0,0,0,.35);
  --vv-radius:12px;
  --vv-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
body{
  margin:0;
    background:var(--vv-bg);
  color:var(--vv-text);
  font-family:var(--vv-font);
}
.vv-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-bottom:1px solid var(--vv-border);
  background:transparent;
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:50;
}
.vv-brand{font-weight:800; letter-spacing:.2px}
.vv-sub{font-size:14px; color:var(--vv-muted)}
.vv-header__right{display:flex; gap:8px; flex-wrap:wrap}

.vv-main{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:14px;
  padding:14px;
}
@media (max-width: 980px){
  .vv-main{grid-template-columns:1fr; }
}
.vv-panel{
    background:var(--vv-bg);
  border:1px solid var(--vv-border);
  border-radius:var(--vv-radius);
  box-shadow:var(--vv-shadow);
  padding:14px;
}
.vv-panel__row{display:flex; gap:10px; flex-wrap:wrap}
.vv-mapwrap{
    background:var(--vv-bg);
  border:1px solid var(--vv-border);
  border-radius:var(--vv-radius);
  box-shadow:var(--vv-shadow);
  overflow:hidden;
  min-height: 540px;
}
.vv-map{width:100%; height: calc(100vh - 92px); min-height:540px}

.vv-btn{
  border:1px solid var(--vv-border);
  background:rgba(255,255,255,.06);
  color:var(--vv-text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:650;
}
.vv-btn:hover{background:rgba(255,255,255,.10)}
.vv-btn--primary{border-color:rgba(43,92,255,.45); background:rgba(43,92,255,.20)}
.vv-btn--danger{border-color:rgba(255,59,59,.55); background:rgba(255,59,59,.18)}
.vv-btn--ghost{background:transparent}

.vv-status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed var(--vv-border);
  color:var(--vv-muted);
  font-size:13px;
  line-height:1.35;
}
.vv-h3{margin:14px 0 8px 0; font-size:14px; color:var(--vv-muted); font-weight:800}
.vv-list{display:flex; flex-direction:column; gap:10px}
.vv-card{
  border:1px solid var(--vv-border);
  border-radius:12px;
  padding:10px 10px;
  background:rgba(255,255,255,.04);
}
.vv-card__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.vv-card__title{font-weight:800; font-size:13px}
.vv-card__meta{color:var(--vv-muted); font-size:14px; margin-top:4px}
.vv-card__actions{display:flex; gap:8px}
.vv-mini{
  border:1px solid var(--vv-border);
  background:transparent;
  color:var(--vv-text);
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
}
.vv-mini:hover{background:rgba(255,255,255,.08)}
.vv-details{margin-top:12px}
.vv-help{color:var(--vv-muted); font-size:13px; line-height:1.5}

.vv-pin-popup{
  min-width: 240px;
}
.vv-pin-popup .vv-addr{
  font-weight:800;
  margin:0 0 6px 0;
}
.vv-pin-popup .vv-note{
  width:100%;
  min-height: 74px;
  resize: vertical;
  border-radius:10px;
  border:1px solid rgba(232,238,252,.25);
  background:rgba(0,0,0,.18);
  color:var(--vv-text);
  padding:8px;
  font-family:var(--vv-font);
}
.vv-pin-popup .vv-hint{
  margin-top:6px;
  color:var(--vv-muted);
  font-size:14px;
}

/* Language dropdown */
.vv-lang{display:flex; align-items:center}
.vv-select{
  border:1px solid var(--vv-border);
  background:transparent;
  color:var(--vv-text);
  border-radius:12px;
  padding:10px 10px;
  font-weight:700;
  cursor:pointer;
  max-width: 230px;
}
.vv-select option{ color:#111; }

.vv-lang--icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid var(--vv-border);
  border-radius:12px;
  background:transparent;
  overflow:hidden;
}
.vv-lang--icon .vv-globe{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--vv-text);
}
.vv-lang--icon .vv-globe svg{
  display:block;
  width:31.5px;
  height:31.5px;
}
.vv-select--icon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  opacity:0;
  cursor:pointer;
  padding:0;
  border:0;
}
.vv-panel__topbar .vv-btn{
  padding-left:9px;
  padding-right:9px;
}


.vv-logo{
  display:block;
  height:34px;
  width:auto;
}

.vv-pin-popup textarea.vv-note{
  border:1px solid rgba(0,0,0,.35);
  border-radius:6px;
  padding:8px;
  box-sizing:border-box;
}


/* v6_27 layout overrides */
.vv-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:transparent;
  border-bottom:1pt solid rgba(255,255,255,.95);
  padding:8px 12px;
}

.vv-header__left{
  display:flex;
  align-items:center;
  gap:10px;
}
.vv-sub{
  font-weight:700;
  opacity:.95;
}

.vv-main{
  padding-top:58px; /* keep map below header */
  height:calc(100vh - 58px);
}

.vv-mapwrap{
  position:relative;
  height:100%;
}

.vv-map{
  height:100%;
  width:100%;
}

/* status overlay */
.vv-status--overlay{
  position:absolute;
  top:10px;
  left:10px;
  z-index:500;
  max-width:min(520px, calc(100% - 20px));
}

/* floating map buttons next to zoom */
.vv-map-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:46px; /* sit below zoom buttons */
}

.vv-mapbtn{
  font:inherit;
  border-radius:10px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.12);
  color:#fff;
  cursor:pointer;
}
.vv-mapbtn:hover{ background:rgba(0,0,0,.18); }
.vv-mapbtn--primary{ background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.6); }
.vv-mapbtn--danger{ background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.6); }
.vv-mapbtn--ghost{ background:rgba(0,0,0,.08); }

/* modal help */
.vv-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:2000;
  padding:14px;
}
.vv-modal.is-open{ display:flex; align-items:flex-start; justify-content:center; }
.vv-modal__inner{
  width:min(720px, 100%);
  background:#fff;
  color:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.vv-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.vv-modal__title{ font-weight:800; }
.vv-modal__close{
  font-size:26px;
  line-height:1;
  border:0;
  background:transparent;
  cursor:pointer;
}
.vv-modal__body{
  padding:14px;
  max-height:70vh;
  overflow:auto;
}

/* remove any blue header bar vibe */
.vv-header, .vv-header * { color:#fff; }


/* v6_28 fixes */
html, body { height:100%; }

.vv-main{
  height:calc(100vh - 58px);
}

@media (max-width: 520px){
  .vv-logo{ height:28px; }
  .vv-header{ padding:6px 10px; }
  .vv-main{ padding-top:52px; height:calc(100vh - 52px); }
  .vv-header__right{ max-width:46vw; }
  .vv-select{ max-width:46vw; }
}

/* translucent light-orange controls */
.vv-mapbtn{
  background:rgba(255, 255, 255, .10);
  border:1px solid rgba(255, 205, 170, .85);
  color:rgba(255, 235, 220, .98);
  backdrop-filter:saturate(140%) blur(6px);
}
.vv-mapbtn:hover{ background:rgba(255,255,255,.14); }

.vv-mapbtn--primary{
  background:rgba(255, 255, 255, .14);
  border-color:rgba(255, 200, 160, .95);
}

.vv-mapbtn--danger{
  background:rgba(255, 255, 255, .10);
  border-color:rgba(255, 200, 160, .95);
}

.vv-mapbtn--ghost{
  background:rgba(255, 255, 255, .08);
}


/* v6_29 full-height layout (desktop + mobile) */
.vv-header{ height:56px; }
.vv-main{
  --vv-gap:16px; /* extra space between header and content, and equal space at bottom */
  position:fixed;
  top:calc(56px + var(--vv-gap));
  left:0;
  right:0;
  bottom:0;
  padding-top:0 !important;
  height:auto !important;
}
@media (max-width: 520px){
  .vv-header{ height:52px; }
  /* UI154 mobile: halve header→content gap */
  .vv-main{ --vv-gap:8px; top:calc(52px + var(--vv-gap)); }
}

/* v6_29 buttons: less transparent, white text */
.vv-mapbtn{
  background:rgba(255, 170, 90, .78);
  border:1px solid rgba(255, 225, 200, .95);
  color:#fff;
  backdrop-filter:none;
}
.vv-mapbtn:hover{ background:rgba(255, 170, 90, .86); }
.vv-mapbtn--primary{
  background:rgba(255, 150, 60, .88);
  border-color:rgba(255, 235, 220, 1);
  color:#fff;
}
.vv-mapbtn--danger{
  background:rgba(255, 170, 90, .78);
  border-color:rgba(255, 235, 220, 1);
  color:#fff;
}
.vv-mapbtn--ghost{
  background:rgba(255, 170, 90, .68);
  border-color:rgba(255, 235, 220, .95);
  color:#fff;
}


/* fix: ensure map spans full width on desktop when vv-main grid has multiple columns */
.vv-mapwrap{ grid-column: 1 / -1; }



/* fix: buttons not transparent; white bold text */
.vv-mapbtn{
  background: var(--vv-accent) !important;
  color: #ffffff !important;
  font-weight: 700;
  opacity: 1 !important;
  backdrop-filter: none !important;
}
.vv-mapbtn--primary{
  background: var(--vv-primary) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.vv-mapbtn--danger{
  background: var(--vv-danger) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.vv-mapbtn--ghost{
  background: var(--vv-panel2) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.vv-mapbtn:hover{
  filter: brightness(1.05);
}



/* make all buttons same color as 'pin toevoegen' button */
.vv-mapbtn,
.vv-mapbtn--primary,
.vv-mapbtn--danger,
.vv-mapbtn--ghost {
  background: var(--vv-accent) !important;
  color: #ffffff !important;
  font-weight: 700;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

.vv-mapbtn:hover {
  filter: brightness(1.05);
}



/* make pin markers larger */
.vv-pinmarker {
  transform: scale(1.25) !important; /* Increase size by 25% */
}



/* make pin markers 50% larger */
.vv-pinmarker {
  transform: scale(1.5) !important; /* Increase size by 50% */
}



/* make pin markers 50% larger for the correct class */
.vv-pinmarker {
  transform: scale(1.75) !important; /* Increase size by 75% */
}



/* make pin markers 35% larger from original size */
.vv-pinmarker {
  transform: scale(1.35) !important; /* Increase size by 35% */
}



/* make pin icon 50% larger */
.vv-pin-icon {
  width: 45px !important;
  height: 45px !important;
}


/* === Leaflet popup click-through fix === */
.leaflet-popup {
  pointer-events: none;
}

.leaflet-popup-content,
.leaflet-popup-content * {
  pointer-events: auto;
}


/* =========================================================
   v7_4_DRAGFIX_1_PANEL_1 — enable side panel (no feature removals)
   Key fix: previous CSS forced .vv-mapwrap to span full width (grid-column:1/-1),
   which hides the panel. We override that only when the body has vv-has-panel.
   ========================================================= */
body.vv-has-panel .vv-main{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:14px;
  padding:14px;
}
@media (max-width: 980px){
  body.vv-has-panel .vv-main{ grid-template-columns: 1fr; }
  body.vv-has-panel #vvSidePanel{ order: 0; }
  body.vv-has-panel .vv-mapwrap{ order: 1; }
}
body.vv-has-panel .vv-mapwrap{ grid-column: auto; }

body.vv-has-panel .vv-panel{
  background: var(--vv-panel);
  border:1px solid var(--vv-border);
  border-radius:var(--vv-radius);
  box-shadow:var(--vv-shadow);
  padding:14px;
  overflow:auto;
}

/* Ensure panel buttons wrap nicely */
body.vv-has-panel .vv-panel__row{ display:flex; gap:5px; flex-wrap:wrap; }


/* UI3: hide floating map controls (right-top buttons) */
.vv-map-controls{ display:none !important; }

/* UI3: bigger textarea */
.vv-note{
  width:100%;
  min-height:140px;
  resize:vertical;
  padding:5px;
  font-size:14px;
  border-radius:8px;
}

/* UI3: address line same size as help text */
.vv-card__meta{ font-size:14px; line-height:1.5; }

/* UI3: numbered pin badge on pin head */
.vv-pinmarker-wrap{ background:transparent; border:0; }
.vv-pinmarker{ position:relative; width:30px; height:30px; }
.vv-pinmarker__img{ width:30px; height:30px; display:block; transform:none !important; }
.vv-pinmarker__badge{
  position:absolute;
  left:50%;
  top:7px;
  transform:translate(-50%,-50%);
  width:18px; height:18px;
  border-radius:999px;
  background:#2b5cff;
  border:2px solid rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  pointer-events:none;
}
.vv-pinmarker__num{
  font-size:11px;
  font-weight:800;
  line-height:1;
  color:#fff;
  pointer-events:none;
}


/* UI4: more space between address and textarea */
.vv-card__meta{ margin-bottom: 10px !important; }

/* UI4: textarea height 2/3 */
.vv-note{ min-height: 90px !important; }

/* UI4: white number badge with black digit */
.vv-pinmarker__badge{
  background:#fff !important;
  border:2px solid rgba(0,0,0,.25) !important;
  top:4px !important;
}
.vv-pinmarker__num{
  color:#000 !important;
}


/* UI5 FINAL: correct badge alignment + remove grey border
   - No size change
   - No other layout changes
*/
.vv-pinmarker__badge{
  border: none !important;      /* remove grey outline */
  width: 18px !important;       /* keep original size */
  height: 18px !important;      /* keep original size */
  top: 9px !important;          /* vertically centered on pin head circle */
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.vv-pinmarker__num{
  color: #000 !important;       /* black number */
}


/* UI6: badge 14px and correctly centered on transparent pin circle */
/* Nothing else changed */
.vv-pinmarker__badge{
  width:14px !important;
  height:14px !important;
  border:none !important;
  background:#fff !important;
  top:5px !important;                 /* moved higher to sit on pin head center */
  left:50% !important;
  transform:translate(-50%, -50%) !important;
}

.vv-pinmarker__num{
  font-size:9px !important;           /* scaled to fit 14px badge */
  color:#000 !important;
  font-weight:700 !important;
}


/* UI7: fine-tune badge position (6px left, 6px down) */
.vv-pinmarker__badge{
  top: calc(5px + 6px) !important;     /* 6px lower */
  left: calc(50% - 6px) !important;    /* 6px left */
}


/* UI8: final micro-adjustment (2px right) */
.vv-pinmarker__badge{
  left: calc(50% - 4px) !important;   /* was -6px, now -4px */
}


/* UI9: remove shadow under badge */
.vv-pinmarker__badge{
  box-shadow: none !important;
}


/* =========================================================
   UI127: Keep multi-word button labels on a single line
   - Applies to top controls and Leaflet floating control buttons
   ========================================================= */
button, .vv-btn, .vv-mini, .vv-mapbtn{
  white-space: nowrap;
}
.vv-mapbtn{
  line-height: 1.15; /* tighter so it doesn't look tall when wider */
}


/* =========================================================
   UI129: Sidepanel fixed topbar (buttons) + scrollable pin content
   ========================================================= */
#vvSidePanel{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100vh;
}
#vvPanelTopbar{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
#vvPanelScroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   UI130: Sidepanel topbar styling + scrolling fix
   - Topbar background inherits sidepanel background
   - Scroll container actually scrolls (panel fills viewport)
   ========================================================= */

/* Ensure full-height layout so panel can have an internal scroller */
html, body{
  height: 100%;
}
body{
  overflow: hidden; /* keep scrolling inside map/panel, not the page */
}

/* If there is a main layout wrapper, make it fill the viewport */
.vv-layout, .vv-app, .vv-root{
  height: 100vh;
}

/* Sidepanel becomes a flex column with a sticky topbar and a scrollable content area */
#vvSidePanel{
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
}

#vvPanelTopbar{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 200;
  background: inherit;  /* <<< keep same as sidepanel */
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

/* Scroll area under the topbar */
#vvPanelScroll{
  flex: 1 1 auto;
  min-height: 0;  /* critical for flex scroll containers */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   UI131: Orange outline for incomplete pin input fields
   - Only applies to textarea.vv-note.vv-incomplete
   ========================================================= */
.vv-note.vv-incomplete{
  outline: 5px solid #ff0000;
  outline-offset: 0px;
}



/* =========================================================
   UI133: add 5px bottom padding to sidepanel topbar
   ========================================================= */
#vvPanelTopbar{
  padding-bottom: 5px;
}


/* =========================================================
   UI134: align submit + clear to the right in sidepanel topbar
   - keeps Add Pin on the left
   ========================================================= */
#vvPanelTopbar .vv-panel__row{
  display: flex;
  align-items: center;
  gap: 10px;
}
#vvPanelTopbar #vvBtnSubmit{
  margin-left: auto; /* pushes Send + Clear to the right */
}


/* =========================================================
   UI137: panel scroll hint (fade + visible scrollbar) CLEAN
   ========================================================= */
#vvPanelScroll{
  position: relative; /* anchor fades */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* Visible scrollbar (WebKit) */
#vvPanelScroll::-webkit-scrollbar{ width: 10px; }
#vvPanelScroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
}
#vvPanelScroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.32);
  border-radius: 10px;
}
#vvPanelScroll::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,0.42); }

/* Visible scrollbar (Firefox) */
#vvPanelScroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.32) rgba(0,0,0,0.08);
}

/* Fades */
.vv-scrollfade{
  position: sticky;
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
  z-index: 5;
}
.vv-scrollfade--top{
  top: 0;
  background: linear-gradient(to bottom, rgba(223,80,0,0.28), rgba(223,80,0,0));
}
.vv-scrollfade--bottom{
  bottom: 0;
  background: linear-gradient(to top, rgba(223,80,0,0.28), rgba(223,80,0,0));
}

#vvPanelScroll.vv-can-scroll.vv-show-top .vv-scrollfade--top{ opacity: 1; }
#vvPanelScroll.vv-can-scroll.vv-show-bottom .vv-scrollfade--bottom{ opacity: 1; }

/* UI138: scroll chevrons (desktop/laptop/iPad) – click to scroll; phones: no chevrons */
#vvPanelScroll .vv-scrollchev{
  position: sticky;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 28px;
  border: 1px solid rgba(232,238,252,.18);
  border-radius: 999px;
  background: rgba(15,23,48,.78);
  color: var(--vv-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.30);
}
#vvPanelScroll .vv-scrollchev--top{ top: 6px; }
#vvPanelScroll .vv-scrollchev--bottom{ bottom: 6px; }

#vvPanelScroll.vv-chevrons-enabled.vv-can-scroll.vv-show-top .vv-scrollchev--top{
  opacity: .85;
  pointer-events: auto;
}
#vvPanelScroll.vv-chevrons-enabled.vv-can-scroll.vv-show-bottom .vv-scrollchev--bottom{
  opacity: .85;
  pointer-events: auto;
}
#vvPanelScroll.vv-chevrons-enabled:hover .vv-scrollchev{
  opacity: 1;
}
#vvPanelScroll .vv-scrollchev:active{
  transform: translateX(-50%) scale(0.98);
}


/* UI140: highlight + scroll-to card when Locate focuses a BlockedPin */
.vv-card.vv-card--focus{
  outline: 2px solid rgba(0,120,255,.55);
  outline-offset: 2px;
  background: rgba(0,120,255,.16);
}


/* UI142: highlight focused pin on map (outline halo) */
.vv-pinmarker-wrap.vv-pinmarker-wrap--focus .vv-pinmarker{
  position: relative;
}
.vv-pinmarker-wrap.vv-pinmarker-wrap--focus .vv-pinmarker::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 38px;
  transform: translate(-65%, -51%);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(0,120,255,.65);
  pointer-events: none;
}


/* ======================================================
   UI151_PHONE_TOP_STRIP_ONE_CARD — phone layout
   - Sidepanel sits under header, capped to topbar + ~1 card
   - Map takes remaining height
   ====================================================== */
@media (max-width: 520px){
  html, body{ height:100%; }
  body.vv-has-panel{
    height:100dvh;
    overflow:hidden; /* prevent page scroll; panel scrolls internally */
    display:flex;
    flex-direction:column;
  }
  body.vv-has-panel .vv-header{ flex:0 0 auto; }

  body.vv-has-panel .vv-main{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:5px 9px;
    min-height:0; /* allow children to shrink */
    height:auto; /* override earlier 100vh calc rules */
  }

  /* Compact top strip panel */
  body.vv-has-panel #vvSidePanel{
    order:0;
    flex:0 0 auto;
    /* topbar + ~1 card (tweak if needed) */
    max-height:253px;
    overflow:hidden;
  }

  body.vv-has-panel #vvPanelTopbar{ flex:0 0 auto; }

  /* The scroll area should never exceed remaining panel height */
  body.vv-has-panel #vvPanelScroll{
    max-height:calc(253px - 74px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    min-height:0;
  }

  /* Map fills remaining space */
  body.vv-has-panel .vv-mapwrap{
    order:1;
    flex:1 1 auto;
    min-height:0;
  }
  body.vv-has-panel .vv-map{
    height:100%;
    min-height:0;
  }


  /* UI154: phones don't need scroll hint UI (scrollbar gutter / fades) */
  body.vv-has-panel #vvPanelScroll{
    scrollbar-gutter: auto;
    scrollbar-width: none; /* Firefox */
  }
  body.vv-has-panel #vvPanelScroll::-webkit-scrollbar{ width: 0; height: 0; }
  body.vv-has-panel #vvPanelScroll .vv-scrollfade{ display:none; }

  /* UI156+ no page zoom on phone (map zoom remains) */
  html, body{
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    overscroll-behavior: none;
  }
  #map, .leaflet-container{
    touch-action: none;
    -ms-touch-action: none;
  }

}


/* UI161+: start overlay (clean, no card) */
.vv-start-overlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(223,80,0,0.78); /* orange, slightly less transparent */
  z-index:99999;
  padding:16px;
}
.vv-start-overlay:not(.is-open){ display:none; }

.vv-start-card{
  width:min(560px, 100%);
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:visible;
}

.vv-start-card, .vv-start-card *{ color:#fff; }
.vv-start-card .vv-globe{display:inline-flex; align-items:center; justify-content:center; margin-right:6px;}
.vv-start-card .vv-globe svg{display:block;}
.vv-start-body{ padding:12px 6px 10px 6px; }

.vv-start-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 6px 6px 6px;
}
.vv-start-logo{
  height:34px;
  width:auto;
  object-fit:contain;
  display:block;
}
.vv-start-title{
  font-weight:900;
  font-size:22px;
  line-height:1.05;
  text-align:center;
}

.vv-start-p{
  margin:0 0 12px 0;
  font-size:16px; /* bigger body copy */
  line-height:1.35;
  text-align:left;
}

.vv-start-label{
  display:block;
  font-weight:800;
  font-size:13px;
  margin:10px 0 6px 0;
}

.vv-start-label--small{
  font-weight:700;
  font-size:14px;
  opacity:0.9;
  margin-top:10px;
}

.vv-start-select, .vv-start-input{
  width:100%;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(232,238,252,0.22);
  background:var(--vv-panel); /* sidepanel blue */
  background-color:var(--vv-panel);
  -webkit-appearance:none;
  appearance:none;
  color:var(--vv-text);
  box-shadow:none;
  outline:none;
  font-size:16px; /* keep 16 to avoid iOS zoom-on-focus */
  line-height:1.1;
}
.vv-start-select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(232,238,252,0.85) 50%),
    linear-gradient(135deg, rgba(232,238,252,0.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}
.vv-start-input::placeholder{ color: rgba(232,238,252,0.65); }

.vv-start-select:focus, .vv-start-input:focus{
  outline:2px solid rgba(43,92,255,0.65);
  outline-offset:2px;
}

.vv-start-robot{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(255,255,255,0.30);
}

.vv-start-check{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:15px;
  user-select:none;
}
.vv-start-check input{ width:18px; height:18px; }

.vv-start-btn{
  margin-top:14px;
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:none;
  background:#D6A400; /* gold */
  color:#10244A;
  font-weight:900;
  font-size:16px;
  opacity:1;
}
.vv-start-btn[disabled]{
  opacity:0.45;
}
.vv-start-btn:enabled{ opacity:1; cursor:pointer; }
.vv-start-btn:enabled:active{ transform:translateY(1px); }

.vv-start-foot{
  margin-top:10px;
  font-size:13px;
  opacity:0.9;
  line-height:1.25;
}

.vv-start-hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; }


/* UI270: confirm + review modals */
.vv-modal__inner--narrow{max-width:520px;}
.vv-modal__inner--wide{max-width:min(920px, calc(100vw - 24px));}
.vv-modal__footer{display:flex; gap:10px; justify-content:flex-end; padding:0 16px 16px;}
.vv-modal__body p:first-child{margin-top:0;}
.vv-review{display:grid; gap:16px;}
.vv-review__section{border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:14px; background:#fff;}
.vv-review__title{font-weight:700; margin:0 0 10px;}
.vv-review__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.vv-review__field label{display:block; font-weight:600; margin-bottom:6px;}
.vv-review__field select,.vv-review__note{width:100%; border:1px solid rgba(0,0,0,.16); border-radius:12px; padding:10px 12px; font:inherit; background:#fff;}
.vv-review__list{display:grid; gap:16px;}
.vv-review__item{border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:12px; background:#fafafa;}
.vv-review__item.is-blocked{border-color:#df5000; background:rgba(223,80,0,.06);}
.vv-review__addr{font-weight:600; margin-bottom:8px;}
.vv-review__meta{font-size:.95rem; opacity:.8; margin-bottom:8px;}
.vv-review__note{min-height:110px; resize:vertical;}
.vv-review__warn,.vv-review__globalwarn{margin-top:8px; color:#a53b00; font-size:.95rem; font-weight:600;}
.vv-review__globalwarn{margin-top:0; padding:10px 12px; border:1px solid rgba(223,80,0,.28); border-radius:12px; background:rgba(223,80,0,.08);}
@media (max-width: 700px){.vv-review__grid{grid-template-columns:1fr;}}


/* UI273: themed confirm/review modal styling on UI272 baseline */
:root{
  --vv-modal-top-offset: calc(58px + 29px);
}
#vvConfirmModal,
#vvReviewModal{
  padding: var(--vv-modal-top-offset) 14px 14px;
  font-family: var(--vv-font);
}
#vvConfirmModal.is-open,
#vvReviewModal.is-open{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
#vvConfirmModal .vv-modal__inner,
#vvReviewModal .vv-modal__inner{
  background: var(--vv-bg);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  font-family: var(--vv-font);
}
#vvConfirmModal .vv-modal__header,
#vvReviewModal .vv-modal__header{
  background: var(--vv-panel);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
#vvConfirmModal .vv-modal__title,
#vvReviewModal .vv-modal__title,
#vvConfirmModal .vv-modal__body,
#vvReviewModal .vv-modal__body,
#vvConfirmModal .vv-modal__body p,
#vvReviewModal .vv-modal__body p,
#vvConfirmModal .vv-modal__body label,
#vvReviewModal .vv-modal__body label,
#vvReviewModal .vv-review__title,
#vvReviewModal .vv-review__addr,
#vvReviewModal .vv-review__meta,
#vvReviewModal .vv-review__warn,
#vvReviewModal .vv-review__globalwarn{
  color:#fff;
}
#vvConfirmModal .vv-modal__body,
#vvReviewModal .vv-modal__body,
#vvConfirmModal .vv-modal__body p,
#vvReviewModal .vv-modal__body p,
#vvConfirmModal .vv-modal__body label,
#vvReviewModal .vv-modal__body label,
#vvReviewModal .vv-review__addr,
#vvReviewModal .vv-review__meta,
#vvReviewModal .vv-review__field select,
#vvReviewModal .vv-review__note,
#vvConfirmModalCancel,
#vvReviewModalCancel{
  font-size:14px;
  line-height:1.35;
  font-weight:400;
  font-family: var(--vv-font);
}
#vvConfirmModal .vv-modal__close,
#vvReviewModal .vv-modal__close{
  color:#fff;
}
#vvConfirmModal .vv-modal__footer,
#vvReviewModal .vv-modal__footer{
  align-items:center;
  gap:16px;
}
#vvConfirmModal .vv-modal__footer .vv-btn,
#vvReviewModal .vv-modal__footer .vv-btn{
  background: var(--vv-panel);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  min-width: 132px;
}
#vvConfirmModalCancel,
#vvReviewModalCancel{
  background: transparent !important;
  border: 0 !important;
  box-shadow:none !important;
  color: var(--vv-panel) !important;
  min-width: 0 !important;
  padding-left: 4px;
  padding-right: 4px;
}
#vvConfirmModalOk,
#vvReviewModalSubmit{
  background: var(--vv-panel) !important;
  border-color: rgba(255,255,255,.16) !important;
  color:#fff !important;
}
#vvConfirmModal .vv-modal__body,
#vvReviewModal .vv-modal__body{
  max-height: min(70vh, calc(100vh - var(--vv-modal-top-offset) - 28px));
}
#vvReviewModal .vv-review__section{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
}
#vvReviewModal .vv-review__item{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
}
#vvReviewModal .vv-review__item.is-blocked{
  background: rgba(17,27,51,.24);
  border-color: rgba(255,255,255,.42);
}
#vvReviewModal .vv-review__field select,
#vvReviewModal .vv-review__note{
  background:#fff;
  color:#000;
  border:1px solid rgba(0,0,0,.18);
  font-family: var(--vv-font);
}
#vvReviewModal .vv-review__field select::placeholder,
#vvReviewModal .vv-review__note::placeholder{
  color:#444;
}
#vvReviewModal .vv-review__globalwarn{
  background: rgba(17,27,51,.24);
  border:1px solid rgba(255,255,255,.24);
}
@media (max-width: 980px){
  :root{ --vv-modal-top-offset: calc(58px + 29px); }
}


/* PATCH: restore blue sidepanel fades */
#vvPanelScroll .vv-scrollfade--top{
  background: linear-gradient(to bottom, rgba(17,27,51,.32), rgba(17,27,51,0)) !important;
}
#vvPanelScroll .vv-scrollfade--bottom{
  background: linear-gradient(to top, rgba(17,27,51,.32), rgba(17,27,51,0)) !important;
}

/* PATCH: review modal header fixed; body scrolls; footer scrolls inside body */
#vvReviewModal .vv-modal__inner{
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - var(--vv-modal-top-offset) - 14px);
  overflow:hidden;
}
#vvReviewModal .vv-modal__header{
  flex:0 0 auto;
  position:sticky;
  top:0;
  z-index:6;
}
#vvReviewModal .vv-modal__body{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-bottom:14px;
}
#vvReviewModal .vv-modal__footer.vv-modal__footer--inbody{
  display:flex;
  position:relative;
  margin-top:14px;
  padding-top:0;
  padding-left:16px;
  padding-right:16px;
  padding-bottom:0;
}

/* PATCH: no review body scroll shadows */
#vvReviewModal .vv-modal__body .vv-scrollfade,
#vvReviewModal .vv-modal__body .vv-scrollfade--top,
#vvReviewModal .vv-modal__body .vv-scrollfade--bottom{
  display:none !important;
  opacity:0 !important;
  background:transparent !important;
}

/* PATCH: review modal scroll chevrons with transparent orange background */
#vvReviewModal .vv-modal__body .vv-scrollchev{
  position: sticky;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(223,80,0,.42);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
  backdrop-filter: blur(2px);
}
#vvReviewModal .vv-modal__body .vv-scrollchev--top{ top: 6px; }
#vvReviewModal .vv-modal__body .vv-scrollchev--bottom{ bottom: 6px; }
#vvReviewModal .vv-modal__body.vv-chevrons-enabled.vv-can-scroll.vv-show-top .vv-scrollchev--top{
  opacity: .88;
  pointer-events: auto;
}
#vvReviewModal .vv-modal__body.vv-chevrons-enabled.vv-can-scroll.vv-show-bottom .vv-scrollchev--bottom{
  opacity: .88;
  pointer-events: auto;
}
#vvReviewModal .vv-modal__body.vv-chevrons-enabled:hover .vv-scrollchev{
  opacity: 1;
}
#vvReviewModal .vv-modal__body .vv-scrollchev:active{
  transform: translateX(-50%) scale(0.98);
}

/* THANK YOU modal list after successful submission */
#vvConfirmModal .vv-thanks-list{
  display:grid;
  gap:16px;
  margin:12px 0 16px;
}
#vvConfirmModal .vv-thanks-item{
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.10);
}
#vvConfirmModal .vv-thanks-addr{
  font-weight:700;
  margin-bottom:6px;
}
#vvConfirmModal .vv-thanks-note{
  white-space:normal;
  overflow-wrap:anywhere;
  font-style:normal;
}


/* Hide map status badge in top-left of the map */
#vvStatus{ display:none !important; }


/* ======================================================
   UI289_SAFE_START_OVERLAY_SCROLL_ONLY_1
   Alleen start-overlay scrollbaar op lagere schermhoogtes.
   Laat vv-main / sidepanel / map-layout ongemoeid.
   ====================================================== */
@media (max-height: 800px){
  .vv-start-overlay{
    align-items:flex-start;
    overflow-y:auto;
  }

  .vv-start-card{
    max-height:calc(100dvh - 32px);
    display:flex;
    flex-direction:column;
  }

  .vv-start-body{
    overflow-y:auto;
  }
}


/* ======================================================
   UI289_STARTOVERLAY_COLUMNSAFE_1
   Start-overlay: bredere middenkolom + gelijke pulldowns
   Alleen voor laptop / liggende tablet; mobiel blijft stapelen.
   ====================================================== */
.vv-start-field{
  min-width:0;
}

@media (min-width: 760px){
  .vv-start-card{
    width:min(760px, 100%);
  }

  .vv-start-row{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    align-items:end;
  }

  .vv-start-row .vv-start-label{
    margin-top:0;
  }

  .vv-start-robot-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:10px;
    align-items:end;
  }

  .vv-start-field--math .vv-start-input{
    width:100%;
  }

  .vv-start-check{
    min-height:44px;
    align-self:end;
    padding-bottom:10px;
  }
}

@media (min-width: 760px) and (max-width: 920px){
  .vv-start-card{
    width:min(820px, 100%);
  }
}

@media (max-width: 759px){
  .vv-start-row,
  .vv-start-robot-row{
    display:block;
  }
}


/* ======================================================
   UI294_MINITEST_MATCH_THIRD_DROPDOWN_ACTUAL_1
   Fix the actual cause:
   current baseline still uses a 2-column robot row.
   Make robot row use the same 3-column grid as the dropdown row.
   ====================================================== */
@media (min-width: 760px){
  .vv-start-robot-row{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
    align-items:end !important;
  }

  .vv-start-check{
    grid-column:1 / 3 !important;
    min-height:44px !important;
    align-self:end !important;
    padding-bottom:10px !important;
  }

  .vv-start-field--math{
    grid-column:3 / 4 !important;
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  .vv-start-field--math .vv-start-input{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }
}


/* ======================================================
   UI295_MINICHECK_LEFT_ROBOT_MIDDLE_1
   Desktop / landscape tablet:
   - mini-check under age dropdown (col 1)
   - robot checkbox under gender dropdown (col 2)
   - language column (col 3) left empty
   ====================================================== */
@media (min-width: 760px){
  .vv-start-robot-row{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
    align-items:end !important;
  }

  .vv-start-field--math{
    grid-column:1 / 2 !important;
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  .vv-start-field--math .vv-start-input{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  .vv-start-check{
    grid-column:2 / 3 !important;
    min-height:44px !important;
    align-self:end !important;
    padding-bottom:10px !important;
    justify-self:start !important;
  }
}


/* ======================================================
   UI296_SECONDROW_3COL_WITH_BUTTON_RIGHT_1
   Desktop / landscape tablet:
   - col 1: mini-check
   - col 2: I am not a robot
   - col 3: Continue button
   - keep the whole second row horizontally aligned
   - mobile remains unchanged
   ====================================================== */
@media (min-width: 760px){
  .vv-start-robot-row{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
    align-items:end !important;
  }

  .vv-start-field--math{
    grid-column:1 / 2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    align-self:end !important;
  }

  .vv-start-field--math .vv-start-input{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  .vv-start-check{
    grid-column:2 / 3 !important;
    min-height:44px !important;
    align-self:end !important;
    justify-self:start !important;
    padding-bottom:10px !important;
    margin:0 !important;
  }

  .vv-start-btn{
    grid-column:3 / 4 !important;
    width:100% !important;
    margin-top:0 !important;
    align-self:end !important;
  }
}


/* ======================================================
   UI297_BUTTON_VISUAL_THIRD_COLUMN_1
   Desktop / landscape tablet:
   visually place Continue button in third column
   while keeping existing HTML structure intact.
   ====================================================== */
@media (min-width: 760px){
  .vv-start-btn{
    width: calc((100% - 20px) / 3) !important;
    margin-left: calc((((100% - 20px) / 3) * 2) + 20px) !important;
    margin-top: 0 !important;
  }
}


/* ======================================================
   UI300_SECONDROW_TRUE_ALIGN_HTMLSAFE_1
   True second-row alignment with matching HTML structure:
   - col 1: mini-check
   - col 2: robot checkbox
   - col 3: continue button
   ====================================================== */
@media (min-width: 760px){
  .vv-start-robot-row{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
    align-items:end !important;
  }

  .vv-start-field--math{
    grid-column:1 / 2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
  }

  .vv-start-field--math .vv-start-label{
    margin-top:0 !important;
  }

  .vv-start-field--math .vv-start-input{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  .vv-start-check{
    grid-column:2 / 3 !important;
    min-height:44px !important;
    align-self:end !important;
    justify-self:start !important;
    padding-bottom:10px !important;
    margin:0 !important;
  }

  .vv-start-btn{
    grid-column:3 / 4 !important;
    width:100% !important;
    margin:0 !important;
    align-self:end !important;
  }
}


/* ======================================================
   UI302_BUTTON_LOWER_NOT_DROPDOWNS_1
   Based on UI300 baseline.
   Fixes:
   1. do NOT increase dropdown/input height
   2. make only the Continue button a bit lower / less tall
   3. center the robot row item better under the gender dropdown
   4. keep the consent text a bit lower
   ====================================================== */
@media (min-width: 760px){
  /* Leave dropdowns and mini-check input at baseline size */
  .vv-start-select,
  .vv-start-input{
    min-height: unset !important;
  }

  /* Only the button gets a slightly lower height */
  .vv-start-btn{
    min-height: 38px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
  }

  /* Robot item visually centered in its middle column */
  .vv-start-check{
    width: 100% !important;
    justify-self: stretch !important;
    align-self: center !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Consent line a little lower */
  .vv-start-robot + .vv-start-legal,
  .vv-start-btn + .vv-start-legal,
  #vvStartContinue + .vv-start-legal{
    margin-top: 14px !important;
  }
}


/* ======================================================
   UI303_BUTTON_BOTTOM_ALIGN_WITH_MINICHECK_1
   Keep current baseline, but align the bottom edge of the
   Continue button with the bottom edge of the mini-check input.
   ====================================================== */
@media (min-width: 760px){
  .vv-start-btn{
    align-self: end !important;
    margin-top: auto !important;
  }
}


/* ======================================================
   UI304_VIEWPORT_NO_PAGE_SCROLL_EDGE_1
   Edge / laptop viewport fix:
   - page itself must NOT scroll
   - only left side panel may scroll internally
   - map and panel fit inside viewport
   ====================================================== */

/* Keep page itself locked */
html, body{
  height: 100%;
  overflow: hidden !important;
}

/* Main app fits exactly under fixed header */
.vv-main{
  height: calc(100dvh - 58px) !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Mobile header variant */
@media (max-width: 520px){
  .vv-main{
    height: calc(100dvh - 52px) !important;
  }
}

/* Grid children may shrink instead of forcing page overflow */
body.vv-has-panel .vv-main > *{
  min-height: 0;
}

/* Side panel should fit available height; only its inner scroll area scrolls */
#vvSidePanel{
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

#vvPanelScroll{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Map column fills remaining height without creating page scroll */
.vv-mapwrap{
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.vv-map,
#map{
  height: 100% !important;
  min-height: 0 !important;
}


/* ======================================================
   UI305_VIEWPORT_RESTORE_BOTTOM_PADDING_1
   Restore visible bottom padding under side panel and map
   while keeping page scroll disabled.
   ====================================================== */
@media (min-width: 521px){
  #vvSidePanel,
  .vv-mapwrap{
    height: calc(100% - 14px) !important;
    align-self: start !important;
  }
}


/* ======================================================
   UI306_VIEWPORT_DESKTOP_ONLY_MOBILE_RESTORE_1
   Restore mobile layout after desktop viewport fixes.
   Desktop/Edge viewport fixes stay for larger screens only.
   ====================================================== */
@media (max-width: 520px){
  html, body{
    height: 100%;
    overflow: hidden !important;
  }

  body.vv-has-panel{
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.vv-has-panel .vv-main{
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 5px 9px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body.vv-has-panel #vvSidePanel{
    order: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: 253px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-self: auto !important;
  }

  body.vv-has-panel #vvPanelTopbar{
    flex: 0 0 auto !important;
  }

  body.vv-has-panel #vvPanelScroll{
    flex: 1 1 auto !important;
    max-height: calc(253px - 74px) !important;
    min-height: 0 !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.vv-has-panel .vv-mapwrap{
    order: 1 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-self: auto !important;
  }

  body.vv-has-panel .vv-map,
  body.vv-has-panel #map{
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* ======================================================
   UI288_SAFARI_MAILTO_POINTERFIX_1
   Force start-footer mail link to stay clickable in Safari
   without changing app logic/layout.
   ====================================================== */
.vv-start-overlay{
  pointer-events:auto;
}

.vv-start-foot,
.vv-start-foot *{
  pointer-events:auto !important;
  position:relative;
  z-index:1;
}

.vv-start-foot a{
  display:inline-block;
  pointer-events:auto !important;
}