/* ==========================================================================
   Trucksy — Camada de modernização do catálogo público (white-label)
   Carregar APÓS design-system.css (tokens) e style.css.
   Refina tipografia (Inter), cards, botões, filtros e espaçamentos usando os
   tokens — SEM trocar a cor da empresa: o accent continua vindo de
   --azul / --cta (definidos por empresa em main.js applyColors).
   ========================================================================== */

/* accent Trucksy = cor da empresa (para componentes que usem --brand-*) */
:root { --brand-500: var(--azul, #6366F1); }

/* Tipografia moderna (Inter) — títulos com tracking justo */
body { font-family: var(--font-sans); }
.section-title, .hero h1, h1, h2, h3, .card-title, .ad-price, .logo {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-tight);
}
.section-title { font-weight: var(--font-bold); }

/* Botões — raio/sombra/transição dos tokens, cores preservadas */
.btn {
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  transition: all var(--transition-fast);
  gap: var(--space-2);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-lg { border-radius: var(--radius-lg); }
.btn svg, .nav a svg { width: 18px; height: 18px; }

/* Header mais limpo */
.header { border-bottom: 1px solid var(--border-default); box-shadow: var(--shadow-xs); }
.nav a { transition: color var(--transition-fast); }

/* Filtros — inputs/selects modernos com foco na cor da empresa */
.filters input, .filters select {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filters input:focus, .filters select:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}

/* Cards do feed — raio maior, sombra e hover-lift */
.ad-card, .card, .testimonial {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 1px solid var(--border-default);
}
.ad-card:hover, .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ad-img, .card-img { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.ad-price, .card-price { font-weight: var(--font-bold); }
.ad-tags span { border-radius: var(--radius-sm); }

/* Cards de diferenciais e depoimentos */
.feature {
  border-radius: var(--radius-xl);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.feature .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--azul) 12%, transparent);
  color: var(--azul);
}
.feature .ico svg { width: 26px; height: 26px; }

/* Ícones do rodapé (contato/social) */
.footer .cols a { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer .cols a svg { width: 18px; height: 18px; }

/* Espaçamento de seções um pouco mais arejado em telas grandes */
@media (min-width: 1024px) { .section { padding-top: var(--space-20); padding-bottom: var(--space-20); } }

/* Pílula/tag de seção com a cor da empresa */
.section-tag {
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--azul) 12%, transparent);
  color: var(--azul);
  font-weight: var(--font-semibold);
}

/* ==========================================================================
   PRESETS DE LAYOUT DO FEED (não alteram os dados, só a exibição)
   ========================================================================== */
/* Layout GRID (Marketplace) — cards uniformes */
.feed-grid.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.feed-grid.layout-grid .ad-card--featured { grid-column: auto; flex-direction: column; min-height: 0; max-height: none; } /* sem destaque especial no grid */
.feed-grid.layout-grid .ad-card--featured .ad-img { width: 100%; aspect-ratio: 4/3; height: auto; }
@media (max-width: 480px) { .feed-grid.layout-grid { grid-template-columns: 1fr; } }

/* Layout HORIZONTAL (Corporativo) — foto à esquerda, info à direita */
.feed-grid.layout-horizontal { display: flex; flex-direction: column; gap: var(--space-4); }
.feed-grid.layout-horizontal .ad-card { flex-direction: row; align-items: stretch; min-height: 160px; max-height: 200px; overflow: hidden; }
.feed-grid.layout-horizontal .ad-img { width: 38%; flex: none; height: auto; aspect-ratio: unset; }
.feed-grid.layout-horizontal .ad-img img { width: 100%; height: 100%; object-fit: cover; }
.feed-grid.layout-horizontal .ad-body { flex: 1; padding: 20px; justify-content: center; }
.feed-grid.layout-horizontal .ad-price { font-size: var(--text-2xl); }
.feed-grid.layout-horizontal .ad-caption { -webkit-line-clamp: 2; }
@media (max-width: 640px) {
  .feed-grid.layout-horizontal .ad-card { flex-direction: column; min-height: 0; max-height: none; }
  .feed-grid.layout-horizontal .ad-img { width: 100%; aspect-ratio: 4/3; }
}

/* Layout PREMIUM — 1º card em banner largo, demais em grid */
.feed-grid.layout-premium { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.feed-grid.layout-premium .ad-card--featured {
  grid-column: 1 / -1; display: flex; flex-direction: row; align-items: stretch;
  min-height: 280px; max-height: 360px; overflow: hidden; border-radius: var(--raio);
}
.feed-grid.layout-premium .ad-card--featured .ad-img { width: 52%; flex: none; aspect-ratio: unset; height: auto; }
.feed-grid.layout-premium .ad-card--featured .ad-img img { width: 100%; height: 100%; object-fit: cover; }
.feed-grid.layout-premium .ad-card--featured .ad-body { flex: 1; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.feed-grid.layout-premium .ad-card--featured .ad-price { font-size: 2rem; }
.feed-grid.layout-premium .ad-card--featured .ad-caption { -webkit-line-clamp: 2; }
@media (max-width: 720px) {
  .feed-grid.layout-premium .ad-card--featured { flex-direction: column; min-height: 0; max-height: none; }
  .feed-grid.layout-premium .ad-card--featured .ad-img { width: 100%; height: 220px; aspect-ratio: unset; }
}

/* ==========================================================================
   BOTÕES DE AÇÃO (configuráveis) — cores via vars inline --act-*
   ========================================================================== */
.act-btn {
  --act-bg: var(--azul, #6366F1);
  --act-text: #fff;
  --act-hover: var(--azul-escuro, #4F46E5);
  --act-icon: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 18px; font-size: var(--text-sm); font-weight: var(--font-semibold);
  border-radius: var(--radius-md); border: 2px solid transparent;
  background: var(--act-bg); color: var(--act-text); cursor: pointer;
  transition: all var(--transition-fast); line-height: 1; text-decoration: none;
}
.act-btn:hover { background: var(--act-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.act-btn .act-ico { display: inline-flex; }
.act-btn .act-ico svg { width: 18px; height: 18px; color: var(--act-icon); }
.act-btn--icon { padding: 0; width: 52px; height: 52px; border-radius: var(--radius-full); }
.act-btn--icon .act-label { display: none; }
.act-btn--icon .act-ico svg { width: 24px; height: 24px; }

/* Variações de estilo */
.act-btn--filled   { background: var(--act-bg); color: var(--act-text); border-color: transparent; }
.act-btn--outline  { background: transparent; color: var(--act-bg); border-color: var(--act-bg); }
.act-btn--outline .act-ico svg { color: var(--act-bg); }
.act-btn--outline:hover { background: var(--act-bg); color: var(--act-text); }
.act-btn--outline:hover .act-ico svg { color: var(--act-text); }
.act-btn--rounded  { border-radius: var(--radius-full); }
.act-btn--square   { border-radius: 0; }
.act-btn--shadow   { box-shadow: var(--shadow-lg); }
.act-btn--floating { border-radius: var(--radius-full); box-shadow: var(--shadow-xl); }

/* Barra flutuante (canto inferior direito) */
.act-bar {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-3);
}
@media (max-width: 480px) { .act-bar { right: 12px; bottom: 12px; } }

/* Seção "Contatos" do rodapé — WhatsApp + Instagram com padrão visual idêntico */
.footer-contacts { display: flex; flex-direction: column; gap: var(--space-3); max-width: 260px; margin-top: 4px; }
/* opacity/hover explícitos p/ vencer as regras genéricas de `.footer a` (evita transparência e o slide azul) */
.footer-contacts .act-btn { width: 100%; justify-content: center; padding: 11px 18px; opacity: 1; }
.footer-contacts .act-btn:hover { opacity: 1; color: var(--act-text); transform: translateY(-1px); }
@media (max-width: 640px) { .footer-contacts { max-width: 320px; } }

/* Selos nos cards (Destaque / Novo) */
.ad-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px; }
.ad-new { background: var(--color-success, #22C55E); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* Filtros — seta custom nos selects + botão "Limpar filtros" */
.filters select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.filters-clear { background: none; border: none; color: var(--azul); font-size: 0.85rem; cursor: pointer; padding: 6px 4px; opacity: 0; transform: translateY(-2px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.filters-clear.show { opacity: 1; transform: none; pointer-events: auto; }
.filters-clear:hover { text-decoration: underline; }
.ad-card { position: relative; }

/* ==========================================================================
   TEMPLATES (Aparência do Site) — variações de cards/sombras/tipografia/hover
   data-template no <body>: grid=Marketplace · premium=Premium · horizontal=Corporativo
   ========================================================================== */
/* Marketplace (OLX-like): cards modernos, sombra média, hover destacado */
[data-template="grid"] .ad-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
[data-template="grid"] .ad-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
[data-template="grid"] .ad-price { font-size: var(--text-xl); }

/* Premium (Airbnb-like): minimalista, muito espaço, sombra suave, sem borda */
[data-template="premium"] .ad-card { border: none; border-radius: var(--radius-2xl); box-shadow: 0 1px 2px rgba(0,0,0,.04); background: transparent; }
[data-template="premium"] .ad-card .ad-img, [data-template="premium"] .ad-card .ad-img img { border-radius: var(--radius-2xl); }
[data-template="premium"] .ad-card .ad-body { padding-left: 2px; padding-right: 2px; }
[data-template="premium"] .ad-card:hover { transform: none; box-shadow: none; }
[data-template="premium"] .ad-card:hover .ad-img img { transform: scale(1.03); }
[data-template="premium"] .ad-card .ad-img img { transition: transform .4s ease; }
[data-template="premium"] .feed-grid.layout-premium { gap: var(--space-8); }
[data-template="premium"] .ad-price { font-weight: var(--font-bold); letter-spacing: var(--tracking-tight); }

/* Corporativo (lista): denso, bordas discretas, hover sutil, tipografia compacta */
[data-template="horizontal"] .ad-card { border-radius: var(--radius-md); box-shadow: none; border: 1px solid var(--border-default); }
[data-template="horizontal"] .ad-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--azul); }
[data-template="horizontal"] .ad-caption { font-size: var(--text-sm); }
[data-template="horizontal"] .section-title { letter-spacing: 0; }