/* Widerruf-Formular Plugin — Frontend Styles */

:root {
	--widerruf-error-bg:     #fdecea;
	--widerruf-error-text:   #611a15;
	--widerruf-success-bg:   #edf7ed;
	--widerruf-success-text: #1e4620;
}

.widerruf-formular-wrap {
	width: 100%;
}

.widerruf-headline {
	margin-bottom: 0.5em;
}

.widerruf-intro {
	margin-bottom: 1.5em;
}

/* ── Alle Felder 100 % ──────────────────────────────────────────────────── */

.widerruf-field {
	margin-bottom: 1.2em;
}

.widerruf-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.widerruf-field input[type="text"],
.widerruf-field input[type="email"],
.widerruf-field input[type="tel"],
.widerruf-field input[type="date"],
.widerruf-field select,
.widerruf-field textarea {
	display: block;
	width: 100%;
	padding: 0.5em 0.75em;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 1em;
	font-family: inherit;
	box-sizing: border-box;
}

/* ── PLZ + Ort: 50 % nebeneinander, mobil untereinander ────────────────── */

.widerruf-field--row {
	display: flex;
	gap: 1em;
	margin-bottom: 1.2em;
}

.widerruf-field--row .widerruf-field-part {
	flex: 0 0 calc(50% - 0.5em);
	min-width: 0;
}

.widerruf-field--row .widerruf-field-part label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.widerruf-field--row .widerruf-field-part input,
.widerruf-field--row .widerruf-field-part select {
	display: block;
	width: 100%;
	padding: 0.5em 0.75em;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 1em;
	font-family: inherit;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.widerruf-field--row {
		flex-direction: column;
		gap: 0;
	}

	.widerruf-field--row .widerruf-field-part {
		flex: 1 1 100%;
		margin-bottom: 1.2em;
	}
}

/* ── Pflichtfeld-Stern ──────────────────────────────────────────────────── */

.widerruf-required {
	color: #c00;
	font-weight: normal;
}

/* ── Honeypot ───────────────────────────────────────────────────────────── */

.widerruf-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Meldungen ──────────────────────────────────────────────────────────── */

/*
 * Kein display:none im CSS — Sichtbarkeit wird ausschließlich per
 * style.setProperty('display', ..., 'important') in form.js gesteuert,
 * damit Theme-!important-Regeln nicht eingreifen können.
 */

.widerruf-messages {
	margin-bottom: 1em;
	padding: 0.8em 1em;
	background-color: var(--widerruf-error-bg);
	color: var(--widerruf-error-text);
	border-left: 4px solid currentColor;
}

.widerruf-success {
	padding: 0.8em 1em;
	background-color: var(--widerruf-success-bg);
	color: var(--widerruf-success-text);
	border-left: 4px solid currentColor;
}

/* ── Submit ─────────────────────────────────────────────────────────────── */

.widerruf-submit {
	margin-top: 1em;
}

.widerruf-btn {
	padding: 0.65em 1.5em;
	background-color: #333;
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 1em;
	cursor: pointer;
	transition: background-color 0.2s;
}

.widerruf-btn:hover,
.widerruf-btn:focus {
	background-color: #555;
}

.widerruf-btn:disabled {
	opacity: 0.75;
	cursor: not-allowed;
}

/* ── Lade-Spinner ───────────────────────────────────────────────────────── */

.widerruf-btn .widerruf-spinner {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.5em;
	vertical-align: middle;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: widerruf-spin 0.7s linear infinite;
}

@keyframes widerruf-spin {
	to { transform: rotate(360deg); }
}