/*
 * Fluent Forms an das BAST-Designsystem angleichen.
 * Das Plugin liefert eigene Farben und Abstände mit – hier wird alles auf die
 * Tokens aus theme.json gezogen, damit das Formular nicht wie ein Fremdkörper
 * in der Seite steht.
 */

.bast-formcard {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--xl);
	padding: clamp(1.75rem, 5vw, 3.25rem);
	box-shadow: 0 12px 34px rgba(10, 44, 71, 0.16);
	max-width: 940px;
	margin-inline: auto;

	/*
	 * Die Karte steht auf Landingpages in einer Sektion mit weißer Schrift.
	 * Ohne diese Festlegung erben Beschriftungen und Auswahltexte das Weiß
	 * und stehen unsichtbar auf dem weißen Kartengrund.
	 */
	color: var(--wp--preset--color--body);
}

.bast-formcard *,
.bast-formcard label,
.bast-formcard span,
.bast-formcard p {
	color: inherit;
}

.bast-formcard.is-light {
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--md);
	margin-inline: 0;
}

/* --- Fortschrittsbalken: Verlauf wie im Konzept ------------------------- */

.bast-formcard .ff-el-progress {
	background: #EAEFF4;
	border-radius: var(--wp--custom--radius--pill);
	height: 8px;
	overflow: hidden;
}

.bast-formcard .ff-el-progress-bar {
	background: linear-gradient(90deg, #1C9CF0, #0070B9);
	border-radius: var(--wp--custom--radius--pill);
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	height: 100%;
}

.bast-formcard .ff-el-progress-status,
.bast-formcard .ff-step-header {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

/* --- Beschriftungen und Felder ----------------------------------------- */

.bast-formcard .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--navy);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin-bottom: 4px;
}

.bast-formcard .ff-el-help-message {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted) !important;
	margin-bottom: 14px;
}

.bast-formcard input[type="text"],
.bast-formcard input[type="email"],
.bast-formcard input[type="tel"],
.bast-formcard textarea,
.bast-formcard select {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--wp--custom--field--border);
	border-radius: var(--wp--custom--radius--md);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
}

.bast-formcard input:focus,
.bast-formcard textarea:focus,
.bast-formcard select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid rgba(0, 112, 185, 0.18);
	outline-offset: 1px;
}

/* --- Auswahl als anklickbare Kacheln statt nackter Radiobuttons -------- */

.bast-choice .ff-el-group,
.bast-choice .ff_list_buttons,
.bast-choice .ff-el-form-check {
	margin-bottom: 0;
}

.bast-choice .ff-el-form-check {
	display: block;
}

.bast-choice .ff-el-form-check label,
.bast-choice .ff-el-form-check .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--body);
	padding: 16px 20px;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	margin-bottom: 10px;
}

.bast-choice .ff-el-form-check label:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface-blue);
}

.bast-choice input[type="radio"]:checked + label,
.bast-choice input[type="checkbox"]:checked + label,
.bast-choice .ff-el-form-check input:checked ~ span {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface-blue);
}

.bast-choice input[type="radio"],
.bast-choice input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* --- Buttons ------------------------------------------------------------ */

.bast-formcard .ff-btn,
.bast-formcard .ff-btn-submit,
.bast-formcard .ff-btn-next,
.bast-formcard .ff-btn-prev {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.9375rem;
	border-radius: var(--wp--custom--radius--pill);
	padding: 14px 32px;
	border: none;
	cursor: pointer;
}

.bast-formcard .ff-btn-submit,
.bast-formcard .ff-btn-next {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--cta);
}

.bast-formcard .ff-btn-submit:hover,
.bast-formcard .ff-btn-next:hover {
	background: var(--wp--preset--color--navy);
}

.bast-formcard .ff-btn-prev {
	background: transparent;
	color: var(--wp--preset--color--muted);
	box-shadow: none;
	padding-left: 8px;
}

.bast-formcard .ff-btn-prev:hover {
	color: var(--wp--preset--color--primary);
}

/* --- Datenschutz und Meldungen ----------------------------------------- */

.bast-formcard .ff-el-tc label,
.bast-formcard .ff-el-tc p {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.bast-formcard .ff-el-is-error .text-danger,
.bast-formcard .error-text {
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--caption);
}

.bast-formcard .ff-message-success {
	background: #E9F4EE;
	border: 1px solid #BFE0CD;
	border-left: 4px solid var(--wp--preset--color--success);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
	color: #1F6B48;
}


/*
 * Absage statt naechstem Schritt.
 *
 * Bewusst nicht in der Fehlerfarbe: Wer hier landet, hat nichts falsch
 * gemacht - die Stelle passt nur nicht. Deshalb derselbe ruhige Rahmen wie
 * bei der Erfolgsmeldung, nur in der Hausfarbe statt in Gruen.
 */
.bast-absage {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(10, 44, 71, 0.14);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
}

.bast-absage[hidden] {
	display: none;
}

.bast-absage h3 {
	margin-top: 0;
	margin-bottom: 0.4em;
}

.bast-absage p {
	margin-bottom: 0;
}

.bast-absage__zurueck {
	margin-top: var(--wp--preset--spacing--30);
	padding-left: 0;
}


/* --- Schrittweise Anfrage (eigene Navigation) --------------------------- */

.bast-step-panel[hidden] {
	display: none;
}

.bast-step-panel.is-missing {
	animation: bast-shake 0.4s;
}

@keyframes bast-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
	.bast-step-panel.is-missing {
		animation: none;
		outline: 2px solid var(--wp--preset--color--danger);
		outline-offset: 6px;
	}
}

.bast-step-head {
	margin-bottom: var(--wp--preset--spacing--40);
}

.bast-step-head__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	margin-bottom: 6px;
}

.bast-step-head__title {
	color: var(--wp--preset--color--primary);
}

.bast-step-bar {
	height: 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: #EAEFF4;
	overflow: hidden;
}

.bast-step-bar__fill {
	height: 100%;
	width: 25%;
	border-radius: var(--wp--custom--radius--pill);
	background: linear-gradient(90deg, #1C9CF0, #0070B9);
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Beide tragen einen eigenen display-Wert und wuerden das hidden-Attribut
 * sonst uebergehen - beim Aussteuern muessen Kopf und Navigation aber weg.
 */
.bast-step-nav[hidden],
.bast-step-head[hidden] {
	display: none;
}

.bast-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.bast-step-btn {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.9375rem;
	border-radius: var(--wp--custom--radius--pill);
	padding: 14px 32px;
	border: none;
	cursor: pointer;
}

.bast-step-btn.is-next {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--cta);
	margin-left: auto;
}

.bast-step-btn.is-next:hover {
	background: var(--wp--preset--color--navy);
}

.bast-step-btn.is-prev {
	background: transparent;
	color: var(--wp--preset--color--muted);
	padding-left: 4px;
}

.bast-step-btn.is-prev:hover {
	color: var(--wp--preset--color--primary);
}

.bast-step-btn[hidden] {
	display: none;
}

/* Der Absenden-Button steht nur im letzten Schritt */
.bast-formcard .ff_submit_btn_wrapper[hidden] {
	display: none;
}

/* Deutlicher Abstand zur Datenschutz-Zeile darüber – der Klick auf Absenden
   ist die verbindliche Handlung und soll nicht versehentlich passieren. */
.bast-formcard .ff_submit_btn_wrapper:not([hidden]) {
	margin-top: var(--wp--preset--spacing--40);
}


/* --- Mehr Luft im Formular --------------------------------------------- */

.bast-formcard .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--40);
}

.bast-formcard .ff-el-group:last-child {
	margin-bottom: 0;
}

/*
 * Kontaktfelder mehrspaltig, solange Platz ist.
 *
 * Das :not([hidden]) ist entscheidend: Ohne den Zusatz hat diese Regel dieselbe
 * Spezifität wie das Verstecken weiter oben, steht aber später – und dann
 * gewinnt display:grid gegen display:none. Die Kontaktfelder hingen dadurch
 * unter jedem Schritt.
 */
.bast-step-panel:not([hidden]).is-kontakt {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--wp--preset--spacing--40);
}

.bast-step-panel.is-kontakt .ff-el-group:has(.ff-el-tc),
.bast-step-panel.is-kontakt .ff-el-group:last-child {
	grid-column: 1 / -1;
}

/* Die Datenschutz-Zeile braucht Abstand nach oben, sonst klebt sie am
   Nachrichtenfeld. */
.bast-step-panel.is-kontakt .ff-el-group:has(.ff-el-tc) {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

@media (min-width: 700px) {
	.bast-step-panel:not([hidden]).is-kontakt {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Das optionale Nachrichtenfeld nimmt die beiden rechten Spalten ein und
	   steht damit unter Nachname und E-Mail-Adresse. Ein einzeln stehendes
	   schmales Textfeld sieht neben der leeren dritten Spalte unfertig aus. */
	.bast-step-panel.is-kontakt .ff-el-group:has(textarea) {
		grid-column: span 2;
	}
}

/* Verstecken muss immer gewinnen, egal welche Layout-Regel darunter steht. */
.bast-step-panel[hidden] {
	display: none !important;
}