/* Базовые стили для таблицы */
table {
  width: 100%;
  border-collapse: collapse;
  /* line-height: 1.6; */
  margin-top: 24px;
  margin-bottom: 24px;
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #ddd;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
}

tbody tr:nth-child(even) {
  background-color: #fafafa;
}

p {
  margin: 0;
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media screen and (max-width: 767px) {
  /* Блокируем табличное представление */
  table,
  tbody,
  tr,
  td,
  th {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Скрываем заголовок (шапку) — он не нужен в карточках */
  thead {
    display: none;
  }

  /* Каждая строка — отдельная карточка */
  tr {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    padding: 8px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }

  /* Все ячейки — как строчные блоки с метками */
  td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 10px 16px;
    background: transparent !important;
  }
  th {display: none;}
  td:last-child {
    border-bottom: none;
  }

  /* Генерируем подписи через псевдоэлементы */
  td:before {
    /* content: attr(data-label); */
    font-weight: 700;
    color: #333;
    min-width: 120px;
    flex-shrink: 0;
    margin-right: 12px;
    /* font-size: 0.9em; */
  }

  /* Для первой ячейки (название тарифа) — делаем акцент */
  td:first-child {
    font-weight: 600;
    /* font-size: 1.1em; */
    background: #f9f9f9 !important;
    border-radius: 6px 6px 0 0;
  }

  td:first-child:before {
    font-weight: 700;
  }

  /* Для ячейки с ценой — выделяем */
  td:nth-child(2) {
    /* font-size: 1.2em; */
    color: #b22234;
    font-weight: 700;
  }

  /* Ссылки внутри ячеек не ломаются */
  td a {
    word-break: break-word;
  }

  /* Убираем фоновое чередование на мобильных (оно не нужно) */
  tbody tr:nth-child(even) {
    background-color: transparent;
  }

  /* Дополнительно: если текст длинный — переносим */
  td {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}