/**
 * Location & Sitemap page: one full-bleed interactive Google Map replacing
 * the printed campus sitemap, Annex sitemap and "restaurants within biking
 * distance" PDFs. Category filters live in the legend as checkboxes (.smx-
 * prefix throughout), with a compact places list floating on the opposite
 * side; both panels collapse, and on mobile they dock to the bottom edge as
 * stacked bars.
 *
 * The page head is the shared page header (inc/page-header.php), the same
 * block every other templated page opens with. Colors below are home.css's
 * own :root tokens
 * (--ink/--mist/--green/--warm-gray/--line), which are scoped to the homepage
 * only, so the concrete hex values are repeated here rather than pulling in
 * the rest of that stylesheet just for its tokens.
 */

.fc-sitemap-template {
	font-family: var(--font-body);
	color: #1f2419;
}

/* #primary sits inside Astra's own .ast-container (page.php's normal markup:
   #content.site-content > .ast-container > #primary), which the Customizer's
   inline CSS caps to a fixed max-width with side padding — the actual source
   of "boxed", not something a descendant can escape with margin/vw math,
   since percentage margins resolve against that same boxed container, not
   the viewport. Scoped to .site-content specifically (not a bare
   .page-id-24 .ast-container), since the header/nav (#masthead) reuses the
   same .ast-container class for its own row and must stay boxed — a bare
   body-class selector widened it too. Mirrors leasing-details.css's
   .site-content > .ast-container pattern. */
.page-id-24 .site-content > .ast-container {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The Customizer's inline CSS also gives #primary a 60px bottom margin at
   desktop width (.ast-plain-container.ast-no-sidebar #primary), which here
   reads as an empty strip between the map section and the footer, since this
   page's one section already carries its own bottom padding. style.css zeroes
   the matching top margin sitewide but deliberately leaves the bottom one, so
   this is scoped to the template's own class rather than changed there.
   !important because that Customizer selector (one id, two classes) outranks
   this one on specificity alone. */
#primary.fc-sitemap-template {
	margin-bottom: 0 !important;
}

/* The page's own head is the shared page header now (inc/page-header.php,
   assets/page-header.css), so the .section-head rules that used to live here
   are gone. They were a copy of home.css's section head, which puts the
   eyebrow below the heading as a subtitle and tops out at an h2; this page
   opens the document, so it gets the same eyebrow-above-h1 block as every
   other templated page. */

/* Boundary text labels: rendered via a BoundaryLabel OverlayView
   (sitemap-map.js) into Google's floatPane, which sits above the marker
   pane, so the label always draws over pin icons instead of getting
   covered by them. No background box: legibility over any basemap comes
   from a white text-stroke instead (webkit-text-stroke, plus a text-shadow
   fallback for browsers that ignore it), color is set inline per-boundary
   from the same hex the polygon stroke uses, and the whole label sits at
   80% opacity so it reads as an overlay rather than solid UI chrome. */
.sm-boundary-label {
	position: absolute;
	z-index: 1;
	transform: translate(-50%, -50%);
	opacity: 0.8;
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	white-space: nowrap;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	-webkit-text-stroke: 3px #fff;
	paint-order: stroke fill;
	text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
	pointer-events: none;
}

/* Same overlay mechanism as .sm-boundary-label above, but reads as one of
   Google's own place labels (bold, dark gray, sentence case, no tracking)
   instead of the campus/annex treatment's brand colors, so it blends with
   the basemap's native labels rather than standing apart from them. */
.sm-place-label {
	position: absolute;
	z-index: 1;
	transform: translate(-50%, -50%);
	font-family: Roboto, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: #3c3c3c;
	-webkit-text-stroke: 2px #e7e3dc;
	paint-order: stroke fill;
	text-shadow: 0 0 3px #e7e3dc, 0 0 3px #e7e3dc, 0 0 3px #e7e3dc;
	pointer-events: none;
}

.sm-disclaimer {
	margin: 20px auto 0;
	max-width: 1600px;
	font-size: 13px;
	color: #6b6e63;
	text-align: center;
}

.smx-section {
	width: 100%;
	background: #fff;
	/* No side padding: the map is meant to run the full width of the page,
	   so the page header carries its own gutter instead (page-header.css
	   gives the "section" spacing 20px, matching the 24px this used to add).
	   Top padding matches the shared page header's own "page" spacing
	   (page-header.css: 84px / 52px) so every "section"-spaced header opens
	   with the same top gap as a "page"-spaced one like Contact's. */
	padding: 84px 0 40px;
}

/* Closing bento (news.css): continues the map section's white instead of
   dropping to the page's mist, and starts right under the disclaimer, so its
   outer margin becomes white padding. */
.fc-sitemap-template .fc-news-bento {
	margin: 0;
	padding: 0 0 90px;
	background: #fff;
}

/* --- The map itself --- */

.smx-mapwrap {
	position: relative;
	width: 100%;
	/* Tall enough to be worth going full width for, but never so tall that
	   the page's own scroll is swallowed by it on a short laptop screen. */
	height: clamp(460px, 72vh, 760px);
	background: #e7e3dc;
	overflow: hidden;
}

.smx-map {
	position: absolute;
	inset: 0;
}

/* --- Community mark over the map ---
   Floated over the map frame rather than pinned to a point on it: centred on
   the frame, a fixed distance from its top edge, and the same size whatever
   the map is doing underneath. Sits between the two panels, which hug the left
   and right edges, and never takes pointer events so a drag or a pin click
   passes straight through. --smx-logo-w is shared with .smx-empty below, which
   has to clear it; the 0.365 factor is the artwork's own 175.2/480 aspect. */
.smx-mapwrap {
	--smx-logo-w: 200px;
}

.smx-maplogo {
	position: absolute;
	z-index: 3;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	width: var(--smx-logo-w);
	height: auto;
	/* Solid green wordmark over a light basemap, lifted just enough to stay
	   readable where it crosses a road or a boundary fill. */
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9))
		drop-shadow(0 0 10px rgba(255, 255, 255, 0.75));
	pointer-events: none;
	user-select: none;
}

/* Once Maps has loaded, sitemap-map.js moves the mark into the map's own pane
   stack (a FrameLogo OverlayView in overlayMouseTarget) so a pin popup, which
   is drawn inside the map canvas, layers above it. left/top then come from
   that overlay, recomputed against the frame on every draw, and only the
   horizontal centring stays here. The rule above still positions it for the
   server-rendered case, i.e. before or without Maps. */
.smx-maplogo.is-in-map {
	top: 0;
	left: 0;
}

/* Shown when every box is unchecked, so an empty map reads as a filter
   state rather than something that failed to load. */
.smx-empty {
	position: absolute;
	z-index: 3;
	/* Below the mark, not behind it: its 30px offset, plus its height (width
	   x the 0.365 aspect), plus a gap. */
	top: calc(30px + (var(--smx-logo-w) * 0.365) + 16px);
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(31, 36, 25, 0.88);
	color: #fff;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	pointer-events: none;
}

.smx-empty[hidden] { display: none; }

/* --- Panel rail ---
   One overlay spanning the map with the two panels pushed to opposite
   edges, rather than each being positioned against the map on its own:
   that keeps their top edges aligned and makes the mobile layout (both
   stacked along the bottom) a flex-direction change instead of a second
   set of offsets. The rail itself must not eat map drags, so it's
   pointer-events:none with the panels turning them back on. */
.smx-panels {
	position: absolute;
	/* Same z-index reasoning as .sm-map-legend: high enough to clear the map
	   canvas and its boundary labels, low enough to stay behind the sticky
	   site header when the page scrolls past it. */
	z-index: 2;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
	pointer-events: none;
}

.smx-panel {
	display: flex;
	flex-direction: column;
	width: 264px;
	max-width: 100%;
	/* Never taller than the map it floats over. */
	max-height: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 6px 22px rgba(31, 36, 25, 0.18);
	overflow: hidden;
	pointer-events: auto;
}

/* Wider than the legend: its rows carry a name and a meta column side by
   side, so they run out of room first. */
.smx-places { width: 297px; }

/* The bar is the whole control when collapsed and a header with a collapse
   affordance when open, so it's a real button at every width. */
.smx-panel-bar {
	appearance: none !important;
	display: flex !important;
	align-items: center;
	gap: 9px;
	width: 100%;
	flex: none;
	/* 44px minimum touch target. */
	min-height: 46px !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #1f2419 !important;
	font-family: var(--font-body) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.9px !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.smx-panel-bar:hover { background: #f3f1ec !important; }

.smx-panel-bar-icon {
	display: inline-flex;
	flex: none;
	color: #4a7c3a;
}

.smx-panel-bar-icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

.smx-panel-bar-text { flex: 1 1 auto; }

/* Running count of what's plotted right now, so a collapsed bar still
   reports the filter state without being opened. */
.smx-panel-bar-count {
	flex: none;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: none;
	color: #6b6e63;
	white-space: nowrap;
}

.smx-panel-bar-chevron {
	display: inline-flex;
	flex: none;
	color: #6b6e63;
	transition: transform 0.2s ease;
}

.smx-panel-bar-chevron svg {
	width: 15px;
	height: 15px;
	display: block;
}

.smx-panel.is-collapsed .smx-panel-bar-chevron { transform: rotate(-90deg); }

.smx-panel-body {
	border-top: 1px solid #e3e0d8;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #4a7c3a #e7e3dc;
}

.smx-panel-body::-webkit-scrollbar { width: 7px; }
.smx-panel-body::-webkit-scrollbar-track { background: #e7e3dc; }
.smx-panel-body::-webkit-scrollbar-thumb { background: #4a7c3a; border-radius: 4px; }

/* Open is the desktop default, so plain markup with no state class renders
   expanded there. The mobile block below flips that default, which is what
   makes the collapsed-on-phones state correct before any JS has run: the
   panels are server-rendered open, and the script that used to close them
   doesn't execute until the Google Maps callback fires, so both sheets sat
   over the map until then (and stayed there if Maps failed to load). */
.smx-panel.is-collapsed .smx-panel-body { display: none; }

/* --- Legend panel body --- */

.smx-legend .smx-panel-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.smx-legend-logo {
	width: 132px;
	height: auto;
	display: block;
	margin-inline: auto;
}

/* --- Checkbox rows --- */

.smx-filters {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.smx-filters-legend {
	padding: 0;
	margin-bottom: 7px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #6b6e63;
}

.smx-filter {
	/* Anchors the visually-hidden input below, which would otherwise position
	   itself against the panel and sit in its top corner. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	/* 44px tall including padding: these are the primary touch targets. */
	padding: 9px 8px;
	margin: 0 -8px;
	border-radius: 7px;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.smx-filter:hover { background: #f3f1ec; }

/* Dimmed rather than hidden when off, so the row still says what it is and
   how many pins turning it back on would add. */
.smx-filter.is-off { opacity: 0.5; }

/* The native input stays in the DOM (keyboard, form semantics, :focus-visible
   all keep working) with the styled box drawn next to it. Not display:none,
   which would take it out of the tab order. */
.smx-filter-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.smx-filter-box {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid #b9b5a8;
	border-radius: 5px;
	background: #fff;
	color: #fff;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.smx-filter-box svg {
	width: 12px;
	height: 12px;
	display: block;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.12s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

.smx-filter-input:checked + .smx-filter-box {
	background: #4a7c3a;
	border-color: #4a7c3a;
}

.smx-filter-input:checked + .smx-filter-box svg {
	opacity: 1;
	transform: scale(1);
}

.smx-filter-input:focus-visible + .smx-filter-box {
	outline: 2px solid #1f2419;
	outline-offset: 2px;
}

/* Each layer's own pin color next to its label — this is what makes the
   control double as the legend (the layer-list pattern), instead of needing
   a separate color key somewhere else on the map. The same swatch marks each
   row of the places list, so the two panels read as one system. */
.smx-swatch {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.smx-swatch--apartment { background: var(--fc-ink); }
.smx-swatch--retail { background: #b08b57; }
.smx-swatch--ev { background: #e0a824; }
.smx-swatch--restaurant { background: #4a7c3a; }
.smx-swatch--outdoor { background: #2e8b8b; }

.smx-filter-name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: #1f2419;
	line-height: 1.25;
}

.smx-filter-count {
	flex: none;
	min-width: 22px;
	padding: 2px 6px;
	border-radius: 999px;
	background: #e7e3dc;
	font-family: var(--font-body);
	font-size: 10.5px;
	font-weight: 700;
	color: #6b6e63;
	text-align: center;
	line-height: 1.4;
}

/* --- Select all / Clear / Reset view --- */

.smx-legend-actions {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-top: 11px;
	border-top: 1px solid #e3e0d8;
}

/* !important throughout: style.css's generic button rules would otherwise
   paint these as filled green blocks. */
.smx-mini {
	appearance: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 2px 0 !important;
	margin: 0 !important;
	font-family: var(--font-body) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.9px !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	color: #4a7c3a !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

.smx-mini:hover { color: #1f2419 !important; }

.smx-mini-sep {
	width: 1px;
	height: 11px;
	background: #d8d4c5;
	flex: none;
}

/* --- Boundary key (not filterable, the outlines always draw) --- */

.smx-legend-boundaries {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-top: 11px;
	border-top: 1px solid #e3e0d8;
}

.smx-boundary-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-accent);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #1f2419;
}

.smx-line {
	flex: none;
	width: 16px;
	height: 3px;
}

.smx-line--campus { background: var(--fc-slate-900); }
.smx-line--annex { background: var(--fc-green-light); }

/* --- Places list ---
   Grouped by category under sticky headers rather than run as one flat list
   with the category repeated on every row. Repeating it meant the label and
   the place name competed for the same ~300px, so names wrapped to two lines
   and labels truncated mid-word. Naming the category once per group frees the
   whole row width for the name, and the headers double as position markers in
   a list where one category (Eateries) is over half the rows. */

.smx-places-list,
.smx-place-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.smx-place-group { margin: 0; }

/* Whole groups toggle with their category, so individual rows never need
   hiding — the header goes with them instead of being left stranded above an
   empty section. */
.smx-place-group[hidden] { display: none; }

/* Sticks to the top of the scrolling panel body, so the category you're
   reading is always named even 40 rows into Eateries. */
.smx-place-group-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: #e7e3dc;
	border-bottom: 1px solid #dedacf;
}

.smx-place-group-name {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: #3b4034;
}

.smx-place-group-count {
	margin-left: auto;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	color: #6b6e63;
}

.smx-place { margin: 0; }

.smx-place + .smx-place .smx-place-btn { border-top: 1px solid #f0eee8; }

.smx-place-btn {
	appearance: none !important;
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	/* Roomy enough to stay a comfortable tap target while still fitting a
	   lot of rows on screen. Indented on the left to clear the header's
	   swatch, so names line up with the header label above them. */
	min-height: 40px !important;
	padding: 9px 14px 9px 33px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.smx-place-btn:hover { background: #f3f1ec !important; }

.smx-place-btn:focus-visible {
	outline: 2px solid #1f2419;
	outline-offset: -2px;
}

.smx-place-name {
	font-family: var(--font-display);
	font-size: 14px;
	line-height: 1.25;
	color: #1f2419;
	min-width: 0;
}

/* Only rows the header can't already speak for carry this, which now means a
   building with a status on it. Never wraps and never truncates. */
.smx-place-meta {
	flex: none;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #6b6e63;
	white-space: nowrap;
}

.smx-places-empty {
	margin: 0;
	padding: 18px 14px;
	font-family: var(--font-body);
	font-size: 12px;
	color: #6b6e63;
	text-align: center;
}

.smx-places-empty[hidden] { display: none; }

/* Mobile: two compact controls with a shared-width supporting panel. */
@media (max-width: 860px) {
	.smx-section { padding-top: 52px; }
	/* A shade taller than it used to be on phones: the open filter panel is
	   measured against this height, and the older 420px floor left a short
	   handset a few pixels short of showing all five categories at once. */
	.smx-mapwrap {
		height: clamp(460px, 72vh, 620px);
		/* A 200px mark takes most of a phone's width, so it comes down to
		   roughly a third of the frame. */
		--smx-logo-w: min(140px, 38vw);
	}

	.smx-maplogo { top: 20px; }
	.smx-panels {
		inset: auto 12px 26px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
		padding: 0;
		align-items: stretch;
	}
	.smx-panel, .smx-places {
		width: auto;
		max-width: none;
		overflow: visible;
		background: none;
		box-shadow: none;
	}
	.smx-places { order: 1; }
	.smx-legend { order: 2; }
	.smx-panel-bar {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 28px;
		gap: 3px 6px;
		min-height: 64px !important;
		height: 100%;
		padding: 10px !important;
		border: 1px solid #c6cbbf !important;
		border-radius: 12px !important;
		box-shadow: 0 3px 12px rgba(31, 36, 25, .16) !important;
		font-size: 14px !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		touch-action: manipulation;
	}
	.smx-panel-bar-icon { display: none; }
	.smx-panel-bar-text { grid-column: 1; align-self: end; }
	.smx-panel-bar-count { grid-column: 1; font-size: 11px; align-self: start; }
	.smx-panel-bar-chevron {
		grid-column: 2;
		grid-row: 1 / 3;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		background: #e5eee0;
		color: #355829;
	}
	.smx-panel-bar-chevron svg { width: 17px; height: 17px; }
	.smx-panel:not(.is-expanded) .smx-panel-bar-chevron { transform: rotate(180deg); }
	.smx-panel.is-expanded .smx-panel-bar-chevron { transform: none; background: #355829; color: #fff; }
	.smx-panel.is-expanded .smx-panel-bar { background: #e5eee0 !important; border-color: #4a7c3a !important; }
	.smx-panel-bar:active { background: #d7e4ce !important; }
	.smx-panel-bar:focus-visible { outline: 2px solid #355829; outline-offset: 3px; }
	.smx-panel-body {
		position: absolute;
		bottom: calc(100% + 8px);
		left: 0;
		right: 0;
		/* As tall as the map can hold: the script measures the gap between the
		   top of the map and the button row and publishes it as
		   --smx-panel-max, so the filter list fits without scrolling and the
		   places list shows as many rows as there is room for. The fallback
		   covers the moment before that measurement lands. */
		max-height: var(--smx-panel-max, min(52vh, 430px));
		background: #fff;
		border: 1px solid #c6cbbf;
		border-radius: 14px;
		box-shadow: 0 6px 22px rgba(31, 36, 25, .18);
		overscroll-behavior: contain;
	}
	.smx-panel:not(.is-expanded) .smx-panel-body { display: none; }
	.smx-legend .smx-panel-body { padding: 12px 14px; gap: 10px; }
	/* The logo is the one thing in here that isn't a control, and dropping it
	   is what lets the five categories, the actions and the boundary key all
	   fit on a short phone without a scrollbar. */
	.smx-legend .smx-legend-logo { display: none; }
	.smx-empty { top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.smx-panel-bar,
	.smx-panel-bar-chevron,
	.smx-filter-box,
	.smx-filter-box svg,
	.smx-filter,
	.smx-place-btn,
	.smx-mini {
		transition: none;
	}
}

/* Google's own InfoWindow chrome, styled to match the homepage's
   .loc-popup treatment exactly (home.css). */
.gm-style .gm-style-iw-c {
	padding: 0 !important;
	border-radius: 13px !important;
	background: #fff !important;
	box-shadow: 0 16px 32px rgba(31, 36, 25, 0.17), 0 2px 9px rgba(31, 36, 25, 0.075) !important;
	max-width: 240px !important;
}
.gm-style .gm-style-iw-d {
	overflow: hidden !important;
	max-width: none !important;
	background: #fff !important;
	border-radius: 13px !important;
}
.gm-style .gm-style-iw-t::after,
.gm-style .gm-style-iw-tc::after {
	background: #fff !important;
	box-shadow: 0 2px 6px rgba(31, 36, 25, 0.1) !important;
}
.gm-style .gm-style-iw-c button.gm-ui-hover-effect { display: none !important; }
.gm-style .gm-style-iw-chr { display: none !important; }

.sm-popup {
	position: relative;
	padding: 27px 19px 16px;
	min-width: 150px;
	font-family: var(--font-body);
	background: #fff;
	text-align: center;
}

.sm-popup-eyebrow {
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	color: #4a7c3a;
	margin-bottom: 4px;
}

.sm-popup-place {
	display: block;
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1.25;
	color: #1f2419;
}

.sm-popup-time {
	display: inline-block;
	margin-top: 9px;
	padding: 5px 12px;
	font-family: var(--font-body);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #fff;
	background: #4a7c3a;
	border-radius: 20px;
}

/* Filled pill CTA (only apartment building popups carry this) — a scaled-
   down version of home.css's .card-cta treatment for the same "go look at
   this building" action, sized to fit the compact popup instead of a
   full-width card. */
.sm-popup-link {
	display: inline-block;
	margin-top: 9px;
	padding: 5px 14px;
	font-family: var(--font-body);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #fff !important;
	background: #4a7c3a;
	border-radius: 20px;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.sm-popup-link:hover { background: #1f2419; }

/* Mist-toned close button on the new white card (was a black circle on
   the old khaki card, which read too heavy against white). */
.sm-popup button.sm-popup-close {
	position: absolute !important;
	top: 7px !important;
	right: 7px !important;
	z-index: 2;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	border: 0 !important;
	background: #e7e3dc !important;
	color: #1f2419 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}

.sm-popup button.sm-popup-close:hover { background: #d8d4c5 !important; }

.sm-popup button.sm-popup-close svg {
	width: 11px !important;
	height: 11px !important;
	stroke: #1f2419 !important;
	transform: rotate(45deg);
}