/* ============================================================
   Business PC V2 — DROPDOWNS (PHASE 3)
   Единый источник стилей кастомных выпадающих списков.

   Перенесено из dropdown.css (компонент .per-dd) без изменения
   значений — подключение НЕ меняет внешний вид.

   Правило подключения: ПОСЛЕ ui/selects.css, но ДО site.css
   и страничных стилей.

   Компоненты ТЗ: Dropdown. Используется в карточках каталога
   (компьютеры, мини-ПК, периферия). Нативные select —
   ui/selects.css, списки тегов в админке — .tags-drop (admin.css).
   ============================================================ */

/* ---------- Обёртка ---------- */
.per-dd {
    position: relative;
    z-index: 5;
}

/* Раскрытый дропдаун поднимается над соседними карточками */
.per-dd.is-open { z-index: 30; }

/* ---------- Кнопка-переключатель (КАНОН) ----------
   Один вид везде: карточка, toolbar каталога, периферия.
   Цвета через fallback: витрина --nv-*, иначе базовые.
   Страницы НЕ переопределяют вид — только ширину контейнера. */
.per-dd-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nv-tx, var(--color-text));
    background: var(--nv-panel, var(--color-surface));
    border: 1px solid var(--nv-line, var(--color-border));
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.per-dd-toggle:hover {
    border-color: var(--nv-tx-3, var(--color-text));
    background: var(--nv-panel, var(--color-surface));
}

.per-dd-toggle:focus-visible {
    outline: none;
    border-color: var(--nv-ink, var(--color-primary));
    box-shadow: 0 0 0 3px rgba(16, 17, 20, 0.08);
}

/* ---------- Текущее значение ---------- */
.per-dd-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Стрелка ---------- */
.per-dd-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
    transition: transform 0.25s ease;
}

/* Раскрытое состояние — стрелка развёрнута */
.per-dd.is-open .per-dd-arrow { transform: rotate(180deg); }

/* ---------- Меню ----------
   Меню всегда в потоке (не display:none), чтобы плавно
   показывалось: скрыто через visibility + opacity. */
.per-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    background: var(--nv-panel, var(--color-surface));
    border: 1px solid var(--nv-line, var(--color-border));
    border-radius: 10px;
    box-shadow: var(--shadow-menu);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s ease;
}

.per-dd.is-open .per-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---------- Пункт списка (КАНОН) ---------- */
.per-dd-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--nv-tx, var(--color-text));
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--nv-line-soft, var(--border));
    cursor: pointer;
    text-align: left;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.per-dd-option:last-child { border-bottom: 0; }

.per-dd-option:hover,
.per-dd-option:focus-visible {
    background: rgba(16, 17, 20, 0.05);
    outline: none;
}

.per-dd-option.is-selected {
    background: var(--color-surface-active);
    font-weight: 700;
}

/* ---------- Название и цена пункта ---------- */
.per-dd-opt-name {
    flex: 1 1 auto;
    min-width: 0;
}

.per-dd-opt-price {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.per-dd-option.is-selected .per-dd-opt-price,
.per-dd-option:hover .per-dd-opt-price,
.per-dd-option:focus-visible .per-dd-opt-price {
    color: var(--color-text);
}

/* Дельта-цена («+X ₽» к самому дешёвому варианту группы) */
.per-dd-opt-price-delta {
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ---------- Пустая группа ---------- */
.cfg-empty {
    display: block;
    padding: 4px 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ---------- Полоса прокрутки меню ---------- */
.per-dd-menu::-webkit-scrollbar { width: 6px; }
.per-dd-menu::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-btn);
}