/*
 * The bottom bar of a phone (resources/views/includes/tabbar.blade.php). Below 992px it replaces the hamburger on the pages that show it
 * (body.has-tabbar); the top bar keeps the logo and the theme button. Flat: a hairline on top, no shadow, no blur.
 * The page you are on is orange (text version of the orange, 5.1:1 on white) with a short mark on the top edge, like the underline of the desktop menu.
 */
.wj-tabbar { display: none; }

@media (max-width: 991.98px) {
    body.has-tabbar { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    body.has-tabbar .wj-nav .wj-nav-toggle,
    body.has-tabbar .wj-nav .navbar-collapse { display: none !important; }

    .wj-tabbar {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--wj-line, #E3E3E0); background: var(--wj-card, #fff);
    }
    .wj-tabbar, .wj-tabbar * { font-family: var(--wj-font, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif) !important; }
    .wj-tabbar a {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        min-height: 60px; padding: 8px 4px 6px; color: var(--wj-ink-2, #616161); font-size: 12px; font-weight: 600; line-height: 1.1; text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .wj-tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .wj-tabbar a[aria-current="page"] { color: var(--wj-orange-ink, #C73D00); font-weight: 700; }
    .wj-tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px; margin-left: -14px; border-radius: 0 0 2px 2px; background: var(--wj-orange, #F24C00); }
    .wj-tabbar a:active { background: var(--wj-fill, #F1F1EF); }
    .wj-tabbar a:focus-visible { outline: 3px solid var(--wj-focus, rgba(242, 76, 0, .45)); outline-offset: -3px; }

    /* the floating WhatsApp button stays clear of the bar */
    body.has-tabbar .wa-button-container { bottom: calc(76px + env(safe-area-inset-bottom)); }
}