/* =============================================================================
 * Anied USP Bar — Style (نسخه‌ی نهایی)
 * =============================================================================
 * !! نکته‌ی حیاتی درباره‌ی جهت !!
 * سایت به‌طور کلی RTL هست، ولی این بخش («.anied-usp-section») عمداً کاملاً
 * LTR نگه داشته شده. دلیلش: در یک فلکس‌کانتینر RTL، آیتم اول (اولین بچه‌ی
 * DOM) در سمت راست می‌شینه و آیتم‌های بعدی به چپ ادامه پیدا می‌کنن — یعنی
 * آیتم‌های آخر از همون ابتدا فیزیکاً سمت چپ (بیرون از دید) هستن. حرکت به چپ
 * فقط اونا رو دورتر می‌کنه و هیچ‌وقت به دید نمیارتشون (نصف آیتم‌ها گم می‌شن).
 *
 * با LTR صریح، آیتم اول سمت چپ می‌شینه و آیتم‌های بعدی به راست ادامه پیدا
 * می‌کنن — دقیقاً چیدمانی که برای حرکتِ translateX(منفی) لازمه (مثل هر
 * marquee استاندارد در دنیا). فارسی بودن متن مشکلی نداره چون هر آیتم به‌طور
 * مستقل direction:rtl داره؛ این فقط چیدمانِ فیزیکیِ کل ردیف رو کنترل می‌کنه.
 * ============================================================================= */

.anied-usp-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 10px;
  overflow: hidden;
  direction: ltr; /* کل بخش LTR — این‌جا از RTL سایت جدا می‌شیم */
  mask: linear-gradient(to right, transparent, #000 5% 95%, transparent);
    
}

.anied-usp-viewport {
  width: 100%;
  overflow: hidden;
}

.anied-usp-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: anied-usp-marquee 60s linear infinite;
  will-change: transform;
  /* توقف روی هاور عمداً غیرفعاله — طبق درخواست، حرکت هیچ‌وقت متوقف نمی‌شه */
}

@keyframes anied-usp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* دسترس‌پذیری: کاربرانی که تنظیمات سیستم‌شون «کاهش حرکت» رو خواسته
   (مثلاً مبتلا به vestibular disorder)، اصلاً انیمیشن رو نبینن */
@media (prefers-reduced-motion: reduce) {
  .anied-usp-track {
    animation: none;
    transform: translateX(0);
  }
}

/* --- آیتم --- */
.anied-usp-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 64px; /* فاصله‌ی دوبرابرشده بین آیتم‌ها؛ جداکننده عمداً حذف شده */
  flex: 0 0 auto;
  direction: rtl; /* محتوای هر آیتم (آیکن + متن) راست‌چین بمونه */
}

.anied-usp-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.anied-usp-icon img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  /* سایه‌ی نرم آبی زیر آیکن تا روی پس‌زمینه‌ی روشن هم شناور دیده بشه */
  filter: drop-shadow(0 3px 8px rgba(0, 80, 160, 0.20));
}

.anied-usp-text {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
}

.anied-usp-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--anied-text, #0C0A09);
  line-height: 1.4;
  white-space: nowrap;
}

.anied-usp-subtitle {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--anied-text-muted, #6B7280);
  line-height: 1.4;
  white-space: nowrap;
}

/* =============================================================================
 * ریسپانسیو
 * ============================================================================= */

/* --- تبلت (۷۶۸ تا ۱۴۰۰ پیکسل) --- */
@media (min-width: 768px) and (max-width: 1399px) {
  .anied-usp-icon { height: 54px; }
  .anied-usp-title { font-size: 15px; }
  .anied-usp-subtitle { font-size: 13px; }
  .anied-usp-item { padding: 0 48px; }
  .anied-usp-track { animation-duration: 50s; }
}

/* --- موبایل (کمتر از ۷۶۸ پیکسل) --- */
@media (max-width: 767px) {
  .anied-usp-section { padding: 20px 5px; }
  .anied-usp-icon { height: 46px; }
  .anied-usp-title { font-size: 14px; }
  .anied-usp-subtitle { font-size: 12.5px; }
  .anied-usp-item { padding: 0 36px; gap: 12px; }
  .anied-usp-track { animation-duration: 42s; }
}

/* --- دسکتاپ وایده (بیش از ۱۴۰۰ پیکسل) — آیکن‌ها و متن بزرگ‌تر که روی
   صفحه‌های بزرگ (۲۰۰۰px+) خیلی کوچیک به نظر نرسه --- */
@media (min-width: 1400px) {
  .anied-usp-icon { height: 68px; }
  .anied-usp-title { font-size: 17px; }
  .anied-usp-subtitle { font-size: 14.5px; }
  .anied-usp-item { padding: 0 80px; }
  .anied-usp-track { animation-duration: 70s; }
}
