/* ====================================
   تنسيقات متجر الوجيه للاتصالات
   ==================================== */

/* ------------------------------------
   1. تنسيقات الهيدر والقائمة الرئيسية
   ------------------------------------ */

/* خلفية القائمة الرئيسية بتدرج لوني */
.main-nav-container {
    background: linear-gradient(180deg, #78e3f5, #5046fc) !important;
}

/* تنسيق شريط التنقل العلوي */
.topnav-is-dark .top-navbar {
    background-color: #78e3f5 !important;
    color: #ffff !important;
} 

/* تنسيق القائمة الفرعية */
header .sub-menu.w-56 {
    background: linear-gradient(160deg, #78e3f5, #5046fc) !important;
    border-radius: 12px;
}

/* تلوين نصوص القوائم */
header .sub-menu.w-56 ul li a span,
.main-menu-row ul li a span {
    color: #fff !important;
}

/* خلفية شفافة للقائمة */
header div#mainnav,
.main-menu-row {
    background-color: #85363600 !important;
}

@media(min-width: 1080px) {
    ul.main-menu.mm-spn--open {
        background-color: #ffffff00;
    }
}

/* ------------------------------------
   2. تنسيقات أيقونات الهيدر
   ------------------------------------ */

/* أيقونات المستخدم والسلة والبحث - الحالة العادية */
i.header-btn__icon.sicon-user,
i.header-btn__icon.icon.sicon-cart,
span.header-btn__icon.icon.sicon-search {
    background-color: #7e4cfc00 !important;
    border-radius: 50px;
    transition: 0.5s;
}

/* أيقونات الهيدر عند التثبيت */
div#mainnav.fixed-header i.header-btn__icon.sicon-user,
div#mainnav.fixed-header i.header-btn__icon.icon.sicon-cart,
div#mainnav.fixed-header span.header-btn__icon.icon.sicon-search {
    background-color: #7e4cfc !important;
    border-radius: 50px;
}

/* ------------------------------------
   3. تنسيقات سلايدر الصور
   ------------------------------------ */

/* إزالة الحواف المستديرة من سلايدر الصور */
section.s-block.s-block--photos-slider .swiper-slide,
section.s-block.s-block--photos-slider .swiper-slide img {
    border-radius: 0 !important;
}

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

/* إظهار المحتوى خارج الحاوية */
section.s-block.s-block--square-links.square-links-1.s-block--animate .overflow-hidden.rounded-2xl {
    overflow: visible !important;
}

/* تنسيق صور الروابط المربعة */
section.s-block.s-block--square-links.square-links-1.s-block--animate .overflow-hidden.rounded-2xl img {
    object-fit: contain !important;
}

/* ------------------------------------
   5. تنسيقات البانرات
   ------------------------------------ */

/* إعادة تعيين المسافات للبانر العريض */
section.s-block--fixed-banner.wide-placeholder:not(section.s-block.s-block--fixed-banner.wide-placeholder.s-block--animate.fixed-banner--9, section.s-block.s-block--fixed-banner.wide-placeholder.s-block--animate.fixed-banner--10, .double-banner--11) > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important; 
}

/* تنسيق عناصر البانر */
section.s-block.s-block--banners.container.s-block--animate .banner-entry.anime-item {
    background-color: transparent;
    height: 100%;
    padding: 0;
}

/* تنسيق صور البانر */
section.s-block.s-block--banners.container.s-block--animate .banner-entry.anime-item img {
    object-fit: contain !important;
}

/* ------------------------------------
   6. تنسيقات سلايدر المنتجات المميزة
   ------------------------------------ */

/* تنسيق صور المنتجات المميزة */
section.s-block.s-block--special-products-slider--6.s-block--special-products-slider > div > div.lg\:w-1\/3.flex.items-center.justify-center.bg-cover.bg-no-repeat.text-center.relative.min-h-\[250px\].max-h-\[350px\].md\:max-h-\[700px\].has-overlay--opacity-option.has-overlay--opacity-0 > img,
section.s-block.s-block--special-products-slider--8.s-block--special-products-slider.reversed > div > div.lg\:w-1\/3.flex.items-center.justify-center.bg-cover.bg-no-repeat.text-center.relative.min-h-\[250px\].max-h-\[350px\].md\:max-h-\[700px\].has-overlay--opacity-option.has-overlay--opacity-0 > img {
    object-fit: contain;
}

/* ------------------------------------
   7. تنسيقات كروت المنتجات
   ------------------------------------ */

/* تنسيق أساسي لكرت المنتج */
custom-salla-product-card {
    border: 1px solid #ddddd !important;
    transition: 0.5s !important;
    overflow: hidden;
    border-radius: 12px;
}

/* تأثير الهوفر على كرت المنتج */
custom-salla-product-card:has(button.s-button-element.s-button-btn:hover) {
    box-shadow: 3px 3px 5px 4px #ddd !important;
    border: 1px solid #5042fe;
    border-radius: 12px;
}

/* تأثير الهوفر على كرت المنتج في الصفحة الرئيسية */
body.index custom-salla-product-card:has(button.s-button-element.s-button-btn:hover) {
    transform: translateY(-10px) !important;
    box-shadow: 3px 3px 5px 4px #ddd !important;
    border: 1px solid #5042fe;
    border-radius: 12px;
}

/* مسافة إضافية لسلايدر المنتجات */
body.index salla-products-slider.s-products-slider-wrapper.hydrated .swiper.s-slider-container {
    padding: 30px 0 0 !important;
}

/* مسافات داخلية لمحتوى كرت المنتج */
.product-card__content {
    padding-inline: 5px;
}

/* ------------------------------------
   8. تنسيقات الفوتر
   ------------------------------------ */

/* إخفاء شعار SVG */
footer > svg {
    display: none;
}

/* خلفية الفوتر الداخلية */
.store-footer__inner {
    background-color: #7933da;
}

/* خلفية معلومات التواصل */
.store-footer__contacts-row,
.footer-bottom {
    background-color: #4f228d;
}

/* تغيير شعار المتجر في الفوتر */
footer.store-footer.s-block--animate a img[alt="الوجيه للاتصالات"] {
    content: url(https://img.imgdd.com/82545b2a-cf79-462f-8aef-3eecc0a00952.png) !important;
}

/* تنسيق أزرار التواصل */
.store-footer__contacts-row selia-contacts a {
    background-color: #6ac7fe;
}

/* ------------------------------------
   9. تنسيقات أيقونات السوشيال ميديا
   ------------------------------------ */

/* أيقونة الإنستجرام */
footer a[href*=instagram] {
    background: linear-gradient(45deg, #f09433 0, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

/* أيقونة التيك توك */
footer a[href*=tiktok] {
    background: black;
    color: white;
}

/* أيقونة السناب شات */
footer a[href*=snapchat] {
    background: yellow;
    color: black;
}

/* أيقونة اليوتيوب */
.store-footer [title="youtube"] {
    background-color: #f60039;
}

/* أيقونة تويتر */
footer li.s-social-link [title="twitter"] {
    background: black;
    color: white;
}

/* ------------------------------------
   10. تنسيقات قسم التقييمات
   ------------------------------------ */

/* خلفية قسم التقييمات */
section.s-block.s-block--testimonials .bg-store-bg-secondary {
    background: linear-gradient(180deg, #824dff, #5d45ff) !important;
}

/* لون نص التقييمات */
section.s-block.s-block--testimonials .bg-store-bg-secondary p {
    color: #fff !important;
}

/* ------------------------------------
   11. تنسيقات النوافذ المنبثقة
   ------------------------------------ */

/* إخفاء نافذة معينة */
[data-testid="bcio__popupTeaser"] {
    display: none !important;
}

/* تنسيق نافذة الخصم */
div#selia-discount-popup .flex.flex-col.md\:flex-row {
    flex-direction: column !important;
    width: 100%;
}

div#selia-discount-popup .flex.flex-col.md\:flex-row .md\:w-1\/2 {
    width: 100% !important;
    height: 100% !important;
}

div#selia-discount-popup .flex.flex-col.md\:flex-row .md\:w-1\/2 img.w-full.h-48.md\:h-full.object-cover {
    height: 100%;
}

/* ------------------------------------
   12. تنسيقات الموبايل
   ------------------------------------ */

@media(max-width: 992px) {
    
    /* تكبير أيقونات الهيدر للموبايل */
    span.header-btn__icon.icon.sicon-search,
    i.header-btn__icon.icon.sicon-cart,
    i.header-btn__icon.sicon-user {
        padding: 20px;
    }
    
    /* تنسيق أيقونة القائمة */
    i.sicon-menu.text-2xl {
        background-color: #7e4cfc !important;
        border-radius: 50px;
        padding: 8px;
    }
    
    /* تصغير حجم العناوين للموبايل */
    .my-description h2 {
        font-size: 14px !important;
    }
}

/* ==================================== 
   نهاية ملف التنسيقات
   ==================================== */

[data-testid="bcio__popupRoot"] {
    display:none !important;
}