/* 
  Rvenor Website - Main CSS
  Colors: Dark Red, Red, Metallic Silver, Almost Black
  Design: Premium, Glassmorphism, Smooth Animations
*/

:root {
  /* Colors */
  --bg-color: #0a0a0c;
  --bg-color-secondary: #121214;
  --bg-color-tertiary: #1a1a1d;
  
  --primary-red: #7a0000;
  --primary-red-hover: #990000;
  --secondary-red: #ff1a1a;
  
  --silver: #c0c0c0;
  --silver-light: #e0e0e0;
  --silver-dark: #8a8a8a;
  
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  
  /* Glassmorphism */
  --glass-bg: rgba(18, 18, 20, 0.6);
  --glass-border: rgba(192, 192, 192, 0.1);
  --glass-red-border: rgba(122, 0, 0, 0.3);
  
  /* Shadows */
  --shadow-red: 0 0 20px rgba(122, 0, 0, 0.4);
  --shadow-silver: 0 0 15px rgba(192, 192, 192, 0.1);
  --shadow-black: 0 10px 30px rgba(0, 0, 0, 0.8);
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* لون داكن مبكّر على html حتى يكون أول إطار للمتصفح داكناً بلا وميض أبيض (FOUC)
     قبل تحميل الخلفية/الـCSS الكامل — body يبقى شفافاً فلا يتأثر باقي التصميم */
  background-color: #0a0a0c;
  /* clip يقصّ التجاوز الأفقي بلا إنشاء حاوية تمرير (بعكس hidden الذي يحوّل overflow-y إلى auto
     فيجعل body مُمرِّراً مستقلاً ويكسر window.scrollY وحركات السكرول) */
  overflow-x: clip;
}

body {
  font-family: 'Inter', 'Tajawal', sans-serif;
  background-color: transparent;
  color: var(--text-primary);
  line-height: 1.6;
  /* clip (لا hidden) حتى يبقى body غير مُمرِّر ويظل تمرير النافذة/الهيدر يعمل */
  overflow-x: clip;
  /* حاوٍ للعناصر الزخرفية المطلقة (bg-glow) حتى تُقصّ ولا تُحدث تمريرًا أفقيًا على الجوال */
  position: relative;
  /* Premium smooth scrolling */
  scroll-behavior: smooth;
  /* عمود مرن بارتفاع الشاشة كي يُدفع الفوتر لأسفل الصفحة دائمًا */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* الفوتر يلتصق بأسفل الصفحة حتى لو كان المحتوى قصيرًا */
footer.site-footer-sticky {
  margin-top: auto;
}

/* ===== شاشة التحميل (Splash) — تظهر مرة لكل جلسة عند فتح الموقع ===== */
html.rv-splash-lock { overflow: hidden; }

#rv-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(122, 0, 0, 0.22) 0%, transparent 55%),
    #08080a;
  opacity: 1;
  transition: opacity .5s ease, visibility .5s ease;
}
#rv-splash.rv-splash--hide { opacity: 0; visibility: hidden; }

.rv-splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: min(320px, 72vw);
  text-align: center;
}

.rv-splash__logo img {
  width: 128px;
  max-width: 46vw;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  animation: rvSplashPulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 22px rgba(255, 26, 26, 0.35));
}

@keyframes rvSplashPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 18px rgba(255, 26, 26, 0.28)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 32px rgba(255, 26, 26, 0.5)); }
}

/* شريط التقدّم */
.rv-splash__bar {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.rv-splash__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7a0000, #ff1a1a);
  box-shadow: 0 0 12px rgba(255, 26, 26, 0.55);
  transition: width .28s ease;
}
/* لمعة تجري فوق الشريط */
.rv-splash__fill::after {
  content: "";
  position: absolute;
  top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: rvSplashSheen 1.1s linear infinite;
}
@keyframes rvSplashSheen {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}

.rv-splash__pct {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .rv-splash__logo img { animation: none; }
  .rv-splash__fill::after { animation: none; }
}

/* ===== خط أحمر متحرّك تحت العناوين (rv-underline) ===== */
.rv-underline::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ff1a1a, #ff6b6b, #ff1a1a, transparent);
  background-size: 200% 100%;
  animation: rvUnderlineFlow 2.6s linear infinite;
  box-shadow: 0 0 10px rgba(255, 26, 26, 0.55);
}
@keyframes rvUnderlineFlow {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
/* نسخة أصغر لعناوين الفوتر */
.footer-glass .rv-underline::after { width: 44px; height: 2px; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .rv-underline::after { animation: none; }
}

/* ===== الفوتر المصغّر لصفحات الحساب — يطابق عمود الفوتر الأصلي ===== */
.mini-footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding: 28px 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

/* خلفية زجاجية مموّهة مثل الهيدر */
.footer-glass {
  background: rgba(10, 10, 12, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ظهور ديناميكي متدرّج للأعمدة */
@keyframes footerRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.footer-col { animation: footerRise .6s ease both; }
.footer-col:nth-child(1) { animation-delay: .05s; }
.footer-col:nth-child(2) { animation-delay: .12s; }
.footer-col:nth-child(3) { animation-delay: .19s; }
.footer-col:nth-child(4) { animation-delay: .26s; }
.footer-col:nth-child(5) { animation-delay: .33s; }
@media (prefers-reduced-motion: reduce) {
  .footer-col { animation: none; }
}

/* أيقونات التواصل الاجتماعي في الفوتر */
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  /* أحمر خفيف من لوحة الموقع نفسها (#ff5c5c — اللون المستعمل في .legal-icon)
     بدل الرمادي. الخلفية والحدّ يتلوّنان معه بخفوت كي تبقى الأيقونات هادئة
     لا صارخة. تباين اللون على خلفية الفوتر = 6.04 (المطلوب لعناصر الواجهة 3). */
  color: #ff5c5c;
  background: rgba(122, 0, 0, 0.16);
  border: 1px solid rgba(255, 92, 92, 0.22);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social svg {
  width: 18px;
  height: 18px;
}
.footer-social:hover {
  color: #fff;
  background: rgba(122, 0, 0, 0.55);
  border-color: rgba(255, 26, 26, 0.55);
  box-shadow: 0 0 16px rgba(255, 26, 26, 0.25);
  transform: translateY(-2px);
}

/* Background System */
.main-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}

/* نسختان متطابقتان تتناوبان: نهاية المقطع تُذوَّب في بدايته بدل قفزة الإعادة (main.js) */
.main-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* المقطع كان يبدو باهتًا — رفع تباين وتشبّع خفيف يعيد له الوضوح بلا تغيير لونه */
  filter: contrast(1.14) saturate(1.18) brightness(1.05);
  opacity: 1;
  transition: opacity 1.2s linear;
  will-change: opacity;
}
.main-bg-video.is-out { opacity: 0; }

/* بديل ثابت حين نمنع تحميل الفيديو (شاشة صغيرة أو وضع توفير البيانات) */
.main-bg-container.is-static {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(122, 0, 0, 0.40) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(122, 0, 0, 0.28) 0%, transparent 55%),
    linear-gradient(160deg, #131316 0%, #0a0a0c 62%, #050506 100%);
}

/* Dark Overlay for Text Readability */
.main-bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -9;
  /* خُفِّف المركز ليظهر الفيديو بوضوح، وبقيت الحواف داكنة لأجل قراءة النصوص */
  background: radial-gradient(circle at center, rgba(10, 10, 12, 0.26) 0%, rgba(10, 10, 12, 0.62) 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .main-bg-video { transition: none; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-color-tertiary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-red);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
}

.text-gradient {
  background: linear-gradient(135deg, var(--silver-light), var(--silver-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-red {
  background: linear-gradient(135deg, var(--secondary-red), var(--primary-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Dark-green title treatment (Xbox hero) */
.text-gradient-green {
  background: linear-gradient(135deg, #35b23c, #0c5e12);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Dark-blue title treatment (PlayStation hero) */
.text-gradient-blue {
  background: linear-gradient(135deg, #2f86e0, #0a3a72);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Shop cards: elegant, slightly-wider dark colored edges (Optimizer=red, PlayStation=blue, Xbox=green) */
/* All shop card sections: uniform pale white -> slightly silver border */
.product-card.product-card--edge-red,
.product-card.product-card--edge-blue,
.product-card.product-card--edge-green,
.product-card.product-card--edge-skyblue,
.product-card.product-card--edge-purple,
.product-card.product-card--edge-yellow,
.product-card.product-card--edge-silver {
  border-width: 1.5px;
  border-color: rgba(228,230,236,0.55);
  box-shadow: 0 0 16px rgba(222,224,232,0.15);
}
.product-card.product-card--edge-red:hover,
.product-card.product-card--edge-blue:hover,
.product-card.product-card--edge-green:hover,
.product-card.product-card--edge-skyblue:hover,
.product-card.product-card--edge-purple:hover,
.product-card.product-card--edge-yellow:hover,
.product-card.product-card--edge-silver:hover {
  border-color: rgba(244,245,250,0.85);
  box-shadow: 0 0 24px rgba(236,238,245,0.28);
}

/* Glassmorphism Elements */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-black);
}

.glass-panel:hover {
  border-color: var(--glass-red-border);
  box-shadow: var(--shadow-red);
  transform: translateY(-5px);
  transition: all var(--transition-normal);
}

/* Download gate modal — shown to guests who try to download the Optimizer */
.dl-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6,6,8,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.dl-gate.is-open { opacity: 1; visibility: visible; }
.dl-gate__card {
  position: relative; width: 100%; max-width: 420px;
  background: linear-gradient(180deg, rgba(30,18,20,0.98), rgba(15,15,19,0.98));
  border: 1px solid rgba(255,26,26,0.35); border-radius: 18px;
  padding: 36px 28px 28px; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.62), 0 0 30px rgba(255,26,26,0.12);
  transform: translateY(14px) scale(0.97);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.dl-gate.is-open .dl-gate__card { transform: translateY(0) scale(1); }
.dl-gate__close {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 34px; height: 34px; border-radius: 9999px; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: #c9cace; cursor: pointer; transition: all .2s ease;
}
.dl-gate__close:hover { background: rgba(255,26,26,0.2); border-color: rgba(255,26,26,0.55); color: #fff; transform: rotate(90deg); }
.dl-gate__icon {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,26,26,0.14); border: 1px solid rgba(255,26,26,0.4); color: var(--secondary-red);
  box-shadow: 0 0 20px rgba(255,26,26,0.18) inset;
}
.dl-gate__icon svg { width: 30px; height: 30px; }
.dl-gate__title { font-size: 1.32rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
.dl-gate__msg { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); margin: 0 auto 24px; max-width: 340px; }
.dl-gate__actions { display: flex; gap: 12px; }
.dl-gate__actions .btn { flex: 1; padding: 12px 14px; }

/* Frosted glass panel behind the hero & bottom CTA (same look as the section cards) */
.opt-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-black);
}

/* Limited-offer countdown pill (Optimizer plans) */
.opt-countdown {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
  padding: 6px 12px; border-radius: 9999px;
  background: rgba(255,26,26,0.16); border: 1px solid rgba(255,26,26,0.5);
  color: #fff; font-size: 0.74rem; font-weight: 700;
  box-shadow: 0 0 12px rgba(255,26,26,0.28);
}
.opt-countdown__label { display: none; }
.opt-countdown svg { width: 15px; height: 15px; color: #ff5a5a; }
.opt-countdown__time { color: #fff; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* Optimizer plan cards — a professional red accent line BELOW each card (outside it) */
.opt-plan { position: relative; }
.opt-plan::after {
  content: "";
  position: absolute; left: 12%; right: 12%; top: calc(100% + 16px);
  height: 3px; border-radius: 9999px;
  background: linear-gradient(90deg, transparent, var(--secondary-red), transparent);
  box-shadow: 0 0 10px rgba(255,26,26,0.45);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  outline: none;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-red-hover));
  color: #fff;
  box-shadow: var(--shadow-red);
  border: 1px solid rgba(255, 26, 26, 0.2);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-red-hover), var(--secondary-red));
  box-shadow: 0 0 30px rgba(255, 26, 26, 0.6);
  transform: translateY(-2px);
}

.btn-silver {
  background: transparent;
  color: var(--silver-light);
  border: 1px solid var(--silver-dark);
}

.btn-silver:hover {
  background: rgba(192, 192, 192, 0.1);
  color: #fff;
  border-color: var(--silver-light);
  box-shadow: var(--shadow-silver);
  transform: translateY(-2px);
}

/* ===== بطاقة منتج المتجر =====
   بديل التصميم القديم (نص رمادي عملاق مكان الصورة، بلا سعر ولا زر).
   --card-accent = ثلاثي RGB يُضبط لكل بطاقة inline (يحترم ألوان التصنيفات الحالية). */
.product-card {
  --card-accent: 122, 0, 0;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 2px solid rgba(180, 182, 190, 0.45); /* Silver-gray frame */
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(160, 162, 170, 0.15); /* Subtle neutral glow */
  transition: transform var(--transition-normal), border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(224, 224, 228, 0.75); /* Brighter silver on hover */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(200, 202, 210, 0.25); /* Stronger silver glow on hover */
}

/* منطقة الوسائط: توهّج ملوّن + شبكة تقنية خفيفة + أيقونة */
.product-card__media {
  position: relative;
  height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(var(--card-accent), 0.38) 0%,
                    rgba(var(--card-accent), 0.10) 45%, transparent 75%),
    var(--bg-color-tertiary);
  border-bottom: 1px solid var(--glass-border);
  overflow: hidden;
}
.product-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
  pointer-events: none;
}
.product-card__icon {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  color: rgb(var(--card-accent));
  filter: drop-shadow(0 0 14px rgba(var(--card-accent), 0.6));
  transition: transform var(--transition-normal);
}
.product-card:hover .product-card__icon {
  transform: scale(1.12) translateY(-2px);
}

/* بطاقة بصورة حقيقية بدل الأيقونة: الصورة تملأ منطقة الوسائط */
.product-card__media--image {
  background: var(--bg-color-tertiary);
}
/* تكبير محتوى الصورة قليلاً عرضاً وارتفاعاً داخل منطقة الوسائط */
.product-card__media img {
  transform: scale(1);
  transform-origin: var(--rvz-x, 50%) var(--rvz-y, 50%);
  transition: transform var(--rvz-dur, 520ms) var(--rvz-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              filter var(--transition-normal);
}
.product-card__media--image::after {
  display: none; /* أخفِ الشبكة التقنية فوق الصورة */
}
.product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--rvz-x, 50%) var(--rvz-y, 50%);
  transition: transform var(--rvz-dur, 520ms) var(--rvz-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              filter var(--transition-normal);
}
/* تدرّج سفلي خفيف لدمج الصورة مع جسم البطاقة */
.product-card__media--image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.55) 0%, transparent 45%);
  pointer-events: none;
}

/* شارة التصنيف */
.product-card__badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 9999px;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(var(--card-accent), 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.product-card__title {
  position: relative;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  padding-bottom: 10px;
  /* Shiny silver, near-white */
  background: linear-gradient(135deg, #ffffff 0%, #eef0f4 40%, #c4c6ce 70%, #eef0f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f2f3f7; /* Fallback if clip unsupported */
  text-shadow: 0 1px 8px rgba(200, 202, 210, 0.22);
}
/* شريط أحمر متدرّج أسفل الاسم يتناسق مع هوية الموقع، يتوسّع عند التمرير */
.product-card__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 34px;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, var(--secondary-red), transparent);
  box-shadow: 0 0 8px rgba(255, 26, 26, 0.5);
  transition: width var(--transition-normal);
}
.product-card:hover .product-card__title::after {
  width: 64px;
}
.product-card__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  max-width: 30ch;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.product-card__price span {
  font-size: 0.68rem;
  color: var(--silver-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-card__price strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--secondary-red);
  white-space: nowrap;
  transition: gap var(--transition-fast);
}
.product-card:hover .product-card__cta {
  gap: 11px;
}
.product-card__cta svg {
  width: 14px;
  height: 14px;
}
/* السهم يعكس اتجاهه في RTL */
[dir="rtl"] .product-card__cta svg {
  transform: scaleX(-1);
}

/* البطاقة المميّزة (Optimizer) — تبقى بإطار رصاصي مثل الباقي */
.product-card--featured {
  border-color: rgba(180, 182, 190, 0.45);
}

/* ===== زر التنقّل الزجاجي (Glassmorphism) =====
   يستخدم متغيّرات الهوية نفسها كي يتناسق مع .glass-panel وحبّة أزرار الحساب في الهيدر. */
.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.5rem;
  border-radius: 9999px;
  color: var(--text-secondary);
  font-weight: 600;
  background: var(--glass-bg);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* لمعة زجاجية خفيفة في الأعلى */
.nav-pill::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07), transparent);
  pointer-events: none;
}

.nav-pill:hover {
  color: var(--text-primary);
  border-color: var(--glass-red-border);
  box-shadow: var(--shadow-red), 0 4px 16px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

/* الصفحة النشطة */
.nav-pill.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(122, 0, 0, 0.38), rgba(122, 0, 0, 0.18));
  border-color: rgba(255, 26, 26, 0.35);
  box-shadow: var(--shadow-red);
}

/* أولوية أعلى من قاعدة .nav-links a القديمة (وإلا تتجاهل الوزن/التسطير) */
.nav-links a.nav-pill {
  font-weight: 600;
}
/* ألغِ خط التسطير القديم (.nav-links a::after) داخل الزر الزجاجي */
.nav-links a.nav-pill::after {
  display: none;
}

/* ===== درج سايدبار صفحات الحساب (جوال) =====
   على الجوال كان السايدبار hidden md:flex → لا تنقّل ولا تسجيل خروج إطلاقًا.
   الآن يصبح درجًا منزلقًا، ويبقى ثابتًا على سطح المكتب. */
#accountBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  z-index: 39;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
#accountBackdrop.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767px) {
  #accountSidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  /* في RTL يبدأ الدرج من اليمين فينزلق بالاتجاه المعاكس */
  [dir="rtl"] #accountSidebar {
    transform: translateX(100%);
  }
  #accountSidebar.open,
  [dir="rtl"] #accountSidebar.open {
    transform: translateX(0);
  }
}

@media (min-width: 768px) {
  #accountBackdrop { display: none; }
}

@media (max-width: 639px) {
  /* على الجوال نُظهر عَلَم اللغة فقط (بلا نص EN/AR) في مبدّل الهيدر لتوفير عرض
     للشعار الأكبر — النص يبقى ظاهراً على sm فأكثر. مُوجّه بالبنية لا بالأصناف
     ليصمد أمام إعادة بناء العنصر ديناميكيًا في main.js */
  .header #langSwitcherBtn #currentLangText > span { display: none; }
  /* عَلَم اللغة بحجم صريح ثابت (لا نعتمد على w-5 من تايلوند لأنه لا يُطبَّق بثبات على
     العناصر المحقونة بالـJS فينهار العَلَم إلى ~1px) — مقاس متناسق مع باقي الأيقونات */
  .header #langSwitcherBtn #currentLangText img { width: 22px !important; height: auto !important; flex-shrink: 0; }
  /* الشعار + زر القائمة يلتصقان بأقصى اليسار بمسافة صغيرة جدًا (بدل 5%)، ومجموعة
     الأزرار اليمنى تقترب من الحافة. !important ليتجاوز قاعدة .header اللاحقة في الملف */
  .header, .header.scrolled { padding-left: 10px !important; padding-right: 10px !important; }
}

/* تخطيط صفحات الحساب: عمود المحتوى عنصر flex، وبقيمة min-width الافتراضية (auto)
   لا يستطيع الانكماش تحت عرض محتواه (كالجداول العريضة) فيتمدّد خارج الشاشة على
   الجوال. min-width:0 يسمح له بالانكماش لعرض الشاشة، والجدول العريض يمرَّر داخل
   حاويته .overflow-x-auto بدل أن يدفع الصفحة كلها */
main.flex-1 { min-width: 0; }

/* Header / Nav */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-height: 100;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  transition: all var(--transition-normal);
}

.header.scrolled {
  background: rgba(10, 10, 12, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 15px 5%;
  /* بلا حدّ سفلي أبيض — كان يُظهر خطًا بارزًا مزعجًا عند السكرول؛ التمويه والظل يكفيان للفصل */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.logo {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 1px;
}

.logo span {
  color: var(--secondary-red);
}

/* شعار الهيدر: حجم صريح مستقل عن توقيت Tailwind JIT (يمنع تضخّمه على الصفحات الثقيلة كالمتجر حين يتأخّر مسح CDN للهيدر المحقون). يطابق h-[26px] sm:h-10. */
.logo img {
  height: 26px;
  width: auto;
  max-width: none;
}
@media (min-width: 640px) {
  .logo img { height: 40px; }
}


/* ══ بطاقة قسم مرقَّمة — مكوَّن مشترك (legal.html و company.html) ══════
   ترويسة علوية: [أيقونة مثبَّتة يسارًا] [رقم مفرَّغ] [عنوان في المنتصف]،
   والنصّ تحتها بعرض البطاقة. نُقلت من <style> داخل الصفحتين إلى هنا يوم
   2026-08-03 حين احتاجتها صفحة «من نحن» أيضًا — نسخة واحدة لا نسختان.
   الترتيب: [أيقونة] [رقم ضخم مفرَّغ] [عنوان] في شريط واحد أعلى البطاقة،
   والنصّ تحته بعرض البطاقة كاملًا. لا تغيير في الترميز — المحتوى كما هو.
   الهوية: زجاج داكن، خيط أحمر رفيع على الحافّة العليا، ورقم مفرَّغ بحدّ
   أحمر بدل تعبئته. */
.legal-doc {
  position: relative; overflow: hidden; scroll-margin-top: 110px;
  padding: 0; border-radius: 18px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.legal-doc + .legal-doc { margin-top: 20px; }

/* خيط أحمر على الحافّة العليا يشتدّ عند المرور */
.legal-doc::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--secondary-red), transparent);
  opacity: 0.5; transition: opacity .3s ease;
}
.legal-doc:hover::before { opacity: 1; }
.legal-doc:hover { border-color: rgba(255, 26, 26, 0.28); }

/* الشريط العلوي: الأيقونة مثبَّتة يسارًا خارج التدفّق، والرقم والعنوان
   يتوسّطان **البطاقة** لا المساحة المتبقّية — لذلك الحشوة متساوية على
   الجانبين بعرض الأيقونة، والأيقونة موضوعة داخلها بالتموضع المطلق. */
.legal-doc__head {
  position: relative;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 16px; margin: 0; padding: 22px 96px;
  background: linear-gradient(120deg, rgba(122, 0, 0, 0.24), rgba(255, 255, 255, 0.015));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 84px;
}

/* الرقم والعنوان جنبًا إلى جنب في منتصف الشريط */
.legal-doc__meta {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  text-align: start; min-width: 0;
}
.legal-doc__num {
  flex: none;
  font-size: 40px; font-weight: 800; line-height: 0.9; letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 26, 26, 0.5);
  text-stroke: 1.5px rgba(255, 26, 26, 0.5);
}
.legal-icon {
  position: absolute; inset-inline-start: 26px; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 15px;
  display: grid; place-items: center; color: #ff5c5c;
  background: linear-gradient(145deg, rgba(122, 0, 0, 0.45), rgba(20, 20, 24, 0.5));
  border: 1px solid rgba(255, 26, 26, 0.22);
  box-shadow: 0 6px 18px rgba(122, 0, 0, 0.3);
}
.legal-icon svg { width: 28px; height: 28px; }
.legal-doc__title {
  font-size: 20px; font-weight: 800; color: #fff; line-height: 1.3; margin-top: 0;
  min-width: 0;
}
.legal-doc__title::after {
  content: ""; display: block; width: 30px; height: 2px; margin-top: 8px; margin-inline: auto;
  border-radius: 2px; background: var(--secondary-red); opacity: 0.85;
}

/* شاشات ضيّقة: تصغير متناسب مع بقاء الأيقونة يسارًا والنصّ في المنتصف */
@media (max-width: 560px) {
  .legal-doc__head { gap: 10px; padding: 18px 68px; min-height: 74px; }
  .legal-doc__meta { gap: 10px; }
  .legal-doc__num { font-size: 30px; }
  .legal-doc__title { font-size: 16px; }
  .legal-icon { inset-inline-start: 16px; width: 44px; height: 44px; border-radius: 12px; }
  .legal-icon svg { width: 22px; height: 22px; }
}

/* النصّ */
.legal-doc__body { padding: 24px; }
@media (min-width: 768px) { .legal-doc__body { padding: 30px 32px 34px; } }
.legal-doc__body p { color: var(--text-secondary); line-height: 1.9; font-size: 15px; }

/* عمود صغير داخل الترويسة حين يسبق العنوانَ سطرٌ تمهيدي (about-eyebrow) */
.legal-doc__tt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.legal-doc__tt .about-eyebrow { margin: 0; }


.nav-links {
  display: flex;
  list-style: none;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
  position: relative;
  white-space: nowrap; /* Prevent text from wrapping to a new line */
}

.nav-links a:hover {
  color: var(--text-primary);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--secondary-red);
  transition: width var(--transition-normal);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Background Effects */
.bg-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(122, 0, 0, 0.15) 0%, rgba(10, 10, 12, 0) 70%);
  border-radius: 50%;
  z-index: -5;
  pointer-events: none;
}

.bg-glow.top-right {
  top: -200px;
  right: -200px;
}

.bg-glow.bottom-left {
  bottom: 0;
  left: -200px;
}

/* Custom Overlays (To replace alerts) */
.custom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 12, 0.9);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.custom-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.overlay-content {
  background: var(--bg-color-secondary);
  border: 1px solid var(--glass-red-border);
  padding: 40px;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-red);
  transform: scale(0.9);
  transition: transform var(--transition-normal);
}

.custom-overlay.active .overlay-content {
  transform: scale(1);
}

.overlay-content h3 {
  margin-bottom: 15px;
  color: var(--text-primary);
}

.overlay-content p {
  color: var(--text-secondary);
  margin-bottom: 25px;
}

/* Utilities */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
}

.section-padding {
  padding: 100px 0;
}

.custom-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.custom-dropdown.active .custom-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.lang-option {
    transition: all 0.2s ease;
}

.lang-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.lang-option.active {
    color: var(--light-red);
    background-color: rgba(229, 9, 20, 0.1);
}

/* Mobile Responsive Adjustments */
@media (max-width: 1024px) {
  #mobileNav.active {
    left: 0;
  }
}

@media (max-width: 768px) {
  .hero-animate h1 {
    font-size: 2.5rem;
  }
  
  .hero-animate p {
    font-size: 1.1rem;
  }

  .auth-buttons .btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .auth-buttons #langSwitcherBtn {
    padding: 8px 10px;
  }

  .header {
    padding: 15px 5%;
  }
}

/* ===== لمعة معدنية تمرّ عبر الشعار فقط — بلا توهّج وبلا خلفية وبلا تحريك ===== */
.logo { position: relative; }
.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.6) 42%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.6) 58%, transparent 72%);
  background-size: 260% 100%;
  background-position: 120% 0;
  animation: logoShine 2s ease-in-out infinite;
  /* اللمعة تتبع شكل الشعار لا مستطيله:
     قناع بإضاءة الصورة نفسها (حروف فاتحة = تظهر، خلفية داكنة = تُخفى)،
     و overlay كطبقة أمان في المتصفحات التي لا تدعم mask-mode. */
  mix-blend-mode: screen;
  -webkit-mask-image: url("../images/Main-Logo.jpg");
  mask-image: url("../images/Main-Logo.jpg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}
@keyframes logoShine {
  /* تبدأ وتنتهي مخفيّة خارج الشعار؛ تعبره كاملًا أثناء الحركة فقط (لا تبقى عالقة على الطرف) */
  0%, 8%    { background-position: 120% 0; }   /* مخفية خارج اليسار */
  92%, 100% { background-position: -20% 0; }    /* مخفية خارج اليمين */
}

/* ===== القائمة الرئيسية الموحّدة (زر ثلاث خطوط + درج منزلق) ===== */
.main-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* هدف لمس 44×44 (كان 36×36) */
  padding: 6px; min-width: 44px; min-height: 44px;
  border-radius: 10px;
  color: #fff;
  transition: background .2s ease, color .2s ease;
}
.main-menu-btn:hover { background: rgba(255,255,255,0.08); color: var(--light-red, #ff1a1a); }

.main-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 60;
}
.main-menu-backdrop.open { opacity: 1; visibility: visible; }

.main-menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 300px;
  max-width: 85vw;
  background: rgba(10,10,12,0.98);
  backdrop-filter: blur(11px);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 8px 0 40px rgba(0,0,0,0.5);
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.main-menu-drawer.open { transform: translateX(0); }
/* RTL: ينزلق من اليمين */
[dir="rtl"] .main-menu-drawer {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -8px 0 40px rgba(0,0,0,0.5);
  transform: translateX(100%);
}
[dir="rtl"] .main-menu-drawer.open { transform: translateX(0); }

.main-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.main-menu-close {
  color: #9ca3af;
  /* هدف لمس 44×44 (كان 32×32) */
  padding: 4px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
.main-menu-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

.main-menu-nav { padding: 10px 0; }
.mm-group { border-bottom: 1px solid rgba(255,255,255,0.05); }
.mm-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  list-style: none;
  transition: color .2s ease;
}
.mm-summary::-webkit-details-marker { display: none; }
.mm-summary:hover { color: var(--light-red, #ff1a1a); }
.mm-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.mm-group[open] > .mm-summary .mm-chevron { transform: rotate(180deg); }
.mm-sublist { padding: 2px 0 10px; }
.mm-sublist a {
  display: block;
  padding: 12px 20px 12px 34px;  /* 39px -> 45px: هدف لمس */
  color: #9ca3af;
  font-size: 0.875rem;
  transition: color .2s ease, background .2s ease;
}
[dir="rtl"] .mm-sublist a { padding: 12px 34px 12px 20px; }
.mm-sublist a:hover { color: #fff; background: rgba(122,0,0,0.25); }

/* ===== قسم About Us — تصميم كلاسيكي أنيق ===== */
.about-panel { position: relative; }
.about-head { text-align: center; margin-bottom: 2.5rem; }
.about-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--secondary-red);
  margin-bottom: 0.75rem;
}
.about-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}
.about-divider {
  display: block;
  width: 64px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--secondary-red), var(--primary-red));
}
.about-body { max-width: 46rem; margin: 0 auto; }
.about-body p {
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: 1.25rem;
  font-size: 1.02rem;
}
.about-body p:last-child { margin-bottom: 0; }

/* ===== خانات كود التحقق (verify.html) ===== */
.code-box {
  width: 48px; height: 56px;
  text-align: center;
  font-size: 1.5rem; font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.code-box:focus { border-color: var(--secondary-red); box-shadow: 0 0 0 3px rgba(255,26,26,0.15); }
@media (max-width: 400px) { .code-box { width: 40px; height: 48px; font-size: 1.2rem; } }

/* ---------- Product Filters (reusable) ---------- */
.filters-panel { align-self: flex-start; overflow: hidden; padding: 0; }

/* Horizontal bar variant (above product grid) */
.filters-panel--bar { overflow: visible; padding: 10px 18px 12px; position: relative; z-index: 40; width: fit-content; max-width: 100%; margin-inline: auto; }
.filters-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; }
.filters-bar__brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.92rem; font-weight: 800; color: #fff;
  padding-inline-end: 2px; flex-shrink: 0;
}
.filters-bar__brand svg { width: 16px; height: 16px; color: var(--secondary-red); }
.filters-bar__brand--top {
  justify-content: center;
  padding: 0 0 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.95rem;
}
.filters-bar__groups {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 18px; flex: 0 1 auto; min-width: 0;
}
.filters-panel--bar .filter-group {
  position: relative; padding: 0; border: none;
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.filters-panel--bar .filter-group:not(:last-child)::after {
  content: ''; position: absolute; inset-inline-end: -7px; top: 2px; bottom: 2px;
  width: 1px; background: var(--glass-border);
}
.filters-panel--bar .filter-group__label { margin-bottom: 0; font-size: 0.64rem; letter-spacing: 0.06em; }
.filters-panel--bar .filter-pill { padding: 5px 11px; font-size: 0.78rem; }
.filters-panel--bar .filter-pill span::before { width: 5px; height: 5px; margin-inline-end: 6px; }
.filters-panel--bar .price-range { gap: 6px; }
.filters-panel--bar .price-field { flex: 0 0 72px; min-width: 0; padding: 0 7px; }
.filters-panel--bar .filter-price { padding: 6px 3px; font-size: 0.82rem; }
.filters-panel--bar .filter-select { min-width: 0; width: 150px; padding: 7px 28px 7px 10px; font-size: 0.82rem; }
.filters-bar__end {
  display: flex; align-items: center; gap: 12px;
  margin-inline-start: 0; flex-shrink: 0;
}
.filters-panel--bar .filter-reset { align-self: center; flex-shrink: 0; }

/* Collapsible filter menu — three red lines button, opens the 4 sections on hover */
.filter-menu { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.filter-menu__toggle {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 13px; border-radius: 11px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.filter-menu__toggle:hover { border-color: rgba(255,26,26,0.6); background: rgba(255,26,26,0.06); }
.filter-menu__lines { position: relative; display: block; width: 20px; height: 2.5px; }
.filter-menu__lines,
.filter-menu__lines::before,
.filter-menu__lines::after { border-radius: 2px; background: var(--secondary-red); box-shadow: 0 0 6px rgba(255,26,26,0.55); }
.filter-menu__lines::before,
.filter-menu__lines::after { content: ''; position: absolute; left: 0; width: 20px; height: 2.5px; }
.filter-menu__lines::before { top: -6px; }
.filter-menu__lines::after { top: 6px; }
.filter-menu__caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--silver); transition: transform var(--transition-fast);
}
.filter-menu:hover .filter-menu__caret,
.filter-menu.is-open .filter-menu__caret,
.filter-menu:focus-within .filter-menu__caret { transform: rotate(180deg); }

.filter-menu__panel {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 50;
  min-width: 250px; margin-top: 8px; padding: 6px 16px;
  display: flex; flex-direction: column;
  background: rgba(16,16,19,0.98); border: 1px solid var(--glass-border);
  border-radius: 14px; box-shadow: 0 20px 44px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
/* invisible bridge so the pointer can travel from button to panel without closing */
.filter-menu__panel::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.filter-menu:hover .filter-menu__panel,
.filter-menu.is-open .filter-menu__panel,
.filter-menu:focus-within .filter-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* اللمس بلا تحويم: الفتح بالنقر فقط (is-open) حتى لا تُفتح القائمة عرضًا */
@media (hover: none) {
  .filter-menu:hover .filter-menu__panel,
  .filter-menu:focus-within .filter-menu__panel { opacity: 0; visibility: hidden; transform: translateY(8px); }
  .filter-menu.is-open .filter-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
}
/* groups inside the menu: vertical list separated by lines, no side dividers */
.filter-menu__panel .filter-group { padding: 12px 0; }
.filter-menu__panel .filter-group:not(:last-child) { border-bottom: 1px solid var(--glass-border); }
.filter-menu__panel .filter-group::after { display: none !important; }

/* Pagination — glass pills, red active, matches the store */
.pagination {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-top: 34px;
}
.pagination__btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; color: var(--silver);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 11px; cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.pagination__btn:hover:not(:disabled):not(.is-active) {
  color: #fff; border-color: rgba(255,26,26,0.6); background: rgba(255,26,26,0.08); transform: translateY(-2px);
}
.pagination__btn.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--secondary-red), var(--darkRed, #7a0000));
  box-shadow: 0 6px 18px rgba(255,26,26,0.35); cursor: default;
}
.pagination__btn--nav { font-size: 1.15rem; line-height: 1; }
.pagination__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pagination__ellipsis {
  min-width: 24px; text-align: center; color: var(--text-secondary);
  font-weight: 700; letter-spacing: 1px; user-select: none;
}
@media (max-width: 640px) {
  .pagination__btn { min-width: 36px; height: 36px; padding: 0 9px; font-size: 0.84rem; }
}
/* Laptop/tablet (<1280): filters get their own tidy rows, Sort+Reset on a full-width row */
/* Compact filter bar wraps and stays centered automatically; only tiny mobile tweaks needed */
@media (max-width: 640px) {
  .filters-panel--bar { padding: 14px 16px; }
  .filters-bar__end { margin-top: 4px; }
  .filters-panel--bar .price-field { flex: 0 0 66px; }
  .filter-menu__panel { min-width: 220px; }
}
.filters-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(122,0,0,0.16), rgba(122,0,0,0));
}
.filters-panel__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 1rem; font-weight: 800; letter-spacing: 0.01em; color: #fff;
}
.filters-panel__title svg { width: 17px; height: 17px; color: var(--secondary-red); }
.filter-reset {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--text-secondary);
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent; cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-reset:hover { color: #fff; border-color: rgba(255,26,26,0.55); background: rgba(255,26,26,0.08); }
.filters-panel__body { padding: 6px 20px 20px; }

.filter-group { padding: 18px 0; border-bottom: 1px solid var(--glass-border); }
.filter-group--last { border-bottom: none; padding-bottom: 4px; }
.filter-group__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--silver);
  margin-bottom: 13px;
}
.filter-group__label::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px;
  background: var(--secondary-red);
  box-shadow: 0 0 8px rgba(255,26,26,0.5);
}

/* Pills (Availability / Type) */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 9999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: all var(--transition-fast);
}
.filter-pill input { display: none; }
.filter-pill span { position: relative; }
.filter-pill span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; margin-inline-end: 7px;
  background: rgba(180,182,190,0.4);
  transition: all var(--transition-fast);
  vertical-align: middle;
}
.filter-pill:hover { border-color: rgba(255,26,26,0.45); color: #fff; }
.filter-pill:has(input:checked) {
  background: linear-gradient(135deg, rgba(122,0,0,0.6), rgba(255,26,26,0.32));
  border-color: rgba(255,26,26,0.7);
  color: #fff;
  box-shadow: 0 0 14px rgba(255,26,26,0.22);
}
.filter-pill:has(input:checked) span::before {
  background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8);
}

/* Price range */
.price-range { display: flex; align-items: center; gap: 10px; }
.price-field {
  display: flex; align-items: center; flex: 1;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 0 10px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.price-field:focus-within { border-color: rgba(255,26,26,0.6); box-shadow: 0 0 0 3px rgba(255,26,26,0.12); }
.price-field__sign { color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; }
.filter-price {
  width: 100%; background: transparent; border: none; outline: none;
  color: #fff; font-size: 0.88rem; padding: 9px 6px;
}
.filter-price::placeholder { color: rgba(160,162,170,0.6); }
.filter-price::-webkit-outer-spin-button,
.filter-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-price { -moz-appearance: textfield; }
.price-range__sep { width: 10px; height: 1px; background: rgba(180,182,190,0.4); flex-shrink: 0; }

/* Sort select */
.filter-select-wrap { position: relative; }
.filter-select-wrap::after {
  content: ''; position: absolute; top: 50%; inset-inline-end: 14px;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--silver); border-bottom: 2px solid var(--silver);
  transform: rotate(45deg); pointer-events: none;
}
.filter-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--glass-border);
  border-radius: 10px; color: #fff;
  font-size: 0.88rem; font-weight: 500;
  padding: 11px 34px 11px 13px;
  cursor: pointer; outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-select option { background: #121214; color: #fff; }
.filter-select:focus { border-color: rgba(255,26,26,0.6); box-shadow: 0 0 0 3px rgba(255,26,26,0.12); }

/* ---------- Product Card (reusable, filterable) ---------- */
.product-item {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--glass-bg);
  border: 1.5px solid rgba(180,182,190,0.35);
  border-radius: 14px;
  overflow: visible;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.product-item:hover {
  transform: translateY(-5px);
  border-color: rgba(224,224,228,0.7);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 18px rgba(200,202,210,0.18);
}
.product-item__media {
  position: relative; aspect-ratio: 460 / 215; overflow: hidden;
  background: #0b0b0d;
  border-radius: 13px 13px 0 0;
}
.product-item__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* نقطة التكبير تتبع المؤشّر (يضبطها card zoom في components.js) — انظر قسم «البند 14» آخر الملف */
  transform-origin: var(--rvz-x, 50%) var(--rvz-y, 50%);
  transition: transform var(--rvz-dur, 520ms) var(--rvz-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              filter var(--transition-normal), opacity var(--transition-normal);
}

/* Badges: sit on the top edge, extending ABOVE the card (not into the image) */
.product-item__badge {
  position: absolute; top: 0; z-index: 3;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; line-height: 1;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 5px 12px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.18); color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.product-item__badge--type { inset-inline-start: 10px; background: rgb(15,38,92); border-color: rgba(70,120,230,0.6); }
.product-item__badge--type.is-key { background: rgb(122,0,0); border-color: rgba(255,26,26,0.6); }
/* Subscribe Type (AI/Media): top-left edge, dark-blue — same level as the In Stock badge */
.product-item__badge--subtype { inset-inline-start: 10px; background: rgb(12,28,66); border-color: rgba(70,120,230,0.6); }
.product-item__badge--stock { inset-inline-end: 10px; }
.product-item__badge--stock.is-in { background: rgb(16,110,40); border-color: rgba(60,200,110,0.6); }
.product-item__badge--stock.is-out { background: rgb(90,90,96); color: #e6e6ea; }
/* Featured: gold star badge on the top-center edge + subtle gold glow on the card */
.product-item__badge--featured {
  left: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #ffd86b, #f5a623);
  color: #241a00; border-color: rgba(255,214,107,0.85);
  padding: 4px 9px; font-size: 0.72rem;
  box-shadow: 0 2px 12px rgba(245,166,35,0.55);
}
.product-item.is-featured { border-color: rgba(255,200,90,0.55); }
.product-item.is-featured:hover { border-color: rgba(255,214,107,0.9); box-shadow: 0 12px 30px rgba(245,166,35,0.22); }

.product-item__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 13px 14px; flex: 1; }
.product-item__accttype { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.product-item__at-label {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.product-item__tag {
  font-size: 0.66rem; font-weight: 600;
  padding: 2px 9px; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.product-item__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.product-item__tag.is-online { color: #67e08c; background: rgba(16,110,40,0.18); }
.product-item__tag.is-online::before { background: #3ec86e; box-shadow: 0 0 6px rgba(62,200,110,0.8); }
.product-item__tag.is-offline { color: #b6b8be; background: rgba(140,142,150,0.15); }
.product-item__tag.is-offline::before { background: #9a9ca4; }

/* Offer Type tag — under title, pushed to the right edge (never crowds Account Type) */
.product-item__offer {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 9px; border-radius: 9999px;
  /* على الخلايا الضيقة (جوال، عمودين) يلتف النص داخل الشارة بدل أن يتجاوز حدود
     البطاقة والشاشة؛ على الشاشات الأوسع يبقى سطراً واحداً لأن النص يتّسع تلقائياً */
  white-space: normal; max-width: 100%; text-align: center; line-height: 1.25;
  color: var(--silver); background: rgba(180,182,190,0.12); border: 1px solid rgba(180,182,190,0.28);
}
.product-item__offer.is-package { color: #ffd27a; background: rgba(255,180,60,0.12); border-color: rgba(255,180,60,0.38); }

.product-item__title {
  font-size: 0.98rem; font-weight: 700; line-height: 1.3; color: #f2f3f7;
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.55em;
}
.product-item__desc {
  font-size: 0.76rem; line-height: 1.4; color: var(--text-secondary);
  text-align: center; margin: -3px 0 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.1em;
}
/* Plan selector (subscriptions) — a collapsed bar that opens a dropdown of durations.
   Any number of plans, any names — all driven by the CSV "Plans" attribute. */

.product-item__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.product-item__price { font-size: 1.15rem; font-weight: 800; color: var(--secondary-red); text-align: center; }
.product-item__price .was {
  font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
  text-decoration: line-through; margin-inline-end: 6px;
}
.product-item__btn {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  font-size: 0.85rem; font-weight: 700; color: #fff; cursor: pointer;
  border: 1px solid rgba(255,26,26,0.5);
  background: linear-gradient(135deg, var(--primary-red, #7a0000), var(--secondary-red, #ff1a1a));
  box-shadow: 0 4px 14px rgba(255,26,26,0.22);
  transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.product-item__btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,26,26,0.32); }
.product-item__btn:disabled {
  background: rgba(90,90,96,0.35); border-color: rgba(140,142,150,0.3);
  color: #a0a2aa; cursor: not-allowed; box-shadow: none; filter: none; transform: none;
}
.product-item.is-sold-out .product-item__media img { opacity: 0.45; filter: grayscale(0.4); }

/* ===== Mixed card additions (PC / PlayStation / Xbox): icon media + features + page accent ===== */
/* Icon media — used when a product has no image (themed radial glow + tech grid + centered icon) */
.product-item__media--icon {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--pcard-accent, 255,26,26), 0.30), rgba(var(--pcard-accent, 255,26,26), 0.05) 55%, transparent 72%),
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(0,0,0,0.22)),
    #0b0b0d;
}
.product-item__media--icon::before {
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0.55;
  background-image:
    linear-gradient(rgba(var(--pcard-accent, 255,26,26), 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--pcard-accent, 255,26,26), 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 70%);
}
.product-item__iconglow {
  position: absolute; width: 118px; height: 118px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, rgba(var(--pcard-accent, 255,26,26), 0.5), transparent 70%);
  filter: blur(9px);
}
.product-item__iconwrap {
  position: relative; z-index: 2; display: inline-flex;
  color: rgb(var(--pcard-accent, 255,26,26));
  filter: drop-shadow(0 0 10px rgba(var(--pcard-accent, 255,26,26), 0.55));
}
.product-item__iconwrap svg { width: 54px; height: 54px; display: block; }

/* Feature list (optimizer-style ticks) */
.product-item__features {
  list-style: none; margin: 2px 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; text-align: start;
}
.product-item__features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.74rem; line-height: 1.35; color: #c6c8d0; }
.product-item__feat-ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.product-item__feat-check { color: rgb(var(--pcard-accent, 255,26,26)); }
.product-item__feat-star { color: #f5c542; }

/* Page-accent theming (only applied when the grid provides data-accent) */
.product-item--accent .product-item__price { color: rgb(var(--pcard-accent)); }
.product-item--accent .product-item__btn:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--pcard-accent), 0.92), rgb(var(--pcard-accent)));
  border-color: rgba(var(--pcard-accent), 0.55);
  box-shadow: 0 4px 14px rgba(var(--pcard-accent), 0.24);
}
.product-item--accent .product-item__btn:not(:disabled):hover { box-shadow: 0 6px 18px rgba(var(--pcard-accent), 0.34); }
.product-item--accent .product-item__badge--type { background: rgb(var(--pcard-accent)); border-color: rgba(var(--pcard-accent), 0.7); }
.product-item--accent .product-item__badge--type.is-key { background: rgb(122,0,0); border-color: rgba(255,26,26,0.6); }
.product-item--accent:hover { border-color: rgba(var(--pcard-accent), 0.6); box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 18px rgba(var(--pcard-accent), 0.22); }

/* =========================================================
   إشعار "أُضيف إلى السلة" — بديل التحويل القسري لصفحة السلة
   ========================================================= */
.cart-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 1200;
  width: min(340px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 16px;
  background: rgba(14, 14, 17, 0.92);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 26, 26, 0.28);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.75), 0 0 24px rgba(122, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}
.cart-toast.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.cart-toast__close {
  position: absolute; top: 6px; inset-inline-end: 10px;
  background: none; border: 0; cursor: pointer;
  color: var(--silver-dark); font-size: 20px; line-height: 1;
  padding: 4px; transition: color var(--transition-fast);
}
.cart-toast__close:hover { color: #fff; }

.cart-toast__row { display: flex; align-items: center; gap: 12px; }
.cart-toast__img {
  width: 46px; height: 46px; flex: none; border-radius: 10px;
  object-fit: cover; background: rgba(0,0,0,0.5); border: 1px solid rgba(192,192,192,0.12);
}
.cart-toast__img--icon {
  display: grid; place-items: center;
  background: rgba(122, 0, 0, 0.25); border-color: rgba(255,26,26,0.3); color: #4ade80;
}
.cart-toast__img--icon svg { width: 24px; height: 24px; }

.cart-toast__text { min-width: 0; }
.cart-toast__title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4ade80; }
.cart-toast__name {
  color: #fff; font-weight: 700; font-size: 14px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-toast__plan {
  font-size: 11px; font-weight: 700; color: var(--secondary-red);
  background: rgba(122,0,0,0.3); border: 1px solid rgba(255,26,26,0.35);
  border-radius: 5px; padding: 1px 6px; margin-inline-start: 4px;
}
.cart-toast__q { color: var(--text-secondary); font-size: 13px; margin: 14px 0 10px; }

.cart-toast__actions { display: flex; gap: 8px; }
.cart-toast__btn {
  flex: 1; text-align: center; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; transition: all var(--transition-normal);
}
.cart-toast__btn--primary { background: var(--primary-red); color: #fff; }
.cart-toast__btn--primary:hover { background: var(--primary-red-hover); }
.cart-toast__btn--ghost { background: transparent; border-color: rgba(192,192,192,0.18); color: var(--text-secondary); }
.cart-toast__btn--ghost:hover { border-color: rgba(192,192,192,0.4); color: #fff; }

@media (max-width: 480px) {
  .cart-toast { inset-inline: 16px; inset-block-end: 16px; width: auto; }
}

/* =========================================================
   حالة "داخل السلة" — تُعرض داخل زر الإضافة نفسه.
   الزر يحتفظ بلونه الأحمر؛ يُضاف إليه عدّاد صغير (✓ العدد).
   ========================================================= */
.product-item__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* صف الإجراءات: زر الإضافة + زر المهملات (يظهر فقط حين يكون المنتج في السلة) */
.product-item__actions { display: flex; align-items: stretch; gap: 8px; }
.product-item__actions .product-item__btn { flex: 1 1 auto; width: auto; min-width: 0; }
.product-item__del {
  flex: 0 0 auto; width: 42px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(122, 0, 0, 0.18);
  border: 1px solid rgba(255, 26, 26, 0.35);
  color: #ff6b6b;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.product-item__del:hover {
  background: rgba(122, 0, 0, 0.45);
  border-color: rgba(255, 26, 26, 0.65);
  color: #fff; transform: translateY(-1px);
}
.product-item__del:active { transform: translateY(0); }
.product-item__del svg { width: 16px; height: 16px; }
.product-item__btn-count {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(20, 83, 45, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.55);
  color: #86efac; font-size: 11px; font-weight: 800; line-height: 1.4;
  white-space: nowrap;
}
.product-item__btn-count svg { width: 11px; height: 11px; }

/* عند بلوغ الحدّ الأقصى يُعطَّل الزر — لكنه يحتفظ بلونه (أحمر أو لون القسم) ولا يصير رماديًا
   كحال "نفد المخزون". الفرق يظهر عبر الحبّة الخضراء فقط. */
.product-item__btn.is-incart:disabled {
  background: linear-gradient(135deg, var(--primary-red, #7a0000), var(--secondary-red, #ff1a1a));
  border-color: rgba(255, 26, 26, 0.5);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 26, 26, 0.22);
  cursor: default;
}
.product-item--accent .product-item__btn.is-incart:disabled {
  background: linear-gradient(135deg, rgba(var(--pcard-accent), 0.92), rgb(var(--pcard-accent)));
  border-color: rgba(var(--pcard-accent), 0.55);
  box-shadow: 0 4px 14px rgba(var(--pcard-accent), 0.24);
}
.product-item__btn.is-incart:disabled .product-item__btn-count {
  background: rgba(20, 83, 45, 0.95);
  border-color: rgba(74, 222, 128, 0.75);
  color: #bbf7d0;
}

/* سعر "يبدأ من" على بطاقات أقسام المتجر (shop.html) — يُحقن من الكتالوج */
.product-card__from {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex; align-items: baseline; gap: 6px;
}
.product-card__from b {
  font-size: 1.05rem; font-weight: 800;
  color: var(--secondary-red);
}

/* ===== صفحة الدفع: خيارات الدفع ===== */
.pay-method {
  display: flex; align-items: center; gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.pay-method:hover { border-color: rgba(255, 255, 255, 0.22); }
.pay-method.is-active {
  border-color: rgba(255, 26, 26, 0.55);
  background: rgba(122, 0, 0, 0.16);
}
.pay-method.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pay-method__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pay-method__title { color: #fff; font-weight: 700; font-size: 0.95rem; }
.pay-method__desc { font-size: 0.78rem; color: var(--text-secondary); }
.pay-method__note { color: var(--secondary-red); font-weight: 700; }
.pay-method__note:not(:empty)::before { content: "— "; }

/* ===== نافذة الدفع عبر الدعم ===== */
.rv-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.rv-modal.is-open { display: flex; }
.rv-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}
.rv-modal__panel {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: 90vh; overflow-y: auto;
  padding: 32px 28px 28px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(160deg, rgba(24, 24, 27, 0.98), rgba(10, 10, 12, 0.98));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  animation: rvModalIn 0.28s ease both;
}
@keyframes rvModalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.rv-modal__close {
  position: absolute; top: 10px; inset-inline-end: 14px;
  font-size: 26px; line-height: 1;
  color: var(--text-secondary); background: none; border: 0; cursor: pointer;
  transition: color 0.2s ease;
}
.rv-modal__close:hover { color: #fff; }
.rv-modal__icon {
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--secondary-red), var(--primary-red));
  box-shadow: 0 10px 26px rgba(122, 0, 0, 0.45);
}
.rv-modal__icon svg { width: 30px; height: 30px; }
.rv-modal__title { color: #fff; font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.rv-modal__text { color: var(--text-secondary); font-size: 0.87rem; line-height: 1.75; margin-bottom: 18px; }
.rv-modal__total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-secondary); font-size: 0.85rem;
}
.rv-modal__total b { color: var(--secondary-red); font-size: 1.15rem; font-weight: 800; }
.rv-modal__note {
  font-size: 0.74rem; color: var(--text-secondary);
  opacity: 0.85; line-height: 1.7; margin: 16px 0 18px;
}

.support-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.support-channel {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 600;
  text-decoration: none;
  transition: color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.support-channel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-channel svg { width: 18px; height: 18px; flex-shrink: 0; }
.support-channel:hover {
  color: #fff;
  border-color: rgba(255, 26, 26, 0.45);
  transform: translateY(-2px);
}
@media (max-width: 420px) {
  .support-channels { grid-template-columns: 1fr; }
}

/* ===== أزرار النسخ وإجراءات الطلب ===== */
.rv-copy {
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.rv-copy:hover {
  color: #fff;
  border-color: rgba(255, 26, 26, 0.5);
  background: rgba(122, 0, 0, 0.28);
}
.rv-modal__id { display: inline-flex; align-items: center; gap: 10px; }
.rv-modal__id b { font-family: monospace; color: var(--secondary-red); letter-spacing: 0.5px; }

.order-act {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 700;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.order-act:hover {
  color: #fff;
  border-color: rgba(255, 26, 26, 0.45);
  background: rgba(122, 0, 0, 0.25);
}
.order-act--danger:hover {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(127, 29, 29, 0.35);
}

/* ===== الفاتورة (receipt.html) ===== */
.receipt {
  background: #fff;
  color: #18181b;
  border-radius: 14px;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.receipt__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 2px solid #18181b;
}
.receipt__brand { display: flex; align-items: center; gap: 12px; }
.receipt__brand img { width: 46px; height: 46px; border-radius: 8px; object-fit: contain; }
.receipt__brand div { display: flex; flex-direction: column; line-height: 1.4; }
.receipt__brand b { font-size: 1.15rem; font-weight: 800; }
.receipt__brand span { font-size: 0.78rem; color: #52525b; }
.receipt__stamp { text-align: end; }
.receipt__stamp h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.receipt__status {
  display: inline-block; margin-top: 6px;
  font-size: 0.72rem; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  background: #dcfce7; color: #166534;
}
.receipt__status--pending { background: #fef3c7; color: #92400e; }
.receipt__status--cancelled { background: #e4e4e7; color: #52525b; }

.receipt__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 24px 0;
  border-bottom: 1px solid #e4e4e7;
}
.receipt__meta span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px; color: #71717a; margin-bottom: 3px; }
.receipt__meta b { font-size: 0.88rem; font-weight: 700; word-break: break-word; }

.receipt__table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 0.88rem; }
.receipt__table th {
  text-align: start; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: #71717a; padding: 8px 6px; border-bottom: 1px solid #e4e4e7;
}
.receipt__table td { padding: 11px 6px; border-bottom: 1px solid #f4f4f5; }
.receipt__num { text-align: end; white-space: nowrap; }
.receipt__table th.receipt__num { text-align: end; }

.receipt__totals { margin-inline-start: auto; max-width: 300px; }
.receipt__row { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; font-size: 0.88rem; color: #3f3f46; }
.receipt__row.is-green { color: #15803d; }
.receipt__row.is-total { font-size: 1.1rem; font-weight: 800; color: #18181b; border-top: 2px solid #18181b; margin-top: 6px; padding-top: 10px; }
.receipt__foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid #e4e4e7; font-size: 0.8rem; color: #52525b; text-align: center; }
.receipt__foot a { color: #7a0000; font-weight: 700; text-decoration: underline; }

@media (max-width: 560px) {
  .receipt { padding: 24px 18px; }
  .receipt__meta { grid-template-columns: 1fr; }
}

/* الطباعة: الفاتورة وحدها على ورق أبيض */
@media print {
  body { background: #fff !important; }
  .no-print, #site-header, #site-footer, .main-bg-container, .main-bg-overlay, .bg-glow, .cart-toast, .rv-modal { display: none !important; }
  section { padding: 0 !important; }
  .receipt { box-shadow: none; border-radius: 0; padding: 0; }
  .receipt__table td, .receipt__table th { border-color: #d4d4d8 !important; }
}

/* ======================================================================
   الصفحة الرئيسية (home.html)
   ====================================================================== */
.home-eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 26, 26, 0.32);
  background: rgba(122, 0, 0, 0.18);
  color: var(--secondary-red);
  font-size: 0.74rem; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
}

/* زر الهيرو الثاني: خلفية زجاجية شفافة (كان بلا خلفية إطلاقًا فوق الفيديو) */
#heroAuthBtn {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#heroAuthBtn:hover { background: rgba(255, 255, 255, 0.15); }

/* شارات الثقة تحت أزرار الهيرو */
.home-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px;
  margin-top: 40px;
}
.home-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary);
}
.home-chips svg { width: 17px; height: 17px; color: var(--secondary-red); flex-shrink: 0; }

/* بطاقات الأقسام تستخدم نفس مكوّن بطاقات المتجر (.product-card) بصورة كل قسم */

/* بطاقات المنتجات المختارة */
.home-feat {
  display: flex; flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.home-feat:hover { transform: translateY(-6px); border-color: rgba(255, 26, 26, 0.35); }
.home-feat__media {
  display: block; position: relative; overflow: hidden;
  height: 130px; background: rgba(0, 0, 0, 0.45);
}
.home-feat__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: var(--rvz-x, 50%) var(--rvz-y, 50%);
  transition: transform var(--rvz-dur, 520ms) var(--rvz-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              filter var(--transition-normal);
}
.home-feat__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(122, 0, 0, 0.2); color: var(--secondary-red);
}
.home-feat__ph svg { width: 30px; height: 30px; }
.home-feat__body { display: block; padding: 14px 16px 18px; text-align: center; }
.home-feat__name {
  /* كان سطرًا واحدًا بـellipsis فيُقصّ «ChatGPT Plus Subscription» و
     «PS Plus Essential Account» على 375px — اسم المنتج لا يُقصّ في متجر. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  color: #fff; font-size: 0.88rem; font-weight: 700; line-height: 1.35;
  overflow: hidden; min-height: 2.7em;
}
.home-feat__price {
  display: block; margin-top: 6px;
  color: var(--secondary-red); font-weight: 800; font-size: 1.02rem;
}

/* قسم المحسّن */
.home-optimizer {
  display: grid; grid-template-columns: 1fr 2.1fr;
  gap: 36px; align-items: center;
  padding: 36px 40px;
}
.home-optimizer__list { margin-top: 6px; display: grid; gap: 12px; }
.home-optimizer__list li {
  position: relative;
  padding-inline-start: 30px;
  color: var(--text-secondary); font-size: 0.9rem;
}
.home-optimizer__list li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 3px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(122, 0, 0, 0.35);
  border: 1px solid rgba(255, 26, 26, 0.45);
}
/* علامة الصحّ كأيقونة SVG بدل حدّين مائلين — كانت تنقلب وتتشوّه في الاتجاه RTL */
.home-optimizer__list li::after {
  content: "";
  position: absolute; inset-inline-start: 4px; top: 7px;
  width: 10px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home-optimizer__media img {
  display: block; width: 100%; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
@media (max-width: 900px) {
  .home-optimizer { grid-template-columns: 1fr; padding: 26px 22px; gap: 26px; }
  .home-optimizer__media { order: -1; }
}

/* خطوات الشراء */
/* الرقم في مجرى النص فوق العنوان — لا تموضع مطلق (كان يعتمد على حشوة ثابتة ويختل مع RTL) */
.home-step__num {
  display: block;
  margin-bottom: 12px;
  font-size: 1.7rem; font-weight: 800;
  line-height: 1;
  color: rgba(255, 26, 26, 0.38);
  letter-spacing: 1px;
}

/* الأسئلة الشائعة */
.home-faq { padding: 0 !important; margin-bottom: 14px; overflow: hidden; }
.home-faq summary {
  list-style: none; cursor: pointer;
  padding: 20px 26px;
  color: #fff; font-weight: 700; font-size: 0.98rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color 0.2s ease;
}
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after {
  content: "+";
  font-size: 1.4rem; font-weight: 700; line-height: 1;
  color: var(--secondary-red); flex-shrink: 0;
  transition: transform 0.25s ease;
}
.home-faq[open] summary::after { transform: rotate(45deg); }
.home-faq summary:hover { color: var(--secondary-red); }
.home-faq p {
  padding: 0 26px 22px;
  color: var(--text-secondary); font-size: 0.87rem; line-height: 1.85;
}

/* ─────────────────────────────────────────────────────────────
   إمكانية الوصول (a11y) — البند 5
   ───────────────────────────────────────────────────────────── */

/* رابط "تخطّي إلى المحتوى" — مخفي حتى يصله التركيز بلوحة المفاتيح */
.skip-link {
  position: fixed;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 10px;
  /* أبيض على #ff1a1a تباينه 3.88 (دون 4.5) — الأحمر الداكن يرفعه إلى ~11.6
     مع إبقاء الهوية عبر الحدّ الأحمر الفاتح. */
  background: #6a0000;
  border: 1px solid var(--secondary-red, #ff1a1a);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* حلقة تركيز واضحة لمستخدمي لوحة المفاتيح فقط (لا تظهر عند النقر بالفأرة) */
:focus-visible {
  outline: 2px solid #ff5c5c;
  outline-offset: 2px;
  border-radius: 4px;
}
/* لا تُزل التحديد إلا لمن يدعم focus-visible */
:focus:not(:focus-visible) { outline: none; }

/* الهدف الذي يقفز إليه رابط التخطّي لا يُظهر حلقة تركيز مزعجة */
#main-content:focus { outline: none; }

/* ── أداء الرسم (يحافظ على التصميم بالكامل) — 2026-07-24 ───────────────
   عزل خلفية الأنيميشن على طبقة مستقلة + حصر إعادة الرسم + تخطّي ما هو خارج الشاشة. */
.main-bg-container {
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint;
}
/* ملاحظة: كان هنا `.glass-panel { contain: paint; }` وأُزيل عمدًا —
   حصر الرسم يقصّ أي عنصر يخرج من حدود اللوحة، وكان يُخفي قائمة الفلاتر المنسدلة بالكامل. */
/* تخطّي رسم الأقسام خارج الشاشة (أول قسم يُرسم دائمًا؛ مع حجز مساحة لتفادي قفز التمرير) */
section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

/* ── وضع السلاسة (rv-lite) — يُفعَّل تلقائيًا إن كان تسريع الرسوميات مطفأ في المتصفح ──
   يزيل الحركة والـblur ويضع خلفية ثابتة (poster). الهوية محفوظة، والأداء سلس على الرسم البرمجي. */
html.rv-lite .main-bg-container {
  background: #0a0a0c url('../images/MAIN-PG-poster.jpg') center center / cover no-repeat;
}
html.rv-lite .glass-panel,
html.rv-lite .header,
html.rv-lite .header.scrolled,
html.rv-lite .footer-glass,
html.rv-lite .main-menu-drawer,
html.rv-lite .custom-dropdown-menu,
html.rv-lite .rv-modal,
html.rv-lite [class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.rv-lite .glass-panel { background: rgba(18, 18, 20, 0.92) !important; }

/* rv-lite: تبسيط شامل للرسم — إزالة الظلال الكبيرة والفلاتر والانتقالات (أثقل ما على الرسم البرمجي).
   الهوية الأساسية تبقى (ألوان/صور/حدود/تخطيط)، لكن بلا توهّجات وحركات — للأجهزة بلا تسريع فقط. */
html.rv-lite *,
html.rv-lite *::before,
html.rv-lite *::after {
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}
html.rv-lite .hero-animate,
html.rv-lite .glass-panel { opacity: 1 !important; transform: none !important; }

/* ── رسالة تفعيل تسريع الرسوميات (Toast) — أسفل يسار الشاشة (تصميم احترافي) ── */
.rv-gpu-toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 5000;
  max-width: 360px; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 14px 14px 17px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(30,18,20,0.98), rgba(13,13,15,0.98));
  border: 1px solid rgba(255,60,60,0.22); color: #ececef;
  box-shadow: 0 18px 48px rgba(0,0,0,0.62);
  transform: translateY(170%); opacity: 0;
  transition: transform 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease;
  overflow: hidden;
}
.rv-gpu-toast::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  background: linear-gradient(180deg, #ff4d4d, #7a0000);
}
.rv-gpu-toast.show { transform: translateY(0); opacity: 1; }
.rv-gpu-toast__icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: #ff6b6b;
  background: rgba(255,60,60,0.12); border: 1px solid rgba(255,60,60,0.22);
}
.rv-gpu-toast__icon svg { width: 19px; height: 19px; }
.rv-gpu-toast__body { flex: 1; min-width: 0; }
.rv-gpu-toast__title { display: block; font-weight: 700; font-size: 0.92rem; color: #fff; margin-bottom: 3px; }
.rv-gpu-toast__msg { display: block; font-size: 0.8rem; line-height: 1.55; color: #b6b6bf; }
.rv-gpu-toast__close {
  flex: none; background: none; border: none; color: #7c7c85;
  font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 2px; margin-top: -2px;
  transition: color .2s ease;
}
.rv-gpu-toast__close:hover { color: #fff; }
html.rv-lite .rv-gpu-toast {
  box-shadow: 0 18px 48px rgba(0,0,0,0.62) !important;
  transition: transform 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease !important;
}
html.rv-lite .rv-gpu-toast__close { transition: color .2s ease !important; }

/* ── إصلاح ارتفاعات الصور داخل WordPress — 2026-07-25 ──────────────────
   في بيئة ووردبريس تفوز القاعدة العامّة `img { height: auto }` على أدوات
   Tailwind (h-full/h-10/…)، فتظهر الشعارات عملاقة وصور البطاقات ناقصة.
   نعيد تثبيت الارتفاعات صراحةً بأولوية أعلى (img + class). */
img.h-full  { height: 100%; }
img.h-6     { height: 1.5rem; }
img.h-8     { height: 2rem; }
img.h-10    { height: 2.5rem; }
img.h-24    { height: 6rem; }
@media (min-width: 768px) {
  img.md\:h-8  { height: 2rem; }
  img.md\:h-12 { height: 3rem; }
}

/* صورة بطاقة المنتج تملأ منطقة الوسائط بالكامل (بلا فراغ) — بلا أي تغيير في مقاس البطاقة */
.product-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* بطاقة تحوي صورة حقيقية: أخفِ الشبكة التقنية وأضِف تدرّج الدمج السفلي مثل بطاقات --image */
.product-card__media:has(> img)::after { display: none; }
.product-card__media:has(> img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.45) 0%, transparent 45%);
  pointer-events: none;
}
/* وضوح كامل في الحالتين: كانت الصور بشفافية 80% ولا تصفو إلا عند مرور الفأرة،
   فتمتزج بتدرّج الخلفية الملوّن وتبدو باهتة/أقل دقّة. */
.product-card__media > img,
.product-card__img { opacity: 1; }

/* ── صفحة 404 (منقولة حرفيًا من 404.html الثابت لئلا تضيع عند التحويل) ────── */
.err-wrap { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.err-code {
  font-size: clamp(96px, 22vw, 200px); line-height: 1; font-weight: 800;
  background: linear-gradient(180deg, #ff5c5c, #7a0000);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 30px rgba(122,0,0,.35));
}
.err-title { font-size: clamp(22px, 4vw, 34px); font-weight: 700; margin-top: 8px; color: #fff; }
.err-text { color: #b7b7c0; max-width: 520px; margin: 14px auto 30px; line-height: 1.6; }
.err-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ======================================================================
   إصلاحات الشاشات الضيقة جدًا (≤ 400px / ≤ 340px)
   المشكلة: عرض محتوى الهيدر ثابت (~371px: شعار 139 + زر القائمة + مجموعة
   الأزرار 180) ولا ينكمش، و body عليها overflow-x: clip → تحت 371px كان
   رابط الدخول/السلة يُقصّان خارج الشاشة بلا أي وسيلة للوصول إليهما.
   كل ما هنا محصور داخل استعلامات ميديا صغيرة فلا يتغيّر شيء على الشاشات
   الأكبر (≥ 401px) إطلاقًا.
   ====================================================================== */
@media (max-width: 400px) {
  /* الشعار: ارتفاع أصغر قليلًا + السماح له بالانكماش كشبكة أمان (object-contain
     موجود أصلًا على العنصر فلا تتشوّه النسبة) */
  .header .logo { min-width: 0; flex-shrink: 1; }
  .header .logo img { height: 22px !important; max-width: 100%; }
  .header > div:first-of-type { min-width: 0; }

  /* مجموعة الأزرار: حشوات أضيق قليلًا وفواصل بلا هوامش — تبقى كل الأزرار
     ظاهرة وقابلة للنقر (لا نُخفي أي وظيفة) */
  .header .auth-buttons { padding: 2px; gap: 0; }
  .header .auth-buttons > .custom-dropdown > button,
  .header .auth-buttons > a { padding: 5px !important; }
  .header .auth-buttons > div[class*="w-px"] { margin-inline: 1px; }
  .header .auth-buttons #currentCurText { font-size: 0.68rem; }
  .header #mainMenuBtn { margin-inline-end: 2px; }
}

@media (max-width: 340px) {
  /* الطبقة الأضيق (Galaxy Fold ‎~280px): تصغير إضافي محسوب حتى تبقى
     اللغة/العملة/السلة/الدخول كلها داخل الشاشة */
  .header, .header.scrolled { padding-left: 6px !important; padding-right: 6px !important; }
  .header .logo img { height: 20px !important; }
  .header .auth-buttons > .custom-dropdown > button,
  .header .auth-buttons > a { padding: 4px !important; }
  .header .auth-buttons svg { width: 18px; height: 18px; }
  .header #langSwitcherBtn #currentLangText img { width: 19px !important; }
  .header .auth-buttons #currentCurText { font-size: 0.64rem; }
}

/* ---- درج القائمة: كتلة الحساب/السلة (تظهر على الجوال فقط) ----
   الهيدر على الجوال قد يضيق جدًا، وكان الدرج يحوي Shop/About/Legal فقط،
   فأُضيف مدخل ثابت للدخول (أو لوحة التحكم) والسلة. على sm فأكثر يبقى الدرج
   كما كان تمامًا لأن الهيدر يعرض الرابطين بوضوح. */
.mm-account {
  margin-top: auto;
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-account-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #d1d5db;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.mm-account-link:hover {
  color: #fff;
  background: rgba(122,0,0,0.28);
  border-color: rgba(255,26,26,0.35);
}
.mm-account-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.mm-account-link .mm-count {
  margin-inline-start: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  color: var(--secondary-red);
  background: rgba(0,0,0,0.7);
  box-shadow: 0 0 8px rgba(255,26,26,0.45);
  border: 1px solid rgba(255,26,26,0.5);
}
@media (min-width: 640px) { .mm-account { display: none; } }

/* ---- بطاقات المنتجات على عمودين في الشاشات الضيقة ----
   شارتا النوع/التوفّر مطلقتان بلا حدّ أقصى فكانتا تتراكبان (136px بطاقة مقابل
   ~162px شارتين)، وشارة العرض في صف .product-item__accttype (nowrap) كانت
   تخرج خارج حدود البطاقة. */
@media (max-width: 400px) {
  .product-item__badge {
    font-size: 0.58rem;
    padding: 4px 6px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* حدّان متكاملان (44% + 54%) لا يتقاطعان أبدًا مهما طال النص، وأوسعهما
     لشارة التوفّر لأن "Out of Stock" أطول نص محتمل */
  .product-item__badge--type,
  .product-item__badge--subtype { inset-inline-start: 5px; max-width: calc(44% - 5px); }
  .product-item__badge--stock { inset-inline-end: 5px; max-width: calc(54% - 5px); }
  /* نجمة "المميّز" كانت على حافة البطاقة العلوية فتتراكب مع شارة النوع على
     بطاقة بعرض 136px — تنزل قليلًا داخل الصورة فتبقى الشارات الثلاث واضحة */
  .product-item__badge--featured { max-width: none; padding: 3px 7px; top: 22px; transform: translate(-50%, 0); }

  /* الصف السفلي يلتف بدل أن يفيض خارج البطاقة */
  .product-item__accttype { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .product-item__accttype > * { min-width: 0; }
}

/* ---- شريط الفلاتر على الشاشات الضيقة ---- */
@media (max-width: 420px) {
  /* القائمة المنسدلة لا تتجاوز الشاشة مهما كان موضع الزر */
  .filter-menu__panel { max-width: calc(100vw - 28px); }
  /* قائمة الترتيب كانت 150px ثابتة ونصّها ~157px فيلامس السهم */
  .filters-panel--bar .filter-select { width: 100%; min-width: 0; }
  .filters-panel--bar .filter-group--sort,
  .filters-panel--bar .filter-select-wrap { width: 150px; max-width: 100%; }
  /* محاذاة زر Reset مع صندوق الترتيب (كان أعلى منه بـ 5px لأنه متمركز) */
  .filters-bar__end { align-items: flex-end; }
  .filters-panel--bar .filter-reset { align-self: flex-end; }
}

/* ======================================================================
   الفارسية — الخط والتفاصيل النصّية
   الاتجاه RTL يأتي من [dir="rtl"] الموجود أصلًا (نفس قواعد العربية).
   هنا فقط الخط: Vazirmatn خط فارسي قياسي يُحمَّل ديناميكيًا من main.js
   عند اختيار الفارسية فقط (ensurePersianFont) — بلا كلفة على بقية الزوّار،
   ومع سقوط آمن إلى Tajawal/Inter لو تعذّر تحميله.
   ====================================================================== */
html[lang="fa"] body,
html[lang="fa"] button,
html[lang="fa"] input,
html[lang="fa"] select,
html[lang="fa"] textarea {
  font-family: 'Vazirmatn', 'Tajawal', 'Inter', sans-serif;
}
/* الفارسية أعرض قليلًا من العربية بالحجم نفسه — ارتفاع سطر أريح للقراءة */
html[lang="fa"] .mm-sublist a,
html[lang="fa"] .product-item__desc,
html[lang="fa"] .about-body p { line-height: 1.85; }

/* حالة "داخل السلة" في بطاقة المنتج على الشاشات الضيقة: الصف (زر الشراء + زر الحذف)
   يترك للزر ~57px فينضغط نصّه ويفيض (في اللغات الثلاث، والفارسية أسوأها لطول النص).
   على ≤400px يأخذ الزر سطرًا كاملًا وينزل زر الحذف تحته متمركزًا. */
@media (max-width: 400px) {
  .product-item__actions { flex-wrap: wrap; row-gap: 6px; }
  .product-item__actions > .product-item__btn { flex: 1 1 100%; }
  .product-item__actions > .product-item__del { flex: 0 0 auto; margin-inline: auto; }
  /* داخل الزر: النص وشارة العدد ("داخل السلة · 1") جنبًا إلى جنب = 120px داخل 83px
     متاحة؛ يصيران سطرين متمركزين فيتّسعان بلا اقتصاص */
  .product-item__btn { flex-direction: column; gap: 4px; padding-inline: 8px; }
}

/* ======================================================================
   قائمة العملات — وضوح رمز العملة
   كان الرمز ($ / IQD / تومان) بـ text-xs text-gray-500 font-mono: باهتًا وصغيرًا،
   و font-mono يُسيء رسم الرموز العربية/الفارسية. صار "شارة" واضحة بعرض ثابت
   تصطفّ عموديًا، مع تمييز العملة المختارة.
   ====================================================================== */
.cur-option { color: var(--text-secondary); }
.cur-option__name { font-weight: 700; letter-spacing: 0.01em; }
.cur-option__code {
  flex-shrink: 0;
  min-width: 46px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  color: #e9eaf0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.cur-option:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.cur-option:hover .cur-option__code {
  color: #fff;
  background: rgba(255, 26, 26, 0.16);
  border-color: rgba(255, 26, 26, 0.5);
}
/* العملة المختارة حاليًا — واضحة من نظرة واحدة */
.cur-option.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(122, 0, 0, 0.42), rgba(122, 0, 0, 0.14));
}
.cur-option.is-active .cur-option__code {
  color: #fff;
  background: rgba(255, 26, 26, 0.28);
  border-color: rgba(255, 26, 26, 0.7);
  box-shadow: 0 0 10px rgba(255, 26, 26, 0.25);
}

/* قوائم الهيدر المنسدلة (اللغة/العملة) في RTL: كانت مثبَّتة بـ right-0 (فيزيائي)
   ومجموعة الأزرار تقع عند الحافة اليسرى في العربية/الفارسية، فتمتدّ القائمة
   خارج الشاشة (‎-96px على 320px). التثبيت من الجهة المقابلة يُبقيها داخل الشاشة.
   مقصورة على قوائم الهيدر — قائمة عملة سايدبار الحساب تمتدّ بعرض كامل (left+right). */
[dir="rtl"] .header .custom-dropdown-menu {
  right: auto;
  left: 0;
}

/* ======================================================================
   العربية/الفارسية: تخطيط إنجليزي (LTR) + نصّ سليم داخليًا
   بعد تثبيت dir=ltr صار الاتجاه المنطقي للفقرة LTR، فعلامات الترقيم المحايدة
   (النقطة، علامة الاستفهام، الأقواس) تلتصق بالطرف الخاطئ من الجملة العربية.
   unicode-bidi: plaintext يجعل كل فقرة تستنتج اتجاهها من محتواها وحدها،
   فتُرسم الجملة العربية سليمة **دون أي انعكاس في التخطيط** (الهيدر/الدرج/
   السايدبار/البطاقات تبقى كما في الإنجليزية تمامًا).
   ====================================================================== */
html[lang="ar"] :where(p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, summary, label, figcaption),
html[lang="fa"] :where(p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, summary, label, figcaption) {
  unicode-bidi: plaintext;
}

/* ======================================================================
   بطاقة "الطلب الخاص" في شبكة أقسام الرئيسية
   الأقسام خمسة على شبكة ثلاثية ⇒ خانة فارغة في الصفّ الأخير. هذه البطاقة
   تملأ الخانة الوسطى فيبقى قسم في كل طرف. تصميمها متمايز عمدًا (إطار متقطّع
   بلا صورة) كي لا تُقرأ كمنتج، مع الالتزام بلغة تصميم البطاقات نفسها.
   ====================================================================== */
.cat-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 34px 26px;
  text-align: center;
  text-decoration: none;
  border-radius: 16px;
  /* الإطار مطابق تمامًا لبطاقات الأقسام الخمس (.product-card + product-card--edge-*):
     1.5px فضّي بالشفافية نفسها + ظلّ وتوهّج البطاقة نفسه — لا إطار متقطّع بعد الآن */
  border: 1.5px solid rgba(228, 230, 236, 0.55);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(122, 0, 0, 0.26) 0%, rgba(122, 0, 0, 0.07) 45%, transparent 78%),
    var(--glass-bg);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 0 16px rgba(222, 224, 232, 0.15);
  transition: transform var(--transition-normal), border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}
.cat-cta:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 245, 250, 0.85);
  box-shadow: 0 0 24px rgba(236, 238, 245, 0.28);
}
.cat-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-top: -18px;     /* رفع الأيقونة والشارة تحتها بطلب المستخدم */
  margin-bottom: 2px;
  border-radius: 50%;
  color: var(--secondary-red);
  background: rgba(122, 0, 0, 0.22);
  border: 1px solid rgba(255, 26, 26, 0.32);
  box-shadow: 0 0 18px rgba(255, 26, 26, 0.18);
}
.cat-cta__icon svg { width: 31px; height: 31px; }
.cat-cta__eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--secondary-red);
  margin-bottom: 10px;   /* تعويض الرفع كي يبقى العنوان وما تحته في موضعه */
}
.cat-cta__title {
  position: relative;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #eef0f4 40%, #c4c6ce 70%, #eef0f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cat-cta__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 34px;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, var(--secondary-red), transparent);
  transition: width var(--transition-normal);
}
.cat-cta:hover .cat-cta__title::after { width: 64px; }
.cat-cta__desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 32ch;
  margin: 0;
}
.cat-cta__btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 26, 26, 0.45);
  background: rgba(122, 0, 0, 0.32);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cat-cta:hover .cat-cta__btn {
  background: linear-gradient(135deg, var(--secondary-red), var(--darkRed, #7a0000));
  border-color: transparent;
}
@media (max-width: 400px) {
  .cat-cta { padding: 26px 18px; }
  .cat-cta__desc { max-width: none; }
}

/* شارة الهيرو في الرئيسية: تكبير طفيف بطلب المستخدم بعد اختصار نصّها إلى "RVENOR STORE".
   الاستهداف بالصنفين معًا كي لا تتأثّر شارة قسم الأوبتمايزر (.home-eyebrow وحدها). */
.home-eyebrow.hero-animate {
  padding: 9px 22px;
  font-size: 0.86rem;
  letter-spacing: 1.6px;
  margin-bottom: 24px;
}

/* ======================================================================
   شبكة باقات الأوبتمايزر — مهيّأة لأي عدد من الباقات (اليوم ثلاث، ومستقبلًا خمس)
   نفس سلّم المنتجات في عدد العناصر بالصفّ: 2 · 3 · 4 · 5 (ولا واحد أبدًا).
   لماذا flex لا grid؟ في الشبكة ذات الأعمدة الثابتة تبقى الأعمدة الفارغة محجوزة،
   فثلاث باقات في شبكة خماسية تلتصق يسارًا وتترك خانتين فارغتين. و auto-fit لا
   يحلّها لأنه يحسب عدد الأعمدة من **أقصى** حجم للعمود (340px) فيقف عند ثلاثة.
   الحلّ: flex-wrap + أساس محسوب لكل مقاس + justify-content:center ⇒ العدد يتبع
   السلّم بالضبط، وأي صفّ ناقص يبقى **متمركزًا** بلا فجوة، أيًّا كان عدد الباقات.
   ====================================================================== */
.plans-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.plans-grid > * {
  flex: 1 1 calc(50% - 0.5rem);      /* جوال: عنصران */
  min-width: 0;
  max-width: 340px;
}
@media (min-width: 768px) {
  .plans-grid { gap: 2rem; }
  .plans-grid > * { flex: 1 1 calc(33.333% - 1.334rem); }   /* تابلت/لابتوب: ثلاثة */
}
@media (min-width: 1280px) {
  .plans-grid > * { flex: 1 1 calc(25% - 1.5rem); }         /* لابتوب كبير: أربعة */
}
@media (min-width: 1536px) {
  .plans-grid > * { flex: 1 1 calc(20% - 1.6rem); }         /* شاشة كبيرة: خمسة */
}

/* بطاقات باقات الأوبتمايزر على الشاشات الضيقة: مع عمودين إلزاميين تصير البطاقة
   ~136px، وحشوة p-8 (32px) تترك 72px فقط للنص فيفيض السعر والمزايا. تصغير الحشوة
   والخطوط يعيد المحتوى داخل البطاقة مع الحفاظ على التصميم. لا أثر فوق 400px. */
@media (max-width: 400px) {
  .opt-plan { padding: 14px 10px !important; }
  .opt-plan .text-5xl { font-size: 1.35rem !important; margin-bottom: 0.75rem !important; }
  .opt-plan ul, .opt-plan .space-y-4 { font-size: 0.68rem !important; margin-bottom: 1rem !important; }
  .opt-plan .space-y-4 > * + * { margin-top: 0.5rem !important; }
  .opt-plan li, .opt-plan .flex.items-center.gap-2 { align-items: flex-start; gap: 5px; line-height: 1.35; }
  .opt-plan svg { width: 13px !important; height: 13px !important; flex-shrink: 0; margin-top: 2px; }
  .opt-plan h3, .opt-plan .text-2xl { font-size: 1rem !important; }
  .opt-plan a, .opt-plan button { padding: 8px 10px !important; font-size: 0.78rem !important; }
  .opt-plan * { overflow-wrap: anywhere; }
}

/* ======================================================================
   الفوتر — ثلاثة أقسام (طلب المستخدم 2026-08-02):
     Company (يسار) · الكتلة الوسطى: اللوجو + السوشل + البريد + الحقوق (المنتصف) · Legal (يمين)
   حُذف عمودا "العلامة" و"Products" نهائيًا بطلبه.
   التناسق في كل المقاسات: ثلاثة أعمدة متساوية من 640px فأعلى (الأوسط في العمود
   الثاني ⇒ منتصف الصفحة تمامًا)، وعلى الجوال عمودان (Company | Legal) والكتلة
   الوسطى تحتهما بعرض الصفّ كاملًا. بلا إزاحات — التوازن من الشبكة نفسها.
   ملاحظة: grid-row:1 صراحةً كي لا يدفع التوضّع التلقائي الأوسطَ إلى صفّ ثانٍ.
   ====================================================================== */
@media (min-width: 640px) {
  .footer-company { grid-column: 1; grid-row: 1; }
  .footer-mid     { grid-column: 2; grid-row: 1; }
  .footer-legal   { grid-column: 3; grid-row: 1; }
}

/* ======================================================================
   لوحة "من نحن + القانوني" أسفل أقسام المتجر (طلب المستخدم 2026-08-02)
   بلغة تصميم الموقع نفسها: لوحة زجاجية + توهّج أحمر خفيف + عنوان بخطّ أحمر
   تحته + أيقونة في دائرة حمراء + زرّا الموقع القياسيان (primary + silver).
   عمودان على الشاشات المتوسطة فأكبر بينهما فاصل رأسي، وعمود واحد على الجوال.
   ====================================================================== */
.shop-info {
  position: relative;
  overflow: hidden;
  padding: 34px 28px;
}
.shop-info__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 50% 0%, rgba(122, 0, 0, 0.28) 0%, rgba(122, 0, 0, 0.07) 45%, transparent 75%);
  pointer-events: none;
}
.shop-info__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.shop-info__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.shop-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--secondary-red);
  background: rgba(122, 0, 0, 0.22);
  border: 1px solid rgba(255, 26, 26, 0.32);
  box-shadow: 0 0 18px rgba(255, 26, 26, 0.18);
}
.shop-info__icon svg { width: 25px; height: 25px; }
.shop-info__title {
  position: relative;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #eef0f4 40%, #c4c6ce 70%, #eef0f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shop-info__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, var(--secondary-red), transparent);
}
.shop-info__desc {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 42ch;
  margin: 0 0 6px;
}
.shop-info__sep { display: none; }
@media (min-width: 768px) {
  .shop-info { padding: 40px 34px; }
  .shop-info__grid { grid-template-columns: 1fr 1px 1fr; gap: 34px; align-items: stretch; }
  .shop-info__sep {
    display: block;
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, var(--glass-border), transparent);
  }
  .shop-info__col { justify-content: flex-start; }
}
@media (max-width: 400px) {
  .shop-info { padding: 24px 16px; }
  .shop-info__desc { font-size: 0.8rem; max-width: none; }
}

/* ======================================================================
   حسابات التواصل داخل قسم "تواصل معنا" (طلب المستخدم 2026-08-02)
   نفس أيقونات الفوتر وروابطه، لكن بعرض أوضح: بطاقة لكل منصّة (أيقونة في دائرة
   + اسم المنصّة) بلغة تصميم الموقع: زجاج + حدّ فضّي خفيف + توهّج أحمر عند المرور.
   خمس بطاقات في صفّ على الشاشات المتوسطة فأكبر، وتلتفّ تلقائيًا على الأصغر.
   ====================================================================== */
.contact-socials { margin-top: 34px; }
.contact-socials__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.contact-socials__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}
.contact-socials__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--secondary-red);
  white-space: nowrap;
}
.contact-socials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.contact-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px;
  border-radius: 14px;
  text-decoration: none;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: transform var(--transition-normal), border-color var(--transition-normal),
              box-shadow var(--transition-normal), background var(--transition-normal);
}
.contact-social:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 26, 26, 0.45);
  background: rgba(122, 0, 0, 0.16);
  box-shadow: var(--shadow-red);
}
.contact-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--silver);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.contact-social__icon svg { width: 22px; height: 22px; }
.contact-social:hover .contact-social__icon {
  color: #fff;
  background: rgba(255, 26, 26, 0.18);
  border-color: rgba(255, 26, 26, 0.5);
}
.contact-social__name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.contact-social:hover .contact-social__name { color: #fff; }
@media (max-width: 400px) {
  .contact-socials__grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
  .contact-social { padding: 14px 6px; }
  .contact-social__icon { width: 40px; height: 40px; }
  .contact-social__icon svg { width: 19px; height: 19px; }
  .contact-social__name { font-size: 0.7rem; }
}

/* العنوان صار أطول ("Also Contact Us With :" وما يقابله بالعربية والفارسية):
   يُسمح له بالالتفاف على الشاشات الضيقة بدل الخروج عن اللوحة، مع تباعد أحرف أقلّ. */
@media (max-width: 560px) {
  .contact-socials__head { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .contact-socials__title { white-space: normal; text-align: center; letter-spacing: 0.16em; line-height: 1.6; }
  .contact-socials__line { min-width: 28px; }
}

/* ===== سطر السلة على الشاشات الضيقة: مبالغ التومان طويلة جدًا =====
   بعد حذف الدولار صار أعلى مبلغ ممكن في السطر بالتومان من رتبة 84,000,000
   (منتج بـ8.4 مليون × 10 نسخ). الصفّ (عدّاد الكمّية + السعر + زر الحذف) بفجوة
   gap-6 يتجاوز 320px فيخرج زر الحذف خارج الشاشة. على ≤400px تُضيَّق الفجوة
   ويصغر خطّ المبلغ ويُسمح للرقم بالالتفاف — بلا أي أثر على الشاشات الأكبر. */
@media (max-width: 400px) {
  #cartItemsContainer .glass-panel > div:last-child { gap: 10px; }
  #cartItemsContainer .glass-panel .text-end { font-size: 0.8rem; min-width: 0; overflow-wrap: anywhere; }
  #cartItemsContainer .glass-panel .text-end .text-xs { font-size: 0.65rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   صفحة المنتج المخصّصة (product.html) — الكتلة 3
   البطاقة صارت رابطًا، وكل ما كان عليها (السعر، الخطط، الشراء) انتقل إلى هنا
   ومعه الوصف الطويل من ووردبريس وقسم التقييمات.
   الهوية نفسها: زجاج داكن + لمسة حمراء، ولون التمييز يأتي من --pcard-accent
   لكل منتج تمامًا كبطاقته في القائمة.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── الشبكة الرئيسية: صورة + معلومات ── */
.pdp {
  display: grid;
  /* عمود الصورة أعرض بكثير من عمود المعلومات: الشكل يبقى عريضًا كما كان،
     لكن المساحة تكبر طولًا وعرضًا معًا (~+70%) بطلب المالك. */
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 24px; } }

.pdp-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--pcard-accent, 255, 26, 26), 0.28);
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--pcard-accent, 255, 26, 26), 0.22), transparent 70%),
    var(--bg-color-secondary);
  /* إطار عريض 16:9 — أقرب إلى نسبة هيدر ستيم (460×215 ≈ 2.14:1) من 16:10
     الأصلية، فينقص المقتطَع من جانبَي الصورة من 25% إلى 17%. والشكل يبقى
     عريضًا كما كان. التكبير يأتي من عرض العمود أعلاه لا من تغيير الشكل. */
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.pdp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-media__glow {
  position: absolute; inset: 18%;
  background: radial-gradient(circle, rgba(var(--pcard-accent, 255, 26, 26), 0.45), transparent 70%);
  filter: blur(26px);
}
.pdp-media__icon { position: relative; width: 40%; max-width: 180px; color: rgb(var(--pcard-accent, 255, 26, 26)); }
.pdp-media__icon svg { width: 100%; height: auto; }

.pdp-badge {
  position: absolute; top: 12px; inset-inline-start: 12px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 999px; text-transform: uppercase;
  backdrop-filter: blur(6px); z-index: 2;
}
/* خلفية داكنة صريحة لا شفافة: الشارة كانت تبهت فوق الأغلفة الفاتحة
   (غلاف Cyberpunk أصفر ساطع) فلا تكاد تُقرأ. */
.pdp-badge.is-in  { background: rgba(5, 34, 5, 0.82);   color: #7dea7d; border: 1px solid rgba(110, 224, 110, 0.55); }
.pdp-badge.is-out { background: rgba(18, 18, 20, 0.85); color: #d8d8d8; border: 1px solid rgba(200, 200, 200, 0.35); }

/* ── عمود المعلومات ── */
.pdp-info { display: flex; flex-direction: column; gap: 14px; text-align: start; }
.pdp-title { font-size: clamp(1.6rem, 3.2vw, 2.35rem); font-weight: 800; color: #fff; line-height: 1.25; }
.pdp-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75; }
.pdp-price {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 800;
  color: rgb(var(--pcard-accent, 255, 26, 26));
  overflow-wrap: anywhere;
}

/* ── النجوم ── */
.pdp-stars { display: inline-flex; align-items: center; gap: 2px; }
.pdp-star { width: 17px; height: 17px; color: #3a3a3f; flex-shrink: 0; }
.pdp-star.is-on { color: #f5b301; }
.pdp-stars.is-sm .pdp-star { width: 14px; height: 14px; }

.pdp-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.85rem; }
.pdp-rating__num { color: #fff; font-weight: 800; }
.pdp-rating__count { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.pdp-rating__count:hover { color: var(--secondary-red); }
.pdp-rating__none { color: var(--text-secondary); }

/* ── اختيار الخطة (الاشتراكات) ── */
.pdp-plans { display: flex; flex-direction: column; gap: 9px; }
.pdp-plans__lbl { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.pdp-plans__grid { display: flex; flex-wrap: wrap; gap: 9px; }
.pdp-plan {
  flex: 1 1 140px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  text-align: start;
}
.pdp-plan:hover { border-color: rgba(var(--pcard-accent, 255, 26, 26), 0.55); }
.pdp-plan.is-active {
  border-color: rgb(var(--pcard-accent, 255, 26, 26));
  background: rgba(var(--pcard-accent, 255, 26, 26), 0.12);
}
.pdp-plan__name { font-size: 0.8rem; font-weight: 700; color: #fff; }
.pdp-plan__price { font-size: 0.85rem; font-weight: 800; color: rgb(var(--pcard-accent, 255, 26, 26)); overflow-wrap: anywhere; }

/* ── المزايا ── */
.pdp-features { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.pdp-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--text-primary); }
.pdp-feat-ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.pdp-feat-ic.is-check { color: rgb(var(--pcard-accent, 255, 26, 26)); }
.pdp-feat-ic.is-star { color: #f5b301; }

/* ── خصائص المنتج ── */
.pdp-attrs { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-attrs > div {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.74rem;
}
.pdp-attrs dt { color: var(--text-secondary); }
.pdp-attrs dd { color: #fff; font-weight: 700; }

/* ── الإجراءات ── */
.pdp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pdp-buy { flex: 1 1 190px; padding: 13px 22px; justify-content: center; }
.pdp-cart-link { flex: 0 1 auto; padding: 13px 22px; justify-content: center; }
.pdp-note { font-size: 0.78rem; min-height: 15px; color: var(--text-secondary); }

/* ── الوصف الطويل + التقييمات ── */
.pdp-about, .pdp-reviews { margin-top: 34px; padding: 26px 28px; text-align: start; }
.pdp-h2 {
  font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pdp-about__body p { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.9; margin-bottom: 12px; }
.pdp-about__body p:last-child { margin-bottom: 0; }

/* ── نموذج التقييم ── */
.pdp-review-form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: 14px; margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pdp-review-form__title { font-size: 0.95rem; font-weight: 700; color: #fff; }
.pdp-rate { display: flex; gap: 4px; }
.pdp-rate__star { width: 30px; height: 30px; color: #3a3a3f; transition: color var(--transition-fast), transform var(--transition-fast); }
.pdp-rate__star svg { width: 100%; height: 100%; }
.pdp-rate__star:hover { transform: scale(1.12); }
.pdp-rate__star.is-on { color: #f5b301; }
.pdp-review-form__text {
  width: 100%; resize: vertical;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px; padding: 11px 13px;
  color: #fff; font-size: 0.88rem; line-height: 1.7;
  transition: border-color var(--transition-fast);
}
.pdp-review-form__text:focus { outline: none; border-color: var(--primary-red); }
.pdp-review-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pdp-review-form__msg { font-size: 0.78rem; }
.pdp-review-form__msg.is-ok { color: #4ade80; }
.pdp-review-form__msg.is-bad { color: var(--secondary-red); }

.pdp-review-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-radius: 14px; margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  font-size: 0.88rem; color: var(--text-secondary);
}

/* ── قائمة التقييمات ── */
.pdp-review-list { display: flex; flex-direction: column; gap: 16px; }
.pdp-review { padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.pdp-review:last-child { border-bottom: 0; padding-bottom: 0; }
.pdp-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 6px; }
.pdp-review__who { font-weight: 700; color: #fff; font-size: 0.88rem; }
.pdp-review__date { font-size: 0.72rem; color: var(--text-secondary); margin-inline-start: auto; }
.pdp-review__text { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.8; margin-top: 7px; }
.pdp-review-empty { color: var(--text-secondary); font-size: 0.88rem; }

/* شارة «مشترٍ موثّق» — تظهر فقط لمن اشترى المنتج فعلًا (يقرّرها الخادم) */
.pdp-verified {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(16, 124, 16, 0.18);
  border: 1px solid rgba(110, 224, 110, 0.38);
  color: #6ee06e; font-size: 0.68rem; font-weight: 800;
}
.pdp-verified svg { width: 11px; height: 11px; }

/* ── البطاقة صارت رابطًا: نداء الفعل بدل زر الشراء ──
   كان نصًّا أحمر عاريًا يشبه بقيّة النصوص الحمراء في البطاقة (السعر، علامات ✓)
   فلا يُقرأ كهدف نقر. صار زرًّا كامل العرض بهوية .btn-primary نفسها. */
.product-item__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.84rem; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap;              /* سطر واحد دائمًا — لا يرتفع الزرّ فجأةً */
  color: #fff;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-red-hover));
  border: 1px solid rgba(255, 26, 26, 0.28);
  box-shadow: var(--shadow-red);
  transition: background var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast), gap var(--transition-fast);
}
.product-item__cta-ic { width: 15px; height: 15px; flex-shrink: 0; }
.product-item:hover .product-item__cta {
  gap: 12px;
  background: linear-gradient(135deg, var(--primary-red-hover), var(--secondary-red));
  box-shadow: 0 0 24px rgba(255, 26, 26, 0.45);
  transform: translateY(-1px);
}
/* بطاقة بلون مميّز (--pcard-accent): الزرّ يتبع لونها بدل الأحمر.
   ★ الشفافية مقيَّدة بالتباين لا بالذوق: النصّ أبيض، وأفتح لون في الكتالوج هو
   أخضر إكس بوكس (56,176,56). عند 0.85 يهبط التباين إلى 3.69 (دون 4.5)، وعند
   0.55 يصعد إلى 6.70. فالحدّ الأعلى للشفافية هنا 0.55 مهما أُضيف من ألوان. */
.product-item--accent .product-item__cta {
  background: linear-gradient(135deg,
              rgba(var(--pcard-accent), 0.55), rgba(var(--pcard-accent), 0.30));
  border-color: rgba(var(--pcard-accent), 0.5);
  box-shadow: 0 0 18px rgba(var(--pcard-accent), 0.28);
}
.product-item--accent:hover .product-item__cta {
  background: linear-gradient(135deg,
              rgba(var(--pcard-accent), 0.72), rgba(var(--pcard-accent), 0.45));
  box-shadow: 0 0 26px rgba(var(--pcard-accent), 0.45);
}
/* نفد المخزون: الزرّ يخفت ولا يدّعي أنه متاح */
.product-item.is-sold-out .product-item__cta {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  box-shadow: none;
}
.product-item.is-sold-out:hover .product-item__cta {
  background: rgba(255, 255, 255, 0.07); box-shadow: none; transform: none;
}
/* عمودان على الجوّال ⇒ عرض الزرّ ~132px: نضيّق الحشوة والخطّ كي يبقى سطرًا واحدًا
   («مشاهدهٔ جزئیات» هي الأطول بين اللغات الثلاث وهي المعيار). */
@media (max-width: 520px) {
  .product-item__cta { padding: 10px 8px; gap: 6px; font-size: 0.76rem; }
  .product-item__cta-ic { width: 13px; height: 13px; }
}
.product-item__from-lbl { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); }

/* شارة "داخل السلة" على البطاقة — عرض فقط (الشراء داخل صفحة المنتج) */
.product-item__incart {
  position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(16, 124, 16, 0.9);
  color: #fff; font-size: 0.68rem; font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.product-item__incart svg { width: 11px; height: 11px; }

/* ── الشاشات الضيقة ── */
@media (max-width: 480px) {
  .pdp-about, .pdp-reviews { padding: 20px 16px; }
  .pdp-plan { flex: 1 1 100%; }
  .pdp-buy, .pdp-cart-link { flex: 1 1 100%; }
  .pdp-review-cta { justify-content: center; text-align: center; }
  .pdp-review__date { margin-inline-start: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   مسار التنقّل المشترك (rv-crumbs)
   طلب المالك (2026-08-02): يتوسّط الصفحة لا في اليسار · الصفحة الحالية بالأحمر
   وتحت القسم خطّ أحمر بنفس تصميم عناوين «من نحن» (about-divider) · والصفحات
   الأعلى بلون فضّي مختلف كي تتميّز عن الحالية بوضوح.
   يوفّر بنفسه المسافة العلوية التي يحجزها الهيدر الثابت، ولذلك تُخفَّض الحشوة
   العلوية للقسم الذي يليه في كل صفحة تستعمله.
   ══════════════════════════════════════════════════════════════════════════ */
.rv-crumbs {
  position: relative;
  z-index: 10;
  padding-top: 7.5rem;
  padding-bottom: 0.25rem;
  text-align: center;
}
.rv-crumbs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.6;
}
/* الصفحات الأعلى: فضّية — لون مختلف عن الحالية عمدًا */
.rv-crumbs__link {
  color: var(--silver);
  font-weight: 600;
  transition: color var(--transition-fast);
}
.rv-crumbs__link:hover { color: #fff; }
.rv-crumbs__sep { color: rgba(255, 255, 255, 0.22); font-weight: 400; }
/* الصفحة الحالية: حمراء وبارزة */
.rv-crumbs__now {
  color: var(--secondary-red);
  font-weight: 800;
  text-shadow: 0 0 18px rgba(255, 26, 26, 0.35);
}
/* الخطّ الأحمر تحت القسم — نفس هوية .about-divider */
.rv-crumbs__line {
  display: block;
  width: 64px;
  height: 3px;
  margin: 0.85rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--secondary-red), var(--primary-red));
}

@media (max-width: 480px) {
  .rv-crumbs { padding-top: 6.5rem; }
  .rv-crumbs__row { gap: 7px; font-size: 0.78rem; }
  .rv-crumbs__line { width: 52px; margin-top: 0.7rem; }
}

/* قسمٌ يلي مسارَ تنقّل أُدرِج تلقائيًا: المسار صار يوفّر مسافة الهيدر الثابت،
   فتُلغى الحشوة العلوية الكبيرة (pt-32/pt-28) كي لا تتضاعف الفجوة. */
.rv-crumbs-after { padding-top: 1rem !important; }

/* ══════════════════════════════════════════════════════════════════════════
   بوّابات الدفع (الكتلة 4)
   أربع بوّابات كلٌّ لسوقها: FastPay · Qi Card بالدينار، وزرین‌پال · سپ بالتومان،
   وكلّها اليوم «قريبًا». الدعم الفني وحده مفعَّل ويظهر دائمًا.
   البوّابة المعطَّلة تُعرَض باهتة وبمؤشّر غير قابل للنقر — لا تُخفى، كي يعرف
   الزبون أن الطريق قادم لسوقه.
   ══════════════════════════════════════════════════════════════════════════ */
.pay-method__cur {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: middle;
}
.pay-soon {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(245, 179, 1, 0.14);
  border: 1px solid rgba(245, 179, 1, 0.4);
  color: #f5b301;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: middle;
  white-space: nowrap;
}
.pay-method--soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.pay-method--soon:hover { border-color: inherit; }
.pay-method--soon .pay-method__title { color: var(--text-secondary); }
.pay-method__ic {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--secondary-red);
}
.pay-method--soon .pay-method__ic { color: var(--text-secondary); }
.pay-note {
  margin-top: 16px;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

@media (max-width: 420px) {
  /* أسماء البوّابات الفارسية + شارة «قريبًا» + رمز العملة تتزاحم على العرض الضيق */
  .pay-method__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .pay-method__cur, .pay-soon { margin-inline-start: 0; }
}

/* ── بوّابة سوق آخر: تُعرَض مقفلة لا مخفيّة (طلب المالك 2026-08-02) ──
   الزبون يرى أن البوّابة موجودة ويعرف سبب قفلها، بدل أن تختفي بلا تفسير.
   الهوية: أحمر داكن خافت (لون الموقع) لا رمادي محايد — القفل جزء من التصميم
   لا حالة عطل. والصفّ كلّه غير قابل للنقر (لا input أصلًا داخله). */
.pay-method--locked {
  cursor: not-allowed;
  border-color: rgba(122, 0, 0, 0.32);
  background:
    linear-gradient(180deg, rgba(122, 0, 0, 0.07), transparent 70%),
    rgba(255, 255, 255, 0.015);
}
.pay-method--locked:hover { border-color: rgba(122, 0, 0, 0.45); }
.pay-method--locked .pay-method__title > span:first-child { color: var(--text-secondary); }
.pay-method--locked .pay-method__ic { color: rgba(122, 0, 0, 0.75); }

/* خانة القفل تحلّ محلّ زرّ الاختيار بنفس مقاسه فيبقى الصفّ منتظمًا */
.pay-lock__slot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-red);
}
.pay-lock__ic { width: 16px; height: 16px; }

/* شارة «مقفلة» — حمراء بهوية الموقع، تقابل شارة «قريبًا» الذهبية */
.pay-lock {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(122, 0, 0, 0.22);
  border: 1px solid rgba(255, 26, 26, 0.42);
  color: #ff6b6b;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: middle;
  white-space: nowrap;
}
/* سطر سبب القفل */
.pay-method__desc--lock { color: var(--text-secondary); opacity: 0.92; }

@media (max-width: 420px) {
  .pay-lock { margin-inline-start: 0; }
}

/* ── منتجات ذات صلة في صفحة المنتج ─────────────────────────────────────
   تعيد استخدام بطاقة .home-feat نفسها (صورة + اسم + سعر) فلا مكوّن جديد،
   وسلّم الأعمدة نفسه المستعمل في «أحدث المنتجات»: 2 · 3 · 4 · 5. */
.pdp-related { margin-top: 26px; }
.pdp-related__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.pdp-related__all {
  font-size: 0.85rem; font-weight: 700; color: var(--secondary-red);
  text-decoration: none; white-space: nowrap;
}
.pdp-related__all:hover { text-decoration: underline; }
.pdp-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (min-width: 768px)  { .pdp-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pdp-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .pdp-related__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ── بريد الدعم في الفوتر ────────────────────────────────────────────────
   العنوان نصّ لا رابط: mailto كان يفتح عميل بريد لا يملكه أكثر الزوّار.
   النسخ يقع بالزرّ وحده، والعنوان يبقى قابلًا للتحديد يدويًا (rv-copyable
   مستثناة في protect.js). الأحمر #ff1a1a على خلفية الفوتر تباينه 4.72. */
.footer-mail {
  --fm-btn: 26px;                /* مقاس الزرّ — الإزاحة تُشتقّ منه فتبقى صحيحة إن تغيّر */
  --fm-gap: 8px;
  display: inline-flex; align-items: center; gap: var(--fm-gap);
  /* ★ محور التوسيط هو **العنوان** لا المجموعة: العمود يوسّط المجموعة كاملةً
     (عنوان + فجوة + زرّ) فيقع النصّ يسار الشعار بمقدار نصف الزرّ والفجوة.
     حشوة بادئة بعرض (الزرّ + الفجوة) تُزيح المحتوى يمينًا بنصفها بالضبط،
     فيصطفّ البريد تحت الشعار وحقوق النشر تمامًا. */
  padding-inline-start: calc(var(--fm-btn) + var(--fm-gap));
}
.footer-mail__addr {
  color: var(--secondary-red);
  font-weight: 700;
  cursor: text;                 /* ليس رابطًا — لا مؤشّر يد */
  user-select: text;
}
.footer-mail__copy {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  width: var(--fm-btn); height: var(--fm-btn); flex-shrink: 0;
  border-radius: 8px; cursor: pointer;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: color var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast);
}
.footer-mail__copy:hover {
  color: var(--secondary-red);
  background: rgba(255, 26, 26, 0.12);
  border-color: rgba(255, 26, 26, 0.4);
}
.footer-mail__copy:focus-visible {
  outline: 2px solid var(--secondary-red); outline-offset: 2px;
}
.footer-mail__ic { width: 13px; height: 13px; }
/* الزرّ صغير بصريًا (26px) لكن هدف اللمس يبقى 44×44 عبر امتداد غير مرئي —
   تصغير الشكل لا يعني تصغير المساحة القابلة للنقر. */
.footer-mail__copy::after { content: ""; position: absolute; inset: -9px; }
.footer-mail__ic.is-done { display: none; }
/* بعد النسخ: صحّ أخضر لثانيتين ثم يعود */
.footer-mail__copy.is-done { color: #3ec96b; border-color: rgba(62, 201, 107, 0.45); background: rgba(62, 201, 107, 0.12); }
.footer-mail__copy.is-done .footer-mail__ic.is-copy { display: none; }
.footer-mail__copy.is-done .footer-mail__ic.is-done { display: block; }

/* إشعار حقوق النشر: أصغر قليلًا من text-xs (12px ⇒ 11.2px) مع بقاء التوسيط.
   استُبدل صنف تايلوند بصنف خاصّ لأن ترتيب حقن Tailwind Play CDN مقابل
   style.css غير مضمون، فالتجاور بينهما يجعل الفوز بالحجم مسألة حظّ. */
.footer-copy {
  font-size: 0.7rem;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.01em;
}

/* صفحة مستثناة من فتاتة التنقّل: تستعيد الخلوص من الهيدر الثابت.
   القياس: الهيدر 74px، وحشوة القسم 16px تعطي تداخلًا −8px، فالمطلوب 120px
   ليصير الفراغ بين الهيدر والعنوان 96px — مطابقًا لصفحات الأقسام (93px). */
/* ★ الصنف مكرَّر عمدًا (0,2,0): القسم يحمل pt-4 من Tailwind، وكلاهما صنف
   واحد (0,1,0) فيحسم الترتيبُ الفوزَ — وترتيب حقن Tailwind Play CDN مقابل
   style.css غير مضمون. التكرار يحسمها بالأولوية لا بالحظّ، وبلا !important. */
.rv-nocrumb-top.rv-nocrumb-top { padding-top: 120px; }
@media (max-width: 767px) { .rv-nocrumb-top.rv-nocrumb-top { padding-top: 104px; } }

/* احترام تفضيل تقليل الحركة: اللمعة تتوقّف وتستقرّ خارج الإطار */
@media (prefers-reduced-motion: reduce) {
  .logo::after { animation: none; background-position: -20% 0; }
}

/* ── زرّ «شاهد كل شيء» أسفل أحدث المنتجات ──────────────────────────────
   كان نصًّا أحمر يُسطَّر عند المرور — لا يُقرأ كهدف نقر بين البطاقات.
   زرّ محدَّد الحدود (ghost) لا مصمت: هو فعل **ثانوي** بعد البطاقات، فلو
   أخذ تدرّج .btn-primary لنافس أزرار الشراء على الانتباه. يمتلئ بالأحمر
   الداكن عند المرور فيصير مصمتًا لحظة التفاعل فقط. */
.rv-more {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 26px;
  border-radius: 10px;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--secondary-red);
  background: rgba(122, 0, 0, 0.12);
  border: 1px solid rgba(255, 26, 26, 0.42);
  transition: color var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast), gap var(--transition-fast);
}
.rv-more:hover {
  gap: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-red-hover));
  border-color: rgba(255, 26, 26, 0.7);
  box-shadow: 0 0 22px rgba(255, 26, 26, 0.32);
  transform: translateY(-2px);
}
.rv-more:focus-visible { outline: 2px solid var(--secondary-red); outline-offset: 3px; }

/* ── قسم الأسئلة في صفحة «من نحن» ────────────────────────────────────────
   يستعمل مكوّن .home-faq نفسه (أكورديون + علامة + تدور 45°) فلا نسخة ثانية
   من التصميم تتفرّق عن الأصل مع الوقت. هنا نضبط السياق فقط: الأسئلة داخل
   لوحة زجاجية أكبر، فنخفّف حشوة كل بطاقة ونضيّق الفواصل. */
.about-faq { margin-top: 4px; }
.about-faq .home-faq { margin-bottom: 10px; background: rgba(255, 255, 255, 0.025); }
.about-faq .home-faq:last-of-type { margin-bottom: 0; }
.about-faq .home-faq summary { padding: 16px 20px; font-size: 0.94rem; }
.about-faq .home-faq p { padding: 0 20px 18px; }
.about-faq__more {
  margin-top: 22px; text-align: center;
  font-size: 0.85rem; color: var(--text-secondary);
}
.about-faq__more a {
  color: var(--secondary-red); font-weight: 700;
  text-decoration: none; margin-inline-start: 6px;
}
.about-faq__more a:hover { text-decoration: underline; }

/* ── زرّ «اسأل عن هذا المنتج» ─────────────────────────────────────────────
   ثالث زرّ في صفّ الإجراءات، فلا يجوز أن ينافس زرّ الشراء: محدَّد الحدود
   بالفضّي لا مصمتًا بالأحمر. يتلوّن بالأحمر عند المرور وحده — حاضرٌ حين
   يُحتاج، صامتٌ قبل ذلك. */
.pdp-ask {
  flex: 0 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 0.92rem; font-weight: 600;
  color: var(--silver-light, #d8d8d8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.pdp-ask svg { width: 18px; height: 18px; flex-shrink: 0; }
.pdp-ask:hover {
  color: #fff;
  background: rgba(122, 0, 0, 0.35);
  border-color: rgba(255, 26, 26, 0.5);
  transform: translateY(-2px);
}
.pdp-ask:focus-visible { outline: 2px solid var(--secondary-red); outline-offset: 3px; }
@media (max-width: 640px) { .pdp-ask { flex: 1 1 100%; } }

/* ── نافذة «هل لديك سؤال؟» — قنوات بلون الهوية ───────────────────────────
   الصنف مقصور على هذه النافذة (variant: 'ask') ولا يمسّ نافذة الدفع: هناك
   القنوات وسيلةٌ لإتمام دفعٍ قائم فتبقى هادئة، وهنا هي **الدعوة نفسها**
   فتأخذ لون الهوية. */
.rv-modal__panel--ask .support-channel {
  color: #ff5c5c;
  background: rgba(122, 0, 0, 0.18);
  border-color: rgba(255, 26, 26, 0.32);
}
.rv-modal__panel--ask .support-channel:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-red-hover));
  border-color: rgba(255, 26, 26, 0.7);
  box-shadow: 0 0 18px rgba(255, 26, 26, 0.3);
}
/* بلا صندوق منتج ولا مجموع، فالقنوات تلي النصّ مباشرةً — نمنحها متنفّسًا */
.rv-modal__panel--ask .support-channels { margin-top: 18px; }

/* ── صفّ التسليم والاسترجاع في صفحة المنتج ───────────────────────────────
   يقع تحت أزرار الشراء لا فوقها: يطمئن **بعد** أن يقرّر الزبون، ولا ينافس
   السعر ولا الزرّ على الانتباه. نبرة هادئة وأيقونات صغيرة. */
.pdp-policy {
  list-style: none; margin: 16px 0 0; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.pdp-policy li {
  /* ★ صفّان لا التفاف: الأيقونة عمودٌ ثابت والنصّ عمودٌ يلتفّ داخل نفسه.
     flex-wrap السابق كان يدفع النصّ الطويل إلى سطر جديد **تحت** الأيقونة
     لأن أدنى عرض للنصّ يتجاوز المتاح — فتبدو الأيقونة معلّقة وحدها. */
  display: grid; grid-template-columns: 17px minmax(0, 1fr);
  align-items: start; gap: 10px;
  font-size: 0.84rem; line-height: 1.6; color: var(--text-secondary);
}
.pdp-policy__body { min-width: 0; }
.pdp-policy svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: #ff5c5c; }
.pdp-policy__link {
  /* يتبع النصّ في السطر نفسه ويلتفّ معه — لا يستقلّ بسطر */
  display: inline; white-space: nowrap;
  color: var(--secondary-red); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(255, 26, 26, 0.35);
}
.pdp-policy__link:hover { border-bottom-color: var(--secondary-red); }

/* ── شارة نسبة الخصم ─────────────────────────────────────────────────────
   تلي السعر مباشرةً لا فوق الصورة: أعلى البطاقة مزدحم أصلًا بثلاث شارات
   (نوع الحساب · التوفّر · المميَّز)، ورابعةٌ هناك تُفقد الجميع وضوحها.
   والرقم يُقرأ في سياق السعر فيفهمه النظر فورًا.
   ملاحظة تسمية: __discount لا __off تفاديًا لالتباسها بـ.product-item__offer
   القائمة (شارة نوع العرض). */
.product-item__discount,
.home-feat__discount {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.7rem; font-weight: 800; line-height: 1.5;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-red-hover));
  border: 1px solid rgba(255, 26, 26, 0.45);
  /* الرقم لاتيني دائمًا ومحاذاته ثابتة داخل النصّ العربي/الفارسي */
  direction: ltr; unicode-bidi: isolate;
  vertical-align: middle;
}
.home-feat__discount { font-size: 0.66rem; padding: 2px 6px; margin-inline-start: 6px; }
@media (max-width: 400px) {
  .product-item__discount, .home-feat__discount { font-size: 0.64rem; padding: 1px 5px; margin-inline-start: 5px; }
}

/* ══ هياكل التحميل (Skeletons) ═══════════════════════════════════════════
   بديل كلمة «Loading…»: يرسم **شكل المحتوى** قبل وصوله.
   ★ فائدته الحقيقية ليست التجميل: الهيكل يحجز المساحة نفسها التي سيشغلها
     المحتوى، فلا يقفز التخطيط عند وصوله (CLS). ولذلك مقاساته مشتقّة من
     مقاسات العناصر الفعلية لا مخترعة.
   ★ يحترم تقليل الحركة: يبقى الشكل ويتوقّف اللمعان. */
.rv-skel {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.rv-skel::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
              transparent, rgba(255, 255, 255, 0.07) 45%,
              rgba(255, 92, 92, 0.06) 55%, transparent);
  animation: rvSkelSweep 1.4s ease-in-out infinite;
}
@keyframes rvSkelSweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .rv-skel::after { animation: none; } }

.rv-skel--text  { height: 12px; margin-bottom: 8px; }
.rv-skel--title { height: 20px; margin-bottom: 12px; }
.rv-skel--w40 { width: 40%; } .rv-skel--w60 { width: 60%; }
.rv-skel--w80 { width: 80%; } .rv-skel--w100 { width: 100%; }

/* بطاقة منتج — تطابق نسب .product-item كي لا يتغيّر الارتفاع عند الاستبدال */
.rv-skel-card { border-radius: 14px; overflow: hidden; }
/* لا نسبة هنا: المقاس يأتي من صنف الوسائط الموروث (انظر skelCards). */
.rv-skel-card__media { border-radius: 0; }
.rv-skel-card__body {
  /* ★ قياسٌ لا تخمين: جسم البطاقة الحقيقي 262px عند عرض 273px (اسم + وصف +
     شارتان + ميزتان + سعر + زرّ). مطابقته هي الغاية كلّها — هيكل أقصر يترك
     القفز الذي جاء ليمنعه. */
  padding: 12px 13px 14px;
  /* height لا min-height: الأخيرة تسمح للأسطر بتجاوزها فيعود الفارق. */
  height: 262px; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
}
.rv-skel-card__body .rv-skel--text { margin-bottom: 0; }
.rv-skel-card__body .rv-skel--push { margin-top: auto; }
@media (max-width: 640px) { .rv-skel-card__body { height: 232px; } }
/* البطاقة المميّزة: جسمها 100px مقيسًا (اسم سطران + سعر) */
.rv-skel-card__body--feat { height: 100px; gap: 8px; }
@media (max-width: 640px) { .rv-skel-card__body--feat { height: 92px; } }

/* صفحة المنتج — العمودان نفساهما (1.8fr / 1fr) */
.rv-skel-pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 900px) { .rv-skel-pdp { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); } }
.rv-skel-pdp__media { aspect-ratio: 16 / 9; border-radius: 16px; }
.rv-skel-pdp__btn { height: 46px; border-radius: 8px; margin-top: 16px; }

/* تقييم واحد */
.rv-skel-review { display: flex; gap: 12px; padding: 14px 0; }
.rv-skel-review__avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.rv-skel-review__body { flex: 1; min-width: 0; }

/* ══ بحث المتجر — في الهيدر على كل صفحة ══════════════════════════════════
   ★ ليس أسود مسطّحًا: زجاج داكن + حدّ أحمر خافت + توهّج أحمر عند التركيز،
     وأيقونة تتلوّن بالأحمر — هوية الموقع نفسها في عنصر صغير.
   ★ ينمو عند التركيز (200 ⇒ 300px) فيبقى الهيدر مرتاحًا وقت التصفّح
     ويتّسع وقت الحاجة. */
.rv-search {
  position: relative;
  width: 200px;
  transition: width var(--transition-fast);
}
.rv-search:focus-within { width: 300px; }
@media (max-width: 1279px) { .rv-search { width: 168px; } .rv-search:focus-within { width: 240px; } }

.rv-search__icon {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--silver-dark); pointer-events: none;
  transition: color var(--transition-fast);
}
.rv-search:focus-within .rv-search__icon { color: var(--secondary-red); }

.rv-search__input {
  width: 100%; height: 38px; padding: 0 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(122, 0, 0, 0.22), rgba(0, 0, 0, 0.45));
  border: 1px solid rgba(255, 26, 26, 0.22);
  color: #fff; font-size: 0.82rem; font-weight: 600;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast);
}
.rv-search__input::placeholder { color: var(--silver-dark); font-weight: 500; }
.rv-search__input:hover { border-color: rgba(255, 26, 26, 0.4); }
.rv-search__input:focus {
  outline: none;
  background: linear-gradient(135deg, rgba(122, 0, 0, 0.34), rgba(0, 0, 0, 0.55));
  border-color: rgba(255, 26, 26, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 26, 26, 0.14), 0 0 18px rgba(255, 26, 26, 0.18);
}
.rv-search__input::-webkit-search-cancel-button { display: none; }

.rv-search__clear {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--silver-dark); font-size: 17px; line-height: 1; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); border: 0;
}
.rv-search__clear:hover { color: #fff; background: rgba(255, 26, 26, 0.35); }

/* ── قائمة النتائج ── */
.rv-search__panel {
  position: absolute; inset-inline-start: 0; top: calc(100% + 10px);
  width: 340px; max-width: min(340px, calc(100vw - 24px)); z-index: 70;
  max-height: 420px; overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: rgba(12, 12, 15, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 26, 26, 0.26);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 26px rgba(122, 0, 0, 0.25);
}
.rv-search__panel::before {
  content: ""; position: absolute; inset-inline: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--secondary-red), transparent);
  opacity: 0.7;
}
.rv-search__row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 11px;
  text-decoration: none; color: inherit;
  transition: background var(--transition-fast);
}
.rv-search__row:hover, .rv-search__row.is-active {
  background: linear-gradient(135deg, rgba(122, 0, 0, 0.45), rgba(122, 0, 0, 0.18));
}
.rv-search__media {
  width: 46px; height: 30px; border-radius: 7px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.rv-search__media img { width: 100%; height: 100%; object-fit: cover; }
.rv-search__txt { min-width: 0; display: flex; flex-direction: column; }
.rv-search__txt b {
  color: #fff; font-size: 0.84rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-search__txt small { color: var(--text-secondary); font-size: 0.7rem; }
.rv-search__price { color: var(--secondary-red); font-weight: 800; font-size: 0.8rem; white-space: nowrap; }
.rv-search__empty { padding: 20px 12px; text-align: center; color: var(--text-secondary); font-size: 0.82rem; }

/* ── داخل الدرج على الجوّال: بعرض كامل والقائمة تحته مباشرةً ── */
.main-menu-search { padding: 14px 16px 4px; }
.main-menu-search .rv-search { width: 100%; }
.main-menu-search .rv-search:focus-within { width: 100%; }
.main-menu-search .rv-search__panel {
  position: static; width: 100%; max-width: 100%;
  margin-top: 10px; box-shadow: none; max-height: 46vh;
}

/* ============================================================================
   [البند 14] تكبير صورة البطاقة عند المرور — يتبع المؤشّر
   ----------------------------------------------------------------------------
   ديناميكيّ لا مظهريّ: نقطة التكبير (--rvz-x/--rvz-y) يضبطها initCardZoom في
   components.js من موضع مؤشّر الزائر داخل الوسائط، فينكشف الجزء الذي ينظر إليه
   فعلًا لا وسط الصورة دائمًا. القيم الافتراضية 50%/50% فالتكبير يعمل من المركز
   حتى لو تعطّل السكربت.
   يشمل عائلات البطاقات الثلاث: .product-item (شبكة المنتجات) و.home-feat
   (أحدث المنتجات + المنتجات المشابهة) و.product-card (بطاقات الأقسام).
   يعمل على الفأرة الدقيقة وحدها؛ ويُلغى على اللمس ومع تقليل الحركة، ويُخفَّف
   في وضع السلاسة (rv-lite).
   ========================================================================== */

@keyframes rvCardShine {
  0%   { transform: translateX(-125%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(125%); opacity: 0; }
}
/* العربية والفارسية: اللمعة تعبر من اليمين إلى اليسار مع اتجاه القراءة
   (translateX فيزيائية لا منطقية، فلا تنعكس تلقائيًا) */
@keyframes rvCardShineRtl {
  0%   { transform: translateX(125%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(-125%); opacity: 0; }
}

/* لمعة تعبر الصورة مرّة واحدة مع بدء المرور — بألوان الهوية (فضّي ثم أحمر خفيف) */
.product-item__media::after,
.home-feat__media::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0;
  transform: translateX(-125%);
  background: linear-gradient(105deg,
      transparent 38%,
      rgba(255, 255, 255, 0.13) 47%,
      rgba(255, 90, 90, 0.10) 53%,
      transparent 62%);
}
/* بطاقات الأقسام ذات الصورة: ::after مشغولة بالشبكة التقنية (تبقى كما هي)،
   فاللمعة على ::before الفارغة. :has(img) كي لا تُطبَّق على بطاقة أيقونة. */
.product-card__media:has(img)::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0;
  transform: translateX(-125%);
  background: linear-gradient(105deg,
      transparent 38%,
      rgba(255, 255, 255, 0.12) 47%,
      rgba(255, 90, 90, 0.09) 53%,
      transparent 62%);
}

/* حركة الأيقونة في البطاقات بلا صورة — كي لا تبقى بطاقة صمّاء عند المرور
   (أكثر بطاقات «أحدث المنتجات» بلا صورة، فبدونها لا يحسّ الزائر بالمرور) */
.home-feat__ph svg,
.product-item__iconwrap,
.product-item__iconglow {
  transition: transform var(--rvz-dur, 520ms) var(--rvz-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              opacity var(--transition-normal), filter var(--transition-normal);
}

@media (hover: hover) and (pointer: fine) {
  .product-item:hover .product-item__media img,
  .product-item:focus-visible .product-item__media img {
    transform: scale(1.12);
    filter: saturate(1.06) brightness(1.05);
  }
  .home-feat:hover .home-feat__media img,
  .home-feat:focus-visible .home-feat__media img {
    transform: scale(1.10);
    filter: saturate(1.06) brightness(1.05);
  }
  .product-card:hover .product-card__img,
  .product-card:focus-visible .product-card__img,
  .product-card:hover .product-card__media img,
  .product-card:focus-visible .product-card__media img {
    transform: scale(1.10);
    filter: saturate(1.05) brightness(1.04);
  }

  .product-item:hover .product-item__media::after,
  .home-feat:hover .home-feat__media::after,
  .product-card:hover .product-card__media:has(img)::before {
    animation: rvCardShine 900ms ease-out 1;
  }
  [dir="rtl"] .product-item:hover .product-item__media::after,
  [dir="rtl"] .home-feat:hover .home-feat__media::after,
  [dir="rtl"] .product-card:hover .product-card__media:has(img)::before {
    animation-name: rvCardShineRtl;
  }

  .product-item:hover .product-item__iconwrap,
  .product-item:focus-visible .product-item__iconwrap {
    transform: scale(1.12) translateY(-2px);
    filter: drop-shadow(0 0 16px rgba(var(--pcard-accent, 255,26,26), 0.75));
  }
  .product-item:hover .product-item__iconglow,
  .product-item:focus-visible .product-item__iconglow { transform: scale(1.22); }

  .home-feat:hover .home-feat__ph svg,
  .home-feat:focus-visible .home-feat__ph svg {
    transform: scale(1.18);
    filter: drop-shadow(0 0 12px rgba(255, 26, 26, 0.55));
  }

  /* نفد المخزون: تكبير أخفّ وكشف جزئيّ للّون بدل الرمادي الكامل — إشارة تفاعل
     دون أن يبدو المنتج متاحًا */
  .product-item.is-sold-out:hover .product-item__media img,
  .product-item.is-sold-out:focus-visible .product-item__media img {
    transform: scale(1.05); opacity: 0.6; filter: grayscale(0.2);
  }
  .product-item.is-sold-out:hover .product-item__media::after { animation: none; }
}

/* وضع السلاسة (GPU مطفأ): تكبير بسيط من المركز بلا لمعة ولا تتبّع */
html.rv-lite .product-item__media::after,
html.rv-lite .home-feat__media::after { display: none; }
html.rv-lite .product-card__media:has(img)::before { display: none; }
html.rv-lite { --rvz-dur: 300ms; }
@media (hover: hover) and (pointer: fine) {
  html.rv-lite .product-item:hover .product-item__media img,
  html.rv-lite .home-feat:hover .home-feat__media img,
  html.rv-lite .product-card:hover .product-card__img { transform: scale(1.05); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .product-item__media img, .home-feat__media img,
  .product-card__img, .product-card__media img,
  .home-feat__ph svg, .product-item__iconwrap, .product-item__iconglow { transition: none; }
  .product-item:hover .product-item__media img,
  .product-item:focus-visible .product-item__media img,
  .home-feat:hover .home-feat__media img,
  .home-feat:focus-visible .home-feat__media img,
  .product-card:hover .product-card__img,
  .product-card:focus-visible .product-card__img,
  .product-card:hover .product-card__media img { transform: none; filter: none; }
  .product-item:hover .product-item__media::after,
  .home-feat:hover .home-feat__media::after,
  .product-card:hover .product-card__media:has(img)::before { animation: none; opacity: 0; }
  .product-item:hover .product-item__iconwrap,
  .product-item:hover .product-item__iconglow,
  .home-feat:hover .home-feat__ph svg { transform: none; filter: none; }
}

/* ============================================================================
   [البند 15] «شوهدت مؤخرًا» + زرّ العودة للأعلى
   ========================================================================== */

/* ── القسم: يعيد استخدام بطاقة .home-feat نفسها وسلّم أعمدتها، فلا مكوّن جديد
      ولا لغة بصرية جديدة — الفرق كلّه في العنوان وزرّ المسح. ── */
.rv-recent__clear {
  margin-top: 14px;
  font-size: 0.8rem; font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 9999px; padding: 6px 16px; cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.rv-recent__clear:hover {
  color: #fff; border-color: rgba(255, 26, 26, 0.45); background: rgba(255, 26, 26, 0.10);
}
.rv-recent__clear:focus-visible { outline: 2px solid var(--secondary-red); outline-offset: 3px; }

/* ── زرّ العودة للأعلى: الحلقة حوله شريط تقدّم حقيقي لما قُرئ من الصفحة ── */
.rv-top {
  position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: 1100;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(150deg, rgba(30, 18, 20, 0.96), rgba(13, 13, 15, 0.96));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 60, 60, 0.28);
  color: var(--silver);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.94);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.16, 1, .3, 1),
              visibility 0.3s, border-color var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.rv-top.is-on { opacity: 1; visibility: visible; transform: none; }
.rv-top:hover {
  color: #fff; border-color: rgba(255, 26, 26, 0.65);
  box-shadow: 0 12px 30px rgba(255, 26, 26, 0.22);
}
.rv-top:focus-visible { outline: 2px solid var(--secondary-red); outline-offset: 3px; }
.rv-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rv-top__track, .rv-top__bar { fill: none; stroke-width: 2; }
.rv-top__track { stroke: rgba(255, 255, 255, 0.10); }
.rv-top__bar { stroke: var(--secondary-red); stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; }
.rv-top__arrow { position: relative; width: 18px; height: 18px; }

/* إشعار «أُضيف إلى السلة» يشغل الزاوية نفسها — الزرّ ينسحب ما دام ظاهرًا */
body:has(.cart-toast.is-open) .rv-top { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 640px) {
  .rv-top { width: 42px; height: 42px; inset-inline-end: 16px; inset-block-end: 16px; }
  .rv-top__arrow { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-top { transition: opacity 0.2s ease, visibility 0.2s; transform: none; }
  .rv-top.is-on { transform: none; }
  .rv-top__bar { transition: none; }
}

/* ============================================================================
   مساحات لمس كافية على الأجهزة اللمسية (مراجعة 2026-08-03)
   ----------------------------------------------------------------------------
   التدقيق أظهر أزرارًا مرئية بارتفاع 20–30px: مفتاح اللغة والعملة والسلة
   والحساب في الهيدر، وروابط المسار، وأزرار «نسخ» و«تفاصيل الطلب».
   الحلّ **يوسّع منطقة اللمس لا الشكل**: طبقة ::after شفّافة تمتدّ خارج الزرّ
   (نفس أسلوب .footer-mail__copy القائم) فلا يتغيّر مظهر الموقع بشيء، ولا
   يتغيّر شيء على الفأرة الدقيقة — القاعدة كلّها داخل استعلام اللمس.
   التمدّد رأسيّ أساسًا وأفقيّ بمقدار ضئيل كي لا يبتلع زرٌّ جارَه في الهيدر.
   ========================================================================== */
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  #langSwitcherBtn, #curSwitcherBtn,
  .header-cart-link, .header-auth-link,
  .rv-crumbs__link, .rv-copy, .order-act {
    position: relative;
  }
  #langSwitcherBtn::after, #curSwitcherBtn::after,
  .header-cart-link::after, .header-auth-link::after,
  .rv-crumbs__link::after, .rv-copy::after, .order-act::after {
    content: ''; position: absolute;
    inset-block: -10px; inset-inline: -4px;
    /* لا تلتقط الحدث فوق العنصر نفسه فقط — تمتدّ لتصير 40px+ ارتفاعًا */
  }
  .rv-crumbs__link::after { inset-block: -11px; inset-inline: -6px; }
  .rv-copy::after, .order-act::after { inset-block: -8px; inset-inline: -6px; }
}

/* حالة «لا توجد فاتورة»: عنوان وسطر تفسير وطريق عودة — لا صفحة صمّاء.
   ★ ورقة الفاتورة بيضاء (.receipt { background:#fff }) فالألوان هنا داكنة
     عمدًا، وزرّ العودة أحمر الهوية لا فضّيًا — الفضّي يذوب في البياض. */
.receipt__empty { text-align: center; padding: 46px 20px 54px; }
.receipt__empty h1 {
  font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: #18181b; margin-bottom: 10px;
}
.receipt__empty p { color: #52525b; margin-bottom: 24px; }
.receipt__empty .btn {
  background: linear-gradient(135deg, var(--primary-red), var(--secondary-red));
  border: 1px solid rgba(122, 0, 0, 0.55);
  color: #fff; box-shadow: 0 6px 18px rgba(122, 0, 0, 0.28);
}
.receipt__empty .btn:hover { filter: brightness(1.08); }

/* ============================================================================
   شكل الأزرار: حلقيّ (pill) على مثال زرّ «Shop» في الهيدر — قرار المالك 2026-08-04
   ----------------------------------------------------------------------------
   يتغيّر **الشكل وحده**: نصف القطر 9999px. لا لون ولا حجم ولا حشوة ولا ظلّ
   ولا خطّ — المرجع .nav-pill في الهيدر (border-radius: 9999px).
   ★ المحدِّدات مضاعَفة (.btn.btn) كي تعلو على أدوات Tailwind المحقونة وقت
     التشغيل، وإلا عاد بعض الأزرار مستطيلًا بلا سبب ظاهر.
   ★ ما ليس زرًّا يبقى كما هو عمدًا: بطاقات طرق الدفع، صفوف القوائم المنسدلة،
     صفوف سايدبار الحساب، حقول الإدخال، البطاقات واللوحات.
   ========================================================================== */
.btn.btn,
.product-item__btn.product-item__btn,
.rv-more.rv-more,
.support-channel.support-channel,
.filter-reset.filter-reset,
.rv-copy.rv-copy,
.order-act.order-act,
.footer-mail__copy.footer-mail__copy,
.main-menu-btn.main-menu-btn,
.main-menu-close.main-menu-close,
.dl-gate__close.dl-gate__close,
.google-signin-btn.google-signin-btn,
#langSwitcherBtn, #curSwitcherBtn,
#clearCartBtn,
.cart-qty {
  border-radius: 9999px;
}

/* الأزرار الصغيرة جدًّا تحتاج هامشًا جانبيًّا أوسع قليلًا كي لا يلامس النصّ
   انحناء الحافّة — الارتفاع والألوان كما هي */
.rv-copy.rv-copy { padding-inline: 11px; }
.order-act.order-act { padding-inline: 14px; }
.filter-reset.filter-reset { padding-inline: 14px; }
.support-channel.support-channel { padding-inline: 15px; }

/* ======================================================================
   Optimizer plans — four cards, one row, identical size.
   The shared .plans-grid rules cap every card at max-width:340px and use
   flex-basis percentages, so four cards need 4x340 + gaps = ~1456px before
   they fit; anything narrower drops Pro onto a second row on its own.
   A grid of four equal 1fr columns fits whatever width is available, and
   align-items:stretch makes all four the same height as well.
   ====================================================================== */
#opt-plans{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.25rem;
  align-items:stretch;
  justify-content:initial;
}
#opt-plans > *{
  max-width:none !important;
  width:100%;
  flex:none !important;
  margin:0;
}
/* The price is text-5xl; at a quarter of the row that overflows on smaller
   laptops, so let it scale with the column instead of wrapping. */
#opt-plans .text-5xl{ font-size:clamp(1.75rem,2.6vw,3rem); line-height:1.1; }

@media (max-width:1100px){
  #opt-plans{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
}
@media (max-width:620px){
  #opt-plans{ grid-template-columns:1fr; }
}