/* ══════════════════════════════════════════════
   gss-check-box.css — Reusable Checkbox Component
   ══════════════════════════════════════════════ */

:root {
  --gss-checkbox-size: 18px;
  --gss-checkbox-border: var(--color-border-medium, #d1d5db);
  --gss-checkbox-bg: var(--color-surface-card, #ffffff);
  --gss-checkbox-checked-bg: var(--color-brand-orange, #f97316);
  --gss-checkbox-checked-border: var(--color-brand-orange, #f97316);
  --gss-checkbox-hover-bg: rgba(249, 115, 22, 0.1);
  --gss-checkbox-focus-ring: rgba(249, 115, 22, 0.3);
  --gss-checkbox-text: var(--color-text-primary, #111827);
  --gss-checkbox-desc: var(--color-text-secondary, #6b7280);
  --gss-checkbox-error: var(--color-danger-red, #ef4444);
  --gss-checkbox-disabled-bg: #e5e7eb;
}

[data-theme="dark"] {
  --gss-checkbox-bg: var(--color-surface-elevated, #374151);
  --gss-checkbox-border: var(--color-border-medium, #4b5563);
  --gss-checkbox-text: var(--color-text-primary, #f9fafb);
  --gss-checkbox-desc: var(--color-text-secondary, #9ca3af);
  --gss-checkbox-disabled-bg: #1f2937;
}

/* Wrapper */
.gss-check-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm, 12px);
  font-family: inherit;
  font-size: var(--font-size-base, 14px);
  position: relative;
}

/* Hide native input visually but keep it focusable for accessibility */
.gss-check-box__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Custom Box */
.gss-check-box__control {
  flex-shrink: 0;
  width: var(--gss-checkbox-size);
  height: var(--gss-checkbox-size);
  background: var(--gss-checkbox-bg);
  border: 1.5px solid var(--gss-checkbox-border);
  border-radius: var(--radius-xs, 3px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast, 0.15s) ease;
  cursor: pointer;
  margin-top: 2px; /* Align with text baseline */
}

/* SVG Checkmark */
.gss-check-box__icon {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--transition-fast, 0.15s) ease;
}

/* Label & Description Container */
.gss-check-box__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.gss-check-box__label {
  color: var(--gss-checkbox-text);
  font-weight: 500;
  user-select: none;
}

.gss-check-box__description {
  color: var(--gss-checkbox-desc);
  font-size: 0.85em;
  user-select: none;
}

/* Error Message */
.gss-check-box__error-msg {
  color: var(--gss-checkbox-error);
  font-size: 0.85em;
  font-weight: 500;
  margin-top: 2px;
  display: none;
}

/* ---------------
   STATES
   --------------- */

/* Focus */
.gss-check-box__input:focus-visible ~ .gss-check-box__control {
  outline: none;
  border-color: var(--color-brand-orange, #f97316);
  box-shadow: 0 0 0 3px var(--gss-checkbox-focus-ring);
}

/* Hover */
.gss-check-box:hover:not(.gss-check-box--disabled):not(.gss-check-box--readonly) .gss-check-box__control {
  border-color: var(--color-brand-orange, #f97316);
  background-color: var(--gss-checkbox-hover-bg);
}

/* Checked */
.gss-check-box__input:checked ~ .gss-check-box__control {
  background-color: var(--gss-checkbox-checked-bg);
  border-color: var(--gss-checkbox-checked-border);
}

.gss-check-box__input:checked ~ .gss-check-box__control .gss-check-box__icon {
  opacity: 1;
  transform: scale(1);
}

/* Disabled */
.gss-check-box--disabled {
  opacity: 0.6;
}

.gss-check-box--disabled .gss-check-box__control,
.gss-check-box--disabled .gss-check-box__content {
  cursor: not-allowed;
}

.gss-check-box--disabled .gss-check-box__control {
  background-color: var(--gss-checkbox-disabled-bg);
  border-color: var(--gss-checkbox-border);
}

.gss-check-box--disabled .gss-check-box__input:checked ~ .gss-check-box__control {
  background-color: var(--gss-checkbox-border); /* Muted checked state */
  border-color: var(--gss-checkbox-border);
}

/* Readonly */
.gss-check-box--readonly .gss-check-box__control,
.gss-check-box--readonly .gss-check-box__content {
  cursor: default;
}

/* Error */
.gss-check-box--error .gss-check-box__control {
  border-color: var(--gss-checkbox-error);
}

.gss-check-box--error .gss-check-box__error-msg {
  display: block;
}