/* ════════════════════════════════════════════════════════════════
   THEME OVERRIDES — تحسينات نهائية للوضع النهاري
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   HERO ENTRY ANIMATION — LCP-friendly
   - Element is fully opaque from frame 0 (LCP fires immediately)
   - Only transform is animated (GPU-accelerated, no layout/paint)
   - Runs as soon as CSS parses, no JS dependency
   - Respects prefers-reduced-motion
   ───────────────────────────────────────────────────────────── */
@keyframes hero-fx-in {
    from { transform: translate3d(0, 12px, 0); }
    to   { transform: translate3d(0, 0, 0); }
}
.hero-fx {
    will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
    .hero-fx          { animation: hero-fx-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
    .hero-fx-d1       { animation-delay: 80ms;  }
    .hero-fx-d2       { animation-delay: 160ms; }
    .hero-fx-d3       { animation-delay: 240ms; }
    .hero-fx-d4       { animation-delay: 320ms; }
}



/* ─────────────────────────────────────────────────────────────
   0) UNIFIED PRIMARY BUTTON — ستايل موحّد لكل CTA
   مرجع التصميم: hero CTA "ابدأ الآن ودعنا نتولى الباقي"
   استخدام:
     <a class="btn-primary">…<i class="btn-arrow"…></i></a>
   مع modifiers: .btn-primary--sm | .btn-primary--lg | .btn-primary--solid
   ───────────────────────────────────────────────────────────── */
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 3rem;
    border-radius: 1rem;
    font-weight: 900;
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #0CF300;
    background: rgba(12, 243, 0, 0.10);
    border: 1px solid rgba(12, 243, 0, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color .4s ease, border-color .4s ease,
                box-shadow .4s ease, transform .3s ease, color .3s ease;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    will-change: transform;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(-100%) skewX(12deg);
    transition: transform .9s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}

.btn-primary:hover {
    background: rgba(12, 243, 0, 0.22);
    border-color: rgba(12, 243, 0, 0.45);
    box-shadow: 0 0 35px rgba(12, 243, 0, 0.30);
    transform: translateY(-2px) scale(1.02);
}

.btn-primary:hover::before {
    transform: translateX(100%) skewX(12deg);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    transition-duration: .12s;
}

.btn-primary:focus-visible {
    outline: 2px solid #0CF300;
    outline-offset: 3px;
}

.btn-primary > * { position: relative; }

/* Static icon (non-directional, e.g. chat bubble, sparkle) */
.btn-primary .btn-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.btn-primary--lg .btn-icon { width: 1.5rem; height: 1.5rem; }
.btn-primary--sm .btn-icon { width: 1rem; height: 1rem; }

/* Arrow icon: shifts on hover, respects RTL */
.btn-primary .btn-arrow {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    transition: transform .35s ease;
}
.btn-primary:hover .btn-arrow { transform: translateX(0.4rem); }
[dir="rtl"] .btn-primary .btn-arrow { transform: scaleX(-1); }
[dir="rtl"] .btn-primary:hover .btn-arrow { transform: scaleX(-1) translateX(0.4rem); }

/* Sizes */
.btn-primary--sm {
    padding: 0.75rem 1.75rem;
    font-size: 0.9rem;
    border-radius: 0.875rem;
    gap: 0.5rem;
}
.btn-primary--sm .btn-arrow { width: 1rem; height: 1rem; }

.btn-primary--lg {
    padding: 1.5rem 3.5rem;
    font-size: 1.25rem;
    border-radius: 1rem;
    gap: 1rem;
}
.btn-primary--lg .btn-arrow { width: 1.5rem; height: 1.5rem; }

/* Solid variant — used for stronger emphasis (e.g. final CTA / featured pricing) */
.btn-primary--solid {
    background: #0CF300;
    color: #0a0a0a;
    border-color: #0CF300;
    box-shadow: 0 10px 30px -10px rgba(12, 243, 0, 0.45);
}
.btn-primary--solid:hover {
    background: #0CF300;
    color: #0a0a0a;
    box-shadow: 0 0 45px rgba(12, 243, 0, 0.55);
}

/* Width helpers */
.btn-primary--block { width: 100%; }
@media (min-width: 640px) {
    .btn-primary--block { width: auto; }
}
.btn-primary--full { width: 100%; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn-primary::before,
    .btn-primary .btn-arrow {
        transition: none !important;
    }
    .btn-primary:hover { transform: none; }
}

/* Light theme tweaks */
[data-theme="light"] .btn-primary {
    color: var(--brand, #059212);
    background: rgba(12, 243, 0, 0.12);
    border-color: rgba(12, 243, 0, 0.30);
}
[data-theme="light"] .btn-primary:hover {
    background: rgba(12, 243, 0, 0.20);
    border-color: rgba(12, 243, 0, 0.55);
    box-shadow: 0 0 30px rgba(12, 243, 0, 0.25);
}
[data-theme="light"] .btn-primary--solid {
    color: #ffffff;
}


/* ─────────────────────────────────────────────────────────────
   1) عام — يطبّق على كلا المودين
   ───────────────────────────────────────────────────────────── */

.bg-slate-950 {
    background-color: var(--bg-primary) !important;
}

.bg-slate-900 {
    background-color: var(--bg-secondary) !important;
}

.bg-slate-800 {
    background-color: var(--bg-tertiary) !important;
}

.text-white {
    color: var(--text-primary) !important;
}

.text-slate-200,
.text-slate-300 {
    color: var(--text-secondary) !important;
}

.text-slate-400 {
    color: var(--text-tertiary) !important;
}

.text-slate-500 {
    color: var(--text-muted) !important;
}

.text-slate-600 {
    color: var(--text-disabled) !important;
}

.text-\[\#0CF300\],
[class*="text-[#0CF300]"] {
    color: var(--brand) !important;
}

.bg-\[\#0CF300\] {
    background-color: var(--brand) !important;
    color: var(--brand-text) !important;
}

[class*="bg-[#0CF300]/5"] {
    background-color: var(--brand-alpha-5) !important;
}

[class*="bg-[#0CF300]/10"] {
    background-color: var(--brand-alpha-10) !important;
}

[class*="bg-[#0CF300]/15"] {
    background-color: var(--brand-alpha-15) !important;
}

[class*="bg-[#0CF300]/20"] {
    background-color: var(--brand-alpha-20) !important;
}

[class*="bg-[#0CF300]/25"] {
    background-color: var(--brand-alpha-30) !important;
}

[class*="border-[#0CF300]/20"] {
    border-color: var(--brand-alpha-20) !important;
}

[class*="border-[#0CF300]/30"] {
    border-color: var(--brand-alpha-30) !important;
}

[class*="border-[#0CF300]/40"] {
    border-color: var(--brand-alpha-50) !important;
}

.border-white\/5 {
    border-color: var(--border-default) !important;
}

.border-white\/10 {
    border-color: var(--border-subtle) !important;
}

.bg-white\/5 {
    background-color: var(--surface) !important;
}

.bg-white\/10 {
    background-color: var(--surface-hover) !important;
}

.glass-card {
    background: var(--glass-card-gradient);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-card);
}

nav.glass {
    background: var(--surface);
    border-bottom: 1px solid var(--border-default);
}

footer {
    background: var(--bg-primary) !important;
    border-top: 1px solid var(--border-default);
}


/* ─────────────────────────────────────────────────────────────
   2) Light Mode — كروت وخلفيات
   ───────────────────────────────────────────────────────────── */

[data-theme="light"] [class*="bg-white/[0.02]"],
[data-theme="light"] [class*="bg-white/[0.03]"],
[data-theme="light"] [class*="bg-white/[0.05]"] {
    background-color: var(--surface-solid) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-card);
}

/* ─────────────────────────────────────────────────────────────
   🎠 كروت Tools & Clients Slider — Light Mode
   ─────────────────────────────────────────────────────────────
   الحالة الطبيعية: ابيض وأسود (grayscale)
   عند hover فقط: ألوان حقيقية أصلية
   ───────────────────────────────────────────────────────────── */

/* الحالة الطبيعية: grayscale + خلفية فاتحة خفيفة */
html[data-theme="light"] .tools-track > div,
html[data-theme="light"] .clients-track > div {
    filter: grayscale(100%) !important;
    opacity: 0.55 !important;
    background-color: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* عند hover فقط: ألوان أصلية حقيقية كاملة */
html[data-theme="light"] .tools-track > div:hover,
html[data-theme="light"] .clients-track > div:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    background-color: rgba(22, 163, 74, 0.07) !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12) !important;
    transform: scale(1.05) !important;
}

[data-theme="light"] .group.relative[class*="border-white/5"],
[data-theme="light"] [class*="rounded-[2rem]"][class*="border-white/5"],
[data-theme="light"] [class*="rounded-[2.5rem]"][class*="border-white/5"] {
    background-color: var(--surface-solid) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-card);
}

[data-theme="light"] .group.relative.p-8:hover,
[data-theme="light"] .group.relative.p-10:hover,
[data-theme="light"] [class*="rounded-[2rem]"]:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

[data-theme="light"] [class*="from-slate-950"] {
    --tw-gradient-from: var(--bg-primary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(248, 250, 252, 0) var(--tw-gradient-to-position) !important;
}

[data-theme="light"] [class*="to-slate-950"] {
    --tw-gradient-to: var(--bg-primary) var(--tw-gradient-to-position) !important;
}

[data-theme="light"] [class*="bg-gradient-to-r"][class*="from-slate-950"] {
    background-image: linear-gradient(to right, var(--bg-primary), transparent) !important;
}

[data-theme="light"] [class*="bg-gradient-to-l"][class*="from-slate-950"] {
    background-image: linear-gradient(to left, var(--bg-primary), transparent) !important;
}

[data-theme="light"] [class*="bg-[#020617]"] {
    background-color: var(--surface-solid) !important;
    border: 1px solid var(--border-subtle);
}

[data-theme="light"] [class*="bg-[#020617]/95"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="light"] [class*="bg-[#020617]"] h2.text-white,
[data-theme="light"] [class*="bg-[#020617]"] .text-white {
    color: var(--text-primary) !important;
}

[data-theme="light"] [class*="bg-[#020617]"] p.text-slate-400 {
    color: var(--text-tertiary) !important;
}

/* تحويل الظلال الخضراء (box-shadow فقط) لظل ناعم — مع استثناء drop-shadow
   لأن drop-shadow توهّج نصّي؛ تطبيق box-shadow عليه يُنتج مستطيلاً قبيحاً حول النص */
[data-theme="light"] [class*="shadow-[0_0_15px_rgba(12,243,0"]:not([class*="drop-shadow"]),
[data-theme="light"] [class*="shadow-[0_0_20px_rgba(12,243,0"]:not([class*="drop-shadow"]),
[data-theme="light"] [class*="shadow-[0_0_35px_rgba(12,243,0"]:not([class*="drop-shadow"]),
[data-theme="light"] [class*="shadow-[0_0_50px_rgba(12,243,0"]:not([class*="drop-shadow"]) {
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.2) !important;
}

/* توهّجات النص الخضراء (drop-shadow) — نُزيلها في اللايت مود (تبقى نظيفة بلا صندوق) */
[data-theme="light"] [class*="drop-shadow-[0_0"][class*="rgba(12,243,0"] {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

[data-theme="light"] [class*="conic-gradient"][class*="#0CF300"] {
    opacity: 0.25 !important;
}

[data-theme="light"] [class*="bg-[#0CF300]/5"][class*="blur-["] {
    background-color: rgba(22, 163, 74, 0.05) !important;
    opacity: 0.5;
}

[data-theme="light"] .bg-slate-900 {
    background-color: rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] details.glass {
    background-color: var(--surface-solid) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] footer.bg-slate-950 {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-default);
}

[data-theme="light"] footer .text-slate-400,
[data-theme="light"] footer .text-slate-500 {
    color: var(--text-tertiary) !important;
}

[data-theme="light"] footer .text-slate-300 {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .backdrop-blur-3xl {
    backdrop-filter: blur(20px) !important;
}

[data-theme="light"] [class*="backdrop-blur-md"][class*="bg-[#0CF300]/10"] {
    background-color: var(--brand-alpha-10) !important;
    border-color: var(--brand-alpha-20) !important;
}

[data-theme="light"] svg[stroke="#0CF300"] {
    stroke: var(--brand) !important;
}

[data-theme="light"] .selection\:bg-\[\#0CF300\]\/30::selection {
    background-color: var(--brand-alpha-30) !important;
}

[data-theme="light"] [class*="bg-[#063b00]"] {
    background-color: rgba(22, 101, 52, 0.1) !important;
}

[data-theme="light"] body.bg-slate-950 {
    background-color: var(--bg-primary) !important;
}

[data-theme="light"] .hover\:bg-white\/20:hover {
    background-color: rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .hover\:bg-white\/10:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] [class*="bg-[linear-gradient(to_right,#8080800a"] {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
}

[data-theme="light"] .prose-custom p,
[data-theme="light"] .prose-custom li {
    color: var(--text-secondary);
    line-height: 1.85;
}

[data-theme="light"] .prose-custom blockquote {
    background-color: var(--brand-alpha-5);
    padding: 1rem 1.5rem;
    border-radius: 8px;
}

[data-theme="light"] .prose-custom pre {
    background-color: #f1f5f9;
}

[data-theme="light"] .prose-custom pre code {
    color: #0f172a;
}

[data-theme="light"] [class*="ring-[#0CF300]"] {
    --tw-ring-color: var(--brand) !important;
}


/* ════════════════════════════════════════════════════════════════
   ⚡⚡⚡ HIGH-PRIORITY OVERRIDES — حلول قسرية لمشاكل عنيدة
   هذا القسم يستخدم selectors مضاعفة لتجاوز Tailwind's specificity
   ════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   ✂️ إزالة text-shadow و drop-shadow من Hero (Light Mode)
   ───────────────────────────────────────────────────────────── */

html[data-theme="light"] body section h1,
html[data-theme="light"] body section h1 *,
html[data-theme="light"] body section h1 span,
html[data-theme="light"] body section h2,
html[data-theme="light"] body section h2 *,
html[data-theme="light"] body section [class*="drop-shadow"],
html[data-theme="light"] body section .drop-shadow-lg,
html[data-theme="light"] body section .drop-shadow-xl,
html[data-theme="light"] body section .drop-shadow-2xl,
html[data-theme="light"] body section [class*="text-shadow"] {
    text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}


/* ─────────────────────────────────────────────────────────────
   🟢 الأزرار الخضراء — تدرج فاخر (Light Mode)
   من #16a34a إلى #14532d (مثل الصورة المطلوبة)
   ─────────────────────────────────────────────────────────────
   
   هذا القسم يحوّل كل أنواع الأزرار في الموقع لتدرج أخضر فاخر:
   • Hero buttons (transparent green with border)
   • Primary CTA buttons (solid green)
   • White buttons (in package cards)
   • Floating WhatsApp button
   • Popup & Modal buttons
   • CTA links inside articles
   ───────────────────────────────────────────────────────────── */


/* ============================================================
   1) أزرار شفافة بحدود (Hero buttons)
   bg-[#0CF300]/10 + border-[#0CF300]/20 + text-[#0CF300]
   ============================================================ */

html[data-theme="light"] body a[class*="bg-[#0CF300]/10"],
html[data-theme="light"] body button[class*="bg-[#0CF300]/10"],
html[data-theme="light"] body a.group[class*="0CF300"],
html[data-theme="light"] body a[class*="bg-[#0CF300]/10"][class*="border-[#0CF300]/20"] {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-color: #16a34a !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35) !important;
}

/* النص الداخلي للأزرار الشفافة (الـtext-[#0CF300] داخل الزر) */
html[data-theme="light"] body a[class*="bg-[#0CF300]/10"] *,
html[data-theme="light"] body a.group[class*="0CF300"] *,
html[data-theme="light"] body a[class*="bg-[#0CF300]/10"] span,
html[data-theme="light"] body a[class*="bg-[#0CF300]/10"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* hover للأزرار الشفافة */
html[data-theme="light"] body a[class*="bg-[#0CF300]/10"]:hover,
html[data-theme="light"] body a.group[class*="0CF300"]:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.5) !important;
    transform: translateY(-2px) scale(1.02) !important;
}


/* ============================================================
   2) أزرار صلبة (bg-[#0CF300] solid)
   ============================================================ */

html[data-theme="light"] body a.bg-\[\#0CF300\],
html[data-theme="light"] body button.bg-\[\#0CF300\],
html[data-theme="light"] body a[class*="bg-[#0CF300]"]:not([class*="bg-[#0CF300]/"]),
html[data-theme="light"] body button[class*="bg-[#0CF300]"]:not([class*="bg-[#0CF300]/"]) {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35) !important;
}

html[data-theme="light"] body a.bg-\[\#0CF300\] *,
html[data-theme="light"] body button.bg-\[\#0CF300\] * {
    color: #ffffff !important;
}


/* ============================================================
   3) الأزرار البيضاء (في بطاقات الباقات)
   bg-white text-black
   ============================================================ */

html[data-theme="light"] body a.bg-white.text-black,
html[data-theme="light"] body button.bg-white.text-black,
html[data-theme="light"] body a[class*="bg-white"][class*="text-black"][class*="rounded-2xl"],
html[data-theme="light"] body button[class*="bg-white"][class*="text-black"][class*="rounded-2xl"] {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35) !important;
}

html[data-theme="light"] body a.bg-white.text-black:hover,
html[data-theme="light"] body button.bg-white.text-black:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.5) !important;
}


/* ============================================================
   4) accent-gradient (الأزرار الأساسية)
   ============================================================ */

html[data-theme="light"] body a.accent-gradient,
html[data-theme="light"] body button.accent-gradient,
html[data-theme="light"] body .accent-gradient,
html[data-theme="light"] body [class*="accent-gradient"] {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-color: #16a34a !important;
    color: #ffffff !important;
}

html[data-theme="light"] body a.accent-gradient *,
html[data-theme="light"] body button.accent-gradient *,
html[data-theme="light"] body .accent-gradient * {
    color: #ffffff !important;
}


/* ============================================================
   5) Tailwind gradient buttons (from-[#0CF300])
   ============================================================ */

html[data-theme="light"] body [class*="from-[#0CF300]"],
html[data-theme="light"] body [class*="bg-gradient-to-l"][class*="0CF300"],
html[data-theme="light"] body [class*="bg-gradient-to-r"][class*="0CF300"],
html[data-theme="light"] body [class*="bg-gradient-to-br"][class*="0CF300"] {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    color: #ffffff !important;
}

html[data-theme="light"] body [class*="from-[#0CF300]"] *,
html[data-theme="light"] body [class*="bg-gradient-to-l"][class*="0CF300"] *,
html[data-theme="light"] body [class*="bg-gradient-to-r"][class*="0CF300"] * {
    color: #ffffff !important;
}


/* ============================================================
   6) الزر العائم للواتساب (fixed bottom)
   ============================================================ */

html[data-theme="light"] body a.fixed.bottom-6,
html[data-theme="light"] body a[class*="fixed"][class*="bottom-6"] {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.4) !important;
}

html[data-theme="light"] body a.fixed.bottom-6 *,
html[data-theme="light"] body a[class*="fixed"][class*="bottom-6"] * {
    color: #ffffff !important;
}


/* ============================================================
   7) أزرار البوب اب والـCTA
   ============================================================ */

html[data-theme="light"] body .popup-btn,
html[data-theme="light"] body button.popup-btn {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35) !important;
}

html[data-theme="light"] body .popup-btn:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45) !important;
}

html[data-theme="light"] body .cta-submit-btn,
html[data-theme="light"] body button.cta-submit-btn {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35) !important;
}

html[data-theme="light"] body .cta-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.45) !important;
}


/* ============================================================
   8) CTA links داخل المقالات
   ============================================================ */

html[data-theme="light"] body a.cta-link {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

html[data-theme="light"] body a.cta-link:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    background-image: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4) !important;
    transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────────
   3) لوحة الإدارة — تظل داكنة دائماً
   ───────────────────────────────────────────────────────────── */

body.admin-area {
    color-scheme: dark;
}


/* ─────────────────────────────────────────────────────────────
   🎨 إجبار كل خلفيات الأقسام على الفاتح (Light Mode)
   ─────────────────────────────────────────────────────────────
   
   في Light Mode، كل الأقسام لازم تكون بخلفية فاتحة بدون استثناء.
   هذي الـrules تتجاوز أي inline style أو bg-color من DB.
   ───────────────────────────────────────────────────────────── */

/* قاعدة قوية: كل sections في Light Mode بخلفية الثيم الفاتحة */
html[data-theme="light"] section,
html[data-theme="light"] body section,
html[data-theme="light"] main section,
html[data-theme="light"] body>section,
html[data-theme="light"] section[style],
html[data-theme="light"] section[class],
html[data-theme="light"] section[id] {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    background-image: none !important;
}

/* استهداف بكل أنواع inline styles */
html[data-theme="light"] section[style*="background"],
html[data-theme="light"] section[style*="bg"],
html[data-theme="light"] section[style*="#"],
html[data-theme="light"] section[style*="rgb"],
html[data-theme="light"] section[style*="rgba"],
html[data-theme="light"] section[style*="hsl"],
html[data-theme="light"] section[style*="linear-gradient"],
html[data-theme="light"] section[style*="radial-gradient"] {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    background-image: none !important;
}

/* العناوين داخل الأقسام → نص داكن دائماً */
html[data-theme="light"] section h1,
html[data-theme="light"] section h2,
html[data-theme="light"] section h3,
html[data-theme="light"] section h4 {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

/* الفقرات الوصفية */
html[data-theme="light"] section>div>p,
html[data-theme="light"] section>div>div>p {
    color: var(--text-tertiary) !important;
}


/* ════════════════════════════════════════════════════════════
   ⚡⚡⚡ NUCLEAR OPTION — للأقسام العنيدة
   إجبار أي element في الـDOM على عدم استخدام خلفيات خضراء
   في Light Mode (ما عدا الأزرار والكروت المحددة)
   ════════════════════════════════════════════════════════════ */

/* أي section تحتوي divs بخلفيات خضراء — نحيدها */
html[data-theme="light"] section>div[style*="#0bc300"],
html[data-theme="light"] section>div[style*="#0CF300"],
html[data-theme="light"] section>div[style*="#0ab300"],
html[data-theme="light"] section>div[style*="#16a34a"],
html[data-theme="light"] section>div[style*="background: #0"],
html[data-theme="light"] section>div[style*="background-color: #0"],
html[data-theme="light"] section>div[class*="bg-[#0CF300]"]:not([class*="rounded"]),
html[data-theme="light"] section>div[class*="bg-green"]:not([class*="rounded"]) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* الـwrapper divs الأولى داخل الأقسام (اللي عادة فيها الخلفية) */
html[data-theme="light"] section>div:first-child[style*="background"],
html[data-theme="light"] section>div:first-child[style*="bg-"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* جميع الـdivs الكبيرة (full-width) داخل أقسام بـclass background */
html[data-theme="light"] section [class*="bg-[#0CF300]"][class*="absolute"],
html[data-theme="light"] section [class*="bg-[#0CF300]"][class*="inset-"],
html[data-theme="light"] section [class*="bg-gradient"][class*="from-[#0CF300]"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* الـoverlays والـbackgrounds الـdecorative */
html[data-theme="light"] section [class*="bg-[#0CF300]/5"],
html[data-theme="light"] section [class*="bg-[#0CF300]/10"][class*="absolute"],
html[data-theme="light"] section [class*="bg-[#0CF300]/20"][class*="absolute"] {
    background-color: transparent !important;
    opacity: 0.3 !important;
}

/* القاعدة الذرية: أي عنصر "كبير" (يأخذ مساحة قسم كامل) لا يجب أن يكون أخضر */
html[data-theme="light"] section [class*="absolute"][class*="inset-0"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   🔥🔥🔥 ULTIMATE FIX — إزالة الخلفية الخضراء نهائياً من كل الأقسام
   ══════════════════════════════════════════════════════════════

   المشكلة: الـ radial-gradient و blob decorative elements تستخدم
   Tailwind's bg-[radial-gradient(...)] من-[#0CF300]/5 وهي لا يشملها
   الـ selector البسيط. هذه القواعد تستهدفها بشكل شامل.
   ══════════════════════════════════════════════════════════════ */

/* 🎯 استهداف الـ radial gradient decorative divs في Light Mode
   هذه العناصر هي absolute/pointer-events-none وتغطي الأقسام بالكامل */
html[data-theme="light"] section div[class*="from-[#0CF300]"],
html[data-theme="light"] section div[class*="from-[#0CF300]/5"],
html[data-theme="light"] section div[class*="from-[#0CF300]/10"],
html[data-theme="light"] section div[class*="blur-[120px]"],
html[data-theme="light"] section div[class*="blur-[100px]"],
html[data-theme="light"] section div[class*="blur-[80px]"],
html[data-theme="light"] section div[class*="pointer-events-none"][class*="absolute"],
html[data-theme="light"] div[class*="from-[#0CF300]/5"],
html[data-theme="light"] div[class*="from-[#0CF300]/10"],
html[data-theme="light"] div[class*="bg-[radial-gradient"][class*="0CF300"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* 🔒 تأمين الأقسام: ضمان بقاء خلفية الـ section نظيفة بيضاء
   بمعادلة شاملة تشمل كل id الأقسام المعروفة */
html[data-theme="light"] #who-we-serve,
html[data-theme="light"] #real-impact,
html[data-theme="light"] #services,
html[data-theme="light"] #tools-slider,
html[data-theme="light"] #packages,
html[data-theme="light"] #articles,
html[data-theme="light"] #clients-slider,
html[data-theme="light"] #how-it-works,
html[data-theme="light"] #contact,
html[data-theme="light"] section[id] {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
}

/* ✅ لكن نسمح بخلفيات الكروت والكومبوننتس الداخلية */
html[data-theme="light"] section .group.relative,
html[data-theme="light"] section [class*="rounded-2xl"],
html[data-theme="light"] section [class*="rounded-full"],
html[data-theme="light"] section [class*="rounded-[2rem]"],
html[data-theme="light"] section [class*="rounded-[2.5rem]"],
html[data-theme="light"] section details {
    background-color: initial;
    background-image: initial;
}

/* 🌊 الـ gradient masks للسلايدرات (tools, clients) — مسموح فقط للـfade effect */
html[data-theme="light"] section [class*="from-slate-950"][class*="bg-gradient-to-r"],
html[data-theme="light"] section [class*="from-slate-950"][class*="bg-gradient-to-l"] {
    background: linear-gradient(to right, var(--bg-primary), transparent) !important;
    opacity: 1 !important;
}
html[data-theme="light"] section [class*="from-slate-950"][class*="bg-gradient-to-l"] {
    background: linear-gradient(to left, var(--bg-primary), transparent) !important;
}


/* ════════════════════════════════════════════════════════════════
   🟢 HYBRID GREEN — عناوين زاهية، نصوص مقروءة
   --brand = #15803d (نصوص/روابط) ، العناوين تأخذ الأزهى #16a34a
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] h1 [class*="text-[#0CF300]"],
html[data-theme="light"] h2 [class*="text-[#0CF300]"],
html[data-theme="light"] h1[class*="text-[#0CF300]"],
html[data-theme="light"] h2[class*="text-[#0CF300]"],
html[data-theme="light"] .text-gradient-brand {
    color: var(--brand-bright, #16a34a) !important;
}


/* ════════════════════════════════════════════════════════════════
   🎚️ إيقاع بصري — أقسام متناوبة (يعالج «التسطيح»)
   الخلفية الأساسية #f1f5f9، وأقسام متناوبة بيضاء #ffffff
   ════════════════════════════════════════════════════════════════ */

html[data-theme="light"] #real-impact,
html[data-theme="light"] #services,
html[data-theme="light"] #packages,
html[data-theme="light"] #clients-slider {
    background-color: var(--bg-secondary, #ffffff) !important;
}

/* فصل ناعم بين الأقسام بحدّ سفلي خفيف */
html[data-theme="light"] section {
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}


/* ─────────────────────────────────────────────────────────────
   4) Print — تنسيق طباعة احترافي
   ───────────────────────────────────────────────────────────── */

@media print {

    .theme-toggle-btn,
    nav,
    footer,
    #cta-overlay,
    #custom-popup-overlay {
        display: none !important;
    }

    .article-body,
    .prose-custom {
        color: #000 !important;
        background: #fff !important;
    }

    .prose-custom * {
        color: inherit !important;
        box-shadow: none !important;
    }
}