/* Add custom CSS styles below */ .header-container { padding: 0px 35px; } #wa-angel { opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s ease; animation: showWhatsapp 0.5s ease forwards; animation-delay: 10s; } @keyframes showWhatsapp { to { opacity: 1; visibility: visible; transform: translateY(0); } } /* رفع زر الواتساب فقط في الصفحات التي تحتوي على شريط المنتجات السفلي */ body:has(.sticky-product-bar) #wa-angel { bottom: 8.5rem !important; } /* استهداف صور المنتج الرئيسية في صفحة المنتج */ .details-slider .swiper-slide img { /* ضع تعديلاتك هنا، هذه أمثلة: */ border-radius: 16px !important; /* لجعل حواف الصورة دائرية */ } /* استهداف خلفية شريط مسار التنقل (Breadcrumbs) */ div.bg-gray-100:has(.breadcrumbs) { background-color: transparent !important; /* يمكنك تغيير transparent لأي لون تريده */ } .s-slider-thumbs .s-slider-thumbs-container .swiper-slide { background-color: transparent !important; } .s-slider-thumbs .s-slider-thumbs-container .swiper-slide:after { --tw-ring-color : transparent; box-shadow : none !important; } section.blog, section.s-block--faqs, section.appcat { /* تم حذف الفاصلة التي كانت هنا */ padding-top: 35px; padding-bottom: 35px; } .s-block--faqs .faqs-list input:checked+div { border: solid 0.5px; } section.s-block--faqs .btn-primary { background-color: #80c345; } #angel-stories { padding-top: 15px; padding-bottom: 15px; } #angel-stories .s-block__title { display: none; } .s-block__title h1, .s-block__title h2, .s-block__title h3 { font-feature-settings: "swsh" 1, "cswh" 1, "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "liga" 1, "dlig" 1 !important; } /* إضافة مسافة جانبية لكل الأقسام */ section.s-block { padding-left: 35px !important; padding-right: 35px !important; } /* استثناء القسم الأول تماماً (ليبقى بعرض الشاشة الكامل) */ section.home-slider { padding-left: 0 !important; padding-right: 0 !important; } /* --- إعدادات الحاوية --- */ .divider-icon .img-container { position: relative; width: 48px; height: 48px; transform-style: preserve-3d; perspective: 800px; } /* --- الصورة الأساسية (الوجه الأمامي) --- */ .divider-icon img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; backface-visibility: hidden; transform: rotateY(0deg) translateZ(0); animation: frontSpin 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-play-state: paused; } /* --- النجمة (الوجه الخلفي) --- */ .divider-icon .img-container::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 70%; background-repeat: no-repeat; background-position: center; backface-visibility: hidden; transform: rotateY(180deg) translateZ(0); animation: backSpin 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-play-state: paused; } html.dark .divider-icon .img-container::after { background-image: url("data:image/svg+xml;utf8,"); } /* --- علامة الصح (تعديل لضمان الالتصاق بالحركة) --- */ .divider-icon .img-container::before { content: ""; position: absolute; top: 48%; left: 50%; width: 8px; height: 13px; border-right: 3.5px solid white; border-bottom: 3.5px solid white; /* إزالة transform الثابت لأنه سيتحرك في الـ Keyframes */ transform-origin: center; opacity: 0; z-index: 2; backface-visibility: hidden; will-change: transform, opacity; animation: drawFakeCheck 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-play-state: paused; } html.dark .divider-icon .img-container::before { border-right: 3.5px solid #1b5e20; border-bottom: 3.5px solid #1b5e20; } /* --- تشغيل جميع الحركات معاً عند إضافة كلاس reveal-visible --- */ .sbauth.reveal-visible .divider-icon img, .sbauth.reveal-visible .divider-icon .img-container::after, .sbauth.reveal-visible .divider-icon .img-container::before { animation-play-state: running; } /* ========================================= */ /* --- الإطارات الرئيسية للحركة (Keyframes) --- */ /* ========================================= */ @keyframes frontSpin { /* تأخير وبداية من الصفر */ 0%, 10% { transform: rotate(0deg) rotateY(0deg); } /* الوجه يلتف للخلف (تظهر النجمة) */ 20%, 60% { transform: rotate(180deg) rotateY(180deg); } /* الوجه يرجع للأمام (يظهر الشعار) */ 70%, 100% { transform: rotate(360deg) rotateY(360deg); } } @keyframes backSpin { /* تأخير وهي في الخلف */ 0%, 10% { transform: rotate(180deg) rotateY(180deg); } /* الوجه يلتف للأمام (تظهر النجمة للمستخدم) */ 20%, 60% { transform: rotate(360deg) rotateY(360deg); } /* الوجه يرجع للخلف */ 70%, 100% { transform: rotate(540deg) rotateY(540deg); } } @keyframes drawFakeCheck { /* 1. البداية: تكون في الخلف مع النجمة (مقلوبة) وغير مرئية */ 0%, 10% { opacity: 0; transform: translate(-50%, -50%) rotate(180deg) rotateY(180deg) scale(0); } /* 2. تبدأ بالدوران مع النجمة للأمام وتظهر عند وصول الدوران لدرجة الصفر */ 20% { opacity: 1; transform: translate(-50%, -50%) rotate(360deg) rotateY(360deg) scale(0); } /* 3. حركة الارتداد (الظهور) بعد وصول الوجه للأمام */ 24% { opacity: 1; transform: translate(-50%, -50%) rotate(360deg) rotateY(360deg) scale(1.1) rotate(45deg); } /* 4. ثبات تام وهي ملتصقة بالوجه الأمامي */ 26%, 60% { opacity: 1; transform: translate(-50%, -50%) rotate(360deg) rotateY(360deg) scale(1) rotate(45deg); } /* 5. الاختفاء مع الدوران: هنا السر، تبدأ باللف مع النجمة للخلف */ 70%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(540deg) rotateY(540deg) scale(0.5) rotate(45deg); } } /* سيتم التطبيق فقط عندما لا يحتوي html على كلاس dark */ html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3 { padding-top: 0.12em !important; overflow: visible !important; background-image: linear-gradient(49deg, var(--token-a378a457-09c9-4e21-8971-31a4dc6ae8ea, rgb(17, 16, 17)) 0%, var(--token-77abf34c-bfd0-46e4-bdc5-396472ca5ca6, rgba(17, 16, 17, 0.6)) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; background-size: 100% 100%; } html.dark .s-block--faqs .faqs-list__item { border: 1px solid #96ce5a52 !important; } html.dark section.s-block--features.angel-features { border: solid 1px #96ce5a52 !important; } section.s-block--features.angel-features { margin: 20px 0px 28px 0px; padding: 35px 0px; } .s-block--features .angel-feature i { color: #7fc245 !important; } html.dark .s-block--faqs .faqs-list input:checked+div label { color: #7fc245 !important; } html.dark .s-block--faqs .faqs-list input:checked+div .open-badge { background-color: #7fc245 !important; } html.dark .sbauth p { color: white; } .sbauth p { font-feature-settings: "swsh" 1, "cswh" 1, "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "liga" 1, "dlig" 1 !important; } html.dark .sbauth img { filter: invert(66%) sepia(48%) saturate(685%) hue-rotate(54deg) brightness(107%) contrast(89%); } .sbauth { padding-top: 0px; padding-bottom: 0px; } .sbauth a { font-size: 12px; } @font-face { font-family: 'The Year of Handicrafts'; src: url('https://cdn.jsdelivr.net/gh/hamzaabido/linkin@main/TheYearofHandicrafts-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'The Year of Handicrafts'; src: url('https://cdn.jsdelivr.net/gh/hamzaabido/linkin@main/TheYearofHandicrafts-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'The Year of Handicrafts'; src: url('https://cdn.jsdelivr.net/gh/hamzaabido/linkin@main/TheYearofHandicrafts-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'The Year of Handicrafts'; src: url('https://cdn.jsdelivr.net/gh/hamzaabido/linkin@main/TheYearofHandicrafts-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* تطبيق الخط بشكل جذري على كافة عناصر الموقع */ *, body, html, h1, h2, h3, h4, h5, h6, p, a, span, button, input, div { font-family: 'The Year of Handicrafts', sans-serif !important; } /* تغطية المتغيرات الأساسية للخطوط في منصة سلة إن وُجدت */ :root { --font-main: 'The Year of Handicrafts', sans-serif !important; --font-primary: 'The Year of Handicrafts', sans-serif !important; } /* تفعيل استطالات الخطوط والبدائل الزخرفية في نصوص السلايدر الرئيسي */ .home-slider__content .hero-slider-title h3 { /* تفعيل الاستطالات (Swashes) والبدائل الأسلوبية المدمجة في الخط */ font-feature-settings: "swsh" 1, "cswh" 1, "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "liga" 1, "dlig" 1 !important; font-variant-alternates: swash(1); /* (اختياري) تحسين تباعد الأسطر إذا كانت الاستطالات تتداخل */ line-height: 1.5 !important; } html.dark .home-slider__content .hero-slider-subtitle .description { color: #98ea51 !important; } #s-theme_edit_bar { display: none !important; } .ratingplus-loyalty-launcher { display: none !important; }/* ========================================= زر الواتساب - النبض النيوني القوي + الالتفاف 3D ========================================= */ #wa-angel { display: flex !important; z-index: 9999 !important; perspective: 1000px !important; } #wa-angel a { width: 58px !important; /* الحجم الذي فضلته */ height: 58px !important; position: relative !important; display: block !important; background: transparent !important; text-decoration: none !important; } /* 🔄 الغلاف الداخلي الذي سيلتف 🔄 */ .wa-flip-wrapper { width: 100% !important; height: 100% !important; position: absolute !important; transform-style: preserve-3d !important; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* حالة الالتفاف (تفعلها الجافاسكريبت تلقائياً) */ .wa-flip-wrapper.is-flipped { transform: rotateY(180deg) !important; } .wa-flip-wrapper { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } /* إعدادات الوجهين */ .wa-front, .wa-back { position: absolute !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; backface-visibility: hidden !important; display: flex !important; align-items: center; justify-content: center; } /* --- الوجه الأمامي (بألوانك المفضلة) --- */ .wa-front { z-index: 2; background: linear-gradient(135deg, #25D366, #128C7E) !important; border: 2px solid rgba(255, 255, 255, 0.8) !important; box-shadow: 0 0 15px rgba(37, 211, 102, 0.6) !important; } .wa-front i { font-size: 34px !important; color: #ffffff !important; margin: 0 !important; z-index: 3 !important; /* فوق النبض */ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important; } /* 🌟 موجة النبض النيونية القوية (السحر الذي طلبته) 🌟 */ .wa-pulse-wave { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 50% !important; border: 2px solid #25D366 !important; box-shadow: 0 0 20px #25D366, inset 0 0 15px #25D366 !important; z-index: 1 !important; animation: neon-framer-pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; } /* إخفاء النبض أثناء التفاف الزر */ .is-flipped .wa-pulse-wave { opacity: 0 !important; animation: none !important; } /* --- الوجه الخلفي (خلفية #0f251b) --- */ .wa-back { transform: rotateY(180deg) !important; background: linear-gradient(135deg, #1fa451, #083b1c) !important; border: 2px solid #39ff14 !important; /* إطار نيون */ box-shadow: 0 0 15px rgba(57, 255, 20, 0.4) !important; } .wa-profile-pic { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .wa-profile-pic img { width: 100%; height: 100%; object-fit: cover; color: red; mix-blend-mode: plus-lighter; } /* --- تاق متصل الآن (يظهر من اليسار) --- */ .wa-status-tag { position: absolute !important; top: 50% !important; right: 110% !important; /* يبدأ من يسار الزر */ transform: translateY(-50%) scaleX(0) !important; transform-origin: right !important; background: white !important; color: black !important; padding: 6px 12px !important; border-radius: 8px !important; font-size: 11px !important; font-weight: bold !important; white-space: nowrap !important; border: 1px solid silver !important; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; opacity: 0 !important; } /* إظهار التاق فقط عندما يلتف الزر */ .is-flipped .wa-status-tag { transform: translateY(-50%) scaleX(1) !important; opacity: 1 !important; transition-delay: 0.4s !important; } /* ========================================= الوضع الليلي (Dark Mode) بألوانك ========================================= */ html.dark .wa-front { background: linear-gradient(135deg, #1fa451, #083b1c) !important; border-color: rgba(37, 211, 102, 0.4) !important; box-shadow: 0 0 20px rgba(37, 211, 102, 0.3) !important; } html.dark .wa-pulse-wave { border-color: #39ff14 !important; box-shadow: 0 0 25px #39ff14, inset 0 0 20px #39ff14 !important; } html.dark .wa-back { box-shadow: 0 0 25px #39ff14 !important; } html.dark .wa-status-tag { box-shadow: -5px 0 15px rgba(57, 255, 20, 0.2) !important; background: #70e333 !important; box-shadow: 0 0 10px #39ff14 !important; border: 1px solid #39ff14 !important; } /* حركة النبض التي أحببتها */ @keyframes neon-framer-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.75); opacity: 0; } } .bg-green-500 { display: none !important; } @media (max-width: 768px) { /* أضفنا body و salla-slider لزيادة قوة الكود وإجبار المتصفح على تنفيذه فوق أي جافاسكربت */ body .s-block--full-bg salla-slider .home-slider__content { top: auto !important; bottom: 270px !important; /* تصفير متغيرات Tailwind التي تسبب القفزة في الجوال */ --tw-translate-y: 0px !important; /* إجبار العنصر على البقاء في مكانه وتجاهل حسابات السلايدر العمودية */ transform: translate(-50%, 0px) !important; } } /* تغيير صورة الجوال في الوضع الليلي */ html.dark .s-block--hero-slider .swiper-lazy-wrap img:nth-of-type(2) { content: url("https://i.ibb.co/QR70cBr/header.gif") !important; } /* تغيير صورة الكمبيوتر في الوضع الليلي (بما أن الكود يحتوي على صورتين) */ html.dark .s-block--hero-slider .swiper-lazy-wrap img:nth-of-type(1) { content: url("رابط_الصورة_الخاصة_بالوضع_الليلي_للكمبيوتر.webp") !important; } .bg-green-500 { background-color: transparent !important; } /*#angel-stories .swiper-slide { margin-left: 30px !important; }*/ .rp-carousel-full-width { display: none !important; } body { background-color: #ffffff !important; } /* Add custom CSS styles below */ /* إصلاح مشكلة اختفاء الهيدر العلوي عند السكرول مع وجود القائمة السفلية */ #mainnav.has-header-bottom.fixed-header.fixed-pinned { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; height: auto !important; /* لإلغاء ارتفاع الـ 0 بيكسل الذي تسببه الجافاسكربت */ min-height: 80px !important; /* الحفاظ على الارتفاع الأصلي للهيدر */ background-color: #ffffff !important; /* لون خلفية الهيدر، يمكنك تغييره إن أردت */ z-index: 100 !important; transform: translateY(0) !important; visibility: visible !important; opacity: 1 !important; } /* إظهار محتوى الهيدر الداخلي (الشعار والأيقونات) عند السكرول */ #mainnav.has-header-bottom.fixed-header.fixed-pinned .header-inner, #mainnav.has-header-bottom.fixed-header.fixed-pinned .header-container { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; padding: 0px 15px; } /* ضمان عمل توزيع العناصر (Flexbox) بداخل الهيدر بشكل سليم */ #mainnav.has-header-bottom.fixed-header.fixed-pinned .header-container > .flex { display: flex !important; opacity: 1 !important; visibility: visible !important; } /* منع الحركة المزدوجة (التأخير) وتداخل الخلفيات في الهيدر الداخلي */ #mainnav.has-header-bottom.fixed-header.fixed-pinned .header-inner { animation: none !important; transition: none !important; background-color: transparent !important; transform: translateY(0) !important; } /* لمسة إضافية: إضافة ظل خفيف جداً للهيدر الرئيسي ليفصله عن محتوى المتجر بنعومة عند السكرول */ #mainnav.has-header-bottom.fixed-header.fixed-pinned { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; } #mainnav.has-header-bottom.fixed-header.fixed-pinned { backdrop-filter: blur(15px) !important; border-radius: 0px 0px 15px 15px !important; background: transparent !important; } .bottom-header-icon i+span { display: none; } .main-nav-container.fixed-pinned .inner { box-shadow: none !important; } .bottom-header { opacity: 1; background-color: transparent; backdrop-filter: blur(7px) !important; border: solid 0.5px silver; border-radius: 50px; } /* 1. إخفاء المسميات النصية وسعر السلة */ .bottom-header-home .bottom-header-icon span, .bottom-header-menu .bottom-header-icon span, .bottom-header-search .search-btn span, .bottom-header-user > span, .bottom-header-cart .s-cart-summary-content { display: none !important; } .s-product-card-entry { border-width: 0.75px; } .s-product-card-content-footer salla-add-product-button .s-button-outline { border-color: #c0c0c0c0; } .s-product-card-content salla-add-product-button .s-button-text i { color: red !important; } /* إخفاء أيقونة الحقيبة */ .s-product-card-content salla-add-product-button .s-button-text i { font-size: 0 !important; width: 18px; height: 18px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* جعل محتوى الزر flex */ .s-product-card-content salla-add-product-button .s-button-text { display: flex; align-items: center; justify-content: center; gap: 6px; } /* نقل الأيقونة لليسار */ .s-product-card-content salla-add-product-button .s-button-text i { order: 2; } /* النص على اليمين */ .s-product-card-content salla-add-product-button .s-button-text span { order: 1; } .s-product-card-promotion-title { display: none; } /* 1. تنسيق الحاوية: إضافة المسافات وإخفاء الزوائد */ custom-salla-product-card.s-product-card-entry .s-product-card-image { filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.45)) drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.5)); padding: 20px 18px 8px 18px !important; /* المسافات: أعلى، يمين، أسفل(صفر)، يسار */ border-radius: 15px !important; /* تدوير زوايا الحاوية نفسها */ } /* 2. تنسيق الصورة نفسها: تطبيق الانحناء عليها مباشرة */ custom-salla-product-card.s-product-card-entry .s-product-card-image img { border-radius: 15px !important; /* تدوير الزوايا العلوية للصورة لتماشي الإطار */ object-fit: contain !important; /* للحفاظ على أبعاد الصورة داخل الإطار الجديد */ } /* إخفاء الوصف */ .appcat .text-wrapper p { display: none !important; } /* الكرت */ .appcat .banner-square { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; } /* الرابط */ .appcat .banner-square > a { display: inline-block !important; width: auto !important; } /* الصورة */ .appcat .box-img { display: flex; justify-content: center; } .appcat .box-img img { display: block; margin: 0 auto !important; /* ظل قوي، عميق، ومحصور لتجنب القص الجانبي */ filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15)) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.3)) !important; } /* بوكس النص */ .appcat .text-wrapper { display: inline-block !important; padding: 6px 14px !important; margin-top: 8px !important; text-align: center !important; border: 1px solid silver !important; border-radius: 14px !important; margin-top: 0rem !important; backdrop-filter: blur(8px); } /* بوكس النص */ html.dark .appcat .text-wrapper { display: inline-block !important; padding: 6px 14px !important; margin-top: 8px !important; text-align: center !important; border: 1px solid transparent !important; border-radius: 14px !important; background: linear-gradient(#0f280c, #1f293775) padding-box, linear-gradient(135deg, #80c345, #11182700, #346e00) border-box !important; box-shadow: 0 0 20px rgba(128,195,69,.25), inset 0 0 10px rgba(128,195,69,.05), 0 5px 15px rgba(0,0,0,.5) !important; margin-top: 0rem !important; backdrop-filter: blur(8px); } /* النص */ .appcat .text-wrapper h3 { margin: 0 !important; white-space: nowrap !important; font-size: 0.65rem !important; } /* المسافات */ .appcat .square-grid { gap: 2rem !important; } .appcat .s-block__title { text-align: center; } /* 1. إجبار الحاوية الخارجية على التمرير في سطر واحد أفقي */ .s-block--banners.category .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; } /* 2. كسر إعدادات سلة: إجبار الكرت ليكون مستطيلاً عريضاً */ .s-block--banners.category .swiper-slide.banner-square { width: 500px !important; min-width: 270px !important; flex-shrink: 0 !important; } /* 3. التصميم الداخلي: توزيع الصورة والنص جنباً إلى جنب بشكل مثالي */ .category .banner-square > div { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; border: 1px solid #ddd !important; padding: 12px 15px !important; border-radius: 12px !important; background-color: #fff !important; width: 100% !important; box-shadow: rgb(50 50 93 / 17%) 0px 13px 27px -5px, rgb(0 0 0 / 12%) 0px 8px 16px -8px; box-sizing: border-box !important; overflow: hidden !important; } /* 4. تثبيت حجم الصورة الصندوقية (مربع الأيقونة) كي لا يتأثر */ .category .banner-square a { flex: 0 0 70px !important; width: 70px !important; height: 70px !important; margin: 0 !important; filter: drop-shadow(8px 5px 10px #acacac); } .category .banner-square .box-img, .category .banner-square .box-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* 5. إعطاء مساحة للتنفس للنصوص لمنعها من التكدس الطولي */ .category .banner-square .relative { flex: 1 1 auto !important; text-align: right !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; } /* ترتيب العناوين وإجبارها على سطر واحد */ .category .banner-square h3 { margin: 0 0 8px 0 !important; font-size: 15px !important; font-weight: bold !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .category .banner-square p { margin: 0 !important; font-size: 12px !important; color: #666 !important; line-height: 1.4 !important; } .category .swiper-scrollbar.swiper-scrollbar-horizontal, .blog .swiper-scrollbar.swiper-scrollbar-horizontal { background-color: #2c5b24; } /* 6. إضافة الدائرة السوداء والسهم الأبيض */ .category .banner-square > div::after { content: ""; position: absolute; bottom: 8px; left: 8px; width: 20px; height: 20px; background-color: #000000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; border-radius: 50%; box-shadow: 3px 3px 10px rgb(0 0 0 / 23%); z-index: 10; pointer-events: none; } /* 6. إضافة الدائرة السوداء والسهم الأبيض */ .blog .banner-square > div::after { content: ""; position: absolute; bottom: 11px; left: 11px; width: 20px; height: 20px; background-color: #000000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; border-radius: 50%; box-shadow: 3px 3px 10px rgb(0 0 0 / 23%); z-index: 10; pointer-events: none; } .blog .s-block__title { text-align: center; } section.s-block--features.angel-features .category .swiper-scrollbar+.swiper-wrapper { padding-bottom: 2rem; } .category .s-products-list-wrapper { margin-bottom: 0rem !important; } .container { /* التدرج الأفقي: تلاشي من اليمين واليسار فقط */ -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); } //////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// .carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) { padding-left: 5rem; } .s-products-list-wrapper { gap : 1.25rem; } /* ========================================= تعديلات قسم angel-products-4 فقط ========================================= */ /* 1. إخفاء العناوين والوصف والسعر قبل الخصم */ .featured .s-product-card-content-title, .featured .s-product-card-content-subtitle, .featured .s-product-card-content-main { display: none !important; } /* 2. ترتيب العناصر (السعر يمين والزر يسار في سطر واحد) */ .featured .s-product-card-content { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 10px 15px !important; } .featured .s-product-card-content-sub { margin: 0 !important; width: auto !important; } /* 3. إعدادات الزر وحاويته ليكون دائرة فقط */ .featured .s-product-card-content-footer, .featured .s-product-card-content-footer salla-add-product-button, .featured .s-product-card-content-footer salla-button, .featured .s-product-card-content-footer .w-full { width: auto !important; margin: 0 !important; } .featured .s-button-element { border-radius: 50% !important; width: 20px !important; height: 20px !important; padding: 0 !important; min-width: unset !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: black; border-color: transparent !important; } /* 4. إخفاء نص "أضف للسلة" والإبقاء على أيقونة السهم المخصصة وتوسيطها */ .featured .s-product-card-content salla-add-product-button .s-button-text span { display: none !important; /* يخفي النص فقط */ } .featured .s-product-card-content salla-add-product-button .s-button-text { gap: 0 !important; /* إلغاء الفراغ الذي كان موجوداً بين الأيقونة والنص */ justify-content: center !important; } .featured .s-product-card-content salla-add-product-button .s-button-text i { display: inline-block !important; /* إجبار السهم على الظهور */ margin: 0 !important; } /* إخفاء النص الحر (أضف للسلة) وتقليص مساحته للصفر */ .featured .s-product-card-content salla-add-product-button .s-button-text { font-size: 0 !important; color: transparent !important; line-height: 0 !important; } /* إظهار الأيقونة/السهم وتوسيطه داخل الدائرة بشكل مثالي */ .featured .s-product-card-content salla-add-product-button .s-button-text i { font-size: 18px !important; /* حجم السهم/الأيقونة */ visibility: visible !important; color: inherit !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } .featured .s-product-card-content salla-add-product-button .s-button-text i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E") !important; /* تحديد حجم الصورة بالبكسل بدلاً من contain */ background-size: 14px !important; /* إجبار الصورة لتبقى في المنتصف بعد تصغيرها */ background-position: center !important; background-repeat: no-repeat !important; } .angel-products .prog { display: none !important; } custom-salla-product-card.rounded-2xl { box-shadow: rgb(50 50 93 / 17%) 0px 13px 27px -5px, rgb(0 0 0 / 12%) 0px 8px 16px -8px; } .s-block--angel-products .s-products-list-wrapper { padding-bottom: 29px; } .s-products-slider-wrapper .s-slider-container { padding-bottom: 35px; } .s-products-list-wrapper { margin-bottom: 0rem !important; } /*.s-product-card-content-title.line-clamp-2 { -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; white-space: normal !important; }*/ /* 1. إعدادات الحاوية لتقسيم العناصر (العنوان بالأعلى، والسعر والزر بالأسفل) */ .services .s-product-card-content { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; /* السر هنا: يسمح بنزول العناصر لسطر جديد */ justify-content: space-between !important; align-items: center !important; padding: 10px 15px !important; } /* 2. إجبار حاوية العنوان على أخذ العرض بالكامل لتكون في الأعلى بمفردها */ .services .s-product-card-content-main { width: 100% !important; margin-bottom: 8px !important; /* مسافة بين العنوان والسعر/الزر */ display: block !important; } /* التأكد من ظهور اسم المنتج */ .services .s-product-card-content-title { display: block !important; } /* 3. إخفاء الوصف (العنوان الثانوي) والسعر القديم */ .services .s-product-card-content-subtitle, .services .s-product-card-sale-price span { display: none !important; } /* 4. حاوية السعر وحاوية الزر تأخذ مساحة صغيرة لتصبح جنباً إلى جنب في السطر السفلي */ .services .s-product-card-content-sub, .services .s-product-card-content-footer, .services .s-product-card-content-footer salla-add-product-button, .services .s-product-card-content-footer salla-button, .services .s-product-card-content-footer .w-full { width: auto !important; margin: 0 !important; } /* 5. إعدادات الزر ليكون دائرة سوداء */ .services .s-button-element { border-radius: 50% !important; width: 20px !important; /* عدلتها لـ 28 بكسل لأن 20 بكسل ستكون صغيرة جداً للمس في الجوال */ height: 20px !important; padding: 0 !important; min-width: unset !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: black !important; border-color: transparent !important; } /* 6. إخفاء نص "أضف للسلة" تماماً */ .services .s-product-card-content salla-add-product-button .s-button-text span { display: none !important; } .services .s-product-card-content salla-add-product-button .s-button-text { font-size: 0 !important; color: transparent !important; line-height: 0 !important; gap: 0 !important; justify-content: center !important; } /* 7. إعداد السهم الأبيض وتوسيطه داخل الدائرة السوداء */ .services .s-product-card-content salla-add-product-button .s-button-text i::before { display: none !important; /* إخفاء أيقونة السلة القديمة كلياً */ } .services .s-product-card-content salla-add-product-button .s-button-text i { visibility: visible !important; display: inline-block !important; margin: 0 !important; width: 14px !important; height: 14px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E") !important; background-size: 14px !important; background-position: center !important; background-repeat: no-repeat !important; } /* إجبار العنوان على الظهور في سطرين كحد أقصى */ .services .s-product-card-content-title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; margin: 0 !important; } .special-product .container { padding-bottom: 35px; } .special-product .s-button-text { font-size: 0px; display: flex; } .special-product .container > div.bg-white { border: solid 1px #c0c0c0; box-shadow: rgb(50 50 93 / 17%) 0px 13px 27px -5px, rgb(0 0 0 / 12%) 0px 8px 16px -8px; } .special-product salla-add-product-button button { background-color: black; border-color: transparent; } .special-product .btn--primary { background-color: transparent; } /* توسيط المحتوى بالكامل في قسم الباقة (special-product) */ .special-product .flex-col.gap-1.p-4 { align-items: center !important; text-align: center !important; } .special-product img { padding: 25px; border-radius: 35px; filter: drop-shadow(0px 6px 12px rgba(50, 50, 93, 0.25)) drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.3)); } /* توسيط العناوين والنصوص وإلغاء التبرير (text-justify) */ .special-product h2, .special-product p, .special-product .tabs__item h4, .special-product .tabs__item p { text-align: center !important; text-justify: none !important; } /* توسيط قسم السعر، أيقونات التابات، والأزرار السفلية */ .special-product .special-price, .special-product .tabs__special, .special-product .special-products-btn { justify-content: center !important; width: 100% !important; } .special-product .btn--primary { color: black; } .blog .carousel-slider .swiper-wrapper > div { padding: 15px; outline: solid 1px #dfdfdf; outline-offset: -5px; border-radius: 15px; } html.dark .blog .carousel-slider .swiper-wrapper > div { outline: solid 1px #73b23f ; } /* إخفاء الجزء الأوسط والسفلي من الفوتر افتراضياً */ .store-footer .footer-middle, .store-footer .footer-bottom { display: none !important; } /* إظهار الأجزاء المخفية عند الضغط على الزر */ .store-footer.show-extended-footer .footer-middle, .store-footer.show-extended-footer .footer-bottom { display: flex !important; } /* تنسيق الزر وتعديل المسافات لتجنب قائمة الجوال */ .toggle-footer-btn { display: flex; justify-content: center; align-items: center; width: fit-content; /* أضفنا 90 بكسل من الأسفل لرفع الزر فوق قائمة الجوال */ margin: 50px auto 170px auto; padding: 10px 24px; background-color: transparent; color: inherit; border: 1px solid rgba(150, 150, 150, 0.5); border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; font-family: inherit; } /* إرجاع المسافة السفلية للوضع الطبيعي عند فتح القائمة السفلية */ .store-footer.show-extended-footer .toggle-footer-btn { margin-bottom: 20px; } /* تأثير عند تمرير الماوس */ .toggle-footer-btn:hover { background-color: rgba(150, 150, 150, 0.1); } /* 1. التنسيق الأساسي للزر (الوضع الفاتح) */ .custom-view-all-btn { /*display: flex !important;*/ justify-content: center; align-items: center; margin: 15px auto !important; padding: 8px 25px !important; background-color: transparent !important; border: 1px solid #d0d0d0 !important; /* لونك الأخضر */ border-radius: 50px !important; width: fit-content !important; font-size: 14px !important; color: #333 !important; /* لون النص في الوضع الفاتح */ text-decoration: none !important; transition: all 0.3s ease !important; display: none; } /* 2. هوفر الوضع الفاتح */ .custom-view-all-btn:hover { background-color: transparent !important; border-color: #000 !important; color: #000 !important; } /* 3. تنسيق الوضع الليلي (Dark Mode) */ html.dark .custom-view-all-btn { color: #eee !important; /* نص فاتح ليظهر على الخلفية الغامقة */ border-color: #9fda5f !important; } /* 4. هوفر الوضع الليلي (التخصيص الذي طلبته) */ html.dark .custom-view-all-btn:hover { background-color: #9fda5f !important; /* خلفية خضراء عند الهوفر */ border-color: #9fda5f !important; color: #000 !important; /* النص يصبح أسود ليكون مقروءاً فوق الأخضر */ } /* ========================================= تأثير الحواف المتلاشية (Faded Edges) للسلايدرات - ستايل Framer ========================================= */ .s-products-slider-wrapper .swiper, .carousel-slider .swiper, .s-block--angel-products .swiper { /* إنشاء قناع متدرج: شفاف من الأطراف، وأسود (ظاهر) في المنتصف */ -webkit-mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent) !important; mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent) !important; } /* تعديل مسافة التلاشي في شاشات الجوال لتناسب الحجم الصغير */ @media (max-width: 768px) { .s-products-slider-wrapper .swiper, .carousel-slider .swiper, .s-block--angel-products .swiper, #story-slider-1 { -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent) !important; mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent) !important; padding-bottom: 30px; } } section.partner .box-img img { filter: grayscale(100%) !important; } @media (max-width: 768px) { section.partner .carousel-slider .swiper { padding-bottom: 0rem; } } /* 1. تنظيف الحاوية من أي ألوان خلفية تسبب الجوانب */ section.partner .box-img { background-color: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 2. وضع اللون الأخضر الباهت كـ "فلتر" على الصورة نفسها */ html.dark section.partner .box-img img { filter: sepia(100%) brightness(60%) hue-rotate(100deg) saturate(200%) opacity(100%) !important; /* لإضافة مسحة خضراء باهتة */ mix-blend-mode: luminosity; transition: all 0.4s ease-in-out !important; } section.partner .box-img { background-color: #10331d; } section.partner .s-block__title { text-align: center; } /* استهداف حاوية السلايدر في قسم الشركاء */ section.partner .swiper-wrapper { /* جعل توقيت الحركة خطي (Linear) تماماً لضمان عدم وجود توقفات */ transition-timing-function: linear !important; } section.partner .s-slider-container .swiper-wrapper { /* نضمن أن الحركة لا تنقطع أبداً */ pointer-events: none; /* لمنع توقف الحركة عند لمس الشعار بالخطأ */ } section.partner .banner-square a { pointer-events: none !important; /* يمنع الضغط أو النقر نهائياً */ cursor: default !important; /* يحول شكل الماوس للسهم العادي بدل اليد */ text-decoration: none !important; /* يزيل أي خط تحت الرابط إن وجد */ } section.partner .swiper-wrapper { transition-timing-function: linear !important; } /* ========================================= تنسيقات قسم البنرات (category) في الوضع الليلي ========================================= */ /* 1. تغيير خلفية وإطار الكرت الأساسي */ html.dark .category .banner-square > div { background-color: #122a12 !important; border-color: #374151 !important; box-shadow: 0px 8px 16px -8px rgba(0, 0, 0, 0.7) !important; /* تأثير Glassy Neon Gradient */ border: 1px solid transparent !important; border-radius: 16px !important; background: linear-gradient(#0f280c, #1f293775) padding-box, linear-gradient(135deg, #80c345, #11182700, #346e00) border-box !important; box-shadow: 0px 0px 20px rgba(128, 195, 69, 0.2), inset 0px 0px 15px rgba(128, 195, 69, 0.05) !important; backdrop-filter: blur(10px) !important; } /* 2. تغيير لون عنوان الكرت */ html.dark .category .banner-square h3 { color: #ffffff !important; } /* 3. تغيير لون الوصف */ html.dark .category .banner-square p { color: #9ca3af !important; } /* 4. ظل الأيقونات في الوضع الليلي */ html.dark .category .banner-square a { filter: drop-shadow(8px 5px 10px rgba(0, 0, 0, 0.7)) !important; } /* 4. ظل الأيقونات في الوضع الليلي */ html.dark .blog .banner-square a { filter: drop-shadow(8px 5px 10px rgba(0, 0, 0, 0.7)) !important; } /* 5. الدائرة والافكت (الخلفية) */ html.dark .category .banner-square > div::after { content: ""; position: absolute; bottom: 6px; left: 6px; width: 22px; height: 22px; border: 1px solid transparent !important; border-radius: 50% !important; background: linear-gradient(#0f280c, #1f293775) padding-box, linear-gradient(135deg, #80c345, #11182700, #346e00) border-box !important; box-shadow: 0px 0px 20px rgba(128, 195, 69, 0.2), inset 0px 0px 15px rgba(128, 195, 69, 0.05), 3px 3px 10px rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(10px) !important; z-index: 10; } /* 5. الدائرة والافكت (الخلفية) */ html.dark .blog .banner-square > div::after { content: ""; position: absolute; bottom: 11px; left: 11px; width: 22px; height: 22px; border: 1px solid transparent !important; border-radius: 50% !important; background: linear-gradient(#0f280c, #1f293775) padding-box, linear-gradient(135deg, #80c345, #11182700, #346e00) border-box !important; box-shadow: 0px 0px 20px rgba(128, 195, 69, 0.2), inset 0px 0px 15px rgba(128, 195, 69, 0.05), 3px 3px 10px rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(10px) !important; z-index: 10; } /* 6. السهم الأبيض داخل الدائرة */ html.dark .category .banner-square > div::before { content: ""; position: absolute; bottom: 6px; left: 6px; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; z-index: 11; pointer-events: none; } html.dark .blog .banner-square > div::before { content: ""; position: absolute; bottom: 11px; left: 11px; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; z-index: 11; pointer-events: none; } /* 1. تغيير ألوان جميع العناوين والفقرات الأساسية في الوضع الليلي */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark p, html.dark strong, html.dark a, html.dark #text { color: #ffffff !important; /* لون أبيض ناصع - يمكنك تغييره */ } html.dark salla-mini-checkout-widget, html.dark .s-add-product-button-mini-checkout { background-color: rgb(128, 195, 69) !important; border-color: rgb(128, 195, 69) !important; border-radius: 8px !important; /* زوايا دائرية متناسقة مع الأزرار الأخرى */ overflow: hidden !important; } html.dark .s-add-product-button-mini-checkout-content svg, html.dark .s-add-product-button-mini-checkout-content svg path { fill: #000000 !important; /* الأيقونة باللون الأسود */ } /* 2. تغيير ألوان أسماء المنتجات وعناوين الأقسام خصيصاً */ html.dark .s-product-card-content-title a, html.dark .s-block__title h2, html.dark .special-product h2 { color: #ffffff !important; } /* 3. تفتيح النصوص الوصفية والرمادية (مثل "بدلاً من" أو وصف القسم) لتبدو واضحة في الخلفية الداكنة */ html.dark .text-gray-400, html.dark .text-gray-500, html.dark .da-ts, html.dark .da-tm, html.dark .s-product-card-content-subtitle { color: #e5e7eb !important; /* لون رمادي فاتح مريح للعين */ } /* تغيير ألوان نصوص الـ span وتجاهل الألوان المضمنة في القالب */ html.dark span:not(.s-button-text):not(.s-cart-summary-count) { color: #e5e7eb !important; /* اخترت لك اللون الفاتح المريح ليتناسب مع الوصف */ } /* إذا أردت أن يكون النص الوصفي في السلايدر أبيض ناصعاً بدلاً من الرمادي الفاتح، أضف هذا السطر: */ html.dark .hero-slider-subtitle span { color: #ffffff !important; } /* ========================================= توحيد وإصلاح جميع الظلال (Shadows) في الوضع الليلي ========================================= */ /* 2. ظلال كروت المنتجات (الإطار الخارجي) وصندوق الباقة الخاصة */ html.dark custom-salla-product-card.rounded-2xl, html.dark .special-product .container > div.bg-white { /* ظل أسود قوي يتناسب مع الوضع المظلم */ box-shadow: 0px 13px 27px -5px rgba(0, 0, 0, 0.7), 0px 8px 16px -8px rgba(0, 0, 0, 0.9) !important; /* إجبار الخلفية لتكون داكنة بدلاً من الأبيض الثابت في كودك */ background-color: #122a12 !important; border-color: #51ac00 !important; /* تأثير Glassy Neon Gradient مع الحفاظ على الزوايا الدائرية */ border: 1px solid transparent !important; border-radius: 16px !important; /* يمكنك تعديل الرقم حسب درجة الانحناء التي تفضلها */ background: linear-gradient(#0f280c, #1f293775) padding-box, linear-gradient(135deg, #80c345, #11182700, #346e00) border-box !important; box-shadow: 0px 0px 20px rgba(128, 195, 69, 0.2), inset 0px 0px 15px rgba(128, 195, 69, 0.05) !important; backdrop-filter: blur(10px) !important; } /* 3. ظل وخلفية الهيدر العلوي الثابت (عند النزول بالصفحة) */ html.dark #mainnav.has-header-bottom.fixed-header.fixed-pinned { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; background-color: transparent !important; /* لون هيدر داكن جداً ليناسب الليل */ } /* ========================================= توحيد لون جميع أزرار السلة (الدوائر) للأخضر ========================================= */ .featured .s-button-element, .services .s-button-element, .special-product salla-add-product-button button { background-color: #80c345 !important; /* اللون الأخضر المميز */ border-color: transparent !important; transition: background-color 0.3s ease !important; } /* تأثير التمرير (Hover) لجميع الدوائر الخضراء */ .featured .s-button-element:hover, .services .s-button-element:hover, .special-product salla-add-product-button button:hover { background-color: #6da63a !important; /* أخضر أغمق قليلاً عند التمرير */ } /* ========================================= تغيير لون السهم (SVG) إلى الأبيض في الوضع الليلي ========================================= */ /* هذا الكود يستهدف السهم العام (الذي كان لونه أسود) ويجعله أبيض في الدارك مود */ html.dark .s-product-card-content salla-add-product-button .s-button-text i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E") !important; } /* التأكد من أن السهم داخل الدوائر الخضراء يبقى أبيض دائماً في جميع الأوضاع */ .featured .s-product-card-content salla-add-product-button .s-button-text i, .services .s-product-card-content salla-add-product-button .s-button-text i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M12 5l-7 7 7 7'/%3E%3C/svg%3E") !important; } /* تغيير لون نص زر "تفاصيل أكثر" إلى الأبيض في الوضع الليلي */ html.dark .special-product .btn--primary { color: #ffffff !important; border-color: white; } /* لمسة إضافية (اختيارية): جعل لون الزر يتغير قليلاً عند مرور الماوس عليه في الوضع الليلي */ html.dark .special-product .btn--primary:hover { color: #e5e7eb !important; /* لون أبيض مائل للرمادي الفاتح عند التمرير */ } html.dark .s-block__display-all:after, .s-slider-block__display-all:after { background-color: #80c345; } .s-cart-summary-count { background-color: #80c345; } html.dark .sicon-menu:before { color: white; } html.dark .toggle-footer-btn { color: white !important; } /* ========================================= تشفيف خلفية القائمة السفلية في الوضع الليلي ========================================= */ html.dark .bottom-header { border-color: #80c345; background-color: transparent !important; /* إلغاء اللون الداكن وجعله شفافاً */ } /* ================= GLOBAL SMOOTH ================= */ html { scroll-behavior: smooth; } body { transition: background 0.6s ease, color 0.6s ease; overflow-x: hidden; } /* ================= HEADER GLASS BLUR ================= */ .store-header .header-inner { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(0,0,0,0.04); transition: all 0.6s ease; } /* ================= SCROLL PROGRESS BAR ================= */ .scroll-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0%; z-index: 9999; background: linear-gradient( 90deg, #4f8f1f, #80c345, #a6e066, #baff6a, #80c345 ); box-shadow: 0 0 6px #80c345, 0 0 12px #80c345, 0 0 24px #a6e066, 0 0 40px #baff6a; transition: width 0.15s linear; } .scroll-progress { animation: greenGlowPulse 2.5s ease-in-out infinite; } @keyframes greenGlowPulse { 0% { box-shadow: 0 0 6px #80c345, 0 0 12px #80c345, 0 0 20px #a6e066; } 50% { box-shadow: 0 0 10px #80c345, 0 0 20px #a6e066, 0 0 40px #baff6a, 0 0 70px #d4ff9a; } 100% { box-shadow: 0 0 6px #80c345, 0 0 12px #80c345, 0 0 20px #a6e066; } } /* ================= SMOOTH EVERYTHING ================= */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* تحسين الأداء */ section, .container, .s-product-card, .rp-marquee-card { will-change: transform, opacity, filter; } /* GPU acceleration */ .container, .rp-marquee-card, .s-product-card { transform: translateZ(0); } /* ================= PRODUCT CARD BORDER ANIMATION FINAL ================= */ html.dark custom-salla-product-card.rounded-2xl, html.dark .special-product .container > div.bg-white { position: relative; border: 1px solid transparent !important; border-radius: 16px !important; /* خلفية الكرت + إطار gradient */ background: linear-gradient(#0f280c, #1f293775) padding-box, linear-gradient(135deg, #80c345, #346e00, #80c345, #a6e066, #346e00) border-box !important; background-size: 100% 100%, 300% 300%; box-shadow: 0 0 20px rgba(128,195,69,0.25), inset 0 0 15px rgba(128,195,69,0.05) !important; } /* هذا الكود يستهدف أي عنصر يحتوي على خاصية style داخل وصف المنتج */ .full-description [style] { background-color: transparent !important; color: inherit !important; } /*body { display: none; }*/