/* =========================================
   THEME 2026 - BLACK + ORANGE LEGENDARY
========================================= */

/* خلفية سوداء بالكامل */
body {
    background: #000000 !important;
    color: #FFA500 !important;
    overflow-x: hidden;
}

/* Overlay البداية */
.intro-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, #111 0%, #000 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    animation: overlayFadeOut 0.8s ease 3.8s forwards;
}

/* توهج خلفي */
.intro-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,140,0,0.5), transparent 70%);
    filter: blur(80px);
    animation: glowPulse 2s infinite alternate;
}

/* اللوقو الرئيسي */
.intro-logo {
    width: 220px;
    height: 220px;
    background: linear-gradient(145deg, #FFA500, #FF6B00);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px rgba(255,165,0,0.6);

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;

    animation: logoCinematic 3.5s cubic-bezier(.77,0,.18,1) forwards;
}


.intro-logo span {
    font-size: 80px;
    font-weight: 1000;
    color: white;
    letter-spacing: 3px;
}

@keyframes logoCinematic {

    0% {
        transform: translate(-50%, -50%) scale(0.5) rotate(-15deg);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -50%) scale(1.1) rotate(0deg);
        opacity: 1;
    }

    40% {
        transform: translate(-50%, -50%) scale(1);
    }

    70% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-680px, -420px) scale(0.35);
        opacity: 1;
    }
}

/* اختفاء الخلفية */
@keyframes overlayFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* نبض التوهج */
@keyframes glowPulse {
    from { transform: scale(1); opacity: 0.6; }
    to { transform: scale(1.2); opacity: 1; }
}

/* قفل التفاعل */
body.loading {
    overflow: hidden;
}

/* كل النصوص برتقالي */
h1,h2,h3,h4,h5,h6,p,a,span,li {
    color: #FFA500 !important;
}

/* الهيدر برتقالي + نص أسود */
.pro-header {
    background: #FFA500 !important;
}

.pro-header * {
    color: #000 !important;
}
 <!-- Intro Overlay 2026 -->
<div class="intro-overlay" id="introOverlay">
    <div class="intro-glow"></div>
    <div class="intro-logo" id="introLogo">
        <span>LOGO</span>
    </div>
</div>
/* خلفية سوداء إجبارية لكل الصفحة */
html, 
body, 
.main-content, 
.container, 
.section, 
.brands-section {
    background-color: #000000 !important;
}

/* أي بلوك عام */
div, section {
    background-color: transparent;
}

/* لو فيه كروت بيضاء */
.card, 
.brand-card, 
.box {
    background-color: #111111 !important;
    border: 1px solid #222 !important;
}

/* العناوين بالبرتقالي */
h1, h2, h3, h4, h5, h6 {
    color: #FFA500 !important;
}
body {
    background: radial-gradient(circle at top, #111 0%, #000 60%) !important;
}
/* ===== إجبار الخلفية سوداء بالكامل ===== */

html,
body,
#app,
#root,
.app,
.main-content,
main,
section,
.container,
.content-wrapper {
    background: #000000 !important;
}

/* إزالة أي خلفية فاتحة داخل الأقسام */
div[class*="section"],
div[class*="wrapper"],
div[class*="container"] {
    background: transparent !important;
}

/* لو فيه طبقة رمادية فوق الصفحة */
body::before,
body::after {
    display: none !important;
}
/* ===== جعل البار أبيض ===== */

header,
.pro-header,
.navbar,
.main-header {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eee !important;
}

/* جميع النصوص داخل البار أسود */
header *,
.pro-header *,
.navbar *,
.main-header * {
    color: #000000 !important;
    fill: #000000 !important;
}

/* روابط الهوفر */
header a:hover,
.pro-header a:hover {
    color: #FFA500 !important; /* برتقالي عند المرور */
}
/* ===== البار أبيض ===== */
header,
.pro-header,
.navbar,
.main-header,
.store-header {
    background: #ffffff !important;
    border-bottom: 1px solid #eee !important;
}

/* ===== الخط داخل البار برتقالي ===== */
header *,
.pro-header *,
.navbar *,
.main-header *,
.store-header * {
    color: #FFA500 !important;
    fill: #FFA500 !important;
}

/* روابط عند المرور */
header a:hover,
.pro-header a:hover {
    color: #FF6B00 !important; /* برتقالي أغمق عند الهوفر */
}

/* أيقونة السلة والبحث */
header svg,
header i {
    color: #FFA500 !important;
  translate(-680px, -420px)
.nav-logo {
    opacity: 0;
    animation: showRealLogo 0.3s ease 3.6s forwards;
}

@keyframes showRealLogo {
    to {
        opacity: 1;
    }
}