/* ============================================================
   FINAL LOGIN FIX (Centering + Forced Grey Box)
   ============================================================ */

/* 1. BACKGROUND & CENTER ALIGNMENT */
html, body.pagelayout-login {
    height: 100% !important;
    min-height: 100vh !important;
}

body.pagelayout-login,
body[id*="page-login"] {
    background: url('https://login.ehealthier.com.au/static/media/login-image.eac534ee.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    
    /* Center the box */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 2. MAKE ALL OUTER WRAPPERS TRANSPARENT */
body.pagelayout-login #page-wrapper,
body.pagelayout-login #page,
body.pagelayout-login #region-main,
body.pagelayout-login .login-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* 3. THE "SPRAY PAINT" METHOD (Force Grey on the Box) */
/* We target the card AND the card-body AND any internal divs */
body.pagelayout-login .card,
body.pagelayout-login .card-body,
body.pagelayout-login .loginpanel,
body.pagelayout-login .login-container {
    
    /* Using 'background' shorthand overrides everything */
    background: rgba(255, 255, 255, 0.95) !important; 
    background-color: rgba(255, 255, 255, 0.95) !important; 
    
    border: none !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    color: #333 !important; /* Ensure text is dark so it shows on grey */
}

/* 4. RESET INPUT FIELDS TO WHITE */
/* Since we painted everything grey, we must make the text boxes white again */
body.pagelayout-login input.form-control,
body.pagelayout-login input[type="text"],
body.pagelayout-login input[type="password"] {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

/* 5. CARD SIZING */
body.pagelayout-login .card,
body.pagelayout-login .loginpanel {
    max-width: 400px !important;
    width: 100% !important;
    padding: 20px !important;
    margin: 0 auto !important;
}

/* 6. HIDE HEADER/FOOTER */
body.pagelayout-login .navbar,
body.pagelayout-login #page-footer,
body.pagelayout-login .site-footer {
    display: none !important;
}