/* public/notify-visit/style.css — เฉพาะหน้า P5 (แจ้งว่าจะมา)
   design/01-pages.md §2 — ฟอร์มคอลัมน์เดียว กว้างสูงสุด 560px จัดกลางบนจอใหญ่ */

.noscript-msg {
  margin: var(--sp-4) var(--gutter);
}
.noscript-msg__phone {
  display: block;
  margin-top: var(--sp-2);
  font-size: 26px;
  font-weight: 800;
}

main.form-page {
  max-width: 560px;
  padding-top: var(--sp-6);
}

.page-intro {
  margin-top: var(--sp-3);
  color: var(--on-surface-2);
}

.from-box {
  margin-top: var(--sp-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ---------- ช่องกรอกทั่วไป (§2.1, §2.2) ---------- */
/* ⚠️ แก้ 2026-07-31 (พบตอนสอบสวนบั๊ก "กดส่งแล้วไม่มีอะไรเกิดขึ้น"): มี scroll-margin-top กันหัวจดกับส่วนหัว
   อยู่แล้ว แต่ไม่มี scroll-margin-bottom กันแถบโทร (.call-bar, position:fixed, สูง var(--callbar-h)=64px)
   ที่ตรึงอยู่ล่างจอทุกหน้าเลย — พิสูจน์แล้วด้วยเบราว์เซอร์จริง + document.elementFromPoint() ว่า
   scrollIntoView()/focus() ของเบราว์เซอร์เอง (ใช้จริงใน renderDayAndPeriodButtons(), scrollToFirstError(),
   และการเลื่อนไปหากล่อง turnstile-fallback) สามารถพาช่องกรอก/ปุ่มไปอยู่ตรงแถบโทรได้พอดี ทำให้คลิกที่ควรโดน
   ช่องกรอก/ปุ่ม กลับไปโดนแถบโทร (ปุ่มคัดลอกเบอร์) แทนอย่างเงียบๆ — เพิ่ม scroll-margin-bottom กันโซนนี้ */
.field {
  margin-top: var(--sp-5);
  scroll-margin-top: 96px;
  scroll-margin-bottom: calc(var(--callbar-h) + var(--sp-3));
}
.field label,
.field-group legend {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
}
.field-help {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--on-surface-2);
}
.field input[type="text"],
.field input[type="tel"],
.date-picker input[type="date"] {
  margin-top: var(--sp-2);
  width: 100%;
  height: var(--btn-h);
  font-size: 18px;
  font-family: var(--font-body);
  background: var(--surface-3);
  color: var(--on-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 var(--sp-4);
}
.field input:focus-visible,
.date-picker input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.field-error,
.field-group-error {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--alert);
}
.field.has-error input {
  border-width: 2px;
  border-color: var(--alert);
}
.field-group.has-error {
  border: 2px solid var(--alert);
  border-radius: var(--radius);
}

/* ---------- fieldset ---------- */
.field-group {
  margin-top: var(--sp-5);
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius);
  padding: var(--sp-4);
  scroll-margin-top: 96px;
  scroll-margin-bottom: calc(var(--callbar-h) + var(--sp-3)); /* เหตุผลเดียวกับ .field ด้านบน */
}
.field-group legend {
  padding: 0;
}

/* ---------- ตัวเลือก "ต้องการอะไร" — การ์ดติ๊ก (§2.3) ---------- */
.service-skeleton {
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-3);
}
.service-skeleton__row {
  height: 56px;
  border-radius: var(--radius);
  background: var(--surface-3);
}

.service-cards-checkbox {
  margin-top: var(--sp-3);
  display: grid;
  gap: 12px;
}
.service-check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0 var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 500;
  scroll-margin-bottom: calc(var(--callbar-h) + var(--sp-3)); /* การ์ดติ๊กเดี่ยวๆ ก็โดนแถบโทรบังคลิกได้เหมือนกัน — พิสูจน์แล้วด้วยเบราว์เซอร์จริง */
}
.service-check:active { background: var(--surface-3); }
.service-check input[type="checkbox"] {
  width: 28px;
  height: 28px;
  flex: none;
  accent-color: var(--accent);
}
.service-check:has(input:checked) {
  background: var(--accent-dim);
  border-width: 2px;
  border-color: var(--accent);
  font-weight: 700;
}

.tire-size-row {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.tire-size-row label {
  font-size: var(--fs-small);
  font-weight: 600;
}
.tire-size-row input {
  margin-top: var(--sp-2);
  width: 100%;
  height: var(--btn-h);
  font-size: 18px;
  font-family: var(--font-body);
  background: var(--surface-3);
  color: var(--on-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 var(--sp-4);
}
.tire-size-row .field-help {
  margin-top: var(--sp-1);
}

/* ---------- ลิงก์แทรกในเนื้อหา (ปุ่มโทรที่ไม่ใช่ .call-btn/.btn) — ใช้ซ้ำหลายจุดในหน้านี้:
   "แก้" ใน .from-box, "อยากเล่าอาการก่อนก็ได้..." ใต้รายการติ๊กบริการ, "เบอร์ยางดูตรงไหน?" ใต้ .tire-size-row
   ⚠️ แก้ 2026-07-31 (QA เว็บจริง): เดิมไม่มี .link-inline ทั่วไปในไฟล์นี้เลย มีแต่ .tire-size-row .link-inline
   ที่ scope แคบเกินไป ทำให้ "แก้" (อยู่ใน .from-box คนละจุด) ไม่ได้สไตล์อะไรเลย เหลือแค่ลิงก์เปล่าตัวเล็ก
   ~19×32px ทั้งที่ปุ่ม/ช่องอื่นในฟอร์มนี้สูง 48-56px ทั้งหมด (§4.2 ทุกจุดกดต้อง ≥48px) */
.link-inline {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}
.link-inline:active { text-decoration: underline; }
.tire-size-row .link-inline {
  margin-top: var(--sp-1);
}

/* ---------- "จะมาเมื่อไหร่" — ปุ่มวัน/ช่วง เป็น radio จริงที่ซ่อนแล้วแต่งด้วย label (§2.5) ---------- */
.day-buttons {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.period-buttons {
  margin-top: var(--sp-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 480px) {
  .day-buttons { flex-wrap: nowrap; }
}

.choice-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 56px;
  min-width: 104px;
  padding: 0 var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.choice-btn:active { background: var(--surface-3); }
.choice-btn input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice-btn:has(input:checked) {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.choice-btn:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.date-picker {
  margin-top: var(--sp-3);
  animation: field-reveal var(--dur-2) var(--ease-out);
}
.date-picker label {
  font-size: var(--fs-small);
  font-weight: 600;
}

@keyframes field-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .date-picker { animation: none; }
}

/* ---------- Turnstile (§2.9) ---------- */
.turnstile-block {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.turnstile-slot {
  margin-top: var(--sp-2);
  min-height: 74px;
  width: 100%;
}
.turnstile-fallback {
  margin-top: var(--sp-2);
  display: grid;
  gap: var(--sp-3);
}
.turnstile-fallback__buttons {
  display: grid;
  gap: 12px;
}

/* ---------- ปุ่มส่ง + สถานะ (§2.7) ---------- */
.submit-btn {
  width: 100%;
  scroll-margin-bottom: calc(var(--callbar-h) + var(--sp-3)); /* ปุ่มส่งเองก็โดนแถบโทรบังคลิกได้ — เหตุผลเดียวกับ .field ด้านบน */
}
.submit-btn[aria-busy="true"] {
  background: var(--surface-3);
  color: var(--on-surface);
}
.submit-btn--waiting-token {
  background: var(--surface-3);
  color: var(--on-surface);
}
.submit-status {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--on-surface-2);
  text-align: center;
}
.submit-fail {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  animation: field-reveal var(--dur-2) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .submit-fail { animation: none; }
}

.form-page .fine-print {
  margin-top: var(--sp-3);
}

.form-spacer {
  height: var(--sp-9); /* §2.11 — กันแถบโทรทับปุ่มส่งตอนคีย์บอร์ดเด้ง */
}

/* ---------- ขั้นเช็คเบอร์ (design/05-no-wasted-trip.md §2.2) ---------- */
.phone-confirm {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  text-align: center;
  opacity: 1;
  animation: field-reveal var(--dur-2) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .phone-confirm { animation: none; }
}
.phone-confirm h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--on-surface);
  outline: none; /* tabindex="-1" — โฟกัสได้แต่ไม่ต้องมีวงกรอบ (ไม่ใช่จุดที่กดได้) */
}
.phone-confirm__number {
  margin-top: var(--sp-4);
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--on-surface);
  white-space: nowrap;
}
.phone-confirm__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--on-surface-2);
}
/* ปุ่มรองอยู่บนปุ่มหลัก (§2.2) — ระยะห่าง 16px ระหว่างสองปุ่ม */
.phone-confirm__btn {
  width: 100%;
  margin-top: var(--sp-4);
}
.phone-confirm__btn + .phone-confirm__btn {
  margin-top: var(--sp-4); /* 16px ตามสเปก (มากกว่าขั้นต่ำ 12px ของ 00 §4.2) */
}

/* ---------- หลังส่งสำเร็จ (§2.7 ③) ---------- */
.success-static {
  margin-top: var(--sp-6);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.success-static h2 { font-size: 26px; }
.success-static p { margin-top: var(--sp-2); }
.success-static__divider {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-4);
  border: none;
  border-top: 1px solid var(--line);
}
.success-static__phone {
  margin-top: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
}
.success-static .fine-print { margin-top: var(--sp-3); }
.success-static #ปุ่มโทรร้าน-mount { margin-top: var(--sp-3); }
.success-static #ปุ่มโทรร้าน-mount:empty { margin-top: 0; }
.success-static button { margin-top: var(--sp-4); width: 100%; }

.success-dialog {
  width: min(92vw, 420px);
  padding: var(--sp-5);
  background: var(--surface-2);
  color: var(--on-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  animation: dialog-in var(--dur-2) var(--ease-out);
}
.success-dialog::backdrop {
  background: var(--scrim);
  animation: scrim-in var(--dur-2) linear;
}
.success-dialog h2 { font-size: 26px; margin-top: var(--sp-3); }
.success-dialog p { margin-top: var(--sp-2); }
.success-dialog button { margin-top: var(--sp-5); width: 100%; }

@keyframes dialog-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .success-dialog,
  .success-dialog::backdrop { animation: none; }
}

.success-dialog__check {
  margin-inline: auto;
  display: block;
}
.success-dialog__check path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: check-draw 400ms var(--ease-out) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .success-dialog__check path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}