/* public/services-prices/style.css — เฉพาะหน้า P2 (บริการ & ราคา)
   design/00-direction.md §8 "P2 wireframe" — การ์ดเรียงลงบนมือถือ ⛔ ห้ามทำเป็น <table> จริง
   จอ ≥768px ค่อยจัดเป็น 2 คอลัมน์ */

.noscript-msg {
  margin: var(--sp-4) var(--gutter);
}

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

main.container {
  padding-top: var(--sp-6);
}
main.container > section,
main.container > .two-box,
main.container > .page-intro {
  margin-top: var(--sp-7);
}
main.container > h1 + .page-intro {
  margin-top: var(--sp-3); /* กติกาความใกล้ชิด — หัวข้อกับเนื้อหาใต้มันชิดกว่าบล็อกถัดไป */
}

/* ---------- การ์ดบริการ ---------- */
.service-cards {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (min-width: 768px) {
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
@media (min-width: 768px) {
  .service-card { padding: var(--sp-5); }
}

.service-card__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2);
}

.service-card__price {
  font-size: var(--fs-price);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.service-card__duration {
  font-size: var(--fs-small);
  color: var(--on-surface-2);
}

.service-card__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--on-surface-2);
}

#วันที่ราคา { margin-top: var(--sp-1); }

/* ---------- ⑤ กล่องคำนวณราคารวม ---------- */
.calc-box__field {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}
.calc-box__field label,
.calc-box__field > span {
  font-size: var(--fs-small);
  font-weight: 500;
}

.calc-box select {
  height: var(--btn-h);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  background: var(--surface-2);
  color: var(--on-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 var(--sp-3);
}
.calc-box select:disabled {
  color: var(--on-surface-3);
}

.calc-box__qty {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.calc-box__qty .btn {
  flex: 1 1 auto;
  min-width: calc(var(--tap-min) * 1.4);
}

.calc-box__result {
  margin-top: var(--sp-5);
}

/* ตัวเลขจริง (รู้ราคาครบ) ใหญ่ที่สุดในกล่องตามที่ §8 กำหนด — --fs-display 40px */
.calc-box__total--known {
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* ข้อความ "สอบถามหน้าร้าน" (ราคายังไม่ครบ) ⛔ ห้ามใช้ --fs-display — ที่ 320px ประโยคไทยความยาวนี้จะ
   ล้น/ตัดกลางคำ (§3.4.6 ห้าม) ตัวเลขจริงเท่านั้นที่ได้สิทธิ์เป็นตัวใหญ่สุด ไม่ใช่ข้อความ fallback */
.calc-box__total--unknown {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--accent);
}

.calc-box__lines {
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-1);
}
.calc-box__line {
  display: flex;
  flex-wrap: wrap; /* label กับค่า ต้องตกบรรทัดแยกกันได้ที่ 320px แทนที่จะดันกล่องล้นแนวนอน — ห้ามเอา
    flex-wrap ออกแม้ label สั้นก็ตาม (เผื่อค่าฝั่งขวายาวขึ้น) 2026-07-31: ค่าฝั่งขวาตอนไม่รู้ราคาเป็นข้อความ
    fallback ที่ยาวได้ไม่จำกัด (เช่น note ของค่าใส่ตอนไม่ใช่ 4 เส้น) — ไม่ใส่ .text-nowrap แล้ว (เคยล้นขอบการ์ด
    จริงบนมือถือ Android) รู้ราคาแล้วเท่านั้นที่ใช้ .num-nowrap (ดู index.js) */
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-small);
  /* ทุกบรรทัด (รู้/ไม่รู้ราคา) ใช้ --on-surface-2 เท่ากันเสมอ — --on-surface-3 ไม่ผ่าน 7:1 บนพื้น
     --accent-dim ของกล่องนี้ (ดูคอมเมนต์ใน tokens.css) ความต่างรู้/ไม่รู้สื่อผ่านข้อความเอง ไม่ใช่สี
     (ตรงตาม §2.3.5 "สีห้ามเป็นตัวสื่อความหมายตัวเดียว" อยู่แล้ว) */
  color: var(--on-surface-2);
}

/* ---------- กล่องคู่: ควรมากี่โมง / งานที่ไม่รับ ---------- */
.two-box {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 768px) {
  .two-box {
    grid-template-columns: 1fr 1fr;
  }
}
.two-box .card > h2 { margin-bottom: var(--sp-3); }
.two-box p + p { margin-top: var(--sp-2); }

#รายการงานที่ไม่รับ li {
  padding-left: var(--sp-4);
  position: relative;
}
#รายการงานที่ไม่รับ li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--on-surface-2);
}
#รายการงานที่ไม่รับ li + li { margin-top: var(--sp-2); }