/* mainselector */

.content.selector-content {
	width: 100%;
	height: 100%;
	aspect-ratio: 2500/1200; /* celkovej pomer celyho prvku */
	max-height: 1229px; /* pri 2560 */
	position: relative;
	overflow: hidden;
}

#main-selector {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

#main-selector:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: calc(var(--header-height) * 1.2);
	background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	z-index: 6;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.selector-over #main-selector:before,
#main-selector.flats-active:before
{
	opacity: 0;
}

.main-selector-canvas {
	width: var(--selector-lc-wid);
	position: relative;
	height: 100%;
}

.main-selector-desc {
	width: var(--selector-rc-wid);
	position: relative;
	background-color: #000000;
	height: 100%;
}

#main-selector-svg, .main-selector-bcg, #main-selector-video {
	display: block;
	width: 100%;
	aspect-ratio: 2080 / 1200; /* realne nejvic 2130x1229 */
}

#main-selector-svg {
	position: relative;
	height: 100%;
	z-index: 3;
}

.main-selector-bcg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	opacity: 0;
	z-index: 1;
}

.main-selector-bcg.active {
	opacity: 1;
}

#main-selector .floor-desc {
	position: absolute;
	left: 0;
	top: calc(50% - var(--height-selector-title) - 10px);
	width: 100%;
	box-sizing: border-box;
}

#selector-prompt {
	transition: opacity 0.15s ease;
	opacity: 1;
}

.flats-active #selector-prompt {
	opacity: 0;
	pointer-events: none;
}

@media screen and (max-width: 1560px) {
	:root {
		--height-selector-title: 35px;
	}

	.floor-name {
		font-size: 25px;
	}

	.floor-desc {
		font-size: 0.85em;
	}

	.floor-desc-nav {
		top: calc(50% - 44px);
	}
}

@media screen and (max-width: 1450px) {
	.floor-desc {
		--floor-desc-pad: 0 1em;
	}

	.flats-legend {
		padding-left: 1em;
	}
}

@media screen and (max-width: 1360px) {
	#main-selector .floor-desc {
		white-space: normal;
		top: 120px;
		padding-bottom: 1em;
	}

	.floors-nav {
		justify-content: flex-start;
		padding-top: calc(100px + var(--height-selector-title) - 7px);
	}

	#main-selector .free-props {
		display: block;
	}

	#main-selector #selector-prompt {
		font-size: 1em;
	}
}

/* ---- */

.main-selector-view {
	pointer-events: none;
	opacity: 0;
}

.main-selector-view.active {
	pointer-events: auto;
	opacity: 1;
}

.main-floor-area {
	cursor: pointer;
	fill: var(--color-main);
	opacity: 0;
	transition: opacity 0.3s ease, fill 0.3s ease;
}

.video-playing .main-floor-area {
	pointer-events: none;
}

.main-floor-group-visible .main-floor-area {
	fill: #FFFFFF;
	opacity: 0.3;
}

.main-floor-group.active .main-floor-area {
	opacity: 0.5;
}

.main-floor-group.hover .main-floor-area {
	fill: var(--color-main);
	opacity: 0.8;
}

.main-floor-group.main-floor-group-inactive .main-floor-area,
.main-floor-group.main-floor-group-inactive.hover .main-floor-area,
.main-floor-group.main-floor-group-inactive.active .main-floor-area
{
	fill: var(--color-sold);
}

/* ---- */

#main-selector-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.9s ease;
	object-fit: fill;
}

#main-selector-video.active {
	opacity: 1;
}

/* selector arrows */

.main-selector-arrow {
	--left-arrow: 35px;

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background-color: transparent;
	z-index: 6;
	opacity: 1;
}

.main-selector-arrow-prev {
	left: var(--left-arrow);
}

.main-selector-arrow-next {
	right: var(--left-arrow);
}

@media screen and (max-width: 1600px) {
	.main-selector-arrow {
		--left-arrow: 30px;
	}
}

@media screen and (max-width: 1440px) {
	.main-selector-arrow {
		--left-arrow: 15px;
	}
}

@media screen and (max-width: 1200px) {
	.main-selector-arrow {
		--left-arrow: 5px;
	}
}

@media screen and (max-width: 720px) {
	.content.content-selector {
		display: none;
	}
}

/* arrows */

.sq-arrow {
	width: 30px;
	aspect-ratio: 30 / 50;
	transition: opacity 0.3s ease;
	padding: 0;
	overflow: hidden;
	border: 0;
	background-color: transparent;
}

.sq-arrow:hover {
	opacity: 0.5;
}

.sq-arrow-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.sq-arrow-inner:before {
	display: block;
	position: absolute;
	content: "";
	height: 100%;
	aspect-ratio: 1 / 1;
	border: 3px solid #ffffff;
	box-sizing: border-box;
	top: 50%;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.sq-arrow-prev .sq-arrow-inner:before {
	left: 0;
	transform: rotate(-45deg);
	transform-origin: top left;
}

.sq-arrow-next .sq-arrow-inner:before {
	right: 0;
	transform: rotate(45deg);
	transform-origin: top right;
}

/* flats */

.main-selector-canvas-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.flats-active .main-selector-canvas-layer {
	pointer-events: auto;
}

#main-selector-flats {
	background-color: rgba(0,0,0,0.85);
	z-index: 6;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	display: flex;
	justify-content: center;
	align-items: center;
}

.flats-active #main-selector-flats {
	opacity: 1;
	pointer-events: auto;
}

.selector-close {
	z-index: 6;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.flats-active .selector-close {
	opacity: 1;
	pointer-events: auto;
}

.main-selector-flats-container {
	position: relative;
	aspect-ratio: 760 / 1000;
	height: 90%;
	width: auto;
}

.main-selector-flats-bcg, .main-selector-flats-svg {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.main-selector-flats-bcg {
	z-index: 2;
	pointer-events: none;
	opacity: 0;
}

.main-selector-flats-bcg.active {
	opacity: 1;
}

.main-selector-flats-svg {
	z-index: 1;
}

.main-selector-flats-svg-floor {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.flats-active .main-selector-flats-svg-floor.active {
	opacity: 1;
	pointer-events: auto;
}

/* nav */

.flats-active .floor-help-floors {
	display: none;
}

.floor-help-flats {
	display: none;
}

.flats-active .floor-help-flats {
	display: inline;
}

.floors-nav {
	z-index: 6;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.flats-active .floors-nav {
	opacity: 1;
	pointer-events: auto;
}

.floor-link {
	pointer-events: inherit;
}

#higher-floor {
	padding-bottom: 8px;
}

/* legend */

.flats-legend {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.flats-active .flats-legend {
	opacity: 1;
	pointer-events: auto;
}

/* hovers */

.flat-area:hover .flat-area-element {
	fill: var(--color-hover);
}

#flat-desc {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.flats-active #flat-desc.active {
	opacity: 1;
	pointer-events: auto;
}

/* statuses */

@media screen and (max-width: 1080px) {
	.flats-legend {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 6;
	}
}

/* selector changer */

.selector-changer {
	display: none;
}

@media screen and (max-width: 980px) {
	.selector-changer {
		display: block;
	}

	#main-selector, .selector-content {
		display: none;
	}
}

/* logo */

.header-logo {
	transition: opacity 0.3s ease;
}

.selector-over .header-logo {
	opacity: 0 !important;
	pointer-events: none;
}

@media screen and (max-width: 1640px) {
	.header-logo {
		height: 33%;
		align-self: flex-start;
		margin-top: 2em;
	}
}