/* =========================================================
   JOGA1.BET – TEMA AZUL / PRETO + BRANCO (SAFE)
   - Fundo com imagem + gradiente, SEM pseudo-elemento
   - Textos brancos
   - Botões azuis
   ========================================================= */
:root{
  --j1-blue:#FFD400;
  --j1-blue2:#FFEA6A;
  --j1-black:#0B0F14;
  --j1-dark:#121821;
  --j1-border:#1f2a37;
  --j1-white:#FFFFFF;
  --j1-muted:#CBD5E1;
  --j1-muted2:#9CA3AF;
}

html.joga1-theme, html.joga1-theme body{
  background-color: var(--j1-black) !important;
  color: var(--j1-white) !important;
}

html.joga1-theme body{
  min-height: 100vh;
  background-image:
    radial-gradient(60% 60% at 50% 18%, rgba(255,212,0,.22) 0%, rgba(255,212,0,.10) 30%, rgba(11,15,20,.0) 70%),
    linear-gradient(180deg, rgba(11,15,20,.92) 0%, rgba(18,24,33,.92) 50%, rgba(11,15,20,.95) 100%),
    url("/images/joga1-casino-bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Links */
html.joga1-theme a{ color: var(--j1-blue) !important; }
html.joga1-theme a:hover{ color: var(--j1-blue2) !important; }

/* Header/Nav */
html.joga1-theme header,
html.joga1-theme nav,
html.joga1-theme .navbar,
html.joga1-theme .topbar,
html.joga1-theme .header{
  background: rgba(18,24,33,.88) !important;
  border-bottom: 1px solid rgba(31,42,55,.9) !important;
  backdrop-filter: blur(10px);
}

/* Força textos escuros -> claros (sem atacar tudo) */
html.joga1-theme .text-black,
html.joga1-theme .text-gray-900,
html.joga1-theme .text-slate-900{
  color: var(--j1-white) !important;
}
html.joga1-theme .text-gray-700,
html.joga1-theme .text-gray-600,
html.joga1-theme .text-slate-700,
html.joga1-theme .text-slate-600{
  color: var(--j1-muted) !important;
}

/* Blocos claros */
html.joga1-theme .bg-white,
html.joga1-theme .bg-gray-50,
html.joga1-theme .bg-gray-100,
html.joga1-theme .bg-slate-50,
html.joga1-theme .bg-slate-100{
  background: rgba(18,24,33,.86) !important;
  color: var(--j1-white) !important;
}

/* Cards / modais */
html.joga1-theme .card,
html.joga1-theme .panel,
html.joga1-theme .box,
html.joga1-theme .modal-content,
html.joga1-theme .dropdown-menu{
  background: rgba(18,24,33,.90) !important;
  border: 1px solid rgba(31,42,55,.85) !important;
  color: var(--j1-white) !important;
}

/* Bordas */
html.joga1-theme .border,
html.joga1-theme .border-gray-200,
html.joga1-theme .border-gray-300,
html.joga1-theme .border-slate-200{
  border-color: rgba(31,42,55,.85) !important;
}

/* Inputs */
html.joga1-theme input,
html.joga1-theme select,
html.joga1-theme textarea{
  background: rgba(11,15,20,.65) !important;
  border: 1px solid rgba(31,42,55,.9) !important;
  color: var(--j1-white) !important;
}
html.joga1-theme input::placeholder,
html.joga1-theme textarea::placeholder{
  color: var(--j1-muted2) !important;
}
html.joga1-theme input:focus,
html.joga1-theme select:focus,
html.joga1-theme textarea:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,212,0,.35) !important;
  border-color: var(--j1-blue) !important;
}

/* Botões (azul) */
html.joga1-theme .btn-primary,
html.joga1-theme .button-primary,
html.joga1-theme .bg-primary,
html.joga1-theme .bg-blue-500,
html.joga1-theme .bg-sky-500,
html.joga1-theme .btn-register,
html.joga1-theme .register{
  background: var(--j1-blue) !important;
  color: #120F00 !important;
  border: 0 !important;
  box-shadow: 0 10px 30px rgba(255,212,0,.18) !important;
}
html.joga1-theme .btn-primary:hover,
html.joga1-theme .button-primary:hover,
html.joga1-theme .btn-register:hover,
html.joga1-theme .register:hover{
  background: var(--j1-blue2) !important;
}

/* Menu mobile ativo (casinha) */
html.joga1-theme .mobile-menu-bar__item.active,
html.joga1-theme .mobile-menu-bar__item.active svg,
html.joga1-theme .mobile-menu-bar__item.active i{
  color: var(--j1-blue) !important;
  fill: var(--j1-blue) !important;
}

/* ===============================
   MODAL / POPUP (Instale o app)
   =============================== */
html.joga1-theme #installPopup{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

html.joga1-theme #installPopup .popup-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

html.joga1-theme #installPopup .popup-box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(420px, calc(100% - 32px));
  background: rgba(18,24,33,.94);
  border: 1px solid rgba(31,42,55,.9);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  text-align: center;
}

html.joga1-theme #installPopup .popup-box h2{
  margin: 0 0 10px 0;
  font-size: 22px;
  line-height: 1.15;
  color: #FFFFFF !important;
}

html.joga1-theme #installPopup .popup-box p{
  margin: 0 0 14px 0;
  color: rgba(255,255,255,.86) !important;
}

html.joga1-theme #installPopup .popup-box small{
  display: block;
  margin-top: 12px;
  color: rgba(203,213,225,.82) !important;
}

html.joga1-theme #installPopup .popup-close{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,212,0,.35) !important;
  background: rgba(11,15,20,.35) !important;
  color: #FFFFFF !important;
  font-size: 22px;
  line-height: 30px;
  cursor: pointer;
}

html.joga1-theme #installPopup .popup-close:hover{
  border-color: rgba(255,212,0,.65) !important;
  background: rgba(11,15,20,.55) !important;
}

html.joga1-theme #installPopup .popup-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--j1-blue) !important;
  color: #120F00 !important;
  border: 0 !important;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 12px 34px rgba(255,212,0,.22) !important;
}

html.joga1-theme #installPopup .popup-button:hover{
  background: var(--j1-blue2) !important;
}

/* ===============================
   Botões verdes -> azul
   =============================== */
html.joga1-theme .btn-success,
html.joga1-theme .bg-success,
html.joga1-theme .bg-green,
html.joga1-theme .bg-green-500,
html.joga1-theme .text-success{
  background: var(--j1-blue) !important;
  color: #120F00 !important;
  border-color: var(--j1-blue) !important;
}
html.joga1-theme .btn-success:hover,
html.joga1-theme .bg-green-500:hover{
  background: var(--j1-blue2) !important;
}

/* =========================================================
   PATCH 14 – CASINHA DO TOPO (anti-verde, super agressivo)
   Objetivo: matar qualquer verde (fill/stroke/borda/sombra)
   ========================================================= */

/* Qualquer coisa verde dentro do topo vira azul */
html.joga1-theme header a svg,
html.joga1-theme nav a svg{
  color: inherit;
}

/* SVG paths com verde (hex/rgb/nome) */
html.joga1-theme header svg path[fill="#FFD400"],
html.joga1-theme header svg path[fill="#FFD400"],
html.joga1-theme header svg path[fill="#FFD400"],
html.joga1-theme header svg path[stroke="#FFD400"],
html.joga1-theme header svg path[stroke="#FFD400"],
html.joga1-theme header svg path[stroke="#FFD400"],
html.joga1-theme nav svg path[fill="#FFD400"],
html.joga1-theme nav svg path[fill="#FFD400"],
html.joga1-theme nav svg path[fill="#FFD400"],
html.joga1-theme nav svg path[stroke="#FFD400"],
html.joga1-theme nav svg path[stroke="#FFD400"],
html.joga1-theme nav svg path[stroke="#FFD400"]{
  fill: var(--j1-blue) !important;
  stroke: var(--j1-blue) !important;
}

/* Elementos com estilo inline verde */
html.joga1-theme header [style*="#FFD400"],
html.joga1-theme header [style*="#FFD400"],
html.joga1-theme header [style*="0,255,0"],
html.joga1-theme header [style*="0, 255, 0"],
html.joga1-theme nav [style*="#FFD400"],
html.joga1-theme nav [style*="#FFD400"],
html.joga1-theme nav [style*="0,255,0"],
html.joga1-theme nav [style*="0, 255, 0"]{
  color: var(--j1-blue) !important;
  border-color: var(--j1-blue) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Se o botão da casinha usa borda verde, troca por azul */
html.joga1-theme header a,
html.joga1-theme nav a{
  /* não altera tudo, só prepara */
}

html.joga1-theme header a:has(svg),
html.joga1-theme nav a:has(svg){
  /* mantém */
}

/* Browser sem :has – fallback: qualquer svg dentro de link com borda verde */
html.joga1-theme header a[style*="border"]:has(svg),
html.joga1-theme nav a[style*="border"]:has(svg){
  border-color: var(--j1-blue) !important;
}

/* Estado ativo / router */
html.joga1-theme a.active svg,
html.joga1-theme a.active svg * ,
html.joga1-theme a.router-link-active svg,
html.joga1-theme a.router-link-active svg *{
  fill: var(--j1-blue) !important;
  stroke: var(--j1-blue) !important;
  color: var(--j1-blue) !important;
}

/* Hover */
html.joga1-theme header a:hover svg,
html.joga1-theme header a:hover svg *,
html.joga1-theme nav a:hover svg,
html.joga1-theme nav a:hover svg *{
  fill: var(--j1-blue2) !important;
  stroke: var(--j1-blue2) !important;
  color: var(--j1-blue2) !important;
}

/* tentativa extra: primeiro item do menu superior (casinha) */
html.joga1-theme header .topbar a:first-child,
html.joga1-theme header .topbar a:first-child svg,
html.joga1-theme header .topbar a:first-child svg *{
  fill: var(--j1-blue) !important;
  stroke: var(--j1-blue) !important;
  color: var(--j1-blue) !important;
  border-color: var(--j1-blue) !important;
}

/* =========================================================
   PATCH 15 – ARO (CÍRCULO) DA CASINHA – remover verde
   ========================================================= */

/* O aro costuma ser borda/sombra no link/botão do home */
html.joga1-theme header a.active,
html.joga1-theme nav a.active,
html.joga1-theme header a.router-link-active,
html.joga1-theme nav a.router-link-active{
  border-color: var(--j1-blue) !important;
  box-shadow: 0 0 0 2px rgba(255,212,0,.25) !important;
}

/* Se o aro é um elemento filho (span/div) dentro do botão */
html.joga1-theme header a.active *,
html.joga1-theme nav a.active *{
  border-color: var(--j1-blue) !important;
  box-shadow: none !important;
}

/* Mata qualquer borda verde inline no topo */
html.joga1-theme header [style*="border-color: #FFD400"],
html.joga1-theme header [style*="border-color:#FFD400"],
html.joga1-theme header [style*="border-color:#FFD400"],
html.joga1-theme header [style*="border-color:#FFD400"],
html.joga1-theme nav [style*="border-color: #FFD400"],
html.joga1-theme nav [style*="border-color:#FFD400"],
html.joga1-theme nav [style*="border-color:#FFD400"],
html.joga1-theme nav [style*="border-color:#FFD400"]{
  border-color: var(--j1-blue) !important;
  box-shadow: 0 0 0 2px rgba(255,212,0,.25) !important;
}

/* =========================================================
   PATCH 16 – BOTÃO "REGISTRE-SE" (gradiente + glow)
   ========================================================= */
html.joga1-theme a[href*="register"],
html.joga1-theme .btn-register,
html.joga1-theme .register,
html.joga1-theme .btn.btn-register,
html.joga1-theme .topbar .btn-primary,
html.joga1-theme header .btn-primary{
  background-image: linear-gradient(135deg, #FFD400 0%, #FFB800 55%, #FFD400 100%) !important;
  color: #120F00 !important;
  border: 1px solid rgba(255,212,0,.55) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  padding: 10px 16px !important;
  box-shadow:
    0 10px 26px rgba(255,212,0,.18),
    0 0 0 1px rgba(255,212,0,.12) inset !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  position: relative;
  overflow: hidden;
}

/* brilho animado passando */
html.joga1-theme a[href*="register"]::before,
html.joga1-theme .btn-register::before,
html.joga1-theme .register::before,
html.joga1-theme .topbar .btn-primary::before,
html.joga1-theme header .btn-primary::before{
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.30) 45%,
    rgba(255,255,255,0) 70%);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform .35s ease;
  pointer-events: none;
}

/* hover glow */
html.joga1-theme a[href*="register"]:hover,
html.joga1-theme .btn-register:hover,
html.joga1-theme .register:hover,
html.joga1-theme .topbar .btn-primary:hover,
html.joga1-theme header .btn-primary:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow:
    0 14px 34px rgba(255,212,0,.28),
    0 0 26px rgba(255,212,0,.22),
    0 0 0 1px rgba(255,212,0,.18) inset !important;
}

html.joga1-theme a[href*="register"]:hover::before,
html.joga1-theme .btn-register:hover::before,
html.joga1-theme .register:hover::before,
html.joga1-theme .topbar .btn-primary:hover::before,
html.joga1-theme header .btn-primary:hover::before{
  transform: translateX(120%) skewX(-18deg);
}

/* foco (teclado/click) */
html.joga1-theme a[href*="register"]:focus,
html.joga1-theme .btn-register:focus,
html.joga1-theme .register:focus,
html.joga1-theme .topbar .btn-primary:focus,
html.joga1-theme header .btn-primary:focus{
  outline: none !important;
  box-shadow:
    0 14px 34px rgba(255,212,0,.26),
    0 0 0 3px rgba(255,212,0,.30) !important;
}

/* =========================================================
   PATCH 18 – TEMA AMARELO GLOBAL
   Converte o que era AZUL/VERDE para AMARELO (ação/destaque)
   ========================================================= */

:root{
  --j1-yellow: #FFD400;
  --j1-yellow2: #FFEA6A;
  --j1-yellow-dark: #FFB800;
}

/* Botões principais / ações */
html.joga1-theme .btn-primary,
html.joga1-theme .btn-success,
html.joga1-theme button.btn-primary,
html.joga1-theme button.btn-success,
html.joga1-theme a.btn-primary,
html.joga1-theme a.btn-success,
html.joga1-theme .bg-primary,
html.joga1-theme .bg-success{
  background-image: linear-gradient(135deg, var(--j1-yellow) 0%, var(--j1-yellow-dark) 55%, var(--j1-yellow) 100%) !important;
  background-color: var(--j1-yellow) !important;
  border-color: rgba(255,212,0,.65) !important;
  color: #120F00 !important;
  box-shadow: 0 12px 30px rgba(255,212,0,.18) !important;
}

html.joga1-theme .btn-primary:hover,
html.joga1-theme .btn-success:hover,
html.joga1-theme a.btn-primary:hover,
html.joga1-theme a.btn-success:hover{
  filter: saturate(1.05);
  box-shadow: 0 16px 36px rgba(255,212,0,.26), 0 0 26px rgba(255,212,0,.18) !important;
}

/* Links/ícones que antes puxavam azul */
html.joga1-theme .text-primary,
html.joga1-theme .text-success{
  color: var(--j1-yellow) !important;
}

/* Borda/realce ativo */
html.joga1-theme .border-primary,
html.joga1-theme .border-success{
  border-color: rgba(255,212,0,.60) !important;
}

/* SVGs (topo/menus) com verde/azul */
html.joga1-theme svg [fill="#FFD400"],
html.joga1-theme svg [stroke="#FFD400"]{
  fill: var(--j1-yellow) !important;
  stroke: var(--j1-yellow) !important;
}

/* =========================================================
   PATCH 19 – FOOTER TEXTO BRANCO FORTE
   ========================================================= */

/* Footer geral */
html.joga1-theme footer,
html.joga1-theme .footer,
html.joga1-theme .site-footer{
  color: #FFFFFF !important;
}

/* Títulos do footer */
html.joga1-theme footer h1,
html.joga1-theme footer h2,
html.joga1-theme footer h3,
html.joga1-theme footer h4,
html.joga1-theme footer h5,
html.joga1-theme footer h6{
  color: #FFFFFF !important;
  font-weight: 700;
}

/* Links do footer */
html.joga1-theme footer a,
html.joga1-theme .footer a,
html.joga1-theme .site-footer a{
  color: #FFFFFF !important;
  opacity: 0.95;
}

html.joga1-theme footer a:hover,
html.joga1-theme .footer a:hover,
html.joga1-theme .site-footer a:hover{
  color: #FFD400 !important;
  opacity: 1;
}

/* Textos pequenos / direitos */
html.joga1-theme footer p,
html.joga1-theme footer span,
html.joga1-theme footer li,
html.joga1-theme footer div{
  color: #FFFFFF !important;
}