/* استيراد خط تجوال وخط أميري للعناوين الترويجية */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    --malak-topbar: #e3d2de;        /* الشريط العلوي الموف الفاتح */
    --malak-primary: #9e5a76;       /* الموف الوردي للأزرار الرئيسية */
    --malak-bronze: #a8876c;        /* البيج البرونزي لزر الشراء الفردي */
    --malak-badge: #eb7c68;         /* لون شارة الخصم المرجاني */
    --malak-soft-bg: #faf6f9;       /* خلفية ناعمة للبطاقات */
    --malak-border: #efe6ec;        /* لون الحدود الناعمة */
    --malak-text: #2b2126;          /* لون النص الأساسي */
    --malak-muted: #82757c;         /* لون النص الفرعي */
    --white: #ffffff;
}

/* 1. الإعدادات العامة لثيم رائد */
body,
body *:not(.sicon):not([class^="sicon-"]):not([class*=" sicon-"]) {
    font-family: 'Tajawal', sans-serif !important;
}

body {
    background-color: var(--white) !important;
    color: var(--malak-text) !important;
    overflow-x: hidden !important;
}

/* 2. الشريط العلوي (Top Navbar) مطابق لثيم ملاك */
.top-navbar {
    background-color: var(--malak-topbar) !important;
    color: var(--malak-text) !important;
    min-height: 34px !important;
    padding: 5px 0 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    border-bottom: none !important;
}

.top-navbar .container {
    justify-content: center !important;
    text-align: center !important;
}

.top-navbar a, 
.top-navbar span, 
.top-navbar i {
    color: var(--malak-text) !important;
}

/* 3. تحويل هيدر ثيم رائد ليصبح الشعار في المنتصف تماماً مثل ملاك */
.store-header,
header.site-header,
.main-nav-container {
    background-color: var(--white) !important;
    box-shadow: none !important;
    border-bottom: 1px solid #f5eff3 !important;
}

.main-nav-container .container > div,
.main-nav-container .inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 10px 0 !important;
}

/* وضع الشعار في العمود الأوسط */
.navbar-brand,
.site-header__logo {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 auto !important;
}

.navbar-brand img {
    max-height: 68px !important;
    width: auto !important;
}

/* إخفاء شريط الأقسام الأفقي على الديسكتوب للاعتماد على القائمة الجانبية كـ ملاك */
.sub-nav,
.main-nav {
    display: none !important;
}

/* تنسيق قسم النبذة التعريفية أسفل الهيدر (يتم حقنه عبر الجافاسكربت) */
.malak-bio-section {
    text-align: center;
    padding: 18px 15px 26px;
    background: var(--white);
    max-width: 650px;
    margin: 0 auto;
}

.malak-bio-text {
    font-size: 0.85rem;
    color: var(--malak-text);
    line-height: 1.8;
    margin-bottom: 12px;
    font-weight: 500;
}

.malak-bio-pills {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.malak-pill-btn {
    background-color: #f3eaf0;
    color: var(--malak-text) !important;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: 0.25s ease;
    border: 1px solid #e5d6e0;
}

.malak-pill-btn:hover {
    background-color: var(--malak-primary);
    color: var(--white) !important;
}

/* 4. البنرات العريضة في رائد (Full-Width 100% بدون حواف أو هوامش) */
.s-block--fixed-banner,
.s-block--hero-slider,
.s-block--full-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.s-block--fixed-banner .container,
.s-block--hero-slider .container,
.s-block--full-banner .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.s-block--fixed-banner img,
.s-block--hero-slider img,
.banner--fixed img {
    width: 100% !important;
    border-radius: 0 !important;
    display: block !important;
    object-fit: cover !important;
}

/* 5. قسم البطاقات الثلاثية (فوائد الكولاجين - عنصر صور مربعة في رائد) */
.s-block--banners:not(.s-block--fixed-banner) {
    max-width: 1140px !important;
    margin: 45px auto !important;
    padding: 0 15px !important;
}

.s-block--banners .grid,
.s-block--banners .two-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
}

@media (max-width: 768px) {
    .s-block--banners .grid,
    .s-block--banners .two-row {
        grid-template-columns: 1fr !important;
    }
}

.s-block--banners .banner-entry {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f6ecf2 !important;
    padding: 6px !important;
    border: 1px solid #e6d4df !important;
    box-shadow: 0 8px 24px rgba(158, 90, 118, 0.07) !important;
    transition: transform 0.3s ease !important;
}

.s-block--banners .banner-entry img {
    border-radius: 10px !important;
    width: 100% !important;
}

.s-block--banners .banner-entry:hover {
    transform: translateY(-5px) !important;
}

/* 6. عناوين الأقسام في ثيم رائد (توسيط كامل بدون خطوط جانبية) */
.s-block__title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 28px !important;
}

.s-block__title h2 {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: var(--malak-text) !important;
}

.s-block__title .s-block__display-all {
    display: none !important; /* إخفاء رابط عرض الكل الجانبي الخاص برائد */
}

/* 7. بطاقات المنتجات في رائد لتحاكي بطاقات ملاك (اختاري كورس الكولاجين) */
.s-product-card-entry {
    background: var(--white) !important;
    border: 1px solid #f0eae6 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
}

/* الصورة ملتصقة بحواف البطاقة العلوية بدون هوامش داخلية */
.s-product-card-image {
    border-radius: 10px 10px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* شارة الخصم العلوية اليسرى باللون المرجاني مثل ملاك */
.s-product-card-promotion-title {
    background-color: var(--malak-badge) !important;
    color: var(--white) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 5 !important;
}

/* محتوى البطاقة في المنتصف */
.s-product-card-content {
    padding: 14px 12px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.s-product-card-content-title a {
    color: var(--malak-text) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    text-align: center !important;
}

.s-product-card-content-sub {
    justify-content: center !important;
    margin: 6px 0 !important;
}

.s-product-card-sale-price,
.s-product-card-price {
    color: var(--malak-text) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}

/* زر الإضافة للسلة داخل البطاقات المتعددة */
.s-product-card-content-footer {
    width: 100% !important;
    margin-top: 8px !important;
}

.s-product-card-content-footer salla-add-product-button .s-button-element,
.s-product-card-content-footer button {
    background-color: #f7f3f5 !important;
    color: var(--malak-text) !important;
    border: 1px solid #e8dfe5 !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    width: 100% !important;
    transition: 0.25s ease !important;
}

.s-product-card-content-footer salla-add-product-button .s-button-element:hover,
.s-product-card-content-footer button:hover {
    background-color: var(--malak-primary) !important;
    border-color: var(--malak-primary) !important;
    color: var(--white) !important;
}

/* 8. تصميم قسم "المنتج الفردي المميز" الخاص بثيم ملاك (مثل: كورس علاجي 36 علبه) */
.malak-single-spotlight-section {
    padding: 45px 15px !important;
    text-align: center !important;
    background: var(--white) !important;
}

/* العنوان الزخرفي الفاتح أعلى المنتج الفردي */
.malak-spotlight-watermark {
    font-size: 2.1rem;
    font-weight: 800;
    color: #e6dce2;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.malak-single-spotlight-wrapper {
    max-width: 440px !important;
    margin: 0 auto !important;
}

/* البطاقة البيضاء للمنتج الفردي */
.malak-single-spotlight-wrapper .s-product-card-entry {
    background: var(--white) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f3eee9 !important;
    padding: 28px 28px 22px !important;
}

.malak-single-spotlight-wrapper .s-product-card-image {
    border-radius: 12px !important;
    max-width: 310px !important;
    margin: 0 auto 18px !important;
}

.malak-single-spotlight-wrapper .s-product-card-content-title a {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
}

/* الشريط السفلي خارج البطاقة (الزر البرونزي يمين والسعر يسار كما في الصورة) */
.malak-external-action-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 440px !important;
    margin: 18px auto 0 !important;
    padding: 0 6px !important;
}

.malak-external-action-bar .malak-buy-btn {
    background-color: var(--malak-bronze) !important;
    color: var(--white) !important;
    border-radius: 30px !important;
    padding: 9px 28px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

.malak-external-action-bar .malak-spot-price {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--malak-text) !important;
}

/* 9. بطاقات آراء العملاء (سلايدر الآراء مع الأيقونة الدائرية في الأعلى) */
.s-block--testimonials {
    max-width: 1140px !important;
    margin: 50px auto !important;
}

.s-reviews-testimonial,
.s-block--testimonials .swiper-slide > div {
    background-color: var(--white) !important;
    border: 1px solid #f0e8ed !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.03) !important;
    padding: 28px 20px 22px !important;
    text-align: center !important;
    position: relative !important;
    margin-top: 25px !important;
}

/* رفع صورة العميل الدائرية لتكون في أعلى منتصف البطاقة مثل ملاك */
.s-reviews-testimonial__avatar,
.s-reviews-testimonial img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    margin: -50px auto 10px !important;
    border: 3px solid var(--white) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    display: block !important;
}

/* إخفاء علامة الاقتباس الضخمة الافتراضية في رائد */
.s-reviews-testimonial__icon,
.s-block--testimonials .sicon-quote-open {
    display: none !important;
}

.s-reviews-testimonial .s-rating-stars {
    justify-content: center !important;
    color: #2b2126 !important;
    margin: 6px 0 10px !important;
}

/* 10. شريط النشرة البريدية والفوتر الأبيض المطابق لثيم ملاك */
.malak-newsletter-bar {
    border-top: 1px solid #f0e8ed;
    border-bottom: 1px solid #f0e8ed;
    background: var(--white);
    padding: 22px 15px;
    margin-top: 50px;
}

.malak-newsletter-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.malak-newsletter-form {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 420px;
}

.malak-newsletter-form input {
    flex: 1;
    border: 1px solid #e5dce2;
    border-radius: 6px;
    padding: 9px 14px;
    font-size: 0.85rem;
    outline: none;
}

.malak-newsletter-form button {
    background-color: #d8c3d0;
    color: var(--malak-text);
    border: none;
    border-radius: 6px;
    padding: 9px 24px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

/* تبييض الفوتر الخاص برائد بالكامل */
.store-footer,
.store-footer__inner,
footer.site-footer {
    background-color: var(--white) !important;
    color: var(--malak-text) !important;
    border-top: none !important;
}

.store-footer h3,
.store-footer h4,
.store-footer a,
.store-footer p,
.store-footer span {
    color: var(--malak-text) !important;
}

/* تنسيق أزرار التواصل في العمود الأيسر من الفوتر */
.store-footer .contact-social a,
.malak-contact-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid #e5dce2 !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    margin: 4px !important;
    background: var(--white) !important;
}