/* Custom scrollbar for category menu - ensure this is present */
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* Corporate & Professional Menu Styles - scoped to #mobile-category-menu */
#mobile-category-menu {
	border: 1px solid #e2e8f0;
	/* Light gray border */
	border-radius: 0.75rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	color: #1e293b;
	/* slate-900 for default text */
	padding: 1.5rem;
	/* Default padding for menu container */
}

/* Override default padding for small screens, if needed */
@media (max-width: 639px) {

	/* Tailwind's 'sm' breakpoint is 640px */
	#mobile-category-menu {
		padding: 1rem;
		/* Slightly less padding on very small screens */
	}
}

/* Styling for top-level menu items */
#mobile-category-menu .category-toggle.level-0>a,
#mobile-category-menu .nested-menu .level-0>li>a {
	/* Direct link for non-nested top-level */
	font-weight: 700;
	color: #1e293b;
	/* slate-900 */
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #e2e8f0;
	/* Separator line */
	transition: all 0.2s ease;
}

/* Remove bottom border from last top-level item if it's a direct link or a toggle div */
#mobile-category-menu .nested-menu .level-0>li:last-child>.category-toggle,
#mobile-category-menu .nested-menu .level-0>li:last-child>a {
	border-bottom: none;
}

#mobile-category-menu .category-toggle.level-0:hover>a,
#mobile-category-menu .nested-menu .level-0>li>a:hover {
	color: #4f46e5;
	/* indigo-600 on hover */
	background-color: #f8fafc;
	/* slate-50 on hover */
}

/* Styling for sub-menu containers */
#mobile-category-menu .sub-categories.level-1>ul,
#mobile-category-menu .sub-categories.level-2>ul {
	/* Apply to both level 1 and 2 sub-uls */
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	background-color: #ffffff;
	/* Same as main container or slightly lighter */
	margin-top: 0.5rem;
}

/* This rule is crucial for hiding the sub-categories initially */
#mobile-category-menu .sub-categories.hidden {
	display: none !important;
	/* Added !important for stronger hiding */
}

/* This rule is crucial for showing the sub-categories when 'hidden' is removed */
#mobile-category-menu .sub-categories:not(.hidden) {
	display: block !important;
	/* Added !important to explicitly show when not hidden */
}


/* Mobile-specific indentation adjustments */
#mobile-category-menu .sub-categories.level-1 {
	margin-left: 0.5rem;
	/* Reduced indent for very small screens */
	border-left: 2px solid #e2e8f0;
	/* Vertical line for sub-levels */
	padding-left: 0.25rem;
	/* Reduced space between line and content */
}

#mobile-category-menu .sub-categories.level-2 {
	margin-left: 0.5rem;
	/* Further reduced indent for deeper levels */
	border-left: 2px solid #e2e8f0;
	/* Lighter border for deeper levels */
	padding-left: 0.25rem;
}

/* Revert to larger indentation for larger screens (lg breakpoint and up) */
@media (min-width: 1024px) {

	/* Tailwind's 'lg' breakpoint */
	#mobile-category-menu .sub-categories.level-1 {
		margin-left: 1rem;
		padding-left: 0.5rem;
	}

	#mobile-category-menu .sub-categories.level-2 {
		margin-left: 1rem;
		padding-left: 0.5rem;
	}
}


/* Styling for first-level sub-menu items */
#mobile-category-menu .nested-menu .level-1>li>div>a,
#mobile-category-menu .nested-menu .level-1>li>a {
	color: #475569;
	/* slate-600 */
	padding: 0.5rem 0.75rem;
	transition: all 0.2s ease;
}

#mobile-category-menu .nested-menu .level-1>li>div:hover>a,
#mobile-category-menu .nested-menu .level-1>li>a:hover {
	background-color: #f1f5f9;
	/* slate-100 on hover */
	color: #4f46e5;
	/* indigo-600 on hover */
}

/* Styling for second-level sub-menu items */
#mobile-category-menu .nested-menu .level-2>li>div>a,
#mobile-category-menu .nested-menu .level-2>li>a {
	color: #64748b;
	/* slate-500 */
	font-size: 0.9rem;
}

#mobile-category-menu .nested-menu .level-2>li>div:hover>a,
#mobile-category-menu .nested-menu .level-2>li>a:hover {
	background-color: #e2e8f0;
	/* slate-200 on hover */
	color: #4f46e5;
	/* indigo-600 on hover */
}


/* Icon styling */
#mobile-category-menu svg {
	color: #94a3b8;
	/* slate-400 for icons */
}

#mobile-category-menu .category-toggle:hover>svg {
	color: #4f46e5;
	/* indigo-600 on hover */
}


/* Custom scrollbar for category menu */
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}