/* ==========================================================================
   product-gallery.css — معرض صور المنتج (Product gallery)
   شركة السرعة المطلقة | القيم مطابقة لفيجما (node 419-39099) — RTL.
   إطار أبيض بحدّ 1px + ظل مزدوج + زاوية 16px، وخلفه حلقتان زخرفيتان وتدرّج
   قطري. العدّاد "1/3" أعلى يسار، والمصغّرات + الأسهم فوق الصورة أسفل الإطار
   والمصغّرات في المنتصف. التفاعل (تبديل + أسهم + عدّاد) في gallery.js.
   WC-NOTE: single-product/product-image.php (معرض WC / flexslider)
   ========================================================================== */

.gallery {
  display: block;
}

/* الإطار الرئيسي — أبيض، حدّ 1px، زاوية 16px، ظل مزدوج (فيجما) */
.gallery__main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: var(--space-32);
  /* حجز مساحة أسفل الصورة لشريط المصغّرات المتراكب (73px + هوامش) */
  padding-block-end: calc(var(--space-32) + 73px + var(--space-16));
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-gallery);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .gallery__main {
    min-height: 520px;
  }
}

/* حلقتان زخرفيتان + تدرّج قطري متمركزة خلف الصورة (فيجما) */
.gallery__main::before,
.gallery__main::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.gallery__main::before {
  /* الحلقة الخارجية + التدرّج القطري الخفيف */
  width: 90%;
  aspect-ratio: 1;
  border: var(--border-width) solid color-mix(in srgb, var(--color-gradient-end) 6%, transparent);
  background: radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--color-gradient-end) 4%, transparent) 0%,
      transparent 62%);
}
.gallery__main::after {
  /* الحلقة الداخلية المنقّطة */
  width: 65%;
  aspect-ratio: 1;
  border: var(--border-width) dashed color-mix(in srgb, var(--color-gradient-end) 9%, transparent);
}

/* الصورة الرئيسية فوق الحلقات */
.gallery__main img {
  position: relative;
  z-index: 1;
  max-width: 80%;
  height: auto;
  margin-inline: auto;
}

/* عدّاد الصور "1/3" — أعلى يسار (end في RTL)؛ زاوية 4px + ظل + خلفية بيضاء 95% */
.gallery__counter {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--space-16);
  inset-inline-end: var(--space-16); /* end = يسار في RTL */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding-block: var(--space-4);
  padding-inline: var(--space-8);
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 4px; /* فيجما: 4px وليس pill */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  font-size: var(--fs-xs); /* 14px */
  color: var(--color-text-muted);
}

/* شريط المصغّرات + الأسهم — متراكب فوق الصورة أسفل الإطار، المصغّرات في المنتصف */
.gallery__thumbs-wrap {
  position: absolute;
  z-index: 3;
  inset-block-end: var(--space-16);
  inset-inline: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: space-between; /* الأسهم عند الطرفين، المصغّرات في المنتصف */
  gap: var(--space-8);
}
.gallery__thumbs {
  display: flex;
  gap: var(--space-8);
  justify-content: center;
  overflow-x: auto;
}
.gallery__thumb {
  flex-shrink: 0;
  width: 73px; /* فيجما */
  height: 73px;
  object-fit: cover;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.gallery__thumb.is-active {
  border-color: var(--color-primary);
  border-width: var(--border-width-active);
}

/* أزرار التنقّل — 36×36، زاوية 10px، خلفية بيضاء 90% (فيجما) */
.gallery__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.9);
  border: var(--border-width) solid var(--color-border);
  border-radius: 10px; /* فيجما */
  color: var(--color-text);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.gallery__nav:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}