/* Payment result page */

[hidden] { display: none !important; }

/* Payment result: on phones the key and actions sit in the lower half, near the thumb */
.pay-main {
  display: flex; flex-direction: column; gap: var(--space-6);
  min-height: calc(100dvh - var(--header-h));
  padding-block: var(--space-8);
  max-width: calc(560px + 2 * var(--space-4));
}
.pay-head > * + * { margin-top: var(--space-3); }
.pay-status { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text-muted); }
.pay-keybox { margin-top: auto; }
.pay-keybox > * + * { margin-top: var(--space-3); }
.pay-key {
  font-size: 22px; font-weight: 700; letter-spacing: .04em;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  user-select: all;
  overflow-wrap: anywhere;
}
.pay-copy { width: 100%; }
.pay-manual { font-weight: 600; }
.pay-actions { flex-direction: column; }
.pay-actions .btn { width: 100%; }
.pay-keybox[hidden] + .pay-actions { margin-top: auto; }
@media (min-width: 600px) {
  .pay-main { min-height: 0; padding-block: var(--space-12); }
  .pay-actions { flex-direction: row; }
  .pay-actions .btn { width: auto; }
  .pay-keybox[hidden] + .pay-actions, .pay-keybox { margin-top: 0; }
}
[data-pay-state="paid"] .pay-head h1 { color: var(--color-success); }
[data-pay-state="declined"] .pay-head h1 { color: var(--color-danger); }

.spinner {
  flex: none;
  width: 18px; height: 18px; margin-top: 3px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 50%;
}
.spinner[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin 900ms linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }