/* ==========================================================================
   Most między znacznikami Contact Form 7 a systemem projektowym motywu.

   CF7 opakowuje każde pole w dodatkowe <span>-y i ma własne klasy stanu.
   Zamiast przepisywać wygląd formularza pod CF7, sprowadzamy jego strukturę
   do tej, którą styles.css już zna: .field, .consent-row, .err, .btn.

   Ładowane tylko, gdy CF7 jest aktywne (inc/assets.php).
   ========================================================================== */

/* CF7 renderuje pola z atrybutami `size="40"` i `cols="40"`. Nadają one polu
   wewnętrzną szerokość ok. 40 znaków, która nie jest szerokością wyliczoną,
   tylko dolną granicą: element siatki nie może zejść poniżej niej i rozpycha
   kolumnę. Na wąskich ekranach objawia się to przewijaniem strony w bok.
   `min-width: 0` zdejmuje tę granicę; `width: 100%` ze styles.css i tak
   ustala właściwą szerokość. */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select { min-width: 0; }

/* Sam formularz też jest elementem siatki — bez tego kolumna dostosowuje się
   do jego zawartości zamiast do dostępnego miejsca. */
.wpcf7,
.wpcf7 form { min-width: 0; }

/* Opakowania CF7 znikają z układu — pole ma wyglądać jak zwykły input w .field. */
.field .wpcf7-form-control-wrap,
.consent .wpcf7-form-control-wrap,
.consent .wpcf7-acceptance,
.consent .wpcf7-list-item,
.consent .wpcf7-list-item-label {
  display: contents;
}

/* CF7 renderuje zgodę jako <label><input><span>. To jest nasz .consent-row. */
.consent .wpcf7-list-item > label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}
.consent .wpcf7-list-item > label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Stan zaznaczenia: w markupie CF7 między inputem a .consent-box stoi
   jeszcze .wpcf7-list-item-label, więc sąsiedztwo trzeba przeadresować. */
.consent .wpcf7-list-item > label:hover .consent-box { border-color: var(--ink-3); }
.consent input[type=checkbox]:checked ~ .wpcf7-list-item-label .consent-box,
.consent input[type=checkbox]:checked + .consent-box {
  background: var(--signal-deep);
  border-color: var(--signal-deep);
}
.consent input[type=checkbox]:checked ~ .wpcf7-list-item-label .consent-box::after,
.consent input[type=checkbox]:checked + .consent-box::after { opacity: 1; }
.consent input[type=checkbox]:focus-visible ~ .wpcf7-list-item-label .consent-box,
.consent input[type=checkbox]:focus-visible + .consent-box {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* Komunikat błędu przy polu — ten sam wygląd co .err w motywie. */
.wpcf7-not-valid-tip {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--clay);
}
.wpcf7-not-valid-tip::before {
  content: '●';
  font-size: 7px;
  line-height: 1.9;
}
.consent .wpcf7-not-valid-tip { padding-left: 31px; }

/* Zbiorczy komunikat pod formularzem. Sukces mamy własny (karta „Zgłoszenie
   przyjęte"), więc pokazujemy tylko to, co niesie nową informację. */
.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--white);
}
.wpcf7 form.sent .wpcf7-response-output { display: none; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: rgba(160, 64, 47, .35);
  color: var(--clay);
}

/* Przycisk wysyłki: CF7 renderuje <input type="submit">, klasy .btn dokładamy
   w tagu formularza, więc wystarczy zdjąć domyślny wygląd pola formularza. */
.wpcf7 button[type=submit].btn,
.wpcf7 input[type=submit].btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
.wpcf7 button[type=submit].btn:not(.btn-block),
.wpcf7 input[type=submit].btn:not(.btn-block) { width: auto; }

/* Na wąskich ekranach przycisk idzie na pełną szerokość — reszta (zawijanie
   tekstu i rosnąca wysokość) siedzi w styles.css przy .btn-lg. */
@media (max-width: 560px) {
  .wpcf7 button[type=submit].btn,
  .wpcf7 input[type=submit].btn { width: 100%; }
}

/* Kręciołek CF7 stoi obok przycisku, ale nie zajmuje miejsca w układzie.
   Przy przycisku na całą szerokość (.btn-block) nie mieści się w tej samej linii
   i spadałby pod spód, dokładając kilkadziesiąt pikseli pustej przestrzeni —
   mimo że jest niewidoczny poza momentem wysyłki. */
.remedy-submit { position: relative; }
.remedy-submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  margin: 0;
}

/* Ekranowy komunikat dla czytników — zostaje dostępny, znika z układu. */
.screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}