/* ═══════════════════════════════════════════
   Mobile bottom navigation bar
   Classes: mob-nav / mob-nav-btn
═══════════════════════════════════════════ */

/* Nav height token reused for body offset and element pushing */
:root {
    --mob-nav-h: calc(57px + env(safe-area-inset-bottom));
}

/* ── Hide completely on desktop ── */
@media (min-width: 768px) {
    .mob-nav { display: none; }
}

/* ── Mobile styles ── */
@media (max-width: 767px) {

    .mob-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        top: unset;
        height: unset; 
        width: 100%;
        background: #fff;
        border-top: 1px solid #e8e8ee;
        display: flex!important;
        justify-content: space-around;
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
        z-index: 99;
        transition: unset;
    }
    
    .mob-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        border: none;
        background: none;
        font-family: inherit;
        font-size: 10px;
        font-weight: 600;
        color: #6b7280;
        cursor: pointer;
        padding: 4px 12px;
        text-decoration: none;
    }

    .mob-nav-btn svg {
        width: 22px;
        height: 22px;
    }

    .mob-nav-btn.active {
        color: #e91e63;
    }

    /* ── Give body breathing room so content isn't hidden under the nav ── */
    body {
        padding-bottom: var(--mob-nav-h);
    }

    /* ── Push cookie banner above the nav ── */
    .regulations:not(.hidden_regulations) {
        bottom: var(--mob-nav-h);
    }

    /* ── Push alert banner above the nav when visible ── */
    .regulations_alert {
        bottom: var(--mob-nav-h) !important;
    }

    /* ── Hide original chatbot button visually, keep it clickable via JS ── */
    #cbn-widget-btn {
        position: fixed !important;
        right: -9999px !important;
        bottom: -9999px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}