/* ==========================================================================
   MFx — Theme (Light/Dark) + Language (EN/AR) Layer
   ========================================================================== */

/* ---- Arabic typography ---- */
:root {
    --font-arabic-display: 'Noto Kufi Arabic', sans-serif;
    --font-arabic-body: 'Changa', sans-serif;
}

html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button {
    font-family: var(--font-arabic-body);
    font-weight: 400;
}

html[lang="ar"] .font-display,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
    font-family: var(--font-arabic-display);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.45 !important;
}

html[lang="ar"] .font-mono {
    font-family: var(--font-arabic-body);
    font-weight: 500;
    letter-spacing: 0;
}

/* Fix font clipping on gradient hero headings */
html[lang="ar"] .hero-title-gradient {
    line-height: 1.25 !important;
}

/* Arabic script has no italics tradition — swap italic emphasis for weight/color emphasis */
html[lang="ar"] .italic {
    font-style: normal;
    font-weight: 700;
}

/* ---- RTL layout ---- */
html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .border-l {
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
html[dir="rtl"] .text-right { text-align: left; }

/* Move decorative numbers to opposite side in RTL */
html[dir="rtl"] #services .glass-panel > .absolute.top-0.right-0 {
    right: auto !important;
    left: 0 !important;
}

/* Flip directional icons */
html[dir="rtl"] [data-lucide="arrow-up-right"],
html[dir="rtl"] [data-lucide="arrow-down"] {
    transform: scaleX(-1);
}
html[dir="rtl"] .group:hover [data-lucide="arrow-up-right"] {
    transform: scaleX(-1) translate(0.125rem, -0.125rem);
}

[data-i18n-ltr] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---- Controls (Mobile Compact & Clean) ---- */
.mfx-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    direction: ltr !important;
    position: relative;
}

.mfx-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 48px;
    height: 26px;
    padding: 2px;
    border-radius: 999px;
    background: var(--bg-surface, #0f0f13);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 640px) {
    .mfx-switch {
        width: 54px;
        height: 28px;
        padding: 3px;
    }
}

.mfx-switch:hover { border-color: rgba(255, 255, 255, 0.35); }
.mfx-switch:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.mfx-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a0a0c;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

@media (min-width: 640px) {
    .mfx-switch__thumb {
        top: 2px;
        left: 3px;
        width: 22px;
        height: 22px;
    }
}

html[data-theme="light"] .mfx-switch__thumb {
    transform: translateX(22px);
    background: #0a0a0c;
    color: #ffffff;
}

@media (min-width: 640px) {
    html[data-theme="light"] .mfx-switch__thumb {
        transform: translateX(25px);
    }
}

.mfx-switch__thumb svg {
    width: 12px;
    height: 12px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mfx-switch__icon-sun { opacity: 1; }
.mfx-switch__icon-moon { position: absolute; opacity: 0; }

html[data-theme="light"] .mfx-switch__icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
html[data-theme="light"] .mfx-switch__icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* Language button */
.mfx-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 26px;
    min-width: 46px;
    flex-shrink: 0;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--bg-surface, #0f0f13);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

@media (min-width: 640px) {
    .mfx-lang-btn {
        height: 28px;
        min-width: 52px;
        font-size: 11px;
        padding: 0 0.65rem;
    }
}

.mfx-lang-btn:hover { border-color: rgba(255, 255, 255, 0.35); }

/* Refined mobile navigation */
.mfx-menu-btn,.mfx-menu-close { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.04); color:inherit; }
.mfx-menu-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:55; }
.mfx-mobile-menu { position:fixed; top:0; right:0; width:min(86vw,360px); height:100dvh; padding:1.5rem; background:#0b0b0f; border-left:1px solid rgba(255,255,255,.12); transform:translateX(105%); transition:transform .35s cubic-bezier(.16,1,.3,1); z-index:60; box-shadow:-20px 0 50px rgba(0,0,0,.35); }
html[dir="rtl"] .mfx-mobile-menu { right:auto; left:0; transform:translateX(-105%); border-left:0; border-right:1px solid rgba(255,255,255,.12); }
body.menu-open .mfx-menu-backdrop { opacity:1; pointer-events:auto; }
body.menu-open .mfx-mobile-menu { transform:translateX(0); }
@media (max-width:639px) { .mfx-mobile-menu { padding-top:5.5rem; } #navbar { border-radius:16px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
@media (max-width:767px) { #particles-canvas { opacity:.45; } .noise-bg { opacity:.015; } .glass-card-interactive { transform:none !important; } }
html[data-theme="light"] .mfx-mobile-menu { background:#f7f7f9; border-color:rgba(10,10,12,.12); }

/* Clearly Visible Decorative SVGs */
.mfx-decor-svg {
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.12));
}

html[data-theme="light"] .mfx-decor-svg {
    filter: invert(1) drop-shadow(0 0 10px rgba(0, 0, 0, 0.08));
}

/* ---- LIGHT THEME COLOR OVERRIDES ---- */
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] body {
    background-color: #f7f7f9 !important;
    color: #0a0a0c !important;
}

html[data-theme="light"] .logo-filter {
    filter: invert(1) brightness(0) drop-shadow(0 0 8px rgba(0, 0, 0, 0.15)) !important;
}

html[data-theme="light"] .bg-dark-950,
html[data-theme="light"] .bg-dark-950\/80,
html[data-theme="light"] .bg-dark-950\/85,
html[data-theme="light"] .bg-dark-950\/90 { background-color: #f7f7f9 !important; }

html[data-theme="light"] .bg-dark-900,
html[data-theme="light"] .bg-dark-900\/60 { background-color: #eef0f3 !important; }

html[data-theme="light"] .bg-dark-850 { background-color: #ffffff !important; }
html[data-theme="light"] .bg-dark-800 { background-color: #f0f1f4 !important; }

html[data-theme="light"] #navbar {
    background: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] .text-white { color: #0a0a0c !important; }
html[data-theme="light"] .text-neutral-200,
html[data-theme="light"] .text-neutral-300 { color: #2d2d35 !important; }
html[data-theme="light"] .text-neutral-400 { color: #555560 !important; }
html[data-theme="light"] .text-neutral-500 { color: #72727c !important; }
html[data-theme="light"] .text-neutral-600 { color: #94949e !important; }
html[data-theme="light"] .text-neutral-700 { color: #c8c8ce !important; }
html[data-theme="light"] .text-neutral-800 { color: #e5e5eb !important; }

html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/15,
html[data-theme="light"] .border-white\/20,
html[data-theme="light"] .border-white\/\[0\.06\],
html[data-theme="light"] .border-white\/\[0\.08\],
html[data-theme="light"] .border-white\/\[0\.12\] { border-color: rgba(10, 10, 12, 0.12) !important; }

html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10,
html[data-theme="light"] .bg-white\/20,
html[data-theme="light"] .bg-white\/\[0\.04\] { background-color: rgba(10, 10, 12, 0.05) !important; }

html[data-theme="light"] .group-hover\:bg-white { background-color: #0a0a0c !important; }
html[data-theme="light"] .group-hover\:text-black { color: #ffffff !important; }

html[data-theme="light"] .bg-white.text-black {
    background-color: #0a0a0c !important;
    color: #ffffff !important;
}
html[data-theme="light"] .hover\:bg-neutral-100:hover,
html[data-theme="light"] .hover\:bg-neutral-200:hover {
    background-color: #22222b !important;
    color: #ffffff !important;
}

html[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(10, 10, 12, 0.09) !important;
    box-shadow: 0 8px 30px rgba(15, 15, 25, 0.05);
}
html[data-theme="light"] .glass-card-interactive:hover {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(10, 10, 12, 0.22) !important;
    box-shadow: 0 16px 32px -8px rgba(15, 15, 25, 0.1) !important;
}

html[data-theme="light"] .hero-title-gradient {
    background: linear-gradient(180deg, #0a0a0c 20%, #52525c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .glow-sphere {
    background: radial-gradient(circle, rgba(10, 10, 12, 0.04) 0%, rgba(10, 10, 12, 0) 70%) !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track { background: #eef0f3; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d0d0d6; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #b2b2ba; }

html[data-theme="light"] .bg-dark-850.border-white\/10 {
    background-color: #ffffff !important;
    border-color: rgba(10, 10, 12, 0.15) !important;
}
html[data-theme="light"] .focus\:border-white:focus { border-color: #0a0a0c !important; }
html[data-theme="light"] .placeholder-neutral-600::placeholder { color: #9c9ca6 !important; }

/* Smooth transitions */
body, .glass-panel, .bg-dark-950, .bg-dark-900, .bg-dark-850 {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* MFx Accent System */
:root {
    --mfx-accent: #0b58bd;
    --mfx-accent-bright: #2879e6;
    --mfx-accent-deep: #063b83;
    --mfx-accent-rgb: 11, 88, 189;
    --mfx-accent-gradient: linear-gradient(135deg, #0b58bd 0%, #2879e6 52%, #78aef5 100%);
}
.hero-title-gradient {
    background: linear-gradient(180deg, #ffffff 14%, #9fc5ff 58%, #2879e6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
.mfx-accent-text { color: var(--mfx-accent-bright) !important; }
.mfx-accent-fill { background: var(--mfx-accent-gradient) !important; color: #fff !important; }
.bg-white.text-black, button.bg-white.text-black, a.bg-white.text-black {
    background: var(--mfx-accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(var(--mfx-accent-rgb), .24);
}
.bg-white.text-black:hover, button.bg-white.text-black:hover, a.bg-white.text-black:hover {
    filter: saturate(1.12) brightness(1.08);
    box-shadow: 0 14px 32px rgba(var(--mfx-accent-rgb), .34);
}
.mfx-lang-btn:hover, .mfx-switch:hover, .mfx-menu-btn:hover, .mfx-menu-close:hover {
    border-color: rgba(var(--mfx-accent-rgb), .72) !important;
    box-shadow: 0 0 0 3px rgba(var(--mfx-accent-rgb), .11);
}
.mfx-switch:focus-visible { outline-color: var(--mfx-accent-bright) !important; }
.glow-sphere { background: radial-gradient(circle, rgba(var(--mfx-accent-rgb), .15) 0%, rgba(var(--mfx-accent-rgb), 0) 70%) !important; }
.glass-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 35px rgba(0,0,0,.12); }
.glass-card-interactive:hover, .about-card-compact:hover {
    border-color: rgba(var(--mfx-accent-rgb), .68) !important;
    box-shadow: 0 18px 36px -10px rgba(0,0,0,.72), 0 0 28px rgba(var(--mfx-accent-rgb), .18) !important;
}

.mfx-portfolio-hero {
    background: radial-gradient(circle at 50% 10%, rgba(var(--mfx-accent-rgb), .2), transparent 48%), linear-gradient(180deg, rgba(var(--mfx-accent-rgb), .06), transparent 42%);
}
.mfx-category-card {
    position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.mfx-category-card::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--mfx-accent-gradient); opacity: .9; }
.mfx-category-card:hover { transform: translateY(-6px); border-color: rgba(var(--mfx-accent-rgb), .65); box-shadow: 0 20px 40px rgba(0,0,0,.26), 0 0 30px rgba(var(--mfx-accent-rgb), .16); }
.mfx-category-icon { background: var(--mfx-accent-gradient); color: #fff; box-shadow: 0 10px 25px rgba(var(--mfx-accent-rgb), .28); }
.mfx-chip { border: 1px solid rgba(var(--mfx-accent-rgb), .34); background: rgba(var(--mfx-accent-rgb), .1); color: #9fc5ff; }
.mfx-case-card { border-inline-start: 3px solid var(--mfx-accent); background: linear-gradient(100deg, rgba(var(--mfx-accent-rgb), .11), rgba(255,255,255,.025)); }
.mfx-case-label { color: #80b0f3; }
html[data-theme="light"] { --mfx-accent-bright: #0b58bd; }
html[data-theme="light"] .hero-title-gradient { background: linear-gradient(180deg, #0a0a0c 12%, #0b58bd 82%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html[data-theme="light"] .glow-sphere { background: radial-gradient(circle, rgba(var(--mfx-accent-rgb), .12) 0%, rgba(var(--mfx-accent-rgb), 0) 70%) !important; }
html[data-theme="light"] .mfx-category-card { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,245,252,.92)); border-color: rgba(10,10,12,.1); }
html[data-theme="light"] .mfx-chip { color: #08458f; background: rgba(var(--mfx-accent-rgb), .09); }
html[data-theme="light"] .mfx-case-card { background: linear-gradient(100deg, rgba(var(--mfx-accent-rgb), .08), rgba(10,10,12,.02)); }
html[data-theme="light"] .mfx-case-label { color: #08458f; }
@media (prefers-reduced-motion: reduce) { .mfx-category-card, .mfx-category-card:hover { transform: none; } }
#navbar nav a.text-white { color: var(--mfx-accent-bright) !important; border-color: rgba(var(--mfx-accent-rgb), .8) !important; }
::selection { background: var(--mfx-accent) !important; color: #fff !important; }
.mfx-accent-fill:hover { filter: saturate(1.12) brightness(1.08); }

/* Keep below-the-fold sections light for the browser to render. */
@supports (content-visibility: auto) {
    main > section:not(:first-child), footer { content-visibility: auto; contain-intrinsic-size: 1px 720px; }
}

/* Accent colored decorative geometry, kept stable on touch devices. */
.mfx-decor-svg, .svg-float-1, .svg-float-2 { will-change: auto; }
.mfx-decor-svg svg polygon, .mfx-decor-svg svg circle, .mfx-decor-svg svg rect, .mfx-decor-svg svg line, .mfx-decor-svg svg path { stroke: var(--mfx-accent-bright) !important; }
.mfx-decor-svg svg circle[fill], .mfx-decor-svg svg polygon[fill] { fill: rgba(var(--mfx-accent-rgb), .5) !important; }
@media (max-width: 767px) {
    .mfx-decor-svg { opacity: .18 !important; transform: translateZ(0); }
    .mfx-decor-svg, .svg-float-1, .svg-float-2, .animate-shape-1, .animate-shape-2, .animate-shape-3 { animation: none !important; }
    .mfx-decor-svg:nth-of-type(2) { display: none !important; }
}

/* Explicit dark defaults keep standalone pages consistent before utility CSS loads. */
html[data-theme="dark"] body { background-color: #030304 !important; color: #fff !important; }
html[data-theme="dark"] .bg-dark-950 { background-color: #030304 !important; }
html[data-theme="dark"] .bg-dark-900 { background-color: #08080a !important; }
html[data-theme="dark"] .bg-dark-850 { background-color: #0f0f13 !important; }
html[data-theme="dark"] .bg-dark-800 { background-color: #16161c !important; }
html[data-theme="light"] .mfx-decor-svg { filter: none !important; }
@keyframes mfxFloatSlow1 { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(15px,-20px,0) rotate(12deg); } }
@keyframes mfxFloatSlow2 { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-20px,15px,0) rotate(-10deg); } }
.svg-float-1 { animation: mfxFloatSlow1 12s ease-in-out infinite; }
.svg-float-2 { animation: mfxFloatSlow2 15s ease-in-out infinite; }