/* Batch purchase sheet (public/js/batch-purchase.js) — "One purchase, several watches".
   The new Add Watch look: app font (var(--font-body) = Absans), navy accent, 11.5px uppercase labels, 48px rounded fields,
   pills. A wide two-column sheet on desktop (watches left; the purchase and the card charge right), a full-screen
   single column on a phone (purchase, watches, charge) with the running check + Save pinned at the bottom.
   Theme tokens only, so day / night follow. Every selector is .bp-* (nothing else on the page is touched). */

html.bp-lock { overflow: hidden; }
.bp-ov { position: fixed; inset: 0; z-index: 100040; display: none; align-items: center; justify-content: center; padding: 28px; box-sizing: border-box;
  background: color-mix(in srgb, #0b1220 48%, transparent); overscroll-behavior: contain; font-family: var(--font-body); }
.bp-ov.is-open { display: flex; }
.bp-sheet { position: relative; display: flex; flex-direction: column; width: min(1180px, 100%); height: min(900px, 100%); box-sizing: border-box;
  background: var(--bg-void); color: var(--white); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 30px 80px rgba(8, 15, 30, .35); overflow: hidden; }
.bp-sheet *, .bp-sheet *::before, .bp-sheet *::after { box-sizing: border-box; }
.bp-sheet button, .bp-sheet input { font-family: var(--font-body); }

/* header */
.bp-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 28px 16px; border-bottom: 1px solid var(--border); background: var(--bg-void); }
.bp-head-t { flex: 1; min-width: 0; }
.bp-eb { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.bp-title { margin: 2px 0 0; font-family: var(--font-body); font-size: 26px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; color: var(--white); }
.bp-sub { margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.4; }
.bp-x { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-raised); color: var(--off-white);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bp-x svg { width: 18px; height: 18px; }
.bp-x:hover { background: var(--bg-hover); }

/* body + layout */
.bp-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 20px 28px 28px; }
.bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "main top" "main bottom" "main rest"; grid-template-rows: auto auto 1fr; gap: 16px 22px; align-items: start; }
.bp-col-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bp-side-top { grid-area: top; }
.bp-side-bottom { grid-area: bottom; position: sticky; top: 0; }

/* cards */
.bp-card, .bp-w { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.bp-card-t { margin: 0 0 12px; font-family: var(--font-body); font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--white); display: flex; align-items: center; gap: 8px; }
.bp-list-h .bp-card-t { margin: 0; }
.bp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 99px; background: #1f5392; color: #fff; font-size: 12.5px; font-weight: 700; }

/* one watch */
.bp-w { transition: border-color .15s, box-shadow .15s; }
.bp-w.is-bad { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.bp-w-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bp-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, #1f5392 14%, var(--bg-void)); color: #1f5392; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.bp-w-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bp-w-name { font-size: 16px; font-weight: 700; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-w-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.bp-w-amt { flex: none; font-size: 15px; font-weight: 700; color: var(--white); }
.bp-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-void); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bp-icon svg { width: 15px; height: 15px; }
.bp-icon:hover { color: var(--red); border-color: var(--red); }

/* fields */
.bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.bp-grid-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bp-span { grid-column: 1 / -1; }
.bp-f { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bp-l { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--off-white); margin: 0; }
.bp-req { color: var(--red); }
.bp-in { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-void); color: var(--white);
  font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; }
.bp-in:focus { border-color: #1f5392; box-shadow: 0 0 0 3px color-mix(in srgb, #1f5392 18%, transparent); }
.bp-in:disabled { opacity: .55; }
.bp-in::placeholder { color: var(--muted); }
.bp-money { font-weight: 700; }
.bp-f-cost .bp-in { font-size: 17px; border-color: color-mix(in srgb, #1f5392 35%, var(--border)); }
.bp-hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.bp-sheet .qi-datepicker-trigger { min-height: 48px; border-radius: 12px; background: var(--bg-void); }
.bp-sheet .inv-contact-suggest { margin-top: 2px; }

/* pills */
.bp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-void);
  color: var(--off-white); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.bp-pill svg { width: 17px; height: 17px; }
.bp-pill:hover { border-color: #1f5392; }
.bp-pill.is-on { background: #1f5392; border-color: #1f5392; color: #fff; box-shadow: 0 1px 2px rgba(8, 15, 30, .2); }

/* toggle (runner: I don't have the serial yet) */
.bp-tog { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-void);
  color: var(--off-white); font-size: 13.5px; font-weight: 600; cursor: pointer; align-self: flex-start; }
.bp-sw { position: relative; width: 36px; height: 22px; border-radius: 99px; background: var(--border); transition: background .15s; }
.bp-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.bp-tog.is-on { border-color: #1f5392; color: #1f5392; }
.bp-tog.is-on .bp-sw { background: #1f5392; }
.bp-tog.is-on .bp-knob { transform: translateX(14px); }

/* watch footer: photos + more */
.bp-w-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.bp-op { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-void);
  color: var(--white); font-size: 14px; font-weight: 700; cursor: pointer; }
.bp-op svg { width: 16px; height: 16px; }
.bp-op:hover { border-color: #1f5392; }
.bp-files { font-size: 13px; color: var(--off-white); font-weight: 600; }
.bp-link { border: 0; background: none; padding: 4px 2px; color: #1f5392; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.bp-more { margin-left: auto; }

/* add another */
.bp-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, #1f5392 45%, var(--border));
  background: color-mix(in srgb, #1f5392 5%, transparent); color: #1f5392; font-size: 15px; font-weight: 700; cursor: pointer; }
.bp-add svg { width: 18px; height: 18px; }
.bp-add:hover { background: color-mix(in srgb, #1f5392 10%, transparent); }

/* running check */
.bp-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.35;
  background: color-mix(in srgb, #1f5392 8%, var(--bg-void)); border: 1px solid color-mix(in srgb, #1f5392 25%, var(--border)); color: var(--white); }
.bp-check-ic { flex: none; display: inline-flex; width: 22px; height: 22px; }
.bp-check-ic svg { width: 22px; height: 22px; }
.bp-check-t { flex: 1; min-width: 0; }
.bp-check-a { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.bp-check.is-ok { background: color-mix(in srgb, var(--green) 14%, var(--bg-void)); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.bp-check.is-ok .bp-check-ic { color: var(--green); }
.bp-check.is-warn { background: color-mix(in srgb, var(--amber) 14%, var(--bg-void)); border-color: color-mix(in srgb, var(--amber) 50%, var(--border)); }
.bp-check.is-warn .bp-check-ic { color: var(--amber); }
.bp-check.is-idle .bp-check-ic { color: #1f5392; }
.bp-mini { min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid #1f5392; background: var(--bg-void); color: #1f5392; font-size: 13px; font-weight: 700; cursor: pointer; }
.bp-mini:hover { background: #1f5392; color: #fff; }

/* footer */
.bp-foot { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-top: 1px solid var(--border); background: var(--bg-raised); }
.bp-foot-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bp-foot-sum { font-size: 14px; font-weight: 700; color: var(--white); }
.bp-foot-sum.is-ok { color: color-mix(in srgb, var(--green) 70%, var(--white)); }
.bp-err { font-size: 12.5px; color: var(--muted); }
.bp-err:empty { display: none; }
.bp-foot-r { display: flex; gap: 10px; flex: none; }
.bp-btn { min-height: 48px; padding: 0 22px; border-radius: 12px; font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.bp-save[disabled] { opacity: .5; cursor: not-allowed; }

/* saved */
.bp-done { max-width: 720px; margin: 0 auto; }
.bp-done-list { list-style: none; margin: 16px 0 0; padding: 0; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; }
.bp-done-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.bp-done-row:first-child { border-top: 0; }
.bp-done-n { flex: 1; min-width: 0; font-weight: 700; display: flex; flex-direction: column; }
.bp-done-sku { font-size: 13px; color: var(--muted); }
.bp-done-c { font-weight: 700; }

/* the entry link under "How you paid" */
.bp-entry { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 12px; text-align: left; cursor: pointer;
  border: 1px solid color-mix(in srgb, #1f5392 28%, var(--border)); background: color-mix(in srgb, #1f5392 6%, var(--bg-raised)); color: var(--white); font-family: var(--font-body); }
.bp-entry svg { flex: none; width: 26px; height: 26px; color: #1f5392; }
.bp-entry-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-entry-t b { font-size: 14.5px; font-weight: 700; }
.bp-entry-t span { font-size: 12.5px; color: var(--muted); }
.bp-entry:hover { border-color: #1f5392; }

/* night: the navy accent is too dark on a dark surface, use the theme blue */
html[data-remodel-mode="night"] .bp-sheet .bp-pill.is-on, html[data-remodel-mode="night"] .bp-sheet .bp-count { background: var(--blue); border-color: var(--blue); color: #0a0a0b; }
html[data-remodel-mode="night"] .bp-sheet .bp-link, html[data-remodel-mode="night"] .bp-sheet .bp-add, html[data-remodel-mode="night"] .bp-sheet .bp-mini,
html[data-remodel-mode="night"] .bp-sheet .bp-num, html[data-remodel-mode="night"] .bp-sheet .bp-check.is-idle .bp-check-ic, html[data-remodel-mode="night"] .bp-entry svg { color: var(--blue); }
html[data-remodel-mode="night"] .bp-sheet .bp-mini, html[data-remodel-mode="night"] .bp-sheet .bp-tog.is-on { border-color: var(--blue); }
html[data-remodel-mode="night"] .bp-sheet .bp-tog.is-on .bp-sw { background: var(--blue); }

/* tablet: one column, purchase + charge side by side under the watches */
@media (max-width: 1080px) {
  .bp-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top top" "main main" "bottom bottom"; grid-template-rows: auto; }
  .bp-side-bottom { position: static; }
}

/* phone: full screen, one column, Save pinned */
@media (max-width: 720px) {
  .bp-ov { padding: 0; align-items: stretch; }
  .bp-sheet { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .bp-head { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px; }
  .bp-title { font-size: 22px; }
  .bp-sub { font-size: 13px; }
  .bp-body { padding: 14px 16px 20px; }
  .bp-layout { display: flex; flex-direction: column; gap: 14px; }
  .bp-layout > * { min-width: 0; width: 100%; }
  .bp-card, .bp-w { padding: 14px; border-radius: 14px; }
  .bp-grid, .bp-grid-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .bp-grid > .bp-f:not(.bp-span):not(.bp-f-cost) { grid-column: auto; }
  .bp-f-cost { grid-column: 1 / -1; }
  .bp-in { font-size: 16px; } /* no iOS zoom on focus */
  .bp-pill { min-height: 42px; padding: 0 13px; font-size: 13.5px; }
  .bp-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .bp-foot-r { width: 100%; }
  .bp-foot-r .bp-btn { flex: 1; padding: 0 12px; }
  .bp-more { margin-left: 0; }
}

/* card list: compact tiles, two per row (a team may have many cards) */
.bp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bp-cardt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-void);
  color: var(--white); text-align: left; cursor: pointer; min-width: 0; transition: background .15s, border-color .15s; }
.bp-cardt:hover { border-color: #1f5392; }
.bp-cardt-ic { flex: none; display: inline-flex; color: var(--muted); }
.bp-cardt-ic svg { width: 18px; height: 18px; }
.bp-cardt-b { display: flex; flex-direction: column; min-width: 0; }
.bp-cardt-n { font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-cardt-s { font-size: 12px; color: var(--muted); font-weight: 600; }
.bp-cardt.is-on { background: #1f5392; border-color: #1f5392; color: #fff; }
.bp-cardt.is-on .bp-cardt-ic, .bp-cardt.is-on .bp-cardt-s { color: rgba(255, 255, 255, .8); }
.bp-cards + .bp-in { margin-top: 8px; }
html[data-remodel-mode="night"] .bp-sheet .bp-cardt.is-on { background: var(--blue); border-color: var(--blue); color: #0a0a0b; }
html[data-remodel-mode="night"] .bp-sheet .bp-cardt.is-on .bp-cardt-ic, html[data-remodel-mode="night"] .bp-sheet .bp-cardt.is-on .bp-cardt-s { color: rgba(10, 10, 11, .75); }