.maps-xpainel{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:100px;
	min-height:300px;
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}

.maps-xpainel-loadingWrapper{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}

#mapa{
	width:100%;
	height:410px;
}

/*
|--------------------------------------------------------------------------
| Modal do mapa
|--------------------------------------------------------------------------
*/

.mapxdescription {
	text-align: center;
	font-family: 'Ubuntu';
	max-width: 280px;
	margin: 0 auto;
}

.mapxdescription h4{
	margin:0 0 8px;
	font-size:22px;
	line-height:26px;
	font-weight:700;
	color:#222 !important;
}

.mapxdescription h5{
	margin:0 0 12px;
	font-size:16px;
	line-height:20px;
	font-weight:600;
	color:#555 !important;
}

.mapxdescription address{
	margin:0 auto 18px;
	font-size:13px;
	line-height:20px;
	font-style:normal;
	color:#666 !important;

	max-width:240px;

	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
}

/*
|--------------------------------------------------------------------------
| Botões
|--------------------------------------------------------------------------
*/

.btn-mapsx{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:36px;
	height:36px;

	margin:0 2px;

	border-radius:8px !important;
	border:1px solid #dcdcdc;

	background:
		var(--x-bg-corescura)
		!important;

	color:white !important;

	font-size:16px !important;
	text-decoration:none !important;

	position:relative;
	z-index:2;

	cursor:pointer;

	box-sizing:border-box;

	transition:
		scale .18s ease,
		box-shadow .18s ease,
		border-color .18s ease;

	padding: 5px;
}

.btn-mapsx:hover{
	scale:1.08;

	box-shadow:
		0 0 0 2px #000 inset;
}

.btn-mapsx i{
	font-size:16px;
	line-height:1;

	transition:
		opacity .15s ease;
}

/*
|--------------------------------------------------------------------------
| Marker
|--------------------------------------------------------------------------
*/

.map-marker-x{
	cursor:pointer;
	transform-origin:center bottom;
	outline:none !important;
	user-select:none;
}

.map-marker-x img{
	display:block;
	pointer-events:none;
}

.map-marker-x.bounce{
	animation:markerBounce 1s infinite;
}

.map-marker-default{
	width:22px;
	height:22px;
	border-radius:50% 50% 50% 0;
	background:#d00;
	transform:rotate(-45deg);
	position:relative;
}

.map-marker-default::after{
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	background:#fff;
	border-radius:50%;
	top:6px;
	left:6px;
}

/*
|--------------------------------------------------------------------------
| Remove focus feio do Google
|--------------------------------------------------------------------------
*/

.map-marker-x:focus,
.map-marker-x:active,
.map-marker-x:focus-visible,
[role="button"]:focus,
[role="button"]:active,
[role="button"]:focus-visible{
	outline:none !important;
	box-shadow:none !important;
}

/*
|--------------------------------------------------------------------------
| Bounce
|--------------------------------------------------------------------------
*/

@keyframes markerBounce{
	0%,100%{
		transform:translateY(0);
	}

	50%{
		transform:translateY(-10px);
	}
}


.map-distance-info{
	font-size: 14px;
	line-height: 18px;
	color: #333 !important;
	margin: 10px auto;
}


.map-marker-x{
	cursor:pointer;
	transform-origin:center bottom;
	outline:none !important;
	user-select:none;

	transition:
		transform 1.18s ease;
}

.map-marker-x:hover{
	scale:1.04;
}

.map-actions{
	display:flex;
	justify-content:center;
	align-items:center;

	gap:4px;

	flex-wrap:nowrap; /* <-- principal */

	min-height:36px; /* trava altura */

	position:relative;
	z-index:1;

	overflow:visible;
}




.map-action-title{
	height:22px;
	margin-top:10px;

	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;

	font-size:12px;
	font-weight:600;
	color:#888;

	text-align:center;

	opacity:.85;
	user-select:none;
}

.map-action-title i{
	font-size:11px;
	color: var(--x-bg-corescura);
	animation: mapArrowUp 1.8s infinite;
}

@keyframes mapArrowUp{
	0%,100%{
		transform:
			translateY(0);
		opacity:.6;
	}

	50%{
		transform:
			translateY(-4px);
		opacity:1;
	}
}