/* ==========================================================================
   اتساع العقارية — Design System
   Deep forest green + brushed gold on warm cream. Arch motif from the brand mark.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

body.home-index {
  background: #f5f0e7;
}

/* Homepage composition: keep the first viewport clean and architectural. */
body.home-index .hero-backdrop {
  background:
    linear-gradient(180deg, rgba(248, 240, 226, 0.78) 0%, rgba(248, 240, 226, 0.64) 46%, rgba(248, 240, 226, 0.84) 100%),
    url('/static/hero-bg.jpg') center 46% / cover no-repeat;
  filter: none;
}

body.home-index .home-hero-wrap {
  min-height: 100vh;
  background: #f4efe7;
}

body.home-index .home-topbar {
  padding-top: 18px;
}

body.home-index .home-topbar-inner {
  min-height: 72px;
  padding: 0 18px;
  background: rgba(255, 253, 249, 0.92);
  border: 1px solid #e4dccd;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(47, 43, 34, 0.06);
  direction: ltr;
}

body.home-index .home-nav,
body.home-index .home-nav a {
  color: #193a31;
}

body.home-index .primary-cta {
  background: #193a31;
  border-radius: 9px;
  box-shadow: none;
  direction: rtl;
}

body.home-index .brand-stack {
  justify-self: end;
  width: 190px;
  height: 62px;
  direction: rtl;
}

body.home-index .brand-stack img {
  width: 190px;
  height: 62px;
  object-fit: contain;
}

body.home-index .brand-name-ar,
body.home-index .brand-name-en {
  color: #193a31;
}

body.home-index .brand-box {
  background: #193a31;
  border-color: #c89b4b;
}

body.home-index .brand-mark {
  border-color: #e1bd73;
}

body.home-index .home-hero-content {
  padding-top: 54px;
}

body.home-index .home-hero-content h1 {
  color: #193a31;
  font-size: clamp(2.4rem, 4.2vw, 4.5rem);
}

body.home-index .home-hero-content p {
  color: #7b766b;
}

body.home-index .home-orbit {
  width: min(940px, 100%);
  height: 480px;
  margin-top: 24px;
}

body.home-index .home-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 66px;
  width: min(610px, 72%);
  height: 265px;
  transform: translateX(-50%);
  border: 1px solid rgba(190, 143, 55, 0.72);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

body.home-index .orbit-item {
  color: #193a31;
}

body.home-index .orbital-icon {
  position: relative;
  width: 64px;
  height: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c69a4d;
}

body.home-index .orbital-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 30px;
  height: 44px;
  transform: translateX(-50%);
  border: 4px solid #173a31;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

body.home-index .orbital-icon::after {
  content: "";
  position: absolute;
  left: calc(50% + 5px);
  bottom: 2px;
  width: 9px;
  height: 15px;
  background: #c69a4d;
  transform: skewY(-34deg);
}

body.home-index .orbital-icon svg {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
}

body.home-index .orbit-item span:last-child {
  color: #193a31;
}

body.home-index .home-gate {
  width: min(310px, 36%);
  height: 315px;
  background: #193a31;
  border-color: #c69a4d;
  border-radius: 220px 220px 16px 16px;
  box-shadow: 0 18px 40px rgba(25, 58, 49, 0.16);
}

body.home-index .orbit-left-top {
  left: 12%;
  top: 25%;
}

body.home-index .orbit-right-top {
  right: 12%;
  top: 25%;
}

body.home-index .orbit-center-top {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

body.home-index .orbit-left-bottom {
  left: 7%;
  bottom: 14%;
}

body.home-index .orbit-right-bottom {
  right: 7%;
  bottom: 14%;
}

body.home-index .home-gate .gate-label {
  font-size: clamp(2rem, 3vw, 3.3rem);
}

body.home-index .home-search {
  margin-top: 0;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(47, 43, 34, 0.09);
}



body.home-index .home-bottom-bar {
  margin-top: 22px;
  border-radius: 14px 14px 0 0;
}

@media (max-width: 980px) {
  body.home-index .home-topbar-inner {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 0 12px;
  }

  body.home-index .brand-stack {
    order: 3;
    width: 120px;
    height: 48px;
  }

  body.home-index .brand-stack img {
    width: 120px;
    height: 48px;
  }

  body.home-index .home-nav {
    order: 2;
    gap: 10px;
    font-size: 12px;
    white-space: nowrap;
    direction: rtl;
  }

  body.home-index .primary-cta {
    order: 1;
    padding: 10px 14px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  body.home-index .home-topbar {
    padding: 10px 8px 0;
  }

  body.home-index .home-topbar-inner {
    min-height: 58px;
    border-radius: 12px;
  }

  body.home-index .brand-stack {
    width: 94px;
    height: 40px;
  }

  body.home-index .brand-stack img {
    width: 94px;
    height: 40px;
  }

  body.home-index .home-nav {
    display: none;
  }

  body.home-index .primary-cta {
    padding: 9px 10px;
    font-size: 10px;
  }

  body.home-index .home-hero-content {
    padding-top: 34px;
  }

  body.home-index .home-hero-content h1 {
    font-size: 2rem;
  }

  body.home-index .home-orbit {
    height: 310px;
    margin-top: 14px;
  }

  body.home-index .home-gate {
    width: 38%;
    height: 205px;
  }

  body.home-index .orbit-center-top {
    top: -8px;
  }

  body.home-index .orbit-left-top,
  body.home-index .orbit-right-top {
    top: 24%;
  }

  body.home-index .orbit-left-bottom,
  body.home-index .orbit-right-bottom {
    bottom: 4%;
  }

  
  body.home-index .home-bottom-bar {
    display: none;
  }

}

body.home-index .site-header,
body.home-index .site-footer {
  display: none !important;
}

body.offer-property-page .site-header,
body.offer-property-page .site-footer {
  display: none !important;
}

body.offer-property-page main {
  min-height: 100vh;
}

body.admin-page > .site-header,
body.admin-page > .site-footer {
  display: none !important;
}

body.admin-page main {
  min-height: 100vh;
}

.home-landing {
  position: relative;
  min-height: 100vh;
  background: #f5f0e7;
  overflow: hidden;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(21, 30, 27, 0.28) 0%, rgba(21, 30, 27, 0.44) 30%, rgba(17, 36, 31, 0.72) 100%),
    url('/static/hero-bg.jpg') center/cover no-repeat;
}

.home-hero-wrap {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 14px 0;
}

.home-topbar {
  position: relative;
  z-index: 2;
}

.home-topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: min(1240px, 100%);
  margin: 0 auto;
}

.primary-cta {
  justify-self: start;
  background: #173b30;
  color: #f6f0e7;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 24px;
  box-shadow: 0 10px 22px rgba(14, 33, 28, 0.2);
}

.home-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  color: #f9f4ee;
  font-size: 15px;
  font-weight: 600;
  flex-wrap: wrap;
}

.home-nav a {
  color: #f9f4ee;
  opacity: 0.95;
}

.brand-stack {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f2d79b;
}

.brand-box {
  width: 70px;
  height: 56px;
  border: 2px solid rgba(214, 176, 104, 0.95);
  border-radius: 12px;
  position: relative;
  background: rgba(8, 29, 25, 0.18);
}

.brand-mark {
  position: absolute;
  inset: 10px 14px;
  border: 2px solid rgba(214, 176, 104, 0.95);
  border-radius: 8px;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.brand-name-ar {
  font-size: 2.15rem;
  font-weight: 800;
  color: #f4dca5;
}

.brand-name-en {
  font-size: 0.53rem;
  letter-spacing: 0.12em;
  color: #edd9a8;
}

.home-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 20px;
}

.home-hero-content h1 {
  margin: 0;
  color: #f7f4ee;
  font-size: clamp(2.8rem, 4vw, 6rem);
  font-weight: 900;
  line-height: 1.12;
}

.home-hero-content p {
  margin: 8px 0 0;
  color: #f0e7d6;
  font-size: 1.18rem;
}

.home-orbit {
  position: relative;
  width: min(1080px, 92%);
  height: 500px;
  margin: 26px auto 0;
}

.orbit-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #f6f2eb;
  width: 120px;
  text-decoration: none;
}

.orbital-icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(214, 176, 104, 0.95);
  border-radius: 18px 18px 8px 8px;
  background: rgba(11, 29, 25, 0.4);
  color: #f1d99c;
}

.orbital-icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orbit-item span:last-child {
  font-size: 1rem;
  font-weight: 700;
}

.orbit-left-top { left: 6%; top: 9%; }
.orbit-right-top { right: 6%; top: 9%; }
.orbit-left-bottom { left: 12%; bottom: 12%; }
.orbit-right-bottom { right: 12%; bottom: 12%; }

.home-gate {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(570px, 60%);
  height: 285px;
  border: 2px solid rgba(214, 176, 104, 0.95);
  border-radius: 220px 220px 0 0;
  background: rgba(11, 31, 27, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f7f2ea;
  cursor: pointer;
}

.gate-icon {
  width: 46px;
  height: 46px;
  color: #f0d188;
}

.gate-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gate-label {
  font-size: clamp(2.2rem, 3.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.2;
}

.gate-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: #e6c77f;
  font-size: 0.92rem;
  font-weight: 700;
  margin: 4px 0;
}

.gate-divider span {
  width: 26px;
  height: 1px;
  background: rgba(230, 199, 127, 0.9);
  display: block;
}

.gate-arrow {
  width: 22px;
  height: 22px;
  color: #e6c77f;
  margin-top: 10px;
}

.gate-arrow svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-search {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(1100px, calc(100% - 30px));
  margin: 8px auto 0;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(210, 198, 173, 0.95);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 20px 40px rgba(15, 42, 32, 0.18);
}

.search-button {
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8d39c 0%, #b78642 100%);
  color: #14352d;
  font-weight: 800;
  font-size: 1rem;
  padding: 16px 26px;
  min-width: 120px;
}

.advanced-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 54px;
  border: 1px solid #e0dfdc;
  border-radius: 12px;
  color: #1d332e;
  background: #fff;
  font-weight: 700;
  text-decoration: none;
}

.search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1d332e;
  background: #fff;
  border-radius: 12px;
  padding: 0 14px;
  min-height: 54px;
}

.search-field svg {
  width: 18px;
  height: 18px;
  stroke: #b78742;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.search-field-input {
  border-left: 1px solid #f0e7d8;
}

.search-field-input input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: #1d332e;
}

.search-field-input input::placeholder {
  color: #74857a;
}

.search-field-location {
  width: 170px;
  border-left: 1px solid #f0e7d8;
  justify-content: center;
  font-weight: 700;
}















.home-bottom-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 1.2fr 1.3fr 0.8fr;
  gap: 24px;
  width: min(1180px, calc(100% - 30px));
  margin: 26px auto 0;
  background: rgba(13, 38, 33, 0.96);
  color: #f8f0e5;
  border-radius: 20px 20px 0 0;
  padding: 30px 26px 18px;
}

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

.social-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(214, 176, 104, 0.9);
  color: #e6c77f;
}

.bottom-copy h3,
.bottom-links h4,
.bottom-contact h4 {
  margin: 0 0 10px;
  color: #f4e8d2;
  font-size: 1.1rem;
}

.bottom-copy p,
.bottom-links a,
.bottom-contact a {
  display: block;
  margin: 0 0 8px;
  color: #e4d9cb;
}

.bottom-links,
.bottom-contact {
  display: flex;
  flex-direction: column;
}

.bottom-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-brand {
  width: 110px;
  height: 88px;
  border: 2px solid rgba(214, 176, 104, 0.95);
  border-radius: 12px;
  position: relative;
  background: rgba(255,255,255,0.05);
}

.mini-brand::before {
  content: "";
  position: absolute;
  inset: 15px 22px;
  border: 2px solid rgba(214, 176, 104, 0.95);
  border-radius: 8px;
}

@media (max-width: 980px) {
  .home-topbar-inner { grid-template-columns: 1fr; justify-items: center; }
  .primary-cta { justify-self: center; }
  .brand-stack { justify-self: center; }
  .home-nav { gap: 10px 18px; }
  
  .home-bottom-bar { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 640px) {
  .home-hero-wrap { padding: 14px 10px 0; }
  .home-orbit { height: 340px; }
  .orbit-item { width: 88px; }
  .orbital-icon { width: 62px; height: 62px; }
  .orbital-icon svg { width: 26px; height: 26px; }
  .orbit-item span:last-child { font-size: 0.82rem; }
  .home-gate { width: 72%; height: 190px; }
  .home-search { flex-wrap: wrap; padding: 10px; }
  .search-button, .advanced-link { width: 100%; }
  .search-field, .search-field-location { width: 100%; }
   .home-bottom-bar { grid-template-columns: 1fr; }
}

:root{
  --green-950:#0f2a20;
  --green-900:#16352a;
  --green-800:#1c4234;
  --gold-600:#b5893f;
  --gold-500:#c9a15a;
  --gold-300:#e3c98a;
  --cream-100:#faf7f0;
  --cream-200:#f4efe3;
  --cream-300:#ece4d2;
  --ink:#1c2620;
  --ink-soft:#5c6a62;
  --line:#e2d9c4;
  --white:#ffffff;
  --shadow: 0 18px 40px -22px rgba(22,53,42,.35);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Tajawal', sans-serif;
  background:var(--cream-100);
  color:var(--ink);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-600);
  outline-offset:3px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:var(--green-900);
  color:var(--cream-100);
}
.btn-primary:hover{background:var(--green-950); box-shadow:var(--shadow);}
.btn-outline{
  background:transparent;
  border-color:var(--green-900);
  color:var(--green-900);
}
.btn-outline:hover{background:var(--green-900); color:var(--cream-100);}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-300),var(--gold-600));
  color:var(--green-950);
}
.btn-gold:hover{filter:brightness(1.05); box-shadow:var(--shadow);}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn-block{width:100%; justify-content:center;}

/* ---------- header ---------- */
.site-header{
  background:var(--cream-100);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:88px;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
}
.brand .mark{
  width:46px;height:46px;
  border:2px solid var(--gold-600);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-600);
  flex-shrink:0;
}
.brand .name-ar{font-size:20px; color:var(--green-950); letter-spacing:1px; line-height:1.1;}
.brand .name-en{font-size:10px; color:var(--ink-soft); letter-spacing:3px; margin-top:2px;}

.main-nav{display:flex; align-items:center; gap:34px;}
.main-nav a{
  font-size:15px; font-weight:500; color:var(--ink); position:relative; padding:6px 2px;
}
.main-nav a.active{color:var(--green-950); font-weight:700;}
.main-nav a.active::after{
  content:'';
  position:absolute; right:0; bottom:-6px; width:100%; height:2px;
  background:var(--gold-600);
}
.header-actions{display:flex; align-items:center; gap:14px;}
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--white);
  align-items:center;justify-content:center;
}

/* ---------- breadcrumb ---------- */
.breadcrumb{
  padding:20px 0;
}
.breadcrumb .container{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--ink-soft);
}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb .current{color:var(--green-950); font-weight:700;}
.breadcrumb .sep{color:var(--gold-600);}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:64px 0 0;
}
.hero-frame{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  margin:0 auto;
  max-width:1280px;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,26,20,.25) 0%, rgba(10,26,20,.45) 45%, rgba(8,20,16,.85) 100%),
    url('hero-bg.jpg');
  background-size:cover;
  background-position:center 30%;
  z-index:0;
}
.hero-inner{
  position:relative; z-index:2;
  padding:76px 40px 48px;
  text-align:center;
  color:var(--cream-100);
}
.eyebrow-line{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--gold-300); font-weight:700; margin-bottom:18px; font-size:15px;
}
.eyebrow-line span.dot{width:6px;height:6px;border-radius:50%;background:var(--gold-300);}
.eyebrow-line::before, .eyebrow-line::after{
  content:''; width:40px; height:1px; background:var(--gold-300); opacity:.6;
}
.hero h1{
  font-size:44px; font-weight:900; margin:0 0 14px; line-height:1.3;
}
.hero p.lead{
  font-size:18px; color:var(--cream-300); margin:0 0 48px; font-weight:400;
}

.path-arches{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:20px;
  max-width:860px;
  margin:0 auto 6px;
  position:relative;
}
.path-arches .arc-line{
  position:absolute;
  left:50%; top:2px; transform:translateX(-50%);
  width:360px; height:60px;
  pointer-events:none;
  color:var(--gold-500);
  opacity:.8;
  z-index:0;
}
.path-arch{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  position:relative; z-index:1;
  text-decoration:none; cursor:pointer;
}
.path-arch .door{
  width:56px; height:72px;
  border:1.4px solid var(--gold-500);
  border-radius:50% 50% 5px 5px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-300);
  background:rgba(11,30,23,.55);
}
.path-arch span{font-size:13px; font-weight:700; color:var(--cream-100);}
.path-arch.lvl2{transform:translateY(-24px);}
.path-arch.mid{transform:translateY(-44px);}
.path-arch.mid .door{
  width:68px; height:86px;
  border-radius:12px 12px 5px 5px;
  border-color:var(--gold-500); color:var(--gold-300);
  background:rgba(11,30,23,.72);
}
.path-arch.mid span{position:relative; top:-4px;}

.hero-gate{
  display:flex; flex-direction:column; align-items:center;
  width:320px; min-height:360px; margin:-24px auto 40px;
  border:2px solid var(--gold-500);
  border-radius:160px 160px 22px 22px;
  padding:36px 24px 22px;
  background:rgba(11,29,22,.88);
  text-decoration:none;
}
.hero-gate .icon-mark{
  width:34px;height:34px; margin:0 auto 16px;
  color:var(--gold-300);
}
.hero-gate .gate-word{font-size:25px; margin:0; font-weight:800; color:var(--cream-100); line-height:1.4;}
.hero-gate .gate-or{
  display:flex; align-items:center; gap:10px;
  color:var(--gold-300); font-size:13px; font-weight:600; margin:8px 0;
}
.hero-gate .gate-or span{width:22px; height:1px; background:var(--gold-500); opacity:.8;}
.hero-gate .gate-chevron{margin-top:auto; padding-top:16px; color:var(--gold-300);}

.search-bar{
  display:flex; align-items:stretch;
  background:var(--white);
  border-radius:16px;
  padding:8px;
  gap:8px;
  max-width:1040px;
  margin:0 auto -34px;
  box-shadow:0 24px 48px -20px rgba(15,42,32,.45);
  position:relative; z-index:3;
}
.search-bar .field{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  flex:1;
  color:var(--ink);
  font-size:15px;
  border-left:1px solid var(--line);
}
.search-bar .field:first-child{border-left:none;}
.search-bar .field.location{flex:0 0 auto; min-width:150px; font-weight:700; color:var(--green-950);}
.search-bar input{border:none; outline:none; background:transparent; width:100%; font-size:15px;}
.search-bar .icon{color:var(--gold-600); flex-shrink:0;}
.search-bar .btn{flex:0 0 auto;}

.trust-strip{
  margin-top:56px;
  padding:38px 0;
}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.trust-item{
  display:flex; align-items:center; gap:14px;
}
.trust-item .ic{
  width:50px;height:50px; flex-shrink:0;
  border-radius:14px;
  background:var(--cream-200);
  color:var(--gold-600);
  display:flex; align-items:center; justify-content:center;
}
.trust-item h4{margin:0 0 3px; font-size:15px; color:var(--green-950);}
.trust-item p{margin:0; font-size:13px; color:var(--ink-soft);}

/* ---------- choose path page ---------- */
.page-title-block{
  text-align:center;
  padding:44px 0 10px;
}
.page-title-block .eyebrow{
  color:var(--gold-600); font-weight:700; font-size:14px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.page-title-block .eyebrow::before, .page-title-block .eyebrow::after{
  content:''; width:26px; height:1px; background:var(--gold-600);
}
.page-title-block h1{font-size:34px; color:var(--green-950); margin:0 0 10px;}
.page-title-block p{color:var(--ink-soft); font-size:16px; margin:0;}

.path-cards{
  display:grid; grid-template-columns:1fr 1fr;
  gap:26px;
  padding:44px 0 8px;
}
.path-card{
  background:var(--green-900);
  border-radius:28px 28px 120px 120px;
  padding:38px 30px 0;
  text-align:center;
  color:var(--cream-100);
  overflow:hidden;
  position:relative;
  transition:transform .25s ease;
}
.path-card:hover{transform:translateY(-6px);}
.path-card .ic{
  width:46px;height:46px; margin:0 auto 14px; color:var(--gold-300);
}
.path-card h3{font-size:24px; margin:0 0 6px; font-weight:800;}
.path-card p{margin:0 0 22px; color:var(--cream-300); font-size:15px;}
.path-card .frame{
  border-radius:120px 120px 0 0;
  overflow:hidden;
  height:270px;
}
.path-card .frame img{width:100%; height:100%; object-fit:cover;}
.path-card .cta{
  position:relative; margin-top:-26px; z-index:2;
}

.need-help-bar{
  margin-top:36px;
  background:var(--cream-200);
  border-radius:20px;
  padding:22px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.need-help-bar .left{display:flex; align-items:center; gap:16px;}
.need-help-bar .ic{
  width:50px;height:50px; border-radius:50%; background:var(--white); color:var(--green-900);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.need-help-bar h4{margin:0 0 3px; color:var(--green-950); font-size:16px;}
.need-help-bar p{margin:0; color:var(--ink-soft); font-size:14px;}

@media (max-width: 360px){
  .need-help-bar{align-items:stretch;flex-direction:column;gap:12px;padding:16px}
  .need-help-bar .left{min-width:0;gap:11px}
  .need-help-bar .left>div{min-width:0}
  .need-help-bar .btn{width:100%;min-width:0;justify-content:center}
}

/* ---------- listings layout ---------- */
.listing-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:32px;
  align-items:start;
  padding:8px 0 60px;
}
.listing-head h1{font-size:32px; color:var(--green-950); margin:0 0 8px;}
.listing-head p{color:var(--ink-soft); margin:0 0 22px; font-size:15px;}

.view-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:14px;
}
.view-toggle{
  display:flex; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:4px; gap:4px;
}
.view-toggle button{
  border:none; background:transparent; padding:9px 16px; border-radius:9px; font-size:14px; font-weight:600; color:var(--ink-soft);
  display:flex; align-items:center; gap:6px;
}
.view-toggle button.active{background:var(--green-900); color:var(--cream-100);}
.sort-select{
  display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft);
}
.sort-select select{border:1px solid var(--line); border-radius:10px; padding:9px 14px; background:var(--white); color:var(--ink);}
.result-count{font-size:14px; color:var(--ink-soft);}

.card-list{display:flex; flex-direction:column; gap:20px;}
.card-list.grid-mode{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}
.card-list.grid-mode .property-card{grid-template-columns:1fr;}
.card-list.grid-mode .property-card .thumb{min-height:190px;}
@media (max-width: 680px){
  .card-list.grid-mode{grid-template-columns:1fr;}
}
.property-card{
  display:grid;
  grid-template-columns:260px 1fr;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.property-card:hover{box-shadow:var(--shadow); transform:translateY(-2px);}
.property-card .thumb{
  position:relative; min-height:210px; background-size:cover; background-position:center;
}
.property-card .thumb .badge{
  position:absolute; top:14px; right:14px;
  background:rgba(250,247,240,.92);
  color:var(--green-900);
  font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:999px;
  display:flex; align-items:center; gap:6px;
}
.property-card .thumb .badge::before{content:''; width:6px;height:6px;border-radius:50%; background:#3fae64;}
.property-card .thumb .fav{
  position:absolute; top:14px; left:14px;
  width:34px;height:34px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--green-900);
  border:none;
}
.property-card .thumb .price-tag{
  position:absolute; bottom:14px; right:14px;
  background:var(--green-950); color:var(--cream-100);
  font-size:13px; font-weight:700;
  padding:8px 14px; border-radius:10px;
}
.property-card .body{padding:20px 22px; display:flex; flex-direction:column;}
.property-card h3{margin:0 0 6px; font-size:19px; color:var(--green-950);}
.property-card .loc{
  display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:13.5px; margin-bottom:16px;
}
.property-card .stats{
  display:flex; gap:26px; margin-bottom:18px; flex-wrap:wrap;
}
.property-card .stats .stat{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink);}
.property-card .stats .stat b{color:var(--green-950);}
.property-card .stats .stat svg{color:var(--gold-600);}
.property-card .foot{
  margin-top:auto; display:flex; align-items:center; justify-content:flex-start;
}
.property-card .foot a{
  color:var(--gold-600); font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px;
}

.pagination{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:30px;
}
.pagination button{
  width:38px;height:38px; border-radius:10px; border:1px solid var(--line); background:var(--white);
  color:var(--ink); font-weight:600;
}
.pagination button.active{background:var(--green-900); color:var(--cream-100); border-color:var(--green-900);}

/* ---------- filters sidebar ---------- */
.filters-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  position:sticky; top:104px;
}
.filters-panel h3{
  display:flex; align-items:center; gap:10px;
  font-size:17px; color:var(--green-950); margin:0 0 20px;
}
.filter-group{margin-bottom:22px;}
.filter-group > label{display:block; font-size:14px; font-weight:700; color:var(--green-950); margin-bottom:10px;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip-row button, .seg-row button{
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  padding:9px 14px; border-radius:10px; font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:8px; flex:1; justify-content:center;
}
.chip-row button.active, .seg-row button.active{background:var(--green-900); color:var(--cream-100); border-color:var(--green-900);}
.type-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.type-grid button{
  border:1px solid var(--line); background:var(--white); color:var(--ink-soft);
  border-radius:12px; padding:12px 4px; font-size:12.5px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.type-grid button.active{background:var(--green-900); color:var(--cream-100); border-color:var(--green-900);}
.seg-row{display:flex; gap:8px;}
select.select-field{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 14px; background:var(--white); color:var(--ink); font-size:14px;
}
.range-row{
  display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin-top:8px;
}
input[type="range"]{width:100%; accent-color:var(--gold-600); margin-top:6px;}
.filters-panel .more-link{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--green-950); padding:10px 0; margin-bottom:6px;
}
.filters-actions{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.filters-actions .reset{
  background:transparent; color:var(--ink-soft); border:none; font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.help-box{
  margin-top:22px; background:var(--cream-200); border-radius:16px; padding:20px; text-align:center;
}
.help-box h4{margin:0 0 4px; font-size:15px; color:var(--green-950);}
.help-box p{margin:0 0 14px; font-size:13px; color:var(--ink-soft);}

/* ---------- empty state ---------- */
.empty-state{
  text-align:center; padding:70px 20px; border:1px dashed var(--line); border-radius:var(--radius-lg); background:var(--white);
}
.empty-state .ic{width:52px;height:52px; margin:0 auto 16px; color:var(--gold-600);}
.empty-state h3{margin:0 0 8px; color:var(--green-950);}
.empty-state p{margin:0; color:var(--ink-soft); font-size:14px;}

/* ---------- dashboard ---------- */
.dash-shell{display:grid; grid-template-columns:260px 1fr; min-height:calc(100vh - 89px);}
.admin-mobile-nav{display:none}
.dash-side{
  background:var(--green-950); color:var(--cream-200); padding:30px 20px;
}
.dash-side .dash-brand{display:flex; align-items:center; gap:10px; margin-bottom:34px; padding:0 6px;}
.dash-side .dash-brand .mark{width:38px;height:38px; border:2px solid var(--gold-500); border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--gold-500);}
.dash-side .dash-brand span{font-weight:800; font-size:16px;}
.dash-nav a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; font-size:14.5px; color:var(--cream-300); margin-bottom:4px; font-weight:500;
}
.dash-nav a.active, .dash-nav a:hover{background:rgba(255,255,255,.08); color:var(--white);}
.dash-main{padding:34px 40px; background:var(--cream-100);}
.dash-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:20px; flex-wrap:wrap;}
.dash-top h1{margin:0 0 4px; font-size:26px; color:var(--green-950);}
.dash-top p{margin:0; color:var(--ink-soft); font-size:14px;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:30px;}
.stat-card{background:var(--white); border:1px solid var(--line); border-radius:18px; padding:22px;}
.stat-card .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.stat-card .ic{width:40px;height:40px; border-radius:10px; background:var(--cream-200); color:var(--gold-600); display:flex; align-items:center; justify-content:center;}
.stat-card .num{font-size:28px; font-weight:800; color:var(--green-950);}
.stat-card .label{font-size:13.5px; color:var(--ink-soft);}
.stat-card .trend{font-size:12.5px; font-weight:700; color:#3fae64;}

.table-card{background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden;}
.table-card .table-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap;}
.table-card .table-head h3{margin:0; font-size:17px; color:var(--green-950);}
.search-mini{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--ink-soft); font-size:13.5px; min-width:220px;}
.search-mini input{border:none; outline:none; background:transparent; width:100%; font-size:13.5px;}

table{width:100%; border-collapse:collapse;}
thead th{
  text-align:right; font-size:12.5px; color:var(--ink-soft); font-weight:700; padding:12px 24px; border-bottom:1px solid var(--line); background:var(--cream-100);
}
tbody td{padding:16px 24px; font-size:14px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.prop-cell{display:flex; align-items:center; gap:12px;}
.prop-cell .thumb{width:52px;height:52px; border-radius:10px; background-size:cover; background-position:center; flex-shrink:0;}
.prop-cell b{display:block; color:var(--green-950); font-size:14px;}
.prop-cell span{font-size:12.5px; color:var(--ink-soft);}
.status-pill{padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; display:inline-block;}
.status-pill.rented{background:#e7f3ea; color:#2f8f52;}
.status-pill.available{background:#fdf1e0; color:var(--gold-600);}
.status-pill.sold{background:#efe9f6; color:#7a5fb8;}
.row-actions{display:flex; gap:8px;}
.row-actions button{
  width:32px;height:32px; border-radius:9px; border:1px solid var(--line); background:var(--white); color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
}
.row-actions button:hover{color:var(--green-950); border-color:var(--green-950);}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,42,32,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--white); border-radius:20px; padding:30px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
}
.modal h3{margin:0 0 20px; color:var(--green-950); font-size:19px;}
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-size:13.5px; font-weight:700; color:var(--green-950); margin-bottom:7px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:14px; font-family:inherit; background:var(--cream-100);
}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.modal-actions{display:flex; gap:10px; margin-top:22px;}

/* ---------- site settings ---------- */
.settings-shell{width:min(1180px,calc(100% - 36px));margin:42px auto 80px;direction:rtl}
.settings-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.settings-heading span{color:var(--gold-600);font-size:13px;font-weight:800}
.settings-heading h1{margin:6px 0;font-size:34px;color:var(--green-950)}
.settings-heading p{margin:0;color:var(--ink-soft)}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.settings-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.settings-card h2{margin:0 0 20px;color:var(--green-950);font-size:19px}
.settings-card label{display:block;margin-bottom:15px;color:var(--green-950);font-size:13px;font-weight:700}
.settings-card input:not([type="checkbox"]),.settings-card textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fff;color:var(--ink);font:inherit;outline:0}
.settings-card input:focus,.settings-card textarea:focus{border-color:var(--gold-600);box-shadow:0 0 0 3px rgba(181,137,63,.12)}
.settings-card input[type="file"]{padding:8px}
.settings-logo-preview{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:12px}
.settings-logo-preview img{width:150px;height:55px;object-fit:contain;border:1px solid var(--line);border-radius:9px;padding:5px}
.settings-switches{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.settings-switches label,.settings-check{display:flex!important;align-items:center;gap:8px;margin:0!important;font-weight:600!important}
.settings-switches input,.settings-check input{accent-color:var(--green-900)}
.settings-actions{grid-column:1/-1;display:flex;justify-content:flex-start}
@media(max-width:800px){.settings-shell{width:calc(100% - 24px);margin-top:25px}.settings-heading{align-items:flex-start;flex-direction:column}.settings-grid{grid-template-columns:1fr}.settings-actions{grid-column:auto}.settings-switches{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{
  background:var(--green-950); color:var(--cream-300); margin-top:70px; padding:50px 0 0;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid h4{color:var(--white); font-size:15px; margin:0 0 16px;}
.footer-grid p{font-size:13.5px; line-height:1.9; color:var(--cream-300); margin:0;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid ul a{font-size:13.5px; color:var(--cream-300);}
.footer-grid ul a:hover{color:var(--gold-300);}
.footer-contact li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--cream-300); margin-bottom:12px;}
.footer-contact li svg{color:var(--gold-500); flex-shrink:0;}
.footer-social{display:flex; gap:10px; margin-top:16px;}
.footer-social a{
  width:36px;height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-brand .mark{width:40px;height:40px; border:2px solid var(--gold-500); border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--gold-500);}
.footer-bottom{
  text-align:center; padding:22px 0; font-size:13px; color:var(--cream-300); opacity:.75;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .listing-layout{grid-template-columns:1fr;}
  .filters-panel{position:static;}
  .path-cards{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:30px;}
  .dash-shell{grid-template-columns:minmax(0,1fr);}
  .dash-side{display:block;min-width:0;padding:9px 12px;position:sticky;top:0;z-index:40;}
  .dash-side .dash-brand{display:none;}
  .dash-nav{display:flex;gap:5px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
  .dash-nav::-webkit-scrollbar,.admin-mobile-nav::-webkit-scrollbar{display:none;}
  .dash-nav a{flex:0 0 auto;margin:0;padding:10px 12px;font-size:12px;}
  .dash-main{width:100%;min-width:0;box-sizing:border-box;padding:24px 18px;}
  .admin-mobile-nav{display:flex;align-items:center;gap:6px;width:calc(100% - 20px);margin:10px auto 0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
  .admin-mobile-nav a{flex:0 0 auto;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--green-950);font-size:12px;font-weight:700;text-decoration:none;}
}
@media (max-width: 680px){
  .container{padding:0 18px;}
  .hero h1{font-size:30px;}
  .path-arches{grid-template-columns:repeat(3,1fr); row-gap:16px;}
  .path-arch:nth-child(4), .path-arch:nth-child(5){display:none;}
  .search-bar{flex-direction:column; margin-bottom:16px;}
  .search-bar .field{border-left:none; border-bottom:1px solid var(--line);}
  .trust-grid{grid-template-columns:1fr 1fr;}
  .property-card{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .dash-main{padding:18px 12px;}
  .project-admin-shell,.project-admin-grid,.project-admin-card,.admin-project-form{min-width:0;}
  .project-admin-grid{grid-template-columns:minmax(0,1fr);}
  .dash-top{align-items:stretch;}
  .dash-top>.btn{justify-content:center;}
  .dash-side{padding:7px 8px;}
  .dash-nav a{padding:9px 10px;font-size:11px;}
  .form-grid-2{grid-template-columns:1fr;}
}




/* =========================================================
   اعرض عقارك
   ========================================================= */

.list-property-page {
    position: relative;
    min-height: calc(100vh - 82px);
    padding: 70px 20px;
    background:
        linear-gradient(
            rgba(8, 35, 28, 0.88),
            rgba(8, 35, 28, 0.92)
        ),
        url("/static/hero-bg.jpg") center / cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl;
}

.list-property-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.list-property-container {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    margin: 0 auto;
}

.list-property-header {
    text-align: center;
    margin-bottom: 32px;
    color: #ffffff;
}

.list-property-logo {
    margin-bottom: 20px;
}

.list-property-logo img {
    width: auto;
    max-width: 210px;
    height: 70px;
    object-fit: contain;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.list-property-header h1 {
    margin: 0 0 12px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: #ffffff;
}

.list-property-header p {
    margin: 0 auto;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.9;
}

.property-form,
.property-success {
    background: rgba(250, 247, 239, 0.98);
    border: 1px solid rgba(190, 145, 48, 0.55);
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.property-form {
    text-align: right;
}

.form-group {
    margin-bottom: 22px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 9px;
    color: #173d31;
    font-size: 15px;
    font-weight: 700;
}

.form-group label span {
    color: #b58a32;
}

.form-group label small {
    color: #777;
    font-weight: 400;
    font-size: 12px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8d1c3;
    border-radius: 12px;
    background: #ffffff;
    color: #173d31;
    font-family: inherit;
    font-size: 15px;
    padding: 13px 15px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input,
.form-group select {
    height: 50px;
}

.form-group textarea {
    min-height: 145px;
    resize: vertical;
    line-height: 1.8;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #b58a32;
    box-shadow: 0 0 0 3px rgba(181, 138, 50, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
}

.property-submit-btn {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: #123b30;
    color: #ffffff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.property-submit-btn:hover {
    background: #0d3027;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(18, 59, 48, 0.22);
}

.property-cancel-btn {
    display: block;
    margin-top: 15px;
    text-align: center;
    color: #173d31;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.property-cancel-btn:hover {
    color: #b58a32;
}

.property-success {
    text-align: center;
}

.success-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #123b30;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 800;
}

.property-success h2 {
    margin: 0 0 12px;
    color: #173d31;
    font-size: 28px;
}

.property-success p {
    margin: 0 0 25px;
    color: #666;
}

.whatsapp-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 25px;
    border-radius: 13px;
    background: #1f8f4d;
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    transition: transform 0.2s ease;
}

.whatsapp-submit-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.back-home-btn {
    display: block;
    margin-top: 18px;
    color: #173d31;
    text-decoration: none;
    font-weight: 700;
}

/* الجوال */

@media (max-width: 700px) {

    .list-property-page {
        padding: 45px 15px;
    }

    .property-form,
    .property-success {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .list-property-header h1 {
        font-size: 34px;
    }

    .list-property-header p {
        font-size: 15px;
    }

    .list-property-logo img {
        max-width: 170px;
        height: 60px;
    }
}



/* =========================================================
   صفحة اعرض عقارك - التصميم المرجعي
   ========================================================= */

.list-property-screen {
  min-height: 100vh;
    width: 100%;
    background: #f5f2eb;
    display: flex;
    justify-content: center;
  align-items: center;
  padding: 32px 20px;
    box-sizing: border-box;
    direction: rtl;
}

.list-property-card {
    width: min(548px, 100%);
    background: #fffdfa;
    border: 1px solid rgba(35, 35, 35, 0.12);
    border-radius: 32px;
    padding: 36px 34px;
    box-sizing: border-box;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.07);
}

.list-property-heading {
    text-align: center;
    margin-bottom: 34px;
}

.list-property-small-title {
    color: #222;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 7px;
}

.list-property-heading h1 {
    margin: 0;
    color: #111;
    font-size: clamp(38px, 5vw, 52px);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -1.5px;
}

.list-property-heading p {
    margin: 17px 0 0;
    color: #8d8d8d;
    font-size: 19px;
    line-height: 1.7;
    font-weight: 500;
}

.list-property-form {
    width: 100%;
}

.property-message-field {
    width: 100%;
    margin-bottom: 24px;
}

.property-message-field textarea {
    width: 100%;
    height: 258px;
    box-sizing: border-box;
    display: block;

    padding: 30px 25px;

    border: 2px solid #e5e3df;
    border-radius: 27px;

    background: #fff;
    color: #222;

    font-family: inherit;
    font-size: 20px;
    line-height: 1.8;

    resize: none;
    outline: none;

    text-align: right;
    direction: rtl;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.property-message-field textarea::placeholder {
    color: #b8b8b8;
    opacity: 1;
}

.property-message-field textarea:focus {
    border-color: #cfcac1;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.025);
}

.property-phone-field {
    width: 100%;
    margin-bottom: 18px;
}

.property-phone-field input {
    width: 100%;
    height: 76px;
    box-sizing: border-box;

    padding: 0 25px;

    border: 2px solid #e5e3df;
    border-radius: 25px;

    background: #fff;

    color: #222;

    font-family: inherit;
    font-size: 20px;

    outline: none;

    text-align: right;
    direction: rtl;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.property-phone-field input::placeholder {
    color: #b8b8b8;
    opacity: 1;
}

.property-phone-field input:focus {
    border-color: #cfcac1;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.025);
}

.list-property-submit {
    width: 100%;
    height: 76px;

    border: 0;
    border-radius: 24px;

    background: #151b19;
    color: #fff;

    font-family: inherit;
    font-size: 23px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.list-property-submit:hover {
    background: #202825;
    transform: translateY(-1px);
}

.list-property-submit:active {
    transform: translateY(0);
}


/* =========================================================
   الجوال
   ========================================================= */

@media (max-width: 600px) {

    .list-property-screen {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px 18px;
    }

    .list-property-card {
        width: 100%;
    max-width: 440px;
    border-radius: 30px;
    padding: 26px 24px;
    }

    .list-property-heading {
      margin-bottom: 22px;
    }

    .list-property-heading p {
      margin-top: 10px;
    }

    .property-message-field {
      margin-bottom: 16px;
    }

    .list-property-small-title {
        font-size: 20px;
    }

    .list-property-heading h1 {
      font-size: clamp(24px, 7vw, 28px);
      letter-spacing: 0;
      white-space: nowrap;
    }

    .list-property-heading p {
      font-size: 15px;
      white-space: normal;
    }

    .property-message-field textarea {
      height: 160px;
      border-radius: 20px;
      font-size: 16px;
      padding: 19px 17px;
    }

    .property-phone-field input {
      height: 50px;
      border-radius: 18px;
      font-size: 16px;
    }

    .property-phone-field {
        margin-bottom: 14px;
    }

    .list-property-submit {
      height: 50px;
      border-radius: 17px;
      font-size: 17px;
    }
}

  @media (max-width: 360px) {
    .list-property-card {
      padding: 24px 18px;
    }

    .list-property-heading h1 {
      font-size: 24px;
      white-space: normal;
    }
  }


/* =========================================================
   اتساع العقارية — الصفحة الرئيسية
   التصميم الرئيسي
   ========================================================= */

.hero-section {
    position: relative;
    min-height: calc(100vh - 86px);
    overflow: hidden;
    background: #f4f0e8;
    direction: rtl;
}

.hero-background {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(244, 240, 232, 0.94) 0%,
            rgba(244, 240, 232, 0.80) 43%,
            rgba(244, 240, 232, 0.97) 100%
        ),
        url("/static/hero-bg.jpg") center center / cover no-repeat;
    opacity: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(1320px, calc(100% - 70px));
    margin: 0 auto;
    padding: 70px 0 55px;
}

/* =========================================================
   العنوان
   ========================================================= */

.hero-heading {
    text-align: center;
    margin-bottom: 35px;
}

.hero-heading h1 {
    margin: 0;
    color: #173c30;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -2px;
}

.hero-heading p {
    margin: 22px auto 0;
    color: #6e756f;
    font-size: 18px;
    line-height: 1.9;
    font-weight: 500;
}

/* =========================================================
   منطقة القوس
   ========================================================= */

.property-orbit {
    position: relative;
    width: min(900px, 100%);
    height: 490px;
    margin: 5px auto 0;
}

/* القوس الذهبي */

.golden-arc {
    position: absolute;

    width: 610px;
    height: 365px;

    right: 50%;
    top: 45px;

    transform: translateX(50%);

    border: 3px solid #bd913b;
    border-bottom: 0;

    border-radius: 330px 330px 0 0;

    opacity: 0.95;
}

/* =========================================================
   العناصر الخمسة
   ========================================================= */

.orbit-property {
    position: absolute;

    z-index: 8;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 125px;
    height: 125px;

    color: #173c30;
    text-decoration: none;

    background: rgba(244, 240, 232, 0.94);

    border-radius: 50%;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.orbit-property:hover {
    color: #b78a35;
    transform: translateY(-5px);
}

.orbit-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 5px;
}

.orbit-icon svg {
    width: 52px;
    height: 52px;

    fill: none;
    stroke: #b78a35;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.orbit-label {
    color: #173c30;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.orbit-property:hover .orbit-label {
    color: #b78a35;
}

/* أدوار */

.orbit-floor {
    top: 145px;
    right: calc(50% + 355px);
    transform: translateX(50%);
}

/* شقة */

.orbit-apartment {
    top: 45px;
    right: calc(50% + 175px);
    transform: translateX(50%);
}

/* فلل */

.orbit-villas {
    top: 45px;
    right: calc(50% - 175px);
    transform: translateX(50%);
}

/* أرض */

.orbit-land {
    top: 145px;
    right: calc(50% - 355px);
    transform: translateX(50%);
}

/* اعرض عقارك */

.orbit-list-property {
    top: 285px;
    right: 50%;
    transform: translateX(50%);
}

.orbit-list-property:hover {
    transform: translateX(50%) translateY(-5px);
}

/* =========================================================
   البوابة المركزية
   ========================================================= */

.main-property-gate {
    position: absolute;

    z-index: 12;

    right: 50%;
    top: 195px;

    transform: translateX(50%);

    width: 270px;
    height: 165px;

    border-radius: 32px;

    background: #173c30;

    border: 2px solid #b78a35;

    box-shadow:
        0 18px 40px rgba(23, 60, 48, 0.20);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.main-property-gate:hover {
    transform: translateX(50%) translateY(-5px);

    box-shadow:
        0 24px 50px rgba(23, 60, 48, 0.28);
}

.gate-building {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 4px;
}

.gate-building svg {
    width: 48px;
    height: 48px;

    fill: none;

    stroke: #d1a04b;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.gate-text {
    display: flex;
    align-items: center;
    gap: 15px;

    color: #ffffff;

    font-size: 22px;
}

.gate-text strong {
    font-weight: 800;
}

.gate-separator {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #d1a04b;

    font-size: 14px;
}

.gate-separator i {
    display: block;

    width: 25px;
    height: 1px;

    background: #d1a04b;
}

/* =========================================================
   شريط البحث
   ========================================================= */

.hero-search {
    width: min(1080px, 100%);

    min-height: 78px;

    margin: -5px auto 0;

    padding: 8px;

    background: #ffffff;

    border: 1px solid rgba(23, 60, 48, 0.08);

    border-radius: 22px;

    box-shadow:
        0 15px 45px rgba(36, 45, 39, 0.10);

    display: flex;
    align-items: center;

    gap: 8px;
}

.search-location {
    height: 60px;

    min-width: 150px;

    padding: 0 20px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #173c30;

    border-left: 1px solid #e8e5de;

    font-weight: 700;
}

.search-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: #b78a35;

    stroke-width: 1.8;
}

.search-input-wrapper {
    flex: 1;
}

.search-input-wrapper input {
    width: 100%;
    height: 60px;

    border: 0;
    outline: 0;

    padding: 0 18px;

    background: transparent;

    font-family: inherit;
    font-size: 16px;

    color: #173c30;

    text-align: right;
}

.search-input-wrapper input::placeholder {
    color: #aaa;
}

.advanced-search {
    height: 60px;

    padding: 0 20px;

    border: 0;
    border-right: 1px solid #e8e5de;

    background: transparent;

    color: #173c30;

    font-family: inherit;
    font-weight: 700;

    display: flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;
}

.advanced-search svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: #b78a35;

    stroke-width: 1.7;

    stroke-linecap: round;
}

.search-button {
    height: 60px;

    min-width: 125px;

    border: 0;

    border-radius: 15px;

    background: #173c30;

    color: #ffffff;

    font-family: inherit;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition: background 0.2s ease;
}

.search-button:hover {
    background: #102f26;
}

/* =========================================================
   المزايا الأربعة
   ========================================================= */



.home-feature {
    min-height: 100px;

    padding: 20px;

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid rgba(23, 60, 48, 0.07);

    border-radius: 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.035);
}





.home-feature div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.home-feature strong {
    color: #173c30;

    font-size: 15px;
    font-weight: 800;
}

.home-feature div span {
    color: #858a86;

    font-size: 12px;

    line-height: 1.6;
}

/* =========================================================
   الترويسة
   ========================================================= */

.site-header {
    position: relative;
    z-index: 100;

    width: 100%;

    height: 86px;

    background: #f4f0e8;

    border-bottom: 1px solid rgba(23, 60, 48, 0.08);
}

.header-inner {
    width: min(1420px, calc(100% - 60px));

    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 35px;
}

.site-logo {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    text-decoration: none;
}

.site-logo img {
    width: auto;

    height: 62px;

    max-width: 190px;

    object-fit: contain;

    display: block;

    border: 0;

    background: transparent;
}

.main-nav {
    flex: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: clamp(25px, 3vw, 52px);
}

.main-nav a {
    position: relative;

    color: #173c30;

    text-decoration: none;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    white-space: nowrap;

    padding: 31px 0;
}

.main-nav a::after {
    content: "";

    position: absolute;

    bottom: 20px;

    right: 0;

    width: 0;

    height: 2px;

    background: #b78a35;

    transition: width 0.2s ease;
}

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

.header-contact-btn {
    flex: 0 0 auto;

    min-width: 150px;

    height: 48px;

    padding: 0 18px;

    border-radius: 15px;

    background: #173c30;

    color: #ffffff;

    text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(23, 60, 48, 0.14);
}

.header-contact-btn svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: #d1a04b;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-menu-button {
    display: none;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    position: relative;

    background: #173c30;

    color: #ffffff;

    direction: rtl;
}

.footer-inner {
    width: min(1320px, calc(100% - 70px));

    margin: 0 auto;

    padding: 55px 0 40px;

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1.2fr
        1fr;

    gap: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}

.footer-column h3,
.footer-column h4 {
    margin: 0 0 8px;

    color: #d1a04b;

    font-weight: 800;
}

.footer-column p {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    line-height: 1.8;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.78);

    text-decoration: none;

    font-size: 14px;
}

.footer-column a:hover {
    color: #d1a04b;
}

.footer-social {
    display: flex;

    gap: 10px;

    direction: ltr;
}

.footer-social a {
    width: 37px;
    height: 37px;

    border: 1px solid rgba(209, 160, 75, 0.55);

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d1a04b;

    text-decoration: none;

    font-size: 17px;
}

.footer-logo-column {
    display: flex;

    justify-content: center;
    align-items: flex-start;
}

.footer-logo-column img {
    width: auto;

    max-width: 190px;

    height: 70px;

    object-fit: contain;
}

.footer-bottom {
    padding: 18px 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.10);

    text-align: center;

    color: rgba(255, 255, 255, 0.55);

    font-size: 12px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1050px) {

    .header-inner {
        width: calc(100% - 35px);
        gap: 20px;
    }

    .main-nav {
        gap: 20px;
    }

    .main-nav a {
        font-size: 14px;
    }

    .header-contact-btn {
        min-width: 125px;
    }

    .property-orbit {
        transform: scale(0.9);
        transform-origin: center top;
    }

    .hero-search {
        width: 100%;
    }
}

@media (max-width: 800px) {

    .site-header {
        height: 72px;
    }

    .header-inner {
        width: calc(100% - 30px);
    }

    .site-logo img {
        height: 52px;
        max-width: 155px;
    }

    .main-nav {
        display: none;
    }

    .main-nav.mobile-open {
        position: absolute;

        display: flex;
        flex-direction: column;

        top: 72px;
        right: 15px;
        left: 15px;

        padding: 20px;

        background: #f4f0e8;

        border-radius: 0 0 20px 20px;

        box-shadow: 0 15px 35px rgba(0,0,0,0.10);

        gap: 0;
    }

    .main-nav.mobile-open a {
        width: 100%;
        padding: 14px 5px;
    }

    .main-nav.mobile-open a::after {
        bottom: 5px;
    }

    .header-contact-btn {
        margin-right: auto;

        min-width: auto;

        width: 46px;

        padding: 0;

        border-radius: 13px;
    }

    .header-contact-btn span {
        display: none;
    }

    .mobile-menu-button {
        width: 44px;
        height: 44px;

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 5px;

        border: 0;

        border-radius: 12px;

        background: #173c30;

        cursor: pointer;
    }

    .mobile-menu-button span {
        width: 20px;
        height: 2px;

        background: #d1a04b;

        border-radius: 2px;
    }

    .hero-content {
        width: calc(100% - 30px);

        padding-top: 45px;
    }

    .hero-heading h1 {
        font-size: 43px;
    }

    .hero-heading p {
        font-size: 15px;
    }

    .property-orbit {
        width: 100%;

        height: 450px;

        transform: scale(0.72);
        transform-origin: center top;

        margin-bottom: -90px;
    }

    .hero-search {
        flex-wrap: wrap;

        padding: 10px;
    }

    .search-location {
        width: 100%;

        border-left: 0;
        border-bottom: 1px solid #e8e5de;
    }

    .search-input-wrapper {
        width: 100%;
        flex: auto;
    }

    .advanced-search {
        flex: 1;

        border-right: 0;
    }

    .search-button {
        flex: 1;
    }

    

    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {

    .hero-heading h1 {
        font-size: 37px;
    }

    .property-orbit {
        transform: scale(0.56);
        margin-bottom: -170px;
    }

    

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-logo-column {
        justify-content: flex-start;
    }
}

/* =========================================================
   FINAL HOMEPAGE POSITION FIX
   ضبط القوس والعناصر حسب اللقطة الأخيرة
   ========================================================= */

/* الدائرة الخاصة بـ "اعرض عقارك" تظهر أسفل البطاقة المركزية */
.orbit-list-property {
    top: 355px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    z-index: 25 !important;
}

.orbit-list-property:hover {
    transform: translateX(50%) translateY(-5px) !important;
}

/* رفع البطاقة المركزية قليلاً حتى لا تغطي دائرة "اعرض عقارك" */
.main-property-gate {
    top: 175px !important;
    height: 160px !important;
    z-index: 30 !important;
}

/* رفع القوس قليلاً وتحسين اتزانه */
.golden-arc {
    top: 35px !important;
}

/* إبقاء القوس خلف الدوائر والبطاقة */
.golden-arc {
    z-index: 1;
}

/* الدوائر فوق القوس */
.orbit-property {
    z-index: 10;
}

/* البطاقة المركزية فوق جميع العناصر */
.main-property-gate {
    z-index: 30;
}

/* الحفاظ على موضع "اعرض عقارك" في الشاشات الصغيرة */
@media (max-width: 800px) {
    .orbit-list-property {
        top: 355px !important;
    }

    .main-property-gate {
        top: 175px !important;
    }
}


/* =========================================================
   المشاريع + الخريطة التفاعلية + إدارة المشاريع
   ========================================================= */
.projects-page{background:#f5f1e8;min-height:100vh;direction:rtl;color:#173c30}
.projects-hero{padding:70px 20px 42px;text-align:center;background:linear-gradient(180deg,#173c30 0%,#214d3e 100%);color:#fff}
.projects-hero-inner{max-width:900px;margin:auto}.projects-kicker{display:inline-block;color:#d1a04b;font-weight:800;font-size:14px;margin-bottom:10px}.projects-hero h1{margin:0;font-size:clamp(34px,5vw,58px);font-weight:900}.projects-hero p{margin:16px auto 0;color:rgba(255,255,255,.75);font-size:17px;line-height:1.9}
.projects-shell{width:min(1380px,calc(100% - 36px));margin:-18px auto 70px;position:relative}.projects-filterbar{background:#fff;border:1px solid #e5e0d6;border-radius:22px;padding:12px;display:flex;gap:10px;align-items:center;box-shadow:0 14px 35px rgba(20,40,30,.08);margin-bottom:18px}.project-filter{border:1px solid #e5e0d6;background:#faf8f3;color:#173c30;border-radius:14px;padding:13px 22px;font:700 14px inherit;cursor:pointer}.project-filter.active,.project-filter:hover{background:#173c30;color:#fff;border-color:#173c30}.projects-filterbar select{margin-right:auto;border:1px solid #e5e0d6;border-radius:14px;background:#fff;padding:13px 18px;font:600 14px inherit;color:#173c30;min-width:180px}
.projects-map-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;direction:ltr}.projects-list-panel,.projects-map-wrap{background:#fff;border:1px solid #e5e0d6;border-radius:24px;overflow:hidden;box-shadow:0 10px 30px rgba(20,40,30,.06)}.projects-list-panel{direction:rtl;max-height:650px}.projects-list-head{padding:20px;border-bottom:1px solid #eee9df;display:flex;justify-content:space-between;align-items:center}.projects-list-head div{display:flex;flex-direction:column;gap:4px}.projects-list-head span:first-child{font-size:13px;color:#8a8f89}.projects-list-head strong{font-size:18px}.map-live-dot{color:#9a7831;font-size:12px!important}.projects-list{padding:8px;overflow:auto;max-height:575px}.project-list-item{width:100%;border:0;border-bottom:1px solid #eee9df;background:#fff;display:flex;align-items:center;gap:12px;padding:15px 10px;text-align:right;cursor:pointer;color:#173c30}.project-list-item:hover{background:#faf7ef}.project-list-icon{width:42px;height:42px;border-radius:13px;background:#f2e7d0;color:#b78a35;display:grid;place-items:center;font-size:22px;flex:none}.project-list-copy{display:flex;flex-direction:column;gap:4px;flex:1}.project-list-copy strong{font-size:14px}.project-list-copy small{font-size:11px;color:#8b918c}.project-list-arrow{color:#b78a35;font-size:18px}.projects-map-wrap{position:relative;direction:rtl}.projects-map-wrap #projectsMap{height:650px;width:100%}.map-overlay-note{position:absolute;z-index:500;bottom:15px;right:15px;background:rgba(23,60,48,.92);color:#fff;padding:10px 15px;border-radius:12px;font-size:12px;box-shadow:0 8px 22px rgba(0,0,0,.15)}
.project-map-icon-wrap{background:transparent;border:0}.project-map-marker{width:118px;min-height:45px;background:#173c30;border:2px solid #d1a04b;border-radius:14px;color:#fff;display:flex;align-items:center;gap:7px;padding:6px 9px;box-shadow:0 7px 18px rgba(0,0,0,.18);direction:rtl}.project-map-marker span{width:30px;height:30px;border-radius:9px;background:#d1a04b;color:#173c30;display:grid;place-items:center;font-size:17px;flex:none}.project-map-marker b{font-size:11px;line-height:1.3}.project-popup{font-family:Tajawal,Arial,sans-serif;min-width:230px}.project-popup-tag{display:inline-block;background:#f2e7d0;color:#9b7834;border-radius:8px;padding:4px 8px;font-size:10px;font-weight:800}.project-popup h3{margin:9px 0 5px;color:#173c30;font-size:17px}.project-popup p{margin:0 0 10px;color:#777;font-size:12px}.project-popup-meta{display:flex;gap:6px;flex-wrap:wrap}.project-popup-meta span{background:#f6f4ef;border-radius:7px;padding:5px 7px;font-size:10px}.project-popup a{display:block;margin-top:12px;color:#9b7834;font-weight:800;text-decoration:none}
.project-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}.map-project-card{background:#fff;border:1px solid #e5e0d6;border-radius:22px;overflow:hidden;box-shadow:0 8px 24px rgba(20,40,30,.05)}.map-project-image{height:190px;position:relative;background:#ece8de}.map-project-image img{width:100%;height:100%;object-fit:cover}.map-project-image span{position:absolute;top:12px;right:12px;background:rgba(255,253,248,.94);color:#173c30;border-radius:10px;padding:7px 10px;font-size:11px;font-weight:800}.map-project-body{padding:20px}.map-project-category{font-size:11px;color:#b78a35;font-weight:800}.map-project-body h2{font-size:21px;margin:7px 0}.map-project-location{font-size:12px;color:#7f857f}.map-project-body>p:not(.map-project-location){font-size:13px;color:#727872;line-height:1.8;min-height:47px}.map-project-meta{display:flex;gap:8px;margin:12px 0}.map-project-meta span{background:#f4f0e7;border-radius:8px;padding:7px 9px;font-size:11px}.map-project-body>a{color:#9b7834;text-decoration:none;font-weight:800;font-size:13px}
.project-detail-page{background:#f5f1e8;min-height:100vh}.project-detail-hero{background:#173c30;color:#fff;padding:75px max(25px,calc((100% - 1300px)/2)) 55px}.project-detail-hero span{color:#d1a04b;font-size:12px;font-weight:800}.project-detail-hero h1{font-size:clamp(36px,5vw,60px);margin:10px 0}.project-detail-hero p{color:#cbd7d1}.project-detail-shell{width:min(1300px,calc(100% - 36px));margin:-18px auto 70px;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 14px 40px rgba(20,40,30,.08)}.project-detail-main{display:grid;grid-template-columns:1.05fr .95fr}.project-detail-image{width:100%;height:470px;object-fit:cover}.project-detail-copy{padding:55px 45px}.project-detail-copy h2{font-size:34px;margin:10px 0 16px}.project-detail-copy p{color:#717771;line-height:2}.detail-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}.detail-facts div{background:#f6f2e9;padding:15px;border-radius:13px}.detail-facts small,.detail-facts strong{display:block}.detail-facts small{font-size:10px;color:#858a85}.detail-facts strong{font-size:13px;margin-top:6px}.project-detail-map-wrap{padding:20px;border-top:1px solid #eee9df}.project-detail-map-wrap #detailMap{height:390px;border-radius:18px;overflow:hidden}
.project-admin-shell,.messages-admin-shell{width:min(1300px,calc(100% - 36px));margin:45px auto 80px}.project-admin-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.project-admin-head>div>span{font-size:12px;color:#b78a35;font-weight:800}.project-admin-head h1{margin:5px 0;font-size:36px}.project-admin-head p{color:#7b817b;margin:0}.project-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.project-admin-card{background:#fff;border:1px solid #e4dfd5;border-radius:22px;padding:24px;box-shadow:0 10px 30px rgba(20,40,30,.05)}.project-admin-card h2{margin:0 0 20px}.admin-project-form{display:flex;flex-direction:column;gap:12px}.admin-project-form input,.admin-project-form select,.admin-project-form textarea{width:100%;box-sizing:border-box;border:1px solid #ded9cf;border-radius:12px;padding:13px;font:inherit;background:#fff;outline:0}.admin-project-form textarea{min-height:120px;resize:vertical}.admin-checks{display:flex;flex-wrap:wrap;gap:14px}.admin-checks label{font-size:13px}.admin-checks input{width:auto}.admin-project-form #adminProjectMap{height:300px;border-radius:14px;overflow:hidden}.admin-project-list{display:flex;flex-direction:column}.admin-project-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 0;border-bottom:1px solid #eee9df}.admin-project-row>div:first-child{display:flex;flex-direction:column;gap:4px}.admin-project-row small{color:#818781;font-size:11px}.admin-project-actions{display:flex;gap:8px}.admin-project-actions a,.admin-project-actions button{border:1px solid #ddd6c9;background:#faf8f3;color:#173c30;border-radius:9px;padding:7px 10px;font:700 11px inherit;text-decoration:none;cursor:pointer}.messages-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.message-admin-card{padding:16px 0;border-bottom:1px solid #eee9df;display:grid;grid-template-columns:1fr auto;gap:5px}.message-admin-card strong{font-size:14px}.message-admin-card span,.message-admin-card small{font-size:11px;color:#858b85}.message-admin-card p{grid-column:1/-1;margin:7px 0 0;color:#555;line-height:1.8;font-size:13px}

@media(max-width:900px){.projects-filterbar{flex-wrap:wrap}.projects-filterbar select{margin-right:0;flex:1}.projects-map-layout{grid-template-columns:1fr;direction:rtl}.projects-list-panel{order:2;max-height:none}.projects-list{max-height:260px}.projects-map-wrap{order:1}.projects-map-wrap #projectsMap{height:500px}.project-cards-grid{grid-template-columns:repeat(2,1fr)}.project-detail-main{grid-template-columns:1fr}.project-detail-image{height:330px}.project-admin-grid,.messages-grid{grid-template-columns:1fr}}
@media(max-width:600px){.projects-shell,.project-admin-shell,.messages-admin-shell,.project-detail-shell{width:calc(100% - 20px)}.projects-hero{padding:48px 15px 34px}.projects-hero h1{font-size:34px}.projects-hero p{font-size:14px}.projects-filterbar{padding:9px;border-radius:18px;overflow-x:auto;flex-wrap:nowrap}.project-filter{padding:11px 15px;white-space:nowrap}.projects-filterbar select{min-width:145px}.projects-map-wrap #projectsMap{height:430px}.map-overlay-note{font-size:10px;bottom:10px;right:10px}.project-cards-grid{grid-template-columns:1fr}.map-project-image{height:210px}.project-detail-hero{padding:48px 18px 45px}.project-detail-copy{padding:32px 22px}.project-detail-copy h2{font-size:28px}.detail-facts{grid-template-columns:1fr}.project-detail-map-wrap{padding:10px}.project-detail-map-wrap #detailMap{height:330px}.project-admin-head{align-items:flex-start;flex-direction:column}.project-admin-head h1{font-size:28px}.project-admin-card{padding:17px}.admin-project-row{align-items:flex-start;flex-direction:column}.admin-project-actions{width:100%}.admin-project-actions a,.admin-project-actions button{flex:1;text-align:center}.project-map-marker{transform:scale(.88);transform-origin:center bottom}}