/* ------------------------------------------------------------------
   UI3 member login dialog.

   Loaded last in _Layout_UI3.cshtml so it can override, in order:
     bootstrap 5.2  ->  modalDialog.css  ->  smeModalDialogOverride.css
     ->  login.css  ->  newDesign.css
   Several of those are aggressive, so the selectors below are pinned
   to #login / #loginContent and a few declarations need !important:
   newDesign.css forces `border` + `border-radius` on every text input.

   The markup contract with Scripts/ModalDialog.js must not change:
   .modal-content / .modal-header / .modal-body are looked up by class
   and .modal-header's innerHTML is REPLACED with the dialog title plus
   a prepended .close button.
   ------------------------------------------------------------------ */

/* ---------------------------- overlay ---------------------------- */
#login.mpmodal {
    background-color: rgba(15, 23, 42, .62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 0 16px;
}

#login .lg-dialog {
    width: 100%;
    max-width: 460px;
    margin: 6vh auto 40px;
}

/* ----------------------------- card ------------------------------ */
#login .modal-content {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface, #fff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    animation-name: lgPopIn;
    animation-duration: .28s;
    animation-timing-function: ease-out;
}

@keyframes lgPopIn {
    from {
        opacity: 0;
        transform: translateY(-18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------- header ----------------------------- */
#login .modal-header {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 20px 52px;
    border: 0;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
}

    /* button is injected by ModalDialog.js, so it is styled blind */
    #login .modal-header .close {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        float: none;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.16);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        opacity: 1;
        text-shadow: none;
        cursor: pointer;
        transition: background .2s ease;
    }

        #login .modal-header .close:hover,
        #login .modal-header .close:focus {
            background: rgba(255,255,255,.3);
            color: #fff;
        }

/* ----------------------------- body ------------------------------ */
#login .modal-body {
    min-height: 0;
    padding: 26px 26px 28px;
    background: var(--surface, #fff);
    color: var(--text, #374151);
    font-weight: 400;
    text-align: right;
}

#login #loginContent {
    width: 100%;
    margin: 0;
}

#login .lg-intro {
    text-align: center;
    margin-bottom: 22px;
}

#login .lg-intro-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 23px;
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
    box-shadow: 0 10px 22px rgba(193,18,47,.26);
}

#login .lg-intro-title {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--text, #374151);
}

#login .lg-intro-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-secondary, #6B7280);
}

/* ---------------------------- fields ----------------------------- */
#login .lg-field {
    margin-bottom: 16px;
}

/*  .lg-label and the field box itself (height, radius, colours, focus
    ring, placeholder) come from fields-ui3.css - the same declarations
    the account pages and the panel forms use. Only what is specific to
    this dialog stays here: the leading icon and its padding, the
    show/hide password button and the captcha box sizes.             */

#login .lg-input {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    #login .lg-input > i {
        position: absolute;
        right: 14px;
        top: 15px;
        font-size: 14px;
        color: var(--text-muted, #9CA3AF);
        pointer-events: none;
        transition: color .2s ease;
    }

/* room for the leading icon and the show/hide button */
#login #loginContent .lg-input input[type="text"],
#login #loginContent .lg-input input[type="password"] {
    padding: 0 40px 0 42px;
}

#login .lg-input:focus-within > i {
    color: var(--primary, #C1122F);
}

/* show / hide password */
#login .lg-toggle-pass {
    position: absolute;
    left: 6px;
    top: 7px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #9CA3AF);
    font-size: 14px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

    #login .lg-toggle-pass:hover {
        color: var(--primary, #C1122F);
        background: rgba(193,18,47,.08);
    }

/* --------------------------- captcha -----------------------------
   RTL grid order: [3-digit field] [captcha image] [refresh].
   The image column is fixed the same way as .ac-captcha: at
   --field-height the 400x96 bitmap draws ~167px wide, so a wider track
   would only letterbox it inside its frame. The answer box takes the
   slack instead, so the row is as wide as the fields above it.       */
#login .lg-captcha {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) 176px auto;
    max-width: var(--captcha-max-width, 520px);
    gap: 8px;
    align-items: center;
}

    #login .lg-captcha .lg-input {
        min-width: 0;
    }

#login #loginContent .lg-input--code input[type="text"] {
    width: 100%;
    height: var(--field-height);
    padding: 0 6px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
}

    #login #loginContent .lg-input--code input[type="text"]::placeholder {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: normal;
    }

#login .lg-captcha-img {
    width: 100%;
    height: var(--field-height);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface, #fff);
    object-fit: contain;
    /* source bitmap is wider than it is tall; let it fill the box */
    padding: 2px;
}

#login #loginContent .lg-captcha-refresh {
    width: 44px;
    height: var(--field-height);
    padding: 0;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface-alt, #F1F5F9);
    color: var(--text-secondary, #6B7280);
    font-size: 16px;
    cursor: pointer;
    transition: all .2s ease;
}

    #login #loginContent .lg-captcha-refresh:hover {
        color: var(--primary, #C1122F);
        border-color: var(--primary-light, #F25C54);
        background: var(--surface, #fff);
    }

/* parsley writes captcha errors here so they span the whole row
   instead of being squeezed into the 92px field cell */
#login .lg-captcha-errors:empty {
    display: none;
}

#login .lg-captcha-errors .parsley-errors-list {
    margin-top: 6px;
}

/* ------------------- remember me / forgot pass ------------------- */
#login .lg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 20px;
}

#login .lg-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--text-secondary, #6B7280);
    cursor: pointer;
}

#login #loginContent .lg-remember input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    accent-color: var(--primary, #C1122F);
    cursor: pointer;
}

#login .lg-link {
    font-size: 14px;
    line-height: 1.7;
    color: var(--primary, #C1122F);
    text-decoration: none;
}

    #login .lg-link:hover {
        color: var(--primary-hover, #A10F26);
        text-decoration: underline;
    }

/* ---------------------------- submit ----------------------------- */
#login #loginContent input.lg-submit {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow .25s ease, transform .2s ease, filter .2s ease;
}

    #login #loginContent input.lg-submit:hover {
        box-shadow: 0 12px 26px rgba(193,18,47,.32);
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    #login #loginContent input.lg-submit:active {
        transform: none;
        box-shadow: none;
    }

/* ----------------------------- alert ----------------------------- */
#login .lg-alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(220, 38, 38, .22);
    background: rgba(220, 38, 38, .07);
    color: var(--error, #DC2626);
    font-size: 14px;
    line-height: 1.9;
    font-weight: 400;
    text-align: right;
}

    #login .lg-alert a {
        color: var(--info, #2563EB);
        text-decoration: underline;
    }

/* --------------------------- LCP (bsi) --------------------------- */
#login .lg-lcp {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--border, #E5E7EB);
}

#login #loginContent .lg-lcp input[type="text"] {
    width: 100%;
    height: 46px;
    margin: 0 0 10px;
    padding: 0 14px;
    background: var(--surface-alt, #F1F5F9);
    border: 1px solid var(--border, #E5E7EB) !important;
    border-radius: 10px !important;
    font-size: 15px;
    color: var(--text, #374151);
}

#login #loginContent .lg-lcp input[type="button"] {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--primary, #C1122F);
    border-radius: 10px;
    background: transparent;
    color: var(--primary, #C1122F);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

    #login #loginContent .lg-lcp input[type="button"]:hover {
        background: var(--primary, #C1122F);
        color: #fff;
    }

/* ---------------------------- footer ----------------------------- */
#login .lg-foot {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border, #E5E7EB);
    text-align: center;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-secondary, #6B7280);
}

    #login .lg-foot a {
        margin-right: 6px;
        color: var(--primary, #C1122F);
        font-weight: 700;
        text-decoration: none;
    }

        #login .lg-foot a:hover {
            color: var(--primary-hover, #A10F26);
            text-decoration: underline;
        }

/* --------------------- parsley error messages -------------------- */
#login .parsley-errors-list {
    flex: 0 0 100%;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.8;
}

    #login .parsley-errors-list li {
        color: var(--error, #DC2626);
        list-style: none;
    }

#login #loginContent input.parsley-error {
    background: rgba(220, 38, 38, .05);
    border-color: var(--error, #DC2626) !important;
    color: var(--text, #374151);
}

#login #loginContent input.parsley-success {
    background: var(--surface-alt, #F1F5F9);
    border-color: var(--border, #E5E7EB) !important;
    color: var(--text, #374151);
}

/* --------------------------- responsive -------------------------- */
@media (max-width: 480px) {
    #login.mpmodal {
        padding: 0 10px;
    }

    #login .lg-dialog {
        margin: 3vh auto 24px;
    }

    #login .modal-body {
        padding: 22px 18px 24px;
    }

    #login .modal-header {
        padding: 18px 48px;
        font-size: 17px;
    }

    /* image + refresh on one line, the answer box full width underneath.
       The image keeps its fixed track so the refresh button stays next
       to it instead of being pushed to the far edge. */
    #login .lg-captcha {
        grid-template-columns: 176px 1fr;
        grid-template-areas:
            "img   refresh"
            "input input";
        gap: 10px;
    }

        #login .lg-captcha .lg-input {
            grid-area: input;
        }

    #login #loginContent .lg-input--code input[type="text"] {
        width: 100%;
    }

    #login .lg-captcha-img {
        grid-area: img;
        width: 100%;
        max-width: 176px;
        height: var(--field-height);
    }

    #login #loginContent .lg-captcha-refresh {
        grid-area: refresh;
        height: var(--field-height);
    }
}