/* ============================================================================
   tables.css — оформление таблиц сравнения.

   Работает поверх обычной <table> из контента: разметку страниц не трогаем,
   всё недостающее — монограммы банков, липкую шапку, сортировку и карточный
   вид на мобильном — навешивает js/tables.js.

   Значит, деталь получают все страницы сравнения сразу, а не одна.
   ============================================================================ */

.eoc-table {
    position: relative;
    overflow-x: auto;
    margin: var(--eoc-s3) 0;
    border-radius: var(--eoc-r-md);
    background: var(--eoc-card);
    box-shadow: var(--eoc-shadow);
    -webkit-overflow-scrolling: touch;
}

.eoc-table > table {
    width: 100%;
    min-width: 780px;
    margin: 0;
    border-collapse: collapse;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* ---- Шапка ---------------------------------------------------------------- */

.eoc-table thead th {
    background: #fff;
    text-align: left;
    padding: 14px var(--eoc-s2);
    border-bottom: 1px solid var(--eoc-line);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--eoc-muted);
    white-space: nowrap;
}

/* Сортируемые столбцы. position: relative нужен стрелке — она рисуется
   абсолютом внутри ячейки. */
.eoc-table th.is-sortable {
    position: relative;
    cursor: pointer;
    user-select: none;
    padding-right: 26px;
}

.eoc-table th.is-sortable:hover { color: var(--eoc-blue); }

.eoc-table th.is-sortable::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: .3;
    transition: transform .15s, opacity .15s;
}

.eoc-table th[data-dir="asc"]::after  { opacity: 1; color: var(--eoc-blue); }
.eoc-table th[data-dir="desc"]::after { opacity: 1; color: var(--eoc-blue); transform: rotate(-135deg); margin-top: -1px; }

/* ---- Ячейки --------------------------------------------------------------- */

.eoc-table tbody td {
    padding: 14px var(--eoc-s2);
    border: 0;
    border-bottom: 1px solid var(--eoc-line);
    font-size: 15.5px;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.eoc-table tbody tr:last-child td { border-bottom: 0; }
.eoc-table tbody tr { transition: background .15s; }
.eoc-table tbody tr:hover { background: #FAFBFF; }

/* Первый столбец — название, оно же якорь строки */
.eoc-table tbody td:first-child {
    font-weight: 500;
    white-space: nowrap;
}

/* ---- Монограмма банка ----------------------------------------------------- */

.eoc-table__logo {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 10px;
    background: var(--eoc-logo-bg, var(--eoc-blue));
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    vertical-align: middle;
    flex: none;
}

.eoc-table td:first-child .eoc-table__cell {
    display: flex;
    align-items: center;
}

/* ---- Мобильный вид: строки превращаются в карточки ------------------------ */

@media (max-width: 720px) {
    .eoc-table {
        overflow: visible;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .eoc-table > table { min-width: 0; }

    .eoc-table thead { display: none; }

    .eoc-table tbody,
    .eoc-table tbody tr,
    .eoc-table tbody td { display: block; width: 100%; }

    .eoc-table tbody tr {
        margin-bottom: var(--eoc-s2);
        padding: var(--eoc-s3);
        border-radius: var(--eoc-r-md);
        background: var(--eoc-card);
        box-shadow: var(--eoc-shadow);
    }

    .eoc-table tbody tr:hover { background: var(--eoc-card); }

    .eoc-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--eoc-s2);
        padding: 7px 0;
        border-bottom: 0;
        font-size: 15px;
        text-align: right;
        white-space: normal;
    }

    /* Подпись столбца берётся из шапки, её проставляет tables.js */
    .eoc-table tbody td::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        color: var(--eoc-muted);
        font-size: 13px;
        text-align: left;
        text-transform: none;
        letter-spacing: 0;
    }

    .eoc-table tbody td:first-child {
        justify-content: flex-start;
        margin-bottom: 6px;
        padding-top: 0;
        font-size: 17px;
        font-weight: 600;
        text-align: left;
        white-space: normal;
    }

    .eoc-table tbody td:first-child::before { display: none; }

    .eoc-table tbody td:last-child { padding-bottom: 0; }
}