/* ===== LFO custom checkbox (v2) ===== */
.lfo-checkwrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;              /* ~12px */
  cursor: pointer;
}

/* Скрытый нативный input */
.lfo-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Видимая кнопка — круг гарантированно */
.lfo-check {
  position: relative;

  /* круг: фикс. размер + запрет растягивания + квадратность */
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  aspect-ratio: 1 / 1;

  /* круглая форма и корректная модель бокса */
  border-radius: 9999px;
  box-sizing: border-box;

  /* центрируем «галку» идеально по центру */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* LIGHT дефолт */
  background: #ffffff;          /* white */
  border: 1px solid #1f2937;    /* gray-800 */

  transition: background .2s ease, border-color .2s ease, outline-color .2s ease, color .2s ease;
}

/* DARK дефолт */
html.dark .lfo-check {
  background: rgba(31, 41, 55, .30);  /* gray-800/30 */
  border-color: #e5e7eb;              /* gray-200 */
}

/* Focus-ring на доступность */
.lfo-checkbox:focus-visible + .lfo-check {
  outline: 2px solid #60a5fa;          /* blue-400 */
  outline-offset: 2px;
}

/* Галочка — рисуем псевдоэлементом */
.lfo-check::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  border-left: 2.4px solid currentColor;
  border-bottom: 2.4px solid currentColor;
  transform: rotate(-45deg);
  /* больше не смещаем вручную, флекс уже центрирует */
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  opacity: 0;
  transition: opacity .12s ease-out;
}


/* ===== Состояния CHECKED ===== */

/* LIGHT: при нажатии — фон остаётся белым, бордер blue-800, галочка blue-800 */
.lfo-checkbox:checked + .lfo-check {
  background: #ffffff;                 /* белый остаётся */
  border-color: #1e40af;               /* blue-800 */
  color: #1e40af;                      /* цвет галочки (currentColor) */
}
.lfo-checkbox:checked + .lfo-check::after {
  opacity: 1;
}

/* DARK: при нажатии — фон всё ещё gray-800/30, бордер blue-200, галочка blue-200 */
html.dark .lfo-checkbox:checked + .lfo-check {
  background: rgba(31, 41, 55, .30);   /* gray-800/30 — без изменений */
  border-color: #d7e9ff;               /* blue-200 */
  color: #d7e9ff;                      /* цвет галочки */
}
html.dark .lfo-checkbox:checked + .lfo-check::after {
  opacity: 1;
}