/**
 * MW DSGVO Google Maps - Frontend Styles
 *
 * Die globalen Werte (Farben, Höhe, Radius, Transparenz) werden vom Plugin
 * als CSS-Variablen im :root injiziert (--mw-bg, --mw-btn, --mw-height, ...).
 * Hier stehen Fallback-Werte, falls das Inline-CSS einmal fehlt.
 */

.mw-map {
	position: relative;
	width: 100%;
	height: var(--mw-height, 450px);
	border-radius: var(--mw-radius, 6px);
	overflow: hidden;
}

.mw-maps-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100%;
	width: 100%;
	text-align: center;
	background-color: var(--mw-bg, #000);
	border-radius: var(--mw-radius, 6px);
	z-index: 1;
}

/* Transparentes Platzhalterbild über der Hintergrundfarbe */
.mw-maps-content::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-image: var(--mw-overlay-image);
	background-size: cover;
	background-position: center center;
	opacity: var(--mw-overlay-opacity, 0.2);
	z-index: -1;
}

.mw-maps-content p {
	font-size: 14px;
	color: var(--mw-text, #fff);
	max-width: 300px;
	margin: 0 0 1em;
	padding: 0 10px;
}

.mw-maps-content a {
	color: var(--mw-text, #fff);
	text-decoration: underline;
}

.mw-maps-content button {
	color: var(--mw-btn-text, #fff);
	background: var(--mw-btn, #0066cc);
	border: none;
	border-radius: var(--mw-radius, 6px);
	padding: 10px 18px;
	cursor: pointer;
	transition: background .35s ease;
}

.mw-maps-content button:hover {
	background: var(--mw-btn-hover, #004f9e);
}

/* Das per JS erzeugte iframe füllt den Container vollständig aus */
.mw-map-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--mw-radius, 6px);
}