/**
 * Mobile Bottom Navigation — floating capsule ala iOS / Instagram / Threads.
 *
 * Isi menu, ikon, dan tautan tidak diatur di sini (lihat komponen Blade-nya);
 * berkas ini murni tampilan + animasi.
 *
 * Dua state yang saling terpisah — jangan digabung:
 *   body.nav-dipped       scroll ke bawah → navbar "menunduk" sedikit.
 *                         TIDAK PERNAH hilang, hanya turun + mengecil + memudar.
 *   body.mobile-nav-hidden ada panel melayang (drilldown kategori, bottom sheet,
 *                         dropdown, overlay pencarian) → navbar benar-benar
 *                         disembunyikan supaya tidak menutupi isi panel.
 *
 * Seluruh animasi hanya memakai transform + opacity (tidak memicu layout /
 * repaint besar), dan navbar position:fixed sehingga tidak menimbulkan CLS.
 */

.mobile-bottom-nav {
    /* Spring hasil sampling sistem massa-pegas (k=210, c=20, m=1): overshoot
       ~5% lalu settle — inilah yang membuat gerakannya terasa native, bukan
       linear. cubic-bezier di bawah adalah fallback untuk browser lama. */
    --nav-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --nav-dip-y: 12px;   /* seberapa jauh navbar turun saat scroll ke bawah */
    --nav-dip-scale: 0.96;

    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom) + 16px);

    height: 72px;
    max-width: 420px;
    margin: 0 auto;

    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);

    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);

    box-shadow:
        0 6px 24px rgba(15, 23, 42, 0.10),
        0 1px 3px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    justify-content: space-around;
    align-items: center;
    padding: 0 8px;

    z-index: 9999;

    /* translate3d menaikkan navbar ke layer GPU sendiri sejak awal, jadi
       transisi pertama tidak "tersendat" karena promosi layer mendadak. */
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    transform-origin: 50% 100%;
    will-change: transform, opacity;

    transition:
        transform 0.5s var(--nav-spring),
        opacity 0.28s ease-out;

    /* Hanya tampil di mobile & tablet kecil. */
    display: none;
}

@supports (transition-timing-function: linear(0, 1)) {
    .mobile-bottom-nav {
        --nav-spring: linear(0,0.055,0.185,0.348,0.513,0.662,0.788,0.886,0.957,1.004,1.032,1.046,1.05,1.047,1.041,1.032,1.024,1.017,1.011,1.006,1);
    }
}

@media (max-width: 767px) {
    .mobile-bottom-nav { display: flex; }
}

/* Dark mode */
body.dark-mode .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATE: SCROLL KE BAWAH — menunduk, tidak hilang
   ───────────────────────────────────────────────────────────────────────────── */
body.nav-dipped .mobile-bottom-nav {
    transform: translate3d(0, var(--nav-dip-y), 0) scale(var(--nav-dip-scale));
    opacity: 0.92;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATE: ADA PANEL MELAYANG — sembunyi penuh
   Satu-satunya definisi; duplikat di category-drilldown.css dan di <style>
   layout sudah dihapus agar tidak saling menimpa.
   ───────────────────────────────────────────────────────────────────────────── */
body.mobile-nav-hidden .mobile-bottom-nav {
    transform: translate3d(0, calc(100% + 32px), 0) scale(0.94);
    opacity: 0;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAV ITEM
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-bottom-nav-item {
    --tap-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex: 1;
    min-width: 44px;
    max-width: 72px;
    height: 100%;

    padding: 8px 4px;

    color: #64748B;
    text-decoration: none;

    transition: color 0.3s var(--tap-spring);

    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

@supports (transition-timing-function: linear(0, 1)) {
    .mobile-bottom-nav-item {
        --tap-spring: linear(0,0.057,0.19,0.354,0.519,0.668,0.791,0.886,0.955,1,1.027,1.04,1.044,1.042,1.036,1.029,1);
    }
}

.mobile-bottom-nav-item:focus { outline: none; }

.mobile-bottom-nav-item:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    border-radius: 18px;
}

/* Ikon — transform + opacity saja. */
.mobile-bottom-nav-item .icon {
    width: 24px;
    height: 24px;
    stroke-width: 2;

    opacity: 0.75;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        transform 0.32s var(--tap-spring),
        opacity 0.3s ease,
        color 0.3s ease;
}

.mobile-bottom-nav-item .label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.01em;

    margin-top: 4px;

    opacity: 0.75;
    transition: opacity 0.3s ease, color 0.3s ease;
}

/* Pil latar: selalu ada di DOM (bukan hanya saat .active) supaya bisa
   di-transisikan, bukan muncul mendadak saat pindah halaman. */
.mobile-bottom-nav-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;

    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;

    background: rgba(37, 99, 235, 0.10);
    border-radius: 999px;

    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.55);
    transition:
        transform 0.32s var(--tap-spring),
        opacity 0.26s ease;

    pointer-events: none;
}

/* Umpan balik sentuh: sedikit menekan, lalu memantul balik. */
.mobile-bottom-nav-item:active .icon {
    transform: translate3d(0, 0, 0) scale(0.88);
    transition-duration: 0.12s;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACTIVE STATE
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-bottom-nav-item.active { color: #2563EB; }

.mobile-bottom-nav-item.active .icon {
    color: #2563EB;
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.06);
}

.mobile-bottom-nav-item.active .label {
    color: #2563EB;
    font-weight: 600;
    opacity: 1;
}

.mobile-bottom-nav-item.active::before {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Dark mode active state */
body.dark-mode .mobile-bottom-nav-item.active,
body.dark-mode .mobile-bottom-nav-item.active .icon,
body.dark-mode .mobile-bottom-nav-item.active .label {
    color: #60A5FA;
}

body.dark-mode .mobile-bottom-nav-item.active::before {
    background: rgba(96, 165, 250, 0.16);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOVER (desktop responsive / perangkat berpenunjuk)
   ───────────────────────────────────────────────────────────────────────────── */
@media (hover: hover) {
    .mobile-bottom-nav-item:hover { color: #475569; }
    .mobile-bottom-nav-item:hover .icon,
    .mobile-bottom-nav-item:hover .label { opacity: 1; }
    .mobile-bottom-nav-item:hover:not(.active) .icon { transform: translate3d(0, -1px, 0) scale(1.04); }
    .mobile-bottom-nav-item.active:hover { color: #2563EB; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CART BADGE
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-bottom-nav-badge {
    position: absolute;
    top: 8px;
    right: calc(50% - 4px);

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    background: #EF4444;
    color: #FFFFFF;

    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;

    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.9);

    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);

    transform: translate3d(0, 0, 0);
    transition: transform 0.32s var(--tap-spring, cubic-bezier(0.34, 1.4, 0.64, 1));

    z-index: 10;
}

.mobile-bottom-nav-badge:empty { display: none; }

body.dark-mode .mobile-bottom-nav-badge {
    border-color: rgba(15, 23, 42, 0.9);
}

@keyframes badgePop {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    45%  { transform: translate3d(0, 0, 0) scale(1.32); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

.mobile-bottom-nav-badge.animate {
    animation: badgePop 0.36s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION — tetap fungsional, tanpa gerak
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav,
    .mobile-bottom-nav-item,
    .mobile-bottom-nav-item .icon,
    .mobile-bottom-nav-item .label,
    .mobile-bottom-nav-item::before,
    .mobile-bottom-nav-badge {
        transition: none;
    }

    body.nav-dipped .mobile-bottom-nav {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }

    .mobile-bottom-nav-item.active .icon,
    .mobile-bottom-nav-item:active .icon,
    .mobile-bottom-nav-item:hover .icon {
        transform: none;
    }

    .mobile-bottom-nav-badge.animate { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOTTOM SPACING
   Owned by the layout (--mobile-nav-h) so it still applies if this file fails
   to load. It is applied to .site-footer — NOT to body — because body padding
   would render in the light body background and leave a white strip under the
   dark footer. Do not duplicate the rule here.
   ───────────────────────────────────────────────────────────────────────────── */