/*
 * Строка поиска и онбординг страницы мероприятий.
 *
 * Свечение под строкой, пилюля и шторка живут в общем модуле
 * changellenge.main.ai-drawer: они одинаковы на мероприятиях и вакансиях.
 */

.nmp-hero__search-block {
	position: relative;
	width: 100%;
}

.nmp-hero__search-row {
	/* Над свечением: иначе размытый слой ложится на поле и кнопку. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
}

.nmp-hero__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	gap: 8px;
	background: #ffffff;
	/*
	 * Рамки у поля нет намеренно. Она осталась от обычной строки поиска, а
	 * форму умному поиску задаёт свечение: серая рамка внутри ореола читалась
	 * как вторая граница и спорила с ним.
	 */
	border: 0;
	border-radius: 16px;
	padding: 16px;
	/* Свечение задаёт общий модуль changellenge.main.ai-drawer. */
}

.nmp-hero__search-icon {
	flex-shrink: 0;
}

.nmp-hero__search-field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.nmp-hero__search-field input {
	width: 100%;
	color: #121217;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	background: none;
	border: 0;
	outline: none;
	padding: 0;
}

.nmp-hero__placeholder {
	position: absolute;
	top: 50%;
	left: 0;
	max-width: 100%;
	color: #9D9D9D;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	transform: translateY(-50%);
	pointer-events: none;
}

.nmp-hero__placeholder::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 14px;
	margin-left: 1px;
	vertical-align: -2px;
	background: #9D9D9D;
	animation: nmp-caret 1s step-end infinite;
}

.nmp-hero__placeholder._typing::after {
	animation: none;
	opacity: 1;
}

.nmp-hero__placeholder:empty::after {
	display: none;
}

@keyframes nmp-caret {
	0%, 49% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}

.nmp-hero__search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 48px;
	gap: 8px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	line-height: 16px;
	background: #BD0C1E;
	border: 0;
	border-radius: 16px;
	padding: 16px 24px;
	transition: background-color 0.2s;
}

.nmp-hero__search-submit._disabled {
	background: #9D9D9D;
}

.nmp-hero__search-submit-icon {
	display: none;
}

.nmp-floater__ai-response a {
	display: inline;
	color: #BD0C1E;
	font-style: normal;
	white-space: nowrap;
	margin-left: 6px;
}

.nmp-floater__ai-response a:hover {
	color: #121217;
}

.nmp-floater__ai-response button.close {
	position: absolute;
	top: 12px;
	right: 14px;
	display: flex;
	width: 10px;
	height: 10px;
	color: #9D9D9D;
	background: none;
	border: 0;
	padding: 0;
	z-index: 10;
}

.nmp-hero__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: #9D9D9D;
	background: none;
	border: 0;
	padding: 0;
	transition: transform 0.2s;
}

.nmp-hero__search-btn:hover {
	transform: scale(1.1);
}

.nmp-hero__search-clean svg {
	width: 12px;
	height: 12px;
}

.nmp-hero__search-btn_spinner,
.nmp-floater-search-btn_spinner {
	display: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(18, 18, 23, 0.3);
	border-top-color: #121217;
	border-radius: 50%;
	animation: nmp-spin 1s linear infinite;
	box-sizing: border-box;
	margin: 0 4px;
}

@keyframes nmp-spin {
	to {
		transform: rotate(360deg);
	}
}

.nmp-hero__search._disabled input,
.nmp-floater__inner._disabled input {
	pointer-events: none;
}

.nmp-hero__search._disabled .nmp-hero__search-btn,
.nmp-floater__inner._disabled button {
	display: none;
}

.nmp-hero__search._disabled .nmp-hero__search-btn_spinner,
.nmp-floater__inner._disabled .nmp-floater-search-btn_spinner {
	display: block;
}

.nmp-floater {
	position: fixed;
	bottom: 40px;
	left: 50%;
	/*
	 * Ширину задаёт ряд чипов, а не длина списков внутри них: в макете строка
	 * поиска ровно по ширине фильтров.
	 */
	width: fit-content;
	max-width: calc(100vw - 48px);
	z-index: 10000;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
	transition: opacity 0.3s cubic-bezier(.34, 1.56, .64, 1),
	transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}

.nmp-floater--hidden {
	opacity: 0;
	transform: translateX(-50%) translateY(16px);
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.3s cubic-bezier(.34, 1.56, .64, 1),
	transform 0.3s cubic-bezier(.34, 1.56, .64, 1),
	visibility 0s linear 0.3s;
}

.nmp-floater__ai-response {
	position: relative;
	color: #121217;
	font-size: 16px;
	line-height: 24px;
	font-style: italic;
	background: #FFFFFF;
	border: 1px solid #F2F2F2;
	border-radius: 16px;
	padding: 16px 44px 16px 20px;
	/*
	 * 32 = 16 нахлёста серой подложки + 16 воздуха.
	 *
	 * Подложка панели (`.nmp-floater__panel::before`) выходит за панель на 16
	 * пикселей вверх, а реплика отступала от самой панели на 12 — то есть на
	 * четыре пикселя заезжала на подложку и выглядела приклеенной к ней. Тот же
	 * зазор, что и на вакансиях: там подложка шире, поэтому и отступ там 40.
	 */
	margin-bottom: 32px;
	box-shadow: 0 0 8px 0 rgba(157, 157, 157, 0.2);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
}

.nmp-floater__ai-response._show {
	opacity: 1;
	pointer-events: auto;
}

.nmp-floater__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	border-radius: 16px;
	background: #FFFFFF;
	padding: 0 8px 0 18px;
	box-shadow: 0 0 8px 0 rgba(157, 157, 157, 0.2);
}

.nmp-floater__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nmp-floater__panel::before {
	content: '';
	position: absolute;
	inset: -16px;
	border-radius: 20px;
	background: rgba(208, 208, 208, 0.65);
	backdrop-filter: blur(3px);
	pointer-events: none;
	z-index: -1;
}

.nmp-floater__inner input {
	flex: 1;
	min-width: 0;
	color: #121217;
	font-size: 14px;
	line-height: 16px;
	background: transparent;
	border: none;
	outline: none;
	padding: 0;
}

.nmp-floater__inner input::placeholder {
	color: #9D9D9D;
}

.nmp-floater__inner .nmp-floater-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: #121217;
	background: transparent;
	border: 0;
	border-radius: 50%;
	padding: 0;
	transition: transform 0.2s;
}

.nmp-floater__inner .nmp-floater-search-btn:hover {
	transform: scale(1.1);
}

.nmp-floater__inner .nmp-floater-search-btn svg {
	width: 14px;
	height: 14px;
}

.nmp-floater__inner .nmp-floater-search-clean svg {
	width: 12px;
	height: 12px;
}

@media (max-width: 1199px) {
	.nmp-floater {
		bottom: 84px;
	}
}

@media (max-width: 992px) {
	.nmp-hero__search-row {
		gap: 8px;
	}

	.nmp-hero__search {
		height: 40px;
		padding: 12px 16px;
	}

	.nmp-hero__search-submit {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		padding: 0;
	}

	.nmp-hero__search-submit-text {
		display: none;
	}

	.nmp-hero__search-submit-icon {
		display: block;
	}

	.nmp-floater__ai-response {
		max-width: 100%;
		font-size: 15px;
		line-height: 21px;
		padding: 16px 20px;
		/* Подложка та же, воздуха меньше: экран узкий. */
		margin-bottom: 28px;
	}

	.nmp-floater__inner {
		height: 40px;
	}

	.nmp-floater__inner::before {
		inset: -16px;
	}
}

@media (max-width: 700px) {
	.nmp-floater {
		width: calc(100% - 32px);
	}

	.nmp-floater__inner::before {
		inset: -16px -16px -45px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nmp-hero__placeholder::after,
	.nmp-hero__search-btn_spinner,
	.nmp-floater-search-btn_spinner {
		animation: none;
	}

	.nmp-floater,
	.nmp-floater--hidden,
	.nmp-floater__ai-response {
		transition: none;
	}
}

/* Фильтры внутри липкой панели */
.nmp-floater__filters .events-filter__content {
	max-width: none;
	gap: 8px;
	padding: 0;
}

/*
 * Чипы в панели не ужимаются: ширину панели задают они, а не наоборот.
 * Иначе последний чип «Мы рекомендуем» вылезал за край подложки.
 */
.nmp-floater__filters .events-filter__content .swiper,
.nmp-floater__filters .events-filter__content .swiper-wrapper {
	flex: 0 0 auto;
	width: max-content;
}

.nmp-floater__filters .filter-item .multiselect__tags {
	background: #FFFFFF;
}

.nmp-floater__filters .filter-item .multiselect__content-wrapper {
	margin-top: 0;
	margin-bottom: 10px;
}

/*
 * Плашка фильтра остаётся пилюлей и когда список раскрыт. Vue-multiselect
 * срезает у неё углы, чтобы склеить с выпадашкой, а в макете это две
 * отдельные формы.
 */
.filter-item .multiselect--active .multiselect__tags,
.filter-item .multiselect--active.multiselect--above .multiselect__tags {
	border-radius: 16px;
}

/* Список в панели не режем на середине пункта. */
.nmp-floater__filters .filter-item .multiselect__content-wrapper,
.events-ai__filters .filter-item .multiselect__content-wrapper {
	max-height: min(420px, 50vh) !important;
}

.nmp-floater__filters .filter-item .multiselect__content,
.events-ai__filters .filter-item .multiselect__content {
	max-height: min(340px, 40vh);
}

/*
 * Пока раскрыт список фильтра, панель не прячется, даже если строка поиска в
 * шапке снова попала на экран: иначе выбор фильтра обрывался бы на середине.
 */
.nmp-floater--hidden:has(.multiselect--active) {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/*
 * Пока раскрыт список фильтра, реплика агента прячется: иначе она перекрывает
 * выпадашку, которая раскрывается вверх.
 */
.nmp-floater:has(.multiselect--active) .nmp-floater__ai-response {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 992px) {
	/* Список не должен вылезать за экран: страница обрезает горизонталь. */
	.filter-item .multiselect__content-wrapper {
		max-width: calc(100vw - 32px);
	}

	.nmp-floater {
		width: calc(100vw - 32px);
		max-width: calc(100vw - 32px);
	}

	/* На мобильном фильтры липнут к верху экрана, в панели они не нужны. */
	.nmp-floater__filters {
		display: none;
	}
}

.events-tour {
	position: fixed;
	inset: 0;
	z-index: 10000;
	pointer-events: none;
}

.events-tour__spotlight {
	position: fixed;
	border-radius: 16px;
	box-shadow: 0 0 0 9999px rgba(18, 18, 23, 0.55);
	outline: 2px solid #FFFFFF;
	pointer-events: none;
	transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.events-tour__bubble {
	position: fixed;
	z-index: 1;
	width: min(400px, calc(100vw - 32px));
	color: #121217;
	font-family: inherit;
	background: #FFFFFF;
	border-radius: 16px;
	padding: 24px 24px 20px;
	box-shadow: 0 8px 24px rgba(18, 18, 23, 0.16);
	pointer-events: auto;
}

.events-tour__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #9D9D9D;
	background: transparent;
	border: 0;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
}

.events-tour__close:hover,
.events-tour__close:focus-visible {
	color: #121217;
}

.events-tour__close:focus-visible {
	outline: 2px solid #BD0C1E;
	outline-offset: 1px;
}

.events-tour__title {
	margin: 0 28px 8px 0;
	color: #121217;
	font-size: 20px;
	font-weight: 500;
	line-height: 26px;
	text-transform: none;
}

.events-tour__text {
	margin: 0 0 16px;
	color: #121217;
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
}

.events-tour__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.events-tour__counter {
	flex-shrink: 0;
	color: #9D9D9D;
	font-size: 14px;
	line-height: 16px;
}

.events-tour__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
}

.events-tour__skip {
	height: 40px;
	color: #121217;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	background: transparent;
	border: 0;
	border-radius: 12px;
	padding: 0 12px;
	cursor: pointer;
}

.events-tour__skip:hover,
.events-tour__skip:focus-visible {
	color: #BD0C1E;
}

.events-tour__skip:focus-visible {
	outline: 2px solid #BD0C1E;
	outline-offset: 1px;
}

.events-tour__next {
	height: 40px;
	min-width: 96px;
	font-size: 14px;
	line-height: 16px;
	border-radius: 12px;
	padding: 10px 16px;
}

.events-tour__next:focus-visible {
	outline: 2px solid #BD0C1E;
	outline-offset: 2px;
}

@media (max-width: 992px) {
	.events-tour__bubble {
		width: min(340px, calc(100vw - 24px));
		padding: 16px 16px 12px;
	}

	.events-tour__title {
		font-size: 17px;
		line-height: 22px;
	}

	.events-tour__text {
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 12px;
	}

	.events-tour__next,
	.events-tour__skip {
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.events-tour__spotlight {
		transition: none;
	}
}