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

/*----------------------------------------*/
/*  7.4 cta css
/*--------------------------------*/

.tp-cta{
    &-bg{
        &-img{
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            position: absolute;
            background-color: #7887A4;
            mix-blend-mode: color-dodge;
            & img{
                z-index: 1;
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: relative;
                mix-blend-mode: luminosity;
            }
        }
    }
    &-line{
        position: absolute;
        bottom: -22px;
        left: 0;
        color: var(--tp-common-pink-2);
    }
    &-input{
        & input{
            height: 54px;
            width: 100%;
            font-weight: 500;
            font-size: 14px;
            padding-right: 140px;
            color: var(--tp-common-black);
            @include tp-placeholder{
                font-weight: 500;
                font-size: 14px;
                line-height: 1;
                color: #5a5c60;
            }
        }
    }
    &-input-wrapper{
        margin: 0px 80px;
        @media #{$xs}{
            margin: 0;
        }
    }
    &-subscribe-btn{
        position: absolute;
        top: 50%;
        right: 4px;
        transform: translateY(-50%);
    }
    &-bottom{
        &-text{
            & span{
                margin-right: 10px;
            }
            & p{
                font-weight: 500;
                font-size: 14px;
                line-height: 1.43;
                margin-bottom: 0;
                color: var(--tp-common-white);
            }
        }
    }
    &-style-2{
        & .tp-cta-bg-img img {
            mix-blend-mode: unset;
        }
        & .tp-cta-line {
            color: var(--tp-theme-1);
            @media #{$xs}{
                display: none;
            }
        }
        & .tp-cta-bottom-text span {
            color: var(--tp-common-blue);
        }
        & .tp-section-title.sm > span {
            color: var(--tp-theme-1);
        }
    }
}

.tp-cta-4{
    &-bg{
        padding: 50px 0;
        position: relative;
        &::after{
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            height: 100%;
            width: 53%;
            z-index: -1;
            background-color: #6360ca;
            clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
            @media #{$lg,$md,$xs}{
                display: none;
            }
        }
    }
    &-stroke-text{
        font-weight: 800;
        font-size: 60px;
        margin-bottom: 0;
        line-height: 1;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--tp-common-white);
        -webkit-text-fill-color: transparent;
        @media #{$xl}{
            font-size: 55px;
        }
        @media #{$lg,$md}{
            margin-bottom: 20px;
        }
        @media #{$xs}{
            font-size: 35px;
            margin-bottom: 20px;
        }
    }
    &-content{
        & span{
            font-weight: 700;
            font-size: 30px;
            line-height: 1.2;
            letter-spacing: -0.02em;
            color: var(--tp-common-white);
            @media #{$xs}{
                font-size: 25px;
            }
            @media #{$xl}{
                font-size: 25px;
            }
        }
    }
    &-avatar{
        flex: 0 0 auto;
        margin-left: 35px;
    }
    &-right{
        margin-left: 75px;
        @media #{$lg,$md,$xs}{
            margin-left: 0;
        }
    }
}

.tp-cta-5{
    &-input{
        & input{
            border: none;
            height: 60px;
            font-weight: 400;
            font-size: 14px;
            border-radius: 6px;
            padding-right: 145px;
            color: var(--tp-common-black);
            background: var(--tp-common-white);
            box-shadow: 0 20px 30px 0 rgba(20, 24, 32, 0.06);
            @include tp-placeholder{
                font-weight: 400;
                font-size: 14px;
                color: #919396; 
            }
        }
    }
    &-btn{
        top: 50%;
        right: 6px;
        position: absolute;
        transform: translateY(-50%);
    }
    &-remeber{
        & input{
            display: none;
            &:checked{
                & ~ label{
                    &::after{
                        background-color: var(--tp-common-black);
                        border-color: var(--tp-common-black);
                    }
                    &::before{
                        visibility: visible;
                        opacity: 1;
                    }
                }
            }
        }

        & label{
            position: relative;
            padding-left: 26px;
            z-index: 1;
            & span{
                font-weight: 400;
                font-size: 16px;
                color: #6d6e71;
                & > span{
                    text-decoration: underline;
                    color: var(--tp-common-black);
                }
            }
            &::after{
                position: absolute;
                content: '';
                top: 5px;
                left: 0;
                width: 16px;
                height: 16px;
                z-index: -1;
                transition: .3s;
                border-radius: 4px;
                border: 1px solid #b1b2b7;
            }
            &::before{
                position: absolute;
                content: url('../img/check-box/check.svg');
                top: -1px;
                left: 1px;
                opacity: 0;
                width: 14px;
                height: 14px;
                transition: .3s;
                text-align: center;
                visibility: hidden;
                color: var(--tp-common-white);
            }
            &:hover{
                cursor: pointer;
            }
        }
    }
    &-shape{
        &-1{
            position: absolute;
            top: 0;
            left: 0;
            animation: anim-top-bottom 1s linear infinite alternate;
        }
        &-2{
            position: absolute;
            position: absolute;
            top: 29%;
            right: 80px;
            animation: anim-top-bottom 1s linear infinite alternate;
        }
    }
}

.tp-cta{
    &-inner{
        &-wrap{
            padding: 100px 0px;
            @media #{$lg,$md,$xs}{
                padding: 50px 0;
            }
        }
        &-img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                mix-blend-mode: luminosity;
            }
        }
        &-title{
            font-weight: 800;
            font-size: 60px;
            line-height: 1.17;
            margin-bottom: 0;
            letter-spacing: -0.02em;
            color: var(--tp-common-white);
            @media #{$xl}{
                font-size: 50px;
            }
            @media #{$lg}{
                font-size: 45px;
            }
            @media #{$md}{
                font-size: 40px;
            }
            @media #{$xs}{
                font-size: 35px;
                margin-bottom: 30px;
                & br{
                    display: none;
                }
            }
        }
    }
}