.bottom-nav{

    position:fixed;

    left:50%;

    transform:translateX(-50%);

    bottom:0;

    width:100%;

    max-width:430px;

    background:#FFF;

    border-top:1px solid #ECECEC;

    box-shadow:0 -4px 20px rgba(0,0,0,.08);

    z-index:1000;

}



   .bottom-nav-content{

    display:flex;

    justify-content:space-around;

    align-items:center;

    height:72px;

    padding-bottom:env(safe-area-inset-bottom);



}

.bottom-item{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:4px;

    color:#8A8A8A;

    text-decoration:none;

}

.bottom-item.active{

    color:var(--primary);

}

.bottom-item .material-symbols-rounded{

    font-size:28px;

}

.bottom-item span:last-child{

    font-size:11px;

    font-weight:600;

}