/* =====================================

المتغيرات الأساسية للألوان

===================================== */

:root {

--main-color: #153652; /* اللون الأزرق الداكن - اللون الأساسي */

--second-color: #132a44; /* اللون الأزرق الغامق - لون ثانوي */

--white-color: #ffff; /* اللون الأبيض */

--accent-color: #e38200; /* اللون البرتقالي - لون التمييز */

}


/* =====================================

الشريط العلوي والقوائم الرئيسية

===================================== */


/* تنسيق الشريط العلوي */

.top-navbar {

background-color: var(--second-color) !important;

color: #fff;

}


/* تنسيق حقل البحث */

input.s-search-input {

color: #ffff;

}


/* نص placeholder في حقل البحث */

input.s-search-input::placeholder {

color: #fff;

}


/* خلفية القائمة الرئيسية */

div#mainnav {

background-color: var(--main-color);

}


/* لون عناصر القائمة المفتوحة */

ul.main-menu.mm-spn--open {

color: var(--white-color) !important;

}


/* لون القوائم الفرعية */

.sub-menu.w-56 {

color: var(--second-color) !important;

}


/* تأثير Hover على العناصر اللي فيها قوائم فرعية */

.main-menu > .has-children:hover > a {

color: #ffff !important;

}


/* تأثير Hover على روابط القائمة */

.main-menu li > a:hover {

color: #ffff;

}


/* =====================================

تنسيقات الموبايل للقائمة

===================================== */

@media(max-width: 992px) {

/* لون عناصر قائمة الموبايل */

nav#mobile-menu * {

color: var(--second-color) !important;

}

i.sicon-menu.text-primary.text-2xl {

color:#fff;

border:1px solid var(--accent-color);

width:40px !important;

height:40px;

padding:2px;

overflow:hidden;

position:relative;

border-radius:50px;


}


.sicon-menu:before{

left:50% !important;

top:50% !important;

position:absolute;

transform:translate(-50% , -50%);


}

}


/* =====================================

أيقونات الهيدر (حساب المستخدم والسلة)

===================================== */


/* تنسيق أيقونة المستخدم وسلة التسوق */

.main-nav-container i.header-btn__icon.sicon-user-circle,

.main-nav-container i.header-btn__icon.icon.sicon-shopping-bag {

background-color: var(--main-color) !important;

color: white;

border-color: var(--accent-color);

border-radius: 25% / 50%;

}


/* عداد المنتجات في السلة */

.main-nav-container span.s-cart-summary-count {

background-color: var(--accent-color);

color: var(--main-color);

border: 1px solid var(--main-color);

}


/* إجمالي السعر في السلة */

.main-nav-container b.s-cart-summary-total {

color: var(--white-color);

}


/* =====================================

السلايدر الرئيسي (الصور المتحركة)

===================================== */


/* إزالة المسافة العلوية من السلايدر */

section.s-block.s-block--photos-slider {

margin-top: 0;

}


/* تنسيق شرائح السلايدر */

section.s-block.s-block--photos-slider .swiper-slide {

padding: 0 !important;

margin: 0 !important;

width: 100% !important;

}


/* إزالة الحواف الدائرية من الشرائح والصور */

section.s-block.s-block--photos-slider .swiper-slide,

section.s-block.s-block--photos-slider .swiper-slide img {

border-radius: 0 !important;

}


/* إزالة المسافات الداخلية من حاوية السلايدر */

section.s-block.s-block--photos-slider .swiper.s-slider-container {

padding: 0 !important;

}


/* إخفاء عنوان السلايدر في الصفحة الرئيسية */

.home-slider.photos-slider .s-slider-block__title-nav {

display: none !important;

}


/* =====================================

البانرات والإعلانات

===================================== */


/* تنسيق روابط البانرات المربعة */

section.s-block.s-block--banners a.banner-entry.square-photos {

width: 100%;

height: 100%;

padding: 0;

background-color: transparent;

}


/* تنسيق أول بانر في الصفوف المزدوجة */

.two-row .banner-entry:first-child {

grid-column: span 1 / span 1;

grid-row: span 1 / span 1;

}


/* =====================================

تنسيقات الـ Grid للأقسام المختلفة

===================================== */


/* القسم الثالث - 5 أعمدة */

body.index section:nth-child(3) .md\:grid-cols-3 {

grid-template-columns: repeat(5, minmax(0, 1fr));

}


/* القسم الرابع - 5 أعمدة */

body.index section:nth-child(4) .md\:grid-cols-3 {

grid-template-columns: repeat(5, minmax(0, 1fr));

}


/* القسم السادس - 3 أعمدة */

body.index section:nth-child(6) .md\:grid-cols-3 {

grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

}


/* القسم التاسع - عمودين */

body.index section:nth-child(8) .md\:grid-cols-2 {

grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

/* gap: 1.5rem; */

}


/* محاذاة عناوين أقسام البانرات في المنتصف */

section.s-block.s-block--banners .s-block__title {

justify-content: center;

align-items: center;

}


/* إزالة المسافات من الجانب الأيمن للعنوان */

section.s-block.s-block--banners .s-block__title .right-side {

padding: 0;

}


/* تنسيق عنوان القسم مع خلفية متدرجة */

section.s-block.s-block--banners .s-block__title .right-side h2 {

background: linear-gradient(to right, #052a42, #1e5b8e);

color: #fff;

padding: 12px 25px;

border-top-right-radius: 12px;

border-top-left-radius: 12px;

}


/* =====================================

أزرار التبويبات (Tabs)

===================================== */


/* التبويبات غير النشطة */

salla-button.tab-trigger.s-button-wrap.hydrated.inactive button.tab-trigger {

color: #fff;

background-color: var(--main-color);

}


/* لون نص التبويب النشط */

salla-button.tab-trigger.s-button-wrap.hydrated.is-active button.tab-trigger span.s-button-text {

color: var(--accent-color);

}


/* =====================================

كروت المنتجات

===================================== */


/* تنسيق أساسي لكارت المنتج */

custom-salla-product-card {

border: 1px solid var(--main-color);

transition: 0.5s !important;

overflow: hidden;

}


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

custom-salla-product-card:has(button.s-button-element.s-button-btn:hover) {

box-shadow: 3px 3px 5px 4px #ddd !important;

border: 1px solid var(--accent-color);

}


/* تأثير Hover على كارت المنتج في الصفحة الرئيسية (مع حركة للأعلى) */

body.index custom-salla-product-card:has(button.s-button-element.s-button-btn:hover) {

transform: translateY(-10px);

box-shadow: 3px 3px 5px 4px #ddd !important;

border: 1px solid var(--accent-color);

}


/* مسافة علوية لسلايدر المنتجات */

body.index salla-products-slider.s-products-slider-wrapper.hydrated .swiper.s-slider-container {

padding: 30px 0 0 !important;

}


/* =====================================

الأزرار العامة

===================================== */

button.tab-trigger.s-button-element.s-button-btn.s-button-outline.s-button-primary-outline.s-button-loader-after {

background-color:#323f5c;

color:#fff;

}


/* تنسيق الأزرار العريضة ذات الحواف */

button.s-button-element.s-button-btn.s-button-outline.s-button-wide {

background-color: var(--main-color) !important;

color: var(--accent-color) !important;

}

footer .store-footer__inner {

background-color:var(--main-color);

}


section.s-block.s-block--fixed-banner.wide-placeholder img {

background-color:transparent;

}


/* =====================================

تنسيقات الموبايل للأقسام

===================================== */

@media(max-width: 992px) {


/* تحويل القسم الثالث لـ Flexbox على الموبايل */

body.index section:nth-child(3) .md\:grid-cols-3 {

display: flex !important;

flex-wrap: wrap;

justify-content: center;

align-items: center;

}


/* عرض البانرات في القسم الثالث */

body.index section:nth-child(3) .md\:grid-cols-3 a.banner-entry.square-photos {

flex-basis: 30%;

}


/* تحويل القسم الرابع لـ Flexbox على الموبايل */

body.index section:nth-child(4) .md\:grid-cols-3 {

display: flex !important;

flex-wrap: wrap;

justify-content: center;

align-items: center;

}


/* عرض البانرات في القسم الرابع */

body.index section:nth-child(4) .md\:grid-cols-3 a.banner-entry.square-photos {

flex-basis: 30%;

}


footer *{

justify-content:center;

align-items:center;

text-align:center;


}

}



@media(min-width: 992px) {

body.index section:nth-child(6) .md\:grid-cols-3 a:nth-child(even) {

scale: 1.1;

transition: 0.5s;

}


body.index section:nth-child(6) .md\:grid-cols-3 a:nth-child(odd) {

scale: 0.9;

transition: 0.5s;

}


/* عند hover على odd، الـ even تصبح 0.9 */

body.index section:nth-child(6) .md\:grid-cols-3 a:nth-child(odd):hover ~ a:nth-child(even),

body.index section:nth-child(6) .md\:grid-cols-3:has(a:nth-child(odd):hover) a:nth-child(even) {

scale: 0.9;

}


/* الـ odd عند hover تكبر */

body.index section:nth-child(6) a.banner-entry.square-photos:nth-child(odd):hover {

scale: 1.1;

}


section.s-block.s-block--banners .s-block__title {

margin-bottom: 4rem;

}

}