/* Interaktivní vizualizace (components/Widgets/Visualization) */

.viz {
	--vizArea: transparent;
	--vizAreaMuted: rgba(255, 255, 255, .35);
	--vizAreaHover: rgba(173, 212, 228, 0.66);
	/* jednotky na půdorysu podle stavu: plné barvy (bez průhlednosti), při najetí tmavší */
	--vizFree: rgb(218, 232, 173);
	--vizFreeHover: rgb(189, 210, 125);
	--vizReserved: rgb(248, 243, 234);
	--vizReservedHover: rgb(232, 218, 192);
	--vizSold: #fff;
	--vizSoldHover: #ededed;
	--vizOff: #dddddd;
	--vizOffHover: #bdbdbd;
	margin-bottom: var(--hSpace, 30px);
}

/* Lišta nad obrázkem: zpět + cesta vlevo, nápověda / legenda vpravo */
.viz__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 30px;
	min-height: 64px;
	padding: 12px 20px;
	background: var(--secColor, #f9f0e6);
	border-bottom: 1px solid rgba(87, 60, 28, .15);
	font-size: 16px;
	line-height: 1.4;
}

/* Na výchozí úrovni není kam se vracet, nápověda je vlevo */
.viz__bar--root {
	justify-content: flex-start;
}

.viz__bar--root .viz__path {
	display: none;
}

.viz__path,
.viz__help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

.viz__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px 7px 10px;
	background: #fff;
	border: 1px solid var(--primColor, #AA1E32);
	border-radius: 0;
	color: var(--primColor, #AA1E32);
	font: inherit;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.viz__back:hover,
.viz__back:focus-visible {
	background: var(--primColor, #AA1E32);
	color: #fff;
}

.viz__back:focus-visible,
.viz__crumb:focus-visible {
	outline: 2px solid var(--altColor, #573c1c);
	outline-offset: 2px;
}

.viz__back[hidden],
.viz__crumbs[hidden],
.viz__legend[hidden] {
	display: none;
}

.viz__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.viz__crumb {
	color: var(--altColor, #573c1c);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.viz__crumb:hover {
	color: var(--primColor, #AA1E32);
}

.viz__crumb--current {
	color: inherit;
	text-decoration: none;
	font-weight: var(--fwB, 700);
}

.viz__crumb-sep {
	opacity: .4;
}

.viz__hint {
	margin: 0;
	color: var(--altColor, #573c1c);
}

.viz__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.viz__legend .viz__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
}

/* přebíjí odrážky seznamů webu (li::before) */
.viz__legend .viz__legend-item::before {
	content: '';
	position: static;
	flex: none;
	width: 14px;
	height: 14px;
	border: 1px solid var(--vizLegendBorder);
	border-radius: 0;
	background: var(--vizLegend);
}

.viz__legend-item--free { --vizLegend: var(--vizFree); --vizLegendBorder: var(--vizFreeHover); }
.viz__legend-item--reserved { --vizLegend: var(--vizReserved); --vizLegendBorder: #c9b58e; }
.viz__legend-item--sold { --vizLegend: var(--vizSold); --vizLegendBorder: #bdbdbd; }
.viz__legend-item--off { --vizLegend: var(--vizOff); --vizLegendBorder: var(--vizOffHover); }

.viz__stage {
	position: relative;
	overflow: hidden;
	background: var(--secColor, #f9f0e6);
}

/* Podklad se celý vejde na výšku okna pod hlavičku webu a lištu (--vizTop, --vizRatio nastavuje JS) */
.viz__canvas {
	position: relative;
	width: min(100%, calc((100vh - var(--vizTop, 130px) - 100px) * var(--vizRatio, 1.6)));
	margin: 0 auto;
}

.viz__image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity .2s;
}

.viz--loading .viz__image,
.viz--loading .viz__mask {
	opacity: .4;
}

.viz__mask {
	position: absolute;
	inset: 0;
}

.viz--empty .viz__image,
.viz--no-image .viz__image {
	display: none;
}

/* Půdorys bez podkladového obrázku: SVG určuje výšku */
.viz--no-image .viz__mask {
	position: static;
}

.viz--no-image .viz__canvas {
	padding: 30px;
	background: #fff;
	box-sizing: content-box;
	width: min(100% - 60px, calc((100vh - var(--vizTop, 130px) - 160px) * var(--vizRatio, 1)));
}

.viz__mask svg {
	display: block;
	width: 100%;
	height: 100%;
}

.viz__area {
	cursor: pointer;
}

.viz__mask .viz__area * {
	transition: fill .15s, opacity .15s;
}

/* Masky budov a pater jsou jen obrysy/neviditelné plochy, zvýrazní se při najetí */
.viz__mask .viz__area--mask,
.viz__mask .viz__area--mask * {
	fill: var(--vizArea) !important;
}

.viz__mask .viz__area--mask:hover,
.viz__mask .viz__area--mask:hover * {
	fill: var(--vizAreaHover) !important;
}

/* Popisek budovy (#NO11bub) zůstává, jak ho nakreslil grafik */
.viz__mask .viz__area--label:hover {
	opacity: .8;
}

/* Jednotky na půdorysu, obrys ve stejné barvě zakryje švy mezi dílčími plochami bytu */
.viz__mask .viz__area--unit.viz__area--free,
.viz__mask .viz__area--unit.viz__area--free * {
	fill: var(--vizFree) !important;
	stroke: var(--vizFree) !important;
}

.viz__mask .viz__area--unit.viz__area--free:hover,
.viz__mask .viz__area--unit.viz__area--free:hover * {
	fill: var(--vizFreeHover) !important;
	stroke: var(--vizFreeHover) !important;
}

.viz__mask .viz__area--unit.viz__area--reserved,
.viz__mask .viz__area--unit.viz__area--reserved * {
	fill: var(--vizReserved) !important;
	stroke: var(--vizReserved) !important;
}

.viz__mask .viz__area--unit.viz__area--reserved:hover,
.viz__mask .viz__area--unit.viz__area--reserved:hover * {
	fill: var(--vizReservedHover) !important;
	stroke: var(--vizReservedHover) !important;
}

.viz__mask .viz__area--unit.viz__area--sold,
.viz__mask .viz__area--unit.viz__area--sold * {
	fill: var(--vizSold) !important;
	stroke: var(--vizSold) !important;
}

.viz__mask .viz__area--unit.viz__area--sold:hover,
.viz__mask .viz__area--unit.viz__area--sold:hover * {
	fill: var(--vizSoldHover) !important;
	stroke: var(--vizSoldHover) !important;
}

.viz__mask .viz__area--unit.viz__area--off,
.viz__mask .viz__area--unit.viz__area--off * {
	fill: var(--vizOff) !important;
	stroke: var(--vizOff) !important;
}

.viz__mask .viz__area--unit.viz__area--off:hover,
.viz__mask .viz__area--unit.viz__area--off:hover * {
	fill: var(--vizOffHover) !important;
	stroke: var(--vizOffHover) !important;
}

/* Na detail vede jen volná jednotka */
.viz__mask .viz__area--unit:not(.viz__area--free) {
	cursor: default;
}

.viz__mask .viz__area--disabled,
.viz__mask .viz__area--disabled * {
	cursor: default;
}

.viz__mask .viz__area--disabled:hover,
.viz__mask .viz__area--disabled:hover * {
	fill: var(--vizAreaMuted) !important;
}

.viz__empty:empty {
	display: none;
}

.viz__empty {
	padding: 80px 20px;
	text-align: center;
	font-size: 18px;
}

.viz__tooltip {
	position: absolute;
	z-index: 10;
	max-width: 260px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--bdr2Color, #D9D9D9);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
	font-size: 14px;
	line-height: 1.5;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .1s;
}

.viz__tooltip.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Popisek budovy / patra (název, volné jednotky, volné dispozice) */
.viz__tip {
	min-width: 150px;
	padding: 6px 8px;
	text-align: center;
	line-height: 1.35;
}

.viz__tip-label {
	margin-top: 12px;
	font-size: 14px;
}

.viz__tip-label:first-child {
	margin-top: 0;
}

.viz__tip-title {
	font-size: 22px;
	font-weight: var(--fwB, 700);
}

.viz__tip-value {
	font-size: 15px;
}

.viz__tip-value--accent {
	color: #3e7a6e;
}

.viz__tip-note {
	margin-top: 12px;
	font-size: 13px;
	text-align: center;
	opacity: .7;
}

.viz__status {
	font-weight: var(--fwB, 700);
}

.viz__status--free {
	color: #5f7a1e;
}

.viz__status--reserved {
	color: #9a7b45;
}

.viz__status--sold {
	color: #c62828;
}

.viz__status--off {
	color: #757575;
}

@media (hover: none) {
	.viz__tooltip {
		display: none;
	}
}

/* Mobil: dlouhou budovu posouvat do strany + "výtah" se seznamem pater (třídy viz--* nastavuje JS) */
.viz__pan,
.viz__swipe,
.viz__floors {
	display: none;
}

@media (max-width: 760px) {
	.viz--building .viz__scroller {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.viz--building .viz__scroller::-webkit-scrollbar {
		display: none;
	}

	/* výška podle displeje, šířka podle poměru stran; úzká budova dál vyplní šířku */
	.viz--building .viz__canvas {
		width: max(100%, calc(min(60vh, 420px) * var(--vizRatio, 1.6)));
		margin: 0;
	}

	.viz--building.viz--pannable .viz__pan {
		display: flex;
		align-items: center;
		position: absolute;
		z-index: 5;
		top: 0;
		bottom: 0;
		width: 56px;
		padding: 0 8px;
		border: 0;
		color: var(--primColor, #AA1E32);
		cursor: pointer;
		transition: opacity .2s;
	}

	.viz__pan svg {
		box-sizing: content-box;
		padding: 8px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	}

	.viz__pan--prev {
		left: 0;
		justify-content: flex-start;
		background: linear-gradient(to left, transparent, rgba(255, 255, 255, .7));
	}

	.viz__pan--next {
		right: 0;
		justify-content: flex-end;
		background: linear-gradient(to right, transparent, rgba(255, 255, 255, .7));
	}

	.viz--pan-start .viz__pan--prev,
	.viz--pan-end .viz__pan--next {
		opacity: 0;
		pointer-events: none;
	}

	/* nápověda zmizí po prvním posunutí */
	.viz--building.viz--pannable .viz__swipe {
		display: block;
		position: absolute;
		z-index: 5;
		left: 50%;
		bottom: 12px;
		transform: translateX(-50%);
		padding: 6px 14px;
		border-radius: 20px;
		background: rgba(0, 0, 0, .6);
		color: #fff;
		font-size: 13px;
		white-space: nowrap;
		pointer-events: none;
		transition: opacity .3s;
	}

	.viz--panned .viz__swipe {
		opacity: 0;
	}

	.viz__floors {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid rgba(87, 60, 28, .15);
	}

	.viz__floors[hidden] {
		display: none;
	}

	/* přebíjí odrážky seznamů webu (li::before) */
	.viz__floors .viz__floor-item {
		margin: 0;
		padding: 0;
	}

	.viz__floors .viz__floor-item::before {
		content: none;
	}

	.viz__floor {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		min-height: 52px;
		padding: 8px 16px;
		background: #fff;
		border: 0;
		border-bottom: 1px solid rgba(87, 60, 28, .15);
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	.viz__floor:disabled {
		cursor: default;
		opacity: .55;
	}

	.viz__floor-name {
		flex: none;
		width: 4.5em;
		font-weight: var(--fwB, 700);
	}

	.viz__floor-info {
		flex: auto;
		min-width: 0;
		font-size: 14px;
		line-height: 1.35;
	}

	.viz__floor-free {
		display: block;
		color: #5f7a1e;
		font-weight: var(--fwB, 700);
	}

	.viz__floor-disp {
		display: block;
		opacity: .7;
	}

	.viz__floor-note {
		color: #757575;
	}

	.viz__floor-arrow {
		flex: none;
		color: var(--primColor, #AA1E32);
	}
}