@font-face {
	font-family: DIN;
	src: url(fonts/DIN-Light.woff2) format('woff2'), url(fonts/DIN-Light.woff) format('woff'), url(fonts/DIN-Light.ttf) format('truetype');
	font-weight: 300; font-style: normal;
}
@font-face {
	font-family: DIN;
	src: url(fonts/DIN-Medium.woff2) format('woff2'), url(fonts/DIN-Medium.woff) format('woff'), url(fonts/DIN-Medium.ttf) format('truetype');
	font-weight: 500; font-style: normal;
}

.genplan {
	font-family: 'DIN', sans-serif; font-size: 16px; line-height: 1; font-weight: 500;
	color: #000;
}

.genplan__map-area {
	position: relative;
	width: 100%; height: auto; max-height: 80vh;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}
.genplan__map-area::before {
	content: '';
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	backdrop-filter: blur(8px) brightness(50%);
}
.genplan__map {
	width: 100%; height: 100%;
}

/* зоны */

.genplan__zone {
	visibility: hidden;
}
.genplan__zone polygon.first-color {
	stroke: #fff; stroke-width: 8px;
	fill: #fff; fill-opacity: 0.5;
}
.genplan__zone polygon.second-color {
	stroke: #003852; stroke-width: 8px; stroke-dasharray: 16,8;
	fill: #003852; fill-opacity: 0;
}
.genplan__zone text {
	font-family: DIN, sans-serif; font-size: 60px; line-height: 1; fill: #003852;
	dominant-baseline: middle; text-anchor: middle; text-decoration: underline;
	pointer-events: none;
}

/* лоты */

.genplan__plot > polygon {
	fill: white;  fill-opacity: 0;
	stroke-linejoin: round;
	cursor: pointer;
}
.genplan__plot > polygon:hover {
	fill: white;  fill-opacity: 0.25;
	stroke: white; stroke-width: 2px; 
}
.genplan__plot > rect {
	fill: black; fill-opacity: 0.5;
	pointer-events: none;
}
.genplan__plot.rotate > rect {
	transform-box: fill-box; transform-origin: center; transform: rotate(-90deg);
}
.genplan__plot > text {
	font-family: 'DIN', sans-serif; font-size: 16px; line-height: 1; fill: white;
	dominant-baseline: middle; text-anchor: middle;
	pointer-events: none;
}
.genplan__plot.rotate > text {
	transform-box: fill-box; transform-origin: center; transform: rotate(-90deg);
}
/* free */
.genplan__plot.free > polygon:hover {
	fill: green; fill-opacity: 0.5;
}
.genplan__plot.free > rect {
	fill: green; fill-opacity: 1;
}
/* rezerved */
.genplan__plot.rezerved > polygon:hover {
	fill: yellow; fill-opacity: 0.5;
}
.genplan__plot.rezerved > rect {
	fill: yellow; fill-opacity: 1;
}
.genplan__plot.rezerved > text {
	fill: black; fill-opacity: 1;
}
/* sold */
.genplan__plot.sold > polygon:hover {
	fill: red; fill-opacity: 0.5;
}
.genplan__plot.sold > rect {
	fill: red; fill-opacity: 1;
}

/* fancyapps panzoom controls */

.f-custom-controls {
	position: absolute;
	border-radius: 4px;
	overflow: hidden;
	z-index: 1;
}
.f-custom-controls.top-right {
	right: 20px; top: 20px;
}
.f-custom-controls.bottom-right {
	right: 20px; bottom: 20px;
}
.f-custom-controls button {
	width: 40px; height: 40px;
	background: rgba(0,0,0,.5); border: none; margin: 0; padding: 0;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.f-custom-controls svg {
	pointer-events: none;
	width: 80%; height: 80%;
	stroke: #fff; stroke-width: 2;
}
.f-custom-controls button[disabled] svg { opacity: 0.5; }
[data-panzoom-action=toggleFS] g:first-child { display: flex }
[data-panzoom-action=toggleFS] g:last-child { display: none }
.in-fullscreen [data-panzoom-action=toggleFS] g:first-child { display: none }
.in-fullscreen [data-panzoom-action=toggleFS] g:last-child { display: flex }

/* genplan controls */

.genplan__zone-switch {
	position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
	display: flex; align-items: center;
	cursor: pointer;
}
.genplan__zone-switch > input {
  opacity: 0; width: 0; height: 0;
}
.genplan__zone-switch > .icon {
	width: 40px; padding: 8px;
  background-color: rgba(0,0,0,.5); color: #fff;
	border-radius: 4px;
	-webkit-transition: .4s; transition: .4s;
}
.genplan__zone-switch > input:checked + .icon {
  background-color: #fff; color: #000;
}
.genplan__zone-switch > .text {
	margin-left: 8px;
	font-family: DIN, sans-serif; font-size: 16px; line-height: 1;
	color: #fff;
}

/* tooltips */

.tooltip {
	display: none; position: absolute; z-index: 101;
	background: #fff; border-radius: 16px; padding: 8px 12px;
	font-family: 'DIN', sans-serif; font-size: 16px; line-height: 1.5; font-weight: 500;
	text-decoration: none;
	background-color: lightgray; color: #000;
}
.tooltip__header {
	text-align: center;
	padding-bottom: 4px;
	border-bottom: 2px solid rgba(0,0,0,.25);
	margin-bottom: 4px;
}
.tooltip__param {
	display: flex; justify-content: space-between;
}
.tooltip__param > span:last-child {
	margin-left: 12px;
}
.tooltip__footer {
	margin-top: 4px;
	border-top: 2px solid rgba(0,0,0,.25);
	padding-top: 4px;
	text-align: center;
}

/* карточки */

.card {
	position: fixed;
	top: 0; bottom: 0; right: 0; width: 100%; z-index: 110;
	transform: translateX(100%); 
	transition: 0.5s;
	background: #333; padding: 20px; color: #fff;
	overflow: auto;
}
.card.active {
	transform: translateX(0);
}
.card__header {
	display: flex; justify-content: space-between; align-items: center;
}
.card__header > span {
	font-size: 20px;
}
button.card__close {
	border: 0; background: 0; color: #fff;
}
.card__tags {
	margin-top: 20px;
	display: flex; justify-content: space-between; align-items: center;
}
.card__tags > span {
	border: 1px solid #eee; border-radius: 4px;
	padding: 4px 8px;
	overflow: hidden; white-space: nowrap; text-overflow: clip;
}
.card__tags > span.free {
	border: 0; background-color: green; color: #fff;
}
.card__tags > span.rezerved {
	border: 0; background-color: yellow; color: #000;
}
.card__tags > span.sold {
	border: 0; background-color: red; color: #fff;
}
.card__preview {
	margin-top: 20px;
}
.card__preview .f-carousel__slide > img {
	display: block; width: 100%;
	aspect-ratio: 3/2; object-fit: contain;
}
.card__props {
	margin-top: 20px;
	display: grid; grid-template-columns: 1fr; gap: 8px;
}
.card__props > div {
	display: flex; justify-content: space-between; gap: 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}
.card__props .features > span {
	display: block; text-overflow: ellipsis;
}
@media (min-width: 800px) {
	.card {
		width: 25%;
	}
}



/* разметка */

.genplan__edit-area {
	text-align: center;
	background: yellow;
	padding: 16px;
}