/* =====================================================================
   mobile-menu.css  —  iOS-grade bottom navigation for the loyalty web app.
   Three live-switchable, Tabs-family skins:

     dock     — floating detached rounded bar  + draggable rounded sheet
     glass    — flush frosted glass rail        + grouped action-sheet
     material — flush bar, active = filled pill  + light grid-ish tray

   Scope: MOBILE ONLY (< 992px). Desktop keeps the permanent right sidebar
   untouched — every selector here is killed at >= 992px.

   The menu ITEMS are the existing dark nav-link tiles, relocated by JS into
   #mmSheetBody, so this file styles only the chrome + motion.
   Brand: primary #0061ff, focus ring #258cfb.
   ===================================================================== */

:root {
    --mm-primary: #0061ff;
    --mm-primary-press: #0049c2;
    --mm-primary-soft: rgba(0, 97, 255, 0.16);
    --mm-surface: #111111;
    --mm-surface-2: #1b1b1b;
    --mm-surface-3: #f4f5f7;       /* light tray surface (material) */
    --mm-hairline: rgba(255, 255, 255, 0.08);
    --mm-ink-dim: rgba(255, 255, 255, 0.62);
    --mm-bar-h: 60px;
    --mm-safe-b: env(safe-area-inset-bottom, 0px);
    /* iOS-like springs */
    --mm-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --mm-spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --mm-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hide ALL custom chrome on desktop — sidebar stays as before. */
@media (min-width: 992px) {
    #mmRoot { display: none !important; }
}

/* The whole module lives in a fixed overlay layer above page content. */
#mmRoot {
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* above language flag (2000) & logout box (2100) */
    pointer-events: none; /* only interactive children catch events */
    -webkit-tap-highlight-color: transparent;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    transition: opacity 0.2s ease, transform 0.25s ease;
}

#mmRoot button,
#mmRoot a { -webkit-tap-highlight-color: transparent; }

/* The dock's z-index (2.1e9) sits above every app overlay, so it was covering the
   bottom of modals / sheets / popups (e.g. a modal's primary button). Hide it
   whenever an overlay is open: Bootstrap flips body.modal-open for ALL its modals;
   custom sheets / fullscreen popups / the QR scanner flip body.mm-overlay-open
   (toggled by the overlay-guard watcher in mobile-menu.js). Fade it down and let
   every tap pass straight through to the overlay underneath. */
body.modal-open #mmRoot,
body.mm-overlay-open #mmRoot {
    opacity: 0;
    transform: translateY(28px);
}
body.modal-open #mmRoot *,
body.mm-overlay-open #mmRoot * {
    pointer-events: none !important;
}

/* Cause-independent guarantee for the FULLSCREEN intro tutorials (the prepaid
   "Pakiety przedpłacone" intro and friends use .tutorial-overlay, z-index 99999,
   fading in from opacity:0 over 0.4s). The JS overlay-guard could sample that
   fade-in at opacity 0 and miss flipping body.mm-overlay-open, leaving the dock
   (z 2.1e9) bright OVER the tutorial. This :has() rule hides the dock the instant
   any .tutorial-overlay is .active — no JS timing involved — so the dock can NEVER
   cover the tutorial. (The onboarding SPOTLIGHT uses #spotlightOverlay /
   .onboarding-fullscreen-overlay + body.onboarding-menu-active — different
   selectors — so this never touches the steps that legitimately drive the dock.) */
body:has(.tutorial-overlay.active) #mmRoot {
    opacity: 0 !important;
    transform: translateY(28px) !important;
}
body:has(.tutorial-overlay.active) #mmRoot * {
    pointer-events: none !important;
}

/* The onboarding spotlight overlay (#spotlightOverlay.active) flips
   body.mm-overlay-open via the overlay-guard, which normally fades the dock away.
   But some onboarding steps DRIVE the dock itself (spotlight the burger / open the
   drawer to point at a relocated menu item). While onboarding owns the menu it sets
   body.onboarding-menu-active, which keeps the dock visible and tappable so those
   steps can run. */
body.onboarding-menu-active.mm-overlay-open #mmRoot {
    opacity: 1;
    transform: none;
}
body.onboarding-menu-active.mm-overlay-open #mmRoot * {
    pointer-events: auto !important;
}
/* The dock layer (#mmRoot, z 2.1e9) sits far above the onboarding layer (overlay
   99990 / spotlight 99991 / tooltip 99999), so once the drawer is open it paints
   OVER the spotlight ring AND the tooltip — the highlighted item shows no glow, the
   step text is hidden, and the Skip/Back/Next controls become un-tappable (clicks
   land on the drawer behind them). While onboarding drives the menu, lift the
   spotlight ring + tooltip above the dock so the ring frames the relocated item, its
   dark scrim isolates it, and the tooltip stays readable and clickable. */
body.onboarding-menu-active #spotlightOverlay,
body.onboarding-menu-active #spotlightElement {
    z-index: 2147483001 !important;
}
body.onboarding-menu-active #spotlightTooltip {
    z-index: 2147483002 !important;
}

/* When the sheet is open the body must not scroll behind it. */
body.mm-locked { overflow: hidden !important; }

/* Reserve the scrollbar gutter so the fixed bottom bar lines up with the page
   content on EVERY route (scrollbar or not). On phones the scrollbar is an
   overlay (0px) so nothing is reserved and the bar stays edge-to-edge. */
@media (max-width: 991.98px) {
    html { scrollbar-gutter: stable; }
}

/* Reserve space at the bottom so content/QR isn't covered by the persistent
   bar. JS toggles .mm-pad-bottom on mobile for all three skins. */
body.mm-pad-bottom { padding-bottom: calc(var(--mm-bar-h) + var(--mm-safe-b) + 18px); }
@media (min-width: 992px) { body.mm-pad-bottom { padding-bottom: 0; } }

/* Replace the old top-right hamburger on mobile — the bottom bar owns it now. */
@media (max-width: 991.98px) {
    .navbar-toggler { display: none !important; }
    #arrowContainer { display: none !important; }
}

/* =====================================================================
   SCRIM (shared)
   ===================================================================== */
.mm-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.46);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s var(--mm-spring), visibility 0s linear 0.32s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    will-change: opacity;
}
#mmRoot.is-open .mm-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.32s var(--mm-spring);
}

/* =====================================================================
   SHARED DRAWER  (the "More" overflow — restyled per skin below)
   ===================================================================== */
.mm-sheet {
    /* fixed like the bar — pinned to the visual viewport so it tracks the dynamic
       URL bar and its CLOSED parked position never drifts into view. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 88dvh;       /* dynamic-viewport so it never exceeds the visible area */
    background: var(--mm-surface);
    border-radius: 24px 24px 0 0;
    /* NO shadow at rest — when closed the drawer is parked off-screen, but its
       upward-projecting shadow would otherwise bleed back into the bottom of the
       viewport (a faint band under the floating dock bar). Shadow is added only
       while open, per skin, and transitioned. */
    box-shadow: none;
    pointer-events: auto;
    /* --mm-sheet-lift = how far the drawer is parked above the viewport bottom
       (so it sits over the persistent bar). The closed transform must clear BOTH
       the drawer's own height (100%) AND that lift, or the top of the drawer
       peeks out at the bottom edge (visible on the floating dock bar). */
    bottom: var(--mm-sheet-lift, 0px);
    transform: translate3d(0, calc(100% + var(--mm-sheet-lift, 0px)), 0);
    /* hidden while parked off-screen so it can NEVER paint a sliver at the bottom
       edge (belt-and-suspenders for the peek), revealed only while open. */
    visibility: hidden;
    transition: transform 0.44s var(--mm-spring), box-shadow 0.3s ease, visibility 0s linear 0.44s;
    will-change: transform;
    overscroll-behavior: contain;
    padding-bottom: var(--mm-safe-b);
}
#mmRoot.is-open .mm-sheet {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.5);
    visibility: visible;
    transition: transform 0.44s var(--mm-spring), box-shadow 0.3s ease;
}
#mmRoot.is-dragging .mm-sheet { transition: none; } /* JS drives transform */

.mm-sheet__handle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    cursor: grab;
    touch-action: none; /* we own the gesture here */
}
.mm-sheet__handle::before {
    content: "";
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.26);
    transition: background 0.2s ease, width 0.2s ease;
}
#mmRoot.is-dragging .mm-sheet__handle::before { background: rgba(255, 255, 255, 0.5); width: 52px; }

.mm-sheet__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px 4px;
    touch-action: none; /* dragging from the title bar also moves the sheet */
}
.mm-sheet__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
.mm-sheet__close {
    /* margin-left:auto pushes ✕ to the right; reset top/bottom because a global
       <button> rule (from a CDN sheet) injects a stray margin-top:20px which, under
       the header's align-items:center, shoved the ✕ ~10px below the "MENU" title
       (misaligned on the owner view; the customer page happened to reset it). */
    margin: 0 0 0 auto !important;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 13px;
    transition: background 0.18s ease, transform 0.18s var(--mm-pop);
}
.mm-sheet__close:active { transform: scale(0.88); background: rgba(255, 255, 255, 0.18); }

.mm-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 14px 12px;
}

/* The relocated nav list must not stretch with its flex spacers here. */
#mmSheetBody .navbar-nav { min-height: 0 !important; height: auto !important; }
#mmSheetBody .nav-item-bottom-spacer,
#mmSheetBody .nav-item-logout-spacer { display: none !important; }
#mmSheetBody .nav-item-language-desktop { display: block !important; } /* surface language on mobile */
/* Compact the relocated list so more items fit without scrolling (drawer only —
   desktop sidebar keeps its own spacing). Inline padding-left on special items
   (e.g. Zaproponuj icon) still wins, so icons stay put. */
#mmSheetBody .nav-link { padding: 9px 14px; margin-bottom: 5px; }
/* trim the referral banner's footprint a touch in the drawer */
#mmSheetBody .referral-nav-banner { padding-top: 9px !important; padding-bottom: 9px !important; }
/* The floating "NOWOŚĆ" badge (position:absolute; top:-25px) sits in the gap above
   "Dodaj do Ekranu" — at -25px it floated detached and, with a big top reserve, left
   too much space under the customer-account "Mój profil". Lower it to -14px so it
   overlaps the button just a touch, and keep a modest reserve so "Mój profil" sits a
   bit higher. Both scoped to when the badge is actually present. */
#mmSheetBody .nav-item-add-home:has(.verified-badge) { margin-top: 24px; }
#mmSheetBody .nav-item-add-home .verified-badge { top: -14px; }

/* Logout shares its row with the language switcher (right of logout) and the demo
   flask / birthday dot (further right, when shown). Logout grows to fill, so the
   gap between Logout and the language globe is ALWAYS the flex gap — constant
   whether or not the demo controls exist. */
.mm-logout-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-logout-row > .nav-link { flex: 1 1 auto; margin-bottom: 0 !important; }
/* collapse the language wrapper's full-width centering so it's just the globe,
   and centre the globe in the wrapper */
.mm-logout-row .mm-lang-inline { flex: 0 0 auto; width: auto !important; padding: 0 !important; align-items: center; }
.mm-logout-row .mm-demo-controls { flex: 0 0 auto; align-items: center; }
/* the globe + birthday dot carried a stray top margin from the old stacked layout
   which pushed them ~10px below the row centre — strip it so everything lines up. */
.mm-logout-row .lang-globe-btn,
.mm-logout-row .birthday-demo-dot { margin: 0 !important; align-self: center !important; }
/* the language dropdown opens up + right-aligned so it never runs off the edge */
.mm-logout-row .mm-lang-inline .lang-dropdown-panel { left: auto; right: 0; transform: translateY(10px) scale(0.95); }
.mm-logout-row .mm-lang-inline .lang-dropdown-panel.show { transform: translateY(0) scale(1); }
#mmSheetBody .navbar-nav .nav-item:first-child .nav-link,
#mmSheetBody .referral-nav-banner { margin-top: 0 !important; }
/* "Panel główny" is already the Pulpit tab in the bottom bar — hide the duplicate
   inside the mobile drawer only (it stays in the desktop sidebar). */
#mmSheetBody .nav-item-dashboard { display: none !important; }

/* anonymous language row inside the sheet */
.mm-langrow {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 6px;
    padding: 12px 15px;
    border: none;
    border-radius: 16px;
    background: var(--mm-surface-2);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}
.mm-langrow .flag-icon { width: 22px !important; height: 22px !important; border-radius: 50%; }
.mm-langrow i { margin-left: auto; opacity: 0.5; font-size: 13px; }
.mm-langrow:active { background: #262626; }

/* The Cancel button is only used by the action-sheet (glass) drawer. */
.mm-cancel {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: var(--mm-surface);
    color: var(--mm-primary);
    font-size: 17px;
    font-weight: 800;
    transition: transform 0.18s var(--mm-pop), background 0.18s ease;
}
.mm-cancel:active { transform: scale(0.97); background: var(--mm-surface-2); }

/* =====================================================================
   BOTTOM BAR — shared base for all three skins.
   ===================================================================== */
.mm-bar {
    /* fixed (NOT absolute-in-#mmRoot): a directly-fixed bottom element is pinned by
       the browser to the VISUAL viewport, so it tracks the dynamic URL bar smoothly
       instead of being anchored to the taller layout viewport (which caused the
       "drags then jumps" on scroll). */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--mm-bar-h) + var(--mm-safe-b));
    padding-bottom: var(--mm-safe-b);
    pointer-events: auto;
    transition: transform 0.4s var(--mm-spring), opacity 0.3s ease;
}
body[data-menu-skin^="dock"] .mm-bar { display: flex; }

/* The bar STAYS fully usable while the drawer is open (the drawer sits above it),
   so you can still jump to Pulpit / Skanuj / Szukaj with the menu expanded. Only
   the Menu tab itself morphs to ✕ and toggles the drawer closed. */

.mm-tab {
    flex: 1 1 0;
    /* normalise the <button> "More" tab so it sizes exactly like the <a> tabs —
       buttons ignore align-items:stretch in flex, so force full height + reset UA
       padding/appearance/font. */
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    color: var(--mm-ink-dim);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease, transform 0.12s var(--mm-pop);
}
.mm-tab__icon {
    font-size: 20px;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.24s var(--mm-pop), color 0.2s ease;
}
.mm-tab__label {
    letter-spacing: -0.01em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-tab__label--open { display: none; }
#mmRoot.is-open .mm-tab--more .mm-tab__label--closed { display: none; }
#mmRoot.is-open .mm-tab--more .mm-tab__label--open { display: inline; }
.mm-tab:active { transform: scale(0.9); }
/* held-down state for the two-stage press (JS adds .mm-pressed on contact, removes
   on release — the icon then spring-pops). Slightly deeper than :active so the
   press reads clearly; springs back via the base .mm-tab transform transition. */
.mm-tab.mm-pressed { transform: scale(0.88); }
.mm-tab.is-active { color: #fff; }

/* old corner dot is retired — the Menu tab itself now signals notifications */
.mm-tab__dot { display: none !important; }

/* ---- notification alert: the "Menu" tab breathes in the active status colour
   (warn / danger / info) even while the drawer is closed. Replaces the old
   corner dot; the icon tints to the status colour and a soft halo pulses behind
   it — tuned to sit with the frost dock. JS sets data-mm-alert on #mmTabMore. */
.mm-tab--more[data-mm-alert="warn"]   { --mm-alert: #ffb020; --mm-alert-glow: rgba(255, 176, 32, 0.50); --mm-alert-size: 46px; }
.mm-tab--more[data-mm-alert="danger"] { --mm-alert: #ff453a; --mm-alert-glow: rgba(255, 69, 58, 0.58); --mm-alert-size: 62px; }
.mm-tab--more[data-mm-alert="info"]   { --mm-alert: #38c6ec; --mm-alert-glow: rgba(56, 198, 236, 0.50); --mm-alert-size: 46px; }

/* tint BOTH the burger icon AND the "Menu" label to the status colour */
.mm-tab--more[data-mm-alert] { color: var(--mm-alert); }

/* Keep the colour, but stop the icon + label blending into the same-colour glow:
   a tight DARK separation halo. It's invisible on the dark glass, yet exactly where
   the coloured glow sits it carves a dark moat right around the glyph/text, so the
   red/amber icon + label pop off the red/amber bloom. Colour-agnostic (all states). */
.mm-tab--more[data-mm-alert] .mm-tab__icon {
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.45));
}
.mm-tab--more[data-mm-alert] .mm-tab__label {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* soft halo behind the WHOLE tab content (icon + label) — centred on the tab so
   it never looks lopsided; the urgent danger state glows noticeably bigger. */
.mm-tab--more[data-mm-alert]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--mm-alert-size);
    height: var(--mm-alert-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* RING, not a solid disc: the centre (where the icon + label sit) stays clear,
       the colour blooms in a halo AROUND them. Stops the glow's brightest point
       from sitting directly under the same-colour icon/text (the "blend"). */
    background: radial-gradient(closest-side, transparent 0%, transparent 32%, var(--mm-alert-glow) 60%, transparent 88%);
    z-index: -1;               /* behind icon + label, above the bar glass */
    pointer-events: none;
    animation: mm-alert-pulse 1.8s ease-in-out infinite;
}
@keyframes mm-alert-pulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.82); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.16); }
}
/* drawer open: the icon is the white ✕ + label "Zamknij" — drop tint + halo */
#mmRoot.is-open .mm-tab--more[data-mm-alert] { color: #fff; }
#mmRoot.is-open .mm-tab--more[data-mm-alert]::before { animation: none; opacity: 0; }

/* ===================================================================
   FORCED TAB COLOURS — tabs are <a>, so global/scoped anchor rules
   (a / :visited / :hover / :focus / :active, Bootstrap, or a post-login/
   post-click state) could repaint their icon + label blue. Lock EVERY
   state with !important so nothing overrides the intended colours.
   Layered by specificity: default < active < alert < drawer-open.
   (The icon/label inherit the tab's colour via currentColor.)
   =================================================================== */
.mm-tab,
.mm-tab:link, .mm-tab:visited, .mm-tab:hover, .mm-tab:focus, .mm-tab:active {
    color: var(--mm-ink-dim) !important;
}
.mm-tab.is-active,
.mm-tab.is-active:link, .mm-tab.is-active:visited,
.mm-tab.is-active:hover, .mm-tab.is-active:focus, .mm-tab.is-active:active {
    color: #fff !important;
}
.mm-tab.is-active .mm-tab__icon { color: #6aa6ff !important; }
/* alert tint wins over the dim/hover default (extra class for specificity) */
.mm-tab.mm-tab--more[data-mm-alert] { color: var(--mm-alert) !important; }
/* drawer open: the Menu tab is the white ✕ regardless of alert */
#mmRoot.is-open .mm-tab--more,
#mmRoot.is-open .mm-tab--more[data-mm-alert],
#mmRoot.is-open .mm-tab--more[data-mm-alert] .mm-tab__icon { color: #fff !important; }

/* ---- the colour also bleeds across the frosted GLASS and lights the right edge
   of the bar (the Menu tab sits at the right end) — a layered designer glow, not
   just a dot. JS mirrors data-mm-alert onto .mm-bar too. ------------------- */
.mm-bar[data-mm-alert="warn"]   { --mm-glass-glow: rgba(255, 176, 32, 0.22); --mm-edge: rgba(255, 200, 96, 0.72); }
.mm-bar[data-mm-alert="danger"] { --mm-glass-glow: rgba(255, 69, 58, 0.30);  --mm-edge: rgba(255, 120, 110, 0.82); }
.mm-bar[data-mm-alert="info"]   { --mm-glass-glow: rgba(56, 198, 236, 0.22); --mm-edge: rgba(120, 220, 245, 0.72); }

/* coloured wash bleeding in from the right, across the glass (clipped to the pill,
   sits over the glass and under the tabs) */
.mm-bar[data-mm-alert]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(120% 150% at 100% 50%, var(--mm-glass-glow) 0%, transparent 58%);
    animation: mm-glass-pulse 1.9s ease-in-out infinite;
}
.mm-bar[data-mm-alert="danger"]::before {
    /* danger reaches further across the glass */
    background: radial-gradient(150% 185% at 100% 50%, var(--mm-glass-glow) 0%, transparent 64%);
}
@keyframes mm-glass-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
/* lit right edge (an inner glow that follows the rounded rim) + a soft colour aura
   around the whole pill. id-prefixed to win over the frost box-shadow. */
#mmRoot .mm-bar[data-mm-alert] {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset -13px 0 26px -10px var(--mm-edge),
        0 0 22px -3px var(--mm-glass-glow);
}
/* drawer open: calm the glass (the sheet is the focus) */
#mmRoot.is-open .mm-bar[data-mm-alert]::before { animation: none; opacity: 0.35; }

/* ---- hamburger -> X morph on the More tab icon ---------------------- */
.mm-burger { position: relative; }
.mm-burger > i,
.mm-burger::before,
.mm-burger::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.32s var(--mm-spring), opacity 0.16s ease, top 0.32s var(--mm-spring);
}
.mm-burger > i { top: 9px; font-size: 0; }      /* middle bar (kill FA glyph) */
.mm-burger::before { top: 4px; }
.mm-burger::after { top: 14px; }
#mmRoot.is-open .mm-tab--more .mm-burger > i { opacity: 0; transform: scaleX(0.4); }
#mmRoot.is-open .mm-tab--more .mm-burger::before { top: 9px; transform: rotate(45deg); }
#mmRoot.is-open .mm-tab--more .mm-burger::after { top: 9px; transform: rotate(-45deg); }
#mmRoot.is-open .mm-tab--more { color: #fff; }

/* first-visit nudge on the More tab */
@keyframes mm-more-attn {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
/* first-visit nudge: BOUNCE only — never recolour the icon. The old
   `color: var(--mm-primary)` turned the Menu icon brand-blue right after login
   (until the drawer was opened) and even overrode the notification alert colour.
   The icon now keeps its real colour (dim / alert) while it bounces. */
.mm-tab--more.mm-attn .mm-tab__icon { animation: mm-more-attn 1.3s var(--mm-spring-soft) 3; }

/* =====================================================================
   DOCK — floating, detached, rounded bar. Single official glass skin
   ("dock-frost", a clean frosted glass). The shared layout below + the
   FROST material block are the only menu skin now (variant switcher removed).
   ===================================================================== */

/* dock layout */
body[data-menu-skin^="dock"] .mm-bar {
    left: 14px;
    right: 14px;
    bottom: calc(10px + var(--mm-safe-b));
    height: var(--mm-bar-h);
    padding: 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 26px;
    overflow: hidden; /* clip the specular sheen overlay to the rounded bar */
    /* default material — each variant overrides the look below */
    background: rgba(20, 20, 22, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.3);
}
body[data-menu-skin^="dock"] .mm-tab { z-index: 1; }

/* optional specular sheen across the top of the glass (used by liquid/crystal) */
body[data-menu-skin^="dock"] .mm-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 24%, rgba(255, 255, 255, 0) 48%);
}

/* the "extra glass layer" the active tab grows behind itself.
   inset 5px top/bottom keeps even breathing room around the icon + label
   (the pill is ~49px tall over ~38px of content → ~5px on every side). */
body[data-menu-skin^="dock"] .mm-tab.is-active::before {
    content: "";
    position: absolute;
    inset: 5px 6px;
    border-radius: 16px;
    z-index: -1;
    animation: mm-bubble 0.34s var(--mm-pop);
    transition: background 0.25s ease;
    background: var(--mm-primary-soft); /* overridden per variant */
}
body[data-menu-skin^="dock"] .mm-tab.is-active { color: #fff; }
body[data-menu-skin^="dock"] .mm-tab.is-active .mm-tab__icon { color: #6aa6ff; }

/* dock drawer = rounded draggable sheet, parked just above the floating bar */
body[data-menu-skin^="dock"] .mm-sheet { --mm-sheet-lift: calc(var(--mm-bar-h) + 18px + var(--mm-safe-b)); padding-bottom: 0; border-radius: 24px; left: 8px; right: 8px; }
body[data-menu-skin^="dock"] .mm-cancel { display: none; }

/* ---- 1) FROST — clean frosted glass --------------------------------- */
body[data-menu-skin="dock-frost"] .mm-bar {
    background: rgba(22, 22, 26, 0.72);
    -webkit-backdrop-filter: saturate(185%) blur(22px);
    backdrop-filter: saturate(185%) blur(22px);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body[data-menu-skin="dock-frost"] .mm-tab.is-active::before {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* =====================================================================
   QR BUMP — played when the anonymous "Kod QR" tab scrolls to the code.
   ===================================================================== */
@keyframes mm-bump {
    0%   { transform: scale(1); }
    28%  { transform: scale(1.13); }
    52%  { transform: scale(0.96); }
    74%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.mm-bump { animation: mm-bump 0.72s var(--mm-spring-soft); transform-origin: center; will-change: transform; }

/* =====================================================================
   FLUID MICRO-INTERACTIONS — springy, dopamine-y tab feedback (Apple-ish).
   ===================================================================== */
/* icon springs up with a little overshoot when a tab is tapped */
@keyframes mm-iconpop {
    0%   { transform: scale(1); }
    34%  { transform: scale(1.32); }
    62%  { transform: scale(0.9); }
    82%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.mm-tab__icon.mm-pop { animation: mm-iconpop 0.46s var(--mm-pop); }

/* soft radial glow that blooms from the tapped icon (a glow, not a Material ink) */
.mm-ripple {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 68%);
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0.9;
    pointer-events: none;
    z-index: -1;
    animation: mm-ripple 0.55s ease-out forwards;
}
@keyframes mm-ripple { to { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } }
/* on the brand-blue active pill the white glow would wash out — tint it softer */
.mm-tab.is-active .mm-ripple { background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%); }

/* the active pill breathes in with a juicier spring when the page settles */
@keyframes mm-bubble {
    0%   { transform: scale(0.6); opacity: 0; }
    55%  { transform: scale(1.08); opacity: 1; }
    78%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

/* =====================================================================
   ACCESSIBILITY / MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mm-sheet,
    .mm-scrim,
    .mm-bar,
    .mm-tab,
    .mm-burger > i,
    .mm-burger::before,
    .mm-burger::after { transition-duration: 0.001ms !important; }
    .mm-tab--more.mm-attn .mm-tab__icon { animation: none !important; }
    /* keep the alert colour/tint, just stop the glow pulsing */
    .mm-tab--more[data-mm-alert]::before { animation: none !important; opacity: 0.7 !important; }
    .mm-bar[data-mm-alert]::before { animation: none !important; opacity: 0.8 !important; }
    .mm-bump { animation: none !important; }
    .mm-tab__icon.mm-pop { animation: none !important; }
    .mm-ripple { display: none !important; }
}

#mmRoot :focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mm-primary);
}