/*----------
    Quiz
----------*/
.quiz
{
    .inner
    {
        overflow: clip;
    }


    .steps_count
    {
        margin-top: var(--inner_gap_s);

        font-size: var(--font_size_xs);
        font-weight: 300;
        line-height: calc(100% + 8px);

        text-align: center;

        color: #818181;


        b
        {
            font-weight: 600;

            color: var(--primary_color);
        }
    }


    .progress
    {
        height: 1px;
        margin-inline: calc(var(--block_padding) * -1);
        margin-top: var(--inner_gap);

        background: #f5f5f5;


        div
        {
            height: 1px;

            transition: width .2s linear;

            background: var(--primary_color);
        }
    }


    .form
    {
        margin: 0;
    }


    .step
    {
        display: none;

        margin-top: var(--inner_gap_l);


        .title
        {
            font-size: 15px;
            font-weight: 500;
            line-height: 133.333%;
        }


        .desc
        {
            margin-top: var(--inner_gap_xxs);

            font-size: var(--font_size_xs);
            line-height: 141.667%;

            opacity: .4;
        }
    }


    .options
    {
        display: flex;
        flex-direction: column;
        gap: var(--inner_gap_xs);

        margin-top: var(--inner_gap);


        .field
        {
            position: relative;
        }


        .quiz_checkbox,
        .quiz_radio
        {
            display: block;

            cursor: pointer;


            input
            {
                display: none;


                &:checked + div
                {
                    color: var(--light_color);
                    background: var(--primary_color);


                    .check
                    {
                        border-width: 3px;
                        border-color: var(--light_color);
                    }
                }
            }


            div
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: nowrap;
                justify-content: flex-start;
                gap: var(--inner_gap_xs);

                min-height: 50px;
                padding-block: var(--inner_gap_xs);
                padding-inline: var(--inner_gap);

                font-size: 13px;
                font-weight: 500;
                line-height: 153.846%;

                transition: .2s linear;

                background: rgba(0, 127, 255, .05);


                .other &
                {
                    color: rgba(36, 36, 36, .4);
                }
            }


            .check
            {
                width: 14px;
                min-width: 14px;

                transition: border .2s linear;

                border: 1px solid #dae4ed;

                aspect-ratio: 1 / 1;
            }
        }


        .radio
        {
            .check
            {
                border-radius: 50%;
            }
        }
    }


    .your_solution
    {
        display: flex;
        flex-direction: column;
        gap: var(--inner_gap_s);

        margin-top: var(--inner_gap_l);


        .top
        {
            display: flex;
            align-content: flex-end;
            align-items: flex-end;
            flex-wrap: wrap;
            justify-content: space-between;


            .col
            {
                width: 212px;
                max-width: calc(100% - 105px);
            }
        }


        .swiper
        {
            overflow: visible;

            width: 100%;

            --spaceBetween: var(--inner_gap_xs);
            --slidesPerView: auto;
            --slideWidth: 155px;


            &:not(.swiper-initialized)
            {
                .swiper-wrapper
                {
                    gap: var(--spaceBetween);
                }
            }


            .swiper-slide
            {
                width: var(--slideWidth);
            }
        }


        .swiper-controls
        {
            margin-bottom: 4px;
        }


        .swiper-button-next,
        .swiper-button-prev
        {
            --swiper-navigation-size: 40px;
        }


        .solution
        {
            display: flex;
            flex-direction: column;

            text-align: center;
            text-decoration: none;

            color: currentColor;
            background: rgba(0, 127, 255, .05);


            .thumb
            {
                display: block;

                height: 90px;

                background: var(--bg_grey);


                & + *
                {
                    display: flex;
                    flex-direction: column;
                    gap: var(--inner_gap_xxs);

                    padding-block: var(--inner_gap_s) var(--inner_gap);
                    padding-inline: var(--inner_gap);
                }
            }


            .name
            {
                font-size: 13px;
                font-weight: 500;
                line-height: 115.385%;
            }


            .features
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;
                column-gap: var(--inner_gap_xs);
                row-gap: var(--inner_gap_xxs);

                font-size: var(--font_size_xxs);
                font-weight: 500;

                color: #a5b2be;
            }


            .link
            {
                margin-top: var(--inner_gap_xs);

                font-size: var(--font_size_xxs);
                font-weight: 500;

                color: var(--primary_color);

                text-decoration-line: underline;
                text-decoration-style: solid;
                text-decoration-skip-ink: auto;
                text-decoration-thickness: auto;
                text-underline-offset: auto;
                text-underline-position: from-font;
            }
        }
    }


    .relevant_case
    {
        display: flex;
        flex-direction: column;
        gap: var(--inner_gap_xs);

        margin-top: var(--inner_gap);


        .title
        {
            font-size: 15px;
            font-weight: 500;
            line-height: 133.333%;
        }


        .case
        {
            display: flex;
            align-content: stretch;
            align-items: stretch;
            flex-wrap: wrap;
            justify-content: space-between;

            text-decoration: none;

            color: currentColor;
            background: rgba(0, 127, 255, .05);


            .thumb
            {
                display: block;

                width: 155px;
                max-width: 100%;
                min-height: 90px;

                background: var(--bg_grey);


                & + *
                {
                    display: flex;
                    flex-direction: column;
                    gap: var(--inner_gap_xs);

                    width: calc(100% - 155px);
                    padding: var(--inner_gap);
                }
            }


            .name
            {
                font-size: 13px;
                font-weight: 500;
                line-height: 115.385%;
            }


            .link
            {
                font-size: var(--font_size_xxs);
                font-weight: 500;

                color: var(--primary_color);

                text-decoration-line: underline;
                text-decoration-style: solid;
                text-decoration-skip-ink: auto;
                text-decoration-thickness: auto;
                text-underline-offset: auto;
                text-underline-position: from-font;
            }
        }
    }


    .fields
    {
        margin-top: var(--block_padding_s);
    }


    .btns
    {
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--inner_gap);

        margin-top: var(--inner_gap);


        .prev_btn
        {
            display: none;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--inner_gap_xxs);

            margin-right: auto;

            font-size: var(--font_size_xs);
            font-weight: 600;

            transition: opacity .2s linear;

            opacity: .3;


            &.show
            {
                display: flex;
            }


            .icon
            {
                display: block;

                width: 5px;

                transform: translateX(1px) scale(-1, 1);

                aspect-ratio: 1 / 1.5;
            }


            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    opacity: 1;
                }
            }
        }


        .next_btn,
        .send_btn
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--inner_gap_xxs);

            width: 190px;
            height: 60px;

            font-size: var(--font_size_xs);
            font-weight: 600;

            transition: .2s linear;

            color: var(--light_color);
            background: var(--gradient_primary);

            clip-path: var(--clip_path_double_corners_small);


            &.hide
            {
                display: none;
            }


            &.disabled
            {
                pointer-events: none;

                opacity: .5;
            }


            .icon
            {
                display: block;

                width: 5px;

                transform: translateX(1px);

                aspect-ratio: 1 / 1.5;
            }


            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    transform: scale(1.1);
                }
            }
        }
    }
}



@media (max-width: 767px)
{
    .quiz
    {
        .btns
        {
            .prev_btn
            {
                order: 2;

                width: 100%;
            }


            .next_btn,
            .send_btn
            {
                width: 100%;
            }
        }
    }
}