/*
 * ログインページ（固定ページ ID 228。フォームは BuddyPress のログインブロック、その下の案内は固定ページの本文）
 *
 * 見た目は確認ページ（/join/：google-welcome.css・guest-join.css）にそろえている。
 * 白いカード1枚、ラベル 14px、入力欄 16px、濃い色のボタン。
 *
 * セレクタに .widget_bp_core_login_widget や .login-submit を重ねているのは、DB 側で有効なままかもしれない
 * WPCode（#1918・#2077 など。body.page-id-228 #bp-login-widget-form …）の指定に勝つため。
 */

/* ---- ページの枠 ---- */
body.page-id-228 #content-wrap {
  height: auto;
  overflow-y: visible;
}
/* 本文の枠だけ（.container はフッターにもあり、そちらに当たるとフッターのメニューが崩れる） */
body.page-id-228 #main .container {
  display: flex;
  justify-content: center;
}
/* 上余白はヘッダー下の標準余白（#content-wrap）に任せる */
@media (min-width: 768px) {
  body.page-id-228 #main {
    padding: 0 70px 70px;
  }
}

/* ---- カード ---- */
body.page-id-228 .entry .widget_bp_core_login_widget {
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 28px;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: #1f2430;
}
/* 見出し（フォームは BuddyPress が出力するので、ここで足す） */
body.page-id-228 .entry .widget_bp_core_login_widget::before {
  content: "ログイン";
  display: block;
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #1f2430;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form {
  margin: 0;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form p {
  margin: 0;
  padding: 0;
}

/* ---- Google でログイン（Site Kit がフォームの先頭にボタンを差し込む）：下の欄と線で区切る ---- */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .googlesitekit-sign-in-with-google__frontend-output-button {
  display: flex;
  justify-content: center;
  max-width: none;
  /* ボタンの高さで固定する：出る前から場所を取り、Google のスクリプトが描く途中で一瞬高くなっても下の欄を動かさない */
  box-sizing: content-box;
  height: 44px;
  overflow: hidden;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #e5e7eb;
}
/* Google のボタン（iframe）は左右に負の余白を持つので、親の幅で切られないようにする */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .googlesitekit-sign-in-with-google__frontend-output-button iframe {
  max-width: none;
}

/* ---- ラベル ---- */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-username label,
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-password label {
  display: block;
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #1f2430;
}
/* BuddyPress のラベルは「ユーザー名」だけなので、メールアドレスでも入れることを足す */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-username label::after {
  content: " / メールアドレス";
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-password {
  margin-top: 20px;
}

/* ---- 入力欄：16px（iPhone の Safari は、16px 未満の欄をタップすると画面を拡大する） ---- */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form input.input {
  display: block;
  width: 100%;
  /* 高さは固定する（フォントの読み込み前後で行の高さが変わっても、欄の大きさを変えない） */
  height: 50px;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  color: #1f2430;
  font-size: 16px;
  line-height: 1.4;
  outline: none;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form input.input:focus {
  border-color: #1f2430;
}

/*
 * ---- reCAPTCHA（Advanced Google reCAPTCHA プラグイン） ----
 * 部品は幅 304px・高さ 78px 固定。読み込みが終わる前からその大きさを取っておき、出たときに下のボタンが動かないようにする。
 * カードの内側が 304px より狭い画面でも切れないよう、枠からはみ出してよい形で中央に置く。
 * プラグインがインラインで付ける transform: scale は、テーマ側（inc/site-functions.php）で HTML から外している。
 */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .g-recaptcha {
  position: relative;
  left: 50%;
  display: block;
  width: 304px;
  max-width: none;
  height: auto;
  min-height: 78px;
  margin: 20px 0 0 -152px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  transform: none;
  transform-origin: center top;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .g-recaptcha > div {
  width: 304px;
  height: 78px;
  transform: none;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .g-recaptcha iframe {
  max-width: none;
  background: none;
}

/* ---- ログイン状態を保存する ---- */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-remember {
  position: relative;
  z-index: 1;
  margin-top: 16px;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #374151;
  cursor: pointer;
  /* iOS Safari でラベルをタップできるようにする */
  pointer-events: auto;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-remember input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1f2430;
  pointer-events: auto;
}

/* ---- ボタン：ログイン（濃い色）と、新規登録（白地に枠線） ---- */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-submit {
  margin-top: 22px;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-submit input[type="submit"],
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .bp-login-widget-register-link a.wp-element-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 50px;
  margin: 0;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  filter: none;
  cursor: pointer;
}
/*
 * iPhone の Safari は送信ボタン（input）を OS のボタンとして描き、上下の余白や最小の高さが効かずに低くなる。
 * OS の描き方をやめ、高さを入力欄と同じ 50px に固定する（文字は高さの中央に置かれる）。
 */
/* 上の空きはボタン自身に付ける（段落の余白は、ほかの指定で 0 にされる） */
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-submit input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  height: 50px;
  padding: 0 16px;
  margin-top: 22px;
  border: 0;
  background: #1f2430;
  color: #fff;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .login-submit input[type="submit"]:hover {
  background: #343b4a;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .bp-login-widget-register-link {
  margin-top: 12px;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .bp-login-widget-register-link a.wp-element-button {
  margin-top: 12px;
  border: 1px solid #1f2430;
  background: #fff;
  color: #1f2430;
}
body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .bp-login-widget-register-link a.wp-element-button:hover {
  background: #1f2430;
  color: #fff;
}

/* ---- カードの下：パスワードの再設定 ---- */
body.page-id-228 .entry .login-password-reset {
  max-width: 440px;
  margin: 16px auto 0;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
body.page-id-228 .entry .login-password-reset a {
  color: #5d6574;
  text-decoration: underline;
}
/* ログイン中は出さない */
body.page-id-228.logged-in .login-password-reset {
  display: none;
}

/* ---- お知らせ・エラー（[login_error_message]） ---- */
body.page-id-228 .entry .oe-login-notice,
body.page-id-228 .entry p.error {
  max-width: 440px;
  margin: 0 auto 14px;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #1f2430;
  font-size: 14px;
  line-height: 1.7;
}
body.page-id-228 .entry p.error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 700;
}

/* ---- イベント会場オーナー向けの案内（固定ページの本文） ---- */
body.page-id-228 .entry .oe-owner-login-cta {
  max-width: 440px;
  width: 100%;
  margin: 24px auto 0;
  padding: 20px 28px;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: none;
  color: #1f2430;
}
body.page-id-228 .entry .oe-owner-login-cta__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  color: #1f2430;
}
body.page-id-228 .entry .oe-owner-login-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #1f2430;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  color: #1f2430;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transform: none;
}
body.page-id-228 .entry .oe-owner-login-cta__btn:hover {
  background: #1f2430;
  color: #fff;
  opacity: 1;
}
body.page-id-228 .entry .oe-owner-login-cta__note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #5d6574;
}

@media (max-width: 480px) {
  body.page-id-228 .entry .widget_bp_core_login_widget {
    padding: 26px 18px;
  }
  body.page-id-228 .entry .oe-owner-login-cta {
    padding: 18px;
  }
}
/* カードの内側が 304px に足りない画面：reCAPTCHA を縮めて収める（縮めたぶん、下の空きを詰める） */
@media (max-width: 380px) {
  body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .g-recaptcha {
    margin-bottom: -8px;
    transform: scale(0.9);
  }
}
@media (max-width: 340px) {
  body.page-id-228 .widget_bp_core_login_widget #bp-login-widget-form .g-recaptcha {
    margin-bottom: -17px;
    transform: scale(0.78);
  }
}