/* ═══════════════════════════════════════════════════════════════════════════════
   شارتا التقسيط — تمارا وتابي
   ───────────────────────────────────────────────────────────────────────────────
   كانت هذه القواعد مكتوبة مرّتين: في ‎course.html‎ وفي ‎cart.html‎. ولمّا لزمت
   صفحةَ المسار صارت ثلاثًا — فجُمعت هنا. وأي إصلاح لاحق يقع في مكان واحد.

   ⚠️ **يُحمَّل بعد ‎style.css‎ حتمًا.** فيه قاعدة تُلبس الخانة بطاقةً بيضاء بمجرّد أن
   يدخلها **أي** عنصر:

       #tamara-widget-slot:not(:empty) { background:#fff; padding:10px 12px; … }

   وُضعت لأن ودجت المزوّد يرسم نصًّا داكنًا يحتاج خلفية فاتحة ليُقرأ على موقع داكن.
   لكنها لا تعرف هل رسم المزوّد شيئًا أم لا — فبمجرّد إدراج الإطار تصير الخانة بيضاء
   ولو لم تعرض تمارا خطة تقسيط. فالمستطيل الأبيض كان من عندنا لا من تمارا.

   والعلاج هنا: البطاقة البيضاء لا تُلبس بمجرّد الامتلاء، بل حين تُعلن تمارا أن محتواها
   جاهز (الصنف ‎tamara-ready‎). والقاعدتان بنفس قوة محدِّدها، فتغلبانه بالترتيب وحده —
   بلا ‎!important‎ ولا تعديل في ‎style.css‎.

   ═══ ولماذا لا ‎font-size:0‎ ولا ‎line-height:0‎ ═══
   كانا هنا لمنع فراغ السطر أسفل الإطار. والإطار ‎display:block‎ أصلًا فلا فراغ عنده،
   أمّا الودجت الرسمي فيرسم **نصًّا في الصفحة نفسها** — فكان الصفر يُخفي نصّه ويُبقي
   ارتفاعه، فتظهر بطاقةٌ بيضاء فارغة: نفس المستطيل، بسببٍ آخر.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* العميل غير المؤهّل لا يُوعَد بتقسيطٍ لا يجده عند الدفع — والسمة وحدها لا تكفي لأن
   القواعد أدناه تُعطي الخانة ‎display‎ صريحًا. */
#tamara-widget-slot[hidden] { display: none !important; }

#tamara-widget-slot:not(:empty) { background: transparent; padding: 0; border-radius: 0; border: 0; }

/* ═══ البطاقة: أصغر وبلون الموقع الفاتح ═══
   كانت **بيضاء ناصعة بعرض بطاقة الشراء كاملًا**. فصارت تُحيط بالشارة وحدها
   (‎width:fit-content‎)، بحشوٍ أقلّ، ولونها ‎#eaf1ff‎ — أزرق الموقع الفاتح المستعمل في
   حبّات التصنيف وأيقونات البطاقات — بحدٍّ أزرق خفيف.

   ⚠️ وبقيت **فاتحة** لا كحليّة: ما بداخلها يرسمه سكربت تمارا لا نحن، ونصّه داكن.
   وهذا هو سبب وجود هذه القاعدة أصلًا (راجع رأس الملف). فالخلفية الداكنة تُخفي نصّهم. */
#tamara-widget-slot.tamara-ready {
  background: #eaf1ff; color: #16233f;
  border: 1px solid #cfdcf5;
  border-radius: 10px; padding: 6px 10px;
  width: fit-content; max-width: 100%;
}

/* الوسم غير معروف للمتصفّح فيُعامَل ‎inline‎ — والكتلة أضبط لقياس ارتفاعه ولتخطيطه */
#tamara-widget-slot tamara-widget { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════════
   لماذا اختلف صندوقا تمارا وتابي — والقياس من لقطة الموقع المنشور
   ───────────────────────────────────────────────────────────────────────────────
   قِيست ألوان البكسل من لقطة صاحب الموقع نفسها، فخرج الجواب معاكسًا للمتوقَّع:

       صندوق تمارا  ⇒  rgb(234,241,255)  =  #eaf1ff  ⇐ **لوننا نحن**
       صندوق تابي   ⇒  rgb(255,255,255)  =  أبيض     ⇐ **لونهم هم**

   أي أن ودجت **تمارا شفّافة** فيظهر لون حاويتنا تحتها كما أردنا، أمّا **تابي فيرسم
   بطاقةً بيضاء بداخل حاويتنا** فيغطّيها. وبان ذلك في المسح الأفقي للقطة:

       من ‎x=16‎ إلى ‎30‎   لوننا      ⇐ حشو حاويتنا ظاهر
       من ‎x=32‎ إلى ‎617‎  أبيض       ⇐ بطاقة تابي فوقه
       من ‎x=619‎ إلى ‎634‎ لوننا      ⇐ حشو حاويتنا من الطرف الآخر

   فالعلاج في تابي لا في تمارا: تُذاب خلفية بطاقته ليظهر لونُ حاويتنا — فيتطابقان.

   ⚠️ ‎> *‎ (الابن المباشر وحده) مقصودة: بطاقة تابي البيضاء هي الجذر الذي يزرعه
   سكربتهم في الخانة. ولو عمّمنا على كل الأحفاد لمُحيت **خلفية شعار تابي الأخضر**
   معها — وهو أعمق منها. فإن تبيّن لاحقًا أن بطاقتهم أعمق من مستوى واحد لم يتغيّر
   شيء ولم يُكسر شيء. */
#tabby-promo-slot > * {
  background: transparent !important;
  box-shadow: none !important;
}

/* الإطار الاحتياطي يبدأ بارتفاع صفر ومخفيًّا، ولا يُكشف إلا حين تُعلن تمارا جهوزيته.
   فإن لم يكن للمبلغ خطة تقسيط لا يظهر مستطيل أبيض ولا فراغ — لا يظهر شيء. */
.tamara-frame {
  display: block; width: 100%; border: 0; background: transparent;
  height: 0; visibility: hidden; transition: height .18s ease;
}
.tamara-frame.tamara-frame-ready { visibility: visible; }