/* ════════════════════════════════════════════════════════════════════════════
 * 108-rx-theme-harmony.css — توافق خانة الطلب مع الثيم + تكبير العناوين (بعد 107)
 * ────────────────────────────────────────────────────────────────────────────
 * الغرض:
 *   خانة «طلب المادة» (الهيرو + المربّعان) صُمّمت في 103 بألوان بنفسجية صريحة
 *   فتصطدم فوق ثيم العلا الذهبي والفاتح. هنا نحوّل تلك الألوان إلى «واعية بالثيم»
 *   عبر متغيّرات محليّة، ونكبّر عنوانَي «دروس الجامعة»/«دورات تطويرية»/«طلب جديد»
 *   قليلاً — بلا لمس منطق ولا 103، تجاوز لوني/مقاسي فقط عبر هذه الطبقة.
 *
 * آلية العمل:
 *   • متغيّرات محليّة بقيم بنفسجية افتراضية على :root (= مظهر purple الحالي)، ثم
 *     تجاوزها لكل ثيم عبر :root[data-theme="alula"|"light"]. الثيم purple (الذي لا
 *     يطابق أياً من التجاوزين) يقع على قيم :root الافتراضية ⇒ صفر انحدار عليه.
 *   • قواعد الاستهلاك محدّدات single-class (0,1,0) = نفس قوة 103، ومحمّلة بعده
 *     ⇒ تتغلّب بنظافة. الهوفر (0,1,1) كذلك.
 *   • السكريم يبقى تدرّجاً مزدوجاً RTL (أقوى من جهة النص)؛ نُعيد بناءه بلون القاعدة
 *     --rx-scrim-rgb لكل ثيم مع الحفاظ على نفس شدّات 103.
 *
 * خطة الإزالة: احذف سطر <link> الخاص به من index.html + هذا الملف ⇒ رجوع كامل.
 * ════════════════════════════════════════════════════════════════════════════ */


/* ─── (0) المتغيّرات — الافتراضي بنفسجي (purple)، ثم تجاوز alula/light ──────────
 * --rx-card-grad : تدرّج خلفية الهيرو/البطاقة/الميديا البديل (يظهر تحت الصورة وعند فشلها).
 * --rx-scrim-rgb : لون قاعدة السكريم (نُبنى منه التدرّج المزدوج بشدّات 103 الثابتة).
 * --rx-desc-color: لون نص الوصف.  --rx-title-color: لون العنوان.
 * --rx-hover-bd  : حدّ البطاقة عند الهوفر.
 * --rx-arrow-*   : خلفية/حدّ/لون دائرة السهم (ذهبية في العلا، بنفسجية في purple/light). */
:root {
  --rx-card-grad: linear-gradient(135deg, #2a1259 0%, #4c1d95 60%, #1a0d33 100%);
  --rx-scrim-rgb: 12, 6, 26;
  --rx-desc-color: #ecdcff;
  --rx-title-color: #ffffff;
  --rx-hover-bd: rgba(168, 85, 247, .55);
  --rx-arrow-bg: rgba(168, 85, 247, .18);
  --rx-arrow-bd: rgba(168, 85, 247, .45);
  --rx-arrow-fg: #c084fc;
}

/* العلا — دافئ ذهبي/بنّي (السهم يبقى ذهبياً كما هو الأصل). */
:root[data-theme="alula"] {
  --rx-card-grad: linear-gradient(135deg, #3a230f 0%, #6e3d1a 55%, #1d150d 100%);
  --rx-scrim-rgb: 14, 9, 3;
  --rx-desc-color: #f0e6d4;
  --rx-title-color: #ffffff;
  --rx-hover-bd: rgba(224, 168, 91, .55);
  --rx-arrow-bg: rgba(251, 191, 36, .18);
  --rx-arrow-bd: rgba(251, 191, 36, .45);
  --rx-arrow-fg: #fbbf24;
}

/* الفاتح — وشاح فاتح + نص غامق مقروء + سهم بنفسجي غامق. */
:root[data-theme="light"] {
  --rx-card-grad: linear-gradient(135deg, #efe9f7 0%, #e6ddf3 60%, #f6f3fb 100%);
  --rx-scrim-rgb: 245, 247, 250;
  --rx-desc-color: #3a2b52;
  --rx-title-color: #2a1a4a;
  --rx-hover-bd: rgba(124, 58, 237, .45);
  --rx-arrow-bg: rgba(124, 58, 237, .12);
  --rx-arrow-bd: rgba(124, 58, 237, .40);
  --rx-arrow-fg: #7c3aed;
}


/* ─── (1) الهيرو ─────────────────────────────────────────────────────────────
 * تجاوز لوني فقط (الخلفية/السكريم/الوصف). العنوان يكبر في القسم (3). */
.rx-hero {
  background: var(--rx-card-grad);
}
/* السكريم يُعاد بناؤه للعلا فقط (بلون بنّي دافئ). البنفسجي (والافتراضي) لا يُلمَس ⇒
 * يبقى سكريم 103 الأصلي حرفياً (صفر انحدار على purple). الفاتح له تجاوزه أدناه. */
:root[data-theme="alula"] .rx-hero-scrim {
  /* تدرّج مزدوج RTL بنفس شدّات 103، بلون القاعدة الدافئ */
  background:
    linear-gradient(to left,
      rgba(var(--rx-scrim-rgb), 0) 30%,
      rgba(var(--rx-scrim-rgb), .62) 100%),
    linear-gradient(to top,
      rgba(var(--rx-scrim-rgb), .70) 0%,
      rgba(var(--rx-scrim-rgb), 0) 60%);
}
.rx-hero-desc {
  color: var(--rx-desc-color);
}


/* ─── (2) المربّعان الكبيران ──────────────────────────────────────────────────
 * تجاوز لوني: خلفية البطاقة + خلفية الميديا البديلة + السكريم + الوصف + السهم + الهوفر. */
.rx-choice-card {
  background: var(--rx-card-grad);
}
.rx-choice-media {
  background: var(--rx-card-grad);
}
:root[data-theme="alula"] .rx-choice-scrim {
  background:
    linear-gradient(to top,
      rgba(var(--rx-scrim-rgb), .85) 0%,
      rgba(var(--rx-scrim-rgb), .15) 55%,
      rgba(var(--rx-scrim-rgb), .05) 100%),
    linear-gradient(to left,
      rgba(var(--rx-scrim-rgb), 0) 45%,
      rgba(var(--rx-scrim-rgb), .45) 100%);
}
.rx-choice-desc {
  color: var(--rx-desc-color);
}
/* أيقونة السقوط البديلة (عند غياب الصورة) — تتبع لون السهم فتبقى مقروءة في كل ثيم. */
.rx-choice-media.rx-noimg .rx-choice-fallback {
  color: var(--rx-arrow-fg);
}
.rx-choice-arrow {
  background: var(--rx-arrow-bg);
  border-color: var(--rx-arrow-bd);
  color: var(--rx-arrow-fg);
}
.rx-choice-card:hover {
  border-color: var(--rx-hover-bd);
}

/* الفاتح فقط — صور الطلب هنا «ثلجية» فاتحة مخصّصة (rx-*-light) ⇒ النص الغامق مقروء
 * أصلاً بتباين عالٍ. نكتفي بوشاح فاتح لطيف عند منطقة النص (يمين الهيرو/أسفل المربّع)
 * ك«لوحة» هادئة تُثبّت القراءة، مع إبقاء الثلج ظاهراً وجميلاً (لا نغرق الصورة). */
:root[data-theme="light"] .rx-hero-scrim {
  background:
    linear-gradient(to left,
      rgba(var(--rx-scrim-rgb), 0) 24%,
      rgba(var(--rx-scrim-rgb), .60) 100%),
    linear-gradient(to top,
      rgba(var(--rx-scrim-rgb), .30) 0%,
      rgba(var(--rx-scrim-rgb), 0) 55%);
}
:root[data-theme="light"] .rx-choice-scrim {
  background:
    linear-gradient(to top,
      rgba(var(--rx-scrim-rgb), .74) 0%,
      rgba(var(--rx-scrim-rgb), .26) 52%,
      rgba(var(--rx-scrim-rgb), .06) 100%),
    linear-gradient(to left,
      rgba(var(--rx-scrim-rgb), 0) 45%,
      rgba(var(--rx-scrim-rgb), .32) 100%);
}
/* في الفاتح: 103 يضع ظلّ نصّ داكناً (لأبيض على داكن) يُعكّر النصَّ الغامق الجديد.
 * نستبدله بهالة فاتحة رقيقة ⇒ نص غامق حادّ ومقروء فوق الوشاح الفاتح (تجاوز لوني فقط). */
:root[data-theme="light"] .rx-hero-title,
:root[data-theme="light"] .rx-hero-desc,
:root[data-theme="light"] .rx-choice-title,
:root[data-theme="light"] .rx-choice-desc {
  text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}


/* ─── (3) تكبير العناوين وتناسقها عبر الأجهزة ────────────────────────────────
 * سقوف أكبر بلا كسر على الصغير (clamp min مرفوع باعتدال). لون العنوان واعٍ بالثيم. */
.rx-choice-title {
  font-size: clamp(1.18rem, 1rem + 1.1vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rx-title-color);
}
.rx-choice-desc {
  font-size: clamp(0.82rem, 0.78rem + 0.35vw, 0.95rem);
}
.rx-hero-title {
  font-size: clamp(1.45rem, 1.05rem + 2vw, 2rem);
  color: var(--rx-title-color);
}
/* نوسّع منطقة النص السفلية للمربّع قليلاً حتى لا يلتصق العنوان الأكبر بالحافة. */
.rx-choice-body {
  bottom: clamp(12px, 3.5vw, 18px);
}