/* =========================================================
   Barik Tools - Mobile Bottom Menu (Journal-like)
   ========================================================= */

/* You can adjust these tokens to match Barik Tools palette */

:root {
    --bt-bottom-bg: #3f4b56;
    /* dark bluish grey like screenshot */
    --bt-bottom-fg: rgba(255, 255, 255, .8);
    --bt-bottom-fg-active: #ffffff;
    --bt-bottom-accent: #ffcc00;
    /* yellow icon */
    --bt-bottom-border: rgba(255, 255, 255, .10);
    --bt-bottom-shadow: 0 -10px 25px rgba(0, 0, 0, .18);
    --bt-bottom-height: 64px;
    /* base height */
}
/* Hide on desktop by default */

.bt-bottom-nav {
    display: none;
}
/* Show only on mobile/tablet (adjust breakpoint if needed) */

@media (max-width: 991px) {
    .bt-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(var(--bt-bottom-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--bt-bottom-bg);
        border-top: 1px solid var(--bt-bottom-border);
        box-shadow: var(--bt-bottom-shadow);
        z-index: 9999;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
    }
    .bt-bottom-item {
        text-decoration: none;
        color: var(--bt-bottom-fg);
        height: var(--bt-bottom-height);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .bt-bottom-icon {
        position: relative;
        line-height: 1;
        font-size: 26px;
        /* icon size like screenshot */
        color: var(--bt-bottom-accent);
    }
    .bt-bottom-label {
        font-size: 14px;
        line-height: 1;
        color: var(--bt-bottom-fg);
        letter-spacing: .2px;
    }
    .bt-bottom-item.is-active .bt-bottom-label {
        color: var(--bt-bottom-fg-active);
    }
    /* Badge (cart count) */
    .bt-has-badge .bt-badge {
        position: absolute;
        top: -8px;
        right: -12px;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: #e53935;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--bt-bottom-bg);
        box-sizing: border-box;
    }
    /* Optional: reserve space so content doesn't get covered */
    body.bt-has-bottom-nav {
        padding-bottom: calc(var(--bt-bottom-height) + env(safe-area-inset-bottom, 0px));
    }
}