/* =========================
   HEADER (RTL) — CLEAN FILE
   ========================= */

/* شريط الهيدر فوق الهيرو */
.site-header{
  position:absolute;
  inset-inline:0; /* يمين/يسار حسب الاتجاه */
  top:0;
  z-index:1000;
  background:transparent; /* زي التصميم */
  width:100%;
}

/* حاوية الهيدر: Logo | Nav | CTA */
.header-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto; /* لوجو | منيو | زر */
  align-items:center;
  gap:24px;
  padding:16px 48px; /* مسافة مريحة */
}

/* اللوجو */
.site-logo{ display:flex; align-items:center;    height: 150px; }
.site-logo img,
.custom-logo{
  height:130px;
  width:auto;
}

/* منيو الديسكتوب */
.main-nav{ display:flex; justify-content:center; }
.main-nav .menu{
  display:flex;
  align-items:center;
  gap:40px;
  list-style:none;
  margin:0; padding:0;
}
.main-nav .menu li{ list-style:none; }
.main-nav .menu a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  transition:color .3s ease;
}
.main-nav .menu a:hover{ color:#d7bfa8; }

/* زر اطلب استشارة */
.header-cta .btn--cta{
  background:#8c6143;
  border:1px solid #8c6143;
  color:#fff;
  padding:.65rem 1.1rem;
  border-radius:8px;
  font-weight:700;
  text-decoration:none !important;
  transition:all .3s ease;
}
.header-cta .btn--cta:hover{
  background:transparent;
  color:#8c6143;
}

/* زر الهامبرجر (موبايل فقط) */
.nav-toggle{
  display:none;
  position:absolute;
  inset-inline-end:18px; /* في RTL: يسار بصريًا */
  top:18px;
  width:42px; height:36px;
  background:transparent; border:0; cursor:pointer; z-index:1101;
}
.nav-toggle span{ display:block; height:3px; margin:6px 0; background:#fff; border-radius:2px; }

/* ===== درج الموبايل ===== */
.mobile-drawer{
  position:fixed; top:0; bottom:0;
  right:-320px;                /* فولباك للمتصفحات القديمة */
  inset-inline-end:-320px;     /* المنطقي */
  width:clamp(260px,85vw,300px);
  background:#121212; color:#fff; z-index:1100;
  padding:24px 18px; overflow-y:auto;
  transition:right .3s ease, inset-inline-end .3s ease;
}
.mobile-drawer.open{ right:0; inset-inline-end:0; }

.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:1090; opacity:0; pointer-events:none; transition:opacity .3s;
}
.drawer-backdrop.show{ opacity:1; pointer-events:auto; }

.drawer-close{
  position:absolute; inset-inline-start:10px; top:8px;
  background:transparent; color:#fff; font-size:28px; border:0; cursor:pointer;
}

.drawer-menu{ list-style:none; margin:48px 0 0; padding:0; }
.drawer-menu li{ margin:10px 0; }
.drawer-menu a{
  color:#fff; text-decoration:none; font-weight:600; display:block; padding:8px 0;
  font-size:clamp(16px,4.2vw,20px);
}
.drawer-cta{
  display:block; width:100%; margin-top:18px; text-align:center;
  background:#8c6143; border-radius:8px; padding:10px 0; color:#fff; font-weight:700;
}

/* ===== موبايل ===== */
@media (max-width: 992px){
  .main-nav{ display:none !important; }
  .header-cta{ display:none !important; }
  .nav-toggle{ display:block !important; }

  .site-logo img, .custom-logo{ height:70px;        margin-top: -90px;
 }
 
 .wa-ico
 {
    display: block;
    width: 28px!important;
    height: 92px!important;
    object-fit: contain;
    margin-bottom: 103px!important;
}
  .header-wrap{ padding:12px 20px; }
}

/* ===== ديسكتوب: اخفي الدرج ===== */
@media (min-width: 993px){
  .mobile-drawer, .drawer-backdrop{ display:none !important; }
}
