/* =========================================================================
   R33 Visitor Nav — fixed bottom tab bar, mobile only
   Desktop (>= 900px): hidden. Nav lives in the theme header there.
   ========================================================================= */

.r33-visitor-nav {
    display: none; /* shown via media query below */
}

@media (max-width: 899px) {

    .r33-visitor-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9998; /* below modals (9999+), above content */
        height: 56px;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
        /* Safe area inset for devices with home indicator (iPhone X+) */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* ── Tab ─────────────────────────────────────────────────────────── */

    .r33-nav-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #9ca3af;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1;
        padding: 6px 4px 4px;
        transition: color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .r33-nav-tab:hover,
    .r33-nav-tab:active {
        color: #c9a84c;
        text-decoration: none;
    }

    .r33-nav-tab.r33-nav-active {
        color: #c9a84c;
    }

    /* ── Icon wrapper — relative so badge can position against it ──── */

    .r33-nav-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
    }

    .r33-nav-icon svg {
        display: block;
        flex-shrink: 0;
    }

    .r33-nav-tab.r33-nav-active .r33-nav-icon svg {
        stroke: #c9a84c;
    }

    /* ── Badge (unread count / fav count) ───────────────────────────── */

    .r33-nav-badge {
        position: absolute;
        top: -4px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #ef4444;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        line-height: 16px;
        border-radius: 8px;
        text-align: center;
        white-space: nowrap;
        pointer-events: none;
    }

    /* ── Label ──────────────────────────────────────────────────────── */

    .r33-nav-label {
        font-size: 10px;
        line-height: 1;
    }

    /* ── Body padding — prevents content hiding behind the bar ──────── */
    /* Applied via JS on DOMContentLoaded to avoid overriding sticky CTAs */

}

/* Desktop: ensure nav never shows, regardless of specificity */
@media (min-width: 900px) {
    .r33-visitor-nav {
        display: none !important;
    }
}