/**
 * Listing Map — Modern styled map with custom markers.
 */

/* ─── Map Wrapper ─── */

.listora-map-wrapper {
	position: relative;
	border-radius: var(--listora-radius-xl);
	overflow: hidden;
	border: var(--listora-card-border);
	box-shadow: var(--listora-shadow-sm);
	/* Own stacking context so the z-index:1000 used by the Near Me /
	   Search-this-area buttons (so they sit above Leaflet's tile + marker
	   panes) does NOT escape this wrapper and punch through theme sticky
	   headers when the page scrolls. Basecamp #9895489254. */
	isolation: isolate;
}

/* ─── Map Container ─── */

.listora-map {
	width: 100%;
	min-height: 300px;
	z-index: 1;
}

.listora-map .leaflet-container {
	font-family: inherit;
}

/* ─── Custom Styled Markers ─── */

.listora-map__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--marker-color, var(--listora-primary));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: transform var(--listora-transition-fast), box-shadow var(--listora-transition-fast);
	cursor: pointer;
}

.listora-map__marker svg {
	width: 14px;
	height: 14px;
}

.listora-map__marker:hover,
.listora-map__marker.is-active {
	transform: scale(1.3);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 10 !important;
}

/* Featured marker with glow */
.listora-map__marker--featured {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--marker-color, var(--listora-primary)) 30%, transparent), 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Price label marker variant */
.listora-map__marker--price {
	border-radius: var(--listora-radius-md);
	width: auto;
	padding: 0.2rem 0.5rem;
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-bold);
	white-space: nowrap;
}

/* Legacy SVG marker */
.listora-marker {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

.listora-marker svg {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
	transition: transform var(--listora-transition-fast);
}

.listora-marker:hover svg {
	transform: scale(1.15);
}

/* ─── Rich Popup Card ─── */

.listora-map__popup-container .leaflet-popup-content-wrapper {
	border-radius: var(--listora-radius-lg);
	box-shadow: var(--listora-shadow-xl);
	padding: 0;
	overflow: hidden;
}

.listora-map__popup-container .leaflet-popup-content {
	margin: 0;
}

.listora-map__popup-container .leaflet-popup-tip {
	box-shadow: none;
}

.listora-map__popup {
	position: relative;
	font-family: inherit;
	min-width: 220px;
	animation: listora-fadeInScale 0.2s ease;
}

.listora-map__popup-image {
	display: block;
	width: 100%;
	height: 80px;
	object-fit: cover;
}

/* Featured badge — overlay the image's top-inline-start corner instead of
   sitting in flow (where it straddled the image/body boundary). */
.listora-map__popup > .listora-badge--featured {
	position: absolute;
	top: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 1;
}

.listora-map__popup-body {
	padding: 0.75rem;
}

.listora-map__popup-title {
	display: block;
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-semibold);
	line-height: 1.3;
	margin-block-end: 0.3rem;
}

.listora-map__popup-title a {
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	text-decoration: none;
}

.listora-map__popup-title a:hover {
	color: var(--listora-primary, var(--listora-wp-admin-link));
}

.listora-map__popup-meta {
	display: flex;
	align-items: center;
	gap: 0.4em;
	flex-wrap: wrap;
	font-size: var(--listora-text-size-sm);
}

.listora-map__popup-type {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
}

.listora-map__popup-rating {
	color: var(--listora-rating, var(--listora-rating));
	font-weight: var(--listora-weight-semibold);
	font-size: var(--listora-text-size-sm);
}

.listora-map__popup-link {
	display: flex;
	width: 100%;
	justify-content: center;
	text-decoration: none;
	margin-block-start: 0.6rem;
	font-size: var(--listora-text-size-sm);
}

/* ─── Map Controls (Glass Effect) ─── */

.listora-map__controls {
	position: absolute;
	top: 0.75rem;
	inset-inline-end: 0.75rem;
	z-index: 1000;
	display: flex;
	gap: 0.4rem;
	flex-direction: column;
}

.listora-map__near-me-btn,
.listora-map__search-area-btn {
	font-size: var(--listora-text-size-sm);
	padding: 0.4em 0.75em;
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.85);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-md);
}

.listora-map__near-me-btn:hover,
.listora-map__search-area-btn:hover {
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	box-shadow: var(--listora-shadow-lg);
}

.listora-map__search-area-btn {
	/* Anchored directly to .listora-map-wrapper (rendered as a sibling of
	   .listora-map__controls in the template, not a child). Previously
	   nested inside .listora-map__controls — its position:absolute then
	   resolved against the tiny controls cluster at top-right, so
	   `left:50%` put it on top of Near Me. Basecamp #9895489254. */
	position: absolute;
	top: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	inset-inline-end: auto;
	z-index: 1000;
	white-space: nowrap;
}

/* ─── Skip Link (a11y) ─── */

.listora-sr-only--focusable:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--listora-primary);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	z-index: 100000;
}

/* ─── Responsive ─── */

@media (max-width: 767px) {
	.listora-map {
		min-height: 250px;
	}

	.listora-map__controls {
		top: 0.5rem;
		inset-inline-end: 0.5rem;
	}

	/* On narrow viewports the Near Me cluster (top-right) and the
	   Search-this-area button (top-center) would overlap horizontally —
	   there isn't enough width to fit both on the same row. Drop the
	   search button below the cluster instead of squeezing the layout.
	   Basecamp #9895489254. */
	.listora-map__search-area-btn {
		top: 3.75rem;
	}
}

/* ─── Dark Mode (theme-specific) ─── */

[data-listora-dark] .listora-map-wrapper {
	border-color: var(--listora-wp-admin-text-strong);
}

[data-listora-dark] .listora-map__near-me-btn,
[data-listora-dark] .listora-map__search-area-btn {
	background: rgba(30, 30, 30, 0.85);
	color: var(--listora-border-divider);
}

[data-listora-dark] .listora-map__popup-container .leaflet-popup-content-wrapper {
	background: var(--listora-bg-inverse);
}

[data-listora-dark] .listora-map__popup-title a {
	color: var(--listora-border-divider);
}