/* ─── واجهة الدفع حسب نوع الدورة (التصورات المعتمدة) ─── */
:root { --pw-teal: #2F8E90; --pw-teal-d: #1F5A5C; --pw-proj: #6A4BD8; --pw-proj-d: #45309A; --pw-orange: #F36829; --pw-ink: #0F1B1C; --pw-muted: #5B6E70; }

/* ① ② ③ شاشة الانتظار: الشعار يتحرك، ثم محتوى الدورة */
.pw { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 20px; overflow-y: auto;
  background: #FFFFFF; font-family: inherit; color: var(--pw-ink); animation: pwIn .25s ease both; --pw-a: var(--pw-teal); --pw-ad: var(--pw-teal-d); --pw-soft: #EEF7F7; }
.pw[hidden] { display: none; }
.pw--proj { --pw-a: var(--pw-proj); --pw-ad: var(--pw-proj-d); --pw-soft: #F2EEFF; }
.pw--plain { --pw-soft: #F3F6F6; }
.pw::before { content: ""; position: fixed; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,0), var(--pw-soft)); pointer-events: none; }
.pw__in { position: relative; width: min(430px, 100%); text-align: center; }
.pw-logo { height: 170px; display: grid; place-items: center; transition: height .35s cubic-bezier(.2,.7,.2,1); }
.pw-logo__v { width: 240px; max-width: 70vw; height: auto; mix-blend-mode: multiply; transition: width .35s cubic-bezier(.2,.7,.2,1); }
.pw.is-content .pw-logo { height: 92px; }
.pw.is-content .pw-logo__v { width: 128px; }
.pw-body { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; }
.pw.is-content .pw-body { opacity: 1; transform: none; }
.pw-h { margin: 4px 0 2px; font-size: 21px; font-weight: 900; color: var(--pw-ink); }
.pw-sub { margin: 0; font-size: 13.5px; color: var(--pw-muted); }
.pw-course { display: inline-block; margin: 10px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--pw-soft); color: var(--pw-ad); font-size: 13px; font-weight: 800; }
.pw-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 16px; direction: rtl; }
.pw-step { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #8A9A9B; min-width: 64px; }
.pw-step b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: #EEF2F2; color: #8A9A9B; }
.pw-step--done { color: var(--pw-ad); } .pw-step--done b { background: var(--pw-a); color: #fff; }
.pw-step--now { color: var(--pw-ink); } .pw-step--now b { background: #fff; color: var(--pw-a); box-shadow: 0 0 0 2px var(--pw-a); animation: pwPulse 1.4s ease-in-out infinite; }
.pw-steps__bar { flex: 0 0 34px; height: 3px; border-radius: 3px; background: #E3EAEA; margin-bottom: 18px; }
.pw-steps__bar.is-on { background: var(--pw-a); }
.pw-chat { display: flex; align-items: flex-start; gap: 10px; text-align: right; background: #fff; border: 1px solid #E3ECEC; border-radius: 18px; padding: 12px; box-shadow: 0 10px 30px -18px rgba(15,27,28,.35); }
/* الروبوت بنفس شكله في المنصة (صفحة المعلّم الذكي): خلفية فاتحة متوهجة، لا مربع داكن */
.pw-av { flex: 0 0 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.pw-av--bot { background: radial-gradient(circle at 50% 40%, #EAF9F9 0, #D3ECEC 60%, #BFE3E3 100%); box-shadow: 0 8px 20px rgba(47,142,144,.25), 0 0 0 4px rgba(47,142,144,.08); }
.pw--proj .pw-av--bot { background: radial-gradient(circle at 50% 40%, #F4F0FF 0, #E4DCFF 60%, #D3C7FF 100%); box-shadow: 0 8px 20px rgba(106,75,216,.25), 0 0 0 4px rgba(106,75,216,.08); }
.pw-av--book { background: var(--pw-soft); font-size: 24px; }
.pw-av .aibot { width: 42px; height: 42px; }
.pw-bubble { flex: 1; min-width: 0; }
.pw-bubble small { display: block; font-size: 11.5px; font-weight: 800; color: var(--pw-a); margin-bottom: 2px; }
.pw-bubble p { margin: 0; min-height: 44px; font-size: 14.5px; line-height: 1.6; color: var(--pw-ink); font-weight: 600; }
.pw-tip { animation: pwTip .35s ease both; display: block; }
.pw-dots { display: inline-flex; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--pw-soft); }
.pw-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--pw-a); opacity: .35; animation: pwDot 1s infinite; }
.pw-dots i:nth-child(2) { animation-delay: .15s; } .pw-dots i:nth-child(3) { animation-delay: .3s; }
.pw-note { margin: 14px 0 0; font-size: 12px; color: var(--pw-muted); }
@keyframes pwIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pwPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--pw-a); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pw-a) 25%, transparent); } }
@keyframes pwDot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes pwTip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pw, .pw-body, .pw-logo, .pw-logo__v, .pw-tip { animation: none; transition: none; } .pw-dots i, .pw-step--now b { animation: none; } }

/* صندوق الشراء: ما ينتظرك حسب النوع */
.cp-next { margin-top: 14px; border-radius: 18px; padding: 14px; text-align: right; }
.cp-next--ai { background: linear-gradient(145deg, #0F2F30, #184A4B); color: #E8F6F6; }
.cp-next--proj { background: linear-gradient(145deg, #1E1542, #372780); color: #EEEAFF; }
.cp-next--plain { background: #F6F9F9; border: 1px solid #E3ECEC; color: var(--pw-ink); }
.cp-next__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cp-next__head .aibot { width: 40px; height: 40px; flex: 0 0 40px; }
.cp-next__ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: #fff; border: 1px solid #E3ECEC; }
.cp-next__head b { display: block; font-size: 14.5px; font-weight: 900; }
.cp-next__head small { display: block; font-size: 11.5px; opacity: .8; }
.cp-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cp-next li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.55; }
.cp-next li > span:first-child { flex: 0 0 18px; text-align: center; }
.cp-next__gift { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(243,104,41,.18); color: #FFB48C; }
.cp-next--plain .cp-next__gift { color: #B8430F; }
.cp-next__try { margin-top: 8px; font-size: 12px; opacity: .85; }
.cp-next + .cp-includes { margin-top: 12px; }

/* ④ بطاقة الترحيب بعد الدفع */
.pwel { text-align: center; --pw-a: var(--pw-teal); --pw-soft: #EEF7F7; }
.pwel--proj { --pw-a: var(--pw-proj); --pw-soft: #F2EEFF; }
.pwel__ok { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #fff; background: linear-gradient(145deg, #22A06B, #15653C); box-shadow: 0 10px 24px -10px rgba(21,101,60,.6); animation: pwelPop .5s cubic-bezier(.2,1.4,.4,1) both; }
.pwel__h { margin: 0 0 4px; font-size: 22px; font-weight: 900; }
.pwel__msg { margin: 0 auto 12px; max-width: 460px; color: var(--pw-muted); font-size: 14.5px; }
.pwel__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.pwel__chips span { padding: 5px 10px; border-radius: 999px; background: var(--pw-soft); font-size: 12.5px; font-weight: 700; color: #1F3F40; }
.pwel__ai { display: flex; gap: 12px; align-items: flex-start; text-align: right; margin: 0 auto 14px; max-width: 480px; padding: 14px; border-radius: 18px; background: linear-gradient(145deg, #0F2F30, #184A4B); color: #E8F6F6; }
.pwel--proj .pwel__ai { background: linear-gradient(145deg, #1E1542, #372780); color: #EEEAFF; }
.pwel__bot { flex: 0 0 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.pwel__ai b { display: block; font-size: 15px; margin-bottom: 4px; }
.pwel__ai ul { margin: 0; padding: 0 16px 0 0; font-size: 13px; line-height: 1.7; }
.pwel__gift { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(243,104,41,.18); color: #FFB48C; }
.pwel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pwel__foot { margin: 12px 0 0; font-size: 12.5px; color: var(--pw-muted); }
.pwel__foot a { color: var(--pw-a); font-weight: 800; }
@keyframes pwelPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pwel__ok { animation: none; } }

/* ⑥ ⑧ الشعار الصغير المتحرك — التصور ③: حلقة بلون الهوية تدور حول الشعار */
.ml { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.ml__ring { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.ml__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #F36829, #2F8E90 45%, transparent 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: mlSpin 1s linear infinite; }
.ml__mark { width: 62px; height: auto; position: relative; }
.ml__txt { font-size: 14px; font-weight: 700; }
.ml--dark .ml__txt { color: #CFE7E7; }
.ml--light .ml__txt { color: #334155; }
.ml-page { position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center; background: rgba(255,255,255,.96); animation: pwIn .2s ease both; }
.ml-page[hidden] { display: none; }
.ml-cover { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: #0F1B1C; transition: opacity .35s ease; }
.ml-cover.is-done { opacity: 0; pointer-events: none; }
@keyframes mlSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ml__ring::before { animation-duration: 2.4s; } }

/* بطاقات النجاح الأخرى (باقة المعلّم الذكي، القسط، الفصل…) */
.pwel__ok--alt { font-size: 28px; }
.pwel__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; max-width: 480px; margin: 0 auto 14px; }
.pwel__info > div { padding: 10px 12px; border-radius: 14px; background: #F6FAFA; border: 1px solid #E3ECEC; text-align: center; }
.pwel__info > div > span { display: block; font-size: 12px; font-weight: 700; color: var(--pw-muted); }
.pwel__info b { display: block; margin-top: 2px; font-size: 17px; font-weight: 900; color: var(--pw-ink); }
.pwel--plain .pwel__chips span { background: #F1F6F6; }
.pwel__info b span { display: inline; font-size: inherit; color: inherit; }
.pwel__foot b { white-space: nowrap; }

/* دفعة قيد التأكيد (بنفس روح شاشات الانتظار) */
.tpx { margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(160deg, #FFF8EC, #FFFFFF 70%); border: 1px solid #F6DDB0; }
.tpx__head { display: flex; align-items: center; gap: 12px; }
.tpx__ring { position: relative; flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #B45309; background: #FFF1D6; }
.tpx__ring::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid transparent; border-top-color: #F36829; border-right-color: #2F8E90; animation: mlSpin 1.1s linear infinite; }
.tpx__head b { display: block; font-size: 15.5px; font-weight: 900; color: #7A4B00; }
.tpx__head small { display: block; font-size: 12.5px; color: #8A6A3A; }
.tpx__steps { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; font-size: 12px; font-weight: 800; color: #9AA8A9; }
.tpx__steps i { flex: 1; max-width: 40px; height: 2px; background: #EADFCB; }
.tpx__steps .is-done { color: #15653C; } .tpx__steps .is-now { color: #B45309; }
.tpx__msg { margin: 0; font-size: 13.5px; line-height: 1.8; color: #5B4A2E; }
.tpx__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.tpx__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: #fff; border: 1px solid #F0D29C; color: #B45309; font-weight: 800; font-size: 13px; text-decoration: none; }
.tpx__foot small { font-size: 12px; color: #9A8466; }