/* контейнер */

.table-container{
    width:100%;
    margin:20px 0;
    overflow-x:auto;
    font-family:'Open Sans',sans-serif;
}


/* таблица */

.table-container .repair-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    font-size:14px;
}


/* заголовок */

.table-container .repair-table thead tr{
    background:#3b5db8;
    color:#fff;
}


/* ячейки */

.table-container .repair-table th,
.table-container .repair-table td{
    padding:12px 15px;
    border:1px solid #ddd;
}


/* значения */

.table-container .repair-table td span{
    display:block;
}


/* первая колонка жирная */

.table-container .repair-table td:first-child span{
    font-weight:600;
}


/* zebra */

.table-container .repair-table tbody tr:nth-child(odd){
    background:#fff;
}

.table-container .repair-table tbody tr:nth-child(even){
    background:#f7f7f7;
}

.table-container .repair-table{
font-variant-numeric: tabular-nums;
}


/* ---------------- DESKTOP ---------------- */

@media (min-width:769px){

    .table-container .repair-table{
        table-layout:fixed;
    }

    .table-container .repair-table thead th{
        font-size:18px;
    }

    /* первый столбец */

    .table-container .repair-table th:first-child,
    .table-container .repair-table td:first-child{
        width:1%;
        white-space:nowrap;
        text-align:left;
    }

    .table-container .repair-table td:first-child span{
        text-align:left;
    }

    /* остальные столбцы */

    .table-container .repair-table th:not(:first-child),
    .table-container .repair-table td:not(:first-child){
        text-align:center;
    }

    .table-container .repair-table td:not(:first-child) span{
        text-align:center;
    }

    /* ограничение второго столбца для 2-колоночных таблиц */

    .table-container .repair-table th:nth-child(2),
    .table-container .repair-table td:nth-child(2){
        max-width:50%;
        white-space:normal;
        word-break:break-word;
    }

    /* hover только desktop */

    .table-container .repair-table tbody tr:hover td{
        background:#eef3ff;
    }

}



/* ---------------- MOBILE ---------------- */

@media (max-width:768px){

    /* убираем tap highlight */

    .table-container .repair-table tr{
        -webkit-tap-highlight-color:transparent;
    }

    /* скрываем шапку */

    .table-container .repair-table thead{
        display:none;
    }

    /* карточки */

    .table-container .repair-table,
    .table-container .repair-table tbody,
    .table-container .repair-table tr{
        display:block;
        width:100%;
    }

    .table-container .repair-table tr{
        margin-bottom:15px;
        border:2px solid #3b5db8;
        background:#fff;
        box-shadow:0 2px 6px rgba(0,0,0,.05);
    }

    /* фикс стороннего padding */

    .service_new .repair-table td:nth-child(2){
        padding-left:15px !important;
    }

    /* строки карточки */

    .table-container .repair-table td{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;

        padding:10px 12px;

        border:none;
        border-bottom:1px solid #eee;
        background:transparent;
    }

    .table-container .repair-table td:last-child{
        border-bottom:none;
    }

    /* label */

    .table-container .repair-table td::before{
        content:attr(data-label);
        font-weight:600;
        color:#3b5db8;
        flex:0 0 auto;
    }

    /* значение */

    .table-container .repair-table td span{
        flex:1 1 auto;
        min-width:0;
        text-align:right;
    }

    /* перенос длинного текста */

    .table-container .repair-table td:first-child span,
    .table-container .repair-table td:nth-child(2) span{
        white-space:normal;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    /* цены не переносим */

    .table-container .repair-table td:not(:first-child):not(:nth-child(2)) span{
        white-space:nowrap;
    }

    /* строка услуги */

    .table-container .repair-table td:first-child{
        background:#3b5db8;
        color:#fff;
        font-weight:600;
    }

    .table-container .repair-table td:first-child::before{
        color:#fff;
    }

}