/* ==========================================================================
   Prymitywy formularza — Humee (components/forms.css)
   .input / .field / .radio + aliasy klasycznych pól WooCommerce.

   Wyodrębnione z components.css (zasada zasięgu, ADR-0032): pola renderują się
   TYLKO na powierzchniach z formularzem, więc nie obciążają globalnego
   components.css. Ładowane WARUNKOWO (inc/assets/enqueue.php:
   is_account_page() || is_search() || is_checkout()), dep [-components], PRZED
   arkuszami powierzchni (account.css nadpisuje układ par pól — wygrywa
   specyficznością + kolejnością; ADR-0011).

   Konsumenci prymitywu:
   - Konto (login/rejestracja/lost-password/edit-account/edit-address) — przez
     aliasy `.woocommerce form .input-text`/`.form-row` (legacy CSS Woo OFF).
   - Wyszukiwarka — `searchform.php` `class="input"` (get_search_form, is_search).
   - Checkout (przyszły) — natywne pola Woo przez aliasy.

   Layout par pól / kolumny / przełącznik hasła = CSS powierzchni (account.css),
   NIE ten prymityw. Bloki koszyka/checkoutu (Store API `.wc-block-*`) = odrębny
   świat (ADR-0003), poza tym plikiem (koszyk styluje je w cart.css).
   ========================================================================== */


/* ==========================================================================
   INPUT — edytowalne pole formularza (checkout, konto, adresy).
   Figma 63:4752: białe #FFFFFF, obrys #E4DDD7, radius 47, wys. ~40px, tekst 16,
   placeholder #767279. UWAGA: #E4DDD7 ≈ #E3DDD8 (--bg) — drżenie ręki,
   znormalizowane do tokena bazowego. To INNY komponent niż kremowe display-pille
   „szukaj"/newsletter (tamte mają tło-fill, nie są edytowalne). Szerokość/układ
   par pól = layout strony (CSS sekcji), nie ten prymityw.

   Selektor obejmuje też KLASYCZNE pola WooCommerce (`.woocommerce form
   .input-text`, `textarea`) — klasyczne szablony konta/adresów/lost-password
   renderują `<input class="input-text">` bez naszej klasy, a legacy CSS Woo jest
   OFF (foundation.php). Mapujemy je na prymityw zamiast override'ować szablony
   (jak `.single_add_to_cart_button → .btn`, ADR-0021). Bloki koszyka/checkoutu
   (Store API, `.wc-block-*`) to ODRĘBNY świat (ADR-0003) — poza tym selektorem.
   ========================================================================== */
.input,
.field__control,
.woocommerce form .input-text,
.woocommerce form textarea {
	display: block;
	inline-size: 100%;
	min-block-size: 2.5rem;        /* ~40px z Figmy */
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--bg);
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--dark);
	background: var(--wp--preset--color--white);
	transition: border-color 0.2s ease;
}

/* Textarea (np. nota do zamówienia) — wyższa, radius łagodniejszy niż pill. */
.field__control:is(textarea),
.woocommerce form textarea {
	min-block-size: 6rem;
	border-radius: var(--wp--custom--radius--modal);
	line-height: var(--wp--custom--line-height--body);
	resize: vertical;
}

/* Natywny <select> (kraj/region w adresach) — wygląd inputu + własny chevron.
   Woo bywa z Select2 (country_select.js) — gdy JS podmieni na `.select2`, natywny
   select znika; ten styl działa dla wariantu bez Select2 (widoczny na koncie).
   Ścieżka ikony z `assets/css/components/` = `../../icons/`. */
.woocommerce form select {
	display: block;
	inline-size: 100%;
	min-block-size: 2.5rem;
	padding: var(--wp--preset--spacing--xs) 2.5rem var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--bg);
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--dark);
	background-color: var(--wp--preset--color--white);
	background-image: url("../../icons/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--sm) center;
	background-size: 1.1rem;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.woocommerce form select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--dark);
}

.input::placeholder,
.field__control::placeholder,
.woocommerce form .input-text::placeholder,
.woocommerce form textarea::placeholder {
	color: var(--wp--preset--color--placeholder);
	opacity: 1;
}

.input:focus-visible,
.field__control:focus-visible,
.woocommerce form .input-text:focus-visible,
.woocommerce form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--dark);
}

/* Stan błędu — Woo dokłada `.woocommerce-invalid` na wierszu przy walidacji
   klienta; nasze pola: `[aria-invalid="true"]`. Obrys w akcencie (nie krzykliwa
   czerwień — spójność z tokenami; komunikat niesie tekst błędu, nie sam kolor). */
.woocommerce form .woocommerce-invalid .input-text,
.field__control[aria-invalid="true"],
.input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--accent);
}


/* ==========================================================================
   FIELD — wiersz formularza: etykieta + kontrolka + pomoc/błąd.
   Prymityw współdzielony: KLASYCZNE formularze Woo (moje konto, adresy, edycja
   konta, lost-password, kupon w klasycznym koszyku) oraz nasz własny markup.
   Aliasuje natywny wiersz Woo `.woocommerce-form-row`/`.form-row`, żeby klasyczne
   szablony (form-login.php itd.) dostały układ BEZ override szablonu (ADR-0003).
   Bloki koszyka/checkoutu (`.wc-block-*`) — odrębny świat, poza tym prymitywem.
   ========================================================================== */
.field,
.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
}

.field__label,
.woocommerce form .form-row > label {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--dark);
}

/* Gwiazdka „wymagane" / etykieta „opcjonalne" z klasycznych szablonów Woo. */
.woocommerce form .required {
	color: var(--wp--preset--color--accent);
	border: 0;
	text-decoration: none;
}

.woocommerce form .optional {
	/* --border-soft (nie --placeholder): tekst informacyjny renderuje się na
	   kremowych kartach --bg-alt, gdzie --placeholder = 4.23:1 < 4.5 (WCAG 1.4.3).
	   --border-soft = 5.2:1 na bg-alt / 4.51:1 na bg — przechodzi, nadal wyciszony. */
	color: var(--wp--preset--color--border-soft);
}

/* Tekst pomocniczy pod polem (hint hasła, opis). */
.field__help,
.woocommerce form .form-row .description {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	/* --border-soft (nie --placeholder) — kontrast na kremie bg-alt 5.2:1 ≥ 4.5
	   (WCAG 1.4.3 AA). Placeholder w SAMYM polu (białe tło) zostaje bez zmian. */
	color: var(--wp--preset--color--border-soft);
}

/* Komunikat błędu pojedynczego pola (nasz markup; live-region ustawia JS/PHP). */
.field__error {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--accent);
}


/* ==========================================================================
   RADIO — okrągły przełącznik (metoda dostawy, „chcę utworzyć fakturę”).
   Figma 63:4752: koło 30px białe, obrys #E4DDD7 (→ --bg). Zaznaczone = kropka
   10px w środku w kolorze `--accent` — JEDEN indykator „zaznaczone" w całym
   motywie (natywne radia/checkboxy bloków i konta też jadą na akcencie), spójnie
   i czysto. Stylizowany natywny input (radio lub checkbox).
   ========================================================================== */
.radio {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	inline-size: 1.875rem;         /* 30px */
	block-size: 1.875rem;
	margin: 0;
	display: inline-grid;
	place-content: center;
	border: 1px solid var(--wp--preset--color--bg);
	border-radius: var(--wp--custom--radius--circle);
	background: var(--wp--preset--color--white);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.radio::before {
	content: "";
	inline-size: 0.625rem;         /* 10px */
	block-size: 0.625rem;
	border-radius: var(--wp--custom--radius--circle);
	background: var(--wp--preset--color--accent);
	transform: scale(0);
	transition: transform 0.15s ease;
}

.radio:checked::before {
	transform: scale(1);
}

.radio:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}