/* ===== Bharat Paye authentication UI (login + MPIN) - presentation only =====
   Used only by authentication/signin.html and mpin/verify_mpin.html.
   --r : size of 1px of the 1672x940 design reference, so the branding panel scales
         proportionally and always fits inside the viewport.
   --ph: height of the phone frame; everything inside the phone is sized in em. */
.bp-login {
    --H: max(100vh, 620px);
    --r: min(calc(var(--H) / 940), calc(50vw / 936));
    --ph: min(calc(var(--H) * .92), 65vw, 1000px);
    --ink: #0c1d47; --green: #0d9a5f; --green-d: #0a7f4d;
    display: flex; width: 100%; height: 100vh; height: 100dvh; min-height: 620px; overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: #f2f6fc;
}
.bp-login, .bp-login *, .bp-login *::before, .bp-login *::after { box-sizing: border-box; }
.bp-login .hidden { display: none !important; }

/* ---------- Left : branding ---------- */
.bp-left { position: relative; flex: 0 0 50%; height: 100%; overflow: hidden; color: #fff;
    padding: calc(44 * var(--r)) 0 0 calc(74 * var(--r));
    background: radial-gradient(90% 70% at 100% 0%, #0f2d62 0%, transparent 60%), linear-gradient(160deg, #0a2857 0%, #06204a 50%, #031a40 100%); }
.bp-left::before, .bp-left::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.bp-left::before { width: calc(1000 * var(--r)); height: calc(520 * var(--r)); left: calc(-320 * var(--r)); bottom: calc(-330 * var(--r)); background: #163f92; opacity: .8; }
.bp-left::after  { width: calc(700 * var(--r)); height: calc(340 * var(--r)); left: calc(150 * var(--r)); bottom: calc(-250 * var(--r)); background: #123577; opacity: .9; }
.bp-left > * { position: relative; z-index: 1; }
.bp-brand { display: block; width: calc(236 * var(--r)); min-width: 150px; }
.bp-brand img { width: 100%; height: auto; display: block; }
.bp-brand.is-tenant { background: #fff; border: 2px solid #fff; padding: calc(14 * var(--r)) calc(20 * var(--r)); display: flex; align-items: center; justify-content: center; }
.bp-brand.is-tenant img { width: auto; max-width: 100%; max-height: calc(100 * var(--r)); min-height: 36px; object-fit: contain; }
.bp-hero { margin-top: calc(40 * var(--r)); }
.bp-hero h1 { margin: 0; font-size: max(22px, calc(42 * var(--r))); font-weight: 800; line-height: 1.15; color: #fff; letter-spacing: -.01em; }
.bp-hero h2 { margin: calc(6 * var(--r)) 0 0; font-size: max(17px, calc(38 * var(--r))); font-weight: 400; line-height: 1.2; color: #fff; }
.bp-hero p { margin: calc(24 * var(--r)) 0 0; max-width: calc(400 * var(--r)); min-width: 250px; font-size: max(13px, calc(19 * var(--r))); line-height: 1.5; color: #d3def2; }
.bp-features { list-style: none; margin: calc(44 * var(--r)) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(40 * var(--r)); }
.bp-features li { display: flex; align-items: center; gap: calc(18 * var(--r)); }
.bp-ficon { flex: 0 0 auto; width: max(40px, calc(60 * var(--r))); height: max(40px, calc(60 * var(--r))); border-radius: 50%; background: #17398a; display: grid; place-items: center; font-size: max(20px, calc(30 * var(--r))); color: #fff; }
.bp-features strong { display: block; font-size: max(13px, calc(18 * var(--r))); font-weight: 600; color: #fff; }
.bp-features .bp-fdesc { display: block; margin-top: 2px; max-width: calc(200 * var(--r)); min-width: 170px; font-size: max(11.5px, calc(15 * var(--r))); line-height: 1.45; color: #c1cfea; }
.bp-woman { position: absolute !important; right: 0; bottom: 0; z-index: 2 !important; height: calc(688 * var(--r)); width: auto; max-width: 62%; pointer-events: none; user-select: none; }

/* ---------- Right : phone ---------- */
.bp-right { position: relative; flex: 0 0 50%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: radial-gradient(70% 60% at 50% 50%, #ffffff 0%, #f3f7fd 70%, #edf3fb 100%); }
.bp-phone { position: relative; flex: 0 0 auto; width: calc(var(--ph) * .6); height: var(--ph); font-size: calc(var(--ph) / 50);
    padding: .8em; border-radius: 4.6em; background: linear-gradient(145deg, #1c2c5c 0%, #0a1233 55%, #050a1f 100%);
    box-shadow: 0 0 0 .2em #6f88c4, 0 0 0 .45em rgba(111, 136, 196, .25), 0 3em 6em -1.5em rgba(12, 29, 71, .5); }
.bp-phone::before, .bp-phone::after { content: ""; position: absolute; width: .3em; border-radius: .2em; background: #5570b3; }
.bp-phone::before { left: -.5em; top: 9em; height: 6em; box-shadow: 0 8em 0 #5570b3; }
.bp-phone::after { right: -.5em; top: 13em; height: 9em; }
.bp-screen { position: relative; width: 100%; height: 100%; border-radius: 3.9em; overflow: hidden; background: #f9fbff; display: flex; flex-direction: column; padding: 0 2.4em; color: var(--ink); }
.bp-screen::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -5em; height: 9em; border-radius: 50%; background: #e6eefa; pointer-events: none; }
.bp-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 9.5em; height: 2.4em; background: #0a1230; border-radius: 0 0 1.4em 1.4em; z-index: 3; }
.bp-notch::after { content: ""; position: absolute; right: 2.1em; top: .85em; width: .7em; height: .7em; border-radius: 50%; background: #1d2a55; }
.bp-status { position: absolute; top: 1em; left: 2.4em; right: 2.4em; display: flex; justify-content: space-between; align-items: center; font-size: .9em; font-weight: 700; z-index: 3; }
.bp-status span { display: flex; gap: .35em; font-size: 1.15em; }
.bp-form-wrap { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 3.2em 0 2.4em; min-height: 0; }
.bp-plogo { display: flex; justify-content: center; margin-bottom: 1.5em; }
.bp-plogo a { display: block; width: 11.5em; }
.bp-plogo img { width: 100%; height: auto; display: block; }
.bp-plogo.is-tenant a { width: auto; background: #fff; border: 1px solid #dfe8f6; border-radius: .6em; padding: .6em 1.2em; }
.bp-plogo.is-tenant img { width: auto; max-width: 12em; max-height: 4.6em; object-fit: contain; }
.bp-title { margin: 0; font-size: 2.1em; font-weight: 800; line-height: 1.15; color: var(--ink); }
.bp-sub { margin: .3em 0 1.4em; font-size: 1.15em; color: #4a6bb0; }
.bp-label { display: block; margin-bottom: .45em; font-size: 1em; font-weight: 600; color: var(--ink); }
.bp-field { position: relative; margin-bottom: 1.1em; }
.bp-field .bp-ico { position: absolute; left: 1em; top: 50%; transform: translateY(-50%); font-size: 1.5em; color: var(--ink); pointer-events: none; display: flex; }
.bp-field input[type=text], .bp-field input[type=password] { width: 100%; height: 3.5em; padding: 0 3em 0 3.3em; border: 1px solid #d5dfef; border-radius: .8em;
    background: #fff; color: var(--ink); font: inherit; outline: none; box-shadow: 0 1px 2px rgba(12, 29, 71, .05); transition: border-color .2s, box-shadow .2s; }
.bp-field input[type=text] { padding-right: 1em; }
.bp-field input::placeholder { color: #93a1bd; }
.bp-field input:hover { border-color: #9fb4d8; }
.bp-field input:focus { border-color: var(--green); box-shadow: 0 0 0 .22em rgba(13, 154, 95, .16); }
.bp-field .toggle-password { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); font-size: 1.5em; color: var(--ink); cursor: pointer; }
.bp-row { display: flex; justify-content: space-between; align-items: center; gap: .8em; flex-wrap: wrap; margin: .2em 0 1.5em; }
.bp-check { display: inline-flex; align-items: center; gap: .6em; color: #5b6b8c; cursor: pointer; font-size: 1em; }
.bp-check input { width: 1.25em; height: 1.25em; accent-color: var(--green); cursor: pointer; margin: 0; }
.bp-forgot { color: #1667d9; font-weight: 500; font-size: .92em; text-decoration: none; }
.bp-forgot:hover { text-decoration: underline; }
.bp-btn { width: 100%; height: 3.7em; border: 0; border-radius: .75em; background: var(--green); color: #fff; font: inherit; font-size: 1.15em; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .55em; box-shadow: 0 .6em 1.2em -.5em rgba(13, 154, 95, .55); transition: background .2s, transform .1s; }
.bp-btn:hover { background: var(--green-d); }
.bp-btn:active { transform: translateY(1px); }
.bp-btn:disabled { opacity: .75; cursor: not-allowed; }
.bp-alert { display: flex; align-items: center; gap: .5em; margin-bottom: 1em; padding: .7em .9em; border-radius: .8em; border-left: .3em solid; font-size: .92em; line-height: 1.3; }
.bp-alert.error { background: #fef2f2; border-color: #ef4444; color: #b91c1c; }
.bp-alert.success { background: #f0fdf4; border-color: #22c55e; color: #15803d; }
.bp-alert.info { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }


/* ---------- MPIN page additions ---------- */
.bp-dots { display: flex; justify-content: center; gap: .9em; margin: .2em 0 1.4em; }
.bp-dots .mpin-dot { width: 1.1em; height: 1.1em; border-radius: 50%; border: .15em solid #c5d1e6; background: #fff; transition: all .2s; }
.bp-dots .mpin-dot.bg-green-500 { background: var(--green); border-color: var(--green); }
.bp-field input.bp-mpin-input { height: 2.7em; padding: 0 2.6em; font-size: 1.3em; font-weight: 700; letter-spacing: .5em; text-align: center; }
.bp-field input.bp-mpin-input::placeholder { letter-spacing: .3em; font-weight: 400; }
.bp-links { display: flex; justify-content: space-between; align-items: center; gap: .8em; margin-top: 1.4em; font-size: .95em; }
.bp-links a { display: inline-flex; align-items: center; gap: .3em; font-weight: 500; text-decoration: none; }
.bp-links a:hover { text-decoration: underline; }
.bp-links .bp-back { color: #1667d9; }
.bp-links .bp-danger { color: #dc2626; }

/* ---------- Tablet + Mobile (<= 1024px): NO navy marketing section ----------
   The .bp-left branding markup stays in the templates for desktop; it is only hidden here.
   Desktop (> 1024px) is untouched. Both tablet and mobile show the same clean auth UI. */
@media (max-width: 1024px) {
    .bp-login { flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; background: #f9fbff; }
    .bp-left { display: none !important; }
    .bp-right { flex: 1 1 auto; height: auto; min-height: 100vh; min-height: 100dvh; padding: 32px 20px; align-items: center; background: #f9fbff; }
    .bp-right::after { display: none; }
    .bp-phone { width: 100%; max-width: 440px; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; font-size: 16px; }
    .bp-phone::before, .bp-phone::after, .bp-notch, .bp-status { display: none; }
    .bp-screen { min-height: 0; border-radius: 0; padding: 0; background: transparent; overflow: visible; }
    .bp-screen::after { display: none; }
    .bp-form-wrap { padding: 0; }
    .bp-plogo { margin-bottom: 1.6em; }
    .bp-plogo a { width: 12em; }
}
@media (max-width: 767px) {
    .bp-right { padding: 24px 20px 32px; }
}

/* ---------- Short laptop screens (desktop layout only): tighten vertical rhythm inside the phone ---------- */
@media (min-width: 1025px) and (max-height: 700px) {
    .bp-form-wrap { padding-top: 2.8em; }
    .bp-plogo { margin-bottom: 1em; }
    .bp-sub { margin-bottom: 1em; }
    .bp-field { margin-bottom: .8em; }
}