/*
 * MTR Erreichbarkeits-Status – Styles
 * Als echte, separat geladene Datei ausgeliefert (statt inline im Seiteninhalt),
 * damit Theme-Resets sie nicht per Kaskade/Reihenfolge aushebeln und Content-
 * Filter/CSP-Regeln sie nicht entfernen können. !important auf den wenigen
 * layoutkritischen Eigenschaften ist hier bewusst und angemessen, da dieses
 * kleine, in sich geschlossene UI-Element nicht mit dem Theme um allgemeine
 * span/a-Stile konkurrieren soll.
 */
.mtr-status {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	/*
	 * Wichtig für Inline-Einsatz (z. B. per [mtr_status_dot] mitten im
	 * Fließtext/Button-Label): vertical-align auf ".mtr-status__dot" selbst
	 * wirkt NICHT, da der Punkt als Flex-Kind keine normale Inline-Box mehr
	 * ist (vertical-align gilt nur für Inline-Level-/Table-Cell-Boxen). Der
	 * äußere ".mtr-status"-Knoten IST die relevante Inline-Level-Box und
	 * bestimmt die Ausrichtung zur umgebenden Textzeile – hier gehört
	 * vertical-align hin.
	 */
	vertical-align: middle;
}
.mtr-status__dot {
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	min-width: 8px;
	min-height: 8px;
	border-radius: 50% !important;
	background-color: #28c76f !important;
	flex: 0 0 auto !important;
	line-height: 1;
	transition: background-color 0.2s ease;
}
.mtr-status[data-state="closed"] .mtr-status__dot {
	background-color: #e62332 !important;
}
.mtr-status__label {
	font-weight: 600;
}
.mtr-status__hours {
	opacity: 0.75;
	font-weight: 400;
}
.mtr-status__clock {
	opacity: 0.75;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/*
 * Mobil + Tablet: Label (Punkt + "Nicht erreichbar" etc.) und Zusatzinfo
 * ("Morgen wieder ab 09:00 Uhr verfügbar" etc.) nebeneinander werden auf
 * schmaleren Bildschirmen schnell eng/abgeschnitten. Ab hier daher
 * untereinander statt nebeneinander – nur auf Desktop-Breite bleibt es
 * nebeneinander. Breakpoint 1024px = Elementors eigene Tablet-Obergrenze
 * (deckt Tablet UND Mobil in einem Schritt ab).
 */
@media (max-width: 1024px) {
	.mtr-status {
		flex-wrap: wrap;
	}
	.mtr-status__hours {
		flex-basis: 100%;
		margin-top: 4px;
	}
}

/*
 * Utility-Klassen für BELIEBIGE andere Elemente (z. B. ein Elementor-Container/
 * -Section/-Text), die automatisch auf den Erreichbarkeits-Status reagieren
 * sollen. Kein Code nötig: im Elementor-Feld "CSS-Klassen" (Erweitert-Tab)
 * einfach eine der Klassen unten auf das gewünschte Element setzen.
 *
 * Die --mtr-bg-open/--mtr-bg-closed/--mtr-bg-invert-closed Variablen werden
 * per JS (siehe .js-Datei) auf :root gesetzt, aus den Farbfeldern im
 * Widget-Stil-Tab ("Hintergrundfarbe mtr-status-bg" bzw. "… mtr-status-bg-
 * invert"). Die Werte hier sind nur der Fallback, falls JS (noch) nicht
 * gelaufen ist oder kein Widget mit diesen Einstellungen auf der Seite liegt.
 */
.mtr-status-bg {
	background-color: var(--mtr-bg-open, #e62332) !important;
	transition: background-color 0.3s ease;
}
.mtr-status-bg[data-mtr-state="closed"] {
	background-color: var(--mtr-bg-closed, #9aa0a6) !important;
}

/*
 * Zweiter, unabhängiger Farbbereich (eigene Farbfelder im Widget-Stil-Tab,
 * "Hintergrundfarbe mtr-status-bg-invert"): färbt NUR bei "geschlossen" ein,
 * z. B. für einen Hinweis "Außerhalb der Sprechzeiten" in Rot. Bei "geöffnet"
 * wird bewusst KEINE Hintergrundfarbe gesetzt – das Element behält dort sein
 * normales Design, statt (wie zuvor) automatisch die "mtr-status-bg"-Farbe
 * für "geöffnet" zu übernehmen.
 */
.mtr-status-bg-invert[data-mtr-state="closed"] {
	background-color: var(--mtr-bg-invert-closed, #e62332) !important;
	transition: background-color 0.3s ease;
}

/*
 * Sichtbarkeit je Status. Bewusst standardmäßig ausgeblendet (display:none),
 * bis JS den tatsächlichen Status gesetzt hat – so blitzt nie kurz das falsche
 * Element auf. --mtr-show-display erlaubt bei Bedarf einen anderen Anzeige-Typ
 * als "block" (z. B. "flex"), einfach per eigenem CSS auf dem jeweiligen
 * Element setzen: { --mtr-show-display: flex; }
 */
.mtr-show-open,
.mtr-show-closed {
	display: none !important;
}
.mtr-show-open[data-mtr-state="open"] {
	display: var(--mtr-show-display, block) !important;
}
.mtr-show-closed[data-mtr-state="closed"] {
	display: var(--mtr-show-display, block) !important;
}

/*
 * Reihenfolge mehrerer Geschwister-Elemente automatisch je Status tauschen.
 * Voraussetzung: alle betroffenen Elemente liegen INNERHALB desselben
 * Elementor-"Containers" (Flexbox – Elementor setzt display:flex bereits
 * selbst über seine e-con/e-flex-Klassen, deswegen hier bewusst KEIN eigenes
 * display:flex, um Elementors Flex-Richtung/Wrap-Einstellungen im Layout-Tab
 * nicht zu überschreiben).
 * Bewusst NICHT auf direkte Kinder (">") beschränkt: Elementor-Container mit
 * Inhaltsbreite "Boxed" fügen automatisch einen inneren ".e-con-inner"-Wrapper
 * ein, wodurch die eigentlichen Elemente technisch Enkelkinder statt Kinder
 * des Containers sind. Der Nachfahren-Selektor funktioniert in beiden Fällen
 * (Boxed und Full Width).
 * Eltern-Container → Erweitert-Tab → CSS-Klassen → mtr-order-group
 * Jedes betroffene Element darin → CSS-Klassen → zwei Klassen für seine
 * Position 1–4, getrennt nach Status, z. B. mtr-order-open-1 mtr-order-closed-2.
 * Mehrere Elemente dürfen dieselbe Positions-Nummer teilen (z. B. eine
 * Überschrift + der dazugehörige Formular-Container) – sie bleiben dann in
 * ihrer bisherigen gegenseitigen Reihenfolge zusammen. Wichtig: die Elemente
 * müssen trotzdem echte Flex-GESCHWISTER sein (gleicher unmittelbarer
 * Flex-Elterncontainer, z. B. gemeinsam im selben ".e-con-inner") – sonst
 * greift "order" nicht, da es nur innerhalb desselben Flex-Kontexts wirkt.
 */
.mtr-order-group[data-mtr-state="open"] .mtr-order-open-1 { order: 1 !important; }
.mtr-order-group[data-mtr-state="open"] .mtr-order-open-2 { order: 2 !important; }
.mtr-order-group[data-mtr-state="open"] .mtr-order-open-3 { order: 3 !important; }
.mtr-order-group[data-mtr-state="open"] .mtr-order-open-4 { order: 4 !important; }
.mtr-order-group[data-mtr-state="closed"] .mtr-order-closed-1 { order: 1 !important; }
.mtr-order-group[data-mtr-state="closed"] .mtr-order-closed-2 { order: 2 !important; }
.mtr-order-group[data-mtr-state="closed"] .mtr-order-closed-3 { order: 3 !important; }
.mtr-order-group[data-mtr-state="closed"] .mtr-order-closed-4 { order: 4 !important; }

/*
 * Eigenständiger Status-Punkt für den [mtr_status_dot]-Shortcode – unabhängig
 * von jeder Widget-Instanz, überall per Shortcode einfügbar (siehe
 * class-mtr-availability-settings.php). Größe/Farben kommen als Inline-CSS-
 * Variablen vom Shortcode selbst (pro Einsatzort überschreibbar), mit
 * denselben Fallback-Werten wie der Standard-Punkt oben.
 */
.mtr-status--dot-only {
	gap: 0;
}
.mtr-status--dot-only .mtr-status__dot {
	width: var(--mtr-dot-size, 8px) !important;
	height: var(--mtr-dot-size, 8px) !important;
	min-width: 0;
	min-height: 0;
	background-color: var(--mtr-dot-color-open, #28c76f) !important;
}
.mtr-status--dot-only[data-state="closed"] .mtr-status__dot {
	background-color: var(--mtr-dot-color-closed, #e62332) !important;
}