/* WoonRadar: equal search fields and a sliding overview/map switch. */
@media(min-width:801px){
  html body main#woningzoeken > .search-panel .filters{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important; gap:10px!important; margin:0!important;
  }
  html body main#woningzoeken > .search-panel .filters > :is(.search-location,.search-radius,.search-type,.search-rent,.primary-search){
    box-sizing:border-box!important; width:100%!important; min-width:0!important;
    min-height:76px!important; height:76px!important; max-height:none!important;
    margin:0!important; border-radius:12px!important;
  }
  html body main#woningzoeken > .search-panel .filters > .primary-search{
    position:static!important; display:flex!important; align-items:center!important;
    justify-content:center!important; padding:10px 12px!important;
  }
}
@media(max-width:800px){
  html body main#woningzoeken > .search-panel .filters{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important; gap:10px!important;
  }
  html body main#woningzoeken > .search-panel .filters > :is(.search-radius,.search-type,.search-rent){
    box-sizing:border-box!important; min-width:0!important; width:100%!important;
    min-height:78px!important; height:78px!important;
  }
  html body main#woningzoeken > .search-panel .filters > .search-location,
  html body main#woningzoeken > .search-panel .filters > .primary-search{
    grid-column:1/-1!important; width:100%!important; min-height:78px!important;
  }
}
/* Two-option sliding control; the existing buttons retain their behavior. */
.results-views{
  --view-index:0;
  position:relative!important; display:grid!important;
  grid-template-columns:repeat(2,minmax(88px,1fr))!important;
  align-items:center!important; gap:0!important;
  width:max-content!important; min-width:208px!important;
  padding:4px!important; border:1px solid #e5e2dc!important;
  border-radius:999px!important; background:#f1f2f4!important;
  isolation:isolate!important; overflow:hidden!important;
}
.results-views:has(#mapView[aria-pressed="true"]){--view-index:1}
.results-views::before{
  content:""; position:absolute; z-index:-1; top:4px; bottom:4px; left:4px;
  width:calc((100% - 8px)/2); border-radius:999px;
  background:#05083F; box-shadow:0 2px 6px rgba(5,8,63,.18);
  transform:translateX(calc(var(--view-index)*100%));
  transition:transform .24s cubic-bezier(.2,.75,.25,1);
}
.results-views button{
  position:relative!important; z-index:1!important; width:100%!important;
  min-width:0!important; min-height:36px!important; margin:0!important;
  padding:8px 14px!important; border:0!important; border-radius:999px!important;
  background:transparent!important; box-shadow:none!important;
  color:#50596a!important; font:600 13px/1.2 'DM Sans',Arial,sans-serif!important;
  white-space:nowrap!important; transition:color .2s ease!important;
}
.results-views button[aria-pressed="true"]{color:#fff!important}
.results-views #compactView{display:none!important}
@media(max-width:600px){
  .results-views{min-width:190px!important}
  .results-views button{min-height:34px!important;padding:7px 12px!important}
}
@media(prefers-reduced-motion:reduce){.results-views::before,.results-views button{transition:none!important}}
