/* The standing pages: rules, terms, and the responsible-gambling tools.
 *
 * Deliberately plain. These are the pages somebody reads when they are trying
 * to understand a rule that cost them money, or when they are looking for the
 * button that shuts their account - so they are set in long measure, at a size
 * you can actually read, with no cards, no chips and nothing that moves.
 *
 * Inherits the palette from style.css, which has to be loaded first. Colours
 * here go through the tokens rather than being written out, so a palette
 * change moves them - which is exactly what did NOT happen to the handful of
 * inline hexes in style.css, and why hovering a card briefly turned it the
 * colour of the previous brand.
 */

.doc {
  max-width: 74ch;
  margin: 0 auto;
  padding: 32px 20px 96px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.65;
}

.doc h1 {
  color: var(--text-title);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px;
}

.doc__lede {
  color: var(--text-body);
  font-size: 17px;
  margin: 0 0 36px;
}

.doc h2 {
  color: var(--text-title);
  font-size: 20px;
  font-weight: 600;
  margin: 40px 0 10px;
  padding-top: 20px;
  border-top: 1px solid #ffffff14;
}

.doc h3 {
  color: var(--text-title);
  font-size: 16px;
  font-weight: 600;
  margin: 26px 0 6px;
}

.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 0 0 7px; }
.doc strong { color: var(--text-title); font-weight: 600; }
.doc a { color: var(--text-primary); }

.doc code {
  background: var(--background-tertiary);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
}

/* A figure worth not burying in a sentence — a limit, a price, a number of
   days. */
.doc__key {
  display: block;
  background: var(--background-main);
  border-left: 3px solid var(--background-badge);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin: 0 0 18px;
  color: var(--text-title);
}

.doc__note {
  background: var(--background-main);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 18px;
}

/* Used for the things that cannot be undone. Red rather than the brand blue,
   because the point is to slow somebody down at the moment they are about to
   do something permanent. */
.doc__grave {
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 18px;
  color: var(--text-title);
}

.doc__back {
  display: inline-block;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 22px;
}
.doc__back:hover { text-decoration: underline; }

.doc__updated {
  margin-top: 52px;
  padding-top: 18px;
  border-top: 1px solid #ffffff14;
  font-size: 13px;
  color: var(--field-placeholder);
}

/* ---------------------------------------------------------------- forms  */

.rg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 0 0 16px;
}

.rg-field { flex: 1 1 160px; }

.rg-field label {
  display: block;
  font-size: 13px;
  color: var(--text-body);
  margin-bottom: 6px;
}

.rg-field input,
.rg-field select {
  width: 100%;
  box-sizing: border-box;
  background: var(--field-background);
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  color: var(--text-title);
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
}

.rg-field input:focus,
.rg-field select:focus {
  outline: none;
  border-color: var(--text-primary);
}

.rg-btn {
  background: var(--background-badge);
  border: 0;
  border-radius: 10px;
  color: var(--text-inversion);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
}
.rg-btn:hover { filter: brightness(1.1); }
.rg-btn[disabled] { opacity: .5; cursor: default; filter: none; }

.rg-btn--grave {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  color: var(--danger);
}
.rg-btn--grave:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); filter: none; }

.rg-btn--quiet {
  background: transparent;
  border: 1px solid #ffffff2a;
  color: var(--text-body);
}
.rg-btn--quiet:hover { background: #ffffff0f; filter: none; }

.rg-msg {
  border-radius: 10px;
  padding: 12px 15px;
  margin: 0 0 16px;
  font-size: 14px;
}
.rg-msg--ok  { background: color-mix(in srgb, var(--text-outcome-up) 10%, transparent); color: #8ae8a0; }
.rg-msg--err { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

.rg-state {
  font-size: 14px;
  color: var(--text-title);
  background: var(--background-main);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.rg-state em { color: var(--text-body); font-style: normal; }

/* ---------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid #ffffff14;
  padding: 26px 20px 40px;
  text-align: center;
  color: var(--field-placeholder);
  font-size: 13px;
  line-height: 1.9;
}

.foot a {
  color: var(--text-body);
  text-decoration: none;
  margin: 0 10px;
}
.foot a:hover { color: var(--text-primary); text-decoration: underline; }

.foot__age {
  display: inline-block;
  border: 1px solid var(--field-placeholder);
  border-radius: 50%;
  width: 21px;
  height: 21px;
  line-height: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 7px;
  vertical-align: -4px;
}

/* The forgotten-password link, matching the sign-up switch it sits under.
   Quieter than that one on purpose: most people opening the login box are
   logging in, and the two links competing for the same glance is how somebody
   ends up on the wrong one. */
.login__forgot {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: none;
  border: 0;
  color: var(--field-placeholder);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 6px 0;
}
.login__forgot:hover { color: var(--text-primary); text-decoration: underline; }

/* ---------------------------------------------------------------- notices */

/* The strip under the header. Deliberately not a toast and not a modal: the
   things posted here - a delayed draw, a market being voided, a maintenance
   window - are true for hours, and something a member dismisses in the first
   second is something they have not read. It stays until it stops applying. */
.notice {
  background: #04d3bb1f;
  border-bottom: 1px solid #04d3bb3d;
  color: var(--text-title);
  font-size: 14px;
  line-height: 1.5;
  padding: 11px 20px;
}

.notice__row { max-width: 1180px; margin: 0 auto; }
.notice__row + .notice__row { margin-top: 7px; }

.notice__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-primary);
  margin-right: 9px;
  vertical-align: 2px;
}

/* ==========================================================================
   The registration page
   ==========================================================================
   A page rather than the overlay it replaces, so every field has room for the
   rule underneath it. The overlay could only say what was wrong after the
   button was pressed; here it is said while somebody is still in the box.
   ========================================================================== */

.reg {
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.reg__title {
  color: var(--text-title);
  font-size: 27px;
  font-weight: 700;
  margin: 0 0 6px;
}

.reg__sub {
  color: var(--text-body);
  font-size: 15px;
  margin: 0 0 28px;
}
.reg__sub a { color: var(--text-primary); }

.reg__closed { padding-top: 20px; }
.reg__closed h1 { color: var(--text-title); font-size: 24px; margin: 0 0 8px; }

/* The two provider buttons reuse .authbtn from the header menu, but that menu
   is a white panel and this page is not - so only the light variant needs
   re-stating. */
.reg__providers .authbtn--light {
  background: var(--field-background);
  border-color: #ffffff1f;
  color: var(--text-title);
}
.reg__providers .authbtn--light:hover { background: var(--background-tertiary); }

.reg__or {
  display: flex; align-items: center; gap: 12px;
  color: var(--field-placeholder);
  font-size: 13px;
  margin: 18px 0 22px;
}
.reg__or::before, .reg__or::after {
  content: ''; flex: 1; height: 1px; background: #ffffff1f;
}

.reg__field { margin: 0 0 20px; }

.reg__field label {
  display: block;
  color: var(--text-title);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
}

/* Every type the form uses, listed - not a bare `input`, because that would
   also catch the checkbox further down. `email` was missing the first time
   and that one box rendered as a raw white browser input in the middle of
   four dark ones. */
.reg__field input[type="text"],
.reg__field input[type="tel"],
.reg__field input[type="email"],
.reg__field input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--field-background);
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  color: var(--text-title);
  font: inherit;
  font-size: 16px;   /* 16 or iOS zooms the page on focus */
  padding: 13px 14px;
  transition: border-color .15s;
}
.reg__field input:focus { outline: none; border-color: var(--text-primary); }
.reg__field input::placeholder { color: var(--field-placeholder); }

/* The country code is fixed because the account rules are: signup_phone()
   only accepts a Malaysian mobile. A selector offering others would be a
   selector whose other options are all refused. */
.reg__phone { display: flex; }
.reg__cc {
  display: flex; align-items: center;
  background: var(--background-tertiary);
  border: 1px solid #ffffff1f;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  color: var(--text-body);
  font-size: 16px;
  padding: 0 13px;
}
.reg__phone input { border-radius: 0 10px 10px 0 !important; }

.reg__pass { position: relative; }
.reg__pass input { padding-right: 64px !important; }
.reg__peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: var(--text-body); font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 10px;
}
.reg__peek:hover { color: var(--text-primary); }

/* Four segments, not a percentage. A number out of a hundred implies a
   precision this cannot have; four bars says "longer is better" without
   pretending to have measured anything.

   Four real elements rather than pseudo-elements on a nested span with
   display:contents, which was the first attempt - that relies on pseudo
   children of a contents box becoming flex items, which is not something to
   bet a login form on. */
.reg__meter { display: flex; gap: 4px; margin-top: 8px; }
.reg__meter i { flex: 1; height: 3px; border-radius: 2px; background: #ffffff1f; }

.reg__meter[data-level="1"] i:nth-child(-n+1) { background: var(--danger); }
.reg__meter[data-level="2"] i:nth-child(-n+2) { background: #e8a44a; }
.reg__meter[data-level="3"] i:nth-child(-n+3) { background: var(--text-outcome-up); }
.reg__meter[data-level="4"] i                 { background: var(--text-primary); }

.reg__note {
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 7px 0 0;
}
.reg__note--good { color: var(--text-outcome-up); }
.reg__note--bad  { color: var(--danger); }
.reg__note--warn { color: #e8a44a; }

.reg__agree {
  display: flex; align-items: flex-start; gap: 11px;
  color: var(--text-body);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 26px 0 20px;
  cursor: pointer;
}
.reg__agree input {
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--text-primary);
  flex-shrink: 0;
  cursor: pointer;
}
.reg__agree strong { color: var(--text-title); }
.reg__agree a { color: var(--text-primary); }

.reg__go {
  width: 100%;
  background: var(--success);
  border: 0;
  border-radius: 999px;
  color: #04231f;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 15px;
  transition: filter .15s;
}
.reg__go:hover { filter: brightness(1.1); }
.reg__go:disabled { opacity: .6; cursor: default; filter: none; }

.reg__foot {
  color: var(--field-placeholder);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 22px 0 0;
}
.reg__foot a { color: var(--text-body); }

.reg__toplogin { text-decoration: none; display: flex; align-items: center; }