/* ============================================
   Falchi Mobile Bottom Navigation Menu
   Mobile-only animated bottom bar
   ============================================ */

/* ---- CSS Custom Properties ---- */
:root {
    --falchi-nav-bg: rgba(255, 255, 255, 0.92);
    --falchi-nav-blur: 20px;
    --falchi-nav-shadow: 0 -4px 30px rgba(0, 0, 0, 0.08);
    --falchi-nav-border: rgba(200, 186, 160, 0.3);
    --falchi-nav-height: 70px;
    --falchi-nav-icon-size: 22px;
    --falchi-nav-color: #7a6e5e;
    --falchi-nav-color-active: #5e6e3e;
    --falchi-nav-accent: #6b7f3a;
    --falchi-nav-accent-glow: rgba(107, 127, 58, 0.25);
    --falchi-nav-label-size: 10px;
    --falchi-nav-badge-bg: #c0392b;
    --falchi-nav-badge-color: #ffffff;
    --falchi-nav-radius: 20px;
    --falchi-nav-transition: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Hide on Desktop ---- */
.falchi-mobile-nav,
.falchi-mobile-nav-spacer {
    display: none;
}

/* ---- Show only on Mobile (max-width: 768px) ---- */
@media (max-width: 768px) {

    .falchi-mobile-nav {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999999;
        padding: 0 8px 0;
        /* Entry animation */
        animation: falchiNavSlideUp 0.6s var(--falchi-nav-transition) forwards;
    }

    .falchi-mobile-nav__inner {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        background: var(--falchi-nav-bg);
        backdrop-filter: blur(var(--falchi-nav-blur));
        -webkit-backdrop-filter: blur(var(--falchi-nav-blur));
        border-top: 1px solid var(--falchi-nav-border);
        border-left: 1px solid var(--falchi-nav-border);
        border-right: 1px solid var(--falchi-nav-border);
        border-radius: var(--falchi-nav-radius) var(--falchi-nav-radius) 0 0;
        box-shadow: var(--falchi-nav-shadow);
        height: var(--falchi-nav-height);
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ---- Navigation Item ---- */
    .falchi-mobile-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-decoration: none;
        color: var(--falchi-nav-color);
        position: relative;
        padding: 8px 4px 6px;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.3s ease, transform 0.3s var(--falchi-nav-transition);
        cursor: pointer;
        gap: 3px;
    }

    .falchi-mobile-nav__item:hover,
    .falchi-mobile-nav__item:focus {
        text-decoration: none;
        color: var(--falchi-nav-color);
        outline: none;
    }

    /* ---- Icon ---- */
    .falchi-mobile-nav__icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 32px;
        border-radius: 16px;
        transition: background 0.35s ease, transform 0.35s var(--falchi-nav-transition);
    }

    .falchi-mobile-nav__icon svg {
        width: var(--falchi-nav-icon-size);
        height: var(--falchi-nav-icon-size);
        transition: stroke 0.3s ease, transform 0.3s var(--falchi-nav-transition);
        flex-shrink: 0;
    }

    /* ---- Label ---- */
    .falchi-mobile-nav__label {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: var(--falchi-nav-label-size);
        font-weight: 500;
        letter-spacing: 0.3px;
        line-height: 1;
        opacity: 0.7;
        transition: opacity 0.3s ease, transform 0.3s var(--falchi-nav-transition), font-weight 0.3s ease;
    }

    /* ---- Active Indicator (pill behind icon) ---- */
    .falchi-mobile-nav__indicator {
        position: absolute;
        top: 6px;
        width: 0;
        height: 32px;
        border-radius: 16px;
        background: var(--falchi-nav-accent-glow);
        transition: width 0.4s var(--falchi-nav-transition), opacity 0.3s ease;
        opacity: 0;
        z-index: -1;
    }

    /* ---- Cart Badge ---- */
    .falchi-mobile-nav__badge {
        position: absolute;
        top: -2px;
        right: -2px;
        background: var(--falchi-nav-badge-bg);
        color: var(--falchi-nav-badge-color);
        font-size: 9px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 10px;
        padding: 0 4px;
        box-shadow: 0 2px 6px rgba(192, 57, 43, 0.35);
        animation: falchiBadgePop 0.4s var(--falchi-nav-transition);
    }

    /* ---- Active State ---- */
    .falchi-mobile-nav__item.is-active {
        color: var(--falchi-nav-color-active);
    }

    .falchi-mobile-nav__item.is-active .falchi-mobile-nav__icon {
        background: var(--falchi-nav-accent-glow);
        transform: translateY(-1px);
    }

    .falchi-mobile-nav__item.is-active .falchi-mobile-nav__icon svg {
        stroke: var(--falchi-nav-accent);
        transform: scale(1.08);
    }

    .falchi-mobile-nav__item.is-active .falchi-mobile-nav__label {
        opacity: 1;
        font-weight: 600;
        color: var(--falchi-nav-accent);
    }

    .falchi-mobile-nav__item.is-active .falchi-mobile-nav__indicator {
        width: 48px;
        opacity: 1;
    }

    /* ---- Tap / Press Animation ---- */
    .falchi-mobile-nav__item:active {
        transform: scale(0.92);
    }

    .falchi-mobile-nav__item:active .falchi-mobile-nav__icon {
        transform: scale(0.9);
    }

    /* ---- Ripple Effect ---- */
    .falchi-mobile-nav__item .ripple {
        position: absolute;
        border-radius: 50%;
        background: var(--falchi-nav-accent-glow);
        transform: scale(0);
        animation: falchiRipple 0.5s ease-out forwards;
        pointer-events: none;
    }

    /* ---- Spacer to avoid content overlap ---- */
    .falchi-mobile-nav-spacer {
        display: block;
        height: calc(var(--falchi-nav-height) + env(safe-area-inset-bottom, 0px) + 10px);
    }

    /* ---- Animations ---- */

    /* Slide Up Entry */
    @keyframes falchiNavSlideUp {
        0% {
            transform: translateY(100%);
            opacity: 0;
        }
        60% {
            opacity: 1;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Badge Pop */
    @keyframes falchiBadgePop {
        0% {
            transform: scale(0);
        }
        60% {
            transform: scale(1.3);
        }
        100% {
            transform: scale(1);
        }
    }

    /* Ripple */
    @keyframes falchiRipple {
        0% {
            transform: scale(0);
            opacity: 0.5;
        }
        100% {
            transform: scale(3);
            opacity: 0;
        }
    }

    /* Icon bounce on tap */
    @keyframes falchiIconBounce {
        0% { transform: translateY(0) scale(1); }
        30% { transform: translateY(-4px) scale(1.15); }
        60% { transform: translateY(1px) scale(0.98); }
        100% { transform: translateY(0) scale(1); }
    }

    .falchi-mobile-nav__item.is-bouncing .falchi-mobile-nav__icon svg {
        animation: falchiIconBounce 0.5s var(--falchi-nav-transition);
    }

    /* ---- Scroll Behavior: auto-hide on scroll down ---- */
    .falchi-mobile-nav.is-hidden {
        transform: translateY(110%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .falchi-mobile-nav.is-visible {
        transform: translateY(0);
        transition: transform 0.35s var(--falchi-nav-transition);
    }
}

/* ---- Extra small devices ---- */
@media (max-width: 380px) {
    :root {
        --falchi-nav-icon-size: 20px;
        --falchi-nav-label-size: 9px;
        --falchi-nav-height: 64px;
    }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .falchi-mobile-nav,
    .falchi-mobile-nav__item,
    .falchi-mobile-nav__icon,
    .falchi-mobile-nav__icon svg,
    .falchi-mobile-nav__label,
    .falchi-mobile-nav__indicator,
    .falchi-mobile-nav__badge {
        animation: none !important;
        transition: none !important;
    }
}