.whatsapp-mark {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.2em;
}

.home-whatsapp-link,
.whatsapp-button,
.footer-whatsapp-link,
.whatsapp-with-mark,
a[href^="https://wa.me/"] {
  align-items: center;
  gap: .55rem;
}

/* Every clickable WhatsApp action gets the same WhatsApp brand mark.
   Header and homepage already render the image explicitly. */
a[href^="https://wa.me/"]:not(.header-whatsapp):not(.home-whatsapp-link)::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: .48em;
  flex: 0 0 1.25em;
  vertical-align: -0.2em;
  background: url("whatsapp-logo.svg") center / contain no-repeat;
}

.header-whatsapp .whatsapp-mark {
  width: 24px;
  height: 24px;
  display: block;
}

.mobile-booking-action .whatsapp-mark,
.mobile-booking-action[href^="https://wa.me/"]::before {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.app-button.whatsapp-with-mark .whatsapp-mark,
.app-button[href^="https://wa.me/"]::before {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}