/* ==========================================================
   شريط التطبيق السفلي + قائمة «المزيد» (موبايل فقط)
   على الموبايل: الفوتر يختفي ويصبح قائمة منبثقة من الأسفل
   ========================================================== */
.tabbar,.sheet-head,.more-backdrop{display:none}

@media (max-width:820px){
  :root{--tab-h:62px}
  body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}

  /* ---- الشريط ---- */
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;inset-inline:0;bottom:0;z-index:96;
    height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    border-top:1px solid var(--line,#E1ECEC);box-shadow:0 -10px 30px -18px rgba(5,60,64,.35);view-transition-name:tabbar}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;
    background:none;border:0;padding:6px 2px;font:inherit;font-size:.72rem;font-weight:700;color:var(--muted,#5B7476);cursor:pointer;
    -webkit-tap-highlight-color:transparent;position:relative;transition:color .2s}
  .tabbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar .ic{transition:transform .25s}
  .tabbar a.on,.tabbar button[aria-expanded="true"]{color:var(--tq-700,#0A6E73)}
  .tabbar a.on::before,.tabbar button[aria-expanded="true"]::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--gold,#C9A34E)}
  .tabbar a.on .ic,.tabbar button[aria-expanded="true"] .ic{transform:translateY(-1px) scale(1.08)}
  .tabbar a:active .ic,.tabbar button:active .ic{transform:scale(.9)}

  /* ---- الفوتر يصبح قائمة منبثقة ---- */
  .site-footer{position:fixed;inset-inline:0;bottom:0;z-index:95;max-height:84dvh;overflow-y:auto;overscroll-behavior:contain;
    padding-top:0;border-radius:24px 24px 0 0;transform:translateY(105%);visibility:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;
    padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -10px rgba(0,0,0,.45)}
  body.more-open .site-footer{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .sheet-head{display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:3;padding:14px 16px 10px;
    background:var(--tq-950,#032A2D);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
  .sheet-head b{font-size:1.05rem}
  .sheet-grip{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:4px;background:rgba(255,255,255,.25)}
  .sheet-close{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-40%);width:38px;height:38px;border-radius:12px;border:0;
    background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
  .site-footer .footer-grid{padding-top:22px;gap:26px}
  .site-footer .footer-bottom{padding-bottom:16px}
  .more-backdrop{display:block;position:fixed;inset:0;z-index:94;background:rgba(3,30,33,.5);opacity:0;transition:opacity .3s;pointer-events:none}
  body.more-open .more-backdrop{opacity:1;pointer-events:auto}
  .more-backdrop[hidden]{display:block}
  body.more-open{overflow:hidden}

  /* ---- رفع العناصر العائمة فوق الشريط ---- */
  .wa-float,.to-top{bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom))!important}
  .pwa-sheet{bottom:calc(var(--tab-h) + 10px + env(safe-area-inset-bottom))!important}
  .push-card{bottom:calc(var(--tab-h) + 10px + env(safe-area-inset-bottom))!important}
  .push-toast{bottom:calc(var(--tab-h) + 70px + env(safe-area-inset-bottom))!important}
  body.more-open .wa-float,body.more-open .to-top{opacity:0;pointer-events:none}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.site-footer,.more-backdrop{transition:none!important}}