/* HÖHER Katalog-Popup — Formular, Fehler, Success, Mobile-Verdichtung. Setzt popup.css
   voraus (Variablen, Overlay/Dialog/Steps/Rubbellos/Buttons) und muss in der Kaskade NACH
   popup.css laden: der Mobile-Verdichtungsblock am Dateiende ueberschreibt .hkp-heading,
   .hkp-heading--scratch, .hkp-body und .hkp-btn aus popup.css und gewinnt nur bei gleicher
   Spezifitaet, wenn er spaeter im Cascade-Ranking steht (siehe wp_enqueue_style-Abhaengigkeit
   in hoeher-katalog-popup.php). */

/* Formular */

#hkp-popup .hkp-form {
	display: grid;
	align-items: center;
}

#hkp-popup .hkp-form-step {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#hkp-popup .hkp-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

#hkp-popup .hkp-form-grid--zip {
	grid-template-columns: 1fr 2fr;
}

/* Vorname/Nachname bleiben auch mobil nebeneinander; erst unter 340px wird gestapelt, sonst überläuft der Dialog die 88vh. */
@media (max-width: 340px) {
	#hkp-popup .hkp-form-grid--name {
		grid-template-columns: 1fr;
	}
}

#hkp-popup .hkp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#hkp-popup .hkp-field label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--hkp-ink);
}

#hkp-popup .hkp-field input {
	width: 100%;
	min-width: 0;
	font-family: var(--hkp-font-text);
	font-size: 0.95rem;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--hkp-border);
	background: var(--hkp-neutral-50);
	color: var(--hkp-ink);
	transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

#hkp-popup .hkp-field input::placeholder {
	color: var(--hkp-neutral-500);
	opacity: 0.7;
}

#hkp-popup .hkp-field input:hover {
	border-color: var(--hkp-border-2);
}

#hkp-popup .hkp-field input:focus {
	outline: none;
	border-color: var(--hkp-orange-400);
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(255, 175, 84, 0.35);
}

#hkp-popup .hkp-field input[aria-invalid="true"] {
	border-color: #C0553F;
}

#hkp-popup .hkp-field-error {
	display: flex;
	align-items: center;
	font-size: 0.76rem;
	color: #C0553F;
	min-height: 1em;
}

#hkp-popup .hkp-error-icon {
	width: 13px;
	height: 13px;
	margin-right: 4px;
	flex-shrink: 0;
}

#hkp-popup .hkp-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#hkp-popup .hkp-fud {
	margin: 4px 0 0;
	font-size: 0.78rem;
	color: var(--hkp-neutral-500);
	text-align: center;
}

#hkp-popup .hkp-fud a {
	color: var(--hkp-ink);
	text-decoration: underline;
}

#hkp-popup .hkp-form-error {
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: #FBEAE6;
	color: #8A3524;
	font-size: 0.85rem;
}

/* Success */

#hkp-popup [data-hkp-step="success"] {
	text-align: center;
}

#hkp-popup .hkp-success-badge {
	width: 52px;
	height: 52px;
	margin: 4px auto 16px;
	border-radius: 999px;
	background: var(--hkp-orange-200);
	color: var(--hkp-ink);
	display: flex;
	align-items: center;
	justify-content: center;
}

#hkp-popup .hkp-success-check {
	width: 26px;
	height: 26px;
}

#hkp-popup .hkp-success-confirm {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--hkp-orange-100);
	color: var(--hkp-ink);
	font-size: 0.85rem;
	font-weight: 600;
}

/* Mobile Verdichtung — steht bewusst am DATEIENDE, gewinnt so in der Kaskade gegen gleiche Spezifität oben. */
@media (max-width: 767px) {
	#hkp-popup .hkp-heading {
		font-size: 1.15rem;
		margin: 6px 0 10px;
	}

	/* Muss NACH der generischen .hkp-heading-Mobilregel stehen (Kaskade). Padding-top 24px, X bis 46px, +20px -> min. 42px margin-top. */
	#hkp-popup .hkp-heading--scratch {
		font-size: 1.4rem;
		margin: 42px 0 8px;
	}

	#hkp-popup .hkp-scratch-sub {
		margin-bottom: 12px;
	}

	#hkp-popup .hkp-body {
		font-size: 0.9rem;
		margin-bottom: 8px;
	}

	#hkp-popup .hkp-form-step {
		gap: 10px;
	}

	#hkp-popup .hkp-btn {
		padding: 13px 20px;
	}
}

/* Freiwillige Telefonnummer auf dem Erfolgs-Schritt (telefon.js) */
.hkp-phone {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(17, 17, 17, 0.12);
	text-align: left;
}
.hkp-heading--phone {
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 8px;
}
.hkp-phone .hkp-body {
	margin-bottom: 14px;
}
.hkp-consent {
	font-size: 11px;
	line-height: 1.45;
	color: rgba(17, 17, 17, 0.62);
	margin: 10px 0 14px;
}
/* Abschluss-Link bleibt ein Textlink: der Telefon-Button ist auf diesem Schritt der Primaer-CTA. */
.hkp-success-link {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	text-decoration: underline;
	color: inherit;
}