/*
 * EstateSite Buildings — public viewer.
 * Restyle through the --esbld-* variables, set on .esbld-building with a selector
 * more specific than this file's (e.g. `body .esbld-building`); Settings →
 * Appearance prints its values right after this file (ESBLD_Style). Zone colours
 * from the reference viewer; sold is dashed so the state never relies on colour
 * alone. *-fill-active is the fill under the pointer (or tapped); --esbld-hover-fill
 * and --esbld-hover-stroke, when set, replace every zone's own hover colours.
 * *-ink is the status as text (the table's badges), readable on --esbld-bg.
 */
.esbld-building {
	--esbld-free-fill: rgb(15 122 79 / 0.28);
	--esbld-free-fill-active: rgb(15 122 79 / 0.42);
	--esbld-free-stroke: #0f7a4f;
	--esbld-reserved-fill: rgb(164 90 6 / 0.3);
	--esbld-reserved-fill-active: rgb(164 90 6 / 0.45);
	--esbld-reserved-stroke: #a45a06;
	--esbld-deposit-fill: rgb(164 90 6 / 0.3);
	--esbld-deposit-fill-active: rgb(164 90 6 / 0.45);
	--esbld-deposit-stroke: #a45a06;
	--esbld-sold-fill: rgb(88 99 116 / 0.42);
	--esbld-sold-fill-active: rgb(88 99 116 / 0.53);
	--esbld-sold-stroke: #586374;
	--esbld-nav-fill: rgb(255 255 255 / 0.12);
	--esbld-nav-fill-active: rgb(255 255 255 / 0.3);
	--esbld-nav-stroke: #fff;
	--esbld-free-ink: var(--esbld-free-ink-light, var(--esbld-free-stroke));
	--esbld-reserved-ink: var(--esbld-reserved-ink-light, var(--esbld-reserved-stroke));
	--esbld-deposit-ink: var(--esbld-deposit-ink-light, var(--esbld-deposit-stroke));
	--esbld-sold-ink: var(--esbld-sold-ink-light, var(--esbld-sold-stroke));
	--esbld-focus: #1d4ed8;
	--esbld-fg: #17233b;
	--esbld-muted: #5d6b85;
	--esbld-bg: #fff;
	--esbld-surface: #f5f7fa;
	--esbld-border: #dde3ec;
	--esbld-accent: #1b3a6b;
	--esbld-accent-fg: #fff;
	--esbld-radius: 12px;
	--esbld-font-size: 0.9375rem;

	color: var(--esbld-fg);
	font-size: var(--esbld-font-size);
	line-height: 1.5;
	margin: 1.5em 0;
}

/* Dark: on a dark device, unless Settings → Appearance fixes the scheme to light
   (esbld-building--light); always with esbld-building--dark. :where() keeps the
   specificity of .esbld-building, so the settings' values still win. Keep the two
   blocks the same. */
@media (prefers-color-scheme: dark) {
	.esbld-building:where(:not(.esbld-building--light)) {
		--esbld-fg: #e5eaf3;
		--esbld-muted: #a3b1c9;
		--esbld-bg: #131f38;
		--esbld-surface: #0d1526;
		--esbld-border: #2a3a5a;
		--esbld-accent: #2aa9bd;
		--esbld-accent-fg: #0d1526;
		--esbld-focus: #7cc4ff;
		--esbld-free-ink: var(--esbld-free-ink-dark, #34d399);
		--esbld-reserved-ink: var(--esbld-reserved-ink-dark, #fbbf24);
		--esbld-deposit-ink: var(--esbld-deposit-ink-dark, #fbbf24);
		--esbld-sold-ink: var(--esbld-sold-ink-dark, #a3b1c9);
	}
}

.esbld-building--dark {
	--esbld-fg: #e5eaf3;
	--esbld-muted: #a3b1c9;
	--esbld-bg: #131f38;
	--esbld-surface: #0d1526;
	--esbld-border: #2a3a5a;
	--esbld-accent: #2aa9bd;
	--esbld-accent-fg: #0d1526;
	--esbld-focus: #7cc4ff;
	--esbld-free-ink: var(--esbld-free-ink-dark, #34d399);
	--esbld-reserved-ink: var(--esbld-reserved-ink-dark, #fbbf24);
	--esbld-deposit-ink: var(--esbld-deposit-ink-dark, #fbbf24);
	--esbld-sold-ink: var(--esbld-sold-ink-dark, #a3b1c9);
}

.esbld-building *,
.esbld-building *::before,
.esbld-building *::after {
	box-sizing: border-box;
}

.esbld-viewer {
	display: grid;
	/* minmax(0, …): an implicit grid column sizes to its content's min-content
	   width — the plan image's intrinsic pixels, the no-wrap table — which
	   pushed the viewer past a phone's screen. */
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

/* ---------------------------------------------------------------- tabs */
.esbld-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.esbld-tab {
	appearance: none;
	border: 1px solid var(--esbld-border);
	background: var(--esbld-bg);
	color: var(--esbld-fg);
	border-radius: 8px;
	padding: 0.375rem 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	line-height: 1.4;
}

.esbld-tab:hover {
	border-color: var(--esbld-accent);
}

.esbld-tab.is-selected {
	background: var(--esbld-accent);
	border-color: var(--esbld-accent);
	color: var(--esbld-accent-fg);
}

.esbld-tab:focus-visible,
.esbld-filter:focus-visible,
.esbld-linkbtn:focus-visible,
.esbld-dialog__close:focus-visible {
	outline: 3px solid var(--esbld-focus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- stage */
.esbld-stage {
	position: relative;
	overflow: hidden;
	/* clip, where supported: focus on a zone outside the zoomed view must not
	   scroll this box (the zoom pans to it instead) */
	overflow: clip;
	border: 1px solid var(--esbld-border);
	border-radius: var(--esbld-radius);
	background: var(--esbld-surface);
}

.esbld-canvas {
	position: relative;
	transform-origin: 0 0;
}

/* "Whole plan on screen" (Settings, or fit="screen"): the stage takes the
   plan's shape (--esbld-ratio = width / height, set by the viewer) and is no
   taller than --esbld-fit-height, centred. A theme can set --esbld-fit-height,
   e.g. for a tall sticky header. The no-JS images follow the same limit. */
.esbld-building--fit-screen {
	--esbld-fit-height: max(16rem, calc(100vh - 8rem));
}

@supports (height: 100svh) {
	.esbld-building--fit-screen {
		--esbld-fit-height: max(16rem, calc(100svh - 8rem));
	}
}

.esbld-building--fit-screen .esbld-stage {
	width: min(100%, calc(var(--esbld-fit-height) * var(--esbld-ratio, 1)));
	margin-inline: auto;
}

.esbld-building--fit-screen .esbld-fallback img {
	width: auto;
	max-width: 100%;
	max-height: var(--esbld-fit-height);
	margin-inline: auto;
}

.esbld-stage.is-zoomed {
	cursor: grab;
}

.esbld-stage.is-zoomed:active {
	cursor: grabbing;
}

.esbld-elementor-empty {
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--esbld-border, #dde3ec);
	border-radius: 8px;
	color: var(--esbld-muted, #5d6b85);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------- zoom */
.esbld-zoom {
	position: absolute;
	z-index: 3;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.esbld-zoom__btn {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--esbld-border);
	border-radius: 8px;
	background: var(--esbld-bg);
	color: var(--esbld-fg);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
	cursor: pointer;
}

.esbld-zoom__btn[hidden] {
	display: none;
}

.esbld-zoom__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.esbld-zoom__btn:focus-visible {
	outline: 2px solid var(--esbld-focus);
	outline-offset: 1px;
}

.esbld-zoom__btn svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------- floor picker */
.esbld-picker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.esbld-picker__label {
	color: var(--esbld-muted);
	font-size: 0.875rem;
}

.esbld-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	user-select: none;
}

.esbld-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.esbld-zone {
	cursor: default;
	outline: none;
	/* the zone's own selected style marks a tap; the browser's highlight would
	   also paint over the zone's tooltip */
	-webkit-tap-highlight-color: transparent;
}

.esbld-zone[role="link"],
.esbld-zone[role="button"] {
	cursor: pointer;
}

.esbld-shape {
	stroke-width: 1.5;
	transition: fill 0.12s ease, stroke-width 0.12s ease;
}

.esbld-zone--free .esbld-shape { fill: var(--esbld-free-fill); stroke: var(--esbld-free-stroke); }
.esbld-zone--reserved .esbld-shape { fill: var(--esbld-reserved-fill); stroke: var(--esbld-reserved-stroke); }
.esbld-zone--deposit .esbld-shape { fill: var(--esbld-deposit-fill); stroke: var(--esbld-deposit-stroke); }
.esbld-zone--sold .esbld-shape { fill: var(--esbld-sold-fill); stroke: var(--esbld-sold-stroke); stroke-dasharray: 6 4; }
.esbld-zone--nav .esbld-shape { fill: var(--esbld-nav-fill); stroke: var(--esbld-nav-stroke); }
.esbld-zone--none .esbld-shape { fill: transparent; stroke: transparent; }
.esbld-zone--none.esbld-zone--spot .esbld-shape { fill: #fff; stroke: var(--esbld-sold-stroke); stroke-width: 2; }

/* Under the pointer or tapped: a stronger fill and a thicker outline in the zone's
   own colour, or the one highlight colour of Settings → Appearance. Sold keeps its
   dashes either way. */
.esbld-zone.is-active .esbld-shape {
	stroke-width: 3;
}

.esbld-zone--free.is-active .esbld-shape { fill: var(--esbld-hover-fill, var(--esbld-free-fill-active)); stroke: var(--esbld-hover-stroke, var(--esbld-free-stroke)); }
.esbld-zone--reserved.is-active .esbld-shape { fill: var(--esbld-hover-fill, var(--esbld-reserved-fill-active)); stroke: var(--esbld-hover-stroke, var(--esbld-reserved-stroke)); }
.esbld-zone--deposit.is-active .esbld-shape { fill: var(--esbld-hover-fill, var(--esbld-deposit-fill-active)); stroke: var(--esbld-hover-stroke, var(--esbld-deposit-stroke)); }
.esbld-zone--sold.is-active .esbld-shape { fill: var(--esbld-hover-fill, var(--esbld-sold-fill-active)); stroke: var(--esbld-hover-stroke, var(--esbld-sold-stroke)); }
.esbld-zone--nav.is-active .esbld-shape { fill: var(--esbld-hover-fill, var(--esbld-nav-fill-active)); stroke: var(--esbld-hover-stroke, var(--esbld-nav-stroke)); }

.esbld-zone:focus-visible .esbld-shape {
	stroke: var(--esbld-focus);
	stroke-width: 3.5;
}

/* ------------------------------------------------------------- tooltip */
.esbld-tip {
	position: absolute;
	z-index: 2;
	display: none;
	box-sizing: border-box;
	max-width: min(20rem, 80%);
	transform: translateX(-50%);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--esbld-border);
	border-radius: 8px;
	background: var(--esbld-bg);
	color: var(--esbld-fg);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
	pointer-events: none;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.esbld-tip.is-shown {
	display: grid;
	gap: 0.25rem;
	justify-items: start;
}

.esbld-tip__title { font-weight: 600; }
.esbld-tip__facts { color: var(--esbld-muted); }
.esbld-tip__price { font-weight: 600; }

/* ----------------------------------------------------- live + legend */
.esbld-live {
	min-height: 1.5em;
	margin: 0.5rem 0 0.25rem;
	font-weight: 500;
}

.esbld-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--esbld-muted);
	font-size: 0.8125rem;
}

.esbld-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.esbld-legend__hint {
	flex-basis: 100%;
}

.esbld-swatch {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	border: 1.5px solid;
	border-radius: 3px;
}

.esbld-swatch--free { background: var(--esbld-free-fill); border-color: var(--esbld-free-stroke); }
.esbld-swatch--reserved { background: var(--esbld-reserved-fill); border-color: var(--esbld-reserved-stroke); }
.esbld-swatch--deposit { background: var(--esbld-deposit-fill); border-color: var(--esbld-deposit-stroke); }
.esbld-swatch--sold { background: var(--esbld-sold-fill); border-color: var(--esbld-sold-stroke); border-style: dashed; }

/* ------------------------------------------------------------- badges */
.esbld-badge {
	display: inline-block;
	padding: 0.0625rem 0.5rem;
	border: 1px solid;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.esbld-badge--free { color: var(--esbld-free-ink); border-color: var(--esbld-free-ink); }
.esbld-badge--reserved { color: var(--esbld-reserved-ink); border-color: var(--esbld-reserved-ink); }
.esbld-badge--deposit { color: var(--esbld-deposit-ink); border-color: var(--esbld-deposit-ink); }
.esbld-badge--sold { color: var(--esbld-sold-ink); border-color: var(--esbld-sold-ink); border-style: dashed; }

/* -------------------------------------------------------------- table */
.esbld-objects__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.esbld-objects__title {
	margin: 0;
	font-size: 1.125rem;
}

.esbld-objects__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.esbld-filter {
	font: inherit;
	font-size: 0.875rem;
	padding: 0.375rem 0.5rem;
	border: 1px solid var(--esbld-border);
	border-radius: 8px;
	background: var(--esbld-bg);
	color: var(--esbld-fg);
	max-width: 100%;
}

.esbld-objects {
	container-type: inline-size;
}

.esbld-objects__scroll {
	overflow-x: auto;
	border: 1px solid var(--esbld-border);
	border-radius: var(--esbld-radius);
}

.esbld-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.esbld-table th,
.esbld-table td {
	padding: 0.5rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--esbld-border);
	text-align: left;
	vertical-align: middle;
}

.esbld-table thead th {
	background: var(--esbld-surface);
	color: var(--esbld-muted);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.esbld-table tbody tr:last-child td {
	border-bottom: 0;
}

.esbld-table .is-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.esbld-table .esbld-col-floor {
	white-space: nowrap;
}

.esbld-cell-name__meta {
	display: none;
}

/* Narrow (a phone, or a narrow column): floor and state move to a second line under
   the object's name and Rooms (also in the details) is left out, so Object, Area and
   Price fit without sideways scrolling. Hidden cells are display:none, so assistive
   tech reads what is shown. */
@container (max-width: 30rem) {
	.esbld-table th,
	.esbld-table td {
		padding: 0.5rem;
	}

	.esbld-table .esbld-col-floor,
	.esbld-table .esbld-col-rooms,
	.esbld-table .esbld-col-status {
		display: none;
	}

	.esbld-cell-name__meta {
		display: block;
		margin-top: 0.25rem;
		color: var(--esbld-muted);
		font-size: 0.75rem;
		font-weight: 400;
	}

	.esbld-cell-name__floor {
		white-space: nowrap;
	}

	.esbld-table .esbld-cell-onrequest {
		white-space: normal;
	}
}

.esbld-row--sold .esbld-cell-name {
	color: var(--esbld-muted);
}

.esbld-cell-name a,
.esbld-linkbtn {
	color: var(--esbld-accent);
	font-weight: 500;
}

.esbld-linkbtn {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* ------------------------------------------------------------- dialog */
.esbld-dialog {
	width: min(32rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 1.25rem;
	border: 1px solid var(--esbld-border);
	border-radius: var(--esbld-radius);
	background: var(--esbld-bg);
	color: var(--esbld-fg);
	box-shadow: 0 20px 60px rgb(0 0 0 / 0.3);
}

.esbld-dialog::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.esbld-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.esbld-dialog__title {
	margin: 0;
	font-size: 1.125rem;
}

.esbld-dialog__close {
	appearance: none;
	flex: none;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--esbld-border);
	border-radius: 999px;
	background: var(--esbld-bg);
	color: var(--esbld-fg);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.esbld-dialog__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0.75rem 0;
	border-radius: 8px;
}

.esbld-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 0.75rem 0 0;
}

.esbld-facts dt {
	color: var(--esbld-muted);
}

.esbld-facts dd {
	margin: 0;
	font-weight: 500;
}

.esbld-dialog__link {
	display: inline-block;
	margin-top: 1rem;
	color: var(--esbld-accent);
	font-weight: 600;
}

/* ------------------------------------------------------ no-JS fallback */
.esbld-fallback {
	margin: 0 0 1rem;
}

.esbld-fallback img {
	display: block;
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.esbld-shape {
		transition: none;
	}
}