/* Overvecht.Online tekstkleuren: navy voor koppen, grijstinten voor toelichting. */
:root {
  --ink: #183b68;
  --muted: #68778a;
}

body {
  color: #4d5b6d !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #183b68 !important;
}

p {
  color: #657286 !important;
}

small, label, legend, dt, dd, .hint, .intro, .muted, .meta, .field-hint,
.step-count, .review dt, .count, .submission-option > span:last-child,
.directory a span, .help-meta, .form-data-note, .notice {
  color: #68778a !important;
}

input, select, textarea {
  color: #4d5b6d !important;
}

input::placeholder, textarea::placeholder {
  color: #8a95a3 !important;
  opacity: 1;
}

/* Witte tekst blijft helder op de donkere beeld- en kleurvlakken. */
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.featureBand h1, .featureBand h2, .featureBand h3,
.activity-page-cta h1, .activity-page-cta h2, .activity-page-cta h3, .activity-page-cta h4,
.ad-pitch h1, .ad-pitch h2, .ad-pitch h3,
.footer h1, .footer h2, .footer h3, .footer h4,
.foot h1, .foot h2, .foot h3, .foot h4 {
  color: #fff !important;
}

.hero p, .featureBand p, .activity-page-cta p, .ad-pitch p, .ad-pitch li,
.footer p, .footer a, .foot p, .foot a {
  color: #d5deea !important;
}

.hero .kicker {
  color: #f5c0dc !important;
}

.brand strong, .sponsor-name, .social b {
  color: #183b68 !important;
}

:root {
  --action-blue: #294e7e;
  --action-blue-hover: #203e65;
}

a.btn, a.button, a.textlink, a.navcta, a.cta, a.portal-link, a.phone-link,
button.form-submit, button.submit, button.step-button:not(.secondary) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 40px;
  max-width: 100%;
  padding: 10px 15px !important;
  border: 1px solid var(--action-blue) !important;
  border-radius: 9px !important;
  background: var(--action-blue) !important;
  color: #fff !important;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

a.btn:hover, a.button:hover, a.textlink:hover, a.navcta:hover,
a.cta:hover, a.portal-link:hover, a.phone-link:hover,
button.form-submit:hover, button.submit:hover, button.step-button:not(.secondary):hover {
  border-color: var(--action-blue-hover) !important;
  background: var(--action-blue-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
}

a.btnOutline, a.btnWhite {
  background: var(--action-blue) !important;
  color: #fff !important;
  border-color: var(--action-blue) !important;
}

a.portal-link {
  min-height: 30px;
  padding: 5px 10px !important;
  font-size: 12px;
}

button.chip {
  border: 1px solid #c6d3e3 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #294e7e !important;
}

button.chip.active, button.chip:hover {
  border-color: var(--action-blue) !important;
  background: var(--action-blue) !important;
  color: #fff !important;
}

button.submission-option {
  color: #4d5b6d;
}

.search button {
  width: 34px;
  height: 34px;
  min-height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

.searchIcon {
  display: block;
  width: 17px;
  height: 17px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

@media (max-width: 620px) {
  .search button { width: 32px; height: 32px; min-height: 32px !important; }
}
.searchIcon {
  stroke: #fff !important;
  fill: none !important;
  width: 18px !important;
  height: 18px !important;
  flex: none;
}

.urgent-card .phone-link {
  border-color: var(--action-blue) !important;
  background: var(--action-blue) !important;
  color: #fff !important;
}

.urgent-card .phone-link:hover {
  border-color: var(--action-blue-hover) !important;
  background: var(--action-blue-hover) !important;
}

/* Hero CTA's wisselen tussen Overvecht-blauw en het paarse accent. */
.hero a.btnPink {
  border-color: #294e7e !important;
  background: #294e7e !important;
  color: #fff !important;
}

.hero a.btnPink:hover {
  border-color: #203e65 !important;
  background: #203e65 !important;
}

.hero a.btnOutline {
  border-color: #b93a83 !important;
  background: #b93a83 !important;
  color: #fff !important;
}

.hero a.btnOutline:hover {
  border-color: #9f2d70 !important;
  background: #9f2d70 !important;
}

.search button {
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #294e7e !important;
  box-shadow: none !important;
}

.search button:hover {
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #203e65 !important;
}

body .search button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip) {
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #294e7e !important;
  box-shadow: none !important;
}

body .search button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip):hover {
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #203e65 !important;
}


/* Consistente, inhoudelijk passende pictogrammen op alle pagina’s. */
.ui-icon { display:block; width:23px; height:23px; flex:none; }

/* Mobiele header: toon alleen het Overvecht-blauwe vergrootglas, zonder dubbele cirkel. */
.search button,
body .search button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip) {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #294e7e !important;
}
.search button:hover,
body .search button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip):hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #203e65 !important;
}
.searchIcon { stroke: #294e7e !important; }
@media (max-width: 620px) {
  .search input {
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent;
    caret-color: transparent;
    appearance: none;
    -webkit-appearance: none;
  }
  .search input::placeholder { color: transparent; opacity: 0; }
  .search input:focus {
    width: min(70vw, 300px);
    padding: 10px 42px 10px 12px !important;
    border: 1px solid var(--line) !important;
    background: #fff !important;
    color: var(--ink);
    caret-color: var(--ink);
    box-shadow: 0 0 0 3px #3c68a21a !important;
  }
}
.qicon .ui-icon { width:22px; height:22px; }
.icon .ui-icon { width:23px; height:23px; }
.help-icon .ui-icon { width:21px; height:21px; }
.emergency-icon .ui-icon { width:22px; height:22px; }
.submission-symbol .ui-icon { width:20px; height:20px; }
.meta i .ui-icon { width:15px; height:15px; }
.menu .menu-icon, #menuBtn .menu-icon { width:24px; height:24px; }


/* CTA’s hebben op elke pagina het paarse Overvecht-accent. */
.callout h1, .callout h2, .callout h3, .callout h4 { color:#fff !important; }
.callout p { color:#e1e9f4 !important; }
a.button, .featureBand a.btn, body button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip).form-submit, body button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip).submit, body button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip).step-button:not(.secondary) { border-color:#b93a83 !important; background:#b93a83 !important; color:#fff !important; }
a.button:hover, .featureBand a.btn:hover, body button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip).form-submit:hover, body button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip).submit:hover, body button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip).step-button:not(.secondary):hover { border-color:#9f2d70 !important; background:#9f2d70 !important; color:#fff !important; }
.kicker { color:#9f2d70 !important; }
.hero .kicker { color:#f5c0dc !important; }


/* Zelfstandige wijkkaartknop in de bovenbalk. */
.top .topmap-link, .topbar .topmap-link {
  gap: 6px;
  width: 104px;
  min-width: 104px;
  max-width: 104px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  box-sizing: border-box;
  justify-content: center;
  padding: 0 10px !important;
  font-size: 12px;
  white-space: nowrap;
}
.topmap-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Actuele mededeling in de bovenbalk. */
.top .announcement-ticker, .topbar .announcement-ticker {
  display:flex; align-items:center; gap:9px; flex:1; min-width:0; margin-right:auto; overflow:visible; position:relative; z-index:1;
}
.announcement-pulse {
  position:relative; display:block; width:9px; height:9px; flex:none; margin:0 2px 0 7px; border-radius:50%; background:#b93a83;
}
.announcement-pulse::after {
  content:""; position:absolute; inset:-4px; border:1px solid #b93a8380; border-radius:50%; pointer-events:none;
  animation:announcement-ring 1.5s ease-out infinite;
}
.announcement-viewport { display:block; flex:1; min-width:0; overflow:hidden; white-space:nowrap; }
.announcement-message {
  display:inline-flex; align-items:center; gap:5px; min-width:max-content; color:#203e65!important; font-size:12px; font-weight:850!important;
  animation:announcement-scroll var(--announcement-duration,26s) linear infinite;
}
.announcement-label { color:#b93a83; font-weight:900; }
.announcement-copy { color:#203e65; font-weight:850; }
.announcement-message:hover, .announcement-message:focus-visible { animation-play-state:paused; }
@keyframes announcement-scroll { from { transform:translateX(22%); } to { transform:translateX(-100%); } }
@keyframes announcement-ring { 0% { opacity:.9; transform:scale(.6); } 75%,100% { opacity:0; transform:scale(1.65); } }
@media(max-width:620px) {
  /* Keep the announcement readable on narrow screens: give it a full row and place the map link beneath it. */
  .top .wrap, .topbar .topinner { height:auto; min-height:58px; flex-wrap:wrap; align-content:center; row-gap:4px; }
  .top .announcement-ticker, .topbar .announcement-ticker { order:0; flex:1 0 100%; width:100%; min-height:20px; gap:7px; margin:0; }
  .top .topmap-link, .topbar .topmap-link { order:1; margin-left:auto; }
  .announcement-viewport { min-height:18px; }
  .announcement-message { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .announcement-pulse::after { animation:none; }
  .announcement-viewport { text-overflow:ellipsis; }
  .announcement-message { display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; animation:none; }
}

@media (min-width: 851px) and (max-width: 1100px) {
  .navinner { flex-wrap: wrap; }
}

/* Extra onderruimte onder de slogan en wijkkaartknop in de bovenbalk. */
.top,
.topbar { padding: 8px 0; }
@media (max-width: 620px) {
  .top,
  .topbar { padding: 10px 0; }
}

/* Site-only chat assistant */
.wa-trigger{position:fixed;z-index:10020;right:20px;bottom:20px;width:58px;height:58px;display:grid;place-items:center;border:0;border-radius:50%;background:#b93a83;color:#fff;box-shadow:0 8px 24px #18304b3b;cursor:pointer;transition:transform .18s,background .18s}
.wa-trigger:hover,.wa-trigger:focus-visible{background:#a22e72;transform:translateY(-2px)}
.wa-trigger svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-panel{position:fixed;z-index:10019;right:20px;bottom:90px;width:min(390px,calc(100vw - 28px));height:min(590px,calc(100dvh - 115px));min-height:360px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #dce5f0;border-radius:18px;background:#fff;box-shadow:0 18px 54px #142b4533;color:#203e65}
.wa-panel[hidden]{display:none}
.wa-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:#f6f8fb;border-bottom:1px solid #e5eaf0}
.wa-heading{display:flex;align-items:center;gap:10px;min-width:0}
.wa-avatar{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:13px;background:linear-gradient(135deg,#3c68a2,#b93a83);color:white;font-size:18px;font-weight:900}
.wa-heading strong{display:block;color:#203e65;font-size:15px;line-height:1.2}
.wa-heading small{display:block;margin-top:3px;color:#64748b;font-size:11px}
.wa-close{width:34px;height:34px;flex:none;border:0;border-radius:50%;background:transparent;color:#294e7e;font-size:27px;line-height:1;cursor:pointer}
.wa-close:hover,.wa-close:focus-visible{background:#e8eef6}
.wa-messages{flex:1;overflow-y:auto;padding:15px 13px 9px;background:#fff;overscroll-behavior:contain}
.wa-message{width:fit-content;max-width:91%;margin:0 0 11px;padding:10px 12px;border-radius:13px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.wa-message p{margin:0;color:inherit}
.wa-assistant{border:1px solid #e4eaf2;background:#f6f8fb;color:#506176;border-top-left-radius:4px}
.wa-user{margin-left:auto;background:#3c68a2;color:#fff!important;border-top-right-radius:4px}
.wa-user p,.wa-user p *{color:#fff!important}
.wa-result{display:flex;flex-direction:column;gap:2px;margin-top:9px;padding:9px 10px;border:1px solid #dce5f0;border-radius:9px;background:#fff;color:#294e7e;text-decoration:none}
.wa-result:hover,.wa-result:focus-visible{border-color:#9db4d0;background:#f5f8fc}
.wa-result strong{font-size:12px;color:#203e65}
.wa-result span{font-size:11px;font-weight:750;color:#9f2d70}
.wa-result small{display:-webkit-box;overflow:hidden;color:#64748b;font-size:11px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.wa-contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.wa-contact a{display:inline-flex;align-items:center;padding:7px 10px;border-radius:8px;background:#294e7e;color:#fff;font-size:11px;font-weight:800;text-decoration:none}
.wa-contact a:last-child{background:#b93a83}
.wa-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 10px}
.wa-suggestions button{padding:7px 9px;border:1px solid #dce5f0;border-radius:999px;background:#fff;color:#294e7e;font-size:11px;line-height:1.3;font-weight:750;text-align:left;cursor:pointer}
.wa-suggestions button:hover,.wa-suggestions button:focus-visible{border-color:#9db4d0;background:#f5f8fc}
.wa-status{min-height:18px;padding:0 15px;color:#64748b;font-size:11px}
.wa-form{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #e5eaf0;background:#fff}
.wa-form input{width:100%;min-width:0;height:42px;padding:0 12px;border:1px solid #dce5f0;border-radius:10px;background:#f9fafc;color:#203e65;font:inherit;font-size:13px;outline:none}
.wa-form input:focus{border-color:#3c68a2;box-shadow:0 0 0 3px #3c68a21a}
.wa-form>button{width:42px;height:42px;display:grid;place-items:center;flex:none;border:0;border-radius:10px;background:#294e7e;color:#fff;cursor:pointer}
.wa-form>button:hover,.wa-form>button:focus-visible{background:#203e65}
.wa-form>button:disabled{opacity:.55;cursor:wait}
.wa-form svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-privacy{margin:0;padding:0 13px 10px;background:#fff;color:#7a8797;font-size:10px;text-align:center}
.wa-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:620px){.wa-trigger{right:14px;bottom:14px;width:54px;height:54px}.wa-panel{right:10px;bottom:78px;width:calc(100vw - 20px);height:min(590px,calc(100dvh - 94px));min-height:320px;border-radius:16px}.wa-header{padding:13px 14px}}
@media(prefers-reduced-motion:reduce){.wa-trigger{transition:none}}

/* Toon op elke pagina dezelfde pulserende punt en gelijke afstand tot de labeltekst. */
body .hero .kicker,
body .hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero .kicker::before,
.hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #f2b1d4;
  box-shadow: 0 0 0 0 #f2b1d466;
  animation: heroDotPulse 1.6s ease-in-out infinite;
}
@keyframes heroDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .28; transform: scale(.78); }
}
.hero h1 .hero-title-dot {
  animation: none;
  transform: none;
}
body .hero h1 { margin: 8px 0; }
@media (prefers-reduced-motion: reduce) {
  .hero .kicker::before,
  .hero .eyebrow::before { animation: none; }
}

/* Paginering van de RTV Utrecht-feed gebruikt dezelfde rondedraaiknoppen als de advertentie. */
body .rss-pagination button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip){display:grid!important;place-items:center!important;gap:0!important;width:42px!important;height:42px!important;min-height:42px!important;max-width:none!important;padding:0!important;border:1px solid #e3eaf2!important;border-radius:50%!important;background:#fff!important;color:#294e7e!important;box-shadow:0 3px 10px #18304b0c!important}
body .rss-pagination button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip):hover,body .rss-pagination button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip):focus-visible{border-color:#294e7e!important;background:#294e7e!important;color:#fff!important;transform:scale(1.04)}
body .rss-pagination button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip):disabled{opacity:.42;cursor:default;transform:none}

/* De kalenderdagen behouden hun lichte Overvecht-blauwe tint, ook met globale knopstijlen. */
body .activity-calendar button.calendar-day {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 54px !important;
  max-width: none !important;
  padding: 6px 2px 4px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: #f5f8fd !important;
  color: #253b54 !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  box-shadow: none !important;
}
body .activity-calendar button.calendar-day.has-events:not(.is-selected) {
  background: #eaf2fc !important;
}
body .activity-calendar button.calendar-day.is-selected,
body .activity-calendar button.calendar-day.is-selected.has-events {
  background: #dceafb !important;
  color: #203e65 !important;
  border-color: #8eacd5 !important;
}
body .activity-calendar button.calendar-day:hover,
body .activity-calendar button.calendar-day:focus-visible {
  background: #e6effb !important;
  border-color: #9db4d0 !important;
  color: #203e65 !important;
}
body .activity-calendar .activity-cal-nav button {
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #dce4ee !important;
  border-radius: 10px !important;
  background: #eaf2fc !important;
  color: #294e7e !important;
  box-shadow: none !important;
}
body .activity-calendar .activity-cal-nav button:hover,
body .activity-calendar .activity-cal-nav button:focus-visible {
  background: #dceafb !important;
  border-color: #9db4d0 !important;
}
@media (max-width: 850px) {
  body .activity-calendar.activity-calendar-home button.calendar-day { min-height: 45px !important; font-size: 12px !important; }
}
@media (max-width: 620px) {
  body .activity-calendar button.calendar-day { min-height: 42px !important; border-radius: 8px !important; }
  body .activity-calendar.activity-calendar-home button.calendar-day { min-height: 40px !important; }
}

/* De kalender staat onder de globale knopregel; deze specifieke regels houden de dagvakken licht. */
body .activity-calendar button.calendar-day:not(#menuBtn):not(.menu):not(.submission-option):not(.chip) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  min-height: 54px !important;
  max-width: none !important;
  padding: 6px 2px 4px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: #f5f8fd !important;
  color: #253b54 !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}
body .activity-calendar button.calendar-day.has-events:not(.is-selected):not(#menuBtn):not(.menu):not(.submission-option):not(.chip) {
  background: #eaf2fc !important;
}
body .activity-calendar button.calendar-day.is-selected:not(#menuBtn):not(.menu):not(.submission-option):not(.chip),
body .activity-calendar button.calendar-day.is-selected.has-events:not(#menuBtn):not(.menu):not(.submission-option):not(.chip) {
  background: #dceafb !important;
  color: #203e65 !important;
  border-color: #8eacd5 !important;
}
body .activity-calendar button.calendar-day:hover:not(#menuBtn):not(.menu):not(.submission-option):not(.chip),
body .activity-calendar button.calendar-day:focus-visible:not(#menuBtn):not(.menu):not(.submission-option):not(.chip) {
  background: #e6effb !important;
  border-color: #9db4d0 !important;
  color: #203e65 !important;
}
body .activity-calendar .activity-cal-nav button:not(#menuBtn):not(.menu):not(.submission-option):not(.chip) {
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #dce4ee !important;
  border-radius: 10px !important;
  background: #eaf2fc !important;
  color: #294e7e !important;
  box-shadow: none !important;
}
body .activity-calendar .activity-cal-nav button:hover:not(#menuBtn):not(.menu):not(.submission-option):not(.chip),
body .activity-calendar .activity-cal-nav button:focus-visible:not(#menuBtn):not(.menu):not(.submission-option):not(.chip) {
  background: #dceafb !important;
  border-color: #9db4d0 !important;
}
@media (max-width: 850px) {
  body .activity-calendar.activity-calendar-home button.calendar-day:not(#menuBtn):not(.menu):not(.submission-option):not(.chip) { min-height: 45px !important; font-size: 12px !important; }
}
@media (max-width: 620px) {
  body .activity-calendar button.calendar-day:not(#menuBtn):not(.menu):not(.submission-option):not(.chip) { min-height: 42px !important; border-radius: 8px !important; }
  body .activity-calendar.activity-calendar-home button.calendar-day:not(#menuBtn):not(.menu):not(.submission-option):not(.chip) { min-height: 40px !important; }
}

/* Compact, predictable form actions on narrow screens. */
@media (max-width: 560px) {
  form:not(.wa-form):not(.search) button[type="submit"],
  form:not(.wa-form):not(.search) button.form-submit,
  form:not(.wa-form):not(.search) button.submit {
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
  }

  .community-form button.form-submit {
    width: 100% !important;
    justify-content: center !important;
    white-space: normal;
  }

  .wizard-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 9px;
  }

  .wizard-controls .step-button,
  .wizard-controls .submit {
    width: 100% !important;
    min-width: 0;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 9px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: normal;
  }

  .wizard-controls:has(#nextStep:not([hidden])) #submitStep {
    grid-column: 1 / -1;
  }
}

.legal-footer-links {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 8px;
  color: #aebdcb;
  font-size: 11px;
}
.legal-footer-links a {
  display: inline !important;
  margin: 0 !important;
  color: inherit !important;
  text-decoration: underline;
  text-decoration-color: #ffffff50;
  text-underline-offset: 3px;
}
.legal-footer-links a:hover,
.legal-footer-links a:focus-visible { color: #fff !important; }
.legal-content { padding: 34px 0 64px; background: #f7f9fc; }
.legal-document {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 38px);
  border: 1px solid #e3e9f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px #18304b0a;
}
.legal-document .legal-updated { margin: 0 0 22px; color: #78879a; font-size: 13px; }
.legal-document > p { color: #5f6f82; }
.legal-document section { margin-top: 27px; }
.legal-document h2 { margin: 0 0 8px; color: #203e65; font-size: 20px; line-height: 1.3; }
.legal-document h3 { margin: 16px 0 6px; color: #294e7e; font-size: 16px; }
.legal-document p, .legal-document li { color: #5f6f82; font-size: 14px; line-height: 1.7; }
.legal-document p { margin: 7px 0; }
.legal-document ul { padding-left: 21px; }
.legal-document li + li { margin-top: 5px; }
.legal-document a { color: #294e7e; text-decoration: underline; text-underline-offset: 2px; }
.legal-contact { margin-top: 28px; padding: 16px 18px; border-radius: 12px; background: #eef3fa; color: #536477; font-size: 14px; }
@media (max-width: 620px) {
  .legal-footer-links { justify-content: flex-start; gap: 8px 14px; }
  .legal-content { padding: 22px 0 46px; }
  .legal-document { border-radius: 14px; }
  .legal-document h2 { font-size: 18px; }
}

/* Compacte, gelijkhoge knoppen in de meerstapsformulieren. */
.wizard-controls > button.step-button,
.wizard-controls > button.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  margin: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.wizard-controls > button[hidden] { display: none !important; }
body .wizard-controls > button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip)[hidden] {
  display: none !important;
}
@media (max-width: 560px) {
  body form .wizard-controls > button:not(.menu):not(#menuBtn):not(.submission-option):not(.chip) {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}
/* Make category choices easy to spot across the site. */
.filters > .chip{border-color:#e4c5d8;background:#f8edf4;color:#76345f;transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s}
.filters > .chip:hover,.filters > .chip:focus-visible{border-color:#b93a83;background:#f1dce9;color:#762454;outline-color:#b93a83}
.filters > .chip.active{border-color:#a52f74;background:#b93a83;color:#fff;box-shadow:0 2px 8px #b93a8330}
.filters > .chip:focus-visible{outline:3px solid #b93a8355;outline-offset:2px}
.activity-filter select[data-category-filter],.camera-filter-label select{border:1px solid #dfbdd2!important;border-radius:10px!important;background-color:#f8edf4!important;color:#76345f!important}
.activity-filter select[data-category-filter]:focus,.camera-filter-label:focus-within{border-color:#b93a83;box-shadow:0 0 0 3px #b93a8322}
/* Directory chips have legacy !important defaults; override them explicitly here. */
.filters > button.chip{border-color:#e4c5d8!important;background:#f8edf4!important;color:#76345f!important}
.filters > button.chip:hover,.filters > button.chip:focus-visible{border-color:#b93a83!important;background:#f1dce9!important;color:#762454!important}
.filters > button.chip.active{border-color:#a52f74!important;background:#b93a83!important;color:#fff!important;box-shadow:0 2px 8px #b93a8330!important}