/* Botao flutuante de WhatsApp (01/10/2026) — inc/home-whatsapp-flutuante.php */
.whatsapp-float {
  --whatsapp-float-size: 56px;
  --whatsapp-float-gap: 20px;
  position: fixed;
  z-index: 39; /* abaixo do carrinho (40/41), da barra de compra (42) e do checkout (58/60) */
  right: var(--whatsapp-float-gap);
  bottom: calc(var(--whatsapp-float-gap) + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--whatsapp-float-size);
  height: var(--whatsapp-float-size);
  border-radius: 50%;
  color: #fff;
  background: #25d366;
  box-shadow: 0 10px 26px rgba(20, 27, 39, .22);
  text-decoration: none;
  animation: whatsapp-float-entrada 420ms ease-out 600ms both;
}

.whatsapp-float:hover { background: #1fb959; }
.whatsapp-float:focus-visible { outline: 3px solid var(--ink, #15171a); outline-offset: 3px; }
.whatsapp-float__icon { display: block; width: 30px; height: 30px; }

/* Rotulo so no desktop com mouse, ao passar por cima ou com foco. */
.whatsapp-float__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  padding: 7px 12px;
  border: 1px solid var(--line, #e2e6eb);
  border-radius: 999px;
  color: var(--ink, #15171a);
  background: var(--surface, #fff);
  box-shadow: var(--shadow, 0 16px 38px rgba(19, 29, 43, .11));
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

@media (hover: hover) and (min-width: 781px) {
  .whatsapp-float:hover .whatsapp-float__label,
  .whatsapp-float:focus-visible .whatsapp-float__label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* Carrinho, menu, zoom e checkout abertos: o botao sai (o carrinho ja tem link de ajuda). */
body.is-locked .whatsapp-float,
body.is-checkout-modal-open .whatsapp-float { display: none; }

@media (max-width: 780px) {
  .whatsapp-float { --whatsapp-float-size: 52px; --whatsapp-float-gap: 16px; }
  .whatsapp-float__icon { width: 28px; height: 28px; }
  .whatsapp-float__label { display: none; }

  /* PDP: sobe acima da barra fixa de compra (.product-sticky-buy: 12px do chao + ~66px de altura). */
  .whatsapp-float--pdp { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes whatsapp-float-entrada {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
  .whatsapp-float__label { transition: none; }
}