/* =========================================================
   09 – Formularze Forminator (styl Basic) w wyglądzie Safestar
   Działa dla wszystkich formularzy Forminatora w serwisie.
   Selektory zaczynają się od „body”, żeby wygrywały ze stylami
   Forminatora niezależnie od kolejności wczytania plików.
   ========================================================= */

/* ---------- Pola: tekst, e-mail, telefon, liczba, wiadomość, lista ---------- */
body .forminator-ui .forminator-input,
body .forminator-ui .forminator-textarea,
body .forminator-ui select {
  min-height: 48px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ss-field-border) !important;
  border-radius: var(--ss-radius-xs) !important;
  background-color: #fff !important;
  color: var(--ss-navy) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}
body .forminator-ui .forminator-textarea {
  min-height: 120px !important;
}

/* Natywna lista rozwijana: własna strzałka zamiast systemowej */
body .forminator-ui select {
  -webkit-appearance: none !important;
          appearance: none !important;
  padding-right: 44px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5070' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px 20px !important;
}

/* ---------- Lista w wersji Select2 (gdy Forminator podmienia select) ---------- */
body .forminator-ui .select2-container .select2-selection--single {
  height: 48px !important;
  border: 1px solid var(--ss-field-border) !important;
  border-radius: var(--ss-radius-xs) !important;
  background: #fff !important;
}
body .forminator-ui .select2-container .select2-selection__rendered {
  padding-left: 14px !important;
  line-height: 46px !important;
  color: var(--ss-navy) !important;
  font-size: 15px !important;
}
body .forminator-ui .select2-container .select2-selection__arrow {
  height: 46px !important;
  right: 10px !important;
}
body .forminator-ui .select2-container .select2-selection__arrow,
body .forminator-ui .select2-container .select2-selection__arrow * {
  color: var(--ss-text) !important; /* szara zamiast morskiej */
}

/* Rozwinięta lista opcji. Select2 dokleja ją na końcu strony,
   poza formularzem, dlatego selektory nie zawierają .forminator-ui. */
body .select2-container--open .select2-dropdown,
body .forminator-select-dropdown-container .select2-dropdown {
  margin-top: 4px !important;
  padding: 6px !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-radius-xs) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(14, 22, 51, .10) !important;
  overflow: hidden;
}
body .select2-container--open .select2-dropdown--above {
  margin-top: 0 !important;
  margin-bottom: 4px !important; /* lista otwarta w górę */
}
/* Wewnętrzne kontenery bez własnego tła (Forminator nadaje im szary) */
body .select2-container--open .select2-results,
body .select2-container--open .select2-results__options,
body .forminator-select-dropdown-container .select2-results__options {
  background: transparent !important;
}
body .select2-container--open .select2-results > .select2-results__options {
  max-height: 280px !important; /* przewijanie długiej listy */
}
body .select2-container--open .select2-results__option {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ss-navy) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
/* Opcja pod kursorem / wybrana klawiaturą i opcja aktualnie wybrana */
body .select2-container--open .select2-results__option--highlighted,
body .select2-container--open .select2-results__option[aria-selected="true"],
body .select2-container--open .select2-results__option--selected {
  background: var(--ss-lavender) !important;
}
body .select2-container--open .select2-results__option--highlighted {
  color: var(--ss-navy) !important;
}
body .select2-container--open .select2-results__option[aria-selected="true"],
body .select2-container--open .select2-results__option--selected {
  color: var(--ss-accent-dark) !important;
  font-weight: 500 !important;
}

/* ---------- Fokus: fioletowa ramka na wszystkich typach pól ---------- */
body .forminator-ui .forminator-input:focus,
body .forminator-ui .forminator-textarea:focus,
body .forminator-ui select:focus,
body .forminator-ui .select2-container--focus .select2-selection--single,
body .forminator-ui .select2-container--open .select2-selection--single {
  border-color: var(--ss-accent) !important;
  outline: 2px solid var(--ss-focus-ring) !important;
  outline-offset: 0;
}

/* ---------- Teksty pomocnicze ---------- */
body .forminator-ui ::placeholder {
  color: var(--ss-placeholder) !important;
  opacity: 1;
}
body .forminator-ui .forminator-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ss-navy) !important;
}
body .forminator-ui .forminator-required {
  color: var(--ss-accent-dark) !important; /* fiolet zamiast czerwieni */
}

/* ---------- Zgoda RODO: mniejszy tekst, checkbox 20 px w kolorze marki ---------- */
body .forminator-ui .forminator-checkbox-label,
body .forminator-ui .forminator-checkbox__label {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ss-text) !important;
}
body .forminator-ui input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--ss-accent-dark);
}

/* ---------- Komunikaty: błąd pola i potwierdzenie wysyłki ---------- */
body .forminator-ui .forminator-error-message {
  margin-top: 6px !important;
  color: var(--ss-error) !important;
  font-size: 13px !important;
}
body .forminator-ui .forminator-response-message.forminator-success {
  padding: 16px 20px !important;
  border-radius: var(--ss-radius-xs) !important;
  background: var(--ss-lavender) !important;
  color: var(--ss-navy) !important;
}
