.sidebar-menu {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 1rem;
	padding: 1.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 10rem;

	li {
		position: relative;

		&:not(:last-child) {
			margin-bottom: 1.8rem;
		}

		&:not(:last-child)::after {
			content: "";
			position: absolute;
			bottom: -1rem;
			left: 0;
			right: 0;
			height: 1px;
			background-color: #e6e6e6;
		}

		&:has(.sub-menu) {
			border-bottom: none;
		}
	}

	.menu-item-count {
		height: 21px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		border: 1px solid #cccccc;
		border-radius: 0.8rem;
		padding: 0 6px;
		min-width: 20px;

		span {
			font-weight: bold;
		}
	}

	.menu-item {
		display: flex;
		gap: 10px;
		width: fit-content;
		align-items: center;
		border-radius: 0.5rem;
		transition: all 0.3s ease-in-out;

		&:hover {
			color: #de222a;
			text-decoration: none;
		}

		.menu-item-icon {
			width: 4rem;
			height: 3rem;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				max-width: 3.5rem;
				max-height: 2.5rem;
				object-fit: contain;
			}
		}

		.menu-item-content {
			display: flex;
			align-items: center;
			gap: 10px;
			width: 100%;

			> span {
				font-size: 1.6rem;
				line-height: 1;
				padding-top: 2px;
			}
		}
	}

	.sub-menu {
		li {
			margin-block: 1.5rem;
		}
	}

	.sub-menu-item {
		display: flex;
		align-items: center;
		gap: 10px;
		width: fit-content;
		transition: all 0.3s ease-in-out;

		> span {
			font-size: 1.6rem;
		}

		&:hover {
			color: #de222a;
			text-decoration: none;
		}
	}

	.sub-menu-item.active,
	.menu-item.active {
		color: #de222a;
		font-weight: bold;
	}
}

.category-header {
	font-size: 2.5rem;
	color: #333;
}

.category-image > img {
	object-fit: cover;
}

@media screen and (max-width: 768px) {
	.section-page .tours {
		margin-bottom: 0;
	}

	.sidebar-menu {
		position: static;
		margin-bottom: 2rem;

		
		.categories-container {
			position: relative;
			max-height: 300px;
			overflow: hidden;
			animation: collapseAll 350ms ease-in-out;
			> ul::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 60px;
				background: linear-gradient(rgba(255, 255, 255, 0), #fff);
				pointer-events: none;
				opacity: 1;
				transition: opacity 0.5s ease-in-out;
			}
			&.expanded {
				max-height: unset;
				animation: showAll 350ms ease-in-out;
				> ul::after {
					opacity: 0;
				}
			}
		}

		.categories-toggle-btn {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 1rem auto 1rem;
			padding: 0.5rem 1rem;
			font-size: 1.6rem;
			background-color: white;
			color: #de222a;
			border: none;
			cursor: pointer;

			.toggle-show,
			.toggle-hide {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				white-space: nowrap;
				text-align: center;
				transition: opacity 0.5s ease-in-out;
			}

			.toggle-show {
				opacity: 1;
			}

			.toggle-hide {
				opacity: 0;
			}

			.categories-container.expanded + & .toggle-show {
				opacity: 0;
			}

			.categories-container.expanded + & .toggle-hide {
				opacity: 1;
			}
		}
	}
}

@keyframes showAll {
	from {
		max-height: 300px;
	}
	to {
		max-height: 100vh;
	}
}

@keyframes collapseAll {
	from {
		max-height: 100vh;
	}
	to {
		max-height: 300px;
	}
}

.category-description {
	margin-top: 20px;

	p {
		margin: 0;
	}

	.description-body {
		position: relative;
		max-height: 150px;
		overflow: hidden;
		will-change: max-height;
		transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 60px;
			background: linear-gradient(rgba(255, 255, 255, 0), #fff);
			pointer-events: none;
			opacity: 1;
			transition: opacity 0.3s ease-in-out;
		}

		&.expanded {
			&::after {
				opacity: 0;
			}
		}
	}

	.description-toggle {
		display: inline-flex;
		align-items: center;
		margin-top: 20px;
		padding: 0;
		font-size: 1.6rem;
		background-color: transparent;
		color: #de222a;
		border: none;
		cursor: pointer;
	}
}