/* Optional custom CSS — add more if needed */
body {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
}

#results div {
  transition: all 0.3s ease-out;
}

.results-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3b82f6;
}

/* Custom slider styles */
.custom-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  /* Reduced thickness */
  background: linear-gradient(to right,
      #10b981 0%,
      #10b981 var(--slider-fill, 0%),
      #e5f9ee var(--slider-fill, 0%),
      #e5f9ee 100%);
  border-radius: 6px;
  border: 2px solid #34d399;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 0.5rem;
  position: relative;
  box-sizing: border-box;
}

/* .custom-slider:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px #6ee7b7;
} */

.custom-slider:active {
  border-color: #10b981;
  box-shadow: 0 0 0 2px #6ee7b7;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Remove border and shadow when not focused or active */
.custom-slider:not(:focus):not(:active) {
  border-color: #34d399;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  /* Reduced thumb size */
  height: 20px;
  /* Reduced thumb size */
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
  margin-top: -8px;
  /* (thumb height - track height)/2 = (20-6)/2 = 7, -8px for perfect centering */
  position: relative;
}

.custom-slider:focus::-webkit-slider-thumb {
  background: #059669;
  border-color: #6ee7b7;
}

/* Firefox */
.custom-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}

.custom-slider:focus::-moz-range-thumb {
  background: #059669;
  border-color: #6ee7b7;
}

.custom-slider::-ms-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}

/* Track styles */
.custom-slider::-webkit-slider-runnable-track {
  height: 6px;
  /* Reduced thickness */
  background: #e5f9ee;
  border-radius: 6px;
}

.custom-slider::-ms-fill-lower,
.custom-slider::-ms-fill-upper {
  background: #e5f9ee;
  border-radius: 6px;
}

/* Filled track for Chrome, Safari, Edge */
.custom-slider {
  background: linear-gradient(to right,
      #10b981 0%,
      #10b981 var(--slider-fill, 0%),
      #e5f9ee var(--slider-fill, 0%),
      #e5f9ee 100%);
}

/* Firefox */
.custom-slider::-moz-range-progress {
  background-color: #10b981;
  height: 6px;
  border-radius: 6px;
}

.custom-slider::-moz-range-track {
  background-color: #e5f9ee;
  height: 6px;
  border-radius: 6px;
}

/* IE/Edge */
.custom-slider::-ms-fill-lower {
  background-color: #10b981;
  border-radius: 6px;
}

.custom-slider::-ms-fill-upper {
  background-color: #e5f9ee;
  border-radius: 6px;
}

/* Remove outline on Firefox */
.custom-slider::-moz-focus-outer {
  border: 0;
}

/* General styles for all browsers */
.custom-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tooltip (Chart.js) - reduce size */
.chartjs-tooltip,
.chartjs-tooltip table {
  font-size: 12px !important;
  padding: 4px 8px !important;
}

/* Remove increment and decrement buttons (spinners) from number inputs */
input[type="number"].no-spinner::-webkit-inner-spin-button,
input[type="number"].no-spinner::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].no-spinner {
  -moz-appearance: textfield;
}

/* Years slider: custom fill color (blue) for left part */
#years-slider {
  background: linear-gradient(to right,
      #3b82f6 0%,
      #3b82f6 var(--slider-fill, 0%),
      #e5f9ee var(--slider-fill, 0%),
      #e5f9ee 100%) !important;
}

/* Firefox */
#years-slider::-moz-range-progress {
  background-color: #3b82f6;
  height: 6px;
  border-radius: 6px;
}

#years-slider::-moz-range-track {
  background-color: #e5f9ee;
  height: 6px;
  border-radius: 6px;
}

/* IE/Edge */
#years-slider::-ms-fill-lower {
  background-color: #3b82f6;
  border-radius: 6px;
}

#years-slider::-ms-fill-upper {
  background-color: #e5f9ee;
  border-radius: 6px;
}

/* Add to your CSS file or in a <style> block */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}