.drfmap {
	--drfmap-bg: #e8e2d6;
	--drfmap-ink: #24211b;
	--drfmap-muted: #6b6659;
	--drfmap-card: #efe9dc;
	--drfmap-line: #d4cec0;
	--drfmap-accent: #d9622e;
	display: grid;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	color: var(--drfmap-ink);
}
.drfmap *, .drfmap *::before, .drfmap *::after { box-sizing: border-box; }
/* Defend against theme button styling (Nectar/Salient) leaking into our controls. */
.drfmap button {
	-webkit-appearance: none; appearance: none;
	text-transform: none !important; letter-spacing: normal !important;
	font-family: inherit; min-width: 0 !important;
}
.drfmap--keyside { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
.drfmap--keybelow { grid-template-columns: 1fr; }
@media (max-width: 720px) {
	.drfmap--keyside { grid-template-columns: 1fr; }
	/* key sits below the map on mobile (default DOM order) */
}

.drfmap__stage { position: relative; }
.drfmap__viewport {
	position: relative;
	width: 100%;
	height: var(--drfmap-h, 78vh);
	max-height: 82vh;
	overflow: hidden;
	background: var(--drfmap-bg);
	border: 1px solid var(--drfmap-line);
	border-radius: 14px;
	touch-action: pan-y; /* one finger scrolls the page; two fingers pan the map (JS) */
	cursor: grab;
}
.drfmap__viewport:active { cursor: grabbing; }
.drfmap__viewport:focus-visible { outline: 2px solid var(--drfmap-accent); outline-offset: 2px; }

.drfmap__layer { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.drfmap__base { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.drfmap__layer > svg { display: block; }
.drfmap__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.drfmap__pins { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.drfmap__pin {
	position: absolute;
	transform: translate(-50%, -50%);
	-webkit-appearance: none; appearance: none;
	width: 30px !important; height: 30px !important;
	min-width: 0 !important; min-height: 0 !important; max-width: none !important;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50% !important;
	border: 2px solid #2c2820 !important;
	font-weight: 500 !important; font-size: 13px !important; line-height: 1 !important;
	letter-spacing: normal !important; text-transform: none !important;
	color: #ffffff; /* overridden per-pin in JS by luminance */
	cursor: pointer;
	padding: 0 !important; margin: 0 !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.drfmap__pin.is-active { outline: 3px solid #24211b; outline-offset: 2px; z-index: 3; }
.drfmap__pin.is-pulse { animation: drfmap-pulse .9s ease-out 2; }
@keyframes drfmap-pulse { 0% { box-shadow: 0 0 0 0 rgba(44,40,32,.55); } 100% { box-shadow: 0 0 0 16px rgba(44,40,32,0); } }

.drfmap__toolbar { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; gap: 6px; }
/* .drfmap prefix raises specificity above Salient's body[data-button-style] button */
.drfmap .drfmap__btn {
	-webkit-appearance: none; appearance: none;
	width: 36px !important; height: 36px !important; min-width: 0 !important;
	display: flex; align-items: center; justify-content: center;
	background: var(--drfmap-card); color: var(--drfmap-ink);
	border: 1px solid var(--drfmap-line); border-radius: 9px !important;
	font-size: 20px; line-height: 1; cursor: pointer;
	padding: 0 !important; margin: 0 !important; letter-spacing: normal !important;
}
.drfmap__btn:hover { border-color: var(--drfmap-accent); }

.drfmap__key {
	display: flex; flex-direction: column; gap: 4px;
	background: #ece5d6;
	border-radius: 8px;
	border: 2px solid #24211b;
	padding: 6px;
}
.drfmap--keybelow .drfmap__key { flex-direction: row; flex-wrap: wrap; }
.drfmap__key-row {
	display: flex; align-items: center; gap: 10px;
	width: 100%; text-align: left;
	background: transparent; color: var(--drfmap-ink);
	border: 0 !important; border-radius: 9px !important; padding: 8px 10px;
	cursor: pointer; font: inherit;
}
.drfmap--keybelow .drfmap__key-row { width: auto; }
.drfmap__key-row:hover, .drfmap__key-row.is-active { background: #ded6c2; }
.drfmap__key-dot {
	flex: 0 0 auto; width: 20px !important; height: 20px !important;
	min-width: 0 !important; border-radius: 50% !important;
	display: flex; align-items: center; justify-content: center;
	font-weight: 500; font-size: 11px; line-height: 1; color: #ffffff; /* overridden per-dot in JS */
	border: 2px solid #2c2820;
}
.drfmap__key-label { font-size: 14px; }

.drfmap__panel {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5;
	max-width: 420px; margin: 0 auto;
	background: #1e1c17; color: #f5f2ea;
	border: 0; border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 12px 34px rgba(30,28,23,.42);
}
.drfmap__panel[hidden] { display: none; }
.drfmap__panel-close {
	position: absolute; top: 8px; right: 10px;
	background: transparent; border: 0; color: #8a857a;
	font-size: 24px; line-height: 1; cursor: pointer; padding: 4px;
}
.drfmap__panel-title { margin: 0 24px 6px 0; font-size: 18px; font-weight: 500; color: #f5f2ea; }
.drfmap__panel-desc { margin: 0; font-size: 14px; line-height: 1.6; color: #c9c4b6; }
.drfmap__panel-cta { margin-top: 12px; }
.drfmap__panel-cta a {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 14px; font-weight: 500; color: #e6b455; text-decoration: none;
}
.drfmap__panel-cta a:hover { text-decoration: underline; }

.drfmap__hint {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	z-index: 6; pointer-events: none;
	background: rgba(15,15,13,.85); color: #fff;
	padding: 10px 16px; border-radius: 10px; font-size: 14px; line-height: 1.3;
	text-align: center; max-width: 80%;
	opacity: 0; transition: opacity .2s;
}
.drfmap__hint.is-show { opacity: 1; }