/* PK to BD order portal.
   Same quiet palette as the site. Interactive rules are scoped with .pk2bd / .pk2bd-modal
   (written out in full, no :is(), so older Android browsers apply them) so a theme or Elementor kit button style cannot override their colours, and hover colours
   only apply on devices with a mouse, so a tap on a phone never sticks. */

.pk2bd, .pk2bd-modal, .pk2bd-toast {
	--bg: #ffffff;
	--alt: #f5f5f7;
	--ink: #1d1d1f;
	--ink-2: #6e6e73;
	--line: #e3e3e8;
	--line-2: #d2d2d7;
	--accent: #0071e3;
	--accent-2: #0062c3;
	--accent-soft: #e8f1fc;
	--wa: #177a3b;
	--wa-2: #12652f;
	--good: #1d7f3e;
	--good-soft: #e8f5ec;
	--bad: #c4281c;
	--bad-soft: #fdecea;
	--radius: 16px;
	--s-pending: #a34a00;   --s-pending-bg: #fff3e6;
	--s-received: #0062c3;  --s-received-bg: #e8f1fc;
	--s-shipped: #5b35b5;   --s-shipped-bg: #f1ecfd;
	--s-arrived: #0b6b74;   --s-arrived-bg: #e4f4f5;
	--s-delivered: #1d7f3e; --s-delivered-bg: #e8f5ec;
	--s-cancelled: #6e6e73; --s-cancelled-bg: #f0f0f2;
	--s-refunded: #c4281c;  --s-refunded-bg: #fdecea;
	font-family: "Kalpurush", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.pk2bd *, .pk2bd *::before, .pk2bd *::after, .pk2bd-modal *, .pk2bd-modal *::before, .pk2bd-modal *::after { box-sizing: inherit; }
.pk2bd { max-width: 1100px; margin: 0 auto; padding: 0 0 40px; }
.pk2bd [hidden], .pk2bd-modal [hidden] { display: none !important; }
.pk2bd h1, .pk2bd h2, .pk2bd h3, .pk2bd-modal h1, .pk2bd-modal h2, .pk2bd-modal h3 { font-family: inherit; letter-spacing: normal; text-transform: none; line-height: 1.3; color: var(--ink); }
.pk2bd button, .pk2bd input, .pk2bd select, .pk2bd textarea, .pk2bd-modal button, .pk2bd-modal input, .pk2bd-modal select, .pk2bd-modal textarea { font: inherit; letter-spacing: normal; text-transform: none; margin: 0; }
.pk2bd button, .pk2bd-modal button { cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: none; text-decoration: none; }
.pk2bd button:focus-visible, .pk2bd a:focus-visible, .pk2bd input:focus-visible, .pk2bd select:focus-visible, .pk2bd summary:focus-visible, .pk2bd-modal button:focus-visible, .pk2bd-modal a:focus-visible, .pk2bd-modal input:focus-visible, .pk2bd-modal select:focus-visible, .pk2bd-modal summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- buttons ---------- */
.pk2bd .pk2bd-btn, .pk2bd-modal .pk2bd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px;
	background: var(--bg); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.2;
	text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.pk2bd .pk2bd-btn:disabled, .pk2bd-modal .pk2bd-btn:disabled { opacity: .6; cursor: progress; }
.pk2bd .pk2bd-btn--primary, .pk2bd-modal .pk2bd-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pk2bd .pk2bd-btn--wa, .pk2bd-modal .pk2bd-btn--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.pk2bd .pk2bd-btn--red, .pk2bd-modal .pk2bd-btn--red { background: var(--bad); border-color: var(--bad); color: #fff; }
.pk2bd .pk2bd-btn--ghost, .pk2bd-modal .pk2bd-btn--ghost { background: var(--bg); border-color: var(--line-2); color: var(--ink); }
.pk2bd .pk2bd-btn--danger, .pk2bd-modal .pk2bd-btn--danger { color: var(--bad); }
.pk2bd .pk2bd-btn--wa-o, .pk2bd-modal .pk2bd-btn--wa-o { color: var(--wa); }
.pk2bd .pk2bd-btn--block, .pk2bd-modal .pk2bd-btn--block { width: 100%; }
.pk2bd .pk2bd-btn--sm, .pk2bd-modal .pk2bd-btn--sm { min-height: 36px; padding: 7px 14px; font-size: 14px; }
.pk2bd .pk2bd-btn--wa::before, .pk2bd-modal .pk2bd-btn--wa::before {
	content: ""; width: 18px; height: 18px; background: currentColor; flex: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-3.3-.8-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.3 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.1.1.6-.1 1.2z'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-3.3-.8-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.3 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.1.1.6-.1 1.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pk2bd-link { display: block; text-align: center; margin-top: 12px; color: var(--ink-2); font-size: 14px; }

/* ---------- top bar & view switch ---------- */
.pk2bd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pk2bd-brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.pk2bd-brand__text strong { font-size: 22px; font-weight: 700; }
.pk2bd-brand__text small { color: var(--ink-2); font-size: 14px; }

.pk2bd-switch { display: inline-flex; background: var(--alt); border-radius: 12px; padding: 3px; margin-bottom: 20px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pk2bd-switch::-webkit-scrollbar { display: none; }
.pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { border: 0; background: transparent; color: var(--ink-2); padding: 8px 16px; border-radius: 9px; font-weight: 600; font-size: 14.5px; white-space: nowrap; display: inline-flex; align-items: center; }
.pk2bd .pk2bd-switch__btn.is-active, .pk2bd-modal .pk2bd-switch__btn.is-active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.pk2bd-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 700; }

/* ---------- cards & forms ---------- */
.pk2bd-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.pk2bd-order-card { max-width: 640px; }
.pk2bd-h { margin: 0 0 4px; font-size: 21px; font-weight: 700; }
.pk2bd-sub { margin: 0 0 18px; color: var(--ink-2); }
.pk2bd-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pk2bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pk2bd-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pk2bd-field--full { grid-column: 1 / -1; }
.pk2bd-field > span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.pk2bd .pk2bd-field input, .pk2bd .pk2bd-field select, .pk2bd .pk2bd-input, .pk2bd .pk2bd-search, .pk2bd-modal .pk2bd-field input, .pk2bd-modal .pk2bd-field select, .pk2bd-modal .pk2bd-input, .pk2bd-modal .pk2bd-search {
	width: 100%; height: auto; min-height: 44px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink);
	border-radius: 12px; padding: 10px 14px; outline: none; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.pk2bd .pk2bd-field input:focus, .pk2bd .pk2bd-field select:focus, .pk2bd .pk2bd-input:focus, .pk2bd .pk2bd-search:focus, .pk2bd-modal .pk2bd-field input:focus, .pk2bd-modal .pk2bd-field select:focus, .pk2bd-modal .pk2bd-input:focus, .pk2bd-modal .pk2bd-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, .18); }
.pk2bd .pk2bd-field input:user-invalid, .pk2bd-modal .pk2bd-field input:user-invalid { border-color: var(--bad); }
.pk2bd-input-row { display: flex; gap: 8px; }
.pk2bd .pk2bd-input-row input, .pk2bd-modal .pk2bd-input-row input { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; }

.pk2bd-drop {
	position: relative; display: flex; align-items: center; justify-content: center; min-height: 168px; margin: 0;
	border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--alt); overflow: hidden; cursor: pointer; transition: border-color .15s;
}
.pk2bd-drop input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pk2bd-drop__empty { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 20px; pointer-events: none; }
.pk2bd-drop__empty::before { content: "+"; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 26px; font-weight: 300; margin-bottom: 8px; }
.pk2bd-drop__empty small { color: var(--ink-2); }
.pk2bd-drop__preview { max-height: 260px; max-width: 100%; object-fit: contain; pointer-events: none; }
.pk2bd-drop--small { min-height: 120px; }
.pk2bd-drop--small .pk2bd-drop__preview { max-height: 160px; }
.pk2bd-drop__over { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); pointer-events: none; background: rgba(29, 29, 31, .8); color: #fff; font-size: 13px; padding: 5px 12px; border-radius: 99px; }

.pk2bd-msg:empty { display: none; }
.pk2bd-msg { padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.pk2bd-msg.is-error { background: var(--bad-soft); color: var(--bad); }
.pk2bd-msg.is-ok { background: var(--good-soft); color: var(--good); }
.pk2bd-note { margin: 0; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.pk2bd-note--box { text-align: left; background: var(--alt); color: var(--ink); padding: 12px 14px; border-radius: 12px; }

/* ---------- login ---------- */
.pk2bd-auth { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-top: 16px; }
.pk2bd-auth__intro h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; margin: 0 0 12px; }
.pk2bd-auth__intro p { color: var(--ink-2); margin: 0 0 24px; font-size: 16.5px; }
.pk2bd-steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 12px; }
.pk2bd-steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; margin: 0; }
.pk2bd-steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--alt); color: var(--ink); font-weight: 700; font-size: 13px; flex: none; }

/* ---------- tabs (order totals, login/request) ---------- */
.pk2bd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pk2bd .pk2bd-tab, .pk2bd-modal .pk2bd-tab {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-width: 0;
	border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 14px; padding: 12px 14px;
	transition: border-color .15s, background-color .15s;
}
.pk2bd .pk2bd-tab.is-active, .pk2bd-modal .pk2bd-tab.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.pk2bd-tab__label { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pk2bd-tab__label em { font-style: normal; color: var(--ink-2); margin-left: 2px; }
.pk2bd-tab__amount { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.pk2bd-tabs--auth { grid-template-columns: 1fr 1fr; background: var(--alt); padding: 3px; border-radius: 12px; gap: 3px; margin-bottom: 20px; }
.pk2bd .pk2bd-tabs--auth .pk2bd-tab, .pk2bd-modal .pk2bd-tabs--auth .pk2bd-tab { align-items: center; border: 0; background: transparent; color: var(--ink-2); padding: 9px; border-radius: 9px; font-weight: 600; white-space: nowrap; }
.pk2bd .pk2bd-tabs--auth .pk2bd-tab.is-active, .pk2bd-modal .pk2bd-tabs--auth .pk2bd-tab.is-active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* ---------- totals ---------- */
.pk2bd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pk2bd .pk2bd-stat, .pk2bd-modal .pk2bd-stat {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left;
	border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--radius); padding: 14px 16px;
	transition: border-color .15s, background-color .15s;
}
.pk2bd .pk2bd-stat.is-active, .pk2bd-modal .pk2bd-stat.is-active { border-color: var(--ink); }
.pk2bd-stat span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pk2bd-stat strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk2bd-stat small { font-size: 12.5px; color: var(--ink-2); }
.pk2bd-stat--paid strong { color: var(--good); }
.pk2bd-stat--unpaid strong { color: var(--bad); }

.pk2bd-toolbar { margin-bottom: 14px; display: flex; gap: 10px; }
.pk2bd-toolbar .pk2bd-search { flex: 1; }
.pk2bd-filter-note { font-size: 14px; color: var(--ink-2); margin: -4px 0 12px; }
.pk2bd .pk2bd-filter-note button, .pk2bd-modal .pk2bd-filter-note button { border: 0; background: none; color: var(--accent); text-decoration: underline; padding: 0; }

/* ---------- order cards ----------
   Screenshot on the left with the details beside it; for the team, one row of controls
   (status, paid/unpaid, edit, delete) runs under both across the whole card. */
.pk2bd-list { display: grid; gap: 10px; }
.pk2bd-order { display: grid; grid-template-columns: 112px minmax(0, 1fr); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: opacity .2s; }
.pk2bd-order.is-saving { opacity: .55; pointer-events: none; }
.pk2bd .pk2bd-order__shot, .pk2bd-modal .pk2bd-order__shot { border: 0; padding: 0; margin: 0; background: var(--alt); display: block; min-height: 88px; height: 100%; align-self: stretch; position: relative; overflow: hidden; cursor: zoom-in; border-radius: 0; line-height: 0; }
.pk2bd-order__shot img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; display: block; }
.pk2bd-order__shot span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; padding: 8px; text-align: center; color: var(--ink-2); font-size: 12px; line-height: 1.35; }
.pk2bd .pk2bd-order__shot:disabled, .pk2bd-modal .pk2bd-order__shot:disabled { cursor: default; }
.pk2bd-order__body { padding: 12px 14px; min-width: 0; }
.pk2bd-order__info { min-width: 0; cursor: pointer; border-radius: 10px; }
.pk2bd-order__head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin-bottom: 2px; }
.pk2bd-order__id { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pk2bd-order__price { margin-left: auto; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk2bd-who { font-size: 13.5px; color: var(--ink-2); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk2bd-who strong { color: var(--ink); }
.pk2bd-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; margin: 6px 0 4px; }
.pk2bd-meta div { min-width: 0; }
.pk2bd-meta dt { font-size: 12px; color: var(--ink-2); margin: 0; }
.pk2bd-meta dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk2bd-order__hint { font-size: 13px; color: var(--accent); font-weight: 600; }

.pk2bd-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--alt); }
.pk2bd-controls .pk2bd-select { flex: 1 1 170px; }
.pk2bd-controls .pk2bd-seg { flex: 1 1 170px; background: var(--bg); }
.pk2bd-controls .pk2bd-actions { flex: 0 0 auto; }
.pk2bd-select { position: relative; display: block; margin: 0; }
.pk2bd-select span { position: absolute; top: 6px; left: 12px; font-size: 10.5px; font-weight: 700; opacity: .75; pointer-events: none; color: inherit; }
.pk2bd .pk2bd-select select, .pk2bd-modal .pk2bd-select select {
	width: 100%; appearance: none; -webkit-appearance: none; border: 0; border-radius: 10px; padding: 19px 30px 6px 12px; min-height: 0; height: auto;
	font-weight: 700; cursor: pointer; line-height: 1.3; box-shadow: none; border: 1px solid #f0b47c;
	background: var(--s-pending-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
	color: var(--s-pending);
}
.pk2bd-select--pending { color: var(--s-pending); }
.pk2bd .pk2bd-select--received select, .pk2bd-modal .pk2bd-select--received select { background-color: var(--s-received-bg); color: var(--s-received); }
.pk2bd .pk2bd-select--shipped select, .pk2bd-modal .pk2bd-select--shipped select { background-color: var(--s-shipped-bg); color: var(--s-shipped); }
.pk2bd .pk2bd-select--arrived select, .pk2bd-modal .pk2bd-select--arrived select { background-color: var(--s-arrived-bg); color: var(--s-arrived); }
.pk2bd .pk2bd-select--delivered select, .pk2bd-modal .pk2bd-select--delivered select { background-color: var(--s-delivered-bg); color: var(--s-delivered); }
.pk2bd .pk2bd-select--cancelled select, .pk2bd-modal .pk2bd-select--cancelled select { background-color: var(--s-cancelled-bg); color: var(--s-cancelled); }
.pk2bd .pk2bd-select--refunded select, .pk2bd-modal .pk2bd-select--refunded select { background-color: var(--s-refunded-bg); color: var(--s-refunded); }
.pk2bd-select--received { color: var(--s-received); } .pk2bd-select--shipped { color: var(--s-shipped); } .pk2bd-select--arrived { color: var(--s-arrived); }
.pk2bd-select--delivered { color: var(--s-delivered); } .pk2bd-select--cancelled { color: var(--s-cancelled); } .pk2bd-select--refunded { color: var(--s-refunded); }

/* A border in each status colour keeps the picker visible on the grey control row. */
.pk2bd .pk2bd-select--pending select, .pk2bd-modal .pk2bd-select--pending select { border: 1px solid #f0b47c; }
.pk2bd .pk2bd-select--received select, .pk2bd-modal .pk2bd-select--received select { border: 1px solid #9cc3f0; }
.pk2bd .pk2bd-select--shipped select, .pk2bd-modal .pk2bd-select--shipped select { border: 1px solid #c3b0ee; }
.pk2bd .pk2bd-select--arrived select, .pk2bd-modal .pk2bd-select--arrived select { border: 1px solid #93cbd1; }
.pk2bd .pk2bd-select--delivered select, .pk2bd-modal .pk2bd-select--delivered select { border: 1px solid #9ccfaa; }
.pk2bd .pk2bd-select--cancelled select, .pk2bd-modal .pk2bd-select--cancelled select { border: 1px solid #cfcfd4; }
.pk2bd .pk2bd-select--refunded select, .pk2bd-modal .pk2bd-select--refunded select { border: 1px solid #f0a8a1; }
.pk2bd-badge--pending { box-shadow: inset 0 0 0 1px #f0b47c; }
.pk2bd-badge--received { box-shadow: inset 0 0 0 1px #9cc3f0; }
.pk2bd-badge--shipped { box-shadow: inset 0 0 0 1px #c3b0ee; }
.pk2bd-badge--arrived { box-shadow: inset 0 0 0 1px #93cbd1; }
.pk2bd-badge--delivered { box-shadow: inset 0 0 0 1px #9ccfaa; }
.pk2bd-badge--cancelled { box-shadow: inset 0 0 0 1px #cfcfd4; }
.pk2bd-badge--refunded { box-shadow: inset 0 0 0 1px #f0a8a1; }

.pk2bd-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--alt); border-radius: 10px; padding: 3px; gap: 3px; }
.pk2bd .pk2bd-seg button, .pk2bd-modal .pk2bd-seg button { border: 0; background: transparent; color: var(--ink-2); border-radius: 8px; padding: 6px; font-size: 13.5px; font-weight: 700; min-height: 32px; }
.pk2bd .pk2bd-seg button.is-on.is-paid, .pk2bd-modal .pk2bd-seg button.is-on.is-paid { background: var(--good); color: #fff; }
.pk2bd .pk2bd-seg button.is-on.is-unpaid, .pk2bd-modal .pk2bd-seg button.is-on.is-unpaid { background: var(--bad); color: #fff; }
.pk2bd-actions { display: flex; gap: 6px; }
.pk2bd .pk2bd-icon-btn, .pk2bd-modal .pk2bd-icon-btn { flex: 1; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; min-height: 38px; white-space: nowrap; }
.pk2bd .pk2bd-icon-btn--danger, .pk2bd-modal .pk2bd-icon-btn--danger { color: var(--bad); }

/* ---------- badges ---------- */
.pk2bd-badge, .pk2bd-pay, .pk2bd-role { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.pk2bd-badge--pending { background: var(--s-pending-bg); color: var(--s-pending); }
.pk2bd-badge--received { background: var(--s-received-bg); color: var(--s-received); }
.pk2bd-badge--shipped { background: var(--s-shipped-bg); color: var(--s-shipped); }
.pk2bd-badge--arrived { background: var(--s-arrived-bg); color: var(--s-arrived); }
.pk2bd-badge--delivered { background: var(--s-delivered-bg); color: var(--s-delivered); }
.pk2bd-badge--cancelled { background: var(--s-cancelled-bg); color: var(--s-cancelled); }
.pk2bd-badge--refunded { background: var(--s-refunded-bg); color: var(--s-refunded); }
.pk2bd-pay--paid { background: var(--good-soft); color: var(--good); }
.pk2bd-pay--unpaid { background: var(--bad-soft); color: var(--bad); }
.pk2bd-role { background: var(--alt); color: var(--ink); }
.pk2bd-role--admin { background: var(--accent-soft); color: var(--accent-2); }
.pk2bd-role--moderator { background: var(--s-shipped-bg); color: var(--s-shipped); }

.pk2bd-empty, .pk2bd-loading { text-align: center; padding: 40px 20px; color: var(--ink-2); background: var(--alt); border-radius: var(--radius); }

/* ---------- popups ---------- */
.pk2bd-noscroll { overflow: hidden; }
.pk2bd-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .18s; }
.pk2bd-modal.is-open { opacity: 1; }
.pk2bd-modal__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .45); }
.pk2bd-modal__box {
	position: relative; background: var(--bg); border-radius: 20px; padding: 26px; width: 100%; max-width: 520px;
	max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 24px 64px rgba(0, 0, 0, .25); transform: translateY(8px); transition: transform .2s;
}
.pk2bd-modal.is-open .pk2bd-modal__box { transform: none; }
.pk2bd .pk2bd-modal__x, .pk2bd-modal .pk2bd-modal__x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--alt); color: var(--ink); font-size: 22px; line-height: 1; display: grid; place-items: center; padding: 0; z-index: 2; }
.pk2bd-modal--small .pk2bd-modal__box { max-width: 420px; }
.pk2bd-modal--wide .pk2bd-modal__box { max-width: 920px; }
.pk2bd-lightbox { padding: 0; }
.pk2bd-lightbox .pk2bd-modal__backdrop { background: rgba(0, 0, 0, .92); }
.pk2bd-modal.pk2bd-lightbox .pk2bd-modal__box { background: transparent; box-shadow: none; max-width: none; width: 100%; height: 100%; max-height: none; padding: 64px 16px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 0; overflow: hidden; }
/* The × sits on the same element as .pk2bd-modal, so the selector joins the two classes. */
.pk2bd-modal.pk2bd-lightbox .pk2bd-modal__x { position: fixed; top: 16px; right: 16px; background: rgba(255, 255, 255, .2); color: #fff; width: 48px; height: 48px; font-size: 30px; z-index: 3; pointer-events: auto; }
.pk2bd-lightbox__img { display: block; max-width: 100%; max-height: calc(100% - 64px); min-height: 0; object-fit: contain; border-radius: 8px; }
.pk2bd-lightbox__bar { flex: none; display: flex; gap: 10px; }

/* timeline */
.pk2bd-tl-head { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; padding-right: 36px; }
.pk2bd-tl-head img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--alt); flex: none; }
.pk2bd-tl-head h3 { margin: 0; font-size: 19px; }
.pk2bd-tl-head p { margin: 2px 0 0; color: var(--ink-2); }
.pk2bd-tl { list-style: none; margin: 0; padding: 0; }
.pk2bd-tl li { position: relative; display: flex; gap: 14px; padding: 0 0 18px; margin: 0; }
.pk2bd-tl li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.pk2bd-tl__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink-2); flex: none; margin-top: 3px; }
.pk2bd-tl strong { display: block; }
.pk2bd-tl time { font-size: 13px; color: var(--ink-2); }
.pk2bd-tl .tl-placed .pk2bd-tl__dot, .pk2bd-tl .tl-s-pending .pk2bd-tl__dot { border-color: var(--s-pending); }
.pk2bd-tl .tl-s-received .pk2bd-tl__dot { border-color: var(--s-received); }
.pk2bd-tl .tl-s-shipped .pk2bd-tl__dot { border-color: var(--s-shipped); }
.pk2bd-tl .tl-s-arrived .pk2bd-tl__dot { border-color: var(--s-arrived); }
.pk2bd-tl .tl-s-delivered .pk2bd-tl__dot { border-color: var(--s-delivered); background: var(--s-delivered); }
.pk2bd-tl .tl-s-cancelled .pk2bd-tl__dot { border-color: var(--s-cancelled); }
.pk2bd-tl .tl-s-refunded .pk2bd-tl__dot, .pk2bd-tl .tl-p-unpaid .pk2bd-tl__dot { border-color: var(--bad); }
.pk2bd-tl .tl-p-paid .pk2bd-tl__dot { border-color: var(--good); }

/* who owes */
.pk2bd-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-variant-numeric: tabular-nums; }
.pk2bd-table th { text-align: left; font-size: 12.5px; color: var(--ink-2); padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line-2); background: none; }
.pk2bd-table td { padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; background: none; }
.pk2bd-table td small { display: block; color: var(--ink-2); font-size: 12.5px; }
.pk2bd-table th:last-child, .pk2bd-table td:last-child { text-align: right; }
.pk2bd-table td:last-child { font-weight: 700; color: var(--bad); }
.pk2bd-table tfoot td { font-weight: 700; border-bottom: 0; }

/* ---------- chips, small buttons ---------- */
.pk2bd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pk2bd .pk2bd-chip, .pk2bd-modal .pk2bd-chip { border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; min-height: 36px; }
.pk2bd .pk2bd-chip.is-active, .pk2bd-modal .pk2bd-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pk2bd .pk2bd-chip.is-alert:not(.is-active), .pk2bd-modal .pk2bd-chip.is-alert:not(.is-active) { border-color: var(--bad); color: var(--bad); }
.pk2bd-chip em { font-style: normal; opacity: .7; margin-left: 2px; }
.pk2bd .pk2bd-mini, .pk2bd-modal .pk2bd-mini { border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); border-radius: 7px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; flex: none; min-height: 26px; }
.pk2bd-muted { color: var(--ink-2); font-weight: 400; font-size: 13.5px; }
.pk2bd-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk2bd-due { color: var(--bad); }

/* ---------- customers & team ---------- */
.pk2bd-cust-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pk2bd-cust { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pk2bd-cust.is-pending { border-color: var(--s-pending); background: var(--s-pending-bg); }
.pk2bd-cust.is-blocked { opacity: .7; }
.pk2bd-cust__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pk2bd-cust__who strong { display: block; }
.pk2bd-cust__who small { color: var(--ink-2); font-size: 12.5px; }
.pk2bd-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--alt); color: var(--ink); font-weight: 700; font-size: 14px; }
.pk2bd-cust__creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0; min-width: 0; }
.pk2bd-cust__creds dt { font-size: 12px; color: var(--ink-2); margin: 0; }
.pk2bd-cust__creds dd { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.pk2bd-pw { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; }
.pk2bd-cust__actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.pk2bd-team-help { color: var(--ink-2); margin: 0 0 14px; font-size: 14px; }
.pk2bd-done { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.pk2bd-creds-box { background: var(--alt); border-radius: 14px; padding: 4px 16px; margin-bottom: 16px; }
.pk2bd-creds-box div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; }
.pk2bd-creds-box div + div { border-top: 1px solid var(--line); }
.pk2bd-creds-box span { color: var(--ink-2); }
.pk2bd-creds-box b { font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; text-align: right; }

/* ---------- toast & statement ---------- */
.pk2bd-toast {
	position: fixed; left: 50%; bottom: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 100000;
	transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
	background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2); max-width: calc(100vw - 32px);
}
.pk2bd-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.pk2bd-toast.is-error { background: var(--bad); }
.pk2bd-stmt-frame { width: 100%; height: min(60vh, 560px); border: 1px solid var(--line); border-radius: 12px; background: #fff; display: block; margin-bottom: 14px; }
.pk2bd-stmt-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pk2bd-stmt-actions > :first-child { margin-right: auto; }

/* calendar accent */
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #1d1d1f; border-color: #1d1d1f; }

/* ---------- hover (mouse only) ---------- */
@media (hover: hover) {
	.pk2bd .pk2bd-btn--ghost:hover, .pk2bd-modal .pk2bd-btn--ghost:hover, .pk2bd .pk2bd-btn:not([class*="pk2bd-btn--"]):hover, .pk2bd-modal .pk2bd-btn:not([class*="pk2bd-btn--"]):hover { background: var(--alt); border-color: var(--line-2); color: var(--ink); }
	.pk2bd .pk2bd-btn--danger:hover, .pk2bd-modal .pk2bd-btn--danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
	.pk2bd .pk2bd-btn--wa-o:hover, .pk2bd-modal .pk2bd-btn--wa-o:hover { background: var(--good-soft); border-color: var(--wa); color: var(--wa); }
	.pk2bd .pk2bd-btn--primary:hover, .pk2bd-modal .pk2bd-btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
	.pk2bd .pk2bd-btn--wa:hover, .pk2bd-modal .pk2bd-btn--wa:hover { background: var(--wa-2); border-color: var(--wa-2); color: #fff; }
	.pk2bd .pk2bd-btn--red:hover, .pk2bd-modal .pk2bd-btn--red:hover { background: #a32016; border-color: #a32016; color: #fff; }
	.pk2bd .pk2bd-switch__btn:not(.is-active):hover, .pk2bd-modal .pk2bd-switch__btn:not(.is-active):hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
	.pk2bd .pk2bd-tab:not(.is-active):hover, .pk2bd-modal .pk2bd-tab:not(.is-active):hover { border-color: var(--line-2); background: var(--alt); color: var(--ink); }
	.pk2bd .pk2bd-tabs--auth .pk2bd-tab:not(.is-active):hover, .pk2bd-modal .pk2bd-tabs--auth .pk2bd-tab:not(.is-active):hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
	.pk2bd .pk2bd-stat:not(.is-active):hover, .pk2bd-modal .pk2bd-stat:not(.is-active):hover { border-color: var(--line-2); background: var(--alt); color: var(--ink); }
	.pk2bd .pk2bd-seg button:not(.is-on):hover, .pk2bd-modal .pk2bd-seg button:not(.is-on):hover { background: var(--bg); color: var(--ink); }
	.pk2bd .pk2bd-icon-btn:hover, .pk2bd-modal .pk2bd-icon-btn:hover { background: var(--alt); color: var(--ink); }
	.pk2bd .pk2bd-icon-btn--danger:hover, .pk2bd-modal .pk2bd-icon-btn--danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
	.pk2bd .pk2bd-chip:not(.is-active):hover, .pk2bd-modal .pk2bd-chip:not(.is-active):hover { background: var(--alt); color: var(--ink); }
	.pk2bd .pk2bd-mini:hover, .pk2bd-modal .pk2bd-mini:hover { background: var(--alt); color: var(--ink); }
	.pk2bd .pk2bd-modal__x:hover, .pk2bd-modal .pk2bd-modal__x:hover { background: var(--line); color: var(--ink); }
	.pk2bd-modal.pk2bd-lightbox .pk2bd-modal__x:hover { background: rgba(255, 255, 255, .34); color: #fff; }
	.pk2bd .pk2bd-order__shot:not(:disabled):hover img, .pk2bd-modal .pk2bd-order__shot:not(:disabled):hover img { opacity: .9; }
	.pk2bd-drop:hover { border-color: var(--accent); }
	.pk2bd-order__info:hover .pk2bd-order__hint { text-decoration: underline; }
}
/* Focus after a tap or click keeps the button's normal colours; only the keyboard ring is added. */
.pk2bd button:focus:not(:focus-visible), .pk2bd-modal button:focus:not(:focus-visible) { outline: none; }
.pk2bd .pk2bd-btn:active, .pk2bd .pk2bd-tab:active, .pk2bd .pk2bd-chip:active, .pk2bd .pk2bd-seg button:active, .pk2bd .pk2bd-icon-btn:active, .pk2bd .pk2bd-switch__btn:active, .pk2bd-modal .pk2bd-btn:active, .pk2bd-modal .pk2bd-tab:active, .pk2bd-modal .pk2bd-chip:active, .pk2bd-modal .pk2bd-seg button:active, .pk2bd-modal .pk2bd-icon-btn:active, .pk2bd-modal .pk2bd-switch__btn:active { opacity: .8; }

/* ---------- tablet ---------- */
@media (max-width: 900px) {
	.pk2bd-cust { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pk2bd-cust__actions { flex-direction: row; flex-wrap: wrap; }
	.pk2bd-auth { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
	.pk2bd { font-size: 14.5px; }
	.pk2bd-card { padding: 18px; }
	.pk2bd-grid { grid-template-columns: minmax(0, 1fr); }
	.pk2bd-tabs { gap: 6px; }
	.pk2bd .pk2bd-tab, .pk2bd-modal .pk2bd-tab { padding: 10px; }
	.pk2bd-tab__label { font-size: 11.5px; }
	.pk2bd-tab__amount { font-size: 15px; }
	.pk2bd-stats { grid-template-columns: 1fr 1fr; }
	.pk2bd-stat--who { grid-column: 1 / -1; }
	.pk2bd-stat strong { font-size: 19px; }
	.pk2bd-order { grid-template-columns: 88px minmax(0, 1fr); }
	.pk2bd-order__body { padding: 10px 12px; }
	.pk2bd-order__price { font-size: 17px; }
	.pk2bd-meta { grid-template-columns: 1fr 1fr; }
	.pk2bd-meta div:nth-child(3) { grid-column: 1 / -1; }
	.pk2bd-controls { padding: 8px 10px; gap: 6px; }
	.pk2bd-controls .pk2bd-select, .pk2bd-controls .pk2bd-seg { flex: 1 1 120px; }
	.pk2bd-controls .pk2bd-actions { flex: 1 1 100%; }
	.pk2bd .pk2bd-icon-btn { padding: 6px 8px; font-size: 13px; }
	.pk2bd-switch { display: flex; width: 100%; }
	.pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { flex: 1 0 auto; justify-content: center; padding: 8px 12px; }
	.pk2bd-modal { align-items: flex-end; padding: 0; }
	.pk2bd-modal__box { border-radius: 20px 20px 0 0; max-height: 92vh; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
	.pk2bd-modal.pk2bd-lightbox .pk2bd-modal__box { border-radius: 0; max-height: none; }
	.pk2bd-cust__creds { grid-template-columns: minmax(0, 1fr); }
	.pk2bd-stmt-actions .pk2bd-btn { flex: 1 1 100%; }
	.pk2bd-stmt-actions > :first-child { margin-right: 0; }
	.pk2bd-brand__text strong { font-size: 19px; }
	.pk2bd .pk2bd-tabs--auth .pk2bd-tab, .pk2bd-modal .pk2bd-tabs--auth .pk2bd-tab { font-size: 14px; padding: 9px 6px; }
}

/* ---------- order controls: Status, Paid and Unpaid as three boxes of the same size ----------
   Three equal columns: the status picker takes one, the Paid/Unpaid pair spans two with the
   same gap inside, so all three boxes are exactly the same size. On wider screens Edit/Delete sit at the end of the same row. */
.pk2bd-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.pk2bd-controls .pk2bd-seg { grid-column: span 2; }
.pk2bd-controls .pk2bd-select, .pk2bd-controls .pk2bd-seg, .pk2bd-controls .pk2bd-actions { flex: none; min-width: 0; }
.pk2bd-controls .pk2bd-select:only-child { grid-column: 1 / -1; }
.pk2bd-controls .pk2bd-actions { grid-column: 1 / -1; }
.pk2bd-controls .pk2bd-seg { background: transparent; padding: 0; gap: 8px; border-radius: 0; }
.pk2bd .pk2bd-controls .pk2bd-select select, .pk2bd-modal .pk2bd-controls .pk2bd-select select { height: 44px; min-height: 44px; padding: 16px 28px 4px 12px; border-radius: 10px; }
.pk2bd .pk2bd-controls .pk2bd-seg button, .pk2bd-modal .pk2bd-controls .pk2bd-seg button { height: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); font-size: 14.5px; }
.pk2bd .pk2bd-controls .pk2bd-seg button.is-on.is-paid, .pk2bd-modal .pk2bd-controls .pk2bd-seg button.is-on.is-paid { background: var(--good); border-color: var(--good); color: #fff; }
.pk2bd .pk2bd-controls .pk2bd-seg button.is-on.is-unpaid, .pk2bd-modal .pk2bd-controls .pk2bd-seg button.is-on.is-unpaid { background: var(--bad); border-color: var(--bad); color: #fff; }
@media (min-width: 760px) {
	.pk2bd-controls { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
	.pk2bd-controls .pk2bd-actions { grid-column: auto; }
	.pk2bd .pk2bd-controls .pk2bd-icon-btn { height: 44px; }
}

/* The open list keeps plain colours so every choice stays readable. */
.pk2bd .pk2bd-select select option, .pk2bd-modal .pk2bd-select select option { background: #fff; color: #1d1d1f; }

/* Customer view: status and payment labels the same size. */
.pk2bd-order__head .pk2bd-badge, .pk2bd-order__head .pk2bd-pay { min-width: 84px; justify-content: center; padding: 4px 10px; }

/* ---------- customers: names only ---------- */
.pk2bd .pk2bd-cust-row, .pk2bd-modal .pk2bd-cust-row {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 60px;
	padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font-size: 16px;
}
.pk2bd-cust-row__name { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk2bd-cust-row.is-due .pk2bd-cust-row__name { color: var(--bad); }
.pk2bd .pk2bd-cust-row.is-pending, .pk2bd-modal .pk2bd-cust-row.is-pending { border-color: #f0b47c; background: var(--s-pending-bg); }
.pk2bd-cust-row__go { margin-left: auto; font-size: 22px; line-height: 1; color: var(--ink-2); }
.pk2bd-list .pk2bd-cust-row + .pk2bd-cust-row { margin-top: 0; }
@media (hover: hover) {
	.pk2bd .pk2bd-cust-row:hover { background: var(--alt); border-color: var(--line-2); color: var(--ink); }
}

/* details popup */
.pk2bd-cust-detail__head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding-right: 36px; }
.pk2bd-cust-detail__head .pk2bd-h { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk2bd-cust-detail__head .pk2bd-sub { margin: 2px 0 0; }
.pk2bd-modal .pk2bd-h.pk2bd-due { color: var(--bad); }
.pk2bd-creds-box--copy div { align-items: center; }
.pk2bd-creds-box--copy b { flex: 1; min-width: 0; }
.pk2bd-cust-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pk2bd-cust-detail__actions .pk2bd-btn { flex: 1 1 auto; }

/* full-screen panel: one customer's orders */
.pk2bd.pk2bd-fullview { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9000; max-width: none; margin: 0; padding: 0 0 40px; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.admin-bar .pk2bd.pk2bd-fullview { top: 32px; }
@media (max-width: 782px) { body.admin-bar .pk2bd.pk2bd-fullview { top: 46px; } }
.pk2bd-fullview__in { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.pk2bd-fullview__bar { position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, .95); border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pk2bd-fullview__bar .pk2bd-fullview__in { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.pk2bd-fullview__title { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pk2bd-fullview__title strong { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk2bd-fullview__title small { font-size: 13.5px; color: var(--ink-2); }

/* Phone: all tabs visible (All orders, New order, Customers, Team), wrapping onto a second line if needed. */
@media (max-width: 600px) {
	.pk2bd-switch { flex-wrap: wrap; overflow: visible; }
	.pk2bd .pk2bd-switch__btn { flex: 1 1 auto; padding: 8px 8px; font-size: 14px; }
}

/* Status gets more room than Paid / Unpaid, so every status name fits; no outline or flash when tapped. */
.pk2bd-controls { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 760px) { .pk2bd-controls { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; } }
.pk2bd .pk2bd-controls .pk2bd-select select, .pk2bd-modal .pk2bd-controls .pk2bd-select select {
	padding-left: 14px; padding-right: 26px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
	background-position: right 9px center; -webkit-tap-highlight-color: transparent; transition: none;
}
.pk2bd-controls .pk2bd-select span { left: 14px; }
.pk2bd .pk2bd-controls .pk2bd-select select:focus, .pk2bd .pk2bd-controls .pk2bd-select select:focus-visible, .pk2bd .pk2bd-controls .pk2bd-select select:active,
.pk2bd-modal .pk2bd-controls .pk2bd-select select:focus, .pk2bd-modal .pk2bd-controls .pk2bd-select select:focus-visible { outline: none; box-shadow: none; opacity: 1; }

.pk2bd-topbar__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- order cards: one fixed design on phone, tablet, computer and app ----------
   A 96px square thumbnail (filled and cropped, never stretched) beside the details:
   order number and price / date and from / customer (team only) / View timeline / status labels.
   Cards keep the same size everywhere; wider screens simply fit more of them side by side. */
.pk2bd-dashboard .pk2bd-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .pk2bd-dashboard .pk2bd-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
.pk2bd-dashboard .pk2bd-list > .pk2bd-empty { grid-column: 1 / -1; }
.pk2bd-order { display: flex; flex-direction: column; grid-template-columns: none; }
.pk2bd-order__main { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.pk2bd .pk2bd-order__shot, .pk2bd-modal .pk2bd-order__shot { flex: none; width: 96px; height: 96px; min-height: 0; align-self: flex-start; border-radius: 12px; overflow: hidden; position: relative; }
.pk2bd-order__shot img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.pk2bd-order__body { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.pk2bd-order__line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.pk2bd-order__line--top { color: var(--ink); }
.pk2bd-order__id { font-weight: 700; color: var(--ink-2); flex: none; }
.pk2bd-order__price { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pk2bd-order__from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; min-width: 0; }
.pk2bd-order__who { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk2bd-order__hint { font-size: 13px; margin-top: 1px; }
.pk2bd-order__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pk2bd-order__badges .pk2bd-badge, .pk2bd-order__badges .pk2bd-pay { min-width: 78px; justify-content: center; }
.pk2bd-controls { padding: 10px 12px; }
/* Controls: Status / Paid / Unpaid on one row, Edit / Delete photo / Delete under it, on every screen. */
@media (min-width: 760px) {
	.pk2bd-controls { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
	.pk2bd-controls .pk2bd-actions { grid-column: 1 / -1; }
	.pk2bd .pk2bd-controls .pk2bd-icon-btn { height: auto; }
}

/* ---------- customers ---------- */
.pk2bd-cust-row.is-due .pk2bd-cust-row__name, .pk2bd-modal .pk2bd-h.pk2bd-due { color: var(--accent); }
.pk2bd-cust-head__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pk2bd .pk2bd-linkbtn, .pk2bd-modal .pk2bd-linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; text-align: left; }
.pk2bd-modal .pk2bd-table td:last-child { color: var(--ink); }

/* ---------- shipments ---------- */
.pk2bd-ship-head { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 18px 0 8px; }
.pk2bd .pk2bd-ship, .pk2bd-modal .pk2bd-ship {
	display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "date status go" "days days go" "meta meta go";
	align-items: center; gap: 2px 10px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink);
}
.pk2bd-ship__date { grid-area: date; font-size: 18px; font-weight: 700; }
.pk2bd-ship__status { grid-area: status; font-weight: 700; color: var(--accent); }
.pk2bd-ship.is-arrived .pk2bd-ship__status { color: var(--good); }
.pk2bd-ship__days { grid-area: days; font-size: 14px; color: var(--ink); }
.pk2bd-ship__meta { grid-area: meta; font-size: 13.5px; color: var(--ink-2); }
.pk2bd-ship__go { grid-area: go; font-size: 22px; color: var(--ink-2); text-align: right; }
.pk2bd-blue { color: var(--accent); }
.pk2bd-good { color: var(--good); }
.pk2bd-ship-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pk2bd .pk2bd-btn--good, .pk2bd-modal .pk2bd-btn--good { background: var(--good); border-color: var(--good); color: #fff; }
@media (hover: hover) {
	.pk2bd .pk2bd-ship:hover { background: var(--alt); border-color: var(--line-2); color: var(--ink); }
	.pk2bd .pk2bd-btn--good:hover { background: #166332; border-color: #166332; color: #fff; }
}
.pk2bd-pick { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.pk2bd-pick__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; margin: 0; }
.pk2bd-pick__row:last-child { border-bottom: 0; }
.pk2bd-pick__row input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); margin: 0; }
.pk2bd-pick__row img, .pk2bd-pick__noimg { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--alt); }
.pk2bd-pick__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pk2bd-pick__text small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- pull to refresh (Android app) ---------- */
.pk2bd-ptr { position: fixed; top: -44px; left: 50%; z-index: 100001; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
	background: #fff; color: #1d1d1f; font-size: 22px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transform: translate(-50%, 0); opacity: 0; pointer-events: none; transition: opacity .15s; }
.pk2bd-ptr.is-on { opacity: 1; }
.pk2bd-ptr.is-ready { background: #1d1d1f; color: #fff; }
.pk2bd-ptr.is-spinning span { display: inline-block; animation: pk2bd-spin .8s linear infinite; }
@keyframes pk2bd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pk2bd-ptr.is-spinning span { animation: none; } }

/* ---------- account deletion banner ---------- */
.pk2bd-del-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -6px 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-size: 14.5px; }
.pk2bd-note--warn { background: var(--bad-soft); color: var(--bad); margin-top: 8px; }
.pk2bd-hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

/* v4.2: thin grey frame so white pictures don't blend into the page */
.pk2bd .pk2bd-order__shot, .pk2bd-modal .pk2bd-order__shot { border: 1px solid #d2d2d7; }
.pk2bd-pick__row img, .pk2bd-pick__noimg { border: 1px solid #d2d2d7; }
.pk2bd-cust-head--end { justify-content: flex-end; }
.pk2bd-ship-dates { display: block; margin-top: 2px; }
.pk2bd-ship-del { margin: -4px 0 14px; }
/* Account: your own details (read-only) */
.pk2bd-creds-box--me div { align-items: center; }
.pk2bd-creds-box--me b { flex: 1; min-width: 0; font-family: inherit; font-weight: 600; }
.pk2bd-creds-box--me b[data-pw] { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.pk2bd-me-note { margin-top: -8px; margin-bottom: 16px; }
.pk2bd-creds-box--me .pk2bd-me-spent { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 0 12px; }
.pk2bd-creds-box--me .pk2bd-me-spent b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
/* Pages of 50 orders */
.pk2bd-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 18px 0 6px; }
.pk2bd .pk2bd-page, .pk2bd-modal .pk2bd-page { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #d2d2d7; background: #fff; color: var(--ink); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.pk2bd .pk2bd-page.is-active, .pk2bd-modal .pk2bd-page.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pk2bd-page-gap { color: var(--ink-2); padding: 0 2px; }

/* ==========================================================================
   v4.5 tidy-up: one consistent layout for order cards and controls on every
   screen size. Later rules here win over the older ones above.
   ========================================================================== */

/* Search: the normal border only, no highlight when tapped. */
.pk2bd .pk2bd-search:focus, .pk2bd .pk2bd-search:focus-visible, .pk2bd-modal .pk2bd-search:focus, .pk2bd-modal .pk2bd-search:focus-visible { border-color: var(--line-2); box-shadow: none; outline: none; }

/* Order card: big square picture on the left, details on the right. */
.pk2bd-order__main { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px; align-items: start; }
.pk2bd .pk2bd-order__shot, .pk2bd-modal .pk2bd-order__shot { width: 112px; height: 112px; border-radius: 12px; align-self: start; }
.pk2bd-order__body { gap: 4px; }
.pk2bd-order__line { align-items: center; }
/* Date and "from" each get their own line; "from" wraps to two lines instead of being cut. */
.pk2bd-order__line:not(.pk2bd-order__line--top) { flex-direction: column; align-items: flex-start; gap: 2px; }
.pk2bd-order__from { white-space: normal; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.pk2bd-order__price { font-size: 19px; line-height: 1.2; }
.pk2bd-order__id { font-size: 14px; }
.pk2bd-order__hint { margin-top: 2px; }

/* Controls: Status | Paid | Unpaid on the first row, then Edit | Delete photo | Delete,
   all the same height and lined up in the same columns. */
.pk2bd .pk2bd-controls, .pk2bd-modal .pk2bd-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 14px; align-items: stretch; }
.pk2bd-controls .pk2bd-select { grid-column: 1; min-width: 0; }
.pk2bd-controls .pk2bd-select:only-child { grid-column: 1 / -1; }
.pk2bd-controls .pk2bd-seg { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; background: transparent; border-radius: 0; min-width: 0; }
.pk2bd-controls .pk2bd-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk2bd .pk2bd-controls .pk2bd-select select, .pk2bd-modal .pk2bd-controls .pk2bd-select select { width: 100%; height: 44px; min-height: 44px; padding: 15px 24px 3px 10px; font-size: 14px; text-overflow: ellipsis; }
.pk2bd-controls .pk2bd-select span { left: 10px; top: 5px; }
.pk2bd .pk2bd-controls .pk2bd-seg button, .pk2bd-modal .pk2bd-controls .pk2bd-seg button { height: 44px; min-height: 44px; padding: 0 6px; font-size: 14px; }
.pk2bd .pk2bd-controls .pk2bd-icon-btn, .pk2bd-modal .pk2bd-controls .pk2bd-icon-btn { height: 40px; min-height: 40px; padding: 0 6px; font-size: 13.5px; border-radius: 10px; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 760px) {
	.pk2bd .pk2bd-controls, .pk2bd-modal .pk2bd-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pk2bd-controls .pk2bd-actions { grid-column: 1 / -1; }
}

/* Page sides and the top boxes on phones. */
@media (max-width: 600px) {
	.pks-main--app { padding-top: 20px; }
	body .pks-app-wrap { padding-top: 20px; padding-left: 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: 12px; padding-right: max(12px, env(safe-area-inset-right, 0px)); }
	body .pks-main.pks-main--app > .pk2bd { padding-left: 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: 12px; padding-right: max(12px, env(safe-area-inset-right, 0px)); }
	.pk2bd .pk2bd-switch, .pk2bd-modal .pk2bd-switch { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; }
	.pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { flex: 1 1 auto; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; min-height: 38px; padding: 6px 10px; font-size: 14px; }
}
@media (max-width: 380px) {
	.pk2bd-order__main { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
	.pk2bd .pk2bd-order__shot, .pk2bd-modal .pk2bd-order__shot { width: 96px; height: 96px; }
	.pk2bd .pk2bd-controls, .pk2bd-modal .pk2bd-controls { padding: 10px 12px; gap: 6px; }
	.pk2bd-controls .pk2bd-seg, .pk2bd-controls .pk2bd-actions { gap: 6px; }
	.pk2bd .pk2bd-controls .pk2bd-icon-btn, .pk2bd-modal .pk2bd-controls .pk2bd-icon-btn { font-size: 12.5px; padding: 0 2px; letter-spacing: -.01em; }
	.pk2bd .pk2bd-tab, .pk2bd-modal .pk2bd-tab { padding: 8px; }
	.pk2bd-tab__label { font-size: 11px; }
	.pk2bd-tab__amount { font-size: 13.5px; }
	.pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { padding: 6px 8px; font-size: 13.5px; }
}

/* Android app download (login screen, Android browsers only). */
.pk2bd .pk2bd-apk { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); text-decoration: none; }
.pk2bd-apk img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.pk2bd-apk span:not(.pk2bd-apk__go) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pk2bd-apk small { color: var(--ink-2); font-size: 13px; }
.pk2bd-apk__go { flex: none; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; }

/* Full-width rows never stick out of the page. */
.pk2bd .pk2bd-cust-row, .pk2bd-modal .pk2bd-cust-row, .pk2bd .pk2bd-ship, .pk2bd-modal .pk2bd-ship, .pk2bd-pick__row, .pk2bd .pk2bd-apk, .pk2bd-order, .pk2bd-controls * { box-sizing: border-box; max-width: 100%; }

/* Customers header on phones: Requests / Active / Blocked as three equal buttons,
   then Who owes and + Add customer side by side. */
@media (max-width: 600px) {
	.pk2bd-cust-head { flex-direction: column; align-items: stretch; gap: 10px; }
	.pk2bd-cust-head .pk2bd-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.pk2bd-cust-head .pk2bd-chip { width: 100%; padding: 7px 6px; text-align: center; white-space: nowrap; }
	.pk2bd-cust-head__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.pk2bd-cust-head__btns .pk2bd-btn { width: 100%; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
	.pk2bd-cust-head--end .pk2bd-btn { width: 100%; }
	.pk2bd-ship-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
.pk2bd-list { grid-template-columns: minmax(0, 1fr); }
.pk2bd .pk2bd-cust-row, .pk2bd-modal .pk2bd-cust-row { min-width: 0; }
@media (min-width: 760px) { .pk2bd-dashboard .pk2bd-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }

/* The picture runs the full height of the details, so its bottom lines up with the
   status labels (customers) or "View timeline" (team). */
.pk2bd-order__main { align-items: stretch; }
.pk2bd .pk2bd-order__shot, .pk2bd-modal .pk2bd-order__shot { align-self: stretch; height: auto; min-height: 112px; }
.pk2bd-order__badges { margin-top: auto; padding-top: 6px; }
@media (max-width: 380px) { .pk2bd .pk2bd-order__shot, .pk2bd-modal .pk2bd-order__shot { height: auto; min-height: 96px; } }

/* v4.6: Status | Paid | Unpaid always on one line; Edit | Delete photo | Delete under the same columns. */
.pk2bd .pk2bd-controls, .pk2bd-modal .pk2bd-controls { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.pk2bd-controls .pk2bd-seg { grid-column: 2 / 4; }
.pk2bd-controls .pk2bd-actions { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 760px) { .pk2bd .pk2bd-controls, .pk2bd-modal .pk2bd-controls { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 380px) {
	.pk2bd .pk2bd-controls .pk2bd-select select, .pk2bd-modal .pk2bd-controls .pk2bd-select select { font-size: 13px; padding-left: 8px; padding-right: 18px; background-position: right 6px center; }
	.pk2bd-controls .pk2bd-select span { left: 8px; }
	.pk2bd .pk2bd-controls .pk2bd-seg button, .pk2bd-modal .pk2bd-controls .pk2bd-seg button { font-size: 13px; padding: 0 2px; }
}

/* Main tabs (Orders · Customers · Shipment Tracker · Team): one white bar, the chosen tab solid dark. */
.pk2bd .pk2bd-switch, .pk2bd-modal .pk2bd-switch { background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 4px; gap: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { color: var(--ink-2); border-radius: 9px; }
.pk2bd .pk2bd-switch__btn.is-active, .pk2bd-modal .pk2bd-switch__btn.is-active { background: var(--ink); color: #fff; box-shadow: none; }
@media (hover: hover) { .pk2bd .pk2bd-switch__btn:not(.is-active):hover, .pk2bd-modal .pk2bd-switch__btn:not(.is-active):hover { background: var(--alt); color: var(--ink); } }
.pk2bd-controls .pk2bd-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { white-space: nowrap; } }
@media (max-width: 380px) { .pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { white-space: normal; } }
@media (max-width: 600px) { .pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { padding: 7px 8px; font-size: 13.5px; } .pk2bd .pk2bd-switch, .pk2bd-modal .pk2bd-switch { gap: 2px; padding: 3px; } }
/* Moderators: just "Mark received" (or the status once done). */
.pk2bd .pk2bd-controls--mod, .pk2bd-modal .pk2bd-controls--mod { display: block; }
.pk2bd-controls--mod .pk2bd-btn { width: 100%; min-height: 44px; }
.pk2bd-controls--mod .pk2bd-badge { display: inline-flex; min-width: 96px; justify-content: center; }
/* Account and Log out always side by side; a long name wraps on the left instead. */
.pk2bd-topbar__actions { flex-wrap: nowrap; flex: none; }
.pk2bd-topbar .pk2bd-brand { min-width: 0; flex: 1 1 auto; }
@media (max-width: 380px) { .pk2bd-topbar__actions .pk2bd-btn { padding-left: 12px; padding-right: 12px; } }

/* v4.8: light, calm colours for chosen tabs and filters (no black). */
.pk2bd .pk2bd-switch, .pk2bd-modal .pk2bd-switch { background: #eef3fa; border: 1px solid #dde6f2; box-shadow: none; }
.pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { color: #5b6b80; }
.pk2bd .pk2bd-switch__btn.is-active, .pk2bd-modal .pk2bd-switch__btn.is-active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(30, 70, 130, .12); }
@media (hover: hover) { .pk2bd .pk2bd-switch__btn:not(.is-active):hover, .pk2bd-modal .pk2bd-switch__btn:not(.is-active):hover { background: rgba(255, 255, 255, .6); color: var(--ink); } }
.pk2bd .pk2bd-chip.is-active, .pk2bd-modal .pk2bd-chip.is-active { background: var(--accent-soft); border-color: #b9d5f5; color: var(--accent); }
.pk2bd .pk2bd-page.is-active, .pk2bd-modal .pk2bd-page.is-active { background: var(--accent-soft); border-color: #b9d5f5; color: var(--accent); }
.pk2bd-mod-hint { margin-left: 10px; font-size: 13px; color: var(--ink-2); }
/* Moderator totals and the chosen box (soft blue, no black). */
.pk2bd .pk2bd-stat.is-active, .pk2bd-modal .pk2bd-stat.is-active { border-color: #b9d5f5; background: var(--accent-soft); }
.pk2bd-stats--mod { grid-template-columns: 1fr 1fr; }
.pk2bd-stat--received strong { color: var(--s-received); }
.pk2bd-stat--shipped strong { color: var(--s-shipped); }
.pk2bd-check { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-weight: 600; cursor: pointer; }
.pk2bd-check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.pk2bd-closed { margin: -4px 0 14px; }
/* Tapping an order opens its timeline with no flash, outline or shading. */
.pk2bd, .pk2bd-modal, .pk2bd-fullview { -webkit-tap-highlight-color: transparent; }
.pk2bd-order__body, .pk2bd-order__body:focus, .pk2bd-order__body:active, .pk2bd-order__body:focus-visible { outline: none; background: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.pk2bd .pk2bd-order__shot:not(:disabled):hover img, .pk2bd-modal .pk2bd-order__shot:not(:disabled):hover img { opacity: 1; }
.pk2bd-order__shot { -webkit-tap-highlight-color: transparent; }
.pk2bd .pk2bd-formback { margin: -4px 0 12px; }
.pk2bd-done { text-align: center; padding: 12px 0 4px; }
.pk2bd-done__tick { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--good-soft, #e8f5ec); color: var(--good); font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.pk2bd-done__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (max-width: 380px) { .pk2bd-done__btns { grid-template-columns: 1fr; } }
.pk2bd-offline { background: #fff8e6; border: 1px solid #f3dfa8; color: #7a5300; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px; }
/* Buttons inside Pending / Delivered: one tidy row that scrolls sideways if it doesn't fit. */
.pk2bd-chips.pk2bd-closed { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pk2bd-chips.pk2bd-closed::-webkit-scrollbar { display: none; }
.pk2bd-closed .pk2bd-chip { flex: none; white-space: nowrap; }
@media (max-width: 600px) {
	.pk2bd-chips.pk2bd-closed { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; overflow: visible; }
	.pk2bd .pk2bd-closed .pk2bd-chip, .pk2bd-modal .pk2bd-closed .pk2bd-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 2px; min-height: 48px; border-radius: 12px; font-size: 12.5px; line-height: 1.2; min-width: 0; }
	.pk2bd-closed .pk2bd-chip em { margin: 0; font-size: 13px; font-weight: 700; opacity: .8; }
}
@media (max-width: 380px) { .pk2bd .pk2bd-closed .pk2bd-chip, .pk2bd-modal .pk2bd-closed .pk2bd-chip { font-size: 11.5px; letter-spacing: -.01em; } .pk2bd-chips.pk2bd-closed { gap: 4px; } }

/* ==========================================================================
   v5.6: apple.com neutral colours. White, greys and a rich near-black; no blue.
   (Status labels keep their own colours so statuses stay easy to tell apart.)
   ========================================================================== */
.pk2bd, .pk2bd-modal, .pk2bd-fullview, .pk2bd-toast { --accent: #1d1d1f; --accent-2: #000; --accent-soft: #f5f5f7; --link: #424245; }
/* Segmented tabs (Orders · Customers · …, Log in / Request): grey track, chosen tab a white pill. */
.pk2bd .pk2bd-switch, .pk2bd-modal .pk2bd-switch, .pk2bd .pk2bd-tabs--auth, .pk2bd-modal .pk2bd-tabs--auth { background: #e8e8ed; border: 0; box-shadow: none; }
.pk2bd .pk2bd-switch__btn, .pk2bd-modal .pk2bd-switch__btn { color: #424245; }
.pk2bd .pk2bd-switch__btn.is-active, .pk2bd-modal .pk2bd-switch__btn.is-active,
.pk2bd .pk2bd-tabs--auth .pk2bd-tab.is-active, .pk2bd-modal .pk2bd-tabs--auth .pk2bd-tab.is-active { background: #fff; border: 0; color: #1d1d1f; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
@media (hover: hover) { .pk2bd .pk2bd-switch__btn:not(.is-active):hover, .pk2bd-modal .pk2bd-switch__btn:not(.is-active):hover { background: rgba(255, 255, 255, .55); color: #1d1d1f; } }
/* Chosen box / button: white with a dark grey outline. */
.pk2bd .pk2bd-tabs:not(.pk2bd-tabs--auth) .pk2bd-tab.is-active, .pk2bd-modal .pk2bd-tabs:not(.pk2bd-tabs--auth) .pk2bd-tab.is-active,
.pk2bd .pk2bd-stat.is-active, .pk2bd-modal .pk2bd-stat.is-active,
.pk2bd .pk2bd-chip.is-active, .pk2bd-modal .pk2bd-chip.is-active,
.pk2bd .pk2bd-page.is-active, .pk2bd-modal .pk2bd-page.is-active { background: #fff; border-color: #424245; box-shadow: inset 0 0 0 1px #424245; color: #1d1d1f; }
.pk2bd .pk2bd-tab.is-active .pk2bd-tab__label, .pk2bd .pk2bd-tab.is-active .pk2bd-tab__label em { color: #1d1d1f; }
/* Links: rich grey. */
.pk2bd-order__hint, .pk2bd .pk2bd-linkbtn, .pk2bd-modal .pk2bd-linkbtn, .pk2bd a:not(.pk2bd-btn):not(.pk2bd-apk), .pk2bd-modal a:not(.pk2bd-btn) { color: #424245; }
.pk2bd-order__hint { font-weight: 600; }
.pk2bd-role--admin { background: #f5f5f7; color: #1d1d1f; }
.pk2bd-filter-note { color: #6e6e73; }
.pk2bd .pk2bd-apk__go { background: #1d1d1f; }

/* v5.7 */
/* Selected box / button: one thin dark grey line. */
.pk2bd .pk2bd-tabs:not(.pk2bd-tabs--auth) .pk2bd-tab.is-active, .pk2bd-modal .pk2bd-tabs:not(.pk2bd-tabs--auth) .pk2bd-tab.is-active,
.pk2bd .pk2bd-stat.is-active, .pk2bd-modal .pk2bd-stat.is-active,
.pk2bd .pk2bd-chip.is-active, .pk2bd-modal .pk2bd-chip.is-active,
.pk2bd .pk2bd-page.is-active, .pk2bd-modal .pk2bd-page.is-active { border: 1px solid #6e6e73; box-shadow: none; }
/* Customers who owe money: name in blue. */
.pk2bd .pk2bd-cust-row.is-due .pk2bd-cust-row__name, .pk2bd-modal .pk2bd-h.pk2bd-due, .pk2bd-cust-row.is-due .pk2bd-cust-row__name { color: #0071e3; }
/* Green for good news, red for money owed or orders that didn't go through. */
.pk2bd-tab[data-tab=delivered] .pk2bd-tab__amount { color: var(--good); }
.pk2bd .pk2bd-chip[data-closed=cancelled], .pk2bd .pk2bd-chip[data-closed=refunded],
.pk2bd .pk2bd-chip[data-closed=cancelled] em, .pk2bd .pk2bd-chip[data-closed=refunded] em { color: var(--bad); }
.pk2bd-stat--paid strong { color: var(--good); }
.pk2bd-stat--unpaid strong { color: var(--bad); }
.pk2bd .pk2bd-due, .pk2bd-modal .pk2bd-due:not(.pk2bd-h) { color: var(--bad); }
.pk2bd-me-spent b { color: var(--good); }
/* Admin: "+ Add order" right under the tabs. */
.pk2bd .pk2bd-addorder { margin: 0 0 12px; }
.pk2bd-drop--sm { min-height: 96px; }
.pk2bd-seg--pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: transparent; padding: 0; margin: 4px 0 14px; }
.pk2bd-seg--pay label { position: relative; margin: 0; cursor: pointer; }
.pk2bd-seg--pay input { position: absolute; opacity: 0; pointer-events: none; }
.pk2bd-seg--pay span { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; font-weight: 700; color: var(--ink-2); background: #fff; }
.pk2bd-seg--pay input[value=paid]:checked + span { background: var(--good); border-color: var(--good); color: #fff; }
.pk2bd-seg--pay input[value=unpaid]:checked + span { background: var(--bad); border-color: var(--bad); color: #fff; }
/* Paid / Unpaid (and moderators' Received / Shipped) boxes: compact. Label and order count on one
   line, the amount under it, with less space above and below. */
.pk2bd .pk2bd-stat, .pk2bd-modal .pk2bd-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; row-gap: 0; padding: 8px 12px; border-radius: 14px; }
.pk2bd-stat span { grid-column: 1; grid-row: 1; font-size: 12.5px; line-height: 1.3; }
.pk2bd-stat small { grid-column: 2; grid-row: 1; font-size: 11.5px; line-height: 1.3; white-space: nowrap; }
.pk2bd-stat strong { grid-column: 1 / -1; grid-row: 2; font-size: 19px; line-height: 1.25; }
.pk2bd-stats { margin-bottom: 12px; }
.pk2bd .pk2bd-addorder { margin-top: -6px; }