/* ==========================================================
   MERITZA CLASSES
   LOGIN PAGE
   CLEAN VERSION
========================================================== */


/* ==========================================================
   PAGE ROOT
========================================================== */

.mc-login-page {

    width: 100%;

    min-height: 100vh;

}


/* ==========================================================
   LOGIN SECTION
========================================================== */

/*
 * IMPORTANT:
 *
 * The Meritza navbar is fixed/overlaid.
 *
 * We therefore reserve the navbar's height here and add
 * a small intentional breathing space below it.
 *
 * DO NOT add margin-top to .mc-login-layout or
 * .mc-login-panel.
 */

.mc-login-section {

    width: 100%;

    /*
     * Do not force the login section to fill the viewport.
     * The footer should follow the actual login content.
     */
    min-height: auto;

    box-sizing: border-box;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding-top:
        calc(var(--mc-navbar-height) + 28px);

    padding-right:
        24px;

    padding-bottom:
        12px;

    padding-left:
        24px;

}


/* ==========================================================
   MAIN LOGIN LAYOUT
========================================================== */

.mc-login-layout {

    width: 100%;

    max-width: 1080px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(350px, .85fr);

    align-items: center;

    gap: 60px;

    /*
     * Absolutely no top margin.
     */
    margin: 0;

}


/* ==========================================================
   LEFT BRAND SECTION
========================================================== */

.mc-login-brand {

    width: 100%;

    min-width: 0;

}


.mc-login-brand-inner {

    width: 100%;

    max-width: 590px;

}


/* ==========================================================
   BRAND NAME
========================================================== */

.mc-login-brand-name {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin: 0 0 18px;

    color: #0A1946;

    font-size: .82rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: 2px;

}


.mc-login-brand-name .brand-main {

    color: #0A1946;

}


.mc-login-brand-name span:last-child {

    color: #D4AF37;

}


/* ==========================================================
   LEFT MAIN HEADING
========================================================== */

.mc-login-brand h1 {

    margin: 0;

    color: #0A1946;

    font-size: clamp(2.5rem, 4vw, 4rem);

    font-weight: 850;

    line-height: 1.04;

    letter-spacing: -1.7px;

}


.mc-login-brand h1 span {

    color: #D4AF37;

}


/* ==========================================================
   LEFT DESCRIPTION
========================================================== */

.mc-login-brand-description {

    max-width: 540px;

    margin: 22px 0 26px;

    color: #687386;

    font-size: .94rem;

    font-weight: 400;

    line-height: 1.7;

}


/* ==========================================================
   LEFT HIGHLIGHTS
========================================================== */

.mc-login-highlights {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* ==========================================================
   HIGHLIGHT ITEM
========================================================== */

.mc-login-highlight {

    display: flex;

    align-items: center;

    gap: 12px;

}


/* ==========================================================
   HIGHLIGHT ICON
========================================================== */

.mc-login-highlight-icon {

    width: 39px;

    height: 39px;

    flex: 0 0 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(10, 25, 70, .08);

    border-radius: 10px;

    background: #EEF2F8;

    font-size: 1rem;

}


/* ==========================================================
   HIGHLIGHT TEXT
========================================================== */

.mc-login-highlight strong {

    display: block;

    margin: 0 0 2px;

    color: #0A1946;

    font-size: .76rem;

    font-weight: 800;

    line-height: 1.25;

}


.mc-login-highlight span {

    display: block;

    color: #8993A2;

    font-size: .67rem;

    line-height: 1.35;

}


/* ==========================================================
   LEFT FOOTER LINE
========================================================== */

.mc-login-brand-footer {

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 28px 0 0;

    color: #8C96A5;

    font-size: .68rem;

    font-weight: 600;

    line-height: 1.3;

}


.mc-login-brand-footer span {

    color: #D4AF37;

    font-size: .9rem;

}


/* ==========================================================
   RIGHT LOGIN PANEL
========================================================== */

.mc-login-panel {

    width: 100%;

    max-width: 410px;

    justify-self: end;

    /*
     * IMPORTANT:
     * No margin-top.
     * No position adjustment.
     */
    margin: 0;

}


/* ==========================================================
   BLUE LOGIN HEADER CARD
========================================================== */

.mc-login-heading-card {

    position: relative;

    overflow: hidden;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 23px 26px;

    background: #0A1946;

    text-align: center;

    border-radius: 18px 18px 0 0;

    box-shadow:
        0 12px 30px rgba(10, 25, 70, .14);

}


/* ==========================================================
   BLUE CARD DECORATIVE CIRCLE
========================================================== */

.mc-login-heading-card::after {

    content: "";

    position: absolute;

    width: 140px;

    height: 140px;

    right: -75px;

    top: -75px;

    border-radius: 50%;

    background:
        rgba(212, 175, 55, .13);

    pointer-events: none;

}


/* ==========================================================
   BLUE CARD ICON
========================================================== */

.mc-login-heading-icon {

    position: relative;

    z-index: 1;

    width: 38px;

    height: 38px;

    margin: 0 auto 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid
        rgba(255, 255, 255, .06);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .10);

    color: #D4AF37;

    font-size: .95rem;

}


/* ==========================================================
   BLUE CARD HEADING
========================================================== */

.mc-login-heading-card h1,
.mc-login-heading-card h2 {

    position: relative;

    z-index: 1;

    margin: 0 0 5px;

    color: #FFFFFF;

    font-size: 1.42rem;

    font-weight: 800;

    line-height: 1.2;

}


/* ==========================================================
   BLUE CARD SUBTEXT
========================================================== */

.mc-login-heading-card p {

    position: relative;

    z-index: 1;

    margin: 0;

    color:
        rgba(255, 255, 255, .80);

    font-size: .72rem;

    line-height: 1.4;

}


/* ==========================================================
   WHITE LOGIN FORM CARD
========================================================== */

.mc-login-form-card {

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 24px 27px 20px;

    background: #FFFFFF;

    border: 1px solid
        rgba(10, 25, 70, .08);

    /*
     * The blue header and white card must touch.
     */
    border-top: 0;

    border-radius: 0 0 18px 18px;

    box-shadow:
        0 14px 38px rgba(10, 25, 70, .09);

}


/* ==========================================================
   ALERTS
========================================================== */

.mc-login-alert {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin: 0 0 15px;

    padding: 10px 11px;

    box-sizing: border-box;

    border-radius: 8px;

    font-size: .70rem;

    line-height: 1.45;

}


.mc-login-alert-error {

    background: #FFF3F3;

    border: 1px solid #F0D2D2;

    color: #A13C3C;

}


.mc-login-alert-success {

    background: #F0FAF3;

    border: 1px solid #CDE7D5;

    color: #287247;

}


/* ==========================================================
   FORM FIELD
========================================================== */

.mc-login-field {

    width: 100%;

    margin: 0 0 15px;

}


/* ==========================================================
   LABEL
========================================================== */

.mc-login-field label {

    display: block;

    margin: 0 0 6px;

    color: #263A57;

    font-size: .72rem;

    font-weight: 700;

    line-height: 1.3;

}


.mc-login-field label span {

    color: #C62828;

}


/* ==========================================================
   INPUT WRAPPER
========================================================== */

.mc-login-input-wrap {

    position: relative;

    width: 100%;

}


/* ==========================================================
   INPUT ICON
========================================================== */

.mc-login-input-wrap > i {

    position: absolute;

    left: 12px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #8792A1;

    font-size: .78rem;

    pointer-events: none;

}


/* ==========================================================
   INPUT
========================================================== */

.mc-login-input-wrap input {

    width: 100%;

    height: 43px;

    box-sizing: border-box;

    padding:
        0 42px 0 34px;

    border: 1px solid #D8DFE8;

    border-radius: 8px;

    background: #FFFFFF;

    color: #172A47;

    font-family: inherit;

    font-size: .75rem;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.mc-login-input-wrap input::placeholder {

    color: #9AA5B4;

}


.mc-login-input-wrap input:hover {

    border-color: #C4CCD7;

}


.mc-login-input-wrap input:focus {

    border-color: #0A1946;

    background: #FFFFFF;

    box-shadow:
        0 0 0 3px
        rgba(10, 25, 70, .06);

}


/* ==========================================================
   PASSWORD TOGGLE
========================================================== */

.mc-login-password-toggle {

    position: absolute;

    right: 6px;

    top: 50%;

    transform:
        translateY(-50%);

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #7A8798;

    cursor: pointer;

}


.mc-login-password-toggle:hover {

    background:
        rgba(10, 25, 70, .05);

    color: #0A1946;

}


/* ==========================================================
   FORGOT PASSWORD
========================================================== */

.mc-login-forgot {

    margin: 6px 0 0;

    text-align: right;

}


.mc-login-forgot a {

    color: #0A1946;

    font-size: .68rem;

    font-weight: 700;

    text-decoration: none;

}


.mc-login-forgot a:hover {

    color: #B18A15;

    text-decoration: underline;

}


/* ==========================================================
   LOGIN BUTTON
========================================================== */

.mc-login-submit {

    width: 100%;

    min-height: 43px;

    margin: 2px 0 0;

    padding: 0 15px;

    box-sizing: border-box;

    border: 1px solid #D4AF37;

    border-radius: 8px;

    background: #D4AF37;

    color: #0A1946;

    font-family: inherit;

    font-size: .77rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.mc-login-submit:hover {

    background: #C9A331;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(212, 175, 55, .18);

}


.mc-login-submit:active {

    transform:
        translateY(0);

}


.mc-login-submit:disabled {

    opacity: .70;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}


/* ==========================================================
   REGISTER
========================================================== */

.mc-login-register {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin: 15px 0 0;

    padding: 13px 0 0;

    border-top:
        1px solid
        rgba(10, 25, 70, .08);

    color: #7B8798;

    font-size: .68rem;

    line-height: 1.3;

}


.mc-login-register a {

    color: #0A1946;

    font-weight: 800;

    text-decoration: none;

}


.mc-login-register a:hover {

    color: #D4AF37;

}


/* ==========================================================
   SECURITY
========================================================== */

.mc-login-security {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin: 12px 0 0;

    color: #99A2AE;

    font-size: .59rem;

    line-height: 1.3;

}


.mc-login-security i {

    color: #4F8665;

}


/* ==========================================================
   SUCCESS STATE
========================================================== */

.mc-login-success-state {

    padding: 15px 5px 8px;

    text-align: center;

}


.mc-login-success-icon {

    width: 56px;

    height: 56px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #EEF8F1;

    color: #378052;

    font-size: 1.45rem;

}


.mc-login-success-state h2 {

    margin: 0 0 7px;

    color: #0A1946;

    font-size: 1.15rem;

    font-weight: 800;

}


.mc-login-success-state p {

    margin: 0;

    color: #7B8798;

    font-size: .72rem;

    line-height: 1.5;

}


.mc-login-role-note {

    margin-top: 12px !important;

    padding: 10px;

    border-radius: 8px;

    background: #F6F8FA;

}


.mc-login-role-note strong {

    color: #0A1946;

}


/* ==========================================================
   TABLET
========================================================== */

@media (
    max-width: 991.98px
) {

    .mc-login-section {

        /*
         * Still clears the fixed navbar.
         */
        padding-top:
            calc(var(--mc-navbar-height) + 25px);

        padding-right: 20px;

        padding-bottom: 15px;

        padding-left: 20px;

    }


    .mc-login-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .9fr);

        gap: 35px;

    }


    .mc-login-brand h1 {

        font-size: 2.7rem;

    }


    .mc-login-brand-description {

        font-size: .84rem;

    }

}


/* ==========================================================
   SHORT DESKTOP / LAPTOP
========================================================== */

@media (
    min-width: 992px
) and (
    max-height: 760px
) {

    .mc-login-section {

        /*
         * Slightly smaller clearance on short screens,
         * but still always below navbar.
         */
        padding-top:
            calc(var(--mc-navbar-height) + 18px) !important;

        padding-bottom: 10px;

    }


    .mc-login-layout {

        gap: 45px;

    }


    .mc-login-brand h1 {

        font-size: 3rem;

    }


    .mc-login-brand-description {

        margin-top: 15px;

        margin-bottom: 18px;

        font-size: .84rem;

        line-height: 1.55;

    }


    .mc-login-highlights {

        gap: 8px;

    }


    .mc-login-highlight-icon {

        width: 35px;

        height: 35px;

        flex-basis: 35px;

    }


    .mc-login-heading-card {

        padding:
            18px 24px;

    }


    .mc-login-form-card {

        padding:
            18px 24px 15px;

    }


    .mc-login-field {

        margin-bottom: 11px;

    }


    .mc-login-register {

        margin-top: 10px;

        padding-top: 10px;

    }


    .mc-login-security {

        margin-top: 8px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (
    max-width: 767.98px
) {

    .mc-login-section {

        min-height: auto;

        /*
         * On mobile/PWA the topbar is sticky and remains in
         * normal document flow, so do not reserve the navbar
         * height a second time here.
         */
        padding-top:
            6px !important;

        padding-right: 15px;

        padding-bottom: 15px;

        padding-left: 15px;

    }


    .mc-login-layout {

        grid-template-columns: 1fr;

        gap: 28px;

        max-width: 500px;

    }


    .mc-login-brand {

        text-align: center;

    }


    .mc-login-brand-inner {

        max-width: 100%;

    }


    .mc-login-brand-name {

        margin-bottom: 13px;

    }


    .mc-login-brand h1 {

        font-size: 2.2rem;

        line-height: 1.06;

        letter-spacing: -1px;

    }


    .mc-login-brand-description {

        max-width: 450px;

        margin:
            16px auto 20px;

        font-size: .82rem;

        line-height: 1.6;

    }


    .mc-login-highlights {

        width: 100%;

        max-width: 330px;

        margin: 0 auto;

        text-align: left;

    }


    .mc-login-brand-footer {

        justify-content: center;

        margin-top: 20px;

    }


    .mc-login-panel {

        max-width: 100%;

    }


    .mc-login-heading-card {

        padding:
            20px 22px;

    }


    .mc-login-form-card {

        padding:
            22px 20px 18px;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (
    max-width: 420px
) {

    .mc-login-section {

        padding-top:
            5px !important;

        padding-right: 12px;

        padding-bottom: 12px;

        padding-left: 12px;

    }


    .mc-login-layout {

        gap: 22px;

    }


    .mc-login-brand h1 {

        font-size: 1.9rem;

    }


    .mc-login-brand-description {

        font-size: .76rem;

    }


    .mc-login-highlight strong {

        font-size: .72rem;

    }


    .mc-login-highlight span {

        font-size: .63rem;

    }


    .mc-login-heading-card {

        padding:
            17px 18px;

        border-radius:
            15px 15px 0 0;

    }


    .mc-login-heading-card h1,
    .mc-login-heading-card h2 {

        font-size: 1.25rem;

    }


    .mc-login-form-card {

        padding:
            19px 17px 16px;

        border-radius:
            0 0 15px 15px;

    }

}

.mc-login-remember-field{margin:-3px 0 15px!important;}
.mc-login-remember-field .mc-login-remember-label{display:flex!important;align-items:center!important;gap:7px!important;margin:0 0 6px!important;color:#263A57!important;font-family:var(--mc-font-primary)!important;font-size:.72rem!important;line-height:1.3!important;font-weight:700!important;cursor:pointer;}
.mc-login-remember-field .mc-login-remember-label span{display:inline!important;margin:0!important;padding:0!important;color:#263A57!important;font:inherit!important;line-height:inherit!important;}
.mc-login-remember-field .mc-login-remember-label input{width:15px!important;height:15px!important;min-width:15px!important;margin:0!important;padding:0!important;accent-color:#0A1946;cursor:pointer;}


/* ==========================================================
   MOBILE / PWA LOGIN
   ========================================================== */

@media screen and (max-width: 1024px) {

    /*
     * Mobile / PWA:
     * Keep both sections visible, but show the login panel first.
     * Desktop / laptop layout remains unchanged.
     */
    .mc-login-section {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .mc-login-layout {
        width: 100% !important;
        max-width: 500px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        margin: 0 auto !important;
    }

    .mc-login-layout > .mc-login-panel {
        order: 1 !important;
        display: block !important;
        width: 100% !important;
        max-width: 410px !important;
        margin: 0 auto !important;
    }

    .mc-login-layout > .mc-login-brand {
        order: 2 !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        text-align: center !important;
    }

    .mc-login-brand-inner {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

}