/* ============================================================
   منصة نُور التعليمية — التنسيقات المخصصة
   ============================================================ */
:root{
  --brand:#4f46e5; --brand-2:#7c3aed; --accent:#f59e0b; --success:#10b981;
  --radius:1.25rem;
}
*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:auto; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
body{ font-family:'Tajawal',sans-serif; overflow-x:hidden; padding-top:0!important; }
h1,h2,h3,h4,h5,h6,.font-head{ font-family:'Cairo',sans-serif; }

/* ---------- أدوات عامة ---------- */
.container-x{ width:100%; max-width:80rem; margin-inline:auto; padding-inline:1.25rem; }
@media(min-width:768px){ .container-x{ padding-inline:2rem; } }

.gradient-text{ background:linear-gradient(120deg,var(--brand),var(--brand-2),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.gradient-bg{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.glass{ background:rgba(255,255,255,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.dark .glass{ background:rgba(15,23,42,.72); }

.card-hover{ transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s; }
.card-hover:hover{ transform:translateY(-8px); box-shadow:0 24px 48px -16px rgba(79,70,229,.28); }

.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{ content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  transform:translateX(-150%); transition:transform .7s; }
.btn-shine:hover::after{ transform:translateX(150%); }
[dir="rtl"] .btn-shine::after{ transform:translateX(150%); }
[dir="rtl"] .btn-shine:hover::after{ transform:translateX(-150%); }

/* ---------- الهيدر ---------- */
#site-header{ transition:all .4s cubic-bezier(.22,1,.36,1); }
#site-header.scrolled{ box-shadow:0 10px 40px -12px rgba(2,6,23,.18); }
#site-header.scrolled .header-inner{ padding-block:.55rem; }
.nav-link{ position:relative; padding:.5rem .1rem; font-weight:600; }
.nav-link::after{ content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:2.5px; border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .35s cubic-bezier(.22,1,.36,1); }
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--brand); }

/* قائمة منسدلة */
.dropdown-panel{ opacity:0; visibility:hidden; transform:translateY(12px); transition:all .3s cubic-bezier(.22,1,.36,1); }
.dropdown-parent:hover .dropdown-panel,.dropdown-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }

/* القائمة الجانبية للموبايل */
#mobile-drawer{
  transition:inset-inline-end .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility .35s ease;
  inset-inline-end:-110%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#mobile-drawer.open{
  inset-inline-end:0!important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#mobile-overlay{ transition:opacity .4s; }

/* ---------- البطل (Hero) ---------- */
#hero-3d{ position:absolute; inset:0; width:100%!important; height:100%!important; z-index:0; display:block; pointer-events:none; }
.hero-content{ position:relative; z-index:2; }
.hero-badge{ animation:floaty 5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.45; animation:blobMove 14s ease-in-out infinite alternate; }
@keyframes blobMove{ from{ transform:translate(0,0) scale(1) } to{ transform:translate(40px,-50px) scale(1.15) } }

.feature-cta-section{ position:relative; z-index:10; margin-top:-3.5rem; padding-bottom:3.5rem; }
.feature-card-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.5rem; }
.feature-card{ position:relative; display:flex; align-items:center; gap:1.2rem; min-height:10.5rem; padding:1.8rem 1.65rem; border-radius:1.5rem; background:rgba(255,255,255,.78); border:1px solid rgba(226,232,240,.9); box-shadow:0 20px 45px rgba(20,30,70,.08); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:transform .35s ease, box-shadow .35s ease; }
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 28px 52px rgba(20,30,70,.12); }
.feature-card__icon{ width:4.5rem; height:4.5rem; flex-shrink:0; border-radius:1.2rem; display:flex; align-items:center; justify-content:center; font-size:1.9rem; }
.feature-card--blue .feature-card__icon{ background:linear-gradient(135deg,#e7edff,#dfe8ff); color:#2f5bff; }
.feature-card--green .feature-card__icon{ background:linear-gradient(135deg,#e8f9f1,#daf5e8); color:#1bb676; }
.feature-card__content{ flex:1; }
.feature-card__title{ margin:0 0 .5rem; font-size:clamp(1.5rem, 2vw, 2rem); line-height:1.3; font-weight:900; color:#111827; }
.feature-card__desc{ margin:0; font-size:1rem; line-height:1.7; color:#667085; }

.cta-banner{ position:relative; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:1.5rem; min-height:13.5rem; margin-top:2rem; padding:2rem 2rem 1.4rem; border-radius:1.75rem; background:linear-gradient(135deg,#2f3fd7,#4f46e5); overflow:hidden; box-shadow:0 32px 60px rgba(79,70,229,.25); }
.cta-banner::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.2) 1px, transparent 1.5px); background-size:22px 22px; opacity:.35; }
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner__content{ padding-inline:0.5rem; }
.cta-banner__title{ margin:0 0 .85rem; font-size:clamp(2rem, 3vw, 3.2rem); line-height:1.2; color:#fff; font-weight:900; }
.cta-banner__text{ margin:0 0 1.2rem; max-width:32rem; color:rgba(255,255,255,.82); font-size:1.05rem; line-height:1.8; }
.cta-banner__button{ display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.5rem; border-radius:1rem; background:#fff; color:#2f3fd7; font-weight:800; box-shadow:0 18px 30px rgba(17,24,39,.18); transition:transform .2s ease, box-shadow .2s ease; }
.cta-banner__button:hover{ transform:translateY(-2px); box-shadow:0 22px 34px rgba(17,24,39,.22); }

.cta-banner__art{ position:relative; min-height:13rem; }
.cta-badge{ position:absolute; top:0.2rem; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; min-width:7.2rem; padding:.7rem .9rem; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.82rem; font-weight:800; box-shadow:0 14px 24px rgba(17,24,39,.15); }
.book-stack{ position:absolute; right:1rem; bottom:0; width:12.5rem; height:8rem; }
.book{ position:absolute; bottom:0; display:block; border-radius:0.55rem; background:linear-gradient(180deg,#2a263c,#120e1d); box-shadow:0 18px 24px rgba(11,18,34,.2); }
.book--1{ right:0; width:7.5rem; height:3.8rem; }
.book--2{ right:1.2rem; width:7.1rem; height:4.2rem; background:linear-gradient(180deg,#3b304d,#1d1824); }
.book--3{ right:2.2rem; width:6.7rem; height:4.5rem; background:linear-gradient(180deg,#1d1a2d,#090b14); }
.book--4{ right:3.1rem; width:6.1rem; height:4.9rem; }

.graduation-cap{ position:absolute; right:4.6rem; bottom:5rem; width:7.3rem; height:5.1rem; }
.cap-top{ position:absolute; left:0; right:0; top:0.2rem; height:2.8rem; border-radius:1.4rem 1.4rem 0 0; background:linear-gradient(180deg,#1a1b2b,#0a0d15); transform:skewX(-10deg); box-shadow:0 18px 20px rgba(15,23,42,.12); }
.cap-top::before{ content:""; position:absolute; inset:0.5rem 0.8rem auto; height:0.85rem; border-radius:999px; background:linear-gradient(90deg,#192d57,#1f59cf); }
.cap-band{ position:absolute; left:0.4rem; right:0.5rem; bottom:0.95rem; height:0.7rem; border-radius:999px; background:#f2c15d; box-shadow:inset 0 0 0 1px rgba(111,84,25,.3); }
.cap-tassel{ position:absolute; right:1rem; bottom:-1.6rem; width:0.18rem; height:2.7rem; background:#f4d98b; }
.cap-tassel::before{ content:""; position:absolute; right:-0.32rem; top:-0.4rem; width:0.7rem; height:0.7rem; border-radius:50%; background:#f4d98b; box-shadow:0 0 0 3px rgba(230,201,122,.22); }

.mini-icon{ position:absolute; display:flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.9rem; box-shadow:0 12px 18px rgba(17,24,39,.12); }
.mini-icon--video{ left:1rem; top:1.8rem; }
.mini-icon--check{ right:3.6rem; top:1.4rem; }
.mini-icon--spark{ left:3.8rem; bottom:0.8rem; }

@media (max-width: 767px){
  .feature-cta-section{ margin-top:-2rem; }
  .feature-card-grid{ grid-template-columns:1fr; }
  .feature-card{ min-height:auto; }
  .cta-banner{ grid-template-columns:1fr; padding:1.6rem 1.2rem 1.1rem; }
  .cta-banner__title{ font-size:2.1rem; }
  .cta-banner__art{ min-height:11.5rem; }
  .book-stack{ transform:scale(.85); transform-origin:right bottom; }
  .graduation-cap{ right:3.7rem; bottom:4.5rem; transform:scale(.9); }
}

/* ---------- بطاقات ---------- */
.course-img{ transition:transform .7s cubic-bezier(.22,1,.36,1); }
.course-card:hover .course-img{ transform:scale(1.08); }
.rating-stars{ color:#f59e0b; letter-spacing:2px; }

.blog-editor-wrap{ border:1px solid rgba(148,163,184,.35); border-radius:1.1rem; background:rgba(248,250,252,.8); overflow:hidden; }
.dark .blog-editor-wrap{ background:rgba(15,23,42,.72); border-color:rgba(148,163,184,.25); }
.blog-editor-toolbar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.7rem .8rem; border-bottom:1px solid rgba(148,163,184,.25); background:rgba(255,255,255,.5); }
.dark .blog-editor-toolbar{ background:rgba(15,23,42,.45); }
.blog-editor-btn, .blog-editor-upload{ display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(148,163,184,.35); background:#fff; color:#334155; border-radius:.75rem; padding:.5rem .7rem; font-size:.75rem; font-weight:800; cursor:pointer; transition:all .2s ease; }
.dark .blog-editor-btn, .dark .blog-editor-upload{ background:rgba(15,23,42,.75); color:#e2e8f0; border-color:rgba(148,163,184,.18); }
.blog-editor-btn:hover, .blog-editor-upload:hover{ border-color:rgba(79,70,229,.45); color:#4f46e5; }
.blog-editor-upload input{ display:none; }
.blog-editor-content{ min-height:18rem; max-height:26rem; overflow:auto; padding:1rem 1rem 1.25rem; outline:none; line-height:1.9; color:#0f172a; }
.dark .blog-editor-content{ color:#e2e8f0; }
.blog-editor-content h2{ font-size:1.6rem; font-weight:900; margin:1rem 0 .6rem; color:#111827; }
.dark .blog-editor-content h2{ color:#f8fafc; }
.blog-editor-content p{ margin:0 0 .9rem; }
.blog-editor-content ul, .blog-editor-content ol{ margin:0 0 .9rem 1.1rem; }
.blog-editor-content blockquote{ margin:1rem 0; padding:1rem 1.1rem; border-inline-start:4px solid #4f46e5; background:rgba(79,70,229,.08); border-radius:.75rem; color:#334155; }
.dark .blog-editor-content blockquote{ color:#cbd5e1; }
.blog-editor-content img{ display:block; max-width:100%; border-radius:1rem; margin:1rem 0; box-shadow:0 15px 35px rgba(15,23,42,.12); }
.blog-editor-preview{ border-top:1px solid rgba(148,163,184,.25); padding:1rem; background:rgba(255,255,255,.3); }
.dark .blog-editor-preview{ background:rgba(15,23,42,.3); }
.blog-editor-preview__body{ min-height:4rem; color:#334155; line-height:1.9; }
.dark .blog-editor-preview__body{ color:#cbd5e1; }
.blog-editor-preview__body h2{ font-size:1.5rem; margin:0 0 .8rem; font-weight:900; }
.blog-editor-preview__body img{ display:block; max-width:100%; border-radius:1rem; margin:1rem 0; }
.blog-editor-preview__body blockquote{ margin:1rem 0; padding:1rem 1.1rem; border-inline-start:4px solid #4f46e5; background:rgba(79,70,229,.08); border-radius:.75rem; }

.blog-article-content{ font-family:'Cairo','Tajawal',sans-serif; }
.blog-article-content > *:first-child{ margin-top:0; }
.blog-article-content h1, .blog-article-content h2, .blog-article-content h3, .blog-article-content h4{ font-weight:900; color:#0f172a; margin:1.8rem 0 .9rem; line-height:1.5; }
.dark .blog-article-content h1, .dark .blog-article-content h2, .dark .blog-article-content h3, .dark .blog-article-content h4{ color:#f8fafc; }
.blog-article-content h2{ font-size:clamp(1.6rem,2vw,2.2rem); }
.blog-article-content h3{ font-size:clamp(1.3rem,1.7vw,1.7rem); }
.blog-article-content p, .blog-article-content li{ color:#475569; line-height:2; font-size:1.03rem; }
.dark .blog-article-content p, .dark .blog-article-content li{ color:#cbd5e1; }
.blog-article-content p{ margin:0 0 1.1rem; }
.blog-article-content ul, .blog-article-content ol{ margin:0 0 1.2rem 1.3rem; padding:0; }
.blog-article-content li{ margin-bottom:.35rem; }
.blog-article-content strong{ color:#0f172a; }
.dark .blog-article-content strong{ color:#f8fafc; }
.blog-article-content blockquote{ margin:1.5rem 0; padding:1.1rem 1.2rem 1.1rem 1.5rem; border-inline-start:4px solid #4f46e5; background:linear-gradient(135deg, rgba(79,70,229,.08), rgba(99,102,241,.04)); border-radius:1rem; color:#334155; }
.dark .blog-article-content blockquote{ color:#e2e8f0; }
.blog-article-content img{ display:block; width:100%; max-width:100%; border-radius:1.2rem; margin:1.5rem 0; box-shadow:0 18px 40px rgba(15,23,42,.12); }
.blog-article-content a{ color:#4f46e5; text-decoration:underline; }
.blog-article-content code{ background:rgba(148,163,184,.12); padding:.15rem .45rem; border-radius:.45rem; font-size:.9em; }

/* ---------- Accordion (FAQ) ---------- */
.acc-body{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.22,1,.36,1); }
.acc-item.open .acc-body{ max-height:400px; }
.acc-item.open .acc-icon{ transform:rotate(45deg); }
.acc-icon{ transition:transform .35s; }

/* ---------- فقاعة الإعدادات ---------- */
#settings-fab{ transition:transform .3s; }
#settings-fab:hover{ transform:rotate(25deg) scale(1.08); }
#settings-overlay{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s ease; }
#settings-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }
#settings-panel{ transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease, visibility .3s ease; transform:translateX(-120%); opacity:0; visibility:hidden; pointer-events:none; }
[dir="ltr"] #settings-panel{ transform:translateX(120%); }
#settings-panel.open{ transform:translateX(0)!important; opacity:1; visibility:visible; pointer-events:auto; }
.theme-dot{ width:34px; height:34px; border-radius:99px; cursor:pointer; border:3px solid transparent; transition:all .25s; }
.theme-dot.active{ border-color:#fff; box-shadow:0 0 0 3px var(--brand); transform:scale(1.12); }

/* ---------- المودال ---------- */
.modal-backdrop{ opacity:0; transition:opacity .35s; }
.modal-backdrop.show{ opacity:1; }
.modal-box{ opacity:0; transform:translateY(-30px) scale(.96); transition:all .4s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; max-height:90vh; overflow:hidden; }
.modal-box > div:nth-child(2){ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling: touch; }
.modal-box.show .modal-box{ opacity:1; transform:translateY(0) scale(1); }
.modal-backdrop.show .modal-box{ opacity:1; transform:translateY(0) scale(1); }

/* ---------- التوست ---------- */
#toast-wrap{ position:fixed; bottom:1.5rem; inset-inline-start:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.6rem; }
.toast{ animation:toastIn .45s cubic-bezier(.22,1,.36,1); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:translateY(0) } }
.toast.out{ animation:toastOut .4s forwards; }
@keyframes toastOut{ to{ opacity:0; transform:translateY(15px) } }

/* ---------- الجداول ---------- */
.tbl th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.tbl tbody tr{ transition:background .25s; animation:rowIn .5s both; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }

/* ---------- لوحات التحكم ---------- */
.dash-link{ transition:all .3s; border-inline-start:4px solid transparent; }
.dash-link.active{ background:linear-gradient(90deg,rgba(79,70,229,.14),transparent); border-inline-start-color:var(--brand); color:var(--brand); font-weight:700; }
.dark .dash-link.active{ background:linear-gradient(90deg,rgba(124,58,237,.22),transparent); }
.dash-section{ display:none; animation:secIn .55s cubic-bezier(.22,1,.36,1); min-height:0; }
.dash-section.active{ display:block; }
@keyframes secIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:translateY(0) } }
.kpi-card{ position:relative; overflow:hidden; }
.kpi-card::before{ content:''; position:absolute; top:-40%; inset-inline-end:-20%; width:140px; height:140px; border-radius:99px;
  background:currentColor; opacity:.1; }

/* شريط تقدم */
.progress-track{ background:rgba(148,163,184,.25); border-radius:99px; overflow:hidden; }
.progress-fill{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius:99px; transition:width 1.2s cubic-bezier(.22,1,.36,1); }

/* ---------- Swiper ---------- */
.swiper-pagination-bullet{ background:var(--brand); opacity:.35; }
.swiper-pagination-bullet-active{ opacity:1; width:22px; border-radius:99px; }

/* ---------- سكرول بار ---------- */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--brand),var(--brand-2)); border-radius:99px; }

/* ---------- متفرقات ---------- */
.typed-cursor{ color:var(--accent); font-weight:700; }
.tab-btn{ transition:all .3s; }
.tab-btn.active{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 8px 20px -8px var(--brand); }
.chip{ transition:all .25s; cursor:pointer; }
.chip.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
input,select,textarea{ outline:none; }
input:focus,select:focus,textarea:focus{ border-color:var(--brand)!important; box-shadow:0 0 0 3px rgba(79,70,229,.15); }
.skeleton{ background:linear-gradient(90deg,rgba(148,163,184,.15) 25%,rgba(148,163,184,.3) 50%,rgba(148,163,184,.15) 75%);
  background-size:200% 100%; animation:sk 1.4s infinite; border-radius:.5rem; }
@keyframes sk{ to{ background-position:-200% 0 } }
.spinner{ width:38px; height:38px; border:3.5px solid rgba(79,70,229,.2); border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }
html.reduced-motion *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }