/**
 * Estilos del mapa de ubicación en el checkout de Bloques.
 * Deliberadamente simples y sin dependencias externas — respetan la
 * tipografía/colores del tema activo en vez de imponer los propios.
 */

.mch-checkout-location {
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fafafa;
}

.mch-checkout-location__title {
	font-weight: 600;
	margin: 0 0 4px;
	font-size: 1em;
}

.mch-checkout-location__description {
	margin: 0 0 12px;
	font-size: 0.9em;
	color: #555;
}

.mch-checkout-location__map {
	width: 100%;
	height: 280px;
	border-radius: 4px;
	background: #eee; /* placeholder visible mientras carga el mapa (MapLibre GL JS) */
}

/**
 * FIX V0.1.5: sin reglas nuevas más allá del comentario de arriba — el
 * contenedor ya tenía ancho/alto explícitos (requisito igual para
 * Google Maps que para MapLibre GL JS), así que no hizo falta agregar
 * CSS propio para el mapa en sí. Los estilos de los controles de
 * MapLibre (zoom/brújula) y del control de atribución obligatorio
 * (ver README.md, "Atribución") vienen del propio
 * assets/vendor/maplibre-gl/maplibre-gl.css, encolado como dependencia
 * de este archivo (ver class-checkout-integration.php) — no se
 * sobreescribe ni se oculta nada de ese CSS acá.
 */

.mch-checkout-location__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.mch-checkout-location__button {
	cursor: pointer;
	padding: 8px 14px;
	font-size: 0.9em;
	border-radius: 4px;
	border: 1px solid #999;
	background: #fff;
}

.mch-checkout-location__button:hover {
	background: #f0f0f0;
}

.mch-checkout-location__button--primary {
	background: #1e40af;
	border-color: #1e40af;
	color: #fff;
}

.mch-checkout-location__button--primary:hover {
	background: #1b3a9c;
}

.mch-checkout-location__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.mch-checkout-location__status {
	margin-top: 10px;
	font-size: 0.9em;
}

.mch-checkout-location__status--confirmed {
	color: #16653d;
	font-weight: 600;
}

.mch-checkout-location__status--pending {
	color: #92400e;
}

.mch-checkout-location__status--error {
	color: #b42318;
}

@media (max-width: 480px) {
	.mch-checkout-location__map {
		height: 220px;
	}

	.mch-checkout-location__actions {
		flex-direction: column;
	}

	.mch-checkout-location__button {
		width: 100%;
		text-align: center;
	}
}