.showText{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.showText .labelContainer p {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: 
        opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1),
        max-width 0.2s cubic-bezier(0.2, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
    transform: translateX(8px);
}

.showText:hover .labelContainer p {
    opacity: 1;
    max-width: 200px; /* or enough to fit your text */
    transform: translateX(0);
    gap: 8px;
}

/* ------------------------------------------------------------ */

.labelContainer{
    padding: 8px 8px 8px 8px;
    border-radius: 999px;
    
    display: flex;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
    gap: 0px;
}

.showText:hover .labelContainer{
    padding: 8px 8px 8px 16px ;
    gap: 8px ;
    background-color: #A6D8B316;
    box-shadow: inset 0 0 0 2px #A6D8B316;
}

/* ------------------------------------------------------------ */

.switch{
    justify-content: center;
    height: 32px;
}

#specOverlay{
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.2, 0, 0.2, 1);
    position: absolute;
    max-width: 1040px;
    pointer-events: none; /* Optional: only if overlay shouldn't be interactive */
    object-fit: contain;
}

#specOverlay.show{
    opacity: 1;

}

/* Hide default checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* The background track */
.slider {
  display: inline-block;
  background-color: var(--text-sl-32);
  border-radius: 999px;
  width: 52px;
  height: 32px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

/* The dot inside the switch */
.dot {
  background-color: var(--border);
  border-radius: 999px;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 8px;
  left: 8px;
  transition: transform, background-color, width, height, top,  0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Active state when checkbox is checked */
input:checked + .slider {
  background-color: var(--primary);
}

input:checked + .slider .dot {
  background-color: var(--secondary);
  transform: translateX(16px);
  top: 4px;
  width: 24px;
  height: 24px;
}