.bottom-nav{
    display:none;
    position:fixed;
    left:14px;
    right:14px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    min-height:74px;
    padding:6px;
    border-radius:30px;

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

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.58),
            rgba(255,255,255,.30) 46%,
            rgba(255,255,255,.42)
        );

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

    color:#17191b;

    backdrop-filter:
        blur(32px)
        saturate(185%)
        brightness(1.04);

    -webkit-backdrop-filter:
        blur(32px)
        saturate(185%)
        brightness(1.04);

    box-shadow:
        0 18px 50px rgba(27,31,35,.15),
        inset 0 1px 0 rgba(255,255,255,.94);

    overflow:hidden;
    z-index:100;
}

.bottom-nav.ready{
    display:grid;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .bottom-nav{
    background:
        linear-gradient(
            145deg,
            rgba(24,27,30,.88),
            rgba(11,13,15,.84) 52%,
            rgba(17,19,22,.88)
        );

    border-color:
        rgba(255,255,255,.085);

    color:#f5f6f7;

    box-shadow:
        0 20px 55px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.055);

    backdrop-filter:
        blur(34px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(34px)
        saturate(150%);
}


/* subtiele Sellnex glow */

html[data-theme="dark"] .bottom-nav::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(85,230,173,.065),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(154,108,255,.09),
            transparent 30%
        );

    opacity:.9;
}


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

.nav-item{
    min-width:0;
    min-height:60px;

    border:1px solid transparent;
    border-radius:24px;

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

    gap:3px;

    color:rgba(23,25,27,.76);

    font-size:6px;
    font-weight:650;

    position:relative;

    background:transparent;

    padding:0;

    font-family:inherit;

    -webkit-tap-highlight-color:transparent;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.nav-item:active{
    transform:scale(.95);
}

html[data-theme="dark"] .nav-item{
    color:rgba(245,246,247,.50);
}


/* =========================================================
   ACTIVE — LIGHT
   ========================================================= */

.nav-item.active{
    color:#17191b;

    background:
        radial-gradient(
            circle at 28% 18%,
            rgba(255,255,255,.96),
            rgba(255,255,255,.56) 54%,
            rgba(255,255,255,.38)
        );

    border-color:
        rgba(255,255,255,.80);

    box-shadow:
        0 8px 22px rgba(27,31,35,.10),
        inset 0 1px 0 rgba(255,255,255,.96);
}


/* =========================================================
   ACTIVE — DARK SELLNEX
   ========================================================= */

html[data-theme="dark"] .nav-item.active{
    color:#fff;

    background:
        linear-gradient(
            145deg,
            rgba(85,230,173,.10),
            rgba(104,216,204,.055) 42%,
            rgba(154,108,255,.13)
        );

    border-color:
        rgba(255,255,255,.085);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        0 8px 24px rgba(0,0,0,.22),
        0 0 20px rgba(138,100,255,.035);
}


/* extra subtiele glow alleen actieve dark tab */

html[data-theme="dark"] .nav-item.active::before{
    content:"";

    position:absolute;

    width:48px;
    height:34px;

    left:50%;
    top:8px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(120,105,255,.13),
            transparent 72%
        );

    filter:blur(6px);

    pointer-events:none;
}


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

.nav-icon{
    width:29px;
    height:25px;

    display:grid;
    place-items:center;

    position:relative;
    z-index:1;
}

.nav-icon svg{
    width:20px;
    height:20px;

    stroke:currentColor;
    fill:none;

    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

html[data-theme="dark"] .nav-item.active .nav-icon{
    color:#fff;
}


/* =========================================================
   ACTIVE ICON ACCENT
   ========================================================= */

html[data-theme="dark"] .nav-item.active .nav-icon::after{
    content:"";

    position:absolute;

    width:5px;
    height:5px;

    left:50%;
    bottom:-4px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #55e6ad,
            #9a6cff
        );

    box-shadow:
        0 0 8px rgba(139,103,255,.35);
}


/* =========================================================
   BADGES
   ========================================================= */

.nav-badge{
    position:absolute;

    top:4px;
    right:calc(50% - 19px);

    min-width:16px;
    height:16px;

    padding:0 4px;

    border-radius:999px;

    display:none;
    place-items:center;

    background:#e45757;
    color:#fff;

    border:1.5px solid rgba(255,255,255,.92);

    font-size:5.5px;
    font-weight:700;

    box-shadow:
        0 4px 10px rgba(228,87,87,.20);

    z-index:3;
}

.nav-badge.show{
    display:grid;
}

html[data-theme="dark"] .nav-badge{
    background:#ef6262;

    border-color:#121416;

    box-shadow:
        0 4px 12px rgba(238,98,98,.30);
}


/* =========================================================
   BUTTON RESET
   ========================================================= */

button.nav-item{
    appearance:none;
    -webkit-appearance:none;

    border-style:solid;

    cursor:pointer;
}


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

@media(max-width:370px){
    .bottom-nav{
        left:10px;
        right:10px;
    }
}

@media(min-width:700px){
    .bottom-nav{
        width:680px;

        left:50%;
        right:auto;

        transform:translateX(-50%);
    }
}

@media(max-width:699px){
    .bottom-nav{
        left:14px!important;
        right:14px!important;

        width:auto!important;

        max-width:
            calc(100vw - 28px)!important;

        transform:none!important;
    }
}

@media(max-width:370px){
    .bottom-nav{
        left:10px!important;
        right:10px!important;

        max-width:
            calc(100vw - 20px)!important;
    }
}


/* =========================================================
   FONT SIZE
   ========================================================= */

html[data-font-size="large"] .nav-item{
    font-size:7px!important;
}

html[data-font-size="large"] .nav-badge{
    font-size:6.3px!important;
}

html[data-font-size="compact"] .nav-item{
    font-size:5.5px!important;
}

html[data-font-size="compact"] .nav-badge{
    font-size:5px!important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){
    .nav-item{
        transition:none!important;
    }
}