/*-------------------
    Contacts info
-------------------*/
.contacts_info
{
    .tabs
    {
        display: flex;
        align-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: flex-start;


        .btn
        {
            position: relative;

            padding-block: var(--inner_gap_s);
            padding-inline: var(--block_padding);

            font-family: var(--font_family_secondary);
            font-size: var(--font_size_title_s);
            font-weight: 500;
            line-height: 156%;

            transition: color .2s linear;

            color: rgba(36, 36, 36, .5);


            &:before
            {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;

                display: block;

                width: calc(100% + var(--inner_gap));
                height: 100%;

                content: '';
                transition: opacity .2s linear;
                pointer-events: none;

                opacity: 0;
                background: var(--bg_light);

                clip-path: polygon(0% 0%, calc(100% - var(--block_padding_s)) 0%, 100% 100%, 0% 100%);
            }


            span
            {
                position: relative;
                z-index: 3;
            }


            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    color: var(--dark_color);
                }
            }


            &.active
            {
                color: var(--primary_color);


                &:before
                {
                    opacity: 1;
                }
            }
        }
    }


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

        background: var(--bg_light);

        clip-path: var(--clip_path_corner_top_right);
    }


    .data
    {
        width: 50%;

        border-right: 1px solid var(--border_color);


        .mob_title
        {
            display: none;

            padding-block: var(--inner_gap)  var(--inner_gap_xxs);
            padding-inline: var(--inner_gap);

            font-family: var(--font_family_secondary);
            font-size: 22px;
            font-weight: 500;
        }


        .section
        {
            display: flex;
            flex-direction: column;
            gap: var(--inner_gap);

            padding: var(--block_padding);

            font-size: var(--font_size_s);
            line-height: 171.429%;
        }


        .section + .section
        {
            border-top: 1px solid var(--border_color);
        }


        .title
        {
            margin-bottom: -4px;

            font-weight: 500;

            opacity: .3;
        }


        .item
        {
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--inner_gap);


            .label
            {
                width: 200px;
                max-width: 100%;

                font-weight: 500;
            }


            .val
            {
                width: calc(100% - 200px - var(--inner_gap));


                span
                {
                    color: var(--grey_color);
                }


                a
                {
                    white-space: nowrap;
                    text-decoration: none;

                    color: currentColor;


                    &.primary
                    {
                        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;
                    }
                }
            }
        }


        .accordion_item
        {
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, .1);


            .head
            {
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: flex-start;

                min-height: 50px;
                padding-block: var(--inner_gap_xs);
                padding-inline: var(--inner_gap_s) calc(40px + var(--inner_gap_s));

                transition: background .2s linear;


                .title
                {
                    font-size: var(--font_size_s);
                    font-weight: 500;
                    line-height: 171.429%;

                    opacity: 1;
                }


                .icon
                {
                    top: 0;
                    right: var(--inner_gap_s);
                    bottom: 0;

                    width: 20px;
                    height: auto;
                    margin-block: auto;

                    color: var(--light_color);
                    border: none;
                    background: var(--primary_color);

                    aspect-ratio: 1 / 1;


                    svg
                    {
                        width: 10px;
                    }
                }


                @media (hover: hover) and (pointer: fine)
                {
                    &:hover
                    {
                        background: #fafafa;
                    }
                }
            }


            .data
            {
                width: 100%;
                padding-block: 0 var(--inner_gap_s);
                padding-inline: var(--inner_gap_s);

                border: none;


                .text_block
                {
                    width: 480px;

                    opacity: 1;
                }
            }


            &.active
            {
                .head
                {
                    .icon
                    {
                        svg
                        {
                            transform: rotate(135deg);
                        }
                    }
                }
            }
        }


        .accordion_item + .accordion_item
        {
            margin-top: 0;
        }
    }


    .map_wrap
    {
        width: 50%;
        padding: var(--block_padding);


        .map
        {
            position: relative;

            overflow: hidden;

            height: 100%;
            min-height: 305px;

            background: var(--bg_grey);
        }
    }


    .feedback
    {
        display: flex;
        flex-direction: column;
        gap: 100px;

        width: 50%;
        padding: var(--block_padding);


        .title
        {
            font-family: var(--font_family_secondary);
            font-size: var(--font_size_title_s);
            font-weight: 500;
            line-height: 156%;
        }


        .form
        {
            width: 330px;
            max-width: 100%;
            margin-inline: auto;
        }
    }
}



@media print,
(max-width: 1279px)
{
    .contacts_info
    {
        .data
        {
            .item
            {
                .label
                {
                    width: 168px;
                }


                .val
                {
                    width: calc(100% - 168px - var(--inner_gap));
                }
            }
        }
    }
}



@media print,
(max-width: 1023px)
{
    .contacts_info
    {
        .data
        {
            width: 100%;
        }


        .map_wrap,
        .feedback
        {
            gap: var(--inner_gap);

            width: 100%;
            padding-top: 0;
        }
    }
}



@media (max-width: 767px)
{
    .contacts_info
    {
        .tabs
        {
            display: none;
        }


        .tab_content
        {
            display: flex;

            opacity: 1;

            clip-path: none;
        }


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


        .data
        {
            .mob_title
            {
                display: block;
            }


            .section
            {
                padding: var(--inner_gap);

                font-size: var(--font_size_xs);
            }


            .item
            {
                .label
                {
                    width: 104px;
                }


                .val
                {
                    width: calc(100% - 104px - var(--inner_gap));
                }
            }


            .accordion_item
            {
                .head
                {
                    .title
                    {
                        font-size: var(--font_size_xs);
                    }
                }


                .data
                {
                    .text_block
                    {
                        font-size: 11px;
                    }
                }
            }
        }


        .map_wrap,
        .feedback
        {
            padding: var(--inner_gap);
        }
    }
}