/* Nerdschmie.de Desktop Design Phase 4 – Filter Bar V1 */
body.nsd .nsd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--nsd-space-3);
  margin-block: var(--nsd-space-4);
  padding: var(--nsd-space-3) var(--nsd-space-4);
  border: 1px solid var(--nsd-border-subtle);
  border-radius: var(--nsd-radius-panel);
  background: rgba(13,18,17,.72);
  box-shadow: none;
}

body.nsd .ns-toolbar.nsd-filter-bar {
  gap: var(--nsd-space-3);
  padding: var(--nsd-space-3) var(--nsd-space-4);
  border: 1px solid var(--nsd-border-subtle);
  border-radius: var(--nsd-radius-panel);
  background: rgba(13,18,17,.72);
}

body.nsd .nsd-filter-bar .ns-input,
body.nsd .nsd-filter-bar input[type="search"],
body.nsd .nsd-filter-bar .ns-select,
body.nsd .nsd-filter-bar select {
  min-height: var(--nsd-control-height);
  border: 1px solid var(--nsd-border-strong);
  border-radius: var(--nsd-radius-control);
  background-color: rgba(8,12,11,.9);
  color: var(--nsd-color-text);
}

body.nsd .nsd-filter-bar input[type="search"] {
  flex: 1 1 22rem;
  min-width: min(100%, 15rem);
}

body.nsd .nsd-filter-bar .ns-group-field,
body.nsd .nsd-filter-bar label {
  margin: 0;
}

body.nsd .nsd-filter-bar .ns-label,
body.nsd .nsd-filter-bar label > span:not(.sr-only) {
  color: var(--nsd-color-text-muted);
  font-size: var(--nsd-type-label-size);
  line-height: 1.25;
}

body.nsd .nsd-filter-bar .nsd-filter-reset,
body.nsd .nsd-filter-bar .ns-filter-reset,
body.nsd .nsd-filter-bar [data-djs-reset],
body.nsd .nsd-filter-bar #band-clear {
  min-height: var(--nsd-control-height);
  padding: 0 .78rem;
  border: 1px solid var(--nsd-border-subtle);
  border-radius: var(--nsd-radius-control);
  background: transparent;
  color: var(--nsd-color-text-muted);
  font-weight: 650;
}

body.nsd .nsd-filter-bar .nsd-filter-chip,
body.nsd .nsd-filter-bar [data-djs-filter-trigger] {
  min-height: 36px;
  padding: .42rem .68rem;
  border: 1px solid var(--nsd-border-subtle);
  border-radius: var(--nsd-radius-control);
  background: rgba(255,255,255,.018);
  color: var(--nsd-color-text-body);
  font: inherit;
  font-size: var(--nsd-type-meta-size);
  font-weight: 650;
  line-height: 1.15;
}

body.nsd .nsd-filter-bar .nsd-filter-chip:hover,
body.nsd .nsd-filter-bar [data-djs-filter-trigger]:hover,
body.nsd .nsd-filter-bar .nsd-filter-chip.is-active,
body.nsd .nsd-filter-bar [data-djs-filter-trigger][aria-pressed="true"] {
  border-color: var(--nsd-border-accent);
  background: var(--nsd-color-accent-soft);
  color: var(--nsd-color-text);
}

body.nsd .nsd-filter-bar button:focus-visible,
body.nsd .nsd-filter-bar input:focus-visible,
body.nsd .nsd-filter-bar select:focus-visible {
  outline: var(--nsd-focus-width) solid var(--nsd-focus-color);
  outline-offset: var(--nsd-focus-offset);
}

body.nsd .nsd-filter-bar .ns-toolbar__status,
body.nsd .nsd-filter-bar .ns-filter-state,
body.nsd .nsd-filter-bar [data-city-filter-status],
body.nsd .nsd-filter-bar [data-djs-filter-status] {
  flex: 1 1 100%;
  margin: 0;
  color: var(--nsd-color-text-muted);
  font-size: var(--nsd-type-meta-size);
}

/* City/DJ overview wrappers used to be large page-specific panels. */
body.nsd .nsd-city-tools-panel.nsd-filter-bar,
body.nsd .nsd-djs-overview-v15 .nsd-djs-all__tools.nsd-filter-bar {
  margin: var(--nsd-space-4) 0;
  padding: var(--nsd-space-4);
  border: 1px solid var(--nsd-border-subtle);
  border-radius: var(--nsd-radius-panel);
  background: rgba(13,18,17,.72);
  box-shadow: none;
}

body.nsd .nsd-djs-overview-v15 .nsd-filter-bar .nsd-djs-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nsd-space-2);
}

body.nsd .nsd-filter-bar--nearby {
  margin-top: var(--nsd-space-4);
}