/**
 * Farben folgen den Theme-Variablen aus dem Global-Styles-Preset
 * (--accent/--base/--contrast, siehe :root auf taitl.at), damit die Karte immer
 * zur aktuellen Seitenpalette passt statt eigene Farben mitzubringen. Fallback-Werte
 * (nach dem Komma) greifen nur, falls diese Variablen einmal fehlen sollten.
 */

.taitl-reiseroute-root {
	margin: 2em 0;
}

.taitl-reiseroute-hinweis {
	padding: 0.75em 1em;
	background: var( --base-2, #fbefb6 );
	border: 1px solid var( --accent-3, #a8d8f0 );
	border-radius: 4px;
	color: var( --contrast-2, #0e1c24 );
}

.taitl-reiseroute-consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75em;
	padding: 2.5em 1.5em;
	background: var( --base-2, #fbefb6 );
	border: 1px solid var( --accent-3, #a8d8f0 );
	border-radius: 8px;
	text-align: center;
}

/*
 * Bugfix: der HTML-`hidden`-Attribut-Standardstil (`[hidden] { display: none }`)
 * kommt aus dem UA-Stylesheet und wird von unserer eigenen `.taitl-reiseroute-consent
 * { display: flex }`-Regel oben überstimmt (gleiche Spezifität, aber Autoren-Regel
 * schlägt UA-Regel) – dadurch blieb der Kasten nach dem Ausblenden sichtbar. Diese
 * Regel hat höhere Spezifität (Klasse + Attribut) und gewinnt zuverlässig.
 */
.taitl-reiseroute-consent[hidden],
.taitl-reiseroute-map[hidden] {
	display: none;
}

.taitl-reiseroute-consent p {
	margin: 0;
	max-width: 32em;
	font-size: 0.9em;
	color: var( --contrast-2, #0e1c24 );
}

.taitl-reiseroute-load-button {
	padding: 0.7em 1.6em;
	border: none;
	border-radius: 6px;
	background: var( --accent, #1e3a5f );
	color: var( --base-3, #fff );
	font-size: 1em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.taitl-reiseroute-load-button:hover {
	background: var( --contrast-3, #1c3a47 );
}

.taitl-reiseroute-load-button:disabled {
	opacity: 0.7;
	cursor: default;
}

.taitl-reiseroute-map {
	width: 100%;
	border-radius: 8px;
	background: var( --base-2, #fbefb6 );
}

.taitl-reiseroute-marker span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var( --accent, #1e3a5f );
	color: var( --base-3, #fff );
	font-size: 0.8em;
	font-weight: 700;
	border: 2px solid var( --base-3, #fff );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
}

/* Route: echte Fahrstrecke (OSRM) durchgezogen, Luftlinien-Fallback gestrichelt. */
.taitl-reiseroute-line {
	stroke: var( --accent, #1e3a5f );
	stroke-width: 4;
	stroke-opacity: 0.85;
	fill: none;
}

.taitl-reiseroute-line--fallback {
	stroke-width: 3;
	stroke-dasharray: 6 6;
}

.taitl-reiseroute-popup {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	max-width: 220px;
}

.taitl-reiseroute-popup img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 4px;
}

.taitl-reiseroute-popup strong {
	font-size: 0.95em;
	color: var( --contrast, #081014 );
}

.taitl-reiseroute-popup-date {
	font-size: 0.75em;
	color: var( --contrast-3, #1c3a47 );
}

.taitl-reiseroute-popup p {
	margin: 0;
	font-size: 0.85em;
	color: var( --contrast-2, #0e1c24 );
}

.taitl-reiseroute-popup a {
	font-size: 0.85em;
	font-weight: 600;
	color: var( --accent, #1e3a5f );
}