/*
 * Imob Engine — listagem: filtros, cards, resultados.
 */

.ie-listing__header { margin-bottom: 1.5rem; }
.ie-listing__title { margin: 0 0 .3rem; }
.ie-listing__lead { color: var(--ie-text-muted); margin: 0; }

/* Filtros, contagem e cards vivem agora em `listing-page.css`, junto com a
 * composição da página de Imóveis: são a mesma UI em todas as listagens
 * (arquivo, taxonomia, localidade e resultados de busca). Aqui ficam apenas
 * favoritos/comparação, a barra flutuante e a tela de comparação. */

/* ---------------------------------------------------------------------------
 * Favoritos e comparação (0.7.0). Sem dependências; respeita claro/escuro.
 * ------------------------------------------------------------------------- */
/* Botão de comparar fora do card (single do imóvel): componente próprio, com
 * a mesma semântica de `aria-pressed`. Dentro do card, favoritar e comparar
 * vivem sobre a foto e são estilizados em `listing-page.css`. */
.ie-single__compare .ie-card__compare {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 40px;
	padding: .35rem .7rem;
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-sm);
	background: var(--ie-surface);
	color: var(--ie-text);
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
	transition: color var(--ie-transition-fast), border-color var(--ie-transition-fast), background var(--ie-transition-fast);
}
.ie-single__compare .ie-card__compare:hover { border-color: var(--ie-brand-fg); color: var(--ie-brand-fg); }
.ie-card__fav:focus-visible,
.ie-card__compare:focus-visible { outline: none; box-shadow: var(--ie-focus-ring); }
.ie-single__compare .ie-card__compare[aria-pressed="true"] {
	border-color: var(--ie-brand-fg);
	color: var(--ie-brand-fg);
	background: color-mix(in srgb, var(--ie-brand-fg) 10%, transparent);
	font-weight: 600;
}

/* Tabela de comparação: rola horizontalmente sem quebrar o layout. */
.ie-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ie-compare {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
}
.ie-compare th,
.ie-compare td {
	padding: .6rem .75rem;
	border: 1px solid var(--ie-border, #d8dee6);
	text-align: left;
	vertical-align: top;
	font-size: .9rem;
}
.ie-compare thead th { background: var(--ie-surface-strong); }
.ie-compare tr.is-diff th[scope="row"] { font-weight: 700; }
.ie-compare__diff { color: var(--ie-brand-fg); }
.ie-compare__code { color: var(--ie-text-muted, #6b7280); font-size: .78rem; }
.ie-na { color: var(--ie-text-muted, #9aa2ad); }

/* Botão de comparar no single do imóvel (mesmo componente do card). */
.ie-single__compare { margin: .75rem 0 0; }

/* Limite de 4 imóveis atingido: o botão continua clicável e no tecla (nunca
   `disabled`, para não sumir da navegação por teclado), só com um estado
   visual claro e um título explicativo. */
.ie-card__compare.is-limit,
.ie-single__compare .ie-card__compare.is-limit {
	opacity: .55;
	border-style: dashed;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Barra de comparação persistente (1.0). Casca renderizada pelo footer,
 * conteúdo hidratado por compare.js a partir do localStorage validado no
 * servidor. Sem seleção, permanece `hidden` (também o estado sem JavaScript).
 * ------------------------------------------------------------------------- */
.ie-compare-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Barra de rodapé, não gaveta: fica acima do conteúdo e abaixo do
	   cabeçalho. */
	z-index: var(--ie-z-sticky, 9990);
	background: var(--ie-bg);
	border-top: 1px solid var(--ie-border);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
}
.ie-compare-bar[hidden] { display: none; }
.ie-compare-bar__inner {
	max-width: var(--ie-container-wide);
	margin: 0 auto;
	padding: .7rem 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .85rem;
}
.ie-compare-bar__label { display: flex; flex-direction: column; gap: .15rem; flex: 0 0 auto; }
.ie-compare-bar__count { font-size: .82rem; font-weight: 700; color: var(--ie-text); white-space: nowrap; }
.ie-compare-bar__limit {
	font-size: .74rem; font-weight: 600; color: var(--ie-warning, #8a5a00);
}
.ie-compare-bar__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .5rem;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.ie-compare-bar__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .5rem .3rem .3rem;
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-sm);
	background: var(--ie-surface);
	max-width: 200px;
}
.ie-compare-bar__slot {
	flex: 0 0 auto;
	width: 46px;
	border: 1px dashed var(--ie-border);
	border-radius: var(--ie-radius-sm);
}
.ie-compare-bar__thumb {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var(--ie-radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ie-surface-strong);
	color: var(--ie-text-muted);
}
.ie-compare-bar__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ie-compare-bar__meta { min-width: 0; display: flex; flex-direction: column; gap: 0; font-size: .8rem; }
.ie-compare-bar__meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.ie-compare-bar__code { color: var(--ie-text-muted); font-size: .74rem; }
.ie-compare-bar__remove {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ie-text-muted);
	cursor: pointer;
}
.ie-compare-bar__remove:hover { color: var(--ie-danger); background: var(--ie-danger-soft); }
.ie-compare-bar__remove:focus-visible { outline: none; box-shadow: var(--ie-focus-ring); }
.ie-compare-bar__actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; margin-left: auto; }
.ie-compare-bar__hint { font-size: .78rem; color: var(--ie-text-muted); white-space: nowrap; }


@media (min-width: 701px) {
	.ie-compare-bar__inner { flex-wrap: nowrap; }
	.ie-compare-bar__items { flex: 1 1 0; min-width: 0; }
	.ie-compare-bar__item { flex: 1 1 150px; min-width: 145px; max-width: 200px; }
	.ie-compare-bar__meta { flex: 1 1 auto; }
	.ie-compare-bar__meta strong { max-width: 100%; }
	.ie-compare-bar__actions { flex-wrap: nowrap; }
}

/* Reserva espaço para a barra não cobrir o rodapé/CTA mobile. */
body.ie-has-compare-bar { padding-bottom: 4.5rem; }
@media (max-width: 700px) {
	body.ie-has-compare-bar.ie-has-mobile-cta .ie-compare-bar { bottom: 4.2rem; }
	body.ie-has-compare-bar.ie-has-mobile-cta { padding-bottom: 8.5rem; }
	.ie-compare-bar__inner { gap: .5rem; }
	.ie-compare-bar__actions { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
 * Tela de comparação: barra de ferramentas, tabela agrupada, coluna de
 * atributos fixa e estados especiais (um item só / nenhum item).
 * ------------------------------------------------------------------------- */
.ie-compare-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 1rem;
}
.ie-compare-toolbar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.ie-compare thead th { vertical-align: top; padding: .85rem .9rem; }
.ie-compare__head { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; font-weight: 600; }
.ie-compare__thumb {
	width: 100%;
	max-width: 160px;
	aspect-ratio: 4 / 3;
	border-radius: var(--ie-radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ie-surface-strong);
	color: var(--ie-text-muted);
	margin-bottom: .2rem;
}
.ie-compare__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ie-compare__head-actions { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin-top: .4rem; font-weight: 500; }
.ie-compare__action {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .78rem;
	color: var(--ie-brand-fg);
	cursor: pointer;
}
.ie-compare__action:hover { color: var(--ie-brand-fg-hover); }
.ie-compare__action:focus-visible { outline: none; box-shadow: var(--ie-focus-ring); border-radius: 3px; }
.ie-compare__action--danger { color: var(--ie-danger); }

/* Linha de cabeçalho de grupo — atravessa todas as colunas. */
.ie-compare__group th {
	background: var(--ie-surface-strong);
	color: var(--ie-text);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .55rem .75rem;
	border-left: 3px solid var(--ie-brand-fg);
	text-align: left;
}

/* Coluna de atributos fixa (rola horizontalmente sem sobrepor o conteúdo:
   fundo sólido igual ao da linha, sem transparência). */
.ie-compare__attr-col,
.ie-compare tbody th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--ie-bg);
	box-shadow: 1px 0 0 0 var(--ie-border);
}
.ie-compare__attr-col { background: var(--ie-surface-strong); z-index: 2; }
.ie-compare tr.is-diff th[scope="row"] { background: var(--ie-brand-soft, color-mix(in srgb, var(--ie-brand-fg) 8%, var(--ie-bg))); }

/* Listas de características/comodidades dentro de uma célula. */
.ie-compare__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }

/* "Somente diferenças": a filtragem em si é feita em JS (adiciona `hidden`
   às linhas/grupos); aqui só garantimos que `[hidden]` vence qualquer regra
   de `display` de tabela em todos os navegadores. */
.ie-compare tr[hidden],
.ie-compare tbody[hidden] { display: none; }

/* Estados: um único imóvel selecionado (convite a completar a comparação). */
.ie-compare-single { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: stretch; }
.ie-compare-single__card {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem 1rem;
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius);
	background: var(--ie-surface);
}
.ie-compare-single__thumb {
	width: 56px; height: 56px; flex: none;
	border-radius: var(--ie-radius-sm);
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: var(--ie-surface-strong);
	color: var(--ie-text-muted);
}
.ie-compare-single__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ie-compare-single__meta { display: flex; flex-direction: column; gap: .2rem; }
.ie-compare-single .ie-empty { flex: 1 1 260px; }

@media (max-width: 700px) {
	.ie-compare__thumb { max-width: 110px; }
	.ie-compare-toolbar { flex-direction: column; align-items: stretch; }
}

/* Impressão: só a tabela de comparação, sem chrome do site. */
@media print {
	body.ie-compare-page .ie-site-header,
	body.ie-compare-page .ie-site-footer,
	body.ie-compare-page .ie-compare-bar,
	body.ie-compare-page .ie-toast-region,
	body.ie-compare-page .ie-compare-toolbar,
	body.ie-compare-page .ie-compare__head-actions,
	body.ie-compare-page .ie-chatbot { display: none !important; }
	body.ie-compare-page .ie-compare__attr-col,
	body.ie-compare-page .ie-compare tbody th[scope="row"] { position: static; box-shadow: none; }
	.ie-compare tr[hidden],
	.ie-compare tbody[hidden] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ie-compare-bar { transition: none; }
}

/* Formulário de visita (details) no single. */
.ie-visit > summary {
	cursor: pointer;
	list-style: none;
}
.ie-visit > summary::-webkit-details-marker { display: none; }

/* Movimento do card é desligado em `listing-page.css`, junto com o restante da
 * listagem. */