/* ===== Bottom Navigation Bar ===== */

/* Lift FAB above bottom nav when logged in */
body.logged-in .fab-add {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
}


/* Content padding to prevent overlap with fixed nav */
body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Adjust sticky total-calories footer in index.html when logged in */
body.logged-in footer {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 768px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(236, 72, 153, 0.10);
    box-shadow:
        0 -8px 32px rgba(168, 85, 247, 0.10),
        0 -1px 0 rgba(255, 255, 255, 0.7) inset;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav.hidden {
    display: none;
}

/* Slide-up entrance animation */
.bottom-nav:not(.hidden) {
    animation: navSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes navSlideUp {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 6px 4px;
    border-radius: 0;
    text-decoration: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    cursor: pointer;
}

.bottom-nav-item:active {
    transform: scale(0.88);
}

/* Active background pill */
.bottom-nav-item::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.10), rgba(168, 85, 247, 0.10));
    opacity: 0;
    transition: opacity 0.22s ease;
    z-index: 0;
}

.bottom-nav-item.active::before {
    opacity: 1;
}

/* Top gradient line indicator */
.bottom-nav-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 28px;
    height: 3px;
    background: linear-gradient(90deg, #ec4899, #a855f7);
    border-radius: 0 0 4px 4px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bottom-nav-item.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Icon */
.bottom-nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.bottom-nav-icon svg {
    color: #c2c8d8;
    transition: color 0.22s ease, stroke-width 0.22s ease;
}

.bottom-nav-item.active .bottom-nav-icon svg {
    color: #ec4899;
    stroke-width: 2.3;
}

/* Label */
.bottom-nav-label {
    font-size: 10px;
    font-weight: 500;
    color: #c2c8d8;
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.22s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.bottom-nav-item.active .bottom-nav-label {
    font-weight: 700;
    background: linear-gradient(135deg, #ec4899, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}