/**
 * IDF Woo Sequence - Frontend Styles
 *
 * Scoped auf .idf-wsq-wrapper. Die Tokens (--idf-wsq-*) gelten ausschliesslich
 * fuer plugin-eigene Elemente: Nummernkreis, Verbindungslinie, Button, Checkbox
 * und Rueckmeldungen. Fliesstext bekommt bewusst weder font-family noch
 * font-size noch color - Typografie gehoert dem Theme, sonst sticht die
 * Timeline aus jeder Seite heraus, auf der sie steht.
 *
 * @package Idf_Woo_Sequence
 */

.idf-wsq-wrapper {
	--idf-wsq-primary: #c8102e;
	--idf-wsq-primary-hover: #a50d26;
	--idf-wsq-on-primary: #ffffff;
	--idf-wsq-border: #d8dde3;
	--idf-wsq-bg: #ffffff;
	--idf-wsq-bg-soft: #f6f8fa;
	--idf-wsq-error: #c8102e;
	--idf-wsq-radius: 0;

	/* Typografie. `inherit` heisst: das Theme bestimmt. Erst wenn in den
	   Einstellungen etwas gepflegt ist, ueberschreibt der Inline-Block diese
	   drei Werte - vorher aendert die Timeline an der Schrift nichts. */
	--idf-wsq-font: inherit;
	--idf-wsq-font-size: inherit;
	--idf-wsq-text: inherit;
	--idf-wsq-muted: inherit;

	/* Groesse des Produktnamens, relativ zur Schrift des Themes. */
	--idf-wsq-name-size: 1.2em;

	/* Geometrie der Timeline - an einer Stelle, damit Kreis, Linie und
	   Einzug nicht auseinanderlaufen. */
	--idf-wsq-dot: 2rem;
	--idf-wsq-line: 2px;
	--idf-wsq-gap: 1rem;

	/* Ziffer im Nummernkreis. Absolut und nicht relativ zur Kreisgroesse: eine
	   groessere Zahl in einem kleinen Kreis soll moeglich bleiben, und
	   umgekehrt. */
	--idf-wsq-step-number-size: 0.875rem;

	/* Abstand zwischen dem letzten Schritt und dem Sammel-Button. Der Einzug des
	   Buttons steht bewusst NICHT hier - er faellt auf --idf-wsq-content-indent
	   zurueck, siehe .idf-wsq-actions. */
	--idf-wsq-actions-gap: 1rem;

	/* Innenabstand eines Schritts und Breite des Kaestchens. Beides geht in die
	   Fluchtlinie ein, an der Schrittinhalt und Sammel-Button stehen. */
	--idf-wsq-pad: 0.75rem;
	--idf-wsq-check-size: 1.15rem;

	/* Strichstaerke des gezeichneten Hakens. Sie haengt an der Kaestchengroesse,
	   nicht an einem festen Wert: bis 0.11.0 stand hier 2px, und ein
	   vergroessertes Kaestchen haette einen Haarstrich darin gehabt. Bei der
	   Standardgroesse ergibt die Rechnung rund 2,3px. */
	--idf-wsq-check-stroke: calc(var(--idf-wsq-check-size) / 8);

	/* Masse ALLER Bedienelemente: Varianten-Schaltflaechen, Mengenfeld,
	   Sammel-Button, Kaestchen. Sie stehen an einer Stelle, damit die vier nicht
	   wieder auseinanderlaufen, sobald eines angefasst wird - genau das war der
	   Grund fuer den Umbau in 0.8.0.

	   Die Hoehe ist eine MINDESThoehe: Schaltflaechen mit Preis sind zweizeilig
	   und duerfen darueber hinauswachsen, die uebrigen folgen ihnen ueber
	   align-items:stretch der Zeile. */
	--idf-wsq-control-pad-y: 0.5em;
	--idf-wsq-control-pad-x: 0.9em;
	--idf-wsq-control-h: 3.1em;
	--idf-wsq-control-border: 1px;

	/* Schriftgroesse und Zeilenhoehe der ZWEITEN Zeile eines Bedienelements:
	   beim Knopf der Preis, beim Mengenkasten das Eingabefeld. Beide Zeilen
	   muessen exakt gleich hoch sein, sonst stehen die Kaesten nebeneinander
	   zwei Pixel versetzt. Der Preis ist kleiner gesetzt als das Eingabefeld -
	   deshalb wird nicht die Schriftgroesse angeglichen, sondern die
	   RECHNERISCHE Zeilenhoehe: 0.9 * 1.3 ergibt bei beiden denselben Wert, und
	   weil alles relativ bleibt, waechst es mit der Schrift des Themes mit. */
	--idf-wsq-control-value-size: 0.9;
	--idf-wsq-control-value-line: 1.3;

	/* Abstand vom linken Rand bis zum Inhalt eines Schritts. Kreis, Innenabstand,
	   Kaestchen und dessen Abstand zum Text - genau hier beginnen Name, Kurztext
	   und Variantenwahl, und deshalb auch der Sammel-Button. */
	--idf-wsq-content-indent: calc(
		var(--idf-wsq-dot) + var(--idf-wsq-gap) + var(--idf-wsq-pad)
		+ var(--idf-wsq-check-size) + var(--idf-wsq-pad)
	);

	box-sizing: border-box;
	width: 100%;
	font-family: var(--idf-wsq-font);
	font-size: var(--idf-wsq-font-size);
	color: var(--idf-wsq-text);
}

.idf-wsq-wrapper *,
.idf-wsq-wrapper *::before,
.idf-wsq-wrapper *::after {
	box-sizing: border-box;
}

/* Themes setzen display-Regeln gern per Element-Selektor und heben [hidden]
   damit aus. Die Rueckmeldung muss aber verborgen bleiben, bis es etwas zu
   melden gibt. */
.idf-wsq-wrapper [hidden] {
	display: none !important;
}

.idf-wsq-chain + .idf-wsq-chain {
	margin-top: 2rem;
}

.idf-wsq-chain-title {
	margin: 0 0 1rem;
}

.idf-wsq-form {
	margin: 0;
}

/* ── Timeline ──────────────────────────────────────────────────────────── */

.idf-wsq-steps {
	counter-reset: idf-wsq-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.idf-wsq-step {
	position: relative;
	margin: 0;
	padding: 0 0 var(--idf-wsq-gap) calc(var(--idf-wsq-dot) + var(--idf-wsq-gap));
}

/* Nummernkreis. Die Nummer kommt aus dem Counter, nicht aus dem Markup -
   faellt ein Schritt weg, zaehlt der Rest lueckenlos weiter. */
.idf-wsq-step::before {
	counter-increment: idf-wsq-step;
	content: counter(idf-wsq-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--idf-wsq-dot);
	height: var(--idf-wsq-dot);
	border: 1px solid var(--idf-wsq-border);
	border-radius: 50%;
	background: var(--idf-wsq-bg);

	/* Nur die Ziffer im ungefuellten Kreis. Der aktuelle und der erledigte
	   Schritt ueberschreiben sie weiter unten mit --idf-wsq-on-primary: dort
	   steht sie auf der Akzentflaeche und braucht deren Gegenfarbe. */
	color: var(--idf-wsq-step-number, inherit);
	font-size: var(--idf-wsq-step-number-size);
	font-weight: 600;
	line-height: 1;
}

/* Verbindungslinie zum naechsten Schritt. */
.idf-wsq-step::after {
	content: "";
	position: absolute;
	top: var(--idf-wsq-dot);
	bottom: 0;
	left: calc(var(--idf-wsq-dot) / 2 - var(--idf-wsq-line) / 2);
	width: var(--idf-wsq-line);
	background: var(--idf-wsq-border);
}

.idf-wsq-step:last-child {
	padding-bottom: 0;
}

.idf-wsq-step:last-child::after {
	display: none;
}

/* ── Schritt-Inhalt ────────────────────────────────────────────────────── */

.idf-wsq-step-body {
	display: flex;
	align-items: flex-start;
	gap: var(--idf-wsq-pad);
	padding: 0.375rem var(--idf-wsq-pad) 0.625rem;
	border-radius: var(--idf-wsq-radius);
}

.idf-wsq-step-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	min-width: 0;
}

/* Der Name traegt den Schritt und steht deshalb groesser als der Rest. Die
   Angabe ist relativ (em): so waechst sie mit der Schrift des Themes mit,
   statt eine feste Groesse dagegenzusetzen. */
.idf-wsq-step-name {
	font-size: var(--idf-wsq-name-size);
	font-weight: 600;
	line-height: 1.3;
}

.idf-wsq-step-text {
	margin: 0;
	color: var(--idf-wsq-muted);
}

/* Ergaenzungsbedarf: was zu diesem Produkt noch gebraucht wird. Dezent wie der
   Kurztext - es ist ein Hinweis, keine Warnung, und der Schritt bleibt
   auswaehlbar. */
.idf-wsq-step-req {
	margin: 0;
	color: var(--idf-wsq-muted);
}

/* ── Variantenwahl ─────────────────────────────────────────────────────── */

/* Eine Radio-Gruppe, dargestellt als Knopfreihe. Der Knopf selbst steht nur
   fuer Screenreader und Tastatur da (.idf-wsq-sr); sichtbar ist die Flaeche
   daneben.

   Die Farben laufen ueber eine Rueckfall-Kette: --idf-wsq-choice-* entsteht nur,
   wenn das zugehoerige Feld in den Einstellungen gepflegt ist (siehe
   Settings::design_inline_css()); sonst greift die allgemeine Farbe der
   Timeline. Deshalb sind die choice-Variablen oben NICHT vordefiniert - eine
   Vordefinition wuerde den Rueckfall aushebeln und die Kette wertlos machen. */
.idf-wsq-variations {
	display: block;
	width: 100%;
	margin: 0.25rem 0 0;
	padding: 0;
	border: 0;

	/* Fieldsets bringen in manchen Browsern eine Mindestbreite mit, die sie in
	   schmalen Spalten ueber den Rand schiebt. */
	min-width: 0;
}

.idf-wsq-variation-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* `relative`, damit der absolut gesetzte Knopf (.idf-wsq-sr) in seiner Flaeche
   liegt. Ohne das haengt er am naechsten positionierten Vorfahren, und der
   Browser springt beim Tabben an die falsche Stelle der Seite. */
.idf-wsq-variation-option {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.idf-wsq-variation-box {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.1em;
	min-height: var(--idf-wsq-control-h);
	padding: var(--idf-wsq-control-pad-y) var(--idf-wsq-control-pad-x);
	border: var(--idf-wsq-control-border) solid var(--idf-wsq-choice-border, var(--idf-wsq-border));
	border-radius: var(--idf-wsq-radius);
	background: var(--idf-wsq-choice-bg, var(--idf-wsq-bg));
	line-height: 1.3;
}

.idf-wsq-variation-name {
	font-weight: 600;
}

.idf-wsq-variation-price {
	color: var(--idf-wsq-muted);
	font-size: calc(var(--idf-wsq-control-value-size) * 1em);
	line-height: var(--idf-wsq-control-value-line);
}

.idf-wsq-variation-option:hover .idf-wsq-variation-box {
	border-color: var(--idf-wsq-choice-on-border, var(--idf-wsq-primary));
}

/* Gewaehlt. Die Farbe allein traegt die Aussage nicht - der Rahmen wird
   zusaetzlich dicker, damit die Wahl auch ohne Farbwahrnehmung erkennbar ist.
   Der Innenabstand gleicht die zusaetzliche Rahmenstaerke aus, sonst
   verspringt die Reihe beim Anklicken. */
.idf-wsq-variation:checked + .idf-wsq-variation-box {
	border-color: var(--idf-wsq-choice-on-border, var(--idf-wsq-primary));
	border-width: calc(var(--idf-wsq-control-border) + 1px);
	padding:
		calc(var(--idf-wsq-control-pad-y) - 1px)
		calc(var(--idf-wsq-control-pad-x) - 1px);
	background: var(--idf-wsq-choice-on-bg, var(--idf-wsq-bg-soft));
	color: var(--idf-wsq-choice-on-text, inherit);
}

/* Der Preis ist im Ruhezustand gedaempft. Ist fuer die gewaehlte Flaeche eine
   eigene Schriftfarbe gesetzt, gilt sie auch fuer ihn - sonst stuende auf einer
   dunkel gefuellten Flaeche weiter der graue Betrag. */
.idf-wsq-variation:checked + .idf-wsq-variation-box .idf-wsq-variation-price {
	color: var(--idf-wsq-choice-on-text, var(--idf-wsq-muted));
}

/* Der Knopf selbst ist unsichtbar - der Fokusring muss deshalb auf der Flaeche
   landen, sonst waere die Tastaturbedienung blind. */
.idf-wsq-variation:focus-visible + .idf-wsq-variation-box {
	outline: 2px solid var(--idf-wsq-choice-on-border, var(--idf-wsq-primary));
	outline-offset: 2px;
}

/* ── Menge ─────────────────────────────────────────────────────────────── */

/* Das Feld kommt weiterhin von WooCommerce (`woocommerce_quantity_input()`),
   damit „einzeln verkaufen", Mindest- und Hoechstmenge und fremde Mengenregeln
   greifen. Sein AUSSEHEN gehoert seit 0.7.1 dem Plugin: Menge und Variantenwahl
   sind eine Entscheidung und stehen nebeneinander - zwei verschiedene Optiken
   auf einer Linie sehen aus wie ein Fehler.

   Die Rueckfall-Kette ist deshalb dreistufig: --idf-wsq-qty-* faellt auf die
   Schaltflaechen-Farbe zurueck und die wiederum auf die allgemeine Farbe der
   Timeline. Solange in den Einstellungen unter „Mengenfeld" nichts gepflegt ist,
   sieht es also weiter genau aus wie eine Varianten-Schaltflaeche - so war es
   bis 0.10.0 fest verdrahtet. Wer die Schaltflaechen kraeftig faerbt, kann das
   Mengenfeld seit 0.11.0 davon loesen, ohne auf die Reihe zu verzichten.

   Keine dieser Variablen ist oben vordefiniert: eine Vordefinition wuerde den
   Rueckfall aushebeln und die Kette wertlos machen. */
/* Der Rand sitzt am UMSCHLIESSENDEN Element, nicht am Zahlenfeld. Genau daran
   scheiterte 0.7.1: gefaerbt war nur `input.qty`, waehrend der `.quantity`-Kasten
   des Themes seinen eigenen Rand behielt - zwei Raender ineinander, drei
   Fuellfarben in einem Bedienelement.

   `overflow: hidden` haelt Minus und Plus innerhalb der gerundeten Ecken, ohne
   dass sie eigene Radien brauchen. */
/* Der Kasten sitzt am Wrapper, nicht mehr an `.quantity`: seit 0.9.0 steht die
   Beschriftung „Menge" darin, und die muss mit umschlossen sein. Aufbau und
   Masse sind damit dieselben wie bei einer Varianten-Schaltflaeche - oben die
   Bezeichnung, darunter der Wert. */
.idf-wsq-qty-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.1em;
	min-height: var(--idf-wsq-control-h);
	padding: var(--idf-wsq-control-pad-y) var(--idf-wsq-control-pad-x);
	border: var(--idf-wsq-control-border) solid
		var(--idf-wsq-qty-border, var(--idf-wsq-choice-border, var(--idf-wsq-border)));
	border-radius: var(--idf-wsq-radius);
	background: var(--idf-wsq-qty-bg, var(--idf-wsq-choice-bg, var(--idf-wsq-bg)));

	/* Beschriftung, Zahl sowie Minus und Plus haengen alle an dieser Farbe -
	   die drei stehen auf `inherit`. Ohne eigene Angabe erbt der Kasten wie
	   bisher vom Theme. */
	color: var(--idf-wsq-qty-text, inherit);
	line-height: 1.3;
}

/* Wie die Bezeichnung einer Schaltflaeche - die beiden stehen nebeneinander und
   sollen auf derselben Zeile beginnen. */
.idf-wsq-qty-label {
	font-weight: 600;
}

/* Zeilenhoehe wie die Preiszeile daneben: dieselbe Rechnung, nur bei voller
   Schriftgroesse - das Eingabefeld darf nicht kleiner gesetzt werden, sonst
   zoomen mobile Browser beim Hineintippen. */
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity {
	display: flex;
	align-items: center;
	line-height: calc(var(--idf-wsq-control-value-size) * var(--idf-wsq-control-value-line));
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	float: none;   /* WooCommerce-Themes floaten `.quantity` gern nach links. */
}

/* Die Spezifitaet ist hier bewusst hochgezogen (vier Klassen plus Element):
   Shop-Themes bringen fuer das Mengenfeld eigene Regeln der Form
   `.woocommerce .quantity input.qty` mit. Ohne den Vorsprung entschiede die
   Ladereihenfolge der Stylesheets darueber, ob das Feld zu den Schaltflaechen
   passt - und die ist nicht zugesichert. Kein !important: das naehme dem Theme
   auch noch die letzte Korrekturmoeglichkeit.

   Die Hoehe kommt aus `align-items: stretch`, nicht aus height: 100% - eine
   Prozenthoehe gegen eine automatische Elternhoehe traegt nicht. */
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap input.qty {
	width: 2.6em;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;

	/* Eine Stufe unter der Schrift des Kastens: ohne eigene Angabe erbt die Zahl
	   wie bisher die Farbe der Beschriftung „Menge". */
	color: var(--idf-wsq-qty-input, inherit);
	font-size: inherit;

	/* Ohne die 1 traegt das Feld die Zeilenhoehe des Themes mit nach aussen und
	   macht den Kasten hoeher als die Schaltflaeche daneben. */
	line-height: 1;
	text-align: center;
	box-shadow: none;
}

/* Minus und Plus des Themes. Sie kommen je nach Theme als `input[type=button]`,
   als `<button>` oder gar nicht - alle drei Faelle muessen tragen, und im
   letzten darf keine Luecke entstehen (deshalb kein fester Platzhalter).

   Die Trennlinien sitzen an den Knoepfen, nicht am Zahlenfeld: gibt es keine
   Knoepfe, gibt es auch keine Linien. */
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity .minus,
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity .plus,
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity input[type="button"],
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.6em;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;

	/* Dieselbe Quelle wie die Zahl daneben - die drei gehoeren sichtbar
	   zusammen und sollen sich nicht getrennt einstellen lassen. */
	color: var(--idf-wsq-qty-input, inherit);
	font-size: inherit;
	line-height: 1;
	opacity: 0.75;
	cursor: pointer;
	box-shadow: none;
}

.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity .minus:hover,
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity .plus:hover,
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity input[type="button"]:hover,
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap .quantity button:hover {
	opacity: 1;
	background: transparent;
	color: var(--idf-wsq-qty-input, inherit);
}

/* Liefert das Theme Minus und Plus, sind die Pfeilchen des Browsers daneben
   doppelt gemoppelt und zerschneiden die Flaeche. Ohne Theme-Knoepfe bleiben sie
   stehen - dann sind sie die einzige Klickmoeglichkeit neben der Tastatur. */
.idf-wsq-qty-wrap .quantity:has(.minus) input.qty::-webkit-inner-spin-button,
.idf-wsq-qty-wrap .quantity:has(.plus) input.qty::-webkit-inner-spin-button,
.idf-wsq-qty-wrap .quantity:has(input[type="button"]) input.qty::-webkit-inner-spin-button,
.idf-wsq-qty-wrap .quantity:has(button) input.qty::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

.idf-wsq-qty-wrap .quantity:has(.minus) input.qty,
.idf-wsq-qty-wrap .quantity:has(.plus) input.qty,
.idf-wsq-qty-wrap .quantity:has(input[type="button"]) input.qty,
.idf-wsq-qty-wrap .quantity:has(button) input.qty {
	-moz-appearance: textfield;
}

/* Der Fokusring gehoert um das ganze Bedienelement, nicht um das Zahlenfeld
   darin - sonst saehe man einen Rahmen im Rahmen. */
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap input.qty:focus,
.idf-wsq-wrapper .idf-wsq-controls .idf-wsq-qty-wrap input.qty:focus-visible {
	outline: 0;
	box-shadow: none;
}

.idf-wsq-qty-wrap:focus-within {
	outline: 2px solid
		var(--idf-wsq-qty-on-border, var(--idf-wsq-choice-on-border, var(--idf-wsq-primary)));
	outline-offset: 2px;
}

/* Verstecktes Feld bei „einzeln verkaufen". Es steht ohne Wrapper direkt in der
   Zeile - display:none nimmt es aus dem Flex-Fluss, sodass davor kein Abstand
   entsteht. */
.idf-wsq-controls .quantity.hidden {
	display: none;
}

/* ── Zeile aus Menge und Varianten ─────────────────────────────────────── */

/* `stretch`: die Schaltflaechen sind zweizeilig (Bezeichnung, Preis), das
   Mengenfeld einzeilig. Ohne das staende ein niedriges Feld neben hohen
   Knoepfen. Umbruch statt Stauchung, wenn die Spalte zu schmal wird. */
.idf-wsq-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
	margin-top: 0.25rem;
}

/* In der Zeile bringt das Fieldset seinen eigenen Abstand nicht mit - den setzt
   der gap. Es darf schrumpfen, damit die Knopfreihe in sich umbricht, statt die
   Menge aus der Zeile zu draengen.

   `display: flex` ist hier kein Selbstzweck: `align-items: stretch` der Zeile
   macht zwar das Fieldset so hoch wie das hoechste Element, aber zwischen ihm
   und der Schaltflaeche liegen noch Liste und Label. Ohne dass jede Ebene die
   Hoehe weiterreicht, bleibt die Schaltflaeche auf ihrer Inhaltshoehe stehen -
   sichtbar als zwei Pixel Versatz gegen das Mengenfeld. */
.idf-wsq-controls .idf-wsq-variations {
	display: flex;
	flex: 1 1 auto;
	width: auto;
	margin-top: 0;
}

.idf-wsq-controls .idf-wsq-variation-list {
	flex: 1 1 auto;
}

.idf-wsq-controls .idf-wsq-variation-option {
	align-items: stretch;
}

.idf-wsq-controls .idf-wsq-variation-box {
	flex: 1 1 auto;
}

.idf-wsq-choice {
	display: flex;
	align-items: center;
	margin: 0;
	padding-top: 0.2rem;
	cursor: pointer;
}

/* Selbst gezeichnet statt Systemkaestchen: sonst steht neben Bedienelementen
   mit eigenem Rand und Radius ein graues Kaestchen aus dem Betriebssystem, das
   zu nichts davon passt. Es benutzt dieselben Farbquellen wie die
   Schaltflaechen, ist aber quadratisch und klein - es ist ein Zustand, kein
   Knopf.

   `appearance: none` nimmt dem Element auch den Haken. Der kommt deshalb als
   gedrehtes L aus zwei Rahmenkanten zurueck (::after), nicht als Zeichen: ein
   Glyph haenge an der Schrift des Themes und saesse in jeder Installation
   anders. */
/* Die Spezifitaet ist hier aus demselben Grund hochgezogen wie beim Mengenfeld:
   Shop-Themes bringen fuer Formularelemente eigene Regeln mit, typischerweise
   ueber `.woocommerce input[type="checkbox"]`. In 0.8.0 hing das Kaestchen nur
   an einer Klasse - dort gewann eine weisse Theme-Fuellung, waehrend der Haken
   weiter in --idf-wsq-on-primary (ebenfalls weiss) gezeichnet wurde: weiss auf
   weiss, angehakt sah aus wie leer. */
.idf-wsq-wrapper input[type="checkbox"].idf-wsq-check {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: var(--idf-wsq-check-size);
	height: var(--idf-wsq-check-size);
	margin: 0;
	padding: 0;
	border: var(--idf-wsq-control-border) solid var(--idf-wsq-choice-border, var(--idf-wsq-border));
	border-radius: calc(var(--idf-wsq-radius) / 2);

	/* Bewusst NICHT die Fuellung der Schaltflaechen: sind Flaechen- und
	   Randfarbe gleich gepflegt - auf Stucco Pompeji beides derselbe Lachston -
	   waere ein leeres Kaestchen ein satter Block und ein angehaktes sehe fast
	   genauso aus. Der Unterschied zwischen an und aus muss die Fuellung
	   tragen, also faengt es leer an. */
	background: transparent;
	background-image: none;
	box-shadow: none;
	cursor: pointer;
}

/* Manche Themes setzen ihren eigenen Haken als Zeichen aus einer Icon-Schrift
   ins ::before. Der stuende hier zusaetzlich zum gezeichneten und saesse an
   einer anderen Stelle. */
.idf-wsq-wrapper input[type="checkbox"].idf-wsq-check::before {
	content: none;
	display: none;
}

/* Rand und Flaeche kommen aus derselben Quelle. Sie sind schon immer identisch,
   und zwei getrennte Felder in den Einstellungen boeten hier nur eine Wahl an,
   die niemand trifft. */
.idf-wsq-wrapper input[type="checkbox"].idf-wsq-check:checked {
	border-color: var(--idf-wsq-check-bg, var(--idf-wsq-choice-on-border, var(--idf-wsq-primary)));
	background: var(--idf-wsq-check-bg, var(--idf-wsq-choice-on-border, var(--idf-wsq-primary)));
	background-image: none;
}

/* Der Haken ist ein gedrehtes L aus zwei Rahmenkanten, kein Zeichen: ein Glyph
   haenge an der Schrift des Themes und saesse in jeder Installation anders. */
.idf-wsq-wrapper input[type="checkbox"].idf-wsq-check:checked::after {
	content: "";
	position: absolute;
	top: 8%;
	left: 32%;
	width: 28%;
	height: 55%;
	border: solid var(--idf-wsq-check-mark, var(--idf-wsq-on-primary));
	border-width: 0 var(--idf-wsq-check-stroke) var(--idf-wsq-check-stroke) 0;
	border-radius: 0;
	background: none;
	transform: rotate(45deg);
}

.idf-wsq-wrapper input[type="checkbox"].idf-wsq-check:focus-visible {
	outline: 2px solid var(--idf-wsq-choice-on-border, var(--idf-wsq-primary));
	outline-offset: 2px;
}

/* Gesperrt, solange keine Variante gewaehlt ist - das Skript setzt das. Die
   Abschwaechung muss sichtbar bleiben: ohne sie sieht ein gesperrtes Kaestchen
   aus wie ein leeres, und der Besucher klickt vergeblich darauf. */
.idf-wsq-wrapper input[type="checkbox"].idf-wsq-check[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.idf-wsq-step-error {
	display: block;
	color: var(--idf-wsq-error);
}

/* ── Zustaende ─────────────────────────────────────────────────────────── */

.idf-wsq-step.is-current::before {
	border-color: var(--idf-wsq-primary);
	background: var(--idf-wsq-primary);
	color: var(--idf-wsq-on-primary);
}

.idf-wsq-step.is-current .idf-wsq-step-body {
	background: var(--idf-wsq-bg-soft);
}

.idf-wsq-step.is-done .idf-wsq-step-body {
	opacity: 0.6;
}

/* Nach dem Hinzufuegen: aus der Nummer wird ein Haken. Bewusst nach
   .is-current, damit der Haken auch den aktuellen Schritt ueberschreibt. */
.idf-wsq-step.is-added::before {
	content: "\2713";
	border-color: var(--idf-wsq-primary);
	background: var(--idf-wsq-primary);
	color: var(--idf-wsq-on-primary);
}

/* ── Aktionen ──────────────────────────────────────────────────────────── */

/* Der Sammel-Button steht auf derselben Fluchtlinie wie der Inhalt der
   Schritte - nicht am Kreis ausgerichtet, sondern am Text. Die Rechnung dahinter
   traegt auch bei veraenderten Massen: mit dot 2rem bis 3.75rem und check-size
   bis 1.6rem gemessen, Button und Produktname stehen jeweils auf demselben
   Pixel.

   Trotzdem ist der Einzug einstellbar, denn das Theme kann von aussen auf
   diesen Container wirken - eine Regel auf `form > div` etwa verschiebt Button
   UND Rueckmeldung, ohne dass an der Rechnung etwas falsch waere. Leer heisst
   deshalb weiterhin „berechnete Fluchtlinie", die eigene Angabe schiebt nur bei
   Bedarf nach. */
.idf-wsq-actions {
	margin-top: var(--idf-wsq-actions-gap);
	padding-left: var(--idf-wsq-actions-indent, var(--idf-wsq-content-indent));
}

/* Dieselben Masse wie Schaltflaechen und Mengenfeld - nur breiter im Polster,
   weil hier ein Satz steht und keine Bezeichnung. Farblich setzt er sich
   bewusst ab: er ist die Aktion, nicht eine Option unter mehreren. Der
   durchsichtige Rand haelt ihn trotzdem auf derselben Hoehe wie die Elemente
   mit Rand. */
.idf-wsq-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: var(--idf-wsq-control-h);
	padding: var(--idf-wsq-control-pad-y) 1.5em;
	border: var(--idf-wsq-control-border) solid transparent;
	border-radius: var(--idf-wsq-radius);
	background: var(--idf-wsq-submit-bg, var(--idf-wsq-primary));
	color: var(--idf-wsq-submit-text, var(--idf-wsq-on-primary));
	font-size: inherit;
	line-height: 1.3;
	cursor: pointer;
}

/* Hat der Button eine eigene Flaeche, aber keine eigene Hover-Farbe, dunkelt
   Settings::design_inline_css() sie ab und setzt --idf-wsq-submit-hover selbst.
   Ohne eigene Flaeche kommt hier die Akzentfarbe beim Ueberfahren durch. */
.idf-wsq-submit:hover,
.idf-wsq-submit:focus {
	background: var(--idf-wsq-submit-hover, var(--idf-wsq-primary-hover));
	color: var(--idf-wsq-submit-text, var(--idf-wsq-on-primary));
}

.idf-wsq-submit[disabled],
.idf-wsq-submit[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.idf-wsq-submit[aria-busy="true"] {
	cursor: progress;
}

.idf-wsq-count:empty {
	display: none;
}

.idf-wsq-feedback {
	margin: 0.75rem 0 0;
}

/* Die Live-Regionen stehen dauerhaft im DOM, damit Screenreader die erste
   Rueckmeldung mitbekommen. Leer nehmen sie nur keinen Platz ein - bewusst KEIN
   display:none, das wuerde sie aus dem Accessibility-Tree nehmen und die erste
   Meldung wieder verschlucken. */
.idf-wsq-feedback:empty,
.idf-wsq-selection:empty {
	margin: 0;
}

/* Was ausgewaehlt ist - eine Aufzaehlung, kein Zuruf. Deshalb gedaempft wie die
   Kurztexte und nicht in der Fehler- oder Erfolgsfarbe. */
.idf-wsq-selection {
	margin: 0.5rem 0 0;
	color: var(--idf-wsq-muted);
}

.idf-wsq-feedback.is-error {
	color: var(--idf-wsq-error);
}

.idf-wsq-cart-link {
	white-space: nowrap;
}

/* Redakteurs-Hinweis, wenn nichts auszugeben ist. */
.idf-wsq-notice {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--idf-wsq-border);
	border-radius: var(--idf-wsq-radius);
	background: var(--idf-wsq-bg-soft);
}

/* ── Nur fuer Screenreader ─────────────────────────────────────────────── */

.idf-wsq-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Klein ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	/* Die Ziffer wird hier ueber die Variable kleiner gestellt, nicht per
	   font-size auf dem Kreis: eine gepflegte Einstellung kommt aus dem
	   Inline-Block danach und soll auch auf schmalen Schirmen gelten - genauso
	   wie bei --idf-wsq-dot direkt darueber. */
	.idf-wsq-wrapper {
		--idf-wsq-dot: 1.6rem;
		--idf-wsq-gap: 0.75rem;
		--idf-wsq-pad: 0.5rem;
		--idf-wsq-step-number-size: 0.75rem;
	}

	.idf-wsq-step-body {
		padding: 0.25rem var(--idf-wsq-pad) 0.5rem;
	}

	/* Auf schmalen Schirmen nimmt der Button die volle Breite - dort waere ein
	   Einzug nur verschenkter Platz. */
	.idf-wsq-actions {
		padding-left: 0;
	}

	.idf-wsq-submit {
		width: 100%;
		justify-content: center;
	}
}

/* ── Angabe an der Warenkorb-Position ──────────────────────────────────── */

/* Diese Regeln stehen AUSSERHALB von .idf-wsq-wrapper - sie greifen im
   Warenkorb-Template von WooCommerce. Deshalb kein einziges --idf-wsq-*-Token:
   die gaebe es dort gar nicht. Gestaltet wird nur, was ohne Abstand oder
   Umbruch unlesbar waere; Schrift, Farbe und Feld-Optik bleiben beim Theme. */

.idf-wsq-cart-req {
	display: block;
	margin: 0.5rem 0 0;
}

.idf-wsq-cart-req-label {
	display: block;
}

.idf-wsq-cart-req-input {
	display: block;
	width: 100%;
	max-width: 20rem;
	margin: 0.25rem 0;
}

/* Farbmuster neben der Auswahl. Es steht bewusst NEBEN dem Feld und nicht in
   den Optionen: eine Auswahlliste faerbt ihre Eintraege je nach Browser gar
   nicht oder unvorhersehbar. Ohne gepflegten Farbwert bleibt das Feld leer und
   nimmt keinen Platz - deshalb kein fester Rahmen. */
.idf-wsq-cart-req-swatch:not(:empty),
.idf-wsq-cart-req-swatch[style*="background"] {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.2em;
	margin: 0 0 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 2px;
}

.idf-wsq-cart-req-link {
	display: inline-block;
}

.idf-wsq-cart-req-hint {
	display: block;
}

/* ── Avada-Haertung ────────────────────────────────────────────────────── */

/* Fusion-Builder-Spalten sind Flex-Container mit nowrap. Ein Kind, das breiter
   werden will als die Spalte, wird darin gestaucht statt umgebrochen.

   Bewusst auf Fusion-Container eingegrenzt: ein selektorloses :has(> ...) wuerde
   jedem beliebigen Eltern-Element fremder Themes flex-wrap aufzwingen, auch dort,
   wo das Layout gar kein Flex ist. */
.fusion-layout-column:has(> .idf-wsq-wrapper),
.fusion-column-wrapper:has(> .idf-wsq-wrapper),
.fusion-button-wrapper:has(> .idf-wsq-wrapper),
form.cart:has(> .idf-wsq-wrapper) {
	flex-wrap: wrap !important;
}