/* ============================================================================
 * delivery-bill-detail.css — MOBILE Source-of-Truth for
 * modules/shipping/pages/delivery-bill-detail.html (บิลรับ/จัดส่งสินค้า · DL)
 * ----------------------------------------------------------------------------
 * De-inlined verbatim from the page's <style> (go-live combine-pass 2026-07-19).
 * Phone view is byte-equivalent. Trimmed dead classes the page never uses
 * (no in-body topbar / bottom bar — the shell provides those): .hd/.ib/.brand/
 * .mk/.bwrap + .botnav. Accent family PRESERVED = orange (--sun/--sun-deep) per
 * the page's existing mobile theme (do NOT recolor). Desktop light-2026 layer
 * lives in delivery-bill-detail.desktop.css (loads >=768 beside the AppShell).
 * ========================================================================== */
:root{--ink:#2A2016;--ink-2:#6E5C4C;--muted:#9A8B7C;--paper:#fff;--line:#F2E6D8;--cream:#FBF7F2;--cream-2:#F3ECE3;--sun:#FF7A1A;--sun-deep:#EF5F06;--gold:#FFB23E;--leaf:#1E9E6A;--leaf-soft:#E6F6EE;--red:#E5544B;--blue:#2E6FD1;--fd:"Mitr",sans-serif;--fn:"Space Grotesk","Mitr",sans-serif;--fb:"Prompt",sans-serif;--sh:0 10px 26px -18px rgba(90,50,10,.35)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overflow-x:hidden}
body{background:radial-gradient(600px 300px at 50% -40px,rgba(255,122,26,.10),transparent 70%),#EDE6DC;font-family:var(--fb);color:var(--ink);-webkit-font-smoothing:antialiased}
.phone{max-width:430px;margin:0 auto;min-height:100vh;background:var(--cream);box-shadow:0 30px 80px -40px rgba(50,30,0,.5);position:relative;overflow:hidden;padding-bottom:140px}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}.hero{position:relative;overflow:hidden;color:#fff;padding:22px 18px 20px;text-align:center;background:radial-gradient(120% 100% at 50% 0%,#3A2A1B,#20160F)}
.hero .deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.hero .deco svg{position:absolute;inset:0;width:100%;height:100%}
.hero .glow{position:absolute;top:-70px;right:-50px;width:220px;height:220px;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(255,138,43,.22),transparent 68%)}
.hero .in{position:relative;z-index:1}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,197,140,.9);font-weight:700}
.ono{font-family:var(--fn);font-weight:800;font-size:26px;letter-spacing:.5px;margin-top:3px}
.odate{font-size:12px;color:rgba(255,255,255,.6);margin-top:3px}
.opill{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--fb);font-weight:600;font-size:12px;background:rgba(255,178,62,.15);border:1px solid rgba(255,178,62,.45);color:var(--gold);padding:6px 13px;border-radius:999px}
.opill i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(255,178,62,.25)}
.tl{display:flex;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.12)}
.tls{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:9.5px;color:rgba(255,255,255,.5);text-align:center}
.tls .d{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;z-index:1}
.tls .d svg{width:9px;height:9px;color:#fff}
.tls.done .d,.tls.cur .d{background:var(--leaf)}
.tls.cur .d{box-shadow:0 0 0 4px rgba(46,200,140,.32);animation:pulseG 1.8s infinite}
.tls.now .d{background:var(--sun);box-shadow:0 0 0 4px rgba(255,122,26,.3);animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,122,26,.12)}}@keyframes pulseG{50%{box-shadow:0 0 0 7px rgba(46,200,140,.1)}}
.tls.done,.tls.now,.tls.cur{color:#fff}.tls.cur{font-weight:700}
.tls:not(:last-child)::after{content:"";position:absolute;top:7px;left:50%;width:100%;height:2px;background:rgba(255,255,255,.15)}
.tls.done:not(:last-child)::after,.tls.cur:not(:last-child)::after{background:var(--leaf)}
.methods{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:13px}
.mcard{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:12px 8px;text-align:center;box-shadow:var(--sh);animation:pop .4s ease both}
.mcard:nth-child(2){animation-delay:.06s}.mcard:nth-child(3){animation-delay:.12s}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mic{width:40px;height:40px;margin:0 auto 8px;border-radius:13px;display:grid;place-items:center}.mic svg{width:21px;height:21px}
.mcard:nth-child(1) .mic{background:linear-gradient(160deg,#FFEEDD,#FFDCC0);color:var(--sun-deep)}
.mcard:nth-child(2) .mic{background:linear-gradient(160deg,#FDE7E0,#FAD1C6);color:#E5342A}
.mcard:nth-child(3) .mic{background:linear-gradient(160deg,#E3F5EC,#CDEEDE);color:#158A5B}
.mlbl{font-size:10px;color:var(--muted)}.mval{font-family:var(--fd);font-weight:600;font-size:11.5px;color:var(--ink);margin-top:3px;line-height:1.3}
.done{display:flex;align-items:center;gap:12px;margin-bottom:13px;padding:14px 16px;border-radius:16px;background:linear-gradient(160deg,var(--leaf-soft),#fff);border:1px solid #C7E8D6;box-shadow:var(--sh)}
.done .di{width:40px;height:40px;border-radius:12px;background:var(--leaf);color:#fff;display:grid;place-items:center;flex:none}.done .di svg{width:22px;height:22px}
.done .dt{font-family:var(--fd);font-weight:600;font-size:14px;color:#137a52}.done .ds{font-size:11.5px;color:var(--ink-2);margin-top:1px}
.done .da{margin-left:auto;text-align:right;flex:none}.done .da .amt{font-family:var(--fn);font-weight:700;font-size:16px;color:#137a52}
.card{animation:pop .45s ease both}
.title .si{width:26px;height:26px;border-radius:8px;background:var(--cream-2);color:var(--sun-deep);display:grid;place-items:center;flex:none}.title .si svg{width:15px;height:15px}
.cnt{margin-left:auto;background:var(--sun);color:#fff;font-family:var(--fn);font-weight:700;font-size:10.5px;min-width:21px;height:21px;padding:0 6px;border-radius:11px;display:inline-grid;place-items:center}
.secsub{font-size:11.5px;color:var(--muted);margin:3px 0 13px 35px}
.rrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.rrow:last-child{border-bottom:none}.rrow .rl{color:var(--muted);flex:none}
.rrow .rv{color:var(--ink);text-align:right;font-weight:500;word-break:break-word}.rrow .rv.n{font-family:var(--fn)}.rrow .rv.ok{color:var(--leaf);font-weight:700}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.ltbl{width:100%;border-collapse:collapse;font-size:11.5px;min-width:460px}
.ltbl th{background:var(--cream-2);color:var(--ink-2);font-family:var(--fd);font-weight:600;font-size:10.5px;padding:9px 10px;text-align:left;white-space:nowrap}.ltbl th.r{text-align:right}
.ltbl td{padding:9px 10px;border-top:1px solid var(--line);white-space:nowrap;color:var(--ink-2)}
.ltbl td.n{text-align:right;font-family:var(--fn);color:var(--ink)}.ltbl td.pt{font-family:var(--fn);font-weight:700;color:var(--sun-deep)}
.ltbl td .qc{display:inline-flex;align-items:center;background:#E6F5EE;color:#158A5B;font-weight:600;font-size:9.5px;padding:1px 7px;border-radius:999px}
.ltbl tbody tr:nth-child(even){background:var(--cream)}
.ltbl tfoot td{background:#FFF6EE;font-family:var(--fd);font-weight:600;color:var(--ink);border-top:2px solid #F6CDB2}.ltbl tfoot td.n{font-family:var(--fn);font-weight:700;color:var(--sun-deep)}
.crow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.crow .cl{color:var(--ink-2)}.crow .cl small{color:var(--muted);font-size:11px}
.crow .cv{font-family:var(--fn);font-weight:600;color:var(--ink)}.crow.disc .cv{color:var(--leaf)}
.grand{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:15px 16px;border-radius:15px;background:linear-gradient(120deg,#FFF1E6,#FFE4D2);border:1px solid #F6CDB2;box-shadow:0 12px 24px -16px rgba(239,95,6,.5)}
.grand .gl{font-family:var(--fd);font-weight:600;font-size:14px}.grand .gv{font-family:var(--fn);font-weight:800;font-size:22px;color:var(--sun-deep)}
.trust{display:flex;gap:14px;justify-content:center;margin-top:13px;color:var(--muted);font-size:11px}.trust span{display:inline-flex;align-items:center;gap:5px}.trust svg{width:14px;height:14px;color:var(--leaf)}
.bar{position:fixed;left:50%;transform:translateX(-50%);bottom:64px;width:100%;max-width:430px;z-index:35;padding:11px 16px;background:rgba(255,248,242,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;align-items:center;gap:11px}
.bar .bi{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px 12px 7px 8px}
.bar .bic{flex:none;width:38px;height:38px;border-radius:12px;background:linear-gradient(140deg,var(--gold),var(--sun-deep));color:#fff;display:grid;place-items:center;font-family:var(--fn);font-weight:700;font-size:18px}
.bar .bit{flex:1;min-width:0}.bar .bl{font-size:10px;color:var(--muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .bv{font-family:var(--fn);font-weight:800;font-size:20px;color:var(--sun-deep);line-height:1.1}
.bar .bc{font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.paybtn{flex:none;width:150px;height:52px;border:none;border-radius:15px;color:#fff;font-family:var(--fd);font-weight:700;font-size:14px;background:linear-gradient(120deg,var(--sun),var(--sun-deep));display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 12px 22px -12px rgba(239,95,6,.85)}
.paybtn:active{transform:translateY(1px)}.paybtn svg{width:18px;height:18px}
.paybtn::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:shine 3.4s infinite}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}@media(max-width:360px){.paybtn{width:132px}}#toast{position:fixed;left:50%;bottom:150px;transform:translate(-50%,20px);z-index:60;background:#2A2016;color:#fff;font-size:12.5px;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;max-width:88%;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}