/* ==========================================================
   HEMRITU CHANGE PASSWORD
   Desktop + Mobile
========================================================== */

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

.hemritu-change-password{

    max-width:720px;

}

.hemritu-change-password-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:20px;

    padding:40px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.05);

}

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

.hemritu-change-password-title{

    margin:0;

    font-size:42px;

    font-weight:700;

    line-height:1.2;

    color:#111827;

}

.hemritu-change-password-description{

    margin:16px 0 0;

    font-size:16px;

    line-height:1.8;

    color:#6B7280;

}

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

.hemritu-change-password-form{

    margin-top:34px;

}

.hemritu-change-password-group{

    margin-bottom:26px;

}

.hemritu-change-password-label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:#374151;

}

/* ==========================================================
   Input Wrapper
========================================================== */

.hemritu-change-password-field{

    position:relative;

}

.hemritu-change-password-input{

    width:100%;

    height:56px;

    padding:0 54px 0 18px;

    border:1px solid #D1D5DB;

    border-radius:14px;

    background:#FFFFFF;

    font-size:15px;

    color:#111827;

    transition:.25s;

    box-sizing:border-box;

}

.hemritu-change-password-input:focus{

    outline:none;

    border-color:#D4A017;

    box-shadow:0 0 0 4px rgba(212,160,23,.12);

}

/* ==========================================================
   Show Password Button
========================================================== */

.hemritu-password-toggle{

    position:absolute;

    top:50%;

    right:18px;

    transform:translateY(-50%);

    cursor:pointer;

    font-size:18px;

    user-select:none;

    color:#9CA3AF;

    transition:.25s;

}

.hemritu-password-toggle:hover{

    color:#111827;

}

/* ==========================================================
   Password Strength
========================================================== */

.hemritu-password-strength{

    margin-top:24px;

}

.hemritu-password-strength-label{

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:#374151;

}

.hemritu-password-strength-bar{

    width:100%;

    height:8px;

    overflow:hidden;

    border-radius:999px;

    background:#E5E7EB;

}

.hemritu-password-strength-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:#EF4444;

    transition:.30s;

}

.hemritu-password-strength-text{

    margin-top:10px;

    font-size:14px;

    font-weight:600;

    color:#6B7280;

}

/* ==========================================================
   Password Rules
========================================================== */

.hemritu-password-rules{

    margin:26px 0 34px;

    padding:18px 22px;

    border-radius:14px;

    background:#F9FAFB;

    border:1px solid #E5E7EB;

}

.hemritu-password-rules-title{

    margin-bottom:14px;

    font-size:15px;

    font-weight:700;

    color:#111827;

}

.hemritu-password-rules ul{

    margin:0;

    padding:0;

    list-style:none;

}

.hemritu-password-rules li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    font-size:14px;

    color:#4B5563;

}

.hemritu-password-rules li:last-child{

    margin-bottom:0;

}

.hemritu-password-rule-icon{

    font-size:15px;

    color:#D4A017;

}

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

.hemritu-change-password-submit{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:#111827;

    color:#FFFFFF;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.hemritu-change-password-submit:hover{

    background:#D4A017;

}

.hemritu-change-password-submit:disabled{

    opacity:.6;

    cursor:not-allowed;

}


/* ==========================================================
   HEMRITU CHANGE PASSWORD
   Responsive
========================================================== */

@media (max-width:767px){

/* Container */

.hemritu-change-password{

    max-width:100%;

}

/* Card */

.hemritu-change-password-card{

    padding:22px;

    border-radius:16px;

}

/* Heading */

.hemritu-change-password-title{

    font-size:30px;

    line-height:1.3;

}

.hemritu-change-password-description{

    margin-top:12px;

    font-size:15px;

    line-height:1.7;

}

/* Form */

.hemritu-change-password-form{

    margin-top:26px;

}

.hemritu-change-password-group{

    margin-bottom:20px;

}

.hemritu-change-password-label{

    margin-bottom:8px;

    font-size:14px;

}

/* Inputs */

.hemritu-change-password-input{

    height:50px;

    padding:0 48px 0 16px;

    font-size:15px;

    border-radius:12px;

}

/* Eye Icon */

.hemritu-password-toggle{

    right:16px;

    font-size:17px;

}

/* Strength */

.hemritu-password-strength{

    margin-top:18px;

}

.hemritu-password-strength-text{

    font-size:13px;

}

/* Rules */

.hemritu-password-rules{

    margin:20px 0 26px;

    padding:16px;

    border-radius:12px;

}

.hemritu-password-rules-title{

    font-size:14px;

}

.hemritu-password-rules li{

    font-size:13px;

    margin-bottom:10px;

}

/* Button */

.hemritu-change-password-submit{

    height:50px;

    font-size:15px;

    border-radius:12px;

}

}