/**
 * DSSA Custom PMPro Login Stylesheet — Authoritative Baseline (v2.5)
 *
 * This stylesheet defines the official design for DSSA login and reset-password forms.
 * DO NOT replace or overwrite this file in future plugin updates.
 * 
 * Key properties:
 * - Matches PMPro “Default” theme styling
 * - 100% width inside Divi layout containers
 * - Responsive padding, border, and subtle box-shadow
 * - Unified button, link, and message styling for DSSA brand consistency
 */

/* Container full width (inside Divi column) with visible border */
.custom-login-form,
.custom-reset-password-form,
.pmpro_form.custom-login-form,
.pmpro_form.custom-reset-password-form {
  width: 100%;
  box-sizing: border-box;
  padding: 22px;
  border-radius: 8px;
  border: 1px solid #e6e6e6; /* visible border */
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 0 auto 18px;
}

/* Ensure pmpro wrapper classes remain styled */
.pmpro_form {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Labels */
.pmpro_form label,
.custom-login-form label,
.custom-reset-password-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #24323a;
}

/* Inputs */
.pmpro_form input.input,
.custom-login-form input.input,
.custom-reset-password-form input.input,
.pmpro_input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid #d6d6d6;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
}

.pmpro_input:focus,
.pmpro_form input.input:focus {
  outline: none;
  border-color: #2b6b74;
  box-shadow: 0 0 0 4px rgba(43,107,116,0.06);
}

/* Password wrapper / toggle */
.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 3rem;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 40%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #0b5560;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 4px;
}
.toggle-password .eye-icon { stroke: currentColor; }

/* Remember / small link */
.remember-me { margin-bottom: 12px; font-size: 14px; color: #444; }

/* Buttons */
.pmpro_btn,
.pmpro_btn-submit,
.custom-login-form .pmpro_btn,
.custom-reset-password-form .pmpro_btn {
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  background: #053d49;
  color: #fff;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
.pmpro_btn:hover,
.pmpro_btn-submit:hover {
  background: #04343a;
}

/* Links */
.lost-password a,
.back-to-login a {
  color: #4da64d;
  text-decoration: none;
  font-weight: 600;
}
.lost-password a:hover,
.back-to-login a:hover { text-decoration: underline; }

/* Messages */
.pmpro_message {
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  animation: cpl_fade 0.25s ease-in-out;
}

.pmpro_message.pmpro_success {
  background: #e6f5ea;
  border: 1px solid #5bbd7e;
  color: #2b703e;
}

.pmpro_message.pmpro_error {
  background: #fff0f0;
  border: 1px solid #f5a6a0;
  color: #8c2f2b;
}

/* small helper */
.pmpro_intro_text { margin-bottom: 8px; color: #333; }

/* Responsive */
@media (max-width: 768px) {
  .custom-login-form,
  .custom-reset-password-form {
    padding: 16px;
  }
}

/* animation */
@keyframes cpl_fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}