/* Bottom nav — mobile only (≤860px) */
.bottom-nav { display: none; }

@media (max-width: 860px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: var(--navy, #0a1628);
        border-top: 1px solid rgba(212, 175, 55, 0.35);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
        padding: 0.4rem 0.25rem;
        padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
    }

    .bottom-nav-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 52px;
        padding: 0.35rem 0.15rem 0.2rem;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.72);
        font-family: var(--font-body, 'Inter', sans-serif);
        position: relative;
        border-radius: 8px;
        transition: color 0.15s ease, background 0.15s ease;
    }

    .bottom-nav-item:hover,
    .bottom-nav-item:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, 0.04);
        outline: none;
    }

    .bottom-nav-icon {
        font-size: 1.25rem;
        line-height: 1;
    }

    .bottom-nav-label {
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom-nav-item.is-active {
        color: var(--gold, #d4af37);
    }

    .bottom-nav-item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 25%;
        right: 25%;
        height: 3px;
        background: var(--gold, #d4af37);
        border-radius: 0 0 3px 3px;
    }

    /* Reserva espaço pro conteúdo não ficar atrás da barra.
       70px cobre os 52px de min-height + padding + safe-area dos iPhones. */
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }

    /* Empurra elementos flutuantes pra cima da barra. */
    .emp-fab {
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }
    .pwa-banner {
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }
}