/* Percentage Slider (0-100) */
.percentage-slider-container {
  width: 100%;
  margin: 20px 0;
  /* Added relative positioning in the template */
  padding-top: 20px; /* Add padding to make space for the output value */
}

.percentage-slider {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 100%; /* Full width */
  height: 8px; /* Track height */
  border-radius: 5px; /* Rounded track */
  background: #4a5568; /* Darker background for the track */
  outline: none; /* Remove outline */
  opacity: 0.9; /* Slight transparency */
  -webkit-transition: .2s; /* Transition for hover effects */
  transition: opacity .2s;
  cursor: pointer; /* Cursor on hover */
  /* Fill effect will be handled by JS setting a background gradient */
}

.percentage-slider:hover {
  opacity: 1; /* Fully opaque on hover */
}

/* Thumb Styles */
.percentage-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; /* Thumb width */
  height: 20px; /* Thumb height */
  background: #3b82f6; /* Blue thumb color */
  border-radius: 50%; /* Circular thumb */
  cursor: pointer;
  margin-top: -6px; /* Adjust vertical position to center on track */
  position: relative; /* Needed for z-index */
  z-index: 2; /* Ensure thumb is above track fill */
}

.percentage-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
  border: none; /* Remove default border in Firefox */
  position: relative;
  z-index: 2;
}

/* Output Value Styles (Positioning handled by JS and inline style) */
.percentage-slider-output {
  /* Base styles added in template: absolute text-center text-sm text-white font-semibold pointer-events-none */
  background-color: rgba(0, 0, 0, 0.6); /* Optional: slight background for readability */
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  transform: translateX(-50%); /* Center the output above the thumb */
  z-index: 3; /* Ensure output is above thumb */
  transition: left 0.1s ease-out; /* Smooth transition as slider moves */
}

/* Tick Styles */
.percentage-slider-ticks {
  /* Styles added in template: absolute w-full flex justify-between px-1 pointer-events-none */
  height: 5px; /* Height of the tick area */
  /* Position below the slider track (track height 8px + gap 4px = 12px from top edge of track) */
  /* The container has padding-top: 20px, slider height 8px. Position relative to container. */
  top: 34px; /* 20px padding + 8px slider height + 4px gap */
  left: 0;
  padding: 0 10px; /* Align ticks with thumb travel range */
  box-sizing: border-box;
}

.percentage-slider-tick {
  width: 1px;
  height: 5px;
  background-color: #718096; /* Tick color */
  position: absolute;
  bottom: 0;
  transform: translateX(-50%); /* Center the tick mark */
}

/* 0 and 100 Labels */
.percentage-slider-label {
    position: absolute;
    top: 39px; /* Position below the ticks (32px + 5px tick height + 2px gap) */
    font-size: 12px;
    color: #a0aec0; /* Lighter gray color */
}

.percentage-slider-label-min {
    left: 10px; /* Align with the start of the thumb's travel */
    transform: translateX(-50%); /* Center the label text */
}

.percentage-slider-label-max {
    right: 10px; /* Align with the end of the thumb's travel */
    transform: translateX(50%); /* Center the label text */
}


/* --- Item Slider Styles (Revised) --- */

/* Container for each slider row (title + slider) is handled by flex in HTML */
.item-slider-container {
  width: 100%;
  position: relative;
  /* Removed margin, handled by parent flex container */
  height: 20px; /* Provide some height for positioning */
}

/* Price slider specific styles */
.item-slider-price {
  margin-bottom: 24px; /* Add space for labels below */
}

/* Track holds the clickable options (dots) */
.item-slider-track {
  display: flex;
  justify-content: space-between;
  /* Removed margin */
  position: relative; /* Needed for dot positioning */
  height: 100%; /* Take full height of container */
  align-items: center; /* Center dots vertically if needed */
}

/* Represents each clickable point/dot */
.item-slider-option {
  flex: 1;
  position: relative;
  cursor: pointer;
  height: 100%; /* Make the full area clickable */
  display: flex; /* To help center the pseudo-element */
  justify-content: center;
  align-items: center;
  /* Removed text-align, padding, transition, color, font-weight */
}

/* The visual dot */
.item-slider-option::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ffffff; /* Dot color (inactive) - Changed to white */
  border-radius: 50%;
  /* top: -5px; */ /* Position relative to the center line/track */
  /* left: 50%; */ /* Centered by flex now */
  /* transform: translateX(-50%); */ /* Centered by flex now */
  z-index: 2; /* Above track */
  transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* Style for dots before the active one (will be added by JS) */
.item-slider-option.before-active::before {
  background: #3b82f6; /* Blue color */
  /* Keep size same as inactive for consistency */
  width: 12px;
  height: 12px;
}

/* Active state dot */
.item-slider-option.active::before {
  background: #3b82f6; /* Blue color for active */
  width: 14px; /* Slightly larger active dot */
  height: 14px;
}

/* Base track line */
.item-slider-track::after {
  content: '';
  position: absolute;
  height: 4px; /* Make track slightly thicker */
  background: #ffffff; /* Changed track color to white */
  top: 50%;
  transform: translateY(-50%);
  /* Adjust left/right to align with centers of first/last dots (assuming 6 options) */
  /* 100% / (2 * numOptions) = 100 / 12 = 8.333% */
  left: 8.333%;
  right: 8.333%;
  z-index: 1; /* Below dots */
  border-radius: 2px;
}

/* Progress indicator line (will be dynamically updated by JS) */
.item-slider-progress {
  position: absolute;
  height: 4px;
  background: #3b82f6; /* Blue progress color */
  top: 50%;
  transform: translateY(-50%);
  /* Align start with the adjusted track start */
  left: 8.333%;
  width: 0%; /* Initial width, JS will set this */
  z-index: 2; /* Higher than base track pseudo-element */
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Removed .item-slider-label styles */

/* Compact style adjustment if needed */
.item-slider-compact .item-slider-container {
  /* Adjustments specific to compact version if necessary */
  /* transform: scale(0.9); */ /* Scaling might complicate layout */
  /* margin: 0; */
}

/* Common label row above sliders is styled with Tailwind in HTML */
/* No specific CSS needed unless Tailwind classes are insufficient */