/* Smart Business Solution - the sign-in page (Views/Login/login.cshtml, layout _LoginSbsLayout).
   The page is a 1672 x 941 "poster": --u is the size of ONE poster pixel on this screen, so the whole poster always fits and a
   200 px wide thing of the design is 200 * var(--u). The backdrop (login-plate.jpg: the artwork without the logo, texts, bubbles and
   card) is stretched over the window and sits on its bottom; everything the page draws itself is placed in poster pixels from the
   LEFT edge (brand, module bubbles, footer left), the RIGHT edge (card, footer right) or the bottom, so a wider window only
   makes the sky between them wider. A narrow or tall window gets the stacked layout (see the last block). */

.sbs-body { margin: 0; min-height: 100vh; background: #e6f3fc; color: #0b2160; font-family: "Segoe UI", Inter, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.sbs-body *, .sbs-body *::before, .sbs-body *::after { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sbs {
    --u: max(min(calc(100vw / 1672), calc(100vh / 941)), 0.62px);
    --s: var(--u);                                   /* the unit of the card, the texts and the bubbles (the stacked layout sets its own) */
    --blue: #024ed0;                                 /* the blue of the SBS logo */
    --ink: #0a1f5a;
    --ico: #034b94;
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: max(100vh, calc(941 * var(--u)));
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #e2f2fc 0%, #edf7fc 55%, #e9f5fb 100%);
}

/* ── the backdrop ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.sbs .plate { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(941 * var(--u)); background: url("/images/login/login-plate.jpg?v=1") left bottom / 100% 100% no-repeat; z-index: 0; pointer-events: none; }
.sbs .map   { position: absolute; left: calc(660 * var(--u)); bottom: calc(441.8 * var(--u)); width: calc(1020 * var(--u)); height: calc(471.2 * var(--u)); background: url("/images/login/world-dots.svg?v=1") 0 0 / 100% 100% no-repeat; z-index: 1; pointer-events: none; }

/* ── the brand: logo, name, tagline (left) ────────────────────────────────────────────────────────────────────────── */
.sbs .brand { position: absolute; left: calc(165 * var(--u)); bottom: calc(521 * var(--u)); width: calc(603 * var(--u)); display: flex; flex-direction: column; align-items: center; z-index: 3; text-align: center; }
.sbs .brand .logo { display: block; width: calc(470 * var(--u)); height: auto; user-select: none; -webkit-user-drag: none; }
.sbs .brand .name { margin: calc(8 * var(--u)) 0 0; font-weight: 700; font-size: calc(var(--fs-name, 54) * var(--u)); line-height: 1.12; letter-spacing: -0.01em; color: var(--blue); white-space: nowrap; }
.sbs .brand .tag  { margin: calc(-2 * var(--u)) 0 0; font-weight: 700; font-style: italic; font-size: calc(var(--fs-tag, 30) * var(--u)); line-height: 1.2; color: var(--blue); white-space: nowrap; }

/* ── the six modules (left, on the ground) ────────────────────────────────────────────────────────────────────────── */
.sbs .mods { position: absolute; left: 0; bottom: calc(163 * var(--u)); width: calc(975 * var(--u)); height: calc(134 * var(--u)); margin: 0; padding: 0; list-style: none; z-index: 2; pointer-events: none; }
.sbs .mod  { position: absolute; top: 0; left: calc(var(--cx) * var(--u)); width: calc(132 * var(--s)); margin-left: calc(-66 * var(--s)); text-align: center; }
.sbs .mod .bub { display: grid; place-items: center; width: calc(96 * var(--s)); height: calc(96 * var(--s)); margin: 0 auto; border-radius: 50%; color: #104bae;
    background: radial-gradient(circle at 34% 24%, #ffffff 0%, #f6fbfd 55%, #e8f3fa 100%);
    box-shadow: 0 calc(7 * var(--s)) calc(20 * var(--s)) rgba(30, 90, 165, .17), 0 0 0 calc(2 * var(--s)) rgba(255, 255, 255, .85), inset 0 0 0 calc(1 * var(--s)) rgba(190, 220, 242, .7); }
.sbs .mod .bub svg { width: calc(50 * var(--s)); height: calc(50 * var(--s)); fill: currentColor; }
.sbs .mod .lbl { display: block; margin-top: calc(13 * var(--s)); font-size: max(11px, calc(20 * var(--s))); font-weight: 500; color: var(--ink); letter-spacing: .1px; white-space: nowrap; }

/* ── the login card (right) ───────────────────────────────────────────────────────────────────────────────────────── */
.sbs .login-card { position: absolute; right: calc(67 * var(--u)); bottom: calc(154 * var(--u)); width: calc(630 * var(--u)); min-height: calc(669 * var(--u)); margin: 0; z-index: 4;
    padding: calc(27 * var(--s)) calc(44 * var(--s)) calc(43 * var(--s)); background: #fff; border-radius: calc(28 * var(--u));
    box-shadow: 0 calc(14 * var(--u)) calc(44 * var(--u)) rgba(18, 88, 168, .17), 0 0 0 calc(7 * var(--u)) rgba(255, 255, 255, .38), 0 0 calc(30 * var(--u)) rgba(70, 170, 245, .22);
    animation: sbs-rise .65s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes sbs-rise { from { opacity: 0; transform: translateY(calc(26 * var(--u))); } to { opacity: 1; transform: none; } }

.sbs .avatar { display: grid; place-items: center; width: calc(84 * var(--s)); height: calc(84 * var(--s)); margin: calc(13 * var(--s)) auto 0; border-radius: 50%; color: #fff;
    background: linear-gradient(160deg, #0a7cf6 0%, #0152d6 100%);
    box-shadow: 0 0 0 calc(5 * var(--s)) rgba(0, 121, 246, .34), 0 0 0 calc(12 * var(--s)) rgba(0, 121, 246, .13), 0 calc(8 * var(--s)) calc(18 * var(--s)) rgba(0, 80, 200, .22); }
.sbs .avatar svg { width: calc(46 * var(--s)); height: calc(46 * var(--s)); fill: currentColor; }
.sbs .avatar .emoji { font-size: calc(40 * var(--s)); line-height: 1; }
.sbs .ttl { margin: calc(20 * var(--s)) 0 0; text-align: center; font-weight: 800; font-size: max(20px, calc(33 * var(--s))); line-height: 1.2; letter-spacing: -.01em; color: #081e58; }
.sbs .sub { margin: calc(9 * var(--s)) 0 0; text-align: center; font-size: max(13px, calc(20 * var(--s))); line-height: 1.4; color: #3b4a66; }
.sbs .biz-line { margin: calc(8 * var(--s)) 0 0; text-align: center; font-size: max(12px, calc(15 * var(--s))); line-height: 1.4; color: #5a6c88; }
.sbs .err-box { margin: calc(18 * var(--s)) 0 calc(-12 * var(--s)); padding: calc(10 * var(--s)) calc(16 * var(--s)); border-radius: calc(12 * var(--s)); border: 1px solid #f3c4c4; border-left: calc(4 * var(--s)) solid #e04444; background: #fff2f2; color: #b42323; font-size: max(13px, calc(16 * var(--s))); line-height: 1.4; }
.sbs .err-box ul { margin: 0; padding: 0; list-style: none; }
.sbs form { margin: calc(36 * var(--s)) 0 0; }
.sbs .err-box + form { margin-top: calc(30 * var(--s)); }

.sbs .fld-wrap { margin-bottom: calc(23 * var(--s)); }
.sbs .fld { position: relative; height: calc(58 * var(--s)); }
.sbs .fld input, .sbs .fld select, .sbs .fld .static {
    display: flex; align-items: center; width: 100%; height: 100%; margin: 0; padding: 0 calc(60 * var(--s)) 0 calc(69 * var(--s));
    border: max(1.5px, calc(2 * var(--s))) solid #dce3ee; border-radius: calc(14 * var(--s)); background: #fff;
    font-family: inherit; font-size: max(14px, calc(21 * var(--s))); font-weight: 400; color: #0e2149; outline: none; box-shadow: 0 calc(2 * var(--s)) calc(7 * var(--s)) rgba(30, 80, 150, .07);
    transition: border-color .18s, box-shadow .18s; appearance: none; -webkit-appearance: none; }
.sbs .fld select { cursor: pointer; text-overflow: ellipsis; }
.sbs .fld .static { color: #0e2149; font-weight: 500; white-space: nowrap; overflow: hidden; }
.sbs .fld .static .txt { overflow: hidden; text-overflow: ellipsis; }
.sbs .fld input::placeholder { color: #53657d; opacity: 1; }
.sbs .fld input:focus, .sbs .fld select:focus { border-color: #0a6ef0; box-shadow: 0 0 0 calc(4 * var(--s)) rgba(10, 110, 240, .15), 0 calc(2 * var(--s)) calc(7 * var(--s)) rgba(30, 80, 150, .07); }
.sbs .fld .ico { position: absolute; left: calc(20 * var(--s)); top: 50%; display: grid; place-items: center; width: calc(26 * var(--s)); height: calc(26 * var(--s)); transform: translateY(-50%); color: var(--ico); pointer-events: none; z-index: 1; }
.sbs .fld .ico svg { width: 100%; height: 100%; fill: currentColor; }
.sbs .fld .ico .emoji { font-size: calc(22 * var(--s)); line-height: 1; }
.sbs .fld .chev { position: absolute; right: calc(20 * var(--s)); top: 50%; width: calc(26 * var(--s)); height: calc(26 * var(--s)); transform: translateY(-50%); color: #455466; pointer-events: none; }
.sbs .fld .chev svg { width: 100%; height: 100%; }
.sbs .pwd-btn { position: absolute; right: calc(14 * var(--s)); top: 50%; display: grid; place-items: center; width: calc(40 * var(--s)); height: calc(40 * var(--s)); padding: 0; transform: translateY(-50%); border: 0; border-radius: calc(10 * var(--s)); background: none; color: #455b7d; cursor: pointer; z-index: 2; }
.sbs .pwd-btn:hover { background: rgba(10, 110, 240, .08); color: #0a58c8; }
.sbs .pwd-btn svg { width: calc(28 * var(--s)); height: calc(28 * var(--s)); }
.sbs .pwd-btn .on { display: none; }
.sbs .shown .pwd-btn .on { display: block; }
.sbs .shown .pwd-btn .off { display: none; }
.sbs .field-error { display: block; margin: calc(6 * var(--s)) 0 0 calc(4 * var(--s)); font-size: max(12px, calc(15 * var(--s))); color: #cf2f2f; }
.sbs .field-error:empty { display: none; }

.sbs .opts { display: flex; align-items: center; justify-content: space-between; min-height: calc(25 * var(--s)); margin-top: calc(-1 * var(--s)); }
.sbs .chk { display: inline-flex; align-items: center; gap: calc(10 * var(--s)); cursor: pointer; user-select: none; font-size: max(13px, calc(19 * var(--s))); color: #2a3b57; }
.sbs .chk input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: calc(25 * var(--s)); height: calc(25 * var(--s)); margin: 0; border: max(1.5px, calc(2 * var(--s))) solid #b7c6da; border-radius: calc(6 * var(--s)); background: #fff center / 74% no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.sbs .chk input:checked { border-color: #0269ef; background-color: #0269ef; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.4'/%3E%3C/svg%3E"); }
.sbs .chk input:focus-visible { outline: 3px solid rgba(10, 110, 240, .35); outline-offset: 2px; }
.sbs .forgot { font-size: max(13px, calc(19 * var(--s))); font-weight: 500; color: #1759c9; text-decoration: none; cursor: pointer; }
.sbs .forgot:hover { text-decoration: underline; }
.sbs .forgot-note { margin: calc(12 * var(--s)) 0 0; padding: calc(10 * var(--s)) calc(14 * var(--s)); border-radius: calc(12 * var(--s)); background: #eef5fe; color: #2a4a7c; font-size: max(12px, calc(16 * var(--s))); line-height: 1.4; }
.sbs .forgot-note[hidden] { display: none; }

.sbs .btn-login { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--s)); width: 100%; height: calc(67 * var(--s)); margin: calc(34 * var(--s)) 0 0; padding: 0; border: 0; border-radius: calc(20 * var(--s)); color: #fff; cursor: pointer;
    font-family: inherit; font-size: max(16px, calc(28 * var(--s))); font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 40, 110, .25);
    background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .10) 100%),
                linear-gradient(90deg, #0042b6 0%, #0052cc 15%, #0164ce 30%, #0178ab 52%, #028677 67%, #079a4d 76%, #2eaf32 83%, #5cc71f 91%, #88dc19 97%, #8adb1e 100%);
    box-shadow: 0 calc(9 * var(--s)) calc(22 * var(--s)) rgba(0, 96, 170, .26), inset 0 calc(2 * var(--s)) 0 rgba(255, 255, 255, .26);
    transition: filter .18s, transform .12s, box-shadow .18s; }
.sbs .btn-login:hover { filter: brightness(1.07) saturate(1.05); box-shadow: 0 calc(12 * var(--s)) calc(26 * var(--s)) rgba(0, 96, 170, .34), inset 0 calc(2 * var(--s)) 0 rgba(255, 255, 255, .3); }
.sbs .btn-login:active { transform: translateY(1px); }
.sbs .btn-login:focus-visible { outline: 3px solid rgba(10, 110, 240, .45); outline-offset: 3px; }
.sbs .btn-login:disabled { cursor: default; filter: saturate(.85) brightness(.97); transform: none; }
.sbs .btn-login svg { width: calc(32 * var(--s)); height: calc(32 * var(--s)); fill: currentColor; }
.sbs .back { display: block; margin: calc(20 * var(--s)) 0 0; text-align: center; font-size: max(13px, calc(18 * var(--s))); font-weight: 600; color: #1759c9; text-decoration: none; }
.sbs .back:hover { text-decoration: underline; }
.sbs.biz .avatar { background: linear-gradient(160deg, color-mix(in srgb, var(--biz) 78%, #7fe3ff) 0%, var(--biz) 100%); box-shadow: 0 0 0 calc(5 * var(--s)) color-mix(in srgb, var(--biz) 34%, transparent), 0 0 0 calc(12 * var(--s)) color-mix(in srgb, var(--biz) 13%, transparent), 0 calc(8 * var(--s)) calc(18 * var(--s)) color-mix(in srgb, var(--biz) 25%, transparent); }
.sbs.biz .fld input:focus { border-color: var(--biz); box-shadow: 0 0 0 calc(4 * var(--s)) color-mix(in srgb, var(--biz) 18%, transparent); }

/* ── the footer ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.sbs .foot, .sbs .foot-in { display: contents; }
.sbs .foot-l { position: absolute; left: calc(43 * var(--u)); bottom: calc(24 * var(--u)); height: calc(44 * var(--u)); display: flex; align-items: center; color: #fff; font-size: max(11px, calc(22 * var(--u))); z-index: 3; white-space: nowrap; }
.sbs .foot-l .pair { display: inline-flex; align-items: center; }
.sbs .foot-l .badge { display: grid; place-items: center; flex: 0 0 auto; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; }
.sbs .foot-l .badge svg { width: 100%; height: 100%; }
.sbs .foot-l .globe { background: #d4eafe; }
.sbs .foot-l .mail  { background: #126dce; }
.sbs .foot-l .txt   { margin-left: calc(14 * var(--u)); letter-spacing: .01em; }
.sbs .foot-l .div   { flex: 0 0 auto; width: max(1px, calc(2 * var(--u))); height: calc(46 * var(--u)); margin: 0 calc(35 * var(--u)) 0 calc(32 * var(--u)); background: rgba(255, 255, 255, .55); }
.sbs .foot-r { position: absolute; right: calc(44 * var(--u)); bottom: calc(26 * var(--u)); text-align: right; color: #fff; z-index: 3; white-space: nowrap; }
.sbs .foot-r .ver  { display: block; font-size: max(11px, calc(20 * var(--u))); font-weight: 600; line-height: calc(26 * var(--u)); }
.sbs .foot-r .copy { display: block; margin-top: calc(1 * var(--u)); font-size: max(10px, calc(17 * var(--u))); line-height: calc(26 * var(--u)); color: rgba(255, 255, 255, .9); }

/* a window a little taller than 16:9: more sky above the poster, which fades into the sky colour of the page */
@media (max-aspect-ratio: 1672 / 941) {
    .sbs .plate { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%); }
}

@media (prefers-reduced-motion: reduce) { .sbs .login-card { animation: none; } .sbs .btn-login, .sbs .fld input, .sbs .fld select { transition: none; } }

/* ── a narrow or tall window (a phone, a tablet standing up, a very small window): the poster does not fit - the page is stacked:
      logo, name, tagline, the card, the footer; the artwork is only a sky with two soft colour glows ─────────────────────────── */
@media (max-width: 1099px), (max-aspect-ratio: 6 / 5) {
    .sbs {
        --s: calc(min(92vw, 460px) / 630);
        --u: var(--s);
        height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; display: flex; flex-direction: column; align-items: center;
        background:
            radial-gradient(circle at 4% -4%, rgba(0, 120, 235, .55) 0, rgba(0, 120, 235, 0) 34%),
            radial-gradient(circle at 20% -10%, rgba(110, 205, 60, .45) 0, rgba(110, 205, 60, 0) 30%),
            radial-gradient(circle at 100% 30%, rgba(120, 200, 250, .35) 0, rgba(120, 200, 250, 0) 40%),
            linear-gradient(180deg, #e2f2fc 0%, #edf7fc 100%);
    }
    .sbs .plate, .sbs .map, .sbs .mods { display: none; }
    .sbs .brand { position: static; width: 100%; margin: calc(22 * var(--s)) 0 0; padding: 0 12px; }
    .sbs .brand .logo { width: min(66vw, 320px); }
    .sbs .brand .name { font-size: clamp(22px, 7.2vw, 34px); margin-top: 6px; }
    .sbs .brand .tag { font-size: clamp(13px, 4vw, 19px); margin-top: 2px; }
    .sbs .login-card { position: relative; right: auto; bottom: auto; width: min(92vw, 460px); min-height: 0; margin: calc(26 * var(--s)) 0 0; border-radius: 22px; }
    .sbs .foot { display: block; width: 100%; margin-top: auto; padding-top: 34px; }
    .sbs .foot-in { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 24px; background: linear-gradient(180deg, #0a4aa8 0%, #003a8c 100%); border-radius: 26px 26px 0 0; color: #fff; text-align: center; }
    .sbs .foot-l, .sbs .foot-r { position: static; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; text-align: center; }
    .sbs .foot-l { font-size: 14px; }
    .sbs .foot-l .badge { width: 28px; height: 28px; }
    .sbs .foot-l .txt { margin-left: 8px; }
    .sbs .foot-l .div { display: none; }
    .sbs .foot-l .pair { display: inline-flex; align-items: center; }
    .sbs .foot-r .ver { font-size: 13px; line-height: 1.5; }
    .sbs .foot-r .copy { font-size: 12px; line-height: 1.5; }
}
@media (max-width: 420px) { .sbs .login-card { padding-left: calc(30 * var(--s)); padding-right: calc(30 * var(--s)); } }