#flat-selector {
	--color-free: #ede2d8;
	--color-hover: #b59981;
	--color-sold: #dddddd;
	--color-na: #dddddd;

	position: relative;
}

#flat-selector, #flat-selector-svg, #flat-selector-floors {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
}

#flat-selector-svg {
	height: 100%;
}

#flat-selector-floors {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
}

.flat-selector-floor {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.flat-selector-floor.active {
	opacity: 1;
}

.flat-area {
	fill: var(--color-free);
	transition: fill 0.3s ease;
	cursor: pointer;
}

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

.flat-area.status-sold {
	fill: var(--color-sold);
}

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

.flat-area.status-na {
	fill: var(--color-na);
}

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

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

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

#flat-desc {
	position: absolute;
	top: 0;
	left: 0;
	width: 210px;
	font-size: var(--font-size-xs);
	padding: 10px 20px;
	box-sizing: border-box;
	background-color: var(--color-light-brown);
	z-index: 2;
	flex-direction: column;
	line-height: 1.4em;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

#flat-desc.active {
	opacity: 1;
}