/* ══════════ BRAND PICKER: поле быстрого перехода между брендами ══════════
   Статическая разметка (без Fenom-циклов/сниппетов внутри) — чанк hero_base_brend
   просто подключает этот HTML целиком. Список брендов на странице уже готов,
   JS (brand-picker.js) только фильтрует видимость <li> по вводу и обрабатывает
   клавиатуру/клик вне поля.
   ВАЖНО: не выносить обратно в {include 'chunk'} с параметрами — именно это
   уронило страницы брендов 2026-10-23 (см. changelog). Чанк hero_base_brend
   должен содержать этот блок как простой {include 'brand_picker'} БЕЗ аргументов.
*/

.brand-picker{
    position:relative;
    margin-top:24px;
    max-width:420px;
}

.brand-picker__field{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    padding:14px 16px;
    transition:border-color .2s ease, background-color .2s ease;
}
.brand-picker__field:focus-within{
    border-color:#FE4819;
    background:rgba(255,255,255,.12);
}

.brand-picker__icon{
    flex:none;
    color:rgba(255,255,255,.55);
}
.brand-picker__field:focus-within .brand-picker__icon{color:#FE4819}

.brand-picker__input{
    flex:1 1 auto;
    min-width:0;
    background:transparent;
    border:none;
    outline:none;
    color:#fff;
    font-size:15px;
    font-weight:500;
    line-height:1.3;
}
.brand-picker__input::placeholder{color:rgba(255,255,255,.5)}

/* кнопка-шеврон — отдельный интерактивный элемент, открывает/закрывает
   список независимо от фокуса на input (2026-10-23) */
.brand-picker__toggle{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin:-5px;
    padding:0;
    background:transparent;
    border:none;
    border-radius:6px;
    color:inherit;
    cursor:pointer;
    transition:background-color .15s ease;
}
.brand-picker__toggle:hover{background:rgba(255,255,255,.1)}
.brand-picker__toggle:focus-visible{outline:2px solid #FE4819;outline-offset:1px}

.brand-picker__chevron{
    flex:none;
    color:rgba(255,255,255,.45);
    transition:transform .2s ease;
    pointer-events:none;
}
.brand-picker__toggle:hover .brand-picker__chevron{color:rgba(255,255,255,.75)}
.brand-picker__field:focus-within .brand-picker__chevron{color:#FE4819}
.brand-picker.is-open .brand-picker__chevron{transform:rotate(180deg)}

.brand-picker__list{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    margin:0;
    padding:8px;
    list-style:none;
    background:#1c1c1c;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.45);
    max-height:320px;
    overflow-y:auto;
    z-index:20;
    display:none;
}
.brand-picker.is-open .brand-picker__list{display:block}

.brand-picker__item{margin:0}
.brand-picker__item[hidden]{display:none}
.brand-picker__item.is-current .brand-picker__link{background:rgba(254,72,25,.14)}

.brand-picker__link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 10px;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
    transition:background-color .15s ease;
}
.brand-picker__link:hover,
.brand-picker__item.is-active .brand-picker__link{
    background:rgba(255,255,255,.08);
}

.brand-picker__logo{
    flex:none;
    width:26px;
    height:26px;
    object-fit:contain;
    filter:grayscale(100%) brightness(1.6);
    opacity:.85;
}

.brand-picker__name{
    font-size:14px;
    font-weight:500;
    line-height:1.3;
}

.brand-picker__empty{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    margin:0;
    padding:14px 16px;
    background:#1c1c1c;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    color:rgba(255,255,255,.6);
    font-size:14px;
    z-index:20;
}

/* скроллбар списка — тонкий, в цвет темы */
.brand-picker__list::-webkit-scrollbar{width:6px}
.brand-picker__list::-webkit-scrollbar-track{background:transparent}
.brand-picker__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}

/* ─────── мобильные ─────── */
@media(max-width:767px){
    .brand-picker{
        margin-top:18px;
        max-width:100%;
    }
    .brand-picker__field{
        padding:13px 14px;
        border-radius:10px;
    }
    .brand-picker__input{font-size:16px} /* 16px — чтобы iOS не зумил при фокусе */
    .brand-picker__list{
        border-radius:10px;
        max-height:280px;
    }
    .brand-picker__name{font-size:15px}
    .brand-picker__logo{width:24px;height:24px}
}