/* ══════════════════════════════════════════════════════════════════
   درج الجوّال الموحّد — front-cmp كلّها
   ------------------------------------------------------------------
   القيم منسوخة حرفيًا من درج الرئيسية V3 (home-v2.css §drawer) ليصبح
   قائمة الجوّال الواحدة في كل الصفحات العامة. مستقلّ بتوكناته (--fd-*)
   لأن home-v2.css لا يُحمَّل إلا على V2/V3، والدرج صار يُرسم من
   layouts/app خارج غلاف .h2-body فلا تصله قواعد ذاك الملف أصلًا.

   التفعيل: front-drawer.js يضيف body.has-front-drawer عند نجاح ربط
   البرغر بالدرج، وعندها فقط نخفي قائمة Bootstrap الاحتياطية — إن فشل
   JS بقيت القائمة القديمة تعمل كما هي (تدهور رشيق).
   ══════════════════════════════════════════════════════════════════ */

.drawer{
  --fd-ink:#15181F;
  --fd-ink-2:#454B58;
  --fd-ink-3:#737A8A;
  --fd-line:#E8EAF0;
  --fd-paper:#FFFFFF;
  --fd-brand:#C97924;
  --fd-brand-300:#E3B27E;
  --fd-brand-400:#D9944A;
  --fd-brand-600:#AE661A;
  --fd-pine:#38514F;
  --fd-sh-3:0 32px 80px rgba(56,81,79,.14);
  --fd-ease:cubic-bezier(.22,1,.36,1);

  position:fixed;
  inset:0;
  z-index:1050;
  visibility:hidden;
  transition:visibility 0s linear .45s;
}

/* الوضع الداكن — عائلة الأسود المحايد نفسها (--pt-*) لا كحلي home-v2 القديم.
   القيم المنسوخة من home-v2 كانت مزرقّة (#171A23 / #2A2E3C / #B6BCCB: B > R+8)
   فيقرأ الدرج لوحاً كحلياً فوق أرضية سوداء محايدة. أُعيد صبغها محايدةً بنفس
   الإضاءة، و‎--fd-paper‎ صار #17181C ليطابق .landing-nav-menu في top-stage. */
html.dark-style .drawer,
[data-theme="dark"] .drawer,
html[data-theme="theme-default-dark"] .drawer{
  --fd-ink:#E6E8EC;
  --fd-ink-2:#B9BCC2;
  --fd-ink-3:#9AA0AB;
  --fd-line:#2A2B30;
  --fd-paper:#17181C;
  --fd-sh-3:0 32px 80px rgba(0,0,0,.55);
}

.drawer.open{visibility:visible;transition-delay:0s;}

.drawer .drawer-scrim{
  position:absolute;inset:0;
  background:rgba(16,17,20,.5); /* محايد من عائلة --pt-bg بدل الكحلي rgba(21,24,31) */
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .35s var(--fd-ease);
  border:none;padding:0;cursor:pointer;
}
.drawer.open .drawer-scrim{opacity:1;}

.drawer .drawer-panel{
  position:absolute;top:0;bottom:0;right:0;
  width:min(340px,86vw);
  background:var(--fd-paper);
  padding:22px 22px calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);transition:transform .45s var(--fd-ease);
  box-shadow:var(--fd-sh-3);
  display:flex;flex-direction:column;
  font-family:'Tajawal','Cairo','Rubik',sans-serif;
}
.drawer.open .drawer-panel{transform:translateX(0);}

.drawer .drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-block-end:14px;
}
.drawer .drawer-head .logo img{height:38px;width:auto;display:block;}
html.dark-style .drawer .drawer-head .logo,
[data-theme="dark"] .drawer .drawer-head .logo,
html[data-theme="theme-default-dark"] .drawer .drawer-head .logo{
  background:#fff;padding:6px 11px;border-radius:13px;display:inline-block;
}

.drawer .icon-btn{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--fd-line);background:var(--fd-paper);color:var(--fd-ink-2);
  transition:.25s var(--fd-ease);cursor:pointer;padding:0;
}
.drawer .icon-btn:hover{color:var(--fd-brand);border-color:var(--fd-brand-300);transform:translateY(-2px);}
.drawer .icon-btn i{font-size:18px;}

.drawer .drawer-nav{display:block;}
.drawer .drawer-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 4px;border-block-end:1px solid var(--fd-line);
  font-weight:600;font-size:16.5px;color:var(--fd-ink-2);
  transition:.25s var(--fd-ease);text-decoration:none;
}
.drawer .drawer-nav a:hover,
.drawer .drawer-nav a:active{color:var(--fd-brand);}
.drawer .drawer-nav a i{
  font-style:normal;color:var(--fd-ink-3);font-size:16.5px;line-height:1;
  transition:transform .25s var(--fd-ease);
}
.drawer .drawer-nav a:hover i{transform:translateX(-4px);color:var(--fd-brand);}
.drawer .drawer-nav a.is-hot{color:var(--fd-brand-600);font-weight:800;}

.drawer .drawer-foot{margin-block-start:auto;padding-block-start:22px;display:grid;gap:10px;}
.drawer .drawer-foot .btn{
  width:100%;padding:14px 20px;font-size:16.5px;border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:800;transition:.3s var(--fd-ease);
}
.drawer .drawer-foot .btn-ghost{
  background:var(--fd-paper);color:var(--fd-ink);
  border:1.5px solid var(--fd-line);
}
.drawer .drawer-foot .btn-ghost:hover{border-color:var(--fd-pine);color:var(--fd-pine);}
.drawer .drawer-foot .btn-primary{
  background:linear-gradient(135deg,var(--fd-brand-400),var(--fd-brand-600));
  color:#fff;border:none;box-shadow:0 18px 40px rgba(201,121,36,.32);
}
.drawer .drawer-foot .btn-primary:hover{color:#fff;filter:brightness(1.05);}

/* الدرج للجوّال فقط — على سطح المكتب تعمل القائمة الأفقية */
@media (min-width:992px){
  .drawer{display:none;}
}

/* عند نجاح الربط نخفي قائمة Bootstrap الاحتياطية والبرغر يفتح الدرج.
   التخصيص أعلى من قاعدة vendor (front-page.css) ذات display:block !important */
@media (max-width:991.98px){
  body.has-front-drawer .layout-navbar .navbar.landing-navbar .landing-nav-menu,
  body.has-front-drawer .layout-navbar .navbar.landing-navbar .navbar-collapse,
  body.has-front-drawer .landing-menu-overlay{
    display:none !important;
  }
}