/* ============================================================
   TRUE MIX — Services Slider (Draggable)
   سلايدر الخدمات الأفقي القابل للسحب
   - 8 بطاقات بحجم 300×500 (عرض×ارتفاع)
   - يدعم الماوس واللمس وشاشات اللمس
   ============================================================ */

.sv-slider-wrap {
  position: relative;
  width: 100%;
  margin-top: 50px;
  padding: 0 0 30px;
  user-select: none;
  -webkit-user-select: none;
}

/* المسار الذي يحوي البطاقات */
.sv-slider {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 18px 4px;
  cursor: grab;
  /* إخفاء شريط التمرير */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* اللمس على الجوال - مهم جدا */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* ترتيب البطاقات بنفس ترتيب HTML بصرف النظر عن RTL */
  direction: ltr;
}
.sv-slider::-webkit-scrollbar { display: none; }

.sv-slider.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.sv-slider.is-dragging .sv-slide {
  pointer-events: none;
}
.sv-slider.is-dragging .sv-slide-link {
  pointer-events: none;
}

/* البطاقة - 300×500 بالضبط */
.sv-slide {
  flex: 0 0 300px;
  width: 300px;
  height: 500px;
  background: #fff;
  border: 1px solid rgba(200, 164, 90, .12);
  border-top: 3px solid var(--gold);
  border-radius: 4px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform .35s ease, box-shadow .35s ease, border-top-color .35s ease;
  box-shadow: 0 4px 18px rgba(13, 27, 42, .06);
  direction: rtl;
}
html.lang-en .sv-slide { direction: ltr; text-align: left; }

/* خلفية زخرفية */
.sv-slide::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 140px;
  height: 140px;
  background: rgba(200, 164, 90, .06);
  border-radius: 50%;
  transition: transform .5s ease;
}
.sv-slide:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(13, 27, 42, .12);
  border-top-color: var(--gold-l);
}
.sv-slide:hover::before {
  transform: scale(2.5);
}

/* رقم الخدمة (01 / 08) */
.sv-slide-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

/* الأيقونة - دائرة */
.sv-slide-ico {
  width: 78px;
  height: 78px;
  background: rgba(200, 164, 90, .08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
  transition: background .3s ease;
}
.sv-slide:hover .sv-slide-ico {
  background: rgba(200, 164, 90, .18);
}

/* العنوان */
.sv-slide h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.3;
  position: relative;
  z-index: 2;
}

/* خط فاصل ذهبي */
.sv-slide-line {
  width: 36px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

/* الوصف */
.sv-slide p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 22px;
  flex: 1;
  position: relative;
  z-index: 2;
}

/* رابط "اقرأ المزيد" في الأسفل */
.sv-slide-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  margin-top: auto;
  transition: gap .25s ease, color .25s ease;
  -webkit-user-drag: none;
  user-drag: none;
}
.sv-slide-link:hover {
  color: var(--gold-d);
  gap: 14px;
}
/* عند العربي: Tajawal بدون letter-spacing */
html.lang-ar .sv-slide-link {
  font-family: 'Tajawal','Cairo',sans-serif;
}
/* عند الإنجليزي: Montserrat مع letter-spacing */
html.lang-en .sv-slide-link {
  font-family: 'Montserrat',sans-serif;
  letter-spacing: 1.5px;
}

/* أزرار prev/next */
.sv-slider-btn {
  position: absolute;
  top: -50px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  border: none;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, transform .25s, opacity .25s;
  z-index: 5;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1;
}
.sv-slider-btn:hover {
  background: var(--gold);
  color: var(--navy);
  transform: scale(1.05);
}
.sv-slider-btn:active {
  transform: scale(0.95);
}
.sv-slider-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.sv-slider-btn[disabled]:hover {
  background: var(--navy);
  color: var(--gold);
  transform: none;
}

/* في RTL (العربي): prev = يمين، next = يسار من ناحية الموضع البصري */
.sv-slider-prev { left: 0; }
.sv-slider-next { left: 54px; }
html.lang-en .sv-slider-prev { left: auto; right: 54px; }
html.lang-en .sv-slider-next { left: auto; right: 0; }

/* النقاط (Dots) */
.sv-slider-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}
.sv-slider-dot {
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: rgba(13, 27, 42, .15);
  border: none;
  cursor: pointer;
  transition: background .25s, width .25s;
  padding: 0;
}
.sv-slider-dot.is-active {
  background: var(--gold);
  width: 40px;
}

/* تلميح السحب */
.sv-slider-hint {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
  opacity: .65;
  letter-spacing: 0;
  transition: opacity .4s ease;
}
/* العربي: Tajawal بدون letter-spacing */
html.lang-ar .sv-slider-hint {
  font-family: 'Tajawal','Cairo',sans-serif;
  font-size: 13px;
  letter-spacing: 0 !important;
}
/* الإنجليزي: مع letter-spacing */
html.lang-en .sv-slider-hint {
  letter-spacing: 1px;
}
.sv-slider-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   تكييف الجوال والتابلت
   ============================================================ */

@media (max-width: 768px) {
  .sv-slider-wrap { margin-top: 30px; }

  .sv-slide {
    flex: 0 0 280px;
    width: 280px;
    height: auto !important;
    min-height: 0 !important;
    padding: 0;
  }
  /* الصورة بنسبة aspect-ratio (تتكيف مع المحتوى) */
  .sv-slide-img-wrap {
    flex: 0 0 auto !important;
    aspect-ratio: 4 / 3;
    min-height: auto !important;
    max-height: 250px;
  }
  .sv-slide-content {
    flex: 0 0 auto !important;
    padding: 20px 22px 22px !important;
    min-height: auto !important;
  }
  .sv-slide h3 { font-size: 17px; }
  .sv-slide p { font-size: 13px; }

  /* أزرار التنقل تنتقل للأسفل بعد السلايدر */
  .sv-slider-btn {
    position: relative;
    top: 0;
    left: 0 !important;
    right: 0 !important;
  }
  .sv-slider-wrap {
    padding-top: 0;
  }
  /* نضع الأزرار في صف أسفل النقاط */
  .sv-slider-prev, .sv-slider-next {
    display: inline-flex;
  }

  .sv-slider {
    gap: 14px;
    padding: 12px 4px;
  }
}

/* على الجوال: نخفي الأزرار العلوية ونعرض السلايدر بالسحب فقط */
@media (max-width: 768px) {
  .sv-slider-wrap > .sv-slider-btn {
    display: none;
  }
}

@media (max-width: 380px) {
  .sv-slide {
    flex: 0 0 260px;
    width: 260px;
    height: auto !important;
    min-height: 0 !important;
    padding: 0;
  }
  .sv-slide-img-wrap {
    flex: 0 0 auto !important;
    aspect-ratio: 4 / 3;
    min-height: auto !important;
    max-height: 220px;
  }
  .sv-slide-content {
    flex: 0 0 auto !important;
    padding: 16px 20px 20px !important;
    min-height: auto !important;
  }
  .sv-slide-content h3 {
    font-size: 16px !important;
  }
  .sv-slide-content p {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }
}

/* iPhone SE وأصغر */
@media (max-width: 360px) {
  .sv-slide {
    flex: 0 0 240px;
    width: 240px;
    min-height: 0 !important;
  }
  .sv-slide-img-wrap {
    max-height: 200px;
  }
  .sv-slide-content {
    padding: 14px 18px 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ✅ TRUE MIX — إصلاح الخطوط العربية داخل بطاقات السلايدر
   ════════════════════════════════════════════════════════════════════ */
html.lang-ar .sv-slide h3,
html.lang-ar .sv-slide p,
html[dir="rtl"] .sv-slide h3,
html[dir="rtl"] .sv-slide p {
  font-family: 'Tajawal','Cairo','Segoe UI',sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  font-feature-settings: "kern" 1,"liga" 1,"calt" 1,"rlig" 1 !important;
  -webkit-font-feature-settings: "kern" 1,"liga" 1,"calt" 1,"rlig" 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* iOS Safari خاص */
@supports (-webkit-touch-callout: none) {
  html.lang-ar .sv-slide h3,
  html.lang-ar .sv-slide p,
  html.lang-ar .sv-slider-hint {
    font-family: 'Tajawal','Cairo',sans-serif !important;
    letter-spacing: 0 !important;
    -webkit-letter-spacing: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ✅ TRUE MIX — إصلاح قطع النص في بطاقات السلايدر على الموبايل
   المشكلة: على iPhone SE، النص أسفل الصورة كان يُقطَع
   الحل: ارتفاع تلقائي + aspect-ratio للصورة (يتكيف مع المحتوى الفعلي)
   ════════════════════════════════════════════════════════════════════ */

/* iPhone Pro Max وأصغر */
@media (max-width: 480px) {
  .sv-slide {
    height: auto !important;
    min-height: 0 !important;
  }
  .sv-slide-img-wrap {
    flex: 0 0 auto !important;
    aspect-ratio: 4 / 3;
    min-height: auto !important;
    max-height: 240px;
  }
  .sv-slide-content {
    flex: 0 0 auto !important;
    padding: 18px 22px 22px !important;
    min-height: auto !important;
  }
}

/* iPhone SE (380px وأصغر) */
@media (max-width: 380px) {
  .sv-slide {
    height: auto !important;
    min-height: 0 !important;
  }
  .sv-slide-img-wrap {
    aspect-ratio: 4 / 3;
    max-height: 220px;
  }
  .sv-slide-content {
    padding: 16px 20px 20px !important;
  }
  .sv-slide-content h3,
  .sv-slide h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  .sv-slide-content p,
  .sv-slide p {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }
}

/* iPhone SE القديم (360px وأصغر) */
@media (max-width: 360px) {
  .sv-slide {
    flex: 0 0 240px !important;
    width: 240px !important;
  }
  .sv-slide-img-wrap {
    max-height: 200px;
  }
}