/******* Do not edit this file *******
Code Snippets Manager
Saved: Nov 05 2025 | 01:25:28 */
@charset "UTF-8";
/* 1. Let Elementor handle the box */
.mp_wrapper.mp_login_form {
  display: flex;
  flex-direction: column-reverse;
  /* show form first, socials after */
  gap: 0;
  /* we'll control spacing below */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
}
/* 2. Form styling */
.mp_wrapper.mp_login_form .mepr-form {
  width: 100%;
}
.mp_wrapper.mp_login_form .mp-form-row {
  margin-bottom: 0.9rem;
}
.mp_wrapper.mp_login_form .mp-form-label label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #5e513a;
  /* warm brown */
  font-family: "Crimson Text", "Georgia", serif;
}
.mp_wrapper.mp_login_form input[type="text"], .mp_wrapper.mp_login_form input[type="password"], .mp_wrapper.mp_login_form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d6c9b3;
  border-radius: 6px;
  background: #fffaf3;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mp_wrapper.mp_login_form input:focus {
  outline: none;
  border-color: #8a7b5a;
  box-shadow: 0 0 0 2px rgba(138, 123, 90, 0.12);
}
/* password reveal button alignment */
.mp_wrapper.mp_login_form .mp-hide-pw {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mp_wrapper.mp_login_form .mp-hide-pw input {
  flex: 1 1 auto;
}
.mp_wrapper.mp_login_form .mp-hide-pw .button {
  background: transparent;
  border: none;
  box-shadow: none;
}
/* remember me */
.mp_wrapper.mp_login_form input[type="checkbox"] {
  accent-color: #8a7b5a;
}
/* submit button */
.mp_wrapper.mp_login_form .mepr-share-button, .mp_wrapper.mp_login_form input[type="submit"] {
  background: #6a7b57;
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.mp_wrapper.mp_login_form input[type="submit"]:hover {
  background: #556245;
  transform: translateY(-1px);
}
/* forgot password */
.mp_wrapper.mp_login_form .mepr-login-actions {
  margin-top: 0.8rem;
}
.mp_wrapper.mp_login_form .mepr-login-actions a {
  color: #c47a4a;
  font-weight: 500;
  text-decoration: none;
}
.mp_wrapper.mp_login_form .mepr-login-actions a:hover {
  text-decoration: underline;
}
/* 3. Social logins BELOW the form, with nice spacing */
.mp_wrapper.mp_login_form > div:first-child {
  /* this is the social login container after we reversed the column */
  margin-top: 1.35rem;
}
.cspf-shortcode-login-button {
  display: block;
  margin-bottom: 0.6rem;
}
.cspfsl-social-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  text-decoration: none;
  color: #fff !important;
  font-weight: 600;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.cspfsl-social-login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.facebook-login-btn {
  background: #4267B2;
}
.google-login-btn {
  background: #DB4437;
}
/* OR divider */
.cspfsl-div-content {
  margin-top: 2rem !important;
  text-align: center;
  margin-bottom: 0.75rem;
}
.cspfsl-or-text {
  position: relative;
  display: inline-block;
  padding: 0 1rem;
  color: #7a6b58;
  font-style: italic;
}
.cspfsl-or-text::before, .cspfsl-or-text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 48px;
  height: 1px;
  background: #e3d7c4;
}
.cspfsl-or-text::before {
  right: 100%;
  margin-right: 0.5rem;
}
.cspfsl-or-text::after {
  left: 100%;
  margin-left: 0.5rem;
}
.mepr-login-actions {
  order: 3;
  /* move below button + social */
  text-align: right;
  margin-top: 0.5rem;
}
/* 4. Make sure it doesn’t fight the two-column layout on smaller screens */
@media (max-width: 768px) {
  .mp_wrapper.mp_login_form {
    max-width: 480px;
  }
}