/* ---------------------------------------------------------------------------
 * Merchant Portal auth pages (login, lockout, password reset, SMS-confirm
 * preview) — Design.md's Login.dc.html turn 15 (15a sign-in, 15b SMS confirm).
 *
 * Deliberately its OWN stylesheet, not an addition to common/css/refresh.css:
 * every auth page is a standalone document (no base/card.html, no topbar/
 * sidebar chrome) — refresh.css is ~1700 lines of authenticated-app-shell
 * rules (sidebar, tables, modals…) this page family never touches. Loads
 * common/css/fonts.css alongside this file for the same self-hosted Mulish/
 * JetBrains Mono faces, without pulling in refresh.css's own unrelated bulk.
 * A handful of the same brand tokens are duplicated below rather than
 * shared via a common :root file — a deliberate, small tradeoff for keeping
 * this page family fully independent, same reasoning as reports/print.css
 * already being its own dedicated stylesheet for a different page family.
 * ------------------------------------------------------------------------- */

:root {
    --jp-brand: #2b3ff2;
    --jp-brand-deep: #1a218c;
    --jp-ink: #12141a;
    --jp-body: #3c4250;
    --jp-text-2: #5b6270;
    --jp-muted: #8a90a0;
    --jp-faint: #a4a9b6;
    --jp-line: #dcdee5;
    --jp-divider: #eaebf0;
    --jp-err: #c62240;
    --jp-err-bg: #fef4f6;
    --jp-err-line: #f7ccd6;
    --jp-font: 'Mulish', system-ui, sans-serif;
    --jp-mono-font: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--jp-font);
    background: #f6f7f9;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--jp-brand); text-decoration: none; }
a:hover { color: var(--jp-brand-deep); }

.jp-auth-page {
    display: flex;
    min-height: 100vh;
}

/* Left branded panel. Originally shipped as pure gradient + CSS-drawn rings, no
   background photo — the mockup's own photo sits under a near-opaque blue gradient
   (.82-.94 alpha) heavy enough that any reasonably neutral photo would read almost
   the same once tinted, and no real asset existed yet at the time, so painting the
   gradient directly was the simpler, asset-free stand-in. login-bg.jpg was added to
   the mockup afterward specifically to replace that stand-in — same photo, copied
   as-is (not re-compressed: already a reasonable ~360KB for a once-loaded, long-
   cached login hero, and this app doesn't otherwise pre-process imported images
   either, e.g. company logos). background is now the fallback behind the photo
   (shows briefly while it loads, and for any future viewport where object-fit
   somehow doesn't fully cover) rather than the sole fill. */
.jp-auth-panel {
    width: 620px;
    flex: none;
    background: var(--jp-brand-deep);
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.jp-auth-panel-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Same gradient this panel already had (unchanged values) — now layered over the
   photo instead of standing alone as the panel's only fill. Its own alpha (.82-.94)
   is exactly what makes this read as "photo with a brand tint" rather than "brand
   panel with a photo poking through": mostly opaque blue, photo only really visible
   in the lightest corner of the gradient. */
.jp-auth-panel-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(43, 63, 242, .82) 0%, rgba(43, 63, 242, .9) 46%, rgba(26, 33, 140, .94) 100%);
}
.jp-auth-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .13);
    pointer-events: none;
}
.jp-auth-ring--1 { right: -140px; top: 150px; width: 520px; height: 520px; }
.jp-auth-ring--2 { right: -60px; top: 250px; width: 340px; height: 340px; border-color: rgba(255, 255, 255, .10); }

.jp-auth-logo { height: 32px; width: auto; flex: none; align-self: flex-start; position: relative; }

.jp-auth-panel-body { margin-top: auto; position: relative; }
.jp-auth-panel-title {
    font: 800 34px/1.18 var(--jp-font);
    color: #fff;
    letter-spacing: -.025em;
    max-width: 420px;
}
.jp-auth-panel-desc {
    font: 400 14.5px/1.6 var(--jp-font);
    color: rgba(255, 255, 255, .78);
    max-width: 440px;
    margin-top: 12px;
}
.jp-auth-panel-points { display: flex; flex-direction: column; gap: 13px; margin-top: 30px; max-width: 440px; }
.jp-auth-panel-point { display: flex; align-items: center; gap: 11px; }
.jp-auth-panel-point .mdi { font-size: 18px; color: rgba(255, 255, 255, .6); flex: none; }
.jp-auth-panel-point div { font: 500 13px/1.4 var(--jp-font); color: rgba(255, 255, 255, .9); }

.jp-auth-panel-support { margin-top: auto; padding-top: 34px; position: relative; }
.jp-auth-panel-divider { height: 1px; background: rgba(255, 255, 255, .16); }
.jp-auth-panel-contact { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.jp-auth-panel-contact .mdi { font-size: 19px; color: rgba(255, 255, 255, .7); flex: none; }
.jp-auth-panel-phone { font: 700 13px/1 var(--jp-mono-font); color: #fff; }
.jp-auth-panel-hours { font: 400 11.5px/1.3 var(--jp-font); color: rgba(255, 255, 255, .78); margin-top: 5px; }

/* Right form panel */
.jp-auth-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 44px 48px;
}
.jp-auth-side-top { display: flex; align-items: center; flex: none; min-height: 20px; }

.jp-auth-form-wrap { margin: auto; width: 380px; flex: none; max-width: 100%; }
.jp-auth-title { font: 800 25px/1.2 var(--jp-font); color: var(--jp-ink); letter-spacing: -.022em; margin: 0; }
.jp-auth-subtitle { font: 400 13px/1.5 var(--jp-font); color: var(--jp-muted); margin-top: 9px; }

.jp-auth-back {
    display: flex; align-items: center; gap: 8px;
    font: 500 11.5px/1 var(--jp-font); color: #7b8291;
    margin-bottom: 18px; cursor: pointer; border: none; background: none; padding: 0;
}
.jp-auth-back .mdi { font-size: 14px; }
.jp-auth-back:hover { color: var(--jp-brand); }

.jp-auth-error {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px;
    background: var(--jp-err-bg);
    border: 1px solid var(--jp-err-line);
    border-radius: 9px;
    margin-top: 22px;
}
.jp-auth-error .mdi { font-size: 17px; color: var(--jp-err); flex: none; margin-top: 1px; }
.jp-auth-error-title { font: 600 12px/1.4 var(--jp-font); color: var(--jp-err); }
.jp-auth-error-sub { font: 400 11px/1.3 var(--jp-font); color: var(--jp-err); margin-top: 5px; }

.jp-auth-field-group { margin-top: 22px; }
.jp-auth-field-group + .jp-auth-field-group { margin-top: 14px; }
.jp-auth-field-label-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.jp-auth-field-label {
    font: 700 10px/1 var(--jp-font); letter-spacing: .07em; color: var(--jp-muted);
    text-transform: uppercase;
}
.jp-auth-field-link { margin-left: auto; font: 600 11px/1 var(--jp-font); }
.jp-auth-field {
    display: flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 13px;
    background: #fff;
    border: 1px solid var(--jp-line);
    border-radius: 9px;
}
.jp-auth-field:focus-within { border-color: var(--jp-brand); box-shadow: 0 0 0 3px rgba(43, 63, 242, .12); }
.jp-auth-field--error { border-color: var(--jp-err-line); }
.jp-auth-field .mdi { font-size: 17px; color: var(--jp-muted); flex: none; }
.jp-auth-field input {
    border: none; outline: none; flex: 1; min-width: 0; background: transparent;
    font: 500 13px/1 var(--jp-font); color: var(--jp-ink);
}
.jp-auth-field input::placeholder { color: var(--jp-faint); }
.jp-auth-field-toggle { cursor: pointer; background: none; border: none; padding: 0; display: flex; }

.jp-auth-checkbox-row { display: flex; align-items: center; gap: 9px; margin-top: 16px; cursor: pointer; user-select: none; }
.jp-auth-checkbox-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jp-auth-checkbox-row .mdi { font-size: 18px; }
.jp-auth-checkbox-icon-off { color: var(--jp-faint); }
.jp-auth-checkbox-icon-on { display: none; color: var(--jp-brand); }
.jp-auth-checkbox-row input:checked ~ .jp-auth-checkbox-icon-off { display: none; }
.jp-auth-checkbox-row input:checked ~ .jp-auth-checkbox-icon-on { display: inline-block; }
.jp-auth-checkbox-label { font: 500 12.5px/1.2 var(--jp-font); color: var(--jp-body); }
.jp-auth-checkbox-hint { margin-left: auto; font: 400 11px/1 var(--jp-font); color: var(--jp-faint); }

.jp-auth-submit {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 46px;
    background: var(--jp-brand);
    border: none; border-radius: 9px;
    margin-top: 20px;
    font: 700 13.5px/1 var(--jp-font); color: #fff;
    cursor: pointer;
}
.jp-auth-submit:hover { background: var(--jp-brand-deep); }
.jp-auth-submit .mdi { font-size: 17px; }
.jp-auth-submit:disabled { opacity: .6; cursor: default; }

.jp-auth-note { font: 400 11.5px/1.55 var(--jp-font); color: var(--jp-muted); margin-top: 24px; }

.jp-auth-side-bottom { display: flex; align-items: center; gap: 14px; flex: none; flex-wrap: wrap; padding-top: 20px; }
.jp-auth-version { font: 400 11px/1 var(--jp-mono-font); color: var(--jp-faint); }
.jp-auth-side-bottom .jp-auth-legal { font: 500 11px/1 var(--jp-font); color: var(--jp-muted); }
.jp-auth-side-bottom .jp-auth-legal--muted { color: var(--jp-faint); cursor: default; }
.jp-auth-copy { margin-left: auto; font: 400 11px/1 var(--jp-font); color: var(--jp-faint); }

/* Language switcher — a plain Bootstrap dropdown (already loaded on this page,
   same as every other page in the app), just its own chrome. */
.jp-auth-lang { position: relative; margin-left: auto; }
.jp-auth-lang-btn {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 4px 2px; cursor: pointer;
}
.jp-auth-lang-btn .mdi-web { font-size: 15px; color: var(--jp-muted); }
.jp-auth-lang-btn .mdi-chevron-down { font-size: 15px; color: var(--jp-muted); transition: transform .15s; }
.jp-auth-lang-current { font: 600 12px/1 var(--jp-font); color: var(--jp-text-2); }
.jp-auth-lang.show .mdi-chevron-down { transform: rotate(180deg); }
.jp-auth-lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: #fff; border: 1px solid var(--jp-divider); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(18, 20, 26, .12);
    padding: 6px; min-width: 160px; z-index: 20;
}
.jp-auth-lang-item {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 6px; border: none; background: none;
    font: 500 12.5px/1 var(--jp-font); color: var(--jp-body); cursor: pointer;
}
.jp-auth-lang-item:hover { background: #f6f7f9; }
.jp-auth-lang-item.active { background: #eeedff; color: #2a24c9; font-weight: 700; }

/* SMS-code boxes (15b preview) */
.jp-auth-code-row { display: flex; gap: 9px; margin-top: 24px; }
.jp-auth-code-box {
    width: 52px; height: 58px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--jp-line); border-radius: 9px;
    font: 700 22px/1 var(--jp-mono-font); color: var(--jp-ink);
}
.jp-auth-code-box--active { border-color: var(--jp-brand); box-shadow: 0 0 0 3px rgba(43, 63, 242, .12); }
.jp-auth-code-box--active .jp-auth-code-caret { width: 1px; height: 24px; background: var(--jp-brand); animation: jp-auth-blink 1s step-end infinite; }
@keyframes jp-auth-blink { 50% { opacity: 0; } }

.jp-auth-timer-row { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
.jp-auth-timer-row .mdi { font-size: 16px; color: var(--jp-muted); }
.jp-auth-timer-row div:first-of-type { font: 500 12px/1 var(--jp-font); color: var(--jp-text-2); }
.jp-auth-timer { font: 700 12px/1 var(--jp-mono-font); color: var(--jp-ink); }

.jp-auth-help {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--jp-divider);
}
.jp-auth-help .mdi { font-size: 17px; color: var(--jp-muted); flex: none; }
.jp-auth-help-title { font: 600 12px/1.4 var(--jp-font); color: var(--jp-body); }
.jp-auth-help-text { font: 400 11.5px/1.5 var(--jp-font); color: var(--jp-muted); margin-top: 5px; }

.jp-auth-preview-flag {
    display: inline-flex; align-items: center; gap: 6px;
    font: 700 10.5px/1 var(--jp-font); letter-spacing: .04em; color: #8a5b00;
    background: #fff4e5; border: 1px solid #ffe1b0; border-radius: 6px;
    padding: 5px 8px; margin-bottom: 18px;
}

@media (max-width: 900px) {
    .jp-auth-panel { display: none; }
    .jp-auth-side { padding: 28px 24px; }
}