/*
  ==============================================
  التنسيقات الأساسية للـ Section
  (هذه هي الحاوية البيضاء الكبيرة الجديدة)
  ==============================================
*/
.payment-section {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  direction: rtl; /* اتجاه الكتابة من اليمين لليسار */

  /* 💥 التعديلات الجديدة: إنشاء المستطيل الأبيض */
  max-width: 1200px; /* عرض أقصى كبير */
  width: 95%; /* يترك مسافة صغيرة من اليمين واليسار */
  margin: 40px auto; /* لتوسيط الحاوية */
  padding: 20px 0; /* مسافة داخلية (لإبعاد المحتوى عن الحواف) */

  background: white; /* خلفية بيضاء */
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* إضافة الظل المطلوب */
}

.payment-section .payment-title {
  text-align: center;
  font-size: 20px;
  /* 🔴 لون النص الأحمر المطلوب */
  color: #ff0000;
  margin-bottom: 30px;
  font-weight: bold;
}

/*
  ==============================================
  تصميم السلايدر (تم إرجاعه ليكون شفافاً داخل الحاوية البيضاء)
  ==============================================
*/
.payment-section .slider {
  /* عرض 100% بالنسبة للحاوية الأب (.payment-section) */
  width: 100%;
  height: 120px;
  margin: auto;
  overflow: hidden;
  position: relative;

  /* الحفاظ على الشفافية وإزالة الظل، لأن الظل والخلفية أصبحا على الـ section */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.payment-section .slide-track {
  /* (1) إعدادات الحركة */
  animation: scroll 40s linear infinite; /* 40s السرعة الافتراضية */
  display: flex;
  align-items: center;
  height: 100%;

  /* (2) حساب عرض التراك بناءً على 10 عناصر أصلية */
  width: calc(160px * 20);

  will-change: transform;
}

.payment-section .slide {
  height: 100%;
  width: 140px; /* عرض ثابت لكل عنصر */
  padding: 0 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-section .slide img {
  max-width: 100%;
  max-height: 60px;
  display: block;
  object-fit: contain;
}

/*
  ==============================================
  الرسوم المتحركة (Keyframes) - لـ RTL
  ==============================================
*/
@keyframes scroll {
  0% {
    transform: translateX(calc(160px * 10));
  }
  100% {
    transform: translateX(0);
  }
}

/*
  ==============================================
  التجاوبية (Responsiveness)
  ==============================================
*/
/* لأجهزة الموبايل - شاشات صغيرة (أقل من 600px) */
@media (max-width: 600px) {
  /* تعديل الحاوية البيضاء على الموبايل */
  .payment-section {
    width: 100%;
    padding: 10px 0;
    margin: 20px auto;
    border-radius: 0;
  }

  .payment-section .payment-title {
    font-size: 18px;
  }
  .payment-section .slider {
    height: 80px;
  }
  .payment-section .slide {
    width: 100px;
  }
  .payment-section .slide img {
    max-height: 40px;
  }

  /* تعديل Keyframes ليناسب العرض الجديد */
  @keyframes scroll {
    /* العرض الجديد (100px) + المسافة (20px) = 120px */
    0% {
      transform: translateX(calc(120px * 10));
    }
    100% {
      transform: translateX(0);
    }
  }
  /* تعديل عرض الـ track ليناسب العرض الجديد */
  .payment-section .slide-track {
    width: calc(120px * 20);
  }
}