@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Leckerli+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Send+Flowers&display=swap');

:root{
    --background-color-main: white;
    --background-color: #f8f9f9;
    --secondary-background-color: #e5e7e9 ;
    --accent-color: #d055e7 ;
    --text-color-main: #212121;
    --text-color-secondary: #7d7d7d;
    --text-color-third: #d7dbdd;

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;                           
    --text-stylish1: Leckerli One;
    --text-stylish2: Send Flowers;
}

.signin-popup-container{
    position: relative;
    .signin-popup{
        position: relative;
        position: fixed;
        display: flex;
        transform: translate(35%, 20%);
        width: 60%;
        height: 70%;
        font-family: var(--text-regular1);
        overflow: hidden;
        border: none;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.75); 
        backdrop-filter: blur(10px); 
        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.35), 
                    -0px -.1px 3px rgba(0, 0, 0, 0.15); 
        z-index: 120;
        visibility: hidden;
        transition: all .3s ease-in-out;
        

        .contactus-section{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;
            padding: 3% 0%;
            font-size: 17px;
            border-bottom-left-radius: inherit;
            border-top-left-radius: inherit;
            transition: all .4s ease-in-out;

            .title{
                text-align: center;
                font-size: 18px;
                span{
                    font-family: var(--text-stylish1);
                    color: var(--accent-color);
                }
            }

            .contactus-section-padding{
                display: flex;
                flex-direction: column;
                gap: 7px;
                margin-top: 7%;
                margin-bottom: 7%;
                padding: 10% 5%;
                border-radius: 10px;
                border: .3px solid rgba(255, 255, 255, 0.85);

                a{
                    display: flex;
                    text-decoration: none;
                    color: var(--text-color-main);
                    svg{
                        margin-right: 10px;
                    }
                }
                p{
                    display: flex;
                    svg{
                        margin-right: 4px;
                    }
                }
            }

            button{
                display: flex;
                align-items: center;
                margin-bottom: 12%;
                padding: 4px 15px;
                font-family: var(--text-regular1);
                background: inherit;
                border-radius: 20px;
                border: 1px solid var(--text-color-main);
                cursor: pointer;
                svg{
                    margin-left: 3px;
                    fill: var(--text-color-main);
                }
            }
        }

        .sigup-section{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;
            border-bottom-right-radius: inherit;
            border-top-right-radius: inherit;
            transition: all .4s ease-in-out;

            .welcome-message{
                display: none
            }

            .form{
                margin-bottom: 3%;
                padding: 3% 7%;
                border-radius: 15px;
                border: .3px solid rgba(255, 255, 255, 0.85);
                form{
                    font-size: 15px;

                    label{
                        font-size: 13px;
                    }

                    input{
                        height: 30px;
                        width: 200px;
                        padding-left: 10px;
                        padding-right: 10px;
                        border-radius: 7px;
                        border: none;
                        background: rgba(255, 255, 255, 0.05); 
                        backdrop-filter: blur(10px); 
                        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15);
                    }
                    #email{
                        margin-bottom: 10%;
                    }
                    input:focus{
                        border: none;
                        outline: none;
                        background: rgba(255, 255, 255, 0.05); 
                        backdrop-filter: blur(10px); 
                        -webkit-backdrop-filter: blur(10px);
                        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
                    }
                    input::placeholder{
                        opacity: 0;
                        transition: opacity 0.3s;
                    }
                    input:-webkit-autofill {
                        -webkit-text-fill-color: #000 !important;
                        transition: background-color 5000s ease-in-out 0s;
                    }

                }

                .options{
                    display: flex;
                    flex-direction: column;
                    margin-top: 15%;

                    .google-signin{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 4px;
                        padding: 7px 15px;
                        background: inherit;
                        border-radius: 20px;
                        border: .3px solid rgba(255, 255, 255, 0.85);
                        cursor: pointer;
                        svg{
                            margin-right: 5px;
                        }
                    }

                    .send-details{
                        margin-bottom: auto;
                        padding: 9px 15px;
                        color: var(--background-color-main);
                        background: var(--text-color-main);
                        border: none;
                        border-radius: 20px;
                        cursor: pointer;
                    }
                }
            }

            .contactus-toggle{
                display: flex;
                align-items: center;
                margin-top: 10%;
                padding: 4px 15px;
                font-family: var(--text-regular1);
                background: inherit;
                border-radius: 20px;
                border: 1px solid var(--text-color-main);
                cursor: pointer;
                svg{
                    margin-right: 3px;
                    fill: var(--text-color-main);
                    transform: rotate(180deg);
                }
            }
        }
       

        .image-section{
            position: absolute;
            inset: 0;
            height: 100%;
            width: 50%;
            border-radius: 15px;
            background: #ecc991;
            transition: all .4s ease-in-out;

            img{
                position: absolute;
                width: 60%;
                right: 0%;
                bottom: 0;
            }

            p{
                padding: 6%;
                
                .tip{
                    font-size: 26px;
                    font-weight: bold;
                    color: var(--background-color-main)
                }
                .info{
                    color: var(--text-color-secondary);
                    font-size: 14px;
                }
            }
        }
        .slide-left{
            transform: translate(0%, 0%)
        }
        .slide-right{
            transform: translate(100%, 0%)
        }

        .close-signin{
            display: grid;
            place-items: center;
            position: absolute;
            top: 1%;
            right: 1%;
            padding: 2px 2px;
            border: none;
            border-radius: 100%;
            background: rgba(255, 255, 255, 0.75); 
            box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            z-index: 130;
            svg{
                width: 85%;
                fill: var(--text-color-main)
            }
        }
    }
    .signin-show{
        transform: translate(35%, 20%);
        visibility: visible;
        scale: 1
    }
    .signin-hide{
        transform: translate(37%, 23%);
        visibility: hidden;
        scale: 0.9;
        opacity: 0;
    }
}

@media (max-width: 1000px){
    .signin-popup-container{
        .signin-popup{
            transform: translate(75%, 10%);
            width: 40%;
            height: 85%;
            background: rgba(255, 255, 255, 0.35); 
            .contactus-section, .sigup-section{
                position: absolute;
                inset: 0;
                width: 100%;
                padding: 10% 0%;
                z-index: 125;
            }
            .contactus-section{
                font-size: 19px;
                .contactus-section-padding{
                    height: 25%;
                    width: 75%;
                    margin-bottom: 15%;
                    gap: 10px
                }
            }
            .sigup-section{
                .welcome-message{
                    display: block;
                    padding: 0 4%;
                    text-align: center;
                    font-size: 18px;
                    span{
                        font-size: 20px;
                        color: var(--accent-color);
                        font-family: var(--text-stylish1);
                    }
                }
                .form{
                    margin-top: 5%;
                    width: 70%;
                    form{
                        input{
                            width: 94%;
                            height: 40px;
                        }
                    }
                    .options{
                        .send-details{
                            padding: 12px 15px;
                        }
                        .google-signin{
                            padding: 9px 15px;
                        }
                    }
                }
                .contactus-toggle{
                    margin-bottom: 22%;
                }
            }
            .image-section{
                display: none
            }
            .close-signin{
                padding: 5px 5px;
                svg{
                    width: 85%
                }
            }

            .hide-left{
                left: -100%;
                z-index: 120;
            }
            .hide-right{
                transform: translateX(100%);
                z-index: 120;
            }
        }
    }
}
@media (max-width: 950px){
    .signin-popup-container{
        .signin-popup{
            transform: translate(50%, 10%);
            width: 50%;
        }
    }
}
@media (max-width: 800px){
    .signin-popup-container{
        .signin-popup{
            transform: translate(33%, 10%);
            width: 60%;
        }
    }
}
@media (max-width: 600px){
    .signin-popup-container{
        .signin-popup{
            transform: translate(27%, 10%);
            width: 65%;
        }
    }
}
@media (max-width: 550px){
    .signin-popup-container{
        .signin-popup{
            transform: translate(1%, 1%);
            width: 98%;
            height: 98%
        }
    }
}