.rts-pricing-plan {
    position: relative;
    .has-box-shadow {
        box-shadow: 0px 4px 30px 0px rgba(159, 159, 159, 0.25);
    }    
    .tab_content_row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    &__tab {
        display: flex;
        gap: 40px;
        align-items: center;
        position: relative;
        z-index: 1;
        margin-bottom: 50px;
        justify-content: center;

        .tab__button {
            background: var(--whiteColor);
            box-shadow: 0px 4px 30px 0px #EDF5FF;
            padding: 5px;
            border-radius: 6px;
            &__item {
                display: flex;
                gap: 5px;

                @media #{$device-sm} {}

                button {
                    border-radius: 6px;
                    padding: 10px 20px;
                    text-transform: capitalize;
                    background-color: transparent;
                    color: var(--secondaryColor);
                }

                button.active {
                    background: var(--primaryColor);
                    color: var(--whiteColor);
                }
            }

        }

        .toggle-tab-btns {
            .toggle-inner input {
              position: absolute;
              left: 0;
              width: 100%;
              height: 100%;
              margin: 0;
              border-radius: 25px;
              right: 0;
              z-index: 1;
              opacity: 0;
              cursor: pointer;
            }
            .custom-toggle {
              position: absolute;
              height: 25px;
              width: 25px;
              background-color: #ffffff;
              top: 4px;
              left: 5px;
              border-radius: 50%;
              transition: 300ms all;
            }
            .toggle-inner span.tab__button__item {
              position: absolute;
              left: -70px;
              top: 5px;
              color: #110C2D;
              transition: 300ms all;
            }
            .toggle-inner .tab__button__item:nth-of-type(2) {
              left: unset;
              right: -85px;
              opacity: 0.5;
            }
            &.active > .toggle-inner .tab__button__item {
              opacity: 0.5;
            }
            &.active > .toggle-inner .tab__button__item:nth-of-type(2) {
              opacity: 1;
            }
            .toggle-inner input:checked + span {
              left: 43px;
            }
            .toggle-inner {
              width: 75px;
              margin: 0 auto;
              height: 35px;
              border: 1px solid #ffffff;
              border-radius: 25px;
              position: relative;
              
              background: var(--primaryColor);
            }
            
        
            .plan-toggle-wrap{
                #monthly{
                    display: none !important;
                }
                #yearly{
                    display: flex !important;
                }
            }
            .plan-toggle-wrap.active{
                .tab__button__item:nth-of-type(1){
                    display: flex !important;
                }
                .tab__button__item:nth-of-type(2){
                    display: none !important;
                }
            }
        }


        .discount {
            position: relative;
            @media #{$device-sm} {
                display: none;
            }

            span.line {
                position: absolute;
                top: -22px;
                right: 60%;

                @media #{$device-sm} {
                    position: relative;
                    top: -15px;
                    left: -50px;
                    z-index: -1;
                }
            }

            p {
                margin: 0;
            }
        }
    }
    .tab__content {
        display: none;
        &.open {
            display: block;
        }
        .single-plan {
            position: relative;
            height: 100%;
            .popular-tag {
                position: absolute;
                top: -18px;
                left: 50%;
                transform: translate(-50%);
                padding: 10px 30px;
                background: var(--primaryColor);
                font-size: 14px;
                line-height: 100%;
                border-radius: 30px;
                color: var(--whiteColor);
                text-transform: capitalize;
            }
            .plan-features {
                .elementor-element {
                    padding: 0;
                }
            }
        }
    }
    &.style1, &.style2 {
        .single-plan {
            background: var(--whiteColor);
            padding: 35px;
            border: 1px solid #DDD8F9;
            border-radius: 10px;
            position: relative;
            transition: all .3s ease;
            z-index: 1;
            margin-bottom: 20px;
            
            @media #{$device-sm} {
                padding: 30px !important;
            }
    
            @media #{$device-lg} {
                padding: 45px;
            }
            .bg-overlay {
                z-index: -1;
                transition: all .3s ease;
                opacity: 0;
                background: var(--primaryColor);
            }
            &__content {
                .plan-icon {
                    margin-bottom: 40px;
                    transition: all .3s ease;
                }
    
                .plan-title {
                    display: block;
                    margin-bottom: 20px;
                    color: var(--primaryColor);
                }
    
                .subtitle {
                    font-size: 15px;
                    font-family: var(--titleFont);
                    margin-bottom: 0;
    
                    @media #{$device-sm} {
                        line-height: 1.4;
                    }
                }
    
                .plan-feature {
                    &__list {
                        padding-top: 40px;
                        margin-top: 40px;
                    }
                }
                .plan-actions {
                    margin-top: 50px;
                }
                .buy__plan {
                    border: 1px solid var(--primaryColor);
                    color: var(--primaryColor);
                    font-weight: var(--semibold);
                    transition: var(--transition);
                    display: block;
                    text-align: center;
                    &:hover {
                        background: var(--primaryColor) !important;
                        color: var(--whiteColor);
                    }
                }
    
                .buy__plan.btn__two {
                    padding: 15px 0;
                    border-radius: 4px;
                    max-width: 260px;
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
    &.style2, &.style3 {
        .rts-pricing-plan__tab .tab__button {
            background: var(--secondaryColor);
            border-radius: 40px;
            .tab__button__item {
                button {
                    padding: 7px 15px;
                    border-radius: 40px;
                    line-height: 100%;
                    color: var(--whiteColor);
                }
            }
        }
        .single-plan {
            padding: 40px 30px;
            background: #F5FAFF;
            &__content {
                .plan-header {
                    text-align: center;
                    .offer-text {
                        font-size: 14px;
                    }
                    .plan-icon {
                        img {
                            height: 30px;
                        }
                        margin-bottom: 20px;
                    }
                    .card-plan__price {
                        font-size: 40px;
                        font-weight: 700;
                        margin-bottom: 30px;
                        margin-top: 25px;
                        color: var(--secondaryColor);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        sup {
                            font-size: 16px;
                            font-weight: 500;
                            top: -1.5em;
                        }
                        sub {
                            font-size: 16px;
                            line-height: 26px;
                            color: var(--bodyColor);
                            font-weight: 400;
                        }
                    }
                }
                .plan-actions {
                    margin-top: 0;
                    margin-bottom: 30px;
                }
                .offer-text {
                    margin-bottom: 5px;
                }
                .buy__plan.btn__two {
                    transition: var(--transition);
                    padding: 8px 20px;
                    max-width: 100%;
                    border-radius: 100px;
                }
                .plan-feature__list {
                    border: none;
                    padding-top: 0;
                    margin-top: 0;
                    overflow: hidden;
                }
                .plan-more-feature__list {
                    border: none;
                    padding-top: 0;
                    margin-top: 0;
                    height: 0px;
                    overflow: hidden;
                    transition: height var(--transition);
                    transform-origin: top center;
                    &.expanded {
                        height: 100%;
                        transition: height var(--transition);
                    }
                }
                .card-plan__feature--list-trigered{
                    text-align: center;
                    font-size: 16px;
                    font-weight: 600;
                    cursor: pointer;
                    color: var(--btc);
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    padding: 10px 0;
                    width: max-content;
                    &.active, &:hover {
                        color: var(--secondaryColor);
                    }
                }
            }
        }
    }
    &.style3 {
        .single-plan { 
            transition: var(--transition);
            border-radius: 10px;
            border: 1px solid transparent;
            position: relative;
            &__content {
                .plan-header {
                    .card-plan__price {
                        font-size: 32px;
                    }
                    .plan-icon-container {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 10px;
                    }
                    .plan-title {
                        font-size: 20px;
                        font-weight: var(--bold);
                        color: var(--secondaryColor);
                        margin-bottom: 15px;
                        display: inline-block;
                        transition: all .3s ease;
                        line-height: 1;
        
                    }
                    .subtitle {
                        font-size: 15px;
                        font-family: var(--titleFont);
                        @media #{$device-sm} {
                            line-height: 1.4;
                        }
                    }
                    .card-plan__offer {
                        display: flex;
                        gap: 10px;
                        margin-bottom: 20px;
                        align-items: center;
                        justify-content: center;
                        .past-price {
                            font-size: 16px;
                            font-weight: 600;
                            text-decoration: line-through;
                        }
                        .offer-given {
                            padding: 8px 15px;
                            border-radius: 30px;
                            background: #E7F1FF;
                            font-size: 14px;
                            font-weight: var(--semibold);
                            line-height: 100%;
                            transition: var(--transition);
                        }
                    }
                    .buy__plan.btn__two{
                        color: var(--whiteColor);
                        font-weight: var(--semibold);
                        display: block;
                        text-align: center;
                        background: var(--primaryColor);
                        padding: 12px 0;
                        border-radius: 4px;
                        max-width: 260px;
                        position: relative;
                        transition: var(--transition);
                        left: 50%;
                        transform: translateX(-50%);
                        &.active, &:hover {
                            background: var(--secondaryColor) !important;
                        }
                    }
                }
            }
            &:hover,
            &.active {
                border-color: var(--primaryColor);
                & .single-plan__content {
                    .plan-icon {
                        svg path {
                            fill: url(#paint0_linear_195_837);
                        }
                    }
                    .card-plan__price {
                        color: var(--bodyColor);
                    }
                }
                .bg-overlay {
                    opacity: 1;
                }
                &::before {
                    opacity: 1;
                }
                
            }
        }
    }
}