input[type="radio"] {
    appearance: none;
    border: 0.1em solid var(--color-first);
    background: var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    display: inline-grid;
    place-content: center;

    &::before {
        content: '';
        width: 0.8em;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        transition: scale .3s ease-in-out;
        scale: 0;
    }
    &:checked::before {
        background: var(--color-first);
        scale: 1;
    }
    &:focus {
        outline: none;
    }
    &:focus-visible {
        border-color: var(--color-focus);

        &:checked::before {
            background: var(--color-focus);
        }
    }
    &:focus-visible + label {
        color: var(--color-focus);
    }
}

input[type=checkbox] {
    appearance: none;
    border: 0.1em solid var(--color-first);
    border-radius: 0.2em;
    background: var(--color-white);
    cursor: pointer;
    display: inline-grid;
    place-content: center;

    &::before {
        content: "";
        width: 0.8em;
        height: 0.8em;
        scale: 0;
        transform-origin: bottom;
        transition: scale .3s ease-in-out, background 0s .4s linear;
        background: var(--color-white);
        /* Галка */
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }
    &:checked::before {
        background: var(--color-first);
        scale: 1;
        transform-origin: top;
        transition: scale .3s ease-in-out;
    }
    &:focus {
        outline: none;
    }
    &:focus-visible {
        outline: 2px solid var(--color-focus);

        &:checked::before {
            background: var(--color-focus);
        }
    }
    &:focus-visible + label {
        color: var(--color-focus);
    }
}

.calc {
    display: flex;
    flex-flow: row wrap;
    gap: 44px 72px;
}

/* RIGHT COLUMN */
.calc__control {
    flex: 0 0 calc((100% - 72px) / 3);
}

.control-sticky {
    position: sticky;
    top: 51px;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
}

.control__container {
    display: flex;
    flex-flow: column nowrap;
    transition: opacity .3s ease-in-out;

    &.translucent {
        opacity: .6;
    }
}

.control__list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: 8px 24px;
    margin-left: 1em;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.control-list__item {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    margin: 0;
    font-weight: initial;
    white-space: nowrap;

    &:hover {
        color: var(--color-first);

        .item__field {
            border-color: var(--color-first);
        }
    }
}

.control-list__item .item__field {
    margin: 0 0.5em 0 0;
    vertical-align: text-top;
    width: 1.3em;
    height: 1.3em;
}

.control-list__item .item__label {
    margin: 0;
}

.calc__control-subjects {
    .control__list {
        flex-flow: row wrap;
    }
    .control-list__item {
        flex: 0 0 calc((100% - 32px)/2);
        white-space: normal;
    }
}

.control__btn {
    background: var(--color-first);
    color: var(--color-white);
    border: none;
    border-radius: 2em;
    font-size: 16px;

    &:focus-visible {
        outline: 2px dashed var(--color-focus);
        outline-offset: .3em;
    }

    &:focus-visible,
    &:hover {
        background: var(--color-focus);
    }
}

.control__btn.submit {
    height: 3em;
}

/* LEFT COLUMN */
.calc__content {
    flex: 1;
    margin-top: 8px;
}

.oop__specialities {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 16px;
    min-width: 600px;
}

.specialization {
    border-radius: 10px;
    overflow: hidden;
}

.specialization__title {
    display: block;
    width: 100%;
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 600;
    user-select: none;

    &:focus,
    &:hover {
        cursor: pointer;
        background: var(--color-focus);
    }
}

.specialization__body {
    font-size: clamp(14px, 1.6vw, 16px);
}

.specialization__body ul {
    margin-left: 2em;
}


@media (max-width: 1200px) {
    .control-sticky {
        position: static;
    }

    .calc__control {
        flex-basis: 100%;
    }
}