/* ============================================================================
 * order-detail.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Used ONLY by order-bill-detail.html. Mobile SoT = order-detail.css (untouched).
 * Mirrors the delivery / ptcoin bill-detail template: the phone frame + dark
 * coffee hero become a centred white content column with a legible hero; the
 * cost summary sits sticky on the right; the fixed pay bar becomes an inline card.
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}

  /* neutralise the mobile phone frame -> centred light content column */
  body.ptshell .phone{max-width:1080px;margin-inline:auto;background:none;box-shadow:none;overflow:visible;padding:0 24px 40px}

  /* --- dark coffee hero -> light-2026 white card (every element remapped to dark) --- */
  body.ptshell .hero{margin:12px 0 0;border-radius:20px;padding:24px 28px;text-align:left;color:var(--ink);
    background:#fff;border:1px solid #E8EAEF;box-shadow:0 22px 48px -30px rgba(20,25,35,.28)}
  body.ptshell .hero .glow,body.ptshell .hero .deco{display:none}
  body.ptshell .hero .eyebrow{color:var(--sun-deep)}
  body.ptshell .hero .ono{color:var(--ink)}
  body.ptshell .hero .odate{color:var(--ink-2)}
  /* status pill -> top-right, in the empty space beside the bill number */
  body.ptshell .hero .opill{position:absolute;top:2px;right:0;margin:0;background:#FFF3EA;border-color:#FFD8BE;color:var(--sun-deep)}
  body.ptshell .hero .opill i{background:var(--sun-deep);box-shadow:0 0 0 3px rgba(239,95,6,.18)}
  /* status stepper reads on a light hero (keeps green=done, orange=now dots) */
  body.ptshell .hero .tl{border-top-color:#EEF0F3;justify-content:flex-start;gap:4px}
  body.ptshell .hero .tls{color:var(--muted)}
  body.ptshell .hero .tls.done,body.ptshell .hero .tls.now{color:var(--ink)}
  body.ptshell .hero .tls:not(:last-child)::after{background:#E4E7EC}
  body.ptshell .hero .tls.done:not(:last-child)::after{background:var(--leaf)}

  /* --- content grid: items + docs on the left, cost summary sticky on the right --- */
  body.ptshell main.page{max-width:100%;margin:0;padding:20px 0 0;
    display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
  body.ptshell main.page>.done{grid-column:1/-1;margin:0}
  body.ptshell main.page>.card:nth-child(2){grid-column:1;grid-row:1}                     /* รายการสินค้า */
  body.ptshell main.page>.card:nth-child(4){grid-column:1;grid-row:2}                     /* เอกสาร & ความช่วยเหลือ */
  body.ptshell main.page>.card:nth-child(3){grid-column:2;grid-row:1/span 2;position:sticky;top:104px} /* สรุปค่าใช้จ่าย */
  body.ptshell main.page>.card{margin-top:0}

  /* cards: hairline + soft shadow (light-2026) */
  body.ptshell .card{border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}

  /* --- mobile fixed bottom bar -> inline card at the end of the flow --- */
  body.ptshell .bar{position:static;transform:none;left:auto;bottom:auto;width:auto;max-width:none;
    margin:20px 0 0;border:1px solid #E8EAEF;border-radius:18px;background:#fff;
    box-shadow:0 18px 44px -30px rgba(20,25,35,.26);backdrop-filter:none}
  body.ptshell .paybtn{width:220px}
}

/* >=1280: a touch wider beside the expanded sidebar */
@media (min-width:1280px){ body.ptshell .phone{max-width:1160px} }