/* Чекбоксы и их обработка */
.checkbox-label {
    position: relative;
    padding-left: calc(20px + 14px);

    display: flex;
    gap: 14px;
    align-items: center;

    font-size: 14px;
    line-height: 110%;
    color: var(--color-foreground-opacity);
    text-transform: lowercase;
    letter-spacing: -0.2px;
}

.checkbox-label a {
    letter-spacing: -0.2px;

    color: var(--color-foreground-opacity);
    border-bottom: 1px var(--color-foreground-opacity) solid;
}

.checkbox-label:first-of-type {
    align-items: start;
}

.checkbox-label input {
    position: absolute;
    left: 0;
    top: 0;

    opacity: 0;
    cursor: pointer;

    height: 20px;
    width: 20px;

    z-index: 100;
    padding: 0;
    margin: 0;
}

.checkmark {
    position: absolute;
    left: 0;
    top: 0;

    height: 20px;
    width: 20px;

    transition: all 0.2s ease;

    justify-content: center;
    align-items: center;
    display: flex;

    border: 1px var(--color-foreground-primary) solid;
    border-radius: 24px;
}

.checkbox-label .checkmark.error-border {
    border-color: var(--color-red-opacity);
}

.checkmark-svg {
    width: 9.51px;
    height: 7.01px;
    object-fit: contain;
}

.checkmark-sv path {
    fill: var(--color-background-primary);
}

.checkbox-label input:checked ~ .checkmark path {
    fill: var(--color-foreground-primary);
}


@media screen and (max-width: 1200px) {
    .checkbox-label {
        letter-spacing: -0.8px;
    }
}

@media screen and (max-width: 725px) {
    .checkbox-label {
        font-size: 12px;
    }
}