/* Balance the icon with an equal empty gutter so the label itself stays centred. */
body :is(.ts-menu-whatsapp, .ts-button--whatsapp, .ts-contact-method--primary[href*="wa.me"],
  .ts-direct-contact__options .ts-button.mc11-whatsapp, button.mc11-whatsapp[type="submit"])
  :is(.ts-whatsapp-control__label, .ts-button-whatsapp__label, .ts-contact-methods__whatsapp-label) {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

body :is(.ts-menu-whatsapp, .ts-button--whatsapp, .ts-contact-method--primary[href*="wa.me"],
  .ts-direct-contact__options .ts-button.mc11-whatsapp, button.mc11-whatsapp[type="submit"])
  :is(img, .ts-parity-icon--whatsapp) {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  margin-inline: 0;
}

body :is(.ts-menu-whatsapp, .ts-button--whatsapp, .ts-contact-method--primary[href*="wa.me"],
  .ts-direct-contact__options .ts-button.mc11-whatsapp, button.mc11-whatsapp[type="submit"]):has(> img, > .ts-parity-icon--whatsapp) {
  display: inline-grid;
  grid-template-columns: minmax(17px, 1fr) minmax(0, max-content) minmax(17px, 1fr);
  align-items: center;
  justify-items: center;
  column-gap: 7px;
  row-gap: 0;
  padding-inline: max(8px, min(3vw, 14px));
  text-align: center;
}

html body.mc11-ppf :is(.ts-menu-whatsapp.mc17-whatsapp, .ts-contact-method--primary.mc17-whatsapp,
  button.mc17-whatsapp[type="submit"]):has(> img) {
  display: inline-grid !important;
  grid-template-columns: minmax(17px, 1fr) minmax(0, max-content) minmax(17px, 1fr) !important;
}

.ts-site-header .ts-header-actions > .ts-mobile-header-whatsapp {
  display: none !important;
}

@media (max-width: 760px) {
  .ts-site-header .ts-header-actions > :not(.ts-mobile-header-whatsapp) {
    display: none !important;
  }

  .ts-site-header .ts-header-actions > .ts-mobile-header-whatsapp {
    display: inline-grid !important;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .ts-site-header .ts-mobile-header-whatsapp img {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    filter: none;
  }

  .ts-site-header .ts-mobile-header-whatsapp:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }
}

html body :is(.ts-menu-whatsapp, .ts-button--whatsapp, .ts-contact-method--primary[href*="wa.me"],
  .ts-footer-action--whatsapp, .ts-whatsapp-float, .mc17-hero-whatsapp, .cb18-whatsapp-round,
  .mc11-whatsapp--round, .ts-direct-contact__options .ts-button.mc11-whatsapp,
  button.mc11-whatsapp[type="submit"],
  .mc2-support-contact-form .ts-enquiry-form button.ts-button.mc11-whatsapp):not(.ts-site-header *) {
  background: #25d366 !important;
  border: 1px solid #25d366 !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: none;
  text-shadow: none;
}

html body :is(.ts-menu-whatsapp, .ts-button--whatsapp, .ts-contact-method--primary[href*="wa.me"],
  .ts-footer-action--whatsapp, .ts-whatsapp-float, .mc17-hero-whatsapp, .cb18-whatsapp-round,
  .mc11-whatsapp--round, .ts-direct-contact__options .ts-button.mc11-whatsapp,
  button.mc11-whatsapp[type="submit"],
  .mc2-support-contact-form .ts-enquiry-form button.ts-button.mc11-whatsapp):not(.ts-site-header *):hover {
  background: #20c760 !important;
  border-color: #20c760 !important;
}

html body :is(.ts-menu-whatsapp, .ts-button--whatsapp, .ts-contact-method--primary[href*="wa.me"],
  .ts-footer-action--whatsapp, .ts-whatsapp-float, .mc17-hero-whatsapp, .cb18-whatsapp-round,
  .mc11-whatsapp--round, .ts-direct-contact__options .ts-button.mc11-whatsapp,
  button.mc11-whatsapp[type="submit"]):not(.ts-site-header *) img[src$="/whatsapp.svg"] {
  filter: drop-shadow(0 0 1px #07552e) drop-shadow(0 0 .5px #07552e) !important;
}

html body :is(.ts-menu-whatsapp, .ts-button--whatsapp, .ts-contact-method--primary[href*="wa.me"],
  .ts-footer-action--whatsapp, .ts-direct-contact__options .ts-button.mc11-whatsapp)
  :is(.ts-whatsapp-control__label, .ts-button-whatsapp__label, .ts-contact-methods__whatsapp-label) {
  color: #fff !important;
  text-shadow: none;
}

html body .ts-contact-method--primary[href*="wa.me"] .ts-parity-icon--whatsapp {
  color: #fff !important;
  fill: currentColor;
  filter: drop-shadow(0 0 1px #07552e);
}

.mc11-ppf .mc17-actions .mc17-hero-whatsapp.mc17-whatsapp {
  border-radius: 50%;
}

/* Keep the labelled hero icon in the same row as its text. */
html body a.ts-button.ts-button--whatsapp:has(> img.ts-button-brand-icon) > img.ts-button-brand-icon {
  position: static;
  inset: auto;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  margin: 0;
  transform: none;
}

html body a.ts-button.ts-button--whatsapp:hover:has(> img.ts-button-brand-icon) > img.ts-button-brand-icon {
  transform: scale(1.04);
}

@media (min-width: 761px) {
  html body header.ts-site-header .ts-header-actions > a[href*="wa.me/"]:not(.ts-mobile-header-whatsapp) {
    background: #25d366 !important;
    border: 1px solid #25d366 !important;
    border-radius: 999px !important;
    color: #fff !important;
    box-shadow: none;
    text-shadow: none;
  }

  html body header.ts-site-header .ts-header-actions > a[href*="wa.me/"]:not(.ts-mobile-header-whatsapp):hover {
    background: #20c760 !important;
    border-color: #20c760 !important;
  }

  html body header.ts-site-header .ts-header-actions > a[href*="wa.me/"]:has(> span) {
    display: inline-grid !important;
    grid-template-columns: 18px auto 18px;
    align-items: center;
    column-gap: 7px;
  }

  html body header.ts-site-header .ts-header-actions > a[href*="wa.me/"] > span {
    grid-area: 1 / 2;
    justify-self: center;
    color: #fff !important;
    text-shadow: none;
  }

  html body header.ts-site-header .ts-header-actions > a[href*="wa.me/"] > img {
    grid-area: 1 / 1;
    justify-self: center;
    margin: 0;
    filter: drop-shadow(0 0 1px #07552e) drop-shadow(0 0 .5px #07552e) !important;
  }
}