/* HERITAGE — الأساس. كل لون من tokens.css، لا قيمة لونية حرفية هنا. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--font-ar);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* display:flex/grid على عنصر يهزم سمة hidden — فنفرضها صراحةً */
[hidden]{display:none!important}
/* سمة width="686" في الـHTML تعمل كعرض محدَّد إن لم يضبطه CSS،
   فصورة بـheight وحدها تُفرد إلى 686px وتفقد نسبتها. */
.logo img,.foot-logo img,.drawer-head img,.login-logo{width:auto;object-fit:contain}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* أرقام وبريد وهاتف تبقى يسارية داخل صفحة يمينية،
   وإلا قلب الاتجاه «0.300» إلى «300.» و«+20 111» إلى «111 20+» */
.ltr,input[type="tel"],input[type="email"],input[type="number"],input[type="url"]{
  direction:ltr;text-align:start;
}
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="number"]{text-align:right}
.num{font-variant-numeric:tabular-nums}

/* ============ الشريط العلوي ============ */
.topbar{background:var(--ink);color:var(--on-dark);font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar a{color:var(--on-dark);transition:color .15s}
.topbar a:hover{color:var(--gold)}
.topbar-contact{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar-contact span{display:inline-flex;align-items:center;gap:7px}
.topbar-contact svg{width:14px;height:14px;flex:none;color:var(--gold)}
.lang{display:inline-flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,.18);border-radius:4px;overflow:hidden}
.lang button{background:none;border:0;padding:3px 11px;font-size:11.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;color:var(--on-dark-3)}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}

/* ============ الهيدر ============ */
/* اللوجو قرمزي على أبيض — وهو ما صُمّم له. فالهيدر أبيض لا غامق. */
.site-head{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav a{
  padding:9px 15px;border-radius:var(--radius-s);font-size:14.5px;font-weight:500;
  color:var(--body);position:relative;transition:color .15s,background .15s;
}
.nav a:hover{color:var(--primary);background:var(--mist)}
.nav a[aria-current="page"]{color:var(--primary);font-weight:700}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;inset-inline:15px;bottom:2px;height:2px;background:var(--gold);border-radius:2px;
}
.head-cta{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-s);padding:9px;cursor:pointer}
.burger svg{width:22px;height:22px;display:block}

/* ============ الأزرار ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 24px;border-radius:var(--radius-s);border:1px solid transparent;
  font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,transform .06s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-ghost:hover{background:var(--primary-tint)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1DA851}
.btn-lg{padding:15px 32px;font-size:16px}
.btn-sm{padding:8px 15px;font-size:13px}
.btn-block{width:100%}

/* ============ البطاقات ============ */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s,border-color .18s;
}
.card:hover{box-shadow:var(--shadow-lg);border-color:var(--gold-soft)}
.card-media{position:relative;aspect-ratio:4/3;background:var(--mist);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-title{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.45;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-loc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.card-loc svg{width:14px;height:14px;flex:none;color:var(--gold)}
.card-specs{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--muted);
  padding-top:4px;border-top:1px solid var(--line)}
.card-specs span{display:inline-flex;align-items:center;gap:6px}
.card-specs svg{width:15px;height:15px;flex:none;opacity:.65}
.card-price{margin-top:auto;padding-top:10px;font-size:19px;font-weight:700;color:var(--primary)}
.card-price small{font-size:13px;font-weight:500;color:var(--muted)}

/* شارة الغرض: للبيع قرمزي، للإيجار أزرق مخضر — لونان لا يلتبسان */
.badge{position:absolute;inset-block-start:12px;inset-inline-start:12px;
  padding:5px 13px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;letter-spacing:.01em}
.badge-sale{background:var(--sale)}
.badge-rent{background:var(--rent)}
.fav{position:absolute;inset-block-start:12px;inset-inline-end:12px;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.92);border:0;display:grid;place-items:center;cursor:pointer}
.fav svg{width:17px;height:17px;color:var(--ink)}
.fav[aria-pressed="true"] svg{color:var(--primary);fill:var(--primary)}
.shots{position:absolute;inset-block-end:12px;inset-inline-end:12px;background:rgba(28,23,25,.78);
  color:#fff;font-size:11.5px;padding:3px 9px;border-radius:4px;display:inline-flex;align-items:center;gap:5px}

/* ============ الشبكة ============ */
.grid{display:grid;gap:22px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* ============ عناوين الأقسام ============ */
.section{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.section-title{margin:0;font-size:27px;font-weight:700;color:var(--ink);letter-spacing:-.01em;position:relative;padding-bottom:12px}
.section-title::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:48px;height:3px;background:var(--gold);border-radius:2px}
.section-sub{margin:8px 0 0;color:var(--muted);font-size:14.5px}
.link-all{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:14px;flex:none}
.link-all svg{width:15px;height:15px}
[dir="rtl"] .link-all svg{transform:scaleX(-1)}

/* ============ الحالات ============ */
.state{padding:56px 24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);background:var(--mist)}
.state h3{margin:0 0 6px;color:var(--ink);font-size:17px}
.state p{margin:0;font-size:14px}
.skeleton{background:linear-gradient(90deg,var(--mist) 25%,#ECEAE8 50%,var(--mist) 75%);
  background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ الفوتر ============ */
.site-foot{background:var(--ink);color:var(--on-dark-2);font-size:14px;margin-top:40px}
.foot-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:52px 0 40px}
.foot-logo img{height:44px;width:auto;max-width:200px;object-fit:contain;margin-bottom:14px}
.foot-about{line-height:1.8;font-size:13.5px;max-width:34ch}
.foot-col h4{margin:0 0 16px;color:#fff;font-size:15px;font-weight:700;position:relative;padding-bottom:10px}
.foot-col h4::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:30px;height:2px;background:var(--gold)}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:13.5px;transition:color .15s}
.foot-col a:hover{color:var(--gold)}
.foot-contact li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.6}
.foot-contact svg{width:16px;height:16px;flex:none;color:var(--gold);margin-top:3px}
.foot-bar{border-top:1px solid rgba(255,255,255,.09);padding:18px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12.5px}
.social{display:flex;gap:9px}
.social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);
  display:grid;place-items:center;transition:background .15s}
.social a:hover{background:var(--primary)}
.social svg{width:16px;height:16px;color:#fff}

/* ============ الموبايل ============ */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-main{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:block;margin-inline-start:auto}
  .head-cta .btn{display:none}
  .topbar-contact span:not(:first-child){display:none}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .wrap{padding:0 15px}
  .section{padding:40px 0}
  .section-title{font-size:22px}
  .section-head{flex-direction:column;align-items:flex-start;gap:10px}
  .grid{gap:16px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .foot-main{grid-template-columns:1fr;gap:28px;padding:36px 0 28px}
  .foot-bar{flex-direction:column;text-align:center}
  .site-head .wrap{min-height:64px}
  .logo img{height:38px}
}

/* ============ زرّ واتساب العائم ============ */
.wa-fab{
  position:fixed;z-index:80;inset-block-end:22px;inset-inline-start:22px;
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;border-radius:999px;
  padding:13px 20px 13px 15px;font-size:14.5px;font-weight:700;
  box-shadow:0 4px 18px rgba(37,211,102,.38);
  transition:background .16s,box-shadow .16s,transform .1s;
}
[dir="rtl"] .wa-fab{padding:13px 15px 13px 20px}
.wa-fab svg{width:25px;height:25px;flex:none}
.wa-fab:hover{background:#1DA851;box-shadow:0 6px 22px rgba(37,211,102,.5)}
.wa-fab:active{transform:translateY(1px)}
.wa-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* على الموبايل: دائرة بلا نص — والشريط السفلي في صفحة الوحدة يرفعها فوقه */
@media (max-width:640px){
  .wa-fab{inset-block-end:16px;inset-inline-start:16px;padding:0;
    width:54px;height:54px;justify-content:center}
  .wa-fab-t{display:none}
  body:has(.sticky-cta:not([hidden])) .wa-fab{inset-block-end:86px}
}
@media (prefers-reduced-motion:reduce){.wa-fab{transition:none}}