/* Add custom CSS styles below */ 
/* 1. تفعيل الثيم الداكن وتغيير ألوان النصوص لتصبح مقروءة */
body, .page-wrapper, .store-wrapper, .s-block, .s-main-content {
    background-color: #141414 !important;
    color: #ffffff !important;
}

h1, h2, h3, h4, h5, h6, p, span, a, .s-product-card-title {
    color: #ffffff !important;
}

/* 2. حدود المربعات (بطاقات المنتجات) باللون الأزرق مع ضبط لون خلفيتها */
.s-product-card, .product-card, .product-item {
    background-color: #1a1a1a !important; /* لون أفتح بدرجة بسيطة لتمييز البطاقة */
    border: 1px solid #007aff !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* 3. تكبير النص على صورة البانر وجعله يمين الصورة */
/* قد يختلف الكلاس حسب نوع البانر المستخدم، هذه الكلاسات الشائعة في سلة */
.s-slider-title, .hero-title, .banner-title, .s-banner-title {
    font-size: 38px !important; /* تكبير حجم الخط */
    text-align: right !important;
    width: 100% !important;
}

.s-slider-caption, .hero-caption, .s-banner-wrapper {
    display: flex !important;
    justify-content: flex-start !important; /* محاذاة لليمين */
    padding-right: 5% !important; /* مسافة من الطرف الأيمن */
}

/* 4. تكبير شعار المتجر في أعلى الصفحة */
.header-logo img, .navbar-brand img, .brand-logo img, .s-store-logo img {
    max-height: 90px !important; /* قم بتعديل الرقم حسب الحجم المناسب لك */
    width: auto !important;
}

/* تعديل لون خلفية الهيدر ليتناسب مع الثيم */
header, .s-header, .site-header {
    background-color: #141414 !important;
    border-bottom: 1px solid #333 !important;
}
/* 1. فرض الخلفية الداكنة على الهيدر (القائمة العلوية) وإلغاء كلاس bg-white */
#mainnav, .main-nav-container, .main-nav-container.bg-white {
    background-color: #141414 !important;
    border-bottom: 1px solid #333 !important;
}

/* 2. تحويل أيقونات الهيدر (السلة، المستخدم، القائمة الجانبية) للون الأبيض */
.s-cart-summary-icon svg, .s-user-menu-login-btn svg {
    fill: #ffffff !important;
}
.sicon-menu, .s-cart-summary-total, .s-cart-summary-count, .text-gray-500 {
    color: #ffffff !important;
}

/* 3. استهداف مكونات بطاقات المنتجات بدقة مع الحدود الزرقاء */
salla-product-card, .product-entry, .product-card, .s-product-card-entry {
    background-color: #141414 !important;
    border: 1px solid #007aff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* التأكد من عدم وجود خلفية بيضاء داخلية في نصوص البطاقة */
salla-product-card .s-product-card-content, 
salla-product-card .product-content,
.s-product-card-content {
    background-color: transparent !important;
}

/* تعديل خلفية الصور داخل البطاقات لتتناسب مع الدارك مود */
.s-product-card-image, .product-card-image {
    background-color: #1a1a1a !important;
}
/* قسم مميزات المتجر (تسوق آمن، شحن، خدمة عملاء) */
.s-block--features__item {
    background-color: #141414 !important;
    border: 1px solid #007aff !important;
    border-radius: 8px !important;
}

/* تلوين النصوص بالأبيض */
.s-block--features__item h2,
.s-block--features__item p {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* تلوين الأيقونات بالأزرق لربط التصميم */
.s-block--features__item .feature-icon i {
    color: #007aff !important;
}

/* في حال كانت الأيقونة داخل دائرة لها خلفية، نفرغها أو نلونها بالداكن */
.s-block--features__item .feature-icon {
    background-color: #1a1a1a !important; 
}
/* 1. فرض اللون الأزرق الكامل لزر إضافة للسلة */
.s-product-card-content-footer salla-add-product-button .s-button-element:not(.s-button-disabled) {
    background: #007aff !important;
    border-color: #007aff !important;
}
.s-product-card-content-footer salla-add-product-button .s-button-element:not(.s-button-disabled) span,
.s-product-card-content-footer salla-add-product-button .s-button-element:not(.s-button-disabled) i {
    color: #ffffff !important;
}

/* 2. تفريغ الدائرة البيضاء لزر المفضلة وجعل الإطار والأيقونة باللون الأزرق */
.s-product-card-content-footer salla-button .s-button-icon {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #007aff !important;
}
.s-product-card-content-footer salla-button .s-button-icon i {
    color: #007aff !important;
}

/* 3. إصلاح زر "نفدت الكمية" ليصبح متناسقاً مع الدارك مود */
.s-product-card-content-footer .s-button-disabled {
    background: #2a2a2a !important;
    border-color: #333 !important;
}
.s-product-card-content-footer .s-button-disabled span {
    color: #888 !important;
}
/* 1. تكبير شعار المتجر بشكل واضح */
.store-header .navbar-brand img {
    max-height: 80px !important; /* استغلال مساحة الهيدر (90px) بالكامل تقريباً */
    width: auto !important;
    transform: scale(1.2) !important; /* تكبير إضافي بنسبة 20% لتوضيح التفاصيل */
    transform-origin: right center; /* الحفاظ على المحاذاة مع القائمة اليمنى */
}

/* 2. تخصيص خانة البحث (ستروك أزرق وخلفية شفافة) */
.store-header salla-search .s-search-input {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #007aff !important;
    color: #ffffff !important;
    box-shadow: none !important; /* إزالة أي ظل افتراضي */
}

/* إزالة الخلفية الرمادية من الحاوية المحيطة بحقل البحث */
.store-header salla-search .s-search-input-wrapper,
.store-header salla-search .s-search-placeholder-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* 3. تلوين أيقونة البحث بالأزرق والنص الإرشادي (Placeholder) بالرمادي الفاتح */
.store-header salla-search .s-search-icon svg,
.store-header salla-search .s-search-icon-wrap {
    fill: #007aff !important;
    color: #007aff !important;
}

.store-header salla-search .s-search-input::placeholder {
    color: #999999 !important;
}
/* 1. فرض اللون الداكن على حاوية القائمة الجانبية بالكامل */
.mm-ocd__content,
#mobile-menu,
.mm-spn.mm-spn--light,
.mm-spn--light ul {
    background-color: #141414 !important;
    color: #ffffff !important;
}

/* 2. تعديل شريط العنوان العلوي (القائمة الرئيسية) */
.mm-spn::before {
    background-color: #1a1a1a !important; /* أفتح بدرجة بسيطة لتمييز الهيدر */
    color: #ffffff !important;
    border-bottom: 1px solid #333 !important;
}

/* 3. استبدال اللون الأحمر لزر الإغلاق باللون الأزرق */
.mm-spn::after,
.btn--close.close-mobile-menu {
    background-color: #007aff !important;
    color: #ffffff !important;
}

/* 4. تلوين نصوص القائمة بالأبيض وإضافة خطوط فاصلة أنيقة */
#mobile-menu ul li a,
#mobile-menu ul li span {
    color: #ffffff !important;
    background-color: transparent !important;
}

#mobile-menu ul li {
    border-bottom: 1px solid #333 !important;
}

/* إصلاح مشكلة تداخل الألوان عند الضغط على الرابط */
#mobile-menu ul li a:active,
#mobile-menu ul li a:focus {
    background-color: #1a1a1a !important;
}
/* ضبط المحاذاة لتكون في المنتصف من الأعلى تماماً */
.home-slider__content, .s-block--hero-slider .home-slider__content {
    display: flex !important;
    align-items: flex-start !important; /* تثبيت في الأعلى */
    justify-content: center !important; /* توسيط أفقي */
    padding-top: 30px !important;
}

/* توسيط النص وحجمه */
.home-slider__content h2, 
.s-block--hero-slider h2 {
    font-size: 42px !important;
    text-align: center !important;
    width: 100% !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.home-slider__content > div {
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}
/* إزالة الخلفية البيضاء لأزرار السلايدر وجعلها شفافة */
.s-block--hero-slider .s-slider-nav-arrow {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* تلوين السهم نفسه باللون الأزرق وتكبيره قليلاً ليكون واضحاً */
.s-block--hero-slider .s-slider-nav-arrow svg,
.s-block--hero-slider .s-slider-nav-arrow i {
    fill: #007aff !important;
    color: #007aff !important;
    font-size: 24px !important;
}
/* 1. تحويل حاوية المنتجات إلى شبكة (منتجين في الجوال كافتراضي) */
.s-products-list-horizontal-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

/* شاشات الايباد والكمبيوتر (3 أو 4 منتجات) */
@media (min-width: 768px) {
    .s-products-list-horizontal-cards {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}
@media (min-width: 1024px) {
    .s-products-list-horizontal-cards {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 2. تحويل البطاقة نفسها من أفقي إلى عمودي */
custom-salla-product-card.s-product-card-horizontal,
.s-product-card-horizontal {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 3. ضبط الصورة لتأخذ العرض بالكامل من الأعلى */
custom-salla-product-card.s-product-card-horizontal .s-product-card-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* جعل الصورة مربعة ومتناسقة */
    border-bottom: 1px solid #333 !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* 4. ترتيب تفاصيل المنتج (الاسم، السعر، الأزرار) بالأسفل لتملأ الفراغ */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content {
    width: 100% !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
}

/* توسيط النصوص داخل البطاقة */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-main,
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-sub {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
/* تلوين عناوين الفوتر (اسم المتجر، روابط مهمة، تواصل معنا) باللون الأزرق */
.store-footer h3,
.store-footer .s-contacts-title {
    color: #007aff !important;
}
/* 1. هيكلة شبكة الأقسام وتحديد الفراغات */
.s-block--banners .grid {
    display: grid !important;
    gap: 16px !important;
}

/* 2. شاشات الكمبيوتر والتابلت: 3 أعمدة (الصورة الأولى تأخذ صفين) */
@media (min-width: 768px) {
    .s-block--banners .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(2, 250px) !important; /* ارتفاع ثابت لضمان التناسق */
    }
    
    /* إجبار القسم الأول (في اليمين) على أخذ مساحة صفين بالكامل */
    .s-block--banners .grid .banner-entry:first-child {
        grid-row: span 2 !important;
    }
}

/* 3. شاشات الجوال: عمودين (الصورة الأولى تأخذ العرض والارتفاع المزدوج لتبقى بارزة) */
@media (max-width: 767px) {
    .s-block--banners .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 150px !important; /* ارتفاع الصور الصغيرة في الجوال */
    }
    .s-block--banners .grid .banner-entry:first-child {
        grid-column: span 2 !important;
        grid-row: span 2 !important; 
    }
}

/* 4. ضبط مقاسات الصور وتطبيق الهوية (الحدود الزرقاء) */
.s-block--banners .banner-entry {
    height: 100% !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 8px !important;
    border: 1px solid #007aff !important; /* إطار أزرق متناسق */
    overflow: hidden !important;
}

/* 5. إخفاء نصوص وخلفيات سلة الافتراضية بما أن تصاميمك تحتوي على النصوص */
.s-block--banners .banner-entry__text,
.s-block--banners .banner-entry::before {
    display: none !important; 
}
/* ترتيب الجوال لـ 4 أقسام متساوية بدون فراغات */
@media (max-width: 767px) {
    .s-block--banners .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: minmax(160px, auto) !important;
    }
    .s-block--banners .grid .banner-entry:first-child {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}
/* إزالة الخلفية البيضاء، الحدود، والظلال من حاوية الشعارات */
.s-block--logos-slider .brand-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* التأكد من شفافية مساحة الصورة نفسها */
.s-block--logos-slider .brand-item img {
    background: transparent !important;
}
/* 1. تصغير ارتفاع الخريطة وإضافة الإطار الأزرق */
salla-store-location-2xby2v,
.s-block--bundle-store-location .location-container {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    border-radius: 8px !important;
    border: 1px solid #007aff !important;
    overflow: hidden !important;
}

/* 2. تحويل مربع المعلومات (Info Card) إلى دارك مود */
.s-block--bundle-store-location .info-card {
    background-color: #141414 !important;
    border: 1px solid #007aff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
}

/* 3. توحيد لون النصوص داخل المربع لتكون واضحة بالدارك مود */
.s-block--bundle-store-location .info-card .title,
.s-block--bundle-store-location .info-card h2,
.s-block--bundle-store-location .info-card .detail-value {
    color: #ffffff !important;
}

.s-block--bundle-store-location .info-card .subtitle,
.s-block--bundle-store-location .info-card .detail-label {
    color: #aaaaaa !important;
}

/* 4. تنسيق أيقونة ورقم التواصل */
.s-block--bundle-store-location .info-card .icon-wrapper {
    background-color: rgba(0, 122, 255, 0.15) !important;
    color: #007aff !important;
}

/* 5. تنسيق زر "الحصول على الاتجاهات" باللون الأزرق المعتمد */
.s-block--bundle-store-location .info-card .cta-button {
    background-color: #007aff !important;
    color: #ffffff !important;
    border: none !important;
    transition: background-color 0.2s ease;
}

.s-block--bundle-store-location .info-card .cta-button:hover {
    background-color: #005bb5 !important;
}
/* 1. تحويل خلفية وثيم قائمة الترتيب إلى الدارك مود وإطار أزرق */
#product-filter {
    background-color: #141414 !important;
    color: #ffffff !important;
    border: 1px solid #007aff !important;
    border-radius: 6px !important;
}

/* 2. تلوين نص "ترتيب حسب" والأيقونات المرافقة باللون الأبيض */
label[for="product-filter"], 
.flex.items-center.space-x-2 {
    color: #ffffff !important;
}

/* 3. تنسيق الخيارات الداخلية القابلة للانسداد عند فتح القائمة */
#product-filter option {
    background-color: #141414 !important;
    color: #ffffff !important;
}
/* إخفاء الإيميل ورابط "حساباتنا" من الهيدر العلوي */
.store-header .top-navbar salla-contacts,
.store-header .top-navbar salla-menu {
    display: none !important;
}