/* ========== FONTS ========== */

@font-face { src: url("../fonts/TikTokSans-Light.woff2") format("woff2"); font-family: "TikTokSans"; font-weight: 300; font-style: normal; font-display: swap; }
@font-face { src: url("../fonts/TikTokSans-Regular.woff2") format("woff2"); font-family: "TikTokSans"; font-weight: 400; font-style: normal; font-display: swap; }
@font-face { src: url("../fonts/TikTokSans-Medium.woff2") format("woff2"); font-family: "TikTokSans"; font-weight: 500; font-style: normal; font-display: swap; }
@font-face { src: url("../fonts/TikTokSans-SemiBold.woff2") format("woff2"); font-family: "TikTokSans"; font-weight: 600; font-style: normal; font-display: swap; }
@font-face { src: url("../fonts/TikTokSans-Bold.woff2") format("woff2"); font-family: "TikTokSans"; font-weight: 700; font-style: normal; font-display: swap; }

/* ========== ROOT ========== */

:root {
	--color-accent: #B2280F;
	--color-text: #000;
	--color-bg: #ffffff;
	--color-placeholder: #666666;
	--color-border: #dddddd;

	--font-base: "TikTokSans", Arial, sans-serif;
	--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--fs-base: 16px;
	--line-height-base: 1.6;

	--container-width: 1440px;
	--container-padding: 0px;

	--h1: 48px;
	--h2: 40px;
	--h3: 32px;
	--h4: 26px;
	--h5: 22px;
	--h6: 18px;

	--heading-lineheight: 1.2;
	--heading-weight: 700;
	--text-spacing: 1em;

	--transition-base: 0.25s ease-in-out;
}

/* ========== BASE ========== */

html {
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	min-width: 320px;
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	color: #ffffff;
	background-color: var(--color-accent);
}

::placeholder {
	color: var(--color-placeholder);
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
	user-select: none;
}

picture {
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: all var(--transition-base);
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: all var(--transition-base);
}

input,
textarea {
	outline: none;
}

:focus-visible {
	/* outline: 2px solid var(--color-accent);
	outline-offset: 2px; */
	outline: none;
}

strong,
b {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}

/* ========== LAYOUT ========== */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.center {
	text-align: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	transition: all var(--transition-base);

	background-color: var(--color-accent);
	color: #fff;
}

.btn:hover {
	opacity: .9;
}

.btn:active {
	transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ========== TYPOGRAPHY ========== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote {
	margin-top: 0;
	margin-bottom: var(--text-spacing);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--heading-weight);
	line-height: var(--heading-lineheight);
	color: inherit;
}

h1 {
	font-size: var(--h1);
	margin-bottom: 24px;
}

h2 {
	font-size: var(--h2);
	margin-bottom: 20px;
}

h3 {
	font-size: var(--h3);
	margin-bottom: 18px;
}

h4 {
	font-size: var(--h4);
	margin-bottom: 16px;
}

h5 {
	font-size: var(--h5);
	margin-bottom: 14px;
}

h6 {
	font-size: var(--h6);
	margin-bottom: 12px;
}

small {
	font-size: 14px;
	line-height: 1.4;
}

ul,
ol {
	padding-left: 1.5em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

blockquote {
	margin-left: 0;
	padding-left: 20px;
	border-left: 3px solid var(--color-accent);
	font-style: italic;
}

/* ========== BREAKPOINTS ========== */

@media (max-width: 1500px) {
	:root {
		--container-width: 1200px;
	}
}

@media (max-width: 1260px) {
	:root {
		--container-width: 960px;
	}
}

@media (max-width: 991px) {
	:root {
		--container-width: 720px;

		--h1: 40px;
		--h2: 34px;
		--h3: 28px;
		--h4: 24px;
		--h5: 20px;
		--h6: 17px;
	}
}

@media (max-width: 767px) {
	:root {
		--container-width: 540px;
	}
}

@media (max-width: 575px) {
	:root {
		--container-width: 100%;
		--container-padding: 16px;

		--h1: 32px;
		--h2: 28px;
		--h3: 24px;
		--h4: 21px;
		--h5: 18px;
		--h6: 16px;
	}
}

/* ========== USER STYLES ========== */


.kioskFrame {
	position: fixed;
	inset: 0;
	overflow: hidden;
	background: #111;
}

.kioskApp {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3840px;
	height: 2160px;
	transform: translate(-50%, -50%) scale(var(--kiosk-scale, 1));
	transform-origin: center center;
}

.kioskMap {
	position: relative;
	width: 3840px;
	height: 2160px;
	overflow: hidden;
	background: #d5c3aa;
	color: #fff;
	user-select: none;
	--accent: #B2280F;
	--panel-bg: rgba(47, 47, 47, .85);
	--btn-bg: #555;
	--btn-bg-active: #B2280F;
	--map-zoom: 1;
}

/* Заглушка. Потом можно заменить на реальную карту или картинку:
   .kioskMap__placeholder { background-image: url('../img/map.jpg'); } */
.kioskMap__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 74% 20%, rgba(80, 210, 205, .75) 0 5%, transparent 14%),
		radial-gradient(circle at 90% 82%, rgba(80, 210, 205, .75) 0 7%, transparent 16%),
		linear-gradient(28deg, rgba(48, 105, 64, .7) 0 18%, transparent 18% 100%),
		linear-gradient(160deg, transparent 0 65%, rgba(63, 122, 74, .8) 65% 100%),
		#d1b996;
	transform: scale(var(--map-zoom));
	transform-origin: 66% 52%;
	transition: transform .25s ease;
}

.kioskMap__placeholder::before,
.kioskMap__placeholder::after {
	content: "";
	position: absolute;
	left: 44%;
	top: 28%;
	width: 1120px;
	height: 520px;
	background: rgba(0, 94, 174, .55);
	border-radius: 18px;
	transform: rotate(28deg);
	box-shadow:
		-620px 580px 0 rgba(0, 132, 104, .48),
		610px 520px 0 rgba(0, 94, 174, .50),
		-220px 860px 0 rgba(0, 94, 174, .44);
}

.kioskMap__placeholder::after {
	left: 57%;
	top: 58%;
	width: 700px;
	height: 250px;
	background: rgba(0, 94, 174, .48);
	box-shadow: none;
}

.kioskMap__placeholderText {
	position: absolute;
	right: 240px;
	top: 220px;
	padding: 24px 38px;
	border-radius: 22px;
	background: rgba(0, 0, 0, .24);
	font-size: 42px;
	font-weight: 700;
	letter-spacing: .02em;
}

.kioskSearch {
	position: absolute;
	left: 200px;
	top: 200px;
	z-index: 30;
	width: 918px;
}

.kioskSearch__field {
	position: relative;
	display: flex;
	align-items: center;
	height: 140px;
	box-shadow: 0 4px 55px 0 rgba(0, 0, 0, 0.50);
}

.kioskSearch__field::before {
	content: '';
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	/* border: 20px solid rgba(47, 47, 47, 0.85); */
	background-color: rgba(47, 47, 47, 0.85);
	z-index: -1;
	border-radius: 20px;
	position: absolute;
	left: -20px;
	top: -20px;
}

.kioskSearch__icon {
	flex: 0 0 auto;
	margin-left: 55px;
	margin-right: 28px;
	color: #111;
}

.kioskSearch__input {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background: #FFF;
	padding: 0 60px 0 135px;
	color: #211106;
	font-size: 52px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;

	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='49' height='48' fill='none' viewBox='0 0 49 48'%3e%3cpath stroke='%23211106' stroke-linecap='round' stroke-linejoin='round' stroke-width='6' d='M46 45 35.632 34.873m5.59-13.206c0 10.309-8.556 18.666-19.11 18.666C11.555 40.333 3 31.976 3 21.667 3 11.357 11.556 3 22.111 3c10.555 0 19.111 8.357 19.111 18.667Z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: 60px center;
}

.kioskSearch__input::placeholder {
	color: #111;
	opacity: 1;
}

.kioskSearch__results {
	position: absolute;
	left: -20px;
	right: -20px;
	top: calc(100% + 32px);
	max-height: 640px;
	overflow: hidden;
	padding: 22px;
	border-radius: 14px;
	background: rgba(28, 28, 28, .92);
	box-shadow: 0 20px 55px rgba(0, 0, 0, .25);
}

.kioskSearch__result {
	display: block;
	width: 100%;
	min-height: 96px;
	margin: 0 0 14px;
	padding: 18px 28px;
	border-radius: 8px;
	background: rgba(88, 88, 88, .95);
	color: #fff;
	text-align: left;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.12;
}

.kioskSearch__result:last-child {
	margin-bottom: 0;
}

.kioskSearch__result span {
	display: block;
	font-size: 60px;
	font-weight: 600;
	line-height: 1.2;
}

.kioskMenu {
	position: absolute;
	z-index: 20;
}

.kioskMenu--main {
	left: 184px;
	top: 520px;
	width: 952px;
	--visible-count: 8;
	--item-height: 140px;
	--item-gap: 24px;
	--panel-padding-x: 90px;
	--panel-padding-y: 90px;
	--arrow-size: 183px;
	--arrow-height: 118px;
	--item-font: 52px;
}

.kioskMenu--sub {
	left: 1208px;
	top: 520px;
	width: 868px;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-28px);
	transition: opacity .25s ease, transform .25s ease;
	--visible-count: 10;
	--item-height: 110px;
	--item-gap: 20px;
	--panel-padding-x: 102px;
	--panel-padding-y: 80px;
	--arrow-size: 194px;
	--arrow-height: 125px;
	--item-font: 50px;
}

.kioskMenu--sub.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}

.kioskMenu__panel {
	position: relative;
	width: 100%;
	height: calc((var(--visible-count) * var(--item-height)) + ((var(--visible-count) - 1) * var(--item-gap)) + (var(--panel-padding-y) * 2));
	padding: var(--panel-padding-y) var(--panel-padding-x);
	border-radius: 20px;
	background: var(--panel-bg);
	overflow: hidden;
}

.kioskMenu__viewport {
	position: relative;
	height: calc((var(--visible-count) * var(--item-height)) + ((var(--visible-count) - 1) * var(--item-gap)));
	overflow: hidden;
}

.kioskMenu__track {
	display: flex;
	flex-direction: column;
	gap: var(--item-gap);
	will-change: transform;
}

.kioskMenu__item {
	flex: 0 0 var(--item-height);
	width: 100%;
	height: var(--item-height);
}

.kioskMenu__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 10px 24px;
	border-radius: 8px;
	background: var(--btn-bg);
	font-size: var(--item-font);
	transition: background .18s ease, transform .18s ease;

	color: #FFF;
	text-align: center;
	font-style: normal;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

.kioskMenu--sub .kioskMenu__btn {
	justify-content: flex-start;
	padding: 0 60px;
	text-align: left;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-transform: none;
}

.kioskMenu__btn.is-active,
.kioskMenu__btn:active {
	background: var(--btn-bg-active);
}

.kioskMenu__btnText {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: calc(var(--item-font) * 2.22);

}

.kioskMenu__arrow {
	position: absolute;
	left: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arrow-size);
	height: var(--arrow-height);
	background-color: rgba(47, 47, 47, .85);
	color: #fff;
	transform: translateX(-50%);
	transition: background .18s ease;
	background-repeat: no-repeat;
	background-position: center;
}

.kioskMenu__arrow:active {
	background-color: rgba(70, 70, 70, .98);
}

.kioskMenu__arrow--top {
	bottom: 100%;
	border-radius: 8px 8px 0 0;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='59' height='61' fill='none' viewBox='0 0 59 61'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='7' d='M29.4 57.459V3.5M3.5 30.48 29.4 3.5l25.9 26.98'/%3e%3c/svg%3e");
}

.kioskMenu__arrow--bottom {
	top: 100%;
	border-radius: 0 0 8px 8px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='59' height='61' fill='none' viewBox='0 0 59 61'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='7' d='M29.4 3.5v53.959M3.5 30.479l25.9 26.98 25.9-26.98'/%3e%3c/svg%3e");
}

.kioskPlace {
	position: absolute;
	left: 2360px;
	top: 690px;
	z-index: 10;
	width: 330px;
	height: 205px;
}

.kioskPlace__pin {
	position: absolute;
	left: 93px;
	top: 0;
	z-index: 2;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .22));
}

.kioskPlace__label {
	position: absolute;
	left: 0;
	top: 94px;
	min-width: 270px;
	padding: 23px 35px 25px;
	border-radius: 46px;
	background: var(--accent);
	color: #fff;
	font-size: 39px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
}

.kioskZoom {
	position: absolute;
	right: 202px;
	bottom: 308px;
	z-index: 35;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.kioskZoom__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	border-radius: 14px;
	background: #e9e9e9;
	color: #111;
	font-size: 78px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.kioskZoom__btn--minus {
	background: #e9e9e9;
	color: #111;
}

.kioskZoom__btn--minus {
	background: #e9e9e9;
	color: #111;
}

.kioskZoom__btn:active {
	transform: translateY(2px);
	background-color: #0A3522;
	color: #fff;
}

@media (max-aspect-ratio: 16/9) {
	.kioskApp {
		transform-origin: center center;
	}
}


/* ========== KIOSK UPDATES ========== */

[hidden] {
	display: none !important;
}

/* Подменю теперь появляется только после выбора пункта основного меню */
.kioskMenu--sub {
	--panel-padding-y: 94px; /* высота панели такая же, как у основного меню */
}

.kioskMenu--sub .kioskMenu__panel,
.kioskMenu--main .kioskMenu__panel {
	height: 1468px;
}

/* Поиск как на макете: белая карточка справа от поля */
.kioskSearch__results {
	position: absolute;
	left: calc(100% + 150px);
	top: 0;
	right: auto;
	z-index: 45;
	width: 1000px;
	min-height: 1240px;
	max-height: 1240px;
	overflow-y: auto;
	padding: 100px 124px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 4px 55px 0 rgba(0, 0, 0, 0.50);
	color: #111;

	overflow: unset;
}

.kioskSearch__resultsList {
	display: flex;
	flex-direction: column;
	gap: 50px;
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.kioskSearch__resultsList::-webkit-scrollbar {
	display: none;
}

.kioskSearch__close,
.kioskModal__close {
	position: absolute;
	right: -48px;
	top: -48px;
	z-index: 2;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	background: #555;
	box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

.kioskSearch__close::before,
.kioskSearch__close::after,
.kioskModal__close::before,
.kioskModal__close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 46px;
	height: 6px;
	border-radius: 999px;
	background: #fff;
	transform-origin: center;
}

.kioskSearch__close::before,
.kioskModal__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.kioskSearch__close::after,
.kioskModal__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.kioskSearch__close:active,
.kioskModal__close:active {
	background-color: #0A3522;
}

.kioskSearch__result {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: #000;
	text-align: left;
	font-size: 0;
	line-height: 1;
	transition: none;
}

.kioskSearch__result:active {
	transform: none;
}

.kioskSearch__resultTitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.14;
	color: #000;
}

.kioskSearch__resultSubtitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.18;
	color: #80736E;
}

.kioskSearch__result.is-current .kioskSearch__resultTitle,
.kioskSearch__result:active .kioskSearch__resultTitle {
	color: var(--accent);
}

.kioskSearch__empty {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	color: #000;
}

/* Модальное окно помещения */
.kioskModal {
	position: absolute;
	right: 200px;
	top: 180px;
	z-index: 50;
	width: 1124px;
	min-height: auto;
	padding: 100px 120px 130px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 4px 55px 0 rgba(0, 0, 0, 0.50);
	color: #111;
}

.kioskModal__title {
	margin-bottom: 20px;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: #211106;
}

.kioskModal__location {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	margin-bottom: 55px;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.2;
	color: #090909;
}

.kioskModal__locationIcon {
	flex: 0 0 auto;
	width: 34px;
	height: auto;
	aspect-ratio: 0.772727;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='34' height='44' fill='none' viewBox='0 0 34 44'%3e%3cpath fill='%23B2280F' d='M17 0C7.65 0 0 7.615 0 16.923c0 14.216 15.3 26.23 15.98 26.738.34.17.68.339 1.02.339.34 0 .68-.17 1.02-.339C18.7 43.154 34 31.138 34 16.923 34 7.615 26.35 0 17 0Zm0 23.692c-3.74 0-6.8-3.046-6.8-6.769 0-3.723 3.06-6.77 6.8-6.77 3.74 0 6.8 3.047 6.8 6.77 0 3.723-3.06 6.77-6.8 6.77Z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.kioskModal__text {
	margin-bottom: 80px;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.33;
	color: #000;
}

.kioskModal__text p {
	margin: 0 0 36px;
}

.kioskModal__text p:first-child {
	color: #5f5f5f;
}

.kioskModal__text p:last-child {
	margin-bottom: 0;
}

.kioskModal__actions {
	display: flex;
	align-items: center;
	gap: 32px;
}

.kioskModal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 130px;
	padding: 22px 30px;
	border-radius: 8px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	flex: auto;
}

.kioskModal__btn--accent {
	background: var(--accent);
	color: #fff;
}

.kioskModal__btn--light {
	border: 3px solid #353535;
	background: #fff;
	color: #353535;
}

/* ========== MAIN MAP / PAN ZOOM ========== */

.kioskMapCanvas {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 8600px;
	height: 5958px;
	transform-origin: 0 0;
	touch-action: none;
	cursor: grab;
	will-change: transform;
}

.kioskMapCanvas.is-dragging {
	cursor: grabbing;
}

.kioskMapCanvas.has-building-hover:not(.is-dragging) {
	cursor: pointer;
}

.kioskMapCanvas__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	max-width: none;
	pointer-events: none;
}

.kioskMapRoutes {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 8600px;
	height: 5958px;
	pointer-events: none;
}

.kioskMapRoutes__path {
	fill: none;
	stroke: #B2280F;
	stroke-width: 34px;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 16px #fff) drop-shadow(0 0 30px #fff);
	opacity: 0;
	transition:
		stroke-dashoffset var(--route-draw-duration, 2.2s) cubic-bezier(.2, .72, .24, 1),
		opacity .08s linear;
	will-change: stroke-dashoffset;
}

.kioskMapRoutes__path.is-preparing,
.kioskMapRoutes__path.is-visible {
	opacity: 1;
}

.kioskBuildingMarker {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	width: 238px;
	height: 205px;
	border: 16px solid #fff;
	border-radius: 26px;
	background: rgba(178, 40, 15, .12);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
	transform: rotate(-10deg);
}

.kioskBuildingMarker--transport {
	left: 3230px;
	top: 1460px;
}

.kioskBuildingMarker {
	transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.kioskBuildingMarker.is-hovered,
.kioskBuildingMarker:focus-visible {
	background: rgba(178, 40, 15, .28);
	box-shadow: 0 0 0 8px rgba(178, 40, 15, .18), 0 12px 30px rgba(0, 0, 0, .28);
}

.kioskBuildingMarker:active,
.kioskBuildingMarker.is-active {
	border-color: #fff;
	background: rgba(178, 40, 15, .48);
	box-shadow: 0 0 0 11px rgba(178, 40, 15, .28), 0 14px 34px rgba(0, 0, 0, .34);
}

.kioskBuildingMarker:focus { outline: none; }

.kioskMapCanvas .kioskPlace {
	left: 2300px;
	top: 590px;
	z-index: 5;
	pointer-events: none;
}

/* На главной теперь настоящая jpg-карта вместо CSS-заглушки */
.kioskMap__placeholder {
	display: none;
}

.kioskMap > .kioskPlace {
	display: none;
}

.kioskMapCanvas .kioskPlace {
	display: block;
}

/* ========== SEARCH VIEWPORT FIX ========== */

.kioskSearch__results {
	overflow: visible !important;
}

.kioskSearch__resultsViewport {
	width: 100%;
	height: 100%;
	max-height: 1040px;
	overflow: hidden;
}

.kioskSearch__resultsList {
	max-height: 1040px;
	overflow-y: auto;
	padding-right: 4px;
}

/* ========== BUILDING PAGE ========== */

.kioskMap--building {
	background: #fff;
	color: #000;
}

.kioskApp--building .kioskSearch {
	left: 200px;
	top: 200px;
}

.kioskBuildingTitle {
	position: absolute;
	left: 1460px;
	top: 255px;
	z-index: 6;
	margin: 0;
	font-size: 96px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: #000;
}

.kioskBackBtn {
	position: absolute;
	right: 200px;
	top: 200px;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 34px;
	width: 500px;
	height: 174px;
	padding: 28px 50px;
	border-radius: 14px;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 14px 32px rgba(0, 0, 0, .16);
}

.kioskBackBtn__icon {
	flex: 0 0 auto;
	width: 100px;
	height: 100px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' fill='none' viewBox='0 0 104 104'%3e%3cpath fill='%23fff' d='M17.333 13h43.334v78H17.333V13Zm10.834 10.833v10.834H39V23.833H28.167Zm0 21.667v10.833H39V45.5H28.167Zm0 21.667V78H39V67.167H28.167Zm48.75-13H65V91h26V65c0-5.983-8.1-10.833-14.083-10.833Z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.kioskBackBtn__text {
	font-size: 40px;
	font-weight: 800;
	line-height: 1.12;
}

.kioskApp--building .kioskMenu--main {
	left: 184px;
	top: 520px;
}

.kioskApp--building .kioskMenu--sub {
	left: 1186px;
	top: 520px;
	z-index: 21;
}

.kioskBuildingPlan {
	position: absolute;
	left: 1320px;
	top: 760px;
	z-index: 5;
	width: 2030px;
	height: 1020px;
	border: 12px solid #5A5B60;
	background:
		linear-gradient(#5A5B60, #5A5B60) 0 52% / 100% 8px no-repeat,
		linear-gradient(90deg, #5A5B60, #5A5B60) 27% 0 / 8px 100% no-repeat,
		linear-gradient(90deg, #e2e2e2, #e2e2e2) 82% 0 / 4px 80% no-repeat,
		#f4f4f4;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .05) inset;
}

.kioskRoom {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border: 4px solid transparent;
	background: transparent;
	color: #000;
	font-size: 46px;
	font-weight: 800;
	line-height: 1.05;
	text-align: center;
}

.kioskRoom.is-active,
.kioskRoom:active {
	background: var(--accent);
	color: #fff;
}

.kioskRoom--welding {
	left: 110px;
	top: 120px;
	width: 430px;
	height: 270px;
}

.kioskRoom--cold {
	left: 110px;
	top: 560px;
	width: 430px;
	height: 260px;
}

.kioskRoom--warehouse {
	left: 660px;
	bottom: 0;
	width: 1340px;
	height: 190px;
}

.kioskRoom--tire {
	right: 210px;
	top: 160px;
	width: 390px;
	height: 280px;
}

.kioskRoom--toilet-a {
	right: 30px;
	top: 30px;
	width: 120px;
	height: 110px;
	font-size: 24px;
}

.kioskRoom--toilet-b {
	right: 30px;
	top: 160px;
	width: 190px;
	height: 120px;
	font-size: 28px;
}

.kioskRoom--smoking {
	right: 15px;
	bottom: 210px;
	width: 150px;
	height: 120px;
	font-size: 22px;
}

.kioskRoom--stairs {
	left: 585px;
	bottom: 8px;
	width: 110px;
	height: 165px;
	font-size: 18px;
}

.kioskFloorBtns {
	position: absolute;
	right: 200px;
	top: 610px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.kioskFloorBtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 170px;
	height: 170px;
	border-radius: 14px;
	background: #e5e5e5;
	color: #000;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
}

.kioskFloorBtn span {
	margin-bottom: 14px;
	font-size: 54px;
	line-height: .8;
}

.kioskFloorBtn.is-active {
	background: #053E28;
	color: #fff;
}

.kioskApp--building .kioskModal {
	right: auto;
	left: 1850px;
	top: 680px;
	width: 1020px;
	padding: 88px 110px 110px;
}

.kioskApp--building .kioskModal__title {
	font-size: 54px;
	text-transform: none;
}

.kioskApp--building .kioskModal__location {
	margin-bottom: 50px;
	font-size: 36px;
}

.kioskApp--building .kioskModal__text {
	margin-bottom: 0;
	font-size: 31px;
}

.kioskApp--building .kioskModal__actions {
	display: none;
}

.kioskApp--building .kioskZoom {
	right: 200px;
	bottom: 170px;
}


/* ========== BUILDING PNG/WEBP OBJECTS ========== */

.kioskBuildingObject {
	position: absolute;
	z-index: 4;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform-origin: center;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	touch-action: manipulation;
	pointer-events: none;
}

.kioskBuildingObject__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	opacity: .001;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.kioskBuildingObject__highlight {
	position: absolute;
	inset: 0;
	background: rgba(178, 40, 15, .28);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	filter:
		drop-shadow(0 0 3px #fff)
		drop-shadow(0 0 7px #fff)
		drop-shadow(0 7px 10px rgba(0, 0, 0, .30));
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, background-color .18s ease, filter .18s ease;
}

/* Наведение: мягкая красная заливка точно по форме прозрачного PNG. */
.kioskBuildingObject.is-hovered .kioskBuildingObject__highlight,
.kioskBuildingObject:focus-visible .kioskBuildingObject__highlight {
	opacity: .82;
}

/* Выбранное здание: более заметная заливка и белая светящаяся обводка. */
.kioskBuildingObject.is-active .kioskBuildingObject__highlight,
.kioskBuildingObject:active .kioskBuildingObject__highlight {
	background: rgba(178, 40, 15, .52);
	filter:
		drop-shadow(0 0 4px #fff)
		drop-shadow(0 0 10px #fff)
		drop-shadow(0 0 19px rgba(178, 40, 15, .78))
		drop-shadow(0 10px 14px rgba(0, 0, 0, .36));
	opacity: 1;
	animation: kioskBuildingSelectedPulse 1.9s ease-in-out infinite;
}

.kioskBuildingObject:focus { outline: none; }

@keyframes kioskBuildingSelectedPulse {
	0%, 100% { opacity: .86; }
	50% { opacity: 1; }
}

@media (hover: none) {
	.kioskBuildingObject:active .kioskBuildingObject__highlight,
	.kioskBuildingObject.is-active .kioskBuildingObject__highlight {
		opacity: 1;
	}
}