/* =========================================================================
   AutoSerra — página de detalhe do veículo (layout novo)
   Galeria em mosaico no desktop, carrossel swipe no mobile.
   Arquivo isolado: não altera style.css nem afeta outras páginas.
   ========================================================================= */

.asd {
	background: #fff;
	padding: 18px 0 40px;
}

/* ---------- Cabeçalho (título acima da galeria) ----------
   Título à esquerda, favoritar/comparar à direita, na mesma linha. */
.asd-topo {
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.asd-topo-txt { min-width: 0; }  /* deixa o título quebrar em vez de empurrar os ícones */
.asd-topo h1 {
	font-size: 26px;
	line-height: 1.25;
	font-weight: 700;
	color: #222;
	margin: 0 0 4px;
}
.asd-topo .asd-versao {
	font-size: 16px;
	color: #666;
	line-height: 1.4;
}

/* =========================================================================
   GALERIA
   ========================================================================= */
.asg {
	position: relative;
	margin-bottom: 26px;
}

.asg-grid {
	display: grid;
	gap: 8px;
	height: 430px;
	border-radius: 8px;
	overflow: hidden;
}

.asg-cell {
	position: relative;
	display: block;
	overflow: hidden;
	background: #eee;
	cursor: pointer;
}
.asg-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.asg-cell:hover img {
	transform: scale(1.04);
}

/* Anúncio sem foto: o placeholder é pequeno e "cover" o ampliaria a ponto de
   virar borrão. Aqui ele fica centralizado no tamanho natural. */
.asg-cell.asg-vazio {
	background: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}
.asg-cell.asg-vazio img {
	width: auto;
	height: auto;
	max-width: 45%;
	max-height: 60%;
	object-fit: contain;
	opacity: .55;
}
.asg-cell.asg-vazio:hover img { transform: none; }

/* --- 5 ou mais fotos: 1 grande + 4 (padrão) --- */
.asg-n5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.asg-n5 .asg-cell:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.asg-n5 .asg-cell:nth-child(n+6) { display: none; }

/* --- 3 ou 4 fotos: 1 grande + 2 --- */
.asg-n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.asg-n3 .asg-cell:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.asg-n3 .asg-cell:nth-child(n+4) { display: none; }

/* --- 2 fotos: lado a lado --- */
.asg-n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.asg-n2 .asg-cell:nth-child(n+3) { display: none; }

/* --- 1 foto --- */
.asg-n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.asg-n1 .asg-cell:nth-child(n+2) { display: none; }

/* Selo "+N fotos" sobre a última célula visível */
.asg-mais {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	background: rgba(0,0,0,.55);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: background .25s ease;
}
.asg-cell:hover .asg-mais { background: rgba(0,0,0,.68); }
.asg-mais i { margin-right: 7px; }

/* Botão "ver todas" — desktop.
   Fica à esquerda, sobre a foto grande: à direita colidiria com o selo "+N fotos". */
.asg-vertodas {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: rgba(255,255,255,.94);
	color: #222;
	border: 0;
	border-radius: 4px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
	z-index: 3;
}
.asg-vertodas:hover { background: #f3c201; }
.asg-vertodas i { margin-right: 6px; }

/* Contador — só mobile */
.asg-contador {
	display: none;
	position: absolute;
	right: 12px;
	bottom: 12px;
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 20px;
	z-index: 3;
	pointer-events: none;
}

/* Favoritar / comparar — ficam na linha do título, não mais sobre a foto,
   por isso borda em vez da sombra que servia para destacá-los da imagem. */
.asg-acoes {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}
.asg-acoes > span,
.asg-acoes > div {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e2e2e2;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 17px;
	color: #555;
	position: static;
	margin: 0;
	padding: 0;
	float: none;
	transition: border-color .2s ease, color .2s ease;
}
.asg-acoes > span:hover,
.asg-acoes > div:hover { border-color: #f3c201; color: #222; }
.asg-acoes .fas.fa-heart { color: #e23b3b; }

/* =========================================================================
   BLOCOS DE CONTEÚDO
   ========================================================================= */
.asd-bloco {
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 20px 22px;
	margin-bottom: 18px;
	background: #fff;
}
.asd-bloco > h2 {
	font-size: 17px;
	font-weight: 700;
	color: #222;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid #f3c201;
	display: inline-block;
}

/* Chips de resumo (km · ano · câmbio · combustível) */
.asd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}
.asd-chips li {
	background: #f6f6f6;
	border: 1px solid #e6e6e6;
	border-radius: 22px;
	padding: 7px 15px;
	font-size: 13.5px;
	color: #444;
	white-space: nowrap;
}
.asd-chips li i {
	color: #b9930c;
	margin-right: 7px;
}
.asd-chips li b { color: #222; font-weight: 600; }

/* Ficha técnica em duas colunas */
.asd-ficha {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 32px;
}
.asd-ficha li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14.5px;
}
.asd-ficha li span { color: #777; }
.asd-ficha li b { color: #222; font-weight: 600; text-align: right; }

/* Opcionais */
.asd-opcionais {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 9px 22px;
}
.asd-opcionais li {
	font-size: 14px;
	color: #444;
	display: flex;
	align-items: flex-start;
	gap: 9px;
}
.asd-opcionais li i {
	color: #1e8e3e;
	font-size: 12px;
	margin-top: 4px;
	flex: 0 0 auto;
}

.asd-obs {
	font-size: 14.5px;
	line-height: 1.65;
	color: #444;
	white-space: pre-line;
}

.asd-meta {
	font-size: 12.5px;
	color: #999;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f0;
}
.asd-meta span { margin-right: 18px; white-space: nowrap; }

/* =========================================================================
   COLUNA LATERAL — preço, CTAs e anunciante
   ========================================================================= */
.asd-side-inner { position: relative; }

/* No desktop os cards de preço e do anunciante acompanham a rolagem.
   As colunas do Bootstrap são float, então têm a altura do próprio conteúdo e
   não deixam trilho para o sticky deslizar — o flex faz a coluna esticar até a
   altura da linha, que é o que dá o percurso. */
@media only screen and (min-width: 992px) {
	/* O .page-wrapper do tema tem overflow:hidden, que cria caixa de rolagem e
	   anula qualquer sticky interno. "clip" contém o estouro horizontal do mesmo
	   jeito, mas sem caixa de rolagem — e navegador que não conheça a palavra
	   ignora a linha e permanece no hidden de hoje (sem sticky, sem quebra). */
	body.asd-page .page-wrapper { overflow: clip; }

	.asd-row {
		display: flex;
		align-items: stretch;
		/* o rodapé do conteúdo ocupa a linha seguinte, na largura toda */
		flex-wrap: wrap;
	}
	.asd-rodape-conteudo {
		width: 100%;
		order: 9;
		padding: 0 15px;
	}
	/* Só onde o .row é flex: o clearfix do Bootstrap viraria item e desalinharia
	   as colunas. Entre 768 e 991px o layout volta a ser float e precisa dele. */
	.asd-row::before,
	.asd-row::after { display: none; }
	.asd-side-inner {
		position: -webkit-sticky;
		position: sticky;
		top: 20px;
	}
	/* Com o formulário aberto a coluna passa da altura da tela e o sticky
	   travaria o rodapé do formulário fora de alcance. Aí ele sai de cena. */
	.asd-side-inner.asd-sem-sticky { position: relative; top: 0; }
}

/* Acima de 1200px o tema mostra a .sticky-header (fixa no topo, 69px de altura);
   abaixo disso o responsive.css a esconde. Sem esta folga o card gruda por baixo
   dela e o preço fica parcialmente coberto. 69 + 10 de respiro. */
@media only screen and (min-width: 1201px) {
	.asd-side-inner { top: 79px; }
}

.asd-card {
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 3px 14px rgba(0,0,0,.07);
	padding: 22px;
	margin-bottom: 18px;
}

.asd-preco-rot {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #999;
	margin-bottom: 2px;
}
.asd-preco {
	font-size: 32px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.15;
}
/* O selo de queda vem de SeloPrecoReduzido() e já tem CSS próprio no style.css;
   aqui só garantimos o respiro dentro do card. */
.asd-card .PrecoQueda { margin: 8px 0 0; }

.asd-ctas { margin-top: 18px; }
.asd-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px 12px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	border: 0;
	cursor: pointer;
	margin-bottom: 10px;
	text-decoration: none;
	line-height: 1.2;
	transition: filter .2s ease;
}
.asd-btn:hover { filter: brightness(.94); text-decoration: none; }
.asd-btn i { margin-right: 8px; }
.asd-btn-zap { background: #25d366; color: #fff; }
.asd-btn-zap:hover, .asd-btn-zap:focus { color: #fff; }
.asd-btn-tel { background: #f3c201; color: #222; }
.asd-btn-tel:hover, .asd-btn-tel:focus { color: #222; }
.asd-btn-msg {
	background: #fff;
	color: #333;
	border: 1px solid #d8d8d8;
}
.asd-btn-msg:hover, .asd-btn-msg:focus { color: #333; }

.asd-telefones {
	display: none;
	margin: 4px 0 10px;
	padding: 12px 14px;
	background: #fbf7e4;
	border: 1px solid #f0e2a8;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #333;
	line-height: 1.9;
}
.asd-telefones a { color: #333; }
.asd-telefones .verde { color: #25d366; }

/* --- Anunciante --- */
.asd-vend-topo {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}
.asd-vend-logo {
	width: 66px;
	height: 66px;
	flex: 0 0 66px;
	border: 1px solid #eee;
	border-radius: 6px;
	object-fit: contain;
	background: #fff;
	padding: 3px;
}
.asd-vend-nome {
	font-size: 16.5px;
	font-weight: 700;
	color: #222;
	line-height: 1.3;
	margin: 0 0 4px;
}
.asd-desde {
	font-size: 13px;
	font-weight: 600;
	color: #1e8e3e;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.asd-desde i { font-size: 12px; }
.asd-vend-info {
	font-size: 13.5px;
	color: #666;
	line-height: 1.6;
}
.asd-vend-info b { color: #333; }
.asd-vend-social {
	margin-top: 12px;
	line-height: 1;
}
.asd-vend-social a {
	display: inline-block;
	font-size: 20px;
	color: #666;
	margin-right: 16px;
}
.asd-vend-social a:hover { color: #f3c201; }
.asd-vend-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: #b9930c;
}
.asd-aviso {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f0;
	font-size: 12.5px;
	color: #777;
}

/* =========================================================================
   CARD DE DUAS FACES — preço/CTAs na frente, formulário no verso
   O formulário fica montado desde o carregamento (o reCAPTCHA precisa disso),
   apenas virado para trás.
   ========================================================================= */
.asd-flip {
	position: relative;
	/* A rotação projeta o card para fora do plano; sem isto ele poderia cruzar
	   visualmente com o card do anunciante logo abaixo. */
	z-index: 2;
	perspective: 1800px;
	margin-bottom: 18px;
	transition: height .5s cubic-bezier(.4, .15, .2, 1);
}
.asd-flip-inner {
	position: relative;
	width: 100%;
	/* Acompanha a altura que o JS dá ao .asd-flip. Sem isto o elemento fica com
	   a altura da frente, e como o transform 3D o promove a uma camada de
	   composição desse tamanho, o verso — que é absoluto e mais alto — é
	   recortado na rasterização (o formulário aparecia cortado no 1º campo). */
	height: 100%;
	transition: transform .55s cubic-bezier(.4, .15, .2, 1);
	transform-style: preserve-3d;
	will-change: transform;
}
.asd-flip.asd-virado .asd-flip-inner { transform: rotateY(180deg); }

/* A moldura do card vive na PRÓPRIA face, não num filho: sob preserve-3d o
   navegador rasteriza os descendentes em camadas separadas, e um fundo que
   estivesse numa div interna se descolaria do texto durante o giro — os
   "elementos soltos sobre fundo transparente". O translateZ(0) força cada
   face a ser uma camada única, e o overflow recorta o que passar dela. */
.asd-face {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	box-shadow: 0 3px 14px rgba(0,0,0,.07);
	overflow: hidden;
}
/* O card interno passa a ser só espaçamento — a moldura já é da face. */
.asd-face .asd-card {
	margin-bottom: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

/* A frente fica no fluxo: sem JS o card se comporta como um card comum. */
.asd-frente {
	position: relative;
	transform: translateZ(0);
}
.asd-verso {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transform: rotateY(180deg) translateZ(0);
	pointer-events: none;
}
.asd-flip.asd-virado .asd-verso  { pointer-events: auto; }
.asd-flip.asd-virado .asd-frente { pointer-events: none; }

.asd-voltar {
	background: none;
	border: 0;
	padding: 0 0 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: #777;
	cursor: pointer;
}
.asd-voltar:hover { color: #222; }
.asd-voltar i { margin-right: 7px; }

/* O formulário dentro do card: sem a moldura e o preço grande que ele traz,
   já que o card fornece a moldura e o preço está na frente. */
/* DetalheMensagem() traz um window.onscroll próprio (FuncoesFormatacao.php ~4045)
   que prega o #DetalheMensagem com position:fixed ao passar de 390px de rolagem —
   o sticky caseiro do layout antigo, onde o formulário morava solto na coluna.
   Aqui ele arrancaria o formulário de dentro do card virado. O !important vence
   o estilo inline que aquele script aplica; o JS da página ainda desliga o
   handler, mas esta regra é a que garante, mesmo se ele voltar a rodar. */
.asd-card-form #DetalheMensagem {
	position: static !important;
	top: auto !important;
	width: 100% !important;
}

.asd-card-form { padding: 18px; }

/* O preço fica no topo do formulário: com o card virado a frente sai de vista e
   ele é a referência do que se está negociando. Vem do próprio DetalheMensagem(),
   só reduzido — os 40px originais são tamanho de destaque de página. */
.asd-card-form .DetalhePreco {
	font-size: 25px;
	line-height: 1.2;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid #f0f0f0;
}
.asd-card-form .cars-form > p {
	font-size: 14px;
	color: #666;
	margin: 12px 0 14px;
}

/* "Denunciar esse anúncio" sai do card (a função o envolve num <center>).
   Continua no layout antigo, que usa a mesma função. */
.asd-card-form center { display: none; }

.asd-card-form .loan-cal-widget { margin: 0; }
.asd-card-form .loan-cal-widget .inner { border: 0; background: none; }
.asd-card-form .loan-cal-widget .form-box { padding: 0; }

/* Voltar — usa .theme-btn.btn-style-one do tema (amarelo/branco, preto no
   hover); aqui só o espaçamento e o cursor, para não repintar o que já existe. */
.asd-voltar-pagina {
	cursor: pointer;
	margin-bottom: 18px;
	min-width: 140px;
}

.asd-politica {
	font-size: 12px;
	color: #999;
	line-height: 1.6;
	margin-bottom: 18px;
}

/* =========================================================================
   BARRA FIXA (mobile)
   ========================================================================= */
.asd-barra {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 999;
	background: #fff;
	border-top: 1px solid #e2e2e2;
	box-shadow: 0 -3px 14px rgba(0,0,0,.13);
	padding: 9px 12px;
	align-items: center;
	gap: 10px;
}
.asd-barra-preco {
	flex: 1 1 auto;
	min-width: 0;
}
.asd-barra-preco span {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #999;
	line-height: 1.2;
}
.asd-barra-preco b {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.asd-barra .asd-btn {
	width: auto;
	margin: 0;
	padding: 12px 15px;
	flex: 0 0 auto;
	font-size: 14px;
}
.asd-barra .asd-btn i { margin-right: 6px; }

/* Com três ações (WhatsApp, Ligar, Mensagem) o rótulo não cabe ao lado do
   preço em telas estreitas: some abaixo de 460px e ficam só os ícones, com
   área de toque preservada. title/aria-label seguem descrevendo cada botão. */
@media only screen and (max-width: 459px) {
	.asd-barra .asd-btn-icone span { display: none; }
	.asd-barra .asd-btn-icone {
		width: 46px;
		padding: 12px 0;
		text-align: center;
	}
	.asd-barra .asd-btn-icone i {
		margin-right: 0;
		font-size: 17px;
	}
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media only screen and (max-width: 1199px) {
	.asg-grid { height: 370px; }
}

@media only screen and (max-width: 991px) {
	.asg-grid { height: 320px; }
	.asd-topo h1 { font-size: 22px; }
	/* Tablet: lateral deixa de ser sticky e vira bloco normal */
	.asd-side-inner { position: static; }
}

@media only screen and (max-width: 767px) {

	.asd { padding: 12px 0 30px; }

	.asd-topo h1 { font-size: 19px; }
	.asd-topo .asd-versao { font-size: 14px; }

	/* --- Galeria vira carrossel swipe, sangrando até a borda da tela --- */
	.asg {
		margin-left: -15px;
		margin-right: -15px;
		margin-bottom: 18px;
	}
	.asg-grid {
		display: flex;
		height: auto;
		gap: 0;
		border-radius: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.asg-grid::-webkit-scrollbar { display: none; }

	/* Todas as fotos entram no carrossel, inclusive as escondidas no desktop */
	.asg-grid .asg-cell {
		display: block !important;
		flex: 0 0 100%;
		width: 100%;
		height: 74vw;
		max-height: 390px;
		scroll-snap-align: center;
		grid-column: auto !important;
		grid-row: auto !important;
	}
	.asg-cell:hover img { transform: none; }
	.asg-mais { display: none; }          /* no swipe não faz sentido */
	.asg-vertodas { display: none; }
	.asg-contador { display: block; }
	.asg-acoes > span,
	.asg-acoes > div { width: 36px; height: 36px; font-size: 15px; }

	/* --- Ordem no mobile ---------------------------------------------
	   fotos → preço/botões → ficha do carro → anunciante → voltar.
	   O anunciante não pode subir junto com o preço (a coluna lateral traz os
	   dois): quem chega quer ver o veículo antes de saber quem vende.
	   `display: contents` dissolve os wrappers da coluna, de modo que o card de
	   preço e o do anunciante viram itens diretos da linha e podem ser ordenados
	   um a um. Navegador sem suporte ignora e mantém a ordem antiga, que
	   funciona — só é menos boa. */
	.asd-row {
		display: flex;
		flex-direction: column;
		/* sem os wrappers, a margem negativa do .row do Bootstrap não teria
		   quem a compensasse e o conteúdo colaria nas bordas */
		margin-left: 0;
		margin-right: 0;
	}
	.asd-row::before,
	.asd-row::after { display: none; }

	.asd-side,
	.asd-side-inner { display: contents; }

	.asd-flip            { order: 1; }  /* preço + botões */
	.asd-main            { order: 2; }  /* ficha do carro */
	.asd-vend-card       { order: 3; }  /* anunciante */
	.asd-rodape-conteudo { order: 4; }  /* voltar + política */

	.asd-bloco { padding: 16px; }
	.asd-card  { padding: 17px; }
	.asd-ficha { grid-template-columns: 1fr; }
	.asd-opcionais { grid-template-columns: 1fr 1fr; }
	.asd-preco { font-size: 27px; }

	/* A barra fixa só entra quando o card de preço já saiu da tela — senão o
	   preço e o "Enviar mensagem" apareceriam duas vezes ao mesmo tempo, que é
	   o que fazia ela parecer repetição em vez de atalho. A classe vem do JS;
	   sem IntersectionObserver ela fica visível sempre, como antes. */
	.asd-barra { display: none; }
	body.asd-mostra-barra .asd-barra { display: flex; }
	body.asd-mostra-barra { padding-bottom: 68px; }
	/* O WhatsApp fica também no card: a barra agora só aparece depois que o card
	   sai da tela, então não há mais os dois na tela ao mesmo tempo. */
	/* Com o card virado a barra cobriria o botão Enviar — e o que ela oferece
	   já está na tela. Volta assim que o card desvira. */
	body.asd-form-aberto .asd-barra { display: none; }
	body.asd-form-aberto { padding-bottom: 0; }
}

@media only screen and (max-width: 479px) {
	.asd-opcionais { grid-template-columns: 1fr; }
	.asd-chips li { font-size: 12.5px; padding: 6px 12px; }
	.asd-barra .asd-btn { padding: 11px 13px; font-size: 13px; }
	.asd-barra-preco b { font-size: 17px; }
}