@use '../../utils' as *;

/*----------------------------------------*/
/*  7.10 price css
/*--------------------------------*/

.tp-price{
    &-head{
        & h5{
            font-weight: 700;
            font-size: 24px;
            line-height: 1;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
            color: var(--tp-common-black-3);
        }
        & span{
            font-weight: 700;
            font-size: 50px;
            display: inline-block;
            color: var(--tp-common-black-3);
            & i{
                font-size: 20px;
                font-style: normal;
                margin-right: 5px;
                display: inline-block;
                transform: translateY(-20px);
            }
            & em{
                font-size: 18px;
                font-style: normal;
            }
        }
    }
    &-list{
        margin-bottom: 65px;
        & ul{
            & li{
                font-weight: 500;
                font-size: 18px;
                line-height: 1;
                padding-left: 20px;
                position: relative;
                list-style-type: none;
                color: var(--tp-common-black-3);
                @media #{$lg}{
                    font-size: 16px;
                }
                &:not(:last-child){
                    margin-bottom: 17px;
                }
                &::after{
                    position: absolute;
                    content: '';
                    top: 7px;
                    left: 0;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background-color: var(--tp-common-black-3);
                }
            }
        }
    }
    &-item{
        border-radius: 10px;
        padding: 35px 40px;
        background-color: var(--tp-common-white);
        &.active{
            background-color: var(--tp-common-blue);
            & .tp-price-head{
                & h5{
                    color: var(--tp-common-white);
                }
                & span{
                    color: var(--tp-common-white);
                }
            }
            & .tp-price-list ul li {
                color: var(--tp-common-white);
                &::after{
                    background-color: var(--tp-common-white);
                }
            }
            & .tp-btn-blue.sky-bg {
                color: var(--tp-common-black-3);
                background-color: var(--tp-common-white);
                &:hover{
                    color: var(--tp-common-white);
                    background-color: var(--tp-common-black-3);
                }
            }
        }
    }
    &-offer{
        position: absolute;
        top: -50px;
        right: -62px;
    }
    &-style{
        &-2{
            & .tp-price-item.active {
                background-color: var(--tp-common-white);
            }
            & .tp-price-item.active .tp-price-head h5 {
                color: var(--tp-common-black);
            }
            & .tp-price-item.active .tp-price-head span {
                color: var(--tp-common-black);
            }
            & .tp-price-item.active .tp-price-list ul li {
                color: var(--tp-common-black);
            }
            & .tp-price-item.active .tp-price-list ul li::after {
                background-color: var(--tp-common-black);
            }
            & .tp-price-item.active .tp-btn-border-radius-6.lg {
                color: var(--tp-common-white);
                border-color: var(--tp-common-black);
                background-color: var(--tp-common-black);
            }
        }
    }
}