/* Pro: waitlist requests on Bookings > Requests, and their settings. The
   strip is drawn apart from booked appointments by its dashed frame; each
   card opens the request's details like a booking does. */
body.pro-mode .business-waitlist-strip {
  display: grid; gap: 12px; margin: 0 0 16px; padding: 14px 16px 16px;
  border: 1.5px dashed #c7b6f2; border-radius: 16px; background: #faf8ff;
}
body.pro-mode .business-waitlist-strip > header { display: flex; align-items: center; gap: 10px; }
body.pro-mode .business-waitlist-strip > header h2 { margin: 0; font-size: 15px; font-weight: 700; }
body.pro-mode .business-waitlist-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
body.pro-mode .business-waitlist-card {
  position: relative; display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid #e3dbf7; border-radius: 14px; background: #fff;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
body.pro-mode .business-waitlist-card:hover { border-color: #c9b9f1; box-shadow: 0 8px 20px -16px rgba(40, 24, 90, .45); }
/* The whole card is the open button; its own buttons sit above it. */
body.pro-mode .business-waitlist-card-open {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: inherit; background: transparent; cursor: pointer;
}
body.pro-mode .business-waitlist-card-open:focus-visible { outline: 2px solid #6d4fd0; outline-offset: 2px; }
body.pro-mode .business-waitlist-card > :not(.business-waitlist-card-open) { position: relative; z-index: 1; pointer-events: none; }
body.pro-mode .business-waitlist-card > .business-waitlist-actions { pointer-events: auto; }
body.pro-mode .business-waitlist-card-due { color: #8a5a00; font-size: 12px; font-weight: 600; }
body.pro-mode .business-waitlist-card > strong { font-size: 15px; }
body.pro-mode .business-waitlist-card > p { margin: 0; color: #5f5a69; font-size: 13px; }
body.pro-mode .business-waitlist-card ul { display: grid; gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; }
body.pro-mode .business-waitlist-card li::before { content: "•"; margin-right: 6px; color: #6d4fd0; }
body.pro-mode .business-waitlist-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
body.pro-mode .business-waitlist-actions.is-drawer { margin-top: 4px; }
body.pro-mode .business-waitlist-actions.is-drawer > button { flex: 1 1 0; min-height: 44px; }
/* Accept and Decline take the colours of Confirm and Cancel on a booking. */
body.pro-mode button.business-waitlist-accept-button:not([disabled]) {
  background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important;
}
body.pro-mode button.business-waitlist-accept-button:not([disabled]):hover {
  background: var(--color-accent-deep) !important; border-color: var(--color-accent-deep) !important;
}
body.pro-mode :is(.business-waitlist-actions, .business-waitlist-accept) [data-business-action="waitlist-decline"]:not([disabled]) {
  background: var(--color-danger-soft) !important; border-color: var(--color-danger-line) !important; color: var(--color-danger) !important;
}
body.pro-mode :is(.business-waitlist-actions, .business-waitlist-accept) [data-business-action="waitlist-decline"]:not([disabled]):hover {
  background: #f9e9ea !important; border-color: #d9a5a9 !important; color: #8c2f38 !important;
}

/* The request's details, in the booking details panel. */
body.pro-mode .business-waitlist-detail { display: grid; gap: 18px; }
body.pro-mode .business-waitlist-detail-status { margin: 0; color: #8a5a00; font-size: 13px; font-weight: 600; }
body.pro-mode .business-waitlist-detail-status:not(.is-waiting) { color: #5f5a69; }
body.pro-mode .business-waitlist-detail-list { display: grid; gap: 0; margin: 0; border-top: 1px solid #ece8f2; }
body.pro-mode .business-waitlist-detail-list > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #ece8f2; }
body.pro-mode .business-waitlist-detail-list dt { color: #6f6879; font-size: 13px; font-weight: 500; }
body.pro-mode .business-waitlist-detail-list dd { margin: 0; color: #17131f; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
body.pro-mode .business-waitlist-detail-list dd ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.pro-mode .business-waitlist-detail-list dd a { color: inherit; }
body.pro-mode .business-waitlist-photos { display: grid; gap: 10px; }
body.pro-mode .business-waitlist-photos h3 { margin: 0; font-size: 14px; font-weight: 700; }
body.pro-mode .business-waitlist-photo-group { display: grid; gap: 6px; }
body.pro-mode .business-waitlist-photo-group > span { color: #6f6879; font-size: 12px; font-weight: 600; }
body.pro-mode .business-waitlist-photo-group > div { display: flex; flex-wrap: wrap; gap: 8px; }
body.pro-mode .business-waitlist-photo-group img { display: block; width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: #f2eff6; }
body.pro-mode button.rl-need-row { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
@media (max-width: 760px) {
  body.pro-mode .business-waitlist-detail-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
body.pro-mode .business-waitlist-accept { display: grid; gap: 10px; margin-top: 6px; }
body.pro-mode .business-waitlist-accept label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; }
body.pro-mode .business-waitlist-accept select { min-height: 40px; padding: 0 10px; border: 1px solid #d9d4e2; border-radius: 10px; font-size: 14px; }
body.pro-mode .business-waitlist-accept > div { display: flex; justify-content: flex-end; gap: 8px; }
body.pro-mode .business-waitlist-settings-reveal { overflow: hidden; }
body.pro-mode .business-waitlist-settings-reveal[hidden] { display: none; }
body.pro-mode .business-waitlist-settings .business-waitlist-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; }
body.pro-mode .business-waitlist-settings .business-waitlist-settings-grid label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
body.pro-mode .business-waitlist-settings .business-waitlist-settings-grid select { min-height: 42px; padding: 0 10px; border: 1px solid #d9d4e2; border-radius: 10px; font-size: 14px; }
body.pro-mode .business-waitlist-settings .business-waitlist-settings-grid small { color: #6f6879; font-size: 12px; font-weight: 400; line-height: 1.4; }
@media (max-width: 760px) {
  body.pro-mode .business-waitlist-cards { grid-template-columns: minmax(0, 1fr); }
  body.pro-mode .business-waitlist-settings .business-waitlist-settings-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The hidden checkbox must sit on its own switch. Without a positioned label
   it was placed against the whole drawer, 2000px down, and focusing it on a
   click scrolled the drawer there, leaving the footer mid-drawer. */
body.pro-mode .business-waitlist-settings .business-switch { position: relative; }
body.pro-mode .business-waitlist-settings .business-switch input { inset: 0; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }

/* "Discard unsaved changes?" takes over the Booking settings footer. */
body.pro-mode .business-booking-settings-footer { position: relative; }
body.pro-mode .business-booking-settings-discard {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 inherit; padding-inline: 18px; background: #fff;
  animation: business-discard-in 200ms cubic-bezier(.22, 1, .36, 1) both;
}
body.pro-mode .business-booking-settings-discard > span { color: #17131f; font-size: 14px; font-weight: 600; }
body.pro-mode .business-booking-settings-discard > div { display: flex; gap: 8px; }
@keyframes business-discard-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.pro-mode .business-booking-settings-discard { animation: none; } }

/* The Booking settings panel only scrolls its body. As overflow: hidden it
   could still be scrolled by focus or scrollIntoView, which lifted the whole
   panel and left the footer mid-drawer over blank space. clip cannot scroll. */
body.pro-mode [data-team-drawer="booking-settings"] .business-team-drawer { overflow: clip; }

/* A card opens the request; it says so at its foot. */
body.pro-mode .business-waitlist-card-cta { display: inline-flex; align-items: center; gap: 4px; justify-self: end; margin-top: 4px; color: #5b3f8c; font-size: 12.5px; font-weight: 650; }
body.pro-mode .business-waitlist-card-cta .icon { width: 14px; height: 14px; transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .business-waitlist-card:hover .business-waitlist-card-cta .icon { transform: translateX(3px); }

/* ---- A request, opened: the stylist's day and the time to book ----------- */
body.pro-mode .rl-wl-avatar { background: linear-gradient(160deg, #8a63d2, #b9a2ec) !important; }
body.pro-mode .rl-wl-avatar .icon { width: 20px; height: 20px; }
body.pro-mode .rl-wl { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 20px; align-items: start; padding: 8px 28px 28px; }
body.pro-mode .rl-wl-main, body.pro-mode .rl-wl-side { min-width: 0; }
body.pro-mode .rl-wl-side { display: grid; gap: 14px; align-content: start; }
body.pro-mode .rl-wl-card { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid #e6e2ee; border-radius: 16px; background: #fff; }
body.pro-mode .rl-wl-card h3 { margin: 0; color: #17131f; font-size: 15px; font-weight: 700; }

/* The day. */
body.pro-mode .rl-wl-day { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e6e2ee; border-radius: 16px; background: #fff; }
body.pro-mode .rl-wl-day-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid #efecf4; }
body.pro-mode .rl-wl-day-head > div { display: grid; gap: 2px; }
body.pro-mode .rl-wl-day-head strong { color: #17131f; font-size: 15px; }
body.pro-mode .rl-wl-day-head span { color: #6f6879; font-size: 12.5px; }
body.pro-mode .rl-wl-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; color: #6f6879; font-size: 11.5px; font-weight: 600; }
body.pro-mode .rl-wl-legend li { display: inline-flex; align-items: center; gap: 6px; }
body.pro-mode .rl-wl-legend li::before { width: 12px; height: 12px; border-radius: 3px; content: ""; }
body.pro-mode .rl-wl-legend .is-window::before { border: 1.5px dashed #8a63d2; background: rgb(138 99 210 / 12%); }
body.pro-mode .rl-wl-legend .is-busy::before { border-left: 3px solid #9aa6a1; background: #eef1f0; }
body.pro-mode .rl-wl-legend .is-off::before { background: repeating-linear-gradient(135deg, #eef0f1 0 3px, #e1e5e7 3px 6px); }
body.pro-mode .rl-wl-dates { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid #efecf4; scrollbar-width: none; }
body.pro-mode .rl-wl-dates > button { display: grid; flex: none; gap: 1px; min-height: 0; padding: 7px 12px; border: 1px solid #e3dbf7; border-radius: 12px; color: #3c3448; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 200ms ease; }
body.pro-mode .rl-wl-dates > button b { font-size: 13px; }
body.pro-mode .rl-wl-dates > button span { color: #6f6879; font-size: 11.5px; }
body.pro-mode .rl-wl-dates > button:hover:not(:disabled) { border-color: #c9b9f1; }
body.pro-mode .rl-wl-dates > button.is-active { border-color: #8a63d2; background: #f6f2ff; box-shadow: 0 0 0 3px rgb(138 99 210 / 14%); }
body.pro-mode .rl-wl-dates > button:disabled { opacity: .45; cursor: not-allowed; }
body.pro-mode .rl-wl-scroll { position: relative; height: clamp(360px, calc(100vh - 330px), 760px); overflow-y: auto; overscroll-behavior: contain; }
body.pro-mode .rl-wl-grid { position: relative; margin: 12px 14px 12px 0; }
body.pro-mode .rl-wl-hour { position: absolute; left: 64px; right: 0; height: 0; border-top: 1px solid #eef0f2; pointer-events: none; }
body.pro-mode .rl-wl-hour > i { position: absolute; top: -8px; right: calc(100% + 10px); color: #8a8494; font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
body.pro-mode .rl-wl-track { position: absolute; inset: 0 0 0 64px; }
body.pro-mode .rl-wl-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, rgb(238 240 241 / 85%) 0 6px, rgb(225 229 231 / 85%) 6px 12px); pointer-events: none; }
/* The customer's time lies over the day (appointments show through it), so
   it reads as the place to book; the new appointment sits above it. */
body.pro-mode .rl-wl-window { position: absolute; left: 0; right: 0; z-index: 3; border: 1.5px dashed rgb(138 99 210 / 45%); border-radius: 12px; background: rgb(138 99 210 / 5%); cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; }
body.pro-mode .rl-wl-window.is-active { border-color: #8a63d2; background: rgb(138 99 210 / 9%); }
body.pro-mode .rl-wl-window:hover { background: rgb(138 99 210 / 14%); }
/* Each time's tag sits on its top edge, above everything, at the right. */
body.pro-mode .rl-wl-window-label { position: absolute; right: 12px; z-index: 6; padding: 2px 9px; border: 1px solid rgb(138 99 210 / 40%); border-radius: 999px; color: #5b3f8c; background: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; transform: translateY(-50%); pointer-events: none; }
body.pro-mode .rl-wl-window-label.is-active { border-color: #8a63d2; color: #fff; background: #8a63d2; }
body.pro-mode :is(.rl-wl-busy, .rl-wl-block) { position: absolute; left: 10px; right: 10px; z-index: 2; display: grid; align-content: start; gap: 1px; overflow: hidden; padding: 4px 9px; border-radius: 9px; font-size: 12px; line-height: 1.3; pointer-events: none; }
body.pro-mode .rl-wl-busy { border-left: 3px solid #9aa6a1; color: #3c4844; background: #eef1f0; }
body.pro-mode .rl-wl-block { color: #5f6b66; background: repeating-linear-gradient(135deg, #f1f3f4 0 6px, #e7eaec 6px 12px); }
body.pro-mode :is(.rl-wl-busy, .rl-wl-block) b { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode :is(.rl-wl-busy, .rl-wl-block) small { overflow: hidden; color: #6f7a76; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
/* The new appointment: in its service's colour, above everything, moving
   with a spring; red-edged where something is in the way. */
body.pro-mode .rl-wl-pick {
  --category-color: #7655a1;
  position: absolute; left: 22px; right: 22px; z-index: 5; display: grid; align-content: start; gap: 1px; overflow: hidden;
  padding: 5px 10px; border: 2px solid var(--category-color); border-radius: 10px;
  color: #17131f; background: color-mix(in srgb, var(--category-color) 20%, #fff);
  box-shadow: 0 12px 26px -14px rgb(23 19 31 / 55%); font-size: 12.5px; line-height: 1.3; cursor: grab; touch-action: none;
  transition: top 260ms cubic-bezier(.34, 1.36, .64, 1), box-shadow 200ms ease, transform 200ms ease;
  animation: rl-wl-pick-in 420ms cubic-bezier(.34, 1.56, .64, 1) both;
}
body.pro-mode .rl-wl-pick b { font-weight: 700; }
body.pro-mode .rl-wl-pick small { color: #3c3448; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-wl-pick:hover { box-shadow: 0 16px 30px -14px rgb(23 19 31 / 60%); }
body.pro-mode .rl-wl-pick.is-dragging { transition: none; cursor: grabbing; transform: scale(1.02); animation: none; }
body.pro-mode .rl-wl-pick.has-warning { border-color: #d4453c; background: color-mix(in srgb, #d4453c 10%, #fff); }
body.pro-mode .rl-wl-ghost { position: absolute; left: 22px; right: 22px; z-index: 4; padding: 4px 10px; border: 1.5px dashed color-mix(in srgb, var(--category-color, #7655a1) 70%, transparent); border-radius: 10px; color: #5b3f8c; background: rgb(255 255 255 / 55%); font-size: 11.5px; font-weight: 700; pointer-events: none; transition: top 90ms ease-out; }
body.pro-mode .rl-wl-ghost[hidden] { display: none; }
@keyframes rl-wl-pick-in { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: none; } }

/* The time to book. */
body.pro-mode .rl-wl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.pro-mode .rl-wl-field { display: grid; gap: 4px; min-width: 0; margin: 0; }
body.pro-mode .rl-wl-field.is-wide { grid-column: 1 / -1; }
body.pro-mode .rl-wl-field > span { color: #5f5a69; font-size: 12px; font-weight: 600; }
body.pro-mode .rl-wl-field select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #d9d4e2; border-radius: 11px; background: #fff; font: inherit; font-size: 14px; }
body.pro-mode .rl-wl-field.is-readonly { align-content: start; }
body.pro-mode .rl-wl-field.is-readonly strong { display: flex; align-items: center; min-height: 42px; color: #17131f; font-size: 15px; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-wl-field.is-readonly small { margin-top: -10px; color: #8a8494; font-size: 11.5px; }
body.pro-mode :is(.rl-wl-hint, .rl-wl-empty) { margin: 0; color: #6f6879; font-size: 12.5px; line-height: 1.45; }
body.pro-mode .rl-wl-empty { color: #8a5a00; }
body.pro-mode .rl-wl-warnings { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #f1d39a; border-radius: 12px; background: #fffaf0; transition: border-color 200ms ease, background-color 200ms ease; }
body.pro-mode .rl-wl-warnings.is-confirmed { border-color: #b9dfcd; background: #f2faf6; }
body.pro-mode .rl-wl-warnings strong { color: #7a4b00; font-size: 13.5px; }
body.pro-mode .rl-wl-warnings ul { display: grid; gap: 3px; margin: 0; padding-left: 18px; color: #5f4a1f; font-size: 13px; }
body.pro-mode .rl-wl-override { display: inline-flex; align-items: center; gap: 8px; color: #3c3448; font-size: 13px; font-weight: 600; cursor: pointer; }
body.pro-mode .rl-wl-override input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: #1f6b52; }
body.pro-mode .rl-wl-promise { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #1f6b52; font-size: 12.5px; line-height: 1.45; }
body.pro-mode .rl-wl-promise .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
body.pro-mode .rl-wl-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
body.pro-mode .rl-wl-actions .business-waitlist-accept-button { min-height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 650; }
body.pro-mode .rl-wl-actions .business-waitlist-accept-button .business-settings-save-spinner { margin-right: 8px; }
body.pro-mode button.rl-wl-decline { min-height: 0; padding: 6px 2px; border: 0; color: #a3343c; background: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.pro-mode button.rl-wl-decline:hover { text-decoration: underline; text-underline-offset: 3px; }
body.pro-mode .rl-wl-decline-ask { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid #efc3c6; border-radius: 12px; background: #fdf3f4; color: #5f2a30; font-size: 13px; font-weight: 600; animation: rl-wl-pick-in 260ms ease both; }
body.pro-mode .rl-wl-decline-ask > div { display: flex; justify-content: flex-end; gap: 8px; }
body.pro-mode .rl-wl-decline-ask .rl-wl-decline-confirm:not([disabled]) { border-color: var(--color-danger-line) !important; color: var(--color-danger) !important; background: var(--color-danger-soft) !important; }
body.pro-mode .rl-wl-request .business-waitlist-detail-list > div { grid-template-columns: 110px minmax(0, 1fr); padding: 10px 0; }
@media (max-width: 980px) {
  body.pro-mode .rl-wl { grid-template-columns: minmax(0, 1fr); padding: 8px 16px 20px; }
  body.pro-mode .rl-wl-scroll { height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-wl-pick, .rl-wl-ghost, .rl-wl-window, .rl-wl-dates > button) { transition: none !important; animation: none !important; }
}
/* The name sits beside its icon, as a customer's window has it. */
body.pro-mode .business-team-drawer-layer[data-team-drawer="waitlist-request"] .business-team-drawer-header > div:not(.business-team-drawer-header-actions) { flex: 1 1 auto; min-width: 0; text-align: left; }
body.pro-mode .rl-wl-customer { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
body.pro-mode .rl-wl-customer > i { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #c8532f; font-size: 12px; font-style: normal; font-weight: 700; }