@use '../utils' as *;

/*=============================
    	25. shop
===============================*/

.tg-pricing{
    &-wrap{
        border: 1px solid var(--tg-border-3);
        border-radius: 20px;
        background: var(--tg-common-white);
        padding: 44px 50px 43px 50px;
        @media #{$lg,$md,$sm,$xs} {
            padding: 30px 30px 23px 30px;
        }
    }
    &-title{
        font-weight: 500;
        font-size: 24px;
    }
    &-price{
        display: inline-block;
        & h2{
            font-weight: 700;
            font-size: 50px;
            display: flex;
            align-items: flex-start;
            margin-bottom: 0;
            & span{
                font-weight: 500;
                font-size: 20px;
                transform: translateY(6px);
            }
        }
        & .dates{
            font-size: 15px;
            color: var(--tg-common-black);
            float: right;
            transform: translateY(-6px);
        }
    }
    &-btn{
        & .tg-btn{
            background: #f0e9ff;
            color: var(--tg-theme-primary);
            &:hover{
                background: var(--tg-theme-primary);
                color: var(--tg-common-white);
            }
        }
    }
    &-list{
        & ul{
            & li{
                font-weight: 400;
                font-size: 16px;
                text-transform: capitalize;
                color: var(--tg-common-black);
                display: flex;
                &:not(:last-child){
                    margin-bottom: 22px;
                }
                & .icon{
                    transform: translateY(-2px);
                    margin-right: 7px;
                    display: inline-block;
                }
            }
        }
    }
    &-su{
        &-wrap{
            background: #f6f4fa;
            & .tg-pricing-title {
                font-family: var(--tg-ff-outfit);
            }
            & .tg-pricing-head {
                & p{
                    font-family: var(--tg-ff-outfit);
                    font-size: 17px;
                    color: #353844;
                }
            }
            & .tg-pricing-price h2 {
                font-family: var(--tg-ff-outfit);
                font-size: 48px;
            }
            & .tg-pricing-price {
                display: flex;
                align-items: end;
            }
            & .tg-pricing-price .dates {
                font-family: var(--tg-ff-outfit);
                font-size: 18px;
                color: #353844;
            }
            & .tg-btn {
                font-family: var(--tg-ff-outfit);
            }
            & .tg-pricing-list ul li {
                font-size: 17px;
                font-family: var(--tg-ff-outfit);
            }
            & .br-none{
                border: none;
            }
        }
        &-shape{
            bottom: 0;
            right: 113px;
            z-index: -1;
            @media #{$xxl,$xl,$lg,$md,$sm,$xs} {
                right: 0;
            }
            &-2{
                top: 200px;
                left: 105px;
                @media #{$xxl,$xl,$lg,$md,$sm,$xs} {
                    top: 140px;
                }
            }
        }
    }
}