body { background-color: #f8faff; }
.hero-compare {
  padding: 160px 0 80px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: white;
  text-align: center;
}
.hero-compare h1 { font-size: 2.5rem; margin-bottom: 15px; font-weight: 700; }
.hero-compare h1 span { color: var(--accent); }
.hero-compare p { max-width: 600px; margin: 0 auto; opacity: 0.9; font-size: 1.1rem; }

.compare-container { max-width: 1200px; margin: -40px auto 80px; padding: 0 20px; position: relative; z-index: 10; }

.selection-panel {
  background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); margin-bottom: 40px;
}
.selection-panel h3 { text-align: center; margin-bottom: 25px; color: var(--dark); font-size: 1.3rem; }
.select-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.custom-select {
  position: relative;
}
.custom-select select {
  width: 100%; padding: 15px 20px; border: 2px solid #e2e8f0; border-radius: 12px;
  font-family: 'Poppins', sans-serif; font-size: 1rem; color: var(--dark);
  background: #f8fafc; appearance: none; outline: none; transition: all 0.3s ease;
  cursor: pointer;
}
.custom-select select:focus { border-color: var(--primary); background: white; }
.custom-select::after {
  content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--gray); pointer-events: none;
}

.compare-table-container {
  background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  overflow: hidden; display: none; /* Hidden initially */
}
.table-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 800px; }

.compare-table th, .compare-table td {
  padding: 25px 20px; text-align: center; border-bottom: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
  vertical-align: middle;
}
.compare-table th:last-child, .compare-table td:last-child { border-right: none; }
.compare-table tr:last-child td { border-bottom: none; }

/* Left Column (Feature Names) */
.compare-table td:first-child {
  background: #f8fafc; font-weight: 600; color: var(--dark); text-align: left; width: 220px;
  position: sticky; left: 0; z-index: 2; box-shadow: 5px 0 10px rgba(0,0,0,0.02);
}
.compare-table th:first-child {
  background: #f1f5f9; position: sticky; left: 0; z-index: 3; width: 220px; border-bottom: 2px solid #e2e8f0;
}

/* Header Row with Logos */
.compare-table th { background: white; border-bottom: 2px solid #e2e8f0; padding-top: 30px; }
.uni-header { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.uni-logo-wrapper {
  width: 100px; height: 100px; border-radius: 50%; padding: 5px; background: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center;
}
.uni-logo-wrapper img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.uni-header h4 { font-size: 1.1rem; color: var(--dark); font-weight: 700; margin: 0; }

/* Data Cells */
.data-val { font-size: 0.95rem; color: var(--gray); font-family: 'Poppins', sans-serif; font-weight: 500; }
.data-val.highlight { color: #059669; font-weight: 600; background: #ecfdf5; padding: 4px 12px; border-radius: 20px; display: inline-block; }

/* Progress bar styles */
.progress-bar-container {
  width: 100%; background: #e2e8f0; border-radius: 10px; height: 10px; margin-top: 8px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; background: #10b981; border-radius: 10px; transition: width 0.5s ease-out;
}

/* Star styles */
.star-rating i { color: #f59e0b; margin-right: 2px; }

/* Empty State */
.empty-state { text-align: center; padding: 80px 20px; }
.empty-state i { font-size: 4rem; color: #cbd5e1; margin-bottom: 20px; }
.empty-state h3 { font-size: 1.5rem; color: var(--dark); margin-bottom: 10px; }
.empty-state p { color: var(--gray); max-width: 400px; margin: 0 auto; }

@media (max-width: 900px) {
  .select-wrapper { grid-template-columns: 1fr; }
  .compare-table td:first-child, .compare-table th:first-child { width: 150px; font-size: 0.9rem; }
  .uni-logo-wrapper { width: 80px; height: 80px; }
}
@media (max-width: 600px) {
  .hero-compare { padding: 130px 20px 60px; }
  .hero-compare h1 { font-size: 2rem; }
  .compare-container { margin-top: -30px; }
  .selection-panel { padding: 20px; }
  .compare-table td, .compare-table th { padding: 15px 10px; }
}