/* 1R Reactor — frontend-bottom-navigation.css
 * Canonical structure: foundations → layout/components → context UI → states → responsive.
 */

/* === Foundations & Base === */
html.reactor-telegram-browser
#reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass,
body.reactor-telegram-browser
#reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass{background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .025)
        ),
        rgba(
            var(--reactor-bottom-nav-tg-bg-rgb),
            calc(var(--reactor-bottom-nav-tg-opacity) * .75)
        ) ;}
#reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass::before{content: "";position: absolute;inset: 0;z-index: 0;border-radius: inherit;pointer-events: none;background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255,255,255,.10),
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 100%,
            rgba(255,255,255,.045),
            transparent 44%
        );}
html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge,
html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge--favorites,
html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge--cart,
body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge,
body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge--favorites,
body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__badge--cart{background: var(--reactor-primary) ;background-color: var(--reactor-primary) ;color: #fff ;border: 0 ;outline: 0 ;box-shadow: none ;}

/* === Navigation & Site UI === */
#reactor-bottom-navigation{box-sizing: border-box;overflow: hidden;position: fixed;right: 0;bottom: 0;left: 0;z-index: 2147483000;display: block;width: auto;max-width: none;margin: 0;min-height: calc(var(--reactor-bottom-nav-height) + env(safe-area-inset-bottom, 0px));padding: var(--reactor-bottom-nav-padding) 0 calc(var(--reactor-bottom-nav-padding) + env(safe-area-inset-bottom, 0px));background: rgba(var(--reactor-bottom-nav-bg-rgb), var(--reactor-bottom-nav-opacity));border-top: 1px solid rgba(0, 0, 0, .08);box-shadow: 0 -8px 28px rgba(0, 0, 0, .10);transform: translate3d(0, 0, 0);transition: transform .24s ease, opacity .24s ease, visibility .24s ease;}
#reactor-bottom-navigation.is-hidden{transform: translate3d(0, 110%, 0);opacity: 0;visibility: hidden;pointer-events: none;}
.reactor-bottom-navigation__inner{box-sizing: border-box;gap: 0;overflow: visible;padding: 0;display: flex;align-items: stretch;justify-content: center;width: 100%;max-width: 720px;min-height: var(--reactor-bottom-nav-height);margin: 0 auto;}
.reactor-bottom-navigation__item{box-sizing: border-box;max-width: none;overflow: visible;position: relative;display: flex;flex: 1 1 20%;min-width: 0;min-height: var(--reactor-bottom-nav-height);padding: 7px 4px 6px;flex-direction: column;align-items: center;justify-content: center;gap: 3px;color: var(--reactor-bottom-nav-text) ;text-decoration: none ;-webkit-tap-highlight-color: transparent;transition: color .18s ease, background-color .18s ease, transform .18s ease;}
.reactor-bottom-navigation__item:hover,
.reactor-bottom-navigation__item:focus-visible,
.reactor-bottom-navigation__item.is-current{color: var(--reactor-primary, var(--r1-theme-primary,#0A95AE)) ;background: rgba(0, 0, 0, .025);}
.reactor-bottom-navigation__item:active{transform: scale(.96);}
.reactor-bottom-navigation__icon{flex: 0 0 auto;max-width: 100%;display: inline-flex;width: 25px;height: 25px;align-items: center;justify-content: center;line-height: 1;}
.reactor-bottom-navigation__svg{display: block;width: 24px;height: 24px;background-color: currentColor;-webkit-mask-image: var(--reactor-bottom-nav-icon);mask-image: var(--reactor-bottom-nav-icon);-webkit-mask-position: center;mask-position: center;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-size: contain;mask-size: contain;pointer-events: none;}
.reactor-bottom-navigation__label{box-sizing: border-box;width: 100%;min-width: 0;padding: 0;display: block;max-width: 100%;overflow: hidden;font-size: 10px;font-weight: 500;line-height: 1.1;text-align: center;text-overflow: ellipsis;white-space: nowrap;}
.reactor-bottom-navigation__badge{position: absolute;top: 5px;left: calc(50% + 5px);display: inline-flex;min-width: 17px;height: 17px;padding: 0 4px;align-items: center;justify-content: center;border: 2px solid rgba(var(--reactor-bottom-nav-bg-rgb), 1);border-radius: 999px;background: var(--reactor-primary, var(--r1-theme-primary,#0A95AE));color: #fff;font-size: 9px;font-weight: 700;line-height: 1;box-sizing: border-box;}
.reactor-bottom-navigation--icons-only .reactor-bottom-navigation__item{box-sizing: border-box;max-width: none;overflow: visible;padding-top: 8px;padding-bottom: 8px;}
.reactor-bottom-navigation--icons-only .reactor-bottom-navigation__icon,
.reactor-bottom-navigation--icons-only .reactor-bottom-navigation__svg{width: 28px;height: 28px;}
#reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass{background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .025)
        ),
        rgba(
            var(--reactor-bottom-nav-bg-rgb),
            calc(var(--reactor-bottom-nav-opacity) * .75)
        ) ;-webkit-backdrop-filter:
        blur(2px)
        saturate(125%) ;backdrop-filter:
        blur(2px)
        saturate(125%) ;border:
        1px solid
        rgba(255, 255, 255, .14) ;box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(255, 255, 255, .025),
        0 10px 30px rgba(0, 0, 0, .16) ;}
#reactor-bottom-navigation.reactor-bottom-navigation--liquid-glass
.reactor-bottom-navigation__inner{position: relative ;z-index: 1 ;}
#reactor-bottom-navigation.reactor-bottom-navigation--icons-only
.reactor-bottom-navigation__label{display: none ;visibility: hidden ;opacity: 0 ;height: 0 ;min-height: 0 ;max-height: 0 ;margin: 0 ;padding: 0 ;line-height: 0 ;overflow: hidden ;pointer-events: none ;}
#reactor-bottom-navigation .reactor-bottom-navigation__item,
#reactor-bottom-navigation .reactor-bottom-navigation__item:hover,
#reactor-bottom-navigation .reactor-bottom-navigation__item:focus,
#reactor-bottom-navigation .reactor-bottom-navigation__item:active,
#reactor-bottom-navigation .reactor-bottom-navigation__item.is-current,
#reactor-bottom-navigation .reactor-bottom-navigation__item[aria-current="page"]{background: transparent ;background-color: transparent ;box-shadow: none ;}
#reactor-bottom-navigation .reactor-bottom-navigation__badge,
#reactor-bottom-navigation .reactor-bottom-navigation__badge--favorites,
#reactor-bottom-navigation .reactor-bottom-navigation__badge--cart{background: var(--reactor-primary) ;background-color: var(--reactor-primary) ;color: #fff ;border: 0 ;outline: 0 ;box-shadow: none ;}

/* === Responsive & Conditional === */
@media (prefers-reduced-motion: reduce){#reactor-bottom-navigation,
    .reactor-bottom-navigation__item{transition: none ;}}
@media (max-width: 767px){html.reactor-telegram-browser #reactor-bottom-navigation,
    body.reactor-telegram-browser #reactor-bottom-navigation{bottom: var(--reactor-bottom-nav-tg-bottom-offset) ;min-height: calc(
            var(--reactor-bottom-nav-tg-height)
            + (var(--reactor-bottom-nav-tg-padding) * 2)
        ) ;padding:
            var(--reactor-bottom-nav-tg-padding)
            0
            var(--reactor-bottom-nav-tg-padding) ;background:
            rgba(
                var(--reactor-bottom-nav-tg-bg-rgb),
                var(--reactor-bottom-nav-tg-opacity)
            ) ;color: var(--reactor-bottom-nav-tg-text) ;border-radius: var(--reactor-bottom-nav-tg-radius) ;}html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__inner,
    body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__inner{height: var(--reactor-bottom-nav-tg-height) ;min-height: var(--reactor-bottom-nav-tg-height) ;max-height: var(--reactor-bottom-nav-tg-height) ;}html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item,
    html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__label,
    body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item,
    body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__label{color: var(--reactor-bottom-nav-tg-text) ;}html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item.is-current,
    html.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item:hover,
    body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item.is-current,
    body.reactor-telegram-browser #reactor-bottom-navigation .reactor-bottom-navigation__item:hover{color: var(--reactor-primary, var(--r1-theme-primary,#0A95AE)) ;}}
@media (max-width: 767px){html.reactor-telegram-browser #reactor-bottom-navigation,
    body.reactor-telegram-browser #reactor-bottom-navigation{left: 50% ;right: auto ;width: var(--reactor-bottom-nav-tg-panel-width) ;max-width: var(--reactor-bottom-nav-tg-panel-width) ;transform: translate3d(-50%, var(--reactor-ios-tg-shift-y, 0px), 0) ;transition:
            transform .42s cubic-bezier(.16, 1, .3, 1),
            opacity .20s ease,
            background-color .20s ease ;will-change: transform, bottom;-webkit-backface-visibility: hidden;backface-visibility: hidden;}}