/* Галочка согласия.

   Квадрат свой, а не системный: системный не красится под тему
   и в тёмной теме выглядит чужой деталью.

   Цель нажатия — вся строка целиком, вместе с текстом: на телефоне
   попасть в квадратик 24 на 24 трудно, а промах по согласию читается
   как «форма не работает». */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  cursor: pointer;
}

/* Настоящий input не удаляем и не прячем display: none — иначе поле
   выпадает из порядка обхода с клавиатуры и перестаёт объявляться. */
.check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.check__box {
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
  margin-top: 0.4cqw;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--on-accent);
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}

.check:active .check__box { transform: scale(.92); }

.check__box .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--fast) var(--ease),
              transform var(--base) var(--ease);
}

.check__input:checked + .check__box {
  background: linear-gradient(140deg, var(--accent-hi), var(--accent));
  border-color: transparent;
}

.check__input:checked + .check__box .icon {
  opacity: 1;
  transform: none;
}

/* Кольцо в фокусе — только при обходе с клавиатуры: по нажатию пальцем
   оно выглядело бы застрявшей подсветкой. */
.check__input:focus-visible + .check__box {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.check__text {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-dim);
}

/* Обязательное согласие светлее необязательного: без него кнопка
   не работает, и это должно быть заметно до нажатия, а не после. */
.check--required .check__text { color: var(--text); }

/* Наведение только там, где есть мышь: на телефоне hover залипает
   после касания и оставляет кнопку подсвеченной. */
@media (hover: hover) {
  .check:hover .check__box { border-color: var(--accent-dim); }
}