/* Public mobile navigation */
.mobile-bottom-nav {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 50;
    display: none;
    height: 76px;
    padding: 10px 12px 14px;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
    background: rgba(246, 238, 221, 0.98);
    border: 2px solid rgba(22, 22, 28, 0.96);
    border-radius: 1rem;
    box-shadow: 6px 6px 0 0 rgba(22, 22, 28, 0.96);
    backdrop-filter: blur(10px);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 20%;
    max-width: 68px;
    border: 0;
    background: transparent;
    color: rgba(22, 22, 28, 0.68);
    text-decoration: none;
}

.mobile-nav-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 38px;
    font-size: 18px;
    border: 2px solid transparent;
    border-radius: 0.8rem;
}

.mobile-nav-item span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-nav-item.active {
    color: #14141c;
}

.mobile-nav-item.active i {
    background: #7f14eb;
    color: #fffaf1;
    border-color: rgba(22, 22, 28, 0.96);
    box-shadow: 3px 3px 0 0 rgba(22, 22, 28, 0.86);
}

.mobile-nav-item:hover {
    color: #14141c;
}

.mobile-nav-item:hover i {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(22, 22, 28, 0.24);
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
        height: calc(76px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 1023px) {
    .mobile-bottom-nav {
        display: flex;
    }

    body {
        padding-bottom: 104px;
    }

    footer {
        padding-bottom: 110px;
    }
}

.mobile-nav-item.active::after {
    display: none;
}