/* =========================================================
 * Category Grid / Carousel
 *
 * نوع العرض لكل جهاز (شبكة / كاروسيل) بيتحدد بمتغيّرات CSS
 * بيضبطها Elementor من إعدادات الويدجت:
 *   --cgc-layout          نوع العرض (للـ JS)
 *   --cgc-wrap-display    grid | flex
 *   --cgc-arrows-display  none | flex
 *   --cgc-dots-display    none | block
 *   --cgc-cols            عدد الأعمدة / العناصر الظاهرة
 *   --cgc-gap             المسافة بين العناصر
 * ========================================================= */

/* ---------- الحاوية ---------- */
.cgc-widget {
  direction: rtl;
  width: 100%;
  box-sizing: border-box;

  /* القيم الافتراضية = شبكة (Elementor بيغيّرها لكل جهاز) */
  --cgc-layout: grid;
  --cgc-wrap-display: grid;
  --cgc-arrows-display: none;
  --cgc-dots-display: none;
  --cgc-cols: 5;
  --cgc-gap: 20px;
}

.cgc-widget *,
.cgc-widget *::before,
.cgc-widget *::after {
  box-sizing: border-box;
}

.cgc-carousel {
  position: relative;
}

.cgc-widget .swiper {
  width: 100%;
  overflow: hidden;
}

/* ---------- الحاوية الداخلية: شبكة أو كاروسيل حسب الجهاز ---------- */
.cgc-widget .swiper-wrapper {
  display: var(--cgc-wrap-display);
  grid-template-columns: repeat(var(--cgc-cols), minmax(0, 1fr));
  align-items: stretch;
}

.cgc-widget .swiper-slide {
  height: auto;
}

/* قبل تشغيل Swiper (وضع الشبكة، أو الكاروسيل لحظة التحميل):
   المسافات بـ gap وعرض الشريحة محسوب من عدد الأعمدة.
   بعد تشغيل Swiper (class: cgc-swiper-ready) هو اللي بيتحكم. */
.cgc-widget:not(.cgc-swiper-ready) .swiper-wrapper {
  gap: var(--cgc-gap);
}

.cgc-widget:not(.cgc-swiper-ready) .swiper-slide {
  flex: 0 0
    calc((100% - var(--cgc-gap) * (var(--cgc-cols) - 1)) / var(--cgc-cols));
  min-width: 0;
}

/* ---------- عنصر واحد ---------- */
.cgc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.cgc-item-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.cgc-shape-circle .cgc-item-image {
  border-radius: 50%;
}

.cgc-shape-square .cgc-item-image {
  border-radius: 8px;
}

.cgc-item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cgc-item-icon {
  font-size: 2.5em;
  line-height: 1;
}

.cgc-item-image svg.cgc-item-icon {
  width: 1em;
  height: 1em;
}

.cgc-item-title {
  display: block;
  font-weight: 600;
}

.cgc-item-subtitle {
  display: block;
  opacity: 0.75;
  font-size: 0.85em;
}

/* ---------- أسهم الكاروسيل ---------- */
.cgc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: var(--cgc-arrows-display);
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #333333;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    opacity 0.3s ease;
}

.cgc-arrow i {
  line-height: 1;
}

.cgc-arrow svg,
.cgc-arrow img {
  display: block;
  max-width: 70%;
  max-height: 70%;
}

.cgc-arrow svg {
  fill: currentColor;
}

.cgc-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* RTL: السابق يمين، التالي يسار */
.cgc-arrow-prev {
  right: -10px;
}

.cgc-arrow-next {
  left: -10px;
}

/* ---------- نقاط الكاروسيل ---------- */
.cgc-carousel .swiper-pagination {
  position: relative;
  display: var(--cgc-dots-display);
  margin-top: 16px;
  text-align: center;
}

.cgc-carousel .swiper-pagination-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  background: #8a8a8a;
  opacity: 0.5;
  cursor: pointer;
}

.cgc-carousel .swiper-pagination-bullet-active {
  background: #2aa35b;
  opacity: 1;
}