/* Customer Orders (orders app): the list cards, the item table (list + order summary) and the form's item rows. */

.oc-card { overflow: hidden; }
.oc-head { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem; background: none; border: 0; text-align: left; color: inherit; }
.oc-av { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 1.05rem; }
.oc-tone-0 { background: #e8f0ff; color: #1d4ed8; }
.oc-tone-1 { background: #e6f6ec; color: #15803d; }
.oc-tone-2 { background: #fff1de; color: #c2610c; }
.oc-tone-3 { background: #f3e8ff; color: #7e22ce; }
.oc-tone-4 { background: #e0f4f8; color: #0e7490; }
.oc-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.oc-name { font-weight: 700; font-size: 1.08rem; overflow-wrap: anywhere; }
.oc-meta { color: var(--pb-muted); font-size: .88rem; overflow-wrap: anywhere; }
.oc-meta .bi { margin-right: .25rem; }
.oc-sum { flex: 0 0 auto; text-align: right; flex-direction: column; align-items: flex-end; }
.oc-sum b { color: var(--pb-primary); font-size: 1.1rem; }
.oc-chev { flex: 0 0 auto; color: var(--pb-muted); transition: transform .2s; }
.oc-head:not(.collapsed) .oc-chev { transform: rotate(180deg); }
.oc-body { padding: 0 1.1rem 1.1rem; }

/* item table: Item | Qty | Price | Total (the same order everywhere) */
.oc-table { border: 1px solid var(--pb-border); border-radius: 12px; overflow: hidden; }
.oc-tr { display: grid; grid-template-columns: minmax(0, 1fr) 3rem 6.5rem 7rem; gap: .5rem; padding: .7rem .9rem; border-top: 1px solid var(--pb-border); align-items: center; }
.oc-tr > span:nth-child(n+2) { text-align: right; white-space: nowrap; }
.oc-tr > span:nth-child(2) { text-align: center; }
.oc-th { background: var(--pb-bg); border-top: 0; font-size: .85rem; font-weight: 600; color: var(--pb-muted); }
.oc-item { overflow-wrap: anywhere; }
.oc-total { background: var(--pb-primary-soft); border-radius: 12px; padding: .7rem 1rem; display: flex; align-items: center; gap: 1.2rem; }
.oc-total span { color: var(--pb-text); font-size: .92rem; }
.oc-total b { color: var(--pb-primary); font-size: 1.35rem; }

/* form */
#orderForm select[name=currency] { width: auto; min-width: 5.5rem; }

@media (max-width: 575.98px) {
  .oc-head { padding: .9rem; gap: .7rem; }
  .oc-av { width: 42px; height: 42px; font-size: .95rem; }
  .oc-body { padding: 0 .9rem .9rem; }
  .oc-tr { grid-template-columns: minmax(0, 1fr) 2rem 4.6rem 5.2rem; gap: .35rem; padding: .6rem .65rem; font-size: .9rem; }
  .oc-total b { font-size: 1.15rem; }
}
/* printing / saving as PDF (the order summary): just the summary, on white, with thin borders — no menu, footer or buttons */
@media print {
  @page { size: A4; margin: 12mm 12mm; }
  .demo-bar, .pb-nav, .nav-sheet, .pb-footer, .toast-wrap, .oc-keypad { display: none !important; }
  html, body, .pb-main { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  .container { max-width: none !important; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { font-size: 12.5px; }  /* compact on paper: a long order still fits one page */
  .pb-card { box-shadow: none !important; border: 1px solid #dde3ec !important; }
  .card-pad { padding: 5mm 6mm !important; }
  .oc-summary { margin-bottom: 4mm !important; break-inside: auto; }  /* a long order may go on to the next page… */
  .oc-summary > .mb-4 { margin-bottom: 4mm !important; }
  .oc-tr { padding: .28rem .8rem; }                                   /* …but never in the middle of an item */
  .oc-total { padding: .45rem .9rem; break-inside: avoid; }
  .oc-total b { font-size: 1.2rem; }
  .oc-pays { break-inside: avoid; margin-bottom: 3mm !important; }    /* "How to pay" stays in one piece */
  .oc-pays .col-md-6 { flex: 0 0 auto; width: 50%; }                 /* two accounts per row, like the website */
  .oc-pays .mb-3 { margin-bottom: 2.5mm !important; }
  .oc-pay { padding: 2.5mm 4mm; }
  .oc-pay-bank { margin-bottom: 1mm; }
  .oc-pay-row { padding: 1mm 0; }
  .oc-pay-num { font-size: 1.05rem; }
  .oc-print-note { font-size: .8rem; margin: 0; break-inside: avoid; }
  .oc-powered { margin-top: 4mm; padding-top: 2.5mm; border-top: 1px solid #dde3ec; text-align: center; font-size: .8rem; color: var(--pb-muted); break-inside: avoid; }
  .oc-print-right { text-align: right !important; }
  .oc-tr { break-inside: avoid; }
  .oc-pay { break-inside: avoid; }
}


/* the order bar: looks like one input — the customer is a chip inside it, then Item | Qty | Price | ✓ inline */
.oc-bar { position: relative; }
.oc-input { display: flex; align-items: center; gap: .35rem; min-height: 52px; min-width: 0; padding: .3rem .35rem .3rem .85rem; background: #fff;
  border: 1px solid var(--bs-border-color); border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.oc-input:focus-within { border-color: #86b0f7; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.oc-input .oc-search-ico { position: static; transform: none; color: var(--pb-muted); flex: 0 0 auto; }
.oc-in { border: 0; outline: 0; background: transparent; font-size: 1rem; line-height: 1.5; padding: .45rem .4rem; min-width: 0; color: var(--pb-text); border-radius: 8px; }
.oc-in::-webkit-search-cancel-button { display: none; }
.oc-namebox { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.oc-namebox .oc-in { position: relative; z-index: 1; width: 100%; }
.oc-ghost { position: absolute; inset: 0; padding: .45rem .4rem; font-size: 1rem; line-height: 1.5; white-space: pre; overflow: hidden; color: transparent; pointer-events: none; }
.oc-ghost b { color: #9aa6b8; font-weight: 400; }
.oc-chip { display: inline-flex; align-items: center; gap: .3rem; flex: 0 1 auto; min-width: 0; max-width: 45%; background: var(--pb-primary); color: #fff;
  border-radius: 999px; padding: .3rem .3rem .3rem .8rem; font-weight: 600; }
.oc-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-pill-tag { font-size: .75rem; font-weight: 500; opacity: .85; white-space: nowrap; }
.oc-pill-tag.is-new { background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 0 .4rem; opacity: 1; }
.oc-chip-x { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .28); color: #fff; display: grid; place-items: center; padding: 0; font-size: 1rem; }
.oc-fields { display: flex; align-items: center; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.oc-fields.d-none { display: none; }
.oc-f-item { flex: 1 1 auto; width: 3rem; }
.oc-f-qty { flex: 0 0 3.4rem; width: 3.4rem; text-align: center; border-left: 1px solid var(--pb-border); border-radius: 0; }
.oc-f-price { flex: 0 0 5.2rem; width: 5.2rem; text-align: center; border-left: 1px solid var(--pb-border); border-radius: 0; }
.oc-fields .oc-in:focus { background: var(--pb-primary-soft); border-radius: 8px; border-left-color: transparent; }
.oc-fields input[readonly] { caret-color: transparent; }
.oc-f-add { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 10px; background: var(--pb-primary); color: #fff; font-size: 1.2rem; display: grid; place-items: center; }
@media (max-width: 575.98px) {
  .oc-input { padding-left: .6rem; gap: .25rem; }
  .oc-chip { flex-shrink: 0; max-width: 40%; padding-left: .6rem; }
  .oc-pill-tag:not(.is-new) { display: none; }
  .oc-f-qty { flex-basis: 2.8rem; width: 2.8rem; }
  .oc-f-price { flex-basis: 4rem; width: 4rem; }
  .oc-f-add { width: 38px; height: 38px; }
  .oc-in { padding: .45rem .3rem; }
}
.oc-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--pb-border); border-radius: 12px; box-shadow: var(--pb-shadow); padding: .3rem; max-height: 320px; overflow-y: auto; }
.oc-opt { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .7rem; border: 0; background: none; border-radius: 8px; text-align: left; color: inherit; }
.oc-opt.active, .oc-opt:hover { background: var(--pb-primary-soft); }
.oc-opt .oc-av { width: 30px; height: 30px; font-size: .75rem; }
.oc-opt small { color: var(--pb-muted); margin-left: auto; white-space: nowrap; }
/* the line under the box: a rounded box whose color follows what it says (tip / ready / needs something / problem) */
.oc-hint { font-size: .92rem; margin-bottom: .5rem; padding: .45rem .75rem .45rem 2.2rem; position: relative; border-radius: 12px; line-height: 1.45;
  background: var(--pb-primary-soft); border: 1px solid #cddcfa; color: var(--pb-text); transition: background .15s, border-color .15s; }
.oc-hint::before { content: "\F46B"; font-family: "bootstrap-icons"; position: absolute; left: .75rem; top: .45rem; color: var(--pb-primary); }  /* lightbulb */
.oc-hint .text-muted { color: var(--pb-text) !important; }
.oc-hint .ok, .oc-hint .warn, .oc-hint .bad { color: inherit; }
.oc-hint .ok > .bi, .oc-hint .warn > .bi, .oc-hint .bad > .bi { display: none; }  /* the box's own icon says it */
.oc-hint:has(.ok) { background: var(--pb-success-soft); border-color: #b7e4c7; }
.oc-hint:has(.ok)::before { content: "\F26A"; color: var(--pb-success); }   /* check-circle-fill */
.oc-hint:has(.warn) { background: var(--pb-warning-soft); border-color: #f6d3a6; }
.oc-hint:has(.warn)::before { content: "\F431"; color: var(--pb-warning); } /* info-circle */
.oc-hint:has(.bad) { background: var(--pb-danger-soft); border-color: #f5c2c2; }
.oc-hint:has(.bad)::before { content: "\F332"; color: var(--pb-danger); }   /* exclamation-circle-fill */
.oc-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.oc-steps span { background: #fff; border: 1px solid #cddcfa; border-radius: 999px; padding: 0 .42rem; font-weight: 600; font-size: .8rem; color: var(--pb-primary-dark); white-space: nowrap; }
.oc-steps .bi { color: var(--pb-primary); font-size: .65rem; }
.oc-now { color: var(--pb-danger); font-weight: 700; }  /* the box to type in now */
.oc-next { font-weight: 400; white-space: nowrap; margin-left: .3rem; font-size: .85rem; }
.oc-touch { display: none; }  /* phones say "Next" (the keypad's key), computers "Enter" */
@media (pointer: coarse) { .oc-touch { display: block; flex-basis: 100%; margin: .15rem 0 0; } .oc-desk { display: none; } }
.oc-hint kbd { background: var(--pb-bg); color: var(--pb-text); border: 1px solid var(--pb-border); font-size: .75rem; padding: .02rem .3rem; }
@media (max-width: 575.98px) {
  .oc-fields { grid-template-columns: minmax(0, 1fr) 3.6rem 5.4rem 2.9rem; gap: .35rem; }
  .oc-fields .form-control { padding: .6rem .55rem; }
}
.oc-flash { animation: oc-flash 1.2s ease-out; }
@keyframes oc-flash { from { box-shadow: 0 0 0 3px var(--pb-success); } to { box-shadow: var(--pb-shadow); } }
.oc-new-badge { background: var(--pb-success-soft); color: var(--pb-success); font-weight: 600; }

/* phones: the keypad while adding items (fixed at the bottom; the iPhone keyboard stays closed) */
.oc-keypad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: #d7dce4; box-shadow: 0 -4px 16px rgba(11, 31, 68, .12); }
.oc-keypad.d-none { display: none; }
.oc-keypad button { height: 52px; border: 0; border-radius: 10px; background: #fff; font-size: 1.45rem; font-weight: 500; color: var(--pb-text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.oc-keypad button:active { background: #c4cad4; }
.oc-keypad .oc-k-fn { background: #eef1f6; font-size: 1rem; font-weight: 600; }
.oc-keypad button:disabled { opacity: .4; }
.oc-keypad .oc-k-go { grid-column: 4; grid-row: 2 / span 2; height: auto; background: var(--pb-primary); color: #fff; font-size: 1.1rem; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.oc-keypad .oc-k-go .bi { font-size: 1.5rem; }
.oc-keypad .oc-k-del { grid-column: 4; grid-row: 4; }
.oc-keypad .oc-k-go:active { background: var(--pb-primary-dark); }
.oc-keypad .oc-k-go.is-done { background: var(--pb-success); }
.oc-keypad .oc-k-go.is-done:active { background: #12823b; }
body.oc-keypad-on { padding-bottom: 260px; }
body.oc-keypad-on .oc-menu { max-height: 190px; }

/* Done with something missing: that box turns red and shakes (orders_bar.js refuse) */
.oc-fields .oc-in.is-bad, .oc-fields .oc-in.is-bad:focus { background: var(--pb-danger-soft); color: var(--pb-danger); box-shadow: inset 0 0 0 2px var(--pb-danger); border-radius: 8px; animation: oc-shake .35s; }
.oc-fields .oc-in.is-bad::placeholder { color: var(--pb-danger); opacity: .7; }
@keyframes oc-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* the order form on phones: Save always at hand */
@media (max-width: 575.98px) {
  .oc-actions { position: sticky; bottom: 0; z-index: 5; margin: 0 -12px 1.5rem !important; padding: .75rem 12px calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(244, 247, 252, .96); border-top: 1px solid var(--pb-border); }
  .oc-actions .btn-primary { flex: 1 1 auto; }
}

/* the order form: its items, each the same box as the item entry, changed in place (× removes it) */
#itemList .oc-line { margin-bottom: .5rem; min-height: 50px; padding-right: .35rem; }
#itemList .oc-line .oc-f-qty, #itemList .oc-line .oc-f-price { border-left: 1px solid var(--pb-border); border-radius: 0; }
#itemList .oc-line .oc-in:focus { background: var(--pb-primary-soft); border-radius: 8px; border-left-color: transparent; }
.oc-l-total { flex: 0 0 6.5rem; text-align: right; font-weight: 700; color: var(--pb-text); white-space: nowrap; padding-right: .25rem; }
@media (max-width: 575.98px) {  /* phones: the line total on its own small line inside the box */
  #itemList .oc-line { flex-wrap: wrap; row-gap: 0; padding-bottom: .4rem; }
  #itemList .oc-line .oc-l-total { order: 9; flex: 1 0 100%; font-size: .85rem; color: var(--pb-muted); padding: 0 .5rem 0 0; }
  #itemList .oc-line .oc-l-total::before { content: "= "; font-weight: 400; }
}
.oc-x { flex: 0 0 auto; border: 0; background: none; color: var(--pb-muted); padding: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.oc-x:hover, .oc-x:active { background: var(--pb-danger-soft); color: var(--pb-danger); }

/* payment options (the seller's page, the order form's ticks, "How to pay" on the order summary) */
.oc-pay { padding: .85rem 1rem; border: 1px solid var(--pb-border); border-radius: 12px; }
.oc-pay-bank { font-weight: 700; font-size: 1.05rem; margin-bottom: .35rem; }
.oc-pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; padding: .4rem 0; border-top: 1px dashed var(--pb-border); }
.oc-pay-row span { grid-column: 1 / -1; color: var(--pb-muted); font-size: .78rem; }
.oc-pay-row b { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.oc-pay-num { font-size: 1.15rem; letter-spacing: .03em; white-space: nowrap; overflow-wrap: normal !important; }
.oc-pay-editing { box-shadow: 0 0 0 2px var(--pb-primary); }
.oc-pay-check { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border: 1px solid var(--pb-border); border-radius: 12px; cursor: pointer; }
.oc-pay-check .form-check-input { margin: 0; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }