/* ============================================================================
   warehouse-address.css — หน้า "ที่อยู่โกดังจีน"
   ----------------------------------------------------------------------------
   ★ ห้ามประกาศ :root ทับโทเคนกลาง — ของเดิมประกาศ --sun เป็นสีน้ำเงิน ทำให้หน้านี้
     เป็นคนละระบบสีกับทั้งเว็บ (ปุ่มหลักคนละสี ตัวอักษรคนละน้ำหนัก) ตามที่เจ้าของทัก
   ★ ความกว้างคอลัมน์ใช้ --pt-content-max จาก appshell.css เพื่อให้กรอบตรงกับทุกหน้า
   ★ กล่องสถานะทุกแบบใช้ .ptstate จาก components.css — ห้ามเขียนกล่องสถานะของตัวเอง
   ========================================================================== */

body{
  margin:0;
  background:var(--bg,#F3F6FB);
  color:var(--ink,#2A2016);
  font-family:var(--fb,'Prompt',sans-serif);
  font-size:14px;
  line-height:1.5;
}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}

main.page{padding:16px 16px 40px}

@media (min-width:768px){
  body.ptshell main.page{
    max-width:var(--pt-content-max);
    margin-inline:auto;
    padding:8px 24px 48px;
  }
}

/* ── หัวเรื่อง ─────────────────────────────────────────────── */
.wa-head{margin:6px 2px 18px}
.wa-head h1{
  font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:23px;
  margin:0;color:var(--ink,#2A2016);
}
.wa-sub{margin:4px 0 0;font-size:13.5px;color:var(--ink-2,#6E5C4C);line-height:1.65;max-width:660px}

/* ── ส่วนย่อย ─────────────────────────────────────────────── */
.wa-sec{margin:0 0 22px}
.wa-h{
  display:flex;align-items:center;gap:9px;margin:0 2px 11px;
  font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:16px;color:var(--ink,#2A2016);
}
/* ไอคอนหัวข้อมีสีในตัว — ห้ามบังคับ fill/stroke ทับ ไม่งั้นสีหายหมด */
.wa-h-ic{
  flex:none;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
}
.wa-h-ic svg{width:19px;height:19px;display:block}
.wa-h-ic.c-red   {background:#FDECEA}
.wa-h-ic.c-amber {background:#FCF1DC}
.wa-h-ic.c-green {background:#E6F6EE}
.wa-h-ic.c-blue  {background:#EAF2FF}
.wa-h-ic.c-orange{background:#FFECE0}

/* ── การ์ดกลาง ────────────────────────────────────────────── */
.wa-card{
  background:var(--paper,#fff);border:1px solid var(--line,#F2E6D8);
  border-radius:16px;padding:16px;
}

/* ── กล่องที่อยู่จีน ───────────────────────────────────────── */
.wa-plate{
  background:var(--cream,#FFF8F2);border:1px dashed var(--line-strong,#E3D3C0);
  border-radius:14px;padding:14px 15px;
}
.wa-line{font-size:14px;line-height:1.9;color:var(--ink,#2A2016);word-break:break-word}
.wa-line + .wa-line{margin-top:2px}
/* ★ ยกเว้น .wa-code — ไม่งั้นกฎนี้ (specificity สูงกว่า) จะทับความหนาของรหัสสมาชิก */
.wa-line b:not(.wa-code){font-weight:600}
/* รหัสสมาชิกในที่อยู่ — ต้องเด่นพอให้เห็นว่าต้องแทนค่า */
.wa-code{
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:700;
  background:var(--gold-soft,#FCF1DC);color:var(--clay-deep,#8A4B1E);
  padding:1px 8px;border-radius:7px;
}
.wa-code.is-real{background:var(--leaf-soft,#E6F6EE);color:var(--leaf-d,#127A50)}
.wa-plate-l{
  display:block;margin-bottom:8px;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted,#7c6e5f);
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:600;
}

/* ── ปุ่ม ─────────────────────────────────────────────────── */
.wa-btns{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.wa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border:none;border-radius:12px;cursor:pointer;
  background:var(--cta,#EF5F06);color:#fff;
  font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:14px;
}
.wa-btn svg{width:17px;height:17px;flex:none}
.wa-btn:hover{filter:brightness(.96)}
.wa-btn:focus-visible{outline:2px solid var(--sun-deep,#EF5F06);outline-offset:2px}
.wa-btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.wa-btn.gh{background:transparent;color:var(--ink-2,#6E5C4C);border:1.5px solid var(--line,#F2E6D8)}
.wa-btn.is-done{background:var(--leaf,#1E9E6A)}

/* ── ขั้นตอนการจ่าหน้า ────────────────────────────────────── */
.wa-steps{display:grid;gap:0}
.wa-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line,#F2E6D8)}
.wa-step:first-child{padding-top:2px}
.wa-step:last-child{border-bottom:none;padding-bottom:2px}
.wa-step-n{
  flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--gold-soft,#FCF1DC);color:var(--clay-deep,#8A4B1E);
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:700;font-size:14px;line-height:1;
}
/* ★ เจาะจงเฉพาะข้อความในกล่องคำอธิบาย (ลูกของ div) — ห้ามจับ .wa-step-n ซึ่งเป็น
     ลูกตรงของ .wa-step · กฎ ".wa-step span" แบบกว้างเคยทับ display:grid ของป้ายตัวเลข
     ทำให้เลขไปกองอยู่มุมซ้ายบนแทนที่จะอยู่กลาง */
.wa-step > div > b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:14px}
.wa-step > div > span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2,#6E5C4C);line-height:1.65}
.wa-step code{
  font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:600;
  background:var(--cream-2,#F7EFE6);padding:1px 6px;border-radius:6px;
}

/* ── หมายเหตุ ─────────────────────────────────────────────── */
.wa-note{
  display:flex;gap:10px;align-items:flex-start;margin-top:13px;
  background:var(--cream,#FFF8F2);border:1px solid var(--line,#F2E6D8);
  border-radius:13px;padding:12px 13px;
  font-size:12.5px;color:var(--ink-2,#6E5C4C);line-height:1.7;
}
.wa-note svg{width:17px;height:17px;flex:none;margin-top:2px}

/* ── คำถามที่พบบ่อย ───────────────────────────────────────── */
.wa-qa{border-top:1px dashed var(--line,#F2E6D8);margin-top:14px;padding-top:4px}
.wa-qa summary{
  list-style:none;cursor:pointer;padding:11px 2px;
  font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:13.5px;
  display:flex;align-items:center;gap:8px;
}
.wa-qa summary::-webkit-details-marker{display:none}
.wa-qa summary::after{
  content:"";margin-left:auto;width:8px;height:8px;flex:none;
  border-right:2px solid var(--muted,#7c6e5f);border-bottom:2px solid var(--muted,#7c6e5f);
  transform:rotate(45deg);transition:transform .15s;
}
.wa-qa[open] summary::after{transform:rotate(-135deg)}
.wa-qa-b{padding:0 2px 12px;font-size:12.5px;color:var(--ink-2,#6E5C4C);line-height:1.75}

/* ── แถบติดต่อ ────────────────────────────────────────────── */
.wa-help{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--paper,#fff);border:1px solid var(--line,#F2E6D8);
  border-radius:16px;padding:14px 15px;
}
.wa-help-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#E6F6EE}
.wa-help-ic svg{width:21px;height:21px;display:block}
.wa-help-tx{flex:1;min-width:150px}
.wa-help-tx b{display:block;font-family:var(--fd,'Mitr',sans-serif);font-weight:600;font-size:14px}
.wa-help-tx span{display:block;margin-top:2px;font-size:12px;color:var(--ink-2,#6E5C4C)}

/* ── สองคอลัมน์บนจอกว้าง ──────────────────────────────────── */
@media (min-width:900px){
  .wa-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
  .wa-cols > .wa-sec{margin-bottom:0}
}

/* ── กล่องสถานะที่วางในการ์ด — ไม่ต้องมีกรอบซ้อนกรอบ ──────── */
.wa-card > .ptstate{border:none;padding:20px 12px;margin:0;background:transparent}

/* ── แผนที่โกดัง ───────────────────────────────────────────
   ★ ไม่กินที่เลยจนกว่าจะมีแผนที่จริง — ที่อยู่ยังโหลดไม่เสร็จก็ไม่มีกล่องเปล่าค้าง */
.wa-map{display:none}
.wa-map.is-on{
  display:block;margin-top:13px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line,#F2E6D8);background:var(--cream-2,#F7EFE6);
  aspect-ratio:16/10;line-height:0;
}
.wa-map iframe{width:100%;height:100%;border:0;display:block}
@media (min-width:900px){ .wa-map.is-on{aspect-ratio:4/3} }
.wa-maplink{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:12.5px;color:var(--sun-deep,#1F56A8);text-decoration:underline;
}