/* Simple Product Order — fixed bottom navigation bar (Home / Search / */ /* Cart / WhatsApp / Messenger). Loaded only on pages where the shop or */ /* single-product markup is present (see includes/class-bottom-nav.php). */ .spo-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; /* below the order modal / cart drawer (99999+), above page content */ display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--spo-glass-bg-strong, rgba(255, 255, 255, .92)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--spo-glass-border, rgba(255, 255, 255, .55)); box-shadow: 0 -6px 24px rgba(15, 23, 42, .12); } .spo-bottomnav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 6px 2px 5px; border-radius: 12px; text-decoration: none; color: var(--spo-muted, #55607a); -webkit-tap-highlight-color: transparent; transition: color .15s ease, background-color .15s ease, transform .1s ease; } .spo-bottomnav-item:active { transform: scale(.94); } .spo-bottomnav-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .spo-bottomnav-label { font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .spo-bottomnav-item.is-active, .spo-bottomnav-item:hover { color: var(--spo-primary, #16a34a); } .spo-bottomnav-item.is-active { background: rgba(22, 163, 74, .1); } /* WhatsApp keeps its own brand-adjacent green even when not "active", so it always reads as the support/contact action. */ .spo-bottomnav-whatsapp { color: #21bd5f; } .spo-bottomnav-whatsapp:hover { color: #1aa652; } /* Messenger keeps its own brand-adjacent blue for the same reason. */ .spo-bottomnav-messenger { color: #0084ff; } .spo-bottomnav-messenger:hover { color: #006fd6; } .spo-bottomnav-badge { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--spo-glass-bg-strong, #fff); } /* App-style bottom bar stays visible on every screen size, including desktop — same bar everywhere, not a mobile-only leftover. On wider screens it becomes a full-width, taller toolbar with bigger icons/text instead of a tiny centered pill, so it reads as an intentional desktop nav bar rather than a shrunk mobile widget. */ @media (min-width: 861px) { .spo-bottomnav { gap: 0; padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); justify-content: center; } .spo-bottomnav-item { flex: 0 1 200px; flex-direction: row; gap: 10px; padding: 12px 22px; border-radius: 14px; font-size: 15px; } .spo-bottomnav-icon { width: 26px; height: 26px; } .spo-bottomnav-label { font-size: 14.5px; font-weight: 700; } .spo-bottomnav-badge { top: -2px; right: -2px; } } /* Reserve space so the bar never covers the last bit of page content (cart footer, order button, site footer, etc). Class is added to by bottom-nav.js. Applies at every width now that the bar is always shown. */ body.spo-has-bottom-nav { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 861px) { body.spo-has-bottom-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .spo-bottomnav-item { transition-duration: .001ms; } }