/*
 * Formularz kontaktowy (Contact Form 7): pływające etykiety, błędy pól i komunikat zbiorczy.
 * Jedno miejsce formularza (22.10.2026; wcześniej także subpages.css i uklady.css). Warstwa components:
 * styles.css wtyczki stoi w warstwie `wp` (inc/assets.php). Ładowany po avg-uklady, tylko gdy jest CF7.
 *
 * Pływające etykiety działają tylko z klasą .c-form--float, którą dokłada formularz.js.
 * Bez skryptu etykiety stoją nad polami jak dotąd, więc formularz nie traci podpisów.
 *
 * Kontrasty (policzone, WCAG 2.x):
 *   #bb311a (--danger-700) na bieli 5,89, na tle błędu #fdeeec 5,22
 *   #202426 na #fdeeec 13,88, na #e8f5ec 13,94
 *   #1e7a3c (ramka i ikona sukcesu) na bieli 5,38, na #e8f5ec 4,79
 *   #202426 na #EE7F00 (przycisk, strzałka w kolorze napisu) 5,72, od 1.10
 */

@layer components {
	/* ---------- Układ i pola (do 22.10.2026 rozrzucone po subpages.css i uklady.css) ---------- */
	.c-form__row { display: grid; gap: 1rem; }
	/* Ramka tylko na formularzu CF7; .c-form wewnątrz układa pola, bez drugiej ramki. */
	.wpcf7-form {
		display: grid;
		gap: 1rem;
		padding: 1.5rem;
		border: 1px solid var(--c-line);
	}
	.c-form { display: grid; gap: 1rem; }
	.c-content .wpcf7-form p { max-width: none; }
	@media (min-width: 40em) {
		.wpcf7-form { padding: 2rem; }
		.c-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
	}
	.wpcf7-form p { margin: 0; }
	.c-form__field { display: grid; gap: 0.5rem; }
	.c-form__field label { color: var(--c-text); }
	.c-form__field br { display: none; }
	.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
		width: 100%;
		padding: 0.75rem 1.25rem;
		background: var(--c-bg);
		color: var(--c-text);
		border: 1px solid var(--secondary-400);     /* 3,54: w Figmie #c8c8c8 = 1,67, niezgodne z 1.4.11 */
		border-radius: 0;
	}
	/* Wysokości z ramki 08 (pomiar przy 1440): pole 48 px, pole wiadomości 164 px. */
	.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"]) { height: 3rem; min-height: 0; padding-block: 0; }
	.wpcf7-form textarea { height: 10.25rem; min-height: var(--touch); resize: vertical; }
	.wpcf7-form :is(input, textarea):hover { border-color: var(--c-text-2); }
	.wpcf7-form ::placeholder { color: var(--c-text-3); opacity: 1; }         /* 5,73 */
	.wpcf7-form [aria-invalid="true"] { border: 2px solid var(--danger-700); }   /* pola inne niż tekstowe; tekstowe niżej, „Błąd pola” */
	.c-form__hint, .c-form__required, .c-form__info { color: var(--c-text-3); font-size: var(--txt-body-2); }
	.c-form__hint { display: block; margin-block-start: 0.25rem; }
	.c-form__required { margin-block-start: -0.25rem; }

	/* Zgoda pod formularzem: drobny stopień jak w Figmie, checkbox 20 px (pole kliknięcia to cała etykieta). */
	.c-form__check .wpcf7-list-item { margin: 0; }
	.c-form__check label {
		display: flex;
		gap: 0.625rem;
		align-items: flex-start;
		min-height: 0;
		padding-block: 0.25rem;
		font-size: var(--txt-body-2);
		line-height: 1.45;
		cursor: pointer;
	}
	.c-form__check input[type="checkbox"] {
		flex: none;
		width: 1.25rem;
		height: 1.25rem;
		margin: 0.1rem 0 0;
		accent-color: var(--primary-700);          /* ptaszek: 6,36; ramka pola systemowa */
	}

	/* Przycisk wysyłki: Figma 220 x 60; ikona strzałki w tle niżej („Przycisk wysyłki”). */
	.c-form__submit { position: relative; justify-self: start; }
	.c-form__submit .c-button { min-height: 3.75rem; }
	@media (min-width: 40em) {
		.c-form__submit .c-button { min-width: 13.75rem; }
	}
	.c-form__submit .wpcf7-spinner { position: absolute; inset-inline-start: 100%; inset-block-start: 50%; margin: 0 0 0 1rem; transform: translateY(-50%); }

	.wpcf7-form {
		--c-danger: var(--danger-700);
		--c-danger-bg: #fdeeec;
		--c-success: #1e7a3c;
		--c-success-bg: #e8f5ec;
		--c-field-border: var(--secondary-400);      /* 3,54 na bieli, próg 3 dla ramki pola */
	}
	:root[data-kontrast="wysoki"] .wpcf7-form {
		--c-danger: #ffff00;
		--c-danger-bg: #000000;
		--c-success: #ffffff;
		--c-success-bg: #000000;
		--c-field-border: #ffffff;
	}

	/* ---------- Pływające etykiety ---------- */
	.c-form--float .c-form__field { position: relative; display: block; }
	.c-form--float .c-form__field > label {
		position: absolute;
		z-index: 1;
		inset-block-start: 0;
		inset-inline-start: 0.875rem;
		max-width: calc(100% - 1.75rem);
		padding-inline: 0.375rem;
		overflow: hidden;
		color: var(--c-text-3);                      /* #525759, 7,33 na bieli */
		font-size: var(--txt-body-1);
		line-height: 1.2;
		white-space: nowrap;
		text-overflow: ellipsis;
		pointer-events: none;                        /* klik trafia w pole pod etykietą */
		transform: translateY(0.9rem);               /* środek pola 48 px */
		transform-origin: left center;
		transition: transform 0.18s ease-out, color 0.18s ease-out;
	}
	/* Stan uniesiony: fokus, wpisana treść, autouzupełnianie przeglądarki. Etykieta siada na górnej ramce.
	   Lista wyboru zawsze pokazuje wybraną opcję, więc jej etykieta stoi uniesiona od początku (22.10). */
	.c-form--float .c-form__field:focus-within > label,
	.c-form--float .c-form__field.is-filled > label,
	.c-form--float .c-form__field:has(select) > label,
	.c-form--float .c-form__field:has(:autofill) > label {
		background: var(--c-bg);
		color: var(--c-text);
		transform: translateY(-0.55rem) scale(0.875); /* 16 -> 14 px, minimum stopnia w serwisie */
	}
	.c-form--float .wpcf7-form-control-wrap { display: block; }
	.c-form--float .c-form__field :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
		border-color: var(--c-field-border);
	}
	.c-form--float .c-form__field textarea { padding-block-start: 0.875rem; }
	.c-form--float .c-form__field :is(input, textarea):focus { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); }
	.c-form--float .c-form__field :is(input, textarea):focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

	@media (prefers-reduced-motion: reduce) {
		.c-form--float .c-form__field > label { transition: none; }
	}

	/* ---------- Błąd pola ---------- */
	/* Ramka 2 px bez przesunięcia układu: 1 px obramowania plus 1 px cienia do środka. */
	.wpcf7 .wpcf7-form .wpcf7-not-valid:is(input, textarea),
	.wpcf7 .wpcf7-form [aria-invalid="true"]:is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
		border: 1px solid var(--c-danger);
		box-shadow: inset 0 0 0 1px var(--c-danger);
	}
	.c-form--float .c-form__field:has([aria-invalid="true"]) > label { color: var(--c-danger); }
	.c-form__check:has([aria-invalid="true"]) input[type="checkbox"] { outline: 2px solid var(--c-danger); outline-offset: 2px; }

	.wpcf7 .wpcf7-not-valid-tip {
		display: flex;
		gap: 0.5rem;
		align-items: flex-start;
		margin-block-start: 0.5rem;
		color: var(--c-danger);
		font-size: var(--txt-body-2);
		font-weight: 400;
		line-height: 1.4;
	}
	/* Ikona: kółko z wykrzyknikiem, maska w kolorze tekstu (działa też w wysokim kontraście). */
	.wpcf7 .wpcf7-not-valid-tip::before {
		content: "";
		flex: none;
		width: 1.125rem;
		height: 1.125rem;
		margin-block-start: 0.05rem;
		background: currentColor;
		-webkit-mask: var(--ikona-blad) no-repeat center / contain;
		mask: var(--ikona-blad) no-repeat center / contain;
	}
	.wpcf7 {
		--ikona-blad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E");
		--ikona-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m7.5 12.5 3 3 6-6'/%3E%3C/svg%3E");
	}

	/* ---------- Komunikat zbiorczy (formularz.js przenosi go nad pola i ustawia na nim fokus) ---------- */
	.wpcf7 form .wpcf7-response-output {
		position: relative;
		margin: 0;
		padding: 1rem 1.25rem 1rem 3.25rem;
		border: 2px solid var(--c-text);
		background: var(--c-bg);
		color: var(--c-text);
		font-size: var(--txt-body-2); /* 14 px, mniejszy tekst w komunikacie (pinezka Marcina 1.10) */
		line-height: 1.5;
		scroll-margin-block-start: 6rem;
	}
	.wpcf7 form .wpcf7-response-output::before {
		content: "";
		position: absolute;
		inset-block-start: 1rem;
		inset-inline-start: 1.125rem;
		width: 1.25rem;
		height: 1.25rem;
		background: var(--c-danger);
		-webkit-mask: var(--ikona-blad) no-repeat center / contain;
		mask: var(--ikona-blad) no-repeat center / contain;
	}
	.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
		border-color: var(--c-danger);
		background: var(--c-danger-bg);
	}
	.wpcf7 form.sent .wpcf7-response-output {
		border-color: var(--c-success);
		background: var(--c-success-bg);
	}
	.wpcf7 form.sent .wpcf7-response-output::before {
		background: var(--c-success);
		-webkit-mask-image: var(--ikona-ok);
		mask-image: var(--ikona-ok);
	}
	.wpcf7-response-output:focus { outline: none; }
	.wpcf7-response-output:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
	.c-form-alert__title { display: block; margin: 0 0 0.25rem; font-weight: 700; }
	.c-form-alert__text { margin: 0; }
	.c-form-alert__list { margin: 0.5rem 0 0; padding-inline-start: 1.25rem; list-style: disc; }
	.c-form-alert__list li + li { margin-block-start: 0.25rem; }

	/* ---------- Przycisk wysyłki: strzałka w tle w kolorze napisu #202426 (pole input nie ma ::after) ---------- */
	.c-form__submit input.c-button {
		padding-inline: 2.5rem 3.75rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23202426' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.3 8h8.2M8.3 4.7 11.6 8l-3.3 3.3'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 2.25rem center;
		background-size: 1rem;
	}
	:root[data-kontrast="wysoki"] .c-form__submit input.c-button {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.3 8h8.2M8.3 4.7 11.6 8l-3.3 3.3'/%3E%3C/svg%3E");
	}

	/* Telefon: przycisk na pełną szerokość (DESIGN.md sekcja 6); justify-self z uklady.css go zwężał. */
	@media (max-width: 39.999em) {
		.c-form__submit { justify-self: stretch; }
		.c-form__submit input.c-button { width: 100%; }
		.c-form__submit .wpcf7-spinner { inset-inline-start: 1rem; margin: 0; }
	}
}

/*
 * POZA @layer, celowo (wyjątek): pole-pułapka CF7 Apps (honeypot, zasada 65). Wtyczka drukuje swój CSS
 * w stopce poza kolejką stylów WordPressa, więc nie trafia do warstwy `wp`, a reguła bez warstwy wygrywa
 * z każdą warstwą motywu. Przeniesione z uklady.css 22.10.2026 bez zmian; !important zostaje, bo lokalny
 * wzorzec nie ma CF7 Apps i nie dało się sprawdzić, z czym ta reguła się mierzy.
 */
.cf7apps-honeypot-wrap { position: absolute !important; inset-inline-start: -9999px; }