/* Domus galerija kiosk - laid out after the client's plan mock-up:
   white chrome, one grey plan panel holding both floors, orange for the
   thing you are currently looking for. */
:root {
	--ink: #1a1a18;
	--plan-bg: #E6E7E7;
	--accent: #F5821F;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font: 400 16px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: column;
	-webkit-tap-highlight-color: transparent;
	/* a kiosk visitor double-tapping the plan or a name should never see a
	   text-selection highlight - there is nothing here meant to be copied */
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
/* the search box is the one place typing/selecting text is the point */
input, textarea {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

/* ---------- header ---------- */
header {
	display: flex;
	align-items: center;
	gap: 34px;
	padding: 18px 46px 14px;
	flex: none;
}
.logo-link { display: block; line-height: 0; }
.logo { height: 54px; width: auto; display: block; }

nav { display: flex; align-items: center; gap: 30px; margin-left: 18px; flex: 1; }
.nav-item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: inherit;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 4px 2px;
	cursor: pointer;
	white-space: nowrap;
}
.nav-item.two-line { line-height: 1.2; white-space: normal; max-width: 145px; }
.nav-item:hover, .nav-item.on { color: var(--accent); }
.nav-item svg { width: 22px; height: 22px; flex: none; }

.lang {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .03em;
}
.lang a { color: var(--ink); text-decoration: none; opacity: .45; }
.lang a.on { opacity: 1; }

/* ---------- plan ---------- */
main { flex: 1 1 auto; padding: 0 46px; min-height: 0; overflow: auto; transition: padding-right .18s; }
/* keep the plan clear of the tenant list instead of sliding under it */
body.panel-open main { padding-right: 456px; }
#myMaps { display: flex; flex-direction: column; background: var(--plan-bg); }
/* the plugin shows one map at a time; both floors belong on one screen */
#myMaps > div { display: block !important; }
#myMaps > #floor1 { order: 1; }
#myMaps > #floor2 { order: 2; }
#myMaps > div svg { width: 100% !important; height: auto !important; display: block; }

/* the browser's focus ring boxes in the whole element; units are L-shaped, so
   we draw our own border along the shape instead */
#Rooms a:focus, #Rooms a:focus-visible { outline: none; }
.wayfindingRoom path {
	fill: var(--accent) !important;
	fill-opacity: .85 !important;
	stroke: var(--ink);
	stroke-width: 2;
	stroke-linejoin: round;
}

/* ---------- legend ---------- */
footer { flex: none; padding: 22px 46px 18px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; }
.legend-item { display: flex; align-items: center; gap: 11px; font-size: 14px; line-height: 1.2; }
.legend-item .ico { width: 34px; height: 34px; flex: none; }
.legend-item .label { max-width: 120px; }
/* the ones with a real spot on the plan double as a highlight shortcut */
.legend-item[data-amenity] { cursor: pointer; border-radius: 4px; }
.legend-item[data-amenity]:hover .label,
.legend-item[data-amenity]:focus-visible .label,
.legend-item[data-amenity].on .label { color: var(--accent); }
.legend-item[data-amenity]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ico.missing {
	border: 1px dashed #b9b9b9;
	border-radius: 4px;
	display: grid;
	place-items: center;
	font-size: 10px;
	color: #b9b9b9;
}

/* ---------- content window ---------- */
.sheet {
	position: fixed;
	inset: 0;
	background: rgba(26,26,24,.35);
	display: flex;
	z-index: 40;
}
.sheet[hidden] { display: none; }
/* white like the tenant cards - the dim sits behind this, not over it */
.sheet-card {
	position: relative;
	margin: auto;
	/* these windows hold a page of practical facts, not a document: a fixed
	   90vw x 92vh box left most of the screen empty under the text */
	width: min(92vw, 1360px);
	max-height: 93vh;
	background: #fff;
	border: 1px solid #e2e2e2;
	box-shadow: 0 30px 80px rgba(0,0,0,.18);
	display: flex;
	flex-direction: column;
}
.sheet-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border-bottom: 1px solid #eee;
	flex: none;
}
.sheet-title { font-weight: 700; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; }
.sheet-close {
	margin-left: auto;
	background: none; border: 0; cursor: pointer;
	font-size: 34px; line-height: 1; color: #9a9a9a; padding: 0 6px;
}
/* the card is capped at 90vh, so whatever the page holds has to scroll
   inside it - without this the tail of a long window was simply cut off */
.sheet-body { flex: 1 1 auto; min-height: 0; position: relative; overflow: auto; }
.sheet-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.sheet-body iframe[hidden] { display: none; }
.sheet-html { padding: 26px 38px 28px; font-size: 17px; line-height: 1.5; }
.sheet-html[hidden] { display: none; }

/* ---------- tenant panel ---------- */
.panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: 420px;
	max-width: 92vw;
	background: #fff;
	border-left: 1px solid #e2e2e2;
	box-shadow: -18px 0 40px rgba(0,0,0,.07);
	display: flex;
	flex-direction: column;
	z-index: 20;
}
.panel[hidden] { display: none; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 20px 22px 14px; }
#panel-search {
	flex: 1;
	font-family: inherit;
	font-size: 17px;
	padding: 11px 14px;
	border: 1px solid #d6d6d6;
	border-radius: 2px;
	color: var(--ink);
}
#panel-search:focus { outline: 0; border-color: var(--accent); }
.panel-close {
	background: none; border: 0; cursor: pointer;
	font-size: 30px; line-height: 1; color: #9a9a9a; padding: 0 4px;
}
.panel-body { flex: 1; overflow: auto; padding: 0 22px 24px; }
.tenants { list-style: none; margin: 0; padding: 0; }
.tenants[hidden] { display: none; }
.tenant {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 4px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}
.tenant:hover, .tenant.on { color: var(--accent); }
.tenant.no-room { cursor: default; color: inherit; }
.tenant.no-room:hover { color: inherit; }
/* a logo in the list, where one has been uploaded; the name stays so the
   list is still scannable and searchable. Kept large enough to read from
   standing distance - this is a kiosk, not a phone. */
.tenant-logo { flex: none; width: 84px; height: 48px; object-fit: contain; object-position: left center; }
.tenant-name { flex: 1; font-size: 16px; }
.tenant-floor { font-size: 13px; color: #6b6b6b; white-space: nowrap; }
.tenant-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; color: #9a9a9a; }

/* business centre: one collapsible group per floor */
.vc-intro { font-size: 14px; line-height: 1.5; color: #4a4a4a; padding: 4px 0 18px; }
.vc-intro .lead { font-weight: 500; color: var(--ink); font-size: 15px; }
.vc-intro ul { margin: 10px 0 0; padding-left: 18px; }
.vc-intro li { margin-bottom: 6px; }
.floor { border-bottom: 1px solid #eee; }
.floor-head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: 0;
	padding: 16px 4px;
	cursor: pointer;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink);
}
.floor-head:hover, .floor.open .floor-head { color: var(--accent); }
.floor-sign { font-size: 22px; line-height: 1; }
.floor-body { list-style: none; margin: 0; padding: 0 0 10px; }
.floor-body[hidden] { display: none; }
.floor-body .tenant { border-bottom: 0; padding: 9px 4px; }
.panel-empty { color: #9a9a9a; font-size: 15px; padding: 18px 4px; }
.panel-empty[hidden] { display: none; }

/* facilities (WC, stairs, entrances, info desk) found via search: no floor
   number to show, and selecting one highlights a spot rather than routing */
.tenants.amenities { border-top: 1px solid #eee; margin-top: 4px; padding-top: 4px; }

.poi-marker { fill: var(--accent); pointer-events: none; }
.poi-marker-dot { fill-opacity: .95; stroke: #fff; stroke-width: 3; }
.poi-marker-ring { fill-opacity: .35; animation: poi-pulse 1.4s ease-out infinite; }
@keyframes poi-pulse {
	0% { r: 15; fill-opacity: .35; }
	100% { r: 30; fill-opacity: 0; }
}

/* ---------- tenant popup ---------- */
/* speech-bubble card that sits over the tenant's spot on the plan, asking
   "route or more info" before committing to either - position (left/top)
   is set inline by JS from the room's own on-screen bounding box */
.tenant-popup {
	position: fixed;
	width: 268px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 3px;
	box-shadow: 0 18px 46px rgba(0,0,0,.16);
	padding: 18px 18px 16px;
	z-index: 30;
	text-align: center;
}
.tenant-popup[hidden] { display: none; }
.tenant-popup-close {
	position: absolute; top: 6px; right: 8px;
	background: none; border: 0; cursor: pointer;
	font-size: 20px; line-height: 1; color: #b7b7b7; padding: 4px;
}
.tenant-popup-close:hover { color: var(--ink); }
/* logo on top, name underneath it - a logo is not a substitute for the name,
   several of them do not spell the salon out at all */
.tenant-popup-logo { display: block; max-height: 76px; max-width: 100%; margin: 4px auto 12px; object-fit: contain; }
.tenant-popup-logo[hidden] { display: none; }
.tenant-popup-name {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .02em;
	margin-bottom: 14px;
	word-break: break-word;
}
.tenant-popup-route {
	display: block;
	width: 100%;
	font-family: inherit;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: 2px;
	padding: 12px 10px;
	cursor: pointer;
	margin-bottom: 10px;
}
.tenant-popup-route:hover { background: #dd7419; }
.tenant-popup-more {
	display: block;
	width: 100%;
	background: none;
	border: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9a9a9a;
	cursor: pointer;
	padding: 4px;
}
.tenant-popup-more:hover { color: var(--accent); }
/* the pointer triangle - JS toggles .flip when the card sits below its
   target instead of above (near the top of the screen) */
.tenant-popup-arrow {
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	background: #fff;
	border-right: 1px solid #e2e2e2;
	border-bottom: 1px solid #e2e2e2;
	transform: rotate(45deg);
}
.tenant-popup.flip .tenant-popup-arrow {
	top: -9px;
	bottom: auto;
	border-right: 0;
	border-bottom: 0;
	border-left: 1px solid #e2e2e2;
	border-top: 1px solid #e2e2e2;
}

/* ---------- tenant detail (opens in the shared content window) ---------- */
.tenant-detail-logo { display: block; max-height: 120px; max-width: 420px; margin: 0 0 26px; object-fit: contain; object-position: left center; }

/* write-up on the left, photo on the right - as in the client's reference */
.tenant-detail-cols { display: flex; gap: 34px; align-items: flex-start; }
.tenant-detail-cols.no-photo { display: block; }
.tenant-detail-text { flex: 1 1 0; min-width: 0; }
.tenant-detail-media { flex: 0 0 46%; }
.tenant-detail-name { font-size: 30px; font-weight: 500; margin: 0 0 16px; line-height: 1.15; }
.tenant-detail-photo { display: block; width: 100%; height: auto; border-radius: 2px; }
/* the write-up is edited in the admin with a rich-text editor, so it arrives
   as markup - no pre-line here, the paragraphs carry themselves */
.tenant-detail-about { color: #333; }
.tenant-detail-about p { margin: 0 0 12px; }
.tenant-detail-about ul, .tenant-detail-about ol { margin: 0 0 12px; padding-left: 22px; }
.tenant-detail-about li { margin-bottom: 6px; }
.tenant-detail-about a { color: var(--accent); }
.tenant-detail-about img { max-width: 100%; height: auto; }
.tenant-detail-placeholder { color: #9a9a9a; font-style: italic; }

/* the visitor came here to be shown the way, so offer it again at the end */
.tenant-detail-foot { margin-top: 32px; padding-top: 22px; border-top: 1px solid #eee; }
.tenant-detail-route {
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: 2px;
	padding: 16px 38px;
	cursor: pointer;
}
.tenant-detail-route:hover { background: #dd7419; }

@media (max-width: 900px) {
	.tenant-detail-cols { flex-direction: column; }
	.tenant-detail-media { flex: none; width: 100%; }
}

/* ---------- 2026 client corrections ---------- */
/* A larger mark and balanced vertical rhythm match the photographed kiosk:
   generous header, a deliberate gap before the plan, then a compact legend. */
header { gap: 42px; padding: 22px 46px 18px; }
.logo { height: 76px; }
nav { margin-left: 12px; gap: 25px; }
.nav-item { font-size: 15px; }
.nav-item.two-line { max-width: none; white-space: nowrap; }
main { padding-top: 14px; }
footer { padding: 14px 46px 16px; }
.legend { justify-content: center; gap: 13px 30px; }
.legend-item .ico { width: 32px; height: 32px; }

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Categories sit above the alphabetic shop list and collapse naturally in
   the panel without stealing width from tenant names. */
/* The filter is a control, not a directory: the nine categories ride on one
   swipeable line, and only the open category shows its subcategories. */
.category-browser { padding: 4px 0 12px; border-bottom: 1px solid #ececec; margin-bottom: 10px; }
.category-browser[hidden] { display: none; }
/* The client's category names run long ("Santechnika ir vonios įranga,
   vonios aksesuarai"), so on one scrolling line five of the nine sat off
   screen with nothing to say so. They wrap instead: taller, but a kiosk
   visitor cannot swipe for something they never saw. */
.category-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 2px 4px 8px;
	margin: 0 -4px;
}
.category-filter {
	font: inherit;
	text-align: left;
	border: 1px solid #dedede;
	border-radius: 2px;
	background: #fff;
	color: var(--ink);
	cursor: pointer;
}
.category-all, .category-main {
	flex: none;
	padding: 8px 11px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.25;
	text-transform: uppercase;
}
.category-sub {
	display: inline-block;
	margin: 3px 3px 3px 0;
	padding: 7px 9px;
	font-size: 12px;
	line-height: 1.2;
}
.category-filter:hover { border-color: #bdbdbd; }
.category-filter.on { border-color: var(--accent); background: #fff7ef; color: var(--accent); }
.subcategory-list { padding: 2px 4px 4px; }
.subcategory-list[hidden] { display: none; }

/* How many places the current filter leaves, and a way past a long list to
   the facilities that sit below it. */
.result-count {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 2px;
	padding: 0 4px 8px;
	font-size: 13px;
	color: #6b6b6b;
}
.result-count[hidden] { display: none; }
.result-jump {
	font: inherit;
	border: 0;
	background: none;
	padding: 4px 0;
	color: var(--accent);
	cursor: pointer;
	white-space: nowrap;
}
.result-jump:hover { text-decoration: underline; }

/* Landmarks down a 72-row alphabetical list. */
.letter-head {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #fff;
	padding: 10px 4px 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: #6b6b6b;
	border-bottom: 1px solid #eee;
}
.letter-head[hidden] { display: none; }

/* Strong separation requested between tenants and facilities. */
.amenities-divider {
	height: 5px;
	margin: 17px 0 10px;
	border-radius: 3px;
	background: var(--accent);
}

/* Gift voucher, parking and restaurant are designed as kiosk cards rather
   than long plain-text pages. */
/* A kiosk screen is landscape, so the picture sits beside the facts rather
   than above them: everything fits without scrolling, and the text keeps a
   readable measure instead of running the full width of a wide window. */
.info-page {
	color: #292927;
	display: flex;
	align-items: flex-start;
	gap: 46px;
}
.info-visual {
	flex: 0 0 640px;
	display: block;
	width: 640px;
	height: auto;
	background: #f2f2f0;
}
.info-body { flex: 1 1 0; min-width: 0; }
.info-body > :first-child { margin-top: 0; }

@media (max-width: 1200px) {
	.info-page { display: block; }
	.info-visual { width: 100%; margin: 0 0 20px; }
}
.info-lead {
	margin: 0 0 18px;
	font-size: 22px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--ink);
}
.info-page p { margin: 0 0 14px; }

/* A tariff reads as a tariff: label on the left, the figure on the right,
   with a hairline between rows. Boxed metrics turned prices into decoration. */
.info-facts { margin: 0 0 20px; border-top: 1px solid #e6e6e6; }
.info-facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 11px 2px;
	border-bottom: 1px solid #e6e6e6;
}
.info-facts dt { color: #55544f; }
.info-facts dd { margin: 0; font-weight: 700; font-size: 19px; white-space: nowrap; }

.info-page h3 {
	margin: 20px 0 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #55544f;
}
.info-list { margin: 0 0 16px; padding-left: 20px; }
.info-list li { margin-bottom: 9px; }
.info-note {
	margin: 14px 0;
	border: 1px solid #f0cfa8;
	background: #fff7ef;
	padding: 13px 16px;
}
.info-contact { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6e6e6; }

/* the one action these windows offer: find the thing on the plan */
.info-route {
	display: inline-block;
	margin: 10px 0 4px;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent);
	border: 0;
	padding: 12px 22px;
	cursor: pointer;
}
.info-route:hover { background: #dd7419; }
.info-list .info-route { margin: 8px 0 2px; }

@media (max-width: 1250px) {
	header { gap: 24px; padding-left: 28px; padding-right: 28px; }
	.logo { height: 64px; }
	nav { gap: 16px; margin-left: 0; }
	.nav-item { font-size: 13px; }
	main, footer { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 760px) {
}

/* ---------- client layout correction: header / plan / legend ---------- */
/* 1920x1080 kiosk rhythm: a clearly larger brand, breathing room above the
   plan, and the legend immediately after the drawing instead of at the very
   bottom of the viewport. */
header {
	gap: 52px;
	padding: 20px 46px 22px;
}
.logo { height: 94px; }
nav {
	margin-left: 10px;
	gap: 30px;
}
.nav-item { font-size: 15px; }
.nav-item.two-line {
	max-width: none;
	white-space: nowrap;
}
main {
	flex: 0 0 auto;
	padding: 16px 28px 0;
	overflow: visible;
}
footer {
	/* the legend sat 12px under the plan and read as stuck to it */
	padding: 42px 28px 26px;
}
.legend {
	justify-content: center;
	gap: 13px 30px;
}

@media (max-width: 1500px) {
	header { gap: 30px; padding: 18px 28px 18px; }
	.logo { height: 82px; }
	nav { gap: 19px; margin-left: 4px; }
	.nav-item { font-size: 13px; }
	main { padding: 12px 28px 0; }
}

/* ---------- stronger client-requested 1920px header proportions ---------- */
@media (min-width: 1501px) {
	header {
		gap: 0;
		padding: 24px 46px 26px;
	}
	.logo { height: 110px; }
	nav {
		margin-left: 0;
		gap: 26px;
	}
	/* The language switch lives inside <nav> and pushes itself right with an
	   auto margin, which swallows all the free space - justify-content has
	   nothing left to centre. A matching auto margin before the first item
	   splits that space in two instead, so the row sits with equal air
	   between the logo and the switch. */
	nav > .nav-item:first-of-type { margin-left: auto; }
	/* Three of the nine labels wrapped to two lines and the rest did not, so
	   the row read as blocks of random width. Unwrapped they come to 1220px
	   in 1864px, which buys an even gap instead. */
	.legend {
		flex-wrap: nowrap;
		justify-content: center;
		gap: 56px;
	}
	.legend-item .label { max-width: none; white-space: nowrap; }
	.nav-item {
		font-size: 18px;
		letter-spacing: .035em;
	}
	.nav-item svg { width: 25px; height: 25px; }
	main {
		padding-top: 28px;
	}
}