/* ============================================================ Поиск по названию: автоподсказка (combobox) + список результатов Витрина «Китай Детали». Подключается в includes/head.blade.php. ============================================================ */ /* ---- Обёртка поля ввода (держит иконку; сам дропдаун рендерится в ) ---- */ #searchForm .search-ac { position: relative; display: inline-block; width: 90%; margin: 0 5px; vertical-align: middle; text-align: left; } .search-ac__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #b0b0b0; font-size: 15px; pointer-events: none; } /* поле внутри обёртки занимает всю её ширину (переопределяем .formField input) */ .searchForm .formField .search-ac input { width: 100%; margin: 0; padding-left: 34px; box-sizing: border-box; } /* ---- Выпадающий список подсказок (портирован в , position:fixed) ---- */ .search-suggest { position: fixed; z-index: 2000; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); max-height: 360px; overflow-y: auto; text-align: left; } .search-suggest .ss-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; color: #222; } .search-suggest .ss-item:hover, .search-suggest .ss-item.active { background: #fdecec; /* фирменный красный, светлый тон */ box-shadow: inset 3px 0 0 #C00; } .search-suggest .ss-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #d7d7d7; /* нет в наличии — серый */ } .search-suggest .ss-item.in-stock .ss-dot { background: #28a745; } /* в наличии — зелёный */ .search-suggest .ss-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .search-suggest .ss-title b { color: #C00; font-weight: 700; } /* подсветка совпадения */ .search-suggest .ss-code { flex: 0 0 auto; color: #8a8a8a; font-size: 12px; font-family: Consolas, "Courier New", monospace; white-space: nowrap; } .search-suggest .ss-empty { padding: 12px; color: #999; text-align: center; font-size: 14px; } /* ---- Список найденных деталей (страница /search) ---- */ /* Карточки товара переехали в parts.css (.part-card) — один компонент на каталог, поиск и вспомогательные блоки. Здесь остались автоподсказка и пейджер. */ /* ---- Пейджер результатов ---- */ .found-parts-pager { display: flex; justify-content: center; margin: 6px 0 10px; } .kd-pager { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .kd-pager__pages { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kd-pager__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 11px; border: 1px solid #e6e6e6; border-radius: 9px; background: #fff; color: #333; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; } .kd-pager__btn:hover { border-color: #C00; color: #C00; text-decoration: none; box-shadow: 0 3px 10px rgba(204, 0, 0, .12); } .kd-pager__btn.is-current { background: #C00; border-color: #C00; color: #fff; cursor: default; box-shadow: 0 3px 10px rgba(204, 0, 0, .22); } .kd-pager__btn.is-disabled { color: #bbb; background: #f7f7f7; border-color: #ececec; cursor: default; box-shadow: none; } .kd-pager__btn--nav { padding: 0 14px; } .kd-pager__btn .fa { font-size: 15px; } .kd-pager__gap { min-width: 20px; text-align: center; color: #aaa; font-weight: 700; user-select: none; } .kd-pager__info { display: none; color: #666; font-size: 13px; font-weight: 600; padding: 0 8px; } /* ---- Адаптив ---- */ @media (max-width: 767px) { .search-ac { width: 96%; } /* пейджер: прячем список номеров, показываем «стр / всего» + крупные тапы */ .kd-pager__pages { display: none; } .kd-pager__info { display: inline-block; } .kd-pager__lbl { display: none; } .kd-pager__btn { height: 42px; min-width: 42px; } }