1import{r as o,j as e}from"./vendor-react-BGN68_Lp.js";import{a as En,u as K}from"./vendor-redux-D8sX5Eqv.js";import{g as r,f as Le,E as ee}from"./vendor-styled-pkIKgjgv.js";import{aB as ue,gf as ge,gg as xt,gh as Pn,gi as vn,gj as jn,e9 as yn,t as H,O as An,gk as Sn,gl as q,dK as wn,b as Ie,gm as vt,gn as On,e0 as Mn,go as z,g as jt,v as $n,gp as kn,fm as Un,c_ as Rn,d0 as ut}from"./index-uear5Vpj.js";import{u as Fe}from"./vendor-i18n-BWleq_Sd.js";import"./vendor-socket-DSYo_sTV.js";import"./vendor-router-CYD8mbvC.js";const me={getPayments(){return ue("/api/v1/integrations/steamBalance/getPayments",{},!0)},getPrices({payment:t,amount:i,currency:c}){return ue("/api/v1/integrations/steamBalance/getPrices",{payment:t,amount:i,currency:c},!0)},getActiveInvoice(t){return ue("/api/v1/integrations/steamBalance/getActiveInvoice",t?{refresh:!0}:{},!0)},createInvoice({payment:t,account:i,amount:c,currency:x,email:u}){return ue("/api/v1/integrations/steamBalance/createInvoice",{payment:t,account:i,amount:c,currency:x,email:u})}},d=t=>jt(`/pages/steam/${t}`),In={lite:149,premium:349},Ne={none:"#C1C8DA",lite:"#759CFF",premium:"#F0B358"},Ln=t=>[{id:1,title:"STEAM-TOPUP-FAQ-1",subtitle:"STEAM-TOPUP-LOGIN-HELP-TEXT",subtitleParams:{steam:jt("/img/socials/steam.svg"),interpolation:{escapeValue:!1}},textClass:"login-help",video:d(`steam-login-${t==="ru"?"ru":"en"}.mp4`),btn:"Close"}],mt={auth:"STEAM-TOPUP-OFFER-AUTH",plan:"STEAM-TOPUP-OFFER-PLAN"},_={"â½":{code:"RUB",dec:0,rate:1,chips:[500,1e3,2e3,5e3]},"â¸":{code:"KZT",dec:0,rate:.18,chips:[3e3,5500,11e3,28e3]},$:{code:"USD",dec:2,rate:85,chips:[5,10,20,50]}},Q=Object.keys(_),yt={"â½":"rub.svg","â¸":"kzt.svg",$:"usd.svg"},Nn=[{icon:d("bolt.webp"),title:"STEAM-TOPUP-BENEFIT-FAST"},{icon:d("lock.webp"),title:"STEAM-TOPUP-BENEFIT-SAFE"},{icon:d("headset.webp"),title:"STEAM-TOPUP-BENEFIT-SUPPORT"},{icon:d("crown.webp"),title:"STEAM-TOPUP-BENEFIT-PREMIUM",gold:!0}],_n=Array.from({length:4},(t,i)=>({title:`STEAM-TOPUP-STEP-${i+1}`,text:`STEAM-TOPUP-STEP-${i+1}-TEXT`,image:d(`step${i+1}.webp`)})),Cn=Array.from({length:8},(t,i)=>({question:`STEAM-TOPUP-FAQ-${i+1}`,answer:`STEAM-TOPUP-FAQ-${i+1}-TEXT`})),Fn=/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/,Dn=/^[a-z0-9_]{3,64}$/i,ft=(t,i,c)=>x=>{const u={ArrowRight:1,ArrowDown:1,ArrowLeft:-1,ArrowUp:-1}[x.key];if(x.key===" "||x.key==="Enter")x.preventDefault(),c(i);else if(u){x.preventDefault();const N=(t.indexOf(i)+u+t.length)%t.length;c(t[N]),x.currentTarget.parentElement.children[N].focus()}},s="cubic-bezier(0.23, 1, 0.32, 1)",At="cubic-bezier(0.77, 0, 0.175, 1)",St="rgba(104, 117, 161, 0.19)",Bn=r.div` 2 min-height: 100%; 3 padding: 96px 1vw 80px; 4 background: #131821 url(${d("bg.jpg")}) no-repeat top center / 100% auto; 5 6 @media (max-width: 900px) { 7 padding: 48px 16px 64px; 8 } 9`,Hn=r.div` 10 max-width: 917px; 11 margin: 0 auto; 12`,wt=r.h1` 13 font-family: Montserrat, Roboto, sans-serif; 14 font-weight: 800; 15 font-size: 56px; 16 line-height: 60px; 17 letter-spacing: -0.02em; 18 text-align: center; 19 color: #fff; 20 21 img { 22 width: 0.75em; 23 height: 0.75em; 24 margin-right: 0.16em; 25 vertical-align: -0.018em; 26 } 27 28 @media (max-width: 1000px) { 29 font-size: 44px; 30 line-height: 48px; 31 } 32 33 @media (max-width: 600px) { 34 font-size: 32px; 35 line-height: 36px; 36 } 37`,Ot=r.p` 38 max-width: 502px; 39 margin: 16px auto 48px; 40 font-size: 18px; 41 line-height: 1.2; 42 text-align: center; 43 color: #759cff; 44 45 @media (max-width: 900px) { 46 margin-bottom: 32px; 47 font-size: 16px; 48 } 49`,C="10px",gt=16,zn=64,G={ok:{rgb:"44, 129, 59",badge:"#2c813b"},wait:{rgb:"96, 128, 255",badge:"#4a63d6"},fail:{rgb:"217, 83, 60",badge:"#c4452f"}},Mt={delivered:{tone:"ok",badge:"STEAM-TOPUP-PAID-TITLE",text:"STEAM-TOPUP-PAID-TEXT",action:"STEAM-TOPUP-PAID-AGAIN"},pending:{tone:"wait",badge:"STEAM-TOPUP-BADGE-PENDING",text:"STEAM-TOPUP-STATUS-PENDING-TEXT",action:"STEAM-TOPUP-GO-TO-PAY"},new:{tone:"wait",badge:"STEAM-TOPUP-BADGE-NEW",text:"STEAM-TOPUP-STATUS-NEW-TEXT"},cancelled:{tone:"fail",badge:"STEAM-TOPUP-BADGE-CANCELLED",text:"STEAM-TOPUP-STATUS-CANCELLED-TEXT",action:"STEAM-TOPUP-AGAIN-RETRY"},timeout:{tone:"fail",badge:"STEAM-TOPUP-BADGE-TIMEOUT",text:"STEAM-TOPUP-STATUS-TIMEOUT-TEXT",action:"STEAM-TOPUP-AGAIN-RETRY"},failed:{tone:"fail",badge:"STEAM-TOPUP-BADGE-FAILED",text:"STEAM-TOPUP-STATUS-FAILED-TEXT",action:"STEAM-TOPUP-AGAIN-RETRY"}},Gn=5e3,Wn=2e4,Yn=90*1e3,ht=(t,i)=>
49`${Number(t).toLocaleString("ru-RU",{maximumFractionDigits:2})} ${Q.find(c=>_[c].code===i)??i}`,Vn=ee` 50 from { 51 opacity: 0; 52 } 53 to { 54 opacity: 1; 55 } 56`,Xn=ee` 57 to { 58 clip-path: inset(0 0 0 0); 59 } 60`,$t=r.div` 61 position: relative; 62 display: grid; 63 grid-template-columns: minmax(0, 1fr) auto; 64 grid-template-areas: 65 'title again' 66 'text again' 67 'meta again'; 68 column-gap: 24px; 69 align-items: center; 70 padding: 24px; 71 border-radius: 12px 12px 0 0; 72 background: 73 radial-gradient( 74 60% 180% at 0% 0%, 75 rgba(${({$tone:t})=>G[t].rgb}, 0.24) 0%, 76 rgba(${({$tone:t})=>G[t].rgb}, 0) 62% 77 ), 78 linear-gradient(rgba(${({$tone:t})=>G[t].rgb}, 0.12), rgba(${({$tone:t})=>G[t].rgb}, 0.12)), 79 #1c2130; 80 animation: ${Vn} 240ms ${s}; 81 82 --perf: radial-gradient(circle 4px at 50% 0, transparent 97%, #000 100%); 83 --solid: linear-gradient(#000, #000); 84 --stub-l: radial-gradient(circle ${C} at 0 100%, transparent 98%, #000 100%); 85 --stub-r: radial-gradient(circle ${C} at 100% 100%, transparent 98%, #000 100%); 86 -webkit-mask: 87 var(--perf) var(--perf-inset, 64px) 0 / 16px 5px repeat-x, 88 var(--solid) 0 0 / var(--perf-inset, 64px) 5px no-repeat, 89 var(--solid) 100% 0 / var(--perf-inset, 64px) 5px no-repeat, 90 var(--stub-l) 0 5px / 51% calc(100% - 5px) no-repeat, 91 var(--stub-r) 100% 5px / 51% calc(100% - 5px) no-repeat; 92 mask: 93 var(--perf) var(--perf-inset, 64px) 0 / 16px 5px repeat-x, 94 var(--solid) 0 0 / var(--perf-inset, 64px) 5px no-repeat, 95 var(--solid) 100% 0 / var(--perf-inset, 64px) 5px no-repeat, 96 var(--stub-l) 0 5px / 51% calc(100% - 5px) no-repeat, 97 var(--stub-r) 100% 5px / 51% calc(100% - 5px) no-repeat; 98 99 &::after { 100 content: ''; 101 position: absolute; 102 bottom: 0; 103 left: calc(${C} + 6px); 104 right: calc(${C} + 6px); 105 height: 1px; 106 background: repeating-linear-gradient(90deg, rgba(104, 117, 161, 0.19) 0 6px, transparent 6px 10px); 107 pointer-events: none; 108 } 109 110 @media (prefers-reduced-motion: reduce) { 111 animation: none; 112 } 113 114 @media (max-width: 600px) { 115 grid-template-columns: minmax(0, 1fr); 116 grid-template-areas: 'title' 'text' 'meta' 'again'; 117 } 118`,Kn=r.div` 119 grid-area: title; 120 justify-self: start; 121 display: inline-flex; 122 height: 24px; 123 margin-bottom: 16px; 124 clip-path: inset(0 100% 0 0); 125 animation: ${Xn} 300ms ${s} forwards; 126 127 h2 { 128 display: flex; 129 align-items: center; 130 margin: 0; 131 padding: 4px 8px; 132 border-radius: 4px; 133 background: ${({$tone:t})=>G[t].badge}; 134 color: #fff; 135 font: 700 11px/16px Roboto, sans-serif; 136 letter-spacing: 0.04em; 137 text-transform: uppercase; 138 } 139 140 @media (prefers-reduced-motion: reduce) { 141 clip-path: none; 142 animation: none; 143 } 144`,qn=r.p` 145 grid-area: text; 146 margin: 0; 147 color: #c1c8da; 148 font: 400 15px/18px Roboto, sans-serif; 149`,Qn=r.p` 150 grid-area: meta; 151 margin: 4px 0 0; 152 color: #a6aec2; 153 font: 400 13px/18px Roboto, sans-serif; 154 font-variant-numeric: tabular-nums; 155 156 b { 157 color: #dee2ed; 158 font-weight: 500; 159 overflow-wrap: anywhere; 160 } 161`,_e=r.button` 162 grid-area: again; 163 display: inline-flex; 164 align-items: center; 165 justify-content: center; 166 gap: 8px; 167 height: 40px; 168 padding: 0 16px; 169 border: 0; 170 border-radius: 8px; 171 background: rgba(${({$tone:t})=>G[t].rgb}, 0.4); 172 color: #fff; 173 font: 500 14px/20px Roboto, sans-serif; 174 white-space: nowrap; 175 cursor: pointer; 176 transition: 177 background-color 160ms ${s}, 178 transform 160ms ${s}; 179 180 svg { 181 width: 16px; 182 height: 16px; 183 flex: none; 184 color: #fff; 185 } 186 187 @media (hover: hover) and (pointer: fine) { 188 &:hover { 189 background: rgba(${({$tone:t})=>G[t].rgb}, 0.52); 190 } 191 } 192 193 &:active { 194 transform: scale(0.97); 195 } 196 197 &:focus-visible { 198 outline: 2px solid #8fa6ff; 199 outline-offset: 2px; 200 } 201 202 @media (prefers-reduced-motion: reduce) { 203 transition: none; 204 } 205 206 @media (max-width: 600px) { 207 width: 100%; 208 margin-top: 16px; 209 } 210`,Zn=()=>e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[e.jsx("path",{d:"M4 12V9.5A3.5 3.5 0 0 1 7.5 6H19"}),e.jsx("path",{d:"M16 3l3 3-3 3"}),e.jsx("path",{d:"M20 12v2.5a3.5 3.5 0 0 1-3.5 3.5H5"}),e.jsx("path",{d:"M8 21l-3-3 3-3"})]}),kt=({invoice:t,onAction:i})=>{const{t:c}=Fe(),x=o.useRef(null),u=Mt[t.status_name];o.useEffect(()=>{const U=x.current;if(!U)return;const F=()=>{const R=U.offsetWidth,m=Math.max(0,Math.floor((R-2*zn)/gt));U.style.setProperty("--perf-inset",`${(R-m*gt)/2}px`)},w=new ResizeObserver(F);return w.observe(U),()=>w.disconnect()},[]);const[N,W]=c("STEAM-TOPUP-STATUS-WALLET",{sum:ht(t.amount_wallet,t.currency),account:"\0"}).split("\0");return e.jsxs($t,{ref:x,role:"status",$tone:u.tone,children:[e.jsx(Kn,{$tone:u.tone,children:e.jsx("h2",{children:c(u.badge)})}
210,t.status_name),e.jsx(qn,{children:c(u.text)}),e.jsxs(Qn,{children:[t.status_name==="pending"&&`${c("STEAM-TOPUP-STATUS-TO-PAY",{sum:ht(t.amount,"RUB")})} · `,N,e.jsx("b",{children:t.account}),W]}),u.action&&(t.status_name==="pending"?t.bill_url&&e.jsx(_e,{as:"a",href:t.bill_url,$tone:u.tone,children:e.jsx("span",{children:c(u.action)})}):e.jsxs(_e,{type:"button",onClick:i,$tone:u.tone,children:[e.jsx(Zn,{}),e.jsx("span",{children:c(u.action)})]}))]})},De=r.div` 211 display: grid; 212 grid-template-columns: 1fr 1fr; 213 gap: 24px; 214 align-items: start; 215 padding: 24px; 216 border-radius: 12px; 217 background: #1c2130; 218 219 ${({$joined:t})=>t&&` 220 border-radius: 0 0 12px 12px; 221 -webkit-mask: 222 radial-gradient(circle ${C} at 0 0, transparent 98%, #000 100%) 0 0 / 51% 100% no-repeat, 223 radial-gradient(circle ${C} at 100% 0, transparent 98%, #000 100%) 100% 0 / 51% 100% no-repeat; 224 mask: 225 radial-gradient(circle ${C} at 0 0, transparent 98%, #000 100%) 0 0 / 51% 100% no-repeat, 226 radial-gradient(circle ${C} at 100% 0, transparent 98%, #000 100%) 100% 0 / 51% 100% no-repeat; 227 `} 228 229 @media (max-width: 900px) { 230 grid-template-columns: 1fr; 231 } 232`,Ut=r.div` 233 display: flex; 234 flex-direction: column; 235 min-width: 0; 236`,Z=r.div` 237 display: flex; 238 flex-direction: column; 239 gap: 16px; 240 241 & + & { 242 margin-top: 24px; 243 padding-top: 24px; 244 border-top: 1px solid ${St}; 245 } 246`,Jn=ee` 247 to { clip-path: inset(0 0 0 0); } 248`,er=r.div` 249 display: inline-flex; 250 align-self: flex-start; 251 height: 24px; 252 clip-path: inset(0 100% 0 0); 253 animation: ${Jn} 300ms ${s} forwards; 254 255 ${Z} + ${Z} & { 256 animation-delay: 80ms; 257 } 258 259 b { 260 flex: none; 261 display: grid; 262 place-items: center; 263 width: 26px; 264 border-radius: 11px 0 0 11px; 265 background: rgba(75, 103, 224, 0.6); 266 font: 267 600 15px/18px Roboto, 268 sans-serif; 269 font-variant-numeric: tabular-nums; 270 color: #fff; 271 } 272 273 b[data-one] { 274 padding-left: 1.5px; 275 } 276 277 img { 278 flex: none; 279 width: 6px; 280 height: 24px; 281 margin-right: -2px; 282 } 283 284 span { 285 display: flex; 286 align-items: center; 287 min-width: 0; 288 padding: 0 12px; 289 border-radius: 11px; 290 background: #4b67e0; 291 font: 292 600 13px/16px Roboto, 293 sans-serif; 294 color: #fff; 295 } 296 297 @media (prefers-reduced-motion: reduce) { 298 clip-path: none; 299 animation: none; 300 } 301`,he=({n:t,children:i})=>e.jsxs(er,{children:[e.jsx("b",{"data-one":t===1||void 0,children:t}),e.jsx("img",{src:d("notch.svg"),alt:""}),e.jsx("span",{children:i})]}),J=r.label` 302 display: flex; 303 align-items: center; 304 gap: 15px; 305 height: 56px; 306 padding: 0 16px; 307 border-radius: 8px; 308 background: rgba(145, 175, 253, 0.07); 309 overflow: hidden; 310 transition: box-shadow 140ms ${s}; 311 312 &:focus-within { 313 box-shadow: 0 0 0 2px #364994; 314 } 315 316 img { 317 width: 22px; 318 height: 22px; 319 flex: none; 320 } 321 322 input { 323 flex: 1 1 auto; 324 min-width: 0; 325 height: 100%; 326 background: none; 327 font-size: 15px; 328 color: #fff; 329 330 &::placeholder { 331 color: #9aa6bc; 332 opacity: 1; 333 } 334 } 335`,Rt=r.button` 336 flex: none; 337 margin-left: auto; 338 margin-right: -8px; 339 padding: 7px 8px; 340 background: none; 341 white-space: nowrap; 342 font-size: 14px; 343 font-weight: 500; 344 color: #759cff; 345 cursor: pointer; 346 347 &::after { 348 content: ''; 349 position: absolute; 350 left: 8px; 351 right: 8px; 352 bottom: 8px; 353 height: 1px; 354 background: #759cff; 355 transform: scaleX(0); 356 transform-origin: right center; 357 transition: transform 180ms ${s}; 358 } 359 360 &:hover::after, 361 &:focus-visible::after { 362 transform: scaleX(1); 363 transform-origin: left center; 364 } 365`,It=r.div` 366 display: grid; 367 grid-template-rows: 0fr; 368 margin-top: -16px; 369 padding-left: 16px; 370 opacity: 0; 371 transition: 372 grid-template-rows 180ms ${s}, 373 margin-top 180ms ${s}, 374 opacity 180ms ${s}; 375 376 ${J}:focus-within + &, 377 &:hover, 378 &:focus-within { 379 grid-template-rows: 1fr; 380 margin-top: -8px; 381 opacity: 1; 382 } 383 384 & > span { 385 overflow: hidden; 386 } 387 388 @media (prefers-reduced-motion: reduce) { 389 transition: none; 390 } 391`,tr=r(It)` 392 font-size: 12px; 393 line-height: 16.8px; 394 395 span { 396 color: #a6aec2; 397 } 398`,Lt=r(J)` 399 margin-top: -4px; 400`,nr=ee` 401 from { opacity: 0; transform: translateY(3px) scale(0.9); } 402 to { opacity: 1; transform: none; } 403`,Nt=r.span` 404 flex: none; 405 406 img { 407 display: block; 408 width: 22px; 409 height: 22px; 410 animation: ${nr} 160ms ${s}; 411 } 412 413 @media (prefers-reduced-motion: reduce) { 414 img { 415 animation: none; 416 } 417 } 418`,_t=r.div` 419 flex: none;
420 align-self: center; 421 display: flex; 422 gap: 2px; 423 height: 40px; 424 padding: 4px; 425 margin-right: -8px; 426 border-radius: 8px; 427 background: rgba(81, 95, 135, 0.4); 428 429 i { 430 position: absolute; 431 top: 4px; 432 left: 4px; 433 width: 32px; 434 height: 32px; 435 border-radius: 4px; 436 background: rgba(81, 95, 135, 0.6); 437 transform: translateX(${({$index:t})=>t*34}px); 438 transition: transform 220ms ${At}; 439 } 440 441 button { 442 width: 32px; 443 height: 32px; 444 border-radius: 4px; 445 background: transparent; 446 font-size: 14px; 447 font-weight: 500; 448 color: #c1c8da; 449 cursor: pointer; 450 transition: color 220ms ${s}; 451 452 &.active { 453 color: #fff; 454 } 455 } 456 457 @media (hover: hover) and (pointer: fine) { 458 button:not(.active):hover { 459 background: rgba(81, 95, 135, 0.28); 460 } 461 } 462 463 @media (prefers-reduced-motion: reduce) { 464 i { 465 transition: none; 466 } 467 } 468`,rr=ee` 469 to { opacity: 1; transform: none; } 470`,Ct=r.div` 471 display: flex; 472 gap: 4px; 473 margin-top: -8px; 474 475 button { 476 padding: 6px 10px; 477 border-radius: 8px; 478 background: rgba(145, 175, 253, 0.07); 479 white-space: nowrap; 480 font-size: 13px; 481 font-weight: 500; 482 color: #c1c8da; 483 cursor: pointer; 484 opacity: 0; 485 transform: translateY(4px); 486 animation: ${rr} 200ms ${s} forwards; 487 488 &:nth-child(1) { 489 animation-delay: 40ms; 490 } 491 &:nth-child(2) { 492 animation-delay: 80ms; 493 } 494 &:nth-child(3) { 495 animation-delay: 120ms; 496 } 497 &:nth-child(4) { 498 animation-delay: 160ms; 499 } 500 501 &.active { 502 background: rgba(145, 175, 253, 0.14); 503 color: #fff; 504 } 505 } 506 507 @media (hover: hover) and (pointer: fine) { 508 button:not(.active):hover { 509 background: rgba(145, 175, 253, 0.11); 510 } 511 } 512 513 @media (prefers-reduced-motion: reduce) { 514 button { 515 opacity: 1; 516 transform: none; 517 animation: none; 518 } 519 } 520`,ir=r.div` 521 display: grid; 522 grid-template-rows: ${({$on:t})=>t?"1fr":"0fr"}; 523 opacity: ${({$on:t})=>t?1:0}; 524 transition: 525 grid-template-rows 220ms ${s}, 526 opacity 160ms ${s}; 527 528 span { 529 overflow: hidden; 530 padding-top: ${({$on:t})=>t?"8px":0}; 531 font-size: 12px; 532 line-height: 1.4; 533 color: #a6aec2; 534 } 535 536 @media (prefers-reduced-motion: reduce) { 537 transition: opacity 160ms ease; 538 } 539`,Ft=r.ul` 540 display: grid; 541 grid-template-columns: 1fr 1fr; 542 gap: 6px; 543 544 li { 545 display: flex; 546 align-items: center; 547 justify-content: center; 548 gap: 12px; 549 height: 100px; 550 border: 1px solid transparent; 551 border-radius: 8px; 552 background: rgba(145, 175, 253, 0.07); 553 overflow: hidden; 554 cursor: pointer; 555 transition: border-color 140ms ${s}; 556 557 &.active { 558 border-color: #364994; 559 } 560 561 &:focus-visible { 562 outline: 2px solid #8fa6ff; 563 outline-offset: 2px; 564 } 565 } 566 567 .hover, 568 .blue-gradient { 569 position: absolute; 570 inset: 0; 571 opacity: 0; 572 } 573 574 .hover { 575 background: #2f374d; 576 transition: opacity 0.3s ease; 577 } 578 579 .blue-gradient { 580 background: linear-gradient( 581 rgba(96, 128, 255, 0.4), 582 rgba(96, 128, 255, 0) 583 ); 584 transition: opacity 140ms ${s}; 585 } 586 587 li:hover .hover, 588 li.active .blue-gradient { 589 opacity: 1; 590 } 591 592 li.active .hover { 593 opacity: 0; 594 } 595 596 span { 597 font: 600 15px/20px Gotham; 598 color: #dee2ed; 599 } 600 601 img { 602 height: 41px; 603 } 604 605 i { 606 position: absolute; 607 top: 8px; 608 left: 8px; 609 display: flex; 610 padding: 3px; 611 border-radius: 4px; 612 background: #6080ff; 613 614 img { 615 width: 14px; 616 height: 14px; 617 } 618 } 619 620 @media (prefers-reduced-motion: reduce) { 621 li, 622 .blue-gradient { 623 transition: none; 624 } 625 } 626`,Dt=r.div`
627 align-self: stretch; 628 display: flex; 629 flex-direction: column; 630 gap: 20px; 631 min-width: 0; 632 padding: 20px; 633 border-radius: 8px; 634 background: rgba(145, 175, 253, 0.05); 635`,Bt=r.div` 636 display: flex; 637 flex-direction: column; 638 gap: 12px; 639`,be=r.div` 640 display: flex; 641 align-items: baseline; 642 gap: 4px; 643 font-size: 15px; 644 line-height: 1.2; 645 646 & > span { 647 color: #c1c8da; 648 } 649 650 & > span:first-child { 651 white-space: nowrap; 652 } 653 654 & > span:last-child { 655 flex: none; 656 } 657 658 & > i { 659 flex: 1 1 auto; 660 min-width: 16px; 661 height: 1px; 662 color: #7c88a6; 663 background: radial-gradient(circle, currentColor 1px, transparent 1px) 0 664 center / 6px 2px repeat-x; 665 } 666`,Ht=r.span` 667 margin-left: 3px; 668 font-variant-numeric: tabular-nums; 669 color: ${({$ink:t})=>t}; 670 transition: color 700ms ${s}; 671 672 s { 673 margin-right: 4px; 674 color: #a6aec2; 675 text-decoration: line-through; 676 text-decoration-thickness: 1px; 677 } 678 679 b { 680 font-weight: inherit; 681 color: inherit; 682 } 683 684 @media (prefers-reduced-motion: reduce) { 685 transition: none; 686 } 687`,zt=r.div` 688 margin-top: 4px; 689 690 button { 691 display: inline-flex; 692 align-items: center; 693 gap: 4px; 694 background: none; 695 font: 696 500 13px/18px Roboto, 697 sans-serif; 698 color: #ff9933; 699 cursor: pointer; 700 clip-path: inset(0 -2px 0 0); 701 transform: translateY(0); 702 transition: 703 color 220ms ${s}, 704 opacity 200ms ${s}, 705 clip-path 340ms ${s}, 706 transform 340ms ${s}; 707 708 span, 709 b { 710 font-weight: inherit; 711 color: inherit; 712 } 713 714 b { 715 font-variant-numeric: tabular-nums; 716 } 717 718 img { 719 flex: none; 720 width: 16px; 721 height: 16px; 722 margin-top: -1px; 723 transition: transform 260ms ${s}; 724 } 725 726 &[aria-expanded='true'] img { 727 transform: rotate(45deg); 728 } 729 730 &:active { 731 transform: scale(0.98); 732 } 733 } 734 735 &[aria-hidden='true'] button { 736 opacity: 0; 737 pointer-events: none; 738 clip-path: inset(0 100% 0 0); 739 transform: translateY(3px); 740 } 741 742 @media (hover: hover) and (pointer: fine) { 743 button:hover { 744 opacity: 0.78; 745 } 746 } 747 748 @media (prefers-reduced-motion: reduce) { 749 button { 750 clip-path: none; 751 transform: none; 752 transition: 753 color 220ms ease, 754 opacity 160ms ease; 755 } 756 } 757`,Gt=r.div` 758 display: grid; 759 grid-template-rows: ${({$on:t})=>t?"1fr":"0fr"}; 760 margin-top: ${({$on:t})=>t?0:"-12px"}; 761 transition: 762 grid-template-rows 260ms ${s}, 763 margin-top 260ms ${s}; 764 765 & > div { 766 overflow: hidden; 767 } 768 769 @media (prefers-reduced-motion: reduce) { 770 transition: none; 771 } 772`,Te=r.div` 773 display: grid; 774 grid-auto-flow: column; 775 grid-auto-columns: 1fr; 776 gap: 8px; 777`,Be=r.button` 778 display: flex; 779 flex-direction: column; 780 gap: 2px; 781 padding: 8px 12px; 782 border: 1px solid transparent; 783 border-radius: 12px; 784 background: rgba(81, 95, 135, 0.4); 785 text-align: left; 786 cursor: pointer; 787 opacity: 0; 788 transform: translateY(6px); 789 transition: 790 opacity 220ms ${s}, 791 transform 220ms ${s}, 792 background-color 200ms ease; 793 794 .is-ready & { 795 opacity: 1; 796 transform: none; 797 } 798 799 .is-ready &:nth-child(2) { 800 transition-delay: 60ms; 801 } 802 803 .is-ready &:nth-child(3) { 804 transition-delay: 120ms; 805 } 806 807 &:active { 808 transform: scale(0.97); 809 transition-duration: 160ms; 810 } 811 812 b { 813 font: 814 500 11px/1.2 Roboto, 815 sans-serif; 816 letter-spacing: 0.02em; 817 } 818 819 & > i { 820 font: 821 700 18px/1.15 Roboto, 822 sans-serif; 823 font-style: normal; 824 font-variant-numeric: tabular-nums; 825 white-space: nowrap; 826 color: #c7d3e2; 827 } 828 829 em { 830 align-self: flex-start; 831 min-height: 14px; 832 margin-top: 2px; 833 padding: 0 5px; 834 border-radius: 4px; 835 font: 836 500 10px/14px Roboto, 837 sans-serif; 838 font-style: normal; 839 font-variant-numeric: tabular-nums; 840 white-space: nowrap; 841 background: var(--badge); 842 843 &:empty { 844 padding: 0; 845 background: none; 846 } 847 } 848 849 & > span { 850 position: absolute; 851 top: 8px; 852 right: 8px; 853 display: flex; 854 align-items: center; 855 justify-content: center; 856 width: 12px; 857 height: 12px; 858 border: 1px solid #7c88a6; 859 border-radius: 50%; 860 background: #0f1624; 861 transition: border-color 220ms ${s}; 862 863 i { 864 width: 6px; 865 height: 6px; 866 border-radius: 50%; 867 transform: scale(0); 868 transition: 869 transform 160ms ${s}, 870 background-color 160ms ${s}; 871 } 872 } 873 874 &[data-tier='none'] { 875 --ink: #c1c8da; 876 --price: #fff; 877 } 878 879 &[data-tier='lite'] { 880 --ink: #759cff; 881 --badge: rgba(96, 128, 255, 0.2); 882 } 883 884 &[data-tier='premium'] { 885 --ink: #f0b358; 886 --badge: rgba(240, 179, 88, 0.16); 887 } 888 889 b, 890 em { 891 color: var(--ink); 892 } 893 894 &.is-on { 895 & > i { 896 color: var(--price, var(--ink)); 897 } 898 899 & > span { 900 border-color: var(--ink); 901 902 i { 903 background: var(--ink); 904 transform: scale(1); 905 } 906 } 907 } 908 909 @media (hover: hover) and (pointer: fine) { 910 &:not(.is-on):hover { 911 background: rgba(81, 95, 135, 0.52); 912 } 913 } 914 915 @media (prefers-reduced-motion: reduce) { 916 transform: none !important; 917 transition: 918 opacity 200ms ease, 919 background-color 200ms ease; 920 transition-delay: 0ms !important; 921 922 & > span, 923 & > span i { 924 transition: none; 925 } 926 } 927`,ar={lite:Le` 928 background: 929 radial-gradient( 930 120% 180% at 0% 0%, 931 rgba(49, 95, 204, 0.3) 0%, 932 rgba(49, 95, 204, 0) 62% 933 ), 934 linear-gradient( 935 327deg, 936 rgba(103, 120, 180, 0.12) -17%, 937 rgba(103, 134, 195, 0.03) 92% 938 ); 939 940 &::before { 941 background-image: url(${d("mesh-lite.webp")}); 942 } 943 `,premium:Le` 944 background: 945 radial-gradient( 946 120% 180% at 0% 0%, 947 rgba(216, 135, 53, 0.26) 0%, 948 rgba(216, 135, 53, 0) 62% 949 ), 950 linear-gradient( 951 327deg, 952 rgba(177, 152, 133, 0.12) -17%,
953 rgba(191, 157, 142, 0.03) 92% 954 ); 955 956 &::before { 957 background-image: url(${d("mesh-premium.webp")}); 958 } 959 `},or=r(Be)` 960 isolation: isolate; 961 align-items: flex-start; 962 gap: 12px; 963 padding: 16px; 964 border: 0; 965 overflow: hidden; 966 pointer-events: none; 967 ${({$tier:t})=>ar[t]} 968 969 &::before, 970 &::after { 971 content: ''; 972 position: absolute; 973 inset: 0; 974 z-index: 0; 975 pointer-events: none; 976 } 977 978 &::before { 979 background-size: auto 100%; 980 background-repeat: no-repeat; 981 background-position: right center; 982 } 983 984 &::after { 985 background: linear-gradient( 986 180deg, 987 transparent 0%, 988 rgba(8, 11, 18, 0.08) 32%, 989 rgba(8, 11, 18, 0.24) 100% 990 ); 991 } 992 993 & > * { 994 z-index: 1; 995 } 996 997 img { 998 display: block; 999 width: auto; 1000 height: 10px; 1001 } 1002 1003 p { 1004 font: 1005 400 14px/20px Roboto, 1006 sans-serif; 1007 color: #dee2ed; 1008 } 1009 1010 small { 1011 display: block; 1012 margin-top: 2px; 1013 font: 1014 400 12px/16px Roboto, 1015 sans-serif; 1016 color: #a6aec2; 1017 } 1018`,Wt=r.p` 1019 margin-top: 12px; 1020 font-size: 12px; 1021 line-height: 1.4; 1022 color: #a6aec2; 1023`,Yt=r.div` 1024 display: flex; 1025 flex: 1; 1026 min-height: 0; 1027 flex-direction: column; 1028 gap: 16px; 1029 padding-top: ${({$tight:t})=>t?0:"20px"}; 1030 transition: padding-top 260ms ${s}; 1031 1032 @media (prefers-reduced-motion: reduce) { 1033 transition: none; 1034 } 1035`,sr=r(It)` 1036 font: 1037 400 13px/18px Roboto, 1038 sans-serif; 1039 1040 span, 1041 button { 1042 color: #9aa6bc; 1043 } 1044 1045 button { 1046 background: none; 1047 font: inherit; 1048 cursor: pointer; 1049 1050 &:focus-visible { 1051 outline: 2px solid #8fa6ff; 1052 outline-offset: 2px; 1053 border-radius: 4px; 1054 } 1055 } 1056 1057 b { 1058 font-weight: 500; 1059 color: #759cff; 1060 } 1061 1062 @media (hover: hover) and (pointer: fine) { 1063 button:hover b { 1064 text-decoration: underline; 1065 } 1066 } 1067`,He=r.div` 1068 display: flex; 1069 align-items: baseline; 1070 justify-content: space-between; 1071 gap: 16px; 1072 margin-top: auto; 1073 padding-top: 20px; 1074 1075 & > span:first-child { 1076 font: 1077 500 18px/24px Roboto, 1078 sans-serif; 1079 color: #dee2ed; 1080 } 1081 1082 & > span:last-child { 1083 font: 1084 700 36px/40px Roboto, 1085 sans-serif; 1086 font-variant-numeric: tabular-nums; 1087 letter-spacing: -0.01em; 1088 color: #fff; 1089 } 1090 1091 @media (max-width: 600px) { 1092 & > span:last-child { 1093 font-size: 28px; 1094 line-height: 32px; 1095 } 1096 } 1097`,ze=r.button` 1098 display: flex; 1099 align-items: center; 1100 justify-content: center; 1101 gap: 8px; 1102 height: 56px; 1103 padding: 0 24px; 1104 border-radius: 8px; 1105 background: #6080ff; 1106 font-size: 16px; 1107 font-weight: 700; 1108 color: #fff; 1109 cursor: pointer; 1110 transition: 1111 filter 160ms ${s}, 1112 opacity 0.2s; 1113 1114 span { 1115 color: inherit; 1116 } 1117 1118 img { 1119 flex: none; 1120 width: 20px; 1121 height: 20px; 1122 } 1123 1124 &:disabled { 1125 background: rgba(96, 128, 255, 0.14); 1126 color: #49547b; 1127 cursor: default; 1128 } 1129 1130 ${({$gold:t})=>t&&Le` 1131 background: #f0b358; 1132 color: #1c2130; 1133 1134 @media (hover: hover) and (pointer: fine) { 1135 &:hover { 1136 filter: brightness(110%); 1137 } 1138 } 1139 `} 1140`,Vt=r.span` 1141 margin-top: -4px; 1142 font-size: 13px; 1143 line-height: 18px; 1144 color: #c1c8da; 1145 1146 a { 1147 color: #beccff; 1148 } 1149`,cr=r.section` 1150 display: grid; 1151 grid-template-columns: repeat(4, 1fr); 1152 row-gap: 32px; 1153 align-items: start; 1154 max-width: 840px; 1155 padding: 112px 32px 0; 1156 1157 div { 1158 display: flex; 1159 flex-direction: column; 1160 align-items: center; 1161 gap: 12px; 1162 } 1163 1164 img { 1165 width: 80px; 1166 height: 80px; 1167 } 1168 1169 h4 { 1170 font-family: Montserrat; 1171 font-weight: 700; 1172 font-size: clamp(15px, calc(0.85vw + 10.1px), 20px); 1173 line-height: 1.2; 1174 text-align: center; 1175 text-transform: none; 1176 white-space: pre-line; 1177 color: #fff; 1178 } 1179 1180 .gold h4 { 1181 color: #e99c2f; 1182 } 1183 1184 @media (max-width: 520px) { 1185 grid-template-columns: 1fr; 1186 } 1187`,bt=r.section` 1188 display: flex; 1189 flex-direction: column; 1190 align-items: center; 1191 gap: 48px; 1192 width: 100%; 1193 padding-top: 96px; 1194 1195 & > h2 { 1196 font-family: Montserrat, Roboto, sans-serif; 1197 font-weight: 800; 1198 font-size: 40px; 1199 line-height: 44px; 1200 letter-spacing: -0.015em; 1201 text-align: center; 1202 text-transform: uppercase; 1203 color: #fff; 1204 } 1205 1206 @media (max-width: 1000px) { 1207 & > h2 { 1208 font-size: 32px; 1209 line-height: 36px; 1210 } 1211 } 1212 1213 @media (max-width: 600px) { 1214 & > h2 { 1215 font-size: 24px; 1216 line-height: 28px; 1217 } 1218 } 1219`,lr=r.div` 1220 display: flex; 1221 gap: 24px; 1222 width: 100%; 1223 1224 & > div { 1225 flex: 1; 1226 display: flex; 1227 flex-direction: column; 1228 align-items: flex-start; 1229 gap: 16px; 1230 } 1231 1232 h3 { 1233 font: 700 18px/24px Montserrat; 1234 text-transform: none; 1235 color: #fff; 1236 } 1237 1238 img { 1239 width: 100%; 1240 } 1241 1242 p { 1243 font: 500 16px/140% Montserrat; 1244 color: #fff; 1245 } 1246 1247 @media (max-width: 1000px) { 1248 display: grid; 1249 grid-template-columns: 1fr 1fr; 1250 } 1251 1252 @media (max-width: 600px) { 1253 grid-template-columns: 1fr; 1254 } 1255`,dr=r.div` 1256 display: flex; 1257 align-items: center; 1258 justify-content: space-between; 1259 gap: 24px; 1260 width: 100%; 1261 padding: 32px; 1262 border-radius: 8px; 1263 background: 1264 linear-gradient( 1265 320deg, 1266 rgba(177, 152, 133, 0.12) -15%,
1267 rgba(191, 157, 142, 0.0312) 90% 1268 ), 1269 #0d111b; 1270 overflow: hidden; 1271 1272 &::before { 1273 content: ''; 1274 position: absolute; 1275 inset: 0; 1276 background: url(${d("plate.webp")}) no-repeat center / cover; 1277 } 1278 1279 & > * { 1280 z-index: 1; 1281 } 1282 1283 h3 { 1284 font: 800 24px/32px Montserrat; 1285 text-transform: none; 1286 color: #fff; 1287 } 1288 1289 p { 1290 margin-top: 8px; 1291 font: 600 18px/140% Montserrat; 1292 color: #e49635; 1293 1294 span { 1295 font-weight: 800; 1296 color: inherit; 1297 } 1298 } 1299 1300 button { 1301 flex-shrink: 0; 1302 display: flex; 1303 align-items: center; 1304 gap: 10px; 1305 height: 60px; 1306 padding: 0 24px; 1307 border-radius: 8px; 1308 background: #e49635; 1309 white-space: nowrap; 1310 font-size: 16px; 1311 font-weight: 700; 1312 color: #fff; 1313 cursor: pointer; 1314 transition: filter 0.2s ease; 1315 1316 &:hover { 1317 filter: brightness(110%); 1318 } 1319 1320 img { 1321 width: 24px; 1322 height: 24px; 1323 } 1324 } 1325`,pr=r.section` 1326 max-width: 800px; 1327 margin: 48px auto 0; 1328`,Xt=(t,i)=>{const c=x=>`${z[x]}%`;return i==="lite"?t("STEAM-TOPUP-NOTE-LITE",{pct:c("lite")}):i==="premium"?t("STEAM-TOPUP-NOTE-PREMIUM",{pct:c("premium")}):t("STEAM-TOPUP-NOTE-COMPARE")},Tt=r.span` 1329 margin-left: 6px; 1330 font-size: 12px; 1331 font-weight: 400; 1332 color: #a6aec2; 1333 white-space: nowrap; 1334`,Et=r.p` 1335 font-size: 13px; 1336 line-height: 18px; 1337 color: ${({$error:t})=>t?"#ff9f85":"#a6aec2"}; 1338`,Mr=()=>{const{t}=Fe(),i=En(),c=K(n=>n.auth.isAuth),x=K(n=>n.auth.premium),u=K(n=>n.auth.email),N=K(n=>n.payments.exchange),W=K(n=>n.root.premiumPlans),U=K(n=>n.root.lang),F=!x?.group||x.free?"none":x.group==="LITE"?"lite":"premium",[w,R]=o.use
1338State(""),[m,O]=o.useState(""),[I,M]=o.useState(""),[T,oe]=o.useState(Q[0]),[g,a]=o.useState(F),[f,Y]=o.useState(ge),[te,Ee]=o.useState(!1),[$,se]=o.useState(ge[0].id),[V,Ge]=o.useState(null),[Pe,ve]=o.useState(""),[qt,je]=o.useState(!1),[We,Ye]=o.useState(!1),[D,ye]=o.useState(!1),[Qt,Zt]=o.useState(!1),[Ve,Xe]=o.useState(""),[Jt,en]=o.useState(!1),[tn,Ke]=o.useState(0),[v,nn]=o.useState(null),[rn,an]=o.useState(!1),qe=!!v&&!rn,Ae=o.useRef(null),Qe=o.useRef(null),Se=o.useRef(0),Ze=o.useRef(!1),we=o.useRef(!1),Oe=o.useRef(0),Me=o.useRef(0),$e=o.useRef(0),Je=n=>({..._[n],rate:N?.[_[n].code]??_[n].rate}),h=Je(T),ce=f.find(n=>n.id===$)??f[0],on=f.map(n=>n.id),P=xt({code:h.code,rate:h.rate,dec:h.dec,method:ce}),et=h.chips.filter(n=>n>=P.min&&n<=P.max),sn=n=>`${n.toLocaleString("ru-RU",{minimumFractionDigits:h.dec,maximumFractionDigits:h.dec})} ${T}`,B=n=>`${Math.round(n).toLocaleString("ru-RU")} â½`,ne=(n,l=!0)=>n.toLocaleString("ru-RU",{maximumFractionDigits:h.dec,useGrouping:l}),cn=()=>t("STEAM-TOPUP-LIMIT-RANGE",{min:ne(P.min,!1),max:ne(P.max,!1),symbol:T}),ln=n=>{const{planKey:l}=q(n),p=Object.values(W?.[l]??{}).map(b=>b.price).filter(Boolean);return p.length?Math.min(...p):In[n]},y=Math.max(0,Number(I)||0),ke=y>=P.min&&y<=P.max,re=V?Pn(V):null,j=V?vn(V.extra):F,Ue=n=>z[q(n).key],ie=n=>re?.[q(n).key]?.total??null,dn=n=>re?.[q(n).key]?.commission??null,X=Ue("none"),le=Ue(g),de=ie(g),ae=dn(g)??0,pe=ke&&!!re;o.useEffect(()=>{let n=!0;return me.getPayments().then(l=>{if(n)if(l?.result==="success"){const p=jn(l.data?.methods);if(!p.length)return;Y(p),se(b=>p.some(A=>A.id===b)?b:p[0].id)}else(l?.code===100||l?.code===101)&&Ee(!0)}),()=>{n=!1}},[]),o.useEffect(()=>{c&&yn(ut.STEAM_TOPUP)},[c]),o.useEffect(()=>{if(!c)return;let n=!0,l=0,p=!1,b=!1,A=!0,S=null;const L=Date.now(),xe=async()=>{if(clearTimeout(l),!n||b||p||document.visibilityState==="hidden")return;p=!0;const pt=await me.getActiveInvoice(A);if(p=!1,A=!1,!n)return;if(pt?.result==="success"){const Re=pt.data?.invoice??null;if(S=Re&&Mt[Re.status_name]?Re:null,nn(S),!S||S.is_final){b=!0;return}}else if(!S){b=!0;return}const Tn=Date.now()-L;l=setTimeout(xe,Tn<Yn?Gn:Wn)};return xe(),document.addEventListener("visibilitychange",xe),()=>{n=!1,clearTimeout(l),document.removeEventListener("visibilitychange",xe)}},[c]),o.useEffect(()=>{v?.is_final&&H("steam_topup_result",{status:v.status_name,amount:v.amount,currency:v.currency})},[v?.id_invoice,v?.status_name]),o.useEffect(()=>{j!=="none"&&a(j)},[j]);const tt=An(`${y}|${h.code}|${ce?.tag??""}|${ke?1:0}`,350);o.useEffect(()=>{const[n,l,p,b]=tt.split("|"),A=Number(n);if(b!=="1"||!p||!(A>0)){$e.current+=1,Ge(null),ve(""),je(!1);return}const S=++$e.current;je(!0),me.getPrices({payment:p,amount:A,currency:l}).then(L=>{S===$e.current&&(je(!1),L?.result==="success"&&L.data?.prices?(Ge(L.data.prices),ve("")):ve(Sn(t,L?.code,P,T)))})},[tt]),o.useEffect(()=>{const n=Oe.current,l=we.current;if(we.current=!1,!l||matchMedia("(prefers-reduced-motion: reduce)").matches){Oe.current=ae,Ke(ae);return}const p=performance.now(),b=A=>{const S=Math.min(1,(A-p)/400),L=n+(ae-n)*(1-(1-S)**3);Oe.current=L,Ke(S<1?Math.round(L):ae),S<1&&(Me.current=requestAnimationFrame(b))};return Me.current=requestAnimationFrame(b),()=>cancelAnimationFrame(Me.current)},[ae]),o.useEffect(()=>{pe?Ze.current||ye(!0):ye(!1)},[pe]),o.useEffect(()=>{D&&Zt(!0)},[D]),o.useEffect(()=>()=>clearTimeout(Se.current),[]);const nt=()=>{Xe(cn()),clearTimeout(Se.current),Se.current=setTimeout(()=>Xe(""),4e3)},pn=n=>{const l=h.dec?n.replace(",",".").replace(/[^\d.]/g,"").match(/^\d*(\.\d{0,2})?/)[0]:n.replace(/\D/g,""),p=Number(l)>P.max;M(p?String(P.max):l),p&&nt()},xn=()=>{!y||y>=P.min||(M(String(P.min)),nt())},un=n=>{if(n===T)return;H("steam_topup_currency",{currency:_[n].code});const l=Je(n),p=xt({code:l.code,rate:l.rate,dec:l.dec,method:ce});if(y){const b=y*h.rate/l.rate,A=l.dec?Math.round(b*100)/100:Math.round(b);M(String(Math.min(p.max,Math.max(p.min,A))))}oe(n)},rt=n=>{we.current=!0,a(n),H("steam_topup_tier",{tier:n})},it=n=>{se(n),H("steam_topup_method",{method:n})},mn=()=>{D&&(Ze.current=!0),ye(!D)},at=n=>{if(!c){i(Ie("PREMIUM_INFO",Un(t)));return}i(Ie("AUTOSUB_MODAL",{type:n}))},ot=()=>Rn(ut.STEAM_TOPUP),k=c?g!=="none"&&g!==j?"plan":"pay":"auth",st=q(g),ct=Dn.test(w),lt=ct&&Fn.test(m.trim())&&ke&&!!re&&!Pe&&!qt&&!We&&!te,fn=async()=>
1338{if(H("steam_topup_pay",{mode:k,tier:g,method:$,currency:h.code,amount:y}),k==="auth")return ot();if(k==="plan")return at(st.plan);if(!lt)return;Ye(!0);const n=await me.createInvoice({payment:ce.tag,account:w,amount:y,currency:h.code,email:m.trim()});if(n?.result==="success"&&n.data?.bill_url){H("steam_topup_invoice",{id_invoice:n.data.id_invoice,amount:n.data.amount,currency:h.code}),document.location.href=n.data.bill_url;return}Ye(!1),$n(kn(t,n)),n?.code===100&&ot()},dt=n=>{const l=ie("none"),p=ie(n);return l!==null&&p!==null?Math.max(0,l-p):0},gn=n=>{const l=Ue(n);return X===null||l===null||l>=X?"":t("STEAM-TOPUP-SAVING-PERCENT",{pct:Number((X-l).toFixed(2))})},hn=$==="sbp"?Ne[g]:Ne.none,bn=c&&u&&!m&&!Jt;return e.jsxs(Bn,{children:[e.jsx(wn,{title:t("STEAM-TOPUP-META-TITLE"),descr:t("STEAM-TOPUP-DESCR")}),e.jsxs(Hn,{children:[e.jsxs(wt,{children:[t("STEAM-TOPUP-TITLE")," ",e.jsx("img",{src:d("steam-mark.svg"),alt:""}),"Steam"]}),e.jsx(Ot,{children:t("STEAM-TOPUP-DESCR")}),qe&&e.jsx(kt,{invoice:v,onAction:()=>{if(an(!0),v.status_name==="delivered")return;const n=Q.find(l=>_[l].code===v.currency);n&&oe(n),R(String(v.account??"")),M(String(v.amount_wallet)),requestAnimationFrame(()=>{Ae.current?.focus(),Ae.current?.select()})}}),e.jsxs(De,{$joined:qe,children:[e.jsxs(Ut,{children:[e.jsxs(Z,{children:[e.jsx(he,{n:1,children:t("STEAM-TOPUP-STEP-LOGIN")}),e.jsxs(J,{children:[e.jsx("img",{src:d("steam.svg"),alt:""}),e.jsx("input",{ref:Qe,value:w,onChange:n=>R(n.target.value.replace(/\s/g,"")),placeholder:t("STEAM-TOPUP-LOGIN-PLACEHOLDER"),autoComplete:"off","aria-invalid":!!w&&!ct,"aria-describedby":"steam-login-hint"}),e.jsx(Rt,{type:"button",onClick:()=>i(Ie("UPDATE_MODAL",{content:Ln(U)})),children:t("STEAM-TOPUP-HOW-TO-FIND")})]}),e.jsx(tr,{id:"steam-login-hint",children:e.jsx("span",{children:t("STEAM-TOPUP-LOGIN-HINT")})}),e.jsxs(Lt,{children:[e.jsx(Nt,{children:e.jsx("img",{src:d(yt[T]),alt:""},T)}),e.jsx("input",{ref:Ae,inputMode:h.dec?"decimal":"numeric",value:I,onChange:n=>pn(n.target.value),onBlur:xn,placeholder:t("STEAM-TOPUP-AMOUNT-PLACEHOLDER",{min:ne(P.min),max:ne(P.max)}),"aria-label":t("STEAM-TOPUP-AMOUNT")}),e.jsxs(_t,{$index:Q.indexOf(T),children:[e.jsx("i",{"aria-hidden":"true"}),Q.map(n=>e.jsx("button",{type:"button",className:n===T?"active":"",onClick:()=>un(n),children:n},n))]})]}),et.length>0&&e.jsx(Ct,{children:et.map(n=>e.jsxs("button",{type:"button",className:y===n?"active":"",onClick:()=>M(String(n)),children:[ne(n)," ",T]},n))}),e.jsx(ir,{$on:!!Ve,role:"status",children:e.jsx("span",{children:Ve})})]}),e.jsxs(Z,{children:[e.jsx(he,{n:2,children:t("STEAM-TOPUP-METHOD")}),e.jsx(Ft,{role:"radiogroup","aria-label":t("STEAM-TOPUP-METHOD"),children:f.map(n=>e.jsxs("li",{role:"radio","aria-checked":$===n.id,tabIndex:$===n.id?0:-1,className:$===n.id?"active":"",onClick:()=>it(n.id),onKeyDown:ft(on,n.id,it),children:[e.jsx("div",{className:"hover"}),e.jsx("div",{className:"blue-gradient"}),e.jsx("img",{src:d(n.icon),alt:""}),e.jsx("span",{children:n.label?t(n.label):n.name}),$===n.id&&e.jsx("i",{children:e.jsx("img",{src:d("check.svg"),alt:""})})]},n.id))}),te&&e.jsx(Et,{$error:!0,children:t("STEAM-TOPUP-UNAVAILABLE")})]})]}),e.jsxs(Dt,{children:[e.jsxs(Bt,{children:[e.jsxs(be,{children:[e.jsx("span",{children:t("STEAM-TOPUP-TO-WALLET")}),e.jsx("i",{"aria-hidden":"true"}),e.jsxs("span",{children:[sn(y),h.code!=="RUB"&&V?.conversion&&e.jsxs(Tt,{children:["â"," ",B(V.conversion.amount_rub)]})]})]}),e.jsxs(be,{children:[e.jsxs("span",{children:[t("STEAM-TOPUP-SERVICE-FEE"),"â¯",e.jsxs(Ht,{$ink:hn,children:[X!==null&&le!==null&&le<X&&e.jsxs("s",{children:[X,"%"]}),e.jsx("b",{children:le!==null?`${le}%`:"â¦"})]})]}),e.jsx("i",{"aria-hidden":"true"}),e.jsx("span",{children:re?B(tn):"â"})]}),Pe&&e.jsx(Et,{$error:!0,role:"alert",children:Pe}),j==="none"&&e.jsx(zt,{"aria-hidden":!pe,children:e.jsxs("button",{type:"button","aria-expanded":D,"aria-controls":"steam-tiers",tabIndex:pe?0:-1,onClick:mn,children:[e.jsxs("span",{children:[t("STEAM-TOPUP-CAN-SAVE")," ",e.jsx("b",{children:B(dt("premium"))})]}),e.jsx("img",{src:d("plus.svg"),alt:""})]})}),e.jsx(Gt,{id:"steam-tiers",$on:D,children:e.jsxs("div",{className:Qt?"is-ready":"",children:[j==="none"?e.jsx(Te,{role:"radiogroup",children:vt.map(n=>e.jsxs(Be,{type:"button",role:"radio","aria-checked":g===n.id,"data-tier":n.id,tabIndex:g===n.id?0:-1,className:g===n.id?"is-on":"",onKeyDown:ft(On,n.id,rt),onClick:()=>rt(n.id),children:[e.jsx("span",{"aria-hidden":"true",children:e.jsx("i",{})}),e.jsx("b",{children:t(n.label)}),e.jsx("i",{children:ie(n.id)!==null?B(ie(n.id)):""}),e.jsx("em",{children:gn(n.id)})]},n.id))}):e.jsx(Te,{children:e.jsxs(or,{as:"div",$tier:j,children:[e.jsx("img",{src:d(`${j}.svg`),alt:j.toUpperCase()}),e.jsx("p",{children:t("STEAM-TOPUP-SAVING-ON",{sum:B(dt(j))})})]})}),j==="none"&&e.jsx(Wt,{children:Xt(t,g)})]})})]}),e.jsxs(Yt,{$tight:!D,children:[e.jsxs(J,{children:[e.jsx("img",{src:d("email.svg"),alt:""}),e.jsx("input",{type:"email",value:m,onChange:n=>{O(n.target.value),n.target.value&&en(!0)},placeholder:t("STEAM-TOPUP-EMAIL-PLACEHOLDER")})]}),bn&&e.jsx(sr,{children:e.jsx("span",{children:e.jsxs("button",{type:"button",onClick:()=>O(u),children:[t("STEAM-TOPUP-MAYBE")," ",e.jsx("b",{children:u})]})})}),e.jsxs(He,{children:[e.jsxs("span",{children:[t("Total"),h.code!=="RUB"&&e.jsx(Tt,{children:t("STEAM-TOPUP-PAID-IN-RUB")})]}),e.jsx("span",{children:de!==null?B(de):"â"})]}),e.jsxs(ze,{type:"button",$gold:k==="plan"&&g==="premium",disabled:k==="pay"&&!lt,onClick:fn,children:[k==="auth"&&e.jsxs(e.Fragment,{children:[e.jsx("span",{children:t("LoginWithSteam")}),e.jsx("img",{src:d("steam-mark.svg"),alt:""})]}),k==="plan"&&e.jsxs(e.Fragment,{children:[e.jsx("img",{src:d(g==="premium"?"crown-dark.svg":"crown-white.svg"),alt:""}),e.jsx("span",{children:t("STEAM-TOPUP-BUY-PLAN",{plan:st.plan,price:ln(g)})})]}),k==="pay"&&(We?t("STEAM-TOPUP-CREATING"):de!==null?t("STEAM-TOPUP-PAY-SUM",{sum:B(de)}):t("STEAM-TOPUP-PAY"))]}),e.jsx(Vt,{children:mt[k]?t(mt[k]):e.jsxs(e.Fragment,{children:[t("STEAM-TOPUP-OFFER")," ",e.jsx("a",{href:"/terms",children:t("STEAM-TOPUP-OFFER-TERMS")})]})})]})]})]}),e.jsx(cr,{children:Nn.map(n=>e.jsxs("div",{className:n.gold?"gold":"",children:[e.jsx("img",{loading:"lazy",src:n.icon,alt:""}),e.jsx("h4",{children:t(n.title)})]},n.title))}),e.jsxs(bt,{children:[e.jsx("h2",{children:t("STEAM-TOPUP-DEMO-TITLE")}),e.jsx(Pr,{onStart:()=>Qe.current?.focus()})]}),e.jsxs(bt,{children:[e.jsx("h2",{children:t("STEAM-TOPUP-HOW")}),e.jsx(lr,{children:_n.map(n=>e.jsxs("div",{children:[e.jsx("h3",{children:t(n.title)}),e.jsx("img",{loading:"lazy",src:n.image,alt:""}),e.jsx("p",{children:t(n.text)})]},n.title))}),j!=="premium"&&e.jsxs(dr,{children:[e.jsxs("span",{children:[e.jsx("h3",{children:t("STEAM-TOPUP-PLATE-TITLE")}),e.jsxs("p",{children:[t("STEAM-TOPUP-PLATE-WITH")," ",e.jsx("span",{children:"PREMIUM"})," ",t("STEAM-TOPUP-PLATE-FEE")," ",e.jsx("span",{children:t("STEAM-TOPUP-PLATE-LOWER")})]})]}),e.jsxs("button",{type:"button",onClick:()=>at("PREMIUM"),children:[t("BuyPremium"),e.jsx("img",{src:d("crown-plate.svg"),alt:""})]})]})]}),e.jsx(pr,{children:e.jsx(Mn,{style:{width:"100%",maxWidth:"100%"},list:Cn,onItemOpen:n=>H("steam_topup_faq",{name:n})})})]})]})},Pt=Array.from({length:4},(t,i)=>({title:`STEAM-TOPUP-DEMO-STEP-${i+1}`,text:`STEAM-TOPUP-DEMO-STEP-${i+1}-TEXT`})),xr=3800,fe=390,Kt=844,E={login:"cs_player",email:"[email protected]",amount:1e3,tier:"premium"},ur=ee` 1339 from { transform: scaleX(0); } 1340 to { transform: scaleX(1); } 1341`,Ce=r.div` 1342 display: grid; 1343 grid-template-columns: auto minmax(0, 1fr); 1344 gap: 56px; 1345 align-items: center; 1346 width: 100%; 1347 max-width: 820px; 1348 1349 @media (max-width: 700px) { 1350 grid-template-columns: minmax(0, 1fr); 1351 gap: 32px; 1352 justify-items: center; 1353 } 1354`,mr=r.div` 1355 --s: calc(264 / ${fe}); 1356 box-sizing: content-box; 1357 width: calc(${fe}px * var(--s)); 1358 height: calc(${Kt}px * var(--s)); 1359 border: 8px solid #1d2230; 1360 border-radius: 34px; 1361 background: #131821; 1362 overflow: hidden; 1363 box-shadow: 1364 0 30px 70px rgba(0, 0, 0, 0.45), 1365 0 0 0 1px #2a3146, 1366 0 0 140px rgba(96, 128, 255, 0.14); 1367 1368 @media (max-width: 700px) { 1369 --s: calc(224 / ${fe}); 1370 } 1371`,fr=r.div` 1372 width: ${fe}px; 1373 padding: 48px 16px 24px; 1374 background: #131821 url(${d("bg.jpg")}) no-repeat top center / 100% auto; 1375 transform-origin: 0 0; 1376 transform: scale(var(--s)) translateY(var(--y, 0px)); 1377 transition: transform 600ms ${At}; 1378 pointer-events: none; 1379 1380 ${wt} { 1381 font-size: 32px; 1382 line-height: 36px; 1383 } 1384 1385 ${Ot} { 1386 margin-bottom: 32px; 1387 font-size: 16px; 1388 } 1389 1390 ${De} { 1391 grid-template-columns: minmax(0, 1fr); 1392 } 1393 1394 ${Te} { 1395 overflow: hidden; 1396 } 1397 1398 ${$t} { 1399 grid-template-columns: minmax(0, 1fr); 1400 grid-template-areas: 'title' 'text' 'meta' 'again'; 1401 } 1402 1403 ${_e} { 1404 width: 100%; 1405 margin-top: 16px; 1406 } 1407 1408 ${He} > span:last-child { 1409 font-size: 28px; 1410 line-height: 32px; 1411 } 1412 1413 [data-focus] { 1414 z-index: 2; 1415 box-shadow: 0 0 0 2px #364994; 1416 } 1417 1418 @media (prefers-reduced-motion: reduce) { 1419 transition: none; 1420 } 1421`,gr=r.i` 1422 position: absolute; 1423 left: 0; 1424 right: 0; 1425 bottom: 0; 1426 height: 3px; 1427 background: #6080ff; 1428 transform-origin: left center; 1429 animation: ${ur} ${xr}ms linear forwards; 1430 animation-play-state: ${({$run:t})=>t?"running":"paused"}; 1431 1432 ${Ce}:hover &, 1433 ${Ce}:has(:focus-visible) & { 1434 animation-play-state: paused; 1435 } 1436 1437 @media (prefers-reduced-motion: reduce) { 1438 display: none; 1439 } 1440`,hr=r.div` 1441 position: absolute; 1442 inset: 0; 1443 z-index: 1; 1444 background: rgba(10, 13, 20, 0.6); 1445 -webkit-backdrop-filter: blur(3px); 1446 backdrop-filter: blur(3px); 1447 opacity: ${({$on:t})=>t?1:0}; 1448 transition: opacity 400ms ${s}; 1449 1450 @media (prefers-reduced-motion: reduce) { 1451 transition: none; 1452 } 1453`,br=r.div` 1454 display: grid; 1455 grid-template-rows: ${({$on:t})=>t?"1fr":"0fr"}; 1456 opacity: ${({$on:t})=>t?1:0}; 1457 transition: 1458 grid-template-rows 600ms ${s}, 1459 opacity 400ms ${s}; 1460 transition-delay: ${({$on:t})=>t?"500ms":"0ms"}; 1461 1462 & > div { 1463 display: flex; 1464 flex-direction: column; 1465 justify-content: flex-end; 1466 overflow: hidden; 1467 } 1468 1469 @media (prefers-reduced-motion: reduce) { 1470 transition: none; 1471 } 1472`,Tr=r.div` 1473 display: flex; 1474 flex-direction: column; 1475 gap: 8px; 1476 width: 100%; 1477 1478 & > button:not(:last-child) { 1479 display: flex; 1480 align-items: flex-start; 1481 gap: 14px; 1482 padding: 14px 16px; 1483 border: 1px solid transparent; 1484 border-radius: 10px; 1485 background: none; 1486 text-align: left; 1487 cursor: pointer; 1488 transition: 1489 background-color 160ms ${s}, 1490 border-color 160ms ${s}; 1491 1492 &[aria-current='step'] { 1493 border-color: ${St}; 1494 background: rgba(145, 175, 253, 0.07); 1495 } 1496 1497 &:focus-visible { 1498 outline: 2px solid #8fa6ff; 1499 outline-offset: 2px; 1500 } 1501 } 1502 1503 i { 1504 flex: none; 1505 display: grid; 1506 place-items: center; 1507 width: 26px;
1508 height: 26px; 1509 border-radius: 6px; 1510 background: rgba(81, 95, 135, 0.4); 1511 font: 1512 700 13px/1 Roboto, 1513 sans-serif; 1514 font-style: normal; 1515 color: #9fb2ff; 1516 transition: 1517 background-color 160ms ${s}, 1518 color 160ms ${s}; 1519 } 1520 1521 [aria-current='step'] i { 1522 background: #6080ff; 1523 color: #fff; 1524 } 1525 1526 span { 1527 font: 1528 400 15px/21px Roboto, 1529 sans-serif; 1530 color: #a6aec2; 1531 } 1532 1533 b { 1534 display: block; 1535 margin-bottom: 2px; 1536 font: 1537 700 16px/22px Montserrat, 1538 Roboto, 1539 sans-serif; 1540 color: #fff; 1541 } 1542 1543 @media (hover: hover) and (pointer: fine) { 1544 & > button:not(:last-child):not([aria-current='step']):hover { 1545 background: rgba(145, 175, 253, 0.04); 1546 } 1547 } 1548 1549 @media (prefers-reduced-motion: reduce) { 1550 & > button, 1551 i { 1552 transition: none; 1553 } 1554 } 1555`,Er=r(ze)` 1556 align-self: flex-start; 1557 height: 48px; 1558 margin: 8px 0 0 16px; 1559 1560 @media (max-width: 700px) { 1561 align-self: stretch; 1562 margin-left: 0; 1563 } 1564`,Pr=({onStart:t})=>{const{t:i}=Fe(),[c,x]=o.useState(0),[u,N]=o.useState(!1),W=o.useRef(null),U=o.useRef(null),F=o.useRef(null),w=o.useRef(null);o.useEffect(()=>{const a=W.current;a.setAttribute("inert","");const f=new IntersectionObserver(([Y])=>N(Y.isIntersecting),{threshold:.35});return f.observe(a),()=>f.disconnect()},[]);const R=o.useCallback(()=>{const a=U.current,f=a.querySelector(`[data-how="${c}"]`);let Y=0;if(f){const te=a.getBoundingClientRect(),Ee=te.width/a.offsetWidth,$=F.current.offsetHeight,se=(f.getBoundingClientRect().top-te.top)/Ee-$;Y=Math.max(0,Math.min(se-24,a.offsetHeight-$-Kt))}a.style.setProperty("--y",`${-Y}px`)},[c]);o.useEffect(R,[R]);const m=c>=1;o.useEffect(()=>{const a=w.current,f=a.querySelector(".is-on");a.scrollTo({left:m?f.offsetLeft+f.offsetWidth-a.clientWidth:0,behavior:matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"})},[m]);const O=a=>`${Math.round(a).toLocaleString("ru-RU")} â½`,I=a=>E.amount*(100+z[a])/100,M=q(E.tier).key,T=a=>c===a?"":void 0,{min:oe,max:g}=ge[0];return e.jsxs(Ce,{children:[e.jsxs(mr,{ref:W,children:[e.jsxs(fr,{ref:U,onTransitionEnd:a=>a.propertyName==="grid-template-rows"&&R(),children:[e.jsx(br,{ref:F,$on:c===3,children:e.jsx("div",{children:e.jsx(kt,{invoice:{status_name:"delivered",amount_wallet:E.amount,currency:"RUB",account:E.login},onAction:()=>{}})})}),e.jsxs(De,{$joined:c===3,children:[e.jsxs(Ut,{children:[e.jsxs(Z,{children:[e.jsx(he,{n:1,children:i("STEAM-TOPUP-STEP-LOGIN")}),e.jsxs(J,{"data-focus":T(0),children:[e.jsx("img",{src:d("steam.svg"),alt:""}),e.jsx("input",{readOnly:!0,value:E.login}),e.jsx(Rt,{as:"span",children:i("STEAM-TOPUP-HOW-TO-FIND")})]}),e.jsxs(Lt,{"data-focus":T(1),children:[e.jsx(Nt,{children:e.jsx("img",{src:d(yt["â½"]),alt:""})}),e.jsx("input",{readOnly:!0,value:m?E.amount:"",placeholder:i("STEAM-TOPUP-AMOUNT-PLACEHOLDER",{min:oe.toLocaleString("ru-RU"),max:g.toLocaleString("ru-RU")})}),e.jsxs(_t,{$index:0,children:[e.jsx("i",{}),Q.map(a=>e.jsx("button",{type:"button",className:a==="â½"?"active":"",children:a},a))]})]}),e.jsx(Ct,{children:_["â½"].chips.map(a=>e.jsx("button",{type:"button",className:m&&a===E.amount?"active":"",children:O(a)},a))})]}),e.jsxs(Z,{"data-how":2,children:[e.jsx(he,{n:2,children:i("STEAM-TOPUP-METHOD")}),e.jsx(Ft,{children:ge.map((a,f)=>e.jsxs("li",{className:f?"":"active",children:[e.jsx("div",{className:"hover"}),e.jsx("div",{className:"blue-gradient"}),e.jsx("img",{src:d(a.icon),alt:""}),e.jsx("span",{children:i(a.label)}),!f&&e.jsx("i",{children:e.jsx("img",{src:d("check.svg"),alt:""})})]},a.id))})]})]}),e.jsxs(Dt,{children:[e.jsxs(Bt,{children:[e.jsxs(be,{children:[e.jsx("span",{children:i("STEAM-TOPUP-TO-WALLET")}),e.jsx("i",{}),e.jsx("span",{children:O(m?E.amount:0)})]}),e.jsxs(be,{children:[e.jsxs("span",{children:[i("STEAM-TOPUP-SERVICE-FEE")," ",e.jsxs(Ht,{$ink:Ne[E.tier],children:[e.jsxs("s",{children:[z[""],"%"]}),e.jsxs("b",{children:[z[M],"%"]})]})]}),e.jsx("i",{}),e.jsx("span",{children:m?O(I(M)-E.amount):"â"})]}),e.jsx(zt,{"aria-hidden":!m,children:e.jsxs("button",{type:"button","aria-expanded":m,children:[e.jsxs("span",{children:[i("STEAM-TOPUP-CAN-SAVE")," ",e.jsx("b",{children:O(I("")-I("premium"))})]}),e.jsx("img",{src:d("plus.svg"),alt:""})]})}),e.jsx(Gt,{$on:m,children:e.jsxs("div",{className:"is-ready",children:[e.jsx(Te,{ref:w,children:vt.map(a=>e.jsxs(Be,{type:"button","data-tier":a.id,"data-how":a.id===E.tier?1:void 0,className:a.id===E.tier?"is-on":"",children:[e.jsx("span",{children:e.jsx("i",{})}),e.jsx("b",{children:i(a.label)}),e.jsx("i",{children:O(I(a.key))}),e.jsx("em",{children:a.key&&i("STEAM-TOPUP-SAVING-PERCENT",{pct:z[""]-z[a.key]})})]},a.id))}),e.jsx(Wt,{children:Xt(i,E.tier)})]})})]}),e.jsxs(Yt,{$tight:!m,children:[e.jsxs(J,{children:[e.jsx("img",{src:d("email.svg"),alt:""}),e.jsx("input",{readOnly:!0,value:E.email})]}),e.jsxs(He,{children:[e.jsx("span",{children:i("Total")}),e.jsx("span",{children:m?O(I(M)):"â"})]}),e.jsx(ze,{type:"button",disabled:!m,"data-focus":T(2),children:m?i("STEAM-TOPUP-PAY-SUM",{sum:O(I(M))}):i("STEAM-TOPUP-PAY")}),e.jsxs(Vt,{children:[i("STEAM-TOPUP-OFFER")," ",e.jsx("a",{href:"/terms",children:i("STEAM-TOPUP-OFFER-TERMS")})]})]})]})]}),e.jsx(hr,{$on:c===2})]}),e.jsx(gr,{$run:u,onAnimationEnd:()=>x(a=>(a+1)%Pt.length)},c)]}),e.jsxs(Tr,{children:[Pt.map((a,f)=>e.jsxs("button",{type:"button","aria-current":f===c?"step":void 0,onClick:()=>x(f),children:[e.jsx("i",{children:f+1}),e.jsxs("span",{children:[e.jsx("b",{children:i(a.title)}),i(a.text)]})]},a.title)),e.jsx(Er,{type:"button",onClick:t,children:i("STEAM-TOPUP-APP-TITLE")})]})]})};export{Mr as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.