/* [ใหม่] เรียกใช้งานฟอนต์ IBM Plex Sans Thai ที่อยู่ในโปรเจกต์ */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('./assets/fonts/IBMPlexSansThai-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('./assets/fonts/IBMPlexSansThai-Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  --page-w: 210mm;
  --page-h: 297mm;
  --dpi-scale: 2.5;
  --field-h: 6mm;
  --field-pad: 1.2mm;
  --z-overlay: 2;
  --z-bg: 1;
  --grid: 0;
  --calib: 0;
  --header-h: 72px; /* ค่าตั้งต้นเผื่อ JS ยังไม่ทำงาน */
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, px));
  /* font-family: 'Sarabun', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans Thai', sans-serif; */
  background: #f4f5f7;
  color: #111;
}

/* ==========================================================================
   App Header
   ========================================================================== */

/* ==========================================================================
   App Header
   ========================================================================== */

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  gap: 0rem;
  font-family: 'IBM Plex Sans Thai';
}

.header-content {
  max-width: 700px;
}

.header-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

.header-description {
  font-size: 1.25rem;
  margin: 0.5rem 0 0;
  color: #000000;
  /* font-weight: bold; */
}

.notice {
  color: #ff0000;
  font-size: 1.1rem;
  /* font-weight: bold; */
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.header-actions button {
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

#downloadBtn {
  background-color: #2563eb;
  color: #ffffff;
}

#downloadBtn:hover {
  background-color: #1d4ed8;
}

.header-actions .danger {
  background-color: #e5e7eb;
  color: #000000;
}

.header-actions .danger:hover {
  background-color: #d1d5db;
}

/* ซ่อน Dev Tools เป็นค่าเริ่มต้น (JS จะเปิดเมื่อมี ?dev=1) */
.dev-controls {
  display: none;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem;
  width: 100%;
  max-width: 600px;
  text-align: left;
}

.dev-controls .dev-buttons,
.bg-loaders {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ==========================================================================
   Controls & Buttons
   ========================================================================== */

.controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.controls button {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #1d4fd8;
  cursor: pointer;
  color: #ffffff;
}

.controls .danger {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.controls .danger:hover {
  background: #fecaca;
}

/* ▼▼▼ ซ่อนปุ่ม Dev เป็นค่าเริ่มต้น ▼▼▼ */
.dev-controls {
  display: none;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dev-controls .dev-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bg-loaders {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Responsive Layout & Page Stack
   ========================================================================== */

/* ▼▼▼ ทำให้หน้า A4 Responsive โดยการสเกลทั้งเฟรม ▼▼▼ */
.responsive-wrapper {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

#formRoot {
  transform-origin: top center;
}

.page-stack {
  display: grid;
  justify-content: center;
  gap: 12mm;
  padding: 1mm;
}

.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
  overflow: hidden;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.page .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-bg);
  pointer-events: none;
}

.page .overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  font-size: 12pt;
}

/* Grid overlay for development */
.page::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .08) 1px, transparent 1px);
  background-size: 1mm 1mm;
  mix-blend-mode: multiply;
  opacity: var(--grid);
  pointer-events: none;
}

/* ==========================================================================
   Form Fields (Input, Checkbox)
   ========================================================================== */

input.text {
  position: absolute;
  height: var(--field-h);
  padding: 0 var(--field-pad);
  border: 1px solid #9ca3af;
  border-radius: 2mm;
  background: rgba(255, 255, 255, .9);
  outline: none;
  text-align: center;
  line-height: var(--field-h); /* <-- ปรับให้ input อยู่กึ่งกลาง */
}

input.text:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .2);
}

/* --- Custom Checkbox Styles --- */
label.check {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2mm;
  font-size: 10pt;
  background: rgba(255, 255, 255, 0);
  padding: 0 1.2mm;
  height: 6mm;
  border-radius: 1.5mm;
  border: 1px dashed transparent;
}

/* 1. ซ่อนหน้าตา checkbox แบบเดิมๆ และสร้างกล่องขึ้นมาใหม่ */
label.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 4.5mm;
  height: 4.5mm;
  border: 1px solid #6b728000;
  border-radius: 1mm;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  background-color: #ffffff00;
}

/* 2. เมื่อถูกติ๊ก (checked) ให้เปลี่ยนสีและแสดงเครื่องหมาย */
label.check input[type="checkbox"]:checked {
  background-color: #2564eb00;
  border-color: #1d4fd800;
  background-image: none !important;
}

/* วาง ‘✓’ ทับตรงกลางกล่อง */
label.check input[type="checkbox"]::after {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 700;
  font-size: 5.6mm; /* ขนาดติ๊ก (ใหญ่/เล็ก ปรับตรงนี้) */
  line-height: 1;
  opacity: 0; /* ซ่อนตอนยังไม่ติ๊ก */
}

/* โชว์เมื่อถูกติ๊ก */
label.check input[type="checkbox"]:checked::after {
  opacity: 1;
}

/* ==========================================================================
   Signature Block
   ========================================================================== */

.sig-block {
  position: absolute;
  left: 120mm;
  top: 210mm;
  width: 80mm;
  height: 40mm;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2mm;
  background: rgba(255, 255, 255, .65);
  border: 1px solid #9ca3af;
  border-radius: 2mm;
  padding: 2mm;
}

.sig-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4mm;
}

#sigPad {
  width: 100%;
  height: 100%;
  border: 1px dashed #6b7280;
  border-radius: 2mm;
  background: #fff;
}

#sigPreview {
  max-width: 100%;
  max-height: 30mm;
  display: block;
}

/* ==========================================================================
   Field Positions
   ========================================================================== */

/* ===== Initial approximate positions — use Calibration Mode to drag/resize, then Export CSS ===== */
/* PAGE 1 */
#p1_date { left: 127mm; top: 59.5mm; width: 57mm; }
#p1_name { left: 106mm; top: 97.5mm; width: 79mm; }
#p1_name2 { left: 57mm; top: 105mm; width: 89mm; }
#p1_tel { left: 68mm; top: 112mm; width: 116mm; }
#p1_bookingCode { left: 46mm; top: 149.7mm; width: 57mm; }
#p1_bookingDate { left: 57mm; top: 157.1mm; width: 44mm; }
#p1_routeFrom { left: 47mm; top: 164.3mm; width: 66mm; }
#p1_routeTo { left: 119mm; top: 164.3mm; width: 66mm; }
#p1_travelDate { left: 139mm; top: 157.1mm; width: 46mm; }
#p1_seatNo { left: 49mm; top: 171.6mm; width: 51mm; }
#p1_amountPaid { left: 129.5mm; top: 171.6mm; width: 47mm; }
#p1_bankAccountNo { left: 77mm; top: 206.6mm; width: 42mm; }
#p1_creditLast4 { left: 58mm; top: 215mm; width: 30mm; }
#p1_paymentOther { left: 133mm; top: 223.7mm; width: 52mm; }
#p1_reasonOther { left: 58mm; top: 250mm; width: 126mm; }
#lbl_p1_personType_individual { left: 42.4mm; top: 91mm; }
#lbl_p1_personType_corporate { left: 75.8mm; top: 91mm; }
#lbl_p1_title_mr { left: 49.2mm; top: 99.1mm; }
#lbl_p1_title_mrs { left: 60.2mm; top: 99.1mm; }
#lbl_p1_title_ms { left: 71.2mm; top: 99.1mm; }
#lbl_p1_title_corp { left: 87.2mm; top: 99.1mm; }
#lbl_p1_purchase_web { left: 24.4mm; top: 190.6mm; }
#lbl_p1_purchase_app { left: 94.7mm; top: 190.6mm; }
#lbl_p1_pay_bankTransfer { left: 24.4mm; top: 207.6mm; }
#lbl_p1_pay_promptpay { left: 121mm; top: 207.6mm; }
#lbl_p1_pay_credit { left: 24.4mm; top: 216.1mm; }
#lbl_p1_pay_internet { left: 121mm; top: 216.1mm; }
#lbl_p1_pay_counter { left: 24.4mm; top: 224.8mm; }
#lbl_p1_pay_other { left: 121mm; top: 224.8mm; }
#lbl_p1_reason_wrongAcc { left: 24.4mm; top: 242.4mm; }
#lbl_p1_reason_overpay { left: 61.7mm; top: 242.4mm; }
#lbl_p1_reason_noSeat { left: 98.2mm; top: 242.4mm; }
#lbl_p1_reason_other { left: 24.4mm; top: 251.1mm; }

/* PAGE 2 */
#p2_bankAccountName { left: 38mm; top: 48.1mm; width: 65mm; }
#p2_bankAccountNo { left: 120mm; top: 48.1mm; width: 65mm; }
#p2_bankType { left: 47mm; top: 55.4mm; width: 63mm; }
#p2_bankName { left: 124mm; top: 55.4mm; width: 61mm; }
#p2_fullNameLine1 { left: 108mm; top: 224mm; width: 59mm; }
#p2_fullNameLine2 { left: 108mm; top: 232.5mm; width: 59mm; }
#lbl_p2_consent_agree { left: 24.4mm; top: 167.8mm; }
#lbl_p2_consent_disagree { left: 24.4mm; top: 182.8mm; }

/* Text Alignment Overrides */
#p1_name,
#p1_name2,
#p1_tel,
#p1_reasonOther {
  text-align: left !important;
  padding-left: 3mm;
}

/* ==========================================================================
   Calibration Mode
   ========================================================================== */

.calib {
  outline: calc(var(--calib) * 1px) dashed rgba(37, 99, 235, .8);
  cursor: move;
}

.overlay.calib-on .calib {
  background: rgba(255, 255, 200, .5);
}

.overlay.calib-on .check {
  border-color: rgba(37, 99, 235, .5);
}

.overlay.calib-on input.text {
  border-color: #2563eb;
}

/* ==========================================================================
   Media Queries & Print Styles
   ========================================================================== */

/* --- Mobile Responsive --- */
@media (max-width: 640px) {
  .app-header h1 {
    font-size: 18px;
  }
}

/* ปรับปรุงส่วน Responsive เพื่อแก้ปัญหา Scroll ยาวเกินไป */
@media (max-width: calc(210mm + 48px)) {
  .responsive-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    /* [แก้ไข] คำนวณความสูงของ Wrapper ให้พอดีกับเนื้อหาที่ถูกย่อส่วนแล้ว */
    height: calc((100vw - 20px) * 2.6923);
    margin-bottom: 12px;
  }

  #formRoot {
    transform: scale(calc(95vw / 234mm));
    transform-origin: top center;
  }
}

/* --- Print Styles --- */
body.print-mode {
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.print-mode .app-header,
body.print-mode .footnote,
body.print-mode #previewDialog,
body.print-mode .responsive-wrapper {
  display: none !important;
}

body.print-mode .app-header {
  position: static !important;
  box-shadow: none;
}

body.print-mode .app-header h1::after {
  display: none;
}

body.print-mode #formRoot {
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

body.print-mode .responsive-wrapper {
  padding: 0 !important;
}

body.print-mode .page-stack {
  gap: 0 !important;
  padding: 0 !important;
}

body.print-mode .page {
  box-shadow: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  page-break-after: always !important;
}

body.print-mode .page:last-child {
  page-break-after: avoid !important;
}

/* ซ่อนกรอบและพื้นหลังของช่องกรอกข้อความ */
body.print-mode input.text {
  background: transparent !important;
  border: none !important;
}

/* [แก้ไข] ซ่อนเฉพาะเส้นขอบของ label แต่ปล่อยให้ checkbox แสดงผลตามปกติ */
body.print-mode label.check {
  border: none !important;
  background: transparent !important; /* เพิ่มเพื่อให้แน่ใจว่าพื้นหลัง label โปร่งใส */
}

/* ซ่อน placeholder */
body.print-mode input.text::placeholder {
  color: transparent !important;
}