/* =========================================================
 * 🏢 سمسار طلبك - Gold Edition v3.0
 * النسخة المُحسَّنة الكاملة — جميع الصفحات
 * ========================================================= */

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

/* =========================================================
   === 🎨 المتغيرات
   ========================================================= */
:root {
  --color-primary:          #d4af37;
  --color-secondary:        #fce205;
  --color-primary-dark:     #b38f1d;
  --color-secondary-dark:   #998a00;
  --color-blue:             #0a84ff;
  --color-background:       #050505;
  --color-surface-1:        #0a0a0a;
  --color-surface-2:        #141414;
  --color-text-primary:     #ffffff;
  --color-text-secondary:   #b0b0b0;
  --color-text-on-primary:  #000000;
  --color-border:           #333333;
  --color-border-light:     rgba(212, 175, 55, 0.2);
  --color-error:            #ff4d4d;
  --shadow-glow-primary:    0 0 15px rgba(212, 175, 55, 0.2), 0 0 30px rgba(212, 175, 55, 0.1);
  --shadow-interactive:     0 10px 40px rgba(0, 0, 0, 0.8);
  --shadow-card:            0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-card-hover:      0 20px 50px rgba(0,0,0,0.6), 0 0 15px rgba(212, 175, 55, 0.1);
  --shadow-btn-gold:        0 5px 15px rgba(212, 175, 55, 0.2);
  --shadow-btn-gold-hover:  0 10px 25px rgba(212, 175, 55, 0.4);
  --shadow-whatsapp:        0 5px 15px rgba(37, 211, 102, 0.2);
}

/* =========================================================
   === 🌍 الإعدادات العامة
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--color-background);
  color:            var(--color-text-primary);
  font-family:      'Cairo', sans-serif;
  line-height:      1.6;
  direction:        rtl;
  display:          flex;
  flex-direction:   column;
  min-height:       100vh;
  overflow-x:       hidden;
}
main { flex-grow: 1; position: relative; z-index: 2; }
img  { max-width: 100%; height: auto; }

/* =========================================================
   === 🎥 الخلفية السينمائية
   ========================================================= */
.cinematic-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 30%, #1e1e2f 0%, #000000 70%);
  z-index: -2;
}
.animated-overlay {
  position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  animation: rotateBg 120s linear infinite;
  z-index: -1; opacity: 0.5;
}
@keyframes rotateBg { 100% { transform: rotate(360deg); } }
@media (max-width: 768px) { .animated-overlay { display: none; } }

/* =========================================================
   === 🧭 الـ Navbar
   ========================================================= */
.navbar {
  background-color: rgba(5, 5, 5, 0.9);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  padding: 1rem 2rem; display: flex; justify-content: space-between;
  align-items: center; position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid var(--color-border-light);
}
.navbar-logo a { text-decoration: none; color: var(--color-primary); font-size: 1.6rem; font-weight: 800; transition: all 0.3s ease; filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3)); }
.navbar-logo a:hover { color: #fff; filter: drop-shadow(0 0 15px var(--color-primary)); }
.navbar-logo img { max-height: 50px; width: auto; }
.navbar-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.nav-link { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-primary); padding: 0.6rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 700; transition: all 0.3s ease; font-size: 0.95rem; border: 1px solid transparent; }
.nav-link.properties  { background: linear-gradient(45deg, var(--color-primary), var(--color-primary-dark)); color: #000; box-shadow: var(--shadow-btn-gold); }
.nav-link.requests    { background: transparent; border-color: var(--color-border); color: var(--color-text-secondary); }
.nav-link.add-property { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.nav-link:hover              { transform: translateY(-3px); }
.nav-link.properties:hover   { box-shadow: var(--shadow-btn-gold-hover); }
.nav-link.requests:hover     { border-color: var(--color-primary); color: var(--color-primary); }
.nav-link.add-property:hover { background: var(--color-primary); color: #000; }

.nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.9rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; border: 1px solid transparent; font-family: 'Cairo', sans-serif; cursor: pointer; }
.nav-btn:hover { transform: translateY(-3px); }

/* =========================================================
   === 🏠 Hero
   ========================================================= */
.home-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; text-align: center; padding: 2rem; position: relative; z-index: 1; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; }
.home-hero h1 { font-size: 3.5rem; font-weight: 900; background: linear-gradient(45deg, var(--color-primary), #fffeb3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; animation: text-glow 4s ease-in-out infinite alternate; }
@keyframes text-glow { from { filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3)); } to { filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)); } }
.home-hero p { font-size: 1.5rem; color: var(--color-text-secondary); margin-bottom: 3rem; max-width: 700px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.hero-buttons { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.hero-buttons a { text-decoration: none; font-weight: bold; font-size: 1.2rem; border-radius: 50px; padding: 1.2rem 3rem; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border: 1px solid transparent; }
.hero-buttons a:first-child { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); color: #000; box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); }
.hero-buttons a:last-child  { background: rgba(0,0,0,0.5); color: var(--color-primary); border-color: var(--color-primary); }
.hero-buttons a:hover             { transform: translateY(-5px); }
.hero-buttons a:first-child:hover { box-shadow: 0 10px 40px rgba(212, 175, 55, 0.5); }
.hero-buttons a:last-child:hover  { background: var(--color-primary); color: #000; }

/* Teaser Section */
.luxury-teaser-section { position: relative; padding: 5rem 1rem; background: #050505; background-attachment: scroll; background-size: cover; background-position: center; text-align: center; border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); }
.teaser-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.7), rgba(0,0,0,0.9)); z-index: 1; }
.teaser-container { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.elite-badge { display: inline-block; padding: 5px 20px; background: rgba(212, 175, 55, 0.1); border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 50px; font-weight: bold; margin-bottom: 20px; font-size: 0.9rem; }
.teaser-content h2 { color: #fff; font-size: 2.5rem; font-weight: 900; margin-bottom: 15px; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.teaser-content p  { color: #ccc; font-size: 1.2rem; margin-bottom: 30px; line-height: 1.7; }
.gold-pulse-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--color-primary); color: #000; padding: 15px 40px; border-radius: 50px; text-decoration: none; font-weight: 800; font-size: 1.1rem; transition: 0.3s; animation: gold-pulse 2s infinite; }
@keyframes gold-pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } }

.area-link { background: rgba(255,255,255,0.03); padding: 25px; border-radius: 12px; text-decoration: none; color: #ccc; border: 1px solid #333; text-align: center; transition: all 0.3s ease; display: block; }
.area-link:hover { border-color: var(--color-primary); transform: translateY(-5px); background: rgba(212, 175, 55, 0.05); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

.stat-box { text-align: center; padding: 20px; animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.home-hero h1, .home-hero p, .hero-buttons, .pain-point-box { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }

/* =========================================================
   === 🌟 رأس الصفحات الداخلية
   ========================================================= */
.page-header { background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8)); padding: 4rem 1rem; text-align: center; border-bottom: 1px solid var(--color-border-light); margin-bottom: 3rem; position: relative; overflow: hidden; }
.page-header h1 { font-size: 3rem; background: linear-gradient(45deg, var(--color-primary), #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0; font-weight: 800; }
.page-header p { color: var(--color-text-secondary); font-size: 1.2rem; margin-top: 1rem; }

/* =========================================================
   === 🎯 الفلاتر
   ========================================================= */
.filter-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; padding: 0 1rem; }
.filter-btn { padding: 0.8rem 1.8rem; background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 50px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; font-family: 'Cairo', sans-serif; }
.filter-btn:hover, .filter-btn.active { background: var(--color-primary); color: #000; border-color: var(--color-primary); box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); }
.requests-page .filter-btn:hover, .requests-page .filter-btn.active { background: var(--color-blue); color: #fff; border-color: var(--color-blue); box-shadow: 0 0 15px rgba(10, 132, 255, 0.3); }
.filter-item { display: block; animation: fadeInUp 0.5s; }
.hide { display: none !important; }

/* =========================================================
   === 🏙️ الشبكة
   ========================================================= */
.properties-grid, .requests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* =========================================================
   === 💳 بطاقة العقار
   ========================================================= */
.property-card { background: var(--color-surface-2); border: 1px solid var(--color-border-light); border-radius: 20px; transition: all 0.4s ease; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.property-card:hover { transform: translateY(-10px); border-color: var(--color-primary); box-shadow: var(--shadow-card-hover); }
.card-image { height: 200px; overflow: hidden; position: relative; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.property-card:hover .card-image img { transform: scale(1.1); }
.card-label { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.8); padding: 4px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; border: 1px solid; }
.card-no-image { padding: 15px 15px 0 15px; display: flex; justify-content: space-between; align-items: center; }
.card-label-plain { background: rgba(255,255,255,0.05); padding: 4px 12px; border-radius: 10px; font-size: 0.8rem; border: 1px solid; }
.card-new-badge { color: #666; font-size: 0.8rem; }
.card-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.property-title { color: var(--color-text-primary); font-size: 1.1rem; font-weight: 700; margin: 0 0 10px 0; line-height: 1.4; }
.card-location { color: var(--color-text-secondary); font-size: 0.9rem; margin-bottom: 15px; display: flex; align-items: center; gap: 6px; }
.card-price    { font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; }
.card-specs    { display: flex; gap: 15px; font-size: 0.85rem; color: #ccc; margin-bottom: 15px; flex-wrap: wrap; }
.card-cta      { margin-top: auto; padding-top: 10px; border-top: 1px solid #333; text-align: left; }
.card-cta span { color: #aaa; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px; }

/* =========================================================
   === 📄 صفحة تفاصيل العقار
   ========================================================= */
.property-container { max-width: 1200px; margin: 2rem auto; padding: 0 20px; direction: rtl; }
.property-nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #333; margin-bottom: 30px; }
.back-link { color: var(--color-primary); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.back-link:hover { color: #fff; }
.property-breadcrumb a    { color: var(--color-primary); text-decoration: none; }
.property-breadcrumb span { color: #666; }
.property-specs { background: rgba(255,255,255,0.03); padding: 25px; border-radius: 12px; margin-bottom: 30px; }
.property-specs h2 { color: var(--color-primary); margin-bottom: 20px; font-size: 1.3rem; }
.specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.spec-item { display: flex; justify-content: space-between; padding: 12px; background: rgba(0,0,0,0.3); border-radius: 8px; border-right: 3px solid var(--color-primary); }
.spec-label { color: var(--color-text-secondary); font-size: 0.9rem; }
.spec-value { color: #fff; font-weight: bold; }
.property-meta { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 30px; }
.property-meta span { background: rgba(255,255,255,0.05); padding: 8px 15px; border-radius: 20px; border: 1px solid #444; color: #eee; font-size: 0.9rem; }
.property-call-action { text-align: center; margin: 50px 0; }
.call-button { display: inline-flex; flex-direction: column; align-items: center; background: linear-gradient(45deg, #25D366, #128C7E); color: white; padding: 20px 50px; border-radius: 50px; text-decoration: none; font-weight: bold; border: 2px solid white; box-shadow: 0 10px 30px rgba(37,211,102,0.4); transition: all 0.3s ease; }
.call-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(37,211,102,0.5); }
.call-button small { font-size: 0.85rem; opacity: 0.9; margin-top: 4px; }
.related-properties { margin-top: 3rem; }
.related-properties h2 { color: var(--color-primary); font-size: 1.5rem; margin-bottom: 1.5rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; }
.related-card { background: #111; border-radius: 15px; text-decoration: none; color: #ccc; border: 1px solid #333; transition: all 0.3s ease; overflow: hidden; display: flex; flex-direction: column; }
.related-card:hover { border-color: var(--color-primary); transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0,0,0,0.5); }
.related-card-img { width: 100%; height: 180px; background: #222; overflow: hidden; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.related-card:hover .related-card-img img { transform: scale(1.1); }
.img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #444; }
.related-card-content { padding: 20px; }
.related-card h3    { color: #fff; margin-bottom: 10px; font-size: 1.1rem; line-height: 1.4; }
.related-location   { font-size: 0.85rem; color: #888; margin-bottom: 10px; }
.related-price      { color: var(--color-primary); font-weight: bold; font-size: 1.2rem; border-top: 1px solid #222; padding-top: 10px; }

/* =========================================================
   === 📋 صفحة تفاصيل الطلب
   ========================================================= */
.details-container.request-theme { max-width: 900px; margin: 2rem auto; padding: 0 20px; direction: rtl; font-family: 'Cairo', sans-serif; }
.request-tag { background: rgba(10, 132, 255, 0.1); color: var(--color-blue); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; border: 1px solid var(--color-blue); }
.date-tag    { background: rgba(255, 255, 255, 0.05); color: #aaa; padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; }
.budget-card { background: linear-gradient(135deg, rgba(10, 132, 255, 0.15), rgba(10, 132, 255, 0.05)); padding: 30px; border-radius: 15px; border: 2px solid var(--color-blue); text-align: center; margin-bottom: 30px; }
.budget-label { color: #88c7ff; font-size: 1rem; display: block; margin-bottom: 10px; }
.budget-value { color: #fff; font-size: 2rem; font-weight: 800; }
.content-body { background: rgba(255,255,255,0.02); padding: 30px; border-radius: 15px; border: 1px solid #333; margin-bottom: 30px; line-height: 1.8; color: #ddd; }
.section-subtitle { color: var(--color-blue); margin-bottom: 1.5rem; border-bottom: 1px dashed #444; padding-bottom: 10px; }
.main-content p { margin-bottom: 15px; }
.req-title { color: var(--color-blue); margin: 2rem 0 1rem; font-size: 1.1rem; }
.req-list   { list-style: none; padding: 0; }
.req-list li { background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.req-list li i { color: var(--color-blue); }
.expired-content { opacity: 0.5; filter: grayscale(90%); pointer-events: none; }
.expired-content .property-nav { pointer-events: auto; opacity: 1; filter: none; }

/* =========================================================
   === 📄 صفحة التفاصيل القديمة
   ========================================================= */
.details-container { max-width: 900px; margin: 40px auto; padding: 2.5rem; background: var(--color-surface-2); border: 1px solid var(--color-border-light); border-radius: 20px; box-shadow: var(--shadow-interactive); }
.details-container img { border-radius: 15px; margin: 20px auto; display: block; box-shadow: 0 5px 20px rgba(0,0,0,0.5); border: 1px solid var(--color-border); }
.details-header h1 { font-size: 2.2rem; color: var(--color-primary); }
.action-btn { border: none; padding: 15px 25px; border-radius: 50px; font-weight: bold; font-size: 1.1rem; cursor: pointer; font-family: 'Cairo', sans-serif; transition: all 0.3s ease; }
.whatsapp-btn       { background-color: #25D366; color: white; box-shadow: var(--shadow-whatsapp); }
.whatsapp-btn:hover { background-color: #1ebe5d; transform: translateY(-3px); }
.copy-btn           { background-color: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }
.copy-btn:hover     { background: var(--color-primary); color: #000; }
.back-btn           { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }
.back-btn:hover     { background: var(--color-primary); color: #000; }

/* =========================================================
   === 🦶 الفوتر
   ========================================================= */
.site-footer { background-color: #000; color: var(--color-text-secondary); padding: 4rem 2rem 6rem 2rem; border-top: 1px solid #1a1a1a; }
.footer-logo a { color: var(--color-primary); font-size: 2rem; }
.social-btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #111; border: 1px solid #333; color: #fff; font-size: 1.1rem; transition: all 0.3s ease; text-decoration: none; }
.social-btn:hover          { transform: translateY(-3px); border-color: var(--color-primary); }
.social-btn.facebook:hover  { background: #1877F2; border-color: #1877F2; }
.social-btn.linkedin:hover  { background: #0A66C2; border-color: #0A66C2; }
.social-btn.maps:hover      { background: #34A853; border-color: #34A853; }
.social-btn.pinterest:hover { background: #E60023; border-color: #E60023; }
.site-footer ul li a:hover  { color: var(--color-primary) !important; padding-right: 5px; }

/* =========================================================
   === 🌟 التقييمات
   ========================================================= */
.reviews-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
.google-btn { display: flex; align-items: center; background-color: #fff; height: 52px; padding: 0 15px; border-radius: 4px; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; min-width: 180px; border: 1px solid #e0e0e0; }
.google-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.g-logo-svg { width: 24px; height: 24px; margin-right: 12px; flex-shrink: 0; display: block; }
.g-text  { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.g-label { font-family: 'Arial', sans-serif; font-size: 11px; color: #555; font-weight: bold; text-transform: uppercase; }
.g-stars { color: #fbbc05; font-size: 15px; letter-spacing: 2px; }

/* =========================================================
   === 📞 الزران الثابتان
   ========================================================= */
.fixed-call-button { position: fixed; bottom: 20px; right: 20px; left: auto; z-index: 9999; background: linear-gradient(45deg, #25D366, #128C7E); color: white; padding: 15px 25px; border-radius: 50px; font-weight: bold; font-size: 1.2rem; text-decoration: none; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4); animation: pulse 2s infinite; border: 2px solid white; display: flex; align-items: center; gap: 10px; font-family: 'Cairo', sans-serif; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.smart-search-trigger { position: fixed; bottom: 20px; left: 20px; right: auto; width: 65px; height: 65px; background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9991; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.smart-search-trigger i { color: #000; font-size: 1.5rem; }
.trigger-text { color: #000; font-size: 0.6rem; font-weight: 900; margin-top: 2px; }
.pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #d4af37; animation: smart-pulse 2.5s infinite; z-index: -1; }
@keyframes smart-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.8); opacity: 0; } }

/* =========================================================
   === 🔍 محرك البحث الذكي
   ========================================================= */
.smart-search-overlay { position: fixed; inset: 0; z-index: 10000; display: none; justify-content: center; align-items: center; padding: 20px; }
.overlay-blur { position: absolute; inset: 0; background: rgba(5, 5, 5, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.smart-card { position: relative; width: 100%; max-width: 480px; background: #111; border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 30px; padding: 35px 25px; text-align: center; display: none; box-shadow: 0 40px 100px rgba(0,0,0,0.8); transform: translateY(30px); opacity: 0; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); max-height: 85vh; overflow-y: auto; }
.smart-card.active { display: block; transform: translateY(0); opacity: 1; }
.smart-card::-webkit-scrollbar { width: 5px; }
.smart-card::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
.gold-icon    { font-size: 3rem; color: var(--color-primary); margin-bottom: 15px; filter: drop-shadow(0 0 10px rgba(212,175,55,0.3)); }
.smart-card h2 { color: #fff; font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; }
.smart-card p  { color: #aaa; font-size: 0.9rem; margin-bottom: 25px; line-height: 1.6; }
.choice-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.choice-btn { background: #050505; border: 1px solid #222; padding: 16px 20px; border-radius: 12px; color: #fff; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: 0.3s; text-align: right; font-family: 'Cairo', sans-serif; font-size: 0.95rem; }
.choice-btn:hover { border-color: var(--color-primary); transform: translateX(-5px); background: rgba(212,175,55,0.05); }
.choice-btn i { color: var(--color-primary); font-size: 1.2rem; min-width: 25px; }
.results-list  { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; text-align: right; }
.result-item   { background: #050505; border: 1px solid #222; border-radius: 15px; padding: 12px; display: flex; align-items: center; gap: 15px; text-decoration: none; transition: 0.3s; }
.result-item:hover  { border-color: var(--color-primary); background: #0a0a0a; }
.result-img         { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; border: 1px solid #333; }
.result-info h4     { color: #fff; font-size: 0.95rem; margin-bottom: 5px; }
.result-info span   { color: var(--color-primary); font-weight: bold; font-size: 0.9rem; }
.loading-spinner    { font-size: 2rem; color: var(--color-primary); margin: 20px 0; }
.back-text-btn  { margin-top: 25px; background: none; border: none; color: var(--color-primary); cursor: pointer; font-family: 'Cairo', sans-serif; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: auto; }
.close-text-btn { margin-top: 20px; background: none; border: none; color: #555; cursor: pointer; font-family: 'Cairo', sans-serif; text-decoration: underline; font-size: 0.85rem; }

/* =========================================================
   === 🏢 صفحة من نحن
   ========================================================= */
.about-page-wrapper { background-color: var(--color-background); direction: rtl; font-family: 'Cairo', sans-serif; }
.about-header { position: relative; padding: 6rem 1rem; text-align: center; background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%); border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
.about-header .header-content h1 { font-size: 3rem; font-weight: 900; margin-bottom: 15px; }
.about-header .header-content p  { color: var(--color-text-secondary); font-size: 1.1rem; }
.gold-text { background: linear-gradient(45deg, var(--color-primary), #fffeb3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.mission-vision-card { max-width: 900px; margin: -50px auto 4rem; background: var(--color-surface-2); padding: 3rem; border-radius: 25px; border: 1px solid rgba(212, 175, 55, 0.15); text-align: center; position: relative; z-index: 5; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.mission-icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: 20px; opacity: 0.5; }
.mission-vision-card h2 { color: var(--color-primary); margin-bottom: 20px; font-weight: 800; }
.mission-vision-card p  { line-height: 2; color: #ccc; font-size: 1.1rem; }
.team-section { max-width: 1200px; margin: 0 auto 5rem; padding: 0 20px; }
.section-title-about { text-align: center; color: #fff; font-size: 2.2rem; font-weight: 900; margin-bottom: 3rem; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.expert-card { background: #0a0a0a; border-radius: 20px; overflow: hidden; border: 1px solid #222; transition: 0.4s ease; }
.expert-card:hover { transform: translateY(-10px); border-color: var(--color-primary); box-shadow: 0 15px 40px rgba(0,0,0,0.6); }
.highlight-expert { border-color: rgba(212, 175, 55, 0.3); }
.expert-img { height: 380px; position: relative; overflow: hidden; background: #111; }
.expert-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.expert-card:hover .expert-img img { transform: scale(1.05); }
.img-gradient { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to top, #0a0a0a, transparent); }
.expert-details { padding: 25px; text-align: center; }
.expert-details h3 { color: var(--color-primary); font-size: 1.4rem; margin-bottom: 5px; }
.expert-role { color: #888; font-size: 0.9rem; font-weight: 700; display: block; margin-bottom: 15px; }
.expert-details p { font-size: 0.9rem; color: #666; line-height: 1.6; }
.values-section { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; background: rgba(255,255,255,0.02); padding: 4rem 2rem; margin-bottom: 5rem; }
.value-item { text-align: center; max-width: 300px; }
.value-item i  { font-size: 3.5rem; color: var(--color-primary); margin-bottom: 20px; }
.value-item h3 { color: #fff; margin-bottom: 10px; }
.value-item p  { color: #888; font-size: 0.95rem; }
.about-cta { text-align: center; padding: 4rem 1rem; border-top: 1px solid #222; }
.about-cta h2 { color: var(--color-primary); font-size: 2rem; margin-bottom: 15px; }
.about-cta p  { color: #ccc; margin-bottom: 30px; }
.cta-btns { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.gold-btn { background: var(--color-primary); color: #000 !important; padding: 15px 35px; border-radius: 50px; font-weight: 800; text-decoration: none; transition: 0.3s; display: inline-block; }
.gold-btn:hover { box-shadow: 0 0 25px rgba(212, 175, 55, 0.4); transform: translateY(-3px); }
.outline-btn { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary) !important; padding: 13px 35px; border-radius: 50px; font-weight: 800; text-decoration: none; transition: 0.3s; display: inline-block; }
.outline-btn:hover { background: rgba(212,175,55,0.1); transform: translateY(-3px); }

/* =========================================================
   === 📝 صفحة أضف عقارك
   ========================================================= */
.listing-wrapper { max-width: 950px; margin: -3rem auto 4rem; position: relative; z-index: 10; }
.premium-card { background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(212, 175, 55, 0.15); border-top: 1px solid rgba(212, 175, 55, 0.4); border-radius: 24px; padding: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.6); overflow: hidden; position: relative; }
.premium-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #d4af37, #fce205, #d4af37, transparent); }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 30px; }
.benefit-item { text-align: center; padding: 15px; background: rgba(255,255,255,0.02); border-radius: 15px; border: 1px solid transparent; transition: 0.3s; }
.benefit-item:hover { background: rgba(212, 175, 55, 0.05); border-color: rgba(212, 175, 55, 0.2); transform: translateY(-5px); }
.benefit-icon  { font-size: 2rem; color: var(--color-primary); margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(212,175,55,0.3)); }
.benefit-title { color: #fff; font-weight: bold; margin-bottom: 5px; font-size: 0.95rem; }
.benefit-desc  { color: #888; font-size: 0.8rem; }
.section-divider { display: flex; align-items: center; gap: 15px; margin: 30px 0 20px; }
.divider-line  { flex-grow: 1; height: 1px; background: rgba(255,255,255,0.1); }
.section-title { color: var(--color-primary); font-weight: 700; font-size: 1.1rem; background: rgba(212, 175, 55, 0.1); padding: 5px 15px; border-radius: 20px; border: 1px solid rgba(212, 175, 55, 0.2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.full-width { grid-column: 1 / -1; }
.form-group { position: relative; }
.form-group label { display: block; color: #ccc; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; transition: 0.3s; }
.custom-input, .custom-select, .custom-textarea { width: 100%; background: #0a0a0a; border: 1px solid #333; border-radius: 12px; padding: 16px; color: #fff; font-family: 'Cairo', sans-serif; font-size: 1rem; transition: all 0.3s ease; }
.custom-input:focus, .custom-select:focus, .custom-textarea:focus { border-color: var(--color-primary); background: #111; box-shadow: 0 0 15px rgba(212, 175, 55, 0.15); outline: none; }
.form-group:focus-within label { color: var(--color-primary); }
.submit-area { margin-top: 30px; text-align: center; position: relative; }
.submit-btn { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #000; font-weight: 900; font-size: 1.3rem; border: none; padding: 20px 60px; border-radius: 50px; cursor: pointer; width: 100%; max-width: 500px; box-shadow: var(--shadow-btn-gold); transition: all 0.3s ease; display: inline-flex; justify-content: center; align-items: center; gap: 15px; font-family: 'Cairo', sans-serif; }
.submit-btn:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-btn-gold-hover); }
.security-note { margin-top: 15px; color: #666; font-size: 0.85rem; display: flex; justify-content: center; align-items: center; gap: 5px; }

/* =========================================================
   === ✅ صفحة النجاح
   ========================================================= */
.success-page-wrapper { min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%); }
.success-card { background: var(--color-surface-2); padding: 4rem 2.5rem; border-radius: 30px; border: 1px solid rgba(212, 175, 55, 0.2); text-align: center; max-width: 650px; width: 100%; box-shadow: 0 30px 70px rgba(0,0,0,0.7); position: relative; overflow: hidden; }
.success-icon-container { margin-bottom: 2rem; }
.success-icon { font-size: 5.5rem; color: var(--color-primary); filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4)); animation: popIn 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.success-title    { color: #fff; font-size: 2.2rem; font-weight: 900; margin-bottom: 10px; }
.success-subtitle { color: var(--color-primary); font-size: 1.1rem; margin-bottom: 3rem; font-weight: 600; }
.status-roadmap { background: rgba(0,0,0,0.3); padding: 25px; border-radius: 20px; margin-bottom: 3rem; text-align: right; border-right: 4px solid var(--color-primary); }
.roadmap-title { color: #fff; margin-bottom: 20px; font-size: 1.1rem; font-weight: 800; }
.roadmap-list { list-style: none; padding: 0; }
.roadmap-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; color: #bbb; font-size: 0.95rem; line-height: 1.6; }
.roadmap-icon { color: var(--color-primary); font-size: 1rem; margin-top: 4px; }
.success-actions { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.auto-redirect-text { margin-top: 2.5rem; color: #555; font-size: 0.85rem; }

/* =========================================================
   === 🚫 صفحة 404 و أزرار ذهبية مشتركة
   ========================================================= */
.error-page-wrapper { min-height: 85vh; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%); padding: 20px; }
.error-container { max-width: 650px; width: 100%; padding: 4rem 2rem; background: rgba(255, 255, 255, 0.03); border-radius: 25px; border: 1px solid rgba(212, 175, 55, 0.15); backdrop-filter: blur(10px); box-shadow: 0 30px 60px rgba(0,0,0,0.6); }
.error-icon    { font-size: 5rem; color: var(--color-primary); margin-bottom: 1.5rem; filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3)); }
.error-code    { color: #fff; font-size: 6rem; margin: 0; font-weight: 900; line-height: 1; background: linear-gradient(to bottom, #fff, #666); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.error-title   { color: var(--color-primary); font-size: 1.8rem; margin-bottom: 1.5rem; font-weight: 700; }
.error-message { color: #bbb; line-height: 1.8; margin-bottom: 3.5rem; font-size: 1.1rem; }
.error-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.error-footer  { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.05); color: #666; font-size: 0.95rem; }
.error-footer a { color: #25D366; text-decoration: none; font-weight: 600; transition: 0.3s; }
.error-footer a:hover { text-decoration: underline; }

/* الأزرار الذهبية المشتركة */
.gold-btn-main { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #000 !important; padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: 800; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: var(--shadow-btn-gold); }
.gold-btn-main:hover { transform: translateY(-3px); box-shadow: var(--shadow-btn-gold-hover); filter: brightness(1.1); }
.gold-btn-outline { background: transparent; color: var(--color-primary) !important; padding: 13px 35px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.05rem; border: 2px solid var(--color-primary); display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; }
.gold-btn-outline:hover { background: rgba(212, 175, 55, 0.1); transform: translateY(-3px); }

/* =========================================================
   === 🖼️ اللوغو
   ========================================================= */
.hero-logo-container img { max-width: 160px !important; width: 160px; height: auto; }

/* =========================================================
   === 📱 التجاوب — أقل من 768px
   ========================================================= */
@media (max-width: 768px) {
  .navbar { padding: 1rem; flex-wrap: wrap; justify-content: center; }
  .home-hero h1 { font-size: 2.5rem; line-height: 1.3; }
  .home-hero p  { font-size: 1.1rem; }
  .properties-grid, .requests-grid { gap: 1.5rem; }
  .hero-buttons { gap: 1rem; }
  .hero-buttons a { width: 90%; text-align: center; margin: 0 auto; }
  .page-header { padding: 3rem 1rem; margin-bottom: 2rem; }
  .teaser-content h2 { font-size: 1.8rem; }
  .fixed-call-button { bottom: 15px; right: 15px; font-size: 1rem; padding: 12px 18px; }
  .smart-search-trigger { bottom: 15px; left: 15px; }
  .reviews-wrapper { flex-direction: column; gap: 10px; width: 100%; }
  .trustpilot-widget, .google-btn { width: 100% !important; max-width: 320px; justify-content: center; }
  .copyright-bar { flex-direction: column; text-align: center; }
  .related-grid { grid-template-columns: 1fr; }
  .property-nav { flex-direction: column; align-items: flex-start; gap: 10px; }
  .budget-value { font-size: 1.8rem; }
  .about-header .header-content h1 { font-size: 1.8rem; }
  .mission-vision-card { padding: 1.5rem; width: 95%; }
  .expert-img { height: 300px; }
  .benefits-grid { grid-template-columns: 1fr; gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .premium-card { padding: 25px; }
  .submit-btn { padding: 18px 20px; font-size: 1.1rem; width: 100%; }
  .listing-wrapper { margin-top: 0; }
  .success-card { padding: 3rem 1.5rem; }
  .success-actions { flex-direction: column; }
  .gold-btn-main, .gold-btn-outline { width: 100%; justify-content: center; }
  .error-code { font-size: 4rem; }
  .error-title { font-size: 1.4rem; }
  .error-actions { flex-direction: column; width: 100%; }
  .cta-btns { flex-direction: column; align-items: center; }
}

/* =========================================================
   === 📱 التجاوب — أقل من 420px
   ========================================================= */
@media (max-width: 420px) {
  .navbar-links { gap: 0.75rem; justify-content: center; width: 100%; margin-top: 0.75rem; }
  .nav-link { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
  .navbar-logo { width: 100%; text-align: center; margin-bottom: 0.5rem; }
}

/* =========================================================
   === 📦 إصلاحات عامة
   ========================================================= */
#latest-opportunities { padding-left: 0; padding-right: 0; }

/* =========================================================
   === 🎬 معرض النخبة (luxury-gallery)
   ========================================================= */
.luxury-viewer-container { max-width: 1200px; margin: 1rem auto 4rem; padding: 0 20px; direction: rtl; font-family: 'Cairo', sans-serif; }
.gallery-nav { padding: 10px 0 20px; }

.slider-progress-container { width: 100%; height: 4px; background: #222; margin-bottom: 15px; border-radius: 10px; overflow: hidden; }
.slider-progress-bar       { height: 100%; width: 0%; background: var(--color-primary); box-shadow: 0 0 15px var(--color-primary); transition: width 0.1s linear; }

.slider-viewport { position: relative; width: 100%; height: 650px; border-radius: 25px; overflow: hidden; background: #000; border: 1px solid var(--color-border-light); box-shadow: 0 40px 80px rgba(0,0,0,0.9); }
.slider-track    { display: flex; height: 100%; transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
.slide-item      { min-width: 100%; height: 100%; position: relative; overflow: hidden; }

.slide-image     { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.slide-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 10s linear; }
.slide-item.active .slide-image img { transform: scale(1.1); }

.slide-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.4) 50%, transparent 100%); z-index: 2; }
.slide-content { position: absolute; bottom: 0; right: 0; z-index: 3; padding: 60px; width: 100%; }
.slide-content h2 { color: var(--color-primary); font-size: 2.8rem; font-weight: 900; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.slide-content p  { color: #ddd; font-size: 1.4rem; margin-bottom: 25px; max-width: 800px; }
.slide-price      { font-size: 2.5rem; color: #fff; font-weight: 900; letter-spacing: 1px; }

.nav-arrow       { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); border: 1px solid var(--color-primary); color: var(--color-primary); width: 55px; height: 55px; border-radius: 50%; z-index: 10; cursor: pointer; transition: 0.3s; }
.nav-arrow:hover { background: var(--color-primary); color: #000; box-shadow: 0 0 20px var(--color-primary); }
.nav-arrow.prev  { right: 30px; }
.nav-arrow.next  { left: 30px; }

.slider-controls-panel { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 30px 0; }
.control-btn { background: #1a1a1a; color: #fff; border: 1px solid #333; padding: 18px 40px; border-radius: 50px; font-weight: 800; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 10px; font-family: 'Cairo', sans-serif; }
.control-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.details-btn  { background: var(--color-primary); color: #000; border: none; padding: 18px 40px; border-radius: 50px; font-weight: 800; font-size: 1.1rem; text-decoration: none; font-family: 'Cairo', sans-serif; display: inline-flex; align-items: center; gap: 10px; transition: 0.3s; }
.gold-glow:hover { box-shadow: 0 0 30px rgba(212, 175, 55, 0.4); transform: translateY(-3px); }

.owner-branding-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.15); border-radius: 20px; padding: 25px 40px; margin-top: 20px; }
.owner-info          { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.owner-text h3       { color: #fff; font-size: 1.8rem; font-weight: 800; }
.owner-text .label   { color: var(--color-primary); font-size: 0.9rem; font-weight: 700; }
.call-owner-btn      { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; text-decoration: none; padding: 15px 35px; border-radius: 50px; font-weight: 900; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 20px rgba(37,211,102,0.2); transition: 0.3s; }
.call-owner-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(37,211,102,0.3); }

@media (max-width: 768px) {
  .slider-viewport  { height: 500px; }
  .slide-content    { padding: 30px; }
  .slide-content h2 { font-size: 1.8rem; }
  .slide-content p  { font-size: 1.1rem; }
  .slide-price      { font-size: 1.8rem; }
  .slider-controls-panel { flex-direction: column; }
  .owner-info       { justify-content: center; text-align: center; }
  .nav-arrow.prev   { right: 15px; }
  .nav-arrow.next   { left: 15px; }
}
