/*
 * أقسام نطاقات العمل المشتركة (bs-scope-*).
 *
 * تُحمَّل مع كل ثيم، فيجب أن تكون محايدة تماماً:
 *   - لا تلمس أي صنف لا تبدأ بادئته bs-scope-
 *   - الألوان من متغيّرات CSS مع بدائل محسوبة، فتتبع لون الثيم إن وُجد
 *   - لا تعتمد على شبكة Bootstrap: الشبكة هنا CSS Grid مستقلّة
 *
 * وحدها .container مشتركة مع الثيم — موجودة في كل الثيمات الأربعة عشر.
 */

.bs-scope-section {
  --bs-scope-ink: #1d2130;
  --bs-scope-muted: #6b7280;
  --bs-scope-line: rgba(0, 0, 0, .09);
  --bs-scope-card: #fff;
  --bs-scope-accent: var(--main-color, #2d5bff);
  --bs-scope-radius: 10px;

  padding: 70px 0;
}

.bs-scope-section * {
  box-sizing: border-box;
}

/* ---------- الترويسة ---------- */

.bs-scope-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 32px;
}

.bs-scope-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  color: var(--bs-scope-ink);
}

.bs-scope-more {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bs-scope-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.bs-scope-more:hover,
.bs-scope-more:focus {
  opacity: .75;
  color: var(--bs-scope-accent);
}

/* ---------- الشبكة ---------- */

.bs-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}

/* ---------- البطاقة ---------- */

.bs-scope-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bs-scope-card);
  border: 1px solid var(--bs-scope-line);
  border-radius: var(--bs-scope-radius);
  transition: transform .18s ease, box-shadow .18s ease;
}

.bs-scope-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .09);
}

.bs-scope-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bs-scope-line);
}

/* بديل aspect-ratio للمتصفّحات القديمة */
@supports not (aspect-ratio: 4 / 3) {
  .bs-scope-thumb {
    height: 0;
    padding-bottom: 75%;
  }

  .bs-scope-thumb img {
    position: absolute;
    inset: 0;
  }
}

.bs-scope-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bs-scope-badge,
.bs-scope-tag {
  position: absolute;
  top: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  color: #fff;
  background: var(--bs-scope-accent);
}

/* المنطق الاتجاهي بـ inset-inline كي ينقلب مع RTL بلا ملف منفصل */
.bs-scope-badge {
  inset-inline-end: 12px;
}

.bs-scope-tag {
  inset-inline-start: 12px;
}

.bs-scope-tag-flash {
  background: #e0393e;
}

.bs-scope-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.bs-scope-eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-scope-muted);
}

/*
 * العنوان يحجز سطرين دائماً ويُقصّ عندهما، فتتحاذى الأشرطة والأسعار أفقياً بين
 * بطاقات الصف الواحد بدل أن تتذبذب مع طول الاسم.
 */
.bs-scope-name {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bs-scope-name a {
  color: var(--bs-scope-ink);
  text-decoration: none;
}

.bs-scope-name a:hover,
.bs-scope-name a:focus {
  color: var(--bs-scope-accent);
}

.bs-scope-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--bs-scope-muted);
}

/* آخر عنصر في البطاقة يُثبَّت في الأسفل، فتتحاذى صفوف البيانات بين البطاقات. */
.bs-scope-body > :last-child {
  margin-top: auto;
}

.bs-scope-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bs-scope-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--bs-scope-ink);
}

.bs-scope-was {
  font-size: 14px;
  color: var(--bs-scope-muted);
}

/* ---------- شريط تقدّم الحملات ---------- */

.bs-scope-progress {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bs-scope-line);
}

.bs-scope-progress-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--bs-scope-accent);
}

/* ---------- الاستجابة ---------- */

@media (max-width: 767px) {
  .bs-scope-section {
    padding: 48px 0;
  }

  .bs-scope-title {
    font-size: 23px;
  }

  /*
   * عمودان على أصغر الشاشات: 375px تعطي 345px بعد حشو .container، فـ
   * 2×148 + 16 = 312 ويبقى متّسع. القيمة 165 كانت تفيض بثلاث بكسلات فتسقط
   * الشبكة إلى عمود واحد وتصير البطاقات ضخمة بلا داعٍ.
   */
  .bs-scope-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 16px;
  }

  .bs-scope-body {
    padding: 14px;
    gap: 8px;
  }

  .bs-scope-name {
    font-size: 15px;
  }

  .bs-scope-meta {
    font-size: 12px;
    gap: 4px 12px;
  }

  .bs-scope-amount {
    font-size: 16px;
  }
}