/* ── RESET page styles ── */
:root{
  --bs-primary:#FF5F1F;--bs-primary-rgb:255,95,31;
  --bs-body-font-family:'Sora',system-ui,sans-serif;
  --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;
  --wh:#FFFFFF;--off:#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;
  --sh2:0 12px 40px rgba(10,22,40,.13);
  --fh:'Sora',sans-serif;--fb:'Sora',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;font-family:var(--fb);color:var(--text);background:var(--off)}
body{display:grid;grid-template-rows:64px 1fr auto;min-height:100vh}

/* 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}.tb-logo img{height:42px;width:auto;object-fit:contain}
.tb-right{display:flex;align-items:center;gap:.8rem}
.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;box-shadow:0 4px 14px var(--or-glow)}
.btn-topbar:hover{background:var(--or2);color:var(--wh)}

/* MAIN */
main{display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;background:var(--off)}

/* CARD */
.reset-card{background:var(--wh);border-radius:24px;box-shadow:var(--sh2);overflow:hidden;width:100%;max-width:480px}
.card-left-bar{height:5px;background:linear-gradient(90deg,var(--or),var(--or2))}

.card-body-pt{padding:2.5rem 2.2rem}
.card-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--or);margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.card-eyebrow::before{content:'';width:14px;height:2px;background:var(--or);border-radius:2px}
.card-title{font-family:var(--fh);font-size:1.7rem;font-weight:900;color:var(--text);margin-bottom:.5rem;line-height:1.2}
.card-subtitle{font-size:.88rem;color:var(--g60);line-height:1.65;margin-bottom:2rem}

/* Form */
.f-label{display:block;font-size:.71rem;font-weight:700;color:var(--g80);letter-spacing:.55px;text-transform:uppercase;margin-bottom:.42rem}
.f-input{width:100%;padding:.88rem 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{border-color:var(--bl3);box-shadow:0 0 0 3px rgba(0,78,228,.1)}
.f-input.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.f-group{margin-bottom:1.2rem}
.f-err{font-size:.73rem;color:var(--red);margin-top:.3rem;display:none}

/* 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)}

/* Buttons */
.btn-or{background:linear-gradient(135deg,var(--or),var(--or2));color:var(--wh);border:none;padding:.9rem 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;width:100%}
.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-back{display:inline-flex;align-items:center;gap:.4rem;color:var(--bl2);text-decoration:none;font-size:.85rem;font-weight:600;transition:color .2s;margin-bottom:1.5rem}
.btn-back:hover{color:var(--or)}

/* Password requirements */
.pwd-reqs{background:var(--g10);border-radius:10px;padding:1rem 1.1rem;margin-top:.8rem}
.pwd-reqs p{font-size:.75rem;font-weight:700;color:var(--g80);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.6rem}
.req-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--g60);margin-bottom:.3rem;transition:color .2s}
.req-item:last-child{margin-bottom:0}
.req-dot{width:8px;height:8px;border-radius:50%;background:var(--g30);flex-shrink:0;transition:background .2s}
.req-item.met{color:#16A34A}
.req-item.met .req-dot{background:var(--green)}

/* Steps */
.steps{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:2rem}
.step-dot{width:10px;height:10px;border-radius:50%;background:var(--g20);transition:all .3s}
.step-dot.active{background:var(--or);transform:scale(1.3);box-shadow:0 0 0 3px rgba(255,95,31,.2)}
.step-dot.done{background:#010165}
/* Back-to-login button style */
.btn-back-login-btn{display:inline-block;padding:.65rem 1.4rem;border:1.5px solid var(--bl2);border-radius:9px;color:var(--bl2);font-family:var(--fh);font-size:.85rem;font-weight:700;text-decoration:none;transition:all .2s}
.btn-back-login-btn:hover{background:var(--bl2);color:#fff}

/* Success state */
.success-icon{width:72px;height:72px;border-radius:50%;background:var(--green-lt);display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem}
.success-title{font-family:var(--fh);font-size:1.5rem;font-weight:900;color:var(--text);text-align:center;margin-bottom:.5rem}
.success-sub{font-size:.88rem;color:var(--g60);text-align:center;line-height:1.65;margin-bottom:1.8rem}

/* Divider */
.divider{display:flex;align-items:center;gap:.85rem;margin:1.4rem 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--g10)}
.divider span{font-size:.78rem;color:var(--g50);white-space:nowrap}

/* FOOTER */
.app-footer{background:#010165;border-top:1px solid rgba(255,255,255,.06);padding:1.2rem 5vw}
.af-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem}
.af-links{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.af-links a{color:rgba(255,255,255,.35);font-size:.74rem;text-decoration:none;transition:color .2s}
.af-links a:hover{color:var(--or)}
.af-links span{color:rgba(255,255,255,.12);font-size:.74rem}
.af-logo img{height:28px;width:auto}
.af-copy{width:100%;text-align:center;color:rgba(255,255,255,.18);font-size:.72rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.05);margin-top:.3rem}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .3s ease both}

/* Email sent state */
.email-sent-box{background:var(--bl-lt);border:1.5px solid rgba(0,78,228,.18);border-radius:12px;padding:1rem 1.2rem;display:flex;align-items:flex-start;gap:.8rem;margin-bottom:1.4rem}
.email-sent-box svg{flex-shrink:0;margin-top:.1rem}
.email-sent-box p{font-size:.84rem;color:var(--bl2);line-height:1.6;margin:0}


/* Very small phones */
@media(max-width:380px){
  .wc-balance{font-size:1.7rem}
  .tb-lang select{max-width:70px}
}


/* ══════════════════════════════════════════════════════
   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}
}


@media(max-width:640px){
  .topbar{padding:0 1rem}
  main{padding:1.5rem 1rem}
  .reset-card{border-radius:16px}
  .card-body-pt{padding:1.8rem 1.4rem}
  .card-title{font-size:1.4rem}
  .tb-lang select{max-width:65px}
}
@media(max-width:400px){
  .topbar{padding:0 .7rem}
  .tb-lang{padding:.28rem .55rem}
  .card-body-pt{padding:1.4rem 1rem}
}

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