/* Herzwerk Widerruf — Frontend-Styles.
   Farben kommen über CSS-Variablen (--hwa-*), die pro Block/Shortcode gesetzt werden.
   Defaults sind ein Fallback, falls keine Variable gesetzt ist. */

.hwa-form,
.hwa-btn-wrap {
	--hwa-bg: #A04B62;
	--hwa-color: #ffffff;
	--hwa-bg-hover: #863c50;
	--hwa-radius: 8px;
	--hwa-border: #e2d5da;
	--hwa-text: #2b2b2b;
	--hwa-muted: #6b6b6b;
}

/* ---- Button / Link (Komponente A) ---- */
.hwa-btn-wrap { display: flex; }
.hwa-align-left   { justify-content: flex-start; }
.hwa-align-center { justify-content: center; }
.hwa-align-right  { justify-content: flex-end; }

.hwa-btn {
	display: inline-block;
	background: var(--hwa-bg);
	color: var(--hwa-color);
	border: 0;
	border-radius: var(--hwa-radius);
	padding: 0.85em 1.6em;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, transform .05s ease;
	-webkit-appearance: none;
	appearance: none;
}
.hwa-btn:hover,
.hwa-btn:focus-visible { background: var(--hwa-bg-hover); color: var(--hwa-color); }
.hwa-btn:active { transform: translateY(1px); }

.hwa-btn-ghost {
	display: inline-block;
	background: transparent;
	color: var(--hwa-muted);
	border: 1px solid var(--hwa-border);
	border-radius: var(--hwa-radius);
	padding: 0.85em 1.6em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.hwa-btn-ghost:hover { color: var(--hwa-text); border-color: var(--hwa-muted); }

/* ---- Formular (Komponente B) ---- */
.hwa-form {
	max-width: 560px;
	margin: 60px auto 0; /* mittig + 60px Abstand oben */
	color: var(--hwa-text);
	font-size: 16px;
}
.hwa-form * { box-sizing: border-box; }
.hwa-h { margin: 0 0 .35em; font-size: 1.5em; line-height: 1.25; }
.hwa-lead { margin: 0 0 1.25em; color: var(--hwa-muted); }
.hwa-label {
	display: block;
	margin: 0 0 1em;
	font-weight: 600;
}
.hwa-req { color: var(--hwa-bg); }
.hwa-label input {
	display: block;
	width: 100%;
	margin-top: .35em;
	padding: .7em .8em;
	font: inherit;
	font-weight: 400;
	border: 1px solid var(--hwa-border);
	border-radius: var(--hwa-radius);
	background: #fff;
}
.hwa-label input:focus {
	outline: none;
	border-color: var(--hwa-bg);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hwa-bg) 18%, transparent);
}
.hwa-hint { margin: -.5em 0 1em; font-size: .85em; color: var(--hwa-muted); }
.hwa-submit { width: 100%; margin-top: .5em; }

/* Honeypot unsichtbar, aber nicht display:none (manche Bots ignorieren das) */
.hwa-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.hwa-error {
	margin: 0 0 1em;
	padding: .7em .9em;
	background: #fdecef;
	border: 1px solid #f3c2cd;
	border-radius: var(--hwa-radius);
	color: #8a1f37;
	font-size: .92em;
}

/* Zusammenfassung (Schritt 2) */
.hwa-summary {
	margin: 0 0 1.25em;
	padding: 1em 1.1em;
	background: #faf6f7;
	border: 1px solid var(--hwa-border);
	border-radius: var(--hwa-radius);
}
.hwa-summary div { display: flex; gap: .75em; padding: .25em 0; }
.hwa-summary dt { flex: 0 0 42%; color: var(--hwa-muted); font-weight: 600; }
.hwa-summary dd { margin: 0; flex: 1; }
.hwa-actions { display: flex; gap: .75em; flex-wrap: wrap; }
.hwa-actions .hwa-btn { flex: 1; }

.hwa-success {
	padding: 1.25em;
	background: #f1f8f2;
	border: 1px solid #cfe8d4;
	border-radius: var(--hwa-radius);
}
.hwa-success .hwa-h { color: #1f7a3d; }
.hwa-result-time { font-weight: 600; }

.hwa-busy { opacity: .6; pointer-events: none; }

/* ---- Checkout-Gate (Kaufbutton-Sperre) ---- */
.hwa-checkout { margin: 1em 0; }
.hwa-buybutton.hwa-disabled {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
	filter: grayscale(35%);
}
.hwa-shake { animation: hwa-shake .4s ease; }
@keyframes hwa-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-5px); }
	40%, 80% { transform: translateX(5px); }
}

/* ---- Checkout-Bausteine ---- */
.hwa-belehrung {
	font-size: .92em;
	color: var(--hwa-muted, #555);
}
.hwa-consent-hint {
	margin: 1em 0 .4em;
	padding: .6em .8em;
	font-size: .88em;
	line-height: 1.5;
	color: var(--hwa-muted, #6b6b6b);
	background: #faf6f7;
	border-left: 3px solid var(--hwa-bg, #A04B62);
	border-radius: 4px;
}
.hwa-consent {
	display: flex;
	gap: .6em;
	align-items: flex-start;
	margin: .4em 0 1em;
	font-size: .92em;
	line-height: 1.45;
}
.hwa-consent input { margin-top: .25em; flex: 0 0 auto; }

@media (max-width: 480px) {
	.hwa-summary dt { flex-basis: 50%; }
	.hwa-actions .hwa-btn,
	.hwa-actions .hwa-btn-ghost { flex: 1 1 100%; }
}