:root {
  --whatsapp-green: #25d366;
  --whatsapp-ink: #063b24;
  --whatsapp-hover: #20bd5a;
}

[data-whatsapp-control] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

[data-whatsapp-control] > span { min-width: 0; }
[data-whatsapp-control] > span[aria-hidden="true"] { display: none; }

[data-whatsapp-control] .whatsapp-control__icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  fill: currentColor !important;
  stroke: none !important;
  color: inherit !important;
}

.header-cta[data-whatsapp-control] .whatsapp-control__icon {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px !important;
}

@media (max-width: 600px) {
  .drive-share[data-whatsapp-control],
  [data-guide-share][data-whatsapp-control],
  [data-drive-share][data-whatsapp-control] {
    padding-inline: 8px !important;
    gap: 6px !important;
  }
}

/* Match the destination, so other calls to action retain their page colors. */
a:is([href*="wa.me/"], [href*="api.whatsapp.com/"], [href*="web.whatsapp.com/"], [href^="whatsapp:"]) {
  color: var(--whatsapp-ink) !important;
  text-decoration-color: currentColor !important;
}

a:is([href*="wa.me/"], [href*="api.whatsapp.com/"], [href*="web.whatsapp.com/"], [href^="whatsapp:"]):is(
  .header-cta, .second-pair-cta, .replacement-story-cta, .drive-share,
  .add-consultation, .button, .av-button, .guide-consult, .guide-share,
  .custom-flow__cta, .repair-dialog__cta, .promo-band__cta, .offer-card__cta,
  .secondary, [data-stage-contact], [data-guide-wa], [data-guide-share], [data-drive-share]
),
:is(.dialog-actions, .lens-detail__actions, .visit-actions, .services-hub__actions, .hero-actions) > a:is([href*="wa.me/"], [href*="api.whatsapp.com/"]),
.cart-send {
  background: var(--whatsapp-green) !important;
  border-color: var(--whatsapp-green) !important;
  color: var(--whatsapp-ink) !important;
}

a:is([href*="wa.me/"], [href*="api.whatsapp.com/"], [href*="web.whatsapp.com/"], [href^="whatsapp:"]):is(
  .header-cta, .second-pair-cta, .replacement-story-cta, .drive-share,
  .add-consultation, .button, .av-button, .guide-consult, .guide-share,
  .custom-flow__cta, .repair-dialog__cta, .promo-band__cta, .offer-card__cta,
  .secondary, [data-stage-contact], [data-guide-wa], [data-guide-share], [data-drive-share]
):hover,
:is(.dialog-actions, .lens-detail__actions, .visit-actions, .services-hub__actions, .hero-actions) > a:is([href*="wa.me/"], [href*="api.whatsapp.com/"]):hover,
.cart-send:hover {
  background: var(--whatsapp-hover) !important;
  border-color: var(--whatsapp-hover) !important;
}

a:is([href*="wa.me/"], [href*="api.whatsapp.com/"], [href*="web.whatsapp.com/"], [href^="whatsapp:"]) :is(span, small, strong, svg),
.cart-send :is(span, svg) {
  color: inherit !important;
}

a:is([href*="wa.me/"], [href*="api.whatsapp.com/"], [href*="web.whatsapp.com/"], [href^="whatsapp:"]):focus-visible,
.cart-send:focus-visible {
  outline: 2px solid var(--whatsapp-ink) !important;
  outline-offset: 4px;
}