/* ============================================================
   Checkout sheet — the UID step behind a game top-up's Buy.

   2026-10-26, /games/ PUBG Mobile UC only. The card's Buy used to hand the
   reader straight to Crisp; it now opens this <dialog>, which takes the
   Player ID (UID) and the package, then passes the whole order to the chat
   in one message. Built and wired by javascripts/checkout.js, so there is no
   markup in the page to style — these selectors are the sheet's own, and it
   lives outside .md-typeset (it is appended to <body>), so none of the
   .md-typeset scoping in the other sheets reaches it.

   Colours come from the :root tokens in extra.css. The panel is white with
   the site's 1px #c7c7c7 rule; the button is the same red as the /boosting/
   configurator's CTA, which is the site's only other full-width button.
   ============================================================ */

body.ab-checkout-open {
  overflow: hidden;
}

.ab-checkout {
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  max-height: min(92dvh, 780px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ab-line);
  border-radius: 0;
  background: var(--ab-bg);
  color: var(--ab-text);
  font-family: "PingFang SC", "Microsoft YaHei", Inter, -apple-system,
    "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.ab-checkout::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

/* A [hidden] field on a grid/flex parent keeps its box unless the UA's
   display:none is spelled out again — the package row is hidden this way
   when prices.json has not arrived. */
.ab-checkout [hidden] {
  display: none !important;
}

.ab-checkout__panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  margin: 0;
}

/* ------------------------------------------------------------- header */

.ab-checkout__head {
  position: relative;
  padding: 22px 24px 0;
}

.ab-checkout__kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ab-text-muted);
}

.ab-checkout__title {
  margin: 0;
  padding-right: 36px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ab-text);
}

.ab-checkout__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ab-text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ab-checkout__close:hover,
.ab-checkout__close:focus {
  color: var(--ab-text);
}

/* ------------------------------------------------------------ progress */

.ab-checkout__steps {
  display: flex;
  gap: 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.ab-checkout__steps li {
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ab-text-faint);
}

.ab-checkout__steps li::before {
  content: "0" attr(data-step-mark);
  margin-right: 6px;
}

.ab-checkout__steps li.is-current {
  border-bottom-color: var(--ab-accent);
  color: var(--ab-text);
}

/* --------------------------------------------------------------- body */

.ab-checkout__body {
  display: grid;
  gap: 14px;
  padding: 18px 24px 6px;
  overflow-y: auto;
}

/* The body's gap only separates the two steps from each other; each step
   spaces its own children, so the summary, the how-to list and the note do
   not butt against one another. */
.ab-checkout__step {
  display: grid;
  gap: 14px;
  align-content: start;
}

.ab-checkout__field {
  display: block;
  margin: 0;
}

.ab-checkout__label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ab-text-muted);
}

/* Stated, not inherited: a form control takes neither the family nor the
   size from its parent unless told, and 16px on the input is what keeps iOS
   from zooming the page when the field is focused. */
.ab-checkout__input,
.ab-checkout__select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--ab-line);
  border-radius: 0;
  background: var(--ab-bg);
  color: var(--ab-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.ab-checkout__input {
  letter-spacing: 0.06em;
}

.ab-checkout__input::placeholder {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ab-text-faint);
}

.ab-checkout__select {
  height: 44px;
  font-size: 15px;
  cursor: pointer;
}

.ab-checkout__input:hover,
.ab-checkout__select:hover {
  border-color: var(--ab-text-muted);
}

.ab-checkout__input:focus,
.ab-checkout__select:focus {
  outline: 2px solid var(--ab-accent-deep);
  outline-offset: 1px;
  border-color: var(--ab-accent-deep);
}

.ab-checkout__input[aria-invalid="true"] {
  border-color: var(--ab-red);
}

.ab-checkout__hint {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ab-text-muted);
}

/* Red on white at 5.4:1 — carries text, so it takes the dark red rather
   than the pink one the hairline accents use. */
.ab-checkout__error {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--ab-red);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ab-red);
}

.ab-checkout__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding: 12px 14px;
  border: 1px solid var(--ab-line);
  background: var(--ab-panel-2);
  font-size: 14px;
  line-height: 1.4;
}

.ab-checkout__sum-k {
  color: var(--ab-text-muted);
}

.ab-checkout__sum-v {
  text-align: right;
  font-weight: 700;
  color: var(--ab-text);
}

/* The order reference is the one row a reader copies rather than reads, so
   it sits in a column of its own with the button beside it. */
.ab-checkout__sum-v--ref,
.ab-checkout__sum-v--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ab-checkout__sum-v--ref {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.ab-checkout__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.ab-checkout__acct {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  word-break: break-all;
  text-align: right;
}

.ab-checkout__acct-name {
  font-weight: 700;
}

/* The placeholder sentence ("account details come in chat") and the chat
   route's line are prose, not an account number: at 390px the bold value
   weight turned that column into a four-line slab. */
.ab-checkout__acct-note {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: right;
}

.ab-checkout__copy {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--ab-line);
  border-radius: 0;
  background: var(--ab-bg);
  color: var(--ab-accent-deep);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.ab-checkout__copy:hover,
.ab-checkout__copy:focus {
  border-color: var(--ab-accent-deep);
  color: var(--ab-text);
}

.ab-checkout__copy.is-copied {
  border-color: var(--ab-green);
  color: var(--ab-green);
}

/* ------------------------------------------------------- method + how */

.ab-checkout__methods {
  margin: 0;
  padding: 0;
  border: 0;
}

.ab-checkout__methods .ab-checkout__label {
  padding: 0;
}

.ab-checkout__method {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--ab-line);
  cursor: pointer;
}

.ab-checkout__method input {
  grid-row: span 2;
  margin: 3px 0 0;
  accent-color: var(--ab-accent-deep);
}

.ab-checkout__method:has(input:checked) {
  border-color: var(--ab-accent-deep);
  background: var(--ab-panel-2);
}

.ab-checkout__method-t {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ab-text);
}

.ab-checkout__method-n {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ab-text-muted);
}

.ab-checkout__how ol {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ab-text-muted);
}

.ab-checkout__how li {
  margin: 0 0 6px;
}

.ab-checkout__how li:last-child {
  margin-bottom: 0;
}

.ab-checkout__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ab-text-muted);
}

.ab-checkout__help {
  font-size: 13px;
  line-height: 1.5;
}

.ab-checkout__help summary {
  padding: 2px 0;
  color: var(--ab-accent-deep);
  cursor: pointer;
}

.ab-checkout__help ol {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ab-text-muted);
}

.ab-checkout__help li {
  margin: 4px 0;
}

/* --------------------------------------------------------------- foot */

.ab-checkout__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--ab-line-soft);
}

.ab-checkout__back {
  flex: none;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--ab-text-muted);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.ab-checkout__back:hover,
.ab-checkout__back:focus {
  color: var(--ab-text);
}

.ab-checkout__cta {
  flex: 1 1 auto;
  height: 48px;
  border: 1px solid var(--ab-red);
  border-radius: 0;
  background: var(--ab-red);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.ab-checkout__cta:hover,
.ab-checkout__cta:focus {
  border-color: #9e1c2b;
  background: #9e1c2b;
}

/* Keyboard-only: a mouse click would otherwise leave a second border around
   a button that is already a filled box. */
.ab-checkout__cta:focus-visible {
  outline: 2px solid var(--ab-accent-deep);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ phones */

@media (max-width: 520px) {
  .ab-checkout {
    width: calc(100vw - 16px);
    max-height: 94dvh;
  }

  .ab-checkout__head {
    padding: 20px 18px 0;
  }

  .ab-checkout__body {
    padding: 16px 18px 6px;
  }

  .ab-checkout__foot {
    padding: 14px 18px 18px;
  }

  .ab-checkout__title {
    font-size: 20px;
  }
}