/* ═══════════════════════════════════════════════════════════════════════════
   PWA BOTTOM NAVIGATION BAR — Clean Luxury Edition
   Matches the app's white-on-white + gold accent design language.
   ▸ Only visible when installed as a PWA on mobile (≤768px)
   ▸ Completely invisible to browser visitors and desktop installs
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden by default */
.pwa-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* ── Only show on mobile standalone ────────────────────────────────────── */
@media (display-mode: standalone) and (max-width: 768px) {

    .pwa-bottom-nav {
        display: flex;
        align-items: stretch;
    }

    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Hide hamburger + mobile drawer — bottom nav replaces them */
    .mobile-menu-btn,
    .mobile-nav,
    .mobile-menu-overlay {
        display: none !important;
    }

    /* Move floating action buttons above the nav */
    .floating-actions {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Tab item ──────────────────────────────────────────────────────────── */
.pwa-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #b0b0b0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 6px 2px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: color 0.2s ease;
}

/* ── Icon ──────────────────────────────────────────────────────────────── */
.pwa-nav-item svg {
    width: 23px;
    height: 23px;
    stroke-width: 1.8;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Label ─────────────────────────────────────────────────────────────── */
.pwa-nav-item span {
    line-height: 1;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* ── Tap feedback ──────────────────────────────────────────────────────── */
.pwa-nav-item:active {
    opacity: 0.7;
}

/* ── Active state ──────────────────────────────────────────────────────── */
.pwa-nav-item.active {
    color: #CBB700;
}

.pwa-nav-item.active svg {
    color: #CBB700;
    stroke: #CBB700;
    stroke-width: 2.2;
    transform: translateY(-1px);
}

.pwa-nav-item.active span {
    color: #CBB700;
    font-weight: 700;
}

/* Gold bar indicator on top of the active tab */
.pwa-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #CBB700;
}

/* ── Ripple effect ─────────────────────────────────────────────────────── */
.pwa-nav-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(203, 183, 0, 0.12);
    transform: scale(0);
    animation: pwa-ripple 0.45s ease-out forwards;
    pointer-events: none;
    z-index: 0;
}

@keyframes pwa-ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ── Cart badge ────────────────────────────────────────────────────────── */
.pwa-nav-item .pwa-cart-badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    background: #CBB700;
    color: #1f1f1f;
    font-size: 0.55rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
    z-index: 2;
}

.pwa-nav-item .pwa-cart-badge.has-items {
    display: flex;
}