/* ==========================================================================
   GTA Clicks — mobile tab bar
   Standalone so every layout that shows the bar (public site, auth pages) can load it
   without the full site stylesheet. Colours fall back to the site palette.
   ========================================================================== */

.handheld-toolbar {
    display: none;
}

@media (max-width: 767.98px) {
    .has-tab-bar {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    /* Auth pages: centre the card in the space above the tab bar, not the full screen. */
    .has-tab-bar .auth-shell {
        min-height: calc(100vh - 92px - env(safe-area-inset-bottom));
        min-height: calc(100svh - 92px - env(safe-area-inset-bottom));
    }

    .handheld-toolbar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 1029;
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        align-items: center;
        height: 62px;
        padding: 0 7px;
        font-family: var(--font-sans, 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
        background: #fff;
        border: 1px solid rgba(18, 18, 18, 0.06);
        border-radius: 999px;
        box-shadow: 0 16px 34px -14px rgba(18, 18, 18, 0.35);
    }

    .handheld-toolbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-width: 0;
        height: 100%;
        text-decoration: none;
        color: #6f6861 !important;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .handheld-toolbar-item:active {
        transform: scale(0.94);
    }

    .handheld-toolbar-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 28px;
        border-radius: 14px;
        transition: background-color 0.25s ease;
    }

    .handheld-toolbar-icon .tab-icon {
        display: block;
        width: 22px;
        height: 22px;
    }

    .handheld-toolbar-item.is-active {
        color: var(--btn, #c8323f) !important;
    }

    .handheld-toolbar-item.is-active .handheld-toolbar-icon {
        background: rgba(200, 50, 63, 0.1);
    }

    .handheld-toolbar-item.is-active .tab-icon {
        stroke-width: 2.1;
    }

    .handheld-toolbar-label {
        max-width: 100%;
        overflow: hidden;
        font-size: 0.64rem;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.04em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .handheld-toolbar-item.is-active .handheld-toolbar-label {
        font-weight: 600;
    }

    /* "Book": a red pill inside the bar, always one tap away */
    .handheld-toolbar-item--cta {
        height: 48px;
        margin: 0 2px;
        color: #fff !important;
        background: var(--btn, #c8323f);
        border-radius: 999px;
        box-shadow: 0 8px 18px -8px rgba(200, 50, 63, 0.7);
    }

    .handheld-toolbar-item--cta .handheld-toolbar-icon {
        width: auto;
        height: auto;
        background: none;
    }

    .handheld-toolbar-item--cta .tab-icon {
        width: 20px;
        height: 20px;
    }

    .handheld-toolbar-item--cta .handheld-toolbar-label {
        font-weight: 600;
    }
}