/* ==========================================================================
   Tournament Fees page - page-specific accent theming and layout.
   Header/nav-bar theming is shared (see tournament-accent.css). This file
   covers elements unique to this page's own markup.
   ========================================================================== */

/* -- Cards ----------------------------------------------------------------
   Matches the card look used on the Info page (tournamentInfo.css), so the
   Max Events line, fee table, and discounts table each sit in their own
   white card instead of running directly on the page background.
   ---------------------------------------------------------------------- */

.tournament-fees-page {
  --tournament-accent-color: var(--tournament-accent, var(--color-bracket-ace-400));
  --tournament-tint: #ffffff;
  --tournament-tint: color-mix(in srgb, var(--tournament-accent-color) 5%, white);

  background-color: var(--tournament-tint);
  padding: 1.5rem 1.25rem;
  border-radius: 12px;
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
}

.tournament-fees-page .container {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

.tournament-fees-page .container table {
  width: 100%;
  margin: 0;
}

.tournament-fees-page .container h2.discounts {
  margin-top: 0;
}

/* -- Text/background accent color -------------------------------------------
   bracketAce.css hard-codes these to #829d9e: th.ba/th.ba-span (table
   header background) and label.ba-xxl (the "Maximum Events per Player"
   label). !important as insurance against the same specificity-tie issue
   the nav bar hit - these should already win on specificity alone, but
   that assumption proved wrong once already.
   ---------------------------------------------------------------------- */

.tournament-fees-page th.ba,
.tournament-fees-page th.ba-span {
  background: var(--tournament-accent-color) !important;
  color: var(--tournament-accent-text, #fff) !important;
}

.tournament-fees-page label.ba-xxl {
  color: var(--tournament-accent-color) !important;
}