/* =========================================================================
 * MX - Menu Categorias :: módulo LOCATION (.mxlc)
 *
 * Ícone de mapa no header + modal das unidades da loja.
 *
 * Prefixo mxlc (MX Location): não colide com mxmc, mxmm e mxnv do plugin,
 * nem com os prefixos do projeto (gdpl, hdpr, gdbn, cmpr, ttgr, gps, blgp).
 *
 * UM COMPONENTE, DUAS FORMAS
 *   A mesma caixa é bottom sheet no mobile e lightbox centralizado no desktop.
 *   Não há dois markups nem dois blocos de estilo: o padrão é o sheet (colado
 *   embaixo, largura total, cantos arredondados só em cima) e a media query de
 *   desktop o solta do rodapé, centraliza e coloca as duas colunas lado a lado.
 *   Mobile-first aqui é o que evita escrever a mesma caixa duas vezes.
 *
 * ALTURA
 *   A caixa é limitada por dvh (com vh de reserva para navegador antigo): em
 *   celular, `100vh` inclui a barra de endereço retrátil, e o fim da lista de
 *   unidades ficaria embaixo dela justamente no primeiro momento em que o
 *   usuário olha para a tela.
 *
 * SEM :root e sem font-family: a tipografia herda do Blocksy, como nos demais
 * módulos do plugin.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. Gatilho: ícone de mapa no header
 * ----------------------------------------------------------------------- */

.mxlc {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* O gatilho vai num bloco HTML do header do Blocksy, então herda a cor de lá
 * (`color: inherit` + `fill: currentColor` no SVG) em vez de fixar um tom
 * próprio: assim ele acompanha os outros ícones do header, inclusive se a cor
 * mudar no Customizer ou no estado sticky. */
.mxlc-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	transition: opacity 0.16s ease;
}

/* Hover por opacidade, não por troca de cor: funciona com qualquer cor que o
 * header estiver usando, sem precisar de um segundo tom cadastrado aqui. */
.mxlc-botao:hover,
.mxlc-botao[aria-expanded="true"] {
	opacity: 0.7;
}

.mxlc-botao:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

.mxlc-ico {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * 2. Modal: raiz e fundo
 * ----------------------------------------------------------------------- */

.mxlc-modal {
	/* Paleta do site, declarada na raiz do componente (não em :root) */
	--mxlc-dourado: #D99B26;
	--mxlc-dourado-texto: #96650F;
	--mxlc-creme: #FBF3E2;
	--mxlc-texto: #1F2124;
	--mxlc-texto-suave: #6B6F76;
	--mxlc-borda: #E8E7E4;
	--mxlc-fundo: #FFFFFF;
	--mxlc-fundo-suave: #F7F6F4;
	--mxlc-raio: 16px;

	position: fixed;
	inset: 0;
	z-index: 100000; /* acima do header sticky e do off-canvas do Blocksy */
	display: flex;
	align-items: flex-end; /* padrão mobile: colado no rodapé */
	justify-content: center;
}

.mxlc-modal[hidden] {
	display: none;
}

.mxlc-fundo {
	position: absolute;
	inset: 0;
	background: rgba(18, 18, 20, 0.55);
	animation: mxlc-fundo-entrar 0.2s ease-out;
}

/* Trava a rolagem do documento enquanto o modal está aberto.
 *
 * A trava vai no <html> e não no <body> porque o off-canvas do Blocksy já
 * mexe no <body>: duas travas no mesmo elemento acabam se desfazendo uma à
 * outra quando o menu mobile fecha com o modal ainda aberto. */
html.mxlc-travado {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 3. Caixa
 * ----------------------------------------------------------------------- */

.mxlc-caixa {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 92vh;
	max-height: 92dvh;
	background: var(--mxlc-fundo);
	border-radius: var(--mxlc-raio) var(--mxlc-raio) 0 0;
	box-shadow: 0 -8px 40px rgba(20, 20, 20, 0.22);
	overflow: hidden;
	animation: mxlc-sheet-entrar 0.26s cubic-bezier(0.22, 0.68, 0.35, 1);
}

/* Puxador do bottom sheet. Alvo de arrasto para fechar (ver o JS); no desktop
 * some, porque lá não há gesto de arrastar para baixo. */
.mxlc-alca {
	flex: 0 0 auto;
	width: 44px;
	height: 4px;
	margin: 10px auto 2px;
	background: #D8D6D2;
	border-radius: 999px;
}

/* Enquanto o dedo arrasta o sheet, a animação de entrada e a transição de
 * volta precisam sair do caminho — quem manda na posição é o transform que o
 * JS escreve inline. */
.mxlc-caixa.is-arrastando {
	animation: none;
	transition: none;
}

.mxlc-caixa.is-soltando {
	animation: none;
	transition: transform 0.2s ease-out;
}

/* -------------------------------------------------------------------------
 * 4. Cabeçalho
 * ----------------------------------------------------------------------- */

.mxlc-cabecalho {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 16px 14px;
}

.mxlc-cabecalho-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.mxlc-modal-titulo {
	margin: 0;
	padding: 0;
	color: var(--mxlc-texto);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.mxlc-modal-sub {
	margin: 2px 0 0;
	color: var(--mxlc-texto-suave);
	font-size: 13px;
	line-height: 1.4;
}

.mxlc-fechar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	color: var(--mxlc-texto);
	cursor: pointer;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.16s ease;
}

.mxlc-fechar:hover {
	background: var(--mxlc-fundo-suave);
}

.mxlc-fechar:focus-visible {
	outline: 2px solid var(--mxlc-dourado);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 5. Corpo: mapa + painel
 *
 * No mobile os dois empilham e só o painel rola. No desktop viram duas colunas
 * (mapa à esquerda, lista à direita), como na referência.
 * ----------------------------------------------------------------------- */

.mxlc-corpo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0; /* deixa o filho rolar em vez de esticar o flex */
}

.mxlc-mapa {
	flex: 0 0 auto;
	position: relative;
	height: 34vh;
	height: 34dvh;
	min-height: 180px;
	background: var(--mxlc-fundo-suave);
}

.mxlc-mapa[hidden] {
	display: none;
}

/* Um item por unidade, todos ocupando a mesma área: só o da unidade
 * selecionada fica sem [hidden]. Ficam sobrepostos em vez de empilhados para
 * que a caixa tenha a altura de UM mapa, não a soma de todos. */
.mxlc-mapa-item {
	position: absolute;
	inset: 0;
}

.mxlc-mapa-item[hidden] {
	display: none;
}

.mxlc-mapa-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Aviso de chave ausente: visível só para administradores (o PHP decide). */
.mxlc-mapa-aviso {
	margin: 0;
	padding: 16px;
	color: var(--mxlc-texto-suave);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.mxlc-painel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 14px 16px;
	/* A lista é o último elemento do painel e encosta na borda inferior da
	 * tela no bottom sheet, onde fica a barra de gestos do iPhone. */
	padding-bottom: max(16px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--mxlc-borda);
}

.mxlc-lista-titulo {
	flex: 0 0 auto;
	margin: 0 0 10px;
	color: var(--mxlc-texto);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
 * 6. Lista de unidades
 * ----------------------------------------------------------------------- */

.mxlc-lista {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain; /* rolar até o fim não arrasta a página */
	-webkit-overflow-scrolling: touch;
}

.mxlc-item + .mxlc-item {
	margin-top: 8px;
}

/* O card é <button>: clicar seleciona (troca o mapa e o destino da rota), não
 * navega. Daí o reset de aparência — sem ele o tema pinta um botão de tema. */
.mxlc-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 12px;
	background: var(--mxlc-fundo);
	border: 1px solid var(--mxlc-borda);
	border-radius: 12px;
	box-shadow: none;
	color: var(--mxlc-texto);
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.mxlc-card:hover {
	border-color: #DAD7D1;
}

.mxlc-card:focus-visible {
	outline: 2px solid var(--mxlc-dourado);
	outline-offset: 2px;
}

/* Unidade selecionada: é ela que o mapa mostra e para onde o "Como chegar"
 * aponta. O estado precisa ser óbvio, então muda fundo E borda — não só a
 * borda, que sozinha se perde na lista. */
.mxlc-card.is-selecionada {
	background: var(--mxlc-creme);
	border-color: var(--mxlc-dourado);
}

/* Numeração: espelha a ordem cadastrada no painel e dá um rótulo curto para o
 * usuário se referir à unidade ("a 2"). Some do leitor de tela — o nome da
 * unidade já identifica o card. */
.mxlc-card-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--mxlc-texto);
	border-radius: 6px;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.mxlc-card.is-selecionada .mxlc-card-num {
	background: var(--mxlc-dourado);
}

.mxlc-card-corpo {
	flex: 1 1 auto;
	min-width: 0;
}

.mxlc-card-topo {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mxlc-card-ico {
	flex: 0 0 auto;
	display: block;
	width: 18px;
	height: 18px;
	color: var(--mxlc-texto-suave);
}

.mxlc-card.is-selecionada .mxlc-card-ico {
	color: var(--mxlc-dourado-texto);
}

.mxlc-card-nome {
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mxlc-card-endereco {
	display: block;
	margin-top: 6px;
	color: var(--mxlc-texto-suave);
	font-size: 13px;
	line-height: 1.45;
}

.mxlc-card-horario {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 6px;
	color: var(--mxlc-texto-suave);
	font-size: 12.5px;
	line-height: 1.45;
}

.mxlc-card-relogio {
	flex: 0 0 auto;
	display: block;
	margin-top: 2px;
}

.mxlc-card-seta {
	flex: 0 0 auto;
	display: block;
	margin-top: 2px;
	color: #A8A6A1;
}

.mxlc-card.is-selecionada .mxlc-card-seta {
	color: var(--mxlc-dourado-texto);
}

/* -------------------------------------------------------------------------
 * 7. Desktop: o sheet vira lightbox de duas colunas
 *
 * 1025px e não os 1000px do nav: aqui o corte não acompanha o header, e sim a
 * largura mínima em que duas colunas (mapa + lista) ainda cabem sem espremer
 * o endereço. Abaixo disso, o formato empilhado do mobile é o melhor mesmo em
 * tablet deitado.
 * ----------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.mxlc-modal {
		align-items: center;
		padding: 24px;
	}

	.mxlc-caixa {
		width: min(1040px, 100%);
		/* Altura mínima para o mapa não encolher junto com a lista quando há
		 * poucas unidades: com duas, a coluna da direita mede pouco mais de
		 * 200px e o mapa ao lado ficava um selo.
		 *
		 * min() e não 470px puro: min-height vence max-height no CSS, então um
		 * valor fixo estouraria a janela em telas baixas (navegador reduzido
		 * num notebook) e levaria o topo da caixa — onde está o X — para fora
		 * do alcance. Assim os 470px valem sempre que couberem, e cedem quando
		 * não couberem. */
		min-height: min(470px, 88vh);
		max-height: min(680px, 88vh);
		border-radius: var(--mxlc-raio);
		box-shadow: 0 24px 64px rgba(20, 20, 20, 0.28);
		animation: mxlc-caixa-entrar 0.2s ease-out;
	}

	.mxlc-alca {
		display: none;
	}

	.mxlc-cabecalho {
		padding: 20px 24px 16px;
	}

	.mxlc-modal-titulo {
		font-size: 22px;
	}

	.mxlc-modal-sub {
		font-size: 14px;
	}

	/* Duas colunas: o mapa manda na altura, a lista rola dentro da dela. */
	.mxlc-corpo {
		flex-direction: row;
		gap: 20px;
		padding: 0 24px 24px;
	}

	.mxlc-mapa {
		flex: 1 1 58%;
		height: auto;
		border-radius: 12px;
		overflow: hidden;
	}

	.mxlc-painel {
		flex: 1 1 42%;
		padding: 0;
		border-top: 0;
	}

	.mxlc-lista-titulo {
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------
 * 8. Animações, aviso de admin e movimento reduzido
 * ----------------------------------------------------------------------- */

@keyframes mxlc-fundo-entrar {
	from {
		opacity: 0;
	}
}

@keyframes mxlc-sheet-entrar {
	from {
		transform: translateY(100%);
	}
}

@keyframes mxlc-caixa-entrar {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

.mxlc-aviso {
	padding: 12px 16px;
	background: #FBF3E2;
	border: 1px dashed #D99B26;
	border-radius: 8px;
	color: #3F4247;
}

@media (prefers-reduced-motion: reduce) {
	.mxlc-fundo,
	.mxlc-caixa {
		animation: none;
	}

	.mxlc-caixa.is-soltando {
		transition: none;
	}

	.mxlc-botao,
	.mxlc-fechar,
	.mxlc-card {
		transition: none;
	}
}