/* ========================================
   DOPAMINE UI - ULTRA PREMIUM PROGRESS & CELEBRATION
   ======================================== */

/* AGGRESSIVE PROGRESS BAR OVERRIDE - Completely replace spinner */
.loading,
.loading-spinner,
div[class*="loading"],
div[class*="spinner"] {
    /* Force remove all old spinner styles */
    border: none !important;
    border-radius: 0 !important;
    animation: none !important;

    /* New progress bar container */
    display: block !important;
    width: 100% !important;
    max-width: 500px !important;
    height: 12px !important;
    background: linear-gradient(90deg, #e0e7ff 0%, #fce7f3 100%) !important;
    border-radius: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 30px auto !important;
    box-shadow:
        0 4px 20px rgba(99, 102, 241, 0.15),
        inset 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Animated gradient bar */
.loading::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: linear-gradient(90deg,
            #6366f1 0%,
            #8b5cf6 25%,
            #ec4899 50%,
            #f59e0b 75%,
            #6366f1 100%) !important;
    background-size: 200% 100% !important;
    animation: rainbow-slide 2s linear infinite !important;
    border-radius: 20px !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6) !important;
}

/* Shimmer effect overlay */
.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    height: 100% !important;
    width: 50% !important;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.8) 50%,
            transparent 100%) !important;
    animation: shimmer 1.5s ease-in-out infinite !important;
}

@keyframes rainbow-slide {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Pulsing glow effect around container */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow:
            0 4px 20px rgba(99, 102, 241, 0.15),
            inset 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    50% {
        box-shadow:
            0 4px 30px rgba(139, 92, 246, 0.4),
            inset 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* Success message pop animation - MORE DRAMATIC */
h3:has(+ .processed-files),
h3[style*="color: #10b981"],
h3[style*="color:#10b981"],
.success-message,
*:contains("Successfully"),
*:contains("Success") {
    animation: mega-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    transform-origin: center !important;
}

@keyframes mega-pop {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.15) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Confetti canvas */
#confetti-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 99999 !important;
}