/* =========================================================================
   brand.css  —  Identidade visual RIFA (âmbar / preto)
   -------------------------------------------------------------------------
   Escopo: "acentos-only". Mantém o layout claro (corpo, cards, forms e
   tabelas continuam legíveis) e troca apenas as cores de MARCA:
     - botões primários/secundários: âmbar com texto escuro
     - header/menu: preto sólido
     - cotas/títulos premiados contemplados: âmbar
     - foco de inputs: glow âmbar

   PRÉ-REQUISITO: system_info.theme = 1 (tema claro).
   Com theme 2..5 o pages/inc/set-custom-style.php injeta um <style> inline
   DEPOIS deste arquivo (index.php:7 roda após o header.php:56) e sobrescreve
   o :root inteiro para uma paleta escura — anulando o que está aqui.

   Carregado DEPOIS do style.css (ver pages/inc/header.php), por isso vence as
   regras de mesma especificidade. Onde o original usa !important, repetimos.
   Alguns seletores (.btn-custom, .btn-primary) são definidos num <style>
   inline em pages/products/automatic.php, que carrega depois deste arquivo —
   por isso levam !important.
   Reversível: basta remover o <link> do brand.css.
   ========================================================================= */

:root {
  /* Âmbar principal */
  --rifa-amber-300: #FFD54F;
  --rifa-amber-400: #FFCA28;
  --rifa-amber-500: #FFC107;
  --rifa-amber-600: #FFB300;
  --rifa-amber-700: #FFA000;
  --rifa-orange-500: #FF9800;

  /* Neutros */
  --rifa-black: #000000;
  --rifa-ink: #171717;
  --rifa-bg: #F4F6F8;
  --rifa-white: #FFFFFF;

  /* Gradientes / glow */
  --rifa-gradient-amber: linear-gradient(90deg, #FFC107 0%, #FFA000 100%);
  --rifa-gradient-amber-hot: linear-gradient(90deg, #FFB300 0%, #FF9800 100%);
  --rifa-glow-amber: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
  --rifa-glow-amber-soft: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

/* -------------------------------------------------------------------------
   1) BOTÃO DE MARCA  (.btn-cor-primaria e .btn-cor-secundaria = mesmo roxo)
   Texto ESCURO: âmbar não tem contraste suficiente com branco.
   ------------------------------------------------------------------------- */
.btn.btn-cor-primaria,
.btn.btn-cor-secundaria {
  color: var(--rifa-ink);
  background-color: var(--rifa-amber-500);
  background-image: var(--rifa-gradient-amber);
  border-color: var(--rifa-amber-600);
}

.btn.btn-cor-primaria:hover,
.btn.btn-cor-secundaria:hover {
  color: var(--rifa-ink);
  background-color: var(--rifa-amber-600);
  background-image: none;
  border-color: var(--rifa-amber-700);
}

.btn-check:focus + .btn.btn-cor-primaria,
.btn.btn-cor-primaria:focus,
.btn-check:focus + .btn.btn-cor-secundaria,
.btn.btn-cor-secundaria:focus {
  color: var(--rifa-ink);
  background-color: var(--rifa-amber-600);
  background-image: none;
  border-color: var(--rifa-amber-700);
  box-shadow: var(--rifa-glow-amber);
}

.btn-check:active + .btn.btn-cor-primaria,
.btn-check:checked + .btn.btn-cor-primaria,
.btn.btn-cor-primaria.active,
.btn.btn-cor-primaria:active,
.show > .btn.btn-cor-primaria.dropdown-toggle,
.btn-check:active + .btn.btn-cor-secundaria,
.btn-check:checked + .btn.btn-cor-secundaria,
.btn.btn-cor-secundaria.active,
.btn.btn-cor-secundaria:active,
.show > .btn.btn-cor-secundaria.dropdown-toggle {
  color: var(--rifa-ink);
  background-color: var(--rifa-amber-700);
  background-image: none;
  border-color: var(--rifa-amber-700);
}

.btn-check:active + .btn.btn-cor-primaria:focus,
.btn-check:checked + .btn.btn-cor-primaria:focus,
.btn.btn-cor-primaria.active:focus,
.btn.btn-cor-primaria:active:focus,
.show > .btn.btn-cor-primaria.dropdown-toggle:focus,
.btn-check:active + .btn.btn-cor-secundaria:focus,
.btn-check:checked + .btn.btn-cor-secundaria:focus,
.btn.btn-cor-secundaria.active:focus,
.btn.btn-cor-secundaria:active:focus,
.show > .btn.btn-cor-secundaria.dropdown-toggle:focus {
  box-shadow: var(--rifa-glow-amber);
}

.btn.btn-cor-primaria.disabled,
.btn.btn-cor-primaria:disabled,
.btn.btn-cor-secundaria.disabled,
.btn.btn-cor-secundaria:disabled {
  color: var(--rifa-ink);
  background-color: var(--rifa-amber-500);
  background-image: none;
  border-color: var(--rifa-amber-600);
}

/* Variantes outline (borda roxa -> âmbar). Texto âmbar puro sobre fundo
   claro é ilegível, então a versão em repouso usa tinta escura. */
.btn.btn-outline-cor-primaria,
.btn.btn-outline-cor-secundaria {
  color: var(--rifa-ink);
  border-color: var(--rifa-amber-600);
}

.btn.btn-outline-cor-primaria:hover,
.btn.btn-outline-cor-secundaria:hover,
.btn.btn-outline-cor-primaria.active,
.btn.btn-outline-cor-primaria:active,
.btn.btn-outline-cor-secundaria.active,
.btn.btn-outline-cor-secundaria:active {
  color: var(--rifa-ink);
  background-color: var(--rifa-amber-500);
  border-color: var(--rifa-amber-600);
}

.btn.btn-outline-cor-primaria:focus,
.btn.btn-outline-cor-secundaria:focus {
  box-shadow: var(--rifa-glow-amber);
}

/* -------------------------------------------------------------------------
   2) HEADER / MENU  — preto sólido.
   Não tocamos na variante .campanha (fica transparente sobre o hero).
   O texto vem de --incrivel-primariaColor (#000), que TAMBÉM pinta os tiles
   de quantidade sobre fundo claro. Por isso clareamos o header aqui em vez
   de mexer na variável — mudá-la deixaria os tiles com texto branco no claro.
   ------------------------------------------------------------------------- */
.header-app-header:not(.campanha) .header-app-header-container {
  background-color: var(--rifa-black);
  color: var(--rifa-white);
}

.bg-cor-primaria {
  background-color: var(--rifa-black) !important;
}

/* .navbar era azul (#103996); alinha com o preto da marca */
.navbar {
  background-color: var(--rifa-black);
}
.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.94);
}

/* Ícones/links do topo em branco para contraste sobre o preto */
.header-app-header:not(.campanha) .header-app-header-wrap .Header_btn-link__1ambC {
  color: var(--rifa-white);
}

/* -------------------------------------------------------------------------
   3) FOCO DE INPUTS — glow âmbar (fundo/texto do form permanecem claros)
   ------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--rifa-amber-500);
  box-shadow: var(--rifa-glow-amber-soft);
}

/* -------------------------------------------------------------------------
   4) LINKS / REALCES de acento que herdavam roxo
   ------------------------------------------------------------------------- */
.text-cor-primaria-link,
.text-cor-primaria-color {
  color: var(--rifa-ink);
}

/* .text-cor-card-link é o hook que o tema já usava no markup (ex.: botão
   "Descrição/Regulamento") mas nunca chegou a ser definido no style.css —
   sem ele o .btn-link do Bootstrap vaza o azul #0d6efd. O ícone herda via
   currentColor. */
.btn.btn-link.text-cor-card-link,
.text-cor-card-link {
  color: var(--rifa-ink);
}

.btn.btn-link.text-cor-card-link:hover,
.text-cor-card-link:hover {
  color: var(--rifa-amber-700);
}

/* -------------------------------------------------------------------------
   5) TÍTULOS / COTAS PREMIADAS
   ATENÇÃO: a classe --selected NÃO significa "contemplado" — o class/Main.php
   a aplica tanto no item contemplado quanto no disponível. Quem separa os dois
   estados é um style="" inline com !important (fundo âmbar x #ffffff), que
   nenhuma regra daqui alcança. Por isso a cor de cada estado é definida na
   origem (class/Main.php), e não neste arquivo — estilizar --selected aqui
   pintaria cota DISPONÍVEL de âmbar, fazendo-a passar por premiada.

   O que sobra para o CSS é só o texto do ganhador: o style.css o fixa em #fff
   (:14338), que sumiria sobre o âmbar. O item disponível não tem .--ganhador,
   então esta regra não o atinge.
   ------------------------------------------------------------------------- */
.app-titulos-premiados--item.app-titulos-premiados--selected .app-titulos-premiados--premiacao,
.app-titulos-premiados--item.app-titulos-premiados--selected .app-titulos-premiados--ganhador {
  color: var(--rifa-ink);
}

/* -------------------------------------------------------------------------
   6) BOTÕES DA CAMPANHA
   .btn-custom ("Quero participar", verde #198754) e .btn-primary (roxo
   #7e3af2) são definidos num <style> inline em pages/products/automatic.php
   que carrega DEPOIS deste arquivo — daí o !important.
   ------------------------------------------------------------------------- */
.btn.btn-custom,
.btn-custom {
  background-color: var(--rifa-amber-500) !important;
  background-image: var(--rifa-gradient-amber) !important;
  border-color: var(--rifa-amber-600) !important;
  color: var(--rifa-ink) !important;
}

.btn.btn-custom:hover,
.btn-custom:hover {
  background-color: var(--rifa-amber-600) !important;
  background-image: var(--rifa-gradient-amber-hot) !important;
  color: var(--rifa-ink) !important;
}

.btn-hover-blue:hover {
  background: var(--rifa-gradient-amber-hot) !important;
}

.btn.btn-primary,
.btn-primary {
  background-color: var(--rifa-amber-500) !important;
  border-color: var(--rifa-amber-600) !important;
  color: var(--rifa-ink) !important;
}

.btn.btn-primary:hover,
.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary:focus {
  background-color: var(--rifa-amber-600) !important;
  border-color: var(--rifa-amber-700) !important;
  color: var(--rifa-ink) !important;
}

/* "#total" tem style="color: white" inline no automatic.php; sobre o âmbar
   do botão isso some. O inline só perde para !important. */
#total {
  color: var(--rifa-ink) !important;
}

/* -------------------------------------------------------------------------
   7) COMBOS DE ROLETA / CAIXA  — eram gradiente preto; âmbar como na
   referência. Escopo via .pulsando, que só existe nesses botões — assim o
   .bg-gradient-dark de outros lugares ("Meus títulos", home) segue preto.
   O .text-white do Bootstrap é !important, então a tinta escura também
   precisa ser — caso contrário fica branco sobre âmbar.
   ------------------------------------------------------------------------- */
.pulsando.btn.bg-gradient-dark {
  background: var(--rifa-gradient-amber) !important;
  border: 1px solid var(--rifa-amber-700) !important;
}

.pulsando.btn.bg-gradient-dark,
.pulsando.btn.bg-gradient-dark.text-white,
.pulsando.btn.bg-gradient-dark .text-white {
  color: var(--rifa-ink) !important;
}

/* -------------------------------------------------------------------------
   8) BARRA DE PROGRESSO — o ciano (#0dcaf0) destoa do âmbar
   ------------------------------------------------------------------------- */
.progress > .progress-bar.bg-info {
  background-color: var(--rifa-amber-500) !important;
  color: var(--rifa-ink);
}

/* -------------------------------------------------------------------------
   9) Remove a barra social/compartilhamento flutuante das páginas de campanha
   (ícones de compartilhar + botões de grupo WhatsApp/Telegram/Instagram).
   ------------------------------------------------------------------------- */
.sorteio_sorteioShare__247_t,
.whatsapp-grupo,
.telegram-grupo,
.instagram-grupo {
  display: none !important;
}

/* -------------------------------------------------------------------------
   10) Imagem do banner da campanha: preserva a proporção (não achata).
   O style.css original usa object-fit: fill (estica p/ preencher a altura
   fixa do container), distorcendo a arte. Trocamos para "contain", que
   ajusta a imagem inteira ao espaço mantendo a proporção original.
   ------------------------------------------------------------------------- */
.custom-image {
  background: var(--rifa-bg); /* letterbox some no fundo claro da página */
}
.custom-image .SorteioTpl_imagem__2GXxI,
.custom-image img.SorteioTpl_imagem__2GXxI {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}