/* =========================================================================
   bank.css — HORIZON BANK (CEF.BANK = 23 / page-bank)
   ყველა სელექტორი დასკოპულია #page-bank-ზე, კლასები იწყება hb- პრეფიქსით.
   ========================================================================= */
#page-bank {
  --red: #ff4747; --light: #eaeaea; --muted: #eaeaea8c; --black: #0a0a0a; --line: #eaeaea1f;
  --ok: #30d158; --err: #ff453a;
  font-family: "Noto Sans Georgian", "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--light); background: var(--black); overflow: hidden; user-select: none;
}
#page-bank * { box-sizing: border-box; margin: 0; padding: 0; }
#page-bank .hb-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 45% at 50% 100%, #ff474730, transparent 70%),
  radial-gradient(50% 50% at 10% 0%, #eaeaea1c, transparent 70%),
  linear-gradient(180deg, #0e0b0b 0%, #050505 100%); }
#page-bank .hb-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, #000000b8 100%); }

#page-bank .hb-win { position: relative; z-index: 2; width: min(900px, 96vw); max-height: 94vh; display: flex; flex-direction: column;
  padding: 22px 26px 24px; background: #101012f2; border: 1px solid #ffffff14; border-radius: 16px; box-shadow: 0 24px 70px #000000b0; }
#page-bank .hb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#page-bank .hb-brand { display: flex; align-items: center; gap: 12px; }
#page-bank .hb-logo { width: 42px; height: 42px; flex: none; }
#page-bank .hb-title { font: 700 26px "Rajdhani", "Noto Sans Georgian", sans-serif; letter-spacing: .14em; }
#page-bank .hb-title span { color: var(--red); }
#page-bank .hb-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
#page-bank .hb-close { background: none; border: 1px solid var(--line); color: var(--light); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; transition: .15s; white-space: nowrap; }
#page-bank .hb-close:hover { border-color: var(--red); color: var(--red); }

#page-bank .hb-body { display: flex; gap: 22px; min-height: 0; }
#page-bank .hb-left, #page-bank .hb-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ბარათი */
#page-bank .hb-bcard { position: relative; aspect-ratio: 1.586; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #2a1212 0%, #0d0d0d 50%, #1f0a0a 100%); border: 1px solid #ffffff1c; box-shadow: 0 14px 40px #000000a0; overflow: hidden; }
#page-bank .hb-bcard::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -38%; height: 80%; border-radius: 50%;
  background: radial-gradient(closest-side, #ff4747c0, #ff474700 70%); filter: blur(4px); }
#page-bank .hb-bcard.off { filter: grayscale(1) brightness(.55); }
#page-bank .hb-bc-top { position: relative; display: flex; justify-content: space-between; align-items: center; font: 700 15px "Rajdhani", sans-serif; letter-spacing: .18em; }
#page-bank .hb-bc-top b { color: var(--red); }
#page-bank .hb-chip { position: relative; width: 44px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #eaeaea, #8d8d8d); box-shadow: inset 0 0 0 1px #00000040; }
#page-bank .hb-num { position: relative; font: 600 clamp(17px, 3.1vw, 23px) "Rajdhani", monospace; letter-spacing: .12em; text-shadow: 0 2px 6px #000; }
#page-bank .hb-bc-bot { position: relative; display: flex; justify-content: space-between; align-items: flex-end; font-size: 12px; color: var(--muted); }
#page-bank .hb-bc-bot b { display: block; font-size: 14px; color: var(--light); letter-spacing: .04em; }

#page-bank .hb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#page-bank .hb-stat { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #eaeaea08; }
#page-bank .hb-stat small { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
#page-bank .hb-stat b { font: 700 22px "Rajdhani", sans-serif; letter-spacing: .02em; }
#page-bank .hb-stat.bal b { color: var(--red); }

/* მარჯვენა პანელი */
#page-bank .hb-tabs { display: flex; gap: 8px; }
#page-bank .hb-tab { flex: 1; padding: 11px 8px; text-align: center; border-radius: 10px; border: 1px solid var(--line); background: #eaeaea0a; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; transition: .15s; }
#page-bank .hb-tab:hover { color: var(--light); }
#page-bank .hb-tab.on { color: var(--light); border-color: var(--red); background: #ff474720; }
#page-bank .hb-lbl { font-size: 12px; color: var(--muted); margin-bottom: 6px; display: block; }
#page-bank .hb-in { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line); background: #0000005a; color: var(--light);
  font: 700 22px "Rajdhani", sans-serif; letter-spacing: .04em; outline: none; user-select: text; transition: .15s; }
#page-bank .hb-in:focus { border-color: var(--red); box-shadow: 0 0 0 3px #ff474726; }
#page-bank .hb-quick { display: flex; flex-wrap: wrap; gap: 8px; }
#page-bank .hb-chipb { padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line); background: #eaeaea0a; color: var(--light); font: 700 13px inherit; cursor: pointer; transition: .15s; }
#page-bank .hb-chipb:hover { border-color: var(--red); color: var(--red); }
#page-bank .hb-btn { width: 100%; padding: 14px; border: 0; border-radius: 11px; cursor: pointer; font: 700 15px "Noto Sans Georgian", sans-serif; color: #fff;
  background: linear-gradient(180deg, #ff6464, #d92f2f); box-shadow: 0 8px 22px #ff474733; transition: .15s; }
#page-bank .hb-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
#page-bank .hb-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
#page-bank .hb-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ანგარიშის გახსნა */
#page-bank .hb-open { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
#page-bank .hb-open h2 { font: 700 22px "Noto Sans Georgian", sans-serif; }
#page-bank .hb-perks { display: flex; flex-direction: column; gap: 8px; }
#page-bank .hb-perks div { display: flex; gap: 9px; font-size: 13.5px; color: var(--light); align-items: center; }
#page-bank .hb-perks div::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--light); flex: none; }

#page-bank .hb-toast { position: absolute; z-index: 5; left: 50%; bottom: 5vh; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none;
  padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: 14px; background: #0c0c10f0; border: 1px solid var(--line); transition: .22s; }
#page-bank .hb-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#page-bank .hb-toast.ok { border-color: var(--ok); color: var(--ok); }
#page-bank .hb-toast.err { border-color: var(--err); color: var(--err); }

@media (max-width: 760px) { #page-bank .hb-body { flex-direction: column; } #page-bank .hb-win { overflow-y: auto; } }