/**
 * field.css — pole formularza: ramka, etykieta, podpowiedź, błąd.
 *
 * KOMPONENT, NIE SEKCJA (reguła 18): ten sam przepis stoi w kodzie
 * rabatowym koszyka, w trzech blokach kasy i w koncie klienta — a przepis
 * jest JEDEN, spisany w design-audit.md C.7 („pola — jeden fokus"):
 *   ramka    r16, --dc-surface, 1 px --dc-border-line, --dc-shadow-xs
 *   fokus    :focus-within na RAMCE (outline: none na polu): obwódka
 *            --dc-accent + pierścień 0 0 0 1px --dc-accent (razem 2 px)
 *   błąd     --dc-danger na obwódce i pierścieniu, tekst błędu 12 px;
 *            selektor :has(:user-invalid, [aria-invalid='true'])
 *
 * Wymaga tokens.css i base.css. Klasa bazowa .dc-field to RAMKA; pole
 * w środku ma .dc-field__input. Etykieta i podpowiedź stoją obok ramki,
 * nie w niej — ramka ma reagować na fokus samego pola.
 *
 * WooCommerce (kasa) wypisuje pola własną funkcją woocommerce_form_field()
 * w owijce p.form-row; mapowanie tych klas na ten komponent jest
 * w sekcji 4 niżej — to jedyne miejsce w motywie, gdzie klasy .form-row /
 * .input-text niosą styl (section-conventions.md: „mapowanie tokenów na
 * klasy .woocommerce-*").
 */

/* ==========================================================================
   1. RAMKA
   ========================================================================== */

.dc-field {
  display: flex;
  align-items: center;
  gap: var(--dc-space-8);
  padding-inline: var(--dc-space-16) var(--dc-space-4);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-xs);
  transition:
    border-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease);
}

.dc-field:focus-within {
  border-color: var(--dc-accent);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-accent);
}

.dc-field:has(:user-invalid, [aria-invalid='true']) {
  border-color: var(--dc-danger);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-danger);
}

/* ==========================================================================
   2. POLE
   Wysokość z paddingu pola, nie ramki: 14 + 14 + wiersz 15 px = 48 px,
   czyli pasmo przycisków rangi 1 (44–48) — pole i przycisk obok siebie
   stoją w jednej linii.
   ========================================================================== */

.dc-field__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding-block: var(--dc-space-14);
  border: 0;
  background: none;
  color: var(--dc-text);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-none);
  outline: none;
}

.dc-field__input::placeholder {
  color: var(--dc-text-subtle);
}

/* Pola liczbowe bez natywnych strzałek — te stoją tylko tam, gdzie
   sekcja rysuje własny stepper (koszyk). */
.dc-field__input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.dc-field__input[type='number']::-webkit-outer-spin-button,
.dc-field__input[type='number']::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Przycisk WEWNĄTRZ ramki (ranga 1 w polu): r12 wg reguły zagnieżdżenia
   C.9 (16 − odstęp 4). Kolor i cień daje sekcja — tu tylko geometria. */
.dc-field__button {
  flex: none;
  border-radius: var(--dc-radius-12);
}

/* ==========================================================================
   3. ETYKIETA, PODPOWIEDŹ, BŁĄD
   Makieta: etykieta 12,5 / 600 / #5a5a5a, odstęp 7 -> --dc-text-sm /
   --dc-weight-medium / --dc-text-muted, --dc-space-8.
   ========================================================================== */

.dc-field__label {
  display: block;
  margin-block-end: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-muted);
}

.dc-field__hint {
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-subtle);
}

.dc-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-6);
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-snug);
  color: var(--dc-danger);
}

/* Gwiazdka pola wymaganego — w barwie błędu jak w makiecie (C.7). */
.dc-field__required {
  color: var(--dc-danger);
  font-weight: var(--dc-weight-bold);
}

/* ==========================================================================
   4. POLA WOOCOMMERCE (woocommerce_form_field)
   Kasa nie pisze własnych <input>: pola rozliczeniowe wypisuje WooCommerce
   w p.form-row > span.woocommerce-input-wrapper > input.input-text,
   a checkout.js dokłada .woocommerce-invalid / .woocommerce-validated
   na p.form-row. Tu ta struktura dostaje DOKŁADNIE ten sam przepis co
   .dc-field, więc pole kuponu, pole PESEL i pole imienia wyglądają jak
   jedno pole.
   ========================================================================== */

.form-row {
  display: block;
  margin: 0;
}

.form-row > label {
  display: block;
  margin-block-end: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-muted);
}

.form-row .required {
  color: var(--dc-danger);
  font-weight: var(--dc-weight-bold);
  text-decoration: none;
}

.form-row .optional {
  font-weight: 400;
  color: var(--dc-text-subtle);
}

/* Owijka WooCommerce zostaje blokiem: mieści pole ORAZ opis
   (span.description dokładany za polem, wc-template-functions.php:3572),
   więc ramką jest samo pole, nie owijka — inaczej opis „Kierowca dzwoni
   dzień przed dostawą" lądował wewnątrz ramki obok pola (zmierzone
   2026-08-31). Fokus i błąd siedzą wtedy na polu, z tym samym rysunkiem
   co :focus-within ramki .dc-field. */
.form-row .woocommerce-input-wrapper {
  display: block;
}

.form-row .input-text,
.form-row select,
.form-row textarea {
  display: block;
  width: 100%;
  padding: var(--dc-space-14) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-xs);
  color: var(--dc-text);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-none);
  outline: none;
  transition:
    border-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease);
}

.form-row .input-text:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--dc-accent);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-accent);
}

.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select,
.form-row.woocommerce-invalid textarea,
.form-row .input-text:user-invalid,
.form-row .input-text[aria-invalid='true'] {
  border-color: var(--dc-danger);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-danger);
}

.form-row textarea {
  min-height: calc(var(--dc-space-48) * 2);
  line-height: var(--dc-leading-normal);
  resize: vertical;
}

.form-row .input-text::placeholder {
  color: var(--dc-text-subtle);
}

/* Kraj przy jednym dozwolonym: WooCommerce wypisuje <strong> zamiast
   listy — ta sama ramka, bez kursora pola. */
.form-row .woocommerce-input-wrapper > strong {
  display: block;
  padding: var(--dc-space-14) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-sunken);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-none);
}

/* Pole typu checkbox: etykieta niesie pole w środku — nie dostaje ramki. */
.form-row .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-12);
  margin: 0;
  font-size: var(--dc-text-md);
  font-weight: 400;
  color: var(--dc-text);
  cursor: pointer;
}

/* Komunikat błędu pod polem (checkout.js: .checkout-inline-error-message). */
.form-row .checkout-inline-error-message {
  display: block;
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-danger);
}

.form-row .description {
  display: block;
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   5. CHECKBOX I RADIO
   Makieta rysuje własne kontrolki: kwadrat 22 / r7 z obwódką, zaznaczony
   tintem złota i ptaszkiem; kółko 20 z kropką. Kontrolki natywne WooCommerce
   (input.input-checkbox / .input-radio z woocommerce_form_field i szablonów)
   dostają ten wygląd przez appearance: none — znacznik, nazwa i klawiatura
   zostają natywne, zmienia się sam rysunek. Zaznaczenie: tło jak ranga 1
   (--dc-gradient-cta + a50), ptaszek rysowany obramowaniem ::after
   w --dc-on-accent (ten sam kontrast co tekst na przycisku). Fokus:
   globalny :focus-visible z base.css, tylko promień dopasowany.
   ========================================================================== */

.input-checkbox,
.input-radio {
  flex: none;
  display: inline-grid;
  place-content: center;
  width: var(--dc-space-22);
  height: var(--dc-space-22);
  margin: 0;
  border: var(--dc-border-thick) solid var(--dc-border-line);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-xs);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease);
}

.input-checkbox {
  border-radius: var(--dc-radius-8);
}

.input-checkbox:focus-visible {
  border-radius: var(--dc-radius-8);
}

.input-radio,
.input-radio:focus-visible {
  border-radius: var(--dc-radius-full);
}

.input-checkbox:hover,
.input-radio:hover {
  border-color: var(--dc-accent-a50);
}

.input-checkbox:checked {
  border-color: var(--dc-accent-a50);
  background-image: var(--dc-gradient-cta);
}

/* Ptaszek: prostokąt 6 × 12 z dwoma bokami obramowania, obrócony o 45°.
   Rysunek z tokenów odstępu — to geometria kontrolki, nie ikona rejestru,
   bo pseudoelement nie przyjmie <svg>. */
.input-checkbox::after {
  content: '';
  width: var(--dc-space-6);
  height: var(--dc-space-12);
  margin-block-start: calc(var(--dc-space-2) * -1);
  border: solid var(--dc-on-accent);
  border-width: 0 var(--dc-border-heavy) var(--dc-border-heavy) 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dc-duration-fast) var(--dc-ease-out);
}

.input-checkbox:checked::after {
  transform: rotate(45deg) scale(1);
}

.input-radio:checked {
  border-color: var(--dc-accent-a50);
}

.input-radio::after {
  content: '';
  width: var(--dc-space-10);
  height: var(--dc-space-10);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent);
  transform: scale(0);
  transition: transform var(--dc-duration-fast) var(--dc-ease-out);
}

.input-radio:checked::after {
  transform: scale(1);
}

/* Stan błędu na kontrolce (regulamin niezaznaczony: checkout.js dokłada
   .woocommerce-invalid na p.form-row). */
.form-row.woocommerce-invalid .input-checkbox,
.form-row.woocommerce-invalid .input-radio {
  border-color: var(--dc-danger);
}

/* Etykieta z kontrolką w środku (woocommerce_form_field type checkbox
   wypisuje label.checkbox > input). */
.form-row label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-12);
  margin: 0;
  font-size: var(--dc-text-md);
  font-weight: 400;
  line-height: var(--dc-leading-normal);
  color: var(--dc-text);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .input-checkbox::after,
  .input-radio::after {
    transition: none;
  }
}