/*
 * Global form-feedback styles.
 *
 * These MUST be global (not component-scoped). The htmx endpoints for the
 * ID-check and affordability steps return these class names as HTML string
 * fragments that htmx swaps in WITHOUT a Blazor scoped-CSS attribute, so a
 * scoped `.razor.css` rule (rewritten to `.field-error[b-xxxxx]`) would not
 * match the injected markup and the messages would render unstyled.
 *
 * Keep these here rather than in any *.razor.css. Colours come from the
 * per-brand CSS variables declared at :root by the theme stylesheets.
 */

.field-error {
    display: inline-block;
    margin-top: var(--space-2xs);
    font-size: var(--font-size-sm);
    color: var(--error-color);
}

.form-status {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-md);
}

.form-status p,
.form-status ul {
    margin: 0;
}

.form-status ul {
    margin-top: 0.4rem;
    padding-left: var(--space-lg);
}

.form-status-success {
    background: var(--success-background);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.form-status-error {
    background: var(--error-background);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}