/* ===========================================================

   Modernize Ultimate Member “Reset Request” and “Change Password”

   ===========================================================

   Targets both “request reset” (.um-um_password) and 

   “change password” (.um-um_password_id) forms. */



  

/* 1) Outer container: white background, teal border, subtle shadow, centered */

.um.um-password.um-um_password_id > .um-form,

.um.um-password.um-um_password   > .um-form {

  max-width: 400px;

  margin: 40px auto;

  padding: 30px;

  background-color: #ffffff;

  border: 2px solid #76B999;

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.10);

}



/* 2) Force full opacity (UM sometimes injects inline opacity) */

.um.um-password.um-um_password_id[style*="opacity"],

.um.um-password.um-um_password  [style*="opacity"] {

  opacity: 1 !important;

}



/* 3) Field wrappers (spacing) */

.um.um-password.um-um_password_id .um-field-password,

.um.um-password.um-um_password   .um-field-password,

.um.um-password.um-um_password_id .um-field-type_password,

.um.um-password.um-um_password   .um-field-type_password {

  margin-bottom: 15px;

}



/* 4) Labels inside those forms */

.um.um-password.um-um_password_id label,

.um.um-password.um-um_password   label {

  display: block;

  font-weight: 600;

  font-size: 15px;

  color: #2f454a;

  margin-bottom: 6px;

}



/* 5) Input fields: full width, light gray border, padding */

.um.um-password.um-um_password_id input[type="password"],

.um.um-password.um-um_password   input[type="password"],

.um.um-password.um-um_password_id input[type="text"],

.um.um-password.um-um_password   input[type="text"],

.um.um-password.um-um_password_id input[type="email"],

.um.um-password.um-um_password   input[type="email"] {

  width: 100%;

  padding: 10px 14px;

  border: 1px solid #bbb;

  border-radius: 5px;

  background-color: #fff;

  color: #2f454a;

  box-sizing: border-box;

}



/* 6) Input focus: teal border + glow */

.um.um-password.um-um_password_id input:focus,

.um.um-password.um-um_password   input:focus {

  border-color: #76B999;

  box-shadow: 0 0 0 3px rgba(118,185,153,0.20);

  outline: none;

}



/* 7) “Submit” wrapper: center + top margin */

.um.um-password.um-um_password_id .um-col-alt.um-col-alt-b,

.um.um-password.um-um_password   .um-col-alt.um-col-alt-b {

  text-align: center;

  margin-top: 20px;

}



/* 8) Submit button styling */

.um.um-password.um-um_password_id .um-button,

.um.um-password.um-um_password   .um-button {

  display: inline-block;

  background-color: #76B999;   /* teal */

  color: #ffffff;              /* white text */

  font-weight: 700;

  font-size: 16px;

  border: none;

  border-radius: 5px;

  padding: 10px 22px;

  cursor: pointer;

  transition: background-color 0.25s ease-in-out;

  text-align: center;

  box-sizing: border-box;

}



/* 9) Submit button hover */

.um.um-password.um-um_password_id .um-button:hover,

.um.um-password.um-um_password   .um-button:hover {

  background-color: #5aa884; /* darker teal */

}



/* 10) Force any UM “.um-field-area” or “.um-field-block” to full width */

.um.um-password.um-um_password_id .um-field-area,

.um.um-password.um-um_password   .um-field-area,

.um.um-password.um-um_password_id .um-field-block,

.um.um-password.um-um_password   .um-field-block {

  width: 100%;

  margin: 0;

  padding: 0;

}



/* 11) Center any UM‐injected block messages (e.g. “check your email”) */

.um.um-password.um-um_password_id .um-field-block .um-field-block,

.um.um-password.um-um_password   .um-field-block .um-field-block,

.um.um-password.um-um_password_id .um-request_name,

.um.um-password.um-um_password   .um-request_name,

.um.um-password.um-um_password_id .um-clear,

.um.um-password.um-um_password   .um-clear {

  text-align: center;

  color: #2f454a;

}



/* 12) (Optional) Center any H1/H2 inside those wrappers */

.um.um-password.um-um_password_id h1,

.um.um-password.um-um_password   h1,

.um.um-password.um-um_password_id h2,

.um.um-password.um-um_password   h2 {

  text-align: center;

  color: #2f454a;

  margin-bottom: 20px;

}



/* ================================

   Ultimate Member “Login” Form Overrides

   ================================ */



/* 1) Container: white background, teal border, centered */

.um.um-login .um-form {

  max-width: 400px;

  margin: 40px auto;

  padding: 30px;

  background-color: #ffffff;

  border: 2px solid #76B999;

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);

}



/* 2) Force full opacity (UM sometimes injects inline opacity) */

.um.um-login[style*="opacity"] {

  opacity: 1 !important;

}



/* 3) Field wrappers: spacing between fields */

.um.um-login .um-field {

  margin-bottom: 15px;

}



/* 4) Labels */

.um.um-login label {

  display: block;

  font-weight: 600;

  font-size: 15px;

  color: #2f454a;

  margin-bottom: 6px;

}



/* 5) Input fields: full width, light gray border, padding */

.um.um-login input[type="text"],

.um.um-login input[type="email"],

.um.um-login input[type="password"] {

  width: 100%;

  padding: 10px 14px;

  border: 1px solid #bbb;

  border-radius: 5px;

  background-color: #fff;

  color: #2f454a;

  box-sizing: border-box;

}



/* 6) Input focus: teal border + subtle glow */

.um.um-login input:focus {

  border-color: #76B999;

  box-shadow: 0 0 0 3px rgba(118, 185, 153, 0.20);

  outline: none;

}



/* 7) “Remember me” checkbox row: align items */

.um.um-login .um-field-checkbox {

  display: flex;

  align-items: center;

  margin-bottom: 15px;

}

.um.um-login .um-field-checkbox label {

  margin: 0 0 0 8px;

  font-weight: 500;

  color: #2f454a;

}



/* 8) “Submit” wrapper: center + top margin */

.um.um-login .um-clear {

  text-align: center;

  margin-top: 20px;

}



/* 9) Submit button styling */

.um.um-login .um-button {

  display: inline-block;

  background-color: #76B999;

  color: #ffffff;

  font-weight: 700;

  font-size: 16px;

  border: none;

  border-radius: 5px;

  padding: 10px 22px;

  cursor: pointer;

  transition: background-color 0.25s ease-in-out;

  text-align: center;

  box-sizing: border-box;

}



/* 10) Submit button hover */

.um.um-login .um-button:hover {

  background-color: #5aa884;

}



/* 11) Links (“Forgot password?”, “Register”) */

.um.um-login .um-login-footer a {

  color: #76B999;

  text-decoration: none;

  font-weight: 500;

}

.um.um-login .um-login-footer a:hover {

  color: #5aa884;

}



/* 12) Any UM “.um-field-area” or “.um-field-block” to full width */

.um.um-login .um-field-area,

.um.um-login .um-field-block {

  width: 100%;

  margin: 0;

  padding: 0;

}



/* 13) Center any UM-injected block messages (e.g. “login failed”) */

.um.um-login .um-field-block,

.um.um-login .um-login-heading {

  text-align: center;

  color: #2f454a;

}



/* 14) Optional: Center the “Login” heading */

.um.um-login h2 {

  text-align: center;

  color: #2f454a;

  margin-bottom: 20px;

}