/* Provider service chooser (static/js/provider-service-chooser.js): the provider
 * "Service type" checkbox group with a category filter, search, a bounded scroll
 * area and rows shown in batches. Colours/radii come from the form's .stripe-inputs
 * tokens (--si-*, static/css/stripe-inputs.css) with neutral fallbacks, so each
 * funnel theme keeps its own accent. Rows keep the theme's own checkbox style. */
.psc { display: block; clear: both; width: 100%; min-width: 0; padding-top: 10px; }
/* padding, not a margin: .psc clears the floated group label, and clearance swallows a top margin. */
/* Rows carry Tailwind's .flex (display:flex) and field labels get .stripe-inputs'
 * label { display:block !important } (0,2,2) — both beat the [hidden] UA rule. */
.psc [hidden], .psc .psc-row[hidden], .psc .psc-field[hidden] { display: none !important; }

/* QA 2026-10-23 ProofPros #3 / ProofSeal #4: "Service type*" sat 4px over "Category" and each
 * filter's caption sat on its control. 10px under the group label, 6px under each caption. */
.psc-toolbar { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 8px; }
.psc .psc-field { display: block; flex: 1 1 200px; min-width: 0; margin: 0 !important; }
.psc .psc-field-search { flex: 2 1 260px; }
.psc .psc-field-label { display: block; margin: 0 0 6px; line-height: 1.3; }
.psc .psc-category, .psc .psc-search { width: 100%; max-width: 100%; margin: 0; }

.psc-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; font-size: 13px; line-height: 1.4; color: var(--si-placeholder, #667085); }
.psc-meta p { margin: 0; }
.psc .psc-count { font-weight: 600; color: var(--si-text, #30313d); }

.psc-scroll { box-sizing: border-box; max-height: min(22rem, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--si-border, #d1d5db); border-radius: var(--si-radius, 6px); scrollbar-width: thin; }
/* align-items:start — grid cells no longer stretch to the tallest row in the
 * line, so a two-line label ("Pipe Replacement And Repiping") stops pushing its
 * single-line neighbours' checkboxes down into mid-cell (QA 2026-10-22 #9). */
.psc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 2px 12px; align-items: start; }
.psc .psc-row { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0 10px; border-radius: 4px; }
.psc .psc-row:hover { background: rgb(100 116 139 / 8%); }
.psc .psc-row:has(> input:checked) { background: var(--si-ring, rgb(37 99 235 / 14%)); }
.psc .psc-row > input { flex: 0 0 auto; margin: 0; }
/* One checkbox look for every theme (QA 2026-10-22 #10). base.css styles
 * .rendered-form checkboxes as a 13px appearance:none square that flips back to
 * the native control once checked, so the two states never matched. The extra
 * .psc-list class outranks that (0,4,2) rule. Colours follow the form's --si-*
 * tokens so each funnel keeps its accent. */
.psc .psc-list .psc-row > input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  width: 20px; height: 20px; min-width: 20px; margin: 0; padding: 0; flex: 0 0 20px;
  display: inline-block; vertical-align: middle;
  border: 2px solid var(--si-border-strong, #9ca3af); border-radius: 5px;
  background: #fff no-repeat center / 13px 13px; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.psc .psc-list .psc-row > input[type="checkbox"]:hover { border-color: var(--si-accent, #2563eb); }
/* appearance restated here: base.css flips :checked back to appearance:auto at
 * (0,4,2), which this (0,5,1) rule has to beat or the native tick bleeds through.
 * The tick is a stroked SVG (2.6px round caps on a 16-unit box) drawn as the
 * background, centred at 13px — crisp at every zoom, unlike the clip-path
 * polygon it replaces (QA 2026-10-23 #1). */
.psc .psc-list .psc-row > input[type="checkbox"]:checked {
  appearance: none; -webkit-appearance: none;
  border-color: var(--si-accent, #2563eb);
  background-color: var(--si-accent, #2563eb);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-7'/%3E%3C/svg%3E");
}
.psc .psc-list .psc-row > input[type="checkbox"]:focus-visible { outline: 2px solid var(--si-accent, #2563eb); outline-offset: 2px; }
.psc .psc-list .psc-row > input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.psc .psc-row > input:focus-visible { outline: 2px solid var(--si-accent, #2563eb); outline-offset: 2px; }
/* !important + the extra classes outrank .stripe-inputs' bare-label rule
 * (display:block / margin / padding with !important) for these row labels. */
.psc .psc-row > label.psc-row-label { display: flex !important; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 36px; margin: 0 !important; padding: 6px 0 !important; overflow-wrap: anywhere; cursor: pointer; }

.psc-empty { padding: 20px 12px; text-align: center; }
.psc .psc-empty-text { margin: 0 0 10px; }
.psc .psc-clear, .psc .psc-more { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 16px; border: 1px solid var(--si-accent, #2563eb); border-radius: 999px; background: transparent; color: var(--si-accent, #2563eb); font: 600 14px/1.2 var(--si-font, inherit); cursor: pointer; }
.psc .psc-more { margin-top: 10px; }
.psc .psc-clear:hover, .psc .psc-more:hover { background: var(--si-ring, rgb(37 99 235 / 14%)); }
.psc .psc-clear:focus-visible, .psc .psc-more:focus-visible { outline: 2px solid var(--si-accent, #2563eb); outline-offset: 2px; }

@media (max-width: 575px) {
  .psc .psc-field, .psc .psc-field-search { flex-basis: 100%; }
  .psc .psc-row > label.psc-row-label { min-height: 44px; }
  .psc-scroll { max-height: min(24rem, 55vh); }
  .psc .psc-more { width: 100%; }
}
@media (forced-colors: active) {
  .psc .psc-row:has(> input:checked) { outline: 1px solid CanvasText; }
  /* Forced colours strip background images, so use the native control there. */
  .psc .psc-list .psc-row > input[type="checkbox"], .psc .psc-list .psc-row > input[type="checkbox"]:checked { appearance: auto; -webkit-appearance: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .psc .psc-list .psc-row > input[type="checkbox"] { transition: none; }
}