.po-payment-block { --pay-blue:#2879c9; --pay-muted:#66717f; box-sizing:border-box; width:100%; max-width:600px; min-width:0; margin:0 auto; text-align:left; color:#20262e; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; container:po-payment / inline-size; }
.po-payment-block:has(> .po-pay-email-form) { margin-bottom:16px; }
.po-payment-block *, .po-topup-modal * { box-sizing:border-box; }
.po-payment-block fieldset.po-pay-methods { min-width:0; width:100%; margin:0; padding:0; border:0; background:transparent; }
.po-payment-block .po-pay-methods > legend { display:block; float:none; width:auto; margin:0 0 9px; padding:0; border:0; font-size:15px; font-weight:700; color:#20262e; line-height:1.4; }
.po-payment-block .po-pay-options, .po-payment-block #type_pay.po-pay-options { display:grid; grid-template-columns:1fr; width:100%; gap:9px; padding:0; margin:0; text-align:left; }
.po-payment-block label.po-pay-option { position:relative; display:grid; grid-template-columns:88px minmax(0,1fr) 22px; gap:12px; align-items:center; min-height:74px; width:100%; padding:11px 13px; margin:0; color:#20262e; border:1px solid #d6e0e8; border-radius:13px; background:#fff; cursor:pointer; text-align:left; font-weight:400; line-height:1.35; }
.po-payment-block .po-pay-option:hover { border-color:#aebbc8; box-shadow:0 3px 10px rgba(33,49,65,.06); }
.po-payment-block .po-pay-option:has(input:checked) { border-color:#72a9dd; background:#edf6ff; box-shadow:0 0 0 1px rgba(40,121,201,.13); }
.po-payment-block .po-pay-option:has(input:focus-visible) { outline:3px solid rgba(40,121,201,.2); outline-offset:2px; }
.po-payment-block .po-pay-option:has(input:disabled) { opacity:.6; cursor:wait; }
.po-payment-block .po-pay-option > input { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.po-payment-block .po-pay-icon { display:grid; place-items:center; justify-self:center; width:40px; height:40px; overflow:hidden; border-radius:11px; }
.po-payment-block .po-pay-icon.balance { color:#fff; background:linear-gradient(135deg,#2879c9,#5ca8e9); }
.po-payment-block .po-pay-icon.balance svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.po-payment-block .po-pay-icon.yookassa { width:86px; border-radius:0; }
.po-payment-block .po-pay-icon.yookassa img { display:block; width:86px; max-width:100%; height:auto; margin:0; border:0; object-fit:contain; }
.po-payment-block .po-pay-icon.robokassa { border:1px solid #dfe5eb; background:#fff; }
.po-payment-block .po-pay-icon.robokassa img { display:block; width:31px; height:31px; margin:0; border:0; border-radius:8px; object-fit:cover; }
.po-payment-block .po-pay-copy { min-width:0; }
.po-payment-block .po-pay-line { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.po-payment-block .po-pay-name { font-size:15px; font-weight:700; }
.po-payment-block .po-pay-tag { width:auto; padding:3px 7px; border-radius:999px; color:#596573; background:#edf1f4; font-size:10px; font-weight:700; line-height:1.2; white-space:nowrap; }
.po-payment-block .po-pay-tag.good { color:#21875b; background:#eaf8f1; }
.po-payment-block .po-pay-note { display:block; margin-top:4px; color:#66717f; font-size:12px; line-height:1.35; white-space:normal; }
.po-payment-block .po-pay-mark { display:grid; place-items:center; width:20px; height:20px; border:1.5px solid #aab4bf; border-radius:50%; background:#fff; }
.po-payment-block .po-pay-mark::after { content:""; width:10px; height:10px; border-radius:50%; background:#2879c9; opacity:0; }
.po-payment-block .po-pay-option:has(input:checked) .po-pay-mark { border-color:#2879c9; }
.po-payment-block .po-pay-option:has(input:checked) .po-pay-mark::after { opacity:1; }
.po-payment-block p.po-pay-details { display:flex; align-items:center; height:58px; margin:11px 0 17px; padding:10px 12px; overflow:hidden; border:0; border-radius:10px; color:#66717f; background:#f6f8fa; font-size:12px; line-height:1.45; text-align:left; }
.po-payment-block .po-pay-details.warning { color:#a4610b; background:#fff6e7; }
.po-payment-block .po-pay-sr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.po-payment-block form.po-pay-email-form { display:block; width:100%; margin:0; padding:0; text-align:left; background:none; border:0; }
.po-payment-block .po-pay-email-form label { display:block; margin:0 0 8px; padding:0; font-size:14px; line-height:1.4; font-weight:700; }
.po-payment-block .po-pay-email-form #email { width:100%; max-width:none; min-width:0; height:44px; margin:0; padding:0 12px; border:1px solid #c8d0d9; border-radius:10px; color:#20262e; background:#fff; font-size:16px; }
.po-payment-block #form_email[hidden] { display:none!important; }
.po-pay-action { min-height:48px!important; border-radius:11px!important; white-space:normal!important; }
.po-2gis-checkout:has(.po-payment-block) { align-items:start; }
.po-unpaid-methods form:has(.po-payment-block) { display:block; min-width:0; }
.po-unpaid-actions .po-unpaid-methods { flex:1 1 100%; width:100%; max-width:600px; min-width:0; }
.po-unpaid-methods form > .po-payment-block { display:block; }
.po-unpaid-methods .po-payment-block { margin:12px 0; }
.po-unpaid-methods .po-payment-block + button { width:100%; margin:0; }
#modal_form.po-topup-modal { position:fixed!important; top:50%!important; left:50%!important; transform:translate(-50%,-50%); width:min(540px,calc(100vw - 24px))!important; height:auto!important; max-height:calc(100dvh - 24px); margin:0!important; padding:24px; overflow:auto; border:1px solid #d6e0e8; border-radius:18px; background:#fff; color:#20262e; text-align:left; z-index:10002; }
.po-topup-modal h2 { margin:0 35px 18px 0; font-size:21px; line-height:1.3; color:#20262e; }
.po-topup-modal #modal_close { position:absolute; right:12px; top:10px; width:36px; height:36px; padding:0; border:0; border-radius:8px; font-size:26px; color:#66717f; background:#f4f6f8; cursor:pointer; line-height:1; }
.po-topup-modal .po-topup-amount { display:block; margin:0 0 18px; font-size:14px; font-weight:600; }
.po-topup-modal #bl_price { width:100%; height:44px; margin-top:8px; padding:0 12px; border:1px solid #c8d0d9; border-radius:10px; font-size:16px; color:#20262e; background:#fff; }
.po-topup-modal #bl_pay { width:100%; min-height:48px; margin:0; padding:11px 16px; border:0; border-radius:11px; color:#fff; background:#2879c9; font-size:16px; font-weight:700; cursor:pointer; }
.po-topup-modal #bl_pay:disabled { opacity:.6; cursor:wait; }
.po-topup-modal #bl_cassa_info { display:block; margin-top:10px; font-size:13px; }
#modal_form.po-topup-modal + #overlay { z-index:10001; }
@container po-payment (max-width:400px) {
  .po-payment-block label.po-pay-option { grid-template-columns:58px minmax(0,1fr) 20px; gap:9px; height:90px; min-height:90px; padding:10px; }
  .po-payment-block .po-pay-icon { width:36px; height:36px; }
  .po-payment-block .po-pay-icon.yookassa, .po-payment-block .po-pay-icon.yookassa img { width:58px; }
  .po-payment-block .po-pay-name { font-size:14px; }
  .po-payment-block .po-pay-tag { display:none; }
  .po-payment-block p.po-pay-details { height:78px; }
}
@media(max-width:400px) { #modal_form.po-topup-modal { padding:16px; } }
