/* Seção Concessionárias (templates/concessionaria*.tpl, _conc-item.tpl). Tokens de css/refinado.css. */
.cs { padding-bottom: 48px; }
.cs-topo { padding: 10px 0 6px; max-width: 860px; }
.cs-topo--marca { display: flex; gap: 20px; align-items: flex-start; max-width: none; }
.cs-topo-logo { width: 72px; height: 72px; object-fit: contain; flex: none; padding: 8px; border: 1px solid #ececef; border-radius: 16px; background: #fff; }
.cs-chapeu { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gc-laranja-2, #f15921); }
body .cs h1 { font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #18181b; margin: 6px 0 10px; }
body .cs h2 { font-size: 20px; font-weight: 800; color: #18181b; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body .cs h2 small, body .cs h3 small { font-size: 13px; font-weight: 600; color: #a1a1aa; }
body .cs-topo p { font-size: 15.5px; line-height: 1.6; color: #3f3f46; margin: 0 0 12px; }
.cs-bloco { margin-top: 34px; }
.cs-fonte { margin-top: 30px; font-size: 13px; line-height: 1.55; color: #71717a; max-width: 860px; }

/* botões e atalhos */
.cs-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
body .cs-botao { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gc-laranja, #ff5a00);
    background: var(--gc-laranja, #ff5a00); color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; font-family: inherit; }
body .cs-botao:hover { background: var(--gc-laranja-2, #f15921); color: #fff; text-decoration: none; }
body .cs-botao--sec { background: #fff; color: #27272a; border-color: #e4e4e7; }
body .cs-botao--sec:hover { background: var(--gc-laranja-suave, #fff4ee); border-color: var(--gc-laranja-borda, #ffd2bb); color: #18181b; }

/* busca */
.cs-busca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; gap: 10px; align-items: end; margin: 18px 0 6px; padding: 16px;
    border: 1px solid #ececef; border-radius: 16px; background: #fff; box-shadow: var(--gc-sombra-s, 0 4px 14px rgba(20, 20, 20, .05)); }
.cs-busca label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cs-busca label span { font-size: 12.5px; font-weight: 700; color: #52525b; }
.cs-busca select { height: 42px; padding: 0 12px; border: 1px solid #e4e4e7; border-radius: 10px; background: #fff; font-size: 14.5px; color: #18181b; min-width: 0; font-family: inherit; }
.cs-busca select:focus { outline: none; border-color: var(--gc-laranja, #ff5a00); box-shadow: var(--gc-anel, 0 0 0 4px rgba(255, 90, 0, .14)); }
.cs-busca select:disabled { background: #fafafa; color: #a1a1aa; }
.cs-busca .cs-botao { height: 42px; }
.cs-perto { margin-top: 18px; padding: 16px; border: 1px solid var(--gc-laranja-borda, #ffd2bb); border-radius: 16px; background: var(--gc-laranja-suave, #fff4ee); }
.cs-carregando { margin: 0; color: #52525b; }

/* marcas */
.cs-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cs-marcas--compacto { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
body a.cs-marca { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #ececef; border-radius: 14px; background: #fff; color: #18181b; text-decoration: none;
    transition: border-color var(--gc-trans, .2s), box-shadow var(--gc-trans, .2s); }
body a.cs-marca:hover { border-color: var(--gc-laranja-borda, #ffd2bb); box-shadow: 0 10px 24px -18px rgba(241, 89, 33, .5); text-decoration: none; }
.cs-marca img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.cs-marcas--compacto .cs-marca img { width: 32px; height: 32px; }
.cs-marca-sem { width: 40px; height: 40px; flex: none; border-radius: 10px; background: #f4f4f5; display: grid; place-items: center; font-weight: 800; color: #71717a; }
.cs-marca span { display: flex; flex-direction: column; min-width: 0; }
.cs-marca b { font-size: 15px; font-weight: 700; }
.cs-marca small { font-size: 12.5px; color: #71717a; }

/* estados e cidades */
.cs-estados { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
body .cs-estados a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #ececef; border-radius: 14px; background: #fff; color: #18181b; text-decoration: none; }
body .cs-estados a:hover { border-color: var(--gc-laranja-borda, #ffd2bb); text-decoration: none; }
.cs-estados b { width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--gc-laranja-suave, #fff4ee); color: var(--gc-laranja-2, #f15921); display: grid; place-items: center; font-size: 14px; font-weight: 900; }
.cs-estados span { display: flex; flex-direction: column; font-weight: 600; font-size: 14.5px; }
.cs-estados small { font-weight: 400; font-size: 12.5px; color: #71717a; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body .cs-chips a { font-size: 13.5px; border: 1px solid #ececef; border-radius: 999px; padding: 6px 12px; color: #3f3f46; text-decoration: none; background: #fff; }
body .cs-chips a:hover { border-color: var(--gc-laranja-borda, #ffd2bb); color: #18181b; }
.cs-chips small { color: #a1a1aa; }
.cs-chips--uf { margin: 22px 0 6px; position: sticky; top: 64px; z-index: 5; padding: 8px 0; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); }
.cs-cidades-destaque { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
body .cs-cidades-destaque a { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid #ececef; border-radius: 14px; background: #fff; color: #18181b; text-decoration: none; }
body .cs-cidades-destaque a:hover { border-color: var(--gc-laranja-borda, #ffd2bb); text-decoration: none; }
.cs-cidades-destaque b { font-size: 15.5px; }
.cs-cidades-destaque small { font-size: 12.5px; color: #71717a; }
.cs-colunas { columns: 4 200px; column-gap: 24px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; line-height: 2; }
.cs-colunas li { break-inside: avoid; }
.cs-colunas small { color: #a1a1aa; }
.cs-marcas-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; }
body .cs-marcas-filtro a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; border: 1px solid #ececef; border-radius: 999px; padding: 5px 12px 5px 8px; color: #3f3f46; text-decoration: none; background: #fff; }
body .cs-marcas-filtro a:hover { border-color: var(--gc-laranja-borda, #ffd2bb); }
.cs-marcas-filtro img { width: 20px; height: 20px; object-fit: contain; }
.cs-marcas-filtro small { color: #a1a1aa; }

/* listas de concessionárias */
.cs-uf, .cs-grupo { margin-top: 30px; scroll-margin-top: 120px; }
.cs-grupo h2 img { width: 32px; height: 32px; object-fit: contain; }
body .cs-grupo-mais { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--gc-laranja-2, #f15921); }
.cs-cidade { margin-top: 14px; }
body .cs-cidade h3 { font-size: 15px; font-weight: 800; margin: 0 0 6px; color: #3f3f46; }
body .cs-cidade h3 a { color: inherit; text-decoration: none; }
body .cs-cidade h3 a:hover { color: var(--gc-laranja-2, #f15921); }
.cs-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs-item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto; gap: 4px 16px; align-items: center; padding: 10px 14px;
    border: 1px solid #ececef; border-radius: 12px; background: #fff; }
.cs-item:hover { border-color: #e4e4e7; box-shadow: 0 8px 20px -18px rgba(20, 20, 20, .35); }
body a.cs-item-nome { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: #18181b; text-decoration: none; min-width: 0; }
body a.cs-item-nome:hover { color: var(--gc-laranja-2, #f15921); }
.cs-item-nome img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.cs-item-nome span { overflow: hidden; text-overflow: ellipsis; }
.cs-item-end { font-size: 13.5px; color: #52525b; line-height: 1.4; }
.cs-item-acoes { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
body a.cs-acao { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid #ececef; color: #3f3f46; text-decoration: none; white-space: nowrap; }
body a.cs-acao:hover { border-color: var(--gc-laranja-borda, #ffd2bb); background: var(--gc-laranja-suave, #fff4ee); color: #18181b; }
.cs-km { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--gc-laranja-2, #f15921); }
.cs-vazio { padding: 14px 16px; border-radius: 12px; background: #fafafa; border: 1px solid #f0f0f2; color: #52525b; font-size: 14.5px; }

/* página da concessionária */
.cs-loja { display: flex; gap: 20px; align-items: flex-start; padding: 10px 0 4px; }
.cs-loja-txt { min-width: 0; }
body .cs-loja-end { font-size: 15.5px; line-height: 1.55; color: #3f3f46; margin: 0 0 8px; }
.cs-nota { margin: 0 0 10px; font-size: 14.5px; color: #52525b; display: flex; align-items: center; gap: 6px; }
.cs-estrelas { --nota: 0; display: inline-block; width: 90px; height: 16px; flex: none;
    background: linear-gradient(90deg, #f59e0b calc(var(--nota) / 5 * 100%), #e4e4e7 0);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 0l2.6 5.3 5.9.9-4.3 4.1 1 5.7L9 13.3 3.8 16l1-5.7L.5 6.2l5.9-.9z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 0l2.6 5.3 5.9.9-4.3 4.1 1 5.7L9 13.3 3.8 16l1-5.7L.5 6.2l5.9-.9z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x; }
.cs-loja-corpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; }
.cs-mapa { border-radius: 16px; overflow: hidden; border: 1px solid #ececef; min-height: 320px; background: #f4f4f5; }
.cs-mapa iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.cs-dados { margin: 0; padding: 6px 16px; border: 1px solid #ececef; border-radius: 16px; background: #fff; }
.cs-dados div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #f4f4f5; }
.cs-dados div:last-child { border-bottom: 0; }
.cs-dados dt { font-size: 13px; color: #71717a; }
.cs-dados dd { margin: 0; font-size: 14.5px; color: #18181b; overflow-wrap: anywhere; }
.cs-avaliacoes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cs-avaliacoes li { padding: 14px 16px; border: 1px solid #ececef; border-radius: 14px; background: #fff; }
.cs-avaliacoes p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: #27272a; }
.cs-aval-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-avaliacoes small { font-size: 12.5px; color: #a1a1aa; }
.cs-fechada { margin: 10px 0 18px; padding: 14px 16px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; line-height: 1.6; }
.cs-fechada .cs-lista { margin-top: 10px; }
.cs-convite { padding: 18px 20px; border-radius: 16px; background: var(--gc-laranja-suave, #fff4ee); border: 1px solid var(--gc-laranja-borda, #ffd2bb); }
body .cs-convite p { margin: 0 0 12px; color: #3f3f46; font-size: 15px; }

@media (max-width: 900px) {
    .cs-busca { grid-template-columns: 1fr 1fr; }
    .cs-busca label:first-child { grid-column: 1 / -1; }
    .cs-item { grid-template-columns: minmax(0, 1fr); }
    .cs-item-acoes { justify-content: flex-start; }
    .cs-loja-corpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    body .cs h1 { font-size: 24px; }
    .cs-busca { grid-template-columns: 1fr; }
    .cs-busca .cs-botao { justify-content: center; }
    .cs-topo--marca, .cs-loja { flex-direction: column; gap: 10px; }
    .cs-topo-logo { width: 56px; height: 56px; }
    .cs-chips--uf { top: 56px; flex-wrap: nowrap; overflow-x: auto; }
    .cs-chips--uf a { white-space: nowrap; }
    .cs-dados div { grid-template-columns: 90px minmax(0, 1fr); }
    .cs-mapa, .cs-mapa iframe { min-height: 220px; }
}
body .cs-dados a, body .cs-bloco > p > a, body .cs-vazio a, body .cs-fechada a, body .cs-colunas a, body .cs-topo p a { color: var(--gc-laranja-2, #f15921); text-decoration: none; }
body .cs-dados a:hover, body .cs-bloco > p > a:hover, body .cs-vazio a:hover, body .cs-colunas a:hover { text-decoration: underline; }