/* === Nice Select · SPB-Design ============================================ */
/* Basis: https://github.com/hernansartorio/jquery-nice-select                */
/* Auf SPB-Design angepasst (Design-Tokens, Fokus, Hover, Dark-Grey-Buttons) */

/* ---- Design-Tokens-Mapping ---- */
:root {
  --ns-radius: 0px;                          /* wie eure Inputs */
  --ns-border: var(--border);
  --ns-shadow: var(--shadow);
  --ns-height: clamp(40px, 4.2vw, 46px);     /* Control-Höhe */
  --ns-font-size: clamp(14px, 1.4vw, 16px);
  --ns-pad-x: clamp(14px, 1.6vw, 18px);
  --ns-arrow-size: 6px;
  --ns-z: 30;
}

/* ---- Trigger (geschlossener Zustand) ---- */
.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  box-sizing: border-box;
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--ns-font-size);
  height: var(--ns-height);
  line-height: calc(var(--ns-height) - 2px); /* -2px wegen Border */
  padding-left: var(--ns-pad-x);
  padding-right: calc(var(--ns-pad-x) + 18px);
  position: relative;
  text-align: left !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  user-select: none;
  color: var(--text);
    border: clamp(1px, 0.3vw, 2px) solid #2b2b2b
}

.nice-select:hover { border-color: color-mix(in srgb, var(--btn-dark-grey) 35%, var(--ns-border)); }
.nice-select:active,
.nice-select.open,
.nice-select:focus { border-color: var(--btn-dark-grey); }

.nice-select:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

/* Pfeil */
.nice-select::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: var(--ns-arrow-size);
  height: var(--ns-arrow-size);
  margin-top: calc(var(--ns-arrow-size) * -0.5);
  pointer-events: none;
  border-right: 2px solid var(--btn-dark-grey);
  border-bottom: 2px solid var(--btn-dark-grey);
  transform: rotate(45deg);
  transition: transform .15s ease-in-out, border-color .2s ease;
}
.nice-select.open::after { transform: rotate(-135deg); }

/* ---- Dropdown-Liste ---- */
.nice-select .list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--ns-z);
  background: #fff;
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  box-shadow: 0 0 0 1px rgba(68,68,68,.06), var(--ns-shadow);
  margin-top: 4px;
  padding: 0;
  opacity: 0;
  transform-origin: 50% 0;
  transform: scale(.96) translateY(-8px);
  transition: transform .18s cubic-bezier(.5,0,0,1.25), opacity .12s ease-out;
  pointer-events: none;
  overflow: hidden;

}
.nice-select.open .list {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Optionen */
.nice-select .option {
  list-style: none;
  cursor: pointer;
  padding: 0 var(--ns-pad-x);
  min-height: 40px;
  line-height: 40px;
  font-weight: 400;
  transition: background-color .15s ease, color .15s ease;
  color: var(--btn-dark-grey);
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: #f6f6f6;
}
.nice-select .option.selected { font-weight: 600; }
.nice-select .option.disabled {
  color: #999;
  cursor: default;
  background: transparent;
}

/* Breite Varianten */
.nice-select.wide { width: 100%; }
.nice-select.right .list { left: auto; right: 0; }
.nice-select.small {
  font-size: clamp(12px, 1.2vw, 13px);
  height: clamp(34px, 3.6vw, 38px);
  line-height: calc(clamp(34px, 3.6vw, 38px) - 2px);
}
.nice-select.small .option {
  min-height: 34px;
  line-height: 34px;
}

/* ---- Disabled ---- */
.nice-select.disabled {
  border-color: #e0e0e0;
  color: #999;
  pointer-events: none;
}
.nice-select.disabled::after { border-color: #c7c7c7; }

/* ---- No pointer-events Fallback ---- */
.no-csspointerevents .nice-select .list { display: none; }
.no-csspointerevents .nice-select.open .list { display: block; }

/* ========================================================================== */
/*  OPTIONAL: Button-Variante (dunkelgrau)                                    */
/*  Nutze <div class="nice-select btn-style"> … </div>                         */
/* ========================================================================== */

.nice-select.btn-style {
  background: var(--btn-dark-grey);
  color: #fff;
  border-color: var(--btn-dark-grey);
  box-shadow: var(--ns-shadow);
}
.nice-select.btn-style:hover {
  background: color-mix(in srgb, var(--btn-dark-grey) 92%, #000);
  border-color: color-mix(in srgb, var(--btn-dark-grey) 96%, #000);
}
.nice-select.btn-style:active,
.nice-select.btn-style.open,
.nice-select.btn-style:focus {
  background: color-mix(in srgb, var(--btn-dark-grey) 88%, #000);
  border-color: var(--btn-dark-grey);
}
.nice-select.btn-style::after {
  border-color: #fff; /* weißer Pfeil auf dunklem Hintergrund */
}

/* Dropdown bei Button-Variante bleibt hell für Lesbarkeit */
.nice-select.btn-style .list {
  background: #fff;
  border-color: var(--ns-border);
  color: var(--btn-dark-grey);
}
.nice-select.btn-style .option:hover,
.nice-select.btn-style .option.focus,
.nice-select.btn-style .option.selected.focus {
  background: #f3f3f3;
}