/*
 * 新規登録ページ（BuddyPress の登録フォーム：buddypress/members/register.php）
 *
 * 見た目は確認ページ（/join/：google-welcome.css・guest-join.css）にそろえている。
 * 白いカード1枚、ラベル 14px、入力欄 16px、注釈 11px、濃い色のボタン。
 *
 * セレクタに ID を3つ重ねているのは、同じ要素に当たる古い指定に勝つため：
 * buddypress/css/buddypress.css（#buddypress #register-page …）、site.css、
 * DB 側で有効なままかもしれない WPCode #2181（form.standard-form#signup_form …）。
 */

/* site.css が登録ページの #main に左右 20px の余白を足している。カードの幅をログインページ・確認ページと同じにする */
#main:has(#register-page) {
  padding-left: 0;
  padding-right: 0;
}

/* ---- カード ---- */
#buddypress #register-page form#signup_form {
  max-width: 440px;
  margin: 0 auto 24px;
  padding: 32px 28px;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #1f2430;
}
#buddypress #register-page form#signup_form .oe-register-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #1f2430;
}
#buddypress #register-page form#signup_form #template-notices:empty {
  display: none;
}

/* ---- ログインへの案内（上と下） ---- */
#buddypress #register-page form#signup_form .oe-register-login-link {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.7;
  color: #5d6574;
  text-align: left;
}
#buddypress #register-page form#signup_form .oe-register-login-link--bottom {
  margin: 18px 0 0;
  text-align: center;
}
#buddypress #register-page form#signup_form .oe-register-login-link a {
  margin-left: 4px;
  color: #1f2430;
  font-weight: 700;
  text-decoration: underline;
}

/* ---- Google アカウントで登録（ボタンは Site Kit が差し込む。inc/google-signin.php） ---- */
#buddypress #register-page form#signup_form .oe-google-signup {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#buddypress #register-page form#signup_form .oe-google-signup .googlesitekit-sign-in-with-google__frontend-output-button {
  display: flex;
  justify-content: center;
  /* ボタンの高さで固定する：出る前から場所を取り、Google のスクリプトが描く途中で一瞬高くなっても下の欄を動かさない */
  height: 44px;
  overflow: hidden;
  /* Site Kit がこの枠に最大幅を付けるので、枠ごと中央に置く */
  margin: 0 auto;
}
/* Google のボタン（iframe）は左右に負の余白を持つので、親の幅で切られないようにする */
#buddypress #register-page form#signup_form .oe-google-signup .googlesitekit-sign-in-with-google__frontend-output-button iframe {
  max-width: none;
}
#buddypress #register-page form#signup_form .oe-google-signup__note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #5d6574;
  text-align: center;
}
#buddypress #register-page form#signup_form .oe-google-signup__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  font-size: 13px;
  color: #5d6574;
}
#buddypress #register-page form#signup_form .oe-google-signup__or::before,
#buddypress #register-page form#signup_form .oe-google-signup__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e5e7eb;
}

/* ---- 入力欄のまとまり（枠や見出しは出さない） ---- */
#buddypress #register-page form#signup_form .register-section {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#buddypress #register-page form#signup_form .editfield {
  margin: 0;
}
#buddypress #register-page form#signup_form .editfield fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- ラベル ---- */
#buddypress #register-page form#signup_form label,
#buddypress #register-page form#signup_form legend {
  display: block;
  width: auto;
  margin: 20px 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #1f2430;
}
/* 枠（fieldset）の見出しは上の余白が効かないので、空きは枠の側に付ける */
#buddypress #register-page form#signup_form .editfield {
  margin-top: 20px;
}
#buddypress #register-page form#signup_form .editfield legend {
  margin-top: 0;
}
#buddypress #register-page form#signup_form .oe-register-required,
#buddypress #register-page form#signup_form .bp-required-field-label {
  margin-left: 4px;
  font-size: inherit;
  font-weight: 700;
  color: #dc2626;
}

/* ---- 入力欄：16px（iPhone の Safari は、16px 未満の欄をタップすると画面を拡大する） ---- */
#buddypress #register-page form#signup_form input[type="text"],
#buddypress #register-page form#signup_form input[type="email"],
#buddypress #register-page form#signup_form input[type="password"] {
  display: block;
  width: 100%;
  max-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;
  transform: none;
  transition: border-color .15s ease;
}
#buddypress #register-page form#signup_form input[type="text"]:focus,
#buddypress #register-page form#signup_form input[type="email"]:focus,
#buddypress #register-page form#signup_form input[type="password"]:focus {
  border-color: #1f2430;
}
#buddypress #register-page form#signup_form input[type="text"]:active,
#buddypress #register-page form#signup_form input[type="email"]:active,
#buddypress #register-page form#signup_form input[type="password"]:active {
  transform: none;
}
/* ユーザー名：左端の「@」のぶんを空ける（「@」は buddypress/css/buddypress.css） */
#buddypress #register-page form#signup_form .oe-register-username-field input#signup_username {
  padding-left: 38px;
  background: #f8fafc;
}

/* ---- 欄の下の注釈・エラー ---- */
#buddypress #register-page form#signup_form p.description,
#buddypress #register-page form#signup_form .field-visibility-settings-notoggle,
#buddypress #register-page form#signup_form .field-visibility-settings-toggle {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #5d6574;
}
#buddypress #register-page form#signup_form .oe-register-field-error,
#buddypress #register-page form#signup_form div.error {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.5;
  color: #b91c1c;
}
#buddypress #register-page form#signup_form #pass-strength-result {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
}

/*
 * ---- reCAPTCHA（Advanced Google reCAPTCHA プラグインが送信ボタンの前に差し込む） ----
 * 部品は幅 304px・高さ 78px 固定。読み込みが終わる前からその大きさを取っておき、出たときに下のボタンが動かないようにする。
 * カードの内側が 304px より狭い画面でも切れないよう、枠からはみ出してよい形で中央に置く。
 * プラグインが style="transform: scale(0.9)" を直接書き込むので、transform だけ !important で上書きする。
 */
#buddypress #register-page form#signup_form .g-recaptcha {
  position: relative;
  left: 50%;
  width: 304px;
  max-width: none;
  min-height: 78px;
  margin: 20px 0 0 -152px;
  padding: 0;
  transform: none !important;
  -webkit-transform: none !important;
  transform-origin: center top !important;
}

/* ---- 利用規約への同意 ---- */
#buddypress #register-page form#signup_form .oe-register-consent {
  margin: 20px 0 0;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}
#buddypress #register-page form#signup_form .oe-register-consent.is-invalid {
  border-color: #dc2626;
  background: #fef2f2;
}
#buddypress #register-page form#signup_form .oe-register-consent__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  /* 1行に収まる大きさ（折り返すと、フォントの読み込み後に欄の高さが変わる） */
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: #374151;
  cursor: pointer;
}
#buddypress #register-page form#signup_form .oe-register-consent__label input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1f2430;
}
#buddypress #register-page form#signup_form .oe-register-consent__label a {
  color: #1f2430;
  font-weight: 700;
  text-decoration: underline;
}

/* ---- 送信ボタン ---- */
#buddypress #register-page form#signup_form div.submit {
  float: none;
  margin: 22px 0 0;
  padding: 0;
  text-align: center;
}
/*
 * iPhone の Safari は送信ボタン（input）を OS のボタンとして描き、上下の余白が効かずに低くなる。
 * OS の描き方をやめ、高さを入力欄と同じ 50px に固定する（文字は高さの中央に置かれる）。
 */
#buddypress #register-page form#signup_form #signup_submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 50px;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #1f2430;
  box-shadow: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transform: none;
  filter: none;
  transition: background .15s ease;
}
#buddypress #register-page form#signup_form #signup_submit:hover {
  background: #343b4a;
  color: #fff;
  transform: none;
  filter: none;
}
#buddypress #register-page form#signup_form .oe-register-submit-help {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
#buddypress #register-page form#signup_form .oe-register-submit-help a {
  color: #5d6574;
  text-decoration: underline;
}

/* ---- 登録後の表示（カードの中にそのまま置く） ---- */
#buddypress #register-page form#signup_form .oe-register-complete-card {
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
#buddypress #register-page form#signup_form .oe-register-complete-card__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #1f2430;
}
#buddypress #register-page form#signup_form .oe-register-complete-card__lead,
#buddypress #register-page form#signup_form .oe-register-complete-card__note {
  max-width: none;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #5d6574;
}
#buddypress #register-page form#signup_form .oe-register-complete-card__steps {
  max-width: none;
  margin: 16px 0 0;
}
#buddypress #register-page form#signup_form .oe-register-complete-card__steps li {
  font-size: 14px;
  color: #1f2430;
}
#buddypress #register-page form#signup_form .oe-register-complete-card__steps li::before {
  color: #16a34a;
}
#buddypress #register-page form#signup_form .oe-register-complete-card__actions {
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
#buddypress #register-page form#signup_form .oe-register-complete-card__button {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 8px;
  background: #1f2430;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  transform: none;
}
#buddypress #register-page form#signup_form .oe-register-complete-card__button--secondary {
  border: 1px solid #1f2430;
  background: #fff;
  box-shadow: none;
  color: #1f2430;
}

#buddypress #register-page form#signup_form :focus-visible {
  outline: 2px solid #1f2430;
  outline-offset: 2px;
}
#buddypress #register-page form#signup_form input[type="text"]:focus-visible,
#buddypress #register-page form#signup_form input[type="email"]:focus-visible,
#buddypress #register-page form#signup_form input[type="password"]:focus-visible {
  outline: none;
}

@media (max-width: 480px) {
  #buddypress #register-page form#signup_form {
    padding: 26px 18px;
  }
}
/* カードの内側が 304px に足りない画面：reCAPTCHA を縮めて収める（縮めたぶん、下の空きを詰める） */
@media (max-width: 380px) {
  #buddypress #register-page form#signup_form .g-recaptcha {
    margin-bottom: -8px;
    transform: scale(0.9) !important;
    -webkit-transform: scale(0.9) !important;
  }
}
@media (max-width: 340px) {
  #buddypress #register-page form#signup_form .g-recaptcha {
    margin-bottom: -17px;
    transform: scale(0.78) !important;
    -webkit-transform: scale(0.78) !important;
  }
}
