/* Elegant Uniforms - Header */ /* الهيدر */ #mainnav { height: 90px !important; background: #fff !important; } /* محاذاة محتويات الهيدر */ #mainnav .container > .flex { min-height: 90px; align-items: center !important; } /* القائمة */ #mainnav .main-menu > li > a { font-size: 15px !important; font-weight: 600 !important; color: #111 !important; padding: 0 14px !important; } /* Hover مطابق للهوية */ #mainnav .main-menu > li > a:hover { color: #555 !important; } /* أيقونات الحساب والسلة */ #mainnav .s-user-menu-login-btn, #mainnav .s-cart-summary-wrapper { color: #111 !important; } /* الجوال */ @media (max-width: 1023px) { #mainnav { height: 75px !important; } #mainnav .container > .flex { min-height: 75px; } #mainnav .navbar-brand { width: 120px !important; height: 62px !important; } } /* ===================================== Elegant Uniforms - Hero Banner عرض الصورة كاملة بدون أي اقتصاص ===================================== */ [data-testid="store-home-slider"] { width: 100%; margin: 0; padding: 0; background: #fff; } /* إزالة الارتفاع الإجباري من القالب */ [data-testid="store-home-slider"] .swiper-slide { min-height: 0 !important; height: auto !important; aspect-ratio: 1855 / 820; background: #fff !important; overflow: hidden; } /* صورة البنر */ [data-testid="store-home-slider"] .swiper-slide > div:first-child { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } /* طبقة المحتوى لا تؤثر على أبعاد البنر */ [data-testid="store-home-slider"] .home-slider__content { position: absolute !important; inset: 0; width: 100%; height: 100% !important; padding: 0 !important; } /* الجوال */ @media (max-width: 767px) { [data-testid="store-home-slider"] .swiper-slide { min-height: 0 !important; aspect-ratio: 1855 / 820; } } /* التابلت */ @media (min-width: 768px) and (max-width: 1023px) { [data-testid="store-home-slider"] .swiper-slide { min-height: 0 !important; aspect-ratio: 1855 / 820; } } /* ========================================================= ELEGANT UNIFORMS GLOBAL PRODUCTS — SAFE RESPONSIVE VERSION لا يغيّر Grid أو عرض البطاقات الأصلي في سلة ========================================================= */ /* ========================================================= 01. PRODUCT SECTIONS BACKGROUND ========================================================= */ /* أقسام المنتجات في الرئيسية */ .s-block--products-slider, .s-block--products, .s-block--tabs-produtcs, .s-block--tabs-products, .s-products-list-wrapper, .products-container { background-color: #ffffff !important; } /* السلايدر نفسه */ salla-products-slider, .s-products-slider-wrapper, .s-products-slider-slider { background-color: #ffffff !important; } /* ========================================================= 02. PRODUCT CARD مهم: لا نفرض height أو width أو grid ========================================================= */ .s-product-card-entry { position: relative !important; background: #ffffff !important; border: 1px solid #eeeeee !important; /* حواف البطاقة حادة */ border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important; } /* لا نغير: width height display flex grid لأن سلة تتحكم بها حسب الشاشة */ @media (hover: hover) { .s-product-card-entry:hover { transform: translateY(-3px) !important; border-color: #d8d8d8 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .05) !important; } } /* ========================================================= 03. IMAGE حواف حادة بدون تغيير أبعاد سلة ========================================================= */ .s-product-card-image, .s-product-card-image > a, .s-product-card-image img { border-radius: 0 !important; } /* حاوية الصورة */ .s-product-card-entry .s-product-card-image { position: relative !important; overflow: hidden !important; background: #f5f5f5 !important; } /* رابط الصورة */ .s-product-card-entry .s-product-card-image > a { overflow: hidden !important; } /* الصورة */ .s-product-card-entry .s-product-card-image img { display: block !important; max-width: 100% !important; border: 0 !important; object-position: center top !important; transition: transform .45s ease !important; } /* لا يوجد aspect-ratio هنا ولا height:100% ولا width:100% للصورة حتى نحافظ على Responsive سلة الأصلي */ @media (hover: hover) { .s-product-card-entry:hover .s-product-card-image img { transform: scale(1.025) !important; } } /* ========================================================= 04. CONTENT ========================================================= */ .s-product-card-entry .s-product-card-content { background: #ffffff !important; border-radius: 0 !important; } /* اسم المنتج */ .s-product-card-entry .s-product-card-content-title a { color: #111111 !important; font-weight: 600 !important; text-decoration: none !important; } /* السعر */ .s-product-card-entry .s-product-card-price { color: #111111 !important; font-weight: 700 !important; } /* ========================================================= 05. WISHLIST ========================================================= */ /* القلب يبقى دائريًا لأنه زر وليس جزءًا من حواف الصورة */ .s-product-card-entry .s-product-card-wishlist-btn .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; color: #111111 !important; background: rgba(255, 255, 255, .94) !important; border-radius: 50% !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .07) !important; } /* ========================================================= 06. ADD TO CART ========================================================= */ .s-product-card-entry salla-add-product-button .s-button-element { background: #111111 !important; color: #ffffff !important; border-color: #111111 !important; /* حواف حادة */ border-radius: 0 !important; box-shadow: none !important; transition: background .2s ease, color .2s ease !important; } @media (hover: hover) { .s-product-card-entry salla-add-product-button .s-button-element:hover { background: #ffffff !important; color: #111111 !important; } } /* ========================================================= 07. REMOVE INTERNAL ROUNDING ========================================================= */ .s-product-card-entry .s-product-card-content, .s-product-card-entry .s-product-card-content-footer, .s-product-card-entry .s-product-card-image, .s-product-card-entry .s-product-card-image > a, .s-product-card-entry .s-product-card-image img { border-radius: 0 !important; } /* ========================================================= 08. FEATURED PRODUCTS إعادة خلفية القسم المميز للأبيض ========================================================= */ #featured-products-style2-1 { background: #ffffff !important; } /* الحاوية الداخلية */ #featured-products-style2-1 > .container, #featured-products-style2-1 .tabs-wrapper, #featured-products-style2-1 .tabs__item { background-color: #ffffff !important; } /* ========================================================= 09. TABLET لا نغيّر أبعاد البطاقة ========================================================= */ @media (max-width: 1023px) { .s-product-card-entry { border-radius: 0 !important; } .s-product-card-entry .s-product-card-image, .s-product-card-entry .s-product-card-image > a, .s-product-card-entry .s-product-card-image img { border-radius: 0 !important; } } /* ========================================================= 10. MOBILE نترك سلة تتحكم بعدد الأعمدة والأبعاد ========================================================= */ @media (max-width: 767px) { .s-product-card-entry { transform: none !important; border-radius: 0 !important; } .s-product-card-entry .s-product-card-image, .s-product-card-entry .s-product-card-image > a, .s-product-card-entry .s-product-card-image img { border-radius: 0 !important; } .s-product-card-entry .s-product-card-content { border-radius: 0 !important; } .s-product-card-entry salla-add-product-button .s-button-element { border-radius: 0 !important; } } /* ========================================================= 11. VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { /* متعمد ألا نغيّر: عرض البطاقة ارتفاع البطاقة حجم الصورة aspect-ratio عدد الأعمدة */ .s-product-card-entry, .s-product-card-entry .s-product-card-image, .s-product-card-entry .s-product-card-image img { border-radius: 0 !important; } } /* ========================================================= ELEGANT UNIFORMS FEATURES SECTION Desktop: 3 cards Mobile: 1 top + 2 bottom ========================================================= */ /* ========================================================= SECTION ========================================================= */ [data-testid="store-home-features"] { width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; padding-top: 45px !important; padding-bottom: 55px !important; box-sizing: border-box !important; background: #ffffff !important; } /* ========================================================= GRID — DESKTOP ========================================================= */ [data-testid="store-home-features"] > .grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; align-items: stretch !important; } /* ========================================================= FEATURE CARD ========================================================= */ [data-testid="store-home-features"] .s-block--features__item { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 30px 22px 27px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #eeeeee !important; border-radius: 12px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, .025) !important; text-align: center !important; overflow: hidden !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important; } /* ========================================================= CARD HOVER ========================================================= */ @media (hover: hover) { [data-testid="store-home-features"] .s-block--features__item:hover { transform: translateY(-4px); border-color: #dddddd !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .06) !important; } } /* ========================================================= ICON ========================================================= */ [data-testid="store-home-features"] .feature-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; margin: 0 auto 18px !important; padding: 0 !important; box-sizing: border-box !important; background: #f5f5f5 !important; border: 1px solid #eeeeee !important; border-radius: 50% !important; color: #111111 !important; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important; } /* ========================================================= ICON ITSELF ========================================================= */ [data-testid="store-home-features"] .feature-icon i { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 25px !important; line-height: 1 !important; } /* ========================================================= ICON HOVER ========================================================= */ @media (hover: hover) { [data-testid="store-home-features"] .s-block--features__item:hover .feature-icon { background: #111111 !important; border-color: #111111 !important; color: #ffffff !important; transform: translateY(-2px); } } /* ========================================================= TITLE ========================================================= */ [data-testid="store-home-features"] .s-block--features__item h2 { width: 100% !important; margin: 0 0 7px !important; padding: 0 !important; color: #111111 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.5 !important; text-align: center !important; } /* ========================================================= DESCRIPTION ========================================================= */ [data-testid="store-home-features"] .s-block--features__item p { width: 100% !important; max-width: 270px !important; margin: 0 auto !important; padding: 0 !important; color: #777777 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.75 !important; text-align: center !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1023px) { [data-testid="store-home-features"] { padding-top: 38px !important; padding-bottom: 48px !important; } [data-testid="store-home-features"] > .grid { gap: 16px !important; } [data-testid="store-home-features"] .s-block--features__item { padding: 26px 17px 24px !important; border-radius: 11px !important; } [data-testid="store-home-features"] .feature-icon { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; margin-bottom: 16px !important; } [data-testid="store-home-features"] .feature-icon i { font-size: 23px !important; } [data-testid="store-home-features"] .s-block--features__item h2 { font-size: 15px !important; } [data-testid="store-home-features"] .s-block--features__item p { font-size: 12px !important; } } /* ========================================================= MOBILE 1 CARD TOP 2 CARDS BOTTOM ========================================================= */ @media (max-width: 767px) { /* SECTION */ [data-testid="store-home-features"] { width: 100% !important; max-width: 100% !important; padding-top: 28px !important; padding-bottom: 40px !important; box-sizing: border-box !important; } /* ============================================== GRID [ 1 ] [ 2 ][ 3 ] ============================================== */ [data-testid="store-home-features"] > .grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; align-items: stretch !important; } /* ===================================================== ALL CARDS ===================================================== */ [data-testid="store-home-features"] .s-block--features__item { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 180px !important; padding: 20px 12px 18px !important; border-radius: 10px !important; box-shadow: 0 3px 14px rgba(0, 0, 0, .03) !important; } /* ===================================================== FIRST CARD البطاقة الأولى فوق وفي المنتصف ===================================================== */ [data-testid="store-home-features"] .s-block--features__item:nth-child(1) { grid-column: 1 / -1 !important; width: calc(50% - 5px) !important; min-height: 170px !important; justify-self: center !important; } /* ===================================================== SECOND CARD ===================================================== */ [data-testid="store-home-features"] .s-block--features__item:nth-child(2) { grid-column: 1 !important; } /* ===================================================== THIRD CARD ===================================================== */ [data-testid="store-home-features"] .s-block--features__item:nth-child(3) { grid-column: 2 !important; } /* ===================================================== ICON MOBILE ===================================================== */ [data-testid="store-home-features"] .feature-icon { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 auto 13px !important; border-radius: 50% !important; } [data-testid="store-home-features"] .feature-icon i { font-size: 21px !important; } /* ===================================================== TITLE MOBILE ===================================================== */ [data-testid="store-home-features"] .s-block--features__item h2 { margin: 0 0 5px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.45 !important; text-align: center !important; } /* ===================================================== DESCRIPTION MOBILE ===================================================== */ [data-testid="store-home-features"] .s-block--features__item p { width: 100% !important; max-width: 155px !important; margin: 0 auto !important; font-size: 11px !important; line-height: 1.6 !important; text-align: center !important; } /* البطاقة الأولى عندها مساحة أكبر قليلًا للنص لأنها منفردة بالأعلى */ [data-testid="store-home-features"] .s-block--features__item:nth-child(1) p { max-width: 175px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { [data-testid="store-home-features"] > .grid { gap: 8px !important; } [data-testid="store-home-features"] .s-block--features__item { min-height: 168px !important; padding: 17px 8px 16px !important; border-radius: 9px !important; } [data-testid="store-home-features"] .s-block--features__item:nth-child(1) { width: calc(50% - 4px) !important; min-height: 162px !important; } [data-testid="store-home-features"] .feature-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin-bottom: 11px !important; } [data-testid="store-home-features"] .feature-icon i { font-size: 19px !important; } [data-testid="store-home-features"] .s-block--features__item h2 { font-size: 12px !important; } [data-testid="store-home-features"] .s-block--features__item p { max-width: 135px !important; font-size: 10px !important; line-height: 1.55 !important; } } /* ========================================================= FEATURES — MOBILE FIX + CUSTOM ICONS ضع هذا الكود بعد CSS السابق ========================================================= */ /* ========================================================= إخفاء أيقونات سلة الأصلية فقط ========================================================= */ [data-testid="store-home-features"] .feature-icon i { display: none !important; } /* ========================================================= إعداد الأيقونة الجديدة ========================================================= */ [data-testid="store-home-features"] .feature-icon::before { content: "" !important; display: block !important; width: 25px !important; height: 25px !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; transition: filter .25s ease !important; } /* ========================================================= 1 — راحة تدوم طوال اليوم HEART ========================================================= */ [data-testid="store-home-features"] .s-block--features__item:nth-child(1) .feature-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important; } /* ========================================================= 2 — أناقة تليق بمهنتك SPARKLE / ELEGANCE ========================================================= */ [data-testid="store-home-features"] .s-block--features__item:nth-child(2) .feature-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.35 4.15L17.5 8.5l-4.15 1.35L12 14l-1.35-4.15L6.5 8.5l4.15-1.35L12 3z'/%3E%3Cpath d='M19 14l.75 2.25L22 17l-2.25.75L19 20l-.75-2.25L16 17l2.25-.75L19 14z'/%3E%3Cpath d='M5 14l.55 1.45L7 16l-1.45.55L5 18l-.55-1.45L3 16l1.45-.55L5 14z'/%3E%3C/svg%3E") !important; } /* ========================================================= 3 — جودة يمكنك الاعتماد عليها QUALITY BADGE ========================================================= */ [data-testid="store-home-features"] .s-block--features__item:nth-child(3) .feature-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='10' r='6'/%3E%3Cpath d='M9.5 10l1.7 1.7 3.5-3.5'/%3E%3Cpath d='M8.5 15l-1 6 4.5-2 4.5 2-1-6'/%3E%3C/svg%3E") !important; } /* ========================================================= HOVER عندما تصبح الدائرة سوداء تتحول الأيقونة للأبيض ========================================================= */ @media (hover: hover) { [data-testid="store-home-features"] .s-block--features__item:hover .feature-icon::before { filter: invert(1) !important; } } /* ========================================================= MOBILE البطاقة الأولى عرض كامل الثانية والثالثة تحتها ========================================================= */ @media (max-width: 767px) { [data-testid="store-home-features"] > .grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; } /* ========================================= البطاقة الأولى عرض كامل ========================================= */ [data-testid="store-home-features"] .s-block--features__item:nth-child(1) { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; min-height: 0 !important; justify-self: stretch !important; padding: 22px 18px !important; } /* نعطي وصف البطاقة الأولى مساحة كاملة */ [data-testid="store-home-features"] .s-block--features__item:nth-child(1) p { width: 100% !important; max-width: 300px !important; } /* ========================================= البطاقة الثانية ========================================= */ [data-testid="store-home-features"] .s-block--features__item:nth-child(2) { grid-column: 1 !important; width: 100% !important; } /* ========================================= البطاقة الثالثة ========================================= */ [data-testid="store-home-features"] .s-block--features__item:nth-child(3) { grid-column: 2 !important; width: 100% !important; } /* ========================================= توحيد ارتفاع البطاقتين السفليتين ========================================= */ [data-testid="store-home-features"] .s-block--features__item:nth-child(2), [data-testid="store-home-features"] .s-block--features__item:nth-child(3) { min-height: 175px !important; padding: 20px 10px 18px !important; } /* ========================================= الأيقونات ========================================= */ [data-testid="store-home-features"] .feature-icon::before { width: 22px !important; height: 22px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { [data-testid="store-home-features"] > .grid { gap: 8px !important; } [data-testid="store-home-features"] .s-block--features__item:nth-child(1) { width: 100% !important; padding: 20px 14px !important; } [data-testid="store-home-features"] .s-block--features__item:nth-child(2), [data-testid="store-home-features"] .s-block--features__item:nth-child(3) { min-height: 165px !important; padding: 18px 8px 16px !important; } [data-testid="store-home-features"] .feature-icon::before { width: 20px !important; height: 20px !important; } } /* ========================================================= FIX WHITE BACKGROUND FEATURES + TESTIMONIALS ضع الكود في نهاية CSS ========================================================= */ /* ========================================================= 1. FEATURES ========================================================= */ section[data-testid="store-home-features"], section[data-testid="store-home-features"].s-block, section[data-testid="store-home-features"].container, section[data-testid="store-home-features"] > .grid { background-color: #fff !important; background-image: none !important; } /* بطاقات المميزات */ section[data-testid="store-home-features"] .s-block--features__item { background: #fff !important; } /* ========================================================= مهم: نغطي مساحة الـ container نفسها ========================================================= */ section[data-testid="store-home-features"] { position: relative !important; z-index: 1 !important; } /* تمديد الأبيض حتى حواف الشاشة بدون التأثير على عرض المحتوى */ section[data-testid="store-home-features"]::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%) !important; background: #fff !important; z-index: -1 !important; pointer-events: none !important; } /* ========================================================= 2. TESTIMONIALS ========================================================= */ section[data-testid="store-home-custom-testimonials"], section[data-testid="store-home-custom-testimonials"].s-block, section[data-testid="store-home-custom-testimonials"].container, section[data-testid="store-home-custom-testimonials"] .s-reviews-container, section[data-testid="store-home-custom-testimonials"] .s-reviews-header-wrapper, section[data-testid="store-home-custom-testimonials"] .testimonials-slider, section[data-testid="store-home-custom-testimonials"] .s-slider-wrapper, section[data-testid="store-home-custom-testimonials"] .s-slider-container, section[data-testid="store-home-custom-testimonials"] .s-slider-swiper-wrapper, section[data-testid="store-home-custom-testimonials"] .swiper-wrapper, section[data-testid="store-home-custom-testimonials"] .swiper-slide, section[data-testid="store-home-custom-testimonials"] .s-reviews-swiper-slide { background-color: #fff !important; background-image: none !important; } /* ========================================================= REVIEW CARD ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial, section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__inner, section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__text, section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__name_wrapper { background-color: #fff !important; background-image: none !important; } /* ========================================================= تمديد خلفية آراء العملاء إلى عرض الشاشة ========================================================= */ section[data-testid="store-home-custom-testimonials"] { position: relative !important; z-index: 1 !important; } section[data-testid="store-home-custom-testimonials"]::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%) !important; background: #fff !important; z-index: -1 !important; pointer-events: none !important; } /* ========================================================= إزالة أي لون رمادي من العناصر الفارغة للـ slider ========================================================= */ section[data-testid="store-home-custom-testimonials"] salla-slider { background: transparent !important; } section[data-testid="store-home-custom-testimonials"] .s-slider-block__title { background: transparent !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { section[data-testid="store-home-features"], section[data-testid="store-home-custom-testimonials"] { background: #fff !important; } section[data-testid="store-home-features"]::before, section[data-testid="store-home-custom-testimonials"]::before { width: 100vw !important; background: #fff !important; } } /* ========================================================= ELEGANT UNIFORMS CUSTOMER TESTIMONIALS — COMPLETE STYLE ========================================================= */ /* ========================================================= SECTION ========================================================= */ section[data-testid="store-home-custom-testimonials"] { position: relative !important; isolation: isolate !important; width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; padding: 70px 24px 78px !important; background: #fff !important; overflow: hidden !important; box-sizing: border-box !important; } /* خلفية بيضاء تمتد بعرض الشاشة */ section[data-testid="store-home-custom-testimonials"]::before { content: "" !important; position: absolute !important; z-index: -1 !important; top: 0 !important; bottom: 0 !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%) !important; background: #fff !important; pointer-events: none !important; } /* ========================================================= MAIN CONTAINER ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-container { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-sizing: border-box !important; } /* ========================================================= HEADER ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-header-wrapper { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-height: 60px !important; margin: 0 0 34px !important; padding: 0 18px 0 110px !important; background: transparent !important; } /* الخط بجانب العنوان */ section[data-testid="store-home-custom-testimonials"] .s-reviews-header-wrapper::before { content: "" !important; position: absolute !important; top: 2px !important; right: 0 !important; width: 3px !important; height: 50px !important; border-radius: 10px !important; background: #111 !important; } /* العنوان */ section[data-testid="store-home-custom-testimonials"] .s-reviews-header { margin: 0 !important; padding: 0 !important; color: #111 !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.4 !important; background: transparent !important; } /* العنوان الفرعي */ section[data-testid="store-home-custom-testimonials"] .s-reviews-header-wrapper::after { content: "تجارب حقيقية من عملائنا" !important; display: block !important; margin-top: 4px !important; color: #777 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; background: transparent !important; } /* ========================================================= SALLA SLIDER ========================================================= */ section[data-testid="store-home-custom-testimonials"] salla-slider, section[data-testid="store-home-custom-testimonials"] .testimonials-slider, section[data-testid="store-home-custom-testimonials"] .s-slider-wrapper { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; background: transparent !important; } /* ========================================================= SLIDER ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-slider-container { width: 100% !important; max-width: 100% !important; padding: 5px 2px 18px !important; background: transparent !important; overflow: hidden !important; box-sizing: border-box !important; } section[data-testid="store-home-custom-testimonials"] .s-slider-swiper-wrapper, section[data-testid="store-home-custom-testimonials"] .swiper-wrapper { align-items: stretch !important; background: transparent !important; } /* ========================================================= SLIDES ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-swiper-slide, section[data-testid="store-home-custom-testimonials"] .swiper-slide { height: auto !important; background: transparent !important; box-sizing: border-box !important; } /* ========================================================= TESTIMONIAL WRAPPER ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial { height: 100% !important; padding: 0 !important; background: transparent !important; } /* ========================================================= CARD ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__inner { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; min-height: 235px !important; padding: 30px 32px !important; background: #fff !important; border: 1px solid #ececec !important; border-radius: 18px !important; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.035) !important; box-sizing: border-box !important; overflow: hidden !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } /* Hover */ @media (hover: hover) { section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__inner:hover { transform: translateY(-4px) !important; border-color: #dddddd !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.065) !important; } } /* ========================================================= AVATAR ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__avatar { position: relative !important; z-index: 2 !important; width: 58px !important; height: 58px !important; flex: 0 0 58px !important; margin: 0 0 18px !important; padding: 3px !important; background: #fff !important; border: 1px solid #e6e6e6 !important; border-radius: 50% !important; overflow: hidden !important; box-sizing: border-box !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__avatar img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; background: #f7f7f7 !important; } /* ========================================================= REVIEW CONTENT ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__text { position: relative !important; z-index: 2 !important; display: flex !important; flex: 1 !important; flex-direction: column !important; background: transparent !important; } /* نص التقييم */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__text > p { flex: 1 !important; margin: 0 0 22px !important; padding: 0 !important; color: #3d3d3d !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.9 !important; background: transparent !important; } /* ========================================================= NAME + RATING ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__name_wrapper { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; padding-top: 15px !important; border-top: 1px solid #f0f0f0 !important; background: transparent !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__info { min-width: 0 !important; background: transparent !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__info h2 { margin: 0 !important; padding: 0 !important; color: #111 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; background: transparent !important; } /* ========================================================= STARS ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__rating, section[data-testid="store-home-custom-testimonials"] .s-rating-stars-wrapper { flex-shrink: 0 !important; background: transparent !important; } section[data-testid="store-home-custom-testimonials"] .s-rating-stars-wrapper { display: flex !important; gap: 2px !important; } section[data-testid="store-home-custom-testimonials"] .s-rating-stars-btn-star svg { width: 15px !important; height: 15px !important; } section[data-testid="store-home-custom-testimonials"] .s-rating-stars-selected svg, section[data-testid="store-home-custom-testimonials"] .s-rating-stars-selected svg path { fill: #111 !important; color: #111 !important; } /* ========================================================= QUOTE ICON ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__icon { position: absolute !important; top: 25px !important; left: 27px !important; width: 46px !important; height: 46px !important; opacity: .045 !important; pointer-events: none !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__icon svg { width: 100% !important; height: 100% !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__icon svg, section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__icon svg path { fill: #111 !important; } /* ========================================================= NAVIGATION POSITION ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-slider-block__title { position: absolute !important; top: -94px !important; left: 0 !important; right: auto !important; z-index: 20 !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } section[data-testid="store-home-custom-testimonials"] .s-slider-block__title-left, section[data-testid="store-home-custom-testimonials"] .s-slider-block__title-nav { display: flex !important; align-items: center !important; gap: 8px !important; background: transparent !important; } /* ========================================================= ARROWS ========================================================= */ section[data-testid="store-home-custom-testimonials"] .s-slider-nav-arrow { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; color: #111 !important; background: #fff !important; border: 1px solid #dedede !important; border-radius: 50% !important; box-shadow: 0 3px 10px rgba(0, 0, 0, .035) !important; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important; } section[data-testid="store-home-custom-testimonials"] .s-slider-nav-arrow svg { width: 19px !important; height: 19px !important; fill: currentColor !important; } section[data-testid="store-home-custom-testimonials"] .s-slider-nav-arrow svg path { fill: currentColor !important; } @media (hover: hover) { section[data-testid="store-home-custom-testimonials"] .s-slider-nav-arrow:not([disabled]):hover { color: #fff !important; background: #111 !important; border-color: #111 !important; transform: translateY(-1px) !important; } } /* Disabled arrow */ section[data-testid="store-home-custom-testimonials"] .s-slider-nav-arrow[disabled], section[data-testid="store-home-custom-testimonials"] .s-slider-nav-arrow[aria-disabled="true"] { opacity: .35 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1023px) { section[data-testid="store-home-custom-testimonials"] { padding: 56px 20px 64px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-header { font-size: 22px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__inner { min-height: 220px !important; padding: 28px !important; border-radius: 16px !important; } section[data-testid="store-home-custom-testimonials"] .s-slider-block__title { top: -90px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { section[data-testid="store-home-custom-testimonials"] { width: 100% !important; padding: 42px 12px 48px !important; background: #fff !important; } /* ------------------------- HEADER ------------------------- */ section[data-testid="store-home-custom-testimonials"] .s-reviews-header-wrapper { min-height: 54px !important; margin-bottom: 24px !important; padding: 0 14px 0 82px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-header-wrapper::before { width: 3px !important; height: 44px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-header { font-size: 19px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-header-wrapper::after { margin-top: 2px !important; font-size: 12px !important; } /* ------------------------- SLIDER ------------------------- */ section[data-testid="store-home-custom-testimonials"] .s-slider-container { padding: 3px 1px 14px !important; } /* ------------------------- CARD ------------------------- */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__inner { min-height: 205px !important; padding: 22px 20px 20px !important; border-radius: 14px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .03) !important; } /* ------------------------- AVATAR ------------------------- */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__avatar { width: 50px !important; height: 50px !important; flex-basis: 50px !important; margin-bottom: 14px !important; } /* ------------------------- TEXT ------------------------- */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__text > p { margin-bottom: 18px !important; font-size: 13.5px !important; line-height: 1.85 !important; } /* ------------------------- NAME / RATING ------------------------- */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__name_wrapper { gap: 8px !important; padding-top: 13px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__info h2 { font-size: 13px !important; } section[data-testid="store-home-custom-testimonials"] .s-rating-stars-btn-star svg { width: 13px !important; height: 13px !important; } /* ------------------------- QUOTE ------------------------- */ section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__icon { top: 20px !important; left: 18px !important; width: 38px !important; height: 38px !important; } /* ------------------------- ARROWS ------------------------- */ section[data-testid="store-home-custom-testimonials"] .s-slider-block__title { top: -79px !important; } section[data-testid="store-home-custom-testimonials"] .s-slider-nav-arrow { width: 34px !important; height: 34px !important; } section[data-testid="store-home-custom-testimonials"] .s-slider-nav-arrow svg { width: 17px !important; height: 17px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { section[data-testid="store-home-custom-testimonials"] { padding-left: 10px !important; padding-right: 10px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-header { font-size: 18px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-header-wrapper::after { font-size: 11px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__inner { padding: 20px 17px 18px !important; border-radius: 13px !important; } section[data-testid="store-home-custom-testimonials"] .s-reviews-testimonial__name_wrapper { align-items: flex-start !important; } section[data-testid="store-home-custom-testimonials"] .s-rating-stars-btn-star svg { width: 12px !important; height: 12px !important; } } /* ========================================= GLOBAL WHITE BACKGROUND الخلفية الأساسية للموقع ========================================= */ html, body { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* المحتوى الرئيسي في سلة */ main, #app, .app, .app-inner, .store-home, .store-home-page { background-color: #ffffff !important; background-image: none !important; } /* ========================================================= ELEGANT UNIFORMS FIX HEADER MENU POSITION ON SCROLL ========================================================= */ /* القائمة الرئيسية */ @media (min-width: 1024px) { custom-main-menu { display: flex !important; align-items: center !important; height: 100% !important; align-self: stretch !important; } custom-main-menu #mobile-menu { display: flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; position: static !important; transform: none !important; } custom-main-menu .main-menu { display: flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; padding: 0 !important; position: static !important; transform: none !important; } /* كل عنصر من عناصر القائمة */ custom-main-menu .main-menu > li.root-level { display: flex !important; align-items: center !important; height: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; top: auto !important; bottom: auto !important; transform: none !important; } /* الرابط نفسه */ custom-main-menu .main-menu > li.root-level > a { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; top: 0 !important; transform: none !important; line-height: 1.4 !important; } /* النص */ custom-main-menu .main-menu > li.root-level > a > span { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; position: static !important; transform: none !important; line-height: 1.4 !important; } /* ===================================================== عند تحول الهيدر إلى Sticky أثناء النزول نبقي القائمة في نفس المنتصف ===================================================== */ .store-header custom-main-menu, .store-header custom-main-menu #mobile-menu, .store-header custom-main-menu .main-menu { height: 100% !important; align-items: center !important; } .store-header custom-main-menu .main-menu > li.root-level, .store-header custom-main-menu .main-menu > li.root-level > a { height: 100% !important; top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; transform: none !important; align-items: center !important; } /* ===================================================== main-nav الذي نسقناه سابقاً ===================================================== */ #mainnav { display: flex !important; align-items: center !important; } #mainnav > .container { height: 100% !important; display: flex !important; align-items: center !important; } } /* ========================================================= لا نغير قائمة الجوال ========================================================= */ @media (max-width: 1023px) { custom-main-menu #mobile-menu, custom-main-menu .main-menu { height: auto; } } /* ========================================================= ELEGANT UNIFORMS RESPONSIVE CROWN FOOTER — FINAL ========================================================= */ .store-footer, .store-footer *, .store-footer *::before, .store-footer *::after { box-sizing: border-box !important; } /* ========================================================= 1. FOOTER BASE ========================================================= */ .store-footer { --eu-black: #050505; --eu-deep-black: #000; --eu-soft-black: #121212; --eu-border: #292929; --eu-text: #fff; --eu-muted: #a6a6a6; position: relative !important; width: 100% !important; max-width: 100% !important; margin: 105px 0 0 !important; padding: 0 !important; color: var(--eu-text) !important; background: var(--eu-black) !important; /* مهم: يمنع التاج من إنشاء عرض أفقي */ overflow: hidden !important; } /* ========================================================= 2. CROWN تاج قوي بدون width أكبر من الشاشة ========================================================= */ .store-footer::before { content: "" !important; position: absolute !important; z-index: 0 !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; height: 125px !important; background: #fff !important; /* نحت الجزء الأبيض من أعلى الأسود ليظهر الأسود مرتفعاً من المنتصف مثل التاج */ clip-path: ellipse( 64% 78% at 50% 0% ) !important; pointer-events: none !important; } /* نرفع المحتوى عن منطقة الانحناء */ .store-footer__inner { position: relative !important; z-index: 1 !important; width: 100% !important; margin: 0 !important; padding: 145px 0 58px !important; color: #fff !important; background: transparent !important; } /* ========================================================= 3. MAIN CONTAINER ========================================================= */ .store-footer__inner > .container { position: relative !important; width: min(100% - 48px, 1280px) !important; max-width: 1280px !important; margin: 0 auto !important; padding: 0 !important; } /* ========================================================= 4. BRAND ========================================================= */ .store-footer__inner .lg\:col-span-2:first-child > a { display: inline-flex !important; align-items: center !important; width: fit-content !important; margin: 0 0 15px !important; padding: 0 !important; color: #fff !important; text-decoration: none !important; } .store-footer__inner .lg\:col-span-2:first-child > a h3 { position: relative !important; margin: 0 !important; padding: 0 0 14px !important; color: #fff !important; font-size: clamp(22px, 2vw, 27px) !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .3px !important; } /* الخط تحت الاسم */ .store-footer__inner .lg\:col-span-2:first-child > a h3::after { content: "" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; width: 44px !important; height: 3px !important; background: #fff !important; border-radius: 20px !important; } /* ========================================================= 5. DESCRIPTION ========================================================= */ .store-footer__inner .lg\:col-span-2:first-child .max-w-sm { width: 100% !important; max-width: 360px !important; margin: 0 0 25px !important; } .store-footer__inner .lg\:col-span-2:first-child .max-w-sm p { margin: 0 !important; color: var(--eu-muted) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.9 !important; } /* ========================================================= 6. SECTION TITLES ========================================================= */ .store-footer__inner h3, .store-footer__inner .s-contacts-title { position: relative !important; width: fit-content !important; margin: 0 0 22px !important; padding: 0 0 12px !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important; } /* الخط تحت العناوين */ .store-footer__inner > .container > div:not(:first-child) > h3::after, .store-footer__inner .s-contacts-title::after { content: "" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; width: 30px !important; height: 2px !important; background: #fff !important; border-radius: 20px !important; } /* ========================================================= 7. FOOTER MENU ========================================================= */ .store-footer salla-menu { display: block !important; width: 100% !important; } .store-footer .s-menu-footer-list { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; } .store-footer .s-menu-footer-list a { display: inline-flex !important; width: fit-content !important; max-width: 100% !important; color: var(--eu-muted) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; text-decoration: none !important; transition: color .2s ease, transform .2s ease !important; } @media (hover: hover) { .store-footer .s-menu-footer-list a:hover { color: #fff !important; transform: translateX(-4px) !important; } } /* ========================================================= 8. CONTACTS ========================================================= */ .store-footer salla-contacts { display: block !important; width: 100% !important; } .store-footer .s-contacts-list { display: flex !important; flex-direction: column !important; gap: 11px !important; width: 100% !important; } .store-footer .s-contacts-list #contact-slot { max-width: 100% !important; } .store-footer .s-contacts-item { display: flex !important; align-items: center !important; gap: 11px !important; width: fit-content !important; max-width: 100% !important; color: var(--eu-muted) !important; font-size: 13px !important; line-height: 1.5 !important; text-decoration: none !important; transition: color .2s ease, transform .2s ease !important; } /* يمنع الإيميل من توسيع الصفحة */ .store-footer .s-contacts-item .unicode { display: block !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; direction: ltr !important; } /* Contact icons */ .store-footer .s-contacts-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 38px !important; width: 38px !important; height: 38px !important; color: #fff !important; background: var(--eu-soft-black) !important; border: 1px solid var(--eu-border) !important; border-radius: 50% !important; transition: background .2s ease, color .2s ease, border-color .2s ease !important; } .store-footer .s-contacts-icon svg { display: block !important; width: 17px !important; height: 17px !important; fill: currentColor !important; } .store-footer .s-contacts-icon svg path { fill: currentColor !important; } @media (hover: hover) { .store-footer .s-contacts-item:hover { color: #fff !important; transform: translateX(-3px) !important; } .store-footer .s-contacts-item:hover .s-contacts-icon { color: #000 !important; background: #fff !important; border-color: #fff !important; } } /* ========================================================= 9. SOCIAL ========================================================= */ .store-footer .s-social-list { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; } .store-footer .s-social-link a { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; color: #fff !important; background: var(--eu-soft-black) !important; border: 1px solid var(--eu-border) !important; border-radius: 50% !important; transition: color .2s ease, background .2s ease, transform .2s ease !important; } .store-footer .s-social-icon { display: flex !important; align-items: center !important; justify-content: center !important; } .store-footer .s-social-icon svg { display: block !important; width: 18px !important; height: 18px !important; fill: currentColor !important; } .store-footer .s-social-icon svg path { fill: currentColor !important; } @media (hover: hover) { .store-footer .s-social-link a:hover { color: #000 !important; background: #fff !important; transform: translateY(-3px) !important; } } /* ========================================================= 10. TRUST BADGE ========================================================= */ .store-footer__inner .flex.gap-4 { display: flex !important; align-items: center !important; flex-wrap: wrap !important; max-width: 100% !important; } .store-footer .s-trust-badges-wrapper { display: flex !important; align-items: center !important; gap: 10px !important; width: fit-content !important; max-width: 100% !important; margin: 20px 0 0 !important; padding: 9px 13px !important; background: #111 !important; border: 1px solid #282828 !important; border-radius: 12px !important; } .store-footer .s-trust-badges-image { flex-shrink: 0 !important; width: 42px !important; height: 42px !important; object-fit: contain !important; } .store-footer .s-trust-badges-content { min-width: 0 !important; color: #fff !important; } .store-footer .s-trust-badges-label { margin: 0 0 2px !important; color: #888 !important; font-size: 10px !important; } .store-footer .s-trust-badges-number { color: #fff !important; font-size: 11px !important; font-weight: 600 !important; overflow-wrap: anywhere !important; } /* ========================================================= 11. APPS ========================================================= */ .store-footer salla-apps-icons { max-width: 100% !important; color: #fff !important; } /* ========================================================= 12. BOTTOM FOOTER ========================================================= */ .store-footer > .container:last-child { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; width: 100% !important; max-width: none !important; margin: 0 !important; /* لا يوجد 100vw هنا */ padding: 18px max( 24px, calc((100% - 1280px) / 2 + 24px) ) !important; color: #888 !important; background: #000 !important; border-top: 1px solid #202020 !important; } /* Copyright */ .store-footer .copyright-text, .store-footer .copyright-text p { margin: 0 !important; color: #777 !important; font-size: 12px !important; line-height: 1.7 !important; } .store-footer .copyright-text a { color: #fff !important; text-decoration: none !important; } /* ========================================================= 13. PAYMENTS ========================================================= */ .store-footer salla-payments { max-width: 100% !important; } .store-footer .s-payments-list { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 7px !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .store-footer .s-payments-list-item { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; min-width: 45px !important; height: 31px !important; padding: 4px 6px !important; background: #fff !important; border-radius: 7px !important; } .store-footer .s-payments-list-item img { display: block !important; width: auto !important; max-width: 42px !important; height: 22px !important; object-fit: contain !important; } /* ========================================================= 14. TABLET 768px — 1023px ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .store-footer { margin-top: 85px !important; } .store-footer::before { height: 105px !important; clip-path: ellipse( 70% 75% at 50% 0% ) !important; } .store-footer__inner { padding: 125px 0 48px !important; } .store-footer__inner > .container { width: calc(100% - 40px) !important; gap: 32px 24px !important; } .store-footer > .container:last-child { padding: 18px 20px !important; } } /* ========================================================= 15. MOBILE <= 767px ========================================================= */ @media (max-width: 767px) { .store-footer { margin-top: 65px !important; } /* تاج الهاتف يبقى داخل 100% من العرض */ .store-footer::before { width: 100% !important; height: 82px !important; clip-path: ellipse( 78% 70% at 50% 0% ) !important; } .store-footer__inner { padding: 100px 0 42px !important; } /* =============================================== MAIN CONTENT CENTER =============================================== */ .store-footer__inner > .container { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 31px !important; width: calc(100% - 28px) !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } .store-footer__inner > .container > div, .store-footer__inner > .container > salla-apps-icons { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; text-align: center !important; } /* =============================================== BRAND =============================================== */ .store-footer__inner .lg\:col-span-2:first-child > a { display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 auto 14px !important; } .store-footer__inner .lg\:col-span-2:first-child > a h3 { width: fit-content !important; margin: 0 auto !important; font-size: 22px !important; text-align: center !important; } .store-footer__inner .lg\:col-span-2:first-child > a h3::after { right: 50% !important; left: auto !important; transform: translateX(50%) !important; } /* Description */ .store-footer__inner .lg\:col-span-2:first-child .max-w-sm { width: 100% !important; max-width: 330px !important; margin: 0 auto 5px !important; text-align: center !important; } .store-footer__inner .lg\:col-span-2:first-child .max-w-sm p { font-size: 13px !important; text-align: center !important; } /* =============================================== TITLES =============================================== */ .store-footer__inner h3, .store-footer__inner .s-contacts-title { width: fit-content !important; margin: 0 auto 19px !important; font-size: 15px !important; text-align: center !important; } .store-footer__inner > .container > div:not(:first-child) > h3::after, .store-footer__inner .s-contacts-title::after { right: 50% !important; left: auto !important; transform: translateX(50%) !important; } /* =============================================== MENU =============================================== */ .store-footer salla-menu { width: 100% !important; } .store-footer .s-menu-footer-list { align-items: center !important; width: 100% !important; text-align: center !important; } .store-footer .s-menu-footer-list a { margin: 0 auto !important; text-align: center !important; } /* =============================================== CONTACTS =============================================== */ .store-footer salla-contacts { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } .store-footer .s-contacts-list { align-items: center !important; width: 100% !important; } .store-footer .s-contacts-list #contact-slot { display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; } .store-footer .s-contacts-item { justify-content: center !important; width: fit-content !important; max-width: 100% !important; margin: 0 auto !important; font-size: 12px !important; text-align: center !important; } .store-footer .s-contacts-icon { flex-basis: 35px !important; width: 35px !important; height: 35px !important; } /* =============================================== SOCIAL =============================================== */ .store-footer .contact-social { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin-top: 21px !important; } .store-footer .contact-social salla-social { display: flex !important; justify-content: center !important; width: 100% !important; } .store-footer .s-social-list { justify-content: center !important; width: 100% !important; margin: 0 auto !important; } /* =============================================== TRUST BADGE =============================================== */ .store-footer__inner .flex.gap-4 { justify-content: center !important; width: 100% !important; } .store-footer .s-trust-badges-wrapper { margin: 18px auto 0 !important; text-align: right !important; } /* =============================================== APPS =============================================== */ .store-footer salla-apps-icons { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; } /* =============================================== BOTTOM =============================================== */ .store-footer > .container:last-child { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 15px !important; width: 100% !important; max-width: 100% !important; padding: 18px 14px 20px !important; text-align: center !important; } .store-footer .copyright-text { display: block !important; width: 100% !important; text-align: center !important; } .store-footer .copyright-text p { width: 100% !important; margin: 0 auto !important; font-size: 11px !important; text-align: center !important; } /* Payments */ .store-footer salla-payments { display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; } .store-footer .s-payments-list { justify-content: center !important; width: 100% !important; max-width: 340px !important; margin: 0 auto !important; } } /* ========================================================= 16. SMALL MOBILE <= 480px ========================================================= */ @media (max-width: 480px) { .store-footer { margin-top: 55px !important; } .store-footer::before { height: 70px !important; clip-path: ellipse( 82% 68% at 50% 0% ) !important; } .store-footer__inner { padding-top: 87px !important; } .store-footer__inner > .container { width: calc(100% - 22px) !important; } .store-footer .s-trust-badges-wrapper { max-width: calc(100vw - 32px) !important; } .store-footer .s-payments-list { max-width: 310px !important; } } /* ========================================================= 17. VERY SMALL MOBILE <= 360px ========================================================= */ @media (max-width: 360px) { .store-footer__inner > .container { width: calc(100% - 16px) !important; } .store-footer .s-contacts-item { gap: 8px !important; font-size: 11px !important; } .store-footer .s-contacts-icon { flex-basis: 32px !important; width: 32px !important; height: 32px !important; } .store-footer .s-payments-list { max-width: 280px !important; gap: 5px !important; } .store-footer .s-payments-list-item { min-width: 41px !important; padding: 3px 5px !important; } } /* ========================================== عنوان سكشن المنتجات المميزة فقط ========================================== */ #featured-products-style2-1 .tabs-wrapper { position: relative !important; padding-top: 95px !important; } /* الخط الأسود */ #featured-products-style2-1 .tabs-wrapper::before { content: "" !important; position: absolute !important; top: 2px !important; right: 0 !important; width: 3px !important; height: 52px !important; background: #111 !important; border-radius: 10px !important; } /* العنوان */ #featured-products-style2-1 .tabs-wrapper::after { content: "مختاراتنا المميزة" !important; position: absolute !important; top: 0 !important; right: 18px !important; color: #111 !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.4 !important; } /* الوصف */ #featured-products-style2-1 .tabs__item { position: relative !important; } #featured-products-style2-1 .tabs__item::before { content: "تصاميم عملية وأنيقة مختارة لك" !important; position: absolute !important; z-index: 5 !important; top: -57px !important; right: 18px !important; color: #777 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; pointer-events: none !important; } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { #featured-products-style2-1 .tabs-wrapper { padding-top: 82px !important; } #featured-products-style2-1 .tabs-wrapper::before { top: 2px !important; height: 46px !important; } #featured-products-style2-1 .tabs-wrapper::after { right: 15px !important; font-size: 20px !important; } #featured-products-style2-1 .tabs__item::before { top: -49px !important; right: 15px !important; font-size: 12px !important; } } /* ========================================== TABS — ELEGANT UNIFORMS ========================================== */ /* جميع التبويبات */ .tabs .tab-trigger.s-button-element { background: #ffffff !important; color: #111111 !important; border: 1px solid #111111 !important; border-radius: 8px !important; box-shadow: none !important; transition: background .25s ease, color .25s ease, border-color .25s ease !important; } /* النص */ .tabs .tab-trigger.s-button-element .s-button-text { color: inherit !important; } /* ========================= ACTIVE أسود + نص أبيض ========================= */ .tabs .tab-trigger.s-button-element.is-active { background: #111111 !important; color: #ffffff !important; border-color: #111111 !important; } .tabs .tab-trigger.s-button-element.is-active .s-button-text { color: #ffffff !important; } /* لأن is-active موجودة أيضًا على salla-button */ .tabs salla-button.tab-trigger.is-active > .s-button-element { background: #111111 !important; color: #ffffff !important; border-color: #111111 !important; } .tabs salla-button.tab-trigger.is-active > .s-button-element .s-button-text { color: #ffffff !important; } /* ========================= HOVER لغير النشط ========================= */ @media (hover: hover) { .tabs .tab-trigger.s-button-element:not(.is-active):hover { background: #f2f2f2 !important; color: #111111 !important; border-color: #111111 !important; } } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { .tabs .tab-trigger.s-button-element { border-radius: 7px !important; font-size: 12px !important; } }