/* Customer-only, optional presentation. Base content is never hidden by motion. */
.client-space :where(button, a.button):not(:disabled):not([aria-disabled="true"]) {
  transition: transform 140ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.client-space :where(button, a.button):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(2px);
}
.client-space .progress-dots .step-number {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* The payment UI owns aria-busy and this decorative, aria-hidden spinner.
   A merely disabled button is not necessarily loading and receives no spinner. */
.client-space .button-spinner { display: none; }
.client-space button[aria-busy="true"] .button-spinner {
  display: inline-block;
  flex: 0 0 18px;
  inline-size: 18px;
  block-size: 18px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  border-radius: 50%;
  vertical-align: -3px;
  animation: spg-pending-turn 800ms linear infinite;
}
@keyframes spg-pending-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .client-space *, .client-space *::before, .client-space *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .client-space :where(button, a.button):active { transform: none !important; }
}