/*
 * CLP Supporter History — フロント申込フォーム用スタイル（v1.4.5）。
 * すべて .clp-shp-subscribe / .clp-shp-sub-notice / .clp-shp-my-subscription 配下へ限定し、
 * テーマ・WooCommerce・WPForms・予約フォーム等へは影響させない。
 * PAY.JP Element(iframe)の内部は変更せず、mountコンテナ側の幅・高さ・box-sizingのみ整える。
 */

/* ---- 申込フォーム ---- */
.clp-shp-subscribe{
    box-sizing:border-box;
    width:100%;
    max-width:760px;
    margin:0;
    font-size:15px;
    line-height:1.6;
    color:#1f2328;
}
.clp-shp-subscribe *,
.clp-shp-subscribe *::before,
.clp-shp-subscribe *::after{ box-sizing:border-box; }

/* 管理者限定テストの控えめなnotice（一般ユーザーには出力されない） */
.clp-shp-subscribe .clp-shp-admin-note{
    margin:0 0 14px;
    padding:8px 12px;
    font-size:13px;
    line-height:1.5;
    color:#8a5300;
    background:#fff6e5;
    border:1px solid #f0d08a;
    border-radius:6px;
}

.clp-shp-subscribe .clp-shp-label{
    display:block;
    margin:16px 0 4px;
    font-weight:600;
    font-size:15px;
}
.clp-shp-subscribe .clp-shp-label:first-child{ margin-top:0; }
.clp-shp-subscribe .clp-shp-req{ color:#c0392b; font-weight:600; }
.clp-shp-subscribe .clp-shp-hint{
    margin:0 0 8px;
    font-size:13px;
    line-height:1.6;
    color:#666;
}

/* セレクト：width100%・高さ確保・16px（iOSの自動ズーム防止）・スマホでもはみ出さない */
.clp-shp-subscribe .clp-shp-select{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    height:46px;
    padding:0 12px;
    font-size:16px;
    line-height:1.4;
    color:#1f2328;
    background:#fff;
    border:1px solid #c9ced6;
    border-radius:8px;
}
.clp-shp-subscribe .clp-shp-select:focus{
    border-color:#cf8fa2;
    outline:2px solid #ecd7de;
    outline-offset:1px;
}

/* 掲載名テキスト入力（セレクトと同じ体裁） */
.clp-shp-subscribe .clp-shp-input{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    height:46px;
    padding:0 12px;
    font-size:16px;
    line-height:1.4;
    color:#1f2328;
    background:#fff;
    border:1px solid #c9ced6;
    border-radius:8px;
    margin:0;
}
.clp-shp-subscribe .clp-shp-input:focus{
    border-color:#cf8fa2;
    outline:2px solid #ecd7de;
    outline-offset:1px;
}

/* ログイン中アカウント表示・同意チェック */
.clp-shp-subscribe .clp-shp-account{
    margin:14px 0 6px;
    font-size:14px;
    color:#3c434a;
}
.clp-shp-subscribe .clp-shp-consent{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:0 0 4px;
    font-size:14px;
    line-height:1.6;
    color:#3c434a;
    cursor:pointer;
}
.clp-shp-subscribe .clp-shp-consent input{ margin-top:3px; flex:0 0 auto; }

/* カード欄：1つの入力ボックスとして自然に見せる。iframeを縦中央に置き、上下の文字切れを防ぐ。
   （縦paddingで潰れないよう flex+align-items:center、min-heightで高さ確保、min-width:0でflex横崩れ隔離） */
.clp-shp-subscribe .clp-shp-card{
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:52px;
    padding:0 12px;
    background:#fff;
    border:1px solid #c9ced6;
    border-radius:8px;
}
.clp-shp-subscribe .clp-shp-card > *{ width:100%; min-width:0; }
/* PAY.JP Element(iframe)をコンテナ幅へ追従＋高さ確保。テーマのflex/grid/幅指定の上書きを隔離するため
   iframeにのみ width/min-width/min-height を !important で強制（内部要素・トークン処理には手を触れない）。 */
.clp-shp-subscribe .clp-shp-card iframe{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:24px !important;
    height:auto;
}

/* カード欄の分割レイアウト：番号=全幅1行／有効期限・CVC=PC2列・スマホ縦並び。
   すべて .clp-shp-subscribe 配下へ限定（他フォーム非影響）。個別枠の体裁は上の .clp-shp-card を共用。 */
.clp-shp-subscribe .clp-shp-card-fields{ margin:0 0 4px; }
.clp-shp-subscribe .clp-shp-cardrow{ min-width:0; margin:0 0 12px; }
.clp-shp-subscribe .clp-shp-cardrow:last-child{ margin-bottom:0; }
.clp-shp-subscribe .clp-shp-sublabel{
    display:block;
    margin:0 0 4px;
    font-size:13px;
    font-weight:600;
    color:#3c434a;
}
.clp-shp-subscribe .clp-shp-note{
    margin-left:6px;
    font-size:12px;
    font-weight:400;
    color:#8a9099;
}
/* PC：有効期限とCVCを2列。min-width:0で各セルが縮小可能（横あふれ防止）。 */
.clp-shp-subscribe .clp-shp-card2col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:0;
}
.clp-shp-subscribe .clp-shp-card2col .clp-shp-cardrow{ margin:0; min-width:0; }
/* 各欄のエラー表示（空なら非表示・レイアウト非破壊） */
.clp-shp-subscribe .clp-shp-fielderr{ margin:8px 0 0; font-size:13px; line-height:1.5; color:#b3261e; }
.clp-shp-subscribe .clp-shp-fielderr:empty{ display:none; margin:0; }

/* 「ご確認ください」：ページH2ではなくフォーム内見出し（18〜20px）。テーマ見出しの巨大余白を避ける。 */
.clp-shp-subscribe .clp-shp-confirm-title{
    margin:22px 0 6px;
    padding:0;
    font-size:19px;
    line-height:1.4;
    font-weight:700;
    color:#1f2328;
    border:0;
}

/* スマホ：番号・有効期限・CVCを縦並び（2列を1列へ）・横スクロールなし。各枠は width:100%（.clp-shp-card既定）。 */
@media (max-width:600px){
    .clp-shp-subscribe .clp-shp-card2col{ grid-template-columns:1fr; gap:0; }
    .clp-shp-subscribe .clp-shp-card2col .clp-shp-cardrow{ margin:0 0 12px; }
    .clp-shp-subscribe .clp-shp-card2col .clp-shp-cardrow:last-child{ margin-bottom:0; }
}

/* 申込ボタン：CLP見出し系より少し落ち着いたローズ・width100%・押しやすい高さ・hover/focus/disabled。
   WP管理の .button より詳細度を高くしてブラウザ既定/管理配色を上書き（!important不要）。原色・強hoverは不使用。 */
.clp-shp-subscribe .clp-shp-btn{
    display:block;
    width:100%;
    height:48px;
    margin:16px 0 0;
    padding:0 16px;
    font-size:16px;
    font-weight:600;
    line-height:46px;
    color:#fff;
    background:#cf8fa2;
    border:1px solid #cf8fa2;
    border-radius:8px;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    box-shadow:none;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}
.clp-shp-subscribe .clp-shp-btn:hover{ background:#c47f94; border-color:#c47f94; color:#fff; }
.clp-shp-subscribe .clp-shp-btn:focus{ outline:2px solid #ecd7de; outline-offset:2px; }
.clp-shp-subscribe .clp-shp-btn:disabled,
.clp-shp-subscribe .clp-shp-btn[disabled]{ background:#c9b6bd; border-color:#c9b6bd; cursor:default; }

/* メッセージ/エラー：フォーム直下・薄い背景で視認性確保・レイアウト非破壊。空なら非表示 */
.clp-shp-subscribe .clp-shp-msg{ margin:12px 0 0; font-size:14px; line-height:1.6; }
.clp-shp-subscribe .clp-shp-msg:empty{ display:none; }
.clp-shp-subscribe .clp-shp-msg:not(:empty){
    padding:9px 12px;
    color:#7a4a58;
    background:#f7eef1;
    border:1px solid #e6d2da;
    border-radius:6px;
}

/* ---- 案内notice（準備中/登録済み等） ---- */
.clp-shp-sub-notice{
    box-sizing:border-box;
    width:100%;
    max-width:760px;
    margin:0;
    padding:12px 14px;
    font-size:15px;
    line-height:1.6;
    color:#3c434a;
    background:#f6f7f7;
    border:1px solid #dcdcde;
    border-radius:8px;
}

/* ---- マイページ契約カード（既存構造は維持・幅だけ整える） ---- */
.clp-shp-my-subscription{ box-sizing:border-box; width:100%; max-width:760px; }
.clp-shp-my-subscription .button{ cursor:pointer; }

@media (max-width:480px){
    .clp-shp-subscribe{ font-size:15px; }
    .clp-shp-subscribe .clp-shp-btn{ height:50px; line-height:48px; }
}

/* ---- 申込固定ページ本文の縦余白（本文に .clp-sh-apply-page を付与した場合のみ・直接の子だけに限定） ----
   サイト全体のh2/pには影響させない。過剰な100px前後の空白を防ぎ、セクション間40〜48px程度に整える。 */
.clp-sh-apply-page > h2{ margin:44px 0 16px; }
.clp-sh-apply-page > h2:first-child{ margin-top:0; }
.clp-sh-apply-page > h3{ margin:36px 0 14px; }
.clp-sh-apply-page > p{ margin:0 0 14px; line-height:1.8; }
.clp-sh-apply-page > ul,
.clp-sh-apply-page > ol{ margin:0 0 16px; }
.clp-sh-apply-page > .clp-shp-subscribe,
.clp-sh-apply-page > .clp-shp-sub-notice{ margin:28px 0; }
.clp-sh-apply-page > *:last-child{ margin-bottom:0; }
/* Classic Editorが挿入する空段落の余白を詰める（本ページ限定） */
.clp-sh-apply-page > p:empty{ margin:0; }

/* Supporter History 申込フォーム配置とPAY.JP入力
   v1.5.56 §11 差し替え（v1.5.55 の「掲載開始月選択」ブロックを置き換え）。

   削除したもの:
   ・申込欄**上部**に掲載開始月選択を置くための配置（選択はカード情報の下へ移動）
   ・ページ下部の独立した来月案内欄用の余白（来月案内は選択カード内へ統合）
   ・旧「月末強確認」の赤い大枠／内枠／赤い見出し／赤字の金額・日付（v1.5.55でマークアップごと撤去済み）
   ・旧「次回決済までの日数」表示用（同上）
   PAY.JPのiframeを上書きするCSSは追加しない。mountコンテナの最小寸法だけを指定する。 */

/* 掲載開始月の選択（カード情報の下に置く） */
.clp-shp-subscribe .clp-shp-start{
  margin:18px 0 16px; padding:14px 16px;
  border:1px solid #e6c9d3; border-radius:10px; background:#fff8fb;
}
.clp-shp-subscribe .clp-shp-start__title{ margin:0 0 10px; font-weight:700; }
.clp-shp-subscribe .clp-shp-start__opt{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 8px; padding:10px 12px; line-height:1.6;
  border:1px solid #e3e6ea; border-radius:8px; background:#fff; cursor:pointer;
}
.clp-shp-subscribe .clp-shp-start__opt:last-of-type{ margin-bottom:0; }
.clp-shp-subscribe .clp-shp-start__opt input{ margin-top:4px; flex:0 0 auto; }
.clp-shp-subscribe .clp-shp-start__rec{
  display:inline-block; margin-left:8px; padding:1px 8px;
  border-radius:999px; background:#c2185b; color:#fff;
  font-size:12px; font-weight:700; vertical-align:middle;
}
/* 来月案内は「来月から掲載する」の直下（同じ選択カード内）に置く */
.clp-shp-subscribe .clp-shp-nextcard{
  margin:8px 0 0; padding:12px 14px;
  border:1px solid #e3e6ea; border-top:none; border-radius:0 0 8px 8px; background:#fbfcfd;
}
.clp-shp-subscribe .clp-shp-nextcard__lead{ margin:0 0 6px; line-height:1.7; }
.clp-shp-subscribe .clp-shp-nextcard__note{ margin:0 0 10px; font-size:.92em; color:#555; }
.clp-shp-subscribe .clp-shp-nextcard .clp-shp-nn{ margin:0; }

/* 決済条件（簡潔表示・強調色は使わない） */
.clp-shp-subscribe .clp-shp-terms{
  margin:12px 0; padding:12px 14px;
  border:1px solid #e6c9d3; border-radius:8px; background:#fff8fb;
}
.clp-shp-subscribe .clp-shp-terms__title{ margin:0 0 8px; font-weight:700; }
.clp-shp-subscribe .clp-shp-terms__table{ width:100%; border-collapse:collapse; font-size:.95em; margin:0 0 10px; }
.clp-shp-subscribe .clp-shp-terms__table th{
  width:9.5em; padding:4px 10px 4px 0; text-align:left;
  font-weight:400; color:#555; white-space:nowrap; vertical-align:top;
}
.clp-shp-subscribe .clp-shp-terms__table td{ padding:4px 0; font-weight:700; }
/* 「次回で終わらない」ことの明記・近接時の穏やかな補足（警告色は使わない） */
.clp-shp-subscribe .clp-shp-terms__recurring{ margin:0 0 6px; font-weight:700; }
.clp-shp-subscribe .clp-shp-terms__near{ margin:0 0 10px; font-size:.92em; color:#555; }

/* 申込ボタンが押せない理由の表示（黙って disabled にしない） */
.clp-shp-subscribe .clp-shp-reason{ margin:8px 0 0; font-size:.92em; color:#555; min-height:1.2em; }

/* PAY.JP mountコンテナの最小寸法だけを指定（iframe自体は上書きしない） */
.clp-shp-subscribe .clp-shp-card{ min-height:44px; }

/* ==========================================================================
   Supporter History 契約・返金状態と管理操作（v1.5.57 §16 / 区分=差し替え）

   このブロックで追加するのはフロント側の3点だけです。
     ・#clp-shp-sub-result … 申込ボタン直下の**永続結果欄**（自動で消さない・§11）
     ・来月選択カード内の案内（送信先の明示・§12）
     ・[clp_shp_thanks_status parts="result"] の結果カード（§10）
   削除した旧CSS: 一瞬だけ表示して消える結果欄の指定、重複した完了カードの装飾、
   ページ下部の独立した来月案内セクション用の指定（いずれも役割が無くなったため）。
   管理画面側（契約状態バッジ・返金結果欄・test一括後片付け）は
   class-shp-admin.php の ui_css() に同名見出しで置いています（重複ルールは作りません）。
   ========================================================================== */

/* §11 申込結果の永続表示欄（tokenizeエラー・申込エラーを消さずに残す） */
.clp-shp-subscribe .clp-shp-result{
  margin:10px 0 0; padding:10px 12px;
  border:1px solid #e0b3c2; border-radius:8px; background:#fff;
  line-height:1.7;
}
.clp-shp-subscribe .clp-shp-result.is-err{ border-color:#e9a2a2; background:#fdf5f5; }
.clp-shp-subscribe .clp-shp-result.is-ok{ border-color:#a7d8b4; background:#f4fbf6; }
.clp-shp-subscribe .clp-shp-result__text{ margin:0; font-weight:700; }
.clp-shp-subscribe .clp-shp-result__meta{ margin:4px 0 0; font-size:.85em; color:#777; }

/* §12 来月選択カード内の送信先表示 */
.clp-shp-subscribe .clp-shp-nextcard__to{ margin:0 0 10px; font-size:.92em; color:#555; word-break:break-all; }

/* §10 完了ページの結果カード（parts="result" 指定時は見出し・ボタンを出さない） */
.clp-sh-thanks .clp-sh-thanks__result{
  padding:12px 14px; border:1px solid #e6c9d3; border-radius:8px; background:#fff8fb;
}
.clp-sh-thanks .clp-sh-thanks__resulthead{ margin:0 0 8px; font-weight:700; }

/* マイページ 解約予約・再開の結果メッセージ（外部化JSが書き込む） */
.clp-shp-my-subscription .clp-shp-act-msg{ min-height:1.2em; line-height:1.7; }

/* 来月案内の機能上必要な最小CSS（v1.5.57 §13: class-shp-next-notice.php の <style> から移動） */
.clp-shp-nn .clp-shp-nn-btn{ cursor:pointer; }
.clp-shp-nn .clp-shp-nn-btn[disabled]{ opacity:.6; cursor:default; }
.clp-shp-nn .clp-shp-nn-status{ margin:6px 0 0; min-height:1.2em; }
.clp-shp-nn .clp-shp-nn-note{ font-size:.9em; opacity:.85; margin:4px 0; }
.clp-shp-nn .clp-shp-nn-err{ color:#b3261e; }