:root { --bcb-search-width: 220px; }

.bcb-search-wrap { position: relative; display: inline-flex; align-items: center; }

@media (min-width: 768px) {
    .bcb-search-wrap { background: rgba(139,148,158,0.12); border-radius: 999px; padding: 6px 14px 6px 10px; gap: 6px; width: 220px; transition: background 0.2s, box-shadow 0.2s; }
    .bcb-search-wrap:focus-within { background: rgba(139,148,158,0.2); box-shadow: 0 0 0 2px rgba(91,155,213,0.3); }
    .bcb-search-icon { display: inline-flex; align-items: center; background: none; border: none; padding: 0; cursor: text; color: #8b949e; pointer-events: none; flex-shrink: 0; }
    .bcb-search-icon svg { width: 16px; height: 16px; }
    .bcb-search-wrap.is-active .bcb-search-icon { opacity: 1; pointer-events: none; }
    .bcb-search-panel { position: static; transform: none; width: 100% !important; opacity: 1 !important; pointer-events: all !important; overflow: visible; display: flex; align-items: center; flex: 1; background: transparent; }
    .bcb-search-panel form { display: flex; align-items: center; flex: 1; border: none; padding: 0; }
    .bcb-search-panel input[type="search"] { flex: 1; background: none; border: none; outline: none; font-size: 1.4rem; font-family: Ubuntu,sans-serif; padding: 0; color: #8b949e; min-width: 0; -webkit-appearance: none; }
    .bcb-search-panel input[type="search"]::placeholder { color: #8b949e; opacity: 0.8; }
    .bcb-search-panel input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
    .bcb-search-submit, .bcb-search-close { display: none; }
}

@media (max-width: 767px) {
    .bcb-search-icon { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; cursor: pointer; color: #8b949e; z-index: 2; position: relative; }
    .bcb-search-icon svg { width: 20px; height: 20px; }
    .bcb-search-wrap.is-active .bcb-search-icon { opacity: 0; pointer-events: none; }
    .bcb-search-panel { position: fixed; top: 0; left: 0; right: 0; width: 0 !important; transform: none; background: #212121; padding: 0 16px; height: 60px; z-index: 9999; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; overflow: hidden; transition: width 0.25s ease, opacity 0.25s ease; }
    .bcb-search-wrap.is-active .bcb-search-panel { width: 100% !important; opacity: 1; pointer-events: all; }
    .bcb-search-panel form { display: flex; align-items: center; flex: 1; border-bottom: 1px solid rgba(139,148,158,0.4); padding-bottom: 2px; }
    .bcb-search-panel input[type="search"] { flex: 1; background: none; border: none; outline: none; font-size: 1.6rem; font-family: Ubuntu,sans-serif; padding: 4px 0; color: #f5f5f5; min-width: 0; -webkit-appearance: none; }
    .bcb-search-panel input[type="search"]::placeholder { color: #8b949e; }
    .bcb-search-panel input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
    .bcb-search-submit { background: none; border: none; padding: 2px; cursor: pointer; color: #8b949e; display: inline-flex; align-items: center; flex-shrink: 0; }
    .bcb-search-submit svg { width: 14px; height: 14px; }
    .bcb-search-close { background: none; border: none; padding: 4px; cursor: pointer; color: #8b949e; display: inline-flex; align-items: center; flex-shrink: 0; }
    .bcb-search-close svg { width: 16px; height: 16px; }
}