/**
 * WC Simple CSV - Frontend
 *
 * Bis 1.3.0 stand dieses CSS als `<style>`-Block im `wp_head` (zwei Bloecke,
 * in class-frontend-addons.php und class-extras.php). Das hatte eine Folge,
 * die man erst am dunklen Theme sah: Ein Inline-Block im Kopf steht NACH dem
 * Theme-Stylesheet, also gewinnt das Plugin jede Regel bei gleicher
 * Spezifitaet - und ein Theme kann seine eigenen Knoepfe nicht gestalten,
 * ohne mit laengeren Selektoren dagegen anzuschreiben.
 *
 * Als Datei per `wp_enqueue_style` gilt die normale Reihenfolge: Das Theme
 * laedt danach und gewinnt den Gleichstand, so wie es sein soll.
 *
 * DIE FARBEN SIND STELLSCHRAUBEN. Feste Hex-Werte waren themenblind: Die
 * Flaeche stand auf #fff, eine Textfarbe wurde gar nicht gesetzt, also erbte
 * der Text die des Themes. In einem hellen Theme faellt das nicht auf, in
 * einem dunklen steht heller Text auf weisser Flaeche - die Pflichtfelder
 * "Sosse" und "Beilage" waren damit unlesbar (gemessen 10.09.2026 auf
 * wp.kaatai.de).
 *
 * Ein Theme setzt jetzt vier Variablen und ist fertig:
 *
 *   :root {
 *     --wcsc-knopf-grund:   var(--wp--preset--color--grund);
 *     --wcsc-knopf-text:    var(--wp--preset--color--text);
 *     --wcsc-knopf-linie:   var(--wp--preset--color--linie-stark);
 *     --wcsc-knopf-akzent:  var(--wp--preset--color--akzent);
 *   }
 *
 * Ohne Zutun bleibt alles wie vorher - mit einer Ausnahme: Die Textfarbe im
 * Normalzustand wird jetzt GESETZT statt vererbt. Das ist die eigentliche
 * Reparatur; ohne sie bliebe der weiss-auf-weiss-Fall auch mit Variablen.
 */

.wcsc-addons-wrapper,
.wcsc-extras-wrapper {
	margin: 20px 0;
}

.wcsc-addon-field,
.wcsc-extra-field {
	margin-bottom: 15px;
}

.wcsc-addon-label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.wcsc-addon-label .wcsc-required {
	color: var(--wcsc-pflicht, #e74c3c);
}

.wcsc-addon-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wcsc-addon-option {
	cursor: pointer;
}

.wcsc-addon-option input[type="radio"],
.wcsc-extra-option input {
	display: none;
}

.wcsc-addon-button {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--wcsc-knopf-linie, #ddd);
	border-radius: var(--wcsc-knopf-radius, 4px);
	background: var(--wcsc-knopf-grund, #fff);
	/* Gesetzt, nicht vererbt - siehe Kopf der Datei. */
	color: var(--wcsc-knopf-text, #111);
	transition: all 0.2s ease;
}

.wcsc-addon-option:hover .wcsc-addon-button {
	border-color: var(--wcsc-knopf-akzent, #999);
}

.wcsc-addon-option.active .wcsc-addon-button,
.wcsc-addon-option input:checked + .wcsc-addon-button {
	border-color: var(--wcsc-knopf-akzent, #000);
	background: var(--wcsc-knopf-akzent, #000);
	color: var(--wcsc-knopf-akzent-text, #fff);
}

.wcsc-addon-notice {
	font-size: 13px;
	color: var(--wcsc-notiz, #666);
	margin-top: 10px;
	font-style: italic;
}

/* Aufpreis am Extra-Knopf */
.wcsc-extra-plus {
	font-size: 13px;
	opacity: 0.7;
	margin-left: 4px;
}

/*
 * Der Aufpreis im gewaehlten Zustand nimmt die Farbe des Knopfes.
 *
 * Das `!important` bleibt: Es steht hier nicht aus Bequemlichkeit, sondern
 * weil WooCommerce den Preis mit einer laengeren Regel faerbt - ohne das
 * `!important` stand der Aufpreis schon bis 1.3.0 in Woo-Farbe auf dunklem
 * Grund. Neu ist nur, dass statt `#fff` die Farbe des Knopfes genommen wird:
 * `currentColor` folgt dem, was drei Zeilen weiter oben gesetzt wurde, und
 * damit auch der Stellschraube eines Themes.
 */
.wcsc-extra-option input:checked + .wcsc-addon-button .wcsc-extra-plus,
.wcsc-extra-option input:checked + .wcsc-addon-button .wcsc-extra-plus * {
	color: currentColor !important;
	opacity: 0.9;
}

/* Gesperrter Kaufknopf, solange ein Pflichtfeld offen ist */
.single_add_to_cart_button.wcsc-disabled,
button[type="submit"].wcsc-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}