/**
 * Datei: pills.css
 * Pfad: /wp-content/plugins/mietp-core/inc/modules/search/css
 * Modul: Search – Aktive Filter Pills
 *
 * Zweck:
 * - Layout für aktive Filter-Pills oberhalb der Ergebnisse
 * - Nutzt globales Pill-System (Tokens aus Theme)
 * - Entfernen-Action und "Alle löschen" als zugängliche Interaktionen
 * - BFSG/WCAG: sichtbarer :focus-visible, keine Hardcodes, gute Kontraste über Tokens
 */

.mp-active-filters{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:20px;
}

/* ==========================================================
   Filter-Pill (nutzt globales Pill-System)
========================================================== */
.mp-filter-pill{
	display:inline-flex;
	align-items:center;
	gap:6px;

	background:var(--pill-bg);
	border:1px solid var(--pill-border);
	color:var(--pill-color);

	padding:4px 10px;
	font-size:13px;
	border-radius:var(--pill-radius);
	box-sizing:border-box;
}

/* ==========================================================
   Entfernen-Action (X)
========================================================== */
.mp-filter-pill .mp-pill-remove{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	color:inherit;
	font-weight:700;
	text-decoration:none;
	cursor:pointer;
	line-height:1;

	/* Klickziel minimal vergroessern, ohne Layout zu sprengen */
	padding:2px 4px;
	border-radius:4px;
}

/* Hover & Fokus gleichwertig */
.mp-filter-pill .mp-pill-remove:hover,
.mp-filter-pill .mp-pill-remove:focus-visible{
	color:var(--brand-primary);
	background:var(--hover-bg);
	text-decoration:none;
	outline:none;
}

/* BFSG-Fokus sichtbar */
.mp-filter-pill .mp-pill-remove:focus-visible{
	outline:2px solid var(--brand-primary);
	outline-offset:2px;
}

/* ==========================================================
   "Alle Filter loeschen" – Action-Pill
========================================================== */
.mp-clear-btn{
	display:inline-flex;
	align-items:center;
	gap:6px;

	background:var(--pill-bg);
	border:1px solid var(--pill-border);
	color:var(--pill-color);

	padding:4px 10px;
	font-size:13px;
	border-radius:var(--pill-radius);
	cursor:pointer;
	text-decoration:none;
	box-sizing:border-box;

	/* weichere UI, ohne harte Borders */
	transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Hover & Fokus: gleiche Wirkung, ohne eigenes Button-System */
.mp-clear-btn:hover,
.mp-clear-btn:focus-visible{
	background:var(--pill-bg-active);
	border-color:var(--pill-bg-active);
	color:var(--btn-primary-color);
	box-shadow:var(--shadow-xs);
	outline:none;
}

/* BFSG-Fokus sichtbar (zusaetzlich zur Hover-Flaeche) */
.mp-clear-btn:focus-visible{
	outline:2px solid var(--brand-primary);
	outline-offset:2px;
}