@use '../utils' as *;

/*----------------------------------------*/
/*  19. price css start
/*----------------------------------------*/
.it-price {
    &-body {
        padding: 40px 40px;
        padding-top: 60px;
        & .it-btn-orange {
            padding: 18px 80px;
        }
    }
    &-tag {
        display: inline-block;
        padding: 5px 26px;
        margin-bottom: 35px;
        color: var(--it-common-white);
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.1);
    }
    &-header {
        padding: 40px 40px;
        padding-bottom: 30px;
        text-align: center;
        background-color: var(--it-common-black);
        position: relative;
        margin-bottom: 70px;
        &::after {
            position: absolute;
            content: '';
            top: 100%;
            left: 0;
            width: 100%;
            height: 70px;
            clip-path: polygon(50% 100%, 0 0, 100% 0);
            background-color: var(--it-common-black);
        }
        & p {
            font-weight: 600;
            font-size: 14px;
            color: #fff;
            margin-bottom: 0;
        }
    }
    &-rate {
        font-weight: 700;
        font-size: 45px;
        color: #fff;
        margin-bottom: 15px;
        & i {
            font-style: normal;
            font-size: 15px;
        }
    }
    &-list {
        & ul {
            & li {
                position: relative;
                padding-left: 25px;
                font-weight: 600;
                font-size: 16px;
                list-style-type: none;
                color: var(--it-common-black);
                &:not(:last-child){
                    margin-bottom: 16px;
                }
                & svg {
                    position: absolute;
                    top: 3px;
                    left: 0;
                }
            }
        }
    }
    &-item {
        background-color: var(--it-gray-1);
        &.active {
            & .it-price-header {
                background-color: var(--it-theme-1);
                &::after {
                    background-color: var(--it-theme-1); 
                }
            }
            & .it-price-tag {
                color: var(--it-theme-1);
                border: 1px solid rgba(255, 255, 255, 0.1);
                background: rgba(255, 255, 255, 1);
            }
        }
    }
}