/* MYCS33 customer ranking restyle
   Load this stylesheet after the existing SpecialRewardDetails page styles.
   Scope: current Live Ranking / Winner tabs, their tables, and the member rank note.
   No markup or ranking data changes are required. */

.ranking,
.ranking.selected {
  box-sizing: border-box;
  height: 50px !important;
  bottom: 0;
  opacity: 1 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.ranking:not(.selected) {
  background: #211a12 !important;
  color: #c4ae87 !important;
  border: 1px solid #76592e;
  border-bottom: 0;
}

.ranking:not(.selected):hover {
  background: #352617 !important;
  color: #ffe0a0 !important;
}

.ranking.selected {
  background: linear-gradient(180deg, #ffe29b, #bf8e3c) !important;
  color: #221608 !important;
  border: 1px solid #eac77c;
  border-bottom: 0;
  box-shadow: 0 -5px 20px rgba(230, 177, 82, .25), inset 0 1px rgba(255, 255, 255, .45);
}

#ranking,
#winner {
  background: linear-gradient(160deg, #211a12 0%, #13100d 60%, #0d0b09 100%) !important;
  color: #fff3d9 !important;
  border: 1px solid #76592e !important;
  border-bottom: 2px solid #c7974a !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .35);
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#ranking table,
#winner table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  background: transparent !important;
  font-variant-numeric: tabular-nums;
}

#ranking tr:first-child td,
#winner tr:first-child td {
  background: #3a2b1b !important;
  color: #f2d48d !important;
  padding: 15px 18px !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0 !important;
  border-bottom: 1px solid #8c6b3d !important;
}

#ranking tr:not(:first-child) td,
#winner tr:not(:first-child) td {
  background: transparent;
  color: #f4edde;
  padding: 14px 18px !important;
  font-size: 13px;
  font-weight: 600;
  border: 0 !important;
  border-bottom: 1px solid rgba(232, 199, 119, .15) !important;
  transition: background .2s ease, color .2s ease;
}

#ranking tr:nth-child(odd):not(:first-child) td,
#winner tr:nth-child(odd):not(:first-child) td {
  background: rgba(255, 234, 181, .025);
}

#ranking tr:not(:first-child):hover td,
#winner tr:not(:first-child):hover td {
  background: rgba(224, 171, 75, .16) !important;
  color: #ffe6ab !important;
}

#ranking tr:last-child td,
#winner tr:last-child td {
  border-bottom: 0 !important;
}

#ranking tr:not(:first-child) td:first-child,
#winner tr:not(:first-child) td:first-child {
  width: 90px !important;
  color: #e9c470;
  font-weight: 900;
}

#ranking tr:nth-child(2) td:first-child { color: #ffe49a !important; }
#ranking tr:nth-child(3) td:first-child { color: #d9e0e7 !important; }
#ranking tr:nth-child(4) td:first-child { color: #c99d75 !important; }

#ranking tr:not(:first-child) td:last-child {
  color: #f4d589;
  font-weight: 900;
}

#winner + .mt-3.mb-5.primary-text {
  display: block;
  margin-top: 15px !important;
  padding: 15px 19px;
  border: 1px solid #92703b;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(204, 154, 62, .22), rgba(204, 154, 62, .055));
  color: #ffdf95 !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
}

@media (max-width: 600px) {
  .ranking, .ranking.selected { font-size: 11px !important; letter-spacing: .7px; }
  #ranking tr:first-child td, #winner tr:first-child td { padding: 12px 8px !important; font-size: 10px; letter-spacing: .7px; }
  #ranking tr:not(:first-child) td, #winner tr:not(:first-child) td { padding: 12px 8px !important; font-size: 11px; }
  #ranking tr:not(:first-child) td:first-child { width: 42px !important; }
  #winner table { min-width: 490px; }
  #winner + .mt-3.mb-5.primary-text { padding: 12px 14px; font-size: 12px; }
}