/* ==========================================================
   LUCKY ROLL
   SETUP CENTER
   Setup Navigation
========================================================== */


/* ==========================================================
   SETUP NAVIGATION
========================================================== */

.setup-nav{

    position:sticky;

    top: 1px;

    z-index:900;

    width:100%;

    background:rgba(15,31,65,.72);

    border-top:1px solid rgba(255,255,255,.05);

    border-bottom:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

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

}


.setup-nav-inner{

    width:min(var(--container),92%);

    min-height:64px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:30px;

}


.setup-nav-back{

    display:flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;

    color:rgba(255,255,255,.75);

    font-size:14px;

    font-weight:600;

}


.setup-nav-back:hover{

    color:#fff;

}


.setup-nav-links{

    display:flex;

    align-items:center;

    gap:4px;

    flex:1;

    overflow-x:auto;

    scrollbar-width:none;

}


.setup-nav-links::-webkit-scrollbar{

    display:none;

}


.setup-nav-links a{

    position:relative;

    white-space:nowrap;

    padding:22px 13px;

    color:rgba(255,255,255,.68);

    font-size:13px;

    font-weight:600;

}


.setup-nav-links a:hover{

    color:#fff;

}


.setup-nav-links a::after{

    content:"";

    position:absolute;

    left:13px;

    right:13px;

    bottom:0;

    height:2px;

    border-radius:10px;

    background:var(--accent);

    transform:scaleX(0);

    transition:.3s;

}


.setup-nav-links a:hover::after,
.setup-nav-links a.active::after{

    transform:scaleX(1);

}


.setup-nav-links a.active{

    color:#fff;

}


.setup-nav-links .setup-nav-exit{

    margin-left:auto;

    color:#ff9b87;

}


.setup-nav-toggle{

    display:none;

    width:42px;

    height:42px;

    flex-shrink:0;

    border:1px solid rgba(255,255,255,.12);

    border-radius:12px;

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

    cursor:pointer;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

}


.setup-nav-toggle span{

    width:19px;

    height:2px;

    background:#fff;

    border-radius:10px;

}


.setup-mobile-menu{

    display:none;

}


/* ==========================================================
   RESPONSIVE
========================================================== */
@media(max-width:900px){

.setup-nav-links{

        display:none;

    }


    .setup-nav-toggle{

        display:flex;

        margin-left:auto;

    }


    .setup-mobile-menu{

        display:none;

        flex-direction:column;

        padding:12px 4% 20px;

        background:rgba(15,31,65,.98);

        border-top:1px solid rgba(255,255,255,.07);

    }


    .setup-mobile-menu.show{

        display:flex;

    }


    .setup-mobile-menu a{

        padding:14px 0;

        border-bottom:1px solid rgba(255,255,255,.06);

        color:rgba(255,255,255,.75);

        font-size:14px;

        font-weight:600;

    }


    .setup-mobile-menu a:hover{

        color:#fff;

    }


    .setup-mobile-menu .mobile-exit{

        color:#ff8d78;

    }



}