/* =====================================================
   Banking Mitra — Login (Admin / Employee / Customer)
   Theme: navy #000d33 / #002060, accent #ff8000, bg #eff4ff
   Loaded only on login.php (after Bootstrap 5).
===================================================== */
.bm-auth{
    --bm-navy:#002060; --bm-navy-dk:#000d33; --bm-accent:#ff8000;
    --bm-bg:#eff4ff; --bm-line:#dbe3f1; --bm-text:#0b1c30; --bm-muted:#5b5d6b; --bm-link:#115cb9;
    font-family:"Inter",sans-serif; color:var(--bm-text); background:var(--bm-bg);
}
.bm-auth .material-symbols-outlined{font-size:20px;line-height:1;vertical-align:middle}

/* ---------- brand panel (same look as before) ---------- */
.bm-auth-brand{position:relative;overflow:hidden;min-height:100vh;padding:40px 44px;background:#000d33;color:#fff}
.bm-auth-brand::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
    background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.1) 0%,transparent 50%),
               radial-gradient(circle at 80% 80%,rgba(101,157,254,.15) 0%,transparent 50%)}
.bm-auth-brand::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;
    background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.05) 10px,rgba(255,255,255,.05) 20px)}
.bm-auth-brand .brand-content{margin-top:24px}
.bm-auth-brand .brand-title{font-size:clamp(30px,3vw,40px);line-height:1.2}
.bm-auth-brand .brand-icons .material-symbols-outlined{font-size:36px}

/* ---------- form side ---------- */
.bm-auth-main{min-height:100vh;padding:40px 24px;background:var(--bm-bg)}
.bm-auth-card{max-width:460px;border-radius:20px;background:#fff;
    box-shadow:0 18px 50px rgba(0,32,96,.10),0 0 0 1px var(--bm-line)}
.bm-auth-card .card-body{padding:30px 30px 22px}
.bm-auth-mlogo img{height:72px;width:auto;object-fit:contain;margin:0 0 22px}

/* ---------- role tabs ---------- */
.bm-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;margin-bottom:24px;
    background:var(--bm-bg);border:1px solid var(--bm-line);border-radius:14px}
.bm-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;padding:11px 6px;border:0;border-radius:10px;
    background:transparent;color:#444650;font:600 14px/1.1 "Inter",sans-serif;cursor:pointer;
    transition:background-color .2s,color .2s,box-shadow .2s}
.bm-tab span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-tab:hover{color:var(--bm-navy);background:rgba(0,32,96,.06)}
.bm-tab:focus-visible{outline:2px solid var(--bm-accent);outline-offset:2px}
.bm-tab.active{color:#fff;background:linear-gradient(135deg,var(--bm-navy),#0b2a6f);box-shadow:0 6px 14px rgba(0,32,96,.28)}
.bm-tab.active .material-symbols-outlined{color:var(--bm-accent)}

/* ---------- heading & alerts ---------- */
.bm-heading{margin-bottom:22px}
.bm-heading h2{font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:28px;line-height:1.25;margin:0 0 4px;color:var(--bm-text)}
.bm-heading p,.bm-sub{font-size:14.5px;color:var(--bm-muted);margin:0}
.bm-alert{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;margin-bottom:18px;border-radius:10px;font-size:13.5px;line-height:1.45}
.bm-alert .material-symbols-outlined{font-size:19px;flex:0 0 auto}
.bm-alert-err{background:#fdecec;border:1px solid #f5c2c2;border-left:4px solid #d93025;color:#8a1c14}
.bm-alert-err .material-symbols-outlined{color:#d93025}
.bm-alert-ok{background:#e9f8ef;border:1px solid #a9dfbd;border-left:4px solid #1a7f37;color:#14532d}
.bm-alert-ok .material-symbols-outlined{color:#1a7f37}

/* ---------- inputs ---------- */
.bm-label{font-size:13.5px;font-weight:600;color:var(--bm-text);margin-bottom:6px}
.bm-field{position:relative}
.bm-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#757681;pointer-events:none}
.bm-input{height:48px;padding:10px 14px 10px 42px;border:1px solid #c5c6d2;border-radius:10px;font-size:15px;color:var(--bm-text);background:#fff}
.bm-input::placeholder{color:#9a9cab}
.bm-input:focus{border-color:var(--bm-navy);box-shadow:0 0 0 3px rgba(0,32,96,.12)}
.bm-input.is-invalid{border-color:#d93025;background-image:none;padding-right:14px}
.bm-input.is-invalid:focus{box-shadow:0 0 0 3px rgba(217,48,37,.12)}
.bm-input.bm-has-eye{padding-right:46px}
.bm-otp-input{letter-spacing:.35em;font-weight:600}
.bm-otp-input::placeholder{letter-spacing:normal;font-weight:400}
.bm-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;
    border:0;border-radius:8px;background:transparent;color:#757681;cursor:pointer}
.bm-eye:hover{color:var(--bm-navy);background:var(--bm-bg)}
.bm-hint{font-size:12.5px;color:var(--bm-muted);margin-top:6px}
.bm-hint.ok{color:#1a7f37}

/* ---------- buttons ---------- */
.bm-btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border:0;border-radius:10px;
    background:linear-gradient(135deg,var(--bm-navy-dk),var(--bm-navy));color:#fff;font-weight:600;font-size:15.5px;
    box-shadow:0 8px 18px rgba(0,32,96,.22);transition:transform .15s,box-shadow .15s,opacity .15s}
.bm-btn-primary:hover,.bm-btn-primary:focus{color:#fff;box-shadow:0 10px 22px rgba(0,32,96,.30)}
.bm-btn-primary:hover .material-symbols-outlined{transform:translateX(3px)}
.bm-btn-primary .material-symbols-outlined{transition:transform .2s}
.bm-btn-primary:active{transform:translateY(1px)}
.bm-btn-primary:disabled{opacity:.7;color:#fff}
.bm-btn-outline{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:1.5px solid var(--bm-navy);border-radius:10px;
    background:#fff;color:var(--bm-navy);font-weight:600;font-size:14.5px}
.bm-btn-outline .material-symbols-outlined{color:var(--bm-accent)}
.bm-btn-outline:hover,.bm-btn-outline:focus{background:var(--bm-navy);color:#fff;border-color:var(--bm-navy)}
.bm-btn-soft{height:48px;padding:0 16px;border:1px solid #ffd9b0;border-radius:10px;background:#fff7ec;color:#b35900;font-weight:600;font-size:14px}
.bm-btn-soft:hover,.bm-btn-soft:focus{background:var(--bm-accent);border-color:var(--bm-accent);color:#fff}
.bm-btn-soft:disabled{background:#f3f4f8;border-color:#e2e4ec;color:#8b8d9a;opacity:1}
.bm-spin{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bmspin .7s linear infinite}
@keyframes bmspin{to{transform:rotate(360deg)}}

/* ---------- OR divider / options ---------- */
.bm-or{display:flex;align-items:center;gap:12px;margin:4px 0 14px;color:#9a9cab;font-size:12px;font-weight:600;letter-spacing:.08em}
.bm-or::before,.bm-or::after{content:"";flex:1;height:1px;background:var(--bm-line)}
.bm-options{margin:18px 0 20px}
.bm-options .form-check-input{width:18px;height:18px;margin-top:0;border-color:#b9bccb;cursor:pointer}
.bm-options .form-check-input:checked{background-color:var(--bm-navy);border-color:var(--bm-navy)}
.bm-options .form-check-input:focus{box-shadow:0 0 0 3px rgba(0,32,96,.15)}
.bm-options .form-check{display:flex;align-items:center;gap:8px;padding-left:0}
.bm-options .form-check .form-check-input{float:none;margin-left:0}
.bm-options .form-check-label{font-size:14px;color:#444650;cursor:pointer}
.bm-link{font-size:14px;font-weight:600;color:var(--bm-link);text-decoration:none}
.bm-link:hover{color:var(--bm-navy);text-decoration:underline}
#loginForm[data-type="customer"] #signInBtn{margin-top:8px}

/* ---------- forgot panel ---------- */
.bm-reset-ico{width:60px;height:60px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--bm-navy),#0b2a6f);color:var(--bm-accent);box-shadow:0 10px 22px rgba(0,32,96,.25)}
.bm-reset-ico .material-symbols-outlined{font-size:30px}
#forgotForm .bm-sub{margin-bottom:20px}
.bm-back{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;font-size:14px;font-weight:600;color:var(--bm-link);text-decoration:none}
.bm-back:hover{color:var(--bm-navy)}

/* ---------- footer inside card ---------- */
.bm-auth .main-footer{margin-top:22px;padding-top:16px;border-top:1px solid var(--bm-line);text-align:center}

[hidden]{display:none!important}

/* ---------- responsive ---------- */
@media (min-width:1400px){ .bm-auth-card{max-width:480px} .bm-auth-brand{padding:48px 56px} }
@media (max-width:991.98px){
    .bm-auth-main{padding:32px 20px;align-items:flex-start!important}
    .bm-auth-card{margin-top:4vh}
}
@media (max-width:575.98px){
    .bm-auth-main{padding:16px 12px}
    .bm-auth-card{margin-top:0;border-radius:16px}
    .bm-auth-card .card-body{padding:22px 16px 18px}
    .bm-heading h2{font-size:24px}
    .bm-auth-mlogo img{height:60px;margin-bottom:18px}
}
@media (max-width:400px){
    .bm-tab{flex-direction:column;gap:3px;padding:9px 4px;font-size:12px}
    .bm-btn-soft{padding:0 12px;font-size:13px}
}
@media (max-width:340px){
    .bm-otp-input{letter-spacing:.2em}
}