/* ==========================================================================
   login.css
   Account/Login. Replaces the five <style> blocks the view used to carry, most
   of which were a copy of the block _LayoutSite already emits on every page
   (nav, ul, li, .form-control, .modal-content, span, a ...). Only the rules
   this screen genuinely needs are here, and they are scoped under .lgn so they
   cannot reach the rest of the site.

   The shell's own block is still above this one in the cascade and is global,
   so a few rules need !important to get past `a { color: ... !important }` and
   `span { color: #d20001 }`.

   In Arabic the shell puts `direction: rtl` on the body, so the logical
   properties and flex alignments below mirror on their own.
   ========================================================================== */

/* On :root, not on .lgn: the dialogs and the full-page loader are siblings of
   .lgn, not children, so tokens scoped to .lgn would be empty inside them and
   every colour and border declared with one would be dropped. This file is
   only served on the login page. */
:root {
    --lg-brand: #00849b;
    --lg-brand-dark: #056274;
    --lg-brand-soft: #e8f5f8;
    --lg-accent: #710f1c;
    --lg-ink: #1f2a44;
    --lg-muted: #6b7a90;
    --lg-line: #dfe7ef;
    --lg-danger: #c0392b;
    --lg-radius: 18px;
}

/* -- page frame ----------------------------------------------------------- */

/* Brand-teal gradient field with frosted panels standing in for an
   application being filled in and a request moving through review. SVG, so
   it is a few KB instead of 100KB and stays sharp on any screen. The original
   plant illustration is still on disk as customer-bk.png. */
body.crm_body_bg {
    background-image: url(../assets/img/login-img/eservices-bg.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    /* matches the darkest corner of the gradient, so there is no pale flash
       before the image paints */
    background-color: #04384b;
}

/* The shell puts its nav inside a Bootstrap .row, whose -15px side margins
   push the strip past both edges and give the page a sideways scroll. Fixed
   here rather than in the layout so only this screen is affected. */
body.crm_body_bg .menu-bar > .row {
    margin-left: 0;
    margin-right: 0;
}

.lgn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* the shell's nav strip is 40px */
    min-height: calc(100vh - 40px);
    padding: 28px 16px;
    color: var(--lg-ink);
}

.lgn-card {
    width: 100%;
    max-width: 940px;
    background: #fff;
    border-radius: var(--lg-radius);
    /* a quieter echo of the old 99px corner */
    border-top-left-radius: 52px;
    box-shadow: 0 2px 6px rgba(16, 42, 56, .06), 0 22px 50px rgba(16, 42, 56, .16);
    overflow: hidden;
}

    /* brand rule across the top of the card */
    .lgn-card::before {
        content: "";
        display: block;
        height: 5px;
        background: linear-gradient(90deg, var(--lg-brand-dark), var(--lg-brand) 55%, #16a3ba);
    }

/* The crest sits on a line with the title instead of centred above it. Stacked
   it made a tall band across the card with nothing either side; on a row the
   same space carries both, and the card loses about 90px of empty height.
   The artwork itself has generous margins baked in, so it still reads large. */
.lgn-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 14px 26px;
    border-bottom: 1px solid var(--lg-line);
}

    /* the authority's crest and wordmark, unchanged */
    .lgn-head img {
        flex: 0 0 auto;
        width: auto;
        height: 132px;
        max-width: 46%;
    }

.lgn-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lg-accent);
}

/* -- the two panes -------------------------------------------------------- */

.lgn-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
    gap: 0;
    padding: 12px 10px 26px;
}

.lgn-pane {
    padding: 18px 26px;
    min-width: 0;
}

/* the hairline between the two ways in, with OR sitting on it */
.lgn-rule {
    position: relative;
    width: 1px;
    background: var(--lg-line);
    margin: 10px 0;
}

    .lgn-rule span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 5px 9px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--lg-muted) !important;
        background: #fff;
        border: 1px solid var(--lg-line);
        border-radius: 999px;
    }

/* -- fields --------------------------------------------------------------- */

.lgn .form-group {
    margin-bottom: 15px;
}

.lgn-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--lg-muted);
}

/* wraps the input so an icon and the reveal button can sit inside it */
.lgn-field {
    position: relative;
    display: block;
}

    .lgn-field > .lgn-field-icon {
        position: absolute;
        top: 50%;
        inset-inline-start: 13px;
        transform: translateY(-50%);
        font-size: 14px;
        color: #9aa7b8;
        pointer-events: none;
    }

/* the shell styles .form-control as a bare underline with square corners */
.lgn .form-control {
    height: auto;
    min-height: 46px;
    padding: 11px 14px;
    padding-inline-start: 38px;
    font-size: 14.5px;
    color: var(--lg-ink);
    background-color: #fff;
    border: 1px solid var(--lg-line);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .lgn .form-control::placeholder {
        color: #a6b1c0;
    }

    .lgn .form-control:focus {
        border-color: var(--lg-brand);
        box-shadow: 0 0 0 3px rgba(0, 132, 155, .14);
        outline: none;
    }

/* reveal the password - purely a view toggle, it changes nothing that is sent */
.lgn-reveal {
    position: absolute;
    top: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 14px;
    color: var(--lg-muted);
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

    .lgn-reveal:hover {
        color: var(--lg-brand-dark);
        background: var(--lg-brand-soft);
    }

    .lgn-reveal:focus {
        outline: 2px solid var(--lg-brand);
        outline-offset: 1px;
    }

.lgn .form-control.has-reveal {
    padding-inline-end: 46px;
}

/* -- buttons and links ---------------------------------------------------- */

.lgn .btn_1 {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #fff !important;
    background-color: var(--lg-brand);
    border: 1px solid var(--lg-brand);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}

    .lgn .btn_1:hover,
    .lgn .btn_1:focus {
        color: #fff !important;
        background-color: var(--lg-brand-dark) !important;
        border-color: var(--lg-brand-dark);
    }

    .lgn .btn_1:active {
        transform: translateY(1px);
    }

    .lgn .btn_1[disabled] {
        opacity: .7;
        cursor: not-allowed;
    }

/* the shell paints every <a> #8890B5 and every <span> red, which is what made
   the self-service links look like error text */
.lgn-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    margin: 14px 0 0;
    text-align: center;
}

    .lgn-links a {
        font-size: 13px;
        font-weight: 600;
        color: var(--lg-brand-dark) !important;
        text-decoration: none;
    }

        .lgn-links a:hover {
            color: var(--lg-brand-dark) !important;
            text-decoration: underline;
        }

        .lgn-links a span {
            color: inherit !important;
            font-weight: inherit;
        }

.lgn-signup {
    margin: 14px 0 0;
    font-size: 13.5px;
    color: var(--lg-muted);
    text-align: center;
}

    .lgn-signup a {
        font-weight: 700;
        color: var(--lg-brand) !important;
        text-decoration: none;
    }

        .lgn-signup a:hover {
            text-decoration: underline;
        }

        .lgn-signup a span {
            color: inherit !important;
        }

/* -- messages ------------------------------------------------------------- */

/* kept as a <span> carrying inline display:none so the page's own .show()
   still reveals it; the stylesheet only decides what it looks like */
.lgn-alert {
    display: block;
    margin-bottom: 14px;
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--lg-danger) !important;
    background: #fdecea;
    border: 1px solid #f3c4bf;
    border-radius: 10px;
}

.lgn-err {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lg-danger) !important;
}

/* -- UAE PASS pane -------------------------------------------------------- */
/* The block inside is the authority's UAE PASS sign-in and its wording, left
   exactly as it was. Only the box around it is styled. */

.lgn-pane-uae {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lgn .uae-pass {
    float: none;
    width: 100%;
    padding: 0;
    text-align: center;
}

    .lgn .uae-pass img {
        width: 100%;
        max-width: 260px;
        height: auto;
        margin: 0 auto;
        cursor: pointer;
        border-radius: 10px;
        transition: transform .15s ease, box-shadow .15s ease;
    }

        .lgn .uae-pass img:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(16, 42, 56, .16);
        }

    .lgn .uae-pass p.uae-txt-1 {
        max-width: 300px;
        margin: 16px auto 0;
        padding-top: 0;
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--lg-muted);
    }

.lgn .login_v2_sign_link {
    margin-top: 12px;
}

    .lgn .login_v2_sign_link a {
        font-size: 13px;
        color: var(--lg-brand-dark) !important;
    }

/* -- modals --------------------------------------------------------------- */

/* The two UAE PASS information dialogs keep the look they already had: the
   old stylesheet tinted the dialog itself as well as Bootstrap's backdrop. */
#imagemodal,
#imagemodalAr {
    background: #000000c2;
}

/* the shell sets .modal-content to square corners and no background */

.lgn-modal .modal-dialog {
    max-width: 480px;
}

.lgn-modal .modal-content {
    background: #fff;
    border: 0;
    border-radius: var(--lg-radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.lgn-modal .modal-header {
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(180deg, #fbfdfe, #f3f7f9);
    border-bottom: 1px solid var(--lg-line);
}

.lgn-modal .modal-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--lg-accent);
}

.lgn-modal .modal-body {
    padding: 20px 18px;
}

.lgn-modal .modal-note {
    margin: 0;
    font-size: 12.5px;
    color: var(--lg-muted);
}

.lgn-modal .form-control {
    min-height: 46px;
    padding: 11px 14px;
    font-size: 14.5px;
    border: 1px solid var(--lg-line);
    border-radius: 12px;
    background: #fff;
}

    .lgn-modal .form-control:focus {
        border-color: var(--lg-brand);
        box-shadow: 0 0 0 3px rgba(0, 132, 155, .14);
        outline: none;
    }

.lgn-modal .btn {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 12px;
}

.lgn-modal .btn-success {
    width: 100%;
    color: #fff !important;
    background-color: var(--lg-brand) !important;
    border-color: var(--lg-brand) !important;
}

    .lgn-modal .btn-success:hover {
        background-color: var(--lg-brand-dark) !important;
        border-color: var(--lg-brand-dark) !important;
    }

.lgn-modal .alert {
    font-size: 13px;
    border-radius: 10px;
}

/* the two choices behind "Sign up here" */
.lgn-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

    .lgn-choice a {
        text-decoration: none !important;
    }

    .lgn-choice .btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 104px;
        font-size: 13.5px;
        color: var(--lg-brand-dark) !important;
        background: var(--lg-brand-soft) !important;
        border: 1px solid #cfe7ec !important;
    }

        .lgn-choice .btn i {
            font-size: 22px;
        }

        .lgn-choice .btn:hover {
            color: #fff !important;
            background: var(--lg-brand) !important;
            border-color: var(--lg-brand) !important;
        }

/* the small spinners the forgot-password and forgot-username panels show
   while their request is in flight */
#loaderdeprt,
#loaderdeprt1 {
    width: 26px;
    height: 26px;
    margin: 14px auto 0;
    border: 3px solid #e3ebf2;
    border-top-color: var(--lg-brand);
    border-radius: 50%;
    animation: lgn-spin .8s linear infinite;
}

/* -- full page loader ----------------------------------------------------- */
/* the page toggles this with jQuery .show()/.hide(), which writes
   display:block, so the centring cannot rely on flex here */

.modalloader {
    position: fixed;
    z-index: 2000;
    inset: 0;
    background: rgba(16, 42, 56, .45);
}

.centerloader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    margin: 0;
    padding: 18px 24px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
    text-align: center;
}

.lgn-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border: 3px solid #e3ebf2;
    border-top-color: var(--lg-brand, #00849b);
    border-radius: 50%;
    animation: lgn-spin .8s linear infinite;
}

.centerloader p {
    margin: 11px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2a44;
}

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

/* -- narrow screens ------------------------------------------------------- */

@media (max-width: 859px) {
    /* iOS Safari handles a fixed background badly, and on a phone the crop is
       so tight that holding it still buys nothing */
    body.crm_body_bg {
        background-attachment: scroll;
    }

    .lgn {
        min-height: 0;
        padding: 20px 14px 32px;
    }

    .lgn-grid {
        grid-template-columns: 1fr;
        padding: 6px 6px 20px;
    }

    .lgn-pane {
        padding: 14px 16px;
    }

    /* the rule turns from a column into a line between the two panes */
    .lgn-rule {
        width: auto;
        height: 1px;
        margin: 6px 20px;
    }

    .lgn-head {
        gap: 14px;
        padding: 12px 16px;
    }

        .lgn-head img {
            height: 86px;
        }

    .lgn-title {
        font-size: 18px;
    }

    .lgn-card {
        border-top-left-radius: 34px;
    }
}

@media (max-width: 420px) {
    .lgn-choice {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lgn .btn_1,
    .lgn .form-control,
    .lgn .uae-pass img {
        transition: none;
    }

    .lgn-spinner,
    #loaderdeprt,
    #loaderdeprt1 {
        animation-duration: 2.4s;
    }
}