/* =========================
   RE'start Auth UI (scoped)
   影響範囲は .rs-auth 配下のみ
========================= */

.rs-auth.alignfull{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.rs-auth{
  position:relative;
  padding:84px 16px;
  overflow:hidden;
}
.rs-auth .rs-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#4fd1c5,#3b82f6);
}
.rs-auth .rs-wrap{
  position:relative;
  max-width:1100px;
  margin:0 auto;
}
.rs-auth .rs-panel{
  border-radius:34px;
  padding:44px 22px;
  border:2px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.rs-auth .rs-head{
  text-align:center;
  color:#fff;
  margin-bottom:22px;
}
.rs-auth .rs-brand{letter-spacing:.08em; opacity:.9; margin:0 0 6px;}
.rs-auth .rs-title{font-size:40px; margin:0 0 10px;}
.rs-auth .rs-auth__lead{margin:0; opacity:.95;}

/* 中の白いカード */
.rs-auth .rs-auth__content{
  max-width:860px;
  margin:0 auto;
  background:rgba(255,255,255,.92);
  border-radius:18px;
  padding:32px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

/* PMProフォーム */
.rs-auth .pmpro_form label{
  display:block !important;
  color:#0a1423 !important;
  font-weight:700;
  margin:0 0 8px;
}
.rs-auth .pmpro_form .pmpro_form_field{margin:0 0 18px;}

.rs-auth .pmpro_form input[type="text"],
.rs-auth .pmpro_form input[type="email"],
.rs-auth .pmpro_form input[type="password"]{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.22);
  background:#fff;
  color:#0a1423;
}

.rs-auth .pmpro_form input[type="submit"],
.rs-auth .pmpro_form button[type="submit"]{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:0;
  background:#083d59;
  color:#fff;
  font-weight:800;
}

.rs-auth .pmpro_form a{
  color:#0b5b86 !important;
  text-decoration:underline;
}

/* Show Password 日本語化 */
.rs-auth .wp-hide-pw .text{ font-size:0 !important; }
.rs-auth .wp-hide-pw .text:after{
  font-size:14px; font-weight:700; content:"パスワードを表示";
}
.rs-auth .wp-hide-pw[aria-label*="Hide"] .text:after{
  content:"パスワードを隠す";
}

/* ログイン済み表示のボタン */
.rs-auth__loggedin{ text-align:center; }
.rs-auth__welcome{ font-size:20px; font-weight:900; margin:0 0 16px; }
.rs-auth__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.rs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:12px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
}
.rs-btn--primary{ background:#083d59; color:#fff !important; }
.rs-btn--ghost{
  background:rgba(8,61,89,.08);
  border:1px solid rgba(8,61,89,.22);
  color:rgba(8,61,89,1) !important;
}

/* アカウントの action links をボタン化 */
.rs-auth .pmpro_actionlinks{
  font-size:0 !important;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.rs-auth .pmpro_actionlinks a{
  font-size:14px !important;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(8,61,89,.08);
  border:1px solid rgba(8,61,89,.18);
  color:rgba(8,61,89,1) !important;
  text-decoration:none;
}

/* =========================
   Account layout
========================= */
.rs-auth .rs-account{ margin-top: 18px; }

.rs-auth .rs-account__grid{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 860px){
  .rs-auth .rs-account__grid{ grid-template-columns: 1fr; }
}

.rs-auth .rs-account__side{
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.rs-auth .rs-account__link{
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.14);
  margin-bottom: 10px;
}

.rs-auth .rs-account__link:hover{ opacity: .9; }

.rs-auth .rs-account__main{ min-width: 0; }

.rs-auth .rs-cardbox{
  border-radius: 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  margin-bottom: 16px;
}

.rs-auth .rs-cardbox__title{
  margin: 0 0 12px;
  font-weight: 900;
  color: #fff;
}

/* PMPro account boxes を白カード化（中身が見やすくなる） */
.rs-auth .pmpro_box{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
}

/* =========================
   GLASS OVERRIDE（白いカードを全排除）
   対象：login / logged-in / account（.rs-auth内のみ）
========================= */

/* 全体の文字色（ガラス上で見えるように） */
.rs-auth{
  color: rgba(255,255,255,.92);
}

/* 外枠も “白枠感” を薄めてガラス寄せ */
.rs-auth .rs-panel{
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ここが白い大ボックスの正体：これをガラスに置換 */
.rs-auth .rs-auth__content{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

/* PMProが吐く白カード類を全部 “透明化” */
.rs-auth .pmpro_login_wrap,
.rs-auth .pmpro_box,
.rs-auth .pmpro_form,
.rs-auth .pmpro_member_profile_edit_wrap,
.rs-auth .pmpro_invoice_wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- ログインフォームの見やすさ調整 ---- */
.rs-auth .pmpro_form label{
  color: rgba(255,255,255,.92) !important;
  font-weight: 700;
}

.rs-auth .pmpro_form input[type="text"],
.rs-auth .pmpro_form input[type="email"],
.rs-auth .pmpro_form input[type="password"]{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  color: rgba(10,20,35,.92) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.rs-auth .pmpro_form input::placeholder{
  color: rgba(10,20,35,.55) !important;
}

/* リンク類は白寄せ（ガラス上で見えるように） */
.rs-auth .pmpro_form a,
.rs-auth .pmpro_box a{
  color: rgba(255,255,255,.92) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rs-auth .pmpro_form a:hover,
.rs-auth .pmpro_box a:hover{ opacity: .86; }

/* チェックボックスの文字も白に */
.rs-auth .pmpro_form input[type="checkbox"]{ accent-color: rgba(255,255,255,.92); }
.rs-auth .pmpro_form .pmpro_form_field-checkbox,
.rs-auth .pmpro_form .pmpro_form_field-checkbox label{
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
}

/* ログインボタンはそのまま強く */
.rs-auth .pmpro_form input[type="submit"],
.rs-auth .pmpro_form button[type="submit"]{
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

/* Show Password を確実に日本語化（構造違いにも強い） */
.rs-auth button.wp-hide-pw{
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 8px 12px !important;
}
.rs-auth button.wp-hide-pw .text{ display:none !important; }
.rs-auth button.wp-hide-pw:after{
  content:"パスワードを表示";
  font-size: 14px;
  font-weight: 700;
}
.rs-auth button.wp-hide-pw[aria-label*="Hide"]:after{
  content:"パスワードを隠す";
}

/* ---- ログイン済み（ようこそカード）の白排除 & 文字白 ---- */
.rs-auth .rs-auth__loggedin,
.rs-auth .rs-auth__welcome{
  color: rgba(255,255,255,.92) !important;
}

/* 既存でスコープ漏れしやすいので .rs-auth 付けで固定 */
.rs-auth .rs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:12px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
}
.rs-auth .rs-btn--primary{
  background:#083d59;
  color:#fff !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
.rs-auth .rs-btn--ghost{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.92) !important;
}

/* ---- アカウントページ：中の白ボックス（pmpro_box）をガラス化 ---- */
.rs-auth .rs-cardbox{
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.rs-auth .rs-cardbox__title{
  color: rgba(255,255,255,.92) !important;
}

/* プロフィール/会員情報/請求履歴の中身カードをガラスに */
.rs-auth .pmpro_box{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 16px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 16px;
}

/* pmpro_box 内の文字色を白寄せ */
.rs-auth .pmpro_box,
.rs-auth .pmpro_box p,
.rs-auth .pmpro_box li,
.rs-auth .pmpro_box strong,
.rs-auth .pmpro_box h2,
.rs-auth .pmpro_box h3{
  color: rgba(255,255,255,.92) !important;
}

/* テーブル（請求履歴など）の白背景を消して、罫線だけ薄く */
.rs-auth .pmpro_box table,
.rs-auth .pmpro_box thead,
.rs-auth .pmpro_box tbody,
.rs-auth .pmpro_box tr{
  background: transparent !important;
}
.rs-auth .pmpro_box th,
.rs-auth .pmpro_box td{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* プロフィール下の action links も白ベース → ガラスボタンへ */
.rs-auth .pmpro_actionlinks a{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none;
}
.rs-auth .pmpro_actionlinks a:hover{ opacity:.88; }

/* =========================
   Mobile Fix (iPhone SE 等の狭幅で崩れるのを修正)
   - loginフォームが .pmpro_form を持たないケースにも対応
========================= */

/* [pmpro_login] が吐くフォームが #loginform の場合もあるので、同じ見た目に統一 */
.rs-auth #loginform label,
.rs-auth .pmpro_login_wrap label{
  display:block !important;
  float:none !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 0 8px !important;
}

.rs-auth #loginform p,
.rs-auth .pmpro_login_wrap p{
  margin:0 0 18px;
}

/* チェックボックス（Remember Me）の崩れ防止 */
.rs-auth #loginform .login-remember label,
.rs-auth .pmpro_login_wrap .login-remember label{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.rs-auth #loginform .login-remember input[type="checkbox"],
.rs-auth .pmpro_login_wrap .login-remember input[type="checkbox"]{
  margin:0 !important;
}

/* ---- iPhone SE などの狭幅（〜420px）専用 ---- */
@media (max-width: 420px){
  /* 余白を詰めて入力エリアの横幅を確保 */
  .rs-auth{
    padding:56px 12px;
  }
  .rs-auth .rs-panel{
    padding:26px 14px;
    border-radius:26px;
  }
  .rs-auth .rs-title{ font-size:30px; }
  .rs-auth .rs-auth__lead{ font-size:14px; }
  .rs-auth .rs-auth__content{ padding:18px; }

  /* パスワード行で label と Show Password が横並びになり、
     labelが縦書き化するのを防ぐ（強制的に縦積み） */
  .rs-auth #loginform .login-password,
  .rs-auth #loginform .user-pass-wrap,
  .rs-auth .pmpro_login_wrap .login-password,
  .rs-auth .pmpro_login_wrap .user-pass-wrap{
    display:block !important;
  }

  /* Show Password の英文が残る/折り返す問題の対策：
     “ボタン内のテキスト”を消して短い表示にする（構造差異にも強い） */
  .rs-auth #loginform button.wp-hide-pw,
  .rs-auth .pmpro_login_wrap button.wp-hide-pw{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    margin:6px 0 10px !important;
    padding:6px 10px !important;

    font-size:0 !important; /* ボタン内のテキストノード（Show Password等）を無効化 */
  }

  /* アイコンが消えないようにサイズを戻す */
  .rs-auth #loginform button.wp-hide-pw .dashicons,
  .rs-auth .pmpro_login_wrap button.wp-hide-pw .dashicons,
  .rs-auth #loginform button.wp-hide-pw svg,
  .rs-auth .pmpro_login_wrap button.wp-hide-pw svg{
    font-size:18px !important;
    width:18px;
    height:18px;
  }

  /* モバイルは短い文言にする（表示/隠す） */
  .rs-auth #loginform button.wp-hide-pw:after,
  .rs-auth .pmpro_login_wrap button.wp-hide-pw:after{
    content:"表示";
    font-size:12px;
    font-weight:700;
  }
  .rs-auth #loginform button.wp-hide-pw[aria-label*="Hide"]:after,
  .rs-auth .pmpro_login_wrap button.wp-hide-pw[aria-label*="Hide"]:after{
    content:"隠す";
  }
}

/* =========================
   PMPro login mobile fix
   - PMProのfloat/幅指定が原因で「パスワード」が縦書き化するのを防止
========================= */

/* まず、PMPro/ログインフォーム系のlabelを強制的に縦積みへ */
.rs-auth .pmpro_login_wrap label,
.rs-auth .pmpro_form label,
.rs-auth #loginform label{
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 0 8px !important;
}

/* input も100%に寄せる */
.rs-auth .pmpro_login_wrap input[type="text"],
.rs-auth .pmpro_login_wrap input[type="email"],
.rs-auth .pmpro_login_wrap input[type="password"],
.rs-auth #loginform input[type="text"],
.rs-auth #loginform input[type="password"]{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* パスワード行（Show Password が絡む部分）を縦積みに固定 */
.rs-auth #loginform .login-password,
.rs-auth #loginform .user-pass-wrap,
.rs-auth .pmpro_login_wrap .login-password,
.rs-auth .pmpro_login_wrap .user-pass-wrap{
  display: block !important;
}

/* Show Password の英語が出る/回り込むのを強制的に短縮 */
.rs-auth #loginform button.wp-hide-pw,
.rs-auth .pmpro_login_wrap button.wp-hide-pw{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px 0 10px !important;
  padding: 6px 10px !important;
  font-size: 0 !important; /* ボタン内テキストを消す（英語対策） */
}

/* アイコンが消えないようにサイズを戻す */
.rs-auth #loginform button.wp-hide-pw .dashicons,
.rs-auth .pmpro_login_wrap button.wp-hide-pw .dashicons,
.rs-auth #loginform button.wp-hide-pw svg,
.rs-auth .pmpro_login_wrap button.wp-hide-pw svg{
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}

/* “表示/隠す” の短いラベルを付ける */
.rs-auth #loginform button.wp-hide-pw:after,
.rs-auth .pmpro_login_wrap button.wp-hide-pw:after{
  content: "表示";
  font-size: 12px;
  font-weight: 700;
}
.rs-auth #loginform button.wp-hide-pw[aria-label*="Hide"]:after,
.rs-auth .pmpro_login_wrap button.wp-hide-pw[aria-label*="Hide"]:after{
  content: "隠す";
}

/* iPhone SEクラスの狭幅では余白も詰める */
@media (max-width: 420px){
  .rs-auth{ padding: 56px 12px; }
  .rs-auth .rs-panel{ padding: 26px 14px; border-radius: 26px; }
  .rs-auth .rs-auth__content{ padding: 18px; }
  .rs-auth .rs-title{ font-size: 30px; }
}