/* Toggle Button Styling */
.toggleBtn {
  appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  background-color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  border: none;
  outline: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toggleBtn:checked {
  background-color: #000;
}

.toggleBtn:checked::before {
  transform: translateX(20px);
}

.toggleBtn::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}