/*
 * WhatsApp flutuante.
 *
 * O plugin traz o layout; o tema ajusta pelas variáveis abaixo. O padrão usa o verde do WhatsApp no círculo e lê
 * os tokens do tema de blocos (Vitrine: base, contrast; sombras e tempos custom.*) na etiqueta, com neutros sem eles.
 * Seletores de uma classe: perdem para qualquer regra do tema com uma classe a mais.
 */
.rx-whatsapp {
  --rx-whatsapp-bg: #25d366;
  --rx-whatsapp-icon: #fff;
  --rx-whatsapp-size: 56px;
  --rx-whatsapp-offset-x: 20px;
  --rx-whatsapp-offset-y: 20px;
  --rx-whatsapp-label-bg: var(--wp--preset--color--base, #fff);
  --rx-whatsapp-label-text: var(--wp--preset--color--contrast, #111);
  --rx-whatsapp-label-radius: 4px;
  --rx-whatsapp-font-size: var(--wp--preset--font-size--small, 0.875rem);
  --rx-whatsapp-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
  --rx-whatsapp-z: 9990;

  position: fixed;
  bottom: calc(var(--rx-whatsapp-offset-y) + env(safe-area-inset-bottom, 0px));
  z-index: var(--rx-whatsapp-z);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.rx-whatsapp--right {
  right: var(--rx-whatsapp-offset-x);
}

.rx-whatsapp--left {
  left: var(--rx-whatsapp-offset-x);
  flex-direction: row-reverse;
}

.rx-whatsapp--preview {
  position: static;
}

/*
 * Widgets do painel Rishi no mesmo canto: o botão sobe acima deles em vez de ficar por baixo. A bolha de vídeo
 * (96 px, a 20 px do pé) só divide o canto a partir de 641 px; no celular o painel já a põe 80 px acima.
 * A conversa (avatar de 60 px) divide o canto em qualquer tela.
 */
@media (min-width: 641px) {
  body:has(> [data-format="floating"]:not([data-position="left"])) .rx-whatsapp--right,
  body:has(> [data-format="floating"][data-position="left"]) .rx-whatsapp--left {
    bottom: calc(var(--rx-whatsapp-offset-y) + 112px + env(safe-area-inset-bottom, 0px));
  }
}

body:has(> [data-format="chat"]:not([data-position="left"])) .rx-whatsapp--right,
body:has(> [data-format="chat"][data-position="left"]) .rx-whatsapp--left {
  bottom: calc(var(--rx-whatsapp-offset-y) + 72px + env(safe-area-inset-bottom, 0px));
}

.rx-whatsapp__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--rx-whatsapp-size);
  height: var(--rx-whatsapp-size);
  border-radius: 50%;
  background: var(--rx-whatsapp-bg);
  box-shadow: var(--rx-whatsapp-shadow);
  color: var(--rx-whatsapp-icon);
}

.rx-whatsapp__icon svg {
  width: 55%;
  height: 55%;
}

/* Etiqueta só no computador: no celular o texto cobriria a página. */
.rx-whatsapp__label {
  display: none;
  padding: 0.6em 1em;
  border-radius: var(--rx-whatsapp-label-radius);
  background: var(--rx-whatsapp-label-bg);
  box-shadow: var(--rx-whatsapp-shadow);
  color: var(--rx-whatsapp-label-text);
  font-size: var(--rx-whatsapp-font-size);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 782px) {
  .rx-whatsapp__label {
    display: block;
  }

  /* Na página do produto a compra costuma ficar na coluna da direita: a etiqueta cobriria o botão de comprar. */
  .single-product .rx-whatsapp__label {
    display: none;
  }
}

.rx-whatsapp--preview .rx-whatsapp__label {
  display: block;
}

.rx-whatsapp:focus-visible {
  outline: none;
}

.rx-whatsapp:focus-visible .rx-whatsapp__icon {
  outline: 2px solid var(--rx-whatsapp-label-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  /* Entra depois que a página assenta: o círculo cresce e a etiqueta desliza. */
  .rx-whatsapp:not(.rx-whatsapp--preview) .rx-whatsapp__icon {
    animation: rx-whatsapp-pop var(--wp--custom--motion--duration--slow, 0.5s) cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
  }

  .rx-whatsapp:not(.rx-whatsapp--preview) .rx-whatsapp__label {
    animation: rx-whatsapp-slide var(--wp--custom--motion--duration--slow, 0.5s) ease-out 1.3s both;
  }

  .rx-whatsapp--left:not(.rx-whatsapp--preview) .rx-whatsapp__label {
    animation-name: rx-whatsapp-slide-left;
  }

  .rx-whatsapp__icon,
  .rx-whatsapp__label {
    transition: transform var(--wp--custom--motion--duration--fast, 0.2s) ease-out;
  }

  .rx-whatsapp:hover .rx-whatsapp__icon {
    transform: scale(1.08);
  }

  .rx-whatsapp:active .rx-whatsapp__icon {
    transform: scale(0.94);
  }
}

@keyframes rx-whatsapp-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes rx-whatsapp-slide {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

@keyframes rx-whatsapp-slide-left {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}