/* ========================================================================= MIMPI HEADSPA — mobile bottom tab bar Loaded by inc/bottom-nav.php. Shared with mockup.html so the prototype and the live theme always look identical. ========================================================================= */ .mimpi-bnav{ /* !important so no theme/plugin rule can knock it out of fixed positioning. If it still scrolls with the page, an ancestor has a transform/filter — the script in bottom-nav.php re-parents the bar to to escape that. */ position:fixed !important; left:0; right:0; bottom:0; z-index:9990; display:flex; justify-content:space-around; align-items:stretch; background:rgba(251,248,241,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--mimpi-border,#E7DECF); padding:10px 16px calc(22px + env(safe-area-inset-bottom)); } .mimpi-bnav__item{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; color:#a49e8f; font-weight:600; font-size:10.5px; line-height:1; text-decoration:none; background:none; } .mimpi-bnav__item:hover{ color:#a49e8f; } .mimpi-bnav__item.is-active{ color:var(--mimpi-green,#264033); font-weight:800; } /* Keep longer labels (e.g. "Treatments") on one line in a narrow tab. */ .mimpi-bnav__label{ white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; } .mimpi-bnav__icon{ position:relative; display:block; } .mimpi-bnav__icon svg{ width:24px; height:24px; display:block; } .mimpi-bnav__item.is-active .mimpi-bnav__icon svg{ stroke-width:2; } .mimpi-bnav__badge{ position:absolute; top:-6px; right:-9px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:var(--mimpi-gold,#D99A3B); color:#fff; font-size:10px; font-weight:800; line-height:17px; text-align:center; } .mimpi-bnav__badge[hidden]{ display:none; } @media (max-width:360px){ .mimpi-bnav__item{ font-size:9.5px; } .mimpi-bnav{ padding-left:8px; padding-right:8px; } } /* Reserve space so the fixed bar never covers page content. */ @media (max-width:768px){ body.mimpi-site{ padding-bottom:76px; } } /* Desktop uses the sticky header instead — hide the bar. */ @media (min-width:769px){ .mimpi-bnav{ display:none !important; } body.mimpi-site{ padding-bottom:0; } }