/* assets/style/bottomnav.css — fixed bottom navigation */

.bottomNav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid rgba(0,0,0,.08);
    display: flex;
    align-items: stretch;
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 24px rgba(0,0,0,.10), 0 -1px 0 rgba(0,0,0,.06);
}

.bnTab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px 0 2px;
    color: rgba(11,15,25,.35);
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.bnTab.active {
    color: rgba(11,15,25,.90);
}

.bnIcoWrap {
    width: 50px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: background .18s, transform .12s;
}

.bnTab.active .bnIcoWrap {
    background: #F9D515;
}

.bnTab:active .bnIcoWrap {
    transform: scale(0.92);
}

.bnIco {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG icons inside bnIco */
.bnIco svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.bnTab.active .bnIco svg {
    stroke-width: 2.2;
}

.bnLabel {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
}

/* mid tab (entrega) slightly bigger */
.bnTab[data-tab="entrega"] .bnIcoWrap {
    width: 54px;
    height: 32px;
}

/* powered by bar spacing */
body.hasBottomNav #poweredByBar {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* panels inside active tabs */
.tabPanel {
    display: none;
}
.tabPanel.active {
    display: block;
}