/* نور v27.9 — تعلّم الصلاة • رحلتي • شاشة أذان رمضان • مركز الإشعارات */

/* ---------- بطاقة تعلّم الصلاة في اكتشف ---------- */
.discover-feature.learn{background:linear-gradient(135deg,#7a4b0e,#2b1a05 70%);margin-bottom:10px}
.discover-feature.learn:before{background:radial-gradient(circle,#ffd97855,transparent 68%)}
.discover-feature.learn .discover-feature-icon{background:linear-gradient(135deg,#ffe29a,#c98a1b)}
.discover-feature .df-tag{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:99px;background:#ffffff22;font-size:9.5px;font-weight:800}

/* ---------- أيقونة المناسبات (صورة) ---------- */
.occ-img{width:34px;height:34px;display:block}

/* ---------- تعلّم الصلاة ---------- */
.ln-hero{position:relative;overflow:hidden;border-radius:28px;padding:20px;color:#fff;background:linear-gradient(150deg,#0f766e,#064e3b 70%);box-shadow:0 18px 40px rgba(6,78,59,.3)}
.ln-hero:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,226,150,.14),transparent 30%,rgba(255,226,150,.1),transparent 60%);animation:sbSpin 34s linear infinite}
.ln-hero>*{position:relative}
.ln-hero h2{margin:0 0 4px;font-size:23px}.ln-hero p{margin:0;font-size:13px;opacity:.92;line-height:1.8}
.ln-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:12px}.ln-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffe29a,#f5b83d);border-radius:99px;transition:width .6s}
.ln-path{position:relative;margin-top:14px;padding-inline-start:0}
.ln-lesson{display:flex;align-items:center;gap:13px;width:100%;text-align:right;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:22px;padding:14px;margin-top:10px;position:relative;transition:.15s}
.ln-lesson:active{transform:scale(.985)}
.ln-num{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;flex:none;font-size:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 25%,var(--card)),var(--card));border:1px solid var(--line)}
.ln-lesson.done .ln-num{background:linear-gradient(145deg,var(--primary),var(--primary2));color:#fff;border-color:transparent}
.ln-lesson b{display:block;font-size:15px}.ln-lesson small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.ln-lesson .tm{margin-inline-start:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.ln-sec{margin-top:14px;border-radius:22px;border:1px solid var(--line);background:var(--card);padding:16px}
.ln-sec h3{margin:0 0 8px;font-size:15px}
.ln-sec p,.ln-sec li{font-size:13.5px;line-height:2;color:var(--text)}
.ln-sec ul,.ln-sec ol{margin:6px 0 0;padding-inline-start:20px}
.ln-ar{font-family:"Amiri","Noto Naskh Arabic",serif;font-size:21px;line-height:2.2;text-align:center;margin:10px 0;padding:12px;border-radius:16px;background:var(--soft)}
.ln-tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:800;background:var(--soft);color:var(--primary);margin-inline-end:5px}
.ln-table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:12.5px}
.ln-table td{padding:10px 8px;background:var(--soft);text-align:center}
.ln-table td:first-child{border-radius:0 12px 12px 0;font-weight:800}.ln-table td:last-child{border-radius:12px 0 0 12px}
.ln-wudu{display:grid;grid-template-columns:1fr;gap:9px;margin-top:8px}
.ln-w{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:18px;background:var(--soft);border:1px solid var(--line)}
.ln-w .em{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px;flex:none;background:radial-gradient(circle at 30% 25%,#e0f7ff,#8fd3f0);position:relative;overflow:hidden}
.ln-w .em:after{content:"";position:absolute;left:50%;top:-8px;width:5px;height:8px;border-radius:50% 50% 60% 60%;background:#4aa8d6aa;animation:lnDrop 2.4s ease-in infinite}
@keyframes lnDrop{0%{transform:translate(-50%,-6px);opacity:0}20%{opacity:1}100%{transform:translate(-50%,58px);opacity:0}}
.ln-w b{display:block;font-size:13.5px}.ln-w small{color:var(--muted);font-size:12px;line-height:1.7}
.ln-w .n{margin-inline-start:auto;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:900;font-size:12px;flex:none}
.pose-card{border-radius:22px;border:1px solid var(--line);background:var(--card);margin-top:12px;overflow:hidden}
.pose-fig{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 10%,var(--card)),var(--card));padding:8px 0 0;text-align:center;position:relative}
.pose-fig svg{width:100%;max-width:300px;height:auto;display:inline-block}
.pose-fig .qb{position:absolute;top:10px;inset-inline-end:12px;font-size:11px;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:4px}
.pose-body{padding:12px 14px 16px}
.pose-body h4{margin:0 0 4px;font-size:15px}.pose-body .step{color:var(--primary);font-size:11.5px;font-weight:800}
.pose-body p{margin:4px 0 0;font-size:13px;line-height:1.95;color:var(--muted)}
.pose-body .ln-ar{font-size:19px;padding:9px}
.fig-body{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fig-in{animation:figIn .5s ease both}
@keyframes figIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.trainer{border-radius:26px;border:1px solid var(--line);background:var(--card);overflow:hidden;margin-top:12px}
.tr-dots{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:10px 14px 0}
.tr-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.2s}.tr-dots i.on{background:var(--primary);transform:scale(1.35)}.tr-dots i.past{background:color-mix(in srgb,var(--primary) 55%,var(--line))}
.tr-ctl{display:flex;gap:8px;padding:0 14px 14px}.tr-ctl .btn{flex:1}
.tr-done{padding:26px 16px;text-align:center}.tr-done .big{font-size:52px}
.quiz-q{border-radius:20px;border:1px solid var(--line);background:var(--card);padding:15px;margin-top:12px}
.quiz-q b{display:block;margin-bottom:9px;font-size:14.5px;line-height:1.8}
.quiz-o{display:block;width:100%;text-align:right;border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:14px;padding:11px 13px;margin-top:7px;font-weight:700;font-size:13.5px}
.quiz-o.ok{background:#16a34a;color:#fff;border-color:transparent}.quiz-o.bad{background:#dc2626;color:#fff;border-color:transparent}
.quiz-res{text-align:center;padding:24px 14px}.quiz-res .big{font-size:56px;font-weight:900;color:var(--primary)}

/* ---------- رحلتي ---------- */
.jr-hero{position:relative;overflow:hidden;border-radius:30px;padding:20px;color:#fff;background:linear-gradient(150deg,#0f766e,#1e1b4b 85%);box-shadow:0 20px 44px rgba(15,23,80,.32)}
.jr-hero:before{content:"";position:absolute;inset:-30% -10% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.28),transparent 65%)}
.jr-hero>*{position:relative}
.jr-top{display:flex;align-items:center;gap:14px}
.jr-ring{--p:0%;width:92px;height:92px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(#ffe29a var(--p),rgba(255,255,255,.18) 0)}
.jr-ring div{width:74px;height:74px;border-radius:50%;background:#10204a;display:grid;place-items:center;text-align:center;line-height:1.1}
.jr-ring b{font-size:24px;color:#ffe29a;display:block}.jr-ring small{font-size:9.5px;opacity:.85}
.jr-top h2{margin:0;font-size:21px}.jr-top p{margin:4px 0 0;font-size:12.5px;opacity:.9;line-height:1.7}
.jr-xp{height:8px;border-radius:99px;background:rgba(255,255,255,.2);margin-top:14px;overflow:hidden}.jr-xp i{display:block;height:100%;background:linear-gradient(90deg,#ffe29a,#f5b83d);border-radius:99px}
.jr-xpt{display:flex;justify-content:space-between;font-size:10.5px;opacity:.85;margin-top:5px}
.jr-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.jr-stat{border-radius:22px;padding:14px;border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden}
.jr-stat .ic{font-size:22px}.jr-stat b{display:block;font-size:26px;margin-top:4px;color:var(--primary);line-height:1.1}.jr-stat small{color:var(--muted);font-size:11.5px}
.jr-chart{display:flex;align-items:flex-end;gap:5px;height:110px;padding-top:8px}
.jr-chart div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.jr-chart i{display:block;width:100%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--primary),var(--primary2));min-height:4px;transition:height .6s}
.jr-chart span{font-size:9.5px;color:var(--muted)}.jr-chart .today i{outline:2px solid var(--gold);outline-offset:1px}.jr-chart .zero i{background:var(--line)}
.jr-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}
.jr-badge{border-radius:18px;padding:12px 6px;text-align:center;border:1px solid var(--line);background:var(--card)}
.jr-badge .e{font-size:28px;display:block;filter:grayscale(1);opacity:.35}.jr-badge b{display:block;font-size:11px;margin-top:5px;color:var(--muted)}
.jr-badge.on{background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 20%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.jr-badge.on .e{filter:none;opacity:1}.jr-badge.on b{color:var(--text)}
.jr-msg{margin-top:12px;border-radius:20px;padding:14px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--card)),var(--card));border:1px solid var(--line);font-size:13.5px;line-height:1.95}


/* ---------- مركز صحة الإشعارات ---------- */
.nh-card{margin-top:12px;border-radius:22px;border:1px solid var(--line);background:var(--card);padding:16px}
.nh-card h3{margin:0 0 10px;font-size:15px}
.nh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nh-grid div{border-radius:16px;background:var(--soft);padding:11px 6px;text-align:center}
.nh-grid b{display:block;font-size:21px;color:var(--primary);line-height:1.1}.nh-grid small{font-size:10.5px;color:var(--muted)}
.nh-next{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.nh-next:first-of-type{margin-top:10px}
.nh-next .t{margin-inline-start:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}
.nh-ok{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:4px 11px;border-radius:99px;background:color-mix(in srgb,#16a34a 18%,var(--card));color:#16a34a}
.nh-bad{background:color-mix(in srgb,#dc2626 16%,var(--card));color:#dc2626}
@media(prefers-reduced-motion:reduce){.ln-hero:before,.ln-w .em:after{animation:none!important}}