/* ==========================================================================
   Sportverein Mitgliederanmeldung – Frontend-Styles
   ========================================================================== */

.sva-form-wrap {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1rem;
    color: #333;
}

/* Honeypot-Feld: für echte Besucher unsichtbar (kein display:none, damit einfache Bots es trotzdem befüllen) */
.sva-hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

/* Notices */
.sva-notice {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: 500;
}
.sva-notice--success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.sva-notice--error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Abschnittstext: bewusst OHNE eigene Farbe/Schriftgröße/-art (die
   übernimmt das Theme der Website, auf der das Formular eingebunden
   ist) – aber mit der vom Admin im WYSIWYG-Editor gesetzten Struktur-
   Formatierung (Absätze/Zeilenumbrüche, Fett, Kursiv, Listen), damit
   diese nicht durch fehlende Standard-Abstände verloren wirkt. */
.sva-section-text {
    margin-bottom: 18px;
}
.sva-section-text p {
    margin: 0 0 1em;
}
.sva-section-text p:last-child {
    margin-bottom: 0;
}
.sva-section-text ul,
.sva-section-text ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}
.sva-section-text ul:last-child,
.sva-section-text ol:last-child {
    margin-bottom: 0;
}
.sva-section-text strong,
.sva-section-text b {
    font-weight: bold;
}
.sva-section-text em,
.sva-section-text i {
    font-style: italic;
}

/* Fieldsets */
.sva-fieldset {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 28px;
    background: #fff;
}
.sva-legend {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0 8px;
    color: #1a1a2e;
}

/* Raster */
.sva-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 0;
}
.sva-grid--2 {
    grid-template-columns: 1fr 1fr;
}
@media ( max-width: 600px ) {
    .sva-grid--2 { grid-template-columns: 1fr; }
}

/* Einzelne Felder */
.sva-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.sva-field:last-child { margin-bottom: 0; }

.sva-field label {
    font-weight: 500;
    font-size: 0.9rem;
}
.sva-field input[type="text"],
.sva-field input[type="email"],
.sva-field input[type="tel"],
.sva-field input[type="date"],
.sva-field input[type="number"],
.sva-field select,
.sva-field textarea {
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background: #fafafa;
    width: 100%;
    box-sizing: border-box;
}
.sva-field textarea {
    resize: vertical;
    min-height: 100px;
}

.sva-field input:focus,
.sva-field select:focus,
.sva-field textarea:focus {
    border-color: #0073aa;
    outline: none;
    background: #fff;
}
.sva-field--invalid {
    border-color: #dc3545 !important;
}

/* Fehlertext unter Feld */
.sva-field-error {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Leerzeile/Abstand zwischen Feldblöcken innerhalb eines Abschnitts */
.sva-section-spacer {
    height: 20px;
}

/* Zwischenüberschrift innerhalb eines Abschnitts (z. B. über einer
   Radio-/Checkbox-Gruppe) */
.sva-subheading {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

/* Radio-Gruppe */
.sva-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sva-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
}
.sva-radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #009640;
}

/* Checkbox-Gruppe */
.sva-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.sva-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}
.sva-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #009640;
}

/* Sportarten-Auswahl je Abteilung: geordnetes Grid statt frei
   umbrechendem Flex, damit auch Abteilungen mit vielen Sportarten
   (z. B. "Turnen" mit 13 Sportarten) in gleichmäßigen Spalten
   erscheinen statt ungeordnet je nach Textlänge umzubrechen. Spalten
   passen sich der verfügbaren Breite an (auto-fill) und fallen auf
   schmalen Bildschirmen automatisch auf eine Spalte zurück. */
.sva-sportarten-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px 16px;
}

/* Sportarten deaktiviert */
.sva-sportarten-group.sva-disabled .sva-checkbox-label {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Sportarten nach Abteilung gruppiert */
.sva-abteilung-gruppe {
    margin-bottom: 14px;
}
.sva-abteilung-gruppe:last-child {
    margin-bottom: 0;
}
.sva-abteilung-name {
    margin: 0 0 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}

/* Hinweis-Texte */
.sva-hint {
    font-size: 0.82rem;
    color: #666;
    margin: 6px 0 0;
    font-style: italic;
}

/* Familienangehörige */
.sva-familie-entry {
    border: 1px dashed #bbb;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    background: #f9f9f9;
}
.sva-familie-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

/* Abweichender Kontoinhaber */
.sva-abweichend-box {
    background: #fffbf0;
    border: 1px solid #f0c040;
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.sva-abweichend-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 12px;
    color: #664d03;
}
.sva-hint-inline {
    font-weight: 400;
    font-size: 0.85rem;
    color: #666;
}

/* Rechtstext */
.sva-rechtstext {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.6;
    max-height: 220px;
    overflow-y: auto;
}

/* Pflicht-Hinweis */
.sva-required {
    color: #dc3545;
    font-weight: bold;
}
.sva-pflicht-hinweis {
    font-size: 0.83rem;
    color: #666;
    margin-top: -10px;
    margin-bottom: 20px;
}

/* Buttons */
.sva-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.sva-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Primär- und Sekundär-Button: Rahmen durchgängig in der Vereinsfarbe
   (auch im Ruhezustand, nicht nur bei Hover) – überschreibt damit
   bewusst eine ggf. andersfarbige Standard-Umrandung des Theme-CSS
   der Website. */
.sva-btn--primary {
    background: #009640;
    border-color: #009640;
    color: #000;
}
.sva-btn--primary:hover:not(:disabled),
.sva-btn--primary:focus-visible:not(:disabled) {
    background: #007833;
    border-color: #007833;
}
.sva-btn--secondary {
    background: #e0e0e0;
    border-color: #009640;
    color: #000;
}
.sva-btn--secondary:hover:not(:disabled),
.sva-btn--secondary:focus-visible:not(:disabled) {
    background: #c8c8c8;
    border-color: #007833;
}
.sva-btn--primary:focus-visible,
.sva-btn--secondary:focus-visible {
    outline: 2px solid #009640;
    outline-offset: 2px;
}
.sva-btn--danger    { background: #dc3545; border-color: #dc3545; color: #fff; font-size: 0.85rem; padding: 6px 12px; }
.sva-btn--danger:hover:not(:disabled) { background: #b02a37; border-color: #b02a37; }

/* Verschärfte Überschreibung per ID + !important: Die reinen
   Klassen-Regeln oben reichen gegen das Theme-CSS der Website
   offenbar nicht aus (höhere Spezifität/!important dort, oder ein
   box-shadow statt eines echten border). IDs sind spezifischer als
   nahezu jede Theme-Klasse, !important erzwingt den Sieg zusätzlich.
   Beide Buttons verhalten sich hier bewusst EINHEITLICH: Rahmen immer
   grün, im Ruhezustand schwarze Schrift, bei Hover/Fokus grüner
   Hintergrund mit weißer Schrift – unabhängig von ihrer sonstigen
   (unterschiedlichen) Ruhezustand-Hintergrundfarbe. */
#sva-submit-btn,
#sva-add-familie,
#sva-pdf-download-btn {
    border-color: #009640 !important;
    box-shadow: none !important;
    color: #000 !important;
}
#sva-submit-btn:hover:not(:disabled),
#sva-submit-btn:focus-visible:not(:disabled),
#sva-add-familie:hover:not(:disabled),
#sva-add-familie:focus-visible:not(:disabled),
#sva-pdf-download-btn:hover,
#sva-pdf-download-btn:focus-visible {
    background: #007833 !important;
    border-color: #007833 !important;
    color: #fff !important;
}

/* Submit-Zeile */
.sva-submit-wrap {
    text-align: center;
    margin-top: 10px;
}

/* PDF-Download auf der Dankesseite [FEAT-040]: Link im Button-Design –
   Theme-Unterstreichung von Links unterdrücken. */
#sva-pdf-download-btn {
    text-decoration: none !important;
}
.sva-pdf-hinweis {
    font-size: 0.83rem;
    color: #666;
    margin-top: 8px;
}

/* Lade-Spinner */
.sva-btn-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sva-spin 0.7s linear infinite;
}
@keyframes sva-spin {
    to { transform: rotate(360deg); }
}