/* Receipt layout adaptation. Components, colors, type, radii, shadows, focus
   and motion come from the unchanged current Klippan master stylesheet.
   Sources: starter/board.html and examples/v2/Windows.dc.html. */
html, body { margin: 0; min-height: 100%; background: var(--kl-color-board); color-scheme: light; }
body { font-family: var(--kl-font-sans); }
[hidden] { display: none !important; }
.receipt-shell { min-height: 100svh; box-sizing: border-box; }
.receipt-access-layout { display: grid; grid-template-columns: var(--kl-card-full-w) minmax(0, 480px); align-items: center; justify-content: center; gap: var(--kl-space-16); min-height: 100svh; padding: var(--kl-space-16) var(--kl-space-8); box-sizing: border-box; }
.receipt-access-aside, .receipt-access-main { min-width: 0; }
.receipt-access-card { --kl-card-glass: var(--kl-color-neutral-soft); height: auto; }
.receipt-access-card .kl-card__face { position: relative; inset: auto; }
.receipt-access-card .kl-card__head { padding-right: 0; }
.receipt-access-card .kl-card__name-text { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.receipt-access-card .kl-card__status { display: block; overflow: visible; -webkit-line-clamp: unset; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; color: var(--kl-color-neutral-ink); }
.receipt-access-window { max-height: none; }
.receipt-access-window .kl-win__bar { cursor: default; touch-action: auto; }
.receipt-access-form { display: flex; flex-direction: column; min-width: 0; }
.receipt-access-body { gap: var(--kl-space-6); padding: var(--kl-space-8); overflow: visible; }
.receipt-access-body .kl-display { line-height: 1.18; }
.receipt-access-body .intro-copy { line-height: 1.6; }
.receipt-code-input { box-sizing: border-box; min-height: var(--kl-size-target); font-size: var(--kl-font-body-size); }
.receipt-access-message { margin: 0; min-height: var(--kl-space-8); line-height: 1.5; align-items: flex-start; }
.receipt-access-foot { gap: var(--kl-space-3); flex-wrap: wrap; padding: var(--kl-space-5) var(--kl-space-8); }
.receipt-access-foot .kl-btn { min-height: var(--kl-size-target); max-width: 100%; }
.receipt-access-foot .kl-win__note { text-align: right; }
.receipt-access-help, .receipt-access-owner { margin: var(--kl-space-5) 0 0; text-align: center; color: var(--kl-color-text-secondary); }
.receipt-access-owner { margin-top: var(--kl-space-2); }
.receipt-access-owner .kl-btn { min-height: var(--kl-size-target); text-decoration: none; }
.receipt-session { display: flex; flex-direction: column; align-items: center; gap: var(--kl-space-2); margin-top: var(--kl-space-8); text-align: center; color: var(--kl-color-text-secondary); }
.receipt-session p { margin: 0; max-width: 26ch; }
.receipt-session .kl-btn { min-height: var(--kl-size-target); }
.receipt-layout { display: grid; grid-template-columns: var(--kl-card-full-w) minmax(0, 480px); align-items: start; justify-content: center; gap: var(--kl-space-16); padding: var(--kl-space-24) var(--kl-space-8) var(--kl-space-16); }
.business-column { min-width: 0; padding-top: var(--kl-space-12); }
.site-header .kl-card__head { padding-right: 0; }
.progress { margin: var(--kl-space-8) 0 var(--kl-space-16); }
.progress ol { display: flex; flex-direction: column; gap: var(--kl-space-3); margin: 0; padding: 0 var(--kl-space-5); list-style: none; }
.progress li { color: var(--kl-color-text-secondary); }
.progress [aria-current] { color: var(--kl-color-text); }
.display-preferences { display: flex; flex-direction: column; align-items: center; gap: var(--kl-space-4); }
.display-options { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kl-space-2); }
.mode-badge { margin: var(--kl-space-4) var(--kl-space-5) 0; color: var(--kl-color-text-secondary); }
.main-content { min-width: 0; }
.receipt-card { max-height: none; }
.receipt-card .kl-win__bar { cursor: default; touch-action: auto; }
.receipt-card-inner { overflow: visible; padding: var(--kl-space-8); gap: var(--kl-space-6); }
.page-intro h1 { margin: 0; overflow-wrap: anywhere; }
.intro-copy { margin: var(--kl-space-2) 0 0; color: var(--kl-color-text-secondary); }
.receipt-heading { display: flex; justify-content: space-between; gap: var(--kl-space-4); }
.receipt-business { min-width: 0; }
.receipt-business h2 { margin: var(--kl-space-1) 0 0; overflow-wrap: anywhere; }
.receipt-overline { margin: 0; color: var(--kl-color-text-secondary); }
.business-email { margin: var(--kl-space-1) 0 0; color: var(--kl-color-text-secondary); overflow-wrap: anywhere; }
.receipt-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kl-space-4); margin: 0; }
.receipt-meta dt { color: var(--kl-color-text-secondary); }
.receipt-meta dd { margin: var(--kl-space-1) 0 0; overflow-wrap: anywhere; }
#customer-meta { grid-column: 1 / -1; }
.receipt-items { width: 100%; border-collapse: collapse; table-layout: fixed; font: var(--kl-font-meta); }
.receipt-items th { padding: 0 0 var(--kl-space-3); font: var(--kl-font-caption); color: var(--kl-color-text-secondary); text-align: left; border-bottom: 1px solid var(--kl-color-line); }
.receipt-items td { padding: var(--kl-space-4) 0; vertical-align: top; border-bottom: 1px solid var(--kl-color-line); overflow-wrap: anywhere; }
.receipt-items th:first-child, .receipt-items td:first-child { width: 35%; padding-right: var(--kl-space-3); }
.receipt-items .quantity-col { width: 10%; text-align: center; }
.receipt-items .price-col { width: 25%; text-align: right; }
.receipt-items .amount-col { width: 30%; text-align: right; padding-left: var(--kl-space-2); }
.receipt-items td.amount-col { font-weight: var(--kl-font-weight-semibold); }
.receipt-totals { margin: 0; display: flex; flex-direction: column; gap: var(--kl-space-3); }
.receipt-totals dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.totals-line, .total-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kl-space-4); }
.totals-line { color: var(--kl-color-text-secondary); }
.total-line { margin-top: var(--kl-space-1); }
.total-line dt { flex: none; }
.currency-label { display: block; margin-top: var(--kl-space-1); color: var(--kl-color-text-secondary); }
.receipt-note { display: flex; align-items: flex-start; gap: var(--kl-space-2); color: var(--kl-color-text-secondary); }
.receipt-note .kl-icon { flex: none; margin-top: var(--kl-space-1); }
.receipt-note p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.payment-action { gap: var(--kl-space-4); padding: var(--kl-space-5) var(--kl-space-8); }
.next-button { max-width: 100%; height: auto; min-height: var(--kl-size-target); padding-top: var(--kl-space-2); padding-bottom: var(--kl-space-2); }
.next-button #next-label { white-space: normal; }
.display-options .kl-btn, .receipt-retry, .customize-link { min-height: var(--kl-size-target); }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kl-space-2); margin-top: var(--kl-space-6); color: var(--kl-color-text-secondary); }
.site-footer #footer-business-name { overflow-wrap: anywhere; min-width: 0; }
.sample-explanation, .customize-link-wrap, .noscript-message { text-align: center; margin: var(--kl-space-6) 0 0; color: var(--kl-color-text-secondary); }
.customize-link { text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 860px) {
  .receipt-access-layout { grid-template-columns: minmax(0, 480px); align-content: center; gap: var(--kl-space-8); padding: var(--kl-space-8) var(--kl-space-5); }
  .receipt-access-aside { display: flex; flex-direction: column; align-items: center; }
  .receipt-access-card { max-width: 100%; }
  .receipt-access-aside .display-options { margin-top: var(--kl-space-4); }
  .receipt-layout { grid-template-columns: minmax(0, 480px); gap: var(--kl-space-6); padding: var(--kl-space-8) var(--kl-space-5); }
  .business-column { display: flex; flex-direction: column; align-items: center; padding-top: 0; }
  .site-header { max-width: 100%; }
  .progress { margin: var(--kl-space-6) 0 0; }
  .progress ol { flex-direction: row; gap: var(--kl-space-6); padding: 0; }
  .display-preferences { order: 3; margin-top: var(--kl-space-5); gap: var(--kl-space-3); }
  .display-options { gap: var(--kl-space-1); }
  .receipt-card { width: 100%; }
}
@media (max-width: 480px) {
  .receipt-access-layout { padding: var(--kl-space-6) var(--kl-space-4); gap: var(--kl-space-6); }
  .receipt-access-body { padding: var(--kl-space-5); }
  .receipt-access-foot { padding: var(--kl-space-5); }
  .receipt-access-foot .kl-btn { width: 100%; }
  .receipt-access-foot .kl-win__note { text-align: center; flex-basis: 100%; }
  .receipt-layout { padding-left: var(--kl-space-4); padding-right: var(--kl-space-4); }
  .receipt-card-inner { padding: var(--kl-space-5); }
  .payment-action { padding: var(--kl-space-5); }
  .receipt-items .price-col { display: none; }
  .receipt-items th:first-child, .receipt-items td:first-child { width: 50%; }
  .receipt-items .quantity-col { width: 12%; }
  .receipt-items .amount-col { width: 38%; }
  .payment-help { flex-basis: 100%; }
  .next-button { width: 100%; }
  .receipt-retry { margin: 0 auto; }
}
@media print {
  .business-column, .payment-action, .site-footer, .customize-link-wrap, .receipt-session { display: none !important; }
  .receipt-layout { display: block; padding: 0; }
  .receipt-shell { min-height: 0; background-image: none; }
  .main-content { width: 100%; }
  .receipt-card { width: 100%; box-shadow: none !important; }
  .receipt-card-inner { overflow: visible; }
}