/* Pierogowe Love — style formularzy (pola, błędy, podsumowanie, wynik wysyłki).
   Wydzielone z main.css w etapie 2d: HOME nie ma formularza, więc ich nie wczytuje.
   Podłączą je /zamow/ i /kontakt/ (<link> po main.css; kolejność warstw deklaruje main.css). */

@layer components {
  .form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
  .field { display: grid; gap: 0.375rem; align-content: start; }
  .field-row { display: grid; gap: 1.25rem; }
  @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
  .field label { font-weight: 600; font-size: 1rem; }
  .field__req, .field__opt { font-weight: 400; font-size: var(--fs-small); color: var(--color-text-muted); margin-left: 0.25rem; }
  .field__help { font-size: var(--fs-small); color: var(--color-text-muted); line-height: 1.45; }
  .field input, .field textarea {
    width: 100%; min-height: 48px; padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--color-border-control); border-radius: 10px;
    background: var(--flour); font-size: 1.0625rem; line-height: 1.4;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  }
  .field textarea { resize: vertical; }
  .field input:hover, .field textarea:hover { border-color: var(--crust); }
  /* Pola: obrys przy każdym fokusie (także segmenty pola daty, które nie dostają :focus-visible). */
  .field input:focus, .field textarea:focus,
  .field:focus-within > :is(input, textarea) { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--crust); }
  .field [aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
  .field__error { display: flex; gap: 0.4rem; align-items: flex-start; color: var(--color-danger); font-size: var(--fs-small); font-weight: 500; }
  .field__error::before {
    content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem;
    border-radius: 50%; background: var(--color-danger); color: var(--flour); font-size: 0.75rem; font-weight: 700; line-height: 1;
  }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form__privacy { max-width: 62ch; font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted); }
  .form__privacy a { color: var(--crust); font-weight: 600; }
  /* Etap 16: strona testowa (staging) — informacja przy wysyłce, że wiadomość trafi do skrzynki jako [TEST]. */
  .form__test { max-width: 62ch; padding: 0.625rem 0.875rem; border-radius: 10px; background: var(--color-info-bg); font-size: var(--fs-small); line-height: 1.5; }
  /* Aktualizacja bezpieczeństwa 2026-10: Cloudflare Turnstile (turnstile.js wstawia blok nad przyciskiem wysyłki, gdy ochrona
     jest włączona). Widżet „interaction-only” zwykle nic nie pokazuje — widać tylko dyskretną notkę; okienko i podpowiedź
     pojawiają się wyłącznie, gdy Cloudflare poprosi o potwierdzenie. */
  .form-verify { display: grid; gap: 0.5rem; justify-items: start; max-width: 100%; }
  .form-verify__widget { max-width: 100%; }
  .form-verify__widget iframe { max-width: 100%; }
  .form-verify.is-interactive .form-verify__widget { padding: 0.25rem 0; }
  .form-verify__hint { max-width: 62ch; padding: 0.625rem 0.875rem; border-radius: 10px; background: var(--color-info-bg); font-size: var(--fs-small); line-height: 1.5; font-weight: 500; }
  .form-verify__note { max-width: 62ch; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); }
  .form-verify__note a { color: var(--crust); font-weight: 600; }
  .form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
  .form__submit .btn { min-width: 14rem; }
  @media (max-width: 479px) { .form__submit .btn { width: 100%; } }
  .form__alt { font-size: var(--fs-small); color: var(--color-text-muted); }
  .form__alt a { color: var(--crust); font-weight: 600; font-variant-numeric: tabular-nums; }

  .form-summary { margin-top: 1.25rem; padding: 1rem 1.125rem; border: 2px solid var(--color-danger); border-radius: var(--media-radius); background: var(--flour); }
  .form-summary :is(h3, h4) { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; color: var(--color-danger); }
  .form-summary ul { margin-top: 0.5rem; padding-left: 1.25rem; }
  .form-summary a { color: var(--color-danger); font-weight: 500; }
  .form-summary:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }

  .form-result { padding: 1rem 1.125rem; border-radius: var(--media-radius); font-weight: 500; }
  .form-result:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .form-result[data-kind="ok"] { background: var(--color-info-bg); }
  .form-result[data-kind="error"] { background: var(--flour); border: 2px solid var(--color-danger); color: var(--crust); }
  .form-result p + p { margin-top: 0.375rem; }
  .form-result .icon { display: inline-block; vertical-align: -0.25em; margin-right: 0.35rem; }
}