/* telefoon_filters.css (onveranderd uit je <style> block) */

.filters{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:nowrap;
  width:100%;
}
.filters > .search-wrap{
  position:relative;
  flex: 1 1 360px;
  min-width:260px;
}
.filters > .filter-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex: 0 0 auto;
  flex-wrap:nowrap;
  min-width:0;
}
.filters select.select, .filters button.select, .filters a.select{
  flex: 0 0 auto;
  white-space:nowrap;
}
.filters select.select.branch-select{
  min-width:180px;
}
.filters select.select.type-select{
  min-width:180px;
}
.popular-select{
  min-width:200px;
}
.mobile-toggle-wrap{
  display:none;
}
.mobile-extra{
  display:none;
}
.search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  opacity:.55;
  pointer-events:none;
}
.search{
  padding-left:40px;
  width:100%;
}
.tabs{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  justify-content:flex-start;
}
.tab-select{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.tab-select.active{
  background: rgba(0,0,0,.06);
}
@media (max-width: 900px){
  .filters{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "search toggle" "extra extra";
    column-gap:10px;
    row-gap:12px;
    align-items:center;
  }
  .filters > .search-wrap{
    grid-area: search;
  }
  .mobile-toggle-wrap{
    grid-area: toggle;
    display:flex;
    justify-content:flex-end;
  }
  .mobile-toggle-btn{
    width:100%;
    white-space:nowrap;
    cursor:pointer;
  }
  .mobile-extra{
    grid-area: extra;
    display:none;
  }
  .mobile-extra.is-open{
    display:block;
  }
  /* ✅ Mobile grid: branche/type rij, daaronder highlights/popular rij */
  .mobile-extra .mobile-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "branch type" "high popular" "submit reset";
    column-gap:8px;
    row-gap:12px;
    align-items:center;
  }
  .mobile-extra .mobile-grid select.select.branch-select{
    grid-area: branch;
    width:100%;
    min-width:0;
  }
  .mobile-extra .mobile-grid select.select.type-select{
    grid-area: type;
    width:100%;
    min-width:0;
  }
  /* ✅ Tabs wrapper verdwijnt uit layout; kinderen worden grid-items */
  .mobile-extra .mobile-grid .tabs{
    display: contents;
  }
  .mobile-extra .mobile-grid .tabs .tab-select{
    grid-area: high;
    width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-extra .mobile-grid .tabs .popular-select{
    grid-area: popular;
    width:100%;
    min-width:0; /* override min-width:200px */
  }
  .mobile-extra .mobile-grid button.select{
    grid-area: submit;
    width:100%;
  }
  .mobile-extra .mobile-grid a.select{
    grid-area: reset;
    width:100%;
    text-align:center;
  }
  .filters > .filter-row{
    display:none;
  }
}
.filters.force-mobile{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "search toggle" "extra extra";
  column-gap:10px;
  row-gap:12px;
  align-items:center;
}
.filters.force-mobile > .search-wrap{
  grid-area: search;
}
.filters.force-mobile .mobile-toggle-wrap{
  grid-area: toggle;
  display:flex;
  justify-content:flex-end;
}
.filters.force-mobile .mobile-toggle-btn{
  width:100%;
  white-space:nowrap;
  cursor:pointer;
}
.filters.force-mobile .mobile-extra{
  grid-area: extra;
  display:none;
}
.filters.force-mobile .mobile-extra.is-open{
  display:block;
}
/* ✅ Force-mobile: zelfde grid-areas als mobile */
.filters.force-mobile .mobile-extra .mobile-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "branch type" "high popular" "submit reset";
  column-gap:8px;
  row-gap:12px;
  align-items:center;
}
.filters.force-mobile .mobile-extra .mobile-grid select.select.branch-select{
  grid-area: branch;
  width:100%;
  min-width:0;
}
.filters.force-mobile .mobile-extra .mobile-grid select.select.type-select{
  grid-area: type;
  width:100%;
  min-width:0;
}
.filters.force-mobile .mobile-extra .mobile-grid .tabs{
  display: contents;
}
.filters.force-mobile .mobile-extra .mobile-grid .tabs .tab-select{
  grid-area: high;
  width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.filters.force-mobile .mobile-extra .mobile-grid .tabs .popular-select{
  grid-area: popular;
  width:100%;
  min-width:0;
}
.filters.force-mobile .mobile-extra .mobile-grid button.select{
  grid-area: submit;
  width:100%;
}
.filters.force-mobile .mobile-extra .mobile-grid a.select{
  grid-area: reset;
  width:100%;
  text-align:center;
}
.filters.force-mobile > .filter-row{
  display:none;
}