/* 1. إخفاء المربعات الجانبية المزعجة نهائياً */
.s-slider-block__title-right, 
.s-slider-block__title-left,
[class*="s-slider-block__title-"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. إجبار النص (h2) على الظهور بلون أبيض وفي منتصف الصفحة تماماً */
.s-slider-block__title h2,
[class*="s-slider-block"] h2,
h2.sections-title {
    color: #ffffff !important;
    text-align: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 20px auto !important;
    float: none !important;
}

/* ==========================================
   3. كود الشريط العلوي الشفاف والشعار في المنتصف
   ========================================== */
salla-header, 
header, 
.site-header, 
[data-theme="fakra"] header {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

salla-header *, 
header * {
    --header-bg: transparent !important;
    --main-header-bg: transparent !important;
    --nav-bg: transparent !important;
}

.container-narrow, 
.header__inner, 
.site-header .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
}

.header-logo, 
.site-logo, 
.brand-logo,
salla-header .logo,
header .logo,
.header__logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10000 !important;
}

.header-section--left, 
.header__left {
    margin-right: auto !important;
}

.side-header-menu, 
.header-section--right, 
.header__right {
    margin-left: auto !important;
}

#app, 
.main-wrapper, 
body {
    position: relative !important;
}
/* تحويل لون السعر والعملة (الريال) إلى اللون الأبيض */
.s-product-card-price,
.s-product-card-price *,
h4.s-product-card-price {
    color: #ffffff !important;
}
/* 1. تحديد موقع حاوية الشعار في المنتصف تماماً */
.header-section--center,
div.header-section--center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
}

/* 2. تكبير حجم الشعار (الصورة) */
.navbar-brand img,
.header-section--center img,
div.header-section--center a img {
    width: 140px !important;  /* يمكنك زيادة الرقم إذا أردت الشعار أكبر مثل 160px */
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
}

/* 3. منع تداخل القوائم الجانبية مع الشعار بعد تكبيره */
.header-section--left {
    margin-right: auto !important;
    z-index: 999 !important;
}

.side-header-menu,
.header-section--right {
    margin-left: auto !important;
    z-index: 999 !important;
}
/* 1. تفريغ لون الخلفية للشريط وإجباره على الطفو فوق البنر */
#mainnav,
header,
.site-header,
[data-theme="fakra"] header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99999 !important; /* رفع الترتيب لأقصى درجة ليظهر فوق البنر */
}

/* 2. تصفير أي متغيرات لونية برمجية داخل القالب تمنع الشفافية */
#mainnav *,
header * {
    --header-bg: transparent !important;
    --main-header-bg: transparent !important;
    background-color: transparent !important;
}

/* 3. إعادة ضبط توزيع الحاوية الداخلية للشريط */
.container-narrow,
.div.container-narrow {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    background: transparent !important;
    padding: 10px 20px !important;
}

/* 4. تثبيت الشعار وتكبيره في المنتصف تماماً بشكل مطلق */
.header-section--center,
.navbar-brand,
.header__logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 100000 !important;
}

.header-section--center img,
.navbar-brand img {
    width: 150px !important; /* حجم الشعار مكبر ومتناسق */
    height: auto !important;
}

/* 5. دفع محتويات اليمين واليسار لأطراف الشاشة لترك مساحة للشعار */
.header-section--left {
    margin-right: auto !important;
}

.side-header-menu,
.header-section--right {
    margin-left: auto !important;
}

/* 6. إجبار حاوية الموقع الكبرى على إظهار التموضع المطلق للشريط */
#main-content,
#app,
main,
body {
    position: relative !important;
    padding-top: 0 !important; /* منع ترك مساحة بيضاء فوق البنر */
}
/* تحويل الأزرار، الأيقونات، والنصوص داخل الهيدر إلى اللون الأبيض */
#mainnav *, 
header *, 
.mobile-menu-icon,
.side-header-menu *,
.header-section--left *,
.header-section--right *,
.s-icon-menu,
[class*="sicon-"] {
    color: #ffffff !important;
    --text-primary: #ffffff !important;
}
/* تحويل العنوان الرئيسي إلى اللون الأبيض */
.s-block-simple-section__title,
.s-block-simple-section__title * {
    color: #ffffff !important;
}

/* تحويل النص الفرعي أو الوصف إلى اللون الأبيض */
.s-block-simple-section__subtitle,
.s-block-simple-section__subtitle * {
    color: #ffffff !important;
}
/* استهداف الحاوية الرئيسية ومحتوياتها لتغيير النص للأبيض */
.s-block-simple-section__content,
.s-block-simple-section__content * {
    color: #ffffff !important;
}
/* كود نهائي لإجبار جميع النصوص داخل القسم البسيط على اللون الأبيض */
[class*="s-block-simple-section"] *,
[class*="s-block-simple-section"] {
    color: #ffffff !important;
    --text-primary: #ffffff !important;
    --text-secondary: #ffffff !important;
}
/* تقليل المسافات العمودية داخل محتوى السلايدر والقسم البسيط */
.universal-slider__content,
.s-block-simple-section__content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* إلغاء المسافات الإضافية المدمجة المحيطة بالنصوص */
.s-block-simple-section__title,
.s-block-simple-section__subtitle {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
/* تقليل المسافة بين العنوان والوصف */
.s-block-simple-section__title h2,
.s-block-simple-section__title {
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
}

.s-block-simple-section__subtitle p,
.s-block-simple-section__subtitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* تقريب الوصف من العنوان */
.s-block-simple-section__subtitle,
.s-block-simple-section__subtitle * {
    margin-top: -55px !important;
    padding-top: 0 !important;
}

.s-block-simple-section__title,
.s-block-simple-section__title * {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* جعل عنوان الآراء والتقييمات باللون الأبيض وفي المنتصف */
.s-reviews-header,
.s-reviews-header *,
#custom-testimonials-6-slider .block-title {
    color: #ffffff !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}
/* تنسيق بطاقات آراء العملاء في منصة سلة */
.s-reviews-swiper-slide {
    background-color: #0b132b !important; /* لون كحلي غامق فخم */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* إطار خفيف جداً وأنيق */
    border-radius: 12px !important; /* زوايا منحنية متناسقة للبطاقة */
    padding: 20px !important; /* مسافة داخلية مريحة للنصوص */
}

/* تحويل جميع النصوص والأسماء داخل البطاقات إلى اللون الأبيض */
.s-reviews-swiper-slide,
.s-reviews-swiper-slide *,
.s-slider-block__title,
.s-slider-block__title * {
    color: #ffffff !important;
}
/* تلوين بطاقة الآراء باللون الكحلي الغامق الفخم وإضافة إطار خفيف */
.s-reviews-swiper-slide,
.s-reviews-testimonial {
    background-color: #0b132b !important; /* لون كحلي غامق */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* إطار خفيف */
    border-radius: 12px !important;
    padding: 20px !important;
}

/* تحويل جميع النصوص داخل هذه البطاقات إلى اللون الأبيض */
.s-reviews-swiper-slide *,
.s-reviews-testimonial *,
.s-slider-block__title,
.s-slider-block__title * {
    color: #ffffff !important;
}

/* استهداف النجوم وتلوينها بالذهبي البراق */
.s-reviews-testimonial .s-rating-stars,
.s-reviews-testimonial [class*="rating"],
.s-reviews-testimonial [class*="star"],
.s-reviews-swiper-slide text,
.s-reviews-swiper-slide svg {
    color: #ffd700 !important; /* لون ذهبي نقي */
    fill: #ffd700 !important;  /* للتأكد من تلوين الأيقونات النواقل svg */
}
/* الحفاظ على دقة وحجم الصورة كاملة ودمجها مع البطاقة بدون فراغات بيضاء */
.s-product-card-image {
    width: 100% !important;
    background-color: transparent !important; /* إزالة الخلفية البيضاء للحاوية */
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* إجبار الصورة على الظهور كاملة بنسبة أبعادها الأصلية ودقتها العالية */
.s-product-card-image-contain,
.s-product-card-image img,
[class*="s-product-card-image"] img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* تضمن ظهور المشط كاملاً بنسبة 100% وبأعلى دقة دون أي قص */
    background-color: transparent !important; /* تمنع أي فراغ أبيض حول جوانب الصورة */
}
.store-footer__inner img {
    max-height: 60px !important;
    width: auto !important;
}
/* المحافظة على أبعاد الصور بدقتها العالية */
.s-product-card-image-contain,
.s-product-card-image img,
[class*="s-product-card-image"] img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    background-color: transparent !important;
}
/* تنسيق قسم روابط مهمة لترتيب العناصر عمودياً في المنتصف */
.store-footer__inner .text-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* إضافة السياسات فوق بعضها مباشرة أسفل العنوان */
.store-footer__inner .text-center h3::after {
    content: "سياسة الاستخدام والخصوصية \A سياسة الاستبدال والاسترجاع";
    white-space: pre-line;
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 300;
    color: var(--footer-text-color, #ffffff);
    line-height: 2;
    cursor: pointer;
}
/* إعادة ترتيب عناصر التذييل السفلي عمودياً */
.store-footer__inner > div:has(.copyright-text) {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    order: 99 !important;
    margin-top: 30px !important;
    width: 100% !important;
    gap: 15px !important;
}

/* ترتيب وسائل الدفع لتكون بجانب بعضها وفي المنتصف */
.s-payments-list-wrap, 
salla-payments {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* تنسيق نص الحقوق ليكون في الأسفل تماماً بالمنتصف */
.copyright-text,
p[class*="copyright-text"] {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    order: 2 !important;
}
/* تصغير حجم البطاقات لتتسع الشاشة لبطاقتين كاملتين متجاورتين */
#slider-with-bg-2 .swiper-slide {
    width: 59% !important; /* تقليص العرض الإجمالي للبطاقة لضمان مساحة للطرفين */
    max-width: 165px !important; /* حد أقصى لعرض البطاقة يتناسب مع شاشات الجوال الصغير */
    flex-shrink: 0 !important;
}

/* توزيع مساحة السلايدر الداخلية لتوسيط البطاقتين الصغيرتين بالتساوي */
#slider-with-bg-2 .swiper-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important; /* فراغ ناعم ومناسب بين البطاقتين لتفادي التداخل */
    width: 100% !important;
    padding: 0 15px !important;
}
/* ضبط حاوية السلايدر لعرض بطاقتين في نفس الوقت */
.s-slider-block__slider .swiper-wrapper,
[id^="swiper-wrapper"] {
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* تصغير حجم البطاقات إجبارياً لتتسع الشاشة لبطاقتين بدقة عالية */
.s-products-slider-card,
.s-reviews-swiper-slide,
.swiper-slide[class*="product"] {
    width: calc(55% - 10px) !important; /* يأخذ نصف عرض الشاشة بدقة مع ترك مسافة بينهما */
    flex-shrink: 0 !important;
    max-width: 55% !important;
}

/* تنسيق المسافات الجانبية بين البطاقتين لضمان عدم الالتصاق */
.s-products-slider-card {
    margin-left: 5px !important;
    margin-right: 5px !important;
}
/* تغيير لون نصوص صفحة المنتج بالكامل إلى الأبيض */
.product_single, 
.product_single * {
    color: #ffffff !important;
}
/* تغيير لون نص زر أضف للسلة إلى الأسود */
.s-add-product-button-main .s-button-text,
.s-add-product-button-main button,
.s-add-product-button-main salla-button {
    color: #000000 !important;
}
/* تغيير لون نصوص التبويبات بالكامل إلى الأبيض */
.s-tabs, 
.s-tabs-header, 
.s-tabs-header *, 
.s-tabs-content-wrapper * {
    color: #ffffff !important;
}
/* تغيير لون أيقونة المشاركة إلى الأسود */
.s-social-share-btn, 
.s-social-share-btn svg, 
.s-social-share-btn i {
    color: #000000 !important;
    fill: #000000 !important;
}
/* جعل خلفية الصفوف سوداء بالكامل ولون الخط أبيض */
.s-tabs-content-wrapper .grid {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* إجبار أي نصوص داخلية أو روابط داخل الصفوف على أخذ اللون الأبيض */
.s-tabs-content-wrapper .grid * {
    color: #ffffff !important;
}
/* كود بديل ومحدد لإخفاء العنصر المختار */
.store-footer__inner div.flex-col.items-center[store-data] {
    display: none !important;
}
/* إخفاء رسمة الـ SVG الافتراضية */
.store-footer > svg {
    display: none !important;
}

/* تهيئة حاوية الفوتر للمؤثرات العلوية */
.store-footer {
    position: relative;
    padding-top: 80px; 
}

/* تكرار صورتك كإطار ممتد خلف بعضه بشكل متناسق */
.store-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* يمكنك زيادة أو تقليل الارتفاع حسب رغبتك */
    background-image: url('https://top4top.io') !important;
    background-size: auto 100%; /* الحفاظ على أبعاد الصورة الأصلية وتكرارها */
    background-repeat: repeat-x !important; /* تكرار الصورة أفقياً خلف بعضها */
    background-position: top center;
    z-index: 1;
}
/* تحويل لون الخلفية والنصوص والأيقونات داخل العنصر إلى الأسود */
.store-footer__inner div[store-data],
.store-footer__inner div[store-data] *,
.store-footer__inner div.store-data,
.store-footer__inner div.store-data * {
    background-color: #000000 !important;
    color: #000000 !important;
    fill: #000000 !important;
    border-color: #000000 !important;
    box-shadow: none !important;
}
/* تصفير الهامش السلبي وإلغاء المسافة الفارغة تماماً */
.store-footer__inner div[class*="mt-[-90px]"],
.store-footer__inner div[store-data] {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
}
/* حذف وإخفاء عنصر الـ SVG الافتراضي أعلى الفوتر */
.store-footer > svg, 
.store-footer svg[viewBox="0 0 1440 80"] {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}
/* حذف وإلغاء العنصر المتكرر الخلفي تماماً */
.store-footer__inner h3::after {
    content: none !important;
    display: none !important;
}
/* إجبار عناصر القائمة والروابط على أخذ السطر بالكامل للنزول تحت بعضها */
.store-footer__inner salla-menu[source="Footer"] a,
.store-footer__inner .s-menu-Footer-item,
.store-footer__inner [class*="s-menu-Footer-list"] > * {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 12px !important; /* المسافة العمودية بين الرابطين */
}

/* إلغاء أي تأثير للجريد الأفقي على الحاوية الأب */
.store-footer__inner .s-menu-Footer-list,
.store-footer__inner [class*="s-menu-Footer-list"] {
    display: block !important;
    grid-template-columns: unset !important;
}
/* تصغير نص زر أضف إلى السلة داخل بطاقات المنتجات والسلايدر */
.s-products-slider salla-button,
.s-products-slider .s-add-product-button-main,
salla-products-slider [class*="s-button"],
.s-product-card-entry [class*="s-button"] {
    font-size: 11px !important; /* حجم الخط للنص الأساسي */
}

/* التأكد من تصغير النص الداخلي المشفر في حال وجوده */
.s-products-slider .s-button-text,
salla-products-slider .s-button-text {
    font-size: 11px !important;
}
/* إظهار حاوية السعر بالكامل وتنسيقها */
.s-products-slider .s-product-card-price,
salla-products-slider .s-product-card-price {
    display: flex !important;
    flex-direction: row-reverse !important; /* ترتيب السعر الجديد والقديم بجانب بعضهما */
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important; /* مسافة بسيطة بين السعرين */
}