/**
 * コンタクトフォーム7用カスタムスタイル（入れ子対応・完全差し替え版）
 *
 * 前提:
 *  - ラッパ: .contact-form
 *  - 各フィールド箱: .form-item（※従来の .form-group は廃止）
 *  - 行レイアウト: .form-row-2col（PC=2列 / SP=1列）
 *  - 選択肢ラッパ（fieldset）:
 *      - .choice-group-1col  … 縦並び（常時）
 *      - .choice-group-2col  … PCで2列グリッド（SPでは縦）
 *      - .choice-group-3col  … PCで3列グリッド（SPでは縦）
 *
 * 備考:
 *  - CF7の実DOMに合わせ、.wpcf7-form-control / .wpcf7-list-item を使用
 *  - flex系(.choice-group-flex / .choice-flex-*)は存在しないため定義しない
 */

 .contact-form {
    /* カラー設定 - ローカル変数（カスタムプロパティ）*/
    --cf7-btn-bg: var(--color_main);
    --cf7-btn-text: #fff;
    --cf7-btn-hover-bg: var(--color_main_thin);
    --cf7-btn-hover-text: var(--color_main);
    --cf7-btn-hover-border: var(--color_main);

    --cf7-accent: var(--color_main);
    /* ラジオ/チェックのアクセント色 */
    --cf7-error: #ff4742;
    /* エラーカラー */
    --cf7-border: #ddd;
    /* 入力枠ボーダー */
    --cf7-text: #333;
    /* 文字色 */
    --cf7-muted: #888;
    /* 補助文字色 */

    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: sans-serif;

    /* 行レイアウト（PC=2列 / SP=1列） */
    .form-row-2col {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 20px;
    }

    /* 各フィールドの箱（単一フィールドを包む） */
    .form-item {
        margin-bottom: 20px;
    }

    /* ラベル */
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        color: var(--cf7-text);

        .required {
            color: var(--cf7-error);
            margin-left: 3px;
        }

        .optional {
            color: var(--cf7-muted);
            font-size: 0.9em;
            font-weight: normal;
        }
    }

    /* テキスト入力/メール/電話/テキストエリア */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--cf7-border);
        border-radius: 4px;
        background-color: #fff;
        font-size: 16px;
        transition: border-color 0.3s, box-shadow 0.3s;
        box-sizing: border-box;

        &:focus {
            border-color: var(--cf7-btn-bg);
            outline: none;
            box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
        }
    }

    textarea {
        height: 150px;
        resize: vertical;
    }

    /* 送信ボタン */
    input[type="submit"] {
        background-color: var(--cf7-btn-bg);
        color: var(--cf7-btn-text);
        border: 1px solid transparent;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        box-sizing: border-box !important;

        &:hover {
            background-color: var(--cf7-btn-hover-bg);
            color: var(--cf7-btn-hover-text);
            border: 1px solid var(--cf7-btn-hover-border);
        }
    }

    /* fieldset / legend（選択肢グループ） */
    fieldset.form-item {
        border: 0;
        padding: 0;

        legend {
            display: block;
            font-weight: 600;
            margin: 0 0 8px;
            color: var(--cf7-text);

            .required {
                color: var(--cf7-error);
            }
        }
    }

    /* ─────────────────────────────────────────────
     ラジオ/チェック：共通（CF7の実DOM）
     - .wpcf7-form-control（checkbox/radioのラッパ）
     - .wpcf7-list-item   （各選択肢のラッパ）
     - use_label_element のとき、input+テキストは同一ラベル内
     ───────────────────────────────────────────── */

    /* 1カラム（常に縦積み） */
    .choice-group-1col {
        .wpcf7-form-control {
            display: block;
        }

        .wpcf7-list-item {
            display: block;
            margin: .35rem 1rem;
        }
    }

    /* 2列グリッド（PC） */
    .choice-group-2col {
        .wpcf7-form-control {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .5rem 1rem;
        }

        .choices {
            margin: 0 1rem;

            .wpcf7-list-item {
                display: block;
                /* 各セル内は縦1アイテム */
                margin: 0;
            }
        }
    }

    /* 3列グリッド（PC） */
    .choice-group-3col {
        .wpcf7-form-control {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .5rem 1rem;
        }

        .choices {
            margin: 0 1rem;

            .wpcf7-list-item {
                display: block;
                /* 各セル内は縦1アイテム */
                margin: 0;
            }
        }
    }

    /* 入力要素の見た目（ラジオ/チェック） */
    .wpcf7-list-item label {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 500;
        color: var(--cf7-text);
        cursor: pointer;
    }

    .wpcf7-list-item input[type="radio"],
    .wpcf7-list-item input[type="checkbox"] {
        accent-color: var(--cf7-accent);
        width: 1.1rem;
        height: 1.1rem;
        margin: 0;
        flex: 0 0 auto;
    }

    .wpcf7-list-item input[type="radio"]:focus-visible,
    .wpcf7-list-item input[type="checkbox"]:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--cf7-accent) 60%, #ffffff);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* CF7のバリデーション表示 */
    .wpcf7-not-valid-tip {
        color: var(--cf7-error);
        font-size: 0.9em;
        margin-top: 5px;
    }

    .wpcf7-not-valid {
        border-color: var(--cf7-error) !important;
    }

    .wpcf7-response-output {
        margin: 20px 0 0;
        padding: 12px;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
    }

    .form-submit {
        text-align: center;

        /* 送信時ロードアイコン */
        .wpcf7-spinner {
            display: block;
        }
    }
}

/* ─────────────────────────────────────────────
   レスポンシブ（SP: ~600px）
   - 行レイアウトは縦1列
   - 2col/3colも縦積みにフォールバック
   ───────────────────────────────────────────── */
@media screen and (max-width: 600px) {
    .contact-form {
        padding: 15px;

        .form-row-2col {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        /* デフォルト/2col/3col を縦積みに */
        .choice-group .wpcf7-form-control,
        .choice-group-2col .wpcf7-form-control,
        .choice-group-3col .wpcf7-form-control {
            display: block;
        }

        .choice-group .wpcf7-list-item,
        .choice-group-2col .wpcf7-list-item,
        .choice-group-3col .wpcf7-list-item {
            display: block;
            margin: 0.35rem 1rem;
        }

        /* 送信ボタンを横幅いっぱいに */
        input[type="submit"] {
            width: 100%;
        }
    }
}

/* ─────────────────────────────────────────────
   CF7 外側の既定クラス（フォーム外に出る要素含む）
   ───────────────────────────────────────────── */
.wpcf7 {
    form {
        .wpcf7-not-valid-tip {
            color: #ff4742;
        }

        .wpcf7-response-output {
            margin-top: 1rem;
            border-radius: 4px;
        }
    }
}