/**
 * Mobile tab bar clearance
 *
 * `.mobile-bottom-nav` is position:fixed. Anything that uses the viewport
 * bottom (page end, sticky CTAs, toasts) must sit above --ts-tabbar-clearance.
 *
 * Fallback = bar + iOS home indicator. shell-mobile.js overwrites
 * --ts-tabbar-measured with the real box (including the raised cart FAB).
 */

:root {
    --ts-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ts-bottom-nav-height: 0px;
    --ts-tabbar-clearance: 0px;
}

@media (max-width: 1024px) {
    :root {
        --ts-bottom-nav-height: 72px;
        --ts-tabbar-clearance: var(--ts-tabbar-measured, calc(72px + env(safe-area-inset-bottom, 0px)));
    }

    html {
        scroll-padding-bottom: var(--ts-tabbar-clearance);
    }

    body {
        padding-bottom: var(--ts-tabbar-clearance) !important;
    }

    /* Docked chrome sits on the tab bar, never under it. */
    .ts-above-tabbar,
    .ts-cart-sticky,
    .qr-nav,
    .fixed-bottom,
    .ts-msg-composer,
    .ts-support-composer {
        bottom: var(--ts-tabbar-clearance);
    }

    .ts-account-toast-host {
        bottom: calc(var(--ts-tabbar-clearance) + 1rem);
    }

    .btntoTop {
        bottom: calc(var(--ts-tabbar-clearance) + 12px) !important;
    }

    /* Full-viewport sections (login / register) must not extend under the bar. */
    .auth-section {
        min-height: calc(100dvh - var(--ts-tabbar-clearance)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box;
    }

    .ts-store-profile-section {
        min-height: calc(100dvh - var(--ts-tabbar-clearance));
        padding-bottom: 1.5rem;
    }

    .ts-tabbar-lifted {
        bottom: var(--ts-tabbar-clearance) !important;
    }
}

/* Capacitor shell keeps the tab bar on every width; reuse the same token. */
html.ts-native-app {
    --ts-bottom-nav-height: 64px;
    --ts-tabbar-clearance: var(--ts-tabbar-measured, calc(var(--ts-bottom-nav-height) + var(--ts-safe-bottom)));
}

html.ts-native-app body {
    padding-bottom: var(--ts-tabbar-clearance) !important;
}

html.ts-native-app .ts-above-tabbar,
html.ts-native-app .ts-cart-sticky,
html.ts-native-app .qr-nav,
html.ts-native-app .fixed-bottom,
html.ts-native-app .ts-tabbar-lifted,
html.ts-native-app .ts-msg-composer,
html.ts-native-app .ts-support-composer {
    bottom: var(--ts-tabbar-clearance);
}

html.ts-native-app .ts-account-toast-host {
    bottom: calc(var(--ts-tabbar-clearance) + 1rem);
}

html.ts-native-app .btntoTop {
    bottom: calc(var(--ts-tabbar-clearance) + 12px) !important;
}