/* ============================================================
   URHEBER-IMPULS — wpforms-override.css
   CSS-Override für WPForms Lite
   Einbindung via Code Snippets Free in WordPress
   Ziel: WPForms-Widget ins Designsystem einpassen
   ============================================================ */

/* ─── Container ────────────────────────────────────────────── */
.wpforms-container {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ─── Eingabefelder ────────────────────────────────────────── */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field input[type="url"],
.wpforms-field select,
.wpforms-field textarea {
  border: 1.5px solid #D8CEC0 !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #1F2522 !important;
  background: #FFFFFF !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  width: 100% !important;
  line-height: 1.5 !important;
}

.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
  outline: none !important;
  border-color: #C8A24A !important;
  box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.18) !important;
}

/* ─── Labels ───────────────────────────────────────────────── */
.wpforms-field-label,
.wpforms-field label {
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #123C2F !important;
  margin-bottom: 0.375rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  display: block !important;
}

/* ─── Sublabels (Vor- und Nachname) ────────────────────────── */
.wpforms-field-label-inline {
  font-size: 0.8125rem !important;
  color: #5F625C !important;
}

/* ─── Pflichtfeld-Marker ───────────────────────────────────── */
.wpforms-required-label {
  color: #8C3B2F !important;
}

/* ─── Textarea ─────────────────────────────────────────────── */
.wpforms-field textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* ─── Select ───────────────────────────────────────────────── */
.wpforms-field select {
  appearance: auto !important;
}

/* ─── Checkboxen ───────────────────────────────────────────── */
.wpforms-field-checkbox input[type="checkbox"],
.wpforms-field-gdpr-checkbox input[type="checkbox"] {
  accent-color: #123C2F !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  cursor: pointer !important;
}

.wpforms-field-checkbox label,
.wpforms-field-gdpr-checkbox label {
  font-size: 0.9375rem !important;
  color: #1F2522 !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
}

/* ─── Submit-Button ────────────────────────────────────────── */
.wpforms-submit,
.wpforms-submit-container button[type="submit"] {
  background-color: #123C2F !important;
  color: #FAF7F1 !important;
  border: none !important;
  border-radius: 0.875rem !important;
  padding: 0.875rem 1.625rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background-color 0.18s, box-shadow 0.18s !important;
}

.wpforms-submit:hover,
.wpforms-submit-container button[type="submit"]:hover {
  background-color: #0d2e24 !important;
  box-shadow: 0 4px 12px rgba(18,60,47,0.2) !important;
}

.wpforms-submit:focus-visible {
  outline: 2px solid #C8A24A !important;
  outline-offset: 3px !important;
}

/* ─── Abstand zwischen Feldern ─────────────────────────────── */
.wpforms-field {
  margin-bottom: 1.25rem !important;
}

/* ─── Fehlermeldungen ──────────────────────────────────────── */
.wpforms-error,
.wpforms-field .wpforms-error {
  color: #8C3B2F !important;
  font-size: 0.875rem !important;
  margin-top: 0.25rem !important;
  display: block !important;
}

.wpforms-field input.wpforms-error,
.wpforms-field textarea.wpforms-error,
.wpforms-field select.wpforms-error {
  border-color: #8C3B2F !important;
  box-shadow: 0 0 0 3px rgba(140, 59, 47, 0.12) !important;
}

/* ─── Bestätigungsmeldung ──────────────────────────────────── */
.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
  background: #DDE8DF !important;
  border: 1px solid #DED3C6 !important;
  border-radius: 0.875rem !important;
  padding: 1.75rem 2rem !important;
  color: #123C2F !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1rem !important;
}

/* ─── Mehrspaltige Felder (wpforms-one-half) ───────────────── */
.wpforms-field-row .wpforms-one-half {
  gap: 1rem !important;
}

/* ─── Hinweistext unter Feldern ────────────────────────────── */
.wpforms-field-description {
  font-size: 0.8125rem !important;
  color: #5F625C !important;
  margin-top: 0.25rem !important;
}

/* ─── Abschnitt-Trenner / Section-Divider ──────────────────── */
.wpforms-field-divider {
  border-color: #DED3C6 !important;
  margin-block: 1.5rem !important;
}

.wpforms-field-html p {
  font-size: 0.9375rem !important;
  color: #5F625C !important;
  line-height: 1.65 !important;
}

/* ============================================================
   QA Mobile Overrides - WPForms Anfrage
   Choice-Felder sauber ausrichten und Formularabstaende verdichten.
   ============================================================ */

@media (max-width: 640px) {
  body.elementor-page .wpforms-container .wpforms-field-radio ul,
  body.elementor-page .wpforms-container .wpforms-field-checkbox ul {
    display: grid !important;
    gap: 0.875rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body.elementor-page .wpforms-container .wpforms-field-radio li,
  body.elementor-page .wpforms-container .wpforms-field-checkbox li {
    display: grid !important;
    grid-template-columns: 1.25rem minmax(0, 1fr) !important;
    column-gap: 0.75rem !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.elementor-page .wpforms-container .wpforms-field-radio input[type="radio"],
  body.elementor-page .wpforms-container .wpforms-field-checkbox input[type="checkbox"] {
    grid-column: 1 !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    min-width: 1.05rem !important;
    margin: 0.25rem 0 0 0 !important;
    padding: 0 !important;
  }

  body.elementor-page .wpforms-container .wpforms-field-radio label.wpforms-field-label-inline,
  body.elementor-page .wpforms-container .wpforms-field-checkbox label.wpforms-field-label-inline {
    grid-column: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #123C2F !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body.elementor-page .wpforms-container .wpforms-field-radio,
  body.elementor-page .wpforms-container .wpforms-field-checkbox {
    margin-bottom: 1.4rem !important;
  }
}

body.elementor-page #wpforms-16 .wpforms-field {
  margin-bottom: 0.75rem !important;
  padding-bottom: 0 !important;
}

body.elementor-page #wpforms-16 .wpforms-field-label {
  margin-bottom: 0.35rem !important;
}

body.elementor-page #wpforms-16 .wpforms-field-radio,
body.elementor-page #wpforms-16 .wpforms-field-checkbox {
  margin-bottom: 0.7rem !important;
  padding-bottom: 0 !important;
}

body.elementor-page #wpforms-16 .wpforms-field-radio ul,
body.elementor-page #wpforms-16 .wpforms-field-checkbox ul {
  gap: 0.45rem !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.elementor-page #wpforms-16 .wpforms-field-radio li,
body.elementor-page #wpforms-16 .wpforms-field-checkbox li {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.elementor-page #wpforms-16-field_10-container,
body.elementor-page #wpforms-16-field_11-container,
body.elementor-page #wpforms-16-field_13-container,
body.elementor-page #wpforms-16-field_14-container {
  margin-bottom: 0.6rem !important;
}