/* ---- Rating slider visual + range colors ---- */
/* Scale: 1–10, step 0.1 (previously 0–10, step 0.5)
   5 CSS classes cover 2 tiers each:
     rating-low      tiers 1–2  dark-blood-red -> red
     rating-mid      tiers 3–4  orange -> yellow
     rating-yellow   tiers 5–6  pale-peach -> sky-blue
     rating-lavender tiers 7–8  blue -> light-purple
     rating-high     tiers 9–10 purple -> pink

   Shared selector: any element with class `neon-tier-slider` OR id
   #ratingSlider / #mixtape-rating-slider will receive the same styling.
   ────────────────────────────────────────────────────────────────── */

#ratingSlider,
#mixtape-rating-slider,
.neon-tier-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #333;
  cursor: pointer;
  outline: none;
  transition: none;
}
#ratingSlider.slider-ready,
#mixtape-rating-slider.slider-ready,
.neon-tier-slider.slider-ready {
  transition: background 220ms ease;
}

/* Webkit track: transparent so the element background (gradient fill) shows */
#ratingSlider::-webkit-slider-runnable-track,
#mixtape-rating-slider::-webkit-slider-runnable-track,
.neon-tier-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
  border: none;
}
#ratingSlider::-moz-range-track,
#mixtape-rating-slider::-moz-range-track,
.neon-tier-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
  border: none;
}

/* Base thumb — shape + sizing (before tier class applies color) */
#ratingSlider::-webkit-slider-thumb,
#mixtape-rating-slider::-webkit-slider-thumb,
.neon-tier-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.25);
  background: #ff69b4;
  cursor: pointer;
  margin-top: -6px;
}
#ratingSlider::-moz-range-thumb,
#mixtape-rating-slider::-moz-range-thumb,
.neon-tier-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: #ff69b4;
  cursor: pointer;
}

/* Locked state — slider rejects pan/keyboard interaction until the user taps
   "Update Rating" to enter edit mode. The dim opacity + not-allowed cursor
   tell the user the value is committed. */
#ratingSlider:disabled,
#mixtape-rating-slider:disabled,
.neon-tier-slider:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
#ratingSlider:disabled::-webkit-slider-thumb,
#mixtape-rating-slider:disabled::-webkit-slider-thumb,
.neon-tier-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  box-shadow: 0 0 4px rgba(255,255,255,0.15) !important;
}
#ratingSlider:disabled::-moz-range-thumb,
#mixtape-rating-slider:disabled::-moz-range-thumb,
.neon-tier-slider:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

/* Tier-specific thumb gradients + glow (Webkit) */
#ratingSlider.rating-low::-webkit-slider-thumb,
#mixtape-rating-slider.rating-low::-webkit-slider-thumb,
.neon-tier-slider.rating-low::-webkit-slider-thumb {
  background: linear-gradient(135deg, #8b0000, #ff2a2a) !important;
  box-shadow: 0 0 8px rgba(139,0,0,0.9), 0 0 18px rgba(255,42,42,0.35);
}
#ratingSlider.rating-mid::-webkit-slider-thumb,
#mixtape-rating-slider.rating-mid::-webkit-slider-thumb,
.neon-tier-slider.rating-mid::-webkit-slider-thumb {
  background: linear-gradient(135deg, #ff8c00, #e0c000) !important;
  box-shadow: 0 0 8px rgba(255,140,0,0.9), 0 0 18px rgba(224,192,0,0.35);
}
#ratingSlider.rating-yellow::-webkit-slider-thumb,
#mixtape-rating-slider.rating-yellow::-webkit-slider-thumb,
.neon-tier-slider.rating-yellow::-webkit-slider-thumb {
  background: linear-gradient(135deg, #f5cba7, #81d4fa) !important;
  box-shadow: 0 0 8px rgba(129,212,250,0.9), 0 0 18px rgba(129,212,250,0.35);
}
#ratingSlider.rating-lavender::-webkit-slider-thumb,
#mixtape-rating-slider.rating-lavender::-webkit-slider-thumb,
.neon-tier-slider.rating-lavender::-webkit-slider-thumb {
  background: linear-gradient(135deg, #4a90d9, #b57bee) !important;
  box-shadow: 0 0 8px rgba(74,144,217,0.9), 0 0 18px rgba(181,123,238,0.35);
}
#ratingSlider.rating-high::-webkit-slider-thumb,
#mixtape-rating-slider.rating-high::-webkit-slider-thumb,
.neon-tier-slider.rating-high::-webkit-slider-thumb {
  background: linear-gradient(135deg, #8a2be2, #ff69b4) !important;
  box-shadow: 0 0 10px rgba(138,43,226,0.9), 0 0 20px rgba(255,105,180,0.45);
}

/* Tier-specific thumb gradients + glow (Firefox) */
#ratingSlider.rating-low::-moz-range-thumb,
#mixtape-rating-slider.rating-low::-moz-range-thumb,
.neon-tier-slider.rating-low::-moz-range-thumb {
  background: linear-gradient(135deg, #8b0000, #ff2a2a) !important;
  box-shadow: 0 0 8px rgba(139,0,0,0.9);
}
#ratingSlider.rating-mid::-moz-range-thumb,
#mixtape-rating-slider.rating-mid::-moz-range-thumb,
.neon-tier-slider.rating-mid::-moz-range-thumb {
  background: linear-gradient(135deg, #ff8c00, #e0c000) !important;
  box-shadow: 0 0 8px rgba(255,140,0,0.9);
}
#ratingSlider.rating-yellow::-moz-range-thumb,
#mixtape-rating-slider.rating-yellow::-moz-range-thumb,
.neon-tier-slider.rating-yellow::-moz-range-thumb {
  background: linear-gradient(135deg, #f5cba7, #81d4fa) !important;
  box-shadow: 0 0 8px rgba(129,212,250,0.9);
}
#ratingSlider.rating-lavender::-moz-range-thumb,
#mixtape-rating-slider.rating-lavender::-moz-range-thumb,
.neon-tier-slider.rating-lavender::-moz-range-thumb {
  background: linear-gradient(135deg, #4a90d9, #b57bee) !important;
  box-shadow: 0 0 8px rgba(74,144,217,0.9);
}
#ratingSlider.rating-high::-moz-range-thumb,
#mixtape-rating-slider.rating-high::-moz-range-thumb,
.neon-tier-slider.rating-high::-moz-range-thumb {
  background: linear-gradient(135deg, #8a2be2, #ff69b4) !important;
  box-shadow: 0 0 10px rgba(138,43,226,0.9);
}

/* Optional small visual cue for saved state */
#ratingSlider.saved,
#mixtape-rating-slider.saved,
.neon-tier-slider.saved {
  filter: saturate(1.05);
}