.step-indicator-wrapper {

  position: relative;

  margin: 40px 0;

  display: flex;

  justify-content: center;

}



.step-indicator {

  display: flex;

  position: relative;

  width: 100%;

  max-width: 500px;

  justify-content: space-between;

  align-items: center;

}



.step-indicator::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 5%;

  right: 5%;

  height: 4px;

  background: #e0e0e0;

  z-index: 0;

}



.step-bullet {

  z-index: 1;

  background: #fff;

  border: 3px solid #d1d5db; /* gray-300 */

  width: 40px;

  height: 40px;

  border-radius: 50%;

  color: #6b7280; /* gray-500 */

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.4s ease;

  position: relative;

}



.step-bullet.active,

.step-bullet.completed {

  border-color: #10b981; /* green-500 */

  background-color: #10b981;

  color: white;

}



.step-bullet.completed::after {

  content: "✓";

  position: absolute;

  font-size: 16px;

  font-weight: bold;

}



.step-number {

  z-index: 2;

}



@media (max-width: 576px) {

  .step-bullet {

    width: 30px;

    height: 30px;

    font-size: 14px;

  }

}





.step-bullet.active::before {

  content: "";

  position: absolute;

  top: -6px;

  left: -6px;

  right: -6px;

  bottom: -6px;

  border-radius: 50%;

  border: 2px solid #10b981;

  animation: pulse-ring 1.5s infinite;

  z-index: -1;

}



@keyframes pulse-ring {

  0% {

    transform: scale(0.9);

    opacity: 0.5;

  }

  100% {

    transform: scale(1.4);

    opacity: 0;

  }

}

.step-indicator {

  position: relative;

  margin: 0 auto 10px;

  padding: 0 15px;

}



.progress-fill {

  position: absolute;

  top: 50%;

  left: 0;

  height: 4px;

  background-color: #10b981;

  z-index: 1;

  transform: translateY(-50%);

  width: 0%;

  border-radius: 5px;

  transition: width 0.4s ease;

}