/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --navy-900:#101827;
  --navy-800:#101827;
  --navy-700:#1e293b;
  --gold-500:#c0a16b;
  --gold-100:#dccba9;
  --sand-100:#020617;
  --surface:#1e293b;
  --text-900:#f1f5f9;
  --text-600:#94a3b8;
  --line:#334155;
  --ok:#4fae76;
  --warn:#c0a16b;
  --danger:#e2685c;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --font-display:'Tajawal',sans-serif;
  --font-body:'Almarai',sans-serif;
}
[data-theme="light"]{
  --sand-100:#f3f4f6;
  --surface:#ffffff;
  --text-900:#111827;
  --text-600:#64748b;
  --line:#e2e8f0;
  --shadow:0 10px 30px rgba(16,24,39,.08);
}
[data-theme="light"] header.site{background:rgba(255,255,255,.92)}
[data-theme="light"] .badge-ok{background:rgba(79,174,118,.14);color:#1f8a4c}
[data-theme="light"] .notice-ok-source{background:rgba(79,174,118,.1);color:#1f8a4c}
[data-theme="light"] .notice-info{background:rgba(30,41,59,.06);color:var(--text-900)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--text-900);
  background:var(--sand-100);line-height:1.7;
}
h1,h2,h3,.display{font-family:var(--font-display)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:44px 0 60px}
.section-head{max-width:640px;margin-bottom:28px}
.section-head h2{font-size:clamp(26px,3vw,34px);margin:0 0 10px}
.section-head p{color:var(--text-600);margin:0}
.eyebrow{color:var(--gold-500);font-weight:700;font-size:14px;margin:0 0 8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:10px;font-weight:700;font-size:15px;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--gold-500);color:var(--navy-900)}
.btn-primary:hover{box-shadow:0 8px 18px rgba(201,162,39,.35)}
.btn-outline{background:transparent;border:1.5px solid var(--surface);color:var(--surface)}
.btn-ghost{background:var(--surface);border:1.5px solid var(--line);color:var(--text-900)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .22s ease, box-shadow .22s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(16,24,39,.14)}
.offer-card:hover,.about-card:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(16,24,39,.2);border-color:var(--gold-500)}
.card .ic{transition:transform .22s ease}
.card:hover .ic{transform:scale(1.12)}

/* Page transitions */
.page-enter{animation:page-fade-in .32s ease both}
@keyframes page-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Animated stat counters */
.counter{display:inline-block}

/* Featured properties (home page, under hero) */
.featured-section{padding:48px 0 60px}

.about-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--gold-500),var(--gold-100));display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--navy-900);margin:0 auto 16px;transition:transform .25s ease}

.skeleton-card{padding:0;overflow:hidden}
.quiz-card{background:linear-gradient(135deg,rgba(192,161,107,.1),rgba(192,161,107,.03));border-color:rgba(192,161,107,.35)}
.quiz-options{display:flex;flex-wrap:wrap;gap:10px}
.quiz-option-btn{padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--text-900);font-size:13.5px;font-weight:700;cursor:pointer;transition:all .15s ease}
.quiz-option-btn:hover{border-color:var(--gold-500);background:rgba(192,161,107,.1);transform:translateY(-2px)}
.skeleton-img,.skeleton-line{background:linear-gradient(90deg,var(--line) 25%,rgba(192,161,107,.18) 50%,var(--line) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite}
.skeleton-img{height:180px}
.skeleton-line{height:14px;margin:14px 16px;border-radius:4px}
@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.skeleton-img,.skeleton-line{animation:none}}

.journey-section{padding:56px 0}
.promises-bar{padding:20px 0;background:rgba(192,161,107,.06);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.promises-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 40px}
.promise-item{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;white-space:nowrap}
.promise-icon{display:inline-flex;color:var(--gold-500)}
.promise-icon svg{width:18px;height:18px}
@media(max-width:680px){.promises-grid{gap:14px 22px;justify-content:flex-start}.promise-item{white-space:normal}}
.about-card:hover .about-icon{transform:scale(1.12) rotate(-4deg)}

/* Fade-up on scroll — cards/sections ease in as the visitor scrolls to them */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.grid-3 .fade-up:nth-child(1),.grid-4 .fade-up:nth-child(1){transition-delay:0s}
.grid-3 .fade-up:nth-child(2),.grid-4 .fade-up:nth-child(2){transition-delay:.1s}
.grid-3 .fade-up:nth-child(3),.grid-4 .fade-up:nth-child(3){transition-delay:.2s}
.grid-4 .fade-up:nth-child(4){transition-delay:.3s}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .fade-up{opacity:1 !important;transform:none !important}
}
.grid{display:grid;gap:24px}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}
.badge-warn{background:rgba(192,161,107,.15);color:#c0a16b}
.badge-ok{background:rgba(79,174,118,.18);color:#6fd99a}
.badge-info{background:var(--gold-100);color:#020617}
.notice{border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.6}
.notice-warn{background:rgba(192,161,107,.12);color:#c0a16b;border:1px solid rgba(192,161,107,.35)}
.notice-ok-source{background:rgba(79,174,118,.14);color:#6fd99a;border:1px solid rgba(79,174,118,.35)}
.notice-info{background:rgba(37,50,78,.6);color:var(--text-600);border:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.field label{font-size:13px;font-weight:700;color:var(--text-600)}
.field input,.field select,.field textarea{
  padding:11px 13px;border-radius:9px;border:1.5px solid var(--line);
  font-family:inherit;font-size:15px;background:var(--surface);color:var(--text-900);
  width:100%;min-width:0
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold-500);outline-offset:1px}
.field input.input-error,.field select.input-error,.field textarea.input-error{border-color:var(--danger);background:rgba(226,104,92,.06)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
th{color:var(--text-600);font-weight:700}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(26,34,56,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;flex-wrap:wrap;row-gap:10px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:17px;color:var(--text-900);white-space:nowrap}
.brand img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0}

nav.links{display:flex;gap:16px;font-size:13px;font-weight:700;color:var(--text-600);flex-wrap:wrap;align-items:center;padding-inline-start:18px;border-inline-start:1px solid var(--line);margin-inline-start:4px}
nav.links a{white-space:nowrap}
nav.links a:hover{color:var(--gold-500)}
nav.links a.active{color:var(--gold-500);position:relative}
nav.links a.active::after{content:"";position:absolute;right:0;left:0;bottom:-16px;height:2px;background:var(--gold-500)}
.nav-more{position:relative}
.nav-more-btn{background:none;border:none;color:var(--text-600);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;padding:0}
.nav-more-btn:hover,.nav-more.open .nav-more-btn{color:var(--gold-500)}
.nav-more-panel{display:none;position:absolute;top:calc(100% + 16px);inset-inline-end:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:150px;flex-direction:column;gap:0;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:60}
.nav-more-panel a{padding:9px 12px;border-radius:8px;font-size:13.5px}
.nav-more-panel a:hover{background:var(--sand-100)}
.nav-more-panel a.active{color:var(--gold-500)}
.nav-more.open .nav-more-panel{display:flex}
.nav-actions{display:flex;align-items:center;gap:10px}

#theme-toggle{width:38px;height:38px;border-radius:8px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-600);flex-shrink:0;transition:color .15s ease}
#theme-toggle:hover{color:var(--gold-500);border-color:var(--gold-500)}
#admin-quick-link{height:38px;padding:0 14px;border-radius:8px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--text-900);flex-shrink:0;text-decoration:none;white-space:nowrap;transition:border-color .15s ease}
#admin-quick-link:hover{border-color:var(--gold-500)}
#mobile-menu-toggle{display:none;width:38px;height:38px;border-radius:8px;background:var(--surface);align-items:center;justify-content:center;color:var(--text-900);flex-shrink:0}
#mobile-menu-toggle:hover{background:var(--line)}
#mobile-menu{display:none;flex-direction:column;gap:0;padding:6px 0;border-top:1px solid var(--line);background:var(--surface)}
#mobile-menu a{padding:13px 24px;border-bottom:1px solid var(--line);font-size:14px}
#mobile-menu a.active{color:var(--gold-500);background:var(--surface)}
#mobile-menu.open{display:flex}

@media(max-width:680px){
  .nav-row nav.links{display:none}
  #mobile-menu-toggle{display:flex}
  #admin-quick-link{padding:0;width:38px}
  #admin-quick-link span{display:none}
}
@media(min-width:681px){
  #mobile-menu{display:none !important}
}
.lang-switch{display:flex;gap:4px;background:var(--sand-100);border-radius:999px;padding:3px}
.lang-switch button{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;background:transparent;color:var(--text-600)}
.lang-switch button.active{background:var(--navy-900);color:#fff}

/* ============================================================
   ⚠️ تحذير مهم — لا تعدّل هذا القسم (خلفية الهيرو) بدون إذن صريح من المالك
   ============================================================
   الإعداد الحالي (صورة hero-madinah.jpg + بدون تضبيب + تعتيم خفيف جداً
   0.1-0.2 + ظل نص) وصلنا له بعد يوم كامل من التجربة والخطأ بتاريخ
   2026-09-15، وهو معتمد ونهائي من المالك. أي تعديل هنا (تغيير الصورة،
   إضافة تضبيب/تعتيم، تغيير موضع القص) يحتاج تأكيد صريح من المستخدم
   أولاً، حتى لو بدا التحسين منطقياً. لا تفترض ولا "تحسّن" من نفسك.
   ============================================================ */
/* Hero */
.hero{
  background:#020617;
  color:#fff;padding:60px 0 60px;position:relative;overflow:hidden
}
.hero::before{
  content:'';position:absolute;inset:-12px;z-index:0;
  background:url('../assets/images/hero-madinah.jpg') center 72%/cover no-repeat;
  filter:none;transform:scale(1.03)
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 75% 25%, rgba(192,161,107,.16) 0%, transparent 55%),
    linear-gradient(to left, rgba(2,6,23,.2) 0%, rgba(2,6,23,.15) 40%, rgba(2,6,23,.1) 72%)
}
.hero .container{position:relative;z-index:2}
.hero-grid{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:36px}
.hero-grid > *:first-child{flex:1 1 460px;min-width:280px;text-align:right}
.hero h1{font-size:clamp(26px,3.6vw,38px);line-height:1.25;margin:0 0 14px;animation:heroEnter 1.1s ease-out .1s both;text-shadow:0 2px 4px rgba(0,0,0,.5)}
[lang="en"] .hero h1{font-size:clamp(22px,2.8vw,32px)}
.hero-tagline{font-size:clamp(24px,3.6vw,38px);font-weight:900;color:#c0a16b;margin:2px 0 22px;line-height:1.3;font-family:var(--font-display);animation:heroEnter 1.1s ease-out .45s both;text-shadow:0 2px 4px rgba(0,0,0,.5)}
@keyframes heroEnter{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.hero h1,.hero-tagline,.hero-search{animation:none}}
.eyebrow.hero-eyebrow{margin:0 0 8px}
.hero p.desc{color:#c7cedb;max-width:540px;margin:0 0 32px;min-height:4.6em;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;justify-content:flex-start}
.hero-search{width:100%;background:rgba(2,6,23,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(192,161,107,.35);padding:16px;margin-bottom:18px;text-align:start;animation:heroEnter 1.1s ease-out .8s both}
.hero-search-row{display:flex;gap:8px;flex-wrap:wrap}
.hero-search-row select,.hero-search-row input{flex:1 1 150px;min-width:130px;background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(192,161,107,.4)}
.hero-search-row select option{color:#1c1a16}
.hero-search-row input::placeholder{color:rgba(255,255,255,.7)}
.hero-search-row .btn{flex:0 0 auto}
.hero-search-count{margin:10px 2px 0;font-size:13px;color:#c0a16b;font-weight:700;min-height:18px}
.hero .btn-primary{background:#c0a16b;color:#020617}
.hero .btn-primary:hover{background:#d4bd93}
.hero .btn-outline{border-color:#c0a16b;color:#c0a16b}
.license-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 14px;font-size:12.5px;color:#dde2ea;margin-bottom:30px;backdrop-filter:blur(2px);max-width:min(92%,480px);text-align:start}
.license-badge span{white-space:normal}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:640px;margin:0;padding-top:22px;border-top:1px solid rgba(192,161,107,.25);opacity:0;transition:opacity .5s ease}
.stats-row .stat{min-width:0}
.stats-row.ready{opacity:1}
.stat b{display:block;font-size:30px;font-family:var(--font-display);color:#c0a16b;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.stat span{font-size:13px;color:#c7cedb;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* الوضع النهاري: الهيرو نفسه موحَّد غامق بالوضعين (نفس أسلوب رغدان) —
   الفرق يبقى فقط بألوان النصوص الفرعية اللي تحتاج تباين أوضح. */
[data-theme="light"] .hero p.desc{color:#c7cedb}
[data-theme="light"] .hero .stat span{color:#94a3b8}
[data-theme="light"] .hero .license-badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#dde2ea}
[data-theme="light"] .hero-image-card{box-shadow:0 24px 60px rgba(36,29,15,.18);border-color:rgba(192,161,107,.4)}

/* حركة طفو خفيفة مستمرة لعمود النص — تحسّ الصفحة حيّة بدون ما تشتت القراءة */
@keyframes heroTextFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.hero-grid > *:first-child{animation:heroTextFloat 6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .hero-grid > *:first-child{animation:none}
}

/* Hero image card — contained slideshow of real photos (Masjid an-Nabawi + Madinah) */
.hero-image-col{flex:1 1 380px;min-width:280px;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-image-card{width:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.4);border:1px solid rgba(192,161,107,.25)}
.hero-bg-slides{position:absolute;inset:0}
.hero-bg-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease}
.hero-bg-slide.active{opacity:1;animation:kenburns 6s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes toastPop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.hero-bg-caption{position:absolute;inset-inline-start:14px;bottom:14px;max-width:calc(100% - 28px);background:rgba(16,24,39,.78);color:#f8fafc;border:1px solid rgba(192,161,107,.35);padding:8px 14px;border-radius:14px;font-size:12.5px;display:flex;flex-direction:column;gap:2px}
.hero-bg-caption b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-bg-caption i{font-style:normal;color:#c0a16b;font-weight:700;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:680px){.hero-image-col{max-width:100%;margin-top:0}.hero-image-card{aspect-ratio:4/3}}
/* قص مخصَّص للجوال بس لخلفية الهيرو — الحاوية بالجوال طويلة جداً عمودياً
   (كل العناصر تترص فوق بعض بعمود وحد)، فتكبير الصورة لتغطيتها بـcover
   يبرز الجزء العلوي (السماء) أكثر من المطلوب. هذا يغيّر نقطة التركيز
   العمودية بس على الجوال — نسخة الكمبيوتر (المعتمدة، القسم أعلاه) ما لها
   أي علاقة بهذا الاستعلام ولا تتأثر إطلاقاً. */
@media(max-width:680px){
  .hero::before{
    inset:auto;top:-12px;left:-12px;right:-12px;height:460px;
    background-position:center 65%;
  }
}
@media(max-width:480px){.stats-row{grid-template-columns:repeat(2,1fr);gap:16px 20px}}
@media (prefers-reduced-motion: reduce){
  .hero-bg-slide{transition:none;animation:none}
}

/* Offers */
.offer-card{overflow:hidden;position:relative}
.favorite-btn{position:absolute;top:10px;inset-inline-end:10px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(2,6,23,.55);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .15s ease,color .15s ease}
.compare-btn{position:absolute;top:10px;inset-inline-start:10px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(2,6,23,.55);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:900;cursor:pointer;transition:transform .15s ease,background .15s ease}
.compare-btn:hover{transform:scale(1.08)}
.compare-btn.active{background:var(--gold-500);color:#020617;border-color:var(--gold-500)}

#compare-bar{position:fixed;bottom:0;inset-inline:0;background:var(--navy-900);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:150;box-shadow:0 -8px 24px rgba(0,0,0,.25);flex-wrap:wrap}
#satisfaction-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 18px;display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:700;box-shadow:var(--shadow);z-index:150;animation:toastPop .25s ease-out}
#satisfaction-toast button{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
#satisfaction-toast button:hover{transform:scale(1.1);border-color:var(--gold-500)}
#compare-bar span{font-weight:700;font-size:14px}
#compare-bar button:disabled{opacity:.5;cursor:not-allowed}

.compare-modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,.7);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.compare-modal-box{background:var(--surface);border-radius:16px;padding:26px;max-width:900px;width:100%;max-height:85vh;overflow-y:auto;position:relative}
.compare-modal-close{position:absolute;top:16px;inset-inline-end:16px;width:32px;height:32px;border-radius:50%;background:var(--sand-100);border:none;font-size:16px;cursor:pointer}
.compare-table-wrap{overflow-x:auto;margin-top:16px}
.compare-table{width:100%;border-collapse:collapse}
.compare-table th,.compare-table td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line);font-size:13.5px;white-space:nowrap}
.compare-table th{font-weight:900;color:var(--gold-500)}
.compare-table td:first-child,.compare-table th:first-child{text-align:start;font-weight:700;color:var(--text-600)}
.favorite-btn svg{fill:none;stroke:currentColor;stroke-width:2}
.favorite-btn:hover{transform:scale(1.08)}
.favorite-btn.active{color:#e2685c}
.favorite-btn.active svg{fill:#e2685c}
.sold-ribbon{position:absolute;top:20px;left:-40px;width:160px;text-align:center;background:var(--danger);color:#fff;padding:6px 0;font-size:13px;font-weight:900;letter-spacing:1px;transform:rotate(-45deg);box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:4;pointer-events:none}
.pinned-badge{position:absolute;top:10px;inset-inline-end:10px;background:var(--gold-500);color:#020617;font-size:11px;font-weight:900;padding:4px 10px;border-radius:999px;z-index:4;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.offer-sort-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.offer-sort-tab{padding:9px 18px;border-radius:999px;font-weight:700;font-size:13.5px;background:var(--surface);border:1px solid var(--line);color:var(--text-600);transition:all .15s ease}
.offer-sort-tab:hover{border-color:var(--gold-500)}
.offer-sort-tab.active{background:var(--gold-500);border-color:var(--gold-500);color:#020617}
.offer-img{width:100%;height:180px;object-fit:cover;display:block;background:var(--sand-100)}
.offer-top{background:var(--navy-900);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
.offer-discount{background:var(--gold-500);color:var(--navy-900);font-weight:900;padding:3px 10px;border-radius:8px;font-size:13px}
.offer-body{padding:18px}
.offer-body h4{margin:0 0 4px}
.match-badge{display:inline-block;background:rgba(192,161,107,.15);color:var(--gold-500);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;margin-bottom:8px}
.offer-body .loc{color:var(--text-600);font-size:13px;margin-bottom:10px}
.offer-body .price{font-weight:900;font-size:18px;color:var(--gold-500)}
.offer-body .price s{color:var(--text-600);font-weight:400;font-size:14px;margin-inline-start:8px}
.offer-details-btn{display:block;width:100%;margin-top:14px;padding:10px;border-radius:9px;background:rgba(192,161,107,.12);color:var(--gold-500);font-weight:700;font-size:13px;text-align:center;transition:background .15s ease}
.offer-card:hover .offer-details-btn{background:var(--gold-500);color:#020617}
#offer-preview-tooltip{position:fixed;max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.7;color:var(--text-900);box-shadow:var(--shadow);white-space:pre-wrap;z-index:80;cursor:auto}

/* Services */
.service-card{padding:24px}
.service-card .ic{width:46px;height:46px;border-radius:12px;background:var(--gold-100);display:flex;align-items:center;justify-content:center;color:var(--navy-900);margin-bottom:14px}
.service-card h4{margin:0 0 6px}
.service-card p{color:var(--text-600);font-size:14px;margin:0}

/* Tabs */
.tabs{display:flex;gap:8px;margin-bottom:20px}
.tabs button{padding:10px 20px;border-radius:10px;background:var(--surface);border:1.5px solid var(--line);font-weight:700;font-size:14px;color:var(--text-600)}
.tabs button.active{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Valuation result */
.result-box{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.result-box .card{padding:18px;text-align:center}
.result-box .card b{display:block;font-size:22px;color:var(--gold-500);font-family:var(--font-display)}
.result-box .card span{font-size:13px;color:var(--text-600)}

/* Assistant */
/* Amenity toggles */
.amenity-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.amenity-toggle{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:13px;font-weight:700;color:var(--text-600);transition:all .15s ease}
.amenity-toggle .ic{font-size:15px}
.amenity-toggle:hover{border-color:var(--gold-500)}
.amenity-toggle.active{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900)}

/* Detail modal */
.modal-overlay{position:fixed;inset:0;background:rgba(16,24,39,.55);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:40px 16px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surface);border-radius:16px;width:100%;max-width:640px;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.modal-close-btn{position:absolute;inset-inline-end:14px;top:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:#101827;font-size:15px;z-index:2}
.modal-close-btn:hover{background:#fff}
.detail-box{padding:0 28px 28px}
.detail-img{width:calc(100% + 56px);margin-inline-start:-28px;margin-top:0;height:auto;max-height:560px;object-fit:contain;background:var(--sand-100);border-radius:16px 16px 0 0;display:block;margin-bottom:0;cursor:zoom-in}

.lightbox-overlay{position:fixed;inset:0;background:rgba(2,6,23,.92);z-index:300;display:flex;align-items:center;justify-content:center;padding:30px}
.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lightbox-close{position:absolute;top:20px;inset-inline-end:20px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.25)}
.lightbox-prev{inset-inline-start:20px}
.lightbox-next{inset-inline-end:20px}
.lightbox-counter{position:absolute;bottom:20px;inset-inline-start:50%;transform:translateX(-50%);background:rgba(255,255,255,.15);color:#fff;font-size:13px;padding:5px 14px;border-radius:20px}
.detail-gallery{position:relative;width:calc(100% + 56px);margin-inline-start:-28px}
.detail-gallery .detail-img{width:100%;margin:0;border-radius:16px 16px 0 0}
.detail-gallery .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:none;background:rgba(2,6,23,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.detail-gallery .gallery-prev{inset-inline-start:12px}
.detail-gallery .gallery-next{inset-inline-end:12px}
.detail-gallery .gallery-counter{position:absolute;bottom:10px;inset-inline-end:12px;background:rgba(2,6,23,.6);color:#fff;font-size:12px;padding:3px 9px;border-radius:20px}
.detail-header{background:var(--navy-900);color:#fff;padding:16px 18px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;margin:20px 0 18px}
.detail-header .discount{background:var(--gold-500);color:var(--navy-900);font-weight:900;padding:4px 12px;border-radius:8px;font-size:13px}
.detail-title{font-size:20px;margin:0 0 4px}
.detail-loc{color:var(--text-600);font-size:14px;margin:0 0 16px}
.detail-price{font-size:24px;font-weight:900;color:var(--gold-500);font-family:var(--font-display);margin:0 0 20px}
.detail-price s{color:var(--text-600);font-weight:400;font-size:15px;margin-inline-start:10px}
.detail-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:20px}
.detail-spec{background:var(--sand-100);border-radius:10px;padding:10px 12px;text-align:center}
.detail-spec b{display:block;font-size:15px;color:var(--text-900)}
.detail-spec span{font-size:11.5px;color:var(--text-600)}
.detail-desc{white-space:pre-wrap;line-height:1.9;font-size:14.5px;color:var(--text-900);margin-bottom:22px;background:var(--sand-100);border-radius:10px;padding:16px}
.detail-video{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;margin-bottom:22px}

.offer-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.offer-detail-header b{font-size:22px;display:block;margin-bottom:4px}
.offer-detail-media-row{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:20px;align-items:start}
.offer-detail-media-row .detail-video{margin-bottom:0}
.offer-detail-media-row .detail-gallery,.offer-detail-media-row .detail-img{margin-bottom:0}
.offer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.offer-detail-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.offer-detail-card-accent{background:rgba(192,161,107,.08);border-color:rgba(192,161,107,.35)}
.offer-detail-card-title{font-weight:900;font-size:14.5px;margin:0 0 8px}
.offer-detail-card-desc{font-size:13px;color:var(--text-600);margin:0 0 14px}
.offer-detail-trust{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-600);border-top:1px solid var(--line);padding-top:14px;margin-top:20px}
.compare-btn-inline.active{background:var(--gold-500);color:#020617;border-color:var(--gold-500)}
@media(max-width:680px){.offer-detail-media-row,.offer-detail-grid{grid-template-columns:1fr}}
.detail-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.detail-meta{border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.detail-meta-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:var(--text-600)}
.detail-meta-row b{color:var(--text-900);font-weight:700}
.detail-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

.detail-similar{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.detail-similar h4{margin:0 0 12px;font-size:14px}
.detail-similar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.detail-similar-card{cursor:pointer;border-radius:10px;overflow:hidden;border:1px solid var(--line);transition:transform .15s ease,border-color .15s ease}
.detail-similar-card:hover{transform:translateY(-2px);border-color:var(--gold-500)}
.detail-similar-card img{width:100%;height:70px;object-fit:cover;display:block}
.detail-similar-info{padding:8px}
.detail-similar-info b{display:block;font-size:12px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-similar-info span{display:block;font-size:11px;color:var(--text-600)}
.detail-similar-price{color:var(--gold-500) !important;font-weight:700;margin-top:2px}
.offer-card{cursor:pointer}
.offer-card:hover .offer-body h4{color:var(--gold-500)}

/* Social row */
.social-row{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.social-icon-link{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.06);transition:transform .15s ease,background .15s ease;line-height:0}
.social-icon-link:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}
[data-theme="light"] .social-icon-link{background:rgba(16,24,39,.05)}
[data-theme="light"] .social-icon-link:hover{background:rgba(16,24,39,.1)}

.contact-head{text-align:center;max-width:560px;margin-left:auto;margin-right:auto}
.contact-head h2{position:relative;display:inline-block;padding-bottom:14px}
.contact-head h2::after{content:'';position:absolute;bottom:0;right:50%;transform:translateX(50%);width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold-100),var(--gold-500))}

.contact-pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.contact-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:13px;font-weight:700;color:var(--text-900);transition:border-color .2s ease,transform .2s ease}
.contact-pill:hover{transform:translateY(-2px);border-color:var(--gold-500)}
.contact-pill.is-primary{border-color:var(--gold-500);color:var(--gold-500)}

/* Assistant — modern chat interface */
.assist-close{background:transparent;color:#fff;font-size:15px;padding:4px 8px;border-radius:8px;position:absolute;inset-inline-end:12px;top:14px}
.assist-close:hover{background:rgba(255,255,255,.15)}
.assist-head{position:relative;display:flex;align-items:center;gap:10px}

#assistant-toggle{position:fixed;inset-inline-end:22px;bottom:22px;height:56px;padding:0 22px;border-radius:999px;background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:#fff;box-shadow:0 10px 25px rgba(16,24,39,.35);z-index:80;transition:transform .15s ease;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14px;white-space:nowrap;border:none;cursor:pointer}
#assistant-toggle:hover{transform:scale(1.04)}
.assistant-toggle-icon{font-size:24px;line-height:1}

/* WhatsApp — floating & fixed on every page */
#whatsapp-float{position:fixed;inset-inline-start:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px rgba(37,211,102,.4);z-index:80;transition:transform .15s ease}
#back-to-top{position:fixed;inset-inline-start:29px;bottom:88px;width:42px;height:42px;border-radius:50%;background:var(--navy-900);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(16,24,39,.3);z-index:79;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
#back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
#back-to-top:hover{transform:translateY(-3px)}
#whatsapp-float:hover{transform:scale(1.06)}
#whatsapp-float svg{width:30px;height:30px}
#whatsapp-float .wa-pulse{position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.55;animation:wa-pulse 2.2s ease-out infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@media(max-width:900px){#whatsapp-float{inset-inline-start:16px;bottom:16px;width:50px;height:50px}#back-to-top{inset-inline-start:22px;bottom:76px;width:38px;height:38px}#assistant-toggle{inset-inline-end:16px;bottom:16px;width:50px;height:50px;padding:0;border-radius:50%}#assistant-toggle .assistant-toggle-text{display:none}}

#assistant-panel{position:fixed;inset-inline-end:22px;bottom:88px;width:370px;height:min(560px,72vh);background:var(--surface);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden;z-index:80;border:1px solid var(--line);opacity:0;transform:translateY(12px) scale(.97);transition:opacity .18s ease, transform .18s ease}
#assistant-panel.open{display:flex;opacity:1;transform:translateY(0) scale(1)}
@media(max-width:480px){#assistant-panel{inset-inline-end:12px;inset-inline-start:12px;width:auto;bottom:82px;height:min(70vh,520px)}}

.assist-head{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:#fff;padding:16px 44px 16px 16px}
.assist-avatar{width:38px;height:38px;border-radius:50%;background:var(--gold-500);color:var(--navy-900);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.assist-head-text b{display:block;font-size:14px}
.assist-head-text span{font-size:11px;color:#cfe0ee;display:block;margin-top:1px}
.assist-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#8be3a8;margin-top:3px}
.assist-status i{width:6px;height:6px;border-radius:50%;background:#3ddc72;display:inline-block}

.assist-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;font-size:13.5px;background:var(--surface)}
.assist-row{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.assist-row.user{align-self:flex-end;flex-direction:row-reverse}
.assist-mini-avatar{width:26px;height:26px;border-radius:50%;background:var(--navy-900);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.assist-row.user .assist-mini-avatar{background:var(--gold-500);color:var(--navy-900)}
.assist-msg{background:var(--sand-100);color:var(--text-900);border:1px solid var(--line);border-radius:14px;border-start-end-radius:4px;padding:10px 13px;line-height:1.6;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.assist-row.user .assist-msg{background:var(--gold-500);color:#020617;border-color:var(--gold-500);border-start-end-radius:14px;border-end-start-radius:4px}
.assist-typing{display:flex;gap:4px;padding:12px 14px;background:var(--sand-100);border:1px solid var(--line);border-radius:14px;border-start-end-radius:4px;width:fit-content}
.assist-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-600);animation:assist-bounce 1.2s infinite ease-in-out}
.assist-typing span:nth-child(2){animation-delay:.15s}
.assist-typing span:nth-child(3){animation-delay:.3s}
@keyframes assist-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.assist-result-card{background:var(--sand-100);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:6px}
.assist-result-card b{display:block;font-size:13px;color:var(--text-900)}
.assist-result-card .meta{font-size:11.5px;color:var(--text-600);margin-top:2px}
.assist-result-card .price{font-size:13px;font-weight:800;color:var(--gold-500);margin-top:4px;display:block}

.assist-quick{display:flex;gap:6px;padding:0 14px 10px;flex-wrap:wrap}
.assist-chip{background:var(--sand-100);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--gold-500);font-weight:700;white-space:nowrap}
.assist-chip:hover{background:var(--gold-100);color:#020617}

.assist-input{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:10px 12px;background:var(--surface)}
.assist-input input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-family:inherit;font-size:13px;background:var(--sand-100);color:var(--text-900)}
.assist-input input:focus{outline:none;border-color:var(--gold-500);background:var(--sand-100)}
.assist-input button{width:38px;height:38px;border-radius:50%;background:var(--navy-900);color:#fff;font-size:15px;flex-shrink:0}
.assist-input button:hover{background:var(--navy-700)}

footer.site{background:#101827;color:var(--text-600);padding:48px 0 100px;margin-top:40px}
footer.site h4{color:#fff;margin:0 0 10px}
footer.site a{color:var(--text-600);transition:color .15s ease}
footer.site a:hover{color:var(--gold-500)}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:16px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer.site .bottom span{overflow-wrap:break-word;word-break:break-word;min-width:0;max-width:100%}
.footer-social-row{display:flex;gap:10px;margin-top:14px}
.footer-social-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--text-600);transition:transform .15s ease,background .15s ease,color .15s ease}
.footer-social-icon:hover{background:var(--gold-500);color:#020617;transform:translateY(-2px)}

.faq-item{border-bottom:1px solid var(--line);padding:16px 0}
.faq-item summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{color:var(--text-600);margin:10px 0 0;font-size:14px}

.hide{display:none !important}

/* ============================================================================
   طباعة العقد / حفظ PDF — نعتمد على طباعة المتصفح نفسها بدل مكتبة PDF
   خارجية، عشان العربي يطلع صحيح 100% (بدون مشاكل اتجاه أو تفكك حروف شائعة
   بمكتبات PDF بالمتصفح). مخفي دائماً بالعرض العادي، يظهر بس وقت الطباعة.
   ========================================================================== */
#contract-print-view{display:none}
.print-header{display:flex;align-items:center;gap:16px;border-bottom:3px solid #c0a16b;padding-bottom:14px;margin-bottom:20px}
.print-header img{width:64px;height:64px;object-fit:contain}
.print-header h1{margin:0;font-size:20px}
.print-header p{margin:4px 0 0;font-size:11px;color:#444}
#contract-print-view h2{font-size:17px;margin:0 0 4px}
#contract-print-view > p#pv-number{font-size:12px;color:#444;margin:0 0 18px}
.pv-parties, .pv-details{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:12.5px}
.pv-parties th{background:#f3f1ea;padding:8px 10px;border:1px solid #ccc;font-size:13px}
.pv-parties td{padding:10px;border:1px solid #ccc;vertical-align:top;line-height:1.8}
.pv-details td{padding:8px 10px;border:1px solid #ccc}
.pv-details td:first-child{background:#f8f7f3;font-weight:700;width:35%}
.pv-signatures{display:flex;justify-content:space-between;margin-top:50px;font-size:13px}
.pv-footer{margin-top:40px;font-size:10.5px;color:#666;text-align:center}

@media print{
  body *{visibility:hidden}
  #contract-print-view, #contract-print-view *{visibility:visible}
  #contract-print-view{
    display:block !important;
    position:absolute;top:0;right:0;width:100%;
    direction:rtl;color:#000;background:#fff;padding:24px;font-family:var(--font-body,Arial,sans-serif)
  }
}

/* ============================================================================
   إنفوجرافيك أشرطة الأسعار الأفقية (قسم التحليلات) — بدون أي مكتبة رسم
   بياني، بطاقات Pill-shaped بتدرج ذهبي بدل الأعمدة الرأسية التقليدية.
   ========================================================================== */
.price-bar-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.price-bar-row:last-child{margin-bottom:0}
.price-bar-label{display:flex;align-items:center;gap:8px;min-width:130px;font-size:13.5px;font-weight:700;flex-shrink:0}
.price-bar-icon{font-size:16px;line-height:1}
.price-bar-track{flex:1;height:26px;border-radius:999px;background:rgba(192,161,107,.12);overflow:hidden}
.price-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-500),var(--gold-100));transition:width .7s cubic-bezier(.22,.9,.3,1)}
.price-bar-value{min-width:120px;flex-shrink:0;text-align:start;font-size:13.5px;font-weight:900;color:var(--gold-500)}
.price-bar-value small{font-weight:700;color:var(--text-600);font-size:11px}
@media(max-width:520px){
  .price-bar-row{flex-wrap:wrap;gap:6px 14px}
  .price-bar-track{flex-basis:100%;order:3}
}