<div class="radikalwp-cp-steps"><div class="radikalwp-cp-steps-i radikalwp-cp-steps-done"><i>✓<//i><div><b>ثبت سفارش<//b><span>۲۸ شهریور — ۱۰:۳۰<//span><//div><//div><div class="radikalwp-cp-steps-i radikalwp-cp-steps-cur"><i>۲<//i><div><b>پردازش و بسته‌بندی<//b><span>در حال انجام…<//span><//div><//div><div class="radikalwp-cp-steps-i"><i>۳<//i><div><b>تحویل به پست<//b><span>در انتظار<//span><//div><//div><//div>

.radikalwp-cp-steps { display: grid; gap: 0; width: 260px; }
.radikalwp-cp-steps-i { display: flex; gap: 12px; position: relative; padding-bottom: 22px; }
.radikalwp-cp-steps-i:last-child { padding-bottom: 0; }
.radikalwp-cp-steps-i::before {
  content: '';
  position: absolute;
  top: 26px;
  right: 12px;
  bottom: 4px;
  width: 2px;
  background: #e2e8f0;
}
.radikalwp-cp-steps-i:last-child::before { display: none; }
.radikalwp-cp-steps-i i {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: normal;
  background: #f1f5f9;
  color: #94a3b8;
  z-index: 1;
}
.radikalwp-cp-steps-i b { display: block; font-size: 12.5px; color: #0f172a; }
.radikalwp-cp-steps-i span { font-size: 10.5px; color: #94a3b8; }
.radikalwp-cp-steps-done i { background: #10b981; color: #fff; }
.radikalwp-cp-steps-done::before { background: #10b981; }
.radikalwp-cp-steps-cur i { background: #4f46e5; color: #fff; box-shadow: 0 0 0 4px #eef2ff; }