:root{
  --bg:#0b0b0c;
  --panel:#101012;
  --panel2:#0f0f11;
  --text:#f4f1ea;
  --muted:#bdb7aa;
  --gold:#d6b36a;
  --gold2:#b88b3d;
  --line:rgba(214,179,106,.22);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;

  /* ارتفاع الهيدر للـ scroll padding */
  --nav-h: 78px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  scroll-behavior:smooth;
  scroll-padding-top: var(--nav-h);
}
body{
  margin:0;
  font-family:"Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 80% 0%, rgba(214,179,106,.12), transparent 55%),
              radial-gradient(900px 450px at 10% 30%, rgba(214,179,106,.08), transparent 60%),
              var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px, calc(100% - 40px)); margin-inline:auto}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:12px 18px;border-radius:14px;border:1px solid transparent;
  font-weight:700;letter-spacing:.2px;cursor:pointer;user-select:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--gold{
  background:linear-gradient(180deg, var(--gold), var(--gold2));
  color:#111;
  box-shadow: 0 12px 30px rgba(214,179,106,.18);
}
.btn--outline{background:rgba(0,0,0,.25); border-color:rgba(214,179,106,.5); color:var(--text)}
.btn--block{width:100%}
.btn--sm{padding:10px 14px;border-radius:12px}
.btn--lg{padding:14px 20px;border-radius:16px}
.btn:hover{box-shadow:0 16px 40px rgba(0,0,0,.4)}
.btn:focus-visible{outline:2px solid rgba(214,179,106,.55); outline-offset:3px}

/* Nav */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:50;
  background:rgba(10,10,11,.18);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(214,179,106,.12);
}
.nav--solid{background:rgba(10,10,11,.85)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.brand__name{font-family:"Noto Kufi Arabic", "Cairo"; font-weight:700; font-size:14px; line-height:1.1}
.brand__sub{font-family:"Cinzel"; letter-spacing:.18em; font-size:11px; color:var(--muted); margin-top:3px}
.menu{display:flex;align-items:center;gap:18px}
.menu a{color:var(--muted); font-weight:700; font-size:14px; padding:8px 10px; border-radius:12px; border:1px solid transparent}
.menu a:hover{color:var(--text); border-color:rgba(214,179,106,.18); background:rgba(0,0,0,.18)}
.menu a.is-active{color:var(--text); border-color:rgba(214,179,106,.28); background:rgba(214,179,106,.08)}

.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(214,179,106,.18);
  background:rgba(0,0,0,.25); cursor:pointer; padding:10px;
}
.burger span{display:block;height:2px;background:var(--text);margin:5px 0;border-radius:2px;opacity:.9}
.mobile{
  padding:12px 20px 18px; border-bottom:1px solid rgba(214,179,106,.12);
  background:rgba(10,10,11,.92);
}
.mobile a{display:block;padding:12px 10px;border-radius:12px;color:var(--muted);font-weight:800}
.mobile a:hover{background:rgba(214,179,106,.08);color:var(--text)}

/* Hero */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden}
.hero__slides{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero__slides .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.05);
  transition:opacity 1.2s ease, transform 2.4s ease;
}
.hero__slides .slide.is-active{opacity:1; transform:scale(1.02)}
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background: radial-gradient(900px 500px at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.78) 62%, rgba(0,0,0,.9)),
              linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.86));
}
.hero__content{position:relative; z-index:2; padding-top:88px; padding-bottom:64px; text-align:center}
.hero__badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px; border-radius:999px; border:1px solid rgba(214,179,106,.28);
  background:rgba(0,0,0,.24);
  font-family:"Cinzel"; letter-spacing:.22em; font-size:12px; color:var(--muted)
}
.hero__title{
  margin:16px 0 8px; font-family:"Noto Kufi Arabic"; font-weight:700;
  font-size:clamp(30px, 4.2vw, 54px); line-height:1.15;
}
.hero__tagline{margin:0 auto; max-width:720px; color:rgba(244,241,234,.9); font-size:clamp(15px, 1.6vw, 20px)}
.hero__cta{margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero__hint{margin-top:34px; color:rgba(244,241,234,.75); font-weight:700; font-size:13px; display:inline-flex;gap:10px; align-items:center}
.hero__hint .chev{display:inline-block; animation:bounce 1.2s infinite ease-in-out}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Sections */
.section{padding:74px 0}
.section--alt{background:linear-gradient(180deg, rgba(214,179,106,.05), rgba(0,0,0,0) 60%)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px; margin-bottom:18px}
.section__title{margin:0; font-family:"Noto Kufi Arabic"; font-weight:700; font-size:clamp(22px, 2.4vw, 34px)}
.section__text{color:var(--muted); font-weight:600; line-height:1.9; max-width:680px}
.section__actions{display:flex;gap:10px}
.section__foot{margin-top:18px; text-align:center}
.link{color:var(--gold); font-weight:800}
.link:hover{text-decoration:underline}

.grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:stretch}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{
  border:1px solid rgba(214,179,106,.25); background:rgba(0,0,0,.22);
  color:rgba(244,241,234,.86); padding:10px 12px; border-radius:999px; font-weight:800; font-size:13px
}

.story-card{
  border-radius:var(--radius); padding:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(214,179,106,.18); box-shadow: var(--shadow);
  position:relative; overflow:hidden
}
.story-card__line{
  position:absolute; inset:0;
  background: radial-gradient(500px 200px at 20% 10%, rgba(214,179,106,.14), transparent 60%);
  pointer-events:none
}
.story-card__title{font-family:"Noto Kufi Arabic"; font-weight:700; font-size:18px}
.story-card__text{margin-top:8px; color:var(--muted); line-height:1.9; font-weight:600}
.story-card__divider{height:1px; background:rgba(214,179,106,.18); margin:16px 0}
.story-card__mini{color:rgba(244,241,234,.85); font-weight:800}

/* Carousels */
.iconbtn{
  width:40px;height:40px;border-radius:12px;border:1px solid rgba(214,179,106,.22);
  background:rgba(0,0,0,.22); color:var(--text); font-size:22px; cursor:pointer
}
.iconbtn:hover{border-color:rgba(214,179,106,.45)}

.carousel{display:flex; gap:16px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.card{
  min-width:min(360px, 86vw); scroll-snap-align:center; border-radius:22px; overflow:hidden;
  border:1px solid rgba(214,179,106,.16); background:rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.card__media{position:relative; aspect-ratio: 16/11; background:#111}
.card__media img{width:100%;height:100%;object-fit:cover; filter:contrast(1.02) saturate(1.02)}
.card__name{position:absolute; inset-inline:14px; bottom:14px; display:flex; justify-content:flex-start}
.card__name span{
  padding:10px 12px; border-radius:14px; font-weight:900;
  background:rgba(0,0,0,.35); border:1px solid rgba(214,179,106,.28);
  color:var(--text); backdrop-filter: blur(8px)
}
.card__body{padding:16px}
.card__meta{color:rgba(214,179,106,.9); font-weight:900}
.card__desc{margin:8px 0 14px; color:var(--muted); font-weight:700; line-height:1.8}

/* Spotlight */
.spotlight{
  border-radius:var(--radius); border:1px solid rgba(214,179,106,.18);
  background: radial-gradient(800px 260px at 40% 0%, rgba(214,179,106,.14), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding:22px; display:flex; align-items:center; justify-content:space-between; gap:18px
}
.spotlight__actions{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width: 800px){.spotlight{flex-direction:column; align-items:flex-start}}

/* Features */
.features{display:grid; grid-template-columns: repeat(5, 1fr); gap:12px; margin-top:16px}
.feature{
  border-radius:18px; border:1px solid rgba(214,179,106,.14);
  background:rgba(255,255,255,.02); padding:16px; box-shadow: 0 16px 50px rgba(0,0,0,.35)
}
.feature__icon{color:var(--gold); font-size:20px}
.feature__title{font-family:"Noto Kufi Arabic"; font-weight:800; margin-top:10px}
.feature__text{color:var(--muted); font-weight:700; line-height:1.8; margin-top:6px; font-size:13px}
@media (max-width: 1100px){.features{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 520px){.features{grid-template-columns:1fr}}

/* Testimonials */
.tcarousel{display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none}
.tcarousel::-webkit-scrollbar{display:none}
.tcard{
  min-width:min(340px, 86vw); scroll-snap-align:center; border-radius:18px;
  border:1px solid rgba(214,179,106,.16); background:rgba(255,255,255,.03);
  padding:18px; box-shadow: var(--shadow)
}
.stars{color:var(--gold); font-weight:900; letter-spacing:.12em}
.tcard p{margin:10px 0; color:rgba(244,241,234,.9); font-weight:700; line-height:1.9}
.who{color:var(--muted); font-weight:900}

/* CTA */
.cta{
  padding:66px 0;
  background:
    radial-gradient(900px 320px at 40% 0%, rgba(214,179,106,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.65));
  border-top:1px solid rgba(214,179,106,.10);
  border-bottom:1px solid rgba(214,179,106,.10);
}
.cta__inner{display:flex; align-items:center; justify-content:space-between; gap:18px}
.cta__title{margin:0; font-family:"Noto Kufi Arabic"; font-weight:800; font-size:clamp(22px, 2.6vw, 34px)}
.cta__text{margin:8px 0 0; color:var(--muted); font-weight:700; line-height:1.9}
@media (max-width: 860px){.cta__inner{flex-direction:column; align-items:flex-start}}

/* Footer */
.footer{padding:26px 0; background:rgba(0,0,0,.42)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footer__brand{display:flex; align-items:center; gap:12px}
.footer__logo{width:44px;height:44px;border-radius:12px;object-fit:cover}
.footer__name{font-family:"Noto Kufi Arabic"; font-weight:800}
.footer__sub{font-family:"Cinzel"; letter-spacing:.18em; font-size:11px; color:var(--muted); margin-top:2px}
.footer__links{display:flex; gap:14px; color:var(--muted); font-weight:800}
.footer__links a:hover{color:var(--text)}
.footer__copy{color:rgba(189,183,170,.75); font-weight:800}

/* Floating WhatsApp */
.fab{
  position:fixed; bottom:18px; inset-inline-start:18px; z-index:60;
  padding:12px 14px; border-radius:999px;
  border:1px solid rgba(214,179,106,.25);
  background:rgba(0,0,0,.35);
  color:var(--text); font-weight:900;
  display:flex; align-items:center; gap:10px;
  backdrop-filter: blur(10px);
  box-shadow:0 16px 50px rgba(0,0,0,.45)
}
.fab__dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(180deg, var(--gold), var(--gold2));
  box-shadow:0 0 16px rgba(214,179,106,.6)
}

/* Pages */
.page{padding-top: var(--nav-h)}
.pagehead{padding:46px 0 14px}
.pagehead__title{margin:0; font-family:"Noto Kufi Arabic"; font-weight:800; font-size:clamp(28px, 3.6vw, 44px)}
.pagehead__sub{margin:10px 0 0; color:var(--muted); font-weight:700; line-height:1.9; max-width:760px}

.products-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
@media (max-width: 900px){.products-grid{grid-template-columns:1fr}}
.pitem{
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(214,179,106,.16);
  background:rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.pitem__img{position:relative; aspect-ratio: 16/11}
.pitem__img img{width:100%;height:100%;object-fit:cover}
.pitem__name{
  position:absolute; bottom:14px; inset-inline:14px;
  display:inline-flex; padding:10px 12px; border-radius:14px;
  background:rgba(0,0,0,.35); border:1px solid rgba(214,179,106,.28);
  font-weight:900; backdrop-filter: blur(8px)
}
.pitem__body{padding:16px}
.pitem__tags{color:rgba(214,179,106,.9); font-weight:900}
.pitem__desc{margin:8px 0 12px; color:rgba(244,241,234,.92); font-weight:800; line-height:1.9}
.notes{color:var(--muted); font-weight:700; line-height:1.9; font-size:14px}

/* Quiz */
.quiz{max-width:920px}
.quiz__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.quiz__step{color:var(--muted); font-weight:900}
.progress{
  flex:1; height:10px; background:rgba(255,255,255,.06); border-radius:999px;
  overflow:hidden; border:1px solid rgba(214,179,106,.12)
}
.progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(180deg, var(--gold), var(--gold2));
  transition:width .35s ease
}

.qbox{
  border-radius:22px; border:1px solid rgba(214,179,106,.16);
  background:rgba(255,255,255,.03); box-shadow:var(--shadow); padding:18px
}
.qtitle{font-family:"Noto Kufi Arabic"; font-weight:800; font-size:18px; margin:0 0 10px}
.qgrid{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
@media (max-width: 700px){.qgrid{grid-template-columns:1fr}}

/* ✅ تعريف واحد لـ .opt حتى ما يصير تضارب */
.opt{
  width: 100%;
  border-radius:18px;
  padding:14px;
  border:1px solid rgba(214,179,106,.14);
  background:rgba(0,0,0,.22);
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  text-align:right;
}
.opt:hover{border-color:rgba(214,179,106,.35)}
.opt.is-selected{
  border-color:rgba(214,179,106,.55);
  background:rgba(214,179,106,.10);
  transform:translateY(-1px)
}
.opt__t{font-weight:900}
.opt__d{margin-top:6px; color:var(--muted); font-weight:700; line-height:1.8; font-size:13px}

.quiz__actions{display:flex; justify-content:space-between; gap:10px; margin-top:14px}

/* Results */
.result{margin-top:18px}
.rlist{display:grid; gap:12px}
.ritem{
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(214,179,106,.16);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow)
}
.ritem__top{display:grid; grid-template-columns: 180px 1fr; gap:14px}
@media (max-width: 700px){.ritem__top{grid-template-columns:1fr}}
.rimg{aspect-ratio: 4/3; background:#111}
.rimg img{width:100%;height:100%;object-fit:cover}
.rbody{padding:14px}
.rname{
  font-family:"Noto Kufi Arabic"; font-weight:900; font-size:18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px
}
.rpct{color:var(--gold); font-weight:900}
.rdesc{margin-top:6px; color:var(--muted); font-weight:700; line-height:1.9}
.bar{
  height:10px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden;
  border:1px solid rgba(214,179,106,.12); margin-top:10px
}
.bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(180deg, var(--gold), var(--gold2));
  transition:width .6s ease
}
.result__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* Responsive */
@media (max-width: 980px){
  .menu{display:none}
  .burger{display:block}
}

/* Product slider */
.product-slider img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

/* FAQ */
.faq{max-width: 900px; margin: 0 auto;}
.faq__item{
  border: 1px solid rgba(214,179,106, 0.25);
  border-radius: 16px;
  overflow: hidden;
  margin: 12px 0;
  background: rgba(0,0,0,0.35);
}
.faq__q{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  text-align: right;
}
.faq__icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214,179,106,0.45);
  border-radius: 999px;
  color: var(--gold);
  flex: 0 0 auto;
  transition: transform .25s ease;
}
.faq__a{
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  color: rgba(244,241,234,0.85);
  line-height: 1.9;
  transition: max-height .35s ease, padding .25s ease;
}
.faq__item.is-open .faq__a{
  max-height: 260px;
  padding: 0 16px 16px;
}
.faq__item.is-open .faq__icon{transform: rotate(45deg);}

/* Cards click safe */
.pitem,
.pitem *{pointer-events:auto;}
.pitem::before,
.pitem::after{pointer-events:none;}

/* Modal */
.modal{ position: fixed; inset: 0; z-index: 9999; }
.modal[hidden]{ display:none; }

.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position: relative;
  width: min(980px, calc(100% - 24px));
  margin: 70px auto;
  border-radius: 22px;
  border: 1px solid rgba(214,179,106,0.25);
  background: rgba(12,12,14,0.96);
  box-shadow: 0 18px 70px rgba(0,0,0,0.55);
  overflow: hidden;
}
.modal__close{
  position:absolute; top: 10px; left: 12px;
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(214,179,106,0.28);
  background: rgba(214,179,106,0.08);
  color: var(--gold);
  font-size: 26px;
  cursor: pointer;
}
.modal__grid{display:grid; grid-template-columns: 1.05fr 1fr;}
.modal__media{
  background: radial-gradient(circle at top, rgba(214,179,106,0.12), transparent 55%);
  padding: 22px;
}
.modal__media img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(214,179,106,0.18);
}
.modal__content{padding: 28px 22px;}
.modal__title{font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 10px;}
.modal__tags{color: rgba(214,179,106,0.9); margin-bottom: 12px;}
.modal__desc{color: rgba(244,241,234,0.86); line-height: 1.9; margin-bottom: 14px;}
.modal__notes{
  border-top: 1px solid rgba(214,179,106,0.18);
  padding-top: 12px;
  color: rgba(244,241,234,0.85);
  line-height: 1.9;
}
.modal__notes b{ color: var(--gold); }
.modal__actions{display:grid; gap: 10px; margin-top: 18px;}

@media (max-width: 860px){
  .modal__panel{ margin: 54px auto; }
  .modal__grid{ grid-template-columns: 1fr; }
  .modal__media img{ height: 320px; }
}

/* Product page layout */
.product__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 34px;
  margin-top: 16px;
  align-items: start;
}
.product__media img{
  width:100%;
  height: 520px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(214,179,106,0.22);
  box-shadow: 0 16px 60px rgba(0,0,0,0.45);
}
.product__title{ font-size: 34px; margin: 6px 0 10px; }
.product__tags{ color: rgba(214,179,106,0.95); margin-bottom: 12px; }
.product__desc{ color: rgba(244,241,234,0.86); line-height: 1.95; margin-bottom: 14px; }
.product__meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 18px;
}
.meta{
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(214,179,106,0.18);
}
.meta__label{ opacity: .8; font-size: 14px; margin-bottom: 6px; }
.meta__value{ font-size: 18px; font-weight: 700; color: var(--gold); }

.product__notes{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(214,179,106,0.15);
}
.product__notes h3{ margin: 0 0 10px; }
.product__notes ul{
  margin: 0;
  padding: 0 18px 0 0;
  color: rgba(244,241,234,0.86);
  line-height: 1.95;
}
@media (max-width: 900px){
  .product__grid{ grid-template-columns: 1fr; }
  .product__media img{ height: 360px; }
}

.pitem-link{
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ✅ Stats (بدون تكرار) */
.stats{
  background: radial-gradient(circle at top, #151518, #0b0b0c);
  text-align: center;
}
.stats__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.stat{
  position: relative;
  padding: 30px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(214,179,106,0.22);
  overflow: hidden;
}
.stat::before{
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle at top, rgba(214,179,106,0.18), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
}
.stat:hover::before{opacity: 1;}
.stat::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 60%;
  height: 180%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(214,179,106,0.12), transparent);
  opacity: 0;
  transition: opacity .35s ease, left .7s ease;
}
.stat:hover::after{opacity: 1; left: 120%;}
.stat__icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--gold);
  border: 1px solid rgba(214,179,106,0.35);
  background: rgba(214,179,106,0.06);
  box-shadow: 0 0 18px rgba(214,179,106,0.18);
}
.stat__num{
  font-size: 46px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  text-shadow: 0 0 18px rgba(214,179,106,0.22);
}
.stat__label{font-size: 16px; color: rgba(255,255,255,0.82);}
@media (max-width: 768px){
  .stats__grid{ grid-template-columns: 1fr 1fr; }
}
.stat__icon svg{
  width: 34px;
  height: 34px;
  fill: var(--gold);
  filter: drop-shadow(0 0 10px rgba(214,179,106,.45));
}

/* target highlight */
.pitem:target{
  outline: 2px solid rgba(214,179,106,0.6);
  box-shadow: 0 0 25px rgba(214,179,106,0.35);
  animation: glow 1.2s ease-in-out;
}
@keyframes glow {
  0% { box-shadow: 0 0 0 rgba(214,179,106,0); }
  50% { box-shadow: 0 0 30px rgba(214,179,106,0.6); }
  100% { box-shadow: 0 0 15px rgba(214,179,106,0.3); }
}

/* Story layout */
.story{ background: linear-gradient(180deg, #0b0b0c, #0e0e10); }
.story__wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.story__text p{
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255,255,255,0.85);
  margin-bottom: 14px;
}
.story__highlight{ color: var(--gold); font-weight: 600; margin-top: 10px; }
.story__image img{
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
@media (max-width: 768px){
  .story__wrap{ grid-template-columns: 1fr; text-align: center; }
}
.product-card img{
  display:block !important;
  width:100%;
  height:auto;
}
.footer {
  margin-top: 80px;
  padding: 40px 0;
  background: #0f0f0f;
  border-top: 1px solid rgba(255,255,255,.1);
}

.footer__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer__brand h3 {
  margin: 0;
  color: #d4af37;
}

.footer__brand p {
  color: #aaa;
  font-size: 14px;
}

.footer__social {
  display: flex;
  gap: 15px;
}

.footer__social img {
  width: 28px;
  height: 28px;
  filter: sepia(1) saturate(5) hue-rotate(10deg);
  transition: transform .3s ease, opacity .3s ease;
}

.footer__social img:hover {
  transform: scale(1.15);
  opacity: 0.8;
}
.social-inline {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ===========================
   Social Icons (Gold #d6b36a)
   Scoped + Safe (won't affect sliders)
   =========================== */

.social-inline{
  display:flex;
  align-items:center;
  gap:12px;
}

.social-inline .social-link{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(214,179,106,.28);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.social-inline .social-link img{
  width:22px;
  height:22px;
  object-fit:contain;

  /* gold look very close to #d6b36a */
  filter:
    brightness(0)
    saturate(100%)
    invert(74%)
    sepia(30%)
    saturate(520%)
    hue-rotate(7deg)
    brightness(1.02);

  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
  opacity:.95;
}

/* Hover: cinematic */
.social-inline .social-link:hover{
  transform: translateY(-2px);
  border-color: rgba(214,179,106,.55);
  box-shadow: 0 14px 30px rgba(214,179,106,.18);
}

.social-inline .social-link:hover img{
  transform: scale(1.18) rotate(2deg);
  filter:
    drop-shadow(0 0 6px rgba(214,179,106,.55))
    drop-shadow(0 0 16px rgba(214,179,106,.35))
    brightness(1.10);
  opacity: 1;
}
.nav__inner--3{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:14px;
}

.nav__actions{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
}

@media (max-width: 980px){
  .nav__inner--3{ grid-template-columns: auto auto; }
  .menu{ display:none; } /* عندك أصلاً للـ mobile */
}



/* --- Blog / Posts additions --- */
.container{width:min(1120px, calc(100% - 40px)); margin-inline:auto}
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 12px;background:#101012;color:#f4f1ea;border:1px solid rgba(214,179,106,.35);border-radius:10px;z-index:9999}

.site-header{position:sticky;top:0;z-index:30;background:rgba(11,11,12,.75);backdrop-filter:blur(10px);border-bottom:1px solid rgba(214,179,106,.18)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;flex-direction:column;gap:2px}
.brand__name{font-family:"Noto Kufi Arabic","Cairo",Arial;font-weight:700}
.brand__tag{font-size:12px;color:var(--muted)}
body.blog header#top .menu{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--text);opacity:.9}
.nav a:hover{opacity:1}
.nav__cta{padding:10px 12px;border-radius:12px;border:1px solid rgba(214,179,106,.35);background:rgba(214,179,106,.08)}

.site-main{padding:26px 0}
.site-footer{border-top:1px solid rgba(214,179,106,.18);padding:22px 0;color:var(--muted)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-inner a{color:var(--text);opacity:.9}

.page-head{margin-bottom:18px}
.page-head h1{margin:0 0 8px}

.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width: 980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.blog-grid{grid-template-columns:1fr}}

.blog-card{background:rgba(16,16,18,.75);border:1px solid rgba(214,179,106,.18);border-radius:18px;overflow:hidden;box-shadow:0 14px 45px rgba(0,0,0,.35)}
.blog-thumb{display:block}
.blog-thumb__img{width:100%;height:170px;object-fit:cover;display:block;background:#0b0b0c}
.blog-card__body{padding:14px}
.blog-card__title{margin:0 0 8px;font-size:18px}
.blog-card__desc{margin:0 0 10px;color:var(--muted);line-height:1.7;font-size:14px}
.blog-card__cta{display:inline-block;padding:10px 12px;border-radius:12px;border:1px solid rgba(214,179,106,.35);background:rgba(214,179,106,.06)}

.post-hero{margin-bottom:18px}
.post-breadcrumbs{margin:0 0 8px;color:var(--muted);font-size:13px}
.post-title{margin:0 0 10px}
.post-desc{margin:0 0 14px;color:var(--muted);line-height:1.8}
.post-thumb{border-radius:18px;overflow:hidden;border:1px solid rgba(214,179,106,.18);background:#0b0b0c}
.post-thumb img{width:100%;height:auto;display:block}
.post-content{line-height:2.05}
.post-content h2{margin-top:26px}
.post-content ul{padding-right:18px}
.post-cta{margin-top:26px;padding:18px;border-radius:18px;border:1px solid rgba(214,179,106,.18);background:rgba(214,179,106,.06)}
.btn{display:inline-block;margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(214,179,106,.35);background:rgba(214,179,106,.12)}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  direction: rtl;
  text-decoration: none;
}

.brand_logo {
  width: 48px;
  height: auto;
}

.brand_text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
}

.brand_name {
  font-size: 18px;
  font-weight: 700;
  color: #d6b36a;
}

.brand_sub {
  font-size: 12px;
  letter-spacing: 2px;
  color: #aaa;
}
/* === Top Nav layout (3 columns) === */
.nav__inner--3{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* وسط المينيو يبقى بالنص */
.nav__inner--3 .menu{
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex: 1;                 /* يخلي المينيو ياخذ الوسط */
}

/* يمين: البراند (اللوغو + النص) */
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  direction: rtl;          /* مهم حتى يكون اللوغو يمين والنص يساره */
  text-decoration: none;
  flex: 0 0 auto;
}

.brand_logo{
  width: 46px;
  height: auto;
  display: block;
}

.brand_text{
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.15;
}

.brand_name{
  font-weight: 800;
  font-size: 18px;
}

.brand_sub{
  font-size: 12px;
  letter-spacing: 2px;
  opacity: .8;
}

/* يسار: الأزرار والسوشيال */
.nav__actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.brand * { position: static !important; }
.brand img { margin: 0 !important; }
header.nav .brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  direction: rtl !important;
  text-decoration: none !important;
}

header.nav .brand .brand_logo{
  width: 46px !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

header.nav .brand .brand_text{
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  line-height: 1.15 !important;
}

header.nav .nav__inner--3{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

header.nav .nav__inner--3 .menu{
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
}

header.nav .nav__actions{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
/* Force brand row */
header#top a.brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  direction: rtl !important;
}

/* Kill any layout breakers */
header#top a.brand,
header#top a.brand *{
  float: none !important;
  position: static !important;
  transform: none !important;
}

/* Ensure children behave */
header#top a.brand .brand_logo{
  display: block !important;
  width: 46px !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

header#top a.brand .brand_text{
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
}
/* ===== FIX: Header brand (logo + text) alignment =====
   Goal: logo on the RIGHT, text on the LEFT
   Put this at the VERY END of styles.css
*/
header#top a.brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-direction: row !important; /* logo right, text left */
  direction: rtl !important;
  text-decoration:none !important;
}

header#top a.brand,
header#top a.brand *{
  float:none !important;
  position:static !important;
  transform:none !important;
}

header#top a.brand .brand_logo{
  width:46px !important;
  height:auto !important;
  display:block !important;
  flex:0 0 auto !important;
  margin:0 !important;
}

header#top a.brand .brand_text{
  display:flex !important;
  flex-direction:column !important;
  line-height:1.15 !important;
  text-align:right !important;
  margin:0 !important;
}

header#top a.brand .brand_name{
  font-weight:800 !important;
  font-size:18px !important;
  color:#d6b36a !important;
  margin-bottom:4px !important;   /* ⭐ المسافة المهمة */
}

header#top a.brand .brand_sub{
  font-size:12px !important;
  letter-spacing:2px !important;
  opacity:.85 !important;
}
/* ===== Blog (match site style) ===== */
.blog-header{
  margin: 22px 0 14px;
}
.blog-title{
  font-size: 26px;
  margin: 0 0 6px;
}
.blog-desc{
  margin: 0;
  opacity: .8;
}

.post-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.post-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(214,179,106,.22);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.post-card a{
  display:block;
  padding: 16px;
}

.post-card h2{
  margin: 0 0 8px;
  font-size: 18px;
}

.post-card p{
  margin: 0;
  opacity: .8;
  line-height: 1.8;
}

.post-meta{
  margin-top: 10px;
  font-size: 12px;
  opacity: .75;
}

/* Responsive */
@media (max-width: 980px){
  .post-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .post-grid{ grid-template-columns: 1fr; }
}
.article{
  max-width: 820px;
  margin: 26px auto;
}

.article h1{
  margin: 0 0 10px;
  font-size: 30px;
}

.article-meta{
  opacity: .75;
  font-size: 13px;
  margin-bottom: 18px;
}

.article-content{
  line-height: 2;
  font-size: 16px;
}

.article-content img{
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(214,179,106,.18);
}
/* Fix horizontal scroll on blog */
body.blog{
  overflow-x: hidden;
}

body.blog img, body.blog svg{
  max-width: 100%;
  height: auto;
}
/* ===== Blog layout stabilization (no shifting) ===== */
html, body { max-width: 100%; overflow-x: hidden; }

body.blog{
  direction: rtl;
  width: 100%;
}

/* خلي main والفوتر طبيعيين */
body.blog .site-main,
body.blog .site-footer,
body.blog .site-header{
  width: 100%;
  display: block;
}

/* أهم سطرين ضد الزحف: استخدام margin-inline/padding-inline */
body.blog .site-main > .container,
body.blog .site-footer .container,
body.blog .site-header .container{
  max-width: 1100px;       /* عدّلها إذا موقعك يستخدم رقم ثاني */
  margin-inline: auto;
  padding-inline: 16px;
}

/* الهيدر ما يدز عناصره خارج الشاشة */
body.blog .header-inner{ 
  width: 100%;
  flex-wrap: wrap;
}

/* صور/كود ما يسببون مشاكل */
body.blog img, body.blog svg { max-width: 100%; height: auto; }
body.blog pre { overflow-x: auto; max-width: 100%; }
body.blog .article-content { overflow-wrap: anywhere; }
/* ===== BLOG ONLY: header + layout (no shifting) ===== */
body.blog .container{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:18px;
}

body.blog .site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(11,11,12,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(214,179,106,.18);
}

body.blog .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  flex-wrap:wrap;           /* مهم حتى ما يدز عناصر برة */
}

/* brand في المدونة فقط */
body.blog .site-header .brand{
  display:flex;
  align-items:center;
  gap:12px;
  direction:rtl;
  text-decoration:none;
}

body.blog .site-header .brand_logo{
  width:46px;
  height:auto;
  display:block;
  flex:0 0 auto;
}

body.blog .site-header .brand_text{
  display:flex;
  flex-direction:column;
  text-align:right;
  line-height:1.15;
}

body.blog .site-header .brand_name{
  font-weight:800;
  font-size:18px;
  color:#d6b36a;
  margin:0 0 4px;
}

body.blog .site-header .brand_sub{
  font-size:12px;
  letter-spacing:2px;
  opacity:.85;
  margin:0;
}

/* nav في المدونة */
body.blog .site-header .nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

body.blog .site-main{ padding:26px 0; }
body.blog .site-footer{ border-top:1px solid rgba(214,179,106,.18); padding:22px 0; color:var(--muted); }

body.blog{ overflow-x:hidden; }
body.blog img, body.blog svg{ max-width:100%; height:auto; }
body.blog pre{ overflow-x:auto; max-width:100%; }
body.blog .blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:980px){ body.blog .blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ body.blog .blog-grid{ grid-template-columns:1fr; } }
/* ===== FIX BLOG ALIGNMENT (FINAL FIX) ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body.blog {
  direction: rtl;
  margin: 0;
  padding: 0;
}

/* ثبّت كل شي بالنص */
body.blog .site-header,
body.blog .site-main,
body.blog .site-footer {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* هذا السطر يحل الزحف فعلياً */
body.blog .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
  box-sizing: border-box;
}

/* منع أي عنصر يطلع برا */
body.blog * {
  box-sizing: border-box;
}
/* ===== BLOG ONLY (SAFE) ===== */
html, body{ max-width:100%; overflow-x:hidden; }

body.blog{ overflow-x:hidden; }

/* لا تغيّر .nav العام، فقط اضبط الـ spacing تحت الهيدر */
body.blog .site-main,
body.blog main{
  padding-top: var(--nav-h);
}

/* إذا تريد عرض مختلف للمدونة فقط */
body.blog .container{
  width: min(1120px, calc(100% - 40px));
  margin-inline:auto;
}
/* ensure nav inner never causes horizontal shift */
header#top .nav__inner{
  width: 100%;
}
header#top .nav__inner--3{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
header#top .menu{
  flex: 1 1 auto;
  justify-content: center;
}
/* ===== FIX: Header width not full/extended ===== */
header.nav{
  left: 0;
  right: 0;
  width: 100%;
}

header.nav .container{
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

header.nav .nav__inner{
  width: 100%;
  max-width: 100%;
}
/* ===== FIX: Header width not full/extended ===== */
header.nav{
  left: 0;
  right: 0;
  width: 100%;
}

header.nav .container{
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

header.nav .nav__inner{
  width: 100%;
  max-width: 100%;
}
/* =========================
   FINAL FIX: HOME HEADER (LOCKED)
   Put this at VERY END of styles.css
   ========================= */

/* لا تخلي شي يمد الصفحة أفقياً */
html{ overflow-x: clip; }
body{ overflow-x: clip; }

/* ثبّت الهيدر بعرض الشاشة */
header.nav{
  position: fixed;
  top: 0;
  inset-inline: 0;
  width: 100%;
}

/* ثبّت محتوى الهيدر داخل الكونتينر */
header.nav > .container{
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

/* لا تسمح للـ inner يطلع برا */
header.nav .nav__inner{
  width: 100%;
  min-width: 0;
}

/* ✅ الهيدر الرئيسي: 3 أعمدة (brand / menu / actions) */
header#top .nav__inner--3{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* المينيو يبقى بالوسط وما يسبب تمدد */
header#top .menu{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

/* brand بالهيدر الرئيسي فقط (لا تخلي تعريفات المدونة تغيره) */
header#top a.brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-direction: row !important;
  direction: rtl !important;
  flex: 0 0 auto !important;
}

/* actions يسار */
header#top .nav__actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:0 0 auto !important;
  flex-wrap: wrap !important;
}

/* موبايل */
@media (max-width: 980px){
  header#top .menu{ display:none !important; }
}
/* =========================
   HOTFIX: Restore header + gold button effects
   Put at VERY END of styles.css
   ========================= */

/* Header width control */
header.nav,
.nav{
  left: 0;
  right: 0;
  width: 100%;
}

/* Keep content centered like before */
header.nav .container,
.nav .container,
.container{
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

/* Ensure inner layout doesn't stretch weird */
.nav__inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Restore gold button */
.btn{
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn--gold{
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  color: #111;
  box-shadow: 0 12px 30px rgba(214,179,106,.18);
}
.btn--gold:hover{
  box-shadow: 0 16px 40px rgba(214,179,106,.22);
}
.btn:active{
  transform: translateY(1px);
}
/* ===== Header fix (safe patch) ===== */

/* 1) قفل عرض الـ container حتى ما يتمدد */
.container{
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* 2) الهيدر نفسه */
header.nav, .nav{
  width: 100%;
}

/* 3) ترتيب محتوى الهيدر */
.nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;           /* ارتفاع ثابت محترم */
}

/* 4) منطقة البراند/اللوغو لا تتمدد زيادة */
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;               /* مهم حتى ما توسّع الهيدر */
}

/* 5) صورة اللوغو لا تكبر */
.brand img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

/* 6) روابط النافبار: قابلة للطي */
.nav__links{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* منع الكلمات الطويلة/الروابط من توسيع الهيدر */
.nav__links a{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 140px;           /* عدلها إذا تريد */
}

/* 7) زر الواتساب لا يتمدد */
.nav .btn, .nav__inner .btn{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 8) حماية عامة لأي صورة داخل الهيدر */
header img{
  max-width: 100%;
  height: auto;
}

/* ===== Header 3-columns fix for your markup ===== */

.nav { width: 100%; }

/* container مضبوط */
.nav .container{
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* ثلاث أعمدة */
.nav__inner{
  display: grid;
  grid-template-columns: auto 1fr auto; /* brand | menu | actions */
  align-items: center;
  gap: 14px;
  min-height: 72px;
}

/* مهم جداً: يمنع العناصر من توسيع الشبكة */
.nav__inner > *{ min-width: 0; }

/* يمين: البراند */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.brand_logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display:block;
  flex: 0 0 auto;
}
.brand_text{ min-width:0; }
.brand_name, .brand_sub{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* وسط: المينيو — هذا غالباً سبب التوسّع */
.menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;          /* يمنع توسع الهيدر */
  flex-wrap: wrap;           /* يخلي الروابط تنزل سطر إذا احتاج */
}
.menu a{
  white-space: nowrap;
}

/* يسار: واتساب + سوشيال */
.nav__actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  min-width: 0;
}
#whatsappTop{ white-space: nowrap; flex: 0 0 auto; }

/* سوشيال داخل الهيدر */
.social-inline{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 0 0 auto;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
}
.social-link img{
  width: 18px;
  height: 18px;
  display:block;
}

/* موبايل: نخلي المينيو تختفي حتى ما تخرب */
@media (max-width: 900px){
  .nav__inner{
    grid-template-columns: auto auto;   /* brand | actions */
  }
  .menu{ display:none; }
}

/* حماية عامة */
.nav img{ max-width:100%; height:auto; }
@media (max-width: 900px){
  .nav__links{ display:none; }
}
/* ===== Header layout v1 (Luxury balanced) ===== */
.nav__inner{
  display:grid;
  grid-template-columns: auto 1fr auto; /* brand | menu | actions */
  align-items:center;
  gap:16px;
  min-height:78px;
}
.nav__inner > *{min-width:0}

/* brand */
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand_logo{width:44px;height:44px;object-fit:contain;display:block}
.brand_text{line-height:1.05; min-width:0}
.brand_name{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px}
.brand_sub{opacity:.85; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px}

/* menu */
.menu{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;          /* إذا ضاقت ينزل سطر */
}
.menu a{white-space:nowrap; opacity:.92}
.menu a:hover{opacity:1}

/* actions */
.nav__actions{display:flex; align-items:center; justify-content:flex-end; gap:10px}
#whatsappTop{white-space:nowrap}

/* social */
.social-inline{display:flex; align-items:center; gap:8px}
.social-link{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.social-link img{width:18px;height:18px;display:block}

/* mobile */
@media (max-width: 900px){
  .nav__inner{grid-template-columns: auto auto}
  .menu{display:none;}
}
/* ===== Header positions A: two-row layout ===== */
.nav__inner{
  display:grid;
  grid-template-columns: auto 1fr auto;  /* brand | spacer/menu | actions */
 
  align-items:center;
  gap:10px 16px;
}

/* row 1 */
.brand{ grid-column: 1; grid-row: 1; }
.nav__actions{ grid-column: 3; grid-row: 1; justify-self:end; }

/* row 2 */
.menu{ grid-column: 1 / 4; grid-row: 2; justify-content:center; }

/* خليك بالسطر الثاني السوشل يسار والمينيو وسط */
.nav__actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav__actions .social-inline{ margin-inline-start:10px; } /* يم الزر */
@media (max-width: 900px){
  .menu{ display:none; } /* إذا عندك منيو موبايل لاحقاً */
}
/* =========================
   Header 3-column (RTL) FIX
   ضع هذا آخر styles.css
========================= */

/* تأكد الـ container مضبوط */
.container{
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* الهيدر */
header.nav{
  width: 100%;
}

/* 3 أعمدة: Brand | Menu | Actions */
.nav__inner--3{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
}

/* يمين: البراند */
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;   /* في RTL هذا يعني يمين */
  min-width: 0;
}

.brand_logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

.brand_text{
  display: grid;
  line-height: 1.05;
}

.brand_name{
  font-weight: 700;
  letter-spacing: 0;
}

.brand_sub{
  opacity: .85;
  font-size: .85rem;
  margin-top: 2px;
}

/* وسط: المينيو */
.menu{
  display: flex;
  justify-content: center;  /* يثبت بالوسط */
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: nowrap;
}

.menu a{
  white-space: nowrap;
}

/* يسار: الأكشنز (واتساب + سوشل) */
.nav__actions{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;       /* في RTL هذا يعني يسار */
  min-width: 0;
}

/* السوشيال inline */
.social-inline{
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-link img{
  width: 22px;
  height: 22px;
  display: block;
}

/* حماية من تمدد عناصر */
.menu, .nav__actions, .brand{
  overflow: hidden;
}

/* موبايل: نخلي القائمة تتحول لسطر/تختفي حسب رغبتك */
@media (max-width: 980px){
  .menu{
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar{ display:none; }
}

@media (max-width: 720px){
  /* إذا تحب: اخفاء روابط المينيو بالموبايل (اختياري) */
  /* .menu{ display:none; } */
  .nav__inner--3{
    grid-template-columns: 1fr auto; /* brand + actions */
  }
  .menu{ grid-column: 1 / -1; justify-content: center; }
}
/* ===== Luxury header: 3 equal columns (no edge hugging) ===== */
header#top .nav__inner.nav__inner--3{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important; /* بدل auto 1fr auto */
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 0 !important;
}

/* يمين: البراند داخل عموده لكن مو ملزوك بالحافة */
header#top .brand{
  justify-self: center !important;       /* كان start */
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* وسط: المينيو يبقى بالوسط */
header#top .menu{
  justify-self: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
}

/* يسار: الأكشنز داخل عمودها لكن مو ملزوكة بالحافة */
header#top .nav__actions{
  justify-self: center !important;       /* كان end */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* إذا الروابط نازلة شوي */
header#top .menu a{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  padding: 8px 10px !important;
}
/* ===== Fix: menu links drop down ===== */
header#top .menu{
  align-self: center !important;     /* يثبتها عموديًا بالنص */
  padding: 0 !important;
  margin: 0 !important;
}

header#top .menu a{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;         /* أهم شي */
  padding: 6px 10px !important;      /* يقلل النزول */
  margin: 0 !important;
}

/* إذا عندك min-height عالي بالهيدر قلله */
header#top .nav__inner.nav__inner--3{
  min-height: 64px !important;       /* عدّلها 60-68 حسب ذوقك */
  padding: 8px 0 !important;
}
header#top .menu{ transform: translateY(-2px) !important; }
/* ===== FIX MENU DROP (FINAL) ===== */

header#top .nav__inner,
header#top .nav__inner--3{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: 1fr !important; /* ← هذا هو الحل */
  align-items: center !important;
  min-height: 64px !important;
  padding: 8px 0 !important;
}
header#top .menu{
  grid-row: 1 / 2 !important;
  align-self: center !important;
}
header#top .menu a{
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .5px;
}
header#top .menu a{
  transition: color .2s ease, transform .2s ease;
}

header#top .menu a:hover{
  color: var(--gold);
  transform: translateY(-1px);
}
/* =========================
   Header Typography (GLOBAL)
   Menu + WhatsApp + Mobile menu
========================= */

/* المنيو (ديسكتوب) */
header#top .menu a{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  letter-spacing: .4px;
  line-height: 1 !important;
}

/* زر واتساب */
header#top #whatsappTop{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  line-height: 1 !important;
}

/* منيو الموبايل */
#mobileMenu a{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .35px;
  line-height: 1.2 !important;
}
/* ===== GLOBAL FONT FIX ===== */
html,
body,
header,
nav,
main,
section,
a,
button,
input,
textarea {
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
}
header#top,
header#top * {
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
}
/* ===== GLOBAL FONT (match home) ===== */
:root{
  --font-ar: "Cairo", "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --font-en: "Cinzel", "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

html, body{
  font-family: var(--font-ar);
  font-weight: 400;
}

/* خلي كل شيء يرث نفس الخط */
body *{
  font-family: inherit;
}

/* إذا عندك عناوين إنجليزية تحبها Cinzel */
h1, h2, h3, .brand__sub{
  font-family: var(--font-en);
}
/* =========================
   Quiz: fix black options text
========================= */

/* إذا عندك صفحة اختبار بكلاس معيّن ضيّق السكوپ هنا (اختياري)
body.quiz, .quiz, #quiz { ... }
*/

/* 1) عناصر الفورم عامة */
input, select, textarea, button, label {
  color: var(--text);
}

/* 2) Select / Dropdown */
select{
  color: var(--text) !important;
  background: rgba(16,16,18,.96) !important;
  border: 1px solid rgba(214,179,106,.25) !important;
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}

/* قائمة الخيارات داخل select (تشتغل بأغلب المتصفحات) */
select option{
  color: var(--text) !important;
  background: #101012 !important;
}

/* 3) Labels للاختيار (radio/checkbox) */
label{
  color: var(--text) !important;
}

/* لو عندك خيارات على شكل أزرار/كروت */
.option, .choice, .quiz-option, .answer{
  color: var(--text) !important;
}

/* 4) Focus جميل وواضح */
select:focus, input:focus, textarea:focus{
  box-shadow: 0 0 0 3px rgba(214,179,106,.22) !important;
  border-color: rgba(214,179,106,.40) !important;
}

/* 5) Placeholders */
input::placeholder, textarea::placeholder{
  color: rgba(244,241,234,.65);
}
/* =========================
   Quiz Result: prevent huge images
========================= */

/* غطّي أغلب الحالات: صورة داخل نتيجة/نتائج/مخرجات */
#quizResult img,
.result img,
.results img,
.quiz-result img,
.result-card img,
#result img{
  width: 100% !important;
  max-width: 520px !important;     /* أقصى عرض للصورة */
  height: auto !important;
  display: block !important;
  margin: 12px auto 0 !important; /* توسيط */
  border-radius: 18px;
  border: 1px solid rgba(214,179,106,.22);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  object-fit: cover;
}

/* إذا تحب ارتفاع ثابت أجمل (اختياري) */
#quizResult img,
.result img,
.results img,
.quiz-result img,
.result-card img,
#result img{
  max-height: 520px;              /* يمنع الطول المبالغ */
}

/* للموبايل: خليها أعرض شوي */
@media (max-width: 560px){
  #quizResult img,
  .result img,
  .results img,
  .quiz-result img,
  .result-card img,
  #result img{
    max-width: 100% !important;
    max-height: 420px;
  }
}
/* =========================
   Quiz Results: fix huge images
   Scope: #result #rlist only
========================= */

#result{
  max-width: 980px;
  margin-inline: auto;
}

#result #rlist{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

#result #rlist img{
  width: 100% !important;
  height: 260px !important;        /* يمنع الصور تصير عملاقة */
  object-fit: contain !important;  /* يحافظ على قنينة العطر بدون قص */
  display: block !important;

  border-radius: 18px;
  border: 1px solid rgba(214,179,106,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 14px 45px rgba(0,0,0,.40);
  padding: 10px;
}

/* إذا rlist يحتوي كروت/عناصر */
#result #rlist > *{
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  padding: 12px;
}

/* ريسبونسف */
@media (max-width: 980px){
  #result #rlist{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #result #rlist img{
    height: 240px !important;
  }
}

@media (max-width: 560px){
  #result #rlist{
    grid-template-columns: 1fr;
  }
  #result #rlist img{
    height: 220px !important;
  }
}
/* ===== Result animation (force) ===== */
#result{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
}

#result.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* إذا العنصر مخفي فعلاً، خليه بدون انتقال */
#result[hidden]{
  opacity: 0 !important;
  transform: translateY(10px) !important;
}
/* ===============================
   MOBILE HEADER – FINAL FIX
=============================== */
@media (max-width: 768px){

  header.nav {
    background: rgba(10,10,12,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(214,179,106,.15);
  }

  header#top .nav__inner--3 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    height: 64px !important;
  }

  /* LOGO */
  .brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .brand__logo {
    width: 30px !important;
  }

  .brand__name {
    font-size: 14px !important;
    font-weight: 700;
  }

  .brand__sub {
    font-size: 10px;
    opacity: .6;
  }

  /* اخفاء منيو الديسكتوب */
  nav.menu {
    display: none !important;
  }

  /* ACTIONS */
  .nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* زر واتساب */
  #whatsappTop {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 999px;
  }

  /* زر البرغر */
  #burger {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #burger span {
    width: 20px;
    height: 2px;
    margin: 3px 0;
  }

  /* القائمة المنسدلة */
  #mobileMenu {
    position: fixed;
    top: 70px;
    left: 12px;
    right: 12px;
    background: rgba(15,15,18,.98);
    border-radius: 16px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 25px 60px rgba(0,0,0,.6);
  }

  #mobileMenu a {
    display: block;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    color: #fff;
  }

  #mobileMenu a:hover {
    background: rgba(214,179,106,.12);
  }
}
/* ===============================
   MOBILE HEADER – FORCE CLEAN
=============================== */
@media (max-width: 768px){

  /* 1) اخفاء منيو الديسكتوب غصب */
  header#top nav.menu,
  header.nav nav.menu,
  nav#mainMenu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 2) خلي الهيدر سطر واحد */
  header#top .nav__inner--3{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    height:64px !important;
    padding:10px 12px !important;
  }

  /* 3) خلّي اللوغو يمين والأزرار يسار (RTL مضبوط) */
  header#top .brand{ order: 3 !important; min-width:0; }
  header#top .nav__actions{ order: 1 !important; display:flex !important; align-items:center !important; gap:8px !important; }

  /* 4) زر واتساب حجم مرتب */
  header#top #whatsappTop{
    height:34px !important;
    padding:0 12px !important;
    font-size:12px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }

  /* 5) البرغر */
  header#top #burger{
    width:34px !important;
    height:34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  header#top #burger span{
    width:20px !important;
    height:2px !important;
    margin:3px 0 !important;
  }

  /* 6) الموبايل منيو (اللي تفتح بالبرغر) */
  #mobileMenu{
    position:fixed !important;
    top:70px !important;
    left:12px !important;
    right:12px !important;
    z-index:9999 !important;
    background: rgba(15,15,18,.98) !important;
    border:1px solid rgba(214,179,106,.18) !important;
    border-radius:16px !important;
    padding:12px !important;
    box-shadow:0 25px 60px rgba(0,0,0,.6) !important;
  }
  #mobileMenu a{
    display:block !important;
    padding:12px !important;
    border-radius:12px !important;
    font-weight:700 !important;
    color:#fff !important;
    text-decoration:none !important;
  }
  #mobileMenu a:hover{
    background: rgba(214,179,106,.12) !important;
  }
}
@media (max-width: 768px){
  /* تأكيد: البرغر خطوط مو نقاط */
  #burger{
    all: unset;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(214,179,106,.18);
  }

  #burger span{
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: rgba(214,179,106,.95) !important;
    border-radius: 99px !important;
    margin: 3px 0 !important;
  }
}
/* =========================
   FIX MOBILE BURGER ICON
========================= */
@media (max-width: 768px){

  #burger{
    all: unset !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(214,179,106,.25);
  }

  #burger span{
    width: 22px !important;
    height: 2px !important;
    background: #d6b36a !important;
    border-radius: 99px !important;
    display: block !important;
    opacity: 1 !important;
  }

  /* امنع أي ستايل قديم */
  #burger::before,
  #burger::after{
    display: none !important;
    content: none !important;
  }
}
/* =========================
   FINAL MOBILE BURGER TUNE
========================= */
@media (max-width: 768px){

  #burger{
    height: 40px !important;
    width: 40px !important;
    padding: 0 !important;
    gap: 7px !important; /* المسافة بين الخطوط */
    margin-top: 0 !important;
  }

  #burger span{
    width: 22px !important;
    height: 2px !important;
  }

  /* رفع البرغر شوي لفوق */
  header#top .nav__actions{
    align-items: center !important;
  }
}
@media (max-width: 768px){
  header#top .nav__actions{
    display:flex !important;
    flex-direction: row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    flex-wrap: nowrap !important;
  }

  header#top #whatsappTop{
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  header#top #burger{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}
@media (max-width: 768px){

  /* خلي الهيدر Flex واضح */
  header#top .nav__inner,
  header#top .nav__inner--3{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  /* actions يمين/يسار بس بنفس السطر */
  header#top .nav__actions{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }

  /* امنع أي positioning قديم يخلي البرغر يروح للحافة */
  header#top #burger{
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
  }

  /* صغّر زر واتساب بالموبايل حتى ما يكسر السطر */
  header#top #whatsappTop{
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 768px){

  /* البرغر لازم يبين */
  header#top .burger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(214,179,106,.25) !important;
    z-index: 9999 !important;
  }

  header#top .burger span{
    display:block !important;
    width: 20px !important;
    height: 2px !important;
    background: #d6b36a !important;
    border-radius: 2px !important;
  }

  header#top .burger span + span{
    margin-top: 5px !important;
  }
}
/* =========================
   Mobile Header Fix (Burger)
   ========================= */
@media (max-width: 768px){

  /* الهيدر يكون فوق */
  header#top.nav{
    position: relative;
    z-index: 9999;
  }

  /* نخفي منيو الديسكتوب بالموبايل */
  header#top .menu{
    display: none !important;
  }

  /* نثبت ترتيب الهيدر 3 أعمدة */
  header#top .nav__inner--3{
    display: grid !important;
    grid-template-columns: 1fr auto auto !important; /* (يمين) اللوقو - (وسط) واتساب - (يسار) برغر */
    align-items: center !important;
    gap: 10px !important;
  }

  /* زر واتساب لا يصير طويل */
  header#top #whatsappTop{
    white-space: nowrap !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* ✅ البرغر لازم يبين */
  header#top .burger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(214,179,106,.25) !important;
    cursor: pointer !important;
    z-index: 10000 !important;
  }

  header#top .burger span{
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #d6b36a !important;
    border-radius: 2px !important;
  }

  header#top .burger span + span{
    margin-top: 5px !important;
  }
}
/* ===============================
   MOBILE HEADER FIX
================================ */

/* الهيدر */
header.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
}

/* زر البرغر */
.burger {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(214,179,106,.4);
  cursor: pointer;
  z-index: 10000;
}

.burger span {
  width: 22px;
  height: 2px;
  background: #d6b36a;
  border-radius: 2px;
}

/* القائمة المنسدلة */
.mobile-menu {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(10px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 9998;
}

.mobile-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* إخفاء المنيو افتراضياً */
.mobile-menu[hidden] {
  display: none !important;
}
/* إخفاء زر الواتساب في الموبايل فقط */
@media (max-width: 768px) {
  #whatsappTop,
  #whatsappFab {
    display: none !important;
  }
}
/* ===== FORCE header responsive ===== */

/* Desktop/Laptop: اخفاء البرغر + الموبايل منيو */
button.burger,
#burger {
  display: none !important;
}


/* Mobile فقط: اظهار البرغر */
@media (max-width: 900px) {
  button.burger,
  #burger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* اخفاء منيو الديسكتوب بالموبايل */
  nav.menu,
  #mainMenu {
    display: none !important;
  }
}
/* ===== Mobile menu visibility (يحترم hidden) ===== */
#mobileMenu[hidden] {
  display: none !important;
}

/* Desktop/Laptop: نخفي الموبايل منيو */
@media (min-width: 901px) {
  #mobileMenu {
    display: none !important;
  }
}

/* Mobile: شكل القائمة المنسدلة */
@media (max-width: 900px) {
  #mobileMenu {
    display: block;              /* راح يشتغل لما hidden ينشال */
    position: fixed;
    top: 72px;                   /* إذا هيدرك أعلى/أقل عدلها */
    left: 12px;
    right: 12px;
    z-index: 9999;
    background: rgba(10,10,10,.92);
    border: 1px solid rgba(214,179,106,.22);
    border-radius: 16px;
    padding: 10px;
    backdrop-filter: blur(10px);
  }

  #mobileMenu a {
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
  }

  #mobileMenu a:hover {
    background: rgba(214,179,106,.08);
  }
}