/*
 * ALERT-MODERN.CSS
 * FLiPT Dramatic Alert System
 * "Unnecessarily. Dramatic. Disc Golf."
 *
 * Theatrical announcements that demand attention without being obnoxious.
 * Uses brand colors: Coral (#FF6B6B) for danger, Amber (#FFB347) for warning,
 * Teal (#00A69C) for success, Blue (#0068BA) for info.
 *
 * All global alert styling lives here. Individual pages may override
 * the exposed CSS variables when they need a bespoke treatment.
 */

/* ============================================
   CSS Custom Properties for Alerts
   ============================================ */
:root {
    /* Alert structure */
    --alert-padding-y: 1rem;
    --alert-padding-x: 1.25rem;
    --alert-gap: 1rem;
    --alert-border-radius: 12px;
    --alert-border-width: 1px;
    --alert-accent-width: 5px;
    --alert-icon-size: 1.5rem;

    /* Alert shadows & transitions */
    --alert-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --alert-shadow-hover: 0 6px 12px -2px rgba(0, 0, 0, 0.1), 0 3px 6px -2px rgba(0, 0, 0, 0.06);

    /* Success - Teal (FLiPT primary) */
    --alert-success-accent: #00A69C;
    --alert-success-accent-dark: #008F87;
    --alert-success-bg: linear-gradient(135deg, rgba(0, 166, 156, 0.08) 0%, rgba(0, 166, 156, 0.03) 100%);
    --alert-success-bg-solid: #f0fdfb;
    --alert-success-border: rgba(0, 166, 156, 0.25);
    --alert-success-text: #134e4a;
    --alert-success-glow: rgba(0, 166, 156, 0.4);

    /* Info - Blue (FLiPT secondary) */
    --alert-info-accent: #0068BA;
    --alert-info-accent-dark: #005298;
    --alert-info-bg: linear-gradient(135deg, rgba(0, 104, 186, 0.08) 0%, rgba(0, 104, 186, 0.03) 100%);
    --alert-info-bg-solid: #eff6ff;
    --alert-info-border: rgba(0, 104, 186, 0.25);
    --alert-info-text: #1e3a5f;
    --alert-info-glow: rgba(0, 104, 186, 0.4);

    /* Warning - Amber (brand accent) */
    --alert-warning-accent: #FFB347;
    --alert-warning-accent-dark: #E59A2F;
    --alert-warning-bg: linear-gradient(135deg, rgba(255, 179, 71, 0.12) 0%, rgba(255, 179, 71, 0.04) 100%);
    --alert-warning-bg-solid: #fffbeb;
    --alert-warning-border: rgba(255, 179, 71, 0.35);
    --alert-warning-text: #78350f;
    --alert-warning-glow: rgba(255, 179, 71, 0.5);

    /* Danger - Coral (brand accent) */
    --alert-danger-accent: #FF6B6B;
    --alert-danger-accent-dark: #E55555;
    --alert-danger-bg: linear-gradient(135deg, rgba(255, 107, 107, 0.10) 0%, rgba(255, 107, 107, 0.04) 100%);
    --alert-danger-bg-solid: #fef2f2;
    --alert-danger-border: rgba(255, 107, 107, 0.30);
    --alert-danger-text: #7f1d1d;
    --alert-danger-glow: rgba(255, 107, 107, 0.5);

    /* Primary - alias to info */
    --alert-primary-accent: var(--alert-info-accent);
    --alert-primary-accent-dark: var(--alert-info-accent-dark);
    --alert-primary-bg: var(--alert-info-bg);
    --alert-primary-bg-solid: var(--alert-info-bg-solid);
    --alert-primary-border: var(--alert-info-border);
    --alert-primary-text: var(--alert-info-text);
    --alert-primary-glow: var(--alert-info-glow);

    /* Secondary - muted */
    --alert-secondary-accent: #64748b;
    --alert-secondary-accent-dark: #475569;
    --alert-secondary-bg: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(100, 116, 139, 0.03) 100%);
    --alert-secondary-bg-solid: #f8fafc;
    --alert-secondary-border: rgba(100, 116, 139, 0.25);
    --alert-secondary-text: #334155;
    --alert-secondary-glow: rgba(100, 116, 139, 0.3);

    /* Light */
    --alert-light-accent: #94a3b8;
    --alert-light-accent-dark: #64748b;
    --alert-light-bg: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
    --alert-light-bg-solid: #f8fafc;
    --alert-light-border: rgba(148, 163, 184, 0.3);
    --alert-light-text: #475569;
    --alert-light-glow: rgba(148, 163, 184, 0.3);

    /* Dark */
    --alert-dark-accent: #1e293b;
    --alert-dark-accent-dark: #0f172a;
    --alert-dark-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    --alert-dark-bg-solid: #1e293b;
    --alert-dark-border: rgba(51, 65, 85, 0.5);
    --alert-dark-text: #e2e8f0;
    --alert-dark-glow: rgba(30, 41, 59, 0.5);
}

/* ============================================
   Dark Mode Adjustments
   ============================================ */
:is([data-bs-theme="dark"], body.dark-mode) {
    /* Brighter accent colors for dark mode visibility */
    --alert-success-accent: #00C4B8;
    --alert-success-accent-dark: #00A69C;
    --alert-success-bg: linear-gradient(135deg, rgba(0, 196, 184, 0.15) 0%, rgba(0, 196, 184, 0.05) 100%);
    --alert-success-bg-solid: rgba(0, 196, 184, 0.1);
    --alert-success-border: rgba(0, 196, 184, 0.3);
    --alert-success-text: #ccfbf1;
    --alert-success-glow: rgba(0, 196, 184, 0.6);

    --alert-info-accent: #3B9AE8;
    --alert-info-accent-dark: #0068BA;
    --alert-info-bg: linear-gradient(135deg, rgba(59, 154, 232, 0.15) 0%, rgba(59, 154, 232, 0.05) 100%);
    --alert-info-bg-solid: rgba(59, 154, 232, 0.1);
    --alert-info-border: rgba(59, 154, 232, 0.3);
    --alert-info-text: #dbeafe;
    --alert-info-glow: rgba(59, 154, 232, 0.6);

    --alert-warning-accent: #FFC46B;
    --alert-warning-accent-dark: #FFB347;
    --alert-warning-bg: linear-gradient(135deg, rgba(255, 196, 107, 0.18) 0%, rgba(255, 196, 107, 0.06) 100%);
    --alert-warning-bg-solid: rgba(255, 196, 107, 0.12);
    --alert-warning-border: rgba(255, 196, 107, 0.35);
    --alert-warning-text: #fef3c7;
    --alert-warning-glow: rgba(255, 196, 107, 0.7);

    --alert-danger-accent: #FF8585;
    --alert-danger-accent-dark: #FF6B6B;
    --alert-danger-bg: linear-gradient(135deg, rgba(255, 133, 133, 0.18) 0%, rgba(255, 133, 133, 0.06) 100%);
    --alert-danger-bg-solid: rgba(255, 133, 133, 0.12);
    --alert-danger-border: rgba(255, 133, 133, 0.35);
    --alert-danger-text: #fecaca;
    --alert-danger-glow: rgba(255, 133, 133, 0.7);

    --alert-secondary-accent: #94a3b8;
    --alert-secondary-accent-dark: #64748b;
    --alert-secondary-bg: linear-gradient(135deg, rgba(148, 163, 184, 0.12) 0%, rgba(148, 163, 184, 0.04) 100%);
    --alert-secondary-bg-solid: rgba(148, 163, 184, 0.08);
    --alert-secondary-border: rgba(148, 163, 184, 0.25);
    --alert-secondary-text: #e2e8f0;
    --alert-secondary-glow: rgba(148, 163, 184, 0.4);

    --alert-light-text: #1e293b;
    --alert-dark-text: #f1f5f9;

    --alert-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --alert-shadow-hover: 0 8px 16px -3px rgba(0, 0, 0, 0.25), 0 4px 8px -2px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Base Alert Structure
   ============================================ */
.alert {
    /* Local variables for this alert instance */
    --_accent: var(--alert-accent, var(--alert-info-accent));
    --_accent-dark: var(--alert-accent-dark, var(--alert-info-accent-dark));
    --_bg: var(--alert-bg, var(--alert-info-bg));
    --_bg-solid: var(--alert-bg-solid, var(--alert-info-bg-solid));
    --_border: var(--alert-border, var(--alert-info-border));
    --_text: var(--alert-text, var(--alert-info-text));
    --_glow: var(--alert-glow, var(--alert-info-glow));

    position: relative;
    display: block;
    padding: var(--alert-padding-y) var(--alert-padding-x);
    padding-left: calc(var(--alert-accent-width) + var(--alert-padding-x));
    margin-bottom: 1rem;
    border-radius: var(--alert-border-radius);
    border: var(--alert-border-width) solid var(--_border);
    background: var(--_bg-solid);
    color: var(--_text);
    box-shadow: var(--alert-shadow);
    overflow: hidden;
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;

    /* Entrance animation */
    animation: alert-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: left center;
}

/* Flex layout only when we have explicit wrapper structure (prevents text nodes becoming separate flex items). */
.alert:has(.alert-icon),
.alert:has(.alert-content) {
    display: flex;
    align-items: flex-start;
    gap: var(--alert-gap);
}

/* For simple alerts with direct icon + inline text (no .alert-content wrapper),
   keep icon inline with margin - text flows naturally as inline content */
.alert:not(:has(.alert-content)) > i:first-child,
.alert:not(:has(.alert-content)) > svg:first-child {
    position: relative;
    z-index: 1;
    margin-right: var(--alert-gap);
    color: var(--_accent);
    font-size: 1.125rem;
    vertical-align: middle;
}

/* The dramatic accent bar with animated diagonal stripes */
.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--alert-accent-width);
    background: var(--_accent);
    /* Diagonal stripe pattern for theatrical flair */
    background-image:
        linear-gradient(
            135deg,
            var(--_accent-dark) 25%,
            transparent 25%,
            transparent 50%,
            var(--_accent-dark) 50%,
            var(--_accent-dark) 75%,
            transparent 75%
        );
    background-size: 8px 8px;
    animation: accent-shimmer 2s linear infinite;
}

/* Subtle gradient overlay */
.alert::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--_bg);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Hover effect */
.alert:hover {
    box-shadow: var(--alert-shadow-hover);
}

/* ============================================
   Alert Icon
   ============================================ */
.alert .alert-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--_accent);
    font-size: var(--alert-icon-size);
    box-shadow: 0 0 0 0 var(--_glow);
    animation: icon-pulse 2.5s ease-in-out infinite;
}

:is([data-bs-theme="dark"], body.dark-mode) .alert .alert-icon {
    background: rgba(255, 255, 255, 0.08);
}

/* In dark mode, force the alert container to use the alert tokens (prevents light-mode brand overrides). */
:is([data-bs-theme="dark"], body.dark-mode) .alert {
    background: var(--_bg-solid);
    border-color: var(--_border);
    color: var(--_text);
}

.alert .alert-icon i,
.alert .alert-icon svg {
    filter: drop-shadow(0 0 2px var(--_glow));
}

/* ============================================
   Alert Content
   ============================================ */
.alert .alert-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.alert .alert-title,
.alert .alert-heading {
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--_text);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.alert .alert-content p,
.alert .alert-content .alert-message,
.alert p {
    position: relative;
    z-index: 1;
    font-size: 0.9375rem;
    color: var(--_text);
    margin: 0;
    line-height: 1.5;
    opacity: 0.9;
}

.alert .alert-content p:last-child {
    margin-bottom: 0;
}

/* Structured alerts with wrappers get centered alignment */
.alert:has(.alert-content) {
    align-items: center;
}

/* Links within alerts */
.alert a {
    color: var(--_accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease;
}

.alert a:hover {
    opacity: 0.8;
}

/* ============================================
   Close Button
   ============================================ */
.alert .btn-close {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 0.5rem;
    margin: -0.25rem -0.25rem -0.25rem auto;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.alert .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.alert .btn-close:focus {
    box-shadow: 0 0 0 3px var(--_glow);
}

.alert-dismissible {
    padding-right: calc(var(--alert-padding-x) + 0.5rem);
}

/* ============================================
   Alert Variants
   ============================================ */

/* Success - Teal */
.alert-success {
    --alert-accent: var(--alert-success-accent);
    --alert-accent-dark: var(--alert-success-accent-dark);
    --alert-bg: var(--alert-success-bg);
    --alert-bg-solid: var(--alert-success-bg-solid);
    --alert-border: var(--alert-success-border);
    --alert-text: var(--alert-success-text);
    --alert-glow: var(--alert-success-glow);
    --_accent: var(--alert-success-accent);
    --_accent-dark: var(--alert-success-accent-dark);
    --_bg: var(--alert-success-bg);
    --_bg-solid: var(--alert-success-bg-solid);
    --_border: var(--alert-success-border);
    --_text: var(--alert-success-text);
    --_glow: var(--alert-success-glow);
}

/* Info - Blue */
.alert-info {
    --alert-accent: var(--alert-info-accent);
    --alert-accent-dark: var(--alert-info-accent-dark);
    --alert-bg: var(--alert-info-bg);
    --alert-bg-solid: var(--alert-info-bg-solid);
    --alert-border: var(--alert-info-border);
    --alert-text: var(--alert-info-text);
    --alert-glow: var(--alert-info-glow);
    --_accent: var(--alert-info-accent);
    --_accent-dark: var(--alert-info-accent-dark);
    --_bg: var(--alert-info-bg);
    --_bg-solid: var(--alert-info-bg-solid);
    --_border: var(--alert-info-border);
    --_text: var(--alert-info-text);
    --_glow: var(--alert-info-glow);
}

/* Warning - Amber */
.alert-warning {
    --alert-accent: var(--alert-warning-accent);
    --alert-accent-dark: var(--alert-warning-accent-dark);
    --alert-bg: var(--alert-warning-bg);
    --alert-bg-solid: var(--alert-warning-bg-solid);
    --alert-border: var(--alert-warning-border);
    --alert-text: var(--alert-warning-text);
    --alert-glow: var(--alert-warning-glow);
    --_accent: var(--alert-warning-accent);
    --_accent-dark: var(--alert-warning-accent-dark);
    --_bg: var(--alert-warning-bg);
    --_bg-solid: var(--alert-warning-bg-solid);
    --_border: var(--alert-warning-border);
    --_text: var(--alert-warning-text);
    --_glow: var(--alert-warning-glow);
}

/* Danger - Coral */
.alert-danger {
    --alert-accent: var(--alert-danger-accent);
    --alert-accent-dark: var(--alert-danger-accent-dark);
    --alert-bg: var(--alert-danger-bg);
    --alert-bg-solid: var(--alert-danger-bg-solid);
    --alert-border: var(--alert-danger-border);
    --alert-text: var(--alert-danger-text);
    --alert-glow: var(--alert-danger-glow);
    --_accent: var(--alert-danger-accent);
    --_accent-dark: var(--alert-danger-accent-dark);
    --_bg: var(--alert-danger-bg);
    --_bg-solid: var(--alert-danger-bg-solid);
    --_border: var(--alert-danger-border);
    --_text: var(--alert-danger-text);
    --_glow: var(--alert-danger-glow);
}

/* Primary - alias to Info */
.alert-primary {
    --alert-accent: var(--alert-primary-accent);
    --alert-accent-dark: var(--alert-primary-accent-dark);
    --alert-bg: var(--alert-primary-bg);
    --alert-bg-solid: var(--alert-primary-bg-solid);
    --alert-border: var(--alert-primary-border);
    --alert-text: var(--alert-primary-text);
    --alert-glow: var(--alert-primary-glow);
    --_accent: var(--alert-primary-accent);
    --_accent-dark: var(--alert-primary-accent-dark);
    --_bg: var(--alert-primary-bg);
    --_bg-solid: var(--alert-primary-bg-solid);
    --_border: var(--alert-primary-border);
    --_text: var(--alert-primary-text);
    --_glow: var(--alert-primary-glow);
}

/* Secondary - muted */
.alert-secondary {
    --alert-accent: var(--alert-secondary-accent);
    --alert-accent-dark: var(--alert-secondary-accent-dark);
    --alert-bg: var(--alert-secondary-bg);
    --alert-bg-solid: var(--alert-secondary-bg-solid);
    --alert-border: var(--alert-secondary-border);
    --alert-text: var(--alert-secondary-text);
    --alert-glow: var(--alert-secondary-glow);
    --_accent: var(--alert-secondary-accent);
    --_accent-dark: var(--alert-secondary-accent-dark);
    --_bg: var(--alert-secondary-bg);
    --_bg-solid: var(--alert-secondary-bg-solid);
    --_border: var(--alert-secondary-border);
    --_text: var(--alert-secondary-text);
    --_glow: var(--alert-secondary-glow);
}

/* Light */
.alert-light {
    --alert-accent: var(--alert-light-accent);
    --alert-accent-dark: var(--alert-light-accent-dark);
    --alert-bg: var(--alert-light-bg);
    --alert-bg-solid: var(--alert-light-bg-solid);
    --alert-border: var(--alert-light-border);
    --alert-text: var(--alert-light-text);
    --alert-glow: var(--alert-light-glow);
    --_accent: var(--alert-light-accent);
    --_accent-dark: var(--alert-light-accent-dark);
    --_bg: var(--alert-light-bg);
    --_bg-solid: var(--alert-light-bg-solid);
    --_border: var(--alert-light-border);
    --_text: var(--alert-light-text);
    --_glow: var(--alert-light-glow);
}

/* Dark */
.alert-dark {
    --alert-accent: var(--alert-dark-accent);
    --alert-accent-dark: var(--alert-dark-accent-dark);
    --alert-bg: var(--alert-dark-bg);
    --alert-bg-solid: var(--alert-dark-bg-solid);
    --alert-border: var(--alert-dark-border);
    --alert-text: var(--alert-dark-text);
    --alert-glow: var(--alert-dark-glow);
    --_accent: var(--alert-dark-accent);
    --_accent-dark: var(--alert-dark-accent-dark);
    --_bg: var(--alert-dark-bg);
    --_bg-solid: var(--alert-dark-bg-solid);
    --_border: var(--alert-dark-border);
    --_text: var(--alert-dark-text);
    --_glow: var(--alert-dark-glow);
}

/* ============================================
   Size Variants
   ============================================ */

/* Compact/Small variant */
.alert-compact,
.alert-sm {
    --alert-padding-y: 0.75rem;
    --alert-padding-x: 1rem;
    --alert-gap: 0.75rem;
    --alert-accent-width: 4px;
    --alert-icon-size: 1.125rem;
}

.alert-compact .alert-icon,
.alert-sm .alert-icon {
    width: 2rem;
    height: 2rem;
}

.alert-compact .alert-title,
.alert-sm .alert-title {
    font-size: 0.9375rem;
}

.alert-compact .alert-content p,
.alert-sm .alert-content p {
    font-size: 0.875rem;
}

/* Large variant for hero announcements */
.alert-lg {
    --alert-padding-y: 1.5rem;
    --alert-padding-x: 1.75rem;
    --alert-gap: 1.25rem;
    --alert-accent-width: 6px;
    --alert-border-radius: 16px;
    --alert-icon-size: 1.75rem;
}

.alert-lg .alert-icon {
    width: 3.5rem;
    height: 3.5rem;
}

.alert-lg .alert-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.alert-lg .alert-content p {
    font-size: 1rem;
}

/* ============================================
   Special Variants
   ============================================ */

/* Announcement - Extra dramatic with solid gradient bar */
.alert-announcement {
    --alert-accent-width: 6px;
    border: none;
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.08);
}

.alert-announcement::before {
    background: linear-gradient(180deg, var(--_accent) 0%, var(--_accent-dark) 100%);
    background-image: none;
    animation: none;
}

/* Inline - No background, minimal styling */
.alert-inline {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.5rem 0.5rem 0.5rem calc(var(--alert-accent-width) + 0.75rem);
    margin-bottom: 0.5rem;
}

.alert-inline::after {
    display: none;
}

.alert-inline .alert-icon {
    width: 1.75rem;
    height: 1.75rem;
    background: transparent;
    box-shadow: none;
    animation: none;
}

/* No shadow utility */
.alert.no-shadow {
    box-shadow: none;
}

/* ============================================
   Dark Mode Enhancements
   ============================================ */
[data-bs-theme="dark"] .alert {
    background: var(--theme-surface-1, #1e293b);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.2),
        0 2px 4px -1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Override .bg-light text color interference */
[data-bs-theme="dark"] .bg-light .alert .alert-content p,
[data-bs-theme="dark"] .bg-light .alert .alert-title,
[data-bs-theme="dark"] .bg-light .alert p,
[data-bs-theme="dark"] .card-body .alert .alert-content p,
[data-bs-theme="dark"] .card-body .alert .alert-title,
[data-bs-theme="dark"] .card-body .alert p {
    color: var(--_text);
}

/* Glassmorphism effect for dark mode */
.alert-glass,
[data-bs-theme="dark"] .alert-glass {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   Animations
   ============================================ */
@keyframes alert-enter {
    0% {
        opacity: 0;
        transform: translateX(-12px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes accent-shimmer {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 16px;
    }
}

@keyframes icon-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--_glow);
    }
    50% {
        box-shadow: 0 0 0 6px transparent;
    }
}

/* Exit animation for dismissible alerts */
.alert.fade:not(.show) {
    animation: alert-exit 0.25s ease-out forwards;
}

@keyframes alert-exit {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(12px) scale(0.98);
    }
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 576px) {
    .alert {
        --alert-padding-y: 0.875rem;
        --alert-padding-x: 1rem;
        --alert-gap: 0.75rem;
        --alert-accent-width: 4px;
        --alert-border-radius: 10px;
    }

    .alert .alert-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1.125rem;
    }

    .alert .alert-title {
        font-size: 0.9375rem;
    }

    .alert .alert-content p {
        font-size: 0.875rem;
    }

    .alert-dismissible {
        padding-right: calc(var(--alert-padding-x) + 2rem);
    }

    .alert-dismissible .btn-close {
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .alert,
    .alert::before,
    .alert .alert-icon {
        animation: none;
    }

    .alert.fade:not(.show) {
        animation: none;
        transition: opacity 0.15s linear;
    }

    .alert:hover {
        transform: none;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

/* Remove bottom margin when alert is last child */
.alert:last-child {
    margin-bottom: 0;
}

/* Stack spacing */
.alert + .alert {
    margin-top: 0.75rem;
}

/* Full-width variant (no side radius) */
.alert-full {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* Centered content variant */
.alert-centered {
    justify-content: center;
    text-align: center;
}

.alert-centered .alert-content {
    flex: none;
}