/* ══════════════════════════════════════════════════════════════════
   Order Confirmation polish — Cycle 6 (P1 #1 OC-D)
   Class extractions from inline `style="..."` soup in
   templates/store/order_confirmation.html + print-mode rules so the
   "Print receipt" button produces a clean printable document.
   ══════════════════════════════════════════════════════════════════ */

/* ── Inline-style extractions (P1 #1 OC-D) ──────────────────── */

.wasla-oc-section-label {
  /* Small uppercase label above each section value (Order number,
     Placed, Customer, Shipping address). letter-spacing pulled out
     of inline style="letter-spacing:0.04em;" — appeared 4 places. */
  letter-spacing: 0.04em;
}

.wasla-oc-item-thumb {
  /* 56×56 product thumbnail in the items list. */
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #eef0f4;
  flex: 0 0 auto;
}

.wasla-oc-item-thumb-placeholder {
  /* Same footprint as the real thumb so the row height stays
     consistent whether or not products have images. */
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.wasla-oc-item-name {
  /* Long product names truncate cleanly within the flex row. */
  min-width: 0;
}

/* ── Print mode (P1 #1 OC-D) ─────────────────────────────────
   When the customer hits the "Print receipt" button, hide the site
   chrome (nav/footer/CTAs) so the printed page is just the receipt
   content. Margins drop to 0.5cm so the receipt fits on one page for
   typical orders. */

@media print {
  /* Page reset */
  @page { margin: 0.5cm; }

  /* Hide site chrome that doesn't belong on a printed receipt. */
  .navbar,
  .brand-navbar,
  .wasla-help-toggle,
  .wasla-help-drawer,
  footer,
  nav.fixed-bottom,
  .wasla-checkout-sticky-bar,
  .alert,
  .wasla-oc-no-print,
  .d-grid.d-md-flex {
    display: none !important;
  }

  /* Strip card shadows + borders — printer ink saver and visually
     unnecessary on paper. */
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }

  /* Avoid splitting the items list across pages where possible. */
  .list-group-item {
    break-inside: avoid;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* Cycle 24 Lane A: order-confirmation thumb border under dark — visible against dark canvas. */
[data-bs-theme="dark"] .wasla-oc-item-thumb {
  border-color: var(--wasla-line);
}