/* =========================================================
   1) ألوان الصفحة العامة (الخلفية + لون النص الافتراضي)
   ========================================================= */
body{
  background-color:#181818;   /* لون خلفية الموقع */
  position: relative;       /* عشان النويز */
  color:#231f1e;              /* لون النص الافتراضي (إذا ما انحدد لون للنص) */
}


/* =========================================================
   2) متغيرات عامة (ألوان تستخدمها الثيم/العناصر)
   ========================================================= */
:root{
  --infinte-color: #c9c9c9;         /* لون رمادي عام */
  --main-text-color: #FFFFFF;       /* لون النص الأساسي */
  --main-text-color-dark: #2b2d34;  /* لون نص داكن للاستخدامات الخاصة */
  --color-text: #000000;            /* لون نص أسود */
  --bg-gray: rgba(198,199,206,0.10196); /* خلفية رمادية شفافة */
  --color-grey: #f5f7f9;            /* رمادي فاتح */
  --color-light-grey: #eeeeee;      /* رمادي أفتح */
  --mm-ocd-width: calc(100% - 51px);/* عرض خاص لقائمة/مكون */
}

/* =========================================================
   3) خلفيات أساسية (أسود/أبيض) — ترتيبها مهم
   ========================================================= */
.bg-inherit{
  background-color:#000000 !important; /* يخلي خلفية عناصر معينة سوداء */
}

/* ملاحظة: عندك .bg-white مكررة مرتين وبقيم مختلفة
   خلّيت آخر قيمة (اللي تبغاها فعلياً) وهي الرمادي الداكن */
.bg-white{
  background-color: rgb(33 33 33) !important; /* خلفية بدل الأبيض */
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
/* =========================================================
   4) ألوان العناوين والنصوص العامة
   ========================================================= */
h1, h2, h3{
  color: rgb(255 255 255) !important; /* لون عناوين الصفحة */
}
h4{
  color: rgb(255 255 255) !important;  /* لون عنوان أصغر (مميز) */
}
p{
  color: rgb(255 255 255) !important; /* لون الفقرات */
}
b{
  color: rgb(255 255 255) !important; /* لون النص الغامق */
}

/* لون الروابط العام (انت حاطه أبيض) */
a{
  color: rgb(255 255 255) !important;
}

/* =========================================================
   5) قسم المميزات (Features block)
   ========================================================= */
.s-block--features__item{
  --tw-bg-opacity: 1; /* لازم 1 مو 100 */
  background-color: rgba(255,255,255,var(--tw-bg-opacity)) !important; /* خلفية كرت الميزة */
}
.s-block--features__item a{
  color:#000000 !important; /* لون رابط/نص داخل كرت الميزة */
}
.s-block--features__item {
    --tw-bg-opacity: 1;
    background-color: rgb(41 41 41) !important;
}
.s-button-primary-outline {
    color: #ffffff;              /* لون النص */
    background-color: #000000;   /* خلفية الزر */
    border: 1px solid #ffffff;   /* إطار أبيض */
}
.s-button-primary-outline:hover {
    background-color: #ffffff;
    color: #000000;
}


/* =========================================================
   6) كروت المنتجات (Product Cards)
   ========================================================= */
.s-product-card-content{
  padding: 1.25rem;         /* مسافة داخل الكرت */
  background-color:#000000; /* خلفية محتوى الكرت */
}
.s-product-card-content a{
  color:#FDFDFD;            /* لون روابط/نصوص داخل الكرت */
}

/* سعر التخفيض */
.s-product-card-sale-price span{
  color: rgb(153 153 153) !important; /* لون السعر الثانوي */
}

/* صور المنتجات + تأثير الإضاءة */
.s-product-card-image img{
  position: relative;
  border-radius: 10px; /* تدوير زوايا صورة المنتج */
  overflow: hidden;    /* قص الزوائد */
  box-shadow: 0px 0px 15px 5px rgba(0, 255, 0, 0.7); /* إضاءة خضراء */
}
.s-product-card:hover{
  box-shadow: 0px 0px 20px 10px rgba(0, 255, 0, 1); /* إضاءة أقوى عند المرور */
}
.s-product-card img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px; /* نفس تدوير الصورة */
}

/* خيارات المنتج (غالباً منطقة الخيارات/المقاسات) */
.s-product-options-wrapper{
  padding: 1.25rem;                     /* مسافة داخلية */
  background-color: rgb(255 255 255 / 0%); /* خلفية شفافة */
}

/* =========================================================
   7) الهيدر (الأيقونات + أزرار الهيدر + تدوير الزوايا)
   ========================================================= */
.s-user-menu-trigger{
  background-color: rgb(0 0 0) !important; /* خلفية زر حساب المستخدم */
}
.header-btn__icon{
  border-color: rgb(255 255 255) !important; /* لون حدود الأيقونة */
  color: rgb(255 255 255) !important;        /* لون الأيقونة */
}

/* تدوير زوايا الشريط الأسود أعلى الصفحة 
header .inner.bg-inherit.w-full{
  border-radius: 0 0 19px 19px !important; /* غيّرها 10-18 على حسب ذوقك 
  overflow: visible !important;
  border-color: black;
}
*/
.mm-spn span {
    background: black;
}
.mm-spn.mm-spn--navbar:after {
    background-color: #171919;
}
/* =========================
   1) الخط السفلي: فقط للعناوين الرئيسية (مو عناصر الدروب داون)
   ========================= */
header .main-menu > li > a{
  position: relative;
  display: inline-block;
  padding: 14px 18px;
  text-decoration: none;
}

.main-menu .sub-menu{
  background: none;
}
.w-56 {
    width: 15rem;
}
header .main-menu .sub-menu,
header .main-menu .sub-menu *{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* =========================
   2) إصلاح الدروب داون: إزالة الأبيض + ترتيب الخلفية
   ========================= */
header .main-menu > li > ul,
header .main-menu li ul{
  background: #000 !important;     /* خلفية القائمة المنسدلة */
  padding: 10px 0 !important;      /* شيل الفراغات اللي تطلع الأبيض */
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* روابط الدروب داون تكون بلوك كامل */
header .main-menu li ul li > a{
  display: block !important;
  padding: 12px 18px !important;
  background: transparent !important;
}

/* Hover بسيط داخل الدروب داون (بدون ألم للعين) */
header .main-menu li ul li > a:hover{
  background: rgba(255,255,255,0.06) !important;
}


/* =========================================================
   8) النماذج (Inputs) والحقول
   ========================================================= */
.form-input{
  background-color: rgb(255 255 255) !important; /* خلفية حقل الإدخال */
  border-color: rgb(66 208 247) !important;      /* لون إطار الحقل */
}
.form-label{
  color: rgb(255 255 255) !important; /* لون عنوان الحقل */
}

/* كمية المنتج */
.s-quantity-input-input{
  background-color:#ffffff !important; /* خلفية مربع الكمية */
}

/* =========================================================
   9) المودال (النوافذ المنبثقة: تسجيل/تحقق..)
   ========================================================= */
.s-modal-body{
  background-color: rgb(24 24 24) !important; /* خلفية المودال */
}
.s-modal-title{
  color: rgb(255 255 255) !important; /* عنوان المودال */
}
.s-modal-close{
  --tw-bg-opacity: 0;
  background-color: rgba(255,255,255,var(--tw-bg-opacity)) !important; /* زر الإغلاق شفاف */
}
.s-login-modal-label{
  color: rgb(255 255 255) !important; /* نصوص تسجيل الدخول */
}
.s-localization-modal-label{
  color: rgb(255 255 255) !important; /* نصوص اختيار الدولة/اللغة */
}
.s-login-modal-link{
  color: rgb(68 184 255) !important;  /* روابط داخل تسجيل الدخول */
}
.s-verify-input{
  background-color:#000 !important;   /* خلفية خانة كود التحقق */
}

/* =========================================================
   10) intl-tel-input (حقل الجوال مع كود الدولة)
   ========================================================= */
.iti__dial-code,
.iti__country-name,
.iti--separate-dial-code .iti__selected-dial-code{
  color:#000 !important; /* لون نص كود الدولة/الدولة داخل القائمة */
}

/* =========================================================
   11) الريفيوز/التقييمات/التعليقات
   ========================================================= */
.s-reviews-testimonial{
  background-color: rgb(23 34 36) !important; /* خلفية كرت رأي العميل */
}
.s-comments-product{
  background-color:#181818 !important;        /* خلفية التعليقات */
}

/* =========================================================
   12) السلايدر في صفحة المنتج
   ========================================================= */
salla-slider.details-slider .s-slider-container{
  border-radius: .1rem;  /* تدوير بسيط للسلايدر */
  border-width: 0px;     /* بدون حدود */
  --tw-bg-opacity: 0;    /* خلفية شفافة لو تستخدم tw */
}

/* =========================================================
   13) قوائم/نصوص جانبية (حسب ما كنت مغيرها)
   ========================================================= */
ul, li{
  color: aqua !important; /* لون عناصر القائمة */
}
.whitespace-nowrap{
  color: aqua !important; /* لون نصوص تمنع الالتفاف */
}

/* =========================================================
   14) ألوان Tailwind شائعة
   ========================================================= */
.text-gray-800{
  color: rgb(255 255 255) !important; /* تحويل الرمادي الداكن لأبيض */
}
.bg-gray-50{
  background-color: rgb(0 89 177) !important; /* خلفية بلو */
}

/* =========================================================
   15) صفحة الشكر
   ========================================================= */
.thankyou-block{
  background-color: rgb(33 33 33) !important; /* خلفية بلوك الشكر */
}

/* =========================================================
   16) خطوط/أوزان (Font weights) — انت حاط اللون معها
   ========================================================= */
.font-bold{
  font-weight: 700;
  color: white !important; /* لون نص بولد */
}
.font-normal{
  font-weight: 400;
  color: white !important; /* لون نص عادي */
}

/* =========================================================
   17) قائمة الموبايل (mmenu)
   ========================================================= */
.mm-spn ul{
  background-color:#0f0f0f !important; /* خلفية قائمة الموبايل */
}
.mm-spn.mm-spn--navbar:after{
  background-color:#00d8ff !important; /* خط/شريط أعلى القائمة */
}
.main-menu li>a{
  background-color: black !important;  /* خلفية عناصر القائمة */
}

/* =========================================================
   18) يوتيوب (قيمة hidden كانت غلط)
   ========================================================= */
lite-youtube{
  background-color: transparent !important; /* خلفية شفافة */
}

/* =========================================================
   19) عنصر p-4 (كان عندك يلوّن أي عنصر بتاع p-4)
   ========================================================= */
.p-4{
  background-color:#000 !important; /* خلفية لأي عنصر عليه كلاس p-4 */
}

/* =========================================================
   20) بلوك التعريف اللي سويته (scoopk-features-intro)
   ========================================================= */
.scoopk-features-intro{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;     /* محاذاة وسط */
  justify-content: center; /* توسيط عمودي */
  margin: 0 auto 32px auto;
  text-align: center;      /* توسيط نص */
}
.scoopk-features-intro .scoopk-title{
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-align: center;
}
.scoopk-features-intro .scoopk-desc{
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  line-height: 1.9;
  margin: 0;
  max-width: 900px;
  text-align: center;
}

/* ========= استبدال الأزرق فقط – بدون لمس الباقي ========= */

/* إطار حقول الإدخال (كان أزرق) */
.form-input{
  border-color: #ffffff !important;
}

/* روابط تسجيل الدخول (كان أزرق فاتح) */
.s-login-modal-link{
  color: #171819 !important;
}

/* شريط أعلى قائمة الموبايل (كان سيان) */
.mm-spn.mm-spn--navbar:after{
  background-color: #171819 !important;
}

/* عناصر القوائم (كان aqua) */
ul, li,
.whitespace-nowrap{
  color: #ffffff !important;
}

/* bg-gray-50 (كان أزرق غامق) */
.bg-gray-50{
  background-color: rgb(33 33 33) !important;
}
.mm-spn.mm-spn--navbar:after{
  background-color: #ffffff !important;
}

/* خلفية منيو الحساب */
.s-user-menu-dropdown{
  background-color: #000000 !important;
}

/* لو تبي نفس الخلفية للهيدر داخل المنيو */
.s-user-menu-dropdown-header{
  background-color: #000000 !important;
}

.s-notifications-item{
  background-color: rgb(37 37 37);
}

.s-user-settings-section .s-list-tile-item {
    align-items: flex-start;
    background-color: #353535;
    padding: 1.75rem;
}

.s-user-settings-section-title {
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: #353535;
}

.s-user-settings-section-subtitle {
    font-size: .75rem;
    line-height: 1.9rem;
    --tw-text-opacity: 1;
    color: rgb(213 213 213);
}

.s-orders-table-tbody-tr {
  background-color: rgb(39 39 39);
  border-top-width: 8px;
  border-bottom-width: 8px;
  border-radius: 1.75rem;
  border-color: rgb(39 39 39);
}

.product-entry {
  background-color: rgb(39 39 39);
}