/* spot_catalog_pick.css — K-23 фазы 1–2: панели «Поколение и кузов по каталогу» и «Двигатель по каталогу» в подаче (route ad_create, за флагом spot_catalog_pick).
   Только токены spot_ui.css (тёмная тема приходит сама: отдельных правил под html.spot-dm не нужно), только логические свойства
   (rtl-копия css/rtl/spot_catalog_pick.css собрана rtlcss). Классы — префикс spot-cpick-*. Плитки кузова и поле «Объём» НЕ стилизуем:
   их рисуют spot_edit.css/spot_create.css, панель кликает по label[for=…]. Класс ads-create-next на кнопках панели не использовать (create.js:626). */

/* --- панель --- */
.spot-cpick-panel { margin: 0 0 20px; padding: 12px; border: 1px solid var(--spot-line); border-radius: var(--spot-radius-l); background: var(--spot-raise); }
.spot-cpick-head { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; }
.spot-cpick-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spot-cpick-ico { flex: 0 0 auto; margin-top: 1px; color: var(--spot-green-fg); }
.spot-cpick-title { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--spot-ink); }
.spot-cpick-hint { font-size: 13px; line-height: 18px; color: var(--spot-mut); }

/* --- карточки поколений (button[aria-pressed]); карточка-подтверждение — тот же класс + --one на div --- */
.spot-cpick-list { display: grid; gap: 8px; }
.spot-cpick-gen {
    position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; align-items: center;
    width: 100%; margin: 0; padding: 10px;
    border: 1px solid var(--spot-line); border-radius: var(--spot-radius-l);
    background: var(--spot-surface); color: var(--spot-ink);
    font-family: var(--spot-font); text-align: start; cursor: pointer;
}
.spot-cpick-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--spot-field); }
.spot-cpick-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* заглушка «нет фото» (в макете её нет — решение K-23) */
.spot-cpick-photo--empty { display: flex; align-items: center; justify-content: center; padding: 4px; text-align: center; color: var(--spot-mut); font-size: 13px; line-height: 16px; }
.spot-cpick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-inline-end: 20px; }
.spot-cpick-name { font-size: 15px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; unicode-bidi: isolate; }
.spot-cpick-years { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--spot-mut); unicode-bidi: isolate; }
.spot-cpick-body { font-size: 13px; line-height: 18px; color: var(--spot-ink-2); }
.spot-cpick-check {
    position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: none; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: var(--spot-red); color: var(--spot-on-inv);
}
.spot-cpick-gen[aria-pressed="true"] { border-color: var(--spot-red); box-shadow: inset 0 0 0 1px var(--spot-red); }
.spot-cpick-gen[aria-pressed="true"] .spot-cpick-check { display: flex; }
.spot-cpick-gen--one { grid-template-columns: minmax(0, 1fr); gap: 10px; cursor: default; }
.spot-cpick-gen--one .spot-cpick-text { padding-inline-end: 0; }
.spot-cpick-gen--one .spot-cpick-name { font-size: 17px; line-height: 22px; }
/* узкие экраны (320–360 px): колонка фото уже, чтобы длинные названия не росли в высоту; карточка --one остаётся в одну колонку */
@media (max-width: 360px) {
    .spot-cpick-gen { grid-template-columns: 96px minmax(0, 1fr); }
    .spot-cpick-gen--one { grid-template-columns: minmax(0, 1fr); }
}

/* --- кнопки панели (значения .ads-create-next продублированы, класс — свой) --- */
.spot-cpick-actions { display: grid; gap: 8px; margin: 12px 0 0; }
.spot-cpick-btn {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--spot-control-h-l);
    margin: 0; padding: 0 16px; border: 0; border-radius: var(--spot-radius);
    background: var(--spot-red); color: var(--spot-on-inv);
    font-family: var(--spot-font); font-size: 16px; font-weight: 700; cursor: pointer;
}
.spot-cpick-btn:active { background: var(--spot-red-dark); }
.spot-cpick-btn--soft { border: 1px solid var(--spot-field-border); background: var(--spot-surface); color: var(--spot-ink); }
.spot-cpick-btn--soft:active { background: var(--spot-field); }
.spot-cpick-link {
    display: block; width: 100%; min-height: var(--spot-control-h); margin: 4px 0 0; padding: 0 8px; border: 0; background: none;
    color: var(--spot-ink-2); font-family: var(--spot-font); font-size: 14px; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* --- подсказка «кузов не сопоставлен со словарём» (под списком; показывается скриптом) --- */
.spot-cpick-note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--spot-radius); background: var(--spot-green-soft); color: var(--spot-ink); font-size: 13px; line-height: 18px; }
.spot-cpick-note[hidden] { display: none !important; }
.spot-cpick-note-ico { flex: 0 0 auto; margin-top: 1px; color: var(--spot-green-fg); }

/* --- значок «по каталогу» (в подписи поля, в итоговой строке шага, в строке «Поколение») --- */
.spot-cpick-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    background: var(--spot-green-soft); color: var(--spot-green-fg);
    font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.spot-cpick-badge-ico { flex: 0 0 auto; }
/* подпись .ads-create-subtitle в бою display:block (spot_create.css:540) — со значком становится flex с переносом.
   K-23 ф.2: не только прямой потомок — у шага «Объём» (314) подпись лежит в .row > .col-lg-4 */
.spot-create .filter_item .ads-create-subtitle:has(.spot-cpick-badge) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.filter_item_secondary_results-data .spot-cpick-badge { margin-inline-start: 8px; }
/* строка «Поколение» в .spot-create-ctx: название + значок переносятся */
.spot-create .spot-create-ctx-row.spot-cpick-ctx-wrap .spot-create-ctx-value { white-space: normal; overflow-wrap: anywhere; }

/* --- годы: скрытие вне диапазона модели (hidden и так работает через bootstrap [hidden]{display:none!important}; страховка) --- */
.spot-create .spot-create-year[hidden], .spot-create .spot-create-years[hidden] { display: none !important; }

/* --- заглушка загрузки (статичная, без анимации). Высота ≈ панель с 2 карточками на 390 px: 12+70+103+8+103+48+12+2 = 358 --- */
.spot-cpick-skel {
    height: 358px; margin: 0 0 20px; border: 1px solid var(--spot-line); border-radius: var(--spot-radius-l);
    background:
        linear-gradient(var(--spot-surface), var(--spot-surface)) 12px 82px / calc(100% - 24px) 103px no-repeat,
        linear-gradient(var(--spot-surface), var(--spot-surface)) 12px 193px / calc(100% - 24px) 103px no-repeat,
        var(--spot-raise);
}

/* ===== K-23 ф.2: панель «Двигатель по каталогу» в шаге «Объём» (#filter_item314, блок перед .row.mb15) ===== */
.spot-cpick-panel--eng { margin: 0 0 16px; }
.spot-cpick-engs, .spot-cpick-engs-other { display: grid; gap: 6px; }
.spot-cpick-engs-other[hidden] { display: none !important; }
/* заголовок группы топлива («Бензин», «Гибрид»…) */
.spot-cpick-group { margin: 6px 0 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--spot-mut); }
/* строка-вариант двигателя (button[aria-pressed]): «150 л.с. 2.0 AT» / «Бензин · 2.0 л · Автомат · Передний» / «3 компл.» / галочка */
.spot-cpick-eng {
    position: relative; display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 48px; margin: 0; padding: 8px 12px;
    border: 1px solid var(--spot-line); border-radius: var(--spot-radius);
    background: var(--spot-surface); color: var(--spot-ink);
    font-family: var(--spot-font); text-align: start; cursor: pointer;
}
.spot-cpick-eng-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.spot-cpick-eng-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.spot-cpick-eng-hp { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--spot-ink); white-space: nowrap; }
/* имя модификации — латиница/цифры из каталога («2.0 AT», «45 TFSI 2.0 AMT 4WD»): plaintext берёт направление по первому сильному
   символу, иначе в RTL (fa) «2.0 AT» переворачивается в «AT 2.0»; rtlcss это свойство не трогает */
.spot-cpick-eng-name { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--spot-ink-2); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.spot-cpick-eng-sub { font-size: 12px; line-height: 16px; color: var(--spot-mut); overflow-wrap: anywhere; }
.spot-cpick-eng-trims { flex: 0 0 auto; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--spot-mut); white-space: nowrap; }
.spot-cpick-eng .spot-cpick-check { position: static; flex: 0 0 auto; width: 20px; height: 20px; }
.spot-cpick-eng[aria-pressed="true"] { border-color: var(--spot-red); box-shadow: inset 0 0 0 1px var(--spot-red); }
.spot-cpick-eng[aria-pressed="true"] .spot-cpick-check { display: flex; }
/* раскрывашка «Другие рынки — N» (button[aria-expanded]) */
.spot-cpick-disc {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; min-height: 44px; margin: 2px 0 0; padding: 0 12px;
    border: 1px dashed var(--spot-field-border); border-radius: var(--spot-radius); background: none;
    color: var(--spot-ink); font-family: var(--spot-font); font-size: 14px; font-weight: 600; text-align: start; cursor: pointer;
}
.spot-cpick-chev { flex: 0 0 auto; }
.spot-cpick-disc[aria-expanded="true"] .spot-cpick-chev { transform: rotate(-180deg); }
/* подсказка «Дальше подставим…» — та же зелёная .spot-cpick-note (текст в .spot-cpick-note-text); пояснение значка — .spot-cpick-legend */
.spot-cpick-note-text { min-width: 0; overflow-wrap: anywhere; }
.spot-cpick-legend { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--spot-ink-2); }
/* заглушка панели двигателя: шапка + три строки по 48 px (12+46+6+48+6+48+6+48+12+2 = 234) */
.spot-cpick-skel--eng {
    height: 234px; margin: 0 0 16px;
    background:
        linear-gradient(var(--spot-surface), var(--spot-surface)) 12px 64px / calc(100% - 24px) 48px no-repeat,
        linear-gradient(var(--spot-surface), var(--spot-surface)) 12px 118px / calc(100% - 24px) 48px no-repeat,
        linear-gradient(var(--spot-surface), var(--spot-surface)) 12px 172px / calc(100% - 24px) 48px no-repeat,
        var(--spot-raise);
}

/* --- движение и hover (hover — только усиление, правило 9 CLAUDE.md) --- */
@media (prefers-reduced-motion: no-preference) {
    .spot-cpick-btn, .spot-cpick-gen, .spot-cpick-eng, .spot-cpick-disc { transition: background-color .12s, border-color .12s, transform .12s cubic-bezier(.23, 1, .32, 1); }
    .spot-cpick-btn:active { transform: scale(.98); }
    .spot-cpick-chev { transition: transform .15s; }
}
@media (hover: hover) and (pointer: fine) {
    .spot-cpick-gen:not([aria-pressed="true"]):hover, .spot-cpick-eng:not([aria-pressed="true"]):hover, .spot-cpick-disc:hover { border-color: var(--spot-field-border); }
}