:root {
  --pma-dark-action-rgb: 37 46 66;
  --pma-dark-action-fill: rgb(var(--pma-dark-action-rgb));
  --pma-photo-action-fill: rgb(var(--pma-dark-action-rgb) / 66%);
  --pma-action-tile: #192131;
  --pma-action-icon: #e1e8f5;
  --pma-light-action-fill: #e2e8f1;
  --pma-light-action-tile: #d4deeb;
  --pma-light-action-ink: #171a1c;
}

body a[data-preview-button],
body .pma-nr-search button.pma-nr-button,
body :is(#forminator-module-29946, .forminator-ui):is(#forminator-module-29946, form)[id^="forminator-module-"].forminator-custom-form button.forminator-button-submit {
  --preview-blue: #153eff;
  --preview-navy: #0d133d;
  --preview-button-bg: var(--pma-light-action-fill);
  --preview-button-ink: var(--pma-light-action-ink);
  --preview-tile-bg: var(--pma-light-action-tile);
  --preview-tile-ink: var(--pma-light-action-ink);
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px !important;
  min-height: 54px !important;
  height: auto !important;
  max-width: 100%;
  box-sizing: border-box !important;
  padding: 8px 8px 8px 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--preview-button-bg) !important;
  color: var(--preview-button-ink) !important;
  font: 600 15px/18px "PMA Manrope", Manrope, Arial, sans-serif !important;
  text-align: start;
  text-transform: none !important;
  white-space: normal !important;
  text-decoration: none !important;
}
body a[data-preview-button="inverse"] {
  --preview-button-bg: #fff;
  --preview-button-ink: var(--preview-navy);
  --preview-tile-bg: var(--preview-blue);
  --preview-tile-ink: #fff;
}

body a[data-preview-button].pma-nav__feature-cta {
  --preview-button-bg: var(--preview-blue);
  --preview-button-ink: #fff;
  --preview-tile-bg: #fff;
  --preview-tile-ink: var(--preview-blue);
}

/* Finder cards already have a pale blue surface. */
body .finder-card a[data-preview-button].finder-button {
  --preview-button-bg: #fff;
  --preview-tile-bg: var(--pma-light-action-fill);
}

/* Use the quiet palette for resource links. Keep blue on the lead action in a group. */
body .pma-nr-main a[data-preview-button].pma-nr-button--light,
body .ptv-resource-band a[data-preview-button].ptv-button-light {
  --preview-button-bg: var(--pma-light-action-fill);
  --preview-button-ink: var(--pma-light-action-ink);
  --preview-tile-bg: var(--pma-light-action-tile);
  --preview-tile-ink: var(--pma-light-action-ink);
}

body .pma-nr-stories a[data-preview-button].pma-nr-button--light,
body .pma-ptv .ptv-team-grid a[data-preview-button].ptv-button-blue,
body .ptv-resource-band a[data-preview-button].ptv-button-blue,
body .pma-ss-contact-directions a[data-preview-button].pma-ss-link {
  --preview-tile-bg: var(--preview-blue);
  --preview-tile-ink: #fff;
}

/* Match the specificity of the original page styles, including hover. */
body.pma-ptv-seo-page .pma-ptv a[data-preview-button].ptv-button-blue,
body.page-id-23966 .pma-ptv a[data-preview-button].ptv-button-blue,
body:is(.page-id-15585, .page-id-23470) .pma-compass .compass-resource-card a[data-preview-button].compass-button-orange,
body .pma-ss-native.pma-ss-contact-directions a[data-preview-button].pma-ss-link {
  background: var(--preview-button-bg) !important;
  color: var(--preview-button-ink) !important;
}

/* Use the section palette for actions over dark surfaces and photographs. */
body :where(
  .pma-home-hero, .pma-home-product-card, .pma-home-native-promo--kiosk,
  .pma-home-chemical__card, .pma-home-feature__card, .pma-home-contact,
  .pma-uniform-footer, .pma-liquid-cta, .pma-hero-photo-background,
  .pma-toc-experience, .hg-experience, .am-experience, .ta-experience,
  .bf-experience, .mf-experience, .fe-experience, .cs-experience, .refresh-experience,
  .rho-experience-banner, .accu-experience-banner, .turn-experience-banner,
  .fe-dark, .refresh-dark, .aqua-dark, .accu-dark, .bf-dark, .mf-dark, .dek-dark, .ptv-dark,
  .compass-card-dark, .id200-card-dark, .pma-service-dark, .pma-ss-black-card,
  .pma-ss-reagents-manufacturing, .pma-ss-reagents-photo, .pma-home-native-promo--effluent
) a[data-preview-button] {
  --preview-button-bg: var(--pma-dark-action-fill);
  --preview-button-ink: #fff;
  --preview-tile-bg: var(--pma-action-tile);
  --preview-tile-ink: var(--pma-action-icon);

  &:not(:focus-visible) { box-shadow: none !important; }
}

body .pma-uniform-footer a.pma-uniform-footer__cta[data-preview-button] {
  --preview-button-bg: var(--pma-action-tile);
  --preview-tile-bg: var(--pma-dark-action-fill);
}

/* Keep Reagents button colours steady over the page's legacy hover rules. */
body.page-id-15556 .content :is(a.pma-ss-button, a.qbutton)[data-preview-button] {
  letter-spacing: normal !important;
  transition: none !important;
}

body.page-id-15556 .content :is(a.pma-ss-button, a.qbutton)[data-preview-button]:is(:hover, :focus-visible) {
  background: var(--preview-button-bg) !important;
  color: var(--preview-button-ink) !important;
}

.pma-ss-reagents-intro .pma-ss-inner > p:has(> a + a) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

/* Leave the solid slate fill available where backdrop filtering is unsupported. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body :where(
    .pma-home-product-card, .pma-home-native-promo--kiosk,
    .pma-home-chemical__card, .pma-home-feature__card, .pma-hero-photo-background,
    .pma-toc-experience, .hg-experience, .am-experience, .ta-experience,
    .bf-experience, .mf-experience, .fe-experience, .cs-experience, .refresh-experience,
    .rho-experience-banner, .accu-experience-banner, .turn-experience-banner,
    .pma-ss-reagents-photo
  ) a[data-preview-button]:not([data-preview-phone]) {
    --preview-button-bg: var(--pma-photo-action-fill);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    backdrop-filter: blur(12px) saturate(115%);
  }

  /* On phones the homepage hero action sits below the photograph. */
  @media (min-width: 768px) {
    body .pma-home-hero a[data-preview-button] {
      --preview-button-bg: var(--pma-photo-action-fill);
      -webkit-backdrop-filter: blur(12px) saturate(115%);
      backdrop-filter: blur(12px) saturate(115%);
    }
  }
}

.pma-home-native-promo--effluent {
  --pma-action-tile: #432661;
  --pma-action-icon: #e1d1ff;
}

.pma-home-hero {
  --pma-action-tile: #575d6b;
  --pma-action-icon: #fff;
}

:where(.pma-home-native-promo--kiosk, .pma-liquid-cta) {
  --pma-action-tile: #22374e;
  --pma-action-icon: #d5e6f8;
}

body a[data-preview-button].pma-home-feature__cta-button {
  --preview-button-bg: var(--preview-navy);
  --preview-button-ink: #fff;
  --preview-tile-bg: var(--preview-blue);
  --preview-tile-ink: #fff;
}

.pma-home-feature__content h4 a.pma-home-feature__title-link {
  color: inherit;
  text-decoration: none;
}

.pma-home-feature__content h4 a.pma-home-feature__title-link:is(:hover, :focus-visible) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .14em;
}

body a[data-preview-phone] {
  --preview-button-bg: #000;
  --preview-button-ink: #fff;
  --preview-tile-bg: #242731;
  --preview-tile-ink: #fff;
}

body .pma-contact-direct a[data-preview-phone],
body .pma-contact-options-light a.pma-contact-option-button[data-preview-button] {
  --preview-button-bg: var(--pma-light-action-fill);
  --preview-button-ink: var(--pma-light-action-ink);
  --preview-tile-bg: var(--pma-light-action-tile);
  --preview-tile-ink: var(--pma-light-action-ink);
}

body.page-id-1452 .pma-contact-options-light a.pma-contact-option-button[data-preview-button]:is(:hover, :focus-visible) {
  background: var(--preview-button-bg) !important;
  color: var(--preview-button-ink) !important;
}

.pma-ss-contact-directions .pma-ss-soft-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pma-ss-contact-directions .pma-ss-soft-card > p:has(> .pma-ss-link) {
  margin-top: auto;
}

.pma-nav a.pma-nav__phone {
  background: #000 !important;
  color: #fff !important;
  direction: ltr;
}

.pma-nav a.pma-nav__phone > svg { order: 1; }

body a[data-preview-button]::before, body a[data-preview-button]::after { content: none !important; }
body :is(a[data-preview-button], .forminator-custom-form button.forminator-button-submit, .pma-nr-search button.pma-nr-button):focus-visible {
  outline: 3px solid #153eff;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}
/* Keep the native submit controls and their script-managed labels intact. */
body :is(form[id^="forminator-module-"].forminator-custom-form button.forminator-button-submit, .pma-nr-search button.pma-nr-button)::after {
  content: "";
  flex: 0 0 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--preview-tile-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
}
body :is(form[id^="forminator-module-"].forminator-custom-form button.forminator-button-submit, .pma-nr-search button.pma-nr-button):disabled {
  opacity: .65;
  cursor: not-allowed;
}
.preview-button-label { min-width: 0; line-height: 18px !important; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  body a[data-preview-button]:not(.pma-contact-direct a[data-preview-phone]) {
    gap: 8px !important;
    padding-inline: 12px 8px !important;
  }
  .aqua-application a[data-preview-button] { gap: 5px !important; padding-inline: 7px 4px !important; }
  .aqua-application .preview-button-label { font-size: 14px !important; }
}
body a[data-preview-button] .preview-button-marker {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--preview-tile-bg);
  color: var(--preview-tile-ink);
}
body a[data-preview-button] .preview-button-marker svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[dir="rtl"] a[data-preview-button]:not([data-preview-phone]) .preview-button-marker { scale: -1 1; }
@media (prefers-reduced-motion: no-preference) {
  .pma-nav .pma-nav__contact > svg { transition: transform 180ms ease; }
  .pma-nav .pma-nav__contact:focus-visible > svg { transform: translateX(3px); }
  .pma-nav .pma-nav__phone:focus-visible > svg { animation: preview-phone-ring 520ms ease-in-out; }
  body :is(form[id^="forminator-module-"].forminator-custom-form button.forminator-button-submit, .pma-nr-search button.pma-nr-button)::after {
    transition: background-position 180ms ease;
  }
  body :is(form[id^="forminator-module-"].forminator-custom-form button.forminator-button-submit, .pma-nr-search button.pma-nr-button):enabled:focus-visible::after {
    background-position: calc(50% + 3px) center;
  }
  .preview-button-marker svg { transition: transform 180ms ease; }
  a[data-preview-button]:not([data-preview-phone]):focus-visible .preview-button-marker svg { transform: translateX(3px); }
  a[data-preview-phone]:focus-visible .preview-button-marker svg { animation: preview-phone-ring 520ms ease-in-out; }
  @media (hover: hover) and (pointer: fine) {
    .pma-nav .pma-nav__contact:hover > svg { transform: translateX(3px); }
    .pma-nav .pma-nav__phone:hover > svg { animation: preview-phone-ring 520ms ease-in-out; }
    body :is(form[id^="forminator-module-"].forminator-custom-form button.forminator-button-submit, .pma-nr-search button.pma-nr-button):enabled:hover::after {
      background-position: calc(50% + 3px) center;
    }
    a[data-preview-button]:not([data-preview-phone]):hover .preview-button-marker svg { transform: translateX(3px); }
    a[data-preview-phone]:hover .preview-button-marker svg { animation: preview-phone-ring 520ms ease-in-out; }
  }
}
@keyframes preview-phone-ring {
  0%, 100% { transform: rotate(0); }
  14%, 42% { transform: rotate(-16deg); }
  28%, 56% { transform: rotate(16deg); }
  70% { transform: rotate(-9deg); }
  84% { transform: rotate(6deg); }
}
.pma-ss-contact-award .pma-ss-grid:has(> .preview-award-section) {
  align-items: center;
}
body.page-id-1452 .pma-ss-contact-award:has(.preview-award-section) {
  background: #f6f8fb;
}
body.page-id-1452 .pma-ss-contact-award:has(.preview-award-section) :is(h2, h3, p) {
  color: #0d133d;
}
.preview-award-section { min-width: 0; }
.pma-ss-contact-award .preview-award-section .preview-award {
  display: grid;
  justify-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.preview-award-section .preview-award-score {
  display: grid;
  color: #153eff;
  margin-bottom: 12px;
  font: 600 clamp(62px, 8vw, 100px)/1 "PMA Google Sans", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}
.preview-award-score::before, .preview-award-score > span { grid-area: 1 / 1; }
.preview-award-score::before { content: "93%"; visibility: hidden; }
.pma-ss-contact-award .preview-award-section .preview-award p { max-width: 54ch; margin: 10px 0 0; color: #242835; }
.preview-award-section .preview-award p a { color: #153eff; text-decoration: underline; white-space: nowrap; }
