/* =====================================================================
   order.css  —  premium order-builder UI
   Linked ONLY on order.html (in addition to the shared stylesheets).
   ===================================================================== */

/* --- Delivery method note --------------------------------------------- */
.method-note { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--color-ink-2); }

/* --- Promo code row --------------------------------------------------- */
.promo-row { display: flex; gap: 8px; align-items: stretch; }
.promo-row .input { flex: 1; text-transform: uppercase; letter-spacing: .04em; }
.promo-row .btn { margin: 0; padding: 0 22px; }
.promo-msg { margin-top: 9px; font-size: 13px; font-weight: 700; min-height: 1px; }
.promo-msg.ok  { color: var(--color-green); }
.promo-msg.bad { color: var(--color-red); }

/* --- Receipt action buttons ------------------------------------------- */
.order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 2px; }
.order-actions .btn { margin: 0; width: 100%; justify-content: center; padding: 15px 18px; }
.order-actions .btn--wide { grid-column: 1 / -1; }
.order-actions .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.order-actions__hint { grid-column: 1 / -1; text-align: center; font-size: 12.5px; font-style: italic;
  color: var(--color-ink-2); margin-top: 2px; }

/* --- Sticky checkout bar (bottom) ------------------------------------- */
.order-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--accent); color: var(--on-accent);
  transform: translateY(130%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -10px 34px -14px rgba(0,0,0,.55); }
.order-stickybar.is-in { transform: none; }
.order-stickybar__inner { max-width: var(--maxw); margin: 0 auto; padding: 11px 18px;
  display: flex; align-items: center; gap: 12px; }
.order-stickybar__meta { line-height: 1.15; }
.order-stickybar__count { font-size: 12px; opacity: .82; }
.order-stickybar__total { font-family: var(--font-mono); font-weight: 800; font-size: 20px; }
.order-stickybar__btn { margin-left: auto; background: var(--color-bg); color: var(--color-ink);
  border: 0; border-radius: var(--radius-pill); font-weight: 800; font-size: 14px; padding: 12px 22px;
  cursor: pointer; transition: filter .15s, transform .15s; }
.order-stickybar__btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
@media (min-width: 760px) { .order-stickybar__inner { padding: 13px 32px; } }
body.has-stickybar { padding-bottom: 74px; }

/* --- Reorder banner --------------------------------------------------- */
.reorder-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel-fill); border: 1px dashed var(--hairline);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: var(--space-3); }
.reorder-banner p { margin: 0; font-size: 14px; font-weight: 600; }
.reorder-banner__actions { margin-left: auto; display: flex; gap: 8px; }
.reorder-banner .btn { margin: 0; padding: 10px 18px; font-size: 13.5px; }
.reorder-banner .link-btn { background: none; border: 0; font: inherit; font-weight: 700;
  color: var(--color-ink-2); text-decoration: underline; cursor: pointer; }

/* --- Summary panel spacing (clears the sticky bar) -------------------- */
.order-summary-panel { scroll-margin-top: 80px; }

/* --- Print: show ONLY the receipt ------------------------------------- */
@media print {
  .order-stickybar, .order-actions, .reorder-banner { display: none !important; }
  .order .panel:not(.order-summary-panel) { display: none !important; }
  .page-header { display: none !important; }
  .order-summary-panel { background: #fff; padding: 0; margin: 0; }
  body.has-stickybar { padding-bottom: 0; }
}

/* --- Order-placed confirmation modal --------------------------------- */
.confirm-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(40,28,18,.55); opacity: 0; transition: opacity .26s ease; }
.confirm-overlay.is-in { opacity: 1; }
.confirm-card { background: var(--color-bg, #FDF6E9); border-radius: 22px; padding: 34px 26px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  transform: translateY(14px) scale(.98); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.confirm-overlay.is-in .confirm-card { transform: none; }
.confirm-check { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: var(--color-green, #2e8b57);
  color: #fff; font-size: 34px; line-height: 60px; font-weight: 800; }
.confirm-title { font-family: var(--font-serif); font-size: 30px; margin: 0 0 8px; }
.confirm-no { font-size: 17px; margin: 0 0 4px; }
.confirm-sub { font-size: 14px; color: var(--color-ink-2); margin: 4px 0; }
.confirm-card .btn { margin: 16px 0 6px; width: 100%; justify-content: center; }
.confirm-card .link-btn { background: none; border: 0; font: inherit; color: var(--color-ink-2); text-decoration: underline; cursor: pointer; }

/* --- Grid loading / error state -------------------------------------- */
.grid-loading { grid-column: 1 / -1; padding: 30px 12px; text-align: center; color: var(--color-ink-2); font-style: italic; }

/* --- Back-in-stock notify form (sold-out cards) ---------------------- */
.notify-form { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.notify-form .input { padding: 10px 12px; font-size: 13px; }
.notify-form__btn { margin: 0; width: 100%; justify-content: center; padding: 10px; font-size: 13px; }
.notify-form__msg { font-size: 12px; font-weight: 700; min-height: 1px; }
.notify-form__msg.bad { color: var(--color-red); }
.notify-form__done { font-size: 12.5px; font-weight: 700; color: var(--color-green); }