/* ============================================================
   Mobile Bottom Tab Bar
   ------------------------------------------------------------
   Visible only below the tablet breakpoint (< 768px).
   Markup: resources/views/website/partials/mobile-bottom-nav.blade.php
   Behaviour: public/assets/js/mobile-bottom-nav.js
   ============================================================ */

.mobile-bottom-nav {
    /* Hidden by default so desktop and tablet never paint it, even
       for a frame before the media query is evaluated. */
    display: none;
}

@media (max-width: 767.98px) {

    .mobile-bottom-nav {
        --mbn-accent: #ea580c;
        --mbn-muted: #6b7280;

        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99998; /* just under the WhatsApp widget (99999) */

        background: #ffffff;
        border-top: 1px solid #ececf5;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);

        /* Clear the iOS home indicator / Android gesture bar. */
        padding-bottom: env(safe-area-inset-bottom, 0px);

        transition: transform 0.28s ease;
        will-change: transform;
    }

    /* Slid out of view by the auto-hide behaviour on scroll down. */
    .mobile-bottom-nav.mbn-hidden {
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    }

    .mobile-bottom-nav .mbn-list {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-bottom-nav .mbn-item {
        flex: 1 1 0;
        min-width: 0; /* let labels shrink instead of overflowing at 320px */
    }

    .mobile-bottom-nav .mbn-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;

        /* 48px keeps every tab at the recommended minimum touch target. */
        min-height: 56px;
        padding: 7px 2px 6px;

        color: var(--mbn-muted);
        text-decoration: none;
        text-align: center;

        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease;
    }

    .mobile-bottom-nav .mbn-link:hover,
    .mobile-bottom-nav .mbn-link:focus {
        color: var(--mbn-accent);
        text-decoration: none;
    }

    .mobile-bottom-nav .mbn-link:focus-visible {
        outline: 2px solid var(--mbn-accent);
        outline-offset: -3px;
        border-radius: 10px;
    }

    .mobile-bottom-nav .mbn-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .mobile-bottom-nav .mbn-icon svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    .mobile-bottom-nav .mbn-label {
        font-size: 11px;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: 0.1px;

        /* Never wrap to a second line — truncate instead. */
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---------- Active tab ---------- */
    .mobile-bottom-nav .mbn-link.is-active {
        color: var(--mbn-accent);
        font-weight: 700;
        position: relative;
    }

    .mobile-bottom-nav .mbn-link.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--mbn-accent);
    }

    /* ---------- Space for the bar so it never covers page content ----------
       The exact value is set by the JS from the bar's real height; this is
       the no-JS fallback. */
    body.has-mobile-bottom-nav {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* ---------- Keep the WhatsApp widget clear of the bar ---------- */
    body.has-mobile-bottom-nav .wa-widget-btn {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    body.has-mobile-bottom-nav .wa-chat-popup {
        bottom: calc(142px + env(safe-area-inset-bottom, 0px));
    }

    /* ---------- Very narrow phones (320–360px) ---------- */
    @media (max-width: 360px) {
        .mobile-bottom-nav .mbn-link {
            min-height: 52px;
            padding: 6px 1px 5px;
            gap: 3px;
        }

        .mobile-bottom-nav .mbn-icon svg {
            width: 20px;
            height: 20px;
        }

        .mobile-bottom-nav .mbn-label {
            font-size: 10px;
        }
    }

    /* ---------- Landscape phones: keep the bar shallow ---------- */
    @media (orientation: landscape) and (max-height: 460px) {
        .mobile-bottom-nav .mbn-link {
            flex-direction: row;
            gap: 6px;
            min-height: 44px;
            padding: 5px 4px;
        }

        .mobile-bottom-nav .mbn-link.is-active::before {
            display: none;
        }
    }

    /* ---------- Respect reduced-motion preferences ---------- */
    @media (prefers-reduced-motion: reduce) {
        .mobile-bottom-nav {
            transition: none;
        }

        .mobile-bottom-nav.mbn-hidden {
            transform: none; /* never auto-hide when motion is reduced */
        }
    }
}

/* Never print the tab bar. */
@media print {
    .mobile-bottom-nav {
        display: none !important;
    }
}