@charset "UTF-8";
/* ============================================================================
   SMU GJAKOVA — LOGIN + 2FA · "Heritage"
   ----------------------------------------------------------------------------
   Loaded by Views/Account/Login.cshtml, Views/Account/TwoFA.cshtml and
   Views/ResetPassword/ResetoFjalkalimin.cshtml, AFTER
   the shared Content/Login/style.css that _LoginLayOut.cshtml gives to all six
   pre-auth views. Because the <link> lives in those views, every rule here is
   page-scoped by inclusion — the other four views keep the legacy styling.
   The 2FA step reuses the card, crest band and tokens verbatim so the second
   screen of the sign-in flow is visibly the same surface as the first.

   Design: the login pattern shared by smu.uni-gjilan.net and smu.umib.net —
   ONE centred card on a soft warm page: a navy photographic band on top
   (campus photograph + scrim) carrying an arch-framed crest and the serif
   university name, the form below with uppercase kicker labels over filled
   inputs, and a crimson pill CTA. Palette: Gjakova navy × warm ivory ×
   Gjakova crimson. Type: Playfair Display + Source Sans 3.

   `!important` appears ONLY to beat inline style="" attributes in the shared
   layout that this change must not edit; each use is commented.

   JS-bound hooks preserved exactly (Login.cshtml script):
     .form-peice / .switched     — the login ⇄ reset crossfade
     a.switch                    — the toggle link
     label.active                — added on focus/value (labels are static
                                   here, so the class is styling-only)
     span.error                  — must default to display:none (fadeIn)
     .form-group.hasError        — invalid state
     .button / .button__text / .button--loading  — CTA + spinner
     #togglePassword #LoginId #SendMailId #LockedUP #msgNameId #timeLeftId
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
    --sl-navy: #0D2A4E;
    --sl-navy-deep: #081D39;
    --sl-cream: #F6F2E9;
    --sl-cream-2: #EFE9DC;
    --sl-paper: #FFFFFF;
    --sl-ink: #1C2434;
    --sl-heading: #122741;
    --sl-muted: #5D6678;
    --sl-on-navy: #F5F1E8;
    --sl-on-navy-dim: rgba(245, 241, 232, .8);
    --sl-red: #DE3F2E;
    --sl-red-deep: #B93325;
    --sl-red-bright: #FF6A57;
    --sl-gold: #E9B44C;
    --sl-line: #E2DACB;
    --sl-line-strong: #D5CCBA;
    --sl-r: 14px;
    --sl-r-lg: 24px;
    --sl-r-pill: 999px;
    --sl-r-arch: 999px 999px 12px 12px;
    --sl-accent-text: #C93424;         /* crimson as small type              */
    --sl-danger-tint: #FBEDEB;
    --sl-success-text: #1E7A46;
    --sl-chipglass: rgba(255, 255, 255, .75);
    --sl-page:
        radial-gradient(900px 540px at 92% -8%, rgba(201, 58, 49, .1), transparent 60%),
        radial-gradient(820px 560px at -6% 108%, rgba(13, 42, 78, .12), transparent 62%),
        linear-gradient(165deg, #FAF7F0 0%, #F6F2E9 55%, #EFE9DC 100%);
    --sl-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sl-display: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --sl-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --sl-ease: cubic-bezier(.22, .61, .36, 1);
    --sl-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------- 1b. DARK THEME */
/* Tokens only — the navy photo band is brand, not theme, and stays put.
   State comes from <html data-theme="dark"> (pre-paint snippet in the view,
   persisted by Scripts/smu-theme.js under the SMUTheme key). */
:root[data-theme="dark"] {
    --sl-cream: #16233A;               /* filled inputs                      */
    --sl-cream-2: #182740;
    --sl-paper: #12213A;               /* the card                           */
    --sl-ink: #E7EDF8;
    --sl-heading: #F4F7FC;
    --sl-muted: #9AA7BD;
    --sl-line: rgba(255, 255, 255, .12);
    --sl-line-strong: rgba(255, 255, 255, .22);
    --sl-accent-text: #FF8272;
    --sl-danger-tint: rgba(222, 63, 46, .16);
    --sl-success-text: #6FD09A;
    --sl-chipglass: rgba(13, 24, 42, .75);
    --sl-page:
        radial-gradient(900px 540px at 92% -8%, rgba(222, 63, 46, .12), transparent 60%),
        radial-gradient(820px 560px at -6% 108%, rgba(46, 96, 172, .16), transparent 62%),
        linear-gradient(165deg, #0D1930 0%, #0A1424 55%, #081020 100%);
}

/* ---------------------------------------------------- 2. PAGE GROUND / BASE */
html {
    height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--sl-page);
    background-attachment: fixed;
    font-family: var(--sl-sans);
    color: var(--sl-ink);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(201, 58, 49, .2);
}

:focus-visible {
    outline: 2px solid var(--sl-red);
    outline-offset: 3px;
    border-radius: 4px;
}

/* the legacy sheet caps .container at 900px; this page manages its own width */
.container.body-content {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* ------------------------------------------------- 3. LAYOUT CHROME RESKIN */
/* language switcher (markup owned by _LoginLayOut.cshtml) */
#languages {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 50;
    margin: 0;
    padding: 5px 8px;
    list-style: none;
    border: 1px solid var(--sl-line-strong);
    border-radius: var(--sl-r-pill);
    background: var(--sl-chipglass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px -14px rgba(28, 24, 12, .4);
    /* !important: the ul/li carry inline color/font-size styles in the layout */
    color: transparent !important;
    font-size: 0 !important;
}

    #languages li {
        color: var(--sl-line-strong) !important; /* the " | " text node on the li */
        font-size: .72rem !important;
    }

    #languages a {
        display: inline-block;
        padding: 4px 12px;
        border-radius: var(--sl-r-pill);
        color: var(--sl-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-decoration: none;
        transition: color .2s var(--sl-ease), background-color .2s var(--sl-ease);
    }

        #languages a:hover, #languages a:focus {
            color: var(--sl-accent-text);
            background: var(--sl-cream);
            text-decoration: none;
        }

/* light/dark toggle — fixed opposite the language pill; synced by
   Scripts/smu-theme.js */
.smu-themetoggle {
    position: fixed;
    top: 18px;
    left: 22px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--sl-line-strong);
    border-radius: 50%;
    background: var(--sl-chipglass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px -14px rgba(28, 24, 12, .4);
    color: var(--sl-heading);
    cursor: pointer;
    transition: color .2s var(--sl-ease), transform .2s var(--sl-ease);
}

    .smu-themetoggle:hover, .smu-themetoggle:focus {
        color: var(--sl-accent-text);
        transform: rotate(15deg);
    }

    .smu-themetoggle i {
        font-size: .95rem;
    }

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

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

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

/* footer strip (markup owned by _LoginLayOut.cshtml) */
#footer.navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 0;
    margin: 0;
    background: transparent;
    border: 0;
    pointer-events: none;
}

    #footer.navbar p {
        padding: 10px 0 12px !important;      /* inline padding-top:14px on the <p> */
        margin: 0;
        text-align: center;
        color: var(--sl-muted) !important;    /* inline color:#3E5989 on the <p> */
        font-size: .74rem;
        letter-spacing: .04em;
        pointer-events: auto;
    }

        #footer.navbar p a {
            color: var(--sl-red) !important;  /* inline color:#3E5989 on the <a> */
            font-weight: 700;
            text-decoration: none;
        }

/* ------------------------------------------------------------ 4. THE STAGE */
.smu-auth {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 76px clamp(16px, 4vw, 48px) 72px;
}

/* the aurora background of the previous design is gone — keep the wrapper
   inert so the markup contract stays stable */
.smu-auth__bg,
.smu-auth__orb {
    display: none;
}

/* ------------------------------------------------------------- 5. THE CARD */
.smu-auth__card {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 600px;
    border: 1px solid var(--sl-line);
    border-radius: var(--sl-r-lg);
    background: var(--sl-paper);
    box-shadow: 0 46px 110px -44px rgba(10, 18, 34, .55), 0 2px 8px rgba(28, 24, 12, .08);
    overflow: hidden;
    animation: slg-rise .7s var(--sl-ease-out) backwards;
}

/* ----- navy photo band (both reference logins) */
.smu-auth__brand {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 30px 34px;
    background-image:
        linear-gradient(100deg, rgba(8, 29, 57, .96) 0%, rgba(13, 42, 78, .82) 55%, rgba(8, 29, 57, .6) 100%),
        url("../../Images/Edu.jpg");
    background-size: auto, cover;
    background-position: center, center 30%;
    border-bottom: 3px solid var(--sl-red);
    overflow: hidden;
}

/* crest in the arch frame */
.smu-auth__crest {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 86px;
    border-radius: var(--sl-r-arch);
    background: var(--sl-paper);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
    transition: transform .3s var(--sl-ease);
    animation: slg-rise .7s var(--sl-ease-out) .08s backwards;
}

    .smu-auth__crest img {
        width: 52px;
        height: auto;
    }

    .smu-auth__crest:hover {
        transform: translateY(-3px);
    }

.smu-auth__brandtext {
    position: relative;
    z-index: 1;
    min-width: 0;
    animation: slg-rise .7s var(--sl-ease-out) .16s backwards;
}

.smu-auth__kicker {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sl-red-bright);
}

/* the serif university name with the crimson full stop (Mitrovica) */
.smu-auth__brandtext h1 {
    margin: 8px 0 0;
    font-family: var(--sl-serif);
    font-size: clamp(1.4rem, 3.6vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    text-align: left; /* legacy style.css centres every h1 */
    color: var(--sl-on-navy);
    background: none;
    -webkit-text-fill-color: currentColor;
}

    .smu-auth__brandtext h1::after {
        content: ".";
        color: var(--sl-red-bright);
    }

.smu-auth__brandtext p {
    margin: 4px 0 0;
    font-size: 1rem;
    color: var(--sl-on-navy-dim);
}

/* ----- the two stacked form panels */
.smu-auth__forms {
    position: relative;
    display: grid;
    padding: clamp(30px, 4.5vw, 44px) clamp(24px, 4.5vw, 44px) clamp(34px, 4.5vw, 46px);
}

    /* both panels share the cell; .switched crossfades away */
    .smu-auth__forms .form-peice {
        grid-area: 1 / 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .34s var(--sl-ease), transform .34s var(--sl-ease), visibility 0s linear 0s;
    }

        .smu-auth__forms .form-peice.switched {
            opacity: 0;
            visibility: hidden;
            transform: translateY(14px);
            pointer-events: none;
            transition: opacity .34s var(--sl-ease), transform .34s var(--sl-ease), visibility 0s linear .34s;
        }

/* crimson rule + serif title (Mitrovica form head) */
.smu-auth__title {
    position: relative;
    margin: 0 0 4px;
    padding-top: 18px;
    font-family: var(--sl-display);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--sl-heading);
    text-align: left;
}

    .smu-auth__title::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 36px;
        height: 3px;
        background: var(--sl-red);
    }

.smu-auth__hint {
    margin: 0 0 26px;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sl-muted);
}

/* --------------------------------------------------------------- 6. FIELDS */
.smu-auth .form-group {
    position: relative;
    margin: 0 0 24px;
    padding-top: 0;
}

/* static kicker label above the field (both references) */
.smu-auth label {
    position: static;
    display: block;
    margin: 0 0 7px;
    font-family: var(--sl-display);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sl-muted);
    cursor: pointer;
    pointer-events: auto;
    transition: color .2s var(--sl-ease);
}

    /* the page script toggles .active on focus/value — here it only tints */
    .smu-auth label.active {
        color: var(--sl-navy);
    }

.smu-auth .form-group:focus-within label {
    color: var(--sl-accent-text);
}

/* filled input (Mitrovica) */
.smu-auth input:not([type=submit]) {
    display: block;
    width: 100%;
    height: 58px;
    padding: 0 118px 0 18px;
    background: var(--sl-cream);
    border: 1px solid var(--sl-line);
    border-radius: var(--sl-r);
    color: var(--sl-heading);
    font-family: var(--sl-sans);
    font-size: 1.18rem;
    caret-color: var(--sl-accent-text);
    transition: border-color .25s var(--sl-ease), background-color .25s var(--sl-ease), box-shadow .25s var(--sl-ease);
}

    .smu-auth input:not([type=submit]):focus {
        background: var(--sl-paper);
        border-color: var(--sl-navy);
        box-shadow: 0 0 0 3px rgba(13, 42, 78, .12);
        outline: none;
    }

    /* Chrome autofill on the cream field */
    .smu-auth input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px var(--sl-cream) inset;
        -webkit-text-fill-color: var(--sl-heading);
        caret-color: var(--sl-heading);
        transition: background-color 9999s ease-in-out 0s;
    }

/* validation */
.smu-auth span.error {
    display: none; /* jQuery fadeIn() shows it */
    position: absolute;
    right: 2px;
    bottom: -19px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--sl-accent-text);
}

.smu-auth .form-group.hasError input {
    border-color: var(--sl-red) !important; /* matches legacy contract */
    background: var(--sl-danger-tint);
}

.smu-auth .form-group.hasError label {
    color: var(--sl-red) !important;
}

/* show-password control, inside the field on the right */
.smu-auth #togglePassword {
    position: absolute;
    right: 14px;
    bottom: 20px;
    z-index: 1;
    font-size: .8rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sl-muted);
    cursor: pointer;
    transition: color .2s var(--sl-ease);
}

    .smu-auth #togglePassword:hover {
        color: var(--sl-accent-text);
        cursor: pointer;
    }

/* ------------------------------------------------------------------ 7. CTA */
.smu-auth .CTA {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.smu-auth .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    min-width: 180px;
    padding: 13px 34px;
    border: 0;
    border-radius: var(--sl-r-pill);
    background: var(--sl-red);
    box-shadow: 0 14px 30px -14px rgba(201, 58, 49, .75);
    cursor: pointer;
    transition: background-color .25s var(--sl-ease), transform .25s var(--sl-ease), box-shadow .25s var(--sl-ease);
}

    .smu-auth .button:hover, .smu-auth .button:focus {
        background: var(--sl-red-deep);
        transform: translateY(-2px);
        box-shadow: 0 20px 38px -14px rgba(201, 58, 49, .85);
    }

    .smu-auth .button:active {
        transform: translateY(0);
        background: var(--sl-red-deep); /* legacy sheet swaps :active to green */
    }

.smu-auth .button__text {
    font-family: var(--sl-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    transition: opacity .2s var(--sl-ease), visibility .2s var(--sl-ease);
}

.smu-auth .button--loading .button__text {
    visibility: hidden;
    opacity: 0;
}

.smu-auth .button--loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: slg-spin .8s linear infinite;
}

.smu-auth a.switch {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--sl-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--sl-line-strong);
    padding-bottom: 2px;
    transition: color .2s var(--sl-ease), border-color .2s var(--sl-ease);
}

    .smu-auth a.switch:hover, .smu-auth a.switch:focus {
        color: var(--sl-accent-text);
        border-bottom-color: var(--sl-accent-text);
        text-decoration: none;
    }

/* -------------------------------------------------------- 8. LOCKOUT ALERT */
.smu-auth #LockedUP {
    width: 100%;
    max-width: 600px;
    margin: 18px 0 0;
    padding: 20px 26px;
    border: 1px solid rgba(201, 58, 49, .35);
    border-left: 3px solid var(--sl-red);
    border-radius: var(--sl-r);
    background: var(--sl-danger-tint);
    color: var(--sl-ink);
    box-shadow: var(--sl-r) 0 0 transparent, 0 18px 44px -24px rgba(28, 24, 12, .3);
    text-shadow: none;
}

    .smu-auth #LockedUP h5 {
        margin: 0 0 8px;
        font-family: var(--sl-serif);
        font-weight: 800;
        color: var(--sl-heading) !important; /* legacy markup carried inline color:black */
    }

    .smu-auth #LockedUP p {
        margin: 0 0 4px;
        font-size: 1.05rem !important;
        color: var(--sl-ink);
    }

    .smu-auth #LockedUP .smu-auth__retry {
        color: var(--sl-success-text);
        font-weight: 700;
    }

/* ------------------------------------------------ 8b. TWO-STEP VERIFICATION */
/* Views/Account/TwoFA.cshtml. Same card and crest band as the login; what
   changes is the body: a shield medallion, a centred head, and the code as six
   separate digit boxes instead of one number field (the old markup used a
   single <input type=number>, complete with spinner arrows). */
.smu-2fa {
    text-align: center;
}

    /* the shield medallion, arch-framed like the crest above it */
    .smu-2fa__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 70px;
        margin-bottom: 4px;
        border: 1px solid var(--sl-line);
        border-radius: var(--sl-r-arch);
        background: var(--sl-cream);
        color: var(--sl-navy);
        font-size: 1.5rem;
        animation: slg-rise .7s var(--sl-ease-out) .1s backwards;
    }

:root[data-theme="dark"] .smu-2fa__badge {
    color: var(--sl-on-navy);
}

/* the shared title/hint, recentred for this page (the login sets them left,
   with the crimson rule pinned to the left edge) */
.smu-2fa .smu-auth__title {
    text-align: center;
    padding-top: 22px;
}

    .smu-2fa .smu-auth__title::before {
        left: 50%;
        transform: translateX(-50%);
    }

.smu-2fa .smu-auth__hint {
    margin-bottom: 30px;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 38ch;
    margin-inline: auto;
}

/* ----- the six digit boxes */
.smu-otp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 8px;
}

/* These carry `.smu-auth .smu-otp` on purpose: section 6's field rule
   `.smu-auth input:not([type=submit])` is (0,2,1) and would otherwise impose
   width:100% plus the 118px right padding it reserves for the show-password
   toggle, stretching every digit box across the card. */
.smu-auth .smu-otp .smu-otp__box {
    width: 54px;
    height: 66px;
    padding: 0;
    border: 1.5px solid var(--sl-line-strong);
    border-radius: var(--sl-r);
    background: var(--sl-cream);
    color: var(--sl-heading);
    font-family: var(--sl-display);
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
    caret-color: var(--sl-accent-text);
    transition: border-color .2s var(--sl-ease), background-color .2s var(--sl-ease),
                box-shadow .2s var(--sl-ease), transform .2s var(--sl-ease);
    /* the boxes are type=text + inputmode=numeric, so no spinner to strip */
    -moz-appearance: textfield;
    appearance: textfield;
}

    .smu-auth .smu-otp .smu-otp__box:focus {
        outline: none;
        border-color: var(--sl-navy);
        background: var(--sl-paper);
        box-shadow: 0 0 0 3px rgba(13, 42, 78, .12);
        transform: translateY(-2px);
    }

    /* a filled box reads as done */
    .smu-auth .smu-otp .smu-otp__box.is-filled {
        border-color: var(--sl-navy);
        background: var(--sl-paper);
    }

/* the classic 3 + 3 split */
.smu-otp__sep {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--sl-line-strong);
    flex: 0 0 auto;
}

/* wrong code: the boxes shake, then the script clears them */
.smu-auth .smu-otp.is-error .smu-otp__box {
    border-color: var(--sl-red);
    background: var(--sl-danger-tint);
    color: var(--sl-red);
}

.smu-otp.is-error {
    animation: slg-shake .4s var(--sl-ease);
}

/* accepted: settle to navy while the redirect runs */
.smu-auth .smu-otp.is-ok .smu-otp__box {
    border-color: var(--sl-navy);
    background: var(--sl-navy);
    color: var(--sl-on-navy);
}

.smu-otp.is-busy {
    opacity: .6;
    pointer-events: none;
}

/* ----- the status line under the boxes */
.smu-2fa__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 26px;
    margin: 14px 0 0;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--sl-muted);
}

    .smu-2fa__status i {
        color: var(--sl-accent-text);
    }

    .smu-2fa__status.is-error {
        color: var(--sl-accent-text);
    }

    .smu-2fa__status.is-ok {
        color: var(--sl-success-text);
    }

.smu-2fa__spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(13, 42, 78, .25);
    border-top-color: var(--sl-navy);
    border-radius: 50%;
    animation: slg-spin .8s linear infinite;
}

.smu-2fa__actions {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--sl-line);
}

/* --------------------------------------------- 8c. RESET PASSWORD (GUID) */
/* Views/ResetPassword/ResetoFjalkalimin.cshtml — the page the e-mailed reset
   link opens. Same card as the login; differences: a server-posted form with
   MVC unobtrusive validation, a show-password toggle on BOTH fields, and the
   TempData alerts rendered under the card. */

/* never style the hidden UserId field as a filled input */
.smu-auth input[type=hidden] {
    display: none !important; /* beats the display:block field rule (0,2,1) */
}

/* input + its reveal toggle; the toggle is centred on the field itself so
   the validation message below can sit in normal flow */
.smu-auth__field {
    position: relative;
}

.smu-auth .smu-auth__reveal {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 1;
    font-size: .8rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: line-through;     /* struck = hidden, as on the login */
    color: var(--sl-muted);
    cursor: pointer;
    user-select: none;
    transition: color .2s var(--sl-ease);
}

    .smu-auth .smu-auth__reveal.is-on {
        text-decoration: none;
    }

    .smu-auth .smu-auth__reveal:hover,
    .smu-auth .smu-auth__reveal:focus-visible {
        color: var(--sl-accent-text);
    }

/* MVC validation (server render + jquery.validate.unobtrusive) */
.smu-auth .smu-auth__valmsg {
    display: block;
    margin-top: 7px;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
    color: var(--sl-accent-text);
}

    .smu-auth .smu-auth__valmsg.field-validation-valid {
        display: none;
    }

.smu-auth input.input-validation-error {
    border-color: var(--sl-red) !important; /* matches .hasError contract */
    background: var(--sl-danger-tint);
}

.smu-auth .form-group:has(.input-validation-error) label {
    color: var(--sl-red);
}

/* secondary link — styled like the login's a.switch (no JS bound here) */
.smu-auth a.smu-auth__link {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--sl-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--sl-line-strong);
    padding-bottom: 2px;
    transition: color .2s var(--sl-ease), border-color .2s var(--sl-ease);
}

    .smu-auth a.smu-auth__link:hover, .smu-auth a.smu-auth__link:focus {
        color: var(--sl-accent-text);
        border-bottom-color: var(--sl-accent-text);
        text-decoration: none;
    }

.smu-auth .button[disabled] {
    cursor: progress;
    transform: none;
}

/* the hint on this page is a sentence ("choose a new password…"), not the
   login's uppercase kicker, so it is set as body copy — as on the 2FA step */
.smu-reset .smu-auth__hint {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

/* the password rules under the first field; they step aside while a
   validation message is showing, because that message repeats them */
.smu-reset__rules {
    margin: 7px 0 0;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--sl-muted);
}

.smu-auth .smu-auth__valmsg.field-validation-error + .smu-reset__rules {
    display: none;
}

/* "this link is no longer active" — the state without a model */
.smu-reset__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 5px 14px;
    border: 1px solid rgba(201, 58, 49, .3);
    border-radius: var(--sl-r-pill);
    background: var(--sl-danger-tint);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sl-accent-text);
}

/* the CTA there is a link, not a <button> */
.smu-auth a.button,
.smu-auth a.button:hover,
.smu-auth a.button:focus {
    text-decoration: none;
}

/* TempData alerts (Views/Shared/_Alerts.cshtml) under the card */
.smu-auth__alerts {
    width: 100%;
    max-width: 600px;
}

    .smu-auth__alerts:empty {
        display: none;
    }

    .smu-auth__alerts .row {
        margin: 0;
    }

    .smu-auth__alerts [class*="col-"] {
        padding: 0;
    }

    .smu-auth__alerts .alert {
        margin: 18px 0 0;
        padding: 16px 44px 16px 22px;
        border: 1px solid var(--sl-line);
        border-left: 3px solid var(--sl-navy);
        border-radius: var(--sl-r);
        background: var(--sl-paper) !important; /* inline background-color:#FFF in _Alerts */
        color: var(--sl-ink);
        box-shadow: 0 18px 44px -24px rgba(28, 24, 12, .3);
        animation: slg-rise .5s var(--sl-ease-out) backwards;
    }

        .smu-auth__alerts .alert span {
            font-family: var(--sl-sans);
            font-size: 1rem !important; /* inline font-size:15px in _Alerts */
            font-weight: 600;
        }

        .smu-auth__alerts .alert-danger {
            border-color: rgba(201, 58, 49, .35);
            border-left-color: var(--sl-red);
            background: var(--sl-danger-tint) !important;
        }

            .smu-auth__alerts .alert-danger span {
                color: var(--sl-accent-text) !important; /* inline color:red */
            }

        .smu-auth__alerts .alert-success {
            border-left-color: var(--sl-success-text);
        }

            .smu-auth__alerts .alert-success span {
                color: var(--sl-success-text) !important; /* inline color:green */
            }

        .smu-auth__alerts .alert-warning {
            border-left-color: var(--sl-gold);
        }

        .smu-auth__alerts .alert .close {
            position: absolute;
            top: 12px;
            right: 16px;
            color: var(--sl-muted);
            opacity: .8;
            text-shadow: none;
        }

    .smu-auth__alerts .alert {
        position: relative;
    }

/* ---------------------------------------------------------- 9. RESPONSIVE */
@media (max-width: 575px) {
    .smu-otp {
        gap: 7px;
    }

    .smu-auth .smu-otp .smu-otp__box {
        width: 100%;
        max-width: 48px;
        height: 58px;
        font-size: 1.4rem;
    }

    .smu-otp__sep {
        width: 8px;
    }

    #languages {
        top: 12px;
        right: 12px;
    }

    .smu-auth {
        padding-inline: 14px;
    }

    .smu-auth__brand {
        gap: 16px;
        padding: 24px 22px;
    }

    .smu-auth__crest {
        width: 62px;
        height: 70px;
    }

        .smu-auth__crest img {
            width: 42px;
        }

    .smu-auth__brandtext h1 {
        font-size: 1.05rem;
    }

    .smu-auth__forms {
        padding: 26px 20px 30px;
    }

    .smu-auth__title {
        font-size: 1.3rem;
    }

    .smu-auth .CTA {
        flex-direction: column;
        align-items: stretch;
    }

        .smu-auth .CTA .button {
            width: 100%;
        }

        .smu-auth .CTA a.switch,
        .smu-auth .CTA a.smu-auth__link {
            align-self: center;
        }
}

/* --------------------------------------------------------------- 10. MOTION */
@keyframes slg-rise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slg-spin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes slg-shake {
    10%, 90% {
        transform: translateX(-2px);
    }

    20%, 80% {
        transform: translateX(4px);
    }

    30%, 50%, 70% {
        transform: translateX(-7px);
    }

    40%, 60% {
        transform: translateX(7px);
    }
}

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