﻿/* Блок «топ запросов» на asic-miners (и при активных фильтрах). */

.catalog-section.catalog-top-queries {
	margin: 120px 0;
}

.catalog-top-queries .swiper {
	--swiper-pagination-bottom: 0px;
	--swiper-theme-color: #fc8416;
	--swiper-pagination-bullet-inactive-color: #c7ced4;
	--swiper-pagination-bullet-inactive-opacity: 1;
}

.catalog-swiper-btn {
	min-width: 46px;
	min-height: 46px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity 0.3s ease;
	background: linear-gradient(180deg, #f99515 0%, #ff7316 100%);
	color: #ffffff;
}

.catalog-swiper-btn:hover {
	opacity: 0.88;
}

.catalog-swiper-btn:focus-visible {
	outline: 2px solid #ff7316;
	outline-offset: 2px;
}

.catalog-swiper-btn.swiper-button-disabled {
	background: #ffffff;
	color: #c6c6cb;
	border: 1px solid #e5e7e8;
	opacity: 1;
	pointer-events: none;
}

.catalog-top-queries {
	color: #38373f;
}

.catalog-top-queries__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.catalog-top-queries__keywords {
	width: 100%;
	min-width: 0;
}

.catalog-top-queries__keywords-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
}

.catalog-top-queries__keywords-row .catalog-swiper-btn {
	flex: 0 0 auto;
}

.catalog-top-queries__keywords-viewport {
	flex: 1 1 auto;
	min-width: 0;
}

.catalog-top-queries__swiper.swiper {
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

.catalog-top-queries__swiper .swiper-slide {
	width: auto;
	height: auto;
}

.catalog-top-queries__keyword {
	display: inline-flex;
	align-items: center;
	min-height: 45px;
	padding: 1px 10px 2px;
	border: 2px solid #f8f8fa;
	border-radius: 5px;
	background-color: #f8f8fa;
	font-weight: 500;
	font-size: 14px;
	line-height: 25px;
	color: #333333;
	text-decoration: none;
	white-space: nowrap;
}

.catalog-top-queries__keyword:hover {
	text-decoration: none;
	color: #ff6a16;
}

.catalog-top-queries__modes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: -10px;
	width: 100%;
}

.catalog-top-queries__mode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 8px 8px 12px;
	border: 1px solid #c45108;
	border-radius: 12px;
	background-color: #ffffff;
	font-family: inherit;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: #c45108;
	cursor: pointer;
	transition:
		color 0.3s ease,
		background 0.3s ease;
}

.catalog-top-queries__mode:focus-visible {
	outline: 2px solid #c45108;
	outline-offset: 2px;
}

.catalog-top-queries__mode:hover {
	color: #fff;
	background: #c45108;
}

.catalog-top-queries__mode.is-active {
	color: #fff;
	background: #c45108;
}

.catalog-top-queries__columns-wrap {
	width: 100%;
	min-width: 0;
}

.catalog-top-queries__columns {
	min-height: 100px;
}

.catalog-top-queries__columns[hidden] {
	display: none !important;
}

.catalog-top-queries__list {
	margin: 0;
	padding: 0;
	list-style: none;
	column-count: 7;
	column-gap: 12px;
}

.catalog-top-queries__list li {
	margin: 0;
	padding: 0;
	break-inside: avoid;
}

.catalog-top-queries__link {
	display: block;
	font-weight: 500;
	font-size: 14px;
	line-height: 25px;
	color: #38373f;
	text-decoration: none;
}

.catalog-top-queries__link:hover {
	text-decoration: none;
	color: #ff6a16;
}

@media (max-width: 1400px) {
	.catalog-top-queries__list {
		column-count: 6;
		column-gap: 20px;
	}
}

@media (max-width: 1200px) {
	.catalog-top-queries__inner {
		gap: 20px;
	}
	.catalog-top-queries__modes {
		margin-top: 25px;
	}
	.catalog-top-queries__mode {
		min-height: 48px;
		min-width: 190px;
	}
	.catalog-top-queries__list {
		column-count: 4;
	}
}

@media (max-width: 1023px) {
	.catalog-top-queries__keywords-row > .catalog-swiper-btn {
		display: none;
	}

	.catalog-top-queries__swiper.swiper {
		padding-bottom: 35px;
	}

	.catalog-top-queries__list {
		column-count: 3;
	}
}

@media (max-width: 576px) {
	.catalog-top-queries__columns {
		max-height: 200px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #ff6a16 #fff;
	}

	.catalog-top-queries__columns::-webkit-scrollbar {
		width: 6px;
	}

	.catalog-top-queries__columns::-webkit-scrollbar-track {
		background: #fff;
		border-radius: 2px;
	}

	.catalog-top-queries__columns::-webkit-scrollbar-thumb {
		background: #ff6a16;
		border-radius: 2px;
	}

	.catalog-top-queries__list {
		column-count: 2;
	}

	.catalog-top-queries__mode {
		min-height: 48px;
		width: calc(50% - 8px);
		min-width: auto;
	}
}

/* A11y: touch targets для pagination bullets */
.catalog-top-queries .swiper-pagination-bullet {
	border: 0;
	margin: 0 8px !important;
	padding: 16px 16px;
	width: 12px;
	height: 44px;
	box-sizing: content-box;
	background-clip: content-box;
	cursor: pointer;
}

.catalog-top-queries .swiper-pagination-bullet:focus-visible {
	outline: 2px solid #c45108;
	outline-offset: 2px;
}
