/*
|--------------------------------------------------------------------------
| Akademik Al-Kamil
| Reset 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-reset-password-container{

    width:100%;

    min-height:100vh;

    display:flex;

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

    padding:32px 16px;
}

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

#ak-reset-password{

    width:100%;

    max-width:480px;

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

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

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

.ak-reset-password-header{

    padding:28px 32px;

    text-align:center;

    border-bottom:1px solid #ececec;
}

.ak-reset-password-logo{

    margin-bottom:16px;
}

.ak-reset-password-logo img{

    width:90px;
    height:90px;

    display:block;

    margin:auto;

    object-fit:contain;
}

.ak-reset-password-header h2{

    margin:0;

    color:var(--ak-text);

    font-size:28px;

    font-weight:700;
}

.ak-reset-password-header p{

    margin:8px 0 0;

    color:var(--ak-muted);

    font-size:14px;

    line-height:1.6;
}

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

#ak-reset-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;
}

/* ==========================================================
   Password Wrapper
   ========================================================== */

.ak-password-wrapper{

    position:relative;
}

.ak-password-wrapper input{

    width:100%;

    height:48px;

    padding:0 48px 0 14px;

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

    border-radius:10px;

    background:#ffffff;

    color:var(--ak-text);

    font-size:15px;

    transition:.2s;
}

.ak-password-wrapper input:focus{

    outline:none;

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

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

.ak-password-wrapper input::placeholder{

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

/* ==========================================================
   Toggle Password
   ========================================================== */

.ak-password-toggle{

    position:absolute;

    top:50%;
    right:14px;

    transform:translateY(-50%);

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

    width:32px;
    height:32px;

    margin:0;
    padding:0;

    border:none !important;

    background:transparent !important;

    background-image:none !important;

    box-shadow:none !important;

    outline:none;

    color:var(--ak-muted);

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    transition:color .2s;
}

.ak-password-toggle:hover{

    background:transparent !important;

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

.ak-password-toggle:focus{

    outline:none;

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

.ak-password-toggle svg{

    width:20px;
    height:20px;

    pointer-events:none;
}

.ak-password-toggle:focus,
.ak-password-toggle:active{

    background:transparent !important;

    box-shadow:none !important;

    outline:none;
}

.ak-password-toggle svg{

    width:20px;
    height:20px;

    display:block;

    pointer-events:none;
}

/* ==========================================================
   Submit
   ========================================================== */

.ak-reset-password-submit{

    width:100%;

    height:50px;

    margin-top:16px;

    border:none;

    border-radius:10px;

    background:var(--ak-primary);

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

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

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

.ak-reset-password-submit:disabled{

    opacity:.7;

    cursor:not-allowed;
}

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

.ak-reset-password-message{

    display:none;

    align-items:flex-start;

    gap:12px;

    margin-top:20px;

    padding:14px 16px;

    border-radius:10px;

    border-left:4px solid transparent;

    font-size:14px;

    line-height:1.5;
}

.ak-reset-password-message.ak-processing,
.ak-reset-password-message.ak-success,
.ak-reset-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;
}

.ak-message-text{

    flex:1;
}

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

@media (max-width:576px){

    .ak-reset-password-container{

        padding:20px 12px;
    }

    #ak-reset-password{

        border-radius:14px;
    }

    .ak-reset-password-header{

        padding:24px;
    }

    #ak-reset-password-form{

        padding:24px;
    }

    .ak-reset-password-logo img{

        width:80px;
        height:80px;
    }

    .ak-reset-password-header h2{

        font-size:24px;
    }

}