/**
 * BKiAI Translator - Frontend Styles
 *
 * Sprachwechsler-Dropdown.
 */

/* ============================================================
 * v0.8.3: Defensiver Reset gegen Theme-CSS
 * ------------------------------------------------------------
 * Wenn der Switcher als <li> ins Theme-Menue injected wird, erbt
 * er Theme-Regeln wie .nav-menu ul { min-width:12em; border:...; }.
 * Das macht das Dropdown breit, mit Theme-Border, manchmal nebeneinander.
 * Hier neutralisieren wir die wichtigsten Vererbungs-Pfade explizit.
 * ============================================================ */

/* Switcher-Wrapper sauber halten — egal in welchem Container er steckt. */
li.bkiai-lang-switcher-menu-item,
li.menu-item.bkiai-lang-switcher-menu-item {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	min-width: 0 !important;
	width: auto !important;
}

/* Trigger-Button: Theme-CSS auf Buttons/Links neutralisieren. */
.bkiai-lang-switcher .bkiai-lang-switcher__trigger {
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	align-items: center !important;
	line-height: 1 !important;
}

/* v0.8.6: Flag-Emoji vertikal mittig zur Schrift ausrichten. */
.bkiai-lang-switcher .bkiai-lang-flag {
	display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
	transform: translateY(var(--bkiai-switcher-flag-offset-y, 0px)) !important;
}

/* v0.8.7: Trigger-Schrift (DE/EN) Y-Offset. Inline-block damit transform greift. */
.bkiai-lang-switcher__trigger .bkiai-lang-code {
	display: inline-block !important;
	transform: translateY(var(--bkiai-switcher-text-offset-y, 0px)) !important;
}

/* Dropdown-Menue selbst: erzwinge vertikale Liste.
   v0.8.5: Doppelte Klassen-Selektoren erhoehen Specificity (0,4,0) damit
   Theme-CSS wie `.site-header .header-right-wrapper ul { display: flex }`
   (0,2,1) nicht mehr durchschlaegt. */
.bkiai-lang-switcher.bkiai-lang-switcher .bkiai-lang-switcher__menu.bkiai-lang-switcher__menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 6px !important;
	min-width: 140px !important;
	width: auto !important;
	max-width: none !important;
	background: var(--bkiai-switcher-menu-bg-color, #ffffff) !important;
	margin-top: var(--bkiai-switcher-menu-offset-top, 4px) !important;
	display: none !important;
	box-sizing: border-box !important;
	flex-direction: column !important;
}

.bkiai-lang-switcher.bkiai-lang-switcher.is-open .bkiai-lang-switcher__menu.bkiai-lang-switcher__menu {
	display: block !important;
}

/* Items im Dropdown: untereinander, volle Breite, kein Theme-Float. */
.bkiai-lang-switcher .bkiai-lang-switcher__menu .bkiai-lang-switcher__item {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
}

/* Item-Links: volle Breite, kein Theme-Underline, kein Theme-Padding-Reset. */
.bkiai-lang-switcher .bkiai-lang-switcher__menu .bkiai-lang-switcher__item > a,
.bkiai-lang-switcher .bkiai-lang-switcher__menu .bkiai-lang-switcher__unavailable {
	display: flex !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	border: 0 !important;
	/* v0.10.1: Border-Radius am Item-Link selbst, damit Hover/Active-State als
	   abgerundete "Pille" innerhalb des Panels erscheinen — analog zum Mega-Menue. */
	border-radius: var(--bkiai-switcher-menu-item-radius, 6px) !important;
}

/* ============================================================
 * Sprachwechsler - Dropdown (Basis-Styles)
 * ============================================================ */

.bkiai-lang-switcher {
	position: relative;
	display: inline-block;
	font-size: var(--bkiai-switcher-font-size, 14px);
	line-height: 1.4;
	margin: 0 4px;
	z-index: 100;
	color: var(--bkiai-switcher-text-color, #1a1a1a);
	/* v0.12.1: Defensiver Schutz gegen WordPress-Core-Regel
	 * `:where([style*=border-color]) { border-style: solid }` aus
	 * wp-includes/css/dist/block-library/style.min.css.
	 * Die Regel matcht JEDES Element, dessen style-Attribut den String
	 * "border-color" enthaelt — und das Plugin setzt CSS-Variablen wie
	 * --bkiai-switcher-border-color inline auf diesen Wrapper.
	 * Folge ohne Schutz: WP erzwingt border-style:solid, Theme-Defaults
	 * liefern Width + Color, und der Wrapper bekommt einen ungewollten
	 * (oft weissen) Rahmen.
	 * Der Wrapper selbst hat keinen eigenen Border-Design-Job — Border
	 * werden ausschliesslich auf .bkiai-lang-switcher__trigger und auf
	 * .bkiai-lang-switcher__menu gerendert. Daher hier hart abschalten.
	 *
	 * HINWEIS: Sauberere Loesung in v0.13.0 — CSS-Variablen umbenennen,
	 * sodass der String "border-color" gar nicht mehr im style-Attribut
	 * auftaucht. Diese Regel bleibt aber als Defense-in-Depth bestehen. */
	border-style: none !important;
	border-width: 0 !important;
}

.bkiai-lang-switcher__trigger {
	background: var(--bkiai-switcher-bg-color, transparent);
	border: 1px solid var(--bkiai-switcher-frame-tint, var(--bkiai-switcher-border-color, rgba(0, 0, 0, 0.15)));
	border-radius: var(--bkiai-switcher-border-radius, 6px);
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
	padding: 6px 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s, border-color 0.2s;
}

.bkiai-lang-switcher__trigger:hover {
	background: var(--bkiai-switcher-bg-hover-color, rgba(0, 0, 0, 0.05));
	border-color: var(--bkiai-switcher-frame-tint, var(--bkiai-switcher-border-color, rgba(0, 0, 0, 0.3)));
}

.bkiai-lang-switcher__trigger:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* v0.15.2.12: __current sollte Flag + Text immer nebeneinander rendern.
 * Pierre's Befund mit show="flag-name" — manche Themes setzen <span>
 * via .header * { display: block } untereinander. Wir erzwingen mit
 * inline-flex + Gap die horizontale Anordnung. */
.bkiai-lang-switcher__current {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

/* Trigger-Flagge: nutzt die Trigger-Flaggen-Variable. */
.bkiai-lang-switcher__current .bkiai-lang-flag {
	font-size: var(--bkiai-switcher-flag-size, 16px);
	line-height: 1;
	transform: translateY(var(--bkiai-switcher-flag-offset-y, 0px));
}

/* v0.15.2.12: Sprach-Name (bei show="flag-name") nicht in Block-Layout zwingen. */
.bkiai-lang-switcher__current .bkiai-lang-name,
.bkiai-lang-switcher__menu .bkiai-lang-name {
	display: inline-block !important;
	white-space: nowrap;
}

/* Fallback: Flaggen ausserhalb von __current/__menu (sollte nicht vorkommen, aber defensiv). */
.bkiai-lang-flag {
	font-size: var(--bkiai-switcher-flag-size, 16px);
	line-height: 1;
}

/* v0.15.2.10 + v0.15.2.11: Lokale SVG-Flagge im Frontend-Switcher.
 *
 * v0.15.2.11: Hoehe Spezifitaet + !important gegen Theme-CSS, das oft
 * generische img-Regeln (max-width, height:auto, display:none) im
 * Header/Navigation hat — die wuerden sonst unsere Flag-img-Tags
 * zerschiessen. Pierre's Befund: nach v0.15.2.10 verschwand die Flagge
 * im Toggle-Button, blieb aber im Dropdown sichtbar. Ursache: Theme-CSS
 * im Header-Kontext hat einen img-Selektor mit hoeherer Spezifitaet als
 * unser .bkiai-lang-flag-svg ueberschrieben.
 *
 * Skaliert sich automatisch zur konfigurierten Flag-Groesse (CSS-Variable).
 * Funktioniert auf Browsern ohne Flag-Emoji-Support (Windows-Edge etc.).
 */
.bkiai-lang-switcher .bkiai-lang-flag .bkiai-lang-flag-svg,
.bkiai-lang-switcher__current .bkiai-lang-flag .bkiai-lang-flag-svg,
.bkiai-lang-switcher__menu .bkiai-lang-flag .bkiai-lang-flag-svg,
.bkiai-lang-modal .bkiai-lang-flag-svg,
img.bkiai-lang-flag-svg {
	height: var(--bkiai-switcher-flag-size, 16px) !important;
	width: auto !important;
	max-width: calc(var(--bkiai-switcher-flag-size, 16px) * 1.5) !important;
	display: inline-block !important;
	vertical-align: middle !important;
	border-radius: 2px !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
	background: #fff !important;
	object-fit: cover !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Im Dropdown-Menue und Modal nutzen wir die Menu-Flag-Size-Variable. */
.bkiai-lang-switcher__menu .bkiai-lang-flag .bkiai-lang-flag-svg,
.bkiai-lang-modal .bkiai-lang-flag-svg {
	height: var(--bkiai-switcher-menu-flag-size, 16px) !important;
	max-width: calc(var(--bkiai-switcher-menu-flag-size, 16px) * 1.5) !important;
}

.bkiai-lang-switcher__current .bkiai-lang-code {
	font-weight: 600;
	letter-spacing: 0.5px;
	font-size: inherit;
	transform: translateY(var(--bkiai-switcher-text-offset-y, 0px));
}

.bkiai-lang-code {
	font-weight: 600;
	letter-spacing: 0.5px;
	font-size: inherit;
}

/* v0.15.2.16: Y-Offset auch fuer den vollen Sprach-Namen (show="flag-name").
 * Pierre's Befund: bisher griff der Offset nur fuer .bkiai-lang-code,
 * daher waren "Deutsch"/"English" im Menue nicht vertikal mittig
 * ausgerichtet. */
.bkiai-lang-switcher__current .bkiai-lang-name,
.bkiai-lang-switcher__menu .bkiai-lang-name {
	display: inline-block !important;
	transform: translateY(var(--bkiai-switcher-text-offset-y, 0px));
	white-space: nowrap;
}

/* ============================================================
 * v0.15.2.16: Font-Inheritance vom Parent-Container (z. B. Menue)
 *
 * Wenn die Setting "Schriftart vom Menue erben" aktiv ist (Default),
 * wird die Wrapper-Klasse "bkiai-lang-switcher--inherit-font" gesetzt.
 * Dann uebernehmen Code und Name die Font-Eigenschaften des Parents.
 *
 * Pierre's Befund: im Menue wirkte der Switcher-Text wie "Deutsch"
 * duenner und in anderer Groesse als die anderen Menue-Punkte —
 * weil Plugin font-weight:600 und eigene Font-Settings nutzte.
 *
 * Mit dieser Klasse wird font-family, font-size, font-weight, line-height
 * und letter-spacing vom Parent geerbt → optisch nicht mehr von
 * normalen Menue-Punkten unterscheidbar.
 * ============================================================ */
.bkiai-lang-switcher--inherit-font .bkiai-lang-code,
.bkiai-lang-switcher--inherit-font .bkiai-lang-name,
.bkiai-lang-switcher--inherit-font .bkiai-lang-switcher__trigger,
.bkiai-lang-switcher--inherit-font .bkiai-lang-switcher__item a,
.bkiai-lang-switcher--inherit-font .bkiai-lang-switcher__unavailable {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit;
}

/* ============================================================
 * v0.15.2.17: Font-Property-Overrides via CSS-Variablen.
 *
 * Hintergrund: bei aktivierter Inheritance vererbt sich font-weight
 * nur, wenn der direkte Parent es selbst hat. Viele Themes setzen
 * font-weight aber nur am <a>-Tag im Menue — das vererbt sich NICHT
 * auf den <button> des Sprachwechslers.
 *
 * Loesung: User kann im Backend einen expliziten font-weight setzen
 * (z. B. "700"). Das wird als CSS-Variable injiziert und ueberschreibt
 * die Inheritance.
 *
 * Default 'inherit' = keine Aenderung, CSS-Inheritance bleibt aktiv.
 *
 * Diese Regeln greifen SOWOHL bei --inherit-font als auch bei deaktivierter
 * Inheritance — User-Choice ist immer respektiert.
 * ============================================================ */
.bkiai-lang-switcher .bkiai-lang-code,
.bkiai-lang-switcher .bkiai-lang-name,
.bkiai-lang-switcher .bkiai-lang-switcher__trigger,
.bkiai-lang-switcher .bkiai-lang-switcher__item a,
.bkiai-lang-switcher .bkiai-lang-switcher__unavailable {
	font-weight: var(--bkiai-switcher-font-weight, inherit) !important;
	font-style: var(--bkiai-switcher-font-style, inherit) !important;
	text-transform: var(--bkiai-switcher-text-transform, inherit) !important;
}

.bkiai-lang-switcher__caret {
	font-size: 12px;
	opacity: 0.7;
	transition: transform 0.2s;
}

.bkiai-lang-switcher.is-open .bkiai-lang-switcher__caret {
	transform: rotate(180deg);
}

/* Dropdown-Menü — v0.8.1: separate Schrift-/Flaggen-Werte */

.bkiai-lang-switcher__menu {
	position: absolute;
	top: calc(100% + var(--bkiai-switcher-menu-offset-top, 4px));
	right: 0;
	min-width: 140px;
	background: var(--bkiai-switcher-menu-bg-color, #ffffff);
	border: 1px solid var(--bkiai-switcher-menu-frame-tint, var(--bkiai-switcher-menu-border-color, var(--bkiai-switcher-frame-tint, var(--bkiai-switcher-border-color, #e0e0e0))));
	border-radius: var(--bkiai-switcher-border-radius, 6px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	display: none;
	color: var(--bkiai-switcher-menu-text-color, #1a1a1a);
	font-size: var(--bkiai-switcher-menu-font-size, 14px);
}

.bkiai-lang-switcher.is-open .bkiai-lang-switcher__menu {
	display: block;
}

.bkiai-lang-switcher__item {
	margin: 0;
	padding: 0;
	display: block;
}

/* v0.8.2: Variablen direkt auf den Items setzen, damit Theme-CSS sie nicht
   leicht ueberschreiben kann (hoehere Spezifitaet als reine Vererbung). */
.bkiai-lang-switcher__menu .bkiai-lang-switcher__item a,
.bkiai-lang-switcher__menu .bkiai-lang-switcher__unavailable {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	color: var(--bkiai-switcher-menu-text-color, #1a1a1a);
	text-decoration: none;
	font-size: var(--bkiai-switcher-menu-font-size, 14px);
	transition: background 0.15s, color 0.15s;
}

.bkiai-lang-switcher__menu .bkiai-lang-switcher__item a:hover {
	background: var(--bkiai-switcher-menu-bg-hover-color, var(--bkiai-switcher-bg-hover-color, #f5f5f5));
	color: var(--bkiai-switcher-menu-text-hover-color, var(--bkiai-switcher-menu-text-color, #1a1a1a));
	text-decoration: none;
}

.bkiai-lang-switcher__menu .bkiai-lang-switcher__item.is-current a {
	background: var(--bkiai-switcher-menu-bg-hover-color, var(--bkiai-switcher-bg-hover-color, #f0f6ff));
	font-weight: 600;
}

/* Menue-Flagge: eigene Groesse separat vom Trigger steuerbar. */
.bkiai-lang-switcher__menu .bkiai-lang-flag {
	font-size: var(--bkiai-switcher-menu-flag-size, 16px);
	line-height: 1;
	transform: translateY(var(--bkiai-switcher-menu-flag-offset-y, 0px)) !important;
}

/* v0.8.7: Menu-Schrift Y-Offset. transform braucht inline-block. */
.bkiai-lang-switcher__menu .bkiai-lang-code {
	display: inline-block !important;
	transform: translateY(var(--bkiai-switcher-menu-text-offset-y, 0px)) !important;
}

.bkiai-lang-switcher__item.is-unavailable {
	cursor: not-allowed;
}

.bkiai-lang-switcher__unavailable {
	color: #999;
	opacity: 0.55;
	filter: grayscale(40%);
	cursor: not-allowed;
	user-select: none;
}

.bkiai-lang-switcher__unavailable-marker {
	/* v0.14.5: Logical Property statt margin-left, damit in RTL-Sprachen
	   (Arabisch, Hebraeisch) das Schloss-Symbol korrekt am Zeilenanfang
	   ausgerichtet wird statt am Zeilenende. */
	margin-inline-start: auto;
	font-size: 12px;
	color: #d8a800;
	opacity: 0.8;
}

/* ============================================================
 * Mobile Anpassung (Hamburger-Menü)
 * ============================================================ */

@media (max-width: 768px) {
	.bkiai-lang-switcher-menu-item {
		width: 100%;
	}

	.bkiai-lang-switcher {
		display: block;
		margin: 4px 0;
	}

	.bkiai-lang-switcher__trigger {
		width: 100%;
		justify-content: space-between;
	}

	.bkiai-lang-switcher__menu {
		position: static;
		box-shadow: none;
		border: 0;
		background: rgba(0, 0, 0, 0.04);
		margin-top: 4px;
		min-width: 0;
		width: 100%;
	}

	/* v0.12.3: DE/EN-Code-Schriftgewicht vom Theme-Menue erben.
	 * Desktop bleibt unveraendert bei font-weight: 600 (semibold) —
	 * dort sticht es bewusst hervor. Auf Mobile (Hamburger-Menue) sollen
	 * die Sprachcodes optisch zu den anderen Menue-Items passen, die
	 * praktisch immer mit Theme-Default-Gewicht (meist 400) gerendert werden.
	 * `inherit` zieht das Gewicht vom Eltern-Menueelement und passt sich
	 * automatisch an verschiedene Themes an. */
	.bkiai-lang-switcher .bkiai-lang-code,
	.bkiai-lang-switcher__current .bkiai-lang-code {
		font-weight: inherit;
	}
}

/* ============================================================
 * v0.12.2: Mobile-Design-Override (optional)
 * ------------------------------------------------------------
 * Wenn im Backend "Eigenes Mobile-Design verwenden" aktiv ist und
 * fuer ein Farbfeld ein Wert hinterlegt wurde, emittiert PHP die
 * zugehoerige `*-mobile`-CSS-Variable. Greift nur unter 768px.
 *
 * Pro Feld gilt: var(mobile, var(desktop, default)).
 *   - Mobile-Variable gesetzt -> Mobile-Farbe gewinnt.
 *   - Mobile-Variable leer    -> Desktop-Farbe gewinnt (heutiges Verhalten).
 *
 * !important ist hier noetig, weil die Basis-Regeln teils ohne
 * Media-Query schon Farben setzen und sonst nicht ueberschrieben
 * wuerden (gleiche Specificity, frueher im Stylesheet).
 * ============================================================ */
@media (max-width: 768px) {
	.bkiai-lang-switcher {
		color: var(--bkiai-switcher-text-color-mobile, var(--bkiai-switcher-text-color, #1a1a1a)) !important;
	}

	.bkiai-lang-switcher__trigger {
		/* v0.12.4 (revidiert in v0.12.5): Auf Mobile soll der HINTERGRUND auf
		 * dem LI sitzen (siehe naechster Regel-Block weiter unten), nicht auf
		 * dem Trigger. So fuellt die Hintergrundfarbe die ganze Zeile aus —
		 * wie bei den anderen Theme-Hamburger-Items. Daher hier transparent
		 * erzwingen, damit das LI-Background sichtbar durchscheint.
		 *
		 * Border-Color bleibt mit Desktop-Fallback wie bisher — Trigger-Rahmen
		 * ist eine andere Designentscheidung als die Zeilen-Hintergrundfarbe. */
		background: transparent !important;
		border-color: var(--bkiai-switcher-frame-tint-mobile, var(--bkiai-switcher-border-color-mobile, var(--bkiai-switcher-frame-tint, var(--bkiai-switcher-border-color, rgba(0, 0, 0, 0.15))))) !important;
	}

	.bkiai-lang-switcher__trigger:hover {
		background: var(--bkiai-switcher-bg-hover-color-mobile, var(--bkiai-switcher-bg-hover-color, rgba(0, 0, 0, 0.05))) !important;
	}

	.bkiai-lang-switcher__menu {
		background: var(--bkiai-switcher-menu-bg-color-mobile, var(--bkiai-switcher-menu-bg-color, #ffffff)) !important;
		border-color: var(--bkiai-switcher-menu-frame-tint-mobile, var(--bkiai-switcher-menu-border-color-mobile, var(--bkiai-switcher-menu-frame-tint, var(--bkiai-switcher-menu-border-color, #e0e0e0)))) !important;
		color: var(--bkiai-switcher-menu-text-color-mobile, var(--bkiai-switcher-menu-text-color, #1a1a1a)) !important;
	}

	.bkiai-lang-switcher__menu .bkiai-lang-switcher__item a,
	.bkiai-lang-switcher__menu .bkiai-lang-switcher__unavailable {
		color: var(--bkiai-switcher-menu-text-color-mobile, var(--bkiai-switcher-menu-text-color, #1a1a1a)) !important;
	}

	.bkiai-lang-switcher__menu .bkiai-lang-switcher__item a:hover {
		background: var(--bkiai-switcher-menu-bg-hover-color-mobile, var(--bkiai-switcher-menu-bg-hover-color, rgba(0, 0, 0, 0.05))) !important;
		color: var(--bkiai-switcher-menu-text-hover-color-mobile, var(--bkiai-switcher-menu-text-hover-color, #1a1a1a)) !important;
	}

	/* v0.12.5: Hintergrundfarbe auf das LI (= ganze Zeile) statt nur auf den Trigger.
	 * Hebt die `background: transparent !important`-Erzwingung aus Zeile 22 fuer
	 * Mobile auf, damit der Switcher wie ein normales Theme-Hamburger-Item aussieht
	 * (volle Zeilenbreite mit Hintergrund). Mobile-Override-Wert hat Vorrang, sonst
	 * leichte Toenung als Out-of-the-Box-Default. */
	li.bkiai-lang-switcher-menu-item,
	li.menu-item.bkiai-lang-switcher-menu-item {
		background: var(--bkiai-switcher-bg-color-mobile, rgba(0, 0, 0, 0.04)) !important;
		/* v0.12.7: Trennlinie oben, damit Switcher visuell ein normales Menue-Item ist.
		 * Dezenter Wert, funktioniert auf hellen und dunklen Hamburger-Hintergruenden. */
		border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
	}

	/* v0.12.7/0.12.8: Padding auf dem Trigger als CSS-Fallback.
	 * Primaer wird das Padding via JS (frontend.js::syncMobilePadding) vom
	 * Theme-Item-Padding kopiert — dadurch fuegt sich der Switcher in JEDES
	 * Theme automatisch ein.
	 * Falls JS nicht greift (kein Geschwister-Item, JS-Fehler, JS deaktiviert),
	 * springt dieser konservative Default ein. */
	.bkiai-lang-switcher__trigger {
		padding: 12px 22px !important;
	}
}

/* ============================================================
 * Inline-Style (alternativ)
 * ============================================================ */

.bkiai-lang-switcher--inline .bkiai-lang-switcher__trigger {
	display: none !important;
}

/* v0.15.2.12: Inline-Style muss Default-Menu-Hide ueberschreiben.
 * Default-Selektor in Zeile 59 hat Specificity (0,4,0) mit !important
 * und setzt display: none. Wir brauchen mindestens gleiche Spezifitaet
 * UND !important, mit zusaetzlichem --inline-Modifier um zu gewinnen.
 * Specificity hier: (0,5,0) durch dreifache --inline-Klasse. */
.bkiai-lang-switcher.bkiai-lang-switcher--inline.bkiai-lang-switcher--inline .bkiai-lang-switcher__menu.bkiai-lang-switcher__menu {
	position: static !important;
	display: flex !important;
	flex-direction: row !important;
	gap: 6px !important;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	flex-wrap: wrap !important;
}

/* Items im Inline-Mode: nebeneinander, nicht volle Breite. */
.bkiai-lang-switcher--inline .bkiai-lang-switcher__menu .bkiai-lang-switcher__item {
	display: inline-flex !important;
	width: auto !important;
	margin: 0 !important;
}

.bkiai-lang-switcher--inline .bkiai-lang-switcher__item a,
.bkiai-lang-switcher--inline .bkiai-lang-switcher__unavailable {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 4px 10px;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* v0.15.2.18: Aktive Sprache - Hintergrund und Schriftfarbe via CSS-Variablen.
 * Defaults: #2271b1 (WordPress-Blau) / #ffffff (weisse Schrift).
 * Schriftfarbe wird in PHP per WCAG-Luminanz automatisch berechnet
 * (heller BG -> #1a1a1a, dunkler BG -> #ffffff). */
.bkiai-lang-switcher--inline .bkiai-lang-switcher__item.is-current a {
	background: var(--bkiai-switcher-active-bg-color, #2271b1);
	color: var(--bkiai-switcher-active-text-color, #ffffff);
	border-color: var(--bkiai-switcher-active-bg-color, #2271b1);
}

/* ============================================================
 * PHASE 5.1: Floating-Switcher
 * ============================================================ */

.bkiai-floating-switcher {
	position: fixed;
	z-index: 9999;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #1a1a1a;
}

.bkiai-floating-switcher .bkiai-lang-switcher {
	margin: 0;
}

.bkiai-floating-switcher .bkiai-lang-switcher__trigger {
	border-color: rgba(0, 0, 0, 0.1);
	color: #1a1a1a;
}

.bkiai-floating-switcher .bkiai-lang-switcher__trigger:hover {
	background: rgba(0, 0, 0, 0.04);
}

/* Position-Varianten */

.bkiai-floating--top-right {
	top: 20px;
	right: 20px;
}

.bkiai-floating--top-left {
	top: 20px;
	left: 20px;
}

.bkiai-floating--bottom-right {
	bottom: 20px;
	right: 20px;
}

.bkiai-floating--bottom-left {
	bottom: 20px;
	left: 20px;
}

/* Bei Bottom-Position öffnet das Dropdown nach OBEN */

.bkiai-floating--bottom-right .bkiai-lang-switcher__menu,
.bkiai-floating--bottom-left .bkiai-lang-switcher__menu {
	top: auto;
	bottom: calc(100% + 4px);
}

/* Bei Left-Position öffnet das Dropdown nach RECHTS */

.bkiai-floating--top-left .bkiai-lang-switcher__menu,
.bkiai-floating--bottom-left .bkiai-lang-switcher__menu {
	right: auto;
	left: 0;
}

/* Mobile: Floating-Switcher kleiner */

@media (max-width: 768px) {
	.bkiai-floating-switcher {
		padding: 2px;
	}

	.bkiai-floating-switcher .bkiai-lang-switcher__trigger {
		padding: 4px 8px;
		font-size: 13px;
	}

	.bkiai-floating--top-right,
	.bkiai-floating--top-left {
		top: 12px;
	}

	.bkiai-floating--bottom-right,
	.bkiai-floating--bottom-left {
		bottom: 12px;
	}

	.bkiai-floating--top-right,
	.bkiai-floating--bottom-right {
		right: 12px;
	}

	.bkiai-floating--top-left,
	.bkiai-floating--bottom-left {
		left: 12px;
	}
}

/* Bei Admin-Bar oben Floating leicht nach unten verschieben */

.admin-bar .bkiai-floating--top-right,
.admin-bar .bkiai-floating--top-left {
	top: 52px;
}

@media (max-width: 782px) {
	.admin-bar .bkiai-floating--top-right,
	.admin-bar .bkiai-floating--top-left {
		top: 60px;
	}
}

/* ============================================================
 * v0.14.9 / v0.14.13 — Popup-Modal (Switcher Open-Style "popup")
 * ============================================================
 * Zwei Position-Modi (data-bkiai-popup-position):
 *  - "anchored" (Default): Modal erscheint unter dem Trigger,
 *    Position wird per JS gesetzt (top/left als Inline-Style).
 *    Backdrop ist transparent — wirkt wie ein erweitertes
 *    Dropdown. Mobile: faellt auf zentriert zurueck.
 *  - "centered": Klassisches zentriertes Modal mit dunklem
 *    Backdrop. Beste UX fuer Landing-Pages.
 */

/* Dropdown im Popup-Modus immer ausblenden. */
.bkiai-lang-switcher.bkiai-lang-switcher--open-popup .bkiai-lang-switcher__menu,
.bkiai-lang-switcher--open-popup .bkiai-lang-switcher__menu {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Modal-Container — Grundzustand. */
.bkiai-lang-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	animation: bkiai-modal-fade-in 0.18s ease-out;
}

.bkiai-lang-modal[hidden] {
	display: none;
}

/* Centered-Modus: dunkler Backdrop, Modal mittig. */
.bkiai-lang-modal--position-centered {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.bkiai-lang-modal--position-centered .bkiai-lang-modal__backdrop {
	background-color: rgba(20, 20, 30, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Anchored-Modus: kein Backdrop sichtbar (nur Click-Catcher), Modal positioniert
   sich per JS. Backdrop deckt trotzdem den ganzen Viewport ab — sonst
   funktioniert "Klick ausserhalb schliesst" nicht. */
.bkiai-lang-modal--position-anchored .bkiai-lang-modal__backdrop {
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

@keyframes bkiai-modal-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Backdrop (Click-Catcher). */
.bkiai-lang-modal__backdrop {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

/* Panel — das eigentliche Modal-Fenster.
   Im Anchored-Modus wird Position per JS gesetzt (top/left).
   Im Centered-Modus zentriert das Flexbox-Layout. */
/* Panel — das eigentliche Modal-Fenster.
   v0.14.16: Alle kritischen Visual-Properties mit !important, damit
   Themes mit aggressiven Container/Menu-Selektoren nicht ueberschreiben.
   Selektor-Spezifitaet zusaetzlich erhoeht durch doppelten Klassen-Prefix. */
.bkiai-lang-modal .bkiai-lang-modal__panel {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: 580px !important;
	max-height: calc(100vh - 80px) !important;
	overflow-y: auto !important;
	background: #fff !important;
	border: none !important;
	border-radius: 14px !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
	/* v0.14.17: Padding = Gap = 16px fuer harmonische Proportion. */
	padding: 16px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	animation: bkiai-modal-slide-in 0.22s ease-out;
}

.bkiai-lang-modal .bkiai-lang-modal--position-anchored .bkiai-lang-modal__panel,
.bkiai-lang-modal--position-anchored .bkiai-lang-modal__panel {
	position: absolute !important;
	width: auto !important;
	min-width: 480px !important;
	max-width: 720px !important;
}

@keyframes bkiai-modal-slide-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Schliessen-X oben rechts (v0.14.17: in Padding-Bereich integriert). */
.bkiai-lang-modal__close {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: #555;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background-color 0.15s, color 0.15s;
}

.bkiai-lang-modal__close:hover,
.bkiai-lang-modal__close:focus {
	background: rgba(0, 0, 0, 0.08);
	color: #000;
	outline: none;
}

/* Titel. */
.bkiai-lang-modal__title {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 600;
	color: #1a1a1a;
	text-align: center;
}

/* Grid — auto-fit, mehr Gap fuer luftigeren Look.
   v0.14.16: !important damit Themes Card-Layout nicht zerschiessen. */
.bkiai-lang-modal .bkiai-lang-modal__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@media (max-width: 768px) {
	.bkiai-lang-modal__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.bkiai-lang-modal__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.bkiai-lang-modal__panel {
		padding: 12px !important;
	}

	/* Mobile: Anker-Modus faellt auf zentriert zurueck — sonst staende
	   das Popup teils ausserhalb des kleinen Viewports. */
	.bkiai-lang-modal--position-anchored {
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding: 20px;
		box-sizing: border-box;
	}

	.bkiai-lang-modal--position-anchored .bkiai-lang-modal__panel {
		position: relative;
		top: auto !important;
		left: auto !important;
		min-width: 0;
		width: 100%;
		max-width: 420px;
	}

	.bkiai-lang-modal--position-anchored .bkiai-lang-modal__backdrop {
		background-color: rgba(20, 20, 30, 0.4);
	}
}

/* Einzelne Sprach-Karte — groesser und luftiger wie Linguise.
   v0.14.16: !important fuer Background + Border, damit Themes die
   Cards nicht "unsichtbar" machen. */
.bkiai-lang-modal .bkiai-lang-modal__card {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 14px 18px !important;
	background: #fff !important;
	border: 1.5px solid #e5e7eb !important;
	border-radius: 12px !important;
	text-decoration: none !important;
	color: #1a1a1a !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	transition: background-color 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
	cursor: pointer;
	box-sizing: border-box;
}

.bkiai-lang-modal .bkiai-lang-modal__card:hover,
.bkiai-lang-modal .bkiai-lang-modal__card:focus {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	outline: none;
}

.bkiai-lang-modal .bkiai-lang-modal__card.is-current {
	background: #eef5ff !important;
	border-color: #4a90e2 !important;
	font-weight: 600 !important;
}

.bkiai-lang-modal .bkiai-lang-modal__card.is-unavailable {
	background: #f9fafb !important;
	color: #9ca3af !important;
	cursor: not-allowed;
	opacity: 0.7;
}

.bkiai-lang-modal__card.is-unavailable:hover {
	background: #f9fafb;
	border-color: #e5e7eb;
	transform: none;
	box-shadow: none;
}

.bkiai-lang-modal__flag {
	font-size: 24px;
	line-height: 1;
	flex-shrink: 0;
	width: 28px;
	text-align: center;
}

.bkiai-lang-modal__name {
	flex: 1;
}

.bkiai-lang-modal__unavail-marker {
	color: #d8a800;
	font-size: 16px;
	margin-inline-start: auto;
}