.calculator {
    border: 1px solid #e4dfdf;
    border-radius: 12px;
    padding: 10px 30px;
    & .calc-wr {
        display: flex;
        gap: 15px;
    }
    .calc-descip {
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
        padding: 10px 0px 10px;
        color: #d54a0d;
        border-bottom: 1px solid #d54a0d;
        margin-bottom: 20px;
    }
    & .calc-section {
        padding: 20px;
        border-radius: 12px;
    }
    & .col1 {
        width: 73%;
        & .calc-sections {
            display: flex;
            & .calc-st-1 {
                width: 45%;
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }
            & .calc-st-2 {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                width: 55%;
                background: #f9f9f9;
                & .calc-descip {
                    color: #262020;
                    border-color: #262020;
                }
            }
        }
    }
    & .calc-choice {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 20px;
    }
    & .calc-type {
        display: flex;
        align-items: center;
        padding: 10px;
        border: 1px solid #e4dfdf;
        border-radius: 12px;
        opacity: 0.8;
        cursor: pointer;
        transition: 0.2s;
        gap: 20px;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 0.2px;
        & img {
            flex-shrink: 0;
        }
        &.active,
        &:hover {
            opacity: 1;
            border-color: #d54a0d;
            color: #d54a0d;
            font-weight: 600;
            & img {
                filter: drop-shadow(0px 1px 2px #d54a0d);
            }
        }
    }

    & .calc-checkbox-all {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 10px;
    }
    & .calc-checkbox {
        position: relative;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 4px 10px;
        border: 1px solid #fff;
        border-radius: 12px;
        cursor: pointer;
        line-height: 1;
        &.active,
        &:hover {
            border-color: #d54a0d;
            background: #fff;
            filter: drop-shadow(0px 1px 2px #d54a0d61);
        }
        &.clhide {
            opacity: 0.5;
        }
        & span.calcmask {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        & i {
            position: relative;
            border: 1px solid #e4dfdf;
            border-radius: 20px;
            font-style: normal;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            & span {
                background: #000;
                display: block;
                position: absolute;
                left: 100%;
                top: 0%;
                padding: 0px;
                border-radius: 12px;
                color: #fff;
                width: 0px;
                height: 0px;
                font-size: 12px;
                overflow: hidden;
                font-weight: 500;
                transition: 0.2s;
            }
            &.active,
            &:hover {
                background: #d54a0d;
                color: #fff;
            }
            &:hover span {
                width: max-content;
                height: fit-content;
                max-width: 220px;
                padding: 10px;
                z-index: 2;
                text-align: center;
            }
        }
        & p.calc-data {
            display: flex;
            justify-content: space-between;
            margin: 0px;
            flex-grow: 1;
            align-items: center;
            & select {
                position: relative;
                border-radius: 8px;
                padding: 5px 8px;
                font-size: 13px;
                font-weight: 600;
                z-index: 5;
                min-width: 140px;
                margin: 0 20px 0px auto;
            }
            .calc-checkbox.active & span.calc-name {
                font-weight: 600;
                font-size: 15px;
            }
            & span.calc-price {
                font-weight: 600;
                &::after {
                    content: '₽';
                    font-weight: 400;
                    padding-left: 4px;
                    font-size: 14px;
                }
            }
        }
    }
    
    & .col2 {
        width: 27%;
        & .calc-st-3 {
            padding: 15px;
            border: 2px solid #d54a0d;
            height: 100%;
        }
    }
    & .calc-image-wrapper {
        height: 100%;
        display: flex;
        max-height: 220px;
        margin: 0px auto 10px;
        justify-content: center;
        & .calc-image {    
            max-height: max-content;
            overflow: hidden;
            width: 0px;
            height: 0px;
            transition: 0.3s;
        &.active {
            width: 100%;
            height: 100%;
        }
            & img {
                height: 100%;
                object-fit: contain;
                margin: auto;
                display: block;
            }
        }
    }
    & .calc-tx {
        font-size: 12px;
        margin: 5px 0px 5px;
        color: #595959;
    }
    & .calc-box {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 8px 0px 12px;
        width: 100%;
        line-height: 1;
            & .calc-del {
            display: flex;
            align-items: center;
            justify-content: space-between;
            }
            & span.calc-old-sum {
                text-decoration: line-through;
                font-size: 20px;
                color: #7c7474;
                &::after {
                    content: '₽';
                }
            }
            & span.calc-new-sum {
                font-weight: 600;
                font-size: 28px;
                &::after {
                    content: '₽';
                    padding-left: 4px;
                }
            }
            & a.calc-but {
                font-weight: 500;
                font-size: 12px;
                color: #d54a0d;
                border-bottom: 1px dashed #d54a0d;
                display: block;
                cursor: pointer;
                &:hover {
                    color: #262020;
                    border-bottom: 1px solid #262020;
                }
            }
    }
    & .calc-discount {
        font-weight: 600;
        line-height: 1;
        font-size: 12px;
        border: 1px solid #e4dfdf;
        padding-right: 8px;
        border-radius: 7px;
        display: flex;
        gap: 5px;
        align-items: center;
        overflow: hidden;
        & .calcount {
            background: var(--but-gradient);
            padding: 5px 5px 5px 8px;
            color: #fff;
            letter-spacing: 1px;
        }
        & .calamount::after {
                content: '₽';
                padding-left: 2px;
        }
    }
    & .calc-button {
        & a.butmodal {
            display: block;
            background: var(--but-gradient);
            padding: 14px 10px;
            border-radius: 12px;
            border: 0;
            cursor: pointer;
            font-weight: 500;
            text-align: center;
            color: #f9f9f9;
            position: relative;
            width: 100%;
            line-height: 1;
            float: none;
            font-size: 14px;
            &:hover {
                color: #fff;
                background: var(--but-hover-gradient);
                box-shadow: var(--but-hover-shadow);
                transform: scale(1.02);
            }
        }
    }
    & p.calc-critical {
        background: #f9f9f9;
        width: 100%;
        padding: 8px 20px;
        margin: 20px 0px 0px;
        color: #676767;
        font-size: 13px;
        border-radius: 5px;
    }
}