/* Mobile Sticky Call-to-Action Button */

@media (max-width: 768px) {
    /* Sticky CTA at the bottom of the screen */
    .mobile-sticky-cta {
        display: none !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(10, 15, 29, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 12px 16px;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        z-index: 90;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Ensure the sticky CTA doesn't cover footer content when scrolled to bottom */
    .mobile-sticky-cta.hidden {
        transform: translateY(100%);
    }
    
    /* Style the CTA button */
    .mobile-sticky-cta .btn {
        width: 100%;
        margin: 0;
        background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
        border-radius: 10px;
        padding: 14px 24px;
        font-weight: 700;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }
    
    /* Adjust bottom padding on body to prevent content being cut off */
    body {
        padding-bottom: 0;
    }
    
    /* Add iOS safe area support */
    @supports (padding: max(0px)) {
        .mobile-sticky-cta {
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
    }
    
    /* Sticky progress bar showing page scroll progress */
    .mobile-scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
        z-index: 101;
    }
    
    .mobile-scroll-progress::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%; /* Updated via JS */
        background: linear-gradient(90deg, #4F46E5 0%, #6366F1 100%);
        transition: width 0.1s ease;
    }
    
    /* Styles for the alternate sticky CTA with tab bar */
    .mobile-tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        justify-content: space-around;
        padding: 12px 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
        z-index: 90;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-tab-bar.hidden {
        transform: translateY(100%);
    }
    
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: 10px;
        padding: 6px 0;
    }
    
    .tab-item.active {
        color: #6366F1;
    }
    
    .tab-icon {
        font-size: 20px;
        margin-bottom: 4px;
    }
    
    /* Adjust bottom padding for tab bar instead of single CTA */
    body.has-tab-bar {
        padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
    }
}