@charset "UTF-8";

/* ══ MOBILE NAV DRAWER ══════════════════════════════════════════ */
/* زر القائمة (hamburger) — تعريف واحد موحّد لكل الصفحات (كان قبل كده مكرر
   بأحجام مختلفة في كل صفحة على حدة: 40×40، 36×36، أو مخفي بالكامل حسب الملف).
   Touch target 44×44 كامل، بلا خلفية/border افتراضي، بلا أي tap-highlight. */
.hamburger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  cursor:pointer;width:44px;height:44px;padding:0;
  border:none;background:none;border-radius:11px;flex-shrink:0;order:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform 160ms ease;
}
.hamburger,.hamburger:hover,.hamburger:active,.hamburger:focus{background:none;box-shadow:none}
.hamburger:focus{outline:none}
.hamburger:focus-visible{outline:1.5px solid rgba(214,173,76,.55);outline-offset:2px}
.hamburger:active{transform:scale(.96)}
.hamburger span{display:block;width:20px;height:2px;background:#fff;border-radius:4px;transition:transform 180ms ease,opacity 160ms ease}
.hamburger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-nav-overlay{display:none;position:fixed;inset:0;z-index:998;background:rgba(8,9,13,.75)}
.mobile-nav-overlay.open{display:block}

.mobile-nav{
  position:fixed!important;top:64px!important;right:0!important;
  width:276px!important;height:calc(100dvh - 64px)!important;
  overflow:hidden!important;
  background:#121319!important;
  border-left:1px solid rgba(255,255,255,.06)!important;
  border-radius:20px 0 0 20px!important;
  display:flex!important;flex-direction:column!important;
  z-index:999!important;
  transform:translateX(110%)!important;opacity:0!important;pointer-events:none!important;
  will-change:transform!important;
  transition:transform .32s cubic-bezier(.32,.9,.35,1.1),opacity .22s ease!important;
  box-shadow:-16px 0 32px rgba(0,0,0,.4)!important;
  padding:0!important
}
.mobile-nav.open{transform:translateX(0)!important;opacity:1!important;pointer-events:auto!important}

/* ══════ DESKTOP ≥992px: sidebar قابلة للطي + هيدر sticky عادي ══════ */
@media(min-width:992px){
  html{overflow-x:hidden}
  body{
    margin-right:254px;
    width:auto;max-width:none;
    overflow-x:hidden;
    box-sizing:border-box;
    transition:margin-right .3s cubic-bezier(.4,0,.2,1);
  }
  html.sidebar-collapsed body{margin-right:0!important}

  /* الهيدر sticky داخل body (يأخذ عرض body تلقائياً، لا فراغ) */
  .site-header{position:sticky!important;top:0!important;z-index:1000!important}

  .mobile-nav{
    transform:none!important;
    opacity:1!important;pointer-events:auto!important;
    width:254px!important;
    top:74px!important;
    height:calc(100vh - 74px)!important;
    z-index:900!important;
    background:var(--bg,#0a0b0f)!important;
    border-left:1px solid rgba(255,255,255,.07)!important;
    border-radius:0!important;
    box-shadow:none!important;
    transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s ease!important;
  }
  /* الأقسام الداخلية شفافة لتكشف خلفية الصفحة */
  .mobile-nav .mnav-profile,
  .mobile-nav .mnav-guest{background:transparent!important}
  html.sidebar-collapsed .mobile-nav{
    transform:translateX(105%)!important;
    pointer-events:none!important;
  }

  /* إخفاء الـ scrollbar في القائمة الجانبية — احترافي */
  .mobile-nav .mnav-scroll{
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .mobile-nav .mnav-scroll::-webkit-scrollbar{
    display:none!important;
    width:0!important;height:0!important;
  }
  .mobile-nav-overlay{display:none!important}

  /* الهيدر = نسخة الموبايل (هامبرغر يعمل toggle) */
  .header-nav{display:none!important}
  .mob-actions{display:flex!important}
  .hamburger{display:flex!important}     /* الزر يصبح toggle للـ sidebar */

  /* محتوى الصفحة محكم ويتأقلم مع حالة الـ sidebar */
  .page-wrap{max-width:980px!important;margin:0 auto!important;transition:max-width .3s ease}
  html.sidebar-collapsed .page-wrap{max-width:1320px!important}
  .header-inner{max-width:none!important;padding:0 24px!important}
}
.mnav-scroll{flex:1;overflow-y:auto;overflow-x:hidden}

/* ── Profile (logged in) ── */
.mnav-profile{
  padding:16px 14px 12px;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:stretch;
}

/* كارت البروفايل — سطح واحد مسطّح، بدون تدرجات أو توهّج */
.mnav-prof-card{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  width:100%;
  margin:0 0 12px;
  padding:18px 14px 14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  text-decoration:none;
}
/* ══ إطار ملكي حول صورة البروفايل — بستايل تطبيقات اللايف والصوتي ══ */
.mnav-avatar-frame{
  position:relative;flex-shrink:0;
  width:100px;height:100px;border-radius:50%;
  padding:5px;
  background:conic-gradient(from 220deg,#8a6920,#f5de80 22%,#fff6d6 38%,#f5de80 54%,#c08a35 70%,#f5de80 86%,#8a6920);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
}
.mnav-avatar-frame::before{
  content:"";position:absolute;inset:5px;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.4);
  pointer-events:none;z-index:2;
}
/* لو الإطار SVGA شغّال بيغطي الحلقة الذهبية بالكامل — امسحها عشان ميبانش
   شريط رفيع منها حوالين حلقة الـ SVGA */
.mnav-avatar-frame.has-svga-frame{background:none;box-shadow:none;padding:0}
.mnav-avatar-frame.has-svga-frame::before{display:none}
.mnav-avatar-crown{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;z-index:3;
  background:linear-gradient(160deg,#fff6d6 0%,#f5de80 45%,#a9762a 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.4),0 0 0 3px #121319;
}
.mnav-avatar-crown svg{width:12px;height:12px;color:#5c3d0a}

/* إطار SVGA متحرك (لو مرفوع من السوبر أدمن) — الإطار بياخد حجم الحاوية
   بالكامل، والصورة الشخصية بتبقى دايرة أصغر (٪72) في النص عشان حلقة
   الإطار ميغطيش حواف الصورة. */
.mnav-avatar-svga-canvas{
  position:absolute!important;inset:0!important;z-index:3;
  pointer-events:none;
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
}
.mnav-prof-card .mnav-avatar{
  margin:0;width:100%;height:100%;font-size:24px;
  background:#2a2c38;color:#fff;
  border:0;
  box-shadow:none;
}
.mnav-prof-card .mnav-avatar-frame.has-svga-frame .mnav-avatar{width:72%;height:72%;font-size:17px}
.mnav-prof-name{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:900;color:#000;
  line-height:1.2;letter-spacing:0;
  text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
  padding:5px 16px;margin-top:2px;
  background:linear-gradient(135deg,#8a6920,#f5de80 28%,#fff6d6 48%,#f5de80 68%,#c08a35);
  clip-path:polygon(5% 0%,95% 0%,100% 50%,95% 100%,5% 100%,0% 50%);
  box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55);
}
.mnav-prof-name svg{width:12px;height:12px;color:#000;flex-shrink:0}
.mnav-prof-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mnav-prof-greet{
  font-size:11px;font-weight:700;color:rgba(255,255,255,.5);
  letter-spacing:.2px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.mnav-prof-greet::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#22c55e;flex-shrink:0;
}

/* رابط الصورة + الاسم داخل الكارت */
.mnav-prof-main{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;width:100%;
}
/* ID — شريحة مسطّحة بسيطة */
.mnav-prof-pid{
  display:inline-flex;align-items:center;gap:7px;
  margin:2px auto 0;
  padding:6px 13px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:#fff;cursor:pointer;
  font-family:'Cairo',sans-serif;direction:ltr;
  transition:background .15s,border-color .15s,transform .12s;
}
.mnav-prof-pid:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
}
.mnav-prof-pid:active{transform:scale(.96)}
.mnav-prof-pid.copied{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.4);
  color:#5fe39a;
}

/* أيقونة كرت الـ ID */
.mnav-prof-pid-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  background:transparent;
  color:rgba(255,255,255,.5);flex-shrink:0;
}
.mnav-prof-pid-ic svg{width:15px;height:15px}

/* الـ label "ID" */
.mnav-prof-pid-lbl{
  font-size:9.5px;font-weight:900;letter-spacing:.7px;
  color:rgba(255,255,255,.4);
  text-transform:uppercase;
}

/* الرقم — أبيض */
.mnav-prof-pid-num{
  font-size:13px;font-weight:900;letter-spacing:.3px;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

/* صف الأيقونات المدمج داخل كارت البروفايل — شرائح مسطّحة موحّدة */
.mnav-prof-actions{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  width:100%;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);
}
.mnav-act{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:40px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.7);
  text-decoration:none;cursor:pointer;
  font-family:inherit;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.mnav-act:hover{
  background:rgba(255,255,255,.08);
  color:#fff;transform:translateY(-1px);
}
.mnav-act:active{transform:scale(.94)}
.mnav-act svg{width:18px;height:18px}

.mnav-act-notif.has-unread{color:#ff9090;background:rgba(229,34,34,.1);border-color:rgba(229,34,34,.28)}
.mnav-act-notif.has-unread:hover{color:#fff;background:rgba(229,34,34,.16)}
.mnav-act-badge{
  position:absolute;top:-6px;left:-6px;
  min-width:16px;height:16px;padding:0 4px;
  background:#e52222;
  color:#fff;font-size:9px;font-weight:900;
  border-radius:999px;line-height:1;direction:ltr;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #121319;
}

.mnav-act-logout{color:#ff8080}
.mnav-act-logout:hover{background:rgba(229,34,34,.12);color:#ff5050;border-color:rgba(229,34,34,.25)}

.mnav-act-theme{position:relative}
.mnav-act-theme .tt-icon{position:absolute;width:16px;height:16px;transition:transform .35s ease,opacity .25s ease}
html[data-bc-theme="dark"]  .mnav-act-theme .tt-moon{opacity:1;transform:scale(1)}
html[data-bc-theme="dark"]  .mnav-act-theme .tt-sun {opacity:0;transform:scale(.5) rotate(-60deg)}
html[data-bc-theme="light"] .mnav-act-theme .tt-moon{opacity:0;transform:scale(.5) rotate(60deg)}
html[data-bc-theme="light"] .mnav-act-theme .tt-sun {opacity:1;transform:scale(1)}

.mnav-act-lang{padding:0;background:transparent;border:0}
.mnav-act-lang:hover{background:transparent;transform:none}
.mnav-act-lang-btn{
  width:100%;height:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,transform .15s;font-family:inherit;
}
.mnav-act-lang-btn:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.mnav-act-lang-btn .fi{width:20px;height:15px;border-radius:3px;display:block}

/* بطاقة الرصيد المصغّرة (تحت البروفايل) — سطح مسطّح واحد */
.mnav-bal-mini{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  color:#fff;text-decoration:none;
  margin-bottom:10px;
  transition:background .15s,border-color .15s;
}
.mnav-bal-mini:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.mnav-bal-mini .bm-icon{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,222,128,.1);flex-shrink:0;
  border:0;
}
.mnav-bal-mini .bm-icon svg{width:18px;height:18px;color:#f5de80}
.mnav-bal-mini .bm-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mnav-bal-mini .bm-label{
  font-size:10px;font-weight:800;
  color:rgba(255,255,255,.5);
  letter-spacing:.4px;line-height:1;
}
.mnav-bal-mini .bm-amount{
  font-size:15px;font-weight:900;
  color:#f5de80;line-height:1.1;
  white-space:nowrap;direction:ltr;text-align:start;
  display:inline-flex;align-items:baseline;gap:2px;
}
.mnav-bal-mini .bm-sym{font-size:13px;opacity:.9}
.mnav-bal-mini .bm-num{font-variant-numeric:tabular-nums}

.mnav-avatar{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  background:#2a2c38;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:900;color:#fff;
  border:3px solid rgba(255,255,255,.08);
  box-shadow:none;
  overflow:hidden;text-decoration:none;
  transition:transform .18s ease;
  position:relative;
}
.mnav-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

.mnav-profile-sep{height:1px;background:rgba(255,255,255,.07);margin:10px 0;width:100%}
.mnav-visit-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:10px 14px;border-radius:12px;box-sizing:border-box;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#e0c775;font-size:12.5px;font-weight:800;
  text-decoration:none;transition:.15s;
}
.mnav-visit-btn:hover{background:rgba(255,255,255,.07);color:#f5de80;border-color:rgba(255,255,255,.14)}
.mnav-play-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:10px 14px;border-radius:12px;box-sizing:border-box;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#4cca6b;font-size:12.5px;font-weight:800;
  text-decoration:none;transition:.15s;margin-top:7px;
}
.mnav-play-btn:hover{background:rgba(255,255,255,.07);color:#5fe081;border-color:rgba(255,255,255,.14)}

/* ── Brand1Dev Card (compact image) ── */
.mnav-devcard{
  padding:16px 12px 18px;
  text-align:center;
}
.mnav-devcard-link{
  display:inline-block;text-decoration:none;
  border-radius:12px;overflow:hidden;line-height:0;
  opacity:.85;
  transition:opacity .2s ease,transform .2s ease;
  max-width:100%;
}
.mnav-devcard-link:hover{opacity:1;transform:translateY(-1px)}
.mnav-devcard-img{display:block;width:100%;max-width:180px;height:auto;border-radius:12px;margin:0 auto}

/* ── Guest ── */
.mnav-guest{padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.mnav-login-btn{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  padding:12px!important;border-radius:13px!important;
  background:var(--red,#e52222)!important;
  color:#fff!important;font-size:14px!important;font-weight:800!important;
  text-decoration:none!important;width:100%!important;box-sizing:border-box!important;
  margin-bottom:9px!important;transition:.15s!important;
}
.mnav-login-btn:hover{background:#c81c1c!important}
.mnav-google-btn{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  padding:11px!important;border-radius:13px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  color:rgba(255,255,255,.82)!important;font-size:13.5px!important;font-weight:800!important;
  text-decoration:none!important;width:100%!important;box-sizing:border-box!important;
  transition:.15s!important;
}
.mnav-google-btn:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}

/* ── Body & Links — عناصر قائمة مسطّحة وواسعة ── */
.mnav-body{padding:12px 12px 16px}
.mnav-section-label{
  font-size:10px;font-weight:800;color:rgba(255,255,255,.34);
  letter-spacing:1.2px;text-transform:uppercase;
  padding:16px 10px 8px;display:flex;align-items:center;gap:8px;
}
.mnav-section-label::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.07)}
.mnav-divider{
  height:1px;margin:10px 10px;
  background:rgba(255,255,255,.07);
}
.mobile-nav .nav-link{
  position:relative;
  display:flex!important;align-items:center!important;gap:11px!important;
  padding:10px 10px!important;font-size:13.5px!important;font-weight:700!important;
  border-radius:12px!important;color:rgba(255,255,255,.75)!important;
  text-decoration:none!important;transition:background .18s ease,color .18s ease!important;
  margin-bottom:3px!important;background:transparent!important;
  width:100%!important;box-sizing:border-box!important;
  letter-spacing:0!important;
}
.mobile-nav .nav-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.05)!important;
}
.mobile-nav .nav-link.active{
  color:#fff!important;font-weight:800!important;
  background:rgba(229,34,34,.13)!important;
  box-shadow:none!important;
}
.mobile-nav .nav-link.active .mnav-icon{
  background:rgba(229,34,34,.16)!important;
  color:#ff9090;
}
/* العناصر الأساسية أكبر — الرئيسية / محفظتي / طلباتي / قناة الواتساب */
.mobile-nav .nav-link-lg{
  padding:11px 11px!important;font-size:14px!important;
  border-radius:13px!important;margin-bottom:5px!important;gap:12px!important;
}
.mobile-nav .nav-link-lg .mnav-icon{
  width:34px!important;height:34px!important;border-radius:10px!important;
}
.mobile-nav .nav-link-lg .mnav-icon svg{width:19px!important;height:19px!important}
.mobile-nav .nav-link.danger{color:#ff8080!important}
.mobile-nav .nav-link.danger:hover{background:rgba(229,34,34,.1)!important;color:#ff5050!important}
.mobile-nav .mnav-icon{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.65);
  border:0;
  transition:background .18s ease,color .18s ease;
}
.mobile-nav .mnav-icon svg{width:17px;height:17px}
.mobile-nav .nav-link:hover .mnav-icon{background:rgba(255,255,255,.09);color:#fff}
.mobile-nav .nav-link.danger .mnav-icon{background:rgba(229,34,34,.12);color:#ff7070}
.mobile-nav .nav-login,.mobile-nav .nav-btn{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin:4px 0!important;padding:12px!important;font-size:14px!important;font-weight:800!important;border-radius:13px!important;color:#fff!important;background:var(--red,#e52222)!important;text-decoration:none!important;width:100%!important;box-sizing:border-box!important}

/* ── Social ── */
.mnav-social-row{display:flex;gap:8px;padding:4px 0 8px}
.mnav-social-btn{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:.15s;flex-shrink:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.mnav-social-btn:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.mnav-social-wa{color:#25D366}.mnav-social-tg{color:#229ED9}
.mnav-social-fb{color:#1877F2}.mnav-social-ig{color:#E4405F}

/* ══ توحيد ألوان الكتابة (أبيض) في كل القائمة الجانبية ══ */
.mobile-nav .nav-link,
.mobile-nav .mnav-prof-greet,
.mobile-nav .mnav-prof-pid-lbl,
.mobile-nav .mnav-prof-pid-num,
.mobile-nav .bm-label,
.mobile-nav .bm-amount,
.mobile-nav .bm-sym,
.mobile-nav .bm-num,
.mobile-nav .mnav-visit-btn,
.mobile-nav .mnav-play-btn{
  color:#fff !important;
}
.mobile-nav .mnav-section-label{color:rgba(255,255,255,.6) !important}
.mobile-nav .mnav-prof-greet::before{background:#22c55e}

@media(max-width:900px){
  .hamburger{display:flex!important}
  .header-nav{display:none!important}
}

/* ══ HEADER LANG BUTTON ═══════════════════════════════════════ */
.hlb{
  display:flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:9px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  color:#c8cbe0;cursor:pointer;
  transition:all .18s;user-select:none;
  font-family:'Cairo',sans-serif;white-space:nowrap;
}
.hlb:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.hlb.open{background:rgba(255,255,255,.1);border-color:rgba(214,173,76,.35);color:#f5de80}
.hlb .fi{width:17px;height:12px;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.5);flex-shrink:0}
.hlb-code{font-size:10.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase}
.hlb-chev{width:10px;height:10px;opacity:.4;transition:transform .2s;flex-shrink:0}
.hlb.open .hlb-chev{transform:rotate(180deg);opacity:.7}

/* Dropdown */
.hlb-dd{
  position:fixed;top:66px;
  width:272px;
  background:linear-gradient(160deg,#13151f,#0d0f18);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
  transform:translateY(-8px) scaleY(.96);
  transform-origin:top center;
  opacity:0;pointer-events:none;
  transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .18s;
  z-index:9500;
}
.hlb-dd.open{transform:translateY(0) scaleY(1);opacity:1;pointer-events:auto}
.hlb-dd-head{
  padding:11px 14px 8px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:10.5px;font-weight:900;
  color:rgba(255,255,255,.3);
  font-family:'Cairo',sans-serif;letter-spacing:.5px;text-transform:uppercase;
}
.hlb-dd-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:9px}
.hlb-opt{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:9px 5px 7px;
  border-radius:11px;
  border:1.5px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
  cursor:pointer;transition:all .16s;
  font-family:'Cairo',sans-serif;text-align:center;
  position:relative;
}
.hlb-opt:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);transform:translateY(-1px)}
.hlb-opt.active{background:rgba(214,173,76,.07);border-color:rgba(214,173,76,.28);box-shadow:0 0 0 1px rgba(214,173,76,.1)}
.hlb-opt.active:hover{transform:none}
.hlb-opt .fi{width:30px;height:22px;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.hlb-opt-name{font-size:10.5px;font-weight:900;color:#e0e2f0;line-height:1.2;word-break:break-word}
.hlb-opt-nat{font-size:8.5px;font-weight:700;color:rgba(255,255,255,.3);line-height:1.2}
.hlb-opt-chk{
  position:absolute;top:4px;
  width:13px;height:13px;border-radius:50%;
  background:linear-gradient(135deg,#c9a84c,#f2d477);
  display:flex;align-items:center;justify-content:center;
  font-size:7.5px;color:#000;font-weight:900;
  box-shadow:0 2px 6px rgba(214,173,76,.4);
}
[dir="rtl"] .hlb-opt-chk{right:4px;left:auto}
[dir="ltr"] .hlb-opt-chk{left:4px;right:auto}

/* ── Login circle (guest pills row) ── */
.mnav-login-circle{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.28);
  cursor:pointer;padding:0;color:#5fe39a;text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.mnav-login-circle:hover{
  background:rgba(34,197,94,.2);
  color:#fff;
}
.mnav-login-circle:active{transform:scale(.94)}
.mnav-login-circle svg{width:18px;height:18px}

/* ── Lang circle pill (popup trigger) ── */
.mnav-lang-pill{position:relative;display:flex;justify-content:center;margin-top:10px}
.mnav-lang-circle{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  cursor:pointer;padding:0;position:relative;
  transition:background .15s ease,border-color .15s ease;
}
.mnav-lang-circle:hover,
.mnav-lang-circle.open{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
.mnav-lang-circle .fi{width:24px;height:18px;border-radius:3px;overflow:hidden}
.mnav-lang-popup{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px) scale(.96);
  z-index:80;width:220px;
  background:#181920;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:5px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .2s cubic-bezier(.4,0,.2,1);
  max-height:280px;overflow-y:auto;
}
.mnav-lang-popup.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.mnav-lang-popup::-webkit-scrollbar{width:5px}
.mnav-lang-popup::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:10px}
.mnav-lang-popup-arrow{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:11px;height:11px;
  background:#181920;border-left:1px solid rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.09);
}
.mnav-lang-popup-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border-radius:9px;
  background:transparent;border:none;color:#fff;cursor:pointer;
  text-align:right;font-family:'Cairo',sans-serif;
  font-size:12.5px;font-weight:700;
  transition:background .15s;
}
.mnav-lang-popup-item:hover{background:rgba(255,255,255,.06)}
.mnav-lang-popup-item.active{background:rgba(229,34,34,.12)}
.mnav-lang-popup-item .fi{width:20px;height:15px;border-radius:2.5px;flex-shrink:0;overflow:hidden}
.mnav-lang-popup-item .lpop-name{flex:1;color:#e6e6e6}
.mnav-lang-popup-item.active .lpop-name{color:#fff;font-weight:900}
.mnav-lang-popup-item .lpop-check{flex-shrink:0;color:#f5de80;opacity:0;transition:opacity .15s}
.mnav-lang-popup-item.active .lpop-check{opacity:1}

/* ══ القائمة الجانبية تبقى داكنة دائماً حتى في الوضع النهاري ══ */
html[data-bc-theme="light"] .mobile-nav,
html[data-bc-theme="light"] .mobile-nav *{
  /* اعد ضبط متغيرات الـ theme داخل الـ sidebar لتبقى ليلية */
  --bg:#0a0b0f;--bg2:#111318;--bg3:#161820;--bg4:#1c1e28;
  --text:#f0f0f0;--muted:#8a8f9e;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --header-bg:#0a0b0f;
}
html[data-bc-theme="light"] .mobile-nav{
  background:#121319!important;
  color:#f0f0f0;
}
html[data-bc-theme="light"] .mobile-nav-overlay{
  background:rgba(0,0,0,.55);
}
html[data-bc-theme="light"] .mobile-nav .nav-link,
html[data-bc-theme="light"] .mobile-nav .bm-amount,
html[data-bc-theme="light"] .mobile-nav .bm-num,
html[data-bc-theme="light"] .mobile-nav .bm-sym,
html[data-bc-theme="light"] .mobile-nav .mnav-prof-greet{
  color:rgba(255,255,255,.78);
}
html[data-bc-theme="light"] .mobile-nav .mnav-act{
  background:transparent;
  border:0;
  color:#fff;
}
html[data-bc-theme="light"] .mobile-nav .mnav-act:hover{
  background:transparent;color:#fff;
}