/🎨* متغيرات الألوان والخطوط/
:root {
    --logo: url('https://raw.githubusercontent.com/d7mi6092-stack/MaySvgLogo/refs/heads/main/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84%20%D8%A7%D9%84%D8%A5%D8%B1%D8%B4%D8%A7%D8%AF%D9%8A%20(1).svg');
    
    /🎭 ألوان فاخرة - الوضع الفاتح /
    --color: #0A4DA2; /* أزرق كحلي فاخر */
    --color-2: #F8F9FA; /* أبيض عاجي */
    --color-primary: #0A4DA2; 
    --color-primary-2: #F8F9FA; 
    --body-color: #FFFFFF; 

    /💎 ألوان الخلفيات /
    --bg-primary: #FFFFFF; 
    --bg-secondary: #F8F9FA; 
    --bg-tertiary: #E9ECEF; 
    --background-search-input: #E9ECEF80;

    /✨ ألوان التمييز /
    --accent: #0A4DA2;
    --accent-hover: #083A7A;
    --accent-light: #2D68C4;
    --accent-reverse: #F8F9FA;
    
    /📝 ألوان النصوص /
    --text-primary: #1A1F36; /* رمادي داكن فاخر */
    --text-secondary: #6C757D; /* رمادي متوسط */
    --link: #2D68C4; 
    --price: #DC3545; /* أحمر أنيق */
          
    /🌙 الظلال /   
    --shadow: 0 2px 8px rgba(10, 77, 162, 0.08);
    --shadow-hover: 0 4px 16px rgba(10, 77, 162, 0.16);
    
    /🔲 البوردر /
    --border: #DEE2E6; 
    --border-secondary: #0A4DA2; 
    --border-radius: 12px; 
    --border-icon: #E9ECEF; 
    --border-icon-radius: 50%;  
    
    --title-size: 1.1rem;
    --display-all-size: 0.85rem;
    --font-weight-title: 700;
    --font-weight-display-all: 500;
}

/🌙 في الوضع الداكن الفاخر /
body.dark-mode {
    /🎭 ألوان فاخرة - الوضع الداكن /
    --color: #2D68C4; 
    --color-2: #0F172A; 
    --color-primary: #E2E8F0; 
    --color-primary-2: #0A4DA2; 
    --body-color: #0F172A; /* خلفية داكنة فاخرة */

    /💎 ألوان الخلفيات /
    --bg-primary: #1E293B; 
    --bg-secondary: #334155; 
    --bg-tertiary: #475569; 
    --background-search-input: #47556980;

    /✨ ألوان التمييز /
    --accent: #60A5FA;
    --accent-hover: #3B82F6;
    --accent-light: #93C5FD;
    --accent-reverse: #F1F5F9;
    
    /📝 ألوان النصوص /    
    --text-primary: #F1F5F9; 
    --text-secondary: #CBD5E1; 
    --link: #60A5FA; 
    --price: #F87171; /* أحمر فاتح أنيق */
    
    /🌙 الظلال /
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 16px rgba(96, 165, 250, 0.3);
    
    /🔲 البوردر/
    --border: #475569; 
    --border-secondary: #60A5FA;
}




/* ✳️✳️✳️✳️ شاشة تحميل الموقع ✳️✳️✳️✳️ */ 
.loader-init {
    background: var(--color);
    transition: opacity 0.75s, visibility 0.75s;
}
/* اخفاء شاشة تحميل الموقع */
  .loader-init--hidden {
    opacity: 0;
    visibility: hidden;
}
/*ايقونة تحميل الموقع */
  .loader-init::after {
    content: "";
    width: 36px;
    height: 36px;
    border: 3px solid var(--color);
    border-top-color: var(--color-2);
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
}

  @keyframes loading {
      from {transform: rotate(0turn);}
      to {transform: rotate(1turn);}
}




/*️🌎🌎🌎🌎تنسيقات الجسم العامة️🌎🌎🌎🌎*/
/*خلفية الجسم الرئيسية*/
body {
    background-color: var(--body-color);
    color: var(--text-primary);
}

/*طبقة شفافة في الوضع الداكن*/
body.dark-mode::before {
    opacity: 0.95;
}




/*✳️✳️✳️✳️تنسيقات الشريط العلوي✳️✳️✳️✳️*/
/*حاوية الشريط العلوي*/
.top-navbar {
    background-color: var(--body-color)
}

/*روابط الشريط العلوي*/
a.s-menu-topnav-item.topnav-link-item.right-side {
    color: var( --link);
    border-color: var(--link);
}

/* شريط البحث والعملة واللغة*/
.top-navbar .s-search-input, 
.top-navbar .btn--rounded-gray {
    background-color: var(--background-search-input);
    color: var(--text-primary) !important;
    opacity: 0.8;
    border-radius:var(--border-radius) !important;
}

/*هوفر شريط البحث والعملة واللغة*/
.top-navbar .s-search-input:hover,
.top-navbar .btn--rounded-gray:hover {
    background-color: var(--bg-tertiary);
    opacity: 1;
}

/*اعدادات ايقونة البحث */
 .s-search-icon-wrap {
    z-index: 5 !important;
}

/* أيقونة البحث والنص التوضيحي*/
 .s-search-input::placeholder,
 .s-search-icon-wrap svg path {
    opacity: 0.5;
    color: var(--text-primary) !important;      
    fill: var(--text-primary) !important;
}

 /* أيقونة تحميل النتائج */   
.s-search-spinner-loader {
    opacity: 0.5;
    border-color: var(--color) !important;
    border-right-color: var(--color-2) !important;
}

/*حاوية نتائج البحث في الشريط العلوي*/
.s-search-results,
.s-search-no-results-placeholder {
    border-radius:var(--border-radius);
    margin-top: min(1rem, 3px);  
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/*منتجات نتائج البحث في الشريط العلوي*/
.s-search-product {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border); 
    border-radius: 0;
    margin-right: 5px;
}

.s-search-product:hover {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border); 
    border-radius:var(--border-radius);
    margin-right: 0px;

}

/*عنوان منتجات البحث في الشريط العلوي*/
.s-search-product-title {
    color: var(--text-primary);
}
/*سعر منتجات البحث في الشريط العلوي*/
.s-search-product-price {
    color:var(--price);
}
/*سعر قبل التخفيض منتجات البحث في الشريط العلوي*/
.s-search-product-regular-price{
    color:var(--text-secondary);
    opacity: 0.8;
}




/*🏠🏠🏠🏠 تنسيقات الهيدر🏠🏠🏠🏠*/
/*الحاوية الرئيسية للهيدر*/
.inner.bg-inherit {
    background-color:var(--bg-primary);  
}

/*  أيقونة القائمة(الخطوط الثلاثة) واجمالي السعر */
.mburger .sicon-menu, 
.s-cart-summary-total {
    color:var(--color-primary) !important;
}

/*قوائم الهيدر*/
.mm-spn--main  {
    background-color: var(--bg-primary)  !important;
    color: var(--text-primary) !important;
}
.mm-spn.mm-spn--navbar ul, 
.sub-menu {
    background-color: var(--bg-secondary)  !important;
    color: var(--text-primary) !important;
    border-radius:var(--border-radius);
}


/*تأثير الهوفر على قوائم الهيدر   */
.mm-.mm-spn span :hover , 
 .main-menu ul :hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-radius:var(--border-radius) !important;

}

/*شعار المتجر*/
.navbar-brand {
    display: inline-block;
    width: 55px;
    height: 55px;
    background-color: var(--logo-color);
    mask: var(--logo) no-repeat center;
    mask-size: contain;
    /*اضافة ماسك لتغيير اللون في الوضع الداكن */
    -webkit-mask: var(--logo) no-repeat center;
    -webkit-mask-size: contain;
    transition: background-color 0.3s ease;
}
 
/*اخفاء شعار المتجر الاساسي*/
.navbar-brand img {
    display: none;
}
    
/*ايقونات الهيدر*/
#darkModeToggle,
i.header-btn__icon.icon.sicon-shopping-bag,
i.header-btn__icon.sicon-user-circle {
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--border-icon);
    background:transparent ;
    background-color: var(--bg-primary);    
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--shadow);
    transition: all 0.25s ease-in-out; 
}

/*اعداد اضافي لزر الداكن*/
 #darkModeToggle {
margin-left: 12px;}

/*تأثير الهوفر لزر الداكن*/
 #darkModeToggle:hover,
i.header-btn__icon.icon.sicon-shopping-bag:hover,
i.header-btn__icon.sicon-user-circle:hover {
    border: 2px solid var(--border-icon);   
    color: var(--color-primary);
    box-shadow: var(--shadow-hover);
    opacity: 1;
}

/*الحاوية الرئيسية لصورة المستخدم والصورة*/
.s-user-menu-trigger,
.s-user-menu-trigger-avatar {
    transition: all 0.25s ease-in-out;
    width: 35px;
    height: 35px;
    background: none;
    padding: 0;
    box-shadow: var(--shadow);
    border-radius: 9999px;   
}

/*القائمة المنسدلة عند الظغط على صورة المستخدم*/
.s-user-menu-toggler.opened .s-user-menu-dropdown ul,
.s-user-menu-toggler.opened .s-user-menu-dropdown a {
    background:var(--bg-secondary); 
    border-top-width: 0;
    border-color: var(--border);
    color: var(--text-primary);
}

/* راس القائمة المنسدلة للشاشات الصغيرة*/
.s-user-menu-dropdown-header {
    background: var(--bg-primary);
    border-color: var(--border);
    margin-bottom:0;

}

/* اسم العميل في هيدر القائمة*/
.s-user-menu-dropdown-header-content p {
    color: var(--link);
}

/*خانة تسجيل الدخول وعلامة اغلاقه*/
 .s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering,
 .s-modal-close,
 .s-login-modal-title {
   background-color: var(--bg-tertiary);
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}





/*🖼️🖼️🖼️🖼️تنسيقات سلايد الصور المطور🖼️🖼️🖼️🖼️*/
/*حاوية النصوص الرئيسية للسلايد*/
.pb-16 {
    PADDING: 0;
}

/*حاوية النصوص الثانوية للسلايد*/
.text-white {
    color: #fff;
    width: 70%;
}

/*العنوان الرئيسي للسلايد*/
.leading-tight {
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: min(4vw, 2.5rem);
}

/*الوصف الثانوي للسلايد*/
.line-clamp-2 {
    -webkit-line-clamp: 2;
    font-size: min(3vw, 1.5rem);
    line-height: 1.25;
}

/*طبقة التعتيم على الصور*/
.s-block--hero-slider .swiper-slide .overlay-bg:after {
    background-color: var(--color-primary);
    opacity: 0.2;
}

/*طبقة التعتيم في الوضع الداكن*/
.dark-mode .s-block--hero-slider .swiper-slide .overlay-bg:after {
    background-color: var(--bg-tertiary);
    opacity: 0.6;
}

/*أزرار التنقل في السلايد*/
 .s-slider-v-centered.fullwidth-slider .s-slider-block__title-nav button {
    opacity: 0.2;
    width: 3vw;
    height: 15vw;
    background-color: var(--accent);
}




/*📋📋📋📋تنسيقات قائمة العناصر📋📋📋📋*/
/*الحاوية الرئيسية للقائمة*/
.s-block.s-block--banners.container {
    background-color: none;
}

/*عنوان القائمة*/
.s-block--banners.container .s-block__title {   
    background-color: var(--color);   
    display: flex;
    padding: 1vw;
    justify-content: center;
    align-items: center;
    margin: 0;
    border-radius: .375rem .375rem 0 0;
    border-width: 0.5px;
    border-color: var(--border);
}
.s-block--banners.container .s-block__title h2 {
    font-weight: normal;
    color: var(--color-2);
    font-size: var(--title-size);
}

/*شبكة العناصر*/
.s-block--banners.container .grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1rem;
    justify-content: safe center;
    scrollbar-width: thin;
    background-color: var(--bg-tertiary);
    border-radius: 0 0 .375rem .375rem;
    padding: 2vw;
    border-width: 0.5px;
    border-color: var(--border)
}

/* اول بطاقة والبطاقة الفردية للعنصر*/
.banner-entry, .two-row .banner-entry:first-child {
    flex: 0 0 auto;
    height: 22vw;
    max-height: 120px;
    aspect-ratio:3/4;
    border-radius: var(--border-radius);
    margin: 0;
    box-shadow: var(--shadow);
    background-color: var(--bg-tertiary);
}

/*تأثير الهوفر على بطاقة العنصر*/
.banner-entry:hover {
    border: .75px solid var(--color-primary);
}

/*تحسينات للصورة والعنوان*/
.lazy__bg, .s-block__title .right-side {
    justify-content: center;
    background-size: cover !important;
    padding: 0;
}




/*🛍️🛍️🛍️🛍️تنسيقات سلايد المنتجات المتحركة🛍️🛍️🛍️🛍️*/
/*الحاوية الرئيسية لسلايد المنتجات*/
.s-block--best-offers {
    background: var(--body-color);
    margin-top: 1rem;
}

/*النصوص العلوية*/
.s-slider-block__title {
    margin: 1rem auto !important;
}
.s-slider-block__title h2 {
    margin: 0;
    font-size: var(--title-size);
    font-weight: var(--font-weight-title);
    color: var(--text-primary);
}
/*عرض الكل*/
.s-slider-block__display-all {
    margin: 0;
    font-size: var(--display-all-size);
    font-weight: var(--font-weight-display-all);
    color: var(--text-secondary);
}

/*حاوية السلايد الداخلية*/
.s-products-slider-wrapper .s-slider-swiper-wrapper {
    background: var(--body-color);
    margin: 10px;
}

/*البطاقة الفردية للمنتج*/
.s-product-card-entry,.s-product-card-vertical {
    background: none;
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    border: .2px solid var(--border);
}
.s-product-card-entry:hover{
    border: .5px solid var(--color-primary);
}

/* اعدادات صورة المنتج */
.s-product-card-image {
    background-color: white;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    display: flex;
    justify-content: center;
    padding-top: 10%;
    padding-bottom: 10%;
}
.s-product-card-image img, .s-product-card-image-contain {
    height: 100%;
    border-radius: var(--border-radius);
    width: fit-content;
}

/*العنوان الترويجي*/
.s-product-card-promotion-title {
    background-color: var(--price);
    border-radius:0 var(--border-radius) ;
    top: 0;
    margin: 0;
    color: var(--color-2);
}

/*حاوية بيانات المنتج*/
.s-product-card-content {
    background: var(--body-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* عنوان المنتج داخل البطاقة */
.s-product-card-content-title a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    color: var(--color-primary);
    font-weight: normal;
}
.s-product-card-content-title a:hover{
    opacity: 0,8;
}

/* العنوان الفرعي */
s-product-card-content-subtitle {
    color:var(--text-secondary) !important;
    opacity: 0,6;
    font-weight: 300;
}

/* السعر  */
.s-product-card-starting-price h4,
.s-product-card-sale-price h4 {
    color:var(--price) !important;
    opacity: 0.8 !important;
    font-size: .875rem;
    font-weight: 300;
    line-height: 1.25rem;
}

/* السعر قبل الخصم */
.s-product-card-sale-price span {
    color:var(--text-secondary) !important;
    opacity: 0.8 !important;
    font-weight: 300;
}

/* زر الإضافة */
.s-button-btn {
    opacity: 1;
    border-color: var(--color);
    border-radius: var(--border-radius);
}

/*تأثير الهوفر على زر الإضافة*/
.s-button-btn:hover {
    opacity: 1;
    border-color: var(--color);
    color: var(--color-2);
    background-color: var(--color);
}
/* النص في الزر */
.s-button-btn span {
    font-weight: normal;
}

/*إخفاء أيقونة السلة من الزر*/
.s-product-card-content-footer button i {
    DISPLAY: NONE;
}

/* علامة اللودر عند اضافة منتج للسله */
span.s-button-loader {
    color:var(--color-2);
}




/*🏷️🏷️🏷️🏷️ تنسيقات العلامات التجارية 🏷️🏷️🏷️🏷️*/
/*عنوان العلامات التجارية*/
.s-block--logos-slider .s-block__title h2  {
    margin: 0;
    font-size: var(--title-size);
    font-weight: var(--font-weight-title);
    color: var(--text-primary);
}
.s-block--logos-slider .s-block__display-all {
    margin: 0;
    font-size: var(--display-all-size);
    font-weight: var(--font-weight-display-all);
    color: var(--text-secondary);
}
.s-block--logos-slider .s-block__display-all i {
    display: none;
}

 /* إعداد الحاوية العامة */
.s-block--logos-slider {
    overflow: hidden;
    background-color: var(--bg-tertiary);
    padding: 1rem 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8 !important;
}

/* الحاوية الداخلية */
.s-block--logos-slider > .container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

/* الشبكة - حركة مستمرة دائمة */
.s-block--logos-slider > .container .grid {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  animation: infiniteSlide 100s linear infinite;
}

@keyframes infiniteSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* العناصر (الشعارات) */
.s-block--logos-slider .brand-item {
    flex: 0 0 auto;
    height: 18vw;
    max-height: 100px;
    aspect-ratio:1/1;
    border-radius: var(--border-radius);
    margin: 0;
    background-color: var(--bg-tertiary);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

/*  (الشعارات) */
.s-block--logos-slider .brand-item img {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}




/*💬💬💬💬 تنسيقات التعليقات 💬💬💬💬*/
/*الحاوية الرئيسية للتعليقات*/
.s-block--testimonials.container {
    margin-top: 5px;
}

/*هيدر التعليقات*/
.s-reviews-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3vw ;
    margin: 0;
}

/*عنوان التعليقات*/
h1.s-reviews-header {
    margin: 0;
    font-size: var(--title-size);
    font-weight: var(--font-weight-title);
    color: var(--text-primary);
}
.s-reviews-display-all {
    margin: 0;
    font-size: var(--display-all-size);
    font-weight: var(--font-weight-display-all);
    color: var(--text-secondary);
}
.s-reviews-display-all-icon svg {
    display: none;
}

/*حاوية السلايد الداخلية*/
.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-backface-hidden {
    PADDING: 0;
}

/*البطاقة الفردية للتعليق*/
.s-reviews-testimonial {
    background-color: var(--bg-tertiary);
    border-color: var(--border);
    border-radius: 8px;
    padding: 10px;
    width: 100%;
}

/*الحاوية الداخلية للتعليق*/
.s-reviews-testimonial__inner {
    display: flex;
    justify-content: flex-start;
    align-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
}

/*صورة المعلق*/
.s-reviews-testimonial__avatar {
    border-radius: 9999px;
    flex-shrink: 0;
    height: 60px;
    overflow: hidden;
    width: 60px;
    margin-bottom: 5px;
}

/*حاوية نص التعليق*/
.s-reviews-testimonial__text {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column-reverse;
    justify-content: center;
    flex-wrap: nowrap;
}

/*حاوية الاسم والنجوم*/
.s-reviews-testimonial__name_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 5px;
    padding: 0;
}

/*اسم المعلق*/
.s-reviews-testimonial__info h2 {
    color: var(--color-primary);
    margin-bottom: 5px;
}

/*نص التعليق*/
.s-reviews-testimonial__text p {
    line-height: 1.5rem;
    margin-top: 0;
    color: var(--text-primary);
}

/*أيقونة التعليق*/
.s-reviews-testimonial__icon svg {
    height: 20px;
    width: 20px;
    left: 10px;
    position: absolute;
    top: 2px;
    color: var(--text-primary);
}




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

/* خلفية الحاوية */
.s-block--features__item {
    background-color: var(--bg-tertiary);
    border-radius: var(--border-radius);
}

/* خلفية الايقونة */
.s-block--features__item .feature-icon{
    color: var(--color-primaryor) !important;
}

/* الايقونة */
.s-block--features__item .feature-icon i {
    color: var(--color-primary-2) !important;
}

/* النص الاساسي */
.s-block--features__item h2 {
    color: var(--text-primary);
}

/* النص الثانوي */
.s-block--features__item p{
    color: var(--text-secondary);
}




/*الفوتر*/
footer.store-footer .grid {
    display: flex;
    align-content: center;
    justify-content: space-between;
}
@media (max-width: 600px) {
    footer.store-footer .grid {
        display: flex;
        gap: 1rem;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        text-align: center;
    }
    footer.store-footer div {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
}

/*الشعار*/
#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div:before {
    display: block !important;
    content: '';
    background-size: contain;
    background-position: center;
    width: 10vw;
    height: 10vw;
    max-height: 60px;
    background-color: var(--logo-color);
    mask: var(--logo) no-repeat center;
    /*اضافة ماسك لتغيير اللون في الوضع الداكن */
    mask-size: contain;
    -webkit-mask: var(--logo) no-repeat center;
    -webkit-mask-size: contain;
    transition: background-color 0.3s ease;
}

/* النص الاساسي */
.store-footer h3 {
    color: var(--text-primary);
}

/* النصوص الفرعية والايقونات */
.store-footer a,.store-footer p,.s-contacts-icon {
    color: var(--text-secondary);
    border-color: var(--border-icon);
}
/* إعدادات الخلفية */
.store-footer {
    background-color: var(--bg-primary) !important;
}
.store-footer__inner {
    border-bottom-color: var(--color-primary) !important;
    background-color: var(--bg-tertiary) !important;
}
.s-payments-list-item  {
    border-radius: var(--border-radius);
}