/* ===================== Carousel Wrapper ===================== */
.wg-carousel-wrap { 
  position: relative; 
  max-width: 1200px; 
  margin: 20px auto; 
}

/* ===================== Slides ===================== */
.wg-slide { 
  cursor: pointer; 
  display: inline-block; /* لتسهيل scroll أفقي على الموبايل */
}
.wg-slide-inner { 
  position: relative; 
  overflow: hidden; 
  border-radius: 10px; 
  box-shadow: 0 6px 18px rgba(0,0,0,0.12); 
}
.wg-slide-img { 
  width: 100%; 
  height: 200px; 
  object-fit: cover; 
  display: block; 
  transition: transform 0.35s ease; 
}
.wg-slide-inner:hover .wg-slide-img { 
  transform: scale(1.04); 
}

/* ===================== Caption under image ===================== */
.wg-slide-caption {
  text-align: center;        /* منتصف أفقي */
  margin-top: 8px;           /* مسافة عن الصورة */
  font-size: 16px;
  font-weight: bold;
  color: #333;
  word-wrap: break-word;
}
@media (max-width: 480px) {
  .wg-slide-caption {
    font-size: 14px;
    margin-top: 6px;
  }
}

/* ===================== Navigation Arrows ===================== */
.wg-swiper-button-prev, 
.wg-swiper-button-next { 
  position: absolute;           /* فوق الصور */
  top: 50%;                     /* في منتصف الصورة */
  transform: translateY(-50%);
  width: 44px; 
  height: 44px; 
  background: #ffffff; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 6px 18px rgba(0,0,0,0.12); 
  cursor: pointer; 
  z-index: 10;                  /* فوق الصور */
}
.wg-swiper-button-prev { left: 10px; }
.wg-swiper-button-next { right: 10px; }
.wg-swiper-button-prev::after { content: '<'; font-size: 20px; font-weight: bold; color: #333; }
.wg-swiper-button-next::after { content: '>'; font-size: 20px; font-weight: bold; color: #333; }

/* ===================== Modal ===================== */
.wg-modal { 
  display: none; 
  position: fixed; 
  left: 0; top: 0; right: 0; bottom: 0; 
  background: rgba(0,0,0,0.6);  
  z-index: 99999; 
  align-items: center; 
  justify-content: center; 
  padding: 0;  /* افتراضي للكمبيوتر */
  overflow-y: auto; /* تمكين التمرير إذا تجاوز المحتوى الشاشة */
}

.wg-modal-content { 
  max-width: 900px; 
  margin: 40px auto; 
  background: #fff; 
  border-radius: 12px; 
  overflow: hidden; 
  box-shadow: 0 20px 60px rgba(0,0,0,0.3); 
  position: relative;
  overflow-y: auto; /* للتمرير داخل المودال إذا زاد المحتوى */
}

.wg-modal-body { 
  display: flex; 
  gap: 20px; 
  padding: 20px; 
}

#wg-modal-img { 
  width: 48%; 
  height: auto; 
  object-fit: contain; 
}

.wg-modal-info { 
  width: 52%; 
  padding: 6px 12px; 
  font-size: 16px;
  line-height: 1.4;
}

.wg-modal-close { 
  position: absolute; 
  right: 12px; 
  top: 8px; 
  background: transparent; 
  border: 0; 
  font-size: 28px; 
  cursor: pointer; 
}

/* ===================== Mobile Improvements Only ===================== */
@media (max-width: 800px) {
  .wg-modal {
    align-items: flex-start;   /* يبدأ من الأعلى لتسهيل التمرير */
    padding: 20px 10px;       /* مسافة من حواف الشاشة */
  }
  .wg-modal-body { 
    flex-direction: column;  /* ترتيب عمودي فقط على الموبايل */
    gap: 15px;
    padding: 15px;
  }
  #wg-modal-img { 
    width: 100%; 
    max-height: 60vh;  /* تحجيم مناسب للشاشة الصغيرة */
  }
  .wg-modal-info { 
    width: 100%; 
    font-size: 16px; 
    padding: 10px; 
  }
  .wg-modal-content { 
    margin: 10px; 
    border-radius: 8px; 
    max-height: 90vh;   /* الحد الأقصى للارتفاع حتى يظهر التمرير */
  } 
}