/* 既存の予約フォーム用CSSに重ねるCF7専用の表示調整 */

/* 選択項目の間隔とラベル操作の調整 */
.miraito-reservation .wpcf7-list-item {
    display: inline-block;
    margin: 0 1.5em .5em 0;
}

.miraito-reservation .wpcf7-list-item label {
    cursor: pointer;
}

.miraito-reservation .wpcf7-list-item input {
    margin-right: .5em;
}

/* 入力欄の幅の調整と画面外へのはみ出し防止 */
.miraito-reservation .wpcf7-form-control-wrap {
    display: block;
    max-width: 100%;
}

.miraito-reservation .input_box > dl > dd {
    min-width: 0;
}

.miraito-reservation input,
.miraito-reservation select,
.miraito-reservation textarea {
    max-width: 100%;
}

.miraito-reservation .r_email input {
    width: 100%;
}

/* 既存フォームと同じ枠・チェックマークによる個人情報同意欄の表示 */
.miraito-reservation .privacy_agreement_check .wpcf7-list-item {
    margin: 0;
}

/* キーボード操作を維持した標準チェックボックスの視覚的な非表示 */
.miraito-reservation .privacy_agreement_check input[type="checkbox"] {
    display: inline-block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.miraito-reservation .privacy_agreement_check .wpcf7-list-item-label {
    display: flex;
    align-items: center;
    font-family: 'Noto Sans JP', sans-serif;
    border: 1px solid #ccc;
    padding: .5em 2em;
    font-weight: 500;
    line-height: 1;
}

.miraito-reservation .privacy_agreement_check .wpcf7-list-item-label::before {
    font-family: FontAwesome;
    content: "\f00c";
    font-weight: normal;
    font-size: 1.5em;
    margin-right: .3em;
    color: #ccc;
}

/* 同意済み状態を示す既存フォームと同じピンク色の枠とチェックマーク */
.miraito-reservation .privacy_agreement_check input:checked + .wpcf7-list-item-label {
    border-color: #d84c90;
}

.miraito-reservation .privacy_agreement_check input:checked + .wpcf7-list-item-label::before {
    color: #d84c90;
}

/* キーボード操作時のフォーカス位置を示す輪郭の表示 */
.miraito-reservation .privacy_agreement_check input:focus-visible + .wpcf7-list-item-label {
    outline: 2px solid #346a7a;
    outline-offset: 3px;
}

/* 項目別エラーとフォーム全体の送信結果の表示調整 */
.miraito-reservation .wpcf7-not-valid-tip {
    color: #b91c1c;
    font-size: .9em;
    margin-top: .3em;
}

.miraito-reservation ~ .wpcf7-response-output {
    margin: 1em 0;
}

/* 送信ボタンの中央揃えを維持するCF7標準の送信中マークの非表示 */
.miraito-reservation .submit_box .wpcf7-spinner {
    display: none;
}

/* 送信中のボタン操作抑止と確認画面省略の案内表示 */
.wpcf7-form.submitting .miraito-reservation input[type="submit"] {
    pointer-events: none;
    opacity: .5;
}

.miraito-reservation .submit_box .notes {
    text-align: center;
    margin-bottom: 1em;
}

/* スマートフォン幅での選択項目の間隔調整 */
@media (max-width: 767px) {
    .miraito-reservation .wpcf7-list-item {
        margin-right: 1em;
    }
}

/* 端末の時差による別日の強調を避ける、予約カレンダー内の標準の今日背景の解除 */
.miraito-reservation-day > .ui-state-highlight {
    background: none !important;
}

/* 定休日の選択可否と独立した、日本時間の今日の目印 */
.miraito-reservation-today > .ui-state-default {
    background: #fff09e !important;
    box-shadow: inset 0 0 0 2px #346a7a;
    font-weight: bold;
}

/* 定休日でも今日の目印を確認できる表示濃度の設定 */
.ui-datepicker .miraito-reservation-today.ui-state-disabled {
    opacity: 1;

    /* title属性の説明表示に必要なホバー検知の有効化（datepickerによる選択不可の維持） */
    pointer-events: auto;
}

/* 定休日である今日の選択不可を示すグレー系の背景・枠・文字色の設定 */
.miraito-reservation-today.ui-state-disabled > .ui-state-default {
    background: #e5e7eb !important;
    box-shadow: inset 0 0 0 2px #9ca3af;
    color: #666;
}