/* ============================================================
   Forminator na ciemnym tle Audi — §10 handoffu.
   Prefiks „html body" + !important przebija specyficzność
   #forminator-module-<id>. Kolory wyłącznie z tokenów.
   ============================================================ */

/* Etykiety pól */
html body .forminator-ui.forminator-custom-form .forminator-label {
  color: var(--brand-silver) !important;
  font-family: var(--wp--preset--font-family--brand) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  margin-bottom: 8px !important;
}

/* Pola: przezroczyste, podkreślenie jak na wzorcu */
html body .forminator-ui.forminator-custom-form .forminator-input,
html body .forminator-ui.forminator-custom-form textarea.forminator-textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  color: var(--brand-silver) !important;
  padding: 10px 0 !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
html body .forminator-ui.forminator-custom-form .forminator-input:focus,
html body .forminator-ui.forminator-custom-form textarea.forminator-textarea:focus {
  border-bottom-color: var(--brand-base) !important;
  outline: none !important;
}
html body .forminator-ui.forminator-custom-form .forminator-input::placeholder,
html body .forminator-ui.forminator-custom-form textarea.forminator-textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Checkboxy zgód — tekst na granacie (drobny druk, ciasna interlinia jak na makuratserwis.pl) */
html body .forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-label,
html body .forminator-ui.forminator-custom-form .forminator-checkbox__label,
html body .forminator-ui.forminator-custom-form .forminator-consent__label {
  color: var(--brand-silver) !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

/* Etykieta pola checkbox (np. „i wyrażam zgodę na kontakt…") — drobna, nie jak label inputu */
html body .forminator-ui.forminator-custom-form .forminator-field--checkbox .forminator-label {
  color: var(--brand-silver) !important;
  font-size: 0.75rem !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  margin-bottom: 6px !important;
}

/* Ciaśniejsze odstępy między checkboxami zgód */
html body .forminator-ui.forminator-custom-form .forminator-field--checkbox .forminator-checkbox {
  margin: 0 0 12px !important;
}
html body .forminator-ui.forminator-custom-form .forminator-checkbox input + span[aria-hidden] {
  width: 16px !important;
  height: 16px !important;
  /* Forminator daje flex-basis:20px, które w flexie wygrywa z width → prostokąt 20×16.
     flex-basis 16px przywraca kwadrat. */
  flex: 0 0 16px !important;
}
html body .forminator-ui.forminator-custom-form .forminator-checkbox input + span[aria-hidden] {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
html body .forminator-ui.forminator-custom-form .forminator-checkbox input:checked + span[aria-hidden] {
  background: var(--brand-base) !important;
  border-color: var(--brand-base) !important;
}
html body .forminator-ui.forminator-custom-form .forminator-checkbox input:checked + span[aria-hidden] svg path {
  fill: var(--brand-ink) !important;
}

/* Treści HTML w formularzu (info RODO nad zgodami).
   UWAGA: w tej wersji Forminatora pole HTML renderuje się jako goły <p>
   bezpośrednio w .forminator-row (bez .forminator-html/.forminator-field). */
html body .forminator-ui.forminator-custom-form .forminator-html,
html body .forminator-ui.forminator-custom-form .forminator-field-html p,
html body .forminator-ui.forminator-custom-form .forminator-row > p {
  color: var(--brand-silver) !important;
  font-size: 0.6875rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
html body .forminator-ui.forminator-custom-form .forminator-html a,
html body .forminator-ui.forminator-custom-form .forminator-field-html p a,
html body .forminator-ui.forminator-custom-form .forminator-row > p a {
  color: var(--brand-silver) !important;
  text-decoration: underline !important;
}

/* Ciaśniejsze odstępy pionowe bloku zgód: rząd z tekstem RODO podciągnięty
   do pola VIN i przyklejony do checkboxów; rzędy checkboxów blisko siebie. */
html body .forminator-ui.forminator-custom-form .forminator-row:has(> p),
html body .forminator-ui.forminator-custom-form .forminator-row:has(.forminator-field-html) {
  margin-top: 8px !important;
  margin-bottom: 20px !important;
}
html body .forminator-ui.forminator-custom-form .forminator-row:has(.forminator-checkbox) {
  margin-bottom: 16px !important;
}

/* Etykieta pola checkbox („i wyrażam zgodę…") — bez klasy modyfikatora
   w tej wersji, stąd :has() na strukturze pola. */
html body .forminator-ui.forminator-custom-form .forminator-field:has(> .forminator-checkbox) > .forminator-label {
  color: var(--brand-silver) !important;
  font-size: 0.6875rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin: 0 0 10px !important;
}

/* Przycisk „Wyślij" — jasna pigułka jak na wzorcu; odsunięty od bloku zgód */
html body .forminator-ui.forminator-custom-form .forminator-button-submit {
  margin-top: 32px !important;
  background: var(--brand-base) !important;
  color: var(--brand-ink) !important;
  border: 2px solid var(--brand-base) !important;
  border-radius: var(--brand-radius-pill) !important;
  padding: 0 32px !important;
  min-height: 44px !important;
  font-family: var(--wp--preset--font-family--brand) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  transition: background 0.15s ease, color 0.15s ease;
}
html body .forminator-ui.forminator-custom-form .forminator-button-submit:hover {
  background: transparent !important;
  color: var(--brand-base) !important;
}

/* Walidacja — czerwień Audi (jak wzorzec: komunikat + ramka pola) */
html body .forminator-ui.forminator-custom-form .forminator-error-message {
  color: #fff !important;
  background: var(--brand-error) !important;
  padding: 2px 8px !important;
  font-size: 0.75rem !important;
}
html body .forminator-ui.forminator-custom-form .forminator-field--error .forminator-input {
  border-bottom-color: var(--brand-error) !important;
}

/* Komunikat sukcesu */
html body .forminator-ui .forminator-response-message.forminator-success {
  color: var(--brand-base) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 0 !important;
}

/* ============================================================
   Rozwinięta lista „Wybierz usługę" (Forminator używa Select2).
   PUŁAPKA: Select2 dokleja listę bezpośrednio do <body>, POZA
   kontenerem .forminator-ui — dlatego prefiks „html body .forminator-ui"
   z reguł wyżej w ogóle jej nie dotyczy. Bez własnego tła lista
   dziedziczyła przezroczystość i treść strony (etykieta VIN, klauzula
   RODO, checkboxy zgód) prześwitywała spod nazw usług.
   ============================================================ */
html body .select2-container .select2-dropdown {
  background: var(--brand-surface) !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden !important;
}
html body .select2-container--open {
  z-index: 100000 !important;   /* ponad sticky nagłówkiem (96 px) */
}
html body .select2-container .select2-results,
html body .select2-container .select2-results__options {
  background: var(--brand-surface) !important;
}
html body .select2-container .select2-results__options {
  max-height: 320px !important;
}
html body .select2-container .select2-results__option {
  background: transparent !important;
  color: var(--brand-base) !important;
  font-family: var(--wp--preset--font-family--brand) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  padding: 11px 16px !important;
}
html body .select2-container .select2-results__option--highlighted,
html body .select2-container .select2-results__option--highlighted[aria-selected],
html body .select2-container .select2-results__option--selected,
html body .select2-container .select2-results__option[aria-selected="true"] {
  background: var(--brand-surface-top) !important;
  color: var(--brand-base) !important;
}
/* Pole wyszukiwania wewnątrz listy (gdyby Forminator je włączył) */
html body .select2-container .select2-search--dropdown .select2-search__field {
  background: var(--brand-ink) !important;
  border: 1px solid var(--brand-line) !important;
  color: var(--brand-base) !important;
}
/* Zamknięte pole — tekst wybranej opcji i placeholder w kolorach motywu */
html body .forminator-ui .select2-selection__rendered {
  color: var(--brand-silver) !important;
}
html body .forminator-ui .select2-selection__placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ============================================================
   Rytm pionowy + siatka 2-kolumnowa.
   PUŁAPKA: Forminator opiera `display:flex` dla wierszy na klasie
   rozmiaru (`forminator-size--*`) dokładanej JS-em. Bez niej
   `.forminator-row` zostaje `display:block` i pola z cols=6 —
   które MIAŁY stać parami jak we wzorcu (Imię|Nazwisko,
   E-mail|Telefon, Usługa|VIN) — lecą jedno pod drugim, a formularz
   robi się dwa razy dłuższy. Ustawiamy siatkę sami, żeby nie
   zależeć od tamtego skryptu.
   ============================================================ */
html body .forminator-ui.forminator-custom-form .forminator-row {
  margin-bottom: 22px !important;
}

/* ------------------------------------------------------------
   Klauzula RODO — UWAGA: w tej wersji Forminatora renderuje się jako
   BEZKLASOWY <div> wewnątrz `.forminator-field-html > .forminator-field
   .forminator-merge-tags`, a NIE jako `<p>` w `.forminator-row`
   (starsza reguła wyżej celowała w `<p>` i po prostu nic nie łapała —
   stąd biały tekst przy szarych etykietach checkboxów).
   Dlatego kolorujemy całe poddrzewo pola HTML, nie konkretny tag.
   ------------------------------------------------------------ */
html body .forminator-ui.forminator-custom-form .forminator-field-html,
html body .forminator-ui.forminator-custom-form .forminator-field-html *,
html body .forminator-ui.forminator-custom-form .forminator-merge-tags,
html body .forminator-ui.forminator-custom-form .forminator-merge-tags * {
  color: var(--brand-silver) !important;
}
html body .forminator-ui.forminator-custom-form .forminator-field-html,
html body .forminator-ui.forminator-custom-form .forminator-field-html div,
html body .forminator-ui.forminator-custom-form .forminator-field-html p {
  font-size: 0.6875rem !important;
  line-height: 1.55 !important;
}
html body .forminator-ui.forminator-custom-form .forminator-field-html a {
  text-decoration: underline !important;
}
@media (min-width: 783px) {
  html body .forminator-ui.forminator-custom-form .forminator-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 32px !important;
  }
  html body .forminator-ui.forminator-custom-form .forminator-row > .forminator-col-6 {
    flex: 1 1 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
  }
  html body .forminator-ui.forminator-custom-form .forminator-row > .forminator-col-12 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}