/**
 * The public map.
 *
 * Styled lightly and in the theme's own terms — inheriting fonts and colours rather than
 * imposing any — because on a Breakdance site the user will be styling this themselves
 * through Dynamic Data anyway, and on every other site it should look like it belongs to
 * the theme rather than to us.
 */

.waypoint {
	margin: 0 0 1.5em;
}

.waypoint-now {
	margin-bottom: 1em;
}

.waypoint-now-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0.25em;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
}

.waypoint-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #35c46a;
	box-shadow: 0 0 0 0 rgba(53, 196, 106, 0.6);
	animation: waypoint-pulse 2s infinite;
}

@keyframes waypoint-pulse {
	70% {
		box-shadow: 0 0 0 8px rgba(53, 196, 106, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(53, 196, 106, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.waypoint-dot {
		animation: none;
	}
}

.waypoint-now-name {
	margin: 0 0 0.15em;
	line-height: 1.2;
}

.waypoint-now-address,
.waypoint-now-until,
.waypoint-now-parking {
	margin: 0 0 0.25em;
	opacity: 0.8;
}

.waypoint-now-parking {
	font-style: italic;
}

.waypoint-directions {
	display: inline-block;
	margin-top: 0.6em;
	font-weight: 600;
}

.waypoint-map {
	width: 100%;
	border-radius: 8px;
	background: #eceff1;
}

.waypoint-map.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
}

.waypoint-map-empty {
	margin: 0;
	opacity: 0.7;
}

/* The closed state: a photo and a sentence, where an empty map used to be. */
.waypoint-closed {
	margin-bottom: 1em;
}

.waypoint-closed-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.waypoint-closed-message {
	margin-top: 0.8em;
}

.waypoint-closed-message p:last-child {
	margin-bottom: 0;
}

/* Leaflet's layer switcher inherits whatever the theme does to lists and labels, which is
   rarely kind to it. Keep it compact and legible on any theme. */
.waypoint-map .leaflet-control-layers-list label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 400;
}

.waypoint-map .leaflet-control-layers-list input {
	margin: 0;
}

.waypoint-upcoming {
	margin-top: 1.2em;
}

.waypoint-upcoming-title {
	margin: 0 0 0.5em;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
}

.waypoint-upcoming-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.waypoint-upcoming-item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	padding: 0.5em 0;
	border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.waypoint-upcoming-when {
	min-width: 10em;
	opacity: 0.75;
}

.waypoint-upcoming-where {
	font-weight: 600;
}

.waypoint-status.is-live {
	font-weight: 600;
}

.waypoint-popup {
	line-height: 1.5;
}