/* 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: Arial, sans-serif;
}
*{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-group{display:flex; flex-direction:column; gap:6px; align-items:stretch}
.vv-card__actions{display:flex; gap:8px}
.vv-moment-btn{width:100%; min-width:0; height:31px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vv-moment-btn:disabled{opacity:.55;cursor:not-allowed;}
.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;
}

/* UI318: compact per-pin moment selector. The pin-card button keeps fixed dimensions;
   the full multi-select lives only inside this modal. */
.vv-moment-picker{display:grid; gap:12px;}
.vv-moment-picker__hint{margin:0; color:#4b5563; font-size:14px; line-height:1.4;}
.vv-moment-picker__options{display:grid; gap:8px;}
.vv-moment-picker__option{display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border:1px solid rgba(0,0,0,.12); border-radius:10px; background:#fff; cursor:pointer;}
.vv-moment-picker__option input{width:18px; height:18px; flex:0 0 auto; margin-top:1px;}
.vv-moment-picker__other{display:grid; gap:6px; padding-top:2px;}
.vv-moment-picker__other[hidden]{display:none!important;}
.vv-moment-picker__other label{font-weight:600;}
.vv-moment-picker__other textarea{width:100%; min-height:76px; resize:vertical; box-sizing:border-box; border:1px solid rgba(0,0,0,.16); border-radius:10px; padding:9px 10px; font:inherit; background:#fff;}
.vv-moment-picker__error{color:#a53b00; font-size:14px; font-weight:600;}
.vv-review__moment{margin:8px 0 10px; padding:8px 10px; border-radius:10px; background:rgba(24,58,99,.06); font-size:.92rem; line-height:1.4;}

/* 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:15px;
  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);
}

/* VV respondent toelichting: iets grotere letters, zonder line-height of veldhoogte te wijzigen */
#vvReviewModal .vv-review__note{
  font-size:15px;
}

#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;
}

/* UI289/V15: Chrome-stable custom topbar language dropdown.
   Users open a real menu, but Chrome never opens the fragile native select. */
.vv-lang--custom{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:1200;
}
.vv-lang-menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:52px;
  height:38px;
  border:1px solid var(--vv-border);
  border-radius:12px;
  background:transparent;
  color:var(--vv-text);
  padding:0 7px;
  cursor:pointer;
  font-family:var(--vv-font);
  font-weight:700;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.vv-lang-menu-btn .vv-globe{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.vv-lang-menu-btn .vv-globe svg{
  width:23px;
  height:23px;
  display:block;
}
.vv-lang-menu-code{
  font-size:9px;
  letter-spacing:.02em;
  pointer-events:none;
  min-width:12px;
}
.vv-lang-menu-caret{
  font-size:10px;
  opacity:.9;
  pointer-events:none;
  transform:translateY(-1px);
}
.vv-lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:188px;
  max-height:min(70vh, 360px);
  overflow:auto;
  padding:6px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:#ffffff;
  color:#111827;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  z-index:5000;
}
.vv-lang-menu[hidden]{
  display:none !important;
}
.vv-lang-menu__item{
  display:flex;
  align-items:center;
  width:100%;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#111827;
  cursor:pointer;
  font:600 14px/1.25 var(--vv-font);
  text-align:left;
  padding:9px 10px;
  white-space:nowrap;
}
.vv-lang-menu__item:hover,
.vv-lang-menu__item:focus{
  background:rgba(16,31,63,.08);
  outline:none;
}
.vv-lang-menu__item.is-active{
  background:rgba(16,31,63,.13);
  font-weight:700;
}
.vv-select--hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  left:-9999px !important;
  top:auto !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ======================================================
   UI291_SAFE_PORTRAIT_FRAME_1
   Phone landscape: do NOT rotate the app. Keep a normal
   portrait-width app frame centered inside the landscape browser.
   This replaces the old orientation warning / rotate workaround.
   ====================================================== */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px){
  html,
  body{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
    background:var(--vv-bg) !important;
  }

  body.vv-has-panel.vv-phone-landscape-frame{
    display:block !important;
    overflow:hidden !important;
    background:var(--vv-bg) !important;
  }

  body.vv-has-panel.vv-phone-landscape-frame::before,
  body.vv-has-panel.vv-phone-landscape-frame::after{
    content:"";
    position:fixed;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(255,255,255,.24);
    z-index:1;
    pointer-events:none;
  }
  body.vv-has-panel.vv-phone-landscape-frame::before{
    left:calc(50% - min(430px, calc(100vw - 18px)) / 2);
  }
  body.vv-has-panel.vv-phone-landscape-frame::after{
    right:calc(50% - min(430px, calc(100vw - 18px)) / 2);
  }

  body.vv-has-panel.vv-phone-landscape-frame .vv-header{
    position:fixed !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    width:min(430px, calc(100vw - 18px)) !important;
    height:52px !important;
    transform:translateX(-50%) !important;
    padding:6px 10px !important;
    border-bottom:1pt solid rgba(255,255,255,.95) !important;
    z-index:1000 !important;
  }

  body.vv-has-panel.vv-phone-landscape-frame .vv-logo{
    height:28px !important;
  }

  body.vv-has-panel.vv-phone-landscape-frame .vv-header__right{
    max-width:46vw !important;
  }

  body.vv-has-panel.vv-phone-landscape-frame .vv-main{
    position:fixed !important;
    top:60px !important;
    bottom:0 !important;
    left:50% !important;
    right:auto !important;
    width:min(430px, calc(100vw - 18px)) !important;
    transform:translateX(-50%) !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:5px !important;
    padding:5px 9px !important;
    background:var(--vv-bg) !important;
    z-index:2 !important;
  }

  body.vv-has-panel.vv-phone-landscape-frame #vvSidePanel{
    order:0 !important;
    flex:0 0 auto !important;
    height:auto !important;
    max-height:42dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
    align-self:auto !important;
  }

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

  body.vv-has-panel.vv-phone-landscape-frame #vvPanelScroll{
    flex:1 1 auto !important;
    max-height:max(64px, calc(42dvh - 74px)) !important;
    min-height:0 !important;
    overflow:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  body.vv-has-panel.vv-phone-landscape-frame #vvPanelScroll::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
  }
  body.vv-has-panel.vv-phone-landscape-frame #vvPanelScroll .vv-scrollfade{
    display:none !important;
  }

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

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

  /* Start screen also stays phone-like in landscape, not tablet/desktop-like. */
  body.vv-phone-landscape-frame .vv-start-overlay{
    align-items:flex-start !important;
    justify-content:center !important;
    overflow-y:auto !important;
    padding:8px !important;
  }

  body.vv-phone-landscape-frame .vv-start-card{
    width:min(430px, calc(100vw - 18px)) !important;
    max-height:calc(100dvh - 16px) !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  body.vv-phone-landscape-frame .vv-start-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.vv-phone-landscape-frame .vv-start-row,
  body.vv-phone-landscape-frame .vv-start-robot-row{
    display:block !important;
  }

  body.vv-phone-landscape-frame .vv-start-btn{
    width:100% !important;
    margin-left:0 !important;
    margin-top:14px !important;
  }
}

/* Defensive cleanup for older cached UI290-style transform attempts. */
body.vv-phone-landscape-frame,
body.vv-phone-landscape-frame .vv-header,
body.vv-phone-landscape-frame .vv-main,
body.vv-phone-landscape-frame .vv-start-overlay,
body.vv-phone-landscape-frame .vv-start-card{
  rotate:none !important;
}

/* VV UI CONSISTENCY — force Vrouwveiliger standard font and input styling across public app. */
html, body,
input, select, textarea, button,
.leaflet-container,
.vv-app, .vv-header, .vv-brand, .vv-panel, .vv-popup, .vv-review,
.vv-review *, .vv-modal, .vv-modal * {
  font-family: Arial, sans-serif !important;
}

input, select, textarea {
  font-family: Arial, sans-serif !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  font-family: Arial, sans-serif !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* UI300_START_HERO_CMS_1
   Responsive onboarding redesign. Existing app/map/orientation logic remains intact. */
.vv-start-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
  overflow:auto;
  background:#101b31;
  isolation:isolate;
}
.vv-start-overlay:not(.is-open){display:none;}
.vv-start-hero{
  position:absolute;
  inset:0;
  z-index:-3;
  display:block;
  overflow:hidden;
}
.vv-start-hero img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:58% center;
}
.vv-start-shade{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg, rgba(8,27,54,.94) 0%, rgba(8,27,54,.84) 35%, rgba(8,27,54,.35) 68%, rgba(8,27,54,.22) 100%);
}
.vv-start-shell{
  width:min(1240px, 100%);
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  padding:38px clamp(28px, 5vw, 72px);
}
.vv-start-brandrow{
  position:absolute;
  top:28px;
  left:clamp(28px, 5vw, 72px);
  right:clamp(28px, 5vw, 72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.vv-start-logo{
  width:auto;
  height:38px;
  max-width:min(260px, 52vw);
  object-fit:contain;
}
.vv-start-municipality-logo{
  width:auto;
  height:48px;
  max-width:190px;
  object-fit:contain;
  object-position:right center;
}
.vv-start-card{
  width:min(610px, 55vw);
  margin-top:56px;
  padding:28px 30px 30px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:rgba(11,31,59,.88);
  box-shadow:0 22px 65px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.vv-start-card, .vv-start-card *{color:#fff;}
.vv-start-title{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.01em;
  text-align:left;
  opacity:.88;
}
.vv-start-headline{
  margin:0;
  max-width:560px;
  font-size:clamp(31px, 3.2vw, 48px);
  line-height:1.05;
  letter-spacing:-.025em;
  font-weight:800;
}
.vv-start-subheadline{
  margin:14px 0 22px;
  max-width:520px;
  font-size:18px;
  line-height:1.45;
  color:rgba(255,255,255,.92) !important;
}
.vv-start-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
}
.vv-start-field:last-child{grid-column:1 / -1;}
.vv-start-label{
  display:flex;
  align-items:center;
  min-height:21px;
  margin:0 0 7px;
  font-size:14px;
  line-height:1.3;
  font-weight:700;
}
.vv-start-label .vv-globe{display:inline-flex;align-items:center;justify-content:center;margin-right:7px;}
.vv-start-label .vv-globe svg{display:block;width:20px;height:20px;}
.vv-start-select{
  width:100%;
  min-height:48px;
  padding:11px 40px 11px 13px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:11px;
  background-color:#101b33;
  color:#fff;
  font-size:16px;
  line-height:1.2;
}
.vv-start-select:focus{
  outline:3px solid rgba(255,255,255,.34);
  outline-offset:2px;
  border-color:#fff;
}
.vv-start-btn{
  width:100%;
  min-height:50px;
  margin:20px 0 0;
  padding:12px 18px;
  border:0;
  border-radius:11px;
  background:#ed5b0b;
  color:#fff !important;
  font-size:17px;
  line-height:1.2;
  font-weight:800;
  box-shadow:none;
  transition:opacity .15s ease, transform .15s ease;
}
.vv-start-btn[disabled]{opacity:.42;cursor:not-allowed;}
.vv-start-btn:enabled{opacity:1;cursor:pointer;}
.vv-start-btn:enabled:active{transform:translateY(1px);}

@media (max-width: 900px){
  .vv-start-shade{
    background:linear-gradient(180deg, rgba(7,24,47,.28) 0%, rgba(7,24,47,.48) 38%, rgba(7,24,47,.92) 72%, rgba(7,24,47,.98) 100%);
  }
  .vv-start-shell{
    width:100%;
    min-height:100dvh;
    justify-content:flex-end;
    padding:20px 18px max(20px, env(safe-area-inset-bottom));
  }
  .vv-start-brandrow{
    position:absolute;
    top:max(18px, env(safe-area-inset-top));
    left:20px;
    right:20px;
    align-items:flex-start;
  }
  .vv-start-logo{height:31px;max-width:56vw;}
  .vv-start-municipality-logo{height:38px;max-width:32vw;}
  .vv-start-card{
    width:100%;
    max-width:620px;
    margin:0 auto;
    padding:22px 20px 20px;
    border-radius:20px;
    background:rgba(10,31,59,.95);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .vv-start-title{margin-bottom:10px;font-size:14px;}
  .vv-start-headline{font-size:clamp(29px, 7.2vw, 38px);max-width:470px;}
  .vv-start-subheadline{margin:10px 0 18px;font-size:16px;line-height:1.4;}
}

@media (max-width: 560px){
  .vv-start-hero img{object-position:52% 30%;}
  .vv-start-shell{padding-left:12px;padding-right:12px;}
  .vv-start-brandrow{left:18px;right:18px;}
  .vv-start-card{padding:19px 16px 16px;border-radius:18px;}
  .vv-start-row{grid-template-columns:1fr;gap:12px;}
  .vv-start-field:last-child{grid-column:auto;}
  .vv-start-select{min-height:46px;}
  .vv-start-btn{margin-top:16px;min-height:48px;}
}

@media (max-height: 720px) and (max-width: 900px){
  .vv-start-overlay{align-items:flex-start;}
  .vv-start-shell{justify-content:flex-end;min-height:760px;}
  .vv-start-card{margin-top:230px;}
}

/* UI300 temporary submit-stage verification: preserves the baseline bot check until
   Friendly Captcha credentials are configured, while keeping it off the start screen. */
.vv-review__verification input[type="text"],
.vv-review__verification input:not([type]){
  width:100%;
  border:1px solid rgba(0,0,0,.16);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
  color:#111;
}
.vv-review__robotcheck{display:flex;align-items:flex-end;padding-bottom:10px;}
.vv-review__robotcheck label{display:flex;gap:9px;align-items:center;margin:0;}
.vv-review__robotcheck input{width:18px;height:18px;}


/* UI301_START_REFINEMENT_1
   Targeted start-screen refinements after live MacBook/iPhone Safari+Chrome review.
   Presentation only: existing map, language route, orientation guard and app logic remain intact. */
.vv-start-municipality{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:24px;
  margin:0 0 14px;
}
.vv-start-municipality .vv-start-title{
  margin:0;
  min-width:0;
}
.vv-start-municipality .vv-start-municipality-logo{
  flex:0 0 auto;
  display:block;
  width:auto;
  height:28px;
  max-width:90px;
  object-fit:contain;
  object-position:left center;
}
.vv-start-municipality .vv-start-municipality-logo[hidden]{display:none !important;}

/* Give the CTA breathing room on laptop/desktop. */
.vv-start-btn{margin-top:28px;}

@media (max-width:900px){
  /* Use the live browser viewport on iOS/Chrome while preserving scroll for shorter screens. */
  .vv-start-overlay{min-height:100dvh;}
  .vv-start-shell{
    min-height:100dvh;
    height:auto;
    justify-content:flex-start;
    padding-top:max(18px, env(safe-area-inset-top));
  }
  .vv-start-brandrow{
    position:relative;
    inset:auto;
    width:100%;
    min-height:38px;
    margin:0 auto;
  }
  /* Keep the approved VV-logo scale. */
  .vv-start-logo{height:31px;max-width:56vw;}
  .vv-start-card{
    /* Fixed visual rhythm instead of bottom-anchoring: browser bars no longer push the card into the face. */
    margin-top:clamp(250px, 34dvh, 350px);
    margin-bottom:20px;
  }
  .vv-start-btn{margin-top:22px;}
}

@media (max-width:560px){
  /* Keep the portrait focal point high enough that the card starts below the face. */
  .vv-start-hero img{object-position:52% 24%;}
  .vv-start-shell{padding-left:12px;padding-right:12px;}
  .vv-start-brandrow{margin-left:6px;margin-right:6px;width:auto;}
  .vv-start-card{
    margin-top:clamp(230px, 32dvh, 315px);
    padding:18px 16px 17px;
  }
  .vv-start-municipality{margin-bottom:10px;gap:9px;}
  .vv-start-municipality .vv-start-municipality-logo{height:26px;max-width:84px;}
  .vv-start-subheadline{margin-bottom:16px;}
  .vv-start-row{gap:10px;}
  .vv-start-label{margin-bottom:6px;}
  .vv-start-select{min-height:45px;padding-top:10px;padding-bottom:10px;}
  .vv-start-btn{margin-top:20px;min-height:48px;}
}

@media (max-height:720px) and (max-width:900px){
  /* Override legacy short-screen rule: keep natural scroll, never force the card over the portrait. */
  .vv-start-shell{justify-content:flex-start;min-height:100dvh;}
  .vv-start-card{margin-top:230px;}
}


/* UI302_START_LIVE_REFINEMENT_2
   Live iPhone 13 + MacBook corrections. No app logic, map logic or orientation guard changes. */
/* More unmistakable separation between the final select and CTA on desktop/laptop. */
@media (min-width:901px){
  .vv-start-btn{margin-top:36px;}
}

@media (max-width:560px){
  /* Move the portrait upward while allowing the form to start earlier. This keeps the
     face clear but reduces the amount of initial vertical scrolling on iPhone-sized screens. */
  .vv-start-hero img{
    height:calc(100% + 76px);
    transform:translateY(-52px);
    object-position:52% 20%;
  }
  .vv-start-card{
    margin-top:clamp(185px, 25dvh, 235px);
    padding-top:16px;
  }
  .vv-start-municipality{margin-bottom:9px;}
  .vv-start-subheadline{margin-bottom:14px;}
  .vv-start-row{gap:8px;}
  .vv-start-btn{margin-top:24px;}
}

@media (max-height:720px) and (max-width:560px){
  .vv-start-card{margin-top:185px;}
}


/* UI303_START_STABLE_1
   Cache-safe final overrides after live Safari/Chrome review. */
.vv-start-row + #vvStartContinue{
  display:block;
  margin-top:36px !important;
}
@media (max-width:900px){
  .vv-start-row + #vvStartContinue{margin-top:24px !important;}
}

/* UI318.1: required moment + compact card spacing + clearer moment modal actions. */
.vv-card__actions-group{
  transform: translateY(-4px);
}
.vv-moment-btn.vv-incomplete{
  outline: 3px solid #ff0000;
  outline-offset: 0;
}
#vvMomentModal .vv-modal__footer .vv-btn{
  opacity:1;
  color:#10233f;
  background:#f4f6f8;
  border-color:rgba(16,35,63,.22);
}
#vvMomentModal .vv-modal__footer #vvMomentModalSave{
  color:#fff;
  background:#2459d3;
  border-color:#2459d3;
}
#vvMomentModal .vv-modal__footer #vvMomentModalCancel:hover{
  background:#e9edf2;
}
#vvMomentModal .vv-modal__footer #vvMomentModalSave:hover{
  background:#1f4fbe;
}

/* UI318.2: review keeps moment, free moment text and ordinary explanation separate. */
.vv-review__moment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.vv-review__moment-value{min-width:0;overflow-wrap:anywhere;}
.vv-review__moment-other{margin-top:8px;padding-top:8px;border-top:1px solid rgba(16,35,63,.12);overflow-wrap:anywhere;}
.vv-review__moment-edit{flex:0 0 auto;padding:4px 8px;font-size:12px;background:#fff;color:#10233f;}


/* UI318.4: Wanneer?-knop als duidelijke verplichte invoeractie. */
.vv-moment-btn{
  background:#ffffff;
  color:#10233f;
  border-color:#10233f;
}
.vv-moment-btn:hover{
  background:#f4f6f8;
}
.vv-moment-btn:focus-visible{
  outline:2px solid #ffffff;
  outline-offset:2px;
}
.vv-moment-btn.vv-incomplete{
  outline:3px solid #ff0000;
  outline-offset:0;
}