/**
 * Mapa de associados — estilos do shortcode [anfivet_mapa].
 *
 * Paleta e tipografia vêm do Kit do Elementor do próprio site (post-8.css),
 * não de valores inventados aqui:
 *
 *   primária #0F533C · secundária #E8AE2E · texto #2A2E2C · fundo suave #EDF9F2
 *   verdes #19875C e #A8E6C3 · creme #FDF8E8 · dourado escuro #A06B00
 *   DM Sans · raio 6px · container 1140px
 *
 * A escala do mapa reaproveita a rampa de verdes que a marca já tem — é a
 * estrutura que um mapa coroplético pede — e o dourado marca a seleção, porque
 * precisa contrastar com a rampa inteira sem competir com ela.
 *
 * Tudo fica sob .anfivet-mapa para não brigar com o tema nem com o Elementor.
 * Sem !important: se o tema quiser sobrescrever, que sobrescreva.
 */

.anfivet-mapa {
	/* Cores da marca. Trocar aqui muda o mapa inteiro. */
	--anfivet-primaria: #0f533c;
	--anfivet-secundaria: #e8ae2e;
	--anfivet-texto: #2a2e2c;
	--anfivet-suave: #edf9f2;
	--anfivet-verde-medio: #19875c;
	--anfivet-verde-claro: #a8e6c3;
	--anfivet-creme: #fdf8e8;
	--anfivet-dourado-escuro: #a06b00;

	--anfivet-borda: #d6e3dc;
	--anfivet-fundo: #fff;
	--anfivet-texto-fraco: #5c6b64;
	--anfivet-raio: 6px;

	/* Escala do mapa por número de associados (docs/04: 1-5, 6-20, 21+). */
	--anfivet-uf-vazia: #e4e8e6;
	--anfivet-uf-baixa: var(--anfivet-verde-claro);
	--anfivet-uf-media: var(--anfivet-verde-medio);
	--anfivet-uf-alta: var(--anfivet-primaria);
	--anfivet-uf-ativa: var(--anfivet-secundaria);
	--anfivet-uf-traco: #ffffff;

	/*
	 * Tipografia do Kit: DM Sans nos pesos 400 (texto), 500 (destaque) e
	 * 600 (títulos). A fonte já é carregada pelo tema — aqui só declaramos a
	 * pilha, com fallbacks para o caso de a página do mapa ser aberta antes de
	 * a webfont chegar.
	 *
	 * Nota: `font-family: "DM Sans", inherit` é CSS inválido (`inherit` não
	 * entra em lista) e o navegador descartava a regra inteira. Era um bug.
	 */
	--anfivet-fonte: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	max-width: 1140px;
	margin-inline: auto;
	container-type: inline-size;
	color: var(--anfivet-texto);
	font-family: var(--anfivet-fonte);
	font-weight: 400;
	line-height: 1.55;
}

/* --------------------------------------------------------------- topo. */

/*
 * O bloco de cima (mapa + filtros) e a lista de resultados são duas seções
 * distintas; coladas, o olho lê tudo como um bloco só. O respiro maior e a
 * linha fina marcam a separação sem precisar de moldura.
 */
.anfivet-mapa__topo {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: center;
	margin-bottom: 56px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--anfivet-borda);
}

.anfivet-mapa__svg {
	flex: 1 1 340px;
	min-width: 0;
	max-width: 520px;
	margin-inline: auto;
}

.anfivet-mapa__svg svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* ------------------------------------------------- estados do mapa. */

/*
 * Cada <g data-uf="SP"> é um estado. O fill mora no grupo (o brasil.svg foi
 * gerado assim de propósito), então uma regra aqui pinta o estado inteiro —
 * preenchimento e contorno — sem precisar tocar em cada <path>.
 */
.anfivet-mapa__svg [data-uf] {
	fill: var(--anfivet-uf-vazia);
	transition: fill 0.18s ease;
}

/* O traço branco separa estados vizinhos da mesma faixa de cor. */
.anfivet-mapa__svg [data-uf] path {
	stroke: var(--anfivet-uf-traco);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
	transition: stroke 0.18s ease, stroke-width 0.18s ease;
}

.anfivet-mapa__svg [data-uf][role="button"] {
	cursor: pointer;
}

.anfivet-mapa__svg .anfivet-uf--baixa {
	fill: var(--anfivet-uf-baixa);
}

.anfivet-mapa__svg .anfivet-uf--media {
	fill: var(--anfivet-uf-media);
}

.anfivet-mapa__svg .anfivet-uf--alta {
	fill: var(--anfivet-uf-alta);
}

.anfivet-mapa__svg [data-uf][role="button"]:hover {
	fill: var(--anfivet-secundaria);
}

.anfivet-mapa__svg [data-uf].is-ativo {
	fill: var(--anfivet-uf-ativa);
}

/*
 * Foco de teclado: `outline` desenha um RETÂNGULO em volta da caixa do
 * elemento, não do contorno do estado — foi o que produziu aquelas bordas
 * quadradas no mapa. Aqui o destaque é o próprio traço do estado, que segue
 * a forma. Continua sendo um indicador de foco visível, como a acessibilidade
 * exige; só não é mais uma caixa por cima do desenho.
 */
.anfivet-mapa__svg [data-uf]:focus {
	outline: none;
}

.anfivet-mapa__svg [data-uf]:focus-visible path {
	stroke: var(--anfivet-dourado-escuro);
	stroke-width: 3;
}

/* Estado sem associado não recebe clique nem foco. */
.anfivet-mapa__svg [aria-disabled="true"] {
	cursor: default;
	pointer-events: none;
}

/* ---------------------------------------------------------- legenda. */

.anfivet-mapa__legenda {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 16px 0 0;
	font-size: 0.82em;
	color: var(--anfivet-texto-fraco);
}

.anfivet-mapa__legenda-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.anfivet-mapa__chip {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--anfivet-uf-vazia);
}

.anfivet-mapa__chip--baixa {
	background: var(--anfivet-uf-baixa);
}

.anfivet-mapa__chip--media {
	background: var(--anfivet-uf-media);
}

.anfivet-mapa__chip--alta {
	background: var(--anfivet-uf-alta);
}

/* ------------------------------------------------------------ filtros. */

.anfivet-mapa__filtros {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--anfivet-suave);
	border-radius: calc(var(--anfivet-raio) * 2);
}

.anfivet-mapa__campo {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.anfivet-mapa__campo label {
	font-weight: 600;
	font-size: 0.88em;
	color: var(--anfivet-primaria);
}

.anfivet-mapa__campo input,
.anfivet-mapa__campo select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--anfivet-borda);
	border-radius: var(--anfivet-raio);
	background: var(--anfivet-fundo);
	font: inherit;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.anfivet-mapa__campo input:focus,
.anfivet-mapa__campo select:focus {
	outline: none;
	border-color: var(--anfivet-verde-medio);
	box-shadow: 0 0 0 3px rgba(25, 135, 92, 0.18);
}

.anfivet-mapa__campo select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Seta própria nos selects, para não depender do desenho do sistema. */
.anfivet-mapa__campo select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230F533C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 36px;
}

/* Campo de busca com a lupa embutida. */
.anfivet-mapa__campo--busca input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235C6B64' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 16px;
	padding-left: 36px;
}

.anfivet-mapa__acoes {
	margin: 4px 0 0;
	display: flex;
	align-items: center;
	gap: 14px;
}

.anfivet-mapa__botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border: 0;
	border-radius: var(--anfivet-raio);
	background: var(--anfivet-primaria);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.anfivet-mapa__botao:hover {
	background: var(--anfivet-verde-medio);
}

.anfivet-mapa__botao:focus-visible {
	outline: 3px solid var(--anfivet-secundaria);
	outline-offset: 2px;
}

.anfivet-mapa__limpar {
	color: var(--anfivet-texto-fraco);
	font-size: 0.9em;
	text-decoration: underline;
}

.anfivet-mapa__limpar:hover {
	color: var(--anfivet-primaria);
}

/* --------------------------------------------------------- resultados. */

.anfivet-mapa--carregando .anfivet-mapa__resultados {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.anfivet-mapa__contagem {
	margin: 0 0 22px;
	font-weight: 600;
	font-size: 1.15em;
	letter-spacing: -0.01em;
	color: var(--anfivet-primaria);
}

.anfivet-mapa__vazio {
	padding: 40px 16px;
	text-align: center;
	color: var(--anfivet-texto-fraco);
	background: var(--anfivet-suave);
	border-radius: calc(var(--anfivet-raio) * 2);
}

.anfivet-mapa__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.anfivet-mapa__item {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--anfivet-borda);
	border-radius: calc(var(--anfivet-raio) * 2);
	background: var(--anfivet-fundo);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.anfivet-mapa__item:hover {
	border-color: var(--anfivet-verde-claro);
	box-shadow: 0 4px 16px rgba(15, 83, 60, 0.08);
}

.anfivet-mapa__nome {
	margin: 0;
	font-size: 1.08em;
	font-weight: 600;
	line-height: 1.3;
	color: var(--anfivet-primaria);
}

/*
 * As areas de atuacao, uma pill cada.
 *
 * Antes eram uma span so com tudo junto separado por virgula: quem marcava
 * seis areas ganhava um paragrafo bege de cinco linhas, e o cartao dele ficava
 * do dobro do tamanho dos vizinhos, quebrando o alinhamento da grade. Repartir
 * em pills mantem os cartoes com a mesma altura, e o "+N" avisa que ha mais
 * sem gastar espaco para dize-lo.
 */
.anfivet-mapa__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 2px;

	/*
	 * Altura reservada para duas linhas de pill.
	 *
	 * Quem marcou uma area so ocupava metade do espaco de quem marcou tres, e o
	 * bloco seguinte subia — o cartao inteiro se reorganizava. Reservar a altura
	 * faz a linha de baixo (cidade, CRMV) comecar sempre no mesmo lugar.
	 *
	 * 2 linhas de 25px + o gap de 5px. Casa com AREAS_NO_CARTAO = 3, que e
	 * quantas pills cabem em duas linhas na largura do cartao.
	 */
	min-height: 55px;
	align-content: flex-start;
}

.anfivet-mapa__tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--anfivet-creme);
	color: var(--anfivet-dourado-escuro);
	font-size: 0.78em;
	font-weight: 600;

	/*
	 * Teto por pill: um rotulo comprido nao empurra o cartao. Nenhum dos
	 * quatro rotulos oficiais chega perto disto depois de encurtado, entao a
	 * regra so morde texto livre antigo, que e justamente o imprevisivel.
	 */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * O "+N".
 *
 * Contorno em vez de fundo cheio: ele conta uma quantidade, nao nomeia uma
 * area, e nao pode competir com as pills de verdade. `cursor:help` avisa que
 * ha algo no hover — sem isso o title existe e ninguem descobre.
 */
.anfivet-mapa__tag--mais {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--anfivet-creme);
	cursor: help;
}

/*
 * O buraco de quem nao marcou area nenhuma.
 *
 * Sem areas o elemento `__tags` nem e impresso, entao a reserva de altura
 * acima nao vale para essa pessoa e o cartao dela encolhe. `::before` no
 * primeiro `__meta` que vem logo depois do nome devolve o mesmo espaco.
 */
.anfivet-mapa__nome + .anfivet-mapa__meta::before {
	content: '';
	display: block;
	height: 57px;
}

.anfivet-mapa__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--anfivet-texto-fraco);
	font-size: 0.9em;
}

.anfivet-mapa__meta svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.anfivet-mapa__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	/*
	 * `auto`, e nao uma margem fixa.
	 *
	 * O cartao ja e uma coluna flex que estica ate a altura da linha da grade.
	 * Com margem fixa o botao ficava logo abaixo do conteudo, entao cada cartao
	 * o punha numa altura diferente: medido na pagina real, tres cartoes da
	 * mesma linha tinham o botao em 686, 709 e 620 pixels — 89px de diferenca,
	 * e e isso que o olho le como "cartoes irregulares".
	 *
	 * `margin-top: auto` empurra o botao para o fim da coluna. Todos os cartoes
	 * da mesma linha passam a ter o botao na mesma altura, independente de
	 * quantas areas a pessoa marcou ou de o nome ter quebrado em duas linhas.
	 */
	margin-top: auto;
	padding: 9px 16px;
	border-radius: var(--anfivet-raio);
	background: var(--anfivet-verde-medio);
	color: #fff;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.anfivet-mapa__whatsapp:hover,
.anfivet-mapa__whatsapp:focus {
	background: var(--anfivet-primaria);
	color: #fff;
}

.anfivet-mapa__whatsapp svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* --------------------------------------------------------- paginação. */

.anfivet-mapa__paginacao {
	margin-top: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.anfivet-mapa__pagina {
	padding: 9px 16px;
	border: 1px solid var(--anfivet-borda);
	border-radius: var(--anfivet-raio);
	color: var(--anfivet-primaria);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.anfivet-mapa__pagina:hover {
	background: var(--anfivet-suave);
	border-color: var(--anfivet-verde-claro);
}

.anfivet-mapa__pagina-atual {
	color: var(--anfivet-texto-fraco);
	font-size: 0.9em;
}

/* ------------------------------------------------------------- aviso. */

.anfivet-mapa__aviso {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 40px;
	padding: 16px 18px;
	background: var(--anfivet-creme);
	border-radius: calc(var(--anfivet-raio) * 2);
	color: var(--anfivet-texto-fraco);
	font-size: 0.85em;
	line-height: 1.55;
}

.anfivet-mapa__aviso svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

.anfivet-mapa__aviso a {
	color: var(--anfivet-primaria);
	font-weight: 600;
}

/* ------------------------------------------------------------ mobile. */

@container (max-width: 640px) {
	.anfivet-mapa__topo {
		flex-direction: column;
		gap: 20px;
	}

	.anfivet-mapa__svg,
	.anfivet-mapa__filtros {
		max-width: 100%;
		width: 100%;
	}

	.anfivet-mapa__lista {
		grid-template-columns: 1fr;
	}
}

/* Navegadores sem container queries. */
@media (max-width: 640px) {
	.anfivet-mapa__topo {
		flex-direction: column;
	}

	.anfivet-mapa__lista {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.anfivet-mapa *,
	.anfivet-mapa *::before {
		transition: none !important;
	}
}