/* ==========================================================================
   MP FILTER PANEL · mp-filter-panel.css
   Child-Theme: generatepress-child/assets/css/
   ---------------------------------------------------------------------
   Aus eigenständigem mp_filter_panel-Snippet integriert (Stand 14.09.26).
   Umbenannt von .ui-filter-panel* auf .mp-filter-panel* - gehört zur
   selben Familie wie .mp-modal (eigenständiges Widget, kein natives
   HTML-Gegenstück wie Button/Input), nicht zur .ui-*-Dual-Layer-Familie.

   VERHALTEN:
   - Desktop (>900px): ganz normale, immer sichtbare Sidebar im
     Dokumentenfluss - KEIN Overlay, KEIN Öffnen/Schließen nötig.
   - Mobil (<=900px): wird zum Off-Canvas-Panel (fixed, slide-in von
     links, Overlay dahinter) - Öffnen/Schließen über
     mp-filter-panel.js, gleiches Grundprinzip wie mp-modal.js, aber
     eigene, unabhängige Klassen/Attribute (.mp-filter-panel,
     data-filter-panel-open/-close) - KEIN Konflikt mit mp-modal.js,
     da komplett andere Selektoren.

   Nutzt body.mp-modal-open (Scroll-Lock) WEITER - dieselbe Klasse, die
   auch mp-modal.js beim Öffnen setzt, damit beim Öffnen von Modal ODER
   Filter-Panel gleichermaßen der Hintergrund nicht scrollt. Wird von
   mp-modal.css bereits definiert, hier nicht erneut.

   Fallback-Hex-Werte aus der Ursprungsversion entfernt (Tokens immer
   geladen).
   ========================================================================== */

.mp-filter-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--mp-surface);
	border: 1px solid var(--mp-ink-200);
	border-radius: var(--mp-radius-lg);
	overflow: hidden;
}

.mp-filter-panel__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mp-space-3);
	padding: var(--mp-space-4) var(--mp-space-5);
	border-bottom: 1px solid var(--mp-ink-200);
}
.mp-filter-panel__header h2,
.mp-filter-panel__header h3,
.mp-filter-panel__header h4 {
	margin: 0;
	font-family: var(--mp-font-body);
	font-size: var(--mp-fs-h5);
	line-height: var(--mp-lh-h5);
	font-weight: 600;
	color: var(--mp-ink-900);
}

/* Nur mobil sichtbar (siehe Media Query unten) - auf Desktop ist die
   Sidebar dauerhaft offen, ein Schließen-Button ergibt dort keinen Sinn. */
.mp-filter-panel__close {
	display: none;
}

.mp-filter-panel__content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: var(--mp-space-5);
}

.mp-filter-panel__footer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--mp-space-3);
	padding: var(--mp-space-3) var(--mp-space-5);
	border-top: 1px solid var(--mp-ink-200);
}

@media (max-width: 900px) {
	.mp-filter-panel {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 320px;
		max-width: 85vw;
		z-index: 2147483000;
		border-radius: 0;
		transform: translateX(-100%);
		transition: transform .2s ease;
	}
	.mp-filter-panel.is-open {
		transform: translateX(0);
	}
	.mp-filter-panel__close {
		display: inline-flex;
	}
}

.mp-filter-panel__overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	background: var(--mp-overlay-60);
}
.mp-filter-panel__overlay.is-open {
	display: block;
}

/* Der "Filter öffnen"-Button (siehe [mp_filter_panel_open] bzw.
   mp_filter_panel_open_markup()) ergibt auf Desktop keinen Sinn, da die
   Sidebar dort immer sichtbar ist - standardmäßig nur mobil anzeigen.
   Wer den Button auch auf Desktop braucht (z. B. weil die Sidebar dort
   bewusst NICHT immer eingebunden ist), kann das pro Einsatzort mit
   einer eigenen, spezifischeren Regel überschreiben. */
.mp-filter-panel-toggle {
	display: none;
}
@media (max-width: 900px) {
	.mp-filter-panel-toggle {
		display: inline-flex;
	}
}