html,
body {
  font-family:
    "Special Gothic",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif !important;
}
/* ============== Weight slider: blue active track (cross-browser) ============== */
.weight-range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;

  /* jangan set background di input (track ada di pseudo-element) */
  background: transparent;

  height: 8px; /* fallback */
  border-radius: 999px;
}

/* ===== WebKit (Chrome, Safari, Edge) ===== */
.weight-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #2563eb 0%,
    #2563eb var(--fill),
    #e2e8f0 var(--fill),
    #e2e8f0 100%
  );
}

.weight-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px; /* supaya thumb center di track (8px track, 18px thumb) */

  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #94a3b8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}

/* ===== Firefox ===== */
.weight-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
}

.weight-range::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: #2563eb;
}

.weight-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #94a3b8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}

/* Disabled */
.weight-range:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Optional: fokus lebih rapi */
.weight-range:focus {
  outline: none;
}