/* ============================================================
   MAPA DE UNIDADES — CSS (Versão Refinada & Mobile Bottom)
   ============================================================ */

:root {
	--mu-primary       : #2563eb;
	--mu-surface       : #1e293b; /* Fundo escuro para a sidebar */
	--mu-text          : #ffffff;
	--mu-text-muted    : #cbd5e1;
	--mu-border        : rgba(255,255,255,0.1);
	--mu-height        : 600px;
	--mu-sidebar-w     : 320px;
	--mu-detalhe-w     : 360px;
	--mu-transition    : all 0.3s ease;
}

*, ::before, ::after { box-sizing: border-box; }

.mapa-unidades-wrap {
	display          : flex;
	width            : 100%;
	height           : var(--mu-height);
	background       : #fff;
	border-radius    : 12px;
	overflow         : hidden;
	box-shadow       : 0 10px 25px rgba(0,0,0,0.1);
	font-family      : inherit;
}

/* SIDEBAR */
.mapa-sidebar {
	width            : var(--mu-sidebar-w);
	background       : var(--mu-surface);
	display          : flex;
	flex-direction   : column;
	border-right     : 1px solid var(--mu-border);
	overflow-y       : auto;
	overflow-x       : hidden; /* Forçar remoção de scroll lateral */
	z-index          : 10;
}

.mapa-lista {
	flex             : 1;
	width            : 100%;
}

/* ITENS DA LISTA */
.mapa-unit-item {
	width            : 100%;
	display          : flex;
	align-items      : center;
	padding          : 15px 18px;
	background       : transparent;
	border           : none;
	border-bottom    : 1px solid var(--mu-border);
	cursor           : pointer;
	text-align       : left;
	transition       : var(--mu-transition);
	gap              : 12px;
	box-sizing       : border-box;
}

.mapa-unit-item:hover {
	background       : rgba(255,255,255,0.05);
}

.mapa-unit-item.is-active {
	background       : var(--mu-primary) !important;
}

.mapa-unit-item__info {
	flex             : 1;
	min-width        : 0; /* Essencial para permitir quebra de linha de filhos flex */
}

.mapa-unit-item__nome {
	display          : block;
	font-weight      : 700;
	font-size        : 14px;
	color            : #ffffff !important;
	line-height      : 1.3;
	white-space      : normal; /* Permitir quebra de linha */
	word-wrap        : break-word;
}

.mapa-unit-item__endereco {
	display          : none !important; /* Esconde endereço globalmente */
}

/* MAPA */
.mapa-container {
	flex             : 1;
	position         : relative;
	overflow         : hidden;
}

.mapa-leaflet {
	width            : 100%;
	height           : 100%;
}

/* ============================================================
   PAINEL LATERAL DE DETALHES (substitui o popup no mapa)
   ============================================================ */
.mapa-detalhe {
	position         : absolute;
	top              : 0;
	right            : 0;
	bottom           : 0;
	width            : var(--mu-detalhe-w);
	max-width        : 85%;
	background       : #ffffff;
	box-shadow       : -12px 0 30px rgba(0,0,0,0.15);
	z-index          : 1200; /* acima dos controles do Leaflet (1000) */
	display          : flex;
	flex-direction   : column;
	transform        : translateX(100%);
	visibility       : hidden;
	opacity          : 0;
	transition       : transform 0.35s cubic-bezier(0.25,1,0.5,1), opacity 0.25s ease, visibility 0.35s;
}

.mapa-detalhe.is-open {
	transform        : translateX(0);
	visibility       : visible;
	opacity          : 1;
}

.mapa-detalhe__close {
	position         : absolute;
	top              : 10px;
	right            : 12px;
	width            : 34px;
	height           : 34px;
	display          : flex;
	align-items      : center;
	justify-content  : center;
	background       : #f1f5f9;
	color            : #475569;
	border           : none;
	border-radius    : 50%;
	font-size        : 24px;
	line-height      : 1;
	cursor           : pointer;
	z-index          : 2;
	transition       : var(--mu-transition);
}

.mapa-detalhe__close:hover {
	background       : #e2e8f0;
	color            : #0f172a;
}

.mapa-detalhe__body {
	flex             : 1;
	overflow-y       : auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mapa-detalhe__inner {
	padding          : 26px 24px 24px;
}

.mapa-detalhe__nome {
	font-size        : 28px !important;
	font-weight      : 800;
	color            : #1e293b;
	margin           : 0 40px 12px 0; /* espaço para o botão fechar */
	line-height      : 1.05;
	letter-spacing   : -1px;
}

.mapa-detalhe__endereco {
	font-size        : 14px;
	color            : #64748b;
	margin-bottom    : 8px;
	line-height      : 1.4;
}

.mapa-detalhe__telefone {
	font-size        : 14px;
	color            : #1e293b;
	font-weight      : 700;
}

.mapa-detalhe__btn {
	display          : block;
	background       : var(--mu-primary);
	color            : #ffffff !important;
	text-align       : center;
	padding          : 12px;
	border-radius    : 8px;
	text-decoration  : none !important;
	font-weight      : 700;
	font-size        : 14px;
	margin-top       : 15px;
	border           : none;
}

/* CONTATOS DOS VENDEDORES (WHATSAPP) */
.mapa-detalhe__vendedores {
	display          : flex;
	flex-direction   : column;
	gap              : 8px;
	margin-top       : 16px;
	padding-top      : 14px;
	border-top       : 1px solid #e2e8f0;
}

.mapa-detalhe__wa {
	display          : flex !important;
	align-items      : center;
	gap              : 10px;
	padding          : 12px;
	border           : 1px solid #d3e8d8;
	border-radius    : 8px;
	background       : #f2fbf4;
	color            : #128c4a !important;
	text-decoration  : none !important;
	line-height      : 1.25;
	transition       : var(--mu-transition);
}

.mapa-detalhe__wa:hover {
	background       : #25d366;
	border-color     : #25d366;
	color            : #ffffff !important;
}

.mapa-detalhe__wa-icon {
	flex             : 0 0 auto;
	width            : 18px;
	height           : 18px;
}

.mapa-detalhe__wa-label {
	font-weight      : 700;
	font-size        : 13px;
}

/* MOBILE */
@media (max-width: 768px) {
	.mapa-unidades-wrap {
		flex-direction: column-reverse; /* Lista embaixo do mapa */
		height: auto;
		min-height: 500px;
	}

	.mapa-sidebar {
		width: 100%;
		height: 250px; /* Altura fixa para scroll na lista */
		border-right: none;
		border-top: 1px solid var(--mu-border);
	}

	.mapa-container {
		height: 55vh;
		min-height: 320px;
	}

	/* Versão resumida no mobile */
	.mapa-unit-item__endereco {
		display: none !important; /* Remove endereço no mobile */
	}

	.mapa-unit-item {
		padding: 14px 16px;
	}

	/* Painel vira bottom sheet preso na viewport (o JS o move para o <body>) */
	.mapa-detalhe {
		position      : fixed;
		top           : auto;
		right         : 0;
		bottom        : 0;
		left          : 0;
		width         : 100%;
		max-width     : 100%;
		max-height    : 62vh;
		border-radius : 16px 16px 0 0;
		box-shadow    : 0 -10px 30px rgba(0,0,0,0.25);
		transform     : translateY(100%);
		z-index       : 9999;
		transition    : transform 0.35s cubic-bezier(0.25,1,0.5,1), opacity 0.25s ease, visibility 0.35s;
	}

	.mapa-detalhe.is-open {
		transform: translateY(0);
	}

	.mapa-detalhe__inner {
		padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
	}

	.mapa-detalhe__nome {
		font-size: 24px !important;
	}
}

.mapa-loading {
	padding: 40px;
	text-align: center;
	color: #fff;
	font-size: 14px;
}