/* Search Bar Block — bksb- prefix */ .bksb-wrap { display: flex; justify-content: var(--bksb-align, center); width: 100%; } .bksb-wrap[style*="align:flex"] { justify-content: var(--bksb-align); } .bksb-form { display: flex; align-items: stretch; width: 100%; max-width: var(--bksb-maxW, 560px); position: relative; } .bksb-input { flex: 1; height: var(--bksb-h, 48px); padding: 0 16px; border: 1.5px solid var(--bksb-fieldBrd, #d1d5db); border-radius: var(--bksb-radius, 8px) 0 0 var(--bksb-radius, 8px); background: var(--bksb-fieldBg, #fff); color: var(--bksb-fieldTxt, #111827); font-size: var(--bksb-fs, 15px); outline: none; box-sizing: border-box; transition: border-color .2s; } .bksb-input:focus { border-color: var(--bksb-btnBg, #6c3fb5); } .bksb-btn { display: flex; align-items: center; gap: 6px; padding: 0 20px; height: var(--bksb-h, 48px); background: var(--bksb-btnBg, #6c3fb5); color: var(--bksb-btnTxt, #fff); border: none; border-radius: 0 var(--bksb-radius, 8px) var(--bksb-radius, 8px) 0; font-size: var(--bksb-fs, 15px); font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity .2s; } .bksb-btn:hover { opacity: .88; } /* No button: round all sides */ .bksb-form:not(:has(.bksb-btn)) .bksb-input { border-radius: var(--bksb-radius, 8px); } /* Live results dropdown */ .bksb-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1); max-height: 320px; overflow-y: auto; z-index: 9999; display: none; } .bksb-results.bksb-open { display: block; } .bksb-result-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: #111; font-size: .92em; transition: background .15s; } .bksb-result-item:hover { background: #f5f3ff; } .bksb-result-item img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .bksb-result-title { font-weight: 600; } .bksb-result-type { font-size: .8em; color: #6b7280; } .bksb-results-empty { padding: 14px; color: #6b7280; font-size: .9em; }