/* ============================================================================
   The two legal pages — the Terms (html/terms/index.html) and the Privacy Policy
   (html/privacy/index.html). One sheet for both: same card, same readable text.
   Their tables reuse the site's history table (.topup-history-table, topup.css).
   ============================================================================ */

/* The page: one readable column, centred. */
.legal-page {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.legal-title {
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-title-yellow);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
}
.legal-card {
  padding: 18px 24px 8px;
  background: var(--color-panel);
  border: 3px solid var(--color-line);
}

/* ---- the text ---- */
.legal-text {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.4;
  color: var(--color-text-dim);
}
.legal-text p { margin: 0 0 12px; }
.legal-text ul { margin: 0 0 12px; padding-left: 22px; }
.legal-text li { margin: 0 0 6px; }
.legal-text strong { color: var(--color-text); font-weight: normal; }
.legal-text a { color: var(--color-cyan); }
.legal-updated { color: var(--color-faint); }
.legal-h {
  margin: 26px 0 10px;
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 1px;
  color: var(--color-pink-light);
}

/* A table scrolls sideways inside its own box on a narrow phone — never the whole page. */
.legal-table-wrap {
  margin: 0 0 14px;
  overflow-x: auto;
}
.legal-table-wrap td { vertical-align: top; }

@media (max-width: 560px) {
  .legal-card { padding: 14px 14px 4px; }
  /* every column stays on screen — a sideways-scrolling table hides its last column on a phone */
  .legal-table-wrap .topup-history-table { min-width: 0; }
  .legal-table-wrap .topup-history-table :is(th, td) { padding-left: 6px; padding-right: 6px; }
  .legal-text { font-size: 18px; }
}