/**
 * Единый кастомный чекбокс: label > input + span (input скрыт, маркер ::before + галочка ::after).
 * Разметка: auth/signup (.form-terms-label), nucleus (.nucleus-calendar-month-closed-wrap), FM (.fm-checkbox-option).
 * Токены: css/variables.css (--checkbox-control-*).
 */

.form-terms-label input[type='checkbox'],
.nucleus-calendar-month-closed-wrap input[type='checkbox'],
.fm-checkbox-option input[type='checkbox'] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    cursor: pointer;
}

.form-terms-label input[type='checkbox'] + span,
.nucleus-calendar-month-closed-wrap input[type='checkbox'] + span,
.fm-checkbox-option input[type='checkbox'] + span {
    padding-left: var(--checkbox-control-label-inset);
    position: relative;
    display: block;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: var(--line-height-normal);
}

.form-terms-label input[type='checkbox'] + span::before,
.nucleus-calendar-month-closed-wrap input[type='checkbox'] + span::before,
.fm-checkbox-option input[type='checkbox'] + span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--checkbox-control-size);
    height: var(--checkbox-control-size);
    border: var(--checkbox-control-border);
    border-radius: var(--checkbox-control-radius);
    background: var(--checkbox-control-bg);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        outline-color var(--transition-base);
    cursor: pointer;
    box-sizing: border-box;
}

.form-terms-label input[type='checkbox']:checked + span::before,
.nucleus-calendar-month-closed-wrap input[type='checkbox']:checked + span::before,
.fm-checkbox-option input[type='checkbox']:checked + span::before {
    background: var(--checkbox-control-bg-checked);
    border-color: var(--checkbox-control-border-checked);
}

.form-terms-label input[type='checkbox']:checked + span::after,
.nucleus-calendar-month-closed-wrap input[type='checkbox']:checked + span::after,
.fm-checkbox-option input[type='checkbox']:checked + span::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 10px;
    border: solid var(--checkbox-control-check);
    border-width: 0 2px 2px 0;
    box-sizing: border-box;
}

.form-terms-label input[type='checkbox']:hover + span::before,
.nucleus-calendar-month-closed-wrap input[type='checkbox']:hover + span::before,
.fm-checkbox-option input[type='checkbox']:hover + span::before {
    border-color: var(--color-accent-primary);
    background: var(--checkbox-control-bg-hover);
}

.form-terms-label input[type='checkbox']:checked:hover + span::before,
.nucleus-calendar-month-closed-wrap input[type='checkbox']:checked:hover + span::before,
.fm-checkbox-option input[type='checkbox']:checked:hover + span::before {
    background: var(--checkbox-control-bg-checked);
    border-color: var(--checkbox-control-border-checked);
}

.form-terms-label input[type='checkbox']:focus + span::before,
.form-terms-label input[type='checkbox']:focus-visible + span::before,
.nucleus-calendar-month-closed-wrap input[type='checkbox']:focus + span::before,
.nucleus-calendar-month-closed-wrap input[type='checkbox']:focus-visible + span::before,
.fm-checkbox-option input[type='checkbox']:focus + span::before,
.fm-checkbox-option input[type='checkbox']:focus-visible + span::before {
    outline: 2px solid var(--checkbox-control-focus);
    outline-offset: 2px;
}