:root {
	--page-bg: #f1efe6;
	--panel-bg: #fcfcfa;
	--panel-border: #83838336;
	--panel-muted: #5d7187;
	--accent: #3288ff;
	--floorplan-bg: #f6e8f3;
	--floorplan-border: #dcceeb;
	--camera-bg: rgba(31, 111, 235, 0.15);
	--camera-border: #3288ff;
	--details-bg: #cdeaf6;
	--accent-fg: #ffffff;
}

body.bg-body {
	background-color: var(--page-bg) !important;
}

body {
	font-family: "Quattrocento Sans", sans-serif;
}

footer {
	text-align: right;
}

h1,
h2,
h3,
h4 {
	font-family: "Oswald", sans-serif;
	font-weight: 400 !important;
}

.text-right {
	text-align: right;
}

.link-icon {
	width: 14px;
	height: 14px;
}

/* .house-container {
    max-width: 1700px;
} */

.logo {
	max-width: 100%;
	height: 5em;
	width: auto;
	border-radius: 8px;
}

.panel-body {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 16px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	/* height: 100%; */
}

.text-muted {
	color: var(--panel-muted) !important;
}

.house-details {
	background: var(--details-bg);
	border-radius: 10px;
	padding: 10px 12px;
	border: 1px solid var(--panel-border);
}

.house-photo-preview {
	/* border: 1px dashed var(--panel-border); */
	border-radius: 10px;
	/* padding: 8px;
    text-align: center;
    background: #141821; */
	position: relative;
}

.house-photo-preview img {
	max-width: 100%;
	border-radius: 8px;
	display: block;
}

.house-gallery-button {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #ff8f32;
	border: 1px solid #da7826;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 160ms ease;
}

.house-gallery-button:hover {
	opacity: 0.8;
}

.house-gallery-button i {
	width: 18px;
	height: 18px;
}

.house-video-button {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: #cb0505;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 160ms ease;
}

.house-video-button:hover {
	opacity: 0.8;
}

.house-video-button i {
	width: 18px;
	height: 18px;
}

.floorplan-shell {
	position: relative;
}

.floorplan-wrapper {
	border: 1px dashed var(--floorplan-border);
	border-radius: 12px;
	min-height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: auto;
	background: var(--floorplan-bg);
	cursor: grab;
}

.floorplan-wrapper img {
	max-width: 100%;
	height: auto;
	display: block;
}

.floorplan-inner {
	position: relative;
	display: inline-block;
	transform-origin: top left;
	touch-action: none;
}

.floorplan-wrapper.zoomed-2 .floorplan-inner {
	transform: scale(2);
}

.floorplan-wrapper.zoomed-3 .floorplan-inner {
	transform: scale(3);
}

.floorplan-wrapper.is-panning {
	cursor: grabbing;
}

.floorplan-wrapper {
	cursor: grab;
}

.floorplan-zoom {
	display: flex;
	gap: 8px;
}

.btn {
	display: inline-flex !important;
	flex-direction: row !important;
	align-content: center !important;
	justify-content: center !important;
	align-items: center !important;
}

.floorplan-zoom .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
}

.floorplan-zoom .btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.floorplan-overlay {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	gap: 8px;
	pointer-events: auto;
	z-index: 6;
}

.room-camera {
	position: absolute;
	width: 18px;
	height: 18px;
	padding: 2px;
	border-radius: 50%;
	background: #ff8f32;
	border: 1px solid #da7826;
	color: var(--accent-fg);
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease,
		transform 160ms ease;
}

.room-camera i {
	width: 16px;
	height: 16px;
}

.room-camera:hover {
	background: var(--bs-link-hover-color);
	border-color: var(--accent);
	/* color: var(--accent); */
	transform: translate(-50%, -50%) scale(1.05);
}

.fancybox__backdrop {
	background: rgb(24 24 27 / 85%) !important;
	backdrop-filter: blur(4px);
}

.floors-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.floors-row .floor-pill {
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 6px 12px;
	border-radius: 999px;
}

.floors-row .floor-pill.active {
	background: var(--accent);
	color: var(--accent-fg);
	border-color: var(--panel-border);
}

.fancybox-room-title {
	font-weight: 600;
	color: #e7e7ee;
	font-size: 1rem;
	text-align: center;
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 12px;
	background: rgba(15, 17, 21, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	z-index: 9999;
}

@media (max-width: 576px) {
	.floorplan-zoom .btn,
	.floorplan-overlay .btn {
		width: 30px;
		height: 30px;
		border-radius: 8px;
		padding: 4px;
	}

	.room-camera {
		width: 10px;
		height: 10px;
		padding: 1px;
	}

	.logo {
		height: 3em;
	}

	footer {
		text-align: center;
	}
}