/* ==========================================================================
   ANAS RADWAN — صفحة العرض (offer-reels.html)
   بتتحمّل بعد style.css و course.css وبتستخدم نفس المتغيرات.
   كل الكلاسات الجديدة بتبدأ بـ o عشان متتعارضش مع الصفحات التانية.
   ========================================================================== */

/* ---------- 1. شريط العرض فوق الناف ---------- */
/* شريط ثابت بيقول الوفر — رقم حقيقي (119 − 75)، من غير عد تنازلي */
.obar{background:linear-gradient(90deg,rgba(148,0,0,.85),rgba(193,0,0,.6));
  border-bottom:1px solid rgba(255,255,255,.14);position:relative;z-index:91}
.obar__in{display:flex;align-items:center;justify-content:center;gap:10px 18px;
  flex-wrap:wrap;padding:10px 0;font-size:13px;color:#fff;text-align:center}
.obar b{font-weight:600}
.obar .num{font-family:var(--font-en)}
.obar__go{display:inline-flex;align-items:center;gap:7px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:border-color .25s}
.obar__go:hover{border-color:#fff}
.obar__go svg{width:12px;height:12px;flex:none}

/* الناف هنا مختصرة: لوجو + زرار واحد — صفحة إعلان مش موقع للتصفّح */
.nav--lp .nav__inner{gap:18px;justify-content:space-between}
.nav--lp .nav__cta{display:inline-flex;margin-inline-start:auto}

/* ---------- 1b. توهج السعر ---------- */
/* توهج أحمر بسيط نابض خلف كل رقم سعر رئيسي في الصفحة (الهيرو، ستاك القيمة،
   شريط الموبايل) — بنفس لون التوهجات الثابتة الموجودة أصلاً في الموقع
   (rgba(148,0,0)) بس متحرك. بيحترم prefers-reduced-motion أوتوماتيك عن طريق
   قاعدة animation-duration العامة في style.css. */
@keyframes oprice-pulse{
  0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.9)}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.12)}
}
.oprice-glow{position:relative;display:inline-block;isolation:isolate}
.oprice-glow::before{content:'';position:absolute;top:50%;left:50%;z-index:-1;pointer-events:none;
  width:160%;height:240%;filter:blur(20px);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(193,0,0,.6),transparent 72%);
  animation:oprice-pulse 3.4s ease-in-out infinite}

/* ---------- 2. إضافات الهيرو ---------- */
.ohero__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:30px}
.ohero__price b{font-family:var(--font-en);font-size:clamp(38px,5vw,54px);color:#fff;line-height:1;
  font-variation-settings:'wght' 700;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.ohero__price em{font-style:normal;font-size:16px;color:var(--light)}
.ohero__price s{font-size:16px;color:var(--mid)}
.ohero__save{position:relative;font-size:12px;font-weight:500;color:#fff;
  padding:6px 14px;isolation:isolate;margin-inline-start:4px}
.ohero__save::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:skewX(var(--sk))}

.ohero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
/* زر البرومو هنا جوه صف الأزرار — بياخد شكل .btn، فلازم نلغي المسافة
   والأيقونة الكبيرة اللي course.css بيديهم له لما يكون واقف لوحده */
.ohero__actions .chero__play{margin-top:0}
.ohero__actions .chero__play i{width:22px;height:22px}
.ohero__actions .chero__play i::before{background:transparent}
.ohero__actions .chero__play:hover i::before{background:transparent}
.ohero__actions .chero__play svg{width:12px;height:12px}
.ohero__note{display:flex;align-items:center;gap:9px;margin-top:20px;
  font-size:12.5px;color:var(--light);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.ohero__note svg{width:15px;height:15px;flex:none;color:#F0CD73}

/* ---------- 3. الوجع — لمين الكورس ده ---------- */
.opains{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.opain{background:var(--bg-2);padding:28px 26px;display:flex;gap:16px;align-items:flex-start;
  transition:background .35s}
.opain:hover{background:var(--bg-3)}
.opain i{width:40px;height:40px;flex:none;display:grid;place-items:center;position:relative;
  z-index:0;color:var(--red-hi)}
.opain i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(148,0,0,.16);border:1px solid rgba(148,0,0,.42)}
.opain i svg{width:19px;height:19px}
.opain b{display:block;font-size:15.5px;color:#fff;font-weight:500;margin-bottom:6px;line-height:1.55}
.opain p{font-size:13.5px;color:var(--mid);line-height:1.8}

.oafter{margin-top:26px;padding:22px 26px;background:var(--bg-2);
  border:1px solid var(--line);border-inline-start:3px solid var(--red)}
.oafter p{font-size:15.5px;color:var(--light);line-height:1.9}
.oafter b{color:#fff;font-weight:600}

/* ---------- 4. الطريقة — 3 خطوات ---------- */
.osteps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:ostep}
.ostep{background:var(--bg-2);border:1px solid var(--line);padding:30px 26px;position:relative;
  overflow:hidden;transition:border-color .35s,transform .35s var(--ease)}
.ostep:hover{border-color:rgba(148,0,0,.5);transform:translateY(-4px)}
.ostep__no{width:44px;height:44px;display:grid;place-items:center;position:relative;z-index:0;
  margin-bottom:20px;font-family:var(--font-en);font-size:17px;color:#fff;
  font-variation-settings:'wght' 600}
.ostep__no::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:var(--red)}
.ostep h3{font-size:16.5px;margin-bottom:9px}
.ostep p{font-size:13.5px;color:var(--mid);line-height:1.85}

/* ---------- 5. ستاك القيمة ---------- */
.ostack{max-width:760px;margin-inline:auto}
.ostack__card{background:var(--bg-2);border:1px solid var(--line-hi);padding:clamp(24px,3.4vw,38px)}
.ostack__head{display:flex;align-items:center;gap:14px;padding-bottom:22px;
  border-bottom:1px solid var(--line)}
.ostack__head i{width:42px;height:42px;flex:none;display:grid;place-items:center;position:relative;
  z-index:0;color:#fff}
.ostack__head i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:var(--red)}
.ostack__head i svg{width:20px;height:20px}
.ostack__head > span > b{display:block;font-size:16px;color:#fff;font-weight:600}
.ostack__head > span > span{font-size:12.5px;color:var(--mid)}

.ostack__rows{margin-top:6px}
.ostack__row{display:flex;align-items:flex-start;gap:14px;padding:17px 0;
  border-bottom:1px solid var(--line)}
.ostack__row > i{width:26px;height:26px;flex:none;margin-top:2px;display:grid;place-items:center;
  position:relative;z-index:0}
.ostack__row > i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(148,0,0,.18);border:1px solid rgba(148,0,0,.45)}
.ostack__row > i svg{width:13px;height:13px;color:var(--red-hi);stroke-width:2.6}
.ostack__row--gift > i::before{background:rgba(216,174,71,.14);border-color:rgba(216,174,71,.45)}
.ostack__row--gift > i svg{color:#F0CD73}

.ostack__t{flex:1;min-width:0}
/* لازم > : جوه العنوان في span للرقم (js-lesson-count)، ولو خلّيناه block
   السطر بيتقطع لتلات سطور */
.ostack__t > b{display:block;font-size:15px;color:#fff;font-weight:500;line-height:1.6}
.ostack__t > span{display:block;font-size:12.5px;color:var(--mid);line-height:1.7;margin-top:3px}
/* الرقم بس هو اللي بخط Anybody (كلاس .num) — «دولار» تفضل عربي */
.ostack__v{flex:none;font-size:13.5px;color:var(--light);padding-top:2px;white-space:nowrap}
.ostack__v .num{font-size:15.5px}
.ostack__v--inc{font-size:12.5px;color:var(--red-hi)}

/* صف الإجمالي — القيمة الكاملة مشطوبة قبل ما نوصل للسعر */
.ostack__total{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:20px 0 0}
.ostack__total span{font-size:14.5px;color:var(--mid)}
.ostack__total s{font-size:15px;color:var(--slate)}
.ostack__total s .num{font-size:26px}

.ostack__pay{margin-top:22px;padding:26px 24px;text-align:center;position:relative;
  background:linear-gradient(180deg,rgba(148,0,0,.16),rgba(148,0,0,.04));
  border:1px solid rgba(148,0,0,.42)}
.ostack__pay > span{display:block;font-size:13px;color:var(--light);margin-bottom:10px}
.ostack__price{display:flex;align-items:baseline;justify-content:center;gap:11px;flex-wrap:wrap}
.ostack__price b{font-family:var(--font-en);font-size:clamp(46px,6.5vw,66px);color:#fff;line-height:1;
  font-variation-settings:'wght' 700}
.ostack__price em{font-style:normal;font-size:17px;color:var(--light)}
.ostack__price s{font-size:16px;color:var(--slate)}
.ostack__once{margin-top:8px;font-size:12.5px;color:var(--mid)}
.ostack__pay .btn{margin-top:22px;min-width:min(100%,320px);justify-content:center}

.ostack__feats{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 22px;margin-top:20px}
.ostack__feats span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mid)}
.ostack__feats svg{width:14px;height:14px;flex:none;color:var(--red-hi)}

.ostack__methods{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);text-align:center}
.ostack__methods > span{display:block;font-size:11.5px;color:var(--slate);margin-bottom:13px}
.ostack__methods img{width:100%;max-width:300px;margin-inline:auto}

/* ---------- 5b. خريطة الفصول (تايم لاين) ---------- */
/* كل فصل كارت على تايم لاين، الكروت بتتبادل يمين/شمال.
   كل كارت في صف لوحده — عشان لما تضيف صورة أو فيديو لأي فصل
   الارتفاع يتغيّر من غير ما يبوّظ ترتيب اللي بعده. */
.cmap{position:relative;display:grid;grid-template-columns:1fr 1fr;
  column-gap:64px;row-gap:clamp(22px,3vw,34px)}
.cmap::before{content:'';position:absolute;top:12px;bottom:12px;left:50%;width:2px;margin-inline-start:-1px;
  background:linear-gradient(180deg,transparent,rgba(193,0,0,.85) 7%,rgba(193,0,0,.85) 93%,transparent)}

.cmapc{position:relative;grid-column:1;background:var(--bg-3);border:1px solid var(--line);
  padding:22px;transition:border-color .35s,transform .35s var(--ease)}
.cmapc:nth-child(even){grid-column:2}
/* كل كارت لازم صف لوحده. من غير الصفوف الصريحة دي الـauto-placement
   بيحط الفصل الأول والتاني في نفس الصف، فالنقطتين بتتراكبوا على الخط
   والشكل بيبقى عمودين مش رحلة. (لحد 8 فصول) */
.cmapc:nth-child(1){grid-row:1} .cmapc:nth-child(2){grid-row:2}
.cmapc:nth-child(3){grid-row:3} .cmapc:nth-child(4){grid-row:4}
.cmapc:nth-child(5){grid-row:5} .cmapc:nth-child(6){grid-row:6}
.cmapc:nth-child(7){grid-row:7} .cmapc:nth-child(8){grid-row:8}
.cmapc:hover{border-color:rgba(148,0,0,.55);transform:translateY(-3px)}

/* النقطة على الخط — ناحية الخط حسب عمود الكارت */
.cmapc::after{content:'';position:absolute;top:34px;width:12px;height:12px;z-index:2;
  background:var(--red);box-shadow:0 0 0 4px var(--bg-2);transform:skewX(var(--sk))}
/* RTL: inline-start = يمين، inline-end = شمال.
   الكارت الفردي في العمود اليمين فنقطته على شماله، والزوجي العكس. */
.cmapc:nth-child(odd)::after{inset-inline-end:-38px}
.cmapc:nth-child(even)::after{inset-inline-start:-38px}

.cmapc__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.cmapc__no{position:relative;z-index:0;font-size:11.5px;font-weight:500;color:#fff;padding:6px 14px}
.cmapc__no::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:skewX(var(--sk))}
.cmapc__label{font-size:11px;color:var(--slate);border:1px solid var(--line);padding:5px 12px;
  transform:skewX(var(--sk))}
.cmapc__label > span{display:inline-block;transform:skewX(calc(var(--sk) * -1))}

.cmapc__ic{width:34px;height:34px;flex:none;display:grid;place-items:center;position:relative;z-index:0;
  color:var(--red-hi)}
.cmapc__ic::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(148,0,0,.16);border:1px solid rgba(148,0,0,.45)}
.cmapc__ic svg{width:17px;height:17px}
.cmapc__h{display:flex;align-items:center;gap:13px}
.cmapc__h h3{font-family:var(--font-display);font-size:clamp(17px,1.9vw,21px);font-weight:400;
  line-height:1.45}

/* سطر المسار: أ ← ب ← ج */
.cmapc__path{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;margin-top:12px;
  font-size:12.5px;color:var(--mid)}
.cmapc__path svg{width:11px;height:11px;flex:none;color:var(--red-hi);opacity:.8}

.cmapc__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cmapc__pills li{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--light);
  border:1px solid var(--line-hi);padding:6px 13px;transform:skewX(var(--sk))}
.cmapc__pills li > span{display:inline-block;transform:skewX(calc(var(--sk) * -1))}
.cmapc__pills li::before{content:'';width:6px;height:6px;flex:none;background:var(--red-hi)}

/* مكان الصورة/الفيديو — offer.js بيخفيه لوحده لو الملف لسه مترفعش */
.cmapc__media{margin-top:18px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.cmapc__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;
  filter:grayscale(1) contrast(1.06);transition:filter .45s var(--ease),transform .6s var(--ease)}
.cmapc:hover .cmapc__media img{filter:none;transform:scale(1.03)}

.cmapc__outs{margin-top:18px;display:grid;gap:11px}
.cmapc__outs li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--light);
  line-height:1.75}
.cmapc__outs li::before{content:'';width:7px;height:7px;flex:none;margin-top:8px;
  background:var(--red-hi);transform:skewX(var(--sk))}

/* «شوف دروس الفصل» — بيفتح أسامي الدروس الفعلية */
.cmapc__lessons{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.cmapc__lessons summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-size:13px;color:var(--red-hi);transition:color .25s}
.cmapc__lessons summary::-webkit-details-marker{display:none}
.cmapc__lessons summary:hover{color:#fff}
.cmapc__lessons summary svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.cmapc__lessons[open] summary svg{transform:rotate(180deg)}
.cmapc__lessons ol{list-style:none;counter-reset:lesson;margin-top:14px;display:grid;gap:2px}
.cmapc__lessons ol li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13px;
  color:var(--mid);line-height:1.6}
.cmapc__lessons ol li + li{border-top:1px solid var(--line)}
.cmapc__lessons ol li::before{counter-increment:lesson;content:counter(lesson);
  font-family:var(--font-en);font-size:11px;color:var(--slate);width:19px;flex:none;text-align:center}

/* ---------- 6. الضمان الذهبي ---------- */
.oguard{--gold:#D8AE47;--gold-hi:#F0CD73;
  max-width:820px;margin-inline:auto;text-align:center;padding:clamp(32px,4vw,48px) clamp(24px,4vw,44px);
  background:linear-gradient(180deg,rgba(216,174,71,.1),rgba(216,174,71,.02));
  border:1px solid rgba(216,174,71,.36)}
/* نفس شكل .guarantee__ic في course.css (شريحة ذهبية مائلة) بس أكبر —
   القسم ده standalone مش جوه كارت شراء صغير */
.oguard__ic{width:64px;height:64px;margin:0 auto 22px;display:grid;place-items:center;
  position:relative;z-index:0;color:var(--gold-ink,#2b2107)}
.oguard__ic::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:linear-gradient(135deg,var(--gold-hi),var(--gold))}
.oguard__ic svg{width:30px;height:30px}
.oguard h2{font-family:var(--font-display);font-size:clamp(23px,3vw,36px);font-weight:400;
  line-height:1.45;color:var(--gold-hi)}
.oguard h2 b{font-weight:400;color:#fff}
.oguard p{margin-top:18px;font-size:15.5px;color:var(--light);line-height:1.95;
  max-width:56ch;margin-inline:auto}
.oguard a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
.oguard a:hover{color:#fff}
.oguard__days{display:inline-flex;align-items:baseline;gap:7px;margin:22px auto 0;
  padding:10px 22px;position:relative;z-index:0}
.oguard__days::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(var(--sk));
  background:rgba(216,174,71,.16);border:1px solid rgba(216,174,71,.5)}
.oguard__days b{font-family:var(--font-en);font-size:28px;color:var(--gold-hi);line-height:1;
  font-variation-settings:'wght' 700}
.oguard__days span{font-size:14px;color:var(--light)}

/* ---------- 7. فوتر مختصر (لوجو + سوشال بس) ---------- */
.ofooter{padding:44px 0}
.ofooter__in{display:flex;flex-direction:column;align-items:center;gap:22px}
.ofooter__logo img{height:34px;width:auto}
.ofooter .socials{margin-top:0}

/* إخلاء المسؤولية — مطلوب فعلياً مع إعلانات المنصات، وبيحمي من أي توقّع مالي.
   بيقعد تحت السوشال كعنصر flex تالت، فالـalign-items:center بيتوسّطه لوحده. */
.ofooter__disc{margin-top:4px;padding-top:26px;border-top:1px solid var(--line);
  max-width:640px;text-align:center}
.ofooter__disc p{font-size:12px;color:var(--slate);line-height:1.9}
.ofooter__disc p + p{margin-top:10px}

/* ---------- 8. ريسبونسف ---------- */
@media (max-width:980px){
  .osteps{grid-template-columns:1fr;gap:16px}

  /* عمود واحد والخط على اليمين (inline-start في RTL) */
  .cmap{grid-template-columns:1fr;padding-inline-start:36px;column-gap:0}
  .cmap::before{left:auto;margin-inline-start:0;inset-inline-start:6px}
  .cmapc,.cmapc:nth-child(even){grid-column:1}
  .cmapc:nth-child(odd)::after,
  .cmapc:nth-child(even)::after{inset-inline-end:auto;inset-inline-start:-36px}
}

@media (max-width:900px){
  .obar__in{font-size:12px;padding:9px 0}
  .opains{grid-template-columns:1fr}
  .ohero__actions .btn{flex:1 1 auto;justify-content:center}
}

/* الشريط لازم يفضل سطر واحد على الموبايل — كل بكسل فوق الطية بيتحسب */
@media (max-width:680px){
  .obar__more{display:none}
  .obar__in{gap:6px 14px;font-size:11.5px}
}

@media (max-width:620px){
  .ostack__card{padding:20px 18px}
  .ostack__row{gap:11px}
  .ostack__v{font-size:12.5px}
  .ostack__v .num{font-size:14px}
  .ostack__total s .num{font-size:22px}
  .ostack__pay{padding:22px 16px}
  .oguard__ic{width:54px;height:54px}
  .oguard__ic svg{width:25px;height:25px}
}

@media print{
  .obar,.ostack__pay .btn{display:none}
}