.payment-progress {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  background: #fff;
  border-radius: 7px;
}

.payment-progress p { margin: 0; }

.payment-dot {
  width: 11px;
  height: 11px;
  margin-top: 8px;
  border-radius: 50%;
  background: #8d9489;
  flex: 0 0 auto;
}

.payment-dot.initializing,
.payment-dot.processing,
.payment-dot.refund_initializing,
.payment-dot.refund_processing {
  background: #c58b35;
  box-shadow: 0 0 0 5px #f4ead9;
  animation: payment-pulse 1.4s ease-in-out infinite;
}

.payment-dot.paid { background: #1f7a4d; box-shadow: 0 0 0 5px #dcefe5; }
.payment-dot.failed,
.payment-dot.refund_failed,
.payment-dot.refund_attention { background: #a64b3c; box-shadow: 0 0 0 5px #f3dfdb; }
.payment-dot.refunded { background: #526b91; box-shadow: 0 0 0 5px #e1e7f1; }

@keyframes payment-pulse { 50% { transform: scale(.72); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .payment-dot { animation: none !important; } }