:root{
  --primary:#0057FF;
  --primary-dark:#003366;
  --primary-soft:#EEF4FF;
  --teal:#22DCE0;
  --green:#1FBE7F;
  --green-bright:#33FF99;
  --coral:#F96A59;
  --ink:#0C1526;
  --muted:#5B6478;
  --bg:#F7F9FC;
  --border:#E6EAF2;
  --white:#ffffff;
  --success:#1FBE7F;
  --warning:#F59E0B;
  --danger:#EF4444;
  --radius-lg:18px;
  --radius-md:13px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(12,21,38,.05);
  --shadow-md:0 20px 40px -8px rgba(0,51,102,.16);
  --shadow-header:0 1px 0 rgba(12,21,38,.06);
  --font:'Lama Sans','Cairo','Poppins',sans-serif;
}
*{box-sizing:border-box;}
/* clip مش hidden — الفرق مش تجميلي:
   overflow-x:hidden بيخلّي الـbody صندوق تمرير، والنتيجة إن أي عنصر
   position:sticky جوّاه بيبطّل يلزق خالص (الكارت الجانبي في صفحة
   البرنامج كان بيعدّي عادي مع التمرير). overflow:clip بيمنع التمرير
   الأفقي بنفس الشكل من غير ما يعمل صندوق تمرير، فالـsticky بيفضل شغال. */
html,body{margin:0;padding:0;overflow-x:clip;max-width:100%;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-dark);}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3,h4,p{margin:0;}
.container{max-width:1240px;margin:0 auto;padding-inline:5%;}
@media (min-width:1360px){.container{padding-inline:0;}}

.hoverLift{transition:transform .2s ease, box-shadow .2s ease;}
.hoverLift:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}

/* الإزاحة بتتحدد من الـJS (--marquee-shift) عشان عدد النسخ بيتغيّر حسب
   عرض الشاشة. الافتراضي 50% = نسختين، وهو اللي بتستخدمه شرايط الاعتمادات. */
@keyframes marqueeMove{from{transform:translateX(0);}to{transform:translateX(calc(-1 * var(--marquee-shift,50%)));}}
.marquee{display:flex;gap:20px;width:max-content;animation:marqueeMove 32s linear infinite;}
.marquee:hover{animation-play-state:paused;}
/* التوقّف عند التنقّل بالكيبورد كمان — من غيره العنصر اللي واخد الفوكس
   بيكمّل حركة برّه الشاشة والمستخدم ميعرفش هو فين */
.marquee:focus-within{animation-play-state:paused;}
[dir="rtl"] .marquee{animation-name:marqueeMoveRtl;}
@keyframes marqueeMoveRtl{from{transform:translateX(0);}to{transform:translateX(var(--marquee-shift,50%));}}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-weight:700;font-size:13px;padding:8px 16px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;font-weight:700;font-size:14px;padding:12px 24px;cursor:pointer;transition:filter .15s ease, transform .15s ease;white-space:nowrap;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-outline{background:#fff;color:var(--ink);border:2px solid var(--border);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-sm{padding:9px 16px;font-size:13px;}

.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);}
.eyebrow{color:var(--primary);font-weight:700;font-size:13px;margin-bottom:10px;letter-spacing:.2px;}
.sectionTitle{font-size:34px;font-weight:800;margin:0 0 12px;line-height:1.3;}
.sectionSub{color:var(--muted);font-size:16px;line-height:1.8;margin:0;}

input.field, select.field, textarea.field{
  width:100%;border:2px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 14px;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s ease;
}
input.field:focus, select.field:focus, textarea.field:focus{border-color:var(--primary);}
label.fieldLabel{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--ink);}

.badge{display:inline-flex;align-items:center;gap:6px;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px;}
.chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--border);background:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:all .15s ease;}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.chip:hover:not(.active){border-color:var(--primary);color:var(--primary);}

.markLogo{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;border-radius:9px;flex:none;}

/* auto-fill مش auto-fit: مع نتيجة واحدة auto-fit كان بيلغي الأعمدة الفاضية
   والكارت بياخد عرض الصفحة كلها — auto-fill بيحافظ على الأعمدة فالكارت
   بيفضل في مكانه بنفس حجمه الطبيعي مهما قلّت النتايج */
.gridAutoFit{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.courseCardBody{padding:18px;}
.courseCardTitle{font-size:16px;min-height:44px;}
@media (max-width:700px){
  .gridAutoFit{grid-template-columns:repeat(2,1fr);gap:10px;}
  .gridAutoFit.mobileCols1{grid-template-columns:repeat(1,1fr);}
  .courseCardBody{padding:12px;}
  .courseCardTitle{font-size:14.5px;min-height:auto;}
}
.gridAutoFit2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}

.starRow{display:inline-flex;align-items:center;gap:4px;color:#F59E0B;font-weight:700;font-size:13px;}

.modalOverlay{position:fixed;inset:0;background:rgba(16,24,43,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;}
.modalBox{background:#fff;border-radius:var(--radius-lg);max-width:480px;width:100%;max-height:90vh;overflow-y:auto;padding:28px;position:relative;}

.skeletonImg{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;text-align:center;padding:12px;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}

@media (max-width: 860px){
  .hideOnMobile{display:none !important;}
  .sectionTitle{font-size:26px;}
  .heroTitleResp{font-size:32px !important;}
  .langToggleBtn{padding:9px 10px !important;}
  .langToggleLabel{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .marquee{animation:none;}
  .hoverLift{transition:none;}
}
.navLinksDesktop{display:flex;}
@media (max-width: 980px){
  .navLinksDesktop{display:none;}
}
.mobileMenuBtn{display:none;}
@media (max-width: 980px){
  .mobileMenuBtn{display:inline-flex;}
}

/* ---------- layout grids (kept out of inline styles so media queries can win) ---------- */
.gridSidebarMain{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;}
.gridCourseDetail{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:start;}
.gridContact{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:start;}
.gridFooter{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:36px;}
.stickyAside{position:sticky;top:90px;}
@media (max-width:900px){
  .gridSidebarMain,.gridCourseDetail,.gridContact{grid-template-columns:1fr;}
  .gridFooter{grid-template-columns:1fr 1fr;}
  .stickyAside{position:static;}
}
@media (max-width:560px){
  .gridFooter{grid-template-columns:1fr;}
}

/* ---------- brand logo ---------- */
.brandLogo{height:34px;width:auto;display:block;}
.brandLogoFooter{height:30px;width:auto;display:block;}

/* ---------- mega menu (tracks) — pure CSS hover, no JS needed ---------- */
.navMegaWrap{position:relative;}
.navMegaWrap > .megaTrigger{display:flex;align-items:center;gap:5px;cursor:pointer;}
.navMegaWrap > .megaTrigger .caret{transition:transform .18s ease;opacity:.6;}
.megaPanel{
  /* بينزل تحت الهيدر الطاير (top 10 + ارتفاعه ≈ 58 + فجوة) وبنفس لغته:
     زجاجي ودائري وعائم بمسافة من الجنبين */
  position:fixed;top:82px;inset-inline-start:14px;inset-inline-end:14px;width:auto;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);border-radius:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 24px 50px -18px rgba(20,23,30,.28);
  padding:26px 4%;z-index:90;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events:none;
}
.navMegaWrap:hover .megaPanel, .navMegaWrap:focus-within .megaPanel, .navMegaWrap.megaOpen .megaPanel{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.navMegaWrap:hover > .megaTrigger .caret, .navMegaWrap.megaOpen > .megaTrigger .caret{transform:rotate(180deg);}
.megaPanel::before{
  content:'';position:absolute;top:-14px;inset-inline-start:0;right:0;height:14px;
}
.megaGrid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.megaCard{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);text-decoration:none;transition:border-color .15s ease, background .15s ease;
}
.megaCard:hover{border-color:var(--primary);background:var(--primary-soft);}
.megaCardSwatch{width:44px;height:44px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;}
.megaCardText{min-width:0;}
.megaCardTitle{font-weight:700;font-size:13.5px;color:var(--ink);display:block;}
.megaCardCount{font-size:11.5px;color:var(--muted);}
@media (max-width:980px){
  .megaPanel{display:none;}
}
@media (max-width:1180px){
  .megaGrid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- refined header ---------- */
header{box-shadow:var(--shadow-header);}

/* ---------- Saudi Riyal currency symbol (U+20C1) ----------
   Embedded font: "Saudi Riyal Font" by Emran Alhaddad, SIL Open Font License 1.1
   https://github.com/emran-alhaddad/Saudi-Riyal-Font */
@font-face{
  font-family:'SaudiRiyal';
  src:url("data:font/woff2;base64,d09GMgABAAAAAAT0AA0AAAAAC2QAAASeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGhgGYACCZhEICocEhXcLGgABNgIkAzAEIAWHLgeBBRvVCSCOwnEvSojJ5ORhKiWep9/bPPc32mdnUaW+wXeJKlVIJCg8CIfcQWViVHSETJeZqNqErgZPp/28VaAy13pTkXvNQZv4IHCbHD9In+dyevP5Cfy7K+slmC3ybGwuLx2T18L1PKA2pnPbFCvQCdbLLSJq0N0AB31thACv29f9APD1k6ZUJ0tAD4aoQDO8bhmyFC1UI+oCuAO15AO2Q8G5MwSqDefwClCi9Be6wX9nQPsMEKAeA1AQUIMaLCGACzQCljAqQE+OwoCjcu0D6kv8/x/sl6sfkIpP/3/9/WpgdgoEQAeYoIR0QACkAlSghuJ31w3LAXyr/P+vAvSAOTCAzAK5B6CBQzRNhcGgGoYLL+dYrlnFKgu9iOcEj646uXaI2W3sJ9lTI4EetCRQAgulmH6SYMZBziQb1xBipCaQaS6l0vWRWr1q1aFDnTA52r1fr8fUTpXKWvLQ4KnSwb0+PppFHxtVC1at2uXrO9JOSIUWTzV+QWdXLT0K2uhG0jpJEiZs6WjSR9KuG9Zv1u+P2q1UujpcsT1L3dNzqhQszNevVtPHSYnHKlXoGEWtDpi6yX/duUgVJGGvzwIypcpt/Ni4Jly1atcq32n6zc+V4+ld7k6gz53h7vgOHLKN10L3KkUS7kouYUcPhGVony1zOi//ctkTdm/3kAqubk+P0MptoSFlXH1d5ZyIwuAyWX7+z+picypWzAjs1xCbVaGJLgqt5qqbqg/Y6ntEjm76aneF9Yjvano5HXrdrjSkllfHmVOk+o/IY8O89mBNc9Lbwcoe28z7DRmFzSmN4wbrT5X+B/E2SdMQn2S1PFaUu1OkJfIXKxVt+w1pFa2xjdll47yrvsvczl7/4ETotcmj56Zkzxs3b+7w0ZMNx9wX7srQ8rIsghhH+yj839cG7rwS/FVUQnWXgYUdjUP+HL5C8fybvBJ6ZQRWMKOhfsi7ZqHZEz4e3TZxMtEqXR8kGN0n/5/a9jk9IKKiFlmPtlWvYKy8rF34efCtxR9snP0uNWnu7Jj8kj9HHV1INdJDNT2jhozoFXwqYPLE+VjfWDBpsq7FUrJmU3brXPVwppI6gm8PCAjcX9RU3FdX8KtcJcczkIBc+4K9C8ZdxNPL/LtD9KcF19fLgOpBtODVPMNO+5d0/C2p2BEBPefddskgYA8Aa9mMABgKQwChUg9RkbGjprcJDW9v0SJ+QccrQRhDkk6Os7mYoEtPTCIZQk6xo9ALyCFMI3lIDtjnGFLlm9EzZJUcNNIoAAUACL10ULSMoCUYAkaUk2BRfgAnwm+QoZJMytlMKIQkH0pUBpAqdhjUMjIGGlTuklr2MTzoI92UJ23+wONVGmQ40WC8UgM5iCwsRBYopXLQcHEwXzrQIVosogW4IRrFwqmv4ZzGEQ2Em8tRFmff4c5x4kDgmpXdKAOJhsMnRWOAIg8/SVZ+YGXZ5ee18vMkZYbYopod2PHxMh22lbggxy4aiTp8UzunkRxGMUliNsQgyayTKk8k+l05RzpGmT7YjNb5FSWKKTxHRVTCPj0ISoRIUaJDEZowhCWctufXnHPwkJG/e0pZDQA=") format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SaudiRiyal';
  src:url("data:font/woff2;base64,d09GMk9UVE8AAAWoAAoAAAAADGQAAAVcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYxyBmAAdAE2AiQDKD9sdGFnEgQGBYctByAbrAtRlCxOieyLA54Mb+RgxYeVCNNn6ibiVNV+Iu7SXN7DMXieH4d/7tNARoBxEVJoS0JXyFsoW1Moa0KaP3h17UL8Z0G+wBqkolCFS0d0cb3/9H9m67tCDa7gd/JWZq0/QJPsJM2HiFWr1tLePW+ILU35CMfCxNgIk9+uDhIpVNFAwkU4QgfkEqEjfCxJFyFEQJA608kHaOYTPEYwgogEzt+7MCg9+j+fFrH2vqj2xzh+xKofcfpHvFlZiXX+sfa3jQP2dSsOW6ke7uaC470xi5nB3UyAMN/6tK8HXiIqOC4pOSU1LTe7+EyoLja6TllRtXBaqpb1etfB2QghKyIRUSIlSng7vBVCM4PF4QnqUy9mzx63qH8GMALA+KHXAAKchaCqZ3+R9X/T3/FDL8bx5L4+sqOeQ/5kKShTh/Ce48012bmYEdGdKW1ZTQRI178DKPS07zm3iwTINywBSLqB/R2BAbxZi7VAsLxAPtouAHzuGJ8w3+AASnjUzhkAeTo6eFgHZ1Mq65uiO5LbR1TD+NN8bJvU620Yk8zmMK/2G0qac1hVc3NNZxEBkE+Jxnt0kTnLrLZ12DwLn9/vhJ/xPeum18lbDgD48nGcyRQmqo+3/eOHXpPN7in/xE6XHH+4VAK4GjJdBK1a/B+EZwCoF717sIcAWAKUKijRP9EyrX0Pr+X2ZhH/XGiehgi/3QS2JhDMPmtjok7o3cbtlrVcJfoX5PgLmFA1CDp+ItViuqSNoImt2dPrzJJOwC3sI5gXX3ib1xLwbVpiHJ+pkEnzRwD8UA5KrhwOyLRRrsfS0x3NFI8BSQ3ll0cgR+ghQDEhrhdXg9MdEpaIHNLxisDya2dFiWy0UNHEvPpWBUegl4TBX6omfTKiAIWSAoH6UKuXeIqi3ARnuJJHuk+albhwLVM/fKhbiF2gKx3ha3kgF77uJK2dXR24Ipz4coGvkPAVoLjYhNSoaKq4Ed0rXiHhmeQZnhGwBgBZiOZ5XkXkVolsdFFsUEJAUgglBieHxYIAphOx+ExNxn+9UbR9llsFeRWGlUc2UFxQfGB8CMWER4fHRFBseGxEQialIjlaeCw+Fh5RxMOAl6f7FrvF/58AtIQDxPb5sX272CC+hBoOF+1N20ZAO3JAhUgS8wIpNyjdI96bCiwEW+EsBcUHxPvEkV+sX6QvCODKAEiiJ9ELNyWFjIkjAJkOAAKEeEEkz58X/q6+Q3wi0/yQPV8bSQDkSgCBa40AwDUBAmSTAJDYjqKINgIUkwSAwMURAOTDAWK60UzXk6nW05/qx3ebflFGQ1JrfPMq+xvuQe4gDa0WJBoLalm1AavaQeSS7BSDNgkEb0YLNyCJ/Jz/vybInkQbBKE96MnSAeG+GEYqwgViut+pmkKl3VHi8RW+Us/8/0+3+P+R4LrUXeCSGeGFAPgqgb1jdlJlX6Q9Abi7s2atyJ5Pbq1GZeBMWH6zvhT299ZbDArMSYbMX5lgsUvtsEBqcAqhZsgb/9yNWU1Nom1LhHCIwpNw0aQ7EEOieLEoNjNdABEPFHkxPcWLeBVLvbtLfRBf8nQs9WOpP0sDJ9ESlDaLNYEllkTw4UIUhlvRhJQlhkCPYhG2xBHAhXgg5Mf0zPCKtn33wRuzQUBVdA4NAQRwEjWgRyPGa5XAIoAAAggggAACACGAAEAIIAAQAsjh83K3Si91KNF/uUlhXUsVkQf1dlBvDnQHmEtGtTejszIqISuPyBhOftilcytw+ut9M94gSbF6NydKLHAzJRInatEz1EUvX3dC/Xz86cw1U5dXVV7BcH91d3ErkDkY6MP2Lppo3ZLES+GNI8oAAAA=") format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
.riyalAmount{font-family:'SaudiRiyal','Cairo',sans-serif;unicode-bidi:isolate;display:inline-flex;align-items:center;gap:3px;}

/* ---------- quick facts bar (course detail) ---------- */
.quickFactsBar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:#fff;}
.quickFactItem{display:flex;align-items:center;gap:10px;padding:14px 16px;border-inline-end:1px solid var(--border);}
.quickFactItem:last-child{border-inline-end:none;}
.quickFactIcon{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:none;}
.quickFactLabel{font-size:11.5px;color:var(--muted);display:block;}
.quickFactValue{font-size:13.5px;font-weight:700;color:var(--ink);display:block;margin-top:1px;}
@media (max-width:900px){
  .quickFactsBar{grid-template-columns:repeat(2,1fr);}
  .quickFactItem:nth-child(2){border-inline-end:none;}
}
/* على الموبايل: صف لكل معلومة بدل شبكة عمودين.
   السبب إن صفوف الشبكة بتتساوى في الارتفاع، فخلية زي "٦ أسابيع" كانت بتتمطّ
   لنفس ارتفاع خلية اللغة الطويلة وتضيّع مساحة فاضية كبيرة. والصف الكامل
   بيدّي النص الطويل عرض أكبر فبيتكسر لسطرين بدل أربعة. */
@media (max-width:620px){
  .quickFactsBar{grid-template-columns:1fr;}
  .quickFactItem{
    border-inline-end:none;
    border-bottom:1px solid var(--border);
    padding:6px 13px;
    gap:9px;
  }
  /* في القائمة العمودية آخر عنصر بس هو اللي مالوش حد سفلي —
     قاعدة nth-child(2) فوق دي خاصة بشبكة العمودين وبنلغيها هنا */
  .quickFactItem:nth-child(2){border-bottom:1px solid var(--border);}
  .quickFactItem:last-child{border-bottom:none;}
  .quickFactIcon{width:26px;height:26px;border-radius:7px;}
  .quickFactIcon svg{width:14px;height:14px;}
  /* التسمية على اليمين والقيمة على الشمال في نفس السطر */
  .quickFactItem > span:last-child{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;flex:1;min-width:0;
  }
  .quickFactLabel{font-size:11px;flex:none;}
  .quickFactValue{margin-top:0;font-size:12.5px;text-align:end;line-height:1.45;}
}

/* ---------- FAQ accordion (native <details>, no JS needed) ---------- */
.faqItem{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;overflow:hidden;}
.faqItem + .faqItem{margin-top:10px;}
.faqItem summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:700;font-size:14.5px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faqItem summary::-webkit-details-marker{display:none;}
.faqItem .faqChevron{transition:transform .18s ease;color:var(--primary);flex:none;}
.faqItem[open] .faqChevron{transform:rotate(180deg);}
.faqItem .faqAnswer{padding:0 18px 16px;color:var(--muted);font-size:14px;line-height:1.85;}

/* ---------- bullet list (what-is / why-choose / who-attend) ---------- */
.bulletList{display:flex;flex-direction:column;gap:12px;}
.bulletList li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.75;list-style:none;}
.bulletList .bulletDot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex:none;margin-top:7px;}

/* ---------- Deraya-by-numbers trust block ---------- */
.derayaStatsBlock{background:linear-gradient(135deg, var(--primary-dark), var(--primary));border-radius:var(--radius-lg);padding:40px 5%;color:#fff;}
.derayaStatsGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-align:center;max-width:1100px;margin:0 auto;}
@media (max-width:900px){.derayaStatsGrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.derayaStatsGrid{grid-template-columns:1fr 1fr;}}

/* ---------- mobile sticky register bar ---------- */
.mobileStickyBar{display:none;}
.mobileStickyBarSpacer{height:0;}
.floatWidget{bottom:22px;}
@media (max-width:900px){
  .mobileStickyBarSpacer{height:74px;}
  .mobileStickyBar{
    display:flex;position:fixed;bottom:0;inset-inline-start:0;width:100%;
    background:#fff;border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(12,21,38,.08);
    padding:10px 5%;z-index:120;align-items:center;justify-content:space-between;gap:12px;
  }
  /* في صفحات البرامج بس، زرار التواصل العايم بيترفع فوق شريط التسجيل —
     من غير كده كان بيغطي على زرار "سجّل الآن" وهو أهم زرار في الصفحة.
     74px ارتفاع الشريط + 14px مسافة. */
  .floatWidgetAboveBar{bottom:88px;}
}

/* ---------- course-page section header system (visual separation matching brand identity) ---------- */
.courseSection{padding-top:30px;margin-top:30px;border-top:1px solid var(--border);}
.courseSection:first-child{padding-top:0;margin-top:0;border-top:none;}
.sectionHeaderRow{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.sectionHeaderIcon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;}
.sectionHeaderTitle{font-size:18px;font-weight:800;margin:0;}

/* ---------- category cover icon (differentiates courses within the same track) ---------- */
.coverIcon{color:#fff;opacity:.95;}

/* ---------- refund badge + info disclosure ---------- */
.refundBadge{display:inline-flex;align-items:center;gap:7px;background:#EAFBF3;color:#15803D;border:1px solid #BBF0D6;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;}
.refundInfo{margin-top:8px;}
.refundInfo summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;color:var(--primary);font-size:12.5px;font-weight:700;}
.refundInfo summary::-webkit-details-marker{display:none;}
.refundInfo .refundInfoBody{margin-top:8px;background:var(--bg);border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;color:var(--muted);line-height:1.8;}

/* ---------- all-courses page: top filter bar + 5-column grid ---------- */
/* ==========================================================================
   صفحة البرامج — شريط فلاتر علوي
   --------------------------------------------------------------------------
   صف أول: البحث + الترتيب. صف تاني: الفلاتر بعناوين فوق كل واحدة.
   على الموبايل الصف التاني بيتطوى ورا أيقونة عشان مياخدش نص الشاشة.
   ========================================================================== */
.filterBar{
  background:#fff;border:1px solid rgba(20,23,30,.07);
  border-radius:20px;padding:16px;margin-bottom:20px;
  box-shadow:0 1px 3px rgba(20,23,30,.03), 0 4px 10px -2px rgba(20,23,30,.04);
}

/* الصف العلوي — البحث بياخد المساحة والترتيب بعرضه فقط.
   min-width:0 على البحث ضروري: من غيره الـflex مابيسمحش له يصغّر
   والترتيب بيركب فوقه. */
.filterBarTop{display:flex;align-items:center;gap:10px;}
.ds-searchWrap{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;
  height:46px;padding:0 16px;background:#fff;
  border:1px solid rgba(20,23,30,.12);border-radius:999px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ds-searchWrap:focus-within{border-color:#0057FF;box-shadow:0 0 0 4px rgba(0,87,255,.12);}
.ds-searchWrap svg{width:18px;height:18px;color:#A3ABBD;flex:none;}
.ds-searchWrap input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:inherit;font-size:15px;}
/* select.field{width:100%} أقوى في الأولوية من .coursesSort لوحدها
   (عنصر+كلاس تغلب كلاس)، فلازم نطابق نفس الوزن وإلا الـselect
   بياخد عرض الصف كله ويزنق خانة البحث. */
select.coursesSort{flex:0 0 auto;width:auto;min-width:160px;max-width:190px;height:46px;border-radius:999px;}

/* صف الفلاتر */
.filterBarFields{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(20,23,30,.07);
}
.filterCell{display:flex;flex-direction:column;gap:6px;min-width:0;}
.filterLabel{font-size:12px;font-weight:600;color:#737C90;}
.filterCell .field{width:100%;}
.filterCellReset{justify-content:flex-end;}
.filterCellReset .btn{width:100%;}

.coursesCount{font-size:14px;color:#737C90;margin-bottom:16px;}
/* زرار الفلتر مالوش لازمة على الديسكتوب — الفلاتر ظاهرة أصلًا */
.filterToggleBtn{display:none;}

@media (max-width:820px){
  .filterBar{padding:14px;border-radius:18px;}
  .coursesSort{display:none;}   /* الترتيب بينزل جوه الفلاتر المطوية */

  .filterToggleBtn{
    display:inline-flex;align-items:center;justify-content:center;position:relative;
    flex:0 0 auto;width:46px;height:46px;border-radius:999px;
    border:1px solid rgba(20,23,30,.12);background:#fff;color:#0A0C11;cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  .filterToggleBtn.isOpen{border-color:#0057FF;background:#EFF4FF;color:#0057FF;}
  .filterCountBadge{
    position:absolute;top:-6px;inset-inline-end:-6px;min-width:19px;height:19px;
    border-radius:999px;background:#0057FF;color:#fff;font-size:11px;font-weight:700;
    display:flex;align-items:center;justify-content:center;padding:0 5px;
  }

  .filterBarFields{display:none;}
  .filterBarFields.isOpen{display:grid;grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .filterBarFields.isOpen{grid-template-columns:1fr;}
}
/* ---------- mobile register-card reorder (dashboard-configurable) ---------- */
@media (max-width:900px){
  .mobileCardTop{order:-1;}
}

/* ---------- loading skeleton pulse ---------- */
@keyframes skeletonPulse{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* ---------- app boot loading / error screens ---------- */
.appBootScreen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;}
.appBootSpinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:appSpin .8s linear infinite;}
@keyframes appSpin{to{transform:rotate(360deg);}}

/* ---------- rich blog content (rendered from the Quill editor) ---------- */
.richContent{font-size:16px;line-height:1.95;color:var(--ink);}
.richContent h1{font-size:26px;font-weight:800;margin:28px 0 14px;}
.richContent h2{font-size:22px;font-weight:800;margin:26px 0 12px;}
.richContent h3{font-size:19px;font-weight:700;margin:22px 0 10px;}
.richContent p{margin:0 0 18px;}
.richContent ul,.richContent ol{margin:0 0 18px;padding-inline-start:24px;}
.richContent li{margin-bottom:6px;}
.richContent a{color:var(--primary);text-decoration:underline;}
.richContent blockquote{border-inline-start:4px solid var(--primary);margin:20px 0;padding:6px 18px;color:var(--muted);font-style:italic;background:var(--bg);border-radius:0 8px 8px 0;}
.richContent img{max-width:100%;border-radius:12px;margin:16px 0;}
.richContent pre{background:#0C1526;color:#E6EAF2;padding:14px 16px;border-radius:10px;overflow-x:auto;direction:ltr;text-align:left;margin:16px 0;}
.richContent .ql-align-center{text-align:center;}
.richContent .ql-align-right{text-align:right;}
.richContent .ql-align-left{text-align:left;}
.richContent .ql-align-justify{text-align:justify;}
.richContent .ql-direction-rtl{direction:rtl;}

/* ---------- accreditation double-row marquee (opposite directions) ---------- */
.marqueeRow2{animation-direction:reverse;animation-duration:26s;}
.accredMarqueeWrap{overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}

/* ==========================================================================
   شريط المسارات المتحرك
   ==========================================================================
   كل كارت بياخد لون مساره من الـJS في --tc / --tc2، فالتمن مسارات بتبان
   مختلفة عن بعض من غير ما نحتاج صورة لكل واحد.
   ========================================================================== */
.tracksSection{padding:64px 0 72px;}
.tracksHead{text-align:center;max-width:640px;margin:0 auto 32px;}

.trackMarqueeWrap{
  overflow:hidden;width:100%;padding:8px 0 22px;   /* مساحة لظل الـhover ما يتقصّش */
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
/* أبطأ من الافتراضي — الحركة البطيئة بتدّي إحساس أهدأ وأكثر رصانة.
   الـpadding في الآخر مش تجميل: الـgap بيحط مسافة بين الكروت بس ومفيش
   مسافة بعد آخر كارت، يعني العرض الكلي = (عدد النسخ × عرض المجموعة) − gap.
   فلما نزيح 50% كنا بنزيح أقل من مجموعة كاملة بـ8 بكسل والشريط كان بينطّ
   نطة صغيرة كل دورة. الـpadding بيكمّل المسافة الناقصة فالإزاحة تبقى
   مساوية لمجموعة كاملة بالظبط والدورة تتقفل من غير أي قطع. */
.trackMarquee{gap:16px;padding-inline-end:16px;animation-duration:46s;}

.trackChip{
  position:relative;flex:none;width:316px;
  display:flex;flex-direction:column;
  padding:16px 18px;border-radius:20px;text-decoration:none;overflow:hidden;
  background:#fff;border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.trackChip:hover{
  transform:translateY(-4px);
  border-color:var(--tcInk);
  box-shadow:0 12px 28px -10px rgba(16,24,40,.18);
}
.trackChip:focus-visible{outline:2px solid var(--tcInk);outline-offset:2px;}

/* الوشاح اللوني الخفيف + العلامة الكبيرة ورا المحتوى */
.trackChipWash{position:absolute;inset:0;pointer-events:none;}
.trackChipGhost{
  position:absolute;inset-inline-end:-6px;bottom:-18px;
  font-size:76px;font-weight:800;line-height:1;letter-spacing:-.04em;
  pointer-events:none;user-select:none;direction:ltr;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.trackChip:hover .trackChipGhost{transform:scale(1.08) translateY(-2px);}

/* flex مش block: العنصر جوه سطر نصّي بيسيب مسافة تحته لنزول الحروف
   (baseline descender) فالكارت اللي فيه صورة كان أطول 6px عن اللي فيه
   علامة. الـflex بيشيل المسافة دي فالارتفاعات تبقى واحدة أصلًا مش
   بالتساوي القسري من الـflex row. */
.trackChipTop{position:relative;display:flex;margin-bottom:12px;}
.trackChipMark{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:var(--tcSoft);color:var(--tcInk);
  font-weight:800;font-size:13px;letter-spacing:.02em;direction:ltr;
}
/* box-sizing عشان الـborder ياكل من الـ40px مش يزوّد عليها */
.trackChipThumb{box-sizing:border-box;width:40px;height:40px;border-radius:12px;object-fit:cover;border:1px solid var(--border);}

.trackChipName{
  position:relative;color:var(--ink);font-weight:700;font-size:16px;line-height:1.45;
  /* سطرين بالظبط عشان كل الكروت تفضل بنفس الارتفاع مهما طال الاسم */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.9em;
}
.trackChipFoot{
  position:relative;margin-top:10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.trackChipCount{color:var(--muted);font-size:13px;font-weight:600;}
.trackChipArrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--tcSoft);color:var(--tcInk);
  transition:transform .22s cubic-bezier(.22,1,.36,1), background-color .22s ease;
}
.trackChip:hover .trackChipArrow{background:var(--tcInk);color:#fff;}
.trackChipArrow svg{width:15px;height:15px;}
/* السهم بيتحرك ناحية اتجاه القراءة — لفّة 180 في RTL عشان يشاور صح */
[dir="rtl"] .trackChipArrow svg{transform:rotate(180deg);}
.trackChip:hover .trackChipArrow{transform:translateX(4px);}
[dir="rtl"] .trackChip:hover .trackChipArrow{transform:translateX(-4px);}

@media (max-width:640px){
  .tracksSection{padding:48px 0 56px;}
  .trackChip{width:236px;padding:16px;border-radius:18px;}
  .trackChipName{font-size:15px;}
  .trackChipGhost{font-size:62px;}
  .trackMarquee{animation-duration:34s;}
}
/* من غير حركة: الشريط بيبقى قابل للسحب بالإصبع/الماوس بدل ما يتجمّد ناقص */
@media (prefers-reduced-motion: reduce){
  .trackMarqueeWrap{overflow-x:auto;mask-image:none;-webkit-mask-image:none;scrollbar-width:thin;}
  .trackMarqueeWrap::-webkit-scrollbar{height:6px;}
  .trackMarqueeWrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
}


/* ==========================================================================
   طبقة الحركات (Animation Layer)
   --------------------------------------------------------------------------
   قاعدتين مهمين هنا:
   1) كل حركة بتخفي محتوى متغلّفة جوه @media (prefers-reduced-motion: no-preference)
      ومربوطة بكلاس .animReady اللي الجافاسكريبت بيضيفه على <html>.
      يعني لو الجافاسكريبت وقع، أو المستخدم مفعّل "تقليل الحركة" في نظامه،
      المحتوى بيظهر عادي على طول — مستحيل حاجة تفضل مخفية بالغلط.
   2) بنحرّك opacity و transform بس (مش top/height/margin) عشان الحركة
      تفضل ناعمة على الموبايل من غير ما تجبر المتصفح يعيد حساب التخطيط.
   ========================================================================== */
:root{
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --dur-fast:.18s;
  --dur-mid:.34s;
  --dur-slow:.55s;
}

/* الهيدر: ظل خفيف يظهر بس لما تنزل بالاسكرول (بيفصل الهيدر عن المحتوى) */
/* ==========================================================================
   الهيدر الزجاجي (Liquid Glass)
   --------------------------------------------------------------------------
   التأثير مبني من أربع طبقات مع بعض — أي واحدة لوحدها بتبان رخيصة:
     1) خلفية شبه شفافة (مش شفافة تمامًا وإلا النص مايبانش)
     2) blur قوي + saturate عشان الألوان ورا الزجاج تفضل حيّة
        (من غير saturate الزجاج بيبهّت اللي وراه ويبان رمادي)
     3) حافة علوية مضيئة جوه (inset) — دي اللي بتدي إحساس السُمك
     4) ظل ناعم بيفصله عن المحتوى
   ========================================================================== */
/* الهيدر «طاير»: مش لاصق في سقف الشاشة — كبسولة زجاجية دائرية الأطراف
   عائمة فوق المحتوى بمسافة من فوق ومن الجنبين. الزوايا 999px = pill. */
.siteHeader{
  position:sticky;top:10px;z-index:80;
  margin:10px 14px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             0 6px 24px -12px rgba(20,23,30,.14);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* لما ينزل بالاسكرول الزجاج بيتكثّف شوية والظل يقوى —
   بيوضّح إن الهيدر طبقة عائمة فوق المحتوى مش جزء منه */
.siteHeader.isScrolled{
  background:rgba(255,255,255,.82);
  border-color:rgba(20,23,30,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),
             0 14px 36px -14px rgba(20,23,30,.25);
}

/* الريل الجانبي بنفس اللغة الزجاجية عشان الاتنين يبانوا طبقة واحدة */
.siteRail{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  border-inline-end:1px solid rgba(20,23,30,.06);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.6);
}

/* متصفح مش داعم backdrop-filter → خلفية معتمة عادية.
   من غير الاحتياط ده الهيدر بيبقى شفاف والنص يتلخبط مع المحتوى وراه. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .siteHeader, .siteRail{background:#fff;}
}

/* إطار تركيز واضح لمستخدمي الكيبورد (مش حركة — ده وصول) */
:focus-visible{outline:3px solid rgba(0,87,255,.38);outline-offset:2px;}

@media (prefers-reduced-motion: no-preference){

  /* ---------- ظهور العناصر مع الاسكرول ---------- */
  html.animReady [data-reveal]{
    opacity:0;
    transform:translateY(22px);
    transition:opacity var(--dur-slow) var(--ease-soft),
               transform var(--dur-slow) var(--ease-soft);
  }
  html.animReady [data-reveal].isRevealed{opacity:1;transform:none;}
  /* العناصر اللي كانت ظاهرة أصلًا وقت إعادة الرسم بتتعرض فورًا من غير حركة،
     عشان تغيير فلتر أو كتابة في البحث مايعملش إعادة أنيميشن مزعجة للمحتوى الظاهر */
  html.animReady [data-reveal].revealNow{transition:none;opacity:1;transform:none;}

  /* ---------- انتقال الصفحات ---------- */
  html.animReady .pageEnter{animation:pageEnterAnim .42s var(--ease-soft) both;}
  @keyframes pageEnterAnim{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

  /* ---------- المودالز ---------- */
  .modalOverlay{animation:overlayFadeIn .22s ease both;}
  .modalBox{animation:modalPopIn .34s var(--ease-soft) both;}
  @keyframes overlayFadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes modalPopIn{from{opacity:0;transform:translateY(18px) scale(.975);}to{opacity:1;transform:none;}}

  /* ---------- لمسات دقيقة ---------- */
  .btn:active{transform:scale(.97);}
  .chip:active{transform:scale(.96);}
  .card{transition:transform var(--dur-mid) var(--ease-soft),
                   box-shadow var(--dur-mid) var(--ease-soft),
                   border-color var(--dur-fast) ease;}
}

/* ---------- بلوك الدعوة في آخر صفحة البرنامج ---------- */
.courseClosingCtaBtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.courseClosingCtaBtns .btn{flex:none;}
@media (max-width:560px){
  .courseClosingCta{padding:30px 20px !important;}
  .courseClosingCta h2{font-size:20px !important;}
  /* على الموبايل الأزرار تحت بعض وبعرض كامل — أسهل في الضغط بإصبع واحد */
  .courseClosingCtaBtns{flex-direction:column;}
  .courseClosingCtaBtns .btn{width:100%;}
}

/* ==========================================================================
   توحيد نسب الصور
   --------------------------------------------------------------------------
   الصور بتتظبط على المقاس الموحّد وقت الرفع (includes/upload.php)، بس القواعد
   دي شبكة أمان مهمة لسببين:
     • الصور المرفوعة قبل التحديث ده لسه بمقاساتها القديمة
     • كارت الدورة عرضه بيتغيّر مع حجم الشاشة (5 أعمدة → عمودين)، فلو
       اعتمدنا على ارتفاع ثابت كانت نفس الصورة هتتقص بشكل مختلف في كل مقاس
   aspect-ratio بتثبّت النسبة، و object-fit:cover بيملأ الإطار من غير تشويه.
   ========================================================================== */
:root{
  --ratio-course: 16 / 9;
  --ratio-track:  3 / 2;
  --ratio-blog:   16 / 9;
}

.imgFrame{
  position:relative;
  width:100%;
  overflow:hidden;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display:flex;align-items:center;justify-content:center;
}
/* الصورة بتملأ الإطار بالظبط مهما كان مقاسها الأصلي — الزيادة بتتقص
   من الأطراف والنسبة مابتتشوّهش أبدًا */
.imgFrame > img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}

.ratioCourse{aspect-ratio:var(--ratio-course);}
.ratioTrack {aspect-ratio:var(--ratio-track);}
.ratioBlog  {aspect-ratio:var(--ratio-blog);}

/* متصفحات قديمة مش داعمة aspect-ratio — بترجع لارتفاع محسوب بالنسبة نفسها */
@supports not (aspect-ratio: 16 / 9){
  .ratioCourse::before,.ratioTrack::before,.ratioBlog::before{content:"";display:block;}
  .ratioCourse::before{padding-top:56.25%;}
  .ratioTrack::before {padding-top:66.66%;}
  .ratioBlog::before  {padding-top:56.25%;}
  .imgFrame > img{position:absolute;inset:0;}
}

/* ---------- مصغّرات المسارات في القوائم ---------- */
/* الصورة بتملأ المربع وتتقص من النص — نفس مبدأ باقي الصور، فمهما كان
   مقاس الصورة المرفوعة المصغّرة بتفضل مربعة ومنتظمة */
.megaCardSwatch.hasImg, .trackThumbSm.hasImg{overflow:hidden;padding:0;}
.megaCardSwatch img, .trackThumbSm img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
/* مصغّرة قائمة الموبايل — كانت inline style قبل كده */
.trackThumbSm{
  width:26px;height:26px;border-radius:7px;flex:none;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:10px;
}

/* ==========================================================================
   تبويبات صفحة البرنامج
   --------------------------------------------------------------------------
   الأقسام الثمانية كانت مرصوصة في 4,803 بكسل (5 شاشات ديسكتوب، 11 موبايل).
   التبويبات بتخلي أي معلومة على بعد ضغطة واحدة.
   ========================================================================== */
.courseTabs{
  display:flex;gap:4px;overflow-x:auto;
  background:var(--gray-100, #F1F3F9);
  border-radius:999px;padding:4px;margin-bottom:28px;
  scrollbar-width:none;
  /* سكرول أفقي ناعم على الموبايل:
     - momentum على iOS (من غيره السحب بيقف فجأة أول ما الصباع يرفع)
     - overscroll-behavior بيمنع السحب من إنه يتسرّب للصفحة كلها
     - scroll-snap بيخلي الشريط يستقر على حدود تبويب مش في نص كلمة */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  max-width:100%;
}
.courseTabs::-webkit-scrollbar{display:none;}
.courseTab{scroll-snap-align:center;}

/* الفيض الأفقي في صفحة البرنامج — الجذر مش الشريط نفسه:
   عنصر الشبكة min-width بتاعه auto، يعني بياخد أصغر عرض يشيل محتواه من
   غير لف، والتبويبات الأربعة جنب بعض أعرض من شاشة الموبايل. النتيجة إن
   العمود كله كان بيتمط 379px على شاشة 375 والصفحة تسحب يمين وشمال.
   min-width:0 بيسمح للعمود ينضغط لعرض الشاشة، وساعتها الشريط يسكرول
   جوّه نفسه زي ما هو متصمم. */
.gridCourseDetail > div{min-width:0;}
.courseTab{
  flex:none;height:38px;padding:0 18px;border:none;border-radius:999px;
  background:transparent;color:var(--muted);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.courseTab:hover{color:var(--ink);}
/* لوجو الجهة جوه تبويب «شروط الالتحاق» — التبويب flex عشان اللوجو
   يتوسّط رأسيًا جنب الكلام */
.courseTab{display:inline-flex;align-items:center;gap:7px;}
.courseTabLogo{
  width:19px;height:19px;object-fit:contain;flex:none;
  background:#fff;border-radius:5px;padding:1px;
  box-shadow:0 0 0 1px rgba(20,23,30,.08);
}
.courseTabMark{font-size:9.5px;font-weight:800;direction:ltr;flex:none;}
/* التبويب النشط أبيض بظل — نفس نمط الأزرار المجمّعة في اللوحة */
.courseTab.isActive{
  background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(20,23,30,.06), 0 2px 6px -2px rgba(20,23,30,.06);
}
/* حركة دخول خفيفة لمحتوى التبويب — بتوضّح إن المحتوى اتغيّر */
@media (prefers-reduced-motion: no-preference){
  .courseTabPanel{animation:tabIn .28s cubic-bezier(.16,1,.3,1) both;}
  @keyframes tabIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
}
@media (max-width:700px){
  .courseTabs{margin-bottom:20px;}
  .courseTab{height:36px;padding:0 14px;font-size:13px;}
}

/* ==========================================================================
   المعاينة السريعة — عمودين، بدون تمرير
   --------------------------------------------------------------------------
   الصورة يمين والمحتوى شمال. الهدف إن كل حاجة تبان في نظرة واحدة:
   الاسم، الوصف، الأرقام، الاعتماد، السعر، والأزرار — من غير أي تمرير.
   ========================================================================== */
.qvOverlay{padding:24px;}
.qvBox{
  background:#fff;border-radius:24px;width:100%;max-width:900px;
  max-height:88vh;position:relative;overflow:hidden;
  display:grid;grid-template-columns:360px 1fr;
  box-shadow:0 6px 14px rgba(20,23,30,.06), 0 28px 60px -14px rgba(20,23,30,.22);
}
.qvClose{
  position:absolute;top:14px;inset-inline-end:14px;z-index:3;
  width:34px;height:34px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  color:#14171E;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(20,23,30,.16);
}
.qvClose:hover{background:#fff;}

/* عمود الصورة — بيملأ ارتفاع المودال كله */
.qvMedia{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.qvMedia img{width:100%;height:100%;object-fit:cover;}
.qvMedia .coverIcon{transform:scale(1.8);opacity:.9;}
.qvDiscount{
  position:absolute;top:16px;inset-inline-start:16px;
  background:#fff;color:#B42318;font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:999px;box-shadow:0 2px 8px rgba(20,23,30,.16);
}

/* عمود المحتوى */
.qvContent{
  display:flex;flex-direction:column;
  padding:32px 32px 24px;min-width:0;gap:20px;
}
.qvHead{min-width:0;}
.qvTitle{font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:12px;}
.qvSub{color:#737C90;font-size:15px;line-height:1.7;margin-top:8px;}

/* نظرة عامة — مقصوصة على 3 سطور عشان المودال ما يكبرش ويحتاج تمرير.
   الزائر عايز فكرة سريعة هنا؛ النص الكامل في «التفاصيل الكاملة». */
.qvOverview{
  color:#3D4453;font-size:14px;line-height:1.85;margin-top:12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* سطور وهمية وقت التحميل — بتحجز نفس المساحة فالمودال مايقفزش */
.qvOverviewSkeleton{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.qvOverviewSkeleton span{
  height:11px;border-radius:6px;
  background:linear-gradient(90deg,#F1F3F9 25%,#E9EDF5 37%,#F1F3F9 63%);
  background-size:400% 100%;animation:skeletonPulse 1.4s ease infinite;
}
.qvOverviewSkeleton span:last-child{width:72%;}

/* الأرقام الأربعة في صف واحد */
.qvFacts{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(20,23,30,.08);border-radius:16px;overflow:hidden;
}
.qvFacts > div{
  padding:12px 6px;text-align:center;
  border-inline-end:1px solid rgba(20,23,30,.08);
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
}
.qvFacts > div:last-child{border-inline-end:none;}
.qvFacts span{color:#A3ABBD;display:flex;}
.qvFacts span svg{width:15px;height:15px;}
.qvFacts b{font-size:15px;font-weight:700;color:#0A0C11;line-height:1.2;}
.qvFacts small{font-size:10.5px;color:#737C90;}

/* الاعتماد في سطر واحد جنب اللابل */
.qvAccred{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.qvAccredLabel{font-size:12px;font-weight:700;color:#737C90;flex:none;}
.qvAccredLogos{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* الفوتر بيتدفع لتحت بـ margin-top:auto عشان يفضل ملزوق بالقاع */
.qvFooter{
  margin-top:auto;padding-top:20px;border-top:1px solid rgba(20,23,30,.08);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.qvPrice{display:flex;flex-direction:column;}
.qvPriceLabel{font-size:11.5px;color:#737C90;}
.qvPriceValue{display:flex;align-items:baseline;gap:8px;}
.qvActions{display:flex;gap:10px;flex:none;}

@media (max-width:860px){
  /* عمود واحد: الصورة فوق بارتفاع محدود، والمحتوى تحت */
  .qvBox{grid-template-columns:1fr;max-height:92vh;overflow-y:auto;}
  .qvMedia{height:190px;}
  .qvContent{padding:24px 22px 20px;gap:18px;}
  .qvTitle{font-size:26px;}
}
@media (max-width:560px){
  .qvOverlay{padding:0;align-items:flex-end;}
  .qvBox{max-width:100%;border-radius:22px 22px 0 0;max-height:94vh;}
  .qvMedia{height:150px;}
  .qvFacts{grid-template-columns:1fr 1fr;}
  .qvFacts > div:nth-child(2){border-inline-end:none;}
  .qvFacts > div:nth-child(-n+2){border-bottom:1px solid rgba(20,23,30,.08);}
  .qvTitle{font-size:23px;}
  .qvFooter{flex-direction:column;align-items:stretch;gap:12px;}
  .qvActions{width:100%;}
  .qvActions .btn{flex:1;}
}
/* ==========================================================================
   الرِيل الجانبي + لوحة الأوامر
   ========================================================================== */
:root{ --rail-w: 0px; }   /* الريل اتشال — المحتوى بعرض الشاشة */

.siteRail{
  position:fixed;inset-block:0;inset-inline-start:0;width:var(--rail-w);
  background:#fff;border-inline-end:1px solid rgba(20,23,30,.07);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 0;z-index:95;
}
.railBtn{
  position:relative;width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:12px;cursor:pointer;
  color:#71717A;transition:background .15s ease, color .15s ease;
}
.railBtn:hover{background:#F1F3F9;color:#14171E;}
.railBtn.isActive{background:#EFF4FF;color:#0057FF;}
.railIcon{display:flex;}
.railIcon svg{width:19px;height:19px;}
/* الاسم بيظهر كتلميح جنب الزر — أنضف من توسيع الشريط كله */
.railLabel{
  position:absolute;inset-inline-start:calc(100% + 10px);
  background:#14171E;color:#fff;font-size:12.5px;font-weight:600;
  padding:6px 10px;border-radius:8px;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateX(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events:none;box-shadow:0 4px 12px rgba(20,23,30,.18);
}
[dir="rtl"] .railLabel{transform:translateX(-6px);}
.railBtn:hover .railLabel{opacity:1;visibility:visible;transform:translateX(0);}

/* المحتوى بيتزاح بعرض الريل */
.siteBody{margin-inline-start:var(--rail-w);}
/* الهيدر اللاصق لازم يعرف مكانه الجديد */
.siteBody .siteHeader{inset-inline-start:var(--rail-w);}

@media (max-width:900px){
  /* على الموبايل القائمة الجانبية بتغطي نفس الغرض — الريل بياخد مساحة من غير داعي */
  .siteRail{display:none;}
  .siteBody{margin-inline-start:0;}
  .siteBody .siteHeader{inset-inline-start:0;}
}

/* ---------- لوحة الأوامر ---------- */
.paletteOverlay{align-items:flex-start;padding-top:12vh;}
.paletteBox{
  background:#fff;border-radius:18px;width:100%;max-width:560px;
  overflow:hidden;box-shadow:0 8px 20px rgba(20,23,30,.10), 0 32px 64px -16px rgba(20,23,30,.28);
}
.paletteSearch{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid rgba(20,23,30,.07);
}
.paletteSearch svg{width:19px;height:19px;color:#A3ABBD;flex:none;}
.paletteSearch input{
  flex:1;min-width:0;border:none;outline:none;background:none;
  font-family:inherit;font-size:16px;color:#0A0C11;
}
.paletteSearch input::placeholder{color:#A3ABBD;}
.paletteKbd{
  font-size:11px;font-weight:600;color:#737C90;
  background:#F1F3F9;padding:3px 7px;border-radius:6px;flex:none;
}

.paletteList{max-height:52vh;overflow-y:auto;padding:8px;}
.paletteItem{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 12px;border:none;background:transparent;border-radius:12px;
  cursor:pointer;text-align:start;font-family:inherit;
  transition:background .12s ease;
}
.paletteItem:hover, .paletteItem.isActive{background:#F1F3F9;}
.paletteType{
  font-size:10.5px;font-weight:700;color:#0057FF;background:#EFF4FF;
  padding:3px 8px;border-radius:999px;flex:none;min-width:52px;text-align:center;
}
.paletteMain{display:flex;flex-direction:column;min-width:0;}
.paletteLabel{font-size:14.5px;font-weight:600;color:#0A0C11;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.paletteSub{font-size:12px;color:#737C90;}
.paletteEmpty{padding:36px 20px;text-align:center;color:#737C90;font-size:14px;}

@media (max-width:560px){
  .paletteOverlay{padding:12px;padding-top:8vh;}
  .paletteList{max-height:60vh;}
}

/* ==========================================================================
   شريط الكروت الأفقي
   --------------------------------------------------------------------------
   بديل الشبكة في الصفحة الرئيسية: نفس عدد البرامج في تلت المساحة.
   بيمتد لحافة الشاشة عن قصد — بيوحي إن فيه كمان ورا الحافة فالزائر يسحب.
   ========================================================================== */
.railHead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:28px;flex-wrap:wrap;
}
.railNav{display:flex;align-items:center;gap:8px;flex:none;}
.railArrow{
  width:38px;height:38px;border-radius:999px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(20,23,30,.12);color:#3D4453;cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.railArrow:hover{background:#0A0C11;color:#fff;border-color:#0A0C11;}
.railArrow svg{width:16px;height:16px;}
/* السهم التاني بيتقلب — أيقونة واحدة بتخدم الاتجاهين */
.railArrow:last-of-type svg{transform:rotate(180deg);}

.cardRail{
  display:flex;gap:20px;overflow-x:auto;
  padding:6px 5% 20px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cardRail::-webkit-scrollbar{display:none;}
.cardRailItem{
  flex:0 0 300px;scroll-snap-align:start;
}
.cardRailItem > *{height:100%;}

@media (max-width:700px){
  .railHead{margin-bottom:20px;}
  /* الأسهم مالهاش لازمة على الموبايل — السحب بالإصبع أسرع وأطبيعي */
  .railArrow{display:none;}
  .cardRail{gap:12px;padding-bottom:16px;}
  .cardRailItem{flex:0 0 78%;}
}

/* ==========================================================================
   إعدادات المظهر — بتتحكم فيها من لوحة التحكم
   ========================================================================== */
/* إيقاف الزجاج: خلفية بيضا صلبة بدل الشفافية */
html.noGlass .siteHeader,
html.noGlass .siteRail{
  background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
}
/* قائمة الموبايل — بطاقة زجاجية دائرية عائمة تحت الهيدر الطاير مباشرة */
.mobileGlassMenu{
  position:sticky;top:80px;z-index:79;
  margin:8px 14px 0;
  padding:16px 18px;
  display:flex;flex-direction:column;gap:14px;
  max-height:calc(100vh - 96px);overflow-y:auto;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 18px 40px -16px rgba(20,23,30,.24);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .mobileGlassMenu{background:#fff;}
}

/* المسارات جوه القائمة — صف مطوي بسهم بيلف عند الفتح */
.mmTracks summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-weight:700;cursor:pointer;list-style:none;
}
.mmTracks summary::-webkit-details-marker{display:none;}
.mmChevron{display:flex;color:var(--muted);transition:transform .22s ease;}
.mmChevron svg{width:16px;height:16px;}
.mmTracks[open] .mmChevron{transform:rotate(180deg);color:var(--primary);}
.mmTracksList{
  display:flex;flex-direction:column;gap:12px;
  padding:12px 6px 4px;
}

/* الكبسولة بتفضل دائرية وطايرة حتى مع إيقاف الزجاج — بس بخلفية صلبة */
html.noGlass .siteHeader{border:1px solid rgba(20,23,30,.08);box-shadow:0 6px 20px -14px rgba(20,23,30,.14);}
html.noGlass .siteHeader.isScrolled{box-shadow:0 12px 30px -16px rgba(20,23,30,.2);}
html.noGlass .megaPanel,
html.noGlass .mobileGlassMenu{
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
}

/* ==========================================================================
   أشكال كارت البرنامج — بتتحدد من لوحة التحكم
   --------------------------------------------------------------------------
   نفس الماركب بيتنسّق بتلات طرق. الميزة إننا مابنغيّرش الجافاسكريبت
   لما تبدّل الشكل — كلاس واحد على <html> بيقلب العرض كله.
   ========================================================================== */

/* --- 2) مربع ملوّن بدل الصورة --- */
html.cardStyle-tile .imgFrame.ratioCourse{
  aspect-ratio:auto;height:64px;width:64px;
  border-radius:14px;margin:16px 16px 0;
}
html.cardStyle-tile .imgFrame.ratioCourse > img{display:none;}
html.cardStyle-tile .imgFrame.ratioCourse .coverIcon{transform:scale(.85);}
html.cardStyle-tile .courseCardBody{padding-top:12px;}

/* --- 3) صف أفقي --- */
@media (min-width:701px){
  html.cardStyle-row .gridAutoFit,
  html.cardStyle-row .gridAutoFit5{grid-template-columns:1fr;gap:12px;}
  html.cardStyle-row .gridAutoFit > a,
  html.cardStyle-row .gridAutoFit5 > a{
    display:flex;align-items:center;gap:18px;padding:14px 18px;
  }
  html.cardStyle-row .imgFrame.ratioCourse{
    aspect-ratio:1;width:72px;height:72px;flex:none;border-radius:14px;
  }
  html.cardStyle-row .courseCardBody{
    flex:1;min-width:0;padding:0;
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  }
  html.cardStyle-row .courseCardTitle{min-height:auto;}
  /* صف السعر بينتقل لآخر الصف بدل ما يكون تحت */
  html.cardStyle-row .courseCardBody > div:last-child{
    grid-column:2;grid-row:1 / span 3;
    margin-top:0 !important;padding-top:0 !important;border-top:none !important;
    flex-direction:column;align-items:flex-end;gap:6px;text-align:end;
  }
}

/* ==========================================================================
   صفحة «تواصل معنا»
   ==========================================================================
   كل النصوص والأقسام هنا بتتحكم فيها من: لوحة التحكم ← الإعدادات ←
   صفحة تواصل معنا. اللي مالوش قيمة بيختفي بدل ما يسيب مكان فاضي.
   ========================================================================== */
.ctHero{padding:64px 5% 30px;background:#fff;text-align:center;}
.ctHero .container{max-width:680px;}
.ctHeroPill{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  background:var(--primary-soft);color:var(--primary);
  font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:999px;
}
.ctHeroPill svg{width:15px;height:15px;}

.ctStats{background:#fff;padding:0 5% 34px;}
.ctStatsRow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;
}
.ctStat{text-align:center;}
.ctStat strong{display:block;font-size:26px;font-weight:800;color:var(--ink);line-height:1.2;}
.ctStat strong svg{width:24px;height:24px;color:var(--primary);}
.ctStat span{display:block;color:var(--muted);font-size:13px;margin-top:5px;}

.ctMain{padding:30px 5% 70px;}
/* الاستمارة أعرض من العمود الجانبي — هي الهدف الأساسي من الصفحة */
.ctGrid{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start;}
.ctFormCard{padding:28px;}
.ctFormHead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.ctFormHead h2{font-size:21px;font-weight:800;margin:0;}
.ctPromise{
  display:inline-flex;align-items:center;gap:6px;
  background:#E9F7EF;color:#127A4E;font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:999px;
}
.ctPromise svg{width:14px;height:14px;}

.ctField{margin-bottom:16px;}
.ctRow2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ctRow2 .ctField{margin-bottom:16px;}
.req{color:var(--danger);}

/* مجموعة الهاتف: رمز الدولة ثابت العرض والرقم بياخد الباقي */
.phoneGroup{display:flex;gap:8px;}
select.field.phoneDial{width:auto;flex:none;max-width:190px;padding-inline:10px;}
input.field.phoneNum{flex:1;min-width:0;}

/* اختيار موضوع التواصل — أزرار مش قائمة منسدلة عشان الأربع خيارات
   يبانوا كلهم من غير ما الزائر يفتح حاجة */
.topicGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.topicOpt{
  display:flex;align-items:center;gap:10px;text-align:start;
  border:2px solid var(--border);background:#fff;border-radius:var(--radius-md);
  padding:13px 14px;font-size:13.5px;font-weight:700;color:var(--ink);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.topicOpt:hover{border-color:var(--primary);}
.topicOpt:active{transform:scale(.985);}
.topicOpt.isOn{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);}
.topicIcon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:9px;background:var(--bg);color:var(--primary);
}
.topicOpt.isOn .topicIcon{background:#fff;}
.topicIcon svg{width:17px;height:17px;}

/* الحقل اللي بيظهر بعد اختيار «استفسار عن برنامج» — الحركة بتوضّح
   إنه ظهر دلوقتي نتيجة اختيار الزائر */
.ctReveal{animation:ctReveal .28s var(--ease-soft) both;}
@keyframes ctReveal{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.ctError{
  color:var(--danger);font-size:13px;font-weight:600;margin:0 0 14px;
  background:#FEF2F2;border:1px solid #FECACA;border-radius:var(--radius-sm);padding:10px 13px;
}
.ctActions{display:flex;gap:10px;flex-wrap:wrap;}
.ctActions .btn{flex:1;min-width:180px;}
.btnWa{background:#25D366;color:#fff;}
.btnWa:hover{filter:brightness(1.06);}
.btnWa svg{width:17px;height:17px;}
.ctHint{color:var(--muted);font-size:12.5px;margin:12px 0 0;line-height:1.7;}

.ctSent{text-align:center;padding:40px 10px;}
.ctSentIcon{
  width:60px;height:60px;border-radius:50%;background:#E9F7EF;color:var(--success);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.ctSentIcon svg{width:28px;height:28px;}
.ctSent h3{font-size:19px;font-weight:800;margin:0 0 8px;}
.ctSent p{color:var(--muted);font-size:14.5px;line-height:1.8;margin:0 0 20px;}

.ctAside{display:flex;flex-direction:column;gap:16px;}
.ctAsideCard{padding:22px;}
.ctAsideCard h3{font-size:15px;font-weight:800;margin:0 0 14px;}
.ctChannels{display:flex;flex-direction:column;gap:4px;}
.ctChannel{
  display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--radius-md);
  color:var(--ink);transition:background .15s ease;
}
.ctChannel:hover{background:var(--bg);}
.ctChannelIcon{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);
}
.ctChannelText{display:flex;flex-direction:column;min-width:0;}
.ctChannelText strong{font-size:13.5px;font-weight:700;}
.ctChannelText small{color:var(--muted);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;}
.ctAsideLine{
  display:flex;align-items:flex-start;gap:9px;color:var(--muted);
  font-size:13.5px;line-height:1.75;margin:0 0 10px;
}
.ctAsideLine:last-child{margin-bottom:0;}
.ctAsideLine svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--primary);}

/* ---------- أقسام التواصل ---------- */
.ctDepts{padding:60px 5%;background:#fff;}
.deptGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.deptCard{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.deptCard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary);}
.deptIcon{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary);margin-bottom:14px;
}
.deptName{font-size:16px;font-weight:800;margin-bottom:6px;}
.deptDesc{color:var(--muted);font-size:13.5px;line-height:1.75;margin:0 0 14px;}
.deptLinks{display:flex;flex-direction:column;gap:8px;}
.deptLinks a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--primary);word-break:break-all;
}
.deptLinks svg{width:15px;height:15px;flex:none;}

/* ---------- الأسئلة الشائعة ---------- */
.ctFaq{padding:60px 5%;}
.faqList{display:flex;flex-direction:column;gap:10px;}
.faqItem{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
  transition:border-color .18s ease;
}
.faqItem.isOpen{border-color:var(--primary);}
.faqQ{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:transparent;border:none;padding:17px 20px;text-align:start;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);
}
.faqQ svg{width:17px;height:17px;flex:none;color:var(--muted);transition:transform .22s ease;}
.faqItem.isOpen .faqQ svg{transform:rotate(180deg);color:var(--primary);}
.faqA{
  padding:0 20px 18px;color:var(--muted);font-size:14.5px;line-height:1.9;
  animation:ctReveal .24s var(--ease-soft) both;
}

/* ---------- الخريطة ---------- */
.ctMap{padding:0 5% 70px;}
.ctMap iframe{
  width:100%;height:380px;border:1px solid var(--border);border-radius:var(--radius-lg);display:block;
}

@media (max-width:900px){
  .ctGrid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .ctHero{padding:44px 5% 24px;}
  .ctMain{padding:24px 5% 50px;}
  .ctFormCard{padding:20px 16px;}
  .ctRow2{grid-template-columns:1fr;gap:0;}
  /* الأربع مواضيع فوق بعض على الموبايل — جنب بعض بيقصّ الكلام */
  .topicGrid{grid-template-columns:1fr;}
  .ctActions .btn{flex:1 1 100%;min-width:0;}
  /* رمز الدولة ياخد سطر لوحده عشان الرقم يفضل واسع ومقروء */
  .phoneGroup{flex-wrap:wrap;}
  select.field.phoneDial{max-width:none;width:100%;}
  input.field.phoneNum{flex:1 1 100%;}
  .ctDepts,.ctFaq{padding:44px 5%;}
  .ctMap iframe{height:260px;}
}
@media (prefers-reduced-motion: reduce){
  .ctReveal,.faqA{animation:none;}
}

/* ==========================================================================
   استمارة «سجّل الآن»
   ==========================================================================
   الزائر بيضغط زر واحد، يكتب بياناته، وبعدين يقرر إزاي يكمّل:
   يبعت الطلب، يبعته واتساب، أو يدفع بالبطاقة على طول.
   ========================================================================== */

/* ملخّص اللي بيسجّل فيه — بيمنع سؤال «أنا بسجّل في إيه بالظبط؟» */
.enrollSummary{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:14px 16px;margin-bottom:16px;
}
.enrollSummaryRow{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:13px;padding:5px 0;
}
.enrollSummaryRow span{color:var(--muted);flex:none;}
.enrollSummaryRow strong{font-weight:700;color:var(--ink);text-align:end;}
.enrollSummaryPrice{
  border-top:1px solid var(--border);margin-top:5px;padding-top:9px;
}
.enrollSummaryPrice strong{color:var(--primary);font-size:17px;font-weight:800;}

/* الزرار المقسوم: إرسال + أيقونة واتساب ملزوقين كوحدة واحدة */
.splitSend{display:flex;gap:0;}
.splitSendMain{
  flex:1;min-width:0;
  border-start-end-radius:0;border-end-end-radius:0;
}
.splitSendWa{
  flex:none;width:52px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  border-radius:999px;
  border-start-start-radius:0;border-end-start-radius:0;
  /* خط فاصل رفيع يوضّح إنهم زرارين مش زرار واحد */
  box-shadow:inset 1px 0 0 rgba(255,255,255,.35);
  transition:filter .15s ease, transform .15s ease;
}
[dir="rtl"] .splitSendWa{box-shadow:inset -1px 0 0 rgba(255,255,255,.35);}
.splitSendWa:hover{filter:brightness(1.07);}
.splitSendWa:active{transform:scale(.97);}
.splitSendWa svg{width:20px;height:20px;}
.splitSendWa:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* «ادفع الآن» — تصميم مختلف عن الأزرق عشان مايتلخبطش مع «إرسال الطلب»،
   الاتنين إجراءات مختلفة تمامًا */
.btnPayNow{
  /* الإطار بـinset box-shadow مش border: الـborder بيزوّد ارتفاع الزرار
     4px فيطلع مش مساوي للزرار المقسوم فوقه، والظل الداخلي بيرسم نفس
     الإطار من غير ما ياخد مساحة في التخطيط */
  background:#fff;color:var(--ink);border:none;margin-top:2px;
  box-shadow:inset 0 0 0 2px var(--ink);
}
.btnPayNow:hover{background:var(--ink);color:#fff;}

@media (max-width:420px){
  .splitSendWa{width:46px;}
}

/* ==========================================================================
   شاشة إتمام الدفع (لوحين)
   ==========================================================================
   الهدف الأساسي هنا: العميل يشوف كل حاجة من غير سكرول.
   ديسكتوب: تفاصيل البرنامج والصورة جهة، والبيانات والدفع الجهة التانية.
   موبايل: عمود واحد، والصورة بتتحول لشريط أفقي صغير بدل ما تاخد نص الشاشة.
   ========================================================================== */
.checkoutBox{
  background:#fff;border-radius:var(--radius-lg);
  width:100%;max-width:900px;max-height:92vh;
  position:relative;overflow:hidden;   /* الزوايا تفضل مدوّرة فوق المحتوى */
  box-shadow:0 30px 70px -20px rgba(12,21,38,.35);
}
.checkoutClose{
  position:absolute;top:12px;inset-inline-end:12px;z-index:3;
  width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:0 2px 8px rgba(12,21,38,.16);
}
.checkoutClose:hover{background:#fff;}

.checkoutGrid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);}

/* ---------- اللوح الجانبي: صورة + تفاصيل البرنامج ---------- */
.checkoutAside{
  background:var(--bg);border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;min-width:0;
}
.checkoutMedia{position:relative;overflow:hidden;flex:none;}
.checkoutMedia img{width:100%;height:100%;object-fit:cover;}
.checkoutMedia .coverIcon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.9);transform:scale(1.7);
}
.checkoutAsideBody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;min-width:0;flex:1;}

/* بلوك الطمأنة أسفل لوح التفاصيل — ديسكتوب بس */
.checkoutTrust{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:11px;
}
.checkoutTrustItem{
  display:flex;align-items:flex-start;gap:9px;
  color:var(--muted);font-size:12.5px;line-height:1.75;
}
.checkoutTrustItem > span{
  width:28px;height:28px;border-radius:9px;flex:none;
  background:#fff;border:1px solid var(--border);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.checkoutTrustItem > span svg{width:14px;height:14px;}
.checkoutTrustItem.isGreen{color:#127A4E;font-weight:600;}
.checkoutTrustItem.isGreen > span{color:#127A4E;background:#E9F7EF;border-color:#A8E0C0;}
.checkoutTrustItem strong{font-weight:800;}
.checkoutTrack{
  color:var(--primary);font-weight:700;font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.checkoutTitle{
  font-size:18px;font-weight:800;line-height:1.45;margin:0;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.checkoutFacts{display:flex;flex-wrap:wrap;gap:7px;}
.checkoutFacts span{
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:5px 11px;font-size:12px;font-weight:600;color:var(--muted);
}
.checkoutFacts svg{width:13px;height:13px;color:var(--primary);}
.checkoutPrice{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-top:1px solid var(--border);padding-top:12px;margin-top:2px;
  font-size:13px;color:var(--muted);
}
.checkoutPriceVal{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.checkoutPriceVal del{color:var(--muted);font-size:12.5px;opacity:.75;}
.checkoutPriceVal strong{font-size:20px;font-weight:800;color:var(--primary);}
.checkoutAccred{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}

/* ---------- اللوح الرئيسي: البيانات والدفع ---------- */
.checkoutMain{
  padding:24px;min-width:0;
  display:flex;flex-direction:column;
  /* لو المحتوى طال (رسالة خطأ + كوبون مفتوح) بيسكرول اللوح ده لوحده
     بدل ما الشاشة كلها تتحرك */
  max-height:92vh;overflow-y:auto;
}
.checkoutHeading{font-size:17px;font-weight:800;margin:0 0 16px;padding-inline-end:34px;}
.checkoutMain .ctField,
.checkoutMain > div[style*="flex-direction:column"]{min-width:0;}
.checkoutSecure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  color:var(--muted);font-size:11.5px;text-align:center;margin:14px 0 0;
}
.checkoutSecure svg{width:13px;height:13px;}

/* رابط الكوبون المطوي — بديل خفيف لحقل ظاهر دايمًا */
.couponToggle{
  align-self:flex-start;background:none;border:none;cursor:pointer;padding:2px 0;
  color:var(--primary);font-family:inherit;font-size:13px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- موبايل: عمود واحد يدخل في حدود الشاشة ---------- */
@media (max-width:820px){
  .modalOverlay:has(.checkoutBox){padding:0;align-items:flex-end;}
  .checkoutBox{
    max-width:none;max-height:100dvh;height:100dvh;
    border-radius:0;display:flex;flex-direction:column;
  }
  .checkoutGrid{
    grid-template-columns:1fr;grid-template-rows:auto 1fr;
    flex:1;min-height:0;   /* لازم عشان اللوح الداخلي يقدر يسكرول */
  }
  .checkoutAside{
    border-inline-end:none;border-bottom:1px solid var(--border);
    /* الصورة الكبيرة بتاكل نص الشاشة على الموبايل — بنحوّلها لصف أفقي */
    flex-direction:row;align-items:center;gap:12px;padding:12px 14px;
  }
  .checkoutMedia{
    width:64px;height:64px;border-radius:12px;flex:none;aspect-ratio:auto;
  }
  .checkoutMedia .coverIcon{transform:scale(1.1);}
  .checkoutAsideBody{padding:0;gap:4px;flex:1;min-width:0;}
  .checkoutTitle{font-size:15px;-webkit-line-clamp:1;}
  /* التفاصيل والاعتمادات مش ضرورية في لحظة الدفع على شاشة صغيرة */
  .checkoutFacts,.checkoutAccred,.checkoutTrust{display:none;}
  .checkoutPrice{border-top:none;padding-top:0;margin-top:2px;}
  .checkoutPriceVal strong{font-size:16px;}
  .checkoutMain{
    max-height:none;padding:16px 14px 20px;
    flex:1;min-height:0;overflow-y:auto;
  }
  .checkoutHeading{font-size:15px;margin-bottom:12px;}
  /* حقول أضيق شوية عشان الاستمارة كلها تبان من غير نزول */
  .checkoutMain input.field{padding-top:9px;padding-bottom:9px;}
  .checkoutMain label.fieldLabel{margin-bottom:4px;}
  .checkoutSecure{margin-top:10px;}
}
@media (max-width:820px) and (max-height:680px){
  /* شاشات قصيرة: نلغي شريط البرنامج كمان ونضغط المسافات */
  .checkoutAside{padding:9px 14px;}
  .checkoutMedia{width:46px;height:46px;}
  .checkoutMain{padding:12px 14px 16px;}
}

/* الكوبون المطبّق في شاشة الدفع — سطر واحد، لأن الإجمالي بعد الخصم
   بيظهر في اللوح الجانبي */
.couponApplied{
  display:flex;align-items:center;gap:10px;
  background:#E9F7EF;border:1px solid #A8E0C0;border-radius:var(--radius-sm);
  padding:9px 12px;font-size:12.5px;font-weight:700;color:#1B7F4F;
}
.couponApplied > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.couponSaved{flex:none;}
.couponApplied button{
  flex:none;border:none;background:none;cursor:pointer;color:#1B7F4F;
  display:flex;align-items:center;padding:2px;border-radius:6px;opacity:.7;
}
.couponApplied button:hover{opacity:1;background:rgba(27,127,79,.12);}
.couponApplied button svg{width:14px;height:14px;}

/* على الشاشات القصيرة بنضغط المسافات أكتر عشان تفضل من غير سكرول حتى
   في أطول حالة (كوبون مطبّق + رسالة خطأ) */
@media (max-width:820px) and (max-height:700px){
  .checkoutMain .ctHint{display:none;}
  /* الحقول بقت خمسة بعد ما ضفنا العنوان — بنضيّق المسافة بينهم
     شوية عشان تفضل الاستمارة كلها بادية من غير سكرول على الشاشات
     القصيرة (اختُبرت على 360×640) */
  .checkoutMain > div[style*="gap:14px"]{gap:8px !important;}
  .checkoutSecure{margin-top:8px;}
  .checkoutMain .ctError{padding:7px 11px;margin-bottom:10px;}
}

/* ==========================================================================
   علامات البطاقات وقفل الأمان جوه زر الدفع
   ==========================================================================
   القفل والنص على جهة، وشعارات الشبكات على الجهة التانية — العميل يعرف
   إن بطاقته مقبولة وإن المعاملة مؤمّنة قبل ما يضغط.
   ========================================================================== */
.btnPayNow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-inline:16px;
}
.payNowText{display:inline-flex;align-items:center;gap:7px;min-width:0;}
.payNowText svg{width:15px;height:15px;flex:none;}

.payBrands{display:inline-flex;align-items:center;gap:4px;flex:none;}
.payBrand{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:22px;padding:2px 3px;border-radius:4px;
  /* خلفية بيضا ثابتة: الشعارات ليها ألوانها الرسمية، فلازم أرضية واحدة
     في الحالتين — الزر أبيض عادي وبيبقى كحلي عند الهوفر */
  background:#fff;box-shadow:0 0 0 1px rgba(12,21,38,.12);
}
.payBrand svg{width:100%;height:100%;display:block;}

/* عند الهوفر الزر بيبقى كحلي — الشعارات بتفضل على أرضية بيضا وتبان أوضح */
.btnPayNow:hover .payBrand{box-shadow:0 0 0 1px rgba(255,255,255,.25);}

@media (max-width:820px){
  .btnPayNow{padding-inline:12px;gap:8px;}
  /* المساحة ضيقة على الموبايل — الشعارات بتصغر بدل ما النص يتقص */
  .payBrand{width:29px;height:19px;}
  .payBrands{gap:3px;}
}
@media (max-width:360px){
  /* شاشات صغيرة جدًا: نسيب فيزا وماستركارد بس، القفل والنص أهم */
  .payBrand:nth-child(n+3){display:none;}
}

/* ==========================================================================
   زرّي «سجّل الطلب» و«عبر الواتساب»
   ==========================================================================
   زرّين متساويين جنب بعض، الاتنين أسود — الاختيار بينهم قناة مش أهمية،
   فمفيش سبب واحد يبان أقوى من التاني.
   ========================================================================== */
.sendRow{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btnSend{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;padding-inline:14px;min-width:0;
}
.btnSend:hover{filter:brightness(1.25);}
.btnSend:disabled{opacity:.55;}
.btnSend > span:first-child{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
/* لوجو الواتساب بنفس معاملة شعارات البطاقات: أرضية بيضا ثابتة عشان
   اللون الرسمي يفضل واضح على الزر الأسود */
.waBrand{width:26px;height:22px;padding:2px;}
.waBrand svg{width:100%;height:100%;}

/* ==========================================================================
   عمود المحتوى في صفحة البرنامج
   ==========================================================================
   الإحصائيات وبانر الختام بقوا جوه العمود عشان الكارت الجانبي يفضل لازق
   لحد «برامج ذات صلة».
   ========================================================================== */
.courseColBlock{margin-top:28px;}
/* البانر كان بعرض الصفحة كلها، ودلوقتي جوه عمود أضيق — بنقلّل الحشو
   عشان يفضل متوازن مش مزحوم */
.courseColBlock .courseClosingCta{padding:30px 26px !important;}
.courseColBlock .courseClosingCta h2{font-size:21px !important;}

@media (max-width:820px){
  .courseColBlock{margin-top:22px;}
  .courseColBlock .courseClosingCta{padding:26px 18px !important;}
  .courseColBlock .courseClosingCta h2{font-size:19px !important;}
  /* على الموبايل الزرارين بيفضلوا جنب بعض — النص قصير وبيتسع */
  .sendRow{gap:7px;}
  .btnSend{padding-inline:10px;font-size:13px;}
  .waBrand{width:23px;height:19px;}
}
@media (max-width:360px){
  /* مساحة ضيقة جدًا: اللوجو بيختفي والنص هو اللي يفضل */
  .waBrand{display:none;}
}

/* ==========================================================================
   اختيار نظام الدراسة في المعاينة السريعة
   ==========================================================================
   الزائر بيختار من هنا، والسعر بيتحدّث فورًا، والاختيار بيتنقل معاه لشاشة
   الدفع. الشرايح مضغوطة عن قصد — المعاينة المفروض تبان كلها من غير تمرير.
   ========================================================================== */
.qvMethods{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--border);padding-top:12px;margin-top:2px;
}
.qvMethodsLabel{color:var(--muted);font-size:12px;font-weight:700;flex:none;}
.qvMethodsRow{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0;}
.qvMethodChip{
  display:inline-flex;align-items:center;gap:7px;
  border:1.5px solid var(--border);background:#fff;border-radius:999px;
  padding:6px 12px;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:border-color .15s ease, background .15s ease;
}
.qvMethodChip:hover{border-color:var(--primary);}
.qvMethodChip.isOn{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);}
.qvMethodChip b{font-weight:800;}
/* السعر جوه الشريحة أصغر من سعر الفوتر — ده رقم مساعد للمقارنة مش
   السعر الأساسي، والفوتر هو اللي بيعرض المختار بحجم كامل */
.qvMethodChip b .riyalAmount{font-size:12.5px;}

@media (max-width:760px){
  .qvMethods{gap:7px;padding-top:10px;}
  .qvMethodsLabel{width:100%;}
  .qvMethodChip{padding:6px 10px;font-size:12px;}
}

/* ==========================================================================
   المعاينة السريعة على الموبايل — الأزرار لازم تفضل بادية
   ==========================================================================
   صف اختيار نظام الدراسة زوّد ارتفاع المحتوى، والأزرار نزلت تحت حدود
   الشاشة. الحل مش قص محتوى (ده هيرجع يقع تاني مع عنوان أطول أو تليفون
   أصغر) — الفوتر بقى ملزوق في آخر الصندوق، فزر «سجّل الآن» بادي دايمًا
   مهما طال اللي فوقه.
   ========================================================================== */
@media (max-width:760px){
  /* الليبل بيلف لسطر لوحده وبياخد ~24px — الشرايح نفسها موضّحة
     (اسم النظام وسعره مكتوبين جوّاها) فمش محتاجاه على الشاشة الصغيرة */
  .qvMethodsLabel{display:none;}
  .qvMethods{padding-top:10px;gap:6px;}
  .qvMethodChip{padding:6px 11px;}

  .qvFooter{
    position:sticky;bottom:0;z-index:2;
    background:#fff;margin-top:auto;
    /* الحشو السفلي بيغطي حافة الصندوق تحت الفوتر الملزوق */
    padding-bottom:20px;
    /* ظل خفيف فوق الفوتر يوضّح إن فيه محتوى بيعدّي تحته */
    box-shadow:0 -8px 16px -8px rgba(20,23,30,.14);
  }
  /* الحشو السفلي اتنقل للفوتر نفسه */
  .qvContent{padding-bottom:0;}
}

/* ==========================================================================
   شروط الالتحاق لدى الجهة
   ==========================================================================
   كل جهة كارت قابل للفتح: لوجو الجهة + «شروط الالتحاق — اسم الجهة»،
   والفتح بيعرض الشروط نقاط. لو البرنامج مستدعي جهة واحدة بس بتيجي
   مفتوحة جاهزة — النقرة الزيادة مالهاش لازمة.
   ========================================================================== */
.eligList{display:flex;flex-direction:column;gap:10px;}
.eligItem{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  overflow:hidden;transition:border-color .18s ease;
}
.eligItem[open]{border-color:var(--primary);}
.eligItem summary{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:700;color:var(--ink);
}
.eligItem summary::-webkit-details-marker{display:none;}
.eligBadge{
  width:42px;height:42px;border-radius:12px;flex:none;
  background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.eligBadge img{max-width:32px;max-height:32px;object-fit:contain;}
.eligBadge b{font-size:11px;font-weight:800;direction:ltr;}
.eligTitle{flex:1;min-width:0;line-height:1.5;}
.eligChevron{flex:none;color:var(--muted);display:flex;transition:transform .22s ease;}
.eligChevron svg{width:17px;height:17px;}
.eligItem[open] .eligChevron{transform:rotate(180deg);color:var(--primary);}

/* سطر الاسترداد في كارت التسجيل — تحت السعر، أخضر زي كل عناصر
   «فلوس راجعة» في الموقع */
.cardRefund{
  display:flex;align-items:center;gap:8px;
  background:#E9F7EF;border:1px solid #A8E0C0;border-radius:var(--radius-sm);
  padding:9px 12px;margin:-6px 0 16px;
  font-size:12px;font-weight:700;color:#127A4E;
}
.cardRefundIcon{display:flex;flex:none;}
.cardRefundIcon svg{width:15px;height:15px;}
.cardRefundText{flex:1;min-width:0;line-height:1.6;}
.cardRefund strong{flex:none;font-size:14px;font-weight:800;color:#127A4E;}

/* سطر قيمة الاسترداد — أبرز عنصر في الكارت لأنه أقوى حجة بيع:
   «هتسترد X من ثمن البرنامج» */
.eligAmount{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 18px 4px;padding:11px 14px;
  background:#E9F7EF;border:1px solid #A8E0C0;border-radius:var(--radius-sm);
  font-size:13px;font-weight:700;color:#127A4E;
}
.eligAmount strong{font-size:17px;font-weight:800;color:#127A4E;}

.eligPoints{
  margin:0;padding:2px 18px 16px;list-style:none;
}
/* قايمة «ماذا ستحصل» — نفس نقاط الـ✓ لكن مش جوه كارت قابل للطي */
.eligPoints.outcomeList{padding:0;}
.eligPoints.outcomeList li{font-size:14.5px;color:var(--ink);}

/* الأسئلة الشائعة الثابتة تحت التبويبات — فاصل بيوضّح إنها مش تبع
   التبويب المفتوح */
.courseFaqStandalone{margin-top:34px;padding-top:26px;border-top:1px solid var(--border);}
.eligPoints li{
  position:relative;padding:7px 0 7px;padding-inline-start:26px;
  color:var(--muted);font-size:14px;line-height:1.85;
  border-top:1px dashed var(--border);
}
.eligPoints li:first-child{border-top:none;}
/* علامة صح بدل النقطة العادية — دي متطلبات بيتشيّك عليها مش سرد */
.eligPoints li::before{
  content:"✓";position:absolute;inset-inline-start:0;top:8px;
  width:18px;height:18px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary);
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

@media (max-width:640px){
  .eligItem summary{padding:12px 13px;font-size:13.5px;gap:10px;}
  .eligBadge{width:36px;height:36px;border-radius:10px;}
  .eligBadge img{max-width:27px;max-height:27px;}
  .eligPoints{padding:0 14px 14px;}
  .eligPoints li{font-size:13.5px;}
}

/* ==========================================================================
   صفحة سياسة الاسترجاع
   ==========================================================================
   البنود من الإعدادات — الصفحة بترقّمها وتعرضها كروت، والتنويه الهام
   في صندوق مميز بحدود برتقالية (نفس روح المستند الرسمي بس بلغة الموقع).
   ========================================================================== */
.rpHero{padding:64px 5% 34px;background:#fff;text-align:center;}
.rpHero .container{max-width:680px;}
.rpEn{color:var(--muted);font-weight:600;font-size:.62em;letter-spacing:0;direction:ltr;display:inline-block;}

.rpBody{padding:38px 5% 80px;}
.rpClauses{display:flex;flex-direction:column;gap:14px;}
.rpClause{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px 22px;
}
.rpNum{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;
}
.rpClauseBody{min-width:0;}
.rpClauseBody h2{font-size:16px;font-weight:800;margin:6px 0 8px;color:var(--ink);}
.rpClauseBody p{color:var(--muted);font-size:14.5px;line-height:1.95;margin:0;}

/* التنويه الهام — نفس الصندوق البرتقالي في المستند الرسمي */
.rpNotice{
  margin-top:26px;background:#FFF9F5;
  border:1.5px solid var(--coral, #F96A59);border-radius:var(--radius-lg);
  padding:20px 22px;text-align:center;
}
.rpNoticeTitle{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--coral, #F96A59);font-weight:800;font-size:15px;margin-bottom:10px;
}
.rpNoticeTitle svg{width:17px;height:17px;}
.rpNotice p{color:var(--ink);font-size:14.5px;line-height:2;margin:0;}

.rpCta{
  margin-top:26px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  background:var(--primary-dark, #003366);color:#fff;
  border-radius:var(--radius-lg);padding:24px 26px;
}
.rpCta h3{font-size:17px;font-weight:800;margin:0 0 6px;color:#fff;}
.rpCta p{color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.8;margin:0;}
.rpCta .btn{background:#fff;color:var(--primary);flex:none;}

/* رابط السياسة في شاشة الدفع */
.checkoutSecure a{color:var(--primary);font-weight:700;}

/* شارة الساعات جنب اسم البرنامج */
.titleHoursBadge{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  background:var(--primary-soft);color:var(--primary);
  border-radius:999px;padding:6px 13px;
  font-size:13px;font-weight:700;line-height:1;
}
.titleHoursBadge svg{width:14px;height:14px;}

@media (max-width:640px){
  .rpHero{padding:44px 5% 24px;}
  .rpBody{padding:26px 5% 56px;}
  .rpClause{padding:16px;gap:12px;}
  .rpNum{width:32px;height:32px;border-radius:10px;font-size:14px;}
  .rpCta{padding:20px 18px;}
  .rpCta .btn{width:100%;}
  .titleHoursBadge{font-size:12px;padding:5px 11px;}
}

/* ==========================================================================
   بوب أب السياسات (جوه شاشة الدفع) + صف الموافقة
   ========================================================================== */
/* فوق شاشة الدفع نفسها (z-index بتاعها 200) */
.policiesOverlay{z-index:320;}
.policiesBox{
  background:#fff;border-radius:var(--radius-lg);
  width:100%;max-width:640px;max-height:88vh;
  position:relative;display:flex;flex-direction:column;
  padding:22px 22px 18px;
  box-shadow:0 30px 70px -20px rgba(12,21,38,.4);
}
.policiesTitle{font-size:17px;font-weight:800;margin:0 0 14px;padding-inline-end:36px;}
.policyTabs{margin-bottom:14px;flex:none;}
.policiesBody{
  flex:1;min-height:0;overflow-y:auto;
  /* البنود جوه البوب أب أصغر شوية من الصفحة الكاملة */
}
.policiesBody .rpClause{padding:14px 16px;gap:12px;}
.policiesBody .rpNum{width:30px;height:30px;border-radius:9px;font-size:13px;}
.policiesBody .rpClauseBody h2{font-size:14px;margin:4px 0 6px;}
.policiesBody .rpClauseBody p{font-size:13.5px;line-height:1.85;}
.policiesFooter{
  flex:none;display:flex;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border);
}
.policiesFooter .btn{flex:1;}

/* صف الموافقة في شاشة الدفع */
.agreeRow{
  display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-size:12.5px;color:var(--muted);line-height:1.8;
}
.agreeRow input{
  width:17px;height:17px;flex:none;margin-top:3px;
  accent-color:var(--primary);cursor:pointer;
}
.agreeRow a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

@media (max-width:640px){
  .policiesOverlay{padding:0;align-items:flex-end;}
  .policiesBox{max-width:none;max-height:92dvh;border-radius:22px 22px 0 0;padding:18px 14px 14px;}
  .policiesBody .rpClause{padding:12px;}
}

/* ==========================================================================
   صفحة دراية الأعمال (B2B)
   ==========================================================================
   لغة بصرية أثقل شوية من باقي الموقع — العميل هنا شركة مش فرد، والهيرو
   الكحلي الغامق بيدي الجدية المطلوبة. كل المحتوى من الإعدادات.
   ========================================================================== */
.bizHero{
  background:linear-gradient(135deg, var(--primary-dark, #003366) 0%, #0A1E3D 55%, #0C1526 100%);
  color:#fff;padding:74px 5% 66px;
}
.bizHeroGrid{
  display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;
}
.bizBadge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;border-radius:999px;padding:8px 16px;
  font-size:13px;font-weight:700;margin-bottom:20px;
}
.bizBadge svg{width:15px;height:15px;}
.bizHero h1{font-size:38px;font-weight:800;line-height:1.4;margin:0 0 16px;color:#fff;}
.bizHero p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.95;margin:0 0 28px;max-width:520px;}
.bizHeroBtns{display:flex;gap:10px;flex-wrap:wrap;}
.bizBtnGhost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.35);}
.bizBtnGhost:hover{background:rgba(255,255,255,.18);}

.bizStatsCard{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:26px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;
}
.bizStat strong{display:block;font-size:30px;font-weight:800;color:#fff;direction:ltr;text-align:end;}
[dir="rtl"] .bizStat strong{text-align:right;}
.bizStat span{display:block;color:rgba(255,255,255,.72);font-size:12.5px;margin-top:5px;line-height:1.6;}

/* ---------- الخدمات ---------- */
.bizServices{padding:70px 5%;}
.bizGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.bizCard{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bizCard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary);}
.bizCardIcon{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:13px;
  background:var(--primary-soft);color:var(--primary);margin-bottom:16px;
}
.bizCardIcon svg{width:22px;height:22px;}
.bizCard h3{font-size:16.5px;font-weight:800;margin:0 0 8px;}
.bizCard p{color:var(--muted);font-size:14px;line-height:1.85;margin:0;}

/* ---------- لماذا نحن + القطاعات ---------- */
.bizWhy{padding:70px 5%;background:#fff;}
.bizWhyGrid{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:start;}
.bizSectors{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;
}
.bizSectors h3{font-size:15px;font-weight:800;margin:0 0 16px;}
.bizSectorChips{display:flex;flex-wrap:wrap;gap:8px;}
.bizSectorChips span{
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:600;color:var(--ink);
}

/* ---------- الخطوات ---------- */
.bizHow{padding:70px 5%;}
.bizSteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.bizStep{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px;position:relative;
}
.bizStepNum{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:11px;
  background:var(--primary);color:#fff;font-size:15px;font-weight:800;margin-bottom:14px;
}
.bizStep h3{font-size:15.5px;font-weight:800;margin:0 0 8px;}
.bizStep p{color:var(--muted);font-size:13.5px;line-height:1.85;margin:0;}

/* ---------- الفورم الختامي ---------- */
.bizCta{
  padding:70px 5% 80px;
  background:linear-gradient(135deg, var(--primary-dark, #003366) 0%, #0C1526 100%);
}
.bizCtaGrid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center;}
.bizCtaText h2{font-size:30px;font-weight:800;color:#fff;margin:0 0 12px;}
.bizCtaText p{color:rgba(255,255,255,.82);font-size:15px;line-height:1.95;margin:0 0 28px;}
.bizAccred > span{display:block;color:rgba(255,255,255,.6);font-size:12.5px;font-weight:700;margin-bottom:12px;}
.bizAccredRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* مربع «+N» — بنعرض 4 لوجوهات بس والباقي وراه: الوقوف بالماوس أو الضغط
   (على الهاتف) بيفتح لوحة فيها الباقي */
.bizMore{position:relative;display:inline-flex;cursor:pointer;}
.bizMoreTile{
  width:40px;height:40px;border-radius:14px;flex:none;
  background:#fff;color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;direction:ltr;
  transition:transform .18s ease;
}
.bizMore:hover .bizMoreTile{transform:translateY(-2px);}
.bizMorePop{
  position:absolute;bottom:calc(100% + 10px);inset-inline-end:0;z-index:6;
  display:none;flex-wrap:wrap;gap:8px;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:10px;max-width:min(250px, 76vw);
  box-shadow:0 14px 34px -10px rgba(12,21,38,.35);
}
/* سهم صغير تحت اللوحة بيربطها بالمربع بصريًا */
.bizMorePop::after{
  content:"";position:absolute;top:100%;inset-inline-end:14px;
  border:7px solid transparent;border-top-color:#fff;
}
.bizMore:hover .bizMorePop,
.bizMore:focus-visible .bizMorePop,
.bizMore.isOpen .bizMorePop{display:flex;}
.bizFormCard{padding:26px;}

@media (max-width:900px){
  .bizHeroGrid,.bizWhyGrid,.bizCtaGrid{grid-template-columns:1fr;gap:30px;}
  .bizHero{padding:50px 5% 46px;}
  .bizHero h1{font-size:29px;}
  .bizServices,.bizWhy,.bizHow{padding:50px 5%;}
  .bizCta{padding:50px 5% 60px;}
  .bizStatsCard{grid-template-columns:repeat(2,1fr);padding:20px;}
  .bizStat strong{font-size:24px;}
}

/* ==========================================================================
   صفحة التحقق من الشهادة
   ==========================================================================
   بتشارك هيرو صفحات السياسات (rpHero) — والإضافات هنا: صندوق البحث،
   وكروت النتائج (صورة الشهادة + بياناتها + شارة التوثيق الخضرا).
   ========================================================================== */
.vfSearch{
  display:flex;gap:8px;max-width:520px;margin:26px auto 0;
}
.vfSearch input{flex:1;min-width:0;text-align:center;font-weight:700;letter-spacing:.5px;}
.vfSearch .btn{flex:none;padding-inline:26px;}
.vfHint{color:var(--muted);font-size:12.5px;margin:12px 0 0;}

.vfBody{padding:10px 5% 80px;}
.vfCount{color:var(--muted);font-size:14px;margin:20px 0 14px;text-align:center;}
.vfCount strong{color:var(--primary);}

.vfList{display:flex;flex-direction:column;gap:18px;margin-top:20px;}
.vfCard{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;overflow:hidden;
}
.vfBadgeRow{margin-bottom:16px;}
.vfVerified{
  display:inline-flex;align-items:center;gap:8px;
  background:#E9F7EF;border:1px solid #A8E0C0;color:#127A4E;
  border-radius:999px;padding:8px 16px;font-size:13px;font-weight:800;
}
.vfVerified svg{width:18px;height:18px;}

.vfGrid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:start;}
.vfImage{
  display:block;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:var(--bg);
}
.vfImage img{width:100%;display:block;}
.vfNoImage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:200px;color:var(--muted);font-size:13px;
}
.vfNoImage svg{width:34px;height:34px;opacity:.5;}

.vfInfo h2{font-size:22px;font-weight:800;margin:0 0 4px;}
.vfNameEn{color:var(--muted);font-size:14px;font-weight:600;margin-bottom:14px;}
.vfRows{display:flex;flex-direction:column;}
.vfRows > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px dashed var(--border);font-size:14px;
}
.vfRows > div:last-child{border-bottom:none;}
.vfRows span{color:var(--muted);font-size:12.5px;font-weight:600;flex:none;}
.vfRows strong{font-weight:700;text-align:end;word-break:break-word;}

.vfNote{
  display:flex;align-items:flex-start;gap:8px;justify-content:center;
  color:var(--muted);font-size:13px;line-height:1.8;margin:20px 0 0;text-align:center;
}
.vfNote svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--primary);}

.vfEmpty{
  text-align:center;padding:40px 20px;margin-top:20px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
}
.vfEmptyIcon{
  width:56px;height:56px;border-radius:50%;background:var(--bg);color:var(--muted);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.vfEmpty p{color:var(--muted);font-size:14.5px;line-height:1.9;max-width:420px;margin:0 auto 18px;}

@media (max-width:720px){
  .vfSearch{flex-direction:column;}
  .vfGrid{grid-template-columns:1fr;gap:16px;}
  .vfCard{padding:16px;}
  .vfInfo h2{font-size:19px;}
}

/* ==========================================================================
   العرض البريميوم لنتيجة التحقق
   ==========================================================================
   الكارت بإطار متدرج (أزرق ← تركوازي) وختم توثيق بارز — الشهادة وثيقة
   رسمية والعرض لازم يليق بيها.
   ========================================================================== */
.vfCard.vfPremium{
  border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, var(--primary) 0%, var(--teal, #22DCE0) 60%, var(--primary-dark, #003366) 100%) border-box;
  box-shadow:0 20px 46px -18px rgba(0,51,102,.22);
  padding:0;overflow:hidden;
}

/* صف الختم — شريط علوي بخلفية خفيفة متدرجة */
.vfSealRow{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  background:linear-gradient(135deg, rgba(0,87,255,.06), rgba(34,220,224,.05));
  border-bottom:1px solid var(--border);
}
.vfSeal{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark, #003366));
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -6px rgba(0,87,255,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.vfSeal svg{width:26px;height:26px;}
.vfSealText{flex:1;min-width:0;}
.vfSealText strong{display:block;font-size:15px;font-weight:800;color:var(--ink);}
.vfSealText span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.vfCodeChip{
  flex:none;background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:7px 14px;font-size:12.5px;font-weight:800;color:var(--primary);
  letter-spacing:.5px;
}

.vfPremium .vfGrid{padding:20px;}

/* الصورة بإطار «باسبرتو» متدرج + تلميح تكبير عند المرور */
.vfPremium .vfImage{
  position:relative;padding:8px;
  background:linear-gradient(135deg, rgba(0,87,255,.10), rgba(34,220,224,.08));
  border:none;
}
.vfPremium .vfImage img{border-radius:8px;transition:transform .25s ease;}
.vfPremium .vfImage:hover img{transform:scale(1.015);}
.vfZoomHint{
  position:absolute;bottom:14px;inset-inline-start:14px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(12,21,38,.72);color:#fff;border-radius:999px;
  padding:6px 12px;font-size:11.5px;font-weight:700;
  opacity:0;transition:opacity .2s ease;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.vfZoomHint svg{width:12px;height:12px;}
.vfPremium .vfImage:hover .vfZoomHint{opacity:1;}

.vfGrantedTo{color:var(--muted);font-size:12.5px;font-weight:600;margin-bottom:6px;}
.vfPremium .vfInfo h2{
  font-size:24px;
  background:linear-gradient(135deg, var(--ink), var(--primary-dark, #003366));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vfProgram{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--primary-soft);color:var(--primary);
  border-radius:10px;padding:9px 14px;margin:12px 0 6px;
  font-size:13.5px;font-weight:700;line-height:1.6;
}
.vfProgram svg{width:16px;height:16px;flex:none;}

/* كارت المتدرب الرأسي — البيانات الأساسية مثبتة مرة واحدة فوق الشهادات */
.vfStudentCard{margin-bottom:18px;}
.vfStudentBody{padding:22px 20px;text-align:center;}
.vfStudentBody h2{
  font-size:26px;font-weight:800;margin:0 0 4px;
  background:linear-gradient(135deg, var(--ink), var(--primary-dark, #003366));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vfStudentBody .vfNameEn{margin-bottom:14px;}
.vfCertsCount{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--primary-soft);color:var(--primary);
  border-radius:999px;padding:8px 16px;font-size:13px;font-weight:800;
}
.vfCertsCount svg{width:15px;height:15px;}

/* شريط أنحف لكروت الشهادات لما البيانات الأساسية مثبتة فوق —
   عنوانه اسم البرنامج نفسه بدل تكرار «شهادة موثقة» */
.vfSealSlim{padding:12px 16px;}
.vfSeal.vfSealSm{width:38px;height:38px;}
.vfSeal.vfSealSm svg{width:18px;height:18px;}
.vfSealSlim .vfSealText strong{font-size:14px;}
@media (max-width:720px){
  .vfStudentBody{padding:18px 14px;}
  .vfStudentBody h2{font-size:21px;}
}

/* ==========================================================================
   البرامج المهنية التنفيذية (دبلوم / ماجستير / دكتوراة مهنية)
   ==========================================================================
   قسم مستقل عن الدورات — هيرو داكن بريميوم، ثلاث كروت درجات (الماجستير
   مميز بصريًا في النص)، وفورم تسجيل بنفس مكونات فورم التواصل.
   ========================================================================== */
.proBadge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--primary-soft);color:var(--primary);
  border-radius:999px;padding:8px 16px;font-size:13px;font-weight:800;
  margin-bottom:16px;
}
.proBadge svg{width:16px;height:16px;}
.proBadgeLight{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;}

.proHero{
  background:linear-gradient(135deg, var(--primary-dark, #003366) 0%, #0A1E3D 55%, #0C1526 100%);
  color:#fff;padding:80px 5% 70px;text-align:center;
}
.proHeroInner{max-width:760px;}
.proHero h1{font-size:40px;font-weight:800;line-height:1.4;margin:0 0 16px;color:#fff;}
.proHero p{color:rgba(255,255,255,.82);font-size:16.5px;line-height:1.95;margin:0 auto 30px;max-width:600px;}
.proHeroBtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.proBtnGhost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.35);}
.proBtnGhost:hover{background:rgba(255,255,255,.18);}

.proIntro{padding:64px 5% 10px;}
.proIntroBody{color:var(--muted);font-size:16px;line-height:2.1;margin-top:14px;}

.proDegrees{padding:64px 5%;}
.proDegGrid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;align-items:stretch;}
.proDegCard{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 24px;transition:transform .2s ease, box-shadow .2s ease;
}
.proDegCard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.proDegCard.isFeatured{
  border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, var(--primary), var(--primary-dark, #003366)) border-box;
  box-shadow:0 18px 40px -18px rgba(0,87,255,.3);
}
.proDegStep{
  position:absolute;top:20px;inset-inline-end:22px;
  font-size:30px;font-weight:800;color:var(--border);letter-spacing:1px;
}
.proDegCard .proDegIcon,
.proHomeDegree .proDegIcon{
  width:54px;height:54px;border-radius:16px;flex:none;
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.proDegIcon svg{width:26px;height:26px;}
.proDegCard h3{font-size:19px;font-weight:800;margin:0 0 10px;color:var(--ink);}
.proDegCard > p{color:var(--muted);font-size:14px;line-height:1.95;margin:0 0 16px;}
.proDegProgs{margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.proDegProgsTitle{display:block;width:100%;font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:2px;}
.proProgChip{
  background:var(--bg, #F5F7FB);border:1px solid var(--border);border-radius:999px;
  padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.7;
}
.proDegBtn{margin-top:auto;width:100%;}

.proForm{
  padding:70px 5% 80px;
  background:linear-gradient(135deg, var(--primary-dark, #003366) 0%, #0C1526 100%);
}
.proFormGrid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center;}
.proFormText h2{font-size:28px;font-weight:800;color:#fff;margin:0 0 12px;}
.proFormText p{color:rgba(255,255,255,.82);font-size:15px;line-height:2;margin:0 0 22px;}
.proFormPerks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.proFormPerks li{
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.92);font-size:14px;font-weight:600;
}
.proFormPerks li svg{
  width:20px;height:20px;flex:none;padding:3px;border-radius:50%;
  background:rgba(34,220,224,.18);color:var(--teal, #22DCE0);
}

/* اختيار الدرجة — ثلاث شرائح والبرامج بتتبدل حسب المختارة */
.proCatChips{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;}
.proCatChip{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--border);border-radius:12px;
  padding:12px 8px;font-family:inherit;font-size:12.5px;font-weight:800;
  color:var(--ink);cursor:pointer;transition:all .15s ease;text-align:center;
}
.proCatChip svg{width:22px;height:22px;color:var(--muted);}
.proCatChip:hover{border-color:var(--primary);}
.proCatChip.isActive{
  border-color:var(--primary);background:var(--primary-soft);color:var(--primary);
}
.proCatChip.isActive svg{color:var(--primary);}

/* اختصار الرئيسية */
.proHomeStrip{
  padding:70px 5%;
  background:linear-gradient(135deg, var(--primary-dark, #003366) 0%, #0A1E3D 55%, #0C1526 100%);
  color:#fff;
}
.proHomeGrid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;}
.proHomeText .proBadge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;}
.proHomeText h2{font-size:30px;font-weight:800;color:#fff;margin:0 0 14px;}
.proHomeText p{color:rgba(255,255,255,.82);font-size:15.5px;line-height:2;margin:0 0 26px;max-width:480px;}
.proHomeBtn{background:#fff;color:var(--primary);font-weight:800;}
.proHomeBtn:hover{background:#EEF4FF;}
.proHomeDegrees{display:grid;gap:14px;}
.proHomeDegree{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:16px 20px;color:#fff;text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.proHomeDegree:hover{background:rgba(255,255,255,.12);transform:translateX(-3px);color:#fff;}
.proHomeDegree .proDegIcon{
  width:44px;height:44px;border-radius:12px;margin:0;
  background:rgba(255,255,255,.12);color:var(--teal, #22DCE0);
}
.proHomeDegree .proDegIcon svg{width:22px;height:22px;}
.proHomeDegree strong{font-size:15.5px;font-weight:800;}
.proDegCount{font-size:12px;color:rgba(255,255,255,.65);font-weight:600;white-space:nowrap;}

@media (max-width:900px){
  .proDegGrid{grid-template-columns:1fr;}
  .proFormGrid,.proHomeGrid{grid-template-columns:1fr;gap:30px;}
}
@media (max-width:720px){
  .proHero{padding:56px 5% 48px;}
  .proHero h1{font-size:28px;}
  .proHomeText h2{font-size:24px;}
  .proCatChips{grid-template-columns:repeat(3, 1fr);gap:6px;}
  .proCatChip{font-size:11.5px;padding:10px 4px;}
  .proHomeStrip{padding:52px 5%;}
}

.vfEmptyTitle{font-size:18px;font-weight:800;margin:0 0 8px;color:var(--ink);}
.vfEmpty .vfEmptyIcon{background:#FDECEC;color:#D92D20;}

/* بانر «احصل على برنامج» — بعد النتيجة بالحالتين */
.vfCta{
  margin-top:22px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #003366) 100%);
  color:#fff;border-radius:var(--radius-lg);padding:24px 26px;
}
.vfCta h3{font-size:18px;font-weight:800;margin:0 0 6px;color:#fff;}
.vfCta p{color:rgba(255,255,255,.85);font-size:13.5px;line-height:1.8;margin:0;}
.vfCta .btn{background:#fff;color:var(--primary);flex:none;}

@media (max-width:720px){
  .vfSealRow{flex-wrap:wrap;padding:14px 16px;}
  .vfCodeChip{order:3;}
  .vfPremium .vfGrid{padding:16px;}
  .vfPremium .vfInfo h2{font-size:20px;}
  .vfCta{padding:20px 18px;}
  .vfCta .btn{width:100%;}
}