/* ==========================================================
   SYLFOW MARKET
   PREMIUM NAVBAR
========================================================== */

/* ==========================================================
   NAVBAR
========================================================== */

.sf-navbar {
    position: sticky;
    top: 0;
    z-index: var(--sf-z-navbar);

    width: 100%;
    height: var(--sf-navbar-height);

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(226,232,240,.8);

    transition: var(--sf-transition);
}

.sf-navbar.scrolled {
    box-shadow: var(--sf-shadow-sm);
}

/* ==========================================================
   CONTAINER
========================================================== */

.sf-navbar-container {

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

}

/* ==========================================================
   LOGO
========================================================== */

.sf-logo{

    display:flex;

    align-items:center;

    gap:.85rem;

    font-size:1.35rem;

    font-weight:var(--sf-fw-black);

    color:var(--sf-primary);

    flex-shrink:0;

}

.sf-logo img{

    height:46px;

    width:auto;

}

/* ==========================================================
   MENU
========================================================== */

.sf-navbar-nav{

    display:flex;

    align-items:center;

    gap:2rem;

}

.sf-navbar-nav a{

    position:relative;

    font-weight:var(--sf-fw-medium);

    color:var(--sf-text);

    transition:var(--sf-transition);

}

.sf-navbar-nav a:hover{

    color:var(--sf-primary);

}

.sf-navbar-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--sf-primary);

    transition:var(--sf-transition);

}

.sf-navbar-nav a:hover::after{

    width:100%;

}

/* ==========================================================
   ACTIONS
========================================================== */

.sf-navbar-actions{

    display:flex;

    align-items:center;

    gap:1rem;

}

/* ==========================================================
   AVATAR
========================================================== */

.sf-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid var(--sf-border);

}

/* ==========================================================
   BURGER
========================================================== */

.sf-navbar-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border-radius:50%;

    border:1px solid var(--sf-border);

    background:var(--sf-white);

    cursor:pointer;

    transition:var(--sf-transition);

}

.sf-navbar-toggle:hover{

    background:var(--sf-primary-light);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

    .sf-navbar-nav{

        display:none;

    }

    .sf-navbar-toggle{

        display:flex;

    }

}

@media (max-width:768px){

    .sf-navbar{

        height:74px;

    }

    .sf-logo{

        font-size:1.15rem;

    }

    .sf-logo img{

        height:40px;

    }

    .sf-navbar-actions{

        gap:.75rem;

    }

}