/* Essential CSS for Multi-Step Form */

/* Hide elements with is-hidden class */
.is-hidden {
  display: none !important;
}

/* Multi-step form container */
.sl-multi {
  position: relative;
}

/* Step/section styling */
.sl-step {
  /* Ensure steps take full width when visible */
  width: 100%;
}

/* Progress dots styling */
.sl-steps-dots {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  gap: 10px;
}

.sl-steps-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd;
  transition: background-color 0.3s ease;
}

.sl-steps-dots .dot.is-active {
  background-color: #007cba;
}

/* Navigation buttons */
.sl-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 10px;
}



.sl-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}



/* Optional: Add smooth transitions between steps */
.sl-step {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.sl-step.is-hidden {
  opacity: 0;
  /* Use visibility instead of display for smoother transitions if desired */
  /* visibility: hidden; */
  /* position: absolute; */
}