/* =========================
   BOTTOM BAR & DESKTOP BOTTOM NAV
   ========================= */

/* Modern CSS for handling dynamic viewport */
:root {
    --viewport-height: 100vh;
    --safe-area-bottom: env(safe-area-inset-bottom, 0);
    --vh: 1vh;
}

/* Utility class for full height with dynamic viewport */
.full-height-mobile {
    height: 100vh; /* Fallback */
    height: calc(var(--vh, 1vh) * 100); /* Dynamic */
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1), 0 -1px 4px rgba(0,0,0,0.05) !important;
    z-index: 1000;
    display: flex;
    /* iOS safe area support with multiple fallbacks */
    padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
    /* Hardware acceleration for smooth rendering */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    /* Smooth transitions for hiding/showing */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease;
}

/* Hidden state for bottom bar when scrolling */
.bottom-bar.hidden {
    transform: translateY(100%) !important;
    opacity: 0 !important;
}

/* Support for dynamic viewport units */
@supports (height: 100dvh) {
    .bottom-bar {
        /* Keep bottom at 0 for proper positioning */
        bottom: 0;
        /* Adjust height to include safe area */
        min-height: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

/* iOS Safari FIX - Critical for iPhone */
@supports (-webkit-touch-callout: none) {
    .bottom-bar {
        position: fixed !important;
        /* MUST stay at bottom: 0 for proper iOS positioning */
        bottom: 0 !important;
        /* Adjust height instead of bottom position */
        min-height: calc(70px + constant(safe-area-inset-bottom, 0px));
        min-height: calc(70px + env(safe-area-inset-bottom, 0px));
        /* Padding for content area */
        padding-bottom: constant(safe-area-inset-bottom, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* Improved mobile experience */
@media (max-width: 768px) {
    .bottom-bar {
        /* Position fixe garantie - solution éprouvée iOS/Android */
        position: fixed !important;
        /* CRITICAL: Must use bottom: 0 on iOS */
        bottom: 0 !important;
        
        /* Adjust height to accommodate safe area instead of changing bottom */
        min-height: calc(70px + constant(safe-area-inset-bottom, 0px));
        min-height: calc(70px + env(safe-area-inset-bottom, 0px));
        
        /* Padding for content inside safe area */
        padding-bottom: constant(safe-area-inset-bottom, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        
        /* iOS: Force au bas même avec barre d'adresse dynamique */
        /* Use transform for smooth rendering */
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        
        /* iOS: Empêche le reflow lors du scroll */
        -webkit-backface-visibility: hidden;
        
        /* Improve rendering performance */
        -webkit-perspective: 1000px;
        perspective: 1000px;
        
        /* Smooth transitions */
        transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
}

    .bottom-bar .btn-link {
        color: inherit;
    }

        .bottom-bar .btn-link i {
            color: var(--color-primary) !important;
        }

    .bottom-bar .flex-fill {
        flex: 1 1 0;
        min-width: 0;
    }

    .bottom-bar .text-center {
        text-align: center;
    }

    .bottom-bar a {
        flex: 0 0 20%;
        max-width: 20%;
        text-align: center;
        padding: 0.5rem 0;
    }

        .bottom-bar a .bi {
            font-size: 2rem;
            color: var(--color-primary);
            transition: color 0.2s ease;
        }

    .bottom-bar:hover a .bi {
        color: var(--color-gray-muted);
    }

    .bottom-bar a:hover .bi {
        color: var(--color-primary) !important;
    }

@media(max-width:360px) {
    .bottom-bar .fs-4 {
        font-size: 1.2rem !important;
    }
}

.desktop-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease;
    transform: translateY(0);
    opacity: 1;
    z-index: 1000;
    /* Simple safe area padding for mobile */
    padding-bottom: env(safe-area-inset-bottom);
}

/* Handle hiding/showing when scrolling */
.desktop-bottom-nav.hidden-on-bottom {
    transform: translateY(100%);
    opacity: 0;
}