/* ===== NORMALIZER ===== */
.normalizer-container {
  border-radius: 12px;
  margin: 0 auto 16px;
  max-width: 600px;
  position: relative;
  background: var(--rainbow-transparent-gradient);
  backdrop-filter: var(--glass-backdrop-filter);
  border: var(--glass-border);
}

.normalizer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  transition: all 0.3s ease;
  min-height: 51px;
  gap: 10px;
}

.normalizer-title {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.normalizer-title i {
  font-size: 16px;
}

.normalizer-controls {
  width: 100%;
}


.normalizer-target-container {
  width: 100%;
}

.normalizer-slider-container {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
}


.normalizer-target-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right, 
    rgba(0, 0, 0, 0.8) 0%, 
    rgba(0, 245, 255, 0.1) 25%, 
    rgba(0, 245, 255, 0.2) 50%,
    rgba(0, 245, 255, 0.4) 75%,
    rgba(255, 165, 0, 0.6) 87.5%,
    rgba(255, 0, 0, 0.8) 100%);
  outline: none;
  border-radius: 2px;
  transition: all 0.3s ease;
  max-width: 160px;
}

.normalizer-target-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(45deg, var(--neon-cyan), var(--neon-magenta));
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
  border: 2px solid var(--void);
}


.normalizer-target-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.8);
  background: linear-gradient(45deg, var(--neon-magenta), var(--neon-lime));
}

.normalizer-target-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: linear-gradient(45deg, var(--neon-cyan), var(--neon-magenta));
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid var(--void);
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
}

.normalizer-target-slider::-moz-range-thumb:hover {
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.8);
  background: linear-gradient(45deg, var(--neon-magenta), var(--neon-lime));
}

.normalizer-min-label,
.normalizer-max-label {
  color: var(--text-glow);
  font-size: 11px;
  font-weight: 500;
  user-select: none;
  flex-shrink: 0;
}


/* Responsive normalizer */
@media (max-width: 768px) {
  .normalizer-controls {
    /*! gap: 10px; */
  }
  
  .normalizer-target-container {
    /*! gap: 6px; */
  }
  
  .normalizer-slider-container {
    /*! gap: 6px; */
  }
  
  .normalizer-min-label,
  .normalizer-max-label {
    font-size: 10px;
  }
  
}

@media (max-width: 480px) {
  .normalizer-controls {
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
  }
  
  .normalizer-target-container {
    gap: 4px;
  }
  
  .normalizer-slider-container {
    /*! gap: 4px; */
  }
  
  .normalizer-target-slider {
    width: 110px;
  }
  
}

/* ===== EQUALIZER ===== */
.equalizer-container {
    border-radius: 12px;
    margin: 15px auto;
    max-width: 600px;
    position: relative;
    background: var(--rainbow-transparent-gradient);
    backdrop-filter: var(--glass-backdrop-filter);
    border: var(--glass-border);
  }
  
  .equalizer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    transition: all 0.3s ease;
    min-height: 51px;
    gap: 10px;
  }
    
  .equalizer-controls {
    display: flex;
    gap: 10px;
  }
  
  .equalizer-title {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
  }
  
  .equalizer-title i {
    font-size: 16px;
  }
  
  .equalizer-toggle {
    background: transparent;
    border: none;
    color: var(--neon-cyan);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--fa-font-regular);
    padding: 4px 0;
  }

  /* equalizer-toggle hover state */
  @media (pointer: fine) {
    .equalizer-toggle:hover {
      color: var(--neon-magenta);
    }
  }
  
  .equalizer-toggle.rotated i {
    transform: rotate(180deg);
  }
  
  .equalizer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .equalizer-content.expanded {
    max-height: 600px;
  }
  
  .preset-select {
    background: transparent;
    border: none;
    padding: 4px 0;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    width: 100px;
    min-width: 100px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--fa-font-regular);
    text-align: center;
  }
  
  /* preset-select hover state */
  @media (pointer: fine) {
    .preset-select:focus {
      color: var(--neon-magenta);
    }
    .preset-select:hover {
      color: var(--neon-magenta);
    }
  }
  
  .save-preset-btn {
    border: none;
    color: var(--fa-font-regular);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }
  
  .save-preset-btn:hover {
    color: var(--neon-lime);
  }
  
  .save-preset-btn i {
    font-size: 16px;
  }
  
  .reset-btn {
    border: none;
    color: var(--fa-font-regular);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }
  
  .reset-btn:hover {
    color: var(--neon-magenta);
  }
  
  .reset-btn i {
    font-size: 16px;
  }
  
  .equalizer-bands {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 4px 11px 16px;
    flex-wrap: wrap;
  }
  
  .band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 40px;
  }
  
  .band-label {
    color: var(--text-glow);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    min-height: 16px;
    user-select: none;
  }
  
  .band-slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 4px; /* Fixed width for vertical slider */
    height: 100px; /* Fixed height for vertical slider */
  }
  
  .band-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, 
      rgba(0, 0, 0, 0.8) 0%, 
      rgba(0, 245, 255, 0.2) 50%, 
      rgba(0, 245, 255, 0.4) 100%);
    outline: none;
    cursor: pointer;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2px; /* Half of height */
    margin-left: -50px; /* Half of width */
    transition: all 0.3s ease;
    transform: rotate(-90deg); /* Rotate to vertical */
    transform-origin: center;
  }
  
  .band-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(45deg, var(--neon-cyan), var(--neon-magenta));
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
    border: 2px solid var(--void);
  }
  
  .band-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.8);
    background: linear-gradient(45deg, var(--neon-magenta), var(--neon-lime));
  }
  
  .band-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(45deg, var(--neon-cyan), var(--neon-magenta));
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--void);
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
  }
  
  .band-slider::-moz-range-thumb:hover {
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.8);
    background: linear-gradient(45deg, var(--neon-magenta), var(--neon-lime));
  }
  
  .band-value {
    color: var(--neon-cyan);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    min-width: 32px;
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.5);
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin-top: 8px;
  }
  
  .band-slider:focus + .band-value {
    color: var(--neon-magenta);
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
  }
  
  /* Responsive equalizer */
  @media (max-width: 768px) {
    
    .equalizer-title,
    .normalizer-title,
    .preset-select {
      font-size: 14px;
      line-height: 14px;
    }
    
    .equalizer-bands {
      padding: 0 8px 16px;
    }
    
    .band {
      min-width: 40px;
    }
    
    .band-slider-container {
      width: 3px;
      height: 80px;
    }
    
    .band-slider {
      width: 80px;
      height: 3px;
      margin-left: -40px; /* Half of width */
    }
    
    .band-slider::-webkit-slider-thumb {
      width: 14px;
      height: 14px;
    }
    
    .band-slider::-moz-range-thumb {
      width: 14px;
      height: 14px;
    }
    
    .band-label {
      font-size: 10px;
    }
    
    .band-value {
      font-size: 10px;
      min-width: 27px;
      margin-top: 3px;
    }
        
  }
  
  @media (max-width: 480px) {
    .equalizer-bands {
      padding: 0 12px 12px;
    }
    
    .band {
      min-width: 0;
    }
    
    .band-slider-container {
      width: 3px;
      height: 60px;
    }
    
    .band-slider {
      width: 70px;
      margin-left: -35px; /* Half of width */
    }
  }