:root {
--track: var(--light-gray);
--fill: var(--dark-gray);
--circle-bg: var(--white);
--circle-border: var(--gray);
--text: var(--primary);
--muted: var(--text-muted);
--circle-size: 32px;
--line-height: 3px;
--gap: 0.75rem;
--steps: 5;
}

.steps { 
      list-style: none; 
      display: grid; 
      grid-template-columns: repeat(var(--steps), 1fr); 
      position: relative; 
      margin: 1.25rem 0; 
      padding: 0; 
      gap:5px 
}

.steps::before { 
      content: ""; 
      position: absolute; 
      top: calc(var(--circle-size) / 2 - var(--line-height) / 2); 
      left: calc(var(--circle-size) / 2); 
      right: calc(var(--circle-size) / 2); 
      height: var(--line-height); 
      background: var(--circle-border); 
      border-radius: 999px; 
}

.steps::after { 
      content: ""; 
      position: absolute; 
      top: calc(var(--circle-size) / 2 - var(--line-height) / 2); 
      left: calc(var(--circle-size) / 2); 
      height: var(--line-height); 
      width: calc((var(--current, 1) - 1) / (var(--steps) - 1) * (100% - var(--circle-size))); 
      background: var(--fill); 
      border-radius: 999px; 
      transition: width 300ms ease; 
}

.step { 
      text-align: center; 
      position: relative; 
      z-index: 1; 
}

.circle { 
      width: var(--circle-size); 
      height: var(--circle-size); 
      display: grid; 
      place-items: center; 
      margin: 0 auto var(--gap); 
      border-radius: 50%; 
      border: 2px solid var(--circle-border); 
      background: var(--circle-bg); 
      color: var(--muted); 
      font-weight: 700; 
}

.checkout-progress .label { 
      display: block; 
      font-size: 0.9rem; 
      color: var(--muted); 
      max-width: 9ch; 
      margin: 0 auto; 
}

.checkout-progress .visited a .circle { 
      border-color: var(--fill); 
      color: var(--fill); 
}

.checkout-progress .visited a .label { 
      color: var(--fill); 
      font-weight: 600; 
}

.checkout-progress .current .circle { 
      border-color: var(--primary); 
      color: var(--primary); 
}

.checkout-progress .current .label { 
      color: var(--text); 
      font-weight: 600; 
}

.checkout-progress a { 
      text-decoration: none; color: inherit; 
}

.checkout-progress a:hover .circle:before {
      content: "";
      background-color: var(--light-gray);
      position: absolute;
      width: calc(var(--circle-size) + 15px);
      height: calc(var(--circle-size) + 15px);
      border-radius: 50%;
      z-index: -1;
}

@media screen and (max-width: 430px) {
	.checkout-progress .label { 
            font-size: 0.8rem; 
      }
}