/* ==========================================================================
   TEMA DA LOJA — cores configuráveis pelo painel
   ==========================================================================

   Este arquivo NÃO substitui o main.css: ele apenas amarra os componentes do
   Bootstrap às variáveis de marca do tema.

   O problema que resolve: `.btn-primary` e `.btn-outline-primary` vinham com
   o azul padrao do Bootstrap e ignoravam o --accent-color do tema. A Central
   de Suporte, o checkout e o login exibiam botões azuis numa loja verde.

   As variáveis abaixo são sobrescritas em tempo de execução pelo bloco
   <style> que o layout injeta a partir das configurações do painel
   (Configurações → Aparência). Sem configuração, valem os valores do
   main.css.
   ========================================================================== */

:root {
  /* Derivadas do acento, para estados hover/active e foco. Ficam aqui para
     que a troca de cor no painel altere um valor só e o resto acompanhe. */
  --accent-hover-color: color-mix(in srgb, var(--accent-color) 85%, #000);
  --accent-soft-color:  color-mix(in srgb, var(--accent-color) 12%, #fff);
  --accent-ring-color:  color-mix(in srgb, var(--accent-color) 35%, transparent);

  /* Bootstrap 5 lê estas variáveis em vários componentes (links, foco,
     paginação, form-check). Amarrá-las evita o azul aparecer por baixo. */
  --bs-primary: var(--accent-color);
  --bs-primary-rgb: var(--accent-color-rgb, 13, 148, 136);
  --bs-link-color: var(--accent-color);
  --bs-link-hover-color: var(--accent-hover-color);
}

/* --------------------------------------------------------------------------
   Botões sólidos
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-color: var(--contrast-color);
  --bs-btn-hover-bg: var(--accent-hover-color);
  --bs-btn-hover-border-color: var(--accent-hover-color);
  --bs-btn-hover-color: var(--contrast-color);
  --bs-btn-active-bg: var(--accent-hover-color);
  --bs-btn-active-border-color: var(--accent-hover-color);
  --bs-btn-active-color: var(--contrast-color);
  --bs-btn-disabled-bg: var(--accent-color);
  --bs-btn-disabled-border-color: var(--accent-color);
  --bs-btn-disabled-color: var(--contrast-color);
  --bs-btn-focus-shadow-rgb: var(--accent-color-rgb, 13, 148, 136);
}

/* --------------------------------------------------------------------------
   Botões contornados (os "Saiba Mais" da Central de Suporte)
   -------------------------------------------------------------------------- */
.btn-outline-primary {
  --bs-btn-color: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-hover-color: var(--contrast-color);
  --bs-btn-active-bg: var(--accent-color);
  --bs-btn-active-border-color: var(--accent-color);
  --bs-btn-active-color: var(--contrast-color);
  --bs-btn-disabled-color: var(--accent-color);
  --bs-btn-disabled-border-color: var(--accent-color);
  --bs-btn-focus-shadow-rgb: var(--accent-color-rgb, 13, 148, 136);
}

/* --------------------------------------------------------------------------
   Demais componentes que herdavam o azul do Bootstrap
   -------------------------------------------------------------------------- */
.btn-link {
  --bs-btn-color: var(--accent-color);
  --bs-btn-hover-color: var(--accent-hover-color);
}

.text-primary { color: var(--accent-color) !important; }
.bg-primary   { background-color: var(--accent-color) !important; }
.border-primary { border-color: var(--accent-color) !important; }

a { color: var(--accent-color); }
a:hover { color: var(--accent-hover-color); }

/* Foco visível respeitando a marca (acessibilidade: o anel não some). */
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem var(--accent-ring-color);
}

.form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.badge.bg-primary { background-color: var(--accent-color) !important; }

.page-link { color: var(--accent-color); }
.page-item.active .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.nav-pills .nav-link.active,
.list-group-item.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.dropdown-item.active,
.dropdown-item:active { background-color: var(--accent-color); }

.spinner-border.text-primary { color: var(--accent-color) !important; }

.progress-bar { background-color: var(--accent-color); }

/* Fallback para navegadores sem color-mix(): sem isto, hover e foco ficariam
   sem cor nenhuma em versões antigas. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --accent-hover-color: var(--accent-color);
    --accent-soft-color: #f4f7f6;
    --accent-ring-color: rgba(13, 148, 136, 0.35);
  }
}