/* Нижний навбар (вырез + FAB «Продать»). Общий для всех страниц; подключается
   вместе с bottomnav.js. Цвета — через var(--surface/--line/--text/--text-soft/--accent). */
.mnav, .mfabmask { display: none; }
@media (max-width: 900px) {
  /* нижний навбар: вырез + FAB «Продать» */
  .mnav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    transition: transform .3s var(--ease); animation: mnavin .5s var(--ease); }
  .mnav.down { transform: translateY(150%); }
  @keyframes mnavin { from { transform: translateY(130%); } to { transform: translateY(0); } }
  .mnav-bar { position: relative; height: 60px; display: flex; align-items: center;
    background: var(--surface); border-top: 1px solid var(--line);
    -webkit-mask: radial-gradient(circle 32px at 50% -2px, transparent 31px, #000 32px);
    mask: radial-gradient(circle 32px at 50% -2px, transparent 31px, #000 32px); }
  .mslot { flex: 1; display: flex; justify-content: space-around; }
  .mgap { width: 70px; flex: none; }
  .mtab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: 0; background: none; cursor: pointer; text-decoration: none; color: var(--text-soft);
    font-size: .68rem; font-weight: 600; padding: 9px 2px 7px; min-height: 48px; }
  .mtab svg { width: 22px; height: 22px; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .mtab.active { color: var(--accent); }
  .mtab.active svg { transform: translateY(-3px); }
  .mtab .mdot { position: absolute; bottom: 3px; left: 50%; translate: -50% 0; width: 5px; height: 5px;
    border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0); transition: .3s cubic-bezier(.34,1.56,.64,1); }
  .mtab.active .mdot { opacity: 1; transform: scale(1); }
  .mtab .mlive { position: absolute; top: 6px; left: calc(50% + 8px); width: 7px; height: 7px; border-radius: 50%;
    background: #ff2d2d; animation: mlive 1.7s infinite; }
  @keyframes mlive { 0% { box-shadow: 0 0 0 0 rgb(255 45 45 / .55); } 70% { box-shadow: 0 0 0 7px rgb(255 45 45 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 45 45 / 0); } }
  .mtab .fcount { top: 4px; right: auto; left: calc(50% + 6px); translate: 0 0; }
  .mfab { position: absolute; left: 50%; bottom: 30px; translate: -50% 0; z-index: 52;
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    color: #fff; background: linear-gradient(140deg, #ff6a45, var(--accent)); box-shadow: 0 12px 26px -6px rgb(216 50 42 / .7); }
  .mfab::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--accent);
    opacity: .3; z-index: -1; animation: mpulse 2.4s ease-out infinite; }
  @keyframes mpulse { 0% { transform: scale(.9); opacity: .5; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
  .mfab svg { width: 26px; height: 26px; transition: transform .3s var(--ease); }
  .mfab.open svg { transform: rotate(135deg); }
  .mfab.open::before { animation: none; opacity: 0; }
  .mfab-l { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; z-index: 51; color: var(--accent);
    font-size: .6rem; font-weight: 800; pointer-events: none; transition: opacity .2s; }
  .mfab-l.hide { opacity: 0; }
  .mfabmask { display: block; position: fixed; inset: 0; z-index: 49; background: rgb(10 8 6 / .45); opacity: 0; visibility: hidden; transition: .25s; }
  .mfabmask.on { opacity: 1; visibility: visible; }
  .mdial { position: absolute; left: 50%; bottom: 92px; translate: -50% 0; z-index: 51; display: flex; flex-direction: column; gap: 11px; align-items: flex-end; }
  .mdial-item { display: flex; align-items: center; gap: 9px; text-decoration: none; opacity: 0;
    transform: translateY(12px) scale(.7); pointer-events: none; transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s; }
  .mnav.dopen .mdial-item { opacity: 1; transform: none; pointer-events: auto; }
  .mnav.dopen .mdial-item:nth-child(1) { transition-delay: .10s; }
  .mnav.dopen .mdial-item:nth-child(2) { transition-delay: .05s; }
  .mdial-item .lb { background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 700;
    font-size: .8rem; padding: 6px 11px; border-radius: 10px; box-shadow: var(--shadow); }
  .mdial-item .cc { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
    color: var(--accent); display: grid; place-items: center; box-shadow: var(--shadow); }
  .mdial-item .cc svg { width: 21px; height: 21px; }
}