/* Top compradores (ranking geral): o botão da página e os ajustes do
 * cartão dentro do drawer.
 *
 * O cartão em si é o dos Top compradores por marco
 * (assets/css/campanha/marcos.css, classes mr- e ur-mc) e o drawer é o
 * mesmo do checkout (ur-ui.css). Aqui fica só o que é desta tela.
 *
 * Cores: tokens --ur-* (TOKENS.md). O botão aceita as variáveis do tema
 * por campanha (--tema-top-compradores-*) que o legado já usava, com o
 * token como padrão.
 */

/* As chaves --tema-top-compradores-* vêm do Personalizar Temas e o legado já
   as usava neste botão; o token do modelo (Temas V2) é o padrão quando a
   loja não personalizou. Sem o token no fallback, o botão nascia branco com
   texto escuro mesmo no modo Escuro — ilegível sobre o fundo da página. */
/* `button.` para vencer o `.btn` do Bootstrap, que zera o fundo e força
   texto escuro — sem isso, no modo Escuro o botão sumia no fundo da página.
   Não precisa de !important: a especificidade de elemento + classe basta. */
button.ur-tg__abrir {
  margin: 8px 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--tema-top-compradores-bg, var(--ur-card, #ffffff));
  color: var(--tema-top-compradores-text, var(--ur-tx, #111111));
  border: var(--tema-top-compradores-border-width, 1px) solid
          var(--tema-top-compradores-border-color, var(--ur-line, #e1e1d9));
  font-family: var(--ur-font, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 15px;
  /* A tela V2 não carrega o Bootstrap: `d-flex` e `align-items-center`
     existem remapados em casca.css, mas `justify-content-center` não.
     Sem isto o flex fica no início e o conjunto ícone+texto nasce à
     esquerda do cartão. O ícone continua à esquerda do texto. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* V2 não remapou `gap-2`; sem isto o ícone cola no texto. +5px
     sobre o espaço atual (quase zero). */
  gap: 5px;
}

button.ur-tg__abrir:hover,
button.ur-tg__abrir:focus-visible {
  filter: brightness(0.97);
}

/* O troféu acompanha o texto do botão, não o acento: sobre um fundo
   personalizado, o acento podia cair numa combinação ilegível. */
.ur-tg__trofeu {
  display: inline-flex;
  color: currentColor;
}

/* Dentro do drawer o cartão já está num contêiner com fundo; sem a margem
   ele encosta no título da gaveta. */
.ur-tg__card {
  margin: 0;
}