/* =====================================================================
   Витрина: свой выпадающий список вместо системного <select> (assets/js/ab_select.js, ABSelect).
   Кнопка - в стиле поля (по месту её дооформляют классы select: .cp__inp выбора машины, .gcar__sel гаража, фильтры подбора),
   список - тёмный, как список моделей в выборе машины (content/shop/podbor/car_pick.css): #1B1B1B, рамка 16% белого,
   активная строка - зелёная подложка. Длинные пункты переносятся. Телефон (до 640 px) - шторка снизу.
   ===================================================================== */

/* Обёртка: select внутри невидим, но остаётся в разметке (значение, change, отправка формы) */
.ab-sel-w { position: relative; display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.ab-sel-w > select { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip-path: inset(50%); }

/* Кнопка: по умолчанию - поле 40 px, как поля подбора */
.ab-sel { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 40px; margin: 0; padding: 0 10px 0 12px; box-sizing: border-box;
    border: 1px solid rgba(248, 250, 249, .16); border-radius: 10px; background: #1B1B1B; color: var(--white, #F8FAF9);
    font: inherit; font-size: 14px; line-height: 1.2; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ab-sel:hover { border-color: rgba(248, 250, 249, .3); }
.ab-sel:focus { outline: none; }
.ab-sel:focus-visible, .ab-sel.is-open { border-color: var(--green, #5AE0AE); }
.ab-sel:disabled { opacity: .45; cursor: not-allowed; border-color: rgba(248, 250, 249, .16); }
.ab-sel__v { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ab-sel.is-empty .ab-sel__v { color: var(--gray-text, #898A8A); }
.ab-sel__chev { width: 18px; height: 18px; flex: none; color: var(--gray-text, #898A8A); transition: transform .18s ease; }
.ab-sel.is-open .ab-sel__chev { transform: rotate(180deg); color: var(--white, #F8FAF9); }
.ab-sel-w .ab-sel.is-need { border-color: #ffb347; box-shadow: 0 0 0 3px rgba(255, 179, 71, .18); }

/* Список */
.ab-pop { position: fixed; z-index: 3000; display: flex; flex-direction: column; box-sizing: border-box; max-height: 340px; padding: 4px;
    background: #1B1B1B; border: 1px solid rgba(248, 250, 249, .16); border-radius: 10px; box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
    color: var(--white, #F8FAF9); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.35; text-align: left;
    animation: abPopIn .12s ease-out; }
.ab-pop[hidden] { display: none; }
.ab-pop.is-up { animation-name: abPopUp; }
.ab-pop__head { display: none; }
.ab-pop__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none;
    scrollbar-width: thin; scrollbar-color: rgba(248, 250, 249, .22) transparent; }
.ab-pop__o { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; user-select: none; }
.ab-pop__o > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ab-pop__o.is-act { background: rgba(90, 224, 174, .12); }
.ab-pop__o.is-on { color: var(--white, #F8FAF9); font-weight: 600; }
.ab-pop__o.is-empty { color: var(--gray-medium, #ACACAC); }
.ab-pop__o[aria-disabled="true"] { color: var(--gray-dark, #4F5052); cursor: default; background: none; }
.ab-pop__ok { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--green, #5AE0AE); }
.ab-pop__g { padding: 10px 10px 4px; color: var(--gray-text, #898A8A); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ab-pop__none { padding: 10px; color: var(--gray-medium, #ACACAC); }
@keyframes abPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes abPopUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Телефон: шторка снизу во всю ширину */
.ab-pop-ov { position: fixed; inset: 0; z-index: 2999; background: rgba(0, 0, 0, .6); animation: abFade .2s ease-out; }
.ab-pop-ov[hidden] { display: none; }
.ab-pop.is-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0 !important; width: auto !important; min-width: 0 !important;
    max-height: 72vh; max-height: 72dvh; padding: 0 0 env(safe-area-inset-bottom); border-radius: 16px 16px 0 0; border-width: 1px 0 0;
    background: var(--gray-darker, #232323); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); animation: abSheet .24s cubic-bezier(.2, .8, .2, 1); }
.ab-pop.is-sheet .ab-pop__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
    padding: 18px 8px 10px 16px; border-bottom: 1px solid rgba(248, 250, 249, .08); }
.ab-pop__grab { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(248, 250, 249, .2); }
.ab-pop__title { min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-pop__x { display: grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--gray-medium, #ACACAC); cursor: pointer; }
.ab-pop__x svg { width: 20px; height: 20px; }
.ab-pop.is-sheet .ab-pop__list { padding: 6px 8px 10px; }
.ab-pop.is-sheet .ab-pop__o { align-items: center; min-height: 48px; padding: 10px 12px; font-size: 15px; }
.ab-pop.is-sheet .ab-pop__o.is-on { background: rgba(90, 224, 174, .1); }
@keyframes abSheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes abFade { from { opacity: 0; } to { opacity: 1; } }
@media (pointer: coarse) {
    .ab-pop__o { min-height: 40px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-pop, .ab-pop.is-sheet, .ab-pop-ov { animation: none; }
}