/* ============================================================================
   order-print.css — module-private styles for modules/order/pages/order-print.html
   ----------------------------------------------------------------------------
   De-inlined from the page (go-live combine-pass · 2026-07-19). SCREEN + PRINT
   layers = Source-of-Truth (the exact rules that were inline; the phone view and
   @media print output are unchanged), minus the dead `.bar .ib` rule the toolbar
   never renders. Desktop "light theme 2026" lives in order-print.desktop.css.
   Load AFTER shared tokens/layout/components/utilities so page tokens win.
   ============================================================================ */
:root{
  --sun:#FF7A1A;--sun-deep:#EF5F06;--gold:#FFB23E;
  --ink:#2A2016;--ink-2:#5A4A3A;--muted:#8A7A6A;--line:#E6DBCB;--clay-deep:#A9531F;
  --fd:'Mitr',sans-serif;--fb:'Prompt',sans-serif;--fn:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:var(--fb);color:var(--ink);background:#EDE6DC;line-height:1.5;-webkit-font-smoothing:antialiased;padding:0 0 96px}
button{font-family:inherit;cursor:pointer}
.num{font-family:var(--fn)}

/* screen toolbar — ล็อกไว้ใต้แถบบนของ shell (สูง 54px) ไม่ให้เลื่อนตามเนื้อหา/มุดหลัง shell */
.bar{position:sticky;top:54px;z-index:40;background:rgba(255,248,242,.94);backdrop-filter:blur(10px);border-bottom:1px solid #E6DBCB;display:flex;align-items:center;gap:10px;padding:11px 14px}
.bar .bt{font-family:var(--fd);font-weight:600;font-size:16px;flex:1}
.bar .pbtn{border:none;background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;font-family:var(--fd);font-weight:500;font-size:13.5px;padding:9px 15px;border-radius:11px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 8px 18px -10px rgba(239,95,6,.9)}
.bar .pbtn svg{width:16px;height:16px}

/* paper sheet — สัดส่วน A4 จริง (210×297mm = 794×1123px @96dpi) ย่อพอดีจอมือถือ */
.sheetwrap{width:calc(100% - 24px);max-width:794px;margin:14px auto;overflow:hidden}
.sheet{width:794px;min-height:1123px;transform-origin:top left;background:#fff;box-shadow:0 14px 40px -20px rgba(60,40,20,.4);border-radius:6px;overflow:hidden}
.pad{padding:40px 44px}

/* letterhead */
.lh{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:3px solid var(--sun)}
.lh .brand{display:flex;align-items:center;gap:11px}
.lh .mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg,var(--sun),var(--sun-deep));color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:18px}
.lh .bn{font-family:var(--fd);font-weight:700;font-size:19px;color:var(--ink);line-height:1}
.lh .bs{font-size:11px;color:var(--muted);margin-top:3px}
.lh .doc{text-align:right}
.lh .doc .dt{font-family:var(--fd);font-weight:600;font-size:15px;color:var(--sun-deep)}
.lh .doc .dn{font-family:var(--fn);font-weight:600;font-size:15px;margin-top:3px}
.lh .doc .dd{font-size:11px;color:var(--muted);margin-top:2px}

/* print-doc section heading (.doctitle) — distinct role from canonical card-head .title: underline + print metrics */
.doctitle{font-family:var(--fd);font-weight:600;font-size:13.5px;color:var(--ink);margin:20px 0 9px;padding-bottom:5px;border-bottom:1px solid #EFE6D8;display:flex;align-items:center;gap:7px}
.doctitle .stpill{margin-left:auto;font-family:var(--fb);font-weight:500;font-size:11px;color:#B8860B;background:#FFF6E5;border:1px solid #FBE7BE;padding:3px 10px;border-radius:20px}

/* info grid */
.ig{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
.ir{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:12.5px;border-bottom:1px dotted #EFE6D8}
.ir .k{color:var(--muted)}
.ir .v{color:var(--ink);font-weight:500;text-align:right}
.ir .v.free{color:#1E9E6A}
.ir.full{grid-column:1 / -1}

/* address */
.addr{font-size:12.5px;color:var(--ink)}
/* .addr .ar — address key/value row (renamed from .row to avoid clashing with canonical flex .row) */
.addr .ar{display:flex;padding:5px 0}
.addr .ar .k{color:var(--muted);width:120px;flex:none}
.addr .ar .v{flex:1}
.addr .ar .v.empty{color:var(--muted)}

/* table */
table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
thead th{background:#FFF3E7;color:var(--clay-deep,#A9531F);font-family:var(--fd);font-weight:500;font-size:11px;padding:9px 8px;text-align:right;border-bottom:2px solid #F3D9BF}
thead th:first-child{text-align:left;border-radius:6px 0 0 0}
thead th:last-child{border-radius:0 6px 0 0}
tbody td{padding:10px 8px;text-align:right;border-bottom:1px solid #F1E8DA;vertical-align:top}
tbody td:first-child{text-align:left}
.prodcell{display:flex;gap:9px;align-items:flex-start}
.prodcell .tn{width:40px;height:40px;border-radius:8px;flex:none;background:linear-gradient(150deg,#FFF3E7,#FFEADB);display:grid;place-items:center;color:var(--sun-deep)}
.prodcell .tn svg{width:20px;height:20px;opacity:.7}
.prodcell .pnm{font-size:11.5px;line-height:1.35;color:var(--ink);max-width:220px}
.prodcell .pst{font-size:10.5px;color:var(--sun-deep);margin-top:2px}
tfoot td{padding:10px 8px;text-align:right;font-family:var(--fd);font-weight:600;font-size:12.5px;color:var(--ink);border-top:2px solid #F3D9BF;background:#FFFBF6}
tfoot td:first-child{text-align:left}
.money{font-family:var(--fn);font-weight:500}
.tprice{color:var(--sun-deep)}

/* grand total banner */
.gt{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:15px 18px;border-radius:12px;background:linear-gradient(120deg,#FFF3E7,#FFEADB);border:1px solid #FAD9BD}
.gt .gl{font-family:var(--fd);font-weight:600;font-size:14px}
.gt .gv{font-family:var(--fn);font-weight:700;font-size:22px;color:var(--sun-deep)}

.foot{margin-top:24px;padding-top:14px;border-top:1px solid #EFE6D8;display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--muted)}
.foot .sig{text-align:center}
.foot .sig .line{width:150px;border-top:1px solid #C9BBA8;margin-bottom:4px;padding-top:26px}

/* floating print (screen) */
.fab{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#EDE6DC 70%,transparent);z-index:30}
.fab button{width:100%;height:52px;border:none;border-radius:14px;background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;font-family:var(--fd);font-weight:500;font-size:16px;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 14px 26px -12px rgba(239,95,6,.9)}
.fab button svg{width:19px;height:19px}

@media print{
  body{background:#fff;padding:0}
  .bar,.fab{display:none!important}
  .sheetwrap{width:auto;max-width:none;margin:0;overflow:visible;height:auto!important}
  .sheet{width:auto;min-height:auto;transform:none!important;box-shadow:none;border-radius:0}
  .pad{padding:0}
  @page{margin:14mm}
}