/* =========================================
   東広島記念病院 お問い合わせフォーム
   実際のレンダリングHTML構造に合わせたCSS
   スコープ: .wpcf7 以下に限定して競合回避
   ========================================= */

:root {
    --hmh-navy:      #1a3a5c;
    --hmh-teal:      #2a7d8c;
    --hmh-teal-light:#e8f4f6;
    --hmh-red:       #c0392b;
    --hmh-gray-100:  #f5f6f8;
    --hmh-gray-200:  #e8eaed;
    --hmh-gray-400:  #9aa0aa;
    --hmh-gray-700:  #4a4f5a;
    --hmh-success:   #2e7d52;
    --hmh-warn-bg:   #fff8e1;
    --hmh-warn-bd:   #f0c040;
}

/* =========================================
   ページ内のフォームエリア全体
   ========================================= */

/* CF7が出力するp>brレイアウトをリセット */
.wpcf7-form p {
    margin: 0;
}
.wpcf7-form br {
    display: none;
}

/* =========================================
   注意書きボックス
   ========================================= */
.hmh-scope-notice {
    background: var(--hmh-warn-bg);
    border-left: 4px solid var(--hmh-warn-bd);
    padding: 14px 18px;
    margin: 0 0 20px;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.75;
}
.hmh-scope-notice strong {
    color: var(--hmh-red);
}

/* =========================================
   STEP 1: 用件選択ラジオグリッド
   ========================================= */
.hmh-yoken-grid {
    margin-bottom: 20px;
}

/* CF7が出力する<p>ラッパーをリセット */
.hmh-yoken-grid > p {
    margin: 0 !important;
}

/* ラジオグループ全体 */
.hmh-yoken-grid .wpcf7-radio {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
}

/* 各ラジオ項目のspan */
.hmh-yoken-grid .wpcf7-list-item {
    margin: 0 !important;
    display: block;
}

/* ラジオのlabel — _forms.scssの inline-block を上書き */
.hmh-yoken-grid .wpcf7-list-item label {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--hmh-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    background: #fff;
    font-weight: normal !important;  /* _forms.scssのboldを上書き */
    margin-bottom: 0 !important;
    max-width: none !important;
    position: relative;
}
.hmh-yoken-grid .wpcf7-list-item label:hover {
    border-color: var(--hmh-teal);
    background: var(--hmh-teal-light);
}
.hmh-yoken-grid .wpcf7-list-item.out-of-scope label:hover {
    border-color: var(--hmh-gray-400);
    background: var(--hmh-gray-100);
}

/* ラジオinput — _forms.scssのmarginを上書き */
.hmh-yoken-grid .wpcf7-list-item input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    border: 2px solid var(--hmh-gray-400) !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    cursor: pointer;
    transition: all .18s;
    margin: 0 !important;     /* _forms.scssの margin: 4px 0 0 を上書き */
    background: #fff;
    position: relative;       /* _forms.scssのabsolute指定を上書き */
}
.hmh-yoken-grid .wpcf7-list-item input[type="radio"]:checked {
    border-color: var(--hmh-teal) !important;
    background: var(--hmh-teal) !important;
    box-shadow: inset 0 0 0 4px #fff !important;
}
.hmh-yoken-grid .wpcf7-list-item label:has(input:checked) {
    border-color: var(--hmh-teal);
    background: var(--hmh-teal-light);
}
.hmh-yoken-grid .wpcf7-list-item.out-of-scope label:has(input:checked) {
    border-color: var(--hmh-gray-400);
    background: var(--hmh-gray-100);
}

/* ラジオラベルテキスト */
.hmh-yoken-grid .wpcf7-list-item-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--hmh-navy);
    flex: 1;
    line-height: 1.4;
}

/* バッジ（JSで追加） */
.hmh-yoken-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 11px;
    border-radius: 20px;
    white-space: nowrap;
    margin-left: auto;
}
.badge-ok  { background: #e6f4ea; color: var(--hmh-success); }
.badge-ng  { background: #fce8e6; color: var(--hmh-red); }
.badge-tel { background: #e8f0fe; color: #1a56cc; }

/* =========================================
   対象外パネル
   ========================================= */
.hmh-panel-redirect {
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 20px;
}
.hmh-panel-redirect.kensin {
    background: var(--hmh-warn-bg);
    border: 1px solid var(--hmh-warn-bd);
}
.hmh-panel-redirect.tel-only {
    background: #e8f0fe;
    border: 1px solid #aac4f8;
}
.hmh-panel-redirect.ng {
    background: #fce8e6;
    border: 1px solid #f5aba6;
}
.hmh-panel-redirect .panel-icon {
    font-size: 26px;
    margin-bottom: 8px;
    display: block;
}
.hmh-panel-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--hmh-navy);
    /* section.content h3 等の干渉を完全に遮断 */
    font-family: inherit;
    letter-spacing: normal;
    text-align: left;
    display: block;
}
.hmh-panel-body {
    font-size: 13px;
    line-height: 1.75;
    color: var(--hmh-gray-700);
    margin: 0;
    display: block;
}
.hmh-redirect-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 22px;
    background: var(--hmh-teal);
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}
.hmh-tel-big {
    display: block;
    margin-top: 10px;
    font-size: 28px;
    font-weight: 700;
    color: var(--hmh-navy);
    text-decoration: none;
    letter-spacing: .04em;
}
.hmh-tel-hours {
    font-size: 12px;
    color: var(--hmh-gray-700);
    margin-top: 4px;
}

/* =========================================
   STEP 2: 入力フォーム
   ========================================= */
#hmh-input-form {
    margin-top: 20px;
}

.hmh-form-section {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    margin-bottom: 16px;
}

/* セクションタイトル — CF7が<p>を挿入するので両方に対応 */
.hmh-section-title p {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--hmh-teal) !important;
    text-align: center !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 14px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hmh-gray-200);
    display: block;
}

.hmh-form-row {
    margin-bottom: 16px;
}
.hmh-form-row:last-child {
    margin-bottom: 0;
}

/* 2カラム */
.hmh-row-2col {
    display: flex;
    gap: 12px;
}
.hmh-row-2col > div {
    flex: 1;
    min-width: 0;
}

/* フィールドラベル — _forms.scssのlabelスタイルを上書き */
.hmh-field-label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--hmh-navy) !important;
    margin-bottom: 6px !important;
    max-width: none !important;
}
.required-badge {
    font-size: 10px;
    background: var(--hmh-red);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
}
.optional-badge {
    font-size: 10px;
    background: var(--hmh-gray-200);
    color: var(--hmh-gray-700);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 400;
}
.input-hint,
.input-hint p {
    font-size: 14px !important;
    color: var(--hmh-gray-400) !important;
    margin: 4px 0 0 !important;
    line-height: 1.5;
}

/* テキスト・メール・電話・テキストエリア・セレクト
   _forms.scss の dl.contact dd 内スタイルを上書き
   （background:#eee, width:70% など） */
.wpcf7-form #hmh-input-form input[type="text"],
.wpcf7-form #hmh-input-form input[type="email"],
.wpcf7-form #hmh-input-form input[type="tel"],
.wpcf7-form #hmh-input-form select,
.wpcf7-form #hmh-input-form textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1.5px solid var(--hmh-gray-200) !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--hmh-gray-700) !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
    display: block;
}
.wpcf7-form #hmh-input-form input[type="text"]:focus,
.wpcf7-form #hmh-input-form input[type="email"]:focus,
.wpcf7-form #hmh-input-form input[type="tel"]:focus,
.wpcf7-form #hmh-input-form select:focus,
.wpcf7-form #hmh-input-form textarea:focus {
    border-color: var(--hmh-teal) !important;
    box-shadow: 0 0 0 3px rgba(42,125,140,.12) !important;
}

/* wpcf7-form-control-wrap がinlineなので block に */
.wpcf7-form #hmh-input-form .wpcf7-form-control-wrap {
    display: block;
}

/* テキストエリア */
.wpcf7-form #hmh-input-form textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.7;
}

/* セレクト */
.wpcf7-form #hmh-input-form select {
    cursor: pointer;
}

/* バリデーションエラー */
.wpcf7-form #hmh-input-form .wpcf7-not-valid {
    border-color: var(--hmh-red) !important;
    background: #fff !important;
}
.wpcf7-form #hmh-input-form .wpcf7-not-valid-tip {
    font-size: 11px;
    color: var(--hmh-red);
    margin-top: 4px;
    display: block;
}
/* カスタムJSバリデーションエラー */
.wpcf7-form #hmh-input-form .hmh-error {
    border-color: var(--hmh-red) !important;
    box-shadow: 0 0 0 3px rgba(192,57,43,.1) !important;
}
.hmh-check-error {
    outline: 2px solid var(--hmh-red);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ファイル */
.wpcf7-form #hmh-input-form input[type="file"] {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px dashed var(--hmh-gray-200) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    cursor: pointer;
    background: #fff !important;
    box-sizing: border-box !important;
    display: block;
}

/* =========================================
   紹介元医療機関ボックス
   ========================================= */
.hmh-shokai-box {
    background: var(--hmh-teal-light);
    border-radius: 8px;
    padding: 16px;
}
.hmh-shokai-title,
.hmh-shokai-title p {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--hmh-teal) !important;
    margin: 0 0 12px !important;
}

/* =========================================
   チェックボックス（送信前確認）
   ========================================= */
.hmh-form-section .wpcf7-checkbox {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}
.hmh-form-section .wpcf7-checkbox .wpcf7-list-item {
    margin: 0 !important;
    display: block;
}
/* _forms.scss の label スタイルを上書き */
.hmh-form-section .wpcf7-checkbox .wpcf7-list-item label {
    display: flex !important;
    align-items: flex-start;
    font-size: 16px !important;
    gap: 10px;
    cursor: pointer;
    font-weight: normal !important;
    padding-left: 0 !important;  /* bootstrapのpadding-left:20pxを上書き */
    margin-bottom: 0 !important;
    max-width: none !important;
}
/* _forms.scss の input[type="checkbox"] { margin-right: 0.5em } を上書き */
.hmh-form-section .wpcf7-checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    border: 2px solid var(--hmh-gray-200) !important;
    border-radius: 4px !important;
    flex-shrink: 0;
    margin: 1px 0 0 !important;  /* top揃えのため */
    cursor: pointer;
    transition: all .18s;
    background: #fff;
    position: relative !important;
}
.hmh-form-section .wpcf7-checkbox input[type="checkbox"]:checked {
    background: var(--hmh-teal) !important;
    border-color: var(--hmh-teal) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='2' points='1,5 4,9 11,1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 70% !important;
}
.hmh-form-section .wpcf7-checkbox .wpcf7-list-item-label {
    font-size: 16px !important;
    line-height: 1.6;
    color: var(--hmh-gray-700);
}

/* =========================================
   「確認する」ボタン
   ========================================= */
#hmh-to-confirm {
    display: block;
    width: 100%;
    padding: 16px;
    background: var(--hmh-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .06em;
    transition: background .18s;
    margin-top: 20px;
    text-align: center;
}
#hmh-to-confirm:hover {
    background: var(--hmh-teal);
}

/* =========================================
   STEP 3: 確認画面（JSで生成）
   ========================================= */
#hmh-confirm-screen {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    margin-top: 20px;
}

.hmh-confirm-step-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hmh-teal);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.hmh-confirm-step-label .num {
    width: 22px;
    height: 22px;
    background: var(--hmh-teal);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.hmh-confirm-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hmh-navy);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hmh-gray-200);
}
.confirm-note {
    font-size: 13px;
    color: var(--hmh-gray-400);
    margin-bottom: 18px;
}

.hmh-confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}
.hmh-confirm-table th,
.hmh-confirm-table td {
    padding: 12px 14px !important;
    font-size: 14px;
    border-bottom: 1px solid var(--hmh-gray-200);
    text-align: left !important;
    vertical-align: top;
}
.hmh-confirm-table th {
    width: 130px;
    color: var(--hmh-gray-400);
    font-weight: 500;
    white-space: nowrap;
}
.hmh-confirm-table td {
    color: var(--hmh-navy);
    font-weight: 500;
}

/* 送信・戻るボタン */
#hmh-confirm-submit {
    display: block;
    width: 100%;
    padding: 16px;
    background: var(--hmh-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .06em;
    transition: background .18s;
    text-align: center;
}
#hmh-confirm-submit:hover {
    background: var(--hmh-teal);
}
#hmh-confirm-back {
    display: block;
    width: 100%;
    padding: 14px;
    background: #fff;
    color: var(--hmh-navy);
    border: 2px solid var(--hmh-navy);
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
    transition: background .18s;
}
#hmh-confirm-back:hover {
    background: var(--hmh-gray-100);
}

/* =========================================
   CF7 本来の送信ボタン（JSで非表示）
   ========================================= */
body.inquiry .wpcf7-form .wpcf7-submit {
    display: none !important;
}
body.test .wpcf7-form .wpcf7-submit {
    display: none !important;
}

/* CF7 レスポンスメッセージ */
.wpcf7-response-output {
    margin: 12px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* =========================================
   フェードイン
   ========================================= */
@keyframes hmhFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hmh-panel-redirect,
#hmh-input-form,
#hmh-confirm-screen {
    animation: hmhFadeIn .3s ease;
}

/* =========================================
   レスポンシブ
   ========================================= */
@media (max-width: 600px) {
    .hmh-row-2col {
        flex-direction: column;
    }
    .hmh-form-section {
        padding: 16px;
    }
    #hmh-confirm-screen {
        padding: 16px;
    }
    .hmh-confirm-table th {
        width: 90px;
    }
}