/* ============================================================
   Fluent Forms Pro — Style-Template „Schulsozialarbeit ASS"
   Für Fluent Forms 6.2.5 + Fluent Forms Pro 6.2.1
   Nutzt die Theme-Preset-Variablen -> Light/Dark automatisch.
   Alles unter .fluentform gescoped (keine Nebenwirkungen).
   ============================================================ */

.fluentform {
  --ff-radius: var(--wp--custom--radius--md, 12px);
  --ff-danger: #b3101d;
  --ff-success: #2f7d5b;
  font-family: var(--wp--preset--font-family--body, inherit);
  color: var(--wp--preset--color--text, #2c2a2d);
}
html[data-theme="dark"] .fluentform { --ff-danger: #ef6d78; --ff-success: #5cbd90; }

/* Branding über die Plugin-eigenen Variablen (Default-Skin .ff-default) — färbt auch die
   Elemente, die wir nicht explizit überschreiben, in einem Rutsch um. */
.fluentform.ff-default {
  --fluentform-primary: var(--wp--preset--color--brand, #3e6478);
  --fluentform-secondary: var(--wp--preset--color--muted, #6b6a6d);
  --fluentform-danger: var(--ff-danger);
  --fluentform-border-color: var(--wp--preset--color--border, #e2ded7);
  --fluentform-border-radius: var(--ff-radius);
}

/* ---- Feldgruppen-Abstand ---- */
.fluentform .ff-el-group { margin-bottom: 1.15rem; }
.fluentform .ff-t-container { gap: 1rem; }

/* ---- Labels ---- */
.fluentform .ff-el-input--label label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--wp--preset--color--ink, #19171a);
  margin-bottom: .4rem;
  display: inline-block;
}
.fluentform .ff-el-is-required.ff-el-input--label label:after,
.fluentform .ff-el-input--label.ff-el-is-required label:after { color: var(--ff-danger); }

/* ---- Eingaben, Textarea, Select ---- */
.fluentform .ff-el-form-control {
  width: 100%;
  min-height: 46px;
  padding: .6rem .85rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wp--preset--color--ink, #19171a);
  background: var(--wp--preset--color--card, #fff);
  border: 1.5px solid var(--wp--preset--color--border, #e2ded7);
  border-radius: var(--ff-radius);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.fluentform textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
.fluentform .ff-el-form-control::placeholder { color: var(--wp--preset--color--muted, #6b6a6d); opacity: 1; }
.fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand, #3e6478);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand, #3e6478) 22%, transparent);
}

/* Select-Pfeil */
.fluentform select.ff-el-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6a6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.4rem;
}

/* ---- Icon-Präfix/Suffix (Fluent-Klasse: .ff_input-group-text) ---- */
.fluentform .ff-el-input--content .ff_input-group-text,
.fluentform .ff-el-input--content .input-group-text {
  border-radius: var(--ff-radius);
  border-color: var(--wp--preset--color--border, #e2ded7);
  background: var(--wp--preset--color--sunken, #eeece7);
  color: var(--wp--preset--color--brand, #3e6478);
}

/* ---- Section-Break / Überschriften ---- */
.fluentform .ff-el-section-break { border: 0; padding: 0; margin: 1.5rem 0 1rem; }
.fluentform .ff-el-section-title,
.fluentform .ff-el-section-break-title {
  font-family: var(--wp--preset--font-family--display, inherit);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--wp--preset--color--ink, #19171a);
  margin: 0 0 .25rem;
}
/* Plugin schreibt die Beschreibung als .ff-section_break_desk (Tippfehler im Plugin) */
.fluentform .ff-section_break_desk,
.fluentform .ff-section_break_desc,
.fluentform .ff-el-help-message { color: var(--wp--preset--color--muted, #6b6a6d); font-size: .85rem; margin-top: .35rem; }

/* ---- Checkbox & Radio ---- */
.fluentform .ff-el-form-check { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.fluentform .ff-el-form-check-input[type="checkbox"],
.fluentform .ff-el-form-check-input[type="radio"] {
  width: 20px; height: 20px; margin: 0; flex: 0 0 20px;
  accent-color: var(--wp--preset--color--brand, #3e6478);
  cursor: pointer;
}
.fluentform .ff-el-form-check-label { font-size: .95rem; color: var(--wp--preset--color--text, #2c2a2d); cursor: pointer; }

/* Fluent „custom" Checkbox/Radio (gestylte Variante) */
.fluentform .ff_item_selectable_pretty .ff-el-form-check-label:before { border-radius: 6px; border-color: var(--wp--preset--color--border, #e2ded7); }
.fluentform .ff_item_selectable_pretty input:checked + .ff-el-form-check-label:before { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); }

/* ---- Submit-Button ---- */
.fluentform .ff-btn-submit,
.fluentform button.ff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.75rem;
  font-family: var(--wp--preset--font-family--body, inherit);
  font-weight: 600; font-size: 1rem;
  color: var(--wp--preset--color--on-brand, #fff) !important;
  background: var(--wp--preset--color--brand, #3e6478) !important;
  border: 0;
  border-radius: var(--ff-radius);
  box-shadow: var(--wp--custom--shadow--brand, 0 10px 28px rgba(62,100,120,.28));
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.fluentform .ff-btn-submit:hover { background: var(--wp--preset--color--brand-strong, #2b4553) !important; }
.fluentform .ff-btn-submit:active { transform: scale(.98); box-shadow: none; }

/* ---- Fehlerzustände ---- */
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--ff-danger); }
.fluentform .ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-danger) 20%, transparent); }
.fluentform .error.text-danger,
.fluentform .error-text,
.fluentform .ff-el-is-error .text-danger { color: var(--ff-danger); font-size: .82rem; margin-top: .3rem; }

/* ---- Erfolgsmeldung (Fluent rendert .ff-message-success) ---- */
.ff-message-success {
  background: color-mix(in srgb, var(--ff-success) 14%, var(--wp--preset--color--card, #fff));
  border: 1px solid var(--ff-success);
  border-radius: var(--wp--custom--radius--md, 12px);
  color: var(--wp--preset--color--ink, #19171a);
  padding: 1rem 1.25rem;
}

/* ---- Fehler-Sammelbox oben im Formular (.ff-errors-in-stack) ---- */
.fluentform .ff-errors-in-stack {
  background: color-mix(in srgb, var(--ff-danger) 12%, var(--wp--preset--color--card, #fff));
  border: 1px solid var(--ff-danger);
  border-radius: var(--wp--custom--radius--md, 12px);
  color: var(--wp--preset--color--ink, #19171a);
  padding: .85rem 1.1rem;
  margin-top: 1rem;
}

/* ---- Mehrschritt-Formulare (Pro) — echte Klassen: .ff-step-titles / .ff-step-title-icon ---- */
.fluentform .ff-step-header .ff-el-progress { background: var(--wp--preset--color--sunken, #eeece7); border-radius: var(--wp--custom--radius--pill, 999px); }
.fluentform .ff-el-progress-bar { background: var(--wp--preset--color--brand, #3e6478); color: var(--wp--preset--color--on-brand, #fff); }
.fluentform .ff-step-titles .ff-step-title.active .ff-step-title-icon,
.fluentform .ff-step-titles li.active .ff-step-title-icon,
.fluentform .ff-step-titles li.ff_active .ff-step-title-icon { background: var(--wp--preset--color--brand, #3e6478); border-color: var(--wp--preset--color--brand, #3e6478); color: #fff; }
.fluentform .step-nav button,
.fluentform .step-nav .ff-btn-next,
.fluentform .step-nav .ff-btn-prev {
  border-radius: var(--ff-radius);
  border: 1.5px solid var(--wp--preset--color--brand, #3e6478);
  background: transparent;
  color: var(--wp--preset--color--brand, #3e6478);
  padding: .5rem 1.25rem; font-weight: 600; cursor: pointer;
}
.fluentform .step-nav button:hover { background: var(--wp--preset--color--brand-subtle, #eef3f5); }

/* ---- GDPR / Terms (Fluent-Klasse: .ff_gdpr_field) ---- */
.fluentform .ff_gdpr_field .ff-el-form-check-label,
.fluentform .ff-el-group.ff_gdpr .ff-el-form-check-label { font-size: .85rem; color: var(--wp--preset--color--muted, #6b6a6d); }

/* ---- Range / Net Promoter / Rating ---- */
.fluentform .ff_ratings .fluent-icon { color: var(--wp--preset--color--accent, #ea9a00); }
.fluentform input[type="range"] { accent-color: var(--wp--preset--color--brand, #3e6478); }