/*
 * TEN-17 — стилі перемикача варіантів.
 * Ціль на сервері: /bitrix/templates/printshim_copy/ten17/ten-variants.css
 * Акцентний колір сайту (помаранчевий) — #f68521, взято з template_styles.css
 * (.lang-choose>a:hover, h1-block акценти).
 *
 * Специфічність рядка/клітинки таблиці навмисно не нижча за
 * .table-responsive > .table > tbody > tr > td (Bootstrap 3.3.7 .table-bordered),
 * інакше стилі Bootstrap перебивають ці правила.
 */
.table-responsive > table.ten-variants > tbody > tr {
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.table-responsive > table.ten-variants > tbody > tr:hover {
    background-color: #fff4ea;
}

.table-responsive > table.ten-variants > tbody > tr.is-selected {
    background-color: #fff1e2;
    box-shadow: inset 3px 0 0 #f68521;
}

.table-responsive > table.ten-variants > tbody > tr.is-selected > td:first-child {
    font-weight: 600;
    color: #c9660f;
}

/* нативний radio у першій клітинці, стилізований під кружок вибору */
.table-responsive > table.ten-variants > tbody > tr > td:first-child {
    position: relative;
    padding-left: 28px;
}

.ten-variants__radio {
    position: absolute;
    left: 6px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #f68521;
}

.ten-variants__radio:focus-visible {
    outline: 2px solid #f68521;
    outline-offset: 2px;
}

/* колонка ціни: без JS порожня скрізь -> ховаємо через data-price-empty з розмітки;
   JS знімає атрибут, щойно знаходить непорожню ціну. */
.table-responsive > table.ten-variants[data-price-empty="1"] > thead > tr > th.ten-variants__price,
.table-responsive > table.ten-variants[data-price-empty="1"] > tbody > tr > td.ten-variants__price {
    display: none;
}

.ten-variants th.ten-variants__price,
.ten-variants td.ten-variants__price {
    white-space: nowrap;
}

.ten-variants-selected {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0 0 12px;
    padding: 8px 15px;
    background: #fff8f1;
    border: 1px solid #f6d9b8;
    border-radius: 6px;
    box-sizing: border-box;
}

.ten-variants-selected__hint {
    color: #888;
    font-size: 14px;
    font-style: italic;
}

.ten-variants-selected__label {
    color: #555;
    font-size: 14px;
}

.ten-variants-selected__price {
    font-size: 18px;
    font-weight: 700;
    color: #c9660f;
}

/* мобільна версія: без горизонтального скролу, таблиця стається списком карток */
@media (max-width: 767px) {
    .table-responsive.ten-variants-wrap {
        overflow-x: visible;
    }

    table.ten-variants,
    table.ten-variants > tbody,
    .table-responsive > table.ten-variants > tbody > tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    table.ten-variants > thead {
        display: none;
    }

    .table-responsive > table.ten-variants > tbody > tr {
        box-sizing: border-box;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-bottom: 8px;
        padding: 6px 10px;
    }

    .table-responsive > table.ten-variants > tbody > tr.is-selected {
        box-shadow: inset 3px 0 0 #f68521;
    }

    .table-responsive > table.ten-variants > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
        padding: 4px 0;
        border: none;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .table-responsive > table.ten-variants > tbody > tr > td:first-child {
        padding-left: 22px;
    }

    .ten-variants__radio {
        left: 0;
    }

    table.ten-variants td::before {
        content: attr(data-th);
        font-weight: 600;
        padding-right: 8px;
        flex: 0 0 auto;
    }

    .table-responsive > table.ten-variants[data-price-empty="1"] > tbody > tr > td.ten-variants__price {
        display: none;
    }

    table.ten-variants td.ten-variants__price:empty {
        display: none;
    }

    .ten-variants-selected {
        flex-direction: column;
        gap: 2px;
    }
}