/* ══════════════════════════════════════════════════════════════════════
   order.css — หน้าสั่งซื้อ หน้าขอบคุณ และหน้ากรอกขอใบเสนอราคา
   โหลดต่อจาก style.css · shop.css · cart.css · ทุกคลาสขึ้นต้นด้วย co-
   ══════════════════════════════════════════════════════════════════════ */

/* ── โครงสองคอลัมน์ ─────────────────────────────────────────────────── */
.co-grid{display:grid;gap:18px;align-items:start}
.co-main{min-width:0;display:grid;gap:18px}
.co-side{min-width:0}
@media (min-width:900px){
  .co-grid{grid-template-columns:minmax(0,1fr) 344px;gap:22px}
  .co-side{position:sticky;top:16px}
}

/* ── กล่องฟอร์ม ─────────────────────────────────────────────────────── */
.co-box{
  margin:0;padding:18px;border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;
  background:#fff;min-width:0;
}
.co-box legend{
  padding:0 9px;margin-left:-4px;font-size:15.5px;font-weight:700;color:var(--sh-navy,#0f1e35);
}

/* ── ช่องกรอก ───────────────────────────────────────────────────────── */
.co-f{margin:0 0 15px}
.co-f:last-child{margin-bottom:0}
.co-f > label,.co-lb{
  display:block;margin:0 0 6px;font-size:14.5px;font-weight:700;color:var(--ink-2,#2c3a52);
}
.co-f > label b{color:#c0392b;font-weight:700}
.co-f > label small,.co-f > label .co-opt{
  font-size:12.5px;font-weight:600;color:var(--sh-mut,#5d6b81);margin-left:5px;
}
.co-f input[type=text],.co-f input[type=tel],.co-f input[type=email],.co-f textarea{
  display:block;width:100%;box-sizing:border-box;
  padding:12px 13px;border:1px solid var(--line,#e3e8ef);border-radius:11px;
  font-family:inherit;font-size:16px;line-height:1.6;color:var(--ink,#101a2c);background:#fff;
}
.co-f textarea{resize:vertical;min-height:56px}
.co-f input:focus,.co-f textarea:focus{
  outline:none;border-color:var(--sh-blue,#1d4ed8);box-shadow:0 0 0 3px rgba(29,78,216,.13);
}
.co-f input::placeholder,.co-f textarea::placeholder{color:#9aa7ba}
.co-hint{display:block;margin:5px 0 0;font-size:12.5px;line-height:1.6;color:var(--sh-mut,#5d6b81)}
.co-two{display:grid;gap:0}
@media (min-width:600px){ .co-two{grid-template-columns:1fr 1fr;gap:0 14px} }

/* ── ช่องที่กรอกไม่ถูก ──────────────────────────────────────────────── */
.co-bad input,.co-bad textarea,.co-badin{border-color:#d9534f !important;background:#fffafa}
.co-msg{
  display:block;margin:6px 0 0;font-size:13px;line-height:1.6;font-weight:600;color:#b33;
}

/* ── ปุ่มเลือกแบบวงกลม ──────────────────────────────────────────────── */
.co-radios{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.co-radios label{
  display:inline-flex;align-items:center;gap:7px;font-size:15px;cursor:pointer;
}
.co-radios input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--sh-blue,#1d4ed8)}
.co-mini{
  width:130px !important;padding:9px 11px !important;font-size:15px !important;
}

/* ── กล่องใบกำกับภาษีที่กางออกเมื่อกดเลือก ───────────────────────────
   🔴 .co-toggle · .co-togglelb · .co-taxbox ต้องเป็นพี่น้องระดับเดียวกัน
      กฎล่างนี้อาศัยเครื่องหมาย ~ ถ้าเอากล่องไปครอบจะกางไม่ออก
      ทำแบบนี้เพื่อไม่ต้องใช้จาวาสคริปต์เลย                          */
.co-taxwrap{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 11px;align-items:start}
.co-toggle{grid-column:1;grid-row:1;width:19px;height:19px;margin:2px 0 0;
  accent-color:var(--sh-blue,#1d4ed8);cursor:pointer}
.co-togglelb{grid-column:2;grid-row:1;font-size:15.5px;font-weight:700;cursor:pointer;
  color:var(--ink,#101a2c)}
.co-togglelb .co-hint{font-weight:400}
.co-taxbox{
  grid-column:1/-1;grid-row:2;display:none;
  margin-top:15px;padding-top:16px;border-top:1px dashed var(--sh-ring,#dbe4f2);
}
.co-toggle:checked ~ .co-taxbox{display:block}

.co-samewrap{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 11px;align-items:start}
.co-same{grid-column:1;grid-row:1;width:19px;height:19px;margin:2px 0 0;
  accent-color:var(--sh-blue,#1d4ed8);cursor:pointer}
.co-samelb{grid-column:2;grid-row:1;font-size:14.5px;cursor:pointer;color:var(--ink-2,#2c3a52)}
.co-addrbox{grid-column:1/-1;grid-row:2;margin:14px 0 0}
.co-same:checked ~ .co-addrbox{display:none}

/* ── กล่องสรุปยอดด้านข้าง ───────────────────────────────────────────── */
.co-sum{
  background:var(--sh-ice-2,#f6f9fd);border:1px solid var(--sh-ring,#dbe4f2);
  border-radius:16px;padding:18px;
}
.co-sum h2{margin:0 0 13px;font-size:16.5px;font-weight:700}
.co-items{list-style:none;margin:0 0 13px;padding:0;display:grid;gap:10px}
.co-items li{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  padding-bottom:10px;border-bottom:1px solid var(--sh-ring,#dbe4f2)}
.co-items li:last-child{border-bottom:0;padding-bottom:0}
.co-it-n{font-size:14.5px;line-height:1.55;min-width:0}
.co-it-n small{display:block;font-size:12.5px;color:var(--sh-mut,#5d6b81);margin-top:2px}
.co-it-p{font-size:15px;font-weight:700;white-space:nowrap}
.co-rows{display:grid;gap:8px}
.co-rows > div{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;
  color:var(--ink-2,#2c3a52)}
.co-rows b{font-weight:700;color:var(--ink,#101a2c);white-space:nowrap}
.co-grand{padding-top:10px;border-top:1px solid var(--sh-ring,#dbe4f2);font-size:16px !important}
.co-grand b{font-size:23px;color:var(--sh-blue,#1d4ed8);letter-spacing:-.5px}
.co-baht{margin:9px 0 0;font-size:13px;line-height:1.65;color:var(--sh-mut,#5d6b81);text-align:right}

.co-place{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin:15px 0 0;padding:15px 18px;border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:17px;font-weight:700;line-height:1.3;
  background:#06c755;color:#fff;
}
.co-place:hover{background:#05b34c}
.co-place svg{width:20px;height:20px;flex:0 0 auto}
.co-safe{margin:12px 0 0;font-size:12.8px;line-height:1.7;color:var(--sh-mut,#5d6b81)}
.co-links{margin:12px 0 0;font-size:14px;text-align:center;color:var(--sh-mut,#5d6b81)}

/* ══ หน้าขอบคุณ ═══════════════════════════════════════════════════════ */
.co-done{
  background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:18px;
  padding:26px 20px;text-align:center;
}
.co-done-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:#e8f6ed;color:#15803d;margin-bottom:12px;
}
.co-done-ic svg{width:29px;height:29px}
.co-done h1{margin:0 0 8px;font-size:clamp(21px,4.8vw,28px);line-height:1.32}
.co-done p{margin:0 auto;max-width:56ch;font-size:15.5px;line-height:1.75;color:var(--sh-mut,#5d6b81)}
.co-no{margin:16px 0 0 !important;font-size:15px !important;color:var(--ink-2,#2c3a52) !important}
.co-no b{
  display:inline-block;margin-left:6px;padding:5px 13px;border-radius:9px;
  background:var(--sh-ice,#eef3fb);border:1px solid var(--sh-ring,#dbe4f2);
  font-size:22px;font-weight:700;letter-spacing:.6px;color:var(--sh-blue,#1d4ed8);
}
.co-nohint{margin:8px 0 0 !important;font-size:13px !important}
.co-st{
  display:inline-block;margin-top:14px;padding:6px 15px;border-radius:999px;
  font-size:13.5px;font-weight:700;
}
.co-st-wait{background:#fff4e0;color:#9a5b00;border:1px solid #f3ddb4}
.co-st-paid{background:#e8f6ed;color:#14663a;border:1px solid #bfe3cd}
.co-st-ship{background:#e7f0fd;color:#17408f;border:1px solid #c6d9f7}
.co-st-bad{background:#fdecec;color:#a02222;border:1px solid #f3c9c9}

.co-pay{
  margin-top:18px;background:linear-gradient(160deg,var(--sh-navy,#0f1e35),#1b3055);
  color:#fff;border-radius:18px;padding:24px 20px;
}
.co-pay h2{margin:0 0 4px;font-size:16px;font-weight:600;color:#bcd0ee;text-align:center}
.co-payamt{margin:0;text-align:center;font-size:16px;color:#dce7f7}
.co-payamt b{font-size:40px;font-weight:700;letter-spacing:-1px;color:#fff;margin-right:7px}
.co-pay .co-baht{text-align:center;color:#a9bfe0;margin:2px 0 0}
.co-acc{display:grid;gap:12px;margin-top:19px}
@media (min-width:640px){ .co-acc{grid-template-columns:1fr 1fr} }
.co-acc-b{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:15px}
.co-acc-lb{display:block;font-size:12.5px;font-weight:700;color:#a9bfe0;letter-spacing:.3px}
.co-acc-bank{margin:8px 0 0;font-size:14.5px;color:#dce7f7}
.co-acc-no{margin:2px 0 0;font-size:24px;font-weight:700;letter-spacing:.5px;color:#fff}
.co-acc-nm{margin:4px 0 0;font-size:13px;line-height:1.6;color:#bcd0ee}
.co-steps{margin:19px 0 0;padding-left:22px;display:grid;gap:9px}
.co-steps li{font-size:14.5px;line-height:1.72;color:#dce7f7}
.co-steps b{color:#fff}
.co-paybtns{margin-top:19px}
/* ปุ่มโทรอยู่บนพื้นกรมท่า ใช้สีน้ำเงินเดิมจะกลืนไปกับพื้น เลยทำเป็นปุ่มโปร่ง */
.co-pay .sh-btn-tel{background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.32)}
.co-pay .sh-btn-tel:hover{background:rgba(255,255,255,.2);color:#fff}
@media (min-width:600px){ .co-paybtns{display:grid;grid-template-columns:1fr 1fr;gap:10px} }

.co-detail{
  margin-top:18px;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);
  border-radius:18px;padding:20px;
}
.co-detail h2{margin:0 0 14px;font-size:17px;font-weight:700}
.co-tb{width:100%;border-collapse:collapse;font-size:14.5px}
.co-tb th,.co-tb td{padding:10px 8px;border-bottom:1px solid var(--line-2,#eef2f7);
  text-align:left;vertical-align:top;line-height:1.6}
.co-tb thead th{font-size:13px;font-weight:700;color:var(--sh-mut,#5d6b81);
  background:var(--sh-ice-2,#f6f9fd)}
.co-tb tfoot th{font-weight:600;color:var(--ink-2,#2c3a52)}
.co-r{text-align:right !important;white-space:nowrap}
.co-c{text-align:center !important}
.co-tb-grand th,.co-tb-grand td{border-bottom:0;padding-top:12px;
  border-top:2px solid var(--sh-ring,#dbe4f2);font-weight:700}
.co-tb-grand td{font-size:19px;color:var(--sh-blue,#1d4ed8)}
.co-facts{display:grid;gap:16px;margin-top:20px}
@media (min-width:700px){ .co-facts{grid-template-columns:1fr 1fr;gap:20px} }
.co-facts h3{margin:0 0 7px;font-size:14px;font-weight:700;color:var(--sh-mut,#5d6b81)}
.co-facts p{margin:0 0 6px;font-size:14.8px;line-height:1.72}
.co-addr{color:var(--ink-2,#2c3a52)}
.co-nt{font-size:14px !important;color:var(--sh-mut,#5d6b81)}
.co-when{margin:18px 0 0;font-size:13px;color:var(--sh-mut,#5d6b81)}
.co-printbtn{
  background:none;border:0;padding:0 2px;cursor:pointer;font-family:inherit;
  font-size:inherit;color:var(--sh-blue,#1d4ed8);text-decoration:underline;
}

/* ── เวลาสั่งพิมพ์หน้าขอบคุณ เอาแถบเว็บออกให้หมด ─────────────────────── */
@media print{
  .topbar,.sh-crumb,.contact-section,.footer,.co-noprint,.co-paybtns,.co-links{display:none !important}
  body{background:#fff}
  .sh-sec{padding:0}
  .co-done,.co-detail{border:0;padding:0;border-radius:0}
  .co-pay{background:#fff !important;color:#000;border:1px solid #999;padding:14px}
  .co-pay h2,.co-payamt,.co-acc-bank,.co-acc-no,.co-acc-nm,.co-acc-lb,
  .co-steps li,.co-steps b,.co-pay .co-baht{color:#000 !important}
  .co-acc-b{background:#fff;border:1px solid #bbb}
  .co-payamt b{font-size:30px}
}

/* ── บรรทัดบอกว่ายอดรวมภาษีแล้ว ─────────────────────────────────────── */
.co-vatnote{
  margin:10px 0 0;padding-top:9px;border-top:1px dashed var(--sh-ring,#dbe4f2);
  font-size:12.6px;line-height:1.68;color:var(--sh-mut,#5d6b81);
}
.co-vatrow{
  font-size:12.8px !important;font-weight:600;color:var(--sh-mut,#5d6b81);
  border-bottom:0 !important;padding-top:9px !important;line-height:1.65;
  /* 🔴 ต้องสั่งให้ตัดบรรทัดได้ เพราะคลาส co-r สั่ง nowrap ไว้
     ประโยคยาว ๆ ในแถวนี้จะดันตารางจนล้นจอมือถือ */
  white-space:normal !important;
}

/* ══ หน้าค้นหาออเดอร์ และหน้าแจ้งชำระเงิน ═════════════════════════════ */
.co-find{max-width:640px}
.co-find .co-place{margin-top:18px}

.co-f select{
  display:block;width:100%;box-sizing:border-box;
  padding:12px 13px;border:1px solid var(--line,#e3e8ef);border-radius:11px;
  font-family:inherit;font-size:16px;line-height:1.6;color:var(--ink,#101a2c);background:#fff;
}
.co-f input[type=date],.co-f input[type=time]{
  display:block;width:100%;box-sizing:border-box;
  padding:11px 13px;border:1px solid var(--line,#e3e8ef);border-radius:11px;
  font-family:inherit;font-size:16px;line-height:1.6;color:var(--ink,#101a2c);background:#fff;
}
.co-f input[type=file]{
  display:block;width:100%;box-sizing:border-box;
  padding:11px 12px;border:1px dashed var(--sh-ring,#dbe4f2);border-radius:11px;
  font-family:inherit;font-size:14.5px;background:var(--sh-ice-2,#f6f9fd);color:var(--ink-2,#2c3a52);
}
.co-f select:focus,.co-f input[type=date]:focus,
.co-f input[type=time]:focus,.co-f input[type=file]:focus{
  outline:none;border-color:var(--sh-blue,#1d4ed8);box-shadow:0 0 0 3px rgba(29,78,216,.13);
}

/* ── รายการแจ้งชำระที่เคยส่งมา ──────────────────────────────────────── */
.co-paidbox h2{margin-bottom:12px}
.co-paidrow{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line-2,#eef2f7);font-size:14.5px;
}
.co-paidrow:last-of-type{border-bottom:0}
.co-paid-dt{color:var(--ink-2,#2c3a52)}
.co-paid-am{font-weight:700;font-size:16px}
.co-paid-bk{color:var(--sh-mut,#5d6b81)}
.co-paidrow .co-st{margin:0 0 0 auto;font-size:12.5px;padding:5px 12px}

/* ── กล่องช่วยเหลือท้ายหน้าเช็กสถานะ ────────────────────────────────── */
.co-help2{
  margin-top:22px;max-width:640px;background:var(--sh-ice-2,#f6f9fd);
  border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;padding:18px;
}
.co-help2 h2{margin:0 0 10px;font-size:15.5px;font-weight:700}
.co-help2 ul{margin:0;padding-left:19px;display:grid;gap:8px}
.co-help2 li{font-size:14.3px;line-height:1.74;color:var(--ink-2,#2c3a52)}