/**
 * ✅ SEARCH BOX MODULAR CSS
 * Componente modular consolidando estilos da caixa de busca
 * Compatível com diferentes contextos (index, landing) e dispositivos
 */

/* ===== PREVENÇÃO GLOBAL DE OVERFLOW HORIZONTAL ===== */
/* ✅ FIX ANDROID: Prevenir scroll horizontal em todos os dispositivos */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
}

/* ===== CSS CUSTOM PROPERTIES (VARIÁVEIS) ===== */
:root {
  --search-primary-color: #f46f09;
  --search-primary-hover: #ffffff;
  --search-background: #ffffff;
  --search-border-color: #f46f09; /* CORREÇÃO: Borda laranja para continuidade visual */
  --search-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
  --search-border-radius: 30px;
  --search-padding: 0.6rem 3rem 0.5rem 1.6rem; /* ✅ AJUSTADO: Padding simétrico vertical, espaço para lupa+5px */
  --search-font-size: 0.875rem;
  --search-chip-bg: #e3f2fd;
  --search-chip-border: #f46f09;
  --search-chip-text: #f46f09;
  --search-z-index-base: 2000; /* ✅ ATUALIZADO: Maior que o overlay (1000) */
  --search-z-index-dropdown: 999999999; /* ✅ CORREÇÃO: Z-index muito alto para dropdown sempre ficar acima do backdrop-filter */
  --search-transition: all 0.3s ease;
  --search-mobile-breakpoint: 768px;
}

/* ===== PREVENÇÃO DE OVERFLOW GLOBAL ===== */
.search-box-modular,
.search-box-modular * {
  max-width: 100vw; /* Garantir que nada ultrapasse o viewport */
}

/* Garantir que todos containers permitam dropdown escapar */
.search-box-modular,
.search-box-modular .search-container,
.search-box-modular .search-bar,
.search-box-modular .search-input-wrapper {
  overflow: visible !important;
  contain: none !important;
  isolation: auto !important;
}

/* Forçar largura responsíva no estado expandido */
.search-box-modular[data-context="index"].expanded {
  max-width: min(1300px, calc(100vw - 2rem)) !important; /* ✅ ATUALIZADO: Respeitar 1300px e responsividade */
  margin: 0 auto !important; /* ✅ ADICIONADO: Centralizar horizontalmente */
  overflow: visible !important; /* Mudado de hidden para visible */
}

.search-box-modular[data-context="index"].expanded .search-input-wrapper,
.search-box-modular[data-context="index"].expanded .search-box-content {
  max-width: 100% !important; /* ✅ CORRIGIDO: Permitir ocupar toda largura do container pai */
  overflow: visible !important; /* Mudado de hidden para visible */
}

/* ===== CONTAINER PRINCIPAL DO COMPONENTE ===== */
.search-box-modular {
  position: relative;
  width: 100%;
  max-width: 1300px; /* ✅ ADICIONADO: Respeitar limite do header-flex-container */
   /* ✅ ADICIONADO: Centralizar quando menor que 1300px */
  z-index: var(--search-z-index-base);
  font-family: inherit;
  /* Removido isolation para permitir dropdown escapar */
  overflow: visible !important;
  box-sizing: border-box;
}

/* CORREÇÃO DEFENSIVA: Garantir que caixa NUNCA seja escondida no contexto landing */
.search-box-modular[data-context="landing"] .search-container,
.search-box-modular[data-context="landing"] .search-bar,
.search-box-modular[data-context="landing"] .search-input-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.search-box-modular[data-context="landing"] {
  display: block !important;
  visibility: visible !important;
}

/* ✅ NOVO: Estado com dropdown visível - excluir área do dropdown do escurecimento */
.search-box-overlay.dropdown-visible {
  /* O clip-path será calculado dinamicamente via JavaScript */
  /* Formato: inset(top right bottom left) onde a área do dropdown é excluída */
}

/* ✅ NOVO: Estado sem dropdown - cobertura total normal */
.search-box-overlay.dropdown-hidden {
  clip-path: inset(0 0 0 0) !important; /* Cobertura total */
  -webkit-clip-path: inset(0 0 0 0) !important;
}


/* Regra alternativa para browsers que não suportam :has() */
.search-box-expanded .search-box-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* ✅ CORREÇÃO: Auto para bloquear interações corretas com conteúdo abaixo */
}

/* ===== DESFOQUE + OVERLAY ESCURO ===== */
/* Aplicar desfoque e overlay escuro nos elementos quando search-box está expandida */
body:has(.search-box-modular[data-context="index"].expanded) #header-menu-container,
body:has(.search-box-modular[data-context="index"].expanded) main,
body:has(.search-box-modular[data-context="index"].expanded) .content-below-header,
body:has(.search-box-modular[data-context="index"].expanded) .main-content,
body:has(.search-box-modular[data-context="index"].expanded) .resultados-info-container,
body:has(.search-box-modular[data-context="index"].expanded) .grid-anuncios,
body:has(.search-box-modular[data-context="index"].expanded) .anuncios-grid,
body:has(.search-box-modular[data-context="index"].expanded) .paginacao,
body:has(.search-box-modular[data-context="index"].expanded) .paginacao-per-page,
body:has(.search-box-modular[data-context="index"].expanded) .paginacao-navegacao,
body:has(.search-box-modular[data-context="index"].expanded) footer {
  filter: blur(5px);
  transition: all 0.3s ease-out;
  position: relative;
}

/* ✅ OVERLAY GLOBAL: Efeito similar ao modal - overlay sobre toda a tela */
body:has(.search-box-modular[data-context="index"].expanded)::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45); /* ✅ Mesma opacidade do modal */
  z-index: 1000; /* ✅ Z-index baixo - elementos importantes ficam acima */
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}



/* ✅ GARANTIR POSICIONAMENTO RELATIVE PARA MENU HORIZONTAL */
body:has(.search-box-modular[data-context="index"].expanded) #header-menu-container {
  position: relative !important;
}

/* ✅ ESCURECIMENTO NO MENU HORIZONTAL: Aplicar box-shadow inset no wrapper do menu */
body:has(.search-box-modular[data-context="index"].expanded) #header-menu-container .menu-horizontal-filtros-carousel-wrapper {
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.45) !important;
  transition: box-shadow 0.3s ease-out !important;
}

/* ✅ BACKGROUND DO HEADER QUANDO SEARCH-BOX EXPANDIDA: Alterar para cor #888889 */
body:has(.search-box-modular[data-context="index"].expanded) html body header.main-header,
body:has(.search-box-modular[data-context="index"].expanded) html body .main-header,
body:has(.search-box-modular[data-context="index"].expanded) body header.main-header,
body:has(.search-box-modular[data-context="index"].expanded) header.main-header {
  background: #888889 !important;
  transition: background 0.3s ease-out !important;
}


/* ✅ OVERLAY GLOBAL: Agora usa overlay único, sem necessidade de z-index individuais */

/* ✅ EXCLUSÃO: Garantir que dropdown NUNCA seja desfocado nem escurecido */
.search-box-modular .search-suggestions,
.search-box-modular .search-suggestions *,
.search-suggestions,
#searchSuggestions,
#searchSuggestions * {
  filter: none !important; /* ✅ Remover qualquer filtro de desfoque */
  backdrop-filter: none !important; /* ✅ Remover backdrop filter */
  -webkit-filter: none !important; /* ✅ Webkit support */
  -webkit-backdrop-filter: none !important; /* ✅ Webkit backdrop support */
  position: relative !important; /* ✅ Garantir que não sejam afetados pelo overlay */
  z-index: inherit !important; /* ✅ Herdar z-index alto do pai */
}

/* Regra alternativa para browsers que não suportam :has() */
body.search-box-expanded #header-menu-container,
body.search-box-expanded main,
body.search-box-expanded .content-below-header,
body.search-box-expanded .main-content,
body.search-box-expanded .resultados-info-container,
body.search-box-expanded .grid-anuncios,
body.search-box-expanded .anuncios-grid,
body.search-box-expanded .paginacao,
body.search-box-expanded .paginacao-per-page,
body.search-box-expanded .paginacao-navegacao,
body.search-box-expanded footer {
  filter: blur(5px);
  transition: all 0.3s ease-out;
  position: relative;
}

/* ✅ OVERLAY GLOBAL (fallback para browsers sem :has()) */
body.search-box-expanded::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45); /* ✅ Mesma opacidade do modal */
  z-index: 1000; /* ✅ Z-index baixo - elementos importantes ficam acima */
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}



/* ✅ GARANTIR POSICIONAMENTO RELATIVE PARA MENU HORIZONTAL (fallback) */
body.search-box-expanded #header-menu-container {
  position: relative !important;
}

/* ✅ ESCURECIMENTO NO MENU HORIZONTAL (fallback): Aplicar box-shadow inset no wrapper do menu */
body.search-box-expanded #header-menu-container .menu-horizontal-filtros-carousel-wrapper {
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.45) !important;
  transition: box-shadow 0.3s ease-out !important;
}

/* ✅ BACKGROUND DO HEADER QUANDO SEARCH-BOX EXPANDIDA (fallback): Alterar para cor #888889 */
body.search-box-expanded html body header.main-header,
body.search-box-expanded html body .main-header,
body.search-box-expanded body header.main-header,
body.search-box-expanded header.main-header {
  background: #888889 !important;
  transition: background 0.3s ease-out !important;
}

/* ✅ OVERLAY GLOBAL (fallback): Agora usa overlay único, sem necessidade de z-index individuais */

/* ✅ EXCLUSÃO para browsers sem :has(): Garantir que dropdown NUNCA seja desfocado nem escurecido */
body.search-box-expanded .search-box-modular .search-suggestions,
body.search-box-expanded .search-box-modular .search-suggestions *,
body.search-box-expanded .search-suggestions,
body.search-box-expanded #searchSuggestions,
body.search-box-expanded #searchSuggestions * {
  filter: none !important; /* ✅ Remover qualquer filtro de desfoque */
  backdrop-filter: none !important; /* ✅ Remover backdrop filter */
  -webkit-filter: none !important; /* ✅ Webkit support */
  -webkit-backdrop-filter: none !important; /* ✅ Webkit backdrop support */
  position: relative !important; /* ✅ Garantir que não sejam afetados pelo overlay */
  z-index: inherit !important; /* ✅ Herdar z-index alto do pai */
}

/* Overlay sem efeito blur - apenas escurecimento */


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ===== COMPACT INDICATOR (ESTADO RETRAÍDO) ===== */
.search-box-modular .compact-indicator {
  display: none; /* Inicialmente oculto */
  align-items: center;
  justify-content: space-between;
  background: var(--search-background);
  border: 1px solid var(--search-border-color);
  border-radius: var(--search-border-radius);
  padding: 0.5rem 1rem; /* Valores responsivos em rem */
  cursor: pointer;
  transition: var(--search-transition);
  box-shadow: var(--search-shadow);
  min-height: 2.75rem; /* 44px em rem */
  width: calc(100% - 20px); /* Largura com 10px de cada lado */
  max-width: min(15rem, calc(100vw - 20px)); /* Máximo responsivo com 10px de margem */
  gap: 0.625rem; /* 10px em rem */
  margin-left: 10px; /* Margem esquerda de 10px */
  margin-right: 10px; /* Margem direita de 10px */
}

.search-box-modular .compact-indicator:hover {
  border-color: var(--search-primary-color);
  box-shadow: 0 0.125rem 0.75rem rgba(244, 111, 9, 0.1);
}

/* Ícone de lupa à esquerda */
.search-box-modular .compact-search-icon {
  color: var(--search-primary-color);
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}

/* Centro com indicador numérico ou texto */
.search-box-modular .compact-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Badge numérico laranja - CÍRCULO PERFEITO */
.search-box-modular .location-badge {
  display: inline-flex;
  background: var(--search-primary-color);
  color: white;
  font-size: 0.75rem;
  width: 1.5rem; /* Largura fixa 24px */
  height: 1.5rem; /* Altura fixa 24px */
  min-width: 1.5rem; /* Largura mínima */
  max-width: 1.5rem; /* Largura máxima */
  min-height: 1.5rem; /* Altura mínima */
  max-height: 1.5rem; /* Altura máxima */
  padding: 0; /* Sem padding */
  margin: 0; /* Sem margem */
  border-radius: 50%; /* Círculo perfeito */
  aspect-ratio: 1 / 1; /* Proporção 1:1 */
  flex-shrink: 0; /* Prevenir encolhimento */
  flex-grow: 0; /* Prevenir crescimento */
  line-height: 1; /* Line-height compacto */
  text-align: center;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
}

/* Garantir círculo perfeito em qualquer contexto */
html body .search-box-modular .location-badge,
html body .search-box-modular .compact-center .location-badge,
html body .search-box-modular .compact-indicator .location-badge {
  width: 1rem;
  height: 1rem;
  min-width: 0.5rem;
  max-width: 1rem;
  min-height: 0.5rem;
  max-height: 1rem;
  border-radius: 50%; /* Círculo perfeito */
  overflow: hidden;
}

/* Seta à direita */
.search-box-modular .compact-arrow-icon {
  color: var(--search-primary-color);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.search-box-modular .compact-indicator:hover .compact-arrow-icon {
  transform: translateY(0.125rem);
}

/* ===== CONTAINER DE BUSCA ===== */
.search-box-modular .search-container {
  position: relative;
  width: 100%;
  min-height: 2.75rem; /* Garantir altura mínima */
  overflow: visible !important; /* Permitir dropdown extrapolar */
  /* Display será controlado via JavaScript/classes */
}

/* Título removido - não faz parte do componente */

/* ===== BARRA DE BUSCA ===== */
.search-box-modular .search-bar {
  position: relative;
  width: 100%;
  overflow: visible !important; /* Permitir dropdown extrapolar */
  align-self: unset;
}

.search-box-modular .search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center; /* ✅ ADICIONADO: Centralizar conteúdo verticalmente */
  background: var(--search-background);
  border: 1px solid var(--search-border-color);
  border-radius: var(--search-border-radius);
  padding: var(--search-padding);
  transition: var(--search-transition);
  /* box-shadow removido completamente */
  min-height: 2.75rem; /* ✅ AJUSTADO: Mesma altura mínima da caixa retraída */
  overflow: visible !important; /* Forçar overflow visível para dropdown */
  width: 100%; /* Usar largura relativa ao container pai */
  box-sizing: border-box;
}

.search-box-modular .search-input-wrapper:focus-within {
  border-color: var(--search-primary-color);
  /* box-shadow removido - sem efeito de glow alaranjado */
  outline: 0; /* Remover borda pontilhada de focus */
}

/* Remover outline em elementos focáveis da caixa de busca - especificidade alta */
.search-box-modular .search-input-wrapper,
.search-box-modular .search-input-wrapper:focus,
.search-box-modular .search-input-wrapper:focus-within,
.search-box-modular .search-input-wrapper:focus-visible,
.search-box-modular .search-input-wrapper:active,
.search-box-modular .search-box-content,
.search-box-modular .search-box-content:focus,
.search-box-modular .search-box-content:focus-visible,
.search-box-modular .search-box-content:active,
.search-box-modular .search-input,
.search-box-modular .search-input:focus {
  outline: 0;
  outline-width: 0;
  outline-style: none;
  outline-color: transparent;
}

/* Regra específica de alta prioridade para combater outline do navegador */
.landing-page .search-box-modular .search-input-wrapper:focus-within,
.landing-page .search-box-modular .search-input-wrapper,
html body .search-box-modular .search-input-wrapper:focus-within,
html body .search-box-modular .search-input-wrapper {
  outline: 0;
  outline-width: 0;
  outline-style: none;
  outline-offset: 0;
  border-outline: none;
}

/* ===== ÍCONE DE BUSCA - AUTÔNOMO E INDEPENDENTE ===== */
/* IMPORTANTE: Não depende de nenhum CSS externo */
.search-box-modular .search-icon {
  position: absolute !important;
  left: 5px !important; /* 5px da borda esquerda */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  color: var(--search-primary-color) !important;
  fill: none !important; /* Para SVG */
  stroke: var(--search-primary-color) !important; /* Para SVG */
  stroke-width: 2 !important;
  z-index: 10001 !important; /* Z-index muito alto para sobrepor qualquer elemento */
  pointer-events: auto !important; /* Tornar clicável */
  cursor: pointer !important;
  display: block !important; /* Garantir visibilidade */
  opacity: 1 !important;
  visibility: visible !important;
  /* Remover qualquer interferência de outros CSS */
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Forçar SVG a herdar cores do pai */
.search-box-modular .search-icon svg {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: var(--search-primary-color) !important;
  stroke-width: 2 !important;
}

/* Garantir lupa SEMPRE visível */
.search-box-modular .search-icon,
.search-box-modular.expanded .search-icon,
.search-box-modular.collapsed .search-icon {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  left: 5px !important;
  z-index: 10001 !important;
}

/* Override específico para ícones do SearchBoxModular */
.search-box-modular svg.search-icon,
.search-box-modular svg.dropdown-arrow {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  z-index: 10001 !important;
}

/* Container do conteúdo da busca - centralizar filhos verticalmente */
html body .search-box-modular .search-box-content,
.search-box-modular .search-input-wrapper .search-box-content {
  flex: 1;
  display: flex;
  align-items: center; /* Centralizar todos os filhos verticalmente */
   /* Alinhamento à esquerda */
  height: 100%; /* Usar altura total do wrapper */
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0.375rem; /* Espaço entre elementos */
  
   /* Mesma altura do wrapper */
  box-sizing: border-box;
  padding: 0; /* Padding controlado pelo wrapper */
  margin: 0;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling no iOS */
  position: relative;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Esconder scrollbar mas manter funcionalidade */
.search-box-modular .search-box-content::-webkit-scrollbar {
  display: none;
}

/* ===== CHIPS DE FILTROS SELECIONADOS ===== */
/* ✅ ESPECIFICIDADE ALTA: Garantir alinhamento à esquerda */
html body .search-box-modular .selected-filters-chips,
.search-box-modular .search-box-content .selected-filters-chips {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Forçar alinhamento à esquerda */
  gap: 0.375rem !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important; /* Impedir quebra de linha */
  margin: 0 !important; /* Remover todas as margens */
  width: auto !important;
  flex: 0 0 auto !important; /* Não expandir nem contrair */
   /* Alinhar o próprio container à esquerda */
  position: relative !important;
  left: 0 !important; /* Forçar posicionamento à esquerda */
}

/* Regras específicas para chips - garantir centralização vertical perfeita */
html body .search-box-modular .filter-chip,
.search-box-modular .selected-filters-chips .filter-chip {
  display: inline-flex;
  align-items: center; /* Centralizar conteúdo verticalmente */
  align-self: center; /* Centralizar o chip verticalmente no container */
  justify-content: center; /* Centralizar conteúdo horizontalmente */
  background: #ffffff;
  border: 1px solid var(--search-chip-border);
  color: var(--search-chip-text);
  padding: 0.3125rem 0.4rem; /* Padding balanceado para altura natural */
  border-radius: 1rem;
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
  transition: var(--search-transition);
  line-height: 1; /* Line-height unitário para centralização perfeita */
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0; /* Sem margens que possam desalinhar */
  box-sizing: border-box;
  vertical-align: baseline; /* Alinhamento baseline para flexbox */
}

/* Hover dos chips - MÁXIMA ESPECIFICIDADE */
html body .search-box-modular .filter-chip:hover,
html body .search-box-modular .selected-filters-chips .filter-chip:hover,
body .search-box-modular .filter-chip:hover,
body .search-box-modular .selected-filters-chips .filter-chip:hover {
  background: var(--search-primary-color) !important;
  border-color: var(--search-primary-color) !important;
  color: white !important;
  transform: translateY(-0.0625rem);
}

/* Chips ativos/selecionados (quando clicados) - MÁXIMA ESPECIFICIDADE */
html body .search-box-modular .filter-chip:active,
html body .search-box-modular .filter-chip.selected,
html body .search-box-modular .filter-chip.active,
html body .search-box-modular .selected-filters-chips .filter-chip:active,
html body .search-box-modular .selected-filters-chips .filter-chip.selected,
html body .search-box-modular .selected-filters-chips .filter-chip.active,
body .search-box-modular .filter-chip:active,
body .search-box-modular .filter-chip.selected,
body .search-box-modular .filter-chip.active,
body .search-box-modular .selected-filters-chips .filter-chip:active,
body .search-box-modular .selected-filters-chips .filter-chip.selected,
body .search-box-modular .selected-filters-chips .filter-chip.active {
  background: var(--search-primary-color) !important;
  border-color: var(--search-primary-color) !important;
  color: white !important;
  transform: translateY(-0.0625rem);
}

.search-box-modular .remove-chip {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--search-transition);
  flex-shrink: 0;
}

.search-box-modular .remove-chip:hover {
  color: #d32f2f;
  background: rgba(211, 47, 47, 0.1);
}

/* ===== INPUT DE BUSCA ===== */
.search-box-modular .search-input {
  flex: 1;
  min-width: 6.25rem;
  width: 100%;
  border: none;
  outline: 0;
  background: transparent;
  padding: 0.25rem;
  font-size: var(--search-font-size);
  color: #333;
  line-height: 1.2;
  height: 1.625rem;
  flex-shrink: 1;
}

.search-box-modular .search-input::placeholder {
  color: #999;
  font-style: italic;
}

/* ===== SETA DROPDOWN - AUTÔNOMA E INDEPENDENTE ===== */
/* IMPORTANTE: Não depende de nenhum CSS externo */
.search-box-modular .dropdown-arrow {
  position: absolute !important;
  right: 5px !important; /* 5px da borda direita */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0.9375rem !important;
  height: 0.9375rem !important;
  color: var(--search-primary-color) !important;
  fill: none !important; /* Para SVG */
  stroke: var(--search-primary-color) !important; /* Para SVG */
  stroke-width: 2 !important;
  cursor: pointer !important;
  transition: transform 0.3s ease !important;
  z-index: 10001 !important; /* Z-index muito alto para sobrepor qualquer elemento */
  display: block !important; /* Garantir visibilidade */
  opacity: 1 !important;
  visibility: visible !important;
  /* Remover qualquer interferência de outros CSS */
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0.9375rem !important;
  min-height: 0.9375rem !important;
  max-width: 0.9375rem !important;
  max-height: 0.9375rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  text-align: center !important;
}

/* ===== SETA ROTACIONADA (quando dropdown aberto) ===== */
.search-box-modular .dropdown-arrow.rotated {
  transform: translateY(-50%) rotate(180deg) !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
}

/* Forçar SVG a herdar cores do pai */
.search-box-modular .dropdown-arrow svg {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: var(--search-primary-color) !important;
  stroke-width: 2 !important;
}

.search-box-modular .dropdown-arrow:hover {
  color: var(--search-primary-hover) !important;
  transform: translateY(-50%) scale(1.1) !important;
  stroke: var(--search-primary-hover) !important;
}

.search-box-modular .dropdown-arrow.hidden {
  display: none !important;
}

/* Garantir seta SEMPRE visível */
.search-box-modular .dropdown-arrow,
.search-box-modular.expanded .dropdown-arrow,
.search-box-modular.collapsed .dropdown-arrow {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  right: 5px !important;
  z-index: 10001 !important;
}

/* ===== CONTADOR DE FILTROS ===== */
.search-box-modular .filter-counter {
  position: absolute;
  right: 1.5625rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--search-primary-color);
  color: white;
  font-size: 0.6875rem;
  font-weight: bold;
  border-radius: 30px;
  min-width: 1rem;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}

/* ===== DROPDOWN DE SUGESTÕES ===== */
.search-box-modular .search-suggestions {
  background: white !important; /* ✅ REFORÇADO: Background branco sólido sempre */
  border: 1px solid var(--search-border-color); /* ✅ INTEGRAÇÃO: Mesma borda da caixa de busca */
  border-top: none; /* Linha separadora é criada pelo pseudo-elemento ::before */
  position: relative;
  border-radius: 0.5rem;
  box-shadow: var(--search-shadow); /* CORREÇÃO: Usar mesma shadow da caixa */
  z-index: var(--search-z-index-dropdown) !important; /* ✅ CORREÇÃO: Usar variável z-index alta */
  display: none;
  height: auto !important; /* ✅ ALTURA VARIÁVEL: Cresce conforme conteúdo */
  max-height: 240px !important; /* ✅ LIMITE MÁXIMO: Para 5 sugestões (5 × ~48px) */
  overflow-y: auto !important; /* Scroll quando mais de 5 itens */
  overflow-x: hidden !important; /* Prevenir scroll horizontal */
  
  /* ✅ PROTEÇÃO CONTRA BACKDROP-FILTER E OVERLAY */
  transform: translateZ(0) !important; /* Criar nova pilha de contexto 3D */
  will-change: transform !important; /* Otimização GPU */
  isolation: isolate !important; /* Isolar do backdrop-filter do overlay */
  position: relative !important; /* Forçar posicionamento para z-index funcionar */
  pointer-events: auto !important; /* Garantir que cliques funcionem no dropdown */
  box-sizing: border-box; /* CORREÇÃO: Usar mesmo box-sizing da caixa de busca */
  /* Posicionamento será definido pelo contexto */
  
  /* ✅ SCROLL CUSTOMIZADO */
  scroll-behavior: smooth;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ccc transparent; /* Firefox */
}

/* Linha separadora simples sem pseudo-elementos */

/* ===== SCROLLBAR CUSTOMIZADA WEBKIT ===== */
.search-box-modular .search-suggestions::-webkit-scrollbar {
  width: 6px;
}

.search-box-modular .search-suggestions::-webkit-scrollbar-track {
  background: transparent;
}

.search-box-modular .search-suggestions::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.search-box-modular .search-suggestions::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Contexto INDEX: position absolute com integração visual perfeita igual ao LANDING */
.search-box-modular[data-context="index"] .search-suggestions {
  position: absolute !important;
  top: calc(100% - 2px) !important; /* Sobrepor 2px para criar continuidade perfeita */
  left: -1px !important; /* Compensar borda esquerda para alinhamento perfeito */
  width: calc(100% + 2px) !important; /* Compensar ambas as bordas laterais */
  margin: 0 !important; 
  padding: 0 !important; 
  z-index: 99999999 !important; /* Z-index muito alto para sobrepor menu e botão */
  box-sizing: border-box !important;
  
  /* ✅ INTEGRAÇÃO VISUAL PERFEITA - Borda laranja + fundo igual (igual ao LANDING) */
  border: 1px solid var(--search-border-color) !important; /* Borda laranja para combinar com a caixa */
  border-top: 1px solid #f0f0f0 !important; /* Linha separadora cinza */
  box-shadow: none !important; /* Sem sombra para evitar diferença de tom */
  border-top-left-radius: 0 !important; /* Remover raio superior esquerdo */
  border-top-right-radius: 0 !important; /* Remover raio superior direito */
  border-bottom-left-radius: var(--search-border-radius) !important; /* Usar mesmo raio da caixa */
  border-bottom-right-radius: var(--search-border-radius) !important;
  background: var(--search-background) !important; /* ✅ CORREÇÃO: Mesmo background da search-box */
  /* box-shadow removido para consistência */
}

/* Contexto LANDING: position absolute relativo ao wrapper com integração visual perfeita */
.search-box-modular[data-context="landing"] .search-suggestions {
  position: absolute !important;
  top: calc(100% - 2px) !important; /* Sobrepor 2px para criar continuidade perfeita */
  left: -1px !important; /* Compensar borda esquerda para alinhamento perfeito */
  width: calc(100% + 2px) !important; /* Compensar ambas as bordas laterais */
  margin: 0 !important; 
  padding: 0 !important; 
  z-index: 99999999 !important; /* Z-index muito alto para sobrepor menu e botão */
  box-sizing: border-box !important;
  
  /* ✅ INTEGRAÇÃO VISUAL PERFEITA - Borda laranja + fundo igual */
  border: 1px solid var(--search-border-color) !important; /* Borda laranja para combinar com a caixa */
  border-top: 1px solid #f0f0f0 !important; /* Linha separadora cinza */
  box-shadow: none !important; /* Sem sombra para evitar diferença de tom */
  border-top-left-radius: 0 !important; /* Remover raio superior esquerdo */
  border-top-right-radius: 0 !important; /* Remover raio superior direito */
  border-bottom-left-radius: var(--search-border-radius) !important; /* Usar mesmo raio da caixa */
  border-bottom-right-radius: var(--search-border-radius) !important;
  background: var(--search-background) !important; /* ✅ CORREÇÃO: Mesmo background da search-box */
  /* box-shadow removido para consistência */
}

/* Forçar visível quando classe visible */
.search-box-modular .search-suggestions.visible {
  display: block !important;
}

/* ===== CONTINUIDADE VISUAL (ESTILO GOOGLE SEARCH) ===== */
/* Caixa de busca quando dropdown está visível - remover cantos inferiores */
.search-box-modular.dropdown-attached .search-input-wrapper {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: transparent !important; /* Remover borda padrão */
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1) !important; /* Sombra apenas nas laterais e topo */
  position: relative;
}

/* Linha separadora criada via ::after na caixa de busca */

/* Específico para landing - ajustar continuidade */
.search-box-modular[data-context="landing"].dropdown-attached .search-input-wrapper {
  border-bottom-color: transparent !important; /* Usar pseudo-elemento ao invés */
}

/* Dropdown com continuidade visual */
.search-box-modular .search-suggestions {
  border-top: 1px solid #f0f0f0 !important; /* Linha separadora cinza */
  border-top-left-radius: 0 !important; /* Remover cantos superiores */
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--search-border-radius) !important; /* Usar mesmo raio da caixa */
  border-bottom-right-radius: var(--search-border-radius) !important;
  
  /* CORREÇÃO: Borda unificada igual à caixa de busca */
  border: 1px solid var(--search-border-color) !important;
  border-top: none !important; /* Remover apenas o top para continuidade */
}

.search-box-modular .suggestions-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.6rem 0.25rem 1.6rem; /* CORREÇÃO: Usar mesmo padding horizontal da caixa de busca */
  /* ✅ ALINHAMENTO: Forçar lista à esquerda independente do container pai */
  text-align: left !important;
}

.search-box-modular .suggestion-item {
  padding: 0.4rem 0; /* ✅ OTIMIZADO: Espaçamento reduzido entre sugestões */
  cursor: pointer;
  min-height: 36px; /* ✅ ACESSIBILIDADE: Touch target mínimo */
  
  /* ✅ PROTEÇÃO CONTRA BACKDROP-FILTER */
  transform: translateZ(0) !important; /* Criar nova pilha de contexto 3D */
  border-bottom: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  /* ✅ CORREÇÃO: Garantir que nenhum item tenha destaque automático */
  background: transparent !important;
  outline: none !important;
  /* ✅ ALINHAMENTO: Forçar texto à esquerda independente do container pai */
  text-align: left !important;
}

/* ✅ CORREÇÃO: Prevenir destaque automático em qualquer item */
.search-box-modular .suggestion-item:first-child,
.search-box-modular .suggestion-item:nth-child(1),
.search-box-modular .suggestion-item:first-of-type {
  background: transparent !important;
  color: inherit !important;
}

/* ✅ CORREÇÃO: Remover qualquer auto-focus que possa estar sendo aplicado */
.search-box-modular .suggestion-item:focus,
.search-box-modular .suggestion-item.active,
.search-box-modular .suggestion-item.selected,
.search-box-modular .suggestion-item[aria-selected="true"] {
  background: transparent !important;
  color: inherit !important;
  outline: none !important;
}

/* ✅ ESPECIFICIDADE MÁXIMA: Garantir que NENHUM estilo de destaque seja aplicado */
html body .search-box-modular .suggestion-item,
html body .search-box-modular .suggestion-item:first-child,
html body .search-box-modular .suggestion-item:first-of-type,
html body .search-box-modular .suggestion-item.active,
html body .search-box-modular .suggestion-item.selected,
html body .search-box-modular .suggestion-item[style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
  color: #555 !important;
}

/* ✅ HOVER funciona normalmente - apenas quando o usuário realmente faz hover */
html body .search-box-modular .suggestion-item:hover:not(.no-hover) {
  background: #fff5eb !important;
  background-color: #fff5eb !important;
  color: var(--search-primary-color) !important;
}


.search-box-modular .suggestion-item:last-child {
  border-bottom: none;
}

.search-box-modular .suggestion-text {
  font-size: var(--search-font-size);
  color: #555;
  flex: 1;
  /* ✅ ALINHAMENTO: Garantir texto à esquerda */
  text-align: left !important;
}

.search-box-modular .suggestion-item:hover .suggestion-text {
  color: var(--search-primary-color);
  font-weight: 500;
}

.search-box-modular .empty-dropdown {
  padding: 0.75rem 0.9375rem;
  text-align: center;
  color: #555;
  background: white;
}

.search-box-modular .empty-dropdown small {
  font-size: 0.75rem;
  color: #777;
  font-style: italic;
}

/* ===== CHIPS COMPLETOS NO DROPDOWN ===== */
.search-box-modular .dropdown-chips-full {
  background: white; /* CORREÇÃO: Fundo branco para continuidade */
  padding: 0.4rem 1.6rem; /* CORREÇÃO: Usar mesmo padding horizontal da caixa de busca */
  border-bottom: 1px solid #f0f0f0; /* Borda mais sutil para divisão interna */
  overflow-x: hidden; /* Prevenir overflow horizontal */
  box-sizing: border-box;
}

.search-box-modular .dropdown-chips-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.1rem;
  align-items: flex-start;
  max-width: 100%; /* Respeitar largura do container */
  box-sizing: border-box;
}

.search-box-modular .dropdown-chip-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f18719;
  border-radius: 1rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #ffffff;
  transition: all 0.2s ease;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0;
  box-sizing: border-box;
  vertical-align: baseline;
  cursor: default;
  max-width: calc(100% - 2px); /* Não ultrapassar container, descontando bordas */
  overflow: hidden; /* Esconder overflow de texto */
}

.search-box-modular .dropdown-chip-full:hover {
  background: var(--search-chip-bg);
  border-color: var(--search-primary-hover);
  transform: translateX(2px);
}

.search-box-modular .chip-full-text {
  flex-shrink: 1; /* Permitir encolher se necessário */
  white-space: nowrap;
  margin-right: 0.25rem;
  font-size: inherit;
  line-height: inherit;
  max-width: calc(100% - 1.5rem); /* Espaço para o botão X */
  overflow: hidden;
  text-overflow: ellipsis; /* Adicionar ... para textos longos */
}

.search-box-modular .remove-chip-dropdown {
  background: transparent;
  border: 1px solid transparent;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  flex-shrink: 0;
  align-content: center;
}

.search-box-modular .remove-chip-dropdown:hover {
  background: rgba(211, 47, 47, 0.1);
  border-color: #d32f2f;
  color: #d32f2f;
  transform: rotate(90deg);
}

.search-box-modular .chips-remaining {
  font-size: 0.6875rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: center;
  font-style: italic;
}

.search-box-modular .chips-limit-reached {
  font-size: 0.6875rem;
  color: var(--search-primary-color);
  margin-top: 0.5rem;
  text-align: center;
  font-weight: 600;
}

.search-box-modular .dropdown-divider {
  height: 0.0625rem;
  background: #e0e0e0;
  margin: 0;
}

/* ===== MENSAGEM DE LIMITE ===== */
.search-box-modular .limit-message {
  padding: 1.25rem 0.9375rem;
  text-align: center;
  background: #fff5eb;
  border: 1px solid var(--search-primary-color);
  border-radius: 0.5rem;
  margin: 0.625rem;
}

.search-box-modular .limit-message p {
  margin: 0 0 0.3125rem 0;
  font-size: 0.875rem;
  color: var(--search-primary-color);
  font-weight: 600;
}

.search-box-modular .limit-message small {
  font-size: 0.75rem;
  color: #777;
}

/* ===== INSTRUÇÕES DO DROPDOWN VAZIO ===== */
.search-box-modular .dropdown-instructions {
  padding: 1rem 1.5rem;
  text-align: center;
  color: #555;
}

.search-box-modular .instruction-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;
}

.search-box-modular .instruction-icon {
  font-size: 1.1rem;
}

.search-box-modular .instruction-example {
  font-size: 0.8125rem;
  color: #777;
  font-style: italic;
}

/* ===== MENSAGEM "NENHUMA SUGESTÃO" ===== */
.search-box-modular .no-results {
  padding: 1rem;
  text-align: center;
  color: #666;
  font-style: italic;
  font-size: 0.875rem;
}

/* Ações da busca removidas - botões externos ao componente */

/* ===== ESTADOS DO COMPONENTE ===== */

/* Estado Expandido */
.search-box-modular.expanded .search-container {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.search-box-modular.expanded .compact-indicator {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Estado Retraído */
.search-box-modular.collapsed .search-container {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.search-box-modular.collapsed .compact-indicator {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Ajustes para telas menores (< 768px) - Mobile first */
@media (max-width: 767px) {
  .search-box-modular .compact-indicator {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    padding: 0.4rem 0.8rem;
    min-height: 2.5rem;
  }
  
  .search-box-modular[data-context="index"].expanded {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;
    height: var(--header-height) !important;
    background: white !important;
    transform: none !important;
  }
}

/* Desktop/Tablets grandes */
@media (min-width: 1025px) {
  .search-box-modular[data-context="index"].expanded {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 1300px !important;
    top: 0 !important;
    height: var(--header-height) !important;
    background: white !important;
    transform: none !important;
  }
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  /* ===== TABLET: LANDING - Transição suave para desktop ===== */
  .search-box-modular[data-context="landing"] {
    max-width: min(700px, calc(100vw - 60px)) !important; /* ✅ TABLET: Margens maiores */
  }
  
  .search-box-modular[data-context="landing"] .search-input-wrapper {
    max-width: min(700px, calc(100vw - 60px)) !important; /* ✅ TABLET: Margens maiores */
    margin: 0 auto !important; /* ✅ CENTRALIZAÇÃO: Usar auto para centralizar */
  }
  
  .search-box-modular .search-input-wrapper {
    min-height: 2.75rem; /* ✅ AJUSTADO: Mesma altura mínima da caixa retraída */
  }
  
  .search-box-modular .search-title {
    font-size: 1rem;
  }
  
  .search-box-modular[data-context="index"].expanded {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;
    height: var(--header-height) !important;
    background: white !important;
    transform: none !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  
  /* ===== MOBILE: LANDING - Largura responsiva até 700px ===== */
  .search-box-modular[data-context="landing"] {
    width: 100% !important; /* ✅ FIX ANDROID: Usar 100% ao invés de 100vw */
    max-width: min(700px, calc(100vw - 30px)) !important; /* ✅ RESPONSIVO: Crescer até 700px máximo */
     /* ✅ FIX ANDROID: Remover margens negativas */
  }
  
  .search-box-modular[data-context="landing"] .search-input-wrapper {
    width: 100% !important; /* ✅ CORRIGIDO: Usar largura total disponível */
    max-width: min(700px, calc(100vw - 30px)) !important; /* ✅ RESPONSIVO: Crescer até 700px */
    margin: 0 auto !important; /* ✅ CENTRALIZAÇÃO: Usar auto para centralizar sem margens fixas */
    box-sizing: border-box !important;
  }
  
  /* ===== MOBILE: Comportamento Expandido ===== */
  .search-box-modular[data-context="index"].expanded {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;
    height: var(--header-height) !important;
    background: white !important;
    transform: none !important;
    z-index: 10001 !important;
  }
  
  .search-box-modular[data-context="landing"].expanded .search-container {
    background: white;
    width: 100%;
    max-width: 700px; /* ✅ CORRIGIDO: Usar mesmo máximo do desktop */
    margin-top: 0; /* ✅ CORRIGIDO: Removido 10vh que causava espaçamento excessivo */
  }
  
  .search-box-modular[data-context="index"].expanded .search-input-wrapper {
    border-radius: 0.75rem;
    min-height: 2.75rem !important; /* ✅ AJUSTADO: Mesma altura mínima da caixa retraída */
    padding: var(--search-padding) !important; /* ✅ Usar padding padrão */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* ✅ CORREÇÃO: Manter consistência com desktop */
  html body .search-box-modular.expanded .search-box-content,
  .search-box-modular.expanded .search-input-wrapper .search-box-content {
    margin: 0 !important; /* Sem margens */
    padding: 0 !important; /* Padding controlado pelo wrapper */
  }
  
  .search-box-modular.expanded .btn-close-search {
    display: flex;
  }
  
  /* ===== MOBILE: Compact Indicator ===== */
  .search-box-modular.collapsed .compact-indicator {
    min-height: 1.75rem;
    font-size: 0.9375rem;
  }
  
  /* ===== MOBILE: Ajustes de chips ===== */
  html body .search-box-modular .filter-chip,
  .search-box-modular .selected-filters-chips .filter-chip {
    font-size: 0.8125rem !important;
    padding: 0.2rem 0.4rem !important; /* Manter consistência com desktop */
    height: 1.375rem !important; /* Manter consistência com desktop */
  }
  
  /* ===== MOBILE: Dropdown sugestões ===== */
  .search-box-modular .search-suggestions {
    height: auto !important; /* ✅ MOBILE: Altura variável baseada no conteúdo */
    max-height: 220px !important; /* ✅ MOBILE: Limite máximo reduzido para telas menores */
  }
  
  .search-box-modular.expanded .search-suggestions {
    border-radius: 0.5rem;
  }
}

/* Mobile pequeno (< 480px) */
@media (max-width: 480px) {
  /* Ajustes para telas muito pequenas */
  .search-box-modular .compact-indicator {
    width: calc(100% - 20px);
    margin-left: 1px;
    margin-right: 1px;
    max-width: calc(100vw - 20px);
    font-size: 0.875rem;
  }
  
  .search-box-modular[data-context="index"].expanded {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;
    height: var(--header-height) !important;
    background: white !important;
    transform: none !important;
  }
  
  .search-box-modular[data-context="index"].expanded .search-input-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .search-box-modular .search-title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
}

/* ===== ACESSIBILIDADE ===== */
@media (prefers-reduced-motion: reduce) {
  .search-box-modular,
  .search-box-modular * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== MODO ESCURO (preparado para futuro) ===== */
@media (prefers-color-scheme: dark) {
  .search-box-modular {
    --search-background: #ffffff;
    --search-chip-bg: #f18719;
    color: #ffffff;
  }
  
  .search-box-modular .search-input {
    color: #f18719;
  }
  
  .search-box-modular .search-input::placeholder {
    color: #aaa;
  }
  
  .search-box-modular .suggestions-list {
    border-color: #555;
  }
  
  .search-box-modular .suggestion-item:hover {
    background: #3d3d3d;
  }
}

/* ===== CONTEXTOS ESPECÍFICOS ===== */

/* Contexto Landing - Largura máxima limitada a 700px */
.search-box-modular[data-context="landing"] {
  width: 100%; /* Largura total do container */
  max-width: 700px; /* ✅ LIMITED WIDTH: Máximo 700px para melhor usabilidade */
  margin: 0 auto; /* ✅ ADICIONADO: Centralizar como o menu */
  margin-top: 0 !important; /* ✅ FORÇADO: Zero margin superior para eliminar espaçamento com título */
  box-sizing: border-box; /* ✅ ADICIONADO: Incluir padding/border */
  display: block; /* ✅ CENTRALIZAÇÃO: Garantir display block para margin auto funcionar */
}

/* No landing, nunca mostrar indicador compacto */
.search-box-modular[data-context="landing"] .compact-indicator {
  display: none !important;
}

/* No landing, sempre mostrar container de busca */
.search-box-modular[data-context="landing"] .search-container {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ✅ LIMITED WIDTH: Wrapper com máximo 700px */
.search-box-modular[data-context="landing"] .search-input-wrapper {
  width: 100%; /* Largura total disponível */
  max-width: 700px; /* ✅ LIMITED WIDTH: Máximo 700px */
  margin: 0 auto; /* ✅ CENTRALIZAÇÃO: Centralizar automaticamente */
  box-sizing: border-box; /* Incluir padding/border no cálculo */
  background: #ffffff !important; /* Fundo branco */
  display: block; /* ✅ CENTRALIZAÇÃO: Garantir display block */
}

/* Contexto Index (Header) */
.search-box-modular[data-context="index"] {
  /* Estado inicial retraído */
  --search-border-radius: 30px; /* ✅ CORREÇÃO: Border-radius menor para o index (8px) */
}

/* Garantir border-radius correto no indicador compacto do index */
.search-box-modular[data-context="index"] .compact-indicator {
  border-radius: var(--search-border-radius) !important;
}

/* Garantir border-radius correto no dropdown do index */
.search-box-modular[data-context="index"] .search-suggestions {
  border-bottom-left-radius: var(--search-border-radius) !important;
  border-bottom-right-radius: var(--search-border-radius) !important;
  z-index: 999999999 !important; /* ✅ CORREÇÃO: Z-index máximo para dropdown index ficar acima do backdrop-filter */
  
  /* ✅ ISOLAR DO BACKDROP-FILTER: Forçar nova pilha de contexto */
  transform: translateZ(0) !important; /* Criar nova pilha de contexto 3D */
  will-change: transform !important; /* Otimização GPU */
  isolation: isolate !important; /* Isolar do backdrop-filter do overlay */
  
  /* ✅ CRÍTICO: Forçar altura variável e overflow específicos para index context */
  height: auto !important; /* Altura variável baseada no conteúdo */
  max-height: 240px !important; /* Limite máximo para 5 sugestões */
  overflow-y: auto !important; /* Forçar scroll vertical */
  overflow-x: hidden !important; /* Sem scroll horizontal */
  overflow: auto hidden !important; /* Y=auto, X=hidden - mais específico que regras separadas */
  
  /* ✅ BORDA LARANJA: Integração visual com a caixa expandida */
  border: 1px solid var(--search-primary-color) !important;
  border-top: 1px solid #f0f0f0 !important; /* Linha separadora cinza */
}

/* ✅ CONTINUIDADE VISUAL: Garantir que a caixa expandida no index tenha borda laranja quando dropdown está ativo */
.search-box-modular[data-context="index"].dropdown-attached .search-input-wrapper {
  border-color: var(--search-primary-color) !important; /* Borda laranja para combinar com o dropdown */
  border-bottom-color: transparent !important; /* Usar pseudo-elemento ao invés */
}

/* ✅ CORREÇÃO CRÍTICA: Suggestion items devem ter z-index alto para serem clicáveis */
.search-box-modular[data-context="index"] .suggestion-item {
  position: relative !important;
  z-index: 99999999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: white !important; /* ✅ GARANTIR: Fundo branco sólido para cada item */
}

/* ✅ NOVA REGRA: Garantir que dropdown do index fique SEMPRE acima do overlay */
.search-box-modular[data-context="index"] .search-suggestions.visible,
.search-box-modular[data-context="index"] .search-suggestions[style*="display: block"] {
  z-index: 9999999999 !important; /* ✅ Z-index ainda maior que antes */
  background: white !important; /* ✅ Fundo branco sólido */
  position: absolute !important; /* ✅ Posicionamento absoluto */
  pointer-events: auto !important; /* ✅ Garantir cliques */
  isolation: isolate !important; /* ✅ Isolar do overlay */
  transform: translateZ(1000px) !important; /* ✅ Forçar camada 3D muito alta */
}

/* No index, começar retraído - Usar classe collapsed */
.search-box-modular[data-context="index"].collapsed .search-container {
  display: none;
}

.search-box-modular[data-context="index"].collapsed .compact-indicator {
  display: flex;
  justify-content: center;
}

/* No index expandido, garantir que container apareça com alta prioridade */
.search-box-modular[data-context="index"].expanded .search-container {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important; /* Permitir dropdown escapar */
}

.search-box-modular[data-context="index"].expanded .compact-indicator {
  display: none;
}

/* Estado expandido no index - ocupa todo o header com fundo branco */
.search-box-modular[data-context="index"].expanded {
  position: fixed !important; /* Fixed para garantir posição relativa ao viewport */
  top: 0 !important; /* Alinhar com topo do header */
  left: 0 !important; /* Ocupar largura total */
  right: 0 !important; /* Ocupar largura total */
  height: var(--header-height) !important; /* Altura total do header (60px) */
  width: 100vw !important; /* Largura total da tela */
  background: #888889 !important; /* Fundo escuro para todo o header quando expandido */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* ✅ Mesma sombra do header para altura visual consistente */
  z-index: 10000 !important; /* ACIMA do overlay (9995) para ficar visível */
  box-sizing: border-box !important;
  overflow: visible !important; /* ✅ CRITICAL: Permitir dropdown escapar completamente */
  contain: none !important; /* ✅ CRITICAL: Não conter elementos filhos */
  transform: none !important; /* Remover centralização vertical */
}

.search-box-modular[data-context="index"].expanded .search-container {
  position: relative;
  z-index: 10001 !important; /* ACIMA do overlay para ficar visível */
  width: 100% !important;
  height: 100% !important; /* Ocupar altura total do header */
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important; /* Flexbox para centralização */
  align-items: center !important; /* Centralizar verticalmente */
  padding: 0 10px !important; /* Margem lateral */
  overflow: visible !important; /* ✅ CRITICAL: Permitir dropdown escapar */
  contain: none !important; /* ✅ CRITICAL: Não conter elementos filhos */
  align-content: center;
}

.search-box-modular[data-context="index"].expanded .search-input-wrapper {
  width: 100% !important; /* Ocupar 100% da largura disponível no flexbox */
  flex: 1 !important; /* Expandir para ocupar todo espaço disponível */
  margin: 0 !important; /* Remover margens */
  height: 44px !important; /* Altura fixa do input */
  min-height: 44px !important; /* Altura mínima do input */
  animation: expandWidth 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 10002 !important; /* ACIMA do container para ficar visível */
  background: var(--search-background) !important;
  box-sizing: border-box !important; /* Incluir padding e border no cálculo */
  border-radius: var(--search-border-radius) !important; /* ✅ CORREÇÃO: Aplicar border-radius do contexto */
  overflow: visible !important; /* ✅ CRITICAL: Permitir dropdown escapar */
  contain: none !important; /* ✅ CRITICAL: Não conter elementos filhos */
}

/* Garantir ícones SEMPRE visíveis em TODOS os contextos e estados */
.search-box-modular .search-icon,
.search-box-modular .dropdown-arrow,
.search-box-modular[data-context="index"] .search-icon,
.search-box-modular[data-context="index"] .dropdown-arrow,
.search-box-modular[data-context="landing"] .search-icon,
.search-box-modular[data-context="landing"] .dropdown-arrow,
.search-box-modular[data-context="index"].expanded .search-icon,
.search-box-modular[data-context="index"].expanded .dropdown-arrow,
.search-box-modular[data-context="index"].collapsed .search-icon,
.search-box-modular[data-context="index"].collapsed .dropdown-arrow {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10001 !important; /* Z-index muito alto para sobrepor tudo */
  position: absolute !important;
}

/* Posicionamento específico dos ícones */
.search-box-modular .search-icon,
.search-box-modular[data-context="index"] .search-icon,
.search-box-modular[data-context="landing"] .search-icon {
  left: 5px !important;
}

.search-box-modular .dropdown-arrow,
.search-box-modular[data-context="index"] .dropdown-arrow,
.search-box-modular[data-context="landing"] .dropdown-arrow {
  right: 5px !important;
}

/* OVERRIDE EXTREMO: Forçar prioridade máxima sobre qualquer CSS externo */
body .search-box-modular svg.search-icon,
body .search-box-modular svg.dropdown-arrow,
html body .search-box-modular svg.search-icon,
html body .search-box-modular svg.dropdown-arrow {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  z-index: 10001 !important;
  fill: none !important;
  stroke: var(--search-primary-color) !important;
  stroke-width: 2 !important;
}

/* No index, o input wrapper não tem largura total por padrão */
.search-box-modular[data-context="index"]:not(.expanded) .search-input-wrapper {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Animação de expansão */
@keyframes expandWidth {
  from {
    width: 15.625rem;
    opacity: 0.8;
    transform: scale(0.95);
  }
  to {
    width: 100%;
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== FIXES ESPECÍFICOS iOS/ANDROID ===== */

/* iOS WebKit fixes */
@supports (-webkit-touch-callout: none) {
  .search-box-modular .search-input-wrapper {
    -webkit-appearance: none;
    -webkit-border-radius: var(--search-border-radius);
  }
  
  .search-box-modular .search-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
  }
}

/* Android Chrome fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .search-box-modular.expanded .search-suggestions {
    transform: translateZ(0); /* Force GPU acceleration */
  }
}

/* ===== SEÇÃO DE ISOLAMENTO - NEUTRALIZAR CSS EXTERNOS ===== */
/* Esta seção garante que o SearchBoxModular seja completamente autônomo */
/* e não seja afetado por CSS de outros arquivos como landing.css ou header-buskpe-flex.css */

/* Reset e isolamento de ícones de busca - máxima especificidade */
.search-box-modular .search-icon:not(.external-override),
.search-box-modular svg.search-icon:not(.external-override),
body .search-box-modular .search-icon:not(.external-override),
body .search-box-modular svg.search-icon:not(.external-override),
html body .search-box-modular .search-icon:not(.external-override),
html body .search-box-modular svg.search-icon:not(.external-override),
html body div.search-box-modular svg.search-icon:not(.external-override) {
  /* Posicionamento absoluto forçado */
  position: absolute !important;
  left: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  
  /* Tamanho fixo */
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  
  /* Visibilidade garantida */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10001 !important;
  
  /* Cores do SVG */
  color: var(--search-primary-color) !important;
  fill: none !important;
  stroke: var(--search-primary-color) !important;
  stroke-width: 2 !important;
  
  /* Reset de estilos externos */
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* Interatividade */
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Reset e isolamento de seta dropdown - máxima especificidade */
.search-box-modular .dropdown-arrow:not(.external-override),
.search-box-modular svg.dropdown-arrow:not(.external-override),
body .search-box-modular .dropdown-arrow:not(.external-override),
body .search-box-modular svg.dropdown-arrow:not(.external-override),
html body .search-box-modular .dropdown-arrow:not(.external-override),
html body .search-box-modular svg.dropdown-arrow:not(.external-override),
html body div.search-box-modular svg.dropdown-arrow:not(.external-override) {
  /* Posicionamento absoluto forçado */
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  
  /* Tamanho fixo */
  width: 0.9375rem !important;
  height: 0.9375rem !important;
  min-width: 0.9375rem !important;
  min-height: 0.9375rem !important;
  max-width: 0.9375rem !important;
  max-height: 0.9375rem !important;
  
  /* Visibilidade garantida */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10001 !important;
  
  /* Cores do SVG */
  color: var(--search-primary-color) !important;
  fill: none !important;
  stroke: var(--search-primary-color) !important;
  stroke-width: 2 !important;
  
  /* Reset de estilos externos */
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* Interatividade */
  pointer-events: auto !important;
  cursor: pointer !important;
  
  /* Transição */
  transition: transform 0.3s ease !important;
}

/* Estado hover da seta */
.search-box-modular .dropdown-arrow:hover:not(.external-override),
html body .search-box-modular .dropdown-arrow:hover:not(.external-override) {
  transform: translateY(-50%) scale(1.1) !important;
  stroke: var(--search-primary-hover) !important;
}

/* Garantir que SVG polyline dentro da seta seja visível */
.search-box-modular .dropdown-arrow polyline,
.search-box-modular svg.dropdown-arrow polyline,
html body .search-box-modular svg.dropdown-arrow polyline {
  stroke: var(--search-primary-color) !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* Garantir que SVG path e circle dentro da lupa sejam visíveis */
.search-box-modular .search-icon circle,
.search-box-modular .search-icon path,
.search-box-modular svg.search-icon circle,
.search-box-modular svg.search-icon path,
html body .search-box-modular svg.search-icon circle,
html body .search-box-modular svg.search-icon path {
  stroke: var(--search-primary-color) !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* ÚLTIMA CAMADA DE PROTEÇÃO: Prevenir qualquer override de display */
.search-box-modular svg[class*="icon"],
.search-box-modular svg[class*="arrow"],
html body .search-box-modular svg[class*="icon"],
html body .search-box-modular svg[class*="arrow"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Menu horizontal no landing - controlado por floating-widget.css */
/* Removido daqui para evitar conflitos de CSS */

/* Garantir que a caixa de busca fique na frente durante a animação */
.landing-page .search-box-container {
    position: relative;
    z-index: 2; /* Caixa de busca na frente */
}

/* ===== NEUTRALIZAÇÃO DE CSS EXTERNOS - CHIPS DO SEARCH BOX ===== */
/* IMPORTANTE: Combater estilos do header-buskpe-flex.css que interferem nos chips */

/* OVERRIDE FINAL - Chips do SearchBoxModular com máxima especificidade */
html body div.search-box-modular .filter-chip,
html body div.search-box-modular .selected-filters-chips .filter-chip,
html body .search-box-modular div.selected-filters-chips .filter-chip {
  /* Estado normal - manter cores originais do SearchBoxModular */
  background: #f18719 !important;
  color: #ffffff !important;
}

/* OVERRIDE FINAL - Hover dos chips do SearchBoxModular */
html body div.search-box-modular .filter-chip:hover,
html body div.search-box-modular .selected-filters-chips .filter-chip:hover,
html body .search-box-modular div.selected-filters-chips .filter-chip:hover,
div.search-box-modular .filter-chip:hover,
div.search-box-modular .selected-filters-chips .filter-chip:hover {
  background: var(--search-primary-color) !important;
  border-color: var(--search-primary-color) !important;
  color: white !important;
  transform: translateY(-0.0625rem) !important;
}

/* OVERRIDE FINAL - Chips ativos/clicados do SearchBoxModular */
html body div.search-box-modular .filter-chip:active,
html body div.search-box-modular .filter-chip.selected,
html body div.search-box-modular .filter-chip.active,
html body div.search-box-modular .selected-filters-chips .filter-chip:active,
html body div.search-box-modular .selected-filters-chips .filter-chip.selected,
html body div.search-box-modular .selected-filters-chips .filter-chip.active,
div.search-box-modular .filter-chip:active,
div.search-box-modular .filter-chip.selected,
div.search-box-modular .filter-chip.active,
div.search-box-modular .selected-filters-chips .filter-chip:active,
div.search-box-modular .selected-filters-chips .filter-chip.selected,
div.search-box-modular .selected-filters-chips .filter-chip.active {
  background: var(--search-primary-color) !important;
  border-color: var(--search-primary-color) !important;
  color: white !important;
  transform: translateY(-0.0625rem) !important;
}

/* ✅ CORREÇÃO FINAL: Forçar overflow e altura variável no dropdown index - MÁXIMA ESPECIFICIDADE */
html body div.search-box-modular[data-context="index"] .search-suggestions {
  height: auto !important; /* Altura variável baseada no conteúdo */
  max-height: 240px !important; /* Limite máximo para 5 sugestões */
  overflow-y: auto !important; /* Scroll vertical obrigatório */
  overflow-x: hidden !important; /* Sem scroll horizontal */
}

/* ✅ ESPECIFICIDADE MÁXIMA: Para sobrepor qualquer regra do header-buskpe-flex.css */
html body div.search-box-modular[data-context="index"] div.search-suggestions.visible {
  height: auto !important; /* Altura variável baseada no conteúdo */
  max-height: 240px !important; /* Limite máximo para 5 sugestões */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}