/* ==========================================================================
   BOTÃO WHATSAPP CTA
   Wrapper: .hm2-whatsapp-cta
   Modos: .hm2-whatsapp-cta--fixo | .hm2-whatsapp-cta--flutuante
   ========================================================================== */

/* ── Modo Flutuante: position:fixed canto inferior direito ── */
/* Empilha ACIMA do botão "Voltar ao Topo" usando suas variáveis CSS.
   Se o back-to-top não estiver presente, os fallbacks garantem posição segura. */
body:not(.path-admin) .hm2-whatsapp-cta--flutuante {
  position: fixed !important;
  bottom: calc(var(--btt-bottom, 2rem) + var(--btt-tamanho, 44px) + 10px) !important;
  right: var(--btt-right, 25px) !important;
  z-index: 999 !important;
  pointer-events: auto !important;
}

/* ── Modo Fixo: bloco centralizado inline na página ── */
body:not(.path-admin) .hm2-whatsapp-cta--fixo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 2rem 1rem !important;
}

/* ── Âncora (link) ── */
body:not(.path-admin) .hm2-whatsapp-cta__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background-color: #25D366 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  white-space: nowrap !important;
}

body:not(.path-admin) .hm2-whatsapp-cta__link:hover,
body:not(.path-admin) .hm2-whatsapp-cta__link:focus-visible {
  background-color: #1DA851 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55) !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Modo flutuante: botão circular quando só tem ícone (texto oculto em mobile) */
@media (max-width: 575px) {
  body:not(.path-admin) .hm2-whatsapp-cta--flutuante .hm2-whatsapp-cta__link {
    padding: 0.9rem !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    justify-content: center !important;
  }
  body:not(.path-admin) .hm2-whatsapp-cta--flutuante .hm2-whatsapp-cta__text {
    display: none !important;
  }
  body:not(.path-admin) .hm2-whatsapp-cta--flutuante .hm2-whatsapp-cta__icon svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ── Ícone SVG ── */
body:not(.path-admin) .hm2-whatsapp-cta__icon {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

body:not(.path-admin) .hm2-whatsapp-cta__icon svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
  transition: transform 0.2s ease !important;
}

body:not(.path-admin) .hm2-whatsapp-cta__link:hover .hm2-whatsapp-cta__icon svg {
  transform: scale(1.1) !important;
}

/* ── Seção do Layout Builder que contém o botão flutuante ── */
/* O botão é position:fixed (sai do fluxo). A seção existe só para
   hospedar o bloco no DOM — deve ser completamente invisível. */
body:not(.path-admin) .lp-whatsapp-cta {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:not(.path-admin) .lp-whatsapp-cta .layout {
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* Oculta o título h2 gerado pelo Layout Builder para esta seção */
body:not(.path-admin) .lp-whatsapp-cta .lp-section__titulo {
  display: none !important;
}