.catalog_leasing_obj__c_leasing_calc{
    /*width: min(calc(50% - 10px), 450px);*/
    width: calc(50% - 10px);
    @media(max-width: 900px){
        width: 100%;
    }

    display: grid;
    grid-template-columns: 100% 0px;
    @media(max-width: 800px){
        grid-template-columns: 100%;
    }
    gap: 0 40px;

    border-radius: 8px;

    background: #fff;

    transition: 0.3s ease all;

    &:has(.c_leasing_calc.expand_mobile_calc_form){
        width: 100%;

        grid-template-columns: calc(100% - 40px - 310px) 310px;

        @media(min-width: 800px){
            .catalog_leasing_obj{
                box-shadow: 0 0 10px var(--green-clr);
            }
        }

        @media (max-width: 800px){
            grid-template-columns: 100%;

            box-shadow: 0 0 10px var(--green-clr);

            .mobile_price_display{
                height: 0px;
                visibility: hidden;

                transition: 0.3s ease all;
            }
        }


        .c_leasing_calc{
            opacity: 1;
            visibility: visible;

            padding: 17px;

            height: 100%;
            width: 100%;

            .calc_heading__price_alert{
                margin-bottom: 15px;
            }
        }
    }

    .catalog_leasing_obj {
        overflow: hidden;

        transition: 0.3s ease all;
    }

    .links{
        a{
            font-size: 12px;
            margin: 4px 0;
            &:hover{
                color: var(--info-clr);
            }
        }
    }


    .c_leasing_calc{
        box-shadow: none;
        border: none;

        overflow: hidden;
        visibility: hidden;

        height: 0px;
        padding: 0;

        transition: 0.3s ease all;

        @media (max-width: 800px){
            background: var(--green-light-clr);
        }

        .field_container:first-of-type{
            margin-top: 0;
        }

        .calc_title, .calc_description{
            display: none;
        }
    }
}

.catalog_leasing_obj {
    border-radius: 8px;

    .leasing_obj_image_cont{
        position: relative;
        height: 245px;
        overflow: hidden;

        .loading{
            --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%
            );

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

            border-radius: 8px 8px 0 0;

            height: 245px;
            width: 100%;

            position: absolute;
            inset: 0;

            display: block;

            opacity: 0;
            visibility: hidden;

            transition: 0.3s ease all;
        }

        &:has(img.unloaded){
            .loading{
                opacity: 1;
                visibility: visible;
            }

            .specs{
                visibility: hidden;
                opacity: 0;
            }

            img{opacity: 0;visibility: hidden;}
        }

        &:has(img.unbootable){
            .loading{
                opacity: 1;
                visibility: visible;
            }

            .specs{
                background: rgba(from var(--black-clr) r g b / 0.9);
            }
        }

        img.filling_image{
            width: 100%;
            height: 245px;

            filter: blur(900px) invert(0.8);
            scale: 1.1;

            border-radius: 8px 8px 0 0;

            display: block;

            object-fit: cover;
            object-position: center;
        }

        img.main_photo{
            position: absolute;
            inset: 0;

            z-index: 5;

            width: 100%;
            height: 245px;

            display: block;

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

            cursor: pointer;

            border-radius: 8px 8px 0 0;

            opacity: 1;
            visibility: visible;

            transition: 0.3s ease all;
        }

        .specs{
            height: 245px;
            width: 100%;

            cursor: pointer;

            opacity: 1;
            transition: 0.3s ease all 1s;

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

            position: absolute;
            z-index: 10;
            inset: 0;

            background: rgba(from var(--black-clr) r g b / 0.72);

            color: var(--white-clr);

            padding: 10px;

            overflow: auto;

            .general_specs{
                margin-bottom: 10px;

                .specs_title{
                    font-size: 14px;
                    font-weight: 500;

                    color: var(--white-clr);

                    margin-bottom: 4px;
                }

                .spec{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;

                    margin-bottom: 2px;
                    padding-left: 8px;

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

                    .value{
                        font-size: 14px;
                        color: var(--white-clr);
                    }
                }
            }

            .additional_specs{
                .specs_title{
                    font-size: 14px;
                    font-weight: 500;

                    color: var(--white-clr);

                    margin-bottom: 2px;
                }

                .spec{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;

                    margin-bottom: 4px;
                    padding-left: 8px;

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

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

                        text-align: right;
                    }
                }
            }
        }
    }

    .catalog_leasing_obj_body{
        padding: 17px;

        background: var(--green-light-clr);
        border-radius: 0 0 8px 8px;
    }

    .leasing_obj_name {
        font-size: 20px;
        line-height: 20px;
        font-weight: 700;

        color: var(--black-clr);
    }
    .mobile_price_display {
        overflow: hidden;
        visibility: visible;

        height: 213px;
        &:has(.links){
            height: auto;
        }
        @media (max-width: 450px) {
            height: 265px;
        }

        display: block;

        transition: 0.3s ease all;

        .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;

                    gap: 10px 0;
                }
            }

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

                    @media (max-width: 450px) {
                        text-align: center;
                    }
                }
                .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{
            margin-top: 20px;
            .primary_btn, .secondary_btn {
                width: 100%;
                margin-top: 5px;
            }

            .secondary_btn {
                margin-top: 15px;
            }
        }
    }
}