/* CSS/5_mobile-navbar.css - UPDATED (Premium Glassmorphism, Warm Tones) */

/* Hide by default on desktop */
.mobile-bottom-bar {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
        height: 70px;
        /* Slightly taller for the circle */
        border-radius: 50px;
        /* UPDATED: Multi-layer shadow for float effect */
        box-shadow:
            0 10px 40px rgba(0, 0, 0, 0.3),
            0 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        overflow: hidden;
        transition: all var(--transition-smooth);
        /* UPDATED */
        justify-content: center;
        align-items: center;
        will-change: transform;
        transform: translateZ(0);
    }

    /* Liquid Glass Customization for Mobile Nav (UPDATED: Warm Glass) */
    .mobile-bottom-bar.liquid-glass {
        background: rgba(30, 27, 24, 0.08);
        /* UPDATED: Warm transparent base */
        /* UPDATED: Subtle warm border */
        border: 1.5px solid rgba(247, 242, 236, 0.08);

        --lg-blur: 15px;
        /* UPDATED: Refined blur */
        --lg-saturation: 1.8;
        --lg-contrast: 1.0;
        --lg-gloss-intensity: 0.2;
        /* UPDATED: Increased gloss */
        --lg-bg-opacity: 0.12;
        /* UPDATED: Higher opacity */

        /* FIX: Override Liquid Glass defaults to keep navbar fixed and centered */
        position: fixed !important;
        bottom: 20px;
        border-radius: 50px;

        /* SCALING LOGIC */
        transform-origin: bottom center;
        transform: translateX(-50%) scale(0.9) !important;
        transition: all var(--transition-smooth), transform var(--transition-smooth) !important;
        /* UPDATED */
    }

    /* Safari iOS Fallback */
    @supports not (backdrop-filter: blur(15px)) {
        .mobile-bottom-bar.liquid-glass {
            background: rgba(43, 37, 32, 0.85);
            /* Solid backup */
        }
    }

    /* Scroll Mode Scaling (83% - shrinking by 17%) */
    .mobile-bottom-bar.liquid-glass.scroll-mode {
        transform: translateX(-50%) scale(0.83) !important;
    }

    /* Fallback for browsers without backdrop-filter */
    .mobile-bottom-bar.liquid-glass.liquid-glass--fallback,
    html:not(.lg-backdrop-supported) .mobile-bottom-bar.liquid-glass {
        background: #2B2520;
        /* UPDATED: Surface dark fallback */
    }

    /* --- NAVIGATION STATE --- */
    .mobile-app-nav {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
        position: relative;
        transition: opacity var(--transition-micro), transform var(--transition-micro);
        /* UPDATED */
    }

    /* Price Toggle Container inside Mobile Bar */
    #price-toggle-container {
        position: absolute !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        gap: 15px;
        opacity: 0;
        pointer-events: none;
        transition: all var(--transition-smooth);
        /* UPDATED */
        width: 100%;
        justify-content: center;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fix Labels in Mobile Switch */
    #price-toggle-container .toggle-label {
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 16px;
        font-weight: 600;
        transition: color var(--transition-micro);
        /* UPDATED */
        background: none !important;
        border: none !important;
        margin: 0 10px;
    }

    #price-toggle-container .toggle-label.active {
        color: #fff !important;
    }

    /* Sliding Indicator Bubble (Red Circle) */
    .nav-indicator {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        height: 55px;
        width: 55px;
        background-color: var(--primary-red);
        /* UPDATED: New Red */
        border-radius: 50%;
        z-index: 1;
        transition: transform var(--transition-smooth);
        /* UPDATED */
        box-shadow: 0 4px 12px rgba(216, 67, 21, 0.4);
        /* UPDATED */
    }

    .mobile-nav-item {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.7rem;
        font-weight: 500;
        padding: 5px 10px;
        border-radius: 12px;
        transition: color var(--transition-micro), gap var(--transition-micro);
        /* UPDATED */
        gap: 4px;
        z-index: 2;
        position: relative;
        background: transparent !important;
        box-shadow: none !important;
        width: 60px;
    }

    /* Remove gap in scroll mode for perfect centering */
    .mobile-app-nav.scroll-mode .mobile-nav-item {
        gap: 0;
    }

    .mobile-nav-item span {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all var(--transition-smooth);
        /* UPDATED */
        max-width: 100px;
        max-height: 20px;
        opacity: 1;
    }

    /* --- SCROLL MODE STATE --- */
    /* Hide labels smoothly */
    .mobile-app-nav.scroll-mode .mobile-nav-item span {
        max-width: 0;
        max-height: 0;
        opacity: 0;
        margin: 0;
        overflow: hidden;
    }

    /* Reduce indicator size */
    .mobile-app-nav.scroll-mode .nav-indicator {
        width: 50px;
        height: 50px;
    }

    .mobile-nav-item i {
        font-size: 1.1rem;
        margin-bottom: 2px;
        transition: color var(--transition-micro), margin var(--transition-micro);
        /* UPDATED */
    }

    /* Remove margin in scroll mode for perfect centering */
    .mobile-app-nav.scroll-mode .mobile-nav-item i {
        margin-bottom: 0;
    }

    /* Active State */
    .mobile-nav-item.active {
        color: #fff;
    }

    .mobile-nav-item.active i {
        color: #fff;
    }

    .mobile-nav-item.ordina-ora {
        color: #fff;
    }

    /* --- TRANSFORMATION LOGIC --- */
    /* When the 'show-price-switch' class is added to the parent bar */
    .mobile-bottom-bar.show-price-switch .mobile-app-nav {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
    }

    .mobile-bottom-bar.show-price-switch .price-toggle-container {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: auto;
        z-index: 2000 !important;
    }

    /* Adjustments for the Price Toggle elements to fit nicely */
    #price-toggle-container .switch {
        transform: scale(0.9);
        margin: 0 5px;
        pointer-events: auto !important;
    }

    #price-toggle-container input {
        pointer-events: auto !important;
    }

    #price-toggle-container .slider {
        pointer-events: auto !important;
    }

    .mobile-bottom-bar .price-toggle-container .toggle-label {
        font-size: 1rem;
        color: #333;
        margin: 0 10px;
    }

    .mobile-bottom-bar .price-toggle-container .toggle-label.active {
        color: var(--primary-red);
        font-weight: 700;
    }

    /* Hide the old floating price toggle if it exists elsewhere */
    body>#price-toggle-container {
        display: none !important;
    }
}