<style>
/* ========== РАСКРЫВАЕМЫЕ БЛОКИ ========== */
.t702 .t-input-group[data-toggle-hidden] {
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    padding: 0 20px; /* паддинг слева и справа по 20 */
    margin-top: -12px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.4s ease, opacity 0.3s ease, padding 0.2s ease;
}

.t702 .t-input-group[data-toggle-hidden].visible {
    opacity: 1;
    padding-top: 0px;
    padding-bottom: 4px;
}

/* Стили списков */
.t702 .t-input-group[data-toggle-hidden] ul {
    list-style: disc inside;
    margin: 0;
    padding-left: 10px;
}

/* Отступы и оформление формы */
.t702 .t-input-group {
    margin-bottom: 10px;
}

.t-form__inputsbox .t-input-group ul {
    padding-left: 0px !important;
}

.t-form__inputsbox .t-input-group:nth-child(2n+7) {
    position: relative; /* важно для абсолютного позиционирования чекбокса */
}

.t-form__inputsbox .t-input-group:nth-child(2n+7) .t-text {
    box-sizing: border-box;
    padding: 24px 40px 24px 20px;
    font-weight: 500;
    background-color: #fff;
    border-radius: 4px;
    text-align: left;
}

/* ========== СТИЛИ ЧЕКБОКСОВ ========== */
.t-form__inputsbox .t-input-group:nth-child(2n+7) .t-checkbox__indicator {
    background-image: url(https://static.tildacdn.com/tild3135-3133-4165-a133-316136373438/Frame_3597.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 20px; /* прилип к правому краю с отступом 20px */
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    border: none;
    pointer-events: none;
}

.t-input-group:nth-child(2n+7) .t-checkbox__indicator:after {
    background-image: url(https://static.tildacdn.com/tild3135-3133-4165-a133-316136373438/Frame_3597.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: inherit;
    height: inherit;
    left: 0;
    top: 0;
    transform: none;
    border: none;
}

.t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator {
    background: none;
}

.t-form__inputsbox .t-input-group:nth-child(2n+7) .t-text {
    font-size: 18px;
}

</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const map = {
        licocheck: 8,
        telocheck: 10,
        maskscheck: 12,
        vannicheck: 14,
        nogicheck: 16,
        masagecheck: 18
    };

    for (const [name, index] of Object.entries(map)) {
        const block = document.querySelector(`.t702 .t-input-group:nth-child(${index})`);
        if (!block) continue;

        block.setAttribute("data-toggle-hidden", "");
        block.classList.remove("visible");
        block.style.height = "0px";

        const checkbox = document.querySelector(`input[name="${name}"]`);
        if (!checkbox) continue;

        checkbox.addEventListener("change", function () {
            if (checkbox.checked) {
                block.classList.add("visible");

                block.style.height = "auto";
                const fullHeight = block.scrollHeight + "px";

                block.style.height = "0px";
                requestAnimationFrame(() => {
                    block.style.height = fullHeight;
                });

            } else {
                block.style.height = block.scrollHeight + "px";
                block.classList.remove("visible");

                requestAnimationFrame(() => {
                    block.style.height = "0px";
                });
            }
        });
    }
});
</script>