/* Keep all picker effects centralized so they can be cached by the browser once. */
.spicyness-picker {
  position: relative;
  isolation: isolate; /* Data attributes drive highlight + inferno visuals */
}

/* The high-heat mode maintains the inferno glow purely via styling. */
.spicyness-picker[data-heat="high"] {
  border: 1px solid rgba(228, 29, 26, 0.35);
  background-color: rgba(248, 113, 113, 0.08);
  box-shadow: 0 6px 24px rgba(228, 29, 26, 0.18);
  overflow: hidden;
}

.spicyness-picker[data-heat="high"]::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  opacity: 0.55;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 182, 0, 0.45),
      transparent 55%
    ),
    radial-gradient(circle at 70% 30%, rgba(228, 29, 26, 0.4), transparent 60%),
    linear-gradient(
      120deg,
      rgba(208, 33, 0, 0.25),
      rgba(255, 123, 0, 0.15),
      rgba(208, 33, 0, 0.25)
    );
  animation: inferno-pulse 1.6s ease-in-out infinite;
}

/* Slider thumb styling remains global so all pickers look identical. */
.slider-red::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc2626;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-red::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc2626;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes inferno-pulse {
  0% {
    opacity: 0.35;
  }
  40% {
    opacity: 0.6;
  }
  70% {
    opacity: 0.45;
  }
  85% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.3;
  }
}