/* ── LOGIN page styles ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --or:#FF5F1F;--or2:#FF7A40;--or-lt:#FFF0E8;--or-glow:rgba(255,95,31,.28);
  --bl:#010165;--bl2:#0035B8;--bl3:#004EE4;--bl-lt:#EAF0FF;--bl-dark:#000D2E;--bl-mid:#00123A;
  --wh:#FFFFFF;--off:#F7F9FC;--g05:#F7F9FC;--g10:#F0F4FA;--g20:#E2EAF5;--g30:#C8D4E8;
  --g50:#8FA5C9;--g60:#6B7FA3;--g80:#2D3B5A;--text:#0A1628;
  --green:#22C55E;--green-lt:#E8FFF0;--red:#EF4444;--red-lt:#FEF2F2;
  --sh:0 4px 20px rgba(10,22,40,.09);--sh2:0 12px 40px rgba(10,22,40,.13);
  --sh3:0 24px 60px rgba(10,22,40,.18);
  --fh:'Sora',sans-serif;--fb:'Inter',sans-serif;
  --r:12px;--r2:16px;--r3:20px;
}
html,body{min-height:100%;font-family:var(--fb);color:var(--text);background:#fff}
main{min-height:calc(100vh - 64px);background:#fff;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
/* ── TOPBAR ── */
.topbar{
  height:64px;background:#010165;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;position:sticky;top:0;z-index:200;
}
.tb-logo{height:34px;cursor:pointer}
.tb-logo img{height:42px;width:auto;object-fit:contain}
.tb-right{display:flex;align-items:center;gap:.8rem}
.tb-link{color:rgba(255,255,255,.58);font-size:.83rem;font-weight:500;text-decoration:none;transition:color .2s;cursor:pointer}
.tb-link:hover{color:rgba(255,255,255,.9)}
.tb-lang{
  display:flex;align-items:center;gap:.35rem;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);
  border-radius:50px;padding:.32rem .8rem;cursor:pointer;transition:all .2s;
}
.tb-lang:hover{border-color:var(--or)}
.tb-lang select{
  appearance:none;background:transparent;border:none;
  color:rgba(255,255,255,.75);font-size:.8rem;font-weight:600;
  font-family:var(--fb);cursor:pointer;outline:none;
}
.tb-lang select option{background:#010165}
.btn-topbar{
  background:var(--or);color:var(--wh);border:none;
  padding:.44rem 1.25rem;border-radius:50px;font-family:var(--fh);
  font-size:.84rem;font-weight:700;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background .2s,transform .15s;
  box-shadow:0 4px 14px rgba(255,95,31,.32);
}
.btn-topbar:hover{background:var(--or2);transform:translateY(-1px)}
.btn-topbar-ghost{
  background:transparent;border:1.5px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.78);padding:.42rem 1.15rem;border-radius:50px;
  font-family:var(--fh);font-size:.84rem;font-weight:600;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  transition:all .2s;
}
.btn-topbar-ghost:hover{border-color:var(--or);color:var(--or)}
/* ── FOOTER ── */
.app-footer{
  background:#010165;border-top:1px solid rgba(255,255,255,.06);
  padding:1.4rem 5vw;
}
.af-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.9rem;
}
.af-logo img{height:28px;width:auto}
.af-links{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.af-links a{color:rgba(255, 255, 255, 1);font-size:.75rem;text-decoration:none;transition:color .2s}
.af-links a:hover{color:var(--or)}
.af-links span{color:rgba(255,255,255,1);font-size:.75rem}
.af-info{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.af-info a{color:rgba(255,255,255,1);font-size:.75rem;text-decoration:none;display:flex;align-items:center;gap:.35rem;transition:color .2s}
.af-info a:hover{color:var(--or)}
.af-copy{width:100%;text-align:center;color:rgba(255,255,255,1);font-size:.72rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.05);margin-top:.4rem}
.af-socials{display:flex;gap:.55rem}
.af-soc{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,1);font-size:.75rem;text-decoration:none;transition:all .2s}
.af-soc:hover{background:var(--or);color:var(--wh)}
/* ── FORM ELEMENTS ── */
.f-label{display:block;font-size:.71rem;font-weight:700;color:var(--g80);letter-spacing:.55px;text-transform:uppercase;margin-bottom:.42rem}
.f-input,.f-select,.f-textarea{
  width:100%;padding:.82rem 1rem;
  border:1.5px solid var(--g30);border-radius:11px;
  background:var(--wh);font-family:var(--fb);font-size:.93rem;color:var(--text);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.f-input::placeholder{color:var(--g50)}
.f-input:focus,.f-select:focus,.f-textarea:focus{
  border-color:var(--or);box-shadow:0 0 0 3px rgba(255,95,31,.14);
}
.f-input.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.f-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7FA3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.f-row{display:grid;gap:1rem;margin-bottom:1rem}
.f-row.cols2{grid-template-columns:1fr 1fr}
.f-row.cols3{grid-template-columns:1fr 1fr 1fr}
.f-row.cols-auto{grid-template-columns:auto}
.f-group{display:flex;flex-direction:column}
.f-hint{font-size:.73rem;color:var(--g60);margin-top:.3rem;line-height:1.5}
.f-err-msg{font-size:.73rem;color:var(--red);margin-top:.3rem;display:none}
/* ── BUTTONS ── */
.btn-or{
  background:linear-gradient(135deg,var(--or),var(--or2));color:var(--wh);border:none;
  padding:.88rem 2rem;border-radius:11px;font-family:var(--fh);font-size:.97rem;font-weight:800;
  cursor:pointer;box-shadow:0 6px 20px var(--or-glow);transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
}
.btn-or:hover{transform:translateY(-1px);box-shadow:0 10px 28px var(--or-glow)}
.btn-or:disabled{opacity:.55;transform:none;cursor:not-allowed}
.btn-or.full{width:100%}
.btn-bl{
  background:linear-gradient(135deg,var(--bl),var(--bl2));color:var(--wh);border:none;
  padding:.88rem 2rem;border-radius:11px;font-family:var(--fh);font-size:.97rem;font-weight:800;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,31,107,.22);transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
}
.btn-bl:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,31,107,.28)}
.btn-bl.full{width:100%}
.btn-ghost{
  background:var(--wh);border:2px solid var(--g20);color:var(--text);
  padding:.82rem 1.8rem;border-radius:11px;font-family:var(--fh);font-size:.93rem;
  font-weight:700;cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
}
.btn-ghost:hover{border-color:var(--bl3);color:var(--bl2)}
.btn-ghost.full{width:100%}
/* ── CARD ── */
.card{background:var(--wh);border-radius:var(--r3);box-shadow:var(--sh2);overflow:hidden}
/* ── CHECKBOX ── */
.f-check-row{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer}
.f-check-row input[type=checkbox]{width:16px;height:16px;margin-top:.15rem;accent-color:var(--bl3);flex-shrink:0;cursor:pointer}
.f-check-row span{font-size:.82rem;color:var(--g60);line-height:1.6}
.f-check-row a{color:var(--bl2);text-decoration:none}
.f-check-row a:hover{color:var(--or)}
/* ── DIVIDER ── */
.divider{display:flex;align-items:center;gap:.85rem;margin:1.3rem 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--g10)}
.divider span{font-size:.78rem;color:var(--g50);white-space:nowrap}
/* ── PASSWORD FIELD ── */
.pwd-wrap{position:relative}
.pwd-wrap .f-input{padding-right:3rem}
.pwd-eye{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--g50);font-size:1rem;padding:.2rem;transition:color .2s}
.pwd-eye:hover{color:var(--bl2)}
/* ── STEP INDICATOR ── */
.step-bar{display:flex;align-items:center;gap:0;margin-bottom:2.5rem}
.step-item{display:flex;align-items:center;gap:.5rem;flex:1}
.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:.82rem;font-weight:800;flex-shrink:0;transition:all .3s}
.step-circle.done{background:var(--green);color:var(--wh)}
.step-circle.active{background:var(--or);color:var(--wh);box-shadow:0 4px 14px var(--or-glow)}
.step-circle.idle{background:var(--g10);color:var(--g60)}
.step-label{font-size:.75rem;font-weight:600;color:var(--g60);white-space:nowrap}
.step-label.active{color:var(--text);font-weight:700}
.step-line{flex:1;height:2px;background:var(--g10);margin:0 .5rem}
.step-line.done{background:var(--green)}
/* ── SECTION HEADER ── */
.sec-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--or);margin-bottom:.55rem;display:flex;align-items:center;gap:.4rem}
.sec-eyebrow::before{content:'';width:16px;height:2px;background:var(--or);border-radius:2px}
.sec-h{font-family:var(--fh);font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:.3rem}
.sec-sub{font-size:.88rem;color:var(--g60);line-height:1.7}
/* ── BADGE / PILL ── */
.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:50px;padding:.22rem .75rem;font-size:.72rem;font-weight:700}
.pill-green{background:var(--green-lt);color:#16A34A}
.pill-or{background:var(--or-lt);color:var(--or)}
.pill-bl{background:var(--bl-lt);color:var(--bl2)}
.pill-red{background:var(--red-lt);color:var(--red)}
.pill-grey{background:var(--g10);color:var(--g60)}
/* ── RESPONSIVE ── */
@media(max-width:640px){
  .topbar{padding:0 4vw}
  .f-row.cols2,.f-row.cols3{grid-template-columns:1fr}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .7s linear infinite}
.fade-in{animation:fadeIn .35s ease both}

body{display:grid;grid-template-rows:64px 1fr auto;min-height:100vh;background:var(--bl-dark);position:relative;overflow-x:hidden}
body::before{}
main{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem}
.login-wrap{display:grid;grid-template-columns:1fr 1fr;max-width:920px;width:100%;border-radius:24px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.12);animation:fadeIn .4s ease both}
/* Left brand panel */
.lp{background:#010165;padding:3.5rem 3rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.lp::before{content:'';position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,95,31,.13) 0%,transparent 65%)}
.lp::after{content:'';position:absolute;bottom:-80px;left:-40px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(0,53,184,.2) 0%,transparent 65%)}
.lp-logo{height:40px;position:relative;z-index:2}
.lp-logo img{height:46px;width:auto;object-fit:contain}
.lp-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem 0}
.lp-ey{font-size:.7rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--or);margin-bottom:.8rem;display:flex;align-items:center;gap:.4rem}
.lp-ey::before{content:'';width:16px;height:2px;background:var(--or);border-radius:2px}
.lp-h{font-family:var(--fh);font-size:clamp(1.6rem,2.5vw,2.1rem);font-weight:900;color:var(--wh);line-height:1.12;letter-spacing:-.3px;margin-bottom:1rem}
.lp-h em{font-style:normal;color:var(--or)}
.lp-sub{color:rgba(255,255,255,.65);font-size:.88rem;line-height:1.75;margin-bottom:2rem;max-width:270px}
.lp-stats{display:flex;flex-direction:column;gap:.7rem}
.lp-stat{display:flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.8rem 1rem}
.lp-stat-ico{width:34px;height:34px;border-radius:9px;background:rgba(255,95,31,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lp-stat strong{display:block;font-family:var(--fh);font-size:.84rem;font-weight:700;color:var(--wh)}
.lp-stat span{font-size:.74rem;color:rgba(255,255,255,.55)}
.lp-foot{position:relative;z-index:2;margin-top:2rem}
.lp-reg{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,95,31,.1);border:1px solid rgba(255,95,31,.22);border-radius:8px;padding:.28rem .75rem;font-size:.68rem;font-weight:700;color:var(--or)}
/* Right form panel */
.rp{background:var(--wh);padding:3.5rem 3rem;display:flex;flex-direction:column;justify-content:center;border-top:4px solid var(--or)}
.rp h1{font-family:var(--fh);font-size:1.6rem;font-weight:800;color:var(--text);margin-bottom:.3rem;letter-spacing:-.3px}
.rp .rp-sub{color:var(--g60);font-size:.87rem;margin-bottom:2rem}
.forgot-link{display:block;text-align:right;font-size:.8rem;font-weight:600;color:var(--bl2);text-decoration:none;margin-top:.4rem;transition:color .2s}
.forgot-link:hover{color:var(--or)}
.reg-block{background:var(--g05);border:1.5px solid var(--g10);border-radius:13px;padding:1.1rem 1.2rem;text-align:center}
.reg-block p{font-size:.84rem;color:var(--g60);margin-bottom:.75rem}
.recaptcha-note{margin-top:1.3rem;text-align:center;font-size:.72rem;color:var(--g50);line-height:1.6}
.recaptcha-note a{color:var(--bl2);text-decoration:none}
.recaptcha-note a:hover{color:var(--or)}
/* Hide the floating reCAPTCHA badge — disclosure text above satisfies Google's policy */
.grecaptcha-badge{visibility:hidden!important}
@media(max-width:680px){.login-wrap{grid-template-columns:1fr}.lp{display:none}.rp{padding:2.5rem 1.8rem}}

/* ══════════════════════════════════════════════════════
   MOBILE v2 — Comprehensive responsive fixes
   Breakpoints: 900px (tablet), 640px (phone), 400px (xs)
══════════════════════════════════════════════════════ */

/* ── SHARED TOPBAR ── */
@media(max-width:900px){
  .app-body{grid-template-columns:1fr!important}
  .sidebar{display:none;position:fixed;top:64px;left:0;bottom:0;
    width:280px;z-index:150;box-shadow:0 24px 60px rgba(10,22,40,.22);
    overflow-y:auto}
  .sidebar.open{display:flex!important}
  .mob-sidebar-btn{display:flex!important}
  .main-content{padding:1.4rem 1rem!important}
  .stats-row{grid-template-columns:1fr 1fr!important}
}

@media(max-width:640px){
  /* Topbar */
  .topbar{padding:0 1rem!important}
  .tb-link{display:none!important}
  .tb-lang select{max-width:65px}
  /* Tables scroll */
  .table-card,.tx-card{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .table-card table{min-width:560px!important}
  .tx-header,.tx-row{
    grid-template-columns:34px 85px 1fr 80px 40px!important;
    gap:.2rem!important;padding:.75rem .8rem!important;font-size:.78rem!important}
  /* Wallet card */
  .wallet-card{padding:1.4rem 1.1rem!important;border-radius:16px!important}
  .wc-balance{font-size:2rem!important}
  .wc-actions{flex-direction:column!important;gap:.55rem!important}
  .wc-btn{width:100%!important;justify-content:center!important;border-radius:11px!important}
  .wc-top{flex-direction:column!important;gap:.8rem!important}
  .wc-top > div:last-child{text-align:left!important}
  /* Stats */
  .stats-row{grid-template-columns:1fr!important}
  /* Send hint */
  .send-hint{flex-wrap:wrap!important}
  .send-hint > div{flex:1 1 200px}
  .send-hint-btn{width:100%!important;margin-left:0!important;margin-top:.5rem!important;text-align:center!important}
  /* Page header */
  .page-header{flex-direction:column!important;align-items:flex-start!important}
  .page-header .btn-or{width:100%!important;justify-content:center!important}
  .page-header-left h1{font-size:1.2rem!important}
  /* Filter bar */
  .filter-bar{flex-direction:column!important;align-items:stretch!important;gap:.6rem!important}
  .filter-divider{display:none!important}
  .search-wrap{min-width:unset!important}
  .btn-search{width:100%!important;justify-content:center!important}
  /* Send money two-column → stack */
  .send-two-col,.row.g-4{flex-direction:column!important}
  .send-two-col > [class*='col-'],[class*='col-7'],[class*='col-5']{
    width:100%!important;max-width:100%!important;flex:none!important}
  /* Rate summary card */
  .rate-summary-card,.summary-card-sticky{position:static!important;margin-top:1.2rem!important}
  /* Modals */
  .modal-dialog{margin:.4rem!important}
  .modal-dialog.modal-dialog-centered{align-items:flex-end!important;margin:0!important}
  .modal-content{border-radius:20px 20px 0 0!important}
  /* Forms */
  .f-row.cols2,.f-row.cols3,.row.g-3 > .col-6,.row.g-3 > .col-4,.row.g-3 > .col-3{
    width:100%!important;max-width:100%!important;flex:none!important}
  /* Main content */
  .main-content{padding:.9rem!important}
  /* Profile tabs */
  .nav.nav-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav.nav-tabs .nav-link{white-space:nowrap!important}
  /* Security sections */
  .pwd-fields-row{flex-direction:column!important}
  /* Login card */
  .login-split{flex-direction:column!important}
  .login-left{border-radius:20px 20px 0 0!important}
  .login-right{border-radius:0 0 20px 20px!important;padding:1.8rem 1.4rem!important}
  /* Breadcrumb */
  .breadcrumb-area{font-size:.72rem!important}
  /* Beneficiaries nick cell */
  .nick-label{font-size:.78rem!important}
  .country-name{display:none!important}
  /* Footer */
  .af-inner{flex-direction:column!important;align-items:flex-start!important;gap:.6rem!important}
  .af-info{flex-direction:column!important;gap:.35rem!important}
  .af-copy{font-size:.68rem!important}
}

@media(max-width:400px){
  .wc-balance{font-size:1.7rem!important}
  .tb-lang{padding:.28rem .55rem!important}
  .topbar{padding:0 .7rem!important}
  .wallet-card{padding:1.1rem .9rem!important}
  .wc-btn{font-size:.8rem!important;padding:.58rem .8rem!important}
}


/* ── SIDEBAR always pinned on desktop ── */
@media(min-width:901px){
  .sidebar{display:flex !important}
  .mob-sidebar-btn{display:none !important}
}