.vmp-map-app {
	--vmp-bg: #130f0d;
	--vmp-surface: rgba(255, 250, 245, 0.93);
	--vmp-surface-strong: #fffaf5;
	--vmp-text: #241916;
	--vmp-muted: #6d5f58;
	--vmp-border: rgba(255, 244, 232, 0.34);
	--vmp-line: #dccbc0;
	--vmp-accent: #c4512d;
	--vmp-accent-dark: #8f321e;
	--vmp-teal: #18b7a0;
	--vmp-blue: #2563eb;
	background: var(--vmp-bg);
	color: var(--vmp-text);
	font-family: inherit;
	margin: 0 calc(50% - 50vw);
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	width: 100vw;
}

.vmp-map-shell {
	display: grid;
	grid-template-areas:
		"topbar topbar"
		"map panel"
		"footer footer";
	grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
	grid-template-rows: auto minmax(620px, 1fr) auto;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	overflow: visible;
	position: relative;
}

.vmp-map-canvas {
	background: var(--vmp-bg);
	grid-area: map;
	height: 100%;
	min-height: 620px;
	width: 100%;
}

.vmp-map-canvas .leaflet-container {
	background: var(--vmp-bg);
}

.vmp-map-canvas .leaflet-control-zoom {
	border: 0;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
	margin-left: 20px;
	margin-top: 20px;
}

.vmp-map-canvas .leaflet-control-zoom a {
	background: rgba(255, 250, 245, 0.94);
	color: #241916;
}

.vmp-map-topbar {
	align-items: center;
	align-self: start;
	backdrop-filter: blur(18px);
	background: rgba(33, 24, 20, 0.76);
	border: 1px solid var(--vmp-border);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
	display: grid;
	gap: 14px;
	grid-area: topbar;
	grid-template-columns: minmax(180px, auto) minmax(280px, 680px) auto;
	margin: 18px;
	padding: 12px;
	position: relative;
}

.vmp-map-brand {
	color: #fffaf5;
	display: grid;
	line-height: 1.1;
	min-width: 0;
}

.vmp-map-brand span {
	color: #f0b08e;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.vmp-map-brand strong {
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 800;
	letter-spacing: 0;
}

.vmp-parcel-search {
	align-items: stretch;
	background: rgba(255, 250, 245, 0.12);
	border: 1px solid rgba(255, 244, 232, 0.2);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	min-width: 0;
}

.vmp-parcel-search input {
	background: rgba(255, 250, 245, 0.95);
	border: 0;
	color: var(--vmp-text);
	font: inherit;
	min-height: 44px;
	min-width: 0;
	outline: 0;
	padding: 0 14px;
	width: 100%;
}

.vmp-parcel-search input:focus {
	box-shadow: inset 0 0 0 2px var(--vmp-teal);
}

.vmp-parcel-search button,
.vmp-account-link,
.vmp-buy-button {
	align-items: center;
	background: var(--vmp-accent);
	border: 1px solid var(--vmp-accent-dark);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 800;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.vmp-parcel-search button:hover,
.vmp-parcel-search button:focus,
.vmp-account-link:hover,
.vmp-account-link:focus,
.vmp-buy-button:hover,
.vmp-buy-button:focus {
	background: var(--vmp-accent-dark);
	color: #ffffff;
}

.vmp-account-link {
	background: rgba(255, 250, 245, 0.12);
	border-color: rgba(255, 244, 232, 0.34);
	color: #fffaf5;
}

.vmp-parcel-panel {
	align-self: stretch;
	backdrop-filter: blur(18px);
	background: var(--vmp-surface);
	border-left: 1px solid var(--vmp-line);
	box-shadow: -18px 0 60px rgba(0, 0, 0, 0.24);
	grid-area: panel;
	justify-self: stretch;
	margin-top: 0;
	max-width: none;
	overflow: auto;
	padding: 22px;
	position: relative;
	width: auto;
}

.vmp-parcel-panel h3 {
	font-size: 21px;
	font-weight: 850;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0 0 16px;
}

.vmp-muted {
	color: var(--vmp-muted);
	margin: 0;
}

.vmp-detail-list {
	display: grid;
	gap: 10px 12px;
	grid-template-columns: 104px minmax(0, 1fr);
	margin: 0 0 18px;
}

.vmp-detail-list dt {
	color: var(--vmp-muted);
	font-weight: 800;
}

.vmp-detail-list dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.vmp-selected-name {
	color: var(--vmp-accent-dark);
	font-size: 18px;
	font-weight: 850;
	line-height: 1.25;
	margin: -4px 0 12px;
	overflow-wrap: anywhere;
}

.vmp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 14px;
}

.vmp-badge {
	background: #f4e4d9;
	border: 1px solid #cfaa94;
	color: #42251d;
	display: inline-flex;
	font-size: 12px;
	font-weight: 850;
	line-height: 1.2;
	padding: 6px 8px;
	text-transform: uppercase;
}

.vmp-rarity-rare,
.vmp-rarity-premium,
.vmp-rarity-legendary {
	background: #e8f4ff;
	border-color: #8bbbe8;
	color: #163a5f;
}

.vmp-rarity-legendary {
	background: #fff2bf;
	border-color: #d99e28;
	color: #5b3800;
}

.vmp-score {
	background: #e6d7cd;
	display: block;
	height: 8px;
	margin: 0 0 5px;
	overflow: hidden;
	width: 100%;
}

.vmp-score span {
	background: linear-gradient(90deg, #c4512d, #18b7a0);
	display: block;
	height: 100%;
}

.vmp-scan-report {
	background: rgba(24, 183, 160, 0.1);
	border-left: 4px solid var(--vmp-teal);
	color: var(--vmp-text);
	margin: 0 0 16px;
	padding: 12px;
}

.vmp-scan-report strong {
	display: block;
	font-size: 13px;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.vmp-scan-report p {
	margin: 0;
}

.vmp-map-footer {
	align-self: stretch;
	backdrop-filter: blur(18px);
	background: rgba(33, 24, 20, 0.78);
	border: 1px solid var(--vmp-border);
	box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.22);
	color: #fffaf5;
	display: grid;
	gap: 10px;
	grid-area: footer;
	justify-self: stretch;
	margin: 18px;
	max-width: none;
	padding: 14px;
	position: relative;
}

.vmp-legend {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
}

.vmp-legend span {
	align-items: center;
	display: inline-flex;
	font-weight: 800;
	gap: 7px;
	white-space: nowrap;
}

.vmp-swatch {
	border: 2px solid currentColor;
	display: inline-block;
	height: 14px;
	width: 14px;
}

.vmp-free {
	background: rgba(255, 255, 255, 0.15);
	color: #fff4e8;
}

.vmp-reserved {
	background: rgba(251, 191, 36, 0.64);
	color: #f59e0b;
}

.vmp-sold {
	background: rgba(37, 99, 235, 0.58);
	color: #ef4444;
}

.vmp-selected {
	background: rgba(24, 183, 160, 0.7);
	color: #ffffff;
}

.vmp-legal {
	border-left: 4px solid #f0b08e;
	color: #f4e6dc;
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
	padding-left: 12px;
}

.vmp-status-message {
	font-weight: 850;
	margin: 0;
	min-height: 22px;
}

.vmp-message-info {
	color: #93c5fd;
}

.vmp-message-success {
	color: #5eead4;
}

.vmp-message-error {
	color: #fca5a5;
}

.vmp-buy-button:disabled {
	cursor: progress;
	opacity: 0.72;
}

.vmp-buy-primary {
	width: 100%;
}

.vmp-popup h4 {
	font-size: 15px;
	margin: 0 0 8px;
}

.vmp-popup-name {
	color: var(--vmp-accent-dark);
	font-weight: 850;
	margin: -2px 0 8px;
}

.vmp-popup p {
	margin: 6px 0;
}

.vmp-popup .vmp-buy-button {
	margin-top: 8px;
	width: 100%;
}

@media (max-width: 1120px) {
	.vmp-map-shell {
		grid-template-areas:
			"topbar"
			"map"
			"panel"
			"footer";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(620px, 70svh) auto auto;
	}

	.vmp-map-topbar {
		grid-template-columns: 1fr;
	}

	.vmp-map-canvas .leaflet-control-zoom {
		margin-top: 20px;
	}

	.vmp-parcel-panel {
		border-left: 0;
		border-top: 1px solid var(--vmp-line);
		box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.22);
		max-height: none;
	}

	.vmp-map-footer {
		max-width: none;
	}
}

@media (max-width: 820px) {
	.vmp-map-app,
	.vmp-map-shell {
		min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	}

	.vmp-map-canvas {
		height: 100%;
		min-height: 620px;
	}

	.vmp-map-topbar {
		margin: 10px;
		padding: 10px;
	}

	.vmp-parcel-panel {
		border-left: 0;
		border-top: 1px solid var(--vmp-line);
		box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.28);
		max-width: none;
		padding: 16px;
		width: auto;
	}

	.vmp-map-footer {
		margin: 10px;
		max-width: none;
	}
}

@media (max-width: 540px) {
	.vmp-parcel-search {
		grid-template-columns: 1fr;
	}

	.vmp-parcel-search button,
	.vmp-account-link {
		width: 100%;
	}

	.vmp-map-canvas .leaflet-control-zoom {
		margin-left: 12px;
		margin-top: 12px;
	}

	.vmp-map-footer {
		margin: 0;
	}

	.vmp-detail-list {
		grid-template-columns: 1fr;
	}
}