/* Modern Swiper Design - Wadiyabba */
/* تصميم حديث ومميز للسلايدر */

:root {
  --swiper-primary: #667eea;
  --swiper-secondary: #764ba2;
  --swiper-accent: #f093fb;
  --swiper-text: #ffffff;
  --swiper-shadow: rgba(0, 0, 0, 0.3);
  --swiper-glass: rgba(255, 255, 255, 0.1);
  --swiper-blur: blur(15px);
}

/* Container الرئيسي */
.modern-swiper-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
  overflow: hidden;
  background: #667eea;
}

/* Swiper wrapper مع تأثيرات حديثة */
.modern-swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

/* تصميم الـ slides */
.modern-swiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Overlay مع تدرج جميل */
.modern-swiper .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(102, 126, 234, 0.6);
  z-index: 1;
}

/* تدرج لوني يغطي كامل السلايدر */
.modern-swiper .slide-overlay-full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(26, 124, 189, 0.85) 0%,
    rgba(72, 182, 92, 0.85) 100%
  );
  z-index: 1;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

/* تأثير hover للـ overlay */
.modern-swiper .swiper-slide:hover .slide-overlay-full {
  opacity: 0.85;
}

/* تدرج لوني خلف المحتوى */
.modern-swiper .content-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.85) 0%,
    rgba(118, 75, 162, 0.8) 25%,
    rgba(240, 147, 251, 0.75) 50%,
    rgba(102, 126, 234, 0.9) 75%,
    rgba(64, 81, 148, 0.95) 100%
  );
  z-index: 2;
  opacity: 0.7;
}

/* تدرجات ملونة مختلفة للتنويع */
.modern-swiper .gradient-overlay-blue {
  background: linear-gradient(
    45deg,
    rgba(30, 144, 255, 0.8) 0%,
    rgba(0, 191, 255, 0.7) 50%,
    rgba(135, 206, 250, 0.6) 100%
  );
}

.modern-swiper .gradient-overlay-purple {
  background: linear-gradient(
    -45deg,
    rgba(138, 43, 226, 0.8) 0%,
    rgba(147, 112, 219, 0.7) 50%,
    rgba(221, 160, 221, 0.6) 100%
  );
}

.modern-swiper .gradient-overlay-pink {
  background: linear-gradient(
    135deg,
    rgba(255, 20, 147, 0.8) 0%,
    rgba(255, 105, 180, 0.7) 50%,
    rgba(255, 182, 193, 0.6) 100%
  );
}

.modern-swiper .gradient-overlay-green {
  background: linear-gradient(
    90deg,
    rgba(34, 193, 195, 0.8) 0%,
    rgba(253, 187, 45, 0.7) 100%
  );
}

.modern-swiper .gradient-overlay-orange {
  background: linear-gradient(
    45deg,
    rgba(255, 94, 77, 0.8) 0%,
    rgba(255, 154, 0, 0.7) 100%
  );
}

/* محتوى الـ slide */
.modern-swiper .slide-content {
  position: absolute;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  padding: 2rem;
  /* إزالة الخلفية الشفافة */
  background: none;
  backdrop-filter: none;
  border-radius: 0;
  border: none;
  box-shadow: none;

  /* التموضع الافتراضي - الوسط */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  opacity: 1;
  transition: all 0.3s ease;
}

/* Text positioning classes - مواضع النص المختلفة */
.text-position-center .slide-content {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center;
}

.text-position-top .slide-content {
  top: 10% !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center;
}

.text-position-bottom .slide-content {
  top: auto !important;
  bottom: 10% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center;
}

.text-position-left .slide-content {
  top: 50% !important;
  left: 5% !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  text-align: right;
  width: 40%;
  max-width: 500px;
}

.text-position-right .slide-content {
  top: 50% !important;
  left: auto !important;
  right: 5% !important;
  transform: translateY(-50%) !important;
  text-align: left;
  width: 40%;
  max-width: 500px;
}

.text-position-top-left .slide-content {
  top: 10% !important;
  left: 5% !important;
  right: auto !important;
  transform: none !important;
  text-align: right;
  width: 40%;
  max-width: 500px;
}

.text-position-top-right .slide-content {
  top: 10% !important;
  left: auto !important;
  right: 5% !important;
  transform: none !important;
  text-align: left;
  width: 40%;
  max-width: 500px;
}

.text-position-bottom-left .slide-content {
  top: auto !important;
  bottom: 10% !important;
  left: 5% !important;
  right: auto !important;
  transform: none !important;
  text-align: right;
  width: 40%;
  max-width: 500px;
}

.text-position-bottom-right .slide-content {
  top: auto !important;
  bottom: 10% !important;
  left: auto !important;
  right: 5% !important;
  transform: none !important;
  text-align: left;
  width: 40%;
  max-width: 500px;
}

/* عنوان الـ slide */
.modern-swiper .slide-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--swiper-text);
  line-height: 1.2;
}

/* وصف الـ slide */
.modern-swiper .slide-description {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.6;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
}

/* أزرار الـ slide */
.modern-swiper .slide-button {
  margin-top: 1rem;
}

.modern-swiper .slide-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  background: #667eea;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.modern-swiper .slide-button a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.6s;
}

.modern-swiper .slide-button a:hover::before {
  left: 100%;
}

.modern-swiper .slide-button a:hover {
  transform: translateY(0px);
  background: #5a6fd8;
}

/* أزرار التنقل الحديثة */
.modern-swiper .swiper-button-next,
.modern-swiper .swiper-button-prev {
  width: 65px;
  height: 65px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-swiper .swiper-button-next::after,
.modern-swiper .swiper-button-prev::after {
  font-size: 20px;
  font-weight: 900;
  color: white;
}

.modern-swiper .swiper-button-next:hover,
.modern-swiper .swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

/* Pagination حديث */
.modern-swiper .swiper-pagination {
  bottom: 30px;
  text-align: center;
}

.modern-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  border-radius: 50%;
  margin: 0 8px;
  transition: all 0.4s ease;
}

.modern-swiper .swiper-pagination-bullet-active {
  background: #667eea;
  transform: scale(1.3);
}

/* تأثيرات الحركة - مبسطة لتجنب التضارب مع التموضع */
@keyframes slideContentFloat {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* تأثير بسيط عند تفعيل الـ slide - بدون تعديل transform */
.modern-swiper .swiper-slide-active .slide-content {
  animation: fadeIn 0.6s ease-out;
}

/* إزالة الحركة العائمة من التموضع المحدد لتجنب التضارب */
.text-position-bottom .slide-content,
.text-position-top .slide-content,
.text-position-bottom-left .slide-content,
.text-position-bottom-right .slide-content,
.text-position-top-left .slide-content,
.text-position-top-right .slide-content,
.text-position-left .slide-content,
.text-position-right .slide-content {
  animation: none !important;
}

/* تطبيق تأثير الظهور البسيط فقط */
.modern-swiper .swiper-slide-active .text-position-bottom .slide-content,
.modern-swiper .swiper-slide-active .text-position-top .slide-content,
.modern-swiper .swiper-slide-active .text-position-bottom-left .slide-content,
.modern-swiper .swiper-slide-active .text-position-bottom-right .slide-content,
.modern-swiper .swiper-slide-active .text-position-top-left .slide-content,
.modern-swiper .swiper-slide-active .text-position-top-right .slide-content,
.modern-swiper .swiper-slide-active .text-position-left .slide-content,
.modern-swiper .swiper-slide-active .text-position-right .slide-content {
  animation: fadeIn 0.6s ease-out !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-swiper .slide-content {
    max-width: 90%;
    padding: 1.5rem;
    border-radius: 0;
    width: 90% !important;
  }

  /* الحفاظ على التموضع في الأسفل للموبايل */
  .text-position-bottom .slide-content,
  .text-position-bottom-left .slide-content,
  .text-position-bottom-right .slide-content {
    top: auto !important;
    bottom: 5% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: 90% !important;
    max-width: none !important;
  }

  /* التموضع في الأعلى للموبايل */
  .text-position-top .slide-content,
  .text-position-top-left .slide-content,
  .text-position-top-right .slide-content {
    top: 5% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: 90% !important;
    max-width: none !important;
  }

  /* المواضع الجانبية تصبح وسط في الموبايل */
  .text-position-left .slide-content,
  .text-position-right .slide-content {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    width: 90% !important;
    max-width: none !important;
  }

  .modern-swiper .slide-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
    margin-bottom: 1rem;
  }

  .modern-swiper .slide-description {
    font-size: clamp(1rem, 4vw, 1.2rem);
    margin-bottom: 1.5rem;
  }

  .modern-swiper .swiper-button-next,
  .modern-swiper .swiper-button-prev {
    width: 50px;
    height: 50px;
  }

  .modern-swiper .swiper-button-next::after,
  .modern-swiper .swiper-button-prev::after {
    font-size: 16px;
  }

  .modern-swiper .swiper-pagination {
    bottom: 20px;
  }
}

@media (max-width: 480px) {
  .modern-swiper .slide-content {
    padding: 1rem;
    border-radius: 0;
  }

  .modern-swiper .slide-button a {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }

  .modern-swiper .swiper-button-next,
  .modern-swiper .swiper-button-prev {
    width: 45px;
    height: 45px;
  }

  .modern-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px;
  }
}

/* تحسينات الأداء */
.modern-swiper * {
  will-change: transform;
}

.modern-swiper .swiper-slide {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* تأثيرات إضافية للـ parallax */
.modern-swiper .parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* Loading animation */
.modern-swiper-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.modern-swiper-loading::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #667eea;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}