/* ---------- Vars & base paddings ---------- */
:root{
  --mh-h: 56px;            /* ارتفاع الهيدر (كيتمّ تحديثو من JS حسب الحجم الفعلي) */
  --mh-pad: var(--mh-h);   /* المسافة العلوية للمحتوى باش مايتغطّاش بالهيدر الثابت */
  --mh-bg: #007c37;        /* لون خلفية الهيدر - بدّل حسب الثيم */
  --mh-fg: #fff;           /* لون النص/الأيقونات فالهيدر */
  --mh-shadow: 0 2px 8px rgba(0,0,0,.08);
}

html.mobile-has-header body{
  padding-top: var(--mh-pad);
  transition: padding-top .25s ease;
}

/* ---------- Mobile header bar ---------- */
.mobile-header.fixed-top{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--mh-h);
  background: var(--mh-bg);
  color: var(--mh-fg);
  z-index: 1040;                 /* تحت offcanvas (1045) وفوق المحتوى */
  box-shadow: var(--mh-shadow);
  transform: translateY(0);
  transition: transform .25s ease, top .25s ease, opacity .2s ease, box-shadow .2s ease;
  will-change: transform, top, opacity;
}

/* يُزاد من السكريپت عند السكروول: الهيدر يطلع ويتخبّى فعلاً */
.mobile-header.fixed-top.is-hidden{
  transform: translateY(-110%);
  top: -120px !important;        /* يتغلّب على .fixed-top { top:0 } ديال Bootstrap */
  opacity: 0;
  pointer-events: none;
}

/* ظلّ أقوى بعد بداية السكروول (اختياري) */
@media (pointer:fine){
  .mobile-header.scrolled{
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
  }
}

/* ---------- Inner layout ---------- */
.mobile-header .container-fluid{
  height: 100%;
  padding-inline: .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* اللوجو وسط */
.mh-brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--mh-fg);
  text-decoration: none;
}

/* تجاهل أي width/height ممرّرة كخصائص HTML على <img> بالقوّة */
.mh-logo{
  height: auto !important;
  width: auto !important;
  max-height: calc(var(--mh-h) - 16px); /* يخلّي هامش علوي/سفلي */
  display: block;
}

.mh-title{
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--mh-fg);
}

/* زر القائمة على اليمين */
.mh-menu-btn{
  color: var(--mh-fg);
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  padding: .25rem .25rem;
}
.mh-menu-btn .bi{ display:inline-block; }

/* Spacer يساراً باش يبقى اللوجو فعلاً فالنص */
.mh-left{
  width: 2.25rem; /* تقريباً عرض زر القائمة */
}

/* ---------- Offcanvas ---------- */
.offcanvas{
  --bs-offcanvas-bg: #fff;
  --bs-offcanvas-width: min(85vw, 360px);
}