/* ============================================================
 * AiTone お問い合わせフォーム 専用スタイル
 * ============================================================
 * 使用箇所: contact.html / contact-confirm.html /
 *           contact-complete.html / contact-error.html
 *
 * アイメトリカのコーポレートサイト（https://aimetrica.co.jp/contact/）の
 * フォームに意匠を合わせている。角を落とした横長のボタン、枠で囲んだ
 * ラジオボタン、赤い「必須」バッジがその特徴。
 * 色だけは AiTone の配色（teal + stone）に置き換えている。
 *
 * daisyUI のクラスに寄せず、ここで完結させている。フォームは
 * 「押せる／押せない」「必須／任意」が誤解なく伝わることが最優先で、
 * ユーティリティクラスの組み合わせでは意図が読み取りにくくなるため。
 * ============================================================ */

/* ============================================================
 * お問い合わせ種別（ラジオボタン）
 * ============================================================
 * もともと <select> だったが、選択肢が5つと少なく、
 * 「何を選べるのか」がひと目で分かる方が迷わせないためラジオにした。 */
.form-radio-set {
    border: 0;
    padding: 0;
    margin: 0;
}

.form-radio-set legend {
    padding: 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: #292524;             /* stone-800 */
}

.form-radio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.form-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border: 1px solid #d6d3d1;  /* stone-300 */
    border-radius: 0.75rem;
    background-color: #fafaf9;
    font-weight: 700;
    font-size: 0.95rem;
    color: #44403c;             /* stone-700 */
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.form-radio:hover { border-color: #0d9488; }

/* ラジオ本体は隠さずに残す。見た目のためにキーボード操作や
 * スクリーンリーダーの読み上げを壊さないため。 */
.form-radio input { accent-color: #0d9488; }

.form-radio:has(input:checked) {
    border-color: #0d9488;
    background-color: #f0fdfa;
    color: #0f766e;
}

.form-radio:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* ============================================================
 * 必須バッジ
 * ============================================================ */
.form-required {
    display: inline-block;
    margin-left: 0.5em;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #fee2e2;
    color: #ef4444;
    font-size: 0.75em;
    font-weight: 400;
    vertical-align: middle;
}

/* ============================================================
 * 確認事項（プライバシーポリシー・営業目的お断りの同意）
 * ============================================================
 * 送信ボタンの直前に置く。ここを読まずに押せてしまわないよう、
 * 背景色を変えて本文と区別している。 */
.form-consents {
    margin: 2.5rem 0;
    padding: 1.5rem;
    border: 1px solid #e7e5e4;  /* stone-200 */
    border-radius: 1rem;
    background-color: #fafaf9;
    font-size: 0.9rem;
    line-height: 1.75;
    color: #57534e;             /* stone-600 */
}

.form-consents__head {
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #0f766e;
}

.form-consents__note + .form-consents__note { margin-top: 1.5rem; }

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    font-weight: 700;
    color: #292524;
    cursor: pointer;
}

.form-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: #0d9488;
    cursor: pointer;
}

.form-consents a {
    color: #0d9488;
    font-weight: 700;
    text-decoration: underline;
}

/* ============================================================
 * reCAPTCHA v2
 * ============================================================
 * ウィジェットは幅304pxの固定サイズ iframe。狭い画面で溢れるため、
 * 必要なときだけ縮小する。 */
.form-recaptcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 2rem;
}

@media (max-width: 360px) {
    .form-recaptcha .g-recaptcha {
        transform: scale(0.88);
        transform-origin: center top;
    }
}

.form-recaptcha__error {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #dc2626;
}

/* ============================================================
 * ボタン
 * ============================================================
 * アイメトリカに合わせて、横に長い塗りボタンにする。
 * 角丸だけは AiTone 側の意匠（カードが rounded-2xl）に寄せて残している。 */
.form-submit,
.form-submit-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.2rem 3rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.form-submit {
    min-width: 300px;
    border: none;
    background-color: #0d9488;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.form-submit:hover { background-color: #292524; }

.form-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-submit-back {
    min-width: 200px;
    border: 1px solid #d6d3d1;
    background-color: #fff;
    color: #292524;
    font-size: 1rem;
    text-decoration: none;
}

.form-submit-back:hover {
    background-color: #f5f5f4;
    border-color: #a8a29e;
}

/* 画面幅が狭いときは、はみ出さないよう幅いっぱいにする */
@media (max-width: 640px) {
    .form-submit,
    .form-submit-back {
        width: 100%;
        min-width: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ボタンの並び。狭い画面では「戻る」を下に回す（誤タップを減らす） */
.form-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .form-actions {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
}

/* ============================================================
 * エラー表示
 * ============================================================ */
.form-notice {
    margin-bottom: 2rem;
    padding: 1rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    text-align: center;
}

.form-notice-error {
    border: 1px solid #ef4444;
    background-color: #fef2f2;
    color: #b91c1c;
}