/* Comparison Table Styles */

.comparison-section {
  padding: var(--spacing-xxl) var(--spacing-md);
}

.comparison-container {
  max-width: 1000px;
  margin: 0 auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.comparison-table thead {
  background-color: var(--primary);
  color: #ffffff;
}

.comparison-table th {
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: var(--font-weight-bold);
  border-bottom: 2px solid var(--primary);
}

.comparison-table th:first-child {
  text-align: left;
}

.comparison-table td {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.comparison-table tbody tr:nth-child(even) {
  background-color: var(--accent);
}

.comparison-table tbody tr:hover {
  background-color: var(--accent-2);
}

.comparison-table .feature-name {
  font-weight: var(--font-weight-bold);
  color: var(--text);
}

.comparison-icon {
  text-align: center;
  font-size: 1.5rem;
}

.comparison-icon.check {
  color: var(--success);
}

.comparison-icon.cross {
  color: var(--error);
}

.comparison-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.comparison-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Mobile Responsive - Keep table semantics and allow horizontal scroll */
@media (max-width: 768px) {
  .comparison-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: var(--radius-md);
  }

  .comparison-table thead {
    display: table-header-group;
  }

  .comparison-table th,
  .comparison-table td {
    min-width: 200px;
    padding: var(--spacing-md);
  }

  .comparison-table th:first-child,
  .comparison-table td:first-child {
    min-width: 260px;
    white-space: normal;
  }
}