/* ========================================================================== ธีมเฉพาะ "หน้าจองคิว" (booking.php) — โทนสปาผ่อนคลาย เข้าชุดกับ session-theme.css สโคปทุกกฎด้วย .booking-flow-body (ใส่ไว้ที่ ของหน้านี้อยู่แล้วใน booking-header.php) จึงไม่กระทบหน้าอื่นที่ใช้ style.css ร่วมกัน (index.php, links.php ฯลฯ) เลย ไฟล์นี้เป็นแค่หน้าตา ไม่แตะ HTML/JS ที่มีอยู่ — ทุก id/class ที่ JS ใช้งานทำงานเหมือนเดิมทุกประการ ========================================================================== */ .booking-flow-body { background: radial-gradient(1100px 550px at 12% -8%, #eef6ef 0%, transparent 58%), radial-gradient(900px 480px at 108% 8%, #f5efe0 0%, transparent 55%), linear-gradient(160deg, #f7f4ec 0%, #eef3ec 55%, #e6efe7 100%); } /* ---------- แถบบนสุด ---------- เดิมแถบนี้ไล่สีเขียวเข้ม (--brand-900→--brand-700) ตลอดเวลา ไม่สลับตามโหมดกลางวัน/กลางคืนเหมือน .site-header ของทุกหน้าอื่น (index.php, links.php, booking-detail.php ฯลฯ ใช้ var(--surface) ซึ่งสลับ ขาว/เกือบดำตามโหมด) ทำให้พอกดจาก index.php เข้ามาหน้านี้ แถบบนสลับสีกะทันหันรู้สึกไม่ต่อเนื่องเป็น เว็บเดียวกัน จึงปล่อยให้สืบทอดสีจาก .site-header ปกติ (ธีมสปาที่เหลือของหน้านี้ — พื้นหลังไล่สีครีม/เขียว อ่อน, การ์ด, step ที่ active — ยังคงไว้เหมือนเดิมทั้งหมด ปรับเฉพาะแถบบนสุดจุดเดียว) */ .booking-flow-body .booking-flow-bar { background: var(--surface); border-bottom: 1px solid var(--sand-200); } .booking-flow-body .page-title { text-align: center; color: var(--brand-ink); font-size: clamp(1.4rem, 4vw, 1.8rem); margin-top: 1.75rem; } /* ---------- ตัวบอกขั้นตอน ---------- */ .booking-flow-body .steps { margin: 0 auto 1.75rem; max-width: 1100px; gap: .4rem; /* justify-content:center ต้องอยู่ใน @media (min-width:640px) ด้านล่างเท่านั้น ห้ามใส่แบบไม่มีเงื่อนไข — ตอนจอแคบ (มือถือ) แถบนี้ overflow (.steps ใน style.css ตั้ง overflow-x:auto) ถ้า justify-content เป็น center พร้อมกับ overflow ผลคือเนื้อหาส่วนเกินไหลออกทั้งซ้าย-ขวาเท่ากัน แต่ scrollLeft เริ่มที่ 0 อยู่แล้ว เลื่อนซ้ายต่อไม่ได้ ทำให้ขั้นตอนที่ 1 "เลือกบริการ" หลุดจอไปเลยตั้งแต่เปิดหน้ามา (ไม่ต้องแตะอะไร) */ } .booking-flow-body .step { background: #fffefb; border-color: rgba(45, 106, 79, .12); box-shadow: 0 2px 8px rgba(45, 106, 79, .05); } .booking-flow-body .step.is-active { background: var(--brand-100); border-color: var(--brand-500); box-shadow: 0 3px 12px rgba(76, 155, 115, .22); /* พื้น --brand-100 นี้เป็นป้ายไฮไลต์ของตัวเอง (สว่างตอนกลางวัน มืดโปร่งแสงตอนกลางคืน) ตัวหนังสือจึงต้องใช้ --brand-ink ไม่ใช่ปล่อยตาม --ink-900 ทั่วไป ไม่งั้นโหมดกลางคืนจะกลืนกับพื้นป้ายนี้ */ color: var(--brand-ink); } /* ---------- การ์ดขั้นตอน ---------- */ .booking-flow-body .panel, .booking-flow-body .card { border: 1px solid rgba(45, 106, 79, .08); border-radius: 20px; background: #fffefb; box-shadow: 0 14px 34px rgba(45, 106, 79, .08), 0 2px 8px rgba(45, 106, 79, .05); max-width: 1100px; margin: 0 auto; } /* ฟอร์ม/สรุปยอด (ขั้น 3-4) ตัวหนังสือ/ช่องกรอกสั้นกว่ากริดเลือกบริการ — กว้างเกินไปอ่านยาก จำกัดเฉพาะความกว้างเนื้อหาด้านในให้แคบลง โดยตัวการ์ดยังกว้างเท่าขั้นอื่นเพื่อให้ขอบซ้าย-ขวาตรงกัน */ .booking-flow-body [data-panel="3"] > :not(.panel-title), .booking-flow-body [data-panel="4"] > :not(.panel-title):not(.payment-qr) { max-width: 620px; margin-left: auto; margin-right: auto; } /* ขั้น 2 (วันที่): ช่องวันที่เป็น native ถ้าปล่อยให้กว้างเท่าการ์ด (1100px) จะยืดจนดูแปลก ๆ — จำกัดเฉพาะช่องนี้/ข้อความใต้ช่อง ส่วนตารางเวลาที่เป็นกริดปล่อยเต็มความกว้างตามเดิม (ยิ่งกว้างยิ่งเห็นช่วงเวลาต่อแถวได้มากขึ้น ไม่ได้อ่านยากแบบฟอร์มตัวหนังสือ) */ .booking-flow-body [data-panel="2"] > .field, .booking-flow-body [data-panel="2"] > .hint, .booking-flow-body [data-panel="2"] > #date-message { max-width: 380px; } .booking-flow-body .card + .card { margin-top: 1.5rem; } .booking-flow-body .panel-title, .booking-flow-body .card-title { color: var(--brand-ink); } /* ---------- ตัวเลือกแบบการ์ด (บริการ/ระยะเวลา/บริการเสริม) ---------- */ .booking-flow-body .choice-body { border-radius: 14px; border-width: 2px; transition: border-color .15s, background .15s, box-shadow .15s, transform .1s; } .booking-flow-body .choice:hover .choice-body { transform: translateY(-1px); } .booking-flow-body .choice input:checked + .choice-body { background: var(--brand-100); box-shadow: 0 6px 18px rgba(47, 111, 78, .16); /* เหมือน .step.is-active — พื้น --brand-100 เป็นป้ายไฮไลต์ของตัวเอง ตัวหนังสือจึงต้องใช้ --brand-ink เสมอ (.choice-desc มีสี var(--ink-600) ของตัวเองอยู่แล้ว ต้องทับด้วยเพราะ specificity สูงกว่า) */ color: var(--brand-ink); } .booking-flow-body .choice input:checked + .choice-body .choice-desc { color: var(--brand-ink); } .booking-flow-body .choice-thumb { border-radius: 12px; } /* ---------- ช่วงเวลา ---------- */ .booking-flow-body .slot { border-radius: 999px; border-width: 2px; transition: border-color .15s, background .15s, transform .1s; } .booking-flow-body .slot:hover { transform: translateY(-1px); } .booking-flow-body .slot[aria-pressed="true"] { box-shadow: 0 4px 14px rgba(47, 111, 78, .28); } /* ---------- ฟอร์ม ---------- */ .booking-flow-body .field input, .booking-flow-body .field textarea, .booking-flow-body .field select { border-radius: 12px; border-color: rgba(45, 106, 79, .16); padding: .75rem .95rem; transition: border-color .15s, box-shadow .15s; } .booking-flow-body .field input:focus, .booking-flow-body .field textarea:focus { box-shadow: 0 0 0 3px rgba(76, 155, 115, .18); } /* input[type=date] แบบ native ของ iOS Safari มีปัญหาเรื่องขนาด/ล้นกรอบมาก่อนแล้ว (ดูคอมเมนต์เดิมใน style.css เรื่อง webview บางตัวไม่ยอมหดตาม width) — เพิ่ม padding/มุมโค้ง ทับเข้าไปอีกทำให้ layout ภายในของตัวควบคุม native หลุดกรอบบนมือถือจริง จึงต้องคืนค่าเดิมที่ปลอดภัยกว่า ให้เฉพาะช่องนี้ ไม่กระทบช่องอื่น */ .booking-flow-body .field input[type="date"] { padding: .7rem .85rem; border-radius: 8px; } /* ---------- สรุปราคา ---------- */ .booking-flow-body .summary { border-radius: 16px; background: linear-gradient(160deg, #fbfaf6, var(--sand-100)); border: 1px dashed rgba(45, 106, 79, .18); } /* ---------- คูปองส่วนลด ---------- */ .booking-flow-body .coupon-field { background: var(--brand-100); border-radius: 14px; padding: 1rem 1.1rem; color: var(--brand-ink); } /* ---------- QR ชำระเงิน ---------- */ .booking-flow-body .payment-qr { display: block; margin: 0 auto; max-width: 260px; border-radius: 18px; border: 6px solid #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .12); } /* ---------- แนบสลิป ---------- */ .booking-flow-body .slip-picker { border: 2px dashed rgba(45, 106, 79, .3); border-radius: 14px; padding: 1.1rem; background: var(--sand-100); text-align: center; cursor: pointer; } .booking-flow-body .slip-preview-img { display: block; margin: .75rem auto; max-width: 220px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } /* ---------- ปุ่ม ---------- */ .booking-flow-body .btn { border-radius: 999px; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease; } .booking-flow-body .btn:active:not(:disabled) { transform: scale(.98); } .booking-flow-body .btn-primary { background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); box-shadow: 0 8px 20px rgba(29, 71, 51, .26); } .booking-flow-body .btn-primary:hover { background: var(--brand-900); } .booking-flow-body .btn-ghost { background: #fff; border-color: rgba(45, 106, 79, .22); color: var(--brand-ink); } /* ---------- ป๊อปอัปเงื่อนไข ---------- */ .booking-flow-body .modal-box { border-radius: 20px; } @media (min-width: 640px) { .booking-flow-body .panel { padding: 2rem 2.25rem; } .booking-flow-body .steps { justify-content: center; } } /* ---------- โหมดกลางคืน — อิงตามการตั้งค่าของเครื่อง/เบราว์เซอร์โดยอัตโนมัติ ---------- ไฟล์นี้ตั้งค่าพื้นหลังของการ์ด/หน้าเป็นสีครีมตายตัว (ไม่ได้ผูกกับ var(--white)/var(--surface) ของ style.css) เพื่อธีมสปาที่ตั้งใจไว้ ต้องมาเพิ่มพื้นเข้มเทียบเท่าให้ที่นี่โดยเฉพาะ */ @media (prefers-color-scheme: dark) { .booking-flow-body { background: radial-gradient(1100px 550px at 12% -8%, #16251c 0%, transparent 58%), radial-gradient(900px 480px at 108% 8%, #101c17 0%, transparent 55%), linear-gradient(160deg, #0f1512 0%, #0e1613 55%, #0d1512 100%); } .booking-flow-body .step, .booking-flow-body .panel, .booking-flow-body .card { background: #172019; border-color: rgba(76, 155, 115, .16); } .booking-flow-body .summary { background: linear-gradient(160deg, #182420, var(--sand-100)); border-color: rgba(76, 155, 115, .22); } .booking-flow-body .btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: var(--brand-500); } }