/* ============================================================
   14 — strona zgłoszenia

   Formularz jest ostatnim krokiem przed sprzedażą, więc pilnujemy dwóch rzeczy:
   żeby dało się go wypełnić kciukiem na telefonie i żeby błąd był widoczny
   przy polu, którego dotyczy, a nie tylko na górze strony.

   Pola warunkowe (zależne od typu nabywcy) mają klasy `ai-pole-*`, ale
   NIE są tu ukrywane. Bez JavaScriptu widać wszystkie i to jest zamierzone —
   ukrywaniem zajmuje się skrypt, który jest ulepszeniem, nie warunkiem.
   ============================================================ */

.ai-zapis__wstep {
  max-width: var(--ai-miara);
  margin: 0 0 var(--ai-s6);
}

/* Odstęp między polami większy niż domyślny rytm tekstu: formularz czyta się
   polami, nie akapitami, więc potrzebuje wyraźniejszych granic. */
.ai-zapis .form-field {
  margin-bottom: var(--ai-s5);
}

.ai-zapis label {
  display: block;
  margin-bottom: var(--ai-s2);
  font-weight: 600;
}

.ai-zapis input[type="text"],
.ai-zapis input[type="email"],
.ai-zapis input[type="tel"],
.ai-zapis input[type="number"],
.ai-zapis textarea,
.ai-zapis select {
  width: 100%;
  max-width: var(--ai-miara);
  min-height: 44px;                 /* cel dotykowy */
  padding: var(--ai-s2) var(--ai-s3);
  background: var(--ai-card);
  color: var(--ai-text);
  /* --ai-line to dekoracja (1,26:1 na karcie) i na obramowaniu pola nie wystarcza:
     WCAG 1.4.11 wymaga 3:1 dla granic kontrolek. --ai-line-ui daje 3,04:1 wobec tła
     strony, czyli wobec koloru, który sąsiaduje z polem. */
  border: 1px solid var(--ai-line-ui);
  border-radius: var(--ai-r-md);
  font: inherit;
}

.ai-zapis textarea {
  min-height: 110px;
  resize: vertical;
}

.ai-zapis input:focus-visible,
.ai-zapis textarea:focus-visible,
.ai-zapis select:focus-visible,
.ai-zapis button:focus-visible {
  outline: 2px solid var(--ai-rose);
  outline-offset: 2px;
}

/* Tekst pomocy trzyma szerokość wiersza, inaczej rozjeżdża się na desktopie
   szerzej niż pole, którego dotyczy. */
.ai-zapis .form-field .form-help,
.ai-zapis small {
  display: block;
  max-width: var(--ai-miara);
  margin-top: var(--ai-s2);
  font-size: var(--ai-size-small);
}

/* Zgody i checkboxy: etykieta obok pola, nie nad nim — inaczej nie widać,
   czego dotyczy zaznaczenie. */
.ai-zapis .form-field-checkbox label,
.ai-zapis .checkboxes label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ai-s3);
  align-items: start;
  max-width: var(--ai-miara);
  font-weight: 400;
}

.ai-zapis input[type="checkbox"],
.ai-zapis input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  accent-color: var(--ai-rose);
}

/* Typ nabywcy: trzy opcje jako lista, nie rząd — nazwy są długie i przy
   wąskim ekranie rząd i tak by się złamał w przypadkowym miejscu. */
.ai-zapis .form-field-radio .form-input-wrapper {
  display: grid;
  gap: var(--ai-s2);
}

.ai-zapis__uczestnicy {
  margin-top: var(--ai-s6);
  padding-top: var(--ai-s5);
  border-top: 1px solid var(--ai-line);
}

/* Komunikat błędu przy polu. Sam kolor nie wystarczy — dokładamy grubość,
   żeby był czytelny także przy zaburzeniach rozpoznawania barw. */
.ai-zapis .form-errors,
.ai-zapis .form-field .form-error {
  margin-top: var(--ai-s2);
  color: var(--ai-rose);
  font-weight: 600;
}

.ai-zapis .form-input-wrapper--error input,
.ai-zapis input[aria-invalid="true"] {
  border-color: var(--ai-rose);
}

.ai-zapis .buttons {
  margin-top: var(--ai-s6);
}

.ai-zapis button[type="submit"] {
  min-height: 48px;
  padding: 0 var(--ai-s5);
}

/* Ekran potwierdzenia po wysłaniu zgłoszenia. Numer to pierwsza rzecz, jaką
   ktoś sprawdza po wysłaniu formularza — wyróżniamy go rozmiarem, nie samym
   pogrubieniem, żeby dało się go znaleźć wzrokiem bez czytania całej strony. */
.ai-potwierdzenie__numer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ai-s2);
  margin: var(--ai-s5) 0;
  padding: var(--ai-s4) var(--ai-s5);
  background: var(--ai-card);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-r-md);
}

.ai-potwierdzenie__numer-etykieta {
  color: var(--ai-text-muted, var(--ai-text));
}

.ai-potwierdzenie__numer-wartosc {
  font-size: var(--ai-size-h3, 1.5rem);
  letter-spacing: 0.02em;
}

.ai-potwierdzenie__tekst {
  max-width: var(--ai-miara);
  margin: 0 0 var(--ai-s4);
}

.ai-potwierdzenie__cta {
  margin-top: var(--ai-s5);
}

/* Przycisk „Pobierz dane z GUS" stoi obok pola NIP i jest pomocą, nie głównym
   działaniem — dlatego obrys zamiast plamy. Gdyby wyglądał jak przycisk wysyłki,
   część osób klikałaby go w przekonaniu, że wysyła zgłoszenie. */
.ai-btn--wtorny {
  background: transparent;
  color: var(--ai-text);
  border: 1px solid var(--ai-line);
}

.ai-btn--wtorny:hover {
  border-color: var(--ai-rose);
}

/* Komunikat po pobraniu z GUS. Ma rolę „status", więc czytnik ekranu przeczyta
   go sam, bez przenoszenia fokusu — użytkownik nie traci miejsca w formularzu. */
/* Komunikat zwrotny formularza. Ma `role="alert"`, więc czytnik ekranu ogłasza go
   sam; dla oka musi być równie trudny do przeoczenia — stąd obramowanie i tło,
   a nie sam kolor tekstu. */
.ai-form-komunikat {
  max-width: var(--ai-miara);
  margin: 0 0 var(--ai-s5);
  padding: var(--ai-s3);
  background: var(--ai-tint);
  border: 1px solid var(--ai-line-ui);
  border-radius: var(--ai-r-md);
}

.ai-form-komunikat--blad {
  border-color: var(--ai-rose);
}

.ai-form-komunikat__prefiks {
  color: var(--ai-heading);
}

.ai-form-komunikat:focus-visible {
  outline: 2px solid var(--ai-rose);
  outline-offset: 2px;
}

/* Nagłówki sekcji formularza (pola typu `spacer`). Dzielą sześćdziesiąt pól na
   cztery części — dla czytnika ekranu są punktami nawigacji, dla oka oddechem. */
.ai-zapis .form-spacer {
  margin: var(--ai-s7) 0 var(--ai-s4);
}

.ai-zapis .form-spacer h3 {
  margin: 0;
}

.ai-zapis .form-spacer p:empty {
  display: none;
}

.ai-gus-komunikat {
  margin: var(--ai-s2) 0 0;
  max-width: var(--ai-miara);
  font-size: var(--ai-size-small);
  color: var(--ai-rose);
}

/* Pole NIP z przyciskiem GUS obok. Klasę dokłada skrypt po przeniesieniu przycisku,
   więc bez JavaScriptu ta reguła nie ma czego dotyczyć — a przycisk zostaje w stopce
   formularza i dalej działa jako zwykły submit. */
.ai-zapis .ai-pole-z-przyciskiem .form-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ai-s2);
}

.ai-zapis .ai-pole-z-przyciskiem .form-input-wrapper {
  order: 1;
  flex: 1 1 12rem;
  max-width: 22rem;               /* inaczej pole zajmuje cały wiersz i przycisk spada niżej */
}

.ai-zapis .ai-pole-z-przyciskiem .form-input-wrapper input {
  max-width: 100%;
}

.ai-zapis .ai-pole-z-przyciskiem .ai-gus-przycisk {
  order: 2;
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

/* Opis pola idzie pod spód, pod oba elementy — czyta się go po, nie w środku. */
.ai-zapis .ai-pole-z-przyciskiem .form-extra-wrapper {
  order: 3;
  flex: 1 0 100%;
}

/* Pola ukrywane skryptem. `hidden` samo w sobie wystarcza, ale reguła jest tu
   po to, żeby nie przykrył go żaden `display` z reguł ogólnych. */
.ai-zapis [hidden] {
  display: none !important;
}

/* --- wycena wybranej liczby biletów -------------------------------------- */
/* Kwotę renderuje serwer (patrz templates/form.html.twig), więc panel jest
   widoczny także bez JavaScriptu — skrypt tylko odświeża liczby przy zmianie
   pola „Liczba osób". */

.ai-wycena {
  margin: 0 0 var(--ai-s6);
  padding: var(--ai-s4);
  max-width: var(--ai-miara);
  background: var(--ai-bg-alt);
  border: 1px solid var(--ai-line);
  border-left: 3px solid var(--ai-magenta);
  border-radius: var(--ai-r-lg);
}

.ai-wycena__glowna {
  display: flex;
  align-items: baseline;
  gap: var(--ai-s2);
  margin: 0 0 var(--ai-s1);
}

.ai-wycena__kwota {
  font-family: var(--ai-font-display);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ai-heading);
}

.ai-wycena__netto {
  font-size: var(--ai-size-small);
  color: var(--ai-text-mute);
}

/* Rozbicie „N osób × cena". Krojem tekstowym; `tabular-nums` trzyma cyfry
   w równych szerokościach, więc kwota nie skacze przy zmianie liczby osób. */
.ai-wycena__rozbicie {
  margin: 0;
  font-family: var(--ai-font-body);
  font-size: var(--ai-size-small);
  font-variant-numeric: tabular-nums;
  color: var(--ai-text-mute);
}

.ai-wycena__zysk,
.ai-wycena__zacheta {
  margin: var(--ai-s3) 0 0;
  font-size: var(--ai-size-small);
  line-height: 1.55;
}
.ai-wycena__zysk { color: var(--ai-rose); }
.ai-wycena__zysk strong { color: var(--ai-rose); font-weight: 700; }
.ai-wycena__zacheta { color: var(--ai-text-mute); }

.ai-wycena[hidden],
.ai-wycena__zysk[hidden],
.ai-wycena__zacheta[hidden] { display: none; }

/* --- licznik liczby osób -------------------------------------------------
   Licznik dokłada skrypt (js/zapis.js), korzystając z wyglądu licznika
   z cennika. Pole w formularzu ma jednak `width: 100%` po wtyczce `form`,
   więc bez tych trzech reguł licznik rozciąga się na całą szerokość
   kolumny i plus ląduje kilkanaście centymetrów od minusa. */

.ai-zapis .ai-zakup__licznik {
  width: max-content;
  max-width: 100%;
}

/* Selektor musi być mocniejszy niż `.ai-zapis input[type="number"]` wyżej w tym
   pliku — tamten ma atrybut, więc samo `.ai-zapis .ai-zakup__pole` przegrywa
   specyficznością i pole zostaje szerokie na całą kolumnę, wypychając plus
   poza licznik (który ma `overflow: hidden`). */
.ai-zapis .ai-zakup__licznik .ai-zakup__pole {
  width: 6ch;
  min-width: 0;
  max-width: none;
  flex: none;
  padding: 0 var(--ai-s2);
  border: 0;
  border-inline: 1px solid var(--ai-line-ui);
  border-radius: 0;
}

/* Etykieta „Liczba osób" opisuje teraz licznik, nie samo pole — odstęp
   pod nią należy do całej grupy. */
.ai-zapis .ai-zakup__licznik + * { margin-top: var(--ai-s2); }