/* Public pages brand styles (Option 1 - light glass).
   Used only by Login.aspx, User/Login.aspx, User/ForgotPassword.aspx, User/Registration.aspx and
   User/RegistrationConfirmation.aspx. Every rule is scoped under body.login-page (except @font-face).
   Page modifiers: lp-login, lp-forgot, lp-register, lp-confirm. */

@font-face {
    font-family: "FS Albert";
    src: url("../fonts/fsalbert/FSAlbert-Light.woff") format("woff"), url("../fonts/fsalbert/FSAlbert-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FS Albert";
    src: url("../fonts/fsalbert/FSAlbert-Regular.woff") format("woff"), url("../fonts/fsalbert/FSAlbert-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FS Albert";
    src: url("../fonts/fsalbert/FSAlbert-Bold.woff") format("woff"), url("../fonts/fsalbert/FSAlbert-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Base ---------- */

body.login-page {
    --lp-deep-sea: #2D13EA;
    --lp-gold: #FF7800;
    --lp-white: #FFFFFF;
    --lp-silver: #B9B9B9;
    --lp-black: #1D1D1D;
    --lp-text: #2B2B33;
    --lp-text-soft: #55556A;
    --lp-placeholder: #6E6E80;
    --lp-icon: #6E6E80;
    --lp-line: rgba(43, 43, 51, 0.28);
    --lp-tint: #F3F2FE;
    --lp-error: #D92D20;
    --lp-card-bg: rgba(255, 255, 255, 0.62);
    --lp-card-border: rgba(255, 255, 255, 0.75);
    --lp-field-fill: rgba(255, 255, 255, 0.5);
    --lp-field-autofill: #DAE1F2;
    --lp-button-bg: var(--lp-deep-sea);
    --lp-button-text: var(--lp-white);
    --lp-page-pad: clamp(16px, 3vh, 32px);
    --lp-card-pad: clamp(24px, 4vh, 48px);
    --lp-gap: clamp(12px, 2vh, 22px);
    --lp-logo-w: clamp(150px, 18vh, 210px);
    --lp-title-size: clamp(24px, 3.6vh, 34px);
    --lp-field-h: clamp(44px, 6vh, 46px);
    --lp-button-h: 50px;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background-color: #1A0E7A;
    font-family: "FS Albert", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lp-text);
    text-align: center;
}

body.login-page a,
body.login-page button,
body.login-page input,
body.login-page select,
body.login-page label {
    font-family: inherit;
}

body.login-page .lp-page {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--lp-page-pad) 10% var(--lp-page-pad) 32px;
    background-color: #1A0E7A;
    background-image: url("../Images/App/login-bg.jpg"), url("../Images/App/OTBg4.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 150% auto, cover;
    background-position: 100% 62%, center;
}

body.login-page .lp-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 470px;
    padding: var(--lp-card-pad) 48px;
    border: 1px solid var(--lp-card-border);
    border-radius: 18px;
    background-color: var(--lp-card-bg);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 24px 70px rgba(8, 3, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.login-page .lp-card {
        background-color: var(--lp-white);
    }
}

/* ---------- Header ---------- */

body.login-page .lp-header {
    margin-bottom: var(--lp-gap);
}

body.login-page .lp-logo img {
    display: block;
    width: var(--lp-logo-w);
    max-width: 100%;
    height: auto;
    margin: 0 auto clamp(8px, 1.5vh, 18px);
}

body.login-page .lp-app-name {
    display: block;
    font-size: var(--lp-title-size);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.2px;
    color: var(--lp-text);
}

body.login-page .lp-app-name-long {
    font-size: clamp(22px, 3.6vh, 28px);
}

body.login-page .lp-title {
    margin: 8px 0 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lp-text);
}

/* ---------- Message banner (lblErrorMsg) ---------- */

body.login-page #lblErrorMsg {
    display: block;
    margin: 0 0 var(--lp-gap);
    padding: 10px 14px 10px 44px;
    border: 1px solid var(--lp-error);
    border-radius: 8px;
    background-color: var(--lp-white);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23D92D20'/%3E%3Cpath d='M12 6.5v7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.3' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 20px 20px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--lp-black);
    text-align: center;
}

body.login-page #lblErrorMsg:empty {
    display: none;
}

body.login-page #lblErrorMsg.success {
    border-color: var(--lp-deep-sea);
    background-color: var(--lp-tint);
    background-image: none;
    padding-left: 14px;
}

/* ---------- Fields ---------- */

body.login-page .lp-field {
    position: relative;
    margin-bottom: var(--lp-gap);
}

body.login-page .lp-field label {
    display: block;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--lp-text-soft);
}

/* The input/select is the full-width field (fill, underline, radius); icons are overlaid on it. */
body.login-page .lp-input-wrap {
    position: relative;
}

body.login-page .lp-input-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color: var(--lp-icon);
    pointer-events: none;
    transition: color 0.15s;
}

body.login-page .lp-input-wrap:focus-within .lp-input-icon {
    color: var(--lp-deep-sea);
}

body.login-page .lp-input-spacer {
    display: none;
}

body.login-page .lp-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    height: var(--lp-field-h);
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-bottom: 1.5px solid var(--lp-line);
    border-radius: 8px 8px 0 0;
    background-color: var(--lp-field-fill);
    font-family: inherit;
    font-size: 16px;
    line-height: normal;
    color: var(--lp-text);
    text-align: center;
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s;
}

body.login-page .lp-input:focus {
    border-bottom-color: var(--lp-deep-sea);
}

body.login-page .lp-input-icon ~ .lp-input {
    padding-left: 44px;
    padding-right: 44px;
}

body.login-page .lp-input::placeholder {
    color: var(--lp-placeholder);
    opacity: 1;
}

body.login-page .lp-input:-ms-input-placeholder {
    color: var(--lp-placeholder);
}

body.login-page .lp-input:-webkit-autofill,
body.login-page .lp-input:-webkit-autofill:hover,
body.login-page .lp-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lp-text);
    caret-color: var(--lp-text);
    -webkit-box-shadow: 0 0 0 1000px var(--lp-field-autofill) inset;
    box-shadow: 0 0 0 1000px var(--lp-field-autofill) inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}

body.login-page select.lp-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    text-align-last: center;
    cursor: pointer;
}

body.login-page select.lp-select::-ms-expand {
    display: none;
}

body.login-page select.lp-select option {
    font-family: inherit;
    color: var(--lp-black);
    background-color: var(--lp-white);
}

body.login-page .lp-select-wrap:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236E6E80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    pointer-events: none;
}

/* Customizable select (where supported): brand-styled open list; other browsers keep the native list */
@supports (appearance: base-select) {
    body.login-page select.lp-select,
    body.login-page select.lp-select::picker(select) {
        appearance: base-select;
    }

    body.login-page select.lp-select {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.login-page select.lp-select::picker-icon {
        display: none;
    }

    body.login-page select.lp-select::picker(select) {
        box-sizing: border-box;
        margin: 4px 0 0;
        padding: 6px 0;
        border: 0;
        border-radius: 8px;
        background-color: var(--lp-white);
        box-shadow: 0 12px 32px rgba(29, 29, 29, 0.18);
        font-family: inherit;
        position-try-order: normal;
    }

    body.login-page select.lp-select option {
        padding: 10px 16px;
        font-size: 16px;
        text-align: left;
    }

    body.login-page select.lp-select option::checkmark {
        display: none;
    }

    body.login-page select.lp-select option:hover,
    body.login-page select.lp-select option:focus-visible {
        background-color: var(--lp-tint);
        color: var(--lp-deep-sea);
        outline: none;
    }

    body.login-page select.lp-select option:checked {
        font-weight: 700;
        color: var(--lp-deep-sea);
    }
}

body.login-page .lp-help,
body.login-page .lp-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 12px;
    margin-top: -11px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--lp-icon);
    cursor: pointer;
}

body.login-page .lp-help {
    border: 2px solid var(--lp-icon);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

body.login-page .lp-help:hover,
body.login-page .lp-toggle:hover {
    color: var(--lp-deep-sea);
    border-color: var(--lp-deep-sea);
}

body.login-page .lp-toggle svg {
    width: 22px;
    height: 22px;
}

body.login-page .lp-toggle .lp-eye-off,
body.login-page .lp-toggle[aria-pressed="true"] .lp-eye {
    display: none;
}

body.login-page .lp-toggle[aria-pressed="true"] .lp-eye-off {
    display: inline;
}

body.login-page .lp-tip {
    position: absolute;
    z-index: 5;
    right: 4px;
    bottom: calc(100% + 10px);
    width: 240px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: var(--lp-black);
    font-size: 14px;
    line-height: 1.4;
    color: var(--lp-white);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

body.login-page .lp-tip:after {
    content: "";
    position: absolute;
    top: 100%;
    right: 10px;
    border: 6px solid transparent;
    border-top-color: var(--lp-black);
}

body.login-page .lp-help:hover + .lp-tip,
body.login-page .lp-help:focus + .lp-tip,
body.login-page .lp-help.lp-open + .lp-tip {
    opacity: 1;
    visibility: visible;
    transform: none;
}

body.login-page .lp-hint {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--lp-gold);
}

body.login-page .lp-hint:empty {
    display: none;
}

/* ---------- Captcha ---------- */

body.login-page .lp-captcha-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 8px;
}

body.login-page .lp-captcha-img {
    box-sizing: border-box;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: var(--lp-field-h);
    padding: 2px 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--lp-tint);
    object-fit: contain;
}

body.login-page .lp-refresh {
    display: flex;
    flex: 0 0 var(--lp-field-h);
    align-items: center;
    justify-content: center;
    width: var(--lp-field-h);
    height: var(--lp-field-h);
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--lp-tint);
    color: var(--lp-deep-sea);
    cursor: pointer;
}

body.login-page .lp-refresh svg {
    width: 20px;
    height: 20px;
}

/* ---------- Buttons and links ---------- */

body.login-page .lp-button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    height: var(--lp-button-h);
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--lp-button-bg);
    border-radius: 6px;
    background-color: var(--lp-button-bg);
    box-shadow: 0 8px 20px rgba(45, 19, 234, 0.3);
    font-size: 18px;
    font-weight: 700;
    color: var(--lp-button-text);
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
}

body.login-page .lp-button:hover {
    filter: brightness(1.08);
}

body.login-page .lp-button:active {
    transform: translateY(1px);
}

body.login-page .lp-button:disabled {
    opacity: 0.4;
    cursor: default;
}

body.login-page .lp-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(12px, 2vh, 24px);
}

body.login-page .lp-links a {
    font-size: 16px;
    line-height: 1.5;
    color: var(--lp-deep-sea);
    text-decoration: none;
}

body.login-page .lp-links a:hover {
    text-decoration: underline;
}

body.login-page .lp-links a:first-child {
    position: relative;
    margin-right: 20px;
}

body.login-page .lp-links a:first-child:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background-color: var(--lp-gold);
    transform: rotate(45deg);
}

body.login-page .lp-help:focus-visible,
body.login-page .lp-toggle:focus-visible,
body.login-page .lp-refresh:focus-visible,
body.login-page .lp-links a:focus-visible {
    outline: 2px solid var(--lp-gold);
    outline-offset: 2px;
}

body.login-page .lp-button:focus-visible {
    outline: 3px solid var(--lp-gold);
    outline-offset: 3px;
}

/* ---------- Login (lp-login): screen-reader-only heading, empty username/password lines as in the design ---------- */

body.login-page.lp-login #txtUsername::placeholder,
body.login-page.lp-login #txtPassword::placeholder {
    color: transparent;
}

body.login-page.lp-login .lp-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Forgot password (lp-forgot): slightly tighter to fit short screens ---------- */

body.login-page.lp-forgot {
    --lp-gap: clamp(10px, 1.6vh, 22px);
}

body.login-page.lp-forgot .lp-title {
    margin-top: 4px;
    font-size: 18px;
}

/* ---------- Registration (lp-register) ---------- */

body.login-page.lp-register .lp-page {
    justify-content: center;
    padding-right: 32px;
    background-size: cover, cover;
    background-position: center, center;
}

body.login-page.lp-register {
    --lp-field-autofill: #E2DEEA;
}

body.login-page.lp-register .lp-card {
    max-width: 760px;
}

body.login-page.lp-register .lp-field label {
    text-align: left;
}

body.login-page.lp-register .lp-input,
body.login-page.lp-register select.lp-select {
    text-align: left;
    text-align-last: left;
    justify-content: flex-start;
}

body.login-page.lp-register #lblErrorMsg.success {
    padding-left: 44px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232D13EA'/%3E%3Ccircle cx='12' cy='7' r='1.4' fill='%23fff'/%3E%3Cpath d='M12 10.5v7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 20px 20px;
}

@media screen and (min-width: 992px) {
    body.login-page.lp-register .lp-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
    }
}

/* ---------- Registration confirmation (lp-confirm) ---------- */

body.login-page.lp-confirm .lp-page {
    justify-content: center;
    padding-right: 32px;
}

body.login-page.lp-confirm #lblErrorMsg {
    padding-left: 44px;
    border-color: var(--lp-deep-sea);
    background-color: var(--lp-tint);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232D13EA'/%3E%3Ccircle cx='12' cy='7' r='1.4' fill='%23fff'/%3E%3Cpath d='M12 10.5v7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

body.login-page.lp-confirm .lp-actions {
    display: flex;
    gap: 12px;
}

body.login-page.lp-confirm .lp-actions .lp-button {
    flex: 1 1 0;
}

body.login-page .lp-button.lp-button-secondary {
    border-color: var(--lp-deep-sea);
    background-color: var(--lp-white);
    box-shadow: none;
    color: var(--lp-deep-sea);
}

/* ---------- Small screens: centred card, normal scrolling ---------- */

@media screen and (max-width: 900px) {
    body.login-page .lp-page {
        justify-content: center;
        padding: 24px 16px;
        background-size: cover, cover;
        background-position: 40% center, center;
    }

    body.login-page .lp-card {
        padding: 32px 22px 28px;
    }

    body.login-page .lp-logo img {
        width: 170px;
    }

    body.login-page .lp-app-name {
        font-size: 28px;
    }
}