.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-icon {
  cursor: pointer;
  margin-left: 8px;
  color: rgba(82, 42, 112, 0.5); /* retino-darkviolet/50 */
  transition: color 0.2s ease;
}

.tooltip-icon:hover {
  color: #522A70; /* retino-darkviolet */
}

.tooltip {
  visibility: hidden !important;
  width: 220px;
  background-color: #522A70; /* retino-darkviolet */
  color: #F9E9DC; /* retino-beige */
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -110px;
  opacity: 0 !important;
  transition: opacity 0.2s ease;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: normal;
  word-wrap: break-word;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #522A70 transparent transparent transparent; /* retino-darkviolet */
}

/* Slider styles */
.slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.slider::-webkit-slider-track {
  background: transparent;
  height: 12px;
}

.slider::-moz-range-track {
  background: transparent;
  height: 12px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #522A70; /* retino-darkviolet */
  height: 24px;
  width: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.slider::-moz-range-thumb {
  background: #522A70; /* retino-darkviolet */
  height: 24px;
  width: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
  background: #F0B9F8; /* retino-lightviolet */
  transform: scale(1.1);
}

.slider::-moz-range-thumb:hover {
  background: #F0B9F8; /* retino-lightviolet */
  transform: scale(1.1);
}

.slider:focus {
  outline: none;
}

.slider::-webkit-slider-thumb:focus {
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(82, 42, 112, 0.3); /* retino-darkviolet */
}

.slider::-moz-range-thumb:focus {
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(82, 42, 112, 0.3); /* retino-darkviolet */
}

/* Mobile-friendly positioning */
@media (max-width: 640px) {
  .tooltip {
    width: 200px;
    margin-left: -100px;
    bottom: 110%;
    font-size: 0.8rem;
  }
}

/* Hover states for both mobile and desktop */
.tooltip-container:hover .tooltip,
.tooltip-icon:hover ~ .tooltip,
.tooltip-icon:focus ~ .tooltip,
.tooltip-container:focus-within .tooltip,
.tooltip-container:hover .tooltip-icon + .tooltip,
.tooltip-icon:hover + .tooltip {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Touch support for mobile */
@media (hover: none) {
  .tooltip-icon:active ~ .tooltip,
  .tooltip-container:active .tooltip {
    visibility: visible;
    opacity: 1;
  }
}

#gradient-canvas {
  width: 100%;
  height: 100%;
  --gradient-color-1: #6B3A8C; /* Lighter violet */
  --gradient-color-2: #522A70; /* retino-darkviolet */
  --gradient-color-3: #421F5A; /* Darker violet */
  --gradient-color-4: #351849; /* Darkest violet */
}

#gradient-canvas2 {
  width: 100%;
  height: 100%;
  --gradient-color-1: #6B3A8C; /* Lighter violet */
  --gradient-color-2: #522A70; /* retino-darkviolet */
  --gradient-color-3: #421F5A; /* Darker violet */
  --gradient-color-4: #351849; /* Darkest violet */
}

#gradient-canvas3 {
  width: 100%;
  height: 100%;
  --gradient-color-1: #6B3A8C; /* Lighter violet */
  --gradient-color-2: #522A70; /* retino-darkviolet */
  --gradient-color-3: #421F5A; /* Darker violet */
  --gradient-color-4: #351849; /* Darkest violet */
}