/* ============================================================
   Layout
   ============================================================ */
div.dpoi-map-section {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
div.dpoi-map-container {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 660px;
}

/* ============================================================
   Layout modifiers — controlled by the layout="" shortcode attr
   ============================================================ */
.dpoi-layout--sidebar .dpoi-map-container { flex-direction: row; }
.dpoi-layout--sidebar .dpoi-location-map  { width: 70%; }
.dpoi-layout--sidebar .dpoi-location-list { width: 30%; }

.dpoi-layout--below .dpoi-map-container,
.dpoi-layout--above .dpoi-map-container   { flex-direction: column; }
.dpoi-layout--above .dpoi-map-container   { flex-direction: column-reverse; }
.dpoi-layout--below .dpoi-location-map,
.dpoi-layout--above .dpoi-location-map,
.dpoi-layout--below .dpoi-location-list,
.dpoi-layout--above .dpoi-location-list   { width: 100%; }
.dpoi-layout--below .dpoi-location-map,
.dpoi-layout--above .dpoi-location-map    { height: 420px; }
#dpoi-map {
	height: 100%;
	width: 100%;
}
div.dpoi-location-list {
	display: block;
	height: auto;
	padding: 45px;
	background-color: #6D5C30;
	overflow-y: auto;
}
div.dpoi-location-map {
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ============================================================
   Sidebar accordion items
   ============================================================ */
div.dpoi-drop-items {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px 0;
	cursor: pointer;
}
div.dpoi-drop-items-btn {
	width: 80%;
}

div.dpoi-drop-items-icon-btn {
	width: 20%;
}
div.dpoi-drop-items-icon-btn svg.dpoi-drop-up {
	display: none;
}
div.dpoi-drop-items-icon-btn svg.dpoi-drop-down,
div.dpoi-drop-items-icon-btn svg.dpoi-drop-up {
	width: 20px;
}
div.dpoi-drop-items-options {
	display: none;
}
div.dpoi-block-show {
	display: block;
}

/* ============================================================
   Sidebar list items
   ============================================================ */
ul.dpoi-items-list {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 10px;
	text-align: left;
	list-style-type: none;
}

ul.dpoi-items-list li a {
	text-decoration: none;
	color: #D8E1A2;
}
ul.dpoi-items-list li a.dpoi-selected,
ul.dpoi-items-list li a:hover,
ul.dpoi-items-list li.dpoi-item--active > a {
	color: #FF8055;
}

/* Active map marker — scale + glow works for both dot and icon markers */
.dpoi-marker {
	transition: transform 0.15s ease, filter 0.15s ease;
}
.dpoi-marker--active {
	transform: scale( 1.45 );
	filter: drop-shadow( 0 0 5px rgba(255, 255, 255, 0.95) );
	z-index: 10;
}

/* ============================================================
   Custom attribution — replaces MapLibre's built-in control.
   Always visible (ODbL requires no interaction to see it); subtle but legible.
   ============================================================ */
.dpoi-attribution {
	position: absolute;
	bottom: 4px;
	left: 4px;
	z-index: 1;
	font-size: 11px;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.7);
	color: #333;
	opacity: 0.75;
	transition: opacity 0.2s;
	pointer-events: auto;
}
.dpoi-attribution:hover {
	opacity: 1;
}
.dpoi-attribution a {
	color: #333;
	text-decoration: none;
}
.dpoi-attribution a:hover {
	text-decoration: underline;
}

/* ============================================================
   MapLibre GL — strip default popup chrome
   ============================================================ */
#dpoi-map .maplibregl-popup-content {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
#dpoi-map .maplibregl-popup-tip {
	display: none;
}
#dpoi-map .maplibregl-popup-close-button {
	display: none;
}

/* ============================================================
   Popup content
   ============================================================ */
.dpoi-popup-content {
	position: relative;
	display: inline-block;
	max-width: 168px;
	color: #ffffff;
	background-color: #FF8055;
}
.dpoi-popup-header {
	background-color: #F47451;
	padding: 10px 0px;
}

.dpoi-popup-body {
	padding: 10px;
}

.dpoi-popup-close {
	position: absolute;
	top: 12px;
	right: 6px;
	display: flex;
	height: 10px;
	width: 10px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.dpoi-popup-close svg path {
	stroke: rgba(255, 255, 255, 0.85);
	transition: stroke 0.15s;
}
.dpoi-popup-close:hover svg path {
	stroke: #ffffff;
}




/* ============================================================
   Responsive
   ============================================================ */
@media only screen and (max-width: 1024px) {
	div.dpoi-location-list {
		padding: 35px;
	}
}
@media only screen and (max-width: 900px) {
	div.dpoi-map-container {
		min-height: 560px;
	}
	div.dpoi-location-list {
		padding: 30px;
	}
}
@media only screen and (max-width: 767px) {
	div.dpoi-map-container {
		width: 100%;
		flex-direction: column;
		min-height: auto;
	}

	div.dpoi-drop-items-icon-btn {
		display: flex;
		justify-content: right;
	}
	div.dpoi-location-list {
		width: 100%;
	}
	div.dpoi-location-map {
		width: 100%;
		height: 400px;
	}
}