/* ==========================================================================
   fesehemalige.css — LEGACY styles from the early project phase.
   ──────────────────────────────────────────────────────────────────────────
   These styles predate the component library in main.css.
   They are kept in a separate file so we can track what still needs to be
   migrated to proper BEM components.  Remove each section once its
   replacement lives in main.css and all templates have been updated.
   ──────────────────────────────────────────────────────────────────────────
   TODO: migrate each block below into main.css components, then delete
   this file entirely.
   ========================================================================== */

.auth-links {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Form sections (signup fieldsets) ──────────────────────────────────── */

fieldset.form-section {
    border: none;
    border-top: 2px solid var(--color-border);
    margin: 0 0 var(--space-6);
    padding: var(--space-5) 0 0;
}

fieldset.form-section legend {
    float: left;
    width: 100%;
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

fieldset.form-section legend + * { clear: both; }

/* ── Form field variants ───────────────────────────────────────────────── */

.form-field-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.form-field-check input[type="checkbox"] {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.form-field-check label {
    font-size: var(--text-base);
    color: var(--color-text);
    cursor: pointer;
}

.form-field-check.has-error input {
    outline: 2px solid var(--color-danger);
}

/* ── Form error summary ────────────────────────────────────────────────── */

.form-errors {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}

.form-errors ul {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-danger);
}

/* ── Two-column grid for short field pairs ─────────────────────────────── */

@media (min-width: 600px) {
    .form-row-2 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 0 var(--space-4);
    }

    .form-row-2-equal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-4);
    }
}

/* ── Form actions / submit ─────────────────────────────────────────────── */

.form-actions {
    margin-top: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* ── Button spinner ────────────────────────────────────────────────────── */

.btn-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Alpine.js transitions (signup membership section) ─────────────────── */

.transition-enter  { transition: opacity 0.3s ease, max-height 0.3s ease; }
.transition-enter-start { opacity: 0; max-height: 0; overflow: hidden; }
.transition-enter-end   { opacity: 1; max-height: 500px; }
.transition-leave  { transition: opacity 0.2s ease, max-height 0.2s ease; }
.transition-leave-start { opacity: 1; max-height: 500px; }
.transition-leave-end   { opacity: 0; max-height: 0; overflow: hidden; }