/* CSS Dinâmico com Cores Personalizadas */
:root {
    --cor-primaria: #ededed;
    --cor-secundaria: #00710f;
    --cor-fundo: #000000;
    --cor-botao: #00710f;
    --cor-botao-hover: #00850f;
    --cor-texto: #ffffff;
    --cor-sidebar: #111111;
    --cor-banner-app: #00710f;
}

/* Aplicar cores personalizadas */
body {
    background-color: var(--cor-fundo) !important;
    color: var(--cor-texto) !important;
}

/* Sidebar */
.sidebar {
    background: linear-gradient(180deg, var(--cor-sidebar) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
}

/* Botões */
.btn-primary,
.submit-button,
.btn-success,
.button-primary,
.btn-login,
.btn-register {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    border-color: var(--cor-botao) !important;
    color: var(--cor-texto) !important;
}

.btn-primary:hover,
.submit-button:hover,
.btn-success:hover,
.button-primary:hover,
.btn-login:hover,
.btn-register:hover {
    background: linear-gradient(135deg, var(--cor-botao-hover), var(--cor-primaria)) !important;
    border-color: var(--cor-botao-hover) !important;
    color: var(--cor-texto) !important;
}

/* Botões específicos das raspadinhas */
button[onclick*="jogar"],
button[onclick*="Jogar"],
.jogar-btn,
.play-btn {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    border-color: var(--cor-botao) !important;
    color: var(--cor-texto) !important;
}

button[onclick*="jogar"]:hover,
button[onclick*="Jogar"]:hover,
.jogar-btn:hover,
.play-btn:hover {
    background: linear-gradient(135deg, var(--cor-botao-hover), var(--cor-primaria)) !important;
    border-color: var(--cor-botao-hover) !important;
    color: var(--cor-texto) !important;
}

/* Elementos com cor primária */
.text-primary,
.nav-item.active,
.user-role,
.section-title i,
.form-label i {
    color: var(--cor-primaria) !important;
}

/* Gradientes */
.user-avatar {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)) !important;
}

/* Bordas e destaques */
.form-input:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 0 3px rgba(237, 237, 237, 0.1) !important;
}

.nav-item:hover {
    background: rgba(237, 237, 237, 0.1) !important;
}

/* Cards e containers */
.stat-card,
.mini-stat-card {
    border-left: 4px solid var(--cor-primaria) !important;
}

.form-container::before {
    background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria), var(--cor-primaria)) !important;
}

/* Ícones e elementos de destaque */
.mini-stat-icon,
.stat-icon {
    background: linear-gradient(135deg, rgba(237, 237, 237, 0.2), rgba(237, 237, 237, 0.1)) !important;
    border: 1px solid rgba(237, 237, 237, 0.3) !important;
    color: var(--cor-primaria) !important;
}

/* Links */
a {
    color: var(--cor-primaria) !important;
}

a:hover {
    color: var(--cor-secundaria) !important;
}

/* Tabelas */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(237, 237, 237, 0.05) !important;
}

/* Alertas e notificações */
.alert-success {
    background-color: rgba(237, 237, 237, 0.1) !important;
    border-color: var(--cor-primaria) !important;
    color: var(--cor-primaria) !important;
}

/* Preços e valores monetários */
.price,
.valor,
.preco,
.money,
.currency {
    color: var(--cor-primaria) !important;
    font-weight: bold !important;
}

/* Cards de raspadinhas */
.card-price,
.raspadinha-price,
.game-price {
    color: var(--cor-primaria) !important;
    background: rgba(237, 237, 237, 0.1) !important;
    border: 1px solid rgba(237, 237, 237, 0.3) !important;
}

/* Elementos de destaque nas raspadinhas */
.game-card,
.raspadinha-card {
    border: 1px solid rgba(237, 237, 237, 0.2) !important;
}

.game-card:hover,
.raspadinha-card:hover {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 20px rgba(237, 237, 237, 0.3) !important;
}

/* Badges e etiquetas */
.badge,
.tag,
.label,
.category-badge,
.category-badge.dinheiro,
.category-badge.produtos {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)) !important;
    color: var(--cor-texto) !important;
    box-shadow: 0 4px 15px rgba(237, 237, 237, 0.3) !important;
}

/* Formulários de login e registro */
.form-control:focus,
.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 0 3px rgba(237, 237, 237, 0.1) !important;
}

/* Sobrescrever cor rosa padrão (#b62d84) em todo o site */
* {
    /* Substituir qualquer background com a cor rosa */
}

/* Elementos específicos que usam a cor rosa */
.filter-btn.active,
.play-btn,
.cta-button,
.primary-button,
.action-button {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    border-color: var(--cor-botao) !important;
    color: var(--cor-texto) !important;
}

/* Botões de filtro específicos */
.filter-btn,
.showcase-filters .filter-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.filter-btn:hover,
.showcase-filters .filter-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--cor-texto) !important;
    border-color: var(--cor-primaria) !important;
}

.filter-btn.active,
.showcase-filters .filter-btn.active {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)) !important;
    color: var(--cor-texto) !important;
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 4px 15px rgba(237, 237, 237, 0.3) !important;
    font-weight: 600 !important;
}

/* Container dos filtros */
.showcase-filters {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
}

/* Título principal das raspadinhas */
.showcase-title {
    color: var(--cor-primaria) !important;
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Preços das raspadinhas */
.price-label,
.price-value {
    color: var(--cor-primaria) !important;
}

/* Títulos e descrições das raspadinhas */
.card-title {
    color: var(--cor-texto) !important;
}

.card-description {
    color: #9ca3af !important;
}

/* Botões de jogar das raspadinhas */
.play-btn {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    color: var(--cor-texto) !important;
    border: none !important;
}

.play-btn:hover {
    background: linear-gradient(135deg, var(--cor-botao-hover), var(--cor-botao)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 113, 15, 0.3) !important;
}

/* Página de Cartelas - Elementos específicos */
.stat-number {
    color: var(--cor-primaria) !important;
}

.price-badge {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    color: var(--cor-texto) !important;
}

.prize-info {
    border-color: var(--cor-primaria) !important;
}

.prize-value {
    color: var(--cor-primaria) !important;
}

.play-button {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    color: var(--cor-texto) !important;
}

.play-button:hover {
    background: linear-gradient(135deg, var(--cor-botao-hover), var(--cor-botao)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 113, 15, 0.4) !important;
}

/* Filtros da página de cartelas */
.filter-btn::before {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
}

/* Página de Cadastro - Elementos específicos */
.cadastro-icon {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    color: var(--cor-texto) !important;
}

.custom-checkbox {
    background: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
}

.checkbox-label a,
.footer-link {
    color: var(--cor-primaria) !important;
}

.checkbox-label a:hover,
.footer-link:hover {
    color: var(--cor-secundaria) !important;
}

.submit-btn {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    color: var(--cor-texto) !important;
}

.submit-btn:hover {
    background: linear-gradient(135deg, var(--cor-botao-hover), var(--cor-botao)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 113, 15, 0.4) !important;
}

/* Elementos globais - Header, navegação e outros */
.nav-menu a:hover {
    color: var(--cor-primaria) !important;
}

.nav-menu a::after {
    background: var(--cor-primaria) !important;
}

.app-download-banner {
    background: linear-gradient(135deg, var(--cor-banner-app), var(--cor-banner-app)) !important;
    color: var(--cor-texto) !important;
}

.app-download-banner .download-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--cor-texto) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.app-download-banner .download-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

.game-btn:hover {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    color: var(--cor-texto) !important;
}

/* Scrollbar personalizada */
::-webkit-scrollbar-thumb {
    background: var(--cor-primaria) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-secundaria) !important;
}

/* Navegação do Header - Melhorias nos botões */
.nav-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

.nav-menu .nav-link i {
    font-size: 1.1rem !important;
    color: var(--cor-primaria) !important;
    transition: all 0.3s ease !important;
}

.nav-menu .nav-link:hover {
    background: rgba(237, 237, 237, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(237, 237, 237, 0.2) !important;
}

.nav-menu .nav-link:hover i {
    color: var(--cor-secundaria) !important;
    transform: scale(1.1) !important;
}

.nav-menu .nav-link span {
    color: white !important;
    font-size: 0.95rem !important;
}

.nav-menu .nav-link:hover span {
    color: var(--cor-primaria) !important;
}

/* Responsivo para mobile */
@media (max-width: 768px) {
    .nav-menu .nav-link {
        padding: 0.6rem 0.8rem !important;
        gap: 0.4rem !important;
    }
    
    .nav-menu .nav-link i {
        font-size: 1rem !important;
    }
    
    .nav-menu .nav-link span {
        font-size: 0.9rem !important;
    }
}

/* Textos com cor rosa */
.highlight-text,
.pink-text {
    color: var(--cor-primaria) !important;
}

/* Bordas com cor rosa */
.primary-border,
.accent-border {
    border-color: var(--cor-primaria) !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .sidebar {
        background: linear-gradient(180deg, var(--cor-sidebar) 0%, rgba(0, 0, 0, 0.98) 100%) !important;
    }
}