:root{
  --navy:#0B1C2D;
  --gold:#C6A75E;
  --dark:#111;
  --muted:#6b7280;
  --bg:#ffffff;
  --soft:#f5f2ee;
  --radius:22px;
}

*{box-sizing:border-box}
body{
  margin:0;
  /* Default (LTR): Montserrat. RTL override below sets Cairo. */
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#111;
  line-height:1.6;
}

/* Global language direction mapping */
html[dir="rtl"] body{font-family:"Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
html[dir="ltr"] body{font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
a{color:inherit;text-decoration:none}

/* عام: هنوسع الكونتينر زي المرجع */
.container{
  max-width:1400px;
  margin:0 auto;
  padding:0 22px;
}

/* =========================
   Header (match original)
   LTR: logo left | nav center | actions right
   RTL: logo right | nav center | actions left
========================= */
.site-header{
  position:fixed;left:0;top:0;right:0;z-index:1000;
  padding:14px 0;
  background:rgba(165,165,165,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:background .25s ease, box-shadow .25s ease, padding .25s ease;
}

.site-header.scrolled{
  background:rgba(120,120,120,.85);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  padding:10px 0;
}

/* Make sure brand is hard-left and actions hard-right */
.site-header .header-inner{
  display:grid;
  align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:22px;
}

.brand{justify-self:start;}
.header-actions{justify-self:end;}

html[dir="rtl"] .brand{justify-self:end;}
html[dir="rtl"] .header-actions{justify-self:start;}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:0;
  min-width:unset;
}

.brand-logo{
  height:75px;          /* مطابق تقريبًا للمرجع */
  max-height:75px;
  width:auto;
  display:block;
  pointer-events:auto;
  object-fit:contain;
}
.site-header.scrolled .brand-logo{height:70px;max-height:70px;}

/* محاذاة الأطراف حسب الاتجاه */
html[dir="ltr"] .brand{justify-self:start;}
html[dir="rtl"] .brand{justify-self:end;}

/* Nav (center) */
.nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px;
}

/* Wrap nav as one grid item (keeps 3-column header layout) */
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-wrap .nav{justify-content:center;}
/* =========================================================
   ✅ Mobile menu (Overlay + Side Panel)
========================================================= */
.nav-mobile{
  position:fixed;
  inset:0;
  z-index:1400;
  display:none;
  pointer-events:none;
}
body.ea-nav-open .nav-mobile{display:block;
  pointer-events:auto;}

.nav-mobile__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.50);
}

.nav-mobile__panel{
  position:absolute;
  top:0;
  bottom:0;
  inset-inline-end:0; /* يمين في LTR */
  width:min(420px, 86vw);
  background:rgba(35,35,35,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  padding:84px 34px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
html[dir="rtl"] .nav-mobile__panel{inset-inline-end:auto; inset-inline-start:0;}

.nav-mobile__close{
  position:absolute;
  top:22px;
  inset-inline-end:22px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
.nav-mobile__close:hover{border-color:rgba(198,167,94,.65); color:var(--gold);}

.nav-mobile__links{width:100%; display:flex; flex-direction:column; align-items:center; gap:22px;}
.nav-mobile__links a{
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:16px;
  color:#fff;
  opacity:.95;
}
.nav-mobile__links a:hover{color:var(--gold); opacity:1;}

.nav-mobile__lang{margin-top:18px; position:relative;}
.nav-mobile__langbtn{
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:16px;
  opacity:.95;
}
.nav-mobile__langmenu{
  position:absolute;
  top:calc(100% + 12px);
  inset-inline-start:50%;
  transform:translateX(-50%);
  min-width:160px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  padding:8px 0;
  display:none;
}
.nav-mobile__lang:hover .nav-mobile__langmenu,
.nav-mobile__lang:focus-within .nav-mobile__langmenu{display:block;
  pointer-events:auto;}
.nav-mobile__langmenu a{display:block;
  pointer-events:auto;padding:10px 14px;color:#111;font-weight:600;font-size:13px;}
.nav-mobile__langmenu a:hover{background:#f3efe9;}

.nav-mobile__hotline{
  margin-top:auto;
  width:100%;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(198,167,94,.95);
  color:#111;
  font-weight:900;
  letter-spacing:.02em;
}

/* Language dropdown (placed next to nav like reference) */
.nav-lang{position:relative;display:inline-flex;align-items:center;}
.nav-lang__btn{background:transparent;border:0;padding:0;cursor:pointer;}
.nav-lang__menu{
  position:absolute;
  top:calc(100% + 14px);
  inset-inline-start:0;
  min-width:220px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  padding:12px 0;
  display:none;
  z-index:1100;
}
.site-header .nav .nav-lang__menu a{
  display:block;
  pointer-events:auto;
  padding:12px 18px;
  color:#111 !important; /* prevent override from .nav a */
  font-weight:500;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:none;
  opacity:1;
}
.site-header .nav .nav-lang__menu a:hover{background:#f3efe9;color:#111 !important;}
.nav-lang:hover .nav-lang__menu,
.nav-lang.open .nav-lang__menu,
.nav-lang:focus-within .nav-lang__menu{display:block;
  pointer-events:auto;}

/* EN (top-level links only) */
html[dir="ltr"] .nav > a{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:14px;
  color:#fff;
  opacity:.95;
  transition:color .15s ease, opacity .15s ease;
}

html[dir="ltr"] .nav-lang__btn{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:14px;
  color:#fff;
  opacity:.95;
}

/* AR (top-level links only) */
html[dir="rtl"] .nav > a{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  font-size:16px;
  color:#fff;
  opacity:.95;
  transition:color .15s ease, opacity .15s ease;
}

html[dir="rtl"] .nav-lang__btn{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  font-size:16px;
  color:#fff;
  opacity:.95;
}

.site-header .nav > a:hover,
.site-header .nav > a:focus-visible{
  color: var(--gold) !important;
  opacity: 1;
}

/* Underline hover like reference (slower, more "premium") */
.site-header .nav > a,
.nav-lang__btn{position:relative;}
.site-header .nav > a::after,
.nav-lang__btn::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  height:3px;
  background:transparent;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .55s ease, background .55s ease;
}
.site-header .nav > a:hover::after,
.nav-lang:hover .nav-lang__btn::after,
.nav-lang.open .nav-lang__btn::after{
  background:var(--gold);
  transform:scaleX(1);
}
.nav-lang:hover .nav-lang__btn,
.nav-lang.open .nav-lang__btn{color:var(--gold);opacity:1;}


.nav-caret{
  display:inline-block;
  margin-inline-start:6px;
  font-size:12px;
  opacity:.95;
}

/* Actions */
.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  justify-self:end;
}
html[dir="rtl"] .header-actions{
  justify-self:start;
}

.lang-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:62px;
  height:46px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.35);
  color:#111;
  font-weight:800;
}

/* =========================
   Hotline Button (White Border Premium Style)
========================= */
.hotline{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:140px;
  height:50px;
  padding:0 26px;

  border-radius:999px;

  background:rgba(198,167,94,.95);
  color:#fff;

  font-weight:800;
  letter-spacing:.03em;

  border:2px solid #fff;                 /* الإطار الأبيض */
  box-shadow:0 8px 22px rgba(0,0,0,.18); /* ظل خفيف احترافي */

  transition:all .25s ease;
}

.hotline:hover{
  background:#fff;
  color:#111;
  border:2px solid var(--gold);
}

/* =========================
   Home Stats (العداد)
========================= */
.stats-strip{background:#3f3f41;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:64px;padding:72px 0;justify-items:center;}
.stat-card{
  border-radius:34px;
  border:1px dashed rgba(198,167,94,.65);
  background:transparent;
  width:100%;
  max-width:320px;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.stat-value{font-size:84px;line-height:1;font-weight:400;color:#fff;letter-spacing:.02em;}
.stat-label{margin-top:18px;font-size:18px;font-weight:600;color:rgba(198,167,94,.92);}

@media (max-width: 1100px){
  .stats-grid{grid-template-columns:repeat(2,1fr);padding:54px 0;gap:38px;}
  .stat-value{font-size:64px;}
}
@media (max-width: 560px){
  .stats-grid{grid-template-columns:1fr;gap:18px;}
  .stat-value{font-size:56px;}
}

/* =========================
   Hero
========================= */
.hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:flex-end;
  background:#000;
  overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.15) 55%,
    rgba(0,0,0,.05)
  );
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:120px 0 54px;
  color:#fff;
}
.hero h1{
  margin:0;
  font-size:46px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.02em;
}
.hero p{
  max-width:640px;
  margin:14px 0 0;
  font-size:18px;
  opacity:.92;
}
.hero-cta{
  margin-top:22px;
  display:inline-flex;
  gap:14px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(198,167,94,.7);
  background:rgba(198,167,94,.18);
}
.btn.gold{
  background:rgba(198,167,94,.92);
  border-color:rgba(198,167,94,.92);
  color:#111;
}
.btn.gold:hover{background:rgba(198,167,94,1)}

/* =========================
   Sections
========================= */
.section{padding:64px 0}
.section.soft{background:var(--soft)}
.section-title{margin:0 0 10px;font-size:34px}
.section-subtitle{max-width:820px;color:#333;margin:0 0 26px}

/* =========================
   Project tiles (Home)
========================= */
.project-tiles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.project-tile{
  position:relative;
  display:block;
  pointer-events:auto;
  border-radius:28px;
  overflow:hidden;
  min-height: 320px;
  background:#111;
  transform: translateZ(0);
  box-shadow:0 16px 40px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.10);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.project-tile__media{position:absolute; inset:0;}
.project-tile__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:auto;
  transform: scale(1);
  transition: transform .45s ease;
}

.project-tile__overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.10) 60%, rgba(0,0,0,.05));
}

.project-tile__content{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  color:#fff;
}

.project-tile__label{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.86);
  margin-bottom:8px;
}

.project-tile__title{
  display:block;
  pointer-events:auto;
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
}

.project-tile:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  filter: brightness(1.02);
}
.project-tile:hover .project-tile__media img{transform: scale(1.06);}
.project-tile.is-disabled{opacity:.70;}

/* =========================
   Footer
========================= */
.footer-cta{
  border-radius:30px;
  padding:26px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  max-width:920px;
  margin:0 auto;
  text-align:center;
}
.footer-cta .btn{
  background:rgba(198,167,94,.92);
  border-color:rgba(198,167,94,.92);
  color:#111;
}
.site-footer{
  background:#3d3d3f;
  color:#fff;
  padding:48px 0 22px;
  margin-top:40px;
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.footer-address h4{margin:0 0 10px;font-size:18px}
.footer-address p{margin:0;color:rgba(255,255,255,.86)}
.footer-social{display:flex;justify-content:center;gap:16px;align-items:center;margin-top:10px}
.social-btn,
.social-link{
  width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#111;
  transition:transform .15s ease, background .2s ease;
}
.social-btn:hover,
.social-link:hover{transform:translateY(-1px);background:var(--gold)}
.social-btn svg,
.social-link svg{width:20px;height:20px}
.copyright{margin-top:16px;text-align:center;color:rgba(255,255,255,.75);font-size:13px}

/* Floating WhatsApp */
.whatsapp-float{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:1200;
  width:78px;height:78px;border-radius:999px;
  background:#25D366;
  box-shadow:0 16px 34px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease;
}
.whatsapp-float:hover{transform:translateY(-2px)}
.whatsapp-float svg{
  width:40px;height:40px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));
}

/* Medium screens: reduce nav spacing & font before hiding it */
@media (max-width: 1200px){
  .site-header{padding:12px 0;}
  .site-header .header-inner{gap:16px;}
  .nav{gap:22px;}
  html[dir="ltr"] .nav a{font-size:13px; letter-spacing:.10em;}
  html[dir="rtl"] .nav a{font-size:14px;}
  .hotline{min-width:120px; height:44px; padding:0 14px;}
  .lang-pill{width:58px; height:44px;}
}

/* Mobile: hide nav, keep one-row header tidy */
@media (max-width: 920px){
  .nav{display:none;}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;}

  .site-header{padding:10px 0;}
  .site-header .header-inner{
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
  }

  .brand-logo{height:75px;max-height:75px;}
  .header-actions{gap:8px;}
  .hotline{min-width:auto; padding:0 12px; font-size:13px; height:42px;}
}



/* =========================
   Home Search (Nawy-inspired)
========================= */

.home-search{background:#3f3f41;padding:44px 0;}
.home-search__form{
  background:rgba(11,28,45,.35);
  border:1px solid rgba(198,167,94,.35);
  border-radius:28px;
  padding:18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-search__tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.home-search__tab{
  appearance:none;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:#fff;
  padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:600;
}
.home-search__tab.is-active{border-color:rgba(198,167,94,.85);color:var(--gold);background:rgba(198,167,94,.10)}
.home-search__grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:12px;
  align-items:end;
}
.hs-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.hs-label{font-size:13px;color:rgba(255,255,255,.78);font-weight:600}
.hs-input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  outline:none;
}
.hs-input::placeholder{color:rgba(255,255,255,.55)}
.hs-input:focus{border-color:rgba(198,167,94,.75);box-shadow:0 0 0 4px rgba(198,167,94,.18)}

/* Fix: <select> elements ignore a transparent CSS background and render a native
   opaque light background — making color:#fff invisible (white-on-white).
   Scoped to .home-search only; zero impact on any other section or select. */
.home-search select.hs-input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:rgba(20,32,48,.85);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:calc(100% - 12px) center;
  padding-right:34px;
  color:#fff;
  cursor:pointer;
}
html[dir="rtl"] .home-search select.hs-input{
  background-position:12px center;
  padding-right:12px;
  padding-left:34px;
}

.hs-actions{display:flex;flex-direction:column;gap:10px}
.hs-submit{width:100%;justify-content:center}
.hs-reset{color:rgba(255,255,255,.78);font-size:13px;text-align:center;text-decoration:underline}
.home-search__hint{margin:12px 6px 0;color:rgba(255,255,255,.72);font-size:13px}
@media (max-width: 1024px){
  .home-search__grid{grid-template-columns: repeat(3, 1fr);}
  .hs-actions{flex-direction:row;align-items:center;justify-content:flex-start}
  .hs-reset{text-align:left}
}
@media (max-width: 640px){
  .home-search__grid{grid-template-columns: 1fr;}
  .hs-actions{flex-direction:column}
}


/* =========================
   Projects listing (Nawy-inspired)
========================= */
.projects-filterbar{padding:0 0 18px}
.projects-filterbar__form{background:#fff;border:1px solid rgba(11,28,45,.10);border-radius:18px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.pf-grid{display:grid;grid-template-columns:1.2fr 1.2fr 1.2fr .9fr .9fr auto auto;gap:10px;align-items:center}
.pf-input{
  width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(11,28,45,.15);
  background:#fff;outline:none
}
.pf-input:focus{border-color:rgba(198,167,94,.85);box-shadow:0 0 0 4px rgba(198,167,94,.16)}
.pf-btn{white-space:nowrap}
.pf-reset{font-size:13px;color:var(--navy);text-decoration:underline;white-space:nowrap}
@media (max-width: 1024px){
  .pf-grid{grid-template-columns:repeat(2,1fr);}
}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

.project-card{
  background:#fff;border:1px solid rgba(11,28,45,.12);
  border-radius:18px;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.06);
  display:flex;flex-direction:column;
}
.project-card__media{display:block;aspect-ratio:16/10;background:#0b1c2d12;overflow:hidden}
.project-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.project-card__media:hover img{transform:scale(1.03)}
.project-card__placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:rgba(11,28,45,.55)}
.project-card__body{padding:14px 14px 16px}
.project-card__meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.project-card__loc{font-size:13px;color:rgba(11,28,45,.70)}
.project-card__title{margin:0 0 8px;font-size:18px;line-height:1.25}
.project-card__title a{text-decoration:none}
.project-card__dev{font-size:14px;color:rgba(11,28,45,.70)}


/* Responsive */
@media (max-width: 920px){
  .project-tiles{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}

/* Desktop: show hotline, hide burger */
.header-actions .nav-burger{display:none;}

/* Mobile: hide hotline and show burger at the same spot (right) */
@media (max-width: 920px){
  .header-actions .hotline{display:none;}
  .header-actions .nav-burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px;
  }
}

/* =========================================================
   Burger icon fix (mobile)
   - Ensure 3 lines are stacked vertically
   - White by default, gold on hover
========================================================= */
.nav-burger{
  display:none; /* default hidden on desktop (mobile rule below will show it) */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:transparent;
  border:0;
  padding:10px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span{
  display:block;
  pointer-events:auto;
  width:28px;
  height:2px;
  background:#fff;
  border-radius:2px;
  opacity:.95;
}
.nav-burger:hover span{background:var(--gold);}

/* Mobile: show burger in header-actions */
@media (max-width: 920px){
  .header-actions .nav-burger{display:inline-flex;}
}


/* === Hide Counter Section === */
.counter-section,
.stats-section,
.home-counter {
    display: none !important;
}

/* === Hide Home Stats Strip (Counter) === */
.stats-strip{display:none !important;}

/* ============================================================
   Phase 10 — Public Projects Module CSS
   Append to: /assets/css/enwan_theme.css
   ============================================================ */

/* ── Shared Utilities ───────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--navy);
  color: var(--navy);
  line-height: 1.5;
}
.badge--sm { padding: 2px 8px; font-size: 11px; }
.badge--success  { border-color: #16a34a; color: #16a34a; }
.badge--warning  { border-color: #b45309; color: #b45309; }
.badge--danger   { border-color: #dc2626; color: #dc2626; }
.badge--gold     { border-color: var(--gold); color: var(--gold); }

/* ── Page hero ───────────────────────────────────────────────── */
.page-hero {
  padding: 48px 0 32px;
  background: var(--navy);
  color: #fff;
}
.page-hero__title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  margin: 0 0 8px;
}
.page-hero__sub {
  color: rgba(255,255,255,.75);
  margin: 0;
  font-size: 16px;
}

/* ── Filter Bar ──────────────────────────────────────────────── */
.filter-bar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.filter-bar__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.filter-bar__search {
  flex: 1 1 220px;
}
.filter-bar__input {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .2s;
}
.filter-bar__input:focus {
  outline: none;
  border-color: var(--gold);
}
.filter-bar__selects {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 2 1 auto;
}
.filter-bar__select {
  flex: 1 1 140px;
  padding: 9px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s;
}
.filter-bar__select:focus {
  outline: none;
  border-color: var(--gold);
}
.filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.filter-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
}
.filter-bar__btn:hover { background: #a8832e; }
.filter-bar__clear {
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
}
.filter-bar__clear:hover { color: #dc2626; }
.filter-bar__count {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
}

/* ── Projects Grid ───────────────────────────────────────────── */
.projects-section { padding: 36px 0 60px; }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .projects-grid { grid-template-columns: 1fr; } }

/* ── Project Card ────────────────────────────────────────────── */
.project-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
  outline-offset: 3px;
}
.project-card:hover,
.project-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.project-card__img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #edf2f7;
}
.project-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.project-card:hover .project-card__img { transform: scale(1.04); }
.project-card__badge {
  position: absolute;
  top: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  color: #fff;
}
[dir="ltr"] .project-card__badge { left: 10px; }
[dir="rtl"] .project-card__badge { right: 10px; }
.project-card__badge--featured { background: var(--gold); top: 10px; }
.project-card__badge--delivery  { background: var(--navy); top: 38px; }

.project-card__body { padding: 16px 16px 10px; flex: 1; }
.project-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.project-card__location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}
.project-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.4;
}
.project-card__developer {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 6px;
}
.project-card__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  margin: 0;
}
.project-card__footer {
  padding: 10px 16px 14px;
  border-top: 1px solid #f0f0f0;
}
.project-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}
.empty-state p { font-size: 16px; margin-bottom: 16px; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { padding: 32px 0 16px; }
.pagination__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pagination__btn,
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: var(--navy);
  transition: background .2s, border-color .2s;
  cursor: pointer;
}
.pagination__btn:hover,
.pagination__page:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.pagination__page--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  cursor: default;
}
.pagination__btn--disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}
.pagination__ellipsis {
  color: #9ca3af;
  padding: 0 4px;
  user-select: none;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 0;
  font-size: 14px;
}
.breadcrumb .container { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { color: #9ca3af; }

/* ── Project Hero ────────────────────────────────────────────── */
.project-hero { padding: 28px 0; }
.project-hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 800px) {
  .project-hero__inner { grid-template-columns: 1fr; }
}
.project-hero__img-wrap {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #edf2f7;
}
.project-hero__img { width: 100%; height: 100%; object-fit: cover; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.project-hero__title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
  line-height: 1.3;
}
.project-hero__facts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.project-hero__fact { display: flex; align-items: baseline; gap: 8px; }
.project-hero__fact dt { font-size: 13px; color: #6b7280; min-width: 80px; }
.project-hero__fact dd { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0; }
.project-hero__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 20px;
}
.project-hero__price-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
  margin-inline-end: 6px;
}
.project-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.btn--wa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px;
  background: #25d366; color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none; border: none; cursor: pointer; transition: background .2s;
}
.btn--wa:hover { background: #1ebe5d; }
.btn--outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 22px; border-radius: 10px;
  border: 1.5px solid var(--navy); color: var(--navy);
  background: transparent; font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s;
}
.btn--outline:hover { background: var(--navy); color: #fff; }

/* ── Tabs ────────────────────────────────────────────────────── */
.project-tabs-section { padding: 0 0 60px; }
.tabs {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 24px;
  gap: 0;
  overflow-x: auto;
}
.tabs__btn {
  padding: 12px 22px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.tabs__btn:hover { color: var(--navy); }
.tabs__btn--active { color: var(--navy); border-bottom-color: var(--gold); }
.tab-panel { display: none; }
.tab-panel--active { display: block; }

/* ── Units Grid ──────────────────────────────────────────────── */
.units-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .units-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .units-grid { grid-template-columns: 1fr; } }

/* ── Unit Card ───────────────────────────────────────────────── */
.unit-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s, border-color .2s;
}
.unit-card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
}
.unit-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.unit-card__type { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.unit-card__specs { display: flex; gap: 14px; flex-wrap: wrap; }
.unit-card__spec {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: #475569;
}
.unit-card__icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); }
.unit-card__price {
  font-size: 15px; font-weight: 700; color: var(--gold);
}
.unit-card__finance {
  display: flex; gap: 12px; font-size: 12px; color: #6b7280;
}
.unit-card__ctas { display: flex; gap: 8px; margin-top: auto; }
.unit-card__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .2s, color .2s; cursor: pointer;
}
.unit-card__btn--wa {
  background: #25d366; color: #fff; flex: 1; justify-content: center;
}
.unit-card__btn--wa:hover { background: #1ebe5d; }
.unit-card__btn--call {
  border: 1.5px solid var(--navy); color: var(--navy); flex: 1; justify-content: center;
}
.unit-card__btn--call:hover { background: var(--navy); color: #fff; }

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item {
  display: block; border-radius: 10px; overflow: hidden;
  aspect-ratio: 4/3; background: #f0f3f7;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery-item:hover img { transform: scale(1.04); }

/* ── Map ─────────────────────────────────────────────────────── */
.map-embed-wrap {
  border-radius: 14px;
  overflow: hidden;
  height: 420px;
}
.map-embed-wrap iframe {
  width: 100%; height: 100%; border: none;
}

/* ── Project prose ───────────────────────────────────────────── */
.project-lead { font-size: 17px; color: #334155; margin-bottom: 20px; line-height: 1.7; }
.project-body.prose { color: #475569; line-height: 1.8; font-size: 15px; }
.project-features-title { font-size: 18px; font-weight: 700; color: var(--navy); margin: 24px 0 12px; }
.project-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 580px) { .project-features { grid-template-columns: 1fr; } }
.project-features li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: #334155;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border-inline-start: 3px solid var(--gold);
}
.project-features li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }

/* ── RTL fixes ───────────────────────────────────────────────── */
[dir="rtl"] .project-hero__fact dt { text-align: right; }
[dir="rtl"] .filter-bar__form { direction: rtl; }
[dir="rtl"] .project-card__cta svg { transform: scaleX(-1); }