/**
 * Plan matrix table component.
 * Extracted from plans page CSS so the matrix can be composed from component contracts.
 */

.plan-matrix-section {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.plan-matrix-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 720px;
}

.plan-matrix-header h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  color: var(--plans-heading, #f7901d);
}

.plan-matrix-header p {
  margin: 0;
  color: var(--plans-muted);
}

.btn-tertiary {
  align-self: flex-start;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 14%);
  color: var(--plans-text);
  padding: 0.6rem 1.4rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 28%);
  color: var(--plans-highlight);
  padding: 0.6rem 1.4rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-outline:hover,
.btn-outline:focus {
  border-color: var(--plans-highlight);
  color: #fff;
}

.plan-matrix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.plan-table-wrapper {
  background: linear-gradient(135deg, rgb(12 26 52 / 92%), rgb(9 20 40 / 88%));
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgb(255 255 255 / 12%);
  overflow-x: auto;
}

body.light-mode.p-plans .plan-table-wrapper {
  background: linear-gradient(135deg, rgb(255 255 255 / 98%), rgb(235 239 255 / 94%));
  border: 1px solid rgb(148 163 184 / 24%);
  box-shadow: 0 18px 36px rgb(148 163 184 / 18%);
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 640px;
  border-radius: 16px;
  overflow: hidden;
}

.plan-table th,
.plan-table td {
  padding: 0.75rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  color: var(--plans-muted);
  line-height: 1.55;
}

body.p-plans .plan-table th:first-child,
body.p-plans .plan-table td:first-child {
  color: var(--plans-text);
}

body.light-mode.p-plans .plan-table th:first-child,
body.light-mode.p-plans .plan-table td:first-child {
  color: #0f172a;
}

body.light-mode.p-plans .plan-table th,
body.light-mode.p-plans .plan-table td {
  border-bottom: 1px solid rgb(203 213 225 / 70%);
  color: var(--plans-subtle);
}

.plan-table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--plans-subtle);
  background: rgb(255 255 255 / 5%);
  font-variant: small-caps;
}

body.light-mode.p-plans .plan-table thead th {
  background: rgb(231 239 255 / 75%);
  color: #475569;
}

.plan-table tbody tr:last-child td {
  border-bottom: none;
}

.plan-table tbody tr:nth-child(even) td {
  background: rgb(255 255 255 / 2%);
}

body.light-mode.p-plans .plan-table tbody tr:nth-child(even) td {
  background: rgb(231 239 255 / 60%);
}

.plan-table tbody tr:hover td {
  background: rgb(247 144 29 / 12%);
  color: var(--plans-text);
}

body.light-mode.p-plans .plan-table tbody tr:hover td {
  background: rgb(255 237 213 / 90%);
  color: #1f2937;
}

.plan-table tbody tr:hover td:nth-child(3) {
  background: rgb(247 144 29 / 20%);
}

.plan-table tbody tr:hover td:nth-child(4) {
  background: rgb(51 86 255 / 20%);
}

body.light-mode.p-plans .plan-table tbody tr:hover td:nth-child(3) {
  background: rgb(255 196 130 / 55%);
}

body.light-mode.p-plans .plan-table tbody tr:hover td:nth-child(4) {
  background: rgb(153 180 255 / 45%);
}

.plan-table tbody td:first-child {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.plan-table thead th:nth-child(3),
.plan-table tbody td:nth-child(3) {
  background: rgb(247 144 29 / 14%);
  color: #fdf4e7;
  font-weight: 600;
  border-left: 1px solid rgb(255 255 255 / 12%);
  border-right: 1px solid rgb(255 255 255 / 12%);
}

.plan-table thead th:nth-child(4),
.plan-table tbody td:nth-child(4) {
  background: rgb(51 86 255 / 16%);
  color: #dfe6ff;
  font-weight: 600;
  border-left: 1px solid rgb(255 255 255 / 12%);
  border-right: 1px solid rgb(255 255 255 / 5%);
}

body.light-mode.p-plans .plan-table thead th:nth-child(3),
body.light-mode.p-plans .plan-table tbody td:nth-child(3) {
  background: rgb(247 144 29 / 8%);
  color: #8b3d00;
  border-left: 1px solid rgb(255 186 120 / 65%);
  border-right: 1px solid rgb(255 186 120 / 35%);
}

body.light-mode.p-plans .plan-table thead th:nth-child(4),
body.light-mode.p-plans .plan-table tbody td:nth-child(4) {
  background: rgb(51 86 255 / 8%);
  color: #1d2f7b;
  border-left: 1px solid rgb(100 126 255 / 40%);
  border-right: 1px solid rgb(100 126 255 / 20%);
}

.feature-included {
  color: #34d399;
  font-weight: 600;
}

.feature-excluded {
  color: rgb(239 68 68 / 90%);
  font-weight: 600;
}

body.light-mode.p-plans .feature-included {
  color: #047857;
}

body.light-mode.p-plans .feature-excluded {
  color: #b91c1c;
}

.plan-table td:nth-child(3).feature-included,
.plan-table td:nth-child(4).feature-included,
.plan-table td:nth-child(3).feature-excluded,
.plan-table td:nth-child(4).feature-excluded {
  color: inherit;
}

.pricing-note {
  margin: 1.5rem 0 0;
  color: var(--plans-muted);
  font-size: 0.9rem;
  text-align: center;
}

.pricing-note a {
  color: var(--plans-highlight);
  font-weight: 600;
}