/**
 * Bellevue Mobile Bottom Bar — bottom-bar.css
 * Fixed bottom navigation visible on mobile only (max-width: 767px).
 * Hidden on desktop. Designed to feel like a native mobile app tab bar.
 */

/* ===========================
   Hidden by default on desktop
   =========================== */
.bbb-bar {
    display: none;
}

/* ===========================
   MOBILE ONLY — max-width 767px
   =========================== */
@media screen and (max-width: 767px) {

    /* ----- Bottom Bar Container ----- */
    .bbb-bar {
        display: flex;
        align-items: stretch;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9990;
        /* background: #1a1a22; */
        height: 64px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.40);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(4px);
    }

    /* ----- Each nav item ----- */
    .bbb-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 4px 6px;
        text-decoration: none !important;
        color: #8a8a96 !important;
        position: relative;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease;
        cursor: pointer;
    }

    /* --- Ripple / press feedback --- */
    .bbb-item::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, rgba(155, 95, 181, 0.20) 0%, transparent 70%);
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 0.25s ease, transform 0.25s ease;
        pointer-events: none;
        border-radius: 12px;
    }

    /* Hover */
    .bbb-item:hover {
        color: #d4b0e8 !important;
    }

    .bbb-item:hover::before {
        opacity: 1;
        transform: scale(1);
    }

    /* Active / Press */
    .bbb-item:active {
        color: #e0c0f0 !important;
    }

    .bbb-item:active::before {
        opacity: 1;
        transform: scale(1.1);
        background: radial-gradient(circle at center, rgba(155, 95, 181, 0.35) 0%, transparent 70%);
        transition: opacity 0.08s ease, transform 0.08s ease;
    }

    /* Active press — icon bounce */
    .bbb-item:active .bbb-icon {
        transform: scale(0.85);
    }

    /* ----- Icon ----- */
    .bbb-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .bbb-icon svg {
        display: block;
        width: 100%;
        height: 100%;
        color: inherit;
    }

    /* ----- Label ----- */
    .bbb-label {
        display: block;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        color: inherit;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 72px;
        text-align: center;
    }

    /* ----- Active page indicator (JS-driven via .bbb-active class) ----- */
    .bbb-item.bbb-active {
        color: #c9a0e0 !important;
    }

    .bbb-item.bbb-active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, #9b5fb5, #c9a0e0);
    }

    /* ----- Add bottom padding to page body so content isn't hidden behind the bar ----- */
    body {
        padding-bottom: 68px !important;
    }

    /* ----- When the mobile drawer menu is open, hide the bottom bar ----- */
    html.nav-open .bbb-bar {
        display: none;
    }
}