/* Qobrix Property Sync front-end styles.
   Colours are CSS variables so a theme can override them without editing the plugin. */

:root {
	--qbx-accent: #2f8bff;
	--qbx-accent-contrast: #ffffff;
	--qbx-muted: #667085;
	--qbx-border: rgba(0, 0, 0, .1);
	--qbx-radius: 8px;
	--qbx-gap: 14px;
}

/* Amenities icon list */

.qbx-amenities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--qbx-gap);
	grid-template-columns: repeat(var(--qbx-amenities-cols, 1), minmax(0, 1fr));
}

.qbx-amenities__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	line-height: 1.4;
}

.qbx-amenities__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: .1em;
	color: var(--qbx-accent);
}

.qbx-amenities__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.qbx-amenities__label {
	flex: 1 1 auto;
}

@media (max-width: 767px) {
	.qbx-amenities {
		grid-template-columns: repeat(var(--qbx-amenities-cols-mobile, 1), minmax(0, 1fr));
	}
}

/* Floor plans */

.qbx-plans {
	display: grid;
	gap: var(--qbx-gap);
	grid-template-columns: repeat(var(--qbx-plans-cols, 2), minmax(0, 1fr));
}

.qbx-plans__item {
	margin: 0;
	border: 1px solid var(--qbx-border);
	border-radius: var(--qbx-radius);
	overflow: hidden;
	background: #fff;
}

.qbx-plans__link {
	display: block;
	line-height: 0;
}

.qbx-plans__item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	background: #fff;
}

.qbx-plans__caption {
	padding: 10px 14px;
	font-size: .875em;
	color: var(--qbx-muted);
}

@media (max-width: 767px) {
	.qbx-plans {
		grid-template-columns: 1fr;
	}
}

/* Map */

.qbx-map {
	position: relative;
	border-radius: var(--qbx-radius);
	overflow: hidden;
}

.qbx-map__canvas {
	width: 100%;
	background: #e9edf2;
}

.qbx-map iframe {
	display: block;
	width: 100%;
	border: 0;
}

.qbx-map__note {
	margin: 8px 0 0;
	font-size: .8125em;
	color: var(--qbx-muted);
}

.qbx-map .leaflet-container {
	font: inherit;
}

.qbx-map--hidden {
	display: none;
}

/* Viewing request form and brochure buttons, added in 1.4.0.
   Kept deliberately plain so Elementor's own styling can take over. */

.qbx-form {
	display: grid;
	gap: var(--qbx-gap);
}

.qbx-form__title {
	margin: 0;
}

.qbx-form__row--split {
	display: grid;
	gap: var(--qbx-gap);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.qbx-form__field {
	display: grid;
	gap: 6px;
}

.qbx-form__field span {
	color: var(--qbx-muted);
	font-size: .875em;
}

.qbx-form__field input,
.qbx-form__field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--qbx-border);
	border-radius: var(--qbx-radius);
	font: inherit;
	color: var(--qbx-text);
	background: transparent;
}

.qbx-form__field input:focus-visible,
.qbx-form__field textarea:focus-visible {
	outline: 2px solid var(--qbx-accent);
	outline-offset: 1px;
}

.qbx-form__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .875em;
	color: var(--qbx-muted);
}

/* Honeypot. Hidden without display:none, which some bots detect. */
.qbx-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qbx-form__submit {
	justify-self: start;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--qbx-radius);
	background: var(--qbx-accent);
	color: var(--qbx-accent-contrast);
	font: inherit;
	cursor: pointer;
}

.qbx-form__submit[disabled] {
	opacity: .6;
	cursor: progress;
}

.qbx-form__message:empty {
	display: none;
}

.qbx-form__message {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--qbx-radius);
	font-size: .9em;
}

.qbx-form__message.is-success {
	background: rgba(47, 139, 255, .1);
	color: var(--qbx-text);
}

.qbx-form__message.is-error {
	background: rgba(200, 40, 40, .1);
	color: #a02020;
}

.qbx-form.is-sent .qbx-form__submit {
	display: none;
}

/* Brochures */

.qbx-brochures__title {
	margin: 0 0 var(--qbx-gap);
}

.qbx-brochures__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.qbx-brochures__link {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--qbx-accent);
	border-radius: var(--qbx-radius);
	color: var(--qbx-accent);
	text-decoration: none;
}

.qbx-brochures__link:hover,
.qbx-brochures__link:focus-visible {
	background: var(--qbx-accent);
	color: var(--qbx-accent-contrast);
}

/* Brochure cards, added in 1.5.0. The button row from 1.4.x is unchanged
   above and still used by style="buttons". */

.qbx-brochures__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--qbx-gap);
}

.qbx-brochure__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--qbx-border);
	border-radius: var(--qbx-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: transparent;
	transition: border-color .2s, transform .2s;
}

.qbx-brochure__link:hover,
.qbx-brochure__link:focus-visible {
	border-color: var(--qbx-accent);
	transform: translateY(-2px);
}

.qbx-brochure__preview {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: #f2f2f2;
	padding: 14px 14px 0;
}

/* The preview is sized by height, not width. Both brochure pages are A4
   portrait, so 300px tall lands around 212px wide and every card matches
   whatever its column width happens to be. */
.qbx-brochure__img,
.qbx-wire {
	display: block;
	height: 300px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: 3px 3px 0 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}

/* Wireframe fill colours. Deliberately muted so the real thumbnail, when it
   arrives, is clearly the richer of the two. */
.qbx-wire__page  { fill: #fff; stroke: #d8d8d8; stroke-width: .5; }
.qbx-wire__photo { fill: #c3d9ee; }
.qbx-wire__thumb { fill: #dcdcdc; }
.qbx-wire__brand { fill: var(--qbx-accent); }
.qbx-wire__dark  { fill: #16334d; }
.qbx-wire__line  { fill: #dcdcdc; }
.qbx-wire__spec  { fill: #bdbdbd; }
.qbx-wire__plan  { fill: none; stroke: #a8a8a8; stroke-width: .5; }

.qbx-brochure__body {
	display: block;
	padding: 12px 14px 14px;
}

.qbx-brochure__label {
	display: block;
	font-weight: 700;
	line-height: 1.3;
}

.qbx-brochure__note {
	display: block;
	margin-top: 4px;
	font-size: .875em;
	color: var(--qbx-muted);
	line-height: 1.45;
}

.qbx-brochure__meta {
	display: block;
	margin-top: 8px;
	font-size: .8em;
	color: var(--qbx-muted);
}

/* Narrow columns: keep the card vertical but let the preview shrink with it
   rather than overflowing. */
@media (max-width: 900px) {
	.qbx-brochures__grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

/* Phones: one per row, laid out as a strip so three brochures do not cost
   three screens of scrolling. The page sits upright on the left at a size
   that still reads as a document. */
@media (max-width: 600px) {
	.qbx-brochures__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.qbx-brochure__link {
		flex-direction: row;
		align-items: stretch;
	}

	.qbx-brochure__preview {
		flex: 0 0 auto;
		align-items: center;
		padding: 10px;
	}

	.qbx-brochure__img,
	.qbx-wire {
		height: 132px;
		border-radius: 2px;
	}

	.qbx-brochure__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10px 14px 10px 4px;
	}

	.qbx-brochure__note {
		margin-top: 2px;
	}

	.qbx-brochure__meta {
		margin-top: 6px;
	}
}

/* Brochure download progress, added in 1.5.1. */

.qbx-brochure__link.is-loading,
.qbx-brochures__link.is-loading {
	pointer-events: none;
	opacity: .75;
}

.qbx-brochure__link.is-loading .qbx-brochure__preview {
	position: relative;
}

.qbx-brochure__link.is-loading .qbx-brochure__preview::after,
.qbx-brochures__link.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid rgba(0, 0, 0, .15);
	border-top-color: var(--qbx-accent);
	border-radius: 50%;
	animation: qbx-spin .7s linear infinite;
}

.qbx-brochures__link.is-loading {
	position: relative;
	color: transparent;
}

.qbx-brochure__link.is-loading .qbx-brochure__meta::after {
	content: " – preparing…";
}

@keyframes qbx-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.qbx-brochure__link.is-loading .qbx-brochure__preview::after,
	.qbx-brochures__link.is-loading::after {
		animation-duration: 2s;
	}
}

/* Phone-sized spinner. Must come after the base spinner rule above, since
   both selectors carry the same specificity and the later one wins. */
@media (max-width: 600px) {
	.qbx-brochure__link.is-loading .qbx-brochure__preview::after {
		width: 20px;
		height: 20px;
		margin: -10px 0 0 -10px;
	}
}

/* Preview modes and the success dialog, added in 1.6.0. */

/* Placeholder shown while a real page image is still rendering. Deliberately
   not the wireframe, so choosing "cached image" never briefly looks like
   choosing "drawing". */
.qbx-brochure__skeleton {
	display: block;
	width: 212px;
	max-width: 100%;
	height: 300px;
	background: #fff;
	border-radius: 3px 3px 0 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
	position: relative;
	overflow: hidden;
}

.qbx-brochure__skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(0, 0, 0, .05) 50%, transparent 80%);
	animation: qbx-sheen 1.4s ease-in-out infinite;
}

@keyframes qbx-sheen {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.qbx-brochure__skeleton::after { animation: none; }
}

/* No preview: compact rows rather than tall empty cards. */
.qbx-brochures--none .qbx-brochures__grid {
	grid-template-columns: 1fr;
	gap: 8px;
}

.qbx-brochures--none .qbx-brochure__link {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.qbx-brochures--none .qbx-brochure__body {
	padding: 12px 16px;
}

.qbx-brochures--none .qbx-brochure__meta {
	margin-top: 4px;
}

@media (max-width: 600px) {
	.qbx-brochure__skeleton {
		width: 93px;
		height: 132px;
	}
}

/* Built-in success dialog, used when no Elementor popup is chosen. */

.qbx-done {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .71);
	animation: qbx-fade .2s ease-out;
}

.qbx-done__box {
	background: #fff;
	border-radius: 16px;
	padding: 48px 40px 40px;
	max-width: 480px;
	width: 100%;
	text-align: center;
	animation: qbx-rise .3s ease-out;
}

.qbx-done__mark {
	width: 84px;
	height: 84px;
	margin: 0 auto 28px;
	border: 4px solid var(--qbx-accent);
	border-radius: 50%;
	position: relative;
}

/* Tick drawn from two borders on a rotated box, so there is no icon font or
   extra request for one glyph. */
.qbx-done__mark::after {
	content: "";
	position: absolute;
	top: 20px;
	left: 27px;
	width: 24px;
	height: 40px;
	border: solid var(--qbx-accent);
	border-width: 0 5px 5px 0;
	transform: rotate(45deg);
}

.qbx-done__title {
	margin: 0 0 12px;
	font-size: 1.6em;
	line-height: 1.2;
}

.qbx-done__text {
	margin: 0 0 32px;
	color: var(--qbx-muted);
	line-height: 1.5;
}

.qbx-done__button {
	min-width: 240px;
	padding: 16px 40px;
	border: 0;
	border-radius: 6px;
	background: var(--qbx-accent);
	color: var(--qbx-accent-contrast);
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.qbx-done__button:hover,
.qbx-done__button:focus-visible {
	filter: brightness(.94);
}

@keyframes qbx-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes qbx-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.qbx-done,
	.qbx-done__box { animation: none; }
}

@media (max-width: 600px) {
	.qbx-done__box {
		padding: 36px 24px 28px;
	}

	.qbx-done__mark {
		width: 68px;
		height: 68px;
		margin-bottom: 20px;
	}

	.qbx-done__mark::after {
		top: 15px;
		left: 21px;
		width: 20px;
		height: 33px;
		border-width: 0 4px 4px 0;
	}

	.qbx-done__button {
		width: 100%;
		min-width: 0;
	}
}