/* ==========================================================
   RONI STORE — SALLA
   CLEAN MASTER CSS
   النسخة النظيفة بدون تعديلات الفوتر
========================================================== */


/* ==========================================================
   1) ألوان وهوية RONI
========================================================== */

:root {
    --roni-bg: #26002e;
    --roni-bg-dark: #19001f;

    --roni-purple: #8f18b5;
    --roni-purple-2: #b73dff;
    --roni-purple-light: #d96cff;

    --roni-white: #ffffff;

    --roni-glow: rgba(183, 61, 255, 0.30);
}


/* ==========================================================
   2) إعدادات عامة
========================================================== */

* {
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    overflow-x: hidden;
}

body {
    background: #26002e !important;
}


/* ==========================================================
   3) الهيدر
========================================================== */

header,
.site-header,
.store-header {
    position: relative !important;

    box-shadow:
        0 3px 18px rgba(0, 0, 0, 0.10) !important;
}


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

h2,
.section-title,
.s-block-title,
.s-block__title {
    font-weight: 800 !important;

    line-height: 1.45 !important;

    letter-spacing: -0.3px !important;
}


/* ==========================================================
   5) المسافات بين الأقسام
========================================================== */

.s-block {
    margin-bottom: 32px !important;

    scroll-margin-top: 100px;
}


/* ==========================================================
   6) بطاقات المنتجات
========================================================== */

.product-entry,
.product-card,
.s-product-card-entry {
    position: relative !important;

    /* مهم: نحافظ على خلفية البطاقة بدون أبيض */
    background: transparent !important;

    border-radius: 20px !important;

    border:
        1px solid rgba(196, 80, 235, 0.16) !important;

    overflow: visible !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        0 0 20px rgba(183, 61, 255, 0.30),
        0 0 42px rgba(157, 32, 220, 0.18) !important;

    transition:
        transform 0.30s ease,
        box-shadow 0.30s ease !important;
}


/* ==========================================================
   7) الإضاءة البنفسجية خلف بطاقات المنتجات
========================================================== */

.product-entry::before,
.product-card::before,
.s-product-card-entry::before {
    content: "" !important;

    position: absolute !important;

    top: 10% !important;
    right: 5% !important;
    bottom: 5% !important;
    left: 5% !important;

    border-radius: 22px !important;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(207, 82, 255, 0.38),
            rgba(145, 0, 190, 0.16) 45%,
            transparent 72%
        ) !important;

    filter: blur(28px) !important;

    opacity: 0.75 !important;

    z-index: -1 !important;

    pointer-events: none !important;
}


/* ==========================================================
   8) إطار ولمعة خفيفة حول بطاقة المنتج
========================================================== */

.product-entry::after,
.product-card::after,
.s-product-card-entry::after {
    content: "" !important;

    position: absolute !important;

    inset: -1px !important;

    border-radius: 21px !important;

    border:
        1px solid rgba(210, 100, 255, 0.22) !important;

    box-shadow:
        inset 0 0 12px rgba(210, 100, 255, 0.06),
        0 0 12px rgba(190, 65, 255, 0.12) !important;

    pointer-events: none !important;

    z-index: 2 !important;
}


/* ==========================================================
   9) حركة بطاقات المنتجات على الكمبيوتر
========================================================== */

@media (hover: hover) {

    .product-entry:hover,
    .product-card:hover,
    .s-product-card-entry:hover {
        transform: translateY(-4px) !important;

        box-shadow:
            0 14px 30px rgba(0, 0, 0, 0.24),
            0 0 26px rgba(190, 62, 255, 0.42),
            0 0 55px rgba(153, 27, 210, 0.24) !important;
    }
}


/* ==========================================================
   10) صور المنتجات
========================================================== */

.product-entry img,
.product-card img,
.s-product-card-entry img {
    border-radius: 16px !important;

    transition:
        transform 0.30s ease !important;
}


@media (hover: hover) {

    .product-entry:hover img,
    .product-card:hover img,
    .s-product-card-entry:hover img {
        transform: scale(1.02);
    }
}


/* ==========================================================
   11) أسماء المنتجات
========================================================== */

.s-product-card-content-title,
.product-entry h3,
.product-card h3 {
    font-weight: 700 !important;

    line-height: 1.55 !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden !important;

    min-height: 3.1em;
}


/* ==========================================================
   12) أسعار المنتجات
========================================================== */

.s-product-card-price,
.product-price,
.price {
    font-weight: 900 !important;
}


/* ==========================================================
   13) أزرار المنتجات
========================================================== */

.s-button-element,
.s-product-card-content-footer button,
.product-entry button,
.product-card button {
    border-radius: 13px !important;

    font-weight: 800 !important;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease,
        opacity 0.20s ease !important;
}


@media (hover: hover) {

    .s-button-element:hover,
    .s-product-card-content-footer button:hover,
    .product-entry button:hover,
    .product-card button:hover {
        transform: translateY(-2px);

        box-shadow:
            0 7px 20px rgba(155, 35, 198, 0.28) !important;

        opacity: 0.95;
    }
}


/* ==========================================================
   14) البنرات
========================================================== */

.banner,
.s-block--banners img,
.s-block--fixed-banner img {
    border-radius: 18px !important;

    overflow: hidden !important;

    box-shadow:
        0 7px 24px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(183, 61, 255, 0.08) !important;
}


/* ==========================================================
   15) حقول الإدخال
========================================================== */

input,
select,
textarea {
    border-radius: 12px !important;
}


/* ==========================================================
   16) قسم "وش يميزنا عن غيرنا؟"
========================================================== */

.s-block--features,
.s-features,
.features-section,
.store-features {
    position: relative !important;

    margin: 35px 14px !important;

    padding: 32px 16px 28px !important;

    border-radius: 24px !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(195, 76, 255, 0.34),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #310038 0%,
            #4b0058 50%,
            #25002d 100%
        ) !important;

    border:
        1px solid rgba(191, 83, 255, 0.30) !important;

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(183, 61, 255, 0.18),
        0 0 50px rgba(156, 39, 176, 0.10) !important;
}


/* ==========================================================
   17) الإضاءة العلوية لقسم المميزات
========================================================== */

.s-block--features::before,
.s-features::before,
.features-section::before,
.store-features::before {
    content: "" !important;

    position: absolute !important;

    width: 260px !important;
    height: 220px !important;

    top: -130px !important;

    right: 50% !important;

    transform: translateX(50%) !important;

    background:
        rgba(195, 72, 255, 0.40) !important;

    filter: blur(65px) !important;

    border-radius: 50% !important;

    pointer-events: none !important;
}


/* ==========================================================
   18) خط النيون أعلى قسم المميزات
========================================================== */

.s-block--features::after,
.s-features::after,
.features-section::after,
.store-features::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;

    right: 12% !important;
    left: 12% !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224, 151, 255, 0.95),
            transparent
        ) !important;

    box-shadow:
        0 0 14px rgba(208, 101, 255, 0.75) !important;

    pointer-events: none !important;
}


/* ==========================================================
   19) عنوان قسم المميزات
========================================================== */

.s-block--features h2,
.s-features h2,
.features-section h2,
.store-features h2 {
    position: relative !important;

    color: #ffffff !important;

    font-size: 25px !important;

    font-weight: 900 !important;

    text-align: center !important;

    line-height: 1.4 !important;

    opacity: 1 !important;

    margin-bottom: 10px !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.60),
        0 0 14px rgba(190, 70, 255, 0.35) !important;
}


/* ==========================================================
   20) النص تحت عنوان المميزات
========================================================== */

.s-block--features > p,
.s-features > p,
.features-section > p,
.store-features > p {
    position: relative !important;

    color: rgba(255, 255, 255, 0.95) !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    text-align: center !important;

    line-height: 1.7 !important;

    opacity: 1 !important;

    margin-bottom: 25px !important;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.40) !important;
}


/* ==========================================================
   21) بطاقات المميزات
========================================================== */

.s-block--features .feature-item,
.s-features .feature-item,
.features-section .feature-item,
.store-features .feature-item {
    position: relative !important;

    padding: 18px 8px !important;

    border-radius: 18px !important;

    background:
        rgba(255, 255, 255, 0.055) !important;

    border:
        1px solid rgba(255, 255, 255, 0.09) !important;

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    transition: 0.25s ease !important;
}


/* ==========================================================
   22) أيقونات المميزات
========================================================== */

.s-block--features svg,
.s-features svg,
.features-section svg,
.store-features svg {
    color: #d96cff !important;

    stroke: #d96cff !important;

    opacity: 1 !important;

    filter:
        drop-shadow(
            0 0 6px rgba(217, 108, 255, 0.70)
        )
        drop-shadow(
            0 0 14px rgba(217, 108, 255, 0.28)
        ) !important;

    margin-bottom: 10px !important;
}


/* ==========================================================
   23) عنوان كل ميزة
========================================================== */

.s-block--features h3,
.s-features h3,
.features-section h3,
.store-features h3 {
    color: #ffffff !important;

    font-size: 17px !important;

    font-weight: 800 !important;

    line-height: 1.5 !important;

    opacity: 1 !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.50) !important;
}


/* ==========================================================
   24) وصف كل ميزة
========================================================== */

.s-block--features .feature-item p,
.s-features .feature-item p,
.features-section .feature-item p,
.store-features .feature-item p {
    color: rgba(255, 255, 255, 0.92) !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1.7 !important;

    opacity: 1 !important;
}


/* ==========================================================
   25) تحسينات الجوال
========================================================== */

@media (max-width: 768px) {

    /* بطاقات المنتجات */

    .product-entry,
    .product-card,
    .s-product-card-entry {
        border-radius: 16px !important;

        box-shadow:
            0 5px 16px rgba(0, 0, 0, 0.14),
            0 0 18px rgba(183, 61, 255, 0.28),
            0 0 35px rgba(157, 32, 220, 0.14) !important;
    }


    /* إضاءة بطاقات المنتجات */

    .product-entry::before,
    .product-card::before,
    .s-product-card-entry::before {
        filter: blur(22px) !important;

        opacity: 0.68 !important;
    }


    /* منع تأثير Hover على الجوال */

    .product-entry:hover,
    .product-card:hover,
    .s-product-card-entry:hover {
        transform: none !important;
    }


    /* أسماء المنتجات */

    .s-product-card-content-title,
    .product-entry h3,
    .product-card h3 {
        font-size: 14px !important;

        line-height: 1.5 !important;
    }


    /* العناوين العامة */

    h2,
    .section-title,
    .s-block-title,
    .s-block__title {
        font-size: 20px !important;
    }


    /* البنرات */

    .banner,
    .s-block--banners img,
    .s-block--fixed-banner img {
        border-radius: 14px !important;
    }


    /* قسم المميزات */

    .s-block--features,
    .s-features,
    .features-section,
    .store-features {
        margin: 28px 12px !important;

        padding: 28px 12px 22px !important;

        border-radius: 22px !important;
    }


    /* عنوان المميزات */

    .s-block--features h2,
    .s-features h2,
    .features-section h2,
    .store-features h2 {
        font-size: 23px !important;
    }


    /* عنوان كل ميزة */

    .s-block--features h3,
    .s-features h3,
    .features-section h3,
    .store-features h3 {
        font-size: 16px !important;
    }


    /* وصف كل ميزة */

    .s-block--features .feature-item p,
    .s-features .feature-item p,
    .features-section .feature-item p,
    .store-features .feature-item p {
        font-size: 14px !important;
    }
}


/* ==========================================================
   26) الشاشات الصغيرة جدًا
========================================================== */

@media (max-width: 390px) {

    .s-product-card-content-title,
    .product-entry h3,
    .product-card h3 {
        font-size: 13px !important;
    }

}
/* ==================================================
   RONI STORE — FAQ PREMIUM DESIGN
================================================== */


/* القسم كامل */

.s-block--faq,
.s-faq,
.faq-section {

    position: relative !important;

    margin: 35px 12px !important;

    padding: 35px 12px !important;

    border-radius: 28px !important;

}


/* خلفية خفيفة للقسم */

.s-block--faq::before,
.s-faq::before,
.faq-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 20%;
    right: 20%;

    height: 180px;

    background:
        radial-gradient(
            circle,
            rgba(183,61,255,.25),
            transparent 70%
        );

    filter: blur(45px);

    pointer-events: none;

}


/* عنوان الأسئلة */

.s-block--faq h2,
.s-faq h2,
.faq-section h2 {

    color: #d96cff !important;

    font-size: 28px !important;

    font-weight: 900 !important;

    text-align: center !important;

    text-shadow:
        0 0 15px rgba(217,108,255,.35);

    margin-bottom: 10px !important;

}


/* الوصف تحت العنوان */

.s-block--faq > p,
.s-faq > p,
.faq-section > p {

    color: rgba(255,255,255,.9) !important;

    text-align: center !important;

    font-size: 16px !important;

    margin-bottom: 30px !important;

}



/* كل سؤال */

.s-block--faq .faq-item,
.s-faq .faq-item,
.faq-section .faq-item {


    background:
        linear-gradient(
            145deg,
            rgba(145,0,190,.95),
            rgba(90,0,120,.95)
        ) !important;


    border-radius: 20px !important;


    border:
        1px solid rgba(220,120,255,.25) !important;


    margin-bottom: 18px !important;


    padding: 22px 20px !important;


    box-shadow:

        0 10px 25px rgba(0,0,0,.25),

        0 0 18px rgba(183,61,255,.18) !important;


    transition: .3s ease !important;

}



/* السؤال */

.s-block--faq .faq-item button,
.s-faq .faq-item button,
.faq-section .faq-item button {


    color: white !important;


    font-size: 17px !important;


    font-weight: 800 !important;


    line-height: 1.6 !important;


}



/* دائرة + */

.s-block--faq .faq-item button::before,
.s-faq .faq-item button::before,
.faq-section .faq-item button::before {


    background:

        rgba(40,0,55,.85) !important;


    border-radius: 50% !important;


    box-shadow:

        0 0 15px rgba(217,108,255,.35);


}



/* عند فتح السؤال */

.s-block--faq .faq-item.active,
.s-faq .faq-item.active,
.faq-section .faq-item.active {


    background:

        linear-gradient(
            145deg,
            #a52bdb,
            #620080
        ) !important;


}



/* الإجابة */

.s-block--faq .faq-item p,
.s-faq .faq-item p,
.faq-section .faq-item p {


    color:

        rgba(255,255,255,.92) !important;


    font-size:

        15px !important;


    line-height:

        1.8 !important;


}



/* الجوال */

@media(max-width:768px){


    .s-block--faq,
    .s-faq,
    .faq-section {

        padding: 25px 8px !important;

    }


    .s-block--faq h2,
    .s-faq h2,
    .faq-section h2 {

        font-size:24px !important;

    }


    .s-block--faq .faq-item,
    .s-faq .faq-item,
    .faq-section .faq-item {

        padding:18px 15px !important;

        border-radius:18px !important;

    }


    .s-block--faq .faq-item button,
    .s-faq .faq-item button,
    .faq-section .faq-item button {

        font-size:15px !important;

    }


}
/* ==========================================================
   RONI STORE — PREMIUM BANNER GLOW
   إضاءة فاخرة خلف البنرات
========================================================== */


/* حاوية البنرات */
.s-block--banners,
.s-block--fixed-banner,
.banner {
    position: relative !important;
    overflow: visible !important;
}


/* الإضاءة خلف البنر */
.s-block--banners::before,
.s-block--fixed-banner::before,
.banner::before {

    content: "" !important;

    position: absolute !important;

    top: 15%;
    right: 8%;
    left: 8%;
    bottom: -10%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(183,61,255,0.55),
            rgba(143,24,181,0.30) 35%,
            transparent 75%
        );

    filter: blur(45px);

    z-index: -1;

    opacity: 0.9;

}


/* شكل البنر نفسه */
.s-block--banners img,
.s-block--fixed-banner img,
.banner img {

    border-radius: 22px !important;

    position: relative;

    box-shadow:

        0 15px 40px rgba(0,0,0,0.25),

        0 0 25px rgba(183,61,255,0.35),

        0 0 70px rgba(143,24,181,0.25) !important;


    transition:
        transform .35s ease,
        box-shadow .35s ease !important;

}


/* حركة بسيطة للكمبيوتر */
@media (hover:hover){

.s-block--banners img:hover,
.s-block--fixed-banner img:hover,
.banner img:hover{

    transform: translateY(-5px) scale(1.015);

    box-shadow:

        0 20px 50px rgba(0,0,0,0.30),

        0 0 35px rgba(183,61,255,0.55),

        0 0 90px rgba(143,24,181,0.35) !important;

}

}


/* خط إضاءة أعلى البنر */
.s-block--banners::after,
.s-block--fixed-banner::after,
.banner::after {

    content:"";

    position:absolute;

    top:-2px;

    left:15%;

    right:15%;

    height:2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #d96cff,
        transparent
    );

    filter:blur(.3px);

    box-shadow:
    0 0 15px #d96cff;

}
/* RONI PREMIUM SAFE EFFECT */


/* البنر فقط */
.s-block--banners,
.s-block--fixed-banner {
    position: relative !important;
    z-index: 1 !important;
}


/* إضاءة خلف البنر */
.s-block--banners:before,
.s-block--fixed-banner:before {

    content: "";

    position: absolute;

    inset: 15px 10px -25px;

    background:
    radial-gradient(
        ellipse,
        rgba(183,61,255,.45),
        transparent 70%
    );

    filter: blur(35px);

    z-index: -1;

}


/* منع تغطية الصور */
.s-block--banners img,
.s-block--fixed-banner img {

    position: relative !important;

    z-index: 2 !important;

    border-radius:20px !important;

    box-shadow:
    0 10px 35px rgba(0,0,0,.25),
    0 0 25px rgba(183,61,255,.35) !important;

}
/* ==================================================
   RONI STORE - PREMIUM CUSTOMER REVIEWS
   Twilight Safe Version
================================================== */


/* قسم آراء العملاء */
.s-block--testimonials,
.s-block--reviews {

    position: relative !important;

    padding-top: 30px !important;

}


/* خلفية إضاءة للقسم */

.s-block--testimonials::before,
.s-block--reviews::before {

    content:"";

    position:absolute;

    width:300px;
    height:220px;

    top:0;
    left:50%;

    transform:translateX(-50%);

    background:
    radial-gradient(
        circle,
        rgba(183,61,255,.35),
        transparent 70%
    );

    filter:blur(45px);

    z-index:0;

}


/* بطاقة التقييم */

.s-block--testimonials .swiper-slide,
.s-block--reviews .swiper-slide {

    background:
    linear-gradient(
        145deg,
        rgba(143,24,181,.65),
        rgba(38,0,46,.85)
    ) !important;


    border-radius:26px !important;


    border:
    1px solid rgba(217,108,255,.35) !important;


    box-shadow:

    0 15px 35px rgba(0,0,0,.35),

    0 0 35px rgba(183,61,255,.25) !important;


    padding:30px 22px !important;

}


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

.s-block--testimonials img,
.s-block--reviews img {

    border-radius:50% !important;

    border:4px solid #d96cff !important;


    box-shadow:

    0 0 20px rgba(217,108,255,.7) !important;

}


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

.s-block--testimonials h3,
.s-block--reviews h3 {

    color:#fff !important;

    font-size:22px !important;

    font-weight:900 !important;

}


/* المدينة */

.s-block--testimonials span,
.s-block--reviews span {

    color:
    rgba(255,255,255,.75) !important;

}


/* النجوم */

.s-block--testimonials .stars,
.s-block--reviews .stars {

    color:#FFD700 !important;

    filter:
    drop-shadow(0 0 8px #ffd700);

}


/* نص العميل */

.s-block--testimonials p,
.s-block--reviews p {

    color:#fff !important;

    font-size:16px !important;

    font-weight:600 !important;

    line-height:1.8 !important;

}


/* اقتباس كبير */

.s-block--testimonials .swiper-slide::before,
.s-block--reviews .swiper-slide::before {

    content:"“";

    position:absolute;

    top:10px;

    left:20px;

    font-size:90px;

    color:
    rgba(255,255,255,.12);

    font-weight:900;

}