/* ==========================================================================
   PILLS – System (Best-Practice Struktur)
   - Default (.pill) = Beziehungstyp-1 (statisch)
   - Interaktivität über Modifier: .pill--interactive (optional; .pill.clickable bleibt kompatibel)
   - Selected/Active über .pill--active (und kompatibel: .pill-active / .is-active)
   - Slogans über .pill--slogan (mit Umbruch)
   - FacetWP-Checkbox/Radio greifen auf die gleiche Basis-Regelgruppe (Option A) zurück
   ========================================================================== */

/* ===== Container ===== */
.pills{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 6px;
}

/* ===== Option A: Gemeinsame Basis-Regelgruppe (einmal definieren) ===== */
/* .pill bleibt wie gehabt dein Default (Beziehungstyp-1).
   FacetWP-Optionen im .pills Kontext bekommen exakt die gleiche Basis. */
.pill,
.pills .facetwp-checkbox,
.pills .facetwp-radio{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 8px;
  font-size: 13px;
  font-weight: 300;
  border-radius: var(--lg-pill-radius);
  
  color: var(--lg-cool-02);
  border: 0.5px solid var(--lg-cool-06);
  background: var(--lg-warm-09);

  white-space: nowrap;
}

/* ===== Semantische Varianten (Best-Practice Naming) ===== */
/* Beziehungstyp-2/3: du sagst, sie sind nur per Klassen-Variante unterscheidbar.
   -> Du kannst später in WP einfach diese Modifier-Klassen hinzufügen, wenn du willst.
   -> Falls du sie nie brauchst, passiert nichts. */
.pill--rel-2{
	background: var(--lg-cool-09);
	border-color: var(--lg-cool-07);
	color: var(--lg-cool-02);
}

.pill--rel-3{
	background: rgb(var(--lg-blue-01-rgb) / 0.08);
	border-color: rgb(var(--lg-blue-01-rgb) / 0.18);
	color: var(--lg-c-primary);
}

/* Slogan-Pills (Info, aber typografisch/visuell abgesetzt) */
.pill--slogan{
	background: transparent;
	border: 1px solid var(--lg-warm-05);
	color: var(--lg-c-heading);
	font-weight: 400;

  white-space: normal; /* Umbruch explizit erlaubt */
}

/* Status-Varianten (deine bestehenden Klassen; Best-Practice wäre pill--success etc.
   -> wir lassen deine bestehenden Namen intakt, um nichts zu brechen) */
.pill-success{
  background:
	linear-gradient(rgb(var(--lg-green-01-rgb) / 0.10),
					rgb(var(--lg-green-01-rgb) / 0.10)),
					var(--lg-white-01);
  color: var(--lg-c-success);
}

.pill-warning{
  background:
	linear-gradient(rgb(var(--lg-yellow-01-rgb) / 0.20),
					rgb(var(--lg-yellow-01-rgb) / 0.20)),
					var(--lg-white-01);
  color: var(--lg-c-warning-text);
}

.pill-error{
  background:
	linear-gradient(rgb(var(--lg-red-01-rgb) / 0.10),
					rgb(var(--lg-red-01-rgb) / 0.10)),
					var(--lg-white-01);
  color: var(--lg-c-danger);
}

/* ===== Interaktivität (global, nicht nur FacetWP) ===== */

/* Neuer Best-Practice Modifier */
.pill--interactive,
/* Kompatibilität mit deinem bisherigen Naming */
.pill.clickable,
/* FacetWP-Optionen sind per Definition interaktiv */
.pills .facetwp-checkbox,
.pills .facetwp-radio{
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}

/* Hover (für interaktive Pills + FacetWP) */
.pill--interactive:hover,
.pill.clickable:hover,
.pills .facetwp-checkbox:hover,
.pills .facetwp-radio:hover{
	background:
		linear-gradient(rgb(var(--lg-blue-01-rgb) / 0.06),
						rgb(var(--lg-blue-01-rgb) / 0.06)),
						var(--lg-white-01);
	border-color: var(--lg-c-primary);
}

/* Active/Pressed (für interaktive Pills + FacetWP) */
.pill--interactive:active,
.pill.clickable:active,
.pills .facetwp-checkbox:active,
.pills .facetwp-radio:active{
  transform: translateY(0.5px);
}

/* Focus (Tastatur) */
.pill--interactive:focus-visible,
.pill.clickable:focus-visible,
.pills .facetwp-checkbox:focus-visible,
.pills .facetwp-radio:focus-visible{
  outline: 2px solid rgb(var(--lg-blue-01-rgb) / 0.35);
  outline-offset: 2px;
}

/* Disabled (optional) */
.pill--disabled,
.pill.is-disabled,
.pill[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Selected/Active State (global) ===== */
/* Neuer Best-Practice Modifier + Kompatibilität mit deiner bestehenden Klasse */
.pill--active,
.pill-active,
.pill.is-active{
	background:
		linear-gradient(rgb(var(--lg-blue-01-rgb) / 0.12),
						rgb(var(--lg-blue-01-rgb) / 0.12)),
						var(--lg-white-01);
	border-color: var(--lg-c-primary);
	color: var(--lg-c-primary);
}

/* ==========================================================================
   FacetWP – Kontextregeln (nur das, was NICHT über .pill abgedeckt ist)
   ========================================================================== */

/* FacetWP Wrapper Layout (kannst du behalten) */
.pills .facetwp-facet{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 !important;
}

/* Inputs ausblenden */
.pills .facetwp-checkbox input,
.pills .facetwp-radio input{
  display: none;
}

/* FacetWP-spezifische Resets */
.pills .facetwp-checkbox,
.pills .facetwp-radio{
  margin: 0;
}

/* Default (nicht ausgewählt) */
.pills .facetwp-checkbox,
.pills .facetwp-radio{
  background: var(--lg-cool-08);
  border-color: var(--lg-cool-06);
  color: var(--lg-cool-03);
}

/* Hover (nicht ausgewählt) */
.pills .facetwp-checkbox:hover:not(.checked),
.pills .facetwp-radio:hover:not(.checked){
  background:
    linear-gradient(rgb(var(--lg-blue-01-rgb) / 0.10),
                    rgb(var(--lg-blue-01-rgb) / 0.10)),
    var(--lg-white-01);
  border-color: rgb(var(--lg-blue-01-rgb) / 0.45);
  color: var(--lg-blue-01);
}

/* Selected (Dark Tint statt Vollfarbe) */
.pills .facetwp-checkbox.checked,
.pills .facetwp-radio.checked{
  background:
    linear-gradient(rgb(var(--lg-blue-01-rgb) / 0.85),
                    rgb(var(--lg-blue-01-rgb) / 0.85)),
    var(--lg-white-01);
  border-color: rgb(var(--lg-blue-01-rgb) / 0.90);
  color: var(--lg-white-01);
}

/* Optional: Hover auf Selected noch ein Tick heller/dunkler */
.pills .facetwp-checkbox.checked:hover,
.pills .facetwp-radio.checked:hover{
  filter: brightness(1.05);
}