/**
 * Advanced Form Builder Pro - Public Styles v2.1.0
 */

/* === THEME-PROOF MARGIN RESET ===
   WordPress-Themes wie Betheme injizieren vertikale Margins auf generische
   Formular-Elemente (input, label, p, fieldset, h1-h6) via hoch-spezifische
   Selektoren wie `.content form input { margin: 0 0 20px }`. Diese Margins
   addieren sich auf das Grid row-gap und erzeugen die vom User beklagten
   "unnötig weiten Abstände".

   Wir neutralisieren deshalb ALLE vertikalen Margins innerhalb des Formulars.
   !important auf einem class-scoped Selektor schlägt Theme-Regeln, da Themes
   fast nie !important auf Margins setzen.

   Label-zu-Input Abstand wird über flex gap gesteuert (statt margin-bottom),
   weil flex `gap` vom Theme nicht via margin-Regeln überschrieben werden kann. */
.afb-form,
.afb-form *,
.afb-form *::before,
.afb-form *::after {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Grid-Zellen als Flex-Column: interner Label→Input Abstand via `gap`,
   die vom Theme nicht angreifbar ist. */
.afb-form .afb-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: start;  /* verhindert Zell-Stretch und damit visuelle Zusatzhöhe */
    min-width: 0;       /* verhindert Grid-Blowout bei langen Inhalten */
}

/* Explizit gewünschte Abstände mit !important wieder einführen.
   Diese Re-Introduce-Liste muss jeden intentionalen vertikalen Abstand
   im Formular enthalten, da der universelle Reset alles auf 0 setzt.
   Hinweis: 3rd-Party-Embeds (reCAPTCHA, Stripe) innerhalb .afb-form
   verlieren ihre intrinsischen Margins. Bei Bedarf müssen deren
   Wrapper-Margins hier expliziit wieder freigeschaltet werden. */
/* Einheitlicher Sub-Element-Abstand (Label→Input-Rhythmus): 4px.
   Gilt für Fehlertext unter Feld, Info-Zeile unter File-Input,
   und Aktions-Buttons unter Signatur-Canvas. */
.afb-form .afb-field-error:not(:empty) { margin-top: 4px !important; }
.afb-form .afb-form-messages:not(:empty) { margin-top: 15px !important; }
.afb-form .afb-message:not(:last-child) { margin-bottom: 15px !important; }
.afb-form .afb-field-gdpr { margin-top: 10px !important; }
.afb-form .afb-signature-actions { margin-top: 4px !important; }
.afb-form .afb-file-info { margin-top: 4px !important; }
/* Checkbox/Radio-Kasten vertikal mit erster Textzeile ausrichten
   (align-items: flex-start am Label verlangt diesen kleinen Offset). */
.afb-form .afb-radio, .afb-form .afb-checkbox { margin-top: 2px !important; }

/* Single-Checkbox-Wrapper: Header → Label-Abstand via flex gap (theme-proof). */
.afb-form .afb-single-checkbox-wrapper {
    display: flex; flex-direction: column; gap: 4px;
}

/* Single-Checkbox: Kästchen + Text in EINER Zeile, Text vertikal mittig.
   Block-Themes (z.B. Twenty Twenty-Five) zwingen .afb-checkbox-label teils auf
   display:block, wodurch langer Text unter das Kästchen bricht. Höhere
   Spezifität + !important stellt die Flex-Ausrichtung sicher. */
.afb-form .afb-single-checkbox-label {
    display: flex !important;
    align-items: center !important;
}
.afb-form .afb-single-checkbox-label .afb-checkbox {
    margin-top: 0 !important; /* bei zentrierter Ausrichtung kein flex-start-Offset */
}

/* Paragraphen innerhalb Content-Feldern dürfen internen Abstand haben */
.afb-form .afb-paragraph + .afb-paragraph { margin-top: 6px !important; }

/* === FORM WRAPPER === */
/* .afb-form-wrapper ist AUSSERHALB des Reset-Scopes (der Reset ist `.afb-form *`),
   deshalb kein !important nötig. */
.afb-form-wrapper { margin: 20px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.afb-form {
    background: #fff; border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow: hidden;
}

.afb-form-header {
    background: linear-gradient(135deg, #ac2221 0%, #8b1c1b 100%);
    color: #fff; padding: 25px 30px; text-align: center;
}
.afb-form-title { margin: 0; font-size: 22px; font-weight: 600; }

.afb-form-body { padding: 0; } /* Kein Padding - wird über gridPadding gesteuert */
.afb-form-footer { padding: 10px 30px 30px; }
/* Nur Padding, wenn tatsächlich eine Nachricht vorhanden ist, sonst leerer Raum unterhalb des Buttons */
.afb-form-messages { padding: 0 30px; }
.afb-form-messages:not(:empty) { padding: 0 30px 20px; }

/* === GRID SYSTEM === */
.afb-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* Gaps werden direkt im inline style gesetzt */
}

/* === RESPONSIVE DESIGN === */

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .afb-form-wrapper { max-width: 100% !important; padding: 0 15px; }
    .afb-form-body { padding: 0; } /* Kein Padding - wird über gridPadding gesteuert */
    .afb-form-footer { padding: 10px 25px 25px; }
    
    /* Felder mit 1-4 Spalten bleiben, 5-8 werden halbiert, 9-12 voll */
    .afb-field[style*="span 5"],
    .afb-field[style*="span 6"],
    .afb-field[style*="span 7"],
    .afb-field[style*="span 8"] { grid-column: span 6 !important; }
    
    .afb-field[style*="span 9"],
    .afb-field[style*="span 10"],
    .afb-field[style*="span 11"],
    .afb-field[style*="span 12"] { grid-column: span 12 !important; }
}

/* Mobile Landscape (480px - 768px) */
@media (max-width: 768px) {
    .afb-form-wrapper { padding: 0 10px; }
    .afb-form-header { padding: 20px; }
    .afb-form-title { font-size: 18px; }
    .afb-form-body { padding: 0; } /* Kein Padding - wird über gridPadding gesteuert */
    .afb-form-footer { padding: 10px 20px 20px; }

    .afb-grid {
        grid-template-columns: 1fr;
    }
    
    /* Alle Felder volle Breite auf Mobile */
    .afb-field { grid-column: span 1 !important; width: 100% !important; }
    
    /* Radio/Checkbox horizontal wenn genug Platz */
    .afb-radio-group, .afb-checkbox-group {
        flex-direction: column; gap: 10px;
    }
    
    /* Signature anpassen */
    .afb-signature-canvas { 
        width: 100% !important; 
        height: auto !important;
        min-height: 120px;
    }
    
    /* Button volle Breite auf Mobile */
    .afb-btn-submit { width: 100%; justify-content: center; }
    .afb-submit-wrapper { text-align: center !important; }
}

/* Mobile Portrait (unter 480px) */
@media (max-width: 480px) {
    .afb-form-wrapper { padding: 0 5px; }
    .afb-form { border-radius: 0; }
    .afb-form-header { padding: 15px; border-radius: 0; }
    .afb-form-title { font-size: 16px; }
    .afb-form-body { padding: 0; } /* Kein Padding - wird über gridPadding gesteuert */
    .afb-form-footer { padding: 10px 15px 15px; }
    
    .afb-input, .afb-textarea, .afb-select {
        padding: 10px 12px; font-size: 16px; /* Verhindert Zoom auf iOS */
    }
    
    .afb-radio-label, .afb-checkbox-label {
        padding: 10px; font-size: 14px;
    }
    
    .afb-btn-submit { 
        padding: 14px 20px; 
        font-size: 16px;
        width: 100%;
    }
    
    .afb-fieldset legend { font-size: 13px; }
    .afb-field label { font-size: 13px; }
    
    /* Signature kleiner */
    .afb-signature-canvas { min-height: 100px; }
    
    /* Messages */
    .afb-message { padding: 12px 15px; font-size: 14px; }
}

/* Touch-Optimierung */
@media (pointer: coarse) {
    .afb-input, .afb-textarea, .afb-select {
        min-height: 48px; /* Touch-freundliche Größe */
    }
    
    .afb-radio, .afb-checkbox {
        width: 22px; height: 22px;
    }
    
    .afb-radio-label, .afb-checkbox-label {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    .afb-btn-submit { min-height: 50px; }
    .afb-signature-clear { min-height: 44px; padding: 10px 15px; }
}

/* === FIELDS ===
   .afb-field nutzt flex-column + gap (siehe Theme-Reset oben).
   margin-bottom auf label ist durch den Reset auf 0 erzwungen; das `gap: 4px`
   am .afb-field liefert den visuellen Label→Input-Abstand Theme-sicher. */
.afb-field {
    box-sizing: border-box;
}

.afb-field label {
    display: block; font-weight: 500;
    font-size: 14px; color: #333; line-height: 1.25;
}
.afb-required { color: #dc3232; margin-left: 2px; }

.afb-input, .afb-textarea, .afb-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px;
    border: 1px solid #999999; /* WCAG AA: 3:1 contrast */
    border-radius: 6px;
    font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}
.afb-input:focus, .afb-textarea:focus, .afb-select:focus {
    border-color: #ac2221; outline: none;
    box-shadow: 0 0 0 3px rgba(172,34,33,0.1);
}
.afb-input::placeholder, .afb-textarea::placeholder {
    color: #767676; /* WCAG AA: 4.5:1 contrast */
}
.afb-textarea { min-height: 80px; resize: vertical; }
.afb-select { cursor: pointer; }

/* === CHECKBOX & RADIO === */
/* Fieldset als flex-column, damit legend->group Abstand per gap gesteuert wird. */
.afb-fieldset {
    border: none; padding: 0;
    /* gap = Legend→Optionsgruppe; identisch zum Label→Input-Abstand (.afb-field gap: 4px) */
    display: flex; flex-direction: column; gap: 4px;
}
.afb-fieldset legend {
    font-weight: 500; font-size: 14px; color: #333;
    padding: 0; line-height: 1.25;
}
.afb-radio-group, .afb-checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.afb-radio-label, .afb-checkbox-label {
    display: flex; align-items: flex-start; gap: 8px;
    cursor: pointer; font-size: 14px; padding: 6px 10px;
    border: 1px solid #eee; border-radius: 6px; transition: all 0.2s;
    line-height: 1.4;
    margin: 0; /* Theme-Margins (z.B. p-like defaults) neutralisieren */
}
.afb-radio-label:hover, .afb-checkbox-label:hover {
    border-color: #ac2221; background: #f9f9f9;
}
.afb-radio, .afb-checkbox {
    width: 18px; height: 18px; margin: 0; cursor: pointer;
    /* Kompensiert align-items: flex-start am Label-Container, damit das
       Kästchen bei einzeiligen Optionen optisch mit der Textmitte fluchtet. */
    flex-shrink: 0;
    margin-top: 2px;
}

/* === FILE UPLOAD === */
.afb-file-wrapper { position: relative; }
.afb-file {
    width: 100%; padding: 12px 15px;
    border: 2px dashed #ddd; border-radius: 6px;
    background: #f9f9f9; cursor: pointer;
}
.afb-file:hover { border-color: #ac2221; }
.afb-file-info { display: block; margin-top: 5px; font-size: 12px; color: #888; }

/* === SIGNATURE === */
.afb-signature-wrapper { position: relative; }
.afb-signature-canvas {
    display: block; width: 100%;
    /* Höhe wird per Feldeinstellung im inline style gesetzt.
       max-width (ebenfalls inline) verhindert Verzerrung des Canvas-Inhalts
       über die intrinsische Breite hinaus. */
    border: 1px solid #ddd; border-radius: 6px;
    cursor: crosshair; touch-action: none;
    background: #fff;
}
.afb-signature-actions { margin-top: 6px; }
.afb-signature-clear {
    padding: 8px 16px;
    min-height: 44px; /* WCAG 2.5.5: Touch target size */
    font-size: 13px;
    background: #f0f0f1;
    border: 1px solid #999999; /* WCAG AA: 3:1 contrast */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.afb-signature-clear:hover { background: #e5e5e5; }
.afb-signature-clear:focus {
    outline: 2px solid #ac2221;
    outline-offset: 2px;
}

/* === ADDRESS FIELD === */
/* gap = Haupt-Label→Feld-Grid; identisch zum Label→Input-Abstand in .afb-field */
.afb-address-group { display: flex; flex-direction: column; gap: 4px; }
.afb-address-main-label {
    font-weight: 500; font-size: 14px; color: #333;
    line-height: 1.25;
}
.afb-address-fields {
    display: grid;
    grid-template-columns: 1fr 120px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 10px;
}
.afb-address-field {
    position: relative;
    box-sizing: border-box;
}
.afb-address-street { grid-column: 1; grid-row: 1; }
.afb-address-number { grid-column: 2; grid-row: 1; }
.afb-address-postal { grid-column: 1; grid-row: 2; }
.afb-address-city   { grid-column: 2; grid-row: 2; }

/* Responsive Address Fields */
@media (max-width: 768px) {
    .afb-address-fields {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap: 10px;
    }
    .afb-address-street { grid-column: 1; grid-row: 1; }
    .afb-address-number { grid-column: 1; grid-row: 2; }
    .afb-address-postal { grid-column: 1; grid-row: 3; }
    .afb-address-city   { grid-column: 1; grid-row: 4; }
}

/* === LAYOUT ELEMENTS ===
   Margins werden bereits durch den Theme-Reset oben erzwungen (margin: 0).
   Hier nur noch Typografie/Padding/Farbe. */
.afb-heading { padding: 0; color: #333; line-height: 1.2; }
.afb-paragraph { padding: 0; color: #666; line-height: 1.5; }
.afb-label-element { padding: 0; display: block; line-height: 1.3; }

/* Absatz-Schriftstärke explizit setzen (Block-Themes erben sonst teils 300/„dünn").
   Fett wie die Zustimmungs-/Checkbox-Texte – auf Wunsch. */
.afb-form .afb-paragraph { font-weight: 700 !important; }

/* Rich-Text-Inhalt (Absatz/Label/Checkbox-Text): Listen, Links, Formatierung */
.afb-paragraph ul, .afb-paragraph ol,
.afb-label-element ul, .afb-label-element ol,
.afb-single-checkbox-label ul, .afb-single-checkbox-label ol {
    margin: 6px 0; padding-left: 1.5em;
}
.afb-paragraph li, .afb-label-element li { margin: 2px 0; }
.afb-paragraph a, .afb-label-element a, .afb-single-checkbox-label a { text-decoration: underline; }
ul.afb-list-disc { list-style: disc; }
ul.afb-list-dash { list-style: none; padding-left: 1.3em; }
ul.afb-list-dash > li { position: relative; }
ul.afb-list-dash > li::before { content: "–"; position: absolute; left: -1.2em; }
.afb-divider { border: none; border-top: 1px solid #eee; padding: 0; }
.afb-spacer { display: block; }

/* === GDPR === */
/* Dezenter Trenner oben. margin-top wird per expliziter !important-Regel
   (siehe Theme-Reset-Block) gesetzt, damit er nicht vom *-Reset kaputtgeht. */
.afb-field-gdpr { padding-top: 15px; border-top: 1px solid #eee; }
.afb-gdpr-label { font-size: 13px; }
.afb-gdpr-label a { color: #ac2221; }

/* === SUBMIT BUTTON === */
/* Kein zusaetzliches margin-top: Abstand wird ueber padding des form-footer gesteuert.
   margin: 0 ist durch den Theme-Reset bereits erzwungen. */
.afb-submit-wrapper { /* intentionally empty */ }
.afb-btn-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px;
    min-height: 48px; /* WCAG 2.1 AA - Touch target size */
    font-size: 16px; font-weight: 500;
    border: none; border-radius: 6px; cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.afb-btn-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.afb-btn-submit:active { transform: translateY(0); }
.afb-btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.afb-btn-submit:focus {
    outline: 3px solid rgba(172, 34, 33, 0.5);
    outline-offset: 2px;
}

/* Button sizes - all meet 44px minimum touch target */
.afb-btn-small { padding: 10px 18px; min-height: 44px; font-size: 14px; }
.afb-btn-medium { padding: 12px 24px; min-height: 48px; font-size: 15px; }
.afb-btn-large { padding: 16px 36px; min-height: 52px; font-size: 17px; }

/* Loading state */
.afb-btn-loading { display: none; }
.afb-btn-submit.loading .afb-btn-text { display: none; }
.afb-btn-submit.loading .afb-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Spinner */
.afb-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: afb-spin 0.8s linear infinite;
}

@keyframes afb-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* === MESSAGES === */
.afb-message {
    padding: 15px 20px; border-radius: 6px; margin-bottom: 15px;
    display: flex; align-items: center; gap: 10px;
}
.afb-message-success { background: #d1e7dd; color: #0f5132; border-left: 4px solid #198754; }
.afb-message-error { background: #f8d7da; color: #842029; border-left: 4px solid #dc3232; }

/* === FIELD ERRORS === */
.afb-field.has-error .afb-input,
.afb-field.has-error .afb-textarea,
.afb-field.has-error .afb-select {
    border-color: #dc3232;
    background-color: #fff5f5;
}

/* Field error message.
   margin-top wird oben via `.afb-form .afb-field-error:not(:empty)` gesetzt. */
.afb-field-error {
    color: #dc3232;
    font-size: 13px;
    display: none; /* Erst sichtbar, wenn Fehlertext vorhanden */
    font-weight: 500;
    line-height: 1.4;
}

.afb-field-error:not(:empty) {
    display: block;
}

.afb-field-error[aria-hidden="true"] {
    visibility: hidden;
    height: 0;
}

/* === ACCESSIBILITY === */
.afb-form *:focus-visible {
    outline: 2px solid #ac2221; outline-offset: 2px;
}

/* === PRINT === */
@media print {
    .afb-form { box-shadow: none; border: 1px solid #ddd; }
    .afb-btn-submit { display: none; }
}