/**
 * reMembers login form styles and loading state.
 *
 * @package WHV_Remembers_Integration
 */

.whv-remembers-login-wrapper {
  max-width: 24em;
  margin: 1em 0;
  min-height: 350px;
}

.whv-remembers-login-form .whv-remembers-field {
  margin-bottom: 1em;
}

.whv-remembers-login-form .whv-remembers-field label {
  display: block;
  margin-bottom: 0.25em;
  font-weight: 600;
}

.whv-remembers-login-form input[type="email"],
.whv-remembers-login-form input[type="password"] {
  width: 100%;
  padding: 0.5em;
  box-sizing: border-box;
}

.whv-remembers-login-form .whv-remembers-actions {
  margin-top: 1.25em;
}

.whv-remembers-login-form .whv-remembers-submit {
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease;
}

.whv-remembers-login-form.whv-remembers-form-loading .whv-remembers-submit {
  pointer-events: none;
  opacity: 0.8;
  cursor: not-allowed;
}

/* Button spinner (inline with text) */
.whv-remembers-button-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: whv-remembers-spin 0.6s linear infinite;
}

/* Disable form inputs during loading */
.whv-remembers-login-form.whv-remembers-form-loading input {
  opacity: 0.7;
  cursor: not-allowed;
}

.whv-remembers-message {
  margin-top: 1em;
  min-height: 1.5em;
}

.whv-remembers-message.whv-remembers-error {
  color: #b32d2e;
}

.whv-remembers-message.whv-remembers-success {
  color: #00a32a;
}

/* Keep form visible but show loading state */
.whv-remembers-login-form.whv-remembers-form-loading .whv-remembers-loading {
  display: flex;
  margin-top: 0.75em;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9em;
  color: #666;
}

.whv-remembers-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: whv-remembers-spin 0.6s linear infinite;
}

@keyframes whv-remembers-spin {
  to {
    transform: rotate(360deg);
  }
}

.whv-remembers-loading-text {
  font-size: 0.95em;
}

.whv-remembers-logged-in {
  margin: 1em 0;
}

.whv-remembers-response {
  margin-top: 10px;
  padding: 10px;
  background: #fff5f5;

  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

.whv-remembers-success-response {
  background: #f0f8f0;
  border-left: 4px solid #00a32a;
}

.whv-remembers-error-response {
  background: #fff5f5;
  border-left: 4px solid #b32d2e;
}