/* ---------------------------------------------------------------------------
   ส่วนประกอบของหน้าจอง
   ของที่ถูกเลือกถูกเติมเต็มเป็นก้อนสี ทองเหลืองเป็นเส้นกับตัวอักษร มุมมนทุกชิ้น
   จังหวะเดียวของงาน: ตอนเลือก ก้อนสีบานออกจากกลางชิ้นเหมือนเปลวเทียนติด
--------------------------------------------------------------------------- */

.top,
.shell {
  max-width: 460px;
  margin-inline: auto;
}

.top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: calc(var(--u) * 2 + env(safe-area-inset-top)) var(--page-pad) 0;
}

.top__name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 48px;
  padding-block: 12px;
  text-decoration: none;
  font-size: var(--t-small);
  color: var(--ink);
}

.top__name .latin { letter-spacing: 0.14em; font-size: 0.9375rem; }

.top__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-small);
  color: var(--ink);
  transition: background 0.3s var(--ease);
}

.top__contact:hover { background: var(--raise); }
.top__contact .ico { width: 18px; height: 18px; color: var(--ink-soft); }

.shell {
  position: relative;
  display: flow-root;   /* กัน margin ของลูกทะลุออกนอกกรอบ บนจอกว้างจะเห็นเป็นแถบว่าง */
  padding: 0 var(--page-pad) calc(var(--u) * 34 + env(safe-area-inset-bottom));
  min-height: calc(100dvh - 60px);
}

/* เปิดดูบนโน้ตบุ๊กตอนตรวจงาน ให้เห็นเป็นกรอบมือถือกลางจอ */
@media (min-width: 620px) {
  body { background-color: var(--desk); }
  .top, .shell { background-color: var(--ground); }
  .shell { min-height: calc(100dvh - 60px); }
}

/* ขั้นหลังจากหน้าแรกยังอยู่ในห้องเดียวกัน ควันธูปจางๆ มุมขวาบน นิ่ง ไม่แย่งสายตาจากงานที่ต้องทำ
   โทนรุ่งไม่ใช้ เพราะควันสีครีมบนผ้าลินินมองไม่เห็นอยู่แล้ว */
.shell { isolation: isolate; }

.shell::before {
  content: '';
  position: absolute;
  top: 150px;   /* ต่ำกว่าแถบลำดับขั้น ลอยข้างหัวข้อ ไม่ทับอะไรที่ต้องอ่าน */
  right: -8px;
  z-index: -1;
  width: 180px;
  height: 270px;
  background: url('../../assets/smoke.png') center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

body[data-step='package'] .shell::before,
body[data-step='done'] .shell::before,
:root[data-look='dawn'] .shell::before { display: none; }

/* คีย์บอร์ดมือถือเปิดอยู่ ซ่อนแถบปุ่มล่างไม่ให้บังช่องที่กำลังพิมพ์ */
@media (pointer: coarse) {
  body[data-typing] .bar { display: none; }
}

/* --- ลำดับขั้น ------------------------------------------------------------ */

.progress { margin: var(--gap) 0 var(--gap-wide); }

.progress__label {
  margin: 0 0 var(--gap-tight);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.progress__label b { color: var(--ink); font-weight: 600; }

.progress__bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.progress__bar span {
  height: 3px;
  border-radius: 3px;
  background: var(--edge);
  transition: background 0.6s var(--ease);
}

.progress__bar span[data-done] { background: var(--brass); }

/* สิ่งที่เลือกไว้แล้ว ตามไปทุกขั้น ลูกค้าไม่ต้องจำเอง */
.ticket {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: calc(var(--gap) * -1) 0 var(--gap-wide);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ticket { align-items: center; }

/* จุดคั่นติดท้ายชิ้นหน้า ถ้าขึ้นบรรทัดใหม่ จุดจะค้างท้ายบรรทัดบน ไม่ไปขึ้นต้นบรรทัดล่าง */
.ticket span:not(:last-child)::after {
  content: '·';
  margin-inline: 10px;
  color: var(--ink-faint);
}

/* หน้าพี่หมอเล็กในซุ้มโค้ง ตามไปทุกขั้น */
.ticket__face {
  width: 28px;
  height: 42px;
  margin-inline-end: 10px;
  border-radius: 50% 50% 6px 6px / 36% 36% 6px 6px;
  object-fit: cover;
  object-position: 50% 15%;
}

.pkg-terms {
  margin: var(--gap) 0 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ปุ่มไปหน้าถัดไปของขั้นชำระเงินอยู่ในเนื้อหา ใต้คิวอาร์ ไม่ลอยทับคิวอาร์ */
.pay-next { width: 100%; margin-top: var(--gap); }

/* หน้าชำระเงินยอดเงินยังเป็นตัวใหญ่ที่สุด แต่เล็กกว่าหน้าตรวจทาน คิวอาร์จะได้ขึ้นมาในจอแรก */
.paysum .amount b { font-size: clamp(2.75rem, 13vw, 3.25rem); }
.paysum .amount span { display: inline; margin-inline-end: 8px; }

.pay-help { margin-top: var(--gap-tight); }
.pay-help > div { display: grid; justify-items: center; padding-bottom: var(--gap); }

.slip-back { margin-top: var(--gap); }

/* สามขั้นของการจ่ายด้วยมือถือเครื่องเดียว ปุ่มของแต่ละขั้นอยู่ในขั้นนั้นเลย */
.paysteps {
  display: grid;
  gap: var(--gap-wide);
  margin: var(--gap-wide) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pay;
}

.paysteps > li {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
  counter-increment: pay;
  color: var(--ink);
}

.paysteps > li::before {
  content: counter(pay);
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1;
}

.paysteps > li > * { grid-column: 2; }
.paysteps .pay-next { margin-top: 0; }
.paysteps .qr-status:empty { display: none; }

/* --- หัวเรื่อง ------------------------------------------------------------- */

.step-head { margin-bottom: var(--gap-wide); }

.step-head h1 {
  font-size: var(--t-title);
  color: var(--ink);
}

.step-head h1:focus { outline: none; }

.step-head p {
  margin: var(--gap-tight) 0 0;
  color: var(--ink-soft);
  font-size: var(--t-body);
  max-width: 36ch;
}

.step-head--hero { text-align: center; }
.step-head--hero h1 { font-size: var(--t-hero); line-height: 1.3; }
.step-head--hero p { margin-inline: auto; }

.section-title {
  margin: var(--gap-void) 0 var(--gap);
  font-size: 1.625rem;
  font-weight: 300;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: var(--gap-tight);
  font-size: var(--t-body);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 6px;
}

.link .ico { width: 18px; height: 18px; }

/* --- ซุ้ม: รูปพี่หมอในซุ้มโค้ง ควันลอยผ่าน ------------------------------------ */

/* กว้างตามจอ แต่ถูกคุมด้วยความสูงด้วย จอเตี้ย (LINE มีแถบหัวของมันเอง) หัวข้อยังต้องขึ้นมาเหนือปุ่มล่าง */
.altar {
  position: relative;
  width: min(64%, 260px);
  width: min(64%, 260px, 28svh);
  margin: var(--gap-wide) auto var(--gap-wide);
  isolation: isolate;
}

/* จอเตี้ย (LINE มีแถบหัวกินที่ไปอีก) หัวข้อทั้งสองบรรทัดต้องขึ้นมาเหนือปุ่มล่างในจอแรก */
@media (max-height: 760px) {
  .altar { width: min(52%, 200px, 22svh); margin-block: var(--gap) var(--gap); }
  .step-head--hero h1 { font-size: clamp(2.5rem, 12vw, 3rem); }
}

/* เส้นทองเหลืองโค้งรอบซุ้ม ห่างจากรูปหนึ่งนิ้วเหมือนกรอบหิ้งพระ */
.altar::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid var(--brass);
  border-radius: 50% 50% 28px 28px / 36% 36% 28px 28px;
  opacity: 0.55;
  pointer-events: none;
}

.altar__arch {
  position: relative;
  aspect-ratio: 2 / 2.75;
  border-radius: 50% 50% var(--r-soft) var(--r-soft) / 36% 36% var(--r-soft) var(--r-soft);
  overflow: hidden;
  background: var(--raise);
  box-shadow: 0 32px 60px -30px var(--shadow);
}

.altar__arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

/* ฉากสตูดิโอสีเทาจมลงไปในพื้นของหน้า */
.altar__arch::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--photo-fade) 0%, transparent 34%);
  opacity: 0.85;
}

/* ควันธูปเป็นภาพจริง (assets/smoke.png เส้นควันโปร่งใส) สามชั้นเหลื่อมเวลากัน ลอยขึ้นผ่านยอดซุ้ม
   นี่คือการเคลื่อนไหวหลักของหน้า ส่วนที่เหลือเป็นแค่การเปลี่ยนสี */
/* ขอบของชั้นควันจางเป็นวงรี ไม่มีเส้นตรงให้เห็น และเริ่มใต้แถบลำดับขั้น ไม่ลอยทับหัวหน้า */
.altar__smoke {
  position: absolute;
  inset: -6% -10% 24%;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 55%, #000 40%, transparent 100%);
  mask-image: radial-gradient(50% 50% at 50% 55%, #000 40%, transparent 100%);
}

.altar__smoke i {
  position: absolute;
  inset: 0;
  background: url('../../assets/smoke.png') center bottom / 92% auto no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: smoke 13s linear infinite;
}

.altar__smoke i:nth-child(2) { animation-name: smoke-flip; animation-delay: -4.3s; }
.altar__smoke i:nth-child(3) { animation-delay: -8.6s; background-size: 70% auto; }

/* โทนรุ่งใช้ควันสีครีมเหมือนเดิม เห็นเฉพาะตอนลอยผ่านรูปที่เข้ม บนพื้นลินินกลืนหายไป
   ถ้ากลับสีเป็นควันเข้ม บนพื้นสว่างจะดูเป็นคราบสกปรก */
:root[data-look='dawn'] .altar__smoke i { mix-blend-mode: normal; }

@keyframes smoke {
  0%   { transform: translate3d(0, 16%, 0) scale(0.95); opacity: 0; }
  25%  { opacity: 0.95; }
  75%  { opacity: 0.7; }
  100% { transform: translate3d(5%, -18%, 0) scale(1.08); opacity: 0; }
}

@keyframes smoke-flip {
  0%   { transform: translate3d(0, 16%, 0) scale(-0.95, 0.95); opacity: 0; }
  25%  { opacity: 0.85; }
  75%  { opacity: 0.6; }
  100% { transform: translate3d(-5%, -18%, 0) scale(-1.08, 1.08); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .altar__smoke i:first-child { animation: none; opacity: 0.7; }
}

/* ลายเส้นทองเหลืองรอบซุ้ม วงรัศมีแบบผังศักดิ์สิทธิ์ อยู่หลังรูปเสมอ */
.altar__halo {
  position: absolute;
  left: 50%;
  top: -4%;   /* ยอดวงต้องไม่ขึ้นไปทับแถบลำดับขั้นด้านบน */
  z-index: -1;
  width: 132%;
  aspect-ratio: 1;
  color: var(--brass);
  opacity: 0.4;
  transform: translateX(-50%);
  pointer-events: none;
}

:root[data-look='dawn'] .altar__arch::after { opacity: 0; }
:root[data-look='dawn'] .altar__halo { opacity: 0.55; }   /* ทองเหลืองบนลินินจางกว่าบนโกโก้ */

.altar--small { width: min(56%, 220px); width: min(56%, 220px, 30svh); margin-top: var(--gap-wide); }

/* --- แพ็กเกจ -------------------------------------------------------------- */

.packages {
  display: grid;
  gap: var(--gap-tight);
}

/* ชื่อกับราคาอยู่แถวบน คำอธิบายกับของแถมกินเต็มกว้าง จอ 390 จะได้ไม่ตัดวลีกลางคำ */
.package {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'name  price'
    'meta  meta'
    'bonus bonus';
  align-items: center;
  column-gap: var(--gap);
  width: 100%;
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-soft);
  background: var(--raise);
  color: var(--ink);
  text-align: start;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

.package:hover { border-color: var(--line); }

.package__body { display: contents; }

.package__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.package__mark .ico { width: 14px; height: 14px; }

.package__name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--face-display);
  font-size: 1.375rem;
  line-height: 1.35;
}

.package__meta {
  grid-area: meta;
  display: block;
  margin-top: 6px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.package__bonus {
  grid-area: bonus;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--t-small);
  color: var(--brass);
}

.package__bonus .ico { width: 18px; height: 18px; }

.package__price { grid-area: price; text-align: end; }

.package__price b {
  display: block;
  font-family: var(--face-latin);
  font-weight: 400;
  font-size: 2.375rem;
  line-height: 1;
}

.package__price small {
  display: block;
  margin-top: 6px;
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.package[aria-checked='true'] {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--fill-ink);
  animation: bloom 0.6s var(--ease);
}

.package[aria-checked='true'] .package__meta,
.package[aria-checked='true'] .package__price small { color: var(--fill-ink-soft); }
.package[aria-checked='true'] .package__bonus { color: var(--fill-ink); }
.package[aria-checked='true'] .package__mark {
  background: var(--fill-ink);
  border-color: var(--fill-ink);
  color: var(--fill);
}

/* จังหวะเดียวของงาน ก้อนสีบานออกจากกลางชิ้น */
@keyframes bloom {
  from { clip-path: circle(8% at 50% 50%); }
  to   { clip-path: circle(100% at 50% 50%); }
}

.loading,
.empty {
  margin: 0;
  padding: var(--gap-wide) 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-small);
}

/* --- รู้ไว้ก่อนจอง -------------------------------------------------------- */

.faq {
  margin-top: var(--gap-wide);
  border-block: 1px solid var(--edge);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 60px;
  list-style: none;
  font-family: var(--face-display);
  font-size: 1.125rem;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--ink-soft); transition: transform 0.4s var(--ease); }
.faq[open] summary .ico { transform: rotate(180deg); }

.faq ul {
  display: grid;
  gap: 12px;
  margin: 0 0 var(--gap-wide);
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.faq li {
  position: relative;
  padding-inline-start: 20px;
}

.faq li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--brass);
}

/* --- จองด่วน -------------------------------------------------------------- */

.urgent {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  margin-bottom: var(--gap);
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--raise);
  color: var(--ink);
  text-align: start;
  transition: background 0.3s var(--ease);
}

.urgent > .ico { color: var(--ink-soft); }
.urgent strong { display: block; font-weight: 600; }
.urgent span span { display: block; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

.urgent__fee {
  font-family: var(--face-latin);
  font-size: 1.0625rem;
  color: var(--brass);
  white-space: nowrap;
}


/* เหตุผลที่จองด่วนไม่ได้อยู่นอกปุ่ม ปุ่มที่กดไม่ได้รับ focus ไม่ได้ */
.urgent-note {
  margin: 0 0 var(--gap-wide);
  padding-inline: 20px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ปุ่มจองด่วนมีแค่สองสถานะ โชว์หรือซ่อน ไม่มีแบบกดไม่ได้ให้เห็น */
.urgent { margin-bottom: var(--gap-wide); }

/* --- ปฏิทิน --------------------------------------------------------------- */

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.cal-head h2 { font-size: 1.375rem; font-weight: 300; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}

.icon-btn:disabled { border-color: var(--edge); color: var(--ink-faint); cursor: not-allowed; }
.icon-btn:disabled .ico { opacity: 0.5; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-dow {
  padding-bottom: var(--gap-tight);
  text-align: center;
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

/* ทั้งช่องเป็นเป้าแตะ สูง 52 กว้างอย่างน้อย 48 บนจอ 390 วงกลมข้างในเป็นแค่ภาพ */
.cal-day {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--t-body);
}

.cal-day span {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* วันที่จองได้เป็นก้อนสีมีวงขอบ 3:1 วันที่จองไม่ได้ไม่มีทั้งพื้นและขอบ */
.cal-day[data-open] span { background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.cal-day[data-open]:hover span { background: var(--edge); }
.cal-day:disabled { color: var(--ink-faint); cursor: not-allowed; }
.cal-day:disabled span { opacity: 0.5; }

.cal-day[data-today] span::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.cal-day[aria-pressed='true'] span {
  background: var(--fill);
  color: var(--fill-ink);
  box-shadow: none;
  animation: bloom 0.5s var(--ease);
}

.cal-day[aria-pressed='true'][data-today] span::after { background: var(--fill-ink); }
.cal-day--blank { visibility: hidden; }

/* --- ช่องเวลา ------------------------------------------------------------- */

.slot-group + .slot-group { margin-top: var(--gap-wide); }

.slot-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 12px;
}

.slot-group__head h2 { font-size: 1.375rem; font-weight: 300; }
.slot-group__head p { margin: 0; font-size: var(--t-small); color: var(--ink-soft); text-align: end; }
.slot-group__head b { display: block; color: var(--brass); font-weight: 600; }

.slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.slot {
  position: relative;
  display: grid;
  place-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 4px;
  /* ช่องเล็กที่กดได้ต้องมีขอบที่มองเห็น 3:1 ไม่งั้นแยกไม่ออกจากปุ่มที่กดไม่ได้ */
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--raise);
  color: var(--ink);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.slot:hover { background: var(--edge); }

.slot__end {
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.slot[aria-pressed='true'] {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--fill-ink);
  font-weight: 600;
  animation: bloom 0.5s var(--ease);
}

.slot[aria-pressed='true'] .slot__end { color: var(--fill-ink-soft); }

/* --- ฟอร์ม --------------------------------------------------------------- */

.field { margin-bottom: var(--gap-wide); }

.field label {
  display: block;
  margin-bottom: var(--gap-tight);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.field label span { color: var(--ink-faint); }

.field input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  /* พื้นสีกับเส้นใต้แบบสมุด เส้นใต้คือขอบที่มองเห็นได้ 3:1 ไม่ใช่กรอบรอบช่อง */
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-chip) var(--r-chip) 0 0;
  background: var(--raise);
  color: var(--ink);
  caret-color: var(--brass);
  font-size: var(--t-body);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s var(--ease);
}

.field input::placeholder { color: var(--ink-faint); }
.field input:focus { border-color: var(--brass); outline: 2px solid var(--brass); outline-offset: 2px; }
.field input[aria-invalid='true'] { border-color: var(--alarm); }
.field input::-webkit-date-and-time-value { text-align: start; }

/* ช่องวันที่กับเวลา ซ่อนตัวอักษรตั้งต้นของเบราว์เซอร์ (วว/ดด/ปปปป, --:--) แล้วใช้คำของร้านแทน
   ไอคอนของเบราว์เซอร์ถูกขยายเต็มช่องแบบโปร่งใส แตะตรงไหนก็เปิดตัวเลือก */
.field__control { position: relative; }
.field__control input { padding-inline-end: 52px; }

.field__control input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}

.field__control[data-empty] input,
.field__control[data-empty] input::-webkit-datetime-edit { color: transparent; }

.field__ph {
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.field__control:not([data-empty]) .field__ph { display: none; }

.field__icon {
  position: absolute;
  inset-inline-end: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}

.field__hint {
  margin: var(--gap-tight) 0 0;
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.field__error {
  display: none;
  margin: var(--gap-tight) 0 0;
  font-size: var(--t-small);
  color: var(--alarm);
}

.field[data-invalid] .field__error { display: block; }

/* --- ตรวจทาน -------------------------------------------------------------- */

.receipt {
  margin: 0 0 var(--gap);
  padding: 8px 20px 20px;
  border-radius: var(--r-soft);
  background: var(--raise);
}

.receipt__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-tight);
  min-height: 48px;
  padding: 0;
  border-bottom: 1px dashed var(--edge);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.receipt__row b { margin-inline-start: auto; color: var(--ink); font-weight: 600; text-align: end; }

/* แก้ได้ทีละบรรทัดจากหน้าตรวจทาน ไม่ต้องย้อนทีละขั้น */
.receipt__edit {
  min-width: 48px;
  min-height: 48px;
  margin-inline-end: -8px;
  padding: 0 8px;
  border: 0;
  background: none;
  font-size: var(--t-small);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}

.receipt__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding-top: 16px;
}

.receipt__total span { font-size: var(--t-small); color: var(--ink-soft); }

.receipt__total b {
  font-family: var(--face-latin);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1;
  color: var(--ink);
}

.receipt__total small {
  margin-inline-start: 6px;
  font-family: var(--face-body);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* บล็อกเงื่อนไขกับรายการเตรียมตัว เป็นพื้นการ์ดเดียวกับที่อื่น ไม่มีเส้นตกแต่งเพิ่ม */
.terms {
  padding: 20px;
  border-radius: var(--r-soft);
  background: var(--raise);
  color: var(--ink);
}

.terms h2 { margin-bottom: 10px; font-size: 1.25rem; font-weight: 300; }

.terms ul {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.terms li { position: relative; padding-inline-start: 20px; }

.terms li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--ink);
}

.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--ground);
  cursor: pointer;
}

.check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.check__box {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.check__box .ico { width: 16px; height: 16px; }
.check input:checked + .check__box { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }
.check input:focus-visible + .check__box { outline: 2px solid var(--brass); outline-offset: 3px; }

/* --- ชำระเงิน ------------------------------------------------------------- */

.amount {
  margin: 0 0 var(--gap-wide);
  text-align: center;
}

.amount span { display: block; font-size: var(--t-small); color: var(--ink-soft); }

.amount b {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--face-latin);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1;
}

.amount small { margin-inline-start: 8px; font-size: var(--t-body); color: var(--ink-soft); }

/* คิวอาร์บนจอมีไว้ให้บันทึกเป็นรูป ไม่ได้มีไว้ให้สแกนจากจอ ไม่ต้องใหญ่จนดันขั้นตอนตกจอ */
.qr {
  width: min(100%, 220px);
  margin: 0 auto;
  padding: 14px 14px 10px;
  border-radius: var(--r-soft);
  background: #F7F1E6;
  box-shadow: 0 24px 50px -28px var(--shadow);
  text-align: center;
}

.qr img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  -webkit-touch-callout: default;
}

.qr figcaption {
  margin-top: 8px;
  font-size: var(--t-micro);
  color: #5A4838;
}

.qr-status {
  margin: 0;
  min-height: 1lh;
  text-align: center;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.bank {
  padding: 20px;
  border-radius: var(--r-soft);
  background: var(--raise);
  text-align: center;
}

.bank__name { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }

.bank__no {
  margin: 8px 0 16px;
  /* ตัวเลขบัญชีต้องอ่านไม่พลาด Marcellus ทำ 0 ดูเป็น O จึงใช้ฟอนต์เนื้อความ */
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink);
  -webkit-user-select: all;
  user-select: all;
}

/* ยอด ชื่อบัญชี และเวลาที่เหลือ อยู่ด้วยกันเหนือคิวอาร์
   ของที่ลูกค้าต้องเทียบในแอปธนาคารจะได้อยู่ในสายตาเดียว ไม่ต้องเลื่อนหา */
.paysum { margin: 0 0 var(--gap-wide); text-align: center; }
.paysum .amount { margin-bottom: var(--gap); }

.paysum__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-block: 1px solid var(--edge);
}

.paysum__rows > div { padding: 12px 8px; }
.paysum__rows > div + div { border-inline-start: 1px solid var(--edge); }
.paysum__rows dt { font-size: var(--t-micro); color: var(--ink-faint); }
.paysum__rows dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.paysum__rows [data-urgent] dd { color: var(--alarm); }

.pay-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--gap-wide) 0 0;
  padding: 14px 16px;
  border-radius: var(--r-chip);
  background: var(--raise);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.pay-note .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--ink); }

.howto-wrap { margin-top: var(--gap-tight); }

.howto-wrap summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  list-style: none;
  cursor: pointer;
  font-size: var(--t-small);
  color: var(--ink);
}

.howto-wrap summary::-webkit-details-marker { display: none; }
.howto-wrap summary .ico { color: var(--ink-soft); transition: transform 0.4s var(--ease); }
.howto-wrap[open] summary .ico { transform: rotate(180deg); }

.paycode {
  margin: var(--gap-wide) 0 0;
  text-align: center;
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.paycode b { font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }

.restart-note { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }

.restart {
  display: block;
  min-height: 48px;
  margin: var(--gap) auto 0;
  padding: 0 var(--gap);
  border: 0;
  background: none;
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--line);
}

.restart[data-armed] { color: var(--ink); text-decoration-color: var(--brass); }

/* --- สลิป ----------------------------------------------------------------- */

.slip-hold {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 var(--gap-wide);
  padding: 14px 18px;
  border-radius: var(--r-soft);
  background: var(--raise);
}

.slip-hold dt { font-size: var(--t-micro); color: var(--ink-faint); }
.slip-hold dd { margin: 0; font-weight: 600; color: var(--ink); }
.slip-hold[data-urgent] #slip-cd { color: var(--alarm); }

.drop {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 220px;
  padding: var(--gap-wide) var(--gap);
  border: 1px solid transparent;
  border-radius: var(--r-soft);
  background: var(--raise);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}

.drop:hover { border-color: var(--line); }
.drop:focus-within { outline: 2px solid var(--brass); outline-offset: 3px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop > .ico { color: var(--ink-soft); }
.drop[data-has-file] > .ico { display: none; }
.drop strong { font-weight: 600; color: var(--ink); }
.drop__note { font-size: var(--t-micro); color: var(--ink-faint); }
.drop__preview { max-width: 180px; max-height: 240px; border-radius: 12px; object-fit: contain; }

/* --- จองสำเร็จ ------------------------------------------------------------ */

.done { text-align: center; }
/* หัวข้อหน้าจบสั้นและต้องอยู่บรรทัดเดียว ขนาดเล็กกว่าหัวข้อขั้นอื่นให้พอดีจอ 390 */
.done h1 { font-size: clamp(2.125rem, 10vw, 2.75rem); }
.done h1:focus { outline: none; }
.done > p { max-width: 34ch; margin: 12px auto 0; color: var(--ink-soft); }

.keepsake {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  margin: var(--gap-wide) 0 0;
  padding: 20px;
  border-radius: var(--r-soft);
  background: var(--raise);
  text-align: start;
  font-size: var(--t-small);
}

.keepsake dt { color: var(--ink-faint); }
.keepsake dd { margin: 0; font-weight: 600; color: var(--ink); }
.keepsake dd.code { letter-spacing: 0.06em; font-size: var(--t-body); font-variant-numeric: tabular-nums; }

.done__note { font-size: var(--t-small); }

.prep {
  margin: var(--gap) 0 0;
  padding: 20px;
  border-radius: var(--r-soft);
  background: var(--raise);
  text-align: start;
}

.prep h2 { margin-bottom: 10px; font-size: 1.25rem; font-weight: 300; }

.prep ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
}

.prep li { position: relative; padding-inline-start: 20px; }

.prep li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--ink);
}

/* จบด้วยคำของลูกค้าเอง ไม่ใช่จบที่รหัสการจอง */
.done__quote {
  max-width: 24ch;
  margin: var(--gap-void) auto 0;
  font-family: var(--face-display);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--ink);
}

.done__quote p { margin: 0; }

.done__quote::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto var(--gap);
  background: var(--brass);
}

.profile-note {
  margin: calc(var(--gap) * -1) 0 var(--gap-wide);
  padding: 12px 16px;
  border-radius: var(--r-chip);
  background: var(--raise);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* --- แจ้งเตือน ------------------------------------------------------------ */

.notice {
  display: grid;
  gap: 12px;
  margin: 0 0 var(--gap-wide);
  padding: 16px 18px;
  border: 1px solid var(--alarm);
  border-radius: var(--r-chip);
  background: var(--raise);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink);
}

.notice[data-tone='wait'] { border-color: var(--brass); }
.notice p { margin: 0; }

.notice__action {
  justify-self: start;
  min-height: 48px;
  padding: 0 var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-small);
  color: var(--ink);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 40;
  width: min(420px, calc(100% - 2 * var(--page-pad)));
  padding: 12px 18px;
  border-radius: var(--r-chip);
  background: var(--fill);
  color: var(--fill-ink);
  font-size: var(--t-small);
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 16px 40px -18px var(--shadow);
}

/* --- ปุ่มหลักติดขอบล่าง ในระยะนิ้วโป้ง --------------------------------------- */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  /* ม่านไล่สีสูงพอให้ข้อความที่เลื่อนผ่านจางหายก่อนถึงปุ่ม ส่วนที่โปร่งปล่อยให้แตะของข้างใต้ได้ */
  padding: 48px var(--page-pad) calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--ground) 0, var(--ground) calc(100% - 48px), transparent);
  pointer-events: none;
}

.bar__inner {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  max-width: calc(460px - 2 * var(--page-pad));
  margin: 0 auto;
}

@media (min-width: 620px) {
  .bar {
    left: 50%;
    right: auto;
    width: 460px;
    transform: translateX(-50%);
  }
}

.btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--fill-ink);
  font-size: var(--t-body);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 30px -16px var(--shadow);
  transition: transform 0.2s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.btn:active:not(:disabled) { transform: scale(0.98); }
.btn .ico { width: 18px; height: 18px; }

/* ปุ่มที่ยังกดไม่ได้เป็นโพรงโปร่ง ไม่ใช่ก้อนสีเดียวกับช่องที่เลือกได้ */
.btn:disabled {
  background: transparent;
  color: var(--ink-faint);
  box-shadow: inset 0 0 0 1px var(--edge);
  cursor: not-allowed;
}

.btn[aria-busy='true'] { cursor: progress; }

.btn--quiet {
  min-height: 48px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn--quiet .ico { color: currentColor; }

.btn-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink);
}

/* --- แถบโหมดทดลอง (demo.html เท่านั้น) ------------------------------------- */

.demo-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 6px var(--page-pad);
  background: var(--fill);
  color: var(--fill-ink);
  font-size: var(--t-micro);
}

.demo-bar__looks { display: flex; gap: 6px; }

.demo-bar__looks button {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--fill-ink-soft);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fill-ink);
  font-size: var(--t-micro);
}

.demo-bar__looks button[aria-pressed='true'] { background: var(--fill-ink); color: var(--fill); border-color: var(--fill-ink); }