/* ============================================================================
   tema-7k.css — deixa a home com a mesma cara do 7k.bet.br, no amarelo da casa.
   ============================================================================

   Por que uma folha separada e não editar os 13 arquivos da home: o site não tem
   nenhum .css próprio — o estilo vive em <style> dentro de 86 .php, com 20 :root
   diferentes e 213 cores cravadas fora de variável. Foi por isso que o laranja do
   cabeçalho sobreviveu a duas trocas de paleta. Uma folha que entra por último
   redefine tudo num lugar só, e sai inteira se não agradar.

   As medidas e cores vieram do próprio 7k. A única troca é o verde deles pelo
   amarelo da logo:  #A1CD3D  ->  #F9E30E

   PALETA (7k)                        PAPEL
   #16182A  fundo do corpo            azul-escuro, não preto
   #1C1E34  cartões, trilhos, barras
   #3B3E5E  botões secundários, campos
   #E0E0E0  texto
   #1C1E34  texto SOBRE o amarelo     (escuro no claro, para ler)
   ========================================================================== */

:root,
body {
  --bg-body:        #16182a !important;
  --bg-darker:      #16182a !important;
  --bg-card:        #1c1e34 !important;
  --bg-content:     #1c1e34 !important;
  --bg-hover:       #3b3e5e !important;
  --bg-input:       #3b3e5e !important;
  --border-color:   rgba(255, 255, 255, .10) !important;

  --text-primary:   #e0e0e0 !important;
  --text-white:     #ffffff !important;
  --text-secondary: rgba(224, 224, 224, .70) !important;
  --text-muted:     rgba(224, 224, 224, .70) !important;

  /* o verde do 7k vira o amarelo da logo */
  --accent:              #f9e30e !important;
  --accent-green:        #f9e30e !important;
  --accent-hover:        #f9e30e !important;
  --accent-green-hover:  #f9e30e !important;
  --primary:             #f9e30e !important;
  --primary-h:           #f9e30e !important;
  --warning:             #f9e30e !important;

  /* cabeçalho e barra inferior */
  --header-bg:        #16182a !important;
  --header-h:         56px   !important;
  --wallet-bg:        #1c1e34 !important;
  --tabbar-bg:        #1c1e34 !important;
  --tabbar-border:    rgba(255, 255, 255, .10) !important;
  --tabbar-item-active:   #f9e30e !important;
  --tabbar-item-inactive: rgba(224, 224, 224, .70) !important;
  --tabbar-item-hover:    #f9e30e !important;

  --radius-md: 8px !important;
  --font-main: 'Montserrat', 'Montserrat Fallback', ui-sans-serif, system-ui, sans-serif !important;
}

/* ── fundo ─────────────────────────────────────────────────────────────────── */
html, body { background: #16182a !important; color: #e0e0e0 !important; }
body { font-family: var(--font-main) !important; line-height: 1.5 !important; }

/* largura do conteúdo: 1440px no 7k, contra 1382px daqui */
.bp-home, .bp-page > .main-nav > .nav-container { max-width: 1440px !important; }

/* ── cabeçalho: no 7k é da MESMA cor do corpo, sem degradê ─────────────────── */
.main-header, header.main-header, .topbar, #topbar {
  background: #16182a !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(224, 224, 224, .10) !important;
  height: 56px !important;
}
@media (min-width: 1024px) {
  .main-header, header.main-header, .topbar, #topbar { height: 72px !important; }
}

/* ── cartões, trilhos e blocos ─────────────────────────────────────────────── */
.bp-pm-section, .bp-mj-section, .bp-lc-section, .bp-cr-section,
.bp-mg2-section, .bp-story-section, .bp-search-section, .bp-ban-section,
.game-card, .mg-card, .prov-card, .bp-sb, .modal-content {
  background-color: #1c1e34 !important;
  border-radius: 8px !important;
}

/* título de seção: no 7k é uma faixa com degradê que some à direita */
.bp-pm-head, .bp-mj-head, .bp-lc-head, .bp-cr-head, .bp-mg2-head,
.section-title, .bp-section-title {
  background: linear-gradient(to right,
      rgba(59, 62, 94, .50) 0%,
      rgba(59, 62, 94, .20) 50%,
      transparent 100%) !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.bp-pm-head h2, .bp-mj-head h2, .bp-lc-head h2, .bp-cr-head h2, .bp-mg2-head h2,
.bp-pm-title, .bp-mj-title, .bp-lc-title, .bp-cr-title, .bp-mg2-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e0e0e0 !important;
  margin: 0 !important;
}

/* ── cartão de jogo: retrato 4:5, 8px de raio, sem selo por cima ───────────── */
.game-card, .bp-pm-card, .bp-mj-card, .bp-lc-card, .bp-cr-card {
  width: 118px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #1c1e34 !important;
  transition: filter .15s !important;
}
.game-card:hover, .bp-pm-card:hover, .bp-mj-card:hover,
.bp-lc-card:hover, .bp-cr-card:hover { filter: brightness(1.10) !important; }

.game-card img, .bp-pm-card img, .bp-mj-card img,
.bp-lc-card img, .bp-cr-card img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
}
@media (min-width: 640px)  { .game-card, .bp-pm-card, .bp-mj-card, .bp-lc-card, .bp-cr-card { width: 135px !important; } }
@media (min-width: 1024px) { .game-card, .bp-pm-card, .bp-mj-card, .bp-lc-card, .bp-cr-card { width: 140px !important; } }

/* espaço entre cartões do trilho */
.bp-pm-track, .bp-mj-track, .bp-lc-track, .bp-cr-track { gap: 8px !important; }
@media (min-width: 640px) { .bp-pm-track, .bp-mj-track, .bp-lc-track, .bp-cr-track { gap: 12px !important; } }

/* espaço entre seções: 12px no celular, 24px a partir de 640px */
.bp-home { gap: 12px !important; }
@media (min-width: 640px) { .bp-home { gap: 24px !important; } }

/* ── botões ────────────────────────────────────────────────────────────────── */
/* primário: amarelo com texto ESCURO, que é como o 7k faz o verde */
.btn-primary, .btn-deposit, .btn-register, .bp-btn-primary,
.deposit-btn, .register-btn, button.primary, .btn-jogar {
  background: #f9e30e !important;
  background-image: linear-gradient(276deg, rgba(0,0,0,.22) 1.72%, rgba(255,255,255,.15) 67.16%) !important;
  color: #1c1e34 !important;
  border: 1px solid #f9e30e !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: filter .15s !important;
}
.btn-primary:hover, .btn-deposit:hover, .btn-register:hover,
.bp-btn-primary:hover, .deposit-btn:hover, .register-btn:hover,
button.primary:hover, .btn-jogar:hover { filter: brightness(1.10) !important; }

/* secundário: cinza-azulado do 7k */
.btn-secondary, .btn-login, .login-btn, button.secondary {
  background: #3b3e5e !important;
  color: #e0e0e0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.btn-secondary:hover, .btn-login:hover, .login-btn:hover,
button.secondary:hover { opacity: .9 !important; }

/* campos */
input, select, textarea, .form-control, .bp-search-bar {
  background: #3b3e5e !important;
  border: 1px solid rgba(224, 224, 224, .20) !important;
  border-radius: 8px !important;
  color: #e0e0e0 !important;
}
input::placeholder, textarea::placeholder { color: rgba(224, 224, 224, .50) !important; }

/* ── barra inferior do celular ─────────────────────────────────────────────── */
.tabbar {
  background: #1c1e34 !important;
  border-top: 1px solid rgba(255, 255, 255, .10) !important;
  height: 56px !important;
}
.tabbar-item { color: rgba(224, 224, 224, .70) !important; }
.tabbar-item.active, .tabbar-item:hover { color: #f9e30e !important; }
.tabbar-label { font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; }
.tabbar-ico { width: 21px !important; height: 21px !important; }

/* ── barra lateral ─────────────────────────────────────────────────────────── */
.bp-sb {
  background: #1c1e34 !important;
  border-right: 1px solid rgba(255, 255, 255, .10) !important;
}
.bp-sb-item:hover, .bp-sb-link:hover { background: #3b3e5e !important; }
.bp-sb-ico, .bp-sb-icon { color: #f9e30e !important; }

/* ── valores em dinheiro: no 7k é um limão mais claro que o destaque ───────── */
.balance-display, .bp-money, .valor, .saldo, [class*="balance"] {
  color: #f9f871 !important;
  font-weight: 700 !important;
}

/* ── rodapé ────────────────────────────────────────────────────────────────── */
footer, .footer, #page-footer {
  background: #16182a !important;
  border-top: 1px solid rgba(224, 224, 224, .30) !important;
}
footer h3, .footer h3 {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

/* ── o que ficou de laranja e roxo das versões anteriores ──────────────────── */
[style*="#ff5a1e"], [style*="#ff7a3d"], [style*="#ff6a3d"],
[style*="#e0612b"], [style*="#241145"], [style*="#231144"] {
  background-image: none !important;
  background-color: #1c1e34 !important;
}

/* respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
