/* ============================================================
   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:    #00375B;
    --gf-primary-dk: #002340;
    --gf-primary-lt: #eaf3fa;
    --gf-accent:     #0080C0;
    --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 */
    background:    var(--gf-bg, #f9fafb);
    /* !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;
    border-radius: 12px;
    box-shadow:    0 4px 24px rgba(0,0,0,.08);

    /* 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;
}

/* 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 (Elementor "columns" option) ─────────── */

.go-form.gf-cols-2 .gf-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.go-form.gf-cols-2 .gf-field-wrap.gf-full-width,
.go-form.gf-cols-2 .gf-field-wrap[data-type="section"],
.go-form.gf-cols-2 .gf-field-wrap[data-type="html"],
.go-form.gf-cols-2 .gf-field-wrap[data-type="checkbox_group"] {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .go-form.gf-cols-2 .gf-fields {
        grid-template-columns: 1fr;
    }
}

/* ── 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;
}

/* ── 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, #eaf3fa);
}

.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, #00375B), #0080C0);
    border-radius: 999px;
    transition: width .4s ease;
    width: 0%;
}

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

.gf-steps-wrapper { overflow: hidden; }

.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); }
}

.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;
    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;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gf-field-gap, 22px);
}

.gf-field {
    grid-column: 1 / -1;      /* default: full width — robust gegen Stale-Klassen */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.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 always span full */
.gf-field.gf-field-section,
.gf-field.gf-field-html,
.gf-field.gf-field-info   { grid-column: span 12 !important; }

/* Mobile: everything stacks */
@media (max-width: 640px) {
    .gf-fields { grid-template-columns: 1fr; }
    .gf-field  { grid-column: 1 !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-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, 14px);
    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;
}

/* 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 3px rgba(0,55,91,.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;
}

/* 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);
    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: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--gf-border);
    border-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-primary);
    border-color: var(--gf-primary);
}
.gf-checkbox-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;
}

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

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

.gf-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.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-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.gf-radio-card {
    cursor: pointer;
    display: block;
}
.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: 8px;
    padding: 18px 12px 14px;
    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;
}
.gf-radio-card:hover .gf-radio-card-inner {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt, #eaf3fa);
}
.gf-radio-card input:checked + .gf-radio-card-inner {
    border-color: var(--gf-primary);
    background: var(--gf-primary-lt, #eaf3fa);
    box-shadow: 0 0 0 3px rgba(0,55,91,.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: 32px;
    line-height: 1;
}

/* 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;
}

/* Label below icon/image */
.gf-radio-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gf-text);
    line-height: 1.3;
}

/* Responsive: 2 columns on small screens */
@media (max-width: 480px) {
    .gf-radio-cards {
        grid-template-columns: repeat(2, 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, #002340);
    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;
}

/* Higher specificity (.go-form .gf-btn) than Elementor/theme button rules */
.go-form .gf-btn,
.ultimate-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: none;
    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;
    transition: all .15s;
    text-decoration: none;
    box-shadow: none;
}
.gf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* All button design settings from Design → Buttons are wired here */
    padding: var(--gf-btn-pad-v, 12px) var(--gf-btn-pad-h, 28px);
    border: none;
    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);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    line-height: 1;
}

.go-form .gf-btn-next, .ultimate-form .gf-btn-next,
.go-form .gf-btn-submit, .ultimate-form .gf-btn-submit,
.gf-btn-next, .gf-btn-submit {
    background: var(--gf-btn-primary, var(--gf-primary));
    color: var(--gf-btn-text, #fff);
    border: none;
    margin-left: auto;
}
.go-form .gf-btn-next:hover, .ultimate-form .gf-btn-next:hover,
.go-form .gf-btn-submit:hover, .ultimate-form .gf-btn-submit:hover,
.gf-btn-next:hover, .gf-btn-submit:hover {
    background: var(--gf-primary-dk);
    transform: translateY(-1px);
}

.go-form .gf-btn-prev, .ultimate-form .gf-btn-prev,
.gf-btn-prev {
    background: var(--gf-field-bg, #fff);
    color: var(--gf-text);
    border: var(--gf-border-w, 1.5px) solid var(--gf-border);
}
.go-form .gf-btn-prev:hover, .ultimate-form .gf-btn-prev:hover,
.gf-btn-prev:hover { background: var(--gf-bg); }

.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); }

/* ── Trust line ───────────────────────────────────────────────
   Subtle reassurance under the form — every form ships with the
   built-in 5-layer spam protection. */
.gf-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--gf-muted, #6b7280);
}
.gf-trust-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--gf-success, #057a55);
}

/* ── 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 */
@media (max-width: 480px) {
    .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;
}

/* ── 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-hint { font-size: 12px; color: var(--gf-muted); }
.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-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gf-error);
    font-size: 16px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ── 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 ─────────────────────────────────── */

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

.gf-confirmation h3 {
    margin: 0 0 12px;
    font-size: 20px;
}

.gf-confirmation .gf-check-icon {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

/* ── 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-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 18px;
    background:      linear-gradient(135deg, #00375B 0%, #0080C0 100%);
    color:           #fff;
}

.uf-payment-icon  { font-size: 20px; flex-shrink: 0; }
.uf-payment-title { font-weight: 600; font-size: 15px; flex: 1; }
.uf-payment-amount {
    font-size:   17px;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.uf-payment-method-label {
    font-size:    12px;
    font-weight:  600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:        var(--gf-muted, #64748b);
    margin:       0 0 8px;
}

.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, #00375B);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(0,55,91,.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 step labels on mobile, show only dot numbers */
    .gf-progress-step span { display: none; }
    /* Track top stays in sync with dot center (14px) - half track (2px) = 12px */
    .gf-progress-track { top: 12px; }
    .gf-btn { padding: 10px 18px; font-size: 14px; }
    .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 */
.go-form.go-form, .ultimate-form.ultimate-form {
    background:    var(--gf-bg, #f9fafb) !important;
    padding:       28px 32px !important;
    border-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;
}

/* Step-Header */
.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;
    color:       var(--gf-heading-color,  var(--gf-text, #111827)) !important;
}
/* (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 */
.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:    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;
}

/* 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 3px rgba(0,55,91,.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;
}

/* Buttons */
.go-form button.gf-btn,
.ultimate-form button.gf-btn {
    background:    linear-gradient(135deg, var(--gf-btn-primary, var(--gf-primary, #00375B)), #0080C0) !important;
    color:         var(--gf-btn-text, #ffffff) !important;
    border:        none !important;
    border-radius: var(--gf-btn-radius, 8px) !important;
    padding:       var(--gf-btn-pad-v, 12px) var(--gf-btn-pad-h, 28px) !important;
    font-size:     var(--gf-btn-font-size, 15px) !important;
    font-weight:   var(--gf-btn-font-weight, 600) !important;
    box-shadow:    none !important;
}
.go-form button.gf-btn-prev,
.ultimate-form button.gf-btn-prev {
    background: 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;
}

/* Primary CTA depth — colour-agnostic gradient overlay + soft lift.
   Works on top of any --gf-btn-primary the design configurator sets. */
.go-form button.gf-btn-next,
.go-form button.gf-btn-submit,
.ultimate-form button.gf-btn-next,
.ultimate-form button.gf-btn-submit {
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.14)) !important;
    box-shadow: 0 6px 18px rgba(0,55,91,.22) !important;
}
.go-form button.gf-btn-next:hover,
.go-form button.gf-btn-submit:hover,
.ultimate-form button.gf-btn-next:hover,
.ultimate-form button.gf-btn-submit:hover {
    box-shadow: 0 10px 26px rgba(0,55,91,.30) !important;
    transform: translateY(-2px);
}
.go-form button.gf-btn-next:active,
.go-form button.gf-btn-submit:active,
.ultimate-form button.gf-btn-next:active,
.ultimate-form button.gf-btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0,55,91,.20) !important;
}

/* 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, #00375B);
    outline-offset: 2px;
}