.bb-wrap { max-width: 860px; margin: 0 auto; box-sizing: border-box; color: #352b29; font-size: 15px; line-height: 1.5; }
.bb-wrap *, .bb-paper * { box-sizing: border-box; }
.bb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bb-form { display: flex; flex-direction: column; gap: 14px; }
.bb-form h3 { margin: 10px 0 0; font-size: 18px; }
.bb-form label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.bb-form input, .bb-form select, .bb-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #d9cfc7; border-radius: 8px; font: inherit; font-weight: 400; background: #fff; color: #352b29; }
.bb-form input:focus, .bb-form select:focus, .bb-form textarea:focus { outline: 2px solid #009d4f; outline-offset: 1px; }
.bb-form .bb-check { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; }
.bb-form .bb-check input { width: auto; margin-top: 4px; }
.bb-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bb-price { background: #fbf4ec; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.bb-price > div { display: flex; justify-content: space-between; gap: 12px; }
.bb-price b { font-variant-numeric: tabular-nums; }
.bb-price #bb-total { color: #f0861d; font-size: 18px; }
.bb-price .sm { font-size: 13px; color: #6e6460; }
.bb-note { font-size: 13px; color: #6e6460; margin: 0; }
.bb-alert { background: #fdecea; color: #8a1f17; border: 1px solid #f3c1bd; border-radius: 8px; padding: 10px 12px; }
.bb-btn { display: inline-block; background: #009d4f; color: #fff !important; border: 0; border-radius: 8px; padding: 12px 20px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none !important; text-align: center; }
.bb-btn:hover { background: #008443; }
.bb-btn.alt { background: #f0861d; }
.bb-btn.alt:hover { background: #d8750f; }
.bb-card { background: #fff; border: 1px solid #e6dfd8; border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.bb-card h3 { margin: 0 0 10px; }
.bb-kv { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid #f0e9e2; }
.bb-kv span { color: #6e6460; }
.bb-kv b { text-align: right; font-weight: 600; }
.bb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bb-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.bb-pill.confirmed { background: #e2f5ea; color: #0a6b38; }
.bb-pill.tentative { background: #fdf0dc; color: #8a5a00; }
.bb-pill.cancelled { background: #fdecea; color: #8a1f17; }

/* invoice */
.bb-paper { background: #fff; color: #352b29; border: 1px solid #e6dfd8; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; margin-bottom: 18px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bb-paper h2, .bb-paper h3 { color: #352b29; margin: 0; padding: 0; }
.bb-sub { font-size: 12px; color: #6e6460; }
.bb-paper .num { font-variant-numeric: tabular-nums; }
.bb-strip { height: 6px; background: linear-gradient(90deg, #f0861d 0 62%, #009d4f 62% 100%); }
.bb-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 14px; }
.bb-hd img { width: 150px; max-width: 100%; height: auto; }
.bb-biz { margin-left: auto; text-align: right; font-size: 12px; color: #6e6460; display: flex; flex-direction: column; gap: 1px; }
.bb-biz b { font-size: 14px; color: #352b29; }
.bb-hr { height: 1px; background: #e6dfd8; margin: 0 20px; }
.bb-main { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.bb-label { color: #f0861d; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.bb-main h2 { font-size: 26px; font-weight: 700; line-height: 1.2; }
.bb-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bb-status { font-weight: 700; font-size: 15px; }
.bb-status.paid { color: #009d4f; } .bb-status.due2 { color: #f0861d; } .bb-status.cancel { color: #b3261e; }
.bb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bb-scroll { overflow-x: auto; }
.bb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; margin: 0; border: 0; }
.bb-table th { background: #009d4f; color: #fff; font-size: 12px; font-weight: 600; padding: 10px 12px; text-align: left; border: 0; }
.bb-table th:first-child { border-radius: 8px 0 0 8px; } .bb-table th:last-child { border-radius: 0 8px 8px 0; }
.bb-table td { padding: 10px 12px; vertical-align: top; border: 0; background: transparent; }
.bb-table tbody tr:nth-child(odd) td { background: #fbf4ec; }
.bb-table tbody tr:last-child td { border-bottom: 2px solid #009d4f; }
.bb-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.bb-tot { margin-left: auto; min-width: 250px; display: grid; grid-template-columns: 1fr auto; gap: 4px 28px; }
.bb-tot span:nth-child(even) { text-align: right; }
.bb-tot .big { font-weight: 700; font-size: 16px; color: #f0861d; }
.bb-h { font-size: 14px; font-weight: 700; padding-bottom: 7px; position: relative; margin-bottom: 9px !important; }
.bb-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: currentColor; }
.bb-h.o { color: #f0861d !important; } .bb-h.d { color: #352b29; }
.bb-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.bb-ul li { position: relative; padding-left: 16px; margin: 0; }
.bb-ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #f0861d; }
.bb-text { white-space: pre-wrap; font-size: 13px; color: #4a403d; }
.bb-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #4a403d; }
.bb-terms li { margin: 0; }
.bb-paper a { color: #009d4f; }
.bb-ft { position: relative; background: #352b29; color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 20px 20px 14px; }
.bb-ft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #f0861d 0 62%, #009d4f 62% 100%); }
.bb-ft .sm { font-size: 12px; color: #c8beb8; }
.bb-ft .r { text-align: right; }
.bb-ft .ph { color: #f0861d; font-weight: 700; font-size: 15px; }
@media (max-width: 560px) {
  .bb-row2, .bb-two { grid-template-columns: 1fr; }
  .bb-hd, .bb-main { padding-left: 16px; padding-right: 16px; }
  .bb-table { font-size: 12px; } .bb-table th, .bb-table td { padding: 8px 6px; } .bb-table td.r { white-space: nowrap; }
}
@media print {
  body.bb-pinv * { visibility: hidden !important; }
  body.bb-pinv .bb-paper, body.bb-pinv .bb-paper * { visibility: visible !important; }
  body.bb-pinv .bb-paper { position: absolute; left: 0; top: 0; width: 100%; border: 0; border-radius: 0; margin: 0; }
  body.bb-pb * { visibility: hidden !important; }
  body.bb-pb .bb-printing, body.bb-pb .bb-printing * { visibility: visible !important; }
  body.bb-pb .bb-printing { position: absolute; left: 0; top: 0; width: 100%; }
  .bb-noprint { display: none !important; }
}
.bb-okmsg { background: #e2f5ea; color: #0a6b38; border: 1px solid #b7e3c8; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.bb-form input[type=file] { padding: 8px; }
.bb-pill.pending { background: #fdf0dc; color: #8a5a00; }
.bb-pill.accepted { background: #e2f5ea; color: #0a6b38; }
.bb-pill.rejected { background: #fdecea; color: #8a1f17; }
.bb-wrap [hidden], .bb-form [hidden], .bb-price [hidden] { display: none !important; }