/**
 * BowlersMart Mobile Bottom Navigation - Styles
 * Version: 1.0.0
 *
 * Navy + Gold theme matching BowlersMart brand.
 * Only displays on screens <= 849px.
 * Hidden on cart and checkout pages (handled by PHP).
 */


/* ============================================ */
/* HIDE ON DESKTOP                              */
/* ============================================ */

.bm-mobile-nav {
    display: none;
}


/* ============================================ */
/* MOBILE ONLY (max-width: 849px)               */
/* ============================================ */

@media screen and (max-width: 849px) {

    /* -------------------------------------------
     * ADD BOTTOM PADDING TO BODY
     * Prevents page content from hiding behind nav
     * ------------------------------------------- */
    body {
        padding-bottom: 72px !important;
    }


    /* -------------------------------------------
     * NAV CONTAINER
     * ------------------------------------------- */
    .bm-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999999;
        background: #1e3a5f;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        justify-content: space-around;
        align-items: stretch;
        padding: 4px 2px 0;
        /* iPhone safe area for home indicator */
        padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
        transition: transform 0.25s ease;
    }

    /* Hide on scroll down */
    .bm-mobile-nav--hidden {
        transform: translateY(100%);
    }


    /* -------------------------------------------
     * TAB (each nav item)
     * ------------------------------------------- */
    .bm-mobile-nav__tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 6px 4px 5px;
        background: transparent;
        border: none;
        border-radius: 8px;
        margin: 0 2px;
        cursor: pointer;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease;
        position: relative;
    }

    /* Remove default link/button styling */
    .bm-mobile-nav__tab:focus {
        outline: none;
    }

    .bm-mobile-nav__tab:active {
        background: rgba(240, 192, 64, 0.08);
    }


    /* -------------------------------------------
     * ACTIVE STATE
     * ------------------------------------------- */
    .bm-mobile-nav__tab--active {
        background: rgba(240, 192, 64, 0.12);
    }

    /* Active dot indicator */
    .bm-mobile-nav__tab--active::after {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #f0c040;
        margin-top: 2px;
    }


    /* -------------------------------------------
     * ICON
     * ------------------------------------------- */
    .bm-mobile-nav__icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
    }

    .bm-mobile-nav__icon svg {
        width: 22px;
        height: 22px;
    }

    /* Default icon color: muted white */
    .bm-mobile-nav__tab .bm-mobile-nav__icon {
        color: rgba(255, 255, 255, 0.55);
    }

    /* Active icon color: gold */
    .bm-mobile-nav__tab--active .bm-mobile-nav__icon {
        color: #f0c040;
    }


    /* -------------------------------------------
     * LABEL
     * ------------------------------------------- */
    .bm-mobile-nav__label {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.2px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.55);
        transition: color 0.15s ease;
    }

    .bm-mobile-nav__tab--active .bm-mobile-nav__label {
        color: #f0c040;
        font-weight: 700;
    }


    /* -------------------------------------------
     * CART BADGE
     * ------------------------------------------- */
    .bm-mobile-nav__badge {
        position: absolute;
        top: -4px;
        right: -8px;
        background: #f0c040;
        color: #1e3a5f;
        font-size: 10px;
        font-weight: 800;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        line-height: 1;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        /* Prevent badge from being clipped */
        z-index: 1;
    }


    /* -------------------------------------------
     * HIDE EXISTING UX BLOCK MOBILE NAV
     * Targets common Flatsome mobile nav blocks.
     * Adjust the selector if needed for your
     * specific UX Block ID or class.
     * ------------------------------------------- */

    /* If your UX Block has a specific ID, uncomment and update:
    #block-[YOUR-BLOCK-ID] {
        display: none !important;
    }
    */


    /* -------------------------------------------
     * FLATSOME ADJUSTMENTS
     * Ensure Flatsome's mobile elements don't
     * conflict with the bottom nav.
     * ------------------------------------------- */

    /* Push Flatsome's scroll-to-top button above the nav */
    .back-to-top {
        bottom: 80px !important;
    }

    /* Ensure Flatsome's mobile cart sidebar still works */
    .mfp-wrap,
    .mfp-bg {
        z-index: 9999999 !important;
    }

}


/* ============================================ */
/* VERY SMALL PHONES (max-width: 374px)         */
/* Galaxy S series, older iPhones               */
/* ============================================ */

@media screen and (max-width: 374px) {
    .bm-mobile-nav__icon svg {
        width: 20px;
        height: 20px;
    }

    .bm-mobile-nav__label {
        font-size: 9px;
    }

    .bm-mobile-nav__tab {
        padding: 5px 2px 4px;
        margin: 0 1px;
    }
}


/* ============================================ */
/* LANDSCAPE PHONE                              */
/* Hide nav in landscape to maximize content    */
/* ============================================ */

@media screen and (max-width: 849px) and (orientation: landscape) and (max-height: 500px) {
    .bm-mobile-nav {
        display: none;
    }

    body {
        padding-bottom: 0 !important;
    }
}


/* ============================================ */
/* PRINT - HIDE NAV                             */
/* ============================================ */

@media print {
    .bm-mobile-nav {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}