/* Fase 4.11-B1 (ADR-074) + 4.11-B2-B (ADR-076) - the booking CHOOSER styles, shared by the public barbershop page and the signed-in app (bookingChooser.js).
   Loaded after styles.css (the BARBER tokens). Touch targets >= 44px, nothing wider than the viewport, no inline style anywhere (the public page's CSP forbids it). */

/* A display rule on a hidden element must never win over the attribute (the project's own recorded bug class). */
[hidden] { display: none !important; }

/* ---- the chooser (progress, service, professional, date, time, summary). Touch targets >= 44px, nothing wider than the viewport, focus rings come from styles.css. ---- */
.pb-booking { margin-top: var(--spacing-md); }
.pb-step { border: 0; padding: 0; margin: 0 0 var(--spacing-lg); min-width: 0; }
.pb-step-title { display: block; padding: 0; margin-bottom: var(--spacing-sm); font-size: var(--font-lg); font-weight: 700; color: var(--color-text); }

/* progress: where the person is, never a decoration (four real steps) */
.pb-stepper { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--spacing-lg); padding: 0; counter-reset: none; }
.pb-stepper-item { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--color-text-muted); text-align: center; }
.pb-stepper-item + .pb-stepper-item::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; }
.pb-stepper-item.pb-stepper-done + .pb-stepper-item::before, .pb-stepper-item.pb-stepper-current::before { background: var(--color-accent); }
.pb-stepper-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid var(--color-border-strong); background: var(--color-surface); font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.pb-stepper-done .pb-stepper-dot { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); }
.pb-stepper-current .pb-stepper-dot { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.pb-stepper-current .pb-stepper-label { color: var(--color-text); font-weight: 700; }
.pb-stepper-label { max-width: 100%; overflow-wrap: anywhere; }

/* choices: a whole card is the touch target; the real radio stays visible for keyboard and screen readers */
.pb-option { display: flex; align-items: flex-start; gap: var(--spacing-sm); min-height: 44px; padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.pb-option:hover { border-color: var(--color-border-strong); }
.pb-option input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--color-primary); }
.pb-option-text { min-width: 0; overflow-wrap: anywhere; font-size: var(--font-md); color: var(--color-text); }
.pb-option-body { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pb-option-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--spacing-sm); font-size: var(--font-sm); color: var(--color-text-muted); }
.pb-option-price { font-weight: 700; color: var(--color-text); }
.pb-option-price-benefit { color: var(--color-success, #16794b); }
.pb-option-duration + .pb-option-price::before { content: "·"; margin-right: var(--spacing-sm); font-weight: 400; color: var(--color-text-muted); }
.pb-option:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); background: #fffdf8; }

/* date: quick days (from the server's "today") + the native date input for any other day */
.pb-days { display: flex; gap: var(--spacing-sm); margin: 0 calc(-1 * var(--spacing-xs)) var(--spacing-sm); padding: var(--spacing-xs); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: var(--spacing-xs); }
.pb-day { flex: 0 0 auto; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 64px; min-height: 64px; padding: var(--spacing-xs) var(--spacing-sm); font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; scroll-snap-align: start; }
.pb-day-name { font-size: 12px; color: var(--color-text-muted); text-transform: capitalize; }
.pb-day-number { font-size: var(--font-xl); font-weight: 700; line-height: 1.1; }
.pb-day:hover { background: var(--color-surface-muted); }
.pb-day[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.pb-day[aria-pressed="true"] .pb-day-name { color: rgba(255, 255, 255, 0.78); }
.pb-date-label { display: block; margin: var(--spacing-xs) 0; font-size: var(--font-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.pb-date { display: block; width: 100%; max-width: 100%; min-height: 44px; padding: var(--spacing-sm) var(--spacing-md); font: inherit; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); box-sizing: border-box; }

/* times: grouped by part of the day, a loading placeholder, a calm empty state */
.pb-time-group + .pb-time-group { margin-top: var(--spacing-md); }
.pb-time-group-title { margin: 0 0 var(--spacing-xs); font-size: var(--font-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.pb-times-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--spacing-sm); }
.pb-slot { min-height: 44px; padding: var(--spacing-sm); font: inherit; font-weight: 600; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; }
.pb-slot:hover { background: var(--color-surface-muted); }
.pb-slot-chosen, .pb-slot[aria-pressed="true"] { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); }
.pb-slot-skeleton { display: block; min-height: 44px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-surface-muted), var(--color-surface-sunken), var(--color-surface-muted)); background-size: 200% 100%; animation: pb-shimmer 1.2s linear infinite; }
@keyframes pb-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pb-empty { padding: var(--spacing-md); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--font-md); color: var(--color-text-muted); overflow-wrap: anywhere; }
.pb-retry { margin-bottom: 0; }

/* summary: the choice laid out as facts; the only action is "continue" */
.pb-summary { padding: var(--spacing-md); background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: var(--radius-lg); }
.pb-summary p { margin-top: var(--spacing-xs); overflow-wrap: anywhere; }
.pb-summary-list { margin: 0; padding: 0; }
.pb-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border); }
.pb-summary-row dt { flex: 0 0 auto; font-size: var(--font-sm); color: var(--color-text-muted); }
.pb-summary-row dd { margin: 0; min-width: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.pb-muted { font-size: var(--font-sm); color: var(--color-text-muted); margin-top: var(--spacing-xs); }
/* the status line is for assistive technology: every visible state (loading, empty, error) already has its own element in the chooser */
.pb-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pb-continue { display: block; width: 100%; margin-top: var(--spacing-md); min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .pb-slot-skeleton { animation: none; }
  .pb-option { transition: none; }
}
.pb-professional-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:10px;vertical-align:middle}.pb-professional-rating{display:block;color:#9a6a12;font-size:.82rem;margin-top:3px}