:root {
  /* Primary gradient colors */
  --color-pink: #E11DBC;
  --color-red: #FB1C63;
  --color-orange: #F1AA32;
  --color-purple: #606eea;

  /* Teal/Green accents */
  --color-teal: #1cb797;
  --color-green: #00e79a;

  /* Dark backgrounds */
  --color-dark-bg: hsl(265 92% 28%);
  --color-dark-purple: #1C1533;
  --color-dark-navy: #16112a;
  --color-deep-purple: #3a1a6e;
  --color-blue: #25307A;
  --color-blue-bright: #2b4bd6;

  /* Neutrals */
  --color-gray-light: #f5f5f5;
  --color-gray-dark: #3a3d43;
  --color-gray-mid: #8b96a9;

  /* Glow colors (base - opacity applied inline) */
  --color-glow-purple-dark: hsl(295 92% 28%);
  --color-glow-purple-mid: hsl(280 60% 40%);
  --color-glow-purple-light: hsl(280 70% 50%);
  --color-glow-purple-bright: hsl(280 80% 60%);
  --color-glow-violet: hsl(255 60% 30%);
  --color-glow-violet-light: hsl(255 60% 40%);
  --color-glow-teal: hsl(180 70% 45%);
  --color-glow-teal-bright: hsl(180 80% 50%);
  --color-glow-green: rgb(0, 231, 154);

  /* Border colors */
  --color-border-purple: hsl(280 40% 35%);
  --color-shadow-dark: hsl(220 25% 5%);
  --color-shadow-deep: hsl(220 50% 5%);

  /* Conic gradient colors */
  --color-conic-pink: hsl(311 77% 50%);
  --color-conic-light: hsl(341 97% 95%);
  --color-conic-orange: hsl(38 87% 57%);

  /* Accent */
  --color-range: #DB5959;
  --color-white: #fff;
}

.pricing_slider_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rotating glow behind the handle */
.pricing_slider_wrap::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--color-pink), var(--color-red), var(--color-orange), var(--color-purple));
  animation: rotateGlow 6s linear infinite;
  filter: blur(25px);
  opacity: 0.5;
  z-index: -1;
}

.pricing_slider_wrap::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--color-pink), var(--color-red), var(--color-orange), var(--color-purple));
  animation: rotateGlow 6s linear infinite;
  filter: blur(50px);
  opacity: 0.35;
  z-index: -2;
}

@keyframes rotateGlow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.pricing-slider-dimmer {
  position: absolute;
  width: 190px;
  height: 180px;
  z-index: 4;
  border-radius: 100%;
  pointer-events: none;
  box-shadow:
    inset 0px -4px 6px 0px var(--color-gray-mid),
    inset 0px 4px 4px 1px var(--color-teal),
    inset 0px 4px 6px 0px var(--color-teal),
    inset 0px -4px 0px 1px var(--color-teal),
    0px 5px 8px 1px var(--color-teal),
    0px -15px 15px 9px var(--color-teal),
    0px 0px 2px 3px var(--color-purple),
    0px 7px 25px 5px var(--color-purple),
    0px 15px 15px 0px var(--color-purple),
    0px 15px 15px 5px var(--color-purple);
}

.pricing-slider-dimmer::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  border: 16px solid var(--color-dark-bg);
  box-sizing: border-box;
  z-index: 20;
  pointer-events: none;
}

/* Round Slider Styles */
@property --hue1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 255;
}

@property --hue2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 222;
}

#slider2 .rs-handle {
  box-shadow: 0px 0px 4px 0px #000;
  background: linear-gradient(90deg, var(--color-gray-light), var(--color-gray-dark));
  cursor: grabbing;
}

#slider2 .rs-handle:before {
  --size: 220px;
  --hue1: 255;
  --hue2: 222;
  display: block;
  content: " ";
  position: absolute;
  height: var(--size);
  width: var(--size);
  right: calc(var(--size) / -2);
  bottom: calc(var(--size) / -2);
  border-radius: 100%;

  background:
    linear-gradient(235deg, hsl(from var(--color-glow-purple-dark) h s l / 0.95), hsl(var(--hue1) 50% 8% / 0) 50%),
    linear-gradient(45deg, hsl(var(--hue2) 60% 16% / 0.9), hsl(var(--hue2) 50% 8% / 0) 50%),
    linear-gradient(160deg, var(--color-dark-purple) 20%, var(--color-blue) 60%, var(--color-deep-purple) 100%);

  box-shadow:
    inset 0 0 0 4px hsl(from var(--color-shadow-dark) h s l / 0.9),
    inset 0 2px 8px 4px hsl(from var(--color-glow-green) h s l / 0.1),
    inset 0 0 40px hsl(from var(--color-glow-purple-mid) h s l / 0.15),
    inset 0 0 60px hsl(from var(--color-glow-violet) h s l / 0.12),
    0 0 25px hsl(from var(--color-glow-purple-light) h s l / 0.2),
    0 0 45px hsl(from var(--color-glow-teal) h s l / 0.15),
    0 10px 30px hsl(from var(--color-shadow-deep) h s l / 0.5);

  animation: pulseGlow 3s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% {
    box-shadow:
      inset 0 0 0 4px hsl(from var(--color-shadow-dark) h s l / 0.9),
      inset 0 2px 8px 4px hsl(from var(--color-glow-green) h s l / 0.1),
      inset 0 0 40px hsl(from var(--color-glow-purple-mid) h s l / 0.15),
      inset 0 0 60px hsl(from var(--color-glow-violet) h s l / 0.12),
      0 0 25px hsl(from var(--color-glow-purple-light) h s l / 0.2),
      0 0 45px hsl(from var(--color-glow-teal) h s l / 0.15),
      0 10px 30px hsl(from var(--color-shadow-deep) h s l / 0.5);
  }

  100% {
    box-shadow:
      inset 0 0 0 4px hsl(from var(--color-shadow-dark) h s l / 0.9),
      inset 0 2px 8px 4px hsl(from var(--color-glow-green) h s l / 0.2),
      inset 0 0 55px hsl(from var(--color-glow-purple-light) h s l / 0.35),
      inset 0 0 75px hsl(from var(--color-glow-violet-light) h s l / 0.2),
      0 0 40px hsl(from var(--color-glow-purple-bright) h s l / 0.4),
      0 0 60px hsl(from var(--color-glow-teal-bright) h s l / 0.25),
      0 10px 30px hsl(from var(--color-shadow-deep) h s l / 0.5);
  }
}

/* Conic gradient shine overlay */
#slider2 .rs-handle:after {
  --size: 220px;
  content: "";
  position: absolute;
  height: var(--size);
  width: var(--size);
  right: calc(var(--size) / -2);
  bottom: calc(var(--size) / -2);
  border-radius: 100%;

  background: conic-gradient(from -45deg at 50% 50%,
      transparent 0%,
      hsl(from var(--color-conic-pink) h s l / 0.25) 8%,
      hsl(from var(--color-conic-light) h s l / 0.25) 15%,
      transparent 25%,
      transparent 45%,
      hsl(from var(--color-conic-orange) h s l / 0.3) 55%,
      hsl(from var(--color-conic-light) h s l / 0.2) 65%,
      transparent 75%);

  filter: blur(6px) saturate(2);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  animation: rotateConic 10s linear infinite;
}

@keyframes rotateConic {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#slider2 .rs-tooltip {
  top: 50%;
}

#slider2 .rs-tooltip div {
  text-align: center;
  color: var(--color-white);
  border-radius: 4px;
  padding: 1px 5px 2px;
  margin-top: 4px;
}

#slider2 .rs-tooltip-text {
  font-family: "DM Sans", sans-serif;
  font-size: 2rem;
  font-weight: 600 !important;
  color: var(--color-white);
}

#slider2 .rs-range-color {
  background-color: var(--color-range);
}

#slider2 .rs-path {
  background: linear-gradient(45deg, var(--color-dark-navy), var(--color-blue-bright), var(--color-green)) !important;

}

#slider2 .rs-path-color {
  background: linear-gradient(45deg, var(--color-dark-navy), var(--color-blue-bright), var(--color-green));

}

.rs-edit {
  pointer-events: none;
  font-weight: 400 !important;
  text-wrap: balance;
}

/* Icon wrap glow effects */
.pricing_values.icon_wrap {
  position: relative;
}

.calc_accordion_clip {
  grid-template-rows: 0fr;

}

.wf-design-mode .calc_accordion_clip {
  grid-template-rows: 1fr;

}

.slider-labels>* {
  opacity: 0.4;
  transition: opacity 0.2s, color 0.2s;
}

.slider-labels>.is-active {
  opacity: 1;
  color: #fff;
  font-weight: 600;
}

input[type="range"].input-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  /* JS will override this background */
  background: #16112a;
}

/* Thumb */
input[type="range"].input-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px;
  height: 24px;
  border-radius: 5rem;
  border: 1px solid #ff006c;
  background: #4800a7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

}

input[type="range"].input-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Firefox filled portion */
input[type="range"].input-slider::-moz-range-progress {
  height: 24px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(90deg, #ff6b6b, #ff8e53);
}

input[type="range"].input-slider::-webkit-slider-runnable-track {
  height: 24px;
  border-radius: 12px;
  background: transparent;
}

input[type="range"].input-slider::-moz-range-track {
  height: 24px;
  border-radius: 12px;
  background: #16112a;
}

.rs-tooltip.rs-tooltip-text::after {
  content: 'Resolutions';
  text-transform: uppercase;
  font-family: "DM Mono";
  font-weight: 400;
  display: block;
  font-size: 14px;
  /* adjust as needed */
}