/**
 * Genplan Interactive — floors block styles.
 */

/* Facade */
.gpi-floors {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.gpi-floors-facade {
	position: relative;
	width: 100%;
}

.gpi-floors-facade .gpi-floors-bg {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	object-fit: contain;
}

.gpi-floors-facade .gpi-floors-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: all;
}

/* Floor cells.
   Hidden by default so the facade stays clean, revealed on hover. The CSS
   value wins over a fill-opacity presentation attribute in the markup. */
.gpi-floors-svg path[data-floor] {
	fill-opacity: 0;
	transition: fill-opacity 0.2s ease;
}

.gpi-floors-svg path.gpi-floor-interactive {
	cursor: pointer;
}

.gpi-floors-svg path.gpi-floor-interactive:hover,
.gpi-floors-svg path.gpi-floor-interactive:focus-visible {
	fill-opacity: 0.45;
	outline: none;
	stroke: white;
	stroke-width: 2;
}

/* Floors with nothing to sell, and floors absent from the data.
   The fill is forced here rather than inherited from the markup, so such
   floors read as muted grey whatever colour the SVG uses. */
.gpi-floors-svg path.gpi-floor-empty,
.gpi-floors-svg path.gpi-floor-missing {
	fill:var(--black);
	fill-opacity: 0.15;
	cursor: not-allowed;
}

.gpi-floors-svg path.gpi-floor-empty:not(.gpi-floor-interactive),
.gpi-floors-svg path.gpi-floor-missing {
	pointer-events: none;
}

/* Tooltip */
.gpi-floors-tooltip {
	position: fixed;
	z-index: 10000;
	max-width: 320px;
	padding: 8px 12px;
	border-radius: var(--radius-s, 6px);
	background: var(--neutral-trans-70, rgba(20, 20, 22, 0.82));
	color: #fff;
	font-size: var(--text-s, 14px);
	line-height: 1.35;
	pointer-events: none;
	backdrop-filter: blur(16px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* No hover on touch devices — the tooltip would stick after a tap */
@media (hover: none) {
	.gpi-floors-tooltip {
		display: none !important;
	}
}

/* Mobile and tablet: the facade scrolls horizontally like the genplan does */
@media (max-width: 1025px) {
	.gpi-floors {
		max-width: none;
		overflow: auto hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	.gpi-floors::-webkit-scrollbar {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Модалка
   ------------------------------------------------------------------ */

.gpi-modal {
	position: fixed;
	inset: 0;
	z-index: 10001;
}

.gpi-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
}

.gpi-modal__window {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(1100px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);
	overflow: auto;
	padding: var(--space-m, 24px);
	border-radius: var(--radius, 12px);
	background: var(--white, #fff);
	color: var(--black, #16161a);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	width: fit-content;
}

.gpi-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	border: none;
	background: none;
	color: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.gpi-modal__title {
	margin: 0 40px 16px 0;
	font-size: var(--h4, 20px);
	font-weight: 700;
	outline: none;
}

.gpi-modal__body {
	display: grid;
  grid-template-columns: auto 1fr;
}

.gpi-modal__body .gpi-plan {
	grid-row: 1;
}

.gpi-modal__body .gpi-unit__contacts {
	grid-row: 1;
	margin-top: 0;
	border-top: 0px;
	padding-top: 0;
	text-wrap: nowrap;
}

.gpi-modal__body .gpi-legend {
	grid-row: 2;
  grid-column: 1 / -1;
}

/* Floor plan */
.gpi-plan {
	position: relative;
	height: 70vh;
	aspect-ratio: 1;
	width: auto;
}

.gpi-plan__image {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
}

.gpi-plan__svg-holder {
	position: absolute;
	inset: 0;
}

.gpi-plan__svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

.gpi-plan__notice {
	margin: 0;
	padding: var(--space-m, 24px);
	color: var(--neutral-semi-dark, #6b6b73);
	text-align: center;
}

/* Apartment positions */
.gpi-plan__svg path[data-kv] {
	fill-opacity: 0.35;
	transition: fill-opacity 0.2s ease;
}

.gpi-plan__svg path.gpi-kv-free {
	fill: #1a7f37;
}

.gpi-plan__svg path.gpi-kv-reserved {
	fill: #bf6a02;
}

.gpi-plan__svg path.gpi-kv-sold {
	fill: #8a8a92;
	fill-opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.gpi-plan__svg path.gpi-kv-interactive {
	cursor: pointer;
}

.gpi-plan__svg path.gpi-kv-interactive:hover,
.gpi-plan__svg path.gpi-kv-interactive:focus-visible {
	fill-opacity: 0.65;
	outline: none;
}

/* Legend */
.gpi-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s, 16px);
	margin: var(--space-s, 16px) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-s, 14px);
}

.gpi-legend__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gpi-legend__item::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: currentColor;
	opacity: 0.65;
}

.gpi-legend__item--free {
	color: #1a7f37;
	mix-blend-mode: darken;
}
.gpi-legend__item--reserved {
	color: #bf6a02;
	mix-blend-mode: darken;
}
.gpi-legend__item--sold {
	color: #8a8a92;
	mix-blend-mode: darken;
}

/* Mobile: full width, plan scrolls horizontally like the genplan does */
@media (max-width: 1025px) {
	.gpi-modal__window {
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-height: 92vh;
		border-radius: var(--radius-s, 8px) var(--radius-s, 8px) 0 0;
	}

	.gpi-plan {
		overflow: auto hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	.gpi-plan::-webkit-scrollbar {
		display: none;
	}

	.gpi-plan__image {
		width: auto;
		max-width: none;
		height: min(60vh, 520px);
		object-fit: contain;
	}
}

@supports (height: 92svh) {
	@media (max-width: 1025px) {
		.gpi-modal__window {
			max-height: 92svh;
		}
	}
}

/* ------------------------------------------------------------------
   Карточка квартиры — второй слой поверх плана этажа
   ------------------------------------------------------------------ */

.gpi-modal--unit {
	z-index: 10002;
}

.gpi-modal--unit .gpi-modal__window {
	width: min(820px, calc(100vw - 40px));
}

.gpi-unit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-m, 24px);
	align-items: start;
}

.gpi-unit__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-s, 16px);
	border-radius: var(--radius-s, 8px);
	background: var(--white);
}

.gpi-unit__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;
	object-fit: contain;
}

.gpi-unit__facts {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 16px);
}

.gpi-unit__badge {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: #bf6a02;
	color: #fff;
	font-size: var(--text-xs, 12px);
	font-weight: 600;
}

.gpi-unit__specs {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gpi-unit__spec {
	display: flex;
	justify-content: space-between;
	gap: var(--space-xs, 12px);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--neutral-ultra-light);
}

.gpi-unit__spec dt {
	color: var(--neutral-semi-dark, #6b6b73);
	font-size: var(--text-s, 14px);
}

.gpi-unit__spec dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.gpi-unit__rooms h4,
.gpi-unit__decoration h4 {
	margin: 0 0 8px;
	font-size: var(--text-s, 14px);
	font-weight: 600;
}

.gpi-unit__rooms ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--text-s, 14px);
	color: var(--neutral-semi-dark, #6b6b73);
}

.gpi-unit__decoration p {
	margin: 0;
	font-size: var(--text-s, 14px);
	color: var(--neutral-semi-dark, #6b6b73);
	line-height: 1.5;
}

.gpi-unit__contacts {
	display: flex;
	flex-direction: column;
	gap: .5em;
	padding-top: var(--space-s);
	border-top: 1px solid var(--neutral-ultra-light);
	margin-top: auto;
	align-items: flex-start;
}

/*
.gpi-unit__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75em 1.5em;
	border: 1px solid var(--black, #16161a);
	border-radius: var(--btn-radius, 8px);
	color: var(--black, #16161a);
	font-size: var(--text-m, 16px);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s;
}

.gpi-unit__phone:hover {
	opacity: 0.7;
}
*/

.gpi-unit__office {
	font-size: var(--h4);
	font-weight: 600;
}

.gpi-unit__button {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0.75em 1.5em;
	border-radius: var(--btn-radius, 8px);
	background: var(--black, #16161a);
	color: var(--white, #fff);
	font-size: var(--text-m, 16px);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s;
}

.gpi-unit__button:hover {
	opacity: 0.85;
}

/* Mobile: one column, plan on top */
@media (max-width: 720px) {
	.gpi-unit {
		grid-template-columns: minmax(0, 1fr);
	}

	.gpi-unit__image {
		max-height: 42vh;
	}
}