/* ============================================================
   Brasil Buscador - identidade visual
   Carregado DEPOIS de ui-optago.css: reaproveita os componentes
   op-* da Óptago, só troca os tokens de cor pelas cores da
   bandeira do Brasil e acrescenta os blocos próprios do site.
   ============================================================ */

:root {
  /* Paleta base - bandeira do Brasil */
  --bb-green:        #009440;
  --bb-green-hover:  #00782F;
  --bb-yellow:       #FFCB00;
  --bb-yellow-hover: #E0B200;
  --bb-blue:         #302681;
  --bb-blue-2:       #002776;

  /* Remapeamento dos tokens do ui-optago */
  --op-accent:       var(--bb-yellow);
  --op-accent-hover: var(--bb-yellow-hover);
  --op-accent-ink:   #17130a;

  --op-primary:       var(--bb-green);
  --op-primary-hover: var(--bb-green-hover);
  --op-primary-ink:   #FFFFFF;

  --op-info:    var(--bb-blue);
  --op-success: var(--bb-green);
  --op-warning: var(--bb-yellow);

  --op-glow:      0 0 20px rgba(0, 148, 64, .35);
  --op-glow-info: 0 0 20px rgba(48, 38, 129, .45);
}

html.light {
  --op-primary:       var(--bb-green);
  --op-primary-hover: var(--bb-green-hover);
  --op-primary-ink:   #FFFFFF;
  --op-info:    var(--bb-blue);
  --op-success: var(--bb-green);
  --op-warning: #C99A00;
  --op-glow:      0 4px 14px rgba(0, 148, 64, .25);
  --op-glow-info: 0 4px 14px rgba(48, 38, 129, .22);
}

/* ==================== Marca - Brasil Buscador ==================== */

.bb-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bb-green) 0%, var(--bb-green) 58%, var(--bb-blue-2) 100%);
}
.bb-logo i { color: #fff; font-size: 1.05rem; }
.bb-logo::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bb-yellow);
  box-shadow: 0 0 6px var(--bb-yellow);
}

/* Linha do header em degradê com as 3 cores da bandeira, no lugar do fade
   monocromático padrão do ui-optago. */
.op-header::after {
  background: linear-gradient(90deg,
    transparent 2%,
    var(--bb-green) 22%,
    var(--bb-yellow) 50%,
    var(--bb-blue-2) 78%,
    transparent 98%);
  opacity: .8;
}

/* Ícones do menu lateral em verde por padrão (só o item ativo vira amarelo) -
   sem isso, o menu inteiro fica cinza fora do item selecionado. */
.op-nav-item i { color: var(--op-primary); }
html.light .op-nav-item i { color: color-mix(in srgb, var(--op-primary) 85%, black); }
.op-nav-item:hover i { color: var(--op-strong); }
.op-nav-item.is-active i { color: var(--op-accent); }

/* Selo "produto Óptago" - reaproveita o octógono lima da marca-mãe, só no rodapé */
.bb-optago-credit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--op-muted);
  font-family: var(--op-font-mono);
  font-size: .75rem;
  text-decoration: none;
}
.bb-optago-credit:hover { color: var(--op-strong); }
.bb-optago-mark {
  width: 16px;
  height: 16px;
  background: #C0FF6B;
  flex-shrink: 0;
}

/* Rodapé some espremido no mobile por padrão (uma linha só, sem quebra) -
   aqui ele empilha, centraliza e ganha mais altura pra caber as duas linhas. */
@media (max-width: 640px) {
  :root { --op-footer-h: 68px; }
  .op-footer {
    flex-direction: column;
    justify-content: center;
    gap: .3125rem;
    padding: .625rem 1rem;
    text-align: center;
    line-height: 1.4;
  }
  .op-footer span { white-space: normal; }
}

/* ==================== Glows de fundo - verde, amarelo e azul ==================== */

.bb-glow-green  { background: var(--bb-green); opacity: .11; }
.bb-glow-yellow { background: var(--bb-yellow); opacity: .10; }
.op-glow-info   { opacity: .11; }

html.light .bb-glow-green {
  background: var(--bb-green);
  opacity: .34;
  mix-blend-mode: multiply;
}
html.light .bb-glow-yellow {
  background: var(--bb-yellow);
  opacity: .44;
  mix-blend-mode: multiply;
}
html.light .op-glow-info {
  opacity: .32;
}

/* ==================== Hero ==================== */

.bb-hero {
  position: relative;
  padding: 2.5rem 0 1rem;
}
.bb-hero h1 {
  max-width: 720px;
  margin-bottom: .75rem;
}
.bb-hero-lead {
  max-width: 620px;
  font-size: 1.0625rem;
  color: var(--op-text);
}
.bb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
.bb-flag-bar {
  display: flex;
  width: 84px;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.bb-flag-bar span { flex: 1; }
.bb-flag-bar span:nth-child(1) { background: var(--bb-green); }
.bb-flag-bar span:nth-child(2) { background: var(--bb-yellow); }
.bb-flag-bar span:nth-child(3) { background: var(--bb-blue-2); }

/* ==================== Cards de consulta ==================== */

.bb-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.bb-icon-primary { background: color-mix(in srgb, var(--op-primary) 14%, transparent); border: none; }
.bb-icon-primary i { color: var(--op-primary); }
html.light .bb-icon-primary i { color: color-mix(in srgb, var(--op-primary) 85%, black); }

.bb-icon-accent { background: color-mix(in srgb, var(--op-accent) 16%, transparent); border: none; }
.bb-icon-accent i { color: color-mix(in srgb, var(--op-accent) 70%, var(--op-strong)); }

.bb-consulta-card {
  height: 100%;
  border-top-width: 3px;
  border-top-color: var(--bb-green);
}
.bb-consulta-card .op-card-link { margin-top: .75rem; }
.op-grid-3 > a:nth-child(3n+2) .bb-consulta-card,
.op-grid-4 > a:nth-child(4n+2) .bb-consulta-card { border-top-color: var(--bb-yellow); }
.op-grid-3 > a:nth-child(3n+3) .bb-consulta-card,
.op-grid-4 > a:nth-child(4n+3) .bb-consulta-card { border-top-color: var(--bb-blue-2); }
.op-grid-4 > a:nth-child(4n+4) .bb-consulta-card { border-top-color: var(--bb-green-hover); }

.bb-noticia-card { height: 100%; display: flex; flex-direction: column; }

/* ==================== Consultas ainda não implementadas ==================== */

.bb-disabled { opacity: .5; }
.bb-disabled:hover { opacity: .65; }
.bb-disabled .op-card-icon { transform: none !important; }

a.op-nav-item.bb-disabled:hover,
a.op-nav-item.bb-disabled.is-active { background: transparent; border-color: transparent; box-shadow: none; }

/* ==================== Página de espera (consulta em construção) ==================== */

.bb-placeholder-card {
  max-width: 560px;
  margin: 2rem auto;
  text-align: center;
  padding: 2.5rem 2rem;
}
.bb-placeholder-card .bb-logo,
.bb-placeholder-card .op-card-icon {
  margin-left: auto;
  margin-right: auto;
}

/* ==================== Barra de busca (topo, largura total) ==================== */

.bb-search-bar {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  width: 100%;
}
.bb-search-bar .op-input-icon,
.bb-search-bar .bb-search-field,
.bb-search-bar .op-select { flex: 1; min-width: 140px; }
.bb-search-bar .op-input {
  height: 100%;
  font-size: 1rem;
  padding-top: .875rem;
  padding-bottom: .875rem;
}
.bb-search-bar .op-btn { white-space: nowrap; }
@media (max-width: 640px) {
  .bb-search-bar { flex-direction: column; }
}

/* ==================== Resultado de consulta (grid chave/valor) ==================== */

.bb-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem 1.5rem;
}
.bb-kv-item { display: flex; flex-direction: column; gap: .25rem; }
.bb-kv-label {
  font-family: var(--op-font-mono);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--op-muted);
}
.bb-kv-value-row {
  display: flex;
  align-items: center;
  gap: .375rem;
}
.bb-kv-value {
  color: var(--op-strong);
  font-size: .9375rem;
  line-height: 1.5;
  word-break: break-word;
}
.bb-kv-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--op-border-2);
  background: var(--op-panel-2);
  color: var(--op-muted);
  cursor: pointer;
  border-radius: var(--op-radius-sm);
  transition: all .15s var(--op-ease);
}
.bb-kv-copy:hover {
  color: var(--op-accent-ink);
  background: var(--op-accent);
  border-color: var(--op-accent);
}
.bb-kv-copy.is-copiado { color: #fff; background: var(--op-success); border-color: var(--op-success); }
.bb-kv-copy i { font-size: .875rem; }

/* Botão "copiar resultado" - mais em destaque que um botão secundário comum */
.bb-btn-copy {
  background: var(--op-accent);
  color: var(--op-accent-ink);
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--op-accent) 30%, transparent);
}
.bb-btn-copy:hover {
  background: var(--op-accent-hover);
  box-shadow: var(--op-glow);
  color: var(--op-accent-ink);
}
.bb-btn-copy.is-copiado { background: var(--op-success); color: #fff; box-shadow: none; }

/* ==================== Resultado - âncora de scroll ==================== */

#bb-resultado { scroll-margin-top: calc(var(--op-header-h) + 1rem); }

/* ==================== Mapa (Leaflet) ==================== */

.bb-mapa {
  height: 280px;
  border-radius: var(--op-radius);
  overflow: hidden;
  border: 1px solid var(--op-border);
  margin-top: 1rem;
}
.bb-mapa .leaflet-control-attribution {
  background: color-mix(in srgb, var(--op-panel) 85%, transparent);
  color: var(--op-muted);
}

/* ==================== Listas longas (municípios, marcas, modelos...) ==================== */

.bb-scroll-box {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}
.bb-column-list {
  columns: 3;
  column-gap: 1.5rem;
  font-size: .875rem;
  color: var(--op-text);
}
.bb-column-list > div { break-inside: avoid; padding: .1875rem 0; }
@media (max-width: 900px) { .bb-column-list { columns: 2; } }
@media (max-width: 560px) { .bb-column-list { columns: 1; } }

/* ==================== Utilidades locais ==================== */

.bb-section-lead { max-width: 640px; }
.op-mb-0 { margin-bottom: 0 !important; }
a.op-badge { text-decoration: none; transition: all .15s var(--op-ease); }
a.op-badge:hover { border-color: color-mix(in srgb, var(--op-accent) 45%, transparent); color: var(--op-strong); }