/* 2026-11-02 Claude（代表「予約画面の作り直しはあなたの方で費用かからずにつくれるでしょ」）
   /booking/quick/ 専用。スマホで開いた瞬間に「すぐ選べる日時」のボタンが見える並びにする。
   予約の仕組み（booking.js・bk-ux.js・離脱ログ・計測）は /booking/ と同じものをそのまま使い、ここでは並び順と見た目だけを変える。
   予約画面は CSP で style 属性が効かないため、見た目はすべてこのファイルで指定する。
   戻し方：/reserve/index.php の KNP_CALENDAR を https://poolbox-marriage.com/booking/ に戻す（このファイルは /booking/quick/ だけが読む）。 */

/* ---- 日時を選ぶ画面：面談方法（1行）→ 安心の一言 → すぐ選べる日時 → 日付・時刻 → LINEで相談 → 特典・担当・流れ ---- */
#pick:not([hidden]) { display: flex; flex-direction: column; }
#pick > * { order: 50; }
#pick > .pickhead { order: 1; }
#pick > #modeBox { order: 2; }
#pick > #qTop { order: 3; }
#pick > #pickLead { order: 4; }
#pick > #pickWait { order: 5; }
#pick > #soonest { order: 6; }
#pick > #days { order: 7; }
#pick > #slots { order: 8; }
#pick > #noSlots { order: 9; }
#pick > #pickBack { order: 10; }
#pick > #qLine { order: 11; }
#pick > #knpGiftBox { order: 12; }
#pick > #knpTrust { order: 13; }
#pick > #knpFlow { order: 14; }

/* 上の説明文と、LINE案内の重複は隠す（予約の変更のときは説明文を出す：quick.js が q-new を付けない） */
#pick.q-new > #pickLead,
#pick > #knpMini,
#pick > #knpAlt,
#pick > #knpAltTopBox { display: none !important; }
#pick:not(.q-new) > #qTop { display: none; }

#pick .pickhead h1 { margin-bottom: 6px; }

/* 面談方法：2つのボタンを1行に小さく。オンラインを選んでいるときは説明文を出さない */
#modeBox { margin: 0 0 8px !important; }
#modeBox .days { display: grid !important; grid-template-columns: 1fr 1fr; margin: 0 !important; gap: 6px; }
#modeBox .day { width: auto !important; margin: 0 !important; font-size: .76rem !important; line-height: 1.3; padding: 7px 4px !important; min-height: 0 !important; white-space: normal; }
#modeBox:has(button[data-mode="online"][aria-pressed="true"]) #modeNote { display: none; }

/* 安心の一言（チップ）と特典1行 */
.q-top { margin: 0 0 10px; }
.q-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 6px; padding: 0; }
.q-chips li { font-size: .78rem; line-height: 1.2; padding: 4px 8px; border-radius: 999px; background: #eef6f1; color: #1f5f3f; font-weight: 700; }
.q-gift { margin: 0; font-size: .85rem; line-height: 1.5; font-weight: 700; color: #8a5a00; }

/* すぐ選べる日時：押しやすく大きく */
#soonest { margin: 0 0 12px !important; }
#soonest > p { font-weight: 700; font-size: .92rem; }
#soonest button.slot { padding: 12px 14px !important; font-size: 1rem !important; font-weight: 700; }

/* LINEで日時を相談 */
.q-line { margin: 14px 0 12px; padding: 12px; border: 1px solid #bfe8cf; border-radius: 12px; background: #f3fbf6; }
.q-line-t { margin: 0 0 4px; font-weight: 700; font-size: .95rem; }
.q-line-d { margin: 0 0 10px; font-size: .85rem; line-height: 1.6; color: #555; }
a.q-line-btn { display: block; text-align: center; background: #06c755 !important; border-color: #06c755 !important; color: #fff !important; text-decoration: none; }

/* ---- メール入力の画面：予約ボタンをメール欄のすぐ下へ（キーボードを出したままでも押せるように） ---- */
#form:not([hidden]) { display: flex; flex-direction: column; }
#form > * { order: 50; }
#form > h1 { order: 1; }
#form > h1 + p { order: 2; }
#form > label[for="email"] { order: 3; }
#form > #email { order: 4; }
#form > .row2 { order: 5; }
#form > #visitFields { order: 6; }
#form > .hp { order: 7; }
#form > #formErr { order: 8; }
#form > #agreeNote { order: 9; }
#form > #submit { order: 10; }
#form > #formBack { order: 11; }
#form > #email + p.note { order: 12; }
#form > #knpValueForm { order: 13; }
#knpNameHint { display: none; }