/*==================================================
   MAYASSA MEDICAL UI
   PART 1 - HEADER
==================================================*/

/* الخلفية العامة للهيدر */
.store-header,
.main-nav-container,
header,
header.header,
.s-header {
    background: linear-gradient(90deg,#0B5FAF,#1676D2);
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

/* تثبيت الهيدر */
.store-header{
    position:sticky;
    top:0;
    z-index:9999;
}

/* جميع روابط الهيدر */
.store-header a{
    color:#fff;
    transition:.3s;
}

.store-header a:hover{
    color:#E8F4FF;
  
}

/* القائمة الرئيسية */
.store-header nav a{
    font-weight:700;
    font-size:15px;
    padding:12px 15px;
    border-radius:8px;
}

.store-header nav a:hover{
    background:rgba(255,255,255,.12);
}

/* مربع البحث */
.store-header input[type="search"],
.store-header input{

    background:#fff;

    border:none;

    border-radius:40px;

    height:46px;

    padding:0 20px;

}

/* أيقونة البحث */

.store-header button{

    border-radius:40px;

}

/* السلة والحساب */

.store-header .btn,
.store-header button{

    transition:.3s;

}

.store-header .btn:hover,
.store-header button:hover{

    transform:translateY(-2px);

}

/* الشعار */

.store-header img{

    max-height:70px;

    transition:.3s;

}

.store-header img:hover{

    transform:scale(1.05);

}

/* القائمة في الجوال */

@media(max-width:991px){

.store-header{

padding:8px 0;

}

.store-header img{

max-height:55px;

}

}
/* جعل الهيدر Flex */
.store-header .main-nav-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
}

/* وضع الشعار في المنتصف */
.store-header .navbar-brand,
.store-header .logo{
    position:absolute !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    z-index:100;
}
/* ==========================================
   MAYASSA MEDICAL - PRODUCT CARDS V1
========================================== */

/* البطاقة */
custom-salla-product-card.s-product-card-entry{
    display:block;
    background:#ffffff;
    border:1px solid #e6edf5;
    border-radius:18px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:0 8px 24px rgba(13,71,161,.08);
}

/* تأثير المرور */
custom-salla-product-card.s-product-card-entry:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(13,71,161,.16);
}

/* الصورة */
.s-product-card-image{
    background:#f8fbff;
    padding:12px;
}

.s-product-card-image img{
    border-radius:12px;
    transition:.35s;
}

custom-salla-product-card:hover .s-product-card-image img{
    transform:scale(1.05);
}

/* محتوى البطاقة */
.s-product-card-content{
    padding:16px !important;
}

/* اسم المنتج */
.s-product-card-content-title a{
    color:#1f2937;
    font-size:15px;
    font-weight:700;
    line-height:1.8;
    text-decoration:none;
}

.s-product-card-content-title a:hover{
    color:#0B5FAF;
}

/* السعر */
.s-product-card-price{
    color:#0B5FAF !important;
    font-size:22px !important;
    font-weight:800 !important;
    margin-top:10px;
}

/* زر السلة */
.s-product-card-content-footer .s-button-element{
    background:#0B5FAF !important;
    color:#fff !important;
    border:none !important;
    border-radius:10px !important;
    font-weight:700;
    transition:.3s;
}

.s-product-card-content-footer .s-button-element:hover{
    background:#084b8a !important;
}

/* المفضلة */
.s-product-card-wishlist-btn{
    border-radius:50% !important;
    backdrop-filter:blur(10px);
}
/* إطار أزرق خفيف حول بطاقات المنتجات */

custom-salla-product-card,
.s-product-card,
.s-product-card-entry{
    border:1px solid #D8EAFB !important;
    border-radius:16px !important;
    box-shadow:0 2px 8px rgba(11,95,175,.06) !important;
    transition:all .3s ease;
}

/* عند مرور الماوس */
custom-salla-product-card:hover,
.s-product-card:hover,
.s-product-card-entry:hover{
    border-color:#0B5FAF !important;
    box-shadow:0 8px 20px rgba(11,95,175,.15) !important;
    transform:translateY(-3px);
}
/*=================================================
MAYASSA UI
PART 2 - SECTION TITLES
=================================================*/

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

    position:relative;
    display:inline-block;
    color:#0B5FAF;
    font-size:32px;
    font-weight:800;
    padding-bottom:12px;
    margin-bottom:30px;

}

.s-block__title::after,
.s-block-title::after,
.section-title::after,
h2.s-block__title::after{

    content:"";
    position:absolute;
    right:0;
    bottom:0;

    width:70px;
    height:4px;

    background:#0B5FAF;

    border-radius:20px;

}
/* مسافة بين الأقسام */

.s-block{

    margin-top:55px;
    margin-bottom:55px;

}
/*====================================================
MAYASSA MEDICAL V2
CATEGORY SECTION
====================================================*/

.mayassa-categories{

max-width:1280px;

margin:70px auto;

padding:0 15px;

}

.mayassa-categories h2{

text-align:center;

font-size:34px;

font-weight:800;

color:#0B5FAF;

margin-bottom:35px;

position:relative;

}

.mayassa-categories h2:after{

content:"";

display:block;

width:70px;

height:4px;

background:#0B5FAF;

margin:15px auto 0;

border-radius:30px;

}

/* الشبكة */

.mayassa-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

}

/* البطاقة */

.mayassa-card{

background:#ffffff;

border:1px solid #DCEEFF;

border-radius:18px;

text-decoration:none;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:24px 15px;

min-height:165px;

transition:.35s;

box-shadow:0 6px 18px rgba(11,95,175,.08);

position:relative;

overflow:hidden;

}

/* الخط الأزرق أعلى البطاقة */

.mayassa-card::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:5px;

background:#0B5FAF;

}

/* الأيقونة */

.mayassa-icon{

width:70px;

height:70px;

border-radius:50%;

background:#EAF4FF;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

margin-bottom:18px;

transition:.35s;

}

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

.mayassa-title{

font-size:16px;

font-weight:700;

line-height:1.7;

text-align:center;

color:#1F2937;

}

/* Hover */

.mayassa-card:hover{

background:#0B5FAF;

transform:translateY(-6px);

box-shadow:0 18px 35px rgba(11,95,175,.22);

}

.mayassa-card:hover .mayassa-icon{

background:#fff;

transform:scale(1.08);

}

.mayassa-card:hover .mayassa-title{

color:#fff;

}

/* الجوال */

@media(max-width:768px){

.mayassa-grid{

grid-template-columns:repeat(3,1fr);

gap:10px;

}

.mayassa-card{

min-height:125px;

padding:16px 8px;

}

.mayassa-icon{

width:50px;

height:50px;

font-size:24px;

margin-bottom:10px;

}

.mayassa-title{

font-size:12px;

line-height:1.5;

}

}
/*=========================================
MAYASSA UI V2
PART 4 - CATEGORY EFFECTS
=========================================*/

/* حركة البطاقة */
.mayassa-card{
    cursor:pointer;
}

.mayassa-card::after{
    content:"←";
    position:absolute;
    left:18px;
    bottom:18px;
    color:#0B5FAF;
    font-size:18px;
    font-weight:700;
    transition:all .3s ease;
    opacity:.7;
}

.mayassa-card:hover::after{
    color:#fff;
    left:14px;
    opacity:1;
}

/* حركة دخول ناعمة */
.mayassa-card{
    animation:mayassaFade .5s ease both;
}

@keyframes mayassaFade{

from{
opacity:0;
transform:translateY(25px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* تحسين العنوان */
.mayassa-categories h2{

letter-spacing:.5px;

}

/* تحسين المسافات */
.mayassa-categories{

padding-bottom:10px;

}
/*==================================================
MAYASSA MEDICAL
PART 5 - BRANDS SECTION
==================================================*/

/* عنوان القسم */
.s-block--brands .s-block__title,
.s-block--brands h2{
    text-align:center;
}

/* بطاقات الشعارات */
.s-block--brands .swiper-slide,
.s-block--brands .brand-item,
.s-block--brands .s-brand{
    background:#fff;
    border:1px solid #DCEEFF;
    border-radius:18px;
    padding:20px;
    transition:all .35s ease;
    box-shadow:0 6px 18px rgba(11,95,175,.06);
}

/* تأثير المرور */
.s-block--brands .swiper-slide:hover,
.s-block--brands .brand-item:hover,
.s-block--brands .s-brand:hover{
    transform:translateY(-6px);
    border-color:#0B5FAF;
    box-shadow:0 14px 35px rgba(11,95,175,.18);
}

/* الشعار */
.s-block--brands img{
    max-height:70px;
    width:auto;
    object-fit:contain;
    margin:auto;
    transition:.35s;
}

.s-block--brands img:hover{
    transform:scale(1.08);
}

/* الجوال */
@media(max-width:768px){

.s-block--brands .swiper-slide,
.s-block--brands .brand-item,
.s-block--brands .s-brand{

padding:14px;
border-radius:14px;

}

.s-block--brands img{

max-height:55px;

}

}
/*==================================================
MAYASSA MEDICAL
PART 6 - FEATURES BAR
==================================================*/

.mayassa-features{

max-width:1280px;

margin:35px auto;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

padding:0 15px;

}

.mayassa-feature{

background:#fff;

border:1px solid #DCEEFF;

border-radius:18px;

padding:18px;

display:flex;

align-items:center;

gap:15px;

transition:.35s;

box-shadow:0 5px 18px rgba(11,95,175,.06);

}

.mayassa-feature:hover{

transform:translateY(-5px);

border-color:#0B5FAF;

box-shadow:0 14px 30px rgba(11,95,175,.15);

}

.mayassa-feature-icon{

width:55px;

height:55px;

border-radius:50%;

background:#EAF4FF;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

flex-shrink:0;

}

.mayassa-feature-title{

font-size:15px;

font-weight:700;

color:#1F2937;

}

.mayassa-feature-text{

font-size:13px;

color:#6B7280;

margin-top:3px;

}

@media(max-width:768px){

.mayassa-features{

grid-template-columns:repeat(2,1fr);

gap:10px;

}

.mayassa-feature{

padding:12px;

}

.mayassa-feature-icon{

width:42px;

height:42px;

font-size:20px;

}

.mayassa-feature-title{

font-size:13px;

}

.mayassa-feature-text{

font-size:11px;

}

}
/*==================================================
MAYASSA MEDICAL V3
PART 7 - TRUST BAR
==================================================*/

.mayassa-trust{

background:linear-gradient(90deg,#0B5FAF,#1676D2);

padding:18px 0;

margin:25px 0 40px;

border-radius:18px;

}

.mayassa-trust-container{

max-width:1280px;

margin:auto;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

padding:0 20px;

}

.mayassa-trust-item{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

color:#fff;

}

.mayassa-trust-icon{

width:52px;

height:52px;

border-radius:50%;

background:rgba(255,255,255,.18);

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

}

.mayassa-trust-title{

font-size:15px;

font-weight:700;

}

.mayassa-trust-desc{

font-size:12px;

opacity:.85;

margin-top:3px;

}

@media(max-width:768px){

.mayassa-trust-container{

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.mayassa-trust{

border-radius:14px;

}

}
/*==================================================
 MAYASSA V3
 HERO SECTION
==================================================*/

/* تقليل الفراغ فوق وأسفل البانر */
.s-block--photos-slider{
    margin-top:20px !important;
    margin-bottom:25px !important;
}

/* البانر */
.s-block--photos-slider .swiper,
.s-block--photos-slider .swiper-wrapper,
.s-block--photos-slider .swiper-slide{

    border-radius:24px;

    overflow:hidden;

}

/* الصور */

.s-block--photos-slider img{

    border-radius:24px;

}

/* ظل خفيف */

.s-block--photos-slider{

    filter:drop-shadow(0 12px 28px rgba(0,0,0,.08));

}

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

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#C7DDF6;

    opacity:1;

}

.swiper-pagination-bullet-active{

    background:#0B5FAF;

    width:30px;

    border-radius:20px;

}

@media(max-width:768px){

.s-block--photos-slider{

margin-top:10px !important;

}

.s-block--photos-slider img{

border-radius:16px;

}

}
/* إخفاء قسم المميزات الأصلي في ثيم سلة */
.s-block--features,
.s-block-features,
.features-section,
section[class*="features"]{
    display:none !important;
}
/*==================================================
MAYASSA V3
FEATURE CARDS
==================================================*/

.mayassa-features{
    display:grid !important;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    background:transparent !important;
    padding:0 !important;
    margin:35px auto !important;
    max-width:1280px;
}

.mayassa-feature{
    background:#ffffff !important;
    border:1px solid #D8EAFB;
    border-radius:18px;
    padding:22px 18px;
    box-shadow:0 8px 24px rgba(11,95,175,.08);
    transition:.3s;
}

.mayassa-feature:hover{
    transform:translateY(-5px);
    border-color:#0B5FAF;
    box-shadow:0 15px 30px rgba(11,95,175,.18);
}

.mayassa-feature-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#EDF6FF;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 15px;
    font-size:28px;
}

.mayassa-feature-title{
    text-align:center;
    font-size:17px;
    font-weight:700;
    color:#0B5FAF;
}

.mayassa-feature-text{
    text-align:center;
    font-size:13px;
    color:#666;
    margin-top:6px;
}

@media(max-width:768px){

.mayassa-features{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.mayassa-feature{
padding:16px;
}

}
/*==================================================
MAYASSA MEDICAL V3
PART 8 - PREMIUM CATEGORIES
==================================================*/

.mayassa-categories{
    max-width:1280px;
    margin:55px auto;
    padding:0 15px;
}

.mayassa-categories h2{
    text-align:center;
    color:#0B5FAF;
    font-size:34px;
    font-weight:800;
    margin-bottom:35px;
}

.mayassa-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.mayassa-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:180px;

    background:#fff;
    border:1px solid #DCEEFF;
    border-radius:22px;

    text-decoration:none;
    overflow:hidden;

    transition:all .35s ease;
    box-shadow:0 8px 22px rgba(11,95,175,.08);
}

.mayassa-card:hover{
    transform:translateY(-6px);
    border-color:#0B5FAF;
    box-shadow:0 18px 38px rgba(11,95,175,.18);
}

.mayassa-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:#0B5FAF;

}

.mayassa-icon{

    width:78px;

    height:78px;

    border-radius:50%;

    background:#EDF6FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    margin-bottom:18px;

    transition:.35s;

}

.mayassa-card:hover .mayassa-icon{

    transform:scale(1.12);

    background:#0B5FAF;

    color:#fff;

}

.mayassa-title{

    font-size:17px;

    font-weight:700;

    color:#233142;

    text-align:center;

    padding:0 14px;

    line-height:1.8;

}

@media(max-width:768px){

.mayassa-grid{

grid-template-columns:repeat(2,1fr);

gap:14px;

}

.mayassa-card{

min-height:145px;

border-radius:16px;

}

.mayassa-icon{

width:58px;
height:58px;
font-size:28px;

}

.mayassa-title{

font-size:13px;

}

}
/*==================================================
MAYASSA MEDICAL
PREMIUM FOOTER
==================================================*/

footer,
.store-footer,
.s-footer{

    background:linear-gradient(135deg,#0B5FAF,#084B8A);

    color:#fff;

    margin-top:80px;

    position:relative;

    overflow:hidden;

}

footer::before,
.store-footer::before,
.s-footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(255,255,255,.08),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(255,255,255,.05),
    transparent 30%);

    pointer-events:none;

}

footer .container,
.store-footer .container,
.s-footer .container{

    position:relative;

    z-index:2;

}

footer h3,
footer h4,
.store-footer h3,
.store-footer h4,
.s-footer h3,
.s-footer h4{

    color:#fff;

    font-weight:800;

    margin-bottom:18px;

}

footer a,
.store-footer a,
.s-footer a{

    color:#EAF5FF;

    transition:.3s;

}

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

    color:#fff;

    padding-right:6px;

}

footer .social a,
.s-footer .social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.3s;

}

footer .social a:hover,
.s-footer .social a:hover{

    background:#fff;

    color:#0B5FAF;

    transform:translateY(-3px);

}

footer hr,
.store-footer hr,
.s-footer hr{

    border-color:rgba(255,255,255,.15);

}
/*==================================================
MAYASSA MEDICAL
FOOTER V2
==================================================*/

/* الأعمدة */
footer .row > div,
.store-footer .row > div,
.s-footer .row > div{

    padding:15px 25px;

}

/* القوائم */

footer ul,
.store-footer ul,
.s-footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

footer ul li,
.store-footer ul li,
.s-footer ul li{

    margin-bottom:12px;

}

/* الروابط */

footer ul li a,
.store-footer ul li a,
.s-footer ul li a{

    display:inline-block;

    position:relative;

}

footer ul li a::before,
.store-footer ul li a::before,
.s-footer ul li a::before{

    content:"›";

    color:#9ED4FF;

    margin-left:8px;

    transition:.3s;

}

footer ul li a:hover::before{

    margin-left:12px;

}

/* معلومات التواصل */

footer .contact-item,
.store-footer .contact-item,
.s-footer .contact-item{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    color:#EAF5FF;

}

/* الحقوق */

footer .copyright,
.store-footer .copyright,
.s-footer .copyright{

    margin-top:35px;

    padding-top:20px;

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

    text-align:center;

    color:#D9ECFF;

    font-size:14px;

}
/*==================================================
MAYASSA MEDICAL
FOOTER FINAL
==================================================*/

/* عنوان كل قسم */
footer h3,
footer h4,
.store-footer h3,
.store-footer h4,
.s-footer h3,
.s-footer h4{

    position:relative;
    padding-bottom:12px;
    margin-bottom:20px;

}

footer h3::after,
footer h4::after,
.store-footer h3::after,
.store-footer h4::after,
.s-footer h3::after,
.s-footer h4::after{

    content:"";
    position:absolute;
    bottom:0;
    right:0;

    width:45px;
    height:3px;

    background:#7ED3FF;
    border-radius:20px;

}

/* مسافة بين الأعمدة */

footer .row,
.store-footer .row,
.s-footer .row{

    row-gap:35px;

}

/* الروابط */

footer a,
.store-footer a,
.s-footer a{

    opacity:.92;

}

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

    opacity:1;

}

/* أيقونات التواصل */

footer .social a,
.store-footer .social a,
.s-footer .social a{

    border:1px solid rgba(255,255,255,.15);

}

/* وسائل الدفع */

footer img,
.store-footer img,
.s-footer img{

    transition:.35s;

}

footer img:hover,
.store-footer img:hover,
.s-footer img:hover{

    transform:scale(1.08);

}

/* نهاية الفوتر */

footer .copyright,
.store-footer .copyright,
.s-footer .copyright{

    font-weight:500;
    letter-spacing:.3px;

}

/* الجوال */

@media(max-width:768px){

footer,
.store-footer,
.s-footer{

text-align:center;

}

footer h3::after,
footer h4::after,
.store-footer h3::after,
.store-footer h4::after,
.s-footer h3::after,
.s-footer h4::after{

right:50%;
transform:translateX(50%);

}

footer .social,
.store-footer .social,
.s-footer .social{

justify-content:center;

}

}
/* MAYASSA - FORCE FOOTER COLOR */

footer,
.s-footer,
.store-footer,
footer *,
.s-footer *,
.store-footer *{
    background: transparent;
}

footer,
.s-footer,
.store-footer{
    background: linear-gradient(135deg,#0B5FAF,#084B8A) !important;
}
/*==================================================
MAYASSA FOOTER FIX
==================================================*/

/* جميع النصوص باللون الأبيض */
footer,
footer *,
.s-footer,
.s-footer *,
.store-footer,
.store-footer *{
    color:#ffffff !important;
}

/* الحقوق */
footer .copyright,
footer .copyright *,
.s-footer .copyright,
.s-footer .copyright *,
.store-footer .copyright,
.store-footer .copyright *{
    color:#ffffff !important;
}

/* أيقونات التواصل داخل مربعات بيضاء */
footer .social a,
.s-footer .social a,
.store-footer .social a{

    width:46px;
    height:46px;

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

    background:#ffffff !important;

    border-radius:12px;

    color:#0B5FAF !important;

    border:none;

    transition:.3s;
}

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

    background:#EAF5FF !important;

    transform:translateY(-3px);

}

/* أيقونات التواصل نفسها */
footer .social a svg,
footer .social a i,
.s-footer .social a svg,
.s-footer .social a i,
.store-footer .social a svg,
.store-footer .social a i{

    color:#0B5FAF !important;
    fill:#0B5FAF !important;

}

/* وسائل الدفع */
footer img,
.s-footer img,
.store-footer img{

    background:#fff;
    border-radius:10px;
    padding:6px;

}
/*==================================================
MAYASSA SOCIAL ICONS
==================================================*/

.social {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.social__item {
    margin: 0 !important;
}

.social__link {

    width: 48px !important;
    height: 48px !important;

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

    background: #fff !important;

    border-radius: 50% !important;

    transition: .3s;

    box-shadow: 0 6px 18px rgba(0,0,0,.12);

}

.social__link svg{

    width:22px !important;
    height:22px !important;

    fill:#0B5FAF !important;

    transition:.3s;

}

.social__link:hover{

    background:#0B5FAF !important;

    transform:translateY(-4px);

}

.social__link:hover svg{

    fill:#fff !important;

}