.jif-form-wrap {
    width: 100%;
}

.jif-form {
    display: grid;
    gap: 1.25rem
}

.jif-field {
    display: grid;
    gap: .45rem
}

.jif-field input:not([type=checkbox]):not([type=file]),
.jif-field select,
.jif-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem
}

.jif-required {
    color: #b42318;
    font-size: .8em
}

.jif-submit {
    display: block;
    justify-self: center;
    padding: .75rem 1.5rem;
    cursor: pointer;
    width: 25%;
    background-color: var(--wp--preset--color--base);
    border: 0;
    color: white;
    border-radius: 30px;
    font-size: var(--wp--preset--font-size--normal);
    margin-top: 60px;
    transition-duration: 0.2s;
}

.jif-submit:hover {
    transform: scale(1.05);
    filter: brightness(0.75);
}

.jif-submit:disabled {
    cursor: wait;
    opacity: .65
}

.jif-status {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #667085;
    border-radius: .25rem
}

.jif-status.is-error {
    color: #912018;
    background: #fef3f2;
    border-color: #d92d20
}

.jif-status.is-success {
    color: #05603a;
    background: #ecfdf3;
    border-color: #039855
}

.jif-field-error {
    margin: 0;
    color: #b42318;
    font-size: .9em
}

.jif-invalid {
    border-color: #d92d20 !important;
    outline-color: #d92d20
}

.jif-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.jif-field small {
    color: #555
}

.jif-checkbox {
    display: flex;
    gap: .5rem;
    align-items: center
}


/* ========================================
   確認画面・完了画面
   ======================================== */

/* hidden属性をテーマ側のCSSで上書きさせない */
.jif-form [hidden] {
    display: none !important;
}

/* 各画面 */
.jif-step {
    width: 100%;
    box-sizing: border-box;
}

/* 入力・確認画面のタイトル */
.jif-title {
    margin-top: 0;
    display: none;
}

/* 確認画面の説明文 */
.jif-confirm-step>p {
    margin-bottom: 1.25rem;
}

/* 確認項目一覧 */
.jif-confirm-content {
    width: 100%;
    margin: 1.5rem 0;
    border-top: 1px solid #ddd;
}

/* 各項目 */
.jif-confirm-row {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #ddd;
}

/* 項目名 */
.jif-confirm-label {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* 入力値 */
.jif-confirm-value {
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* 確認画面のボタン */
.jif-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* 戻る・確定ボタン */
.jif-actions button {
    box-sizing: border-box;
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: 30px;
    cursor: pointer;
    font-size: var(--wp--preset--font-size--normal);
}

/* 戻るボタン */
.jif-back {
    background: #e5e7eb;
    color: #222;
}

/* 送信確定ボタン */
.jif-confirm-submit {
    background-color: var(--wp--preset--color--base);
    color: white;
}

/* 送信中など、無効化されたボタン */
.jif-actions button:disabled,
.jif-submit:disabled {
    cursor: wait;
    opacity: .65;
}

/* 全体エラー */
.jif-global-error:not(:empty) {
    margin: 1rem 0;
    padding: .75rem 1rem;
    color: #912018;
    background: #fef3f2;
    border: 1px solid #d92d20;
    border-radius: .25rem;
}

/* 項目エラーがある入力欄 */
.jif-field-error-active input,
.jif-field-error-active select,
.jif-field-error-active textarea {
    border-color: #d92d20 !important;
}

/* 送信完了画面 */
.jif-complete-step {
    padding: 1.5rem 0;
}

/* 送信完了メッセージ */
.jif-complete-message {
    margin: 1rem 0;
    padding: 1rem;
    color: #05603a;
    background: #ecfdf3;
    border: 1px solid #039855;
    border-radius: .25rem;
}

/* キーボード操作時のフォーカス */
.jif-form button:focus-visible,
.jif-form input:focus-visible,
.jif-form select:focus-visible,
.jif-form textarea:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* スマートフォン表示 */
@media (max-width: 600px) {
    .jif-confirm-row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .jif-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .jif-actions button {
        width: 100%;
    }

    .jif-submit {
        width: 100%;
    }
}