/* Payment callback pages -- payment-success.html and payment-fail.html.
   Deliberately small: these are pages a member sees once, for a few seconds,
   usually while anxious about whether their card was charged. */

.payment-result-page {
  --result-ink: #112033;
  --result-muted: #5e6c7c;
  --result-line: #dfe4ea;
  max-width: 640px;
  padding-bottom: 40px;
  color: var(--result-ink);
}

.payment-result-panel {
  margin-top: 28px;
  padding: clamp(26px, 6vw, 44px);
  border: 1px solid var(--result-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 40px #07111f0f;
  text-align: center;
}

.payment-result-panel h1 {
  margin: 0 0 12px;
  font-size: clamp(20px, 4.4vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.8px;
}

.payment-result-panel p {
  margin: 0;
  color: var(--result-muted);
  font-size: 14px;
  line-height: 1.75;
}

.payment-result-panel strong { color: var(--result-ink); }

/* A coloured rule rather than a coloured panel: the state should be readable
   at a glance without turning a failure into an alarm. */
.payment-result-panel[data-state="success"] { border-top: 4px solid #1f9d55; }
.payment-result-panel[data-state="pending"] { border-top: 4px solid #d9a800; }
.payment-result-panel[data-state="pending-review"] { border-top: 4px solid #d9a800; }
.payment-result-panel[data-state="error"] { border-top: 4px solid #c53030; }

.payment-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 18px;
  border: 3px solid #e7ebef;
  border-top-color: #d9a800;
  border-radius: 50%;
  animation: neotto-spin 0.9s linear infinite;
}

@keyframes neotto-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .payment-spinner { animation-duration: 3s; }
}

.payment-result-page .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

.payment-result-code {
  margin-top: 14px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px !important;
  color: #8a95a3 !important;
}

.payment-result-legal {
  margin: 20px auto 0;
  padding: 0 8px;
  color: #6c7785;
  font-size: 11px;
  line-height: 1.65;
  text-align: center;
}

/* Set by checkout.js under each buy button on product.html. */
.checkout-message {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.checkout-message:empty { display: none; }
.checkout-message[data-tone="error"] { color: #c53030; }
.checkout-message[data-tone="warn"] { color: #b7791f; }
.checkout-message[data-tone="info"] { color: #5e6c7c; }

/* Pre-payment consent dialog on product.html. A member is a click away from
   paying, so this has to be readable rather than decorative. */

.consent-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: none;
  border-radius: 18px;
  background: #fff;
  color: #112033;
  box-shadow: 0 24px 70px #07111f33;
}

.consent-dialog::backdrop { background: #07111fa8; }

.consent-body { padding: clamp(22px, 5vw, 30px); }

.consent-body h2 {
  margin: 0 0 16px;
  font-size: 20px;
  letter-spacing: -0.6px;
}

.consent-summary {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
  background: #f5f7f9;
}

.consent-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.9;
}

.consent-summary dt { color: #5e6c7c; }
.consent-summary dd { margin: 0; font-weight: 800; text-align: right; }

.consent-notices {
  margin: 0 0 14px;
  padding-left: 18px;
  color: #3e4b5a;
  font-size: 12.5px;
  line-height: 1.75;
}

.consent-notices li + li { margin-top: 7px; }
.consent-notices strong { color: #112033; }

.consent-policy-link {
  margin: 0 0 16px;
  color: #5e6c7c;
  font-size: 12px;
}

/* Set apart from the notices above it: this is a separate agreement, not a
   summary of what was already said. */
.consent-check {
  display: flex;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #cbd3dc;
  border-radius: 12px;
  background: #fff;
  color: #26384b;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.7;
}

.consent-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  cursor: pointer;
}

.consent-check:has(input:checked) {
  border-color: #d9a800;
  background: #fffaea;
}

.consent-error {
  margin: 10px 0 0;
  color: #c53030;
  font-size: 12px;
  line-height: 1.6;
}

.consent-actions {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}

.consent-actions button {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.consent-cancel {
  border: 1px solid #cbd3dc;
  background: #fff;
  color: #4a5766;
}

.consent-confirm {
  border: none;
  background: #d9a800;
  color: #fff;
}

.consent-confirm:hover:not([disabled]) { background: #b88f00; }

.consent-confirm[disabled] {
  background: #e7ebef;
  color: #97a2ae;
  cursor: not-allowed;
}