/* Gunakan font Inter */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #ffffff; /* background putih */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tombol periode (Tailwind utility + sedikit kustom) */
.btn-period {
  border: 1px solid #e6e6e6;
  background: #ffffff;
  border-radius: 0.75rem; /* rounded-lg */
  padding: 0.6rem 0;
  text-align: center;
  font-weight: 600;
  color: #374151; /* gray-700 */
  transition: all 0.15s ease;
  line-height: 1;
}
.btn-period span { display: block; font-weight: 500; color: #6b7280; } /* smaller 'bulan' text */
.btn-period:hover {
  border-color: #fb923c; /* orange-400 */
  background: #fff7ed;   /* light orange */
  color: #c2410c;       /* darker orange */
}
.btn-period.active {
  border-color: #f97316; /* orange-500 */
  background: #fff1e6;
  color: #c2410c;
}

/* Slider kustom oranye (cross-browser) */
.styled-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97316 0%, #f97316 50%, #fde8d7 50%, #fde8d7 100%);
  background-size: 100% 100%;
  outline: none;
  cursor: pointer;
}

/* Webkit thumb */
.styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: #f97316;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 10px rgba(14, 20, 30, 0.12);
  margin-top: -7px; /* center thumb on track */
  transition: transform 0.12s ease;
}
.styled-slider::-webkit-slider-thumb:hover { transform: scale(1.06); }

/* Firefox */
.styled-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #f97316;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 10px rgba(14, 20, 30, 0.12);
  transition: transform 0.12s ease;
}
.styled-slider::-moz-range-thumb:hover { transform: scale(1.06); }

/* Hide default focus outline and replace */
.styled-slider:focus { box-shadow: none; }

/* make the slider track color reflect value using background-size in JS update */

/* Input clear button (simple) */
#clearBtn {
  background: transparent;
  border: none;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .btn-period { padding: 0.55rem 0; font-size: 0.95rem; }
  .styled-slider { height: 7px; }
}