/* ====================================================
   theme-site-light.css — Next Horizon
   Site-wide light theme. Loaded by includes/navbar.php on every
   page that renders the shared navbar. Activated by html.light-theme
   (toggled via js/theme-toggle.js, stored in localStorage "nh_theme").

   Part 1: theme-button base styles (both themes)
   Part 2: html.light-theme overrides
   ==================================================== */

/* ── Part 1: زر الثيم في النافبار ── */
.nav-theme-btn{
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;
  font-size:14px;color:rgba(206,206,206,.55);
  padding:6px 8px;border-radius:6px;
  transition:color .2s,background .2s,transform .2s;
  white-space:nowrap;
}
.nav-theme-btn:hover{color:#ffd75e;background:rgba(255,255,255,.06);transform:rotate(12deg)}
html.light-theme .nav-theme-btn{color:#5a677f}
html.light-theme .nav-theme-btn:hover{color:#e08700;background:rgba(16,26,46,.06)}
@media (max-width:960px){ .nav-actions .nav-theme-btn{display:none !important} }

.mob-theme-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:none;cursor:pointer;
  font:inherit;color:inherit;padding:10px 14px;border-radius:8px;
}
.mob-theme-btn:hover{background:rgba(42,125,216,.1)}

/* ── Part 2: الوضع الفاتح ── */
html.light-theme{
  --bg:#eef1f7;
  --bg-card:#ffffff;
  --bg-deep:#e7ebf4;
  --bg-surface:#f3f6fb;
  --bg-input:#f7f9fd;
  --bd:#c7d6e8;
  --soft:#46526b;
  --white:#101a2e;

  /* ── متغيرات "index-premium.css" (طبقة تصميم الرئيسية) ──
     هذا الملف يعرّف :root خاص بيه (--nx-*) منفصل تماماً عن
     المتغيرات فوق، وهو سبب أغلب "الكتابة البيضاء اللي ما تبانش"
     في الصفحة الرئيسية: كلاسات كيما .hero-tagline و .sec-title
     تستعمل var(--nx-ink) لا var(--white) */
  --nx-ink:#101a2e;
  --nx-dim:#5c6880;
  --nx-faint:#93a0b5;
  --nx-line:rgba(16,26,46,.08);
  --nx-line-strong:rgba(16,26,46,.16);
  --nx-surface:rgba(16,26,46,.025);
  /* --nx-surface-2 مقصود نتركوها كيفما هي (داكنة) — يستعملها .feat-pane
     و.vbcard (بطاقات الفيديو) اللي خلّيناهم داكنين عمداً */
}

html.light-theme body{background:var(--bg);color:var(--soft)}

/* Navbar */
html.light-theme .navbar{
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(42,125,216,.18);
}
html.light-theme .navbar.scrolled{
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 4px 24px rgba(16,26,46,.12),0 1px 0 rgba(42,125,216,.18);
}
html.light-theme .nav-pill{background:rgba(16,26,46,.05);border-color:rgba(42,125,216,.2)}
html.light-theme .nav-pill a{color:#46526b}
html.light-theme .nav-pill a:hover,
html.light-theme .nav-pill a.active{color:#101a2e}
html.light-theme .nav-lang-toggle{color:rgba(70,82,107,.6)}
html.light-theme .nav-lang-toggle:hover{color:#101a2e;background:rgba(16,26,46,.05)}
html.light-theme .nav-lang-active{color:#101a2e}
html.light-theme .nav-ham span{background:#101a2e}

/* Dropdowns / popups (notifications, avatar, store flyout) */
html.light-theme .nav-popup,
html.light-theme .nav-dd,
html.light-theme .nav-dd-sub{
  background:#ffffff;border-color:rgba(42,125,216,.22);
  box-shadow:0 14px 40px rgba(16,26,46,.16);
}
html.light-theme .nav-popup a,
html.light-theme .nav-dd a{color:#46526b}
html.light-theme .nav-popup a:hover,
html.light-theme .nav-dd a:hover{color:#101a2e;background:rgba(42,125,216,.08)}
html.light-theme .nav-popup-hd{color:#101a2e}

/* Mobile nav */
html.light-theme .mobile-nav{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(42,125,216,.18);
}
html.light-theme .mobile-nav a,
html.light-theme .mob-services-toggle,
html.light-theme .mob-lang-btn,
html.light-theme .mob-theme-btn{color:#46526b}
html.light-theme .mobile-nav a:hover,
html.light-theme .mob-services-toggle:hover{color:#101a2e;background:rgba(42,125,216,.1)}

/* عناصر ملوّنة يبقى نصها أبيض */
html.light-theme .nav-cta,
html.light-theme .btn-primary,
html.light-theme .mob-new-badge,
html.light-theme .nav-dd-count{color:#fff}

/* Footer (لو يستعمل خلفية داكنة صريحة يبقى داكن — مقبول كتباين) */
html.light-theme footer a{color:#46526b}

/* نصوص شفافة بيضاء شائعة عبر الموقع */
html.light-theme .text-muted{color:#7b879c}

/* ════════════════════════════════════════════════════
   الصفحة الرئيسية — تصحيحات العناصر ذات الألوان الداكنة
   المكتوبة حرفياً (hardcoded) في index1-2-0.css و index.php
   ════════════════════════════════════════════════════ */

/* الشعار الأبيض يولي داكن على الخلفية الفاتحة */
html.light-theme .nav-logo-img,
html.light-theme .footer-logo-img{filter:brightness(0) opacity(.82)}

/* ── HERO ── */
html.light-theme .hero{background:radial-gradient(ellipse 100% 80% at 50% 0%,#ffffff 0%,#eef1f7 60%)}
html.light-theme .hero-video-bg::after{
  background:
    linear-gradient(to bottom, rgba(238,241,247,.88) 0%, rgba(238,241,247,.72) 35%, rgba(238,241,247,.72) 65%, rgba(238,241,247,.98) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(238,241,247,.5) 0%, transparent 100%);
}
html.light-theme .hero-tagline{text-shadow:0 0 40px rgba(42,125,216,.25)}
html.light-theme .hero-slogan{color:#5c6880}
html.light-theme .btn-outline{background:rgba(16,26,46,.04);color:#101a2e;border-color:rgba(16,26,46,.28)}
html.light-theme .btn-outline:hover{background:rgba(16,26,46,.08);border-color:rgba(16,26,46,.45);box-shadow:0 12px 30px rgba(16,26,46,.12)}
html.light-theme .stat-card{background:rgba(255,255,255,.85);border-color:rgba(42,125,216,.3)}
html.light-theme .stat-label{color:#7b879c}
html.light-theme .stat-value{text-shadow:none}
html.light-theme .hero-bg-txt{opacity:.04}

/* ── شريط الأرقام (stats bar) ── */
html.light-theme .stats-bar{background:rgba(255,255,255,.8);border-color:rgba(42,125,216,.15)}
html.light-theme .sbar-val{color:#101a2e;text-shadow:none}
html.light-theme .sbar-lbl{color:#7b879c}

/* ── شريط العلامات (brands marquee) ── */
html.light-theme .brand-item{filter:grayscale(1) brightness(.35);opacity:.55}
html.light-theme .brand-item:hover{filter:grayscale(0) brightness(1);opacity:1}
html.light-theme .brand-text-fallback{color:#7b879c}

/* ── عناوين الأقسام ── */
html.light-theme .sec-sub{color:#5c6880}

/* ── What Sets Us Apart (feat hub) ── */
html.light-theme .feat-tab{background:#ffffff;border-color:rgba(42,125,216,.2)}
html.light-theme .feat-tab:hover{background:rgba(42,125,216,.06)}
html.light-theme .feat-tab.active{background:rgba(42,125,216,.1)}
html.light-theme .feat-tab-title{color:#46526b}
html.light-theme .feat-tab.active .feat-tab-title{color:#101a2e}
/* اللوحة الكبيرة تبقى داكنة (صورة + تدرج) — نصها أبيض أصلاً فتبقى مقروءة */
html.light-theme .feat-pane{border-color:rgba(16,26,46,.25);background:rgba(16,26,46,.9)}

/* بطاقات feat-card العادية */
html.light-theme .feat-card{background:#ffffff;border-color:rgba(42,125,216,.18)}
html.light-theme .feat-card:hover{box-shadow:0 20px 60px rgba(16,26,46,.14),0 0 40px rgba(42,125,216,.08)}
html.light-theme .feat-desc{color:#5c6880}
html.light-theme .feat-img{background-color:#dde5f0}

/* ── From brief to delivery (process) ── */
html.light-theme .proc-card{background:#ffffff;border-color:rgba(42,125,216,.2)}
html.light-theme .proc-card.active{background:#f4f8fe;box-shadow:0 0 40px rgba(42,125,216,.12)}
html.light-theme .proc-title{color:#101a2e}
html.light-theme .proc-desc{color:#5c6880}

/* ── شريط التطبيق + قسم التحميل ── */
html.light-theme .app-strip{background:rgba(255,255,255,.85);border-top-color:rgba(16,26,46,.08)}
html.light-theme .app-strip-title{color:#101a2e}
html.light-theme .app-strip-copy span,
html.light-theme .app-strip-sub{color:#7b879c}
html.light-theme .app-download-desc{color:#5c6880}
html.light-theme .app-feature-item{color:#46526b}
html.light-theme .app-stat-lbl{color:#7b879c}
html.light-theme .app-dl-btn{color:#fff}

/* ── التقييمات (reviews) ── */
html.light-theme .reviews-pill{background:#ffffff;border-color:rgba(42,125,216,.25);color:#46526b}
html.light-theme .tp-badge{background:#ffffff;border-color:rgba(0,182,122,.4)}
html.light-theme .clutch-badge{background:#ffffff;border-color:rgba(232,69,30,.4)}
html.light-theme .clutch-badge-logo img{filter:none}
html.light-theme .rev-card{background:#ffffff;border-color:rgba(42,125,216,.18)}
html.light-theme .rev-card:hover{box-shadow:0 14px 40px rgba(16,26,46,.12),0 0 24px rgba(42,125,216,.06)}
html.light-theme .rev-text{color:#5c6880}

/* ── الأسئلة الشائعة (FAQ) ── */
html.light-theme .faq-item{background:#ffffff;border-color:rgba(42,125,216,.2)}
html.light-theme .faq-item.open{box-shadow:0 0 30px rgba(42,125,216,.1)}
html.light-theme .faq-q{color:#101a2e}
html.light-theme .faq-q:hover{color:#2A7DD8}
html.light-theme .faq-a p{color:#5c6880}

/* ── الفوتر ── */
/* css/index-premium.css (طبقة التصميم الجديد لواجهة يوليو) يفرض
   .footer{background:#04050a} حرفياً وأسبقيته أعلى من index1-2-0.css
   العادي — لازم نغلبه صراحة */
html.light-theme .footer{background:var(--bg-deep) !important;border-top-color:rgba(42,125,216,.16)}
html.light-theme .lang-btn:hover{color:#101a2e}
html.light-theme .footer-tagline{color:#7b879c}
html.light-theme .fsoc{background:rgba(16,26,46,.05);border-color:rgba(16,26,46,.12);color:#5c6880}
html.light-theme .fsoc:hover{color:#101a2e;background:rgba(42,125,216,.12)}
html.light-theme .footer-col-list li a{color:#5c6880}
html.light-theme .footer-col-list li a:hover{color:#101a2e}
html.light-theme .footer-copy{color:#93a0b5}

/* ── سلايدر الخدمات (fade slider) ── */
html.light-theme .fsld-body{background:#ffffff;border-top-color:rgba(42,125,216,.15)}
html.light-theme .fsld-overlay{background:linear-gradient(to bottom,transparent 40%,rgba(238,241,247,.35) 100%)}
html.light-theme .fsld-btn{background:rgba(255,255,255,.9);border-color:rgba(42,125,216,.3);color:#101a2e}

/* ════════════════════════════════════════════════════
   أيقونات النافبار (جرس، رسائل، سلة...) — كانت بيضاء فاختفت
   ════════════════════════════════════════════════════ */
html.light-theme .nav-icon-btn,
html.light-theme .nib-bell,
html.light-theme .nib-msg{
  background:rgba(16,26,46,.05);
  border-color:rgba(16,26,46,.15);
  color:#46526b;
}
html.light-theme .nav-icon-btn:hover,
html.light-theme .nib-bell:hover,
html.light-theme .nib-msg:hover{color:#101a2e}
html.light-theme .nav-popup-close{color:#7b879c}
html.light-theme .nav-popup-close:hover{color:#101a2e;background:rgba(16,26,46,.06)}
html.light-theme .npl-title,
html.light-theme .msg-name{color:#101a2e}
html.light-theme .npl-msg,
html.light-theme .msg-preview,
html.light-theme .npl-empty{color:#7b879c}
html.light-theme .avatar-popup .nav-popup-list li a{color:#46526b}
html.light-theme .avatar-popup .nav-popup-list li a:hover{color:#101a2e}
html.light-theme .nav-dropdown{background:#ffffff;border-color:rgba(42,125,216,.22);box-shadow:0 14px 40px rgba(16,26,46,.16)}
html.light-theme .nav-dropdown li a{color:#46526b}
html.light-theme .nav-dropdown li a:hover{color:#101a2e}
/* قائمة "المتجر" الفرعية (Plugins & Tools / Motion Templates...) — .nav-dd-has-sub > a
   مكتوب color:...!important، ورموز "Soon" شفافة بزاف (.28) فتختفي فوق الخلفية البيضاء */
html.light-theme .nav-dd-has-sub > a{color:#46526b !important}
html.light-theme .nav-dd-has-sub:hover > a{color:#101a2e !important}
html.light-theme .nav-dd-soon > span{color:#8b96a8}
/* .nav-dd-sub (الفلايأوت الجانبي "Prism Plugin") خلفيته داكنة حقيقية #141414 — تبقى كيفما هي، نصها فاتح ومقروء */
html.light-theme .lang-btn{color:#35507a}
html.light-theme .lang-btn:hover{color:#101a2e}
/* الحلقة حول نقطة "متصل الآن" كانت #0a0a0f (سوداء) لتندمج مع نافبار داكن */
html.light-theme .nav-avatar-dot{border-color:#f5f7fb}

/* شريط الأسماء المتحرك تحت الهيرو (ticker) */
html.light-theme .ticker-item{color:#35507a}
html.light-theme .hero-ticker{border-color:rgba(16,26,46,.1)}
html.light-theme .brand-item{filter:grayscale(1) brightness(.25);opacity:.7}
html.light-theme .brand-item:hover{filter:grayscale(0) brightness(1);opacity:1}

/* ════════════════════════════════════════════════════
   صفحة الأعمال (works.php) — كان فيها body داكن بـ !important
   ════════════════════════════════════════════════════ */
html.light-theme body{background:var(--bg) !important;color:var(--soft) !important}
html.light-theme .wk-hero{background:radial-gradient(ellipse 100% 80% at 50% 0%,#ffffff 0%,#eef1f7 70%)}
html.light-theme .wk-hero-fade{background:linear-gradient(to bottom,transparent 40%,#eef1f7 100%)}
html.light-theme .wk-hero-title{color:#101a2e}
html.light-theme .wk-hero-sub{color:#5c6880}
/* .wk-filter-btn الأصلي مكتوب بالكامل بـ !important — لازم !important باش نغلبه */
html.light-theme .wk-filter-btn{background:#ffffff !important;border-color:rgba(42,125,216,.25) !important;color:#46526b !important}
html.light-theme .wk-filter-btn:hover{color:#101a2e !important;border-color:rgba(42,125,216,.5) !important}
html.light-theme .wk-filter-btn.active{
  background:linear-gradient(135deg,rgba(42,125,216,.14),rgba(31,122,140,.08)) !important;
  color:#101a2e !important;border-color:var(--bm) !important;
}
/* بطاقات المشاريع (الفيديو) تبقى داكنة عمداً — لكن العنوان/الوصف تحتها
   شفاف بلا خلفية خاصة به (proj-info background:transparent) فيصير يجلس
   مباشرة فوق خلفية الصفحة — لازم يتلون غامق مع الوضع الفاتح */
html.light-theme .proj-title{color:#101a2e}
html.light-theme .proj-desc{color:#5c6880}
/* .stat-value في works.css مكتوب color:#fff حرفياً (خلاف index1-2-0.css اللي يستعمل var(--white)) */
html.light-theme .stat-value{color:#101a2e}

/* ════════════════════════════════════════════════════
   صفحة الفريق (About-Me.php / about-me-2-0.css)
   الهيرو والقسم كامل خلفيتهم مكتوبة حرفياً #0a0a0f/#0d1825،
   وعنوان الهيرو color:#fff !important — لازم !important باش نغلبه
   ════════════════════════════════════════════════════ */
html.light-theme .tc-page-hero{background:radial-gradient(ellipse 110% 90% at 50% 0%,#ffffff 0%,#eef1f7 65%) !important}
html.light-theme .am-hero-fade{background:linear-gradient(transparent,#eef1f7) !important}
html.light-theme .tc-section{background:var(--bg) !important}
html.light-theme .tc-hero-title{color:#101a2e !important}
html.light-theme .tc-hero-sub{color:#5c6880}
html.light-theme .tc-count-lbl{color:#7b879c}
/* بطاقات الأعضاء (tc-card) تبقى داكنة عمداً — نصوصها بيضاء أصلاً وتبقى مقروءة فوق خلفيتها الخاصة */

/* ════════════════════════════════════════════════════
   team/team_profile.php (بروفايل عضو الفريق) — الهيرو
   بلا خلفية خاصة، ونصوصه (الاسم، الدور، البايو...) بيضاء
   حرفياً. بطاقات المهارات (.tp-skill) والمنصات (.tp-platform-card)
   عندها خلفية داكنة حقيقية فتبقى كيفما هي
   ════════════════════════════════════════════════════ */
html.light-theme .tp-breadcrumb{color:#93a0b5}
html.light-theme .tp-breadcrumb a{color:#2A7DD8}
html.light-theme .tp-soc-btn{background:#ffffff;border-color:rgba(42,125,216,.22);color:#46526b}
html.light-theme .tp-name{color:#101a2e}
html.light-theme .tp-tagline{color:#5c6880}
html.light-theme .tp-meta{color:#5c6880}
html.light-theme .tp-stat-lbl{color:#93a0b5}
html.light-theme .tp-stats{border-color:rgba(16,26,46,.1)}
html.light-theme .tp-bio{color:#46526b}
html.light-theme .tp-platform-chip{background:#ffffff;color:#46526b}
html.light-theme .tp-section-title{color:#101a2e}

/* ════════════════════════════════════════════════════
   صفحات FAQ / Guide / Rules — نفس نمط الهيرو (خلفية راديال
   داكنة مكتوبة حرفياً). العنوان نفسه يستعمل var(--white)
   فيتبدل وحدو، لكن الخلفية والوصف الفرعي لازم تصليح يدوي
   ════════════════════════════════════════════════════ */
html.light-theme .faq-hero,
html.light-theme .guide-hero,
html.light-theme .rules-hero{
  background:radial-gradient(ellipse 90% 70% at 50% 0%,#ffffff 0%,#eef1f7 65%);
}
html.light-theme .faq-hero-sub,
html.light-theme .guide-hero-sub,
html.light-theme .rules-hero-sub{color:#5c6880}

/* نصوص أخرى مكتوبة حرفياً بيضاء (خلاف باقي الصفحة اللي تستعمل var(--white)) */
html.light-theme .faq-q-text{color:#101a2e}
html.light-theme .faq-answer p{color:#5c6880}
html.light-theme .faq-cat-item:hover,
html.light-theme .guide-toc-item:hover,
html.light-theme .rules-toc-item:hover{color:#101a2e !important}
html.light-theme .guide-toc-item,
html.light-theme .rules-toc-item{color:#7b879c}

/* ════════════════════════════════════════════════════
   صفحات تفاصيل الخدمة (Services.php, motion-graphics.php,
   video-camera.php, Video-reel.php, Video-youtube.php،
   project-details.php) — services1-0.css نفس نمط الهيرو.
   العنوان يستعمل var(--white) فيتبدل وحدو، الخلفية برك تحتاج تصليح.
   بطاقات svc-seller-card/svc-desc-box تبقى داكنة عمداً (self-contained)
   ════════════════════════════════════════════════════ */
html.light-theme .svc-hero{background:radial-gradient(ellipse 100% 80% at 50% 0%,#ffffff 0%,#eef1f7 70%)}

/* ════════════════════════════════════════════════════
   help.php — نفس نمط الهيرو الداكن حرفياً
   ════════════════════════════════════════════════════ */
html.light-theme .help-hero{background:radial-gradient(ellipse 100% 80% at 50% 0%,#ffffff 0%,#eef1f7 65%)}

/* ════════════════════════════════════════════════════
   motion-graphics.php — قسم mg-faq مكتوب بالكامل أبيض حرفياً
   على خلفية شبه شفافة rgba(42,125,216,.05)
   ════════════════════════════════════════════════════ */
html.light-theme .mg-faq h2,
html.light-theme .mg-faq summary{color:#101a2e}
html.light-theme .mg-faq details{background:rgba(42,125,216,.05)}
html.light-theme .mg-faq p{color:#5c6880}

/* ════════════════════════════════════════════════════
   store.php (/store) — الصفحة كاملة نصوصها بيضاء حرفياً
   بلا أي متغيرات. بطاقات المنتج (.st-card) خلفيتها داكنة
   فعلياً (#0f0f1a) فتبقى كيفما هي — الباقي يجلس مباشرة
   فوق خلفية الصفحة ولازم يتصلح
   ════════════════════════════════════════════════════ */
html.light-theme .st-header-title{color:#101a2e}
html.light-theme .st-header-sub{color:#5c6880}
html.light-theme .st-cat{background:#ffffff;border-color:rgba(42,125,216,.22);color:#46526b}
html.light-theme .st-cat:hover,
html.light-theme .st-cat.active{color:#101a2e}
html.light-theme .st-result-count{color:#93a0b5}
html.light-theme .st-empty-icon{color:#c4cddc}
html.light-theme .st-empty-title{color:#46526b}
html.light-theme .st-empty-sub{color:#93a0b5}
html.light-theme .st-soon-card{background:rgba(16,26,46,.03);border-color:rgba(16,26,46,.12)}
html.light-theme .st-soon-icon{color:#93a0b5}
html.light-theme .st-soon-title{color:#46526b}
html.light-theme .st-soon-sub{color:#93a0b5}

/* ════════════════════════════════════════════════════
   store-product.php (/store/figma-to-ae) — نفس المشكل،
   الصفحة كاملها (هيرو، بطاقة الشراء، الخطط، المقارنة، الأسئلة)
   نصوصها بيضاء حرفياً بلا خلفية داكنة حقيقية خاصة بيها
   ════════════════════════════════════════════════════ */
html.light-theme .sp-breadcrumb,
html.light-theme .sp-breadcrumb a{color:#93a0b5}
html.light-theme .sp-breadcrumb a:hover{color:#101a2e}
html.light-theme .sp-title{color:#101a2e}
html.light-theme .sp-tagline{color:#5c6880}
html.light-theme .sp-tag{background:#ffffff;border-color:rgba(42,125,216,.22);color:#46526b}
html.light-theme .sp-feat-chip{background:#ffffff;border-color:rgba(42,125,216,.18);color:#46526b}
html.light-theme .sp-desc{color:#5c6880}
html.light-theme .sp-buy-card{background:#ffffff;border-color:rgba(42,125,216,.18)}
html.light-theme .sp-price-curr,
html.light-theme .sp-price-note,
html.light-theme .sp-price-sub{color:#93a0b5}
html.light-theme .sp-price-val{color:#101a2e}
html.light-theme .sp-btn-cart-view{background:#f2f5fb;border-color:rgba(16,26,46,.15);color:#46526b}
html.light-theme .sp-perk{color:#5c6880}
html.light-theme .sp-coupon-input{background:#ffffff;border-color:rgba(16,26,46,.15);color:#101a2e}
html.light-theme .sp-plan-name,
html.light-theme .sp-plan-amt{color:#101a2e}
html.light-theme .sp-plan-period,
html.light-theme .sp-plan-divider{color:#93a0b5}
html.light-theme .sp-section-title{color:#101a2e;border-bottom-color:rgba(16,26,46,.1)}
html.light-theme .sp-req{color:#46526b}
html.light-theme .sp-compare-title,
html.light-theme .sp-faq-title{color:#101a2e}
html.light-theme .sp-compare-sub,
html.light-theme .sp-faq-sub{color:#93a0b5}
html.light-theme .sp-faq-item{border-bottom-color:rgba(16,26,46,.1)}
html.light-theme .sp-faq-icon{border-color:rgba(16,26,46,.15);color:#93a0b5}
html.light-theme .sp-faq-body{color:#5c6880}
html.light-theme .sp-cmp-price-other{color:#93a0b5}

/* بطاقات الميزات بالأيقونات (Native Shape Layers، Editable Text...) —
   كلاسات .sp-feat-icard مختلفة عن .sp-feat-chip اللي صلحناها قبل.
   [ملاحظة] مربع الأيقونة (.sp-feat-icon) عمداً ما نلمسوش: أغلب الأيقونات
   ملفات PNG بخلفية داكنة "محروقة" داخل الصورة نفسها (ما ينلونش بالـCSS)،
   وبقية الأيقونات SVG. لو لوّنا مربع SVG وخلينا PNG كيفما هي، تولي
   الأيقونات غير متناسقة (وحدة تتبدل ووحدة لا) — فخليناهم داكنين كاملين
   بثبات في الوضعين، أحسن من عدم تناسق. */
html.light-theme .sp-feat-icard{background:#ffffff;border-color:rgba(42,125,216,.16)}
html.light-theme .sp-feat-icard-title{color:#101a2e}
html.light-theme .sp-feat-icard-desc{color:#5c6880}

/* "Works on Windows & Mac" — بطاقة وأيقونتين كانتا شبه شفافتين
   (مصممتين تبان فوق خلفية داكنة) فاختفت فوق الصفحة الفاتحة */
html.light-theme .sp-compat-card{background:#ffffff;border-color:rgba(42,125,216,.16)}
html.light-theme .sp-compat-mac{background:#eef1f4;border-color:rgba(16,26,46,.15);color:#333}
html.light-theme .sp-compat-text{color:#5c6880}
html.light-theme .sp-compat-text strong{color:#101a2e}

/* قسم "How Prism Stacks Up" — خلفية القسم كانت مكتوبة inline
   (style="background:linear-gradient(...#0a0a0a...)") فزدنا كلاس
   sp-compare-section في store-product.php باش نقدر نغلبها بـ !important */
html.light-theme .sp-compare-section{background:linear-gradient(180deg,#ffffff 0%,#eef1f7 50%,#ffffff 100%) !important}
html.light-theme .sp-cmp-wrap{border-color:rgba(16,26,46,.12)}
html.light-theme .sp-cmp-table thead tr{background:rgba(16,26,46,.03)}
html.light-theme .sp-cmp-table th{color:#5c6880;border-bottom-color:rgba(16,26,46,.1)}
html.light-theme .sp-cmp-table th:first-child{color:#93a0b5}
html.light-theme .sp-cmp-table td{color:#5c6880;border-bottom-color:rgba(16,26,46,.07)}
html.light-theme .sp-cmp-table td:first-child{color:#101a2e}
html.light-theme .sp-cmp-table tr:hover td{background:rgba(16,26,46,.02)}
html.light-theme .sp-cmp-no{color:#c4cddc}

/* نقاط مزايا الخطة داخل بطاقة الشراء (تحت $39 وتحت Monthly $8) —
   كلاس مختلف عن sp-perk اللي صلحناها قبل */
html.light-theme .sp-plan-box{background:#f7f9fd;border-color:rgba(16,26,46,.1)}
html.light-theme .sp-plan-lbl:hover .sp-plan-box{background:#eef3fb}
html.light-theme .sp-plan-lbl input:checked~.sp-plan-box{background:#eaf2fe}
html.light-theme .sp-plan-feats li{color:#5c6880}
html.light-theme .sp-plan-period,
html.light-theme .sp-plan-divider{color:#93a0b5}
/* placeholder خانة الكوبون كان أبيض على خلفية بيضاء */
html.light-theme .sp-coupon-input::placeholder{color:#93a0b5}

/* ════════════════════════════════════════════════════
   صفحات الخدمات (motion-graphics, Video-reel, Video-youtube,
   video-camera) — services1-0.css مشترك بين الأربعة صفحات
   ════════════════════════════════════════════════════ */

/* قسم SEO (النص الطويل تحت الجدول: "A Motion Graphics Studio Built for...") */
html.light-theme .mg-seo{color:#5c6880}
html.light-theme .mg-seo h2{color:#101a2e}

/* جداول الأسعار (Basic/Standard/Premium) — كانت بطاقات داكنة نصف
   شفافة (rgba(10,10,20,.7)) وسط صفحة فاتحة = تناسق سيء. نخليها بيضاء */
html.light-theme .svc-pkg-card{background:#ffffff;border-color:rgba(42,125,216,.16)}
html.light-theme .svc-pkg-card:hover{border-color:rgba(42,125,216,.35);box-shadow:0 20px 60px rgba(16,26,46,.12),0 0 40px rgba(42,125,216,.08)}
html.light-theme .svc-pkg-featured{border-color:rgba(42,125,216,.42) !important;box-shadow:0 0 0 1px rgba(42,125,216,.2),0 8px 40px rgba(42,125,216,.14),0 20px 60px rgba(16,26,46,.1) !important}
html.light-theme .svc-pkg-feat{color:#5c6880}
/* عناصر المزايا داخل بطاقات الأسعار (✓ متضمّن / ✕ غير متضمّن مشطوب) */
html.light-theme .feat-yes{color:#46526b}
html.light-theme .feat-no{color:#b6bfcf}

/* بطاقة البائع (Neggache Mohammed) + بطاقة "Latest Projects" +
   بطاقة الوصف — نفس مشكل الأسعار: خلفية داكنة نصف شفافة
   (rgba(13,18,35,.7)) فوق صفحة فاتحة = رمادي غير متناسق */
html.light-theme .svc-seller-card,
html.light-theme .svc-projects-box,
html.light-theme .svc-desc-box{background:#ffffff;border-color:rgba(42,125,216,.16)}
html.light-theme .svc-seller-role{color:#93a0b5}
html.light-theme .svc-desc-box{color:#5c6880}
/* details.sp-faq-item summary — selector عنصر+كلاس+عنصر، أخص من قاعدتي السابقة، تحتاج نفس المستوى */
html.light-theme details.sp-faq-item summary{color:#101a2e}
html.light-theme details.sp-faq-item:first-child,
html.light-theme details.sp-faq-item{border-bottom-color:rgba(16,26,46,.1)}

/* ── قسم "Features" التفصيلي (includes/features-section.php) — يستعمل كلاسات .sf-* المعرّفة في نفس صفحة المنتج، بيضاء حرفياً بلا خلفية خاصة ── */
html.light-theme .sf-heading,
html.light-theme .sf-feat-title{color:#101a2e}
html.light-theme .sf-feature{border-bottom-color:rgba(16,26,46,.08)}
html.light-theme .sf-feat-desc{color:#5c6880}
html.light-theme .sf-feat-bullets li{color:#46526b}
/* أزرار وشارات لونها ثابت (أزرق/أسود متدرج) تبقى بنص أبيض — مقروءة في الحالتين */

/* ════════════════════════════════════════════════════
   Blog/Blog.php — خلفية الهيرو حرفية داكنة، والبطاقة المميزة
   (blog-featured-card) تستعمل var(--bg-card) فتولي بيضاء
   بصح النص جواها بقى رمادي فاتح (rgba(206,206,206,X))
   ════════════════════════════════════════════════════ */
html.light-theme .blog-hero{background:radial-gradient(ellipse 100% 80% at 50% 0%,#ffffff 0%,#eef1f7 65%)}
html.light-theme .blog-hero-fade{background:linear-gradient(transparent,#eef1f7)}
html.light-theme .blog-hero-sub,
html.light-theme .bhs-lbl{color:#5c6880}
html.light-theme .blog-featured-summary{color:#5c6880}
html.light-theme .blog-featured-meta{color:#93a0b5}
html.light-theme .blog-empty-sub{color:#93a0b5}
/* بطاقات المقالات (.blog-card) خلفيتها داكنة فعلياً وتبقى مقروءة كيفما هي */

/* ════════════════════════════════════════════════════
   صفحة الاشتراكات (Subscriptions.php)
   ════════════════════════════════════════════════════ */
html.light-theme .sub-hero{background:radial-gradient(ellipse 100% 80% at 50% 0%,#ffffff 0%,#eef1f7 70%)}
html.light-theme .sub-hero-title{color:#101a2e}
html.light-theme .sub-hero-sub{color:#5c6880}
html.light-theme .sub-toggle-label{color:#7b879c}
html.light-theme .sub-toggle-label.active{color:#101a2e}
/* بطاقات الخطط تولي بيضاء والنصوص غامقة */
html.light-theme .plan-card{background:#ffffff;border-color:rgba(42,125,216,.22)}
html.light-theme .plan-card.featured{
  background:#f4f8fe;
  box-shadow:0 0 0 1px rgba(42,125,216,.25),0 20px 60px rgba(16,26,46,.14),0 0 60px rgba(42,125,216,.1);
}
html.light-theme .plan-desc{color:#5c6880}
html.light-theme .plan-cta.cta-primary{color:#fff}
html.light-theme .plan-cta.cta-outline{color:#2A7DD8;border-color:rgba(42,125,216,.4)}