/* Shared Overvecht purple treatment for category selectors. Keep filters consistent with the wijkgids. */
.filters > button.chip,
.vacancy-filters > button.vacancy-filter,
.traffic-filters > button.traffic-filter,
.wijkkaart-category-options > button.wijkkaart-category-btn {
  box-sizing: border-box;
  min-height: 38px !important;
  padding: 8px 13px !important;
  border: 1px solid #e4c5d8 !important;
  border-radius: 999px !important;
  background: #f8edf4 !important;
  color: #76345f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.filters > button.chip:hover,
.filters > button.chip:focus-visible,
.vacancy-filters > button.vacancy-filter:hover,
.vacancy-filters > button.vacancy-filter:focus-visible,
.traffic-filters > button.traffic-filter:hover,
.traffic-filters > button.traffic-filter:focus-visible,
.wijkkaart-category-options > button.wijkkaart-category-btn:hover,
.wijkkaart-category-options > button.wijkkaart-category-btn:focus-visible {
  border-color: #b93a83 !important;
  background: #f1dce9 !important;
  color: #762454 !important;
}
.filters > button.chip.active,
.vacancy-filters > button.vacancy-filter.is-active,
.traffic-filters > button.traffic-filter[aria-pressed="true"],
.wijkkaart-category-options > button.wijkkaart-category-btn.is-active {
  border-color: #a52f74 !important;
  background: #b93a83 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px #b93a8330 !important;
}
.filters > button.chip:focus-visible,
.vacancy-filters > button.vacancy-filter:focus-visible,
.traffic-filters > button.traffic-filter:focus-visible,
.wijkkaart-category-options > button.wijkkaart-category-btn:focus-visible {
  outline: 3px solid #b93a8355 !important;
  outline-offset: 2px;
}
.activity-filter select[data-category-filter],
.camera-filter-label select,
.wijkkaart-filter-label select {
  min-height: 42px;
  border: 1px solid #e4c5d8 !important;
  border-radius: 10px !important;
  background-color: #f8edf4 !important;
  color: #76345f !important;
  accent-color: #b93a83;
}
.activity-filter select[data-category-filter]:focus-visible,
.camera-filter-label select:focus-visible,
.wijkkaart-filter-label select:focus-visible {
  border-color: #b93a83 !important;
  outline: 3px solid #b93a8322;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px #b93a8322;
}
@media (max-width: 700px) {
  .filters > button.chip,
  .vacancy-filters > button.vacancy-filter,
  .traffic-filters > button.traffic-filter,
  .wijkkaart-category-options > button.wijkkaart-category-btn {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* Gemeentezaken uses topic links instead of filter buttons. Match them to the same category chips. */
.municipal-links > a {
  min-height: 38px;
  border: 1px solid #e4c5d8 !important;
  border-radius: 999px !important;
  background: #f8edf4 !important;
  color: #76345f !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.municipal-links > a:hover,
.municipal-links > a:focus-visible {
  border-color: #b93a83 !important;
  background: #f1dce9 !important;
  color: #762454 !important;
}
.municipal-links > a:focus-visible {
  outline: 3px solid #b93a8355 !important;
  outline-offset: 2px;
}
.municipal-links > a:active {
  border-color: #a52f74 !important;
  background: #b93a83 !important;
  color: #fff !important;
}
@media (max-width: 700px) {
  .municipal-links > a { min-height: 36px; }
}

/* Subject shortcuts and employer filters are selection controls too. */
.tax-shortcuts > a,
.help-shortcuts > a,
.employer-shortcuts > button.employer-shortcut {
  min-height: 38px !important;
  border: 1px solid #e4c5d8 !important;
  border-radius: 999px !important;
  background: #f8edf4 !important;
  color: #76345f !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tax-shortcuts > a:hover,
.tax-shortcuts > a:focus-visible,
.help-shortcuts > a:hover,
.help-shortcuts > a:focus-visible,
.employer-shortcuts > button.employer-shortcut:hover,
.employer-shortcuts > button.employer-shortcut:focus-visible {
  border-color: #b93a83 !important;
  background: #f1dce9 !important;
  color: #762454 !important;
}
.employer-shortcuts > button.employer-shortcut.is-active {
  border-color: #a52f74 !important;
  background: #b93a83 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px #b93a8330 !important;
}
.tax-shortcuts > a:focus-visible,
.help-shortcuts > a:focus-visible,
.employer-shortcuts > button.employer-shortcut:focus-visible {
  outline: 3px solid #b93a8355 !important;
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .tax-shortcuts > a,
  .help-shortcuts > a,
  .employer-shortcuts > button.employer-shortcut { min-height: 36px !important; }
}