/*
 * [alana_map_search] layout -- map + filtered result list. Filter bar
 * styling comes from archive.css (shared with /villas/, already loaded as
 * a dependency); everything else here is specific to this page: the
 * map/list split, the Leaflet popup/pin/zoom-control brand pass, and the
 * horizontal list-card layout (avs-list-card, not the /villas/ grid's
 * avs-card -- a narrow scrolling list column reads better as a compact
 * row than an image-on-top grid tile).
 */

/* Defined on :root, not scoped to #avs-map-search -- that wrapper only
   exists for the single [alana_map_search] shortcode layout. The split
   shortcodes ([alana_map_search_filter]/[_map]/[_cards], placed
   independently in Elementor) have no such common ancestor, and every
   rule below that needs this variable (the gold pin, the featured dot)
   would silently fall back to black/unstyled without it being global. */
:root {
	--avs-gold: #c9a227;
}

#avs-map-search {
	max-width: 1400px;
	margin: 0 auto;
	padding: 30px 24px 60px;
}

/* The theme's own style.css has `.leaflet-control-container { display:
   none; }` sitewide -- the OLD /map-search/ page draws its own custom
   zoom buttons instead of Leaflet's native corner controls, and hides
   Leaflet's to avoid showing both. That rule was silently eating the
   zoom/fullscreen controls here too, no matter how they were styled --
   the whole container never rendered. Scoped to #avs-map-search-map
   (not the #avs-map-search wrapper, which the split-shortcode layout
   doesn't have) so it works either way -- the map div itself always
   exists regardless of which shortcode(s) built the page. */
#avs-map-search-map .leaflet-control-container {
	display: block !important;
}

/* This page's content sits inside Elementor's generic container wrapper
   (the theme builder's default page template auto-wraps a plain page's
   shortcode content in .e-con/.e-con-inner/.elementor-widget-shortcode),
   and one of those Elementor containers sets overflow to something other
   than visible -- which silently breaks position:sticky on any descendant,
   including the map below. Forcing overflow:visible back on that whole
   ancestor chain is what actually makes the sticky map stick. */
.e-con:has(#avs-map-search),
.e-con-inner:has(#avs-map-search),
.elementor-widget-shortcode:has(#avs-map-search),
.elementor-shortcode:has(#avs-map-search),
.content_wrapper:has(#avs-map-search),
.elementor:has(#avs-map-search) {
	overflow: visible !important;
	contain: none !important;
	content-visibility: visible !important;
	transform: none !important;
	filter: none !important;
	will-change: auto !important;
}

#avs-map-search-body {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

#avs-map-search-map {
	width: 100%;
	height: 420px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--avs-cream);
	z-index: 1;
}

#avs-map-search-results {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Desktop: map sticky on the left, list scrolls on the right.
   Mobile/tablet (below 900px): map stays in normal flow at the top, NOT
   sticky -- so it can be pinch-zoomed and panned without fighting page
   scroll, and the user can see the whole map before scrolling to the list.

   No position:sticky here -- CSS position:sticky measurably didn't stick
   on this page despite every ancestor checked coming back clean (no
   overflow, no contain, no transform), so this is driven entirely by
   map-search-new.js's own scroll listener, setting position:fixed/
   absolute directly as inline styles. Those inline styles are what
   actually position the map at runtime; width/height here just establish
   its size while in normal flow. */
@media (min-width: 900px) {
	#avs-map-search-body {
		flex-direction: row;
		align-items: flex-start;
	}
	#avs-map-search-map {
		height: calc(100vh - 90px);
		min-height: 640px;
	}
	/* 52%/48% only inside the single-shortcode layout's own flex row --
	   in the split-shortcode layout the width split is Elementor's own
	   container settings (e.g. 60/40), and this rule applying on top of
	   that too (52% of an already-60%-wide container) was the actual
	   cause of the big gap between the map and the cards: the map was
	   rendering at roughly 52% of 60% of the page, not 52% of the page. */
	#avs-map-search-body #avs-map-search-map {
		width: 52%;
		flex-shrink: 0;
	}
	#avs-map-search-body #avs-map-search-list {
		width: 48%;
	}
}

/* ── List card: image left, details right, category color bar+badge ─ */
.avs-list-card {
	position: relative;
	display: flex;
	background: #fff;
	border: 1px solid var(--avs-border);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(32, 44, 46, 0.05);
	transition: box-shadow 0.2s, transform 0.2s;
}
.avs-list-card:hover {
	box-shadow: 0 10px 26px rgba(32, 44, 46, 0.12);
	transform: translateY(-2px);
}
.avs-list-card.avs-card-active {
	box-shadow: 0 0 0 3px var(--avs-coral), 0 10px 26px rgba(32, 44, 46, 0.12);
}

.avs-list-card-img {
	position: relative;
	width: 120px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--avs-cream);
}

/* Small round gold dot marking a Featured (prop_featured) listing --
   replaces an earlier wide colored left bar, which ate into the image and
   made featured cards look structurally different from the rest. */
.avs-list-card-featured {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--avs-gold);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(32, 44, 46, 0.35);
}

.avs-list-card-body {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.avs-list-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.avs-list-card-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--avs-charcoal);
	margin: 0;
	line-height: 1.2;
}

.avs-list-card-badge {
	flex-shrink: 0;
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
	background: var(--avs-coral);
	padding: 5px 11px;
	border-radius: 20px;
	white-space: nowrap;
}

.avs-list-card-location {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--avs-sage);
	display: flex;
	align-items: center;
	gap: 5px;
}
.avs-list-card-location i { color: var(--avs-coral); font-size: 11px; }

.avs-list-card-meta {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--avs-text-muted);
}

.avs-list-card-bottom {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-top: 1px solid var(--avs-border);
}

.avs-list-card-price {
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--avs-coral-dark);
}
.avs-list-card-price span {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: var(--avs-text-muted);
}
.avs-list-card-price-inquire {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--avs-sage);
}

.avs-list-card-view {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--avs-charcoal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 480px) {
	.avs-list-card-img { width: 96px; }
	.avs-list-card-title { font-size: 17px; }
}

/* ── Leaflet popup: card preview, brand pass ────────────────── */
.leaflet-popup-content-wrapper {
	background: #fff !important;
	opacity: 1 !important;
	border-radius: 12px !important;
	padding: 0 !important;
	overflow: hidden !important;
	cursor: pointer;
}
.leaflet-popup-content { margin: 0 !important; width: 220px !important; }
.leaflet-popup-tip-container { display: none !important; }

.avs-map-popup {
	font-family: 'Inter', sans-serif;
	background: #fff;
}
.avs-map-popup-img {
	height: 120px;
	background-size: cover;
	background-position: center;
	background-color: var(--avs-cream);
}
.avs-map-popup-body { padding: 12px 14px 14px; background: #fff; }
.avs-map-popup-location {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--avs-sage);
	margin-bottom: 3px;
}
.avs-map-popup-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--avs-charcoal);
	line-height: 1.2;
	margin-bottom: 4px;
}
.avs-map-popup-meta {
	font-size: 12px;
	color: var(--avs-text-muted);
	margin-bottom: 6px;
}
.avs-map-popup-price {
	font-size: 13px;
	color: var(--avs-coral-dark);
	font-weight: 700;
}

/* ── Marker pin: gold div icon (see map-search-new.js) ──────────
   Leaflet's divIcon always adds its own base 'leaflet-div-icon' class
   alongside our custom one -- and leaflet.css styles THAT with a white
   fill + grey border by default. Left unset, that shows as a plain white
   box behind/around our pin (the "white something" -- also the reason the
   pin was hard to see against a light map background at all). Neutralizing
   it here is what actually makes the gold pin the only thing visible. ── */
.leaflet-div-icon.avs-map-pin-wrap {
	background: transparent !important;
	border: none !important;
}
.avs-map-pin {
	display: block;
	font-size: 26px;
	color: var(--avs-gold);
	text-shadow: 0 2px 4px rgba(32, 44, 46, 0.45);
}

/* ── Zoom in/out control: re-assert Leaflet's default chrome against
   this site's sitewide anchor-button reset (buttons/links get coral,
   uppercase, rounded styling globally -- that reset was eating Leaflet's
   own zoom button appearance since .leaflet-control-zoom-in/-out are
   plain <a> tags). ── */
#avs-map-search-map .leaflet-control-zoom {
	border: none !important;
	box-shadow: 0 2px 8px rgba(32, 44, 46, 0.2) !important;
	border-radius: 8px !important;
	overflow: hidden;
}
#avs-map-search-map .leaflet-control-zoom a {
	width: 30px !important;
	height: 30px !important;
	line-height: 30px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	font-family: 'Inter', sans-serif !important;
	color: var(--avs-charcoal) !important;
	background: #fff !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: 0 !important;
	padding: 0 !important;
	display: block !important;
}
#avs-map-search-map .leaflet-control-zoom a:hover {
	background: var(--avs-cream-light) !important;
	color: var(--avs-coral) !important;
}

/* ── Fullscreen toggle control (see map-search-new.js) ──────── */
#avs-map-search-map .avs-map-fullscreen-control {
	margin-top: 10px !important;
}
#avs-map-search-map .avs-map-fullscreen-control a {
	width: 30px !important;
	height: 30px !important;
	line-height: 30px !important;
	font-size: 15px !important;
	font-family: 'Inter', sans-serif !important;
	color: var(--avs-charcoal) !important;
	background: #fff !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(32, 44, 46, 0.2) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
#avs-map-search-map .avs-map-fullscreen-control a:hover {
	background: var(--avs-cream-light) !important;
	color: var(--avs-coral) !important;
}

/* Fullscreen API sizes the element to fill the screen automatically, but
   this container's own fixed height (calc(100vh - 90px)) would otherwise
   still apply on top of that -- override it back to a full 100%. */
#avs-map-search-map:fullscreen {
	width: 100% !important;
	height: 100% !important;
}