/* กล่องชำระเงิน + แนบสลิป + หน้าติดตาม — หน้าตาสำรอง (ธีม SCG95 + ui/ จัดหน้าตาหลักแล้ว)
 * ใช้ token ของ ui/ พร้อมค่า fallback เผื่อเว็บที่ไม่ได้โหลด ui/ */
.scg95-pay { display: grid; gap: 12px; }
.scg95-pay.is-review { border: 1px solid var(--ui-info, #2b6cb0); }
.scg95-pay.is-paid { border: 1px solid var(--ui-ok, #2e7d32); }
.scg95-pay__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.scg95-pay__head h3 { margin: 0; }
.scg95-pay__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 960px) { .scg95-pay__cols { grid-template-columns: minmax(0, 1fr); } }
.scg95-pay__col { display: grid; gap: 10px; }
.scg95-pay__step { margin: 0; font-weight: 600; }
.scg95-pay__step strong { color: var(--ui-primary, #2e7d10); font-size: 1.15em; }
.scg95-pay__label { margin: 4px 0 0; font-size: 13px; color: var(--c-muted, #66708a); }
.scg95-pay__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--c-line, #e5e7eb); font-size: 14px; }
.scg95-pay__row svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.scg95-slip-line { display: flex; gap: 8px; align-items: flex-start; }
.scg95-slip-line svg { flex: none; margin: 3px 0 0; }
.scg95-slip-line b { display: block; font-weight: 600; }
.scg95-slip-line small { display: block; color: var(--c-muted, #66708a); font-size: 13px; }
.scg95-pay__head.has-icon h3 { display: flex; align-items: center; gap: 12px; font-size: 1.35em; }
.scg95-pay__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-primary-soft, #e2f1c6); color: var(--ui-ok, #2e7d32); }
.scg95-pay__ico svg { width: 26px; height: 26px; }
.scg95-pay__next { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--ui-radius-control, 10px); background: color-mix(in srgb, var(--ui-info, #2b6cb0) 10%, #fff); border: 1px solid color-mix(in srgb, var(--ui-info, #2b6cb0) 35%, #fff); }
.scg95-pay__next > svg { flex: none; width: 22px; height: 22px; color: var(--ui-info, #2b6cb0); margin-top: 2px; }
.scg95-pay__next > div > b { display: block; font-size: 1.05em; }
.scg95-pay__next > div > span { display: block; color: var(--c-ink-2, #3f4a5c); font-size: 14px; margin-top: 2px; }
.scg95-pay__next > div > span b, .scg95-pay__next > div > span span { display: inline; font-size: inherit; margin: 0; color: inherit; }
/* แนบสลิปเพิ่มเติม: ปุ่ม + คำอธิบายเล็กข้างล่าง (ผู้ใช้ 21 ต.ค. 2569) */
.scg95-pay__more { margin-top: 12px; }
.scg95-pay__more summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.scg95-pay__more summary::-webkit-details-marker { display: none; }
.scg95-pay__more summary small { font-size: 13px; color: var(--c-muted, #6b7585); }
.scg95-pay__more[open] summary small { display: none; }
.scg95-pay .alert { margin: 0; }
.scg95-banks .bank { display: flex; align-items: center; gap: 12px; }
.scg95-banks .bank > div { flex: 1; min-width: 0; }
.scg95-banks .bank-logo-img { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.scg95-banks .acc { font-variant-numeric: tabular-nums; }
.scg95-slip-form .upload { cursor: pointer; }
.scg95-slip-form .upload b { display: block; }
.scg95-slip-form .upload.has-file { border-style: solid; }

/* หน้าติดตามคำสั่งซื้อ */
.scg95-track-form label { display: block; font-weight: 500; margin-bottom: 4px; }
.scg95-timeline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: step; }
.scg95-timeline li { counter-increment: step; flex: 1 1 120px; padding: 10px 12px; border-radius: 8px; background: var(--c-bg, #f6f8f3); color: var(--c-muted, #66708a); font-size: 14px; }
.scg95-timeline li::before { content: counter(step) ". "; }
.scg95-timeline li.is-done { background: var(--ui-primary-soft, #e2f1c6); color: var(--ui-primary, #22610a); font-weight: 500; }

/* ดูสลิปในหน้าต่างซ้อน (assets/payment.js) */
.scg95-lightbox { width: min(92vw, 720px); max-height: 90dvh; padding: 0; border: 0; border-radius: 14px; overflow: hidden; display: none; }
.scg95-lightbox[open] { display: flex; flex-direction: column; }
.scg95-lightbox::backdrop { background: rgba(15, 23, 42, .6); }
.scg95-lightbox__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--c-line, #e5e7eb); }
.scg95-lightbox__title { flex: 1; }
.scg95-lightbox__open { font-size: 14px; }
.scg95-lightbox__close { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.scg95-lightbox__body { overflow: auto; background: #f3f4f6; display: grid; place-items: center; min-height: 200px; }
.scg95-lightbox__body img { max-width: 100%; max-height: calc(90dvh - 60px); display: block; }
.scg95-lightbox__body iframe { width: 100%; height: calc(90dvh - 60px); border: 0; background: #fff; }
/* แจ้งชำระเงิน: เลือกช่องทาง (แท็บ) แล้วแสดงเฉพาะช่องทางนั้น */
.scg95-slipvia__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.scg95-slipvia__tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1.5px solid var(--c-line, #dfe3ea); border-radius: var(--r, 12px); background: var(--c-surface, #fff); cursor: pointer; text-align: center; font-size: 14px; font-weight: 500; color: var(--c-ink-2, #3f4a5c); transition: border-color .15s, background .15s; }
.scg95-slipvia__tab:hover { border-color: color-mix(in srgb, var(--c-primary, #2e7d32) 45%, #fff); }
.scg95-slipvia__tab input { position: absolute; opacity: 0; pointer-events: none; }
.scg95-slipvia__tab svg { width: 22px; height: 22px; color: var(--c-muted, #6b7585); }
.scg95-slipvia__tab:has(input:checked) { border-color: var(--c-primary, #2e7d32); background: var(--c-primary-50, #eef7ea); color: var(--c-ink, #1d2939); font-weight: 600; }
.scg95-slipvia__tab:has(input:checked) svg { color: var(--c-primary, #2e7d32); }
.scg95-slipvia__tab:has(input:focus-visible) { outline: 2px solid var(--c-primary, #2e7d32); outline-offset: 2px; }
.scg95-slipvia__pane { display: none; }
.scg95-slipvia:has(input[value="web"]:checked) .scg95-slipvia__pane[data-via="web"],
.scg95-slipvia:has(input[value="line"]:checked) .scg95-slipvia__pane[data-via="line"],
.scg95-slipvia:has(input[value="email"]:checked) .scg95-slipvia__pane[data-via="email"] { display: block; }
.scg95-slipvia__steps { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14px; color: var(--c-ink-2, #3f4a5c); }
/* ขั้นตอนการชำระเงิน: เส้น timeline แนวตั้ง (21 ต.ค. 2569) */
.scg95-pay__title { margin: 0 0 14px; }
.pay-steps { list-style: none; margin: 0; padding: 0; }
.pay-steps .ps { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding-bottom: 18px; }
.pay-steps .ps:last-child { padding-bottom: 0; }
.pay-steps .ps::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--c-line, #dfe3ea); }
.pay-steps .ps:last-child::before { display: none; }
.pay-steps .ps.is-done::before { background: var(--ui-primary, #2e7d32); }
.ps-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 15px var(--font-head, inherit); border: 2px solid var(--c-line, #dfe3ea); background: #fff; color: var(--c-muted, #6b7585); position: relative; z-index: 1; }
.ps-dot svg { width: 18px; height: 18px; }
.ps.is-done .ps-dot { background: var(--ui-primary, #2e7d32); border-color: var(--ui-primary, #2e7d32); color: #fff; }
.ps.is-current .ps-dot { border-color: var(--ui-primary, #2e7d32); color: var(--ui-primary, #2e7d32); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-primary, #2e7d32) 14%, transparent); }
.ps-body { min-width: 0; padding-top: 5px; }
.ps-title { display: block; font: 600 16px/1.4 var(--font-head, inherit); color: var(--c-ink, #1d2939); margin-bottom: 8px; }
.ps.is-todo .ps-title { color: var(--c-muted, #6b7585); font-weight: 500; margin-bottom: 0; }
.ps.is-done .ps-title { margin-bottom: 4px; }
.ps-amount { color: var(--ui-primary, #2e7d32); white-space: nowrap; }
.ps-note { margin: 6px 0 0; font-size: 14px; color: var(--c-muted, #6b7585); }
.ps-body > .ps-note:first-child { margin-top: 0; }
.ps-body .scg95-slipvia { margin-top: 8px; }
.ps-body .btn-line { margin-top: 10px; }
.scg95-pay .bank .acc { white-space: nowrap; }
/* มือถือในเส้น timeline: ปุ่มคัดลอกลงบรรทัดใหม่ เลขบัญชีบรรทัดเดียว */
@media (max-width: 480px) {
	.ps-body .scg95-banks .bank { flex-wrap: wrap; padding: 12px; gap: 10px; }
	.ps-body .scg95-banks .bank-logo-img { width: 34px; height: 34px; }
	.ps-body .scg95-banks .bank .acc { font-size: 17px; letter-spacing: .02em; }
	.ps-body .scg95-banks .bank .copy { flex: 1 0 100%; }
}

.scg95-slip-view { white-space: nowrap; flex: none; }
/* เลือก LINE ตอนสั่ง: มือถือ = ข้อความ + ลิงก์เปิดอีกครั้ง · คอม = QR + ลิงก์ (ผู้ใช้ 22 ต.ค. 2569) */
.scg95-line-go__open { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; }
.scg95-line-go__open svg { width: 18px; height: 18px; color: #06c755; }
.scg95-line-go__desk { display: none; gap: 16px; align-items: center; }
.scg95-line-go.is-desk .scg95-line-go__phone { display: none; }
.scg95-line-go.is-desk .scg95-line-go__desk { display: flex; }
.scg95-line-go__qr { flex: none; width: 156px; height: 156px; padding: 4px; border: 1px solid var(--c-line, #dfe3ea); border-radius: 10px; background: #fff; }
.scg95-line-go__qr svg { display: block; width: 100%; height: 100%; }

.scg95-line-go__phone .btn-line + .ps-note { margin-top: 8px; }
/* การ์ดช่องทาง (โหมดยืนยันยอด · 22 ต.ค. 2569): หัว (ไอคอน + หัวข้อ + เลขที่) + เส้นขั้นตอนแบบกล่องขั้นตอนการชำระเงิน */
.scg95-chan__lead { margin: -8px 0 14px; }
.scg95-chan__steps .ps-dot svg { width: 17px; height: 17px; }
.scg95-chan__steps .ps.is-todo .ps-note { margin-top: 2px; }
.scg95-chan__steps .ps.is-current .ps-title { margin-bottom: 2px; }
.scg95-chan__steps .scg95-line-go { margin-top: 12px; }
.scg95-chan__steps .scg95-line-go__open { margin-top: 8px; }
.scg95-chan__order { gap: 8px; }
.scg95-chan__meta { margin: 2px 0 14px; }
.scg95-chan__meta + .scg95-chan__lead { margin-top: -8px; }
.scg95-line-go__desk { flex-wrap: wrap; }
.scg95-line-go__desk > div:last-child { flex: 1 1 200px; }
.scg95-chan__steps + .scg95-pay__row { margin-top: 16px; }