/* ✅ CORREÇÃO CRÍTICA: Forçar overflow correto no dropdown de sugestões */
/* Este arquivo deve ser carregado por último para sobrepor todos os conflitos */

/* ✅ CORREÇÃO CRÍTICA: Forçar posicionamento correto do dropdown no INDEX */
html body div.search-box-modular[data-context="index"] div#searchSuggestions,
html body div.search-box-modular[data-context="index"] #searchSuggestions.visible,
html body .search-box-modular[data-context="index"] #searchSuggestions[style*="display: block"],
body .search-box-modular[data-context="index"] #searchSuggestions,
.search-box-modular[data-context="index"] #searchSuggestions,
#searchSuggestions.search-suggestions,
div#searchSuggestions.search-suggestions {
  /* ✅ POSICIONAMENTO CRÍTICO: Sempre absolute sobrepondo 1px para continuidade */
  position: absolute !important;
  top: calc(100% - 1px) !important; /* Sobrepor 1px para continuidade visual */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  
  /* ✅ Z-INDEX CRÍTICO: Muito alto para ficar acima do menu horizontal */
  z-index: 9999999 !important;
  
  /* ✅ ALTURA VARIÁVEL COM LIMITE MÁXIMO */
  height: auto !important; /* Altura automática baseada no conteúdo */
  max-height: 240px !important; /* Limite máximo para 5 sugestões */
  min-height: auto !important; /* Sem altura mínima forçada */
  
  /* ✅ OVERFLOW FORÇADO - Múltiplas declarações para garantir */
  overflow: auto hidden !important; /* Shorthand mais específico */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* ✅ GARANTIR QUE O ELEMENTO PODE ROLAR */
  -webkit-overflow-scrolling: touch !important; /* iOS smooth scroll */
  scrollbar-width: thin !important; /* Firefox */
  
  /* ✅ BOX MODEL CORRETO */
  box-sizing: border-box !important;
  
  /* ✅ FORÇAR REFLOW PARA APLICAR MUDANÇAS */
  contain: layout style !important;
  will-change: scroll-position !important;
  
  /* ✅ GARANTIR VISIBILIDADE */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* ✅ INTEGRAÇÃO VISUAL: Remover border-radius superior para continuidade */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
  
  /* ✅ BORDA: Remover borda superior para continuidade perfeita */
  border-top: none !important;
  border-left: 1px solid #e0e0e0 !important;
  border-right: 1px solid #e0e0e0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* ✅ ESPECIFICIDADE MÁXIMA: Múltiplos seletores para garantir precedência CLASSE */
html body div.search-box-modular[data-context="index"] div.search-suggestions,
html body div.search-box-modular[data-context="index"] .search-suggestions.visible,
html body .search-box-modular[data-context="index"] .search-suggestions[style*="display: block"],
body .search-box-modular[data-context="index"] .search-suggestions,
.search-box-modular[data-context="index"] .search-suggestions {
  /* ✅ Z-INDEX CRÍTICO: Acima do menu horizontal */
  z-index: 99999 !important;
  position: absolute !important;
  /* ✅ ALTURA VARIÁVEL COM LIMITE MÁXIMO */
  height: auto !important; /* Altura automática baseada no conteúdo */
  max-height: 240px !important; /* Limite máximo para 5 sugestões */
  min-height: auto !important; /* Sem altura mínima forçada */
  
  /* ✅ OVERFLOW FORÇADO - Múltiplas declarações para garantir */
  overflow: auto hidden !important; /* Shorthand mais específico */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* ✅ GARANTIR QUE O ELEMENTO PODE ROLAR */
  -webkit-overflow-scrolling: touch !important; /* iOS smooth scroll */
  scrollbar-width: thin !important; /* Firefox */
  
  /* ✅ BOX MODEL CORRETO */
  box-sizing: border-box !important;
  
  /* ✅ FORÇAR REFLOW PARA APLICAR MUDANÇAS */
  contain: layout style !important;
  will-change: scroll-position !important;
  
  /* ✅ INTEGRAÇÃO VISUAL PERFEITA NO INDEX - ALTA ESPECIFICIDADE */
  border: 1px solid var(--search-border-color, rgb(244, 111, 9)) !important; /* Borda laranja */
  border-top: none !important; /* Remover borda superior para continuidade */
  background: var(--search-background, rgb(255, 255, 255)) !important; /* Background consistente */
  border-top-left-radius: 0 !important; /* Remover raios superiores */
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 30px !important; /* Raios inferiores */
  border-bottom-right-radius: 30px !important;
  box-shadow: none !important; /* Sem sombra para evitar diferença visual */
}

/* ✅ FALLBACK: Regra com ainda mais especificidade usando atributos */
html body div[class*="search-box-modular"][data-context="index"] div[class*="search-suggestions"] {
  /* ✅ Z-INDEX CRÍTICO: Acima do menu horizontal */
  z-index: 99999 !important;
  position: absolute !important;
  height: auto !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* ✅ INTEGRAÇÃO VISUAL FALLBACK */
  border: 1px solid rgb(244, 111, 9) !important;
  border-top: none !important;
  background: rgb(255, 255, 255) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
  box-shadow: none !important;
}

/* ✅ OVERRIDE AGRESSIVO: Reset de qualquer overflow visible herdado */
.search-box-modular[data-context="index"] .search-suggestions * {
  /* Não herdar overflow visible dos pais */
}

/* ✅ FORÇA MÁXIMA: Targeting por ID específico no INDEX com bordas laranjas */
html body [data-context="index"] #searchSuggestions,
html body .search-box-modular[data-context="index"] #searchSuggestions,
#searchSuggestions {
  /* ✅ Z-INDEX CRÍTICO: Acima do menu horizontal */
  z-index: 99999 !important;
  position: absolute !important;
  border: 1px solid rgb(244, 111, 9) !important;
  border-top: 0px solid transparent !important;
  background: rgb(255, 255, 255) !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom-left-radius: var(--search-border-radius, 30px) !important;
  border-bottom-right-radius: var(--search-border-radius, 30px) !important;
  box-shadow: none !important;
}

/* ✅ SUPER ESPECÍFICO: Forçar com todos os possíveis seletores */
[data-context="index"] #searchSuggestions.search-suggestions,
.search-box-modular[data-context="index"] div#searchSuggestions.search-suggestions,
html body div.search-box-modular[data-context="index"] div#searchSuggestions.search-suggestions {
  /* ✅ Z-INDEX CRÍTICO: Acima do menu horizontal */
  z-index: 99999 !important;
  position: absolute !important;
  border-left: 1px solid rgb(244, 111, 9) !important;
  border-right: 1px solid rgb(244, 111, 9) !important;
  border-bottom: 0px !important;
  border-top: none !important;
  border-top-width: 0px !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  background-color: rgb(255, 255, 255) !important;
}

/* ✅ CONTINUIDADE VISUAL INDEX: Remover cantos inferiores da caixa quando dropdown visível */
html body div.search-box-modular[data-context="index"].dropdown-attached .search-input-wrapper,
.search-box-modular[data-context="index"].dropdown-attached .search-input-wrapper {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1) !important;
}

/* ✅ ANTI-OPACIDADE: Garantir que dropdown não seja afetado por backdrop-filter do menu */
.search-box-modular[data-context="index"] .search-suggestions,
.search-box-modular[data-context="index"] .search-suggestions.visible,
#searchSuggestions {
  /* ✅ ISOLAMENTO COMPLETO: Criar nova pilha de contexto */
  isolation: isolate !important;
  transform: translateZ(10000px) !important;
  will-change: transform !important;
  /* ✅ GARANTIR OPACIDADE TOTAL */
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ✅ FORÇAR SCROLL EM WEBKIT */
.search-box-modular[data-context="index"] .search-suggestions::-webkit-scrollbar {
  width: 6px !important;
  display: block !important;
}

.search-box-modular[data-context="index"] .search-suggestions::-webkit-scrollbar-track {
  background: transparent !important;
}

.search-box-modular[data-context="index"] .search-suggestions::-webkit-scrollbar-thumb {
  background: #ccc !important;
  border-radius: 3px !important;
}

.search-box-modular[data-context="index"] .search-suggestions::-webkit-scrollbar-thumb:hover {
  background: #999 !important;
}

/* ✅ REGRA FINAL: Garantir dropdown 100% opaco e acima de tudo */
html body div.search-box-modular[data-context="index"] .search-suggestions .suggestion-item,
html body div.search-box-modular[data-context="index"] #searchSuggestions .suggestion-item,
.search-box-modular[data-context="index"] .suggestion-item {
  /* ✅ NEUTRALIZAR qualquer filtro herdado */
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  background: white !important;
  position: relative !important;
  z-index: 999999999 !important;
}

/* ✅ EXCEÇÃO CRÍTICA: Preservar estilos dos chips */
html body div.search-box-modular[data-context="index"] .search-suggestions .dropdown-chip-full,
html body div.search-box-modular[data-context="index"] #searchSuggestions .dropdown-chip-full,
.search-box-modular[data-context="index"] .dropdown-chip-full {
  /* ✅ PRESERVAR cores originais dos chips */
  background: #f18719 !important;
  color: white !important;
  position: relative !important;
  z-index: 999999999 !important;
  filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* ✅ CORREÇÃO CRÍTICA: Garantir que dropdown sobreponha elementos sem empurrar para baixo */

/* Container principal deve permitir overflow e ter posicionamento relativo */
.search-box-modular[data-context="landing"] {
  position: relative !important;
  overflow: visible !important;
}

.search-box-modular[data-context="landing"] .search-container,
.search-box-modular[data-context="landing"] .search-input-wrapper {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* Dropdown deve sobrepor completamente sem afetar layout */
.search-box-modular[data-context="landing"] .search-suggestions {
  position: absolute !important;
  top: calc(100% - 1px) !important; /* Sobrepor 1px para continuidade visual */
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important; /* Z-index muito alto */
  margin: 0 !important;
  
  /* ✅ CRÍTICO: Remover de qualquer flow layout */
  float: none !important;
  clear: none !important;
  
  /* Garantir que não afeta o layout dos elementos posteriores */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  
  /* Estilos visuais */
  background: white !important;
  border: 1px solid var(--search-border-color) !important;
  border-top: 1px solid #f0f0f0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Garantir que o dropdown não cause reflow no container pai */
.search-box-modular[data-context="landing"].dropdown-attached {
  /* Não alterar altura quando dropdown está ativo */
  height: auto !important;
  min-height: auto !important;
}

/* Forçar posicionamento absoluto mesmo com outras regras CSS */
html body .search-box-modular[data-context="landing"] .search-suggestions,
html body .search-box-modular[data-context="landing"] .search-suggestions.visible {
  position: absolute !important;
  display: block !important;
}

/* ✅ CORREÇÃO ESPECÍFICA: Garantir que o botão buscar não seja empurrado */
.search-box-modular[data-context="landing"] + .btn-buscar,
.search-box-modular[data-context="landing"] ~ .btn-buscar,
.filtros-container .btn-buscar,
#buscarBtn {
  /* Manter posição original independente do dropdown */
  position: relative !important;
  z-index: 1 !important;
  margin-top: 30px !important; /* Manter espaçamento original */
}

/* ✅ OVERRIDE: Garantir que containers não expandam com dropdown */
.filtros-container {
  /* Não permitir que a altura mude com dropdown absoluto */
  contain: layout !important;
}

/* ✅ FORÇA MÁXIMA: Regras com especificidade extrema para sobrepor tudo */
html body div.filtros-container div.search-box-modular[data-context="landing"] div.search-suggestions,
html body div.filtros-container div.search-box-modular[data-context="landing"] div.search-suggestions.visible,
html body div.filtros-container .search-box-modular[data-context="landing"] .search-suggestions[style*="display: block"] {
  /* Posicionamento absoluto com força máxima */
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999999 !important;
  
  /* Remover completamente do document flow */
  float: none !important;
  clear: none !important;
  display: block !important;
  
  /* Dimensões fixas */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.25rem 1.6rem !important;
  
  /* Visual */
  background: white !important;
  border: 1px solid #f46f09 !important;
  border-top: 1px solid #f0f0f0 !important;
  border-radius: 0 0 30px 30px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ✅ CORREÇÃO ESTRUTURAL: Forçar overflow hidden nos containers pais */
html body div.filtros-container,
html body div.container-conteudo,
body.landing-page {
  /* Permitir que elementos absolute escapem sem afetar layout */
  overflow: visible !important;
}

/* ✅ ESPECÍFICO: Reset completo do search-box-modular na landing */
html body .search-box-modular[data-context="landing"] {
  position: relative !important;
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* ✅ REGRA FINAL - MÁXIMA PRIORIDADE - DEVE SER A ÚLTIMA REGRA */
/* Usar atributos para maior especificidade e sobrepor qualquer outra regra */
html body div[class*="search-box-modular"][data-context="landing"] div[class*="search-suggestions"],
html body div[class*="search-box-modular"][data-context="landing"] div[class*="suggestions"],
html body div[class*="search-box-modular"][data-context="landing"] *[class*="search-suggestions"] {
  /* POSICIONAMENTO ABSOLUTO FORÇADO */
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  
  /* Z-INDEX MÁXIMO */
  z-index: 999999999 !important;
  
  /* DISPLAY E FLOW */
  display: block !important;
  float: none !important;
  clear: none !important;
  
  /* DIMENSÕES */
  width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  margin: 0 !important;
  padding: 0.25rem 1.6rem !important;
  
  /* OVERFLOW */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* VISUAL */
  background: white !important;
  border: 1px solid #f46f09 !important;
  border-top: 1px solid #f0f0f0 !important;
  border-radius: 0 0 30px 30px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  
  /* TRANSFORMAÇÕES E CAMADAS */
  transform: translateZ(1000px) !important;
  will-change: transform !important;
  isolation: isolate !important;
}

/* ✅ GARANTIR QUE ELEMENTOS SEGUINTES NÃO SEJAM AFETADOS */
html body div[class*="search-box-modular"][data-context="landing"] + *,
html body div[class*="search-box-modular"][data-context="landing"] ~ * {
  /* Manter posição original */
  position: relative !important;
  z-index: 1 !important;
}

/* ✅ REGRA FINAL ESPECÍFICA PARA LANDING - FORÇA MÁXIMA */
/* IMPORTANTE: Esta regra SÓ afeta landing.html, não index.html */
body.landing-page .search-box-modular[data-context="landing"] .search-suggestions,
body.landing-page .search-box-modular[data-context="landing"] #searchSuggestions,
html body.landing-page div.search-box-modular[data-context="landing"] div.search-suggestions,
html body.landing-page div.search-box-modular[data-context="landing"] div#searchSuggestions {
  /* POSICIONAMENTO ABSOLUTO FORÇADO */
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  
  /* Z-INDEX MÁXIMO */
  z-index: 999999999 !important;
  
  /* DISPLAY E FLOW */
  display: block !important;
  float: none !important;
  clear: none !important;
  
  /* DIMENSÕES */
  width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  margin: 0 !important;
  padding: 0.25rem 1.6rem !important;
  
  /* OVERFLOW */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* VISUAL */
  background: white !important;
  border: 1px solid #f46f09 !important;
  border-top: 1px solid #f0f0f0 !important;
  border-radius: 0 0 30px 30px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  
  /* TRANSFORMAÇÕES E CAMADAS */
  transform: translateZ(1000px) !important;
  will-change: transform !important;
  isolation: isolate !important;
}

/* ✅ CORREÇÃO CRÍTICA: Garantir que containers pais no INDEX permitam dropdown aparecer */
.search-box-modular[data-context="index"] .search-input-wrapper,
.search-box-modular[data-context="index"] .search-container,
.search-box-modular[data-context="index"] .search-bar,
body:not(.landing-page) .search-location-container,
body:not(.landing-page) .header-left {
  overflow: visible !important;
  contain: none !important;
  isolation: auto !important;
  position: relative !important;
}

/* ✅ CRÍTICO: Garantir que menu horizontal tenha z-index menor que dropdown */
.menu-horizontal-filtros,
.menu-horizontal-filtros-carousel-wrapper,
#header-menu-container,
.header-menu-container {
  z-index: 500 !important;
}

/* ✅ INTEGRAÇÃO VISUAL: Modificar border-radius da caixa de busca quando dropdown aberto */
.search-input-wrapper.open input#locationSearch,
.search-input-wrapper.open .search-input,
.search-box-modular[data-context="index"] .search-input-wrapper.open input,
body:not(.landing-page) input#locationSearch:focus,
body:not(.landing-page) .search-input:focus {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  border-bottom: 1px solid transparent !important; /* Esconder borda inferior */
}

/* ✅ PROTEÇÃO: Garantir que INDEX não seja afetado pelas regras de LANDING */
body:not(.landing-page) .search-box-modular .search-suggestions:not(#searchSuggestions) {
  /* Apenas para elementos sem ID específico, manter comportamento original */
  position: absolute !important;
  top: calc(100% + 1px) !important;
  left: 0 !important;
  right: 0 !important;
}

/* ✅ OVERRIDE ESPECÍFICO: Sobrepor header-buskpe-flex.css especificamente para LANDING */
/* Este seletor tem mais especificidade que qualquer regra do header-buskpe-flex.css */
html body.landing-page div[class*="search-box-modular"] div[class*="search-suggestions"][style*="display: block"],
html body.landing-page div[class*="search-box-modular"] div[class*="search-suggestions"].visible {
  /* FORÇAR POSICIONAMENTO ABSOLUTO COM MÁXIMA PRIORIDADE */
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 999999999 !important;
  
  /* NEUTRALIZAR QUALQUER MARGEM OU PADDING QUE CAUSA SHIFT */
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0.25rem 1.6rem !important;
  
  /* FORÇAR SAÍDA DO DOCUMENT FLOW */
  float: none !important;
  clear: none !important;
  display: block !important;
  
  /* DIMENSÕES CONTROLADAS */
  height: auto !important;
  max-height: 240px !important;
  min-height: auto !important;
  
  /* OVERFLOW */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* VISUAL */
  background: white !important;
  border: 1px solid #f46f09 !important;
  border-top: 1px solid #f0f0f0 !important;
  border-radius: 0 0 30px 30px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  
  /* CAMADAS 3D */
  transform: translateZ(1000px) !important;
  will-change: transform !important;
  isolation: isolate !important;
  
  /* GARANTIR OPACIDADE TOTAL */
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* ✅ CRÍTICO: Override total para elementos com inline styles específicos */
html body.landing-page div[class*="search-box-modular"] div[style*="position: absolute"] {
  /* Garantir que inline styles sejam respeitados */
  position: absolute !important;
  top: 100% !important;
  z-index: 999999999 !important;
}

/* =====================
   FINAL OVERRIDES: controle explícito de visibilidade no INDEX
   - Esconde quando NÃO tem .visible
   - Mostra quando tem .visible
   Essas regras vêm por último para sobrepor conflitos anteriores
===================== */

/* Esconder quando não visível */
html body div.search-box-modular[data-context="index"] div#searchSuggestions:not(.visible),
html body .search-box-modular[data-context="index"] #searchSuggestions:not(.visible),
body .search-box-modular[data-context="index"] #searchSuggestions:not(.visible),
.search-box-modular[data-context="index"] #searchSuggestions:not(.visible),
.search-box-modular[data-context="index"] .search-suggestions:not(.visible) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Mostrar quando visível */
html body div.search-box-modular[data-context="index"] div#searchSuggestions.visible,
html body .search-box-modular[data-context="index"] #searchSuggestions.visible,
body .search-box-modular[data-context="index"] #searchSuggestions.visible,
.search-box-modular[data-context="index"] #searchSuggestions.visible,
.search-box-modular[data-context="index"] .search-suggestions.visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}