/* ============================================================
   EduCreate — المتجر العام (كتالوج المنتجات وصفحة التفاصيل)
   يُحمَّل في صفحات Shop وحدها عبر @section Styles، على نمط public-subscriber.css.
   كل الألوان من رموز colors_and_type.css — لا قيمة لونية مباشرة هنا.
   ============================================================ */

/* ---------- شبكة الكتالوج ---------- */
.ec-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.ec-shop-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-paper);
  border: 1px solid var(--ec-ink-200);
  border-radius: var(--card-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-standard), box-shadow 220ms, border-color 220ms;
}

.ec-shop-card:hover,
.ec-shop-card:focus-visible {
  transform: translateY(var(--card-lift));
  box-shadow: var(--shadow-md);
  border-color: var(--ec-blue-600);
}

/* البطاقة كلها رابط، فلا بد من مؤشّر تركيز للوحة المفاتيح — نفس حلقة بطاقة الأعمال. */
.ec-shop-card:focus-visible { outline: 3px solid var(--ec-sky-500); outline-offset: 3px; }

.ec-shop-card.featured { border-color: var(--ec-gold-500); }

.ec-shop-thumb {
  position: relative;
  aspect-ratio: var(--card-media-ratio);
  background: var(--bg-brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ec-shop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-standard);
}
.ec-shop-card:hover .ec-shop-thumb img { transform: scale(1.06); }

.ec-shop-thumb .ec-shop-thumb-fallback {
  font-size: 34px;
  color: var(--ec-blue-300);
}

.ec-shop-badges {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
}

.ec-shop-badge {
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-brand);
  color: var(--fg-inverse);
}

.ec-shop-badge.gold { background: var(--ec-gold-500); color: var(--ec-ink-900); }
.ec-shop-badge.sky { background: var(--ec-sky-500); color: var(--ec-ink-900); }

.ec-shop-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  flex: 1;
}

.ec-shop-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--fg-brand);
}

.ec-shop-body h4 {
  /* تصريح صريح رغم إصلاح ‎--font-display‎ في colors_and_type: عنوان المنتج هو أول ما
     يُقرأ في البطاقة، ولا يجوز أن يعتمد على متغيّر قد يتغيّر معناه لاحقًا. */
  font-family: var(--font-arabic);
  margin: 0;
  font-size: var(--card-title-size);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--fg-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ec-shop-card:hover .ec-shop-body h4 { color: var(--ec-blue-600); }

.ec-shop-body p {
  font-family: var(--font-arabic);
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.ec-shop-meta {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
}

.ec-shop-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ec-ink-100);
}

.ec-shop-price {
  font-size: var(--fs-h4);
  font-weight: 800;
  color: var(--fg-brand);
}

.ec-shop-price-old {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  text-decoration: line-through;
}

.ec-shop-price-free { color: var(--ec-sky-700); }

/* سطر الإجراء — البطاقة كانت بلا أي نداء للفعل، والرابط الوحيد فيها ضمني. */
.ec-shop-more {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ec-ink-100);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-arabic);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--ec-blue-600);
}
.ec-shop-more svg { transition: transform 200ms var(--ease-standard); }
/* السهم يشير يمينًا في الاتجاهين — نفس عرف ‎.ec-work-more‎. */
.ec-shop-card:hover .ec-shop-more svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .ec-shop-card, .ec-shop-thumb img, .ec-shop-more svg { transition: none; }
  .ec-shop-card:hover { transform: none; }
  .ec-shop-card:hover .ec-shop-thumb img { transform: none; }
  .ec-shop-card:hover .ec-shop-more svg { transform: none; }
}

/* ---------- صفحة التفاصيل ---------- */
.ec-shop-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

/* عمود الشبكة حدّه الأدنى ‎auto‎ أي ‎min-content‎، فأيّ رمز طويل بلا فواغر داخله —
   فاصل «━━━» في الوصف، رابط طويل، عنوان درس بلا مسافات — يفرض عرضه على العمود
   ويجرّ الصفحة كلها إلى فيض أفقي. القياس على الجوال كان: العمود ‎544px‎ داخل حاوية
   ‎350px‎. ‎min-width: 0‎ يقطع هذا الطريق من أصله. */
.ec-shop-detail > * { min-width: 0; }

.ec-shop-detail-media {
  width: 100%;
  aspect-ratio: var(--card-media-ratio);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-brand-soft);
  margin-bottom: var(--sp-5);
}

/* نفس قصّ البطاقة: ما تراه في معاينة الأدمن هو ما يظهر هنا وفي الشبكة سواء. */
.ec-shop-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ec-shop-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ec-ink-900);
  margin-bottom: var(--sp-5);
}

.ec-shop-video iframe,
.ec-shop-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- نصّ الوصف المنسّق (DescriptionFormatter) ----------
   كان هنا ‎white-space: pre-line‎: كسور الأسطر التي كتبها المؤلف على شاشة عريضة
   تبقى مفروضة على الجوال، فيلتفّ كل سطر مرّتين ثم يُقطع. صار الوصف يصل مبنيًّا
   فقراتٍ وعناوينَ وقوائم، فيلتفّ النصّ على عرض الشاشة الفعليّ. */
.ec-shop-desc {
  line-height: 1.9;
  font-size: var(--fs-body);
  color: var(--fg-2);
  /* شبكة أمان لما لا يستطيع المنسّق تفكيكه: رابط طويل أو رمز متّصل. */
  overflow-wrap: anywhere;
}

.ec-shop-desc > * { margin: 0; }
.ec-shop-desc > * + * { margin-top: var(--sp-4); }

.ec-rt-head {
  font-family: var(--font-arabic);
  font-size: var(--fs-h5);
  font-weight: 800;
  line-height: 1.5;
  color: var(--fg-1);
}
.ec-shop-desc > .ec-rt-head { margin-top: var(--sp-6); }

.ec-rt-rule { border: 0; border-top: 1px solid var(--ec-ink-200); }
.ec-shop-desc > .ec-rt-rule { margin: var(--sp-6) 0; }

/* نقطة التعداد مرسومة لا محرفًا: الأسطر الملتفّة تحتها تصطفّ مع النصّ لا مع النقطة،
   وهو الفرق الذي يجعل قائمة من خمسة بنود تُقرأ على شاشة ‎390px‎. */
.ec-rt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ec-rt-list > li { position: relative; padding-inline-start: 1.5em; }
.ec-rt-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ec-blue-600);
}

.ec-rt-note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  color: var(--fg-3);
}

.ec-shop-buy {
  position: sticky;
  top: var(--sp-5);
  background: var(--bg-paper);
  border: 1px solid var(--ec-ink-200);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.ec-shop-buy .ec-shop-price { font-size: var(--fs-h2); }

.ec-shop-buy .ec-btn { width: 100%; justify-content: center; margin-top: var(--sp-4); }

.ec-shop-facts {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ec-shop-facts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-body-sm);
  padding: 8px 0;
  border-bottom: 1px dashed var(--ec-ink-100);
}

.ec-shop-facts li:last-child { border-bottom: 0; }
.ec-shop-facts .label { color: var(--fg-3); }
.ec-shop-facts .value { font-weight: 700; color: var(--fg-1); }

/* محدّد كمية الخدمة في بطاقة الشراء (م3) — يظهر للنوع Service وحده. */
.ec-shop-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--fg-2);
}

.ec-shop-qty select {
  font: inherit;
  font-weight: 700;
  color: var(--fg-1);
  padding: 8px 12px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--bg-1);
  min-width: 5rem;
}

.ec-shop-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--fg-3);
  text-align: center;
}

/* ---------- شريط الشراء الملتصق (جوال) ----------
   على شاشة ‎390px‎ تقع بطاقة الشراء بعد ‎3300px‎ من الوصف والمنهج: يقرأ الزائر صفحة
   البيع كاملةً دون أن يرى السعر ولا زرّ الشراء. الشريط يُبقيهما في المتناول، على
   نمط ‎.ec-pay-bar‎ في مسار الدفع. */
.ec-shop-buybar { display: none; }

@media (max-width: 860px) {
  .ec-shop-detail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .ec-shop-buy { position: static; }

  .ec-shop-buybar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 95;                 /* فوق زرّ واتساب العائم (90) */
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-paper);
    border-top: 1px solid var(--border-1);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.10);
  }

  .ec-shop-buybar-price { display: flex; flex-direction: column; line-height: 1.25; flex: 0 0 auto; }
  .ec-shop-buybar-price .label { font-size: 11.5px; color: var(--fg-3); }
  .ec-shop-buybar-price .value { font-size: 17px; font-weight: 800; color: var(--fg-brand); white-space: nowrap; }
  .ec-shop-buybar-price .value.ec-shop-price-free { color: var(--ec-sky-700); }
  .ec-shop-buybar .ec-btn { flex: 1 1 auto; justify-content: center; min-height: 48px; margin: 0; }

  /* الشريط يغطّي قاع المستند، فيُفسح له الذيلُ مكانًا؛ و‎:has‎ تقصر القاعدة على صفحة
     التفاصيل وحدها، إذ يُحمَّل هذا الملف في كتالوج المتجر أيضًا. */
  body:has(.ec-shop-buybar) { padding-bottom: 84px; }
  body:has(.ec-shop-buybar) .ec-wa-fab { inset-block-end: calc(84px + 12px); }
}

/* ---------- تفاصيل المنتج على الشاشة الضيّقة ---------- */
@media (max-width: 560px) {
  /* حشو المقطع ‎56px 20px‎ يقتطع ‎40px‎ من ‎390px‎؛ والعنوان ‎26px‎ على أربعة أسطر
     يدفع الصورة والسعر خارج الطيّة قبل أن يُقرأ حرف. */
  .ec-shop-detail { gap: var(--sp-4); }
  .ec-shop-desc { font-size: 15.5px; line-height: 1.85; }
  .ec-rt-head { font-size: 17px; }
  .ec-shop-buy { padding: var(--sp-4); }
  .ec-shop-buy .ec-shop-price { font-size: var(--fs-h3); }
  .ec-shop-facts li { padding: 7px 0; font-size: 13.5px; }

  /* المنهج: حشو ‎18px‎ على الجانبين يقتطع من عرض عنوان الدرس، وهو النصّ الوحيد الذي
     يبيع القسم. السطر يلتفّ أصلًا التفافًا سليمًا (العنوان ثم المدّة والشارة تحته)،
     فلا يُعاد ترتيبه — يُوسَّع له المكان فقط. */
  .ec-curriculum { margin-top: var(--sp-6); }
  .ec-curriculum-head h3 { font-size: 18px; }
  .ec-curriculum-section > summary { padding: 12px 14px; gap: var(--sp-2); }
  .ec-curriculum-summary,
  .ec-curriculum-lessons { padding-inline: 14px; }
}

/* ---------- تجاوب شبكة الكتالوج ----------
   هنا لا في site-responsive.css: shop.css يُحمَّل بعده عبر ‎@section Styles‎، وكلا
   المحدِّدَين بأولوية واحدة — فقاعدة الملف المتجاوب كانت تُهزَم صامتةً. */
@media (max-width: 960px) {
  .ec-shop-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
}

@media (max-width: 560px) {
  .ec-shop-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  /* بطاقة بعرض الشاشة: عنوان أهدأ وحشو أضيق حتى لا تطغى البطاقة على الصفحة. */
  .ec-shop-card { --card-title-size: 17px; }
  .ec-shop-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}

/* ---------- Course curriculum tree (Shop/Details) ---------- */
.ec-curriculum { margin-top: var(--sp-7); }
.ec-curriculum-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.ec-curriculum-head h3 { font-family: var(--font-arabic); font-size: 20px; font-weight: 800; color: var(--ec-ink-900); margin: 0; }
.ec-curriculum-head span { font-size: 13px; color: var(--fg-3); }

.ec-curriculum-section {
  border: 1px solid var(--border-1); border-radius: 14px;
  background: #fff; margin-bottom: var(--sp-3); overflow: hidden;
}
.ec-curriculum-section > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-weight: 800; color: var(--ec-ink-900);
}
.ec-curriculum-section > summary::-webkit-details-marker { display: none; }
.ec-curriculum-section > summary:hover { background: var(--ec-ink-050); }
.ec-curriculum-section-meta { font-size: 12.5px; font-weight: 600; color: var(--fg-3); }
.ec-curriculum-summary { padding: 0 18px 12px; font-size: 13.5px; color: var(--fg-2); margin: 0; }

.ec-curriculum-lessons { list-style: none; margin: 0; padding: 0 18px 14px; }
.ec-curriculum-lesson { border-top: 1px solid var(--border-1); padding: 12px 0; }
.ec-curriculum-lesson:first-child { border-top: 0; }
.ec-curriculum-lesson-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec-curriculum-lesson-ic { width: 20px; text-align: center; color: var(--fg-3); flex: 0 0 auto; }
.ec-curriculum-lesson.is-preview .ec-curriculum-lesson-ic { color: var(--ec-blue-600); }
.ec-curriculum-lesson-title { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--fg-1); }
/* الدرس المقفل يبقى مقروءًا لا مطموسًا: عنوانه نفسه هو عنصر البيع. */
.ec-curriculum-lesson.is-locked .ec-curriculum-lesson-title { color: var(--fg-2); }
.ec-curriculum-lesson-time { font-size: 12.5px; color: var(--fg-3); flex: 0 0 auto; }
.ec-curriculum-free {
  font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: var(--ec-blue-050); color: var(--ec-blue-700); flex: 0 0 auto;
}

.ec-curriculum-player { margin-top: 12px; }
.ec-curriculum-body { margin: 12px 0 0; font-size: 14px; line-height: 1.9; color: var(--fg-2); }
.ec-curriculum-body img { max-width: 100%; height: auto; }
.ec-curriculum-unavailable { color: var(--fg-3); font-size: 13px; }