.bia-search-wrapper { position: relative; width: 100%; max-width: 600px; margin: 0 auto; } .bia-search-row { display: flex; gap: 6px; } .bia-search-row .bia-search-input { flex: 1; } .bia-search-btn { padding: 0 18px; background: #2271b1; color: #fff; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; } .bia-search-btn:hover { background: #135e96; } .bia-search-input { width: 100%; padding: 12px 16px; font-size: 16px; border: 2px solid #c3c4c7; border-radius: 4px; box-sizing: border-box; outline: none; transition: border-color .2s; } .bia-search-input:focus { border-color: #2271b1; } .bia-search-results { list-style: none; margin: 4px 0 0; padding: 0; background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.1); position: absolute; width: 100%; z-index: 999; max-height: 480px; overflow-y: auto; } .bia-search-results[hidden] { display: none; } .bia-result-item { border-bottom: 1px solid #f0f0f0; } .bia-result-item:last-child { border-bottom: 0; } .bia-result-link { display: block; padding: 12px 16px; text-decoration: none; color: inherit; } .bia-result-link:hover { background: #f6f7f7; } .bia-result-title { display: block; font-weight: 600; color: #1d2327; margin-bottom: 4px; } .bia-result-excerpt { display: block; font-size: 13px; color: #646970; line-height: 1.4; } .bia-answer-box { background: #f0f6fc; border: 1px solid #c3d9f0; border-radius: 4px; padding: 12px 16px; margin-top: 4px; font-size: 14px; line-height: 1.6; color: #1d2327; position: relative; z-index: 1000; } .bia-answer-box[hidden] { display: none; } .bia-answer-badge { display: inline-block; font-size: 11px; font-weight: 600; color: #2271b1; background: #dce9f7; border-radius: 3px; padding: 2px 6px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; } .bia-answer-text { margin: 0; } .bia-loading, .bia-no-results, .bia-error { padding: 12px 16px; color: #646970; font-size: 14px; } .bia-error { color: #cc1818; } /* Autocomplete suggestions */ .bia-suggestions { list-style: none; margin: 4px 0 0; padding: 0; background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.1); position: absolute; width: 100%; z-index: 1001; max-height: 320px; overflow-y: auto; } .bia-suggestions[hidden] { display: none; } .bia-suggestion-item { padding: 10px 16px; font-size: 14px; color: #1d2327; cursor: pointer; border-bottom: 1px solid #f0f0f0; } .bia-suggestion-item:last-child { border-bottom: 0; } .bia-suggestion-item:hover, .bia-suggestion-item.is-active { background: #f0f6fc; } /* "Did you mean?" */ .bia-did-you-mean { margin-top: 6px; font-size: 14px; color: #646970; } .bia-did-you-mean[hidden] { display: none; } .bia-dym-link { color: #2271b1; font-weight: 600; text-decoration: none; } .bia-dym-link:hover { text-decoration: underline; } /* Floating panel injected over the theme's own search inputs. Fixed-positioned (placed on ) so it never disturbs theme layout. */ .bia-native-panel { background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 70vh; overflow-y: auto; z-index: 100000; } .bia-native-panel[hidden] { display: none; } /* Neutralize the absolute/card styles of the reused inner widgets so they flow naturally inside the panel. */ .bia-native-panel .bia-search-results, .bia-native-panel .bia-suggestions { position: static; width: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; max-height: none; } .bia-native-panel .bia-did-you-mean { margin: 0; padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }