/* =====================================================================
   polish.css — اللمسات النهائية على مستوى الموقع كله
   ---------------------------------------------------------------------
   طبقة تحسين فوق styles.css و filter.css — من غير تغيير أي لون أو خط:
   نفس --brand / --brand-tint / --ink / --line ونفس Cairo و El Messiri.
   كلها micro-interactions: حركات ناعمة، ظلال حية، ولمعات خفيفة.
   ===================================================================== */

/* ===== أساسيات عامة ===== */
html{ scroll-behavior:smooth; }

/* تحديد النص بلون البراند */
::selection{ background:var(--brand); color:#fff; }

/* حلقة تركيز موحّدة للوصولية — بتظهر مع الكيبورد بس */
:focus-visible{
  outline:2.5px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}

/* سكرول بار رفيع بهوية الموقع */
body::-webkit-scrollbar{ width:9px; }
body::-webkit-scrollbar-track{ background:var(--bg-soft); }
body::-webkit-scrollbar-thumb{
  background:#D8D4CE;
  border-radius:100px;
  border:2px solid var(--bg-soft);
}
body::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

/* ===== الهيدر: بيوضح ويترفع لما تعمل سكرول ===== */
header{
  transition:box-shadow .3s ease, backdrop-filter .3s ease;
}
header.scrolled{
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 26px rgba(20,20,20,0.07);
}
.logo{ transition:transform .25s ease; }
.logo:hover{ transform:scale(1.04); }
.logo svg{ transition:transform .35s ease; }
.logo:hover svg{ transform:rotate(-8deg); }

/* روابط النافبار: خط سفلي بيتمد من النص */
nav a{ position:relative; padding-bottom:3px; }
nav a::after{
  content:"";
  position:absolute;
  bottom:0;
  inset-inline-start:50%;
  width:0;
  height:2px;
  background:var(--brand);
  border-radius:100px;
  transition:width .25s ease, inset-inline-start .25s ease;
}
nav a:hover::after, nav a.active::after{
  width:100%;
  inset-inline-start:0;
}

/* ===== الهيرو: كرات ضوء ناعمة بتطفو ببطء ===== */
/* ملاحظة مهمة: .hero::before محجوز في styles.css لصورة خلفية الواجهة —
   عشان كده الكرات هنا عناصر .hero-orb بتتحقن بالجافاسكريبت (initPolish) */
.hero-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;   /* فوق صورة الخلفية (::before) وتحت محتوى الهيرو (z-index:1) */
  filter:blur(2px);
}
.hero-orb.orb-1{
  width:340px; height:340px;
  background:radial-gradient(circle, rgba(225,91,61,0.10), transparent 70%);
  top:-90px; inset-inline-start:-70px;
  animation:heroFloat 9s ease-in-out infinite;
}
.hero-orb.orb-2{
  width:280px; height:280px;
  background:radial-gradient(circle, rgba(216,160,61,0.10), transparent 70%);
  bottom:-70px; inset-inline-end:-50px;
  animation:heroFloat 11s ease-in-out infinite reverse;
}
@keyframes heroFloat{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(18px,-22px); }
}

/* بطاقة البحث الرئيسية: بترتفع لما الماوس يقرب منها */
.search-card{
  transition:transform .3s ease, box-shadow .3s ease;
}
.search-card:hover,
.search-card:focus-within{
  transform:translateY(-3px);
  box-shadow:0 22px 54px rgba(20,20,20,0.13);
}
.search-btn{ position:relative; overflow:hidden; }

/* ===== لمعة بتعدي على الأزرار البرتقالية ===== */
.btn-brand, .search-btn, .btn-white, .btn-apply{
  position:relative;
  overflow:hidden;
}
.btn-brand::after, .search-btn::after, .btn-apply::after{
  content:"";
  position:absolute;
  top:0;
  inset-inline-start:-80%;
  width:45%;
  height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-18deg);
  transition:inset-inline-start .55s ease;
  pointer-events:none;
}
.btn-brand:hover::after, .search-btn:hover::after, .btn-apply:hover::after{
  inset-inline-start:130%;
}

/* ===== عناوين الأقسام: شرطة براند صغيرة تحتها ===== */
.section-head h2{ position:relative; display:inline-block; padding-bottom:10px; }
.section-head h2::after{
  content:"";
  position:absolute;
  bottom:0;
  inset-inline-start:0;
  width:42px;
  height:3.5px;
  background:linear-gradient(90deg, var(--brand), var(--gold));
  border-radius:100px;
}

/* ===== كروت العقارات: بترتفع وبتنوّر ===== */
.listing-card{
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
  border-radius:16px;
}
.listing-card:hover{ transform:translateY(-6px); }
.listing-card .listing-photo{
  transition:box-shadow .3s ease;
}
.listing-card:hover .listing-photo{
  box-shadow:0 18px 40px rgba(20,20,20,0.16);
}
.listing-card .listing-price b{ transition:color .2s ease; }
.listing-card:hover .listing-price b{ color:var(--brand); }
.listing-card .listing-title{ transition:color .2s ease; }
.listing-card:hover .listing-title{ color:var(--brand); }

/* زر القلب: نبضة لما يتفعّل */
.heart-btn{ transition:transform .15s ease, background .2s ease; }
.heart-btn:hover{ transform:scale(1.12); background:#fff; }
.heart-btn.active svg.filled{ animation:heartPop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes heartPop{
  0%{ transform:scale(0.4); }
  60%{ transform:scale(1.25); }
  100%{ transform:scale(1); }
}

/* ===== كروت المجاورات: نفس الرفعة + الاسم بيلوّن ===== */
.nbhd-card .nbhd-photo{ transition:box-shadow .3s ease; }
.nbhd-card:hover .nbhd-photo{ box-shadow:0 14px 32px rgba(20,20,20,0.15); }

/* ===== شريط الثقة: كل عنصر بيرد على الماوس ===== */
.trust-item{ transition:transform .25s ease; }
.trust-item:hover{ transform:translateY(-4px); }
.trust-item svg{ transition:color .25s ease, transform .25s ease; }
.trust-item:hover svg{ color:var(--brand); transform:scale(1.12); }
.trust-item b{ transition:color .25s ease; }
.trust-item:hover b{ color:var(--brand); }

/* ===== كارت الرأي (testimonial): علامة اقتباس ضخمة خافتة ===== */
.testi{ position:relative; }
.testi > svg{
  width:44px; height:44px;
  color:var(--brand);
  opacity:0.85;
  margin:0 auto 14px;
  transition:transform .3s ease;
}
.testi:hover > svg{ transform:scale(1.15) rotate(-6deg); }

/* ===== بانر الدعوة: توهج داخلي متحرك ===== */
.cta-banner{
  position:relative;
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.cta-banner::before{
  content:"";
  position:absolute;
  width:400px; height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.14), transparent 65%);
  top:-160px; inset-inline-end:-100px;
  animation:heroFloat 10s ease-in-out infinite;
  pointer-events:none;
}
.cta-banner:hover{ box-shadow:0 22px 60px rgba(225,91,61,0.35); }
.cta-banner > *{ position:relative; }
.btn-white{ transition:transform .2s ease, box-shadow .2s ease; }
.btn-white:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 10px 26px rgba(0,0,0,0.18); }

/* ===== الأسئلة الشائعة: انزلاق أنعم ===== */
.faq-item{ transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.faq-item:hover{ transform:translateX(-3px); }
.faq-item.open{ transform:none; }
.faq-a{ transition:max-height .38s cubic-bezier(.2,.7,.2,1), padding .3s ease; }

/* ===== الفوتر: أيقونات السوشيال بتتلون بالبراند ===== */
.social-row a{
  transition:all .25s ease;
}
.social-row a:hover{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(225,91,61,0.3);
}
footer a{ transition:color .2s ease; }

/* ===== زر الواتساب العائم: نبضة هادية بتلفت النظر ===== */
.float-wa{ animation:waPulse 3s ease-in-out infinite; }
.float-wa:hover{ animation:none; transform:scale(1.08); }
@keyframes waPulse{
  0%,100%{ box-shadow:0 8px 24px rgba(37,211,102,0.35); }
  50%{ box-shadow:0 8px 24px rgba(37,211,102,0.35), 0 0 0 12px rgba(37,211,102,0.10); }
}

/* ===== زر الرجوع لأعلى ===== */
.back-to-top{
  position:fixed;
  bottom:24px;
  inset-inline-start:50%;
  transform:translateX(50%) translateY(80px);
  width:44px; height:44px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(20,20,20,0.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
  z-index:95;
}
.back-to-top.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(50%) translateY(0);
}
.back-to-top:hover{ background:var(--brand); }
.back-to-top svg{ width:18px; height:18px; }

/* ===== ترقية الـ skeleton: لمعة بتعدي بدل النبض ===== */
.skeleton-photo, .skeleton-line{
  position:relative;
  overflow:hidden;
  animation:none;
  background:var(--bg-soft);
}
.skeleton-photo::after, .skeleton-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.75) 50%, transparent 65%);
  transform:translateX(-100%);
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  to{ transform:translateX(100%); }
}

/* ===== الشريط الجانبي للفلاتر: خط براند علوي رفيع ===== */
.filter-sidebar::before{
  content:"";
  position:absolute;
  top:0;
  inset-inline:0;
  height:3.5px;
  background:linear-gradient(90deg, var(--brand), var(--gold));
  border-radius:0 0 100px 100px;
}

/* ===== إتاحة: إيقاف كل الحركات لمن يفضّل تقليل الحركة ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  html{ scroll-behavior:auto; }
}

/* ===== v2: شارة حالة التوفّر (تم البيع / تم التأجير) ===== */
.badge-availability{
  position:absolute;
  bottom:12px;
  inset-inline-start:12px;
  background:rgba(40,40,40,0.92);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  padding:4px 12px;
  border-radius:100px;
  z-index:3;
  backdrop-filter:blur(3px);
}
.listing-card.is-unavailable .listing-photo img{
  filter:grayscale(0.55) brightness(0.92);
}

/* ===== v2: خريطة العقارات ===== */
#propertiesMap .leaflet-popup-content{ margin:12px 14px; }
#propertiesMap .leaflet-popup-content-wrapper{ border-radius:14px; }