/**
 * MR-2026-09-002 — Shared booking option multi-select chrome.
 * Companion to booking-service-pick.css (card / nav / ask title).
 * Root: .booking-option-pick (also uses .booking-service-pick for shared card chrome).
 * Extracted from contact options step: .sq-pick--check / .sq-pick-list--check.
 */

.booking-option-pick {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}

.booking-option-pick .sq-ask-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-option-pick .sq-ask-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--bsp-accent, var(--accent, #006fb9));
  background: color-mix(in srgb, var(--bsp-accent, #006fb9) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--bsp-accent, #006fb9) 28%, #fff);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.4;
}

.booking-option-pick .sq-pick-list--check {
  display: grid;
  gap: 10px;
  margin: 4px 0 8px;
}

.booking-option-pick .sq-pick--check {
  position: relative;
}

.booking-option-pick .sq-pick--check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Keep mark readable as checkbox affordance (same as car production) */
.booking-option-pick .sq-pick--check .sq-pick-mark {
  border-radius: 6px;
}

@media (max-width: 480px) {
  .booking-option-pick .sq-pick--check {
    padding: 14px 12px;
  }
}