@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Instrument+Sans:wght@400;500;600;700&display=swap");
/* ============================================================================
   SMU MITROVICË — PRE-AUTHENTICATION SCREENS
   ----------------------------------------------------------------------------
   Loaded ONLY from Views/Shared/_LoginLayOut.cshtml, which serves six
   anonymous views:
     Account/Login, Account/ZgjedhRolin, Account/DefaultChangePassword,
     Account/EmailAuthentication, Account/GoogleAuthentication,
     ResetPassword/ResetoFjalkalimin
   Nothing signed-in ever loads this file, so it cannot leak into the back
   office. Everything is additionally scoped to `body.smu-auth`.

   Same identity as the public site (Content/mainpage/smu-modern.css):
   "PAPER & PINE" — warm ivory paper, deep pine, one coral accent, Fraunces
   over Instrument Sans, and the ARCH cut from the SMU mark's portico.

   The sign-in card is a split: a pine brand panel carrying the lockup under
   an arch, beside an ivory form panel. THE BRAND PANEL IS BRAND, NOT THEME —
   it is pine in both light and dark. What the theme changes is the ground
   behind the card, the card itself, and the chrome on that ground.

   Supersedes Content/Login/style.css, which stays on disk unreferenced. That
   file must NOT be relinked: it carries bare `input`, `a` and `h1..h3`
   element selectors that hit every control on the page.

   THE MARKUP IS BOUND TO JS BY CLASS NAME. Restyle freely; never rename or
   re-nest, and respect the display traps:
     .form-peice / .switched   a.switch toggles .switched to swap login <-> reset
     label.active              added on focus and while the field has a value
     span.error                jQuery .fadeIn() drives it — it MUST default to
                               display:none and nothing here may set `display`
     #LockedUP                 inline display:none + jQuery .show(200) — again,
                               never set `display` on it here
     .form-group.hasError      toggled by the blur validation
     .button--loading          submit spinner state
     #togglePassword           show/hide password; it is an <i>, so it must not
                               be caught by the .smu-fieldicon rules
     #RoliChooseID/#infoDivID  jQuery .fadeIn()/.fadeOut() on ZgjedhRolin
     [data-theme-toggle]       Scripts/smu-theme.js
   Labels are SIBLINGS of their input ($(this).siblings('label')), which is why
   the field is a three-row absolute layout rather than a wrapping label.
   ========================================================================== */

/* ----------------------------------------------------------------- TOKENS */
body.smu-auth {
    --a-bg: #F2EDE2; /* the ground behind the card */
    --a-paper: #FFFDF9; /* the card */
    --a-surface: #F0EBE0;
    --a-line: #E0D8C7;
    --a-line-soft: #EDE7DA;

    --a-ink: #1A211C;
    --a-heading: #101613;
    --a-muted: #5A6660;
    --a-faint: #8A948E;

    /* brand surfaces — identical in both themes */
    --a-pine: #0C3A2D;
    --a-pine-900: #07271E;
    --a-pine-700: #14513F;

    --a-coral: #E0563D; /* rules, chips — nothing sits on top */
    --a-coral-solid: #C9482F; /* a coral FILL carrying white text (4.7:1) */
    --a-coral-ink: #B23A22; /* accent TEXT on light */
    --a-coral-bright: #FF8A6E; /* accent TEXT on pine */

    --a-ok: #1C7A55;
    --a-danger: #B3261E;

    /* chrome sitting directly on the ground (language pills, footer) */
    --a-onbg-line: rgba(12, 58, 45, .16);
    --a-onbg-fill: rgba(12, 58, 45, .05);
    --a-onbg-text: #4A554F;
    --a-onbg-strong: #101613;

    --a-arch: 999px 999px 0 0;
    --a-r: 10px;
    --a-r-lg: 22px;
    --a-r-pill: 999px;

    --a-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --a-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --a-ease: cubic-bezier(.22, .61, .36, 1);
    --a-ease-out: cubic-bezier(.16, 1, .3, 1);

    --a-field-h: 52px;
    --a-label-h: 26px;
}

/* --------------------------------------------------------------- DARK */
/* Tokens only. The pine brand panel does not move. */
:root[data-theme="dark"] body.smu-auth {
    --a-bg: #070E0C;
    --a-paper: #101B17;
    --a-surface: #16241F;
    --a-line: rgba(255, 255, 255, .12);
    --a-line-soft: rgba(255, 255, 255, .07);

    --a-ink: #E7EFEA;
    --a-heading: #F2F8F4;
    --a-muted: #A3B2AA;
    --a-faint: #7A8A82;

    --a-coral-ink: #FF8A6E;
    --a-ok: #4ADE9B;
    --a-danger: #FF8B82;

    --a-onbg-line: rgba(255, 255, 255, .16);
    --a-onbg-fill: rgba(255, 255, 255, .06);
    --a-onbg-text: rgba(255, 255, 255, .78);
    --a-onbg-strong: #FFFFFF;
}

/* ------------------------------------------------------------------- BASE */
html {
    height: auto;
    max-width: 100%;
    background: #F2EDE2;
}

:root[data-theme="dark"] html {
    background: #070E0C;
}

body.smu-auth {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--a-bg);
    color: var(--a-ink);
    font-family: var(--a-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
}

/* a soft pine bloom in the corners so the ground is not a flat fill */
body.smu-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 40% at 82% 6%, rgba(224, 86, 61, .13) 0%, rgba(224, 86, 61, 0) 66%),
        radial-gradient(44% 38% at 8% 94%, rgba(12, 58, 45, .1) 0%, rgba(12, 58, 45, 0) 68%);
}

:root[data-theme="dark"] body.smu-auth::before {
    background:
        radial-gradient(46% 40% at 82% 6%, rgba(224, 86, 61, .2) 0%, rgba(224, 86, 61, 0) 66%),
        radial-gradient(44% 38% at 8% 94%, rgba(20, 81, 63, .34) 0%, rgba(20, 81, 63, 0) 68%);
}

body.smu-auth a {
    color: var(--a-coral-ink);
    text-decoration: none;
    transition: color .2s var(--a-ease);
}

body.smu-auth a:hover,
body.smu-auth a:focus {
    color: var(--a-coral);
}

body.smu-auth :focus-visible {
    outline: 2px solid var(--a-coral);
    outline-offset: 3px;
    border-radius: 4px;
}

body.smu-auth img {
    max-width: 100%;
}

/* -------------------------------------------------------- TOP CHROME BAR */
.smu-auth__top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px clamp(18px, 4vw, 44px) 0;
}

.smu-auth__mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--a-serif);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.035em;
    color: var(--a-onbg-strong);
}

.smu-auth__mark:hover,
.smu-auth__mark:focus {
    color: var(--a-coral-ink);
}

.smu-auth__mark::before {
    content: "";
    width: 16px;
    height: 18px;
    border-radius: var(--a-arch);
    background: var(--a-coral);
}

.smu-auth__right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* theme toggle — one button, two glyphs */
.smu-auth .smu-themetoggle,
body.smu-auth .smu-themetoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--a-onbg-line);
    border-radius: 50%;
    background: var(--a-onbg-fill);
    font-size: 13px;
    line-height: 1;
    color: var(--a-onbg-text);
    cursor: pointer;
    transition: background-color .2s var(--a-ease), border-color .2s var(--a-ease), color .2s var(--a-ease);
}

body.smu-auth .smu-themetoggle:hover,
body.smu-auth .smu-themetoggle:focus {
    border-color: var(--a-coral);
    color: var(--a-coral-ink);
    outline: none;
}

body.smu-auth .smu-themetoggle .fa-sun-o {
    display: none;
}

:root[data-theme="dark"] body.smu-auth .smu-themetoggle .fa-moon-o {
    display: none;
}

:root[data-theme="dark"] body.smu-auth .smu-themetoggle .fa-sun-o {
    display: inline-block;
}

/* language switch — a segmented pill */
.smu-auth__top ul#languages {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 3px;
    list-style: none;
    border: 1px solid var(--a-onbg-line);
    border-radius: var(--a-r-pill);
    background: var(--a-onbg-fill);
}

.smu-auth__top ul#languages li {
    display: inline-flex;
}

.smu-auth__top ul#languages a {
    display: inline-block;
    padding: 5px 15px;
    border-radius: var(--a-r-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--a-onbg-text);
    transition: background-color .22s var(--a-ease), color .22s var(--a-ease);
}

.smu-auth__top ul#languages a:hover,
.smu-auth__top ul#languages a:focus {
    background: var(--a-paper);
    color: var(--a-onbg-strong);
}

/* ----------------------------------------------------------- PAGE FRAME */
/* Three wrappers sit between <body> and the card — .smu-auth__wrap,
   .body-content and .login — plus the view's own Bootstrap .container.
   All four must stay chrome-free or the card is inset from its own edge. */
.smu-auth__wrap {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(24px, 5vh, 60px) clamp(16px, 4vw, 44px);
}

body.smu-auth .body-content,
body.smu-auth .login {
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

body.smu-auth .login > .container {
    width: 100%;
    max-width: 1040px;
    padding: 0;
    margin: 0 auto;
}

/* -------------------------------------------------------------- THE CARD */
body.smu-auth section#formHolder {
    position: relative;
    width: 100%;
    border-radius: var(--a-r-lg);
    background: var(--a-paper);
    border: 1px solid var(--a-line);
    box-shadow: 0 40px 90px -46px rgba(7, 39, 30, .5);
    overflow: hidden;
    animation: a-card-in .9s var(--a-ease-out) backwards;
}

/* `backwards`, never `both`: a forwards-filled transform animation leaves a
   transform on the box permanently, which makes it a stacking context and
   traps any Bootstrap modal inside it under its own backdrop. */
@keyframes a-card-in {
    from { opacity: 0; transform: translateY(24px) scale(.99); }
    to { opacity: 1; transform: none; }
}

/* Bootstrap's float grid is replaced by a two-column grid so the halves are
   equal height and the seam is exact. */
body.smu-auth section#formHolder > .row {
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    align-items: stretch;
    margin: 0;
}

/* Bootstrap 3 clears .row with `:before/:after { content:" "; display:table }`.
   In a grid container those two pseudo-elements are blockified into REAL GRID
   ITEMS and consume two cells, which pushed .brand into column 2 and .form
   onto a second row. */
body.smu-auth section#formHolder > .row::before,
body.smu-auth section#formHolder > .row::after {
    display: none;
}

body.smu-auth section#formHolder > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    float: none;
    padding: 0;
    min-width: 0;
}

/* ---------------------------------------------------------- BRAND HALF */
/* The panel is PHOTOGRAPHIC, like the home hero: the campus under a pine
   veil, with the crest at the top and the university name at the foot. Two
   things this fixes, both of which made the old card look cheap:
     * the card was 1040x339 — a 3:1 letterbox with nothing in it. A real
       min-height and content at both ends give it proper proportion.
     * logo_uib_smal.png is a DARK NAVY seal. On dark pine it read as a
       smudge, so it now sits on an ivory plate, which is the only way a
       dark mark reads on a dark ground. */
body.smu-auth section#formHolder > .row > .brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    min-height: clamp(430px, 46vw, 545px);
    padding: clamp(34px, 3.4vw, 46px);
    overflow: hidden;
    background: var(--a-pine-900);
    isolation: isolate;
}

/* the campus photograph */
body.smu-auth section#formHolder .brand::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../../Images/SliderImazhe/bg.jpg");
    background-size: cover;
    background-position: center 55%;
    filter: grayscale(.18) contrast(1.08) saturate(1.05);
    opacity: .62;
    transform: scale(1.03);
}

/* the pine veil over it, plus one warm bloom */
body.smu-auth section#formHolder .brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(74% 52% at 86% 2%, rgba(224, 86, 61, .3) 0%, rgba(224, 86, 61, 0) 62%),
        linear-gradient(168deg,
            rgba(12, 58, 45, .46) 0%,
            rgba(9, 47, 37, .62) 38%,
            rgba(7, 39, 30, .88) 74%,
            rgba(7, 39, 30, .96) 100%);
}

/* crest first, name at the foot */
body.smu-auth section#formHolder .brand .heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    order: -1;
    animation: a-rise .8s .12s var(--a-ease-out) backwards;
}

/* The crest sits on an ivory plate because logo_uib_smal.png is a DARK NAVY
   seal - on dark pine it reads as a smudge. It was a flat sticker; it is a
   MEDALLION now: a frosted plate that lets a little of the photograph
   through, a hairline rim, an inner light along the top edge, and a warm
   halo bloomed behind it. */
body.smu-auth section#formHolder .brand .heading > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(96px, 10vw, 124px);
    aspect-ratio: 0.84;
    padding: 15px 14px 13px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--a-arch);
    background: rgba(255, 253, 249, .93);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow:
        0 22px 48px -18px rgba(0, 0, 0, .78),
        /* the halo. It is a box-shadow, NOT a `z-index:-1` pseudo-element:
           `backdrop-filter` makes this plate a stacking context, and inside
           one a negative-z child paints ABOVE the parent background - the
           coral would have washed over the ivory instead of glowing behind
           it. */
        0 0 0 9px rgba(224, 86, 61, .13),
        0 0 32px 4px rgba(224, 86, 61, .34),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    transition: transform .5s var(--a-ease-out), box-shadow .5s var(--a-ease-out);
}

body.smu-auth section#formHolder .brand .heading > a:hover,
body.smu-auth section#formHolder .brand .heading > a:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 30px 58px -18px rgba(0, 0, 0, .82),
        0 0 0 11px rgba(224, 86, 61, .16),
        0 0 40px 6px rgba(224, 86, 61, .42),
        inset 0 1px 0 rgba(255, 255, 255, .95);
}

@media (prefers-reduced-motion: reduce) {
    body.smu-auth section#formHolder .brand .heading > a,
    body.smu-auth section#formHolder .brand .heading > a:hover {
        transition: none;
        transform: none;
    }
}

/* the views write width/height inline on the crest */
body.smu-auth section#formHolder .brand .heading img {
    width: 100% !important;
    height: auto !important;
    filter: none;
}

body.smu-auth section#formHolder .brand .heading h3 {
    margin: 0;
    font-family: var(--a-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

body.smu-auth section#formHolder .brand a.logo {
    display: block;
    font-family: var(--a-serif);
    font-size: clamp(23px, 2.3vw, 31px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: #FFFFFF;
    text-wrap: balance;
    overflow-wrap: anywhere;
    animation: a-rise .8s .22s var(--a-ease-out) backwards;
}

body.smu-auth section#formHolder .brand a.logo::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-bottom: 20px;
    border-radius: 2px;
    background: var(--a-coral);
}

body.smu-auth section#formHolder .brand a.logo:hover,
body.smu-auth section#formHolder .brand a.logo:focus {
    color: #FFFFFF;
}

/* the trailing "." in the markup becomes the coral full stop */
body.smu-auth section#formHolder .brand a.logo span {
    color: var(--a-coral-bright);
}

/* legacy spacing between the wordmark and the crest */
body.smu-auth section#formHolder .brand > br {
    display: none;
}

@keyframes a-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
/* ----------------------------------------------------------- FORM HALF */
body.smu-auth section#formHolder > .row > .form {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 4vw, 56px) clamp(26px, 3.6vw, 54px);
    background: var(--a-paper);
}

/* .form-peice / .switched swap the login and reset panels. The hidden one is
   removed from flow, not just faded, so the card height follows the visible
   form. */
body.smu-auth .form .form-peice {
    animation: a-rise .55s var(--a-ease-out) backwards;
}

body.smu-auth .form .form-peice.switched {
    display: none;
}

body.smu-auth .form form {
    margin: 0;
}

body.smu-auth .form form h3 {
    margin: 0 0 30px;
    font-family: var(--a-serif);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.16;
    color: var(--a-heading);
    text-align: left;
}

body.smu-auth .form form h3::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 18px;
    border-radius: 2px;
    background: var(--a-coral);
}

/* --------------------------------------------------------------- FIELDS */
/* Three-row geometry: the label is absolutely placed on the reserved top row
   and the input owns the rest, so the leading icon can be centred against the
   input alone. A STATIC label (not a floating one) is deliberate: jQuery only
   adds `.active` on focus/blur, so a browser autofill would otherwise leave a
   floating label sitting on top of the value. */
body.smu-auth .form form .form-group {
    position: relative;
    margin: 0 0 20px;
    padding-top: var(--a-label-h);
}

body.smu-auth .form form label {
    position: absolute;
    top: 0;
    left: 2px;
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--a-muted);
    transition: color .22s var(--a-ease);
    pointer-events: none;
}

body.smu-auth .form form label.active {
    color: var(--a-coral-ink);
}

body.smu-auth .form form .form-group.hasError label,
body.smu-auth .form form .form-group.hasError label.active {
    color: var(--a-danger);
}

body.smu-auth .form form input:not([type=submit]) {
    display: block;
    width: 100%;
    height: var(--a-field-h);
    padding: 0 16px 0 48px;
    border: 1px solid var(--a-line);
    border-radius: var(--a-r);
    background: var(--a-surface);
    color: var(--a-ink);
    font-family: var(--a-sans);
    font-size: 15px;
    line-height: normal;
    transition: border-color .22s var(--a-ease), background-color .22s var(--a-ease), box-shadow .22s var(--a-ease);
    -webkit-appearance: none;
    appearance: none;
}

body.smu-auth .form form input:not([type=submit])::placeholder {
    color: var(--a-faint);
}

body.smu-auth .form form input:not([type=submit]):hover {
    border-color: var(--a-faint);
}

body.smu-auth .form form input:not([type=submit]):focus {
    outline: none;
    border-color: var(--a-coral);
    background: var(--a-paper);
    box-shadow: 0 0 0 3px rgba(224, 86, 61, .16);
}

body.smu-auth .form form .form-group.hasError input:not([type=submit]),
body.smu-auth .form form input:not([type=submit]).hasError {
    border-color: var(--a-danger);
}

body.smu-auth .form form .form-group.hasError input:not([type=submit]):focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .16);
}

/* Chrome repaints autofilled fields; the inset shadow is the only way to keep
   the token colours in both themes. */
body.smu-auth .form form input:-webkit-autofill,
body.smu-auth .form form input:-webkit-autofill:hover,
body.smu-auth .form form input:-webkit-autofill:focus,
body.smu-auth .login .form-control:-webkit-autofill {
    -webkit-text-fill-color: #1A211C;
    -webkit-box-shadow: 0 0 0 1000px #F0EBE0 inset;
    caret-color: #1A211C;
    transition: background-color 100000s ease-in-out 0s;
}

:root[data-theme="dark"] body.smu-auth .form form input:-webkit-autofill,
:root[data-theme="dark"] body.smu-auth .login .form-control:-webkit-autofill {
    -webkit-text-fill-color: #E7EFEA;
    -webkit-box-shadow: 0 0 0 1000px #16241F inset;
    caret-color: #E7EFEA;
}

/* leading icon — class-scoped so #togglePassword (also an <i>) is not caught */
body.smu-auth .form form .smu-fieldicon {
    position: absolute;
    top: var(--a-label-h);
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: var(--a-field-h);
    font-size: 15px;
    color: var(--a-faint);
    pointer-events: none;
    transition: color .22s var(--a-ease);
}

body.smu-auth .form form .form-group:focus-within .smu-fieldicon {
    color: var(--a-coral-ink);
}

body.smu-auth .form form .form-group.hasError .smu-fieldicon {
    color: var(--a-danger);
}

/* show / hide password — a small chip on the right edge of the field */
body.smu-auth .form form #togglePassword {
    position: absolute;
    top: var(--a-label-h);
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    height: var(--a-field-h);
    padding: 0 10px;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--a-muted);
    cursor: pointer;
    transition: color .2s var(--a-ease);
}

body.smu-auth .form form #togglePassword:hover {
    color: var(--a-coral-ink);
}

/* Validation text. jQuery .fadeIn()/.fadeOut() owns `display` — never set it. */
body.smu-auth .form form span.error {
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--a-danger);
}

/* MVC unobtrusive validation renders into <code> on the reset views */
body.smu-auth .login code {
    display: block;
    margin-top: 7px;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--a-sans);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--a-danger);
    white-space: normal;
}

body.smu-auth .login code:empty {
    display: none;
}

/* ------------------------------------------------------------------ CTA */
body.smu-auth .form form .CTA {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
}

body.smu-auth .form form .CTA a.switch {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--a-muted);
    border-bottom: 1px solid transparent;
    transition: color .2s var(--a-ease), border-color .2s var(--a-ease);
}

body.smu-auth .form form .CTA a.switch:hover,
body.smu-auth .form form .CTA a.switch:focus {
    color: var(--a-coral-ink);
    border-bottom-color: var(--a-coral);
}

/* -------------------------------------------------------------- BUTTONS */
/* .button is the login/reset submit; ResetoFjalkalimin uses a bare
   <input type=submit>; the 2FA and role views use .button-89. One look. */
body.smu-auth .button,
body.smu-auth .form form .CTA input[type=submit],
body.smu-auth .login .button-89 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 168px;
    min-height: 50px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--a-r-pill);
    background: var(--a-pine);
    color: #FFFFFF;
    font-family: var(--a-sans);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none !important; /* .button-89 sets it !important */
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 14px 30px -16px rgba(12, 58, 45, .8);
    transition: transform .24s var(--a-ease), box-shadow .24s var(--a-ease), background-color .24s var(--a-ease);
}

body.smu-auth .login .button-89 {
    margin-top: 6px;
}

body.smu-auth .button:hover,
body.smu-auth .button:focus-visible,
body.smu-auth .form form .CTA input[type=submit]:hover,
body.smu-auth .form form .CTA input[type=submit]:focus-visible,
body.smu-auth .login .button-89:hover,
body.smu-auth .login .button-89:focus-visible {
    background: var(--a-coral-solid);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -16px rgba(224, 86, 61, .95);
}

body.smu-auth .button:active,
body.smu-auth .form form .CTA input[type=submit]:active,
body.smu-auth .login .button-89:active {
    transform: translateY(0);
}

body.smu-auth .button__text,
body.smu-auth .button__icon {
    transition: opacity .2s var(--a-ease);
}

body.smu-auth .button__icon {
    font-size: 12px;
}

body.smu-auth .button:hover .button__icon {
    animation: a-nudge .6s var(--a-ease);
}

@keyframes a-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

/* loading state: text out, spinner in */
body.smu-auth .button--loading {
    pointer-events: none;
}

body.smu-auth .button--loading .button__text,
body.smu-auth .button--loading .button__icon {
    opacity: 0;
}

body.smu-auth .button--loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: a-spin .7s linear infinite;
}

@keyframes a-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ LOCKED OUT */
/* #LockedUP carries an inline display:none and is revealed by .show(200).
   Never declare `display` here. */
body.smu-auth #LockedUP {
    max-width: 1040px;
    margin: 22px auto 0;
    padding: 22px 26px;
    border: 1px solid var(--a-line);
    border-left: 4px solid var(--a-danger);
    border-radius: var(--a-r);
    background: var(--a-paper);
    color: var(--a-ink);
    box-shadow: 0 20px 44px -30px rgba(7, 39, 30, .4);
}

/* the view writes color:black / forestgreen / font-size inline on these */
body.smu-auth #LockedUP h5 {
    margin: 0 0 10px;
    font-family: var(--a-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.024em;
    color: var(--a-heading) !important;
}

body.smu-auth #LockedUP p {
    margin: 0 0 6px;
    font-size: 13.5px !important;
    color: var(--a-muted);
}

body.smu-auth #LockedUP p:last-child {
    margin-bottom: 0;
    color: var(--a-ok) !important;
}

body.smu-auth #LockedUP #timeLeftId,
body.smu-auth #LockedUP #msgNameId {
    color: var(--a-coral-ink);
    font-weight: 700;
}

/* ============================================================================
   SECONDARY PRE-AUTH SCREENS
   ZgjedhRolin / DefaultChangePassword / EmailAuthentication /
   GoogleAuthentication share one shape: a #rolidiv card with an h4 title, a
   #LineDiv accent rule and a centred body.
   ========================================================================== */
body.smu-auth .login #rolidiv {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 40px clamp(24px, 4vw, 46px) 44px;
    float: none;
    border-radius: var(--a-r-lg);
    background: var(--a-paper);
    border: 1px solid var(--a-line);
    box-shadow: 0 40px 90px -46px rgba(7, 39, 30, .5);
    overflow: hidden;
    animation: a-card-in .9s var(--a-ease-out) backwards;
}

body.smu-auth .login #rolidiv > h4 {
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--a-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.2;
    text-align: center;
    color: var(--a-heading);
}

/* #LineDiv is a legacy full-width navy bar; it becomes the coral rule */
body.smu-auth .login #LineDiv {
    width: 46px;
    height: 3px;
    padding: 0;
    margin: 0 auto 26px;
    float: none;
    border-radius: 2px;
    background: var(--a-coral);
}

/* the views pad with bare <br>s */
body.smu-auth .login #rolidiv > br,
body.smu-auth .login > br {
    display: none;
}

body.smu-auth .login #RoliChooseID {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

body.smu-auth .login #RoliChooseID label.radio-custom {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 15px 18px;
    border: 1px solid var(--a-line);
    border-radius: var(--a-r);
    background: var(--a-surface);
    cursor: pointer;
    transition: border-color .2s var(--a-ease), background-color .2s var(--a-ease), transform .2s var(--a-ease);
}

body.smu-auth .login #RoliChooseID label.radio-custom:hover,
body.smu-auth .login #RoliChooseID label.radio-custom:focus-within {
    border-color: var(--a-coral);
    transform: translateX(3px);
}

/* the view writes color / font-size / margin / top inline on this <b> */
body.smu-auth .login #RoliChooseID label.radio-custom b {
    margin: 0 !important;
    top: 0 !important;
    font-family: var(--a-sans);
    font-size: 14.5px !important;
    font-weight: 600;
    color: var(--a-ink) !important;
}

/* A native radio paints its own chrome; drawn here instead as a ring that
   takes a coral core when checked. The input keeps its name/value, so the
   `:radio[name=PerdoruesiLloji].change` handler is untouched. */
body.smu-auth .login #RoliChooseID input.option-input {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--a-line);
    border-radius: 50%;
    background: var(--a-paper);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s var(--a-ease), box-shadow .2s var(--a-ease);
}

body.smu-auth .login #RoliChooseID input.option-input::before,
body.smu-auth .login #RoliChooseID input.option-input::after {
    display: none;
}

body.smu-auth .login #RoliChooseID input.option-input:hover {
    border-color: var(--a-coral);
}

body.smu-auth .login #RoliChooseID input.option-input:checked {
    border-color: var(--a-coral);
    border-width: 6px;
    box-shadow: 0 0 0 3px rgba(224, 86, 61, .16);
}

body.smu-auth .login #RoliChooseID label.radio-custom:has(input:checked) {
    border-color: var(--a-coral);
    background: var(--a-paper);
}

/* the AJAX handler writes color inline on #infoDivID */
body.smu-auth .login #infoDivID {
    margin: 20px 0 0;
    font-size: 13.5px !important;
    line-height: 1.6;
    text-align: center;
    color: var(--a-coral-ink) !important;
}

/* stacked label + control for the 2FA / change-password forms */
body.smu-auth .login b.left {
    display: block;
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    color: var(--a-muted);
}

body.smu-auth .login .form-control {
    width: 100%;
    height: var(--a-field-h);
    padding: 0 16px;
    border: 1px solid var(--a-line);
    border-radius: var(--a-r);
    background: var(--a-surface);
    color: var(--a-ink);
    font-family: var(--a-sans);
    font-size: 15px;
    box-shadow: none;
    transition: border-color .22s var(--a-ease), background-color .22s var(--a-ease), box-shadow .22s var(--a-ease);
}

body.smu-auth .login .form-control::placeholder {
    color: var(--a-faint);
}

body.smu-auth .login .form-control:focus {
    outline: none;
    border-color: var(--a-coral);
    background: var(--a-paper);
    box-shadow: 0 0 0 3px rgba(224, 86, 61, .16);
}

/* the 2FA code fields hold a short numeric string — set them as a keypad
   entry. text-indent cancels the trailing letter-space so it reads centred. */
body.smu-auth .login #Code,
body.smu-auth .login #CodeDigitID {
    height: 64px;
    text-align: center;
    font-family: var(--a-serif);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .42em;
    text-indent: .42em;
}

/* these are codes, not quantities */
body.smu-auth .login input[type=number]::-webkit-outer-spin-button,
body.smu-auth .login input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.smu-auth .login input[type=number] {
    -moz-appearance: textfield;
}

body.smu-auth .login #countTime {
    margin: 18px 0 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--a-muted);
}

/* the 2FA views put their controls inside .row > .col-*-offset-*; neutralise
   the offsets so the field centres at every breakpoint */
body.smu-auth .login #rolidiv .row {
    margin-left: 0;
    margin-right: 0;
}

body.smu-auth .login #rolidiv .row > [class*="col-"] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 18px;
    left: auto;
    float: none;
    padding: 0;
}

/* ------------------------------------------------------- SERVER ALERTS */
/* _Alerts.cshtml writes background-color:#FFF and per-level colours inline */
body.smu-auth .login .alert {
    max-width: 620px;
    margin: 20px auto 0;
    padding: 16px 20px;
    border: 1px solid var(--a-line);
    border-left: 4px solid var(--a-coral);
    border-radius: var(--a-r);
    background: var(--a-paper) !important;
    color: var(--a-ink);
}

body.smu-auth .login .alert span {
    font-size: 13.5px !important;
}

body.smu-auth .login .alert-danger {
    border-left-color: var(--a-danger);
}

body.smu-auth .login .alert-success {
    border-left-color: var(--a-ok);
}

body.smu-auth .login .alert .close {
    color: var(--a-faint);
    opacity: .9;
    text-shadow: none;
}

/* ---------------------------------------------------------------- FOOTER */
.smu-auth__footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    padding: 26px clamp(18px, 4vw, 44px) 30px;
    text-align: center;
}

.smu-auth__footer p {
    margin: 0;
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--a-onbg-text);
}

.smu-auth__footer a {
    color: var(--a-onbg-strong);
    border-bottom: 1px solid var(--a-onbg-line);
}

.smu-auth__footer a:hover,
.smu-auth__footer a:focus {
    color: var(--a-coral-ink);
    border-bottom-color: var(--a-coral);
}

/* ============================================================================
   RESPONSIVE
   The card is not scaled down — it restacks. Below 992px the brand panel
   becomes a compact horizontal header strip above the form (crest and
   wordmark side by side) so the fields stay above the fold on a phone.
   ========================================================================== */
@media (max-width: 991px) {
    body.smu-auth section#formHolder > .row {
        grid-template-columns: 1fr;
    }

    body.smu-auth section#formHolder > .row > .brand {
        flex-direction: row;
        align-items: center;
        gap: 22px;
        padding: 26px clamp(22px, 5vw, 40px);
        justify-content: flex-start;
        /* the desktop panel is a tall photographic column; stacked it becomes
           a compact strip, so the min-height must go or the form is pushed
           most of a screen down the page */
        min-height: 0;
    }

    /* The desktop veil is a gradient of EXPOSURE that darkens toward the
       foot, where the wordmark sits. Stacked, the panel is a 130px strip -
       there is no vertical room for that gradient to do its work, and the
       wordmark can land over the brightest part of the photograph (sampled
       at rgb(238,233,155) there). So the strip gets a flatter, deeper veil
       and a slightly quieter photograph. */
    body.smu-auth section#formHolder .brand::before {
        background:
            radial-gradient(70% 120% at 88% 0%, rgba(224, 86, 61, .3) 0%, rgba(224, 86, 61, 0) 68%),
            linear-gradient(100deg, rgba(7, 39, 30, .9) 0%, rgba(9, 47, 37, .82) 55%, rgba(7, 39, 30, .88) 100%);
    }

    body.smu-auth section#formHolder .brand::after {
        opacity: .5;
    }

    body.smu-auth section#formHolder > .row > .brand a.logo::before {
        display: none;
    }

    body.smu-auth section#formHolder .brand .heading {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 18px;
        order: -1;
    }

    body.smu-auth section#formHolder .brand .heading > a {
        width: 66px;
        aspect-ratio: 0.86;
        padding: 10px 8px 8px;
    }

    body.smu-auth section#formHolder .brand .heading h3 {
        display: none;
    }

    /* the university's full name is long; it has to wrap inside the strip
       rather than push the crest off the card */
    body.smu-auth section#formHolder .brand a.logo {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 17px;
        line-height: 1.26;
    }
}

@media (max-width: 575px) {
    .smu-auth__top {
        gap: 10px;
        padding: 16px 16px 0;
    }

    .smu-auth__mark {
        font-size: 17px;
    }

    .smu-auth__top ul#languages a {
        padding: 5px 12px;
        font-size: 12px;
    }

    .smu-auth__wrap {
        align-items: flex-start;
        padding: 20px 14px 8px;
    }

    body.smu-auth section#formHolder {
        border-radius: 18px;
    }

    body.smu-auth section#formHolder > .row > .brand {
        gap: 16px;
        padding: 20px;
    }

    body.smu-auth section#formHolder .brand .heading > a {
        width: 54px;
        padding: 8px 6px 6px;
    }

    body.smu-auth section#formHolder .brand a.logo {
        font-size: 15px;
    }

    body.smu-auth section#formHolder > .row > .form {
        padding: 28px 22px 32px;
    }

    body.smu-auth .form form .CTA {
        gap: 14px;
    }

    body.smu-auth .button,
    body.smu-auth .form form .CTA input[type=submit],
    body.smu-auth .login .button-89 {
        width: 100%;
    }

    body.smu-auth .login #rolidiv {
        padding: 30px 20px 34px;
        border-radius: 18px;
    }

    body.smu-auth .login #Code,
    body.smu-auth .login #CodeDigitID {
        height: 58px;
        font-size: 21px;
        letter-spacing: .3em;
        text-indent: .3em;
    }
}

/* landscape phones: top-align the card */
@media (max-height: 620px) {
    .smu-auth__wrap {
        align-items: flex-start;
    }
}

/* --------------------------------------------------------- MOTION / PRINT */
@media (prefers-reduced-motion: reduce) {
    body.smu-auth *,
    body.smu-auth *::before,
    body.smu-auth *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    body.smu-auth::before,
    .smu-auth__top,
    .smu-auth__footer {
        display: none;
    }

    body.smu-auth {
        background: #FFFFFF;
        color: #000000;
    }
}