/*
 * Goldbaum – WPForms-Anpassung
 * Bringt das von WPForms erzeugte Formular auf das Design des Prototyps.
 * Wird nur auf der Kontaktseite geladen (template-kontakt.php).
 *
 * Empfohlene WPForms-Einstellung:
 * WPForms → Einstellungen → Allgemein → Formular-Styling: "Nur Basis-Styling"
 * (dann greifen diese Regeln am saubersten).
 */

/* Außencontainer: Abstände von WPForms zurücksetzen */
.form-card .wpforms-container,
.form-card .wpforms-container-full {
  margin: 0 !important;
  padding: 0 !important;
}

.form-card .wpforms-form {
  font-family: var(--font-body);
}

/* Feld-Abstände wie im Prototyp */
.form-card .wpforms-field {
  padding: 0 !important;
  margin: 0 0 0 0 !important;
}

/* Beschriftungen: Mono, Versalien, gesperrt */
.form-card .wpforms-field-label,
.form-card .wpforms-form label.wpforms-field-label {
  font-family: var(--font-mono) !important;
  font-size: .72rem !important;
  font-weight: 400 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink) !important;
  display: block;
  margin: 1.1rem 0 .4rem !important;
}

.form-card .wpforms-field:first-child .wpforms-field-label {
  margin-top: 0 !important;
}

/* Pflichtfeld-Sternchen dezent in Blau */
.form-card .wpforms-required-label {
  color: var(--blue) !important;
}

/* Eingabefelder */
.form-card .wpforms-form input[type=text],
.form-card .wpforms-form input[type=email],
.form-card .wpforms-form input[type=tel],
.form-card .wpforms-form input[type=url],
.form-card .wpforms-form input[type=number],
.form-card .wpforms-form select,
.form-card .wpforms-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.5;
  padding: 14px 16px !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}

.form-card .wpforms-form input:focus,
.form-card .wpforms-form select:focus,
.form-card .wpforms-form textarea:focus {
  border-color: var(--blue) !important;
  outline: 2px solid rgba(34, 77, 184, .18) !important;
}

.form-card .wpforms-form textarea {
  min-height: 140px !important;
  resize: vertical;
}

/* Platzhaltertext */
.form-card .wpforms-form ::placeholder {
  color: var(--ink-soft);
  opacity: .75;
}

/* Feld-Beschreibung unter einem Feld */
.form-card .wpforms-field-description {
  font-size: .82rem !important;
  color: var(--ink-soft) !important;
  margin-top: .4rem !important;
}

/* Einverständnis-Checkbox (Datenschutz) */
.form-card .wpforms-field-checkbox ul,
.form-card .wpforms-field-radio ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-card .wpforms-field-checkbox li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 .4rem;
}

.form-card .wpforms-field-checkbox input[type=checkbox] {
  width: 18px !important;
  height: 18px !important;
  margin: 3px 0 0 !important;
  accent-color: var(--blue);
}

.form-card .wpforms-field-checkbox li label,
.form-card .wpforms-field-radio li label {
  font-family: var(--font-body) !important;
  font-size: .85rem !important;
  line-height: 1.55;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-soft) !important;
  margin: 0 !important;
  display: inline !important;
}

.form-card .wpforms-field-checkbox li label a {
  color: var(--blue);
}

/* Absende-Button im Gold-CTA-Stil */
.form-card .wpforms-submit-container {
  padding: 0 !important;
  margin-top: 1.4rem;
}

.form-card .wpforms-form button[type=submit],
.form-card .wpforms-form button.wpforms-submit {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 16px 28px !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 0 rgba(17, 28, 56, .18) !important;
  transition: transform .15s ease, background .15s ease;
  cursor: pointer;
  text-transform: none;
}

.form-card .wpforms-form button[type=submit]:hover {
  background: var(--gold-hover) !important;
  transform: translateY(-2px);
}

/* Lade-Zustand nach dem Klick */
.form-card .wpforms-form button[type=submit][disabled] {
  opacity: .6;
  transform: none;
}

/* Fehlermeldungen */
.form-card .wpforms-form .wpforms-error,
.form-card .wpforms-form label.wpforms-error,
.form-card .wpforms-form em.wpforms-error {
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
  color: #b3261e !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: .35rem !important;
  display: block;
}

.form-card .wpforms-form input.wpforms-error,
.form-card .wpforms-form textarea.wpforms-error {
  border-color: #b3261e !important;
}

/* Bestätigung nach dem Absenden */
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
  background: var(--paper-tech) !important;
  border: 1px solid var(--line-strong) !important;
  border-left: 4px solid var(--blue) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  font-family: var(--font-body);
  padding: 20px 24px !important;
  margin: 0 !important;
}

/* Mobil: Button über die volle Breite */
@media (max-width: 720px) {
  .form-card .wpforms-form button[type=submit] {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
 * Vorschau-Formular (nur sichtbar, solange keine WPForms-ID gesetzt ist)
 * ---------------------------------------------------------------- */
.gb-form-notice {
  background: #fff8e1;
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.55;
  padding: 14px 18px;
  margin-bottom: 1.6rem;
}

.form-card form[onsubmit] input[disabled],
.form-card form[onsubmit] textarea[disabled] {
  background: var(--paper-tech) !important;
  color: var(--ink-soft) !important;
  cursor: not-allowed;
}

.form-card form[onsubmit] button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.form-card form[onsubmit] button[disabled]:hover {
  transform: none;
  background: var(--gold);
}