/* 仁多見建築 お問い合わせ同一ページ確認 v0.1.4 */
/* このプラグイン内のボタンだけを対象にし、SWELL / CF7 の他ボタンには影響させない。 */

.nitami-contact-confirm [hidden] {
    display: none !important;
}

.nitami-confirm-table {
    margin: 1.5em 0 2em;
    border-top: 1px solid #ddd;
}

.nitami-confirm-row {
    display: grid;
    grid-template-columns: minmax(9em, 12em) 1fr;
    gap: 1em;
    padding: 1em 0;
    border-bottom: 1px solid #ddd;
}

.nitami-confirm-label {
    font-weight: 700;
}

.nitami-confirm-value {
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* 入力画面：「確認画面へ」 */
.wpcf7 .nitami-contact-confirm button.nitami-confirm-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 2em auto 0 !important;
    padding: 0 1.5em !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #d6914e !important;
    color: #fff !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font: inherit !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.wpcf7 .nitami-contact-confirm button.nitami-confirm-open:hover {
    background: #c97f3a !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* 確認画面：戻る・送信 */
.wpcf7 .nitami-contact-confirm .nitami-confirm-actions {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin: 2em 0 0 !important;
}


/*
 * Contact Form 7 の自動整形でボタンが <p> や <br> に包まれても、
 * 確認画面の「もどる」「送信」を横並びのまま維持する。
 */
.wpcf7 .nitami-contact-confirm .nitami-confirm-actions > p {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wpcf7 .nitami-contact-confirm .nitami-confirm-actions > br,
.wpcf7 .nitami-contact-confirm .nitami-confirm-actions > p > br {
    display: none !important;
}

.wpcf7 .nitami-contact-confirm .nitami-confirm-actions button.nitami-confirm-back,
.wpcf7 .nitami-contact-confirm .nitami-confirm-actions input.nitami-final-submit {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 1.25em !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font: inherit !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.wpcf7 .nitami-contact-confirm .nitami-confirm-actions button.nitami-confirm-back {
    background: #eee !important;
    color: #4a443b !important;
}

.wpcf7 .nitami-contact-confirm .nitami-confirm-actions button.nitami-confirm-back:hover {
    background: #e2e2e2 !important;
    color: #4a443b !important;
}

.wpcf7 .nitami-contact-confirm .nitami-confirm-actions input.nitami-final-submit {
    background: #d6914e !important;
    color: #fff !important;
    vertical-align: middle !important;
}

.wpcf7 .nitami-contact-confirm .nitami-confirm-actions input.nitami-final-submit:hover {
    background: #c97f3a !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* CF7 の送信中スピナーでボタンの並びを崩さない */
.wpcf7 .nitami-contact-confirm .nitami-confirm-actions .wpcf7-spinner {
    position: absolute !important;
    left: calc(50% + 178px) !important;
    margin: 0 !important;
}

.nitami-confirm-error {
    display: block;
    margin-top: .4em;
}

@media (max-width: 599px) {
    .nitami-confirm-row {
        grid-template-columns: 1fr;
        gap: .35em;
    }

    .wpcf7 .nitami-contact-confirm button.nitami-confirm-open {
        max-width: none !important;
        width: 100% !important;
    }

    .wpcf7 .nitami-contact-confirm .nitami-confirm-actions {
        gap: 12px !important;
    }

    
/*
 * Contact Form 7 の自動整形でボタンが <p> や <br> に包まれても、
 * 確認画面の「もどる」「送信」を横並びのまま維持する。
 */
.wpcf7 .nitami-contact-confirm .nitami-confirm-actions > p {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wpcf7 .nitami-contact-confirm .nitami-confirm-actions > br,
.wpcf7 .nitami-contact-confirm .nitami-confirm-actions > p > br {
    display: none !important;
}

.wpcf7 .nitami-contact-confirm .nitami-confirm-actions button.nitami-confirm-back,
    .wpcf7 .nitami-contact-confirm .nitami-confirm-actions input.nitami-final-submit {
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 56px !important;
        min-height: 56px !important;
    }

    .wpcf7 .nitami-contact-confirm .nitami-confirm-actions .wpcf7-spinner {
        left: auto !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
    }
}