/* ================================================== GLOBAL COLORS ================================================== */ :root { --navy: #0B1238; --gold: #D4AF60; --gold-light: #E6CB8B; --dark: #2D2B26; --text: #171A2E; --muted: #777777; --light-bg: #F8F6F1; --white: #FFFFFF; --footer-bg: #0E244B; } /* ================================================== PRODUCT CARDS ================================================== */ custom-salla-product-card.s-product-card-entry { --color-primary: var(--gold) !important; --color-primary-dark: var(--gold) !important; --primary-color: var(--gold) !important; --main-color: var(--gold) !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; background-color: var(--white) !important; border: 1px solid var(--gold) !important; border-color: var(--gold) !important; border-radius: 14px !important; outline: none !important; overflow: visible !important; box-shadow: 0 5px 16px rgba(45, 43, 38, 0.08) !important; transform: translateY(0) !important; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* ================================================== مساحة آمنة لحركة كروت المنتجات فقط ================================================== */ .s-products-slider .swiper { padding-top: 20px !important; padding-bottom: 12px !important; } /* ================================================== إلغاء تأثير Angel Shine الأزرق ================================================== */ custom-salla-product-card.s-product-card-entry.angel-shine-hover::before, custom-salla-product-card.s-product-card-entry.angel-shine-hover::after, custom-salla-product-card.s-product-card-entry .angel-shine-obj::before, custom-salla-product-card.s-product-card-entry .angel-shine-obj::after { content: none !important; display: none !important; background: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ================================================== صور كروت المنتجات فقط ================================================== */ /* إصلاح ظهور صور كروت المنتجات */ /* ================================================== اسم المنتج ================================================== */ custom-salla-product-card.s-product-card-entry .s-product-card-content-title, custom-salla-product-card.s-product-card-entry .s-product-card-content-title a { color: var(--dark) !important; -webkit-text-fill-color: var(--dark) !important; font-weight: 700 !important; line-height: 1.55 !important; text-decoration: none !important; } /* ================================================== وصف المنتج ================================================== */ custom-salla-product-card.s-product-card-entry .s-product-card-content-subtitle { color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; line-height: 1.6 !important; } /* ================================================== التصنيف ================================================== */ custom-salla-product-card.s-product-card-entry .s-product-card-category { display: inline-flex !important; align-items: center !important; width: fit-content !important; max-width: 100% !important; padding: 4px 9px !important; background-color: rgba(212, 175, 96, 0.14) !important; color: var(--dark) !important; -webkit-text-fill-color: var(--dark) !important; border: 1px solid rgba(212, 175, 96, 0.45) !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; } /* ================================================== السعر ورمز الريال ================================================== */ custom-salla-product-card.s-product-card-entry .s-product-card-price, custom-salla-product-card.s-product-card-entry .s-product-card-sale-price, custom-salla-product-card.s-product-card-entry .s-product-card-price i, custom-salla-product-card.s-product-card-entry .s-product-card-price i::before, custom-salla-product-card.s-product-card-entry .s-product-card-price .sicon-sar, custom-salla-product-card.s-product-card-entry .s-product-card-price .sicon-sar::before { color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; font-weight: 800 !important; } /* ================================================== شارة العرض ================================================== */ custom-salla-product-card.s-product-card-entry .s-product-card-promotion-title { position: absolute !important; top: 0 !important; right: 0 !important; z-index: 5 !important; margin: 0 !important; padding: 6px 14px !important; background: var(--gold) !important; background-color: var(--gold) !important; color: var(--dark) !important; -webkit-text-fill-color: var(--dark) !important; border: 0 !important; border-radius: 0 10px 0 10px !important; box-shadow: none !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; white-space: nowrap !important; animation: none !important; } /* ================================================== أزرار القلب والعرض السريع ================================================== */ custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element { background: var(--dark) !important; background-color: var(--dark) !important; color: var(--gold) !important; border: 1px solid var(--gold) !important; border-radius: 50% !important; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease !important; } custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element i, custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element i::before, custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element svg, custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element svg path { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; fill: var(--gold) !important; } /* ================================================== زر أضف للسلة ================================================== */ custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element { width: 100% !important; min-height: 43px !important; background: var(--navy) !important; background-color: var(--navy) !important; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; border: 1px solid transparent !important; border-radius: 7px !important; box-shadow: 0 5px 14px rgba(11, 18, 56, 0.22) !important; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important; } /* نص وأيقونة + داخل زر أضف للسلة */ custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element .s-button-text, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element span, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element i, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element i::before, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element .sicon-add, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element .sicon-add::before, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element svg, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element svg path { color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; fill: var(--white) !important; } /* ================================================== Hover على الكمبيوتر فقط ================================================== */ /* مساحة لحركة الكارت من فوق */ .s-products-slider .swiper { padding-top: 10px !important; padding-bottom: 10px !important; } /* Hover الكارت على الكمبيوتر فقط */ @media (hover: hover) and (pointer: fine) { custom-salla-product-card.s-product-card-entry:hover, custom-salla-product-card.s-product-card-entry:focus-within { transform: translateY(-4px) !important; border: 1px solid var(--gold) !important; border-color: var(--gold) !important; outline: none !important; box-shadow: 0 14px 30px rgba(45, 43, 38, 0.14), 0 0 0 2px rgba(212, 175, 96, 0.18) !important; } custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element:hover { background: var(--gold) !important; background-color: var(--gold) !important; color: var(--dark) !important; transform: translateY(-3px) scale(1.05) !important; } } custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element:hover i, custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element:hover i::before, custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element:hover svg, custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element:hover svg path { color: var(--dark) !important; -webkit-text-fill-color: var(--dark) !important; fill: var(--dark) !important; } custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover { background: var(--gold) !important; background-color: var(--gold) !important; color: var(--dark) !important; transform: translateY(-2px) !important; box-shadow: 0 9px 20px rgba(212, 175, 96, 0.32) !important; } custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover .s-button-text, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover span, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover i, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover i::before, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover svg, custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover svg path { color: var(--dark) !important; -webkit-text-fill-color: var(--dark) !important; fill: var(--dark) !important; } } /* ================================================== Responsive كروت المنتجات ================================================== */ @media (max-width: 767px) { custom-salla-product-card.s-product-card-entry, custom-salla-product-card.s-product-card-entry:hover, custom-salla-product-card.s-product-card-entry:focus-within { width: 100% !important; max-width: 100% !important; border-radius: 11px !important; transform: none !important; } custom-salla-product-card.s-product-card-entry .s-product-card-image img.lazy.loaded { padding: 10px !important; } custom-salla-product-card.s-product-card-entry .s-product-card-actions { visibility: visible !important; pointer-events: auto !important; } custom-salla-product-card.s-product-card-entry .btn--wishlist, custom-salla-product-card.s-product-card-entry .angel-quick-view-btn { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } custom-salla-product-card.s-product-card-entry .s-product-card-actions .s-button-element { width: 34px !important; height: 34px !important; min-width: 34px !important; } custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element { min-height: 39px !important; font-size: 12px !important; } custom-salla-product-card.s-product-card-entry .s-product-card-promotion-title { padding: 5px 9px !important; font-size: 10px !important; } } /* ================================================== HEADER RESPONSIVE ================================================== */ @media (max-width: 480px) { #mainnav .header-container { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; padding: 6px 8px !important; gap: 3px !important; box-sizing: border-box !important; } #mainnav .header-container > * { min-width: 0 !important; margin: 0 !important; } #mainnav button.header-btn, #mainnav .search-btn, #mainnav .header-cart .s-cart-summary-wrapper, #mainnav .mburger { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: 32px !important; min-height: 32px !important; flex: 0 0 32px !important; padding: 0 !important; margin: 0 !important; border-radius: 8px !important; } #mainnav button.header-btn i, #mainnav .search-btn i, #mainnav .header-cart i { font-size: 17px !important; } #mainnav .header-cart #s-cart-icon, #mainnav .header-cart #s-cart-icon svg { width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; } #mainnav .header-cart .s-cart-summary-content { display: none !important; } #mainnav .mburger { gap: 0 !important; } #mainnav .mburger p { display: none !important; } #mainnav .mburger .sicon-menu { font-size: 20px !important; } #mainnav .navbar-brand { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 1 auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 3px !important; } #mainnav .navbar-brand img { width: auto !important; height: 32px !important; max-width: 42px !important; object-fit: contain !important; } #mainnav .s-cart-summary-count { top: -5px !important; right: -5px !important; min-width: 16px !important; height: 16px !important; padding: 0 3px !important; font-size: 8px !important; line-height: 16px !important; } } /* الشاشات الصغيرة جدًا */ @media (max-width: 340px) { #mainnav .header-container { padding-right: 5px !important; padding-left: 5px !important; gap: 2px !important; } #mainnav button.header-btn, #mainnav .search-btn, #mainnav .header-cart .s-cart-summary-wrapper, #mainnav .mburger { width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; min-height: 30px !important; flex: 0 0 30px !important; } #mainnav .navbar-brand img { height: 29px !important; max-width: 36px !important; } } /* ================================================== FOOTER ================================================== */ .store-footer, .store-footer__inner { color: var(--white) !important; background-color: var(--footer-bg) !important; border-color: transparent !important; } /* ================================================== PAYMENT METHODS نستخدم background-color فقط حتى لا نحذف الشعارات ================================================== */ .store-footer .s-payments-list, .store-footer salla-payments, .store-footer .footer-payments { background-color: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; } .store-footer .s-payments-list li, .store-footer .s-payments-item, .store-footer salla-payments li, .store-footer .footer-payments li { background-color: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; } /* الحفاظ على صور الشعارات */ .store-footer .s-payments-list img, .store-footer salla-payments img, .store-footer .footer-payments img { display: block !important; background-color: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; } /* الحفاظ على SVG الخاص بوسائل الدفع */ .store-footer .s-payments-list svg, .store-footer salla-payments svg, .store-footer .footer-payments svg { display: block !important; background-color: transparent !important; opacity: 1 !important; visibility: visible !important; } .store-footer .footer-title, .store-footer h3 { color: #414042; color: #ffffff; } /* مساحة آمنة فوق وتحت الكروت */ .s-products-slider .swiper { padding-top: 12px !important; padding-bottom: 12px !important; } .s-products-slider .swiper-slide { overflow: visible !important; } /* Hover الكارت على الكمبيوتر فقط */ @media (hover: hover) and (pointer: fine) { custom-salla-product-card.s-product-card-entry { transform: translateY(0) !important; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } custom-salla-product-card.s-product-card-entry:hover, custom-salla-product-card.s-product-card-entry:focus-within { transform: translateY(-5px) !important; border: 1px solid var(--gold) !important; border-color: var(--gold) !important; outline: none !important; box-shadow: 0 14px 30px rgba(45, 43, 38, 0.14), 0 0 0 2px rgba(212, 175, 96, 0.18) !important; } } custom-salla-product-card.s-product-card-entry { --color-primary: var(--gold) !important; --color-primary-dark: var(--gold) !important; --primary-color: var(--gold) !important; --main-color: var(--gold) !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-top: 7px !important; margin-bottom: : 7px !important; background-color: var(--white) !important; border: 1px solid var(--gold) !important; border-radius: 14px !important; outline: none !important; overflow: visible !important; box-shadow: 0 5px 16px rgba(45, 43, 38, 0.08) !important; transform: translateY(0) !important; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* منع قص الكارت أثناء الحركة */ .s-products-slider .swiper-slide { overflow: visible !important; } /* حركة الكارت */ @media (hover: hover) and (pointer: fine) { custom-salla-product-card.s-product-card-entry:hover, custom-salla-product-card.s-product-card-entry:focus-within { transform: translateY(-5px) !important; border-color: var(--gold) !important; box-shadow: 0 14px 30px rgba(45, 43, 38, 0.14), 0 0 0 2px rgba(212, 175, 96, 0.18) !important; } } custom-salla-product-card.s-product-card-entry .s-product-card-image img.lazy.loaded { opacity: 1 !important; visibility: visible !important; padding: 10px !important; box-sizing: border-box !important; transition: opacity 0.5s ease !important; } .s-products-slider-card.swiper-slide { padding-left: 0.25rem !important; padding-right: 0.25rem !important; padding-bottom: 12px !important; box-sizing: border-box !important; } .store-footer__inner { padding-bottom: 20px !important; border-color: transparent !important; } /* ========================================= تنسيق الهيدر العلوي فقط ========================================= */ .header-inner.inner.bg-white.da-bgm { background-color: #FFFFFF !important; border-bottom: 1px solid #D4AF60 !important; padding: 10px 0 !important; box-shadow: 0 3px 12px rgba(11, 18, 56, 0.08) !important; position: relative !important; z-index: 50 !important; } /* حاوية الهيدر فقط */ .header-inner.inner.bg-white.da-bgm .header-container { width: 100% !important; max-width: 100% !important; padding-right: 15px !important; padding-left: 15px !important; box-sizing: border-box !important; } /* الصف الداخلي */ .header-inner.inner.bg-white.da-bgm .header-container > .flex { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; } /* الجانبين */ .header-inner.inner.bg-white.da-bgm .header-container > .flex > div:first-child, .header-inner.inner.bg-white.da-bgm .header-container > .flex > div:last-child { display: flex !important; align-items: center !important; gap: 8px !important; } /* زر القائمة */ .header-inner.inner.bg-white.da-bgm .mburger { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 0 10px !important; margin: 0 !important; gap: 7px !important; color: #0B1238 !important; border-radius: 9px !important; transition: color 0.3s ease, background-color 0.3s ease !important; } .header-inner.inner.bg-white.da-bgm .mburger .sicon-menu { color: #0B1238 !important; font-size: 24px !important; } .header-inner.inner.bg-white.da-bgm .mburger p { color: #0B1238 !important; font-size: 16px !important; font-weight: 700 !important; } /* أزرار البحث والحساب */ .header-inner.inner.bg-white.da-bgm .search-btn.header-btn, .header-inner.inner.bg-white.da-bgm button.header-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; padding: 0 !important; margin: 0 !important; background-color: #2D2B26 !important; color: #D4AF60 !important; border: 1px solid #D4AF60 !important; border-radius: 9px !important; box-shadow: 0 4px 12px rgba(45, 43, 38, 0.18) !important; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease !important; } /* أيقونات البحث والحساب */ .header-inner.inner.bg-white.da-bgm .search-btn.header-btn i, .header-inner.inner.bg-white.da-bgm button.header-btn i { color: #D4AF60 !important; -webkit-text-fill-color: #D4AF60 !important; font-size: 18px !important; } /* زر السلة */ .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 0 11px !important; margin: 0 !important; gap: 7px !important; background-color: #2D2B26 !important; color: #D4AF60 !important; border: 1px solid #D4AF60 !important; border-radius: 9px !important; box-shadow: 0 4px 12px rgba(45, 43, 38, 0.18) !important; position: relative !important; transition: transform 0.3s ease, background-color 0.3s ease !important; } /* حاوية أيقونة السلة */ .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon { display: flex !important; align-items: center !important; justify-content: center !important; } /* أيقونة السلة أو علامة + */ .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon i, .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon svg, .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon svg path { color: #D4AF60 !important; fill: #D4AF60 !important; -webkit-text-fill-color: #D4AF60 !important; } .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon svg { width: 22px !important; height: 22px !important; } /* سعر السلة */ .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-content, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total i { color: #D4AF60 !important; -webkit-text-fill-color: #D4AF60 !important; font-size: 12px !important; font-weight: 700 !important; } /* عداد السلة */ .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-count { top: -7px !important; right: -5px !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; background-color: #D4AF60 !important; color: #2D2B26 !important; -webkit-text-fill-color: #2D2B26 !important; border: 2px solid #FFFFFF !important; border-radius: 50px !important; font-size: 9px !important; font-weight: 800 !important; line-height: 13px !important; } /* اللوجو */ .header-inner.inner.bg-white.da-bgm .navbar-brand { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; } .header-inner.inner.bg-white.da-bgm .navbar-brand img { display: block !important; width: auto !important; height: 48px !important; max-width: 90px !important; padding: 0 !important; margin: 0 !important; object-fit: contain !important; } /* Hover على الكمبيوتر */ @media (hover: hover) and (pointer: fine) { .header-inner.inner.bg-white.da-bgm .search-btn.header-btn:hover, .header-inner.inner.bg-white.da-bgm button.header-btn:hover, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-wrapper:hover { background-color: #D4AF60 !important; transform: translateY(-2px) !important; } .header-inner.inner.bg-white.da-bgm .search-btn.header-btn:hover i, .header-inner.inner.bg-white.da-bgm button.header-btn:hover i, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-wrapper:hover i, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-wrapper:hover svg, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-wrapper:hover svg path { color: #2D2B26 !important; fill: #2D2B26 !important; -webkit-text-fill-color: #2D2B26 !important; } } /* ========================================= الهيدر فقط على الموبايل ========================================= */ @media (max-width: 767px) { .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-content { display: block !important; opacity: 1 !important; visibility: visible !important; } /* السعر ورمز الريال */ .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total i, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total i::before { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }} /***************/ /* علامة السلة + */ .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon div[slot="icon"], .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon .sicon-add, .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon .sicon-add::before { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; opacity: 1 !important; visibility: visible !important; } /* ========================================= قلب وشير وشارة العرض في صورة المنتج فقط ========================================= */ /* حاوية القلب والشير */ .wish-share { opacity: 1 !important; visibility: visible !important; gap: 8px !important; } /* أزرار القلب والشير */ .wish-share .s-button-element:not(:disabled):not([loading]) { pointer-events: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; min-width: 42px !important; padding: 0 !important; background-color: #2D2B26 !important; color: #D4AF60 !important; border: 1px solid #D4AF60 !important; border-radius: 50% !important; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18) !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important; } /* أيقونة القلب */ .wish-share .s-button-element .sicon-heart, .wish-share .s-button-element .sicon-heart::before { color: #D4AF60 !important; -webkit-text-fill-color: #D4AF60 !important; } /* أيقونة الشير */ .wish-share .s-button-element svg, .wish-share .s-button-element svg path { color: #D4AF60 !important; fill: #D4AF60 !important; } /* حركة الـ Hover */ @media (hover: hover) and (pointer: fine) { .wish-share .s-button-element:not(:disabled):not([loading]):hover { background-color: #D4AF60 !important; color: #2D2B26 !important; transform: translateY(-4px) scale(1.06) !important; box-shadow: 0 10px 20px rgba(45, 43, 38, 0.25) !important; opacity: 0.92 !important; } .wish-share .s-button-element:hover .sicon-heart, .wish-share .s-button-element:hover .sicon-heart::before { color: #2D2B26 !important; -webkit-text-fill-color: #2D2B26 !important; } .wish-share .s-button-element:hover svg, .wish-share .s-button-element:hover svg path { color: #2D2B26 !important; fill: #2D2B26 !important; } } /* كلمة عروض العيد */ .promotion-title { background-color: #D4AF60 !important; color: #2D2B26 !important; -webkit-text-fill-color: #2D2B26 !important; padding: 7px 15px !important; border: none !important; border-radius: 0 10px 0 10px !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(45, 43, 38, 0.16) !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease !important; } @media (hover: hover) and (pointer: fine) { .promotion-title:hover { transform: translateY(-3px) !important; opacity: 0.9 !important; box-shadow: 0 8px 18px rgba(45, 43, 38, 0.24) !important; } } /* الموبايل */ @media (max-width: 767px) { .wish-share .s-button-element:not(:disabled):not([loading]) { width: 37px !important; height: 37px !important; min-width: 37px !important; } .promotion-title { padding: 5px 10px !important; font-size: 10px !important; } } .tabs__product .tab-trigger { background-color: #0B1238 !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: .375rem; border-top-right-radius: .375rem; border-radius: 10px; color: #FFFFFF !important; padding: .5rem; } .p-block--features .p--features__item { background-color: #0B1238 !important; } .p-block--features .feature-icon i, .p-block--features .feature-desc h3 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /*/////////////////////////////////////****/ /* ========================================= الفوتر بالكحلي الغامق ========================================= */ .store-footer, .store-footer__inner, footer.store-footer { background-color: #0B1238 !important; color: #FFFFFF !important; border-color: transparent !important; } /* عناوين ونصوص وروابط الفوتر */ .store-footer .footer-title, .store-footer h2, .store-footer h3, .store-footer h4, .store-footer p, .store-footer a, .store-footer span, .store-footer li { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* ========================================= وسائل الدفع ========================================= */ /* * نستخدم background-color فقط. * ممنوع استخدام background: transparent * حتى لا تختفي صور شعارات الدفع. */ element.style { background-color: rgb(7 16 33) !important; } .store-footer salla-payments, .store-footer .s-payments-list, .store-footer .footer-payments, .store-footer [class*="payment-method"] { background-color: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; } /* عناصر وسائل الدفع */ .store-footer .s-payments-list li, .store-footer .s-payments-item, .store-footer salla-payments li, .store-footer .footer-payments li { background-color: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; } /* الحفاظ على صور شعارات الدفع */ .store-footer .s-payments-list img, .store-footer salla-payments img, .store-footer .footer-payments img, .store-footer [class*="payment-method"] img { display: block !important; opacity: 1 !important; visibility: visible !important; border: none !important; box-shadow: none !important; filter: none !important; transform: none !important; max-width: 100% !important; height: auto !important; } /* الحفاظ على شعارات SVG */ .store-footer .s-payments-list svg, .store-footer salla-payments svg, .store-footer .footer-payments svg, .store-footer [class*="payment-method"] svg { display: block !important; opacity: 1 !important; visibility: visible !important; filter: none !important; transform: none !important; } /* المسافة أسفل الفوتر */ .store-footer__inner { padding-bottom: 20px !important; } .s-contacts-item { --tw-bg-opacity: 1; background-color: #f3f4f6; background-color: rgb(41 65 112); padding: .5rem; } .s-social-link a { border-radius: 9999px; border-style: none; --tw-bg-opacity: 1; background-color: #f3f4f6; background-color: rgb(41 65 112); padding: 1.25rem; } /* Instagram + TikTok + أيقونات خدمة العملاء */ .store-footer__inner .s-social-link a, .store-footer__inner .s-contacts-item { animation: footer-icons-move 2.2s ease-in-out infinite; will-change: transform; } /* حركة مستمرة ومتزامنة */ @keyframes footer-icons-move { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* الأيقونة التي يقف عليها الماوس تتوقف فقط */ .store-footer__inner .s-social-link a:hover, .store-footer__inner .s-contacts-item:hover { animation-play-state: paused; } /* ضمان ظهور الحركة وعدم قصها */ .store-footer__inner .footer-social, .store-footer__inner .social-links, .store-footer__inner salla-social, .store-footer__inner .s-social-list, .store-footer__inner .s-contacts, .store-footer__inner .s-contacts-list { overflow: visible !important; } /* ترتيب وتحسين الحركة */ .store-footer__inner .s-social-link a, .store-footer__inner .s-contacts-item { display: flex; align-items: center; } .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-content, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total i { color: #D4AF60 !important; -webkit-text-fill-color: #D4AF60 !important; font-size: 12px !important; font-weight: 700 !important; } .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon div[slot="icon"], .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon .sicon-add, .header-inner.inner.bg-white.da-bgm .header-cart #s-cart-icon .sicon-add::before { color: #bb1d1d !important; -webkit-text-fill-color: #D4AF60 !important; opacity: 1 !important; visibility: visible !important; } /* السلة والسعر بالذهبي عند مرور الماوس */ .header-inner.inner.bg-white.da-bgm .header-cart:hover #s-cart-icon div[slot="icon"], .header-inner.inner.bg-white.da-bgm .header-cart:hover #s-cart-icon .sicon-add, .header-inner.inner.bg-white.da-bgm .header-cart:hover #s-cart-icon .sicon-add::before, .header-inner.inner.bg-white.da-bgm .header-cart:hover .s-cart-summary-content, .header-inner.inner.bg-white.da-bgm .header-cart:hover .s-cart-summary-total, .header-inner.inner.bg-white.da-bgm .header-cart:hover .s-cart-summary-total i { color: #D4AF60 !important; -webkit-text-fill-color: #2D2B26 !important; } /* تنسيق السعر */ .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total, .header-inner.inner.bg-white.da-bgm .header-cart .s-cart-summary-total i { font-size: 12px !important; font-weight: 700 !important; } custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover { background: #D4AF60 !important; background-color: #D4AF60 !important; color: #000000 !important; -webkit-text-fill-color: #ffffff !important; border-color: #D4AF60 !important; transform: translateY(-2px); } /* لضمان تغيير النص والأيقونة داخل الزر */ custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover * { color: #000000 !important; -webkit-text-fill-color: #ffffff !important; } .s-button-primary { height: 100%; background-color: #414042; background-color: rgb(41 65 112); border-color: #414042; border-color: var(--color-primary); border-width: 0px; color: #ff6767; color: var(--color-primary-reverse); } .store-footer, .store-footer__inner, footer.store-footer { background-color: #0B1238 !important; color: #FFFFFF !important; padding-bottom: 32px !important; border-color: transparent !important; } /* ===================================== Luxury Gold & Navy Slider Arrows Safe Version - لا يغير تموضع الأسهم ===================================== */ .s-slider-block__title-nav { align-items: center !important; gap: 14px !important; padding: 3px 5px !important; overflow: visible !important; /* لا نستخدم position أو display حتى نحافظ على تموضع الثيم الأصلي */ } /* الشكل الأساسي للسهمين */ .s-slider-block__title-nav .s-slider-nav-arrow { width: 39px !important; height: 39px !important; min-width: 39px !important; min-height: 39px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background-color: #0B1238 !important; /* لمعة بدون pseudo-element وبدون position */ background-image: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.42) 48%, transparent 66% ) !important; background-size: 260% 100% !important; background-position: 130% 0 !important; background-repeat: no-repeat !important; border: 1px solid #D4AF60 !important; border-radius: 10px !important; color: #D4AF60 !important; box-shadow: 0 5px 12px rgba(11, 18, 56, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; overflow: hidden !important; isolation: isolate; transition: translate 0.3s ease, background-color 0.3s ease, background-position 0.55s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important; /* مهم: لا تضع position هنا ولا تضع transform هنا */ } /* قص الزوايا */ .s-slider-block__title-nav .s-slider-prev { border-radius: 10px 10px 4px 10px !important; } .s-slider-block__title-nav .s-slider-next { border-radius: 10px 10px 10px 4px !important; } /* الأيقونة */ .s-slider-block__title-nav .s-slider-button-icon { display: flex !important; align-items: center !important; justify-content: center !important; transition: translate 0.3s ease !important; } .s-slider-block__title-nav .s-slider-button-icon svg { width: 18px !important; height: 18px !important; } .s-slider-block__title-nav .s-slider-button-icon svg path { fill: currentColor !important; transition: fill 0.3s ease !important; } /* Hover */ .s-slider-block__title-nav .s-slider-nav-arrow:not(.swiper-button-disabled):not(:disabled):hover { background-color: #D4AF60 !important; background-position: -130% 0 !important; border-color: #D4AF60 !important; color: #0B1238 !important; /* translate لا يلغي transform الأصلي بتاع الثيم */ translate: 0 -3px; box-shadow: 0 9px 20px rgba(11, 18, 56, 0.18), 0 4px 10px rgba(212, 175, 96, 0.25) !important; } /* حركة أيقونة السهم */ .s-slider-block__title-nav .s-slider-prev:not(.swiper-button-disabled):not(:disabled):hover .s-slider-button-icon { translate: 3px 0; } .s-slider-block__title-nav .s-slider-next:not(.swiper-button-disabled):not(:disabled):hover .s-slider-button-icon { translate: -3px 0; } /* السهم غير المتاح */ .s-slider-block__title-nav .s-slider-nav-arrow.swiper-button-disabled, .s-slider-block__title-nav .s-slider-nav-arrow:disabled { background-color: rgba(11, 18, 56, 0.06) !important; background-image: none !important; border-color: rgba(11, 18, 56, 0.15) !important; color: rgba(11, 18, 56, 0.28) !important; box-shadow: none !important; opacity: 1 !important; cursor: default !important; translate: 0 0 !important; } /* الوصول بالكيبورد */ .s-slider-block__title-nav .s-slider-nav-arrow:focus-visible { outline: 2px solid #D4AF60 !important; outline-offset: 3px !important; } /* الموبايل */ @media (max-width: 767px) { .s-slider-block__title-nav { gap: 8px !important; padding: 2px !important; } .s-slider-block__title-nav .s-slider-nav-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; border-radius: 8px !important; } .s-slider-block__title-nav .s-slider-button-icon svg { width: 15px !important; height: 15px !important; } } /* الموبايلات الصغيرة */ @media (max-width: 480px) { .s-slider-block__title-nav .s-slider-nav-arrow { width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; } .s-slider-block__title-nav .s-slider-button-icon svg { width: 14px !important; height: 14px !important; } } custom-salla-product-card.s-product-card-entry { position: relative !important; overflow: hidden !important; } custom-salla-product-card.s-product-card-entry .s-product-card-promotion-title { position: absolute !important; top: 0 !important; right: 0 !important; z-index: 5 !important; width: max-content !important; max-width: 75% !important; margin: 0 !important; padding: clamp(4px, 0.6vw, 6px) clamp(8px, 1.3vw, 14px) !important; background: #d4af60 !important; color: var(--dark) !important; -webkit-text-fill-color: var(--dark) !important; border: 0 !important; border-radius: 0 10px 0 10px !important; box-shadow: none !important; font-size: clamp(9px, 0.9vw, 11px) !important; font-weight: 700 !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; animation: none !important; } /* التابلت */ @media (min-width: 768px) and (max-width: 1023px) { custom-salla-product-card.s-product-card-entry .s-product-card-promotion-title { max-width: 70% !important; padding: 5px 11px !important; font-size: 10px !important; border-radius: 0 9px 0 9px !important; } } /* الموبايل */ @media (max-width: 767px) { custom-salla-product-card.s-product-card-entry .s-product-card-promotion-title { max-width: 68% !important; padding: 4px 9px !important; font-size: 9px !important; border-radius: 0 8px 0 8px !important; } } /* الموبايلات الصغيرة */ @media (max-width: 390px) { custom-salla-product-card.s-product-card-entry .s-product-card-promotion-title { max-width: 62% !important; padding: 3px 7px !important; font-size: 8px !important; border-radius: 0 7px 0 7px !important; } }