/*
|--------------------------------------------------------------------------
| Akademik Al-Kamil
| Forgot Password
|--------------------------------------------------------------------------
*/

:root{
    --ak-primary:#0f6b37;
    --ak-primary-dark:#0b552b;
    --ak-border:#dcdfe4;
    --ak-bg:#f5f7fa;
    --ak-text:#1f2937;
    --ak-muted:#6b7280;
    --ak-danger:#dc3545;
    --ak-success:#198754;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

body{

    margin:0;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef3f8
        );

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}

/* ==========================================================
   Container
   ========================================================== */

.ak-forgot-password-container{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;
    align-items:center;

    padding:32px 16px;
}

/* ==========================================================
   Card
   ========================================================== */

#ak-forgot-password{

    width:100%;

    max-width:480px;

    background:#ffffff;

    border-radius:16px;

    box-shadow:
        0 16px 40px rgba(0,0,0,.08);

    overflow:hidden;
}

/* ==========================================================
   Header
   ========================================================== */

.ak-forgot-password-header{

    padding:28px 32px;

    text-align:center;

    border-bottom:1px solid #ececec;
}

.ak-forgot-password-logo{

    margin-bottom:16px;
}

.ak-forgot-password-logo img{

    width:90px;
    height:90px;

    display:block;

    margin:auto;

    object-fit:contain;
}

.ak-forgot-password-header h2{

    margin:0;

    color:var(--ak-text);

    font-size:28px;

    font-weight:700;
}

.ak-forgot-password-header p{

    margin:8px 0 0;

    color:var(--ak-muted);

    font-size:14px;

    line-height:1.6;
}

/* ==========================================================
   Form
   ========================================================== */

#ak-forgot-password-form{

    padding:32px;
}

.ak-form-group{

    margin-bottom:20px;
}

.ak-form-group label{

    display:block;

    margin-bottom:8px;

    color:var(--ak-text);

    font-size:14px;

    font-weight:600;
}

.ak-form-group input{

    width:100%;

    height:48px;

    padding:0 14px;

    border:1px solid var(--ak-border);

    border-radius:10px;

    font-size:15px;

    background:#ffffff;

    color:var(--ak-text);

    transition:.2s;
}

.ak-form-group input::placeholder{

    color:var(--ak-muted);
}

.ak-form-group input:focus{

    outline:none;

    border-color:var(--ak-primary);

    box-shadow:
        0 0 0 3px rgba(15,107,55,.12);
}

/* ==========================================================
   Button
   ========================================================== */

.ak-forgot-password-submit{

    width:100%;

    height:50px;

    border:none;

    border-radius:10px;

    background:var(--ak-primary);

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    margin-top:16px;
}

.ak-forgot-password-submit:hover:not(:disabled){

    background:var(--ak-primary-dark);
}

.ak-forgot-password-submit:disabled{

    opacity:.7;

    cursor:not-allowed;
}

/* ==========================================================
   Message
   ========================================================== */

.ak-forgot-password-message{

    display:none;

    margin-top:20px;

    padding:14px 16px;

    border-radius:10px;

    font-size:14px;

    line-height:1.5;

    border-left:4px solid transparent;

    align-items:flex-start;

    gap:12px;
}

.ak-forgot-password-message.ak-processing,
.ak-forgot-password-message.ak-success,
.ak-forgot-password-message.ak-error{

    display:flex;
}

.ak-processing{

    background:#eef8f2;

    color:var(--ak-primary);

    border-left-color:var(--ak-primary);
}

.ak-success{

    background:#ecfdf5;

    color:var(--ak-success);

    border-left-color:var(--ak-success);
}

.ak-error{

    background:#fef2f2;

    color:var(--ak-danger);

    border-left-color:var(--ak-danger);
}

.ak-message-icon{

    width:20px;
    height:20px;

    flex:0 0 20px;

    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    margin-top:2px;
}

.ak-message-text{

    flex:1;
}

/* ==========================================================
   Footer
   ========================================================== */

.ak-forgot-password-links{

    margin-top:20px;

    padding:0 32px 32px;

    text-align:center;
}

.ak-forgot-password-links a{

    color:var(--ak-primary);

    font-size:14px;

    font-weight:600;

    text-decoration:none;
}

.ak-forgot-password-links a:hover{

    color:var(--ak-primary-dark);

    text-decoration:underline;
}

/* ==========================================================
   Animation
   ========================================================== */

@keyframes akFadeUp{

    from{

        opacity:0;

        transform:translateY(20px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }

}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:576px){

    .ak-forgot-password-container{

        padding:20px 12px;
    }

    #ak-forgot-password{

        border-radius:14px;
    }

    .ak-forgot-password-header{

        padding:24px;
    }

    #ak-forgot-password-form{

        padding:24px;
    }

    .ak-forgot-password-logo img{

        width:80px;
        height:80px;
    }

    .ak-forgot-password-header h2{

        font-size:24px;
    }

}