.c_leasing_calc {
    width: 100%;
    height: fit-content;
    padding: 20px 25px;

    overflow: hidden;

    border: 1px solid var(--grey-light-clr);
    box-shadow: 0px 0px 2px #171a1f14, 0px 1px 2.5px #171a1f12;

    background: #fff;

    border-radius: 16px;

    .calc_heading__price_alert{
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price_alert{
            font-size: 13px;
            font-weight: 700;

            color: var(--error-clr);

            padding-top: 5px;
            max-width: 310px;

            @media (max-width: 800px) {
                display: none;
            }
        }
    }

    .calc_title{
        font-size: 24px;
        font-weight: 700;

        color: var(--black-clr);

        overflow: hidden;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;

        max-height: 30px;
    }

    .calc_description {
        font-size: 14px;
        font-weight: 400;

        font-family: "Roboto", sans-serif;

        color: var(--grey-clr);

        overflow: hidden;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;

        max-height: 17.1px;
    }

    &.expanded {
        .obj_info__leasing_calc_form{
            grid-template-columns: calc(100% - 350px) 310px;
            gap: 40px;
        }
        .obj_info {
            opacity: 1;
            height: 100%;
            visibility: visible;
        }
        @media(max-width: 1024px){
            .obj_info__leasing_calc_form{
                grid-template-columns: calc(100% - 315px) 275px;
            }
            .obj_info .adds_info{
                display: none;
            }
        } @media (max-width: 800px){
            .obj_info__leasing_calc_form{
                grid-template-columns: 100% 0px;
                gap: 0;
            }

            .leasing_calc_form{visibility: hidden;opacity: 0;height: 0;}
        }
    }

    &.expand_mobile_calc_form{
        .obj_info__leasing_calc_form{
            grid-template-columns: 0px 100%;
            gap: 0;
        }
        .obj_info {
            opacity: 0;
            visibility: hidden;
            height: 0;
        }
        .leasing_calc_form{
            opacity: 1;
            visibility: visible;
            height: auto;
        }
    }

    .obj_info__leasing_calc_form{
        display: grid;
        grid-template-columns: 0px 100%;

        gap: 0;

        transition: 0.5s ease all;
    }

    .obj_info{
        position: relative;

        opacity: 0;
        visibility: hidden;

        height: 0;

        transition: 0.5s ease all;

        margin-top: 20px;

        .obj_info_failed{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(2px);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #ffffff96;

            display: none;

            &.showed{
                display: block;
            }

            .err_title{
                font-size: 20px;
                color: var(--black-clr);

                margin-bottom: 40px;

                text-align: center;
                text-wrap: balance;

                font-weight: 600;

                text-shadow: 0 0 20px #fff;
            }

            .flex{
                flex-wrap: wrap;
                gap: 10px;
            }

            .secondary_btn, .primary_btn {
                white-space: nowrap;
            }
        }

        .general_info__adds_info{
            display: grid;
            /*grid-template-columns: calc(100% - 450px) 430px;*/
            grid-template-columns: calc(50% - 10px) calc(50% - 10px);
            gap: 20px;

            @media(max-width: 1024px){
                grid-template-columns: 1fr;
                gap: 0;
            }

            /*height: calc(100% - 102px);*/
            overflow: auto;

            transition: 1.5s ease all;

            &.unloaded {
                grid-template-columns: 100% 0px;
                .adds_info {
                    visibility: hidden;
                }
            }
        }

        .adds_info{
            @media(max-width: 1024px){display: none;}

            width: 100%;

            overflow: auto;

            padding-left: 10px;

            border-left: 1px solid var(--grey-light-clr);

            height: 350px;

            transition: 0.5s ease all;

            .group{
                display: none;
                &:has(.item){
                    display: block;
                }
                .group_name{
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--black-clr);

                    margin-bottom: 10px;
                }

                .group_items {
                    padding: 0 5px 0 10px;
                    .item {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        align-items: flex-start;
                        gap: 10px;

                        font-size: 14px;
                        color: var(--grey-clr);
                        margin-bottom: 10px;

                        .item_value{
                            color: var(--black-clr);
                            overflow-wrap: anywhere;

                            text-align: right;
                        }
                    }
                }
            }
        }

        .obj_img, .obj_img_placeholder{
            height: 200px;
            width: 100%;
            display: block;

            object-fit: contain;
            object-position: center;

            border: none;

            color: transparent;

            transition: 0.5s ease all;

            &.obj_img{
                visibility: visible;
                opacity: 1;
            }

            &.obj_img_placeholder{
                visibility: hidden;
                opacity: 0;

                height: 0;
            }
        }

        .obj_title{
            font-size: 24px;
            font-weight: 700;

            min-height: 29px;

            margin-top: 10px;

            color: var(--black-clr);
        }

        .obj_description{
            font-size: 14px;
            font-weight: 400;

            margin-top: 5px;

            font-family: "Roboto", sans-serif;

            color: var(--grey-clr);
        }

        .obj_properties{
            margin-top: 10px;
            .property{
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 5px;

                margin-bottom: 2px;

                .name{
                    font-size: 13px;
                    color: var(--grey-clr);
                }

                .value{
                    font-size: 13px;
                    color: var(--black-clr);
                }
            }
        }

        &.unloaded {
            --gradient-bg: linear-gradient(90deg,
                var(--green-clr) 0%,
                var(--green-light-clr) 50%,
                var(--green-clr) 100%,
                var(--green-light-clr) 75%,
                var(--green-clr) 100%
            );

            .obj_title, .obj_img_placeholder{
                background: var(--gradient-bg);
                background-size: auto;
                background-size: 200% 100%;
                animation: swimmingGradientBg 3s linear infinite;

                border-radius: 6px;
            }

            .obj_img_placeholder{
                height: 200px;
                width: 100%;

                visibility: visible;
                opacity: 1;
            }

            .obj_img{
                visibility: hidden;
                opacity: 0;

                height: 0;
            }

            .obj_description {
                margin-top: 10px;

                .unloaded_line {
                    height: 20px;
                    background: var(--gradient-bg);
                    background-size: 200% 100%;
                    animation: swimmingGradientBg 3s linear infinite;
                    margin-top: 5px;

                    border-radius: 6px;

                    &:nth-child(1) {width: 75%;};
                    &:nth-child(2) {width: 92%;};
                    &:nth-child(3) {width: 100%;};
                }
            }

            .obj_properties{
                .property{
                    .name, .value{
                        color: transparent;

                        height: 15px;
                        background: var(--gradient-bg);
                        background-size: 200% 100%;
                        animation: swimmingGradientBg 3s linear infinite;
                        border-radius: 6px;

                        min-width: 30px;
                        &.value{min-width: 100px;}
                    }
                }
            }
        }

        .mobile_price_display {
            display: none;

            @media(max-width: 800px){
                display: block;
            }

            .price_block{
                margin: 16px 0;

                padding: 17px;
                border: 1px solid var(--green-clr);
                border-radius: 16px;

                background: var(--green-light-clr);

                .monthly_pay__secondary_btn{
                    @media (max-width: 450px) {
                        flex-direction: column;
                        align-items: center;
                    }
                }

                .monthly_pay{
                    .label{
                        font-size: 10px;
                        line-height: 15px;
                        font-weight: 700;
                        color: var(--green-clr);
                    }
                    .value{
                        font-size: 30px;
                        line-height: 30px;
                        font-weight: 900;

                        color: var(--green-clr);
                    }
                }

                .secondary_btn{
                    @media (max-width: 450px) {
                        margin-top: 10px;
                    }
                }

                .obj_sum{
                    gap: 5px;

                    .label{
                        font-size: 12px;
                        line-height: 16px;
                        font-weight: 400;
                        color: var(--grey-clr);
                    }
                    .value{
                        font-size: 14px;
                        line-height: 20px;
                        font-weight: 600;

                        color: var(--black-clr);
                    }
                }
            }

            .leasing_sets{
                .param{
                    .label{
                        font-size: 10px;
                        line-height: 15px;
                        font-weight: 700;
                        color: var(--grey-clr);

                        margin-bottom: 4px;
                    }
                    .value{
                        font-size: 14px;
                        line-height: 20px;
                        font-weight: 700;

                        color: var(--black-clr);
                    }
                }
            }

            .mobile_actions_cont{
                .primary_btn, .secondary_btn {
                    width: 100%;
                    margin-top: 5px;
                }

                .secondary_btn {
                    margin-top: 15px;
                }
            }
        }
        .after_search_leasing_form{
            @media(max-width: 800px){
                display: none;
            }

            margin-top: 40px;
        }
    }

    .leasing_calc_form{
        overflow-x: hidden;

        transition: 0.5s ease all;

        width: 100%;
        height: auto;

        .field_container {
            margin: 30px 0;
        }

        .calc_result {
            &.hidden {
                display: none;
            }

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

                font-family: "Roboto", sans-serif;

                margin-bottom: 30px;

                .monthly_payment{
                    .label{font-size: 14px;color: var(--grey-clr);}
                    .value{
                        font-size: 30px;
                        font-weight: 900;
                        color: var(--green-clr);

                        font-family: "Inter", sans-serif;
                    }
                }

                .inc_rate{
                    background-color: var(--green-light-clr);
                    color: var(--green-clr);
                    font-size: 12px;
                    font-weight: 600;

                    border-radius: 16px;

                    padding: 6px 12px;
                    width: fit-content;

                    margin-bottom: 5px;
                }
            }

            .secondary_btn{
                margin-bottom: 5px;

                display: none;
                @media(max-width: 800px){
                    display: block;
                }
            }

            .primary_btn, .secondary_btn{
                width: 100%;
            }
        }
    }
}

@keyframes swimmingGradientBg {
    /* Construction for css
    background: linear-gradient(45deg, #000, #2b2b2b, #747474, #585858);
    background-size: auto;
    background-size: 400% 400%;
    */
    0% {
        background-position: 200% 0; /* Начинаем справа за пределами */
    }
    100% {
        background-position: -200% 0; /* Заканчиваем слева за пределами */
    }
    /*100% { background-position: 0% 50%; }*/
}