/*
 * TT Trail Map — public CSS.
 *
 * Version: 1.1.0
 * Updated: 2026-09-21
 *
 * 1.1.0: popup image + meta/status lines; numbered-marker background is now
 * set inline per marker (tt-trail-map.js) so it can follow the itinerary's
 * own colour, this rule is just the shape/fallback.
 */

.tt-map-wrap {
	margin: 1em 0;
}

.tt-leaflet-map {
	background: #eee;
}

.tt-map-error {
	color: #a33;
}

.tt-map-popup strong {
	display: block;
	margin-bottom: 4px;
}

.tt-map-popup p {
	margin: 4px 0;
	font-size: 0.9em;
}

.tt-map-popup img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: 120px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 6px;
}

.tt-map-popup-meta {
	color: #666;
}

.tt-map-popup-status {
	font-weight: 600;
}

.tt-map-popup-status-open {
	color: #2e7d32;
}

.tt-map-popup-status-closed,
.tt-map-popup-status-closed_today {
	color: #a33;
}

.tt-map-popup-status-not_yet_open,
.tt-map-popup-status-by_appointment {
	color: #b26a00;
}

/*
 * The background colour lives on the inner <span> (set inline per marker by
 * tt-trail-map.js so it can follow the itinerary's own colour); this class
 * only supplies the circle shape shared by every marker.
 */
.tt-map-marker-numbered {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-map-marker-numbered span {
	width: 100%;
	height: 100%;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 13px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}