/* Category chooser (2026-10-04) - search + icon tiles instead of a tiny box of check-boxes / a long drop-down.
   Used by the public login / register pop-up (multi choice: <input type="checkbox" name="category_ids[]">) and - single choice - by the seller registration. The inputs stay the real form fields,
   so everything works without JavaScript; assets/js/bitzo-catpicker.js only adds search, the counter, "Clear" and the highlight fallback for old browsers.
   Colours follow the brand (Admin -> Branding) through --bz-* / --bitzo-* with fallbacks. */
.cp-field, .cp { --cp-primary: var(--bz-primary, var(--bitzo-primary, #5B0C9A)); --cp-primary-50: var(--bz-primary-50, var(--bitzo-primary-tint, #F4EEFB)); --cp-on: var(--bz-on-primary, #fff); --cp-ink: var(--bz-ink, #1B1721); --cp-muted: var(--bz-muted, #6B6675); --cp-line: var(--bz-line, #E5E2EB); }

.cp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cp-head label { margin: 0; }
.cp-head .opt, .cp-field label .opt { font-weight: 400; color: var(--cp-muted); }
.cp-count { flex: none; padding: 2px 10px; border-radius: 999px; background: #F3F4F8; color: var(--cp-muted); font-size: 11.5px; font-weight: 600; line-height: 1.7; transition: background .15s, color .15s; }
.cp-count.has { background: var(--cp-primary-50); color: var(--bitzo-primary-text, var(--cp-ink)); }
.cp-help { margin: 2px 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--cp-muted); }

.cp { border: 1.5px solid var(--cp-line); border-radius: 16px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.cp:focus-within { border-color: var(--cp-primary); box-shadow: 0 0 0 4px rgba(var(--bz-primary-rgb, var(--bitzo-primary-rgb, 91, 12, 154)), .12); }
.cp-search { display: flex; align-items: center; gap: 9px; padding: 0 12px; border-bottom: 1px solid var(--cp-line); background: #FAFAFC; }
.cp-search > i { color: #9A95A6; font-size: 13px; }
.cp-search input[type="search"] { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; font-size: 14px !important; letter-spacing: normal !important; text-align: left !important; color: var(--cp-ink); -webkit-appearance: none; appearance: none; }
.cp-search input::placeholder { color: #A39DAE; }
.cp-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.cp-clear { flex: none; border: 0; background: none; padding: 4px 6px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--bitzo-primary-text, var(--cp-primary)); cursor: pointer; }
.cp-clear:hover { background: var(--cp-primary-50); }
.cp-clear[hidden] { display: none; }

.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; max-height: 272px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #D5D0DD transparent; }
.cp-tile { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 9px; min-height: 54px; padding: 8px 10px; margin: 0; border: 1.5px solid var(--cp-line); border-radius: 13px; background: #fff; cursor: pointer; text-align: left; transition: border-color .14s, background .14s, transform .14s, box-shadow .14s; }
.cp-tile[hidden] { display: none; }
.cp-tile:hover { border-color: #CFC8DB; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(27, 23, 33, .07); }
.cp-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cp-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--cp-bg, #EEF2FF); color: var(--cp-fg, #4F46E5); }
.cp-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--cp-ink); }
.cp-ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #D5D0DD; display: flex; align-items: center; justify-content: center; font-size: 9px; color: transparent; background: #fff; transition: background .14s, border-color .14s, color .14s; }
.cp-tile.is-on, .cp-tile:has(input:checked) { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.cp-tile.is-on .cp-ck, .cp-tile:has(input:checked) .cp-ck { background: var(--cp-primary); border-color: var(--cp-primary); color: var(--cp-on); }
.cp-tile:has(input:focus-visible) { outline: 2px solid var(--cp-primary); outline-offset: 1px; }
.cp-empty { padding: 22px 16px 24px; text-align: center; font-size: 13px; color: var(--cp-muted); }
.cp-empty[hidden] { display: none; }

/* one tone per category (stable: id % 7) */
.cp-tile.t0 { --cp-bg: #E8F0FF; --cp-fg: #1D4ED8; }
.cp-tile.t1 { --cp-bg: #E6F6EC; --cp-fg: #16A34A; }
.cp-tile.t2 { --cp-bg: #F1EAFE; --cp-fg: #7C3AED; }
.cp-tile.t3 { --cp-bg: #FFF0E3; --cp-fg: #EA580C; }
.cp-tile.t4 { --cp-bg: #FDE9F2; --cp-fg: #DB2777; }
.cp-tile.t5 { --cp-bg: #E0F5F2; --cp-fg: #0D9488; }
.cp-tile.t6 { --cp-bg: #FFF4D6; --cp-fg: #B45309; }

@media (max-width: 420px) {
	.cp-grid { grid-template-columns: minmax(0, 1fr); max-height: 252px; }
}
@media (prefers-reduced-motion: reduce) { .cp, .cp-tile, .cp-ck, .cp-count { transition: none; } .cp-tile:hover { transform: none; } }

/* the tiles are <label>s: a form's generic "label" rules (display:block, margin, font ...) must not win over them */
.cp .cp-tile, body.bz-site .bitzo-auth-field .cp .cp-tile, body.bz-site .bz-am .bitzo-auth-field .cp .cp-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 9px; margin: 0; padding: 8px 10px; font-size: inherit; font-weight: inherit; line-height: normal; color: inherit; text-align: left; }
.cp .cp-tile[hidden], body.bz-site .bitzo-auth-field .cp .cp-tile[hidden] { display: none; }

/* ---------- single choice (seller registration): category tiles -> chosen bar -> subcategory chips ---------- */
.cpx { position: relative; --cp-primary: var(--bz-primary, var(--bitzo-primary, #5B0C9A)); --cp-primary-50: var(--bz-primary-50, var(--bitzo-primary-tint, #F4EEFB)); --cp-on: var(--bz-on-primary, #fff); --cp-ink: var(--bz-ink, #1B1721); --cp-muted: var(--bz-muted, #6B6675); --cp-line: var(--bz-line, #E5E2EB); }
.cpx:not(.is-on) .cp-ui { display: none; }
.cpx.is-on .cp-native { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.cpx .cp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 330px; }
.cpx .cp-tile { width: 100%; font-family: inherit; }
.cpx .cp-tile .cp-ck { display: none; }
.cpx .cp-tile { grid-template-columns: 40px minmax(0, 1fr); }
.cpx .cp-tile .cp-ic { width: 40px; height: 40px; font-size: 16px; }
.cpx .cp-tile .cp-nm { font-size: 13px; }

.cp-picked { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border: 1.5px solid var(--cp-primary); border-radius: 16px; background: var(--cp-primary-50); }
.cp-picked[hidden] { display: none; }
.cp-picked .cp-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--cp-bg, #EEF2FF); color: var(--cp-fg, #4F46E5); }
.cp-picked .cp-pt { flex: 1; min-width: 0; }
.cp-picked .cp-pt b { display: block; font-size: 15.5px; font-weight: 700; color: var(--cp-ink); }
.cp-picked .cp-pt small { display: block; margin-top: 2px; font-size: 12.8px; line-height: 1.45; color: var(--cp-muted); overflow-wrap: anywhere; }
.cp-picked .cp-change { flex: none; border: 1.5px solid var(--cp-line); border-radius: 11px; background: #fff; padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 600; color: var(--cp-ink); cursor: pointer; }
.cp-picked .cp-change:hover { border-color: var(--cp-primary); }
.cp-step { margin-top: 20px; }
.cp-step[hidden] { display: none; }
.cp-step-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 9px; }
.cp-step-h b { font-size: 14px; font-weight: 600; color: var(--cp-ink); }
.cp-step-h small { font-size: 12.5px; color: var(--cp-muted); }
.cp-chipsearch { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 0 12px; border: 1.5px solid var(--cp-line); border-radius: 12px; background: #FAFAFC; }
.cp-chipsearch[hidden] { display: none; }
.cp-chipsearch > i { color: #9A95A6; font-size: 13px; }
.cp-chipsearch input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; font-size: 14px; outline: 0; color: var(--cp-ink); }
.cp-chipsearch:focus-within { border-color: var(--cp-primary); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 216px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; scrollbar-width: thin; }
.cp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1.5px solid var(--cp-line); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--cp-ink); cursor: pointer; transition: border-color .14s, background .14s; }
.cp-chip[hidden] { display: none; }
.cp-chip:hover { border-color: #CFC8DB; }
.cp-chip i { display: none; font-size: 11px; color: var(--bitzo-primary-text, var(--cp-primary)); }
.cp-chip[aria-pressed="true"] { border-color: var(--cp-primary); background: var(--cp-primary-50); font-weight: 600; }
.cp-chip[aria-pressed="true"] i { display: inline; }
.cp-chip:focus-visible, .cpx .cp-tile:focus-visible { outline: 2px solid var(--cp-primary); outline-offset: 1px; }
.cp-none { font-size: 13px; color: var(--cp-muted); }
.cp-err { margin-top: 10px; font-size: 13px; color: #DC2626; }
.cp-err[hidden] { display: none; }
.cpx .cp-hint { margin: 12px 0 0; font-size: 12.8px; line-height: 1.55; color: var(--cp-muted); }
@media (max-width: 760px) { .cpx .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cpx .cp-grid { grid-template-columns: minmax(0, 1fr); max-height: 300px; } .cp-picked { flex-wrap: wrap; } }