/* bebrix.shop — главная: пополнение слева, магазин справа (карточки как в донат-меню), окно товара. Общее — site.css. */
/* ── главная: пополнение слева, магазин справа ── */
.wrap { max-width:1520px; margin:0 auto; padding:20px 24px 0; display:grid; grid-template-columns:400px minmax(0,1fr); gap:18px; align-items:start; }

.topup { position:sticky; top:86px; padding:22px; overflow:hidden; }
.topup::before { content:""; position:absolute; inset:-120px -80px auto; height:220px; pointer-events:none; background:radial-gradient(closest-side, rgba(185,255,31,.14), transparent); }
.tu-head h1 { position:relative; font-size:26px; }
.promo { position:relative; display:flex; align-items:center; gap:11px; margin-top:12px; padding:10px 12px; border:1px solid rgba(229,64,43,.35); border-radius:12px;
	background:linear-gradient(90deg, rgba(229,64,43,.16), rgba(229,64,43,.04)); color:var(--pale); font-size:13px; line-height:1.35; }
.promo b { color:var(--text); }
.xbadge { flex:none; display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:8px; color:#fff; background:var(--badge); font:800 13px/1 Inter, sans-serif;
	transform:rotate(-3deg); box-shadow:0 0 18px rgba(229,64,43,.5); animation:xpulse 1.6s ease-in-out infinite; }
@keyframes xpulse {
	0%, 100% { transform:rotate(-3deg) scale(1); box-shadow:0 0 12px rgba(229,64,43,.4); }
	50% { transform:rotate(-3deg) scale(1.1); box-shadow:0 0 28px rgba(229,64,43,.9); }
}
@media (prefers-reduced-motion: reduce) { .xbadge { animation:none; } }
.lbl { display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px; color:var(--pale); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.linkish { color:var(--lime); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; text-decoration:none; }
.linkish:hover { text-decoration:underline; }
.field { position:relative; }
.field-ic { position:absolute; left:0; top:0; bottom:0; width:48px; display:grid; place-items:center; color:var(--gray); font-weight:800; pointer-events:none; }
.field input { width:100%; height:52px; padding:0 14px 0 48px; border:1.5px solid var(--line); border-radius:10px; outline:0; color:var(--text); background:var(--field);
	font:600 16px/1 Inter, sans-serif; font-variant-numeric:tabular-nums; transition:border-color .15s, box-shadow .15s; }
.field input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(185,255,31,.12); }
.field input::placeholder { color:var(--gray-2); font-weight:500; }
.field input:user-invalid { border-color:var(--red); }
.hint { margin-top:8px; padding:10px 12px; border-radius:10px; background:var(--cell); color:var(--pale); font-size:12.5px; line-height:1.5; }
.hint b { color:var(--lime); }
.chips { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:8px; }
.chip { height:38px; border:1.5px solid var(--line); border-radius:9px; background:var(--btn); color:var(--pale); font-size:13px; font-weight:700; cursor:pointer; transition:.15s; }
.chip:hover { border-color:rgba(185,255,31,.5); color:var(--text); }
.chip.on { border-color:var(--lime); color:var(--ink); background:var(--lime); }
.gets { display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--gray); font-size:13px; }
.gets b { color:var(--lime); font-size:24px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.gets .xs { padding:4px 9px; border-radius:7px; color:#fff; background:var(--badge); font-size:15px; font-weight:800; line-height:1.1; transform:rotate(-4deg); box-shadow:0 0 14px rgba(229,64,43,.5); }
.methods { display:grid; gap:7px; }
.method input { position:absolute; opacity:0; pointer-events:none; }
.m-box { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:0 12px; padding:11px 14px; border:1.5px solid var(--line); border-radius:11px; background:var(--btn); cursor:pointer; transition:.15s; }
.m-box::before { content:""; width:18px; height:18px; border:2px solid var(--gray-2); border-radius:50%; transition:.15s; }
.m-text { display:grid; gap:2px; min-width:0; }
.m-box b { font-size:14.5px; }
.m-box em { margin-left:8px; padding:2px 7px; border-radius:999px; color:var(--lime); background:rgba(185,255,31,.12); font-size:10.5px; font-style:normal; font-weight:700; }
.m-box small { color:var(--gray); font-size:12px; }
.m-logo { display:block; opacity:.92; }
.m-logo.platega { height:20px; width:auto; }
.m-logo.skinsback { height:12px; width:auto; }
.m-logo.fk { color:var(--pale); font:800 13px/1 Inter, sans-serif; letter-spacing:.02em; }
.m-logo.lava { color:#fff; font:900 12px/1 Inter, sans-serif; letter-spacing:.12em; padding:5px 8px; border-radius:6px; background:linear-gradient(135deg,#7b3fe4,#c13ad1); }
.method:hover .m-box { border-color:rgba(185,255,31,.45); }
.method input:checked + .m-box { border-color:var(--lime); background:linear-gradient(90deg, rgba(185,255,31,.10), var(--btn) 70%); }
.method input:checked + .m-box::before { border-color:var(--lime); background:radial-gradient(circle, var(--lime) 0 4px, transparent 5px); }
.method input:focus-visible + .m-box { box-shadow:0 0 0 3px rgba(185,255,31,.18); }
.pay { width:100%; height:58px; margin-top:18px; border-radius:12px; font-size:20px; box-shadow:0 10px 30px rgba(185,255,31,.18); }
.legal { margin:11px 0 0; color:var(--gray-2); font-size:11.5px; line-height:1.5; text-align:center; }
.legal a { color:var(--gray); }

/* ── магазин: карточки как в игре ── */
.shop { padding:18px 20px 22px; min-height:640px; }
.shop-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.shop-head h2 { font-size:28px; }
.cats { display:flex; gap:6px; flex-wrap:wrap; margin-left:6px; }
.cat { height:36px; padding:0 13px; border:0; border-radius:9px; background:var(--tab); color:var(--gray); font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; }
.cat:hover { color:var(--text); }
.cat.on { color:var(--ink); background:var(--lime); font-weight:700; }
.cat i { margin-left:5px; font-style:normal; opacity:.6; font-size:12px; }
.shop-note { margin:8px 0 16px; color:var(--gray); font-size:13px; }
.shop-note b { color:var(--lime); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(156px, 1fr)); gap:10px; }
.card { --tc:var(--t1); position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 10px 12px; border:2px solid var(--tc); border-radius:12px;
	background:linear-gradient(180deg, var(--cell), var(--panel)); color:inherit; text-align:center; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 0 1px var(--tc), 0 0 26px -6px var(--tc); }
.card.t2 { --tc:var(--t2); } .card.t3 { --tc:var(--t3); } .card.t4 { --tc:var(--t4); }
.c-price { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:0 7px; font-variant-numeric:tabular-nums; }
.c-price b { color:var(--lime); font-size:19px; font-weight:800; white-space:nowrap; }
.c-price s { color:var(--gray-2); font-size:12.5px; font-weight:600; white-space:nowrap; }
.c-img { position:relative; width:100%; aspect-ratio:1; overflow:hidden; border-radius:10px;
	background:radial-gradient(85% 70% at 50% 100%, color-mix(in srgb, var(--tc) 55%, transparent), transparent 72%), #0b140c; }
.c-img img { width:100%; height:100%; display:block; object-fit:contain; transition:transform .2s; }
.card:hover .c-img img { transform:scale(1.05); }
.b-disc, .b-hit { position:absolute; z-index:1; top:7px; padding:3px 7px; border-radius:6px; font-size:11px; font-weight:800; line-height:1.2; }
.b-disc { left:7px; color:#fff; background:var(--badge); }
.b-hit { right:7px; color:var(--ink); background:var(--lime); text-transform:uppercase; font-size:10px; }
.c-kind { margin-top:2px; color:var(--gray); font-size:11.5px; font-weight:600; }
.c-name { max-width:100%; overflow:hidden; color:var(--text); font-size:15px; font-weight:800; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }

/* ── окно товара: компактное, «что входит» помещается целиком по высоте экрана ── */
dialog.dlg { width:min(780px, calc(100% - 24px)); max-height:calc(100vh - 24px); padding:0; border:1px solid rgba(185,255,31,.18); border-radius:18px; color:var(--text); background:var(--panel);
	box-shadow:0 30px 90px rgba(0,0,0,.75); }
dialog.dlg::backdrop { background:rgba(2,7,3,.78); backdrop-filter:blur(6px); }
.dlg-in { position:relative; display:grid; grid-template-columns:270px minmax(0,1fr); gap:20px; align-items:start; padding:20px; }
.dlg-x { position:absolute; right:12px; top:12px; z-index:2; width:38px; height:38px; border:0; border-radius:10px; color:var(--pale); background:var(--tab); font-size:22px; cursor:pointer; }
.dlg-x:hover { color:var(--text); background:var(--btn); }
.d-img { --tc:var(--t1); position:relative; width:100%; max-width:270px; margin:0 auto; aspect-ratio:1; overflow:hidden; border:2px solid var(--tc); border-radius:14px;
	background:radial-gradient(85% 70% at 50% 100%, color-mix(in srgb, var(--tc) 55%, transparent), transparent 72%), #0b140c; }
.d-img img { width:100%; height:100%; object-fit:contain; display:block; }
.d-img.t2 { --tc:var(--t2); } .d-img.t3 { --tc:var(--t3); } .d-img.t4 { --tc:var(--t4); }
.d-name { margin-top:12px; font-size:24px; text-align:center; }
.d-kind { color:var(--gray); font-size:13px; font-weight:600; text-align:center; }
.d-price { display:flex; align-items:baseline; justify-content:center; gap:10px; margin-top:6px; font-variant-numeric:tabular-nums; }
.d-price b { color:var(--lime); font-size:32px; font-weight:800; line-height:1.1; }
.d-price s { color:var(--gray-2); font-size:17px; font-weight:700; }
.d-x { margin-top:6px; color:var(--pale); font-size:13px; text-align:center; }
.d-x b { color:var(--lime); }
#dTopup { height:50px; font-size:16px; }
.d-how { margin-top:10px; color:var(--gray); font-size:12.5px; line-height:1.5; text-align:center; }
.d-right { min-width:0; }
.d-h { margin:4px 0 10px; color:var(--pale); font:800 15px/1 var(--head-font); letter-spacing:.06em; text-transform:uppercase; text-align:center; }
.d-contents { display:grid; place-items:center; padding:8px; border-radius:14px; background:var(--field); }
.d-contents img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 130px); object-fit:contain; border-radius:10px; }
.d-empty { padding:40px 10px; color:var(--gray-2); font-size:13px; }

@media (max-width:1200px) {
	.wrap { grid-template-columns:minmax(0,1fr); }
	.topup { position:relative; top:0; }
}
@media (max-width:860px) {
	.wrap { padding-left:12px; padding-right:12px; }
	.topup { padding:18px 16px; }
	.shop { padding:16px 14px 18px; }
	.cats { width:100%; margin-left:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
	.cats::-webkit-scrollbar { display:none; }
	.cat { flex:none; }
	.grid { grid-template-columns:repeat(auto-fill, minmax(146px, 1fr)); gap:10px; }
	.c-price b { font-size:17px; }
	.dlg-in { grid-template-columns:minmax(0,1fr); padding:18px 16px; }
	.d-img { max-width:220px; }
	.d-contents img { max-height:calc(100vh - 80px); }
}
@media (max-width:420px) {
	.chips { grid-template-columns:repeat(3,1fr); }
	.tu-head h1 { font-size:23px; }
}
.m-logo.payhot { color:#fff; font:900 11px/1 Inter, sans-serif; letter-spacing:.1em; padding:5px 8px; border-radius:6px; background:linear-gradient(135deg,#ff6a1f,#ff2d55); }
/* /en/: без каталога — только пополнение по центру; пределы суммы способа рядом с «Amount» */
.wrap.solo { grid-template-columns:minmax(0,440px); justify-content:center; }
.lbl .lim { color:var(--pale); font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; opacity:.8; }
.chip:disabled { opacity:.35; cursor:not-allowed; }
.nav-tab.lang span { font-weight:800; letter-spacing:.04em; }
/* /en/: Apple Pay / Google Pay с компьютера — QR-код этой страницы, чтобы оплатить с телефона */
.phone-pay { display:flex; gap:14px; align-items:center; margin:12px 0 4px; padding:12px; border:1.5px dashed rgba(185,255,31,.55); border-radius:12px; background:rgba(185,255,31,.05); }
.phone-pay[hidden] { display:none; }
.pp-qr { flex:none; width:128px; height:128px; padding:6px; border-radius:10px; background:#fff; }
.pp-qr:empty { display:none; }
.pp-qr svg { display:block; width:100%; height:100%; }
.pp-text { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:13px; line-height:1.45; color:var(--pale); }
.pp-text b { color:var(--text); font-size:14px; }
.pp-text .linkish { align-self:flex-start; padding:0; border:0; background:none; cursor:pointer; font-size:13px; }
@media (max-width:420px) { .phone-pay { flex-direction:column; align-items:flex-start; } }
.pp-qr { cursor:zoom-in; }
/* QR на весь экран — по кнопке оплаты с компьютера (phonepay.js) */
dialog.pp-full { width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(4,10,4,.94); color:var(--text); }
dialog.pp-full::backdrop { background:rgba(0,0,0,.6); }
.pp-full-in { box-sizing:border-box; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px 16px; text-align:center; }
.pp-full-in b { font:800 clamp(18px,3vw,26px)/1.2 Inter, sans-serif; }
.pp-full-qr { width:min(72vmin,520px); aspect-ratio:1; padding:12px; border-radius:16px; background:#fff; }
.pp-full-qr svg { display:block; width:100%; height:100%; }
.pp-full-in p { margin:0; max-width:560px; color:var(--pale); font-size:15px; line-height:1.5; }
.pp-full-in .pp-full-text { font-size:13px; opacity:.85; }
.pp-full-in .linkish { padding:0; border:0; background:none; cursor:pointer; font-size:14px; }
.pp-full .pp-x { position:absolute; top:12px; right:16px; width:44px; height:44px; border:0; border-radius:12px; background:rgba(255,255,255,.08); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
/* окно оплаты с компьютера: «Перейти к оплате» сверху, QR для телефона ниже */
.pp-full-in .pp-go { width:min(420px,100%); }
.pp-full-in .pp-or { margin:4px 0 -4px; }
.pp-full-in .pp-full-qr { width:min(46vmin,320px); }

/* оплата с компьютера через телефон: подсказка под способами + окно «создаём страницу оплаты» → QR страницы оплаты */
.phone-pay .pp-ico { flex:none; font-size:26px; line-height:1; }
.pp-full-qr.is-empty { background:none; display:grid; place-items:center; aspect-ratio:auto; min-height:120px; }
.pp-spin { width:48px; height:48px; border-radius:50%; border:4px solid rgba(185,255,31,.25); border-top-color:var(--lime, #b9ff1f); animation:pp-spin .9s linear infinite; }
@keyframes pp-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pp-spin { animation-duration:3s; } }
.pp-err { color:#ff6b6b; }
.pp-full-in .pp-full-qr { width:min(60vmin,380px); }

/* выбор сервера при оплате */
.srv-pick { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.srv-opt { position:relative; cursor:pointer; }
.srv-opt input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.so-box { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; background:var(--cell); border:2px solid transparent; transition:border-color .15s, background .15s; }
.so-box b { font-size:15px; }
.so-box small { color:var(--gray-2); font-size:12px; }
.srv-opt:has(input:checked) .so-box { border-color:var(--lime); background:color-mix(in srgb, var(--lime) 13%, var(--cell)); }
.srv-opt:has(input:checked) .so-box b { color:var(--lime); }
.srv-opt:hover .so-box { border-color:var(--line); }