.payment-modal { position: relative; text-align: center; }

.payment-state { display: none; }
.payment-state.is-active { display: block; animation: fade-in 0.35s var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.payment-modal__gateway {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-md);
}

.payment-modal h3 { font-size: 1.5rem; text-align: center; }
.payment-modal__lede { margin-top: 0.5rem; text-align: center; font-size: 0.92rem; }

.payment-modal__amount {
  margin: var(--space-lg) 0;
  padding: 1.1rem 1.4rem;
  background: var(--color-paper-dim);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.payment-modal__amount strong { font-family: var(--font-display); font-size: 1.3rem; }

#paymentForm { text-align: left; display: flex; flex-direction: column; gap: var(--space-md); }
#paymentForm .btn { margin-top: 0.2rem; }

.payment-modal__lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--color-ink-faint);
  margin-top: var(--space-sm);
}

.payment-loading, .payment-result {
  padding-block: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.payment-loading h3 { margin-top: 0.5rem; }
.payment-loading .progress-dots { margin-top: 0.3rem; }

.payment-result__icon {
  width: 4rem; height: 4rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.payment-result__icon--success { background: var(--color-success); }
.payment-result__icon--failed { background: var(--color-danger); }
.payment-result h3 { margin-top: 0.3rem; }
.payment-result__ref { font-size: 0.85rem; color: var(--color-ink-soft); }
.payment-result .btn { margin-top: 0.6rem; }