/* ============================================
   TopCasinoTunisia - Table Styles
   ============================================ */

/* === TABLE WRAPPER === */
.table-wrapper {
  overflow-x: auto;
  overflow-y: visible; /* NEVER hidden */
  border-radius: var(--radius-xl);
  border: 1px solid rgba(231,0,19,0.2);
  background: var(--color-dark-card);
  margin-bottom: 2rem;
}

/* === COMPARISON TABLE === */
.comparison-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.comparison-table thead {
  background: linear-gradient(135deg, #3d0008 0%, #1a0003 100%);
  border-bottom: 2px solid rgba(231,0,19,0.4);
}

.comparison-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

.comparison-table th:first-child { color: var(--color-primary); }

.comparison-table tbody tr {
  border-bottom: 1px solid rgba(231,0,19,0.08);
  transition: background var(--transition-base);
}

.comparison-table tbody tr:hover {
  background: rgba(231,0,19,0.05);
}

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

.comparison-table td {
  padding: 1rem 1.25rem;
  vertical-align: middle;
  color: rgba(255,255,255,0.85);
}

/* === RANK CELL === */
.rank-cell {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-primary);
  text-align: center;
  min-width: 50px;
}

/* === BRAND CELL === */
.brand-cell {
  min-width: 160px;
}

.brand-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: white;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.1;
}

.brand-name {
  font-weight: 700;
  color: var(--color-white);
  font-size: 0.95rem;
}

.brand-tag {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.1rem;
}

/* === RATING CELL === */
.rating-cell { min-width: 130px; }

.rating-stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.star { color: #fbbf24; font-size: 0.85rem; }
.star.empty { color: rgba(255,255,255,0.2); }

.rating-number {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fbbf24;
}

/* === BONUS CELL === */
.bonus-cell { min-width: 160px; }

.bonus-amount {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.95rem;
}

.bonus-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.15rem;
}

/* === TYPE CELL === */
.type-cell { min-width: 120px; }

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.type-casino { background: rgba(231,0,19,0.2); color: #ff6b7a; border: 1px solid rgba(231,0,19,0.3); }
.type-sports { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.25); }
.type-combo { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }

/* === PAYMENT CELL === */
.payment-cell { min-width: 180px; }

.payment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.payment-tag {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}

/* === ACTIONS CELL === */
.actions-cell {
  white-space: nowrap;
  min-width: 160px;
}

.actions-cell .btn {
  width: 100%;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

.actions-cell .btn:last-child { margin-bottom: 0; }

/* === FEATURES CELL === */
.features-cell { min-width: 140px; }

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
}

.feature-check { color: #10b981; font-size: 0.75rem; }
.feature-cross { color: rgba(255,255,255,0.3); font-size: 0.75rem; }

/* === HIDDEN ROWS === */
.brand-row.hidden { display: none; }

/* === SHOW MORE === */
.show-more-container {
  text-align: center;
  padding: 1.5rem;
  border-top: 1px solid rgba(231,0,19,0.1);
}

/* === MOBILE TABLE === */
@media (max-width: 640px) {
  .comparison-table { font-size: 0.8rem; }
  .comparison-table th, .comparison-table td { padding: 0.75rem 0.75rem; }
  .brand-logo { width: 36px; height: 36px; font-size: 0.65rem; }
}