/* Horizontal five-step selector */
.five-step-selector-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 14px;
    background: transparent;
    margin: 0;
    padding: 0;
  }
  .five-step-selector-range::-webkit-slider-runnable-track{
    background: #35100B;
    border-radius: 5px;
    height: 10px; /* For horizontal slider */
    border: none;
  }
  
  
  .five-step-selector-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #35100B;
    width: 18px;
    height: 24px;
    cursor: pointer;
    margin-top: -6.7px; /* For horizontal slider */
    border-radius: 5px;
        /* Optional: Add a small indicator line */
        background-image: linear-gradient(to top, #f2eed3 35%, transparent 35%, transparent 65%, #f2eed3 65%);
    background-size: 2px 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .five-step-ticks {
    display: flex;
    justify-content: space-between;
    width: 102.2px; /* Match the width of the slider */
    margin-top: 7px;
    padding: 0;
    position: relative;
  }
  
  /* Individual tick container - space them out evenly */
  .five-step-ticks .tick-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    position: relative; /* Add position relative to container */
  }
  
  /* Make the ticks thinner and taller */
  .five-step-ticks .tick {
    width: 1.7px;
    height: 8px;
    background-color: #35100B;
    margin-bottom: 4px;
  }
  
  /* Adjust the labels */
  .five-step-ticks .tick-label {
    position: relative;
    font-size: 8px;
    color: #35100B;
    text-align: center;
    white-space: nowrap;
    margin-top: 2px;
    width: 102.2px;
    right: 2.8px;
  }
  /* Wave shape class for the SVG icons - replace your CSS wave shape implementations */
  .wave-shape {
    height: 14px;
    width: 18px;
    position: relative;
    display: inline-block;
    filter: invert(8%) sepia(12%) saturate(6770%) hue-rotate(338deg) brightness(97%) contrast(99%)
  }
  
  .wave-shape img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
  .oscillator-module {
    border: 1px solid #35100B;
    background-color: #f2eed3;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-width: 139px;
    max-width: 139px;
    align-items: center;
    padding-top: 15px;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .module-title.oscillator {
    color: #f2eed3;
    text-align: center;
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    margin-bottom: 10px;
    background-color: #BA5446; /* Green color for OSCILLATOR */
    padding: 5px 0;
    border-radius: 10px;
    border: 0px solid #35100B;
    width: 150%;
    margin-top: -15px;
  }
  
  /* Oscillator selector containers */
  .osc-selector-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 17px;
    margin-bottom: 9.5px;
  }
  
  /* Add label for selectors */
  .selector-label {
    font-family: "Nunito", sans-serif;
    font-size: 10px;
    font-variant-caps: all-small-caps;
    font-weight: 750;
    color: #35100B;
    text-align: center;
    margin-top: 3px;
  }
  
  /* Octave labels */
  .octave-label {
    font-family: "Nunito", sans-serif;
    font-size: 16px; /* Reduced from 16px to match other labels */
    font-variant-caps: all-small-caps;
    font-weight: 625; /* Match other labels */
    color: #35100B;
    text-align: center;
    display: inline-block; /* Use inline-block instead of absolute */
    margin-top: 4px; /* Add spacing between tick and label */
    position: relative; /* Use relative positioning */
    width: auto; /* Let the text determine width */
  }
  
  /* Two-column layout */
  .osc-columns-container {
    display: flex;
    width: 105%;
    justify-content: space-between;
    margin-top: 5px;
  }
  
  .osc-left-column, .osc-right-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
  }
  
/* Default knob style (keeping the same structure) */
.oscillator-module .knob {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  cursor: grab;
  box-sizing: border-box;
  border: 0.5px solid #35100B;
  transform-origin: center center;
  /* Default to Green for FM */
  background-color: #6B8F53;
  box-shadow: 0 0 0 4.2px #6B8F53, 0 0 0 6px #35100B;
}

/* Red knobs: Pitch and Gain - USE CORRECT IDs */
.oscillator-module #osc1-pitch-knob,
.oscillator-module #osc1-gain-knob {
  background-color: #BA5446;
  box-shadow: 0 0 0 4.2px #BA5446, 0 0 0 6px #35100B;
}
/* Red knobs: Pitch and Gain - USE CORRECT IDs */
.oscillator-module #osc2-pitch-knob,
.oscillator-module #osc2-gain-knob {
  background-color: #BA5446;
  box-shadow: 0 0 0 4.2px #BA5446, 0 0 0 6px #35100B;
}
/* Blue knobs: PWM and Quantize - USE CORRECT IDs */
.oscillator-module #osc1-pwm-knob,
.oscillator-module #osc1-quantize-knob {
  background-color: #4E658B;
  box-shadow: 0 0 0 4.2px #4E658B, 0 0 0 6px #35100B;
}
/* Blue knobs: PWM and Quantize - USE CORRECT IDs */
.oscillator-module #osc2-pwm-knob,
.oscillator-module #osc2-quantize-knob {
  background-color: #4E658B;
  box-shadow: 0 0 0 4.2px #4E658B, 0 0 0 6px #35100B;
}
/* Green knob: FM - USE CORRECT ID (already default, but explicit is fine) */
.oscillator-module #osc1-fm-knob {
  background-color: #6B8F53;
  box-shadow: 0 0 0 4.2px #6B8F53, 0 0 0 6px #35100B;
}

/* Ensure indicator line is present on all */
.oscillator-module .knob::after {
  content: '';
  position: absolute;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  width: 23.6px;
  height: 3px;
  background-color: #f2eed3;
  transform-origin: left center;
  transform: translate(-0px, -50%) rotate(270deg);
}
  
  /* Space knobs properly */
  .oscillator-module .knob-container {
    margin-bottom: 9px;
  }
  
  /* Fix spacing for switch */
  .oscillator-module .switch-container {
    margin-bottom: 15px;
    margin-top: 5px;
  }
  /* Oscillator-specific switch container styling */
  .osc-switch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px 0 -6.5px 0; /* Custom margins for oscillator switch */
  }
  
  /* Oscillator-specific switch labels */
  .osc-switch-label {
    position: relative;
    font-family: "Nunito", sans-serif;
    font-size: 10px;
    font-variant-caps: all-small-caps;
    font-weight: 750;
    color: #35100B;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  /* Oscillator-specific top label positioning */
  .osc-switch-label-top {
    margin-bottom: 4px; /* Custom spacing above switch */
    bottom: 10px;
  }
  
  /* Oscillator-specific bottom label positioning */
  .osc-switch-label-bottom {
    margin-top: 4px; /* Custom spacing below switch */
    bottom: 15.5px;
  }
  
  /* Oscillator-specific vertical switch */
  .osc-vertical-switch {
    width: 20px;
    height: 40px;
    background: #6B8F53;
    border: 2px solid #35100B;
    border-radius: 5px;
    position: relative;
    cursor: grab;
    margin-bottom: 3px; /* Custom bottom margin */
    bottom: 11px;
  }
  
  /* Switch handle styling */
  .osc-vertical-switch::after {
    content: '';
    position: absolute;
    width: 19px;
    height: 19.4px;
    background: #35100B;
    border: 1px solid #35100B;
    border-radius: 0px;
    left: -0.5px;
    top: 0px;
    transition: top 0.1s;
    
    /* Add the on.svg overlay as a background image */
    background-image: url("../control icons/on.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
  }
  
  .osc-vertical-switch.active::after {
    top: 19px;
  }
  .osc-vertical-switch {
    position: relative; /* Ensure it's a positioning context */
  }
  
  /* Top horizontal line from switch */
  .osc-vertical-switch::before {
    content: '';
    position: absolute;
    top: 25%; /* Position in upper half */
    right: -13.9px; /* Extend 12px to the right */
    width: 13px;
    height: 2px;
    background-color: #35100B;
  }
  
  /* Bottom horizontal line from switch */
  
  
  /* Connection line container */
  .osc-switch-container {
    position: relative; /* Make it a positioning context */
  }
  
  /* Vertical connector line where the two horizontal lines meet */
  .osc-switch-container::before {
    content: '';
    position: absolute;
    top: calc(25% - 1px); /* Align with top line */
    right: -7px; /* Position at the end of the horizontal lines */
    width: 2px;
    height: calc(23% + 2px); /* Connect between top and bottom lines */
    background-color: #35100B;
  }
  
  /* Final horizontal line to FM knob */
  .osc-switch-container::after {
    content: '';
    position: absolute;
    top: 34%; /* Center vertically */
    right: -36px; /* Extend to the FM knob */
    width: 30px; /* Length of line to reach FM knob */
    height: 2px;
    background-color: #35100B;
  }
  /* Add this rule to make the horizontal line move with the switch handle */
  .osc-vertical-switch::before {
    content: '';
    position: absolute;
    top: 25%; /* Position in upper half when inactive */
    right: -13.2px;
    width: 13px;
    height: 2px;
    background-color: #35100B;
  }
  
  /* Add this new rule to move the horizontal line when the switch is active */
  .osc-vertical-switch.active::before {
    top: 75%; /* Move to lower half when active, matching the handle position */
  }
  /* Updated oscillator knob colors */
  /* Default knob style (keeping the same structure) */
  .oscillator-module .knob {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: relative;
    cursor: grab;
    box-sizing: border-box;
    border: 0.5px solid #35100B;
    transform-origin: center center;
  }
  
  /* Red knobs: Pitch and Gain */
  .oscillator-module #pitch-knob, 
  .oscillator-module #gain-knob {
    background-color: #BA5446;
    box-shadow: 0 0 0 4.2px #BA5446, 0 0 0 6px #35100B;
  }
  
  /* Blue knobs: PWM and Quantize */
  .oscillator-module #pwm-knob,
  .oscillator-module #quantize-knob {
    background-color: #4E658B;
    box-shadow: 0 0 0 4.2px #4E658B, 0 0 0 6px #35100B;
  }
  
  /* Green knob: FM */
  .oscillator-module #fm-knob {
    background-color: #6B8F53;
    box-shadow: 0 0 0 4.2px #6B8F53, 0 0 0 6px #35100B;
  }