/* ========== Scrollbar Personalizado Premium ========== */

/* Estilo base para todos os scrollbars */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: var(--dark);
}

/* Trilha do scrollbar (fundo) */
::-webkit-scrollbar-track {
    background: var(--dark-gradient);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Thumb do scrollbar (a parte que se move) */
::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: var(--border-radius-md);
    border: 2px solid var(--dark);
    box-shadow: var(--glow-primary);
    position: relative;
    transition: all var(--transition-normal);
}

/* Efeito hover no thumb */
::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-secondary);
    box-shadow: var(--glow-secondary);
}

/* Efeito de clique no thumb */
::-webkit-scrollbar-thumb:active {
    background: var(--gradient-accent);
}

/* Botões do scrollbar (setas) */
::-webkit-scrollbar-button {
    display: block;
    height: 12px;
    width: 12px;
    background-color: var(--primary-dark);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: all var(--transition-fast);
}

/* Hover nos botões */
::-webkit-scrollbar-button:hover {
    background-color: var(--secondary-dark);
    box-shadow: var(--shadow-primary);
}

/* Cantos do scrollbar */
::-webkit-scrollbar-corner {
    background-color: var(--dark);
    border-radius: var(--border-radius-sm);
}

/* Animação de pulso para o thumb */
@keyframes pulse-scrollbar {
    0% {
        box-shadow: var(--shadow-primary);
    }
    50% {
        box-shadow: var(--glow-primary);
    }
    100% {
        box-shadow: var(--shadow-primary);
    }
}

/* Aplicar animação quando a página carrega */
.animate-scrollbar::-webkit-scrollbar-thumb {
    animation: pulse-scrollbar 2s infinite;
}

/* Estilo para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--dark);
}

/* Estilo para elementos com scroll personalizado */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--dark);
}

/* Estilo para scrollbar horizontal */
::-webkit-scrollbar:horizontal {
    height: 10px;
}

/* Efeito de brilho no scrollbar */
::-webkit-scrollbar-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-alpha-50) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
    border-radius: var(--border-radius-md);
}

/* Classe para ativar o scrollbar animado em elementos específicos */
.premium-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--dark);
}

.premium-scroll::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: var(--border-radius-md);
    border: 2px solid var(--dark);
    box-shadow: var(--glow-primary);
    animation: pulse-scrollbar 2s infinite;
}

/* Estilo para scrollbar em modo escuro */
.dark-mode::-webkit-scrollbar-track {
    background: var(--dark-radial);
}

.dark-mode::-webkit-scrollbar-thumb {
    background: var(--gradient-secondary);
    border: 2px solid var(--dark-darker);
}

/* Estilo para scrollbar em cards */
.card-custom::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.card-custom::-webkit-scrollbar-thumb {
    background: var(--gradient-accent);
    border-radius: var(--border-radius-sm);
}

/* Estilo para scrollbar em tabelas */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--gradient-primary-accent);
}

/* Variações de jogos */
.game-fivem::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--fivem) 0%, var(--primary-dark) 100%);
    box-shadow: var(--fivem-glow);
}

.game-free-fire::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--free-fire) 0%, var(--primary-dark) 100%);
    box-shadow: var(--free-fire-glow);
}

.game-valorant::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--valorant) 0%, var(--primary-dark) 100%);
    box-shadow: var(--valorant-glow);
}

.game-warzone::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--warzone) 0%, var(--primary-dark) 100%);
    box-shadow: var(--warzone-glow);
}