/* WP GPX Maps Pro: outdoor features (treasure hunt, audio guide, video, live position, slopes, sun and shade) */
.wpgpxmaps-pro-outdoor {
	margin: 6px 0 10px;
	font-size: 0.9em;
}

.wpgpxmaps-pro-outdoor p {
	margin: 4px 0;
}

.wpgpxmaps-pro-button,
.wpgpxmaps-pro-button:hover,
.wpgpxmaps-pro-button:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	box-shadow: none;
}

.wpgpxmaps-pro-link,
.wpgpxmaps-pro-link:hover,
.wpgpxmaps-pro-link:focus {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	box-shadow: none;
}

.wpgpxmaps-pro-muted {
	color: #6b7280;
	font-size: 0.9em;
}

/* Markers placed by pro-kit.js over the map */
.wpgpxmaps-pro-kit-marker {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 610;
	pointer-events: none;
	will-change: transform;
}

.wpgpxmaps-pro-me {
	width: 16px;
	height: 16px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #2563eb;
	box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Treasure hunt */
.wpgpxmaps-pro-treasure-marker {
	font-size: 22px;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.wpgpxmaps-pro-treasure-progress {
	font-weight: 600;
}

.wpgpxmaps-pro-treasure-list {
	margin: 4px 0 0 1.4em;
	padding: 0;
}

.wpgpxmaps-pro-treasure-list li {
	margin: 2px 0;
	cursor: pointer;
}

.wpgpxmaps-pro-treasure-list li.is-fresh strong {
	animation: wpgpxmaps-pro-found 1.2s ease-out 2;
}

@keyframes wpgpxmaps-pro-found {
	50% {
		color: #d97706;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpgpxmaps-pro-treasure-list li.is-fresh strong {
		animation: none;
	}
}

/* Audio guide */
.wpgpxmaps-pro-audioguide-marker span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #7c3aed;
	color: #fff;
	font: bold 11px/1 Arial, Helvetica, sans-serif;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.wpgpxmaps-pro-audioguide-list {
	margin: 4px 0 0 1.4em;
	padding: 0;
}

.wpgpxmaps-pro-audioguide-list li {
	margin: 4px 0;
}

.wpgpxmaps-pro-audioguide-list li.is-playing strong {
	color: #7c3aed;
}

.wpgpxmaps-pro-audioguide-text {
	display: block;
	color: #6b7280;
	font-size: 0.95em;
}

/* Synchronized video: next to the map when there is room (two columns from about 840 px), above it otherwise */
.wpgpxmaps-pro-video-layout {
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 12px;
	align-items: start;
}

.wpgpxmaps-pro-video-map {
	min-width: 0;
}

.wpgpxmaps-pro-video.wpgpxmaps-pro-outdoor {
	margin: 0;
}

/* Side by side: the video stays in view while the page scrolls along the map and the chart */
@container (min-width: 852px) {
	.wpgpxmaps-pro-video.wpgpxmaps-pro-outdoor {
		position: sticky;
		top: 12px;
	}
}

.wpgpxmaps-pro-video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: #111827;
}

.wpgpxmaps-pro-video-frame video,
.wpgpxmaps-pro-video-frame iframe,
.wpgpxmaps-pro-video-frame > div {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.wpgpxmaps-pro-video-poster,
.wpgpxmaps-pro-video-poster:hover,
.wpgpxmaps-pro-video-poster:focus {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 16px;
	border: 0;
	background: linear-gradient(135deg, #1f2937, #111827);
	color: #e5e7eb;
	font: inherit;
	cursor: pointer;
}

.wpgpxmaps-pro-video-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #dc2626;
	color: #fff;
	font-size: 26px;
}

.wpgpxmaps-pro-video-note {
	font-size: 0.85em;
	opacity: 0.8;
}

.wpgpxmaps-pro-video-marker {
	font-size: 22px;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Live position */
.wpgpxmaps-pro-live-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #9ca3af;
}

.wpgpxmaps-pro-live.is-recent .wpgpxmaps-pro-live-dot {
	background: #dc2626;
	animation: wpgpxmaps-pro-pulse 1.6s ease-out infinite;
}

.wpgpxmaps-pro-live-marker {
	width: 18px;
	height: 18px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #ea580c;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
}

@keyframes wpgpxmaps-pro-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
	}
	100% {
		box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpgpxmaps-pro-live.is-recent .wpgpxmaps-pro-live-dot {
		animation: none;
	}
}

/* Slopes */
.wpgpxmaps-pro-slopes-legend {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	vertical-align: middle;
}

.wpgpxmaps-pro-slopes-legend[hidden] {
	display: none;
}

.wpgpxmaps-pro-slopes-chip::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 4px;
	border-radius: 2px;
	background: var(--chip);
	vertical-align: -1px;
}

/* Sun and shade */
.wpgpxmaps-pro-sun-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}

.wpgpxmaps-pro-sun-form input {
	margin-left: 4px;
	font: inherit;
}

.wpgpxmaps-pro-sun-legend {
	display: inline-flex;
	gap: 4px 10px;
}

.wpgpxmaps-pro-sun-ranges {
	margin: 2px 0 4px 1.2em;
	padding: 0;
}

/* Offline maps */
.wpgpxmaps-pro-offline-progress {
	width: 100%;
	height: 6px;
}

.wpgpxmaps-pro-offline-confirm {
	padding: 8px 10px;
	border-radius: 6px;
	background: rgba(127, 127, 127, 0.1);
}

.wpgpxmaps-pro-button.is-primary {
	border-color: #1f6f4a;
	background: #1f6f4a;
	color: #fff;
}