/*
 * Orbis shared booking presentation. Surface shells provide tenant tokens;
 * this file owns the booking experience geometry, not catalogue or payment logic.
 */
.shared-booking-shell {
  --booking-primary: var(--pb-primary, var(--primary, #243746));
  --booking-accent: var(--pb-accent, var(--accent, #b56b47));
  --booking-surface: #ffffff;
  --booking-ink: #17212b;
  --booking-muted: #65707b;
  --booking-line: color-mix(in srgb, var(--booking-primary) 15%, #d9d6cf);
}

.shared-booking-shell {
  color: var(--booking-ink);
  font-family: var(--booking-body-font, var(--pb-font-body, ui-sans-serif, system-ui, sans-serif));
}
.shared-booking-shell .pb-booking-intro {
  max-width: 620px; margin: 0 0 18px; color: var(--booking-muted);
  font-size: 14px; line-height: 1.55;
}
.shared-booking-shell .booking-steps, .shared-booking-shell .pb-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: 4px 0 30px; padding: 0; list-style: none;
}
.shared-booking-shell .booking-steps li, .shared-booking-shell .pb-step {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; border: 1px solid var(--booking-line); border-radius: 999px;
  background: var(--booking-surface);
  color: var(--booking-muted); font-size: 13px; font-weight: 650; letter-spacing: -.01em;
  padding: 8px 10px; text-align: center;
}
.shared-booking-shell button.pb-step { width: 100%; cursor: pointer; font: inherit; }
.shared-booking-shell .booking-steps li.active, .shared-booking-shell .pb-step.is-current {
  color: var(--pb-on-accent, var(--booking-on-accent, var(--booking-ink)));
  background: var(--booking-accent); border-color: var(--booking-accent);
}
.shared-booking-shell .booking-steps li.active > *, .shared-booking-shell .pb-step.is-current > * {
  color: inherit;
}
.shared-booking-shell .booking-steps li.done, .shared-booking-shell .pb-step.is-done {
  color: var(--booking-primary); background: color-mix(in srgb, var(--booking-accent) 10%, var(--booking-surface));
  border-color: color-mix(in srgb, var(--booking-accent) 46%, var(--booking-line));
}
.shared-booking-shell .pb-step:disabled { cursor: default; opacity: .72; }
.shared-booking-shell .pb-step:not(:disabled):hover { transform: translateY(-1px); }

.shared-booking-shell .booking-options, .shared-booking-shell .pb-service-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.shared-booking-shell .pb-sub,
.shared-booking-shell .booking-step h2 {
  color: var(--booking-ink);
  font-family: var(--booking-heading-font, var(--pb-font-heading, ui-sans-serif, system-ui, sans-serif));
  font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; letter-spacing: -.025em;
  margin: 0 0 18px;
}
.shared-booking-shell .pb-service-grid .pb-cat {
  margin: 2px 0 0; color: var(--booking-muted); font-family: var(--pb-font-body, inherit);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.shared-booking-shell .booking-option, .shared-booking-shell .pb-option {
  min-height: 98px; border-radius: var(--booking-radius); border: 1px solid var(--booking-line);
  background: var(--booking-surface); box-shadow: none; padding: 16px;
}
.shared-booking-shell .shared-service-card, .shared-booking-shell .shared-staff-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  width: 100%; text-align: left; cursor: pointer;
}
.shared-booking-shell .shared-service-card > span, .shared-booking-shell .shared-staff-card-copy, .shared-booking-shell .shared-staff-card-copy > span { display: block; }
.shared-booking-shell .shared-staff-card { flex-direction: row; gap: 12px; }
.shared-booking-shell .shared-staff-card-copy { min-width: 0; }
.shared-booking-shell .shared-service-card.is-selected, .shared-booking-shell .shared-staff-card.is-selected {
  border-color: var(--booking-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--booking-accent) 24%, transparent);
}
.shared-booking-shell .booking-option:hover, .shared-booking-shell .pb-option:hover {
  border-color: var(--booking-accent); box-shadow: 0 12px 28px color-mix(in srgb, var(--booking-primary) 9%, transparent);
}
.shared-booking-shell .booking-option .opt-name, .shared-booking-shell .pb-option-name { font-size: 15px; line-height: 1.4; color: var(--booking-ink); }
.shared-booking-shell .booking-option .opt-meta, .shared-booking-shell .pb-option-meta { margin-top: 8px; font-size: 13px; color: var(--booking-muted); }
.shared-booking-shell .booking-cal-panel, .shared-booking-shell .pb-cal-panel, .shared-booking-shell .booking-summary, .shared-booking-shell .pb-basket {
  border-radius: var(--booking-radius); border-color: var(--booking-line); background: var(--booking-surface);
}
.pb-embed .pb-shell { max-width: 900px; padding: 18px 14px 28px; }
.pb-embed .pb-footer { display: none; }
.pb-embed .pb-card { margin: 0; }
.shared-booking-shell .booking-slot, .shared-booking-shell .pb-slot { border-color: var(--booking-line); border-radius: 11px; background: var(--booking-surface); }
.shared-booking-shell .booking-slot:hover, .shared-booking-shell .pb-slot.selected { background: var(--booking-accent); border-color: var(--booking-accent); color: var(--pb-on-accent, #fff); }
.shared-booking-shell .booking-waitlist, .shared-booking-shell .pb-waitlist { border-color: color-mix(in srgb, var(--booking-accent) 46%, var(--booking-line)); background: color-mix(in srgb, var(--booking-accent) 5%, var(--booking-surface)); }
.shared-booking-shell .booking-confirm {
  max-width: 620px; margin: 0 auto; padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--booking-line); border-radius: var(--booking-radius);
  background: var(--booking-surface); box-shadow: 0 18px 42px color-mix(in srgb, var(--booking-primary) 11%, transparent);
}
.shared-booking-shell .booking-confirm-icon {
  width: 58px; height: 58px; margin-bottom: 18px; line-height: 58px;
  background: var(--booking-accent); color: var(--pb-on-accent, var(--booking-ink));
}
.shared-booking-shell .booking-confirm h2 { font-family: var(--booking-heading-font, var(--font-heading)); letter-spacing: -.03em; }
.shared-booking-shell .booking-confirm .booking-summary { margin: 24px 0 18px; padding: 14px 16px; text-align: left; }
.shared-booking-shell .booking-confirm .summary-row { padding: 8px 0; border-bottom: 1px solid var(--booking-line); }
.shared-booking-shell .booking-confirm .summary-row:last-child { border-bottom: 0; }
.shared-booking-shell .booking-confirm .btn { min-height: 44px; }

@media (max-width: 767px) {
  .shared-booking-shell .booking-options, .shared-booking-shell .pb-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-booking-shell .booking-steps, .shared-booking-shell .pb-steps { gap: 6px; margin-bottom: 22px; }
  .shared-booking-shell .booking-steps li, .shared-booking-shell .pb-step { min-height: 48px; padding: 7px 5px; font-size: 11px; line-height: 1.1; }
}
@media (max-width: 459px) {
  .shared-booking-shell .booking-options, .shared-booking-shell .pb-service-grid { grid-template-columns: 1fr; }
  .shared-booking-shell .booking-option, .shared-booking-shell .pb-option { min-height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .shared-booking-shell .booking-option, .shared-booking-shell .pb-option, .shared-booking-shell .pb-step { transition: none !important; transform: none !important; }
}