/*************************************************
 *  1) الخلفية الخارجية أسفل المتجر + الصفحة
 *************************************************/

/* خلفية الفوتر بيضاء */
footer,
.footer,
.site-footer,
.page-footer,
.section-footer,
.footer-wrapper,
.footer-container,
div[class*="footer"],
section[class*="footer"] {
    background-color: #ffffff !important;
    border: none !important;
}

/* خلفية باقي الصفحة بيضاء */
body,
.app,
.main-wrapper,
.page-content,
.site-wrapper,
.container {
    background-color: #ffffff !important;
}

/* إزالة أي خلفيات داخل الفوتر (تترك العناصر شفافة فوق الأبيض) */
footer *,
.footer *,
.section-footer *,
.footer-wrapper * {
    background: transparent !important;
}

/*************************************************
 *  2) حقل البحث (placeholder)
 *************************************************/

/* إظهار نص placeholder في حقل البحث */
input.s-search-input::placeholder {
    color: #888 !important;
    opacity: 1 !important;
}

/*************************************************
 *  3) ألوان أيقونات السوشال في الفوتر
 *************************************************/

/* فيسبوك */
footer a[href*="facebook"] i,
footer a[href*="facebook"] svg {
    color: #1877F2 !important;
    fill: #1877F2 !important;
}

/* إنستغرام */
footer a[href*="instagram"] i,
footer a[href*="instagram"] svg {
    color: #E4405F !important;
    fill: #E4405F !important;
}

/* تويتر / X (لون أسود) */
footer a[href*="twitter"] i,
footer a[href*="twitter"] svg,
footer a[href*="x.com"] i,
footer a[href*="x.com"] svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/* يوتيوب */
footer a[href*="youtube"] i,
footer a[href*="youtube"] svg {
    color: #FF0000 !important;
    fill: #FF0000 !important;
}

/* سناب شات */
footer a[href*="snapchat"] i,
footer a[href*="snapchat"] svg {
    color: #FFFC00 !important;
    fill: #FFFC00 !important;
}

/* واتساب */
footer a[href*="wa.me"] i,
footer a[href*="wa.me"] svg,
footer a[href*="whatsapp"] i,
footer a[href*="whatsapp"] svg {
    color: #25D366 !important;
    fill: #25D366 !important;
}

/* تيك توك */
footer a[href*="tiktok"] i,
footer a[href*="tiktok"] svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/*************************************************
 *  4) عناوين الأقسام
 *************************************************/

/* ضبط جميع عناوين الأقسام بالقوة */
h2,
h3,
.section-title,
.products-section-title,
.section-heading,
.widget-title,
.home-title {
    text-align: center !important;
    color: #2d7501 !important;
    font-weight: 700 !important;
    width: 100%;
    display: block;
}

/* بعض القوالب تستخدم flex لذلك نجبر العنصر يكون بالوسط */
.section-title-container,
.products-section-header,
.section-header,
.title-wrapper,
.heading-wrapper {
    display: flex !important;
    justify-content: center !important;
}

/*************************************************
 *  5) آراء العملاء – تصميم الكروت
 *************************************************/

/* الكرت الأساسي لكل رأي */
.s-reviews-swiper-slide {
    background: linear-gradient(135deg, #f8fff9, #e8f5e9);
    border-radius: 18px;
    padding: 25px 22px;
    border: 1px solid rgba(45, 117, 1, 0.20);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    direction: rtl;
}

/* شكل زخرفي (علامة التنصيص) */
.s-reviews-swiper-slide::before {
    content: "❝";
    position: absolute;
    top: 8px;
    left: 20px;
    font-size: 52px;
    color: rgba(45, 117, 1, 0.15);
    font-weight: 900;
}

/* محتوى النص */
.s-reviews-testimonial_text p {
    font-size: 16px !important;
    color: #1f2933;
    font-weight: 600;
    margin-bottom: 10px;
}

/* اسم العميل */
.s-reviews-testimonial_text span,
.s-reviews-testimonial .name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2d7501 !important;
}

/* تقييم النجوم */
.s-reviews-testimonial_rating,
.s-reviews-testimonial_rating i,
.s-reviews-testimonial_rating svg {
    color: #f4b000 !important; /* نجوم ذهبية */
}

/* الصورة (الأفاتار) */
.s-reviews-testimonial_avatar img {
    width: 65px !important;
    height: 65px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(45,117,1,0.25);
    background: #fff;
}

/* تنسيق داخل السلايد */
.s-reviews-testimonial_inner {
    display: flex;
    flex-direction: row-reverse;  /* الصورة يمين */
    align-items: center;
    gap: 18px;
}

/* في الجوال يصير عمودي */
@media (max-width: 768px) {
    .s-reviews-testimonial_inner {
        flex-direction: column;
        text-align: center;
        padding: 14px !important;
    }

    .s-reviews-swiper-slide::before {
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
    }

    .s-reviews-testimonial_avatar img {
        width: 75px !important;
        height: 75px !important;
    }
}

/*************************************************
 *  6) اسم المنتج داخل البطاقة
 *************************************************/

.s-product-card-content .product-entry__name,
.s-product-card-content .product-title,
.s-product-card-content .s-product-title,
.s-product-card-content h3,
.s-product-card-content a {
    color: #2d7501 !important;
    font-weight: 700 !important;
}

/*************************************************
 *  7) الأسئلة الشائعة – تصميم الهيدر
 *************************************************/

/* خلفية بسيطة للقسم بالكامل (اختياري) */
.common-questions-sec {
    background: linear-gradient(180deg, #f8fff9 0%, #ffffff 100%) !important;
    padding: 30px 0 !important;
}

/* عنوان القسم */
.common-questions-sec h2,
.common-questions-sec .section-title {
    text-align: center !important;
    color: #2d7501 !important;
    font-weight: 800 !important;
    margin-bottom: 20px;
}

/* الكرت الأساسي لكل سؤال */
.common-questions-sec .header-accordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff !important;
    background-image: none !important;
    border-radius: 16px;
    padding: 12px 18px;
    margin-bottom: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    color: #2d7501 !important;
    font-weight: 600;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

/* منع تغيّر الخلفية عند الضغط / عند فتح السؤال */
.common-questions-sec .header-accordion:hover,
.common-questions-sec .header-accordion:focus,
.common-questions-sec .header-accordion:active,
.common-questions-sec .header-accordion.active,
.common-questions-sec .header-accordion.is-open,
.common-questions-sec .header-accordion.open,
.common-questions-sec .header-accordion[aria-expanded="true"] {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #2d7501 !important;
    border-color: rgba(45, 117, 1, 0.25) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

/* نص السؤال داخل الـ span */
.common-questions-sec .header-accordion span {
    flex: 1;
    margin: 0 10px;
    color: #2d7501 !important;
    font-size: 14px;
    font-weight: 600;
}

/* الرقم (لو ظاهر كـ span أو نص منفصل) */
.common-questions-sec .header-accordion .question-number,
.common-questions-sec .header-accordion .num,
.common-questions-sec .header-accordion > span:first-child {
    color: #9ca3af !important;
    font-size: 13px;
    font-weight: 500;
}

/* أيقونة + */
.common-questions-sec .header-accordion i.sicon-add.icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: #2d7501 !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(45, 117, 1, 0.35);
    padding: 0 !important;
}

/* تأكيد عام: أي خلفية في هذا الهيدر نلغيها */
.common-questions-sec .header-accordion * {
    background: transparent !important;
}

/* موبايل */
@media (max-width: 768px) {
    .common-questions-sec {
        padding: 20px 0 !important;
    }

    .common-questions-sec .header-accordion {
        padding: 10px 14px;
        border-radius: 14px;
    }

    .common-questions-sec .header-accordion span {
        font-size: 13px;
    }
}

/********************************************
 *  8) شكل إجابة السؤال (body-accordion)
 ********************************************/

/* كرت الإجابة */
.common-questions-sec .body-accordion {
    background-color: #ffffff !important;
    border-radius: 0 0 16px 16px;
    margin-top: 0;
    padding: 14px 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-top: 0; /* عشان تلتحم مع السؤال */
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    color: #363636;
    font-size: 14px;
    line-height: 1.9;
    position: relative;
    overflow: hidden;
}

/* الخط الأخضر الجانبي */
.common-questions-sec .body-accordion::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #2d7501, #76b83c);
}

/* نص الإجابة */
.common-questions-sec .body-accordion p {
    margin: 0 0 6px;
}

.common-questions-sec .body-accordion p:last-child {
    margin-bottom: 0;
}

/* لما السؤال يكون مفتوح، نخليه يكمل الكرت مع الإجابة */
.common-questions-sec .header-accordion.active,
.common-questions-sec .header-accordion[aria-expanded="true"] {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-color: transparent !important;
}

/* الإجابة مباشرة بعد الهيدر المفتوح تاخذ نفس عرض الكرت */
.common-questions-sec .header-accordion.active + .body-accordion,
.common-questions-sec .header-accordion[aria-expanded="true"] + .body-accordion {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* موبايل */
@media (max-width: 768px) {
    .common-questions-sec .body-accordion {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/*************************************************
 *  9) عناصر التصنيفات في الهيدر
 *************************************************/

/* لون ورسم خط عناصر التصنيفات في الهيدر */
#bigMenu.main-menu a,
#bigMenu.main-menu a span {
    color: #2d7501 !important;      /* الأخضر المطلوب */
    font-weight: 700 !important;    /* خط أثقل */
}

/* لون مختلف بسيط عند المرور بالماوس (اختياري) */
#bigMenu.main-menu a:hover,
#bigMenu.main-menu a:hover span {
    color: #215400 !important;
}

/*************************************************
 * 10) الاسم الترويجي في كرت المنتج
 *************************************************/

/* تعديل شكل الاسم الترويجي في كرت المنتج */
.s-product-card-promotion-title {
    background-color: #4FA435 !important;  /* أخضر مثل العناوين */
    color: #ffffff !important;             /* الخط أبيض */
    padding: 4px 16px !important;          /* مساحة داخلية */
    border-radius: 20px !important;        /* حواف دائرية (كبسولة) */
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1.4;
}

/*************************************************
 * 11) أيقونة تسجيل الدخول → شعار المتجر
*************************************************/

/* إخفاء الـ SVG الأصلي للأيقونة */
.s-login-modal-header-icon svg {
    display: none !important;
}

/* تنسيق الشعار */
.custom-login-logo {
    display: block;
    margin: 0 auto;
}