/* ================= متغيرات عامة ================= */
    :root{
      --gold: #d4af37;
      --gold-dark: #b8860b;
      --header-bg: rgba(255,255,255,0.20);
      --header-bg-scrolled: rgba(255,255,255,0.95);
      --font: "Cairo", sans-serif;
    }

    /* ---------------- إعداد الصفحة ---------------- */
    *.headerAdvanced {box-sizing: border-box}
    body.headerAdvanced {
      margin:0;
      font-family: var(--font), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      direction: rtl;
      background:#f7f7f7;
    }

    /* =================== الهيدر 
      justify-content:center;
      background: var(--header-bg);
      backdrop-filter: blur(8px);
      ============ */
    .headerAdvanced{
      position: fixed;
      top:0;
      left: -20px;
      right: 2;
      right: 0;
      display:flex;
      padding:20px 28px;
      transition: all .32s ease;
      z-index:1000;
    }

    /* عند التمرير تقل المساحة ويظهر خلفية صلبة */
    .headerAdvanced.scrolled{
      padding:10px 28px;
      background: var(--header-bg-scrolled);
      box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    .headerAdvanced-container{
      width:100%;
      max-width:1200px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      text-align:center; /* لتوسيط الشعار */
    }

    /* ---------- الشعاران (ثابت + عند التمرير) ---------- */
    .headerLogo img{
      display:unset;margin: -25px -33px;transition: transform .28s ease, opacity .28s ease;}

    .logo-default{width: 156px;opacity:1;}
    .logo-scrolled{ width:130px; opacity:0; display:block; position:relative; top:0; }

    /* عند اضافة صنف scrolled للهيدر: اظهار الشعار الثاني واخفاء الاول */
    .headerAdvanced.scrolled .logo-default{ opacity:0; transform: scale(.98); }
    .headerAdvanced.scrolled .logo-scrolled{ opacity:1; transform: scale(1); }

    /* ========== زر عرض الصفحات ومربع المحتوى ========== */
    .dropdownWrapper{ position:relative; display:flex; align-items:center; }

    .dropdownBtn{
      background: #d4af37;
      color:#000;
      border:0;
      padding:14px 14px;
      border-radius:8px;
      cursor:pointer;
      font-weight:600;
      margin-right: -20px;
      display:flex;
      align-items:center;
      gap:2px;
      transition: transform .18s ease, background .18s;
    }
    .dropdownBtn:hover{ background: var(--gold-dark); color:#fff; transform: translateY(-2px); }

    /* نافذة المحتوى (تحتوي القوائم الرئيسية / المجموعات) */
    .dropdownContentWrapper{
      position:absolute;
      top:60px; /* تحت الهيدر */
      right:0;
      min-width:250px;
      background:#fff;
      border-radius:10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
      overflow:hidden;
      z-index:1200;

      /* نجهز للحركة */
      opacity:0;
      transform: translateY(-8px);
      transition: opacity .22s ease, transform .22s ease;
      display:none;  /* يظهر عند اضافة صنف show على wrapper */
    }

    /* عند الفتح */
    .dropdownWrapper.show .dropdownContentWrapper{
      display:block;
      opacity:1;
      transform: translateY(0);
    }

    /* المحتوى مشكّل كقائمتين متبادلتين (main + groups) */
    .menu{
      display:flex;
      flex-direction:column;
      gap:0;
      text-align:right;
      padding:8px 0;
      min-height:120px;
    }

    /* رأس المربع: مكان لزر الإغلاق أو العودة */
    .menu-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:8px 12px;
      border-bottom:1px solid #eee;
      background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
    }

    .menu-title{ font-weight:700; color:#222; font-size:14px; }

    .menu-close-btn, .menu-back-btn{
      background:transparent;
      border:0;
      cursor:pointer;
      font-size:18px;
      color:#666;
      padding:6px;
      border-radius:6px;
    }
    .menu-close-btn:hover, .menu-back-btn:hover{ background:#f3f3f3; color:#222; }

    /* البنود داخل القائمة - مع أيقونات على اليمين لأن الوضع RTL */
    .menu a{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 14px;
      color:#111;
      text-decoration:none;
      font-weight:500;
      font-size:15px;
      transition: background .15s, color .15s;
    }
    .menu a .icon{ width:28px; display:inline-flex; align-items:center; justify-content:center; color:var(--gold); font-size:16px; }

    /* فاصل خفيف بين البنود */
    .menu .divider{
      height:1px;
      background:#eee;
      margin:0 8px;
    }

    .menu a:hover{ background: linear-gradient(90deg, rgba(212,175,55,0.12), rgba(212,175,55,0.08)); color:#000; }

    /* شاشات صغيرة: اجعل المربع يغطي يمين الشاشة */
    @media (max-width:768px){
      .dropdownContentWrapper{
        top:0; 
        right:-400px;
        height:100vh;
        width:75%;
        border-radius:0;
        display:none;
      }
      .dropdownWrapper.show .dropdownContentWrapper{ display:flex; justify-content: flex-end; }
      .menu{ padding-top:24px; }
    }


         /* ===== زر واتساب عائم (أصغر) ===== */
    .whatsapp-float {
      position: fixed;
      bottom: 20px;
      left: 20px;
      background: #25d366;
      color: white;
      font-size: 1.6rem;  /* حجم أصغر */
      padding: 12px;      /* حشو أصغر */
      border-radius: 50%;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      z-index: 999;
      transition: transform 0.3s, background 0.3s;
    }
    .whatsapp-float:hover {
      transform: scale(1.1);
      background: #128c7e;
    }
    .whatsapp-float i {
      pointer-events: none;
    }