/**
 * AC | CTA Button — estilos.
 *
 * API conforme Design System AC.Camargo (vSHIFT):
 *   .ac-cta--type-{filled|outline|link|ghost}
 *   .ac-cta--color-{verde-nobre|verde-camargo|amarelo-vivo|...}
 *   .ac-cta--size-{xs|sm|base}
 *
 * Estrutura preparada pra cobrir 4 types × 9 colors × 3 sizes. Por enquanto
 * só implementamos as combinações realmente usadas nas LPs. Novas combinações
 * vão sendo adicionadas conforme demanda.
 *
 * !important enquanto o tema legado (mahi_facelift) injeta estilos em <a>.
 * Será removido com o tema próprio da Shift.
 */

/* ============================================================
 * Base
 * ============================================================ */
.ac-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: 'Arial', sans-serif !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important; /* pílula: 1 linha, hug (não quebra como no DS) */
  border: 1px solid transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, filter 0.2s;
}

.ac-cta__label { color: inherit !important; }

.ac-cta__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
}
.ac-cta__icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ============================================================
 * Sizes
 * ============================================================ */
.ac-cta--size-xs {
  padding: 6px 12px !important;
  font-size: 12px !important;
  line-height: 16px !important;
  border-radius: 999px !important;
  gap: 4px !important;
}
.ac-cta--size-xs .ac-cta__icon { width: 16px !important; height: 16px !important; }

.ac-cta--size-sm {
  padding: 8px 16px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  border-radius: 36px !important;
  gap: 8px !important;
}
.ac-cta--size-sm .ac-cta__icon { width: 20px !important; height: 20px !important; }

.ac-cta--size-base {
  padding: 10px 24px !important;
  font-size: 16px !important;
  line-height: 20px !important;
  border-radius: 36px !important;
  gap: 8px !important;
}
.ac-cta--size-base .ac-cta__icon { width: 20px !important; height: 20px !important; }

/* "Link" não tem padding bg — anula. */
.ac-cta.ac-cta--type-link {
  padding: 0 !important;
  border-radius: 0 !important;
  border-color: transparent !important;
}

/* ============================================================
 * Type=Filled
 * ============================================================ */
.ac-cta--type-filled.ac-cta--color-amarelo-vivo {
  background-color: #FFD16C !important;
  color: var(--ac-cta-text-color, #242424) !important;
}
.ac-cta--type-filled.ac-cta--color-amarelo-vivo:hover {
  background-color: #F6A71C !important;
}

.ac-cta--type-filled.ac-cta--color-verde-camargo {
  background-color: #0E5236 !important;
  color: var(--ac-cta-text-color, #FFFFFF) !important;
}
.ac-cta--type-filled.ac-cta--color-verde-camargo:hover {
  background-color: #033936 !important;
}

.ac-cta--type-filled.ac-cta--color-verde-menta {
  background-color: #D7F9D3 !important;
  color: var(--ac-cta-text-color, #0E5236) !important;
}
.ac-cta--type-filled.ac-cta--color-verde-menta:hover {
  background-color: #BDEDB8 !important;
}

.ac-cta--type-filled.ac-cta--color-branco {
  background-color: #FFFFFF !important;
  color: var(--ac-cta-text-color, #0E5236) !important;
}
.ac-cta--type-filled.ac-cta--color-branco:hover {
  background-color: #F0F2F5 !important;
}

.ac-cta--type-filled.ac-cta--color-verde-nobre {
  background-color: #033936 !important;
  color: var(--ac-cta-text-color, #FFFFFF) !important;
}
.ac-cta--type-filled.ac-cta--color-verde-nobre:hover {
  background-color: #0E5236 !important;
}

/* ============================================================
 * Type=Outline
 * ============================================================ */
.ac-cta--type-outline.ac-cta--color-verde-camargo {
  background-color: transparent !important;
  color: var(--ac-cta-text-color, #0E5236) !important;
  border-color: #0E5236 !important;
}
.ac-cta--type-outline.ac-cta--color-verde-camargo:hover {
  background-color: #0E5236 !important;
  color: var(--ac-cta-text-color, #FFFFFF) !important;
}
/* Outline + Verde/Nobre (DS Button Outline/base/Verde-Nobre — seção Metástase). */
.ac-cta--type-outline.ac-cta--color-verde-nobre {
  background-color: transparent !important;
  color: var(--ac-cta-text-color, #033936) !important;
  border-color: #033936 !important;
}
.ac-cta--type-outline.ac-cta--color-verde-nobre:hover {
  background-color: #033936 !important;
  color: var(--ac-cta-text-color, #FFFFFF) !important;
}

/* ============================================================
 * Token de cor por color do eixo. Link/Ghost (bg transparente) usam como cor
 * do texto, então a troca de cor passa a valer pra QUALQUER cor — não só os
 * combos hardcoded. textColor custom (ColorPalette) ainda tem prioridade.
 * ============================================================ */
.ac-cta--color-verde-nobre   { --ac-cta-color: #033936; }
.ac-cta--color-verde-camargo { --ac-cta-color: #0E5236; }
.ac-cta--color-verde-menta   { --ac-cta-color: #D7F9D3; }
.ac-cta--color-branco        { --ac-cta-color: #FFFFFF; }
.ac-cta--color-amarelo-vivo  { --ac-cta-color: #F6A71C; }
.ac-cta--color-roxo-brilho   { --ac-cta-color: #6861F2; }

/* ============================================================
 * Type=Link / Type=Ghost — sem fundo; o texto recebe a cor do eixo.
 * ============================================================ */
.ac-cta--type-link,
.ac-cta--type-ghost {
  background-color: transparent !important;
  color: var(--ac-cta-text-color, var(--ac-cta-color, #0E5236)) !important;
}
.ac-cta--type-link:hover,
.ac-cta--type-ghost:hover {
  text-decoration: underline !important;
}

/* ============================================================
 * Override: cor de fundo customizada (ColorPalette)
 * Mantém a tipografia/tamanho da combinação; substitui o bg.
 * ============================================================ */
.ac-cta.ac-cta--custom-bg {
  background-color: var(--ac-cta-bg-color) !important;
}
.ac-cta.ac-cta--custom-bg:hover {
  background-color: var(--ac-cta-bg-color) !important;
  filter: brightness(0.92);
}