/* ============================================================================
   CB WhatsApp — botao flutuante de atendimento (F-wa / secao 4r do HANDOFF)
   Namespace .cb-wa - nao redefine nada de ttd- / dt- / cb-popup.
   O numero/mensagem vem do app (GET /vitrine/wa-config) com fallback nas
   settings do Personalizar tema. Ver static/js/cb-wa.js.
   ========================================================================= */

.cb-wa {
  position: fixed;
  right: 16px;
  /* 16px do rodape + folga pro botao "Preferencias de cookies" da Nuvemshop,
     que ocupa o canto inferior. O JS mede o vizinho e sobe este valor via
     --cb-wa-bottom quando encontra alguem no mesmo canto. */
  bottom: var(--cb-wa-bottom, 16px);
  z-index: 1200; /* abaixo do header (1500) e do pop-up 10% (que e modal) */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, bottom 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.cb-wa:hover,
.cb-wa:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  color: #fff;
}

.cb-wa:focus-visible {
  outline: 3px solid #1e5fd8;
  outline-offset: 3px;
}

.cb-wa svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  display: block;
}

/* Rotulo que aparece no hover em telas grandes (nao rouba area de toque) */
.cb-wa__label {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  background: #0b1c3f;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 8px 11px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.cb-wa:hover .cb-wa__label,
.cb-wa:focus-visible .cb-wa__label {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 760px) {
  .cb-wa {
    width: 52px;
    height: 52px;
    right: 14px;
  }
  .cb-wa svg { width: 27px; height: 27px; }
  .cb-wa__label { display: none; }
}

/* O tema base tem um .btn-whatsapp proprio (store.whatsapp). Se algum dia a
   loja preencher esse campo no admin, os dois apareceriam no mesmo canto —
   o nosso vence e o nativo sai. */
body .cb-wa ~ .btn-whatsapp,
body .btn-whatsapp:has(~ .cb-wa) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cb-wa,
  .cb-wa__label { transition: none; }
  .cb-wa:hover,
  .cb-wa:focus-visible { transform: none; }
}