/* MegaStation — شريط أدوات سفلي للموبايل + منع تراكب التصميم */

:root{
  --ms-bar-h: 60px;                                   /* ارتفاع الشريط */
  --ms-safe : env(safe-area-inset-bottom, 0px);       /* منطقة الأمان (آيفون) */
  --ms-bar-total: calc(var(--ms-bar-h) + var(--ms-safe));
  --ms-accent: #11998e;
  --ms-bar-bg: #ffffff;
  --ms-bar-fg: #6b7785;
  --ms-bar-line: rgba(0,0,0,.08);
}

/* ══ منع التراكب: نحجز مساحة أسفل الصفحة بقدر ارتفاع الشريط ══ */
@media (max-width: 991.98px){
  body.ms-has-bottombar{
    padding-bottom: var(--ms-bar-total) !important;
  }
  /* العناصر الثابتة أسفل الشاشة تُرفع فوق الشريط (سلة/دردشة/أزرار عائمة) */
  body.ms-has-bottombar .fixed-bottom,
  body.ms-has-bottombar .floating-cart,
  body.ms-has-bottombar .whatsapp-btn,
  body.ms-has-bottombar .scroll-top,
  body.ms-has-bottombar .back-to-top,
  body.ms-has-bottombar [class*="sticky-bottom"]{
    bottom: calc(var(--ms-bar-total) + 12px) !important;
  }
  /* التذييل لا يختفي خلف الشريط */
  body.ms-has-bottombar footer{
    margin-bottom: var(--ms-bar-total);
  }
}

/* ══ الشريط ══ */
.ms-bottombar{
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1040;                       /* أسفل المودالات (1050) */
  display: none;                       /* يظهر بالموبايل فقط */
  background: var(--ms-bar-bg);
  border-top: 1px solid var(--ms-bar-line);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  padding-bottom: var(--ms-safe);      /* يحترم منطقة الأمان */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}

@media (max-width: 991.98px){
  .ms-bottombar{ display: block; }
}

.ms-bottombar__inner{
  height: var(--ms-bar-h);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  max-width: 720px;
  margin-inline: auto;
}

.ms-bb-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ms-bar-fg);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  position: relative;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ms-bb-item:hover,
.ms-bb-item:focus{ color: var(--ms-accent); text-decoration: none; }
.ms-bb-item.is-active{ color: var(--ms-accent); }
.ms-bb-item.is-active::before{
  content:'';
  position:absolute; top:0; inset-inline: 22%;
  height:3px; border-radius:0 0 3px 3px;
  background: var(--ms-accent);
}
.ms-bb-item i, .ms-bb-item svg{ font-size: 20px; width: 22px; height: 22px; }

/* شارة العدّاد (السلة) */
.ms-bb-badge{
  position: absolute;
  top: 6px;
  inset-inline-end: 50%;
  transform: translateX(50%) translateX(14px);
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e63946;
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: none;
  align-items: center; justify-content: center;
}
.ms-bb-badge.is-on{ display: inline-flex; }

/* الوضع الداكن */
@media (prefers-color-scheme: dark){
  :root{
    --ms-bar-bg: #10192a;
    --ms-bar-fg: #93a4b8;
    --ms-bar-line: rgba(255,255,255,.10);
  }
}

/* في وضع PWA المثبّت: مساحة إضافية بسيطة */
@media (display-mode: standalone){
  body.ms-has-bottombar{ padding-bottom: calc(var(--ms-bar-total) + 4px) !important; }
}

/* الطباعة: أخفِ الشريط */
@media print{ .ms-bottombar{ display:none !important; } body.ms-has-bottombar{ padding-bottom:0 !important; } }