/* Payment page (pay.html). Form fields reuse .form-row / .form-field / .input-wrap from styles.css. */
.pay-form {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 32px;
  text-align: left;
}
.pay-form .btn { width: 100%; justify-content: center; }
.pay-form .btn:disabled { opacity: 0.6; pointer-events: none; }
.pay-message {
  padding: 12px 16px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 14px;
  line-height: 1.5;
}
.pay-secure { font-size: 13px; color: var(--text-muted); text-align: center; }
.pay-secure a { color: inherit; text-decoration: underline; }
.pay-id { font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; margin-bottom: 28px; }
.pay-id strong { color: var(--text); }
@media (max-width: 600px) {
  .pay-form .form-row { grid-template-columns: 1fr; }
}