<ol class="cbgp-flow" aria-label="Checkout progress">
  <li class="is-done">
    <span class="cbgp-flow-num">1</span><span class="cbgp-flow-label">Cart</span>
  </li>
  <li class="is-done">
    <span class="cbgp-flow-num">2</span><span class="cbgp-flow-label">Address</span>
  </li>
  <li class="is-current" aria-current="step">
    <span class="cbgp-flow-num">3</span><span class="cbgp-flow-label">Payment</span>
  </li>
  <li><span class="cbgp-flow-num">4</span><span class="cbgp-flow-label">Review</span></li>
</ol>

.cbgp-flow {
  display: inline-flex; gap: 0;
  list-style: none; padding: 0; margin: 0;
}
.cbgp-flow li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,225,230,0.4);
  position: relative;
}
.cbgp-flow li:not(:last-child) { padding-right: 56px; }
.cbgp-flow li:not(:last-child)::after {
  content: '';
  position: absolute; right: 8px; top: 50%;
  width: 36px; height: 2px;
  background: rgba(255,255,255,0.08);
  transform: translateY(-50%);
  border-radius: 1px;
}
.cbgp-flow li.is-done::after {
  background:
    linear-gradient(90deg, #00ffe0 0%, #ff5af1 100%) 0% 0% / 200% 100%;
  animation: cbgp-flow-shift 2.4s linear infinite;
  box-shadow: 0 0 8px rgba(0,255,224,0.5);
}
@keyframes cbgp-flow-shift { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }
.cbgp-flow-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0a0d18;
  border: 1.5px solid rgba(255,255,255,0.1);
  font: 800 11px/1 ui-monospace, monospace;
  color: rgba(220,225,230,0.4);
  transition: all 0.3s;
}
.cbgp-flow li.is-done .cbgp-flow-num {
  background: linear-gradient(135deg, #00ffe0, #00b8a8);
  border-color: #00ffe0;
  color: #001f1c;
  box-shadow: 0 0 10px rgba(0,255,224,0.4);
}
.cbgp-flow li.is-current .cbgp-flow-num {
  background: linear-gradient(135deg, #ff5af1, #c43cb8);
  border-color: #ff5af1;
  color: #1a0518;
  box-shadow: 0 0 0 4px rgba(255,90,241,0.18), 0 0 16px rgba(255,90,241,0.4);
  color: #fff;
}
.cbgp-flow li.is-current { color: #ff5af1; }
.cbgp-flow li.is-done    { color: rgba(0,255,224,0.85); }
@media (prefers-reduced-motion: reduce) {
  .cbgp-flow li.is-done::after { animation: none; }
}