/* checkout-0918 — Order details lifecycle (Alibaba capture, rec3/f300-f352):
   waiting-for-payment / in-production / shipped / delivered / closed states on
   /orders/<id> and /orders/g/<uuid>, plus the "Cancel order" sheet. Reuses the
   existing .work-panel / .ord-thumb / .ord-sup / .work-details tokens so this
   reads as the same app, not a bolted-on page. */

.od-status h2{font-size:18px;margin-bottom:10px}
.od-status p{font-size:13px;margin:0}
.od-amount{font-size:14px;color:var(--ink)}
.od-amount b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;margin-left:2px}
.od-fine{color:var(--gray);font-size:12px;margin-top:8px;line-height:1.6}
.od-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.od-status-cancelled p{color:var(--gray)}

.od-view-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--violet);background:none;border:0;padding:0}
.od-view-toggle .icon{width:14px;height:14px;transition:transform .18s ease}
.od-view-toggle.is-open .icon{transform:rotate(90deg)}
.od-collapse{margin:-6px 0 16px}
.od-collapse .work-panel,.od-collapse .od-info{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fcfcfe}
.od-info dl{grid-template-columns:150px 1fr}

.od-product{display:flex;flex-direction:column;gap:14px}
.od-item{display:flex;gap:12px}
.od-item-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.od-item-text b{font-size:13.5px;font-weight:650;line-height:1.4}
.od-item-text small{font-size:11.5px;color:var(--gray)}
.od-item-text span{font-size:12.5px;color:var(--ink);font-weight:600}
.od-cancel{color:#9c2a20;border-color:#f0d3d0}
.od-cancel:hover{background:#fdeceb}

.od-similar h2{font-size:16px;margin-bottom:14px}

/* ---- Cancel order sheet: bottom sheet on phone, right drawer on desktop —
   the exact pattern already used by public/variations-sheet.js. ---- */
#co-overlay{position:fixed;inset:0;z-index:1900;display:none}
#co-overlay.is-open{display:block}
.co-backdrop{position:absolute;inset:0;background:rgba(9,9,11,.45)}
body.co-lock{overflow:hidden}

.co-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;
 max-height:85vh;display:flex;flex-direction:column;box-shadow:0 -20px 60px #16082e30;
 animation:coSlideUp .22s ease}
@keyframes coSlideUp{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}
.co-handle{width:36px;height:4px;border-radius:3px;background:var(--line);margin:10px auto 2px;flex-shrink:0}
.co-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.co-head h2{font-size:17px}
.co-close{width:32px;height:32px;display:grid;place-items:center;color:var(--gray);border-radius:50%;flex-shrink:0}
.co-close:hover{background:var(--canvas)}
.co-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 18px calc(18px + env(safe-area-inset-bottom))}
.co-hint{font-size:12.5px;color:var(--gray);margin-bottom:12px}
.co-reasons{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.co-reason{display:flex;align-items:center;gap:10px;padding:13px 14px;font-size:13px;border-bottom:1px solid var(--line);cursor:pointer}
.co-reason:last-child{border-bottom:0}
.co-reason:hover{background:var(--canvas)}
.co-reason input{width:17px;height:17px;accent-color:var(--violet);flex-shrink:0}
.co-reason span{flex:1}
.co-reason .icon{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.co-note{display:block;margin-bottom:18px}
.co-note span{display:block;font-size:12px;color:var(--gray);margin-bottom:6px}
.co-note textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;resize:vertical}
.co-note textarea:focus{outline:2px solid #b5b0ff;border-color:var(--violet)}
.co-done{margin-bottom:4px}

@media (min-width:760px){
 .co-sheet{left:auto;right:0;top:0;bottom:0;width:420px;max-width:100%;max-height:none;
  border-radius:0;box-shadow:-20px 0 60px #16082e20;animation:coSlideIn .22s ease}
 .co-handle{display:none}
 @keyframes coSlideIn{from{transform:translateX(24px);opacity:.4}to{transform:translateX(0);opacity:1}}
}