/* Pricing 1 ---------------------------------- */ 
.price-card {
    --space: 40px;
    background-color: $white-color;
    box-shadow: 0px 6px 30px rgba(172, 172, 172, 0.24);
    border-radius: 10px;
    padding: var(--space);
    position: relative;
    z-index: 3;
    overflow: hidden;
    .tag {
        background-color: $theme-color;
        color: $white-color;
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        padding: 4px 40px;
        position: absolute;
        top: 20px;
        right: -40px;
        transform: rotate(45deg);
    }
    &_price {
        font-size: 44px;
        font-weight: bold;
        line-height: 1;
        margin: -0.09em 0;
        color: $title-color;
        position: relative;
        width: fit-content;
        .currency {
            color: $theme-color;
            font-size: 24px;
            vertical-align: text-top;
        }
        .duration {
            font-size: 18px;
            font-weight: 400;
            color: $body-color;
            margin-bottom: 0;
            position: relative;
            top: -1px;
            left: -4px;
        }
    }
    &_content {
        border-top: 1px solid $border-color;
        margin-top: 25px;
        padding-top: 30px;
    }
    .checklist {
        margin: -5px 0 25px 0;
        li {
            font-weight: 400;
            color: $body-color;
            > i {
                color: $theme-color2;
            }
        }
    }
    .th-btn {
        background-color: $title-color;
        width: 100%;
        padding: 17px 20px;
        &:before,
        &:after {
            background-color: $theme-color;
        }
    }
    &_icon {
        width: 70px;
        height: 80px;
        background-color: $theme-color2;
        text-align: center;
        border-radius: 0 0 99px 99px;
        position: absolute;
        top: 0;
        right: 40px;
        line-height: 66px;
    }
    &.active {
        .th-btn {
            background-color: $theme-color;
            &:before,
            &:after {
                background-color: $theme-color2;
            }
        }
        .price-card {
            &_icon {
                background-color: $theme-color;
            }
        }
    }
}

.checklist{
    li {
        &.unavailable {
            color: #C4C4C4;
            > i {
                color: #C4C4C4;
            }
        }
    }
}

@include vxs {
    .price-card {
        &_price {
            font-size: 30px;
        }
    }
}