/* ── مشهد صفحة التفاصيل (cs2): حركة CSS فقط، مشهد 12 ثانية ── */
.cs2{--cs-loop:12s}
.cs2-float{transform-box:fill-box;transform-origin:center;animation:cs2Float 6s ease-in-out infinite}
.cs2-float--2{animation-duration:7.5s;animation-delay:.8s}
.cs2-float--3{animation-duration:5.5s;animation-delay:.3s}
.cs2-float--4{animation-duration:6.5s;animation-delay:1.4s}
.cs2-px{transform-box:fill-box;transform-origin:center;animation:cs2Pix 4s ease-in-out infinite}
.cs2-px--2{animation-delay:.6s}.cs2-px--3{animation-delay:1.2s}.cs2-px--4{animation-delay:1.8s}.cs2-px--5{animation-delay:2.4s}
.cs2-window{transform-box:fill-box;transform-origin:center;animation:cs2Window var(--cs-loop) ease-out infinite}
.cs2-dot{animation:cs2Dot 2.4s ease-in-out infinite}
.cs2-dot--2{animation-delay:.3s}.cs2-dot--3{animation-delay:.6s}
.cs2-logo{transform-box:fill-box;transform-origin:center;animation:cs2Logo var(--cs-loop) ease-out infinite}
.cs2-type{transform-box:fill-box;transform-origin:left center;animation:cs2Type var(--cs-loop) ease-out infinite}
.cs2-type--b{animation-delay:.25s}.cs2-type--c{animation-delay:.9s}.cs2-type--d{animation-delay:1.5s}
.cs2-row--1 .cs2-check,.cs2-row--2 .cs2-check{stroke-dasharray:1;stroke-dashoffset:1;animation:cs2Check var(--cs-loop) ease-out infinite}
.cs2-row--2 .cs2-check{animation-delay:.6s}
.cs2-caret{animation:cs2Caret var(--cs-loop) steps(1) infinite}
.cs2-bar{transform-box:fill-box;transform-origin:left center;animation:cs2Bar var(--cs-loop) ease-in-out infinite}
.cs2-list{transform-box:fill-box;transform-origin:center;animation:cs2List var(--cs-loop) cubic-bezier(.34,1.4,.64,1) infinite}
.cs2-tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:cs2Tick var(--cs-loop) ease-out infinite}
.cs2-tick--2 path{animation-delay:.4s}
.cs2-tick--3 path{animation-delay:.8s}
.cs2-ring{transform-box:fill-box;transform-origin:center;animation:cs2Ring 3s ease-in-out infinite}
.cs2-core{transform-box:fill-box;transform-origin:center;animation:cs2Core 3s ease-in-out infinite}
.cs2-cross{transform-box:fill-box;transform-origin:center;animation:cs2Cross 14s linear infinite}
.cs2-track{stroke-dasharray:1;stroke-dashoffset:1;animation:cs2Track var(--cs-loop) ease-in-out infinite}
.cs2-spark{offset-path:path("M70 540 L190 520 L330 470 L470 420 L560 400");offset-rotate:0deg;opacity:0;animation:cs2Spark var(--cs-loop) ease-in-out infinite}
.cs2-card{transform-box:fill-box;transform-origin:center;opacity:0;animation:cs2Card var(--cs-loop) cubic-bezier(.34,1.4,.64,1) infinite}
.cs2-card--2{animation-delay:.5s}
.cs2-card--3{animation-delay:1s}
.cs2-node{transform-box:fill-box;transform-origin:center;animation:cs2Node 2.6s ease-in-out infinite}
.cs2-card--2 .cs2-node{animation-delay:.5s}.cs2-card--3 .cs2-node{animation-delay:1s}
.cs2-final{transform-box:fill-box;transform-origin:center;animation:cs2Final var(--cs-loop) ease-in-out infinite}
.cs2-final-check{stroke-dasharray:1;stroke-dashoffset:1;animation:cs2FinalCheck var(--cs-loop) ease-out infinite}
.cs2-rays{opacity:0;transform-box:fill-box;transform-origin:center;animation:cs2Rays var(--cs-loop) ease-out infinite}

@keyframes cs2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cs2Pix{0%,100%{transform:translate(0,0);opacity:.9}50%{transform:translate(-6px,-14px);opacity:.4}}
@keyframes cs2Window{0%{transform:translateY(14px);opacity:0}6%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes cs2Dot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes cs2Logo{0%,4%{transform:scale(.92);opacity:0}12%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes cs2Type{0%,10%{transform:scaleX(0)}20%,100%{transform:scaleX(1)}}
@keyframes cs2Check{0%,22%{stroke-dashoffset:1}30%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cs2Caret{0%,22%{opacity:0}23%{opacity:1}26%{opacity:0}29%{opacity:1}32%{opacity:0}35%{opacity:1}38%,100%{opacity:0}}
@keyframes cs2Bar{0%,34%{transform:scaleX(0)}58%,96%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes cs2List{0%,8%{transform:translateX(60px);opacity:0}16%{transform:translateX(-6px);opacity:1}20%,100%{transform:translateX(0);opacity:1}}
@keyframes cs2Tick{0%,20%{stroke-dashoffset:1}28%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cs2Ring{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.5}}
@keyframes cs2Core{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}
@keyframes cs2Cross{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes cs2Track{0%,36%{stroke-dashoffset:1}54%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cs2Spark{0%,54%{offset-distance:0%;opacity:0}56%{opacity:1}68%{opacity:1}70%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes cs2Card{0%,40%{opacity:0;transform:translateY(26px)}48%{opacity:1;transform:translateY(-4px)}52%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(16px)}}
@keyframes cs2Node{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes cs2Final{0%,70%{transform:scale(1)}74%{transform:scale(1.14)}78%,100%{transform:scale(1)}}
@keyframes cs2FinalCheck{0%,66%{stroke-dashoffset:1}74%,96%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cs2Rays{0%,72%{opacity:0;transform:scale(.6)}78%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .cs2 *{animation:none!important}
  .cs2-tick path,.cs2-track,.cs2-check,.cs2-final-check{stroke-dashoffset:0}
  .cs2-card,.cs2-rays,.cs2-logo,.cs2-window,.cs2-list{opacity:1;transform:none}
  .cs2-type,.cs2-bar{transform:none}
  .cs2-spark,.cs2-caret{opacity:0}
}



/* ── تفاصيل الدورة: أسلوب رسمي مؤسسي ── */
.cf{max-width:1180px;margin:0 auto;padding:.4rem 2rem 1.4rem;border-radius:1rem;background:#fff;border:1px solid #dbe6f5}
.cf-sec{padding:1.5rem 0;border-bottom:1px solid #e6eef9}
.cf-sec:last-child{border-bottom:0}
.cf-h{position:relative;margin:0 0 .9rem;padding-inline-start:.9rem;font-family:var(--font-display);font-size:1.12rem;font-weight:800;color:#163a7a;line-height:1.4}
.cf-h::before{content:"";position:absolute;inset-inline-start:0;top:.2em;bottom:.2em;width:4px;border-radius:3px;background:#163a7a}
.cf-text{color:#3f526d;font-size:.97rem;line-height:1.95;max-width:52rem}
.cf-text p{margin:0 0 .6rem}
.cf-text p:last-child{margin-bottom:0}
.cf-list{margin:0;padding:0 1.4rem 0 0;color:#3f526d;font-size:.95rem;line-height:1.9;max-width:52rem}
.cf-list li{padding:.15rem 0}
.cf-list li::marker{color:#163a7a;font-weight:800}
.cf-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cf-table{width:100%;border-collapse:collapse;font-size:.92rem}
.cf-table thead th{text-align:start;padding:.6rem .8rem;background:#f3f7fd;color:#163a7a;font-family:var(--font-display);font-weight:800;font-size:.85rem;border-bottom:1px solid #d6e4f7}
.cf-table td,.cf-table tbody th{padding:.6rem .8rem;border-bottom:1px solid #eaf0f8;color:#3f526d;vertical-align:top;text-align:start}
.cf-table tbody tr:last-child td,.cf-table tbody tr:last-child th{border-bottom:0}
.cf-table .cf-grp th{padding:.5rem .8rem;background:#fbfcfe;font-family:var(--font-display);font-weight:800;color:#0f2a5f;font-size:.88rem;border-bottom:1px solid #eaf0f8}
.cf-table .cf-day{font-weight:700;color:#0f2a5f;white-space:nowrap}
.cf-table .cf-time{direction:ltr;text-align:end;white-space:nowrap;font-weight:700;color:#163a7a}
.cf-kv{width:100%;border-collapse:separate;border-spacing:0 .55rem;font-size:.93rem;margin-top:-.55rem}
.cf-kv th{width:12rem;padding:.75rem 1rem;text-align:start;vertical-align:top;font-family:var(--font-display);font-weight:800;color:#163a7a;font-size:.88rem;background:#f3f7fd;border-radius:0 .5rem .5rem 0}
.cf-kv td{padding:.75rem 1rem;vertical-align:top;color:#3f526d;line-height:1.8;background:#f8fafd;border-radius:.5rem 0 0 .5rem}
.cf-plan{list-style:none;margin:0;padding:0;counter-reset:cfp}
.cf-plan li{padding:.8rem 0;border-bottom:1px solid #eaf0f8}
.cf-plan li:last-child{border-bottom:0}
.cf-plan-head{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .7rem}
.cf-plan-unit{padding:.15rem .6rem;border-radius:.35rem;background:#f3f7fd;color:#163a7a;font-family:var(--font-display);font-size:.78rem;font-weight:800}
.cf-plan-head strong{font-family:var(--font-display);font-size:.98rem;font-weight:800;color:#0f2a5f}
.cf-plan-meta{margin-inline-start:auto;color:#5d738c;font-size:.8rem;font-weight:700}
.cf-plan-sum{margin:.4rem 0 0;color:#3f526d;font-size:.9rem;line-height:1.8;max-width:52rem}
.cf-plan-days{margin:.3rem 0 0;color:#5d738c;font-size:.8rem;font-weight:600}
.cf-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2.5rem;padding:1.2rem 1.4rem;border-radius:.8rem;background:#f8fafd;border:1px solid #e3ecf9}
.cf-box .cf-h{margin-bottom:.5rem;font-size:1rem}
.cf-box-name{margin:0;font-family:var(--font-display);font-size:1.02rem;font-weight:800;color:#0f2a5f}
.cf-box-sub{margin:.25rem 0 0;color:#3f526d;font-size:.88rem;line-height:1.8}
.cd-survey{max-width:1180px;margin:1rem auto 0}

/* ── الجوال ── */
@media (max-width:860px){
  .cf{padding:.2rem 1rem .8rem;border-radius:.8rem}
  .cf-sec{padding:1.1rem 0}
  .cf-h{font-size:1rem;margin-bottom:.7rem}
  .cf-text,.cf-list{font-size:.92rem;line-height:1.85}
  .cf-table{font-size:.84rem}
  .cf-table thead th,.cf-table td,.cf-table tbody th{padding:.5rem .45rem}
  .cf-table .cf-grp th{padding:.45rem .45rem}
  .cf-kv{font-size:.88rem;border-spacing:0 .5rem}
  .cf-kv th{width:7.4rem;padding:.6rem .7rem;font-size:.8rem}
  .cf-kv td{padding:.6rem .7rem;line-height:1.7}
  .cf-box{grid-template-columns:1fr;gap:1rem;padding:1rem}
  .cf-plan-meta{margin-inline-start:0;flex-basis:100%}
}

.cf-dots{list-style:none;margin:0;padding:0;color:#3f526d;font-size:.95rem;line-height:1.9;max-width:52rem}
.cf-dots li{position:relative;padding:.2rem 1.3rem .2rem 0}
.cf-dots li::before{content:"";position:absolute;inset-inline-start:.1rem;top:.85em;width:.5rem;height:.5rem;border-radius:50%;background:#163a7a}
@media (max-width:860px){.cf-dots{font-size:.92rem;line-height:1.85}}