/* =========================================
   1. المتغيرات الأساسية (Colors & Variables)
========================================= */
:root {
    --color-primary: #dfbf84; /* اللون الذهبي الممتاز */
    --color-primary-dark: #703f00;
    --color-primary-light: #bd8c47;
    --color-primary-reverse: #ffffed;
    --1: #0a2d27; /* تم التعديل إلى الأخضر الداكن المطابق للبنر الجديد */
    --normal-box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
    --logo: url("https://cdn.files.salla.network/theme/1484353956/8f0d899c-ebe7-4e38-b566-0bf17e04affe.webp");
}

/* =========================================
   2. الإعدادات العامة والحاويات (Globals)
========================================= */
.text-primary { color: var(--1) !important; }
.text-gray-400 { color: #fff; margin-top: 1rem; }

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media(min-width: 768px) { .container { width: 750px; } }
@media(min-width: 992px) { .container { width: 970px; } }
@media(min-width: 1200px) { .container { width: 1170px; } }

/* تأثيرات الدخول للمتجر (Splash Animations) */
body.index:before, body[data-template=home]:before {
    content: ''; width: 100%; height: 100%; background: #f5f5f529;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    position: fixed; z-index: 999999; transform: scale(0);
    animation: pupup 3s ease-in-out;
}
@keyframes pupup {
    0%, 18%, 80% { transform: scale(1); }
    100% { transform: scale(0); }
}

body.index:after, body[data-template=home]:after {
    content: ''; width: 100%; height: 100%; top: 0; left: 0;
    position: fixed; z-index: 999999; background: var(--logo) no-repeat center;
    background-size: 20%; transform: scale(0);
    animation: pupup_logo 3s ease-in-out;
}
@keyframes pupup_logo {
    0%, 28%, 70% { transform: scale(1); }
    14%, 42% { transform: scale(1.3); }
    100% { transform: scale(0); }
}

/* =========================================
   3. الرأس والقائمة العلوية (Header & Nav)
========================================= */
div#mainnav, .main-nav-container.fixed-pinned .inner {
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

.navbar-brand img, .main-nav-container.fixed-pinned .navbar-brand img {
    max-width: 190px; width: auto; height: 100%; max-height: 60px;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .navbar-brand img, .main-nav-container.fixed-pinned .navbar-brand img {
        max-width: 140px !important;
        max-height: 50px !important;
        margin: 0 auto !important; 
    }
    .md\:flex.items-center.justify-between.py-4.container.text-center {
        display: flex; flex-direction: column;
    }
}

@media only screen and (min-width: 1024px) {
    .main-menu li.root-level > a { padding-bottom: 1rem; padding-right: .2rem; }
    .main-nav-container { min-height: 88px; height: 116px !important; }
}

.s-user-menu-avatar-wrap:before {
    content: "\f078"; font-family: sallaicons !important; font-size: 1.5rem;
    display: block; width: 26px; height: 24px; margin: 1px 0 -29px;
    position: relative; top: 5px; color: #fff;
}
.s-user-menu-avatar-wrap img { width: 0; }
.s-user-menu-trigger {
    background-color: var(--1); display: flex; height: 2.5rem; width: 2.5rem;
    align-items: center; justify-content: center; border-radius: 9999px; border-width: 1px;
}
.s-cart-summary-count { border-color: #000; background-color: var(--1); }
.header-btn__icon { color: #fff; border-color: #fff; background-color: var(--1); transition: 0.3s; }
.header-btn__icon:hover { color: var(--1); border-color: var(--1); background-color: #fff; }

/* =========================================
   4. قسم السلايدر الرئيسي (Hero Slider)
========================================= */
.s-block--hero-slider {
    padding: 30px 6% !important;
    max-width: 1440px !important; margin: 0 auto !important; box-sizing: border-box;
}
.s-block--hero-slider salla-slider {
    border-radius: 20px !important; overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; display: block;
}
.s-block--hero-slider .swiper-slide {
    min-height: unset !important; 
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 10 / 3 !important; 
}
.s-block--hero-slider .overlay-bg {
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 20px !important;
}
.s-slider-nav-arrow { background-color: var(--1); color: var(--color-primary); transition: 0.3s; }

/* السلايدر في شاشات الهاتف */
@media (max-width: 768px) {
    .s-block--hero-slider { padding: 16px !important; }
    
    .s-block--hero-slider .swiper-slide {
        aspect-ratio: 10 / 3 !important; 
    }
    
    .s-block--hero-slider salla-slider,
    .s-block--hero-slider .overlay-bg {
        border-radius: 12px !important;
    }
    
    /* إخفاء أسهم التنقل في الشاشات الصغيرة */
    .s-slider-block__title-nav, .s-slider-nav-arrow {
        display: none !important; 
    }
}

/* =========================================
   5. الأزرار (Buttons)
========================================= */
button.s-button-element, .s-button-btn, a.s-block__display-all {
    transition: all 0.3s ease-in-out !important;
}

button.s-button-solid.s-button-primary,
button.s-button-solid.s-button-wide.s-button-primary {
    background-color: var(--1) !important; color: var(--color-primary) !important; border: none;
}
button.s-button-solid.s-button-primary:hover,
button.s-button-solid.s-button-wide.s-button-primary:hover {
    background-color: var(--color-primary) !important; color: var(--1) !important;
}

button.s-button-outline.s-button-primary-outline {
    background-color: var(--1) !important; color: #fff !important; border-color: #fff !important;
}
button.s-button-outline.s-button-primary-outline:hover {
    background-color: #fff !important; color: var(--1) !important; border-color: var(--1) !important;
}

button.btn--close-sm.close-mobile-menu { background-color: var(--1); color: #fff; }

.s-slider-block__display-all {
    padding: 5px 15px; color: #000; margin: 10px auto; border-radius: 15px;
    animation: signal 1500ms linear infinite; display: inline-block;
}
@keyframes signal {
    0% { box-shadow: 0 0 0 0 rgba(10, 45, 39, 0.4); }
    100% { box-shadow: 0 0 0 8px rgba(10, 45, 39, 0); }
}

@media(max-width: 390px) {
    .s-button-text { overflow: visible; text-overflow: unset; }
}

/* =========================================
   6. بطاقات المنتجات والمميزات (Cards & Features)
========================================= */
.promotion-title, .s-product-card-promotion-title {
    background-color: var(--1); color: #fff;
}

.s-product-card-entry {
    border-radius: 15px !important; overflow: hidden;
    box-shadow: var(--normal-box-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* تأثير الإطار المتدرج عند تمرير الماوس */
.s-product-card-entry, .s-block--features__item:hover {
    --c: var(--color-primary); --b: 3px; --g: 5px;
    padding: calc(var(--g) + var(--b));
    --_g: #0000 25%, var(--c) 0;
    background: conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) var(--_i, 200%) 0/200% var(--_i, var(--b)) no-repeat, 
                conic-gradient(at bottom var(--b) left var(--b), var(--_g)) 0 var(--_i, 200%)/var(--_i, var(--b)) 200% no-repeat;
    transition: 0.4s, background-position 0.4s 0.4s; cursor: pointer;
}
.s-product-card-entry:hover, .s-block--features__item:hover {
    --_i: 100%; transition: 0.4s, background-size 0.4s 0.4s;
    transform: translateY(-5px);
}

.s-block--features__item {
    align-items: center; flex-wrap: wrap; flex-direction: column;
    justify-content: center; align-content: center; animation-name: slideinup;
}
.s-block--features__item .feature-icon {
    background-color: var(--1); cursor: pointer; transition: all .5s;
    box-shadow: 0 4px 5px 1px rgba(64, 60, 67, .16);
}
.s-block--features__item .feature-icon i { color: var(--color-primary); }

@media(max-width: 750px) {
    .s-products-slider-card { width: 52%; max-width: 250px; }
}
@media(max-width: 700px) {
    .s-products-slider-card.swiper-slide { width: 49vw !important; }
}

/* =========================================
   7. البنرات (Banners)
========================================= */
.s-block.s-block--banners > .grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }
.banner-entry { background-color: transparent; border-radius: 20px; overflow: hidden; transition: 0.3s; }
.banner--fixed img { border-radius: 25px; }

a.banner-entry.square-photos:hover,
body.index div.app-inner.flex.flex-col.min-h-full > section.s-block--banners:nth-child(n) div div:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1) !important;
}

@media(max-width: 991px) {
    .s-block.s-block--banners > .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .s-block.s-block--banners > .grid .banner-entry { height: auto; }
}

/* =========================================
   8. تذييل الصفحة (Footer)
========================================= */
.store-footer {
    background-color: var(--color-primary);
    border-top-left-radius: 3rem; border-top-right-radius: 3rem;
    margin-top: 2rem;
}
.store-footer__inner, .footer-is-light .store-footer .store-footer__inner {
    background-color: var(--1); color: #ffffff;
    border-top-left-radius: 3rem; border-top-right-radius: 3rem;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05); padding-top: 3rem;
}
.store-footer h3 { color: var(--color-primary); }
.footer-list.store-links-items { columns: 2; }
a.mb-4.last\:mb-0.flex.items-center.text-sm.leading-none { color: #fff; transition: 0.3s; }
a.mb-4.last\:mb-0.flex.items-center.text-sm.leading-none:hover { color: var(--color-primary); padding-right: 5px; }

/* أيقونات التواصل الاجتماعي */
.store-footer .contact-social { border-top-width: 0px; margin-top: 1rem; }
a.social-link, li.w-12.h-8.bg-white.rounded.flex.items-center.p-1 {
    background-color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 50% !important; transition: all 0.3s ease;
}
.store-footer .social-link {
    color: var(--1); font-size: 1.2rem; height: 3rem; width: 3rem;
    display: flex; align-items: center; justify-content: center;
}
a.social-link:hover { transform: translateY(-5px); background-color: var(--color-primary); color: #fff; }

/* =========================================
   9. إصلاحات إضافية (Misc Fixes)
========================================= */
.swiper.s-slider-container { padding-bottom: 0 !important; padding-left: 0; }
[dir=rtl] salla-slider[type]:not(.hydrated)>div,
[dir=rtl] salla-slider[type]:not(.hydrated) .swiper>div>div,
[dir=rtl] .carousel-slider .swiper { padding: 0.5rem; }
.s-block--features + .s-block--features,
.s-block--fixed-banner + .s-block--fixed-banner,
.s-block--banners + .s-block--banners { margin-top: 2em; }


/* =========================================
   10. تنسيق قسم بنرات الأقسام (تسوق من الأقسام)
========================================= */

/* 1. إجبار الحاوية على عرض 4 صور في صف واحد على جميع الشاشات */
.s-block.s-block--banners > .grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 12px !important; 
}

/* 2. ضبط أبعاد البنرات وإلغاء الارتفاع الثابت المشوه */
.s-block.s-block--banners > .grid .banner-entry {
    height: auto !important; 
    aspect-ratio: 2 / 1 !important; 
    border-radius: 8px !important; 
    display: block;
    width: 100% !important;
}

/* 3. تنسيق الصور داخل البنرات لتملأ المساحة بشكل مثالي */
.s-block.s-block--banners > .grid .banner-entry .lazy__bg {
    background-size: cover !important; 
    background-position: center !important;
    border-radius: 8px !important;
    height: 100% !important;
    width: 100% !important;
}

/* 4. تخصيص إضافي لشاشات الجوال لتبدو متناسقة */
@media (max-width: 768px) {
    .s-block.s-block--banners > .grid {
        gap: 6px !important; 
    }
    
    .s-block.s-block--banners > .grid .banner-entry {
        border-radius: 6px !important; 
        aspect-ratio: 16 / 9 !important; 
    }
}

/* =========================================
   11. تنسيق تذييل الصفحة (Footer)
========================================= */

/* 1. التنسيق الأساسي للحاوية الداخلية للفوتر */
.store-footer__inner {
    padding: 2rem 15px !important;
}

/* 2. تخصيص الفوتر لشاشات الهاتف (محاذاة للمنتصف وترتيب أنيق) */
@media (max-width: 768px) {
    /* تحويل شبكة الفوتر إلى عمود واحد في المنتصف */
    .store-footer .container.grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 2rem !important; 
    }

    /* توسيط اسم المتجر والوصف */
    .store-footer .lg\:col-span-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 !important;
    }
    
    .store-footer h3 {
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    .store-footer .max-w-sm p {
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* توسيط شارة السجل التجاري أو معروف */
    .s-trust-badges-wrapper {
        justify-content: center !important;
        margin: 0 auto !important;
    }

    /* توسيط الروابط المهمة */
    .s-menu-footer-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* توسيط قسم "تواصل معنا" ورقم الواتساب */
    .s-contacts-list {
        align-items: center !important;
    }
    
    .s-contacts-item {
        justify-content: center !important;
    }

    /* توسيط أيقونات التواصل الاجتماعي */
    .store-footer .contact-social ul.s-social-list {
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important; 
    }

    /* ترتيب شريط الحقوق وطرق الدفع السفلي */
    .store-footer .md\:flex.items-center.justify-between {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding-bottom: 20px !important;
    }

    /* توسيط أيقونات الدفع */
    .s-payments-list {
        justify-content: center !important;
        flex-wrap: wrap !important; 
    }
}