/*
 * ไฟล์ทับของหน้าติดต่อเรา — ส่วนที่ชุดออกแบบ **ไม่ได้วาดไว้** (มติ 187 · 22 ก.ย. 2569)
 *
 * ⚠⚠ ต้องโหลด **หลัง** `contact-layout/type/components.css` เสมอ
 *    (ตั้งลำดับไว้ที่ `components/ui/layout.blade.php` แล้ว)
 *
 * ⚠⚠⚠ **ห้ามแก้สามไฟล์ของชุดออกแบบเด็ดขาด** — วันที่คนทำส่งชุดใหม่มา
 *    เราจะทับไฟล์เดิมทั้งดุ้น แล้วของที่แอบแก้ไว้จะหายไปเงียบๆ
 *    (บทเรียนเดียวกับ `configurator-compact.css` และ `home.css`)
 *
 * ทุกกฎในไฟล์นี้อยู่ใต้ `.contact-page` จึงไม่รั่วไปหน้าอื่น
 *
 * ⚠ ชุดออกแบบวาดหน้าติดต่อเป็นสองคอลัมน์ (`contact-workspace`)
 *   กล่องที่เพิ่มมา (ผู้จัดจำหน่าย · ธนาคาร) วางในคอลัมน์ซ้ายร่วมกับกล่อง LINE
 *   จึงได้ระยะห่างจาก `.contact-support { gap:14px }` ของชุดออกแบบอยู่แล้ว
 */

/* กล่องร้องเรียนอยู่เต็มความกว้าง ใต้สองคอลัมน์ */
.contact-page .contact-complaint { margin-top: 14px; }
.contact-page .contact-complaint p + p { margin-top: 8px; }

/* ── ตารางบัญชีธนาคาร ─────────────────────────────────────────
   ⚠ เป็น `<table>` ไม่ใช่ `<div>` เพราะมันคือตารางจริง —
     โปรแกรมอ่านหน้าจอต้องบอกได้ว่าเลขนี้เป็นของธนาคารไหน */
.contact-page .contact-bank-table { width: 100%; border-collapse: collapse; }
.contact-page .contact-bank-table :is(td, th) { padding: 9px 0; text-align: left; vertical-align: top; }
.contact-page .contact-bank-table th { font-size: 14px; font-weight: 600; color: var(--contact-muted); }
.contact-page .contact-bank-table thead th { border-bottom: 1px solid var(--contact-line); }
.contact-page .contact-bank-table tbody tr + tr td { border-top: 1px solid var(--contact-line); }

/* ⚠⚠ เลขบัญชีต้องอ่านทีละหลักได้ — ฟอนต์ความกว้างเท่ากันทำให้เทียบกับสมุดบัญชีง่าย
      และ `user-select:all` ให้กดครั้งเดียวได้ทั้งเลข ไม่ต้องลากทีละตัว */
.contact-page .contact-bank-number {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    user-select: all;
}

/* ⚠ ป้ายชื่อบัญชีข้างหัวกล่องยาวกว่าป้าย "รอยืนยันข้อมูล" ของชุดออกแบบมาก
     ปล่อยไว้จะดันหัวเรื่องตกบรรทัดบนจอแคบ */
.contact-page .contact-banks .contact-draft-tag { font-weight: 600; }

@media (max-width: 600px) {
    .contact-page .contact-bank-table :is(td, th) { padding: 8px 0; }
    .contact-page .contact-bank-number { letter-spacing: 0; }
}


/* ── รู้จัก AIC · เราช่วยอะไรได้บ้าง (มติ 234) ────────────────────
   ⚠ ใช้คลาสกล่องของชุดออกแบบ (`contact-panel` `contact-panel-heading` `contact-visit-content`)
     ไฟล์นี้เพิ่มแค่ระยะห่างกับตารางสองคอลัมน์ · ไม่ประกาศสีใหม่ */
.contact-page .contact-about { margin-bottom: 14px; }
.contact-page .contact-about p + p,
.contact-page .contact-help-card p + p { margin-top: 8px; }
.contact-page .contact-about p,
.contact-page .contact-help-card p { padding-top: 10px; line-height: 1.65; }
.contact-page .contact-help { margin-bottom: 14px; }
.contact-page .contact-help > h2 { margin: 0 0 10px; }
.contact-page .contact-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) {
    .contact-page .contact-help-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── หน้าดาวน์โหลด (มติ 236) — ยืมกล่องของหน้าติดต่อ · เพิ่มแค่ระยะห่าง ไม่ประกาศสีใหม่ ── */
.contact-page .contact-downloads { margin-bottom: 14px; }
.contact-page .contact-downloads .contact-button { margin-top: 4px; }
.contact-page .contact-downloads .contact-muted a { text-decoration: underline; text-underline-offset: 3px; }