/*
 * AM crosses module: standalone AM-cross search dock (parts list/cards, flat table + sort,
 * suppliers-per-row drawer, sponsored/type badges) and the shared "suppliers drawer" section
 * inside the catalog unit modal (.cwoa-unit-modal-suppliers-*), which reuses the same drawer
 * language/markup to show AM supplier offers for a selected part. Split out of cwoa-app.css —
 * enqueued as a dependency of the 'cwoa-app' style handle (see class-cwoa-asset-enqueue.php),
 * so every existing wp_enqueue_style('cwoa-app') call site keeps loading it automatically.
 *
 * NOTE: a handful of earlier AM-only selectors (.cwoa-am-standalone-dock-body, .cwoa-am-tree-*,
 * .cwoa-am-tree-brand-count) stay in cwoa-app.css — they sit interleaved with generic table
 * selectors (.cwoa-details-table/.cwoa-candidate-table) shared by other search modes, so moving
 * them out would risk splitting a generic rule from its AM-specific sibling mid-block.
 * .cwoa-part-suppliers-trigger also stays put: it is reused by the VIN/unit-modal parts table,
 * not AM-exclusive.
 */

.cwoa-am-part-lines {
    margin: 0;
    padding: 0 0 0 6px;
    list-style: none;
}

.cwoa-am-part-lines__item + .cwoa-am-part-lines__item {
    margin-top: 8px;
}

.cwoa-am-part-card {
    border: 1px solid var(--cwoa-border-inner);
    border-radius: var(--cwoa-radius-sm);
    padding: 8px 10px;
    background: color-mix(in srgb, var(--cwoa-surface) 88%, transparent);
}

.cwoa-am-part-card__primary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.cwoa-am-part-card__oem {
    font-weight: 700;
}

.cwoa-am-part-card__name {
    font-weight: 500;
    word-break: break-word;
}

.cwoa-am-part-card__meta {
    margin-top: 6px;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.45;
    color: var(--cwoa-muted);
}

.cwoa-am-part-extras {
    margin-top: 8px;
}

.cwoa-am-part-extras__summary {
    cursor: pointer;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    color: var(--cwoa-accent);
    list-style: none;
}

.cwoa-am-part-extras__summary::-webkit-details-marker {
    display: none;
}

/* Плоская таблица альтернатив AM с сортировкой по бренду и цене */
.cwoa-am-flat-wrap {
    margin: 0;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.cwoa-am-flat-table {
    width: 100%;
    /* По умолчанию не шире контейнера — горизонтальный скролл у .cwoa-am-flat-wrap */
    min-width: 100%;
    max-width: 100%;
}

@media (min-width: 1600px) {
    .cwoa-am-flat-table {
        min-width: min(760px, 100%);
    }
}

.cwoa-am-flat-table .cwoa-am-flat-th-sort {
    white-space: nowrap;
    vertical-align: middle;
}

.cwoa-am-flat-table .cwoa-am-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 2px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    max-width: 100%;
}

.cwoa-am-flat-table .cwoa-am-sort-btn:hover,
.cwoa-am-flat-table .cwoa-am-sort-btn:focus-visible {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, transparent);
    outline: none;
}

.cwoa-am-flat-table .cwoa-am-sort-btn.is-active {
    color: var(--cwoa-accent);
}

.cwoa-am-flat-table .cwoa-am-sort-arrow {
    display: inline-block;
    min-width: 1em;
    font-weight: 700;
    color: var(--cwoa-accent);
}

.cwoa-am-flat-td-cross,
.cwoa-am-flat-td-meta {
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
}

.cwoa-am-flat-td-suppliers {
    white-space: nowrap;
    vertical-align: middle;
}

.cwoa-am-suppliers-none {
    color: var(--cwoa-faint);
    cursor: default;
}

/* Секция панели поставщиков внутри модалки узла — тот же язык, что и секция аналогов выше. */
.cwoa-unit-modal-suppliers-section {
    margin-top: 16px;
    padding: 16px;
    border-top: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
}

.cwoa-unit-modal-suppliers-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cwoa-unit-modal-suppliers-heading {
    margin: 0;
    font-size: var(--cwoa-fs-md, 1rem);
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

/* Точно такая же кнопка, как .cwoa-unit-modal-am-close (cwoa-app.css) — оба секции должны выглядеть одинаково. */
.cwoa-unit-modal-suppliers-close {
    flex-shrink: 0;
    align-self: flex-start;
    margin: 0;
    padding: 2px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--cwoa-muted);
}

.cwoa-unit-modal-suppliers-close:hover,
.cwoa-unit-modal-suppliers-close:focus-visible {
    color: var(--cwoa-text);
    background: var(--cwoa-border);
    outline: none;
}

/* Когда у детали есть реальный поставщик — только иконка лупы вместо текста «Offers (N)»;
   полный текст остаётся в title/aria-label. Стиль в одном языке с ссылкой web-поиска ниже. */
/* #cwoa-app префикс обязателен: базовый “#cwoa-app .cwoa-action” выше по специфичности (ID+класс)
   и иначе его padding:5px 12px съедает всё место внутри 26px-кнопки, сжимая SVG. */
#cwoa-app .cwoa-am-suppliers-toggle.cwoa-am-suppliers-toggle--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 45%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--cwoa-accent);
    cursor: pointer;
}

#cwoa-app .cwoa-am-suppliers-toggle.cwoa-am-suppliers-toggle--icon:hover:not(:disabled),
#cwoa-app .cwoa-am-suppliers-toggle.cwoa-am-suppliers-toggle--icon:focus-visible {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, transparent);
    color: var(--cwoa-accent);
}

#cwoa-app .cwoa-am-suppliers-toggle--icon svg {
    display: block;
    flex-shrink: 0;
}

.cwoa-am-suppliers-drawer {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius);
    background: var(--cwoa-card);
    box-shadow: var(--cwoa-shadow-sm);
}

.cwoa-am-suppliers-drawer-title {
    margin: 0 0 8px;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-text);
}

.cwoa-am-suppliers-drawer-part {
    margin: 0 0 10px;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
    word-break: break-word;
}

.cwoa-am-suppliers-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--cwoa-fs-sm);
}

.cwoa-am-suppliers-li {
    margin: 0.35em 0;
}

.cwoa-am-suppliers-link {
    font-weight: 600;
    color: var(--cwoa-accent);
    text-decoration: none;
}

.cwoa-am-suppliers-link:hover,
.cwoa-am-suppliers-link:focus-visible {
    text-decoration: underline;
    outline: none;
}

.cwoa-am-suppliers-note {
    display: block;
    margin-top: 2px;
    margin-left: 0;
    font-size: var(--cwoa-fs-xs);
    color: var(--cwoa-muted);
}

/* OEM rail fallback: несколько ссылок в одной ячейке */
.cwoa-am-suppliers-link--inline {
    font-weight: 600;
    white-space: nowrap;
}

/*
 * Mobile: плоская таблица AM на всю ширину wrap (перенос в ячейках поставщиков).
 */
@media (max-width: 560px) {
    .cwoa-am-flat-table {
        min-width: 100%;
    }

    .cwoa-am-flat-td-suppliers {
        white-space: normal;
    }

    .cwoa-am-suppliers-link--inline {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.cwoa-am-suppliers-sponsored {
    display: inline-block;
    margin-right: 0.35em;
    padding: 0.1em 0.45em;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
    border-radius: 4px;
    background: color-mix(in srgb, var(--cwoa-accent) 18%, var(--cwoa-surface));
    color: var(--cwoa-accent);
}

.cwoa-am-suppliers-unconfirmed {
    display: inline-block;
    margin-right: 0.35em;
    padding: 0.1em 0.45em;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
    border-radius: 4px;
    background: color-mix(in srgb, currentColor 12%, var(--cwoa-surface));
    color: var(--cwoa-muted, #767676);
}

/* Номер (OEM/AM) нельзя выделить/скопировать напрямую — только через значок рядом
   (см. .cwoa-copy-icon-btn и делегированный обработчик click в cwoa-app.js). */
.cwoa-copy-protected-num {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default;
}

.cwoa-copy-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 0.35em;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--cwoa-muted, #767676);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cwoa-copy-icon-btn:hover,
.cwoa-copy-icon-btn:focus-visible {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, transparent);
    color: var(--cwoa-accent);
    outline: none;
}

.cwoa-copy-icon-btn--done {
    color: var(--cwoa-success, #1a7f37);
}

/* Кнопка схемы с номером — тот же принцип защиты от выделения, чтобы случайный drag-выбор
   текста кнопки тоже ничего не скопировал. */
.cwoa-find-on-diagram {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.cwoa-am-suppliers-type {
    display: inline-block;
    margin-right: 0.35em;
    padding: 0.1em 0.45em;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
    border-radius: 4px;
}

.cwoa-am-suppliers-type--partner {
    background: #e7f0fd;
    color: #1d4ed8;
}

.cwoa-am-suppliers-type--web_partner {
    background: #eaf7ee;
    color: #1c7a3a;
}

.cwoa-am-suppliers-type--recommended {
    background: #fdf1e0;
    color: #b5650a;
}

.cwoa-unit-modal-suppliers-drawer {
    margin-top: 10px;
}

.cwoa-am-flat-td-brand {
    vertical-align: top;
    font-weight: 600;
    background: color-mix(in srgb, var(--cwoa-surface) 65%, transparent);
}

.cwoa-am-flat-specs-line {
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
}

/* Превью изображений из AM API — горизонтальный скролл внутри ячейки */
.cwoa-am-part-imgs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-bottom: 2px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.cwoa-am-part-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid var(--cwoa-border);
    background: color-mix(in srgb, var(--cwoa-surface) 88%, transparent);
    box-sizing: border-box;
}

.cwoa-am-flat-specs-extras {
    margin-top: 8px;
}

.cwoa-am-flat-specs-extras .cwoa-am-part-extras {
    margin-top: 0;
}

.cwoa-am-part-dl {
    margin: 8px 0 0;
    padding: 0;
}

.cwoa-am-part-dl__row {
    display: grid;
    grid-template-columns: minmax(6.5rem, 34%) 1fr;
    gap: 6px 10px;
    align-items: start;
    margin: 6px 0;
    font-size: var(--cwoa-fs-xs);
}

.cwoa-am-part-dl__row dt {
    margin: 0;
    color: var(--cwoa-muted);
    font-weight: 600;
}

.cwoa-am-part-dl__row dd {
    margin: 0;
    word-break: break-word;
}

.cwoa-am-part-dl__row--props dd {
    white-space: normal;
}