/* Salon service details, the Services step, and date and waitlist states in
   booking. Loaded after the older customer sheets. */

/* ---- Service details dialog ---------------------------------------------- */
.rl-service-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: #17131f;
  box-shadow: 0 30px 80px -30px rgba(23, 19, 31, .45);
  overflow: hidden;
}
.rl-service-dialog::backdrop { background: rgba(23, 19, 31, .38); backdrop-filter: blur(3px); animation: rl-service-scrim 200ms ease both; }
.rl-service-dialog.is-closing::backdrop { opacity: 0; transition: opacity 170ms ease; }
.rl-service-dialog-card { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; padding: 36px 40px 28px; }
.rl-service-dialog-close {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #17131f; cursor: pointer;
}
.rl-service-dialog-close:hover { background: #f4f1f8; }
.rl-service-dialog-close .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rl-service-dialog h2 { margin: 0 48px 18px 0; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.rl-service-dialog-body { overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.rl-service-dialog-body p { margin: 0 0 6px; color: #2c2735; font-size: 16px; line-height: 1.6; }
.rl-service-dialog-body p.is-empty { color: #7a7386; }
.rl-service-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.rl-service-dialog footer > span { display: grid; gap: 2px; }
.rl-service-dialog footer strong { font-size: 20px; font-weight: 700; }
.rl-service-dialog footer small { color: #6b6478; font-size: 14px; }
.rl-service-dialog-add { min-width: 120px; min-height: 48px; padding: 0 26px; border-radius: 999px; font-size: 16px; }
@keyframes rl-service-scrim { from { opacity: 0; } to { opacity: 1; } }

/* The whole service row opens its details; the name is the real button. */
.salon-profile-service-row[data-service-details-row] { cursor: pointer; transition: background-color 160ms ease; }
.salon-profile-service-open {
  all: unset; box-sizing: border-box; cursor: pointer; color: inherit; font: inherit; line-height: inherit;
}
.salon-profile-service-open:focus-visible { outline: 3px solid #916be8; outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .salon-profile-service-row[data-service-details-row]:hover { background-color: #faf8fe; }
  .salon-profile-service-row[data-service-details-row]:hover .salon-profile-service-open { text-decoration: underline; text-underline-offset: 3px; }
}

@media (max-width: 760px) {
  .rl-service-dialog {
    width: 100%; max-width: 100%; max-height: 86dvh; margin: auto 0 0; border-radius: 24px 24px 0 0;
  }
  .rl-service-dialog-card { padding: 28px 20px calc(16px + env(safe-area-inset-bottom)); }
  .rl-service-dialog-close { top: 10px; right: 10px; }
  .rl-service-dialog h2 { font-size: 22px; margin-bottom: 12px; }
  .rl-service-dialog-body p { font-size: 15px; }
  .rl-service-dialog footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid #efebf5; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-service-dialog::backdrop { animation: none; }
}

/* ---- Services step --------------------------------------------------------
   Cards like a menu: the name, the time, two lines of description, then the
   price and the add button on one line. No second box around the list. */
body.booking-workspace-mode .booking-guest-list .booking-guest-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.booking-workspace-mode .booking-guest-card.is-primary > .booking-guest-service-groups { gap: 28px; }
body.booking-workspace-mode .booking-service-group { display: grid; gap: 12px; padding: 0; border: 0; }
body.booking-workspace-mode .booking-service-group + .booking-service-group { margin-top: 12px; padding-top: 0; border-top: 0; }
body.booking-workspace-mode .booking-service-group > h3 { margin: 0 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
body.booking-workspace-mode .booking-guest-services { display: grid; gap: 12px; }
body.booking-workspace-mode .booking-guest-services .choice-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px;
  width: 100%; min-height: 0; margin: 0; padding: 20px 22px 18px;
  border: 1px solid #e6e2ed; border-radius: 16px; background: #fff; box-shadow: none;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.booking-workspace-mode .booking-guest-services .choice-card.has-photo { grid-template-columns: 72px minmax(0, 1fr); }
body.booking-workspace-mode .booking-guest-services .choice-card.has-photo .booking-service-photo { grid-row: 1; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; }
body.booking-workspace-mode .booking-guest-services .choice-card.has-photo .booking-service-photo img { width: 100%; height: 100%; object-fit: cover; }
body.booking-workspace-mode .booking-guest-services .choice-card.has-photo .booking-service-foot { grid-column: 1 / -1; }
body.booking-workspace-mode .booking-guest-services .booking-service-copy { display: grid; gap: 4px; min-width: 0; }
body.booking-workspace-mode .booking-guest-services .booking-service-copy > strong { color: #17131f; font-size: 17px; font-weight: 600; line-height: 1.3; }
body.booking-workspace-mode .booking-guest-services .booking-service-duration { color: #6f6879; font-size: 14px; font-weight: 500; }
body.booking-workspace-mode .booking-guest-services .booking-service-description {
  display: -webkit-box; overflow: hidden; margin-top: 4px; color: #6f6879; font-size: 14px; font-weight: 400; line-height: 1.5;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
body.booking-workspace-mode .booking-guest-services .booking-service-consultation,
body.booking-workspace-mode .booking-guest-services .booking-service-restriction { margin-top: 4px; font-size: 13px; }
body.booking-workspace-mode .booking-guest-services .booking-service-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.booking-workspace-mode .booking-guest-services .booking-service-foot b { color: #17131f; font-size: 17px; font-weight: 700; }
body.booking-workspace-mode .booking-guest-services .booking-service-select-marker {
  position: static; display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px;
  border: 1px solid #e0dbe8; border-radius: 50%; background: #fff; color: #17131f;
  box-shadow: 0 2px 6px -3px rgba(23, 19, 31, .25);
}
body.booking-workspace-mode .booking-guest-services .booking-service-select-marker .icon { width: 18px; height: 18px; }
body.booking-workspace-mode .booking-guest-services .choice-card.active { border-color: var(--rl-violet, #916be8); box-shadow: inset 0 0 0 1px var(--rl-violet, #916be8); }
body.booking-workspace-mode .booking-guest-services .choice-card.active .booking-service-select-marker { border-color: var(--rl-violet, #916be8); background: var(--rl-violet, #916be8); color: #fff; box-shadow: none; }
body.booking-workspace-mode .booking-guest-services .choice-card.is-unavailable { cursor: not-allowed; opacity: .6; }
/* Selecting is a single state change: no press scale, no focus ring from the
   click, no transition from the hover colour to the chosen one. */
body.booking-workspace-mode .booking-guest-services .choice-card,
body.booking-workspace-mode .booking-guest-services .choice-card:active { transform: none; transition: none; }
body.booking-workspace-mode .booking-guest-services .choice-card:focus:not(:focus-visible) { outline: none; }
@media (hover: hover) and (pointer: fine) {
  body.booking-workspace-mode .booking-guest-services .choice-card:not(.active):not(:disabled):hover { border-color: #cfc6de; box-shadow: 0 8px 22px -18px rgba(23, 19, 31, .45); }
  body.booking-workspace-mode .booking-guest-services .choice-card:not(.active):not(:disabled):hover .booking-service-select-marker { border-color: #17131f; }
}

/* Categories: the row scrolls under two arrows that appear only when there
   is more that way, with a fade at the cut edge. */
body.booking-workspace-mode .booking-category-rail {
  position: sticky; top: 0; z-index: 11; margin: 2px -4px 8px; padding: 10px 4px 14px;
  background: linear-gradient(to bottom, var(--rl-booking-bg, #f7f7fa) 78%, rgba(247, 247, 250, 0));
}
body.booking-workspace-mode .booking-category-rail > .booking-category-chips {
  position: static; margin: 0; padding: 0; background: none; scroll-behavior: auto;
  -webkit-mask-image: none; mask-image: none;
  transition: -webkit-mask-image 200ms ease;
}
body.booking-workspace-mode .booking-category-rail.has-more-right > .booking-category-chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
body.booking-workspace-mode .booking-category-rail.has-more-left > .booking-category-chips { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent); }
body.booking-workspace-mode .booking-category-rail.has-more-left.has-more-right > .booking-category-chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent); }
body.booking-workspace-mode .booking-category-arrow {
  position: absolute; top: 10px; z-index: 2; display: grid; place-items: center;
  width: 38px; height: 38px; min-width: 38px; min-height: 38px; padding: 0;
  border: 1px solid #e4e0ec; border-radius: 50%; background: #fff; color: #17131f;
  box-shadow: 0 6px 16px -8px rgba(23, 19, 31, .45);
  opacity: 0; pointer-events: none; transform: scale(.85);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), border-color 160ms ease;
  cursor: pointer;
}
body.booking-workspace-mode .booking-category-arrow .icon { width: 18px; height: 18px; }
body.booking-workspace-mode .booking-category-arrow.is-prev { left: 0; }
body.booking-workspace-mode .booking-category-arrow.is-prev .icon { transform: rotate(180deg); }
body.booking-workspace-mode .booking-category-arrow.is-next { right: 0; }
body.booking-workspace-mode .booking-category-arrow.is-visible { opacity: 1; pointer-events: auto; transform: none; }
body.booking-workspace-mode .booking-category-arrow:hover { border-color: #17131f; }

@media (max-width: 760px) {
  body.booking-workspace-mode .booking-guest-services .choice-card { padding: 16px 16px 14px; gap: 12px; }
  body.booking-workspace-mode .booking-guest-services .booking-service-copy > strong { font-size: 16px; }
  body.booking-workspace-mode .booking-guest-services .booking-service-description { font-size: 13px; }
  body.booking-workspace-mode .booking-guest-services .booking-service-foot b { font-size: 16px; }
  body.booking-workspace-mode .booking-service-group > h3 { font-size: 18px; }
  body.booking-workspace-mode .booking-category-rail { margin-inline: 0; padding-inline: 0; }
  body.booking-workspace-mode .booking-category-arrow { width: 34px; height: 34px; min-width: 34px; min-height: 34px; top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.booking-workspace-mode .booking-category-arrow { transition: none; }
}

/* ---- Stylist step: next opening, and a placeholder list while checking ----
   The placeholder has the stylist card's own shape in grey with one soft
   sweep, and is replaced once by the stylists who have time. */
body.booking-workspace-mode .booking-professional-next {
  display: block; margin-top: 2px; color: #3f7c62; font-size: 13px; font-style: normal; font-weight: 600;
}
body.booking-workspace-mode .booking-professional-option-shell.is-skeleton { pointer-events: none; transform: none; }
body.booking-workspace-mode .booking-professional-option-shell.is-skeleton > .booking-professional-option { cursor: default; }
body.booking-workspace-mode .is-skeleton :is(.booking-skeleton-avatar, .booking-skeleton-line) {
  display: block; border-radius: 999px;
  background: linear-gradient(90deg, #eeebf2 0%, #f7f5f9 45%, #eeebf2 90%) 0 0 / 220% 100%;
  animation: rl-skeleton-sweep 1.3s ease-in-out infinite;
}
body.booking-workspace-mode .is-skeleton .booking-skeleton-avatar { width: 68px; height: 68px; border-radius: 50%; }
body.booking-workspace-mode .is-skeleton .booking-professional-info { gap: 8px; }
body.booking-workspace-mode .is-skeleton .booking-skeleton-line { height: 12px; }
body.booking-workspace-mode .is-skeleton .booking-skeleton-line.is-name { width: 58%; height: 14px; }
body.booking-workspace-mode .is-skeleton .booking-skeleton-line.is-price { width: 34%; }
body.booking-workspace-mode .is-skeleton .booking-skeleton-line.is-next { width: 46%; }
body.booking-workspace-mode .is-skeleton > .booking-skeleton-line.is-profile { align-self: center; width: 92px; height: 34px; margin: 0 16px 0 8px; }
@keyframes rl-skeleton-sweep { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@media (max-width: 760px) {
  body.booking-workspace-mode .is-skeleton .booking-skeleton-avatar { width: 48px; height: 48px; }
  body.booking-workspace-mode .is-skeleton > .booking-skeleton-line.is-profile { justify-self: start; width: 84px; height: 14px; margin: 6px 13px 16px 73px; }
}
@media (prefers-reduced-motion: reduce) {
  body.booking-workspace-mode .is-skeleton :is(.booking-skeleton-avatar, .booking-skeleton-line) { animation: none; }
}

/* ---- Times: chosen on press ------------------------------------------------
   The pressed time takes the chosen look at once and the old one lets go in
   the same short colour fade. No scale, no pop. */
body.booking-workspace-mode .booking-professional-time-grid button { transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; transform: none; }
body.booking-workspace-mode .booking-professional-time-grid button strong { transition: color 120ms ease; }
body.booking-workspace-mode .booking-professional-time-grid button:active { transform: none; }

/* ---- Date step: a day without openings ----------------------------------- */
body.booking-workspace-mode .booking-month-day.is-unavailable:not(:disabled) { cursor: pointer; }
body.booking-workspace-mode .booking-month-day.is-unavailable:not(.active) span { color: #b3adbd; }
body.booking-workspace-mode .booking-date-unavailable {
  display: grid; justify-items: center; gap: 6px; padding: 28px 16px 20px; text-align: center;
}
body.booking-workspace-mode .booking-date-unavailable-mark {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 14px;
  background: linear-gradient(160deg, #a374fa, #e3d7ff); color: #fff; box-shadow: 0 12px 24px -16px rgba(111, 72, 208, .8);
}
body.booking-workspace-mode .booking-date-unavailable-mark .icon { width: 24px; height: 24px; }
body.booking-workspace-mode .booking-date-unavailable strong { color: #17131f; font-size: 18px; font-weight: 700; line-height: 1.3; }
body.booking-workspace-mode .booking-date-unavailable > small { color: #6f6879; font-size: 15px; }
body.booking-workspace-mode .booking-date-unavailable-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
body.booking-workspace-mode .booking-date-unavailable-actions > button { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; }
body.booking-workspace-mode .booking-date-unavailable-waitlist { width: 100%; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #ebe7f1; color: #6f6879; font-size: 14px; }
body.booking-workspace-mode .booking-date-unavailable-waitlist button {
  min-height: 0; padding: 0; border: 0; background: none; color: var(--rl-violet-deep, #6a48d0); font: inherit; font-weight: 600; cursor: pointer;
}
body.booking-workspace-mode .booking-date-unavailable-waitlist button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The professionals on a date. */
.rl-professionals-dialog .rl-service-dialog-body { margin-top: 0; }
.rl-professionals-dialog h2 { margin: 0 48px 4px 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.rl-professionals-date { margin: 0 0 18px; color: #6f6879; font-size: 14px; }
.rl-professionals-list { display: grid; gap: 10px; }
.rl-professional-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid #e6e2ed; border-radius: 16px; background: #fff;
}
.rl-professional-row.is-current { border-color: var(--rl-violet, #916be8); box-shadow: inset 0 0 0 1px var(--rl-violet, #916be8); }
.rl-professional-row img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.rl-professional-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.rl-professional-row strong { overflow: hidden; color: #17131f; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rl-professional-row small { color: #6f6879; font-size: 13px; }
.rl-professional-row.is-open small { color: #3f7c62; font-weight: 600; }
.rl-professional-row > button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; }
.rl-professional-current { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rl-violet, #916be8); color: #fff; }
.rl-professional-current .icon { width: 18px; height: 18px; }

/* ---- Waitlist ------------------------------------------------------------ */
body.booking-workspace-mode .booking-waitlist-card { display: grid; gap: 16px; }
body.booking-workspace-mode .booking-waitlist-rows { display: grid; gap: 12px; }
body.booking-workspace-mode .booking-waitlist-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px;
  padding: 18px 20px; border: 1px solid #e6e2ed; border-radius: 16px; background: #fff;
}
body.booking-workspace-mode .booking-waitlist-field { display: grid; gap: 8px; min-width: 0; }
body.booking-workspace-mode .booking-waitlist-field > span { color: #17131f; font-size: 14px; font-weight: 600; }
body.booking-workspace-mode .booking-waitlist-field select,
body.booking-workspace-mode .booking-waitlist-time {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 48px; height: 48px; padding: 0 14px;
  border: 1px solid #d9d4e2; border-radius: 12px; background: #fff; color: #17131f; font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
body.booking-workspace-mode .booking-waitlist-time .icon { width: 16px; height: 16px; transform: rotate(90deg); transition: transform 180ms ease; }
body.booking-workspace-mode .booking-waitlist-row.is-editing .booking-waitlist-time { border-color: var(--rl-violet, #916be8); box-shadow: 0 0 0 1px var(--rl-violet, #916be8); }
body.booking-workspace-mode .booking-waitlist-row.is-editing .booking-waitlist-time .icon { transform: rotate(-90deg); }
body.booking-workspace-mode .booking-waitlist-remove {
  display: grid; place-items: center; width: 44px; height: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #6f6879; cursor: pointer;
}
body.booking-workspace-mode .booking-waitlist-remove:hover { background: #f4f1f8; color: #17131f; }
body.booking-workspace-mode .booking-waitlist-remove .icon { width: 18px; height: 18px; }
body.booking-workspace-mode .booking-waitlist-editor {
  grid-column: 1 / -1; display: grid; gap: 14px; padding: 16px; border: 1px solid #ebe7f1; border-radius: 14px; background: #fff;
  box-shadow: 0 16px 36px -24px rgba(23, 19, 31, .45);
  animation: rl-waitlist-editor-in 200ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes rl-waitlist-editor-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
body.booking-workspace-mode .booking-waitlist-periods { display: flex; flex-wrap: wrap; gap: 8px; }
body.booking-workspace-mode .booking-waitlist-periods button {
  min-height: 40px; padding: 0 16px; border: 1px solid #e0dbe8; border-radius: 999px; background: #fff; color: #17131f; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
body.booking-workspace-mode .booking-waitlist-periods button.active { border-color: var(--rl-violet, #916be8); background: var(--rl-violet, #916be8); color: #fff; }
body.booking-workspace-mode .booking-waitlist-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Each time must hold the whole appointment: the editor says how long, and
   a time that is too short says so under its row. */
body.booking-workspace-mode .booking-waitlist-minimum { margin: 0; color: #6f6879; font-size: 13px; line-height: 1.45; }
body.booking-workspace-mode .booking-waitlist-short { grid-column: 1 / -1; margin: 2px 0 0; color: #b42318; font-size: 13px; font-weight: 500; }
body.booking-workspace-mode .booking-waitlist-row.is-short .booking-waitlist-time { border-color: #f0b4ae; }
body.booking-workspace-mode .booking-waitlist-range select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid #d9d4e2; border-radius: 12px; background: #fff; font-size: 16px; }
body.booking-workspace-mode .booking-waitlist-editor-actions { display: flex; justify-content: flex-end; gap: 10px; }
body.booking-workspace-mode .booking-waitlist-editor-actions button { min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; }
body.booking-workspace-mode .booking-waitlist-add {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid #e0dbe8; border-radius: 999px; background: #fff; color: #17131f; font-size: 14px; font-weight: 600; cursor: pointer;
}
body.booking-workspace-mode .booking-waitlist-add .icon { width: 16px; height: 16px; }
body.booking-workspace-mode .booking-waitlist-exit { margin: 0; color: #17131f; font-size: 14px; }
body.booking-workspace-mode .booking-waitlist-exit button { padding: 0; min-height: 0; border: 0; background: none; color: var(--rl-violet-deep, #6a48d0); font: inherit; cursor: pointer; }
body.booking-workspace-mode .booking-waitlist-exit button:hover { text-decoration: underline; text-underline-offset: 3px; }
body.booking-workspace-mode .booking-waitlist-confirm { padding: 22px; border: 1px solid #e6e2ed; border-radius: 16px; background: #fff; }
body.booking-workspace-mode .booking-waitlist-confirm header h2 { margin: 0; font-size: 20px; font-weight: 700; }
body.booking-workspace-mode .booking-waitlist-confirm header p { margin: 4px 0 0; color: #6f6879; font-size: 14px; }
body.booking-workspace-mode .booking-waitlist-summary { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid #efebf5; border-radius: 12px; }
body.booking-workspace-mode .booking-waitlist-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid #efebf5; font-size: 15px; }
body.booking-workspace-mode .booking-waitlist-summary li:first-child { border-top: 0; }
body.booking-workspace-mode .booking-waitlist-summary span { color: #6f6879; }
body.booking-workspace-mode .booking-waitlist-note { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
body.booking-workspace-mode .booking-waitlist-note small { color: #8a8398; font-weight: 500; }
body.booking-workspace-mode .booking-waitlist-note textarea { min-height: 84px; padding: 12px 14px; border: 1px solid #d9d4e2; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 400; resize: vertical; }
body.booking-workspace-mode .booking-waitlist-policy { margin: 0; color: #6f6879; font-size: 13px; line-height: 1.5; }
body.booking-workspace-mode .booking-waitlist-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff1f1; color: #9b2c2c; font-size: 14px; }
body.booking-workspace-mode .booking-waitlist-done { display: grid; justify-items: center; gap: 10px; padding: 32px 16px; text-align: center; }
body.booking-workspace-mode .booking-waitlist-done-mark {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--rl-violet, #916be8); color: #fff;
  animation: rl-waitlist-done 520ms cubic-bezier(.22, 1, .36, 1) both;
}
body.booking-workspace-mode .booking-waitlist-done-mark .icon { width: 26px; height: 26px; }
@keyframes rl-waitlist-done { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: none; } }
body.booking-workspace-mode .booking-waitlist-done h2 { margin: 6px 0 0; font-size: 22px; font-weight: 700; }
body.booking-workspace-mode .booking-waitlist-done p { max-width: 420px; margin: 0; color: #6f6879; font-size: 15px; line-height: 1.5; }
body.booking-workspace-mode .booking-waitlist-done .booking-waitlist-summary { width: min(420px, 100%); margin-top: 8px; text-align: left; }
@media (max-width: 760px) {
  body.booking-workspace-mode .booking-waitlist-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px; }
  body.booking-workspace-mode .booking-waitlist-remove { position: absolute; top: 4px; right: 4px; height: 40px; min-height: 40px; }
  body.booking-workspace-mode .booking-waitlist-field select,
  body.booking-workspace-mode .booking-waitlist-time { padding: 0 10px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body.booking-workspace-mode .booking-waitlist-editor,
  body.booking-workspace-mode .booking-waitlist-done-mark { animation: none; }
}

/* ---- My Hair: waitlist requests ------------------------------------------ */
body.customer-mode .me-waitlist-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
/* Every waitlist card has the same frame; Cancel sits at the foot of each
   card, so the buttons line up however long the card above them is. */
body.customer-mode .me-waitlist-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid #ebe7f1; border-radius: 16px; background: #fff;
}
body.customer-mode .me-waitlist-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
body.customer-mode .me-waitlist-status { flex: none; font-size: 12px; font-weight: 700; color: #6f6879; }
body.customer-mode .me-waitlist-status.is-accepted { color: #2f7a57; }
body.customer-mode .me-waitlist-card h3 { margin: 0; min-width: 0; font-size: 17px; font-weight: 700; }
body.customer-mode .me-waitlist-card p { margin: 0; color: #6f6879; font-size: 14px; }
body.customer-mode .me-waitlist-card ul { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
body.customer-mode .me-waitlist-card li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
body.customer-mode .me-waitlist-card li span { color: #6f6879; }
body.customer-mode .me-waitlist-card > footer { margin-top: auto; padding-top: 8px; }
body.customer-mode .me-waitlist-card:is(.is-declined, .is-expired, .is-cancelled) :is(h3, p, li) { color: #8a8398; }
body.customer-mode .me-waitlist-card:is(.is-declined, .is-expired, .is-cancelled) li strong { color: #8a8398; }
@media (max-width: 760px) {
  body.customer-mode.me-workspace-mode .me-waitlist-section { padding: 0; border: 0; background: transparent; }
  body.customer-mode .me-waitlist-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* The day's "not available" card arrives in steps: the mark pops, then its
   lines and buttons rise one after another. A card patched in place keeps
   still (is-settled). */
body.booking-workspace-mode .booking-date-unavailable:not(.is-settled) > * {
  animation: rl-unavailable-rise 380ms cubic-bezier(.22, 1, .36, 1) both;
}
body.booking-workspace-mode .booking-date-unavailable:not(.is-settled) > .booking-date-unavailable-mark { animation-name: rl-unavailable-pop; animation-duration: 420ms; }
body.booking-workspace-mode .booking-date-unavailable:not(.is-settled) > :nth-child(2) { animation-delay: 60ms; }
body.booking-workspace-mode .booking-date-unavailable:not(.is-settled) > :nth-child(3) { animation-delay: 110ms; }
body.booking-workspace-mode .booking-date-unavailable:not(.is-settled) > :nth-child(4) { animation-delay: 160ms; }
body.booking-workspace-mode .booking-date-unavailable:not(.is-settled) > :nth-child(5) { animation-delay: 210ms; }
@keyframes rl-unavailable-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rl-unavailable-pop { 0% { opacity: 0; transform: scale(.6); } 65% { opacity: 1; transform: scale(1.06); } 100% { transform: none; } }
/* The panel's own cross-fade is not needed under the card's entrance. */
body.booking-workspace-mode .booking-service-time-list.is-updating:has(.booking-date-unavailable) { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  body.booking-workspace-mode .booking-date-unavailable > * { animation: none !important; }
}

/* ---- Confirmation: a tidy checklist (the deposit to pay the salon is
   ui/deposit-pay.css) ------------------------------------------------------ */
.confirmation-page .confirmation-prep h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.confirmation-page .confirmation-checklist,
.confirmation-page .confirmation-steps { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.confirmation-page .confirmation-checklist li,
.confirmation-page .confirmation-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; }
.confirmation-page .confirmation-checklist li > span,
.confirmation-page .confirmation-steps li > span {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f4f0fd; color: var(--rl-violet-deep, #6a48d0);
}
.confirmation-page .confirmation-checklist .icon,
.confirmation-page .confirmation-steps .icon { width: 17px; height: 17px; }
.confirmation-page .confirmation-checklist p,
.confirmation-page .confirmation-steps p { margin: 0; color: #2c2735; font-size: 14px; line-height: 1.4; }
.confirmation-page .confirmation-prep > button + button { margin-top: 8px; }
.confirmation-page .confirmation-waitlist-times { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.confirmation-page .confirmation-waitlist-times li { display: flex; gap: 10px; }
.confirmation-page .confirmation-waitlist-times span { color: #6f6879; }
.confirmation-page .status-badge.status-waitlist { background: #f4efff; color: #5236b3; }

/* ---- Waitlist: review and reference ---------------------------------------- */
body.booking-workspace-mode .booking-waitlist-for { margin: 0; color: #6f6879; font-size: 14px; }
body.booking-workspace-mode .booking-waitlist-review-pay { display: grid; gap: 4px; margin: 0; }
body.booking-workspace-mode .booking-waitlist-review-pay span { color: #6f6879; font-size: 14px; line-height: 1.5; }
body.booking-workspace-mode .booking-waitlist-review-note small { white-space: pre-line; }
.confirmation-page .status-badge.status-waitlist { text-transform: none; }
.confirmation-page .confirmation-grid > .confirmation-prep { align-self: start; }

/* ---- My Hair notifications: one colour per kind of update ----------------
   The icon and the small label take the kind's colour: booked violet,
   confirmed green, modified blue, cancelled or declined red, messages teal,
   reminders amber, waitlist indigo, completed slate, anything else grey. */
body.customer-mode .customer-notification-row[data-tone] { --tone: #6c617f; --tone-soft: #f2eff6; }
body.customer-mode .customer-notification-row[data-tone="booked"] { --tone: #5b3fc4; --tone-soft: #efe9ff; }
body.customer-mode .customer-notification-row[data-tone="confirmed"] { --tone: #1f7a52; --tone-soft: #e5f5ec; }
body.customer-mode .customer-notification-row[data-tone="modified"] { --tone: #1f5fae; --tone-soft: #e6f0fb; }
body.customer-mode .customer-notification-row[data-tone="cancelled"] { --tone: #b3261e; --tone-soft: #fdeceb; }
body.customer-mode .customer-notification-row[data-tone="message"] { --tone: #0f7470; --tone-soft: #e2f4f2; }
body.customer-mode .customer-notification-row[data-tone="reminder"] { --tone: #8a5a00; --tone-soft: #fdf2d8; }
body.customer-mode .customer-notification-row[data-tone="waitlist"] { --tone: #4338ca; --tone-soft: #e9e8fd; }
body.customer-mode .customer-notification-row[data-tone="completed"] { --tone: #475569; --tone-soft: #eef1f5; }
body.customer-mode .customer-notification-row[data-tone] .customer-notification-icon { background: var(--tone-soft); color: var(--tone); }
body.customer-mode .customer-notification-row[data-tone] .customer-notification-kind { background: var(--tone-soft); color: var(--tone); }
/* "New" is about being unread, not the kind of update: kept out of the palette. */
body.customer-mode .customer-notification-new { background: #17131f; color: #fff; }
body.customer-mode .customer-notification-title > :is(.customer-notification-kind, .status-badge, .customer-notification-new) { flex: none; white-space: nowrap; }

/* Category arrows: just the chevron, no ring or fill. */
body.booking-workspace-mode .booking-category-arrow,
body.booking-workspace-mode .booking-category-arrow:is(:hover, :focus-visible) { border: 0; background: transparent; box-shadow: none; color: #17131f; }
/* With no ring behind them, the chips clear the arrows' place completely. */
body.booking-workspace-mode .booking-category-rail.has-more-right > .booking-category-chips { -webkit-mask-image: linear-gradient(to left, transparent 34px, #000 84px); mask-image: linear-gradient(to left, transparent 34px, #000 84px); }
body.booking-workspace-mode .booking-category-rail.has-more-left > .booking-category-chips { -webkit-mask-image: linear-gradient(to right, transparent 34px, #000 84px); mask-image: linear-gradient(to right, transparent 34px, #000 84px); }
body.booking-workspace-mode .booking-category-rail.has-more-left.has-more-right > .booking-category-chips { -webkit-mask-image: linear-gradient(to right, transparent 34px, #000 84px, #000 calc(100% - 84px), transparent calc(100% - 34px)); mask-image: linear-gradient(to right, transparent 34px, #000 84px, #000 calc(100% - 84px), transparent calc(100% - 34px)); }