/* ── CUSTOM PREDICTION VS POLYMARKET TABLE STYLES (LIGHT THEME) ── */

.bx-table-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(80, 20, 160, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03) !important;
}

.bx-table-wrap::before {
  display: none !important;
}

.bx-table-scroll {
  overflow-x: auto;
}

.bx-table-wrap--center-outer {
  display: flex;
  justify-content: center;
}

.bx-table-wrap--auto {
  display: inline-block;
  width: auto;
  min-width: min(100%, 800px);
  max-width: 100%;
}

.bx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  table-layout: auto;
}

/* Header */
.bx-table thead tr {
  background: linear-gradient(135deg, #4b1fa0 0%, #681fbc 100%) !important;
  border-bottom: none !important;
}

.bx-table thead th {
  font-family: "Exo 2", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 20px 24px !important;
}

.bx-table thead th:first-child,
.bx-table thead th:nth-child(2),
.bx-table thead th:nth-child(3),
.bx-table thead th:nth-child(4) {
  color: #e8e4f5 !important;
}

/* Body Rows */
.bx-table tbody tr {
  border-bottom: 1px solid rgba(80, 20, 160, 0.08) !important;
  transition: background 0.2s ease !important;
}

.bx-table tbody tr:nth-child(odd) {
  background: #F6F5FA !important;
}

.bx-table tbody tr:nth-child(even) {
  background: #e8e8e8 !important;
}

.bx-table tbody tr:hover {
  background: #e0d5f7 !important;
}

.bx-table tbody td {
  padding: 20px 24px !important;
  color: #000 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  border: none !important;
}

/* Feature Name (First Column) */
.bx-table tbody td:first-child {
  font-family: "Exo 2", sans-serif !important;
  font-weight: 700 !important;
  color: #211c38 !important;
  font-size: 15px !important;
  border-right: none !important;
  vertical-align: middle !important;
}

.bx-table tbody td:nth-child(2) {
  border-right: none !important;
}

/* Icons */
.bx-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Cell icons alignment */
.bx-cell-icon {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Teal Icons (Table 1) */
.bx-icon--cyan {
  background: rgba(0, 150, 136, 0.06) !important;
  border: 1.5px solid rgba(0, 150, 136, 0.2) !important;
  color: #00897b !important;
}

.bx-table tbody tr:hover .bx-icon--cyan {
  background: rgba(0, 150, 136, 0.12) !important;
  border-color: rgba(0, 150, 136, 0.4) !important;
  color: #00695c !important;
}

/* Purple Icons (Table 2) */
.bx-icon--purple {
  background: rgba(78, 31, 163, 0.06) !important;
  border: 1.5px solid rgba(78, 31, 163, 0.2) !important;
  color: #4e1fa3 !important;
}

.bx-table tbody tr:hover .bx-icon--purple {
  background: rgba(78, 31, 163, 0.12) !important;
  border-color: rgba(78, 31, 163, 0.4) !important;
  color: #37127a !important;
}

/* Yellow Icons (Table 3) */
.bx-icon--yellow {
  background: rgba(245, 210, 85, 0.06) !important;
  border: 1.5px solid rgba(245, 210, 85, 0.2) !important;
  color: #c49a00 !important;
}

.bx-table tbody tr:hover .bx-icon--yellow {
  background: rgba(245, 210, 85, 0.12) !important;
  border-color: rgba(245, 210, 85, 0.4) !important;
  color: #9c7b00 !important;
}

/* Responsive Table Overrides */
@media (max-width: 1199px) {
  .bx-table thead th {
    padding: 16px 20px !important;
  }

  .bx-table tbody td {
    padding: 16px 20px !important;
  }
}

@media (max-width: 991px) {
  .bx-table thead th {
    padding: 15px 18px !important;
    font-size: 13px !important;
  }

  .bx-table tbody td {
    padding: 15px 18px !important;
    font-size: 13.5px !important;
  }
}

@media (max-width: 767px) {
  .bx-table thead th {
    padding: 14px 16px !important;
    font-size: 11px !important;
  }

  .bx-table tbody td {
    padding: 14px 16px !important;
    font-size: 12px !important;
  }

  .bx-table tbody td:first-child {
    font-size: 12.5px !important;
  }

  .bx-icon {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 480px) {
  .bx-table thead th {
    padding: 10px 12px !important;
    font-size: 10px !important;
  }

  .bx-table tbody td {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }

  .bx-table tbody td:first-child {
    font-size: 11.5px !important;
  }

  .bx-icon {
    width: 26px !important;
    height: 26px !important;
  }
}