/** * Estilos do dropdown de busca — FI Busca Inteligente (Frontend) * * O dropdown é criado no com position:fixed. * Posicionamento controlado via JS. */ /* ===== CONTAINER DO DROPDOWN ===== */ .fi-busca-dropdown { display: none; background: #ffffff; border-radius: 12px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.05); max-height: 360px; overflow-y: auto; z-index: 999999; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .fi-busca-dropdown::-webkit-scrollbar { width: 6px; } .fi-busca-dropdown::-webkit-scrollbar-track { background: transparent; } .fi-busca-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .fi-busca-dropdown.active { display: block; animation: fiBuscaSlideDown 0.2s ease; } @keyframes fiBuscaSlideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ===== GRUPO (CATEGORIA) ===== */ .fi-busca-grupo-label { padding: 8px 16px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; font-family: var(--fi-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); } /* ===== ITEM DE RESULTADO ===== */ .fi-busca-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background 0.15s ease; text-decoration: none; color: #334155; font-family: var(--fi-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 13px; font-weight: 500; border: none; background: none; width: 100%; text-align: left; } .fi-busca-item:hover, .fi-busca-item.fi-busca-item-focus { background: #f1f5f9; color: #1a3965; } .fi-busca-item:last-child { border-radius: 0 0 12px 12px; } /* Ícone do item */ .fi-busca-item-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a3965 0%, #2d4a73 100%); border-radius: 8px; flex-shrink: 0; } .fi-busca-item-icon svg { width: 16px; height: 16px; color: #feae00; stroke: #feae00; fill: none; } .fi-busca-item:hover .fi-busca-item-icon { background: linear-gradient(135deg, #feae00 0%, #f5a500 100%); } .fi-busca-item:hover .fi-busca-item-icon svg { color: #0f2847; stroke: #0f2847; } /* Texto do item */ .fi-busca-item-text { flex: 1; min-width: 0; } .fi-busca-item-nome { display: block; font-size: 13px; font-weight: 500; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fi-busca-item-nome mark { background: rgba(254, 174, 0, 0.25); color: inherit; padding: 0 1px; border-radius: 2px; } .fi-busca-item-cat { display: block; font-size: 11px; color: #94a3b8; font-weight: 400; margin-top: 1px; } /* Seta WhatsApp */ .fi-busca-item-arrow { flex-shrink: 0; color: #cbd5e1; transition: color 0.15s ease, transform 0.15s ease; } .fi-busca-item-arrow svg { width: 16px; height: 16px; } .fi-busca-item:hover .fi-busca-item-arrow { color: #25D366; transform: translateX(2px); } /* ===== MENSAGEM SEM RESULTADO ===== */ .fi-busca-sem-resultado { padding: 20px 16px; text-align: center; font-family: var(--fi-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); } .fi-busca-sem-resultado-texto { font-size: 13px; color: #64748b; margin-bottom: 12px; } .fi-busca-sem-resultado-btn { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: background 0.2s ease; font-family: inherit; } .fi-busca-sem-resultado-btn:hover { background: #128C7E; color: #fff; } .fi-busca-sem-resultado-btn svg { width: 18px; height: 18px; } /* ===== WIDGET VIA SHORTCODE ===== */ .fi-busca-widget { position: relative; width: 100%; } .fi-busca-widget .fi-busca-input { width: 100%; padding: 11px 16px; border: 2px solid #e2e8f0; border-radius: 8px; font-family: var(--fi-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 13px; color: #334155; outline: none; transition: border-color 0.2s ease; } .fi-busca-widget .fi-busca-input:focus { border-color: #1a3965; } .fi-busca-widget .fi-busca-input::placeholder { color: #94a3b8; }