@import "../style/variables.scss";
@mixin content-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-wrapper {
    background-color: $primary;
    overflow: hidden auto;
    height: 100vh;
    align-items: start;
    @media only screen and (min-width: 768px) {
        padding: 20px;
        overflow: hidden;
        position: relative;
        align-items: center;
        // &::before,
        // &::after {
        //     content: "";
        //     position: absolute;
        //     z-index: 0;
        //     background-repeat: no-repeat;
        //     background-size: contain;
        // }
        // &::before{
        //     background-image: url(/assets/images/auth-bg-pattern-1.png);
        //     top: 0;
        //     left: 0;
        //     width: 250px;
        //     height: 250px;
        // }
        // &::after{
        //     background-image: url(/assets/images/auth-bg-pattern-2.png);
        //     bottom: 0;
        //     right: 0;
        //     width: 250px;
        //     height: 90px;
        // }

    }
    @media only screen and (min-width: 1024px){
        padding: 20px 60px;
    }
    @media only screen and (min-width: 1200px){
        padding: 30px 100px;
    }
    @media only screen and (min-width: 1600px) {
        padding: 50px 190px;
        // &::before{
        //     width: 368px;
        //     height: 309px;
        // }
        // &::after{
        //     right: 120px;
        //     width: 495px;
        //     height: 185px;
        // }
    }
    // .auth-title {
        // text-align: center;
        // margin-bottom: 20px;
        // @media only screen and (min-width: 1441px) {
        //     margin-bottom: 24px;
        // }
        // .h-50 {
        //     color: $white;
        //     margin-bottom: 0;
        //     @media only screen and (min-width: 768px) {
        //         color: $btnText;
        //     }
        //     @media only screen and (min-width: 1200px) {
        //         margin-bottom: 10px;
        //     }
        //     @media only screen and (min-width: 1600px) {
        //         margin-bottom: 16px;
        //         font-size: 40px;
        //     }
        //     @media only screen and (min-width: 1850px) {
        //         font-size: 46px;
        //     }
        // }
        // p {
        //     color: $white;
        //     line-height: 20px;
        //     margin-bottom: 0;
        //     @media only screen and (min-width: 768px) {
        //         color: $darkGrey;
        //         line-height: 26px;
        //     }
        // }
    // }
    .back-btn {
        position: absolute;
        top: 3px;
        left: 15px;
        transition: 0.3s ease-in-out;
        display: none;
        @media only screen and (min-width: 768px) {
            top: 20px;
            left: 20px;
        }
        @media only screen and (min-width: 1024px) {
            top: 20px;
            left: 30px;
        }
        @media only screen and (min-width: 1441px) {
            top: 34px;
            left: 50px;
        }
        @media only screen and (min-width: 1800px) {
            left: 100px;
        }
        i {
            color: $white;
            transition: 0.3s ease-in-out;
            @media only screen and (min-width: 768px) {
                color: $mainText;
            }
        }
        &:hover{
            i{
                color: $primary;
            }
        }

    }
    .auth-logo{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto 8px;
        display: inline-block;
        @media only screen and (min-width: 768px){
            position: static;
            transform: none;
        }
        @media only screen and (min-width: 1441px) {
            margin: 0 auto 16px;
        }
       img{
            width: 60px;
            @media only screen and (min-width: 1024px) {
                width: 70px;
            }
        }
    }
    .auth-card {
        width: 100%;
        background-color: transparent;
        z-index: 1;
        // @media only screen and (min-width: 768px) {
        //     max-width: 1140px;
        //     overflow: hidden;
        //     background-color: $LightCream;
        // }
        // @media only screen and (min-width: 1200px) {
        //     max-width: 1140px;
        // }
        // @media only screen and (min-width: 1600px) {
        //     max-width: 1600px;
        // }
        .image-box {
            // position: fixed;
            // top: 0;
            // bottom: 0;
            // left: 0;
            // right: 0;
            // z-index: -1;
            // @media only screen and (min-width: 768px) {
            //     position: absolute;
            //     width: 50%;
            //     z-index: auto;
            //     height: auto;
            // }
            // @media only screen and (min-width: 1024px) {
            //    width: 55%;
            // } 
            img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
            // &::before {
            //     content: "";
            //     position: absolute;
            //     width: 100%;
            //     height: 100%;
            //     left: 0;
            //     right: 0;
            //     top: 0;
            //     bottom: 0;
            //     background-color: rgba($color: #000000, $alpha: 0.5);
            //     @media only screen and (min-width: 768px) {
            //         display: none;
            //     }
            // }
        }
        .auth-form-wrapper {
            width: 100%;
            // &.signin{
            //     @media only screen and (min-width: 768px) {
            //         align-items: flex-start;
            //     }
            //     @media only screen and (min-width: 1200px) {
            //         align-items: center;
            //     }
            // }
            // &.signup{
                // align-items: flex-start;
                // @media only screen and (min-width: 1024px) {
                //     .auth-form{
                //         padding: 30px;
                //     }
                // }
                // @media only screen and (min-width: 1440px) {
                //     .auth-form{
                //         padding: 60px 50px 50px;
                //     }
                // }
                // @media only screen and (min-width: 1800px) {
                //     .auth-form{
                //         padding: 60px 100px 50px;
                //     }
                // }
            // }
            @media only screen and (min-width: 768px) {
                width: 50%;
                overflow-y: auto;
                max-height: calc(100vh - 40px);
                // scrollbar-color: rgb(253 158 85 / 50%) $dust;
                // scrollbar-width: thin;

                &::-webkit-scrollbar {
                    width: 4px;
                    height: 4px;
                }
                &::-webkit-scrollbar-thumb {
                    background-color: $primary;
                }
                &::-webkit-scrollbar-track {
                    background-color: #e6d8c5;
                }
            }
            @media only screen and (min-width: 1024px) {
                width: 45%;
            }
            @media only screen and (min-width: 1200px) {
                max-height: calc(100vh - 60px);
            }
            @media only screen and (min-width: 1600px) {
                max-height: calc(100vh - 100px);
            }
            .auth-form {
                // padding: 40px 20px;
                // justify-content: center;
                // @media only screen and (min-width: 768px) {
                //     padding: 30px 20px;
                //     min-height: 400px;
                // }
                // @media only screen and (min-width: 1024px) {
                //     padding: 30px;
                //     min-height: 500px;
                // }
                // @media only screen and (min-width: 1440px) {
                //     padding: 50px;
                // }
                // @media only screen and (min-width: 1600px) {
                //     min-height: 700px;
                // }
                // @media only screen and (min-width: 1800px) {
                //     padding: 50px 100px;
                // }
                .form-wrapper {
                    .input-group {
                        label {
                            color: $white;
                            line-height: normal;
                            @media only screen and (min-width: 768px) {
                                color: #5E5E5E;
                                line-height: 22px;
                            }
                        }
                        input, textarea {
                            width: 100%;
                            background-color: $white;
                            @media only screen and (min-width: 768px) {
                                background-color: transparent;
                            }
                        }
                    }
                    .forget-pwd-link {
                        a {
                            cursor: pointer;
                            font-size: 14px;
                            line-height: 1;
                            font-weight: 500;
                            font-family: 'Avenir Next';
                            color: $primary;
                            &:hover {
                                color: $tertiary;
                            }
                            // @media only screen and (min-width: 768px) {
                            //     color: $primary;
                            //     &:hover {
                            //         color: $tertiary;
                            //     }
                            // }
                            @media only screen and (min-width: 1441px){
                                font-size: 16px;
                            }
                        }
                    }
                    .solid-btn {
                        margin-top: 20px;
                        height: 40px;
                        font-family: 'Avenir Next';
                        font-weight: 500;
                        @media only screen and (min-width: 1200px) {
                            margin-top: 15px;
                            font-size: 15px;
                        }
                        @media only screen and (min-width: 1471px) {
                            height: 54px;
                            font-size: 16px;
                            margin-top: 20px;
                        }
                    }
                    .para {
                        font-size: 14px;
                        line-height: 1.2;
                        font-weight: 400;
                        color: $white;
                        margin-top: 10px;
                        text-align: center;
                        font-family: 'Avenir Next';
                        display: block;
                        @media only screen and (min-width: 768px) {
                            color: #5E5E5E;
                        }
                        @media only screen and (min-width: 1441px) {
                            font-size: 16px;
                            margin-top: 16px;
                        }
                        a,.link {
                            font-weight: 500;
                            color: $primary;
                            &:hover {
                                color: $tertiary;
                                @media only screen and (min-width: 768px){
                                    color: $primary;
                                }
                            }
                            @media only screen and (min-width: 768px) {
                                color: $primary;
                                &:hover {
                                    color: $tertiary;
                                }
                            }
                        }
                        &.or-para{
                            margin-bottom: 10px;
                            @media only screen and (min-width: 1441px) {
                                margin-bottom: 16px;
                            }
                        }
                    }
                }
            }

        }
    }
}
.ns-auth-wrapper{
    height: auto;
    background-color: $white;
    padding: 20px 0 30px;
    @media only screen and (min-width: 1200px) {
        padding: 10px 0 10px;
    }
    @media only screen and (min-width: 1400px) {
        padding: 15px 0 30px;
    }
    .auth-card{
        gap: 24px;
        @media only screen and (min-width: 1601px) {
            gap: 60px;
        }
        .auth-title{
            text-align: center;
            margin-bottom: 20px;
            .ns-lrf-title{
                // font-family: 'Cinzel';
                // text-transform: uppercase;
                font-weight: 700;
                color: $white;
                margin-bottom: 16px;
                @media only screen and (min-width: 768px) {
                    color: #101010;
                }
                @media only screen and (min-width: 1200px) {
                    margin-bottom: 5px;
                }
                @media only screen and (min-width: 1471px) {
                    margin-bottom: 16px;
                }
            }
            p{
                font-size: 14px;
                line-height: 1.2;
                font-weight: 400;
                font-family: 'Avenir Next';
                color: $white;
                max-width: 370px;
                margin: 0 auto;
                @media only screen and (min-width: 768px) {
                    color: $grey5E;
                }
                @media only screen and (min-width: 1471px) {
                    font-size: 16px;
                    line-height: 1.37
                }
            }
        }
        .auth-form-wrapper,.image-box{
            
            @media only screen and (min-width: 768px) {
                height: calc(100vh - 141px);
                max-height: inherit;
            }
            @media only screen and (min-width: 1200px) {
                height: calc(100vh - 110px);
            }
            @media only screen and (min-width: 1400px) {
                height: calc(100vh - 165px);
            }
            @media only screen and (min-width: 1471px) {
                height: calc(100vh - 198px);
            }
            @media only screen and (min-width: 1601px) {
                height: calc(100vh - 200px);
            }
        }
        .auth-form-wrapper{
            width: 100%;
            
            @media only screen and (min-width: 768px){
                width: 50%;
                padding: 15px 20px;
                border: 1px solid #DDDDDD;
            }
            @media only screen and (min-width:1471px){
                padding: 30px 20px;
            }
            .auth-form{
                @media only screen and (min-width: 768px){
                    max-width: 472px;
                    margin: 0 auto;
                }
            }
        }
        .image-box{
            width: 100%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -1;
            @media only screen and (min-width: 768px){
                width: 50%;
                position: static;
            }
            &::before{
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, .6);
                z-index: 0;
                @media only screen and (min-width: 768px){
                    display: none;
                }
            }
        }
    }
    input, select{
        font-size: 14px;
        font-family: 'Avenir Next';
        border-color: #C1C1C1;
        height: 40px;
        &:focus{
            border-color: $primary;
        }
        @media only screen and (min-width: 1471px){
            font-size: 16px;
            height: 54px;
        }
    }
    textarea{
        border-color: #C1C1C1;
        &:focus{
            border-color: $primary;
        }
    }
    .input-group{
        margin-bottom: 20px;
    }
    .pwd-input {
        .eye-btn {
            i{
                font-size: 18px;
                color: #C1C1C1;
                @media only screen and (min-width: 1471px){
                    font-size: 20px;
                }
                @media only screen and (min-width: 1600px){
                    font-size: 24px;
                }
                &.ns-icon{
                    width: 18px;
                    height: 18px;
                    @media only screen and (min-width: 1471px){
                        width: 20px;
                        height: 20px;
                    }
                    @media only screen and (min-width: 1600px){
                        width: 24px;
                        height: 24px;
                    }  
                }
            }
        }
    }
    .custom-checkbox-newsletter {
        label{
            @media only screen and (min-width: 640px) {
                font-size: 15px;
            }
            @media only screen and (min-width: 1471px) {
                font-size: 16px;
            }
            &::before {
                @media only screen and (min-width: 768px) {
                    top: 2px;
                }
            }
        }
    }
}