/* ==== عام بسيط ==== */
body { scroll-behavior: smooth; }
section { scroll-margin-top: 80px; }
@media (max-width: 575.98px) { .display-5 { font-size: 2rem; } }

/* ========= شريط الأزرار داخل الهيدر ========= */
.topbar .controls-bar{display:flex;align-items:center;gap:.8rem}

/* زر القائمة الدائري (يدعم round-btn كاسم بديل) */
.topbar .btn-menu,
.topbar .round-btn{
  height:56px;width:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid rgba(96, 2, 246, 0.95);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
  backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);
  box-shadow:0 10px 26px rgba(0,0,0,.18);color:#111
}
/* يدعم .eq و .hamburger */
.topbar .btn-menu .eq,
.topbar .round-btn .eq,
.topbar .btn-menu .hamburger,
.topbar .round-btn .hamburger{
  position:relative;width:22px;height:2px;background:rgba(96, 2, 246, 0.95);border-radius:2px
}
.topbar .btn-menu .eq::before,.topbar .btn-menu .eq::after,
.topbar .round-btn .eq::before,.topbar .round-btn .eq::after,
.topbar .btn-menu .hamburger::before,.topbar .btn-menu .hamburger::after,
.topbar .round-btn .hamburger::before,.topbar .round-btn .hamburger::after{
  content:"";position:absolute;inset-inline-start:0;width:22px;height:2px;background:#7306e7;border-radius:2px
}
.topbar .btn-menu .eq::before,.topbar .round-btn .eq::before,
.topbar .btn-menu .hamburger::before,.topbar .round-btn .hamburger::before{top:-7px}
.topbar .btn-menu .eq::after,.topbar .round-btn .eq::after,
.topbar .btn-menu .hamburger::after,.topbar .round-btn .hamburger::after{top:7px}

/* كبسولة اللغة */
.topbar .lang-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:999px;
  background:rgba(6,14,52,.55);
  color:#fff;text-decoration:none;font-weight:600;
  box-shadow:0 10px 24px rgba(0,0,0,.10)
}

/* كبسولة التبديل ليلي/نهاري */

/* عندما يكون الثيم داكنًا ينتقل المقبض للطرف الآخر */
html[data-bs-theme="dark"] .topbar .mode-toggle .thumb{inset-inline-start:calc(100% - 32px)}

/* خلفية الصفحة (نهاري/ليلي) */
html[data-bs-theme="light"] body{
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.20)),
    linear-gradient(180deg, #e8e3f3 0%, #d9d3ea 100%);
  background-attachment:fixed
}
html[data-bs-theme="dark"] body{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 26px),
    radial-gradient(1200px 600px at 70% 10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #0c0720 0%, #1b0f3c 60%, #11092b 100%);
  background-attachment:fixed;color:#e9e7f5
}
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .bg-body,
html[data-bs-theme="dark"] .bg-body-tertiary{
  background:rgba(20,12,40,.55) !important;border-color:rgba(255,255,255,.08) !important
}

/* شعار دائري */


/* ========= الأوفرلاي ========= */
/* === لوحة منسدلة (Sheet) بدلاً من تغطية كاملة === */
#navOverlay{
  position: fixed; inset: 0; z-index: 1099;
  background: transparent;                  /* بدون تعتيم للخلفية */
  display: none;
  pointer-events: none;                      /* منع اعتراض النقرات إلا على اللوحة */
}
#navOverlay.is-open{ display:block; }

.menu-panel{
  pointer-events: auto;
  position: absolute; inset-inline: 0;
  top: calc(var(--nav-h, 72px) + 10px);      /* تنزل تحت الهيدر */
  margin-inline: auto;
  width: min(980px, calc(100% - 32px));
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
  animation: menuDrop .18s ease-out;
}
html[data-bs-theme="light"] .menu-panel{
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.06);
}

.menu-panel__header{
  padding-inline: 6px;
  padding-block: 4px 10px;
  border-bottom: 1px dashed rgba(255,255,255,.15);
}
html[data-bs-theme="light"] .menu-panel__header{
  border-bottom-color: rgba(0,0,0,.09);
}

/* شبكة البطاقات */
.menu-panel__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 8px 4px 6px;
}

/* البطاقات نفسها */
.menu-card{
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.menu-card i{ font-size: 1.05rem; opacity: .9; }
.menu-card span{ font-weight: 600; }

.menu-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  border-color: rgba(255,255,255,.28);
}
html[data-bs-theme="light"] .menu-card{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
html[data-bs-theme="light"] .menu-card:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
}

/* حركة نزول لطيفة */
@keyframes menuDrop{
  from{ opacity: 0; transform: translateY(-8px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* شاشات صغيرة: عرض أعرض قليلًا ومسافات أكبر */
@media (max-width: 575.98px){
  .menu-panel{ width: calc(100% - 20px); }
  .menu-panel__grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* ===== مجموعة كبطاقة داخل اللوحة ===== */
.menu-group{
  margin-top: 8px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
html[data-bs-theme="light"] .menu-group{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}

.menu-group__head{
  display:flex; align-items:center; gap:.6rem;
  padding: 2px 4px 8px;
  border-bottom: 1px dashed rgba(255,255,255,.16);
  margin-bottom: 10px;
}
html[data-bs-theme="light"] .menu-group__head{
  border-bottom-color: rgba(0,0,0,.09);
}
.menu-group__head i{ font-size:1.05rem; opacity:.9; }

/* شبكة الشرائح (chips) */
.menu-group__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:10px;
}

/* شريحة/بطاقة رابط صغيرة */
.menu-chip{
  display:flex; align-items:center; gap:.55rem;
  padding:.65rem .8rem;
  border-radius:12px;
  text-decoration:none; color:inherit;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.menu-chip i{ font-size:1rem; opacity:.95; }
.menu-chip span{ font-weight:600; }

.menu-chip:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
html[data-bs-theme="light"] .menu-chip{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}
html[data-bs-theme="light"] .menu-chip:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}

/* هوامش/استجابة */
@media (max-width: 575.98px){
  .menu-group__grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* ====== تثبيت وشفافية الهيدر + سلوك التمرير ====== */
:root{ --nav-h: 72px; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); }
[id]{ scroll-margin-top: var(--nav-h); }

.topbar{
  position: fixed; inset-inline: 0; top: 0; z-index: 1100;
  height: var(--nav-h); display:flex; align-items:center;
  background: rgba(12,16,40,.30);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .22s ease;
  padding-top: env(safe-area-inset-top, 0px);
  will-change: transform, background;
}
html[data-bs-theme="light"] .topbar{
  background: rgba(255,255,255,.42);
  border-color: rgba(0,0,0,.06);
}
.topbar.is-scrolled{
  background: rgba(12,16,40,.65);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
html[data-bs-theme="light"] .topbar.is-scrolled{
  background: rgba(255,255,255,.85);
}
/* إخفاء/إظهار ذكي عند السحب */
.topbar.topbar--hidden{
  transform: translateY(calc(-1 * (var(--nav-h) + env(safe-area-inset-top, 0px))));
}
body{ padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce){
  .topbar{ transition: none; }
}