/* ========== KIOSK SEARCH KEYBOARD ========== */

.kioskSearch.is-keyboard-open {
	z-index: 80;
}

/*
 * Клавиатура находится рядом с полем поиска, а не снизу экрана.
 * Размеры рассчитаны под базовый киоск 3840 × 2160.
 */
.kioskKeyboard {
	position: absolute;
	left: calc(100% + 170px);
	top: -2px;
	z-index: 90;
	width: 1570px;
	padding: 26px 30px 30px;
	border: 4px solid #f0f0f2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 55px rgba(0, 0, 0, .20);
	font-family: var(--font-base);
	user-select: none;
	touch-action: manipulation;
}

.map__keyboard,
.kioskKeyboard {
	display: grid;
	grid-template-columns: repeat(13, minmax(0, 1fr));
	grid-template-rows: repeat(5, 100px);
	grid-auto-flow: row;
	gap: 12px;
}

.kb-key,
.kioskKeyboard__key {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 100px;
	padding: 0 14px;
	border: 3px solid #ececec;
	border-radius: 14px;
	background: #fbfbfb;
	box-shadow: 0 6px 2px rgba(4, 7, 29, .06);
	color: #676768;
	font-family: var(--font-base);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .1s ease-in-out, box-shadow .1s ease-in-out, background-color .1s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.kb-key:active,
.kb-key.is-pressed,
.kioskKeyboard__key:active,
.kioskKeyboard__key.is-pressed {
	background: #f3f3f3;
	box-shadow: 0 2px 1px rgba(4, 7, 29, .06);
	transform: translateY(3px);
}

.kb-back,
.kioskKeyboard__key--back {
	grid-column: 12 / 14;
	font-size: 25px;
	gap: 13px;
}

.kb-back::before,
.kioskKeyboard__key--back::before {
	content: '';
	flex: 0 0 auto;
	width: 27px;
	height: 14px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' fill='none' viewBox='0 0 18 9'%3e%3cpath fill='%23676768' d='M0 4.5 4.966 0v2.813H18v3.374H4.966V9L0 4.5Z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.kb-space,
.kioskKeyboard__key--space {
	grid-column: span 8;
	font-size: 27px;
}

.kb-search,
.kioskKeyboard__key--search {
	grid-column: 12 / 14;
	grid-row: 3 / 6;
	height: auto;
	flex-direction: column;
	gap: 12px;
	font-size: 26px;
}

.kb-search::before,
.kioskKeyboard__key--search::before {
	content: '';
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' viewBox='0 0 30 30'%3e%3cpath fill='%23676768' fill-rule='evenodd' d='m29.779 27.033-8.384-8.29A11.797 11.797 0 0 0 14.905.408a11.842 11.842 0 0 0-10.734 2.4A11.808 11.808 0 0 0 .06 12.994a11.803 11.803 0 0 0 2.165 5.728 11.847 11.847 0 0 0 16.53 2.688l8.321 8.308a.908.908 0 0 0 1.314 0l1.314-1.312a1.049 1.049 0 0 0 .075-1.374Zm-17.957-7.185a8.08 8.08 0 0 1-4.484-1.358 8.047 8.047 0 0 1-1.223-12.4 8.075 8.075 0 0 1 8.796-1.746 8.069 8.069 0 0 1 3.622 2.968 8.05 8.05 0 0 1 1.36 4.477 8.03 8.03 0 0 1-2.358 5.704 8.052 8.052 0 0 1-5.713 2.355Z' clip-rule='evenodd'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.kb-key[data-key="*"],
.kioskKeyboard__key[data-key="*"] {
	padding-top: 13px;
	font-size: 42px;
	line-height: 1;
}

/* Результаты поиска располагаются под полем, как на макете. */
.kioskSearch__results {
	left: 0px !important;
	right: auto !important;
	width: 915px !important;
	top: calc(100% + 82px) !important;
	min-height: 1210px;
	max-height: 1210px;
	padding: 100px 110px !important;
}

.kioskSearch__resultsViewport,
.kioskSearch__resultsList {
	max-height: 1018px;
}

@media (hover: hover) and (pointer: fine) {
	.kb-key:hover,
	.kioskKeyboard__key:hover {
		background: #f6f6f6;
	}
}