/**
 * Datei: maps.css
 * Pfad: /wp-content/plugins/mietp-core/inc/modules/maps/css
 * Modul: Maps
 * Autor: MARKS MEDIA
 *
 * Zweck:
 *   Styling für Maps-Modul.
 *   Responsive, barrierefrei, konsistent mit MietPortalo Design-System.
 */

/* ============================================================
   Map Container
   ============================================================ */
.mietp-map-container {
	position: relative;
	width: 100%;
	background: #f5f5f5;
	border-radius: 8px;
	overflow: hidden;
}

/* Loading State */
.mietp-map-container:empty::before {
	content: 'Karte wird geladen...';
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 200px;
	color: #666;
	font-size: 14px;
}

/* ============================================================
   Fallback-Nachricht (keine Koordinaten)
   ============================================================ */
.mietp-map-no-coords {
	padding: 40px 20px;
	text-align: center;
	color: #666;
	font-size: 14px;
	margin: 0;
	background: #f5f5f5;
	border-radius: 8px;
}

/* ============================================================
   Google Maps UI-Anpassungen
   ============================================================ */

/* InfoWindow */
.gm-style .gm-style-iw-c {
	border-radius: 8px;
	padding: 0;
}

.gm-style .gm-style-iw-d {
	overflow: auto !important;
}

/* Close-Button */
.gm-style .gm-style-iw-t::after {
	background: linear-gradient(45deg, rgba(0,0,0,.05) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 100%);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
	.mietp-map-container {
		border-radius: 4px;
	}
}

/* ============================================================
   Accessibility
   ============================================================ */

/* Fokus-Sichtbarkeit für Map-Controls */
.gm-style button:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

/* Screen-Reader Only (für aria-label) */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================================
   Vendor-Profile spezifisch
   ============================================================ */

/* Sidebar Map */
.mietp-vendor-contact-map {
	margin-top: 16px;
}

/* Tab Map (Standorte) */
.mietp-vendor-tab-panel .mietp-map-container {
	margin-bottom: 24px;
}

/* ============================================================
   Print-Styles
   ============================================================ */
@media print {
	.mietp-map-container {
		display: none;
	}
}