/* ==========================================================================
   الفوتر الفاخر (Luxury Footer)
   ========================================================================== */
.luxury-footer {
  position: relative;
  background: var(--bg-navbar); /* يأخذ لون الناف بار الأساسي (أبيض أو كحلي داكن) */
  border-top: 1px solid var(--nav-border);
  padding: 80px 0 30px;
  overflow: hidden;
  z-index: 10;
}

/* 1. الإضاءة المحيطية (Ambient Glow) */
.footer-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.4;
}

.footer-glow-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(197, 155, 135, 0.15) 0%, transparent 70%);
  bottom: -150px;
  right: -100px;
  
  left: -60px;
}

.footer-glow-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(197, 155, 135, 0.1) 0%, transparent 70%);
  top: 0;
  left: -50px;
}

/* 2. تخطيط الأعمدة (Grid Layout) */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
}

/* 3. العمود الأول (الشعار والهوية) */
.footer-logo-text {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--nav-text-hover);
  letter-spacing: 2px;
}

.footer-logo {
  max-height: 50px;
  object-fit: contain;
}

.footer-slogan {
  margin-top: 20px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 85%;
}

/* 4. عناوين الأعمدة (Titles) */
.footer-title {
  color: var(--nav-text-hover);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
}

/* نقطة ذهبية صغيرة قبل العنوان للفخامة */
.footer-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--rose-gold);
  border-radius: 50%;
  margin-inline-end: 10px;
  transform: translateY(-3px);
}

/* 5. روابط الفوتر وتأثير الانزلاق (Sweep Line Hover) */
.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-link {
  position: relative;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
  display: inline-block;
  width: fit-content;
}

.footer-link::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -4px;
  height: 1px;
  background: var(--rose-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.footer-link:hover {
  color: var(--nav-text-hover);
}

.footer-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 6. معلومات التواصل (Contact Info) */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-item i {
  color: var(--rose-gold);
  font-size: 1.2rem;
}

.footer-contact-item:hover {
  color: var(--nav-text-hover);
}

.footer-address-item {
  align-items: flex-start;
}
.footer-address-item i {
  margin-top: 3px;
}

/* 🆕 بصفحة عربية (RTL)، عناصر التواصل (إيميل/هاتف/عنوان) عندها dir="ltr" إجباري
   (عشان الأرقام/الإيميل تنكتب صح)، بس هيك بينقلب ترتيب عرض الأيقونة بالنسبة للنص
   (تصير الأيقونة يسار الصندوق) — بعكس باقي عناصر الفوتر (زي "قيّمنا على غوغل")
   يلي أيقونتها يمين حسب اتجاه الصفحة الطبيعي. بنعكس ترتيب العرض بس (مش اتجاه
   النص جوا الـspan) عشان تصير الأيقونة بنفس الجهة بكل العناصر. مربوطة بـ
   html[dir="rtl"] فقط عشان ما تأثر على النسخ الهولندية/الإنجليزية/التركية.*/
html[dir="rtl"] .footer-contact-item[dir="ltr"] {
  flex-direction: row-reverse;
}

/* 7. الشريط السفلي (Bottom Bar) */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--nav-border);
}

.copyright-box {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.footer-social {
  display: flex;
  gap: 20px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--nav-border);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social-link:hover {
  background: var(--rose-gold);
  border-color: var(--rose-gold);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(197, 155, 135, 0.4);
}

/* 8. ريسبونسف للموبايل والتابلت */
@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-slogan {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}