/**
 * Formularz kontaktowy (Contact Form 7).
 * Wygląd pól według komponentu "input" z Figmy:
 * Normal, Hover, Focus, Filled, Error, Disabled.
 */

.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.wpcf7-form .aries-form__fields {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
}

/* Pole: etykieta nad polem, odstęp 4 px */
.wpcf7-form .aries-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
}

.wpcf7-form .aries-field label,
.wpcf7-form .aries-required-note {
	margin: 0;
	color: var(--wp--custom--color--text--primary);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.2;
}

.wpcf7-form .aries-required {
	color: var(--wp--custom--color--text--accent);
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

/* Pole tekstowe i textarea */
.wpcf7-form .aries-field :is(input, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	background: var(--wp--custom--color--bg--secondary);
	color: var(--wp--custom--color--text--primary);
	border: 1px solid var(--wp--custom--color--border--default);
	border-radius: var(--wp--custom--radius--10);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.2;
	transition: border-color var(--aries-hover-duration) var(--aries-hover-ease), box-shadow var(--aries-hover-duration) var(--aries-hover-ease);
}

.wpcf7-form .aries-field textarea {
	display: block;
	height: 144px;
	resize: vertical;
}

.wpcf7-form .aries-field :is(input, textarea)::placeholder {
	color: var(--wp--custom--color--text--muted);
	opacity: 1;
}

/* Hover */
.wpcf7-form .aries-field :is(input, textarea):hover {
	border-color: var(--wp--custom--color--border--strong);
}

/* Focus: granatowa ramka 2 px (do środka, bez zmiany wymiarów) */
.wpcf7-form .aries-field :is(input, textarea):focus {
	outline: none;
	border-color: var(--wp--custom--color--border--primary);
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--border--primary);
}

/* Error */
.wpcf7-form .aries-field .wpcf7-not-valid {
	border-color: var(--wp--custom--color--feedback--error);
}

.wpcf7-form .aries-field .wpcf7-not-valid:focus {
	box-shadow: inset 0 0 0 1px var(--wp--custom--color--feedback--error);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin: 0;
	color: var(--wp--custom--color--feedback--error);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.2;
}

/* Disabled */
.wpcf7-form .aries-field :is(input, textarea):disabled {
	background: var(--wp--custom--color--bg--primary);
	color: var(--wp--custom--color--text--muted);
	border-color: var(--wp--custom--color--border--default);
	cursor: not-allowed;
}

/* Przycisk wysyłania: wygląd Primary, szerokość wg treści, do lewej – desktop i mobile (#015) */
.wpcf7-form .aries-submit {
	order: 2;
	align-self: flex-start;
}

/* Komunikat o błędzie wysyłki (form-message): nad przyciskiem */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
	order: 1;
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) 48px;
	background: var(--wp--custom--color--bg--secondary);
	color: var(--wp--custom--color--text--primary);
	border: 1px solid var(--wp--custom--color--feedback--error);
	border-radius: var(--wp--custom--radius--10);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.2;
}

/* Ikona "!" w czerwonym kółku (#b3261e = feedback/error) */
.wpcf7 form.wpcf7-form .wpcf7-response-output::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--16);
	left: var(--wp--preset--spacing--16);
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23b3261e'/%3E%3Crect x='9' y='5' width='2' height='8' rx='1' fill='white'/%3E%3Crect x='9' y='14' width='2' height='2' rx='1' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Wysłano: komunikat w kolorze sukcesu (docelowo przekierowanie na stronę podziękowania) */
.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
	padding-left: var(--wp--preset--spacing--16);
	border-color: var(--wp--custom--color--feedback--success);
}

.wpcf7 .wpcf7-form.sent .wpcf7-response-output::before {
	content: none;
}

/*
 * Stan „Wysyłanie…” (Button State=Loading z Figmy): zamiast strzałki biały wirujący pierścień
 * w pomarańczowym kółku. Szerokość przycisku zostaje (min-width ustawia forms.js).
 */
.wpcf7-form .aries-submit.is-loading {
	cursor: progress;
}

.wpcf7-form .aries-submit.is-loading::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1a6 6 0 1 1-6 6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	transform: none;
	animation: aries-spin 0.9s linear infinite;
}

.wpcf7-form .aries-submit.is-loading:hover {
	/* Podczas wysyłania bez efektu hover: zostaje zwykły obrys 2 px (#006) */
	box-shadow: inset 0 0 0 2px var(--wp--custom--color--action--primary);
}

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

@media (prefers-reduced-motion: reduce) {
	.wpcf7-form .aries-submit.is-loading::after {
		animation-duration: 2.4s;
	}
}