/* Живые варианты поиска запчастей - выпадающий список под строкой (templates/nero/part_search.php, assets/js/part_search.js).
   Шапка сайта - тёмный, как сайт; кабинет менеджера (.mc-ps) - токены оформления кабинета (светлая и тёмная тема).
   Там же - подсказка «деталь + машина» кабинета (content/shop/podbor/tip.css рисует её в цветах сайта). */

[data-ab-part-search] .search-box,
[data-ab-part-search] .mc-ps__box {
    position: relative;
}

.abps {
    position: absolute;
    z-index: 1200;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    box-sizing: border-box;
    max-height: min(70vh, 520px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: #1E1E1E;
    border: 1px solid rgba(248, 250, 249, .12);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
    color: var(--white, #F8FAF9);
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    cursor: default;
}
.abps[hidden] { display: none; }

.abps__g + .abps__g {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(248, 250, 249, .07);
}
.abps__h {
    padding: 8px 10px 4px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-text, #898A8A);
}
.abps__o {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 7px 10px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.abps__o.is-active { background: rgba(248, 250, 249, .07); }
.abps__o.is-active .abps__k { opacity: 1; }
.abps__ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(248, 250, 249, .06);
    color: var(--gray-medium, #ACACAC);
}
.abps__ic svg { width: 18px; height: 18px; }
.abps__o.is-active .abps__ic { background: rgba(90, 224, 174, .14); color: var(--green, #5AE0AE); }
.abps__tx {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.abps__l {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.abps__l b { font-weight: 600; }
.abps__l mark {
    background: none;
    color: var(--green, #5AE0AE);
}
.abps__b {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(224, 220, 90, .14);
    color: var(--yellow-medium, #E0DC5A);
    font-size: 11px;
    vertical-align: 1px;
}
.abps__s {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--gray-text, #898A8A);
}
.abps__k {
    flex: none;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--gray-text, #898A8A);
    opacity: .75;
}
.abps__o--muted { min-height: 40px; color: var(--gray-text, #898A8A); }
.abps__o--muted .abps__ic { background: none; }
.abps__note {
    margin: 2px 2px 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(248, 250, 249, .05);
    color: var(--gray-medium, #ACACAC);
    font-size: 13px;
}
.abps__note.is-ok { background: rgba(90, 224, 174, .1); color: var(--white, #F8FAF9); }
.abps__note.is-busy::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: abps-spin .8s linear infinite;
}
@keyframes abps-spin { to { transform: rotate(360deg); } }

/* Только для экранного диктора: сколько вариантов */
.abps-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Телефон: во всю ширину экрана (part_search.js, fit), крупнее касание, длинные названия - в две строки */
@media (max-width: 767px) {
    .abps__o { min-height: 48px; }
    .abps__l,
    .abps__s { white-space: normal; overflow-wrap: anywhere; }
    .abps__k { display: none; }
}
@media (hover: hover) {
    .abps__o:hover { background: rgba(248, 250, 249, .07); }
}

/* ---------- кабинет менеджера: цвета кабинета (светлая и тёмная тема) ---------- */
.mc-ps .abps {
    top: calc(100% + 8px);
    background: var(--mc-menu);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--mc-pop-shadow);
    color: var(--mc-text);
    font-size: calc(13px + var(--mc-fs-up, 0px));
    z-index: 1060;
}
.mc-ps .abps__g + .abps__g { border-top-color: var(--mc-line); }
.mc-ps .abps__h { color: var(--mc-muted); }
.mc-ps .abps__o.is-active,
.mc-ps .abps__o:hover { background: var(--mc-hover); }
.mc-ps .abps__ic { background: var(--mc-hover); color: var(--mc-muted); }
.mc-ps .abps__o.is-active .abps__ic { background: var(--mc-green-soft); color: var(--mc-green-ink); }
.mc-ps .abps__l mark { color: var(--mc-green-ink); }
.mc-ps .abps__b { background: var(--mc-yellow-soft, rgba(224, 220, 90, .18)); color: var(--mc-yellow-ink, #6B6900); }
.mc-ps .abps__s,
.mc-ps .abps__k { color: var(--mc-muted); }
.mc-ps .abps__note { background: var(--mc-hover); color: var(--mc-text-2); }
.mc-ps .abps__note.is-ok { background: var(--mc-green-soft); color: var(--mc-text); }

/* Подсказка «деталь + машина» (content/shop/podbor/tip.css, car_pick.css) в кабинете */
.mc-ps .cst {
    background: var(--mc-menu);
    border: 0;
    box-shadow: var(--mc-pop-shadow);
    color: var(--mc-text);
    width: min(720px, calc(100vw - 24px));
}
.mc-ps .cst__sec { border-bottom-color: var(--mc-line); }
.mc-ps .cst__h,
.mc-ps .cst__opt small,
.mc-ps .cst__car small,
.mc-ps .cst__foot small,
.mc-ps .cst__msg { color: var(--mc-muted); }
.mc-ps .cst__opt:hover { background: var(--mc-hover); }
.mc-ps .cst__opt.is-on,
.mc-ps .cst__pos button.is-on { background: var(--mc-green-soft); color: var(--mc-text); }
.mc-ps .cst__pos button,
.mc-ps .cst__car { border-color: var(--mc-line-2); color: var(--mc-text); }
.mc-ps .cst__car.is-on,
.mc-ps .cst__pos button.is-on { border-color: var(--mc-green-ink); }
.mc-ps .cst__foot { background: var(--mc-hover); }
.mc-ps .cst .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.mc-ps .cst .btn--primary { background: var(--mc-mark); color: var(--mc-on-mark); border: 0; }
.mc-ps .cst .btn--outline { background: none; color: var(--mc-text); border: 1px solid var(--mc-line-2); }
.mc-ps .cst__plate input,
.mc-ps .cp__inp { background: var(--mc-sh-inset, transparent); border-color: var(--mc-line-2); color: var(--mc-text); }
.mc-ps .cp__list { background: var(--mc-menu); border-color: var(--mc-line-2); box-shadow: var(--mc-pop-shadow); }
.mc-ps .cp ul.cp__list > li { color: var(--mc-text); }