/* =================================================
   تطوير متجر سرعة الصوت - إصلاح الفوتر الجذري
   تعديل: محمود - أخصائي تسويق الكتروني
   ================================================= */

/* 1. الخط والوزن: Cairo عريض */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700;900&display=swap');

* {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
}

/* 2. الخلفية: التوهج التركوازي الموحد */
html, body, .salla-theme, #app, main, .main-content, .s-layout {
    background: radial-gradient(circle at 50% 50%, #5cb4c4 0%, #469dae 100%) fixed !important;
    background-color: #469dae !important;
}

/* -----------------------------------------------------------
   3. إصلاح الفوتر (The Footer Fix)
   الاستراتيجية: تلوين الكل بنفسجي، ثم استثناء العناوين للأسود
----------------------------------------------------------- */

/* أولاً: إجبار كافة نصوص وروابط وأيقونات الفوتر على اللون البنفسجي */
footer, 
footer p, 
footer a, 
footer span, 
footer li, 
footer i,
.s-footer,
.s-footer a,
.s-footer p {
    color: #94047d !important;
    fill: #94047d !important; /* للأيقونات */
}

/* ثانياً: إجبار العناوين فقط على اللون الأسود (يكتب بعد الكود السابق ليغطيه) */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.s-footer h3, 
.s-footer h4,
.footer-title,
.s-footer__title,
.s-footer-section-title {
    color: #000000 !important;
    font-weight: 900 !important;
    border-right: 3px solid #94047d; /* الشريط الجانبي */
    padding-right: 10px;
}

/* ----------------------------------------------------------- */

/* 4. عناوين الأقسام في الصفحة (بنفسجي) */
.s-block__title, 
.s-block__header h2, 
.section-title, 
.s-block-header h2 {
    color: #94047d !important;
    background: transparent !important;
}

/* 5. بطاقة المنتج (بيضاء) واسم المنتج (بنفسجي) */
salla-product-card, .s-product-card-entry, .product-entry {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.s-product-card-title a, .s-product-card-price, .product-price {
    color: #94047d !important;
    font-weight: 900 !important;
}

/* 6. زر (إضافة للسلة) */
salla-product-card salla-button,
.s-product-card-content .s-button-element,
.s-product-card-actions {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 10px !important;
}

.s-button-btn, .s-add-to-cart-button, button.btn--primary {
    background-color: #94047d !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    width: 100% !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.s-button-btn::before {
    content: "\f07a"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 8px;
}

/* 7. تصفير الخلفيات */
section, .s-block, .s-container, .s-product-slider, .s-block__content {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  
}
/* =================================================
   تعديل زر "إضافة للسلة" - النمط المربع المتوهج
   ================================================= */

/* استهداف كافة أزرار الإضافة للسلة في المتجر */
.s-button-btn, 
.s-add-to-cart-button, 
button.btn--primary {
    /* 1. جعل الزر مربعاً */
    border-radius: 0px !important;

    /* 2. لون الخلفية البنفسجي */
    background-color: #94047d !important;
    border: 2px solid #94047d !important; /* إضافة حدود بنفسجية لزيادة التحديد */

    /* 3. لون النص الأبيض */
    color: #ffffff !important;

    /* 4. إضافة التوهج البنفسجي */
    box-shadow: 0 0 15px 2px rgba(148, 4, 125, 0.6) !important; /* توهج قوي وواضح */

    /* 5. تنسيق النص داخل الزر */
    font-weight: 900 !important; /* خط عريض جداً */
    font-size: 16px !important; /* حجم خط مناسب */
    text-transform: uppercase !important; /* تحويل النص لأحرف كبيرة */
    padding: 12px 20px !important; /* مساحة داخلية مناسبة */

    /* 6. ضمان توسيط النص */
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* 7. عرض كامل للزر لملء عرض البطاقة */
    width: 100% !important;
    margin-top: 10px !important; /* مسافة علوية لفصله عن السعر */

    /* 8. تأثير عند مرور الماوس (زيادة التوهج) */
    transition: all 0.3s ease-in-out;
}

/* تأثير الـ Hover */
.s-button-btn:hover, 
.s-add-to-cart-button:hover, 
button.btn--primary:hover {
    box-shadow: 0 0 25px 5px rgba(148, 4, 125, 0.8) !important; /* زيادة كثافة التوهج */
    transform: translateY(-2px); /* رفعة بسيطة للزر */
    background-color: #a6058d !important; /* لون بنفسجي أفتح قليلاً عند المرور */
}

/* إخفاء أيقونة السلة الافتراضية ليبقى النص فقط */
.s-button-btn::before,
.s-add-to-cart-button i {
    display: none !important;
}