.checkout-page { background:#f7f9fb }
.checkout-page .container { max-width:950px }
.checkout-intro { padding-top:40px }
.checkout-promo {
  position:relative; isolation:isolate; min-height:156px; border-radius:19px; color:#fff;
  background:radial-gradient(ellipse at 85% 30%,#9de3ff38,transparent 55%),linear-gradient(115deg,var(--game-dark) 24%,color-mix(in srgb,var(--game-dark),var(--game-accent) 55%));
}
.promo-copy { position:relative; z-index:2; padding:20px 23px; width:73% }
.promo-kicker { font-size:9px; font-weight:600; letter-spacing:.16em; color:#b9e2f5 }
.promo-game-name { margin:4px 0 13px; font-size:clamp(21px,3vw,31px); font-weight:600; line-height:1.1; letter-spacing:-.035em }
.promo-promises { display:flex; gap:14px }
.promo-promises > div { display:flex; align-items:center; gap:6px; min-width:0 }
.promise-icon { flex:none; display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:#ffffff19; color:#bde6ff }
.promise-icon .icon { width:15px; height:15px }
.promise-instant { color:#ffe27e }
.promise-instant .icon { fill:currentColor }
.promise-refund { color:#9cf1da }
.promo-promises strong,.promo-promises small { display:block; line-height:1.3 }
.promo-promises strong { font-size:11px }
.promo-promises small { font-size:9px; color:#d4e4ee; margin-top:2px }
.checkout-promo-art { position:absolute; width:29%; height:195px; right:1%; bottom:-4px; object-fit:contain; pointer-events:none }
[data-game="roblox"] .checkout-promo-art { width:120px; height:120px; right:7%; bottom:19px; border-radius:23px; rotate:-9deg; box-shadow:0 8px 0 #0b215e,0 14px 24px #08153766 }
.checkout-tabs,.product-description,.checkout-guide { display:none }
.checkout-tabs { margin-top:6px; border-bottom:1px solid #dce6ed }
.checkout-tabs [role="tablist"] { display:flex }
.checkout-tabs button { min-height:44px; padding:0 13px; background:none; color:#536c7e; border:0; border-bottom:2px solid transparent; font-size:13px; font-weight:600 }
.checkout-tabs button[aria-selected="true"] { color:var(--game-accent); border-bottom-color:currentColor }
.product-description { margin-block:12px 18px }
.product-description,.checkout-guide { padding:14px; background:#fff; border:1px solid #dfe8ee; border-radius:13px }
.product-description h2,.checkout-guide h2 { font-size:18px; letter-spacing:-.03em; margin:4px 0 9px }
.product-description p,.checkout-guide p { font-size:12px; line-height:1.5; color:#536c7e }
.description-kicker { font-size:9px; letter-spacing:.12em; color:var(--game-accent); font-weight:600 }
.description-note { display:flex; align-items:flex-start; gap:7px; background:var(--game-light); padding:8px; border-radius:8px; margin-top:9px }
.description-note .icon { width:15px; height:15px; color:var(--game-accent); flex:none }
.description-steps { display:grid; gap:7px; margin:0; padding-left:22px; font-size:12px }
.description-steps li::marker { color:var(--game-accent); font-weight:600 }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,270px); align-items:start; gap:14px; padding-block:12px 16px }
.checkout-steps { display:grid; gap:8px; min-width:0 }
.checkout-step,.checkout-summary { padding:13px 15px; background:#fff; border:1px solid #dfe8ee; border-radius:13px; min-width:0 }
.step-heading { display:flex; align-items:center; gap:8px; margin-bottom:10px }
.step-number { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--game-light); color:var(--game-accent); font-size:12px; font-weight:600 }
.step-heading h2,.summary-topline h2 { font-size:15px; line-height:1.25; letter-spacing:-.02em }
.step-heading p,.field-hint,.example-note,.nickname-status,.summary-preview,.summary-safe { font-size:11px; line-height:1.4; color:#536c7e }
.step-heading p { margin-top:2px }
.subtle-button { border:1px solid #dce8ed; background:#fff; color:var(--game-accent); border-radius:7px; font-size:11px; padding:5px 7px; min-height:32px; white-space:nowrap }
.subtle-button:disabled { opacity:.55; cursor:wait }
.account-inputs { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:8px }
.account-inputs.no-zone { grid-template-columns:minmax(0,1fr) }
.field label { display:block; font-size:12px; margin-bottom:4px; color:#40596c }
.field input { width:100%; min-width:0; min-height:44px; border:1px solid #d7e3eb; border-radius:8px; background:#fcfdfe; padding:8px 10px; color:#163349; font-size:13px }
.field input::placeholder { color:#687e8e }
.field input:focus { border-color:var(--game-accent); background:#fff }
.field input[aria-invalid="true"],#quantity[aria-invalid="true"] { border-color:#bf5369; background:#fff7f8 }
.field-error,.checkout-error { font-size:11px; line-height:1.45; color:#a4384e; margin-top:5px }
.checkout-error:empty { display:none }
.nickname-row { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:6px }
.nickname-row[hidden], .nickname-row button[hidden] { display:none }
#player-field { position:relative }
#saved-player { position:absolute; inset:100% 0 auto; z-index:5; border:1px solid #cfdae4; border-radius:0 0 10px 10px; background:white; box-shadow:0 6px 18px #132d441a }
#use-saved-player { display:grid; gap:2px; width:100%; padding:8px 10px; border:0; background:none; color:var(--game-dark); text-align:left; cursor:pointer; overflow-wrap:anywhere }
#use-saved-player:is(:hover,:focus-visible) { background:var(--game-light) }
#use-saved-player small { color:#536c7e }
.nickname-status.verified,.field-hint.promo-success { color:#207057 }
.nickname-status.checking { color:var(--game-accent) }
.example-note,.field-hint { margin-top:5px }
.example-note button,.field-hint button { padding:0; border:0; background:none; color:var(--game-accent); text-decoration:underline; font-size:inherit }
.package-options { display:grid; gap:16px }
.package-group { min-width:0 }
.package-group h3 { margin-bottom:8px; font-size:12px; font-weight:650; color:#40596c }
.package-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(144px,1fr)); gap:8px }
.package-option { position:relative; display:flex; flex-direction:column; gap:3px; padding:8px 8px 22px; min-height:72px; border:1px solid #dce7ee; border-radius:9px; background:#fcfdfe; cursor:pointer }
.package-option:has(input:checked),.payment-option:has(input:checked) { background:var(--game-light); border-color:var(--game-accent) }
.package-option:has(input:checked) { box-shadow:inset 0 0 0 1px var(--game-accent) }
.package-option:focus-within,.payment-option:focus-within { outline:2px solid #138aac; outline-offset:2px }
.package-option input,.payment-option input { position:absolute; opacity:0; width:1px; height:1px }
.package-name { font-size:12px; line-height:1.25; padding-right:26px; overflow-wrap:anywhere }
.package-price { font-size:14px; font-weight:600; color:var(--game-accent) }
.package-gem { position:absolute; right:8px; top:8px; width:17px; height:17px; fill:#a8e4ff; stroke:#2388ae; stroke-width:1.2 }
.package-image { width:22px; height:22px; object-fit:contain; border-radius:4px }
.package-option .instant-label { left:6px; bottom:5px; color:#6c480e; background:#fff1cd }
.package-tag { position:absolute; bottom:6px; right:6px; color:#536c7e; font-size:8px; line-height:1.3 }
.quantity-step { position:relative; padding-right:132px; min-height:69px }
.quantity-step .step-heading { margin-bottom:0 }
.quantity-control { position:absolute; right:15px; top:13px; display:flex; border:1px solid #d7e3eb; border-radius:8px; overflow:hidden; background:#fcfdfe }
.quantity-control button,.quantity-control input { width:32px; height:39px; border:0; background:none; text-align:center }
.quantity-control button { color:var(--game-accent); font-size:18px }
.quantity-control button:disabled { opacity:.4; cursor:default }
.quantity-control input { width:34px; border-inline:1px solid #dce7ee; background:#fff; font-size:13px; appearance:textfield }
.quantity-control input::-webkit-inner-spin-button { appearance:none }
.small-lock { margin-left:auto; color:var(--game-accent) }
.small-lock .icon,.summary-topline > .icon { width:17px; height:17px }
.payment-options { display:grid; gap:5px }
.payment-option { position:relative; display:flex; align-items:center; min-height:48px; gap:8px; padding:6px 8px; border:1px solid #dfe8ee; border-radius:8px; cursor:pointer }
.payment-mark { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:6px; font-size:17px; font-weight:600 }
.qris-mark { background:#eef2f5; color:#172f45; font-size:24px }
.dana-mark { background:#e8f4ff; color:#087ebf }
.bank-mark { background:#fff5d9; color:#976d1a }
.bank-mark .icon { width:16px; height:16px }
.payment-description strong,.payment-description small { display:block; font-size:12px }
.payment-description small { font-size:10px; color:#536c7e; margin-top:1px }
.payment-fee { display:flex; align-items:center; gap:6px; margin-left:auto; white-space:nowrap; color:#536c7e; font-size:10px }
.payment-check { width:14px; height:14px; border:1px solid #aebfcb; border-radius:50%; background:#fff }
.payment-option:has(input:checked) .payment-check { border:4px solid var(--game-accent) }
.optional { margin-left:4px; color:#637d8d; font-size:10px }
.promo-input { display:flex; gap:6px }
.promo-input input { flex:1; text-transform:uppercase }
.promo-input button { background:#edf5f8; color:#2a5369; border:1px solid #d7e3eb; border-radius:8px; padding:0 10px; font-size:11px }
.wa-field { margin-top:10px }
.phone-input { position:relative }
.phone-input .flag { position:absolute; left:11px; top:14px; width:16px; height:16px }
.phone-input input { padding-left:34px }
.checkout-rail { min-width:0; align-self:stretch }
.checkout-sidebar { display:none }
.checkout-rating,.checkout-support { padding:16px; border-radius:16px }
.checkout-rating { color:#fff; background:var(--game-dark) }
.checkout-rating h2,.checkout-support strong { font-size:14px; letter-spacing:-.01em }
.checkout-rating-score { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-block:8px; line-height:1 }
.checkout-rating-score strong { font-size:36px; letter-spacing:-.04em }
.checkout-rating-score span { color:#ffe07b; font-size:clamp(19px,1.8vw,25px); white-space:nowrap }
.checkout-rating p,.checkout-support small { font-size:11px; line-height:1.5 }
.checkout-rating p { color:#e1edf6 }
.checkout-support { display:flex; align-items:center; gap:12px; width:100%; border:1px solid #dfe8ee; background:#fff; text-align:left }
.checkout-support:hover { border-color:var(--game-accent) }
.checkout-support .icon { color:var(--game-accent) }
.checkout-support strong,.checkout-support small { display:block }
.checkout-support small { color:#536c7e }
.checkout-summary { position:sticky; top:96px }
.summary-topline,.summary-game,.summary-total,.summary-safe { display:flex; align-items:center; gap:7px }
.summary-topline,.summary-total { justify-content:space-between }
.summary-topline > .icon { color:var(--game-accent) }
.summary-game { margin-top:10px; padding-bottom:9px; border-bottom:1px solid #edf1f4 }
.summary-game svg { width:34px; height:34px; flex:none; border-radius:8px }
.summary-game strong,.summary-game span { display:block; font-size:12px }
.summary-game span { font-size:11px; color:#536c7e }
.summary-details { margin:8px 0 0 }
.summary-details > div { display:flex; justify-content:space-between; gap:8px; margin:6px 0; font-size:11px; line-height:1.4 }
.summary-details dt { color:#536c7e; flex:none }
.summary-details dd { margin:0; text-align:right; overflow-wrap:anywhere }
.summary-discount dd { color:#207057 }
.summary-total { padding-top:9px; margin-top:9px; border-top:1px dashed #d7e3eb }
.summary-total > span { font-size:11px; color:#536c7e }
.summary-total strong,.mobile-checkout-bar strong { font-size:21px; letter-spacing:-.03em; color:var(--game-accent); white-space:nowrap }
.summary-safe,.summary-preview { margin-top:7px }
.summary-safe .icon { width:13px; height:13px; flex:none }
.checkout-pay { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:44px; padding:8px 12px; border:0; border-radius:8px; background:color-mix(in srgb,var(--game-accent),#102c47 22%); color:#fff; font-size:13px; font-weight:600 }
.checkout-pay:hover:not(:disabled) { filter:brightness(1.12) }
.desktop-pay { margin-top:9px }
.checkout-reviews { display:none; padding-block:8px 16px }
.checkout-faq.help-topics { grid-template-columns:minmax(0,720px); justify-content:center; gap:16px; padding-block:24px 32px }
.checkout-faq h2 { font-size:clamp(20px,3vw,28px); letter-spacing:-.03em }
.checkout-faq .help-topics-list { padding-inline:8px; background:#fff; border:1px solid #dfe8ee; border-radius:16px }
.checkout-faq .help-topics-list details:last-child { border-bottom:0 }
.checkout-faq .help-topics-list summary { min-height:48px; font-size:13px }
.compact-section-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 9px; margin-bottom:7px }
.compact-section-heading h2 { font-size:18px; letter-spacing:-.03em }
.compact-section-heading > span { color:#536c7e; font-size:10px }
.review-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.review-card { padding:10px; background:#fff; border:1px solid #dfe8ee; border-radius:11px }
.review-top { display:flex; align-items:center; gap:7px }
.review-avatar { display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:var(--game-light); color:var(--game-accent); font-size:11px; font-weight:600 }
.review-avatar.second { background:#f2eafb; color:#653c8a }
.review-top strong,.review-top div span { display:block; font-size:11px }
.review-top div span { font-size:10px; color:#536c7e }
.review-stars { margin-left:auto; color:#9b6506; font-size:11px; white-space:nowrap }
.review-card blockquote { margin:6px 0 0; font-size:12px; line-height:1.45; color:#40596c }
.mobile-checkout-bar { display:none }
.confirm-label { font-size:13px; color:var(--game-accent) }

@media(min-width:1024px) {
  .checkout-page .container { width:calc(100% - 96px); max-width:1440px }
  .checkout-intro { padding-top:48px }
  .checkout-promo { min-height:224px; display:flex; align-items:center; border-radius:24px; background:radial-gradient(ellipse at 83% 65%,#72dcff40,transparent 42%),linear-gradient(115deg,var(--game-dark) 28%,color-mix(in srgb,var(--game-dark),var(--game-accent) 55%)) }
  .checkout-promo::before { content:''; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(125deg,transparent 67%,#ffffff06 67%,#ffffff06 79%,transparent 79%); box-shadow:inset 0 0 0 1px #ffffff14 }
  .promo-copy { width:calc(100% - 288px); padding:32px }
  .promo-kicker { font-size:10px; letter-spacing:.14em }
  .promo-game-name { margin:8px 0 24px; font-size:clamp(28px,2.5vw,40px); font-weight:700; line-height:1.15; max-width:28ch; text-wrap:balance }
  .promo-promises { display:flex; flex-wrap:wrap; gap:16px 24px }
  .promo-promises > div { gap:8px }
  .promise-icon { width:32px; height:32px; border-radius:12px }
  .promise-icon .icon { width:18px; height:18px }
  .promo-promises strong { font-size:12px; line-height:1.5 }
  .promo-promises small { font-size:10px; line-height:1.5; margin-top:0 }
  .checkout-promo-art { width:288px; height:272px; right:32px; bottom:-8px; filter:drop-shadow(0 16px 16px #061b3933) }
  [data-game="roblox"] .checkout-promo-art { width:160px; height:160px; right:80px; bottom:32px }
  .checkout-page .checkout-layout { grid-template-columns:clamp(176px,17vw,240px) minmax(0,1fr) clamp(224px,20vw,288px); gap:24px; padding-block:24px 32px }
  .checkout-steps { gap:16px }
  .checkout-step,.checkout-summary,.checkout-guide { padding:16px; border-radius:16px }
  .step-heading { margin-bottom:16px }
  .quantity-step { padding-right:128px }
  .quantity-control { top:16px; right:16px }
  .checkout-sidebar { display:grid; gap:16px; margin-bottom:16px }
  .checkout-guide { display:block; position:sticky; top:83px; max-height:calc(100dvh - 99px); overflow:auto }
  .checkout-guide .description-steps { gap:16px; padding-left:16px }
  .checkout-guide .description-steps p { margin-top:4px }
}

@media(width < 1024px) {
  .checkout-tabs { display:block }
  .checkout-tabs button { flex:1 }
  .product-description:not([hidden]) { display:grid; gap:16px; padding:16px }
}

@media(max-width:760px) {
  .checkout-page { padding-bottom:calc(67px + env(safe-area-inset-bottom)) }
  .checkout-page.show-description { padding-bottom:0 }
  .checkout-intro { padding-top:19px }
  .checkout-promo { min-height:149px; border-radius:15px }
  .promo-copy { width:56%; padding:11px 0 11px 11px }
  .promo-kicker { font-size:8px; letter-spacing:.1em }
  .promo-game-name { font-size:19px; margin:3px 0 7px }
  .promo-promises { display:grid; gap:5px }
  .promo-promises strong { font-size:10px }
  .promo-promises small { font-size:9px; margin:0 }
  .promise-icon { width:20px; height:20px; border-radius:6px }
  .promise-icon .icon { width:12px; height:12px }
  .checkout-promo-art { width:45%; height:calc(100% + 14px); right:0; bottom:3px }
  [data-game="roblox"] .checkout-promo-art { width:clamp(83px,27vw,112px); height:auto; right:7%; bottom:24px; border-radius:15px }
  .checkout-layout { grid-template-columns:minmax(0,1fr); gap:9px }
  .checkout-step,.checkout-summary { padding:11px }
  .checkout-summary { position:static }
  .field input { font-size:16px }
  .package-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .quantity-step { padding-right:118px }
  .quantity-control { right:11px; top:11px }
  .quantity-control button { width:28px }
  .quantity-control input { width:30px; font-size:16px }
  .checkout-reviews { display:block }
  .review-rail { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(83%,300px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:3px }
  .review-card { scroll-snap-align:start }
  .desktop-pay,.keyboard-open .mobile-checkout-bar,.show-description .mobile-checkout-bar { display:none }
  .mobile-checkout-bar { position:fixed; inset:auto 0 0; z-index:35; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 13px calc(7px + env(safe-area-inset-bottom)); background:#fffffff8; border-top:1px solid #dfe8ee; box-shadow:0 -3px 14px #132d4410 }
  .mobile-checkout-bar > div > span { display:block; color:#536c7e; font-size:10px }
  .mobile-checkout-bar .checkout-pay { width:126px }
}
@media(max-width:370px) {
  .package-tag { display:none }
  .step-heading h2 { font-size:14px }
}
.summary-game img { width:34px; height:34px; object-fit:cover; border-radius:8px; flex:none }
.field select { width:100%; min-height:44px; padding:8px 10px; border:1px solid #d7e3eb; border-radius:8px; background:#fcfdfe; color:#163349 }
.checkout-pay:disabled { cursor:default; opacity:.6 }
.mobile-checkout-bar .checkout-pay { width:auto; min-width:136px; white-space:nowrap }

/* Checkout review */
dialog.checkout-confirm { box-sizing: border-box; width: min(70vw, 460px); max-height: 70dvh; padding: clamp(12px, 3vw, 22px); border: 1px solid #d6e4f0; border-radius: 17px; background: #fff; color: #173650; box-shadow: 0 18px 50px #102c4752; overflow: auto; }
.checkout-confirm::backdrop { background: rgb(10 24 40 / .67); }
.checkout-confirm h2 { margin: 0 0 5px; line-height: 1.2; font-size: clamp(19px, 4vw, 24px); }
.checkout-confirm p { margin: 0; color: #536c7e; font-size: 13px; }
.confirm-facts { margin: 12px 0; font-size: 13px; }
.confirm-facts > div { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 6px; padding: 5px 0; border-bottom: 1px solid #e5edf5; }
.confirm-facts dt { color: #526b7c; }
.confirm-facts dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.confirm-facts .confirm-total { padding-block: 7px; font-size: 16px; }
.confirm-facts .confirm-total dd { color: var(--game-dark, #183e67); }
.confirm-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.confirm-cancel { border: 1px solid #d5e3ef; min-height: 44px; padding-inline: 11px; border-radius: 8px; background: #fff; color: #224d70; font: inherit; font-size: 13px; cursor: pointer; }
.checkout-confirm #confirm-progress { margin-top: 8px; }
#confirm-progress::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 6px; border: 2px solid #b6cad9; border-top-color: #224d70; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
    .checkout-confirm[open] { animation: confirm-enter .18s ease-out both; }
    #confirm-progress::before { animation: confirm-spin .65s linear infinite; }
    @keyframes confirm-enter { from { transform: translateY(6px); } to { transform: translateY(0); } }
    @keyframes confirm-spin { to { transform: rotate(360deg); } }
}