/**
 * WLRE Theme — Shared Empty State (Batch 11).
 *
 * One component for every empty state in the app:
 *   .wlre-empty--card   centered cream card with white icon badge + filled CTA
 *                       (Figma 6118-231081 / 6118-231424 — saved-properties &
 *                       saved-searches pages)
 *   .wlre-empty--page   centered vertical layout, accent icon tint
 *                       used on /404/ and the search-no-results page
 */

.wlre-empty {
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-lg);
}

/* === Card variant — centered, cream surface, dark icon, teal CTA === */
.wlre-empty--card {
	background: var(--wlre-color-surface-50);
	border-radius: var(--wlre-radius-20);
	box-shadow: none;
	padding: 56px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}

.wlre-empty--card .wlre-empty__art {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	border-radius: 50%;
}

.wlre-empty--card .wlre-empty__art svg {
	width: 32px;
	height: 32px;
}

.wlre-empty--card .wlre-empty__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 420px;
}

.wlre-empty--card .wlre-empty__title {
	font-family: var(--wlre-font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-empty--card .wlre-empty__body {
	font-family: var(--wlre-font-body);
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-empty--card .wlre-btn {
	flex-shrink: 0;
	min-height: 52px;
	border-radius: var(--wlre-radius-md);
	padding-inline: var(--wlre-space-32);
	margin-top: var(--wlre-space-8);
}

@media (max-width: 767px) {
	.wlre-empty--card {
		padding: 40px 24px;
		gap: 20px;
	}
	.wlre-empty--card .wlre-empty__art {
		width: 72px;
		height: 72px;
	}
	.wlre-empty--card .wlre-empty__art svg {
		width: 28px;
		height: 28px;
	}
	.wlre-empty--card .wlre-empty__title {
		font-size: 20px;
	}
	.wlre-empty--card .wlre-empty__body {
		font-size: 15px;
	}
}

/* === Vertical centering on saved-properties + saved-searches pages ====
 * When the page has no items, fill the available viewport space and
 * center the cream card vertically. Subtracts a rough sum of header +
 * breadcrumb + nav-switcher + title heights so the card sits in the
 * actual middle of the page rather than off-screen. */
.wlre-saved__empty,
.wlre-saved-searches__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(360px, calc(100vh - 360px), 720px);
}

/* The explicit display:flex above overrides the UA [hidden] rule — restore it. */
.wlre-saved__empty[hidden],
.wlre-saved-searches__empty[hidden] {
	display: none;
}

.wlre-saved__empty > .wlre-empty,
.wlre-saved-searches__empty > .wlre-empty {
	width: 100%;
	max-width: 720px;
}

/* === Page variant — full-page empty (404, search no-results) === */
.wlre-empty--page {
	background: transparent;
	box-shadow: none;
	padding: 96px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* The .wlre-empty__copy wrapper is for horizontal card layouts; in the
   page variant we want title + body to be direct flex children of the
   centered column. display:contents flattens it out of the layout tree. */
.wlre-empty--page .wlre-empty__copy {
	display: contents;
}

.wlre-empty--page .wlre-empty__art {
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(54, 222, 164, 0.15);
	color: var(--wlre-color-accent-500);
	border-radius: 50%;
	flex-shrink: 0;
}

.wlre-empty--page .wlre-empty__art svg {
	width: 32px;
	height: 32px;
}

.wlre-empty--page .wlre-empty__title {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0 0 12px;
}

.wlre-empty--page .wlre-empty__body {
	font-family: var(--wlre-font-body);
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600);
	margin: 0 0 24px;
	max-width: 480px;
}

@media (max-width: 767px) {
	.wlre-empty--page {
		padding: 72px 20px;
	}
	.wlre-empty--page .wlre-empty__title {
		font-size: 22px;
	}
}