/* d:\TheBookFLight_Workspace\assets\css\mobile_ctas.css */
:root {
    --tbf-z-nav: 900;
    --tbf-z-docked: 950;
    --tbf-z-cta: 1000;
    --tbf-bottom-nav-height: 65px;
    --tbf-cta-height: 60px;
    --tbf-dock-size: 50px;
    --tbf-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* Hide on desktop, only show on mobile */
.tbf-mobile-bottom-nav,
.tbf-support-dock,
.tbf-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    /* Focus Mode overrides */
    body.tbf-focus-mode-active .tbf-mobile-bottom-nav,
    body.tbf-focus-mode-active .tbf-support-dock,
    body.tbf-focus-mode-active .tbf-sticky-cta {
        display: none !important;
    }

    body {
        /* Ensure content is not hidden behind the stacked CTAs */
        padding-bottom: calc(var(--tbf-bottom-nav-height) + var(--tbf-cta-height) + var(--tbf-safe-area-bottom) + 20px) !important;
    }

    body.tbf-focus-mode-active {
        padding-bottom: 0 !important;
    }

    /* Bottom Navigation */
    .tbf-mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--tbf-bottom-nav-height) + var(--tbf-safe-area-bottom));
        padding-bottom: var(--tbf-safe-area-bottom);
        background: var(--glass-bg, rgba(11, 18, 32, 0.95));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
        z-index: var(--tbf-z-nav);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tbf-mobile-bottom-nav.nav-hidden {
        transform: translateY(100%);
    }

    .tbf-mobile-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--text-muted, #94a3b8);
        font-size: 0.75rem;
        flex: 1;
        padding: 5px 0;
        min-height: 48px;
    }

    .tbf-mobile-bottom-nav .nav-item.active {
        color: var(--primary, #D0021B);
    }

    .tbf-mobile-bottom-nav .nav-item .icon {
        font-size: 1.25rem;
        margin-bottom: 2px;
    }

    /* Support Dock */
    .tbf-support-dock {
        display: flex;
        position: fixed;
        right: 16px;
        bottom: calc(var(--tbf-bottom-nav-height) + var(--tbf-safe-area-bottom) + 16px);
        z-index: var(--tbf-z-docked);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.3s ease;
    }

    .tbf-mobile-bottom-nav.nav-hidden ~ .tbf-support-dock {
        bottom: 16px;
    }

    .tbf-support-dock .support-btn {
        width: var(--tbf-dock-size);
        height: var(--tbf-dock-size);
        border-radius: 50%;
        background-color: var(--primary, #D0021B);
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(208, 2, 27, 0.4);
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        min-height: 48px;
        min-width: 48px;
    }

    /* Sticky CTA */
    .tbf-sticky-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        /* Stacked directly above bottom nav */
        bottom: calc(var(--tbf-bottom-nav-height) + var(--tbf-safe-area-bottom));
        height: var(--tbf-cta-height);
        background: linear-gradient(to top, rgba(11, 18, 32, 1) 50%, rgba(11, 18, 32, 0));
        z-index: var(--tbf-z-cta);
        padding: 8px 80px 8px 16px;
        align-items: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.3s ease;
    }

    .tbf-mobile-bottom-nav.nav-hidden ~ .tbf-sticky-cta {
        bottom: 0;
    }

    .tbf-sticky-cta .cta-btn {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        font-size: 1.1rem;
        font-weight: 700;
        box-shadow: 0 4px 15px rgba(0, 71, 171, 0.3);
    }
}