/*
 * Formular-Widget (.herzenswald-order-widget) für die drei Plugin-Shortcodes
 * [herzenswald_herzenswaldbaum_bestellen] / [herzenswald_aufforstung_bestellen] /
 * [herzenswald_newsletter_anmelden] - siehe CLAUDE.md Abschnitt 11.4/14/15
 * und class-order-shortcodes.php.
 *
 * Bewusst in sich geschlossen (eigene Design-Tokens als --hzw-*-Variablen
 * statt der Theme-Tokens aus herzenswald/style.css) und JEDE Regel unter dem
 * Wrapper ".herzenswald-order-widget" gescoped, NICHT lose Klassen wie
 * ".form-panel" direkt auf Root-Ebene - Grund: dieses CSS muss auch auf der
 * alten Herzenswald-Homepage (anderes öffentliches Theme "Skyline WP"/
 * Colibri WP) robust funktionieren, ohne mit dessen globalen Regeln zu
 * kollidieren:
 *   - Jeder Selektor hat die Form ".herzenswald-order-widget .foo" (Spezifität
 *     mind. 0,2,0) - das schlägt sowohl Colibris/Bootstraps globale
 *     Tag-Selektoren (z. B. "input { ... }", Spezifität 0,0,1) als auch
 *     zufällige gleichnamige Klassen außerhalb des Widgets, unabhängig von
 *     der Ladereihenfolge der Stylesheets.
 *   - Farben/Radien/Schrift werden als eigene Custom Properties auf dem
 *     Wrapper selbst definiert statt auf die Theme-Tokens zu vertrauen -
 *     die gibt es auf der alten Homepage nicht.
 *   - box-sizing/Schrift/Zeilenhöhe werden für alle Formularelemente explizit
 *     gesetzt, da sich auf ein fremdes Theme keine sinnvollen Defaults
 *     voraussetzen lassen.
 *
 * Wird auf BEIDEN Sites geladen (siehe
 * Herzenswald_Order_Shortcodes::enqueue_assets() für die Begründung), auch
 * auf der Herzenswald-Site selbst - dort optisch praktisch deckungsgleich
 * mit den früheren, unscoped Regeln in herzenswald/assets/css/components/
 * form.css + buttons.css (seit diesem Umbau aus dem Theme entfernt, siehe
 * CLAUDE-Revision.md).
 */

.herzenswald-order-widget {
	--hzw-green: #275d1f;
	--hzw-green-dark: #1d4918;
	--hzw-cream2: #fbfaf5;
	--hzw-ink: #1b2a1c;
	--hzw-muted: #667064;
	--hzw-line: #ded8c8;
	--hzw-white: #ffffff;
	--hzw-tint-green: #eaf1e2;
	--hzw-error: #b3432b;
	--hzw-error-tint: #fbe9e4;
	--hzw-shadow-sm: 0 8px 24px rgba(38, 58, 34, .05);
	--hzw-radius-lg: 14px;
	--hzw-radius-md: 10px;
	--hzw-radius-sm: 7px;
	--hzw-font: Inter, Arial, Helvetica, sans-serif;
	--hzw-font-serif: Georgia, serif;

	font-family: var(--hzw-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--hzw-ink);
}

.herzenswald-order-widget,
.herzenswald-order-widget *,
.herzenswald-order-widget *::before,
.herzenswald-order-widget *::after {
	box-sizing: border-box;
}

/* Generischer Reset für die im Widget genutzten Tags - Bootstrap-artige
   Themes (Colibri) bringen z. T. eigene Abstände für p/h2/label mit, die
   ansonsten durchschlagen würden, weil unsere spezifischeren Regeln weiter
   unten jeden tatsächlich gewünschten Abstand ohnehin explizit setzen. */
.herzenswald-order-widget p,
.herzenswald-order-widget h2,
.herzenswald-order-widget label {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.herzenswald-order-widget svg {
	display: inline-block;
	vertical-align: middle;
}

/* ---------- Button (.cta), reduziert auf die im Widget genutzten Varianten
   primary/soft - siehe CLAUDE.md Abschnitt 11.4 für das Original in
   herzenswald/assets/css/components/buttons.css. ---------- */
.herzenswald-order-widget .cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--hzw-radius-sm);
	border: 1px solid var(--hzw-green);
	font-family: var(--hzw-font);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: .2s;
}

.herzenswald-order-widget .cta.primary {
	background: var(--hzw-green);
	color: #fff;
}

.herzenswald-order-widget .cta.primary:hover {
	background: var(--hzw-green-dark);
	transform: translateY(-1px);
}

.herzenswald-order-widget .cta.soft {
	background: #fff;
	color: var(--hzw-green);
}

.herzenswald-order-widget .cta.soft:hover {
	background: var(--hzw-tint-green);
}

/* ---------- Formular (.form-panel/.form-field/...) - 1:1 Portierung von
   herzenswald/assets/css/components/form.css, siehe CLAUDE.md Abschnitt
   11.4. ---------- */
.herzenswald-order-widget .form-panel {
	background: #fff;
	border: 1px solid var(--hzw-line);
	border-radius: var(--hzw-radius-lg);
	box-shadow: var(--hzw-shadow-sm);
	padding: 32px;
}

@media (max-width: 600px) {
	.herzenswald-order-widget .form-panel {
		padding: 22px;
	}
}

.herzenswald-order-widget .form-section + .form-section {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--hzw-line);
}

.herzenswald-order-widget .form-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.herzenswald-order-widget .form-section-head svg {
	width: 22px;
	height: 22px;
	color: var(--hzw-green);
	flex-shrink: 0;
}

.herzenswald-order-widget .form-section-head h2 {
	font-family: var(--hzw-font-serif);
	font-size: 20px;
	margin: 0;
}

.herzenswald-order-widget .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

@media (max-width: 700px) {
	.herzenswald-order-widget .form-grid {
		grid-template-columns: 1fr;
	}
}

.herzenswald-order-widget .form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.herzenswald-order-widget .form-field.span-2 {
	grid-column: 1 / -1;
}

.herzenswald-order-widget .form-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--hzw-ink);
}

.herzenswald-order-widget .form-required {
	color: var(--hzw-green-dark);
	font-weight: 700;
}

.herzenswald-order-widget .form-hint {
	font-size: 12px;
	color: var(--hzw-muted);
	margin-top: -2px;
}

.herzenswald-order-widget .form-input,
.herzenswald-order-widget .form-select,
.herzenswald-order-widget .form-textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--hzw-line);
	border-radius: var(--hzw-radius-sm);
	font-family: var(--hzw-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--hzw-ink);
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
	appearance: auto;
}

.herzenswald-order-widget .form-textarea {
	resize: vertical;
	min-height: 90px;
	line-height: 1.5;
}

.herzenswald-order-widget .form-input:focus,
.herzenswald-order-widget .form-select:focus,
.herzenswald-order-widget .form-textarea:focus {
	outline: none;
	border-color: var(--hzw-green);
	box-shadow: 0 0 0 3px var(--hzw-tint-green);
}

.herzenswald-order-widget .form-field.has-error .form-input,
.herzenswald-order-widget .form-field.has-error .form-select,
.herzenswald-order-widget .form-field.has-error .form-textarea {
	border-color: var(--hzw-error);
}

.herzenswald-order-widget .form-field.has-error .form-input:focus,
.herzenswald-order-widget .form-field.has-error .form-select:focus,
.herzenswald-order-widget .form-field.has-error .form-textarea:focus {
	box-shadow: 0 0 0 3px var(--hzw-error-tint);
}

.herzenswald-order-widget .form-error {
	font-size: 12px;
	font-weight: 700;
	color: var(--hzw-error);
}

.herzenswald-order-widget .form-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.herzenswald-order-widget .form-checkbox-row input[type="checkbox"] {
	margin-top: 3px;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	accent-color: var(--hzw-green);
}

.herzenswald-order-widget .form-checkbox-row label {
	font-size: 13px;
	color: var(--hzw-ink);
	line-height: 1.5;
}

/* Honeypot: für sehende Nutzer:innen UND Screenreader unsichtbar, aber im
   DOM/CSS vorhanden (kein display:none/visibility:hidden - manche Bots
   überspringen genau diese beiden gezielt). */
.herzenswald-order-widget .form-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.herzenswald-order-widget .form-actions {
	margin-top: 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.herzenswald-order-widget .form-actions .form-hint {
	margin-top: 0;
}

.herzenswald-order-widget .form-notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: var(--hzw-radius-md);
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.6;
}

.herzenswald-order-widget .form-notice svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin-top: 1px;
}

.herzenswald-order-widget .form-notice.success {
	background: var(--hzw-tint-green);
	color: var(--hzw-green-dark);
}

.herzenswald-order-widget .form-notice.error {
	background: var(--hzw-error-tint);
	color: var(--hzw-error);
}

.herzenswald-order-widget .form-notice ul {
	list-style: disc;
	margin: 6px 0 0;
	padding-left: 18px;
}

/* Baumart-/Position-Fieldset (Herzenswaldbaum-Formular). */
.herzenswald-order-widget .form-fieldset {
	border: 1px solid var(--hzw-line);
	border-radius: var(--hzw-radius-md);
	padding: 20px;
	background: var(--hzw-cream2);
}

.herzenswald-order-widget .form-fieldset + .form-fieldset {
	margin-top: 16px;
}

.herzenswald-order-widget .form-fieldset-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.herzenswald-order-widget .form-fieldset-head b {
	font-family: var(--hzw-font-serif);
	font-size: 15px;
}

.herzenswald-order-widget .form-fieldset-remove {
	background: none;
	border: none;
	color: var(--hzw-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
	padding: 4px 8px;
	font-family: var(--hzw-font);
}

.herzenswald-order-widget .form-fieldset-remove:hover {
	color: var(--hzw-error);
}

/* <template> ist per Spezifikation ohnehin nie sichtbar gerendert (auch ohne
   CSS) - dieser Hinweis dokumentiert das nur, falls ein fremdes Theme das
   Element global umdefiniert. */
.herzenswald-order-widget template {
	display: none;
}