/* Use Roboto for a modern appearance */
body, .slider-text {
  font-family: 'Roboto', sans-serif;
}

/* Slider container styling */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 50px;
  background: #e9ecef;
  border-radius: 25px;
  margin: 20px auto;
  overflow: hidden;
  user-select: none;
  transition: box-shadow 0.3s ease;
}
.slider-container:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

/* Slider track fills as the handle is dragged */
.slider-track {
  position: absolute;
  height: 100%;
  width: 0;
  background: #28a745;
  border-radius: 25px;
  transition: width 0.2s ease;
}

/* Slider handle styling */
.slider-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  transition: background 0.2s ease, left 0.2s ease;
}

/* Slider text styling */
.slider-text {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 50px;
  color: #6c757d;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* When verified, fill the track and change handle appearance */
.slider-container.success .slider-track {
  width: 100%;
  background: #28a745;
}
.slider-container.success .slider-handle {
  left: calc(100% - 50px);
  background: #28a745;
  border-color: #28a745;
}
.slider-container.success .slider-text {
  opacity: 0;
}