/* ==========================================================================
   对比交互反馈
   配套 assets/js/compare-store.js：切换批次 toast、跨分类弱化、过滤提示
   仅在含对比功能的页面加载（产品列表、产品详情、对比页）
   ========================================================================== */

/* 操作反馈 toast ------------------------------------------------------------ */
.compare-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.compare-toast__item {
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 18px;
    border-left: 3px solid var(--brand-signal);
    background: var(--brand-ink-900);
    color: #fff;
    font-family: var(--brand-body);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .01em;
    opacity: 0;
    transform: translateY(-8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    transition: opacity var(--brand-motion), transform var(--brand-motion);
}

.compare-toast__item.is-in {
    opacity: 1;
    transform: translateY(0);
}

.compare-toast__item--switch {
    border-left-color: var(--brand-signal-strong);
}

.compare-toast__item--warn {
    border-left-color: var(--brand-danger);
}

/* 批次锁定时弱化非本分类的对比入口 --------------------------------------------
   不使用 disabled：保持可聚焦，用户才能通过 title 得知原因；点击即切换批次 */
.product-card__compare-btn.is-locked-out,
.vehicle-compare-add.is-locked-out {
    opacity: .38;
    filter: grayscale(1);
}

.product-card__compare-btn.is-locked-out:hover,
.vehicle-compare-add.is-locked-out:hover {
    opacity: .7;
    filter: none;
}

/* 对比页：添加下拉中的跨分类候选 */
.compare-dropdown__item.is-cross-category {
    opacity: .5;
}

.compare-dropdown__item.is-cross-category:hover {
    opacity: .85;
}

/* 对比页：跨分类参数被忽略时的提示条 ---------------------------------------- */
.compare-notice {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 3px solid var(--brand-signal-strong);
    background: var(--brand-surface-soft);
    color: var(--brand-ink-700);
    font-family: var(--brand-body);
    font-size: 13px;
    line-height: 1.6;
}

/* 对比栏：已选产品 ------------------------------------------------------------
   选中后必须立刻能看到「选了谁」，否则用户只能凭记忆操作 */
.compare-bar__items {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--brand-space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.compare-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--brand-space-2);
    padding: var(--brand-space-1);
    border: 1px solid var(--brand-line-strong);
    background: var(--brand-ink-800);
}

.compare-chip__link {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-space-2);
    color: var(--brand-surface);
    font-family: var(--brand-body);
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
}

a.compare-chip__link:hover .compare-chip__title {
    text-decoration: underline;
}

.compare-chip__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    overflow: hidden;
    background: var(--brand-ink-900);
}

.compare-chip__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-chip__title {
    max-width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.compare-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--brand-line-strong);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--brand-motion);
}

.compare-chip__remove:hover {
    color: var(--brand-danger);
}

/* 焦点可见：对比栏贴底，默认焦点环易被视口裁切 */
.compare-chip__remove:focus-visible,
.compare-bar__clear:focus-visible,
.compare-bar__btn:focus-visible {
    outline: 2px solid var(--brand-signal);
    outline-offset: 2px;
}

/* 未达对比下限：保留在焦点序列内，用状态而非 disabled 表达不可跳转 */
.compare-bar__btn.is-disabled,
.compare-bar__btn[aria-disabled="true"] {
    border-color: var(--brand-line-strong);
    background: transparent;
    color: var(--brand-line-strong);
    cursor: not-allowed;
}

.compare-bar__btn.is-disabled:hover,
.compare-bar__btn[aria-disabled="true"]:hover {
    background: transparent;
    transform: none;
}

/* 切换批次确认弹框 ----------------------------------------------------------
   跨分类加入会清空当前清单，不可逆，必须先确认。
   焦点默认落在「取消」，Esc / 点击遮罩关闭，Tab 循环锁在弹框内 */
.compare-dialog {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--brand-space-5);
    background: rgba(16, 24, 23, .62);
    opacity: 0;
    transition: opacity var(--brand-motion);
}

.compare-dialog.is-in {
    opacity: 1;
}

.compare-dialog__panel {
    width: 100%;
    max-width: 420px;
    padding: var(--brand-space-7);
    border-top: 3px solid var(--brand-signal-strong);
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow-lg);
    transform: translateY(-8px);
    transition: transform var(--brand-motion);
}

.compare-dialog.is-in .compare-dialog__panel {
    transform: translateY(0);
}

.compare-dialog__title {
    margin: 0 0 var(--brand-space-3);
    color: var(--brand-ink-900);
    font-family: var(--brand-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.compare-dialog__body {
    margin: 0 0 var(--brand-space-6);
    color: var(--brand-ink-700);
    font-family: var(--brand-body);
    font-size: 14px;
    line-height: 1.6;
}

.compare-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--brand-space-3);
}

.compare-dialog__btn {
    padding: 12px 22px;
    border: 1px solid var(--brand-ink-900);
    border-radius: var(--brand-radius-sm);
    font-family: var(--brand-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background-color var(--brand-motion), border-color var(--brand-motion);
}

.compare-dialog__btn--ghost {
    background: var(--brand-surface);
    color: var(--brand-ink-900);
}

.compare-dialog__btn--ghost:hover {
    background: var(--brand-surface-soft);
}

.compare-dialog__btn--primary {
    border-color: var(--brand-signal);
    background: var(--brand-signal);
    color: var(--brand-ink-900);
}

.compare-dialog__btn--primary:hover {
    border-color: var(--brand-signal-strong);
    background: var(--brand-signal-strong);
}

.compare-dialog__btn:focus-visible {
    outline: 2px solid var(--brand-signal-deep);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .compare-dialog,
    .compare-dialog__panel {
        transition: none;
    }
}

/* 窄屏：已选产品独占一行横向滚动，按钮竖排 */
@media (max-width: 900px) {
    .compare-bar__inner {
        flex-wrap: wrap;
        gap: var(--brand-space-4);
    }

    .compare-bar__info {
        order: 1;
    }

    .compare-bar__btn {
        order: 2;
        margin-left: auto;
    }

    .compare-bar__items {
        order: 3;
        flex: 1 0 100%;
    }

    .compare-chip__title {
        max-width: 96px;
    }

    .compare-dialog__actions {
        flex-direction: column-reverse;
    }

    .compare-dialog__btn {
        width: 100%;
    }
}