/* Ported 1:1 from payment-checkout-prototype.html */

:root{--bg:#f3f4f6;--s:#fff;--s2:#f8f9fb;--ink:#111318;--muted:#737983;--faint:#a3a8b0;--line:#e4e6ea;--blue:#2457e8;--blue2:#edf2ff;--shadow:0 20px 60px rgba(16,20,30,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Arial,sans-serif}.page{padding:28px 18px 44px}.shell{width:min(1100px,100%);margin:auto}.top{height:48px;display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:18px;letter-spacing:-.05em}.brandmark{width:34px;height:34px;border-radius:11px;background:#111318;color:#fff;display:grid;place-items:center}.secure{font-size:12px;color:#7d838c;font-weight:600}.secure i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ca86a;margin-right:7px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px}.main,.aside{background:var(--s);border:1px solid var(--line);box-shadow:var(--shadow)}.main{border-radius:28px;padding:32px}.aside{border-radius:24px;padding:21px;position:sticky;top:18px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:9px}h1{font-size:32px;line-height:1.04;letter-spacing:-.055em;margin:0 0 9px}.lead{font-size:14px;color:var(--muted);line-height:1.5;margin:0}.section{margin-top:30px}.sectionhead{display:flex;justify-content:space-between;margin-bottom:11px}.sectionhead strong{font-size:14px}.sectionhead span{font-size:11px;color:var(--faint)}
.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.method{position:relative;min-height:166px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between}.method.active{border:1.5px solid var(--blue);background:#fbfcff;box-shadow:0 9px 25px rgba(36,87,232,.09)}.methodtop{display:flex;justify-content:space-between}.methodlogos{display:flex;gap:6px;height:40px}.methodlogo{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:11px;display:grid;place-items:center;overflow:hidden;padding:6px}.methodlogo img{width:100%;height:100%;object-fit:contain}.methodlogo.sbp{padding:2px;background:#171038}.check{width:20px;height:20px;border-radius:50%;border:1.5px solid #d3d7dd;display:grid;place-items:center}.active .check{background:var(--blue);border-color:var(--blue)}.check svg{display:none}.active .check svg{display:block}.method h3{font-size:16px;margin:13px 0 5px}.method p{font-size:12px;line-height:1.42;color:var(--muted);margin:0}.recommended{position:absolute;right:13px;top:13px;padding:4px 7px;border-radius:7px;background:var(--blue2);color:var(--blue);font-size:9px;font-weight:800}.badges{display:flex;gap:5px;align-items:center}.badge{height:21px;min-width:28px;border:1px solid var(--line);border-radius:7px;background:#fff;display:grid;place-items:center;padding:3px 5px;overflow:hidden}.badge img{max-width:25px;max-height:15px;width:auto;height:auto;object-fit:contain}.badge.more{font-size:9px;color:#7c828b;background:#f4f5f7;border:0}
.partnerbox[hidden]{display:none!important}.partnerbox{grid-column:1 / -1;border:1px solid var(--line);background:var(--s2);border-radius:20px;padding:14px}.partnerhead{display:flex;justify-content:space-between;margin-bottom:10px}.partnerhead strong{font-size:12px}.partnerhead span{font-size:10px;color:var(--muted)}.merchants{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.merchant{background:#fff;border:1px solid var(--line);border-radius:15px;padding:9px 5px;cursor:pointer;text-align:center}.merchant.active{border:1.5px solid var(--blue);background:#fbfcff}.mlogo{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);margin:0 auto 7px;display:grid;place-items:center;overflow:hidden;background:#fff}.mlogo img{width:100%;height:100%;object-fit:cover}.mname{font-size:10.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mcap{font-size:9px;color:#9298a0;margin-top:4px}
.asidetitle{font-size:15px;font-weight:800;margin:0 0 13px}.order{border:1px solid var(--line);background:var(--s2);border-radius:18px;padding:13px}.orderrow{display:flex;gap:10px;align-items:center}.orderlogo{width:42px;height:42px;border-radius:12px;background:#111318;color:#fff;display:grid;place-items:center;font-weight:900}.copy{min-width:0;flex:1}.copy strong{display:block;font-size:13px}.copy span{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.amount{text-align:right}.amount small{display:block;color:var(--faint);font-size:9px}.amount strong{font-size:18px}.hr{height:1px;background:var(--line);margin:16px 0}.row{display:flex;justify-content:space-between;margin:9px 0;font-size:12px}.row span{color:var(--muted)}.total{display:flex;justify-content:space-between;margin-top:15px}.total span{font-size:12px;color:var(--muted)}.total strong{font-size:25px}.cta{width:100%;height:54px;border:0;border-radius:16px;background:#111318;color:#fff;font-size:14px;font-weight:800;margin-top:18px;cursor:pointer}.trust{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px}.trust div{text-align:center;color:#858b94;font-size:9px;line-height:1.3}.note{font-size:10px;line-height:1.45;color:#9ba1a9;text-align:center;margin:14px 0 0}
@media(max-width:880px){.layout{grid-template-columns:1fr}.aside{position:static}}@media(max-width:650px){.page{padding:14px 11px 28px}.main{padding:21px 14px}.aside{padding:17px}h1{font-size:27px}.methods{grid-template-columns:1fr}.method{min-height:145px}.merchants{grid-template-columns:repeat(3,1fr)}}@media(max-width:430px){.merchants{grid-template-columns:repeat(2,1fr)}}

/* v21 — centered Lucide chevrons + softly rounded partner checkboxes */
.method-toggle{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);border-radius:8px;display:grid;place-items:center;flex:0 0 30px;padding:0;color:var(--muted);line-height:0}
.method-toggle svg{width:16px;height:16px;display:block;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.method.active .method-toggle{color:var(--blue);border-color:var(--blue)}
.merchant-check{border-radius:6px!important}

/* v21 final cascade */
.method-toggle{width:30px!important;height:30px!important;border:1px solid var(--line)!important;background:var(--surface)!important;border-radius:8px!important;display:grid!important;place-items:center!important;padding:0!important;font-size:0!important;line-height:0!important;color:var(--muted)!important;font-weight:400!important;box-sizing:border-box!important}
.method-toggle svg{width:16px!important;height:16px!important;display:block!important;margin:0!important;stroke:currentColor!important;stroke-width:2!important;fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.method.active .method-toggle{color:var(--blue)!important;border-color:var(--blue)!important}
.merchant-check{border-radius:6px!important}

.brandmark{display:grid!important;place-items:center;overflow:hidden}
.brandmark img{width:100%;height:100%;object-fit:contain;display:block}
.orderlogo{display:grid!important;place-items:center;overflow:hidden}
.orderlogo img{width:100%;height:100%;object-fit:cover;display:block}

/* v26 final UI fixes */
.methodtop{align-items:center}
.method-toggle{width:30px!important;height:30px!important;min-width:30px!important;max-width:30px!important;min-height:30px!important;max-height:30px!important;flex:0 0 30px!important;padding:0!important;display:grid!important;place-items:center!important;align-self:center!important;box-sizing:border-box!important}
.method-toggle svg{width:16px!important;height:16px!important;margin:0!important;display:block!important}
.partnerbox{background:transparent!important}



/* Checkout v4 — mobile-first payment method interaction */
.methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.method{min-height:154px;padding:15px}
.methodlogos{display:flex;align-items:center;gap:7px;height:40px;min-width:0}
.methodlogo{width:40px;height:40px;flex:0 0 40px}
.moretext{font-size:11px;font-weight:700;color:#7c828b;white-space:nowrap}
.method h3{margin:12px 0 4px}
.method p{font-size:11.5px}
.check{display:grid!important;place-items:center;font-size:11px;font-weight:800;color:transparent}
.active .check{color:#fff}
.mobile-method-trigger{display:none}
.mobile-paybar{display:none}
@media(max-width:650px){
  body{background:#f3f4f6}
  .page{padding:10px 10px 104px}
  .top{height:42px;margin-bottom:12px;padding:0 3px}
  .secure{font-size:11px}
  .layout{display:block}
  .main{border-radius:22px;padding:18px 13px 20px;box-shadow:0 12px 35px rgba(16,20,30,.06)}
  .aside{display:block;border-radius:18px;margin-top:10px;padding:14px;box-shadow:none}
  h1{font-size:25px;line-height:1.06;margin-bottom:7px}
  .lead{font-size:12.5px;line-height:1.42}
  .section{margin-top:20px}
  .sectionhead{margin-bottom:8px}
  .sectionhead span{font-size:10px}
  /* Mobile: all payment methods are visible immediately — no dropdown. */
  .mobile-method-trigger{display:none!important}
  .methods{display:grid!important;grid-template-columns:1fr;gap:7px;margin-top:0}
  .method{min-height:0;height:auto;border-radius:15px;padding:11px 12px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center}
  .methodtop{grid-column:1 / -1;grid-row:1;align-items:center}
  .methodlogos{height:32px;gap:5px}
  .methodlogo{width:32px;height:32px;flex-basis:32px;border-radius:9px;padding:5px}
  .methodlogo.sbp{padding:2px}
  .moretext{font-size:10px}
  .method h3{grid-column:1;grid-row:2;font-size:13px;margin:0}
  .method p{grid-column:1;grid-row:3;font-size:10.5px;line-height:1.35;margin:0;color:var(--muted)}
  .method .check{grid-column:2;grid-row:2 / span 2;align-self:center}
  .recommended{top:10px;right:43px;font-size:8px}
  .partnerbox{border-radius:16px;padding:11px;margin-top:12px}
  .partnerhead{margin-bottom:8px}
  .merchants{grid-template-columns:repeat(2,1fr);gap:6px}
  .merchant{padding:8px 5px;border-radius:13px}
  .mlogo{width:38px;height:38px;border-radius:10px;margin-bottom:5px}
  .mname{font-size:10px}
  .mcap{font-size:8.5px}
  .aside{margin-bottom:0}
  .aside .cta{display:none}
  .trust,.note{display:none}
  .order{padding:10px;border-radius:14px}
  .amount strong{font-size:16px}
  .hr,.row,.total{display:none}
  .mobile-paybar{display:block;position:fixed;z-index:50;left:0;right:0;bottom:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(228,230,234,.95);box-shadow:0 -8px 28px rgba(16,20,30,.08)}
  .mobile-pay-inner{max-width:700px;margin:auto;display:flex;align-items:center;gap:10px}
  .mobile-total{display:flex;flex-direction:column;min-width:74px;padding-left:2px}
  .mobile-total span{font-size:9px;color:#858b94}
  .mobile-total strong{font-size:19px;line-height:1.15}
  .mobile-pay{height:50px;flex:1;border:0;border-radius:15px;background:#111318;color:#fff;font-size:14px;font-weight:800;box-shadow:0 6px 18px rgba(17,19,24,.16)}
}



/* v13 — flat TheTochka visual language: no rounded corners */
.main,.aside{box-shadow:none!important}
.method.active{box-shadow:none!important}
.mobile-order{display:none}
.mobile-order-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;line-height:1.2}
.mobile-order-sub{margin-top:5px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcap{display:none!important}
@media(max-width:650px){
  .main{box-shadow:none!important}
  .mobile-order{display:block;border:1px solid var(--line);background:var(--s2);padding:11px 12px;margin-top:14px}
  .mobile-order-top strong:last-child{font-size:17px}
  .aside{display:none}
  .partnerbox{margin-top:10px}
}
@media(min-width:651px){
  .aside{position:sticky;top:18px;align-self:start}
  .order{background:var(--s2);border-color:var(--line)}
}

/* v14 — payment method chevrons + partner checkboxes */
.method-toggle{width:24px;height:24px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:16px;line-height:1;color:#737983;font-weight:800;flex:0 0 24px}
.method.active .method-toggle{color:var(--blue);border-color:var(--blue)}
.check{display:none!important}
.merchant{position:relative;padding:10px 7px 9px!important}
.merchant-check{position:absolute;right:7px;top:7px;width:18px;height:18px;border:1px solid #cfd4dc;background:#fff;display:grid;place-items:center;font-size:11px;line-height:1;color:transparent;font-weight:900}
.merchant.active .merchant-check{background:var(--blue);border-color:var(--blue);color:#fff}
.merchant .mlogo{margin-top:7px}


/* Live hub extras */
#checkout.checkout-proto[hidden]{display:none!important}
body.is-checkout{padding:0;display:block;min-height:100vh;background:#f3f4f6}
.banner{margin:12px 0 0;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:500;background:#edf2ff;color:#2457e8}
.banner.banner-ok{background:#E9F7EC;color:#1E8E3E}
.banner.banner-err{background:#FEF2F2;color:#B91C1C}
.banner.banner-info{background:#edf2ff;color:#2457e8}
.method[hidden]{display:none!important}
.partnerbox[hidden]{display:none!important}


/* Isolate from legacy subscribe styles.css merchant list */
.checkout-proto .merchant {
  display: block;
  width: auto;
  text-align: center;
  align-items: initial;
  gap: initial;
  padding: 9px 5px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid var(--line, #e4e6ea);
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
}
.checkout-proto .merchant.active {
  border: 1.5px solid var(--blue, #2457e8);
  background: #fbfcff;
}
.checkout-proto .merchants {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 0;
}
@media (max-width: 650px) {
  .checkout-proto .merchants { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 430px) {
  .checkout-proto .merchants { grid-template-columns: repeat(2, 1fr); }
}
.checkout-proto .partnerbox {
  grid-column: 1 / -1;
}
.checkout-proto .methods {
  display: grid;
}

/* Popular badge: inline next to title, not stuck to chevron */
.checkout-proto .recommended {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--blue2, #edf2ff);
  color: var(--blue, #2457e8);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.checkout-proto .method h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

/* Mobile order: provider logo */
.checkout-proto .mobile-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkout-proto .mobile-order-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #111318;
  overflow: hidden;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
}
.checkout-proto .mobile-order-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.checkout-proto .mobile-order-body {
  min-width: 0;
  flex: 1;
}
.checkout-proto .orderlogo img[data-provider-logo] {
  object-fit: contain;
  background: #fff;
}

/* Method logos: fill the tile edge-to-edge, no forced dark pads */
.checkout-proto .methodlogo {
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--line, #e4e6ea) !important;
  overflow: hidden;
}
.checkout-proto .methodlogo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.checkout-proto .methodlogo.sbp,
.checkout-proto .methodlogo.hub-logo-sbp {
  background: transparent !important;
  padding: 0 !important;
}

/* Mir wordmark is wide — keep full text visible */
.checkout-proto .methodlogo-mir {
  background: #000 !important;
}
.checkout-proto .methodlogo-mir img {
  object-fit: contain !important;
  padding: 4px;
  box-sizing: border-box;
}

/* Method logo tiles: no visible border */
.checkout-proto .methodlogo {
  border-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}