/* V3.20 — server-rendered catalogue facts (layout/catalog-render.php).
   Product page: #prod-facts. Game hub: #nxg-price-list. Games hub: #nxg-overview.
   Loaded on its own (not bundled) so it can ship without touching a dist bundle.
   Logical properties only, so the Arabic (RTL) layout mirrors without extra rules. */

.nxc-facts {
  --nxc-accent: #45f882;
  --nxc-text: #eef2f8;
  --nxc-muted: #9B9C9B;
  --nxc-line: rgba(255, 255, 255, .08);
  --nxc-panel: rgba(255, 255, 255, .025);
  --nxc-tracked: #ffd77a;
  color: var(--nxc-text);
}

/* Product page: one panel under the buy box, same shell as the reviews and Q&A panels. */
#prod-facts {
  margin-block-start: 48px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .07);
}

/* Hubs: its own band under the JS shelves. */
.nxc-hub { padding-block: 8px 80px; }
.nxc-hub > .container > .nxc-title { margin-block-start: 0; }

.nxc-title {
  margin: 0 0 6px;
  font: 800 22px/1.25 Rajdhani, Poppins, sans-serif;
  color: #fff;
}
.nxc-subtitle {
  margin: 0 0 6px;
  font: 700 18px/1.3 Rajdhani, Poppins, sans-serif;
  color: #fff;
}
.nxc-lead {
  margin: 0 0 16px;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
}
.nxc-note {
  margin: 10px 0 0;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--nxc-muted);
}
.nxc-stamp { margin-block: 0 18px; }
.nxc-stamp time { color: rgba(255, 255, 255, .72); }

.nxc-family { margin-block: 26px 0; }
.nxc-family + .nxc-family { margin-block-start: 40px; }

/* Tables scroll inside their own box on a phone; the page itself never scrolls sideways. */
.nxc-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--nxc-line);
  border-radius: 14px;
  background: var(--nxc-panel);
  -webkit-overflow-scrolling: touch;
}
.nxc-table-wrap:focus-visible { outline: 2px solid var(--nxc-accent); outline-offset: 3px; }

.nxc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--nxc-text);
}
.nxc-table th,
.nxc-table td {
  padding: 10px 14px;
  text-align: start;
  vertical-align: middle;
  border-block-end: 1px solid var(--nxc-line);
  white-space: nowrap;
}
.nxc-table tbody tr:last-child > * { border-block-end: 0; }
.nxc-table thead th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nxc-muted);
  background: rgba(255, 255, 255, .03);
}
.nxc-table th small { color: var(--nxc-muted); font-weight: 600; }
/* The theme colours every th with its light-mode title colour; these sit on a dark panel. */
.nxc-table tbody th { font-weight: 600; color: #fff; }
/* A route's delivery label may wrap; the price and region columns stay on one line. */
.nxc-table:not(.nxc-matrix) td:last-child { white-space: normal; min-width: 14em; }
.nxc-price { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.nxc-method { color: rgba(255, 255, 255, .7); }
.nxc-none { color: rgba(255, 255, 255, .28); }

/* The package column stays put while the regions scroll past it. */
.nxc-matrix tbody th,
.nxc-matrix thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: #121312;
}
.nxc-matrix td { text-align: end; }

.nxc-table a,
.nxc-list a,
.nxc-more a,
.nxc-game .nxc-subtitle a {
  color: var(--nxc-accent);
  text-decoration: none;
  display: inline-block;
  padding-block: 3px;   /* keeps every link at least 24px tall */
}
.nxc-table a:hover,
.nxc-list a:hover,
.nxc-more a:hover,
.nxc-game .nxc-subtitle a:hover { text-decoration: underline; }
.nxc-facts a:focus-visible { outline: 2px solid var(--nxc-accent); outline-offset: 2px; border-radius: 4px; }

.nxc-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.nxc-badge.is-instant { color: #06210f; background: var(--nxc-accent); }
.nxc-badge.is-tracked { color: var(--nxc-tracked); background: rgba(255, 190, 24, .12); border: 1px solid rgba(255, 190, 24, .35); }

.nxc-delivery { margin: 12px 0 14px; display: grid; gap: 8px; }
.nxc-delivery > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.nxc-delivery dt { margin: 0; }
.nxc-delivery dd { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

.nxc-dl { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.nxc-dl > div { min-width: 0; }
.nxc-dl dt { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nxc-muted); }
.nxc-dl dd { margin: 2px 0 0; font-weight: 700; color: #fff; }

.nxc-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 8px 18px;
}
.nxc-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-block: 8px;
  border-block-end: 1px solid var(--nxc-line);
  font-size: 14px;
}
.nxc-cat { font-size: 12px; color: var(--nxc-muted); }

.nxc-more { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }

.nxc-games {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.nxc-game {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--nxc-line);
  background: var(--nxc-panel);
}
.nxc-game .nxc-dl + .nxc-dl { margin-block-start: 12px; }

/* The product's own name in the page band: long SKU names must wrap, not overflow. */
.nxc-product-h1 { overflow-wrap: anywhere; }
.nxc-h1-game {
  display: block;
  margin-block-start: 4px;
  font-size: .42em;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}

/* Checkout: the guest email field (audit E-03), visible now rather than tucked in the coupon drawer. */
.ck-contact-field { margin: 0 0 14px; }
.ck-contact-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, .86);
}
.ck-contact-field input {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 14px;
}
.ck-contact-field input::placeholder { color: rgba(255, 255, 255, .42); }
.ck-contact-field input:focus-visible { outline: 2px solid #45f882; outline-offset: 2px; border-color: rgba(69, 248, 130, .5); }
.ck-contact-field .ck-hint { margin: 6px 0 0; }
.ck-contact-field .ck-optional { font-weight: 400; color: rgba(255, 255, 255, .6); }

/* Checkout wave 1: compact "before you pay" summary. Stacks label over value at 320px, never scrolls sideways. */
.ck-summary { margin: 0 0 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(0, 0, 0, .25); min-width: 0; }
.ck-summary[hidden] { display: none; }
.ck-summary-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .86); }
.ck-summary-list { margin: 0; }
.ck-summary-list > div { display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: space-between; align-items: baseline; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.ck-summary-list > div:first-child { border-top: 0; padding-top: 2px; }
.ck-summary-list > div[hidden] { display: none; }
.ck-summary-list dt { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.ck-summary-list dd { margin: 0; min-width: 0; max-width: 100%; font-size: 13.5px; color: #fff; overflow-wrap: anywhere; text-align: end; }
#ck-sum-total { font-weight: 800; font-size: 16px; color: #45f882; }
/* "You will need" is a sentence, not a value: full width, start-aligned, quieter than the figures above it. */
.ck-summary-list > div:has(#ck-sum-need) { flex-direction: column; gap: 3px; }
#ck-sum-need { text-align: start; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.ck-summary-warn { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.ck-summary-link { display: inline-flex; align-items: center; min-height: 44px; margin-block-end: -8px; font-size: 12.5px; color: #45f882; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 575.98px) {
  #prod-facts { padding: 16px; margin-block-start: 32px; }
  .nxc-table th, .nxc-table td { padding: 9px 11px; }
  .nxc-title { font-size: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .nxc-facts a { transition: color .15s ease; }
}

/* V3.23 — product guide (layout/product-guide.php): what you get, how to redeem, FAQ, and
   the other amounts of the same card. Same panel language as the reviews and Q&A shells. */
.nxpg { margin-block-start: 28px; color: #eef2f8; }
.nxpg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nxpg-card { padding: 24px; border-radius: 18px; background: rgba(14, 15, 14, .72); border: 1px solid rgba(156, 157, 156, .16); }
.nxpg-faq, .nxpg-related .nxpg-card { margin-block-start: 18px; }
.nxpg-related { margin-block-start: 0; }
.nxpg-h { margin: 0 0 16px; font: 800 21px/1.25 Rajdhani, Poppins, sans-serif; letter-spacing: .01em; color: #fff; }
.nxpg-facts { margin: 0; display: grid; gap: 10px; }
.nxpg-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding-block-end: 10px; border-block-end: 1px solid rgba(255, 255, 255, .06); }
.nxpg-facts div:last-child { border: 0; padding: 0; }
.nxpg-facts dt { font: 700 11px/1.6 Poppins, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9B9C9B; }
.nxpg-facts dd { margin: 0; font: 600 14.5px/1.55 Poppins, sans-serif; color: #eef2f8; overflow-wrap: anywhere; }
.nxpg-warn { display: flex; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; font: 500 13.5px/1.6 Poppins, sans-serif;
  color: #ffe3a3; background: rgba(255, 190, 24, .08); border: 1px solid rgba(255, 190, 24, .28); }
.nxpg-warn i { margin-block-start: 3px; color: #ffbe18; }
.nxpg-steps { margin: 0; padding: 0; list-style: none; counter-reset: nxpg; display: grid; gap: 12px; }
.nxpg-steps li { counter-increment: nxpg; position: relative; padding-inline-start: 42px; font: 500 14.5px/1.6 Poppins, sans-serif; color: #d5dbe6; }
.nxpg-steps li::before { content: counter(nxpg); position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 800 13px/1 Poppins, sans-serif; color: #04150a; background: #45f882; }
.nxpg-faq details { border-block-end: 1px solid rgba(255, 255, 255, .07); }
.nxpg-faq details:last-child { border: 0; }
.nxpg-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; padding: 14px 0;
  font: 700 15px/1.45 Poppins, sans-serif; color: #fff; }
.nxpg-faq summary::-webkit-details-marker { display: none; }
.nxpg-faq summary::after { content: "+"; flex: 0 0 auto; color: #45f882; font-weight: 800; }
.nxpg-faq details[open] summary::after { content: "\2212"; }
.nxpg-faq summary:focus-visible, .nxpg-links a:focus-visible, .nxpg-all:focus-visible { outline: 2px solid #45f882; outline-offset: 3px; border-radius: 6px; }
.nxpg-faq p { margin: 0 0 16px; font: 500 14px/1.7 Poppins, sans-serif; color: #C4C5C4; max-width: 80ch; }
.nxpg-links { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.nxpg-links a { display: inline-block; padding: 9px 14px; border-radius: 999px; font: 600 13px/1.2 Poppins, sans-serif; color: #dfe6f1;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(156, 157, 156, .22); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.nxpg-links a:hover { color: #fff; border-color: rgba(69, 248, 130, .55); }
.nxpg-all { font: 700 13.5px/1 Poppins, sans-serif; color: #45f882; text-decoration: none; }
[dir="rtl"] .nxpg-all i { transform: scaleX(-1); }
@media (max-width: 991px) { .nxpg-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) {
  .nxpg-card { padding: 18px; border-radius: 16px; }
  .nxpg-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}