/* Hubbub's order UI (order.js): plain and clean, on the variables the page sets on :root (--ink, --paper, --accent,
   --accent-ink, --muted, --radius, --font), with the room between things from the shop's scale (theme/web/spacing.css).
   Every tap target is at least 44 px; it works from 360 px wide. */
.ord { font-family: var(--font, system-ui, sans-serif); color: var(--ink, #222); max-width: 560px; margin: 0 auto; padding: var(--space-m) var(--gutter);
  box-sizing: border-box; line-height: 1.45; }
.ord *, .ord *::before, .ord *::after { box-sizing: inherit; }
.ord h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 6px; padding: 0; }
.ord h3 { font-size: 1.05rem; margin: 0 0 4px; padding: 0; }
.ord p { margin: 0 0 8px; overflow-wrap: break-word; }
.ord-head { margin-bottom: var(--space-m); }
.ord-what { font-weight: 600; }
.ord-muted, .ord-fine { color: var(--muted, #666); font-size: 0.92rem; }
.ord-fine { font-size: 0.82rem; }
.ord-fine a, .ord-help { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* the remake promise right under the basket button, its small print's type: the whole line a link to the terms */
.ord-remake { margin: 0; text-align: center; text-wrap: balance; }
.ord-help { display: inline-flex; align-items: center; min-height: 44px; }
.ord-foot { margin-top: var(--space-s); text-align: center; }

.ord-box { background: color-mix(in srgb, var(--paper, #fff) 88%, var(--ink, #222)); border-radius: var(--radius, 14px); padding: var(--space-m);
  margin: 0 0 var(--space-s); }
.ord-price { font-size: 1.6rem; font-weight: 700; margin: 10px 0 4px; }
.ord-price small { font-size: 0.85rem; font-weight: 400; color: var(--muted, #666); }

.ord-names { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ord-names li { background: var(--paper, #fff); border-radius: 999px; padding: 6px 12px; font-weight: 600; }

.ord-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.ord-check input { width: 24px; height: 24px; accent-color: var(--accent, #e8732a); flex: none; }

.ord-note { border-left: 4px solid var(--accent, #e8732a); padding: 8px 12px; background: var(--paper, #fff); border-radius: 6px; font-size: 0.92rem; }
.ord-err { color: #a1271b; font-weight: 600; }
.ord-big { font-size: 1.25rem; font-weight: 650; margin: 0; }

.ord-pay, .ord-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 10px 16px; margin: var(--space-s) 0 var(--space-xs);
  border: 0; border-radius: var(--radius, 14px); font: inherit; font-weight: 700; font-size: 1.05rem; text-align: center; text-decoration: none; cursor: pointer; }
.ord-pay { background: var(--accent, #e8732a); color: var(--accent-ink, #fff); }
.ord-btn { min-height: 44px; font-weight: 600; background: var(--paper, #fff); color: var(--ink, #222);
  border: 2px solid color-mix(in srgb, var(--ink, #222) 22%, transparent); }
.ord-btn.ord-quiet { background: transparent; }
.ord-pay:disabled, .ord-btn:disabled { opacity: 0.55; cursor: default; }
.ord-pay:focus-visible, .ord-btn:focus-visible, .ord-link:focus-visible { outline: 3px solid var(--ink, #222); outline-offset: 2px; }
.ord-link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.ord-back { text-decoration: none; color: var(--muted, #666); }
.ord-sure { border: 2px solid var(--ink, #222); border-radius: var(--radius, 14px); padding: 12px; margin: 4px 0 12px; font-weight: 600; }
/* under the status: a cancel taken back, "Delete my details" confirmed once (kits/payments/order.js) */
.order-actions { margin: 0 0 var(--space-s); }
.order-actions .ord-link { display: block; margin: 0 auto; color: var(--muted, #666); font-size: 0.92rem; }
.order-actions-ask { border: 2px solid var(--ink, #222); border-radius: var(--radius, 14px); padding: 12px; }
.order-actions-ask .ord-btn { margin: 4px 0 0; }
.order-actions-ask .ord-link { margin-top: 4px; }

/* the order's way: paid → at the printer → on its way */
.ord-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 4px 0 12px; counter-reset: s; }
.ord-steps li { flex: 1; font-size: 0.82rem; text-align: center; color: var(--muted, #666); padding-top: 12px; position: relative; }
.ord-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--ink, #222) 14%, transparent); }
.ord-steps li.on { color: var(--ink, #222); font-weight: 600; }
.ord-steps li.on::before { background: var(--accent, #e8732a); }
.ord-happy { animation: ord-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes ord-pop { from { transform: scale(0.94); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .ord-happy { animation: none; } }