/* ==========================================================================
   منصة تقدر — مكونات الصفحات الداخلية
   يعتمد على توكنات taqdar.css؛ لا يعيد تعريف أي لون حرفيا.
   ========================================================================== */

/* ==========================================================================
   هيرو الصفحات الداخلية
   ========================================================================== */
.page-hero{padding-block:clamp(18px,2.4vw,40px) clamp(10px,1.4vw,20px)}
/* الفانوس زينة معلقة، و`position:absolute` يعلقه على أقرب سلف موضوع.
   وبلا هذا يقفز إلى الغلاف الأبعد فيلتصق بحافة النافذة، بعيدا عن
   العنوان الذي جاء يزينه. والغلاف هو ما يحد المحتوى، فهو المسند. */
.page-hero>.shell{position:relative}
.page-hero__grid{
  position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  align-items:center;gap:clamp(20px,3vw,56px);
}
.page-hero__copy{max-width:min(100%,580px)}
.page-hero h1{font-size:clamp(30px,3.6vw,54px);line-height:1.25;letter-spacing:-.5px}
.page-hero__sub{
  display:block;margin-block-start:6px;font-size:clamp(19px,2.1vw,31px);font-weight:700;
  font-family:'Cairo',sans-serif;line-height:1.35;
  background:linear-gradient(100deg,var(--gold-deep),var(--gold-warm) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.page-hero__lede{margin-block-start:clamp(14px,1.6vw,22px);max-width:52ch;
  font-size:clamp(13px,1.02vw,16px)}
.page-hero__cta{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);
  margin-block-start:clamp(20px,2.4vw,32px);flex-wrap:wrap}

/* شريط المميزات المصغر تحت نص الهيرو */
/* شبكة عمودين متساويين لا فليكس ملتفّ: الفليكس يعطي كل بند عرض
   محتواه، فتنكسر الأربعة على سطرين بأعراض مختلفة وتبدو غير منتظمة —
   وهي في التصميم أربعة متساوية. والعمود الواحد عند الضيق. */
.hero-mini{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.5vw,20px) clamp(16px,2.2vw,34px);
  margin-block-start:clamp(22px,2.6vw,36px);
  max-inline-size:min(100%,540px);
}
.hero-mini__item{display:flex;align-items:flex-start;gap:10px;min-width:0}
.hero-mini__item>div{min-inline-size:0}
@media (max-width:560px){ .hero-mini{grid-template-columns:minmax(0,1fr)} }
.hero-mini__item .ico{
  flex:0 0 auto;width:clamp(34px,2.8vw,42px);aspect-ratio:1;border-radius:30%;
  display:grid;place-items:center;color:var(--petrol);
  background:linear-gradient(150deg,#FFFDF8,#FAF2E4);border:1px solid var(--gold-line);
}
.hero-mini__item .ico svg{width:52%;height:52%}
.hero-mini__item b{display:block;font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(11.5px,.9vw,14px);color:var(--ink);line-height:1.5}
.hero-mini__item span{display:block;font-size:clamp(10.5px,.8vw,12.5px);color:var(--ink-3);
  line-height:1.5}

/* صورة الهيرو داخل القوس — نفس قناع الرئيسية */
.page-hero__art{position:relative;display:flex;justify-content:center;align-items:flex-end}
.page-hero__arch{position:relative;width:min(100%,440px);
  filter:drop-shadow(0 24px 40px rgba(5,44,43,.18))}
.page-hero__arch>div{position:relative;width:100%;aspect-ratio:.82;
  clip-path:url(#tqArch);
  background:linear-gradient(180deg,rgba(212,180,118,.18),rgba(250,244,236,0) 46%)}
.page-hero__arch img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.page-hero__arch svg.frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.page-hero__arch svg.frame path{fill:none;stroke:var(--gold);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.page-hero .lantern--l{inset-block-start:-26px;inset-inline-start:clamp(-8px,0vw,10px)}
.page-hero .lantern--r{inset-block-start:-18px;inset-inline-end:clamp(-8px,0vw,10px)}

/* ==========================================================================
   شبكات بطاقات أيقونية عامة (تستعمل في كل الصفحات تقريبا)
   ========================================================================== */
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.5vw,22px)}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.5vw,20px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,24px)}

.icard{
  background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  padding:clamp(16px,1.8vw,26px);box-shadow:var(--sh-soft);
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease),
             border-color var(--t-entry) var(--ease);
}
.icard .ico{
  width:clamp(40px,3.2vw,52px);aspect-ratio:1;margin-inline:auto;border-radius:30%;
  display:grid;place-items:center;color:var(--petrol);
  background:linear-gradient(150deg,#FFFDF8,#F8EFE0);border:1px solid var(--gold-line);
}
.icard .ico svg{width:52%;height:52%}

/* TQ-ICARD-SCOPE — بطاقة الميزة، لا كل ما لبس `icard`.
   كتبت هذه القواعد لشكل واحد: أيقونة فعنوان فسطر واحد تحته
   (`courses_page` · `about_us` · `site_students` …). ثم استعير الصنف
   لوحا عاما في صفحتي الباقة والشراء — فورث كل `<p>` فيهما `13px`
   بحبر ثانوي، **وبأولوية تغلب صنف العنصر نفسه**: `.icard p` وزنها
   (0,1,1) و`.plan-card__price` وزنها (0,1,0). فسعر الباقة — أكبر
   رقم في الصفحة وأهمه — كان يرسم بثلاثة عشر بكسلا رماديا، و«تصدر
   فاتورتك فورا» و«ما تفتحه» و«ستسجل الدخول أولا» معه.
   والشقيق `~ .ico` يقصر القواعد على الشكل الذي كتبت له: البطاقة التي
   فيها أيقونة. واللوح العام لا أيقونة فيه، فلا تمسه.

   و`text-align:center` منها: كان في الأساس فورثه كل لوح لبس `icard`.
   فصفحات الأحكام والخصوصية والاسترجاع — وهي `icard prose` — كانت تصف
   فقراتها القانونية توسيطا، فيبقى آخر سطر من كل فقرة معلقا في وسط
   البطاقة بلا حافة تسنده، وهو أسوأ ما يقع لنص طويل يقرأ لا يتصفح.
   ومعها متن المقال و«ماذا سيدرس ابنك؟» و«المنهج» و«نبذة» و«ملخص
   الطلب» — عناوينها وشروحها موسطة فوق قوائم محاذاة للبداية.
   التوسيط شكل بطاقة الأيقونة وحدها: أيقونة موسطة فعنوان فسطر. */
.icard:has(.ico){text-align:center}
.icard .ico ~ h3{margin-block-start:14px;font-size:clamp(12.5px,1vw,15.5px);line-height:1.55}
.icard .ico ~ p{margin-block-start:6px;font-size:clamp(11px,.85vw,13px);color:var(--ink-3);
  line-height:1.7}

/* والرفع عند التحويم من مفردات البطاقة الصغيرة كذلك: لوح فيه منهج
   كامل يقفز ثمانية بكسلات لأن المؤشر عبره حركة بلا معنى. */
.icard:has(.ico):hover{transform:translateY(-8px);box-shadow:var(--sh-raise);
  border-color:var(--gold-line)}

/* ==========================================================================
   أشرطة الأرقام
   ==========================================================================
*/
/* الرقم مع علامته وحدة لاتينية: بدون العزل ينتقل الـ«+» إلى يمين الرقم */
[data-count]{direction:ltr;unicode-bidi:isolate}
/* ========================================================================== */
/* فاتح — صفحة المعلمين */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);
  background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  padding:clamp(18px,2vw,30px) clamp(14px,2vw,30px);box-shadow:var(--sh-soft);
}
.stat-strip__item{display:flex;align-items:center;justify-content:center;gap:12px;
  position:relative}
.stat-strip__item+.stat-strip__item::after{content:'';position:absolute;
  inset-inline-end:100%;inset-block:10%;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold-line),transparent)}
.stat-strip__item svg{width:clamp(24px,2vw,32px);height:clamp(24px,2vw,32px);aspect-ratio:1;display:block;color:var(--gold-deep);flex:0 0 auto}
.stat-strip b{display:block;font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(18px,1.8vw,28px);color:var(--ink);line-height:1.3}
.stat-strip span{display:block;font-size:clamp(10.5px,.82vw,13px);color:var(--ink-3)}

/* غامق — «تقدر بالأرقام» و«تجربة تعليمية تصنع الفرق» */
.stats-band{
  position:relative;overflow:hidden;border-radius:var(--r-panel);color:#fff;
  background:linear-gradient(135deg,var(--petrol-deep),var(--petrol) 48%,#064B44);
  padding:clamp(24px,3vw,46px) clamp(18px,3vw,50px);
  box-shadow:0 26px 54px -30px rgba(2,51,49,.9);
}
.stats-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-color:var(--gold-warm);
  -webkit-mask-image:url('../img/script-tile.webp');
  mask-image:url('../img/script-tile.webp');
  -webkit-mask-size:var(--script-tile) auto;mask-size:var(--script-tile) auto;
  opacity:var(--script-op-dark);
}
.stats-band h2{position:relative;color:#fff;text-align:center;
  font-size:clamp(19px,2.2vw,32px);margin-block-end:clamp(18px,2.2vw,32px)}
.stats-band__grid{position:relative;display:grid;gap:clamp(10px,1.4vw,22px);
  grid-template-columns:repeat(var(--n,5),1fr)}
.stats-band__item{text-align:center;position:relative;padding-inline:clamp(4px,.8vw,14px)}
.stats-band__item+.stats-band__item::after{content:'';position:absolute;
  inset-inline-end:100%;inset-block:12%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(212,180,118,.4),transparent)}
.stats-band__item svg{width:clamp(24px,2.1vw,34px);height:clamp(24px,2.1vw,34px);aspect-ratio:1;display:block;margin-inline:auto;color:var(--gold-warm)}
.stats-band__item b{display:block;margin-block-start:8px;font-family:'Cairo',sans-serif;
  font-weight:700;font-size:clamp(19px,2vw,30px);color:var(--gold-warm);line-height:1.25}
.stats-band__item span{display:block;font-size:clamp(10.5px,.82vw,13px);
  color:rgba(255,255,255,.78)}
/* نسخة بصورة طالب مقصوصة على اليسار */
.stats-band--art{display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:clamp(16px,2.4vw,40px);padding-block-end:0}
.stats-band--art .stats-band__body{padding-block-end:clamp(24px,3vw,46px)}
.stats-band--art img{width:clamp(140px,15vw,220px);height:auto;align-self:end;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 84%,transparent 99%)}

/* ==========================================================================
   المسارات: اختيار المرحلة والصف وشبكة المواد
   ========================================================================== */
.stage-picker{display:grid;gap:clamp(10px,1.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(140px,13vw,180px),1fr))}
.stage-card{
  background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  padding:clamp(16px,1.8vw,26px) clamp(10px,1.4vw,18px);text-align:center;cursor:pointer;
  font:inherit;color:inherit;width:100%;
  transition:transform var(--t-route) var(--ease),box-shadow var(--t-route) var(--ease),
             border-color var(--t-route) var(--ease),background-color var(--t-route) var(--ease);
}
.stage-card:hover{transform:translateY(-4px);box-shadow:var(--sh-soft)}
.stage-card[aria-pressed='true']{
  background:linear-gradient(150deg,#FFFDF8,#F4E9D8);
  border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,165,95,.28),var(--sh-card);
}
.stage-card .ico{width:clamp(34px,2.8vw,44px);aspect-ratio:1;margin-inline:auto;
  display:grid;place-items:center;color:var(--gold-deep)}
.stage-card .ico svg{width:100%;height:100%}
.stage-card[aria-pressed='true'] .ico{color:var(--petrol)}
.stage-card b{display:block;margin-block-start:10px;font-family:'Cairo',sans-serif;
  font-weight:700;font-size:clamp(12px,.98vw,15px);color:var(--ink)}
.stage-card span{display:block;margin-block-start:3px;font-size:clamp(10.5px,.8vw,12.5px);
  color:var(--ink-3)}

.grade-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.grade-tab{
  font:inherit;font-family:'Cairo',sans-serif;font-weight:600;
  font-size:clamp(11px,.85vw,13.5px);padding:9px 20px;border-radius:999px;cursor:pointer;
  background:var(--paper);border:1px solid var(--gold-line-soft);color:var(--ink-2);
  transition:background-color var(--t-route) var(--ease),color var(--t-route) var(--ease),
             border-color var(--t-route) var(--ease);
}
.grade-tab:hover{border-color:var(--gold);color:var(--gold-text)}
.grade-tab[aria-pressed='true']{background:var(--petrol);color:#fff;border-color:var(--petrol)}

.subject-card{
  background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--sh-soft);display:flex;flex-direction:column;
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease);
}
.subject-card:hover{transform:translateY(-8px);box-shadow:var(--sh-raise)}
.subject-card__media{position:relative;aspect-ratio:1.12;overflow:hidden;
  background:linear-gradient(140deg,#F2E6D4,#EADFCB)}
.subject-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--ease)}
.subject-card:hover .subject-card__media img{transform:scale(1.05)}
.subject-card__badge{
  /* في التدفق مع هامش سالب: لا سياق تموضع يتغير ولا نسبة
     مئوية تحسب من ارتفاع خاطئ. */
  position:relative;z-index:2;margin:-20px auto 0;flex:0 0 auto;align-self:center;
  width:clamp(36px,3vw,46px);height:clamp(36px,3vw,46px);aspect-ratio:1;border-radius:32%;display:grid;place-items:center;
  background:linear-gradient(155deg,var(--petrol-lift),var(--petrol-deep));
  border:1px solid rgba(212,180,118,.5);color:var(--gold-warm);
  box-shadow:0 10px 20px -12px rgba(2,51,49,.85);
  font-family:'Cairo',sans-serif;font-weight:700;font-size:clamp(12px,1vw,15px);
}
.subject-card__badge svg{width:clamp(18px,1.6vw,24px);height:clamp(18px,1.6vw,24px);display:block}
.subject-card__body{padding:clamp(24px,2vw,30px) clamp(14px,1.5vw,20px) clamp(14px,1.5vw,20px);
  text-align:center;display:flex;flex-direction:column;gap:8px;flex:1}
.subject-card h3{font-size:clamp(13px,1.06vw,16.5px)}
.subject-card p{font-size:clamp(11px,.85vw,13px);color:var(--ink-3);line-height:1.7}
.subject-card__meta{display:flex;justify-content:center;gap:14px;
  font-size:clamp(10.5px,.8vw,12.5px);color:var(--ink-3)}
.subject-card__meta span{display:inline-flex;align-items:center;gap:5px}
.subject-card__meta svg{width:14px;height:14px;color:var(--gold-deep)}
.subject-card .btn{margin-block-start:auto;width:100%;padding:11px 16px;
  font-size:clamp(11.5px,.88vw,13.5px)}

/* ==========================================================================
   المعلمون: شريط الفلترة وكروت المعلمين
   ========================================================================== */
.directory-bar{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;
  margin-block-end:clamp(20px,2.4vw,34px)}
.field{display:flex;align-items:center;gap:9px;background:var(--paper);
  border:1px solid var(--gold-line-soft);border-radius:999px;padding:9px 18px}
.field svg{width:16px;height:16px;color:var(--gold-deep);flex:0 0 auto}
.field input,.field select{border:0;background:none;outline:none;font:inherit;color:var(--ink);
  font-size:clamp(11.5px,.88vw,13.5px)}
.field input{width:100%}
.field select{cursor:pointer;appearance:none;padding-inline-end:4px}
.field--grow{flex:1;min-width:min(260px,100%)}
.field--select{cursor:pointer}
.dir-empty{text-align:center;color:var(--ink-3);padding-block:clamp(24px,3vw,44px);
  font-size:clamp(12px,.95vw,14.5px)}

.teacher-card{
  background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--sh-soft);text-align:center;
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease)}
.teacher-card:hover{transform:translateY(-8px);box-shadow:var(--sh-raise)}
/* الصور الجديدة بخلفية بيضاء ⇒ الأرضية بيضاء لا متدرّجة بيج،
   وإلّا بان إطار بيج حول كل وجه. */
.teacher-card__media{position:relative;aspect-ratio:1;overflow:hidden;background:#fff}

/* TQ-TEACHERS-CAROUSEL · دليل المعلّمين مضمار لا شبكة */
.carousel2--teachers .carousel2__track>*{flex:0 0 clamp(200px,19vw,248px)}
.carousel2--teachers .teacher-card{display:flex;flex-direction:column;block-size:100%}
.carousel2--teachers .teacher-card__body{flex:1;display:flex;flex-direction:column}
.carousel2--teachers .teacher-card:hover{transform:none;box-shadow:var(--sh-raise)}
@media (max-width:480px){
  .carousel2--teachers .carousel2__track>*{flex:0 0 min(74vw,260px)}
}
.teacher-card__media img{width:100%;height:100%;object-fit:cover}
.teacher-card__chip{
  position:absolute;inset-block-end:10px;inset-inline-start:50%;translate:50% 0;
  background:var(--petrol);color:var(--gold-warm);border:1px solid rgba(212,180,118,.45);
  border-radius:999px;padding:5px 14px;white-space:nowrap;
  font-family:'Cairo',sans-serif;font-weight:600;font-size:clamp(10px,.78vw,12px);
}
.teacher-card__body{padding:clamp(14px,1.5vw,20px);display:flex;flex-direction:column;gap:5px}
.teacher-card h3{font-size:clamp(12.5px,1vw,15.5px)}
.teacher-card p{font-size:clamp(10.5px,.82vw,12.5px);color:var(--ink-3)}
.teacher-card__rate{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:clamp(11px,.85vw,13px);color:var(--ink);margin-block-start:4px}
.teacher-card__rate svg{width:14px;height:14px;color:var(--gold)}
.teacher-card__rate span{color:var(--ink-3)}
.teacher-card__courses{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding-block-start:9px;margin-block-start:4px;border-block-start:1px solid var(--gold-line-soft);
  font-size:clamp(10.5px,.8vw,12.5px);color:var(--ink-3)}
.teacher-card__courses svg{width:14px;height:14px;color:var(--gold-deep)}

/* ==========================================================================
   أولياء الأمور: الخطوات المرقمة + محاكاة اللوحة والهاتف
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px);
  position:relative}
.step{text-align:center;position:relative;padding-inline:clamp(6px,1vw,16px)}
.step+.step::after{content:'';position:absolute;inset-inline-end:100%;inset-block:14%;
  width:1px;background:linear-gradient(180deg,transparent,var(--gold-line),transparent)}
.step__n{width:clamp(38px,3vw,48px);aspect-ratio:1;margin-inline:auto;border-radius:50%;
  display:grid;place-items:center;font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(14px,1.2vw,18px);color:#fff;
  background:linear-gradient(155deg,var(--petrol-lift),var(--petrol-deep));
  box-shadow:0 10px 20px -12px rgba(2,51,49,.8)}
.step h3{margin-block-start:12px;font-size:clamp(12.5px,1vw,15.5px)}
.step p{margin-block-start:6px;font-size:clamp(11px,.85vw,13px);color:var(--ink-3);
  line-height:1.7}

.showcase{display:grid;grid-template-columns:.9fr 1.35fr .75fr;
  gap:clamp(14px,1.8vw,28px);align-items:stretch}
.showcase__panel{
  position:relative;overflow:hidden;border-radius:var(--r-card);color:#fff;
  background:linear-gradient(150deg,var(--petrol-deep),var(--petrol) 55%,#064B44);
  padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;gap:12px;
}
.showcase__panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-color:var(--gold-warm);
  -webkit-mask-image:url('../img/script-tile.webp');
  mask-image:url('../img/script-tile.webp');
  -webkit-mask-size:var(--script-tile) auto;mask-size:var(--script-tile) auto;
  opacity:var(--script-op-dark);
}
.showcase__panel>*{position:relative}
.showcase__panel h2{color:#fff;font-size:clamp(17px,1.7vw,26px);line-height:1.4}
.showcase__panel>p{color:rgba(255,255,255,.76);font-size:clamp(11.5px,.9vw,14px)}
.showcase__list{display:grid;gap:9px;margin-block-start:2px}
.showcase__list li{display:flex;align-items:center;gap:9px;
  font-size:clamp(11.5px,.88vw,13.5px);color:rgba(255,255,255,.9)}
.showcase__list svg{flex:0 0 auto;width:17px;height:17px;color:var(--gold-warm)}
.showcase__panel .btn{margin-block-start:auto;align-self:flex-start}

/* لوحة المتابعة — مبنية بالـCSS لا صورة، فتتبع التوكنات وتبقى حادة */
.dash{background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  box-shadow:var(--sh-card);overflow:hidden;display:flex;flex-direction:column}
.dash__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;background:linear-gradient(180deg,#FFFDF9,#F7EEE0);
  border-block-end:1px solid var(--gold-line-soft)}
.dash__bar b{font-family:'Cairo',sans-serif;font-size:clamp(11.5px,.9vw,14px);color:var(--ink)}
.dash__dots{display:flex;gap:5px}
.dash__dots i{width:8px;height:8px;border-radius:50%;background:var(--gold-line)}
.dash__body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;grid-column:1/-1}
.dash__kpi{background:linear-gradient(150deg,#FFFDF8,#F6EDDF);border:1px solid var(--gold-line-soft);
  border-radius:14px;padding:10px 8px;text-align:center}
.dash__kpi b{display:block;font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(14px,1.3vw,20px);color:var(--petrol)}
.dash__kpi span{display:block;font-size:clamp(9px,.68vw,11px);color:var(--ink-3)}
.dash__chart{background:var(--cream);border:1px solid var(--gold-line-soft);border-radius:14px;
  padding:10px}
.dash__chart svg{width:100%;height:auto;display:block}
.dash__kids{display:grid;gap:8px}
.dash__kid{display:flex;align-items:center;gap:9px;background:var(--cream);
  border:1px solid var(--gold-line-soft);border-radius:14px;padding:8px 10px}
.dash__kid .av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(150deg,var(--petrol-lift),var(--petrol-deep));
  display:grid;place-items:center;color:var(--gold-warm)}
.dash__kid .av svg{width:15px;height:15px}
.dash__kid b{display:block;font-size:clamp(10.5px,.82vw,12.5px);color:var(--ink);
  font-family:'Cairo',sans-serif}
.dash__kid span{display:block;font-size:clamp(9.5px,.72vw,11.5px);color:var(--ink-3)}

/* بطاقة التطبيق + محاكاة الهاتف */
.appcard{background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  box-shadow:var(--sh-soft);padding:clamp(16px,1.8vw,24px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.appcard h3{font-size:clamp(13px,1.05vw,16px)}
.appcard p{font-size:clamp(10.5px,.82vw,12.5px);color:var(--ink-3);line-height:1.7}
.phone{width:clamp(84px,7.4vw,110px);aspect-ratio:.49;border-radius:16px;
  background:linear-gradient(165deg,var(--petrol-lift),var(--petrol-deep));
  border:3px solid var(--petrol-deep);box-shadow:var(--sh-card);position:relative;
  display:grid;place-items:center;overflow:hidden}
.phone::before{content:'';position:absolute;inset-block-start:6px;inset-inline-start:50%;
  translate:50% 0;width:32%;height:5px;border-radius:999px;background:rgba(255,255,255,.22)}
.phone::after{content:'';position:absolute;inset:0;
  background-image:url('../svg/pattern-star-light.svg');background-size:64px 64px;opacity:.14}
.phone img{position:relative;width:64%;height:auto}
.appcard .stores{justify-content:center}
.appcard .stores svg{width:clamp(88px,7.4vw,104px)}

/* شهادة بعلامة اقتباس — صفحة أولياء الأمور */
.tcard{background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  padding:clamp(18px,2vw,28px);box-shadow:var(--sh-soft);position:relative;
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease)}
.tcard:hover{transform:translateY(-8px);box-shadow:var(--sh-raise)}
.tcard__mark{display:block;margin-inline-start:auto;margin-block-end:10px;
  width:clamp(22px,1.9vw,30px);height:clamp(22px,1.9vw,30px);aspect-ratio:1;display:block;color:var(--gold-line)}
.tcard>p{font-size:clamp(11.5px,.92vw,14px);line-height:1.95;color:var(--ink-2)}
.tcard__who{display:flex;align-items:center;gap:12px;margin-block-start:16px;
  padding-block-start:14px;border-block-start:1px solid var(--gold-line-soft)}
.tcard__who img{width:clamp(40px,3.2vw,50px);height:auto;aspect-ratio:1;border-radius:50%;
  object-fit:cover;border:1.5px solid var(--gold-line);flex:0 0 auto}
.tcard__who b{display:block;font-family:'Cairo',sans-serif;font-size:clamp(12px,.95vw,14.5px);
  color:var(--ink)}
.tcard__who span{display:block;font-size:clamp(10.5px,.8vw,12.5px);color:var(--ink-3)}
.tcard .stars{justify-content:flex-start;margin-block-start:12px}

/* ==========================================================================
   عن المنصة: القيم + الخط الزمني + الفريق
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-block-start:12px;justify-content:center}
.chip{background:linear-gradient(150deg,#FFFDF8,#F6EBDA);border:1px solid var(--gold-line);
  border-radius:999px;padding:5px 14px;font-size:clamp(10.5px,.8vw,12.5px);color:var(--ink)}

.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.4vw,20px);padding-block-start:8px}
.timeline::before{content:'';position:absolute;inset-block-start:calc(clamp(38px,3vw,48px)/2);
  inset-inline:8%;height:2px;
  background:repeating-linear-gradient(90deg,var(--gold-line) 0 8px,transparent 8px 16px)}
.tl-item{position:relative;text-align:center}
.tl-item .ico{width:clamp(38px,3vw,48px);aspect-ratio:1;margin-inline:auto;border-radius:50%;
  display:grid;place-items:center;color:var(--gold-deep);background:var(--paper);
  border:1.5px solid var(--gold-line);position:relative;z-index:1}
.tl-item .ico svg{width:50%;height:50%}
.tl-item h3{margin-block-start:12px;font-size:clamp(12px,.98vw,15px)}
.tl-item p{margin-block-start:6px;font-size:clamp(10.5px,.82vw,12.5px);color:var(--ink-3);
  line-height:1.7}
.tl-item .year{display:inline-block;margin-block-start:10px;
  font-family:'Cairo',sans-serif;font-weight:700;font-size:clamp(11px,.88vw,13.5px);
  color:var(--gold-text)}
.tl-item::after{content:'';display:block;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin:8px auto 0}

.team-card{background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-soft);text-align:center;
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease)}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--sh-raise)}
.team-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  background:linear-gradient(140deg,#F2E6D4,#EADFCB)}
.team-card__body{padding:clamp(12px,1.3vw,18px)}
.team-card h3{font-size:clamp(11.5px,.92vw,14.5px)}
.team-card p{margin-block-start:4px;font-size:clamp(10px,.78vw,12px);color:var(--ink-3)}

/* ==========================================================================
   الكاروسل — مسار أفقي بارتفاع ثابت مهما زاد عدد البطاقات
   ========================================================================== */
.carousel{position:relative}
/* أي شبكة توضع داخل .carousel تصير مسارا أفقيا — فالمولد لا يعرف سياقه */
.carousel>.grid-4,.carousel>.grid-5,.carousel__track{
  display:flex;gap:clamp(12px,1.5vw,22px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* مساحة للظل وحركة الرفع عند hover حتى لا يقصهما overflow */
  padding-block:6px 14px;padding-inline:2px;
  scrollbar-width:none;
}
.carousel>.grid-4::-webkit-scrollbar,.carousel>.grid-5::-webkit-scrollbar,
.carousel__track::-webkit-scrollbar{display:none}
.carousel>.grid-4>*,.carousel>.grid-5>*,.carousel__track>*{
  flex:0 0 clamp(220px,22vw,282px);scroll-snap-align:start;
}
.carousel>.grid-4>*[hidden],.carousel__track>*[hidden]{display:none}

.carousel__nav{display:flex;gap:10px;justify-content:center;
  margin-block-start:clamp(12px,1.4vw,18px)}
.carousel__btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--gold-line);color:var(--petrol);
  cursor:pointer;
  transition:background-color var(--t-route) var(--ease),
             transform var(--t-route) var(--ease),opacity var(--t-route) var(--ease);
}
.carousel__btn:hover:not([disabled]){background:var(--petrol);color:#fff;
  border-color:var(--petrol);transform:translateY(-2px)}
.carousel__btn[disabled]{opacity:.32;cursor:default}
.carousel__btn svg{width:20px;height:20px}
/* «التالي» يتقدم نحو اليسار في RTL — واتجاه سهمه في الرمز نفسه (#i-arrow-back)
   لا في transform هنا، فلا تعكسه ورقة أنماط قديمة. */
.carousel__nav[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  /* أي شبكة توضع داخل .carousel تصير مسارا أفقيا — فالمولد لا يعرف سياقه */
.carousel>.grid-4,.carousel>.grid-5,.carousel__track{scroll-behavior:auto}
}

/* ==========================================================================
   كتب المنهج
   ========================================================================== */
.book-card{
  background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--sh-soft);display:flex;flex-direction:column;
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease);
}
.book-card:hover{transform:translateY(-8px);box-shadow:var(--sh-raise)}

/* الغلاف المؤقت مرسوم بالـCSS لا صورة: عنصر نائب صريح لا يوهم أنه الكتاب الحقيقي.
   يكفي وضع `cover` في catalog.json ليحل الغلاف الحقيقي محله. */
.book-card__cover{
  position:relative;aspect-ratio:.78;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,#F3E7D5,#E9DCC6);
}
.book-card__cover img{width:100%;height:100%;object-fit:cover}
.book-card__spine{position:absolute;inset-block:0;inset-inline-start:0;width:14%;
  background:linear-gradient(180deg,var(--tone),var(--tone-2));
  box-shadow:2px 0 8px -3px rgba(5,44,43,.4)}
.book-card__label{
  position:relative;max-width:76%;text-align:center;
  font-family:'Cairo',sans-serif;font-weight:700;font-size:clamp(13px,1.15vw,18px);
  color:var(--tone-2);line-height:1.6;padding-inline-start:12%;
}
.book-card__label::after{content:'';display:block;width:38px;height:2px;margin:10px auto 0;
  border-radius:2px;background:var(--tone);opacity:.7}
/* درجات المواد — تبقى داخل العائلة الذهبية/البترولية */
.book-card__cover[data-tone='math']    {--tone:#0A5A50;--tone-2:#023331}
.book-card__cover[data-tone='arabic']  {--tone:#A06C20;--tone-2:#6B4512}
.book-card__cover[data-tone='science'] {--tone:#1E6E63;--tone-2:#0B3B35}
.book-card__cover[data-tone='islamic'] {--tone:#5C7A3F;--tone-2:#33471F}
.book-card__cover[data-tone='english'] {--tone:#8A6BA8;--tone-2:#4A3560}

.book-card__body{padding:clamp(14px,1.5vw,20px);display:flex;flex-direction:column;
  gap:8px;flex:1}
.book-card h3{font-size:clamp(12.5px,1vw,15.5px);line-height:1.6}
.book-card p{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:clamp(10.5px,.82vw,12.5px);color:var(--ink-3)}
.book-card p svg{width:14px;height:14px;color:var(--gold-deep);flex:0 0 auto}
.book-card .btn{margin-block-start:auto;width:100%;padding:11px 16px;
  font-size:clamp(11.5px,.88vw,13.5px)}
.book-card .btn[disabled]{background:var(--beige);color:var(--ink-3);cursor:default;
  box-shadow:none;border:1px solid var(--gold-line-soft)}
.book-card .btn[disabled]:hover{transform:none;background:var(--beige)}
.book-card .btn svg{width:16px;height:16px}

/* ==========================================================================
   شريط تحميل التطبيق — الرئيسية
   ========================================================================== */
/* بلا لوح ملون: نداء الختام البترولي يليه مباشرة، ولوح آراء أولياء الأمور
   يسبقه — فصندوق ثالث يجعل الثلاثة كتلة واحدة. القسم هنا يجلس على خلفية
   الصفحة نفسها، والهواتف وحدها هي البؤرة. */
.appband{
  position:relative;
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  gap:clamp(20px,3vw,54px);
  padding-block:clamp(6px,1.2vw,20px);
}
.appband__eyebrow{
  display:inline-block;font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(10.5px,.82vw,12.5px);letter-spacing:.04em;color:var(--gold-text);
  border:1px solid var(--gold-line);border-radius:999px;padding:5px 15px;
  background:var(--paper);
}
.appband h2{font-size:clamp(21px,2.5vw,37px);margin-block-start:14px;line-height:1.3}
.appband__copy>p{margin-block-start:12px;max-width:44ch;font-size:clamp(12.5px,1vw,15.5px)}

.appband__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.5vw,20px);margin-block-start:clamp(18px,2.2vw,30px)}
.appband .stores{margin-block-start:clamp(18px,2.2vw,28px)}
.appband__note{margin-block-start:12px;color:var(--ink-3);
  font-size:clamp(10.5px,.82vw,12.5px)}

/* ── لقطة التطبيق: صورة في مربع بحواف مشطوفة، بلا إطار جهاز ولا زخرفة ── */
.appband__art{display:flex;justify-content:center;align-items:center}
.appshot{
  width:clamp(190px,19vw,276px);
  border-radius:clamp(18px,1.8vw,26px);overflow:hidden;
  border:1px solid var(--gold-line-soft);box-shadow:var(--sh-raise);
}
.appshot img{display:block;width:100%;height:auto}
/* ==========================================================================
   المدونة
   ========================================================================== */
/* البحث وشرائح التصنيف: كانا في الصف الفرعي للهيدر، وموضعهما في الموك‑أب هنا أصلا */
.blog-filter{margin-block-start:clamp(20px,2.4vw,32px);display:grid;gap:14px}
.blog-filter .field{max-width:min(100%,420px)}
.cat-tabs{display:flex;flex-wrap:wrap;gap:8px}
.cat-tabs a{
  font-family:'Cairo',sans-serif;font-weight:600;font-size:clamp(11px,.85vw,13.5px);
  padding:8px 18px;border-radius:999px;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--gold-line-soft);
  transition:background-color var(--t-route) var(--ease),color var(--t-route) var(--ease),
             border-color var(--t-route) var(--ease);
}
.cat-tabs a:hover{border-color:var(--gold);color:var(--gold-text)}
.cat-tabs a.is-active{background:var(--petrol);color:#fff;border-color:var(--petrol)}

.blog-layout{display:grid;grid-template-columns:1fr .34fr;gap:clamp(16px,2.2vw,36px);
  align-items:start}
.cat-chip{display:inline-block;background:linear-gradient(150deg,#FFFDF8,#F4E8D6);
  border:1px solid var(--gold-line);border-radius:999px;padding:4px 14px;
  font-family:'Cairo',sans-serif;font-weight:600;font-size:clamp(10px,.78vw,12px);
  color:var(--gold-text)}

.feat-post{display:grid;grid-template-columns:1.05fr .95fr;gap:0;overflow:hidden;
  background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  box-shadow:var(--sh-soft);margin-block-end:clamp(14px,1.8vw,26px);
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease)}
.feat-post:hover{transform:translateY(-6px);box-shadow:var(--sh-raise)}
.feat-post__media{position:relative;overflow:hidden;min-height:clamp(180px,20vw,280px);
  background:linear-gradient(140deg,#F2E6D4,#EADFCB)}
.feat-post__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feat-post__media .cat-chip{position:absolute;inset-block-start:14px;inset-inline-start:14px;
  z-index:1;background:var(--paper)}
.feat-post__body{padding:clamp(18px,2vw,32px);display:flex;flex-direction:column;gap:10px;
  justify-content:center}
.feat-post h2{font-size:clamp(16px,1.5vw,25px);line-height:1.5}
.feat-post p{font-size:clamp(11.5px,.9vw,14px);color:var(--ink-2);line-height:1.9}
.post-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:clamp(10.5px,.8vw,12.5px);color:var(--ink-3);margin-block-start:4px}
.post-meta__who{display:flex;align-items:center;gap:8px}
.post-meta__who img{width:30px;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:1px solid var(--gold-line)}
.post-meta__who b{display:block;font-family:'Cairo',sans-serif;color:var(--ink);
  font-size:clamp(10.5px,.82vw,12.5px)}
.post-meta__who span{display:block;font-size:clamp(9.5px,.72vw,11.5px)}
.post-meta span.dot{display:inline-flex;align-items:center;gap:5px}
.post-meta svg{width:13px;height:13px;color:var(--gold-deep)}

.post-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.post-card .post-meta{margin-block-start:auto;padding-block-start:10px;
  border-block-start:1px solid var(--gold-line-soft)}
.post-card__media .cat-chip{position:absolute;inset-block-start:12px;inset-inline-start:12px;
  z-index:1;background:var(--paper)}
.post-card__media{position:relative}

.post-row{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;
  background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:18px;
  padding:10px;box-shadow:var(--sh-soft);
  transition:transform var(--t-route) var(--ease),box-shadow var(--t-route) var(--ease)}
.post-row:hover{transform:translateY(-4px);box-shadow:var(--sh-raise)}
.post-row img{width:100%;height:auto;aspect-ratio:1.1;object-fit:cover;border-radius:12px;
  background:linear-gradient(140deg,#F2E6D4,#EADFCB)}
.post-row h3{font-size:clamp(11px,.86vw,13.5px);line-height:1.6}
.post-row .post-meta{margin-block-start:6px;border:0;padding:0;gap:10px}

.side-card{background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);padding:clamp(16px,1.8vw,24px);box-shadow:var(--sh-soft);
  margin-block-end:clamp(12px,1.6vw,22px)}
.side-card h3{font-size:clamp(13px,1.05vw,16px);text-align:center;margin-block-end:14px}
.side-list{display:grid;gap:2px}
.side-list a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  font-size:clamp(11.5px,.88vw,13.5px);color:var(--ink);
  transition:background-color var(--t-route) var(--ease),color var(--t-route) var(--ease)}
.side-list a:hover{background:rgba(201,165,95,.1);color:var(--gold-text)}
.side-list svg{width:17px;height:17px;color:var(--gold-deep);flex:0 0 auto}
.side-read{display:grid;gap:10px}
.side-read a{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center}
.side-read img{width:100%;height:auto;aspect-ratio:1.1;object-fit:cover;border-radius:10px;
  background:linear-gradient(140deg,#F2E6D4,#EADFCB)}
.side-read b{display:block;font-family:'Cairo',sans-serif;font-weight:600;
  font-size:clamp(10.5px,.82vw,12.5px);color:var(--ink);line-height:1.6}
.side-read span:not(.tq-ltr){display:block;margin-block-start:3px;
  font-size:clamp(9.5px,.72vw,11.5px);color:var(--ink-3)}
.side-read a:hover b{color:var(--gold-text)}

.newsletter{position:relative;overflow:hidden;border-radius:var(--r-card);color:#fff;
  background:linear-gradient(150deg,var(--petrol-deep),var(--petrol) 60%,#064B44);
  padding:clamp(18px,2vw,26px);text-align:center}
.newsletter::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-color:var(--gold-warm);
  -webkit-mask-image:url('../img/script-tile.webp');
  mask-image:url('../img/script-tile.webp');
  -webkit-mask-size:var(--script-tile) auto;mask-size:var(--script-tile) auto;
  opacity:var(--script-op-dark);
}
.newsletter>*{position:relative}
.newsletter h3{color:#fff;font-size:clamp(13px,1.05vw,16px)}
.newsletter p{margin-block-start:8px;font-size:clamp(10.5px,.82vw,12.5px);
  color:rgba(255,255,255,.76);line-height:1.8}
.newsletter form{display:flex;align-items:center;gap:8px;margin-block-start:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(212,180,118,.42);
  border-radius:999px;padding:5px 6px 5px 16px}
.newsletter input{flex:1;min-width:0;border:0;background:none;outline:none;color:#fff;
  font:inherit;font-size:clamp(10.5px,.82vw,12.5px)}
.newsletter input::placeholder{color:rgba(255,255,255,.55)}
.newsletter button{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;
  place-items:center;background:var(--gold-warm);color:var(--petrol-deep);
  transition:background-color var(--t-route) var(--ease)}
.newsletter button:hover{background:#DFC28A}
.newsletter button svg{width:16px;height:16px}

/* ==========================================================================
   تواصل معنا: بطاقات + نموذج + خريطة + أسئلة
   ========================================================================== */
/* TQ-CONTACT-EVEN · العمودان ينتهيان معا.
   بطاقات الطرق أربع فتطول، والنموذج أقصر منها بنحو مئة وستين بكسلا —
   فيقف قاعاه متفاوتين ويقرأ اللوح ناقصا. و`stretch` وحدها تمدد
   البطاقة وتترك القاع فارغا؛ فتمتص الفائض **خانة الرسالة**: صف
   الشبكة الأخير يأخذ ما بقي، وهو الحقل الوحيد الذي تنفعه كل زيادة. */
.contact-split{display:grid;grid-template-columns:.42fr 1fr;gap:clamp(14px,2vw,32px);
  align-items:stretch}
.form-card{display:flex;flex-direction:column}
.form-card form{flex:1;display:flex;flex-direction:column}
/* عمود البطاقات: تباعد بالفجوة لا بهامش على كل بطاقة — الهامش السفلي
   كان يعلق تحت آخر بطاقة فيفترق قاع العمودين بلا سبب. */
.contact-ways{display:flex;flex-direction:column;gap:12px}
.contact-card{display:flex;align-items:flex-start;gap:14px;background:var(--paper);
  border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  padding:clamp(14px,1.6vw,22px);box-shadow:var(--sh-soft);
  transition:transform var(--t-route) var(--ease),box-shadow var(--t-route) var(--ease)}
a.contact-card:hover{transform:translateY(-4px);box-shadow:var(--sh-raise)}
/* بطاقة بلا وجهة: لا ترتفع عند المرور ولا تعد بنقرة. ولونها الخافت
   يقول «ليست جاهزة» قبل أن يقرأ الزائر «قريبا». */
.contact-card.is-soon{box-shadow:none;background:color-mix(in oklab,var(--paper) 82%,var(--cream))}
.contact-card.is-soon .ico{filter:grayscale(.35);opacity:.72}
/* `.contact-card b{display:block}` أخص من صنف واحد فتغلبه، والرقاقة
   تمتد عرض البطاقة كلها فتقرأ حقلا فارغا لا وسما. */
.contact-card b.contact-card__soon{display:inline-block;inline-size:fit-content;
  margin-block-start:6px;padding:2px 10px;
  border-radius:999px;background:var(--cream);border:1px dashed var(--gold-line-soft);
  font-family:'Cairo',sans-serif;font-size:clamp(10px,.76vw,12px);color:var(--ink-3)}
/* «زورنا في مقرنا» في بطاقة الموقع: البطاقة كانت ترسو على `#visit`
   ولا شيء فيها يقول ذلك، فتقرأ نصا لا رابطا. */
.contact-card__go{display:inline-flex;align-items:center;gap:6px;margin-block-start:8px;
  color:var(--gold-deep);font-size:clamp(11px,.84vw,13px)}
.contact-card__go svg{inline-size:14px;block-size:14px;
  transition:transform var(--t-route) var(--ease)}
a.contact-card:hover .contact-card__go svg{transform:translateX(-3px)}
.contact-card .ico{flex:0 0 auto;width:clamp(40px,3.2vw,50px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:var(--gold-warm);
  background:linear-gradient(155deg,var(--petrol-lift),var(--petrol-deep))}
.contact-card .ico svg{width:48%;height:48%}
.contact-card h3{font-size:clamp(12.5px,1vw,15.5px)}
.contact-card p{margin-block-start:5px;font-size:clamp(10.5px,.82vw,12.5px);color:var(--ink-3);
  line-height:1.75}
.contact-card b{display:block;margin-block-start:6px;font-family:'Cairo',sans-serif;
  font-size:clamp(11.5px,.9vw,14px);color:var(--petrol)}

.form-card{background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);padding:clamp(20px,2.4vw,36px);box-shadow:var(--sh-soft)}
.form-card h2{font-size:clamp(16px,1.5vw,24px);text-align:center}
.form-card>p{margin-block-start:8px;text-align:center;color:var(--ink-3);
  font-size:clamp(11.5px,.88vw,13.5px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.3vw,18px);
  margin-block-start:clamp(18px,2.2vw,30px);flex:1;
  grid-template-rows:auto auto minmax(132px,1fr)}
/* الصفوف الثلاثة تصف شبكة **عمودين**؛ ومتى صارت عمودا واحدا صارت
   خمسة صفوف، فيقع `minmax(132px,1fr)` على حقل الجوال فيمدده ارتفاع
   خانة رسالة. فيسقط الوصف مع أول تكديس. */
@media (max-width:680px){ .form-grid{grid-template-rows:none} }
.form-field{display:flex;align-items:center;gap:10px;background:var(--cream);
  border:1px solid var(--gold-line-soft);border-radius:14px;padding:12px 16px;
  transition:border-color var(--t-route) var(--ease),box-shadow var(--t-route) var(--ease)}
.form-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,165,95,.16)}
.form-field>svg{width:17px;height:17px;color:var(--gold-deep);flex:0 0 auto;align-self:flex-start;
  margin-block-start:2px}
.form-field input,.form-field textarea,.form-field select{
  flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;color:var(--ink);
  font-size:clamp(11.5px,.9vw,14px)}
/* TQ-FORM-GRIP · مقبض التمديد كان يرسم شرطة مائلة في الركن السفلي
   الابتدائي، داخل حشو الحقل وفوق لا شيء — فيقرأ حرفا مطبوعا خطأ لا
   مقبضا. و`field-sizing` تكبر الحقل مع النص فتغني عنه أصلا حيث تدعم،
   والحد الأدنى يكفي رسالة قصيرة حيث لا تدعم. */
.form-field textarea{min-block-size:132px;block-size:100%;line-height:1.9;resize:none}
/* TQ-FORM-TEL · الرقم يلاصق مفتاح الدولة.
   الحقل صف مرن والمدخل يأخذ ما بقي منه، فينتهي الرقم في أقصى طرف
   والمفتاح `+966` في الطرف المقابل — بينهما عرض الحقل كله، فيقرآن
   قيمتين لا قيمة واحدة. و`ltr` لأن الأرقام تكتب من اليسار، والمحاذاة
   إلى الحافة الملاصقة للمفتاح. */
.form-field input[type="tel"]{direction:ltr;text-align:right;unicode-bidi:isolate}
/* `stretch` لا `flex-start`: الأخيرة تقلص الخانة إلى ارتفاع نصها
   فيبقى الصف الممدد فارغا تحتها. والأيقونة تعلق أعلاها بـ`align-self`
   الخاص بها فلا تتمدد معها. */

.form-field--full{grid-column:1/-1;align-items:stretch}
.form-field--invalid{border-color:#C2556A;box-shadow:0 0 0 3px rgba(194,85,106,.14)}
.form-prefix{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding-inline-end:10px;
  margin-inline-end:2px;border-inline-end:1px solid var(--gold-line-soft);
  font-size:clamp(11px,.86vw,13px);color:var(--ink-2)}
.form-prefix svg{width:12px;height:12px;color:var(--gold-deep)}
.form-card .btn{margin-block-start:clamp(16px,2vw,26px);width:100%}
.form-note{margin-block-start:12px;text-align:center;font-size:clamp(10.5px,.8vw,12.5px);
  color:var(--ink-3)}
.form-ok{display:none;margin-block-start:14px;padding:14px 18px;border-radius:14px;
  background:rgba(12,120,108,.1);border:1px solid rgba(12,120,108,.34);
  color:var(--petrol);font-size:clamp(11.5px,.88vw,13.5px);text-align:center}
.form-ok.is-on{display:block}

.visit{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:0;overflow:hidden;
  border-radius:var(--r-panel);border:1px solid var(--gold-line-soft);box-shadow:var(--sh-card)}
.visit__map{position:relative;background:#EFE7DA;min-height:clamp(200px,20vw,290px)}
.visit__map svg{position:absolute;inset:0;width:100%;height:100%}
.visit__panel{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--petrol-deep),var(--petrol) 55%,#064B44);
  padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;
  justify-content:center;gap:clamp(12px,1.4vw,18px);text-align:center}
.visit__panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-color:var(--gold-warm);
  -webkit-mask-image:url('../img/script-tile.webp');
  mask-image:url('../img/script-tile.webp');
  -webkit-mask-size:var(--script-tile) auto;mask-size:var(--script-tile) auto;
  opacity:var(--script-op-dark);
}
/* عمود القراءة داخل اللوح.
   اللوح أوسع أعمدة الثلاثة لأن النص كله فيه، ولكن العنوان وبنوده لا
   يحتاجان ذلك العرض — فتلتصق أسطرها بالحافة الابتدائية ويبقى نصف
   اللوح فراغا يقرأ خطأ في المحاذاة لا سعة. فيقيد المحتوى بعمود واحد
   يتوسط، والنص فيه محاذ إلى مبتدئه كما ينبغي للعربية. */
.visit__panel>*{position:relative;inline-size:min(100%,42ch);margin-inline:auto}
.visit__panel h2{color:var(--gold-warm);font-size:clamp(15px,1.4vw,22px)}
.visit__panel>p,.visit__head p{color:rgba(255,255,255,.76);font-size:clamp(11px,.86vw,13px)}
.visit__head p{margin-block-start:6px}

/* ── العنوان في اللوح ──
   سطر واحد يقول أين، ودبوس في مبتدئه. والمحاذاة `start` لا `center`:
   ثلاثة أسطر عنوان موسطة تصنع مثلثا مسننا يقرأ ببطء. */
.visit__addr{
  display:flex;gap:10px;align-items:flex-start;font-style:normal;text-align:start;
  padding:clamp(10px,1.1vw,14px) clamp(12px,1.2vw,16px);
  border:1px solid rgba(212,180,118,.28);border-radius:var(--r-card);
  background:rgba(212,180,118,.07);
}
.visit__addr svg{inline-size:16px;block-size:16px;flex:none;margin-block-start:2px;
  color:var(--gold-warm)}
.visit__addr span{font-size:clamp(10.5px,.8vw,12.5px);line-height:1.75;
  color:rgba(255,255,255,.82)}

/* ── TQ-VISIT-ICO2 · صف لا عمود، ورسم بلا شارة ──
   الشرح كاملا في `contact_us.php` عند الوسم. وخلاصته: الحلقة الدائرية
   كانت تكرر ظل الأيقونة (ساعة داخل دائرة = دائرتان متحدتا المركز،
   موقف داخل دائرة = إطار داخل إطار)، فتمحو ما يفرق الثلاثة ثم تضاعفه.
   والبنية تأتي من الصف: أيقونة في المبتدأ وسطران بجوارها. */
.visit__items{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(8px,.9vw,12px);text-align:start}
.visit__items li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(10px,1vw,14px);
  align-items:start;padding-block:clamp(8px,.9vw,12px);
}
/* فاصل شعري بين البنود — يجمع الثلاثة قائمة واحدة بدل ثلاث جزر. */
.visit__items li+li{
  border-block-start:1px solid;
  border-image:linear-gradient(90deg,transparent,rgba(212,180,118,.3),transparent) 1;
}
.visit__ico{inline-size:clamp(20px,1.7vw,24px);block-size:clamp(20px,1.7vw,24px);
  flex:none;color:var(--gold-warm);margin-block-start:1px}
.visit__items b{display:block;font-family:'Cairo',sans-serif;
  font-size:clamp(11px,.86vw,13px);color:#fff;line-height:1.5}
.visit__items span:not(.tq-ltr){display:block;margin-block-start:3px;
  font-size:clamp(10px,.78vw,12px);color:rgba(255,255,255,.7);line-height:1.65}
.visit__cta{align-self:stretch;justify-content:center;margin-block-start:2px}
.visit__photo{position:relative;background:linear-gradient(140deg,#F2E6D4,#EADFCB)}
.visit__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.faq-layout{display:grid;grid-template-columns:1fr .3fr;gap:clamp(14px,2vw,30px);
  align-items:start}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px)}
.faq-item{background:var(--paper);border:1px solid var(--gold-line-soft);border-radius:16px;
  overflow:hidden;transition:border-color var(--t-route) var(--ease)}
.faq-item.is-open{border-color:var(--gold-line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:14px 18px;text-align:start;font:inherit;font-family:'Cairo',sans-serif;
  font-weight:600;font-size:clamp(11.5px,.9vw,14px);color:var(--ink);cursor:pointer}
.faq-q svg{flex:0 0 auto;width:17px;height:17px;color:var(--gold-deep);
  transition:transform var(--t-route) var(--ease)}
.faq-item.is-open .faq-q svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-route) var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 18px 16px;font-size:clamp(11px,.86vw,13px);color:var(--ink-2);
  line-height:1.95}
.help-card{position:relative;overflow:hidden;border-radius:var(--r-card);text-align:center;
  background:linear-gradient(150deg,#FFFDF8,#F4E9D8);border:1px solid var(--gold-line);
  padding:clamp(18px,2vw,28px);box-shadow:var(--sh-soft)}
.help-card .ico{width:clamp(42px,3.4vw,54px);aspect-ratio:1;margin-inline:auto;border-radius:50%;
  display:grid;place-items:center;color:var(--gold-warm);
  background:linear-gradient(155deg,var(--petrol-lift),var(--petrol-deep))}
.help-card .ico svg{width:48%;height:48%}
.help-card h3{margin-block-start:14px;font-size:clamp(13px,1.05vw,16px)}
.help-card p{margin-block-start:8px;font-size:clamp(10.5px,.82vw,12.5px);color:var(--ink-3);
  line-height:1.8}
.help-card .btn{margin-block-start:16px;width:100%;padding:12px 18px;
  font-size:clamp(11.5px,.88vw,13.5px)}

/* ==========================================================================
   قسم عمودين عام (نص + صورة)
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,48px);
  align-items:center}
.split__art img{width:100%;height:auto;aspect-ratio:1.42;object-fit:cover;
  border-radius:var(--r-card);border:1.5px solid var(--gold-line);
  box-shadow:var(--sh-card);background:linear-gradient(140deg,#F2E6D4,#EADFCB)}

/* ==========================================================================
   الاستجابة
   ========================================================================== */
@media (max-width:1180px){
  .grid-6,.grid-5{grid-template-columns:repeat(3,1fr)}
  .stats-band__grid{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .stats-band__item:nth-child(4)::after{display:none}
  .timeline{grid-template-columns:repeat(3,1fr);row-gap:26px}
  .timeline::before{display:none}
  .showcase{grid-template-columns:1fr 1fr}
  .showcase__panel{grid-column:1/-1}
  .blog-layout{grid-template-columns:1fr .4fr}
}
@media (max-width:980px){
  .page-hero__grid{grid-template-columns:1fr;text-align:center}
  .page-hero__copy{margin-inline:auto}
  .page-hero__lede{margin-inline:auto}
  .page-hero__cta,.hero-mini{justify-content:center}
  .page-hero__art{order:-1}
  .page-hero__arch{width:min(100%,340px)}
  .grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr)}
  .stat-strip{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .stat-strip__item:nth-child(3)::after{display:none}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .step:nth-child(3)::after{display:none}
  .contact-split,.faq-layout,.blog-layout,.split{grid-template-columns:1fr}
  .visit{grid-template-columns:1fr}
  .visit__map,.visit__photo{min-height:220px}
  .feat-post{grid-template-columns:1fr}
  .feat-post__media{min-height:200px}
  .showcase{grid-template-columns:1fr}
  .stats-band--art{grid-template-columns:1fr}
  .stats-band--art img{display:none}
  .appband{grid-template-columns:1fr;text-align:center}
  .appband__copy>p{margin-inline:auto}
  .appband__art{order:-1;min-height:0;margin-block-end:clamp(14px,2vw,26px)}
  .appband .stores{justify-content:center}
  .appband__list .hero-mini__item{justify-content:center;text-align:start}
}
@media (max-width:680px){
  .grid-4,.grid-5,.grid-6,.stat-strip,.steps,.faq-grid,.grid-2,
  .form-grid,.stats-band__grid,.timeline{grid-template-columns:1fr}
  .stat-strip__item::after,.step::after,.stats-band__item::after{display:none!important}
  /* القائمة عمود واحد أصلا منذ TQ-VISIT-ICO2، فلا شيء يكدس هنا.
     والفاصل صار أفقيا بين صفين فيبقى على كل مقاس. */
  .dash__body{grid-template-columns:1fr}
  .dash__kpis{grid-template-columns:repeat(3,1fr)}
  .appband__list{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-RESP · الشبكات والمكونات على الجوال
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  .stage-picker{grid-template-columns:repeat(2,1fr)}
  .book-card__cover{aspect-ratio:3/4}
  .teacher-card__media img{aspect-ratio:1/1;height:auto}
  .directory-bar,.blog-filter{flex-direction:column;align-items:stretch;gap:10px}
  .directory-bar select,.directory-bar input,.blog-filter input{width:100%}
  .crumbs{font-size:.78rem;flex-wrap:wrap}
  .path-facts{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:480px){
  /* عمود واحد: البطاقة بعرض الشاشة، فالصورة ترى والنص يقرأ */
  .grid-4,.grid-5,.grid-6,.cards-3,.stat-strip,.steps,.faq-grid,
  .grid-2,.form-grid,.stats-band__grid,.timeline,.visit__items,
  .appband__list,.stage-picker{grid-template-columns:1fr}
  .dash__kpis{grid-template-columns:repeat(2,1fr)}   /* الأرقام قصيرة فعمودان يكفيان */
  .icard{padding:18px}
  .form-card{padding:20px 16px}
  .page-hero h1{font-size:clamp(26px,7.4vw,34px)}
  .post-row{grid-template-columns:72px 1fr;gap:10px}
  .side-read{grid-template-columns:56px 1fr}
  .subject-card__meta{flex-wrap:wrap;gap:8px}
  .carousel>.grid-4>*{flex:0 0 min(78vw,300px)}   /* بطاقة كاملة تقريبا + طرف التالية */
  .carousel__nav{display:none}                     /* السحب أطبع من زرين ضيقين */
}

@media (max-width:360px){
  .icard{padding:15px}
  .book-card__body,.subject-card__body{padding:14px}
}

/* TQ-ICON-GUARD — أيقونة `<use>` لا تترك بلا نسبة أبعاد.
   `<svg>` بلا `viewBox` عنصر مستبدل بلا نسبة جوهرية، فـ`height:auto`
   تحسب من مقاس الكائن الافتراضي ٣٠٠×١٥٠ — لا من الرسمة. الحارس يجعل
   الخطأ مستحيلا بدل أن يكون محتملا. */
.stat-strip__item svg,.stats-band__item svg,.tcard__mark,
.hero-mini__item .ico svg,.icard .ico svg,.subject-card__badge svg,
.book-card__body svg,.subject-card__meta svg,.teacher-card__meta svg{aspect-ratio:1}

/* وحارس أعم: أي `<svg>` بلا `viewBox` داخل الموقع الجديد لا يترك
   بارتفاع نسبي — النسبة من ارتفاع غير محدد تسقط إلى ١٥٠px الافتراضية. */
.tq-tabbar__ico svg,.nav__auth svg{aspect-ratio:1}

/* ══════════════════════════════════════════════════════════════════
   TQ-ROWS · صفوف البنود وأشرطة الأرقام
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* `.hero-mini` فليكس مغلف ولا يصير شبكة في أي نقطة انكسار، فعرض
     البند الذاتي (~١٥٠px) يسمح ببندين ثم يتيم — و`justify-content:center`
     يتوسط اليتيم فيبرز. والشبكة تلغي التيتم من أصله. */
  .hero-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
             gap:14px;justify-content:stretch}
  .hero-mini__item{min-width:0}
  .hero-mini__item b,.hero-mini__item span{overflow-wrap:anywhere}

  /* بند الرقم مدمجا: أيقونة إلى جانب رقمه ووصفه، لا فوقهما بفراغ */
  .stats-band__item{display:grid;grid-template-columns:auto 1fr;
                    column-gap:10px;align-items:center;text-align:start;padding-inline:0}
  .stats-band__item svg{grid-row:1/3;margin-inline:0}
  .stats-band__item b{margin-block-start:0}
  .stat-strip__item{justify-content:flex-start;text-align:start}
  .stats-band__grid,.stat-strip{grid-template-columns:repeat(2,1fr);row-gap:16px}
}

@media (max-width:480px){
  .hero-mini{grid-template-columns:1fr;gap:12px;text-align:start}
  .hero-mini__item{justify-content:flex-start}
  .tcard{padding:18px}
  .tcard__mark{margin-block-end:6px}
}

@media (max-width:360px){
  .stats-band__grid,.stat-strip{grid-template-columns:1fr}
}

/* TQ-FRAME-GUARD — `svg.frame` خارج `.page-hero__arch` لا يرسم أسود.
   `<path>` بلا `fill` يرث الأسود الافتراضي، وبلا قياس يملأ حاويته —
   فقوس أدرج في غير موضعه يبتلع الصفحة كاملة. الحارس يجعل الخطأ
   غير مرئي بدل أن يكون كارثيا. */
svg.frame path{fill:none}
:not(.page-hero__arch):not(.p26d-card__arch)>svg.frame{display:none}

/* ══════════════════════════════════════════════════════════════════
   TQ-FORMS · أصناف صفحات الدخول والتسجيل
   ══════════════════════════════════════════════════════════════════ */

/* غلاف ضيق: النموذج يقرأ في عمود لا في عرض شاشة. */
.shell--narrow{max-width:min(560px,100%)}

/* TQ-SHELL-READ — عمود القراءة، لا عمود النموذج.
   `shell--narrow` قيست لبطاقة قصيرة (404، نموذج): خمسمئة وستون بكسلا.
   ثم لبستها الصفحات النصية والأسئلة الشائعة، فصارت وثيقة من ألف كلمة
   تقرأ في شريط عرضه ثلث الشاشة، وعنوانها فوقه ممتد على الغلاف كله —
   فيقرأ العنوان في ناحية والنص في ناحية. وأوضح دليل أن العرض لم يقصد:
   `TQ-FAQ1COL` أدناه تطلب `min(820px,100%)` للأكورديون فلا تنالها،
   لأن الغلاف فوقها يقص عند خمسمئة وستين.

   والقياس تسعمئة وستون: يسع نحو خمسة وسبعين حرفا في السطر — وهو حد
   القراءة المريحة — ويترك على الجانبين هامشا **متساويا**. والتساوي هو
   المقصود: الفجوة لا ترى فراغا حين تكون مقصودة ومتماثلة، وإنما ترى
   خطأ حين يقف العنوان في أقصى ناحية والنص في وسط الصفحة. ولذلك يلبس
   هيرو هذه الصفحات الغلاف نفسه — انظر `$tq_shell` في `site_pagehero`.

   وأبعد من هذا لا يملأ الشاشة وإنما يكسر القراءة: السطر الذي يجاوز
   ثمانين حرفا تضل العين في رجعتها إلى أوله فتعيد السطر أو تقفزه. */
.shell--read{max-width:min(1040px,100%)}

/* ولوح النص يتنفس: حشوة البطاقة الصغيرة تخنق وثيقة من ألف كلمة. */
.icard.prose{padding:clamp(22px,2.8vw,46px)}

/* والأكورديون في صفحته المفردة يملأ عمود القراءة؛ وقيد الثمانمئة
   والعشرين يبقى لـ`contact_us` حيث الأسئلة في عمود بجانب بطاقة.
   ومقاسه كذلك: أربعة عشر للسؤال وثلاثة عشر للجواب قيست لذلك العمود
   الضيق، وهي في صفحة قائمة بذاتها حرف يجهد لا يقرأ. */
.shell--read .faq-grid{max-inline-size:100%}
.shell--read .faq-q{font-size:clamp(14px,1.08vw,16.5px);padding:17px 22px}
.shell--read .faq-a p{font-size:clamp(13.5px,1.02vw,15.5px);padding:0 22px 18px}

.form-card{padding:clamp(22px,3vw,34px)}
.form-card .form-field{margin-block-end:12px}
.form-card .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block-end:12px}
.form-card .form-grid .form-field{margin-block-end:0}
.form-card .btn--block{width:100%;justify-content:center;margin-block-start:6px}

/* السطور تحت النموذج: «نسيت كلمة المرور؟» و«ليس لديك حساب؟» */
.form-alt{margin-block-start:14px;text-align:center;font-size:.92rem;color:var(--ink-2)}
.form-alt a{color:var(--gold-text);font-weight:700}
.form-alt a:hover{text-decoration:underline}

/* الموافقة: خانة اختيار حقيقية بمساحة لمس كافية */
.form-consent{display:flex;align-items:flex-start;gap:9px;margin-block:10px 4px;
  font-size:.9rem;color:var(--ink-2);cursor:pointer;line-height:1.6}
.form-consent input{inline-size:17px;block-size:17px;margin:2px 0 0;accent-color:var(--petrol);flex:0 0 auto}

/* حقول المعلم تظهر عند طلبها وحدها */
.form-teacher{display:grid;gap:12px;margin-block-end:12px}
.form-teacher .form-field{margin-block-end:0}
.form-teacher textarea{width:100%;border:0;background:transparent;font:inherit;color:inherit;resize:vertical}
.form-teacher textarea:focus{outline:none}

@media (max-width:480px){
  .form-card{padding:18px 16px}
  .form-card .form-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-MISSING · أصناف كانت في الوسم بلا تعريف
   ══════════════════════════════════════════════════════════════════ */

/* سطر تحت عنوان الصفحة */
.page-hero__lead{margin-block-start:10px;font-size:clamp(14px,1.1vw,17px);
  color:var(--ink-2);max-width:52ch;line-height:1.9}

/* ── نص قانوني طويل: التنفس أهم من الزخرفة ────────────────────
   وثيقة تقرأ لا تتصفح: سطر مريح، وعناوين تميز، وقوائم ترقم. */
/* TQ-PROSE-SIZE — حرف الوثيقة لا حرف البطاقة.
   كان السقف خمسة عشر فاصلة خمسة: مقاس سطر أو سطرين تحت أيقونة، لا
   مقاس وثيقة تقرأ من أولها إلى آخرها. والعربية تحتاج فوق ذلك: نقاطها
   وهمزاتها تفرق الحروف المتشابهة، وهي أول ما يضيع في الحجم الصغير. */
.prose{font-size:clamp(15px,1.15vw,17.5px);line-height:2.05;color:var(--ink-2)}
.prose>*+*{margin-block-start:1.05em}
.prose h2{font-size:clamp(19px,1.7vw,25px);color:var(--ink);margin-block-start:1.8em}
.prose h3{font-size:clamp(16px,1.35vw,20px);color:var(--ink);margin-block-start:1.4em}
.prose h2:first-child,.prose h3:first-child{margin-block-start:0}
.prose p{margin:0}
.prose ul,.prose ol{margin:0;padding-inline-start:1.4em}
.prose li{margin-block-start:.5em}
.prose li::marker{color:var(--gold-deep)}
.prose a{color:var(--gold-text);font-weight:700;text-decoration:underline}
.prose strong,.prose b{color:var(--ink)}
.prose hr{border:0;border-block-start:1px solid var(--gold-line-soft);margin-block:1.8em}
.prose table{width:100%;border-collapse:collapse;font-size:.95em}
.prose th,.prose td{border:1px solid var(--gold-line-soft);padding:.6em .8em;text-align:start}
.prose th{background:var(--beige);color:var(--ink);font-weight:700}

/* ── صفحة المسار ────────────────────────────────────────────────── */
.tq-cols-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,34px);align-items:start}
.path-main{display:grid;gap:clamp(16px,2vw,24px)}
.path-price{font-size:clamp(24px,2.6vw,34px);font-weight:800;color:var(--ink);margin:0 0 4px}
.path-price--soon{font-size:clamp(15px,1.3vw,19px);color:var(--ink-3);font-weight:700}
.path-syllabus{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.path-syllabus li{display:flex;align-items:center;gap:9px;padding:9px 12px;
  background:var(--cream);border:1px solid var(--gold-line-soft);border-radius:12px;
  font-size:.95em;color:var(--ink-2)}
.path-syllabus li svg{width:16px;height:16px;aspect-ratio:1;color:var(--gold-deep);flex:0 0 auto}
.path-back{display:block;margin-block-start:14px;text-align:center;
  font-size:.9rem;color:var(--gold-text);font-weight:700}
.path-back:hover{text-decoration:underline}
.icard--sticky{position:sticky;top:calc(var(--header-h) + 16px)}

@media (max-width:980px){
  .tq-cols-2{grid-template-columns:1fr}
  .icard--sticky{position:static}
}

/* TQ-INPUT-SHRINK — `input` عنصر مقاسه الافتراضي ~20 محرفا، وفي حاوية
   فليكس لا ينكمش دونه (`min-width:auto`) — فيفيض النص خارج الصندوق
   في العمود الضيق. */
.form-field{min-width:0}
.form-field input,.form-field select,.form-field textarea{min-width:0;width:100%;flex:1 1 auto}

/* ══════════════════════════════════════════════════════════════════
   TQ-AUTH · صفحات الدخول والتسجيل
   ══════════════════════════════════════════════════════════════════ */
.shell--auth{max-width:min(980px,100%)}
.auth-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(18px,2.4vw,30px);align-items:stretch}

.auth-brand{display:block;margin:0 auto clamp(14px,2vw,22px);width:fit-content}
.auth-brand img{height:clamp(58px,5.2vw,78px);width:auto;display:block}
@media (max-width:480px){.auth-brand img{height:56px}}

.auth-aside{position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--petrol);box-shadow:var(--sh-card);min-block-size:100%}
.auth-aside>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.auth-aside__body{position:relative;padding:clamp(20px,2.6vw,30px);
  display:flex;flex-direction:column;justify-content:flex-end;min-block-size:100%;
  background:linear-gradient(180deg,rgba(1,33,31,.25),rgba(1,33,31,.9))}
.auth-aside h2{color:#fff;font-size:clamp(17px,1.6vw,22px);margin:0 0 14px}

.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.auth-points li{display:flex;align-items:flex-start;gap:10px;color:var(--gold-on-dark);font-size:.9rem}
.auth-points li svg{width:19px;height:19px;aspect-ratio:1;flex:0 0 auto;margin-block-start:2px;color:var(--gold-warm)}
.auth-points b{display:block;color:#fff;font-size:.95rem;margin-block-end:2px}

@media (max-width:820px){
  /* الشاشة الضيقة لا تحتمل زينة تبعد الحقول عن الإبهام */
  .auth-wrap{grid-template-columns:1fr}
  .auth-aside{display:none}
  .shell--auth{max-width:min(560px,100%)}
}

/* TQ-LAST3 — الثلاثة التي كشفها فحص الأصناف. */
.page-hero--path .page-hero__lead{max-width:60ch}
.path-buy{display:block}
.tq-tabbar__lbl{display:block;line-height:1.2;text-align:center}

/* TQ-WHYBAR — الشريط عمودان على الجوال لا عمود.
   بنوده سطران قصيران، فالعمود الواحد يمطه شريطا طوليا بلا داع —
   وعمودان يبقيانه قريبا من المربع كما ينبغي لشريط لا لقائمة. */
@media (max-width:680px){
  .features__bar{grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px 12px}
}
@media (max-width:380px){
  .features__bar{grid-template-columns:1fr!important}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-CHIP · شريحة المادة ووسم التصنيف
   ══════════════════════════════════════════════════════════════════ */

/* في التدفق لا بالتثبيت: حاويتها بلا `position` فكان أقرب سلف موضعي
   هو الشبكة كلها — تثبت كل الشرائح أسفل منتصفها وتتكدس. */
.teacher-card__chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin-block:4px 6px}
.teacher-card__chip{position:static!important;inset:auto!important;translate:none!important;
  display:inline-flex;align-items:center;
  background:var(--petrol);color:var(--gold-warm);
  border:1px solid rgba(212,180,118,.45);border-radius:999px;
  padding:5px 14px;white-space:nowrap;
  font-family:'Cairo',sans-serif;font-weight:600;font-size:clamp(10px,.78vw,12px)}

/* `.post-tag` لم يكن له تعريف في المشروع كله — فالتصنيف يلتصق بالعنوان */
.post-row__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.post-tag{display:inline-block;align-self:flex-start;
  padding:3px 10px;border-radius:999px;
  background:var(--gold-line-soft);color:var(--gold-text);
  font-family:'Cairo',sans-serif;font-weight:600;font-size:clamp(10px,.75vw,11.5px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:10px}

/* ══════════════════════════════════════════════════════════════════
   TQ-GATES · بوابات التسجيل الثلاث
   ══════════════════════════════════════════════════════════════════ */
.gate-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin-block-end:18px}
.gate-card{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:12px 8px;border-radius:14px;cursor:pointer;text-align:center;
  background:var(--cream);border:1px solid var(--gold-line-soft);color:var(--ink-2);
  font:inherit;transition:border-color var(--t-route) var(--ease),
    background var(--t-route) var(--ease),color var(--t-route) var(--ease)}
.gate-card svg{width:22px;height:22px;aspect-ratio:1;color:var(--gold-deep)}
.gate-card b{font-size:.92rem;color:var(--ink)}
.gate-card span{font-size:.7rem;line-height:1.4;opacity:.85}
.gate-card:hover{border-color:var(--gold)}
/* المختارة تعلن باللون **وبالحد** معا: اللون وحده لا يراه كل أحد. */
.gate-card.is-on{background:var(--petrol);border-color:var(--petrol);color:var(--gold-on-dark)}
.gate-card.is-on b{color:#fff}
.gate-card.is-on svg{color:var(--gold-warm)}

.gate-fields{display:grid;gap:12px;margin-block-end:12px}
.gate-fields[hidden]{display:none}

.form-hint{margin:-6px 0 12px;font-size:.78rem;color:var(--ink-3);line-height:1.7}

/* حقل الملف: زر عربي واسم الملف — بدل زر المتصفح بنصه الإنجليزي */
.file-btn{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;
  background:var(--beige);border:1px solid var(--gold-line);color:var(--gold-text);
  font-weight:600;font-size:.85rem;cursor:pointer;flex:0 0 auto}
.file-btn:hover{background:var(--gold-line-soft)}
.file-name{font-size:.8rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}

@media (max-width:480px){
  .gate-picker{grid-template-columns:1fr;gap:6px}
  .gate-card{flex-direction:row;justify-content:flex-start;gap:10px;text-align:start;padding:10px 12px}
  .gate-card span{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-CMP · بطاقة المسابقة — واحدة تخدم صفحة الباقات وصفحة المسابقات
   كان النظامان `.compgrid/.compcard` و`.comp-grid/.comp-card` يتشابهان
   في الاسم ويختلفان في كل شيء آخر، ولا يجمعهما إلا `.post-tag`.
   ══════════════════════════════════════════════════════════════════ */
/* فليكس لا شبكة: `auto-fit` تمدّ البطاقة الواحدة على عرض الصف كله،
   ومسابقة واحدة بعرض ألف بكسل تقرأ خطأ لا تصميما. */
.cmp-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.8vw,24px);
  max-inline-size:min(100%,1040px);margin-inline:auto
}
.cmp-grid>.cmp-card{flex:1 1 300px;max-inline-size:404px}
.cmp-card{
  display:flex;flex-direction:column;overflow:hidden;min-inline-size:0;
  background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);box-shadow:var(--sh-soft);
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease),
             border-color var(--t-entry) var(--ease)
}
.cmp-card:hover{transform:translateY(-3px);box-shadow:var(--sh-raise);border-color:var(--gold-line)}

/* رأس ملون بدل صورة: عمود `cover` فارغ في كل الصفوف، وصورة مخترعة
   أسوأ من لون يحمل المرحلة والحال. */
.cmp-card__head{
  position:relative;display:flex;align-items:center;gap:10px;overflow:hidden;
  padding:12px clamp(14px,1.5vw,18px);
  background:linear-gradient(120deg,var(--petrol),var(--petrol-deep));color:#fff
}
/* بلاطة الخط العربي زخرفة الرأس — كرأس بطاقة الباقة في الرئيسية.
   وكانت نجمة مطلقة تجلس خلف اسم المرحلة فتقرأ لطخة لا زخرفة. */
.cmp-card__head::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('../img/script-tile.webp') repeat;
  background-size:190px auto;opacity:.07;mix-blend-mode:screen
}
.cmp-card__stage{
  position:relative;font-family:'Cairo',sans-serif;font-weight:600;
  font-size:clamp(11px,.85vw,13px);color:var(--gold-warm)
}
.cmp-state{
  position:relative;margin-inline-start:auto;padding:3px 11px;border-radius:999px;
  font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(10px,.75vw,11.5px);white-space:nowrap
}
.cmp-state--open{background:rgba(46,160,110,.24);color:#9BE7C4;border:1px solid rgba(155,231,196,.42)}
.cmp-state--soon{background:rgba(212,180,118,.18);color:var(--gold-warm);border:1px solid rgba(212,180,118,.42)}
.cmp-state--over{background:rgba(255,255,255,.10);color:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.20)}

.cmp-card__body{
  flex:1;display:flex;flex-direction:column;gap:9px;min-inline-size:0;
  padding:clamp(15px,1.7vw,22px)
}
.cmp-card__body h3{margin:0;font-size:clamp(15px,1.15vw,17.5px);line-height:1.55}
.cmp-card__body h3 a{color:var(--ink)}
.cmp-card__body h3 a:hover{color:var(--gold-text)}
/* سطران لا أكثر: الأوصاف تتفاوت طولا فتتفاوت البطاقات ارتفاعا. */
.cmp-card__body>p{
  margin:0;color:var(--ink-3);font-size:clamp(12.5px,.9vw,13.5px);line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.cmp-card__facts{
  display:flex;flex-direction:column;gap:7px;margin-block-start:auto;
  padding-block-start:11px;border-block-start:1px dashed var(--gold-line-soft)
}
.cmp-card__facts span{
  display:flex;align-items:center;gap:8px;min-inline-size:0;
  color:var(--ink-2);font-size:clamp(12px,.88vw,13px)
}
.cmp-card__facts svg{inline-size:15px;block-size:15px;aspect-ratio:1;flex:none;color:var(--gold-deep)}
.cmp-card__facts b{font-weight:700;color:var(--ink)}
.cmp-card__cta{margin:0 clamp(15px,1.7vw,22px) clamp(15px,1.7vw,22px)}

/* في صفحة المسابقات تحمل البطاقة أزرار الحالات الخمس بدل زر التفاصيل */
.cmp-card__act{padding:0 clamp(15px,1.7vw,22px) clamp(15px,1.7vw,22px)}
.cmp-card__act .btn{inline-size:100%}
.cmp-card__act form{margin:0}
.cmp-card__act .tq-caption{margin:8px 0 0;text-align:center}

/* TQ-PATHFACTS — `.path-facts` كان بلا تعريف أساسي في المشروع كله:
   القاعدة الوحيدة له داخل `@media 680px` تضبط خصائص فليكس على عنصر
   ليس فليكس أصلا. فالحقائق تتراكم سطورا بلا فراغ، وأيقوناتها بلا
   `viewBox` ترسم بمقاس الكائن الافتراضي ٣٠٠×١٥٠. */
.path-facts{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px clamp(12px,1.6vw,22px);margin:0
}
.path-facts>span{
  display:inline-flex;align-items:center;gap:7px;min-inline-size:0;
  color:var(--ink-2);font-size:clamp(12px,.9vw,13.5px)
}
.path-facts svg{inline-size:16px;block-size:16px;aspect-ratio:1;flex:none;color:var(--gold-deep)}

@media (max-width:560px){
  .cmp-grid>.cmp-card{flex:1 1 100%;max-inline-size:none}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-COMP · المسابقات
   ══════════════════════════════════════════════════════════════════ */

/* إيضاح عدم الارتباط: يقرأ قبل البطاقات لا بعدها — تنبيه يأتي متأخرا
   لا ينفع من كون انطباعه سلفا. */
.comp-note{display:flex;align-items:flex-start;gap:12px;margin-block-end:clamp(18px,2.2vw,28px);
  background:var(--beige);border-color:var(--gold-line)}
.comp-note svg{width:22px;height:22px;aspect-ratio:1;color:var(--gold-deep);flex:0 0 auto;margin-block-start:2px}
.comp-note p{margin:0;font-size:.9rem;line-height:1.85;color:var(--ink-2)}

.comp-card{display:flex;flex-direction:column;gap:10px}
.comp-card .path-facts{margin-block-start:auto}
.comp-state{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;
  border-radius:12px;font-size:.88rem;font-weight:600}
.comp-state svg{width:17px;height:17px;aspect-ratio:1;flex:0 0 auto}
.comp-state--in{background:#E8F5EE;color:#14512F}

.comp-banner{position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:linear-gradient(120deg,var(--petrol),var(--petrol-deep));
  color:#fff;padding:clamp(22px,3vw,40px);box-shadow:var(--sh-card);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}
.comp-banner__body{min-width:0}
.comp-banner h2{color:#fff;margin:8px 0 6px;font-size:clamp(20px,2.2vw,30px)}
.comp-banner p{color:var(--gold-on-dark);margin:0 0 16px;max-width:56ch;line-height:1.9}
.comp-banner .post-tag{background:rgba(212,180,118,.22);color:var(--gold-warm)}
.comp-banner__art{width:clamp(70px,8vw,120px);height:clamp(70px,8vw,120px);
  aspect-ratio:1;color:rgba(212,180,118,.28);flex:0 0 auto}

@media (max-width:680px){
  .comp-banner{grid-template-columns:1fr;text-align:start}
  .comp-banner__art{display:none}
  .comp-note{flex-direction:column;gap:8px}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-HOME-V2 · إطار الفيديو · القادم قريبا · شريط الجامعات
   ══════════════════════════════════════════════════════════════════ */

/* ── إطار الهيرو ────────────────────────────────────────────────── */
.hero--video{padding-block:clamp(18px,2.4vw,34px) 0}
.hero__frame{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-panel);
  min-block-size:clamp(400px,58vh,580px);
  /* صفان لا صف: `align-items:center` وحدها كانت تدفع النص والشريط
     إلى الوسط معا. الأول `1fr` فيبقى النص متمركزا، والثاني `auto`
     فيجلس الشريط في القاع بارتفاعه هو. */
  display:grid;grid-template-rows:1fr auto;align-items:center;
  box-shadow:var(--sh-raise);
  /* TQ-HERO-GOLDRIM — إطار ذهبي خفيف جدا حول مربع الفيديو.
     حلقتان لا واحدة: حد خارجي يرسم الشكل، وحلقة داخلية شفافة
     تفصل الذهب عن الصورة فلا يبتلعه أول إطار فاتح في الفيديو.
     و`inset` لا `outline` كي تتبع الحلقة نصف القطر. */
  border:1px solid rgba(201,165,95,.55);
  box-shadow:var(--sh-raise),
             inset 0 0 0 1px rgba(255,255,255,.10),
             0 0 0 1px rgba(201,165,95,.16)
}
.hero__frame>*:not(.hero__bg){position:relative;z-index:2}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__poster,.hero__video{
  position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;display:block
}
/* الفيديو فوق الإطار الثابت ويظهر حين يبدأ — فلا فجوة بيضاء لحظة التحميل */
.hero__video{opacity:0;transition:opacity .6s ease;z-index:1}
.hero__video.is-on{opacity:1}
/* الحجاب بترولي: النص فوق مشهد يتبدل كل إطار، والحجاب الفاتح يكفي
   في لقطة ويرسب في التالية. أبيض عليه 12.7:1 في أسوأ إطار ممكن. */
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to left, rgba(1,33,31,.88) 0%, rgba(1,33,31,.70) 44%,
                             rgba(1,33,31,.42) 74%, rgba(1,33,31,.30) 100%),
    linear-gradient(to top, rgba(1,33,31,.52) 0%, rgba(1,33,31,0) 48%)
}
@media (max-width:980px){
  .hero__frame{min-block-size:clamp(360px,64vh,520px);border-radius:var(--r-card)}
  .hero__scrim{background:linear-gradient(to bottom,
    rgba(1,33,31,.58) 0%, rgba(1,33,31,.78) 55%, rgba(1,33,31,.90) 100%)}
}

/* النص داخل الإطار */
.hero--video .hero__copy{
  max-inline-size:min(100%,600px);
  padding:clamp(26px,4vw,56px) clamp(20px,3.4vw,52px)
}
.hero--video .hero__copy h1{color:#fff;text-shadow:0 2px 18px rgba(1,33,31,.35)}
.hero--video .hero__copy h1 .gold{color:var(--gold-on-dark)}
.hero--video .hero__lede{color:rgba(255,255,255,.92);max-inline-size:52ch}
.hero--video .hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero--video .btn--ghost-light{
  color:#fff;border:1px solid rgba(255,255,255,.55);background:transparent;
  display:inline-flex;align-items:center;gap:8px
}
.hero--video .btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ── السطر الذهبي وشريط المميزات داخل الإطار ───────────────────── */
.hero__eyebrow{
  margin:0 0 10px;font-family:'Cairo',sans-serif;font-weight:600;
  font-size:clamp(12px,1.05vw,15px);letter-spacing:.4px;
  color:var(--gold-on-dark)
}
/* الشريط على الفيديو لا تحته: بطاقة داكنة شفافة تفصل النص عن
   المشهد المتحرك، وحدها الفاتح يرسم حافتها فوق أي إطار. */
.hero__feats{
  margin:0 clamp(20px,3.4vw,52px) clamp(20px,2.6vw,34px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;
  padding:clamp(14px,1.6vw,20px) clamp(10px,1.6vw,22px);
  border-radius:var(--r-card);
  background:rgba(1,33,31,.42);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.hero__feat{
  position:relative;display:flex;align-items:center;gap:11px;
  padding-inline:clamp(8px,1.2vw,18px);min-inline-size:0
}
/* فاصل بين عمودين لا حول الشريط — كأسلوب `.stat-strip__item` */
.hero__feat+.hero__feat::after{
  content:'';position:absolute;inset-inline-end:100%;inset-block:14%;
  inline-size:1px;background:rgba(255,255,255,.18)
}
.hero__feat .ico{
  flex:0 0 auto;inline-size:clamp(36px,2.9vw,44px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:var(--gold-warm);
  background:rgba(255,255,255,.06);border:1px solid rgba(212,180,118,.55)
}
.hero__feat .ico svg{inline-size:48%;block-size:48%}
.hero__feat>div{min-inline-size:0}
.hero__feat b{
  display:block;font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(12.5px,1vw,15px);color:#fff;line-height:1.5
}
.hero__feat span{
  display:block;font-size:clamp(11px,.85vw,13px);
  color:rgba(255,255,255,.72);line-height:1.5
}
@media (max-width:980px){
  .hero__feats{
    grid-template-columns:minmax(0,1fr);gap:12px;
    margin-inline:clamp(14px,3vw,24px);margin-block-end:clamp(16px,3vw,24px)
  }
  .hero__feat+.hero__feat::after{display:none}
}

/* ── القادم قريبا ──────────────────────────────────────────────── */
/* TQ-SECTION-PLAIN — القسم يتميز بفاصل ومساحة لا بلون. كانت
   `--beige:#F8EFE3` على أرضية `--cream:#FAF4EC` — فارق ضئيل يقرأ بقعة
   لا قسما، ويجعل نصف الصفحة على لون ونصفها على آخر بلا سبب يقرأ.
   والقاعدة واحدة يقرؤها أربعة منتجين: صفحة الباقة والمسار والكتاب
   وشريط المسابقات المولد من PHP. */
.section--tint{
  border-block-start:1px solid var(--gold-line-soft);
  padding-block:clamp(28px,3.4vw,52px);
}
.upcoming{gap:clamp(18px,2.4vw,34px)}
.upcoming__title{font-size:clamp(15px,1.2vw,18px);margin-block-end:14px}
.upcoming__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.upcoming__list a{
  display:grid;gap:3px;padding:14px 16px;border-radius:var(--r-btn);
  background:var(--paper);border:1px solid var(--gold-line-soft);
  text-decoration:none;transition:border-color .18s ease,transform .18s ease
}
.upcoming__list a:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.upcoming__list b{font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(13px,1vw,15px);color:var(--ink)}
.upcoming__list span,.upcoming__list time{font-size:clamp(11.5px,.86vw,13px);color:var(--ink-3)}

.section-more{margin-block-start:clamp(22px,2.6vw,36px);text-align:center}

/* ── شريط الجامعات ──────────────────────────────────────────────── */
.unis__strip{
  margin-block-start:clamp(20px,2.4vw,34px);
  overflow:hidden;
  /* الطرفان يذوبان فلا يبدو الشريط مقصوصا */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.unis__track{
  display:flex;inline-size:max-content;gap:14px;
  animation:tq-unis 64s linear infinite
}
.unis__strip:hover .unis__track,
.unis__strip:focus-within .unis__track{animation-play-state:paused}
.unis__item{
  flex:none;display:grid;place-items:center;
  inline-size:172px;block-size:80px;padding:10px 14px;
  background:#fff;border:1px solid var(--gold-line-soft);border-radius:14px
}
.unis__item img{max-inline-size:100%;max-block-size:100%;
  inline-size:auto;block-size:auto;object-fit:contain}
/* النصف لأن الشريط مكرر مرتين — فالدورة تعود إلى نقطتها بلا قفزة */
@keyframes tq-unis{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .unis__track{animation:none}
  .unis__strip{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:680px){ .unis__item{inline-size:136px;block-size:66px} }

/* ══════════════════════════════════════════════════════════════════
   TQ-SVG-GUARD-ALL · لا أيقونة بلا مقاس
   `<svg>` بلا `viewBox` وبلا أبعاد يرسم 300×150. ظهر ثلاث مرات في
   أشرطة الأرقام وعلامة الاقتباس والشارة، ورابعة في زر الهيرو. فالحارس
   عام لا موضعي: كل أيقونة داخل زر أو رابط أو شارة لها مقاس.
   ══════════════════════════════════════════════════════════════════ */
/* كل أيقونة سبرايت: بلا `viewBox` وبلا أبعاد — وهي بعينها الحالة التي
   تنتج 300×150. والرسمات المقصودة تحمل `viewBox` فلا يمسها المحدد. */
svg:where(:not([viewBox]):not([width])){
  inline-size:1.1em; block-size:1.1em; flex:none
}
.btn .dir-icon, a .dir-icon{inline-size:1.05em;block-size:1.05em}

/* زر الهيرو الأساسي: ذهب على الفيديو لا بترول على بترول */
.hero--video .btn--primary{
  background:var(--gold);border-color:var(--gold);color:#17240F;font-weight:800
}
.hero--video .btn--primary:hover{background:var(--gold-warm);border-color:var(--gold-warm)}
.hero--video .hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* عمود «القادم قريبا»: لوح مستقل فيقرأ العمودان قائمتين لا كتلة */
.upcoming__col{
  background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);padding:clamp(18px,2vw,26px)
}
/* قسم الجامعات: شريطه يبلغ حافتي الشاشة، فلا حشو أفقي على القسم */
.unis{padding-inline:0}
.unis .shell{padding-inline:var(--gutter)}

/* ══════════════════════════════════════════════════════════════════
   TQ-BUNDLES · بطاقات الباقات
   ══════════════════════════════════════════════════════════════════ */
.bundles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);align-items:stretch
}
.bundle{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);padding:clamp(22px,2.4vw,32px);
  box-shadow:var(--sh-soft)
}
/* المبرزة أعلى قليلا وبإطار ذهبي — والأخريان ظاهرتان بجوارها
   فالمقارنة تبقى ممكنة، والإبراز يرشد لا يحجب. */
.bundle--featured{
  border-color:var(--gold);box-shadow:var(--sh-raise);
  background:linear-gradient(180deg,var(--cream-hi),var(--paper))
}
@media (min-width:981px){ .bundle--featured{transform:translateY(-10px)} }
.bundle__flag{
  position:absolute;inset-block-start:12px;inset-inline-start:50%;
  transform:translateX(50%);z-index:3;
  box-shadow:0 4px 14px -6px rgba(1,33,31,.5);
  background:var(--gold);color:#17240F;font-weight:800;
  font-size:clamp(11px,.82vw,12.5px);padding:5px 14px;border-radius:999px;
  white-space:nowrap
}
.bundle__name{font-size:clamp(17px,1.5vw,22px);margin:0}
.bundle__note{color:var(--ink-3);font-size:clamp(12.5px,.95vw,14.5px);
  margin-block:8px 0;min-block-size:2.8em}
.bundle__price{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  margin-block:clamp(14px,1.6vw,20px);padding-block-end:clamp(14px,1.6vw,20px);
  border-block-end:1px solid var(--gold-line-soft)
}
.bundle__price b{font-family:'Cairo',sans-serif;font-weight:800;
  font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--petrol)}
.bundle__price span{font-weight:700;color:var(--ink-2);font-size:clamp(13px,1vw,15px)}
.bundle__price small{flex:1 0 100%;color:var(--ink-2);font-weight:600;
  font-size:clamp(13px,1vw,15px);margin-block-start:2px}
.bundle__list{list-style:none;margin:0 0 clamp(18px,2vw,26px);padding:0;
  display:grid;gap:9px;flex:1}
.bundle__list li{display:flex;gap:9px;align-items:flex-start;
  font-size:clamp(12.5px,.95vw,14.5px);color:var(--ink-2);line-height:1.6}
.bundle__list svg{inline-size:1.05em;block-size:1.05em;flex:none;
  margin-block-start:.28em;color:var(--emerald)}
.bundle .btn{inline-size:100%;justify-content:center}
@media (max-width:980px){
  .bundles{grid-template-columns:1fr;gap:22px}
  .bundle__note{min-block-size:0}
  .bundle__flag{inset-inline-start:auto;inset-inline-end:16px;transform:none;inset-block-start:12px}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-CAROUSEL2 · كاروسل واحد يعاد استعماله
   أساسه `scroll-snap`: المتصفح يعرف السحب والزخم وحد التمرير أحسن
   مما نكتب، ويعمل بلا سكربت إن فشل تحميله. والجافاسكربت للأزرار فقط.
   ══════════════════════════════════════════════════════════════════ */
.carousel2{position:relative}
.carousel2__track{
  display:flex;gap:clamp(14px,1.6vw,20px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scroll-padding-inline:2px;
  padding-block:6px 14px;
  scrollbar-width:none;-ms-overflow-style:none
}
.carousel2__track::-webkit-scrollbar{display:none}
.carousel2__track:focus-visible{outline:2px solid var(--petrol);outline-offset:4px;border-radius:12px}
.carousel2__track>*{flex:0 0 clamp(240px,26vw,320px);scroll-snap-align:start}
.carousel2__nav{
  position:absolute;inset-block-start:50%;transform:translateY(-50%);
  inline-size:44px;block-size:44px;border-radius:999px;
  background:var(--paper);border:1px solid var(--gold-line);
  display:grid;place-items:center;cursor:pointer;z-index:3;
  box-shadow:var(--sh-card);color:var(--petrol);
  transition:opacity .18s ease,background .18s ease
}
.carousel2__nav:hover{background:var(--cream-hi)}
.carousel2__nav[disabled]{opacity:.32;cursor:default}
/* المنطقي يخدع هنا: `inset-inline-end` في العربية **اليسار**.
   والكاروسل يبدأ يمينا ويمضي يسارا ⇒ السابق يمين والتالي يسار. */
html[dir='rtl'] .carousel2__nav--prev{right:-10px;left:auto}
html[dir='rtl'] .carousel2__nav--next{left:-10px;right:auto}
html[dir='ltr'] .carousel2__nav--prev{left:-10px;right:auto}
html[dir='ltr'] .carousel2__nav--next{right:-10px;left:auto}
/* السهم يشير إلى وجهته: «التالي» نحو اليسار في العربية */
html[dir='rtl'] .carousel2__nav--next svg{transform:scaleX(-1)}
html[dir='ltr'] .carousel2__nav--prev svg{transform:scaleX(-1)}
@media (max-width:980px){ .carousel2__nav{display:none} }

/* ── كاروسل الجامعات: أسهم خارج المضمار وطرفان يذوبان ─────────────
   الأسهم كانت عند `-10px` فتجلس فوق أول شريحة وآخرها وتحجب شعارها.
   فالغلاف يفسح لها مكانا خاصا بها، والمضمار يذوب طرفاه بقناع فيبدو
   الشريط مستمرا لا مقصوصا. */
.unis .carousel2{padding-inline:clamp(38px,4vw,56px)}
html[dir='rtl'] .unis .carousel2__nav--prev{right:0;left:auto}
html[dir='rtl'] .unis .carousel2__nav--next{left:0;right:auto}
html[dir='ltr'] .unis .carousel2__nav--prev{left:0;right:auto}
html[dir='ltr'] .unis .carousel2__nav--next{right:0;left:auto}
.unis .carousel2__track{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  scroll-padding-inline:8px;
}
@media (max-width:980px){ .unis .carousel2{padding-inline:0} }
@media (prefers-reduced-motion:reduce){ .carousel2__track{scroll-behavior:auto} }

/* آراء أولياء الأمور داخل الكاروسل.
   الشريحة أعرض من شريحة البرنامج: هذه نص يقرأ لا بطاقة تمسح بالعين،
   و320px تكسر الجملة العربية إلى أربعة أسطر. والبطاقات تتساوى ارتفاعا
   (`align-items:stretch` من الشريط) فلا يتدلى أطولها وحده. */
.carousel2--quotes .carousel2__track>*{flex:0 0 clamp(268px,30vw,392px)}
.carousel2--quotes .tcard{display:flex;flex-direction:column;block-size:100%}
.carousel2--quotes .tcard>p{flex:1}
/* الرفع عند hover يقص عند حافة المسار الأفقي، فيهبط هنا إلى ظل وحده */
.carousel2--quotes .tcard:hover{transform:none;box-shadow:var(--sh-raise)}

/* بطاقة البرنامج داخل الكاروسل — بلا سعر ولا زر شراء */
.pcard{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--sh-soft)
}
.pcard__media{aspect-ratio:16/10;overflow:hidden;background:var(--beige)}
.pcard__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.pcard__body{padding:clamp(14px,1.4vw,20px);display:flex;flex-direction:column;gap:8px;flex:1}
.pcard__body h3{font-size:clamp(14px,1.1vw,16.5px);margin:0}
.pcard__body p{color:var(--ink-3);font-size:clamp(12px,.9vw,13.5px);line-height:1.65;margin:0;flex:1}
.pcard__meta{display:flex;gap:14px;flex-wrap:wrap;
  font-size:clamp(11px,.82vw,12.5px);color:var(--ink-3)}
.pcard__meta span{display:inline-flex;align-items:center;gap:5px}
.pcard__meta svg{inline-size:1em;block-size:1em;color:var(--emerald)}
.pcard__link{
  font-family:'Cairo',sans-serif;font-weight:700;color:var(--petrol);
  font-size:clamp(12px,.9vw,13.5px);text-decoration:none
}
.pcard__link:hover{text-decoration:underline}

/* بند «ضمن الباقات» محل السعر في صفحة البرنامج */
.path-inbundle{
  display:flex;gap:9px;align-items:flex-start;margin:0 0 10px;
  font-family:'Cairo',sans-serif;font-weight:700;color:var(--petrol);
  font-size:clamp(14px,1.1vw,16.5px);line-height:1.55
}
.path-inbundle svg{color:var(--emerald);margin-block-start:.2em}

/* «يفتح ابتداء من …» — أرخص باقة تفتح هذا البرنامج.
   السطر رقم لا جملة: هو ما يقرر، فيرفع إلى حجم يقرأ وحده بلا أن تقرأ
   السطر كله. وكانت البطاقة تقول «ضمن باقات تقدر» بلا رقم ولا اسم باقة —
   وعد بلا باب، والزائر يخرج ليبحث عما كان يجب أن يجده هنا. */
.path-from{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:14px 0 10px;padding-block-start:12px;border-block-start:1px solid var(--gold-line-soft)
}
.path-from span{font-size:clamp(11.5px,.85vw,13px);color:var(--ink-3)}
.path-from b{
  font-family:'Cairo',sans-serif;font-weight:800;color:var(--petrol);
  font-size:clamp(19px,1.9vw,27px);unicode-bidi:isolate
}
.path-buy .btn--block+.btn--block{margin-block-start:8px}

/* ══════════════════════════════════════════════════════════════════
   TQ-STAGE-TABS · اختيار المرحلة قبل الموازنة بين الدرجات
   ══════════════════════════════════════════════════════════════════ */
.stage-tabs{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-block-end:clamp(22px,2.6vw,36px)
}
.stage-tab{
  font-family:'Cairo',sans-serif;font-weight:700;cursor:pointer;
  font-size:clamp(12.5px,1vw,15px);
  padding:11px 22px;border-radius:999px;
  border:1px solid var(--gold-line);background:var(--paper);color:var(--ink-2);
  transition:background .18s ease,color .18s ease,border-color .18s ease
}
.stage-tab:hover{border-color:var(--gold);color:var(--ink)}
.stage-tab.is-on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.stage-tab:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

/* ══════════════════════════════════════════════════════════════════
   TQ-INI · أفاتار الحرف — لمن لا صورة له
   لا وجه مولَّد لشخص حقيقي: نسبة وجه ليس وجهه أسوأ من غياب الصورة.
   واللون يأتي من `--ini-bg` التي يحسبها `tqs_person_avatar()` من الاسم،
   فيثبت للشخص نفسه في كل صفحة ولا تتطابق دوائر المتجاورين.
   ══════════════════════════════════════════════════════════════════ */
.tq-ini{
  display:grid;place-items:center;
  inline-size:100%;aspect-ratio:1;
  background:var(--ini-bg,#023331);color:var(--gold-warm);
  font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(38px,4.4vw,64px);line-height:1;
  user-select:none;
}
/* داخل بطاقة المعلّم: البطاقة تحدّد القياس، والدائرة تملؤه */
.teacher-card__media .tq-ini{block-size:100%}
/* في صفحة المعلّم: أكبر وبنصف قطر البطاقة */
.tq-ini--lg{border-radius:14px;font-size:clamp(56px,6vw,92px)}
/* في «من يدرس؟» — دائرة صغيرة بجوار الاسم */
.tlist__l .tq-ini{
  inline-size:64px;block-size:64px;border-radius:50%;flex:none;
  font-size:26px;
}
.tq-profile-photo{margin-block-end:12px;border-radius:14px;overflow:hidden}
.tq-profile-photo img{inline-size:100%;block-size:auto;display:block}

/* عنوان المعلّم وصفوفه على البطاقة */
.teacher-card__title{
  margin-block-start:4px;color:var(--gold-text);
  font-family:'Cairo',sans-serif;font-weight:600;
  font-size:clamp(11.5px,.9vw,13.5px)
}
.teacher-card__grades{
  display:flex;align-items:flex-start;gap:6px;
  margin-block-start:8px;color:var(--ink-3);
  font-size:clamp(10.5px,.82vw,12.5px);line-height:1.6
}
.teacher-card__grades svg{
  inline-size:1em;block-size:1em;aspect-ratio:1;flex:none;
  margin-block-start:.28em;color:var(--gold-deep)
}

/* ══════════════════════════════════════════════════════════════════
   TQ-UNIGRID · الجامعات شبكة: خمس في الصف ترى دفعة
   ══════════════════════════════════════════════════════════════════ */
.unigrid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);margin-block-start:clamp(20px,2.4vw,32px)
}
.unigrid__item{
  display:grid;place-items:center;aspect-ratio:16/10;
  padding:10px;background:#fff;
  border:1px solid var(--gold-line-soft);border-radius:12px;
  transition:border-color .18s ease,transform .18s ease
}
.unigrid__item:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.unigrid__item img{
  max-inline-size:100%;max-block-size:100%;
  inline-size:auto;block-size:auto;object-fit:contain
}
@media (max-width:980px){ .unigrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:680px){ .unigrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} }
@media (max-width:420px){ .unigrid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ══════════════════════════════════════════════════════════════════
   TQ-FIT-COLS · العمود يتبع ما رسم لا ما أعلن
   `tqs_stat()` يخفي كل إحصاء لم يضبط (وذلك مقصود: عدد صفر أسوأ من
   غيابه). فشبكة تحجز أربعة أعمدة وترسم فيها واحدة تترك ثلاثة فراغات
   والبند في ركن. و`auto-fit` يجعل المتصفح يعد المرسوم — بلا عد في
   PHP يمرر وينسى تحديثه.
   ══════════════════════════════════════════════════════════════════ */
/* شريط يعرض ما توفر لا شبكة تمتلئ: `1fr` يتمدد فيتباعد البندان
   إلى طرفي الحاوية. والفليكس يبقي البند بعرضه ويتوسط المجموعة. */
.stat-strip{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(18px,3vw,54px)
}
.stat-strip__item{flex:0 1 auto}
.stats-band__grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(16px,2.6vw,46px)
}
.stats-band__item{flex:0 1 auto}
/* الفاصل بين البنود يرسم بين المرسوم لا بعد كل بند */
.stats-band__item:last-child::after,.stat-strip__item:last-child::after{display:none}

/* `.visit` **ثلاثة** أبناء: صورة مقر وخريطة ولوح. وعمودان ينزلان
   الثالث صفا ثانيا فيقصه `overflow:hidden`.

   واللوح يأخذ أوسعها: هو وحده الذي يحمل نصا — عنوانا وثلاثة بنود
   وزرا — والصورة والخريطة تحتملان الضيق بلا أن يقرأ منهما شيء أسوأ.
   وكان يقاسمهما القياس نفسه تقريبا فيلوي كل عنوان بند سطرين. */
/* والخريطة تحتاج عرضا أدنى لا زينة: إسناد OpenStreetMap سطر مفروض
   داخل الإطار لا يملك أحد تنسيقه، وعمود ضيق يلويه سطرين فوق الخريطة. */
.visit{grid-template-columns:.8fr 1.35fr 1.1fr;align-items:stretch}
@media (max-width:1100px){ .visit{grid-template-columns:1.25fr 1fr}
  .visit__photo{display:none} }
@media (max-width:900px){
  .visit{grid-template-columns:1fr}
  .visit__photo{display:none}   /* الصورة زينة؛ والخريطة واللوح هما المعنى */
}

/* ══════════════════════════════════════════════════════════════════
   TQ-QUOTE-RTL · محاذاة واحدة في بطاقة الرأي
   كانت ثلاثا: البطاقة `center` والفقرة `start` والنجوم `center` —
   والعين تقرأ الخلط «ليس RTL».
   ══════════════════════════════════════════════════════════════════ */
.quote-card,
.quote-card p,
.quote-card .stars,
.quote-card__head{ text-align:start }
.quote-card .stars{ justify-content:flex-start }

/* TQ-DIV-FIX — الفاصل كان يخفى عن «الرابع» بافتراض أربعة دائما.
   والعدد يتبدل، فالإخفاء يتبع الموضع الأخير لا رقما. */
@media (max-width:980px){
  .stats-band__item:nth-child(4)::after{display:revert}
  .stats-band__item:last-child::after{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-BUNDLE-MEDIA · صورة الباقة وشريحة الجامعة
   ══════════════════════════════════════════════════════════════════ */
/* الصورة تبلغ حافتي البطاقة: هامش حولها يجعلها لصاقة لا رأسا.
   والحشو يلغى من أعلى البطاقة ويعاد على المحتوى وحده. */
.bundle{padding-block-start:0;overflow:hidden}
.bundle__media{
  margin-inline:calc(clamp(22px,2.4vw,32px) * -1);
  margin-block-start:calc(clamp(22px,2.4vw,32px) * -1);
  margin-block-end:clamp(16px,1.8vw,22px);
  aspect-ratio:16/9;overflow:hidden;background:var(--beige)
}
.bundle__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* الشارة تعلو الصورة لا تختفي تحتها */
.bundle--featured .bundle__flag{z-index:2}
.bundle{padding-block-start:0}
.bundle__name{margin-block-start:0}

/* شريحة الجامعة داخل الكاروسل.
   بطاقة شبه مربّعة لا عريضة: شعارات الجامعات السعودية مربّعة (٤١ من ٤٣)،
   وبطاقة نسبتها 2:1 كانت تعرض الشعار ٦٠×٦٠ وسط فراغ أفقيّ يساوي ضعفه —
   وهو ما كان يُرى «مبكسلًا» وهو في الحقيقة صغير. */
.carousel2__track .unislide{
  flex:0 0 clamp(104px,10.5vw,132px);scroll-snap-align:start;
  display:grid;place-items:center;
  block-size:clamp(84px,8.6vw,96px);padding:10px 12px;
  background:#fff;border:1px solid var(--gold-line-soft);border-radius:14px
}
/* `place-self:stretch` هو بيت القصيد لا النسبة المئوية.
   البطاقة `place-items:center`، فالصورة عنصر شبكة بـ`align-self:center`
   **لا يمتدّ** — وارتفاع نسبيّ على عنصر لا يمتدّ لا يُحلّ فيعود إلى
   `auto`، فيقود الشعارَ الطوليَّ ارتفاعُه الطبيعي ويفيض خارج بطاقته
   (قيس: 160px في بطاقة 96px، و26 شعارًا من 43 فائض).
   و`stretch` يعطي الخليةَ قياسًا صريحًا، ثم `contain` يحفظ النسبة. */
.carousel2__track .unislide img{
  place-self:stretch;
  inline-size:auto;block-size:auto;
  max-inline-size:100%;max-block-size:100%;
  min-inline-size:0;min-block-size:0;
  object-fit:contain
}

/* ══════════════════════════════════════════════════════════════════
   TQ-SUBJGRID · المواد شبكة لا شريطا
   البطاقة `.pcard` نفسها المستعملة في الكاروسل — يتبدل الغلاف وحده.
   و`minmax` بـ`auto-fill` لا `auto-fit`: بخمس عشرة بطاقة الفرق معدوم،
   وبواحدة باقية في الصف الأخير يمنع `auto-fill` تمددها عبر الصف.
   ══════════════════════════════════════════════════════════════════ */
.subjgrid{
  display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  align-items:stretch
}
.subjgrid .pcard{block-size:100%}
@media (max-width:560px){
  .subjgrid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-COMPGRID · المسابقات المفتوحة
   ══════════════════════════════════════════════════════════════════ */
.compgrid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.6vw,22px)
}
.compgrid>*{flex:1 1 300px;max-inline-size:440px}
.compcard{
  display:flex;flex-direction:column;gap:9px;
  background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);padding:clamp(16px,1.7vw,24px)
}
.compcard h3{margin:0;font-size:clamp(15px,1.15vw,17.5px)}
.compcard p{margin:0;color:var(--ink-3);font-size:clamp(12px,.9vw,13.5px);line-height:1.7}
.compcard .post-tag{align-self:flex-start}
.compcard__when{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-weight:600}
.compcard__when svg{inline-size:1em;block-size:1em;color:var(--emerald);flex:none}
.compcard .pcard__link{margin-block-start:auto;padding-block-start:6px}
/* `.compgrid` لم يعد يولد — بقي تعريفه لأي وسم قديم مخبوء، والقاعدة
   الميتة التي كانت هنا تضبط `grid-template-columns` على حاوية فليكس. */

/* ══════════════════════════════════════════════════════════════════
   TQ-BUNDLE-FACE · الشارة إلى الركن
   وضعت وسط أعلى البطاقة حين كانت البطاقة نصا على لون؛ ثم حلت
   خلفها صورة شخص في وسط الكادر فوقعت على وجهه.
   (وقاعدة `object-position` التي كانت هنا حذفت: الغلاف صار بنسبة
   الصورة فلا قص، وقاعدة بلا أثر تقرأ غدا كأن لها أثرا.)
   ══════════════════════════════════════════════════════════════════ */

.bundle__flag{
  inset-inline-start:auto;inset-inline-end:14px;
  inset-block-start:14px;transform:none
}
@media (max-width:980px){
  .bundle__flag{inset-inline-end:14px;inset-inline-start:auto;inset-block-start:14px}
}

/* TQ-PCARD-FACE — صورة المادة مربعة في غلاف ١٦/١٠، و`cover` يقتطع
   حول المركز فيقضم أعلى الرأس. والوجه فوق المركز في كل لقطة نصفية. */
.pcard__media img{ object-position:center 35% }

/* TQ-BUNDLES-FOOT — الحاشية تحت الباقات: كانت بلا قاعدة فامتدت بعرض
   الغلاف كله، وسطر من ١٤٠ حرفا يصعب على العين تتبعه إلى أول التالي. */
.bundles__foot{
  margin-block-start:clamp(20px,2.4vw,32px);
  margin-inline:auto;max-inline-size:74ch;
  text-align:center;line-height:1.9
}

/* ══════════════════════════════════════════════════════════════════
   TQ-BUNDLE-BIG · الصورة تكبر وتحمل تفاصيلها
   كانت ١٦/٩ فبدت شريطا فوق نص طويل؛ و٤/٣ تجعلها موضوع البطاقة.
   والتفاصيل عليها لا تحتها: من يمسح الصفحة بعينه يرى الصورة أولا،
   فما يميز الباقة يقرأ معها لا بعد سطرين.
   والتدرج أسفلها لا لون صلب: النص يحتاج تباينا، والحجب الكامل
   يلغي ما دفعنا فيه — والوجه فوق التدرج يبقى ظاهرا.
   ══════════════════════════════════════════════════════════════════ */
/* نسبة الصورة نفسها (٨٨٠×٥٨٧) — فلا يقتطع `cover` شيئا،
   وتظهر اللقطة كاملة كما ولدت. */
.bundle__media{ aspect-ratio:880/587;position:relative }
.bundle__over{
  position:absolute;inset-inline:0;inset-block-end:0;
  display:flex;flex-direction:column;gap:2px;
  padding:clamp(30px,4vw,44px) clamp(16px,1.8vw,22px) clamp(12px,1.4vw,16px);
  background:linear-gradient(to top,rgba(2,51,49,.88) 0%,rgba(2,51,49,.62) 45%,transparent 100%);
  color:#fff;text-align:start;pointer-events:none
}
.bundle__over b{
  font-family:'Cairo',sans-serif;font-weight:800;
  font-size:clamp(16px,1.4vw,21px);line-height:1.3
}
.bundle__over i{
  font-style:normal;color:var(--gold-on-dark,#E4CB95);
  font-size:clamp(11.5px,.86vw,13px);font-weight:600
}
/* الاسم الكامل تحتها يكرر ما فوقها — فيغيب من البطاقة ويبقى للقارئ الآلي */
.bundle__media + .bundle__name{
  position:absolute;inline-size:1px;block-size:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap
}

/* ══════════════════════════════════════════════════════════════════
   TQ-PANEL-EDGE · بطاقات الآراء تبدأ من حافة اللوح
   حشوة اللوح الأفقية (٤٤px) كانت تبعد أول بطاقة عن الحافة اليمنى،
   والعين في العربية تبدأ من هناك.
   ══════════════════════════════════════════════════════════════════ */
#parents .panel{ padding-inline:0 }
#parents .panel>.section-head{ padding-inline:clamp(16px,2.4vw,44px) }


/* ══════════════════════════════════════════════════════════════════
   TQ-REALMAP · الخريطة إطار لا رسم
   ══════════════════════════════════════════════════════════════════ */
/* TQ-MAP-CLIP · نصف قطر ثان داخل حاوية تقص بنصف قطرها.
   `.visit` تقص أبناءها الثلاثة بـ`overflow:hidden` وتستدير عند
   `--r-panel`؛ وهذه كانت تستدير مرة أخرى عند `--r-card` **داخل** ذلك
   القص — فتظهر نتوءان بلون اللوح عند الزاويتين الخارجيتين، ويبقى
   ركنان داخليان مستديرين بلا سبب بينما الصورة المقابلة لهما قائمة
   الزوايا. والقص للحاوية وحدها. */
.visit__map{ overflow:hidden;background:var(--beige) }
/* TQ-MAP-FILL · `block-size:100%` على إطار في التدفق العادي يحتاج أبا
   بارتفاع محسوم؛ وهذا خلية شبكة تمدد، فلا يحله كروم — فتقف الخريطة
   عند حدها الأدنى ويبقى تحتها فراغ بيج بثلث ارتفاع القسم، وسطر إسناد
   OpenStreetMap عائم في وسطه. والتثبيت المطلق هو ما يفعله `svg`
   المجاور في السطر الذي فوقه منذ البداية. */
.visit__map iframe{
  position:absolute;inset:0;
  inline-size:100%;block-size:100%;min-block-size:clamp(260px,26vw,360px);
  display:block;border:0
}

/* ══════════════════════════════════════════════════════════════════
   TQ-GATE2 · بوابتان في الدخول، وثلاث صارت اثنتين في التسجيل
   و`.gate-card` كانت `button` فحسب؛ وهي في الدخول `a` — فتوحد
   زينتها كي لا يختلف الشكل باختلاف الوسم.
   ══════════════════════════════════════════════════════════════════ */
.gate-picker{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
a.gate-card{ text-decoration:none;color:inherit }
a.gate-card:hover{ text-decoration:none }
.gate-picker--login{ margin-block-end:clamp(14px,1.8vw,20px) }

/* ══════════════════════════════════════════════════════════════════
   TQ-CTA-BIG · طفلا شريط الختام أكبر — في كل صفحة
   السقف السابق (٣٨٠px) وضع لأن الصورة كانت تقود ارتفاع الشريط فيهبط
   النص إلى القاع. فيرتفع السقف **ومعه** حد الشريط الأدنى، وإلا عاد
   ذلك العطب نفسه.
   ══════════════════════════════════════════════════════════════════ */
/* TQ-CTA-FLAT — شريط مستطيل أوطأ بقرار المالك: كان مربّعا تقريبا
   فأخذ من الصفحة أكثر مما يقول. الأطراف فوق الصورة وتحتها تُقلَّص،
   والصورة تجلس على القاع فتملأ ما بقي. */
.cta{ min-block-size:clamp(230px,20vw,300px) }
.cta__art img{
  inline-size:min(100%,470px);
  max-block-size:clamp(250px,25vw,340px)
}
@media (max-width:980px){
  .cta{ min-block-size:0 }
  .cta__art img{ inline-size:min(100%,380px);max-block-size:clamp(220px,38vw,300px) }
}

/* ══════════════════════════════════════════════════════════════════
   TQ-BUNDLES-WIDE · الصف يتسع بسعة الشاشة
   صورة الباقة تملأ عرض البطاقة، والبطاقة ثلث الصف — فتكبيرها يمر
   بتوسيع الصف وحده. والغلاف العام ١٤٤٠px يترك ٣٦٩px مهدورة على
   شاشة ١٧٢٨ و٥٦١ على ١٩٢٠. والسقف يرفع هنا فقط: الغلاف العام قرار
   يخص الموقع كله.
   ══════════════════════════════════════════════════════════════════ */
#bundles .shell,
.bundles--page{
  max-inline-size:min(1680px,100%);
  padding-inline:clamp(16px,2vw,32px)
}
.bundles--page{ margin-inline:auto }

/* ══════════════════════════════════════════════════════════════════
   TQ-QUOTE-START · الاسم يبدأ حيث يبدأ التعليق
   `justify-content:flex-end` في صف عربي يدفع المجموعة إلى **اليسار**
   (نهاية المحور)، فوقف الاسم في وسط البطاقة والتعليق تحته يبدأ من
   الحافة اليمنى — سطران يبدآن من موضعين.
   ══════════════════════════════════════════════════════════════════ */
.quote-card__head{ justify-content:flex-start }

/* ══════════════════════════════════════════════════════════════════
   TQ-SITESEARCH · مربع البحث
   في الترويسة يظهر على الجوال وحده: الشاشة العريضة فيها قائمة كاملة
   وأزرار دخول، والضيقة تخفيها خلف زر — فالبحث فيها هو الطريق الأقصر.
   ══════════════════════════════════════════════════════════════════ */
.sitesearch{
  display:flex;align-items:center;gap:8px;min-inline-size:0;
  background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:999px;padding:6px 14px
}
.sitesearch svg{inline-size:18px;block-size:18px;color:var(--gold-deep);flex:none}
.sitesearch input{
  border:0;background:none;outline:0;min-inline-size:0;inline-size:100%;
  font:inherit;color:var(--ink);padding-block:4px
}
.sitesearch input::placeholder{color:var(--ink-3)}

/* في الترويسة: الجوال وحده */
.header-search{display:none;flex:1 1 auto;min-inline-size:0;margin-inline:10px}
@media (max-width:980px){ .header-search{display:flex} }

/* في الصفحة: أعرض، وله زر */
.sitesearch--page{
  max-inline-size:min(640px,100%);margin-inline:auto;
  margin-block-end:clamp(22px,3vw,36px);padding:8px 8px 8px 8px;
  padding-inline-start:16px
}
.sitesearch--page .btn{flex:none}

/* ══════════════════════════════════════════════════════════════════
   TQ-WHY-BAL · خمسة عناصر لا تنقسم على اثنين ولا ثلاثة
   فيبقى واحد يتيما في الصف الأخير. والمرن يوزع الباقي على الصف
   ويتوسطه، فلا يقف عنصر وحده في ركن.
   ══════════════════════════════════════════════════════════════════ */
.why__grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.4vw,22px)
}
/* TQ-WHY-ROW · الخمسة صف واحد على الشاشة الواسعة
   كان الاساس `clamp(200px,20vw,260px)` — فخمسة منه مع فجواتها تتجاوز
   عرض اللوح، فيسقط الخامس وحده الى سطر ثان. والاساس هنا محسوب على
   اللوح نفسه: `(100% - 4 فجوات) / 5`، فالخمسة تملأ السطر بلا لف،
   ومع `flex-shrink` تضيق معه ولا تكسره. */
.why__grid>*{
  flex:1 1 calc((100% - 4 * clamp(10px,1.4vw,22px)) / 5);
  min-inline-size:0;max-inline-size:none
}
@media (max-width:900px){
  .why__grid>*{flex:1 1 calc((100% - 2 * 16px) / 3)}
}
@media (max-width:680px){
  .why__grid>*{flex:1 1 calc((100% - 12px) / 2)}
}
@media (max-width:380px){ .why__grid>*{flex:1 1 100%} }
/* الفاصل بين البنود يفترض صفا واحدا: متى لف الشريط وقف فاصل في اول
   السطر التالي معلقا بلا ما يفصله. فيسقط مع اول لف. */
@media (max-width:900px){ .why__item::after{display:none!important} }

/* ══════════════════════════════════════════════════════════════════
   TQ-FEWRES · الشبكة تتبع ما نجا من الفلترة
   شبكة بأربعة أعمدة ثابتة ونتيجة واحدة تترك ثلاثة أرباع الصف فراغا.
   والمرن يتوسط ما بقي، فالنتيجة القليلة تبدو نتيجة لا عطبا.
   ══════════════════════════════════════════════════════════════════ */
#bookGrid,#materialGrid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.6vw,22px)
}
#bookGrid>*,#materialGrid>*{flex:0 1 clamp(220px,22vw,300px)}
#bookGrid>[hidden],#materialGrid>[hidden]{display:none}
@media (max-width:560px){ #bookGrid>*,#materialGrid>*{flex:1 1 100%} }

/* ══════════════════════════════════════════════════════════════════
   TQ-CHIP-ON · الحالة النشطة ترى لا تخمن
   كان الفرق إطارا ذهبيا خفيفا وحده — لا خلفية ولا وزن، فلا يدرك
   في لمحة أي مرحلة مختارة.
   ══════════════════════════════════════════════════════════════════ */
.stage-card[aria-pressed='true']{
  background:var(--petrol);border-color:var(--petrol);
  box-shadow:0 10px 26px -14px rgba(2,51,49,.7)
}
.stage-card[aria-pressed='true'] b{color:#fff}
.stage-card[aria-pressed='true'] span{color:var(--gold-on-dark,#E4CB95)}
.stage-card[aria-pressed='true'] .ico{color:var(--gold-warm)}

/* ══════════════════════════════════════════════════════════════════
   TQ-FAQ1COL · الأكورديون عمود واحد
   بعمودين يفتح المستخدم بطاقة فيطول عمودها ويبقى جارها المغلق يعلوه
   فراغ بقدر الإجابة، ويقفز ما تحته. والعمود الواحد يجعل الفتح يدفع ما
   بعده وحده — وهو ما تتوقعه العين.
   ══════════════════════════════════════════════════════════════════ */
.faq-grid{ grid-template-columns:1fr;max-inline-size:min(820px,100%);margin-inline:auto }

/* TQ-FAQ-PAIR · الأسئلة وبطاقة الدعم لوح واحد لا جزيرتان.
   السقف أعلاه (٨٢٠px) موضوع لصفحة `/faq` حيث الأكورديون وحده في
   الشل؛ وهنا بجواره عمود ثان، فيتوسط داخل عموده ويترك بينه وبين
   البطاقة فراغا بمئة بكسل زيادة على الفجوة — فتقرآن غير متصلين.
   ونسبة `.3fr` تعطي البطاقة عرضا يتبدل بعرض الشاشة، فتضيق على الشاشة
   المتوسطة حتى يلتف زرها سطرين. */
.faq-layout{ grid-template-columns:minmax(0,1fr) clamp(230px,24%,310px) }
.faq-layout .faq-grid{ max-inline-size:100%;margin-inline:0 }
/* والتكديس يعاد هنا: قاعدة الجوال في الأعلى (‏max-width:900px‏) تسبق هذه
   في الملف وتساويها تخصيصا، فتغلبها هذه على **كل** المقاسات — فيبقى
   عمودان على شاشة عرضها أربعمئة بكسل ويخرج اللوح عن الشاشة أفقيا.
   والاستعلام لا يرفع التخصيص، فالترتيب وحده هو الحكم. */
@media (max-width:900px){ .faq-layout{ grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════════════
   TQ-INLINE-LINK · الرابط داخل الفقرة يرى رابطا
   «الشروط» و«الخصوصية» و«سياسة الاسترجاع» روابط حقيقية، ولونها
   المحسوب كان **مطابقا للنص حولها** بلا تسطير ولا وزن — فلا شيء
   يقول إنها تنقر. واللون وحده لا يكفي في كل حال: من لا يميز اللون
   لا يرى فرقا، فيضاف التسطير.
   ══════════════════════════════════════════════════════════════════ */
.form-consent a,
.bundles__foot a,
.tq-caption a,
.form-hint a,
.page-hero__lede a{
  color:var(--gold-text,#8A6A2F);font-weight:700;
  text-decoration:underline;text-underline-offset:3px
}
.form-consent a:hover,.bundles__foot a:hover,.tq-caption a:hover,
.form-hint a:hover,.page-hero__lede a:hover{ text-decoration-thickness:2px }

/* ══════════════════════════════════════════════════════════════════
   TQ-TEL-PREFIX · البادئة تسبق الرقم في القراءة العربية
   ══════════════════════════════════════════════════════════════════ */
.form-field .form-prefix{ order:-1 }

/* ══════════════════════════════════════════════════════════════════
   TQ-POLISH · صقل متفرق، كل بسببه
   ══════════════════════════════════════════════════════════════════ */

/* زر إظهار كلمة المرور — داخل الحقل لا بجانبه، فلا يزيح التخطيط */
.form-field{ position:relative }
.pw-eye{
  position:absolute;inset-inline-end:10px;inset-block-start:50%;
  transform:translateY(-50%);
  inline-size:34px;block-size:34px;display:flex;align-items:center;
  justify-content:center;border:0;background:none;cursor:pointer;
  color:var(--ink-3);border-radius:50%
}
.pw-eye svg{inline-size:19px;block-size:19px}
.pw-eye:hover{color:var(--petrol);background:rgba(2,51,49,.06)}
.form-field:has(.pw-eye) input{ padding-inline-end:46px }

.form-remember{
  display:flex;align-items:center;gap:9px;
  margin-block:calc(-1 * clamp(4px,.6vw,8px)) clamp(10px,1.4vw,16px);
  font-size:clamp(13px,.95vw,14px);color:var(--ink-2);cursor:pointer
}
.form-remember input{inline-size:17px;block-size:17px;accent-color:var(--petrol);flex:none}

/* زر إيقاف الفيديو — ركن لا يزاحم النص. وصار أعلى الإطار بعد أن
   شغل شريط المميزات قاعه: زر يجلس فوق نص يخفيه. */
.hero__vtoggle{
  position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:3;
  inline-size:40px;block-size:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(1,33,31,.55);border:1px solid rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
.hero__vtoggle svg{inline-size:17px;block-size:17px}
.hero__vtoggle:hover{background:rgba(1,33,31,.78)}

/* بطاقات الرأي: القاع يحاذى — كانت النجوم تقع عند ٧٣٣ و٧٣٦ و٧٦١ */
.quote-card{display:flex;flex-direction:column}
.quote-card .stars{margin-block-start:auto}

/* بطاقات القيم: شرائح تلتف في واحدة وفراغ في أختيها */
.value-card{display:flex;flex-direction:column}
.value-card .chips,.value-card__chips{margin-block-start:auto}

/* الخط الزمني: «مستمرون» ليست سنة */
.tl-item:last-child .tl-item__year,
.timeline__item:last-child b{
  font-family:'Cairo',sans-serif;letter-spacing:0
}

/* الحد الأدنى للخط ١٣px: ما دونه لا يقرأ على شاشة في اليد */
.tq-caption,.pcard__meta,.stage-card span,.hero-mini__item span,
.stats-band__item span,.stat-strip span,.compcard p,.form-hint{
  font-size:max(13px,1em)
}

/* التفاف لا يترك كلمة يتيمة في سطرها */
.page-hero__lede,.hero__lede,.section-head p,.bundle__note{ text-wrap:pretty }
h1,h2,h3,.bundle__name{ text-wrap:balance }

/* لا `mix-blend-mode` على الشعار: الشعارات الرسمية منها ما أرضيته
   ملوّنة صلبة (أخضر · كحليّ · أسود)، والمزج يطفئ ألوانها ويجعلها
   متّسخة على البطاقة البيضاء. تُعرض كما هي. */

/* صفحة ٤٠٤: نص متوسط وأزرار لا تلتف ٢+١ */
.err-card{text-align:center}
.err-card .btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* ══════════════════════════════════════════════════════════════════
   TQ-PLAN · صفحة الباقة — المنهج بطلها لا السعر
   ══════════════════════════════════════════════════════════════════ */
.plan-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,34px);align-items:start}
.plan-main{display:grid;gap:clamp(14px,1.8vw,22px);min-width:0}
.plan-hero__stage{margin:0 0 6px;font-size:.86rem;font-weight:700;letter-spacing:.02em;
  color:var(--gold-text)}

/* ── العنوان مبدلا ────────────────────────────────────────────────
   القاعدة الحاكمة: **العنوان لا يتغير**. نفس الخط ونفس الحجم ونفس
   اللون ونفس الوزن — وإنما خط منقط تحته وسهم بجواره يقولان «هذا يفتح».
   وأي زخرفة أثقل من ذلك تحول عنوان الصفحة إلى عنصر نموذج. */
.plan-switch{position:relative;display:inline-block;max-inline-size:100%}
.plan-switch__cur{display:inline-flex;align-items:center;gap:clamp(8px,1vw,14px);
  cursor:pointer;list-style:none;border-radius:14px;
  padding-inline-end:4px;                     /* موضع السهم لا يقص عند التركيز */
  transition:opacity var(--t-route) var(--ease)}
.plan-switch__cur::-webkit-details-marker{display:none}
.plan-switch__cur h1{
  text-decoration:underline dotted var(--gold-line);
  text-underline-offset:clamp(6px,.8vw,12px);
  text-decoration-thickness:2px;
  transition:text-decoration-color var(--t-route) var(--ease)}
.plan-switch__cur:hover h1{text-decoration-color:var(--gold)}
.plan-switch__cur:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px}

.plan-switch__chev{flex:none;inline-size:clamp(30px,3vw,38px);block-size:clamp(30px,3vw,38px);
  display:grid;place-items:center;border-radius:50%;
  background:rgba(252,248,244,.9);border:1px solid var(--gold-line);color:var(--gold-deep);
  transition:transform var(--t-route) var(--ease),background var(--t-route) var(--ease)}
.plan-switch__chev svg{inline-size:56%;block-size:56%}
.plan-switch__cur:hover .plan-switch__chev{background:var(--beige)}
.plan-switch[open] .plan-switch__chev{transform:rotate(180deg)}

/* اللوحة: تعلق تحت العنوان ولا تدفع ما بعده — الصفحة لا تقفز عند الفتح */
.plan-switch__menu{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:0;z-index:40;
  min-inline-size:min(320px,86vw);
  padding:14px;background:var(--paper);
  border:1px solid var(--gold-line);border-radius:20px;box-shadow:var(--sh-raise);
  animation:plan-switch-in 180ms var(--ease) both}
@keyframes plan-switch-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.plan-switch__h{margin:0 0 10px;font-size:.82rem;font-weight:700;color:var(--ink-3);
  letter-spacing:.02em}
.plan-switch__stage{margin:12px 0 6px;font-size:.86rem;font-weight:700;color:var(--gold-text)}
.plan-switch__stage:first-of-type{margin-block-start:0}
.plan-switch__list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.plan-switch__i{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;
  font-size:.98rem;color:var(--ink-2);
  transition:background var(--t-route) var(--ease)}
.plan-switch__i:hover{background:var(--beige)}
.plan-switch__tier{flex:1 1 auto;min-inline-size:0;font-weight:700;color:var(--ink)}
.plan-switch__price{flex:none;font-size:.92rem;font-weight:700;color:var(--ink-2)}
.plan-switch__price span{font-size:.78em;color:var(--ink-3)}
.plan-switch__tick{flex:none;inline-size:17px;block-size:17px;color:var(--emerald)}
.plan-switch__i.is-current{background:rgba(12,120,108,.08)}
.plan-switch__i.is-current .plan-switch__tier{color:var(--emerald)}

.plan-switch__all{display:flex;align-items:center;justify-content:center;gap:7px;
  margin-block-start:12px;padding-block-start:12px;
  border-block-start:1px solid var(--gold-line-soft);
  font-size:.9rem;font-weight:700;color:var(--gold-text)}
.plan-switch__all svg{inline-size:15px;block-size:15px;flex:none}
.plan-switch__all:hover{text-decoration:underline}

@media (max-width:560px){
  .plan-switch{display:block}
  .plan-switch__cur{inline-size:100%}
  .plan-switch__chev{margin-inline-start:auto}
  .plan-switch__menu{inline-size:100%}
}
@media (prefers-reduced-motion:reduce){
  .plan-switch__menu{animation:none}
  .plan-switch__chev{transition:none}
}

/* شريط الإحصاء — وما كان صفرا لا يصل إلى هنا أصلا (tqs_stat_strip) */
.plan-stats{display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,22px);margin-block-start:clamp(14px,2vw,22px)}
.plan-stats__i{display:flex;align-items:center;gap:9px;padding:9px 15px;
  background:rgba(252,248,244,.72);border:1px solid var(--gold-line-soft);
  border-radius:999px;font-size:.9rem;color:var(--ink-2)}
.plan-stats__i svg{inline-size:18px;block-size:18px;flex:none;color:var(--gold-deep)}
.plan-stats__i b{color:var(--ink);font-size:1.05rem;font-weight:800}

/* ── بطاقة الشراء ─────────────────────────────────────────────── */
.plan-card{display:grid;gap:14px}
.plan-card__media{border-radius:18px;overflow:hidden;aspect-ratio:880/587;background:var(--beige)}
.plan-card__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block}

/* ── الصورة مشغلا: معاينة الباقة ──────────────────────────────────
   الصورة كانت لوحة صامتة بينما في الباقة دروس مفتوحة مدفونة تحت طيتين.
   وهذه تجعلها تقول ما هي وتفتح ما تعد به: تعتيم يرفع الحبر الأبيض،
   وقرص تشغيل، وشارة تسمي المجانية، وشريط يذكر اسم الدرس ومدته. */
.plan-card__media--promo{position:relative;display:block;cursor:pointer}
.plan-card__media--promo img{transition:transform 420ms var(--ease)}
.plan-card__media--promo:hover img{transform:scale(1.045)}

.plan-promo__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,33,31,.34) 0,rgba(1,33,31,0) 34%,
                                     rgba(1,33,31,.06) 52%,rgba(1,33,31,.78) 100%)}

.plan-promo__play{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(50%,-50%);                 /* RTL: نصف موجب يعيد التوسيط */
  inline-size:64px;block-size:64px;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;
  background:rgba(252,248,244,.94);color:var(--petrol);
  box-shadow:0 12px 30px -12px rgba(1,33,31,.7);
  transition:transform var(--t-route) var(--ease),background var(--t-route) var(--ease)}
.plan-promo__play svg{inline-size:26px;block-size:26px;
  margin-inline-start:3px}                        /* المثلث بصريا لا هندسيا */
.plan-card__media--promo:hover .plan-promo__play{background:#fff;
  transform:translate(50%,-50%) scale(1.08)}

.plan-promo__tag{position:absolute;inset-block-start:12px;inset-inline-start:12px;
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--emerald);color:#fff;font-size:.82rem;font-weight:700;
  box-shadow:0 8px 20px -10px rgba(1,33,31,.8)}
.plan-promo__tag svg{inline-size:15px;block-size:15px;flex:none}

.plan-promo__cap{position:absolute;inset-inline:0;inset-block-end:0;
  display:grid;gap:2px;padding:14px 16px;pointer-events:none;color:#fff}
.plan-promo__cap b{font-size:.95rem;font-weight:700;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plan-promo__cap i{font-style:normal;font-size:.84rem;color:var(--gold-on-dark)}

@media (max-width:420px){
  .plan-promo__play{inline-size:52px;block-size:52px}
  .plan-promo__play svg{inline-size:21px;block-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .plan-card__media--promo img,.plan-promo__play{transition:none}
  .plan-card__media--promo:hover img{transform:none}
}
/* ── معاينة الباقة في مربعها ───────────────────────── */
.plan-promo__player{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-card);background:#0B2B2E
}
.plan-promo__player iframe,.plan-promo__player video{
  position:absolute;inset:0;inline-size:100%;block-size:100%;border:0;display:block
}
.plan-promo__close{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  inline-size:34px;block-size:34px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(1,33,31,.62);border:1px solid rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
.plan-promo__close svg{inline-size:15px;block-size:15px}
.plan-promo__close:hover{background:rgba(1,33,31,.86)}
/* ── TQ-PREVIEW-MODAL · نافذة المعاينة ───────────────────
   تطبع من `site.js` لا من قالب: فالوسم لا يوجد إلا بعد نقرة،
   وصفحة تحمل وسم نافذة مغلقة تدفع ثمنها في كل زيارة.
   والأسماء `tqpv-*` لا `plan-*`: المنهج يطبع في أربع صفحات،
   واسم يقول «باقة» على نافذة تفتح في صفحة برنامج يكذب مرة واحدة
   ثم ينسخ معه أبدا. */

/* الصفحة تتجمد خلف النافذة: منهج يمرر تحت مقطع يشتغل يفقد
   الزائر موضعه الذي جاءت النافذة تحفظه عليه. */
.tqpv-lock{overflow:hidden}

.tqpv{
  position:fixed;inset:0;z-index:1000;                 /* فوق الشريط اللزج (950) */
  display:grid;place-items:center;padding:clamp(10px,3vw,44px);
  opacity:0;transition:opacity 200ms var(--ease)
}
.tqpv.is-on{opacity:1}

/* التمويه على الحجاب لا على الصفحة: `filter` على المحتوى ينشئ
   سياق طبقات جديدا يحبس كل `position:fixed` تحته — فيسقط الشريط
   اللزج والنافذة نفسها إن كانت من أبنائه. ومن لا يعرف جهازه
   `backdrop-filter` يرى التعتيم وحده — وهو يكفي لفصل الطبقتين. */
.tqpv__veil{
  position:absolute;inset:0;cursor:pointer;
  background:rgba(1,33,31,.64);
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%)
}

.tqpv__box{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  inline-size:min(1180px,100%);
  /* والعرض يحده ارتفاع الشاشة كذلك: المسرح 16:9، فبلا هذا
     يخرج أسفله تحت طية الشاشة على شاشة عريضة قصيرة (حاسوب محمول). */
  inline-size:min(1180px,100%,calc((100vh - 190px) * 16 / 9));
  border-radius:clamp(16px,2vw,26px);
  background:var(--petrol-deep);
  border:1px solid rgba(227,207,163,.22);
  box-shadow:0 44px 90px -34px rgba(1,20,19,.9),0 0 0 1px rgba(1,20,19,.35);
  transform:translateY(14px) scale(.984);
  transition:transform 280ms var(--ease)
}
.tqpv.is-on .tqpv__box{transform:none}

.tqpv__head{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:13px clamp(13px,1.8vw,20px);
  border-block-end:1px solid rgba(227,207,163,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0))
}

.tqpv__badge{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:6px 12px;border-radius:999px;
  background:var(--emerald);color:#fff;font-size:.8rem;font-weight:700
}
.tqpv__badge svg{inline-size:14px;block-size:14px;flex:none}

/* العنوان يقص ولا يلتف: سطران في الرأس يدفعان المسرح إلى أسفل. */
.tqpv__id{flex:1 1 auto;min-inline-size:0;display:grid;gap:1px;line-height:1.45}
.tqpv__id b{color:#fff;font-size:1rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tqpv__id i{font-style:normal;font-size:.82rem;color:var(--gold-on-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tqpv__id i:empty{display:none}

.tqpv__x{
  margin-inline-start:auto;flex:none;inline-size:38px;block-size:38px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:background var(--t-route) var(--ease),transform var(--t-route) var(--ease)
}
.tqpv__x svg{inline-size:16px;block-size:16px}
.tqpv__x:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}
.tqpv__x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.tqpv__stage{
  position:relative;inline-size:100%;aspect-ratio:16/9;
  background:#000;display:grid;place-items:center
}
/* سليل لا ابن (TQ-VIMEO-BOX): وسم oEmbed قد يأتي ملفوفا في `<div>`،
   ومحدد يشترط البنوة لا يطابق شيئا حينها فيرسم الإطار بطوله
   الطبيعي في أعلى مربع أسود طويل. */
.tqpv__stage iframe,.tqpv__stage video{
  position:absolute;inset:0;inline-size:100%;block-size:100%;border:0;display:block
}
.tqpv__stage>div{position:absolute;inset:0;padding:0 !important;block-size:100%}

.tqpv__wait{
  display:flex;align-items:center;gap:10px;margin:0;
  color:var(--gold-on-dark);font-size:.9rem
}
.tqpv__spin{
  inline-size:20px;block-size:20px;border-radius:50%;flex:none;
  border:2px solid rgba(227,207,163,.26);border-block-start-color:var(--gold-on-dark);
  animation:tqpv-spin .8s linear infinite
}
@keyframes tqpv-spin{to{transform:rotate(360deg)}}

@media (max-width:560px){
  /* تبقى بطاقة لا شريطا يمتد إلى حافتي الشاشة: حاشية رقيقة تبقي
     المموه ظاهرا حولها، فيقرأ أنها طبقة فوق الصفحة لا صفحة جديدة. */
  .tqpv{padding:12px}
  .tqpv__box{inline-size:100%;border-radius:18px}
  .tqpv__head{padding:10px 12px;gap:8px}
  .tqpv__badge{padding:5px 10px;font-size:.74rem}
  .tqpv__badge svg{inline-size:13px;block-size:13px}
  .tqpv__id b{font-size:.9rem}
  .tqpv__id i{font-size:.76rem}
  .tqpv__x{inline-size:34px;block-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .tqpv,.tqpv__box,.tqpv__x{transition:none}
  .tqpv__box{transform:none}
  .tqpv__x:hover{transform:none}
  .tqpv__spin{animation-duration:2.4s}
}
/* ── مبدّل دورة السعر في صفحة الباقة ────────────────────────────── */
/* `home-dark.css` (وفيها `.p26d__cycle`) لا تحمّل على `site_plan`،
   فالتنسيق هنا لا مستورد. */
.plan-cycle{
  display:inline-flex;align-items:center;gap:4px;margin-block-end:12px;
  padding:4px;border-radius:999px;
  background:var(--beige);border:1px solid var(--gold-line-soft)
}
.plan-cycle button{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:6px 15px;border-radius:999px;background:transparent;border:0;
  color:var(--ink-2);font-family:'Cairo',sans-serif;font-weight:600;
  font-size:clamp(11.5px,.85vw,13px);
  transition:background var(--t-route) var(--ease),color var(--t-route) var(--ease)
}
.plan-cycle button[aria-pressed="true"]{background:var(--petrol);color:#fff}
.plan-cycle__save{
  padding:1px 7px;border-radius:999px;font-size:.82em;font-weight:700;
  background:var(--gold-line-soft);color:var(--gold-text)
}
.plan-cycle button[aria-pressed="true"] .plan-cycle__save{
  background:rgba(212,180,118,.3);color:var(--gold-warm)
}
.plan-card__price[hidden],.plan-cta__price[hidden]{display:none}
/* ── نافذة الدخول/التسجيل في صفحة الباقة ───────────────────────── */
.tq-auth{
  inline-size:min(560px,92vw);max-block-size:88vh;padding:0;overflow:auto;
  border:1px solid var(--gold-line);border-radius:var(--r-panel);
  background:var(--paper);color:var(--ink);box-shadow:var(--sh-raise)
}
.tq-auth::backdrop{background:rgba(1,33,31,.62);backdrop-filter:blur(3px)}
.tq-auth>*{margin-inline:clamp(18px,3vw,30px)}
.tq-auth__x{
  position:sticky;inset-block-start:12px;inset-inline-start:12px;z-index:2;
  margin:12px 12px 0 auto;display:grid;place-items:center;cursor:pointer;
  inline-size:34px;block-size:34px;border-radius:50%;
  background:var(--beige);border:1px solid var(--gold-line-soft);color:var(--ink-2)
}
.tq-auth__x svg{inline-size:14px;block-size:14px}
.tq-auth__x:hover{background:var(--gold-line-soft)}
.tq-auth__lede{margin:0 clamp(18px,3vw,30px) 14px;color:var(--ink-2);font-size:.95rem}
.tq-auth__lede b{color:var(--ink)}
.tq-auth__tabs{
  display:flex;gap:4px;padding:4px;margin-block-end:16px;
  border-radius:999px;background:var(--beige);border:1px solid var(--gold-line-soft)
}
.tq-auth__tabs button{
  flex:1;padding:8px 12px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--ink-2);
  font-family:'Cairo',sans-serif;font-weight:600;font-size:clamp(12px,.9vw,13.5px)
}
.tq-auth__tabs button[aria-pressed="true"]{background:var(--petrol);color:#fff}
.tq-auth__form{display:grid;gap:11px;padding-block-end:clamp(18px,3vw,28px)}
.tq-auth__form[hidden]{display:none}
.tq-auth__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.tq-auth__form label{display:grid;gap:5px;min-inline-size:0}
.tq-auth__form label>span{font-size:clamp(11.5px,.86vw,13px);color:var(--ink-2);font-weight:600}
.tq-auth__form label>span i{font-style:normal;font-weight:400;color:var(--ink-3)}
.tq-auth__form input:not([type="checkbox"]),.tq-auth__form select{
  inline-size:100%;padding:11px 13px;border-radius:var(--r-btn);
  border:1px solid var(--gold-line-soft);background:#fff;color:var(--ink);
  font-family:inherit;font-size:clamp(13px,.95vw,14.5px)
}
.tq-auth__form input:focus-visible,.tq-auth__form select:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px
}
.tq-auth__terms{
  display:flex!important;align-items:flex-start;gap:9px;
  font-size:clamp(12px,.88vw,13px);color:var(--ink-2);line-height:1.7
}
.tq-auth__terms input{inline-size:17px;block-size:17px;flex:none;margin-block-start:3px;accent-color:var(--petrol)}
.tq-auth__note{margin:2px 0 0;text-align:center}
@media (max-width:520px){
  .tq-auth__row{grid-template-columns:minmax(0,1fr)}
}

/* المبدّل لا يتمدّد على عرض البطاقة. والأب **شبكة** لا عمود فليكس،
   فـ`align-self` تحكم المحور الكتليّ وحده — والمحور الآخر `justify-self`. */
.plan-cycle{justify-self:start;align-self:start}
/* TQ-CYCLE-CHARGE — كلمة تسبق المبدل تقول إنه يبدل العرض
   لا الفوترة. وهي `p` لا `label`: لا حقل هنا تسميه، والربط
   بـ`aria-labelledby` على المجموعة نفسها. */
.plan-cycle__lead{
  justify-self:start;margin:0 0 -4px;color:var(--ink-3);
  font-weight:600;font-size:clamp(11.5px,.88vw,13px)
}
.plan-card__price{margin:0;font-size:clamp(26px,2.8vw,38px);font-weight:800;color:var(--ink);
  line-height:1.15;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.plan-card__price span{font-size:.46em;font-weight:700;color:var(--ink-2)}
.plan-card__price small{flex-basis:100%;font-size:.42em;font-weight:600;color:var(--ink-2);
  line-height:1.5;margin-block-start:2px}
/* المخصوم يقرأ مع الرقم لا بعده — TQ-CYCLE-CHARGE */
.plan-card__price small.tq-pay{font-size:.4em;font-weight:700;color:var(--ink);
  margin-block-start:6px}
/* TQ-COURSE-SALE — سعر ما قبل الخصم، فوق السعر لا بجواره.
   بجواره يقرأ رقمين متنافسين، وفوقه بحجم أصغر ومشطوب يقرأ ما هو:
   مرجعا لما وفر. و`line-through` وحدها لا تكفي — اللون يبعده عن
   الرقم الذي يدفع، وإلا استوى المشطوب والمطلوب في العين. */
.plan-card__was{margin:0 0 -4px;font-size:.92rem;font-weight:700;color:var(--ink-3);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.plan-card__was .tq-ltr{text-decoration:line-through;text-decoration-thickness:1.5px}
.plan-card__was b{font-size:.86em;font-weight:800;color:var(--emerald);
  background:rgba(12,120,108,.1);border-radius:999px;padding:2px 9px}
/* «يخصم كذا مرة واحدة» — TQ-CYCLE-CHARGE بوجهه في الكورس المفرد:
   الثمن يقال **مع** الرقم لا في حاشية تحته، فلا تقرأ العين السعر
   وتترك ما يفسره. */
p.tq-pay{margin:0;font-size:.9rem;font-weight:600;color:var(--ink-2);line-height:1.6}
p.tq-pay b{color:var(--ink);font-weight:800}
.plan-card__owned{margin:0;display:flex;align-items:center;gap:8px;padding:10px 13px;
  background:rgba(12,120,108,.09);border:1px solid rgba(12,120,108,.28);border-radius:13px;
  color:var(--emerald);font-weight:700;font-size:.92rem}
.plan-card__owned svg{inline-size:18px;block-size:18px;flex:none}
.plan-card__soon{margin:0;font-size:.92rem;color:var(--ink-3);font-weight:700}
.plan-card__hint{margin:0;text-align:center}
.plan-card__facts{list-style:none;margin:0;padding:14px 0 0;display:grid;gap:9px;
  border-block-start:1px solid var(--gold-line-soft)}
.plan-card__facts li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-2)}
.plan-card__facts svg{inline-size:17px;block-size:17px;flex:none;color:var(--gold-deep)}
.plan-card__back{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.88rem;font-weight:700;color:var(--gold-text)}
.plan-card__back svg{inline-size:16px;block-size:16px;flex:none}
.plan-card__back:hover{text-decoration:underline}

/* ── ماذا تشمل ────────────────────────────────────────────────── */
.incl{list-style:none;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.6vw,18px)}
.incl__i{display:flex;align-items:flex-start;gap:11px;font-size:.93rem;color:var(--ink-2);line-height:1.6}
.incl__ico{inline-size:38px;block-size:38px;flex:none;display:grid;place-items:center;
  border-radius:12px;background:var(--beige);border:1px solid var(--gold-line-soft);color:var(--gold-deep)}
.incl__ico svg{inline-size:19px;block-size:19px}

/* ── الصفوف والمعلمون ────────────────────────────────────────── */
.gradelist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.gradelist__i{display:flex;align-items:baseline;gap:8px;padding:9px 14px;background:var(--cream);
  border:1px solid var(--gold-line-soft);border-radius:13px}
.gradelist__i b{color:var(--ink);font-size:.93rem}
.gradelist__i span{color:var(--ink-3);font-size:.86rem}
/* TQ-SCOPE-GRADES — صف في النطاق لم يكتمل محتواه: حاضر ومميز، لا مخفي.
   وشارته بحد متقطع ولون التمهيد نفسه المستعمل في بقية «قيد الإعداد». */
.gradelist__i.is-soon{border-style:dashed;background:transparent}
.gradelist__i.is-soon b{color:var(--ink-3);font-weight:600}
.gradelist__prep{color:var(--gold-text);font-weight:700;font-size:.8rem}

.tlist{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.tlist__i{background:var(--cream);border:1px solid var(--gold-line-soft);border-radius:15px;
  transition:border-color var(--t-route) var(--ease),box-shadow var(--t-route) var(--ease)}
/* الصف نفسه سواء لف برابط أو لم يلف: `display:contents` كان يسقط
   الحشو، فالحشو على الوعاء الداخلي لا على البطاقة. */
.tlist__l{display:flex;align-items:center;gap:11px;padding:10px}
.tlist__i:hover:has(a.tlist__l){border-color:var(--gold-line);box-shadow:var(--sh-soft)}
a.tlist__l:hover .tlist__b b{color:var(--gold-text)}
.tlist__i img,.tlist__ph{inline-size:48px;block-size:48px;border-radius:50%;flex:none;object-fit:cover}
.tlist__ph{display:grid;place-items:center;background:var(--beige);color:var(--gold-deep)}
.tlist__ph svg{inline-size:22px;block-size:22px}
.tlist__b b{display:block;color:var(--ink);font-size:.93rem}
.tlist__b small{color:var(--ink-3);font-size:.86rem}

/* ── أسئلة قبل الاشتراك ──────────────────────────────────────── */
.faq2{margin-block-start:14px;display:grid;gap:9px}
.faq2__i{background:var(--cream);border:1px solid var(--gold-line-soft);border-radius:14px;
  overflow:hidden}
.faq2__i>summary{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;
  font-weight:700;color:var(--ink);font-size:.95rem;list-style:none}
.faq2__i>summary::-webkit-details-marker{display:none}
.faq2__i>summary svg{inline-size:17px;block-size:17px;flex:none;margin-inline-start:auto;
  color:var(--gold-deep);transition:transform var(--t-route) var(--ease)}
.faq2__i[open]>summary svg{transform:rotate(180deg)}
.faq2__i>p{margin:0;padding:0 16px 14px;color:var(--ink-2);font-size:.92rem;line-height:1.75}

/* ── باقات أخرى: شبكة البطاقات تحت الصفحة ───────────────────────
   لا قاعدة للشبكة نفسها هنا — هي `.cgrid` عينها التي يرسم بها الكتالوج،
   فتتبعه في العرض والفجوة وحد البطاقة بلا سطر يكرر. وهذا وحده المكتوب:
   رابط «شاهد الباقات كلها» تحتها، ورأس القسم يوسط بـ`.section-head`. */
.plan-rel__all{margin-block-start:clamp(18px,2vw,28px);text-align:center}

/* ── نداء ختامي ─────────────────────────────────────────────── */
.plan-cta__in{
  position:relative;overflow:hidden;isolation:isolate;
  text-align:center;padding:clamp(30px,4vw,56px) clamp(18px,3vw,40px);
  border-radius:var(--r-panel);color:#fff;
  background:linear-gradient(120deg,var(--petrol-deep),var(--petrol) 52%,#0A5058);
  box-shadow:0 26px 54px -30px rgba(4,66,74,.9)}
/* الحروفيات كما في `.cta` — القناع لا صورة خلفية، فتتبع لون الذهب */
.plan-cta__in::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--gold-warm);
  -webkit-mask-image:url('../img/script-tile.webp');mask-image:url('../img/script-tile.webp');
  -webkit-mask-size:var(--script-tile) auto;mask-size:var(--script-tile) auto;
  opacity:var(--script-op-dark)}

.plan-cta__eyebrow{margin:0 0 6px;font-size:.86rem;font-weight:700;letter-spacing:.04em;
  color:var(--gold-warm);text-transform:none}
.plan-cta__eyebrow:empty{display:none}
.plan-cta__in h2{color:#fff;margin:0 0 6px;font-size:clamp(22px,2.7vw,38px)}
.plan-cta__lead{margin:0;color:rgba(255,255,255,.82);font-size:clamp(14px,1.1vw,17px)}

/* السعر شارة لا جملة: هو الرقم الذي يقرر، فيقرأ وحده */
.plan-cta__price{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  margin-block:clamp(16px,2vw,24px) 0;padding:12px 26px;border-radius:20px;
  background:rgba(255,255,255,.08);border:1px solid rgba(212,180,118,.34)}
.plan-cta__price b{font-family:'Cairo',sans-serif;font-weight:800;line-height:1;
  font-size:clamp(30px,3.2vw,42px);color:#fff}
.plan-cta__price>span{font-size:clamp(13px,1vw,15px);font-weight:700;color:var(--gold-warm)}
/* المخصوم يقرأ مع الرقم لا بعده — TQ-CYCLE-CHARGE */
.plan-cta__price small.tq-pay{color:#F2E4C6;font-weight:700;
  font-size:clamp(12.5px,.98vw,14.5px)}
.plan-cta__price small{font-size:clamp(12.5px,.95vw,14px);font-weight:600;
  color:var(--gold-on-dark)}

.plan-cta__acts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(10px,1.1vw,14px);margin-block-start:clamp(18px,2vw,28px)}
.plan-cta__acts .btn{font-size:clamp(13px,1.02vw,15px);padding-block:13px}
.plan-cta__acts .btn--ghost{padding-block:12px}   /* +1px حد ⇒ نفس الارتفاع */

.plan-cta__note{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin:clamp(16px,1.8vw,22px) auto 0;max-inline-size:56ch;
  font-size:clamp(12.5px,.95vw,14.5px);line-height:1.8;color:rgba(255,255,255,.72)}
.plan-cta__note svg{inline-size:17px;block-size:17px;flex:none;color:var(--gold-warm)}

@media (max-width:980px){
  .plan-cols{grid-template-columns:1fr}
  .plan-buy{order:-1}                 /* السعر قبل المنهج على الجوال: الشاشة ضيقة
                                         وطي المنهج يدفع الزر إلى ما بعد شاشتين */
}


/* ══════════════════════════════════════════════════════════════════
   TQ-CHECKOUT · تأكيد الشراء — شاشة واحدة بلا سلة
   ══════════════════════════════════════════════════════════════════ */
.co-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);align-items:start}
.co-main{display:grid;gap:clamp(14px,1.8vw,22px);min-width:0}

.co-item{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;margin-block-start:14px;border-block:1px solid var(--gold-line-soft)}
.co-item__img{inline-size:132px;block-size:88px;object-fit:cover;border-radius:13px;flex:none}
.co-item__b{flex:1 1 200px;min-width:0}
.co-item__b h3{margin:0 0 4px;font-size:1rem;color:var(--ink)}
.co-item__dur{margin:6px 0 0;display:flex;align-items:center;gap:7px;
  font-size:.9rem;color:var(--ink-2)}
.co-item__dur svg{inline-size:15px;block-size:15px;flex:none;color:var(--gold-deep)}
.co-item__price{margin:0;flex:none;font-size:1.35rem;font-weight:800;color:var(--ink);
  text-align:start}
.co-item__price span{font-size:.62em;font-weight:700;color:var(--ink-2)}
/* TQ-CYCLE-CHARGE — المعادل الشهري تحت المخصوم: هو الرقم
   الذي رآه المشتري في صفحة الباقات، فيجده هنا ولا يظن أنه ضاع. */
.co-item__price small{display:block;margin-block-start:3px;
  font-size:.56em;font-weight:600;color:var(--ink-3);white-space:nowrap}
.co-cycle{margin:12px 0 0;padding:11px 13px;border-radius:12px;
  background:rgba(12,120,108,.06);border:1px solid rgba(12,120,108,.18);
  color:var(--ink-2);font-size:.88rem;font-weight:600;line-height:1.75}
.co-cycle b{color:var(--ink);font-weight:800}
/* TQ-CYCLE-BUY — منتقي مدة الاشتراك: روابط لا أزرار راديو، فالاختيار
   يعيد بناء الصفحة من الخادم ولا يبقى رقم قديما لأن سكربتا تعثر. */
.co-cyc{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
  margin-block-start:4px}
.co-cyc__opt{display:grid;gap:3px;padding:13px 15px;border-radius:14px;text-decoration:none;
  border:1.5px solid var(--gold-line-soft);background:var(--paper);color:var(--ink);
  transition:border-color var(--t-route) var(--ease),background var(--t-route) var(--ease)}
.co-cyc__opt:hover{border-color:var(--gold-line);text-decoration:none}
.co-cyc__opt.is-on{border-color:var(--emerald);background:rgba(12,120,108,.06)}
.co-cyc__name{font-weight:700;font-size:.95rem;color:var(--ink-2)}
.co-cyc__opt.is-on .co-cyc__name{color:var(--emerald)}
.co-cyc__price{font-size:1.4rem;font-weight:800;line-height:1.15}
.co-cyc__price b{font-variant-numeric:tabular-nums}
.co-cyc__note{font-size:.8rem;font-weight:600;color:var(--ink-3);line-height:1.6}
.co-cyc__foot{margin:12px 0 0}


.co-opens{margin:14px 0 0;font-size:.9rem;color:var(--ink-2);line-height:1.8}
.co-opens b{color:var(--ink)}
.co-opens a{color:var(--gold-text);font-weight:700;text-decoration:underline;margin-inline-start:6px}

.co-total{margin:16px 0 0;display:grid;gap:8px}
.co-total>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.93rem;color:var(--ink-2)}
.co-total dt,.co-total dd{margin:0}
.co-total__f{padding-block-start:10px;border-block-start:1px solid var(--gold-line-soft);
  font-size:1.1rem;font-weight:800;color:var(--ink)}
.co-total__f dd span{font-size:.62em;color:var(--ink-2)}

.co-pay{margin:14px 0 0;display:grid;gap:6px}
.co-pay__pick{display:inline-flex;align-items:center;gap:9px;padding:11px 15px;
  background:var(--cream);border:2px solid var(--emerald);border-radius:14px;
  color:var(--ink);width:fit-content}
.co-pay__pick svg{inline-size:19px;block-size:19px;flex:none;color:var(--emerald)}

/* منتقي طريقة الدفع — بطاقتان لا قائمة منسدلة:
   الخياران اثنان ويقرآن معا في سطرين، والمنسدلة تخفي أحدهما خلف ضغطة. */
.co-pick{display:grid;gap:10px;margin-block-start:14px}
.co-opt{display:block;cursor:pointer}
.co-opt input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.co-opt__box{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  background:var(--cream);border:2px solid var(--gold-line-soft);border-radius:16px;
  transition:border-color .15s ease,background .15s ease}
.co-opt:hover .co-opt__box{border-color:var(--emerald)}
.co-opt input:checked + .co-opt__box{border-color:var(--emerald);background:#fff}
/* حلقة التركيز على الغلاف: المدخل مخفي بصريا، فبلا هذا لا يرى من يتنقل
   بلوحة المفاتيح أين هو. */
.co-opt input:focus-visible + .co-opt__box{outline:2px solid var(--emerald);outline-offset:2px}
.co-opt__ico{inline-size:38px;block-size:38px;flex:none;display:grid;place-items:center;
  border-radius:11px;background:var(--beige);color:var(--emerald)}
.co-opt__ico svg{inline-size:20px;block-size:20px}
.co-opt__t{display:grid;gap:3px}
.co-opt__t b{color:var(--ink);font-size:.98rem}
.co-opt input:checked + .co-opt__box .co-opt__ico{background:var(--emerald);color:#fff}

.co-pay__test{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:10px 14px;
  border-radius:12px;background:#FDF3E3;color:#7A4A08;font-size:.88rem;line-height:1.7}
.co-pay__test svg{inline-size:17px;block-size:17px;flex:none}

.co-bank{margin-block-start:16px}

/* `hidden` يحتاج سطرا صريحا على هذه الصفحة.
   `base.css` — وفيها `[hidden]{display:none !important}` — لا تحمل في صفحات
   التصميم (انظر شرط `$tq_is_site` في includes_top.php)، و`.co-steps` معرفة
   `display:grid`. والصنف يهزم قاعدة المتصفح الافتراضية لـ`[hidden]`، فكان
   منتقي الطريقة يخفي خطوات لا تخفى — تقرأ العين خطوات البطاقة وخطوات
   الحوالة معا. */
.co-cols [data-tq-for][hidden]{display:none}

.co-blocked__acts{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:16px}

.co-side__h{margin:0 0 12px;font-size:1rem;color:var(--ink)}
.co-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.co-steps li{display:flex;align-items:center;gap:10px;font-size:.93rem;color:var(--ink-2)}
.co-steps b{inline-size:24px;block-size:24px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--beige);color:var(--gold-text);font-size:.86rem;font-weight:700}
.co-side__total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin:0 0 14px;padding-block:12px;border-block:1px solid var(--gold-line-soft)}
.co-side__total span{color:var(--ink-2);font-size:.92rem}
.co-side__total b{font-size:1.3rem;font-weight:800;color:var(--ink)}
.co-side__total b span{font-size:.6em;color:var(--ink-2)}
.co-side__cycle{margin:2px 0 0;color:var(--ink-3);font-size:.82rem;
  font-weight:600;line-height:1.7}
.co-side__cycle b{color:var(--ink-2);font-weight:800}
.co-form{margin:0}
.co-side__note{margin:12px 0 0;text-align:center;line-height:1.7}
.co-side__note a{color:var(--gold-text);font-weight:700;text-decoration:underline}
.co-side__back{display:flex;align-items:center;justify-content:center;gap:7px;
  margin-block-start:14px;font-size:.86rem;font-weight:700;color:var(--gold-text)}
.co-side__back svg{inline-size:15px;block-size:15px;flex:none}
.co-side__back:hover{text-decoration:underline}

@media (max-width:980px){
  .co-cols{grid-template-columns:1fr}
  .co-side .icard--sticky{position:static}
}



/* ══════════════════════════════════════════════════════════════════
   TQ-AUTH2 · صفحات الحساب: الدخول والتسجيل والاستعادة
   ------------------------------------------------------------------
   ما كان قبل هذا القسم يصف تخطيطا لا يصمد لطول النموذج:

   · الغلاف ٩٨٠px، والعمودان ‎1fr/.82fr‎ — فعمود النموذج ~٥٠٠px يحمل
     شبكة من عمودين، وعلى شاشة ١٩٢٠ تبقى فراغات على الجانبين أوسع من
     النموذج نفسه. ضيق حيث تكتب، وفراغ حيث لا شيء.
   · و`align-items:stretch` تجعل اللوحة الجانبية بطول النموذج: في
     التسجيل معلما يبلغ ٩٠٠px، فتصير الصورة ‎700×1050‎ شريطا نسبته
     ١:٢ يقص `object-fit:cover` أكثر من نصفه — وهو «العرض المضغوط».
   · و`opacity:.5` فوق البترولي ثم تدرج غامق فوقها: صورة تحت طبقتين
     لا تقرأ، فلا هي زينة ولا هي معلومة.

   والحل هنا: غلاف أوسع، ولوحة بنسبة ثابتة **تلتصق** فتصاحب التمرير
   بدل أن تمط، وصورة بلا حجاب وتدرج يبدأ حيث يبدأ النص وحده.
   ══════════════════════════════════════════════════════════════════ */

.shell--auth{ max-inline-size:min(1180px,100%) }

.auth-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(18px,2.6vw,36px);
  /* TQ-AUTH-ALIGN — الطرفان بارتفاع واحد وحافتان تتقابلان.
     كانت `align-items:start` مع `position:sticky`: فبمجرد أن تتحرك
     الصفحة تلتصق اللوحة تحت الترويسة وتظل البطاقة تمشي — فيفترق
     أعلاهما ويفترق أسفلهما، ويقرأ الجزء كله على أنه غير مضبوط.
     والالتصاق نفسه كان يحل مشكلة لم تعد قائمة: اللوحة الآن تطاول
     النموذج بنفسها فلا شيء تلاحقه. */
  align-items:stretch;
}

/* ── اللوحة الجانبية: نافذة صورة فوق لوح نص ──────────────────────
   الصورة لا تحمل الطول كله. كانت تملأ اللوحة وتقص بـ`cover`، فطول
   النموذج هو الذي يقرر نسبتها: ألف بكسل في التسجيل معلما تعني شريطا
   ١:٢. وهنا يأخذ **اللوح** الفائض والصورة تبقى نافذة معقولة. */
.auth-aside{
  position:relative;
  display:grid;
  /* نسبة ثابتة بين النافذة واللوح لا «ما تبقى»: بترك الفائض للصورة
     تتبع نسبتها طول النموذج فتتأرجح بين شريط عرضي (٣.٢ في الاستعادة)
     وشريحة طولية (٠.٤٩ في تسجيل المعلم). وبالكسور تبقى النسبة في
     حدود معقولة مهما طال النموذج أو قصر.
     و`minmax(170px, …)` قاع للصورة، و`54fr` بحدها الأدنى التلقائي
     يمنع النص أن يفيض حين تضيق اللوحة. */
  grid-template-rows:minmax(170px,46fr) 54fr;
  inline-size:100%;
  /* وقاع للوحة كلها: صفحة الاستعادة نموذجها ‎449px‎، فبلا حد أدنى يصير
     نصيب اللوح أكبر من نصيب الصورة وتنقلب اللوحة نصا على شريط.
     والبطاقة تمتد معها لأنهما في صف واحد — ومحتواها يتوسط. */
  min-block-size:clamp(500px,42vw,640px);
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--petrol-deep);
  box-shadow:var(--sh-card);
}
.auth-aside__photo{ position:relative;overflow:hidden;min-block-size:150px }
.auth-aside__photo img{
  position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;object-position:50% 34%;
  opacity:1                                /* كانت ‎.5‎ فوق البترولي — طين لا صورة */
}
/* الصورة تذوب في اللوح فلا يقطعهما خط: حد صريح بين نصفين يجعلهما
   لوحتين ملصقتين لا لوحة واحدة. */
.auth-aside__photo::after{
  content:'';position:absolute;inset-inline:0;inset-block-end:-1px;
  block-size:42%;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,33,31,0),rgba(1,33,31,.55) 52%,var(--petrol-deep));
}
.auth-aside__body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(12px,1.4vw,18px);
  padding:clamp(20px,2.4vw,32px);
  background:var(--petrol-deep);
}
/* الحروفيات تملأ اللوح الطويل: نموذج المعلم يطول فيبقى تحت النقاط
   فراغ أخضر. والقناع يلون من التوكن — الصورة سوداء لا تلون. */
.auth-aside__body::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--gold-warm);
  -webkit-mask-image:url('../img/script-column.webp');
  mask-image:url('../img/script-column.webp');
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:auto 118%;mask-size:auto 118%;
  -webkit-mask-position:center;mask-position:center;
  opacity:.09;
}
/* خيط ذهبي داخلي: يربط اللوحة بلغة البطاقات في بقية الموقع */
.auth-aside::after{
  content:'';position:absolute;inset:10px;z-index:2;pointer-events:none;
  border:1px solid rgba(212,180,118,.28);
  border-radius:calc(var(--r-card) - 10px);
}
.auth-aside h2{
  color:#fff;font-size:clamp(18px,1.5vw,23px);line-height:1.5;margin:0;
}
.auth-points{display:grid;gap:clamp(11px,1.2vw,15px)}
.auth-points li{align-items:flex-start;font-size:max(13px,.9rem);line-height:1.7}
.auth-points li svg{
  width:30px;height:30px;padding:6px;border-radius:9px;
  background:rgba(212,180,118,.16);border:1px solid rgba(212,180,118,.3);
  margin-block-start:0;color:var(--gold-warm)
}
.auth-points b{font-size:max(14px,.96rem);margin-block-end:1px}

/* ── بطاقة النموذج ───────────────────────────────────────────────── */
.form-card{ padding:clamp(22px,2.6vw,38px) }
/* البطاقة تمتد بامتداد صفها، فنموذج قصير في بطاقة طويلة يترك فراغا
   تحته. والتوسيط يجعل الفراغ حاشية متساوية أعلى وأسفل — وهو ما
   تقرؤه العين تصميما لا نقصا. وعلى الصفحات الطويلة البطاقة هي التي
   تقود الارتفاع فلا فائض ولا أثر لهذا السطر. */
.auth-wrap .form-card{ display:flex;flex-direction:column;justify-content:center }
.auth-brand{ margin-block-end:clamp(16px,2vw,24px) }

/* المسافات يملكها فاصل الشبكة وحده: الهوامش المفردة على كل حقل كانت
   تتراكم مع الفواصل فتختلف المسافة بين حقلين عنها بين حقل وشبكة. */
.form-card .form-field{ margin-block-end:0 }
.form-card .form-grid,
.form-card .form-stack{
  display:grid;gap:clamp(11px,1.2vw,15px);margin-block:0
}
.form-card .form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
/* TQ-AUTH-GAP — الفجوة التي لا يملأها شيء.
   `.form-grid` صنف عام كتب لنموذج «تواصل معنا»: ثلاثة صفوف آخرها
   `minmax(132px,1fr)` لمربع الرسالة، و`flex:1` ليأخذ ما بقي من طول
   البطاقة (`pages.css:712`). وشبكة التسجيل صف واحد من خليتين، فالصفان
   الثاني والثالث يبقيان فارغين ويطالب الثالث بمئة واثنين وثلاثين بكسلا
   على الأقل ثم يمتص الفائض — فيظهر تحت كل شبكة فراغ بارتفاع حقل كامل:
   بين «اسمك» و«بيانات الدخول»، وبين هذه و«بيانات الطالب»، وقبل سطر
   الموافقة. والصفوف تشتق من المحتوى هنا لا من قالب مكتوب. */
.auth-wrap .form-grid{ grid-template-rows:none;flex:0 0 auto }
/* `.form-cell` لا `.field`: الأخير مأخوذ منذ صفحات الفلترة والبحث
   (`pages.css:243`) وهو `display:flex` بخلفية وحد. فحقل التسجيل الملفوف
   به كان يصير صفا أفقيا: التلميح بجانب الحقل لا تحته، والحقل ‎67px‎ في
   خلية ‎239px‎، وإطار داخل إطار. */
.form-cell{ min-inline-size:0 }
.form-cell--full{ grid-column:1/-1 }

/* ── أقسام النموذج: «اسمك» ثم «بيانات الدخول» ثم ما يخص البوابة ──
   نموذج التسجيل أحد عشر حقلا في عمود واحد؛ بلا عناوين تقرأ كقائمة
   لا كخطوات، ولا يعرف صاحبه كم بقي. والعنوان يقسمها ثلاثا قصيرة. */
.form-sect{ display:grid;gap:clamp(11px,1.2vw,15px) }
.form-sect + .form-sect{
  margin-block-start:clamp(16px,1.8vw,24px);
  padding-block-start:clamp(16px,1.8vw,24px);
  border-block-start:1px solid var(--gold-line-soft);
}
/* `.form-card h2` أخص من صنف مفرد ويضبط مقاسا ومحاذاة وسط — فعنوان
   القسم يكتب باسم البطاقة كي لا يرثهما. */
.form-card .form-sect__t{
  display:flex;align-items:center;gap:10px;margin:0;text-align:start;
  font-family:'Cairo',sans-serif;font-weight:700;
  font-size:max(13.5px,.95rem);color:var(--ink);
}
.form-sect__t::after{
  content:'';flex:1 1 auto;block-size:1px;background:var(--gold-line-soft)
}
.form-sect__t svg{
  width:17px;height:17px;aspect-ratio:1;flex:0 0 auto;color:var(--gold-deep)
}

/* ── الحقل ────────────────────────────────────────────────────────
   الحرف يكبر: ‎14px‎ سقفا لحقل يكتب فيه بريد وكلمة سر عربية النقاط
   والهمزات هو أول ما يجهد العين. */
/* والحشوة الأفقية متغير لا رقم: سهم القائمة المنسدلة يرسو عليها،
   ورقمان منسوخان يفترقان حين يعدل أحدهما — فيقف السهم خارج حقله. */
.form-field{ --ff-pad-i:15px;padding:12px var(--ff-pad-i);border-radius:14px;align-items:center }
.form-field input,.form-field textarea,.form-field select{
  font-size:max(14px,clamp(14px,1vw,15.5px));line-height:1.8
}
.form-field>svg{ align-self:center;margin-block-start:0 }
/* الأيقونة في وسط الحقل ذي السطر الواحد، وعند أول سطر في مربع النص:
   `align-items` على الحاوية لا تكفي — `align-self:center` على الأيقونة
   يهزمها، فتهبط أيقونة القلم إلى منتصف مربع بارتفاع مئة بكسل. */
.form-field--full,.form-field:has(textarea){ align-items:flex-start }
.form-field--full>svg,.form-field:has(textarea)>svg{
  align-self:flex-start;margin-block-start:7px
}
.form-field textarea{ min-height:96px;line-height:1.85 }
.form-field input::placeholder,.form-field textarea::placeholder{
  color:var(--ink-3);opacity:.85
}
/* القائمة المنسدلة سهمها في جهة القراءة، ولا يكتب فوقها سهم النظام */
.form-field select{ appearance:none;-webkit-appearance:none;cursor:pointer }
.form-field:has(select)::after{
  content:'';position:absolute;inset-inline-end:var(--ff-pad-i);inset-block-start:calc(50% - 2px);
  inline-size:8px;block-size:8px;border:solid var(--gold-deep);
  border-width:0 0 1.6px 1.6px;transform:translateY(-50%) rotate(-45deg);pointer-events:none
}
.form-field:has(select) select{ padding-inline-end:22px }

/* ── رسالة الخطأ تحت حقلها ───────────────────────────────────────
   رسالة واحدة أعلى الصفحة تقول «راجع بياناتك» لا تقول أي بيان. */
.field-err{
  display:flex;align-items:flex-start;gap:6px;
  margin:6px 2px 0;font-size:max(12.5px,.8rem);line-height:1.65;
  color:#A32A3B;font-weight:600
}
.field-err::before{
  content:'!';flex:0 0 auto;
  inline-size:15px;block-size:15px;margin-block-start:3px;
  display:grid;place-items:center;border-radius:50%;
  background:#A32A3B;color:#fff;font-size:10.5px;font-weight:700;line-height:1
}
.field-err[hidden]{ display:none }
.form-field--invalid{ border-color:#C2556A;box-shadow:0 0 0 3px rgba(194,85,106,.14) }
.form-field--invalid>svg{ color:#A32A3B }
/* الخطأ يبقى ظاهرا وقت التصحيح: `:focus-within` الذهبي أخص في الترتيب،
   فبمجرد أن ينتقل التركيز إلى الحقل الخاطئ يعود حده ذهبيا — والمستخدم
   يقف عند الحقل الذي نقله إليه النموذج فلا يرى عليه علامة خطأ. */
.form-field--invalid:focus-within{
  border-color:#C2556A;box-shadow:0 0 0 3px rgba(194,85,106,.24)
}
/* والتلميح ينسحب أمام الرسالة: «ثمانية محارف على الأقل» تحتها
   «كلمة المرور ثمانية محارف على الأقل» سطران يقولان شيئا واحدا. */
.form-cell:has(> .field-err:not([hidden])) > .form-hint{ display:none }

/* ── التلميح ─────────────────────────────────────────────────────
   كان `margin-block-start:-6px` يسحبه فوق الحقل الذي يشرحه. */
.form-hint{ margin:6px 2px 0;color:var(--ink-3);line-height:1.7 }
.form-sect>.form-hint{ margin-block-start:0 }
.form-hint--box{
  display:flex;align-items:flex-start;gap:9px;margin-block-start:2px;
  padding:11px 14px;border-radius:13px;
  background:var(--beige);border:1px solid var(--gold-line-soft);color:var(--ink-2)
}
.form-hint--box svg{
  inline-size:16px;block-size:16px;aspect-ratio:1;flex:0 0 auto;
  margin-block-start:4px;color:var(--gold-deep)
}

/* ── حقل الملف ───────────────────────────────────────────────────
   كان `label` يلف `input[type=file]` وفوقه `span` ينادي `input.click()`:
   الوسم يمرر النقرة والسكربت يمررها ثانية، فيفتح المستكشف مرتين.
   وهو الآن `div`، والزر زر حقيقي يبلغه لوح المفاتيح. */
.form-field--file{ gap:12px;flex-wrap:wrap }
.file-name{
  flex:1 1 auto;min-inline-size:0;font-size:max(13px,.84rem);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.file-name.is-set{ color:var(--ink);font-weight:600 }
.file-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:7px 15px;border-radius:999px;cursor:pointer;
  background:var(--beige);border:1px solid var(--gold-line);color:var(--gold-text);
  font:inherit;font-weight:700;font-size:max(13px,.85rem);
  transition:background var(--t-route) var(--ease),border-color var(--t-route) var(--ease)
}
.file-btn:hover{ background:var(--gold-line-soft);border-color:var(--gold) }

/* ── البوابات ────────────────────────────────────────────────────── */
.gate-picker{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-block-end:clamp(16px,2vw,24px)
}
.gate-card{
  position:relative;gap:5px;padding:14px 10px;border-radius:16px;
  border:1.5px solid var(--gold-line-soft)
}
.gate-card b{ font-size:max(14px,.95rem) }
.gate-card span{ font-size:max(12px,.76rem);opacity:.9 }
.gate-card:hover{ border-color:var(--gold);background:var(--beige) }
.gate-card.is-on{ box-shadow:0 8px 20px -14px rgba(2,51,49,.7) }
.gate-card.is-on:hover{ background:var(--petrol);border-color:var(--petrol) }
.gate-card.is-on span{ color:var(--gold-on-dark);opacity:1 }
/* علامة الاختيار: اللون وحده لا يراه من لا يميز الألوان */
.gate-card.is-on::after{
  content:'';position:absolute;inset-block-start:9px;inset-inline-end:9px;
  inline-size:16px;block-size:16px;border-radius:50%;
  background:var(--gold-warm) no-repeat center/9px 9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023331' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.4'/%3E%3C/svg%3E");
}

/* أربع بوابات في عمود النموذج تصير صفين لا صفا: أربع بطاقات عرض
   الواحدة ‎130px‎ تخنق العنوان وسطره الشارح معا. */
.gate-picker--4{ grid-template-columns:repeat(2,minmax(0,1fr)) }

.gate-fields{ display:grid;gap:clamp(11px,1.2vw,15px);margin-block-end:0 }

/* سطر يشرح ولا يدعو: لا رابط فيه، فلا يأخذ لون الروابط ووزنها */
.form-card>p.form-alt--muted{
  color:var(--ink-3);font-size:max(12.5px,.85rem);line-height:1.7
}

/* ── الموافقة و«تذكرني» و الزر ───────────────────────────────────── */
.form-consent,.form-remember{
  margin-block:clamp(14px,1.6vw,20px) 0;
  font-size:max(13.5px,.9rem);align-items:flex-start
}
.form-remember{ align-items:center;margin-block:clamp(12px,1.4vw,16px) 0 }
.form-consent input,.form-remember input{
  inline-size:18px;block-size:18px;cursor:pointer
}
.form-consent:has(input:focus-visible) span,
.form-remember:has(input:focus-visible) span{ text-decoration:underline }

.form-card .btn--block{ margin-block-start:clamp(14px,1.8vw,22px) }
/* الزر بعد الضغط: مقفل ومعلن أنه يعمل، فلا يضغط مرتين */
.btn.is-busy,.btn:disabled{ opacity:.62;cursor:progress;pointer-events:none }

/* `.form-card>p` أخص، وهو يقصر السطر على ‎13.5px‎ ويصبغه رماديا —
   وهذان سطرا «نسيت كلمة المرور؟» و«أنشئ حسابا»: طريقا خروج لا حاشية. */
.form-card>p.form-alt{
  margin-block-start:clamp(12px,1.4vw,16px);
  font-size:max(13.5px,.92rem);color:var(--ink-2)
}
.form-card>p.form-alt + p.form-alt{ margin-block-start:6px }

/* ── الشاشات الضيقة ──────────────────────────────────────────────── */
@media (max-width:900px){
  .auth-wrap{ grid-template-columns:1fr }
  .auth-aside{ display:none }              /* زينة تبعد الحقول عن الإبهام */
  .shell--auth{ max-inline-size:min(580px,100%) }
}
@media (max-width:520px){
  .form-card{ padding:20px 16px }
  .form-card .form-grid{ grid-template-columns:1fr }
  .gate-picker{ grid-template-columns:1fr;gap:8px }
  .gate-card{ flex-direction:row;justify-content:flex-start;gap:12px;text-align:start;padding:12px 14px }
  .gate-card span{ display:none }
  .gate-card.is-on::after{ inset-block-start:50%;transform:translateY(-50%) }
  .form-field--file{ gap:10px }
}

/* لا استثناء لـ«تقليل الحركة» بعد اليوم: اللوحة لم تعد تلتصق ولا
   تتحرك مع التمرير، فسلوكها واحد للجميع. */

/* ══════════════════════════════════════════════════════════════════
   TQ-SELECT · القائمة المنسدلة داخل الحقل

   كانت ترث `background:none` من قاعدة `input,textarea,select` المشتركة،
   وثلاثة أشياء تتبع ذلك ولا تظهر إلا في المتصفح:

   ١ — **قائمة الخيارات نفسها** ترسم بألوان النظام لا بألوان الحقل:
       سطح أبيض ناصع وخط النظام داخل نموذج كريمي بخط القاهرة. و`option`
       لا يرث من `select` ما لم يعلن، فيعلن هنا.

   ٢ — **الخيار الأول ليس قيمة.** «الصف الدراسي (اختياري)» تكتب بحبر
       النص الكامل فتقرأ اختيارا قائما لا فراغا — بينما يكتب المكان
       الشاغر في كل حقل آخر بحبر باهت.

   ٣ — **ارتفاع مختلف عن جيرانه.** `select` بلا `padding` معلن يأخذ
       ارتفاع سطره من النظام، فيقف صف «العمر · الصف» بحقلين بارتفاعين.
   ══════════════════════════════════════════════════════════════════ */
.form-field select{
  padding-block:0;
  min-block-size:1.8em;
  line-height:1.8;
  resize:none;                       /* ورثها من قاعدة مشتركة، ولا معنى لها هنا */
  color:var(--ink);
  text-overflow:ellipsis;
}
/* الفارغ يقرأ فراغا: الحبر الباهت هو ما يميز المكان الشاغر عن القيمة. */
.form-field select:has(option[value=""]:checked){ color:var(--ink-3) }

.form-field select option{
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  padding:6px 10px;
}
.form-field select option[value=""]{ color:var(--ink-3) }
/* الخيار المعطل عنوان مجموعة لا اختيارا */
.form-field select option:disabled{ color:var(--ink-3);font-style:normal }

/* السهم يهبط قليلا حين يكبر الحقل، ويظهر أنه تابع للحقل لا فوقه */
.form-field:has(select){ cursor:pointer }
.form-field:has(select)::after{ transition:transform var(--t-hover,.15s) var(--ease) }
.form-field:has(select):focus-within::after{
  transform:translateY(-50%) rotate(135deg);
}
/* مساحة تكفي السهم: `22px` تترك آخر حرف يلامسه في الأسماء الطويلة */
.form-field:has(select) select{ padding-inline-end:26px }

/* ═════════════════════════════════════════════════════════════════
   TQ-PHONE-BOX · منتقي الدولة لا يأخذ موضع الرقم

   الحقل صف واحد: أيقونة، ثم منتقي الدولة، ثم الرقم الوطني — وهو
   يقرأ قيمة واحدة، رمزا وجسما، لا حقلين متجاورين.

   **وموضع هذه الكتلة نصف علاجها.** كانت مكتوبة فوق بجوار
   `.form-card`، وبعدها بمئات الأسطر ثلاث كتل تعيد وصف `.form-field`
   وأبنائه بمحددات **أخص منها**، فتغلبها ولا يظهر ذلك في قراءة
   الكتلة وحدها:

   ١ — `.form-field input,.form-field select{width:100%}` (TQ-INPUT-SHRINK)
       تغلب `.form-phone__cc{width:clamp(...)}`: محدد فيه صنف ونوع أخص
       من محدد فيه صنف، و`flex:0 0 auto` تقرأ أساسها من `width`.
       فيأخذ المنتقي **عرض الحقل كله** وينكمش الرقم إلى صفر
       (`min-width:0` تأذن بذلك): حقل تسجيل فيه قائمة دول ولا موضع
       يكتب فيه رقمه أصلا — وهو ما كان يقع في `/sign_up` حرفيا.
   ٢ — `.form-field select{appearance:none}` تنزع سهم المنتقي الأصلي
       الذي كانت الكتلة القديمة تطلبه بـ`appearance:menulist`.
   ٣ — `.form-field:has(select)::after` ترسم سهم الحقل عند طرفه،
       وطرف حقل الجوال **خانة الرقم** لا المنتقي — فيقع السهم
       فوق ما يكتب فيه صاحبه ويشير إلى غير ما يفتح.

   فصارت الكتلة **آخر ما يقرأ** في باب الحقول، ومحدداتها
   `.form-field.form-phone > …` أخص مما سبق — فلا تغلب بقاعدة عامة
   رابعة تكتب غدا، ولا تحتاج `!important` يخفي التصادم ولا يحله.
   ═════════════════════════════════════════════════════════════════ */
.form-field.form-phone{
  /* المدى يسع أطول الأسماء («موريتانيا +222») ويبقي للرقم عامة
     الحقل — والاسم الطويل يقص بـ`ellipsis` ولا يزحم الرقم. */
  --cc-w:clamp(124px,11vw,156px);
  gap:0                     /* الرمز والرقم يتلاصقان: قيمة واحدة */
}
/* والأيقونة تحتفظ بمسافتها — `gap:0` تسقطها معهما فتلاصق
   الأيقونة اسم الدولة. */
.form-field.form-phone>svg{ margin-inline-end:10px }

.form-field.form-phone>.form-phone__cc{
  flex:0 0 auto;
  inline-size:var(--cc-w);
  /* والفاصل خط رفيع كخط `.form-prefix` نفسه، فيقرأ المنتقي
     بادئة لا حقلا ثانيا. والحشوة تسع السهم. */
  padding-inline:0 20px;    /* مساحة السهم، ثم الفاصل بعدها */
  margin-inline-end:9px;
  border-inline-end:1px solid var(--gold-line-soft);
  border-radius:0;
  font-size:clamp(10.5px,.82vw,12.5px);
  color:var(--ink-2);
  /* الاسم الطويل يقص في الزر ويظهر كاملا في القائمة المفتوحة
     — وهو سلوك `select` الأصلي، فلا يكتب له شيء. */
  text-overflow:ellipsis;
  /* **والسهم على المنتقي نفسه لا على الحقل.** سهم `.form-field` مرساه
     طرف الحقل، وطرف حقل الجوال خانة الرقم — فيقع فوق ما يكتب فيه
     صاحبه. ونقله بحساب من حشوة الحقل وعرض المنتقي يعيد المرض نفسه
     في صورة أخف: ثلاثة أرقام في `calc` يشيخ أولها فيزحف السهم على
     «‎+966‎» — وقد وقع ذلك حرفيا قبل هذا السطر. وخلفية المنتقي تتبع
     طرفه مهما تغير عرضه أو حشوة الحقل، بلا رقم يتابع رقما.
     و`left` لأن الواجهة `rtl` كلها، وطرف القراءة فيها هو اليسار. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23A06C20' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 4.6 6 8.2l3.6-3.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 6px center;
  background-size:10px 10px;
}

/* الرقم يأخذ ما بقي من الصف وحده. و`inline-size:auto` ترد
   `width:100%` الموروثة من TQ-INPUT-SHRINK: أساس مرن من صفر
   يحسب الباقي مباشرة، وأساس من `100%` يبلغ المقدار نفسه
   بطريق الفيض ثم الانكماش — وأول بند ثالث يضاف إلى الصف
   يفرق بينهما.
   والمحاذاة تأتي من `.form-field input[type=tel]` (TQ-FORM-TEL): الأرقام
   `ltr` تلاصق المنتقي، فيقرأ الرقم ورمزه سطرا واحدا. ولو حوذي
   إلى الطرف المقابل لبقي بينه وبين رمزه عرض الحقل كله. */
.form-field.form-phone>.form-phone__num{
  flex:1 1 0;
  inline-size:auto;
  min-inline-size:0;
  letter-spacing:.04em;
}

/* وسهم الحقل يرفع: صار على المنتقي، وسهمان لقائمة واحدة أحدهما
   في الطرف الخطأ أسوأ من سهم واحد. */
.form-field.form-phone::after{ content:none }

@media (max-width:560px){
  .form-field.form-phone{ --cc-w:clamp(96px,26vw,124px) }
}

/* ══════════════════════════════════════════════════════════════════
   TQ-CATALOG · الكتالوج الموحد
   أربعة أنواع في شبكة واحدة، ولوحة مرشحات إلى جانبها.
   والقيم كلها من التوكنات: لون مباشر هنا يخرج عن الهوية بلا أن يظهر
   ذلك إلا بالمقارنة البصرية.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- شريط الأدوات ---------- */
.cbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:clamp(8px,1vw,14px);
  align-items:center;
  margin-block-end:clamp(18px,2vw,28px)
}
.cbar__search{
  position:relative;display:flex;align-items:center;
  background:var(--paper);border:1px solid var(--gold-line);
  border-radius:999px;padding-inline:clamp(14px,1.4vw,20px);
  box-shadow:var(--sh-soft);
  transition:border-color .18s ease,box-shadow .18s ease
}
.cbar__search:focus-within{border-color:var(--gold);box-shadow:var(--sh-card)}
.cbar__search > svg{
  inline-size:clamp(16px,1.4vw,20px);block-size:clamp(16px,1.4vw,20px);
  color:var(--gold-deep);flex:none
}
.cbar__search input{
  flex:1;min-inline-size:0;border:0;background:none;outline:none;
  font:inherit;color:var(--ink);
  padding-block:clamp(11px,1.15vw,15px);padding-inline:10px
}
.cbar__search input::placeholder{color:var(--ink-3)}
/* زر المسح لا يظهر إلا وفي الصندوق نص — وإخفاؤه بـ`hidden` من السكربت */
.cbar__clear{
  flex:none;display:grid;place-items:center;
  inline-size:26px;block-size:26px;border-radius:999px;
  background:var(--beige);color:var(--ink-2)
}
.cbar__clear:hover{background:var(--gold-line-soft);color:var(--ink)}
.cbar__clear svg{inline-size:12px;block-size:12px}

.cbar__sort{position:relative;display:flex;align-items:center}
.cbar__sort select{
  appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--gold-line);border-radius:999px;
  padding-block:clamp(11px,1.15vw,15px);
  padding-inline:clamp(16px,1.5vw,22px) clamp(34px,3vw,42px);
  box-shadow:var(--sh-soft)
}
.cbar__sort select:hover{border-color:var(--gold)}
.cbar__sort > svg{
  position:absolute;inset-inline-end:14px;pointer-events:none;
  inline-size:14px;block-size:14px;color:var(--gold-deep);
  transform:rotate(90deg)
}
.cbar__go{white-space:nowrap}
@media (max-width:760px){
  .cbar{grid-template-columns:1fr}
  .cbar__sort select{inline-size:100%}
}

/* ---------- الهيكل: لوحة ثم شبكة ---------- */
.cwrap{
  display:grid;
  grid-template-columns:clamp(240px,22vw,310px) minmax(0,1fr);
  gap:clamp(16px,2vw,30px);
  align-items:start
}
.cwrap__toggle{display:none}
.crail{
  position:sticky;top:calc(var(--header-h) + 16px);
  background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);padding:clamp(16px,1.6vw,22px);
  box-shadow:var(--sh-soft);
  max-block-size:calc(100vh - var(--header-h) - 32px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin
}
.cmain{min-inline-size:0}
.ccount{
  color:var(--ink-2);font-size:clamp(12px,.92vw,14px);
  margin-block-end:clamp(10px,1.2vw,16px)
}
.ccount b{color:var(--ink);font-family:'Cairo',sans-serif;font-weight:700}

/* الشبكة تومض قليلا وهي تنتظر الرد: بلا إشارة يظن الزائر أن نقرته ضاعت */
#catGrid{transition:opacity .18s ease}
#catGrid.is-loading{opacity:.45;pointer-events:none}

/* ---------- لوحة المرشحات ---------- */
.cfilters__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-block-end:12px;margin-block-end:6px;
  border-block-end:1px solid var(--gold-line-soft)
}
.cfilters__title{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:clamp(13.5px,1.05vw,16px)
}
.cfilters__title svg{inline-size:1.05em;block-size:1.05em;color:var(--gold-deep)}
.cfilters__clear{
  font-size:clamp(11px,.85vw,12.5px);font-weight:700;
  color:var(--gold-text);white-space:nowrap
}
.cfilters__clear:hover{text-decoration:underline}
.cfilters__note{
  display:flex;gap:8px;align-items:flex-start;
  margin-block-start:14px;padding-block-start:12px;
  border-block-start:1px solid var(--gold-line-soft);
  color:var(--ink-3);font-size:clamp(10.5px,.8vw,12px);line-height:1.65
}
.cfilters__note svg{inline-size:1.1em;block-size:1.1em;color:var(--gold-deep);
  flex:none;margin-block-start:.22em}

.cfil{border-block-end:1px solid var(--gold-line-soft);padding-block:10px}
.cfil:last-of-type{border-block-end:0}
.cfil__label{
  font-family:'Cairo',sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(12px,.92vw,14px);margin-block-end:9px
}
.cfil__sum{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-family:'Cairo',sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(12px,.92vw,14px);padding-block:4px
}
.cfil__sum::-webkit-details-marker{display:none}
.cfil__ico{inline-size:1.05em;block-size:1.05em;color:var(--gold-deep);flex:none}
.cfil__sum > span{flex:1}
/* نقطة تقول «هنا مرشح مضغوط» — تقرأ والقائمة مطوية */
.cfil__dot{
  inline-size:7px;block-size:7px;border-radius:50%;
  background:var(--emerald);flex:none
}
.cfil__chev{
  inline-size:13px;block-size:13px;color:var(--ink-3);flex:none;
  transform:rotate(90deg);transition:transform .18s ease
}
.cfil[open] .cfil__chev{transform:rotate(-90deg)}
.cfil__list{
  display:grid;gap:2px;margin-block-start:6px;
  max-block-size:238px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin
}

.copt{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px;border-radius:10px;cursor:pointer;
  color:var(--ink-2);font-size:clamp(11.5px,.88vw,13.5px);
  transition:background .15s ease,color .15s ease
}
.copt:hover{background:var(--beige);color:var(--ink)}
.copt__box{
  inline-size:16px;block-size:16px;border-radius:5px;flex:none;
  border:1.5px solid var(--gold-line);background:var(--paper);
  display:grid;place-items:center;
  transition:background .15s ease,border-color .15s ease
}
.copt__box svg{inline-size:10px;block-size:10px;color:#fff;opacity:0}
.copt__t{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copt__n{
  flex:none;color:var(--ink-3);font-size:.85em;
  background:var(--beige);border-radius:999px;padding:1px 8px
}
.copt.is-on{color:var(--ink);font-weight:600}
.copt.is-on .copt__box{background:var(--petrol);border-color:var(--petrol)}
.copt.is-on .copt__box svg{opacity:1}
.copt.is-on .copt__n{background:var(--gold-line-soft);color:var(--gold-text)}

/* ---------- الرقائق: النوع والسعر ---------- */
.cchips{display:flex;flex-wrap:wrap;gap:7px}
.cchip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(11px,.85vw,13px);
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--gold-line);background:var(--paper);color:var(--ink-2);
  transition:background .16s ease,color .16s ease,border-color .16s ease
}
.cchip:hover{border-color:var(--gold);color:var(--ink)}
.cchip b{
  font-weight:700;font-size:.85em;color:var(--ink-3);
  background:var(--beige);border-radius:999px;padding:0 6px
}
.cchip.is-on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.cchip.is-on b{background:rgba(255,255,255,.18);color:var(--gold-on-dark)}

/* ---------- مرحلة الطالب: مرشح حقن نفسه فيقول ذلك ----------
   لوح واحد فوق الرقائق لا رقاقة بينها: الرقاقة تقرأ اختيارا اختاره
   الزائر، وهذا لم يختره — فيقرأ سطرا يفسر ومعه باب يخرج منه. */
.cscope{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-block-end:clamp(10px,1.2vw,16px);
  padding:10px clamp(12px,1.2vw,16px);
  background:var(--beige);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);
  color:var(--ink-2);font-size:clamp(11.5px,.88vw,13.5px);line-height:1.7
}
.cscope > svg{inline-size:16px;block-size:16px;color:var(--gold-deep);flex:0 0 auto}
.cscope span{flex:1 1 240px}
.cscope b{color:var(--ink);font-weight:700}
.cscope a{
  flex:0 0 auto;font-weight:700;color:var(--petrol);
  text-decoration:underline;text-underline-offset:3px
}
.cscope a:hover{color:var(--gold-deep)}

/* ---------- ما هو مفعل الآن ---------- */
.cactive{display:flex;flex-wrap:wrap;gap:7px;margin-block-end:clamp(12px,1.4vw,18px)}
.cactive__i{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:clamp(11px,.85vw,12.5px);font-weight:600;
  padding:6px 12px;border-radius:999px;
  background:var(--beige);border:1px solid var(--gold-line-soft);color:var(--ink-2);
  transition:background .16s ease,color .16s ease
}
.cactive__i:hover{background:var(--gold-line-soft);color:var(--ink)}
.cactive__i svg{inline-size:11px;block-size:11px;color:var(--gold-deep)}

/* ══════════════════════════════════════════════════════════════════
   TQ-CCARD · البطاقة، ووجهها يختلف بالنوع
   البنية واحدة (`tqs_cat_card`) و`data-kind` يقرر اللون والوجه —
   فأربع بطاقات لا تعني أربعة قوالب تتباعد عند أول تعديل.
   ══════════════════════════════════════════════════════════════════ */
.cgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(210px,17vw,250px),1fr));
  gap:clamp(12px,1.4vw,20px)
}
.ccard{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-soft);
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease),
             border-color var(--t-entry) var(--ease)
}
.ccard:hover{transform:translateY(-7px);box-shadow:var(--sh-raise);border-color:var(--gold-line)}
/* خط اللون يقول النوع قبل أن تقرأ الرقاقة */
.ccard::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;
  block-size:3px;background:var(--kind);z-index:2
}
.ccard[data-kind='plan']       {--kind:var(--gold)}
.ccard[data-kind='path']       {--kind:var(--emerald)}
/* الكورس بلون البترول الأساسي — أقرب إلى البرنامج في العين لأنه أقرب
   إليه في المعنى: البرنامج واجهة الكورس، والكورس دروسه. ولون بعيد
   بينهما يقرأ نوعين لا صلة بينهما. */
.ccard[data-kind='course']     {--kind:var(--petrol)}
.ccard[data-kind='book']       {--kind:var(--petrol-lift)}
.ccard[data-kind='competition']{--kind:var(--gold-deep)}

/* الرابط طبقة تغطي البطاقة: لف البطاقة كلها في `<a>` يجعل قارئ الشاشة
   يقرأ العنوان والوصف والعدادات نصا لرابط واحد. */
.ccard__hit{position:absolute;inset:0;z-index:4}
.ccard__hit:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-4px;border-radius:var(--r-card)}

.ccard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--beige)}
.ccard__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block;
  transition:transform var(--t-entry) var(--ease)}
.ccard:hover .ccard__media img{transform:scale(1.05)}

/* الكتاب: غلاف واقف على لوح بلون مادته — نسبته الرأسية تحفظ داخل
   الإطار العريض نفسه، فلا يطول صف الشبكة لأجل نوع واحد. */
/* الأرضية ترث من `.book-card__cover` — الوسم يحمل الصنفين معا،
   وإعادة كتابتها هنا لونان حرفيان يفترقان عند أول تعديل في أحدهما. */
.ccard__media--book{
  aspect-ratio:16/10;display:grid;place-items:center;padding:12px
}
.ccard__media--book img{
  inline-size:auto;block-size:100%;max-inline-size:100%;
  object-fit:contain;border-radius:4px;
  box-shadow:0 10px 22px -12px rgba(5,44,43,.55)
}
.ccard__media--book .book-card__label{font-size:clamp(11.5px,.95vw,14px);max-width:70%}
.ccard__media--comp{
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--petrol),var(--petrol-deep))
}
.ccard__media--comp svg{
  inline-size:clamp(34px,3.4vw,50px);block-size:clamp(34px,3.4vw,50px);
  color:var(--gold-warm);opacity:.9
}

.ccard__kind{
  position:absolute;z-index:3;inset-block-start:10px;inset-inline-start:10px;
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(9.5px,.72vw,11px);
  padding:4px 10px;border-radius:999px;
  background:rgba(252,248,244,.94);color:var(--ink);
  box-shadow:0 3px 10px -5px rgba(5,44,43,.5)
}
.ccard__kind svg{inline-size:11px;block-size:11px;color:var(--kind)}
.ccard__flag{
  position:absolute;z-index:3;inset-block-start:10px;inset-inline-end:10px;
  background:var(--gold);color:#17240F;font-weight:800;
  font-size:clamp(9.5px,.72vw,11px);padding:4px 10px;border-radius:999px;
  white-space:nowrap;box-shadow:0 3px 10px -5px rgba(1,33,31,.6)
}

.ccard__body{
  display:flex;flex-direction:column;gap:7px;flex:1;
  padding:clamp(12px,1.2vw,17px)
}
.ccard__tag{
  align-self:flex-start;font-size:clamp(9.5px,.74vw,11.5px);font-weight:700;
  color:var(--gold-text);background:var(--beige);
  border-radius:999px;padding:2px 9px
}
.ccard__title{font-size:clamp(12.5px,1vw,15px);line-height:1.55;margin:0}
.ccard__blurb{
  color:var(--ink-3);font-size:clamp(10.5px,.8vw,12.5px);line-height:1.7;margin:0
}
.ccard__meta{
  display:flex;flex-wrap:wrap;gap:5px 12px;
  font-size:clamp(10px,.76vw,11.5px);color:var(--ink-3)
}
.ccard__meta span{display:inline-flex;align-items:center;gap:4px}
.ccard__meta svg{inline-size:1em;block-size:1em;color:var(--kind);flex:none}

.ccard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-block-start:auto;padding-block-start:10px;
  border-block-start:1px solid var(--gold-line-soft)
}
.ccard__price{
  display:flex;align-items:baseline;gap:4px;margin:0;
  font-family:'Cairo',sans-serif;font-weight:800;color:var(--petrol);
  font-size:clamp(15px,1.35vw,20px);line-height:1
}
.ccard__price span{font-size:.58em;font-weight:700;color:var(--ink-2)}
.ccard__price--free{color:var(--emerald);font-size:clamp(11px,.85vw,13px)}
.ccard__price--in{color:var(--ink-3);font-weight:700;font-size:clamp(10.5px,.8vw,12.5px)}
.ccard__cta{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:'Cairo',sans-serif;font-weight:700;color:var(--petrol);
  font-size:clamp(10px,.78vw,12px)
}
.ccard__cta svg{inline-size:11px;block-size:11px;transition:transform .18s ease}
.ccard:hover .ccard__cta svg{transform:translateX(-3px)}
html[dir='ltr'] .ccard:hover .ccard__cta svg{transform:translateX(3px)}
@media (max-width:520px){
  .ccard__foot{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- الترقيم ---------- */
.cpager{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;
  margin-block-start:clamp(22px,2.6vw,36px)
}
.cpager__i{
  display:grid;place-items:center;cursor:pointer;
  min-inline-size:38px;block-size:38px;padding-inline:10px;
  border-radius:12px;border:1px solid var(--gold-line-soft);
  background:var(--paper);color:var(--ink-2);
  font-family:'Cairo',sans-serif;font-weight:700;font-size:clamp(12px,.92vw,14px);
  transition:background .16s ease,color .16s ease,border-color .16s ease
}
.cpager__i:hover{border-color:var(--gold);color:var(--ink)}
.cpager__i.is-on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.cpager__i.is-off{opacity:.3;cursor:default}
.cpager__i svg{inline-size:14px;block-size:14px}
/* السهم يشير إلى وجهته — كما في الكاروسل */
html[dir='rtl'] .cpager__i--next svg{transform:scaleX(-1)}
html[dir='ltr'] .cpager__i--nav:not(.cpager__i--next) svg{transform:scaleX(-1)}
.cpager__gap{color:var(--ink-3);padding-inline:2px}

/* ---------- لا نتائج ---------- */
.cempty{
  display:grid;justify-items:center;gap:10px;text-align:center;
  padding:clamp(34px,4.5vw,68px) clamp(18px,2vw,32px);
  background:var(--paper);border:1px dashed var(--gold-line);
  border-radius:var(--r-card)
}
.cempty__ico{
  display:grid;place-items:center;
  inline-size:clamp(46px,4.4vw,62px);aspect-ratio:1;border-radius:50%;
  background:var(--beige);color:var(--gold-deep)
}
.cempty__ico svg{inline-size:46%;block-size:46%}
.cempty h3{font-size:clamp(14px,1.2vw,18px)}
.cempty p{color:var(--ink-3);font-size:clamp(11.5px,.88vw,13.5px);max-inline-size:46ch}
.cempty .btn{margin-block-start:6px}

/* ---------- الجوال: اللوحة خلف زر ---------- */
@media (max-width:980px){
  .cwrap{grid-template-columns:1fr}
  .cwrap__toggle{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    font-family:'Cairo',sans-serif;font-weight:700;
    font-size:clamp(12.5px,1vw,14.5px);
    padding:11px 20px;border-radius:999px;
    border:1px solid var(--gold-line);background:var(--paper);color:var(--ink);
    box-shadow:var(--sh-soft)
  }
  .cwrap__toggle svg{inline-size:16px;block-size:16px;color:var(--gold-deep)}
  .cwrap__toggle b{
    background:var(--petrol);color:#fff;border-radius:999px;
    padding:0 7px;font-size:.82em
  }
  /* مطوية افتراضا: ثلاثة مرشحات مفتوحة فوق الشبكة تعني تمرير شاشتين
     قبل أول بطاقة. و`.is-open` من السكربت — وبلا سكربت تبقى ظاهرة
     لأن القاعدة تحتها تلغي الطي عند غياب الصنف `js`. */
  html.js .crail{display:none}
  html.js .crail.is-open{display:block}
  .crail{position:static;max-block-size:none;overflow:visible}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-BOOKFACE · غلاف الكتاب في صفحته المفردة
   ══════════════════════════════════════════════════════════════════ */
/* الغلاف يقيد بعرضه لا يملأ العمود: نسبة الكتاب رأسية، وعمود بعرض
   خمسمئة بكسل يجعلها ستمئة طولا — لوح واحد يبتلع الشاشة، وزر التحميل
   الذي جاء الزائر لأجله يهبط تحت الطية. */
.bookface{
  aspect-ratio:.78;border-radius:14px;overflow:hidden;
  inline-size:100%;max-inline-size:290px;margin-inline:auto;
  margin-block-end:clamp(12px,1.4vw,18px);
  box-shadow:var(--sh-card)
}
.bookface img{inline-size:100%;block-size:100%;object-fit:cover}
.bookface__free{
  display:flex;gap:8px;align-items:center;margin:0 0 12px;
  font-family:'Cairo',sans-serif;font-weight:700;color:var(--emerald);
  font-size:clamp(12.5px,1vw,15px)
}
.bookface__free svg{inline-size:1.05em;block-size:1.05em;flex:none}
.tq-inline-ico{inline-size:1.05em;block-size:1.05em;color:var(--gold-deep);
  vertical-align:-.14em;margin-inline-end:6px}

/* ══════════════════════════════════════════════════════════════════
   TQ-BUNDLE-CAROUSEL · الباقات في مضمار
   البطاقة أعرض من شريحة البرنامج: فيها قائمة مزايا من سبعة بنود،
   وثلاثمئة بكسل تكسر كل سطر منها سطرين.
   ══════════════════════════════════════════════════════════════════ */
.carousel2--bundles{padding-block-start:14px}
.carousel2--bundles .carousel2__track{
  align-items:stretch;
  padding-block-start:14px;         /* شارة «الأكثر طلبا» تبرز فوق البطاقة */
  /* المرحلة ثلاث باقات تسع الشاشة العريضة بلا تمرير، فتقف عند حافة
     البداية وتترك ثلث الغلاف فارغا يقرأ خطأ في التخطيط لا اختيارا.
     و`safe` تمنع أثرها الجانبي: التوسيط في حاوية ضيقة يقص أول عنصر
     ولا يمكن التمرير إليه. والمتصفح الذي لا يعرفها يسقط الإعلان كله
     فيعود إلى حافة البداية — وهو ما كان. */
  justify-content:safe center
}
.carousel2--bundles .carousel2__track > *{
  flex:0 0 clamp(280px,31vw,400px)
}
/* الإبراز برفع البطاقة يقص في مضمار له `overflow`، فيصير بالإطار وحده */
@media (min-width:981px){
  .carousel2--bundles .bundle--featured{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-OTP · قناة رمز التأكيد
   ══════════════════════════════════════════════════════════════════

   سؤالان في شاشتين: «أين نرسل الرمز؟» في نموذج التسجيل، و«أرسله إلى
   غير ذلك» في شاشة التأكيد. وهما وجهان لأمر واحد فيشتركان في اللغة
   البصرية نفسها — بطاقة تعلن اختيارها **بالحد واللون معا**، فاللون
   وحده لا يراه كل أحد.

   والمقاس أصغر من `gate-card`: هذه اختيار داخل لوح، وتلك تختار اللوح.
   ══════════════════════════════════════════════════════════════════ */
.otp-pick{display:grid;gap:8px}
.otp-pick__t{
  display:flex;align-items:center;gap:7px;
  font-family:'Cairo',sans-serif;font-weight:600;font-size:.86rem;color:var(--ink)
}
.otp-pick__t svg{inline-size:16px;block-size:16px;aspect-ratio:1;color:var(--gold-deep)}

.otp-pick__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.otp-pick__opt{
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;border-radius:13px;cursor:pointer;
  background:var(--cream);border:1px solid var(--gold-line-soft);color:var(--ink-2);
  transition:border-color var(--t-route) var(--ease),background var(--t-route) var(--ease),
    color var(--t-route) var(--ease)
}
/* زر الاختيار يخفى عن العين ولا يخفى عن لوح المفاتيح: `display:none`
   يخرجه من ترتيب التنقل، فلا يبلغه من لا يستعمل فأرة. */
.otp-pick__opt input{position:absolute;opacity:0;inline-size:1px;block-size:1px;pointer-events:none}
.otp-pick__opt svg{inline-size:19px;block-size:19px;aspect-ratio:1;flex:0 0 auto;color:var(--gold-deep)}
.otp-pick__opt span{display:flex;flex-direction:column;gap:1px;min-width:0}
.otp-pick__opt b{font-size:.86rem;color:var(--ink);font-weight:600}
.otp-pick__opt small{font-size:.7rem;line-height:1.4;opacity:.85}
.otp-pick__opt:hover{border-color:var(--gold)}
.otp-pick__opt.is-on{background:var(--petrol);border-color:var(--petrol);color:var(--gold-on-dark)}
.otp-pick__opt.is-on b{color:#fff}
.otp-pick__opt.is-on svg{color:var(--gold-warm)}
/* حلقة التركيز على البطاقة لا على الزر المخفي */
.otp-pick__opt:focus-within{outline:2px solid var(--gold);outline-offset:2px}

/* ── تبديل القناة في شاشة التأكيد ──────────────────────────────── */
.otp-switch{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-block:10px 4px;padding-block-start:12px;
  border-block-start:1px solid var(--gold-line-soft)
}
.otp-switch__t{font-size:.78rem;color:var(--ink-3)}
.otp-switch__b{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:999px;cursor:pointer;
  background:var(--beige);border:1px solid var(--gold-line);color:var(--ink-2);
  font:inherit;font-size:.8rem
}
.otp-switch__b svg{inline-size:16px;block-size:16px;aspect-ratio:1;flex:0 0 auto;color:var(--gold-deep)}
.otp-switch__b span{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.otp-switch__b b{font-weight:600;color:var(--ink-3);font-size:.75rem}
.otp-switch__b:hover:not(:disabled){border-color:var(--gold);background:var(--gold-line-soft)}
.otp-switch__b:disabled{opacity:.5;cursor:default}

@media (max-width:480px){
  .otp-pick__row{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-PREVIEW · صفحة معاينة الدرس المجاني — `/preview/<كورس>/<درس>`
   شاشة الزائر قبل أن يدفع: مشغل بلا شريط جانبي ولا بوابة، ثم مخرج
   واحد إلى الباقة التي فيها هذا الدرس.
   ══════════════════════════════════════════════════════════════════ */
.preview-card{padding:clamp(14px,1.6vw,22px)}
.preview-player{
  position:relative;aspect-ratio:16/9;inline-size:100%;
  border-radius:var(--r-card);overflow:hidden;background:#0B2B2E;
  display:grid;place-items:center
}
.preview-player iframe,.preview-player video{
  position:absolute;inset:0;inline-size:100%;block-size:100%;border:0;display:block
}
.preview-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(8px,1.2vw,16px);
  margin-block-start:clamp(12px,1.4vw,18px)
}
.preview-meta__dur,.preview-meta__course{
  display:inline-flex;align-items:center;gap:6px;
  font-size:clamp(11.5px,.9vw,13.5px);color:var(--ink-3)
}
.preview-meta svg{inline-size:15px;block-size:15px;aspect-ratio:1;color:var(--gold-deep)}
.preview-summary{margin-block-start:clamp(12px,1.4vw,18px);color:var(--ink-2);
  font-size:clamp(12.5px,1vw,15px);line-height:1.95}
.preview-summary :is(p,ul,ol){margin:0 0 .8em}
.preview-next{margin-block-start:clamp(16px,2vw,28px);text-align:center}
.preview-next h2{margin-block-end:8px}
.preview-next p{color:var(--ink-2);margin-block-end:clamp(12px,1.4vw,18px)}
.preview-next .cta__actions{justify-content:center}

/* ══════════════════════════════════════════════════════════════════
   TQ-DIR-FEW · دليل المعلمين: كان شبكةً بخمسة أعمدة، وصار **مضمار
   كاروسل** — والمعرّف انتقل معه إلى المضمار لأن سكربت الدليل يفتّش
   أبناء `#teacherGrid` مباشرةً.
   والقاعدتان القديمتان بمعرّف كانتا تغلبان أصناف الكاروسل فتُبقيانه
   ملتفًّا: خصوصية المعرّف أعلى من أي صنف مهما تأخّر في الملفّ.
   والقليل يبقى متوسّطًا: نتيجةٌ واحدة في مضمار عريض تقرأ عطبًا،
   فـ`justify-content:center` تُبقيها في الوسط ولا تمنع التمرير.
   ══════════════════════════════════════════════════════════════════ */
#teacherGrid{ flex-wrap:nowrap; justify-content:center }
#teacherGrid>.teacher-card{
  flex:0 0 clamp(200px,19vw,248px); max-inline-size:none; min-inline-size:0
}
/* الصورة صارت رابطا، والرابط سطري افتراضا — فـ`aspect-ratio` عليه بلا
   `display:block` لا تنتج ارتفاعا، فتتفلطح البطاقة. */
.teacher-card__media{display:block}
.teacher-card__media:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#teacherMore[hidden]{display:none}

.comp-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.8vw,26px)
}
.comp-grid>.comp-card{
  flex:1 1 clamp(240px,24vw,300px);max-inline-size:380px;min-inline-size:0
}
@media (max-width:560px){
  #teacherGrid>.teacher-card{flex:0 0 min(74vw,260px);max-inline-size:none}
  .comp-grid>.comp-card{flex:1 1 100%;max-inline-size:none}
}

/* رابط «كل الأسئلة» يقع داخل شبكة الأسئلة، فيمتد على عرضها ويتوسط. */
.faq-more{grid-column:1/-1;text-align:center;margin-block-start:clamp(10px,1.2vw,16px)}

/* ── بطاقة الحساب في صفحة الدفع ────────────────────────────────── */
.co-acct{margin-block-end:clamp(14px,1.8vw,22px)}
.co-acct h2{margin:0 0 4px}
.co-acct__lede{margin:0 0 14px}
.co-acct__tabs{
  display:flex;gap:4px;padding:4px;margin-block-end:16px;
  border-radius:999px;background:var(--beige);border:1px solid var(--gold-line-soft)
}
.co-acct__tabs button{
  flex:1;padding:9px 12px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--ink-2);
  font-family:'Cairo',sans-serif;font-weight:600;font-size:clamp(12px,.9vw,13.5px);
  transition:background var(--t-route) var(--ease),color var(--t-route) var(--ease)
}
.co-acct__tabs button[aria-pressed="true"]{background:var(--petrol);color:#fff}
.co-acct__form{display:grid;gap:11px}
.co-acct__form[hidden]{display:none}
.co-acct__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.co-acct__form label{display:grid;gap:5px;min-inline-size:0}
.co-acct__form label[hidden]{display:none}
.co-acct__form label>span{font-size:clamp(11.5px,.86vw,13px);color:var(--ink-2);font-weight:600}
.co-acct__form label>span i{font-style:normal;font-weight:400;color:var(--ink-3)}
.co-acct__form input:not([type="checkbox"]),.co-acct__form select{
  inline-size:100%;padding:11px 13px;border-radius:var(--r-btn);
  border:1px solid var(--gold-line-soft);background:#fff;color:var(--ink);
  font-family:inherit;font-size:clamp(13px,.95vw,14.5px)
}
.co-acct__form input:focus-visible,.co-acct__form select:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px
}
.co-acct__terms{
  display:flex!important;align-items:flex-start;gap:9px;
  font-size:clamp(12px,.88vw,13px);color:var(--ink-2);line-height:1.7
}
.co-acct__terms input{
  inline-size:17px;block-size:17px;flex:none;margin-block-start:3px;accent-color:var(--petrol)
}
.co-acct__note{margin:2px 0 0;text-align:center}

/* لا زر شراء للزائر — إرشاد مكانه */
.co-side__guest{
  display:flex;align-items:flex-start;gap:9px;margin:0;
  padding:12px 14px;border-radius:var(--r-btn);
  background:var(--beige);border:1px solid var(--gold-line-soft);
  color:var(--ink-2);font-size:clamp(12px,.9vw,13.5px);line-height:1.7
}
.co-side__guest svg{
  inline-size:16px;block-size:16px;aspect-ratio:1;flex:none;
  color:var(--gold-deep);margin-block-start:3px
}

/* سطر الاستئناف بعد العودة */
.co-resume{
  grid-column:1/-1;margin:0 0 14px;padding:12px 15px;border-radius:var(--r-btn);
  background:#F0F7F3;border:1px solid #CFE6D8;color:#14512F;
  font-family:'Cairo',sans-serif;font-weight:600;font-size:clamp(12.5px,.95vw,14px)
}

@media (max-width:560px){
  .co-acct__row{grid-template-columns:minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════════
   TQ-QUOTES · بطاقة رأي ولي الأمر
   كانت اسما وسطرا ونجوما على سطح أبيض: لا علامة اقتباس تقول إنها
   شهادة، ولا شيء يميز قائلها. والصور حذفت عمدا (وجه من بنك صور يعرض
   على أنه ولي أمر حقيقي تلفيق) — فالحرف يميز ولا يدعي.
   ══════════════════════════════════════════════════════════════════ */
.quote-card{position:relative;overflow:hidden;text-align:start}
.quote-card__mark{
  position:absolute;inset-block-start:-8px;inset-inline-end:12px;
  inline-size:58px;block-size:58px;aspect-ratio:1;
  color:var(--gold-line-soft);pointer-events:none
}
.quote-card__head{position:relative;align-items:center}
.quote-card__ini{
  flex:0 0 auto;inline-size:clamp(38px,3.1vw,46px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--petrol),var(--petrol-deep));
  color:var(--gold-warm);font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(16px,1.4vw,20px);line-height:1;user-select:none
}
.quote-card>p{position:relative;margin:0}
/* النجوم تختم البطاقة، وفاصل خفيف يفصلها عن النص فلا تقرأ امتدادا له */
.quote-card .stars{
  margin-block-start:auto;padding-block-start:13px;
  border-block-start:1px dashed var(--gold-line-soft)
}

/* داخل الكاروسل: البطاقات تتساوى ارتفاعا والنص يملأ ما بينها، فلا
   تقف النجوم عند ثلاثة مستويات مختلفة. ونفس ما تفعله `.tcard` في
   آراء `/parents` — والرفع عند المرور يقص عند حافة المسار الأفقي،
   فيهبط هنا إلى ظل وحده. */
.carousel2--quotes .quote-card{block-size:100%}
.carousel2--quotes .quote-card>p{flex:1}
.carousel2--quotes .quote-card:hover{transform:none;box-shadow:var(--sh-raise)}

/* ── مسابقة واحدة: شريط أفقي لا بطاقة يتيمة ────────────────────── */
/* بطاقة عرضها ٣٦٠ في شاشة عرضها ألف تترك فراغا يقرأ نقصا. والصنف
   يوضع من `tqs_competitions_strip()` حين يكون الصف واحدا وحده. */
.cmp-grid--solo>.cmp-card{
  flex:1 1 100%;max-inline-size:min(100%,880px);
  display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto;
  align-items:stretch
}
.cmp-grid--solo .cmp-card__head{
  flex-direction:column;align-items:flex-start;justify-content:center;
  gap:9px;padding:clamp(16px,2vw,26px)
}
.cmp-grid--solo .cmp-state{margin-inline-start:0}
.cmp-grid--solo .cmp-card__body{justify-content:center;padding-block:clamp(16px,2vw,24px)}
/* الحقائق تصطف أفقيا: العمود يطيل الشريط بلا داع */
.cmp-grid--solo .cmp-card__facts{
  flex-direction:row;flex-wrap:wrap;gap:6px clamp(14px,2vw,26px);
  border-block-start:0;padding-block-start:2px;margin-block-start:8px
}
.cmp-grid--solo .cmp-card__cta{
  align-self:center;margin:0 clamp(16px,2vw,26px);
  inline-size:auto;white-space:nowrap
}
@media (max-width:760px){
  .cmp-grid--solo>.cmp-card{grid-template-columns:minmax(0,1fr)}
  .cmp-grid--solo .cmp-card__head{flex-direction:row;align-items:center;padding:12px clamp(14px,1.5vw,18px)}
  .cmp-grid--solo .cmp-state{margin-inline-start:auto}
  .cmp-grid--solo .cmp-card__facts{
    flex-direction:column;gap:7px;
    border-block-start:1px dashed var(--gold-line-soft);padding-block-start:11px
  }
  .cmp-grid--solo .cmp-card__cta{
    inline-size:auto;margin:0 clamp(15px,1.7vw,22px) clamp(15px,1.7vw,22px)
  }
}

/* ══════════════════════════════════════════════════════════════════
   TQ-PCMP · جدول مقارنة الباقات
   البطاقات تعرض مزايا كل باقة وحدها؛ والجدول يقول الفرق مرة واحدة.
   وأربعة أعمدة لا تدخل شاشة يد، فالجدول يمرر أفقيا داخل حاويته
   وحدها — والصفحة لا تمرر أفقيا أبدا.
   ══════════════════════════════════════════════════════════════════ */
.pcmp__pane[hidden]{display:none}
.pcmp__scroll{
  overflow-x:auto;overflow-y:visible;
  border:1px solid var(--gold-line-soft);border-radius:var(--r-card);
  background:var(--paper);box-shadow:var(--sh-soft);
  -webkit-overflow-scrolling:touch
}
.pcmp__t{
  inline-size:100%;min-inline-size:640px;
  border-collapse:collapse;font-size:clamp(12.5px,.92vw,14.5px)
}
.pcmp__t th,.pcmp__t td{
  padding:clamp(11px,1.2vw,16px) clamp(10px,1.1vw,16px);
  border-block-end:1px solid var(--gold-line-soft);vertical-align:middle
}
.pcmp__t tbody tr:last-child th,.pcmp__t tbody tr:last-child td{border-block-end:0}

/* ── الرأس ─────────────────────────────────────────────────────── */
.pcmp__t thead th{
  position:sticky;inset-block-start:0;z-index:2;
  background:var(--beige);border-block-end:2px solid var(--gold-line);
  text-align:center;vertical-align:top
}
.pcmp__lead{
  text-align:start!important;color:var(--ink-2);font-weight:700;
  inline-size:34%;min-inline-size:180px
}
.pcmp__h{min-inline-size:132px}
.pcmp__h b{
  display:block;font-family:'Cairo',sans-serif;font-weight:800;
  font-size:clamp(13px,1.02vw,16px);color:var(--petrol);line-height:1.5
}
.pcmp__price{
  display:block;margin-block:4px 10px;
  color:var(--ink-3);font-size:clamp(10.5px,.8vw,12.5px)
}
.pcmp__price i{font-style:normal;font-weight:800;color:var(--ink);font-size:1.22em}
.pcmp__h .btn{padding:8px 20px;font-size:clamp(11.5px,.85vw,13px)}
.pcmp__flag{
  display:inline-block;margin-block-end:7px;padding:2px 10px;border-radius:999px;
  background:var(--gold-line-soft);color:var(--gold-text);
  font-family:'Cairo',sans-serif;font-weight:700;font-size:clamp(9.5px,.72vw,11px)
}

/* ── الصفوف ────────────────────────────────────────────────────── */
.pcmp__t tbody th{
  text-align:start;font-weight:600;color:var(--ink-2);line-height:1.75
}
.pcmp__t tbody td{text-align:center}
.pcmp__t tbody tr:nth-child(even) th,
.pcmp__t tbody tr:nth-child(even) td{background:rgba(245,240,230,.42)}
.pcmp__yes{
  inline-size:19px;block-size:19px;aspect-ratio:1;color:#1E7A4F;display:inline-block
}
.pcmp__no{color:var(--ink-3);font-size:1.1em;line-height:1}

/* عمود الباقة المرشحة يبرز في الرأس والصفوف معا */
.pcmp__t .is-hot{background:rgba(212,180,118,.13)}
.pcmp__t thead th.is-hot{background:rgba(212,180,118,.22)}
.pcmp__t tbody tr:nth-child(even) td.is-hot{background:rgba(212,180,118,.19)}

@media (max-width:560px){
  .pcmp__t{min-inline-size:560px}
  .pcmp__lead{min-inline-size:150px}
  .pcmp__h{min-inline-size:112px}
}

/* ── المنتهية تخفت فتبرز المفتوحة ──────────────────────────────── */
/* بطاقتان بالبروز نفسه تسويان بين ما يستقبل مشتركين وما أغلق. و`:has`
   تقرأ الحال من الشريحة نفسها، فلا صنف ثان يضاف في PHP ولا يتفرقان.
   ومن لا يدعمها متصفحه يرى البطاقتين كما كانتا — لا كسر. */
.cmp-card:has(.cmp-state--over){opacity:.86}
.cmp-card:has(.cmp-state--over) .cmp-card__head{
  background:linear-gradient(120deg,#48534F,#39423F)
}
.cmp-card:has(.cmp-state--over) .cmp-card__stage{color:rgba(255,255,255,.72)}
.cmp-card:has(.cmp-state--over):hover{opacity:1}

/* التي تبدأ قريبا: رأسها ذهبي داكن — تقرأ «قادمة» لا «جارية» */
.cmp-card:has(.cmp-state--soon) .cmp-card__head{
  background:linear-gradient(120deg,#5A4A26,#3E3319)
}

/* ══════════════════════════════════════════════════════════════════
   TQ-PGUIDE · دليل اختيار الباقة لولي الأمر
   الجدول يقول ما الفرق، وهذا يقول أيها تناسبني — سؤالان لا سؤال.
   ══════════════════════════════════════════════════════════════════ */
.pguide__pane{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));
  gap:clamp(14px,1.8vw,24px);margin-block-end:clamp(26px,3.4vw,46px)
}
.pguide__pane[hidden]{display:none}
.pguide__card{
  display:flex;flex-direction:column;gap:10px;min-inline-size:0;
  padding:clamp(18px,2vw,28px);
  background:var(--paper);border:1px solid var(--gold-line-soft);
  border-radius:var(--r-card);box-shadow:var(--sh-soft);
  transition:transform var(--t-entry) var(--ease),box-shadow var(--t-entry) var(--ease),
             border-color var(--t-entry) var(--ease)
}
.pguide__card:hover{transform:translateY(-3px);box-shadow:var(--sh-raise);border-color:var(--gold-line)}
/* المرشحة تحمل حدا ذهبيا لا لونا كاملا: التوصية إشارة لا إعلان */
.pguide__card.is-hot{border-color:var(--gold);box-shadow:var(--sh-card)}

.pguide__ico{
  inline-size:clamp(40px,3.4vw,50px);aspect-ratio:1;border-radius:30%;
  display:grid;place-items:center;color:var(--petrol);
  background:linear-gradient(150deg,#FFFDF8,#FAF2E4);border:1px solid var(--gold-line)
}
.pguide__ico svg{inline-size:50%;block-size:50%;aspect-ratio:1}
.pguide__card h3{
  margin:0;font-size:clamp(14.5px,1.15vw,18px);color:var(--petrol);line-height:1.5
}
.pguide__card>p{
  margin:0;color:var(--ink-2);font-size:clamp(12.5px,.92vw,14px);line-height:1.9
}
/* الاسم والسعر يختمان البطاقة على خط واحد فوق الزر */
.pguide__foot{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 12px;margin-block-start:auto;padding-block-start:13px;
  border-block-start:1px dashed var(--gold-line-soft)
}
.pguide__foot b{
  font-family:'Cairo',sans-serif;font-weight:800;color:var(--ink);
  font-size:clamp(13px,1vw,15px)
}
.pguide__foot span{color:var(--ink-3);font-size:clamp(11px,.84vw,13px)}
.pguide__foot i{font-style:normal;font-weight:800;color:var(--ink);font-size:1.2em}
.pguide__card .btn{margin-block-start:2px}

/* عنوان الجدول بعد الدليل: مسافة تفصل السؤالين */
.pcmp__head{margin-block-start:clamp(8px,1.2vw,16px)}

/* ── طيّ جدول المقارنة على الشاشة الضيقة ───────────────────────── */
/* جدول عرضه الأدنى ٥٦٠ في شاشة ٣٩٠ يوسع منفذ العرض فتنزاح الصفحة
   كلها. والمطوي `display:none` فلا يدخل التخطيط. */
.pcmp__box{margin:0}
.pcmp__sum{
  display:none;                       /* يظهر على الضيقة وحدها */
  align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  padding:13px 16px;border-radius:var(--r-btn);
  background:var(--beige);border:1px solid var(--gold-line-soft);
  color:var(--petrol);font-family:'Cairo',sans-serif;font-weight:700;
  font-size:clamp(12.5px,.95vw,14px);list-style:none
}
.pcmp__sum::-webkit-details-marker{display:none}
.pcmp__sum svg{
  inline-size:15px;block-size:15px;aspect-ratio:1;flex:none;
  color:var(--gold-deep);transition:transform var(--t-route) var(--ease)
}
.pcmp__box[open] .pcmp__sum svg{transform:rotate(180deg)}
.pcmp__box[open] .pcmp__sum{margin-block-end:12px}
.pcmp__sum:hover{border-color:var(--gold-line)}

@media (max-width:720px){
  .pcmp__sum{display:flex}
  /* داخل الطي: تلميح أن الجدول يسحب أفقيا — وإلا ظنه القارئ مقصوصا */
  .pcmp__scroll{position:relative}
  .pcmp__scroll::after{
    content:'اسحب أفقيا لرؤية باقي الأعمدة';
    position:sticky;inset-inline-start:0;display:block;
    padding:7px 12px;background:var(--beige);
    color:var(--ink-3);font-size:11.5px;text-align:center;
    border-block-start:1px solid var(--gold-line-soft)
  }
}

/* ══════════════════════════════════════════════════════════════════
   TQ-TOUCH · الحد الأدنى للخط وهدف اللمس على الشاشة الضيقة
   قياس على ٣٩٠: «وفر 20%» كان ٩٫٤px، واسم المرحلة ١٠px، وبنود
   المزايا ١١px — ودون الثانية عشرة لا يقرأ على شاشة في اليد.
   ورابط «اعرف المزيد» ارتفاعه ٣٠px، وأصابع الناس ليست مؤشرات فأرة.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  /* قواعد `.p26d*` في `home-dark.css`: يحمّل بعد هذا الملف فيغلبه
     عند تساوي الخصوصية. */
  .pguide__foot span{font-size:12.5px}
  .cmp-card__facts span{font-size:12.5px}

  /* ٤٤ هو الحد الذي توصي به إرشادات النظامين، ولا يكسر تخطيطا:
     زيادة ارتفاع لا عرض. */
  .btn,
  .plan-cycle button,
  .stage-tab,
  .co-acct__tabs button,
  .pcmp__sum,
  .sitesearch input,
  .sitesearch button{
    min-block-size:44px
  }
  .plan-cycle button,.stage-tab,.co-acct__tabs button{
    display:inline-flex;align-items:center;justify-content:center
  }
}

@media (max-width:720px){
  .pguide small,.pguide span,.pguide a,
  .pcmp small,.pcmp span,.pcmp td,.pcmp th,
  .cmp-card span,.cmp-card b{font-size:max(12px,1em)}

  /* روابط التذييل: ارتفاع ٢١px لا يلمس. والحشو يوسع مساحة النقر بلا
     أن يفكك القوائم — و`min-block-size` كان سيباعد بينها بعدا يقطعها. */
  .site-footer a,.footer-col a,.foot-links a{
    display:inline-block;padding-block:6px
  }
}

/* TQ-FOOTER-ICONS — واستثناء ما ليس رابطا نصيا من القاعدة أعلاه.
   `.site-footer a` خصوصيتها (0,1,1) — مساوية لـ`.socials a`
   و`.footer-contact a` في `taqdar.css`، و`pages.css` تحمل بعدها فتغلب.
   فتحت ٧٢٠px كانت الدائرة تفقد `display:grid` فلا تتوسط أيقونتها،
   وسطر البريد يفقد `display:flex` فتنفصل أيقونته عن نصه.

   وترتيب القاعدتين هنا مقصود: رابط التواصل منحدر من `.footer-contact`
   **و**`.socials` معا، فلو تساوت خصوصيتاهما غلب `display:flex` بلا
   `justify-content` فلصقت الأيقونة بحافة دائرتها. فقاعدة الدوائر
   `.footer-contact .socials a` (0,3,1) تغلب بالخصوصية لا بالترتيب. */
@media (max-width:720px){
  .site-footer .footer-contact a{display:flex;align-items:center}
  .site-footer .footer-contact .socials a{display:grid;place-items:center;padding-block:0}
}