/*
 * ConvertKit-Einbettungen im Smartartist-Design.
 *
 * Die Einbettung bringt normalerweise rund 29 kB eigenes CSS und Inline-Attribute
 * mit. Beides entfernt der Pattern-Generator; hier steht der Ersatz — über die
 * theme.json-Variablen gebaut, damit die Formulare der Style-Variation der
 * jeweiligen Künstlerseite folgen.
 *
 * Bewusst nah an assets/cf7.css gehalten: auf einer Seite sollen nicht zwei
 * verschiedene Formularsprachen nebeneinander stehen.
 */

.formkit-form {
	box-sizing: border-box;
	max-inline-size: 34rem;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
	margin-inline: auto;
	text-align: left;
}

.formkit-form * {
	box-sizing: border-box;
}

/* Felder nebeneinander, sobald Platz ist — so war die Einbettung gedacht. */
.formkit-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

.formkit-field {
	flex: 1 1 12rem;
	min-inline-size: 0;
}

.formkit-input {
	inline-size: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid var(--wp--preset--color--light-3, #ddd);
	border-radius: 0;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--dark-1, #101213);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.4;
	transition: border-color 0.15s ease-in-out;
}

.formkit-input::placeholder {
	color: var(--wp--preset--color--light-4, #777);
	opacity: 1;
}

.formkit-input:focus-visible {
	border-color: var(--wp--preset--color--primary, #000);
	outline: 2px solid var(--wp--preset--color--primary, #000);
	outline-offset: 1px;
}

.formkit-submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9em 2em;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--primary, #000);
	color: var(--wp--preset--color--white, #fff);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.formkit-submit:hover,
.formkit-submit:focus-visible {
	background: var(--wp--preset--color--accent, #333);
}

/* Ladeanzeige während des Absendens. ConvertKit blendet sie per Breite ein. */
.formkit-spinner {
	display: flex;
	block-size: 0;
	inline-size: 0;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.formkit-spinner > div {
	inline-size: 4px;
	block-size: 4px;
	margin: 0 1px;
	border-radius: 50%;
	background: currentColor;
	animation: sa-formkit-blink 1.4s infinite both;
}

.formkit-spinner > div:nth-child(2) { animation-delay: 0.2s; }
.formkit-spinner > div:nth-child(3) { animation-delay: 0.4s; }

@keyframes sa-formkit-blink {
	0%, 80%, 100% { opacity: 0.2; }
	40%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.formkit-spinner > div { animation: none; }
}

/* Fehlermeldungen */
.formkit-alert {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	padding: 0;
	list-style: none;
}

.formkit-alert:empty {
	display: none;
}

.formkit-alert-error {
	padding: 0.75em 1em;
	border: 1px solid #b32d2e;
	color: #b32d2e;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* Herkunftshinweis bleibt — ConvertKit verlangt ihn —, tritt aber zurück. */
.formkit-powered-by-convertkit-container {
	margin-block-start: 0.75rem;
	text-align: center;
}

.formkit-powered-by-convertkit {
	color: currentColor;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	opacity: 0.5;
	text-decoration: none;
}

.formkit-powered-by-convertkit:hover {
	opacity: 0.8;
}