:root { --mbn-surface: #000; --mbn-text: #868686; --mbn-text-strong: #fff; --mbn-ease: cubic-bezier(0.22, 1, 0.36, 1); } .mobile-app-navbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9999; display: none; box-sizing: border-box; width: 100%; min-height: 76px; padding: 8px 6px max(8px, env(safe-area-inset-bottom, 0px)); align-items: center; justify-content: space-between; border: 0; border-radius: 0; background: var(--mbn-surface); box-shadow: 0 -1px 0 rgb(255 255 255 / 9%); isolation: isolate; } .mobile-app-navbar .nav-item { position: relative; display: flex; min-width: 0; min-height: 58px; flex: 1 1 20%; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 12px; color: var(--mbn-text); font-size: 10px; font-weight: 560; line-height: 1; text-align: center; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 80ms var(--mbn-ease); } .mobile-app-navbar .nav-item .label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-app-navbar .nav-item::before { content: ""; position: absolute; top: -8px; left: 50%; width: 18px; height: 2px; border-radius: 0 0 2px 2px; background: transparent; transform: translateX(-50%); } .mobile-app-navbar .nav-item .icon { position: relative; display: flex; width: 23px; height: 23px; align-items: center; justify-content: center; flex: 0 0 23px; } .mobile-app-navbar .nav-item .icon svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; } .mobile-app-navbar .nav-item.active { background: transparent; color: var(--mbn-text-strong); } .mobile-app-navbar .nav-item.active::before { background: var(--mbn-text-strong); } .mobile-app-navbar .nav-item:focus-visible { outline: 2px solid var(--mbn-text-strong); outline-offset: -2px; color: var(--mbn-text-strong); } .mobile-app-navbar .nav-item:active { transition-duration: 120ms; transform: scale(0.96); } .mbn-underlay { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9998; display: none; height: 96px; background: linear-gradient(0deg, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 0%) 100%); pointer-events: none; } .mobile-app-navbar .user-avatar { display: block; width: 23px; height: 23px; margin: 0; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; object-fit: cover; } .mobile-app-navbar .cart-icon-wrapper { position: relative; display: flex; width: 23px; height: 23px; align-items: center; justify-content: center; } .mobile-app-navbar .cart-count-badge-wrapper { position: absolute; top: -6px; right: -10px; pointer-events: none; } .mobile-app-navbar .cart-count-badge { display: grid; min-width: 18px; height: 18px; box-sizing: border-box; place-items: center; padding: 0 5px; border: 2px solid var(--mbn-surface); border-radius: 999px; background: #fff; color: #000; font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 750; line-height: 1; } /* * Состояние аккаунта переключается классом на , а не разметкой. * Это сохраняет единый кеш для гостя и покупателя без мигания подписи. */ html.senyaus-auth .mobile-app-navbar .mbn-icon-guest, html.senyaus-auth .mobile-app-navbar .mbn-label-guest { display: none; } html.senyaus-auth .mobile-app-navbar .mbn-icon-user[hidden] { display: block; } html.senyaus-auth .mobile-app-navbar .mbn-label-user[hidden] { display: inline; } .mobile-app-navbar .mbn-icon-user { fill: none; } .mobile-app-navbar .user-avatar[hidden] { display: none !important; } html.senyaus-auth .mobile-app-navbar .user-avatar:not([hidden]) ~ .mbn-icon-user[hidden] { display: none; } @media (max-width: 767px) { /* * Отступ нужен везде, где навбар виден. Раньше исключался весь * woocommerce-checkout: это скрывало навбар на квизе оформления. * Теперь исключается только страница результата заказа — там навбар * скрыт правилом темы, поэтому и отступ не нужен. */ body:not(.amahasla-order-result) { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } .mobile-app-navbar { display: flex; } .mbn-underlay { display: block; } } @media (max-width: 359px) { .mobile-app-navbar { padding-inline: 4px; } .mobile-app-navbar .nav-item { border-radius: 10px; } } @media (prefers-reduced-motion: reduce) { .mobile-app-navbar .nav-item { transition-duration: 1ms; } .mobile-app-navbar .nav-item:active { transform: none; } }