/**
 * Gool Certo — Tema Brasil Premium (frontend)
 * Paleta e overrides específicos deste cliente.
 * Ao clonar o projeto, copie este arquivo, renomeie e ajuste as variáveis --gc-*.
 * Documentação: docs/TEMA-GOOLCERTO.md
 */

:root {
  /* ── Tokens de marca (editar ao clonar) ── */
  --gc-bg: #08111f;
  --gc-bg-alt: #06132b;
  --gc-menu: #0e1628;
  --gc-green: #0b5d1e;
  --gc-green-live: #00d26a;
  --gc-gold: #f7c600;
  --gc-gold-text: #08111f;
  --gc-blue: #002776;
  --gc-border: #1e2e4f;
  --gc-text: #ffffff;
  --gc-text-muted: #a9b4c2;
  --gc-card: #0e1628;

  /* ── Mapeamento para variáveis do template base ── */
  --base-h: 133;
  --base-s: 79%;
  --base-l: 20%;
  --base-dark: 133 79% 16%;

  --dark-h: 216;
  --dark-s: 56%;
  --dark-l: 8%;
  --dark-100: 216 40% 18%;
  --dark-200: 216 40% 16%;
  --dark-300: 216 42% 14%;
  --dark-400: 216 44% 12%;
  --dark-500: 216 48% 10%;
  --dark-600: 216 52% 9%;
  --dark-700: 216 54% 8%;
  --dark-800: 216 56% 7%;

  --danger: 43 99% 49%;
  --success: 145 100% 41%;
  --warning: 43 99% 49%;
  --white: 0 0% 100%;
  --text: 216 20% 72%;
  --heading: 0 0% 100%;
  --border: 216 35% 22%;
}

/* ── Base ── */
body {
  background: var(--gc-bg) !important;
  color: var(--gc-text-muted);
}

.home-page,
.sports-body {
  background: var(--gc-bg) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gc-text);
}

/* ── Topo / header ── */
.header-primary {
  background: linear-gradient(90deg, var(--gc-bg-alt), var(--gc-blue)) !important;
  border-bottom: 1px solid var(--gc-border);
}

.app-nav {
  background: var(--gc-menu) !important;
  border-top: 1px solid var(--gc-border);
}

/* ── Menu lateral (esportes + filtros) ── */
.sports-category {
  background: var(--gc-menu) !important;
  border-right-color: var(--gc-border) !important;
}

.sports-category--wide .sports-category__filter-btn,
.header-main-nav__link {
  background: hsl(var(--white) / 0.05) !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-text) !important;
}

.sports-category--wide .sports-category__filter-btn:hover,
.header-main-nav__link:hover {
  background: hsl(var(--white) / 0.1) !important;
  border-color: hsl(var(--white) / 0.2) !important;
}

.sports-category--wide .sports-category__filter-btn.active,
.sports-category--wide .sports-category__link.active,
.header-main-nav__link.active {
  background: linear-gradient(90deg, var(--gc-green), var(--gc-green-live)) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 12px rgb(0 210 106 / 0.25) !important;
  color: var(--gc-text) !important;
}

.sports-category--wide .sports-category__link {
  background: hsl(var(--white) / 0.05) !important;
  border-color: var(--gc-border) !important;
}

.sports-category--wide .sports-category__link:hover {
  background: hsl(var(--white) / 0.1) !important;
}

/* Ao vivo — verde neon (sem vermelho) */
.sports-category--wide .sports-category__filter-btn--live.active,
.header-main-nav__link--live.active,
.game-filter__btn--live.active {
  background: linear-gradient(90deg, var(--gc-green), var(--gc-green-live)) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgb(0 210 106 / 0.35) !important;
  color: var(--gc-text) !important;
}

.header-main-nav__live-dot,
.game-filter__live-dot,
.live-hub-header__dot,
.match-centre__live-dot {
  background: var(--gc-green-live) !important;
  box-shadow: 0 0 0 0 rgb(0 210 106 / 0.55);
  animation: gc-live-pulse 1.4s ease-in-out infinite !important;
}

.header-main-nav__link--live.active .header-main-nav__live-dot,
.game-filter__btn--live.active .game-filter__live-dot {
  background: var(--gc-text) !important;
}

.game-filter__btn--live .game-filter__badge,
.game-filter__btn--live.active .game-filter__badge {
  color: var(--gc-green) !important;
}

@keyframes gc-live-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(0 210 106 / 0.55);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgb(0 210 106 / 0);
  }
}

/* ── Botões principais (Apostar / Entrar / CTA) ── */
.btn--base,
.btn.cmn-btn,
.cookies-card__btn .btn--base {
  background: var(--gc-gold) !important;
  border-color: var(--gc-gold) !important;
  color: var(--gc-gold-text) !important;
  font-weight: 700;
}

.btn--base:hover,
.btn--base:focus,
.btn--base:active,
.btn.cmn-btn:hover,
.btn.cmn-btn:focus,
.btn.cmn-btn:active {
  background: #e0b300 !important;
  border-color: #e0b300 !important;
  color: var(--gc-gold-text) !important;
}

.btn--outline,
.btn--outline-base {
  border-color: var(--gc-gold) !important;
  color: var(--gc-gold) !important;
}

.btn--signup {
  background: var(--gc-gold) !important;
  color: var(--gc-gold-text) !important;
  border-color: var(--gc-gold) !important;
}

/* ── Cupom de apostas (betslip) ── */
@media screen and (min-width: 992px) {
  .betslip {
    background: var(--gc-menu) !important;
    border-left: 1px solid var(--gc-border);
  }

  .betslip__head {
    background: var(--gc-bg-alt) !important;
    border: 1px solid var(--gc-border);
  }

  .betslip__head-content {
    color: var(--gc-text-muted) !important;
  }

  .betslip__body {
    background: var(--gc-menu) !important;
  }

  .betslip__footer {
    background: var(--gc-menu) !important;
  }

  .betslip__footer-text,
  .betslip__list-odd,
  .betslip__list-match,
  .betslip__list-question {
    color: var(--gc-text-muted) !important;
  }

  .betslip__footer li:first-child {
    border-bottom-color: var(--gc-border) !important;
  }

  .betslip__footer-bottom {
    border-top-color: var(--gc-border) !important;
  }
}

@media screen and (max-width: 991px) {
  .betslip {
    background: var(--gc-menu) !important;
  }

  .betslip__head,
  .betslip__body {
    background: var(--gc-bg-alt) !important;
  }

  .betslip__footer {
    background: var(--gc-menu) !important;
  }
}

.bet-type__btn {
  border-color: var(--gc-border) !important;
  color: var(--gc-text-muted) !important;
  background: var(--gc-bg) !important;
}

.bet-type__btn:hover,
.bet-type__btn:has(input:checked) {
  background: var(--gc-green) !important;
  border-color: var(--gc-green) !important;
  color: var(--gc-text) !important;
}

.betslip-item,
.single-bet li,
.login-message {
  background: var(--gc-bg) !important;
  border-color: var(--gc-border) !important;
}

.login-message-text {
  color: var(--gc-text-muted) !important;
}

.betslip__list-text,
.betslip__footer-list .betslip__list-odd,
.bet-confirm-selections__odds {
  color: var(--gc-gold) !important;
}

.betslip-select {
  border-bottom-color: var(--gc-border) !important;
}

.betslip-quick-stakes__btn {
  background: var(--gc-bg) !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-text) !important;
}

.betslip-quick-stakes__btn:hover,
.betslip-quick-stakes__btn:focus-visible {
  background: var(--gc-gold) !important;
  border-color: var(--gc-gold) !important;
  color: var(--gc-gold-text) !important;
}

/* Campos de valor — fundo branco para contraste no tema escuro */
.betslip__list-ratio input,
.betslip__list-ratio input:focus,
.betslip-item-stake .input-group,
.betslip-item-stake .input-group .form-control,
.betslip__footer-bottom .form--control,
.betslip__footer-bottom .form--control:focus,
.betslip-select .form-select {
  background: hsl(var(--white)) !important;
  color: var(--gc-gold-text) !important;
  border-color: #cbd5e1 !important;
}

.betslip__list-ratio input::placeholder,
.betslip-item-stake .input-group .form-control::placeholder,
.betslip__footer-bottom .form--control::placeholder {
  color: #64748b !important;
}

.betslip__list-ratio input:focus,
.betslip-item-stake .input-group:focus-within,
.betslip__footer-bottom .form--control:focus,
.betslip-select .form-select:focus {
  border-color: var(--gc-gold) !important;
  box-shadow: 0 0 0 2px rgb(247 198 0 / 0.2) !important;
}

.betslip-input-inner,
.betslip-item-stake .input-group .input-group-text,
.betslip__list-ratio span {
  color: #64748b !important;
}

.betslip-item-stake .input-group .form-control {
  border: none !important;
}

.betslip-item-stake__label {
  color: var(--gc-text-muted) !important;
}

/* ── Cards de jogos ── */
.sports-card {
  background: var(--gc-card) !important;
  border: 1px solid var(--gc-border);
}

.sports-card-left {
  background-color: var(--gc-card) !important;
}

.sports-card-heading {
  background-color: hsl(var(--white) / 0.04) !important;
  color: var(--gc-text-muted) !important;
}

.sports-card__team-name,
.sports-card__info-text,
.sports-card__info-time,
.extra-title {
  color: var(--gc-text-muted) !important;
}

.sports-card__stream.live {
  color: var(--gc-green-live) !important;
}

/* Odds em amarelo ouro */
.option-odd-lists .btn,
.odd-list__outcome.oddBtn {
  background: hsl(var(--white) / 0.06) !important;
  color: var(--gc-gold) !important;
  font-weight: 700 !important;
}

.option-odd-list__item button.active,
.odd-list__outcome.active,
.option-odd-list__item .btn-light.active {
  background: var(--gc-gold) !important;
  color: var(--gc-gold-text) !important;
}

.sports-card:hover .sports-card__list-item {
  background: hsl(var(--white) / 0.08) !important;
}

/* Ao vivo nos cards — verde, não vermelho */
.sports-card--live {
  border-color: rgb(0 210 106 / 0.45) !important;
  box-shadow: 0 0 0 1px rgb(0 210 106 / 0.15) !important;
}

.sports-card__info-text--live {
  color: var(--gc-green-live) !important;
}

.sports-card__live-minute,
.sports-card__center-score {
  background: rgb(0 210 106 / 0.18) !important;
  border-color: rgb(0 210 106 / 0.35) !important;
  color: var(--gc-text) !important;
}

.match-centre {
  background: var(--gc-card) !important;
  border-color: var(--gc-border) !important;
}

.match-centre--live {
  border-color: rgb(0 210 106 / 0.35) !important;
}

.match-centre__live-bar {
  background: linear-gradient(90deg, rgb(0 210 106 / 0.25), transparent) !important;
  color: var(--gc-text) !important;
}

.match-centre__score-sync {
  background: rgb(0 210 106 / 0.15) !important;
  border-color: rgb(0 210 106 / 0.25) !important;
  color: var(--gc-text) !important;
}

.match-centre__live-dot {
  background: var(--gc-green-live) !important;
}

/* Variação de odds — verde sobe, âmbar desce (sem vermelho) */
.oddBtn.odds-up,
.odd-list__outcome.odds-up {
  background: rgb(0 210 106 / 0.18) !important;
  border-color: var(--gc-green-live) !important;
  color: var(--gc-green-live) !important;
}

.oddBtn.odds-down,
.odd-list__outcome.odds-down {
  background: rgb(247 198 0 / 0.12) !important;
  border-color: var(--gc-gold) !important;
  color: var(--gc-gold) !important;
}

/* ── Ligas / subcategorias ── */
.sub-category-drawer {
  background: var(--gc-menu) !important;
}

.sub-category-drawer__link {
  color: var(--gc-text-muted) !important;
}

.sub-category-drawer__link.active {
  border-bottom-color: var(--gc-green-live) !important;
}

.sub-category-drawer__link.active .sub-category-drawer__text,
.sub-category-drawer__link:hover .sub-category-drawer__text {
  color: var(--gc-green-live) !important;
}

.league-title__name {
  color: var(--gc-text) !important;
}

/* ── Hub ao vivo / favoritos ── */
.live-hub-header__title {
  color: var(--gc-text) !important;
}

.live-hub-header__subtitle {
  color: var(--gc-text-muted) !important;
}

.odds-refresh-indicator {
  background: var(--gc-card) !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-text-muted) !important;
}

.odds-refresh-indicator.is-active .odds-refresh-indicator__dot {
  background: var(--gc-green-live) !important;
}

.search-page__badge--live {
  background: var(--gc-green-live) !important;
  color: var(--gc-gold-text) !important;
}

.search-page__item {
  background: var(--gc-card) !important;
  border-color: var(--gc-border) !important;
  color: var(--gc-text) !important;
}

.search-page__field {
  background: var(--gc-card) !important;
  border-color: var(--gc-border) !important;
}

.search-page__submit {
  background: var(--gc-gold) !important;
  color: var(--gc-gold-text) !important;
}

/* ── Footer ── */
.footer--light,
.footer-bottom {
  background: var(--gc-menu) !important;
  color: var(--gc-text-muted) !important;
}

.footer--light a,
.footer-bottom a {
  color: var(--gc-text-muted) !important;
}

.footer--light a:hover,
.footer-bottom a:hover {
  color: var(--gc-gold) !important;
}

/* ── Indicadores diversos ── */
.bg--base {
  background: var(--gc-green) !important;
}

.empty-message p {
  color: var(--gc-text-muted) !important;
}

.alert-info {
  background: rgb(0 39 118 / 0.25) !important;
  border-color: var(--gc-blue) !important;
  color: var(--gc-text) !important;
}