.time-range-slider {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  gap: var(--gap-md);
  align-items: start;
  justify-content: center;
}

.slider-label-container,
.slider-label-row,
.slider-label,
.slider-dynamic-status-text,
.slider-time-value,
.slider-open-hours-label,
.slider-dynamic-open-hours-text {
	display: inline-flex;
	align-items: start;
	text-align: start;
	margin: 0;
	box-sizing: border-box;
	color: var(--text-body-neutral);
	line-height: 1;
}


.slider-label-container {
  flex-wrap: wrap;
  width: 100%;
  gap: var(--gap-sm);  
}

.slider-label-row,
.slider-time-value {
	gap: var(--gap-sm);
}

.slider-label {  
  font-weight: 600;
}

.slider-dynamic-status-text {
  font-weight: 400;
}

.slider-open-hours-label {
  font-weight: 600;
}

.slider-dynamic-open-hours-text {
  font-weight: 400;
}

.slider-track-container {
  position: relative;
  width: 100%;
  min-width: var(--screen-min-width);
  padding: var(--padding-xxxl) var(--padding-xl);
  background-color: var(--slider-background);
  box-sizing: border-box;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 0 0 1px var(--card-border), var(--soft-shadow-card);

}

.slider-base,
.slider-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  
  height: var(--slider-min-height);
  border-radius: var(--border-radius-sm);  
  width: 100%;
  /* Left and Right set to 0 to respect parent padding */
  left: 0;
  right: 0;
}

.slider-base {
  width: calc(100% - 24px); /* Moves in half a slider thumb, each side */
  margin-left: 12px; /* Moves in half a slider thumb, each side */
  background: var(--slider-base);
  z-index: 1;
}

.slider-fill {
  background: var(--slider-fill);
  z-index: 2;
}

.slider-track {
  display: flex;
  position: relative;
  align-items: center;
  touch-action: none;
}

/* Hide them initially until the setSliderTimesForLocation function has finished running */
#sliderFill,
#startThumb,
#endThumb {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Make slider-visible more specific to override the initial hiding */
#sliderFill.slider-visible,
#startThumb.slider-visible,
#endThumb.slider-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important; /* Disable transition when visible to prevent interference */
}

/* Force endThumb to be visible - emergency override */
#endThumb.slider-visible {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transition: none !important;
}

.slider-thumb {
  position: absolute;
  top: 50%;
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--border-radius-circle);
  background: var(--slider-thumb);
  box-shadow: var(--soft-shadow-button);
  z-index: 5;
  cursor: grab;
  touch-action: none; /* Disables native functions such as vertical scrolling on mobile */
  --press-scale: 1; /* Sets thumb initial scale. This is resized to 0.98 when clicked */
  transform: translateY(-50%) scale(var(--press-scale));
  transition: transform 120ms ease; /* small, smooth press */
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

/* ensure the track & thumbs block vertical panning and selection */
.slider-track,
.slider-thumb {
  -ms-touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.slider-thumb.clicked {
  /* No animation: just tweak the variable press-scale */
  --press-scale: 1.08;
  /* Keep translateY(-50%) via base rule */
}

/* Disabled slider styles */
.slider-thumb.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.slider-fill.disabled {
  opacity: 0.5;
}