/* ============================================================
   Rose's Sugar Shack — ordering flow styles (/order, /checkout,
   /order/status). Extends site.css tokens; never restyles core
   components. Mobile-first at 375px.
   ============================================================ */

.order-wrap { max-width: 760px; }
.order-lede { max-width: 560px; }
.order-h2, .co-h2 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); margin-top: 0; }
.order-h2 { margin-top: 2rem; }
.req { color: var(--red); }

/* ---------- banners ---------- */
.table-banner {
  display: flex; align-items: center; gap: .6rem;
  background: #D8E9EA; color: var(--teal-deep);
  border: 1px solid #BCD7D8; border-radius: var(--radius);
  padding: .75rem 1rem; margin: 0 0 1rem;
  font-weight: 600;
}
.table-banner svg { flex: none; }
.table-banner.is-time { background: #FDF3D7; color: #5d4200; border-color: #EBDCA8; }
/* display:flex would defeat the hidden attribute — keep hidden authoritative */
.table-banner[hidden], .closed-banner[hidden] { display: none; }

.closed-banner {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #F1EADA; border: 1px solid var(--line);
  border-left: 5px solid var(--warn);
  border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: 0 0 1.4rem;
}
.closed-banner svg { flex: none; margin-top: .15rem; color: var(--warn); }
.closed-banner.status-dead { border-left-color: var(--danger); }
.closed-banner.status-dead svg { color: var(--danger); }

/* ---------- empty cart ---------- */
.empty-cart { margin: 1.5rem 0; }
.empty-cart svg { margin: .4rem auto .8rem; color: var(--teal); }
.empty-cart h2 { margin-bottom: .4rem; }
.empty-cart .btn { margin-top: .6rem; }

/* ---------- cart review ---------- */
.cart-card { overflow: hidden; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .9rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.cl-main { flex: 1 1 auto; min-width: 0; }
.cl-name { font-weight: 700; font-family: var(--font-display); font-size: 1.06rem; }
.cl-variant { font-weight: 600; font-family: var(--font-body); font-size: .9rem; color: var(--ink-soft); }
.cl-mods {
  list-style: none; margin: .25rem 0 0; padding: 0;
  font-size: .88rem; color: var(--ink-soft);
}
.cl-mods li::before { content: '+ '; color: var(--teal); font-weight: 700; }
.cl-notes { font-size: .88rem; color: var(--ink-soft); font-style: italic; margin: .3rem 0 0; }
.cl-price, .ql-price {
  font-family: var(--font-display); font-weight: 700; white-space: nowrap;
}

.cl-qty { display: flex; align-items: center; gap: .55rem; margin-top: .65rem; }
.qty-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--shell); color: var(--ink);
  font-size: 1.25rem; font-weight: 700; line-height: 1; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.qty-btn:hover { border-color: var(--teal); background: rgba(31,110,112,.08); }
.qty-num { min-width: 1.6rem; text-align: center; font-weight: 700; font-size: 1.05rem; }
.cl-remove {
  margin-left: .4rem; padding: .55rem .5rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: .85rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.cl-remove:hover { color: var(--danger); }

.cart-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  background: var(--cream-deep);
}
.add-more {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; text-decoration: none; color: var(--teal-deep);
  min-height: 44px;
}
.add-more:hover { text-decoration: underline; }
.cart-subtotal { display: flex; align-items: baseline; gap: .7rem; font-weight: 600; }
.cart-subtotal strong { font-family: var(--font-display); font-size: 1.25rem; }
.est-note { margin: .5rem 0 0; }

/* ---------- order-type extras ---------- */
.type-chips { margin: .4rem 0 .6rem; }
.type-chips .chip svg { color: var(--teal); }
.chip:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.chip:has(input:disabled) input { cursor: not-allowed; }
.type-extra { max-width: 420px; }
.order-continue { margin-top: 1.6rem; max-width: 420px; }

/* ---------- checkout layout ---------- */
.checkout-grid { display: grid; gap: 1.1rem; margin-top: .6rem; }
.checkout-main { display: grid; gap: 1.1rem; }
@media (min-width: 900px) {
  .page-checkout .order-wrap { max-width: 1040px; }
  .checkout-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .checkout-aside { position: sticky; top: 84px; }
}

/* server-quoted lines */
.quote-lines { list-style: none; margin: 0 0 .6rem; padding: 0; }
.quote-line {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .65rem 0;
  border-bottom: 1px dashed var(--line);
}
.quote-line:last-child { border-bottom: 0; }
.ql-qty { font-weight: 700; color: var(--red); white-space: nowrap; }
.ql-body { flex: 1 1 auto; min-width: 0; }
.ql-name { font-weight: 700; }

/* tip */
.tip-card { border-top: 4px solid var(--butter); }
.tip-note { margin-bottom: .8rem; }
.tip-chips .chip { font-variant-numeric: tabular-nums; }
.tip-amt { color: var(--ink-soft); font-weight: 600; font-size: .85rem; }
.chip:has(input:checked) .tip-amt { color: inherit; }
.tip-custom { max-width: 260px; }
.tip-custom-row {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.1rem;
}

/* payment options */
.pay-options { display: grid; gap: .6rem; }
.pay-option {
  position: relative; display: flex; gap: .7rem; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1rem; margin: 0; cursor: pointer;
  font-weight: 400;
  transition: border-color .12s ease, background .12s ease;
}
.pay-option input { margin-top: .3rem; width: 20px; height: 20px; accent-color: var(--red); flex: none; }
.pay-option:has(input:checked) { border-color: var(--red); background: #FBE9E4; }
.pay-option:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; }
.po-label { display: block; font-weight: 700; }
.po-body .hint { display: block; margin-top: .1rem; }
.po-body .hint[hidden], .pay-later-note[hidden] { display: none; }
.stripe-element { margin-top: 1rem; }

/* totals box */
.totals { margin: 0 0 .9rem; }
.totals > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .3rem 0;
}
.totals dt { color: var(--ink-soft); font-weight: 600; }
.totals dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.totals-grand {
  border-top: 2px solid var(--line); margin-top: .4rem; padding-top: .6rem !important;
  font-family: var(--font-display); font-size: 1.2rem;
}
.totals-grand dt { color: var(--ink); }
.totals-note { margin: 0 0 1rem; }
.pay-later-note { margin: .7rem 0 0; text-align: center; }

/* ---------- status page ---------- */
.status-h1 { margin-bottom: .2rem; }
.status-sub { margin-bottom: 1.4rem; }
.status-flash { margin: 0 0 1.4rem; max-width: none; }

.timeline { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.tl-step {
  position: relative;
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 0 0 1.5rem 0;
}
.tl-step::before {
  content: ''; position: absolute; left: 15px; top: 30px; bottom: 0;
  width: 3px; background: var(--line); border-radius: 2px;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step:last-child::before { display: none; }
.tl-dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--shell); border: 3px solid var(--line); color: #fff;
  z-index: 1;
}
.tl-step.is-done .tl-dot { background: var(--ok); border-color: var(--ok); }
.tl-step.is-done::before { background: var(--ok); }
.tl-step.is-now .tl-dot {
  border-color: var(--red); background: var(--red);
  box-shadow: 0 0 0 5px rgba(195,64,43,.18);
  animation: ss-pulse 2s ease-in-out infinite;
}
@keyframes ss-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(195,64,43,.15); }
  50%      { box-shadow: 0 0 0 8px rgba(195,64,43,.28); }
}
.tl-name { display: block; font-weight: 700; font-family: var(--font-display); font-size: 1.08rem; }
.tl-hint { display: block; font-size: .88rem; color: var(--ink-soft); }
.tl-step.is-now .tl-name { color: var(--red-deep); }

.receipt-card { margin-bottom: 1.4rem; }
.order-notes { margin: .2rem 0 .8rem; }
.pay-line { margin: .4rem 0 0; color: var(--teal-deep); }

.status-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.save-hint { display: flex; align-items: center; gap: .4rem; }
.save-hint svg { color: var(--butter); flex: none; }
.receipt-footer { font-size: .85rem; color: var(--ink-soft); margin-top: 1.6rem; }

/* ---------- print (receipt) ---------- */
@media print {
  .site-header, .site-footer, .bottom-bar, .no-print, .flash,
  .status-actions, .save-hint, .skip-link { display: none !important; }
  body { background: #fff; padding-bottom: 0; font-size: 12pt; color: #000; }
  .section { padding: 0; }
  .card { border: 1px solid #999; box-shadow: none; }
  .order-wrap { max-width: none; padding: 0; }
  .status-h1 { font-size: 18pt; }
  .receipt-footer { display: block; text-align: center; margin-top: 12pt; }
  a { color: #000; text-decoration: none; }
}

.cl-edit {
  margin-left: .4rem; padding: .55rem .5rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: .85rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.cl-edit:hover { color: var(--red); }