/* =========================
   GLOBAL BOTTOM NAV
========================= */

.bottom-nav{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%);

    width:100%;
    max-width:480px;
    height:68px;

    padding:
        5px 10px
        calc(5px + env(safe-area-inset-bottom));

    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border-top:1px solid rgba(226,232,240,.9);

    display:flex;
    align-items:center;
    justify-content:space-around;

    box-sizing:border-box;

    box-shadow:0 -8px 30px rgba(15,23,42,.08);

    z-index:9999;
}

.bottom-nav a{
    position:relative;
    flex:1;
    height:54px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:3px;

    text-decoration:none;
    color:#94a3b8;

    font-size:10px;
    font-weight:600;

    border-radius:16px;

    transition:.2s ease;
}

.bottom-nav i{
    width:32px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    margin:0;

    border-radius:12px;
}

.bottom-nav a.active{
    color:#2563eb;
    font-weight:700;
}

.bottom-nav a.active i{
    color:#2563eb;
    background:rgba(37,99,235,.10);
}

.bottom-nav a.active::before{
    content:"";

    position:absolute;
    top:-5px;

    width:26px;
    height:3px;

    border-radius:0 0 6px 6px;

    background:#2563eb;

    box-shadow:
        0 2px 8px rgba(37,99,235,.35);
}

.bottom-nav a:active{
    transform:scale(.94);
}

body{
    padding-bottom:
        calc(78px + env(safe-area-inset-bottom));
}