/* ===== Destination Map widget (widgets/destination-map-widget.php) - map
   on the left, the list of places on the right (below the map on phones).
   Markers, hover tooltip and the photo card come from itinerary-map.css. ===== */

.caguide_destmap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 8px 0 0;
	border: 1px solid var(--border, #e6ddd0);
	background: #fff;
}

.caguide_destmap.has-list {
	grid-template-columns: minmax(0, 1fr) 320px;
}

.caguide_destmap_map {
	position: relative;
	width: 100%;
	height: 540px;
	background: #e9e4dc;
}

.caguide_destmap_loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--muted, #6f6458);
}

.caguide_destmap.is-ready .caguide_destmap_loading {
	display: none;
}

/* Smaller places (tour stops without a page): a small white dot with a pink
   ring, drawn under the main markers. */
.caguide_destmap_marker.is-minor {
	width: 10px;
	height: 10px;
	background: #fff;
	border: 2.5px solid var(--pink-action, #e8334f);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	z-index: 0;
}

.caguide_destmap_marker:not(.is-minor) {
	z-index: 1;
}

/* The destination itself ("Mark this destination itself"): a larger marker on top. */
.caguide_destmap_marker.is-self {
	width: 24px;
	height: 24px;
	border-width: 4px;
	z-index: 3;
}

.caguide_destmap_item.is-self .caguide_destmap_item_name {
	font-weight: 700;
}

.caguide_destmap_marker.is-minor.is-active {
	z-index: 2;
}

.caguide_destmap_group_title {
	margin: 10px 0 2px !important;
	padding: 10px 18px 6px !important;
	list-style: none !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted, #6f6458);
	border-top: 1px solid var(--border, #e6ddd0);
}

.caguide_destmap_item.is-minor .caguide_destmap_item_btn {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	font-size: 13px !important;
}

.caguide_destmap_item.is-minor .caguide_destmap_item_img {
	flex-basis: 32px;
	width: 32px !important;
	height: 32px !important;
}

.caguide_destmap_item.is-minor .caguide_destmap_item_img.is-empty {
	background:
		radial-gradient(circle at 50% 50%, #fff 0 3px, var(--pink-action, #e8334f) 3.5px 5.5px, transparent 6px),
		#efe9e0;
}

/* ---- List of places ---- */

.caguide_destmap_list_wrap {
	display: flex;
	flex-direction: column;
	height: 540px;
	border-left: 1px solid var(--border, #e6ddd0);
	box-sizing: border-box;
}

.caguide_destmap_list_title {
	margin: 0;
	padding: 14px 18px 10px;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted, #6f6458);
	border-bottom: 1px solid var(--border, #e6ddd0);
}

.caguide_destmap_list {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 0 !important;
	padding: 6px 0 !important;
	list-style: none !important;
}

.caguide_destmap_item {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 8px 0 0;
	list-style: none !important;
	border-left: 3px solid transparent;
	transition: background-color 120ms, border-color 120ms;
}

.caguide_destmap_item:hover,
.caguide_destmap_item.is-active {
	background: var(--background, #f6f3ee);
}

.caguide_destmap_item.is-active {
	border-left-color: var(--pink-action, #e8334f);
}

/* !important - the theme's generic button styles (pink fill, caps, padding). */
.caguide_destmap_item_btn {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 15px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ink, #2b2420) !important;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: left;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

.caguide_destmap_item_btn:focus-visible {
	outline: 2px solid var(--pink-action, #e8334f);
	outline-offset: -2px;
}

.caguide_destmap_item_img {
	flex: 0 0 44px;
	width: 44px !important;
	height: 44px !important;
	object-fit: cover;
	display: block;
	background: #e9e4dc;
}

.caguide_destmap_item_img.is-empty {
	background:
		radial-gradient(circle at 50% 50%, var(--pink-action, #e8334f) 0 5px, transparent 6px),
		#efe9e0;
}

.caguide_destmap_item_name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caguide_destmap_item.is-minor .caguide_destmap_item_name {
	font-weight: 500;
	color: var(--muted, #6f6458);
}

.caguide_destmap_item_link {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--muted, #6f6458) !important;
	text-decoration: none !important;
	transition: background-color 120ms, color 120ms;
}

.caguide_destmap_item_link:hover,
.caguide_destmap_item_link:focus-visible {
	background: var(--pink-action, #e8334f);
	color: #fff !important;
}

/* The card's photo sits edge to edge above the text (outside the padded body). */
.caguide_itinerary_card_overlay > .caguide_itinerary_card_overlay_image {
	display: block;
}

/* ---- Tablets and phones: the list goes below the map ---- */

@media only screen and (max-width: 1024px) {
	.caguide_destmap.has-list {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

@media only screen and (max-width: 767px) {
	.caguide_destmap.has-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.caguide_destmap_map {
		height: 380px;
	}

	.caguide_destmap_list_wrap {
		height: auto;
		border-left: none;
		border-top: 1px solid var(--border, #e6ddd0);
	}

	/* One column of whole names, no inner scrolling. */
	.caguide_destmap_list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		overflow: visible;
	}

	.caguide_destmap_item {
		min-width: 0;
		padding-right: 2px;
	}

	.caguide_destmap_item_btn {
		gap: 8px;
		padding: 7px 4px 7px 10px !important;
		font-size: 13px !important;
	}

	.caguide_destmap_item_img {
		flex-basis: 34px;
		width: 34px !important;
		height: 34px !important;
	}

	.caguide_destmap_item_link {
		width: 26px;
		height: 26px;
	}

	.caguide_destmap_item_img {
		flex-basis: 30px;
		width: 30px !important;
		height: 30px !important;
	}
}