/* Common responsive container for all Shoplic Members forms */

.sm-form-container {
  width: 100%;
  max-width: 640px; /* design guide default */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Provide slightly narrower width on small tablets like Bootstrap container */
/* Optional size modifiers */
.sm-form-container--wide { max-width: 768px; }

/* Breakpoint hooks kept minimal; sizing is controlled by max-width above */

/* Unified alert styles (shared across all forms) */
.sm-alerts { width: 100%; }
.sm-alerts .sm-alert {
  margin-top: 12px;           /* match profile-form messages */
  padding: 12px;              /* match profile-form messages */
  border-radius: 4px;         /* match profile-form messages */
  text-align: center;         /* match profile-form messages */
  font-weight: 500;           /* match profile-form messages */
}
.sm-alerts .sm-alert--success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}
.sm-alerts .sm-alert--error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* Reset all box-shadows within shortcode-rendered forms */
/* Containers (form elements using plugin classes) */
.sm-form,
.login-form,
.profile-form,
.register-form,
.sm-change-password-form,
.sm-resetpassword-form,
.sm-lostpassword-form {
  box-shadow: none !important;
}

/* Interactive elements inside plugin forms */
.sm-form input,
.sm-form select,
.sm-form textarea,
.sm-form button,
.sm-form .sm-button,
.login-form input,
.login-form button,
.profile-form input,
.profile-form button,
.register-form input,
.register-form button {
  box-shadow: none !important;
}

/* Ensure focus/active states also have no shadow */
.sm-form input:focus,
.sm-form select:focus,
.sm-form textarea:focus,
.sm-form button:focus,
.sm-form .sm-button:focus,
.sm-form input:active,
.sm-form button:active,
.sm-form .sm-button:active,
.login-form input:focus,
.login-form button:focus,
.profile-form input:focus,
.profile-form button:focus,
.register-form input:focus,
.register-form button:focus,
.login-form input:active,
.login-form button:active,
.profile-form input:active,
.profile-form button:active,
.register-form input:active,
.register-form button:active {
  box-shadow: none !important;
}