/* Scoped Bootstrap 5 theme: no global body, navbar, or input overrides. */
.yii-search-bar {
    --search-base: #18191b;
    --search-panel: #1e1f21;
    --search-panel-2: #25272b;
    --search-line: #414245;
    --search-text: #cccccc;
    --search-muted: #888888;
    --search-accent: #ff8c00;
    --sw-size: 16px; --sw-gap: 5px; --sw-per-row: 10;
    /* width of exactly 10 swatches → 11+ wraps into a second row */
    --sw-row: calc(var(--sw-per-row) * var(--sw-size) + (var(--sw-per-row) - 1) * var(--sw-gap));
    font-family: 'ProtoMono-Regular', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: var(--search-text);
    color-scheme: dark;
    width: 100%;
    min-width: 0;
}
.yii-search-bar .search-input-container { position: relative; width: 100%; }
/* Size, weight, border and radius match the old static search form
   (removed in 58f8b2b, styles were web/css/site.css .search-input):
   1rem/400, a 2px #303030 border, 4px radius (6px on mobile). The font
   family stays the widget's ProtoMono stack. */
.yii-search-bar .search-input {
    height: 44px;
    padding: 10px 44px 10px 43px;
    border: 2px solid #303030;
    border-radius: 4px;
    background: var(--search-base);
    color: var(--search-text);
    font-family: "ProtoMono-Regular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    box-shadow: none;
}
.yii-search-bar .search-input::placeholder { color: var(--search-muted); opacity: 1; }
.yii-search-bar .search-input:focus { border-color: var(--search-accent); outline: 0; box-shadow: none; }
.yii-search-bar .search-input::-webkit-search-cancel-button,
.yii-search-bar .search-input::-webkit-search-decoration { appearance: none; }
.yii-search-bar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Absolute site-root path: the asset manager copies this file into
   web/assets/<hash>/css/, where a relative url() would not resolve. */
.yii-search-bar .search-icon {
    position: absolute;
    left: 13px;
    top: 8px;
    width: 27px;
    height: 27px;
    background-image: url('/images/other/lookglass_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
/* Query words found in the displayed title; everything else stays plain. */
.yii-search-bar .search-mark { color: var(--search-accent); background: transparent; }
.yii-search-bar .search-clean { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--search-muted); }
.yii-search-bar .search-clean:hover { color: var(--search-accent); background: #28292b; }
.yii-search-bar .search-clean:focus-visible { outline: 2px solid var(--search-accent); outline-offset: 1px; }
.yii-search-bar [hidden] { display: none !important; }
.yii-search-bar .search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1060; border: 1px solid var(--search-line); border-top: 2px solid var(--search-accent); background: var(--search-panel); }
/* Dropdown head (ported from the search-suggestions mock): the spinner
   "Searching…" state and the "N results for …" count share this row. */
.yii-search-bar .search-suggestions-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 14px; min-height: 34px; color: var(--search-muted); font-size: 11px; border-bottom: 1px solid var(--search-line); }
.yii-search-bar .search-head-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Locked-color chip: shown in the head row when the query contains a color
   word and at least one result carries that color. */
.yii-search-bar .search-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--search-line); border-radius: 20px; padding: 1px 8px 1px 5px; color: var(--search-text); font-size: 10px; white-space: nowrap; }
.yii-search-bar .search-chip i { flex: none; width: 10px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.yii-search-bar .search-spinner { width: 10px; height: 10px; border-width: 2px; color: var(--search-accent); }
.yii-search-bar .search-suggestions-list { list-style: none; margin: 0; padding: 0; max-height: 320px; max-height: min(320px, 50dvh); overflow-y: auto; scrollbar-color: #505154 var(--search-panel); }
/* Suggestion cards (ported from the search-suggestions mock): a 16:9
   preview thumbnail, the highlighted title with a picked-color suffix,
   the type line and a swatch row — one swatch per variation (two or
   three colors of a variation split that single swatch). */
.yii-search-bar .search-option { padding: 4px 6px; cursor: pointer; }
.yii-search-bar .search-card { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 1px solid transparent; border-radius: 5px; }
.yii-search-bar .search-option:hover .search-card,
.yii-search-bar .search-option[aria-selected="true"] .search-card { background: var(--search-panel-2); border-color: var(--search-line); }
.yii-search-bar .search-card-thumb { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #0c0d0f; }
.yii-search-bar .search-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yii-search-bar .search-card-main { flex: 1; min-width: 0; }
.yii-search-bar .search-card-title { display: flex; align-items: baseline; gap: 4px; color: var(--search-text); font-size: 12px; }
.yii-search-bar .search-card-title > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yii-search-bar .search-card-var { flex: none; color: var(--search-muted); }
.yii-search-bar .search-card-meta { margin-top: 3px; color: var(--search-muted); font-size: 11px; }
/* Swatch row (from the search-suggestions mock): max 20, 10 per row,
   right-aligned (the 2nd row also hugs the right edge). */
.yii-search-bar .search-card-sw { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: var(--sw-gap); max-width: var(--sw-row); margin-left: auto; }
.yii-search-bar .search-swatch { flex: none; width: var(--sw-size); height: var(--sw-size); padding: 0; border: 1px solid rgb(50, 50, 50); border-radius: 4px; background: var(--sw); cursor: pointer; transition: transform 0.12s; }
/* Two or three colors of one variation split a single swatch
   (diagonal halves / thirds) instead of becoming separate buttons. */
.yii-search-bar .search-swatch.search-swatch-split { background: linear-gradient(135deg, var(--sw) 50%, var(--sw2) 50%); }
.yii-search-bar .search-swatch.search-swatch-third { background: linear-gradient(135deg, var(--sw) 33.34%, var(--sw2) 33.34% 66.67%, var(--sw3) 66.67%); }
.yii-search-bar .search-swatch:hover { transform: scale(1.15); }
.yii-search-bar .search-swatch:focus-visible { outline: 2px solid var(--search-accent); outline-offset: 1px; }
.yii-search-bar .search-swatch.on { box-shadow: 0 0 0 2px var(--search-panel), 0 0 0 3.5px var(--search-accent); }
/* The list's tail row (from the mock): the lazy-load affordance that
   scrolls with the options — "Scroll for more · N remaining" (clicking
   loads), "Loading more…" with skeletons, "All N results loaded". */
.yii-search-bar .search-more { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; color: var(--search-muted); font-size: 11px; cursor: pointer; }
.yii-search-bar .search-more:hover,
.yii-search-bar .search-more:focus-visible { color: var(--search-accent); outline: none; }
.yii-search-bar .search-more-done { cursor: default; }
/* Skeleton rows for pending states (the mock's shimmer, tinted to the
   widget palette). */
.yii-search-bar .search-skeleton { display: flex; align-items: center; gap: 12px; padding: 6px 14px; }
.yii-search-bar .search-skeleton .sk { background: linear-gradient(90deg, #25272b 25%, #2f3136 50%, #25272b 75%); background-size: 200% 100%; animation: search-sk 1s linear infinite; border-radius: 4px; }
@keyframes search-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.yii-search-bar .search-sk-thumb { flex: none; width: 128px; aspect-ratio: 16 / 9; }
.yii-search-bar .search-sk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.yii-search-bar .search-sk-main .sk:first-child { height: 11px; width: 60%; }
.yii-search-bar .search-sk-main .sk:last-child { height: 9px; width: 35%; }

/* The help row doubles as the lazy-load counter row (the mock's footer):
   key hints on the left, "N / M loaded" on the right. */
.yii-search-bar .search-help { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #343537; padding: 10px 14px; color: var(--search-muted); font-size: 9px; }
@media (max-width: 767.98px) {
    .yii-search-bar .search-input { border-radius: 6px; }
    .yii-search-bar .search-help { font-size: 8px; }
    .yii-search-bar .search-card { flex-wrap: wrap; }
    .yii-search-bar .search-card-thumb { width: 96px; }
    .yii-search-bar .search-sk-thumb { width: 96px; }
    /* full-width row under the item, swatches kept in a 10-wide block on the
       right: this site's mobile panel is a bit narrower than the mock's, so
       the 108px indent yields to the 10-wide block when the two conflict */
    .yii-search-bar .search-card-sw { flex-basis: 100%; max-width: none; padding-left: max(0px, min(108px, calc(100% - var(--sw-row)))); }
}