/* 05.09.26 06:50 AM / 06:50 — edited by Codex — scope responsive payment layout without changing shared components */
.payment-page .auth { max-width: 32rem; }
.payment-page h1 { font-size: clamp(var(--text-xl), 6vw, var(--text-3xl)); }
.payment-page .auth-form { padding: var(--space-5); }
.payment-page .btn { white-space: normal; line-height: var(--leading-normal); }
.payment-page .payment-home { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; }
.payment-page .payment-status { min-height: 1.5em; overflow-wrap: anywhere; }
.payment-page .payment-status a { text-decoration: underline; }
/* The price sits beside the purchase action. The action keeps its place while it works: the shared disabled style
   greys it, and a spinner shows beside "Processing…"; the site-wide reduced-motion rule stills the spinner. */
.payment-page .payment-panel { display: grid; gap: var(--space-4); padding: var(--space-5); }
.payment-page .payment-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.payment-page .payment-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.payment-page .payment-again { display: grid; gap: var(--space-4); }
.payment-page .payment-price[hidden], .payment-page .btn[hidden], .payment-page .field[hidden],
.payment-page .payment-terms[hidden], .payment-page .payment-for[hidden], .payment-page .payment-link[hidden] { display: none; }
.payment-page .payment-price__amount { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); }
.payment-page .payment-price__term { color: var(--color-text-muted); }
/* The purchase's terms and its buyer sit under the price, muted like the price's period. */
.payment-page .payment-terms, .payment-page .payment-for { margin: 0; color: var(--color-text-muted); overflow-wrap: anywhere; }
/* A deliberate new purchase from the in-progress view: a quiet text control, not a second main action. */
.payment-page .payment-link {
  justify-self: start; padding: 0; border: 0; background: none;
  color: var(--color-accent); font: inherit; text-decoration: underline; cursor: pointer;
}
.payment-page .payment-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.payment-page .payment-links a { text-decoration: underline; }
.payment-page .payment-spinner {
  display: none; flex: none; width: 1em; height: 1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full);
  animation: payment-spin 0.8s linear infinite;
}
.payment-page .btn[aria-busy="true"] { cursor: progress; }
.payment-page .btn[aria-busy="true"] .payment-spinner { display: inline-block; }
@keyframes payment-spin { to { transform: rotate(360deg); } }