/* -------------------------------------------------------
   Универсальная сравнительная таблица
   Основной класс: w-compare
   Старый класс kamaz-compare оставлен для совместимости
------------------------------------------------------- */

.w-compare,
.kamaz-compare {
    margin: 35px 0;
}

.w-compare *,
.kamaz-compare * {
    box-sizing: border-box;
}

.w-compare__head,
.kamaz-compare__head {
    margin-bottom: 22px;
}

.w-compare__title,
.kamaz-compare__title {
    margin: 0 0 12px;
}

.w-compare__text,
.kamaz-compare__text {
    margin: 0;
}

.w-compare__table,
.kamaz-compare__table {
    width: 100%;
    border-collapse: collapse;
}

.w-compare__table th,
.w-compare__table td,
.kamaz-compare__table th,
.kamaz-compare__table td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e5e5e5;
}

.w-compare__table th,
.kamaz-compare__table th {
    font-weight: 600;
    color: inherit;
    background: transparent;
    border-top: 1px solid #e5e5e5;
}

.w-compare__table tr:hover td,
.kamaz-compare__table tr:hover td {
    background: #fafafa;
}

.w-compare__name,
.kamaz-compare__model {
    font-weight: 600;
}

.w-compare__name a,
.kamaz-compare__model a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.w-compare__name a:hover,
.kamaz-compare__model a:hover {
    opacity: 0.75;
}

.w-compare__note,
.kamaz-compare__note {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.75;
}

.w-compare__price,
.kamaz-compare__price {
    font-weight: 600;
    white-space: nowrap;
}

.w-compare__bottom,
.kamaz-compare__bottom {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e5e5;
}

.w-compare__bottom-text,
.kamaz-compare__bottom-text {
    margin: 0;
}


/* -------------------------------------------------------
   Адаптивная версия
   Таблица превращается в аккуратные карточки,
   но без резкого изменения общего стиля
------------------------------------------------------- */

@media (max-width: 768px) {
    .w-compare,
    .kamaz-compare {
        margin: 28px 0;
    }

    .w-compare__head,
    .kamaz-compare__head {
        margin-bottom: 18px;
    }

    .w-compare__text,
    .kamaz-compare__text {
        font-size: 14px;
        line-height: 1.45;
    }

    .w-compare__table,
    .w-compare__table thead,
    .w-compare__table tbody,
    .w-compare__table th,
    .w-compare__table td,
    .w-compare__table tr,
    .kamaz-compare__table,
    .kamaz-compare__table thead,
    .kamaz-compare__table tbody,
    .kamaz-compare__table th,
    .kamaz-compare__table td,
    .kamaz-compare__table tr {
        display: block;
        width: 100%;
    }

    .w-compare__table thead,
    .kamaz-compare__table thead {
        display: none;
    }

    .w-compare__table tr,
    .kamaz-compare__table tr {
        margin-bottom: 18px;
        padding: 14px 0;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        background: transparent;
    }

    .w-compare__table tr:hover td,
    .kamaz-compare__table tr:hover td {
        background: transparent;
    }

    .w-compare__table td,
    .kamaz-compare__table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 9px 0;
        border-bottom: none;
        font-size: 14px;
        line-height: 1.4;
    }

    .w-compare__table td::before,
    .kamaz-compare__table td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        font-weight: 600;
        opacity: 0.75;
    }

    .w-compare__table td:first-child,
    .kamaz-compare__table td:first-child {
        display: block;
        padding-bottom: 13px;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 6px;
    }

    .w-compare__table td:first-child::before,
    .kamaz-compare__table td:first-child::before {
        display: none;
    }

    .w-compare__name,
    .kamaz-compare__model {
        font-size: 16px;
        line-height: 1.3;
    }

    .w-compare__note,
    .kamaz-compare__note {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.35;
    }

    .w-compare__price,
    .kamaz-compare__price {
        font-weight: 600;
        white-space: nowrap;
    }

    .w-compare__bottom,
    .kamaz-compare__bottom {
        margin-top: 24px;
    }

    .w-compare__bottom-text,
    .kamaz-compare__bottom-text {
        font-size: 14px;
        line-height: 1.45;
    }
}

/* Мобильная перевёрнутая таблица сравнения */
.w-compare-matrix-wrap {
    display: none;
}

@media (max-width: 768px) {
    .w-compare__table {
        display: none;
    }

    .w-compare-matrix-wrap {
        display: block;
        position: relative;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        margin-top: 18px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .w-compare-matrix-wrap::after {
        content: '← свайпните таблицу →';
        display: block;
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.3;
        opacity: 0.55;
        text-align: center;
    }

    .w-compare-matrix {
        width: max-content;
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 13px;
        line-height: 1.35;
    }

    .w-compare-matrix th,
    .w-compare-matrix td {
        min-width: 135px;
        max-width: 165px;
        padding: 10px 10px;
        text-align: left;
        vertical-align: top;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        background: #fff;
    }

    .w-compare-matrix thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        min-height: 58px;
        font-weight: 600;
        background: #f5f5f5;
        border-top: 1px solid #e8e8e8;
    }

    .w-compare-matrix thead th a {
        color: #000;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .w-compare-matrix__fixed {
        position: sticky;
        left: 0;
        z-index: 3;
        min-width: 118px !important;
        max-width: 118px !important;
        font-weight: 600;
        background: #f5f5f5 !important;
        border-left: 1px solid #e8e8e8;
    }

    .w-compare-matrix thead .w-compare-matrix__fixed {
        z-index: 4;
        background: #000 !important;
        color: #fff;
    }

    .w-compare-matrix tbody tr:nth-child(even) td,
    .w-compare-matrix tbody tr:nth-child(even) .w-compare-matrix__fixed {
        background: #fafafa;
    }

    .w-compare-matrix td {
        color: #000;
    }

    .w-compare-matrix .w-compare__price {
        white-space: normal;
        font-weight: 600;
    }
}