.attractions-map-container {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}

.attractions-filter-container {
	width: 100%;
	margin-bottom: 15px;
}

.attractions-map-wrapper {
	width: 100%;
	position: relative;
}

.attractions-yandex-map {
	width: 100%;
	height: 500px;
}

.attractions-filter {
	background-color: transparent;
	padding: 0;
	width: 100%;
}

.attractions-filter__list {
	list-style: none;
	padding: 0;
	margin: 0 0 10px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: none;
	overflow: visible;
}

/* Убираем стилизацию скроллбара, так как список теперь горизонтальный */
.attractions-filter__list::-webkit-scrollbar {
	display: none;
}

.attractions-filter__item {
	margin-bottom: 0;
	border-radius: 20px;
	transition: all 0.3s;
}

.attractions-filter__item a {
	font: 400 14px/16px 'Fira Sans', sans-serif;
	color: #323232;
	letter-spacing: -0.015em;
	display: flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 20px;
	cursor: pointer;
	text-decoration: none;
	border: none;
	background-color: rgba(0, 0, 0, .03);
}

.attractions-filter__item a > span:first-child {
	max-width: none;
}

.attractions-filter__item:hover a {
	text-decoration: none;
	color: #1AB22B !important;
	background-color: rgba(26, 178, 43, .05);
}

/* Изменяем стиль активного элемента */
.attractions-filter__item.active a {
	color: #323232;
	font-weight: 600;
}

.attractions-filter__count {
	font: 400 12px/16px 'Fira Sans', sans-serif;
	color: #888;
	border-radius: 30px;
	height: 18px;
	padding: 1px 5px;
	min-width: 18px;
	text-align: center;
	display: inline-block;
	margin-left: 3px;
}

/* Убираем изменение фона счетчика для активного элемента */
.attractions-filter__item.active a .attractions-filter__count {
	background-color: transparent;
}

/* Стили для иконки тега */
.attractions-filter__icon {
	display: flex;
	align-items: center;
	margin-right: 8px;
	flex-shrink: 0;
}

.attractions-filter__icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* Для активного элемента НЕ инвертируем иконку */
.attractions-filter__item.active .attractions-filter__icon img {
	filter: none;
}

@media (max-width: 768px) {
	.attractions-filter-container {
		margin-bottom: 15px;
	}
	
	.attractions-filter {
		padding: 5px 0;
		overflow: visible;
	}
	
	.attractions-filter__list {
		flex-wrap: wrap;
		display: flex;
		gap: 8px;
		padding-bottom: 5px;
		width: 100%;
		overflow: visible;
	}
	
	.attractions-filter__mobile-title {
		display: none; /* Скрываем мобильный заголовок */
	}
	
	.attractions-filter:before {
		display: none; /* Убираем стрелку */
	}
	
	.attractions-filter.active {
		border-radius: 0;
	}
	
	.attractions-map-wrapper {
		height: 500px;
	}
	
	.attractions-yandex-map {
		height: 500px !important;
	}
	
	/* Отключаем взаимодействие с картой на мобильных устройствах по умолчанию */
	.attractions-yandex-map:not(.map-interactive) {
		pointer-events: none;
	}
	
	/* Стили для кнопки активации карты */
	.map-activate-button {
		width: 100%;
		background-color: #1AB22B; /* Приведено к зеленому цвету из hover состояний */
		color: white;
		border: none;
		border-radius: 20px; /* Скруглённые углы как у фильтров */
		padding: 10px 12px;
		font: 500 14px/16px 'Fira Sans', sans-serif; /* Тот же шрифт, что используется в фильтрах */
		cursor: pointer;
		box-shadow: 0 2px 4px rgba(26, 178, 43, 0.2); /* Тень с оттенком зеленого */
		margin-top: 10px;
		transition: all 0.3s; /* Плавный переход для анимации */
	}
	
	.map-activate-button:hover {
		background-color: #158f22; /* Более темный оттенок при наведении */
	}
	
	.map-activate-button:active {
		transform: translateY(1px); /* Небольшая анимация при нажатии */
		box-shadow: 0 1px 2px rgba(26, 178, 43, 0.2);
	}
	
	/* Оверлей для отображения подсказки */
	.map-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.05); /* Более светлый оверлей */
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;
		pointer-events: none;
	}
	
	/* Текст подсказки на оверлее */
	.map-overlay-text {
		background-color: rgba(255, 255, 255, 0.95);
		padding: 10px 15px;
		border-radius: 20px; /* Скругленные углы как у фильтров */
		font: 500 14px/16px 'Fira Sans', sans-serif; /* Соответствие шрифту фильтров */
		color: #323232; /* Цвет текста как в фильтрах */
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	
	/* Классы для скрытия/отображения элементов карты */
	.attractions-map-hidden {
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s linear 0.3s, opacity 0.3s; /* Плавное исчезновение */
	}
	
	/* Активная карта (после активации) */
	.attractions-yandex-map.map-interactive {
		box-shadow: 0 0 0 2px rgba(26, 178, 43, 0.3); /* Зеленая рамка для активной карты */
		border-radius: 8px; /* Слегка скругленные углы */
		transition: box-shadow 0.3s;
	}
}

/* Остальные стили оставляем без изменений */
.attraction-balloon {
	max-width: 258px;
}

.attraction-balloon__title {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 10px;
}

.attraction-balloon__image {
	margin-bottom: 10px;
	text-align: center;
	width: 280px;
	height: 180px;
	position: relative;
	background-color: #f5f5f5;
	border-radius: 4px;
	overflow: hidden;
}

.attraction-balloon__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.attraction-balloon__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	color: #999;
	font-size: 14px;
}

.attraction-balloon__image-error {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
	color: #999;
	font-size: 14px;
}

.attraction-balloon__description {
	margin-bottom: 10px;
	font-size: 14px;
	max-height: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

.attraction-balloon__link {
	text-align: right;
}

/* Стили для заглушки карты */
.attractions-map-placeholder {
	background-color: #f8f8f8;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.attractions-map-placeholder__content {
	text-align: center;
	padding: 20px;
}

.attractions-map-placeholder__icon {
	margin-bottom: 15px;
}

.attractions-map-placeholder__text {
	font: 500 16px/normal 'Fira Sans', sans-serif;
	color: #666666;
}

/* Управление отображением элементов карты */
@media (max-width: 768px) {
	.attractions-map-desktop-only {
		display: none !important;
	}
}

/* По умолчанию скрываем элементы управления картой на десктопе */
.map-activate-button,
.map-overlay {
	display: none;
}

/* Показываем элементы управления картой только на мобильных устройствах */
@media (max-width: 768px) {
	.map-activate-button {
		display: block;
	}
	.map-overlay {
		display: flex;
	}
}

/* Стили для пользовательских меток на карте */
.attractions-map-custom-placemark-icon {
	width: 22px;
	height: 22px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: white;
	border-radius: 50%;
	box-sizing: border-box;
	padding: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}

.blog__tags {
	margin-bottom: 15px;
  }
  .blog__tags-list {
	list-style: none;
	padding: 0;
	margin: 0 0 10px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: none;
	overflow: visible;
  }
  .blog__tag {
	font: 400 14px/16px 'Fira Sans', sans-serif;
	color: #323232;
	letter-spacing: -0.015em;
	display: flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 20px;
	cursor: pointer;
	text-decoration: none;
	border: none;
	background-color: rgba(0, 0, 0, .03);
	transition: all 0.3s;
  }
  .blog__tag:hover {
	text-decoration: none;
	color: #1AB22B !important;
	background-color: rgba(26, 178, 43, .05);
  }
  .blog__tag--active {
	color: #323232;
	font-weight: 600;
  }
  
  @media (max-width: 768px) {
	.blog__tags {
	  padding: 5px 0;
	  overflow: visible;
	}
	
	.blog__tags-list {
	  flex-wrap: wrap;
	  display: flex;
	  gap: 8px;
	  padding-bottom: 5px;
	  width: 100%;
	  overflow: visible;
	}
  }