/* ============================================================
   1. IMPORTS & FONTS
   استيراد الخط العربي Almarai من Google Fonts
   ============================================================ */
@import 'https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap';

body,
*:not(i) {
	font-family: almarai, sans-serif !important;
}


/* ============================================================
   2. CSS VARIABLES (المتغيرات العامة للألوان والصور)
   تعريف متغيرات الألوان الأساسية، اللوجو، والخلفيات
   ============================================================ */
:root {
	--color-primary: #6fb2a9;
	--color-primary-dark: #6fb2a9;
	--color-primary-light: #ebd2ae;
	--color-primary-reverse: #eee;
	--f-h: white;
	--1: #000;
	--2: #000;
	--logo: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/KjBYYq/w1BWuOigiA9eF7EzAlxBo0mSDeo6BpnYuKVttYo9.png");
	--img-back: url("");
	--col-back: #fff;
	--pr-back: #fff;
	--pr-color: var(--1);
	--product-back: var(--1);
}


/* ============================================================
   3. ICONS (أيقونات سلة)
   تخصيص أيقونات شنطة التسوق وأيقونة المستخدم
   ============================================================ */
.sicon-shopping-bag:before {
	content: "\e901";
	text-align: center;
}

.sicon-user-circle:before {
	content: "\f077";
	text-align: center;
}

i {
	border: none;
}


/* ============================================================
   4. DARK MODE (الوضع الليلي)
   كل الستايلات الخاصة بـ body.dark — ألوان، خلفيات، نصوص
   ============================================================ */
body.dark {
	--color-primary-light: #ebd2ae;
	--color-primary-reverse: #eee;
	--f-h: white;
	--1: #000;
	--2: #000;

	.gap-3 {
		background-color: black;
	}

	.swiper-slide {
		filter: drop-shadow(1px 0px 1px rgb(255, 255, 255));
	}

	footer.store-footer * {
		color: #fff;
		text-align: center;
	}

	p.text-gray-400.mb-2\.5.md\:mb-0 {
		color: #fff !important;
	}

	/* Mobile Menu - Dark Mode */
	@media only screen and (max-width: 1024px) {
		.mm-spn.mm-spn--light {
			color: #fff;
			background: #000;
		}

		.mm-spn.mm-spn--light * {
			color: #fff;
		}

		.mm-spn.mm-spn--navbar.mm-spn--main::after {
			padding-right: .75rem;
			content: "";
			text-align: center !important;
			display: block;
			height: 150px !important;
			background-image: var(--logo);
			background-size: contain !important;
			background-repeat: no-repeat !important;
			background-position: top center !important;
			margin-left: 0;
			margin-right: 0;
			margin-top: 0;
			margin-bottom: 0;
			background-color: #000 !important;
		}

		.mm-spn ul.mm-spn--open li {
			color: var(--1);
			font-size: 17px;
			font-weight: 800;
		}
	}

	.s-menu-topnav-item {
		color: #fff !important;
	}

	.breadcrumbs * {
		color: #fff;
	}

	#page-main-title {
		color: #fff;
	}

	.s-comments {
		color: #fff;
		background-color: transparent !important;
	}

	.flex-col {
		background-color: rgba(0, 0, 0, 1);
		background-blend-mode: multiply;
		background-size: cover;
	}

	.store-footer__inner {
		background-color: rgba(0, 0, 0, 0.5);
		background-blend-mode: multiply;
		background-size: cover;
	}

	.banner--fixed img {
		background-color: transparent;
	}

	salla-slider:not(.hydrated),
	.carousel-slider {
		background-color: transparent;
	}

	body {
		font-size: 15px;
		font-weight: 400;
		line-height: 26px;
		color: white;
	}

	.s-button-primary {
		border-width: 1px;
		border-color: var(--color-primary);
		background-color: var(--color-primary);
		color: #fff;
	}

	.total-price {
		color: #000;
	}

	.main-content .flex.items-center {
		color: #fff;
	}

	.text-unicode {
		color: #fff;
	}

	.features-section h2 {
		font-size: 20px !important;
		font-weight: 700;
		color: #fff;
		background: var(--2);
		border-radius: 9rem 0rem 8rem 2rem;
		padding-right: 30px;
		padding-left: 30px;
		padding-bottom: 10px;
		text-align: center;
		width: fit-content;
		margin: 0 auto 20px auto;
	}

	.review {
		background: var(--color-primary);
	}

	.slider-title {
		color: #fff;
	}

	#faq-section {
		background-color: var(--color-primary) !important;
	}

	#faq-section h2 {
		color: #fff !important;
	}

	.store-footer h3 {
		background: var(--color-primary);
	}

	.s-contacts-icon {
		background-color: var(--color-primary) !important;
	}

	.store-footer__inner {
		background-color: #000 !important;
	}

	.stats-section h2 {
		color: #fff;
	}

	.s-product-card-entry {
		background-color: #fff0;
	}

	.s-product-card-content-title a {
		color: #fff;
	}
}


/* ============================================================
   5. GLOBAL TRANSITION (انتقال عام لكل العناصر)
   تطبيق transition بمدة 0.5s على كل العناصر
   ============================================================ */
* {
	transition: .5s !important;
}


/* ============================================================
   6. HEADER MARQUEE BAR (شريط البراندات المتحرك في الهيدر)
   الشريط العلوي المتحرك اللي بيظهر فوق الهيدر بالصور
   ============================================================ */
header.store-header:before {
	content: '';
	background: url("https://i.ibb.co/Ny8tNMt/image.png");
	background-repeat-y: no-repeat;
	background-position-x: 0;
	animation: scrollBrands 2000s linear alternate both infinite;
	background-size: contain;
	height: 50px;
	display: block;
	background-color: var(--1);
	background-position: center;
	z-index: 9999999999999999;
}

@keyframes scrollBrands {
	0%   { background-position-x: 0; }
	50%  { background-position-x: 35000px; }
	100% { background-position-x: 0; }
}

@media(max-width: 767px) {
	header.store-header:before {
		background-size: 180%;
		height: 39px;
		background-position: center;
		margin-bottom: -2px;
	}
}

/* ============================================================
   7. PAGE LOADING ANIMATION (أنيميشن اللودينج عند فتح الصفحة)
   خلفية سوداء + حركة اللوجو من اليسار لليمين عند تحميل الصفحة
   (بيتطبق على كل الصفحات ماعدا صفحة المنتجات)
   ============================================================ */
body:not(.product-index):not(.product-single)::before {
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 999998;
	background-color: var(--1);
	opacity: 0;
	animation: background-fade 3.5s ease-in-out forwards;
	pointer-events: none;
	filter: blur(2px) brightness(1.2);
}

body:not(.product-index):not(.product-single)::after {
	content: '';
	width: 120px;
	height: 120px;
	top: 50%;
	left: 0;
	position: fixed;
	z-index: 999999;
	background-color: #fff;
	background-image: var(--logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
	animation: logo-movement 3.5s ease-in-out forwards;
	transform: translate(-100%, -50%) scale(0.6) rotate(0deg);
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

@keyframes logo-movement {
	0%   { opacity: 0; transform: translate(-100%, -50%) scale(0.6) rotate(-30deg); }
	25%  { opacity: 1; transform: translate(-30vw, -50%) scale(1.1) rotate(10deg); }
	50%  { opacity: 1; transform: translate(50vw, -50%) scale(1.5) rotate(0deg); }
	75%  { opacity: 1; transform: translate(70vw, -50%) scale(1.2) rotate(-10deg); }
	100% { opacity: 0; transform: translate(100vw, -50%) scale(0.6) rotate(30deg); }
}

@keyframes background-fade {
	0%   { opacity: 1; }
	25%  { opacity: 1; }
	75%  { opacity: 1; }
	100% { opacity: 0; }
}


/* ============================================================
   8. PRODUCT PAGES - HIDE ELEMENTS (إخفاء عناصر في صفحات المنتجات)
   إخفاء زر الواتساب وقسم الميزات في صفحة قائمة المنتجات والمنتج الفردي
   ============================================================ */
.product-index .whatsapp-float,
.product-single .whatsapp-float {
	display: none;
}

.product-index .features-section,
.product-single .features-section {
	display: none;
}


/* ============================================================
   9. MAIN LAYOUT BACKGROUND (خلفية المحتوى الرئيسي)
   ضبط الخلفية الثابتة للـ flex-col والبانرات
   ============================================================ */
.flex-col {
	background: var(--img-back);
	background-color: var(--col-back);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

.banner-entry {
	background-color: var(--col-back) !important;
}

.banner--fixed img {
	background-color: var(--col-back) !important;
}


/* ============================================================
   10. NAVBAR LOGO (لوجو الهيدر)
   حجم اللوجو في شريط التنقل + أنيميشن نبضة القلب + فلتر أبيض
   ============================================================ */
.navbar-brand img {
	height: 3rem;
}

.navbar-brand {
	animation: heartbeat 2.5s ease-in-out infinite both;
	filter: brightness(0) invert(1);
}

@media(max-width: 991px) {
	.mm-spn.mm-spn--navbar.mm-spn--main {
		font-size: 20px;
	}

	.mm-spn li a span {
		padding: 0;
		font-weight: 800;
		font-size: 16px;
		color: var(--1);
		border: none;
	}

	.mm-spn li a span:hover {
		transform: translateX(-10px);
		color: var(--1);
	}

	.mm-spn li a span:after {
		display: none;
	}
}

@media only screen and (max-width: 700px) {
	.navbar-brand {
		width: 20vw;
	}
}


/* ============================================================
   11. SECTION TITLES GRADIENT ANIMATION (عناوين الأقسام المتحركة)
   تأثير التدرج اللوني المتحرك على عناوين السلايدر والمحتوى الرئيسي
   ============================================================ */
.s-slider-block__title h2,
.main-content h1,
.s-block__title h2 {
	text-transform: uppercase;
	background-image: linear-gradient(-225deg, #CF1D49 0, #0097B2 29%, #fff 67%, #000 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: textclip 4s linear infinite;
	display: inline-block;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.5;
}

@keyframes textclip {
	0%   { background-position: 0% center; }
	100% { background-position: 200% center; }
}

@media (min-width: 1200px) {
	[dir=ltr] .s-slider-block__title-right {
		margin-left: 380px;
	}
}


/* ============================================================
   12. FEATURES SECTION (قسم الميزات)
   كروت الميزات مع أنيميشن تغيير الشكل والخلفية
   ============================================================ */
.s-block--features__item {
	padding: 2rem;
	animation: features 8s ease infinite;
	color: white;
}

.s-block--features__item p {
	color: white;
}

.s-block--features__item h4 {
	color: var(--2);
}

.s-block--features__item .feature-icon {
	background-color: #f7f7f7;
}

.s-block--features__item .feature-icon i {
	color: var(--1);
}

@keyframes features {
	0%   { border-radius: 200px 40px 200px 40px/10px 200px 10px 200px; background-color: var(--1); }
	100% { border-radius: 40px 200px 40px 200px/10px 40px 10px 40px; background-color: var(--hover-color); }
}

.features-section h2 {
	font-size: 20px !important;
	font-weight: 700;
	color: #fff;
	background: var(--2);
	border-radius: 9rem 0rem 8rem 2rem;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 10px;
	text-align: center;
	width: fit-content;
	margin: 0 auto 20px auto;
}


/* ============================================================
   13. MODAL STYLES (ستايل نافذة تسجيل الدخول / المودال)
   خلفية سوداء، نصوص بيضاء، لوجو، وزر تسجيل الدخول
   ============================================================ */
#salla-modal>div.s-modal-wrapper>div>div.s-modal-header>div>span {
	visibility: hidden;
	display: none;
}

#salla-modal>div.s-modal-wrapper>div>div.s-modal-header::before,
nav#mobile-menu::before,
#app>div.mm-ocd.mm-ocd--right.mm-ocd--open>div.mm-ocd__content::before {
	display: block !important;
	content: '';
	background-image: var(--logo);
	background-color: #fff;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 105px;
	border-radius: 15px;
}

#salla-modal>div.s-modal-wrapper>div>div.s-modal-header:before {
	margin: -27px 0 32px;
}

@media(min-width: 767px) {
	nav#mobile-menu:before {
		display: none !important;
	}
}

.s-modal-body {
	background: #000 !important;
}

.s-modal-body *,
.s-modal-title,
.s-login-modal-sub-title,
[dir=rtl] .s-modal-header-content {
	color: #fff !important;
}

.s-modal-title,
.s-login-modal-sub-title,
[dir=rtl] .s-modal-header-content {
	text-align: center !important;
	align-items: center;
	display: block;
	width: 100%;
}

.s-login-modal-main-btn {
	background: var(--2);
	border: 0;
}

#salla-modal .s-modal-header img,
.s-modal-header-content img {
	width: 150px !important;
	height: auto !important;
}


/* ============================================================
   14. MOBILE MENU (القائمة الجانبية على الموبايل)
   ستايل القائمة المنزلقة على الشاشات الصغيرة
   ============================================================ */
@media only screen and (max-width: 1024px) {
	.mm-ocd--right .mm-ocd__content {
		right: 0 !important;
		left: 0 !important;
		top: -67px;
		bottom: 0;
		margin: auto;
		width: 86%;
		border-radius: 20px;
		height: 83%;
	}

	.mm-spn ul.mm-spn--open {
		left: 0;
		background-color: whitesmoke;
	}

	.mm-spn ul.mm-spn--open li {
		color: var(--1);
		font-size: 17px;
		font-weight: 800;
	}

	.main-menu>.has-children:hover>a {
		color: #FFF;
	}
}


/* ============================================================
   15. DESKTOP NAVBAR (شريط التنقل على الديسكتوب)
   ألوان الروابط، خلفية النافبار، والقائمة الفرعية
   ============================================================ */
.main-nav-container.shadow-default.bg-white {
	background-color: var(--1);
}

.header-btn__icon,
i.sicon-menu.text-primary.text-2xl.me-2\.5 {
	color: #fff;
}

.text-primary {
	color: #fff;
}

.topnav-is-dark .top-navbar {
	background-color: var(--colortext-f-h);
}

@media only screen and (min-width: 1024px) {
	.main-menu #offers a {
		color: #fff;
	}

	.main-menu li>a {
		color: white;
		position: relative;
	}

	.main-menu li>a::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 2px;
		background: var(--1);
		bottom: 10px;
		left: 0;
	}

	.main-menu li>a:hover {
		color: aliceblue;
		transform: scale(1.05);
	}

	.main-menu li>a:hover::after {
		background: white;
	}

	.main-menu li:hover>.sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		background-color: var(--1);
	}

	.main-menu>.has-children:hover>a {
		color: #FFF;
	}
}


/* ============================================================
   16. PRODUCT CARDS (كروت المنتجات)
   تصميم كروت المنتجات، السعر، الصورة، وأزرار الإضافة للسلة
   ============================================================ */
.s-product-card-image-cover {
	object-fit: contain;
}

.s-product-card-entry {
	background-color: white;
}

.s-product-card-image {
	background-color: rgba(243, 244, 246, 0);
}

.s-product-card-content-title a {
	color: var(--1);
	font-size: 14px;
	text-align: center;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.s-product-card-content-title a:hover {
	color: var(--1);
}

@media (max-width: 919px) {
	.s-product-card-content-title a {
		padding-top: 20px;
	}
}

.s-product-card-price {
	background-color: #fff !important;
	padding: 5px !important;
	border-radius: 6px 2px !important;
	color: var(--1) !important;
	position: absolute;
	left: 43%;
	top: -13px;
	height: 30px;
	border: 1px solid var(--1);
	font-size: 17px;
}

@media(max-width:640px) {
	.s-product-card-price {
		top: -13px;
	}
}

.s-product-card-entry .sicon-heart {
	color: var(--1);
}

.s-products-slider-card {
	height: 290px !important;
}

/* Add to Cart Buttons */
.s-button-element:not(:disabled):not([loading]) {
	pointer-events: auto;
	border-color: var(--1);
	color: var(--1);
	width: 38px;
	padding: 5px 10px;
}

.s-button-element:not(:disabled):not([loading]):hover {
	color: #fff;
}

.swiper-wrapper .s-button-element:not(:disabled):not([loading]) {
	border-color: var(--1);
	color: #fff;
	width: 38px;
	padding: 5px 10px;
	background-color: var(--1);
}

.s-button-primary-outline {
	left: -41%;
	animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
	0%   { transform: scale(1);   opacity: 1; }
	50%  { transform: scale(1.1); opacity: 0.7; }
	100% { transform: scale(1);   opacity: 1; }
}

.s-button-btn:hover::before {
	animation: shine 1.5s ease-out infinite;
}

@keyframes shine {
	0%  { left: -100px; }
	60% { left: 100%; }
	to  { left: 100%; }
}

/* Add to Cart button sizes */
.undefined.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-after {
	width: 200px;
}

.undefined.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-after i {
	left: 5px;
}

.s-button-dark-link i {
	left: -25px;
	color: var(--1);
}

.undefined.s-button-element.s-button-btn.s-button-outline.s-button-small.s-button-primary-outline.s-button-loader-after {
	width: 100px;
}

.undefined.s-button-element.s-button-btn.s-button-outline.s-button-small.s-button-primary-outline.s-button-loader-after i {
	left: 7px;
}


/* ============================================================
   17. PRODUCT DESCRIPTION (وصف صفحة المنتج الفردي)
   ألوان النصوص في صفحة تفاصيل المنتج
   ============================================================ */
.product__description .ql-direction-rtl {
	color: #fff;
}

.product__description span {
	color: #fff !important;
}

/* ============================================================
   18. BANNERS SECTION (بانران في الصف للشاشات الكبيرة)
   ============================================================ */

.banner-entry {
    background: transparent;
    width: 80%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.banner-entry a {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

/* hover effect */
.banner-entry:hover  {
    transform: scale(1.05);
}
.lazy__bg {
    background-size: contain !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 100%;
}

/* التعديل بناءً على حجم الشاشة (الجوال) */
@media screen and (max-width: 767px) {
    .banner-entry {
        height: 300px !important; 
    }
    .s-block--banners .grid {
        grid-template-columns: repeat(1, 1fr) !important; 
        gap: 10px;
    }
}

/* التعديل بناءً على حجم الشاشة (الكمبيوتر) */
@media screen and (min-width: 768px) {
    .banner-entry {
        height: 450px !important; 
    }
    .s-block--banners .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
}

.banner--fixed img {
    background-color: transparent !important;
}
/* ============================================================
   19. PHOTOS SLIDER (سلايدر الصور الرئيسي)
   ستايل سلايدر الصور الكبير في أعلى الصفحة
   ============================================================ */
@media (min-width: 750px) {
	salla-slider.photos-slider .swiper-slide {
		position: relative;
		margin-left: 0;
		margin-right: 0;
		height: auto;
		width: 100%;
		overflow: hidden;
		border-radius: .375rem;
	}

	section:nth-of-type(1).s-block.s-block--photos-slider {
		margin-top: 0;
	}
}

@media (max-width: 991px) {
	salla-slider.photos-slider .swiper {
		padding-left: 0 !important;
	}

	salla-slider.photos-slider .swiper-slide {
		border-radius: 0 !important;
		width: 100%;
		margin: 0;
		padding: 0;
	}
}

salla-slider.photos-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
	padding-right: 0;
	padding-left: 0;
}

salla-slider[type]:not(.hydrated)>div>div,
salla-slider[type]:not(.hydrated) .swiper>div>div>div,
.carousel-slider .swiper-wrapper>div {
	padding-left: 0;
	padding-right: 0;
}


/* ============================================================
   20. PRODUCTS SLIDER (سلايدر المنتجات)
   ستايل السلايدر العام للمنتجات وعنوانه وأزرار التنقل
   ============================================================ */
.s-slider-block__title {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
	display: flex;
	max-width: 1280px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.carousel-slider .s-slider-block__title-nav {
	display: flex;
	justify-content: space-between;
	width: 95vw !important;
	margin: 0;
}

.s-slider-block__title h2:where([dir="rtl"], [dir="rtl"] *) {
	padding-left: 0;
}

.s-slider-block__title-right:where([dir="rtl"], [dir="rtl"] *) {
	padding-left: 0;
}

.s-slider-block__title-left {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
}

salla-slider[type]:not(.hydrated)>div,
salla-slider[type]:not(.hydrated) .swiper>div>div,
.carousel-slider .swiper {
	margin-left: -0.625rem;
	margin-right: -0.625rem;
	display: flex;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 30px;
}

body>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--categories>div>salla-slider>div.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-rtl.swiper-backface-hidden>div {
	justify-content: center;
}


/* ============================================================
   21. REVIEWS / TESTIMONIALS SLIDER (سلايدر آراء العملاء)
   كروت التقييمات، الصور، النجوم، والحركة
   ============================================================ */
.slider-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: transparent;
	padding: 50px 0;
	margin-bottom: 50px;
}

.slider-title {
	font-size: 20px !important;
	font-weight: 700;
	color: #fff;
	background: var(--2);
	border-radius: 9rem 0rem 8rem 2rem;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 10px;
	text-align: center;
	margin-bottom: 50px;
}

.review-container {
	display: flex;
	gap: 20px;
	transition: transform 0.5s ease-in-out;
	width: 90%;
}

.review {
	flex: 0 0 calc(28% - 20px);
	background: var(--1);
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	min-height: 170px;
	position: relative;
	transition: transform 0.3s ease;
}

.review:hover {
	transform: scale(1.05);
}

.review img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 3px solid #fff;
	margin-bottom: 10px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: -46px;
}

.review p {
	color: white;
}

.review .name {
	font-weight: bold;
	color: white;
	margin-top: 10px;
}

.stars {
	color: gold;
	font-size: 18px;
	margin-bottom: 10px;
}

@media (max-width: 768px) {
	.review {
		flex: 0 0 calc(71% - 20px);
	}
}

@media (max-width: 991px) {
	.review {
		flex: 0 0 calc(64% - 20px);
	}
}


/* ============================================================
   22. FAQ SECTION (قسم الأسئلة الشائعة)
   خلفية وألوان قسم الأسئلة الشائعة
   ============================================================ */
#faq-section {
	background-color: rgba(76, 89, 69, 0.14) !important;
	box-shadow: rgba(0, 0, 0, 0.36) 0px 4px 10px !important;
}


/* ============================================================
   23. FOOTER (الفوتر)
   تصميم الفوتر الكامل: الخلفية، اللوجو، الروابط، الشبكة الزخرفية
   ============================================================ */
.store-footer {
	background-color: #f9fafb;
	align-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	background: white;
}

.footer-is-light .store-footer {
	background-color: var(--1);
	margin: 20px 0 0 0;
}

.store-footer__inner {
	background-color: var(--socend-color) !important;
	color: white;
	position: relative;
	z-index: 2;
	border-bottom-color: #DDF1F9 !important;
	background-color: var(--col-back) !important;
	background-image: var(--img-back) !important;
	background-attachment: fixed !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}

.footer-is-light .store-footer .store-footer__inner {
	background-color: var(--1);
	border-radius: 0 0 40px 40px;
}

@media(max-width:768px) {
	.footer-is-light .store-footer .store-footer__inner {
		margin: 0;
		border-radius: 0 0 40px 40px;
	}
}

@media (min-width: 1024px) {
	.store-footer__inner {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

/* Footer decorative wave/pattern top */
.store-footer__inner::before {
	content: "";
	background: linear-gradient(180deg, transparent 100%, #ffffff 94%), url(https://i.postimg.cc/jCV95d3P/1704084060680.png);
	background-size: 418%;
	display: block;
	background-repeat: round;
	transform: rotate(180deg);
	height: 104px;
	margin: -40px -32px 1px 1px;
}

/* Footer logo */
.store-footer__inner .container::before {
	text-align: center;
	content: "";
	display: block;
	height: 90px;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
	background-image: var(--logo);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transition: 0.6s;
	position: relative;
	z-index: 1;
	background-color: transparent;
	border-radius: 10%;
}

@media(min-width:1020px) {
	.store-footer__inner .container::before {
		height: 90px;
		width: 80px;
		top: -65px;
		left: -281px;
	}
}

/* Footer headings */
.store-footer h3 {
	font-size: 20px !important;
	font-weight: 700;
	color: #fff !important;
	background: var(--2);
	border-radius: 9rem 0rem 8rem 2rem;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 10px;
	text-align: center;
	width: fit-content;
	margin: 0 auto 20px auto;
}

/* Footer links and text */
.store-footer a,
p {
	color: var(--1);
}

.store-footer a {
	justify-content: center;
}

.hover\:text-primary {
	color: #fff;
}

p.text-gray-400.mb-2\.5.md\:mb-0 {
	color: #fff !important;
}

p.text-gray-400.mb-2\.5.md\:mb-0 a {
	color: #fff;
}

/* Footer social icons label */
#app>div.app-inner.flex.flex-col.min-h-full>footer>div.store-footer__inner>div>div:nth-child(3)>div.lg\:hidden.contact-social:before,
#app>div.app-inner.flex.flex-col.min-h-full>footer>div.store-footer__inner>div>div.lg\:col-span-2.lg\:pe-20>div.hidden.lg\:block:before {
	content: "تابعنا";
	margin-bottom: .75rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
}

/* Footer social links */
.store-footer .social-link,
i.me-2\.5.border.rounded-full.w-8.h-8.justify-center.flex.items-center {
	--tw-bg-opacity: 1;
}

/* Footer center alignment */
.lg\:col-span-2.lg\:pe-20,
#app>div.app-inner.flex.flex-col.min-h-full>footer>div.store-footer__inner>div>div {
	align-content: center;
	text-align: center;
}

a.mb-4.last\:mb-0.flex.items-center.text-sm.leading-none {
	justify-content: center;
}

ul.flex.mb-6 {
	justify-content: center;
}

a.flex.items-center.m-0 {
	justify-content: center;
	display: none;
}

#contact-slot {
	display: flex;
	justify-content: center;
	align-items: center;
}

#app>div.app-inner.flex.flex-col.min-h-full>footer>div.store-footer__inner>div>div.lg\:col-span-2.lg\:pe-20>a>h3 {
	align-content: center;
	text-align: center;
}

/* Footer bottom bar */
#app>div.app-inner.flex.flex-col.min-h-full>footer>div.md\:flex.items-center.justify-between.py-4.container.text-center>ul>li:nth-child(n) {
	width: 4rem;
	height: 3rem;
}

#app>div.app-inner.flex.flex-col.min-h-full>footer>div.md\:flex.items-center.justify-between.py-4.container.text-center>span>p {
	display: none;
}

#app>div.app-inner.flex.flex-col.min-h-full>footer>div.md\:flex.items-center.justify-between.py-4.container.text-center::before {
	content: var(--con);
	font-size: 16px;
	display: block;
	visibility: visible;
	position: relative;
}

@media(max-width: 750px) {
	footer:before {
		height: 117px;
		margin: -15px -32px -3px 1px;
	}
}

@media(min-width:400px) {
	.store-footer::before {
		height: -72px;
	}
}

@media(min-width:991px) {
	.store-footer::before {
		height: 410px;
	}

	.container.grid.grid-col-1 {
		background: transparent;
	}
}


/* ============================================================
   24. FOOTER COPYRIGHT TEXT (نص حقوق التطوير)
   نص "برمجة وتطوير" اللي بيظهر في الفوتر
   ============================================================ */
.text-center::before {
	content: "برمجه وتطوير ";
	display: block;
	text-align: center;
	background: var(--second-color);
	padding: 10px;
	color: #fff;
}

#app>div.app-inner.flex.flex-col.min-h-full>footer>div.md\:flex.items-center.justify-between.py-4.container.text-center::before {
	content: "برمجه وتطوير ";
	font-size: 16px;
	display: block;
	visibility: visible;
	position: relative;
	border: 1px solid var(--1);
	margin: 10px 0;
}


/* ============================================================
   25. BRAND ITEMS (قسم البراندات)
   حدود وشكل كروت البراندات
   ============================================================ */
.brand-item {
	border: 2px solid #000;
	border-radius: 17px;
}


/* ============================================================
   26. PRODUCT ENTRY CARD (كرت المنتج العام)
   الشكل الدائري لكروت المنتجات في قوائم المتجر
   ============================================================ */
.product-entry--vertical {
	border-radius: 15px;
	margin: 0;
}

.product-entry__title a {
	display: block;
	font-size: .675rem;
	line-height: 1.25rem;
	font-weight: 700;
}

@media(max-width: 991px) {
	.product-entry__title a {
		--tw-text-opacity: 1;
		color: rgba(31, 41, 55, var(--tw-text-opacity));
	}
}


/* ============================================================
  27. MISC UTILITY STYLES (ستايلات مساعدة متفرقة)
  بعض الإعدادات العامة الصغيرة: نصوص، قياسات، وخلفيات
   ============================================================ */
.text-sm {
	font-size: .675rem;
	line-height: 1.25rem;
}

.text-gray-400 {}

.max-w-sm {
	max-width: 100%;
}

.mm-spn li {
	background: transparent;
}

[dir=rtl] .rounded-be-xl {
	border-bottom-left-radius: 0.75rem;
	color: #ffffff !important;
	background: linear-gradient(to right, #2fdce4 20%, #ffffff 30%, #2fdce4 70%, #ffffff 80%);
	background-size: 500% auto;
	animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
	0%   { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

@keyframes ShineAnimation {
	0% {
		background-image: -webkit-linear-gradient(top left,
			rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 45%,
			rgba(255,255,255,0.5) 48%, rgba(255,255,255,0.8) 50%,
			rgba(255,255,255,0.5) 52%, rgba(255,255,255,0.0) 57%,
			rgba(255,255,255,0.0) 100%);
		background-position: -250px -250px;
		background-size: 600px 600px;
	}
	100% {
		background-position: 250px 250px;
	}
}

@keyframes glowEffect {
	0%   { box-shadow: 0 0 10px rgba(255,255,255,0.2), 0 0 20px rgba(255,255,255,0.3); opacity: 0.7; transform: scale(1); }
	50%  { box-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 40px rgba(255,255,255,0.8); opacity: 1; transform: scale(1.05); }
	100% { box-shadow: 0 0 10px rgba(255,255,255,0.2), 0 0 20px rgba(255,255,255,0.3); opacity: 0.7; transform: scale(1); }
}

@keyframes wave-animation {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Car cursor element (decorative) */
.car {
	position: absolute;
	width: 20px;
	height: 20px;
	background: url('path/to/car-icon.png') no-repeat center;
	background-size: contain;
	color: red;
	pointer-events: none;
	box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
	opacity: 1;
	z-index: 1000;
	transform: translate(-50%, -50%);
}

/* 1. تنظيف أي أيقونات قديمة */
.main-menu li.has-dropdown > a i, 
.main-menu li.has-dropdown > a svg {
    display: none !important;
}

/* 2. الستايل الجديد للينكات القائمة */
.main-menu li > a {
    position: relative;
    text-decoration: none;
    padding-bottom: 12px !important; /* زودنا المسافة عشان الخط ياخد راحته في النزول */
    background-image: linear-gradient(white, white);
    background-repeat: no-repeat;
    
    /* البداية: الخط فوق شوية ومختفي */
    background-position: left calc(100% - 15px); 
    background-size: 0% 2px; 
    
    transition: background-size 0.3s ease, background-position 0.3s ease;
    z-index: 10;
}

/* 3. وقت الـ Hover (خصوصاً على مكياج اللي بتفتح منيو) */
.main-menu li > a:hover {
    background-size: 100% 2px;
    /* النزلة: الخط ينزل لتحت خالص قبل ما القائمة السوداء تبدأ */
    background-position: left calc(100% - 2px); 
}

/* 4. تأكيد إخفاء أي خطوط قديمة من الـ after */
.main-menu li > a::after {
    display: none !important;
    content: none !important;
}