/* ============================================================
   MCARE.STORE — PREMIUM SALLA THEME
   Full CSS Enhancement
   Safe for Salla Sliders / Swiper
   ============================================================ */


/* ============================================================
   01 — DESIGN SYSTEM
   ============================================================ */

:root{
    --mc-primary:#171717;
    --mc-primary-hover:#000000;

    --mc-accent:#b59663;
    --mc-accent-soft:#f5efe5;

    --mc-bg:#ffffff;
    --mc-surface:#ffffff;
    --mc-soft:#f8f7f5;
    --mc-soft-2:#f3f1ed;

    --mc-text:#191919;
    --mc-muted:#747474;

    --mc-border:#ece9e4;
    --mc-border-dark:#dedad3;

    --mc-radius-sm:10px;
    --mc-radius-md:16px;
    --mc-radius-lg:22px;

    --mc-shadow-sm:
        0 3px 14px rgba(0,0,0,.035);

    --mc-shadow-md:
        0 10px 35px rgba(0,0,0,.065);

    --mc-shadow-lg:
        0 18px 55px rgba(0,0,0,.09);

    --mc-transition:
        .28s cubic-bezier(.4,0,.2,1);
}


/* ============================================================
   02 — GLOBAL RESET
   ============================================================ */

html{
    background:#fff !important;
    scroll-behavior:smooth;
}

body{
    background:#fff !important;
    color:var(--mc-text) !important;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    overflow-x:hidden;
}


/* لا نلمس نظام Swiper */
.swiper,
.swiper-wrapper,
.swiper-slide,
.s-slider-container,
.s-slider-block,
salla-slider{
    animation:none !important;
}


/* مهم:
   لا نضع transform على swiper-slide نهائياً
*/

.swiper-slide{
    transform:none;
}


/* ============================================================
   03 — BACKGROUND
   ============================================================ */

#app,
.app,
main,
.main-content,
.page-wrapper,
.home,
.home-page{
    background:#fff !important;
}


/* ============================================================
   04 — MAIN CONTAINERS
   ============================================================ */

.container{
    width:100%;
}

@media(min-width:1280px){

    .container{
        max-width:1380px !important;
    }

}


/* ============================================================
   05 — TOP NAV / HEADER
   ============================================================ */

header,
.site-header,
.store-header{
    background:rgba(255,255,255,.97) !important;
}


/* الهيدر الرئيسي */

header{
    position:relative;
    z-index:50;

    border-bottom:
        1px solid rgba(0,0,0,.055);

    box-shadow:
        0 3px 20px rgba(0,0,0,.025);
}


/* ============================================================
   06 — NAVIGATION
   ============================================================ */

.main-nav-container,
.main-menu,
.navbar{
    background:#fff !important;
}


/* روابط القائمة */

.main-menu a,
.navbar a,
header nav a{

    position:relative;

    font-weight:600;

    transition:
        color var(--mc-transition);
}


/* خط صغير أسفل الرابط */

@media(hover:hover){

    header nav a::after{

        content:"";

        position:absolute;

        right:50%;
        bottom:-5px;

        width:0;
        height:2px;

        background:var(--mc-accent);

        border-radius:20px;

        transform:translateX(50%);

        transition:
            width var(--mc-transition);
    }


    header nav a:hover::after{
        width:55%;
    }

}


/* ============================================================
   07 — SEARCH
   ============================================================ */

salla-search,
.search-bar,
.header-search{
    position:relative;
}


salla-search input,
.search-bar input,
.header-search input{

    background:#f7f7f7 !important;

    border:
        1px solid #ededed !important;

    border-radius:
        14px !important;

    min-height:46px;

    padding-inline:
        18px !important;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.02);

    transition:
        border-color var(--mc-transition),
        background var(--mc-transition),
        box-shadow var(--mc-transition);
}


salla-search input:focus,
.search-bar input:focus,
.header-search input:focus{

    background:#fff !important;

    border-color:
        #d7d0c5 !important;

    box-shadow:
        0 0 0 4px rgba(181,150,99,.08) !important;

    outline:none !important;
}


/* ============================================================
   08 — HERO / MAIN BANNERS
   ============================================================ */

.banner-entry,
.main-slider,
.hero-slider{

    position:relative;

    overflow:hidden;

    border-radius:
        var(--mc-radius-lg);
}


/* صور البنر */

.banner-entry img,
.main-slider img,
.hero-slider img{

    display:block;

    width:100%;

    border-radius:
        var(--mc-radius-lg);
}


/* لا نستخدم transform هنا
   حتى لا نؤثر على slider
*/


/* ============================================================
   09 — SECTIONS
   ============================================================ */

main section{

    position:relative;

    padding-top:
        18px;

    padding-bottom:
        18px;
}


/* فصل بصري بسيط */

main section + section{

    margin-top:
        8px;
}


/* ============================================================
   10 — SECTION HEADERS
   ============================================================ */

.s-slider-block__title,
.slider-block__title,
.section-title,
section h2{

    color:
        var(--mc-text) !important;

    font-weight:
        800 !important;

    line-height:
        1.4;

    position:
        relative;
}


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

.s-slider-block__title::before,
.slider-block__title::before,
.section-title::before{

    content:"";

    display:inline-block;

    width:4px;
    height:22px;

    margin-left:9px;

    vertical-align:middle;

    border-radius:20px;

    background:
        var(--mc-accent);
}


/* ============================================================
   11 — CATEGORY CARDS
   ============================================================ */

.category-entry,
.category-card{

    background:#fff;

    border:
        1px solid var(--mc-border);

    border-radius:
        var(--mc-radius-md);

    overflow:hidden;

    transition:
        border-color var(--mc-transition),
        box-shadow var(--mc-transition);
}


@media(hover:hover){

    .category-entry:hover,
    .category-card:hover{

        border-color:
            #ddd7cd;

        box-shadow:
            var(--mc-shadow-md);
    }

}


/* صور التصنيفات */

.category-entry img,
.category-card img{

    transition:
        opacity var(--mc-transition);

}


@media(hover:hover){

    .category-entry:hover img,
    .category-card:hover img{

        opacity:.94;
    }

}


/* ============================================================
   12 — PRODUCT CARD
   ============================================================ */

/*
   مهم جداً:
   التصميم يتم على الكارت الداخلي فقط.
   لا يوجد أي transform على swiper-slide
*/


.s-product-card-entry{

    background:
        #fff !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        17px !important;

    overflow:
        hidden !important;

    box-shadow:
        var(--mc-shadow-sm) !important;

    height:
        100%;

    transition:
        border-color var(--mc-transition),
        box-shadow var(--mc-transition) !important;
}


/* Hover آمن */

@media(hover:hover){

    .s-product-card-entry:hover{

        border-color:
            #ddd8cf !important;

        box-shadow:
            0 12px 34px rgba(0,0,0,.075) !important;
    }

}


/* ============================================================
   13 — PRODUCT IMAGE
   ============================================================ */

.s-product-card-image{

    background:
        #fafafa !important;

    overflow:
        hidden !important;

    position:
        relative;
}


/* الصورة نفسها */

.s-product-card-image img{

    object-fit:
        contain !important;

    transition:
        opacity var(--mc-transition) !important;
}


@media(hover:hover){

    .s-product-card-entry:hover
    .s-product-card-image img{

        opacity:.94;
    }

}


/* ============================================================
   14 — PRODUCT CONTENT
   ============================================================ */

.s-product-card-content{

    padding:
        14px !important;
}


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

.s-product-card-content-title,
.s-product-card-content-title a{

    color:
        var(--mc-text) !important;

    font-weight:
        650 !important;

    line-height:
        1.65 !important;

    font-size:
        14px;
}


/* ============================================================
   15 — PRODUCT PRICE
   ============================================================ */

.s-product-card-price,
.s-product-card-sale-price{

    color:
        var(--mc-primary) !important;

    font-weight:
        800 !important;
}


/* السعر السابق */

.s-product-card-regular-price{

    color:
        #a0a0a0 !important;

    font-weight:
        400 !important;
}


/* ============================================================
   16 — PRODUCT BUTTON
   ============================================================ */

.s-product-card-content-footer{

    padding-top:
        5px;
}


.s-product-card-content-footer button,
.s-product-card-content-footer .s-button-element,
salla-add-product-button button{

    min-height:
        43px;

    border-radius:
        11px !important;

    font-weight:
        700 !important;

    transition:
        opacity var(--mc-transition),
        box-shadow var(--mc-transition) !important;
}


@media(hover:hover){

    .s-product-card-content-footer button:hover,
    salla-add-product-button button:hover{

        opacity:
            .9;

        box-shadow:
            0 7px 20px rgba(0,0,0,.10);
    }

}


/* ============================================================
   17 — SALE BADGES
   ============================================================ */

.s-product-card-promotion-title,
.s-product-card-sale-badge{

    border-radius:
        8px !important;

    font-weight:
        700 !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.07);
}


/* ============================================================
   18 — SLIDER ARROWS
   ============================================================ */

salla-slider .s-slider-prev,
salla-slider .s-slider-next,
.swiper-button-next,
.swiper-button-prev{

    width:
        40px !important;

    height:
        40px !important;

    border-radius:
        50% !important;

    background:
        rgba(255,255,255,.95) !important;

    border:
        1px solid #eee !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.08) !important;

    transition:
        box-shadow var(--mc-transition),
        background var(--mc-transition) !important;
}


@media(hover:hover){

    salla-slider .s-slider-prev:hover,
    salla-slider .s-slider-next:hover{

        background:
            #fff !important;

        box-shadow:
            0 8px 22px rgba(0,0,0,.12) !important;
    }

}


/* ============================================================
   19 — STORE FEATURES
   ============================================================ */

.store-features,
.features-section{

    position:
        relative;
}


/* الكارت */

.store-features .feature,
.features-section .feature,
.feature-item{

    background:
        linear-gradient(
            145deg,
            #fff,
            #faf9f7
        );

    border:
        1px solid var(--mc-border);

    border-radius:
        17px;

    padding:
        22px 18px;

    box-shadow:
        var(--mc-shadow-sm);

    transition:
        border-color var(--mc-transition),
        box-shadow var(--mc-transition);
}


@media(hover:hover){

    .store-features .feature:hover,
    .features-section .feature:hover,
    .feature-item:hover{

        border-color:
            #ddd5c9;

        box-shadow:
            var(--mc-shadow-md);
    }

}


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

.store-features svg,
.features-section svg,
.feature-item svg{

    transition:
        opacity var(--mc-transition);
}


/* ============================================================
   20 — TESTIMONIALS
   ============================================================ */

.testimonial,
.testimonial-item,
.testimonials-item{

    position:
        relative;

    background:
        #fff !important;

    border:
        1px solid var(--mc-border) !important;

    border-radius:
        18px !important;

    padding:
        22px !important;

    box-shadow:
        var(--mc-shadow-sm) !important;
}


/* Quote decorative mark */

.testimonial::before,
.testimonial-item::before{

    content:"“";

    position:absolute;

    top:5px;
    left:15px;

    font-size:52px;

    line-height:1;

    color:
        rgba(181,150,99,.18);

    font-family:
        Georgia,serif;
}


/* ============================================================
   21 — GENERAL BUTTONS
   ============================================================ */

button,
.s-button-element,
.btn{

    border-radius:
        11px;

    transition:
        opacity var(--mc-transition),
        box-shadow var(--mc-transition);
}


@media(hover:hover){

    button:hover,
    .btn:hover{

        opacity:
            .92;
    }

}


/* ============================================================
   22 — FORMS
   ============================================================ */

input,
select,
textarea{

    border-radius:
        11px !important;

    border-color:
        var(--mc-border-dark) !important;

    transition:
        border-color var(--mc-transition),
        box-shadow var(--mc-transition);
}


input:focus,
select:focus,
textarea:focus{

    border-color:
        #c7b99f !important;

    box-shadow:
        0 0 0 4px rgba(181,150,99,.09) !important;

    outline:
        none !important;
}


/* ============================================================
   23 — PRODUCT PAGE
   ============================================================ */

.product-details,
.product-single{

    background:
        #fff !important;
}


/* صور المنتج */

.product-main-image,
.product-entry__image{

    background:
        #fafafa;

    border:
        1px solid var(--mc-border);

    border-radius:
        20px !important;

    overflow:
        hidden;
}


/* معلومات المنتج */

.product-details{

    border-radius:
        18px;
}


/* ============================================================
   24 — BREADCRUMBS
   ============================================================ */

.breadcrumb,
.breadcrumbs{

    color:
        var(--mc-muted);

    font-size:
        13px;
}


/* ============================================================
   25 — CART
   ============================================================ */

.cart-item,
salla-cart-summary{

    background:
        #fff;

    border:
        1px solid var(--mc-border);

    border-radius:
        15px !important;

    box-shadow:
        var(--mc-shadow-sm);
}


/* ============================================================
   26 — FOOTER
   ============================================================ */

footer,
.store-footer{

    position:
        relative;

    margin-top:
        45px;

    border-top:
        1px solid rgba(255,255,255,.08);
}


/* روابط الفوتر */

footer a,
.store-footer a{

    transition:
        opacity var(--mc-transition);
}


@media(hover:hover){

    footer a:hover,
    .store-footer a:hover{

        opacity:
            .7;
    }

}


/* ============================================================
   27 — SCROLLBAR
   ============================================================ */

@media(min-width:992px){

    ::-webkit-scrollbar{
        width:9px;
    }

    ::-webkit-scrollbar-track{
        background:#f5f5f5;
    }

    ::-webkit-scrollbar-thumb{

        background:#ccc;

        border-radius:20px;

        border:
            2px solid #f5f5f5;
    }

    ::-webkit-scrollbar-thumb:hover{
        background:#aaa;
    }

}


/* ============================================================
   28 — MOBILE
   ============================================================ */

@media(max-width:767px){

    /* المساحة الجانبية */

    .container{

        padding-left:
            12px !important;

        padding-right:
            12px !important;
    }


    /* الأقسام */

    main section{

        padding-top:
            10px;

        padding-bottom:
            10px;
    }


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

    .s-slider-block__title,
    .slider-block__title,
    .section-title,
    section h2{

        font-size:
            18px !important;
    }


    .s-slider-block__title::before,
    .slider-block__title::before,
    .section-title::before{

        height:
            18px;

        width:
            3px;

        margin-left:
            6px;
    }


    /* البنرات */

    .banner-entry,
    .main-slider,
    .hero-slider,
    .banner-entry img,
    .main-slider img,
    .hero-slider img{

        border-radius:
            13px;
    }


    /* المنتجات */

    .s-product-card-entry{

        border-radius:
            13px !important;

        box-shadow:
            0 3px 12px rgba(0,0,0,.04) !important;
    }


    .s-product-card-content{

        padding:
            10px !important;
    }


    .s-product-card-content-title,
    .s-product-card-content-title a{

        font-size:
            12.5px;

        line-height:
            1.55 !important;
    }


    /* زر المنتج */

    .s-product-card-content-footer button,
    salla-add-product-button button{

        min-height:
            39px;

        border-radius:
            9px !important;
    }


    /* الأسهم أصغر */

    salla-slider .s-slider-prev,
    salla-slider .s-slider-next{

        width:
            34px !important;

        height:
            34px !important;
    }


    /* الفوتر */

    footer,
    .store-footer{

        margin-top:
            25px;
    }

}


/* ============================================================
   29 — VERY SMALL MOBILE
   ============================================================ */

@media(max-width:390px){

    .container{

        padding-left:
            9px !important;

        padding-right:
            9px !important;
    }


    .s-product-card-content{

        padding:
            9px !important;
    }

}


/* ============================================================
   30 — ACCESSIBILITY / PERFORMANCE
   ============================================================ */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        scroll-behavior:auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}


/* ============================================================
   31 — IMPORTANT SALLA SLIDER PROTECTION
   ============================================================ */

/*
   حماية نهائية للسلايدر.

   لا نستخدم:
   transform
   translate
   animation
   position:absolute

   على wrapper أو slides.
*/


.swiper-wrapper{

    animation:
        none !important;

}


/* نترك transform الخاص بسلة/Swiper كما هو */
.swiper-wrapper[style]{

    animation:
        none !important;
}


/* المنتج الداخلي فقط هو الذي يحمل التصميم */
.swiper-slide .s-product-card-entry{

    position:
        relative;

}


/* ============================================================
   END — MCARE PREMIUM THEME
   ============================================================ */