/* WoonRadar map / unified visual system — 2026-11-03
   A single map skin; styling only. Do not change listing, routing, tiles or map behaviors. */
:root {
  --wr-map-navy:#05083F;
  --wr-map-navy-hover:#10165C;
  --wr-map-gold:#C8A460;
  --wr-map-ivory:#FFFDFA;
  --wr-map-border:#E7DED0;
  --wr-map-ink:#172645;
  --wr-map-muted:#657080;
}
/* Outer map card, heading, and unobtrusive supporting controls. */
html body .housing-results .map-section,
html body .map-section {
  background:var(--wr-map-ivory)!important;
  border:1px solid var(--wr-map-border)!important;
  border-radius:18px!important;
  box-shadow:0 10px 32px rgba(5,8,63,.045)!important;
  padding:clamp(14px,2vw,22px)!important;
  color:var(--wr-map-ink)!important;
}
html body .map-section .map-top h2,
html body .map-section #mapHeading {
  color:var(--wr-map-navy)!important;
  font-family:'DM Sans',Arial,sans-serif!important;
  font-size:clamp(16px,2vw,19px)!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
}
html body .map-section .map-top p,
html body .map-section #mapNotice,
html body .map-section .map-move-choice {
  color:var(--wr-map-muted)!important;
  font-family:'DM Sans',Arial,sans-serif!important;
}
html body .map-section #mapToggle,
html body .map-section .map-top #mapToggle {
  color:#FFFDF9!important;
  background:var(--wr-map-navy)!important;
  background-color:var(--wr-map-navy)!important;
  border:1px solid var(--wr-map-navy)!important;
  border-radius:11px!important;
  box-shadow:none!important;
  font:600 13px/1.3 'DM Sans',Arial,sans-serif!important;
  padding:11px 16px!important;
  min-height:44px!important;
  transition:background-color .18s ease,border-color .18s ease!important;
}
html body .map-section #mapToggle:hover,
html body .map-section #mapToggle:focus-visible {
  background:var(--wr-map-navy-hover)!important;
  border-color:var(--wr-map-navy-hover)!important;
}
html body .map-section #mapToggle:focus-visible {
  outline:2px solid var(--wr-map-gold)!important;
  outline-offset:3px!important;
}
html body .map-section .wr-map-frame {border-radius:14px!important;}
html body .map-section #woningMap {
  background:#F0EFE9!important;
  border:1px solid #E9E5DA!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
/* Keep OSM labels and details recognisable while tempering saturated raster tiles. */
html body .map-section #woningMap .leaflet-tile-pane {
  filter:none!important;
}
/* Consistent navy and ivory pins, including dynamically generated grouped prices. */
html body #woningMap .leaflet-marker-icon.map-price-marker.map-group-marker>span,
html body #woningMap .map-price-marker.map-group-marker>span,
html body #woningMap .map-group-marker>span,
html body #woningMap .marker-cluster div,
html body #woningMap .marker-cluster span {
  background:var(--wr-map-navy)!important;
  background-color:var(--wr-map-navy)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  border:2px solid var(--wr-map-ivory)!important;
  box-shadow:0 3px 11px rgba(5,8,63,.18)!important;
  border-radius:999px!important;
  font:700 13px/1.3 'DM Sans',Arial,sans-serif!important;
}
html body #woningMap .leaflet-marker-icon.map-price-marker.map-group-marker:hover>span,
html body #woningMap .map-price-marker.map-group-marker:hover>span,
html body #woningMap .map-group-marker:hover>span {
  background:var(--wr-map-navy-hover)!important;
  background-color:var(--wr-map-navy-hover)!important;
  border-color:var(--wr-map-gold)!important;
}
html body #woningMap .map-price-marker:not(.map-group-marker)>span {
  color:var(--wr-map-navy)!important;
  -webkit-text-fill-color:var(--wr-map-navy)!important;
  background:var(--wr-map-ivory)!important;
  border:1.5px solid var(--wr-map-navy)!important;
  border-radius:12px!important;
  box-shadow:0 2px 8px rgba(5,8,63,.13)!important;
  font:700 12px/1.4 'DM Sans',Arial,sans-serif!important;
}
html body #woningMap .map-price-marker:not(.map-group-marker):is(:hover,:focus)>span {
  background:var(--wr-map-navy)!important;
  border-color:var(--wr-map-navy)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}
/* Leaflet zoom buttons, popup and pagination now share website language. */
html body #woningMap .leaflet-bar {
  border:1px solid #DFD6C9!important;
  border-radius:11px!important;
  overflow:hidden!important;
  box-shadow:0 3px 13px rgba(5,8,63,.10)!important;
}
html body #woningMap .leaflet-bar a {
  color:var(--wr-map-navy)!important;
  background:var(--wr-map-ivory)!important;
  border-bottom-color:var(--wr-map-border)!important;
  box-shadow:none!important;
}
html body #woningMap .leaflet-bar a:hover {background:#F1EDE5!important;}
html body #woningMap .leaflet-bar a:focus-visible {
  outline:2px solid var(--wr-map-gold)!important;
  outline-offset:-3px!important;
}
html body #woningMap .leaflet-popup-content-wrapper {
  border:1px solid var(--wr-map-border)!important;
  border-radius:15px!important;
  background:var(--wr-map-ivory)!important;
  box-shadow:0 12px 32px rgba(5,8,63,.18)!important;
  overflow:hidden!important;
}
html body #woningMap .leaflet-popup-tip {background:var(--wr-map-ivory)!important;}
html body #woningMap .leaflet-popup-content {color:var(--wr-map-ink)!important;font-family:'DM Sans',Arial,sans-serif!important;}
html body #woningMap .leaflet-popup-close-button {color:var(--wr-map-navy)!important;}
html body #woningMap .map-preview-body {background:var(--wr-map-ivory)!important;}
html body #woningMap .map-preview :is(.map-preview-price,strong) {color:var(--wr-map-navy)!important;}
html body #woningMap .map-preview-details,
html body #woningMap .map-preview>p {color:var(--wr-map-muted)!important;}
html body #woningMap .map-preview a {color:var(--wr-map-navy)!important;text-underline-offset:3px!important;}
html body #woningMap .map-preview a:hover {color:var(--wr-map-navy-hover)!important;}
html body #woningMap .map-result-pages button {
  background:var(--wr-map-ivory)!important;
  border:1px solid var(--wr-map-border)!important;
  border-radius:10px!important;
  color:var(--wr-map-navy)!important;
  box-shadow:none!important;
}
html body #woningMap .map-result-pages button:not(:disabled):hover {
  background:#F2EEE7!important;
  border-color:var(--wr-map-gold)!important;
}
html body #woningMap .map-result-pages button:focus-visible {
  outline:2px solid var(--wr-map-gold)!important;
  outline-offset:2px!important;
}
/* © attribution disclosures remain clearly readable and interactive. */
html body .map-section .wr-map-info summary {
  background:var(--wr-map-ivory)!important;
  color:var(--wr-map-navy)!important;
  border:1px solid var(--wr-map-border)!important;
  box-shadow:0 3px 10px rgba(5,8,63,.10)!important;
}
html body .map-section .wr-map-info summary:hover {
  border-color:var(--wr-map-gold)!important;
  background:#F6F0E5!important;
}
html body .map-section .wr-map-info-panel {
  color:var(--wr-map-ink)!important;
  background:var(--wr-map-ivory)!important;
  border:1px solid var(--wr-map-border)!important;
  box-shadow:0 12px 28px rgba(5,8,63,.14)!important;
}
html body .map-section .wr-map-info-panel a,
html body #woningMap .leaflet-control-attribution a {color:var(--wr-map-navy)!important;}
html body .map-section #woningMap .leaflet-control-attribution {color:var(--wr-map-ink)!important;}
@media(max-width:600px){
  html body .map-section{padding:13px!important;border-radius:15px!important;}
  html body .map-section #woningMap{border-radius:11px!important;}
}
@media(prefers-reduced-motion:reduce){
  html body .map-section #mapToggle{transition:none!important;}
}

/* A compact count-plus-price chip at ordinary city zooms. */
html body #woningMap .map-price-marker.map-group-marker>span {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  min-width:36px!important;
  max-width:138px!important;
  min-height:34px!important;
  padding:5px 11px!important;
  white-space:nowrap!important;
  font-size:12px!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
  transform:translateX(-50%);
  position:relative;
  left:50%;
}
html body #woningMap .housing-group-preview .map-preview-image {display:none!important;}
html body #woningMap .housing-group-preview .map-result {
  border-bottom:1px solid var(--wr-map-border)!important;
  padding:4px 0 8px!important;
  margin:0!important;
}
html body #woningMap .housing-group-preview .map-preview-body {
  padding:9px 14px!important;
}
html body #woningMap .housing-group-preview .map-preview-price {
  font-size:16px!important;
  line-height:1.35!important;
  margin:0 0 3px!important;
}
html body #woningMap .housing-group-preview .map-preview-body strong {
  font-size:13px!important;
  line-height:1.45!important;
}
html body #woningMap .housing-group-preview .map-preview-details{
  margin:4px 0!important;
}
html body #woningMap .housing-group-preview .map-preview-body a {
  min-height:24px!important;
  font-size:12px!important;
}
html body #woningMap .housing-group-preview .leaflet-popup-content {
  width:276px!important;
  max-width:calc(100vw - 95px)!important;
}

/* A grouped pin displays only its lowest known rent; no count badge. */
html body #woningMap .map-price-marker.map-group-marker>span {
  box-sizing:border-box!important;
  display:flex!important;
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
  min-height:34px!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  padding:6px 7px!important;
  border-radius:12px!important;
  font:700 12px/1.25 'DM Sans',Arial,sans-serif!important;
  letter-spacing:0!important;
  background:#05083F!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  transform:none!important;
  position:static!important;
}

/* WoonRadar map: original readable OpenStreetMap tiles, elegant restrained overlays. */
html body #woningMap :is(.leaflet-tile-pane,.leaflet-tile,.leaflet-tile-container) {
 filter:none!important;opacity:1!important;
}
html body .housing-results[data-map="true"] .map-section{
 background:#FFFDF9!important;border:1px solid #E7DED0!important;
 border-radius:17px!important;padding:clamp(12px,1.7vw,20px)!important;
 box-shadow:0 8px 25px rgba(5,8,63,.045)!important;
}
html body .housing-results[data-map="true"] .map-top{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 flex-wrap:wrap!important;gap:10px!important;margin-bottom:12px!important;
}
html body .housing-results[data-map="true"] #woningMap{
 box-sizing:border-box!important;width:100%!important;
 height:clamp(340px,54vh,580px)!important;min-height:340px!important;
 margin-top:0!important;border-radius:12px!important;
 background:#EFEFE9!important;border:1px solid #E2DFD7!important;
}
html body #woningMap .map-price-marker>span,
html body #woningMap .map-price-marker.map-group-marker>span{
 box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;
 width:96px!important;min-width:96px!important;max-width:96px!important;
 min-height:34px!important;margin:0!important;padding:6px 7px!important;
 transform:none!important;position:static!important;
 white-space:nowrap!important;border-radius:11px!important;
 font:700 12px/1.2 'DM Sans',Arial,sans-serif!important;
 box-shadow:0 3px 10px rgba(5,8,63,.17)!important;
}
html body #woningMap .map-price-marker:not(.map-group-marker)>span{
 color:#05083F!important;-webkit-text-fill-color:#05083F!important;
 background:#FFFDF9!important;border:1.5px solid #05083F!important;
}
html body #woningMap .map-price-marker.map-group-marker>span{
 color:#FFF!important;-webkit-text-fill-color:#FFF!important;
 background:#05083F!important;border:1.5px solid #FFFDF9!important;
}
html body #woningMap .map-price-marker:is(:hover,:focus)>span{
 border-color:#C8A460!important;box-shadow:0 4px 13px rgba(5,8,63,.22)!important;
}
html body #woningMap .leaflet-popup-content-wrapper {
 background:#FFFDF9!important;border:1px solid #E7DED0!important;
 border-radius:14px!important;box-shadow:0 11px 28px rgba(5,8,63,.16)!important;
}
html body #woningMap .leaflet-popup-content{
 margin:0!important;font-family:'DM Sans',Arial,sans-serif!important;
 max-width:calc(100vw - 90px)!important;
}
html body #woningMap .map-preview-body{background:#FFFDF9!important;padding:12px 14px!important;}
html body #woningMap .map-preview-price{
 font:700 17px/1.3 'DM Sans',Arial,sans-serif!important;color:#05083F!important;
}
html body #woningMap .map-preview-body strong{
 font:650 13px/1.4 'DM Sans',Arial,sans-serif!important;color:#26344B!important;
}
html body #woningMap .map-preview-details{color:#536276!important;font-size:12px!important;}
html body #woningMap .map-preview a{
 color:#05083F!important;-webkit-text-fill-color:#05083F!important;
 text-decoration-color:#C8A460!important;text-underline-offset:3px!important;
}
html body #woningMap .leaflet-control-zoom a{
 display:flex!important;align-items:center!important;justify-content:center!important;
 width:35px!important;height:35px!important;font-size:20px!important;
}
html body #woningMap .leaflet-control-attribution{
 background:rgba(255,253,249,.92)!important;color:#36465A!important;
}
@media(max-width:800px){
 html body .housing-results[data-map="true"] #woningMap{
  height:clamp(310px,48vh,480px)!important;min-height:310px!important;
 }
}

/* Zoom-aware cluster badges: counts, not misleading lowest-rent prices.
   Circular navy markers read clearly over OSM place names and roads. */
html body #woningMap .leaflet-marker-icon.map-price-marker.map-count-marker {
  background:transparent!important;border:0!important;box-shadow:none!important;
  width:46px!important;height:46px!important;
}
html body #woningMap .leaflet-marker-icon.map-price-marker.map-count-marker > span{
  box-sizing:border-box!important;position:static!important;transform:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:46px!important;min-width:46px!important;max-width:46px!important;
  height:46px!important;min-height:46px!important;max-height:46px!important;
  padding:0 4px!important;margin:0!important;
  border-radius:50%!important;border:3px solid #FFFDF9!important;
  background:#05083F!important;background-color:#05083F!important;
  color:#FFF!important;-webkit-text-fill-color:#FFF!important;
  font:700 15px/1 'DM Sans',Arial,sans-serif!important;
  box-shadow:0 3px 13px rgba(5,8,63,.22)!important;
  white-space:nowrap!important;
}
html body #woningMap .leaflet-marker-icon.map-price-marker.map-count-marker:is(:hover,:focus-visible) > span {
  background:#131B60!important;border-color:#C8A460!important;
  box-shadow:0 4px 16px rgba(5,8,63,.28)!important;
}
html body #woningMap .leaflet-marker-icon.map-price-marker.map-count-marker:focus-visible {
  outline:2px solid #C8A460!important;outline-offset:3px!important;border-radius:50%!important;
}

/* Overlapping listings at full street zoom: starting rent plus listing count. */
html body #woningMap .leaflet-marker-icon.map-group-price-marker {
  position:relative!important;
  overflow:visible!important;
  width:116px!important;
  height:36px!important;
}
html body #woningMap .leaflet-marker-icon.map-group-price-marker > span {
  box-sizing:border-box!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:116px!important;
  height:36px!important;
  padding:0 8px!important;
  border-radius:9px!important;
  background:#05083f!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid #fffdf9!important;
  box-shadow:0 2px 7px rgba(5,8,63,.18)!important;
  white-space:nowrap!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:-.025em!important;
}
html body #woningMap .leaflet-marker-icon.map-group-price-marker > small.map-price-group-total {
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:absolute!important;
  top:-9px!important;
  right:-9px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 4px!important;
  border:1px solid #fffdf9!important;
  border-radius:100px!important;
  background:#f4ebdf!important;
  color:#05083f!important;
  font:700 10px/1 'DM Sans',Arial,sans-serif!important;
}

/* Street View is the first, clearly visible action in every housing popup. */
html body #woningMap .map-preview > a.wr-map-streetview-action {
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:calc(100% - 28px)!important;
  min-height:40px!important;
  margin:10px 14px 6px!important;
  padding:9px 12px!important;
  border:1px solid #05083f!important;
  border-radius:9px!important;
  background:#05083f!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font:650 13px/1.3 'DM Sans',Arial,sans-serif!important;
  text-decoration:none!important;
  text-shadow:none!important;
  cursor:pointer!important;
}
html body #woningMap .map-preview > a.wr-map-streetview-action:is(:hover,:focus-visible) {
  background:#10165c!important;
  border-color:#c8a460!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html body #woningMap .map-preview > a.wr-map-streetview-action:focus-visible {
  outline:2px solid #c8a460!important;
  outline-offset:2px!important;
}


/* Larger desktop map, preserving the compact mobile layout. */
@media (min-width: 1000px) {
 html body .housing-results[data-map="true"] #woningMap {
  height:clamp(560px,72vh,790px)!important;
  min-height:560px!important;
 }
 html body .housing-results[data-map="true"] .map-section {
  padding:clamp(18px,2vw,26px)!important;
 }
}
html body .map-section .wr-streetview-map-button{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:42px;padding:9px 15px;border:1px solid #c8a460;
 border-radius:10px;background:#fffdf9;color:#05083f;
 font:600 13px/1.3 'DM Sans',Arial,sans-serif;
 cursor:pointer;white-space:nowrap;
}
html body .map-section .wr-streetview-map-button:hover,
html body .map-section .wr-streetview-map-button:focus-visible{
 background:#f4efe5;border-color:#05083f;
}
html body .map-section .wr-map-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
@media(max-width:600px){
 html body .map-section .wr-streetview-map-button{font-size:12px;padding:8px 12px;min-height:39px}
}

/* Street View only applies to an opened housing map. */
html body .map-section:has(#woningMap[hidden]) .wr-streetview-map-button{display:none!important}