/* Add custom CSS styles below *//* Add custom CSS styles below */

body, #app, .salla-theme {
    background-color: #070913 !important;
    background-image: 
        radial-gradient(circle at 80% 15%, rgba(139, 92, 246, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 20% 85%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #070913 0%, #0d0f1a 50%, #161026 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
    animation: fastGlowPulse 2s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes fastGlowPulse {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.9; transform: scale(1.08); }
}

footer, section, div[class*="section"], div[class*="block"] {
    background-color: transparent !important;
}

main,
main > div,
main section,
main article,
main div[class*="section"],
main div[class*="block"],
main div[class*="container"],
main div[class*="stat"],
main div[class*="counter"],
main div[class*="achievement"],
main [data-testid*="section"],
main [data-testid*="stat"],
main ul[class*="menu"],
main ul[class*="list"],
main div[class*="wrapper"] {
    background-color: transparent !important;
    background-image: none !important;
}

body::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    background-image: radial-gradient(rgba(139, 92, 246, 0.25) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    pointer-events: none;
}

html {
    background-color: #070913 !important;
    background-image: 
        radial-gradient(rgba(139, 92, 246, 0.35) 1.5px, transparent 1.5px),
        radial-gradient(circle at 80% 15%, rgba(139, 92, 246, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 20% 85%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #070913 0%, #0d0f1a 50%, #161026 100%) !important;
    background-size: 30px 30px, 100% 100%, 100% 100%, 100% 100% !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* ============================================= */
/* ===== الهيدر الأساسي ===== */
/* ============================================= */
body {
    padding-top: 25px !important;
}

header {
    background-color: #070913 !important;
    background-image: 
        radial-gradient(circle at 80% 15%, rgba(139, 92, 246, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 20% 85%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #070913 0%, #0d0f1a 50%, #161026 100%) !important;
    width: 99% !important;
    max-width: 1800px !important;
    margin: 0 auto 20px auto !important;
    padding: 20px 24px 14px 24px !important;
    border-radius: 32px !important;
    border: 1px solid rgba(196, 154, 253, 0.7) !important;
    box-shadow: 
        0 0 20px rgba(196, 154, 253, 0.5),
        0 0 40px rgba(139, 92, 246, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    top: 0 !important;
    box-sizing: border-box !important;
    transition: background-color 0.4s ease, background-image 0.4s ease, top 0.4s ease, padding 0.4s ease, border-radius 0.4s ease !important;
}

header:hover {
    background-color: #ffffff !important;
    background-image: none !important;
}

header *:not(img) {
    background-color: transparent !important;
    background-image: none !important;
    transition: color 0.4s ease !important;
}

/* نص الهيدر الأساسي عند التأشير */
header span, header p, header a {
    color: #ffffff !important;
}

header:hover span, header:hover p, header:hover a {
    color: #1a1a2e !important;
}

header svg, header i {
    color: #ffffff !important;
    fill: #ffffff !important;
    transition: color 0.4s ease, fill 0.4s ease !important;
}

header:hover svg, header:hover i {
    color: #1a1a2e !important;
    fill: #1a1a2e !important;
}

/* ============================================= */
/* ===== إخفاء زر البحث المنفصل ===== */
/* ============================================= */
header button[class*="search"],
header [class*="search-icon"],
header [class*="search-toggle"],
header [class*="search-btn"],
header a[class*="search"] {
    display: none !important;
}

/* ============================================= */
/* ===== شريط البحث ===== */
/* ============================================= */
header input {
    max-width: 800px !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    transition: all 0.4s ease !important;
}
header input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: color 0.4s ease !important;
}
header:hover input {
    background-color: #f5f5f5 !important;
    color: #1a1a2e !important;
    border: 1px solid #dddddd !important;
}
header:hover input::placeholder {
    color: #999999 !important;
}

header input:not(.custom-big-logo) {
    display: block !important;
    margin: 0 340px -20px 0 !important;
}

/* ============================================= */
/* ===== الشعار ===== */
/* ============================================= */
header img.custom-big-logo {
    position: absolute !important;
    top: 10px !important;
    right: -10px !important;
    left: auto !important;
    width: 600px !important;
    height: auto !important;
    max-width: 600px !important;
    max-height: 150px !important;
    object-fit: contain !important;
    margin: 0 !important;
    transform: none !important;
    filter: brightness(0) invert(1) !important;
    transition: filter 0.4s ease, top 0.4s ease, bottom 0.4s ease, width 0.4s ease, right 0.4s ease !important;
    image-rendering: -webkit-optimize-contrast !important;
    z-index: 10 !important;
}

header:hover img.custom-big-logo {
    filter: none !important;
}

header a[data-testid="store-header-logo"] {
    position: absolute !important;
    top: -90px !important;
    right: -150px !important;
    left: auto !important;
    width: 600px !important;
    height: 150px !important;
    max-height: 150px !important;
    z-index: 10 !important;
    display: block !important;
    transition: top 0.4s ease, bottom 0.4s ease, width 0.4s ease, height 0.4s ease, right 0.4s ease !important;
}

/* ============================================= */
/* ===== التصنيفات الأساسية ===== */
/* ============================================= */
header nav, header ul {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

header nav li, header nav a {
    position: relative !important;
    z-index: 11 !important;
}

header nav a, header li a {
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

header nav {
    scrollbar-width: none !important;
}
header nav::-webkit-scrollbar {
    display: none !important;
}

/* خلفية افتح للتصنيف الأساسي عند التأشير */
header nav a:hover,
header li a:hover,
header li:hover > a,
header:hover nav a:hover,
header:hover li a:hover,
header:hover li:hover > a {
    color: #ffffff !important;
    background: rgba(192, 132, 252, 0.55) !important;
    border: 1px solid #d8b4fe !important;
    border-radius: 20px !important;
    box-shadow: 
        0 0 18px rgba(192, 132, 252, 0.85),
        0 0 35px rgba(139, 92, 246, 0.65),
        inset 0 0 12px rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9) !important;
}

header nav a:hover svg, header nav a:hover i,
header li a:hover svg, header li a:hover i,
header li:hover > a svg, header li:hover > a i,
header:hover nav a:hover svg, header:hover nav a:hover i,
header:hover li a:hover svg, header:hover li a:hover i,
header:hover li:hover > a svg, header:hover li:hover > a i {
    color: #ffffff !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 0 5px #ffffff) !important;
}

/* ============================================= */
/* ===== القوائم المنسدلة والتصنيفات الفرعية ===== */
/* ============================================= */
header ul ul,
header li ul,
header .dropdown-menu,
header [class*="dropdown"],
header [class*="submenu"],
header [class*="sub-menu"] {
    width: auto !important;
    flex-wrap: nowrap !important;
    background-color: #1e1338 !important;
    background-image: linear-gradient(145deg, #241445 0%, #150b29 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    border-radius: 14px !important;
    min-width: 220px !important;
    padding: 8px 6px !important;
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(139, 92, 246, 0.35) !important;
    z-index: 99999 !important;
}

/* حماية قاطعة لنصوص عناصر القائمة الفرعية ومنع تحولها للون الداكن عند hover الهيدر */
header:hover ul ul, header:hover ul ul *,
header:hover li ul, header:hover li ul *,
header:hover .dropdown-menu, header:hover .dropdown-menu *,
header:hover [class*="dropdown"], header:hover [class*="dropdown"] *,
header:hover [class*="submenu"], header:hover [class*="submenu"] *,
header:hover [class*="sub-menu"], header:hover [class*="sub-menu"] *,
header ul ul, header ul ul *,
header li ul, header li ul *,
header .dropdown-menu, header .dropdown-menu *,
header [class*="dropdown"], header [class*="dropdown"] *,
header [class*="submenu"], header [class*="submenu"] *,
header [class*="sub-menu"], header [class*="sub-menu"] * {
    color: #ffffff !important;
}

/* تنسيق ألوان وروابط التصنيفات الفرعية */
header ul ul a,
header li ul a,
header .dropdown-menu a,
header [class*="dropdown"] a,
header [class*="submenu"] a,
header [class*="sub-menu"] a,
header:hover ul ul a,
header:hover li ul a,
header:hover .dropdown-menu a,
header:hover [class*="dropdown"] a,
header:hover [class*="submenu"] a,
header:hover [class*="sub-menu"] a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    display: block !important;
    border-radius: 8px !important;
    text-shadow: none !important;
    filter: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* التأشير على التصنيف الفرعي */
header ul ul a:hover,
header li ul a:hover,
header .dropdown-menu a:hover,
header [class*="dropdown"] a:hover,
header [class*="submenu"] a:hover,
header [class*="sub-menu"] a:hover,
header:hover ul ul a:hover,
header:hover li ul a:hover,
header:hover .dropdown-menu a:hover,
header:hover [class*="dropdown"] a:hover,
header:hover [class*="submenu"] a:hover,
header:hover [class*="sub-menu"] a:hover {
    color: #ffffff !important;
    background: rgba(168, 85, 247, 0.35) !important;
    text-shadow: none !important;
}

header div.sub-menu,
header div[class*="sub-menu"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================= */
/* ===== أزرار الحساب والسلة والإحصائيات ===== */
/* ============================================= */
header [class*="cart"] span, header [class*="cart"] p, header [class*="price"] {
    color: #ffffff !important;
}
header:hover [class*="cart"] span, header:hover [class*="cart"] p, header:hover [class*="price"] {
    color: #1a1a2e !important;
}

header salla-user-menu button, header #s-cart-icon, header .s-cart-summary-wrapper {
    border-color: #ffffff !important;
}
header:hover salla-user-menu button, header:hover #s-cart-icon, header:hover .s-cart-summary-wrapper {
    border-color: #1a1a2e !important;
}

/* ============================================= */
/* ===== الأيقونات العلوية (السلة + المستخدم) ===== */
/* ============================================= */
/* أكدت الـ selectors هذي عبر Inspect مباشرة من المتصفح */

/* دائرة أيقونة السلة كاملة */
header #s-cart-icon {
    width: 2.5rem !important;      /* حجم الدائرة - كبّر/صغّر هذا الرقم (بالـ rem) */
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* الأيقونة (رسمة الحقيبة) نفسها جوا الدائرة */
header #s-cart-icon i.header-btn__icon.sicon-shopping-bag {
    font-size: 1.1rem !important;  /* حجم رسمة الحقيبة نفسها - كبّر/صغّر هذا الرقم */
}

/* صورة المستخدم (الأفاتار الدائرية) */
header img.s-user-menu-trigger-avatar.custom-small-icon {
    width: 2.5rem !important;      /* حجم الأفاتار - كبّر/صغّر هذا الرقم (بالـ rem) */
    height: 2.5rem !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
}

/* المسافة بين الأيقونتين (السلة والمستخدم) وبعضهم */
header salla-user-menu,
header .s-cart-summary-wrapper {
    margin-inline-end: 8px !important;   /* المسافة الفاصلة بينهم - كبّر/صغّر هذا الرقم */
}

/* دفع مجموعة الأيقونتين (السلة + المستخدم) لتقترب من الشعار يمين */
/* ملاحظة مهمة: margin-inline-start بصفحة RTL يدفع العنصر بعيد عن جهة
   اليمين (أي تجاه اليسار) - عكس المقصود بالتعليق الأصلي. هذا كان
   سبب اختفاء مجموعة الأيقونتين بأقصى يسار الهيدر بعيد عن الشعار.
   استخدمنا margin-inline-end بدالها عشان تقترب فعليًا من جهة اليمين */
header div[class*="justify-end"][class*="my-2.5"] {
    margin-inline-start: 0 !important;
    margin-inline-end: 850px !important;   /* كبّر الرقم لتقريبهم أكثر من الشعار، صغّره لإبعادهم أكثر */
}

main div[class*="stat"], main div[class*="counter"], main div[class*="achievement"] {
    background-color: transparent !important;
}

/* ============================================= */
/* ===== زر الرجوع لأعلى الصفحة (بديل الهيدر الزجاجي) ===== */
/* ============================================= */
/* الهيدر الآن ثابت بمكانه الطبيعي دائمًا ولا يتحول لوضع Sticky عند
   السكرول. بدلاً من ذلك يظهر زر شفاف دائري أسفل الشاشة بعد تجاوز
   حد تمرير معين، يعيد المستخدم لأعلى الصفحة عند الضغط عليه */
#js-scroll-top-btn {
    position: fixed !important;
    bottom: 24px !important;
    left: 20px !important;   /* غيّرها لـ right لو تبيه بالجهة اليمين بدل اليسار */
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(196, 154, 253, 0.5) !important;
    background: rgba(14, 11, 28, 0.35) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s !important;
    z-index: 99999 !important;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.3) !important;
}
#js-scroll-top-btn.js-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
#js-scroll-top-btn:hover {
    background: rgba(139, 92, 246, 0.55) !important;
}

/* ============================================= */
/* ===== ضبط توسيط العجلة والمربع الأبيض ===== */
/* ============================================= */

#custom-fortune-wheel-section {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 40px auto 10px auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

.fortune-wheel-wrapper {
    background: rgba(13, 15, 26, 0.85) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(196, 154, 253, 0.4) !important;
    border-radius: 24px !important;
    padding: 28px 20px !important;
    text-align: center !important;
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important; /* ضمان التوسيط */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.wheel-title {
    color: #ffffff !important;
    font-size: 1.4em !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
}

.wheel-subtitle {
    color: #c49afd !important;
    font-size: 0.9em !important;
    margin: 0 0 20px 0 !important;
}

.wheel-container {
    position: relative !important;
    width: 300px !important;
    height: 300px !important;
    margin: 0 auto 20px auto !important;
}

#fortuneWheelCanvas {
    display: block !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
}

.wheel-pointer {
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 12px solid transparent !important;
    border-right: 12px solid transparent !important;
    border-top: 24px solid #ffffff !important;
    z-index: 10 !important;
}

.spin-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 36px !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
}

/* ===== المربع الأبيض الظاهر بعد اللف ===== */
/* هذا المربع الآن ينتقل عبر JS ليصير ابن مباشر لـ body (مو جوا
   fortune-wheel-wrapper)، عشان position: fixed يشتغل صح بالنسبة
   للشاشة كاملة، وما يتأثر بخاصية backdrop-filter الموجودة على
   العنصر الأب اللي كانت تكسر تموضعه وتخليه يظهر بمكان غلط بالصفحة */
.wheel-result-white-box {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.wheel-result-white-box.hidden {
    display: none !important;
}

.white-box-content {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    max-width: 320px !important;
    width: 85% !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
}

.close-box-btn {
    position: absolute !important;
    top: 8px !important;
    right: 14px !important;
    font-size: 22px !important;
    font-weight: bold !important;
    color: #333333 !important;
    cursor: pointer !important;
}

#resultBoxTitle {
    color: #1a1a2e !important;
    font-size: 1.1em !important;
    margin: 10px 0 15px 0 !important;
    font-weight: 700 !important;
}

.coupon-code-container {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    background: #f3f4f6 !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border: 1px dashed #8b5cf6 !important;
}

.coupon-code-container input {
    background: transparent !important;
    border: none !important;
    color: #7c3aed !important;
    font-size: 1.2em !important;
    font-weight: 800 !important;
    text-align: center !important;
    width: 130px !important;
    outline: none !important;
}

.coupon-code-container button {
    background: #7c3aed !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 0.85em !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.limit-notice {
    color: #6b7280 !important;
    font-size: 0.8em !important;
    margin-top: 10px !important;
}

/* ============================================= */
/* ===== ضبط عام: منع أي سكرول أفقي زائد ===== */
/* ============================================= */
/* العناصر الزخرفية بخلفية الصفحة (body::before/::after) وبعض
   عناصر الهيدر المطلقة الموضع ممكن تسبب شريط تمرير أفقي خفي
   بالجوال. هذا يمنعه بشكل عام وآمن بدون التأثير على أي تخطيط */
html, body {
    overflow-x: hidden !important;
}

/* ============================================= */
/* ===== نسخة الجوال (Mobile) - الهيدر، الشعار، البحث، التصنيفات ===== */
/* ============================================= */
/* كل القيم بالأعلى (عرض شعار 600px، هوامش سالبة، إحداثيات مطلقة...)
   مصممة أصلاً لشاشات الديسكتوب الواسعة. بهذا الـ media query نرجع
   الهيدر لتخطيط عمودي بسيط يناسب شاشة الجوال، ونحل مشكلة اختفاء
   صف التصنيفات (كانت مخفية أو منسحقة بسبب نفس الإحداثيات المطلقة
   المصممة لشاشة أعرض بكثير) */
@media (max-width: 768px) {

    body {
        padding-top: 8px !important;
    }

    header {
        width: 94% !important;
        padding: 10px 14px 4px 14px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    /* الشعار: نلغي التموضع المطلق الضخم ونرجعه لعنصر عادي بحجم
       متوسط متوسّط بأعلى الهيدر، عشان ما يتراكب مع باقي العناصر.
       order:2 يحدد ترتيبه بالنسبة لشريط البحث تحت (رقم أصغر = يطلع فوق) */
    header img.custom-big-logo {
        order: 2 !important;
        position: static !important;
        display: block !important;
        margin: 0 auto !important;
        width: 160px !important;
        max-width: 160px !important;
        max-height: 60px !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
    }

    header a[data-testid="store-header-logo"] {
        order: 2 !important;
        position: static !important;
        display: block !important;
        margin: 0 auto !important;
        width: 160px !important;
        height: 60px !important;
        max-height: 60px !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
    }

    /* ===== شريط البحث بالجوال (تحكم كامل بمكانه) =====
       - position: static يمنع أي تراكب فوق اللوقو نهائيًا
       - order: رقم أكبر من اللوقو (2) عشان ينزل تحته دايمًا.
         لو حبيت شريط البحث يطلع فوق اللوقو، خلي هذا الرقم أصغر من 2
       - margin: الرقم الأول هو المسافة فوق شريط البحث (بينه وبين
         اللي قبله). كبّر الرقم لو التراكب لسه موجود
       - z-index: يضمن ظهور شريط البحث فوق اللوقو حتى لو صار تراكب
         بالخطأ لأي سبب. كبّره أكثر (5 أو 10) لو احتجت */
    header input:not(.custom-big-logo) {
        position: static !important;
        order: 5 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px 0 0 0 !important;
        height: 40px !important;
        z-index: 1 !important;
    }

    /* التصنيفات: أهم نقطة بالطلب - نفرض ظهورها صراحة ونحولها
       لصف واحد قابل للتمرير الأفقي باللمس تحت شريط البحث، بدل ما
       تختفي أو تتكدس فوق بعض بسبب الإحداثيات المطلقة الخاصة بالديسكتوب */
    header nav,
    header ul {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        gap: 4px !important;
    }

    header nav a, header li a {
        padding: 6px 12px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    /* زر الرجوع لأعلى بالجوال - نفس الزر بس أصغر شوي */
    #js-scroll-top-btn {
        width: 42px !important;
        height: 42px !important;
        bottom: 16px !important;
        left: 14px !important;
        font-size: 18px !important;
    }
}

/* ============================================= */
/* ===== نسخة الجوال - عجلة الحظ (تصغير على الشاشات الصغيرة جدًا) ===== */
/* ============================================= */
@media (max-width: 380px) {
    .wheel-container {
        width: 240px !important;
        height: 240px !important;
    }
}
/* ============================================= */
/* ===== إصلاح نهائي لنافذة عجلة الحظ ===== */
/* ============================================= */

body > #wheelResultModal {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 20px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(0, 0, 0, 0.75) !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    z-index: 2147483647 !important;

    overflow: hidden !important;
}

/* إخفاء النافذة */
body > #wheelResultModal.hidden {
    display: none !important;
}

/* ============================================= */
/* ===== المربع الأبيض نفسه ===== */
/* ============================================= */

body > #wheelResultModal > .white-box-content {
    position: relative !important;

    display: block !important;

    width: 90% !important;
    max-width: 360px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 30px 20px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    color: #1a1a2e !important;

    opacity: 1 !important;
    visibility: visible !important;

    border-radius: 18px !important;

    transform: none !important;
    filter: none !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.65),
        0 0 30px rgba(139,92,246,0.35) !important;

    text-align: center !important;
}

/* ============================================= */
/* ===== النص داخل المربع ===== */
/* ============================================= */

body > #wheelResultModal #resultBoxTitle {
    display: block !important;

    color: #1a1a2e !important;
    background: transparent !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    line-height: 1.5 !important;

    margin: 5px 0 18px !important;

    opacity: 1 !important;
}

/* ============================================= */
/* ===== زر الإغلاق ===== */
/* ============================================= */

body > #wheelResultModal .close-box-btn {
    position: absolute !important;

    top: 8px !important;
    right: 12px !important;

    width: auto !important;
    height: auto !important;

    background: transparent !important;

    color: #333333 !important;

    font-size: 26px !important;
    font-weight: bold !important;

    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 20 !important;
}

/* ============================================= */
/* ===== منطقة الكود ===== */
/* ============================================= */

body > #wheelResultModal .coupon-code-container {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 auto !important;

    padding: 8px !important;

    box-sizing: border-box !important;

    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;

    border: 1px dashed #8b5cf6 !important;

    border-radius: 10px !important;

    opacity: 1 !important;
}

/* الكود */
body > #wheelResultModal .coupon-code-container input {
    background: transparent !important;

    color: #7c3aed !important;

    opacity: 1 !important;

    border: none !important;
    outline: none !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    text-align: center !important;

    width: 130px !important;
}

/* زر النسخ */
body > #wheelResultModal #copyCouponBtn {
    background: #7c3aed !important;
    color: #ffffff !important;

    border: none !important;

    padding: 9px 14px !important;

    border-radius: 8px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
}

/* النص السفلي */
body > #wheelResultModal .limit-notice {
    background: transparent !important;

    color: #6b7280 !important;

    font-size: 13px !important;

    margin: 12px 0 0 !important;
}

/* ============================================= */
/* ===== الجوال ===== */
/* ============================================= */

@media (max-width: 480px) {

    body > #wheelResultModal {
        padding: 15px !important;
    }

    body > #wheelResultModal > .white-box-content {
        width: 92% !important;
        max-width: 330px !important;

        padding: 28px 16px !important;
    }

}
/* ===== إصلاح الشريط الأبيض خلف المربع ===== */
.wheel-result-white-box {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: transparent !important; /* إلغاء أي خلفية بيضاء ممتدة */
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
}

.wheel-result-white-box.hidden {
    display: none !important;
}

/* المحتوى الأبيض الصغير والمحدد فقط */
.white-box-content {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border-radius: 16px !important;
    padding: 20px 16px !important;
    width: 270px !important;
    max-width: 90vw !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    border: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
}

.close-box-btn {
    position: absolute !important;
    top: 6px !important;
    right: 12px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #666666 !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

#resultBoxTitle {
    color: #1a1a2e !important;
    font-size: 0.95em !important;
    margin: 10px 0 12px 0 !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.coupon-code-container {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    background: #f3f4f6 !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    border: 1px dashed #8b5cf6 !important;
}

.coupon-code-container input {
    background: transparent !important;
    border: none !important;
    color: #7c3aed !important;
    font-size: 1.05em !important;
    font-weight: 800 !important;
    text-align: center !important;
    width: 100px !important;
    outline: none !important;
}

.coupon-code-container button {
    background: #7c3aed !important;
    color: #ffffff !important;
    border: none !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    font-size: 0.8em !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.limit-notice {
    color: #6b7280 !important;
    font-size: 0.78em !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}
/* ============================== */
/* 1. وصف المنتج */
/* ============================== */
.article--main,
.article--main * {
    color: #ffffff !important;
}

/* ============================== */
/* 2. السعر (العنصر اللي فيه أيقونة الريال) */
/* ============================== */
p.font-bold.text-xl.inline-block,
p.font-bold.text-xl.inline-block i.sicon-sar {
    color: #ffffff !important;
}

/* لضمان شمول أي سعر مشابه بنفس التركيبة في كل الصفحة */
.text-xl.inline-block {
    color: #ffffff !important;
}

/* ============================== */
/* 3. الكمية (زر + و - والرقم) */
/* ============================== */
.s-quantity,
.s-quantity *,
.quantity,
.quantity * {
    color: #ffffff !important;
}

/* ============================== */
/* 4. الخط الأبيض الغريب تحت المحتوى */
/* ============================== */
.product-single hr,
.product-details hr,
article.article--main + hr {
    display: none !important;
}

/* ============================== */
/* 5. تصغير ارتفاع الفوتر */
/* ============================== */
footer.s-footer,
.s-footer {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
}

/* ============================== */
/* 6. أيقونات التواصل بالفوتر - لون أسود */
/* ============================== */
/* الأيقونات هذي أصلها بلون غامق (من ثيم سلة الافتراضي الفاتح)، وبما
   إن خلفية الفوتر عندنا غامقة، صارت الأيقونة غامقة على غامق = مختفية
   بصريًا بس شغالة وتقدر تضغط عليها. هذا يفرض اللون الأسود عليها
   بناءً على طلبك (بدل الأبيض السابق) */
footer svg,
footer i,
footer a svg,
footer a i,
.s-footer svg,
.s-footer i,
.s-footer a svg,
.s-footer a i {
    color: #000000 !important;
    fill: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* تأكيد إضافي على أيقونات الواتساب/الجوال/الإيميل تحديدًا، لضمان
   ظهورها كلها وبنفس اللون الأسود */
footer a[href^="mailto"] svg,
footer a[href^="mailto"] i,
footer a[href^="tel"] svg,
footer a[href^="tel"] i,
footer a[href*="wa.me"] svg,
footer a[href*="wa.me"] i {
    color: #000000 !important;
    fill: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

/* ============================== */
/* 7. سهم الفتات (breadcrumb) - أبيض بدل أسود */
/* ============================== */
nav[class*="breadcrumb"] svg,
nav[class*="breadcrumb"] i,
[class*="breadcrumb"] svg,
[class*="breadcrumb"] i {
    color: #ffffff !important;
    fill: #ffffff !important;
} 
/* تمارا: نص أبيض */
salla-installment,
salla-installment *,
.s-installment,
.s-installment *,
[class*="tamara"],
[class*="tamara"] *,
tamara-widget {
  color: #ffffff !important;
}

salla-installment a,
[class*="tamara"] a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* سهم المعلومات */
salla-installment svg,
[class*="tamara"] svg {
  fill: #ffffff !important;
}