/* ==================================================
   CUSTOMER · Checkout (full page)  (F3 redesign)
   Full-page version of the boost-page checkout. Mirrors checkout.php +
   core_fields / game_fields / play_time / payment_fields / sidebar_info /
   loyalty_block: 4-step stepper, account info, payment method, and a
   sticky order-summary with VIP code + final price + TOS. Reuses
   .order-hero / .panel + tokens. Token-driven, scaled x1.2 (+20%).
   ================================================== */

.co-page { background: var(--bg-soft); }
.co-wrap { max-width: 1355.2px; margin: 0 auto; padding: 36.96px 31.68px 84.48px; }

/* ===== stepper ===== */
.co-stepper { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 31.68px; }
.co-step-col { display: flex; flex-direction: column; align-items: center; gap: 10.56px; flex-shrink: 0; width: 118.8px; }
.co-step-dot {
  width: 47.52px; height: 47.52px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 19.8px;
  background: #fff; border: 1.8px solid var(--line); color: var(--ink-muted);
}
.co-step-dot svg { width: 21.12px; height: 21.12px; display: none; }
.co-step-col.done .co-step-dot { background: var(--royal); border-color: var(--royal); color: #fff; }
.co-step-col.done .co-step-dot .num { display: none; }
.co-step-col.done .co-step-dot svg { display: inline; }
.co-step-col.active .co-step-dot { background: #fff; border-color: var(--royal); color: var(--royal); box-shadow: 0 0 0 4.8px color-mix(in srgb, var(--royal) 14%, transparent); }
.co-step-label {
  font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; text-align: center;
  letter-spacing: calc(0.06em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted);
}
.co-step-col.done .co-step-label, .co-step-col.active .co-step-label { color: var(--ink); }
.co-step-line { flex: 1; max-width: 145.2px; height: 2.64px; background: var(--line); border-radius: 2.64px; margin-top: 23.76px; }
.co-step-line.filled { background: var(--royal); }

/* ===== two-column ===== */
.co-grid { display: grid; grid-template-columns: 1fr 475.2px; gap: 26.4px; align-items: start; }
.co-summary { position: sticky; top: 105.6px; display: flex; flex-direction: column; gap: 21.12px; }

.co-sec { padding: 29.04px; }
.co-sec + .co-sec { border-top: 1.2px solid var(--line-soft); }
.co-sec-title {
  font-family: var(--font-ui); font-size: 14.52px; font-weight: 600;
  letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 11.88px; margin-bottom: 21.12px;
}
.co-sec-title svg { width: 18.48px; height: 18.48px; color: var(--accent); }

/* fields */
.co-fields { display: flex; flex-direction: column; gap: 18.48px; }
.co-field { display: flex; flex-direction: column; gap: 9.24px; }
.co-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15.84px; }
.co-label {
  font-family: var(--font-ui); font-size: 12.54px; font-weight: 600;
  letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 7.92px;
}
.co-label .opt { color: var(--ink-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.co-input-wrap { position: relative; display: flex; align-items: center; }
.co-input-wrap > svg.lead { position: absolute; left: 17.16px; width: 19.8px; height: 19.8px; color: var(--ink-muted); pointer-events: none; }
.co-input {
  width: 100%; height: 56.76px; padding: 0 18.48px 0 50.16px;
  border: 1.2px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
  font-family: var(--font-body); font-size: 17.82px; color: var(--ink); outline: none;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.co-input.no-ico { padding-left: 18.48px; }
.co-input:focus { border-color: var(--royal-soft); background: #fff; box-shadow: 0 0 0 3.6px color-mix(in srgb, var(--royal) 13%, transparent); }
.co-input::placeholder { color: var(--ink-muted); }

/* ===== payment tiles ===== */
.pay-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14.52px; }
.pay-tile {
  position: relative; display: flex; align-items: center; gap: 14.52px;
  padding: 18.48px 19.8px; border: 1.5px solid var(--line); border-radius: calc(var(--r) + 1.32px);
  background: #fff; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 180ms ease;
}
.pay-tile:hover { border-color: var(--royal-soft); background: var(--bg-soft); }
.pay-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.pt-ico { width: 47.52px; height: 47.52px; border-radius: 11.88px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-deep); color: var(--ink-soft); transition: background 160ms ease, color 160ms ease; }
.pt-ico svg { width: 23.76px; height: 23.76px; }
.pt-text { min-width: 0; }
.pt-text b { font-size: 16.5px; font-weight: 600; color: var(--ink); display: block; }
.pt-text span { font-family: var(--font-ui); font-size: 12.54px; color: var(--ink-muted); }
.pt-check { position: absolute; top: 15.84px; right: 15.84px; width: 23.76px; height: 23.76px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: all 160ms ease; }
.pt-check svg { width: 14.52px; height: 14.52px; color: #fff; opacity: 0; transition: opacity 160ms ease; }
.pay-tile input:checked ~ .pt-check { background: var(--royal); border-color: var(--royal); }
.pay-tile input:checked ~ .pt-check svg { opacity: 1; }
.pay-tile:has(input:checked) { border-color: var(--royal); background: var(--royal-tint); box-shadow: 0 0 0 3.6px color-mix(in srgb, var(--royal) 12%, transparent); }
.pay-tile:has(input:checked) .pt-ico { background: var(--royal); color: #fff; }

/* ===== order summary ===== */
.co-journey { display: flex; align-items: center; justify-content: center; gap: 18.48px; padding: 5.28px 0 21.12px; border-bottom: 1.2px solid var(--line-soft); margin-bottom: 18.48px; }
.cj-rank { display: flex; flex-direction: column; align-items: center; gap: 6.6px; }
.cj-rank img { width: 66px; height: 66px; object-fit: contain; }
.cj-t { font-family: var(--font-ui); font-size: 11.22px; font-weight: 600; letter-spacing: calc(0.12em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.cj-n { font-family: var(--font-display); font-weight: 700; font-size: 19.8px; color: var(--ink); }
.cj-rank.target .cj-n { color: var(--royal); }
.cj-arrow { color: var(--ink-muted); }
.cj-arrow svg { width: 26.4px; height: 26.4px; }

.li-row { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; padding: 10.56px 0; }
.li-k { font-size: 15.84px; color: var(--ink-soft); }
.li-v { font-size: 15.84px; font-weight: 600; color: var(--ink); text-align: right; }
.li-v.discount { color: var(--status); }
.li-row.sub { border-top: 1.2px solid var(--line-soft); margin-top: 5.28px; padding-top: 15.84px; }

.co-vip { display: flex; gap: 10.56px; margin: 18.48px 0; }
.co-vip input {
  flex: 1; min-width: 0; height: 51.48px; padding: 0 17.16px; border: 1.2px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); font-family: var(--font-ui); font-size: 14.52px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); outline: none;
}
.co-vip input:focus { border-color: var(--royal-soft); background: #fff; }
.co-vip input::placeholder { color: var(--ink-muted); letter-spacing: 0.04em; }
.co-vip button {
  height: 51.48px; padding: 0 21.12px; border: 1.2px solid var(--royal-soft); cursor: pointer; border-radius: var(--r);
  background: var(--royal-tint); color: var(--royal);
  font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase;
  transition: background 160ms ease;
}
.co-vip button:hover { background: color-mix(in srgb, var(--royal) 16%, #fff); }
.co-vip-msg { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; color: var(--status); margin: -7.92px 0 10.56px; opacity: 0; transition: opacity 180ms ease; }
.co-vip-msg.show { opacity: 1; }

.co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 13.2px; padding: 18.48px 0 5.28px; border-top: 1.8px solid var(--line); margin-top: 5.28px; }
.co-total .tt-k { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.12em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft); }
.co-total .tt-v { font-family: var(--font-display); font-weight: 700; font-size: 42.24px; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.co-tos { display: flex; align-items: flex-start; gap: 11.88px; margin: 19.8px 0; cursor: pointer; }
.co-tos input { position: absolute; opacity: 0; width: 0; height: 0; }
.co-tos .box { width: 23.76px; height: 23.76px; border-radius: 6.6px; border: 1.5px solid var(--line); background: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 1.32px; transition: all 150ms ease; }
.co-tos .box svg { width: 15.84px; height: 15.84px; color: #fff; opacity: 0; transition: all 150ms ease; }
.co-tos input:checked + .box { background: var(--royal); border-color: var(--royal); }
.co-tos input:checked + .box svg { opacity: 1; }
.co-tos span { font-size: 14.52px; color: var(--ink-soft); line-height: 1.45; }
.co-tos a { color: var(--royal); font-weight: 600; text-decoration: none; }
.co-tos a:hover { text-decoration: underline; }

.co-purchase {
  width: 100%; height: 63.36px; border: none; cursor: pointer; border-radius: var(--r);
  background: linear-gradient(135deg, var(--royal) 0%, var(--royal-deep) 100%); color: #fff;
  font-family: var(--font-ui); font-size: 16.5px; font-weight: 700; letter-spacing: calc(0.08em * var(--tracking)); text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 11.88px;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease, opacity 160ms ease;
}
.co-purchase svg { width: 21.12px; height: 21.12px; }
.co-purchase:hover { transform: translateY(-1.65px); box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--royal) 60%, transparent); }
.co-secure-note { display: flex; align-items: center; justify-content: center; gap: 10.56px; margin-top: 15.84px; font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.04em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.co-secure-note svg { width: 17.16px; height: 17.16px; color: var(--status); }

.co-done { display: none; flex-direction: column; align-items: center; text-align: center; gap: 15.84px; padding: 13.2px 0; }
.co-done.show { display: flex; }
.co-done .cd-ico { width: 63.36px; height: 63.36px; border-radius: 50%; background: var(--status-soft); color: var(--status); display: inline-flex; align-items: center; justify-content: center; }
.co-done .cd-ico svg { width: 33px; height: 33px; }
.co-done b { font-family: var(--font-display); font-weight: 700; font-size: 23.76px; color: var(--ink); }
.co-done p { font-size: 15.84px; color: var(--ink-soft); }

/* ===== responsive ===== */
@media (max-width: 980px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-summary { position: static; }
}
@media (max-width: 600px) {
  .co-wrap { padding: 26.4px 18.48px 63.36px; }
  .pay-tiles { grid-template-columns: 1fr; }
  .co-field-row { grid-template-columns: 1fr; }
  .co-step-col { width: 70.4px; }
  .co-step-label { font-size: 11.22px; }
  .co-total .tt-v { font-size: 36.96px; }
}

/* ==================================================
   FONT HIERARCHY CORRECTION
   League stays on big headings + numeric stats; small titles, names, subtitles
   and reading text use Barlow. Appended last to override the per-element
   --font-display at equal specificity.
   ================================================== */
.cj-n,
.co-done b { font-family: var(--font-body); }