/* ============================================================
   BEEPAY LUXURY THEME v99 — Europeu de Alto Padrão
   Vermelho Rubi #8B0000 | Prata Polida #C0C0C0 | Branco Gelo #FDFDFD
   Tabbar: Fundo Preto | Saldo: Verde Dinheiro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════
   FUNDO PRINCIPAL — Vermelho Rubi Profundo (veludo de cassino)
   ═══════════════════════════════════════════════════════════ */
html {
  background: #8B0000 !important;
}
body {
  background: linear-gradient(160deg, #8B0000 0%, #6B0000 60%, #5a0000 100%) !important;
  background-attachment: fixed !important;
  font-family: 'Nunito', 'Inter', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════
   HEADER / TOPBAR — Rubi escuro com borda prata
   ═══════════════════════════════════════════════════════════ */
.main-header, header, .site-header, .topbar-wrap,
[class*="header"], [class*="topbar"] {
  background: linear-gradient(180deg, #3d0000 0%, #2a0000 100%) !important;
  border-bottom: 1px solid rgba(192,192,192,.25) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.7) !important;
}

/* ═══════════════════════════════════════════════════════════
   CARDS DE JOGOS — Rubi escuro com borda prata
   ═══════════════════════════════════════════════════════════ */
.event-card, .game-card, .promo-card,
[class*="game-card"], [class*="event-card"] {
  background: linear-gradient(160deg, #1a0000 0%, #120000 100%) !important;
  border: 1px solid rgba(192,192,192,.15) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.6) !important;
}
.event-card:hover, .game-card:hover, .promo-card:hover {
  border-color: rgba(192,192,192,.5) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.7), 0 0 0 1px rgba(192,192,192,.3) !important;
  transform: translateY(-3px) !important;
}

/* ═══════════════════════════════════════════════════════════
   NAVEGAÇÃO (nav links)
   ═══════════════════════════════════════════════════════════ */
.main-nav, nav.navbar, .top-nav, [class*="main-nav"] {
  background: linear-gradient(180deg, #2a0000 0%, #1a0000 100%) !important;
  border-bottom: 1px solid rgba(192,192,192,.12) !important;
}
.nav-link {
  color: rgba(192,192,192,.7) !important;
}
.nav-link.active {
  color: #C0C0C0 !important;
  border-bottom-color: #C0C0C0 !important;
}
.nav-link:hover {
  color: #FDFDFD !important;
  background: rgba(192,192,192,.05) !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTÕES PRIMÁRIOS — Prata Polida Metálica Escovada
   ═══════════════════════════════════════════════════════════ */
.btn-primary, .btn-success, .bet-btn-confirm,
.dep-btn-submit, .lp-cta, .deposit-btn,
.btn-deposit-header, .btn-register, .btn-cadastrar,
button[class*="primary"], a[class*="btn-dep"],
.app-banner-btn {
  background: linear-gradient(135deg, #d8d8d8 0%, #a8a8a8 35%, #C0C0C0 65%, #909090 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #1a0000 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.5),
              inset 0 -1px 0 rgba(0,0,0,.3) !important;
  text-shadow: none !important;
}
.btn-primary:hover, .btn-success:hover, .bet-btn-confirm:hover,
.dep-btn-submit:hover, .btn-deposit-header:hover {
  background: linear-gradient(135deg, #e8e8e8 0%, #c0c0c0 35%, #d8d8d8 65%, #a8a8a8 100%) !important;
  color: #0a0000 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 12px rgba(192,192,192,.35) !important;
  transform: translateY(-2px) !important;
}

/* Botão Registrar-se específico (laranja original → prata) */
.btn-cadastrar, [onclick*="register"], a[href*="register"],
.register-btn, .signup-btn {
  background: linear-gradient(135deg, #d8d8d8 0%, #a8a8a8 35%, #C0C0C0 65%, #909090 100%) !important;
  color: #1a0000 !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTÕES SECUNDÁRIOS
   ═══════════════════════════════════════════════════════════ */
.btn-secondary, .filter-chip, .btn-outline, .odd-btn,
.btn-entrar, .btn-login {
  background: rgba(192,192,192,.07) !important;
  border: 1px solid rgba(192,192,192,.2) !important;
  color: #C0C0C0 !important;
}
.filter-chip.active, .odd-btn:hover,
.btn-entrar:hover {
  background: rgba(192,192,192,.18) !important;
  border-color: rgba(192,192,192,.55) !important;
  color: #FDFDFD !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAIS E CONTAINERS
   ═══════════════════════════════════════════════════════════ */
.modal-content, .deposit-modal-container,
.error-content, [class*="modal-content"],
.deposit-modal, .menu-modal-content {
  background: linear-gradient(160deg, #1a0000, #100000) !important;
  border: 1px solid rgba(192,192,192,.22) !important;
  border-radius: 16px !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════ */
.section-title i { color: #C0C0C0 !important; }
.btn-ver-todos {
  background: rgba(192,192,192,.1) !important;
  border: 1px solid rgba(192,192,192,.3) !important;
  color: #C0C0C0 !important;
  border-radius: 20px !important;
}
.btn-ver-todos:hover {
  background: rgba(192,192,192,.22) !important;
  color: #FDFDFD !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGES / JACKPOTS — Prata Polida
   ═══════════════════════════════════════════════════════════ */
.game-badge, [class*="badge"] {
  background: linear-gradient(135deg, #d0d0d0 0%, #909090 50%, #C0C0C0 100%) !important;
  color: #0a0000 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
}
[class*="jackpot"], .jackpot-value, .jackpot-amount {
  color: #C0C0C0 !important;
  text-shadow: 0 0 10px rgba(192,192,192,.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   SALDO — Verde Dinheiro (mantido conforme pedido)
   ═══════════════════════════════════════════════════════════ */
.balance-display, [class*="balance-display"] {
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(192,192,192,.18) !important;
  border-radius: 20px !important;
}
.currency {
  color: #00c853 !important;
  font-weight: 900 !important;
}
.amount, #headerBalance {
  color: #00e676 !important;
  font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════
   ODDS / APOSTAS
   ═══════════════════════════════════════════════════════════ */
.odd-value { color: #FDFDFD !important; font-weight: 900 !important; }
.odd-btn:hover .odd-value { color: #C0C0C0 !important; }
.team-score { color: #C0C0C0 !important; font-weight: 900 !important; }

/* ═══════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════ */
input, select, textarea {
  background: rgba(0,0,0,.4) !important;
  border-color: rgba(192,192,192,.18) !important;
  color: #FDFDFD !important;
  border-radius: 10px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(192,192,192,.55) !important;
  box-shadow: 0 0 0 3px rgba(192,192,192,.1) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(192,192,192,.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   PLAY BUTTON NOS GAMES
   ═══════════════════════════════════════════════════════════ */
.game-play-btn {
  background: rgba(192,192,192,.88) !important;
}
.game-play-btn:hover {
  background: #C0C0C0 !important;
  border-color: #C0C0C0 !important;
  transform: translate(-50%,-55%) scale(1.1) !important;
}
.game-play-btn svg { fill: #0a0000 !important; }

/* ═══════════════════════════════════════════════════════════
   CHAT
   ═══════════════════════════════════════════════════════════ */
.chat-send-btn {
  background: linear-gradient(135deg, #C0C0C0, #a0a0a0) !important;
  color: #0a0000 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
.chat-username { color: #C0C0C0 !important; }

/* ═══════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════ */
.search-bar {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(192,192,192,.14) !important;
  border-radius: 30px !important;
}
.search-bar:focus-within {
  border-color: rgba(192,192,192,.5) !important;
}

/* ═══════════════════════════════════════════════════════════
   LIVE BETS
   ═══════════════════════════════════════════════════════════ */
.live-bets-container {
  background: linear-gradient(160deg, #200000, #150000) !important;
  border: 1px solid rgba(192,192,192,.12) !important;
  border-radius: 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer, footer {
  background: linear-gradient(180deg, #1a0000 0%, #080000 100%) !important;
  border-top: 1px solid rgba(192,192,192,.1) !important;
}
.footer-brand, .footer-copyright {
  color: rgba(192,192,192,.5) !important;
}

/* ═══════════════════════════════════════════════════════════
   TEXTOS SECUNDÁRIOS — Branco Gelo
   ═══════════════════════════════════════════════════════════ */
.text-muted, .text-secondary, .card-text,
.event-info, .subtitle, .description {
  color: #FDFDFD !important;
}

/* ═══════════════════════════════════════════════════════════
   TABBAR NAVEGAÇÃO INFERIOR — Preto com ícones Prata
   (reforça o mytabbar.css)
   ═══════════════════════════════════════════════════════════ */
.tabbar, [class*="tabbar"]:not([class*="item"]):not([class*="menu"]) {
  background: #000000 !important;
  border-top: 1px solid rgba(192,192,192,.28) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.8) !important;
}
.tabbar-item {
  color: rgba(192,192,192,.5) !important;
}
.tabbar-item.active,
.tabbar-item:hover {
  color: #C0C0C0 !important;
  filter: drop-shadow(0 0 6px rgba(192,192,192,.55)) !important;
}
.tabbar-item.active i {
  color: #d8d8d8 !important;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.5)) !important;
}
.tabbar-item.active::after {
  background: linear-gradient(90deg, transparent, #C0C0C0, transparent) !important;
  box-shadow: 0 0 8px rgba(192,192,192,.6) !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .game-card { border-radius: 12px !important; }
  .event-card { border-radius: 12px !important; }
  .banner-carousel-container { border-radius: 0 !important; }
  body { padding-bottom: 70px !important; }
}