/* /serbiabanks/ — the answer (banks grouped by verdict, or one bank's card) on the left, the map on the right.
   On phones: one column; the map is a separate screen (.sb.mapview) with "← Назад". */
.sb-page{text-align:left}
.sb-page .sign{display:none}
/* no site header strip on this page: the map and the list take the whole screen; the way home is a link above the title */
.sb-page #topheader{display:none}
.sb-home{display:inline-block; margin:0 0 6px; font-size:14px}
:root{--ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --navy:#062c51; --link:#0060c0; --side:440px}
.sb{display:grid; grid-template-columns:var(--side) 1fr; height:100dvh; min-height:460px; color:var(--ink)}
.sb-side{overflow:auto; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column}
.sb-top{padding:16px 20px 12px; border-bottom:1px solid var(--line); background:#f8fafc}
.sb-top h1{font-size:26px; line-height:1.15; color:var(--navy)}
.sb-lead{margin:4px 0 12px; font-size:14px; color:var(--muted)}
.sb-body{padding:6px 20px 16px; flex:1}
.sb-note{margin:0; padding:10px 20px; font-size:12px; color:var(--muted); border-top:1px solid var(--line)}
.sb-link{font:inherit; color:var(--link); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(0,96,192,.3); text-underline-offset:2px}
.sb-link:hover{color:#ff8f00}
.sb-flag{margin:0 0 10px; padding:6px 9px; border-radius:6px; background:#fff3cd; color:#7a5b00; font-size:13px; font-weight:bold}

/* the profile, as one sentence with switches inside it */
.sb-me{font-size:16px}
.sb-q p{margin:0 0 8px; display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.sb-seg{display:inline-flex; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden; background:#fff}
.sb-seg label{cursor:pointer}
.sb-seg input{position:absolute; opacity:0; pointer-events:none}
.sb-seg span{display:block; padding:5px 11px; font-size:15px}
.sb-seg label + label span{border-left:1px solid #cbd5e1}
.sb-seg input:checked + span{background:var(--navy); color:#fff}
.sb-seg input:focus-visible + span{outline:2px solid #ff8f00; outline-offset:-2px}
.sb-chip{cursor:pointer}
.sb-chip input{position:absolute; opacity:0; pointer-events:none}
.sb-chip span{display:inline-block; padding:4px 10px; border:1px solid #cbd5e1; border-radius:16px; font-size:14px; background:#fff}
.sb-chip span::before{content:"+ "; color:var(--muted)}
.sb-chip input:checked + span{border-color:var(--navy); background:#e6eef8; color:var(--navy)}
.sb-chip input:checked + span::before{content:"✓ "; color:var(--navy)}
.sb-chip input:focus-visible + span{outline:2px solid #ff8f00}
.sb-sum{display:none}

/* verdict mark: a shape (✓ ? ✕ —) on the verdict colour — never colour alone */
.sb-v{display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:var(--v); color:#fff; font:bold 13px/1 Arial, sans-serif; font-style:normal}
.sb-v.big{width:40px; height:40px; font-size:22px}

/* list of banks */
.sb-group{margin-top:14px}
.sb-group h2, .sb-group summary{font-size:13px; font-weight:bold; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 4px}
.sb-group summary{cursor:pointer; padding:4px 0}
.sb-banks{list-style:none; margin:0; padding:0}
.sb-bank{display:grid; grid-template-columns:22px 1fr; gap:2px 10px; width:calc(100% + 16px); padding:9px 8px; margin:0 -8px; border:0; border-radius:8px; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer}
.sb-bank:hover, .sb-bank:focus-visible{background:#f1f5f9}
.sb-bank .sb-v{grid-row:span 2; margin-top:1px}
.sb-bank .n{font-size:17px; font-weight:bold}
.sb-bank .r{font-weight:normal}
.sb-bank .w{font-size:13px; color:var(--muted)}
.sb-empty{margin:12px 0 0; padding:10px 12px; border-radius:8px; background:#fff7ed; color:#9a3412; font-size:14px}
.sb-hint{margin:16px 0 0; font-size:13px; color:var(--muted)}

/* a bank's card */
.sb-crumb{margin:6px 0 8px; font-size:15px}
.sb-card h2{font-size:26px; line-height:1.15; color:var(--navy); padding-left:12px; border-left:5px solid var(--c)}
.sb-card h3{margin:20px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.sb-verdict{display:flex; gap:12px; align-items:center; margin:14px 0 4px; font-size:16px}
.sb-verdict b{font-size:20px}
.sb-muted{color:var(--muted); font-size:14px; margin:4px 0}
.sb-alt{margin:10px 0 0; font-size:14px; color:var(--muted)}
.sb-docs{list-style:none; margin:0; padding:0}
.sb-docs li{padding:6px 0; border-bottom:1px solid #f1f5f9; font-size:15px}
.sb-docs .k{font-weight:bold}
.sb-docs .d-unknown, .sb-docs .c-unknown{color:var(--muted)}
.sb-docs .d-unknown .k, .sb-docs .c-unknown .k{font-weight:normal}
.sb-docs .ok{color:#15803d; white-space:nowrap}
.sb-docs .no{color:#b91c1c; white-space:nowrap}
.sb-docs .c-not_required{color:#b91c1c}
.sb-docs .want .k{text-decoration:underline; text-decoration-color:#cbd5e1; text-underline-offset:3px}
.sb-src{margin-top:3px; font-size:13px}
.sb-src summary{cursor:pointer; color:var(--link); width:max-content; max-width:100%}
.sb-src blockquote{margin:8px 0 0; padding:0 0 0 10px; border-left:2px solid var(--line)}
.sb-src blockquote p{margin:0; font-size:14px; color:var(--ink)}
.sb-src footer{color:var(--muted); font-size:12px}
.sb-brs{margin:0; padding:0 0 0 20px}
.sb-br{padding:8px 0; border-bottom:1px solid #f1f5f9}
.sb-br.here{background:#fffbeb; border-radius:8px}
.sb-br span{display:block}
.sb-br .a{font-weight:bold}
.sb-br .a em{font-style:normal; font-weight:normal; font-size:12px; color:#fff; background:var(--navy); padding:1px 5px; border-radius:3px; vertical-align:1px}
.sb-br .m{font-size:13px; color:var(--muted)}
.sb-br .btns{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:6px; font-size:14px}
.sb-br .btns a.go{padding:5px 14px; border:0; border-radius:6px; background:var(--navy); color:#fff; font-weight:bold}
.sb-br .btns a.go:hover{background:#0b4a85; color:#fff}
.sb-allbr summary{cursor:pointer; color:var(--link); font-size:14px; margin-top:8px}
.sb-site{margin-top:20px; font-size:13px; color:var(--muted)}

/* map */
.sb-mapwrap{position:relative; min-height:0}
.sb-map{position:absolute; inset:0; background:#e8eef2; z-index:0}
.sb-where{position:absolute; z-index:500; top:12px; left:12px; right:12px; max-width:420px; display:flex; flex-wrap:wrap; gap:6px; margin:0}
.sb-where input{flex:1; min-width:0; font:inherit; font-size:16px; padding:9px 12px; border:0; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.3)}
.sb-where button{flex:none; width:44px; font-size:18px; border:0; border-radius:8px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer}
.sb-where .sb-back{display:none; width:auto; padding:0 12px; font:bold 15px "PT Sans", Arial, sans-serif; color:var(--navy)}
@keyframes sb-flash{0%,60%{box-shadow:0 0 0 4px #f59e0b, 0 1px 4px rgba(0,0,0,.3)}100%{box-shadow:0 1px 4px rgba(0,0,0,.3)}}
.sb-where.flash input{animation:sb-flash 1.6s ease-out}
.sb-msg{flex-basis:100%; margin:0; padding:5px 9px; border-radius:6px; background:#fff; color:#9a3412; font-size:13px; box-shadow:0 1px 4px rgba(0,0,0,.2)}
.sb-msg:empty{display:none}
.sb-pin{display:grid; place-items:center; width:100%; height:100%; box-sizing:border-box; border-radius:50%; background:var(--v); color:#fff; font:bold 11px/1 Arial, sans-serif; border:3px solid var(--c); box-shadow:0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.5)}
.sb-pin.hq{font-size:13px; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--navy), 0 1px 4px rgba(0,0,0,.5)}
.sb-pin.dim{opacity:.55; transform:scale(.8)}
.sb-pin.here{box-shadow:0 0 0 3px #fff, 0 0 0 6px #f59e0b}
.sb-cl span{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--v); color:#fff; font:bold 13px/1 "PT Sans", Arial, sans-serif; box-shadow:0 0 0 4px rgba(255,255,255,.7), 0 1px 4px rgba(0,0,0,.4)}

.sb-fab{display:none}   /* phones only: on a wide screen the map is always there */
@media (max-width:760px){
  .sb{display:block; height:auto; min-height:0}
  .sb-side{overflow:visible; border-right:0}
  .sb-top{padding:10px 16px 10px; position:sticky; top:0; z-index:5}
  .sb-home{font-size:13px; margin-bottom:2px}
  .sb-top h1{font-size:22px}
  .sb-lead{display:none}
  .sb-body{padding:4px 16px 16px}
  .sb-note{padding:10px 16px}
  /* the profile collapses into one line "Для себя · динары · без ВНЖ ✎" */
  .sb-sum{display:block; width:100%; margin:6px 0 0; padding:7px 10px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; font:inherit; font-size:14px; text-align:left; color:var(--ink); cursor:pointer}
  .sb-sum span{float:right; color:var(--link)}
  .sb-me .sb-q{display:none; margin-top:8px}
  .sb-me.open .sb-q{display:block}
  .sb-mapwrap{display:none}
  .sb.mapview .sb-side{display:none}
  .sb.mapview .sb-mapwrap{display:block; position:fixed; inset:0; z-index:1000}
  .sb.mapview .sb-where .sb-back{display:block}
  .sb-where{max-width:none}
  /* the list <-> map pill: bottom centre, in thumb reach; the list gets room so its last rows are not under it */
  .sb-fab{display:flex; align-items:center; gap:6px; position:fixed; z-index:1001; left:50%; transform:translateX(-50%);
    bottom:calc(16px + env(safe-area-inset-bottom)); height:48px; padding:0 20px; border:0; border-radius:24px;
    background:var(--navy); color:#fff; font:bold 16px "PT Sans", Arial, sans-serif; white-space:nowrap; cursor:pointer;
    box-shadow:0 6px 20px rgba(6,44,81,.35), 0 1px 3px rgba(0,0,0,.25)}
  .sb-fab small{font-weight:normal; font-size:13px; opacity:.8}
  .sb-fab:focus-visible{outline:3px solid #ff8f00; outline-offset:2px}
  .sb-side{padding-bottom:80px}
}


/* account and currency: several can be needed at once */
.sb-multi{display:inline-flex; gap:4px}
/* branches that answer differently from the bank as a whole */
.sb-bank .w .better{font-weight:bold; color:#15803d}
.sb-differ{margin:12px 0 0; padding:9px 12px; border-radius:8px; background:#f8fafc; border:1px solid var(--line); font-size:14px}
.sb-differ p{margin:0 0 4px}
.sb-differ ul{list-style:none; margin:0; padding:0}
.sb-differ li{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:2px 0}
.sb-differ .sb-v{width:18px; height:18px; font-size:11px}
.sb-br .own{display:block; margin-top:3px; font-size:13px}
.sb-br .own .sb-v{width:16px; height:16px; font-size:10px; vertical-align:-3px}
.sb-br .own .sb-src{display:inline-block; margin:0}
.sb-vp + .sb-vp{margin-top:6px}
.sb-vp .pp{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.sb-chip.implied{cursor:default}
.sb-chip.implied span{border-style:dashed; background:#f1f5f9; color:var(--muted)}
.sb-chip.implied input:checked + span::before{color:var(--muted)}

/* the "головной офис" label never breaks inside itself */
.sb-br .a em{white-space:nowrap; display:inline-block}
/* bank icons: next to the name in the list, larger in the card heading */
.sb-logo{width:20px; height:20px; border-radius:4px; vertical-align:-3px; margin-right:7px; object-fit:contain}
.sb-card h2 .sb-logo{width:28px; height:28px; vertical-align:-4px; margin-right:9px}
/* the town: the end of the title is a button, "Где открыть счёт в [Белграде ▾]"; the list opens under it */
@media (min-width:761px){ .sb-top{position:relative} }   /* on a phone it is sticky, which positions the list too */
.sb-citybtn{padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; text-decoration:underline dashed 2px; text-decoration-color:#94a3b8; text-underline-offset:5px}
.sb-citybtn:hover{color:var(--link); text-decoration-color:currentColor}
.sb-citybtn:focus-visible{outline:2px solid #ff8f00; outline-offset:2px; border-radius:3px}
.sb-citybtn .caret{display:inline-block; margin-left:4px; font-size:.6em; vertical-align:.2em; color:var(--muted)}
.sb-citypop{position:absolute; z-index:20; width:280px; background:#fff; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 8px 24px rgba(6,44,81,.18); overflow:hidden}
.sb-citypop input{box-sizing:border-box; width:100%; padding:9px 12px; border:0; border-bottom:1px solid var(--line); font:15px "PT Sans", Arial, sans-serif; outline:none}
.sb-citypop ul{list-style:none; margin:0; padding:4px 0; max-height:300px; overflow:auto}
.sb-citypop li[role=option]{display:flex; justify-content:space-between; gap:8px; padding:6px 12px; cursor:pointer; font-size:15px}
.sb-citypop li[role=option] small{color:var(--muted); font-size:12px; white-space:nowrap}
.sb-citypop li.act, .sb-citypop li[role=option]:hover{background:#e6eef8}
.sb-citypop li[aria-selected=true] span{font-weight:bold; color:var(--navy)}
.sb-citypop li.sep{padding:8px 12px 4px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); margin-top:4px}
.sb-citypop li.none{padding:8px 12px; color:var(--muted); font-size:14px}
.sb-citynote{margin:0 0 12px; padding:8px 10px; font-size:13px; color:#475569; background:#f1f5f9; border-radius:8px}
.sb-br .a .noaddr{font-weight:normal; color:var(--muted)}
.sb-tell{margin:20px 0 0; padding:10px 12px; font-size:14px; line-height:1.4; color:#334155; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px}
.sb-br .weak{font-weight:normal; color:var(--muted); font-size:13px}
.sb-br.refused .a{color:var(--muted)}
/* a pin tapped on a phone: a small card on the map */
.sb-popup .leaflet-popup-content{margin:10px 12px; font:14px/1.35 "PT Sans", Arial, sans-serif; color:var(--ink)}
.sb-popup p{margin:0 0 4px}
.sb-popup .t{font-weight:bold; font-size:15px; color:var(--navy)}
.sb-popup .a{color:var(--muted); font-size:13px}
.sb-popopen{margin-top:4px; padding:6px 14px; border:0; border-radius:6px; background:var(--navy); color:#fff; font:bold 14px "PT Sans", Arial, sans-serif; cursor:pointer}
.sb-docs .hint{font-weight:normal; color:var(--muted)}