/* Aplicação de Tema aos Elementos Hardcoded */

/* Logo e elementos do header */
.logo {
    color: var(--primary-color) !important;
}

.logo-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

/* Navegação */
.nav-menu a:hover {
    color: var(--primary-color) !important;
}

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

/* Botões */
.btn-register,
.btn-deposit,
.bottom-nav-item.deposit-btn,
.bottom-nav-item.register-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.btn-register:hover,
.btn-deposit:hover,
.bottom-nav-item.deposit-btn:hover,
.bottom-nav-item.register-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Balance display */
.balance-display {
    color: var(--primary-color) !important;
}

/* Elementos do hero */
.hero-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.hero-cta:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Botões de jogo */
.game-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

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

/* Elementos de destaque */
.highlight {
    color: var(--primary-color) !important;
}

.accent {
    background: var(--primary-color) !important;
}

/* Bordas e sombras */
.border-accent {
    border-color: var(--primary-color) !important;
}

.shadow-accent {
    box-shadow: 0 4px 20px var(--primary-shadow) !important;
}

/* Textos coloridos */
.text-accent {
    color: var(--primary-color) !important;
}

/* Backgrounds leves */
.bg-accent-light {
    background-color: var(--primary-light) !important;
}

/* Gradientes */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.gradient-primary-90 {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)) !important;
}

/* Elementos específicos do site */
.prize-value {
    color: var(--primary-color) !important;
}

/* ========================================
   BOTÕES DE JOGAR - APLICAÇÃO DE TEMA
   ======================================== */

/* Botões de jogar nas raspadinhas */
.play-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    color: var(--text-primary) !important;
}

.play-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
    color: var(--text-primary) !important;
}

/* Botões de jogar agora nas cartelas */
.play-button {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    color: var(--text-primary) !important;
}

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

/* Botão "Ver todas as raspadinhas" */
.view-all-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    color: var(--text-primary) !important;
}

.view-all-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   GARANTIA DE TEXTO BRANCO EM TODOS OS BOTÕES COM TEMA
   ======================================== */

/* Todos os botões que usam cores de tema devem ter texto branco */
.btn-register,
.btn-deposit,
.bottom-nav-item.deposit-btn,
.bottom-nav-item.register-btn,
.game-btn,
.hero-cta,
.play-btn,
.play-button,
.view-all-btn,
.modal-btn-primary,
.form-btn-primary,
.card-btn-primary,
.table-btn-primary,
.status-btn-primary,
.nav-btn-primary,
.pagination-btn-primary,
.filter-btn-primary,
.export-btn-primary,
.import-btn-primary,
.config-btn-primary,
.profile-btn-primary,
.notification-btn-primary,
.help-btn-primary,
.logout-btn-primary,
.admin-btn-primary,
.sidebar-btn-primary,
.dashboard-btn-primary,
.affiliate-card-btn,
.register-form-btn,
.login-form-btn,
.deposit-form-btn,
.withdraw-form-btn,
.transaction-btn,
.bet-btn,
.cartela-btn,
.raspadinha-btn,
.bingo-btn,
.prize-btn,
.winner-btn,
.leaderboard-btn,
.tournament-btn,
.challenge-btn,
.bonus-btn,
.promotion-btn,
.referral-btn,
.support-btn,
.faq-btn,
.terms-btn,
.privacy-btn,
.about-btn,
.contact-btn {
    color: var(--text-primary) !important;
}

/* Estados hover também devem manter texto branco */
.btn-register:hover,
.btn-deposit:hover,
.bottom-nav-item.deposit-btn:hover,
.bottom-nav-item.register-btn:hover,
.game-btn:hover,
.hero-cta:hover,
.play-btn:hover,
.play-button:hover,
.view-all-btn:hover,
.modal-btn-primary:hover,
.form-btn-primary:hover,
.card-btn-primary:hover,
.table-btn-primary:hover,
.status-btn-primary:hover,
.nav-btn-primary:hover,
.pagination-btn-primary:hover,
.filter-btn-primary:hover,
.export-btn-primary:hover,
.import-btn-primary:hover,
.config-btn-primary:hover,
.profile-btn-primary:hover,
.notification-btn-primary:hover,
.help-btn-primary:hover,
.logout-btn-primary:hover,
.admin-btn-primary:hover,
.sidebar-btn-primary:hover,
.dashboard-btn-primary:hover,
.affiliate-card-btn:hover,
.register-form-btn:hover,
.login-form-btn:hover,
.deposit-form-btn:hover,
.withdraw-form-btn:hover,
.transaction-btn:hover,
.bet-btn:hover,
.cartela-btn:hover,
.raspadinha-btn:hover,
.bingo-btn:hover,
.prize-btn:hover,
.winner-btn:hover,
.leaderboard-btn:hover,
.tournament-btn:hover,
.challenge-btn:hover,
.bonus-btn:hover,
.promotion-btn:hover,
.referral-btn:hover,
.support-btn:hover,
.faq-btn:hover,
.terms-btn:hover,
.privacy-btn:hover,
.about-btn:hover,
.contact-btn:hover {
    color: var(--text-primary) !important;
}

.win-amount {
    color: var(--primary-color) !important;
}

.success-message {
    color: var(--primary-color) !important;
}

/* Loading spinner */
.loading-spinner::before {
    border-top-color: var(--primary-color) !important;
}

/* Glow effect */
.glow {
    box-shadow: 0 0 20px var(--primary-shadow) !important;
}

.glow:hover {
    box-shadow: 0 0 30px var(--primary-shadow) !important;
}

/* Elementos do footer */
.footer-accent {
    color: var(--primary-color) !important;
}

/* Elementos de formulário */
.form-accent {
    border-color: var(--primary-color) !important;
}

.form-accent:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* Elementos de status */
.status-success {
    color: var(--primary-color) !important;
}

.status-active {
    background: var(--primary-color) !important;
}

/* Elementos de progresso */
.progress-bar {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)) !important;
}

/* Elementos de notificação */
.notification-success {
    background: var(--primary-color) !important;
}

/* Elementos de badge */
.badge-primary {
    background: var(--primary-color) !important;
    color: white !important;
}

/* Elementos de card */
.card-accent {
    border-color: var(--primary-border) !important;
}

.card-accent:hover {
    box-shadow: 0 4px 20px var(--primary-shadow) !important;
}

/* Elementos de lista */
.list-item-accent {
    border-left-color: var(--primary-color) !important;
}

/* Elementos de tabela */
.table-accent {
    background: var(--primary-light) !important;
}

/* Elementos de modal */
.modal-accent {
    border-color: var(--primary-color) !important;
}

/* Elementos de tooltip */
.tooltip-accent {
    background: var(--primary-color) !important;
}

/* Elementos de dropdown */
.dropdown-accent {
    border-color: var(--primary-color) !important;
}

/* Elementos de paginação */
.pagination-accent {
    background: var(--primary-color) !important;
    color: white !important;
}

.pagination-accent:hover {
    background: var(--primary-hover) !important;
}

/* Elementos de breadcrumb */
.breadcrumb-accent {
    color: var(--primary-color) !important;
}

/* Elementos de alerta */
.alert-accent {
    border-color: var(--primary-color) !important;
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Elementos de badge de notificação */
.notification-badge {
    background: var(--primary-color) !important;
}

/* Elementos de ícone colorido */
.icon-accent {
    color: var(--primary-color) !important;
}

/* Elementos de link colorido */
.link-accent {
    color: var(--primary-color) !important;
}

.link-accent:hover {
    color: var(--primary-hover) !important;
}

/* Elementos de separador */
.divider-accent {
    background: var(--primary-color) !important;
}

/* Elementos de marca d'água */
.watermark-accent {
    color: var(--primary-color) !important;
    opacity: 0.1;
}

/* Elementos de destaque de texto */
.text-highlight {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Elementos de botão outline */
.btn-outline-primary {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* Elementos de botão ghost */
.btn-ghost-primary {
    color: var(--primary-color) !important;
}

.btn-ghost-primary:hover {
    background: var(--primary-light) !important;
}

/* Elementos de input com foco */
.input-focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* Elementos de checkbox/radio */
.checkbox-primary:checked {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Elementos de select */
.select-primary {
    border-color: var(--primary-color) !important;
}

.select-primary:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* Elementos de textarea */
.textarea-primary {
    border-color: var(--primary-color) !important;
}

.textarea-primary:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* ========================================
   ELEMENTOS ESPECÍFICOS COM CORES HARDCODED
   ======================================== */

/* Hero subtitle */
.hero-subtitle {
    color: var(--primary-color) !important;
}

/* Botões de login */
.btn-login:hover {
    color: var(--primary-color) !important;
}

/* Badges de prêmio */
.prize-badge.standard {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

/* Valores distribuídos */
.distributed-value {
    color: var(--primary-color) !important;
}

/* Barras de scroll personalizadas */
::-webkit-scrollbar-thumb {
    background: var(--primary-color) !important;
}

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

/* Elementos de admin com cores hardcoded */
.admin-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.admin-sidebar {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.admin-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.admin-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Elementos de formulário admin */
.admin-form-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.admin-form-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Elementos de tabela admin */
.admin-table-header {
    background: var(--primary-color) !important;
}

.admin-status-active {
    color: var(--primary-color) !important;
}

/* Elementos de card admin */
.admin-card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

/* Elementos de modal admin */
.admin-modal-header {
    background: var(--primary-color) !important;
}

/* Elementos de notificação admin */
.admin-notification {
    border-color: var(--primary-color) !important;
    background: var(--primary-light) !important;
}

/* Elementos de progresso admin */
.admin-progress {
    background: var(--primary-color) !important;
}

/* Elementos de badge admin */
.admin-badge {
    background: var(--primary-color) !important;
    color: white !important;
}

/* Elementos de ícone admin */
.admin-icon {
    color: var(--primary-color) !important;
}

/* Elementos de link admin */
.admin-link {
    color: var(--primary-color) !important;
}

.admin-link:hover {
    color: var(--primary-hover) !important;
}

/* Elementos de separador admin */
.admin-divider {
    background: var(--primary-color) !important;
}

/* Elementos de destaque admin */
.admin-highlight {
    color: var(--primary-color) !important;
}

/* Elementos de alerta admin */
.admin-alert-success {
    border-color: var(--primary-color) !important;
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Elementos de tooltip admin */
.admin-tooltip {
    background: var(--primary-color) !important;
}

/* Elementos de dropdown admin */
.admin-dropdown-item:hover {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Elementos de paginação admin */
.admin-pagination .active {
    background: var(--primary-color) !important;
    color: white !important;
}

.admin-pagination a:hover {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Elementos de breadcrumb admin */
.admin-breadcrumb a {
    color: var(--primary-color) !important;
}

.admin-breadcrumb a:hover {
    color: var(--primary-hover) !important;
}

/* Elementos de marca d'água admin */
.admin-watermark {
    color: var(--primary-color) !important;
    opacity: 0.1;
}

/* Elementos de destaque de texto admin */
.admin-text-highlight {
    background: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Elementos de botão outline admin */
.admin-btn-outline {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.admin-btn-outline:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* Elementos de botão ghost admin */
.admin-btn-ghost {
    color: var(--primary-color) !important;
}

.admin-btn-ghost:hover {
    background: var(--primary-light) !important;
}

/* Elementos de input com foco admin */
.admin-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* Elementos de checkbox/radio admin */
.admin-checkbox:checked {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Elementos de select admin */
.admin-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* Elementos de textarea admin */
.admin-textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* ========================================
   ELEMENTOS ESPECÍFICOS DE PÁGINAS
   ======================================== */

/* Página de afiliados */
.affiliate-card {
    border-color: var(--primary-border) !important;
}

.affiliate-card:hover {
    box-shadow: 0 4px 20px var(--primary-shadow) !important;
}

.affiliate-stat {
    color: var(--primary-color) !important;
}

.affiliate-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.affiliate-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Página de cadastro */
.register-form-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.register-form-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Página de login */
.login-form-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.login-form-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Página de apostas */
.bet-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.bet-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Página de transações */
.transaction-status-success {
    color: var(--primary-color) !important;
}

.transaction-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.transaction-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* ========================================
   ELEMENTOS DE COMPONENTES
   ======================================== */

/* Componente de modais */
.modal-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.modal-btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Componente de chamada */
.cta-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.cta-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
}

/* Componente de ganhos */
.winner-prize {
    color: var(--primary-color) !important;
}

.total-prize {
    color: var(--primary-color) !important;
}

/* ========================================
   ELEMENTOS DE UTILITÁRIOS
   ======================================== */

/* Classes utilitárias para cores */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.shadow-primary {
    box-shadow: 0 4px 20px var(--primary-shadow) !important;
}

.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

.gradient-primary-90 {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)) !important;
}

/* Estados hover */
.hover\:text-primary:hover {
    color: var(--primary-color) !important;
}

.hover\:bg-primary:hover {
    background: var(--primary-color) !important;
}

.hover\:border-primary:hover {
    border-color: var(--primary-color) !important;
}

.hover\:shadow-primary:hover {
    box-shadow: 0 4px 20px var(--primary-shadow) !important;
}

/* Estados focus */
.focus\:border-primary:focus {
    border-color: var(--primary-color) !important;
}

.focus\:shadow-primary:focus {
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

/* Estados active */
.active\:bg-primary:active {
    background: var(--primary-color) !important;
}

.active\:text-primary:active {
    color: var(--primary-color) !important;
}

/* ========================================
   BANNER PWA
   ======================================== */

/* Banner de instalação do PWA */
.app-download-banner {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
}

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

.close-banner:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}