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

/*============= PRICING-PLAN CSS AREA ===============*/
.pricing-section-area {
    position: relative;
    z-index: 1;
    .pricing-header {
        margin-bottom: 60px;
        @media #{$xs} {
            margin-bottom: 30px;
        }
        @media #{$md} {
            margin-bottom: 30px;
        }
    }
    .pricing-boxarea.active { 
        background: var(--ztc-text-text-10);
        transition: all .4s;
        h3 {
            color: var(--ztc-bg-bg-1);
            transition: all .4s;
        }
        p {
            color: var(--ztc-text-text-1);
            transition: all .4s;
        }
        h2 {
            color: var(--ztc-text-text-1);
            transition: all .4s;
            border-bottom: 1px solid var(--ztc-text-text-1);
            span {
                color: var(--ztc-text-text-1);
                transition: all .4s;
            }
        }
        .btn-area {
            a {
                color: var(--ztc-text-text-10);
                transition: all .4s;
                background: var(--ztc-text-text-1);
                &::after {
                    border: 1px solid var(--ztc-text-text-1);
                    transition: all .4s;
                }
            }
        }
        .list-area {
            background: var(--ztc-bg-bg-11);
            transition: all .4s;
            border: 1px solid var(--ztc-bg-bg-11);
            ul {
                li {
                    color: var(--ztc-bg-bg-1);
                    transition: all .4s;
                }
            }
        }
    }
    .pricing-boxarea {
        border-radius: 4px;
        border: 1px solid rgba(15, 10, 0, 0.10);
        background: var(--ztc-bg-bg-14);
        padding: 32px;
        height: 480px;
        margin-bottom: 80px;
        transition: all .4s;
        position: relative;
        @media #{$xs} {
            height: 100%;
            margin-bottom: 0;
        }
        @media #{$md} {
            height: 100%;
            margin-bottom: 0;
        }
        &:hover {
            transition: all .4s;
        }
        h3 {
            color: var(--ztc-text-text-10);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s32);
            font-style: normal;
            font-weight: var(--ztc-weight-semibold);
            line-height: 32px;   
            display: inline-block;
            transition: all .4s;  
            margin-bottom: 16px;    
        }
        p {
            color: var(--ztc-text-text-6);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s18);
            font-style: normal;
            font-weight: var(--ztc-weight-regular);
            line-height: 24px;    
            display: inline-block; 
            transition: all .4s;    
        }
        h2 {
            color: var(--ztc-text-text-10);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s44);
            font-style: normal;
            font-weight: var(--ztc-weight-semibold);
            line-height: 44px;
            margin-top: 32px;
            padding-bottom: 24px;
            transition: all .4s;
            border-bottom: 1px solid rgba(15, 10, 0, 0.10);
            span {
                color: var(--ztc-text-text-6);
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s18);
                font-style: normal;
                font-weight: var(--ztc-weight-regular);
                line-height: 18px;  
                transition: all .4s;            
            }
        }
        .btn-area {
            text-align: center;
            margin-top: 32px;
            position: relative;
            z-index: 2;
            a {
                width: 234px;
                position: relative;
                z-index: 2;
                &::after {
                   z-index: 2;
                }
            }
        }
        .list-area {
            background: var(--ztc-bg-bg-1);
            position: relative;
            padding: 36px 32px 32px 32px;
            border: 1px solid rgba(15, 10, 0, 0.10);
            border-radius: 4px;
            margin: -30px 30px 0 30px;
            transition: all .4s;
            @media #{$xs} {
                margin: 30px 0 0 0;
                padding: 8px 32px 32px;
            }
            @media #{$md} {
                margin: 30px 0 0 0;
                padding: 8px 32px 32px;
            }
            ul {
                li {
                    color: var(--ztc-text-text-6);
                    font-family: var(--ztc-family-font1);
                    font-size: var(--ztc-font-size-font-s18);
                    font-style: normal;
                    font-weight: var(--ztc-weight-regular);
                    line-height: 18px; 
                    transition: all .4s;
                    margin-top: 24px;
                    img {
                        margin: 0 6px 0 0;
                    }                   
                }
            }
        }
    }
}

// PRICING_PAN_INNER //
.pricing-inner-section-area {
    position: relative;
    z-index: 1;
    .pricing-boxarea.active { 
        background: var(--ztc-text-text-3);
        transition: all .4s;
        h3 {
            color: var(--ztc-bg-bg-1);
            transition: all .4s;
        }
        p {
            color: var(--ztc-text-text-1);
            transition: all .4s;
        }
        h2 {
            color: var(--ztc-text-text-1);
            transition: all .4s;
            border-bottom: 1px solid var(--ztc-text-text-1);
            span {
                color: var(--ztc-text-text-1);
                transition: all .4s;
            }
        }
        .btn-area {
            a {
                color: var(--ztc-text-text-10);
                transition: all .4s;
                background: var(--ztc-text-text-1);
                &::after {
                    border: 1px solid var(--ztc-text-text-1);
                    transition: all .4s;
                }
            }
        }
        .list-area {
            background: var(--ztc-bg-bg-2);
            transition: all .4s;
            border: 1px solid var(--ztc-bg-bg-2);
            ul {
                li {
                    color: var(--ztc-bg-bg-1);
                    transition: all .4s;
                }
            }
        }
    }

    .pricing-boxarea {
        border-radius: 4px;
        border: 1px solid rgba(15, 10, 0, 0.10);
        background: var(--ztc-bg-bg-6);
        padding: 32px;
        height: 480px;
        margin-bottom: 80px;
        transition: all .4s;
        position: relative;
        @media #{$xs} {
            height: 100%;
            margin-bottom: 0;
        }
        @media #{$md} {
            height: 100%;
            margin-bottom: 0;
        }
        h3 {
            color: var(--ztc-text-text-3);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s32);
            font-style: normal;
            font-weight: var(--ztc-weight-semibold);
            line-height: 32px;   
            display: inline-block;
            transition: all .4s;  
            margin-bottom: 16px;    
        }
        p {
            color: var(--ztc-text-text-4);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s18);
            font-style: normal;
            font-weight: var(--ztc-weight-regular);
            line-height: 24px;    
            display: inline-block; 
            transition: all .4s;    
        }
        h2 {
            color: var(--ztc-text-text-3);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s44);
            font-style: normal;
            font-weight: var(--ztc-weight-semibold);
            line-height: 44px;
            margin-top: 32px;
            padding-bottom: 24px;
            transition: all .4s;
            border-bottom: 1px solid rgba(15, 10, 0, 0.10);
            span {
                color: var(--ztc-text-text-4);
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s18);
                font-style: normal;
                font-weight: var(--ztc-weight-regular);
                line-height: 18px;  
                transition: all .4s;            
            }
        }
        .btn-area {
            text-align: center;
            margin-top: 32px;
            position: relative;
            z-index: 2;
            a {
                width: 234px;
                position: relative;
                z-index: 2;
                &::after {
                   z-index: 2;
                }
            }
        }
        .list-area {
            background: var(--ztc-bg-bg-1);
            position: relative;
            padding: 36px 32px 32px 32px;
            border: 1px solid rgba(15, 10, 0, 0.10);
            border-radius: 4px;
            margin: -30px 30px 0 30px;
            transition: all .4s;
            @media #{$xs} {
                margin: 30px 0 0 0;
                padding: 8px 32px 32px;
            }
            @media #{$md} {
                margin: 30px 0 0 0;
                padding: 8px 32px 32px;
            }
            ul {
                li {
                    color: var(--ztc-text-text-4);
                    font-family: var(--ztc-family-font1);
                    font-size: var(--ztc-font-size-font-s18);
                    font-style: normal;
                    font-weight: var(--ztc-weight-regular);
                    line-height: 18px; 
                    transition: all .4s;
                    margin-top: 24px;
                    img {
                        margin: 0 6px 0 0;
                    }                   
                }
            }
        }
    }
}

// compare plan //
.compareplan-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-6);
    @media #{$md} {
        overflow-y: scroll;
    }
    @media #{$xs} {
        overflow-y: scroll;
    }
    .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: 20px;
      width: 20px;
      background-color: var(--ztc-text-text-1);
      top: 5px;
      left: 35px;
      border-radius: 50%;
      transition: 300ms all;
    }
    
    .toggle-inner .t-month,
    .toggle-inner .t-year {
      position: absolute;
      left: -75px;
      top: 2px;
      transition: 300ms all;
    }
    
    .toggle-inner .t-year {
      left: unset;
      left: 73px;
      opacity: 0.5;
    }
    
    .active > .toggle-inner .t-month {
      opacity: 0.5;
    }
    
    .active > .toggle-inner .t-year {
      opacity: 1;
    }
    
    .toggle-inner input:checked + span {
      left: 5px;
    }
    
    .toggle-inner {
      width: 60px;
      margin: 0 auto;
      height: 30px;
      border-radius: 25px;
      position: relative;
      background: var(--ztc-text-text-3);
      left: -20px;
    }
    
    .t-year h4 {
      min-width: 200px;
    }
    .t-year {
      text-align: left;
    }
    .plan-toggle-wrap {
      margin-top: 50px;
      margin-bottom: 32px;
    }
    
    .plan-toggle-wrap {
        position: absolute;
        z-index: 1;
        left: 25%;
        top: 30%;
        right: 71%;
        @media #{$xs} {
            position: relative;
            left: 0;
            top: 0;
            text-align: center;
            right: 0;
            margin-bottom: 20px;
        }
        @media #{$md} {
            left: -48%;
            top: 20%;
            right: 0;
        }
        @media #{$xxxl} {
            display: none !important;
        }
    }
    .plan-toggle-wrap h4 {
        font-size: var(--ztc-font-size-font-s18);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-3);
        font-family: var(--ztc-family-font1);
        margin-bottom: 0;
    }
    .single-pricing-area {
        background: var(--ztc-text-text-1);
        padding: 32px 40px !important;
        position: relative;
        margin-bottom: 0;
        @media #{$md} {
            padding: 20px !important;
            width: 1000px;
            overflow-y: scroll !important;
        }
        @media #{$xs} {
            padding: 20px !important;
            width: 550px;
            overflow-y: scroll !important;
        }
    }
    .comparison table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
    }
    .comparison td, .comparison th {
        text-align: center;
    }
    
    .comparison tbody tr:nth-child(odd) {
        display: none;
    }
    .comparison .compare-row td {
        padding: 25px 0;
        border-top: 1px solid var(--ztc-bg-bg-6);
    }
    .comparison tr td:first-child {
        text-align: left;
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s24);
        line-height: var(--ztc-font-size-font-s24);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-3);
        padding: 25px 0;
        border-top: 1px solid var(--ztc-bg-bg-6);
    }

    .comparison .tl2 {
    font-family: var(--ztc-family-font1);
    line-height: var(--ztc-font-size-font-s24);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    font-size: var(--ztc-font-size-font-s24);
    span {
        display: inline-block;
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-font-size-font-s18);
        font-weight: var(--ztc-weight-medium);
        color: var(--ztc-text-text-4);
        font-family: var(--ztc-family-font1);
        margin-top: 32px;
        position: absolute;
        left: 6%;
        top: 55px;
        @media #{$md} {
            display: none;
        }
    }
    }

    .comparison .qbo {
    font-family: var(--ztc-family-font1);
    font-size: var(--ztc-font-size-font-s20);
    font-weight: var(--ztc-weight-semibold);
    color: var(--ztc-text-text-3);
    line-height: var(--ztc-font-size-font-s20);
    padding: 0 !important;
    }
    
    th.price-info.hide-mobile {
        padding-bottom: 40px;
    }
    .comparison .price-now span {
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s44);
        line-height: var(--ztc-font-size-font-s44);
        font-weight: var(--ztc-weight-semibold);
        color: var(--ztc-text-text-3);
        transition: all .4s;
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 24px;
    }

    @media #{$xs} {
        .comparison {
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s20);
            font-weight: var(--ztc-weight-semibold);
            color: var(--ztc-text-text-3);
            transition: all .4s;
            padding: 20px !important;
            background: var(--ztc-text-text-1);
       }
       th.price-info.hide-mobile {
        padding-bottom: 20px;
    }
        .comparison .qbo {
            background: none;
            padding: 10px !important;
       }
        .comparison td:first-child, .comparison th:first-child {
            display: none;
       }
        .comparison tbody tr:nth-child(odd) {
            display: table-row;
       }
        .comparison .row {
            background: var(--ztc-bg-bg-1);
       }
        .comparison td, .comparison th {
            border: 1px solid var(--ztc-bg-bg-6);
            padding: 20px 0;
       }
    }
}
/*============= PRICING-PLAN CSS AREA ===============*/