@keyframes flashColor {
    0% {
        color: #dc3545;
    }

    25% {
        color: #ffc107;
    }

    50% {
        color: #0d6efd;
    }

    75% {
        color: #198754;
    }

    100% {
        color: #dc3545;
    }
}

.flash-text {
    animation: flashColor 2s infinite;
}

/* ====================== PROFESSIONAL FASHION BACKGROUND (STATIC) ====================== */
/* body {
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 45, 149, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 40%, rgba(255, 140, 66, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 45% 75%, rgba(0, 212, 143, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(76, 201, 240, 0.04) 0%, transparent 50%),
        linear-gradient(135deg, #fffaf5 0%, #fdf3e8 100%);

    background-attachment: fixed;
}

[data-bs-theme="dark"] body {
    background: 
        radial-gradient(circle at 20% 30%, rgba(100, 80, 160, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 40%, rgba(80, 70, 150, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 45% 75%, rgba(70, 60, 140, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(90, 75, 155, 0.04) 0%, transparent 50%),
        linear-gradient(135deg, #0f0d16 0%, #15121f 100%);

    background-attachment: fixed;
} */

/* ====================== PROFESSIONAL FASHION BACKGROUND (LINEAR DRIFT) ====================== */
body {
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 45, 149, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 40%, rgba(255, 140, 66, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 45% 75%, rgba(0, 212, 143, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(76, 201, 240, 0.04) 0%, transparent 50%),
        linear-gradient(135deg, #fffaf5 0%, #fdf3e8 100%);

    background-attachment: fixed;
    background-size: 250% 250%, 240% 240%, 230% 230%, 260% 260%, auto;
    animation: subtleDrift 40s linear infinite;
}

/* Dark Mode */
[data-bs-theme="dark"] body {
    background: 
        radial-gradient(circle at 20% 30%, rgba(100, 80, 160, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 40%, rgba(80, 70, 150, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 45% 75%, rgba(70, 60, 140, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(90, 75, 155, 0.04) 0%, transparent 50%),
        linear-gradient(135deg, #0f0d16 0%, #15121f 100%);

    background-attachment: fixed;
    background-size: 250% 250%, 240% 240%, 230% 230%, 260% 260%, auto;
    animation: subtleDrift 40s linear infinite;
}

@keyframes subtleDrift {
    0%   { background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%; }
    50%  { background-position: 100% 100%, 100% 0%, 0% 100%, 0% 0%; }
    100% { background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%; }
}


/* ====================== CUSTOM BACKGROUNDS FOR SECTIONS ====================== */

/* 1. Soft Pink Mist - Great for hero sections, promotions, announcements */
.bg-custom-soft-pink {
    background-color: #fff0f5;
    border-color: #ffe0ed;
}

[data-bs-theme="dark"] .bg-custom-soft-pink {
    background-color: #2a1a2a;
    border-color: #4a2a4a;
}

/* 2. Warm Amber Glow - Perfect for special offers, discounts, sales banners */
.bg-custom-warm-amber {
    background-color: #fff4e6;
    border-color: #ffe0c2;
}

[data-bs-theme="dark"] .bg-custom-warm-amber {
    background-color: #2a2218;
    border-color: #4a3a28;
}

/* 3. Mint Fresh - Great for testimonials, reviews, success stories */
.bg-custom-mint-fresh {
    background-color: #f0faf5;
    border-color: #daf5e8;
}

[data-bs-theme="dark"] .bg-custom-mint-fresh {
    background-color: #1a2a22;
    border-color: #2a4a38;
}

/* 4. Lavender Haze - Perfect for featured products, curated collections */
.bg-custom-lavender-haze {
    background-color: #f5f0ff;
    border-color: #e8daff;
}

[data-bs-theme="dark"] .bg-custom-lavender-haze {
    background-color: #221d32;
    border-color: #3a2d52;
}

/* 5. Creamy Vanilla - Great for newsletter signup, contact sections */
.bg-custom-creamy-vanilla {
    background-color: #fefaf0;
    border-color: #fdf0db;
}

[data-bs-theme="dark"] .bg-custom-creamy-vanilla {
    background-color: #262218;
    border-color: #463a28;
}

/* 6. Icy Blue - Perfect for new arrivals, just launched badges */
.bg-custom-icy-blue {
    background-color: #f0f9ff;
    border-color: #dceefb;
}

[data-bs-theme="dark"] .bg-custom-icy-blue {
    background-color: #18222a;
    border-color: #283a4a;
}

/* 7. Peach Fuzz - Great for limited time offers, flash sales */
.bg-custom-peach-fuzz {
    background-color: #fff5f0;
    border-color: #ffe4d9;
}

[data-bs-theme="dark"] .bg-custom-peach-fuzz {
    background-color: #2a1f1a;
    border-color: #4a3528;
}

/* 8. Sage Whisper - Perfect for eco-friendly, sustainable collections */
.bg-custom-sage-whisper {
    background-color: #f2f7f0;
    border-color: #e0ede0;
}

[data-bs-theme="dark"] .bg-custom-sage-whisper {
    background-color: #1a2618;
    border-color: #2a4228;
}

/* 9. Rose Gold Dust - Great for luxury items, premium collections */
.bg-custom-rose-dust {
    background-color: #fff5f8;
    border-color: #ffe3ea;
}

[data-bs-theme="dark"] .bg-custom-rose-dust {
    background-color: #2a1a22;
    border-color: #4a2a3a;
}

/* 10. Midnight Velvet - Perfect for footer, secondary navigation */
.bg-custom-midnight-velvet {
    background-color: #f8f9fa;
    border-color: #e9ecef;
}

[data-bs-theme="dark"] .bg-custom-midnight-velvet {
    background-color: #0f0c1a;
    border-color: #2a2238;
}

/* Optional: Add smooth transitions for theme switching */
[class^="bg-custom-"],
[class*=" bg-custom-"] {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Optional: Add subtle border radius and padding classes for better section styling */
.bg-custom-section-padding {
    padding: 3rem 2rem;
    border-radius: var(--bs-border-radius);
}

.bg-custom-section-padding-sm {
    padding: 2rem 1.5rem;
    border-radius: var(--bs-border-radius);
}

.bg-custom-section-padding-lg {
    padding: 5rem 3rem;
    border-radius: var(--bs-border-radius);
}

.horizontal-scroll-fullwidth {
    width: auto;
    position: relative;
    /* left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw; */
}

/* Theme-aware background image */
[data-bs-theme="light"] .bg-theme-aware {
    background-image: url('/storage/site-background.png');
    opacity: 0.3;
}

[data-bs-theme="dark"] .bg-theme-aware {
    background-image: url('/storage/site-background.png');
    filter: invert(1);
    opacity: 0.3;
}

@keyframes flashRedLabel {
    0%, 100% {
        color: inherit;
        background-color: transparent;
        padding: 0;
        border-radius: 4px;
    }
    50% {
        color: #ffffff;
        background-color: var(--bs-danger);
        border-radius: 4px;
    }
}

.flash-red-label {
    animation: flashRedLabel 0.8s ease-in-out infinite;
    display: inline-block;
}