/* Card styling */

.card {

  border: 2px solid #007bff;

  border-radius: 10px;

}



/* Range slider base */

.form-range {

  -webkit-appearance: none;

  appearance: none;

  width: 100%;

  height: 12px;

  border: 2px solid #007bff;

  border-radius: 6px;

  outline: none;

  background: transparent; /* ✅ no gradient here */

}



/* WebKit browsers (Chrome, Edge, Safari) */

.form-range::-webkit-slider-runnable-track {

  height: 8px;

  background: linear-gradient(to right, darkblue var(--progress, 0%), skyblue var(--progress, 0%));

  border-radius: 4px;

}



/* Firefox */

.form-range::-moz-range-track {

  height: 8px;

  background: linear-gradient(to right, darkblue var(--progress, 0%), skyblue var(--progress, 0%));

  border-radius: 4px;

}



/* Chrome, Edge, Safari thumb (triangle pointer) */

.form-range::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  background: transparent;   /* remove circle fill */

  border: none;              /* remove circle border */

  width: 0;                  /* no box */

  height: 0;

  border-left: 10px solid transparent;

  border-right: 10px solid transparent;

  border-bottom: 18px solid darkblue; /* triangle pointing up */

  margin-top: -8px;          /* adjust vertical alignment */

  cursor: pointer;

}





/* Firefox thumb (triangle pointer) */

.form-range::-moz-range-thumb {

  background: transparent;   /* remove circle fill */

  border: none;              /* remove circle border */

  width: 0;

  height: 0;

  border-left: 10px solid transparent;

  border-right: 10px solid transparent;

  border-bottom: 18px solid darkblue;

  cursor: pointer;

}



/* Value box styling */

.value-box {

  width: 120px;

  border: 2px solid #007bff;

  border-radius: 5px;

  text-align: center;

  font-weight: bold;

  margin-left: 10px;

}



/* Ruler styling */

.ruler {

  display: flex;

  justify-content: space-between;

  font-size: 12px;

  margin-top: 5px;

  color: #333;

  width: calc(100% - 140px); /* same as slider width */

  box-sizing: border-box;

  padding: 0;

  margin-left: 0;

  margin-right: 0;

  position: relative;

}



.ruler span {

  flex-grow: 1;

  text-align: center;

  position: relative;

}



.ruler span:first-child {

  text-align: left;

}



.ruler span:last-child {

  text-align: right;

}



/* Small vertical ticks below ruler labels */

.ruler span::after {

  content: '';

  position: absolute;

  bottom: -6px;

  left: 50%;

  transform: translateX(-50%);

  width: 1px;

  height: 6px;

  background-color: #333;

}



/* Slider value label above thumb */

.slider-value-label {

  position: absolute;

  top: -15px;

  color: darkblue;

  font-weight: bold;

  font-size: 14px;

  white-space: nowrap;

  pointer-events: none;

  user-select: none;

  transform: translateX(-50%);

}