/* toggle animation INPUT */
.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-label span {
  position: relative;
  padding-left: 60px;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.95rem;
}

.checkbox-label span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 26px;
  background: #515f76;
  border: 2px solid var(--border-color);
  border-radius: 13px;
  transition: all 0.3s ease;
}

.checkbox-label span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.checkbox-label input[type="checkbox"]:checked + span::before {
  background: #ffffff;
  border-color: var(--border-color);
}

.checkbox-label input[type="checkbox"]:checked + span::after {
  left: 25px;
  background: #1f2937;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.checkbox-label:hover span::before {
  border-color: var(--primary-color);
}


/* Toggle Loading Animation */
.checkbox-label input[type="checkbox"]:disabled + span::before {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-label input[type="checkbox"]:disabled + span::after {
  animation: togglePulse 1.5s ease-in-out infinite;
}