/* 2026-10-26 product / top-up page information architecture (owner: "everything is CLOSED and opens on click: that is not a solution,
 * it looks bad and not professional"). Shared by every product page (product.php) and every game hub with a buy box (game.php).
 *   1. the essentials are OPEN: one card with "How it works" (numbered steps with icons) and "Delivery & guarantee" (key facts, route, refund line);
 *   2. everything long is ONE tabbed section (Details | Delivery & refund | FAQ | Reviews): real tabs, all panels visible without scripts;
 *   3. the coupon is a link-style row that opens inline, the optional deals checkbox is one small row after the payment methods.
 * Page-level file: the shared public bundle is untouched. Tokens: the Ink & Signal --nx-* names. Logical properties only (RTL mirrors). */

/* ---- 1. the open card ------------------------------------------------------------------------------------------------ */
#prod-view .nx4b-info>.nx4-open{padding:0!important;overflow:hidden;container-type:inline-size}
.nx4-open>section{padding:18px 16px!important}
.nx4-open>section+section{border-block-start:1px solid var(--nx-line)}
@media (min-width:768px){.nx4-open>section{padding:22px 24px!important}}
#prod-view .nx4-open .nx4-open-h{margin:0 0 14px;font-family:var(--nx-font);font-size:16px;line-height:22px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--nx-text)}

/* numbered steps: an icon tile with the step number on its corner */
#prod-view .nx4-flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
#prod-view .nx4-flow-steps>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;align-content:start;min-width:0}
.nx4-flow-n{position:relative;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--nx-signal-tint);color:var(--nx-signal)}
.nx4-flow-n .nx-i{width:20px;height:20px}
.nx4-flow-n b{position:absolute;inset-block-start:-6px;inset-inline-end:-6px;width:18px;height:18px;border-radius:999px;background:var(--nx-s1);border:1px solid var(--nx-line-strong);font-size:11px;line-height:16px;font-weight:700;text-align:center;color:var(--nx-text)}
#prod-view .nx4-flow-steps strong{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--nx-text)}
#prod-view .nx4-flow-steps ul{margin:4px 0 0;padding:0;list-style:none}
#prod-view .nx4-flow-steps ul:empty{display:none}
#prod-view .nx4-flow-steps ul li{font-size:13px;line-height:19px;color:var(--nx-text-2)}
#prod-view .nx4-flow-steps ul li+li{margin-block-start:2px}
@container (min-width:520px){
  #prod-view .nx4-flow-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  #prod-view .nx4-flow-steps>li{grid-template-columns:minmax(0,1fr);gap:12px}
}
/* the type-specific delivery explanations (shown by product.js for one delivery type at a time) */
.nx4-flow>.prod-pay{margin:16px 0 0;padding:0;background:none;border:0}
.nx4-flow>.prod-pay:not(:has(>.prod-delivery:not([style*="display:none"]):not([style*="display: none"]))){display:none}
.nx4-flow .prod-delivery{margin:0;padding:14px 16px;border:0;border-radius:12px;background:var(--nx-s2)}
.nx4-flow .prod-delivery+.prod-delivery{margin-block-start:10px}
.nx4-flow .prod-delivery h5{margin:0 0 4px;font-size:14px;line-height:20px;font-weight:700;color:var(--nx-text)}
.nx4-flow .prod-delivery p{margin:0;font-size:13px;line-height:19px;color:var(--nx-text-2)}
.nx4-flow--delivery-only>.nx4-flow-steps{display:none}
.nx4-flow--delivery-only>.prod-pay{margin-block-start:0}
.nx4-flow .nx-gift-facts{margin-block-start:10px}

/* Delivery & guarantee: the key facts as a definition list, then the route and the refund / protection line */
.nx4-keyfacts{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
.nx4-keyfacts:empty{display:none}
.nx4-keyfacts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-block-end:1px solid var(--nx-line);min-width:0}
.nx4-keyfacts dt{flex:none;font-size:13px;line-height:20px;font-weight:500;color:var(--nx-text-3)}
.nx4-keyfacts dd{margin:0;min-width:0;font-size:14px;line-height:20px;font-weight:600;color:var(--nx-text);text-align:end;overflow-wrap:anywhere}
@container (min-width:520px){.nx4-keyfacts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
#prod-view .nx4-fact #wc-region-summary-left:not([style*="display:none"]):not(:empty){display:grid!important;margin-block-start:14px!important}
#prod-view .nx4-fact .nxt-guar{margin:14px 0 0;font-size:14px;line-height:21px;color:var(--nx-text-2)}
#prod-view .nx4-fact .nxt-guar:empty{display:none}

/* ---- 2. the tabbed section ------------------------------------------------------------------------------------------- */
body .nxt-tabs{display:grid;gap:32px;margin:28px 0 0!important;padding:0!important;min-width:0}
.nxt-tabs[hidden]{display:none}
.nxt-tablist{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-block-end:1px solid var(--nx-line)}
.nxt-tablist::-webkit-scrollbar{display:none}
.nxt-tablist[hidden],.nxt-tab[hidden],.nxt-tabpanel[hidden]{display:none!important}
.nxt-tab{flex:none;min-height:48px;margin:0;margin-block-end:-1px;padding:0 16px;border:0;border-block-end:2px solid transparent;border-radius:0;background:none;font-family:var(--nx-font);font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;color:var(--nx-text-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nxt-tab:hover{color:var(--nx-text)}
.nxt-tab[aria-selected="true"]{color:var(--nx-text);border-block-end-color:var(--nx-signal)}
.nxt-tab:focus-visible,.nxt-tabpanel:focus-visible{outline:2px solid #6BFF9C;outline-offset:-2px;border-radius:8px}
.nxt-tabs.is-tabs{gap:20px}
.nxt-tabpanel{display:grid;gap:28px;min-width:0;align-content:start}
.nxt-tabs:not(.is-tabs) .nxt-tabpanel+.nxt-tabpanel{margin-block-start:4px}

body .nxt-pane-item{min-width:0;margin:0!important;padding:0!important}
.nxt-pane-item.nx-about-empty,.nxt-pane-item[style*="display:none"]{display:none}
.nxt-pane-item .nxt-pane-h{margin:0 0 12px;padding:0;border:0;font-family:var(--nx-font);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--nx-text)}
.nxt-pane-item .nxt-pane-h::before{content:none;display:none}
.nxt-pane-body>p,.nxt-pane-item .prod-desc{max-width:72ch;margin:0 0 10px;font-size:15px;line-height:24px;color:var(--nx-text-2)}
.nxt-pane-body>p:last-child{margin-block-end:0}
.nxt-pane-item .nxt-sub{margin:16px 0 4px;font-size:15px;line-height:22px;font-weight:700;color:var(--nx-text);font-family:var(--nx-font)}
.nxt-pane-item .nxt-sub:first-child{margin-block-start:0}
/* blocks printed by the amount / product pages: no second card inside the pane */
body .nxt-pane-block,body .nxt-pane-block .nxpg-card{margin:0!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
/* what you get: a definition grid */
.nxt-pane-item .nxpg-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.nxt-pane-item .nxpg-facts>div{padding:10px 0;border-block-end:1px solid var(--nx-line)}
.nxt-pane-item .nxpg-facts dt{font-size:13px;line-height:18px;font-weight:500;color:var(--nx-text-3);text-transform:none;letter-spacing:0}
.nxt-pane-item .nxpg-facts dd{margin:2px 0 0;font-size:14px;line-height:21px;font-weight:600;color:var(--nx-text)}
@media (min-width:640px){.nxt-pane-item .nxpg-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
.nxt-pane-item .nxpg-steps{margin:0;padding-inline-start:22px;display:grid;gap:10px;max-width:72ch;font-size:15px;line-height:23px;color:var(--nx-text-2)}
.nxt-pane-item .nxpg-steps li::marker{color:var(--nx-signal);font-weight:700}
.nxt-pane-item .nx4-facts{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.nxt-pane-item .nx4-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.nxt-pane-item .nxpg-links{list-style:none;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0 0 12px;padding:0}
@media (min-width:768px){.nxt-pane-item .nxpg-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nxt-pane-item .nxpg-links a{display:flex!important;align-items:center;min-height:44px;padding:0 12px!important;border-radius:8px!important;border:0!important;background:var(--nx-s2)!important;font-size:13px;line-height:18px;font-weight:600;color:var(--nx-text)!important;text-decoration:none}
.nxt-pane-item .nxpg-links a:hover{background:var(--nx-s3)!important}
.nxt-pane-item .nxpg-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--nx-signal);text-decoration:none}
.nxt-tabpanel>.nxt-related{margin:0}
/* FAQ: questions and answers printed open */
.nxt-qa-list{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
.nxt-qa{padding:14px 0;border-block-start:1px solid var(--nx-line)}
.nxt-qa:first-child{border-block-start:0;padding-block-start:0}
.nxt-qa-q{margin:0 0 4px;font-family:var(--nx-font);font-size:15px;line-height:22px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--nx-text)}
.nxt-qa p{margin:0;max-width:72ch;font-size:14px;line-height:22px;color:var(--nx-text-2)}
@media (min-width:900px){.nxt-qa-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}.nxt-qa:nth-child(2){border-block-start:0;padding-block-start:0}}
.nxt-tabs .nxg-faq{padding:0;margin:0;background:none;border:0}
.nxt-tabs .prod-qa-wrap{margin:0;padding:0;background:none;border:0}
.nxt-tabs .prod-qa-form{max-width:560px}
.nxt-tabs .prod-reviews-wrap{margin:0;padding:0;background:none;border:0}
.prod-rv-avg{margin-inline-start:8px;font-size:15px;font-weight:600;color:var(--nx-reward,#FFBE18)}
.nxt-policy-links{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}

/* ---- 3. quieter checkout extras ---------------------------------------------------------------------------------------- */
/* coupon: a link-style row that opens inline */
#prod-view .ck-more{margin:0!important;border:0!important;border-radius:0!important;background:none!important}
#prod-view .ck-more>summary{display:inline-flex!important;align-items:center;gap:6px;min-height:44px;padding:0!important;border:0!important;font-size:13px;line-height:20px;font-weight:600;color:var(--nx-text-2);-webkit-tap-highlight-color:transparent}
#prod-view .ck-more>summary:hover{color:var(--nx-text)}
#prod-view .ck-more>summary>span{text-decoration:underline;text-decoration-color:var(--nx-line-strong);text-underline-offset:3px}
#prod-view .ck-more>summary .ck-more-chev{width:14px;height:14px;color:var(--nx-text-3)}
#prod-view .ck-more[open]>summary{border:0!important}
#prod-view .ck-more-body{padding:6px 0 4px!important}
body .nxt-pane-block{overflow-x:auto}
body .nxt-tabs .nxt-pane-item.prod-about,body .nxt-tabs .nxt-pane-item .nxt-acc-body{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important}