:root {

    /* Login Page Images */
    /* --login-bg-main: url("/assets/foxerp_uirevamp/images/Loginimages/orangebg.png"); */
        /* Login Page Main Gradient */
    --login-bg-main-gradient-1: #DE7B9F;
    --login-bg-main-gradient-2: #F0592D;
    --login-bg-overlay: url("/assets/foxerp_uirevamp/images/Loginimages/full-bg.jpg");
    --login-side-image: url("/assets/foxerp_uirevamp/images/Loginimages/foxlogin.png");
    --forgot-side-image: url("/assets/foxerp_uirevamp/images/Loginimages/foxforgot.png");
    --login-logo-image: url("/assets/foxerp_uirevamp/images/foxerp_transparent_log.png");
    --login-logo-width: 140px;
    --login-logo-height: 40px;



    /* Login Colors */
    --login-heading-color: #F25B2E;
    --login-heading-line-color: #DF4829;
    --login-btn-gradient-top: #F15A2E;
    --login-btn-gradient-bottom: #D74027;
    --login-input-border-color: #C3C1C1;
    --login-input-focus-border-color: #5C80F6;
}
  

/* .page-card-head img.app-logo {
    display: none !important;
    opacity: 0 !important;
}

.page-card-head {
    position: relative !important;
}

.page-card-head::before {
    content: "" !important;
    display: block !important;
    background-image: var(--login-logo-image) !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    width: 160px !important;
    height: 50px !important;
    margin: 0 auto 12px auto !important;
}

.for-login .page-card-head h4 {
    visibility: hidden !important;
    position: relative !important;
    height: 24px !important;
}

.for-login .page-card-head h4::after {
    content: "Sign in to your account" !important;
    visibility: visible !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;

    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
}
 */



/* html[data-theme="light"] { */


#page-login .page-content-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    /* background: var(--login-bg-main) no-repeat center center !important; */
    background: linear-gradient(
        90deg,
        var(--login-bg-main-gradient-1) 0%,
        var(--login-bg-main-gradient-2) 100%
    ) !important;

    background-size: cover !important;
    z-index: 0 !important;
    overflow: hidden !important; 
}
 
#page-login .page-content-wrapper::after {
    content: "" !important;
    position: absolute !important;
    inset: 30px !important;
    /* background-image: url("/assets/foxerp_uirevamp/images/Loginimages/full-bg.jpg") !important;; */
    background-image: var(--login-bg-overlay) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border-radius: 35px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Hide all default frappe logos */
.page-card-head .app-logo,
.page-card-head .app-icon,
.page-card-head img,
.page-card .app-logo,
.page-card .app-icon,
.page-card img[src*="frappe"] {
    display: none !important;
}



.for-login .page-card .page-card-body .password-field .toggle-password{
    top: 10px !important;
}

/* Logo/branding */
/* .login-content.page-card:before {
    content: "" !important;
    display: block !important;
    background-image:var(--login-logo-image) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    width: 140px !important;
    height: 40px !important;
    margin-top: 10px !important;
    pointer-events: none !important;
} */

.login-content.page-card::before {
    content: "" !important;
    display: block !important;
    background-image: var(--login-logo-image) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    width: var(--login-logo-width) !important;
    height: var(--login-logo-height) !important;
    margin-top: 10px !important;
    pointer-events: none !important;
}



/* -------------------- sidebanner associated with login container at left background -------------------- */

/* Default login page image */
#page-login .page-content-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-100%, -50%) !important;
    height: 450px !important;
    width: 450px !important;
    /* background: url("/assets/foxerp_uirevamp/images/Loginimages/foxlogin.png") no-repeat center center !important; */
    background:var(--login-side-image) no-repeat center center !important;
    background-size: cover !important; 
    border-radius: 6px 0 0 6px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Forgot Password Page Image */
.for-forgot::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-100%, -50%) !important;
    height: 450px !important;
    width: 450px !important;
    /* background: url("/assets/foxerp_uirevamp/images/Loginimages/foxforgot.png") no-repeat center center !important;
     */
    background: var(--forgot-side-image) no-repeat center center !important; 
    background-size: cover !important;
    border-radius: 6px 0 0 6px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}



/* -------------------- Login box (white half) -------------------- */
.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card,
.for-email-login .page-card {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(0, -50%) !important;
    /* background-color: #ffffff !important; */
    width: 450px !important;
    height: 450px !important;  
    z-index: 3 !important;
    /* border: 2px solid #ffffff !important; */
    /* box-shadow:
        0 0 4px rgba(255, 255, 255, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.3) !important; */
    box-shadow: none !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 20px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    justify-content: center !important; 
    padding: 20px !important; 
    border: none !important;


}
/* -------------------- Header -------------------- */
.page-header {
    background: #ffffff !important;
    z-index: 9998 !important; 
    position: relative !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* -------------------- Form heading (Login) -------------------- */
.form-signin.form-login:before {
    content: "Sign in to your account" !important;
    display: block !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 16px !important; 
    font-weight: bold !important;
    line-height: 1.2 !important;
    letter-spacing: 0px !important;
    /* color: #F25B2E !important; */
    color: var(--login-heading-color) !important;
    text-align: center !important;
    margin: 0 auto 15px auto !important; 
    position: relative !important;
    padding-bottom: 25px !important; 
}


/* Add the colored line below the heading - on the form */
.form-signin.form-login {
    position: relative !important;
}

.form-signin.form-login::before {
    margin-bottom: 15px !important; 
}

.form-signin.form-login::after {
    content: "" !important;
    position: absolute !important;
    top: 25px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important; 
    height: 4px !important;  
    /* background-color: #DF4829 !important; */
    background-color: var(--login-heading-line-color) !important;
    border-radius: 3px !important;
}

/* -------------------- Hide logos -------------------- */
.page-card-head .app-icon,
.page-card-head img[src*="frappe"],
.page-card-head .login-logo,
.page-card-head .app-logo {
    display: none !important;
}

/* Hide h4 text */
.page-card-head h4 {
    display: none !important;
}

/* -------------------- Inputs -------------------- */
.email-field .email-icon,
.password-field .password-icon {
    display: none !important;
}

#login_email {
    background-color: #ffffff !important;
    /* border: 2px solid #C3C1C1 !important; */
    border: 2px solid var(--login-input-border-color) !important;
    border-radius: 7px !important;
    outline: none !important;
    height: 40px !important;
    padding-left: 20px !important; 
    font-size: 14px !important;
    position: relative !important;
    z-index: 2 !important;
}

#login_password {
    background-color: #ffffff !important;
    /* border: 2px solid #C3C1C1 !important; */
    border: 2px solid var(--login-input-border-color) !important;

    border-radius: 7px !important;
    outline: none !important;
    height: 40px !important;
    padding-left: 12px !important; 
    font-size: 14px !important;
}

#login_email:focus,
#login_password:focus {
    /* border-color: #5C80F6 !important; */
    border-color: var(--login-input-focus-border-color) !important;

}

.email-field,
.password-field {
    border-radius: 7px !important;
    position: relative !important;
}



.form-signin.form-login .email-field::before {
    content: "";
    position: absolute;
    display: none;
}
.form-signin.form-login .email-field:focus-within::before {
    content: "Email" !important;
    display: block;
    position: absolute !important;
    top: -8px !important;
    left: 12px !important;
    background: white !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    /* color: #5C80F6 !important; */
    color: var(--login-input-focus-border-color) !important;
    font-weight: bold !important;
    z-index: 3 !important;
}


/* Forgot PAssword */

.form-signin.form-login .password-field {
    position: relative;
}



.form-signin.form-login .password-field::before {
    content: "";
    display: none;
    position: absolute;
}
.form-signin.form-login .password-field:focus-within::before {
    content: "Password" !important;
    display: block !important;
    position: absolute !important;
    top: -8px !important;
    left: 12px !important;
    background: white !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    /* color: #5C80F6 !important; */
    color: var(--login-input-focus-border-color) !important;
    font-weight: bold !important;
    z-index: 3 !important;
}


/* -------------------- Form heading (Forgot Password) -------------------- */
.form-signin.form-forgot {
    position: relative !important; /* make :after position relative to this element */
}

/* -------------------- Heading -------------------- */
.form-signin.form-forgot:before {
    content: "Forgot Password" !important;
    display: block !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 18px !important; 
    font-weight: bold !important;
    line-height: 1.2 !important;
    letter-spacing: 0px !important;
    /* color: #DF4829 !important; */
    color: var(--login-heading-line-color) !important;
    text-align: center !important;
    /* margin: 0 auto 15px auto !important;  */
    margin-top: 30px !important;
    position: relative !important;
    padding-bottom: 25px !important; 
}

/* -------------------- Line below text -------------------- */
.form-signin.form-forgot:after {
    content: "" !important;
    position: absolute !important;
    top: 25px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important; 
    height: 4px !important;  
    /* background-color: #DF4829 !important; */
     background-color: var(--login-heading-line-color) !important;
    border-radius: 3px !important;
    margin-top: 30px !important;

}



/* -------------------- Forgot Password Email Input -------------------- */

.form-signin.form-forgot .email-field input {
    background-color: #F9F9F9 !important;  /* subtle short/light bg */
    /* border: 1px solid #C3C1C1 !important; */
    border: 2px solid var(--login-input-border-color) !important;
    border-radius: 7px !important;         /* smooth rounded corners */
    padding: 10px 12px !important;         /* good spacing */
    font-size: 14px !important;
    color: #333 !important;
    box-shadow: none !important;           /* clean look */
    outline: none !important;
}

/* On focus - make it cleanly highlighted */
.form-signin.form-forgot .email-field input:focus {
    /* border-color: #5C80F6 !important; */
    border-color: var(--login-input-focus-border-color) !important;
    background-color: #fff !important;
}

#forgot_email {
    background-color: #ffffff !important;
    /* border: 2px solid #5C80F6 !important; */
    border-color: var(--login-input-focus-border-color) !important;
    border-radius: 7px !important;
    outline: none !important;
    height: 40px !important;
    padding-left: 20px !important; 
    font-size: 14px !important;
    position: relative !important;
    z-index: 2 !important;
}
/* -------------------- Reset Password Button -------------------- */
.btn.btn-sm.btn-primary.btn-block.btn-forgot {
    /* background: linear-gradient(to bottom, #F15A2E, #D74027) !important; */
    background: linear-gradient(
        to bottom,
        var(--login-btn-gradient-top),
        var(--login-btn-gradient-bottom)
    ) !important;

    color: white !important;
    border-radius: 20px !important;
    width: 40% !important;
    margin: 0 auto !important;
    margin-top: 40px !important;
    display: block !important;
    border: none !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* Optional hover effect (same as login) */
.btn.btn-sm.btn-primary.btn-block.btn-forgot:hover {
    background-color: #DF4829 !important; 
}
.btn.btn-sm.btn-primary.btn-block.btn-forgot {
    position: relative !important;
    color: transparent !important; /* hide original text */
}

.btn.btn-sm.btn-primary.btn-block.btn-forgot::before {
    content: "Send Email" !important;
    color: white !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
/* Make sure the actions section hugs the input field closely */
.form-signin.form-forgot .page-card-actions {
    display: flex !important;
    flex-direction: column-reverse !important; /* link above button */
    align-items: flex-start !important;
    margin-top: 0 !important; /* remove default gap */
    padding-top: 0 !important;
}

/* Remove unnecessary top margin from the button */
.btn.btn-sm.btn-primary.btn-block.btn-forgot {
    margin-top: 15px !important; /* reduced from 40px for closer placement */
}

/* Back to Login link styling */
.form-signin.form-forgot .sign-up-message {
    margin-top: 0 !important;  /* eliminate top margin */
    margin-bottom: 5px !important;
    text-align: left !important;
    width: 100% !important;
    margin-left: 10px !important;
    line-height: 1 !important;
}

.form-signin.form-forgot .sign-up-message a {
    color: #5C5C5C !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    position: relative !important;
}

/* Add the '<' icon */
.form-signin.form-forgot .sign-up-message a::before {
    content: "<" !important;
    display: inline-block !important;
    margin-right: 4px !important;
    font-weight: bold !important;
    color: #000 !important;
}

.form-signin.form-forgot .sign-up-message a:hover {
    text-decoration: underline !important;
}

/* For Forgot Password page image */
/* Forgot Password Page Banner */


/* Hide social logins */
.social-logins {
    display: none !important;
}

/* -------------------- Inputs width adjustment -------------------- */


.for-login .page-card input,
.for-forgot .page-card input,
.for-login-with-email-link .page-card input,
.for-signup .page-card input,
.for-email-login .page-card input {
    width: 250px !important;       
    padding-left: 40px !important; 
    padding-right: 40px !important;
    box-sizing: border-box !important;
    margin-bottom: 18px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    margin-top: 20px !important;
}

/* Remove bottom margin fro the last input so button isn't pushed too far */
.for-login .page-card input:last-child,
.for-forgot .page-card input:last-child,
.for-login-with-email-link .page-card input:last-child,
.for-signup .page-card input:last-child,
.for-email-login .page-card input:last-child {
    margin-bottom: 0 !important;
}


/* -------------------- Login Button -------------------- */
.btn.btn-sm.btn-primary.btn-block.btn-login {
/* background: linear-gradient(to bottom, #F15A2E, #D74027) !important; */
    background: linear-gradient(
        to bottom,
        var(--login-btn-gradient-top),
        var(--login-btn-gradient-bottom)
    ) !important;

    color: white !important;
    border-radius: 20px !important; 
    width: auto !important;
    min-width: 50% !important;
    margin: 0 auto !important;
    margin-top: 40px !important;
    display: block !important;
    border: none !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
}

.btn.btn-sm.btn-primary.btn-block.btn-login:hover {
    background-color: #DF4829 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(2, 106, 57, 0.3) !important;
}

/* -------------------- Forgot Password -------------------- */
.page-card-body .forgot-password-message {
    color: #5C5C5C !important;
    font-weight: bold !important;
    margin: 14px 0 !important; /* reduced from 15px */
    font-family: "Nunito Sans", sans-serif !important;
}

.page-card-body .forgot-password-message a {
    color: #5C5C5C !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important; 
}


.page-card-body .forgot-password-message a:hover {
    /* color: #DF4829 !important; */
    color: var(--login-heading-line-color) !important;
    text-decoration: underline !important;
}

.web-footer{
    display: none !important;
}


/* -------------------- Responsive below 990px -------------------- */
@media screen and (max-width: 990px) {

    /* Adjust main background */
    body .page-content-wrapper {
        background-size: cover !important;
        position: relative !important;
        height: auto !important;
    }
    .sign-up-message a[href^="#"]::before {
        content: none !important;
    }

    /* Overlay image */
    body .page-content-wrapper::after {
        inset: 15px !important;
        background-size: cover !important;
        border-radius: 20px !important;
    }

    /* Remove ALL left side images for mobile - BOTH SELECTORS */
    body .page-content-wrapper::before,
    body .for-forgot::before {
        display: none !important;
    }

    .for-login .page-card .page-card-body .password-field .toggle-password {
        top: 10px !important;
        margin-right: 20px !important;
    }

    /* Adjust login AND forgot password containers */
    .for-login .page-card,
    .for-forgot .page-card,
    .for-login-with-email-link .page-card,
    .for-signup .page-card,
    .for-email-login .page-card {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        max-width: 400px !important;
        margin: 20px auto !important;
        height: 380px !important;
        border-radius: 10px !important;
        padding: 20px !important;
    }

    /* Adjust logo */
    .login-content.page-card:before {
        width: 140px !important;
        height: 40px !important;
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }

    /* Adjust heading for login */
    .form-signin.form-login:before {
        font-size: 14px !important;
        padding-bottom: 15px !important;
    }

    .form-signin.form-login::after {
        top: 20px !important;
        width: 40px !important;
        height: 3px !important;
    }

    /* Adjust heading for forgot password */
    .form-signin.form-forgot:before {
        font-size: 14px !important;
        margin-top: 10px !important;
        padding-bottom: 15px !important;
    }

    .form-signin.form-forgot::after {
        top: 15px !important;
        width: 40px !important;
        height: 3px !important;
        margin-top: 10px !important;
    }

    /* Login button */
    .btn.btn-sm.btn-primary.btn-block.btn-login {
        /* width: 70% !important; */
        font-size: 13px !important;
        padding: 6px 12px !important;
        margin-top: 20px !important;
    }

    /* Forgot password button */
    .btn.btn-sm.btn-primary.btn-block.btn-forgot {
        width: 70% !important;
        font-size: 13px !important;
        padding: 6px 12px !important;
        margin-top: 20px !important;
    }

    /* Forgot password link */
    .page-card-body .forgot-password-message {
        font-size: 10px !important;
        margin: 10px 0 !important;
    }

    .page-card-body .forgot-password-message a {
        font-size: 10px !important;
    }

    /* Adjust input fields for mobile */
    .for-login .page-card input,
    .for-forgot .page-card input,
    .for-login-with-email-link .page-card input,
    .for-signup .page-card input,
    .for-email-login .page-card input {
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}


/* Additional mobile adjustments for login page */
@media (max-width: 480px) {
    .for-login .page-card {
        margin-top: 180px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .form-signin.form-forgot .sign-up-message a::before {
        content: none !important;
        display: none !important;
}
}


@media (max-width: 380px) {
    .for-login .page-card {
        margin-top: 100px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

@media (max-width: 300px) {
    .for-login .page-card {
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Additional mobile adjustments for forgot password page */
@media (max-width: 480px) {
    .for-forgot .page-card {
        margin-top: 200px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .form-signin.form-forgot:after {
    margin-top: 50px !important;
    }
    .form-signin.form-login::after {

    margin-top: 50px !important;

}
}

@media (max-width: 380px) {
    .for-forgot .page-card {
        margin-top: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
        .form-signin.form-forgot:after {
    margin-top: 50px !important;
    }
    .form-signin.form-login::after {

    margin-top: 50px !important;

}
}

@media (max-width: 300px) {
    .for-forgot .page-card {
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
        .form-signin.form-forgot:after {
    margin-top: 50px !important;
    }
    .form-signin.form-login::after {

    margin-top: 50px !important;

}
}
/* } */

/* html, body {
    touch-action: manipulation !important;
    overflow-x: hidden !important;
} */