/* ==========================================
   1. كود تغيير لون كافة العناوين في المتجر
   ========================================== */
h1, h2, h3, h4, h5, h6, .product-title, .section-title {
    color: #fc6c9b !important;
}

/* ==========================================
   2. أمر حاسم: إجبار نصوص قائمة العناصر والبنرات على اللون الأبيض
   ========================================== */
/* استهداف مباشر وعميق جداً لكل النصوص التي تظهر فوق كتل الصور والبنرات الذكية لمنعها من التحول للوردي */
.s-block-element h1, .s-block-element h2, .s-block-element h3, .s-block-element h4, .s-block-element p, .s-block-element span,
.element-list-item h1, .element-list-item h2, .element-list-item h3, .element-list-item p, .element-list-item span,
.banner-title, .banner-desc, .item-title, .element-title,
[class*="element-list"] h1, [class*="element-list"] h2, [class*="element-list"] h3, [class*="element-list"] p, [class*="element-list"] span,
[class*="banner"] h1, [class*="banner"] h2, [class*="banner"] p, [class*="banner"] span {
    color: #ffffff !important; /* اللون الأبيض لتظهر العناوين واضحة وجميلة فوق الصور */
}

/* حماية التنبيهات والأخطاء من التحول للوردي لتبقى واضحة */
.salla-alert *, .alert *, .salla-notify * {
    color: #333333 !important;
}

/* ==========================================
   3. تنسيق حاوية النشرة البريدية الكاملة
   ========================================== */
.custom-newsletter-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: #fff5f7; /* لون وردي خفيف جداً يناسب الهوية */
    padding: 40px;
    border-radius: 12px;
    margin: 40px auto;
    max-width: 1200px;
    direction: rtl;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* الجانب الأيمن (الشعار والأرشيف) */
.newsletter-right-side {
    box-sizing: border-box;
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.newsletter-logo {
    max-width: 220px;
    height: auto;
}

/* استهداف رابط الأرشيف بلون الهوية دون التأثير على الموقع */
.custom-newsletter-container .archive-link {
    color: #fc6c9b !important; 
    text-decoration: underline !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* الجانب الأيسر (الفورم والنصوص) */
.newsletter-left-side {
    box-sizing: border-box;
    flex: 1.5;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* حقل إدخال الإيميل محدد بالوردي */
.custom-newsletter-container .newsletter-input {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #fc6c9b !important; 
    border-radius: 25px !important;
    font-size: 15px !important;
    outline: none !important;
    text-align: right !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* زر الاشتراك الأسود */
.custom-newsletter-container .newsletter-submit-btn {
    width: 100%;
    background-color: #000000 !important; 
    color: #ffffff !important;
    border: none !important;
    padding: 12px !important;
    border-radius: 25px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    letter-spacing: 1px !important;
    transition: background 0.3s ease !important;
    margin-top: 10px !important;
    pointer-events: auto !important;
}

/* تأثير تمرير الماوس فوق الزر ليتحول لوردي */
.custom-newsletter-container .newsletter-submit-btn:hover {
    background-color: #fc6c9b !important;
}

/* النص الوصفي الخاص بالنشرة فقط */
.custom-newsletter-container .newsletter-description {
    font-size: 14px !important;
    color: #555555 !important;
    line-height: 1.8 !important;
    text-align: justify !important;
}

/* تمييز كلمة "برقية وردية" داخل النص فقط بلون الهوية */
.custom-newsletter-container .newsletter-description span {
    font-weight: bold !important;
    color: #fc6c9b !important;
}

/* التوافق التام مع شاشات الجوال */
@media (max-width: 768px) {
    .custom-newsletter-container {
        flex-direction: column;
        padding: 25px 20px;
        margin: 20px 15px;
        gap: 25px;
    }
    .newsletter-left-side {
        width: 100%;
    }
}