/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ─── Modern range slider (used by shared/_arrival_filter) ─────────────── */
/* A flat track with no progress fill on either side, and a soft circular
   thumb. Positions are anchors, not magnitudes — so we don't render any
   coloured "gauge" bar. */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  height: 24px;
  cursor: pointer;
  outline: none;
}

.range-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: #e5e7eb; /* gray-200 */
  border-radius: 9999px;
}

.range-slider::-moz-range-track {
  height: 4px;
  background: #e5e7eb;
  border-radius: 9999px;
}

/* Firefox draws a filled "progress" segment by default; flatten it. */
.range-slider::-moz-range-progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 9999px;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 9999px;
  background: #ffffff;
  border: 2px solid #4f46e5; /* indigo-600 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
  border: 2px solid #4f46e5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.range-slider:hover::-webkit-slider-thumb,
.range-slider:focus-visible::-webkit-slider-thumb,
.range-slider:active::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15);
}

.range-slider:hover::-moz-range-thumb,
.range-slider:focus-visible::-moz-range-thumb,
.range-slider:active::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15);
}

/* Tick row sitting underneath the slider track. */
.range-slider-ticks {
  position: relative;
  height: 8px;
  margin-top: 2px;
}

.range-slider-ticks > .tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 6px;
  background: #d1d5db; /* gray-300 */
  border-radius: 1px;
  transform: translateX(-50%);
}