/**
 * Stepfox Real Estate — Elementor furniture (handle `stepfox-re-elementor`,
 * dep `stepfox-re`).
 *
 * This sheet NEVER restyles a component: every component style lives in the
 * plugin's family sheets (real-estate.css, css/cards.css, css/property.css,
 * css/components.css, css/agents.css, css/map.css), which the widgets declare
 * as dependencies. It only covers:
 *   1. the editor notice / preview note printed by the widget base,
 *   2. wrapper geometry (full-bleed maps, sticky contact card, popovers),
 *   3. the conflicts Elementor's own CSS creates — its blanket image reset
 *      (`.elementor img`, 0,1,1) and the kit link colour
 *      (`.elementor-kit-N a`, 0,1,1) both outrank component class rules
 *      (0,1,0), so the affected contracts are restated here at (0,2,1).
 * Colours are palette presets only, so the dark scheme flips everything.
 */

/* ------------------------------------------------------------------ */
/* 1. Editor notice + preview note                                     */
/* ------------------------------------------------------------------ */

.sfre-el-notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border: 1px dashed var(--wp--preset--color--line, rgba(20, 24, 31, 0.18));
	border-radius: 16px;
	background: var(--wp--preset--color--panel-2, #efeae1);
	color: var(--wp--preset--color--muted, #5d6672);
	font: 500 13px/1.5 var(--wp--preset--font-family--ui, "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif);
	text-align: center;
}

.sfre-el-notice strong {
	color: var(--wp--preset--color--ink, #14181f);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sfre-el-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--turf, #dcefe9);
	color: var(--wp--preset--color--ink, #14181f);
	font: 600 12px/1.4 var(--wp--preset--font-family--ui, "Manrope", system-ui, sans-serif);
}

.sfre-el-note::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-2, #0f766e);
}

/* ------------------------------------------------------------------ */
/* 2. Wrapper geometry                                                  */
/* ------------------------------------------------------------------ */

/* Component shadows, popovers and focus rings must not be clipped. */
.elementor-widget[class*="elementor-widget-real-estate-"] > .elementor-widget-container {
	overflow: visible;
}

/* Filter / search popovers open over the sections that follow. */
.elementor-widget-real-estate-search-form,
.elementor-widget-real-estate-search-filters {
	position: relative;
	z-index: 5;
}

/* The map search must NOT be a stacking context: its phone filter sheets
   (.sfre-mpop__panel, fixed, z 99995) have to rise above the scrim that
   search.js appends to <body> (.sfre-mpop-backdrop, z 99990), and its toast
   (z 100001) above the site header. A z-index here would trap all of them
   at level 5, under their own backdrop. Its toolbar already layers itself
   (.sfre-msr__bar, z 20), exactly as in the block edition. */
.elementor-widget-real-estate-map-search {
	position: relative;
	z-index: auto;
}

/* Maps fill their column; a map band carries no trailing widget gap. */
.elementor-widget-real-estate-map-search,
.elementor-widget-real-estate-area-map,
.elementor-widget-real-estate-property-map {
	width: 100%;
	min-width: 0;
}

.elementor-widget-real-estate-map-search > .elementor-widget-container,
.elementor-widget-real-estate-area-map > .elementor-widget-container,
.elementor-widget-real-estate-property-map > .elementor-widget-container {
	height: 100%;
}

.elementor-widget-real-estate-map-search:not(:last-child) {
	margin-block-end: 0;
}

/* MapLibre's canvas and markers must never pick up Elementor's resets. */
.elementor .maplibregl-map img,
.elementor .maplibregl-marker img {
	max-width: none;
	height: auto;
}

/* Sticky contact card: the WIDGET sticks inside its column (sticking the
   component inside its own wrapper would have no room to travel). */
@media (min-width: 1024px) {
	.elementor-widget.sfre-el-sticky-yes {
		position: sticky;
		top: calc(var(--sfre-header-h, 72px) + var(--wp-admin--admin-bar--height, 0px) + 24px);
		z-index: 3;
		align-self: flex-start;
	}

	.elementor-widget.sfre-el-sticky-yes .sfre-contact-agent.is-sticky {
		position: relative;
		top: auto;
	}
}

/* Editor: sticky widgets would float over the panel handles while editing. */
.elementor-editor-active .elementor-widget.sfre-el-sticky-yes {
	position: relative;
	top: auto;
}

/* ------------------------------------------------------------------ */
/* 3a. Elementor image reset — restate the component image contracts   */
/*     (`.elementor img { height:auto; border-radius:0 }` is 0,1,1)    */
/* ------------------------------------------------------------------ */

.elementor img.sfre-card__img,
.elementor .sfre-card__media img,
.elementor .sfre-gallery__tile img,
.elementor .sfre-gallery__slide img,
.elementor .sfre-ca__photo img,
.elementor .sfre-sticky-bar__thumb img,
.elementor .sfre-embed__poster img,
.elementor img.sfre-loc-tile__img,
.elementor .sfre-loc-tile__media img,
.elementor img.sfre-agent__img,
.elementor .sfre-agent__media img,
.elementor img.sfre-agent-card__img,
.elementor .sfre-agent-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Floor plans are drawings: whole, never cropped. */
.elementor .sfre-fp__figure img {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
}

/* Avatars and headshot discs keep their circle. */
.elementor img.sfre-avatar,
.elementor img.sfre-face,
.elementor .sfre-ca__photo img {
	border-radius: 50%;
}

.elementor img.sfre-avatar {
	object-fit: cover;
	aspect-ratio: 1;
}

/* ------------------------------------------------------------------ */
/* 3b. Kit link colour — structural links inherit their component's   */
/*     text colour instead of the kit link colour                       */
/* ------------------------------------------------------------------ */

.elementor a.sfre-card__link,
.elementor a.sfre-card__media,
.elementor .sfre-card__title a,
.elementor a.sfre-loc-tile__link,
.elementor a.sfre-agent-card__link,
.elementor a.sfre-agent__media,
.elementor .sfre-agent__name a,
.elementor .sfre-agent-card__name a,
.elementor a.sfre-f-property-image__link,
.elementor a.sfre-icon-btn {
	color: inherit;
}

/* Filled brand buttons: text on coral / teal is the `base` preset (SPEC). */
.elementor a.sfre-btn--primary,
.elementor a.sfre-btn--primary:hover,
.elementor a.sfre-btn--primary:focus {
	color: var(--wp--preset--color--base, #f7f5f0);
}

.elementor a.sfre-btn--ghost {
	color: var(--wp--preset--color--ink, #14181f);
}

/* ------------------------------------------------------------------ */
/* 4. Editor calm                                                       */
/* ------------------------------------------------------------------ */

/* Autoplaying rails must not slide under the cursor while editing. */
.elementor-editor-active .sfre-el .sfre-carousel__track {
	scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget[class*="elementor-widget-real-estate-"] * {
		scroll-behavior: auto !important;
	}
}