/* ========================================
   PREVENT FLASH OF OLD LOST PASSWORD UI
======================================== */

html.js body.login.procomp-lost-password-page:not(.procomp-lost-password-ready) .fls_login_form_wrap h1,
html.js body.login.procomp-lost-password-page:not(.procomp-lost-password-ready) .fls_login_form_wrap .message,
html.js body.login.procomp-lost-password-page:not(.procomp-lost-password-ready) .fls_login_form_wrap form {
    opacity: 0 !important;
    visibility: hidden !important;
}

html.js body.login.procomp-lost-password-page.procomp-lost-password-ready .fls_login_form_wrap form {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================
   LOST PASSWORD PAGE
======================================== */

body.login.procomp-lost-password-page {
    background: #f5f7fc !important;
}

/* Font Awesome protection */
body.login.procomp-lost-password-page .fa-solid,
body.login.procomp-lost-password-page .fa-regular,
body.login.procomp-lost-password-page .fa-brands,
body.login.procomp-lost-password-page .fa,
body.login.procomp-lost-password-page [class*="fa-"] {
    font-style: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

body.login.procomp-lost-password-page .fa-solid,
body.login.procomp-lost-password-page .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

body.login.procomp-lost-password-page .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

body.login.procomp-lost-password-page .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Layout */
body.login.procomp-lost-password-page .fls_login_page_wrap {
    padding-top: 0 !important;
    min-height: 100vh !important;
}

body.login.procomp-lost-password-page .fls_login_form_wrap {
    background: #f5f7fc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 150px 40px 90px !important;
}

body.login.procomp-lost-password-page .fls_login_form_inner,
body.login.procomp-lost-password-page #login {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    float: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Hide default images on right side */
body.login.procomp-lost-password-page .fls_login_form_wrap img {
    display: none !important;
}

/* ========================================
   MAIN FORM CARD
======================================== */

body.login.procomp-lost-password-page form.procomp-lost-password-form,
body.login.procomp-lost-password-page .procomp-lost-password-form {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1px solid #e7edf7 !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06) !important;
    padding: 34px 24px 26px !important;
}

/* Inner wrapper only */
body.login.procomp-lost-password-page .procomp-lost-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center !important;
}

body.login.procomp-lost-password-page .procomp-lost-card * {
    box-sizing: border-box !important;
}

/* ========================================
   TOP ICON
======================================== */

body.login.procomp-lost-password-page .procomp-lost-card-icon {
    width: 84px !important;
    height: 84px !important;
    margin: 0 auto 20px !important;
    background: #eaf1ff !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2463ff !important;
    box-shadow: none !important;
}

body.login.procomp-lost-password-page .procomp-lost-card-icon i {
    font-size: 30px !important;
    line-height: 1 !important;
}

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

body.login.procomp-lost-password-page .procomp-lost-card-title {
    margin: 0 0 12px !important;
    font-size: 34px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    color: #16245c !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
}

body.login.procomp-lost-password-page .procomp-lost-card-subtitle {
    display: block !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto 22px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #73819a !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* ========================================
   INNER FIELD BOX
======================================== */

body.login.procomp-lost-password-page .procomp-lost-fieldbox {
    background: #ffffff !important;
    border: 1px solid #edf2f8 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 18px 18px 16px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

body.login.procomp-lost-password-page .procomp-lost-field-label {
    display: block !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #111b4f !important;
    margin-bottom: 12px !important;
}


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

body.login.procomp-lost-password-page .procomp-lost-input-wrap {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}

body.login.procomp-lost-password-page .procomp-lost-input-icon {
    position: absolute !important;
    left: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #65779a !important;
    pointer-events: none !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

body.login.procomp-lost-password-page .procomp-lost-input-icon i {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 18px !important;
}

body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="text"],
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="email"],
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[name="user_login"] {
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 20px 0 66px !important;
    border-radius: 18px !important;
    border: 2px solid #d9e3f4 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #172554 !important;
    line-height: normal !important;
    transition: all 0.25s ease !important;
}

body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="text"]::placeholder,
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="email"]::placeholder,
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[name="user_login"]::placeholder {
    color: #8a96b4 !important;
    opacity: 1 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="text"]:focus,
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="email"]:focus,
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[name="user_login"]:focus {
    border-color: #4b74ff !important;
    box-shadow: 0 0 0 4px rgba(75, 116, 255, 0.10) !important;
    outline: none !important;
}

/* ========================================
   HELPER TEXT
======================================== */

body.login.procomp-lost-password-page .procomp-lost-help {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #6e7da1 !important;
}

body.login.procomp-lost-password-page .procomp-lost-help > span:last-child {
    display: block !important;
    width: 100% !important;
}

body.login.procomp-lost-password-page .procomp-lost-help-icon {
    color: #2463ff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

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

body.login.procomp-lost-password-page .procomp-lost-card input[type="submit"],
body.login.procomp-lost-password-page .procomp-lost-card button[type="submit"] {
    width: 100% !important;
    min-height: 54px !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #2f6df6 0%, #255ae8 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: 0 12px 24px rgba(47, 109, 246, 0.22) !important;
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.login.procomp-lost-password-page .procomp-lost-card input[type="submit"]:hover,
body.login.procomp-lost-password-page .procomp-lost-card button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 28px rgba(47, 109, 246, 0.26) !important;
}

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

body.login.procomp-lost-password-page .procomp-lost-security {
    margin-top: 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid #e2e8f4 !important;
    display: block !important;
    width: 100% !important;
}

body.login.procomp-lost-password-page .procomp-lost-security-line {
    display: none !important;
}

body.login.procomp-lost-password-page .procomp-lost-security-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: #7a88a8 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
}

body.login.procomp-lost-password-page .procomp-lost-security-content > span {
    display: inline !important;
    width: auto !important;
    white-space: normal !important;
}

body.login.procomp-lost-password-page .procomp-lost-security-content i {
    color: #7a88a8 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

body.login.procomp-lost-password-page .procomp-lost-security-content strong {
    color: #2463ff !important;
    font-weight: 700 !important;
}

/* ========================================
   FOOTER LINKS
======================================== */

body.login.procomp-lost-password-page #nav,
body.login.procomp-lost-password-page #backtoblog {
    margin-top: 24px !important;
    text-align: center !important;
    padding: 0 !important;
}

body.login.procomp-lost-password-page #nav a,
body.login.procomp-lost-password-page #backtoblog a {
    color: #5b6c92 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.login.procomp-lost-password-page #nav a:hover,
body.login.procomp-lost-password-page #backtoblog a:hover {
    color: #2463ff !important;
    text-decoration: underline !important;
}


/* Autofill fix */
body.login.procomp-lost-password-page .procomp-lost-input-wrap input:-webkit-autofill,
body.login.procomp-lost-password-page .procomp-lost-input-wrap input:-webkit-autofill:hover,
body.login.procomp-lost-password-page .procomp-lost-input-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: #172554 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 9999s ease-in-out 0s !important;
    padding-left: 66px !important;
}

/* ========================================
   FINAL FIX — ICON INLINE WITH TEXT
======================================== */

/* force wrapper */
body.login.procomp-lost-password-page .procomp-lost-input-wrap {
    position: relative !important;
}

/* icon container */
body.login.procomp-lost-password-page .procomp-lost-input-icon {
    position: absolute !important;
    left: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 20px !important;
    height: 20px !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    line-height: 20px !important;
    text-align: center !important;

    z-index: 999 !important;
    pointer-events: none !important;
}

/* THIS is the important fix */
body.login.procomp-lost-password-page .procomp-lost-input-icon i,
body.login.procomp-lost-password-page .procomp-lost-input-icon .fa,
body.login.procomp-lost-password-page .procomp-lost-input-icon .fa-solid {
    display: block !important;
    position: relative !important;

    font-size: 16px !important;
    line-height: 20px !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    vertical-align: middle !important;
}

/* push text farther right */
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="text"],
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="email"],
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[name="user_login"] {
    padding-left: 78px !important;
}

/* ========================================
   FINAL ROBUST FIX — USE INPUT BACKGROUND ICON
======================================== */

/* hide the separate floating icon */
body.login.procomp-lost-password-page .procomp-lost-input-icon {
    display: none !important;
}

/* put icon inside input as background */
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="text"],
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="email"],
body.login.procomp-lost-password-page .procomp-lost-input-wrap input[name="user_login"] {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 18px 0 68px !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 24px center !important;
    background-size: 22px 22px !important;
}

/* keep autofill aligned too */
body.login.procomp-lost-password-page .procomp-lost-input-wrap input:-webkit-autofill,
body.login.procomp-lost-password-page .procomp-lost-input-wrap input:-webkit-autofill:hover,
body.login.procomp-lost-password-page .procomp-lost-input-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: #172554 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    padding-left: 68px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 24px center !important;
    background-size: 22px 22px !important;
}

/* little more space under button */
body.login.procomp-lost-password-page .procomp-lost-card input[type="submit"],
body.login.procomp-lost-password-page .procomp-lost-card button[type="submit"] {
    margin-bottom: 16px !important;
}

body.login.procomp-lost-password-page .procomp-lost-security {
    margin-top: 0 !important;
    padding-top: 16px !important;
}