<div class="radikalwp-steps"><div class="radikalwp-step radikalwp-step-done"><span>۱<//span><i>سبد خرید<//i><//div><div class="radikalwp-step radikalwp-step-cur"><span>۲<//span><i>پرداخت<//i><//div><div class="radikalwp-step"><span>۳<//span><i>تأیید نهایی<//i><//div><//div>

.radikalwp-steps { display: inline-flex; align-items: center; font-family: inherit; }
.radikalwp-step { display: flex; align-items: center; }
.radikalwp-step span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 14px;
  font-weight: 800;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 50%;
  transition: all .3s ease;
}
.radikalwp-step i { font-style: normal; font-size: 12.5px; color: #64748b; margin: 0 10px; white-space: nowrap; }
.radikalwp-step::after {
  content: '';
  width: 46px;
  height: 2px;
  background: #e2e8f0;
}
.radikalwp-step:last-child::after { display: none; }
.radikalwp-step-done span { background: #10b981; color: #fff; }
.radikalwp-step-done i { color: #10b981; font-weight: 700; }
.radikalwp-step-done::after { background: #10b981; }
.radikalwp-step-cur span { background: #4f46e5; color: #fff; box-shadow: 0 0 0 5px rgba(79, 70, 229, .15); }
.radikalwp-step-cur i { color: #4f46e5; font-weight: 700; }