#flat-selector {
	--color-free: #f2e5d9;
	--color-hover: var(--color-dark-brown-3);
	--color-sold: var(--color-dark-brown);
	--color-na: #dddddd;

	position: relative;
}

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

#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.status-sold {
	fill: var(--color-sold);
}

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

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

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

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

.floor-arrows {
	display: flex;
	align-items: center;
}

.floor-arrow {
	width: 30px;
	aspect-ratio: 30 / 50;
}

.floor-arrows-num {
	font-family: var(--font-family-everett);
	letter-spacing: var(--letter-spacing-everett-xs-font);
	font-size: var(--font-size-b-2);
	padding: 0 1.4em;
}

@media screen and (max-width: 1180px) {
	.floor-arrows {
		justify-content: center;
	}
}