/* BoostUp Form frontend (minimal) */

.buf-form {
    margin: 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 変数を上書きすると配色を変えられる
   ============================================================ */

/* Step indicator のデフォルト配色 / 形状は全て var() のフォールバックで定義する。
   LP 側で :root に --buf-step-* を定義すれば、CSS の読み込み順に左右されず常に LP 側が勝つ。
   サイズ系も変数化してテーマ側で角丸量・シェブロン幅・パディング等を調整可能にしている。 */

.buf-form__steps-wrap {
    margin: 0;
    text-align: center;
}

.buf-form__steps-lead {
    margin: 0 0 var(--buf-step-lead-mb, .5em);
    font-weight: bold;
    font-size: var(--buf-step-lead-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: var(--buf-step-padding-y, .9em) var(--buf-step-padding-x, .6em) var(--buf-step-padding-y, .9em) calc(var(--buf-step-padding-x, .6em) + var(--buf-step-chevron, 14px));
    background: var(--buf-step-pending-bg, var(--color-gray-300, #ececec));
    color: var(--buf-step-pending-fg, var(--color-gray-500, #8c8c8c));
    line-height: var(--buf-step-line-height, 1.25);
    /* シェブロン形状: 右側が三角に尖り、左側に切り込み */
    clip-path: polygon(
        0 0,
        calc(100% - var(--buf-step-chevron, 14px)) 0,
        100% 50%,
        calc(100% - var(--buf-step-chevron, 14px)) 100%,
        0 100%,
        var(--buf-step-chevron, 14px) 50%
    );
}

/* 最初のステップは左側の切り込みなし + 左側角丸。
   クリップパスは clip-path のみが描画される (border-radius は無視される) ため、
   ポリゴン頂点を 4 分円近似で配置して本物のカーブを描く (sin/cos の 22.5° 刻み)。
   係数: 0.076 = 1 - cos(22.5°),  0.293 = 1 - cos(45°),  0.618 = sin(67.5°). */
.buf-form__step:first-child {
    clip-path: polygon(
        /* Top-left curve (時計回り: 上端から左側へカーブ) */
        var(--buf-step-radius, 8px) 0,
        calc(var(--buf-step-radius, 8px) * 0.618) calc(var(--buf-step-radius, 8px) * 0.076),
        calc(var(--buf-step-radius, 8px) * 0.293) calc(var(--buf-step-radius, 8px) * 0.293),
        calc(var(--buf-step-radius, 8px) * 0.076) calc(var(--buf-step-radius, 8px) * 0.618),
        0 var(--buf-step-radius, 8px),
        /* Bottom-left curve */
        0 calc(100% - var(--buf-step-radius, 8px)),
        calc(var(--buf-step-radius, 8px) * 0.076) calc(100% - var(--buf-step-radius, 8px) * 0.618),
        calc(var(--buf-step-radius, 8px) * 0.293) calc(100% - var(--buf-step-radius, 8px) * 0.293),
        calc(var(--buf-step-radius, 8px) * 0.618) calc(100% - var(--buf-step-radius, 8px) * 0.076),
        var(--buf-step-radius, 8px) 100%,
        /* 底辺 → シェブロン尖端 → 上辺 */
        calc(100% - var(--buf-step-chevron, 14px)) 100%,
        100% 50%,
        calc(100% - var(--buf-step-chevron, 14px)) 0
    );
    padding-left: var(--buf-step-padding-x, .6em);
    border-radius: var(--buf-step-radius, 8px) 0 0 var(--buf-step-radius, 8px);
}

/* 最後のステップは右側を尖らせない + 右側角丸 (4 分円近似) */
.buf-form__step:last-child {
    clip-path: polygon(
        0 0,
        /* Top-right curve */
        calc(100% - var(--buf-step-radius, 8px)) 0,
        calc(100% - var(--buf-step-radius, 8px) * 0.618) calc(var(--buf-step-radius, 8px) * 0.076),
        calc(100% - var(--buf-step-radius, 8px) * 0.293) calc(var(--buf-step-radius, 8px) * 0.293),
        calc(100% - var(--buf-step-radius, 8px) * 0.076) calc(var(--buf-step-radius, 8px) * 0.618),
        100% var(--buf-step-radius, 8px),
        /* Bottom-right curve */
        100% calc(100% - var(--buf-step-radius, 8px)),
        calc(100% - var(--buf-step-radius, 8px) * 0.076) calc(100% - var(--buf-step-radius, 8px) * 0.618),
        calc(100% - var(--buf-step-radius, 8px) * 0.293) calc(100% - var(--buf-step-radius, 8px) * 0.293),
        calc(100% - var(--buf-step-radius, 8px) * 0.618) calc(100% - var(--buf-step-radius, 8px) * 0.076),
        calc(100% - var(--buf-step-radius, 8px)) 100%,
        /* 左下 → シェブロン切れ込み → 左上 */
        0 100%,
        var(--buf-step-chevron, 14px) 50%
    );
    padding-right: var(--buf-step-padding-x, .6em);
    border-radius: 0 var(--buf-step-radius, 8px) var(--buf-step-radius, 8px) 0;
}
.buf-form__step:first-child:last-child {
    clip-path: none;
    padding: var(--buf-step-padding-y, .9em) var(--buf-step-padding-x, .6em);
    border-radius: var(--buf-step-radius, 8px);
}

.buf-form__step--current {
    background: var(--buf-step-current-bg, var(--color-accent, #0067a3));
    color: var(--buf-step-current-fg, var(--color-white, #fff));
}

.buf-form__step--done {
    background: var(--buf-step-done-bg, var(--color-accent, #0067a3));
    color: var(--buf-step-done-fg, var(--color-white, #fff));
}

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

.buf-form__step-label {
    font-size: var(--buf-step-label-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: #22a95f !important;
    color: #fff !important;
}

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

/* 送信ボタン無効化 (必須未入力時) — グレーアウト
   テーマ側で --buf-button-disabled-bg / --buf-button-disabled-fg を上書き可能 */
.buf-form button[name="buf_action"]:disabled,
.buf-form button[name="buf_action"].is-disabled {
    background: var(--buf-button-disabled-bg, var(--color-disabled, #b5b5b5)) !important;
    color: var(--buf-button-disabled-fg, var(--color-white, #fff)) !important;
    box-shadow: none !important;
    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: #fff;
    font-size: 1em;
    cursor: pointer;
}

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

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

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

.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;
}