/* =========================================================
   KiraEdu
   Password Recovery
   Extends the existing Sign In design system.
========================================================= */


/* =========================================================
   SHELL
========================================================= */

.recovery-login-shell{
    grid-template-columns:minmax(390px,.9fr) minmax(480px,1.1fr);
}

.recovery-form-wrap{
    width:min(100%,500px);
}


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

.recovery-brand-home{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:52px;
    color:#fff;
    text-decoration:none;
}

.recovery-brand-home span{
    font-size:16px;
    font-weight:900;
    letter-spacing:.16em;
}

.recovery-brand-home small{
    margin-top:3px;
    color:var(--login-gold);
    font-size:8px;
    font-weight:900;
    letter-spacing:.28em;
}

.recovery-mobile-brand{
    text-decoration:none;
}


/* =========================================================
   RECOVERY CONTENT
========================================================= */

.recovery-icon,
.recovery-success-icon{
    display:grid;
    place-items:center;

    width:48px;
    height:48px;

    margin-bottom:24px;

    border-radius:14px;

    background:rgba(212,175,55,.12);
    color:var(--login-gold-dark);

    font-size:17px;
}

.recovery-success-icon{
    background:#eef8f2;
    color:#168454;
}


/* =========================================================
   HEADER
========================================================= */

.recovery-heading{
    margin:10px 0 8px;

    color:var(--login-text);

    font-size:40px;
    line-height:1;
    letter-spacing:-.045em;
}

.recovery-description{
    max-width:430px;

    margin:0 0 30px;

    color:var(--login-muted);

    font-size:14px;
    line-height:1.6;
}


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

.recovery-form{
    display:grid;
    gap:18px;
}

.recovery-field{
    min-width:0;
}

.recovery-field label{
    display:block;

    margin-bottom:8px;

    color:var(--login-text);

    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
}

.recovery-input-wrap{
    position:relative;
}

.recovery-input-wrap > i{
    position:absolute;
    top:50%;
    left:15px;

    transform:translateY(-50%);

    color:#8a8f99;

    pointer-events:none;
}

.recovery-field input{
    width:100%;
    min-height:50px;

    padding:0 14px 0 42px;

    border:1px solid #d8d5cd;
    border-radius:13px;

    outline:none;

    background:#fff;
    color:var(--login-text);

    font:inherit;
    font-size:13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.recovery-field input:hover{
    border-color:#bcb8ae;
}

.recovery-field input:focus{
    border-color:var(--login-gold);

    box-shadow:
        0 0 0 4px rgba(212,175,55,.14);
}


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

.recovery-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:100%;
    min-height:52px;

    margin-top:4px;
    padding:0 18px;

    border:0;
    border-radius:14px;

    background:var(--login-gold);
    color:#111;

    font-size:12px;
    font-weight:900;

    text-decoration:none;
    cursor:pointer;

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

.recovery-button:hover{
    transform:translateY(-2px);

    background:var(--login-gold-hover);

    box-shadow:
        0 14px 30px rgba(212,175,55,.24);
}

.recovery-button:active{
    transform:translateY(0);
}

.recovery-button.is-loading{
    opacity:.72;
    pointer-events:none;
}


/* =========================================================
   BACK TO LOGIN
========================================================= */

.recovery-back{
    margin-top:20px;
    text-align:center;
}

.recovery-back a{
    display:inline-flex;
    align-items:center;
    gap:7px;

    color:var(--login-gold-dark);

    font-size:11px;
    font-weight:900;

    text-decoration:none;
}

.recovery-back a:hover{
    text-decoration:underline;
}


/* =========================================================
   ERRORS / HELP
========================================================= */

.recovery-errors{
    margin-top:7px;

    color:var(--login-error);

    font-size:10px;
    line-height:1.4;
}

.recovery-errors ul{
    margin:0;
    padding:0;

    list-style:none;
}

.recovery-help{
    display:block;

    margin-top:7px;

    color:var(--login-muted);

    font-size:10px;
    line-height:1.5;
}

.recovery-help ul{
    margin:7px 0 0;
    padding-left:16px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.recovery-copyright{
    margin:28px 0 0;

    color:#8a8f99;

    font-size:9px;
    line-height:1.5;

    text-align:center;
}


/* =========================================================
   MOBILE
   Follow Sign In's existing responsive behavior.
========================================================= */

@media(max-width:760px){

    .recovery-brand-home{
        margin-bottom:30px;
    }

    .recovery-benefits{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .recovery-heading{
        margin:8px 0 7px;
        font-size:30px;
    }

    .recovery-description{
        margin-bottom:24px;

        font-size:12px;
    }

    .recovery-form{
        gap:15px;
    }

    .recovery-field label{
        margin-bottom:7px;
        font-size:10px;
    }

    .recovery-field input{
        min-height:48px;

        padding-left:40px;

        border-radius:12px;

        font-size:12px;
    }

    .recovery-button{
        min-height:50px;
        margin-top:2px;
    }

    .recovery-icon,
    .recovery-success-icon{
        width:44px;
        height:44px;

        margin-bottom:20px;

        border-radius:13px;
    }
}


@media(max-width:390px){

    .recovery-brand-home{
        margin-bottom:24px;
    }

    .recovery-heading{
        font-size:28px;
    }

}