/* ============================================================
   JAZEER — أنماط تعدد اللغات
   يُحمَّل بعد refined.css.
   ============================================================ */

/* ---------- الخط ----------
   Readex Pro يغطي العربية واللاتينية الموسّعة معاً، فيخدم
   التركية (ğ ı ş) والكردية الكرمانجية (ê î û ş ç) بلا فجوات. */

body,
[data-theme] body,
[data-theme="signature"],
[data-theme="signature"] body {
  font-family: 'Readex Pro', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

[dir="ltr"] body {
  letter-spacing: -.005em;
}

/* ---------- الأسهم الاتجاهية ----------
   السهم ← يعني «التالي» في العربية و«السابق» باللاتينية.
   نقلبه بالانعكاس بدل تكرار النص في كل لغة. */

.dir-arrow,
.dir-arrow-r,
.product-card .arrow,
.shop-now span {
  display: inline-block;
  transition: transform .25s;
}

[dir="ltr"] .dir-arrow,
[dir="ltr"] .dir-arrow-r,
[dir="ltr"] .product-card .arrow,
[dir="ltr"] .shop-now span {
  transform: scaleX(-1);
}

[dir="ltr"] .product-card:hover .arrow {
  transform: scaleX(-1) translateX(3px);
}

/* ---------- مبدّل اللغة ---------- */

.lang-switch {
  position: relative;
  flex-shrink: 0;
}

.lang-switch > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: .2s;
}

.lang-switch > button:hover {
  background: color-mix(in srgb, #fff 20%, transparent);
  border-color: color-mix(in srgb, #fff 40%, transparent);
}

.lang-switch > button i {
  font-style: normal;
  font-size: 11px;
  opacity: .8;
  transition: transform .25s;
}

.lang-switch.open > button i {
  transform: rotate(180deg);
}

.lang-switch ul {
  position: absolute;
  inset-block-start: calc(100% + 9px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 168px;
  margin: 0;
  padding: 7px;
  list-style: none;
  background: var(--white, #fff);
  border: 1px solid var(--line, #dfe4e7);
  border-radius: 14px;
  box-shadow: 0 20px 45px color-mix(in srgb, var(--ink, #102235) 22%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .2s, transform .2s, visibility .2s;
}

.lang-switch.open ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switch li a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  color: var(--ink, #102235);
  font-size: 14.5px;
  text-decoration: none;
  transition: .15s;
}

.lang-switch li a:hover {
  background: color-mix(in srgb, var(--orange, #f26b21) 12%, transparent);
}

.lang-switch li.active a {
  font-weight: 600;
  color: var(--orange, #f26b21);
  background: color-mix(in srgb, var(--orange, #f26b21) 9%, transparent);
}

/* كل لغة تُعرض بخطها الصحيح داخل القائمة */
.lang-switch li a[lang="ar"] { font-family: 'Readex Pro', 'Tajawal', sans-serif; }

@media (max-width: 980px) {
  /* بدل إخفاء الاسم، نعرض رمز اللغة: AR / EN / TR */
  .lang-switch > button span { display: none; }
  .lang-switch > button { padding: 9px 13px; }
  .lang-switch > button::before {
    content: attr(data-code);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
  }
  .lang-switch > button i { font-size: 11px; }
}

/* داخل قائمة الموبايل يظهر المبدّل كقائمة مسطّحة */
.mobile-menu .lang-switch {
  margin-block-start: 14px;
  padding-block-start: 14px;
  border-block-start: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* ---------- تصحيحات اتجاه ---------- */

[dir="ltr"] .site-header .search { margin-inline: auto; }

[dir="ltr"] .swipe-hint i,
[dir="rtl"] .swipe-hint i { display: inline-block; }

/* الأرقام تبقى LTR دائماً حتى داخل نص عربي */
.price, .detail-price, .countdown div, .views-badge,
.product-meta, [data-curated-count], #resultCount {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .price,
[dir="rtl"] .detail-price {
  text-align: start;
}