/* ==========================================================================
   header.css — الهيدر · القائمة الرئيسية · قائمة الجوال الجانبية
   ========================================================================== */

/* ---------- الهيدر ---------- */
.site-header{
  position:relative;
  z-index:1000;
  background:
    radial-gradient(circle at 95% 0%,rgba(217,170,79,.13),transparent 24%),
    linear-gradient(180deg,#080909,#060707);
  border-bottom:1px solid var(--gold);
}

.main-header{
  height:108px;
  background:rgba(6,7,7,.94);
  backdrop-filter:blur(12px);
}

.header-inner{
  height:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:34px;
}

/* ---------- الشعار ---------- */
.brand{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:250px;
}

.brand-symbol{
  width:84px;
  height:84px;
  display:block;
  object-fit:contain;
}

.brand-copy strong{
  display:block;
  color:#f2ede4;
  font-size:26px;
  font-weight:500;
  letter-spacing:5px;
  direction:ltr;
  line-height:1.15;
}

.brand-copy small{
  display:block;
  margin-top:5px;
  color:var(--gold);
  font-size:13px;
  font-weight:500;
}

/* ---------- القائمة الرئيسية ---------- */
.nav-links{
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  list-style:none;
}

.nav-links a{
  height:100%;
  display:flex;
  align-items:center;
  position:relative;
  color:#e6e2da;
  font-size:13px;
  font-weight:500;
  transition:.3s ease;
}

.nav-links a::after{
  content:"";
  width:0;
  height:2px;
  position:absolute;
  right:50%;
  bottom:20px;
  transform:translateX(50%);
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transition:.3s ease;
}

.nav-links a:hover,
.nav-links a.active{color:var(--gold-light)}

.nav-links a:hover::after,
.nav-links a.active::after{width:100%}

/* ---------- أزرار الهيدر ---------- */
.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.lang-switch{
  min-height:48px;
  padding:0 18px;
  border:1px solid var(--gold);
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  background:rgba(255,255,255,.015);
  direction:ltr;
  font-size:12px;
}

.lang-switch .active{color:var(--gold-light)}

.quote-btn{
  min-height:50px;
  padding:0 28px;
  border:1px solid var(--gold-light);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:#161208;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  font-size:12px;
  font-weight:700;
  transition:.3s ease;
  box-shadow:0 10px 24px rgba(217,170,79,.18);
}

.quote-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(217,170,79,.28)}

.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  border:1px solid var(--gold);
  border-radius:12px;
  color:var(--gold-light);
  background:rgba(255,255,255,.02);
  font-size:20px;
}

/* ---------- طبقة خلفية قائمة الجوال ---------- */
.mobile-overlay{
  position:fixed;
  inset:0;
  z-index:1400;
  background:rgba(0,0,0,.70);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:.3s ease;
}

.mobile-overlay.open{opacity:1;visibility:visible}

/* ---------- قائمة الجوال الجانبية ---------- */
.mobile-menu{
  width:min(390px,88%);
  height:100%;
  position:fixed;
  top:0;
  right:-100%;
  z-index:1500;
  padding:26px 22px;
  border-left:1px solid var(--gold);
  border-radius:26px 0 0 26px;
  background:
    radial-gradient(circle at 88% 8%,rgba(217,170,79,.09),transparent 26%),
    linear-gradient(180deg,#090a0a,#050606);
  box-shadow:-24px 0 55px rgba(0,0,0,.45);
  transition:right .38s ease;
  overflow-y:auto;
}

.mobile-menu.open{right:0}

.mobile-menu-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(217,170,79,.32);
}

.mobile-menu-brand{text-align:center;margin-inline-start:auto}

.mobile-menu-logo{
  width:104px;
  height:132px;
  margin:0 auto 10px;
  position:relative;
  border:2px solid var(--gold);
  border-radius:34px;
  display:grid;
  place-items:center;
}

.mobile-menu-logo::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(217,170,79,.52);
  transform:rotate(45deg);
}

.mobile-menu-logo img{
  width:68%;
  height:68%;
  position:relative;
  z-index:1;
  object-fit:contain;
}

.mobile-menu-brand strong{
  display:block;
  color:var(--gold-light);
  font-size:26px;
  line-height:1.2;
}

.mobile-menu-brand small{
  color:#9c7b40;
  font-size:15px;
}

.close-menu{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border:1px solid var(--gold);
  border-radius:16px;
  color:var(--gold-light);
  background:rgba(255,255,255,.02);
  font-size:25px;
}

.menu-caption{
  margin:22px 0 14px;
  color:#8f8a82;
  font-size:14px;
  font-weight:600;
}

.mobile-links{
  display:grid;
  gap:10px;
  list-style:none;
}

.mobile-links a{
  min-height:76px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#f0ece4;
  background:rgba(255,255,255,.012);
  font-size:18px;
  transition:.25s ease;
}

.mobile-links a i:first-child{
  width:36px;
  color:var(--gold-light);
  font-size:28px;
  text-align:center;
}

.mobile-links a i:last-child{
  color:var(--gold);
  font-size:15px;
}

.mobile-links a.active{
  color:var(--gold-light);
  border-color:var(--gold);
  background:linear-gradient(90deg,rgba(217,170,79,.04),rgba(217,170,79,.20));
  box-shadow:inset -4px 0 0 var(--gold-light);
}

.mobile-menu-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px;
}

.mobile-menu-actions a{
  min-height:72px;
  border:1px solid var(--gold);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--gold-light);
  font-size:18px;
  background:rgba(217,170,79,.025);
}

.mobile-languages{
  margin-top:24px;
  min-height:68px;
  border:1px solid var(--gold);
  border-radius:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  direction:ltr;
}

.mobile-languages a{
  display:grid;
  place-items:center;
  color:#e6e1d8;
  font-size:18px;
  font-weight:700;
}

.mobile-languages .active{
  color:var(--gold-light);
  background:linear-gradient(90deg,rgba(217,170,79,.05),rgba(217,170,79,.18));
  border-left:1px solid var(--gold);
}

.mobile-menu-footer{
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid rgba(217,170,79,.28);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.mobile-menu-socials{display:flex;gap:10px}

.mobile-menu-socials a{
  width:42px;
  height:42px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold-light);
}

.mobile-menu-footer span{
  color:#a38446;
  font-size:10px;
  direction:ltr;
}