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

.navbar{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    transition:all .35s ease;

    border-bottom:1px solid rgba(0,0,0,.05);

    padding:.8rem 0;

    z-index:1000;

}

.navbar-shadow{

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

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

.logo{

    height:58px;

    width:auto;

    transition:.35s ease;

}

.logo:hover{

    transform:scale(1.04);

}

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

.navbar-nav{

    gap:18px;

}

.nav-link{

    color:var(--text);

    font-weight:600;

    font-size:.97rem;

    position:relative;

    transition:.3s;

    padding:.6rem .3rem !important;

}

.nav-link:hover{

    color:var(--primary)!important;

}

.nav-link::after{

    content:"";

    position:absolute;

    right:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}

/* ===========================
            ICONS
=========================== */

.nav-icon{

    width:44px;

    height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:var(--text);

    text-decoration:none;

    transition:.3s;

}

.nav-icon:hover{

    background:var(--primary-light);

    color:var(--primary);

    transform:translateY(-2px);

}

.nav-icon i{

    font-size:1.25rem;

}

/* ===========================
            BADGE
=========================== */

.badge{

    font-size:.68rem;

    min-width:20px;

    min-height:20px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ===========================
            BUTTONS
=========================== */

.navbar .btn{

    border-radius:14px;

    padding:.55rem 1.1rem;

    font-weight:600;

    transition:.3s;

}

.navbar .btn-primary{

    background:var(--primary);

    border:none;

}

.navbar .btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.navbar .btn-outline-primary{

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

    color:var(--primary);

}

.navbar .btn-outline-primary:hover{

    background:var(--primary);

    color:white;

}

/* ===========================
            DROPDOWN
=========================== */

.dropdown-menu{

    border:none;

    border-radius:18px;

    padding:.7rem;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.dropdown-item{

    border-radius:12px;

    padding:.65rem .9rem;

    transition:.3s;

}

.dropdown-item:hover{

    background:var(--primary-light);

    color:var(--primary);

}

/* ===========================
            MOBILE
=========================== */

.navbar-toggler{

    border:none;

    box-shadow:none!important;

}

.navbar-toggler:focus{

    box-shadow:none!important;

}

@media(max-width:991px){

    .navbar-collapse{

        margin-top:20px;

        padding:20px;

        border-radius:18px;

        background:white;

        box-shadow:var(--shadow-md);

    }

    .navbar-nav{

        gap:8px;

    }

    .logo{

        height:48px;

    }

}

.search-box{

    position:absolute;
    top:45px;
    right:0;

    width:350px;

    background:white;

    padding:15px;

    border-radius:15px;

    display:none;

    z-index:1000;

}


.search-box.active{

    display:block;

    animation: searchFade .3s ease;

}



@keyframes searchFade{

    from{

        opacity:0;
        transform:translateY(-10px);

    }


    to{

        opacity:1;
        transform:translateY(0);

    }

}



.search-results{

    margin-top:10px;

}


.search-item{

display:flex;

align-items:center;

gap:10px;

padding:10px;

text-decoration:none;

color:#333;

border-bottom:1px solid #eee;

}


.search-item img{

width:45px;

height:45px;

object-fit:cover;

border-radius:8px;

}


.search-item:hover{

background:#f8f8f8;

}