/* ============================================================
   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: 700;
  font-size: 1rem;
  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: 1rem; 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: 1rem; color: var(--wp--preset--color--text, #2c2a2d); cursor: pointer; }
/* Auswahl als Knöpfe (ff_list_buttons): Fluent setzt den Text 14 px — Mindestschrift 16 px (SSA-73). */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span { font-size: 1rem; }

/* 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: 700; 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: 1rem; 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; }
/* Schrittbeschriftungen nur an Wortgrenzen umbrechen (SSA-73). Vom Core-Block „Spalte" erben sie
   word-break: break-word; damit zählt die Tabellenzelle ein Wort nicht als Mindestbreite, und bei 320 px
   brach „Dein Anliegen" mitten im Wort („Anliege / n"). Keine automatische Trennung: Chromium trennte
   hier falsch („Anlieg-en", „weit-erer"). */
.fluentform .ff-step-titles li { overflow-wrap: normal; word-break: normal; }
/* Mindestschrift 16 px (SSA-73): Fluent setzt Schrittbeschriftung 12 px und Schrittnummer 10 px in
   einem 20-px-Kästchen. Kästchen auf 28 px, die Verbindungslinie (top: 9 px bei 20 px) wandert mit
   auf die neue Mitte (13 px). */
.fluentform .ff-step-titles li { font-size: 1rem; }
.fluentform .ff-step-titles li::before { width: 28px; line-height: 28px; font-size: 1rem; }
.fluentform .ff-step-titles li::after { top: 13px; }
/* Innenabstand der Schritte 4 statt 10 px: Bei 320 px ragte „Anliegen" 8 px aus seiner Spalte, und
   „Noch ein weiterer Punkt" stand in vier Zeilen. Erster und letzter Schritt behalten Fluents 0 px
   am Rand (höhere Spezifität von :first-child/:last-child). */
.fluentform .ff-step-titles li { padding-left: .25rem; padding-right: .25rem; }
/* Das allein reichte bei 320 px nicht: Jede Spalte war 71 px breit, „Anliegen" (70 px) ragte weiter
   2 px hinaus. Bis 374 px hat die Karte mit dem Formular deshalb 1rem statt 2rem Innenabstand
   (.ssa-card), die Spalten werden 82 px breit. Nicht über negative Außenabstände der Leiste: Fluents
   .ff-step-container hat overflow: hidden (für den Wechsel der Schritte) und schnitt sie ab. */
.ssa-card:has(.fluentform) { padding-inline: 1rem; }
@media (min-width: 375px) {
  .ssa-card:has(.fluentform) { padding-inline: 2rem; }
}
/* Farben der Schrittleiste aus den Theme-Token statt Fluents festen Werten (#333 auf der Karte,
   dunkel 1,11:1; aktiver Schritt #007bff, hell 3,97:1, dunkel 3,53:1; Linie schwarz). Inaktiv muted
   (hell 5,37:1, dunkel 6,27:1 gegen card), aktiv und erledigt brand-text (6,37:1 bzw. 5,37:1),
   Nummernkästchen als Fläche brand mit on-brand (6,37:1 bzw. 5,01:1). */
.fluentform .ff-step-titles li { color: var(--wp--preset--color--muted, #6b6a6d); }
.fluentform .ff-step-titles li::before {
  background: var(--wp--preset--color--card, #fff);
  border-color: var(--wp--preset--color--muted, #6b6a6d);
  color: var(--wp--preset--color--muted, #6b6a6d);
}
.fluentform .ff-step-titles li::after { background: var(--wp--preset--color--border, #e2ded7); }
.fluentform .ff-step-titles li.ff_active,
.fluentform .ff-step-titles li.ff_completed { color: var(--wp--preset--color--brand-text, #3e6478); }
.fluentform .ff-step-titles li.ff_active::before,
.fluentform .ff-step-titles li.ff_completed::before {
  background: var(--wp--preset--color--brand, #3e6478);
  border-color: var(--wp--preset--color--brand, #3e6478);
  color: var(--wp--preset--color--on-brand, #fff);
}
.fluentform .ff-step-titles li.ff_active::after,
.fluentform .ff-step-titles li.ff_completed::after { background: var(--wp--preset--color--brand, #3e6478); }
/* Dieselbe Grenze für Fluents Reiter-Leisten (14 px, Nummer links 13 px). Das Kontaktformular nutzt
   sie heute nicht; die Regeln sind deshalb nur aus Fluents Stylesheet abgeleitet, nicht beobachtet. */
.fluentform .ff-step-header--tabs .ff-step-titles li,
.fluentform .ff-step-header--tabs-left .ff-step-titles li,
.fluentform .ff-step-header--tabs-left .ff-step-titles li::before { font-size: 1rem; }
.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: 700; 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: 1rem; 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); }