/**
 * Estilos de front-end do EA Motors - Sincronizacao Webmotors.
 *
 * Tudo aqui e controlado por variaveis CSS (custom properties), com valores padrao definidos
 * em :root. Isso permite personalizar fonte, borda, espacamento e cores de duas formas:
 *
 *   1. Globalmente, via Aparencia > Personalizar > CSS Adicional, sobrescrevendo as variaveis
 *      dentro de um seletor :root { ... }.
 *   2. Por instancia do shortcode [ea_wm_estoque], passando atributos (ex: cor_titulo="#c00"),
 *      que geram um bloco <style> escopado so aquela grade especifica (ver
 *      ea_wm_sync_shortcode_estoque() no arquivo principal do plugin).
 *
 * As variaveis de grade (--ea-wm-grid-*) valem para o shortcode [ea_wm_estoque]. As variaveis
 * de pagina de veiculo (--ea-wm-*) valem para o template single-ea_veiculo.php.
 */

:root {
	--ea-wm-fonte: inherit;
	--ea-wm-cor-fundo-pagina: #0b0b0b;
	--ea-wm-cor-fundo: #161616;
	--ea-wm-cor-texto: #e8e8e8;
	--ea-wm-cor-titulo: #ffffff;
	--ea-wm-cor-preco: #ffffff;
	--ea-wm-cor-barra-fundo: #ffffff;
	--ea-wm-cor-barra-texto: #0b0b0b;
	--ea-wm-cor-borda: #2a2a2a;
	--ea-wm-espessura-borda: 1px;
	--ea-wm-raio-borda: 10px;
	--ea-wm-espacamento: 24px;

	--ea-wm-grid-fonte: inherit;
	--ea-wm-grid-cor-fundo: #ffffff;
	--ea-wm-grid-cor-texto: #333333;
	--ea-wm-grid-cor-titulo: #111111;
	--ea-wm-grid-cor-preco: #111111;
	--ea-wm-grid-cor-borda: #e2e2e2;
	--ea-wm-grid-espessura-borda: 1px;
	--ea-wm-grid-raio-borda: 10px;
	--ea-wm-grid-espacamento: 20px;
	--ea-wm-grid-colunas: 3;
	--ea-wm-carrossel-colunas: 3;
}

/* Pagina de veiculo: fundo escuro em toda a pagina (fora do cabecalho/rodape do tema,
   que continuam com as cores originais). Aplicado via classe que o WordPress adiciona
   automaticamente ao <body> em posts do tipo ea_veiculo (body_class() padrao do tema). */
body.single-ea_veiculo {
	background-color: var( --ea-wm-cor-fundo-pagina );
}

/* ==========================================================================
   Grade de estoque (shortcode [ea_wm_estoque])
   ========================================================================== */

.ea-wm-estoque-bloco {
	font-family: var( --ea-wm-grid-fonte );
}

/* Barra de filtros do shortcode [ea_wm_estoque].
   Largura forcada com !important porque muitos temas (inclusive o usado no site) aplicam
   "width:100%" globalmente a todo input/select/button, o que quebrava o alinhamento
   horizontal - sem isso cada campo caia numa linha propria mesmo com display:flex no pai.
   Estrutura: <form.ea-wm-filtros> > [button.ea-wm-filtros-toggle (so aparece no mobile),
   div.ea-wm-filtros-campos > select/input/select/button/button]. No desktop o toggle fica
   escondido e .ea-wm-filtros-campos e sempre um flex row (comportamento original, intacto).
   No mobile o toggle aparece e .ea-wm-filtros-campos vira um dropdown recolhido por padrao,
   expandido via JS ao clicar (ver assets/js/ea-wm-frontend.js). */
.ea-wm-filtros {
	margin: var( --ea-wm-grid-espacamento ) 0 calc( var( --ea-wm-grid-espacamento ) / 2 );
}

.ea-wm-filtros-toggle {
	display: none !important;
}

.ea-wm-filtros-campos {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

.ea-wm-filtros-campos select,
.ea-wm-filtros-campos input,
.ea-wm-filtros-campos button {
	width: auto !important;
	max-width: none;
	box-sizing: border-box;
	padding: 10px 14px;
	border: var( --ea-wm-grid-espessura-borda ) solid var( --ea-wm-grid-cor-borda );
	border-radius: var( --ea-wm-grid-raio-borda );
	font-family: inherit;
	font-size: 14px;
	color: var( --ea-wm-grid-cor-texto );
	background: var( --ea-wm-grid-cor-fundo );
}

.ea-wm-filtros-campos select[name="marca"],
.ea-wm-filtros-campos select[name="ordenacao"] {
	flex: 1 1 180px;
	min-width: 150px;
}

/* Reseta a aparencia nativa do <select> e fixa a altura explicitamente - sem isso, alguns
   navegadores mobile renderizam o select com padding interno proprio bem maior que o dos
   inputs, deixando o campo desproporcionalmente alto (ver ajuste pedido pelo cliente). */
.ea-wm-filtros-campos select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 44px !important;
	line-height: 20px;
	padding: 0 34px 0 14px !important;
	background-image: url( "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23999999'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.08z' clip-rule='evenodd'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
}

.ea-wm-filtros-campos input[type="number"] {
	width: 130px !important;
	flex: 0 0 130px;
}

.ea-wm-filtros-campos .ea-wm-filtros-aplicar,
.ea-wm-filtros-limpar {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ea-wm-filtros-campos .ea-wm-filtros-aplicar {
	display: inline-block;
	padding: 10px 20px;
}

.ea-wm-filtros-limpar {
	background: #ffffff !important;
	color: #0b0b0b !important;
	cursor: pointer;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
	text-decoration: none;
	opacity: 1;
}

.ea-wm-filtros-limpar:hover {
	opacity: 0.85;
}

@media ( max-width: 700px ) {
	.ea-wm-filtros-toggle {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100% !important;
		box-sizing: border-box;
		padding: 12px 16px;
		border: var( --ea-wm-grid-espessura-borda ) solid var( --ea-wm-grid-cor-borda ) !important;
		border-radius: var( --ea-wm-grid-raio-borda );
		background: var( --ea-wm-grid-cor-fundo ) !important;
		color: var( --ea-wm-grid-cor-texto ) !important;
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.ea-wm-filtros-seta {
		display: inline-block;
		transition: transform 0.15s ease;
	}

	.ea-wm-filtros-toggle[aria-expanded="true"] .ea-wm-filtros-seta {
		transform: rotate( 180deg );
	}

	/* Escondido por padrao no mobile - so aparece com .aberto (adicionada via JS ao clicar
	   no toggle acima). Isso "esconde os campos de filtro numa lista suspensa" no mobile,
	   sem tocar em nada do layout de desktop (que continua flex row sempre visivel). */
	.ea-wm-filtros-campos {
		display: none;
		flex-direction: column;
		align-items: stretch;
		margin-top: 8px;
	}

	.ea-wm-filtros-campos.aberto {
		display: flex;
	}

	/* Repete o seletor "input[type=number]" aqui porque ele tem especificidade maior que
	   ".ea-wm-filtros-campos input" sozinho la em cima - sem isso o !important de largura
	   fixa (130px) dos campos de preco ganhava do !important de largura total daqui, e os
	   dois campos ficavam lado a lado em vez de empilhados. */
	.ea-wm-filtros-campos select,
	.ea-wm-filtros-campos input,
	.ea-wm-filtros-campos input[type="number"],
	.ea-wm-filtros-campos button {
		width: 100% !important;
		flex: 1 1 100%;
	}
}

.ea-wm-sem-resultados {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 20px;
	opacity: 0.7;
}

/* Paginacao do shortcode [ea_wm_estoque]. */
.ea-wm-paginacao-wrapper {
	margin: 10px 0 var( --ea-wm-grid-espacamento );
}

.ea-wm-paginacao {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.ea-wm-pagina-link {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	box-sizing: border-box;
	border: var( --ea-wm-grid-espessura-borda ) solid var( --ea-wm-grid-cor-borda );
	border-radius: var( --ea-wm-grid-raio-borda );
	background: #ffffff !important;
	color: #0b0b0b !important;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.ea-wm-pagina-link:hover {
	opacity: 0.8;
}

.ea-wm-pagina-link.ativo {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ea-wm-pagina-link:disabled {
	opacity: 0.3;
	cursor: default;
}

.ea-wm-pagina-reticencias {
	padding: 0 4px;
	opacity: 0.6;
}

.ea-wm-estoque-grid {
	display: grid;
	grid-template-columns: repeat( var( --ea-wm-grid-colunas ), 1fr );
	gap: var( --ea-wm-grid-espacamento );
	font-family: var( --ea-wm-grid-fonte );
	margin: var( --ea-wm-grid-espacamento ) 0;
	transition: opacity 0.15s ease;
}

@media ( max-width: 900px ) {
	.ea-wm-estoque-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.ea-wm-estoque-grid {
		grid-template-columns: 1fr;
	}
}

.ea-wm-veiculo-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ea-wm-veiculo-card {
	background: var( --ea-wm-grid-cor-fundo );
	border: var( --ea-wm-grid-espessura-borda ) solid var( --ea-wm-grid-cor-borda );
	border-radius: var( --ea-wm-grid-raio-borda );
	overflow: hidden;
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ea-wm-veiculo-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.08 );
}

.ea-wm-veiculo-foto {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f2f2;
}

.ea-wm-veiculo-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ea-wm-veiculo-card-corpo {
	padding: 14px 16px;
	color: var( --ea-wm-grid-cor-texto );
}

.ea-wm-veiculo-marca {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
	margin: 0 0 2px;
}

.ea-wm-veiculo-titulo {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var( --ea-wm-grid-cor-titulo );
	text-transform: uppercase;
}

.ea-wm-veiculo-info-linha {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	opacity: 0.75;
	margin-bottom: 8px;
}

.ea-wm-veiculo-preco {
	font-size: 16px;
	font-weight: 700;
	color: var( --ea-wm-grid-cor-preco );
	margin: 0;
}

/* ==========================================================================
   Carrossel de estoque (shortcode [ea_wm_estoque_carrossel])
   ========================================================================== */

.ea-wm-carrossel {
	position: relative;
	margin: var( --ea-wm-grid-espacamento ) 0;
	font-family: var( --ea-wm-grid-fonte );
}

.ea-wm-carrossel-viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ea-wm-carrossel-viewport::-webkit-scrollbar {
	display: none;
}

.ea-wm-carrossel-trilho {
	display: flex;
	gap: var( --ea-wm-grid-espacamento );
}

.ea-wm-carrossel-item {
	flex: 0 0 calc( ( 100% - ( var( --ea-wm-carrossel-colunas ) - 1 ) * var( --ea-wm-grid-espacamento ) ) / var( --ea-wm-carrossel-colunas ) );
	scroll-snap-align: start;
	min-width: 0;
}

.ea-wm-carrossel-seta {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var( --ea-wm-carrossel-cor-seta, #ffffff ) !important;
	color: #0b0b0b !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
}

.ea-wm-carrossel-seta:hover {
	opacity: 0.85;
}

.ea-wm-carrossel-seta.anterior { left: -18px; }
.ea-wm-carrossel-seta.proxima  { right: -18px; }

@media ( max-width: 640px ) {
	.ea-wm-carrossel-seta.anterior { left: -6px; }
	.ea-wm-carrossel-seta.proxima  { right: -6px; }
}

/* ==========================================================================
   Pagina individual do veiculo (templates/single-ea_veiculo.php)
   ========================================================================== */

.ea-wm-single {
	font-family: var( --ea-wm-fonte );
	color: var( --ea-wm-cor-texto );
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 20px 60px;
}

/* Galeria em formato de carrossel: uma unica coluna, funciona igual em qualquer
   tamanho de tela. Foto principal com setas sobrepostas + tira de miniaturas
   horizontal e rolavel abaixo. */
.ea-wm-galeria {
	margin: 24px 0;
}

.ea-wm-galeria-principal {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #1c1c1c;
	overflow: hidden;
	border-radius: var( --ea-wm-raio-borda );
}

.ea-wm-galeria-principal img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ea-wm-galeria-seta {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ea-wm-galeria-seta:hover {
	background: rgba( 0, 0, 0, 0.8 );
}

.ea-wm-galeria-seta.anterior { left: 14px; }
.ea-wm-galeria-seta.proxima  { right: 14px; }

.ea-wm-galeria-miniaturas {
	display: flex;
	flex-direction: row;
	gap: 10px;
	overflow-x: auto;
	margin-top: 12px;
	padding-bottom: 4px;
}

.ea-wm-galeria-miniaturas button {
	flex: 0 0 90px;
	padding: 0;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var( --ea-wm-raio-borda );
}

.ea-wm-galeria-miniaturas button.ativo {
	border-color: var( --ea-wm-cor-barra-fundo );
}

.ea-wm-galeria-miniaturas img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media ( max-width: 500px ) {
	.ea-wm-galeria-miniaturas button {
		flex-basis: 70px;
	}
}

.ea-wm-single-corpo {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var( --ea-wm-espacamento );
	align-items: start;
}

@media ( max-width: 900px ) {
	.ea-wm-single-corpo {
		grid-template-columns: 1fr;
	}
}

.ea-wm-painel {
	background: var( --ea-wm-cor-fundo );
	border: var( --ea-wm-espessura-borda ) solid var( --ea-wm-cor-borda );
	border-radius: var( --ea-wm-raio-borda );
	padding: 28px;
}

.ea-wm-eyebrow {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 0 0 4px;
}

.ea-wm-single-titulo {
	font-size: 30px;
	font-weight: 800;
	text-transform: uppercase;
	color: var( --ea-wm-cor-titulo );
	margin: 0 0 20px;
	line-height: 1.15;
}

.ea-wm-resumo {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.ea-wm-resumo-item label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
	margin-bottom: 4px;
}

.ea-wm-resumo-item .valor {
	font-size: 18px;
	font-weight: 700;
}

.ea-wm-resumo-item .valor.preco {
	color: var( --ea-wm-cor-preco );
}

.ea-wm-barra {
	background: var( --ea-wm-cor-barra-fundo );
	color: var( --ea-wm-cor-barra-texto );
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	padding: 12px 16px;
	margin: 28px 0 0;
}

.ea-wm-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 30px;
	padding: 22px 4px;
	border-bottom: 1px solid var( --ea-wm-cor-borda );
}

.ea-wm-specs.linha-unica {
	grid-template-columns: 1fr;
	border-bottom: none;
}

.ea-wm-spec label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
	margin-bottom: 4px;
}

.ea-wm-spec .valor {
	font-size: 15px;
	font-weight: 600;
}

.ea-wm-lista-opcionais {
	list-style: none;
	margin: 0;
	padding: 22px 4px;
	columns: 2;
	column-gap: 30px;
}

.ea-wm-lista-opcionais li {
	font-size: 14px;
	padding: 6px 0;
	break-inside: avoid;
}

@media ( max-width: 500px ) {
	.ea-wm-lista-opcionais {
		columns: 1;
	}
}

/* Sidebar: formulario de proposta */

.ea-wm-sidebar .ea-wm-painel {
	position: sticky;
	top: 20px;
}

.ea-wm-form label {
	display: none;
}

.ea-wm-form input,
.ea-wm-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 4px;
	margin-bottom: 14px;
	border: none;
	border-bottom: 1px solid var( --ea-wm-cor-borda );
	background: transparent;
	color: var( --ea-wm-cor-texto );
	font-family: inherit;
	font-size: 14px;
}

.ea-wm-form input::placeholder,
.ea-wm-form textarea::placeholder {
	color: var( --ea-wm-cor-texto );
	opacity: 0.5;
}

.ea-wm-form input:focus,
.ea-wm-form textarea:focus {
	outline: none;
	border-bottom-color: var( --ea-wm-cor-barra-fundo );
}

.ea-wm-form-honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

/* !important aqui porque o CSS do proprio tema aplica um estilo de botao (fundo transparente,
   borda/texto rosa) a elementos <button> com prioridade maior que a nossa classe sozinha
   conseguia vencer - sem isso o botao "Enviar proposta" ficava com a cor errada. */
.ea-wm-form button.ea-wm-btn,
.ea-wm-btn {
	display: block;
	width: 100%;
	background: #ffffff !important;
	color: #0b0b0b !important;
	border: none !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	padding: 14px 16px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	border-radius: var( --ea-wm-raio-borda );
}

.ea-wm-btn:hover {
	opacity: 0.88;
}

.ea-wm-form-aviso {
	font-size: 13px;
	padding: 10px 0;
	margin: 0 0 10px;
}

.ea-wm-form-aviso.sucesso {
	color: #147a2c;
}

.ea-wm-form-aviso.erro {
	color: #b3261e;
}

.ea-wm-compartilhar-titulo {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 24px 0 10px;
}

.ea-wm-compartilhar {
	display: flex;
	gap: 10px;
}

.ea-wm-compartilhar a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
}

.ea-wm-compartilhar a.whatsapp   { background: #25d366; }
.ea-wm-compartilhar a.telegram   { background: #29a9eb; }
.ea-wm-compartilhar a.facebook   { background: #1877f2; }
.ea-wm-compartilhar a.pinterest  { background: #e60023; }

/* CTA de contato, largura total */

.ea-wm-cta {
	background: var( --ea-wm-cor-fundo );
	border: var( --ea-wm-espessura-borda ) solid var( --ea-wm-cor-borda );
	color: var( --ea-wm-cor-texto );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 26px 40px;
	margin: 40px 0;
}

.ea-wm-cta-texto {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	font-size: 14px;
}

.ea-wm-cta-telefone {
	text-align: center;
}

.ea-wm-cta-telefone label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.ea-wm-cta-telefone .valor {
	font-size: 18px;
	font-weight: 800;
}

.ea-wm-cta .ea-wm-btn {
	width: auto;
	background: #ffffff;
	color: #0b0b0b;
	padding: 14px 26px;
}

/* Veiculos em destaque (rodape da pagina de veiculo) */

.ea-wm-destaque-titulo {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 14px;
	font-weight: 700;
	margin: 40px 0 24px;
}
