/*
 * Duplo D | Botoes de WhatsApp
 *
 * Um so lugar para todos os CTAs que levam para o WhatsApp, em qualquer
 * pagina do site: as v2 (.dd-btn), o hero das paginas internas
 * (.dd-hero-btn) e o botao nativo do Betheme (.button), que aparece no
 * rodape global e nas paginas antigas.
 *
 * A regra casa pelo href, nao por uma classe nova: qualquer botao que
 * alguem criar amanha apontando para wa.me ou api.whatsapp.com ja nasce
 * verde e com icone, sem tocar em CSS.
 *
 * COR
 * O verde da marca WhatsApp e o #25d366. Ele NAO carrega texto branco:
 * medido da 1,93:1, reprovado em qualquer criterio. O rotulo por isso e
 * verde-escuro (#04331d) sobre o verde de marca -- 7,3:1 -- que e a mesma
 * combinacao que o proprio WhatsApp usa nos baloes de mensagem. Trocar
 * para branco quebra a legibilidade, nao so a conformidade.
 *
 * O QUE FICA DE FORA
 * Link de texto corrido (o telefone do rodape, a linha do FAQ) e o selo
 * Kommo, que e uma imagem. Nenhum dos tres e botao; a lista de seletores
 * e explicita justamente para nao pega-los.
 *
 * @package Duplo D
 * @since   2026-09-01
 */

:root {
  --wa-green: #25d366;
  --wa-green-hover: #1fb955;
  --wa-ink: #04331d;
}

.dd-v2 .dd-btn[href*="wa.me"],
.dd-v2 .dd-btn[href*="whatsapp.com"],
a.dd-btn[href*="wa.me"],
a.dd-btn[href*="whatsapp.com"],
a.dd-hero-btn[href*="wa.me"],
a.dd-hero-btn[href*="whatsapp.com"],
html a.button[href*="wa.me"],
html a.button[href*="whatsapp.com"] {
  background: var(--wa-green) !important;
  background-image: none !important;
  color: var(--wa-ink) !important;
  border-color: var(--wa-green) !important;
  box-shadow: inset 0 0 0 1px var(--wa-green-hover) !important;
  border-radius: 4px;
  text-decoration: none;
}

.dd-v2 .dd-btn[href*="wa.me"]:hover,
.dd-v2 .dd-btn[href*="whatsapp.com"]:hover,
a.dd-btn[href*="wa.me"]:hover,
a.dd-btn[href*="whatsapp.com"]:hover,
a.dd-hero-btn[href*="wa.me"]:hover,
a.dd-hero-btn[href*="whatsapp.com"]:hover,
html a.button[href*="wa.me"]:hover,
html a.button[href*="whatsapp.com"]:hover {
  background: var(--wa-green-hover) !important;
  color: var(--wa-ink) !important;
}

/* O rotulo do botao do Betheme vive num span com cor propria. */
html a.button[href*="wa.me"] .button_label,
html a.button[href*="whatsapp.com"] .button_label {
  color: var(--wa-ink) !important;
}

/*
 * O icone.
 *
 * E mask-image, nao background-image: assim o glifo herda a cor do texto
 * (currentColor) e continua legivel se algum dia o par de cores mudar.
 * O ::before entra como filho de um inline-flex, entao o gap ja existente
 * dos .dd-btn cuida do respiro; para o botao do Betheme o gap e declarado
 * aqui porque la o layout era inline-block.
 */
.dd-v2 .dd-btn[href*="wa.me"]::before,
.dd-v2 .dd-btn[href*="whatsapp.com"]::before,
a.dd-btn[href*="wa.me"]::before,
a.dd-btn[href*="whatsapp.com"]::before,
a.dd-hero-btn[href*="wa.me"]::before,
a.dd-hero-btn[href*="whatsapp.com"]::before,
html a.button[href*="wa.me"]::before,
html a.button[href*="whatsapp.com"]::before {
  content: "";
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjQ3MiAxNC4zODJjLS4yOTctLjE0OS0xLjc1OC0uODY3LTIuMDMtLjk2Ny0uMjczLS4wOTktLjQ3MS0uMTQ4LS42Ny4xNS0uMTk3LjI5Ny0uNzY3Ljk2Ni0uOTQgMS4xNjQtLjE3My4xOTktLjM0Ny4yMjMtLjY0NC4wNzUtLjI5Ny0uMTUtMS4yNTUtLjQ2My0yLjM5LTEuNDc1LS44ODMtLjc4OC0xLjQ4LTEuNzYxLTEuNjUzLTIuMDU5LS4xNzMtLjI5Ny0uMDE4LS40NTguMTMtLjYwNi4xMzQtLjEzMy4yOTgtLjM0Ny40NDYtLjUyLjE0OS0uMTc0LjE5OC0uMjk4LjI5OC0uNDk3LjA5OS0uMTk4LjA1LS4zNzEtLjAyNS0uNTItLjA3NS0uMTQ5LS42NjktMS42MTItLjkxNi0yLjIwNy0uMjQyLS41NzktLjQ4Ny0uNS0uNjY5LS41MS0uMTczLS4wMDgtLjM3MS0uMDEtLjU3LS4wMS0uMTk4IDAtLjUyLjA3NC0uNzkyLjM3Mi0uMjcyLjI5Ny0xLjA0IDEuMDE2LTEuMDQgMi40NzkgMCAxLjQ2MiAxLjA2NSAyLjg3NSAxLjIxMyAzLjA3NC4xNDkuMTk4IDIuMDk2IDMuMiA1LjA3NyA0LjQ4Ny43MDkuMzA2IDEuMjYyLjQ4OSAxLjY5NC42MjUuNzEyLjIyNyAxLjM2LjE5NSAxLjg3Mi4xMTguNTcxLS4wODUgMS43NTgtLjcxOSAyLjAwNi0xLjQxMy4yNDgtLjY5NC4yNDgtMS4yODkuMTczLTEuNDEzLS4wNzQtLjEyNC0uMjcyLS4xOTgtLjU3LS4zNDdtLTUuNDIxIDcuNDAzaC0uMDA0YTkuODcgOS44NyAwIDAxLTUuMDMxLTEuMzc4bC0uMzYxLS4yMTQtMy43NDEuOTgyLjk5OC0zLjY0OC0uMjM1LS4zNzRhOS44NiA5Ljg2IDAgMDEtMS41MS01LjI2Yy4wMDEtNS40NSA0LjQzNi05Ljg4NCA5Ljg4OC05Ljg4NCAyLjY0IDAgNS4xMjIgMS4wMyA2Ljk4OCAyLjg5OGE5LjgyNSA5LjgyNSAwIDAxMi44OTMgNi45OTRjLS4wMDMgNS40NS00LjQzNyA5Ljg4NC05Ljg4NSA5Ljg4NG04LjQxMy0xOC4yOTdBMTEuODE1IDExLjgxNSAwIDAwMTIuMDUgMEM1LjQ5NSAwIC4xNiA1LjMzNS4xNTcgMTEuODkyYzAgMi4wOTYuNTQ3IDQuMTQyIDEuNTg4IDUuOTQ1TC4wNTcgMjRsNi4zMDUtMS42NTRhMTEuODgyIDExLjg4MiAwIDAwNS42ODMgMS40NDhoLjAwNWM2LjU1NCAwIDExLjg5LTUuMzM1IDExLjg5My0xMS44OTNhMTEuODIxIDExLjgyMSAwIDAwLTMuNDgtOC40MTN6Ii8+PC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjQ3MiAxNC4zODJjLS4yOTctLjE0OS0xLjc1OC0uODY3LTIuMDMtLjk2Ny0uMjczLS4wOTktLjQ3MS0uMTQ4LS42Ny4xNS0uMTk3LjI5Ny0uNzY3Ljk2Ni0uOTQgMS4xNjQtLjE3My4xOTktLjM0Ny4yMjMtLjY0NC4wNzUtLjI5Ny0uMTUtMS4yNTUtLjQ2My0yLjM5LTEuNDc1LS44ODMtLjc4OC0xLjQ4LTEuNzYxLTEuNjUzLTIuMDU5LS4xNzMtLjI5Ny0uMDE4LS40NTguMTMtLjYwNi4xMzQtLjEzMy4yOTgtLjM0Ny40NDYtLjUyLjE0OS0uMTc0LjE5OC0uMjk4LjI5OC0uNDk3LjA5OS0uMTk4LjA1LS4zNzEtLjAyNS0uNTItLjA3NS0uMTQ5LS42NjktMS42MTItLjkxNi0yLjIwNy0uMjQyLS41NzktLjQ4Ny0uNS0uNjY5LS41MS0uMTczLS4wMDgtLjM3MS0uMDEtLjU3LS4wMS0uMTk4IDAtLjUyLjA3NC0uNzkyLjM3Mi0uMjcyLjI5Ny0xLjA0IDEuMDE2LTEuMDQgMi40NzkgMCAxLjQ2MiAxLjA2NSAyLjg3NSAxLjIxMyAzLjA3NC4xNDkuMTk4IDIuMDk2IDMuMiA1LjA3NyA0LjQ4Ny43MDkuMzA2IDEuMjYyLjQ4OSAxLjY5NC42MjUuNzEyLjIyNyAxLjM2LjE5NSAxLjg3Mi4xMTguNTcxLS4wODUgMS43NTgtLjcxOSAyLjAwNi0xLjQxMy4yNDgtLjY5NC4yNDgtMS4yODkuMTczLTEuNDEzLS4wNzQtLjEyNC0uMjcyLS4xOTgtLjU3LS4zNDdtLTUuNDIxIDcuNDAzaC0uMDA0YTkuODcgOS44NyAwIDAxLTUuMDMxLTEuMzc4bC0uMzYxLS4yMTQtMy43NDEuOTgyLjk5OC0zLjY0OC0uMjM1LS4zNzRhOS44NiA5Ljg2IDAgMDEtMS41MS01LjI2Yy4wMDEtNS40NSA0LjQzNi05Ljg4NCA5Ljg4OC05Ljg4NCAyLjY0IDAgNS4xMjIgMS4wMyA2Ljk4OCAyLjg5OGE5LjgyNSA5LjgyNSAwIDAxMi44OTMgNi45OTRjLS4wMDMgNS40NS00LjQzNyA5Ljg4NC05Ljg4NSA5Ljg4NG04LjQxMy0xOC4yOTdBMTEuODE1IDExLjgxNSAwIDAwMTIuMDUgMEM1LjQ5NSAwIC4xNiA1LjMzNS4xNTcgMTEuODkyYzAgMi4wOTYuNTQ3IDQuMTQyIDEuNTg4IDUuOTQ1TC4wNTcgMjRsNi4zMDUtMS42NTRhMTEuODgyIDExLjg4MiAwIDAwNS42ODMgMS40NDhoLjAwNWM2LjU1NCAwIDExLjg5LTUuMzM1IDExLjg5My0xMS44OTNhMTEuODIxIDExLjgyMSAwIDAwLTMuNDgtOC40MTN6Ii8+PC9zdmc+");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* O .button do Betheme nao e flex por padrao: sem isto o ::before empurra
   o rotulo para a linha de baixo. */
html a.button[href*="wa.me"],
html a.button[href*="whatsapp.com"],
a.dd-hero-btn[href*="wa.me"],
a.dd-hero-btn[href*="whatsapp.com"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}