/**
 * Fluent Forms — KSM Kontaktformular
 *
 * Radio-Gruppen als Chip/Pill-Buttons (Design: Kontaktseite).
 * Scope: nur .ff-el-form-check-radio — Checkbox (DSGVO) bleibt unberührt.
 *
 * WICHTIG: Chip-Optik sitzt auf dem <span>, nicht auf dem <label>.
 * Fluent Forms setzt position:relative auf Inputs → würde Padding zerstören.
 */

.fluentform {
    --ksm-form-label-color:      rgba(var(--ksm-color-primary-dark), 1);
    --ksm-form-label-chip-gap:   var(--ksm-spacing-lg);
    --ksm-form-chip-border:      rgba(var(--ksm-color-accent), 1);
    --ksm-form-chip-text:        rgba(var(--ksm-color-accent), 1);
    --ksm-form-chip-bg:          rgba(var(--ksm-color-white), 1);
    --ksm-form-chip-active-bg:   rgba(var(--ksm-color-accent), 1);
    --ksm-form-chip-active-text: rgba(var(--ksm-color-white), 1);
    --ksm-form-chip-pad-y:       var(--ksm-spacing-xs);
    --ksm-form-chip-pad-x:       var(--ksm-spacing-md);
    --ksm-form-chip-gap:         var(--ksm-spacing-md);
    --ksm-form-chip-min-height:  calc(var(--ksm-spacing-base) * 3);
    --ksm-form-chip-font-size:    var(--ksm-font-size-xs);
    --ksm-form-placeholder-line-height: var(--ksm-line-height-normal);
}

/* Feld-Labels: dunkelrot (Name, Nachricht, E-Mail, Telefon, Radio — nicht DSGVO) */
.fluentform .ff-el-input--label label {
    color: var(--ksm-form-label-color);
}

/* Pflicht-Stern: Fluent Forms Standard-Klassen, Farbe an CI */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
    color: rgba(var(--ksm-color-accent), 1);
}

/* Eingabefelder: Fluent Forms Default setzt System-UI-Stack (.ff-default .ff-el-form-control) */
.fluentform .ff-el-form-control {
    font-family: var(--ksm-font-regular);
    font-size: var(--ksm-font-size-sm);
}

/* Mehrzeilige Felder: Placeholder übernimmt line-height vom Element (nicht vom ::placeholder) */
.fluentform textarea.ff-el-form-control {
    line-height: var(--ksm-form-placeholder-line-height);
}

/* Placeholder: Pseudo-Element braucht eigene font-*-Angaben (nicht überall vererbbar) */
.fluentform .ff-el-form-control::placeholder,
.fluentform .ff-el-form-control::-webkit-input-placeholder,
.fluentform .ff-el-form-control::-moz-placeholder,
.fluentform .ff-el-form-control:-ms-input-placeholder {
    font-family: var(--ksm-font-regular);
    font-style: normal;
    font-weight: var(--ksm-font-weight-normal);
    line-height: var(--ksm-form-placeholder-line-height);
}

.fluentform .ff-el-form-control::-moz-placeholder {
    opacity: 1;
}

/* Radio-Gruppen: extra Abstand Label → Chips */
.fluentform .ff-el-group:has(.ff-el-form-check-radio) .ff-el-input--label {
    margin-bottom: var(--ksm-form-label-chip-gap);
}

/* Chip-Zeile: Flex + Wrap */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ksm-form-chip-gap);
}

.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check {
    margin: 0;
    padding: 0;
}

/* Label = unsichtbarer Klick-Wrapper, kein Plugin-Spacing */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check-label {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Fluent Forms: position:relative auf Input aus dem Flow nehmen */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check-label .ff-el-form-check-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Chip-Optik auf dem Text-Span */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check-label > span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ksm-form-chip-min-height);
    padding: var(--ksm-form-chip-pad-y) var(--ksm-form-chip-pad-x);
    border: var(--ksm-border-width) solid var(--ksm-form-chip-border);
    border-radius: var(--ksm-border-radius-pill);
    background: var(--ksm-form-chip-bg);
    color: var(--ksm-form-chip-text);
    font-family: var(--ksm-font-italic);
    font-size: var(--ksm-form-chip-font-size);
    font-style: italic;
    font-weight: var(--ksm-font-weight-normal);
    line-height: var(--ksm-line-height-tight);
    text-align: center;
    white-space: nowrap;
    transition:
        background var(--ksm-transition-fast),
        color var(--ksm-transition-fast),
        border-color var(--ksm-transition-fast),
        font-family var(--ksm-transition-fast),
        font-style var(--ksm-transition-fast);
}

/* Aktiv: Bold, gefüllt */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check-label:has(.ff-el-form-check-input:checked) > span,
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff_item_selected .ff-el-form-check-label > span {
    background: var(--ksm-form-chip-active-bg);
    border-color: var(--ksm-form-chip-active-bg);
    color: var(--ksm-form-chip-active-text);
    font-family: var(--ksm-font-bold);
    font-style: normal;
    font-weight: var(--ksm-font-weight-bold);
}

/* Hover (nur unselected) */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check-label:not(:has(.ff-el-form-check-input:checked)):hover > span {
    background: rgba(var(--ksm-color-accent), 0.08);
}

/* Tastatur-Fokus */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible) > span {
    outline: var(--ksm-border-width) solid rgba(var(--ksm-color-secondary), 1);
    outline-offset: calc(var(--ksm-spacing-base) * 0.25);
}

/* Lange Labels dürfen umbrechen (z. B. „Erstmal allgemeine Orientierung“) */
@media (max-width: 480px) {
    .fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check-label > span {
        white-space: normal;
    }
}

/* Submit — Koralle (CI)
   Spezifität > Fluent Forms Inline: form.fluent_form_3 .ff-btn-submit */
.fluentform form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) {
    display: inline-flex;
    align-items: center;
    background-color: rgba(var(--ksm-color-accent), 1);
    border: var(--ksm-border-width) solid rgba(var(--ksm-color-accent), 1);
    border-radius: var(--ksm-border-radius-pill);
    color: rgba(var(--ksm-color-white), 1);
    font-family: var(--ksm-btn-font-family);
    font-size: var(--ksm-btn-font-size);
    font-style: italic;
    font-weight: var(--ksm-font-weight-bold);
    letter-spacing: var(--ksm-btn-letter-spacing);
    text-transform: none;
    line-height: 1;
    padding: var(--ksm-btn-padding-block) var(--ksm-btn-padding-inline);
    opacity: 1;
    transition:
        background-color var(--ksm-transition-fast),
        border-color var(--ksm-transition-fast),
        color var(--ksm-transition-fast);
}

.fluentform form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style):hover,
.fluentform form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style):focus-visible {
    background-color: rgba(var(--ksm-color-white), 1);
    border-color: rgba(var(--ksm-color-accent), 1);
    color: rgba(var(--ksm-color-accent), 1);
    opacity: 1;
    outline: none;
}

.fluentform form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style):focus-visible {
    outline: var(--ksm-border-width) solid rgba(var(--ksm-color-secondary), 1);
    outline-offset: calc(var(--ksm-spacing-base) * 0.25);
}