/* ==========================================================================
   FORMULARZE FLUENT FORMS — warstwa wspólna                DEC-047 · DEC-020 · DEC-021

   Jeden arkusz dla KAŻDEGO formularza Fluent Forms w serwisie: kreatora
   „Ask About a Filter" (/ask/) i formularza kontaktowego (/contact/).
   Ładuje go `inc/forms.php`, wszędzie tam, gdzie stoi formularz, ZAWSZE
   przed arkuszem konkretnego formularza.

   Podział:
   - tutaj: konstrukcja przepisana z arkusza wtyczki, etykiety, pola,
     przyciski, załącznik, zgoda, komunikat po wysyłce;
   - `creator.css`: wyłącznie to, czego nie ma nigdzie poza kreatorem
     (kroki, kafelki mocowania, macierz, przełącznik „nie wiem", rama /ask/);
   - `blocks/contact-form/style.css`: wyłącznie różnice Contact wobec
     tej warstwy (rytm pól i przyciski 1:1 z prototypu).

   ⚠️ Reguły sekcji 1, 2, 4, 5, 7 i 7b są PRZENIESIONE z `creator.css`
   bez zmiany wartości; pełna historia pomiarów, która za nimi stoi
   (box-sizing, :not(), min-height, krzyżyk kreską), jest w komentarzach
   tamtego pliku i w ~/.claude/wiedza/fluent-forms.md §3 i §7. Dopóki
   `creator.css` trzyma własne kopie tych reguł, obie muszą mieć te same
   wartości: kreator ładuje się po tym arkuszu, więc rozjazd wygra jego kopia.
   ========================================================================== */

/* ==========================================================================
   1. KONSTRUKCJA — przepisane z arkusza wtyczki, nie zmieniać przy stylowaniu

   Arkusz wtyczki zdejmujemy w całości (`inc/forms.php`), a w nim siedzą
   reguły, bez których formularz przestaje DZIAŁAĆ, nie tylko wyglądać.
   Zmierzone 18.08: bez pierwszej z nich kreator pokazuje 13 pól naraz.
   ========================================================================== */

.fluentform .has-conditions { display: none; }

.fluentform .ff-step-container { overflow: hidden; }
.fluentform .ff-step-body { position: relative; top: 0; left: 0; }
.fluentform-step {
  float: left;
  height: 1px;
  overflow-x: hidden;
  padding: 3px;
  box-sizing: border-box;
}
.fluentform-step.active { height: auto; width: 100%; }

.fluentform .ff-el-group::after,
.fluentform .ff-step-body::after { content: ""; display: table; clear: both; }

/* Element ukryty wzrokowo, ale obecny dla czytnika i klawiatury — bez tego
   natywny `input[type=file]` wychodzi z ukrycia obok naszego przycisku.   */
.fluentform .ff-screen-reader-element,
.fluentform .ff_screen_reader_title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  word-wrap: normal !important;
}

/* ⛔ `.ff_excluded` zostawiamy nietknięte: auto-pomijanie pustych kroków
   czyta tę klasę z DOM, nie z konfiguracji.                               */

/* ==========================================================================
   2. RAMA FORMULARZA

   Bez szerokości i bez centrowania: o tym, ile miejsca dostaje formularz,
   decyduje strona, na której stoi (kreator: `creator.css`, Contact: kolumna
   `.contact-grid`). `margin-inline: auto` w siatce wyłącza rozciąganie
   elementu (fluent-forms.md §9), więc nie może siedzieć we wspólnej warstwie.
   ========================================================================== */

.fluentform {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--fs-body);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--text);
}

.fluentform fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.fluentform .ff-el-group { margin-bottom: var(--wp--preset--spacing--space-6); }
.fluentform .ff-el-group:last-child { margin-bottom: 0; }

/* ==========================================================================
   3. DWA POLA W RZĘDZIE — kontener kolumn z edytora wtyczki

   Renderer daje `.ff-t-container.ff-column-container` z komórkami
   `flex-basis: 50%` wpisanymi w znacznik. Bez arkusza wtyczki komórki stoją
   jedna pod drugą, więc układ piszemy tu, siatką, jak `.form-row` prototypu:
   dwie kolumny dopiero od 40rem, bo poniżej dwa pola po ~150 px nie
   pokazują wpisanej treści.

   ⚠️ Selektor wymaga OBU klas. Kreator ma `.ff-column-container` na
   pojemniku przycisków ostatniego kroku (`.ff-step-t-container`), a macierz
   ma `.ff-t-container` bez drugiej klasy — żadnego z nich ta reguła nie
   może dotknąć (sprawdzone w HTML /ask/ 22.09).                          */

.fluentform .ff-t-container.ff-column-container {
  display: grid;
  gap: var(--wp--preset--spacing--space-6);
  margin-bottom: var(--wp--preset--spacing--space-6);
}

@media (min-width: 40rem) {
  .fluentform .ff-t-container.ff-column-container {
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--space-5);
  }
}

/* Odstęp niesie wiersz (wyżej), nie pole w komórce — inaczej sumowałby się
   z odstępem siatki.                                                      */
.fluentform .ff-column-container > .ff-t-cell > .ff-el-group { margin-bottom: 0; }

/* ==========================================================================
   4. ETYKIETY, PODPOWIEDZI, BŁĘDY
   ========================================================================== */

.fluentform .ff-el-input--label {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--space-2);
  margin-bottom: var(--wp--preset--spacing--space-2);
}

.fluentform .ff-el-tooltip { color: var(--wp--preset--color--text-muted); }

.fluentform .ff-el-input--label label {
  display: inline-block;
  margin-bottom: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--fs-small);
  font-weight: 600;
  line-height: var(--wp--custom--line-height--small);
  color: var(--wp--preset--color--text);
}

.fluentform .ff-el-input--label.ff-el-is-required label::after {
  content: "";           /* gwiazdki nie ma — patrz niżej */
}

/* Zamiast gwiazdek przy polach wymaganych — dopisek „(optional)" przy
   nielicznych opcjonalnych (prototyp, `components/form.css`). Wpisany
   w etykietę pola w edytorze wtyczki jako `<span class="ff-optional">`.
   Waga zwykła i kolor pomocniczy, żeby czytał się jako komentarz do
   etykiety, a nie jej część.                                              */
.fluentform .ff-optional {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  color: var(--wp--preset--color--text-muted);

  /* Dopisek w innym kroju rozpychał linię etykiety o 1 px (22 zamiast 21),
     więc pole obok etykiety bez dopisku stało o 1 px wyżej w tym samym
     rzędzie (zmierzone 24.09, para E-mail / Your name). Wysokość linii
     niesie etykieta, dopisek jej nie zmienia.                              */
  line-height: 1;
}

.fluentform .ff-el-help-message {
  margin-top: var(--wp--preset--spacing--space-2);
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--small);
  color: var(--wp--preset--color--text-muted);
}

/* Błąd niesie kolor i tekst, nigdy sam kolor. */
.fluentform .error.text-danger {
  margin-top: var(--wp--preset--spacing--space-2);
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--small);
  color: var(--wp--preset--color--error);
}

.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--error); }

/* ==========================================================================
   5. KONTROLKI — 1:1 z `components/form.css` prototypu
   ========================================================================== */

/* ⚠️ Bez `:not(.ff-screen-reader-element)` — dokłada klasę do specyficzności
   i strzałka listy zaczyna się kafelkować (creator.css §5, wiedza §7).    */
.fluentform .ff-el-form-control {
  width: 100%;
  box-sizing: border-box;   /* bez tego lista 54 px, pole tekstowe 70 px (19.08) */
  min-height: var(--wp--custom--hit--min);
  padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);

  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--fs-body);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--text);

  background: var(--wp--preset--color--page);
  border: var(--wp--custom--border--hair) solid var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius);
  box-shadow: none;

  transition: border-color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease);
}

/* `textarea` jest liniowy, więc zostawia pod sobą 8 px na wydłużenia liter:
   podpowiedź albo komunikat błędu stały pod nim o 8 px dalej niż pod zwykłym
   polem (zmierzone na Contact 22.09 i w kreatorze 24.09, DEC-061). Do tej pory
   poprawione tylko na Contact, teraz dla obu formularzy. Rośnie w dół,
   nigdy w bok, bo poziome ciągnięcie rozwala kolumnę.                     */
.fluentform textarea.ff-el-form-control {
  display: block;
  resize: vertical;
}

.fluentform select.ff-el-form-control {
  appearance: none;
  padding-right: var(--wp--preset--spacing--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23575E62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--wp--preset--spacing--space-4) center;
}

.fluentform select.ff-el-form-control:hover,
.fluentform select.ff-el-form-control:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230A6E78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

.fluentform .ff-el-form-control:hover { border-color: var(--wp--preset--color--accent); }

.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus--offset);
  border-color: var(--wp--preset--color--accent);
}

.fluentform .ff-el-form-control::placeholder { color: var(--wp--preset--color--disabled-text); }

/* ==========================================================================
   6. ZGODA — pole „Terms & Conditions" wtyczki

   Renderer: label.ff_tc_label > span.ff_tc_checkbox > input + div.ff_t_c.
   Kwadracik i tekst w dwóch kolumnach, jak `.consent` prototypu: tekst
   zawinięty w drugi wiersz zostaje pod tekstem, nie wraca pod kwadracik.
   ========================================================================== */

.fluentform .ff_tc_label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wp--preset--spacing--space-3);
  align-items: start;
  cursor: pointer;
}

.fluentform .ff_tc_checkbox { display: flex; }

.fluentform .ff_tc_checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: .15rem 0 0;
  accent-color: var(--wp--preset--color--accent);
  cursor: pointer;
}

.fluentform .ff_tc_checkbox input[type="checkbox"]:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus--offset);
}

.fluentform .ff_t_c {
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--text-muted);
}

/* ==========================================================================
   7. PRZYCISKI — trzy poziomy z DEC-021 (a)

   Tu tylko to, co wspólne. Nawigacja kroków (`.step-nav`, `Back`) należy
   do kreatora i zostaje w `creator.css`.
   ========================================================================== */

.fluentform .ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--space-2);
  min-height: var(--wp--custom--hit--min);
  padding: 0 var(--wp--preset--spacing--space-6);

  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--fs-body);
  font-weight: 600;
  line-height: 1;

  border: var(--wp--custom--border--hair) solid transparent;
  border-radius: var(--wp--custom--radius);
  cursor: pointer;
  box-shadow: none;

  transition:
    background var(--wp--custom--motion--hover) var(--wp--custom--motion--ease),
    color      var(--wp--custom--motion--hover) var(--wp--custom--motion--ease),
    transform  var(--wp--custom--motion--hover) var(--wp--custom--motion--ease);
}

/* Wciśnięcie 1 px w 40 ms (DEC-021 b). */
.fluentform .ff-btn:active {
  transform: translateY(1px);
  transition-duration: var(--wp--custom--motion--press);
}

.fluentform .ff-btn-next,
.fluentform .ff-btn-submit {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--text-on-accent);
}

.fluentform .ff-btn-next:hover,
.fluentform .ff-btn-submit:hover { background: var(--wp--preset--color--accent-hover); }
.fluentform .ff-btn-next:active,
.fluentform .ff-btn-submit:active { background: var(--wp--preset--color--accent-press); }

.fluentform .ff-btn:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus--offset);
}

/* Stan wyłączony ma własne tokeny, nigdy `opacity` (DEC-021 d). */
.fluentform .ff-btn:disabled {
  background: var(--wp--preset--color--disabled-bg);
  color: var(--wp--preset--color--disabled-text);
  cursor: not-allowed;
}

/* ==========================================================================
   7b. ZAŁĄCZNIK — strefa wgrywania i karta pliku

   Renderer Pro: label.ff_file_upload_holder > span.ff_upload_btn + ukryty
   input, a po wgraniu lista kart. Pełna historia pomiarów tej sekcji
   (miniatura 698 × 0, krzyżyk kreską, karta 83 → 72 px) — creator.css §7b.
   ========================================================================== */

.fluentform .ff_file_upload_holder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wp--custom--hit--min);
  padding: var(--wp--preset--spacing--space-5);
  border: var(--wp--custom--border--hair) dashed var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius);
  background: var(--wp--preset--color--page);
  cursor: pointer;
  transition: border-color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease), background var(--wp--custom--motion--hover) var(--wp--custom--motion--ease);
}

.fluentform .ff_file_upload_holder:hover {
  border-color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent-soft);
}

.fluentform .ff_upload_btn.ff-btn {
  background: none;
  color: var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  min-height: 0;
}

.fluentform .ff_file_upload_holder:has(input:focus-visible) {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus--offset);
}

/* `!important` na dwóch własnościach: renderer wpisuje `font-size:12px`
   i `margin-top:15px` stylem w znaczniku.                                 */
.fluentform .ff-uploaded-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-2);
  margin-top: var(--wp--preset--spacing--space-4) !important;
  font-size: var(--wp--preset--font-size--fs-small) !important;
  color: var(--wp--preset--color--text-muted);
}

.fluentform .ff-upload-preview {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--wp--preset--spacing--space-3);
  padding: var(--wp--preset--spacing--space-2);
  background: var(--wp--preset--color--page);
  border: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
}

.fluentform .ff-upload-thumb {
  width: 56px;
  height: 56px;
  flex: none;
}

.fluentform .ff-upload-preview-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--wp--preset--color--surface);
  border: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
}

.fluentform .ff-upload-details {
  min-width: 0;
  display: grid;
  row-gap: var(--wp--preset--spacing--space-1);
  padding-right: calc(var(--wp--custom--hit--min) + var(--wp--preset--spacing--space-2));
}

.fluentform .ff-upload-filename {
  min-width: 0;
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--small);
  color: var(--wp--preset--color--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fluentform .ff-upload-filesize {
  font-family: var(--wp--preset--font-family--data);
  font-size: var(--wp--preset--font-size--fs-micro);
  line-height: var(--wp--custom--line-height--micro);
  color: var(--wp--preset--color--text-muted);
}

.fluentform .ff-upload-progress-inline-text {
  font-family: var(--wp--preset--font-family--data);
  font-size: var(--wp--preset--font-size--fs-micro);
  color: var(--wp--preset--color--text-muted);
}

.fluentform .ff-el-progress {
  width: 100%;
  height: 2px;
  background: var(--wp--preset--color--surface-sunken);
}

.fluentform .ff-el-progress-bar {
  height: 100%;
  background: var(--wp--preset--color--accent);
  transition: width var(--wp--custom--motion--expand) var(--wp--custom--motion--ease);
}

.fluentform .ff-upload-preview.ff_uploading_complete .ff-el-progress,
.fluentform .ff-upload-preview.ff_uploading_complete .ff-upload-progress-inline-text { display: none; }

.fluentform .ff-upload-error {
  color: var(--wp--preset--color--error) !important;
  font-size: var(--wp--preset--font-size--fs-micro);
}
.fluentform .ff-upload-error:empty { display: none; }

.fluentform .ff-upload-remove {
  position: absolute;
  top: 50%;
  right: var(--wp--preset--spacing--space-2);
  transform: translateY(-50%);
  width: var(--wp--custom--hit--min);
  height: var(--wp--custom--hit--min);
  font-size: 0;              /* chowa znak × z renderera */
  color: var(--wp--preset--color--text-muted);
  cursor: pointer;
  border-radius: var(--wp--custom--radius);
  transition: color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease),
              background var(--wp--custom--motion--hover) var(--wp--custom--motion--ease);
}

.fluentform .ff-upload-remove::before,
.fluentform .ff-upload-remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  background: currentColor;
}

.fluentform .ff-upload-remove::before { transform: translate(-50%, -50%) rotate(45deg); }
.fluentform .ff-upload-remove::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.fluentform .ff-upload-remove:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
  outline-offset: calc(-1 * var(--wp--custom--focus--offset));
  color: var(--wp--preset--color--accent);
}

.fluentform .ff-upload-remove:hover {
  color: var(--wp--preset--color--error);
  background: var(--wp--preset--color--surface);
}

/* ==========================================================================
   8. KOMUNIKAT PO WYSŁANIU
   ========================================================================== */

.fluentform .ff-message-success,
.ff-message-success {
  padding: var(--wp--preset--spacing--space-6);
  background: var(--wp--preset--color--accent-soft);
  border-left: 3px solid var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--fs-lead);
  line-height: var(--wp--custom--line-height--lead);
  color: var(--wp--preset--color--text);
}

/* Błąd całego zgłoszenia (np. nieudana wysyłka po stronie serwera) —
   wtyczka wstawia go pod formularzem, poza `.fluentform form`.            */
.ff-errors-in-stack:not(:empty) {
  margin-top: var(--wp--preset--spacing--space-5);
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--small);
  color: var(--wp--preset--color--error);
}

/* ==========================================================================
   9. RUCH
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fluentform *,
  .fluentform *::before,
  .fluentform *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}