/*
 * 素材DL会員の登録フォーム。
 *
 * 見た目は親テーマの参加申込フォーム（/entry-form/ = #mail_form / satoyama-vr/css/page.css）に寄せる:
 *   - 入力欄 = 1px solid #ccc / padding 10px / font-size 16px / color #222
 *   - PC はラベル 300px（padding-left 15px）の2カラム、SP は縦積み
 *   - 送信ボタン = 250x50 / border-radius 25px（SP は 200x40 / 20px）
 * ボタンとエラー枠の色は素材DLボックス（子テーマ g-style.css の #model-asset-dl）と揃える。
 * 会員はこのフォームの直前・直後に素材DLボックスを見るため、別系統に見えてはいけない。
 */

/*
 * 幅は指定せず、置かれたコンテナ（page-member-register.php の .container-m ＝ 内寸1000px）に従う。
 * #mail_form も同じ container-m にそのまま収まっており、独自に max-width を設けると
 * 隣り合うページと列幅が食い違って「寄せた」ことにならない。
 */
.jtj-members-form {
    display: grid;
    gap: 30px; /* #mail_form dl の margin-bottom と同値 */
    /* grid の gap は子同士の間にしか効かない。本文（リード文）との間隔はここで作る。 */
    margin-top: 30px;
}

.jtj-members-form__legend {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
}

.jtj-members-form__required {
    margin-left: 0.15em;
    color: #e60012;
}

.jtj-members-form__field {
    display: grid;
    gap: 8px;
}

.jtj-members-form__field label {
    color: #222;
    font-size: 15px;
    font-weight: 500;
}

.jtj-members-form__field input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    color: #222;
    font-family: inherit;
    /* 16px は #mail_form と同値。iOS の自動ズーム回避も兼ねる。 */
    font-size: 16px;
    line-height: 1.5;
}

.jtj-members-form__field input::placeholder {
    color: #999;
}

.jtj-members-form__field input:focus-visible {
    border-color: #1e3a5f;
    outline: 2px solid #1e3a5f;
    outline-offset: 1px;
}

.jtj-members-form__field input[aria-invalid="true"] {
    border-color: #b42318;
    background: #fffafa;
}

/* 入力ガイダンス。エラーと取り違えないよう、色と太さで明確に差をつける。 */
.jtj-members-form__hint {
    margin: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.7;
}

/*
 * エラーは「読み落とさない」ことが要件（旧 0.9rem は本文より小さく埋もれていた）。
 * ヒント（13px / #666 / 通常太さ）との差が判別の手がかりになる。
 */
.jtj-members-form__error {
    margin: 0;
    color: #b42318;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.jtj-members-form__error a {
    color: #b42318;
    text-decoration: underline;
}

.jtj-members-form__error--form {
    padding: 14px 16px;
    border: 1px solid #b42318;
    border-radius: 6px;
    background: #fff1f0;
}

/*
 * セクション見出し。/entry-form/ の「重要事項」「参加要件」の帯に合わせる
 * （親テーマのユーティリティ `bg-nvy` = #1e3a5f / `wht` / `txt-18` と同値）。
 * テーマのクラスを借りずに同値を持つのは、プラグインをテーマへ依存させないため。
 */
.jtj-members-form__section-title {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: #1e3a5f;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.jtj-members-form__note {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

.jtj-members-form__note a {
    color: #1e3a5f;
    text-decoration: underline;
}

.jtj-members-form .cf-turnstile {
    justify-self: center;
}

.jtj-members-form__submit {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 50px;
    padding: 0 24px;
    border: 2px solid #1e3a5f;
    border-radius: 25px;
    background: #1e3a5f;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .15s ease;
}

.jtj-members-form__submit:hover,
.jtj-members-form__submit:focus-visible {
    border-color: #2b4a75;
    background: #2b4a75;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
    transform: translateY(-1px);
}

/*
 * 登録完了表示（templates/register-complete.php）。
 *
 * ⚠️ 上マージンを持たせない。完了状態ではテンプレート側が本文を出さず
 *    このブロックだけになるため、コンテナの `pt-60` と二重になって間延びする。
 */
.jtj-members-complete {
    box-sizing: border-box;
    padding: 32px 24px;
    border: 1px solid #1e7d4f;
    border-radius: 6px;
    background: #f0fbf5;
    text-align: center;
}

.jtj-members-complete__lead {
    margin: 0 0 8px;
    color: #1a6b44;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.jtj-members-complete__note {
    margin: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.8;
}

/* ログイン済み案内（templates/register-logged-in.php）。 */
.jtj-members-notice {
    box-sizing: border-box;
    padding: 32px 24px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
    text-align: center;
}

.jtj-members-notice__alert {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #b42318;
    border-radius: 6px;
    background: #fff1f0;
    color: #b42318;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.jtj-members-notice__lead {
    margin: 0 0 8px;
    color: #1e3a5f;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.jtj-members-notice__note {
    margin: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.8;
}

.jtj-members-notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin: 24px 0 0;
}

.jtj-members-notice__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    height: 50px;
    padding: 0 24px;
    border: 2px solid #1e3a5f;
    border-radius: 25px;
    background: #1e3a5f;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease, transform .15s ease;
}

.jtj-members-notice__btn:hover,
.jtj-members-notice__btn:focus-visible {
    border-color: #2b4a75;
    background: #2b4a75;
    color: #fff;
    transform: translateY(-1px);
}

.jtj-members-notice__link {
    color: #1e3a5f;
    font-size: 14px;
    text-decoration: underline;
}

.jtj-members-notice__admin {
    margin: 20px 0 0;
    color: #666;
    font-size: 13px;
    line-height: 1.7;
}

@media (min-width: 768px) {
    /* #mail_form dl dt/dd と同じ 300px + 残り の2カラム。 */
    .jtj-members-form__field {
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: 0;
        row-gap: 8px;
    }

    .jtj-members-form__field label {
        grid-column: 1;
        padding: 10px 0 0 15px;
    }

    /*
     * ⚠️ 3つとも `__field` の中に限定すること。
     * `.jtj-members-form__error` を素で書くと、フォーム直下に置かれる
     * `--form`（全体エラー）にも `grid-column: 2` が当たり、1列しか無いフォームの
     * グリッドに**暗黙の2列目**が生まれてフォーム全体が2カラムに割れる。
     * 全体エラーが出るときだけ再現するため、通常表示の確認では見つからない。
     */
    .jtj-members-form__field input,
    .jtj-members-form__field .jtj-members-form__hint,
    .jtj-members-form__field .jtj-members-form__error {
        grid-column: 2;
    }

    .jtj-members-form__legend {
        padding-left: 15px;
    }
}

/* 上の暗黙列を二度と作らないための明示。フォーム直下の要素は常に全幅。 */
.jtj-members-form > .jtj-members-form__error--form,
.jtj-members-form > .jtj-members-form__legend,
.jtj-members-form > .jtj-members-form__note,
.jtj-members-form > .jtj-members-form__section-title {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .jtj-members-form__submit {
        width: 200px;
        height: 40px;
        border-radius: 20px;
    }
}