/**
 * MDA Interactive Map — front-end styles.
 *
 * Every visual value is a custom property so the Elementor style controls can
 * override the defaults without a single !important, while per-type values set
 * inline on the marker element keep winning over the global ones.
 */

.mdamap {
	/* The info/legend boxes are absolute children of the root now that they
	   live outside the frame, so the root is the positioning context. */
	position: relative;
	--mdamap-height: 620px;
	--mdamap-radius: 14px;
	--mdamap-shadow: 0 10px 30px rgba( 12, 22, 48, .12 );

	/* Zone panel cards */
	/* The zone list is a grid. --mdamap-panel-columns is the maximum number of
	   cards per row; the panel sizes itself from the column width, the number
	   of columns and the fan offset, so it can never be measured smaller than
	   it actually draws. */
	--mdamap-panel-columns: 1;
	--mdamap-panel-col-width: 348px;
	/* Horizontal space between columns. */
	--mdamap-panel-col-gap: 16px;
	/* Vertical space between rows. */
	--mdamap-panel-gap: 10px;
	/* Sideways step per row — this is what sets the angle of the fan. */
	--mdamap-panel-stagger: 40px;
	/* Downward step per column, so the columns interleave diagonally. */
	--mdamap-panel-col-drop: 25px;
	--mdamap-panel-rows: 1;
	--mdamap-card-bg: #ffffff;
	--mdamap-card-radius: 999px;
	--mdamap-card-shadow: 0 6px 18px rgba( 12, 22, 48, .18 );
	--mdamap-card-pad-y: 5px;
	--mdamap-card-pad-x: 7px;
	--mdamap-name-color: #16264b;
	--mdamap-name-size: 17px;
	--mdamap-name-weight: 700;
	--mdamap-meta-color: #6b7690;
	--mdamap-meta-size: 13px;
	--mdamap-avatar-size: 54px;
	--mdamap-avatar-ring: #f5c518;
	--mdamap-avatar-ring-width: 2px;
	/* The reference design uses a bare red chevron, not a filled badge. The
	   background stays a variable so a badge can be restored from Elementor. */
	--mdamap-arrow-bg: transparent;
	--mdamap-arrow-color: #e4032e;
	--mdamap-arrow-size: 20px;

	/* Boxes */
	--mdamap-box-bg: #16264b;
	--mdamap-box-color: #ffffff;
	--mdamap-box-radius: 12px;
	--mdamap-box-width: 260px;
	--mdamap-box-shadow: 0 8px 24px rgba( 12, 22, 48, .25 );

	position: relative;
	direction: inherit;
}

.mdamap *,
.mdamap *::before,
.mdamap *::after {
	box-sizing: border-box;
}

.mdamap__frame {
	position: relative;
	width: 100%;
	height: var( --mdamap-height );
	min-height: 280px;
	border-radius: var( --mdamap-radius );
	overflow: hidden;
	box-shadow: var( --mdamap-shadow );
	background: #e8eef5;
}

.mdamap__canvas {
	position: absolute;
	inset: 0;
}

/* Google injects its own links/images; keep them from inheriting theme rules. */
.mdamap__canvas img {
	max-width: none;
	background: none;
}

/* Note on the anchors below: markers are positioned by pixel, and the -50%
   translate that centres them on their coordinate only lines up with a
   physical `left`. Logical properties would mirror the offset in RTL and push
   every marker half its own width off its point. */

.mdamap__empty,
.mdamap__status {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	margin: 0;
	padding: 14px 22px;
	background: rgba( 255, 255, 255, .95 );
	border-radius: 10px;
	color: #16264b;
	font-size: 14px;
	text-align: center;
	max-width: 80%;
	z-index: 6;
}

.mdamap__status:empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Markers
 * ------------------------------------------------------------------ */

.mdamap-marker {
	position: absolute;
	width: 0;
	height: 0;
	z-index: var( --m-zindex, 10 );
}

.mdamap-marker.is-hidden {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Theme-proofing
 *
 * Every interactive element here is a real <button>, and page builders style
 * those globally. Elementor's kit, for one, emits:
 *
 *   .elementor-kit-N button { background-color; border-width: 1px;
 *                             border-radius: 100px; padding: 11px 60px; … }
 *
 * That selector is (0,1,1) — a class plus an element — so it outranks a lone
 * plugin class and would wrap every marker in a large filled pill. Scoping the
 * plugin's own rules under .mdamap makes them (0,2,0), which wins on
 * specificity alone, so nothing here needs !important.
 * ------------------------------------------------------------------ */

.mdamap .mdamap-marker__hit,
.mdamap .mdamap-zone,
.mdamap .mdamap-panel__close,
.mdamap .mdamap__legend-btn,
.mdamap .mdamap__box-toggle {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	max-width: none;
	outline: none;
	cursor: pointer;
}

.mdamap .mdamap-marker__hit {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate( -50%, -50% );
	line-height: 0;
}

.mdamap .mdamap-marker--pin .mdamap-marker__hit {
	/* The tip of a pin sits on the coordinate, not its centre. */
	transform: translate( -50%, -100% );
}

.mdamap .mdamap-marker__hit:focus-visible {
	outline: 3px solid #1c64f2;
	outline-offset: 3px;
	border-radius: 6px;
}

.mdamap-marker__shape {
	position: relative; /* anchors the pulse ring drawn in ::before */
	display: block;
	width: var( --m-size, 26px );
	height: var( --m-size, 26px );
	background: var( --m-color, #e4032e );
	border: var( --m-border-width, 2px ) solid var( --m-border-color, #fff );
	border-radius: 50%;
	box-shadow: var( --m-shadow, 0 3px 8px rgba( 12, 22, 48, .35 ) );
	transition: transform .18s ease;
}

.mdamap-marker[data-shape="square"] .mdamap-marker__shape {
	border-radius: 30%;
}

.mdamap-marker[data-shape="pin"] .mdamap-marker__shape {
	border-radius: 50% 50% 50% 0;
	transform: rotate( -45deg );
	display: flex;
	align-items: center;
	justify-content: center;
}

.mdamap-marker[data-shape="pin"] .mdamap-marker__core {
	display: block;
	width: 32%;
	height: 32%;
	border-radius: 50%;
	background: var( --m-inner-color, #fff );
}

.mdamap-marker[data-shape="image"] .mdamap-marker__shape {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	height: auto;
}

/* Custom marker icons are plain <img>, which themes routinely give a radius,
   border or max-width. Scoped and reset so an uploaded icon renders exactly as
   supplied. */
.mdamap .mdamap-marker__img {
	display: block;
	width: var( --m-size, 26px );
	height: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

.mdamap-marker__hit:hover .mdamap-marker__shape,
.mdamap-marker.is-active .mdamap-marker__shape {
	transform: scale( 1.18 );
}

.mdamap-marker[data-shape="pin"] .mdamap-marker__hit:hover .mdamap-marker__shape,
.mdamap-marker[data-shape="pin"].is-active .mdamap-marker__shape {
	transform: rotate( -45deg ) scale( 1.18 );
}

/* Pulse ------------------------------------------------------------ */

.mdamap-marker.has-pulse .mdamap-marker__shape::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var( --m-color, #e4032e );
	opacity: .55;
	animation: mdamap-pulse 2.2s ease-out infinite;
	z-index: -1;
}

@keyframes mdamap-pulse {
	0% { transform: scale( 1 ); opacity: .55; }
	70% { transform: scale( 2.4 ); opacity: 0; }
	100% { transform: scale( 2.4 ); opacity: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mdamap-marker.has-pulse .mdamap-marker__shape::before {
		animation: none;
	}
}

/* Hover bubble ------------------------------------------------------ */

.mdamap-marker__bubble {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate( -50%, calc( -100% - var( --m-size, 26px ) - 12px ) );
	padding: var( --m-bubble-pad-y, 9px ) var( --m-bubble-pad-x, 18px );
	background: var( --m-bubble-bg, #fff );
	color: var( --m-bubble-color, #16264b );
	font-size: var( --m-bubble-size, 15px );
	line-height: 1.35;
	border-radius: var( --m-bubble-radius, 30px );
	box-shadow: 0 6px 18px rgba( 12, 22, 48, .22 );
	/* The bubble stacks a name, a type and optional text, so it wraps instead
	   of running off as one line — but only once it has to. */
	width: max-content;
	max-width: var( --m-bubble-max-width, 240px );
	white-space: normal;
	text-align: var( --m-bubble-align, center );
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, transform .16s ease;
	z-index: 3;
}

/* Each line is driven entirely by its marker type's own settings. */

.mdamap .mdamap-marker__bubble-title {
	display: block;
	font-size: var( --m-bubble-size, 15px );
	font-weight: var( --m-bubble-title-weight, 700 );
	color: var( --m-bubble-color, #16264b );
	line-height: 1.3;
}

.mdamap .mdamap-marker__bubble-type {
	display: block;
	font-size: var( --m-bubble-type-size, 12px );
	font-weight: var( --m-bubble-type-weight, 500 );
	color: var( --m-bubble-type-color, #6b7690 );
	line-height: 1.35;
}

.mdamap .mdamap-marker__bubble-text {
	display: block;
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid var( --m-bubble-rule-color, #e6e9ef );
	font-size: var( --m-bubble-text-size, 13px );
	font-weight: var( --m-bubble-text-weight, 400 );
	color: var( --m-bubble-text-color, #6b7690 );
	line-height: 1.4;
}

/* With nothing above it there is no rule to draw. */
.mdamap .mdamap-marker__bubble-text:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mdamap-marker__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	border: 7px solid transparent;
	border-top-color: var( --m-bubble-bg, #fff );
}

.mdamap-marker.is-bubbling .mdamap-marker__bubble {
	opacity: 1;
	visibility: visible;
	transform: translate( -50%, calc( -100% - var( --m-size, 26px ) - 18px ) );
}

/* Zone button ------------------------------------------------------- */

.mdamap .mdamap-zone {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate( -50%, -50% );
	padding: var( --m-pad-y, 9px ) var( --m-pad-x, 20px );
	background: var( --m-bg, #16264b );
	color: var( --m-color, #fff );
	font-family: inherit;
	font-size: var( --m-size, 16px );
	font-weight: var( --m-weight, 700 );
	line-height: 1.2;
	border: var( --m-border-width, 0 ) solid var( --m-border-color, #fff );
	border-radius: var( --m-radius, 8px );
	box-shadow: 0 5px 16px rgba( 12, 22, 48, .3 );
	white-space: nowrap;
	/* Whole-button transparency. Background-only transparency is handled by
	   baking the alpha into --m-bg, which keeps the label crisp. */
	opacity: var( --m-opacity, 1 );
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.mdamap .mdamap-zone:hover {
	transform: translate( -50%, -50% ) scale( 1.05 );
}

.mdamap .mdamap-marker.is-open .mdamap-zone {
	background: var( --m-active-bg, #e4032e );
	color: var( --m-active-color, #fff );
}

.mdamap .mdamap-zone:focus-visible {
	outline: 3px solid #1c64f2;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * Zone panel
 * ------------------------------------------------------------------ */

.mdamap__panel {
	position: absolute;
	z-index: 20;
	/* The fan offset is part of the box so the measured width matches what is
	   drawn — otherwise the staggered cards would reach past the panel and back
	   over the zone button. */
	width: calc(
		var( --mdamap-panel-col-width ) * var( --mdamap-panel-columns )
		+ var( --mdamap-panel-col-gap ) * ( var( --mdamap-panel-columns ) - 1 )
		+ var( --mdamap-panel-stagger ) * ( var( --mdamap-panel-rows ) - 1 )
	);
	max-width: calc( 100% - 24px );
	pointer-events: none;
}

.mdamap__panel[hidden] {
	display: none;
}

.mdamap__panel-inner {
	pointer-events: auto;
}

.mdamap-panel__head {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	background: var( --mdamap-box-bg );
	color: var( --mdamap-box-color );
	border-radius: var( --mdamap-box-radius ) var( --mdamap-box-radius ) 0 0;
	font-weight: 700;
}

.mdamap .mdamap-panel__close {
	background: rgba( 255, 255, 255, .16 );
	color: inherit;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	flex: none;
}

.mdamap-panel__cards {
	display: grid;
	/* Fixed-width columns laid out column by column: the first column fills
	   top to bottom before the next one starts, matching the design. The panel
	   is wider than the tracks to leave room for the fan, so the grid is pinned
	   to the anchor edge and the slack sits on the far side. */
	grid-template-columns: repeat( var( --mdamap-panel-columns ), var( --mdamap-panel-col-width ) );
	grid-template-rows: repeat( var( --mdamap-panel-rows ), auto );
	grid-auto-flow: column;
	justify-content: start;
	align-items: start;
	gap: var( --mdamap-panel-gap ) var( --mdamap-panel-col-gap );
}

/* Scoped like the buttons above: the card is an <a>, and themes style links
   with class+element selectors that would otherwise outrank a lone class. */
.mdamap .mdamap-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var( --mdamap-card-pad-y ) var( --mdamap-card-pad-x );
	background: var( --mdamap-card-bg );
	border-radius: var( --mdamap-card-radius );
	box-shadow: var( --mdamap-card-shadow );
	text-decoration: none;
	color: inherit;
	max-width: 100%;
	/* Each row steps further from the anchor edge, and each column drops a
	   little lower. Relative offsets rather than margins, so neither shift
	   disturbs the grid tracks. */
	position: relative;
	inset-inline-start: calc( var( --row, 0 ) * var( --mdamap-panel-stagger ) );
	top: calc( var( --col, 0 ) * var( --mdamap-panel-col-drop ) );
	opacity: 0;
	transform: translateY( 8px );
	animation: mdamap-card-in .32s ease forwards;
	animation-delay: calc( var( --i, 0 ) * 45ms );
	transition: box-shadow .18s ease;
}

.mdamap .mdamap-card:hover,
.mdamap .mdamap-card:focus-visible {
	box-shadow: 0 10px 26px rgba( 12, 22, 48, .28 );
}

@keyframes mdamap-card-in {
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mdamap .mdamap-card {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.mdamap-card__img {
	flex: none;
	width: var( --mdamap-avatar-size );
	height: var( --mdamap-avatar-size );
	border-radius: 50%;
	overflow: hidden;
	background: #dfe5ee;
	border: var( --mdamap-avatar-ring-width ) solid var( --mdamap-avatar-ring );
}

.mdamap-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mdamap-card__text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: start;
	padding-inline: 4px;
}

.mdamap-card__name {
	display: block;
	color: var( --mdamap-name-color );
	font-size: var( --mdamap-name-size );
	font-weight: var( --mdamap-name-weight );
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mdamap-card__meta {
	display: block;
	color: var( --mdamap-meta-color );
	font-size: var( --mdamap-meta-size );
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mdamap-card__sep {
	margin: 0 4px;
	opacity: .6;
}

.mdamap-card__arrow {
	flex: none;
	width: var( --mdamap-arrow-size );
	height: var( --mdamap-arrow-size );
	border-radius: 50%;
	background: var( --mdamap-arrow-bg );
	color: var( --mdamap-arrow-color );
	display: flex;
	align-items: center;
	justify-content: center;
}

.mdamap-card__arrow svg {
	width: 60%;
	height: 60%;
	fill: currentColor;
}

/* The chevron is drawn pointing right; mirror it so it always points the way
   the reader is heading. */
.mdamap--rtl .mdamap-card__arrow svg {
	transform: scaleX( -1 );
}

/* A card without a link is presentational, so it must not look clickable. */
.mdamap-card--static {
	cursor: default;
}

/* ------------------------------------------------------------------ *
 * Floating boxes (legend + info)
 * ------------------------------------------------------------------ */

.mdamap__box {
	position: absolute;
	z-index: 8;
	width: var( --mdamap-box-width );
	max-width: calc( 100% - 24px );
	padding: 14px 16px;
	background: var( --mdamap-box-bg );
	color: var( --mdamap-box-color );
	border-radius: var( --mdamap-box-radius );
	box-shadow: var( --mdamap-box-shadow );
}

/* Physical corners on purpose: on a map, "top right" must mean the top right
   in both RTL and LTR, or the boxes jump sides between languages. */
.mdamap__box--top-left { top: 16px; left: 16px; }
.mdamap__box--top-right { top: 16px; right: 16px; }
.mdamap__box--bottom-left { bottom: 16px; left: 16px; }
.mdamap__box--bottom-right { bottom: 16px; right: 16px; }

.mdamap__box h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: inherit;
	line-height: 1.4;
}

.mdamap__info-text {
	font-size: 13px;
	line-height: 1.55;
	opacity: .88;
}

.mdamap__info-text p {
	margin: 0 0 6px;
}

.mdamap__info-text p:last-child {
	margin-bottom: 0;
}

/* Scoped rather than forced: this has to beat `.mdamap__box h3` above, which
   is (0,1,1). */
.mdamap .mdamap__legend-title {
	color: var( --mdamap-legend-title-color, #f5c518 );
}

.mdamap__legend-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mdamap .mdamap__legend-btn {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 2px 0;
	color: inherit;
	font-size: 13px;
	text-align: start;
	transition: opacity .16s ease;
}

.mdamap .mdamap__legend.is-interactive .mdamap__legend-btn {
	cursor: pointer;
}

.mdamap .mdamap__legend-btn:not( .is-on ) {
	opacity: .38;
	text-decoration: line-through;
}

.mdamap__legend-marker {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var( --dot, #e4032e );
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, .35 );
}

.mdamap__legend-marker[data-shape="square"] {
	border-radius: 4px;
}

.mdamap__legend-marker[data-shape="image"] {
	background: none;
	box-shadow: none;
	width: 18px;
	height: 18px;
}

.mdamap__legend-marker img {
	display: block;
	width: 100%;
	height: auto;
}

.mdamap .mdamap__box-toggle {
	display: none;
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .14 );
	color: inherit;
}

.mdamap__box-toggle-icon::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	margin: 0 auto;
	/* Physical: these two borders rotated 45deg form a downward chevron. A
	   logical border-inline-end would mirror to the left edge in RTL and point
	   the chevron sideways. */
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform .18s ease;
}

.mdamap__box.is-collapsed .mdamap__box-toggle-icon::before {
	transform: rotate( -135deg ) translate( -2px, -2px );
}

.mdamap__box.is-collapsed h3 + *,
.mdamap__box.is-collapsed .mdamap__legend-list,
.mdamap__box.is-collapsed .mdamap__info-text {
	display: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media ( max-width: 1024px ) {
	.mdamap {
		--mdamap-box-width: 230px;
		--mdamap-avatar-size: 40px;
		--mdamap-name-size: 14px;
	}
}

/* On narrow screens the floating panel becomes a bottom sheet: the map area
   is too small to place a card stack beside a button without covering it. */
@media ( max-width: 782px ) {
	.mdamap {
		--mdamap-height: 460px;
		--mdamap-box-width: 190px;
		--mdamap-panel-stagger: 0px;
	}

	.mdamap__box {
		padding: 10px 12px;
		font-size: 12px;
	}

	.mdamap__box h3 {
		font-size: 13px;
		margin-bottom: 6px;
		padding-inline-end: 26px;
	}

	/* Below tablet the boxes leave the map entirely: static, full width,
	   stacked under the frame, so nothing covers the map and there is
	   nothing to collapse. */
	/* !important: the Elementor widget styles set the box width per breakpoint with
	   a more specific selector; below tablet the boxes must span the full row. */
	.mdamap__box {
		position: static;
		width: 100% !important;
		max-width: none !important;
		margin-top: 12px;
	}

	.mdamap .mdamap__box-toggle {
		display: none;
	}

	.mdamap__box h3 {
		padding-inline-end: 0;
	}

	/* Legend entries fit in rows once the box is full width. */
	.mdamap__legend-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 22px;
	}

	.mdamap .mdamap__legend-btn {
		width: auto;
	}

	.mdamap__panel {
		position: absolute;
		inset: auto 0 0 0;
		width: auto;
		max-width: none;
		max-height: 62%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		/* The sheet is the scroll container here, so it must take touches. */
		pointer-events: auto;
	}

	.mdamap__panel-inner {
		background: #f4f6fa;
		border-radius: var( --mdamap-box-radius ) var( --mdamap-box-radius ) 0 0;
		box-shadow: 0 -8px 26px rgba( 12, 22, 48, .22 );
		overflow: hidden;
	}

	.mdamap-panel__head {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 2;
		border-radius: 0;
	}

	.mdamap-panel__cards {
		padding: 12px;
	}

	/* The sheet is full width, so the fan is dropped and the columns simply
	   share the available width. The column count still applies. */
	.mdamap-panel__cards {
		grid-template-columns: repeat( var( --mdamap-panel-columns ), minmax( 0, 1fr ) );
		justify-content: stretch;
	}

	.mdamap .mdamap-card {
		inset-inline-start: 0;
		top: 0;
		max-width: none;
	}
}

@media ( max-width: 480px ) {
	.mdamap {
		--mdamap-height: 420px;
		--mdamap-avatar-size: 38px;
		--mdamap-card-radius: 16px;
	}

	.mdamap__box {
		--mdamap-box-width: 160px;
	}

	.mdamap-marker__bubble {
		font-size: 13px;
		padding: 6px 12px;
	}
}


/* Site font: Google Maps injects Roboto via .gm-style — force the site's Heebo on all map overlays */
.mdamap-map [class*="mdamap"],
.mdamap-zone,
.mdamap-marker__bubble,
.mdamap-marker__bubble * {
	font-family: 'Heebo', sans-serif;
}