/* ============================================================
   Go Form – Frontend Styles
   ============================================================ */

:root {
    /* Brand defaults — Delta Web Solution. These are the DEFAULTS only;
       the per-form Design Configurator still overrides --gf-* at runtime. */
    --gf-primary:    #001E3C;
    --gf-primary-dk: #00152B;
    --gf-primary-lt: #EEF5FD;
    --gf-accent:     #0062C4;
    --gf-success:    #057a55;
    --gf-error:      #c81e1e;
    --gf-border:     #d1d5db;
    --gf-bg:         #f9fafb;
    --gf-text:       #111827;
    --gf-muted:      #6b7280;
    --gf-radius:     10px;
    --gf-shadow:     0 1px 3px rgba(0,0,0,.1);
}

/* ── Container ────────────────────────────────────────────── */

/* Both class names supported */
.go-form,
.ultimate-form {
    /* Typography */
    font-family: var(--gf-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size:   var(--gf-input-size, 15px);
    color:       var(--gf-text, #111827);

    /* Card appearance — comes from design configurator vars.
       !important so Elementor / theme container CSS can't override the form
       background in the live/embedded context (same reason as padding below). */
    background:    var(--gf-bg, #f9fafb) !important;
    /* !important nötig damit Elementor / Theme-CSS das Padding nicht überschreibt */
    padding:       var(--gf-form-pad-v, 30px) var(--gf-form-pad-h, 30px) !important;
    /* 2.9.1 — Form-Wrapper-Radius eigenständig konfigurierbar (form_radius).
       Fallback 12px = bisheriger Hardcode. */
    border-radius: var(--gf-form-radius, 12px);
    box-shadow:    0 4px 24px rgba(0,0,0,.08);
    /* 2.9.1 — solid form-wrapper border (own tokens, width 0 = no border).
       Gradient mode is handled by .gf-form-border-grad below. */
    border: var(--gf-form-border-w, 0px) solid var(--gf-form-border-color, transparent);

    /* Responsive: max-width from design setting, always 100% wide */
    width:      100%;
    max-width:  var(--gf-form-max-width, 1080px);
    margin:     0 auto;
    box-sizing: border-box;
}

/* ──────────── 2.9.1 — Gradient form border ────────────
   Standard "background-clip border-image" trick so the border respects
   the form's border-radius (border-image alone doesn't). Two stacked
   backgrounds: the inner bg fills padding-box, the gradient fills the
   border-box behind it. Width 0 → invisible.
*/
.go-form.go-form.gf-form-border-grad,
.ultimate-form.ultimate-form.gf-form-border-grad {
    /* Doubled wrapper class → (0,3,0) so it beats the later (0,2,0) spec-boost
       block `.go-form.go-form { background: var(--gf-bg) !important }` on the
       cascade tie (same fix the buttons + plain-form reset use). */
    border-color: transparent !important;
    /* 2.9.1 — Mindestbreite 2 px wenn Gradient aktiv: der bg-clip-Trick
       braucht > 0 Border-Width, sonst wird der border-box-Layer voll-
       ständig vom padding-box-Layer überdeckt und der Gradient ist
       unsichtbar. max() lässt User-Setting > 2 px greifen, 0/1 wird
       defensiv auf 2 angehoben. */
    border-width: max( var(--gf-form-border-w, 0px), 2px ) !important;
    background:
        linear-gradient(var(--gf-bg, #f9fafb), var(--gf-bg, #f9fafb)) padding-box,
        linear-gradient(var(--gf-form-border-grad-angle, 135deg), var(--gf-form-border-color, #001E3C), var(--gf-form-border-color-2, #0062C4)) border-box !important;
}
/* 2.9.1 — Brand/Button/Background Gradients direkt am Color-Picker.
   Wrapper-Klassen werden vom Shortcode gesetzt sobald <key>_grad einen
   gültigen Hex hält. Solider Fallback bleibt aktiv, wenn keine Klasse da ist. */
.gf-has-bg-grad.go-form.go-form,
.gf-has-bg-grad.ultimate-form.ultimate-form {
    /* (0,3,0) to beat the later (0,2,0) spec-boost solid-bg block on the tie. */
    background: var(--gf-bg-grad, var(--gf-bg, #f9fafb)) !important;
}
/* When the BG gradient AND the border gradient are both on, the plain bg-grad
   `background` above would override the border-grad's two-layer bg-clip trick
   and hide the border. Combine both: the BG gradient fills the padding-box
   layer, the border gradient fills the border-box layer. (0,4,0) wins the tie. */
.gf-has-bg-grad.go-form.go-form.gf-form-border-grad,
.gf-has-bg-grad.ultimate-form.ultimate-form.gf-form-border-grad {
    background:
        var(--gf-bg-grad, var(--gf-bg, #f9fafb)) padding-box,
        linear-gradient(var(--gf-form-border-grad-angle, 135deg), var(--gf-form-border-color, #001E3C), var(--gf-form-border-color-2, #0062C4)) border-box !important;
}
/* Buttons: dedizierter Button-Gradient (gf-has-btn-grad) hat Vorrang vor
   Brand-Gradient (gf-has-primary-grad); beides überschreibt die solide
   background-color, die weiter unten in den Button-Regeln gesetzt wird. */
/* The real markup renders type="button" with .gf-btn-next / .gf-btn-submit —
   keep the legacy selectors for BC but target the actual classes too, or the
   gradient never reaches the buttons. (.gf-btn-prev stays solid by design.)
   Specificity: the wrapper class is doubled onto .ultimate-form/.go-form
   (0,3,0) so these rules beat the LATER solid-button block
   `.ultimate-form .gf-btn-next { background: var(--gf-btn-primary) !important }`
   (0,2,0) — equal specificity + !important would lose on source order. */
.gf-has-primary-grad .gf-btn-primary,
.ultimate-form.gf-has-primary-grad .gf-btn-next,
.go-form.gf-has-primary-grad .gf-btn-next,
.ultimate-form.gf-has-primary-grad .gf-btn-submit,
.go-form.gf-has-primary-grad .gf-btn-submit,
.gf-has-primary-grad button[type="submit"] {
    background: var(--gf-primary-grad, var(--gf-primary, #001E3C)) !important;
}
.gf-has-btn-grad .gf-btn-primary,
.ultimate-form.gf-has-btn-grad .gf-btn-next,
.go-form.gf-has-btn-grad .gf-btn-next,
.ultimate-form.gf-has-btn-grad .gf-btn-submit,
.go-form.gf-has-btn-grad .gf-btn-submit,
.gf-has-btn-grad button[type="submit"] {
    background: var(--gf-btn-primary-grad, var(--gf-btn-primary, var(--gf-primary, #001E3C))) !important;
}
/* 2.9.4 — optional gradient on the remaining large surfaces (field / info box /
   back button). Uses background-IMAGE so it layers over the solid background-color
   without clobbering borders, the select arrow, or other backgrounds. The wrapper
   class is only present when the user configured a gradient → naturally dormant. */
.gf-has-field-bg-grad .gf-input,
.gf-has-field-bg-grad .gf-textarea { background-image: var(--gf-field-bg-grad); }
.gf-has-info-bg-grad .gf-info-box { background-image: var(--gf-info-bg-grad); }
.ultimate-form.gf-has-back-bg-grad .gf-btn-prev,
.go-form.gf-has-back-bg-grad .gf-btn-prev { background-image: var(--gf-back-bg-grad) !important; }
/* Hover bleibt solid (Primary-Dark), damit der visuelle Hover-State
   weiter funktioniert — Gradients lassen sich nicht sauber animieren. */
/* Step-Gradient: bestehende --gf-step-grad-angle-Variable in die Gradients
   einfließen lassen, damit der User-Winkel greift. */
.gf-progress--grad.gf-progress--dots .gf-progress-node.is-active .gf-progress-num,
.gf-progress--grad.gf-progress--arrows .gf-progress-node.is-active,
.gf-progress--grad.gf-progress--segments .gf-progress-segment.is-done {
    background: linear-gradient(var(--gf-step-grad-angle, 135deg), var(--gf-step-primary, #001E3C), var(--gf-step-accent, #0062C4)) !important;
}

/* ──────────── 2.9.1 — Step indicator owns its colours ────────────
   Inside .gf-progress, re-alias the primary/accent tokens to the step
   tokens. Every variant rule (gf-progress--bar/dots/arrows/ring/segments)
   already uses var(--gf-primary)/var(--gf-accent), so no per-variant
   changes needed — the indicator now follows step_color_primary /
   step_color_accent. When those are empty, the inline-style fallback in
   ultimate_form_design_vars() copies the global Primary in.
   The gradient-toggle is purely visual: when active, the user sees a
   primary→accent gradient on bar/segments/ring/arrows. */
.gf-progress {
    --gf-primary: var(--gf-step-primary, #001E3C);
    --gf-accent:  var(--gf-step-accent,  #0062C4);
}
/* 2.9.1 — Bar-Fill Gradient (90deg, immer horizontal). Die übrigen
   Varianten (dots/arrows/segments) werden weiter oben mit
   var(--gf-step-grad-angle, 135deg) gerendert; eine zweite Regel hier
   mit hardcodedem 135deg überschrieb sonst den User-Winkel — entfernt. */
.gf-progress--grad .gf-progress-fill {
    background: linear-gradient(90deg, var(--gf-step-primary, #001E3C), var(--gf-step-accent, #0062C4)) !important;
}
/* 2.9.1 — segments .is-active fehlte vorher (nur .is-done abgedeckt).
   Aktiver Segment-Slot blieb solid statt Gradient. */
.gf-progress--grad.gf-progress--segments .gf-progress-segment.is-active {
    background: linear-gradient(var(--gf-step-grad-angle, 135deg), var(--gf-step-primary, #001E3C), var(--gf-step-accent, #0062C4)) !important;
}
/* 2.9.1 — Ring variant gradient stroke: the SVG defs in the
   shortcode use id="gf-ring-<form-id>" (per-instance, unique).
   We can't target that from CSS (the id is dynamic), but the
   shortcode already emits stroke="url(#gf-ring-<id>)" inline on
   the ring-fill <circle>, so no CSS rule is needed — the inline
   attribute wins. An earlier rule pointed at a non-existent id
   "gf-step-grad", which made Firefox/Chrome silently fall back
   to currentColor. The rule is removed to avoid that mismatch.
   When step_color_gradient is on, the inline url() already paints
   the primary→accent stroke. */

/* ──────────── 2.9.1 — Plain form mode ────────────
   When the user wraps the form in an Elementor / Gutenberg container
   that already provides background, border or padding, the form's own
   card styling (rounded corners, drop shadow, opaque background,
   forced padding) overlaps that wrapper. Result: the wrapper's border
   looks broken at the corners because the form's 12 px radius cuts
   into it. With "Hide form card style" enabled in the Design Editor,
   the wrapper gets .gf-no-card and the entire card chrome is
   neutralised so the parent container takes over verbatim. */
/* Specificity must beat the later (0,2,0) spec-boost block `.go-form.go-form`
   which ALSO uses !important — on a tie the later source wins, so without the
   doubled class the card chrome (bg, radius, shadow, padding) would persist on
   the frontend even with Plain-form on. Doubling the class → (0,3,0) wins. */
.go-form.go-form.gf-no-card,
.ultimate-form.ultimate-form.gf-no-card {
    background:    transparent !important;
    border-radius: 0           !important;
    box-shadow:    none        !important;
    padding:       0           !important;
}
/* 2.9.1 — Plain-form + gradient-border combination: when BOTH toggles
   are on, the gradient-border rule above paints two stacked backgrounds
   that would reintroduce a card look on top of the now-transparent
   Plain-form wrapper. Higher-specificity reset wins so the Plain-form
   intent (transparent, no border-radius) sticks; the gradient simply
   isn't shown because there is no card to paint a border around.
   If the user wants the gradient border, they should turn Plain-form
   off — Plain-form's whole point is to delegate framing to the parent
   container (Elementor, Gutenberg). */
.go-form.go-form.gf-no-card.gf-form-border-grad,
.ultimate-form.ultimate-form.gf-no-card.gf-form-border-grad {
    /* (0,4,0): definitively beats both the doubled border-grad rule (0,3,0)
       and the spec-boost block, and fully neutralises the gradient border
       (incl. the forced 2px border-width) so Plain-form stays frameless. */
    background:    transparent !important;
    border-color:  transparent !important;
    border-width:  0           !important;
}

/* Global font normalization for all form controls */
.go-form input,
.go-form select,
.go-form textarea,
.go-form button,
.ultimate-form input,
.ultimate-form select,
.ultimate-form textarea,
.ultimate-form button {
    font-family: inherit;
    font-size: inherit;
}

/* ── 2-Column layout (Gutenberg block / [ultimate_form columns="2"]) ──
   Reuse the SAME 12-column .gf-fields grid (repeat(12,1fr)) instead of a
   separate 1fr 1fr track — otherwise width-classed fields (span 6/4/8/3, which
   assume 12 tracks) overflow, and un-classed fields (default grid-column:1/-1)
   span the whole row so no 2-column effect appears. In cols-2 mode we just give
   un-classed fields a 6-column (half) default; section-breaks/HTML-blocks render
   as bare .gf-section-break/.gf-html-block (NOT .gf-field) and already span the
   full row, and explicit width classes keep working. */
.go-form.gf-cols-2 .gf-field:not(.gf-w-half):not(.gf-w-third):not(.gf-w-two-thirds):not(.gf-w-quarter):not(.gf-field-info):not(.gf-field-payment):not(.gf-field-divider),
.ultimate-form.gf-cols-2 .gf-field:not(.gf-w-half):not(.gf-w-third):not(.gf-w-two-thirds):not(.gf-w-quarter):not(.gf-field-info):not(.gf-field-payment):not(.gf-field-divider) {
    grid-column: span 6 !important;
}

@media (max-width: 640px) {
    /* Collapse to one column on small screens — every field spans the full row.
       Breakpoint is 640px to ALIGN with the grid-collapse (.gf-fields → 1fr at
       max-width:640px) and every other mobile field rule; a 600px value left a
       601-640px dead band where the (0,8,0) span-6 default still won on a 1-track
       grid (fields rendered narrow). The span-6 default sits OUTSIDE a media
       query, so the collapse selector must MATCH its specificity (mirror the
       EXACT same :not() chain incl. payment + divider → (0,10,0)) or it loses
       the !important tie despite the narrower viewport. LOCKSTEP INVARIANT: the
       :not() chain here MUST equal the desktop default's chain above — guard
       BR1 enforces it. The bare .gf-field lines collapse width-classed +
       payment/divider fields (their own spans are only (0,2,0)). */
    .go-form.gf-cols-2 .gf-field:not(.gf-w-half):not(.gf-w-third):not(.gf-w-two-thirds):not(.gf-w-quarter):not(.gf-field-info):not(.gf-field-payment):not(.gf-field-divider),
    .ultimate-form.gf-cols-2 .gf-field:not(.gf-w-half):not(.gf-w-third):not(.gf-w-two-thirds):not(.gf-w-quarter):not(.gf-field-info):not(.gf-field-payment):not(.gf-field-divider),
    .go-form.gf-cols-2 .gf-field,
    .ultimate-form.gf-cols-2 .gf-field {
        grid-column: 1 / -1 !important;
    }
}

/* ── Form Logo ────────────────────────────────────────────── */

.gf-form-logo {
    display: flex;
    align-items: center;
    margin-bottom: var(--gf-logo-gap, 24px);
}

.gf-logo-img {
    /* Height is set inline via design setting; width scales proportionally */
    height: var(--gf-logo-height, 40px);
    width: auto;
    max-width: 240px;
    display: block;
    object-fit: contain;
    /* Prevent theme borders/backgrounds from touching the logo */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ── Form Title (global, sits above the step indicator) ──
   2.9.1 — independent of per-step <h2>s. Default font picks up
   --gf-font-family from the design configurator, colour comes from
   --gf-heading-color (falls back to --gf-text). The 28 px bottom
   margin matches .gf-progress so spacing is consistent whether the
   step indicator is shown or hidden. */
.gf-form-title-wrap { margin-bottom: 18px; }
.gf-form-title {
    margin: 0;
    font-family: var(--gf-heading-font, var(--gf-font-family, inherit));
    font-size:   var(--gf-form-title-size, 28px);
    font-weight: var(--gf-form-title-weight, 700);
    color:       var(--gf-heading-color, var(--gf-text, #0f172a));
    line-height: 1.2;
}

/* ── Progress (Minimal Progress — nur aktueller Schritt sichtbar) ──────────
   Schmaler Balken + Schritt-Titel + „Schritt X von Y"-Counter.
   Skaliert für 2 oder 20 Schritte. Null Overflow-Probleme.
   ─────────────────────────────────────────────────────────────────────── */

.gf-progress {
    margin-bottom: 28px;
    position: relative;
}

.gf-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.gf-progress-current {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--gf-text, #111827);
}

.gf-progress-num {
    width: var(--gf-dot-size, 28px);
    height: var(--gf-dot-size, 28px);
    border-radius: 50%;
    background: var(--gf-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--gf-primary-lt, #EEF5FD);
}

.gf-progress-title {
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
}

.gf-progress-of {
    font-size: 11px;
    color: var(--gf-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    font-weight: 600;
}

.gf-progress-track {
    height: var(--gf-progress-h, 6px);
    background: var(--gf-border, #d1d5db);
    border-radius: 999px;
    overflow: hidden;
}

.gf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gf-primary, #001E3C), var(--gf-accent, #0062C4));
    border-radius: 999px;
    transition: width .4s ease;
    width: 0%;
}

/* ────────── 2.9.1 — 5 step-indicator variants ──────────
   Single markup, the variant modifier on .gf-progress hides
   the unused sub-elements. All variants honour the same
   --gf-primary / --gf-accent / --gf-border tokens, so the
   Design configurator's colour pickers keep working unchanged.
*/

/* Hide every variant-specific block by default. The variant
   modifier below re-enables the one it owns. */
.gf-progress-nodes,
.gf-progress-ring-wrap,
.gf-progress-segments { display: none; }

/* ── Variant: BAR (v2, 2.9.2) — clean classic: title left, % right ──
   The percentage span is rendered for every variant; only the bar (and
   the fixed mobile bar below) shows it. */
.gf-progress .gf-progress-pct { display: none; }
.gf-progress--bar .gf-progress-meta    { display: flex; align-items: baseline; }
.gf-progress--bar .gf-progress-current { font-weight: 700; color: var(--gf-text, #0f172a); }
.gf-progress--bar .gf-progress-current .gf-progress-counter { color: var(--gf-accent); }
.gf-progress--bar .gf-progress-pct {
    display: inline; font-size: 14px; font-weight: 800;
    color: var(--gf-accent); margin-right: 7px;
}
.gf-progress--bar .gf-progress-oftext {
    font-size: 11px; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase; color: var(--gf-muted, #8a94a6);
}
.gf-progress--bar .gf-progress-track {
    display: block; height: 10px; border-radius: 999px;
    background: #e9eef6;
    box-shadow: inset 0 1px 3px rgba(15,23,42,.10);
    overflow: hidden;
}
.gf-progress--bar .gf-progress-fill {
    height: 100%; border-radius: 999px; position: relative;
    background: linear-gradient(90deg, var(--gf-primary), var(--gf-accent));
    box-shadow: 0 2px 6px rgba(0,98,196,.35);
}
.gf-progress--bar .gf-progress-fill::before {
    content: ""; position: absolute; inset: 2px 6px auto 6px; height: 3px;
    border-radius: 999px; background: rgba(255,255,255,.35);
}

/* ── Variant: DOTS (v2, 2.9.2) — check circles + halo + labels ── */
.gf-progress--dots .gf-progress-meta,
.gf-progress--dots .gf-progress-track  { display: none; }
.gf-progress--dots .gf-progress-nodes {
    display: flex; align-items: center; gap: 4px;
}
.gf-progress--dots .gf-progress-line {
    flex: 1; height: 3px; border-radius: 999px;
    background: #e3eaf4;
    transition: background .3s;
    /* Linie auf Höhe des Kreis-Mittelpunkts (Kreis 38px → 19 − 1.5). */
    align-self: flex-start;
    margin-top: 18px;
    min-width: 14px;
}
.gf-progress--dots .gf-progress-line.is-done {
    background: linear-gradient(90deg, var(--gf-primary), var(--gf-accent));
}
.gf-progress--dots .gf-progress-node {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    flex: 0 0 auto;
}
.gf-progress--dots .gf-progress-node .gf-progress-num {
    width: 38px; height: 38px;
    background: #fff; color: #9aa6b8;
    border: 2.5px solid #d3deec;
    box-shadow: none;
    font-size: 14px; font-weight: 700;
    transition: all .3s;
}
.gf-progress--dots .gf-progress-node.is-done .gf-progress-num {
    background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
    border-color: transparent;
    /* hide the number, draw a white check instead */
    font-size: 0;
}
.gf-progress--dots .gf-progress-node.is-done .gf-progress-num::after {
    content: ""; width: 11px; height: 6px;
    border-left: 2.6px solid #fff; border-bottom: 2.6px solid #fff;
    transform: rotate(-45deg); margin-top: -3px;
}
.gf-progress--dots .gf-progress-node.is-active .gf-progress-num {
    background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
    color: #fff; border-color: transparent;
    box-shadow: 0 0 0 5px rgba(0,98,196,.16), 0 4px 12px rgba(0,98,196,.35);
}
.gf-progress--dots .gf-progress-node .gf-progress-label {
    font-size: 11.5px; color: #9aa6b8; font-weight: 600;
    text-align: center; max-width: 90px; line-height: 1.25;
}
.gf-progress--dots .gf-progress-node.is-done .gf-progress-label   { color: var(--gf-accent); }
.gf-progress--dots .gf-progress-node.is-active .gf-progress-label { color: var(--gf-primary); font-weight: 700; }

/* ── Variant: ARROWS (v2, 2.9.2) — chevrons with check/gold chips ── */
.gf-progress--arrows .gf-progress-meta,
.gf-progress--arrows .gf-progress-track { display: none; }
.gf-progress--arrows .gf-progress-nodes {
    display: flex; align-items: stretch; gap: 0;
    /* clip-path swallows box-shadow; a filter on the parent survives it */
    filter: drop-shadow(0 3px 8px rgba(2,32,71,.10));
}
.gf-progress--arrows .gf-progress-line { display: none; }
.gf-progress--arrows .gf-progress-node {
    flex: 1; display: flex; align-items: center; gap: 8px;
    padding: 13px 14px 13px 30px;
    background: #eef2f8;
    color: #8a94a6;
    font-size: 13px; font-weight: 600;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
    transition: background .3s, color .3s;
}
.gf-progress--arrows .gf-progress-node:first-child {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
    padding-left: 18px;
    border-radius: 10px 0 0 10px;
}
.gf-progress--arrows .gf-progress-node:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
    border-radius: 0 10px 10px 0;
}
.gf-progress--arrows .gf-progress-node + .gf-progress-node { margin-left: -12px; }
.gf-progress--arrows .gf-progress-node .gf-progress-num {
    width: 22px; height: 22px;
    background: rgba(15,23,42,.10); color: inherit;
    box-shadow: none; font-size: 11px; font-weight: 700;
    flex: 0 0 auto;
    transition: all .3s;
}
.gf-progress--arrows .gf-progress-node.is-done {
    background: var(--gf-primary-lt, #e3effc); color: var(--gf-accent);
}
.gf-progress--arrows .gf-progress-node.is-done .gf-progress-num {
    background: var(--gf-accent); color: #fff;
    font-size: 0; /* number → check */
}
.gf-progress--arrows .gf-progress-node.is-done .gf-progress-num::after {
    content: ""; width: 8px; height: 4.5px;
    border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
    transform: rotate(-45deg); margin-top: -2px;
}
.gf-progress--arrows .gf-progress-node.is-active {
    background: linear-gradient(120deg, var(--gf-primary), var(--gf-accent));
    color: #fff;
}
.gf-progress--arrows .gf-progress-node.is-active .gf-progress-num {
    background: var(--gf-step-highlight, #FFCE1F);
    color: var(--gf-primary);
}

/* ── Variant: RING (v2, 2.9.2) — bigger ring, % centre, clear hierarchy ── */
.gf-progress--ring .gf-progress-meta,
.gf-progress--ring .gf-progress-track { display: none; }
.gf-progress--ring .gf-progress-ring-wrap {
    display: flex; align-items: center; gap: 18px;
}
.gf-progress--ring .gf-progress-ring { width: 74px; height: 74px; position: relative; flex: 0 0 auto; }
.gf-progress--ring .gf-progress-ring svg { width: 74px; height: 74px; transform: rotate(-90deg); display: block; }
.gf-progress--ring .gf-progress-ring-track {
    fill: none; stroke: #e9eef6; stroke-width: 3.6;
}
.gf-progress--ring .gf-progress-ring-fill {
    fill: none; stroke-width: 3.6; stroke-linecap: round;
    transition: stroke-dashoffset .4s ease;
}
.gf-progress--ring .gf-progress-ring-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
}
.gf-progress--ring .gf-progress-ring-pct {
    font-size: 16px; font-weight: 800; line-height: 1;
    color: var(--gf-primary);
}
.gf-progress--ring .gf-progress-ring-frac {
    font-size: 9.5px; font-weight: 600; letter-spacing: .4px;
    color: #9aa6b8;
}
.gf-progress--ring .gf-progress-ring-step {
    font-size: 11px; font-weight: 700; letter-spacing: .7px;
    text-transform: uppercase; color: #8a94a6;
}
.gf-progress--ring .gf-progress-ring-step .gf-progress-counter { color: var(--gf-accent); }
.gf-progress--ring .gf-progress-ring-now {
    font-size: 16px; font-weight: 700; color: var(--gf-primary); margin: 3px 0 2px;
}
.gf-progress--ring .gf-progress-ring-next {
    font-size: 12.5px; color: #9aa6b8;
}

/* ── Variant: SEGMENTS (v3, 2.9.2) — pills + number chips below ── */
.gf-progress--segments .gf-progress-meta { display: flex; align-items: baseline; }
.gf-progress--segments .gf-progress-current { font-weight: 700; color: var(--gf-text, #0f172a); }
.gf-progress--segments .gf-progress-of {
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
    color: #fff;
    background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
    padding: 3px 11px; border-radius: 999px;
}
.gf-progress--segments .gf-progress-of .gf-progress-counter { color: #fff; }
.gf-progress--segments .gf-progress-track { display: none; }
.gf-progress--segments .gf-progress-segments {
    display: flex; gap: 7px;
    counter-reset: gf-seg;
    /* room for the number chips below the pills */
    padding-bottom: 30px;
}
.gf-progress--segments .gf-progress-segment {
    flex: 1; height: 12px;
    background: #e9eef6;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
    position: relative;
    transition: background .3s;
    counter-increment: gf-seg;
}
.gf-progress--segments .gf-progress-segment::before {
    content: ""; position: absolute; inset: 2.5px 8px auto 8px; height: 3px;
    border-radius: 999px; background: rgba(255,255,255,.30);
    opacity: 0; transition: opacity .3s;
}
/* number chip below each segment — bubble style */
.gf-progress--segments .gf-progress-segment::after {
    content: counter(gf-seg);
    position: absolute; left: 50%; top: calc(100% + 8px);
    transform: translateX(-50%);
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    background: #eef2f8; color: #9aa6b8;
    transition: all .3s;
}
.gf-progress--segments .gf-progress-segment.is-done {
    background: linear-gradient(90deg, var(--gf-primary), var(--gf-accent));
    box-shadow: 0 2px 5px rgba(0,98,196,.28);
}
.gf-progress--segments .gf-progress-segment.is-done::before { opacity: 1; }
.gf-progress--segments .gf-progress-segment.is-done::after {
    background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,55,91,.25);
}
.gf-progress--segments .gf-progress-segment.is-active {
    background: linear-gradient(90deg, var(--gf-accent), var(--gf-primary));
    box-shadow: 0 2px 7px rgba(30,144,255,.40);
}
.gf-progress--segments .gf-progress-segment.is-active::before { opacity: 1; }
.gf-progress--segments .gf-progress-segment.is-active::after {
    background: var(--gf-step-highlight, #FFCE1F);
    color: var(--gf-primary);
    box-shadow: 0 3px 8px rgba(0,0,0,.22);
}

/* ── Variant: TRAIL (new, 2.9.2) — milestone map ──
   Reuses the dots markup (nodes + lines): the lines form a continuous
   7px track, the nodes sit ON it. No meta row on purpose (that is the
   bar's identity); the active step shows its title as a pill below. */
.gf-progress--trail .gf-progress-meta,
.gf-progress--trail .gf-progress-track { display: none; }
.gf-progress--trail .gf-progress-nodes {
    display: flex; align-items: center; gap: 0;
    margin: 4px 6px 34px;
}
.gf-progress--trail .gf-progress-line {
    flex: 1; height: 7px; border-radius: 999px;
    background: #e9eef6;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
    margin: 0 -3px;            /* tuck under the nodes → continuous track */
    transition: background .3s;
}
.gf-progress--trail .gf-progress-line.is-done {
    background: linear-gradient(90deg, var(--gf-primary), var(--gf-accent));
    box-shadow: 0 2px 6px rgba(0,98,196,.30);
}
.gf-progress--trail .gf-progress-node {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center;
}
.gf-progress--trail .gf-progress-node .gf-progress-num {
    width: 15px; height: 15px;
    background: #fff; border: 2.5px solid #d3deec;
    box-shadow: none; font-size: 0;
    transition: all .3s;
}
.gf-progress--trail .gf-progress-node.is-done .gf-progress-num {
    width: 22px; height: 22px;
    background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
    border: 0;
    box-shadow: 0 2px 6px rgba(0,55,91,.30);
}
.gf-progress--trail .gf-progress-node.is-done .gf-progress-num::after {
    content: ""; width: 8px; height: 4.5px;
    border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
    transform: rotate(-45deg); margin-top: -2px;
}
.gf-progress--trail .gf-progress-node.is-active .gf-progress-num {
    width: 30px; height: 30px;
    background: #fff; border: 3px solid var(--gf-accent);
    color: var(--gf-primary);
    font-size: 13px; font-weight: 800;
    box-shadow: 0 0 0 5px rgba(0,98,196,.15), 0 4px 10px rgba(0,98,196,.30);
}
/* goal flag on the last, not-yet-reached checkpoint */
.gf-progress--trail .gf-progress-node:last-child:not(.is-active):not(.is-done) .gf-progress-num {
    width: 26px; height: 26px;
    border: 2.5px solid var(--gf-step-highlight, #FFCE1F);
    font-size: 0;
}
.gf-progress--trail .gf-progress-node:last-child:not(.is-active):not(.is-done) .gf-progress-num::after {
    content: "\1F3C1"; font-size: 12px; line-height: 1;
    border: 0; width: auto; height: auto; transform: none; margin: 0;
}
/* the active step's title as a pill below its checkpoint */
.gf-progress--trail .gf-progress-node .gf-progress-label { display: none; }
.gf-progress--trail .gf-progress-node.is-active .gf-progress-label {
    display: block;
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11.5px; font-weight: 800;
    color: var(--gf-primary);
    background: var(--gf-primary-lt, #eef5fd);
    border: 1px solid rgba(0,98,196,.18);
    padding: 2px 10px; border-radius: 999px;
}

/* ────────── 2.9.1 — Mobile-Fallback: alle Varianten → bar ──────────
   Auf engen Viewports brechen Dots-Labels um, Wizard-Arrows clippen,
   Ring + "Als Nächstes:"-Label nimmt unverhältnismäßig viel Platz.
   Unter 640 px wird jede Variant-Modifier-Klasse ignoriert und der
   gleiche schlanke Bar-Indicator gerendert. Inline-Styles aus dem
   Server-Side-FOUC-Fix werden mit !important überschrieben — der
   Bar-Markup ist ohnehin immer im DOM (5-Varianten-Single-Markup).
   Tablet + Desktop bleiben unverändert auf der gewählten Variante. */
@media (max-width: 640px) {
    .gf-progress .gf-progress-nodes,
    .gf-progress .gf-progress-ring-wrap,
    .gf-progress .gf-progress-segments {
        display: none !important;
    }
    .gf-progress .gf-progress-meta  { display: flex  !important; align-items: baseline; }
    /* The ONE fixed mobile design = bar v2, regardless of chosen variant. */
    .gf-progress .gf-progress-track {
        display: block !important;
        height: 8px; border-radius: 999px;
        background: #e9eef6;
        box-shadow: inset 0 1px 2px rgba(15,23,42,.10);
        overflow: hidden;
    }
    .gf-progress .gf-progress-fill {
        border-radius: 999px;
        background: linear-gradient(90deg, var(--gf-primary), var(--gf-accent));
    }
    .gf-progress .gf-progress-current { font-weight: 700; color: var(--gf-text, #0f172a); }
    .gf-progress .gf-progress-current .gf-progress-counter { color: var(--gf-accent); }
    .gf-progress .gf-progress-pct {
        display: inline !important;
        font-size: 13px; font-weight: 800;
        color: var(--gf-accent); margin-right: 6px;
    }
    .gf-progress .gf-progress-oftext {
        font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
        text-transform: uppercase; color: var(--gf-muted, #8a94a6);
    }
    /* Segments styles its meta "of" as a gradient pill on desktop —
       reset that here so the fixed mobile bar stays uniform. */
    .gf-progress--segments .gf-progress-of {
        background: none; color: var(--gf-muted, #8a94a6); padding: 0;
    }
    .gf-progress--segments .gf-progress-of .gf-progress-counter { color: var(--gf-accent); }
}

/* ── Steps ────────────────────────────────────────────────── */

/* overflow:hidden clips the 16px gfSlideIn step transition (prevents a horizontal
   scrollbar flash, esp. on mobile). The 6px horizontal padding + matching negative
   margin keep the content at the exact same x position while giving focus rings on
   the edge-most nav buttons (e.g. the left-aligned Back button, which sits flush at
   the content edge) room to render without being sliced by the clip boundary. */
.gf-steps-wrapper { overflow: hidden; padding: 0 6px; margin: 0 -6px; }

.gf-step-panel {
    display: none;
    animation: gfSlideIn .2s ease;
}
.gf-step-panel.active { display: block; }

@keyframes gfSlideIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* 2.9.1 — Respektiere prefers-reduced-motion (WCAG 2.3.3). User mit
   Vestibular-Disorders bekommen sonst Schwindel bei jedem Step-Wechsel. */
@media (prefers-reduced-motion: reduce) {
    .gf-step-panel { animation: none !important; }
    .gf-progress-fill, .gf-progress-ring-fill,
    .gf-progress-node, .gf-progress-segment,
    .gf-progress-line {
        transition: none !important;
    }
}

.gf-step-header {
    margin-bottom: 24px;
    /* Prevent themes from adding borders/backgrounds to the header container */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Strong specificity so themes cannot override the form title.
   CSS vars allow the Design subpage settings to take effect via
   --gf-heading-size / --gf-heading-weight / --gf-heading-color. */
.go-form .gf-step-header h2,
.ultimate-form .gf-step-header h2,
.go-form .gf-step-header h2 *,
.ultimate-form .gf-step-header h2 * {
    font-size: var(--gf-heading-size, 20px) !important;
    font-weight: var(--gf-heading-weight, 700) !important;
    font-family: var(--gf-heading-font, inherit) !important; /* 2.9.4 — per-element font */
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
    color: var(--gf-heading-color, var(--gf-text, #111827)) !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
}

/* Description: same reset so themes cannot add input-like styling */
.go-form .gf-step-description,
.ultimate-form .gf-step-description {
    color: var(--gf-helper-color, var(--gf-muted, #6b7280)) !important;
    margin: 0 !important;
    font-size: var(--gf-helper-size, 14px) !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── Fields ───────────────────────────────────────────────── */

.gf-fields {
    display: grid;
    /* minmax(0, 1fr) (not bare 1fr) prevents a long German option label
       (e.g. "Versicherungsschutz") from expanding a column past the wrapper
       width on phones — bare 1fr min-tracks to min-content. */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gf-field-gap, 22px);
}

/* Section breaks and HTML blocks render as BARE divs (not .gf-field), so the
   default full-width grid-column below doesn't apply and they collapse to a
   single 1/12 column. Force them to span the whole row. */
.gf-fields > .gf-section-break,
.gf-fields > .gf-html-block {
    grid-column: 1 / -1;
}

.gf-field {
    grid-column: 1 / -1;      /* default: full width — robust gegen Stale-Klassen */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Grid cells default to min-content sizing on their children — without min-width:0
       a long German option label (e.g. "Versicherungsschutz") pushes the field
       past its grid cell on mobile, breaking the layout. */
    min-width: 0;
}
.gf-field[style*="display: none"] { display: none !important; }

/* ── Column width classes (set via builder) ─────────────────
   :not()-Selektor garantiert dass Default 100% greift wenn keine width-Klasse gesetzt ist */
.gf-field:not(.gf-w-half):not(.gf-w-third):not(.gf-w-two-thirds):not(.gf-w-quarter) {
    grid-column: 1 / -1 !important;
}
.gf-field.gf-w-half       { grid-column: span 6 !important; }
.gf-field.gf-w-third      { grid-column: span 4 !important; }
.gf-field.gf-w-two-thirds { grid-column: span 8 !important; }
.gf-field.gf-w-quarter    { grid-column: span 3 !important; }

/* Section / HTML / payment / divider always span the full row — never half a
   column in cols-2 mode (the Stripe card element / PayPal buttons / amount line
   would be cramped). NOTE: this (0,2,0) rule does NOT outrank the (0,8,0) cols-2
   span-6 default on its own — payment/divider are explicitly EXCLUDED from that
   default via :not(.gf-field-payment):not(.gf-field-divider) above, so they
   never match span-6 and this full-row rule applies unopposed. */
.gf-field.gf-field-section,
.gf-field.gf-field-html,
.gf-field.gf-field-info,
.gf-field.gf-field-payment,
.gf-field.gf-field-divider { grid-column: span 12 !important; }

/* Mobile: everything stacks */
@media (max-width: 640px) {
    /* minmax(0, 1fr) (not bare 1fr): bare 1fr min-tracks to min-content, so a
       long unbreakable label like "Versicherungsschutz" expands the column past
       the wrapper. minmax(0, …) lets it shrink and the text wraps instead. */
    .gf-fields { grid-template-columns: minmax(0, 1fr) !important; }
    /* 2.9.0 — ECHTE ROOT-CAUSE (endlich gefunden per computed-grid-column-
       Messung im 375px-Viewport): Die alte Regel `.gf-field { grid-column: 1 }`
       (Spezifität 0,1,0) VERLOR gegen `.gf-field.gf-w-half { grid-column: span 6
       !important }` (0,2,0) — beide !important, höhere Spezifität gewinnt. Die
       Breiten-Klassen behielten also `span 6/4/8/3` auf Mobile; da das Template
       aber auf 1 Spalte kollabiert, erzeugte `span 6` 5 implizite 0px-Spalten,
       und die vollbreiten Felder (grid-column: 1 / -1) erwischten nur die erste
       schmale Spalte → Textarea/Checkbox/Select/E-Mail schmaler als die
       ½-Text-Inputs. Alle früheren Fixes pflasterten nur `input{width:100%}`
       und trafen die Ursache nie. Lösung: die Breiten-Klassen in der Mobile-
       Query mit GLEICHER Spezifität (0,2,0) explizit auf volle Spalte zwingen. */
    .gf-field,
    .gf-field.gf-w-half,
    .gf-field.gf-w-third,
    .gf-field.gf-w-two-thirds,
    .gf-field.gf-w-quarter,
    .gf-field.gf-field-section,
    .gf-field.gf-field-html,
    .gf-field.gf-field-info {
        grid-column: 1 / -1 !important;
        /* force 100 % width on mobile — some Elementor / theme wrappers
           redefine flex/grid behavior upstream and let .gf-field shrink to
           content, so lock it explicitly. */
        width: 100% !important;
        max-width: 100% !important;
    }
    /* 2.9.1 v2 — Nuclear Mobile-Fix. User-Report: Trotz der Regel oben
       zeigten Textarea und Checkbox-Card weiterhin ~12px Inset gegenüber
       Text-Inputs. Vermutete Ursache: Theme/Elementor-CSS überschreibt
       `.gf-field` mit höherer Spezifität oder fügt margin/padding hinzu,
       das nur bei display:flex compound-Children sichtbar wird.
       Lösung: doppelt-class Spezifität (`.gf-field.gf-field`) + auch die
       Inner-Wrapper explizit zwingen — gewinnt gegen alle realistischen
       Theme-Resets, ohne Selektoren mit `!important` zu spammen. */
    .go-form .gf-field.gf-field,
    .ultimate-form .gf-field.gf-field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .go-form .gf-field.gf-field > .gf-checkbox-label,
    .ultimate-form .gf-field.gf-field > .gf-checkbox-label,
    .go-form .gf-field.gf-field > .gf-textarea,
    .ultimate-form .gf-field.gf-field > .gf-textarea,
    .go-form .gf-field.gf-field > .gf-fieldset,
    .ultimate-form .gf-field.gf-field > .gf-fieldset,
    .go-form .gf-field.gf-field > textarea.gf-input,
    .ultimate-form .gf-field.gf-field > textarea.gf-input,
    .go-form .gf-field.gf-field > .gf-rating,
    .ultimate-form .gf-field.gf-field > .gf-rating,
    .go-form .gf-field.gf-field > .gf-composite,
    .ultimate-form .gf-field.gf-field > .gf-composite,
    .go-form .gf-field.gf-field > .gf-file-wrap,
    .ultimate-form .gf-field.gf-field > .gf-file-wrap,
    .go-form .gf-field.gf-field > .gf-signature,
    .ultimate-form .gf-field.gf-field > .gf-signature {
        /* 2.9.1 — .gf-signature ergänzt (Hot-Path-Agent-Finding):
           Signature-Canvas hatte feste 160px-Height + Default-Width — auf
           schmalen Containern (Elementor ≤375px) blieb es inset wie vorher
           Textarea/Checkbox. */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch !important;
    }
}

/* ────────── 2.9.1 — Bulletproof equal-width wrappers ──────────
   User-reported bug: on mobile, the textarea and checkbox visually
   sat narrower than the regular text/number inputs in the same form
   (placeholder text on inputs reached the edge; the checkbox card
   and the textarea bordered box were inset by ~12 px each side).
   Root cause: each compound widget (.gf-checkbox-label,
   .gf-checkbox-group, .gf-fieldset, .gf-textarea, .gf-rating, ...)
   had no explicit width — so a parent Elementor / theme container
   could collapse them to shrink-to-fit when flex's
   `align-items: stretch` default was overridden upstream.
   Fix: force every field's compound wrapper to 100% width with
   border-box, identical to .gf-input/.gf-select rules above. This
   guarantees pixel-aligned left+right edges across every field
   type, on every breakpoint, regardless of theme. */
.go-form .gf-checkbox-label,
.ultimate-form .gf-checkbox-label,
.go-form .gf-checkbox-group,
.ultimate-form .gf-checkbox-group,
.go-form .gf-fieldset,
.ultimate-form .gf-fieldset,
.go-form .gf-textarea,
.ultimate-form .gf-textarea,
.go-form .gf-rating,
.ultimate-form .gf-rating,
.go-form .gf-composite,
.ultimate-form .gf-composite,
.go-form .gf-file-wrap,
.ultimate-form .gf-file-wrap {
    width:      100% !important;
    box-sizing: border-box !important;
}

.gf-label {
    font-weight: var(--gf-label-weight, 600);
    font-size: var(--gf-label-size, 14px);
    color: var(--gf-label-color, var(--gf-text, #111827));
    display: block;
    font-family: inherit; /* always same as container */
    line-height: 1.4;
    margin-bottom: 2px;
}
.gf-required-star { color: var(--gf-required-color, var(--gf-error)); margin-left: 3px; }

.gf-input, .gf-select {
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    padding: var(--gf-pad-v, 14px) var(--gf-pad-h, 18px);
    font-size: var(--gf-input-size, 15px); /* 2.9.1 — auf 15px synchronisiert (war 14px = drift) */
    font-weight: var(--gf-input-weight, 400); /* 2.9.4 — tokenised field text weight */
    font-family: inherit; /* inherit from .ultimate-form container */
    width: 100% !important;          /* Bulletproof: gegen Theme-Resets */
    min-width: 100% !important;      /* Selects hatten Browser-default min-width:auto */
    max-width: 100% !important;
    display: block !important;       /* gegen inline-Default vom <select> */
    box-sizing: border-box;
    background: var(--gf-field-bg, #fff);
    color: var(--gf-text);
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* 2.9.4 — textarea shares the tokenised field text weight. */
.gf-textarea { font-weight: var(--gf-input-weight, 400); }

/* 2.9.4 — per-element font family. Each token defaults to 'inherit', so an unset
   element follows the global font (byte-identical). Set one in the Typography
   panel to give that element its own typeface. */
.gf-label, .gf-fieldset legend.gf-label,
.ultimate-form legend.gf-label { font-family: var(--gf-label-font, inherit); }
.gf-input, .gf-select, .gf-textarea { font-family: var(--gf-input-font, inherit); }
.gf-helper-text, .ultimate-form .gf-helper-text { font-family: var(--gf-helper-font, inherit); }
.ultimate-form .gf-btn-next, .go-form .gf-btn-next,
.ultimate-form .gf-btn-submit, .go-form .gf-btn-submit,
.ultimate-form .gf-btn-prev, .go-form .gf-btn-prev { font-family: var(--gf-btn-font, inherit); }

/* 2.9.0-fix — calculator / currency / captcha inputs sit in a flex row next to
   a prefix symbol (€, =, the math question). The full-width lock forces them to
   overflow the prefix. Exempt them. NOTE: the bulletproof "input.gf-input"
   spec-boost rule below is (0,2,1) and sets width:100% !important — so this
   exemption MUST be (0,3,1) (context class + input + .gf-input + modifier) to
   win. A bare ".gf-input.gf-calc-input" (0,2,0) loses and the fix is dead. */
.go-form input.gf-input.gf-calc-input, .ultimate-form input.gf-input.gf-calc-input,
.go-form input.gf-input.gf-currency, .ultimate-form input.gf-input.gf-currency,
.go-form input.gf-input.gf-captcha-input, .ultimate-form input.gf-input.gf-captcha-input {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto;
}
/* The currency field and the math-captcha input both carry a LEFT prefix chip,
   so square the left corners to join it flush (the (0,2,1) spec-boost otherwise
   fully rounds the input and breaks the join). */
.go-form input.gf-input.gf-currency, .ultimate-form input.gf-input.gf-currency,
.go-form input.gf-input.gf-captcha-input, .ultimate-form input.gf-input.gf-captcha-input {
    border-radius: 0 var(--gf-radius, 8px) var(--gf-radius, 8px) 0 !important;
}
/* The calc field's chip depends on its format: currency = LEFT € chip (square
   left), percent = RIGHT % chip (square right), decimal = no chip (fully
   rounded). Keying on data-calc-format keeps each format's corners matched. */
.go-form input.gf-input.gf-calc-input[data-calc-format="currency"], .ultimate-form input.gf-input.gf-calc-input[data-calc-format="currency"] {
    border-radius: 0 var(--gf-radius, 8px) var(--gf-radius, 8px) 0 !important;
}
.go-form input.gf-input.gf-calc-input[data-calc-format="percent"], .ultimate-form input.gf-input.gf-calc-input[data-calc-format="percent"] {
    border-radius: var(--gf-radius, 8px) 0 0 var(--gf-radius, 8px) !important;
}
.go-form input.gf-input.gf-calc-input[data-calc-format="decimal"], .ultimate-form input.gf-input.gf-calc-input[data-calc-format="decimal"] {
    border-radius: var(--gf-radius, 8px) !important;
}
.go-form input.gf-input.gf-captcha-input, .ultimate-form input.gf-input.gf-captcha-input { flex: 0 0 auto; }

/* 2.9.0-fix — a range/slider also carries .gf-input, so the (0,2,1) input
   spec-boost (border + padding + background + appearance:none !important) turns
   it into a bordered box with no visible/draggable thumb. Reset the chrome at
   (0,3,1) so the native slider renders. */
.go-form input.gf-input.gf-range, .ultimate-form input.gf-input.gf-range {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
    accent-color: var(--gf-primary, #0062C4);
}

/* Wrapper-Schutz: kein Theme darf den .gf-field Container schmaler machen */
.go-form .gf-field,
.ultimate-form .gf-field {
    min-width: 0 !important;
    width: auto !important;
}
.gf-input:focus, .gf-select:focus {
    border-color: var(--gf-primary);
    box-shadow: 0 0 0 var(--gf-focus-ring-width, 3px) var(--gf-focus-ring-color, rgba(0,30,60,.12));
    outline: none;
}
.gf-input.gf-invalid, .gf-select.gf-invalid { border-color: var(--gf-error); }
.gf-input.gf-invalid:focus { box-shadow: 0 0 0 3px rgba(200,30,30,.12); }

.gf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ── Floating labels ──────────────────────────────────────────
   The label starts inside the control (acting as a placeholder) and
   floats to a compact line at the top on focus or when the field is
   filled. Native CSS only: :placeholder-shown drives the empty state,
   :has() lifts the label from the wrapper. The control reserves extra
   top padding so the floated mini-label never overlaps the value.
   Graceful degradation: where :has() is unsupported the label simply
   stays in its resting position — the form remains fully usable. */

.gf-field.gf-float {
    position: relative;
}

/* Reserve room at the top of the control for the floated mini-label.
   Total vertical padding is preserved so field height stays consistent.
   High specificity + !important to beat the bulletproof input padding rule. */
.go-form .gf-field.gf-float > input.gf-input,
.go-form .gf-field.gf-float > select.gf-select,
.go-form .gf-field.gf-float > textarea.gf-input,
.ultimate-form .gf-field.gf-float > input.gf-input,
.ultimate-form .gf-field.gf-float > select.gf-select,
.ultimate-form .gf-field.gf-float > textarea.gf-input,
.gf-field.gf-float > .gf-input,
.gf-field.gf-float > .gf-select,
.gf-field.gf-float > .gf-textarea {
    padding-top: calc(var(--gf-pad-v, 14px) + 6px) !important;
    padding-bottom: calc(var(--gf-pad-v, 14px) - 6px) !important;
}
.go-form .gf-field.gf-float > textarea.gf-input,
.ultimate-form .gf-field.gf-float > textarea.gf-input,
.gf-field.gf-float > .gf-textarea {
    padding-top: calc(var(--gf-pad-v, 14px) + 8px) !important;
}

/* Resting state — label sits where the placeholder text would be. */
.gf-field.gf-float > .gf-label {
    position: absolute;
    left: calc(var(--gf-pad-h, 18px) + 1px);
    top: calc(var(--gf-pad-v, 14px) + 1px);
    margin: 0;
    padding: 0;
    max-width: calc(100% - var(--gf-pad-h, 18px) * 2);
    /* !important defeats the bulletproof `.go-form label.gf-label` rule that
       forces the design-configured weight/size/colour onto every label. */
    font-size: var(--gf-input-size, 15px) !important;
    font-weight: 400 !important;
    line-height: 1.2;
    color: var(--gf-muted, #6b7280) !important;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease, letter-spacing .15s ease;
    z-index: 1;
}

/* 2.9.4 — tokenised placeholder colour (was browser default). Lower specificity
   than the float rule below, so the float-label behaviour is unaffected. */
.gf-input::placeholder,
.gf-textarea::placeholder { color: var(--gf-placeholder-color, var(--gf-muted, #6b7280)); opacity: 1; }

/* Hide the real placeholder until the label has floated up (on focus). */
.gf-field.gf-float .gf-input::placeholder,
.gf-field.gf-float .gf-textarea::placeholder { color: transparent; }
.gf-field.gf-float .gf-input:focus::placeholder,
.gf-field.gf-float .gf-textarea:focus::placeholder { color: var(--gf-muted, #6b7280); }

/* Floated state — focus, filled, or always-up controls (select/date/time). */
.gf-field.gf-float.gf-float-up > .gf-label,
.gf-field.gf-float:has(.gf-input:focus) > .gf-label,
.gf-field.gf-float:has(.gf-input:not(:placeholder-shown)) > .gf-label,
.gf-field.gf-float:has(.gf-textarea:focus) > .gf-label,
.gf-field.gf-float:has(.gf-textarea:not(:placeholder-shown)) > .gf-label,
.gf-field.gf-float:has(.gf-select:focus) > .gf-label {
    top: 6px;
    /* !important defeats the bulletproof `.go-form label.gf-label` rule. */
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: var(--gf-primary) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Required star inside a floating label keeps its accent colour. */
.gf-field.gf-float > .gf-label .gf-required-star { color: var(--gf-error); }

/* Invalid floating field — label turns red to match the border
   (!important beats the floated primary colour above). */
.gf-field.gf-float:has(.gf-invalid) > .gf-label { color: var(--gf-error) !important; }

/* ── Hidden label (label position = "hidden") ──────────────────
   Label stays in the DOM for screen readers but is visually removed;
   the placeholder carries the field name visually. */
.gf-field.gf-label-hidden > .gf-label,
.gf-field.gf-label-hidden > legend.gf-label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.gf-helper-text {
    font-size: var(--gf-helper-size, 13px);
    font-weight: var(--gf-helper-weight, 400);
    color: var(--gf-helper-color, var(--gf-muted, #6b7280));
    margin: 0;
    line-height: 1.4;
}

.gf-field-error {
    font-size: 12px;
    color: var(--gf-error);
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 4px;
}
.gf-field-error.visible { display: flex; }

/* ── Checkbox ─────────────────────────────────────────────── */

.gf-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 12px 14px;
    background: var(--gf-bg);
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    transition: border-color .15s;
}
.gf-checkbox-label:hover { border-color: var(--gf-primary); }
.gf-checkbox-label input { display: none; }

.gf-checkbox-custom {
    width: var(--gf-check-size, 20px);
    height: var(--gf-check-size, 20px);
    min-width: var(--gf-check-size, 20px);
    border: 2px solid var(--gf-border);
    border-radius: var(--gf-check-radius, 4px);
    background: var(--gf-field-bg, #fff);
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.gf-checkbox-label input:checked + .gf-checkbox-custom {
    background: var(--gf-check-bg-checked, var(--gf-primary));
    border-color: var(--gf-check-bg-checked, var(--gf-primary));
}
.gf-checkbox-label input:checked + .gf-checkbox-custom::after {
    content: '';
    width: 10px;
    height: 6px;
    border: 2px solid var(--gf-check-color, #fff);
    border-top: none;
    border-right: none;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
}

.gf-checkbox-text {
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
}

/* ── Radio ────────────────────────────────────────────────── */

.gf-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    /* fieldset defaults to min-content sizing of its descendants — long German
       option labels (e.g. "Versicherungsschutz") otherwise expand the fieldset
       past its container's width and break mobile layouts. */
    min-width: 0;
    max-width: 100%;
}
.gf-fieldset legend.gf-label {
    margin-bottom: 10px;
}

.gf-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    cursor: pointer;
    margin-bottom: 8px;
    background: var(--gf-field-bg, #fff);
    transition: border-color .15s, background .15s;
    font-size: 14px;     /* same as label */
    font-family: inherit;
    font-weight: 400;
    color: var(--gf-text);
}
.gf-radio-label:hover { border-color: var(--gf-primary); background: var(--gf-primary-lt); }
.gf-radio-label input { display: none; }

.gf-radio-custom {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--gf-border);
    border-radius: 50%;
    background: var(--gf-field-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.gf-radio-label:has(input:checked) {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt);
}
.gf-radio-label:has(input:checked) .gf-radio-custom {
    border-color: var(--gf-primary);
}
.gf-radio-label:has(input:checked) .gf-radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--gf-primary);
    border-radius: 50%;
    display: block;
}

/* ── Radio Cards (Bild / Icon Stil) ───────────────────────── */

.gf-radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.gf-radio-card {
    cursor: pointer;
    display: block;
    min-width: 0; /* allow grid item to shrink so its text wraps instead of overflowing */
}
.gf-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gf-radio-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 14px 16px;
    border: var(--gf-border-w, 2px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    background: var(--gf-field-bg, #fff);
    text-align: center;
    transition: border-color .18s, box-shadow .18s, background .18s;
    position: relative;
    min-height: 90px;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.gf-radio-card:hover .gf-radio-card-inner {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt, #EEF5FD);
}
.gf-radio-card input:checked + .gf-radio-card-inner {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt, #EEF5FD);
    box-shadow: 0 0 0 var(--gf-focus-ring-width, 3px) var(--gf-focus-ring-color, rgba(0,30,60,.12));
}

/* Checkmark badge top-right */
.gf-radio-card-check {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gf-primary);
    color: #fff;
    font-size: 10px;
    align-items: center;
    justify-content: center;
}
.gf-radio-card-check::after { content: '✓'; }
.gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-check {
    display: flex;
}

/* Icon (emoji / text) */
.gf-radio-card-icon {
    font-size: var(--gf-card-icon-size, 32px);
    line-height: 1;
}
/* Never reserve space for an icon slot that ended up empty (e.g. unknown key). */
.gf-radio-card-icon:empty { display: none; }

/* Icon (curated SVG set / pasted inline SVG) — colour follows the card design */
.gf-radio-card-icon-svg {
    color: var(--gf-card-icon-color, var(--gf-primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gf-radio-card-icon-svg svg {
    width: var(--gf-card-icon-size, 32px);
    height: var(--gf-card-icon-size, 32px);
}

/* Image */
.gf-radio-card-img-wrap {
    width: 100%;
    max-height: 64px;
    overflow: hidden;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gf-radio-card-img {
    width: 100%;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}

/* 2.9.4 — Image cards (placeholder "card_image"): a large picture fills the top of
   each card, the label sits below. The picture is the option icon set to an image
   URL via the Media Library picker. Naturally dormant: only applies when the radio
   field's style is "Image cards". */
.gf-radio-cards.gf-cards-image {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.gf-cards-image .gf-radio-card-inner {
    padding: 0;
    gap: 0;
    overflow: hidden;
    text-align: center;
}
.gf-cards-image .gf-radio-card-img-wrap {
    width: 100%;
    max-height: none;
    border-radius: 0;
}
.gf-cards-image .gf-radio-card-img {
    width: 100%;
    height: 150px;
    border-radius: 0;
}
.gf-cards-image .gf-radio-card-label {
    padding: 12px 14px 14px;
}
.gf-cards-image .gf-radio-card-label:not(:last-child) {
    padding-bottom: 2px;
}
.gf-cards-image .gf-radio-card-sub {
    padding: 0 14px 14px;
}
/* Selected check becomes a badge over the picture's top-right corner. */
.gf-cards-image .gf-radio-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

/* Label below icon/image */
.gf-radio-card-label {
    /* 2.9.4 — tokenised so card title can be styled independently. Defaults chain
       to label-size/text so the standard look is unchanged. */
    font-size: var(--gf-card-title-size, 13px);
    font-weight: var(--gf-card-title-weight, 600);
    color: var(--gf-card-title-color, var(--gf-text));
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
}
/* Optional subtitle below the label (card style "title + subtitle") */
.gf-radio-card-sub {
    font-size: var(--gf-card-sub-size, 12px);
    font-weight: 400;
    color: var(--gf-card-sub-color, var(--gf-muted, #6b7280));
    line-height: 1.4;
    margin-top: 2px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Icon-left card layout (placeholder "…_left"): icon | title+subtitle | check.
   One card per row; title and subtitle are grouped in .gf-radio-card-text. */
.gf-cards-iconleft {
    grid-template-columns: 1fr;
}
.gf-cards-iconleft .gf-radio-card-inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    padding: 16px 18px;
    min-height: 0;
}
.gf-cards-iconleft .gf-radio-card-icon,
.gf-cards-iconleft .gf-radio-card-icon-svg,
.gf-cards-iconleft .gf-radio-card-img-wrap {
    flex: 0 0 auto;
}
.gf-cards-iconleft .gf-radio-card-img-wrap { width: 48px; }
.gf-cards-iconleft .gf-radio-card-img { width: 48px; height: 48px; }
.gf-cards-iconleft .gf-radio-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.gf-cards-iconleft .gf-radio-card-sub { margin-top: 0; }
/* Check sits at the right, vertically centred; reserve its space to avoid a
   layout shift when a card becomes selected. */
.gf-cards-iconleft .gf-radio-card-check {
    position: static;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease, visibility .15s ease;
    align-self: center;
    flex: 0 0 auto;
    top: auto;
    right: auto;
}
.gf-cards-iconleft .gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-check {
    visibility: visible;
    opacity: 1;
}

/* ── Premium gradient cards ───────────────────────────────────────────
   When the design uses a primary/button GRADIENT (the wrapper carries
   .gf-has-primary-grad / .gf-has-btn-grad), the SELECTED card fills with that
   gradient + white text, and the subtitle becomes an uppercase brand-colour
   "eyebrow". This makes a premium funnel look (e.g. gold gradient + Newsreader)
   100% reproducible from the design editor — no per-form custom CSS. GATED on
   the gradient classes, so every non-gradient design stays byte-identical. */
.gf-has-primary-grad .gf-radio-card-sub,
.gf-has-btn-grad .gf-radio-card-sub {
    color: var(--gf-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.gf-has-primary-grad .gf-radio-card input:checked + .gf-radio-card-inner,
.gf-has-btn-grad .gf-radio-card input:checked + .gf-radio-card-inner {
    background: var(--gf-btn-primary-grad, var(--gf-primary-grad, var(--gf-primary))) !important;
    border-color: var(--gf-primary-dk, var(--gf-primary)) !important;
}
.gf-has-primary-grad .gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-label,
.gf-has-btn-grad .gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-label {
    color: #fff !important;
}
.gf-has-primary-grad .gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-sub,
.gf-has-btn-grad .gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-sub {
    color: rgba(255, 255, 255, 0.82) !important;
}
.gf-has-primary-grad .gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-check,
.gf-has-btn-grad .gf-radio-card input:checked + .gf-radio-card-inner .gf-radio-card-check {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* 2-column premium grid (placeholder card_2col / card_auto_2col): forces exactly
   2 columns on wide forms instead of auto-fit collapsing many narrow cards onto
   one row. Mobile falls back to 1 column. */
.gf-cards-2col {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
/* Responsive: 2 columns on small screens */
@media (max-width: 480px) {
    .gf-radio-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Icon-left stays a single column (rows), never 2-up. */
    .gf-cards-iconleft {
        grid-template-columns: 1fr;
    }
}
/* 2col → 1col on phones. Placed AFTER the 480px-block so source-order beats it
   (same specificity (0,1,0)), and uses 640px so iPad-portrait phones already
   single-column. .gf-radio-cards.gf-cards-2col raises specificity to (0,2,0)
   so the cascade can't accidentally restore 2-up.
   minmax(0,1fr) (not bare 1fr) lets the column shrink below the intrinsic
   min-content width — long German words like "Versicherungsschutz" otherwise
   blow the column past the phone viewport. */
@media (max-width: 640px) {
    .gf-radio-cards.gf-cards-2col {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Info Box ─────────────────────────────────────────────── */

.gf-info-box {
    background: var(--gf-info-bg, #eff6ff);
    border: 1px solid var(--gf-info-bg, #bfdbfe);
    border-left: 4px solid var(--gf-primary);
    border-radius: var(--gf-radius);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--gf-info-text, #00152B);
    line-height: 1.5;
}
.gf-info-box strong { display: block; margin-bottom: 4px; }

/* ── External CAPTCHA (Turnstile / reCAPTCHA) ─────────────── */

.gf-captcha {
    flex-basis: 100%;
    width: 100%;
    margin: 4px 0 8px;
}

.gf-captcha:empty {
    display: none;
}

/* ── Navigation ───────────────────────────────────────────── */

.gf-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 32px;
    gap: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
   BUTTONS — single source of truth (consolidated).
   Scoped under .ultimate-form / .go-form for specificity. !important is used
   ONLY on the visual properties page builders (Elementor) and themes forcibly
   reset — background, colour, border — so the Design configurator always wins.
   Layout / typography stay normal-weight and overridable. All button design
   settings (Design → Buttons) are wired here via the --gf-btn-* variables.
   ────────────────────────────────────────────────────────────────────────── */
.ultimate-form .gf-btn,
.go-form .gf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--gf-btn-pad-v, 12px) var(--gf-btn-pad-h, 28px);
    border-radius: var(--gf-btn-radius, var(--gf-radius, 8px));
    font-size: var(--gf-btn-font-size, 15px);
    font-weight: var(--gf-btn-font-weight, 600);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background-color .15s;
    border: none !important;
}

/* Primary (next / submit): flat configured colour + a colour-agnostic sheen.
   background-COLOR holds the chosen colour; background-IMAGE is the sheen on
   top — kept separate so the overlay never clobbers the colour. */
.ultimate-form .gf-btn-next,  .go-form .gf-btn-next,
.ultimate-form .gf-btn-submit, .go-form .gf-btn-submit {
    margin-left: auto;
    background-color: var(--gf-btn-primary, var(--gf-primary, #001E3C)) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.14)) !important;
    color: var(--gf-btn-text, #ffffff) !important;
    box-shadow: 0 6px 18px rgba(0,30,60,.22);
}
/* 2.9.4 — flat buttons: opt-in removal of the gloss sheen (keeps the chosen
   solid colour). Default (no class) keeps the sheen → byte-identical. */
.gf-no-btn-sheen .gf-btn-next,
.gf-no-btn-sheen .gf-btn-submit { background-image: none !important; }
.ultimate-form .gf-btn-next:hover,  .go-form .gf-btn-next:hover,
.ultimate-form .gf-btn-submit:hover, .go-form .gf-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,30,60,.30);
    /* "Primary Dark (Hover)" design control. Falls back to the button colour
       so the hover still works when no dark shade is configured. */
    background-color: var(--gf-primary-dk, var(--gf-btn-primary, var(--gf-primary, #00152B))) !important;
}
.ultimate-form .gf-btn-next:active,  .go-form .gf-btn-next:active,
.ultimate-form .gf-btn-submit:active, .go-form .gf-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0,30,60,.20);
}

/* Secondary (back) button. */
.ultimate-form .gf-btn-prev,
.go-form .gf-btn-prev {
    background-color: var(--gf-back-bg, var(--gf-field-bg, #ffffff)) !important;
    color: var(--gf-back-text, var(--gf-text, #111827)) !important;
    border: var(--gf-border-w, 1.5px) solid var(--gf-back-border, var(--gf-border, #d1d5db)) !important;
}
.ultimate-form .gf-btn-prev:hover,
.go-form .gf-btn-prev:hover { filter: brightness(0.97); }

/* Optional always-visible Back button at the TOP of each step (shortcode back_top="1").
   inline-flex so it shrinks to its label and sits at the left, even though
   .gf-step-panel is not a flex container (align-self would be a no-op there). */
.gf-btn-back-top { margin: 0 0 14px; display: inline-flex; }

.gf-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Spinner */
.gf-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gfSpin .7s linear infinite;
}
@keyframes gfSpin { to { transform: rotate(360deg); } }

/* ── Error Summary Box ────────────────────────────────────── */

.gf-error-summary {
    display: none;
    margin-top: 20px;
    padding: 14px 18px;
    background: #fff5f5;
    border: 1.5px solid #fca5a5;
    border-left: 4px solid var(--gf-error);
    border-radius: var(--gf-radius);
    color: #7f1d1d;
    font-size: 13.5px;
    animation: gf-summary-in .2s ease;
}

@keyframes gf-summary-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gf-error-summary-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
    color: #991b1b;
}

.gf-error-summary ul {
    margin: 0;
    padding: 0 0 0 18px;
}

.gf-error-summary li {
    margin-bottom: 4px;
    line-height: 1.5;
}

.gf-error-summary li:last-child { margin-bottom: 0; }

/* ── Messages ─────────────────────────────────────────────── */

.gf-messages { margin-top: 20px; }

.gf-message {
    padding: 14px 18px;
    border-radius: var(--gf-radius);
    font-size: 14px;
    margin-bottom: 12px;
}
.gf-message-error {
    background: #fde8e8;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.gf-message-success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.gf-error { color: var(--gf-error); }

/* ── Composite fields (name / address / date_range / zip-lookup) ───────────
   Side-by-side sub-inputs. Defined as CSS classes (not inline grid styles) so
   layout is robust and never stripped by any sanitizer or theme reset. */

.gf-composite {
    display: grid;
    gap: 8px;
}
/* Two equal columns: name (first/last), date_range (from/to) */
.gf-composite-2 {
    grid-template-columns: 1fr 1fr;
}
/* Address rows */
.gf-composite-row {
    display: grid;
    gap: 8px;
}
.gf-composite-street { grid-template-columns: 3fr 1fr; }  /* street + house no. */
.gf-composite-zip    { grid-template-columns: 1fr 2fr; }  /* zip + city */

/* Date-range from/to hint line */
.gf-composite-hint {
    font-size: 11px;
    color: var(--gf-muted, #6b7280);
    margin-top: 4px;
}

/* Mobile: composite sub-inputs stack so nothing overflows.
   2.9.0 — Breakpoint von 480 auf 640 angehoben, damit er mit dem Feld-Grid-
   Stack-Fallback (@640, alle .gf-field → volle Spalte) fluchtet. Vorher blieben
   im Fenster 481-640px die Sub-Inputs eines vollbreit gestackten Composite-
   Felds (z.B. Straße 3fr/Hausnr 1fr) nebeneinander → Hausnummer-Feld zu schmal. */
@media (max-width: 640px) {
    .gf-composite-2,
    .gf-composite-row,
    .gf-composite-street,
    .gf-composite-zip {
        grid-template-columns: 1fr;
    }
    .gf-composite-hint { display: none; }
}

/* ── Textarea ─────────────────────────────────────────────── */

.gf-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* ── Section Break ────────────────────────────────────────── */

.gf-section-break {
    border-top: 2px solid var(--gf-primary);
    padding-top: 16px;
    margin-top: 8px;
}

.gf-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gf-text);
    margin: 0 0 6px;
}

.gf-section-desc {
    font-size: 13px;
    color: var(--gf-muted);
    margin: 0;
}

/* ── HTML Block ───────────────────────────────────────────── */

.gf-html-block {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gf-text);
}

/* ── Checkbox Group ───────────────────────────────────────── */

.gf-checkbox-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
    border-radius: var(--gf-radius);
    cursor: pointer;
    margin-bottom: 6px;
    background: var(--gf-field-bg, #fff);
    font-size: 14px;
    transition: border-color .15s;
}
.gf-checkbox-group-label:hover { border-color: var(--gf-primary); }
.gf-checkbox-group-label input { display: none; }
.gf-checkbox-group-label input:checked + .gf-checkbox-custom {
    background: var(--gf-primary);
    border-color: var(--gf-primary);
}
.gf-checkbox-group-label input:checked + .gf-checkbox-custom::after {
    content: '';
    width: 10px;
    height: 6px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
}
/* 2.9.4 — checkbox option with a title + smaller subline INSIDE the box.
   Styled with the same Choice-Card title/subtitle tokens (Design editor). */
.gf-checkbox-group-label.gf-has-sub { align-items: flex-start; }
.gf-checkbox-group-label.gf-has-sub .gf-checkbox-custom { margin-top: 2px; }
.gf-checkbox-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gf-checkbox-title {
    font-size: var(--gf-card-title-size, 14px);
    font-weight: var(--gf-card-title-weight, 600);
    color: var(--gf-card-title-color, var(--gf-text));
    line-height: 1.3;
}
.gf-checkbox-sub {
    font-size: var(--gf-card-sub-size, 12px);
    font-weight: 400;
    color: var(--gf-card-sub-color, var(--gf-muted, #6b7280));
    line-height: 1.4;
}

/* ── File Upload ──────────────────────────────────────────── */

.gf-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.gf-file-wrap {
    position: relative;
}

.gf-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px;
    border: var(--gf-border-w, 2px) dashed var(--gf-border);
    border-radius: var(--gf-radius);
    background: var(--gf-bg);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.gf-file-label:hover,
.gf-file-wrap.gf-drag-over .gf-file-label {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt);
}

.gf-file-icon { font-size: 28px; }
.gf-file-text { font-size: 14px; font-weight: 600; color: var(--gf-primary); }
.gf-file-info { margin-top: 4px !important; }

.gf-file-preview {
    margin-top: 10px;
}
.gf-file-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--gf-field-bg, #fff);
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius);
    font-size: 13px;
    margin-bottom: 6px;
}
.gf-file-preview-name { flex: 1; font-weight: 600; word-break: break-all; }
.gf-file-preview-size { color: var(--gf-muted); font-size: 12px; flex-shrink: 0; }
.gf-file-preview-status { font-size: 12px; margin-left: 8px; }

/* ── Save & Continue resume prompt (built in form.js) ── */
.gf-resume-hint {
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.gf-resume-hint .gf-resume-icon { font-size: 18px; }
.gf-resume-hint .gf-resume-text { flex: 1; }
.gf-resume-hint .gf-resume-yes {
    padding: 6px 12px;
    background: #001E3C;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.gf-resume-hint .gf-resume-no {
    padding: 6px 12px;
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
}

/* ── Rating Stars ─────────────────────────────────────────── */

.gf-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gf-star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    color: #d1d5db;
    padding: 0;
    line-height: 1;
    transition: color .15s, transform .1s;
}

.gf-star:hover,
.gf-star.gf-active {
    color: #f59e0b;
}

.gf-star:hover { transform: scale(1.15); }

.gf-rating-value {
    font-size: 13px;
    color: var(--gf-muted);
    margin-left: 6px;
    font-weight: 600;
}

/* ── Confirmation Message ─────────────────────────────────── */

/* ── Success window (2.9.0) — modern: gradient disc + pulse ring + animated
   checkmark. Schriftfarben sind BEWUSST fest (unabhängig vom Theme/Design-
   Editor), damit die Bestätigung immer gut lesbar bleibt. Grünton B. */
.gf-confirmation {
    padding: 40px 28px;
    text-align: center;
    background: #f0fdf4;                 /* heller Grün-Tint */
    border: 1px solid #bbf7d0;
    border-radius: var(--gf-radius, 14px);
    animation: gfConfirmIn .45s ease both;
}
/* Container for the admin-set confirmation HTML (built in form.js/payment.js).
   Protective base styling so non-h3/p markup never renders unstyled. */
.gf-confirmation .gf-confirm-body {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: #374151;
}
@keyframes gfConfirmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.gf-confirm-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
}
.gf-confirm-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #22c55e;
    opacity: .18;
    animation: gfConfirmPulse 1.8s ease-out infinite;
}
@keyframes gfConfirmPulse { 0% { transform: scale(.85); opacity: .35; } 100% { transform: scale(1.5); opacity: 0; } }
.gf-confirm-disc {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    /* 2.9.4 — tokenised; defaults keep the original green disc. */
    background: linear-gradient(135deg, var(--gf-confirm-from, #15803d), var(--gf-confirm-to, #4ade80));
    box-shadow: 0 8px 20px rgba(21, 128, 61, .28);
}
.gf-confirm-disc svg { width: 34px; height: 34px; }
.gf-confirm-check {
    stroke: var(--gf-confirm-icon, #fff); /* 2.9.4 — tokenised checkmark colour */
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    /* 2.9.1-fix — base state is VISIBLE (offset 0). The checkmark used to start
       at offset 48 (fully hidden) and only became visible via the draw
       animation; if that animation never ran (browser power-saver, some mobile
       browsers, slow paint) OR was frozen by a fill-mode, the checkmark stayed
       invisible forever — the "check icon missing" report. The hidden→drawn
       phase now lives INSIDE the keyframes (no fill-mode, no separate delay),
       so the resting/fallback value is always the base 0 = fully visible. */
    stroke-dashoffset: 0;
    animation: gfConfirmDraw .7s ease;
}
@keyframes gfConfirmDraw { 0%, 30% { stroke-dashoffset: 48; } 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .gf-confirmation, .gf-confirm-pulse, .gf-confirm-check { animation: none !important; }
    .gf-confirm-check { stroke-dashoffset: 0; }
}

/* Feste Schriftfarben + Typo — NICHT über --gf-* (User-Wunsch: IMMER feste
   Farbtöne). Variante 3 (Editorial): großer grüner Titel + schmale, normal-
   gewichtete Beschreibung. NUCLEAR-Spezifität: doppelte Klasse erzeugt (0,3,0)
   bzw. (0,3,1), damit selbst aggressive Theme-/Page-Builder-Selektoren wie
   `body .entry-content .gf-confirm-title` (0,2,1) NICHT durchschlagen. Jede
   Property mit !important gegen Theme-!important. Siehe Memory: gleiche Falle
   wie der Mobile-grid-column-Bug (Spezifitäts-Gleichstand verliert). */
.gf-confirmation .gf-confirm-title.gf-confirm-title {
    margin: 0 0 10px;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--gf-confirm-title-color, #15803d) !important;          /* Grünton B */
    font-style: normal !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
}
.gf-confirmation .gf-confirm-text.gf-confirm-text,
.gf-confirmation .gf-confirm-text.gf-confirm-text p {
    font-size: 14.5px !important;
    font-weight: 400 !important;        /* nicht fett */
    line-height: 1.7 !important;
    color: var(--gf-confirm-text-color, #475569) !important;
    font-style: normal !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
}
/* Schmaler, zentrierter Textblock (Variante 3) — Breite genau EINMAL am
   Text-Container gesetzt (kein widersprüchliches max-width mehr). */
.gf-confirmation .gf-confirm-text.gf-confirm-text { max-width: 320px; margin: 0 auto; }
.gf-confirmation .gf-confirm-text.gf-confirm-text p { margin: 0; }
.gf-confirmation .gf-confirm-title.gf-confirm-title a,
.gf-confirmation .gf-confirm-text.gf-confirm-text a { text-decoration: none !important; color: inherit !important; }
/* Legacy-Fallback + Elementor-Widget-Default: Bestätigungstext ohne eigene
   .gf-confirm-*-Klassen (selten; backfill migriert das normalerweise).
   .gf-confirmation.gf-confirmation = (0,2,1), deckt jeden <h3>/<p> im Fenster ab. */
.gf-confirmation.gf-confirmation h3 { margin: 0 0 10px; font-size: 26px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--gf-confirm-title-color, #15803d) !important; text-decoration: none !important; font-style: normal !important; }
.gf-confirmation.gf-confirmation p  { margin: 0 auto; max-width: 320px; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.7 !important; color: var(--gf-confirm-text-color, #475569) !important; text-decoration: none !important; font-style: normal !important; }

/* ── Payment Field ────────────────────────────────────────── */

.gf-field-payment { width: 100%; }

.uf-payment-box {
    border:        2px solid var(--gf-border, #e2e8f0);
    border-radius: var(--gf-radius, 8px);
    background:    #fff;
    overflow:      hidden;
}

.uf-payment-amount {
    font-size:   17px;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.uf-stripe-wrap,
.uf-paypal-wrap {
    padding: 16px 18px;
}

.uf-stripe-wrap { border-bottom: 1px solid var(--gf-border, #e2e8f0); }

.uf-stripe-element {
    padding:       10px 12px;
    border:        1px solid var(--gf-border, #e2e8f0);
    border-radius: var(--gf-radius, 6px);
    background:    #fafafa;
    transition:    border-color .15s;
}

.uf-stripe-element:focus-within {
    border-color: var(--gf-primary, #001E3C);
    background:   #fff;
    box-shadow: 0 0 0 var(--gf-focus-ring-width, 3px) var(--gf-focus-ring-color, rgba(0,30,60,.12));
}

.uf-payment-error {
    margin:        0;
    padding:       10px 18px;
    font-size:     13px;
    color:         #dc2626;
    background:    #fef2f2;
    border-top:    1px solid #fee2e2;
}

/* ── Success / Error Messages ────────────────────────────── */

.gf-success-message {
    padding:       24px;
    background:    #d1fae5;
    border:        1px solid #6ee7b7;
    border-radius: var(--gf-radius, 8px);
    color:         #065f46;
    text-align:    center;
}

.gf-error-message {
    padding:       14px 18px;
    background:    #fef2f2;
    border:        1px solid #fca5a5;
    border-radius: var(--gf-radius, 8px);
    color:         #dc2626;
}

/* ── Responsive ───────────────────────────────────────────── */

/* Prevent any child from breaking out of the form container */
.go-form *,
.ultimate-form * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Images and iframes inside the form never overflow */
.go-form img,
.go-form iframe,
.ultimate-form img,
.ultimate-form iframe {
    height: auto;
}

@media (max-width: 600px) {
    /* Hide per-step text labels on mobile, show only dot numbers (the markup
       renders .gf-progress-node > .gf-progress-label; the old .gf-progress-step
       selector matched nothing, so the labels were never actually hidden). */
    .gf-progress-node .gf-progress-label { display: none; }
    /* Track top stays in sync with dot center (14px) - half track (2px) = 12px */
    .gf-progress-track { top: 12px; }
    /* 2.9.0 — `.gf-btn { padding; font-size }` HIER ENTFERNT: Spezifität 0,1,0
       verlor immer gegen `.ultimate-form .gf-btn` (0,2,0), war also seit jeher
       wirkungslos. Buttons nutzen überall die konfigurierte Größe (--gf-btn-*).
       Bewusst NICHT „repariert", da das die Button-Optik aller Bestandsnutzer
       auf Mobile verkleinert hätte. Das sinnvolle Mobile-Verhalten (volle
       Breite für Next/Submit) steht unten und greift korrekt. */
    .gf-rating .gf-star { font-size: 24px; }
    .uf-payment-amount { font-size: 15px; }
    /* Step nav: stack buttons vertically on very small screens */
    .gf-step-nav { flex-wrap: wrap; }
    .gf-btn-next, .gf-btn-submit { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPEC-BOOST — Override-resistente Regeln für Labels/Inputs/Headings.
   Spezifität 0,2,1 + !important → schlägt Theme-Defaults und Elementor's
   `.elementor-edit-area label/input/...` Regeln in jedem Kontext.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper: Card-Optik aus Design-Vars — höchste Spezifität.
   2.9.1 — padding + border-radius nutzen jetzt die Design-Vars statt
   hardcodierter Werte. Vorher überschrieb diese Regel `--gf-form-radius`
   und `--gf-form-pad-v/h` komplett, der User-Slider hatte am Frontend
   keinen Effekt. */
.go-form.go-form, .ultimate-form.ultimate-form {
    background:    var(--gf-bg, #f9fafb) !important;
    padding:       var(--gf-form-pad-v, 30px) var(--gf-form-pad-h, 30px) !important;
    border-radius: var(--gf-form-radius, 12px) !important;
    box-shadow:    0 4px 24px rgba(0,0,0,.08) !important;
    color:         var(--gf-text, #111827) !important;
    font-family:   var(--gf-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
}

/* (duplicate .gf-step-header h2 block removed — defined above with full spec-boost reset around line 206) */
/* (duplicate .gf-step-description removed — defined above) */

/* Labels (auch <legend class="gf-label">) */
.go-form label.gf-label,
.go-form legend.gf-label,
.ultimate-form label.gf-label,
.ultimate-form legend.gf-label {
    font-weight: var(--gf-label-weight, 600) !important;
    font-size:   var(--gf-label-size, 14px) !important;
    color:       var(--gf-label-color, var(--gf-text, #111827)) !important;
    opacity:     1 !important;
    line-height: 1.4 !important;
}

/* Inputs / Selects / Textareas.
   background-color LONGHAND, not the shorthand — the shorthand would reset
   background-image and erase the .gf-select custom SVG arrow (the select has
   appearance:none, so without the arrow it looks like a plain text input). */
.go-form input.gf-input,
.go-form select.gf-select,
.go-form textarea.gf-input,
.ultimate-form input.gf-input,
.ultimate-form select.gf-select,
.ultimate-form textarea.gf-input {
    background-color: var(--gf-field-bg, #ffffff) !important;
    color:         var(--gf-text, #111827) !important;
    border:        var(--gf-border-w, 1.5px) solid var(--gf-border, #d1d5db) !important;
    border-radius: var(--gf-radius, 8px) !important;
    padding:       var(--gf-pad-v, 10px) var(--gf-pad-h, 14px) !important;
    font-size:     var(--gf-input-size, 15px) !important;
    font-family:   inherit !important;
    width:         100% !important;
    box-sizing:    border-box !important;
    box-shadow:    none !important;
    outline:       none !important;
    opacity:       1 !important;
}
/* Keep the bulletproof background-image reset for text inputs/textareas only —
   the select must KEEP its image (that's the custom dropdown arrow). */
.go-form input.gf-input,
.go-form textarea.gf-input,
.ultimate-form input.gf-input,
.ultimate-form textarea.gf-input {
    background-image: none !important;
}

/* Focus + invalid states must survive the bulletproof reset above.
   Without these, themes/Elementor (and the !important reset itself)
   would strip the focus ring and the red invalid border. */
.go-form .gf-field input.gf-input:focus,
.go-form .gf-field select.gf-select:focus,
.go-form .gf-field textarea.gf-input:focus,
.ultimate-form .gf-field input.gf-input:focus,
.ultimate-form .gf-field select.gf-select:focus,
.ultimate-form .gf-field textarea.gf-input:focus {
    border-color: var(--gf-primary) !important;
    box-shadow: 0 0 0 var(--gf-focus-ring-width, 3px) var(--gf-focus-ring-color, rgba(0,30,60,.12)) !important;
    outline:      none !important;
}
.go-form .gf-field input.gf-input.gf-invalid,
.go-form .gf-field select.gf-select.gf-invalid,
.go-form .gf-field textarea.gf-input.gf-invalid,
.ultimate-form .gf-field input.gf-input.gf-invalid,
.ultimate-form .gf-field select.gf-select.gf-invalid,
.ultimate-form .gf-field textarea.gf-input.gf-invalid {
    border-color: var(--gf-error) !important;
}
.go-form .gf-field input.gf-input.gf-invalid:focus,
.ultimate-form .gf-field input.gf-input.gf-invalid:focus {
    box-shadow: 0 0 0 3px rgba(200,30,30,.12) !important;
}

/* Helper text */
.go-form .gf-helper-text,
.ultimate-form .gf-helper-text {
    font-size: var(--gf-helper-size, 13px) !important;
    color:     var(--gf-helper-color, var(--gf-muted, #6b7280)) !important;
    opacity:   1 !important;
}

/* Button styles live in the single consolidated BUTTONS block above — do not
   re-add per-button overrides here (that caused the earlier #0062C4 conflict). */

/* Field gap (in case Elementor overrides .gf-fields gap) */
.go-form .gf-fields,
.ultimate-form .gf-fields {
    gap: var(--gf-field-gap, 18px) !important;
}

/* Radio + Checkbox label cards */
.go-form label.gf-radio-label,
.go-form label.gf-checkbox-label,
.go-form label.gf-checkbox-group-label,
.ultimate-form label.gf-radio-label,
.ultimate-form label.gf-checkbox-label,
.ultimate-form label.gf-checkbox-group-label {
    background:    var(--gf-field-bg, #ffffff) !important;
    border:        var(--gf-border-w, 1.5px) solid var(--gf-border, #d1d5db) !important;
    border-radius: var(--gf-radius, 8px) !important;
    color:         var(--gf-text, #111827) !important;
    opacity:       1 !important;
}

/* ── Signature pad ─────────────────────────────────────────── */
.go-form .gf-signature,
.ultimate-form .gf-signature { position: relative; border: var(--gf-border-w, 1.5px) solid var(--gf-border, #d1d5db); border-radius: var(--gf-radius, 8px); background: var(--gf-field-bg, #fff); overflow: hidden; }
.go-form .gf-signature-canvas,
.ultimate-form .gf-signature-canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.go-form .gf-signature-clear,
.ultimate-form .gf-signature-clear { position: absolute; top: 8px; right: 8px; font-size: 12px; font-weight: 700; color: var(--gf-text, #1f2937); background: rgba(255,255,255,.85); border: 1px solid var(--gf-border, #d1d5db); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.go-form .gf-signature-clear:hover,
.ultimate-form .gf-signature-clear:hover { background: #fff; }

/* Accessibility: keyboard focus ring for frontend form controls (WCAG 2.4.7). */
.go-form :focus-visible,
.go-form input:focus-visible, .go-form select:focus-visible,
.go-form textarea:focus-visible, .go-form button:focus-visible {
    outline: 2px solid var(--gf-primary, #001E3C);
    outline-offset: 2px;
}


/* ── Conversational mode (shortcode mode="conversational") — one field/screen ──
   Fully scoped to .gf-conversational → inert unless opted in. Reuses the existing
   multi-step engine (each field becomes its own step panel, see class-shortcode.php).
   The node-based step indicator is hidden here (one field per step would overflow
   it); navigation uses the existing Next/Back buttons. Default rules + their one
   @media override are paired in this block (no split breakpoint). */
.gf-conversational .gf-progress { display: none; }
/* One field-step at a time: `display:flex` must apply ONLY to the active panel,
   otherwise it overrides the base `.gf-step-panel{display:none}` for every panel
   and the whole flattened form (every field + its Back button) shows at once. */
.gf-conversational .gf-step-panel { min-height: 200px; flex-direction: column; justify-content: center; }
.gf-conversational .gf-step-panel.active { display: flex; animation: gf-conv-in 0.35s ease both; }
@keyframes gf-conv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gf-conversational .gf-label { font-size: 1.35rem; line-height: 1.3; margin-bottom: 0.9rem; }
.gf-conversational .gf-fields { gap: 1rem; }
.gf-conversational .gf-input,
.gf-conversational .gf-select,
.gf-conversational textarea.gf-input { font-size: 1.1rem; padding: 0.85rem 1rem; }
@media (max-width: 640px) {
    .gf-conversational .gf-label { font-size: 1.15rem; }
    .gf-conversational .gf-input,
    .gf-conversational .gf-select,
    .gf-conversational textarea.gf-input { font-size: 1rem; }
}