/* === Notifications & Alerts ===
 * Success, error, warning, info messages.
 * Extracted from profile.css, event.css, course.css.
 */

/* ── Base alert ─────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
}

/* ── Variants ───────────────────────────────── */
.alert--success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.alert--error {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error-text);
}

.alert--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}

.alert--info {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info-text);
}

/* ── Success message (legacy) ───────────────── */
.success {
    position: relative;
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    text-align: justify;
    color: var(--color-primary);
    font-weight: 600;
}

/* ── Error message ──────────────────────────── */
.error-message {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 30px;
}