/* ==========================================================================
   installment-options.css — التقسيط الميسّر (Installments: tabby / tamara)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   بطاقتان: شعار مزوّد الدفع + وصف + قيمة القسط.
   WC-NOTE: تُدار عبر إضافات tabby/tamara (widgets السعر) — قيمة القسط ديناميكية
   ========================================================================== */

.installments {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.installments__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  text-align: start; /* start = يمين في RTL */
}

.installments__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 480px) {
  .installments__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.installments__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* start = يمين في RTL */
  gap: var(--space-8);
  padding-block: var(--space-16);
  padding-inline: var(--space-16);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  text-align: start;
}
.installments__logo {
  height: var(--space-24);
  width: auto;
  object-fit: contain;
}
.installments__text {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}
.installments__amount {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--color-dark);
}
.installments__amount small {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}

/* بطاقة تحمل ويدجت المزوّد نفسه (tabby / tamara) بدل التقدير اليدوي.
   محتواها يُبنى بسكربت من سيرفرهم فلا نتحكم في داخله — دورنا الإطار فقط:
   نفس حدود البطاقة وخلفيتها، ونلغي حشوة الاتجاه لأن الويدجت يرسم حشوته. */
.installments__card--widget {
  justify-content: center;
  padding: var(--space-12);
}
/* الإضافة تضيف margin-bottom: 20px مضمّنًا على حاويتها — يكسر توسيط البطاقة */
.installments__card--widget > div[id^="tabbyPromo"] {
  margin-bottom: 0 !important;
  width: 100%;
}
.installments__card--widget tamara-widget {
  display: block;
  width: 100%;
}
/* مزوّد واحد فقط رسم ويدجته — لا نترك نصف الصف فارغًا (installments-widget.js) */
.installments__grid--single {
  grid-template-columns: 1fr;
}