/* BoostUp Form frontend (minimal) */

.buf-form {
    margin: 1.5em 0;
}

/* ============================================================
   StepForm インジケーター (シェブロン形状)

   構造:
     <div class="buf-form__steps-wrap">
       <p class="buf-form__steps-lead">2〜3分で完了するアンケートです!</p>
       <ol class="buf-form__steps">
         <li class="buf-form__step buf-form__step--done | --current">
           <span class="buf-form__step-num">1</span>
           <span class="buf-form__step-label">希望日時選択</span>
         </li>
       </ol>
     </div>

   テーマ側で --buf-step-* CSS 変数を上書きすると配色を変えられる
   ============================================================ */

.buf-form__steps-wrap {
    --buf-step-current-bg:   #0067a3;
    --buf-step-current-fg:   #F1F1F1;
    --buf-step-pending-bg:   #ececec;
    --buf-step-pending-fg:   #8c8c8c;
    --buf-step-done-bg:      #0067a3;
    --buf-step-done-fg:      #F1F1F1;

    margin: 0 0 1.5em;
    text-align: center;
}

.buf-form__steps-lead {
    margin: 0 0 .5em;
    font-weight: bold;
    font-size: .95em;
}

.buf-form__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.buf-form__step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .9em .6em .9em 1.4em;
    background: var(--buf-step-pending-bg);
    color: var(--buf-step-pending-fg);
    line-height: 1.25;
    /* シェブロン形状: 右側が三角に尖り、左側に切り込み */
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}

/* 最初のステップは左側の切り込みなし */
.buf-form__step:first-child {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    padding-left: .6em;
}

/* 最後のステップは右側を尖らせない */
.buf-form__step:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
    padding-right: .6em;
}
.buf-form__step:first-child:last-child {
    clip-path: none;
    padding: .9em .6em;
}

.buf-form__step--current {
    background: var(--buf-step-current-bg);
    color: var(--buf-step-current-fg);
}

.buf-form__step--done {
    background: var(--buf-step-done-bg);
    color: var(--buf-step-done-fg);
}

/* STEP.X (小) + ラベル (大) の 2 行表示 */
.buf-form__step-num {
    font-size: .8em;
    font-weight: bold;
    letter-spacing: .03em;
    opacity: .92;
}

.buf-form__step-label {
    font-size: .98em;
    font-weight: bold;
    margin-top: .15em;
}

/* Honeypot: 画面外配置 (CSS レンダリングしない bot は埋めて自滅、display:none は使わない) */
.buf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0;
}
.buf-hp label,
.buf-hp input { pointer-events: none; }

.buf-form__errors {
    margin-bottom: 1em;
    padding: 0.8em 1em;
    background: #fff5f5;
    border: 1px solid #ff8a8a;
    color: #a00;
    border-radius: 4px;
}

/* ============================================================
   リアルタイム必須チェック表示
   .c-form__required.is-valid   → OK
   .c-form__required.is-invalid → 必須
   ============================================================ */
.c-form__required.is-valid {
    background: #4caf50 !important;
    color: #F1F1F1 !important;
}

.c-form__required.is-invalid {
    background: #e53935 !important;
    color: #F1F1F1 !important;
}

/* 送信ボタン無効化 (必須未入力時) */
.buf-form button[name="buf_action"]:disabled,
.buf-form button[name="buf_action"].is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.buf-form__errors ul {
    margin: 0;
    padding-left: 1.2em;
}

.buf-form__row {
    margin: 0 0 1em 0;
}

.buf-form__row > dt {
    margin-bottom: 0.3em;
    font-weight: 600;
}

.buf-form__required {
    color: #d63638;
    font-weight: bold;
    margin-left: 0.3em;
}

.buf-form__input,
.buf-form__textarea,
.buf-form__select {
    width: 100%;
    max-width: 480px;
    padding: 0.5em 0.7em;
    border: 1px solid #c4c7cb;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

.buf-form__textarea {
    min-height: 6em;
    resize: vertical;
}

.buf-form__radio,
.buf-form__checkbox {
    display: inline-flex;
    align-items: center;
    margin-right: 1em;
    gap: 0.3em;
}

.buf-form__actions {
    margin-top: 1.5em;
}

.buf-form__button {
    display: inline-block;
    padding: 0.7em 1.6em;
    border: 0;
    border-radius: 4px;
    background: #2271b1;
    color: #F1F1F1;
    font-size: 1em;
    cursor: pointer;
}

.buf-form__button:hover {
    background: #135e96;
}

.buf-form__button--back {
    background: #757575;
}

.buf-form__button--back:hover {
    background: #5a5a5a;
}

.buf-form__button--next {
    background: #2271b1;
}

.buf-form__button--next:hover {
    background: #135e96;
}

.buf-form__confirm-list {
    margin: 0 0 1.5em;
    padding: 1em 1.2em;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}

.buf-form__confirm-list dt {
    font-weight: 600;
    margin-top: 0.6em;
}

.buf-form__confirm-list dt:first-child {
    margin-top: 0;
}

.buf-form__confirm-list dd {
    margin: 0 0 0.4em 0;
}

.buf-form__thanks {
    padding: 1.5em;
    background: #f6f7f7;
    border-radius: 4px;
}