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

.toggle-label {
  display: flex;
  align-items: center;
}

.toggle-text {
  margin: 0;
  font-weight: bold;
  font-size: 20px;
  padding: 0 10px;
  transition: opacity 0.3s; /* Add transition for smoother effect */
}

.toggle-slider {
  width: 60px;
  height: 30px;
  background-color: #aaf0d1; /* Mint green background */
  position: relative;
  border-radius: 15px;
  cursor: pointer;
  margin-right: 10px; /* Add margin to create space */
  display: inline-block; /* Make the label inline-block for better alignment */
}

.slider-circle {
  width: 28px;
  height: 28px;
  background-color: #4caf50; /* Green slider */
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px; /* Adjust to prevent clipping */
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-input {
  display: none;
}

#toggle:checked ~ .toggle-slider .slider-circle {
  transform: translateX(30px);
}

#toggle:checked ~ .toggle-slider .slider-circle::before {
  content: 'A'; /* 'A' for Annually */
  color: white;
}

#toggle:checked ~ .toggle-label .toggle-text.monthly-text {
  opacity: 0.5;
}

#toggle:checked ~ .toggle-label .toggle-text.annually-text {
  opacity: 1;
}

#toggle:not(:checked) + .toggle-slider .slider-circle {
  transform: translateX(0);
}

#toggle:not(:checked) ~ .toggle-slider .slider-circle::before {
  content: 'M'; /* 'M' for Monthly */
  color: white;
}

#toggle:not(:checked) ~ .toggle-label .toggle-text.monthly-text,
#toggle:not(:checked) ~ .toggle-label .toggle-text.annually-text {
  opacity: 1;
}