@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-main: #faf9f6;
    --background-sec: #F0F2F5;
    --background-third: #F7F6F3;
    --background-fourth: #121212;
    --accent-gold: #CCac00;
    --box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;          
    --text-stylish: Leckerli One;

    --font-size: 14px;
}

.mobile{
    display: none;
}

@media (max-width: 850px){
    .mobile{
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
        width: 100vw;
        height: 45px;
        font-family: var(--text-regular1);
        color: var(--background-third);
        z-index: 100;
        overflow-x: hidden;
    
        .nav-left{
            display: flex;
            align-items: center;
            margin-left: 10px;
            font-family: var(--text-regular1);
            font-size: var(--font-size);
            padding: 0 10px;
            height: 100%;
            width: fit-content;
            border-radius: 30px;
            z-index: 20;

            .logo-container{
                justify-self: center;
                margin-top: 1%;
                pointer-events: none;

                img{
                    width: 30px;
                    border-radius: 50%;
                }
            }

            .search-container{
                margin-bottom: 1%;
                margin-left: 20px;

                input{
                    height: 35px;
                    width: 180px;
                    padding-left: 10px;
                    padding-right: 51px;
                    color: var(--background-third);
                    text-align: center;
                    font-family: var(--text-regular1);
                    font-size: var(--font-size);
                    background: none;
                    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.09);
                    border-radius: 30px;
                    border: none;

                    &:focus{
                        border: none;
                        outline: none;
                        background: rgba(255, 255, 255, 0.1); 
                        backdrop-filter: blur(10px); 
                        -webkit-backdrop-filter: blur(10px);
                    }
                    &::placeholder{
                        color: var(--background-third);
                        font-style: italic;
                    }
                    &:focus::placeholder {
                        opacity: 0;
                        transition: opacity 0.3s;
                    }
                    &:-webkit-autofill {
                        -webkit-text-fill-color: var(--background-third) !important;
                        transition: background-color 5000s ease-in-out 0s;
                    }
                }
                
                button{
                    translate: -250% 35%;
                    height: 20px;
                    width: 20px;
                    background: none;
                    border: none;
                    cursor: pointer;
                    z-index: 150;

                    svg{
                        width: 20px;
                        fill: var(--background-third);
                    }

                }
            }
        }

        .nav-right{
            display: flex;
            align-items: center;
            margin-right: 10px;
            padding: 0 10px;
            height: 100%;
            border-radius: 30px;
            z-index: 20;

            button{
                background: none;
                border: none;
                cursor: pointer;
            }
        }

        .nav-expansion{
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 25px;
            height: 45px;
            margin: 0 10px;
            background: rgba(87, 94, 85, .4);
            backdrop-filter: blur(38px);
            border-radius: 30px;
            z-index: 100;
            transition: all .4s ease-in-out;

            width: 0%;
            visibility: hidden;
            opacity: 0;

            .dot{
                width: 10px;
                height: 10px;
                border-radius: 100%;
                background: rgba(87, 94, 85, .4);
                backdrop-filter: blur(38px);
            }

            .page-link{
                a{
                    color: var(--background-third);
                    text-decoration: none;
                    transition: .2s ease-in-out;
                }
                a:hover{
                    color: var(--background-color-main);
                }
            }

            button{
                height: 100%;
                color: var(--background-third);
                background: none;
                border: none;
                cursor: pointer;
            }

            .wishlist-container{
                position: relative;
                font-family: var(--text-regular1);

                button{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 1px;
                    color: var(--background-third);

                    svg{
                        fill: var(--background-third);
                        z-index: 50;
                    }
                }

                .wishlist-counter{
                    position: absolute;
                    top: -85%;
                    right: -35%;
                    display: grid;
                    place-items: center;
                    padding: 3px 3px;
                    width: 13px;
                    height: 13px;
                    color: var(--background-third);
                    font-size: 13px;
                    font-weight: 300;
                    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.13);
                    border-radius: 100%;
                }
            }

            .sign-up-btn{
                /* display: none; */
                height: auto;
                padding: 5px 15px;
                font-family: var(--text-regular1);
                font-size: var(--font-size);
                color: var(--text-color-main);
                text-wrap: nowrap;
                border-radius: 7px;
                box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.29);
                background: var(--background-third);
            }

            .account-management-btn{
                display: none;
                align-items: center;
                justify-content: center;
                color: var(--background-third);
            }


        }

        /* CLASSLIST FOR NAVBAR EXPANSION TOGGLE */
        .show{
            visibility: visible;
            opacity: 1;
        }
        .expand{
            width: 95%;
        }

        /* CLASSLIST FOR SCROLL BACKGROUND */
        .navbar-custom-background{
            background: rgba(87, 94, 85, .4);
            backdrop-filter: blur(38px);
        }
    }
}
@media (max-width: 390px){
    .mobile{
        .nav-left{
            .search-container{
                input{
                    width: 130px;
                }
            }
        }

        .nav-expansion{
            gap: 15px
        }
    }
}