/* CSS Dinâmico com Cores Personalizadas */
:root {
    --cor-primaria: #6e3ed6;
    --cor-secundaria: #d560ff;
    --cor-fundo: #371584;
    --cor-botao: #d560ff;
    --cor-botao-hover: #d560ff;
    --cor-texto: #D3ACFF;
    --cor-sidebar: #2b0977;
    --cor-texto-botao: #17306d;
    --cor-icons: #d560ff;
    --cor-grids: #431e98;
    --cor-borders: #9069e6;
    --cor-alternativa1: #fef0ff;
    --cor-alternativa2: #37c522;
}

/* Aplicar cores personalizadas */
body {
    background-color: var(--cor-fundo) !important;
    /*color: var(--cor-sidebar);*/
    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-color: var(--cor-sidebar); /*linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;*/
    border-color: var(--cor-botao) !important;
    color: varvar(--cor-fundo) !important;
}

.btn-primary:hover,
.submit-button:hover,
.btn-success:hover,
.button-primary:hover,
.btn-login:hover,
.btn-register:hover {
    background: var(--cor-botao-hover); /*linear-gradient(135deg, var(--cor-botao-hover), var(--cor-primaria)) !important;*/
    border-color: var(--cor-botao-hover) !important;
    color: var(--cor-texto-botao, 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-botao, 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-botao, 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(110, 62, 214, 0.1) !important;
}

.nav-item:hover {
    background: rgba(110, 62, 214, 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(110, 62, 214, 0.2), rgba(110, 62, 214, 0.1)) !important;
    border: 1px solid rgba(110, 62, 214, 0.3) !important;
    color: var(--cor-primaria) !important;
}

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

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

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

/* Alertas e notificações */
.alert-success {
    background-color: rgba(110, 62, 214, 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,*//*desmarcar para adicionar a borda ao valor da raspadinha*/
.raspadinha-price,
.game-price {
    color: var(--cor-primaria) !important;
    background: rgba(110, 62, 214, 0.1) !important;
    border: 1px solid rgba(110, 62, 214, 0.3) !important;
}

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

.game-card:hover,
.raspadinha-card:hover {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 20px rgba(110, 62, 214, 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(110, 62, 214, 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(110, 62, 214, 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-botao, 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(110, 62, 214, 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-botao, 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(213, 96, 255, 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-botao, 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(213, 96, 255, 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-botao, 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-secundaria) !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-botao, 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(213, 96, 255, 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-botao), var(--cor-botao-hover)) !important;
    color: var(--cor-texto-botao, var(--cor-texto)) !important;
}

.game-btn:hover {
    background: linear-gradient(135deg, var(--cor-botao), var(--cor-botao-hover)) !important;
    color: var(--cor-texto-botao, 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(110, 62, 214, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(110, 62, 214, 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;
    }
}

/* Camada de tema ampliada */
:root {
    --theme-page-bg: color-mix(in srgb, var(--cor-fundo) 78%, var(--cor-sidebar) 22%);
    --theme-page-bg-2: color-mix(in srgb, var(--cor-sidebar) 58%, #000000 42%);
    --theme-surface: color-mix(in srgb, var(--cor-sidebar) 88%, #ffffff 6%);
    --theme-surface-2: color-mix(in srgb, var(--cor-sidebar) 80%, #000000 20%);
    --theme-surface-3: color-mix(in srgb, var(--cor-sidebar) 70%, #000000 30%);
    --theme-border: color-mix(in srgb, var(--cor-primaria) 18%, transparent);
    --theme-muted: color-mix(in srgb, var(--cor-texto) 56%, #64748b 44%);
    --theme-text-soft: color-mix(in srgb, var(--cor-texto) 88%, #94a3b8 12%);
    --theme-text-dim: color-mix(in srgb, var(--cor-texto) 58%, #64748b 42%);
    --theme-success: #22c55e;
    --theme-warning: #fbbf24;
    --theme-danger: #ef4444;
    --theme-info: #38bdf8;
    --theme-input-bg: color-mix(in srgb, var(--theme-surface) 76%, #ffffff 8%);
    --theme-input-border: color-mix(in srgb, var(--theme-border) 74%, #ffffff 8%);
    --theme-card: color-mix(in srgb, var(--theme-surface) 86%, #000000 14%);
    --theme-nav-bg: color-mix(in srgb, var(--theme-surface) 90%, #000000 10%);
    --theme-nav-border: color-mix(in srgb, var(--theme-border) 84%, #ffffff 6%);
}

body {
    background: linear-gradient(180deg, var(--theme-page-bg) 0%, var(--theme-page-bg-2) 100%) !important;
}

body.login-page,
body.register-page,
body.afiliados-page,
body.transactions-page,
body.bonus-page,
body.boxes-page,
body.bets-page {
    background: linear-gradient(180deg, var(--theme-page-bg) 0%, var(--theme-page-bg-2) 100%) !important;
}

.page-shell,
.login-section,
.register-section,
.afiliados-section,
.transactions-section,
.bonus-section,
.boxes-page,
.bets-section,
.roulette-page,
.main-container,
.login-card,
.register-card,
.afiliados-card,
.tabs-container,
.card,
.box-card,
.card-item,
.panel,
.card-panel {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

.header,
.footer,
.mobile-nav,
.bottom-navigation,
.nav-bottom,
.bottom-navbar {
    background: var(--cor-fundo) !important;
    border-color: var(--theme-nav-border) !important;
}

.btn-primary,
.btn-login,

.submit-btn,
.submit-button,
.button-primary,
.action-button,
.play-btn,
.play-button,
.spin-button,
.cta-button {
    background: var(--cor-botao);/*linear-gradient(135deg, var(--cor-sidebar), var(--cor-botao-hover)) !important;*/
    border-color: var(--cor-botao) !important;
    color: var(--cor-alternativa1) !important;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--cor-botao) 28%, transparent) !important;
}

.btn-primary:hover,
.btn-login:hover,
.btn-register:hover,
.submit-btn:hover,
.submit-button:hover,
.button-primary:hover,
.action-button:hover,
.play-btn:hover,
.play-button:hover,
.spin-button:hover,
.cta-button:hover {
    background: var(--cor-botao-hover) !important;
} /*linear-gradient(135deg, var(--cor-botao-hover), var(--cor-primaria)) !important;*/
    border-color: var(--cor-botao-hover) !important;
}

.form-control,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea,
.combo-btn,
.control,
.search input {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--cor-texto) !important;
}

.form-control::placeholder,
.input::placeholder,
input::placeholder,
.search input::placeholder {
    color: var(--theme-muted) !important;
}

.text-primary,
.nav-item.active,
.section-title i,
.form-label i,
.price,
.price-value,
.valor,
.money,
.currency,
.stat-number,
.transaction-amount,
.transaction-date i,
.transaction-cpf:hover {
    color: var(--cor-primaria) !important;
}

.text-muted,
.subtitle,
.description,
.muted,
.helper-text,
.card-description,
.transaction-cpf,
.empty-state,
.footer-description {
    color: var(--theme-muted) !important;
}

.title,
.card-title,
.header-title,
.login-title,
.register-title,
.afiliados-title,
.section-title,
.result-value {
    color: var(--cor-botao) !important;
}

.badge,
.tag,
.label,
.category-badge,
.status-badge.approved,
.price-badge,
.hero-pill,
.theme-badge {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)) !important;
    color: var(--cor-texto) !important;
}

.status-badge.pending {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.12)) !important;
    color: var(--theme-warning) !important;
}

.status-badge.approved,
.status-badge.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.12)) !important;
    color: var(--theme-success) !important;
}

.status-badge.danger,
.status-badge.failed {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.12)) !important;
    color: var(--theme-danger) !important;
}

.card,
.panel,
.main-container,
.login-card,
.register-card,
.afiliados-card,
.tabs-container,
.transaction-item,
.theme-card {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26) !important;
    border: 1px solid var(--theme-border) !important;
}

/* ==========================================================================
   Novas variáveis de cor: ícones, grids, bordas e cores alternativas
   ========================================================================== */

/* Ícones (font-awesome, svg e afins) */
i[class*="fa-"],
.icon,
.nav-icon,
.mini-stat-icon,
.stat-icon,
.form-label i,
.section-title i {
    color: var(--cor-icons) !important;
}

/* Grids: linhas de tabelas, listas e divisores */
.table,
.table-striped,
.table-bordered,
table {
    border-color: var(--cor-grids) !important;
}

.table th,
.table td,
.table-striped th,
.table-striped td,
.table-bordered th,
.table-bordered td {
    border-color: var(--cor-grids) !important;
}

/*.divider,*/
.grid-line,
hr {
    border-color: var(--cor-grids) !important;
    background-color: var(--cor-grids) !important;
}

/* Bordas genéricas de cards, inputs e containers */
.themed-border,
.border-accent,
.input-bordered,
.card-bordered {
    border-color: var(--cor-borders) !important;
}

/* Cores alternativas: variações de destaque e gradientes extras */
.badge-alt,
.tag-alt,
.chip-alt,
.highlight-alt {
    background: linear-gradient(135deg, var(--cor-alternativa1), var(--cor-alternativa2)) !important;
    color: var(--cor-texto) !important;
}

.text-alt-1 {
    color: var(--cor-alternativa1) !important;
}

.text-alt-2 {
    color: var(--cor-alternativa2) !important;
}