/* Add custom CSS styles below */ 
/* Style Mart - أزرار المتجر */
button.bg-primary,
a.bg-primary,
.bg-primary,
.btn-primary {
    background-color: #073C31 !important;
    border-color: #073C31 !important;
    color: #FFFFFF !important;
}
/* Style Mart - زر أضف للسلة داخل المنتجات */
.product-entry .add-to-cart,
.product-card .add-to-cart,
.product-entry button,
.product-card button,
salla-add-product-button button,
salla-add-product-button .s-button-element,
salla-add-product-button .s-button-primary {
    background-color: #073C31 !important;
    border-color: #073C31 !important;
    color: #FFFFFF !important;
}

/* الأيقونة والنص داخل زر السلة */
salla-add-product-button button *,
salla-add-product-button .s-button-element * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
/* Style Mart - خلفية صفحة تفاصيل المنتج */
.product-page,
.product-details,
.product-single,
main {
    background-color: #EFE0CF !important;
}
/* Style Mart - صناديق تفاصيل ووصف المنتج */
.product-tabs,
.product-tabs *,
.tabs,
.tabs-content,
.tab-content,
.s-tabs,
.s-tabs-content,
.s-tabs-content-wrapper,
.product-description,
.product-details__content,
.product-details__content *,
.product-details,
.product-details *,
#product-description,
#product-description *,
.product__description,
.product__description * {
    background-color: #F8F0E7 !important;
}
/* ===== Style Mart - إكمال الهوية ===== */

/* استبدال اللون الوردي العام بالأخضر */
:root {
    --color-primary: #073C31 !important;
    --color-primary-dark: #073C31 !important;
}

/* خلفيات الأقسام والمناطق الرمادية الفاتحة */
.category-header,
.category-page-header,
.page-header,
.archive-header,
.breadcrumbs,
.breadcrumb {
    background-color: #F8F0E7 !important;
}

/* العناوين والروابط التي تأخذ اللون الأساسي */
.text-primary,
a.text-primary {
    color: #073C31 !important;
}

/* بطاقات آراء العملاء */
.testimonial,
.testimonial-item,
.testimonials .swiper-slide > div {
    background-color: #F8F0E7 !important;
}

/* حقول الإدخال مثل البريد */
input,
select,
textarea {
    border-color: #DECBB8 !important;
}

/* الفوتر */
footer,
.footer {
    background-color: #EFE0CF !important;
    color: #073C31 !important;
}

footer a,
.footer a {
    color: #073C31 !important;
}

/* أزرار الفوتر والاشتراك */
footer button,
.footer button {
    background-color: #073C31 !important;
    color: #FFFFFF !important;
}

/* أيقونات التواصل */
.social-icons a,
footer .social-link {
    color: #073C31 !important;
}
/* ==================================================
   STYLE MART - SAUDI NATIONAL DAY 96 - REVIEWS
   ================================================== */

/* البطاقة */
.s-block--testimonials .swiper-slide > div {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 8% 88%,
            rgba(7,60,49,.10) 0 7%,
            transparent 7.5%
        ),
        linear-gradient(
            145deg,
            #FFFDF8 0%,
            #F8F0E7 70%,
            #EFE0CF 100%
        ) !important;

    border: 2px solid #073C31 !important;
    border-radius: 20px !important;

    padding: 70px 20px 25px !important;

    box-shadow:
        0 12px 25px rgba(7,60,49,.12) !important;

    isolation: isolate !important;
}


/* =====================================
   الموجة الخضراء أعلى البطاقة
   ===================================== */

.s-block--testimonials .swiper-slide > div::before {
    content: "اليوم الوطني 96   ✦" !important;

    position: absolute !important;

    top: -20px !important;
    left: -5% !important;

    width: 110% !important;
    height: 72px !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    padding-bottom: 18px !important;

    background:
        linear-gradient(
            120deg,
            #073C31 0%,
            #005C46 45%,
            #073C31 100%
        ) !important;

    color: #F4D79B !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    border-radius:
        0 0 55% 35% /
        0 0 35% 28% !important;

    transform: rotate(-1.5deg) !important;

    z-index: 0 !important;
}


/* =====================================
   الشمس + الصحراء أسفل البطاقة
   ===================================== */

.s-block--testimonials .swiper-slide > div::after {
    content: "☀" !important;

    position: absolute !important;

    left: -15px !important;
    bottom: -22px !important;

    width: 105px !important;
    height: 105px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #C79A45 !important;

    font-size: 75px !important;

    opacity: .18 !important;

    transform: rotate(-12deg) !important;

    z-index: -1 !important;

    pointer-events: none !important;
}


/* =====================================
   صورة العميل
   ===================================== */

.s-block--testimonials .swiper-slide img {
    position: relative !important;

    z-index: 3 !important;

    border: 4px solid #F8F0E7 !important;

    border-radius: 50% !important;

    box-shadow:
        0 4px 12px rgba(7,60,49,.12) !important;
}


/* =====================================
   اسم العميل
   ===================================== */

.s-block--testimonials .swiper-slide h3,
.s-block--testimonials .swiper-slide h4,
.s-block--testimonials .swiper-slide strong {

    position: relative !important;
    z-index: 2 !important;

    color: #073C31 !important;

    font-weight: 800 !important;
}


/* =====================================
   كلام العميل
   ===================================== */

.s-block--testimonials .swiper-slide p {

    position: relative !important;
    z-index: 2 !important;

    color: #6F655B !important;

    line-height: 1.8 !important;
}


/* =====================================
   النجوم الذهبية
   ===================================== */

.s-block--testimonials .swiper-slide .star,
.s-block--testimonials .swiper-slide .stars {

    color: #D5A42E !important;

    position: relative !important;
    z-index: 3 !important;
}


/* =====================================
   خط ذهبي داخلي تحت المنطقة الخضراء
   ===================================== */

.s-block--testimonials .swiper-slide > div {
    background-image:

        linear-gradient(
            90deg,
            transparent 10%,
            rgba(199,154,69,.35) 50%,
            transparent 90%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(7,60,49,.10) 0 7%,
            transparent 7.5%
        ),

        linear-gradient(
            145deg,
            #FFFDF8 0%,
            #F8F0E7 70%,
            #EFE0CF 100%
        ) !important;

    background-size:
        100% 2px,
        auto,
        auto !important;

    background-position:
        center 57px,
        center,
        center !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat !important;
}


/* =====================================
   نقاط السلايدر
   ===================================== */

.s-block--testimonials .swiper-pagination-bullet {
    background: #D8C8AE !important;
    opacity: 1 !important;
}

.s-block--testimonials
.swiper-pagination-bullet-active {

    background: #073C31 !important;

    width: 28px !important;

    border-radius: 10px !important;
}


/* =====================================
   أسهم التنقل
   ===================================== */

.s-block--testimonials .swiper-button-next,
.s-block--testimonials .swiper-button-prev {

    background: #F8F0E7 !important;

    color: #073C31 !important;

    border: 1px solid #C79A45 !important;

    border-radius: 50% !important;

    box-shadow:
        0 4px 12px rgba(7,60,49,.10) !important;
}


/* =====================================
   عنوان قسم آراء العملاء
   ===================================== */

.s-block--testimonials .s-block__title h2,
.s-block--testimonials .s-block__title h3 {

    color: #073C31 !important;

    font-weight: 900 !important;
}


/* لمسة وطنية حول العنوان */

.s-block--testimonials .s-block__title h2::before,
.s-block--testimonials .s-block__title h3::before {

    content: "✦  🇸🇦  " !important;

    color: #C79A45 !important;
}


.s-block--testimonials .s-block__title h2::after,
.s-block--testimonials .s-block__title h3::after {

    content: "  🇸🇦  ✦" !important;

    color: #C79A45 !important;
}