/* ============================================================
   Lavin Fashion — تصميم القوائم والتصنيفات بهوية العلامة
   يغطي: القائمة العلوية (top_menu) · قائمة التصنيفات الجانبية (slider_menu)
   · درج الجوال/التابلت (mobile_menu) — كل الأجهزة، RTL كامل.
   الهوية: Copper #90543C · Gold #C9A45C/#B08D4C · Mahogany #5C2E1A
   · Ivory #F5EDE3 · Blush #E8CFC2 · Noir #1F1B18 · Warm-gray #55483E
   ============================================================ */

:root {
	--lav-copper: #90543C;
	--lav-copper-deep: #6C3018;
	--lav-gold: #C9A45C;
	--lav-gold-deep: #84603C;
	--lav-mahogany: #5C2E1A;
	--lav-ivory: #F5EDE3;
	--lav-blush: #E8CFC2;
	--lav-noir: #1F1B18;
	--lav-gray: #55483E;
	--lav-shadow: 0 18px 44px rgba(92, 46, 26, .18);
	--lav-shadow-sm: 0 8px 22px rgba(92, 46, 26, .12);
}

/* ========================================================
   1) قائمة التصنيفات الجانبية (slider_menu) — نجمة الديسكتوب
   ======================================================== */
.slider-menu-wrap {
	padding: 0 !important;
}
ul.slider-menu {
	background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
	border: 1px solid #efe1d2;
	border-radius: 16px;
	box-shadow: var(--lav-shadow-sm);
	overflow: visible;
	padding: 8px 0 !important;
	position: relative;
	list-style: none;
	margin: 0;
}
/* شريط عنوان علوي أنيق بهوية العلامة */
ul.slider-menu::before {
	content: "تسوّقي حسب الفئة";
	display: block;
	font-family: 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	background: linear-gradient(135deg, var(--lav-copper) 0%, var(--lav-mahogany) 100%);
	padding: 13px 20px;
	margin: -8px 0 8px;
	border-radius: 16px 16px 0 0;
	letter-spacing: .2px;
}

ul.slider-menu > li {
	list-style: none;
	position: relative;
	margin: 0;
}
ul.slider-menu > li > a.nav-top-link,
ul.slider-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 20px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #3a2c22;
	border: 0;
	position: relative;
	transition: color .2s ease, background .2s ease, padding .2s ease;
}
/* شريط تمييز عنّابي على الحافة اليمنى (RTL) عند المرور */
ul.slider-menu > li > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: linear-gradient(180deg, var(--lav-copper), var(--lav-gold));
	border-radius: 3px;
	transition: height .22s ease;
}
ul.slider-menu > li:hover > a,
ul.slider-menu > li.active > a {
	background: linear-gradient(90deg, rgba(232, 207, 194, .35), rgba(232, 207, 194, 0));
	color: var(--lav-copper-deep);
	padding-right: 26px;
}
ul.slider-menu > li:hover > a::before,
ul.slider-menu > li.active > a::before {
	height: 60%;
}
/* عدّاد المنتجات — حبة ذهبية هادئة */
ul.slider-menu .count {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--lav-gold-deep);
	background: rgba(201, 164, 92, .14);
	border-radius: 999px;
	padding: 2px 9px;
	line-height: 1.6;
	direction: ltr;
	transition: background .2s ease, color .2s ease;
}
ul.slider-menu > li:hover > .count,
ul.slider-menu > li:hover a .count {
	background: rgba(144, 84, 60, .14);
	color: var(--lav-copper);
}
/* سهم القوائم ذات الأبناء — شيفرون يساري صريح (‹) على يسار الصف (RTL) */
ul.slider-menu > li.menu-item-has-children > a::after {
	content: "\2039" !important; /* ‹ يشير لليسار */
	font-family: 'Tajawal', 'Inter', sans-serif !important;
	font-size: 20px !important;
	line-height: 1 !important;
	color: var(--lav-gold) !important;
	position: static !important;    /* عنصر flex — يقع في نهاية الصف (يسار RTL) */
	transform: none !important;
	width: auto !important;
	height: auto !important;
	margin-inline-start: 2px;
	transition: color .2s ease, transform .2s ease;
}
ul.slider-menu > li:hover.menu-item-has-children > a::after {
	color: var(--lav-copper) !important;
	transform: translateX(-2px) !important;
}

/* الفلاي-آوت (nav-dropdown) — لوحة بيضاء بظل عنّابي تُفتح لليسار */
ul.slider-menu .nav-dropdown {
	background: #fff;
	border: 1px solid #f0e2d3;
	border-radius: 14px;
	box-shadow: var(--lav-shadow);
	padding: 12px !important;
	min-width: 260px;
}
ul.slider-menu .nav-dropdown::before {
	content: "";
	display: block;
	height: 3px;
	width: 44px;
	background: linear-gradient(90deg, var(--lav-copper), var(--lav-gold));
	border-radius: 3px;
	margin: 2px 8px 10px;
}
ul.slider-menu .nav-dropdown li { list-style: none; }
ul.slider-menu .nav-dropdown > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	border-radius: 9px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--lav-copper);
	transition: background .18s ease, color .18s ease;
}
ul.slider-menu .nav-dropdown > li > a:hover {
	background: rgba(232, 207, 194, .35);
	color: var(--lav-copper-deep);
}
/* أبناء المستوى الثالث */
ul.slider-menu .nav-dropdown .nav-dropdown a {
	color: var(--lav-gray);
	font-weight: 500;
	font-size: 13.5px;
}
ul.slider-menu .nav-dropdown .nav-dropdown a:hover {
	color: var(--lav-copper);
}

/* ========================================================
   2) القائمة العلوية الأفقية (top_menu) — الشريط العلوي
   ======================================================== */
ul.topmenu {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.topmenu > li { list-style: none; position: relative; }
ul.topmenu > li > a {
	display: inline-block;
	padding: 6px 12px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--lav-ivory);
	position: relative;
	transition: color .2s ease;
}
/* خط ذهبي يكبر تحت الرابط عند المرور */
ul.topmenu > li > a::after {
	content: "";
	position: absolute;
	right: 12px;
	left: 12px;
	bottom: 2px;
	height: 2px;
	background: linear-gradient(90deg, var(--lav-gold), var(--lav-blush));
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .25s ease;
	border-radius: 2px;
}
ul.topmenu > li:hover > a { color: #fff; }
ul.topmenu > li:hover > a::after { transform: scaleX(1); }
ul.topmenu .count {
	font-size: 10.5px;
	color: var(--lav-gold);
	direction: ltr;
	margin-inline-start: 3px;
}
/* فلاي-آوت القائمة العلوية — نفس روح لوحة الجانبية */
ul.topmenu .nav-dropdown {
	background: #fff;
	border: 1px solid #f0e2d3;
	border-radius: 12px;
	box-shadow: var(--lav-shadow);
	padding: 10px !important;
	min-width: 230px;
}
ul.topmenu .nav-dropdown a {
	color: var(--lav-copper);
	font-family: 'Tajawal', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	padding: 8px 11px;
	border-radius: 8px;
	display: block;
	transition: background .18s ease, color .18s ease;
}
ul.topmenu .nav-dropdown a:hover {
	background: rgba(232, 207, 194, .35);
	color: var(--lav-copper-deep);
}

/* ========================================================
   3) درج الجوال/التابلت (mobile_menu) — off-canvas
   ======================================================== */
.mobile-menu-wrap,
.mobile-menu-inner,
.canvas-menu,
.off-canvas .mobile-menu {
	background: linear-gradient(180deg, #ffffff 0%, var(--lav-ivory) 100%) !important;
}
ul.mobile-menu {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}
ul.mobile-menu li { list-style: none; }
ul.mobile-menu > li > a,
ul.mobile-menu li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 20px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	color: var(--lav-mahogany);
	border-bottom: 1px solid rgba(144, 84, 60, .08);
	transition: background .18s ease, color .18s ease;
}
ul.mobile-menu li li > a {
	font-weight: 500;
	font-size: 14px;
	color: var(--lav-gray);
	padding-right: 34px;
	background: rgba(245, 237, 227, .5);
}
ul.mobile-menu li li li > a {
	padding-right: 48px;
	font-size: 13.5px;
}
ul.mobile-menu a:hover,
ul.mobile-menu a:active {
	background: rgba(232, 207, 194, .4);
	color: var(--lav-copper-deep);
}
ul.mobile-menu .count {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--lav-gold-deep);
	background: rgba(201, 164, 92, .16);
	border-radius: 999px;
	padding: 2px 9px;
	direction: ltr;
}
/* زر توسيع الأبناء (السهم) — عنّابي، يشير لليسار في RTL */
ul.mobile-menu .caret,
ul.mobile-menu .toggle-sub,
ul.mobile-menu .menu-item-has-children > a::after {
	color: var(--lav-copper);
}

/* 🔴 إصلاح جوهري: درج الجوال يستخدم أيقونة «icon-right-open-1» (سهم يمين) ولا
   يعكسها الثيم في RTL — فتشير يميناً خطأً. نعكسها أفقياً فتشير لليسار (اتجاه القراءة
   في RTL). الثيم لا يدوّرها عند التوسيع فالعكس آمن في الحالتين. */
ul.mobile-menu .arrow i,
.mobile-menu .arrow i,
ul.mobile-menu .arrow [class^="icon-right"],
ul.mobile-menu .arrow [class*="icon-right"],
/* قوائم الديسكتوب المنسدلة: نفس الأيقونة داخل .nav-dropdown بقيت غير معكوسة
   (تحقق A12: transform=none على 7 عناصر مخفية تظهر عند فتح القائمة) */
.nav-dropdown .arrow i,
.nav-dropdown .arrow [class*="icon-right"],
.nav-dropdown .menu-item-has-children > a > i[class*="icon-right"] {
	display: inline-block !important;
	transform: scaleX(-1) !important;
	color: var(--lav-copper) !important;
}
/* رأس الدرج (إن وُجد) */
.mobile-menu-header,
.canvas-header,
.off-canvas-header {
	background: linear-gradient(135deg, var(--lav-copper) 0%, var(--lav-mahogany) 100%) !important;
	color: #fff !important;
}
.mobile-menu-header *,
.canvas-header * { color: #fff !important; }

/* ========================================================
   4) تحسينات RTL دقيقة للفلاي-آوت (تُفتح لليسار لا لليمين)
   ======================================================== */
.rtl ul.slider-menu .nav-dropdown,
.rtl ul.topmenu .nav-dropdown {
	right: auto;
}

/* ========================================================
   5) الأجهزة اللمسية: إظهار الفلاي-آوت عند النقر أيضاً
   ======================================================== */
@media (hover: none) {
	ul.slider-menu > li:focus-within > .nav-dropdown,
	ul.topmenu > li:focus-within > .nav-dropdown {
		display: block;
	}
}