/* ==========================================================================
   BankLite – Professional UI CSS (clean, deduped, with animations)
   ========================================================================== */

/* 1) Tokens */
:root{
  --ink:#0B1A33; --ink-2:#152644;
  --muted:#6A768C; --muted-2:#8A95A8;

  --bg:#F6F8FC; --bg-soft:#EEF3FB; --card:#FFF;

  --brand:#0F5EF0; --brand-700:#0c4dd0; --brand-50:#EAF1FF;
  --accent:#12B886; --accent-50:#E9FBF4;
  --danger:#E03131; --danger-50:#FFF0F0;
  --warn:#F08C00; --warn-50:#FFF7E8;

  --cash:#12B886; --invest:#4263EB; --frozen:#868E96;

  --border:#E4EAF5;
  --shadow:0 1px 2px rgba(9,23,42,.06), 0 8px 24px rgba(9,23,42,.06);

  --radius-sm:8px; --radius:12px; --radius-lg:16px;

  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;
  --lh-tight:1.2; --lh:1.5;

  --focus:0 0 0 3px #EAF1FF, 0 0 0 6px rgba(15,94,240,.35);

  /* Motion tokens */
  --elev: cubic-bezier(.2,.7,.2,1);
  --fade: cubic-bezier(.16,1,.3,1);
  --dur-1: 220ms; --dur-2: 380ms; --dur-3: 600ms;
}

/* 2) Base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font:var(--fs-md)/var(--lh) Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:700}
small{font-size:var(--fs-sm)}
.container{max-width:1120px; margin:0 auto; padding:24px}
main.container{padding:40px 24px}
:focus-visible{outline:0; box-shadow:var(--focus); border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* 3) Header + Top Bar */
.top-bar{
  background:#071023;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:var(--fs-sm);
  color:#cfe0ff;
}
.top-bar-inner{
  max-width:1120px;
  margin:0 auto;
  padding:6px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.top-bar .callback{font-weight:500}

.site-header{
  background:#0b1a33;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-header .container{padding:16px 24px}
header .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.brand{
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  font-size:var(--fs-lg);
}
.site-header nav a{
  color:#cfe0ff;
  padding:6px 8px;
  border-radius:var(--radius-sm);
}
.site-header nav a:hover{
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.06);
}
.btnlink{color:#cfe0ff; background:none; border:none; cursor:pointer; font:inherit}
.btnlink:hover{color:#fff; text-decoration:underline}

/* 4) Type helpers */
.page-title{margin:10px 0 6px; font-size:var(--fs-2xl); line-height:var(--lh-tight)}
h1{font-size:var(--fs-3xl); line-height:var(--lh-tight); margin:0 0 12px}
h2{font-size:var(--fs-2xl); margin:0 0 12px}
h3{font-size:var(--fs-xl); margin:0 0 8px}
h4{font-size:var(--fs-lg); margin:0 0 6px}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* 5) Buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:var(--radius);
  border:1px solid transparent;
  background:#f2f5fb;
  color:var(--ink);
  font-weight:600;
  transition:transform .04s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0); filter:saturate(1.05)}
.btn.small{padding:6px 10px; border-radius:var(--radius-sm); font-size:.9rem}
.btn.primary{background:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-700)}
.btn.secondary{background:#fff; border-color:var(--border); color:var(--ink)}
.btn.ghost{background:transparent; border-color:var(--border)}
.btn:focus-visible{box-shadow:var(--focus)}

/* 6) Grid */
.grid{display:grid; gap:16px; margin:24px 0}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}

/* 7) Cards / Sections / Bands */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
  box-shadow:var(--shadow);
  transition: box-shadow var(--dur-1) var(--elev), transform var(--dur-1) var(--elev);
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(9,23,42,.07), 0 10px 28px rgba(9,23,42,.08);
}
.section{margin:28px 0}
.band{
  background:var(--bg-soft);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  padding:12px 0;
}
.band .band-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 24px;
}
.band.alt{background:#0b1a33; color:#fff; border-color:transparent}
.band.alt .muted{color:#d0d6e2}

/* 8) Hero (with background image) */
.hero{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-lg);
  padding:48px 24px;
  margin-top:16px;
  box-shadow:var(--shadow);
  color:#f4f6ff;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(11,26,51,0.90), rgba(15,94,240,0.78)),
    url("/static/core/img/hero-bg.jpg") center/cover no-repeat;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at top left, rgba(255,255,255,.15), transparent 55%);
  opacity:.75;
}
.hero-content{
  position:relative;
  max-width:760px;
  z-index:1;
}
.hero h1{margin:0 0 12px; font-size:2.2rem}
.hero p{color:#d5def8; margin:0 0 16px}

/* hero bullets */
.hero-bullets{
  margin:12px 0 0;
  padding-left:18px;
  color:#e0e6ff;
}
.hero-bullets li::marker{color:var(--accent); font-weight:700}

/* optional underline from docs */
.hero-heading{
  position:relative;
}
.hero-underline{
  position:absolute; left:0; bottom:-6px; height:3px; width:100%;
  background:linear-gradient(90deg,var(--brand),#52a5ff);
  border-radius:3px;
}

/* Hero entrance animation (used if you add .hero-reveal on section) */
.hero-reveal .hero-heading,
.hero-reveal .hero-sub,
.hero-reveal .hero-bullets-animated li,
.hero-reveal .hero-cta { will-change: opacity, transform; }
.hero-reveal .hero-heading{ opacity:0; transform:translateY(14px); position:relative }
.hero-reveal .hero-heading .hero-underline{
  transform-origin:left center; transform:scaleX(0);
}
.hero-reveal .hero-sub{ opacity:0; transform:translateY(12px) }
.hero-reveal .hero-bullets-animated li{ opacity:0; transform:translateY(10px) }
.hero-reveal .hero-cta{ opacity:0; transform:translateY(6px) scale(.98) }

.hero-reveal.in .hero-heading{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease }
.hero-reveal.in .hero-heading .hero-underline{
  transform:scaleX(1);
  transition:transform .55s cubic-bezier(.2,.9,.2,1) .15s;
}
.hero-reveal.in .hero-sub{
  opacity:1; transform:none;
  transition:opacity .45s ease .15s, transform .45s ease .15s;
}
.hero-reveal.in .hero-bullets-animated li{ opacity:1; transform:none }
.hero-reveal.in .hero-bullets-animated li:nth-child(1){ transition:opacity .35s ease .22s, transform .35s ease .22s }
.hero-reveal.in .hero-bullets-animated li:nth-child(2){ transition:opacity .35s ease .32s, transform .35s ease .32s }
.hero-reveal.in .hero-bullets-animated li:nth-child(3){ transition:opacity .35s ease .42s, transform .35s ease .42s }
.hero-reveal.in .hero-bullets-animated li:nth-child(4){ transition:opacity .35s ease .52s, transform .35s ease .52s }
.hero-reveal.in .hero-cta{
  opacity:1; transform:none;
  transition:opacity .35s ease .62s, transform .35s ease .62s;
}

/* 9) Features / Products */
.feature h3{margin:0 0 6px}
.feature p{margin:0; color:var(--muted)}
.product .product-kicker{
  display:inline-block; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.4px;
  color:var(--brand); background:var(--brand-50); padding:4px 8px; border-radius:999px; margin-bottom:8px;
}
.list-compact{margin:8px 0 0; padding-left:18px; color:var(--muted)}
.check-list{list-style:none; padding:0; margin:8px 0 0}
.check-list li{padding-left:28px; position:relative; margin-bottom:8px}
.check-list li::before{
  content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; line-height:20px; text-align:center;
  border-radius:50%; background:var(--accent-50); color:var(--accent); font-weight:800; font-size:12px;
}

/* 10) Tabs (Portal) */
.tabs{
  display:flex;
  gap:8px;
  margin:8px 0 16px;
  flex-wrap:wrap;
  position:relative;
}
.tabs a{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  font-weight:600;
}
.tabs a:hover{background:var(--brand-50); text-decoration:none}
.tabs a.active{background:var(--brand); color:#fff; border-color:transparent}
.tabs .indicator{
  position:absolute; height:2px; background:var(--brand);
  bottom:-2px; left:0; width:0; border-radius:999px;
  transition:left var(--dur-2) var(--fade), width var(--dur-2) var(--fade);
}

/* 11) Tables */
.table-wrap{width:100%; overflow-x:auto}
.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{
  font-weight:700;
  color:var(--muted);
  font-size:.9rem;
  text-align:left;
  padding:8px 12px;
}
.table td{
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--border);
}
.table thead tr th:first-child,
.table tbody tr td:first-child{border-top-left-radius:10px; border-bottom-left-radius:10px}
.table thead tr th:last-child,
.table tbody tr td:last-child{border-top-right-radius:10px; border-bottom-right-radius:10px}
.table tbody tr:hover td{background:#fafcff}
.amount{font-weight:700}
.amount.credit{color:var(--accent)}
.amount.debit{color:var(--danger)}
.pill{
  padding:2px 8px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  display:inline-block;
}
.pill.in{background:#e8fff4; color:#0b7e57}
.pill.out{background:#ffecec; color:#b42323}
.divider{width:100%; height:1px; background:var(--border); border:0; margin:16px 0}

/* 12) Accounts / Breakdown */
.acct-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.acct-number{font-weight:800; letter-spacing:.2px}
.acct-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(11,26,51,.06)}
.balance-lg{font-weight:800; font-size:1.2rem}
.tag{
  display:inline-block;
  font-size:.8rem;
  padding:2px 8px;
  border-radius:999px;
  background:#f1f3f5;
  margin-right:6px;
  font-weight:700;
}
.tag-cash{background:#e8fff6; color:#087f5b}
.tag-invest{background:#e7edff; color:#364fc7}
.tag-frozen{background:#f1f3f5; color:#495057}
.breakdown{margin-top:8px}
.breakdown-rows{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted)}
.breakdown-bar{
  margin-top:8px;
  height:8px;
  border-radius:999px;
  background:#eef2f7;
  display:flex;
  overflow:hidden;
}
.breakdown-bar > span{display:block; height:100%; width:var(--w,0%)}
.breakdown-cash{background:var(--cash)}
.breakdown-invest{background:var(--invest)}
.breakdown-frozen{background:var(--frozen); opacity:.9}
.breakdown-empty{background:#eef2f7}
/* animate widths when JS sets them */
.breakdown-bar .breakdown-cash,
.breakdown-bar .breakdown-invest,
.breakdown-bar .breakdown-frozen{
  width:0;
  transition:width var(--dur-3) var(--fade);
}

/* 13) Filters / Forms / Auth */
.filters{
  display:flex;
  gap:12px;
  align-items:flex-end;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.filter-item{display:flex; flex-direction:column; gap:6px}
.filter-item input,
.filter-item select,
.form-row input,
.search-inline input{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  min-width:220px;
}
.filter-item input:focus-visible,
.filter-item select:focus-visible,
.form-row input:focus-visible,
.search-inline input:focus-visible{box-shadow:var(--focus)}
.search-inline{display:flex; gap:8px; align-items:center; margin:12px 0 20px}

.auth{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:20px;
  align-items:start;
}
@media (max-width:980px){.auth{grid-template-columns:1fr}}
.auth-card{
  max-width:520px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow);
  margin:24px 0;
}
.auth-card h1,.auth-card h2{margin:0 0 10px}
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.form-actions{margin-top:8px}
.form-errors{
  border:1px solid #ffd7d7;
  background:#fff2f2;
  color:#9d1f1f;
  border-radius:var(--radius);
  padding:10px 12px;
  margin:8px 0;
}
.auth-info.card{position:sticky; top:24px}

/* 14) Virtual Card */
.card-face{
  background:linear-gradient(135deg,#0f5ef0,#163b83);
  color:#fff;
  border-radius:16px;
  padding:18px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
}
.card-brand{font-weight:700; opacity:.9}
.card-number{
  font-family:ui-monospace,Consolas,monospace;
  font-size:1.2rem;
  letter-spacing:2px;
  margin:8px 0;
}
.card-row{display:flex; justify-content:space-between; gap:16px}

/* 15) CTA */
.cta{margin:40px 0}
.cta-inner{
  background:#0b1a33;
  border-radius:16px;
  color:#fff;
  padding:28px;
  box-shadow:var(--shadow);
}
.cta-inner p{color:#d0d6e2}

/* 16) Messages */
.messages{margin-bottom:12px}
.msg{
  padding:10px;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--border);
}
.msg.success{border-color:#b7f0cf; background:#f0fff7}
.msg.warn{border-color:#ffe8b3; background:#fff8e5}
.msg.danger{border-color:#ffd7d7; background:#fff2f2}

/* 17) Footer */
.site-footer{
  margin-top:40px;
  border-top:1px solid var(--border);
  background:#fff;
}
.site-footer .container{padding:12px 24px}
.foot-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.foot-links{display:flex; gap:12px}

/* 18) Utilities */
.center{text-align:center}
.m-0{margin:0!important}
.mt-0{margin-top:0!important}
.mt-8{margin-top:8px!important}
.mt-16{margin-top:16px!important}
.mt-24{margin-top:24px!important}
.mb-0{margin-bottom:0!important}
.mb-8{margin-bottom:8px!important}
.mb-16{margin-bottom:16px!important}
.mb-24{margin-bottom:24px!important}
.p-0{padding:0!important}

/* 19) Print */
@media print{
  .site-header,.tabs,.cta,.band,.auth-info,.site-footer{display:none!important}
  .card,.table td,.table th{box-shadow:none!important}
  body{background:#fff}
}

/* 20) Reveal on scroll (global) */
.reveal{
  opacity:0;
  transform:translateY(12px);
  will-change:opacity,transform;
  transition:opacity var(--dur-2) var(--fade), transform var(--dur-2) var(--fade);
}
.reveal.in{opacity:1; transform:none}
.reveal-stagger > *{
  opacity:0;
  transform:translateY(12px);
  will-change:opacity,transform;
  transition:opacity var(--dur-2) var(--fade), transform var(--dur-2) var(--fade);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal-stagger.in > *{opacity:1; transform:none}

/* 21) Shimmer (optional loading state) */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.shimmer{
  background:linear-gradient(90deg,#f2f5fb 25%,#e8edf7 37%,#f2f5fb 63%);
  background-size:800px 100%;
  animation:shimmer 1.2s linear infinite;
}

/* ============================================================
   22) Google Translate Fix (remove big box + shrink dropdown)
   ============================================================ */

/* Hide the huge top banner Google injects */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}
body {
  top: 0 !important;
}

/* Reposition and shrink the dropdown */
#google_translate_element {
  position: absolute;
  top: 10px;
  right: 24px;
  z-index: 9999;
  transform: scale(0.85);
  transform-origin: top right;
}

/* Style the dropdown to match your header */
#google_translate_element select {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(7,16,35,0.9);
  color: #fff;
  font-size: 12px;
}