/* DS §05.11 — Checkbox + radio (web) · token-only */

.ds-checkbox,
.ds-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg1);
  user-select: none;
}

.ds-checkbox input[type="checkbox"],
.ds-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--form-field-bg);
  border: 1.5px solid var(--form-field-border);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-smooth),
              background var(--dur-fast) var(--ease-smooth),
              box-shadow var(--dur-fast) var(--ease-smooth);
}

.ds-checkbox input[type="checkbox"] {
  border-radius: var(--rad-xs);
}

.ds-radio input[type="radio"] {
  border-radius: 50%;
}

/* Checked state */
.ds-checkbox input[type="checkbox"]:checked {
  background: var(--verdant-web);
  border-color: var(--verdant-web);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4.5 4.5 8 11 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.ds-radio input[type="radio"]:checked {
  border-color: var(--verdant-web);
  background: radial-gradient(circle at center, var(--verdant-web) 5px, transparent 5px);
}

/* Hover */
.ds-checkbox input[type="checkbox"]:hover:not(:checked),
.ds-radio input[type="radio"]:hover:not(:checked) {
  border-color: var(--verdant-web);
  background: var(--status-clean-bg);
}

/* Focus */
.ds-checkbox input[type="checkbox"]:focus-visible,
.ds-radio input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-web);
}

/* Disabled */
.ds-checkbox input[type="checkbox"]:disabled,
.ds-radio input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ds-checkbox:has(input:disabled),
.ds-radio:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Label text */
.ds-checkbox-label,
.ds-radio-label {
  line-height: 1.4;
}

.ds-checkbox-hint,
.ds-radio-hint {
  font-size: var(--text-xs);
  color: var(--fg3);
  margin-top: var(--sp-1);
}