/* Shared layout of the order pages: one product page (/topup-game/<game>/<country>)
 * and /gift. Header (tgp-hero), step cards (tgp-card), the sticky summary
 * (tgp-side) with inline payment channels, and the phone pay bar (tgp-bar).
 * Page-specific rules stay in each page. */
button,input,select,textarea{font:inherit}
.tgx{flex:1 0 auto;width:100%}
.tgx-wrap{max-width:1180px;margin:0 auto;padding:0 20px;width:100%}
.tgx [hidden]{display:none!important}

/* ---------- One game ---------- */
.tgp{padding-bottom:64px}
.tgp-hero{padding:calc(var(--header-height) + 26px) 0 26px;background:var(--bg-card);background:color-mix(in srgb,var(--primary) 3%,var(--bg-card));border-bottom:1px solid var(--border)}
.tgp-hero-in{display:flex;align-items:flex-start;gap:20px}
.tgp-logo{width:96px;height:96px;border-radius:22px;overflow:hidden;flex:none;background:var(--bg-secondary);border:1px solid var(--border);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:800;color:var(--text-muted)}
.tgp-logo img{width:100%;height:100%;object-fit:cover;display:block}
.tgp-hero-text{flex:1;min-width:0}
.tgp-kicker{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.tgp-title{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:2px 0 6px;color:var(--text-main);overflow-wrap:anywhere}
.tgp-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem;color:var(--text-secondary)}
.tgp-sub .tgp-flag{width:20px;height:20px}
.tgp-chip{padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--success-light);color:var(--success)}
.tgp-facts{display:flex;flex-direction:column;gap:2px;margin-top:14px;font-size:.86rem;color:var(--text-secondary);line-height:1.6}
.tgp-facts b{color:var(--text-main);font-weight:600}
.tgp-back{flex:none;padding:8px 14px;border-radius:10px;font-size:.86rem;font-weight:400;color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent);text-decoration:none;white-space:nowrap}
.tgp-back:hover{background:color-mix(in srgb,var(--primary) 16%,transparent)}

.tgp-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;margin-top:28px}
.tgp-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.tgp-side{position:sticky;top:calc(var(--header-height) + 16px);min-width:0}
.tgp-card{background:var(--bg-card);border:1px solid var(--border);border-radius:22px;padding:24px 24px 26px;box-shadow:var(--shadow-sm);scroll-margin-top:calc(var(--header-height) + 16px)}
.tgp-step{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tgp-num{width:32px;height:32px;border-radius:10px;background:var(--primary);color:#fff;font-size:.95rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.tgp-step h2{font-size:1.3rem;font-weight:700;margin:0;color:var(--text-main);line-height:1.3}
.tgp-aside{margin-left:auto;font-size:.76rem;color:var(--text-muted);text-align:right}
.tgp-note{font-size:.95rem;font-weight:400;color:var(--text-secondary);line-height:1.7;margin:0 0 22px}

/* Countries */
.tgp-regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tgp-region{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;border:1.5px solid var(--border-light);background:var(--bg-card);cursor:pointer;text-align:left;color:inherit;transition:border-color .15s,background .15s}
.tgp-region:hover{border-color:color-mix(in srgb,var(--primary) 50%,var(--border))}
.tgp-region.is-on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--bg-card))}
.tgp-region b{display:block;font-size:.95rem;font-weight:400;color:var(--text-main);line-height:1.3}
.tgp-region i{display:block;font-style:normal;font-size:.76rem;color:var(--text-muted);margin-top:1px}
.tgp-region span:last-child{min-width:0}
.tgp-flag{width:28px;height:28px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--border-light);background:var(--bg-secondary);display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary)}
.tgp-flag img{width:100%;height:100%;object-fit:cover;display:block}
.tgp-flag svg{width:62%;height:62%}

/* Player */
.tgp-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px 18px}
.tgp-field label{display:block;font-size:1.05rem;font-weight:400;color:var(--text-main);margin-bottom:10px}
.tgp-field input,.tgp-field select{width:100%;padding:14px 18px;border-radius:16px;border:1px solid var(--border-light);background:var(--bg-card);color:var(--text-main);font-size:1.05rem;font-weight:400;outline:none;transition:border-color .2s,box-shadow .2s}
.tgp-field select{appearance:none;cursor:pointer;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.tgp-field input:focus,.tgp-field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.tgp-field input::placeholder{color:var(--text-muted)}
.tgp-field.is-bad input,.tgp-field.is-bad select{border-color:var(--error)}
.tgp-none{font-size:.95rem;color:var(--text-secondary);margin:0}
/* Free Fire ID check, under the ID field */
.tgp-uid{margin-top:10px;font-size:.9rem;line-height:1.55}
.tgp-uid:empty{display:none}
.tgp-uid-wait{color:var(--text-muted)}
.tgp-uid-slow{animation:tgp-uid-in .2s ease .5s both}
@keyframes tgp-uid-in{from{opacity:0}to{opacity:1}}
.tgp-uid-ok{display:flex;align-items:flex-start;gap:8px;color:var(--text-secondary)}
.tgp-uid-ok svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--success)}
.tgp-uid-ok span{flex:1;min-width:0}
.tgp-uid-ok b{color:var(--text-main);font-weight:700;overflow-wrap:anywhere}
.tgp-uid-bad{padding:12px 14px;border-radius:14px;background:var(--error-light);color:var(--error)}
.tgp-uid-bad b{font-weight:700}
.tgp-uid-bad p{margin:2px 0 0;color:var(--text-main)}
.tgp-field.is-uid{grid-column:1/-1;max-width:560px}
.tgp-uid-info{padding:12px 14px;border-radius:14px;margin-bottom:8px;background:color-mix(in srgb,var(--primary) 10%,var(--bg-card));color:var(--text-main)}
.tgp-uid-info b{font-weight:700}
.tgp-uid-info p{margin:2px 0 0;color:var(--text-secondary)}
.tgp-uid-fix{margin-top:10px;padding:9px 14px;border-radius:10px;border:0;background:var(--primary);color:#fff;font-size:.9rem;font-weight:700;cursor:pointer}

/* Packages */
.tgp-cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:2px 0 14px;padding-bottom:2px}
.tgp-cats::-webkit-scrollbar{display:none}
.tgp-cat{flex:none;padding:7px 14px;border-radius:999px;border:1px solid var(--border-light);background:transparent;color:var(--text-secondary);font-size:.86rem;font-weight:400;cursor:pointer;white-space:nowrap}
.tgp-cat:hover{color:var(--text-main)}
.tgp-cat.is-on{background:var(--primary);border-color:var(--primary);color:#fff}
.tgp-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tgp-group{grid-column:1/-1;font-size:.86rem;font-weight:700;color:var(--text-secondary);margin:8px 0 -2px}
.tgp-group:first-child{margin-top:0}
.tgp-pack{position:relative;display:flex;flex-direction:column;gap:10px;min-height:86px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--border-light);background:var(--bg-card);color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.tgp-pack:hover:not(:disabled){border-color:color-mix(in srgb,var(--primary) 50%,var(--border))}
.tgp-pack.is-on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--bg-card));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
.tgp-pack:disabled{cursor:not-allowed;opacity:.5}
.tgp-pack-top{display:flex;align-items:flex-start;gap:8px;padding-right:16px}
.tgp-pack-ico{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center}
.tgp-pack-ico img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tgp-pack-name{font-size:.92rem;font-weight:400;color:var(--text-main);line-height:1.35;overflow-wrap:anywhere}
.tgp-pack-foot{margin-top:auto;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tgp-pack-price{font-size:1.02rem;font-weight:700;color:var(--text-main)}
.tgp-pack-old{font-size:.74rem;color:var(--text-muted);text-decoration:line-through}
.tgp-tag{font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--warning-light);color:var(--warning)}
.tgp-tag.is-dealer{background:var(--success-light);color:var(--success)}
.tgp-tag.is-out{background:var(--error-light);color:var(--error)}
.tgp-tick{position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;display:none;align-items:center;justify-content:center}
.tgp-pack.is-on .tgp-tick{display:flex}
.tgp-tick svg{width:11px;height:11px}

/* Summary. A quiet label on the left, the value on the right; groups are set
   apart by space and soft panels, never by rules drawn across the card. The
   label tone is the main text colour toned down, so a shop whose secondary
   text colour is a bright accent still gets calm labels here. */
.tgp{--tgp-label:color-mix(in srgb,var(--text-main) 62%,transparent);--tgp-tile:color-mix(in srgb,var(--text-main) 5%,transparent);--tgp-edge:color-mix(in srgb,var(--text-main) 14%,transparent)}
.tgp-rows{display:grid;gap:11px;margin:6px 0 0;font-size:.92rem}
.tgp-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.tgp-row dt{color:var(--tgp-label);flex:none}
.tgp-row dd{margin:0;color:var(--text-main);font-weight:400;text-align:right;min-width:0;overflow-wrap:anywhere}
.tgp-row dd small{font-size:inherit;font-weight:400;color:var(--tgp-label)}
.tgp-row dd.is-empty{color:var(--tgp-label);font-weight:400}
.tgp-picked{display:grid;gap:8px;margin-top:14px}
.tgp-pick{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--tgp-tile);font-size:.84rem}
.tgp-pick span{flex:1;min-width:0;color:var(--text-main);font-weight:400;line-height:1.4}
.tgp-pick b{font-weight:700;color:var(--text-main);white-space:nowrap}
.tgp-x{width:30px;height:30px;flex:none;border-radius:9px;border:0;background:transparent;color:var(--tgp-label);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tgp-x:hover{background:var(--error-light);color:var(--error)}
.tgp-x svg{width:14px;height:14px}
/* What to pay, and the balance under it, in one soft panel */
.tgp-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--tgp-tile)}
.tgp-total:has(+ .tgp-bal){padding-bottom:4px;border-radius:14px 14px 0 0}
.tgp-total span{font-size:.95rem;font-weight:400;color:var(--text-main)}
.tgp-total b{font-size:1.5rem;font-weight:700;color:var(--text-main);letter-spacing:-.01em;line-height:1.15;font-variant-numeric:tabular-nums}
.tgp-bal{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;color:var(--tgp-label);margin-top:4px}
.tgp-total + .tgp-bal{margin-top:0;padding:2px 16px 13px;border-radius:0 0 14px 14px;background:var(--tgp-tile)}
.tgp-bal b{font-weight:400;color:var(--text-main);font-variant-numeric:tabular-nums}
.tgp-bal.is-short b{color:var(--error)}
.tgp-pay-head{font-size:.92rem;font-weight:700;color:var(--text-main);margin:20px 0 10px}
.tgp-methods .czdp-methods{gap:8px}
.tgp-methods .czdp-method{padding:10px 12px;border-radius:12px;border-width:1.5px;border-color:var(--tgp-edge);background:transparent;transform:none}
.tgp-methods .czdp-method:hover:not(:disabled){transform:none}
.tgp-methods .czdp-method.is-on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
.tgp-methods .czdp-m-body b{font-size:.92rem;font-weight:600}
.tgp-methods .czdp-m-body i{font-size:.78rem;color:var(--tgp-label);text-wrap:pretty}
/* Every button in the card has the same height and corners; a label stays
   on one line wherever the width allows */
.tgp-go,.tgp-btn2{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:10px 16px;border-radius:12px;font-size:.95rem;font-weight:600;line-height:1.4;text-align:center;text-wrap:balance;text-decoration:none;cursor:pointer}
.tgp-go{margin-top:16px;border:0;background:var(--primary);color:#fff;transition:filter .15s,transform .15s}
.tgp-go:hover:not(:disabled){filter:brightness(1.06)}
.tgp-go:active:not(:disabled){transform:translateY(1px)}
.tgp-go:disabled{background:color-mix(in srgb,var(--primary) 38%,var(--bg-card));cursor:not-allowed}
.tgp-btn2{border:1px solid var(--tgp-edge);background:transparent;color:var(--text-main);transition:background .15s,border-color .15s}
.tgp-btn2:hover{background:var(--tgp-tile);border-color:color-mix(in srgb,var(--text-main) 24%,transparent)}
.tgp-alert{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--error-light);color:var(--error);font-size:.84rem;font-weight:600;line-height:1.5}
.tgp-alert[hidden]{display:none}
#tgp-limit{margin:0 0 12px}
.tgp-hint{text-align:center;font-size:.82rem;color:var(--tgp-label);margin-top:10px;line-height:1.5;text-wrap:pretty}

/* Result and warnings, drawn inside the summary card: a status panel in the
   outcome's colour, then the details */
.tgp-panel-head{--tone:var(--primary);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;margin-top:2px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--tone) 11%,transparent);text-align:left}
.tgp-panel-head:has(> .tgp-mark.ok){--tone:var(--success)}
.tgp-panel-head:has(> .tgp-mark.bad){--tone:var(--error)}
.tgp-panel-head:has(> .tgp-mark.warn){--tone:var(--warning)}
.tgp-mark{position:relative;grid-row:span 3;align-self:start;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tone,var(--primary));color:var(--bg-card)}
.tgp-mark svg{width:20px;height:20px}
.tgp-mark.wait{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
/* "spin" in the name keeps it turning in smooth mode (style.css) */
.tgp-spin{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent;border-top-color:var(--primary);animation:tgp-spin .9s linear infinite}
@keyframes tgp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tgp-spin{animation-duration:2.4s}}
.tgp-panel-head h3{grid-column:2;font-size:1rem;font-weight:700;color:var(--text-main);margin:0;line-height:1.45}
.tgp-panel-head p{grid-column:2;font-size:.84rem;color:var(--tgp-label);margin:2px 0 0;line-height:1.55;text-wrap:pretty}
.tgp-panel-head p b{font-weight:600;color:var(--text-main)}
.tgp-panel-head + .tgp-rows{margin-top:16px}
.tgp-res-list{display:grid;gap:8px;margin-top:14px}
.tgp-res{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--tgp-tile);font-size:.92rem}
.tgp-res > div{flex:1;min-width:0}
.tgp-res b{display:block;color:var(--text-main);font-weight:600;line-height:1.45}
.tgp-res small{display:block;color:var(--tgp-label);font-size:.8rem;margin-top:2px}
.tgp-res em{font-style:normal;font-weight:700;color:var(--text-main);white-space:nowrap}
.tgp-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--primary)}
.tgp-dot.ok{background:var(--success)}
.tgp-dot.bad{background:var(--error)}
/* Actions: the main one first, across the card; the others share a row only
   when each label fits on one line there, otherwise they stack */
.tgp-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px;margin-top:18px}
.tgp-actions > .tgp-go{grid-column:1/-1;order:-1;margin-top:0}

/* Phone bar: total + pay, while the summary card is off screen */
.tgp-bar{display:none}

/* Loading and not found */
.tgp-sk{display:block;border-radius:10px;background:var(--bg-secondary);background:linear-gradient(90deg,var(--bg-secondary) 0%,color-mix(in srgb,var(--bg-secondary) 55%,var(--bg-card)) 50%,var(--bg-secondary) 100%);background-size:200% 100%;animation:tgp-sk 1.3s linear infinite}
@keyframes tgp-sk{to{background-position:-200% 0}}
.tgp-missing{text-align:center;padding:48px 20px}
.tgp-missing h1{font-size:1.4rem;font-weight:800;margin:0 0 6px;color:var(--text-main)}
.tgp-missing p{color:var(--text-secondary);font-size:.9rem;margin:0 0 18px}
.tgp-missing .tgp-go{display:inline-flex;width:auto;padding:12px 22px;text-decoration:none;margin:0}

@media(max-width:1023px){.tgp-body{grid-template-columns:minmax(0,1fr) 300px;gap:18px}}
@media(max-width:860px){
  .tgp-body{grid-template-columns:minmax(0,1fr)}
  .tgp-side{position:static}
  .tgp-bar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:1040;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:16px;background:var(--bg-card);border:1px solid var(--border-light);box-shadow:var(--shadow-lg);transform:translateY(calc(100% + 40px));transition:transform .25s ease;visibility:hidden}
  .tgp-bar.is-on{transform:none;visibility:visible}
  .tgp-bar-sum{flex:1;min-width:0;line-height:1.25}
  .tgp-bar-sum small{display:block;font-size:.74rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tgp-bar-sum b{font-size:1.1rem;font-weight:800;color:var(--text-main)}
  .tgp-bar .tgp-go{width:auto;margin:0;padding:11px 20px;font-size:.92rem}
  body:has(#bottom-nav) .tgp-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.tgp-bar-up:has(#bottom-nav) .contact-fab{bottom:calc(160px + env(safe-area-inset-bottom,0px))}
  .tgp{padding-bottom:120px}
}
@media(max-width:639px){
  .tgx-wrap{padding:0 14px}
  .tgp-hero{padding:calc(var(--header-height) + 16px) 0 18px}
  .tgp-hero-in{gap:14px;flex-wrap:wrap}
  .tgp-logo{width:68px;height:68px;border-radius:16px;font-size:1.6rem}
  .tgp-title{font-size:1.4rem}
  .tgp-sub{font-size:.82rem}
  .tgp-back{order:-1;width:100%;padding:0;background:none;font-size:.8rem}
  .tgp-back:hover{background:none}
  .tgp-facts{font-size:.8rem;margin-top:12px}
  .tgp-body{margin-top:16px}
  .tgp-main{gap:14px}
  .tgp-card{padding:18px 16px 20px;border-radius:18px}
  .tgp-step h2{font-size:1.12rem}
  .tgp-note{font-size:.88rem;margin-bottom:18px}
  .tgp-field label{font-size:.98rem}
  .tgp-regions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tgp-region{padding:10px}
  .tgp-fields{grid-template-columns:minmax(0,1fr)}
  .tgp-packs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tgp-pack{padding:11px 11px 12px;min-height:80px;border-radius:12px}
  .tgp-pack-name{font-size:.86rem}
  .tgp-pack-price{font-size:.94rem}
}