/* ============================================================
   Estilos partilhados das paginas EBC:
     - travoes-ebc-aplicacoes.html (seletor por veiculo/pinca)
     - travoes-ebc.php (catalogo por marca e modelo)
   Ficheiro proprio, e nao o custom.css, porque o site serve CSS
   com cache de 1 mes e o <link> do template nao tem versao: um
   ficheiro NOVO garante que toda a gente recebe estas regras.
   ============================================================ */
/* ============================================================
   Seletor de aplicações EBC Brakes (travoes-ebc-aplicacoes.html)
   Reaproveita o padrão visual do painel de comando usado na loja
   de pneus / Stil Bull, com a grelha de resultados por família de
   produto (pastilhas, discos, kits completos, malhas de aço).
   ============================================================ */
.page-ebc .painel-comando {
	background: #ffffff;
	border: 1px solid #1a1a1a;
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(0,0,0,0.22);
	overflow: hidden;
	max-width: 980px;
	margin: 0 auto;
}
.page-ebc .painel-header {
	padding: 22px 30px;
	background: linear-gradient(135deg, #0a0a0a 0%, #232323 100%);
	position: relative;
}
.page-ebc .marca-laranja {
	position: absolute;
	top: 0; left: 0;
	height: 4px; width: 100%;
	background: linear-gradient(90deg, var(--primary-color) 0%, var(--continental-yellow) 100%);
	box-shadow: 0 0 14px rgba(255,121,0,0.65);
}
.page-ebc .painel-header h2 {
	font-size: 1.25rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 6px;
	letter-spacing: 0.3px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.page-ebc .painel-header h2 i { color: var(--primary-color); }
.page-ebc .painel-header small { color: #9a9a9a; font-weight: 500; display: block; }
.page-ebc .painel-body { padding: 30px; }
.page-ebc .select-oficina {
	border: 2px solid #e0e0e0;
	padding: 10px 15px;
	font-weight: 700;
	border-radius: 8px;
	height: 54px;
	cursor: pointer;
	transition: border-color 0.2s;
	background-color: #fff;
}
.page-ebc .select-oficina:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 4px rgba(255, 121, 0, 0.1);
}
.page-ebc .select-oficina:disabled { background-color: #f4f4f4; cursor: not-allowed; }

/* --- mensagens de estado --- */
.page-ebc .ebc-estado {
	display: none;
	margin-top: 18px;
	padding: 12px 16px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.92rem;
}
.page-ebc .ebc-estado--info { background: #fff4e8; color: #8a4b00; border: 1px solid #ffd3a6; }
.page-ebc .ebc-estado--erro { background: #fdecec; color: #9b1c1c; border: 1px solid #f5b5b5; }

/* --- cabeçalho do resultado --- */
.page-ebc .ebc-resultado { max-width: 1140px; margin: 40px auto 0; }
.page-ebc .ebc-resultado-cab {
	background: #111;
	color: #fff;
	border-radius: 12px 12px 0 0;
	padding: 20px 24px;
}
.page-ebc .ebc-resultado-cab h3 {
	font-size: 1.15rem; font-weight: 800; margin: 0 0 6px;
	display: flex; align-items: center; gap: 10px;
}
.page-ebc .ebc-resultado-cab h3 i { color: #4caf50; }
.page-ebc .ebc-resultado-cab p { margin: 0; color: #b9b9b9; font-size: 0.9rem; }

/* --- separadores das famílias de produto --- */
.page-ebc .ebc-seps {
	display: flex; flex-wrap: wrap; gap: 6px;
	background: #1f1f1f; padding: 10px 14px;
}
.page-ebc .ebc-sep {
	border: 1px solid #3a3a3a;
	background: transparent;
	color: #dddddd;
	font-weight: 700;
	font-size: 0.88rem;
	padding: 9px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .18s;
}
.page-ebc .ebc-sep:hover { border-color: var(--primary-color); color: #fff; }
.page-ebc .ebc-sep.ativo {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #111;
}
.page-ebc .ebc-painel {
	display: none; padding: 26px 24px; background: #fafafa;
	border: 1px solid #e3e3e3; border-top: 0; border-radius: 0 0 12px 12px;
}
.page-ebc .ebc-painel.ativo { display: block; }

.page-ebc .ebc-variante {
	background: #fff3e0; border-left: 4px solid var(--primary-color);
	padding: 8px 14px; font-weight: 700; font-size: 0.9rem; border-radius: 4px;
	margin: 22px 0 10px;
}
.page-ebc .ebc-eixo-titulo {
	font-size: 1rem; font-weight: 800; text-transform: uppercase;
	letter-spacing: .6px; color: #1a1a1a; margin: 24px 0 12px;
	border-bottom: 2px solid #e6e6e6; padding-bottom: 6px;
}
.page-ebc .ebc-eixo-titulo small { font-weight: 600; text-transform: none; color: #777; letter-spacing: 0; }

/* --- cartões de produto --- */
.page-ebc .ebc-grelha {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.page-ebc .ebc-prod {
	background: #fff; border: 1px solid #e3e3e3; border-radius: 10px;
	padding: 16px; display: flex; flex-direction: column;
	transition: box-shadow .18s, transform .18s;
}
.page-ebc .ebc-prod:hover { box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-2px); }
/* foto do produto: altura fixa para os cartões da grelha ficarem alinhados
   e para não haver salto de layout enquanto a imagem carrega */
.page-ebc .ebc-foto {
	height: 130px;
	margin: -16px -16px 12px;
	background: #f7f7f7;
	border-radius: 10px 10px 0 0;
	border-bottom: 1px solid #ececec;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.page-ebc .ebc-foto img {
	max-width: 100%; max-height: 100%;
	width: auto; height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.page-ebc .ebc-prod-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.page-ebc .ebc-tag {
	font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
	color: #fff; line-height: 1.3;
}
.page-ebc .ebc-tag--cinza { background: var(--ebc-gray); }
.page-ebc .ebc-tag--verde { background: var(--ebc-green); }
.page-ebc .ebc-tag--vermelho { background: var(--ebc-red); }
.page-ebc .ebc-tag--amarelo { background: var(--ebc-yellow); color: #3a2c00; }
.page-ebc .ebc-tag--azul { background: var(--ebc-blue); }
.page-ebc .ebc-tag--laranja { background: var(--primary-color); color: #2b1500; }
.page-ebc .ebc-tag--escuro { background: #1a1a1a; }
.page-ebc .ebc-eixo { font-size: .75rem; font-weight: 700; color: #888; text-transform: uppercase; white-space: nowrap; }
.page-ebc .ebc-ref { margin: 0 0 8px; display: flex; flex-direction: column; }
.page-ebc .ebc-ref span { font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; color: #999; }
.page-ebc .ebc-ref strong { font-size: 1.25rem; font-weight: 800; color: #111; letter-spacing: .5px; }
/* a foto e a referência levam à página de produto da gama */
.page-ebc .ebc-ref a { text-decoration: none; display: inline-block; }
.page-ebc .ebc-ref a strong { border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.page-ebc .ebc-ref a:hover strong { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.page-ebc .ebc-foto a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.page-ebc .ebc-foto a img { transition: transform .18s; }
.page-ebc .ebc-foto a:hover img { transform: scale(1.06); }
.page-ebc .ebc-desc { font-size: .86rem; color: #555; margin: 0 0 10px; flex-grow: 1; }
.page-ebc .ebc-extra { font-size: .82rem; color: #333; background: #f3f3f3; padding: 8px 10px; border-radius: 6px; margin: 0 0 10px; }
.page-ebc .ebc-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.page-ebc .ebc-btn {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .82rem; font-weight: 700; padding: 8px 14px;
	border-radius: 6px; border: 1px solid transparent; cursor: pointer;
	text-decoration: none; transition: filter .15s;
}
.page-ebc .ebc-btn:hover { filter: brightness(1.07); }
.page-ebc .ebc-btn--wa { background: var(--whatsapp); color: #fff; }
.page-ebc .ebc-btn--copiar { background: #fff; border-color: #ccc; color: #444; }
.page-ebc .ebc-btn--linha { background: #fff; border-color: #1a1a1a; color: #1a1a1a; }

/* --- medidas do disco --- */
.page-ebc .ebc-specs {
	width: 100%; max-width: 460px; margin: 16px 0 0;
	border-collapse: collapse; background: #fff; font-size: .88rem;
	border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden;
}
.page-ebc .ebc-specs caption {
	caption-side: top; text-align: left; font-weight: 800;
	font-size: .8rem; text-transform: uppercase; letter-spacing: .6px;
	color: #666; padding-bottom: 6px;
}
.page-ebc .ebc-specs th, .page-ebc .ebc-specs td { padding: 8px 12px; border-bottom: 1px solid #eee; text-align: left; }
.page-ebc .ebc-specs th { font-weight: 600; color: #666; width: 55%; }
.page-ebc .ebc-specs td { font-weight: 800; color: #111; }

.page-ebc .ebc-vazio { background: #fff; border: 1px dashed #ccc; border-radius: 8px; padding: 18px; color: #666; font-weight: 600; }
.page-ebc .ebc-nota {
	background: #111; color: #fff; border-radius: 12px; padding: 22px 24px;
	margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.page-ebc .ebc-nota p { margin: 0; flex: 1 1 320px; font-size: .92rem; color: #ddd; }
.page-ebc .ebc-nota strong { color: #fff; }

@media (max-width: 768px) {
	.page-ebc .painel-header { padding: 18px 20px; text-align: center; }
	.page-ebc .painel-header h2 { justify-content: center; font-size: 1.05rem; }
	.page-ebc .painel-body { padding: 22px 16px; }
	.page-ebc .select-oficina { height: 48px; font-size: 0.85rem; }
	.page-ebc .ebc-painel { padding: 18px 12px; }
	.page-ebc .ebc-grelha { grid-template-columns: 1fr; }
	.page-ebc .ebc-sep { font-size: .8rem; padding: 8px 12px; }
}

/* --- lista de pinças de competição (quando são muitas para mostrar) --- */
.page-ebc .ebc-pinca-lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 8px;
}
.page-ebc .ebc-pinca-lista button {
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 10px 12px;
	font-weight: 700;
	font-size: .9rem;
	color: #1a1a1a;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.page-ebc .ebc-pinca-lista button:hover {
	border-color: var(--primary-color);
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.page-ebc .ebc-pinca-lista button span {
	display: block;
	font-weight: 600;
	font-size: .78rem;
	color: #8a8a8a;
	margin-top: 2px;
}
.page-ebc .ebc-pinca-bloco + .ebc-pinca-bloco { margin-top: 8px; }

/* ============================================================
   Catálogo por marca e modelo (travoes-ebc.php)
   Tabelas compactas de propósito: há modelos com 327 versões,
   e em cartões a página passaria de 150 KB para mais de 1 MB.
   ============================================================ */
.page-ebc .hero-ebc {
	background: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 100%);
	color: #fff;
	padding: 46px 0;
	text-align: center;
}
.page-ebc .hero-ebc h1 { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
.page-ebc .hero-ebc .lead { max-width: 820px; margin: 0 auto; color: #d8d8d8; font-size: 1rem; }

.page-ebc h2 { font-size: 1.3rem; font-weight: 800; margin: 34px 0 14px; }
.page-ebc h2 small { font-weight: 600; color: #888; font-size: .85rem; }
.page-ebc .ebc-letra {
	border-bottom: 3px solid var(--primary-color);
	padding-bottom: 4px; margin-top: 30px; max-width: 60px;
}

/* listas de marcas e modelos */
.page-ebc .ebc-marcas, .page-ebc .ebc-modelos {
	list-style: none; padding: 0; margin: 0 0 10px;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px;
}
.page-ebc .ebc-marcas a, .page-ebc .ebc-modelos a {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	background: #fff; border: 1px solid #e3e3e3; border-radius: 8px;
	padding: 10px 12px; font-weight: 700; font-size: .92rem; color: #1a1a1a;
	text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.page-ebc .ebc-marcas a:hover, .page-ebc .ebc-modelos a:hover {
	border-color: var(--primary-color); box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.page-ebc .ebc-marcas a span { font-weight: 600; font-size: .78rem; color: #999; }

/* tabelas de referências */
.page-ebc .ebc-tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-ebc .ebc-tabela {
	width: 100%; border-collapse: collapse; background: #fff;
	border: 1px solid #e3e3e3; border-radius: 10px; overflow: hidden;
	font-size: .88rem; min-width: 680px;
}
.page-ebc .ebc-tabela thead th {
	background: #1a1a1a; color: #fff; text-align: left;
	font-size: .78rem; text-transform: uppercase; letter-spacing: .6px;
	padding: 10px 12px; white-space: nowrap;
}
.page-ebc .ebc-tabela td { padding: 10px 12px; border-bottom: 1px solid #efefef; vertical-align: top; }
.page-ebc .ebc-tabela tbody tr:nth-child(even) { background: #fafafa; }
.page-ebc .ebc-tabela tbody tr:hover { background: #fff6ec; }
.page-ebc .ebc-t-versao { min-width: 190px; }
.page-ebc .ebc-t-versao strong { display: block; color: #111; }
.page-ebc .ebc-t-obs, .page-ebc .ebc-t-extras {
	display: block; font-size: .78rem; color: #777; margin-top: 3px;
}
.page-ebc .ebc-t-linha { margin-bottom: 4px; }
.page-ebc .ebc-t-rot {
	display: inline-block; min-width: 68px; font-size: .72rem;
	text-transform: uppercase; letter-spacing: .5px; color: #999; font-weight: 700;
}
.page-ebc .ebc-t-gama { color: #666; }
.page-ebc .ebc-tabela a { color: inherit; text-decoration: none; }
.page-ebc .ebc-tabela a:hover strong { color: var(--primary-color); text-decoration: underline; }
.page-ebc .ebc-t-sep { color: #ccc; margin: 0 6px; }
.page-ebc .ebc-t-vazio { color: #bbb; }
.page-ebc .ebc-t-medidas { font-size: .78rem; color: #888; margin-top: 2px; }
.page-ebc .ebc-t-nota { font-size: .86rem; color: #777; margin-top: 10px; }

@media (max-width: 768px) {
	.page-ebc .hero-ebc { padding: 34px 0; }
	.page-ebc .hero-ebc h1 { font-size: 1.5rem; }
	.page-ebc .ebc-marcas, .page-ebc .ebc-modelos { grid-template-columns: 1fr 1fr; }
	.page-ebc .ebc-tabela { font-size: .82rem; }
}

/* legenda das gamas: o link para cada página de produto aparece aqui uma
   vez, em vez de em cada referência da tabela (poupa ~500 KB no VW Golf) */
.page-ebc .ebc-legenda {
	background: #fff; border: 1px solid #e3e3e3; border-left: 4px solid var(--primary-color);
	border-radius: 8px; padding: 12px 14px; font-size: .86rem; color: #555; margin-bottom: 16px;
	line-height: 1.9;
}
.page-ebc .ebc-legenda-tit {
	font-weight: 800; text-transform: uppercase; font-size: .74rem;
	letter-spacing: .6px; color: #999; margin-right: 6px;
}
.page-ebc .ebc-legenda a {
	color: #1a1a1a; font-weight: 700; text-decoration: none;
	border-bottom: 1px solid #ddd; padding-bottom: 1px;
}
.page-ebc .ebc-legenda a:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); }

/* separador de geração dentro da tabela (Mk4, B9, E46...) */
.page-ebc .ebc-tabela tr.ebc-t-grupo td {
	background: #1f1f1f; color: #fff; font-weight: 800;
	text-transform: uppercase; letter-spacing: .8px; font-size: .8rem;
	padding: 8px 12px;
}
.page-ebc .ebc-tabela tr.ebc-t-grupo td span { font-weight: 600; color: #9a9a9a; text-transform: none; letter-spacing: 0; }
.page-ebc .ebc-tabela tbody tr.ebc-t-grupo:hover td { background: #1f1f1f; }

/* nome curto da gama + referência dentro das células */
.page-ebc .ebc-tabela i { font-style: normal; color: #7a7a7a; }
.page-ebc .ebc-tabela b { color: #111; font-weight: 800; }