/* Simple Pulsing Crypto Symbol - Universal Browser Support */
#loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at center, rgba(30, 35, 41, 0.98) 0%, rgba(11, 14, 17, 0.99) 100%) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    z-index: 99999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease-in-out !important;
    overflow: hidden !important;
}

#loading-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Loading Content Container */
.loading-content {
    text-align: center !important;
    color: #EAECEF !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
}

/* Main Pulsing Crypto Symbol */
.crypto-pulse-loader {
    position: relative !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 30px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    background: linear-gradient(45deg, #F0B90B 0%, #26A17B 50%, #F3BA2F 100%) !important;
    background-size: 300% 300% !important;
    box-shadow: 
        0 0 40px rgba(240, 185, 11, 0.4),
        0 0 80px rgba(38, 161, 123, 0.2),
        inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
    animation: pulse-scale 2.5s ease-in-out infinite, gradient-shift 4s ease-in-out infinite !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1E2329 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.crypto-pulse-loader::before {
    content: 'USDT' !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 900 !important;
    font-size: 24px !important;
    letter-spacing: 1px !important;
    display: block !important;
}

/* Pulsing Animation */
@keyframes pulse-scale {
    0%, 100% {
        transform: scale(1) !important;
        box-shadow: 
            0 0 40px rgba(240, 185, 11, 0.4),
            0 0 80px rgba(38, 161, 123, 0.2),
            inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
    }
    50% {
        transform: scale(1.15) !important;
        box-shadow: 
            0 0 60px rgba(240, 185, 11, 0.8),
            0 0 120px rgba(38, 161, 123, 0.4),
            inset 0 0 40px rgba(255, 255, 255, 0.2) !important;
    }
}

/* Gradient Color Shift */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50% !important;
    }
    50% {
        background-position: 100% 50% !important;
    }
    100% {
        background-position: 0% 50% !important;
    }
}

/* Outer Glow Ring */
.crypto-pulse-loader::after {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: -20px !important;
    right: -20px !important;
    bottom: -20px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(240, 185, 11, 0.3) !important;
    animation: ring-pulse 2.5s ease-in-out infinite !important;
    z-index: -1 !important;
}

@keyframes ring-pulse {
    0%, 100% {
        transform: scale(1) !important;
        opacity: 0.3 !important;
        border-color: rgba(240, 185, 11, 0.3) !important;
    }
    50% {
        transform: scale(1.1) !important;
        opacity: 0.8 !important;
        border-color: rgba(38, 161, 123, 0.6) !important;
    }
}

/* Loading Text */
.loading-text {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: #EAECEF !important;
    text-shadow: 0 0 15px rgba(240, 185, 11, 0.4) !important;
    animation: text-glow 3s ease-in-out infinite alternate !important;
    margin: 0 !important;
    letter-spacing: 1.5px !important;
    display: block !important;
}

@keyframes text-glow {
    from {
        text-shadow: 0 0 15px rgba(240, 185, 11, 0.4) !important;
        color: #EAECEF !important;
    }
    to {
        text-shadow: 0 0 25px rgba(240, 185, 11, 0.8), 0 0 35px rgba(38, 161, 123, 0.4) !important;
        color: #FFFFFF !important;
    }
}

/* Background Particles (Simple) */
#loading-overlay::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: 
        radial-gradient(circle at 25% 25%, rgba(240, 185, 11, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(38, 161, 123, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(243, 186, 47, 0.03) 0%, transparent 50%) !important;
    animation: background-float 8s ease-in-out infinite !important;
    z-index: 1 !important;
}

@keyframes background-float {
    0%, 100% { 
        opacity: 0.3 !important;
        transform: scale(1) rotate(0deg) !important;
    }
    50% { 
        opacity: 0.6 !important;
        transform: scale(1.05) rotate(2deg) !important;
    }
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .crypto-pulse-loader {
        width: 100px !important;
        height: 100px !important;
        font-size: 28px !important;
    }
    
    .crypto-pulse-loader::before {
        font-size: 20px !important;
    }
    
    .loading-text {
        font-size: 20px !important;
        letter-spacing: 1px !important;
    }
}

@media screen and (max-width: 480px) {
    .crypto-pulse-loader {
        width: 80px !important;
        height: 80px !important;
        font-size: 24px !important;
    }
    
    .crypto-pulse-loader::before {
        font-size: 16px !important;
    }
    
    .loading-text {
        font-size: 18px !important;
    }
}

/* Fallback for older browsers */
@supports not (backdrop-filter: blur(15px)) {
    #loading-overlay {
        background: rgba(11, 14, 17, 0.95) !important;
    }
}

/* Dark mode compatibility */
.dark-mode--theme #loading-overlay {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.99) 100%) !important;
}

/* Performance optimizations */
.crypto-pulse-loader,
.loading-text {
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Ensure visibility on all browsers */
#loading-overlay.show .crypto-pulse-loader,
#loading-overlay.show .loading-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}