/* ============================================================
   estilos.css (29/10/2026) — estilos 2 e 3 do site, escolhidos no admin
   (Config > Layout do site, setting `layout_estilo`). Estilo 1 = o vinho
   original (enhance.css) e NAO carrega este arquivo.
     estilo-2: azul-marinho + laranja (cartoes de categoria)
     estilo-3: preto + dourado (atalhos redondos + menu lateral no PC)
   Carregado DEPOIS do enhance.css e do <style> do layout: mesma
   especificidade vence por ordem.
   ============================================================ */
html.estilo-2{
  --accent:#eba937; --accent-2:#f6bd52; --accent-ink:#0a1a61; --gold:#f6bd52;
  --e-bg:#0a1a61; --e-top:#0e2381; --e-menu:#11298f; --e-panel:#122a8c; --e-panel2:#183399;
  --e-line:#2a46ad; --e-txt:#ffffff; --e-mut:#aebbe8; --e-odd:#1a3aa6; --e-odd-txt:#ffffff;
  --e-grad:linear-gradient(135deg,#f6bd52,#e09a22);
}
html.estilo-3{
  --accent:#d4a63a; --accent-2:#f2c94c; --accent-ink:#111; --gold:#f2c94c;
  --e-bg:#070706; --e-top:#0b0a08; --e-menu:#121110; --e-panel:#141311; --e-panel2:#1c1a17;
  --e-line:#2e2a23; --e-txt:#f5f3ed; --e-mut:#a39d8f; --e-odd:#1f1c18; --e-odd-txt:#f5f3ed;
  --e-grad:linear-gradient(180deg,#f7d774,#c8962f);
}

/* ---------- base ---------- */
html.estilo-2 body, html.estilo-3 body{ background:var(--e-bg) !important; color:var(--e-txt) !important; }
html.estilo-2 .main, html.estilo-3 .main{ background:transparent !important; }
html.estilo-3 body{ font-family:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }
html.estilo-2 #themeToggle, html.estilo-3 #themeToggle{ display:none !important; }   /* estilos 2/3 ja sao escuros */

/* ---------- topo ---------- */
html.estilo-2 .top-bar, html.estilo-3 .top-bar{ background:var(--e-top) !important; border-top:0 !important; border-bottom:1px solid var(--e-line); }
html.estilo-2 .menu-bar, html.estilo-3 .menu-bar{ background:var(--e-menu) !important; border-bottom:1px solid var(--e-line); }
html.estilo-2 .main-menu-item a:hover, html.estilo-3 .main-menu-item a:hover,
html.estilo-2 .main-menu-item.active > a, html.estilo-3 .main-menu-item.active > a{ color:var(--accent) !important; }
html.estilo-2 .menu-bar-logo, html.estilo-2 .mobile-logo{ border-radius:8px; }
html.estilo-3 .menu-bar-logo, html.estilo-3 .mobile-logo{ border-radius:8px; box-shadow:0 0 0 1px #c8962f; }
html.estilo-2 .btn-login, html.estilo-3 .btn-login{
  background:var(--e-grad) !important; border:0 !important; color:var(--accent-ink) !important;
  border-radius:8px !important; font-weight:700; padding:7px 16px;
}
html.estilo-2 .btn-login:hover, html.estilo-3 .btn-login:hover{ filter:brightness(1.08); }
html.estilo-2 .btn-login.btn-login-inverse{ background:#3f5fd6 !important; color:#fff !important; border:0 !important; }
html.estilo-3 .btn-login.btn-login-inverse{ background:transparent !important; color:var(--accent-2) !important; border:1px solid #c8962f !important; }
html.estilo-2 .area-switch, html.estilo-3 .area-switch{ background:var(--e-top); border-bottom:1px solid var(--e-line); }
html.estilo-2 .area-switch a.on, html.estilo-3 .area-switch a.on{ background:transparent; color:var(--accent) !important; border-bottom-color:var(--accent); }
html.estilo-2 .lang-switch .lang-opt.active, html.estilo-3 .lang-switch .lang-opt.active{ background:var(--accent); }

/* ---------- caixas / colunas ---------- */
html.estilo-2 .widget, html.estilo-2 .widget-container, html.estilo-2 .panel, html.estilo-2 .panel-padrao,
html.estilo-2 .matches, html.estilo-2 .table-match, html.estilo-2 .widget-content,
html.estilo-3 .widget, html.estilo-3 .widget-container, html.estilo-3 .panel, html.estilo-3 .panel-padrao,
html.estilo-3 .matches, html.estilo-3 .table-match, html.estilo-3 .widget-content{
  background:var(--e-panel) !important; color:var(--e-txt) !important; border-color:var(--e-line) !important;
}
html.estilo-2 .widget, html.estilo-3 .widget{ border-radius:10px; overflow:hidden; }
html.estilo-2 .match-league, html.estilo-2 .panel .panel-heading, html.estilo-2 .widget-title, html.estilo-2 .widget-matches .widget-title,
html.estilo-3 .match-league, html.estilo-3 .panel .panel-heading, html.estilo-3 .widget-title, html.estilo-3 .widget-matches .widget-title{
  background:var(--e-panel2) !important; color:var(--e-txt) !important; border-left:3px solid var(--accent) !important;
}
html.estilo-2 .widget-title i, html.estilo-2 .match-league i, html.estilo-3 .widget-title i, html.estilo-3 .match-league i{ color:var(--accent) !important; }
html.estilo-2 .match-item td, html.estilo-2 .league-list-item, html.estilo-2 .league-name, html.estilo-2 .league-list-item a,
html.estilo-3 .match-item td, html.estilo-3 .league-list-item, html.estilo-3 .league-name, html.estilo-3 .league-list-item a{
  color:var(--e-txt) !important; border-color:var(--e-line) !important; background-color:transparent !important;
}
html.estilo-2 .match-item a:not(.odd):not(.detail-match), html.estilo-3 .match-item a:not(.odd):not(.detail-match){ color:var(--e-txt) !important; }
html.estilo-2 .table-match tr, html.estilo-3 .table-match tr{ border-color:var(--e-line) !important; }
html.estilo-2 .match-item:hover td, html.estilo-3 .match-item:hover td{ background:rgba(255,255,255,.04) !important; }
html.estilo-2 .match-header th, html.estilo-3 .match-header th{ color:var(--e-mut) !important; background:transparent !important; }
html.estilo-2 .match-item td small, html.estilo-2 .match-item .date, html.estilo-3 .match-item td small, html.estilo-3 .match-item .date{ color:var(--e-mut) !important; }

/* ---------- odds ---------- */
html.estilo-2 .table-match td a.odd.prematch, html.estilo-2 .detail-match, html.estilo-2 .game-detail .market-odds a.odd,
html.estilo-3 .table-match td a.odd.prematch, html.estilo-3 .detail-match, html.estilo-3 .game-detail .market-odds a.odd{
  background:var(--e-odd) !important; color:var(--e-odd-txt) !important; border:1px solid var(--e-line) !important; border-radius:6px;
}
html.estilo-2 .table-match td a.odd.prematch:hover, html.estilo-2 .detail-match:hover, html.estilo-2 .game-detail .market-odds a.odd:hover,
html.estilo-3 .table-match td a.odd.prematch:hover, html.estilo-3 .detail-match:hover, html.estilo-3 .game-detail .market-odds a.odd:hover{
  border-color:var(--accent) !important; color:var(--accent) !important; background:var(--e-odd) !important;
}
html.estilo-2 .odd.selected, html.estilo-2 .option.odd.selected, html.estilo-2 .odd.prematch.selected, html.estilo-2 .odd.prematch.sel,
html.estilo-3 .odd.selected, html.estilo-3 .option.odd.selected, html.estilo-3 .odd.prematch.selected, html.estilo-3 .odd.prematch.sel,
html.estilo-2 .table-match td a.odd.prematch.selected, html.estilo-3 .table-match td a.odd.prematch.selected{
  background:var(--e-grad) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important;
}
html.estilo-2 .odd.selected .o-val, html.estilo-2 .odd.selected .o-lbl, html.estilo-3 .odd.selected .o-val, html.estilo-3 .odd.selected .o-lbl{ color:var(--accent-ink) !important; }
html.estilo-2 .odd.prematch.disable, html.estilo-3 .odd.prematch.disable{ opacity:.45; }
html.estilo-2 .o-lbl, html.estilo-3 .o-lbl{ color:var(--e-mut); }
html.estilo-2 .o-val, html.estilo-3 .o-val{ color:var(--accent); }

/* destaques do topo: mantem o card com foto; so recolore a caixa de odd */
html.estilo-2 .card-featured-game, html.estilo-3 .card-featured-game{ border-radius:12px; overflow:hidden; border:1px solid var(--e-line); }
html.estilo-2 .odds-featured-game .ver-box.selected, html.estilo-3 .odds-featured-game .ver-box.selected{ background:var(--accent) !important; border-color:var(--accent) !important; }
html.estilo-2 .odds-featured-game .ver-box.selected .odd-val, html.estilo-3 .odds-featured-game .ver-box.selected .odd-val{ color:var(--accent-ink) !important; }
html.estilo-2 .odds-featured-game .ver-more, html.estilo-3 .odds-featured-game .ver-more{ color:#111 !important; }

/* ---------- abas de esporte / dias ---------- */
html.estilo-2 .sport-selector, html.estilo-3 .sport-selector{ background:transparent !important; border-bottom-color:var(--e-line) !important; }
html.estilo-2 .sport-selector .day-btn, html.estilo-3 .sport-selector .day-btn{ color:var(--e-mut) !important; background:transparent !important; }
html.estilo-2 .sport-selector .day-btn.active, html.estilo-3 .sport-selector .day-btn.active{ color:var(--accent) !important; border-bottom-color:var(--accent) !important; background:transparent !important; }
html.estilo-2 .day-selector, html.estilo-3 .day-selector{ background:var(--e-panel) !important; border-bottom-color:var(--accent) !important; }
html.estilo-2 .day-btn, html.estilo-3 .day-btn{ background:var(--e-odd) !important; color:var(--e-txt) !important; border-color:var(--e-line) !important; border-radius:8px; }
html.estilo-2 .day-btn.active, html.estilo-3 .day-btn.active{ background:var(--e-grad) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important; }
html.estilo-2 .day-btn.active .day-count, html.estilo-3 .day-btn.active .day-count{ color:var(--accent-ink) !important; }
@media (max-width:991px){
  html.estilo-2 .sport-selector{ background:var(--e-menu) !important; }
  html.estilo-3 .sport-selector{ background:var(--e-menu) !important; }
  html.estilo-2 .sport-selector .day-btn.active, html.estilo-3 .sport-selector .day-btn.active{ background:rgba(255,255,255,.06) !important; }
}
html.estilo-2 .results-link, html.estilo-3 .results-link{ background:var(--e-panel2) !important; border-left:3px solid var(--accent); border-radius:8px; }
html.estilo-2 .results-link i.fa-flag-checkered, html.estilo-3 .results-link i.fa-flag-checkered{ color:var(--accent); }

/* ---------- formularios ---------- */
html.estilo-2 .form-control, html.estilo-2 input.st, html.estilo-2 #txtSearch, html.estilo-2 .cs-busca input,
html.estilo-3 .form-control, html.estilo-3 input.st, html.estilo-3 #txtSearch, html.estilo-3 .cs-busca input{
  background:var(--e-odd) !important; color:var(--e-txt) !important; border-color:var(--e-line) !important;
}
html.estilo-2 ::placeholder, html.estilo-3 ::placeholder{ color:var(--e-mut) !important; }

/* ---------- bilhete ---------- */
html.estilo-2 #cupom .widget-title, html.estilo-3 #cupom .widget-title{ background:var(--e-grad) !important; color:var(--accent-ink) !important; border-left:0 !important; }
html.estilo-2 #cupom .widget-title i, html.estilo-3 #cupom .widget-title i{ color:var(--accent-ink) !important; }
html.estilo-2 .widget-title .ct, html.estilo-2 span.ct, html.estilo-2 #ct, html.estilo-2 #mct,
html.estilo-3 .widget-title .ct, html.estilo-3 span.ct, html.estilo-3 #ct, html.estilo-3 #mct{ background:var(--e-bg) !important; color:var(--accent) !important; }
html.estilo-2 #cupom .widget-content, html.estilo-3 #cupom .widget-content{ color:var(--e-txt) !important; }
html.estilo-2 #cupom .ci, html.estilo-3 #cupom .ci{ border-color:var(--e-line); background:var(--e-odd); }
html.estilo-2 #cupom .o, html.estilo-2 .right-column .o, html.estilo-3 #cupom .o, html.estilo-3 .right-column .o{ color:var(--accent) !important; }
html.estilo-2 .btn-secundario.bet, html.estilo-2 #bet, html.estilo-3 .btn-secundario.bet, html.estilo-3 #bet{ background:var(--e-grad) !important; color:var(--accent-ink) !important; font-weight:800; border-radius:8px; }
html.estilo-2 #bet:disabled, html.estilo-3 #bet:disabled{ background:#555 !important; color:#ccc !important; }
html.estilo-2 #mobileBilhete, html.estilo-3 #mobileBilhete{ background:var(--e-grad) !important; color:var(--accent-ink) !important; }
html.estilo-2 .cupom-bonus, html.estilo-3 .cupom-bonus{ background:var(--e-odd); border-color:var(--accent); color:var(--e-txt); }
html.estilo-2 .cupom-bonus small, html.estilo-3 .cupom-bonus small{ color:var(--e-mut); }

/* ---------- SuperOdds / cassino / avisos ---------- */
html.estilo-2 .so-vitrine, html.estilo-3 .so-vitrine{ background:var(--e-panel2); border:1px solid var(--accent); }
html.estilo-2 .so-tit, html.estilo-3 .so-tit{ color:var(--accent); }
html.estilo-2 .cs-cats a, html.estilo-3 .cs-cats a{ background:var(--e-panel2); }
html.estilo-2 .cs-cats a.on, html.estilo-3 .cs-cats a.on{ background:var(--e-grad); color:var(--accent-ink) !important; box-shadow:none; }
html.estilo-2 .cs-provs a, html.estilo-3 .cs-provs a{ background:var(--e-panel2); color:var(--e-txt) !important; }
html.estilo-2 .cs-provs a.on, html.estilo-2 .cs-busca button, html.estilo-3 .cs-provs a.on, html.estilo-3 .cs-busca button{ background:var(--accent); color:var(--accent-ink) !important; }
html.estilo-2 .cs-jogo, html.estilo-3 .cs-jogo{ background:var(--e-panel); border:1px solid var(--e-line); }
html.estilo-2 .cs-img, html.estilo-3 .cs-img{ background:var(--e-panel2); color:var(--accent); }

/* ---------- rodape ---------- */
html.estilo-2 footer, html.estilo-2 .top-footer, html.estilo-3 footer, html.estilo-3 .top-footer{ background:var(--e-top) !important; color:var(--e-mut) !important; border-top:1px solid var(--e-line); }
html.estilo-2 .footer-title, html.estilo-3 .footer-title{ color:var(--e-txt) !important; }
html.estilo-2 .footer-menu a, html.estilo-3 .footer-menu a{ color:var(--e-mut) !important; }
html.estilo-2 .footer-menu a:hover, html.estilo-3 .footer-menu a:hover{ color:var(--accent) !important; }

/* ============================================================
   ATALHOS (faixa abaixo do topo, so estilos 2 e 3)
   ============================================================ */
.e-atalhos{ display:none; }
html.estilo-2 .e-atalhos, html.estilo-3 .e-atalhos{ display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:12px 0 4px; scrollbar-width:none; }
.e-atalhos::-webkit-scrollbar{ display:none; }
.e-atalhos a{ text-decoration:none !important; }

/* estilo 2: cartoes com gradiente e icone grande a direita */
html.estilo-2 .e-atalhos a{
  flex:1 0 150px; position:relative; overflow:hidden; height:64px; border-radius:10px;
  display:flex; align-items:flex-end; padding:9px 12px; color:#fff !important; font-weight:800; font-size:14px;
  text-transform:uppercase; letter-spacing:.2px;
  background:linear-gradient(120deg,#163aa6 0%,#1e57c9 60%,#1a7fb0 100%); border:1px solid #2a4fc0;
}
html.estilo-2 .e-atalhos a:nth-child(2){ background:linear-gradient(120deg,#163aa6 0%,#1c4fc4 55%,#2a9a8a 100%); }
html.estilo-2 .e-atalhos a:nth-child(3){ background:linear-gradient(120deg,#163aa6 0%,#4a2fb8 60%,#a23a5a 100%); }
html.estilo-2 .e-atalhos a:nth-child(4){ background:linear-gradient(120deg,#163aa6 0%,#2246c0 55%,#3a8f4a 100%); }
html.estilo-2 .e-atalhos a i{ position:absolute; right:10px; top:8px; font-size:38px; color:rgba(255,255,255,.9); filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
html.estilo-2 .e-atalhos a:hover{ filter:brightness(1.12); }
html.estilo-2 .e-atalhos a span{ position:relative; z-index:1; }

/* estilo 3: icones redondos com aro dourado e rotulo embaixo */
html.estilo-3 .e-atalhos{ gap:16px; padding:14px 2px 6px; }
html.estilo-3 .e-atalhos a{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--e-txt) !important; font-size:12px; font-weight:600; width:66px; }
html.estilo-3 .e-atalhos a i{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px;
  color:#f7d774; background:radial-gradient(circle at 35% 30%,#2b2519,#0d0c0a 70%);
  box-shadow:0 0 0 2px #c8962f, 0 0 14px rgba(212,166,58,.25);
}
html.estilo-3 .e-atalhos a:hover i{ box-shadow:0 0 0 2px #f7d774, 0 0 18px rgba(247,215,116,.45); }

/* ============================================================
   ESTILO 3: menu lateral fixo no computador (como cassinos premium)
   ============================================================ */
.e3-side{ display:none; }
@media (min-width:1200px){
  html.estilo-3 .e3-side{
    display:flex; flex-direction:column; position:fixed; left:0; top:0; bottom:0; width:220px; z-index:1100;
    background:var(--e-top); border-right:1px solid var(--e-line); padding:14px 10px; overflow-y:auto;
  }
  html.estilo-3 body{ padding-left:220px; }
  html.estilo-3 .menu-bar-logo{ display:none; }          /* o logo vai pro menu lateral */
  html.estilo-3 .e3-side .e3-logo{ background:#fff; border-radius:8px; padding:6px 10px; display:flex; justify-content:center; margin-bottom:14px; box-shadow:0 0 0 1px #c8962f; }
  html.estilo-3 .e3-side .e3-logo img{ height:30px; }
  html.estilo-3 .e3-side h6{ color:var(--e-mut); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; margin:14px 8px 6px; font-weight:700; }
  html.estilo-3 .e3-side a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--e-txt) !important; font-size:14px; text-decoration:none !important; }
  html.estilo-3 .e3-side a i{ width:18px; text-align:center; color:var(--accent); }
  html.estilo-3 .e3-side a:hover, html.estilo-3 .e3-side a.on{ background:var(--e-panel2); }
  html.estilo-3 .e3-side a.on{ box-shadow:inset 3px 0 0 var(--accent); }
  html.estilo-3 .e3-side .e3-cta{ margin-top:auto; background:var(--e-grad); color:#111 !important; font-weight:800; justify-content:center; }
  html.estilo-3 .e3-side .e3-cta i{ color:#111; }
}

/* ============================================================
   AREA DA CONTA e LOGIN/CADASTRO (layouts conta.php e auth.php)
   ============================================================ */
html.estilo-2 .conta-top, html.estilo-2 .auth-top, html.estilo-3 .conta-top, html.estilo-3 .auth-top{ background:var(--e-top) !important; border-bottom:1px solid var(--e-line); }
html.estilo-2 .conta-top .nav a:hover, html.estilo-3 .conta-top .nav a:hover,
html.estilo-2 .auth-top .top-link:hover, html.estilo-3 .auth-top .top-link:hover{ color:var(--accent) !important; }
html.estilo-2 .balance-card, html.estilo-3 .balance-card{ background:var(--e-panel2) !important; border:1px solid var(--accent); box-shadow:none !important; }
html.estilo-2 .balance-card .amt, html.estilo-3 .balance-card .amt{ color:var(--accent); }
html.estilo-2 .sec-title, html.estilo-3 .sec-title{ background:var(--e-panel2) !important; border-left-color:var(--accent) !important; }
html.estilo-2 .card, html.estilo-3 .card{ background:var(--e-panel) !important; border-color:var(--e-line) !important; border-left-color:var(--accent) !important; color:var(--e-txt); }
html.estilo-2 table.acc th, html.estilo-3 table.acc th{ background:var(--e-panel2) !important; color:var(--e-mut) !important; }
html.estilo-2 table.acc td, html.estilo-3 table.acc td{ border-color:var(--e-line) !important; color:var(--e-txt); }
html.estilo-2 .auth-card input, html.estilo-3 .auth-card input{ background:var(--e-odd) !important; border-color:var(--e-line) !important; }
html.estilo-2 .auth-card label, html.estilo-3 .auth-card label{ color:var(--e-mut) !important; }
html.estilo-2 .auth-main a, html.estilo-3 .auth-main a{ color:var(--e-mut) !important; }
html.estilo-2 .auth-main a:hover, html.estilo-3 .auth-main a:hover{ color:var(--accent) !important; }
html.estilo-2 .auth-card button, html.estilo-2 .auth-card .btn, html.estilo-2 .auth-card input[type=submit],
html.estilo-3 .auth-card button, html.estilo-3 .auth-card .btn, html.estilo-3 .auth-card input[type=submit]{ background:var(--e-grad) !important; color:var(--accent-ink) !important; border:0 !important; font-weight:800; }