/**
 * Transposed WORLD PLAN liverow — tiers across the top, features down the left.
 * Typography and colours align with worldplan-geo-liverow.css (standard tier-row table).
 */

.wp-page .wp-table.wp-liverow.wp-liverow--transposed {
  table-layout: fixed;
  width: 100%;
}

/* Corner header — same as standard table first thead cell (purple) */
.wp-page .wp-table.wp-liverow.wp-liverow--transposed .wp-liverow__corner {
  background: #774fda;
  border-color: #fff;
  vertical-align: middle;
  text-align: center;
  padding: 10px 6px;
  min-width: 132px;
  white-space: nowrap;
}

.wp-page .wp-table.wp-liverow.wp-liverow--transposed .wp-liverow__worldwide {
  display: inline;
  font-size: 16px;
  font-weight: bold;
  line-height: 120%;
  color: #fff;
  white-space: nowrap;
}

.wp-page .wp-table.wp-liverow.wp-liverow--transposed .wp-liverow__worldwide sup {
  display: inline;
  font-size: 70%;
  line-height: 0;
  vertical-align: super;
  white-space: nowrap;
}

/* Tier columns — same purple header band as standard table thead */
.wp-page .wp-table.wp-liverow.wp-liverow--transposed thead th.wp-liverow__tier,
.wp-page .wp-table.wp-liverow.wp-liverow--transposed thead th.wp-liverow__tier * {
  background: #774fda !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  line-height: 120%;
  border-color: #fff;
  vertical-align: middle;
  text-align: center;
  padding: 10px 4px;
}

/* Feature labels — same band as plan row header column (do not style `*` — breaks sup line-height) */
.wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody th.wp-liverow__feature {
  background: #f8f0ff !important;
  color: #111 !important;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.45;
  border-color: #dbdbdb;
  text-align: left;
  vertical-align: middle;
  padding: 12px 10px;
  box-sizing: border-box;
  width: 16%;
  min-width: 148px;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody th.wp-liverow__feature sup {
  font-size: 70%;
  line-height: 0;
  vertical-align: super;
  font-weight: bold;
}

.wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody th.wp-liverow__feature .wp-liverow__chooseone {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  color: #111 !important;
}

.wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody th.wp-liverow__feature--action {
  background: #f8f0ff !important;
  border-color: #dbdbdb;
}

.wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody th.wp-liverow__plan {
  display: none;
}

/* Body cells — vertical column bands (not horizontal row striping from liverow.css) */
.wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody td {
  vertical-align: middle;
  text-align: center;
  font-size: 16px;
  line-height: 130%;
  background: #fff !important;
}

.wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody tr:nth-child(even) td {
  background: #fff !important;
}

/* Alternate tier columns: 20GB, 50GB, 100GB (2nd, 4th, 6th data columns) */
.wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody tr > td:nth-child(2n + 1) {
  background: #f8f8f8 !important;
}

@media (min-width: 769px) {
  .wp-page .wp-table.wp-liverow.wp-liverow--transposed .wp-liverow__corner,
  .wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody th.wp-liverow__feature {
    width: 16% !important;
    min-width: 148px;
    max-width: none;
  }

  .wp-page .wp-table.wp-liverow.wp-liverow--transposed thead th:not(.wp-liverow__corner),
  .wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody td {
    width: calc(84% / 7);
  }
}

@media (max-width: 768px) {
  .wp-page .wp-table-wrap:has(.wp-liverow--transposed) .wp-table.wp-liverow {
    width: 280%;
    min-width: 100%;
  }

  .wp-page .wp-table.wp-liverow.wp-liverow--transposed tbody th.wp-liverow__feature {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 148px;
    padding: 12px 8px;
    box-shadow: 4px 0 8px rgba(26, 16, 51, 0.12);
  }

  .wp-page .wp-table.wp-liverow.wp-liverow--transposed thead th.wp-liverow__corner {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 148px;
  }
}