/* ════════════════════════════════════════
   FLUID NAVBAR — JYWA Payment
   Float (idle): melayang rounded, terpisah dari tepi
   Docked (scroll bawah): "meleleh" nempel penuh ke tepi
   Transisi pakai spring-like cubic-bezier = kesan cair
   ════════════════════════════════════════ */

:root {
    --fluid-ease: cubic-bezier(0.34, 1.3, 0.5, 1);   /* sedikit overshoot = cair */
    --fluid-time: 0.55s;
}

.topbar,
.bottom-nav {
    transition:
        left var(--fluid-time) var(--fluid-ease),
        right var(--fluid-time) var(--fluid-ease),
        top var(--fluid-time) var(--fluid-ease),
        bottom var(--fluid-time) var(--fluid-ease),
        width var(--fluid-time) var(--fluid-ease),
        max-width var(--fluid-time) var(--fluid-ease),
        border-radius var(--fluid-time) var(--fluid-ease),
        border-color var(--fluid-time) var(--fluid-ease),
        background var(--fluid-time) var(--fluid-ease),
        box-shadow var(--fluid-time) var(--fluid-ease),
        padding-left var(--fluid-time) var(--fluid-ease),
        padding-right var(--fluid-time) var(--fluid-ease);
}

/* ═════ DOCKED: menempel penuh ke tepi ═════ */
body.nav-docked .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    border-radius: 22px 22px 0 0;      /* sudut atas tetap membulat, bawah rata */
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -14px 40px -16px rgba(0, 0, 0, 0.7);
}

body.nav-docked .topbar {
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom-color: var(--line-strong);
}

/* garis aurora topbar menghilang saat docked biar bersih */
body.nav-docked .topbar::after { opacity: 0; transition: opacity var(--fluid-time) ease; }

/* ═════ FLOAT: kondisi melayang (default) ═════ */
body.nav-float .bottom-nav {
    /* nilai float sudah dari style.css: left/right 14px, bottom 12px, radius 22px */
    box-shadow: 0 16px 44px -12px rgba(0, 0, 0, 0.65);
}