.emkabe-whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* center icon when compact */
  background-color: #25d366;
  padding: 15px; /* start as a circle */
  border-radius: 50%;
  text-decoration: none;
  /* start as fixed small circle, then expand via min-width on hover */
  min-width: 48px; /* 28px icon + 10px left + 10px right padding */
  overflow: hidden;
  transition: min-width 220ms ease, padding 200ms ease, border-radius 200ms ease,
    box-shadow 200ms ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.emkabe-whatsapp-link img {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0; /* ensure no extra margins so centering works */
}

/* Text is hidden by default; reveal on hover */
.emkabe-whatsapp-text {
  color: white;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px);
  /* small delay so container expands slightly before text appears */
  transition: max-width 200ms ease 60ms, opacity 180ms ease 80ms,
    transform 180ms ease 80ms;
  display: inline-block;
}

/* Expand the button and reveal text on hover/focus */
.emkabe-whatsapp-link:hover,
.emkabe-whatsapp-link:focus {
  padding: 10px 16px;
  border-radius: 50px;

  justify-content: flex-start; /* move icon to left when expanded so text appears on right */
}

.emkabe-whatsapp-link:hover .emkabe-whatsapp-text,
.emkabe-whatsapp-link:focus .emkabe-whatsapp-text {
  max-width: 200px; /* enough for "Contact Us" */
  opacity: 1;
  margin-right: 10px;
  transform: translateX(0);
}

/* Optional: make it keyboard accessible with visible focus outline */
.emkabe-whatsapp-link:focus {
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12);
  outline: none;
}