.booking-policy {
  margin: 24px 0;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--border, #d9d9d9);
  border-radius: var(--radius, 12px);
  background: var(--surface, #fff);
}
.booking-policy details summary {
  cursor: pointer;
  font-weight: 700;
}
.booking-policy-content {
  margin-top: 16px;
  white-space: pre-line;
}
.booking-policy-content > *:first-child { margin-top: 0; }
.booking-policy-accept {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  cursor: pointer;
}
.booking-policy-accept input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
/* ---- On-site booking (/book) ---- */
.booking-steps { display: flex; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; flex-wrap: wrap; }
.booking-steps li { flex: 1; min-width: 110px; text-align: center; font-size: .82rem; padding: .55rem .4rem; border-radius: 999px; background: #fff; border: 1px solid rgba(0,0,0,.1); color: #777; }
.booking-steps li.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.booking-steps li.done { background: var(--light); border-color: var(--accent); color: var(--dark); }
.booking-step h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.booking-alert { padding: .8rem 1rem; border-radius: 8px; margin: 0 0 1rem; background: var(--light); border: 1px solid var(--accent); }
.booking-alert.is-error { background: #fdf0ef; border-color: #e3574b; color: #a02f26; }
.booking-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.booking-option { display: flex; flex-direction: column; gap: .25rem; text-align: left; padding: .9rem 1rem; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.booking-option:hover { border-color: var(--primary); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.08)); transform: translateY(-2px); }
.booking-option .opt-name { font-weight: 600; color: var(--dark); }
.booking-option .opt-meta { font-size: .85rem; color: #777; }
.booking-category-navigation { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .25rem; }
.booking-category-breadcrumb { margin: 0; color: var(--dark); font-weight: 600; overflow-wrap: anywhere; }
.booking-category { min-height: 96px; justify-content: center; }
.booking-category .opt-name { overflow-wrap: anywhere; }
.booking-date-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.booking-date-row input[type="date"] { padding: .55rem .7rem; border: 1px solid rgba(0,0,0,.18); border-radius: 8px; font: inherit; }
.booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; margin-bottom: 1.25rem; }
.booking-slot { padding: .55rem .25rem; text-align: center; background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; cursor: pointer; font: inherit; font-weight: 500; transition: all .12s; }
.booking-slot:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.booking-empty, .booking-loading { color: #777; }
.booking-loading { display: flex; align-items: center; gap: .6rem; }
.booking-loading::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid rgba(0, 0, 0, .15); border-top-color: var(--primary);
  animation: bk-spin .7s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .booking-loading::before { animation: none; } }
.booking-option:focus-visible, .booking-slot:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.booking-summary { background: var(--light); border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 1.25rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-size: .95rem; }
.summary-row .summary-label { color: #777; }
.summary-row .summary-value { font-weight: 600; color: var(--dark); text-align: right; }
#booking-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
#booking-form .form-grid,
#booking-form .form-field,
#booking-form fieldset,
#booking-form #guest-details,
#consultation-fields,
#consultation-fields .cf-field { min-width: 0; }
#booking-form .form-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
#guest-details { min-width: 0; margin-block: 1.25rem; }
#guest-details .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#guest-details .form-field { min-width: 0; }
#guest-details .form-field input { width: 100%; min-width: 0; box-sizing: border-box; }
#guest-details > label { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
#guest-details > label input[type="checkbox"] { flex: 0 0 auto; margin-top: .2rem; }
#booking-form label { font-size: .88rem; font-weight: 600; color: var(--dark); }
#booking-form input, #booking-form textarea { padding: .6rem .75rem; border: 1px solid rgba(0,0,0,.18); border-radius: 8px; font: inherit; }
#booking-form .form-field > label,
#booking-form .cf-label { display: block; max-width: 100%; overflow-wrap: anywhere; }
#booking-form .form-field > input,
#booking-form .form-field > select,
#booking-form .form-field > textarea,
#booking-form .cf-input { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
#consultation-fields fieldset {
  min-inline-size: 0; width: 100%; margin: 0 0 1rem; padding: clamp(.85rem, 3vw, 1.25rem);
  border: 1px solid rgba(0,0,0,.14); border-radius: 10px;
}
#consultation-fields .cf-field { width: 100%; }
#consultation-fields .cf-choice,
#consultation-fields .cf-consent,
#booking-form #guest-details > label,
#booking-policy > label { min-width: 0; overflow-wrap: anywhere; }
#booking-form input:focus, #booking-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.booking-hint { font-size: .85rem; color: #777; margin: -.25rem 0 .9rem; }
.field-error { color: #a02f26; font-size: .82rem; min-height: 1em; }
.booking-actions { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.booking-confirm { text-align: center; padding: 1.5rem 0; }
.booking-confirm-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 2rem; line-height: 64px; }
.booking-reference { font-weight: 700; color: var(--dark); }
#confirm-payment { margin: 1rem 0; }
.booking-confirm .btn { margin: .35rem .25rem 0; }
@media (max-width: 640px) {
  #guest-details .form-grid { grid-template-columns: minmax(0, 1fr); }
  #booking-form .form-grid { grid-template-columns: 1fr; }
  .booking-steps li { min-width: 45%; }
}
@media (max-width: 480px) {
  #booking-form .form-grid,
  #guest-details .form-grid,
  .group-participant .form-grid { grid-template-columns: minmax(0, 1fr); }
  #booking-form .form-field { width: 100%; }
  #guest-details > label,
  #booking-policy > label { align-items: flex-start; }
  #consultation-fields { padding: 1rem; }
}

/* Inline consultation form (uses the cf-* field styles from forms.css). */
.consultation-fields { margin: 1.25rem 0; padding: 1.25rem; background: #fafbfc; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; }
.consultation-title { font-size: 1.15rem; margin: 0 0 .75rem; }
.booking-note { margin: 1rem 0; padding: .8rem 1rem; border-radius: 8px; background: var(--light); border-left: 3px solid var(--accent); color: var(--dark); font-size: .95rem; }

/* Owner-set notice shown above the booking steps (from the Orbis dashboard). */
.booking-notice { padding: .8rem 1rem; border-radius: 8px; margin: 0 0 1rem; background: #fff8e6; border: 1px solid #e8c46a; color: #6b4d00; }

/* ---- Month availability calendar ---- */
.booking-when { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1.25rem; }
@media (max-width: 859px) { .booking-when { grid-template-columns: minmax(0, 1fr); } }
/* Calendar day aspect ratios must not force the parent grid beyond a phone. */
.booking-when > * { min-width: 0; }
.booking-cal-panel { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.bk-cal-title { font-weight: 600; }
.bk-cal-nav { background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; width: 34px; height: 34px; font-size: 1.1rem; cursor: pointer; }
.bk-cal-nav:disabled { opacity: .4; cursor: default; }
.bk-cal-nav:focus-visible, .bk-cal-day:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-cal-dow { text-align: center; font-size: .72rem; font-weight: 600; color: #667085; padding: .25rem 0; text-transform: uppercase; }
.bk-cal-day { min-width: 0; width: 100%; padding: 0; position: relative; aspect-ratio: 1 / .9; min-height: 40px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: border-color .12s, background .12s; }
.bk-cal-day:not(:disabled):hover { border-color: var(--primary); }
.bk-cal-empty { border: 0; background: transparent; cursor: default; }
.bk-cal-off, .bk-cal-full { background: #f4f5f7; color: #98a2b3; cursor: default; }
.bk-cal-today .bk-cal-num { text-decoration: underline; font-weight: 700; }
.bk-cal-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, #fff); box-shadow: 0 0 0 1px var(--primary) inset; }
.bk-cal-num { font-size: .85rem; }
.bk-cal-marks { display: flex; gap: 3px; }
.bk-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.bk-dot-m { background: #F26A1B; }
.bk-dot-a { background: #1786E8; }
.bk-dot-e { background: #E84393; }
.bk-dot-l { background: #F5A623; }
.booking-cal-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .7rem; font-size: .78rem; color: #667085; }
.booking-cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bk-cal-skel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-cal-skel span { min-width: 0; width: 100%; aspect-ratio: 1 / .9; min-height: 40px; border-radius: 8px; background: linear-gradient(100deg, #eef0f3 40%, #f7f8fa 50%, #eef0f3 60%); background-size: 200% 100%; animation: bkShimmer 1.2s infinite; }
@keyframes bkShimmer { to { background-position: -200% 0; } }
.booking-slot-panel { min-width: 0; }
.booking-slot-head { font-weight: 600; margin: 0 0 .6rem; }
.booking-slot-group { margin-bottom: .9rem; }
.booking-slot-part { font-size: .8rem; font-weight: 600; text-transform: uppercase; color: #667085; margin-bottom: .4rem; }
.booking-slot-none { font-size: .85rem; color: #98a2b3; }
.booking-waitlist { margin-top: 1rem; border: 1px dashed rgba(0,0,0,.2); border-radius: 12px; padding: 1rem; background: #fbfcfe; }
.booking-waitlist h3 { margin: 0 0 .3rem; font-size: 1rem; }
.booking-waitlist p { margin: 0 0 .7rem; font-size: .88rem; color: #475467; }
.booking-waitlist .wl-msg { margin-top: .5rem; font-size: .88rem; color: var(--primary); }

/* ---- Month-level availability banners ---- */
.bk-cal-month-notice { font-size: .82rem; text-align: center; border-radius: 8px; padding: .45rem .75rem; margin-bottom: .6rem; }
.bk-cal-notice-full  { background: #fef3f2; color: #b91c1c; border: 1px solid #fca5a5; }
.bk-cal-notice-closed { background: #f4f5f7; color: #6b7280; border: 1px solid #d1d5db; }
.bk-cal-notice-empty { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.bk-cal-notice-low   { background: #fffbeb; color: #78350f; border: 1px solid #fde68a; }
/* Closed (non-past) — slightly warmer off-colour to distinguish from past */
.bk-cal-day.bk-cal-closed { background: #f9f0f0; color: #c0847a; }

/* ---- Multi-service summary rows ---- */
.summary-section-head { border-top: 1px solid rgba(0,0,0,.08); padding-top: .5rem; margin-top: .25rem; }
.summary-item-row { position: relative; }
.summary-item-remove { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #9ca3af; font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.summary-item-remove:hover { color: #b91c1c; }
/* Add-another-service nudge */
.booking-add-service { margin-top: .75rem; font-size: .88rem; }
.booking-add-service-btn { background: none; border: 1px dashed rgba(0,0,0,.25); border-radius: 8px; padding: .4rem .9rem; cursor: pointer; font: inherit; color: var(--primary); font-size: .88rem; }
.booking-add-service-btn:hover { background: var(--light); }

/* Canonical Duo/Triple journey. Availability is supplied by the shared
   staff-combinations service; this layer only presents its result. */
.booking-group-date { display: grid; gap: .45rem; max-width: 20rem; }
.booking-group-date label, .group-participant legend { font-weight: 600; color: var(--dark); }
.booking-group-date input { padding: .6rem .7rem; border: 1px solid rgba(0,0,0,.18); border-radius: 8px; font: inherit; }
.booking-group-slot { width: 100%; margin-bottom: .5rem; }
.group-participants { margin: 1.25rem 0; padding: 1rem; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fafbfc; }
.group-participant { margin: 1rem 0 0; padding: .8rem; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; }
.group-participant .form-grid { margin-top: .5rem; }