/* One quiet receipt for checkout's pending, confirmed and delayed states. */
.payment-confirmation { min-height: calc(100svh - var(--space-9) * 2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding-block: var(--space-7); text-align: center; }
.payment-confirmation__stage { position: relative; display: grid; place-items: center; width: calc(var(--space-9) * 3); max-width: 100%; height: calc(var(--space-9) * 2); }
.payment-confirmation__halo { position: absolute; inset: calc(var(--space-5) * -1); background: var(--halo); opacity: .4; transition: opacity var(--dur-slow) var(--ease-out); }
.payment-confirmation__crown { position: relative; z-index: 1; }
.payment-confirmation__copy { display: grid; gap: var(--space-4); max-width: 32rem; }
.payment-confirmation__copy .page-head { margin: 0; }
.payment-confirmation__eyebrow { margin: 0; color: var(--text-muted); font: var(--type-label); }
.payment-confirmation__description { margin: 0; color: var(--text-muted); font: var(--type-body); text-wrap: pretty; }
.payment-confirmation__status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); min-height: var(--space-5); color: var(--text-subtle); font: var(--type-label); }
.payment-confirmation__dots { display: flex; align-items: center; gap: var(--space-1); }
.payment-confirmation__dots span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--accent); animation: pulse calc(var(--dur-count) * 2) var(--ease-out) infinite; }
.payment-confirmation__dots span:nth-child(2) { animation-delay: var(--dur-base); }
.payment-confirmation__dots span:nth-child(3) { animation-delay: calc(var(--dur-base) * 2); }
.payment-confirmation__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: min(100%, 16rem); }
.payment-confirmation [hidden] { display: none; }
.payment-confirmation[data-state="confirmed"] .payment-confirmation__halo { opacity: .8; }
.payment-confirmation[data-state="confirmed"] .payment-confirmation__status { display: none; }
.payment-confirmation[data-state="delayed"] .payment-confirmation__status { color: var(--text-muted); }
@media (max-width: 600px) {
  .payment-confirmation { min-height: calc(100svh - var(--space-9) * 2); padding-block: var(--space-6); gap: var(--space-4); }
  .payment-confirmation__stage { height: calc(var(--space-8) * 2); }
}