/**
 * BBG Property Map - mobile-first, matches the site's existing dark/gold
 * tokens (same hex values, and the same Cinzel/Montserrat font pairing,
 * already used on the live Properties archive page - see
 * bbg-property-cpt-frontend.php's .property-card-cpt system).
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ---------- Page wrap: full-width page (via bbg-fullbleed), generous
   centered max-width for the actual content - matches the Properties/Home
   pages' effective content width while giving the map room to breathe. ---------- */
/* The page wrapper below is capped at max-width:1700px and auto-centered
   (for content readability) - on screens wider than that, without this,
   the margin strips outside it would still show the white body background.
   Targets this exact page (Explore Map, WP page ID 813) only. */
body.page-id-813 {
	background: #020609;
}

.bbg-explore-map-page-wrap {
	/* The page area around the map widget had no background of its own -
	   Astra's theme sets body{background-color:#fff} site-wide, so this
	   whole area (heading, padding, everything outside the small boxed
	   .bbg-map-app widget) was rendering plain white. Matches the same
	   dark tone the Properties page's own full-width wrapper already uses
	   (.property-wrapper-cpt background: var(--bg-dark)). */
	background: #020609;
	max-width: 1700px;
	margin: 0 auto;
	padding: 48px 40px 64px;
	box-sizing: border-box;
}

.bbg-explore-map-heading {
	text-align: center;
	margin: 0 0 40px;
}
.bbg-explore-map-title {
	font-family: 'Cinzel', serif !important;
	font-weight: 700 !important;
	font-size: 52px;
	line-height: 1.15;
	letter-spacing: 0.6px;
	margin: 0 0 18px;
	color: #c5a059;
	text-shadow: 0 2px 24px rgba(197, 160, 89, 0.25);
	background: linear-gradient(135deg, #f3e5ab, #c5a059 55%, #a9813f);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.bbg-explore-map-subtitle {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 400;
	font-size: 16.5px;
	line-height: 1.75;
	letter-spacing: 0.2px;
	color: #cbd5e0;
	max-width: 700px;
	margin: 0 auto;
}
@media (max-width: 1024px) {
	.bbg-explore-map-page-wrap { padding: 40px 24px 48px; }
	.bbg-explore-map-heading { margin-bottom: 32px; }
	.bbg-explore-map-title { font-size: 40px; }
	.bbg-explore-map-subtitle { font-size: 15px; }
}
@media (max-width: 899px) {
	/* The map widget below renders edge-to-edge on mobile (filter drawer,
	   fixed-height map, normal-flow list - see the redesigned block
	   further below), so the page-wrap itself drops its side padding at
	   this breakpoint and the heading carries its own instead. */
	.bbg-explore-map-page-wrap { padding: 16px 0 0; }
	.bbg-explore-map-heading { margin-bottom: 12px; padding: 0 16px; }
	.bbg-explore-map-title { font-size: 24px; letter-spacing: 0.3px; line-height: 1.2; }
	.bbg-explore-map-subtitle { font-size: 12.5px; line-height: 1.4; }
	/* .bbg-map-app's own mobile border-radius/border reset happens in the
	   redesigned mobile media query further below - not repeated here. */
}

.bbg-map-app {
	--bbg-gold: #c5a059;
	--bbg-gold-light: #f3e5ab;
	--bbg-bg: #020609;
	--bbg-surface: rgba(255, 255, 255, 0.035);
	--bbg-border: rgba(197, 160, 89, 0.2);
	--bbg-text: #ffffff;
	--bbg-text-dim: #a0aec0;
	--bbg-red: #e05656;
	--bbg-map-height: 640px;

	background: var(--bbg-bg);
	border: 1px solid var(--bbg-border);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45);
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--bbg-text);
	/* Was missing entirely - the mobile layout's absolutely-positioned
	   children (.bbg-map-filterbar, .bbg-map-canvas-wrap, .bbg-map-cardlist)
	   need THIS element as their containing block. Without it they position
	   against whatever ancestor further up the tree happens to be
	   positioned (or the page root), which is almost certainly why the
	   filter bar was rendering over the heading/subtitle instead of just
	   the map widget. Harmless on desktop - nothing there uses
	   position:absolute, and position:relative with no offset doesn't move
	   the element itself. */
	position: relative;
}

.bbg-map-app :fullscreen {
	background: var(--bbg-bg);
}

/* ---------- Filter bar (sticky on mobile) ---------- */
.bbg-map-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.02);
	border-bottom: 1px solid var(--bbg-border);
	position: sticky;
	top: 0;
	z-index: 20;
}

.bbg-map-search,
.bbg-map-filter {
	background: #091118;
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--bbg-text);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 13px;
	font-family: inherit;
	flex: 1 1 140px;
	min-width: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bbg-map-search:focus,
.bbg-map-filter:focus {
	outline: none;
	border-color: var(--bbg-gold);
	box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
}

/* Custom-styled select: hide the native arrow, draw our own gold chevron */
.bbg-map-filter {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c5a059' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 30px;
	cursor: pointer;
}

/* 1acre.in-inspired quick location chips (2026-07-21). Each chip just
   writes into the existing data-filter="location" select (stripos
   substring match server-side) and dispatches 'change' - reuses the
   one existing filter instead of adding a second system. */
.bbg-map-quick-locations {
	/* Mobile-only (shown via the @media(max-width:899px) block below) -
	   found showing on desktop too (1440px) during a 2026-07-21 audit,
	   since this base rule had no "hidden by default" state, unlike
	   .bbg-map-category-chips-row which got it right from the start. */
	display: none;
	gap: 6px;
	overflow-x: auto;
	padding: 0 0 10px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.bbg-map-quick-locations::-webkit-scrollbar { display: none; }

/* Same missing-base-rule bug as above: the mobile drawer toggle button
   only had display:flex inside the mobile media query, so outside it the
   button fell back to the browser's default `inline-block` for <button>
   and rendered on desktop too, next to the already-visible full filter
   bar. Found in the same 2026-07-21 audit. */
.bbg-map-filters-toggle {
	display: none;
}
.bbg-map-quick-loc-btn {
	flex: 0 0 auto;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	background: var(--bbg-surface);
	border: 1px solid var(--bbg-border);
	color: var(--bbg-text-dim);
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}
.bbg-map-quick-loc-btn:hover { border-color: var(--bbg-gold); color: var(--bbg-text); }
.bbg-map-quick-loc-btn.bbg-map-quick-loc-active {
	background: linear-gradient(135deg, var(--bbg-gold-light), var(--bbg-gold));
	border-color: transparent;
	color: var(--bbg-bg);
}

.bbg-map-search-wrap {
	position: relative;
	flex: 2 1 200px;
	min-width: 0;
}
.bbg-map-search-wrap .bbg-map-search {
	width: 100%;
	flex: none;
}
.bbg-map-search-spinner {
	position: absolute;
	right: 10px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	border: 2px solid rgba(197, 160, 89, 0.25);
	border-top-color: var(--bbg-gold);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.bbg-map-search-wrap.bbg-map-search-loading .bbg-map-search-spinner {
	opacity: 1;
	animation: bbgMapSpin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.bbg-map-search-wrap.bbg-map-search-loading .bbg-map-search-spinner { animation: none; }
}
@keyframes bbgMapSpin { to { transform: rotate(360deg); } }

.bbg-map-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--bbg-text-dim);
	background: #091118;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 9px 12px;
	cursor: pointer;
	white-space: nowrap;
}

/* Custom-styled checkbox: native input visually hidden but still the real
   interactive/accessible element, driven via the :checked sibling selector */
.bbg-map-checkbox-fake {
	position: relative;
	display: inline-flex;
	width: 15px;
	height: 15px;
}
.bbg-map-checkbox-fake input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.bbg-map-checkbox-box {
	position: absolute;
	inset: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	background: transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.bbg-map-checkbox-box::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #020609;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
.bbg-map-checkbox-fake input:checked ~ .bbg-map-checkbox-box {
	background: var(--bbg-gold);
	border-color: var(--bbg-gold);
}
.bbg-map-checkbox-fake input:checked ~ .bbg-map-checkbox-box::after { opacity: 1; }
.bbg-map-checkbox-fake input:focus-visible ~ .bbg-map-checkbox-box {
	box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25);
}

.bbg-map-clear {
	background: transparent;
	border: 1px solid var(--bbg-gold);
	color: var(--bbg-gold);
	border-radius: 10px;
	padding: 9px 14px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.bbg-map-clear:hover {
	background: var(--bbg-gold);
	color: #020609;
}

/* ---------- Body: mobile = stacked (map first, cards below) ---------- */
.bbg-map-body {
	display: flex;
	flex-direction: column;
}

.bbg-map-canvas-wrap {
	height: min(50vh, 420px);
	position: relative;
}
#bbg-map-canvas {
	width: 100%;
	height: 100%;
	background: #0a0e14;
}

.bbg-map-cardlist {
	overflow-y: auto;
	max-height: 60vh;
	padding: 10px;
}

/* Category quick-filter chips (2026-07-21) - same convention/live-count
   pattern as the Properties page's .category-tab-cpt row, but mobile-only
   here (Explore Map's desktop layout already has the category dropdown
   inside the filter bar and isn't being changed). Hidden by default;
   shown + positioned by the mobile media query below. */
.bbg-map-category-chips-row {
	display: none;
}
.bbg-map-category-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	background: var(--bbg-surface);
	border: 1px solid var(--bbg-border);
	color: var(--bbg-text-dim);
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}
.bbg-map-category-chip:hover { border-color: var(--bbg-gold); color: var(--bbg-text); }
.bbg-map-category-chip.bbg-map-category-chip-active {
	background: linear-gradient(135deg, var(--bbg-gold-light), var(--bbg-gold));
	border-color: transparent;
	color: var(--bbg-bg);
}
.bbg-map-category-chip-count {
	font-size: 10px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
}
.bbg-map-category-chip.bbg-map-category-chip-active .bbg-map-category-chip-count {
	background: rgba(2, 6, 9, 0.18);
}

/* Mobile-only bottom-sheet drag handle - had no base "hidden by default"
   rule, only mobile-scoped styling further below, so on desktop it rendered
   as an unstyled empty <button> (default browser button chrome) sitting
   above the card list. Hidden by default here; the mobile media query
   below already sets display:block to show it correctly there. */
.bbg-map-sheet-handle {
	display: none;
}
.bbg-map-cardlist-status {
	text-align: center;
	color: var(--bbg-text-dim);
	font-size: 13px;
	padding: 24px 8px;
}
.bbg-map-empty-clear {
	display: inline-block;
	margin-top: 10px;
	background: transparent;
	border: 1px solid var(--bbg-gold);
	color: var(--bbg-gold);
	border-radius: 10px;
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.bbg-map-empty-clear:hover { background: var(--bbg-gold); color: #020609; }

.bbg-map-result-count {
	font-family: 'Montserrat', sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--bbg-text-dim);
	padding: 2px 4px 10px;
}

.bbg-map-cardlist-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ---------- Property card ---------- */
.bbg-map-card {
	display: flex;
	gap: 10px;
	background: var(--bbg-surface);
	border: 1px solid var(--bbg-border);
	border-radius: 12px;
	padding: 8px;
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.bbg-map-card:hover,
.bbg-map-card-active {
	border-color: var(--bbg-gold);
	background: rgba(197, 160, 89, 0.07);
	box-shadow: 0 10px 26px rgba(197, 160, 89, 0.18);
}
@media (prefers-reduced-motion: no-preference) {
	.bbg-map-card:hover { transform: translateY(-2px); }
}

.bbg-map-card-photo-wrap {
	position: relative;
	flex-shrink: 0;
	width: 74px;
	height: 74px;
}
.bbg-map-card-photo {
	width: 74px;
	height: 74px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
	background: #0a0e14;
}
.bbg-map-card-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: var(--bbg-gold-light);
}
.bbg-map-card-ribbons {
	position: absolute;
	top: 5px;
	left: 5px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bbg-map-card-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
}
.bbg-map-card-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	font-family: 'Montserrat', sans-serif;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #020609;
	border-radius: 999px;
	padding: 2px 8px 2px 6px;
	margin-bottom: 1px;
}
.bbg-map-card-title {
	font-family: 'Cinzel', serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Mobile UX overhaul 2026-07-20, item #26: -webkit-line-clamp was
	   found to sometimes fail to re-clamp after the card's own width
	   changed (peek <-> expanded sheet toggling resizes .bbg-map-card via
	   its flex-basis) - some titles contain a long address/description
	   plus an inline WordPress emoji <img>, and when the clamp glitched
	   the full un-truncated text rendered, one card ballooning to 500px+
	   tall and breaking the whole sheet's height calculation. This hard
	   cap guarantees the box can never exceed 2 lines' worth of height
	   regardless of whether the line-clamp itself is currently behaving. */
	max-height: 37px;
}
.bbg-map-card-price {
	font-family: 'Cinzel', serif;
	color: var(--bbg-gold-light);
	font-weight: 700;
	font-size: 14px;
}
.bbg-map-card-meta {
	font-family: 'Montserrat', sans-serif;
	color: var(--bbg-text-dim);
	font-size: 11.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bbg-map-card-details-btn {
	align-self: flex-start;
	margin-top: 2px;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: var(--bbg-gold);
	text-decoration: none;
	letter-spacing: 0.2px;
	transition: color 0.15s ease;
}
.bbg-map-card-details-btn:hover { color: var(--bbg-gold-light); }

/* WhatsApp-first CTA + Verified badge (1acre.in-inspired, 2026-07-21) - the
   verified badge sits next to the category chip in the text body, not
   overlaid on the photo (this card's thumbnail is only 74x74px, too small
   for a legible badge overlay - unlike the Properties/Home page cards
   which use a full-width photo banner). */
.bbg-map-card-chips-row {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: 1px;
}
.bbg-map-card-verified {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(74,222,128,0.12);
	color: #4ade80;
	font-size: 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	border: 1px solid rgba(74,222,128,0.35);
	white-space: nowrap;
}
.bbg-map-card-actions {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.bbg-map-card-wa-btn, .bbg-map-card-call-btn {
	flex: 1 1 auto;
	text-align: center;
	padding: 6px 8px;
	border-radius: 8px;
	font-family: 'Montserrat', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.bbg-map-card-wa-btn {
	background: linear-gradient(135deg, var(--bbg-gold-light), var(--bbg-gold));
	color: #020609;
}
.bbg-map-card-call-btn {
	background: transparent;
	border: 1px solid var(--bbg-gold);
	color: var(--bbg-gold);
}

.bbg-map-badge {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-radius: 999px;
	padding: 3px 8px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.bbg-map-badge-hot-tag { background: var(--bbg-red); color: #fff; }
.bbg-map-badge-featured-tag { background: linear-gradient(135deg, var(--bbg-gold-light), var(--bbg-gold)); color: #020609; }

/* ---------- Skeleton loading state ---------- */
.bbg-map-card-skeleton { cursor: default; }
.bbg-map-card-skeleton:hover { transform: none; border-color: var(--bbg-border); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.bbg-map-skel {
	background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%);
	background-size: 400% 100%;
	border-radius: 6px;
	animation: bbgMapShimmer 1.4s ease infinite;
}
.bbg-map-card-skeleton .bbg-map-card-photo { border-radius: 10px; }
@keyframes bbgMapShimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.bbg-map-skel { animation: none; background: rgba(255,255,255,0.06); }
}

.bbg-map-loadmore {
	background: transparent;
	border: 1px dashed var(--bbg-border);
	color: var(--bbg-gold);
	border-radius: 10px;
	padding: 10px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 4px;
}
.bbg-map-loadmore:hover { border-color: var(--bbg-gold); }

/* ---------- Map controls ---------- */
.bbg-map-ctrl-btn {
	background: var(--bbg-bg);
	border: 1px solid var(--bbg-border);
	color: var(--bbg-text);
	font-size: 11px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 6px;
	cursor: pointer;
	margin-bottom: 4px;
	white-space: nowrap;
}
.bbg-map-ctrl-btn:hover { border-color: var(--bbg-gold); color: var(--bbg-gold-light); }

/* ---------- Markers ---------- */
.bbg-map-marker-wrap { background: transparent; border: none; }
.bbg-map-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(45deg);
	color: #020609;
	font-size: 13px;
	font-weight: 700;
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.bbg-map-marker > * { transform: rotate(-45deg); }
.bbg-map-badge-hot { box-shadow: 0 0 0 3px rgba(224, 86, 86, 0.45), 0 3px 8px rgba(0, 0, 0, 0.5); }
.bbg-map-badge-featured { box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.45), 0 3px 8px rgba(0, 0, 0, 0.5); }

/* ---------- Popup ---------- */
.leaflet-popup-content-wrapper {
	background: #0d1218;
	color: var(--bbg-text);
	border: 1px solid var(--bbg-border);
	border-radius: 12px;
}
.leaflet-popup-tip { background: #0d1218; }
.bbg-map-popup { width: 220px; }
.bbg-map-popup-photo {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
	display: block;
}
.bbg-map-popup-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	background: #0a0e14;
	color: var(--bbg-gold-light);
}
.bbg-map-popup-body { padding: 10px 2px 2px; }
.bbg-map-popup-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.bbg-map-popup-price { font-family: 'Cinzel', serif; color: var(--bbg-gold-light); font-weight: 700; font-size: 13.5px; }
.bbg-map-popup-meta { color: var(--bbg-text-dim); font-size: 11px; margin-top: 2px; }
.bbg-map-popup-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: 10px;
}
.bbg-map-popup-actions a {
	text-align: center;
	background: var(--bbg-surface);
	border: 1px solid var(--bbg-border);
	color: var(--bbg-text);
	border-radius: 8px;
	padding: 6px 4px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.bbg-map-popup-actions a:hover { background: var(--bbg-gold); border-color: var(--bbg-gold); color: #020609; }
.bbg-map-popup-video-btn { grid-column: 1 / -1; }

/* 2026-07-21: on mobile the map is now a short, pinned-height sticky box
   (see .bbg-map-canvas-wrap below) - a popup with a long title or a
   paragraph-length address (some property locations are full descriptions,
   not short place names) could render taller than the map itself and
   visually overflow it. Leaflet's own maxHeight popup option (set in JS)
   makes .leaflet-popup-content scrollable past this cap; clamping the
   title/meta lines here means most popups never need to scroll at all -
   same clamp+hard-max-height hardening pattern used on every card on this
   page, since -webkit-line-clamp alone has been unreliable here before. */
@media (max-width: 899px) {
	.leaflet-popup-content {
		overflow-y: auto;
	}
	.bbg-map-popup-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-height: 2.5em;
	}
	.bbg-map-popup-meta {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ---------- Video lightbox (lazy-loaded iframe, map popups) ---------- */
.bbg-map-video-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(2, 6, 9, 0.9);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.bbg-map-video-overlay.bbg-open { display: flex; }
.bbg-map-video-box {
	position: relative;
	width: 100%;
	max-width: 900px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
}
.bbg-map-video-box iframe { width: 100%; height: 100%; border: 0; }
.bbg-map-video-close {
	position: absolute;
	top: -44px;
	right: 0;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------- Desktop: side-by-side, 35% cards / 65% map ---------- */
@media (min-width: 900px) {
	.bbg-map-body {
		flex-direction: row;
		height: var(--bbg-map-height);
	}
	.bbg-map-cardlist {
		flex: 0 0 35%;
		max-height: none;
		height: 100%;
		border-right: 1px solid var(--bbg-border);
	}
	.bbg-map-canvas-wrap {
		flex: 1 1 65%;
		height: 100%;
	}
	.bbg-map-filterbar { position: static; }
}

/* ---------- Mobile UX overhaul 2026-07-21, item #2: GENUINE REDESIGN -----
   The previous two patches kept the "full-screen map + absolutely
   positioned overlay bottom-sheet" architecture and tried to fix its
   symptoms (z-index wars, clipped peek cards, filter bar overlap). This
   replaces that architecture entirely:
   - The filter bar is no longer an always-visible overlay eating vertical
     space - it's a compact "Filters" toggle button that opens the actual
     filter controls as a bottom drawer/modal (existing filter markup and
     JS untouched, just a different container treatment).
   - The map gets a normal, bounded height (not 100dvh/full-screen) and
     sits in ordinary document flow.
   - The property list is a normal, single-column, page-scrollable list
     below the map - no overlay, no internal scroll container, no
     expand/collapse state machine. This alone eliminates the entire class
     of z-index/overlap/clipping bugs the old approach kept hitting, since
     nothing here is absolutely positioned against the page's other fixed
     UI (floating chat/call buttons) anymore.
   Desktop (>=900px) is completely untouched - the block above already
   wins there and nothing below touches it. */
@media (max-width: 899px) {
	.bbg-map-app {
		border-radius: 0;
		border: none;
		/* 2026-07-21: overflow:hidden (base rule, desktop-only rounded-corner
		   clip - moot here since border-radius is already 0 on mobile) was
		   left on and silently broke the sticky map below: position:sticky
		   computes its containing block from the nearest ancestor that
		   isn't overflow:visible, and an overflow:hidden .bbg-map-app would
		   have hijacked that role instead of the real viewport. */
		overflow: visible;
	}

	/* Compact filter toggle - replaces the old always-visible filter row */
	.bbg-map-filters-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: calc(100% - 24px);
		margin: 12px;
		padding: 12px 16px;
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid var(--bbg-border);
		border-radius: 12px;
		color: var(--bbg-text);
		font-family: 'Montserrat', sans-serif;
		font-size: 13.5px;
		font-weight: 600;
		cursor: pointer;
	}
	.bbg-map-filters-toggle-icon { color: var(--bbg-gold); font-size: 14px; }
	/* The [hidden] attribute alone didn't reliably beat the explicit
	   display:inline-flex below in testing - forcing it here instead of
	   relying on the browser's default UA-stylesheet handling of [hidden]. */
	.bbg-map-filters-badge[hidden] { display: none !important; }
	.bbg-map-filters-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 999px;
		background: var(--bbg-gold);
		color: #020609;
		font-size: 10.5px;
		font-weight: 800;
	}

	/* Backdrop + drawer - hidden by default, shown when JS toggles
	   .bbg-map-filters-open on .bbg-map-app (tapping the toggle button). */
	.bbg-map-filterbar-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(2, 6, 9, 0.6);
		z-index: 40;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}
	.bbg-map-app.bbg-map-filters-open .bbg-map-filterbar-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.bbg-map-filterbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 41;
		max-height: 80vh;
		max-height: 80dvh;
		overflow-y: auto;
		background: #0d1218;
		border-top: 1px solid var(--bbg-border);
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
		padding: 4px 10px 16px;
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
		/* Hardened 2026-07-21: a real-device test showed this panel
		   permanently visible/pinned at the bottom of the screen at every
		   scroll position, even though transform:translateY(100%) tested
		   correctly in headless verification - meaning on at least one
		   real browser/device, relying on transform alone to hide this
		   wasn't reliable (possible cause: dvh handling, or some other
		   fixed-position/transform interaction specific to that device).
		   visibility+pointer-events are a completely independent hiding
		   mechanism from transform - even if the transform doesn't apply
		   as expected for any reason, the panel still can't be seen or
		   interacted with unless explicitly opened. */
		visibility: hidden;
		pointer-events: none;
		/* Flexbox, not grid: grid's implicit row-track sizing was measured
		   to leave ~55px of invisible empty space per row even after every
		   child's own box confirmed a compact 42px height (cause never
		   fully pinned down - possibly the native checkbox inside
		   .bbg-map-toggle affecting track auto-sizing). Flexbox has no
		   separate "row track" concept to inflate, so this sidesteps it
		   entirely - same calc(50%-Npx) pairing pattern already proven
		   reliable on the Properties page filter bar fix. */
		display: flex !important;
		flex-wrap: wrap;
		gap: 6px;
	}
	@media (prefers-reduced-motion: reduce) {
		.bbg-map-filterbar { transition: none; }
	}
	.bbg-map-app.bbg-map-filters-open .bbg-map-filterbar {
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
	}

	.bbg-map-filterbar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 4px 12px;
		margin-bottom: 8px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		font-family: 'Cinzel', serif;
		font-size: 15px;
		color: var(--bbg-gold-light);
		font-weight: 700;
	}
	.bbg-map-filters-close {
		background: none;
		border: none;
		color: var(--bbg-text);
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
		padding: 0 4px;
	}
	.bbg-map-quick-locations { display: flex; padding: 0 0 8px; gap: 5px; }
	.bbg-map-quick-loc-btn { padding: 6px 12px; font-size: 11.5px; }

	/* Filter fields inside the drawer - 2-per-row pairing via flex-basis,
	   Hot Deals paired with Clear Filters (avoids a lone half-empty row). */
	.bbg-map-filterbar-header { flex: 1 1 100%; }
	.bbg-map-search-wrap { flex: 1 1 100%; height: 42px; }
	.bbg-map-search-wrap .bbg-map-search { height: 100%; box-sizing: border-box; }
	.bbg-map-filter, .bbg-map-toggle, .bbg-map-clear {
		flex: 1 1 calc(50% - 3px);
		min-width: 0;
		padding: 10px;
		font-size: 12.5px;
		height: 42px;
		box-sizing: border-box;
	}
	.bbg-map-toggle { justify-content: center; }

	/* Map: normal flow, bounded height (not full-screen). DOM order is
	   cardlist-then-canvas-wrap (that's what makes desktop's flex-row
	   layout put the list on the left/map on the right using plain
	   source order) - explicit `order` here puts the map first visually
	   on mobile's stacked column without touching the shared markup, so
	   it's immediately visible instead of appearing only after scrolling
	   past the entire property list. */
	.bbg-map-body {
		display: flex;
		flex-direction: column;
	}
	.bbg-map-canvas-wrap {
		/* 2026-07-21: pinned in place while the list scrolls underneath, per
		   explicit request ("map upar hi rukna chahiye jab main neeche
		   properties select karta jaaun"). Sticks flush to the real
		   viewport top - the site header is `position:relative` (confirmed
		   live, not fixed/sticky itself) so it scrolls fully out of the way
		   before this ever reaches top:0, meaning there's nothing left
		   above the viewport for it to overlap. z-index kept low (well
		   under the filter drawer's 40/41 and the floating chat buttons'
		   99998/99999) so both still layer correctly on top of it. */
		position: sticky;
		top: 0;
		z-index: 5;
		height: min(50vh, 430px);
		flex: none;
		order: 1;
	}
	.bbg-map-category-chips-row {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		padding: 10px 10px 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		order: 2;
	}
	.bbg-map-category-chips-row::-webkit-scrollbar { display: none; }
	.bbg-map-cardlist {
		order: 3;
	}

	/* Map controls (Satellite/Locate Me/Reset View/Fullscreen) were only
	   ~24-28px tall, well below the ~44px minimum comfortable touch target -
	   sized up here for real mobile tap-friendliness, with a bit more
	   breathing room between them so taps don't land on the wrong button. */
	.bbg-map-ctrl-btn {
		padding: 10px 14px;
		font-size: 12.5px;
		margin-bottom: 8px;
		min-height: 40px;
	}

	/* "Tap to interact" hint shown while map dragging is disabled (see
	   scroll-trap fix in the JS) - still relevant even with a bounded map
	   height, since a swipe starting on the map itself could otherwise be
	   captured as a pan instead of a page scroll. */
	.bbg-map-activate-hint {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 15;
		background: rgba(2, 6, 9, 0.78);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		border: 1px solid var(--bbg-border);
		color: var(--bbg-gold-light);
		font-family: 'Montserrat', sans-serif;
		font-size: 12.5px;
		font-weight: 600;
		letter-spacing: 0.3px;
		padding: 10px 20px;
		border-radius: 999px;
		pointer-events: none;
		white-space: nowrap;
	}

	/* Property list: normal, single-column, page-scrollable - no overlay,
	   no internal scroll container, no expand/collapse state. Extra
	   bottom padding clears the floating chat/call buttons (58px button +
	   22px offset + safe-area-inset-bottom, rounded up). */
	.bbg-map-sheet-handle { display: none; }
	.bbg-map-cardlist {
		position: static;
		height: auto;
		max-height: none;
		background: transparent;
		border-top: none;
		border-radius: 0;
		box-shadow: none;
		padding: 4px 12px calc(96px + env(safe-area-inset-bottom, 0px));
		overflow: visible;
	}
	.bbg-map-cardlist-status { padding: 6px 4px; }

	.bbg-map-cardlist-items {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.bbg-map-card {
		flex: 1 1 auto;
		max-width: none;
	}
	.bbg-map-loadmore { flex: 0 0 auto; }
}