/**
 * WLRE Theme — Shared modal primitive.
 *
 * Extends the <dialog> pattern already used by .wlre-confirm-dialog
 * (smaller confirmation/rename/delete dialogs) with a larger shell for
 * multi-field forms like Request-a-Visit (Figma 6082-36363).
 *
 * Anatomy:
 *   .wlre-modal                     native <dialog>, 800px max
 *   .wlre-modal__inner              scroll container
 *   .wlre-modal__close              top-right X button
 *   .wlre-modal__title              centered h2
 *   .wlre-modal__body               form content
 *   .wlre-modal__actions            bottom row (right-aligned)
 *
 * JS: assets/js/modals.js (open/close helpers that also sync
 * aria-expanded on the trigger button).
 */

.wlre-modal {
	border: none;
	padding: 0;
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	border-radius: var(--wlre-radius-20);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
	max-width: 800px;
	width: calc(100% - 32px);
	max-height: calc(100vh - 64px);
	overflow: hidden;
	margin: auto;
}

.wlre-modal::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.wlre-modal__inner {
	padding: var(--wlre-space-40);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}

.wlre-modal__close {
	position: absolute;
	top: var(--wlre-space-16);
	right: var(--wlre-space-16);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wlre-color-white);
	border: 1px solid var(--wlre-color-neutral-200);
	border-radius: 50%;
	color: var(--wlre-color-text-900);
	cursor: pointer;
	transition: background 0.15s ease;
	z-index: 2;
}

.wlre-modal__close:hover {
	background: var(--wlre-color-surface-50);
}

.wlre-modal__close svg {
	width: 16px;
	height: 16px;
}

.wlre-modal__title {
	text-align: center;
	margin: 0 0 var(--wlre-space-24);
	color: var(--wlre-color-text-900);
}

.wlre-modal__body {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-24);
}

.wlre-modal__section {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-16);
}

.wlre-modal__section-title {
	margin: 0;
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.28;
}

.wlre-modal__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wlre-space-12);
	margin-top: var(--wlre-space-8);
}

/* === Bottom-sheet variant (Figma 6118-223058 + every mobile dialog) ====
 *
 * A `<dialog>` with class `wlre-modal--sheet` (or `wlre-confirm-dialog--sheet`)
 * renders as a full-width bottom sheet on mobile instead of a centered
 * card. Structure:
 *   <dialog class="wlre-modal wlre-modal--sheet">
 *     <div class="wlre-modal__grabber" aria-hidden="true"></div>
 *     <div class="wlre-modal__inner">
 *       <h2 class="wlre-modal__title">…</h2>
 *       <div class="wlre-modal__body">…</div>
 *     </div>
 *     <div class="wlre-modal__actions wlre-modal__actions--sticky">
 *       <button>Cancel</button><button>Confirm</button>
 *     </div>
 *   </dialog>
 *
 * The grabber is a 60x6 pill at the top; the sticky actions sit behind a
 * top-shadow and are padded 32px from bottom to clear iOS safe areas. */
@media (max-width: 767px) {
	.wlre-modal--sheet {
		max-width: 100%;
		width: 100%;
		height: 90vh;
		max-height: 90vh;
		margin: 0 auto;
		position: fixed;
		inset-block-end: 0;
		inset-block-start: auto;
		border-radius: var(--wlre-radius-20) var(--wlre-radius-20) 0 0;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
		/* Do NOT set display here — dialog[open] controls its own display:block.
		   Setting display on the closed dialog would override the UA display:none
		   and make it always visible on the page. */
		padding: 0;
	}

	/* Only apply flex column layout when the dialog is actually open. */
	.wlre-modal--sheet[open] {
		display: flex;
		flex-direction: column;
	}

	.wlre-modal--sheet::backdrop {
		/* Deeper navy scrim per Figma 6113-117556 — 96% opacity on brand-900. */
		background: rgba(10, 36, 56, 0.96);
	}

	.wlre-modal__grabber {
		flex-shrink: 0;
		width: 60px;
		height: 6px;
		margin: var(--wlre-space-12) auto;
		background: var(--wlre-color-neutral-400);
		border-radius: 20px;
	}

	.wlre-modal--sheet .wlre-modal__inner {
		padding: var(--wlre-space-16);
		padding-block-end: var(--wlre-space-24);
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	/* Sticky footer with top-shadow separator (Figma `0 -4px 7px -1px rgba(99,99,99,0.04)`). */
	.wlre-modal__actions--sticky {
		flex-shrink: 0;
		display: flex;
		gap: var(--wlre-space-12);
		padding: var(--wlre-space-8) var(--wlre-space-16) calc(var(--wlre-space-32) + env(safe-area-inset-bottom, 0));
		background: var(--wlre-color-white);
		box-shadow: 0 -4px 7px -1px rgba(99, 99, 99, 0.04);
		margin-top: 0;
	}

	.wlre-modal--sheet .wlre-modal__actions--sticky > .wlre-btn {
		flex: 1 1 0;
		min-width: 0;
		height: 56px;
	}

	.wlre-modal--sheet .wlre-modal__close {
		display: none; /* grabber + scrim tap both dismiss; no corner X on sheet. */
	}

	.wlre-modal--sheet .wlre-modal__title {
		font-size: var(--wlre-font-size-h4);
		text-align: start;
		margin-bottom: var(--wlre-space-16);
	}
}

/* Desktop: the `--sheet` modifier degrades to a normal centered modal so the
 * same dialog markup works at both breakpoints. Override actions to remain
 * right-aligned on desktop (no flex:1 sticky footer). */
@media (min-width: 768px) {
	.wlre-modal--sheet .wlre-modal__grabber {
		display: none;
	}
	.wlre-modal--sheet .wlre-modal__actions--sticky {
		justify-content: flex-end;
		box-shadow: none;
	}
}

/* Responsive: tighter padding + full-width buttons on phones (non-sheet modals). */
@media (max-width: 639px) {
	.wlre-modal:not(.wlre-modal--sheet) {
		max-width: calc(100% - 24px);
		border-radius: var(--wlre-radius-lg);
	}
	.wlre-modal:not(.wlre-modal--sheet) .wlre-modal__inner {
		padding: var(--wlre-space-24);
	}
	.wlre-modal:not(.wlre-modal--sheet) .wlre-modal__actions:not(.wlre-modal__actions--sticky) {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.wlre-modal:not(.wlre-modal--sheet) .wlre-modal__actions:not(.wlre-modal__actions--sticky) .wlre-btn {
		width: 100%;
	}
}

/* ==========================================================================
 * Visit-request modal — Figma 6722:460658
 * Day-picker: cream container, teal-header cards, 40px circle chevrons.
 * ========================================================================== */

.wlre-modal__visit-topbar {
	display: none;
}

.wlre-modal--visit .wlre-modal__inner {
	padding: 24px 32px;
}

.wlre-modal--visit .wlre-modal__title {
	text-align: center;
	font-size: 22px;
	margin-bottom: 12px;
}

.wlre-modal--visit .wlre-modal__body {
	gap: 12px;
}
.wlre-modal--visit .wlre-form__group {
	margin-bottom: 8px;
}
.wlre-modal--visit .wlre-form__checkbox {
	margin-bottom: 0;
}

/* Cream outer container holding the chevrons + card grid */
.wlre-day-picker {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #FAF8F4;
	border-radius: 12px;
	padding: 12px;
	border: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.wlre-day-picker--error {
	border-color: var(--wlre-color-error-700, #95231F);
}

/* 40×40 white circle chevrons */
.wlre-day-picker__chevron {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0.5px solid #D0D0D0;
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}
.wlre-day-picker__chevron:hover {
	background: var(--wlre-color-surface-50);
}
.wlre-day-picker__chevron:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.wlre-day-picker__chevron svg {
	width: 18px;
	height: 18px;
}

/* 4-column equal grid */
.wlre-day-picker__chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	flex: 1;
}

/* Card — teal header section on top, white body below */
.wlre-day-picker__chip {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	border: 0.5px solid #D0D0D0;
	background: var(--wlre-color-white);
	border-radius: 12px;
	cursor: pointer;
	overflow: hidden;
	font-family: var(--wlre-font-body);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.wlre-day-picker__chip:hover {
	border-color: var(--wlre-color-accent-500);
}
.wlre-day-picker__chip.is-active {
	background: #F3FAF4;
	border: 3px solid #008D84;
}
.wlre-day-picker__chip.is-closed,
.wlre-day-picker__chip.is-closed:hover {
	opacity: 0.38;
	cursor: not-allowed;
	border-color: #D0D0D0;
}
.wlre-day-picker__chip.is-closed .wlre-day-picker__chip-header {
	background: #C8C8C8;
}

/* Teal header — always teal on every card (not state-dependent) */
.wlre-day-picker__chip-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 8px;
	background: var(--wlre-color-accent-500);
}

.wlre-day-picker__chip-month {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	text-transform: uppercase;
}

/* White body — large day number + weekday name */
.wlre-day-picker__chip-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 8px 16px;
	flex: 1;
	text-align: center;
}

.wlre-day-picker__chip-day {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
}

.wlre-day-picker__chip-weekday {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.48;
	color: #666;
}

/* Info banner — blue per Figma 6090:54458 */
.wlre-modal__info-banner {
	margin: 0;
	padding: 12px 16px 12px 20px;
	border-inline-start: 4px solid #0068B8;
	background: #E6F2FF;
	color: #0068B8;
	font-size: 13px;
	line-height: 1.5;
	border-radius: var(--wlre-radius-sm, 12px);
}

.wlre-modal__info-banner strong {
	font-weight: 700;
	color: #0068B8;
}

/* Email + Phone side-by-side row */
.wlre-modal__two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wlre-space-16);
}

/* Mobile sticky footer: equal-width buttons, reset form__submit defaults */
@media (max-width: 767px) {
	.wlre-modal--visit .wlre-modal__actions--sticky > .wlre-btn {
		flex: 1 1 0;
		min-width: 0;
		height: 56px;
		width: auto;
		max-width: none;
		margin: 0;
	}
}

/* Desktop: centred auto-sized buttons with bottom padding */
@media (min-width: 768px) {
	.wlre-modal--visit .wlre-modal__actions--sticky {
		justify-content: center;
		padding-bottom: var(--wlre-space-24);
	}
	.wlre-modal--visit .wlre-modal__actions--sticky > .wlre-btn {
		flex: 0 0 auto;
		height: 48px;
		width: auto;
		max-width: none;
		margin: 0;
	}
}

@media (max-width: 639px) {
	/* Hide chevrons — mobile uses scroll instead */
	.wlre-day-picker__chevron {
		display: none;
	}

	/* Scrollable horizontal card row */
	.wlre-day-picker {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px;
		padding: 12px;
	}
	.wlre-day-picker::-webkit-scrollbar {
		display: none;
	}

	.wlre-day-picker__chips {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		flex: none;
		width: auto;
		scroll-snap-type: x mandatory;
	}

	.wlre-day-picker__chip {
		flex: 0 0 100px;
		scroll-snap-align: start;
	}

	.wlre-modal__two-col {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
 * Visit modal — backdrop-level close button (matches profile password modal)
 * On desktop: dialog becomes full-viewport transparent; __visit-shell is the
 * white card. On mobile: __visit-shell uses display:contents so the existing
 * bottom-sheet flex layout is unaffected.
 * ========================================================================== */

/* Shared backdrop-close button styles (mirrors wlre-confirm-dialog__close-btn). */
.wlre-modal__backdrop-close {
	position: absolute;
	top: 52px;
	right: 50px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wlre-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wlre-color-white);
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(8.727px);
	backdrop-filter: blur(8.727px);
	border: none;
	border-radius: 13px;
	padding: 12px 20px;
	cursor: pointer;
	z-index: 10;
	transition: background 0.15s;
}
.wlre-modal__backdrop-close:hover {
	background: rgba(255, 255, 255, 0.22);
}
.wlre-modal__backdrop-close svg {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

/* Mobile: collapse the shell (existing sheet layout handles everything). */
@media (max-width: 767px) {
	.wlre-modal--visit .wlre-modal__visit-shell {
		display: contents;
	}
	.wlre-modal--visit .wlre-modal__backdrop-close {
		display: none;
	}
}

/* Desktop: full-viewport transparent dialog + centred white card shell. */
@media (min-width: 768px) {
	.wlre-modal--visit[open] {
		position: fixed;
		inset: 0;
		max-width: 100%;
		width: 100%;
		height: 100%;
		max-height: 100%;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wlre-modal--visit::backdrop {
		background: rgba(10, 36, 56, 0.96);
	}
	.wlre-modal--visit .wlre-modal__visit-shell {
		background: var(--wlre-color-white);
		border-radius: var(--wlre-radius-20);
		box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
		width: 800px;
		max-width: calc(100% - 32px);
		max-height: calc(100vh - 128px);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.wlre-modal--visit .wlre-modal__inner {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		overflow-y: auto;
	}
}

/* ==========================================================================
 * Service modal — Chi vende, Figma 6640:298726
 * ========================================================================== */

.wlre-modal--service-figma {
	width: min(1240px, calc(100vw - 200px));
	max-width: 1240px;
	max-height: calc(100vh - 191px);
	/* margin: auto activates the native <dialog> auto-centering for both
	 * axes — the previous clamp() top margin pinned the panel to the top
	 * of the viewport with a huge gap below it. */
	margin: auto;
	background: transparent;
	border-radius: var(--wlre-radius-20);
	box-shadow: none;
	overflow: visible;
}

.wlre-modal--service-figma::backdrop {
	background: rgba(10, 36, 56, 0.72);
}

.wlre-modal--service-figma .wlre-modal__service-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	width: 100%;
	max-height: min(826px, calc(100vh - 191px));
	padding: 0;
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-20);
	box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
	overflow: hidden;
}

.wlre-modal__service-media {
	min-height: min(826px, calc(100vh - 191px));
	background-image: url("../images/figma/service-modal-sellers.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Per-modal cover image overrides — figma-extracted assets, see
 * patterns/service-modal-*.php for the source nodes. The four service
 * CTA modals reuse the same imagery as their home-page CTA cards. */
.wlre-modal__service-media--buyers {
	background-image: url("../images/figma/service-modal-buyers.webp");
}

.wlre-modal__service-media--sell-better {
	background-image: url("../images/figma/cta-sell-better-modal.webp");
}

.wlre-modal__service-media--documentation {
	background-image: url("../images/figma/cta-documentation-modal.webp");
}

.wlre-modal__service-media--mortgage-support {
	background-image: url("../images/figma/cta-mortgage-support-modal.webp");
}

.wlre-modal__service-media--investment {
	background-image: url("../images/figma/cta-investment-modal.webp");
}

/* === Service-modal bullets + result box (Figma 6640:302201..302519) =====
 * The four service CTA modals (sell-better, documentation, mortgage-
 * support, investment) use a checkmark-bullet body instead of the
 * titled blocks used by sellers/buyers. Capped at the right-column's
 * 524px text width inside the figma shell. */
.wlre-modal--service-figma .wlre-modal__bullets {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-16);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlre-modal--service-figma .wlre-modal__bullet {
	display: flex;
	align-items: flex-start;
	gap: var(--wlre-space-12);
	color: var(--wlre-color-text-900);
}

.wlre-modal--service-figma .wlre-modal__bullet-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--wlre-color-teal-700, #008d84);
}

.wlre-modal--service-figma .wlre-modal__bullet-icon svg {
	width: 100%;
	height: 100%;
}

.wlre-modal--service-figma .wlre-modal__bullet-text {
	flex: 1;
	margin: 0;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: var(--wlre-line-height-body);
	color: inherit;
}

/* The "Il risultato? ..." callout at the bottom of each service modal,
 * with a teal accent emphasis on the closing phrase. */
.wlre-modal--service-figma .wlre-modal__result {
	width: 100%;
	margin: 0;
	padding: var(--wlre-space-20) var(--wlre-space-20);
	background: #f5f5f5;
	border-radius: var(--wlre-radius-md);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-text-900);
}


.wlre-modal--service-figma .wlre-modal__result-accent {
	color: var(--wlre-color-teal-700, #008d84);
}

.wlre-modal__service-content {
	display: flex;
	max-height: min(800px, calc(100vh - 191px));
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--wlre-space-16);
	padding: var(--wlre-space-24);
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	overflow-y: auto;
}

.wlre-modal__service-header {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	/* 4px gap between overline and heading; lede gets margin-top to reach 12px. */
	gap: var(--wlre-space-4);
	color: inherit;
}

.wlre-modal--service-figma .wlre-modal__overline {
	margin: 0;
	color: inherit;
}

.wlre-modal--service-figma .wlre-modal__title {
	width: 100%;
	margin: 0;
	text-align: start;
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: var(--wlre-font-size-h1);
	line-height: var(--wlre-line-height-heading);
	color: inherit;
}

.wlre-modal--service-figma .wlre-modal__lede {
	width: 100%;
	margin-top: var(--wlre-space-4);
	margin-bottom: 0;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: var(--wlre-font-size-l);
	line-height: var(--wlre-line-height-body);
	color: inherit;
}

.wlre-modal__service-divider {
	flex-shrink: 0;
	width: 100%;
	height: 1px;
	background: var(--wlre-color-neutral-300, #d0d0d0);
}

.wlre-modal--service-figma .wlre-modal__blocks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wlre-space-12);
	width: 100%;
}

.wlre-modal--service-figma .wlre-modal__block {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wlre-space-4);
}

.wlre-modal--service-figma .wlre-modal__block-title {
	margin: 0;
	width: 100%;
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: var(--wlre-font-size-h6);
	line-height: var(--wlre-line-height-heading);
	color: inherit;
}

.wlre-modal--service-figma .wlre-modal__block-body {
	margin: 0;
	width: 100%;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: var(--wlre-line-height-body);
	color: inherit;
}

.wlre-modal--service-figma .wlre-modal__footer {
	flex-shrink: 0;
	margin: 0;
}

/* === Service modal contact bar (Figma 7414:108629) ===
 * Vertical layout: text on top, 3 equal buttons in a row below. */
.wlre-modal__contact-bar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 20px;
	background: #f5f5f5;
	border-radius: 12px;
	width: 100%;
	box-sizing: border-box;
}

.wlre-modal__contact-bar-text {
	font-family: var(--wlre-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-modal__contact-bar-text strong {
	font-weight: 700;
}

.wlre-modal__contact-bar-text span {
	font-weight: 400;
}

.wlre-modal__contact-bar-actions {
	display: flex;
	flex-direction: row;
	gap: 12px;
	width: 100%;
}

.wlre-modal__contact-bar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 0 0;
	min-width: 0;
	height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--wlre-color-text-900);
	border-radius: 8px;
	text-decoration: none;
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.48;
	white-space: nowrap;
	overflow: hidden;
	transition: background 0.15s ease, color 0.15s ease;
}

.wlre-modal__contact-bar-btn:hover {
	background: var(--wlre-color-text-900);
	color: var(--wlre-color-white);
}

.wlre-modal__contact-bar-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Search empty-state host: center the contact bar under the "No properties
 * found" column and cap its width so it doesn't stretch the whole results
 * container. (.wlre-contact-bar--empty is added by patterns/contact-bar.php.) */
.wlre-contact-bar--empty {
	max-width: 560px;
	margin: 8px auto 0;
}

/* Center the heading/subtext in the empty-state context (left-aligned inside
 * service modals). The action buttons keep their full-width row. */
.wlre-contact-bar--empty .wlre-modal__contact-bar-text {
	text-align: center;
}

/* The page-variant empty state carries a large 96px bottom padding sized for a
 * standalone 404. When a contact bar follows, that leaves a huge gap under the
 * title — collapse it so the bar sits close to "No properties found". */
.wlre-empty--page:has(+ .wlre-contact-bar--empty) {
	padding-bottom: 24px;
}

.wlre-modal--service-figma .wlre-modal__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wlre-space-4);
	min-width: 100px;
	height: 56px;
	padding: 16px 24px;
	border-radius: var(--wlre-radius-sm);
	background: var(--wlre-color-accent-500, #81d8d0);
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: var(--wlre-line-height-body);
	text-decoration: none;
}

.wlre-modal--service-figma .wlre-modal__cta svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.wlre-modal--service-figma .wlre-modal__cta svg path {
	fill: currentColor;
}

/* On desktop the topbar is invisible to layout — button stays absolutely positioned. */
.wlre-modal__service-topbar {
	display: contents;
}

.wlre-modal__service-topbar-logo {
	display: none;
}

.wlre-modal__close--service-figma {
	position: absolute;
	top: -64px;
	right: -50px;
	display: inline-flex;
	width: 126px;
	height: 48px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 20px;
	border: 0;
	border-radius: 13.091px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8.727px);
	color: var(--wlre-color-white);
	font-family: var(--wlre-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 19.6px;
}

.wlre-modal__close--service-figma:hover {
	background: rgba(255, 255, 255, 0.18);
}

.wlre-modal__close--service-figma:focus-visible {
	outline: none;
}

.wlre-modal__close--service-figma svg {
	width: 24px;
	height: 24px;
}

.wlre-modal__close--service-figma svg path {
	fill: currentColor;
}

@media (max-width: 1199px) {
	.wlre-modal--service-figma {
		width: calc(100vw - 48px);
	}

	.wlre-modal__close--service-figma {
		right: 0;
	}
}

/* Grabber pill shown only on mobile — hidden on desktop where the floating
 * "Close" button handles dismissal. */
.wlre-modal__service-grabber {
	display: none;
}

@media (max-width: 767px) {
	/* Convert service modal to a Figma 6640:302628 bottom-sheet on mobile.
	 * No CSS animation — the ::backdrop appears instantly and animating the
	 * modal separately creates a mismatch (dark overlay + invisible content). */
	.wlre-modal--service-figma:not([open]) {
		display: none;
	}

	.wlre-modal--service-figma[open] {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		max-width: 100%;
		/* Explicit height is required: without it the dialog is content-sized,
		 * flex-basis:0 on the shell gives it 0 height, and only the grabber renders. */
		height: 90vh;
		max-height: 90vh;
		margin: 0;
		border-radius: var(--wlre-radius-20) var(--wlre-radius-20) 0 0;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		/* Override desktop's background:transparent so even if shell doesn't
		 * fill the full 90vh, the empty area below stays white instead of
		 * showing the backdrop through. */
		background: var(--wlre-color-white);
		/* Chrome 125+ adds a UA opacity transition to <dialog>; suppress it. */
		opacity: 1;
		transition: none;
		animation: none;
	}

	.wlre-modal--service-figma::backdrop {
		/* Figma overlay: deep-navy at 96% opacity.
		 * transition:none suppresses the Chrome 125+ UA backdrop fade-in. */
		background: rgba(10, 36, 56, 0.96);
		transition: none;
		animation: none;
	}

	/* Grabber: white strip with a grey pill — matches Figma 6640:302632. */
	.wlre-modal__service-grabber {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 100%;
		padding: var(--wlre-space-12) 10px;
		background: var(--wlre-color-white);
	}

	.wlre-modal__service-grabber::after {
		content: '';
		width: 60px;
		height: 6px;
		background: var(--wlre-color-neutral-400, #d0d0d0);
		border-radius: 20px;
	}

	/* Shell becomes a scrollable single column — image first, content below.
	 * display: block (not flex) so nested flex children's overflow contributes
	 * to scrollHeight reliably across browsers; with display:flex some engines
	 * size the flex children to the available space and clip overflow without
	 * extending the parent's scrollable area. */
	.wlre-modal--service-figma .wlre-modal__service-shell {
		flex: 1 1 0;
		min-height: 0;
		display: block;
		border-radius: 0;
		overflow-y: auto;
		max-height: none;
		/* Bottom padding on the scroll container so the last item clears the
		 * sheet edge; inner content padding-block-end alone doesn't extend the
		 * white background since the shell owns the background-color. */
		padding-block-end: calc(var(--wlre-space-40) + env(safe-area-inset-bottom, 0px));
	}

	/* Image at top of scrollable area — Figma h-200px, rounded-16px, 4px
	 * horizontal inset (Figma 6640-313850, tightened from 16px). */
	.wlre-modal__service-media {
		flex-shrink: 0;
		min-height: 200px;
		max-height: 200px;
		margin: var(--wlre-space-4) var(--wlre-space-4) 0;
		border-radius: var(--wlre-radius-lg);
	}

	/* Content scrolls with the image inside the shell. 4px horizontal
	 * padding tightened from 16px to match Figma 6640-313850.
	 * display: flex (column) so the inner gap utility still applies; no
	 * flex grow/shrink so the natural height drives the shell's scrollHeight. */
	.wlre-modal__service-content {
		display: flex;
		flex-direction: column;
		max-height: none;
		overflow-y: visible;
		padding: var(--wlre-space-16) var(--wlre-space-4);
		gap: var(--wlre-space-24);
	}

	/* Guaranteed bottom spacer — flex children's margin-bottom/padding-bottom
	 * is sometimes not included in the scroll container's scrollable height
	 * on iOS. An explicit block-level ::after with fixed height is always
	 * scrollable into view. */
	.wlre-modal--service-figma .wlre-modal__service-content::after {
		content: '';
		display: block;
		flex-shrink: 0;
		width: 100%;
		height: calc(40px + env(safe-area-inset-bottom, 0px));
	}

	/* === Sticky CTA (Figma 6640-313850) ====================================
	 * Sellers + buyers modals end with a primary CTA inside .wlre-modal__footer.
	 * On mobile that CTA is pinned to the bottom of the dialog itself (not the
	 * scroll container) so the white bar always spans edge-to-edge regardless
	 * of the content's inline padding. The shell gets a generous bottom padding
	 * so the last body item can scroll above the sticky bar instead of being
	 * hidden behind it. Targeted via #id rather than :has() for universal
	 * browser support and to scope only to the two modals that have a CTA. */
	#service-modal-sellers .wlre-modal__service-content::after,
	#service-modal-buyers .wlre-modal__service-content::after {
		display: none;
	}

	#service-modal-sellers .wlre-modal__service-shell,
	#service-modal-buyers .wlre-modal__service-shell {
		padding-block-end: 0;
	}

	.wlre-modal--service-figma .wlre-modal__title {
		font-size: var(--wlre-font-size-h3);
	}

	.wlre-modal--service-figma .wlre-modal__lede {
		font-size: 16px;
	}

	/* Hide floating close button — scrim tap / grabber dismisses the sheet. */
	.wlre-modal__close--service-figma {
		display: none;
	}
}

/* === Mortgage contact modal (Figma 6722-467297 / 6705-319776) =========== */

.wlre-modal--mortgage-contact .wlre-modal__title {
	text-align: center;
}

.wlre-modal--mortgage-contact .wlre-form__row--mortgage {
	gap: var(--wlre-space-24);
}

.wlre-modal--mortgage-contact .wlre-modal__actions {
	justify-content: center;
}

.wlre-modal--mortgage-contact .wlre-modal__actions .wlre-btn {
	height: 56px;
	padding: 16px 24px;
	border-radius: var(--wlre-radius-sm, 8px);
	box-sizing: border-box;
}

.wlre-modal--mortgage-contact .wlre-modal__actions .wlre-form__submit {
	width: auto;
	max-width: none;
	margin-top: 0;
	margin-inline: 0;
}

/* Desktop: full-viewport transparent dialog + centred white card shell
 * (same pattern as --visit modal). */
@media (min-width: 768px) {
	.wlre-modal--mortgage-contact[open] {
		position: fixed;
		inset: 0;
		max-width: 100%;
		width: 100%;
		height: 100%;
		max-height: 100%;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wlre-modal--mortgage-contact::backdrop {
		background: rgba(10, 36, 56, 0.96);
	}

	.wlre-modal--mortgage-contact .wlre-modal__mortgage-shell {
		background: var(--wlre-color-white);
		border-radius: var(--wlre-radius-20);
		box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
		width: 800px;
		max-width: calc(100% - 32px);
		max-height: calc(100vh - 128px);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.wlre-modal--mortgage-contact .wlre-modal__inner {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		overflow-y: auto;
	}

	/* Kill per-field bottom margins inside the shell so spacing is controlled
	 * by padding only — avoids a large gap above the sticky footer. */
	.wlre-modal--mortgage-contact .wlre-mortgage-contact-form .wlre-form__group,
	.wlre-modal--mortgage-contact .wlre-mortgage-contact-form .wlre-form__checkbox {
		margin-bottom: 0;
	}

	.wlre-modal--mortgage-contact .wlre-mortgage-contact-form {
		display: flex;
		flex-direction: column;
		gap: var(--wlre-space-24);
	}

	/* Buttons need padding so they clear the shell's 20px border-radius. */
	.wlre-modal--mortgage-contact .wlre-modal__actions--sticky {
		padding: var(--wlre-space-16) var(--wlre-space-24) var(--wlre-space-32);
		box-shadow: none;
		justify-content: center;
	}
}

/* Mobile bottom-sheet overrides (Figma 6722-458669) */
@media (max-width: 767px) {
	/* Shell collapses to display:contents — existing --sheet rules handle layout. */
	.wlre-modal--mortgage-contact .wlre-modal__mortgage-shell {
		display: contents;
	}

	/* Backdrop-close is desktop-only. */
	.wlre-modal--mortgage-contact .wlre-modal__backdrop-close {
		display: none;
	}

	/* Inner grows to fill the sheet, pushing sticky footer to the bottom. */
	.wlre-modal--mortgage-contact .wlre-modal__inner {
		background: var(--wlre-color-white);
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding: var(--wlre-space-16);
		padding-block-end: var(--wlre-space-24);
	}

	.wlre-modal--mortgage-contact .wlre-modal__title {
		font-size: 22px;
		text-align: center;
		margin-bottom: var(--wlre-space-24);
	}

	/* Buttons each take 50% of the footer. */
	.wlre-modal--mortgage-contact .wlre-modal__actions--sticky > .wlre-btn {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Stack fields with consistent 16px gap; kill individual margins. */
	.wlre-modal--mortgage-contact .wlre-mortgage-contact-form {
		display: flex;
		flex-direction: column;
		gap: var(--wlre-space-16);
	}

	.wlre-modal--mortgage-contact .wlre-mortgage-contact-form .wlre-form__group {
		margin-bottom: 0;
	}

	.wlre-modal--mortgage-contact .wlre-mortgage-contact-form .wlre-form__row--mortgage {
		gap: var(--wlre-space-16);
	}

	.wlre-modal--mortgage-contact .wlre-mortgage-contact-form .wlre-form__checkbox {
		margin-bottom: 0;
	}
}

/* ==========================================================================
 * Full-screen mobile: visit-request and mortgage-contact
 * Override the 90vh bottom-sheet with a full-screen layout on mobile for
 * better keyboard and scroll UX on complex multi-field forms.
 * ========================================================================== */
@media (max-width: 767px) {
	.wlre-modal--visit,
	.wlre-modal--mortgage-contact {
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
		inset-block-start: 0;
	}

	.wlre-modal--visit .wlre-modal__grabber,
	.wlre-modal--mortgage-contact .wlre-modal__grabber {
		display: none;
	}

	/* Backdrop-close becomes a fixed white header bar — X icon on the right. */
	.wlre-modal--visit .wlre-modal__backdrop-close,
	.wlre-modal--mortgage-contact .wlre-modal__backdrop-close {
		display: flex;
		position: static;
		width: 100%;
		height: 44px;
		align-items: center;
		justify-content: flex-end;
		padding: 0 var(--wlre-space-16);
		background: var(--wlre-color-white);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-radius: 0;
		border: none;
		color: var(--wlre-color-text-900);
		gap: 6px;
		flex-shrink: 0;
	}

	.wlre-modal--visit .wlre-modal__backdrop-close span,
	.wlre-modal--mortgage-contact .wlre-modal__backdrop-close span {
		font-family: var(--wlre-font-body);
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		color: var(--wlre-color-text-900);
	}

	.wlre-modal--visit .wlre-modal__backdrop-close svg,
	.wlre-modal--mortgage-contact .wlre-modal__backdrop-close svg {
		width: 24px;
		height: 24px;
	}

	/* Content starts right below the header — use the standard sheet padding. */
	.wlre-modal--visit .wlre-modal__inner,
	.wlre-modal--mortgage-contact .wlre-modal__inner {
		padding-block-start: var(--wlre-space-16);
	}

	/* Visit modal — logo + close topbar replaces the backdrop-close header. */
	.wlre-modal__visit-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 52px;
		padding: 0 var(--wlre-space-16);
		background: var(--wlre-color-white);
		flex-shrink: 0;
	}

	.wlre-modal__visit-topbar-logo {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		color: var(--wlre-color-text-900);
		text-decoration: none;
		outline: none;
	}

	.wlre-modal__visit-topbar-logo svg,
	.wlre-modal__visit-topbar-logo img {
		height: 28px;
		width: auto;
	}

	.wlre-modal__visit-topbar-close {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: none;
		border: none;
		padding: 0;
		color: var(--wlre-color-text-900);
		cursor: pointer;
		flex-shrink: 0;
	}

	.wlre-modal__visit-topbar-close span {
		font-family: var(--wlre-font-body);
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		color: var(--wlre-color-text-900);
	}

	.wlre-modal__visit-topbar-close svg {
		width: 24px;
		height: 24px;
	}

	.wlre-modal--visit .wlre-modal__backdrop-close {
		display: none;
	}
}

/* ==========================================================================
 * Full-screen mobile: service modals (Chi vende, Chi compra, sell-better…)
 * ========================================================================== */
@media (max-width: 767px) {
	.wlre-modal--service-figma[open] {
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
		inset-block-start: 0;
	}

	.wlre-modal__service-grabber {
		display: none;
	}

	/* Topbar becomes the white header row: logo left, close button right. */
	.wlre-modal__service-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 52px;
		padding: 0 var(--wlre-space-16);
		background: var(--wlre-color-white);
		flex-shrink: 0;
	}

	.wlre-modal__service-topbar-logo {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		color: var(--wlre-color-text-900);
		text-decoration: none;
		outline: none;
	}

	.wlre-modal__service-topbar-logo svg,
	.wlre-modal__service-topbar-logo img {
		height: 28px;
		width: auto;
	}

	/* Reset close button to auto-size; topbar handles the row layout. */
	.wlre-modal__close--service-figma {
		display: inline-flex;
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-radius: 0;
		border: none;
		color: var(--wlre-color-text-900);
		gap: 6px;
		flex-shrink: 0;
	}

	.wlre-modal__close--service-figma span {
		font-family: var(--wlre-font-body);
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		color: var(--wlre-color-text-900);
	}

	.wlre-modal__close--service-figma svg {
		width: 24px;
		height: 24px;
	}

	/* Remove old sticky-CTA shell padding (now superseded by contact bar). */
	#service-modal-sellers .wlre-modal__service-content::after,
	#service-modal-buyers .wlre-modal__service-content::after {
		display: none;
	}

	/* === Service modal contact bar — mobile (replaces sticky CTA) === */
	#service-modal-sellers .wlre-modal__service-shell,
	#service-modal-buyers .wlre-modal__service-shell {
		padding-block-end: 0;
	}

	.wlre-modal__contact-bar {
		padding: 20px 16px;
	}

	.wlre-modal__contact-bar-actions {
		flex-direction: column;
		gap: 10px;
	}

	.wlre-modal__contact-bar-btn {
		flex: none;
		width: 100%;
	}
}