/* ==========================================================================
   منصة تقدر — المكونات المشتركة بين الموقع العام والبوابات
   TQ-SHARED · مصدر واحد لأنماط ما يعرض في الجهتين

   ثلاث كتل تعيش هنا لأن **الوسم نفسه** يخرج في الجهتين من مساعد واحد:
     · `tqs_curriculum()`   — منهج الباقة: صفحة الباقة العامة و«محتوى باقتي»
     · `tqs_bank_block()`   — بيانات التحويل: شاشة الشراء وصفحة الاشتراك
     · `tqs_stat_strip()` و بطاقات الباقة — في الجهتين كذلك

   كانت هذه القواعد في `pages.css` وحدها، وهي لا تحمل على صفحات البوابة
   (بحق: `h1{font:…}` فيها يستولي على كل عنوان هناك). فكانت `/student/subscription`
   و`/student/bundle` تعرضان وسما بلا ورقة: قوائم عارية وأرقام متناثرة
   على صفحة بلا هيكل. والفصل يعطي الجهتين ما تحتاجه بلا ما لا تحتاجه.

   والتوكنات: الموقع يعرفها في `:root` من `taqdar.css`. والبوابة لا تعرفها،
   فتجسر أدناه إلى توكناتها هي (`--tq-*`) — الشكل واحد واللهجة لهجة المكان:
   أبيض ورمادي وتركوازي في البوابة، كريمي وذهبي في الموقع.
   ========================================================================== */

/* ── جسر التوكنات: للبوابة وحدها. الموقع لا يحمل هذه الكتلة أصلا لأن
      `.tq-body--portal` لا يوجد فيه. ─────────────────────────────────── */
.tq-body--portal{
  --cream:var(--tq-surface);
  --paper:var(--tq-ground);
  --beige:var(--tq-ground);
  --ink:var(--tq-text);
  --ink-2:var(--tq-text2);
  --ink-3:var(--tq-text3);
  --gold-line:var(--tq-line);
  --gold-line-soft:var(--tq-line);
  --gold-deep:var(--tq-teal);
  --gold-text:var(--tq-amber);
  --emerald:var(--tq-teal);
  --petrol-lift:var(--tq-navySoft);
  --sh-soft:var(--tq-shadow-soft);
  --t-route:var(--tq-motion-route);
  --t-entry:var(--tq-motion-elementEntry);
  --ease:var(--tq-ease-enter);
}

/* ══════════════════════════════════════════════════════════════════
   TQ-CURRIC · المنهج — مادة تطوى على وحداتها، بلا جافاسكربت
   ══════════════════════════════════════════════════════════════════ */
.curric{margin-block-start:16px;display:grid;gap:10px}
.curric__subj{background:var(--cream);border:1px solid var(--gold-line-soft);
  border-radius:16px;overflow:hidden}
.curric__subj[open]{border-color:var(--gold-line);box-shadow:var(--sh-soft)}
.curric__sum{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  list-style:none;min-block-size:56px}
.curric__sum::-webkit-details-marker{display:none}
.curric__sum:hover{background:rgba(201,165,95,.07)}
.curric__name{font-weight:700;color:var(--ink);font-size:.98rem;min-width:0}
.curric__meta{font-size:.87rem;color:var(--ink-3);white-space:nowrap}
.curric__meta--soon{color:var(--gold-text);font-weight:700}
.curric__chev{inline-size:18px;block-size:18px;flex:none;margin-inline-start:auto;
  color:var(--gold-deep);transition:transform var(--t-route) var(--ease)}
.curric__subj[open] .curric__chev{transform:rotate(180deg)}
.curric__subj.is-soon .curric__name{color:var(--ink-3)}

/* شريط التقدم داخل عنوان المادة — للمشترك وحده.
   يملأ من **بداية السطر**: `inset-inline-start` في RTL هي اليمين، وهي
   جهة القراءة — وشريط يمتلئ يسارا يبدو فارغا للعين العربية. */
.curric__prog{flex:none;display:flex;align-items:center;gap:8px}
.curric__track{position:relative;flex:none;inline-size:70px;block-size:6px;
  border-radius:99px;background:rgba(5,44,43,.1);overflow:hidden}
.curric__track i{position:absolute;inset-block:0;inset-inline-start:0;
  background:var(--emerald);border-radius:99px;max-inline-size:100%}
.curric__prog b{font-size:.82rem;color:var(--ink-3);flex:none;min-inline-size:34px}

.curric__body{padding:0 16px 14px;border-block-start:1px solid var(--gold-line-soft);
  display:grid;gap:16px;padding-block-start:14px}
.curric__soon{margin:0;font-size:.9rem;color:var(--ink-3)}
.curric__unit-h{margin:0 0 8px;font-size:.9rem;color:var(--ink);font-weight:700;
  display:flex;align-items:baseline;gap:8px}
.curric__unit-h small{font-weight:600;color:var(--ink-3);font-size:.86rem}
.curric__lessons{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.curric__lesson{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--paper);
  border:1px solid var(--gold-line-soft);border-radius:11px;font-size:.9rem;color:var(--ink-2)}
.curric__lesson.is-free{border-color:rgba(12,120,108,.34);background:rgba(12,120,108,.05)}
.curric__ico{inline-size:16px;block-size:16px;flex:none;color:var(--gold-deep)}
/* العنوان يبتلع الفراغ، فما بعده يستقر في آخر السطر بلا `margin:auto`
   موزعة على أربعة عناصر يتنازعها ترتيب ظهورها. */
.curric__t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
a.curric__t{color:var(--ink-2);font-weight:600}
a.curric__t:hover{color:var(--gold-text);text-decoration:underline}
.curric__dur{font-size:.86rem;color:var(--ink-3);flex:none}
.curric__lock{inline-size:15px;block-size:15px;flex:none;color:var(--ink-3);opacity:.7}
.curric__free{display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:4px 10px;border-radius:99px;background:var(--emerald);color:#fff;
  font-size:.84rem;font-weight:700;white-space:nowrap}
.curric__free svg{inline-size:13px;block-size:13px}
.curric__free:hover{background:var(--petrol-lift)}

@media (max-width:560px){
  .curric__sum{flex-wrap:wrap;gap:6px 10px}
  .curric__meta{flex-basis:100%;order:3}
  .curric__prog{display:none}          /* ٩٦ بكسل لشريط في صف ملتف: يقرأ في المتن */
  .curric__lesson{flex-wrap:wrap}
  .curric__dur{margin-inline-start:0}
  .curric__free,.curric__lock{margin-inline-start:auto}
}
/* ══════════════════════════════════════════════════════════════════
   TQ-BANK · بيانات التحويل — الآيبان ينسخ لا يملى
   ══════════════════════════════════════════════════════════════════ */
.bankbox{margin-block-start:16px;padding:clamp(14px,1.8vw,20px);
  background:var(--beige);border:1px solid var(--gold-line);border-radius:16px}
.bankbox__h{margin:0 0 12px;display:flex;align-items:center;gap:9px;
  font-size:.98rem;color:var(--ink)}
.bankbox__h svg{inline-size:19px;block-size:19px;flex:none;color:var(--gold-deep)}
.bankbox__empty{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.8}
.bankbox__empty a{color:var(--gold-text);font-weight:700;text-decoration:underline}
.bankbox__rows{margin:0;display:grid;gap:8px}
.bankbox__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:11px}
.bankbox__row dt{margin:0;font-size:.88rem;color:var(--ink-3);flex:none;min-inline-size:96px}
.bankbox__row dd{margin:0;display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.bankbox__row dd>span{font-weight:700;color:var(--ink);font-size:.92rem;overflow-wrap:anywhere}
.bankbox__copy{flex:none;margin-inline-start:auto;inline-size:30px;block-size:30px;
  display:grid;place-items:center;border:1px solid var(--gold-line-soft);border-radius:9px;
  background:var(--cream);color:var(--gold-deep);cursor:pointer;
  transition:background var(--t-route) var(--ease)}
.bankbox__copy:hover{background:var(--beige)}
.bankbox__copy.is-done{background:var(--emerald);border-color:var(--emerald);color:#fff}
.bankbox__copy svg{inline-size:15px;block-size:15px}
.bankbox__note{margin:10px 0 0;font-size:.88rem;color:var(--ink-3);line-height:1.75}

/* ══════════════════════════════════════════════════════════════════
   TQ-BUNDLE · محتوى باقتي — داخل بوابة الطالب
   ══════════════════════════════════════════════════════════════════ */
.tqb-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tqb-head__b{min-width:0}
.tqb-stats{display:flex;flex-wrap:wrap;gap:10px;margin-block:14px}
.tqb-stats__i{display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--paper,#fff);border:1px solid var(--gold-line-soft,rgba(201,165,95,.22));
  border-radius:999px;font-size:.92rem}
.tqb-stats__i svg{inline-size:16px;block-size:16px;flex:none;color:var(--gold-deep)}
.tqb-stats__i b{font-weight:800}
.tqb-prog{padding:14px 16px}
.tqb-prog__t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:.9rem;margin-block-end:8px}
.tqb-prog__t b{font-size:1.05rem;font-weight:800}
.tqb-prog__bar{block-size:9px;border-radius:99px;background:rgba(5,44,43,.1);overflow:hidden}
.tqb-prog__bar i{display:block;block-size:100%;background:var(--emerald,#0C786C);border-radius:99px;
  transition:inline-size var(--t-entry,320ms) var(--ease,ease)}

/* رابط تفاصيل الباقة أسفل بطاقتها — ثانوي لا ينافس زر الشراء */
.bundle__more{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-block-start:10px;font-size:.86rem;font-weight:700;color:var(--gold-text)}
.bundle__more svg{inline-size:15px;block-size:15px;flex:none}
.bundle__more:hover{text-decoration:underline}

/* قائمة مواد الباقة في صفحة الاشتراك — بطاقات صغيرة لا جدول */
.tqb-incl{margin-block-start:clamp(16px,2vw,24px)}
.tqb-subj{list-style:none;margin:0 0 16px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.tqb-subj__i{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 13px;background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:12px}
.tqb-subj__i b{color:var(--ink);font-size:.9rem;min-width:0;overflow-wrap:anywhere}
.tqb-subj__i span{color:var(--ink-3);font-size:.86rem;flex:none}
.tqb-subj__i.is-soon b{color:var(--ink-3)}
.tqb-subj__i.is-soon span{color:var(--gold-text);font-weight:700}

/* شارة «يفتح بالاشتراك» — مرئية عمدا وهادئة كي لا تنافس المعاينة */
.curric__soonlock{display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:4px 9px;border-radius:99px;background:var(--beige);
  border:1px solid var(--gold-line-soft);color:var(--ink-3);
  font-size:.82rem;font-weight:600;white-space:nowrap}
.curric__soonlock .curric__lock{inline-size:13px;block-size:13px;opacity:1}
@media (max-width:420px){
  /* في أضيق شاشة يكفي القفل: النص يدفع السطر إلى ثلاثة أسطر */
  .curric__soonlock{font-size:0;gap:0;padding:5px}
  .curric__soonlock .curric__lock{inline-size:14px;block-size:14px}
}

/* ── TQ-CURRIC-TREE — طبقة الصف فوق المادة ─────────────────────
   أول `<details>` متداخل في الموقع، فكل ما يخصه يكتب هنا: العلامة
   الافتراضية تعطل في الطبقتين، والحشو لا يتوارث فيزحف كل مستوى.
   وصنف الصف جديد (`curric__grade`) لا `curric__subj` — لأن
   `site.js` يسمي المادة في نافذة المعاينة بـ`closest('.curric__subj')`،
   فلو تشاركا الصنف نسبت المعاينة إلى الصف. */
.curric--tree{gap:12px}
.curric__grade{background:var(--paper);border:1px solid var(--gold-line);
  border-radius:16px;overflow:hidden}
.curric__grade[open]{border-color:var(--gold-line-strong,var(--gold-line))}
.curric__grade.is-soon{background:transparent;border-style:dashed}

.curric__gsum{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:14px 18px;list-style:none;font-weight:700}
.curric__gsum::-webkit-details-marker{display:none}
.curric__gsum:hover{background:var(--cream)}
.curric__gname{color:var(--ink);font-size:1.02rem;min-width:0;overflow-wrap:anywhere}
.curric__gmeta{color:var(--ink-3);font-size:.85rem;font-weight:600;
  margin-inline-start:auto;flex:none;white-space:nowrap}
.curric__gmeta--soon{color:var(--gold-text)}
.curric__grade > .curric__gsum > .curric__chev{flex:none;inline-size:16px;block-size:16px;
  transition:transform var(--t-route,.2s) var(--ease,ease)}
.curric__grade[open] > .curric__gsum > .curric__chev{transform:rotate(90deg)}

.curric__gbody{padding:0 12px 12px;display:grid;gap:8px}
/* المادة داخل الصف: أهدأ من الصف درجة، فالعين تقرأ العمق بلا خطوط */
.curric__gbody .curric__subj{background:var(--cream);border-radius:12px}
.curric__gbody .curric__sum{padding-block:11px}
.curric__gbody .curric__name{font-size:.94rem}

@media (max-width:520px){
  .curric__gsum{padding:12px 13px;gap:8px}
  .curric__gname{font-size:.95rem}
  .curric__gmeta{font-size:.78rem}
  .curric__gbody{padding:0 8px 8px}
}

/* TQ-SOON-LESSON — موضع محجوز لدرس لم يرفع مقطعه بعد. باهت كي يقرأ
   «ليس بعد» لا «مقفول»، وشارته بلون التمهيد نفسه المستعمل في
   `.tqb-subj__i.is-soon` فلا تتعلم العين لغتين لمعنى واحد. */
.curric__lesson.is-soon{opacity:.72}
.curric__lesson.is-soon .curric__t{color:var(--ink-3);font-weight:500}
.curric__lesson.is-soon .curric__ico{opacity:.55}
.curric__prep{display:inline-flex;align-items:center;flex:none;
  padding:4px 9px;border-radius:99px;background:var(--beige);
  border:1px dashed var(--gold-line-soft);color:var(--gold-text);
  font-size:.82rem;font-weight:700;white-space:nowrap}


/* ══════════════════════════════════════════════════════════════════
   TQ-PORTAL-FLASH · شريط الرسائل داخل البوابة
   ------------------------------------------------------------------
   `.tq-flash` معرف في `shell.css`، وصفحات البوابة لا تحمل تلك الورقة
   (انظر الشرط في `includes_top.php`) — فالفقرة تخرج بلا شكل. وهذا
   تعريفها بتوكنات البوابة، مقيدا بـ`.tq-body--portal` كي لا يزاحم
   تعريف الموقع في صفحاته.
   ══════════════════════════════════════════════════════════════════ */
.tq-body--portal .tq-flash{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 var(--tq-space-5,18px);
  padding:12px 16px;
  border:1px solid var(--tq-line);
  border-radius:var(--tq-radius-medium,20px);
  background:var(--tq-surface,#fff);
  color:var(--tq-navy,#132549);
  font-size:.94rem;line-height:1.7;
}
.tq-body--portal .tq-flash::before{
  content:'';flex:0 0 auto;inline-size:18px;block-size:18px;margin-block-start:3px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.tq-body--portal .tq-flash--ok{
  background:var(--tq-mint-fill,#E8F4F1);
  border-color:color-mix(in srgb, var(--tq-mint-ink,#0A6157) 24%, transparent);
  color:var(--tq-mint-ink,#0A6157);
}
.tq-body--portal .tq-flash--ok::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.4'/%3E%3C/svg%3E");
}
.tq-body--portal .tq-flash--err{
  background:var(--tq-rose-fill,#FBEAE7);
  border-color:color-mix(in srgb, var(--tq-rose-ink,#A6473A) 26%, transparent);
  color:var(--tq-rose-ink,#A6473A);
}
.tq-body--portal .tq-flash--err::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5.2M12 16.4h.01'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5.2M12 16.4h.01'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════
   TQ-SPAM · تنبيه «الرسائل غير المرغوبة»

   وسمه يخرج من `tq_spam_notice()` وحدها، ويظهر في الجهتين: شاشات
   التأكيد والاستعادة على الموقع، وشاشات الإعدادات والإشعارات في
   البوابات. فورقته هنا لا في `pages.css` ولا في `components.css`.

   ولونه أصفر الانتباه لا أحمر الخطأ: لا شيء عطب — رسالة وصلت إلى
   مجلد غير الذي ينتظرها فيه صاحبها. والأحمر في هذه المنصة للخطأ وحده.

   والشريط على **بداية** السطر (`border-inline-start`) وهي اليمين في
   العربية: العين تقع عليه أول ما تقع.
   ══════════════════════════════════════════════════════════════════ */
.tq-spam{
  --spam-fill:var(--beige,#F8EFE3);
  --spam-ink:var(--gold-text,#93631D);
  --spam-line:var(--gold-line,rgba(201,165,95,.42));
  --spam-strong:var(--ink,#052C2B);
  --spam-body:var(--ink-2,#4A6067);
  --spam-card:var(--paper,#FCF8F4);

  display:block;margin-block:16px;padding:16px 18px;
  background:var(--spam-fill);
  border:1px solid var(--spam-line);
  border-inline-start:5px solid var(--spam-ink);
  border-radius:16px;
  color:var(--spam-body);
  font-size:max(13.5px,.9rem);line-height:1.85;text-align:start;
}
/* البوابة: العائلة البرتقالية من التوكنات لا لون مكتوب — و`--beige`
   هناك رمادي بارد لا يقرأ تنبيها. */
.tq-body--portal .tq-spam{
  --spam-fill:var(--tq-peach-fill,#FBF3E4);
  --spam-ink:var(--tq-peach-ink,#8A5D18);
  --spam-line:color-mix(in srgb, var(--tq-peach-ink,#8A5D18) 26%, transparent);
  --spam-strong:var(--tq-navy,#023331);
  --spam-body:var(--tq-text2,#5A6672);
  --spam-card:var(--tq-surface,#fff);
}

/* أول عنصر في العمود: بلا هامش علوي يزيح ما تحته عن رأس الصفحة. */
.tq-spam--top{margin-block-start:0}

.tq-spam__top{display:flex;gap:12px;align-items:flex-start}
.tq-spam__intro{min-inline-size:0}
.tq-spam__chip{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:42px;block-size:42px;border-radius:999px;
  background:var(--spam-card);border:1px solid var(--spam-line);
  color:var(--spam-ink);
}
.tq-spam .tq-spam__eyebrow{
  margin:0 0 3px;font-weight:800;font-size:max(11px,.72rem);
  color:var(--spam-ink);letter-spacing:.01em;line-height:1.5;
}
.tq-spam .tq-spam__title{
  margin:0 0 7px;font-weight:800;font-size:max(15.5px,1.03rem);line-height:1.55;
  color:var(--spam-strong);text-wrap:balance;
}
.tq-spam .tq-spam__lead{margin:0;color:var(--spam-body)}

/* ── الخطوات ─────────────────────────────────────────────────────
   الثالثة معلمة `is-key`: الأوليان تجدان رسالة واحدة، وهي وحدها ما
   يعيد ما بعدها إلى صندوق الوارد. فلها حد أثخن ولون رقمها لون التنبيه. */
.tq-spam .tq-spam__steps{
  list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;counter-reset:none;
}
.tq-spam .tq-spam__step{
  display:flex;gap:10px;align-items:flex-start;
  margin:0;padding:11px 13px;border-radius:13px;
  background:var(--spam-card);border:1px solid var(--spam-line);
}
.tq-spam .tq-spam__step.is-key{
  border:1.6px solid var(--spam-ink);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.45);
}
.tq-spam__n{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:26px;block-size:26px;border-radius:999px;
  background:var(--spam-line);color:var(--spam-strong);
  font-weight:800;font-size:max(12px,.8rem);line-height:1;
}
.tq-spam .tq-spam__step.is-key .tq-spam__n{background:var(--spam-ink);color:#fff}
.tq-spam__tx{min-inline-size:0;flex:1}
.tq-spam .tq-spam__tx b{color:var(--spam-strong);font-weight:800}
.tq-spam .tq-spam__step.is-key .tq-spam__tx b{color:var(--spam-ink)}

/* ── عنوان المرسل وزر نسخه ───────────────────────────────────────
   الخطوة الثانية تطلب البحث بعنوان لاتيني في واجهة عربية، وكتابته
   يدويا حرفا حرفا هي الخطوة التي يسقط عندها من يقرأ على الجوال. */
.tq-spam__addr{
  display:inline-flex;align-items:center;gap:6px;max-inline-size:100%;
  padding:1px 8px;border-radius:9px;vertical-align:middle;
  background:var(--spam-fill);border:1px solid var(--spam-line);
}
.tq-spam__addr>b{font-weight:700;color:var(--spam-strong);overflow-wrap:anywhere}
.tq-spam .tq-spam__copy{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:2px 9px;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:700;font-size:max(11px,.72rem);line-height:1.7;
  background:var(--spam-card);border:1px solid var(--spam-line);color:var(--spam-ink);
  transition:background .15s,border-color .15s,color .15s;
}
.tq-spam .tq-spam__copy:hover{border-color:var(--spam-ink)}
.tq-spam .tq-spam__copy.is-done{background:var(--spam-ink);border-color:var(--spam-ink);color:#fff}

/* ── الروابط المباشرة ───────────────────────────────────────────── */
.tq-spam__go{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-start:14px}
.tq-spam__gol{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:800;font-size:max(12.5px,.82rem);color:var(--spam-strong);
}
.tq-spam .tq-spam__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 15px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:max(12.5px,.82rem);
  background:var(--spam-card);border:1px solid var(--spam-line);color:var(--spam-strong);
  transition:background .15s,border-color .15s;
}
.tq-spam .tq-spam__btn:hover{border-color:var(--spam-ink);background:var(--spam-fill)}
.tq-spam .tq-spam__btn--key{background:var(--spam-ink);border-color:var(--spam-ink);color:#fff}
.tq-spam .tq-spam__btn--key:hover{background:var(--spam-strong);border-color:var(--spam-strong);color:#fff}

.tq-spam .tq-spam__fine{
  margin:12px 0 0;font-size:max(11.5px,.77rem);line-height:1.85;color:var(--spam-body);
}
.tq-spam .tq-spam__fine a{
  color:var(--spam-ink);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}

/* ── المطوي ──────────────────────────────────────────────────────
   للشاشات التي ليس انتظار الرسالة موضوعها: سطر واحد ظاهر، وبقية
   الخطوات تحته. `<details>` لا زر: يعمل بلا جافاسكربت. */
details.tq-spam--compact{padding:0}
.tq-spam--compact>.tq-spam__sum{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:12px 15px;color:var(--spam-strong);
}
.tq-spam--compact>.tq-spam__sum::-webkit-details-marker{display:none}
.tq-spam--compact>.tq-spam__sum::marker{content:''}
.tq-spam--compact .tq-spam__chip{inline-size:32px;block-size:32px}
.tq-spam--compact .tq-spam__sumt{
  flex:1;min-inline-size:0;font-weight:800;font-size:max(12.5px,.86rem);line-height:1.6;
}
.tq-spam--compact .tq-spam__more{
  flex:0 0 auto;display:inline-flex;align-items:center;
  padding:3px 11px;border-radius:999px;
  font-weight:800;font-size:max(11px,.73rem);
  background:var(--spam-card);border:1px solid var(--spam-line);color:var(--spam-ink);
}
/* السهم رأسي لا اتجاهي — «افتح» و«اطو» لا «تال» و«سابق». فحداه
   ماديان (`right`/`bottom`) لا منطقيان: المنطقيان ينعكسان في RTL
   فيصير سهم الفتح سهما إلى اليسار. */
.tq-spam--compact .tq-spam__more::after{
  content:'';display:inline-block;inline-size:7px;block-size:7px;
  margin-inline-start:6px;margin-block-end:2px;
  border-right:2px solid;border-bottom:2px solid;
  transform:rotate(45deg);transition:transform .18s ease;
}
.tq-spam--compact[open] .tq-spam__more::after{transform:rotate(-135deg);margin-block-end:-2px}
.tq-spam--compact>.tq-spam__body{padding:0 15px 15px}
.tq-spam--compact .tq-spam__steps{margin-block-start:2px}

@media (max-width:520px){
  .tq-spam{padding:14px 14px}
  .tq-spam__chip{inline-size:36px;block-size:36px}
  .tq-spam__go{gap:7px}
  .tq-spam .tq-spam__btn{padding:6px 13px}
}
@media (prefers-reduced-motion:reduce){
  .tq-spam *{transition:none !important}
}