/*
 * BM.Market — mobile navigation chrome, per "BM Market Mobile" design:
 * fixed bottom tab bar, compact top bar, 320px left drawer menu, slide-up
 * search overlay. Desktop (≥1024px, the theme's lg breakpoint) is untouched.
 *
 * Plain CSS on design tokens — survives the Tailwind purge (arbitrary values
 * like w-[320px] are NOT compiled for child-theme templates, so sizing lives
 * here).
 */

/* ==========================================================================
   Bottom tab bar (design: 64px, 4 tabs, active = marine, badge = yellow)
   ========================================================================== */
.bm-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;                     /* above content, below drawers/overlays */
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--color-border, #e5e7eb);
}
.bm-mtab {
    flex: 1;
    min-width: 0;   /* labels ("Salīdzināt") can't floor the tab at min-content on 320px devices */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  /* icon+label centred vertically in the bar */
    gap: 3px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    /* same colour as the desktop header action icons (.bm-action) */
    color: var(--color-fg-secondary, #6B7280);
    transition: color .15s;
    position: relative;
    text-decoration: none;
}
.bm-mtab.on { color: var(--color-primary, #005c91); }
.bm-mtab .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.bm-mtab-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-cta, #FFC107);
    color: #111;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* wishlist / compare badges: slate like the desktop header (.bm-action-badge);
   the plain badge (cart) stays yellow CTA. */
.bm-mtab-badge.alt { background: var(--color-slate-700, #334155); color: #fff; }

/* Reserve space for the fixed bar so page content/footer isn't hidden behind
   it. Scoped with :has so pages without the bar (checkout) get no dead gap. */
@media (max-width: 1023.98px) {
    body:has(.bm-tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    /* Back-to-Top floats ABOVE the tab bar instead of covering it. */
    body:has(.bm-tabbar) .bm-totop { bottom: calc(24px + 64px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1024px) {
    .bm-tabbar { display: none; }
}

/* ==========================================================================
   Drawer menu (design: 320px left panel; the <dialog> handles the backdrop)
   ========================================================================== */
@media (max-width: 1023.98px) {
    .bm-mmenu {
        width: 320px;
        max-width: 88vw;
        height: 100%;
        max-height: 100%;
    }
    .bm-mmenu::backdrop { background: rgba(15, 23, 42, .45); }
}
/* uppercase section labels (KATEGORIJAS / INFORMĀCIJA) */
.bm-mmenu-label {
    display: block;
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-fg-muted, #94a3b8);
}
.bm-mmenu-info-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 16px;
    font-size: 14px;
    color: var(--color-fg-secondary, #6B7280);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .12s;
}
.bm-mmenu-info-link:active,
.bm-mmenu-info-link:hover { color: var(--color-primary, #005c91); }

/* ==========================================================================
   Search overlay (mobile): the header's search wrapper becomes a fixed
   overlay sliding in; on desktop it stays the normal inline block.
   ========================================================================== */
@media (max-width: 1023.98px) {
    .bm-msearch {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: var(--color-slate-50, #f8fafc);
        overflow-y: auto;
        /* the header's z-30 stacking context keeps this overlay under the
           fixed tab bar — pad so suggestions never hide behind it */
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
    .bm-msearch.is-open { display: block; }
    .bm-msearch-top {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 12px;
        background: #fff;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
    }
    .bm-msearch-top > form,
    .bm-msearch-top > div { flex: 1; min-width: 0; }
    /* iOS Safari auto-zooms focused inputs whose font-size is under 16px —
       pin the overlay's search input to 16px so tapping it never zooms. */
    .bm-msearch input { font-size: 16px !important; }
}

/* ==========================================================================
   Header row zones. Desktop keeps the ORIGINAL compiled-Tailwind layout
   (logo left · search flex-1 centre · actions ml-auto right); these rules
   only shape the mobile row: burger | centred logo | cart.
   ========================================================================== */
@media (max-width: 1023.98px) {
    .bm-hrow { flex-wrap: nowrap; padding: 8px 12px; column-gap: 8px; }
    .bm-hz-left { flex: 1 1 0; min-width: 0; }
    .bm-hz-actions { flex: 1 1 0; justify-content: flex-end; margin-left: 0 !important; }
}
.bm-msearch-back {
    display: none;
    width: 40px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-fg, #111827);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@media (max-width: 1023.98px) {
    .bm-msearch-back { display: flex; }
}

/* ==========================================================================
   Compact top bar on mobile: hide the cart label under the icon (icon+badge
   only, per the design).
   ========================================================================== */
@media (max-width: 1023.98px) {
    .bm-header-cart-label { display: none; }
}

/* ==========================================================================
   Home-page search trigger (mobile only): looks like the desktop search bar
   (slate pill, magnifier, placeholder, marine button) but is a button that
   opens the search overlay. Rendered below the header on cms_index_index.
   ========================================================================== */
.bm-hsearch {
    display: none;
}
@media (max-width: 1023.98px) {
    .bm-hsearch {
        display: flex;
        align-items: center;
        width: calc(100% - 32px);
        margin: 12px 16px 2px;
        height: 46px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: var(--color-slate-100, #f1f5f9);
        cursor: pointer;
        padding: 0;
        overflow: hidden;
        text-align: left;
    }
    .bm-hsearch-ic {
        flex-shrink: 0;
        display: flex;
        padding: 0 10px 0 14px;
        color: var(--color-fg-muted, #94a3b8);
    }
    .bm-hsearch-ph {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color: var(--color-fg-muted, #94a3b8);
    }
    .bm-hsearch-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 100%;
        background: var(--color-primary, #005c91);
        color: #fff;
    }
}