.mdm {
	--mdm-accent: #0b6fbf;
	--mdm-ink: #14202b;
	--mdm-muted: #5d6b78;
	--mdm-line: #e3e8ee;
	--mdm-land: #dfe5ec;
	--mdm-land-on: #b9cbe0;
	--mdm-bg: #fff;
	color: var(--mdm-ink);
	font-family: inherit;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.mdm *, .mdm *::before, .mdm *::after { box-sizing: border-box; }

.mdm-title { margin: 0 0 16px; font-size: 1.75rem; line-height: 1.2; }

/* Tabs */
.mdm-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 12px;
	flex-wrap: wrap;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.mdm-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--mdm-line);
	border-radius: 999px;
	background: var(--mdm-bg);
	color: var(--mdm-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.mdm-tab:hover { border-color: var(--mdm-accent); }
.mdm-tab:focus-visible { outline: 2px solid var(--mdm-accent); outline-offset: 2px; }
.mdm-tab.is-active { background: var(--mdm-accent); border-color: var(--mdm-accent); color: #fff; }
.mdm-count {
	min-width: 22px;
	padding: 3px 6px;
	border-radius: 999px;
	background: rgba(0,0,0,.07);
	font-size: 12px;
	text-align: center;
}
.mdm-tab.is-active .mdm-count { background: rgba(255,255,255,.25); }

/* Layout */
.mdm-body {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* Map */
.mdm-map {
	position: relative;
	padding: 16px;
	border: 1px solid var(--mdm-line);
	border-radius: 16px;
	background: #f7f9fb;
}
.mdm-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.mdm-map svg.is-peninsula { max-height: 560px; margin: 0 auto; }
.mdm-state {
	fill: var(--mdm-land);
	stroke: #fff;
	stroke-width: 1.2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill .15s;
}
.mdm-state.has-dealers { fill: var(--mdm-land-on); cursor: pointer; }
.mdm-state.has-dealers:hover,
.mdm-state.is-preview { fill: color-mix(in srgb, var(--mdm-accent) 55%, #fff); }
.mdm-state.is-active { fill: var(--mdm-accent); }
.mdm-state:focus { outline: none; }
.mdm-state:focus-visible { stroke: var(--mdm-ink); stroke-width: 2; }

.mdm-hint { margin: 8px 0 0; font-size: 12px; color: var(--mdm-muted); text-align: center; }

.mdm-tip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--mdm-ink);
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	max-width: 240px;
	transition: opacity .1s;
}
.mdm-tip.is-on { opacity: 1; }
.mdm-tip strong { display: block; }
.mdm-tip span { opacity: .8; }

/* Panel */
.mdm-panel {
	border: 1px solid var(--mdm-line);
	border-radius: 16px;
	background: var(--mdm-bg);
	overflow: hidden;
}
.mdm-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--mdm-line);
}
.mdm-panel-head h3 { margin: 0; font-size: 1.25rem; }
.mdm-panel-head span { color: var(--mdm-muted); font-size: 13px; white-space: nowrap; }
.mdm-list { max-height: 560px; overflow-y: auto; }
.mdm-empty { padding: 18px; margin: 0; color: var(--mdm-muted); }

.mdm-shop { padding: 16px 18px; border-bottom: 1px solid var(--mdm-line); }
.mdm-shop:last-child { border-bottom: 0; }
.mdm-shop h4 { margin: 0 0 8px; font-size: 15px; line-height: 1.3; }
.mdm-row {
	display: flex;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--mdm-muted);
}
.mdm-row a { color: var(--mdm-ink); font-weight: 600; text-decoration: none; }
.mdm-row a:hover { color: var(--mdm-accent); }
.mdm svg[aria-hidden] {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mdm-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--mdm-accent) 10%, #fff);
	color: var(--mdm-accent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.mdm-btn:hover { background: var(--mdm-accent); color: #fff; }
.mdm-btn svg[aria-hidden] { margin-top: 0; }

@media (max-width: 781px) {
	.mdm-tabs { flex-wrap: nowrap; }
	.mdm-map svg.is-peninsula { max-height: 440px; }
	.mdm-body { grid-template-columns: 1fr; gap: 16px; }
	.mdm-map { padding: 10px; }
	.mdm-list { max-height: none; }
}