/* =====================================================================
   TRADIÇÃO LOTERIAS — Tema de marca (override seguro)
   Carregar SEMPRE por último, depois dos demais CSS.
   Paleta (referências Pantone da marca):
     Pantone Red 032  -> #EF3340  (vermelho — destaque/primária)
     Pantone 3405     -> #00B176  (verde — secundária)
     Pantone 1655     -> #FC4C02  (laranja — acento)
     Pantone 4545     -> #DBCFA0  (bege — FUNDO)
     Pantone Black 3C -> #25292B  (preto neutro — textos)
   ===================================================================== */

:root {
    /* paleta da marca */
    --tl-red:        #EF3340;
    --tl-red-dark:   #C81F2B;
    --tl-green:      #00B176;
    --tl-green-dark: #008A5C;
    --tl-orange:     #FC4C02;
    --tl-beige:      #DBCFA0;
    --tl-beige-soft: #E8DEBE;
    --tl-ink:        #25292B;
    --tl-ink-soft:   #4A4F52;
    --tl-white:      #ffffff;

    /* ---- sobrescreve APENAS o destaque/acento (não os fundos!) ---- */
    /* IMPORTANTE: NÃO redefinimos --bg-primary/--bg-secondary aqui,
       pois o menu lateral e a área logada os usam para o fundo ESCURO.
       O bege é aplicado por seletores específicos das páginas públicas. */

    /* destaque/acento: verde-limão antigo -> vermelho da marca */
    --accent:        var(--tl-red);
    --accent-ink:    #ffffff;
    --primary:       var(--tl-red);

    --danger:        #FF4141;
}

/* ===== Fundo geral da página ===== */
html {
    background: var(--tl-beige) !important;
}
/* bege no body das páginas públicas (home tem class page-home) */
body,
body.page-home {
    background: var(--tl-beige) !important;
    color: var(--tl-ink);
}
/* área logada presente -> body escuro (vence o bege acima) */
body:has(.tradicional) {
    background: #14181b !important;
}

/* O tema antigo usava gradientes verde-limão no fundo de várias seções.
   Neutralizamos para o bege da marca onde o fundo escuro não faz mais sentido. */
.container-responsive,
main,
.content-home,
.content-results,
section.container-results {
    background: transparent;
}

/* ===== Textos que eram brancos sobre escuro ===== */
/* No bege, títulos e textos brancos ficariam invisíveis. Forçamos escuro
   nos contêineres de conteúdo (sem afetar cartões/botões coloridos). */
.container-results h1,
.content-header-results h1,
.content-results .header-content-results,
.date-result,
.date-result span {
    color: var(--tl-ink);
}

/* ===== Botões / destaques: verde-limão -> vermelho da marca ===== */
.btn-primary,
.btn-login,
.btn-result-next,
.btn-result-back,
button.btn-date-result {
    background: var(--tl-red) !important;
    color: #fff !important;
    border-color: var(--tl-red) !important;
}
.btn-primary:hover,
.btn-login:hover {
    background: var(--tl-red-dark) !important;
    border-color: var(--tl-red-dark) !important;
}

/* links e ícones de destaque */
a.highlight,
.text-accent,
.accent {
    color: var(--tl-red);
}

/* elementos que usavam o verde-neon literal (#9ffe00 / #34e011 / #2bff00) */
[style*="#9ffe00"],
[style*="#34e011"],
[style*="#2bff00"] {
    color: var(--tl-red) !important;
    border-color: var(--tl-red) !important;
}

/* ===== Cabeçalho / barra de navegação ===== */
header,
.header,
.navbar,
.content-header {
    background: var(--tl-ink) !important;   /* faixa escura combina com a logo */
    color: #fff;
}
header a,
.navbar a,
.content-header a {
    color: #fff;
}
header a:hover,
.navbar a:hover {
    color: var(--tl-orange);
}

/* ===== Logo: ajuste de encaixe (logo nova é horizontal) ===== */
.content-logo img,
.content-logo-home img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

/* ===== Verde da marca em elementos de "ganho/sucesso" ===== */
.success,
.text-success,
.badge-success,
.win {
    color: var(--tl-green) !important;
}

/* ===== Rodapé ===== */
footer,
.footer {
    background: var(--tl-ink);
    color: #fff;
}
footer a { color: var(--tl-beige); }


/* =====================================================================
   AJUSTES FINAIS v2 — logo maior, botões na marca, seções no bege
   ===================================================================== */

/* ---------- 1) LOGO MAIOR E EM DESTAQUE ---------- */
.content-logo-home img,
.home-header .content-logo-home img,
.content-logo img {
    width: auto !important;
    max-height: 110px !important;      /* antes ~50-60px */
    height: 110px !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
    transition: max-height .3s ease;
}
/* ao rolar a página o header encolhe um pouco a logo */
.home-header.active .content-logo-home img {
    max-height: 78px !important;
    height: 78px !important;
}
/* logo do rodapé também maior */
.footer-brand img { max-height: 70px !important; width: auto !important; }

/* ---------- 2) BANNERS LATERAIS: REMOVER ---------- */
#home-landing::before,
#home-landing::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}
@media (min-width: 1024px) and (orientation: landscape) {
    .container-header, .container-home, .container-results,
    .container-quotation, .container-footer {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

/* ---------- 3) FUNDO BEGE EM TODA A PÁGINA ---------- */
html, body,
#home-landing,
.content-home,
.container-home,
.container-header,
#resultados,
.container-results,
.container-quotation,
section.container-results,
main {
    background: var(--tl-beige) !important;
}
#home-landing {
    background-image: none !important;
    background-color: var(--tl-beige) !important;
}
/* a cotação tinha fundo azul-escuro hardcoded (#1C1B4A) -> bege */
.container-quotation {
    background: var(--tl-beige) !important;
}

/* ---------- 4) HEADER transparente sobre o bege ---------- */
.home-header { background: transparent !important; box-shadow: none !important; }
.home-header.active {
    background: var(--tl-beige-soft) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
}

/* ---------- 5) TEXTOS escuros sobre o bege ---------- */
#home-landing .text-presentation h1,
.home-presentation .text-presentation h1 { color: var(--tl-ink) !important; }
#home-landing .text-presentation h2,
.home-presentation .text-presentation h2 { color: var(--tl-ink-soft) !important; }
.separator-presentation { border-color: rgba(37,41,43,.25) !important; }

/* títulos de Resultados e Cotação */
.content-results h1, .content-results ._resultado,
._resultado, .container-results h1,
.header-quotation h1, .container-quotation h1,
.title-quotation, .header-quotation .title {
    color: var(--tl-ink) !important;
    background: none !important;
    -webkit-text-fill-color: var(--tl-ink) !important;
}

/* ---------- 6) BOTÕES PRINCIPAIS na cor da marca ---------- */
/* QUERO APOSTAR: gradiente verde-água -> vermelho da marca */
.btn-want-bet,
.btn-want-bet-link {
    background: var(--tl-red) !important;
    background-image: linear-gradient(90deg, var(--tl-red) 0%, var(--tl-red-dark) 100%) !important;
    color: #fff !important;
    border: none !important;
}
.btn-want-bet:hover,
.btn-want-bet-link:hover {
    background-image: linear-gradient(90deg, var(--tl-red-dark) 0%, var(--tl-red) 100%) !important;
}
/* CRIAR CONTA (tinha verde inline #1a6e00) -> verde da marca */
.btn-want-bet[style*="1a6e00"],
a.btn-want-bet[href="/register"] {
    background: var(--tl-green) !important;
    background-image: linear-gradient(90deg, var(--tl-green) 0%, var(--tl-green-dark) 100%) !important;
}
.btn-want-bet[style*="1a6e00"]:hover,
a.btn-want-bet[href="/register"]:hover {
    background-image: linear-gradient(90deg, var(--tl-green-dark) 0%, var(--tl-green) 100%) !important;
}

/* ---------- 7) TABELAS (resultados/cotação) coerentes ---------- */
/* cabeçalhos circulares de colocação: já estão vermelhos (--accent) - ok */
/* linhas alternadas: tom bege claro em vez de lilás */
.table-quotation tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: #F3EEDD !important;
}
.table-quotation tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) {
    background: #ffffff !important;
}
/* sublinhado vermelho dos cabeçalhos da cotação - manter vermelho da marca */
.header-quotation th u, .table-quotation th { border-color: var(--tl-red) !important; }

/* =====================================================================
   ÁREA DE APOSTAS (tradicional.css) — base escura + cores da marca
   ===================================================================== */
.tradicional { background: linear-gradient(180deg,#20262a 0%,#15191c 100%) !important; }
#stepsGames, .container-list-items, .item-list { background: #1b1f22 !important; }

/* verde-água -> verde da marca */
.img-select-animal.active > img { background-color: var(--tl-green) !important; }
.img-select-animal.active {
    border-color: var(--tl-green) !important;
    box-shadow: inset 0 0 0 1px var(--tl-green) !important;
}
.content-name-lotterie.selected { background: var(--tl-green) !important; border-color: var(--tl-green) !important; }
.content-place-numbers .digits-keyboard { color: var(--tl-green) !important; }
.content-place-numbers .digits-keyboard.active { border-bottom-color: var(--tl-green) !important; }
.item-checkbox input[type='checkbox']:checked,
.item-purchase input[type='checkbox']:checked { background-color: var(--tl-green) !important; border-color: var(--tl-green) !important; }
.content-amount .value-bet span,
.content-amount-purchase .value-bet-purchase span { color: var(--tl-green) !important; }
.item-checkbox input[type='checkbox']::before,
.item-purchase input[type='checkbox']::before { color:#fff !important; }

/* verde-limão -> vermelho da marca */
.content-bets { scrollbar-color: var(--tl-red) #15191c !important; }
.btn-scroll-bets { color: var(--tl-red) !important; background:#15191c !important; }
.content-modalities::-webkit-scrollbar-thumb,
.content-available-times::-webkit-scrollbar-thumb,
.content-bets::-webkit-scrollbar-thumb { background: var(--tl-green) !important; }

/* botões da área de apostas */
.btn-add, .btn-bicho-selected { background: var(--tl-green) !important; }
.btn-remove, .btn-remove-bicho { background: var(--tl-red-dark) !important; }
.btn-modalities { color:#fff !important; background:#2a3035 !important; }
.btn-modalities.active { background: var(--tl-red) !important; border-color: var(--tl-red) !important; color:#fff !important; }
.btn.btn-keyboard, .btn.backspace, .btn.btn-randomize { background:#2a3035 !important; color:#d7dadc !important; }
.btn.btn-keyboard:hover, .btn.backspace:hover, .btn.btn-randomize:hover { background:#353b40 !important; }
.btn.backspace { color:#ff6b6b !important; }
.item-purchase.value-bet input { background:#2a3035 !important; border-color:#4a4f52 !important; }
#valueNumbers, #date-lottery-selected { background:#2a3035 !important; }
.content-modalities::-webkit-scrollbar-track,
.content-available-times::-webkit-scrollbar-track,
.content-bets::-webkit-scrollbar-track { background:#20262a !important; }

/* =====================================================================
   AJUSTES v3 — logo bem maior + espaçamento vertical reduzido
   ===================================================================== */

/* ---------- LOGO BEM MAIOR ---------- */
.content-logo-home img,
.home-header .content-logo-home img,
.content-logo img {
    max-height: 170px !important;   /* bem maior */
    height: 170px !important;
    width: auto !important;
}
.home-header.active .content-logo-home img {
    max-height: 110px !important;
    height: 110px !important;
}
/* o header precisa de mais altura para caber a logo grande */
.container-header { height: auto !important; }
.home-header { padding: 12px 5% !important; }

/* ---------- REDUZIR ESPAÇO ENTRE SEÇÕES ---------- */
/* landing não precisa ocupar 100vh inteiro */
#home-landing { min-height: auto !important; padding: 40px 0 30px !important; }

/* paddings de 70px -> 28px nas seções principais */
.container-results,
.container-quotation,
.container-app,
.container-history,
.container-dreams,
.container-how-to-play,
section.container-results {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}

/* margens internas da apresentação mais enxutas */
.home-presentation { margin: 6px 35px !important; }
.text-presentation { margin-bottom: 14px !important; }
.content-presentation { margin-top: 10px !important; }

/* =====================================================================
   AJUSTES v4 — CORREÇÃO DA ÁREA LOGADA (não deixar o bege vazar)
   A área logada (.tradicional) é ESCURA. O bege vale só nas
   páginas públicas (home/landing/resultados/cotação).
   ===================================================================== */

/* 1) Restaurar fundo ESCURO em toda a área logada e seus contêineres,
      sobrepondo o bege global que vazou. */
.tradicional,
.tradicional * .container-menu,
aside#sideMenu .container-menu,
.container-menu,
.main-games,
#stepsGames,
.container-list-items {
    /* fundo escuro neutro da marca (Pantone Black 3C ~ #25292B) */
}

aside#sideMenu .container-menu,
.container-menu {
    background: linear-gradient(160deg, #20262a 0%, #14181b 100%) !important;
}

/* o body por trás da área logada também escuro (evita "vão" bege) */
body:has(.tradicional) {
    background: #14181b !important;
}
/* fallback p/ navegadores sem :has — a própria .tradicional cobre a tela */
.tradicional {
    min-height: 100vh;
    background: #14181b !important;
}

/* 2) Saldo / textos do menu: garantir branco sobre o escuro */
.balance-available { background: #20262a !important; }
.user-balance h1, .user-balance h2, .user-balance-text,
.options-user, .name-user { color: #fff !important; }

/* logo do menu lateral: tamanho adequado e sem fundo */
.logo-menu a img { max-height: 80px !important; width: auto !important; }

/* 3) Itens de navegação do menu (JOGAR, APOSTAS, etc.) */
.menu-link, .nav-link, aside#sideMenu a { color: #fff !important; }
.menu-link.active, .nav-link.active { background: var(--tl-red) !important; color:#fff !important; }
/* textos que usavam gradiente verde-limão -> vermelho da marca */
aside#sideMenu [style*="34e011"], aside#sideMenu .highlight {
    background-image: none !important;
    color: var(--tl-red) !important;
    -webkit-text-fill-color: var(--tl-red) !important;
}

/* 4) Botão Buscar (estava vermelho - manter) e input escuro */
.btn-search, #searchGame, .input-search-game {
    background: #20262a !important; color:#fff !important; border-color:#3a4045 !important;
}

/* 5) Barra do topo "Olá, @usuario" e cards de atalho */
.header-user, .welcome-user, .top-user-bar { background: #20262a !important; color:#fff !important; }

/* cards de atalho (Jogar/Resultados/PIX/etc): manter vermelho da marca,
   mas padronizar o tom para o vermelho oficial */
.card-shortcut, .menu-card, .grid-shortcuts a {
    background: var(--tl-red) !important;
    color: #fff !important;
}

/* 6) "DEPÓSITO / SAQUE" pill e "Copiar link de afiliado" */
.label, .badge-deposit { background: var(--tl-red) !important; color:#fff !important; }

/* =====================================================================
   AJUSTE v5 — logo dentro do card "Jogar" (preplay) menor
   ===================================================================== */
/* o card Jogar usa logo100.png; limitar para caber bem no card */
.preplay-item img,
.preplay-block .preplay-item img {
    max-width: 100px !important;
    max-height: 41px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* =====================================================================
   AJUSTE v6 — corrigir vão escuro na home pública
   Garante bege em TODAS as seções públicas, cobrindo o body que
   aparecia escuro entre o landing e o rodapé.
   ===================================================================== */
body.page-home,
body:not(:has(.tradicional)) {
    background: var(--tl-beige) !important;
}

/* todas as seções da home públicas em bege */
body.page-home #resultados,
body.page-home #cotacao,
body.page-home .container-results,
body.page-home .container-quotation,
body.page-home section,
body.page-home main,
body.page-home .content-home,
body.page-home #home-landing,
#resultados,
#cotacao {
    background: var(--tl-beige) !important;
}

/* o wrapper geral entre header e footer não pode ficar escuro */
body.page-home > div,
body.page-home .wrapper,
body.page-home .page-content {
    background: transparent !important;
}