/*======================================
EIVOX NAVIGATION CSS
Version: 1.0
======================================*/


/*======================================
MAIN NAVIGATION
======================================*/

.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:10px;
}

.nav-item{
    position:relative;
    list-style:none;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:8px;

    padding:12px 18px;

    border-radius:var(--radius);

    color:var(--text-light);

    font-size:var(--font-md);
    font-weight:var(--weight-medium);

    transition:var(--transition);
}

.nav-link:hover{
    background:var(--surface);
    color:var(--text);
}

.nav-link.active{
    background:var(--primary);
    color:#fff;
}


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

.dropdown{
    position:relative;
}

.dropdown-menu{

    position:absolute;

    top:110%;

    left:0;

    min-width:220px;

    background:var(--card);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:10px;

    display:none;

    z-index:var(--z-dropdown);

}

.dropdown:hover .dropdown-menu{

    display:block;

}

.dropdown-menu a{

    display:block;

    padding:12px 14px;

    border-radius:var(--radius-sm);

    color:var(--text-light);

    transition:var(--transition);

}

.dropdown-menu a:hover{

    background:var(--surface);

    color:var(--text);

}


/*======================================
BOTTOM APP NAVIGATION
======================================*/

.bottom-nav{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    height:72px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    background:rgba(17,24,39,.95);

    backdrop-filter:blur(20px);

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

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

    z-index:var(--z-fixed);

}

.bottom-nav a{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    flex:1;

    height:100%;

    color:var(--text-muted);

    font-size:12px;

    transition:var(--transition);

}

.bottom-nav a i,
.bottom-nav a svg{

    font-size:22px;

    width:22px;

    height:22px;

}

.bottom-nav a:hover{

    color:var(--primary);

}

.bottom-nav a.active{

    color:var(--primary);

}


/*======================================
FLOATING BUTTON
======================================*/

.nav-fab{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

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

    margin-top:-35px;

}


/*======================================
BREADCRUMB
======================================*/

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.breadcrumb a{

    color:var(--text-muted);

}

.breadcrumb a:hover{

    color:var(--primary);

}

.breadcrumb span{

    color:var(--text);

}


/*======================================
PAGINATION
======================================*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.pagination a{

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:var(--radius);

    background:var(--surface);

    color:var(--text);

    transition:var(--transition);

}

.pagination a:hover{

    background:var(--primary);

    color:#fff;

}

.pagination a.active{

    background:var(--primary);

    color:#fff;

}


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

@media(min-width:768px){

    .bottom-nav{

        display:none;

    }

}

@media(max-width:767px){

    .navbar{

        display:none;

    }

}

/*======================================
QUICK ACTION MENU
======================================*/

.quick-menu{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:16px;

    margin:24px 20px;

    padding:20px;

    background:var(--card);

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

    border-radius:24px;

    box-shadow:var(--shadow);

}


/*======================================
QUICK ACTION
======================================*/

.quick-action{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 10px;

    border-radius:18px;

    text-decoration:none;

    color:var(--text);

    background:var(--surface);

    transition:var(--transition);

}

.quick-action:hover{

    transform:translateY(-6px);

    background:var(--primary);

    color:#fff;

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

}

.quick-action svg{

    width:26px;

    height:26px;

    color:inherit;

}

.quick-action span{

    font-size:.82rem;

    font-weight:600;

    text-align:center;

}


/*======================================
ACTION COLORS
======================================*/

.quick-action.wallet{

    border-top:3px solid #22c55e;

}

.quick-action.orders{

    border-top:3px solid #3b82f6;

}

.quick-action.wishlist{

    border-top:3px solid #ec4899;

}

.quick-action.rewards{

    border-top:3px solid #f59e0b;

}

.quick-action.notifications{

    border-top:3px solid #ef4444;

}

.quick-action.marketplace{

    border-top:3px solid #8b5cf6;

}

.quick-action.support{

    border-top:3px solid #06b6d4;

}

.quick-action.profile{

    border-top:3px solid #64748b;

}


/*======================================
TABLET
======================================*/

@media(max-width:991px){

    .quick-menu{

        grid-template-columns:repeat(4,1fr);

        margin:20px 16px;

        padding:18px;

        gap:14px;

    }

}


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

@media(max-width:767px){

    .quick-menu{

        grid-template-columns:repeat(4,1fr);

        margin:16px;

        padding:16px;

        gap:12px;

        border-radius:20px;

    }

    .quick-action{

        padding:16px 8px;

    }

    .quick-action svg{

        width:22px;

        height:22px;

    }

    .quick-action span{

        font-size:.75rem;

    }

}


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

@media(max-width:480px){

    .quick-menu{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

}


/*======================================
QUICK ACTION MENU
======================================*/

.quick-menu{

    position:fixed;

    left:16px;

    right:16px;

    bottom:90px;

    background:var(--card);

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

    border-radius:24px;

    padding:18px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;

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

    z-index:990;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px) scale(.96);

    transition:all .3s ease;

}


/*======================================
OPEN
======================================*/

.quick-menu.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);

}


/*======================================
ACTION
======================================*/

.quick-action{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 10px;

    border-radius:18px;

    background:var(--surface);

    text-decoration:none;

    color:var(--text);

    transition:var(--transition);

}

.quick-action:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-4px);

}

.quick-action svg{

    width:24px;

    height:24px;

    color:inherit;

}

.quick-action span{

    font-size:.78rem;

    font-weight:600;

    text-align:center;

}


/*======================================
TOP COLORS
======================================*/

.wallet{border-top:3px solid #22c55e;}
.orders{border-top:3px solid #3b82f6;}
.wishlist{border-top:3px solid #ec4899;}
.rewards{border-top:3px solid #f59e0b;}
.notifications{border-top:3px solid #ef4444;}
.marketplace{border-top:3px solid #8b5cf6;}
.support{border-top:3px solid #06b6d4;}
.profile{border-top:3px solid #64748b;}


/*======================================
TABLET
======================================*/

@media(max-width:768px){

    .quick-menu{

        left:12px;

        right:12px;

        bottom:82px;

        padding:14px;

        gap:12px;

    }

}


/*======================================
PHONE
======================================*/

@media(max-width:480px){

    .quick-menu{

        grid-template-columns:repeat(2,1fr);

    }

}


/*======================================
BOTTOM NAVIGATION
======================================*/

.bottom-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:space-around;

    background:rgba(8,12,22,.96);

    backdrop-filter:blur(20px);

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

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

    box-shadow:0 -8px 30px rgba(0,0,0,.35);

    z-index:1000;

}


/*======================================
NAV ITEM
======================================*/

.bottom-nav .nav-item{

    flex:1;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    text-decoration:none;

    color:var(--text-muted);

    transition:var(--transition);

    position:relative;

}


/*======================================
ICON
======================================*/

.bottom-nav .nav-item svg{

    width:22px;

    height:22px;

    stroke-width:2;

}


/*======================================
TEXT
======================================*/

.bottom-nav .nav-item span{

    font-size:.72rem;

    font-weight:600;

}


/*======================================
ACTIVE
======================================*/

.bottom-nav .nav-item.active{

    color:var(--primary);

}

.bottom-nav .nav-item.active::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:36px;

    height:3px;

    border-radius:10px;

    background:var(--primary);

}


/*======================================
HOVER
======================================*/

.bottom-nav .nav-item:hover{

    color:var(--primary);

}

.bottom-nav .nav-item:hover svg{

    transform:translateY(-2px);

}


/*======================================
CLICK
======================================*/

.bottom-nav .nav-item:active{

    transform:scale(.95);

}


/*======================================
PHONE
======================================*/

@media(max-width:767px){

    .bottom-nav{

        height:68px;

    }

    .bottom-nav .nav-item svg{

        width:20px;

        height:20px;

    }

    .bottom-nav .nav-item span{

        font-size:.68rem;

    }

}


/*======================================
SMALL PHONE
======================================*/

@media(max-width:480px){

    .bottom-nav{

        height:65px;

    }

}