/* =========================================================
   0) Safety: fix dropdown clipping + layers
   ========================================================= */
.main-header,
.header-left,
.header-right,
.main-nav,
.main-nav .menu,
.main-nav .menu li{
  overflow: visible !important;
}

.main-header::before{ z-index:0 !important; }
.header-left, .header-right{ position:relative; z-index:2; }
.main-nav{ position:relative; z-index:999999 !important; }

/* =========================================================
   1) TOPBAR (جهتين فقط)
   ========================================================= */
.topbar{
  background:#17264f;
  color:#fff;
  padding:8px 20px;
  font-size:14px;
}

.topbar a{ color:#fff; text-decoration:none; }
.topbar a:hover{ text-decoration:underline; }

.mucontiner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Left side: social + phone + email */
.topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}

/* Right side: topbar menu */
.topbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}

/* Topbar menu */
.topbar-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.topbar-menu > li{
  position:relative;
}

.topbar-menu a{
  font-size:14px;
  font-weight:700;
  opacity:.95;
  padding:6px 8px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.topbar-menu a:hover{
  opacity:1;
  background:rgba(255,255,255,.10);
  text-decoration:none;
}

/* =========================================================
   2) TOPBAR DROPDOWN (Languages / Help etc.)
   ========================================================= */
.topbar-menu li ul.sub-menu{
  display:none;
  position:absolute;
  top:120%;
  min-width:170px;
  background:#ffffff;
  color:#111;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:8px 0;
  z-index:9999999;
}

/* RTL/LTR positioning */
[dir="rtl"] .topbar-menu li ul.sub-menu{ right:0; left:auto; }
[dir="ltr"] .topbar-menu li ul.sub-menu{ left:0; right:auto; }

.topbar-menu li:hover > ul.sub-menu{ display:block; }

.topbar-menu li ul.sub-menu li{
  width:100%;
}

.topbar-menu li ul.sub-menu a{
  color:#111 !important;
  display:flex;
  width:100%;
  padding:10px 12px;
  border-radius:0;
  font-weight:700;
  font-size:13px;
  opacity:1;
  background:transparent !important;
}

.topbar-menu li ul.sub-menu a:hover{
  background:rgba(58,175,169,.18) !important; /* secondary tint */
  color:#111 !important;
  text-decoration:none;
}

/* Arrow for items with children in topbar */
.topbar-menu li.menu-item-has-children > a::after{
  content:"▼";
  font-size:10px;
  margin-inline-start:6px;
  opacity:.8;
}

/* =========================================================
   3) MAIN HEADER (slanted background + layout)
   ========================================================= */
.main-header{
  position:relative;
  display:flex;
  align-items:stretch;
  width:100%;
  min-height:80px;
  box-sizing:border-box;
  background:transparent;
  padding:0 20px;
}

/* Slanted bg */
.main-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    110deg,
    var(--maria-primary) 0%,
    var(--maria-primary) 270px,
    var(--maria-secondary) 270px,
    var(--maria-secondary) 100%
  );
}

[dir="rtl"] .main-header::before{
  background:linear-gradient(
    250deg,
    var(--maria-primary) 0%,
    var(--maria-primary) 270px,
    var(--maria-secondary) 270px,
    var(--maria-secondary) 100%
  );
}

.header-left{
  flex:0 0 210px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.header-left img{ height:55px; display:block; }
img.site-logo{ max-width:max-content; }

.header-right{
  flex:1;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

/* =========================================================
   4) PRIMARY MENU (Desktop)
   ========================================================= */
.main-nav{ flex:1; min-width:0; }

.main-nav .menu {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.main-nav .menu > li{
  position:relative;
}

.main-nav .menu > li > a{
  color:#fff;
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
  white-space:nowrap;
  transition:.2s;
  display:block;
}

.main-nav .menu > li > a:hover{
  background:rgba(255,255,255,.18);
}

.main-nav .menu li.current-menu-item > a,
.main-nav .menu li.current_page_item > a{
  background:rgba(0,0,0,.18);
}

/* Primary dropdown */
.main-nav .menu li ul.sub-menu{
  display:none;
  position:absolute;
  top:120%;
  min-width:210px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:10px 0;
  z-index:9999999;
}

/* RTL/LTR position */
[dir="rtl"] .main-nav .menu li ul.sub-menu{ right:0; left:auto; }
[dir="ltr"] .main-nav .menu li ul.sub-menu{ left:0; right:auto; }

.main-nav .menu li:hover > ul.sub-menu{ display:block; }

.main-nav .menu li ul.sub-menu a{
  color:#111;
  text-decoration:none;
  display:block;
  padding:10px 14px;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
}

.main-nav .menu li ul.sub-menu a:hover{
  background:rgba(58,175,169,.18);
}

/* Arrow for items with children in primary */
.main-nav .menu li.menu-item-has-children > a::after{
  content:"▼";
  font-size:10px;
  margin-inline-start:6px;
  opacity:.8;
}

/* =========================================================
   5) Header actions (Shop + Client)
   ========================================================= */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn-shop,.btn-client-area{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:10px;
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
}

.btn-shop{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.12);
}
.btn-shop:hover{ background:rgba(255,255,255,.92); }

.btn-client-area{
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
.btn-client-area:hover{ background:rgba(255,255,255,.22); }

/* =========================================================
   6) Mobile toggle
   ========================================================= */
.mobile-menu-toggle{
  display:none;
  cursor:pointer;
  flex-direction:column;
  gap:4px;
  background:transparent;
  border:0;
  z-index:10;
}

.mobile-menu-toggle span{
  width:25px;
  height:3px;
  background:#000;
  border-radius:2px;
}

/* =========================================================
   7) Mobile menu (offcanvas)
   ========================================================= */
.mobile-menu{
  display:none; /* desktop hidden */
  position:fixed;
  top:0;
  width:280px;
  height:100vh;
  background:#fff;
  z-index:10016;
  box-shadow:-3px 0 10px rgba(0,0,0,.12);
  overflow-y:auto;
  padding-top:70px;
  transition:transform .3s ease;
}

[dir="rtl"] .mobile-menu{ right:0; left:auto; transform:translateX(100%); }
[dir="ltr"] .mobile-menu{ left:0; right:auto; transform:translateX(-100%); }

.mobile-menu.open{ transform:translateX(0); }

/* mobile header */
.mobile-menu-header{
  position:absolute;
  top:14px;
  inset-inline-start:12px;
  inset-inline-end:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mobile-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.mobile-logo img{ height:34px; width:auto; display:block; }
.mobile-site-name{ font-weight:900; color:#111; }

.close-mobile{
  font-size:30px;
  background:none;
  border:0;
  cursor:pointer;
}

/* mobile nav */
.mobile-nav{
  list-style:none;
  margin:0;
  padding:0;
}
.mobile-nav li{
  border-bottom:1px solid #eee;
  position:relative;
}
.mobile-nav a{
  display:block;
  padding:12px 18px;
  color:#111;
  text-decoration:none;
  font-size:18px;
  font-weight:900;
}

/* mobile submenu toggle */
.mobile-nav li.menu-item-has-children > a::after{
  content:"▼";
  font-size:10px;
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  transition:transform .3s;
  pointer-events:none;
}
.mobile-nav li.open > a::after{
  transform:translateY(-50%) rotate(180deg);
}

.mobile-nav .sub-menu{
  display:none;
  background:#f8f8f8;
}
.mobile-nav .sub-menu.open{ display:block; }
.mobile-nav .sub-menu a{
  font-size:15px;
  font-weight:800;
  padding-inline-start:34px;
}

/* mobile extras */
.mobile-extras{
  padding:14px 12px 24px;
  border-top:1px solid #eee;
  margin-top:10px;
}
.mobile-extras-title{
  font-weight:900;
  font-size:13px;
  margin:8px 8px 12px;
  color:#111;
}

.mobile-topbar-nav{
  list-style:none;
  margin:0;
  padding:0;
}
.mobile-topbar-nav li{ border-bottom:1px solid #eee; }
.mobile-topbar-nav a{
  display:block;
  padding:12px 18px;
  color:#111;
  text-decoration:none;
  font-size:16px;
  font-weight:900;
}

/* buttons in mobile bottom */
.mobile-shop-actions{
  display:flex !important;
  gap:10px !important;
  padding:10px 6px !important;
}
.mobile-shop-actions .btn-shop,
.mobile-shop-actions .btn-client-area{
  flex:1 !important;
  justify-content:center !important;
  min-width:0;
}

/* make client btn visible as button in mobile */
.mobile-shop-actions .btn-client-area{
  color:#111 !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important;
}

/* =========================================================
   8) Responsive
   ========================================================= */
@media (max-width: 1400px){
  /* topbar to stacked */
  .mucontiner{
    flex-direction:column;
    align-items:center;
  }
  .topbar-left,.topbar-right{
    justify-content:center;
    text-align:center;
  }

  /* hide desktop nav + actions, show mobile toggle */
  .main-nav{ display:none; }
  .header-actions{ display:none; }
  .mobile-menu-toggle{ display:flex; }

  /* show mobile menu container (still offcanvas until open) */
  .mobile-menu{ display:block; }

  /* shrink logo zone for mobile */
  .header-left{ flex:0 0 180px; }

  .main-header::before{
    background:linear-gradient(
      110deg,
      var(--maria-primary) 0%,
      var(--maria-primary) 270px,
      var(--maria-secondary) 270px,
      var(--maria-secondary) 100%
    );
  }
  [dir="rtl"] .main-header::before{
    background:linear-gradient(
      250deg,
      var(--maria-primary) 0%,
      var(--maria-primary) 270px,
      var(--maria-secondary) 270px,
      var(--maria-secondary) 100%
    );
  }

  /* prevent hover dropdown on mobile topbar */
  .topbar-menu li ul.sub-menu{ display:none !important; }
}

/* hard stop: mobile menu never on desktop */
@media (min-width: 992px){
  .mobile-menu{ display:none !important; }
  .mobile-menu.open{ display:none !important; }
}
/* ===== Fix hover gap for Primary dropdown ===== */
.main-nav .menu > li ul.sub-menu{
  top: 100% !important;       /* بدل 120% */
  margin-top: 8px;            /* مساحة شكلية */
}

.main-nav .menu > li::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height: 12px;               /* جسر يلتقط الماوس */
  background: transparent;
}

[dir="rtl"] .main-nav .menu > li::after{
  left:0; right:0;
}

/* يبقى مفتوح عند التحويم على li أو على submenu */
.main-nav .menu > li:hover > ul.sub-menu{
  display:block !important;
}
/* ===== Fix hover gap for Topbar dropdown ===== */
.topbar-menu > li ul.sub-menu{
  top: 100% !important;       /* بدل 120% */
  margin-top: 8px;
}

.topbar-menu > li::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height: 12px;
  background: transparent;
}

.topbar-menu > li:hover > ul.sub-menu{
  display:block !important;
}
/* =========================================
   A) Mobile logo in offcanvas header
   ========================================= */
.mobile-menu-header{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:10020;
}

.mobile-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  max-width:75%;
}

.site-logo-mobile{
  height:34px;
  width:auto;
  display:block;
  object-fit:contain;
}

.mobile-site-name{
  font-weight:900;
  color:#111;
}

/* =========================================
   B) Mobile submenu: clearer + less crowded
   ========================================= */
@media (max-width: 1400px){
  .mobile-nav a{
    font-size:17px;
    padding:11px 16px;
    line-height:1.35;
  }

  .mobile-nav li.menu-item-has-children > a{
    padding-inline-start: 34px; /* مساحة للسهم */
  }

  .mobile-nav li.menu-item-has-children > a::after{
    left:14px;
  }

  .mobile-nav .sub-menu{
    background:#fafafa;
    border-top:1px solid #f0f0f0;
  }

  .mobile-nav .sub-menu a{
    font-size:14px;
    font-weight:800;
    padding:10px 16px;
    padding-inline-start:34px;
  }
}

/* =========================================
   C) Social icons spacing (topbar + mobile)
   (يعالج مشكلة أنها ملتصقة)
   ========================================= */

/* حاول تغطي أكثر من احتمال حسب مخرجات shortcode */
.mariadeprma-social-icons,
.mariadeprma-social-icons ul,
.mobile-social,
.topbar-left{
  gap:10px;
}

.mariadeprma-social-icons{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px !important;
}

.mariadeprma-social-icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:8px;
  margin:0 !important;
}

/* =========================================
   D) Optional Accordion for extra links
   ========================================= */
.mobile-accordion{
  border-top:1px solid #eee;
  margin-top:10px;
}

.mobile-acc-btn{
  width:100%;
  background:#fff;
  border:0;
  padding:12px 18px;
  font-size:16px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

.mobile-acc-btn .chev{
  font-size:12px;
  transition:transform .25s ease;
}

.mobile-acc-btn[aria-expanded="true"] .chev{
  transform:rotate(180deg);
}

.mobile-acc-panel{
  padding:10px 0 14px;
  background:#fafafa;
  border-top:1px solid #eee;
}

.mobile-topbar-nav{
  list-style:none;
  margin:0;
  padding:0;
}
.mobile-topbar-nav li{
  border-bottom:1px solid #eee;
}
.mobile-topbar-nav a{
  display:block;
  padding:10px 18px;
  color:#111;
  text-decoration:none;
  font-weight:800;
  font-size:15px;
}

/* ✅ HARD FORCE mobile menu open/close based on its position (no dir dependency) */
@media (max-width: 1400px){

  /* الحالة المغلقة الافتراضية حسب جهة القائمة */
  .mobile-menu{
    /* لا تضع transform هنا حتى لا نكسر RTL/LTR */
  }

  /* إذا القائمة على اليسار (LTR) */
  .mobile-menu{ transform: translateX(-100%) !important; } /* default */
  .mobile-menu[style*="right: 0"]{ transform: translateX(100%) !important; } /* احتياط لو inline */

  /* أدق: حسب CSS الحالي */
  [dir="rtl"] .mobile-menu{ transform: translateX(100%) !important; } /* إذا dir موجود */
  [dir="ltr"] .mobile-menu{ transform: translateX(-100%) !important; }

  /* ✅ فتح */
  .mobile-menu.open{ transform: translateX(0) !important; }

  /* ✅ إغلاق */
  [dir="rtl"] .mobile-menu:not(.open){ transform: translateX(100%) !important; }
  [dir="ltr"] .mobile-menu:not(.open){ transform: translateX(-100%) !important; }

  /* ✅ إذا dir غير موجود: نحدد حسب الجهة الفعلية */
  html:not([dir]) .mobile-menu{ left:0; right:auto; transform: translateX(-100%) !important; }
  html:not([dir]) body.rtl .mobile-menu{ right:0; left:auto; transform: translateX(100%) !important; } /* فقط لو عندك body.rtl */
}

@media (max-width: 1400px){
  .main-header{ position: relative; }

  .mobile-menu-toggle{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10030;
  }

  /* RTL: الزر يسار */
  html[dir="rtl"] .mobile-menu-toggle,
  body[dir="rtl"] .mobile-menu-toggle,
  [dir="rtl"] .mobile-menu-toggle{
    left: 14px;
    right: auto;
  }

  /* LTR: الزر يمين */
  html[dir="ltr"] .mobile-menu-toggle,
  body[dir="ltr"] .mobile-menu-toggle,
  [dir="ltr"] .mobile-menu-toggle{
    right: 14px;
    left: auto;
  }
}

/* خلي حدود عناصر القوائم أخف */
.mobile-nav li,
.mobile-topbar-nav li{
  border-bottom: 1px solid #eee;
}

/* ✅ فاصل واحد سميك بين القوائم */
.mobile-extras{
  border-top: 3px solid #d9d9d9 !important;
  margin-top: 10px;
  padding-top: 10px;
}

/* لو عندك خط إضافي فوق أول عنصر داخل extras (من li) خليه يختفي */
.mobile-extras .mobile-topbar-nav li:first-child{
  border-top: 0 !important;
}

/* ===== Header Search ===== */
.header-search{
  position:relative;
}

.search-toggle{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}

.search-form{
  position:absolute;
  top:120%;
  inset-inline-end:0;
  background:#fff;
  padding:10px;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  display:none;
  z-index:999999;
}

.search-form input{
  width:220px;
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:14px;
}

/* إظهار */
.header-search.open .search-form{
  display:block;
}


.mobile-search{
  padding:12px;
}
.mobile-search input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:15px;
}