/**
 * Stepfox Car Dealer — Elementor furniture (handle `stepfox-cd-elementor`,
 * dep `stepfox-cd`).
 *
 * This sheet NEVER restyles a component: every component style lives in the
 * plugin's family sheets (car-dealer.css, css/cards.css, css/vehicle.css,
 * css/components.css, css/dealers.css, css/engage.css, css/finance.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 / hover 0,2,1) both outrank component
 *      class rules (0,1,0), so the affected contracts are restated here at
 *      (0,2,1) and above.
 * Colours are palette presets only, so the dark scheme flips everything.
 */

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

.sfcd-el-notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border: 1px dashed var(--wp--preset--color--line, rgba(14, 17, 22, 0.18));
	border-radius: 16px;
	background: var(--wp--preset--color--panel-2, #e6e8ec);
	color: var(--wp--preset--color--muted, #596372);
	font: 500 13px/1.5 var(--wp--preset--font-family--ui, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
	text-align: center;
}

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

.sfcd-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, #dfe8f7);
	color: var(--wp--preset--color--ink, #0e1116);
	font: 600 12px/1.4 var(--wp--preset--font-family--ui, "Inter", system-ui, sans-serif);
}

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

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

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

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

/* The map search must NOT be a stacking context: its phone filter sheets
   (.sfcd-mpop__panel, fixed, z 99995) have to rise above the scrim that
   search.js appends to <body> (.sfcd-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
   (.sfcd-msr__bar, z 20), exactly as in the block edition. */
.elementor-widget-car-dealer-map-search {
	position: relative;
	z-index: auto;
}

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

.elementor-widget-car-dealer-map-search > .elementor-widget-container,
.elementor-widget-car-dealer-dealer-map > .elementor-widget-container,
.elementor-widget-car-dealer-vehicle-map > .elementor-widget-container {
	height: 100%;
}

.elementor-widget-car-dealer-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,
.elementor .maplibregl-popup img {
	max-width: none;
	height: auto;
	border-radius: 0;
}

/* 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.sfcd-el-sticky-yes {
		position: sticky;
		top: calc(var(--sfcd-header-h, 72px) + var(--wp-admin--admin-bar--height, 0px) + 24px);
		z-index: 3;
		align-self: flex-start;
	}

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

/* Editor: sticky widgets would float over the panel handles while editing. */
.elementor-editor-active .elementor-widget.sfcd-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.sfcd-card__img,
.elementor .sfcd-card__media > img,
.elementor .sfcd-card--fallback .sfcd-card__media img,
.elementor .sfcd-f-vehicle-image img,
.elementor .sfcd-f-make-image img,
.elementor img.sfcd-f-make-image__img,
.elementor img.sfcd-f-dealer-photo__img,
.elementor img.sfcd-loc-tile__img,
.elementor img.sfcd-mk__img,
.elementor img.sfcd-dealer-card__img,
.elementor img.sfcd-dc__img,
.elementor .sfcd-ct__photo img,
.elementor .sfcd-gallery__tile img,
.elementor .sfcd-gallery__slide img,
.elementor .sfcd-embed__poster img,
.elementor .sfcd-sticky-bar__thumb img,
.elementor .sfcd-tray__thumb img,
.elementor .sfcd-cmp-tray__thumb img,
.elementor .sfcd-cd__veh-img img,
.elementor .sfcd-dpop__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* The lightbox shows whole photographs, never cropped. */
.elementor img.sfcd-lb__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.elementor .sfcd-lb__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Logos and avatars sit in a rounded frame (disc or rounded square): the
   image takes the frame's radius instead of Elementor's flat reset. */
.elementor img.sfcd-avatar,
.elementor img.sfcd-logo__img,
.elementor img.sfcd-card-logo__img,
.elementor img.sfcd-dc__logo-img,
.elementor .sfcd-cd__logo img {
	max-width: none;
	border-radius: inherit;
	object-fit: cover;
}

.elementor img.sfcd-avatar {
	aspect-ratio: 1;
}

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

.elementor a.sfcd-card__link,
.elementor a.sfcd-card__media,
.elementor .sfcd-card__title a,
.elementor a.sfcd-mk,
.elementor a.sfcd-loc-tile__link,
.elementor a.sfcd-dc__link,
.elementor .sfcd-dc__name a,
.elementor a.sfcd-dealer-card__link,
.elementor .sfcd-f-vehicle-image__link,
.elementor .sfcd-f-dealer-photo__link,
.elementor .sfcd-f-dealer-logo__link,
.elementor a.sfcd-icon-btn {
	color: inherit;
}

/* Buttons keep their own foreground in every state: the kit's link hover
   (`.elementor-kit-N a:hover`, 0,2,1) would otherwise recolour the label of
   a filled button (primary, secondary, ghost…) the moment it is hovered. */
.elementor a.sfcd-btn,
.elementor a.sfcd-btn:hover,
.elementor a.sfcd-btn:focus,
.elementor a.sfcd-btn:visited {
	color: var(--sfcd-btn-fg, var(--wp--preset--color--ink, #0e1116));
	text-decoration: none;
}

/* The map's own filled buttons (map.css: accent-strong fill, --m-base label)
   carry no --sfcd-btn-fg; the guard above would fall back to ink on the
   ember fill (2.4:1 in dark). Restate their label colour above it. */
.elementor :is(.sfcd-msr, .sfcd-mapbox) a.sfcd-btn:not(:is(.sfcd-btn--ghost, .sfcd-btn--outline, .sfcd-btn--link, .sfcd-btn--soft, .sfcd-btn--secondary, .sfcd-btn--glass, .sfcd-btn--danger, .sfcd-btn--cobalt, .sfcd-btn--blue)) {
	color: var(--m-base);
}

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

/* Autoplaying rails must not slide under the cursor while editing. */
.elementor-editor-active .sfcd-el .sfcd-carousel__track,
.elementor-editor-active .sfcd-el [data-sfcd-carousel] {
	scroll-behavior: auto;
}

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