#whatsapp-float {
  background: #25D366;
  color: #000;
  transition: opacity .2s ease, visibility 0s linear;
}

#whatsapp-float:hover {
  background: #20bd5c;
}

#whatsapp-float:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

#whatsapp-float.is-footer-visible {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

@media (max-width: 767px) {
  #whatsapp-float {
    width: 48px;
    height: 48px;
    right: 8px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  #whatsapp-float > span { display: none; }

  /* Reuse the WhatsApp glyph already included in the local brand icon font. */
  #whatsapp-float > i {
    font-family: "Xclusive Icon Set Brands";
    font-size: 24px;
  }

  #whatsapp-float > i::before { content: "\f232"; }
}