/* Light blue sampled from the existing MM Oxygen logo. */
body.mmox-platform-active {
  --mmox-blue: #00a8f8;
  --mmox-blue-hover: #24b7ff;
  --mmox-blue-ink: #0065a8;
  --mmox-blue-ink-strong: #004f87;
  --mmox-on-blue: #ffffff;
  --mmox-blue-soft: #edf8ff;
  --mmox-blue-hover-soft: #dff2ff;
  --mmox-blue-line: #bde5ff;
  --mmox-blue-border-bright: #5ac8ff;
  --mmox-blue-on-dark: #8ed9ff;
  --mmox-blue-dark-surface: #123b5c;
  --mmox-blue-dark-line: #215c85;
  --mmox-blue-shadow: #00a8f820;
  --mmox-blue-focus: #00a8f855;
}

/* White lettering and icons on filled brand-blue actions. */
body.mmox-platform-active .mmox-view .mmox-btn,
body.mmox-platform-active .mmox-view .woocommerce a.button,
body.mmox-platform-active .mmox-view .woocommerce button.button,
body.mmox-platform-active .mmox-view .woocommerce input.button,
body.mmox-platform-active .mmox-view .mmox-product-form button.mmox-btn.single_add_to_cart_button,
body.mmox-platform-active .mmox-header-call,
body.mmox-platform-active .mmox-header-phone,
body.mmox-platform-active .mmox-support-strip a,
body.mmox-platform-active .mmox-view .mmox-mode-tabs > button.is-active,
body.mmox-platform-active .mmox-view .mmox-category-chips a.is-active,
body.mmox-platform-active .mmox-view .mmox-category-chips a[aria-current="page"],
body.mmox-platform-active .mmox-support-page .mmox-support-action,
body.mmox-platform-active .mmox-support-notice > a,
body.mmox-platform-active .mmox-support-notice-icon,
body.mmox-platform-active .mmox-support-step-number,
body.mmox-platform-active .mmox-steps article > span,
body.mmox-platform-active .mmox-view .mmox-card-tag {
  background: var(--mmox-blue);
  border-color: var(--mmox-blue);
  color: var(--mmox-on-blue);
}

body.mmox-platform-active .mmox-view .mmox-btn:hover,
body.mmox-platform-active .mmox-view .mmox-product-form button.mmox-btn.single_add_to_cart_button:hover,
body.mmox-platform-active .mmox-view .mmox-product-form button.mmox-btn.single_add_to_cart_button:focus,
body.mmox-platform-active .mmox-view .woocommerce a.button:hover,
body.mmox-platform-active .mmox-view .woocommerce button.button:hover,
body.mmox-platform-active .mmox-header-call:hover,
body.mmox-platform-active .mmox-header-phone:hover,
body.mmox-platform-active .mmox-support-strip a:hover,
body.mmox-platform-active .mmox-support-page .mmox-support-action:hover,
body.mmox-platform-active .mmox-support-notice > a:hover {
  background: var(--mmox-blue-hover);
  border-color: var(--mmox-blue-hover);
  color: var(--mmox-on-blue);
}

body.mmox-platform-active .mmox-view .mmox-btn-secondary,
body.mmox-platform-active .mmox-view .mmox-whatsapp {
  background: var(--mmox-blue-soft);
  border-color: var(--mmox-blue-line);
  color: var(--mmox-blue-ink);
}

body.mmox-platform-active .mmox-view .mmox-btn-secondary:hover,
body.mmox-platform-active .mmox-view .mmox-whatsapp:hover {
  background: var(--mmox-blue-hover-soft);
  border-color: var(--mmox-blue-border-bright);
  color: var(--mmox-blue-ink-strong);
}

body.mmox-platform-active .mmox-view .mmox-steps article > span {
  background: var(--mmox-blue-soft);
  color: var(--mmox-blue-ink);
}

body.mmox-platform-active .mmox-view .mmox-steps article:last-child > span {
  background: var(--mmox-blue);
  color: var(--mmox-on-blue);
}

@media (max-width: 767px) {
  body.mmox-platform-active .mmox-header-call,
  body.mmox-platform-active .mmox-header-phone {
    background: var(--mmox-blue-soft);
    color: var(--mmox-blue-ink);
  }
}