/* ============================================================================
   Capi Când-IA Pro — Checkbox (Fase 0)
   Custom checkbox com check Lucide dourado quando marcado.
   Markup esperado:
     <label class="ds-checkbox">
       <input type="checkbox">
       <span class="ds-checkbox-box">
         <svg class="ds-checkbox-check" ...><polyline points="20 6 9 17 4 12"/></svg>
       </span>
       <span class="ds-checkbox-label">texto…</span>
     </label>
   ============================================================================ */

.ds-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.ds-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ds-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1px solid var(--ds-border-2);
  border-radius: var(--ds-radius-sm);
  background: transparent;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ds-trans-fast);
}

.ds-checkbox:hover .ds-checkbox-box {
  border-color: var(--ds-gold-border);
}

.ds-checkbox input[type="checkbox"]:checked + .ds-checkbox-box {
  background: var(--ds-gold-dim);
  border-color: var(--ds-gold-border);
}

.ds-checkbox input[type="checkbox"]:focus-visible + .ds-checkbox-box {
  box-shadow: var(--ds-shadow-focus-gold);
}

.ds-checkbox-check {
  width: 10px;
  height: 10px;
  stroke: var(--ds-gold);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: var(--ds-trans-fast);
}

.ds-checkbox input[type="checkbox"]:checked + .ds-checkbox-box .ds-checkbox-check {
  opacity: 1;
}

.ds-checkbox-label {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-2);
  line-height: 1.5;
}

.ds-checkbox-label a {
  color: var(--ds-gold);
  text-decoration: none;
}

.ds-checkbox-label a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}