/* ================== هوية المتجر الاحترافية الموحدة (#5a1c00) ================== */
:root {
    --primary: #5c3524;          /* لونك المختار */
    --primary-light: #5a1c00;    /* درجة الهوفر للأزرار */
    --primary-dark: #5c3524;     /* درجة التدرج الغامقة للفوتر */
    --text-on-dark: #e2d1c3;     /* لون النصوص فوق الألوان الداكنة */
    --text-muted: #e2d1c3;       /* لون نصوص الفوتر الفرعية */
    --bg-page: #fcfaf8;          /* خلفية الصفحة الكريمية */
}

body {
    font-family: 'GESSTextMedium', 'Tajawal', sans-serif !important;
    background-color: var(--bg-page);
    color: var(--primary-dark);
}

/* --- الهيدر والبار العلوي --- */
header.store-header .inner.bg-inherit,
.top-navbar {
    background: var(--primary) !important;
    border-bottom: 1px solid var(--primary-light);
}

.main-menu li>a, 
.header-btn__icon, 
.s-cart-summary-total,
.topnav-link-item {
    color: var(--text-on-dark) !important;
}

/* --- الأزرار المتناسقة --- */
/* نصوص الأزرار وخلفياتها */
.s-button, 
.btn, 
button:not(.s-product-card-wishlist-btn), 
salla-add-product-button.hydrated {
    background: var(--primary) !important;
    color: var(--text-on-dark) !important; /* ضمان وضوح الكلام */
    border: none !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* الهوفر الصحيح للأزرار */
.s-button:hover, 
.btn:hover, 
salla-add-product-button.hydrated:hover {
    transform: translateY(-1px);
}



/* --- كروت المنتجات والأسعار --- */
.s-product-card {
    border: 1px solid #eee;
    background: #e2d1c3;
}

.price, .s-product-price {
    color: var(--primary) !important;
    font-weight: 900;
}

/* --- ذيل الصفحة (تدرج مكس) --- */
footer, 
.site-footer, 
.store-footer,
.footer-is-light .store-footer .store-footer__inner {
    /* تدرج احترافي يمزج البني الغامق مع لونك المختار */
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
    color: var(--text-on-dark) !important;
    border-top: 1px solid var(--primary-light);
}

/* نصوص الفوتر */
.store-footer h3, .store-footer a, .store-footer p {
    color: var(--text-muted) !important;
}

.store-footer a:hover {
    color: var(--text-on-dark) !important;
}

/* إخفاء أي بياض في منطقة الحقوق */
.footer-bottom, .copy-right {
    background: rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    color: var(--text-muted) !important;
}

/* --- شريط التمرير (Scrollbar) --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 5px; }

/* --- الشريط الإعلاني المتحرك --- */
.s-block--banners .grid {
    background: var(--primary-dark) !important;
    color: var(--text-on-dark) !important;
    padding: 10px 0;
}



/* ================== توسيط محتوى الفوتر وإخفاء الشعار ================== */

/* 1. توسيط النصوص والعناوين في قسم "عالم الأمومة" */
.lg\:col-span-2.rtl\:lg\:pl-20 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* توسيط أفقي */
    text-align: center !important;  /* توسيط النص */
    padding-left: 0 !important;      /* إزالة الإزاحة الجانبية للتوسيط الدقيق */
}

/* توسيط العنوان والرابط */
.lg\:col-span-2 a.flex.items-center {
    justify-content: center !important;
    width: 100%;
}

/* 2. تنسيق أيقونات التواصل الاجتماعي لتكون في المنتصف */
.s-social-list {
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 15px !important;
}

/* 3. التعامل مع وثيقة العمل الحر */
/* إخفاء صورة الشعار تماماً */
.s-trust-badges-image {
    display: none !important;
}

/* توسيط محتوى الوثيقة (النص والرقم) */
.s-trust-badges-wrapper {
    justify-content: center !important;
    width: 100% !important;
    background: transparent !important; /* إزالة أي خلفية */
    border: none !important;
}

.s-trust-badges-content {
    display: flex !important;
    flex-direction: column !important; /* وضع النص فوق الرقم */
    align-items: center !important;
    text-align: center !important;
}

/* تنسيق نصوص الوثيقة لتناسب ألوان المتجر */
.s-trust-badges-label {
    font-size: 13px !important;
    color: var(--accent-creamy) !important; /* لون كريمي متناسق مع البني */
    margin-bottom: 2px !important;
}

.s-trust-badges-number {
    font-size: 14px !important;
    color: #e2d1c3 !important;
    font-weight: bold !important;
}

/* 4. معالجة المسافات */
.max-w-sm.leading-6.mb-6 {
    margin-left: auto !important;
    margin-right: auto !important;
}























/* ================== تنسيق قائمة روابط المتجر (عبق) ================== */

/* 1. توسيط القائمة بالكامل */
.s-menu-footer-list {
    display: flex !important;
    flex-direction: column !important; /* ترتيب عمودي للروابط */
    align-items: center !important;    /* توسيط الروابط في المنتصف */
    gap: 12px !important;              /* مسافة بين كل رابط وآخر */
    text-align: center !important;
}

/* 2. تنسيق الروابط الفردية */
.s-menu-footer-item {
    color: var(--text-muted) !important; /* لون سكري باهت مريح للعين */
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    position: relative;
    padding: 2px 0;
}

/* 3. تأثير الهوفر (عند مرور الماوس) */
.s-menu-footer-item:hover {
    color: #ffffff !important;        /* يتحول النص للأبيض الصريح */
    transform: scale(1.05);           /* تكبير بسيط جداً */
}

/* 4. إضافة خط سفلي ناعم يظهر عند الهوفر (لمسة عبق) */
.s-menu-footer-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1.5px;
    background-color: var(--accent-creamy); /* لون كريمي للخط */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.s-menu-footer-item:hover::after {
    width: 60%; /* طول الخط عند الهوفر */
}

/* 5. ضبط المسافات للحاوية الكبيرة */
salla-menu[source="footer"] {
    display: block !important;
    margin: 20px 0 !important;
}



/* ================== توسيط "تواصل معنا" و "روابط مهمة" ================== */

/* 1. توسيط العناوين الرئيسية في الفوتر */
.s-contacts-title, 
footer h3, 
.store-footer h3 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px !important;
    color: var(--accent-creamy) !important; /* لون كريمي متناسق */
}



.s-contacts-icon svg {
    fill: #e2d1c3 !important;
    width: 20px !important;
    height: 20px !important;
}

/* 5. توسيط أيقونات السوشيال ميديا في الجوال */
.contact-social .s-social-list {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

/* 6. إخفاء أي خلفيات بيضاء قد تعيق التوسيط */
.s-contacts, .contact-social {
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}











/* ================== توسيط أيقونات الدفع (شفافة) ================== */

/* 1. التوسيط الكامل للحاوية */
.s-payments-list-wrap {
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    width: 100% !important;
    margin: 20px 0 !important;
    background: transparent !important;
}

/* 2. تنسيق القائمة */
.s-payments-list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important; /* مسافة متناسقة بين الشعارات */
    padding: 0 !important;
    list-style: none !important;
}

/* 3. جعل العناصر شفافة وبدون إطارات بيضاء */
.s-payments-list-item {
    background: transparent !important; /* إزالة الخلفية البيضاء */
    border: none !important;            /* إزالة أي إطارات */
    box-shadow: none !important;        /* إزالة أي ظلال */
    width: 40px !important;             /* حجم أنيق */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
    padding: 0 !important;
}

/* 4. تأثير الهوفر (تحريك بسيط فقط) */
.s-payments-list-item:hover {
    transform: translateY(-5px);
    filter: brightness(1.2); /* إضاءة خفيفة عند المرور */
}

/* 5. ضبط الصور لتكون شفافة ونظيفة */
.s-payments-list-item img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background-color: transparent !important;
}

/* إخفاء أي حدود افتراضية من منصة سلة */
.s-payments-list-item, .s-payments-list-item img {
    border-radius: 0 !important;
}





/* Instagram Hover */
.s-social-link a[title*="instagram"]:hover { 
    color: #E1306C !important; 
}

/* WhatsApp Hover */
.s-contacts-item[href*="whatsapp"]:hover { 
    color: #25D366 !important; 
}

/* TikTok Hover */
.s-social-link a[title*="tiktok"]:hover { 
    color: #000000 !important; 
}


/* ================== تنسيق أيقونات التواصل (Gesture & Clean) ================== */




/* 3. تأثير الـ Gesture (التفاعل عند الهوفر) */
.s-contacts-item:hover, .s-social-link a:hover {
    transform: scale(1.3) translateY(-5px); /* تكبير مع رفع للأعلى */
}

/* 4. تغيير الألوان بحسب البراند عند الهوفر */
.s-contacts-item[href*="wa.me"]:hover svg { fill: #25D366 !important; } /* واتساب */
.s-contacts-item[href*="tel"]:hover svg { fill: #34b7f1 !important; }  /* اتصال */
.s-contacts-item[href*="mailto"]:hover svg { fill: #EA4335 !important; } /* إيميل */
.s-social-link a[title*="instagram"]:hover svg { fill: #E1306C !important; } /* انستقرام */
















/* Container Styling */
.washing-instructions-container {
    margin-top: 30px;
    padding: 20px;
    background: #fdfaf8; /* Very light cream to match your palette */
    border-radius: 15px;
    border: 1px solid rgba(90, 28, 0, 0.1);
}

.washing-title {
    color: #5a1c00;
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #5a1c00;
    display: inline-block;
    padding-bottom: 5px;
}

/* The Grid System */
.washing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.washing-card {
    background: #ffffff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.washing-card:hover {
    transform: translateY(-5px);
    border-color: #5a1c00;
    box-shadow: 0 10px 20px rgba(90, 28, 0, 0.05);
}

.washing-icon {
    font-size: 24px;
    color: #5a1c00;
    margin-bottom: 10px;
    background: rgba(90, 28, 0, 0.05);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.washing-text {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

/* Specific warning for Electric Dryer */
.warning-card {
    background: #fff5f5;
}

@media (max-width: 768px) {
    .washing-grid {
        grid-template-columns: 1fr 1fr;
    }
}





/* 3. زر "اشتري الآن" (خلفية بني + نص أبيض) */
.s-add-product-button-mini-checkout-content {
    background-color: var(--primary) !important; /* بني #5a1c00 */
    color: #ffffff !important;                   /* نص أبيض */
    border: none !important;
    border-radius: 8px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: bold !important;
}









/* ================== فصل أزرار الشراء (بني + نص أبيض + بدون خلفية) ================== */






/* 6. تأثير التفاعل (Gesture) عند الهوفر لكل زر بشكل مستقل */
.s-button-element:hover, 
.s-add-product-button-mini-checkout-content:hover {
    filter: brightness(1.2);      /* تفتيح اللون */
    transform: translateY(-3px);  /* قفزة بسيطة للأعلى */
    box-shadow: 0 8px 20px rgba(90, 28, 0, 0.25) !important;
}






/* ================== تكبير وتنسيق الشعار (عِــــبق) ================== */

/* 1. زيادة حجم الشعار في الشاشات الكبيرة */
.navbar-brand img {
    max-width: 350px !important; /* الحجم الافتراضي كان 180، الآن 280 بكسل */
    height: auto !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.1)); /* ظل خفيف لإبراز تفاصيل الشعار */
}



/* 3. تأثير "Gesture" عند تمرير الماوس فوق الشعار */
.navbar-brand:hover img {
    transform: scale(1.1) translateY(-3px); /* تكبير إضافي مع ارتفاع بسيط */
    filter: drop-shadow(0 5px 15px rgba(90, 28, 0, 0.2)); /* توهج بلون المتجر */
}



/* ================== تنظيف قائمة المستخدم (User Menu) ================== */

/* 1. إزالة الخلفية البيضاء من الأيقونة الخارجية */
.s-user-menu-trigger, 
.s-user-menu-avatar-wrap, 
#trigger-slot {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. تحسين مظهر الأيقونة لتناسب الهوية البنية */
.s-user-menu-trigger-avatar {
    border: 1px solid var(--primary-light) !important;
    padding: 2px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.s-user-menu-trigger:hover .s-user-menu-trigger-avatar {
    transform: scale(1.1);
    border-color: #ffffff !important;
}

/* 3. إزالة الخلفية البيضاء من القائمة المنسدلة (Dropdown) */
.s-user-menu-dropdown {
    background: var(--primary-dark) !important; /* تحويلها للون البني الداكن بدلاً من الأبيض */
    border: 1px solid var(--primary-light) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

/* 4. تنسيق النصوص داخل القائمة المنسدلة */
.s-user-menu-dropdown-item-title, 
.s-user-menu-trigger-hello, 
.s-user-menu-trigger-name,
.s-user-menu-dropdown-header-content {
    color: #ffffff !important;
}

/* 5. تنسيق الأيقونات الداخلية للقائمة */
.s-user-menu-dropdown-item-prefix svg, 
.s-user-menu-trigger-icon svg {
    fill: #ffffff !important;
}

/* 6. تأثير الهوفر على خيارات القائمة */
.s-user-menu-dropdown-item-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--accent-creamy) !important;
}


/* ضمان عدم ظهور أي لون أحمر في البار العلوي */
.top-navbar, .s-menu-topnav-list, .s-search-icon svg, .s-contacts-header a {
    color: #e2d1c3 !important; /* اللون السكري الخاص بمتجرك */
    fill: #e2d1c3 !important;  /* للأيقونات */
    border-color: transparent !important;
}

/* لون البحث عند الكتابة */
.s-search-input {
    color: var(--primary-dark) !important;
    background-color: #ffffff !important;
}

/* منع تحول الروابط للأحمر عند التمرير */
.s-menu-topnav-item:hover, .s-contacts-topnav-link:hover {
    color: #ffffff !important;
}




/* ================== تنسيق أيقونة منيو الجوال (مكس ألوان) ================== */

.mburger .sicon-menu {
    /* صنع مكس ألوان بين البني الفاتح والذهبي/الكريمي */
    background: linear-gradient(45deg, #5a1c00, #7a2600, #e2d1c3) !important;
    
    /* تفريغ الخلفية لتظهر فقط على شكل الأيقونة */
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    /* تعزيز الوضوح */
    font-weight: bold !important;
    display: inline-block;
    transition: all 0.3s ease-in-out !important;
}

/* تأثير عند الضغط أو تمرير الماوس */
.mburger:hover .sicon-menu {
    /* عكس المكس أو تفتيحه عند اللمس */
    background: linear-gradient(45deg, #e2d1c3, #7a2600, #5a1c00) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    /* حركة بسيطة للتفاعل */
    transform: scale(1.1);
}

/* تنسيق حاوية الزر لضمان عدم وجود خلفيات تعيق المكس */
.mburger {
    background: transparent !important;
    border: none !important;
    padding: 5px !important;
}