/* CodeGeek PWA mobile bottom navigation
   Visible only when pwa.js detects an installed/standalone PWA. */
#codegeek-pwa-nav {
    display: none;
}

@media (max-width: 767px) {
    #codegeek-pwa-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: 66px;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        box-sizing: content-box;
        background: #000000;
        border-top: 1px solid rgba(255, 181, 0, 0.35);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
    }

    #codegeek-pwa-nav a {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #ffffff;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.1;
        -webkit-tap-highlight-color: transparent;
    }

    #codegeek-pwa-nav a .cg-nav-icon {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 19px;
        line-height: 1;
    }

    #codegeek-pwa-nav a.active {
        color: #FFB500;
    }

    #codegeek-pwa-nav a.active .cg-nav-icon {
        background: #FFB500;
        color: #000000;
    }
}

@media (max-width: 767px) {
    body:has(#codegeek-pwa-nav) {
        padding-bottom: 84px;
    }
}