/* Customer booking only: approved monochrome mobile and desktop concepts. */
.booking-page.booking-monochrome {
  --ink: #151515; --muted: #5f5f5f; --line: #d6d6d6;
  --mint: #151515; --mint-dark: #151515; --mint-soft: #f2f2f2;
  --booking-action-height: 128px;
  color-scheme: light;
  background: #fff; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.booking-page.booking-monochrome :is(button, input, select, textarea, h1, h2, h3) { font-family: inherit; }
.booking-page.booking-monochrome :focus-visible { outline: 2px solid #515151; outline-offset: 4px; }
.booking-page.booking-monochrome [hidden] { display: none !important; }
.booking-page.booking-monochrome.is-booking-pending :is(.steps, .booking-panel, .sticky-actions) { display: none; }
.booking-page.booking-monochrome .booking-header {
  position: relative; top: auto; min-height: 80px; gap: 24px;
  padding: 16px max(24px, calc((100vw - 1200px) / 2));
  border-bottom: 1px solid var(--line); background: #fff; box-shadow: none;
}
.booking-page.booking-monochrome .booking-header-title { min-width: 0; }
.booking-page.booking-monochrome .booking-header-title strong { font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.booking-page.booking-monochrome .booking-header-title > span { display: none; }
.booking-page.booking-monochrome .booking-header-actions { flex-shrink: 0; gap: 24px; }
.booking-page.booking-monochrome .language-switcher select { min-height: 44px; padding: 8px 4px; border: 0; background: #fff; color: var(--ink); font-size: 16px; font-weight: 400; }
.booking-page.booking-monochrome .booking-help-link { color: var(--ink); font-size: 15px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.booking-page.booking-monochrome .booking-showcase { width: min(1200px, calc(100% - 48px)); min-height: 0; margin: 0 auto; padding: 26px 0 32px; }
.booking-page.booking-monochrome :is(.demo-intro, .salon-title:not(:has(.booking-status.is-error:not([hidden])))) { display: none; }
.booking-page.booking-monochrome .booking-shell { border: 0; background: #fff; border-radius: 0; --booking-sticky-top: 0px; --booking-steps-height: 64px; }
.booking-page.booking-monochrome .steps { position: static; display: grid; grid-template-columns: repeat(var(--flow-count, 5), minmax(0, 1fr)); gap: 26px; min-height: 64px; padding: 0 0 18px; border: 0; overflow: visible; background: #fff; }
.booking-page.booking-monochrome .step { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 7px; min-height: 44px; padding: 0 0 13px; border-bottom: 5px solid #d6d6d6; border-radius: 0; color: var(--muted); font-size: 18px; font-weight: 400; text-align: left; }
.booking-page.booking-monochrome .step::after { display: none; }
.booking-page.booking-monochrome .step span { display: inline; width: auto; height: auto; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; box-shadow: none; }
.booking-page.booking-monochrome .step.is-active { color: var(--ink); font-weight: 600; border-color: var(--ink); }
.booking-page.booking-monochrome .step.is-complete { color: var(--ink); border-color: #858585; }
.booking-page.booking-monochrome .step.is-active span { background: none; color: inherit; }
.booking-page.booking-monochrome .step:disabled { cursor: default; opacity: 1; }
.booking-page.booking-monochrome .step.needs-attention { border-bottom-style: dashed; }
.booking-page.booking-monochrome .booking-panel { min-height: 0; padding: 22px 0 0; border: 0; border-radius: 0; }
.booking-page.booking-monochrome .pane-heading { display: block; max-width: none; margin: 0 0 28px; text-align: left; }
.booking-page.booking-monochrome .pane-heading h2 { margin: 0 0 8px; font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -.035em; white-space: normal; }
.booking-page.booking-monochrome .pane-heading > p:not(.micro) { max-width: calc(100% - 120px); justify-self: start; margin: 0; color: var(--muted); font-size: 20px; line-height: 1.5; text-align: left; }
.booking-page.booking-monochrome .pane-heading .micro { display: none; }
.booking-page.booking-monochrome .booking-required { margin: -50px 0 30px; color: var(--muted); font-size: 14px; text-align: right; }
.booking-page.booking-monochrome .details-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; max-width: none; margin: 0; }
.booking-page.booking-monochrome .details-form label { display: grid; gap: 7px; min-width: 0; color: var(--ink); font-size: 18px; line-height: 1.4; font-weight: 400; }
.booking-page.booking-monochrome .details-form :is(input, select, textarea) { width: 100%; min-width: 0; min-height: 56px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 20px; font-weight: 400; line-height: 1.4; box-shadow: none; }
.booking-page.booking-monochrome .details-form :is(input, select) { height: 56px; }
.booking-page.booking-monochrome .details-form :is(input, textarea)::placeholder { color: #777; opacity: 1; }
.booking-page.booking-monochrome .details-form textarea { min-height: 90px; resize: vertical; }
.booking-page.booking-monochrome .details-form :is(.pet-count-field, .pet-coat-field, .pet-notes-field, .customer-notes-field, .details-step-error) { grid-column: 1 / -1; }
.booking-page.booking-monochrome .details-form .pet-count-field { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.booking-page.booking-monochrome .pet-count-field > span:first-child { min-width: 260px; }
.booking-page.booking-monochrome .number-stepper { width: 160px; min-height: 44px; grid-template-columns: 48px minmax(0, 1fr) 48px; border-color: var(--line); background: #fff; }
.booking-page.booking-monochrome .number-stepper :is(button, input) { height: 44px; min-height: 44px; padding: 0; border: 0; color: var(--ink); background: #fff; font-weight: 400; }
.booking-page.booking-monochrome .number-stepper button { width: 48px; font-size: 22px; }
.booking-page.booking-monochrome .number-stepper input { border-inline: 1px solid var(--line); border-radius: 0; }
.booking-page.booking-monochrome .unit-input { border-color: var(--line); background: #fff; }
.booking-page.booking-monochrome .unit-input input { height: 54px; min-height: 54px; border: 0; border-radius: 8px; }
.booking-page.booking-monochrome .unit-input:has(input:focus-visible) { outline: 2px solid #515151; outline-offset: 4px; }
.booking-page.booking-monochrome .unit-input input:focus-visible { outline: 0; }
.booking-page.booking-monochrome .number-stepper :focus-visible { outline-offset: -4px; }
.booking-page.booking-monochrome .unit-input span { color: var(--muted); font-size: 16px; font-weight: 400; }
.booking-page.booking-monochrome .form-hint { color: var(--muted); font-size: 13px; font-weight: 400; }
.booking-page.booking-monochrome :is(.primary-btn, .soft-btn, .link-btn) { min-height: 44px; font-size: 15px; font-weight: 500; }
.booking-page.booking-monochrome .primary-btn { min-height: 52px; border: 1px solid #151515; border-radius: 8px; background: #151515; color: #fff; box-shadow: none; }
.booking-page.booking-monochrome .primary-btn:hover { background: #333; }
.booking-page.booking-monochrome .primary-btn:disabled { opacity: 1; background: #e4e4e4; border-color: #e4e4e4; color: #626262; cursor: default; }
.booking-page.booking-monochrome .soft-btn { border-color: var(--line); color: var(--ink); background: #fff; box-shadow: none; }
.booking-page.booking-monochrome .link-btn { border-color: var(--line); background: #fff; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.booking-page.booking-monochrome .sticky-actions { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px 0 0; margin: 24px 0 0; border: 0; border-top: 1px solid var(--line); background: #fff; border-radius: 0; box-shadow: none; }
.booking-page.booking-monochrome .sticky-actions::before { display: none; }
.booking-page.booking-monochrome #continue-btn { min-width: 250px; grid-column: 3; padding-inline: 20px; }
.booking-page.booking-monochrome #back-btn { grid-column: 1; }
.booking-page.booking-monochrome .selected-summary-wrap { grid-column: 2; justify-items: start; text-align: left; }
.booking-page.booking-monochrome .selected-summary { justify-self: start; max-width: none; padding: 0; color: var(--muted); font-size: 13px; font-weight: 400; text-align: left; line-height: 1.45; }
.booking-page.booking-monochrome .booking-powered { display: inline-block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; }
.booking-page.booking-monochrome.booking-is-first #back-btn { display: none; }
.booking-page.booking-monochrome.booking-is-first .selected-summary-wrap { grid-column: 1 / 3; }
.booking-page.booking-monochrome.booking-is-first .selected-summary:not(.has-action-error) { display: none; }
.booking-page.booking-monochrome.booking-is-review .sticky-actions { display: none; }
.booking-page.booking-monochrome .booking-draft-notice { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 1.5; }
.booking-page.booking-monochrome .booking-progress-toggle { display: none; }
.booking-page.booking-monochrome:is(.is-generic-booking, .is-booking-error, .is-booking-pending) .booking-progress-toggle { display: none; }
.booking-page.booking-monochrome .summary-edit:disabled { color: #777; cursor: default; }
.booking-page.booking-monochrome .booking-step-menu { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.booking-page.booking-monochrome .booking-step-menu::backdrop { background: rgb(0 0 0 / .38); }
.booking-page.booking-monochrome .booking-step-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.booking-page.booking-monochrome .booking-step-menu h2 { margin: 0; font-size: 22px; }
.booking-page.booking-monochrome .booking-step-menu p { margin: 14px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.booking-page.booking-monochrome .booking-step-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); text-align: left; font-size: 16px; }
.booking-page.booking-monochrome .booking-step-option small { color: var(--muted); font-size: 12px; }
.booking-page.booking-monochrome .booking-step-option:disabled { color: #777; cursor: default; }
.booking-page.booking-monochrome .booking-step-option[aria-current="step"] { font-weight: 600; }
.booking-page.booking-monochrome .service-filter-bar { position: static; padding: 0; margin: 0 0 24px; background: #fff; }
.booking-page.booking-monochrome .service-filter-bar::before { display: none; }
.booking-page.booking-monochrome :is(.search, .view-toggle button, .chip) { border-color: var(--line); background: #fff; color: var(--ink); box-shadow: none; }
.booking-page.booking-monochrome .search input { color: var(--ink); font-size: 16px; }
.booking-page.booking-monochrome :is(.chip.is-active, .view-toggle button.is-active) { background: #151515; border-color: #151515; color: #fff; }
.booking-page.booking-monochrome .chip { min-height: 44px; font-size: 14px; font-weight: 400; }
.booking-page.booking-monochrome .group-title { margin: 24px 0 12px; color: var(--ink); font-size: 18px; font-weight: 600; }
.booking-page.booking-monochrome :is(.service-card, .staff-card) { padding: 20px; border-color: var(--line); border-radius: 8px; color: var(--ink); background: #fff; box-shadow: none; }
.booking-page.booking-monochrome :is(.service-card.is-selected, .staff-card.is-selected) { border-color: #151515; box-shadow: inset 0 0 0 1px #151515; background: #fff; }
.booking-page.booking-monochrome .service-card h3 { font-size: 16px; font-weight: 600; }
.booking-page.booking-monochrome :is(.service-meta span, .staff-card span, .service-card small) { color: var(--muted); }
.booking-page.booking-monochrome .service-meta strong { color: var(--ink); font-weight: 600; }
.booking-page.booking-monochrome .select-box { border-color: #777; background: #fff; }
.booking-page.booking-monochrome .is-selected :is(.select-box, .radio-dot) { background: #151515; border-color: #151515; }
.booking-page.booking-monochrome .staff-card .avatar { color: var(--ink); background: #f1f1f1; }
.booking-page.booking-monochrome .staff-card.is-disabled { background: #f3f3f3; color: #707070; border-color: #e4e4e4; }
.booking-page.booking-monochrome .staff-status { color: var(--muted); background: #f1f1f1; }
.booking-page.booking-monochrome .recommendation-badge { color: var(--ink); background: #f1f1f1; }
.booking-page.booking-monochrome .time-layout { gap: 32px; }
.booking-page.booking-monochrome :is(.date-picker-card, .slot-picker-card) { padding: 0; border: 0; border-radius: 0; background: #fff; }
.booking-page.booking-monochrome .time-card-head { margin-bottom: 16px; color: var(--ink); }
.booking-page.booking-monochrome .time-card-head strong { font-weight: 600; }
.booking-page.booking-monochrome :is(.date-card, .slot-card) { min-height: 52px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.booking-page.booking-monochrome :is(.date-card, .slot-card) :is(strong, span) { color: inherit; }
.booking-page.booking-monochrome :is(.date-card, .slot-card) strong { font-weight: 600; }
.booking-page.booking-monochrome :is(.date-card, .slot-card) span { font-weight: 400; }
.booking-page.booking-monochrome :is(.date-card.is-selected, .slot-card.is-selected) { border-color: #151515; background: #151515; color: #fff; }
.booking-page.booking-monochrome .slot-card.is-disabled { background: #f3f3f3; color: #707070; border-color: #e4e4e4; opacity: 1; }
.booking-page.booking-monochrome .booking-date-sheet { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 24px 70px rgb(0 0 0 / .18); }
.booking-page.booking-monochrome .booking-date-sheet-head { border-color: var(--line); }
.booking-page.booking-monochrome .booking-date-sheet-backdrop { background: rgb(0 0 0 / .38); }
.booking-page.booking-monochrome .booking-date-sheet-list { padding-bottom: env(safe-area-inset-bottom, 0px); }
.booking-page.booking-monochrome .confirmation-card { max-width: none; padding: 0; border: 0; border-radius: 0; text-align: left; background: #fff; }
.booking-page.booking-monochrome .confirmation-card h2 { font-size: 32px; letter-spacing: -.035em; }
.booking-page.booking-monochrome .confirmation-card .success-mark { display: none; }
.booking-page.booking-monochrome .confirmation-card:not(.is-confirmed) > .micro { display: none; }
.booking-page.booking-monochrome .confirmation-card.is-confirmed .success-mark { display: grid; background: #151515; color: #fff; }
.booking-page.booking-monochrome .summary-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 18px 0; border-color: var(--line); }
.booking-page.booking-monochrome .summary-row dt { color: var(--muted); font-weight: 400; }
.booking-page.booking-monochrome .summary-row dd { margin: 0; color: var(--ink); font-weight: 400; overflow-wrap: anywhere; }
.booking-page.booking-monochrome .summary-edit { min-width: 44px; min-height: 44px; margin-block: -12px; padding: 10px 0 10px 12px; border: 0; background: #fff; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.booking-page.booking-monochrome .confirmation-card > .primary-btn { width: auto; min-width: 250px; margin: 24px 0 0 auto; display: flex; }
.booking-page.booking-monochrome .booking-result { color: var(--ink); font-size: 15px; }
.booking-page.booking-monochrome :is(.field-error, .details-step-error, .booking-result.is-error, .has-action-error) { color: #9a3024; }

@media (max-width: 700px) {
  .booking-page.booking-monochrome .booking-header { min-height: 56px; padding: 6px 20px; gap: 12px; }
  .booking-page.booking-monochrome .booking-header-title strong { font-size: 19px; letter-spacing: -.025em; }
  .booking-page.booking-monochrome .booking-header-actions { gap: 0; }
  .booking-page.booking-monochrome .language-switcher { display: flex; }
  .booking-page.booking-monochrome .language-switcher select { max-width: 98px; font-size: 14px; }
  .booking-page.booking-monochrome .booking-help-link { display: none; }
  .booking-page.booking-monochrome .booking-showcase { width: auto; min-height: 0; margin: 0; padding: 0 20px calc(var(--booking-action-height) + 24px); }
  .booking-page.booking-monochrome .steps { display: none; }
  .booking-page.booking-monochrome .booking-progress-toggle { display: block; width: 100%; min-height: 62px; padding: 12px 0; border: 0; background: #fff; color: var(--ink); text-align: left; font-size: 14px; }
  .booking-page.booking-monochrome .booking-progress-copy { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .booking-page.booking-monochrome .booking-progress-copy span:last-child { display: inline-flex; gap: 6px; align-items: center; }
  .booking-page.booking-monochrome .booking-progress-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .booking-page.booking-monochrome .booking-progress-segments { display: flex; gap: 5px; margin-top: 12px; }
  .booking-page.booking-monochrome .booking-progress-segments i { flex: 1; height: 5px; border-radius: 2px; background: #d6d6d6; }
  .booking-page.booking-monochrome .booking-progress-segments i.is-current { background: #151515; }
  .booking-page.booking-monochrome .booking-progress-segments i.is-done { background: #777; }
  .booking-page.booking-monochrome .booking-panel { padding: 14px 0 0; }
  .booking-page.booking-monochrome .pane-heading { margin-bottom: 16px; }
  .booking-page.booking-monochrome .pane-heading h2 { margin-bottom: 8px; font-size: 28px; }
  .booking-page.booking-monochrome .pane-heading > p:not(.micro) { max-width: none; font-size: 15px; line-height: 1.5; }
  .booking-page.booking-monochrome .booking-required { margin: 0 0 20px; text-align: left; font-size: 13px; }
  .booking-page.booking-monochrome .details-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .booking-page.booking-monochrome .details-form label { font-size: 14px; }
  .booking-page.booking-monochrome .details-form :is(input, select, textarea) { font-size: 16px; }
  .booking-page.booking-monochrome .details-form .pet-count-field { flex-wrap: nowrap; justify-content: space-between; gap: 12px; margin-bottom: 0; }
  .booking-page.booking-monochrome .pet-count-field > span:first-child { min-width: 0; }
  .booking-page.booking-monochrome .number-stepper { width: 132px; flex-shrink: 0; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .booking-page.booking-monochrome .number-stepper button { width: 44px; }
  .booking-page.booking-monochrome .details-form .number-stepper input { height: 44px; min-height: 44px; }
  .booking-page.booking-monochrome .details-form :is(input, select) { height: 46px; min-height: 46px; }
  .booking-page.booking-monochrome .unit-input input { height: 44px; min-height: 44px; }
  .booking-page.booking-monochrome .details-form textarea { min-height: 76px; }
  .booking-page.booking-monochrome .sticky-actions { position: fixed; inset: auto 0 0; z-index: 35; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .booking-page.booking-monochrome #continue-btn { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; min-height: 52px; padding-inline: 12px; font-size: 15px; }
  .booking-page.booking-monochrome #back-btn { grid-column: 1; grid-row: 1; min-width: 60px; padding-inline: 12px; }
  .booking-page.booking-monochrome .selected-summary-wrap { grid-column: 1 / -1; grid-row: 2; justify-items: center; text-align: center; }
  .booking-page.booking-monochrome .selected-summary { justify-self: center; font-size: 12px; text-align: center; }
  .booking-page.booking-monochrome .booking-powered { font-size: 11px; margin-top: 4px; }
  .booking-page.booking-monochrome.booking-is-first #continue-btn { grid-column: 1 / -1; }
  .booking-page.booking-monochrome.booking-is-first .selected-summary-wrap { grid-column: 1 / -1; }
  .booking-page.booking-monochrome.booking-is-review .booking-showcase { padding-bottom: 24px; }
  .booking-page.booking-monochrome.booking-keyboard-open .sticky-actions { position: static; margin-top: 24px; padding-inline: 0; }
  .booking-page.booking-monochrome.booking-keyboard-open .booking-showcase { padding-bottom: 24px; }
  .booking-page.booking-monochrome .service-filter-bar { margin-bottom: 20px; padding: 0; }
  .booking-page.booking-monochrome :is(.service-grid, .service-grid.is-grid, .staff-grid) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .booking-page.booking-monochrome .service-card { min-height: 100px; padding: 18px 52px 18px 16px; }
  .booking-page.booking-monochrome .service-card h3 { margin-bottom: 12px; font-size: 16px; }
  .booking-page.booking-monochrome .service-card .select-box { top: 18px; right: 16px; }
  .booking-page.booking-monochrome .service-grid.is-grid .service-meta { display: flex; justify-content: space-between; align-items: center; }
  .booking-page.booking-monochrome .time-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .booking-page.booking-monochrome .date-quick-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .booking-page.booking-monochrome .booking-date-row { display: block; flex: 0 0 104px; min-height: 80px; padding: 12px 10px; scroll-snap-align: start; }
  .booking-page.booking-monochrome .date-row-copy { display: grid; gap: 5px; }
  .booking-page.booking-monochrome .date-row-copy strong { font-size: 14px; }
  .booking-page.booking-monochrome .date-row-copy span { font-size: 12px; }
  .booking-page.booking-monochrome .date-row-arrow { display: none; }
  .booking-page.booking-monochrome .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .booking-page.booking-monochrome .slot-card { padding: 12px 5px; min-width: 0; }
  .booking-page.booking-monochrome .slot-card strong { font-size: 14px; }
  .booking-page.booking-monochrome .slot-card span { font-size: 11px; }
  .booking-page.booking-monochrome .booking-date-sheet .booking-date-row { width: 100%; min-height: 56px; padding: 12px 16px; }
  .booking-page.booking-monochrome .booking-date-sheet .date-row-copy { display: flex; justify-content: space-between; }
  .booking-page.booking-monochrome .summary-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding-block: 16px; }
  .booking-page.booking-monochrome .summary-row dt { grid-column: 1; font-size: 13px; }
  .booking-page.booking-monochrome .summary-row dd { grid-column: 1; font-size: 16px; }
  .booking-page.booking-monochrome .summary-edit { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .booking-page.booking-monochrome .confirmation-card h2 { font-size: 28px; }
  .booking-page.booking-monochrome .confirmation-card > .primary-btn { width: 100%; min-width: 0; }
}