/**
 * TheBeach: style WordPress password reset screens.
 *
 * These screens are used when users click "Lost your password?" from the
 * WooCommerce My Account login form (wp-login.php actions: lostpassword, rp, resetpass).
 */

/* Scope styling to password-reset related login actions only. */
body.login.login-action-lostpassword,
body.login.login-action-checkemail,
body.login.login-action-rp,
body.login.login-action-resetpass {
  --thebeach-primary: #00b9d3;
  --thebeach-primary-700: #009bb1;
  --thebeach-text: #0f172a;
  --thebeach-muted: #475569;
  --thebeach-border: #e2e8f0;
  --thebeach-bg: #f8fafc;

  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, rgba(0, 185, 211, 0.12), rgba(248, 250, 252, 1) 45%) fixed;
  min-height: 100vh;
}

body.login.login-action-lostpassword #login,
body.login.login-action-checkemail #login,
body.login.login-action-rp #login,
body.login.login-action-resetpass #login {
  width: 100%;
  max-width: 28rem;
  padding: 2.5rem 1rem 0;
}

body.login.login-action-lostpassword #login h1 a,
body.login.login-action-checkemail #login h1 a,
body.login.login-action-rp #login h1 a,
body.login.login-action-resetpass #login h1 a {
  background-image: url("../img/logo/logo.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 190px;
  height: 52px;
  margin: 0 auto 1.25rem;
}

/* Card-like forms. */
body.login.login-action-lostpassword #lostpasswordform,
body.login.login-action-rp #resetpassform,
body.login.login-action-resetpass #resetpassform {
  border: 1px solid var(--thebeach-border);
  border-radius: 0.75rem;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Messages (errors, info, success). */
body.login.login-action-lostpassword #login_error,
body.login.login-action-checkemail #login_error,
body.login.login-action-rp #login_error,
body.login.login-action-resetpass #login_error,
body.login.login-action-lostpassword .message,
body.login.login-action-checkemail .message,
body.login.login-action-rp .message,
body.login.login-action-resetpass .message {
  border-radius: 0.75rem;
  border: none !important;
  background: #fff;
  padding: 1rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.login.login-action-lostpassword #login_error,
body.login.login-action-checkemail #login_error,
body.login.login-action-rp #login_error,
body.login.login-action-resetpass #login_error {
  border-left-color: #dc3545;
}

body.login.login-action-lostpassword .message,
body.login.login-action-checkemail .message,
body.login.login-action-rp .message,
body.login.login-action-resetpass .message {
  border-left-color: var(--thebeach-primary);
}

/* Labels & inputs. */
body.login.login-action-lostpassword #lostpasswordform label,
body.login.login-action-rp #resetpassform label,
body.login.login-action-resetpass #resetpassform label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--thebeach-text);
  margin-bottom: 0.5rem;
}

body.login.login-action-lostpassword #lostpasswordform .input,
body.login.login-action-rp #resetpassform .input,
body.login.login-action-resetpass #resetpassform .input {
  width: 100%;
  border: 1px solid var(--thebeach-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  background: #fff;
  color: var(--thebeach-text);
  box-shadow: none;
}

body.login.login-action-lostpassword #lostpasswordform .input:focus,
body.login.login-action-rp #resetpassform .input:focus,
body.login.login-action-resetpass #resetpassform .input:focus {
  border-color: var(--thebeach-primary);
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 185, 211, 0.18);
}

/* Primary button. */
body.login.login-action-lostpassword #wp-submit,
body.login.login-action-rp #wp-submit,
body.login.login-action-resetpass #wp-submit {
  width: 100%;
  border: none !important;
  background: var(--thebeach-primary);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  border-radius: 0.5rem;
  font-weight: 400;
  padding: 0.75rem 1rem;
  text-shadow: none;
}

body.login.login-action-lostpassword #wp-submit:hover,
body.login.login-action-rp #wp-submit:hover,
body.login.login-action-resetpass #wp-submit:hover {
  border-color: var(--thebeach-primary-700);
  background: var(--thebeach-primary-700);
}

body.login.login-action-lostpassword #wp-submit:focus,
body.login.login-action-rp #wp-submit:focus,
body.login.login-action-resetpass #wp-submit:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 185, 211, 0.22);
}

/* Password visibility toggle button alignment on reset screens. */
body.login.login-action-rp .wp-pwd button.button,
body.login.login-action-resetpass .wp-pwd button.button {
  border-radius: 0.5rem;
  border-color: var(--thebeach-border);
}

/* Footer links. */
body.login.login-action-lostpassword #nav,
body.login.login-action-lostpassword #backtoblog,
body.login.login-action-checkemail #nav,
body.login.login-action-checkemail #backtoblog,
body.login.login-action-rp #nav,
body.login.login-action-rp #backtoblog,
body.login.login-action-resetpass #nav,
body.login.login-action-resetpass #backtoblog {
  text-align: center;
}

body.login.login-action-lostpassword #nav a,
body.login.login-action-lostpassword #backtoblog a,
body.login.login-action-checkemail #nav a,
body.login.login-action-checkemail #backtoblog a,
body.login.login-action-rp #nav a,
body.login.login-action-rp #backtoblog a,
body.login.login-action-resetpass #nav a,
body.login.login-action-resetpass #backtoblog a {
  color: var(--thebeach-muted);
}

body.login.login-action-lostpassword #nav a:hover,
body.login.login-action-lostpassword #backtoblog a:hover,
body.login.login-action-checkemail #nav a:hover,
body.login.login-action-checkemail #backtoblog a:hover,
body.login.login-action-rp #nav a:hover,
body.login.login-action-rp #backtoblog a:hover,
body.login.login-action-resetpass #nav a:hover,
body.login.login-action-resetpass #backtoblog a:hover {
  color: var(--thebeach-primary);
  text-decoration: underline;
}