/*
 * GX CHECKBOX — Premium Minimal Neon
 * Dark-only, Flamingo Pink subtle glow
 */

.gx-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;

  font-size: 1rem;
  color: var(--color-text-primary);

  transition: color var(--transition-fast);
}

/* Hide native checkbox */
.gx-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom box */
.gx-checkbox-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;

  background: var(--color-bg-card);
  border: 2px solid var(--color-border-soft);

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
  border-color var(--transition),
  background var(--transition),
  box-shadow var(--transition-fast),
  transform var(--transition-fast);
}

/* Checkmark icon */
.gx-checkbox-check {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--transition), transform var(--transition-fast);

  background: var(--color-brand);
  clip-path: polygon(
    14% 44%, 0 58%, 40% 100%,
    100% 6%, 84% -6%, 38% 72%
  );
}

/* Hover — soft neon border */
.gx-checkbox:hover .gx-checkbox-box {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-glow-pink-soft);
}

/* Checked state */
.gx-checkbox input:checked + .gx-checkbox-box {
  background: rgba(255, 79, 163, 0.12);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-glow-pink);

  transform: translateY(-1px);
}

/* Reveal checkmark */
.gx-checkbox input:checked + .gx-checkbox-box .gx-checkbox-check {
  opacity: 1;
  transform: scale(1);
}

/* Disabled */
.gx-checkbox.disabled,
.gx-checkbox input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}