/* ═══════════════════════════════════════════════════════════════════════════
   FORMINATOR – skórka projektu

   Formularze na /kontakt/, /dolacz-do-nas/ i /treningi-dzieci-z-niepelnosprawnosciami/
   renderuje wtyczka Forminator (patrz tools/forminator-forms.php). Jej markup ma
   inne klasy niż makieta z mockupu, więc ten plik jest SŁOWNIKIEM: przekłada
   `.forminator-*` na te same wartości, którymi styles.css opisuje `.form-*`.

   Dlaczego to wystarcza – i dlaczego nie ma tu `!important`:

   1. Formularze mają ustawiony styl „none" (`data-design="none"`), więc arkusz,
      który Forminator generuje dla każdego formularza w uploads/forminator/css/,
      celuje w `.forminator-design--default` i NIE MA do czego się przyczepić.
      Zostaje tylko siatka (`forminator-grid`) i ikony – to jest nam na rękę.
   2. Arkusze motywu (`ksw-*`) są wpinane PO arkuszach wtyczki, więc przy równej
      specyficzności wygrywamy kolejnością.

   Zakres celowo zawężony do `[data-design="none"]`: gdyby klub dodał kiedyś
   własny formularz w stylu „material", ten plik nie będzie się z nim bił.
   ═══════════════════════════════════════════════════════════════════════════ */

.forminator-ui.forminator-custom-form[data-design="none"] {
  font-family: var(--font-body);
  color: var(--ink);
}

/* ───────────────────────────────────────────
   WIERSZ I KOLUMNA  ≙  .form-group / .form-row

   `.forminator-row` to wiersz (u nas: jedno pole na całą szerokość albo dwa obok
   siebie), `.forminator-col` to pole. Odstęp pod polem bierzemy z `.form-group`
   (--space-lg = 24 px), a nie z 20 px wtyczki.

   UWAGA na selektor: `[data-grid]` jest tu POTRZEBNE, mimo że nic nie zawęża.
   Siatka wtyczki celuje w `.forminator-ui.forminator-custom-form[data-grid=open]
   .forminator-row:not(.forminator-row-last)` – pięć członów. Bez `[data-grid]`
   nasza reguła ma cztery i przegrywa remis, przez co odstępy wracały do 20 px
   (zmierzone: cały formularz kontaktowy o 4 px za ciasny na wiersz).
   ─────────────────────────────────────────── */
.forminator-ui.forminator-custom-form[data-design="none"][data-grid] .forminator-row {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.forminator-ui.forminator-custom-form[data-design="none"][data-grid] .forminator-col {
  flex: 1;
  min-width: 0; /* bez tego długa opcja w <select> rozpycha kolumnę */
}

/* Siatka wtyczki daje KAŻDEJ kolumnie poza ostatnią `margin-bottom: 20px` – także
   na desktopie, gdzie kolumny stoją OBOK siebie. W flexie ten margines rozpycha
   cały wiersz: pole ma 82 px, a wiersz 102. Odstęp pionowy jest tu zadaniem
   wiersza, nie kolumny, więc na desktopie kolumnę zerujemy (mobile niżej).
   Selektor powtarza kształt reguły wtyczki, żeby mieć tę samą specyficzność –
   o remis dba kolejność wpięcia arkuszy. */
.forminator-ui.forminator-custom-form[data-design="none"][data-grid] .forminator-col:not(:last-child) {
  margin-bottom: 0;
}

/* Wiersz z przyciskiem: bez dolnego marginesu, nota `.form-disclaimer` stoi tuż pod.
   Reguła wtyczki wyłącza ostatni wiersz przez `:not(:last-child)`, ale za formularzem
   stoi jeszcze osiem ukrytych <input> (nonce, form_id, honeypot…), więc wiersz
   z przyciskiem NIE jest ostatnim dzieckiem i margines i tak dostawał. */
.forminator-ui.forminator-custom-form[data-design="none"][data-grid] .forminator-row-last {
  margin-bottom: 0;
}

/* ───────────────────────────────────────────
   ETYKIETA  ≙  .form-label
   ─────────────────────────────────────────── */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

/* Gwiazdka przy polu wymaganym – w makiecie jej nie było, bo wymagane były
   wszystkie pola poza dwoma. Zostawiamy ją stonowaną: to jedyna informacja,
   której rodzic nie wyczyta skądinąd przed wysłaniem. */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-required {
  color: var(--club-red);
  font-weight: 400;
}

/* ───────────────────────────────────────────
   POLA  ≙  .form-input / .form-select / .form-textarea
   ─────────────────────────────────────────── */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-input,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-textarea,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-select--field {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-input::placeholder,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-input:focus,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-textarea:focus,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-select--field:focus {
  border-color: var(--club-green);
  box-shadow: 0 0 0 3px rgba(15, 90, 60, 0.12);
  outline: none;
}

/* Strzałka listy rozwijanej – ta sama grafika, co w `.form-select`.
   Natywny <select> zamiast widżetu select2: klasę `forminator-select2` zdejmuje
   filtr w functions.php (patrz ksw_forminator_native_select). */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-select--field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23667085' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Pole „Poprzedni klub" jest jednolinijkowe w makiecie, ale w Forminatorze musiało
   zostać `textarea`, żeby nie zgubić 239 historycznych odpowiedzi (zmiana typu =
   nowy element_id = stare wpisy znikają z panelu – patrz tools/forminator-forms.php).
   Z `rows="1"` ma wysokość zwykłego pola; `min-height` z bazowej reguły trzeba zdjąć,
   bo rozepchnęłoby je do 100 px. */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-textarea[rows="1"] {
  min-height: 0;
}

/* ───────────────────────────────────────────
   ZGODA I OPCJE  ≙  .form-check
   ─────────────────────────────────────────── */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--club-green);
  cursor: pointer;
}

/* Forminator rysuje własny kwadracik obok natywnego pola. Natywny ma
   `accent-color` w barwie klubu i czyta go czytnik ekranu – atrapa jest zbędna. */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-checkbox-box {
  display: none;
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-checkbox__label,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-checkbox span:not(.forminator-checkbox-box) {
  font-size: var(--fs-sm);
  color: var(--ink-light);
  line-height: var(--lh-relaxed);
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-checkbox__label a {
  color: var(--club-green);
  text-decoration: underline;
}

/* Etykieta nad POJEDYNCZYM checkboxem: Forminator wymaga jej w definicji pola
   („Zgoda", „Obecność opiekuna"), ale w makiecie nic takiego nie stało – całą treść
   niesie tekst przy checkboksie, a etykieta powtarzałaby ją własnymi słowami.
   Chowamy ją WIZUALNIE, nigdy `display: none`: przy grupie checkboxów Forminator
   celuje w nią `aria-labelledby`, więc usunięcie z drzewa dostępności odebrałoby
   grupie nazwę. Warunek `:has(… :only-of-type)` pilnuje, żeby przy PRAWDZIWEJ liście
   wyborów (dwie opcje i więcej) etykieta grupy została widoczna – tam niesie sens. */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-field:has(.forminator-checkbox__wrapper) > .forminator-label,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-field:has(> .forminator-checkbox:only-of-type) > .forminator-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────────────────────────────────────────
   PRZYCISK  ≙  .btn.btn-primary.btn-lg.btn-full
   ─────────────────────────────────────────── */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1;
  padding: 1rem 2rem;
  border: 2px solid var(--club-yellow);
  border-radius: var(--radius-lg);
  background: var(--club-yellow);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-button-submit:hover {
  background: var(--club-yellow-dark);
  border-color: var(--club-yellow-dark);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232, 185, 49, 0.35);
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-button-submit:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* ───────────────────────────────────────────
   BŁĘDY  ≙  .form-error
   ─────────────────────────────────────────── */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-has_error .forminator-input,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-has_error .forminator-textarea,
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-has_error .forminator-select--field {
  border-color: var(--club-red);
  box-shadow: 0 0 0 3px rgba(190, 47, 47, 0.12);
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-error-message {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--club-red);
}

/* ───────────────────────────────────────────
   KOMUNIKAT PO WYSŁANIU

   To jest miejsce, w którym rodzic dowiaduje się, że zgłoszenie DOSZŁO – dawniej
   udawał to napis na przycisku makiety, mimo że nic nie zostało wysłane. Dlatego
   komunikat ma wagę treści, a nie ozdobnika: zielone tło klubu, wyraźny tekst.
   ─────────────────────────────────────────── */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-response-message {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-response-message p:last-child {
  margin-bottom: 0;
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-response-message.forminator-success {
  margin-bottom: var(--space-lg);
  background: var(--club-green-light);
  color: var(--club-green);
  border: 1px solid var(--club-green);
}

.forminator-ui.forminator-custom-form[data-design="none"] .forminator-response-message.forminator-error {
  margin-bottom: var(--space-lg);
  background: rgba(190, 47, 47, 0.08);
  color: var(--club-red);
  border: 1px solid var(--club-red);
}

/* Pusty kontener komunikatu wisi w markupie od początku – bez tego robi dziurę
   nad formularzem. Forminator dokłada klasę stanu dopiero po wysyłce. */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-response-message:empty {
  display: none;
}

/* Pułapka na boty (`honeypot`). Ukrywamy bez `display: none` – część botów pomija
   pola faktycznie niewidoczne, a to pole ma zostać dla nich kuszące. */
.forminator-ui.forminator-custom-form[data-design="none"] .forminator-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ───────────────────────────────────────────
   MOBILE – jak `.form-row` w responsive.css
   ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .forminator-ui.forminator-custom-form[data-design="none"][data-grid] .forminator-row {
    flex-direction: column;
    gap: 0;
  }

  /* Tu kolumny stoją JEDNA POD DRUGĄ, więc margines wraca – ale w wymiarze projektu
     (24 px), nie w 20 px wtyczki. */
  .forminator-ui.forminator-custom-form[data-design="none"][data-grid] .forminator-col:not(:last-child) {
    margin-bottom: var(--space-lg);
  }
}