/* =========================================================
   القسم الأول: الإعدادات العامة والألوان (الهيدر، الفوتر، الخلفية)
   ========================================================= */

/* 1. إعدادات الهيدر وتثبيته في الأعلى */
.store-header, header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background-color: #ffffff !important; 
    border: none !important;
    margin: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; 
    transition: all 0.3s ease !important;
}

/* تأثير الهيدر الشفاف عند النزول */
.store-header.fixed-header, header.fixed-header, .store-header.is-sticky, header.is-sticky {
    background-color: rgba(255, 255, 255, 0.9) !important; 
    backdrop-filter: blur(8px) !important;
}

/* 2. إعدادات الفوتر (خلفية خضراء داكنة) */
footer, .store-footer, .store-footer__inner {
    background-color: #24372D !important;
    border: none !important;
    margin: 0 !important;
}

/* 3. تنسيق خلفية المتجر (اللون الأبيض) وإلغاء الصور الافتراضية */
body, .s-page, .store-content, section, main, #main-content {
    background-color: #ffffff !important;
    background-image: none !important; 
}

/* 4. جعل الحاويات الداخلية في الفوتر والهيدر شفافة */
footer .container, .store-footer .container, .store-footer__inner .container, #mainnav .inner, .main-nav-container {
    background-color: transparent !important;
}

/* 5. حل مشكلة الفراغ أسفل الفوتر */
.app-inner {
    background-color: #ffffff !important;
    min-height: 100vh !important; 
    display: flex !important;
    flex-direction: column !important;
}
main, #main-content {
    flex-grow: 1 !important; 
}

/* 6. تنسيق نصوص وأيقونات الهيدر والفوتر */
.store-header a, custom-main-menu, 
.store-header.fixed-header a, .store-header.is-sticky a {
    color: #24372D !important; 
    font-weight: bold !important;
    font-size: 16px !important;
    transition: color 0.3s ease;
}

.store-footer, .store-footer a, .store-footer p, .store-footer h3, .store-footer span, .store-footer label {
    color: #ffffff !important; 
}

.store-header a:hover, .store-footer a:hover,
.sicon-user, .sicon-menu, .header-btn__icon,
salla-user-menu {
    color: #D3A642 !important;
    --color-primary: #D3A642 !important;
    --color-text: #D3A642 !important;
}

salla-user-menu::part(icon), salla-user-menu::part(trigger), salla-user-menu::part(avatar) {
    color: #D3A642 !important;
    fill: #D3A642 !important;
}

.store-header .sub-menu a, .store-header .dropdown-menu a, .store-header ul ul a, custom-main-menu .sub-menu a, .s-menu-sub a {
    color: #24372D !important;
}

.store-header .sub-menu a:hover, .store-header .dropdown-menu a:hover, .store-header ul ul a:hover, custom-main-menu .sub-menu a:hover, .s-menu-sub a:hover {
    color: #D3A642 !important;
}

/* 7. إجبار مسار الصفحة وعناوين المنتج على اللون الأبيض */
salla-breadcrumb::part(link), salla-breadcrumb::part(current), salla-breadcrumb::part(separator),
salla-breadcrumb::part(item), .product-details__title, .product-details__subtitle {
    color: #ffffff !important;
}

/* 8. تكبير كلمة (الباقات) وعناوين الأقسام الرئيسية */
.s-block__title h2, .s-block__title h1, .s-block__title h3,
.s-block__title .title, .s-block-title, .section-title, .section-header h2 {
    font-size: 32px !important; 
    font-weight: bold !important;
    color: #24372D !important; 
    margin-bottom: 20px !important;
}


/* =========================================================
   القسم الثاني: إخفاء العناصر غير المرغوب فيها
   ========================================================= */

/* 1. إخفاء الشريط العلوي وشريط البحث */
.top-navbar, .header-search, .s-header-top, .s-search-box {
    display: none !important;
}

/* 2. إخفاء الشريط الترويجي (التخفيضات) بالكامل من المنتجات */
salla-product-card::part(promotion-title),
.promotion-title, 
.s-product-card-promotion-title,
.s-badge--promotion,
.s-ribbon {
    display: none !important;
}

/* 3. إخفاء كلمة ورابط "تخفيضات" من القائمة العلوية نهائياً */
.store-header a[href*="offers"], 
.store-header a[href*="sales"],
.main-nav-container a[href*="offers"],
.s-header-navbar a[href*="offers"],
#mainnav a[href*="offers"] {
    display: none !important;
}


/* =========================================================
   القسم الثالث: لمسات جمالية (نبض المتجر) للشعار وأيقونة السلة
   ========================================================= */

/* 1. تكبير الشعار في الهيدر وتثبيت حجمه (مع دعم كامل للجوال) */
/* فك القيود عن حاوية الشعار لمنع قصه في الجوال */
.store-header .logo, 
.store-header .header-logo, 
.s-header-logo, 
.navbar-brand {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

/* تكبير الشعار بشكل عام للكمبيوتر */
.store-header .logo img, 
.store-header .header-logo img,
.s-header-logo img,
.fixed-header .logo img,
.is-sticky .s-header-logo img,
header.is-sticky img {
    max-height: 85px !important;
    height: auto !important;
    transform: scale(1.4) !important;
    margin: 10px 0 !important;
    transition: transform 0.4s ease, filter 0.4s ease !important;
}

/* إجبار التكبير في شاشات الجوال بقوة إضافية */
@media (max-width: 768px) {
    .store-header .logo img, 
    .store-header .header-logo img,
    .s-header-logo img,
    .is-sticky .s-header-logo img {
        max-height: 70px !important; /* رفع سقف الارتفاع المسموح بالجوال */
        transform: scale(1.9) !important; /* تكبير الشعار بنسبة 90% إضافية */
        margin: 12px 0 !important;
    }
}

/* 2. توهج ذهبي وتكبير إضافي للشعار عند تمرير الماوس */
.store-header .logo img:hover, 
.store-header .header-logo img:hover,
.s-header-logo img:hover {
    transform: scale(1.5) !important;
    filter: drop-shadow(0 4px 8px rgba(211, 166, 66, 0.6)) !important;
}

/* 3. تأثير "نبض القلب" لأيقونة السلة */
@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.2); }
    28% { transform: scale(1); }
    42% { transform: scale(1.2); }
    70% { transform: scale(1); }
}
.sicon-shopping-bag, salla-cart-summary::part(icon) {
    animation: heartbeat 2.5s infinite;
    transform-origin: center;
    color: #D3A642 !important;
}
salla-cart-summary::part(text), salla-cart-summary::part(total),
salla-cart-summary::part(amount), salla-cart-summary::part(currency) {
    color: #D3A642 !important;
}


/* =========================================================
   القسم الرابع: تنسيقات حاسبة السعرات الحرارية
   ========================================================= */

.salla-calc-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    background-color: #24372D !important; 
    color: #ffffff !important;
    padding: 40px !important;
    border-radius: 16px !important;
    font-family: inherit !important;
    direction: rtl !important;
    gap: 30px !important;
    margin: 20px 0 !important;
    align-items: stretch !important;
}

.salla-calc-container > br, .salla-calc-container > p:empty { display: none !important; }

.salla-form-col { flex: 1 1 45% !important; min-width: 280px !important; }
.salla-result-col { flex: 1 1 45% !important; min-width: 280px !important; display: flex !important; flex-direction: column !important; }

.salla-calc-container h2 { color: #ffffff !important; font-size: 24px !important; margin-bottom: 25px !important; font-weight: bold !important; }
.salla-input-group { margin-bottom: 15px !important; }
.salla-input-group label { display: block !important; margin-bottom: 8px !important; font-size: 14px !important; font-weight: bold !important; }

.salla-input-group input, .salla-input-group select {
    width: 100% !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #333 !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
}

.salla-calc-btn {
    width: 100% !important;
    padding: 15px !important;
    background-color: #000000 !important; 
    color: #ffffff !important;
    border: 1px solid #000 !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    margin-top: 15px !important;
    transition: background 0.3s !important;
}

.salla-calc-btn:hover {
    background-color: #D3A642 !important; 
    color: #24372D !important;
    border-color: #D3A642 !important;
}

.salla-calories-output { margin-top: 25px !important; font-size: 16px !important; font-weight: bold !important; line-height: 1.8 !important; }

.salla-package-card {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    color: #555 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.salla-package-card p.initial-text { font-size: 22px !important; line-height: 1.6 !important; color: #777 !important; margin: 0 !important; }
.salla-highlight { color: #D3A642 !important; font-weight: bold !important; }

@media (max-width: 768px) { .salla-form-col, .salla-result-col { flex: 1 1 100% !important; } }


/* =========================================================
   القسم الخامس: تنسيق قسم الباقات المخصص (سكرول الجوال)
   ========================================================= */

.custom-categories-section {
    padding: 20px 0; 
    background-color: transparent;
    direction: rtl;
    text-align: center;
    font-family: inherit;
    overflow: hidden; 
}

.categories-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    overflow-x: auto;
    padding: 15px 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
}

.categories-grid::-webkit-scrollbar {
    display: none; 
}

.cat-card {
    flex: 0 0 140px; 
    scroll-snap-align: start;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.cat-card:hover {
    transform: translateY(-5px); 
}

.cat-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    background-color: transparent;
}

.cat-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.08)); 
}

.cat-card h3 {
    color: #24372D !important; 
    font-size: 15px;
    font-weight: bold;
    margin: 5px 0 0 0;
    transition: color 0.3s ease;
}

.cat-card:hover h3 {
    color: #D3A642 !important; 
}

@media (min-width: 768px) {
    .categories-grid {
        justify-content: center; 
        gap: 30px;
    }
    .cat-card {
        flex: 0 0 200px; 
    }
    .cat-card h3 {
        font-size: 18px;
        margin-top: 10px;
    }
}