@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;
}

*{
    margin: 0;
    padding: 0;
}
html, body{
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.desktop{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    width: 100vw;
    height: 40px;
    color: var(--background-third);
    z-index: 100;

    .nav-left{
        display:flex;
        align-items: center;
        gap: 20px;
        margin-left: 50px;
        font-family: var(--text-regular1);
        font-size: var(--font-size);
        padding: 0 20px;
        height: 100%;
        border-radius: 30px;

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

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

        .page-link{
            margin-left: 20px;

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

        .search-container{
            margin-bottom: 1%;

            input{
                height: 30px;
                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;
                color: var(--background-fourth);
                background: none;
                border: none;
                cursor: pointer;
                z-index: 150;

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

            }
        }
    }

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

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

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

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

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

        .cart-container{
            button{
                svg{
                    width: 21px;
                    fill: none;
                }
            }
            .cart-counter{
                right: -50%;
            }
        }

        .open-sign-up-window-btn{
            display: none;
            padding: 5px 15px;
            color: var(--background-fourth);
            font-family: var(--text-regular1);
            font-size: var(--font-size);
            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;
            gap: 3px;
            color: var(--background-third);
            background: none;
            box-shadow: none;
            svg{
                width: 19px;
            }
        }

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

    /* CLASSLIST FOR SET BACKGROUND ON SCROLL */
    .navbar-custom-background{
        background: rgba(87, 94, 85, .4);
        backdrop-filter: blur(38px);
        -webkit-backdrop-filter: blur(38px);
    }
}


@media (max-width: 850px){
    .desktop{
        display: none;
    }
}