/* ==========================================
   BALANCE BUTTONS GLOW EFFECT
   Efectos de brillo permanente estilo metaverso premium
   Inspirado en los paquetes de recarga Stripe
   ========================================== */

/* ==========================================
   VARIABLES - METAVERSE GLOW THEME
   ========================================== */
:root {
    --glow-gold: rgba(255, 215, 0, 0.45);
    --glow-gold-intense: rgba(255, 215, 0, 0.65);
    --glow-purple: rgba(139, 92, 246, 0.35);
    --glow-purple-intense: rgba(139, 92, 246, 0.55);
    --gradient-gold-purple: linear-gradient(135deg, #FFD700 0%, #8b5cf6 50%, #FFD700 100%);
}

/* ==========================================
   BRILLO PERMANENTE BASE (SIN HOVER)
   Los botones siempre tienen brillo visible
   ========================================== */
.balance-action-btn {
    position: relative;
    overflow: hidden;
    
    /* Border con gradiente animado */
    border: 2px solid transparent !important;
    background-image: 
        linear-gradient(rgba(26, 26, 46, 0.85), rgba(26, 26, 46, 0.85)),
        linear-gradient(120deg, #FFD700, #8b5cf6, #FFD700) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-size: 100% 100%, 200% 100% !important;
    
    /* Box-shadow multicapa con glow permanente */
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.25),
        0 0 25px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    
    /* Animaciones permanentes */
    animation: 
        borderFlow 3s linear infinite,
        subtlePulse 3s ease-in-out infinite;
    
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Shimmer layer (solo visible en hover) */
.balance-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.7s ease;
    z-index: 1;
}

/* Asegurar que el contenido esté sobre el shimmer */
.balance-action-btn i,
.balance-action-btn span {
    position: relative;
    z-index: 2;
}

/* ==========================================
   ESTADO HOVER - BRILLO INTENSIFICADO
   ========================================== */
.balance-action-btn:hover {
    /* Glow intensificado */
    box-shadow: 
        0 8px 30px rgba(255, 215, 0, 0.45),
        0 0 40px rgba(139, 92, 246, 0.35),
        0 0 60px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    
    /* Elevación mayor */
    transform: translateY(-4px) scale(1.03) !important;
    
    /* Border más brillante */
    background-image: 
        linear-gradient(rgba(26, 26, 46, 0.9), rgba(26, 26, 46, 0.9)),
        linear-gradient(120deg, #FFD700, #8b5cf6, #FFD700) !important;
}

/* Shimmer effect al hacer hover */
.balance-action-btn:hover::before {
    left: 120%;
}

/* ==========================================
   ESTADO ACTIVE - FEEDBACK TÁCTIL
   ========================================== */
.balance-action-btn:active {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 
        0 4px 20px rgba(255, 215, 0, 0.35),
        0 0 30px rgba(139, 92, 246, 0.25) !important;
}

/* ==========================================
   ANIMACIONES KEYFRAMES
   ========================================== */

/* Border Flow - Gradiente que fluye continuamente */
@keyframes borderFlow {
    0%, 100% { 
        background-position: 0% 50%, 0% 50%; 
    }
    50% { 
        background-position: 0% 50%, 100% 50%; 
    }
}

/* Subtle Pulse - Respiración sutil del brillo */
@keyframes subtlePulse {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(255, 215, 0, 0.25),
            0 0 25px rgba(139, 92, 246, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 6px 20px rgba(255, 215, 0, 0.35),
            0 0 35px rgba(139, 92, 246, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
}

/* ==========================================
   VARIANTES DE COLOR POR TIPO DE BOTÓN
   (Opcional - Mantener colores dorados pero con matices)
   ========================================== */

/* Botones de Wallet Card */
.wallet-card .balance-action-btn {
    /* Acento más dorado */
    background-image: 
        linear-gradient(rgba(26, 26, 46, 0.85), rgba(26, 26, 46, 0.85)),
        linear-gradient(120deg, #FFD700, #FFA500, #FFD700) !important;
}

/* Botones de Casino Card */
.casino-card .balance-action-btn {
    /* Acento más púrpura para diferenciación */
    background-image: 
        linear-gradient(rgba(26, 26, 46, 0.85), rgba(26, 26, 46, 0.85)),
        linear-gradient(120deg, #FFD700, #9d6bff, #FFD700) !important;
}

/* ==========================================
   RESPONSIVE - MOBILE OPTIMIZATIONS
   ========================================== */
@media (max-width: 768px) {
    .balance-action-btn {
        /* Reducir intensidad de animaciones en móvil para performance */
        animation: 
            borderFlow 4s linear infinite,
            subtlePulse 4s ease-in-out infinite;
    }
    
    .balance-action-btn:hover {
        /* Touch target - Menos elevación en móvil */
        transform: translateY(-2px) scale(1.02) !important;
    }
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .balance-action-btn {
        animation: none !important;
    }
    
    .balance-action-btn::before {
        transition: none !important;
    }
}

/* ==========================================
   ESTADOS ESPECIALES
   ========================================== */

/* Disabled state */
.balance-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transform: none !important;
}

.balance-action-btn:disabled:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Focus state para accesibilidad con teclado */
.balance-action-btn:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 3px;
    box-shadow: 
        0 8px 30px rgba(255, 215, 0, 0.5),
        0 0 45px rgba(139, 92, 246, 0.4),
        0 0 0 3px rgba(255, 215, 0, 0.3) !important;
}