/*
 * Solo Estate front end. Everything is scoped to .solo-estate-app so it works inside any theme.
 * Colours come from Solo Estate → Settings → Appearance via CSS variables.
 */

.solo-estate-app {
	--solo-estate-accent: #164d47;
	--solo-estate-highlight: #be9645;
	--solo-estate-fill: 0.45;
	--solo-estate-fill-hover: 0.75;
	--solo-estate-text: #1f2a2e;
	--solo-estate-muted: #5b6468;
	--solo-estate-line: #e3e6e8;
	--solo-estate-soft: #f5f6f4;
	--solo-estate-card: #fff;
	--solo-estate-radius: 10px;
	--solo-estate-button: var(--solo-estate-accent);
	--solo-estate-button-text: #fff;
	--solo-estate-on-accent: #fff;
	--solo-estate-shadow: 0 10px 30px -18px rgba(16, 30, 28, 0.35);
	--solo-estate-font: inherit;
	--solo-estate-size: inherit;

	color: var(--solo-estate-text);
	font-family: var(--solo-estate-font);
	font-size: var(--solo-estate-size);
	line-height: 1.5;
	margin: 0 0 2em;
}
.solo-estate-app *,
.solo-estate-app *::before,
.solo-estate-app *::after {
	box-sizing: border-box;
}
.solo-estate-app a {
	color: var(--solo-estate-accent);
}

/* Edges of form fields: 3:1 against the page whatever the palette (WCAG 1.4.11). */
.solo-estate-app {
	--solo-estate-field-line: var(--solo-estate-muted);
	--solo-estate-field-line: color-mix(in srgb, var(--solo-estate-text) 55%, var(--solo-estate-card));
}

/* Header */
.solo-estate-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 16px;
}
.solo-estate-app .solo-estate-title {
	margin: 0;
	padding: 0;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	line-height: 1.2;
	color: var(--solo-estate-text);
}
.solo-estate-head__meta {
	color: var(--solo-estate-muted);
	font-size: 0.95em;
}

/* Top bar: breadcrumbs on the left, the item's counts / floor switch on the right. */
.solo-estate-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 28px;
}
.solo-estate-topbar > .solo-estate-crumbs,
.solo-estate-topbar > .solo-estate-head {
	margin: 0;
}
.solo-estate-crumbs + .solo-estate-head {
	justify-content: flex-end;
	margin-left: auto;
}
.solo-estate-app .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (max-width: 600px) {
	.solo-estate-crumbs + .solo-estate-head {
		justify-content: flex-start;
		margin-left: 0;
	}
}

/* Breadcrumbs */
.solo-estate-crumbs {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	max-width: 100%;
	margin: 0 0 24px;
	padding: 5px 16px 5px 5px;
	border: 1px solid var(--solo-estate-line);
	border-radius: 999px;
	background: var(--solo-estate-card);
	box-shadow: var(--solo-estate-shadow);
	color: var(--solo-estate-muted);
	font-size: 0.95em;
	line-height: 1.3;
}
.solo-estate-app .solo-estate-crumbs__list,
.solo-estate-app .solo-estate-crumbs__list li {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.solo-estate-app .solo-estate-crumbs__list li::before,
.solo-estate-app .solo-estate-crumbs__list li::marker {
	content: none;
}
.solo-estate-app .solo-estate-crumbs a {
	color: var(--solo-estate-accent);
	font-weight: 600;
	text-decoration: none;
}
.solo-estate-app .solo-estate-crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.solo-estate-crumbs [aria-current="page"] {
	color: var(--solo-estate-text);
	font-weight: 700;
}
/* Separator: a small chevron whatever character the markup uses. */
.solo-estate-crumbs__sep {
	font-size: 0;
}
.solo-estate-crumbs__sep::before {
	content: "›";
	color: var(--solo-estate-muted);
	font-size: 18px;
	line-height: 1;
}
.solo-estate-app .solo-estate-crumbs .solo-estate-back {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: 4px;
	border: 0;
	border-radius: 50%;
	background: var(--solo-estate-accent);
	color: var(--solo-estate-on-accent);
	font-weight: 400;
	text-decoration: none;
	transition: transform 0.15s;
}
.solo-estate-app .solo-estate-crumbs .solo-estate-back:hover {
	text-decoration: none;
	transform: translateX(-2px);
}
/* Phones: one line that scrolls sideways (frontend.js shows its end, the current page). */
@media (max-width: 600px) {
	.solo-estate-crumbs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		font-size: 0.9em;
		white-space: nowrap;
		scrollbar-width: none;
	}
	.solo-estate-crumbs::-webkit-scrollbar {
		display: none;
	}
	.solo-estate-crumbs > *,
	.solo-estate-app .solo-estate-crumbs__list li {
		flex: none;
	}
	.solo-estate-app .solo-estate-crumbs__list {
		flex-wrap: nowrap;
	}
	/* The back button stays at the left edge; the path slides under it. */
	.solo-estate-app .solo-estate-crumbs .solo-estate-back {
		position: sticky;
		left: 0;
		z-index: 1;
		box-shadow: 0 0 0 6px var(--solo-estate-card);
	}
}

/* Image with polygons */
.solo-estate-stage {
	position: relative;
	line-height: 0;
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-soft);
}
/* Image and polygons in one box (the polygons cover exactly the image). */
.solo-estate-stage__frame {
	position: relative;
}
.solo-estate-app .solo-estate-stage .solo-estate-stage__img {
	border-radius: var(--solo-estate-radius);
}
.solo-estate-app .solo-estate-stage__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.solo-estate-stage__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.solo-estate-shape polygon {
	fill: var(--solo-estate-shape);
	fill-opacity: 0;
	stroke: #fff;
	stroke-opacity: 0;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	transition: fill-opacity 0.18s ease, stroke-opacity 0.18s ease;
}
.solo-estate-shape.is-link {
	cursor: pointer;
}
.solo-estate-shape:hover polygon,
.solo-estate-shape:focus polygon,
.solo-estate-shape.is-active polygon {
	fill: var(--solo-estate-shape-hover, var(--solo-estate-shape));
	fill-opacity: var(--solo-estate-fill-hover);
	stroke-opacity: 1;
}
.solo-estate-shape:focus {
	outline: none;
}
/* Keyboard focus: a thick highlight outline with a dark halo, visible on any render. */
.solo-estate-shape:focus-visible polygon {
	stroke: var(--solo-estate-highlight);
	stroke-width: 4;
	stroke-opacity: 1;
	fill-opacity: var(--solo-estate-fill-hover);
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85));
}
/* Unavailable units and sold-out buildings: hatching on top of the colour (not colour alone). */
.solo-estate-hatch line {
	stroke: rgba(255, 255, 255, 0.6);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}
.solo-estate-app .solo-estate-shape .solo-estate-shape__hatch {
	fill-opacity: 0.5;
	stroke: none;
	pointer-events: none;
}
/* On floor and parking plans every unit is always coloured by status. */
.solo-estate-app--floor .solo-estate-shape polygon,
.solo-estate-app--parking .solo-estate-shape polygon {
	fill-opacity: var(--solo-estate-fill);
	stroke-opacity: 0.9;
}
.solo-estate-app--floor .solo-estate-shape:hover polygon,
.solo-estate-app--floor .solo-estate-shape.is-active polygon,
.solo-estate-app--parking .solo-estate-shape:hover polygon,
.solo-estate-app--parking .solo-estate-shape.is-active polygon {
	fill-opacity: var(--solo-estate-fill-hover);
}
@media (hover: none) {
	/* Touch screens have no hover, so show the clickable areas. */
	.solo-estate-shape polygon {
		fill-opacity: calc(var(--solo-estate-fill) * 0.6);
		stroke-opacity: 0.8;
	}
}

/* Tooltip */
.solo-estate-app {
	--solo-estate-tip-bg: var(--solo-estate-accent);
	--solo-estate-tip-text: var(--solo-estate-on-accent);
	--solo-estate-tip-muted: color-mix(in srgb, var(--solo-estate-on-accent) 88%, transparent);
	--solo-estate-tip-line: rgba(255, 255, 255, 0.16);
	--solo-estate-tip-tile: rgba(255, 255, 255, 0.1);
}
.solo-estate-tips--light {
	--solo-estate-tip-bg: #fff;
	--solo-estate-tip-text: var(--solo-estate-text);
	--solo-estate-tip-muted: var(--solo-estate-muted);
	--solo-estate-tip-line: var(--solo-estate-line);
	--solo-estate-tip-tile: var(--solo-estate-soft);
}
.solo-estate-tip {
	--solo-estate-arrow: 50%;
	position: absolute;
	z-index: 20;
	width: max-content;
	min-width: 190px;
	max-width: 280px;
	padding: 14px 16px 12px;
	line-height: 1.35;
	background: var(--solo-estate-tip-bg);
	color: var(--solo-estate-tip-text);
	border-radius: 12px;
	box-shadow: 0 18px 40px -12px rgba(10, 20, 18, 0.45), 0 2px 6px rgba(10, 20, 18, 0.12);
	pointer-events: none;
	font-size: 0.9em;
	opacity: 0;
	transform: translateY(6px) scale(0.98);
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.solo-estate-tip.is-below {
	transform: translateY(-6px) scale(0.98);
}
.solo-estate-tip.is-visible {
	opacity: 1;
	transform: none;
}
/* The pointer can move onto a visible tooltip without it closing (WCAG 1.4.13). */
.solo-estate-stage:not([data-touch]) .solo-estate-tip.is-visible {
	pointer-events: auto;
}
.solo-estate-tip[hidden] {
	display: none;
}
/* Arrow pointing at the cursor. */
.solo-estate-tip::after {
	content: "";
	position: absolute;
	left: var(--solo-estate-arrow);
	bottom: -6px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: var(--solo-estate-tip-bg);
	transform: rotate(45deg);
	border-radius: 2px;
}
.solo-estate-tip.is-below::after {
	bottom: auto;
	top: -6px;
}
.solo-estate-tip.is-side::after {
	display: none;
}
.solo-estate-stage[data-touch] .solo-estate-tip.is-visible {
	pointer-events: auto;
}
/* Close button: touch screens only (with a mouse the tooltip closes when the pointer leaves). */
.solo-estate-app .solo-estate-tip__close {
	display: none;
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--solo-estate-tip-line);
	color: var(--solo-estate-tip-text);
	font: inherit;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
}
.solo-estate-stage[data-touch] .solo-estate-tip__close {
	display: block;
}
.solo-estate-stage[data-touch] .solo-estate-tip__head {
	padding-right: 34px;
}
.solo-estate-tip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
}
.solo-estate-tip__title {
	font-weight: 700;
	font-size: 1.15em;
}
.solo-estate-tip__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	background: var(--solo-estate-tip-tile);
	font-size: 0.82em;
	white-space: nowrap;
}
.solo-estate-tip__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--solo-estate-shape);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.solo-estate-tip__thumb {
	width: fit-content;
	max-width: 100%;
	margin: 10px auto 0;
	padding: 6px;
	border-radius: 8px;
	background: #fff;
	line-height: 0;
}
.solo-estate-app .solo-estate-tip__thumb img {
	display: block;
	width: 100%;
	max-height: 110px;
	margin: 0;
	object-fit: contain;
}
.solo-estate-tip__meter {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	column-gap: 8px;
	margin: 10px 0 0;
}
.solo-estate-tip__big {
	font-size: 2em;
	font-weight: 700;
	line-height: 1;
}
.solo-estate-tip__meter-label {
	color: var(--solo-estate-tip-muted);
	white-space: nowrap;
}
.solo-estate-tip__pct {
	font-weight: 700;
}
.solo-estate-tip__meter-label small {
	font-size: 0.9em;
}
.solo-estate-tip__bar {
	grid-column: 1 / -1;
	height: 4px;
	margin-top: 8px;
	border-radius: 4px;
	background: var(--solo-estate-tip-line);
	overflow: hidden;
}
.solo-estate-tip__bar span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--solo-estate-highlight);
}
.solo-estate-app .solo-estate-tip__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin: 10px 0 0;
}
.solo-estate-tip__stats div {
	padding: 5px 8px;
	border-radius: 8px;
	background: var(--solo-estate-tip-tile);
}
.solo-estate-app .solo-estate-tip__stats dt {
	margin: 0;
	font-size: 0.78em;
	font-weight: 400;
	color: var(--solo-estate-tip-muted);
}
.solo-estate-app .solo-estate-tip__stats dd {
	margin: 0;
	font-weight: 700;
	white-space: nowrap;
}
.solo-estate-tip__hint {
	display: block;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--solo-estate-tip-line);
	color: var(--solo-estate-tip-muted);
	font-size: 0.8em;
}
.solo-estate-app .solo-estate-tip__more {
	display: none;
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--solo-estate-highlight);
	color: var(--solo-estate-text);
	text-align: center;
	font-weight: 600;
	text-decoration: none;
}
.solo-estate-stage[data-touch] .solo-estate-tip__more {
	display: block;
}
.solo-estate-stage[data-touch] .solo-estate-tip__hint {
	display: none;
}

/* Status badge + legend */
.solo-estate-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
	line-height: 1.2;
	white-space: nowrap;
}
.solo-estate-badge::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--solo-estate-shape);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.solo-estate-badge.is-sold-out {
	font-weight: 600;
	text-transform: none;
}
/* Sold-out buildings/floors stay visibly marked on the render, not only on hover. */
.solo-estate-shape.is-sold-out polygon {
	fill-opacity: calc(var(--solo-estate-fill) * 0.8);
	stroke-opacity: 0.6;
}
.solo-estate-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 12px 0 0;
}

/* Layout with side list */
.solo-estate-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 20px;
	align-items: start;
}
.solo-estate-side-title {
	font-weight: 700;
	margin: 0 0 8px;
}
.solo-estate-app .solo-estate-floor-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 70vh;
	overflow: auto;
	border: 1px solid var(--solo-estate-line);
	border-radius: var(--solo-estate-radius);
}
.solo-estate-floor-list li {
	margin: 0;
	border-bottom: 1px solid var(--solo-estate-line);
}
.solo-estate-floor-list li:last-child {
	border-bottom: 0;
}
.solo-estate-floor-list a,
.solo-estate-floor-list .is-disabled {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	text-decoration: none;
	line-height: 1.3;
}
.solo-estate-app .solo-estate-floor-list a {
	color: var(--solo-estate-text);
}
.solo-estate-floor-list a:hover {
	background: var(--solo-estate-soft);
}
.solo-estate-floor-list span {
	color: var(--solo-estate-muted);
	font-size: 0.85em;
}
.solo-estate-floor-list .is-disabled {
	/* Sold / closed: muted colour and hatching, not transparency (text stays readable). */
	color: var(--solo-estate-muted);
	background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--solo-estate-line) 70%, transparent) 6px 7px);
}
@media (max-width: 782px) {
	.solo-estate-layout {
		grid-template-columns: 1fr;
	}
	.solo-estate-app .solo-estate-floor-list {
		max-height: none;
	}
}

/* Cards (project level) */
.solo-estate-app .solo-estate-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}
.solo-estate-cards li {
	margin: 0;
}
.solo-estate-app .solo-estate-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid var(--solo-estate-line);
	border-radius: var(--solo-estate-radius);
	color: var(--solo-estate-text);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.solo-estate-app a.solo-estate-card:hover {
	border-color: var(--solo-estate-accent);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.solo-estate-card__title {
	font-weight: 700;
}
.solo-estate-card__meta {
	color: var(--solo-estate-muted);
	font-size: 0.9em;
}

/* Floor switcher + currency */
.solo-estate-floor-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.solo-estate-app .solo-estate-floor-switch__go {
	margin: 0;
	padding: 7px 14px;
	border: 0;
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-accent);
	color: var(--solo-estate-on-accent);
	font: inherit;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}
.solo-estate-app .solo-estate-floor-switch__go[hidden] {
	display: none;
}
.solo-estate-app .solo-estate-floor-switch select {
	/* Fixed box so theme select styles (heights, line heights) cannot stretch it. */
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 7px 34px 7px 12px;
	border: 1px solid var(--solo-estate-field-line);
	border-radius: var(--solo-estate-radius);
	background-color: var(--solo-estate-card);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6468' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	color: var(--solo-estate-text);
	font: inherit;
	line-height: 1.35;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.solo-estate-currency {
	display: inline-flex;
	border: 1px solid var(--solo-estate-line);
	border-radius: 999px;
	padding: 2px;
	vertical-align: middle;
	margin-left: auto;
}
.solo-estate-app .solo-estate-currency button {
	min-width: 34px;
	padding: 3px 10px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--solo-estate-muted);
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: none;
}
.solo-estate-app[data-currency="base"] .solo-estate-currency [data-set-cur="base"],
.solo-estate-app[data-currency="alt"] .solo-estate-currency [data-set-cur="alt"] {
	background: var(--solo-estate-accent);
	color: var(--solo-estate-on-accent);
}
.solo-estate-app[data-currency="base"] [data-cur="alt"],
.solo-estate-app[data-currency="alt"] [data-cur="base"] {
	display: none;
}

/* Tables */
.solo-estate-table-wrap {
	overflow-x: auto;
	margin: 20px 0 0;
}
.solo-estate-app .solo-estate-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 0;
	font-size: 0.95em;
}
.solo-estate-app .solo-estate-table th,
.solo-estate-app .solo-estate-table td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--solo-estate-line);
	text-align: left;
	background: none;
	vertical-align: middle;
}
.solo-estate-app .solo-estate-table th {
	color: var(--solo-estate-muted);
	font-weight: 600;
	font-size: 0.85em;
	text-transform: none;
}
.solo-estate-app .solo-estate-table td,
.solo-estate-app .solo-estate-table tbody th {
	white-space: nowrap;
}
/* Row headers (the unit number) look like the other cells, in bold. */
.solo-estate-app .solo-estate-table tbody th {
	color: var(--solo-estate-text);
	font-weight: 700;
	font-size: 1em;
}
.solo-estate-app .solo-estate-table tbody th a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}
.solo-estate-app .solo-estate-table tbody th a:hover,
.solo-estate-app .solo-estate-table tbody th a:focus-visible {
	color: var(--solo-estate-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.solo-estate-app .solo-estate-table tr.is-disabled th {
	color: var(--solo-estate-muted);
	background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--solo-estate-line) 70%, transparent) 6px 7px);
}
.solo-estate-table tr.is-link {
	cursor: pointer;
}
.solo-estate-table tr.is-link:hover td,
.solo-estate-table tr.is-link:hover th {
	background: var(--solo-estate-soft);
}
@media (max-width: 600px) {
	.solo-estate-app .solo-estate-table .solo-estate-table__action {
		display: none;
	}
}
.solo-estate-table tr.is-disabled td {
	color: var(--solo-estate-muted);
	background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--solo-estate-line) 70%, transparent) 6px 7px);
}
.solo-estate-table__action {
	text-align: right !important;
	white-space: nowrap;
}
.solo-estate-app .solo-estate-table__action a {
	text-decoration: none;
	font-weight: 600;
}

/* Unit page (apartment, commercial space, villa) */
.solo-estate-flat {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
	gap: 32px;
	align-items: start;
}
.solo-estate-flat__media {
	min-width: 0;
}
.solo-estate-flat__stage {
	position: relative;
	padding: 16px;
	border: 1px solid var(--solo-estate-line);
	border-radius: calc(var(--solo-estate-radius) * 1.6);
	background: var(--solo-estate-card);
	box-shadow: var(--solo-estate-shadow);
}
.solo-estate-flat__stage > .solo-estate-switch__tabs {
	position: relative;
	z-index: 2;
	margin: 0 0 8px;
}
.solo-estate-flat__image {
	display: block;
	border-radius: var(--solo-estate-radius);
	overflow: hidden;
	cursor: zoom-in;
}
.solo-estate-app .solo-estate-flat__image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	transition: transform 0.35s ease;
}
.solo-estate-app .solo-estate-flat__image.is-plan img {
	max-height: 68vh;
	object-fit: contain;
}
.solo-estate-app .solo-estate-flat__image:hover img {
	transform: scale(1.02);
}
.solo-estate-flat__zoom {
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--solo-estate-card);
	color: var(--solo-estate-text);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	pointer-events: none;
}
.solo-estate-flat__noimage {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-soft);
	color: var(--solo-estate-muted);
}
.solo-estate-flat__noimage .solo-estate-icon {
	width: 64px;
	height: 64px;
	opacity: 0.5;
}

/* Right-hand panel */
.solo-estate-flat__panel {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--solo-estate-line);
	border-radius: calc(var(--solo-estate-radius) * 1.6);
	background: var(--solo-estate-card);
	box-shadow: var(--solo-estate-shadow);
}
.solo-estate-flat__where {
	color: var(--solo-estate-muted);
	font-size: 0.8em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.solo-estate-flat__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-top: -10px;
}
.solo-estate-app .solo-estate-flat__head .solo-estate-title {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.solo-estate-app .solo-estate-keys {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.solo-estate-keys li {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 12px;
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-soft);
}
.solo-estate-keys .solo-estate-icon {
	margin-bottom: 4px;
	color: var(--solo-estate-accent);
}
.solo-estate-keys strong {
	font-size: 1.25em;
	line-height: 1.2;
}
.solo-estate-keys span {
	color: var(--solo-estate-muted);
	font-size: 0.8em;
	overflow-wrap: anywhere;
}
.solo-estate-price-box {
	padding: 16px 18px;
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-accent);
	background: linear-gradient(135deg, var(--solo-estate-accent), color-mix(in srgb, var(--solo-estate-accent) 70%, #000));
	color: var(--solo-estate-on-accent);
}
.solo-estate-price-box__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: color-mix(in srgb, var(--solo-estate-on-accent) 78%, transparent);
	font-size: 0.9em;
}
.solo-estate-price-box__total {
	margin-top: 4px;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.2;
}
.solo-estate-price-box__sqm {
	color: color-mix(in srgb, var(--solo-estate-on-accent) 78%, transparent);
	font-size: 0.9em;
}
.solo-estate-price-box .solo-estate-currency {
	background: rgba(255, 255, 255, 0.14);
	border-color: transparent;
}
.solo-estate-app .solo-estate-price-box .solo-estate-currency button {
	color: color-mix(in srgb, var(--solo-estate-on-accent) 88%, transparent);
}
.solo-estate-app[data-currency="base"] .solo-estate-price-box .solo-estate-currency [data-set-cur="base"],
.solo-estate-app[data-currency="alt"] .solo-estate-price-box .solo-estate-currency [data-set-cur="alt"] {
	background: #fff;
	color: var(--solo-estate-accent);
}
.solo-estate-flat__actions {
	display: grid;
	gap: 8px;
}
.solo-estate-app .solo-estate-flat__actions .solo-estate-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	text-decoration: none;
}
.solo-estate-app .solo-estate-details {
	display: grid;
	margin: 0;
}
.solo-estate-details div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-top: 1px solid var(--solo-estate-line);
}
.solo-estate-app .solo-estate-details dt {
	margin: 0;
	color: var(--solo-estate-muted);
	font-weight: 400;
}
.solo-estate-app .solo-estate-details dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* Sections below the unit */
.solo-estate-section {
	margin: 36px 0 0;
}
.solo-estate-app .solo-estate-section__title {
	margin: 0 0 14px;
	font-size: 1.3em;
	font-weight: 700;
}
.solo-estate-app .solo-estate-rooms {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.solo-estate-rooms li {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--solo-estate-line);
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-card);
}
.solo-estate-rooms span {
	color: var(--solo-estate-muted);
	font-size: 0.85em;
}
.solo-estate-rooms strong {
	font-size: 1.15em;
}
.solo-estate-rooms li.is-highlight {
	border-color: transparent;
	background: var(--solo-estate-soft);
}
.solo-estate-rooms li.is-highlight strong {
	color: var(--solo-estate-accent);
}

/* Previous / next unit */
.solo-estate-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 36px 0 0;
}
.solo-estate-app .solo-estate-pager a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid var(--solo-estate-line);
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-card);
	color: var(--solo-estate-text);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.solo-estate-app .solo-estate-pager a:hover {
	border-color: var(--solo-estate-accent);
	box-shadow: var(--solo-estate-shadow);
}
.solo-estate-app .solo-estate-pager__next {
	flex-direction: row-reverse;
	text-align: right;
}
.solo-estate-pager__arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--solo-estate-soft);
	color: var(--solo-estate-accent);
}
.solo-estate-pager__text {
	display: grid;
}
.solo-estate-pager__text small {
	color: var(--solo-estate-muted);
}
@media (max-width: 900px) {
	.solo-estate-flat {
		grid-template-columns: 1fr;
	}
	.solo-estate-flat__panel {
		position: static;
	}
}
@media (max-width: 600px) {
	.solo-estate-flat__stage,
	.solo-estate-flat__panel {
		padding: 14px;
	}
	/* One row: compact buttons at the two ends, free space in the middle. */
	.solo-estate-pager {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		margin-top: 24px;
	}
	.solo-estate-app .solo-estate-pager a {
		gap: 8px;
		min-width: 0;
		padding: 6px 12px 6px 6px;
		border-radius: 999px;
	}
	.solo-estate-app .solo-estate-pager__next {
		padding: 6px 6px 6px 12px;
	}
	.solo-estate-pager__arrow {
		width: 30px;
		height: 30px;
	}
	.solo-estate-pager__text {
		font-size: 0.9em;
		line-height: 1.2;
		white-space: nowrap;
	}
	.solo-estate-app .solo-estate-keys,
	.solo-estate-app .solo-estate-rooms {
		grid-template-columns: 1fr 1fr;
	}
}

.solo-estate-description {
	margin: 20px 0 0;
}
.solo-estate-description iframe {
	max-width: 100%;
	border: 0;
	border-radius: var(--solo-estate-radius);
}
.solo-estate-empty,
.solo-estate-notice {
	padding: 16px;
	background: var(--solo-estate-soft);
	border-radius: 8px;
}

/* Lead form */
.solo-estate-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 16px 32px;
	align-items: center;
	margin: 36px 0 0;
	padding: 28px;
	border-radius: calc(var(--solo-estate-radius) * 1.6);
	background: var(--solo-estate-soft);
}
.solo-estate-lead__title {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
}
.solo-estate-lead__subject {
	margin-top: 2px;
	color: var(--solo-estate-accent);
	font-weight: 600;
}
.solo-estate-app .solo-estate-lead__note {
	margin: 8px 0 0;
	color: var(--solo-estate-muted);
	font-size: 0.9em;
}
.solo-estate-lead__fields {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 12px;
	align-items: end;
}
.solo-estate-lead__message {
	grid-column: 1 / -1;
}
.solo-estate-lead__fields label span {
	display: block;
	font-size: 0.85em;
	color: var(--solo-estate-muted);
	margin-bottom: 4px;
}
.solo-estate-app .solo-estate-lead input[type="text"],
.solo-estate-app .solo-estate-lead input[type="tel"] {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--solo-estate-field-line);
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-card);
	font: inherit;
	color: var(--solo-estate-text);
	box-shadow: none;
}
.solo-estate-app .solo-estate-lead input.is-invalid {
	border-color: #c62828;
	box-shadow: 0 0 0 1px #c62828;
}
.solo-estate-lead__error {
	display: block;
	margin-top: 4px;
	color: #b71c1c;
	font-size: 0.85em;
	font-style: normal;
}
.solo-estate-lead__error::before {
	content: "⚠ ";
}
.solo-estate-lead__error[hidden] {
	display: none;
}
.solo-estate-app .solo-estate-button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: wait;
}
.solo-estate-app .solo-estate-button {
	padding: 12px 24px;
	margin: 0;
	border: 1px solid var(--solo-estate-button);
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-button);
	color: var(--solo-estate-button-text);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}
.solo-estate-app .solo-estate-button:hover {
	filter: brightness(1.1);
	color: var(--solo-estate-button-text);
}
.solo-estate-app .solo-estate-button--ghost {
	background: transparent;
	color: var(--solo-estate-button);
}
.solo-estate-app .solo-estate-button--ghost:hover {
	background: var(--solo-estate-soft);
	color: var(--solo-estate-button);
	filter: none;
}
.solo-estate-app .solo-estate-button:disabled {
	opacity: 0.6;
	cursor: wait;
}
.solo-estate-lead__message {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 6px;
	background: #e7f4ea;
	color: #1b5e20;
}
.solo-estate-lead__message.is-error {
	background: #fdecea;
	color: #b71c1c;
}
.solo-estate-lead.is-sent .solo-estate-lead__fields {
	display: none;
}
/* Empty until something is written into it, but kept in the page for screen readers. */
.solo-estate-lead__message:empty {
	margin: 0;
	padding: 0;
}
.solo-estate-lead__message:focus {
	outline: 2px solid var(--solo-estate-highlight);
	outline-offset: 2px;
}
.solo-estate-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
@media (max-width: 800px) {
	.solo-estate-lead {
		grid-template-columns: 1fr;
		padding: 20px;
	}
}
@media (max-width: 600px) {
	.solo-estate-lead__fields {
		grid-template-columns: 1fr;
	}
}

/* Lightbox */
.solo-estate-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 14, 16, 0.88);
	cursor: zoom-out;
}
.solo-estate-lightbox img {
	max-width: 100%;
	max-height: 100%;
	background: #fff;
	border-radius: 6px;
}
.solo-estate-lightbox__close {
	position: absolute;
	top: 12px;
	right: 16px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}
.solo-estate-no-scroll {
	overflow: hidden;
}

/* Info window: boulevard, sports field… (photos + description instead of a page) */
.solo-estate-info {
	cursor: default;
	overflow-y: auto;
	align-items: flex-start;
}
.solo-estate-app.solo-estate-info__panel {
	position: relative;
	width: 100%;
	max-width: 760px;
	margin: auto;
	padding: 28px;
	border-radius: calc(var(--solo-estate-radius) + 4px);
	background: var(--solo-estate-card);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.solo-estate-app .solo-estate-info__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--solo-estate-soft);
	color: var(--solo-estate-text);
	font: inherit;
	font-size: 24px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
}
.solo-estate-app .solo-estate-info__title {
	margin: 0 44px 6px 0;
	font-size: 1.5em;
	line-height: 1.25;
	color: var(--solo-estate-text);
}
.solo-estate-app .solo-estate-info__meta {
	margin: 0 0 12px;
	color: var(--solo-estate-muted);
}
.solo-estate-info__photos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 16px 0 0;
}
.solo-estate-app .solo-estate-info__photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-soft);
	cursor: zoom-in;
}
.solo-estate-info__photo:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 9;
}
.solo-estate-app .solo-estate-info__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
	background: none;
	transition: transform 0.3s;
}
.solo-estate-info__photo:hover img {
	transform: scale(1.03);
}
.solo-estate-app .solo-estate-info__text {
	margin: 18px 0 0;
}
.solo-estate-info__text > :last-child {
	margin-bottom: 0;
}
@media (max-width: 600px) {
	.solo-estate-info {
		padding: 12px;
	}
	.solo-estate-app.solo-estate-info__panel {
		padding: 20px 16px;
	}
	.solo-estate-info__photos {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Catalog of projects */
/* Project status tabs: a segmented switch */
.solo-estate-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 28px;
	padding: 5px;
	border: 1px solid var(--solo-estate-line);
	border-radius: 999px;
	background: var(--solo-estate-card);
	box-shadow: var(--solo-estate-shadow);
}
.solo-estate-app .solo-estate-tabs button {
	margin: 0;
	padding: 11px 26px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--solo-estate-text);
	font: inherit;
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.solo-estate-app .solo-estate-tabs button:hover {
	background: var(--solo-estate-soft);
	color: var(--solo-estate-accent);
}
.solo-estate-app .solo-estate-tabs button.is-active,
.solo-estate-app .solo-estate-tabs button.is-active:hover {
	background: var(--solo-estate-accent);
	color: var(--solo-estate-on-accent);
	box-shadow: 0 6px 16px -8px var(--solo-estate-accent);
}
@media (max-width: 600px) {
	/* One row on phones: the tabs share the width; very long labels scroll sideways. */
	.solo-estate-tabs {
		display: flex;
		flex-wrap: nowrap;
		gap: 2px;
		padding: 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.solo-estate-tabs::-webkit-scrollbar {
		display: none;
	}
	.solo-estate-app .solo-estate-tabs button {
		flex: 1 0 auto;
		padding: 9px 12px;
		font-size: 0.9em;
		white-space: nowrap;
	}
}
.solo-estate-app .solo-estate-projects {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.solo-estate-projects li {
	margin: 0;
}
.solo-estate-projects li[hidden] {
	display: none;
}
.solo-estate-app .solo-estate-project {
	display: block;
	height: 100%;
	color: var(--solo-estate-text);
	text-decoration: none;
	background: var(--solo-estate-soft);
	overflow: hidden;
}
.solo-estate-project__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #dfe3e1;
}
.solo-estate-app .solo-estate-project__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.solo-estate-app a.solo-estate-project:hover img {
	transform: scale(1.04);
}
.solo-estate-project__soldout {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.18);
	color: #fff;
	font-size: clamp(2rem, 5vw, 3.6rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.solo-estate-project__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 22px 16px 26px;
	text-align: center;
}
.solo-estate-project__title {
	font-size: 1.2em;
	font-weight: 600;
}
.solo-estate-project__status {
	color: var(--solo-estate-muted);
}

/* Apartment filter */
.solo-estate-filter {
	margin: 0 0 24px;
	border: 1px solid var(--solo-estate-line);
	border-radius: calc(var(--solo-estate-radius) * 1.4);
	background: var(--solo-estate-card);
	box-shadow: var(--solo-estate-shadow);
	font-size: 0.92em;
}
.solo-estate-filter > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.solo-estate-filter > summary::-webkit-details-marker {
	display: none;
}
.solo-estate-filter > summary:focus {
	outline: none;
}
.solo-estate-filter > summary:focus-visible {
	outline: 2px solid var(--solo-estate-highlight);
	outline-offset: -2px;
	border-radius: calc(var(--solo-estate-radius) * 1.4);
}
.solo-estate-filter__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--solo-estate-accent);
	color: var(--solo-estate-on-accent);
}
.solo-estate-filter__heading {
	font-size: 1.08em;
	font-weight: 600;
}
.solo-estate-filter__chevron {
	width: 9px;
	height: 9px;
	margin: -4px 4px 0 auto;
	border-right: 2px solid var(--solo-estate-muted);
	border-bottom: 2px solid var(--solo-estate-muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.solo-estate-filter[open] .solo-estate-filter__chevron {
	margin-top: 4px;
	transform: rotate(-135deg);
}
/* Building, rooms, area and floor side by side on one line where they fit. */
.solo-estate-filter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 16px;
	padding: 6px 18px 0;
	border-top: 1px solid var(--solo-estate-line);
	padding-top: 16px;
	align-items: flex-end;
}
.solo-estate-filter__field {
	flex: 1 1 160px;
	min-width: 0;
	max-width: 320px;
}
.solo-estate-filter__field > span,
.solo-estate-app .solo-estate-filter__field > legend {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--solo-estate-muted);
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.solo-estate-app .solo-estate-filter select,
.solo-estate-app .solo-estate-filter input[type="text"] {
	width: 100%;
	height: 42px;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	/* A visible edge (3:1 against the page), derived from the text colour. */
	border: 1px solid var(--solo-estate-field-line);
	border-radius: var(--solo-estate-radius);
	background-color: var(--solo-estate-soft);
	color: var(--solo-estate-text);
	font: inherit;
	font-size: 1em;
	line-height: 42px;
	box-shadow: none;
	transition: border-color 0.15s, background-color 0.15s;
}
.solo-estate-app .solo-estate-filter select {
	padding-right: 34px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7478' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	cursor: pointer;
}
.solo-estate-app .solo-estate-filter select:hover,
.solo-estate-app .solo-estate-filter input[type="text"]:hover {
	border-color: var(--solo-estate-line);
}
.solo-estate-app .solo-estate-filter select:focus,
.solo-estate-app .solo-estate-filter input[type="text"]:focus {
	border-color: var(--solo-estate-accent);
	background-color: var(--solo-estate-card);
	outline: none;
}
.solo-estate-app .solo-estate-filter input::placeholder {
	color: var(--solo-estate-muted);
	opacity: 1;
}
.solo-estate-filter__range {
	flex: 1 1 210px;
	max-width: 400px;
}
.solo-estate-filter__range > div {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.solo-estate-filter__rooms {
	display: flex;
	flex-wrap: wrap;
	flex: 0 1 auto;
	gap: 6px;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.solo-estate-app .solo-estate-filter__rooms legend {
	width: 100%;
}
.solo-estate-filter__rooms label {
	position: relative;
	margin: 0;
}
.solo-estate-filter__rooms label input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.solo-estate-filter__rooms label span {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: var(--solo-estate-radius);
	background: var(--solo-estate-soft);
	color: var(--solo-estate-text);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.solo-estate-filter__rooms label span:hover {
	border-color: var(--solo-estate-line);
}
.solo-estate-filter__rooms label input:checked + span {
	background: var(--solo-estate-accent);
	color: var(--solo-estate-on-accent);
}
.solo-estate-filter__rooms label input:focus-visible + span {
	outline: 2px solid var(--solo-estate-highlight);
}
.solo-estate-filter__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1 0 100%;
	gap: 12px 18px;
	margin: 2px -18px 0;
	padding: 14px 18px;
	border-top: 1px solid var(--solo-estate-line);
	border-radius: 0 0 calc(var(--solo-estate-radius) * 1.4) calc(var(--solo-estate-radius) * 1.4);
	background: var(--solo-estate-soft);
}
.solo-estate-app .solo-estate-filter__check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 auto 0 0;
	cursor: pointer;
}
.solo-estate-filter__check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.solo-estate-switch-toggle {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: var(--solo-estate-field-line);
	transition: background-color 0.2s;
}
.solo-estate-switch-toggle::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s;
}
.solo-estate-filter__check input:checked + .solo-estate-switch-toggle {
	background: var(--solo-estate-accent);
}
.solo-estate-filter__check input:checked + .solo-estate-switch-toggle::after {
	transform: translateX(16px);
}
.solo-estate-filter__check input:focus-visible + .solo-estate-switch-toggle {
	outline: 2px solid var(--solo-estate-highlight);
	outline-offset: 2px;
}
.solo-estate-app .solo-estate-filter__reset {
	order: 1;
	color: var(--solo-estate-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.solo-estate-app .solo-estate-filter .solo-estate-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	order: 2;
	padding: 10px 22px;
}
.solo-estate-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 18px 0 0;
}
.solo-estate-pages a,
.solo-estate-pages span {
	min-width: 36px;
	padding: 6px 10px;
	border: 1px solid var(--solo-estate-line);
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
}
.solo-estate-pages [aria-current] {
	background: var(--solo-estate-accent);
	border-color: var(--solo-estate-accent);
	color: var(--solo-estate-on-accent);
}
.solo-estate-pages__gap {
	border: 0 !important;
}
@media (max-width: 600px) {
	.solo-estate-filter__field {
		flex-basis: 100%;
		max-width: none;
	}
	.solo-estate-app .solo-estate-filter .solo-estate-button {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.solo-estate-app .solo-estate-tip__thumb img {
		max-height: 80px;
	}
}

/* Layout without an image: the list takes the full width. */
.solo-estate-layout--list {
	grid-template-columns: 1fr;
}
.solo-estate-layout--list .solo-estate-layout__main:empty {
	display: none;
}

/* Card image (villas) */
.solo-estate-card__media {
	display: block;
	margin: -14px -16px 6px;
	aspect-ratio: 4 / 3;
	border-radius: var(--solo-estate-radius) var(--solo-estate-radius) 0 0;
	background: var(--solo-estate-soft);
	overflow: hidden;
}
.solo-estate-app .solo-estate-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Tabs: 2D / 3D / photos, villa floors */
.solo-estate-switch__tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 12px;
	padding: 4px;
	border-radius: 999px;
	background: var(--solo-estate-soft);
}
.solo-estate-app .solo-estate-switch__tabs button {
	margin: 0;
	padding: 7px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--solo-estate-text);
	font: inherit;
	font-size: 0.92em;
	line-height: 1.2;
	cursor: pointer;
}
.solo-estate-app .solo-estate-switch__tabs button.is-active {
	background: var(--solo-estate-accent);
	color: var(--solo-estate-on-accent);
}
.solo-estate-switch__pane[hidden] {
	display: none;
}

/* Photo gallery: the first photo large, the rest in a grid. */
.solo-estate-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.solo-estate-gallery > :first-child {
	grid-column: 1 / -1;
}
.solo-estate-gallery--thumbs > :first-child {
	grid-column: auto;
}
.solo-estate-app .solo-estate-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
	object-fit: cover;
}
.solo-estate-app .solo-estate-gallery > :first-child img {
	aspect-ratio: 16 / 10;
}
.solo-estate-app .solo-estate-gallery--thumbs > :first-child img {
	aspect-ratio: 4 / 3;
}

/* Virtual tour */
.solo-estate-app .solo-estate-tour-button {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.solo-estate-tour-button span {
	padding: 2px 6px;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 0.75em;
	font-weight: 700;
}
.solo-estate-lightbox--tour {
	padding: 48px 16px 16px;
}
.solo-estate-lightbox--tour iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 8px;
	background: #000;
}
.solo-estate-lightbox__nav {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 32px;
	line-height: 44px;
	cursor: pointer;
}
.solo-estate-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.3);
}
.solo-estate-lightbox__nav.is-prev {
	left: 16px;
}
.solo-estate-lightbox__nav.is-next {
	right: 16px;
}
.solo-estate-lightbox__count {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

/* Villa floors */
.solo-estate-vfloors {
	margin: 32px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--solo-estate-line);
}
.solo-estate-app .solo-estate-vfloors__title {
	margin: 0 0 12px;
	font-size: 1.25em;
}
.solo-estate-vfloor {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
	gap: 24px;
	align-items: start;
}
.solo-estate-vfloor__media {
	display: grid;
	gap: 8px;
}
@media (max-width: 800px) {
	.solo-estate-vfloor {
		grid-template-columns: 1fr;
	}
}

/* Commercial rows stand out a little in floor tables. */
.solo-estate-row--commercial th[scope="row"] {
	color: var(--solo-estate-accent);
}

/* Dropdowns: the open list follows the style (highlight colour for the hovered and chosen
   option) where the browser supports styling it (Chrome / Edge 135+); elsewhere it stays native. */
@supports (appearance: base-select) {
	.solo-estate-app select,
	.solo-estate-app .solo-estate-filter select,
	.solo-estate-app .solo-estate-floor-switch select,
	.solo-estate-app select::picker(select) {
		appearance: base-select;
	}
	.solo-estate-app select::picker-icon {
		display: none;
	}
	.solo-estate-app select::picker(select) {
		width: max-content;
		min-width: anchor-size(width);
		margin-top: 4px;
		padding: 4px;
		border: 1px solid var(--solo-estate-line);
		border-radius: var(--solo-estate-radius);
		background: var(--solo-estate-card);
		box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.25);
	}
	.solo-estate-app select option {
		min-height: 0;
		padding: 9px 12px;
		line-height: 1.35;
		white-space: nowrap;
		border-radius: calc(var(--solo-estate-radius) - 4px);
		color: var(--solo-estate-text);
	}
	.solo-estate-app select option::checkmark {
		display: none;
	}
	.solo-estate-app select option:hover,
	.solo-estate-app select option:focus-visible,
	.solo-estate-app select option:checked {
		background: var(--solo-estate-highlight);
		color: var(--solo-estate-text);
		outline: none;
	}
	.solo-estate-app select option:checked {
		font-weight: 600;
	}
}

/* Floor list: "Sold" badge with the reserved count next to it. */
.solo-estate-floor-list__counts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 2px 8px;
	text-align: right;
}
.solo-estate-floor-list__counts > span {
	white-space: nowrap;
}

/* Floor: the apartment list is as wide as its columns, the plan takes the rest. While the
   page scrolls the list follows (sticky) until its bottom meets the end of the plan; it never
   gets taller than the window and scrolls inside instead. Themes with a fixed header can move
   it down with --solo-estate-sticky-top. Stacked on small screens. */
.solo-estate-layout--floor {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
}
.solo-estate-layout--floor.solo-estate-layout--list {
	grid-template-columns: 1fr;
}
/* Both columns are sticky: only the shorter one moves (the taller one fills the row). */
.solo-estate-layout--floor > .solo-estate-layout__main,
.solo-estate-layout--floor > .solo-estate-layout__side {
	position: sticky;
	top: var(--solo-estate-sticky-top, 100px);
	align-self: start;
}
.solo-estate-layout--floor .solo-estate-layout__side {
	min-width: 260px;
	max-width: 460px;
}
.solo-estate-layout--floor .solo-estate-layout__side .solo-estate-table-wrap {
	max-height: calc(100vh - var(--solo-estate-sticky-top, 100px) - 64px);
	margin: 0;
	overflow: auto;
	border: 1px solid var(--solo-estate-line);
	border-radius: var(--solo-estate-radius);
}
.solo-estate-layout--floor .solo-estate-layout__side .solo-estate-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--solo-estate-card);
}
.solo-estate-layout--floor .solo-estate-layout__side .solo-estate-table td,
.solo-estate-layout--floor .solo-estate-layout__side .solo-estate-table th {
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
}
@media (max-width: 900px) {
	.solo-estate-layout--floor {
		grid-template-columns: 1fr;
	}
	.solo-estate-layout--floor > .solo-estate-layout__main,
	.solo-estate-layout--floor > .solo-estate-layout__side {
		position: static;
		max-width: none;
	}
	.solo-estate-layout--floor .solo-estate-layout__side .solo-estate-table-wrap {
		max-height: none;
	}
}

/* Heading above the floor plan and the apartment list. */
.solo-estate-app .solo-estate-section-title {
	margin: 8px 0 14px;
	padding: 0;
	color: var(--solo-estate-text);
	font-family: inherit;
	font-size: 1.3em;
	letter-spacing: normal;
	text-transform: none;
	font-weight: 700;
	line-height: 1.3;
}

/* Floor list: counts stay right-aligned, also when they wrap onto two lines. */
.solo-estate-floor-list a > span,
.solo-estate-floor-list .is-disabled > span {
	text-align: right;
}
/* Floor page: the plan gets the same frame as the apartment list next to it. */
.solo-estate-layout--floor .solo-estate-layout__main .solo-estate-stage {
	border: 1px solid var(--solo-estate-line);
	border-radius: var(--solo-estate-radius);
}

/* Building page: the floor list column is exactly as tall as the image beside it; the
   image sets the row height (the list adds none) and longer lists scroll inside. */
@media (min-width: 783px) {
	.solo-estate-layout:not(.solo-estate-layout--list):not(.solo-estate-layout--floor) {
		align-items: stretch;
	}
	.solo-estate-layout:not(.solo-estate-layout--list):not(.solo-estate-layout--floor) > .solo-estate-layout__side {
		position: relative;
		min-height: 240px;
	}
	.solo-estate-app .solo-estate-layout:not(.solo-estate-layout--list):not(.solo-estate-layout--floor) > .solo-estate-layout__side > .solo-estate-floor-list {
		position: absolute;
		inset: 0;
		max-height: none;
	}
}

/* Full screen: button in the image's top right corner, shown when the pointer is on the image
   (always on touch screens, icon only). The image with its polygons and tooltips fills the
   screen, as large as fits; .is-fullscreen-css covers the window where there is no
   Fullscreen API (iPhone). */
.solo-estate-app .solo-estate-fs {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 8px 14px 8px 11px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--solo-estate-text);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.18s, transform 0.18s, background-color 0.15s, color 0.15s;
}
.solo-estate-stage:hover .solo-estate-fs,
.solo-estate-app .solo-estate-fs:focus-visible,
.solo-estate-stage.is-fullscreen .solo-estate-fs {
	opacity: 1;
	transform: none;
}
@media (hover: hover) {
	.solo-estate-app .solo-estate-fs:hover {
		background: var(--solo-estate-accent);
		color: var(--solo-estate-on-accent);
	}
}
.solo-estate-app .solo-estate-fs:focus-visible {
	outline: 2px solid var(--solo-estate-highlight);
	outline-offset: 2px;
}
.solo-estate-fs__on,
.solo-estate-fs__off {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.solo-estate-fs svg {
	flex: none;
	width: 18px;
	height: 18px;
}
.solo-estate-fs__off,
.solo-estate-stage.is-fullscreen .solo-estate-fs__on {
	display: none;
}
.solo-estate-stage.is-fullscreen .solo-estate-fs__off {
	display: inline-flex;
}
@media (hover: none) {
	.solo-estate-app .solo-estate-fs {
		top: 8px;
		right: 8px;
		padding: 9px;
		opacity: 1;
		transform: none;
	}
	.solo-estate-app .solo-estate-stage.is-fullscreen .solo-estate-fs {
		padding: 9px 14px 9px 11px;
	}
	.solo-estate-fs__on .solo-estate-fs__text {
		/* Icon only on touch screens, but the button keeps its name for screen readers. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}
.solo-estate-app .solo-estate-stage.is-fullscreen {
	--solo-estate-fs-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #121614;
}
@supports (height: 100dvh) {
	.solo-estate-app .solo-estate-stage.is-fullscreen {
		--solo-estate-fs-height: 100dvh;
	}
}
.solo-estate-app .solo-estate-stage.is-fullscreen-css {
	position: fixed;
	inset: 0;
	z-index: 99999;
	height: var(--solo-estate-fs-height);
}
.solo-estate-stage.is-fullscreen .solo-estate-stage__frame {
	flex: none;
	width: min(100% - 32px, (var(--solo-estate-fs-height) - 32px) * var(--solo-estate-ratio, 1.5));
}
.solo-estate-app .solo-estate-stage.is-fullscreen .solo-estate-stage__img {
	border-radius: 4px;
}
/* Windows opened from the image (info, photos) live inside it on full screen. */
.solo-estate-stage .solo-estate-lightbox {
	line-height: 1.5;
}