/* ─────────────────────────────────────────
   全ログイン画面 共通ロゴ画像差し替え
───────────────────────────────────────── */
body.login #login h1 a,
body.login #login h1.wp-login-logo a {
  background-image: url("https://otonaevent.com/wp-content/uploads/2024/10/名称未設定のデザイン__99_-removebg-preview.png") !important;
  width: 200px !important;
  height: 60px !important;
  margin: 0 auto 30px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  display: block !important;
  text-indent: -9999px !important;
}

/* ──────────
   lostpassword ページ全体の背景
────────── */
body.login.login-action-lostpassword {
  background: #f2f6fa;
}

/* ──────────
   lostpassword フォームコンテナ
────────── */
body.login.login-action-lostpassword #login {
  width: min(400px, calc(100% - 32px));
  margin: 5% auto 0;
  padding: 40px 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

/* ──────────
   ラベル／入力欄のスタイル
────────── */
body.login.login-action-lostpassword .login form p label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  font-size: 14px;
}
body.login.login-action-lostpassword .login form input[type="text"],
body.login.login-action-lostpassword .login form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
}

/* ──────────
   reCAPTCHA の調整
────────── */
body.login.login-action-lostpassword .g-recaptcha {
  transform: scale(0.9);
  transform-origin: 0 0;
  margin-bottom: 20px;
}
/* プラグインの既定の 0.9 倍では入力欄より約 4px 右へ出るので、入力欄の幅に収める */
body.login.login-action-login .g-recaptcha {
  transform: scale(0.88) !important;
}

/* ──────────
   パスワード取得ボタン
────────── */
body.login.login-action-lostpassword .login .button.button-primary {
  width: 100%;
  padding: 14px;
  background-color: #0073aa;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
  margin-bottom: 20px;
  cursor: pointer;
}
body.login.login-action-lostpassword .login .button.button-primary:hover {
  background-color: #006799;
}

/* ──────────
   メッセージ／エラースタイル
────────── */
body.login.login-action-lostpassword .login .message {
  background: #e6f4ea;
  border-left: 4px solid #34a853;
  padding: 12px;
  margin-bottom: 16px;
  color: #202124;
  border-radius: 4px;
}
body.login.login-action-lostpassword .login .error {
  background: #fdecea;
  border-left: 4px solid #d93025;
  padding: 12px;
  margin-bottom: 16px;
  color: #202124;
  border-radius: 4px;
}

/* ──────────
   狭い画面
────────── */
/* Google ボタン（幅 320px 固定）の iframe は左右に透明な余白が 10px ずつ付くので、余白だけ切って横スクロールを防ぐ */
@media (max-width: 340px) {
  body.login.login-action-login .googlesitekit-sign-in-with-google__frontend-output-button {
    overflow-x: clip;
  }
}

/* カードとフォームの余白を詰めて、reCAPTCHA の入る幅を確保する */
@media (max-width: 440px) {
  body.login.login-action-lostpassword #login {
    padding: 24px 12px;
  }
  body.login.login-action-lostpassword #lostpasswordform {
    padding: 20px 14px;
  }
}

/* カードの内側が 320px に足りない画面は Google ボタンを縮める */
@media (max-width: 375px) {
  body.login.login-action-lostpassword .googlesitekit-sign-in-with-google__frontend-output-button {
    margin-bottom: -8px;
    transform: scale(0.82);
    transform-origin: 0 0;
  }
}

/* それでも足りない画面は reCAPTCHA を縮める。プラグインのインライン指定に勝つよう !important が要る */
@media (max-width: 359px) {
  body.login.login-action-lostpassword .g-recaptcha {
    margin-bottom: 8px;
    transform: scale(0.75) !important;
  }
}