/* Add custom CSS styles below */

/* 1. تلوين الخلفية الأساسية للمتجر باللون الداكن الملكي */
html, body, #app, .main-content, main, section {
    background-color: #020412 !important;
}

/* 2. الاختراق الشامل والدقيق لرأس وتذييل الصفحة باللون الكحلي الملكي */
header, 
.store-header, 
salla-header,
.site-header,
.header-wrapper,
.main-nav-container,
[class*="header"] {
    background-color: #020412 !important;
    background: #020412 !important;
}

header *, salla-header *, .inner-header, [class*="header"] div, [class*="header"] nav {
    background-color: transparent !important;
}

footer, 
.store-footer, 
[class*="footer"], 
.relative.z-10.footer_is_dark {
    background-color: #020412 !important;
    background: #020412 !important;
}

/* 3. تحويل كافة العناوين والفقرات والأسعار العامة في الصفحة إلى أبيض ناصع */
h1, h2, h3, h4, h5, h6, p, span, strong, small, time, .s-block_title *, .text-zinc-800, .text-zinc-600 {
    color: #ffffff !important;
}

/* 4. الاختراق المطلق لجدار (Shadow Root) لسكشن الأسئلة الشائعة وإظهار النصوص بالأبيض */
.s-block-trust-faq,
[class*="s-block-trust-faq"],
.s-block-trust-faq h3,
.s-block-trust-faq-title,
.s-block-trust-faq-answer-content,
.s-block-trust-faq-answer-content p,
[class*="faq"] *, 
[class*="faq"] h3, 
[class*="faq"] p, 
[class*="faq"] span {
    color: #ffffff !important;
    --text-opacity: 1 !important;
    opacity: 1 !important;
}

/* 5. توحيد مظهر زر "إضافة للسلة" مع "اشتري الآن" */
salla-add-product-button button,
.s-add-product-button-main button {
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #020412 !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
}

salla-add-product-button button span,
.s-add-product-button-main button span {
    color: #020412 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 6. الحل الجذري: جعل الرابط يغطي الكرت بالكامل */
.product-card {
    position: relative !important;
}

.product-card > a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    opacity: 0 !important;
}

/* جعل الأزرار قابلة للضغط فوق الرابط */
.product-card salla-add-product-button, 
.product-card .s-product-card-wishlist-btn {
    position: relative !important;
    z-index: 20 !important;
}

/* 7. الإصلاح الشامل: تحويل زر المفضلة وزر المشاركة إلى دوائر متطابقة وفخمة */
salla-button.btn--wishlist,
.btn--wishlist,
[class*="btn--wishlist"],
salla-button.btn--wishlist button,
.btn--wishlist button,
salla-social-share button,
.salla-social-share button,
[class*="social-share"] button,
[class*="share-and-btn-wishlist"] button,
[class*="share-and-btn-wishlist"] salla-button {
    background-color: #0c1026 !important;
    background: #0c1026 !important;
    border: 1px solid #1e293b !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: none !important;
    outline: none !important;
}

salla-button.btn--wishlist button, .btn--wishlist button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

salla-social-share i,
[class*="social-share"] i,
[class*="share-and-btn-wishlist"] i,
[class*="social-share"] *,
salla-social-share svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

[class*="share-and-btn-wishlist"] .sicon-heart,
.sicon-heart,
[class*="btn--wishlist"] i,
[class*="share-and-btn-wishlist"] * {
    color: #ffffff !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

/* 8. الحفاظ على كروت التقييمات داكنة وفخمة ومتناسقة */
div[class*="bg-gray-50"], 
.s-block-testimonials .bg-gray-50, 
.s-block-testimonials div[class*="relative"][class*="bg-gray"],
.s-block-testimonials [class*="swiper-slide"] > div {
    background-color: #0c1026 !important;
    background: #0c1026 !important;
    border: 1px solid #1e293b !important;
}

.s-block-testimonials span[class*="bg-primary"],
.s-block-testimonials .bg-primary {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

.s-block--full-banner,
.full-banner-entry,
div[class*="full-banner-entry"] {
    background-color: transparent !important;
}

/* 9. الحفاظ على كروت المنتجات بالأسفل داكنة وفخمة والنصوص فوقها بيضاء */
.product-card *,
[class*="product-card"] {
    background-color: #020412 !important;
}

/* 10. حماية وتثبيت ألوان النجوم الذهبية للتقييمات ومنع تحولها للأبيض */
.fa-star, [class*="star"], salla-rating-stars, salla-rating-stars * {
    color: #ffb300 !important;
    background-color: transparent !important;
}

.tab-trigger, 
.product-tabs .tab-trigger, 
[class*="tab-trigger"] {
    color: #020412 !important;
    font-weight: bold !important;
}

.tabs.bg-gray-100 {
    background-color: #f3f4f6 !important; 
}

.tab-trigger .s-button-text,
.s-button-wrap .s-button-text {
    color: #020412 !important;
}

.tab-trigger {
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.product-card salla-button[class*="wishlist"] button,
.product-card .s-product-card-wishlist-btn,
.s-product-card-wishlist-btn {
    background-color: #0c1026 !important;
    background: #0c1026 !important;
    border: 1px solid #1e293b !important;
    border-radius: 50% !important;
}

.product-card .s-product-card-wishlist-btn::after,
.product-card .s-product-card-wishlist-btn::before,
.s-product-card-wishlist-btn .s-button-element {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.product-card .s-product-card-wishlist-btn i,
.product-card .s-product-card-wishlist-btn svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.s-user-menu-dropdown-list {
    background-color: #020412 !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
}

.s-user-menu-dropdown-list,
.s-user-menu-dropdown-list * {
    color: #ffffff !important;
}
/* --- تنسيق احترافي لكرت تعليقات المنتج --- */
.s-comments-item {
    background-color: #0c1026 !important; 
    border: 1px solid #1e293b !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* ضبط محاذاة الصورة والاسم */
.s-comments-item-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

/* إظهار صورة العميل بوضوح */
.s-comments-item-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid #ffffff !important;
    flex-shrink: 0 !important;
}

/* تباعد مريح للنصوص */
.s-comments-item-content {
    margin-top: 5px !important;
    line-height: 1.6 !important;
}

/* تنسيق صورة المنتج المرفقة بالتعليق */
.s-comments-item img[class*="attachment"] {
    border-radius: 10px !important;
    margin-top: 15px !important;
    max-width: 150px !important;
}
/* --- إضافة لتصحيح ظهور صورة العميل دون المساس بما سبق --- */
.s-comments-item-avatar img {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border: 2px solid #ffffff !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}

/* ضمان أن الحاوية المحيطة بالصورة تظهر ولا تخفيها */
.s-comments-item-avatar {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent !important;
}
/* --- إضافة خلفية ثابتة لنافذة تسجيل الدخول --- */

/* استهداف الحاوية الرئيسية لنافذة تسجيل الدخول */
.s-login-modal, 
div[class*="s-login-modal"], 
#s-login-modal,
.s-modal-content {
    background-color: #020412 !important; /* خلفية داكنة غير شفافة */
    border: 2px solid #1e293b !important; /* إطار ليحدد النافذة */
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8) !important;
}

/* ضمان ظهور نصوص داخل النافذة باللون الأبيض */
.s-login-modal *, 
.s-login-modal-title, 
.s-login-modal-header-content {
    color: #ffffff !important;
}
/* --- تحويل شريط تفاصيل الطلب إلى اللون الأسود --- */

/* 1. استهداف صف الجدول الذي يحتوي على المعلومات */
tr.bg-gray-50, 
table tr {
    background-color: #020412 !important; /* اللون الأسود */
    border: 1px solid #1e293b !important;
}

/* 2. تغيير لون النصوص داخل هذا الشريط لتكون بيضاء وواضحة */
tr.bg-gray-50 td, 
tr.bg-gray-50 div {
    color: #ffffff !important;
}

/* 3. ضمان أن أي خلفية رمادية أو بيضاء داخل الجدول تأخذ اللون الداكن */
table[class*="min-w-full"] {
    background-color: #020412 !important;
}
/* --- تعديل إجباري لزر تحميل المزيد --- */

/* استهداف الزر نفسه (Button) وليس النص (Span) */
.s-infinite-scroll-wrapper button.s-infinite-scroll-btn {
    background-color: #1e293b !important; /* لون داكن للزر */
    border: 1px solid #334155 !important;
    color: #ffffff !important; /* لون النص أبيض */
    padding: 10px 25px !important;
    border-radius: 8px !important;
}

/* التأكد من أن النص داخل الزر أبيض أيضاً */
.s-infinite-scroll-wrapper button.s-infinite-scroll-btn span {
    color: #ffffff !important;
}
/* --- إصلاح خطوط التقييم (بناءً على هيكلية المتجر الجديدة) --- */

/* 1. استهداف الحاوية الخارجية للخط (التي تظهر فارغة حالياً) */
div[class*="s-progress-bar-wrapper"] {
    background-color: #1e293b !important; /* لون الخلفية الغامق */
    height: 12px !important;
    border-radius: 6px !important;
    display: block !important;
}

/* 2. استهداف الجزء الممتلئ من الخط (الذي يمثل النسبة) */
div[class*="s-progress-bar-progress"] {
    background-color: #f59e0b !important; /* لون ذهبي للنسبة */
    height: 12px !important;
    border-radius: 6px !important;
    display: block !important;
    width: 100%; /* سيتم التحكم فيه برمجياً من سلة */
}