html body.mobile-booking-customer-open {
  overflow: hidden !important;
}

html body #mobile-booking-customer-surface.mbc-surface {
  position: fixed;
  inset: 0;
  z-index: 260000;
  display: none;
  background: #fff;
  color: #050505;
  -webkit-text-fill-color: #050505;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif);
}

html body #mobile-booking-customer-surface.is-open {
  display: flex;
  flex-direction: column;
}

html body #mobile-booking-customer-surface .mbc-topbar {
  flex: 0 0 auto;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 20px 6px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  box-sizing: border-box;
}

html body #mobile-booking-customer-surface .mbc-back {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #f3f3f3;
  color: #050505;
  -webkit-text-fill-color: #050505;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
}

html body #mobile-booking-customer-surface .mbc-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px calc(30px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

html body #mobile-booking-customer-surface .mbc-head {
  display: grid;
  gap: 7px;
  margin: 0 0 28px;
}

html body #mobile-booking-customer-surface .mbc-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

html body #mobile-booking-customer-surface .mbc-title {
  margin: 0;
  font-size: 34px;
  line-height: .95;
  font-weight: 950;
  letter-spacing: 0;
}

html body #mobile-booking-customer-surface .mbc-account {
  margin: 0;
  color: rgba(5, 5, 5, 0.55);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.55);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
}

html body #mobile-booking-customer-surface .mbc-account strong {
  color: #050505;
  -webkit-text-fill-color: #050505;
  font-weight: 900;
  letter-spacing: 0;
}

html body #mobile-booking-customer-surface .mbc-body {
  display: grid;
  gap: 0;
}

html body #mobile-booking-customer-surface .mbc-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(5, 5, 5, 0.12);
  color: rgba(5, 5, 5, 0.52);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.52);
  font-size: 11px;
  line-height: 1;
  font-weight: 880;
  letter-spacing: .11em;
  text-transform: uppercase;
}

html body #mobile-booking-customer-surface .mbc-list-head strong {
  color: rgba(5, 5, 5, 0.5);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

html body #mobile-booking-customer-surface .mbc-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(5, 5, 5, 0.1);
}

html body #mobile-booking-customer-surface .mbc-date-chip {
  width: 54px;
  display: grid;
  gap: 4px;
  justify-items: start;
  align-content: start;
  padding-top: 1px;
}

html body #mobile-booking-customer-surface .mbc-date-chip span {
  max-width: 100%;
  color: rgba(5, 5, 5, 0.52);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.52);
  font-size: 10px;
  line-height: 1;
  font-weight: 880;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body #mobile-booking-customer-surface .mbc-date-chip strong {
  color: #050505;
  -webkit-text-fill-color: #050505;
  font-size: 31px;
  line-height: .9;
  font-weight: 950;
  letter-spacing: 0;
}

html body #mobile-booking-customer-surface .mbc-card-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

html body #mobile-booking-customer-surface .mbc-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

html body #mobile-booking-customer-surface .mbc-status,
html body #mobile-booking-customer-surface .mbc-provider {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body #mobile-booking-customer-surface .mbc-status {
  color: #16783d;
  -webkit-text-fill-color: #16783d;
}

html body #mobile-booking-customer-surface .mbc-provider {
  color: rgba(5, 5, 5, 0.48);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.48);
}

html body #mobile-booking-customer-surface .mbc-time {
  color: #050505;
  -webkit-text-fill-color: #050505;
  font-size: 35px;
  line-height: .92;
  font-weight: 950;
  letter-spacing: 0;
}

html body #mobile-booking-customer-surface .mbc-card-title {
  margin: 0;
  max-width: 18ch;
  color: rgba(5, 5, 5, 0.78);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.78);
  font-size: 17px;
  line-height: 1.18;
  font-weight: 820;
  letter-spacing: 0;
}

html body #mobile-booking-customer-surface .mbc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: rgba(5, 5, 5, 0.52);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.52);
  font-size: 12px;
  line-height: 1;
  font-weight: 780;
  text-transform: uppercase;
}

html body #mobile-booking-customer-surface .mbc-meta span + span::before {
  content: "/";
  margin-right: 7px;
  color: rgba(5, 5, 5, 0.25);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.25);
}

html body #mobile-booking-customer-surface .mbc-card-actions {
  margin-top: 6px;
  display: flex;
  gap: 8px;
}

html body #mobile-booking-customer-surface .mbc-card-actions button,
html body #mobile-booking-customer-surface .mbc-action {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #050505;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body #mobile-booking-customer-surface .mbc-empty {
  display: grid;
  gap: 12px;
  max-width: 100%;
}

html body #mobile-booking-customer-surface .mbc-empty-premium {
  padding: 16px 0 0;
  border-top: 1px solid rgba(5, 5, 5, 0.10);
}

html body #mobile-booking-customer-surface .mbc-empty-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  color: rgba(5, 5, 5, 0.52);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.52);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body #mobile-booking-customer-surface .mbc-empty-status span,
html body #mobile-booking-customer-surface .mbc-empty-status strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #mobile-booking-customer-surface .mbc-empty-status strong {
  color: #050505;
  -webkit-text-fill-color: #050505;
  font-weight: 930;
}

html body #mobile-booking-customer-surface .mbc-empty-ticket {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(5, 5, 5, 0.10);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(246, 246, 246, .92)),
    #fff;
  box-shadow: 0 18px 50px rgba(5, 5, 5, 0.07);
}

html body #mobile-booking-customer-surface .mbc-empty-ticket-date {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  border-right: 1px dashed rgba(5, 5, 5, 0.16);
  padding-right: 12px;
}

html body #mobile-booking-customer-surface .mbc-empty-ticket-date span,
html body #mobile-booking-customer-surface .mbc-empty-ticket-kicker {
  color: rgba(5, 5, 5, 0.45);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.45);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body #mobile-booking-customer-surface .mbc-empty-ticket-date strong {
  color: #050505;
  -webkit-text-fill-color: #050505;
  font-size: 34px;
  line-height: .86;
  font-weight: 960;
  letter-spacing: 0;
}

html body #mobile-booking-customer-surface .mbc-empty-ticket-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

html body #mobile-booking-customer-surface .mbc-empty-ticket-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #050505;
  -webkit-text-fill-color: #050505;
  font-size: 22px;
  line-height: .98;
  font-weight: 940;
  letter-spacing: 0;
}

html body #mobile-booking-customer-surface .mbc-empty-ticket-main > span:last-child {
  color: rgba(5, 5, 5, 0.58);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58);
  font-size: 12px;
  line-height: 1.22;
  font-weight: 720;
}

html body #mobile-booking-customer-surface .mbc-empty h3 {
  margin: 0;
  max-width: 12ch;
  font-size: 31px;
  line-height: .96;
  font-weight: 930;
  letter-spacing: 0;
}

html body #mobile-booking-customer-surface .mbc-empty p {
  margin: 0;
  max-width: 31ch;
  color: rgba(5, 5, 5, 0.58);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 680;
}

html body #mobile-booking-customer-surface .mbc-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}

html body #mobile-booking-customer-surface .mbc-empty .mbc-action,
html body #mobile-booking-customer-surface .mbc-action-secondary {
  width: fit-content;
  min-height: 42px;
}

html body #mobile-booking-customer-surface .mbc-action-secondary {
  padding: 0 15px;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #050505;
  -webkit-text-fill-color: #050505;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 380px) {
  html body #mobile-booking-customer-surface .mbc-page {
    padding-left: 18px;
    padding-right: 18px;
  }

  html body #mobile-booking-customer-surface .mbc-title {
    font-size: 31px;
  }

  html body #mobile-booking-customer-surface .mbc-time {
    font-size: 31px;
  }
}

/* customer-empty-redesign-20260810
   The logged-out state was a fake "--" ticket plus a second Log in button,
   all crammed at the top. One centred message, one action, and what you get. */
html body .mbc-empty.mbc-empty-premium {
    min-height: 62dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 24px 4px 40px !important;
    text-align: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .mbc-empty-status,
html body .mbc-empty-ticket {
    display: none !important;
}

html body .mbc-empty-mark {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    background: #050505 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

html body .mbc-empty.mbc-empty-premium h3 {
    margin: 20px 0 0 !important;
    max-width: 16ch !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 27px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

html body .mbc-empty.mbc-empty-premium p {
    margin: 10px 0 0 !important;
    max-width: 30ch !important;
    color: rgba(5, 5, 5, 0.52) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.52) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

html body .mbc-empty-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 22px !important;
    width: 100% !important;
    max-width: 320px !important;
}

html body .mbc-empty-actions .mbc-action,
html body .mbc-empty-actions .mbc-action-secondary {
    flex: 1 !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .mbc-empty-actions .mbc-action {
    background: #050505 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .mbc-empty-actions .mbc-action-secondary {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.14) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

/* What you actually get once you're in. */
html body .mbc-empty-perks {
    list-style: none !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 34px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 0 !important;
    text-align: left !important;
}

html body .mbc-empty-perks li {
    padding: 15px 2px !important;
}

html body .mbc-empty-perks li + li {
    border-top: 1px solid rgba(5, 5, 5, 0.07) !important;
}

html body .mbc-empty-perks strong {
    display: block !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

html body .mbc-empty-perks span {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(5, 5, 5, 0.48) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.48) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

/* guest-bookings-empty-20260822 — the mark was an invisible black-on-black
   monogram; the perks were three lines of identical bold text with no way in.
   An icon that says "calendar", and perks that read as supporting detail. */
html body .mbc-empty-mark {
    background: rgba(5, 5, 5, 0.05) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html body .mbc-empty-mark i {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 22px !important;
}

/* Perks: icon in a fixed gutter, label leads, detail steps back. */
html body .mbc-empty-perks li {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
}

html body .mbc-empty-perks li > i {
    margin-top: 2px !important;
    color: rgba(5, 5, 5, 0.34) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.34) !important;
    font-size: 15px !important;
    text-align: center !important;
}

html body .mbc-empty-perks .mbc-perk-copy {
    display: block !important;
    min-width: 0 !important;
}

html body .mbc-empty-perks .mbc-perk-copy > span {
    margin-top: 3px !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

/* The two actions were wrapping mid-word ("BROWSE / SERVICES"). */
html body .mbc-empty-actions {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 340px !important;
}

html body .mbc-empty-actions button {
    flex: 1 1 0 !important;
    min-height: 50px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

/* Back was 42px, under the 44px minimum. */
html body .mbc-surface .mbc-back {
    width: 46px !important;
    height: 46px !important;
}

/* The perk icons inherited full-strength black from a broader rule, so they
   competed with the labels instead of supporting them. */
html body .mbc-surface .mbc-empty-perks li > i.fas {
    color: rgba(5, 5, 5, 0.32) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.32) !important;
}

/* guest-bookings-list-20260822 — the list called a July session "upcoming",
   hid refunds entirely, and showed the pre-fee price. States now read at a
   glance and past work steps back without disappearing. */
html body .mbc-surface .mbc-list-head.is-past-head {
    margin-top: 30px !important;
}

html body .mbc-surface .mbc-status.is-refunded {
    color: #b42318 !important;
    -webkit-text-fill-color: #b42318 !important;
}

html body .mbc-surface .mbc-status.is-done,
html body .mbc-surface .mbc-status.is-cancelled {
    color: rgba(5, 5, 5, 0.45) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.45) !important;
}

/* "In 2 days" answers the question the date alone makes you compute. */
html body .mbc-surface .mbc-soon {
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(4, 120, 87, 0.1) !important;
    color: #047857 !important;
    -webkit-text-fill-color: #047857 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
}

/* Finished and refunded sessions recede rather than compete with what's next. */
html body .mbc-surface .mbc-card.is-past .mbc-time,
html body .mbc-surface .mbc-card.is-refunded .mbc-time {
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
}

html body .mbc-surface .mbc-card.is-past .mbc-card-title,
html body .mbc-surface .mbc-card.is-refunded .mbc-card-title {
    color: rgba(5, 5, 5, 0.62) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.62) !important;
}

html body .mbc-surface .mbc-card.is-past .mbc-date-chip,
html body .mbc-surface .mbc-card.is-refunded .mbc-date-chip {
    opacity: 0.55 !important;
}

/* Nothing ahead is still a state worth designing: say so and offer the way in. */
html body .mbc-surface .mbc-none-upcoming {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 22px 0 6px !important;
}

html body .mbc-surface .mbc-none-upcoming strong {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

html body .mbc-surface .mbc-none-upcoming span {
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

html body .mbc-surface .mbc-none-upcoming .mbc-action {
    margin-top: 12px !important;
    min-height: 48px !important;
    padding: 0 22px !important;
}

/* On a finished or refunded session the time is no longer the useful part --
   what it was and what happened to the money is. Let the title lead there. */
html body .mbc-surface .mbc-card.is-past .mbc-time,
html body .mbc-surface .mbc-card.is-refunded .mbc-time {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

html body .mbc-surface .mbc-card.is-past .mbc-card-title,
html body .mbc-surface .mbc-card.is-refunded .mbc-card-title {
    font-size: 16px !important;
}

/* Join call was 40px, under the 44px minimum. */
html body .mbc-surface .mbc-card-actions button {
    min-height: 46px !important;
    padding: 0 20px !important;
}

/* guest-empty-openings-20260822 — the empty state was a dead end: a message
   and a button that left the tab. It now offers the app's real next openings,
   so booking starts here. Nothing invented: no ratings, no saved card, no
   waitlist -- none of those exist behind this screen. */
html body .mbc-surface .mbc-empty.mbc-empty-premium {
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
}

html body .mbc-surface .mbc-empty-lead {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 20px 0 0 !important;
}

html body .mbc-surface .mbc-empty-eyebrow {
    color: rgba(5, 5, 5, 0.38) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.38) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}

html body .mbc-surface .mbc-empty.mbc-empty-premium h3 {
    margin: 0 !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    text-align: left !important;
}

html body .mbc-surface .mbc-empty.mbc-empty-premium p {
    margin: 0 !important;
    max-width: none !important;
    color: rgba(5, 5, 5, 0.55) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.55) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    text-align: left !important;
}

/* --- live openings --------------------------------------------------- */
html body .mbc-surface .mbc-suggestions {
    display: block !important;
    padding-top: 26px !important;
}

html body .mbc-surface .mbc-sugg-head-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
}

html body .mbc-surface .mbc-sugg-title {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

html body .mbc-surface .mbc-live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #047857 !important;
    -webkit-text-fill-color: #047857 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
}

html body .mbc-surface .mbc-live-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #18A957 !important;
    display: block !important;
    animation: mbcPulseDot 1.5s ease-in-out infinite !important;
}

@keyframes mbcPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes mbcRiseIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

html body .mbc-surface .mbc-sugg {
    border: 1px solid rgba(5, 5, 5, 0.09) !important;
    border-radius: 16px !important;
    padding: 14px 14px 12px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    animation: mbcRiseIn .35s ease both !important;
}

html body .mbc-surface .mbc-sugg-head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
}

html body .mbc-surface .mbc-sugg-swatch {
    width: 38px !important;
    height: 38px !important;
    flex: none !important;
    border-radius: 11px !important;
    background: rgba(5, 5, 5, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .mbc-surface .mbc-sugg-swatch i {
    color: rgba(5, 5, 5, 0.42) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.42) !important;
    font-size: 14px !important;
}

html body .mbc-surface .mbc-sugg-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

html body .mbc-surface .mbc-sugg-copy strong {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .mbc-surface .mbc-sugg-copy span {
    color: rgba(5, 5, 5, 0.45) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.45) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

html body .mbc-surface .mbc-sugg-price {
    flex: none !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.022em !important;
}

html body .mbc-surface .mbc-sugg-slots {
    display: flex !important;
    gap: 6px !important;
}

/* Each opening is a real bookable time, so it gets a real tap target. */
html body .mbc-surface .mbc-sugg-slots button {
    flex: 1 1 0 !important;
    min-height: 46px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(5, 5, 5, 0.05) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

html body .mbc-surface .mbc-sugg-slots button:active {
    background: #050505 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body .mbc-surface .mbc-browse-all {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 54px !important;
    margin-top: 6px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #050505 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

/* --- how booking works ------------------------------------------------ */
html body .mbc-surface .mbc-steps-head {
    padding-top: 32px !important;
    color: rgba(5, 5, 5, 0.38) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.38) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}

html body .mbc-surface .mbc-steps {
    list-style: none !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
}

html body .mbc-surface .mbc-steps li {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 13px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.06) !important;
}

html body .mbc-surface .mbc-step-n {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: rgba(5, 5, 5, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

html body .mbc-surface .mbc-steps .mbc-perk-copy strong {
    display: block !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

html body .mbc-surface .mbc-steps .mbc-perk-copy > span {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

/* The button is black; its label was inheriting dark text from a broader
   rule, so "Browse all 3 services" rendered black-on-black. */
html body .mbc-surface .mbc-browse-all,
html body .mbc-surface .mbc-browse-all span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* The soonest opening across every service -- the one the headline names --
   is filled so the heading has an obvious target to tap. */
html body .mbc-surface .mbc-sugg-slots button.is-soonest {
    background: #050505 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* guest-upcoming-hero-20260822 — the next session is the one thing the guest
   opens this screen for, so it gets a dark card with a live countdown and the
   actions that belong to it. Everything after it stays a plain row. */
html body .mbc-surface .mbc-hero {
    margin: 10px 0 0 !important;
    padding: 20px 20px 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(155deg, #14213D 0%, #0E0E0F 70%) !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

html body .mbc-surface .mbc-hero-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

html body .mbc-surface .mbc-hero-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: rgba(74, 222, 128, 0.16) !important;
    color: #4ADE80 !important;
    -webkit-text-fill-color: #4ADE80 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
}

html body .mbc-surface .mbc-hero-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #4ADE80 !important;
    display: block !important;
    animation: mbcPulseDot 1.5s ease-in-out infinite !important;
}

html body .mbc-surface .mbc-hero-id {
    color: rgba(255, 255, 255, 0.55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

html body .mbc-surface .mbc-hero-when {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

html body .mbc-surface .mbc-hero-date {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* The countdown is the headline -- it answers "how long have I got". */
html body .mbc-surface .mbc-hero-count {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 40px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    font-variant-numeric: tabular-nums !important;
}

html body .mbc-surface .mbc-hero-sub {
    color: rgba(255, 255, 255, 0.68) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.68) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

html body .mbc-surface .mbc-hero-service {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body .mbc-surface .mbc-hero-swatch {
    width: 38px !important;
    height: 38px !important;
    flex: none !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .mbc-surface .mbc-hero-swatch i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
}

html body .mbc-surface .mbc-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

html body .mbc-surface .mbc-hero-copy strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .mbc-surface .mbc-hero-copy > span {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

html body .mbc-surface .mbc-hero-price {
    flex: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.022em !important;
}

/* Join stays visibly inert until the room actually opens, so the button
   never promises a link that will not work yet. */
html body .mbc-surface .mbc-hero-join {
    width: 100% !important;
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: default !important;
}

html body .mbc-surface .mbc-hero-join.is-open {
    background: #4ADE80 !important;
    color: #0E0E0F !important;
    -webkit-text-fill-color: #0E0E0F !important;
    font-size: 15px !important;
    cursor: pointer !important;
}

html body .mbc-surface .mbc-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
}

html body .mbc-surface .mbc-hero-actions button {
    min-height: 44px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

html body .mbc-surface .mbc-hero-actions button:active {
    background: rgba(255, 255, 255, 0.2) !important;
}

html body .mbc-surface .mbc-list-head.is-later-head {
    margin-top: 26px !important;
}

/* Guests cannot cancel or refund a paid booking, so this points at the host
   rather than offering a button that returns 409. */
html body .mbc-surface .mbc-change-note {
    margin: 24px 0 0 !important;
    color: rgba(5, 5, 5, 0.45) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.45) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

/* guest-topbar-title-20260822 — the back button sat alone on one line while
   the title and account took a whole block underneath. Title and account now
   ride the same line as Back, centred between it and the Log in slot. */
html body #mobile-booking-customer-surface .mbc-topbar {
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    gap: 10px !important;
    align-items: center !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.07) !important;
}

html body #mobile-booking-customer-surface .mbc-topbar-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    text-align: center !important;
}

html body #mobile-booking-customer-surface .mbc-topbar .mbc-title {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html body #mobile-booking-customer-surface .mbc-topbar .mbc-account {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html body #mobile-booking-customer-surface .mbc-topbar .mbc-account strong {
    font-weight: 800 !important;
}

/* The page starts right at the content now that the header moved up. */
html body #mobile-booking-customer-surface .mbc-page {
    padding-top: 6px !important;
}

/* guest-inline-chrome-20260822 — Bookings is a tab, not a pushed screen. The
   surface used to cover everything with inset:0, so it hid the app header
   (hamburger + bell) and the bottom nav, and needed its own Back button to
   escape. It now sits between the two, and the app's own chrome does the
   navigating. */
html body #mobile-booking-customer-surface.mbc-surface {
    top: var(--mobile-app-header-height, 64px) !important;
    bottom: 0 !important;
    z-index: 9000 !important;
}

/* Room for the floating bottom nav so the last row is never trapped under it. */
html body #mobile-booking-customer-surface .mbc-page {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Two slots now: the title takes the width, Log in sits at the right. */
html body #mobile-booking-customer-surface .mbc-topbar {
    grid-template-columns: minmax(0, 1fr) 46px !important;
    padding-top: 10px !important;
}

/* The title no longer competes with a Back button, so it leads from the left
   where reading starts. */
html body #mobile-booking-customer-surface .mbc-topbar-title {
    align-items: flex-start !important;
    text-align: left !important;
}

html body #mobile-booking-customer-surface .mbc-topbar .mbc-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
}

/* Keep the body scrolling instead of locking it -- the tab is still live. */
html body.mobile-booking-customer-open {
    overflow: visible !important;
}

/* guest-no-dividers-20260822 — every hairline rule comes off. Spacing does
   the separating now, so the surface reads as open space rather than a stack
   of ruled boxes. */
html body #mobile-booking-customer-surface .mbc-topbar,
html body #mobile-booking-customer-surface .mbc-list-head,
html body #mobile-booking-customer-surface .mbc-card,
html body #mobile-booking-customer-surface .mbc-empty-premium,
html body #mobile-booking-customer-surface .mbc-empty-perks li,
html body #mobile-booking-customer-surface .mbc-empty-perks li + li,
html body #mobile-booking-customer-surface .mbc-steps li,
html body #mobile-booking-customer-surface .mbc-hero-service {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Without rules the rhythm has to come from space, so give the rows and
   sections a little more room to breathe. */
html body #mobile-booking-customer-surface .mbc-card {
    padding-bottom: 22px !important;
}

html body #mobile-booking-customer-surface .mbc-steps li {
    padding: 11px 0 !important;
}

html body #mobile-booking-customer-surface .mbc-list-head {
    padding-bottom: 4px !important;
}

/* The opening cards were outlined boxes. Drop the outline and let a soft fill
   group each service instead -- no lines, but the grouping survives. */
html body .mbc-surface .mbc-sugg {
    border: 0 !important;
    background: rgba(5, 5, 5, 0.035) !important;
}

html body .mbc-surface .mbc-sugg-slots button {
    background: #ffffff !important;
}

html body .mbc-surface .mbc-sugg-swatch {
    background: rgba(5, 5, 5, 0.07) !important;
}

/* Neither slot the topbar grid reserved is filled any more: Back was removed
   when the surface stopped covering the app chrome, and Log in is redundant
   beside the header's LOGIN and the empty state's own button. One column, read
   from the left, so the title is not centred against two empty gutters. */
html body #mobile-booking-customer-surface .mbc-topbar {
  grid-template-columns: minmax(0, 1fr) !important;
  padding-bottom: 8px !important;
  border-bottom: 0 !important;
}

html body #mobile-booking-customer-surface .mbc-topbar-title {
  align-items: flex-start !important;
  text-align: left !important;
}

/* "Moved from 2:00 PM" — a rescheduled booking otherwise shows its new time with
   nothing to say it changed. Quiet by design: it is context, not an alarm. */
html body .mbc-surface .mbc-hero-moved {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: .04em !important;
}

html body .mbc-surface .mbc-moved {
  margin-top: 4px !important;
  color: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 720 !important;
}

/* reservations-empty-dc-20260906 */
html body #mobile-booking-customer-surface .mbc-empty-premium.is-reservations-design {
  min-height: 0 !important;
  display: block !important;
  padding: 4px 0 30px !important;
  text-align: left !important;
}

html body #mobile-booking-customer-surface .is-reservations-design > .mbc-empty-lead {
  display: none !important;
}

html body #mobile-booking-customer-surface .mbc-res-empty-hero {
  padding: 16px !important;
  border-radius: 22px !important;
  background: #111214 !important;
  box-shadow: 0 14px 30px -18px rgba(17,18,20,.62) !important;
}

html body #mobile-booking-customer-surface .mbc-res-empty-kicker {
  display: block !important;
  color: #8b8b85 !important;
  -webkit-text-fill-color: #8b8b85 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
}

html body #mobile-booking-customer-surface .mbc-res-empty-hero > strong {
  display: block !important;
  margin-top: 8px !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
}

html body #mobile-booking-customer-surface .mbc-res-empty-hero > p {
  margin: 7px 0 0 !important;
  max-width: none !important;
  color: #b9b9b3 !important;
  -webkit-text-fill-color: #b9b9b3 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

html body #mobile-booking-customer-surface .mbc-res-empty-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-top: 13px !important;
  border-top: 1px solid #2a2b2e !important;
}

html body #mobile-booking-customer-surface .mbc-res-empty-stats strong,
html body #mobile-booking-customer-surface .mbc-res-empty-stats span {
  display: block !important;
  font-family: "IBM Plex Mono", monospace !important;
}

html body #mobile-booking-customer-surface .mbc-res-empty-stats strong {
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body #mobile-booking-customer-surface .mbc-res-empty-stats span {
  margin-top: 4px !important;
  color: #8b8b85 !important;
  -webkit-text-fill-color: #8b8b85 !important;
  font-size: 8px !important;
  letter-spacing: .1em !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-suggestions {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-head-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 22px 4px 10px !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-title,
html body #mobile-booking-customer-surface .is-reservations-design .mbc-live {
  color: #70706b !important;
  -webkit-text-fill-color: #70706b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-live-dot {
  background: #0fbfa4 !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg {
  margin-bottom: 8px !important;
  padding: 13px !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(17,18,20,.03) !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-swatch {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  background: #f1f1ed !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-copy strong {
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-slots {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 6px !important;
  margin-top: 11px !important;
  padding-top: 11px !important;
  border-top: 1px solid #f1f1ed !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-slots button {
  min-height: 48px !important;
  padding: 6px !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 12px !important;
  background: #fcfcfa !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-slots button.is-soonest {
  border-color: #111214 !important;
  background: #111214 !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-browse-all {
  width: 100% !important;
  min-height: 64px !important;
  margin-top: 14px !important;
  padding: 0 14px !important;
  border: 1px dashed #d6d6d0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-steps-head {
  margin: 22px 4px 10px !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-steps {
  overflow: hidden !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-steps li {
  padding: 13px 14px !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-step-n {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background: #111214 !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
}

/* reservations-scroll-and-media-20260906 */
html body.mobile-booking-customer-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body #mobile-booking-customer-surface.mbc-surface {
  overflow: hidden !important;
  contain: layout paint !important;
}

html body #mobile-booking-customer-surface .mbc-page {
  overscroll-behavior-y: contain !important;
  scroll-behavior: auto !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-swatch.has-image {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  background: #ecece8 !important;
  cursor: pointer !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-swatch.has-image img,
html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-swatch.has-image picture {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

html body #mobile-booking-customer-surface .is-reservations-design .mbc-sugg-slots button {
  white-space: nowrap !important;
  letter-spacing: -.02em !important;
}

/* ==========================================================================
   bookings-receipt-language-20260929
   The Bookings tab in the Booking Receipt's language: a dark band with the
   countdown chip and status over a white session card (date block, service,
   green time range, where, host), then compact rows and a folded Past list.
   Every colour is a token below so light, dark, Glass and page colour each
   read; leaf elements are named because the light theme's `* * *` sweep
   forces black on anything left to inherit.
   ========================================================================== */
html body #mobile-booking-customer-surface {
  --mbr-page: #ffffff;
  --mbr-card: #ffffff;
  --mbr-soft: #f6f6f3;
  --mbr-ink: #111214;
  --mbr-dim: #70706b;
  --mbr-faint: #92928c;
  --mbr-line: #e7e7e2;
  --mbr-hero-bg: #111214;
  --mbr-hero-ink: #ffffff;
  --mbr-hero-dim: rgba(255, 255, 255, 0.6);
  --mbr-hero-chip: rgba(255, 255, 255, 0.13);
  --mbr-date-bg: #111214;
  --mbr-date-ink: #ffffff;
  --mbr-cta: #111214;
  --mbr-cta-ink: #ffffff;
  --mbr-green: #0a6558;
  --mbr-green-soft: #eaf6f2;
  --mbr-amber: #8a5a12;
  --mbr-amber-soft: #fbf1df;
  --mbr-shadow: 0 3px 14px -9px rgba(17, 18, 20, 0.22);
}
html[data-theme="dark"] body #mobile-booking-customer-surface {
  --mbr-page: #000000;
  --mbr-card: #141416;
  --mbr-soft: #1b1b1e;
  --mbr-ink: #f4f4f1;
  --mbr-dim: #a3a39d;
  --mbr-faint: #7f7f7a;
  --mbr-line: #28282b;
  --mbr-hero-bg: #1c1c1f;
  --mbr-date-bg: #26262a;
  --mbr-cta: #f4f4f1;
  --mbr-cta-ink: #0b0b0c;
  --mbr-green: #46d8ba;
  --mbr-green-soft: rgba(60, 207, 177, 0.14);
  --mbr-amber: #f3c26b;
  --mbr-amber-soft: rgba(243, 194, 107, 0.14);
  --mbr-shadow: none;
}
html[data-theme="dark"] body #mobile-booking-customer-surface.mbc-surface {
  background: var(--mbr-page) !important;
  color: var(--mbr-ink) !important;
  -webkit-text-fill-color: var(--mbr-ink) !important;
}

/* Header: "Your bookings" and one plain line under it. */
html body #mobile-booking-customer-surface .mbc-topbar .mbc-title {
  color: var(--mbr-ink) !important;
  -webkit-text-fill-color: var(--mbr-ink) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}
html body #mobile-booking-customer-surface#mobile-booking-customer-surface .mbc-topbar .mbc-account {
  margin-top: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: var(--mbr-dim) !important;
  -webkit-text-fill-color: var(--mbr-dim) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html body #mobile-booking-customer-surface .mbr {
  display: block;
  padding-top: 8px;
  color: var(--mbr-ink);
  font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, sans-serif;
}
html body #mobile-booking-customer-surface .mbr :where(h3, p, strong, span, small, b, em, i, time, a, button, summary, svg, svg *) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
html body #mobile-booking-customer-surface .mbr,
html body #mobile-booking-customer-surface .mbr-row,
html body #mobile-booking-customer-surface .mbr-next__card {
  color: var(--mbr-ink) !important;
  -webkit-text-fill-color: var(--mbr-ink) !important;
}

/* ---- next up: the band ---- */
html body #mobile-booking-customer-surface .mbr-next {
  border-radius: 22px;
  overflow: hidden;
  background: var(--mbr-card) !important;
  border: 1px solid var(--mbr-line) !important;
  box-shadow: var(--mbr-shadow) !important;
}
html body #mobile-booking-customer-surface .mbr-next__band {
  position: relative;
  padding: 15px 16px 17px;
  background: var(--mbr-hero-bg) !important;
  background-image: repeating-linear-gradient(38deg, rgba(255, 255, 255, 0.035) 0 16px, transparent 16px 32px) !important;
}
html body #mobile-booking-customer-surface .mbr-next__band,
html body #mobile-booking-customer-surface .mbr-next__band * {
  color: var(--mbr-hero-ink) !important;
  -webkit-text-fill-color: var(--mbr-hero-ink) !important;
}
html body #mobile-booking-customer-surface .mbr-next__top,
html body #mobile-booking-customer-surface .mbr-next__lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html body #mobile-booking-customer-surface .mbr-next__lead { margin-top: 14px; align-items: flex-end; }
html body #mobile-booking-customer-surface .mbr-kicker,
html body #mobile-booking-customer-surface .mbr-head {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
html body #mobile-booking-customer-surface .mbr-next__band .mbr-kicker {
  color: var(--mbr-hero-dim) !important;
  -webkit-text-fill-color: var(--mbr-hero-dim) !important;
}
html body #mobile-booking-customer-surface .mbr-count {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--mbr-hero-chip) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
}
html body #mobile-booking-customer-surface .mbr-paid {
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
html body #mobile-booking-customer-surface .mbr-next__band .mbr-paid,
html body #mobile-booking-customer-surface .mbr-next__band .mbr-moved {
  color: var(--mbr-hero-dim) !important;
  -webkit-text-fill-color: var(--mbr-hero-dim) !important;
}
html body #mobile-booking-customer-surface .mbr-moved {
  display: block;
  margin-top: 10px;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

/* status pill */
html body #mobile-booking-customer-surface .mbr-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}
html body #mobile-booking-customer-surface .mbr-status.is-confirmed { background: var(--mbr-green-soft) !important; }
html body #mobile-booking-customer-surface .mbr-status.is-confirmed,
html body #mobile-booking-customer-surface .mbr-status.is-confirmed * { color: var(--mbr-green) !important; -webkit-text-fill-color: var(--mbr-green) !important; }
html body #mobile-booking-customer-surface .mbr-status.is-pending { background: var(--mbr-amber-soft) !important; }
html body #mobile-booking-customer-surface .mbr-status.is-pending,
html body #mobile-booking-customer-surface .mbr-status.is-pending * { color: var(--mbr-amber) !important; -webkit-text-fill-color: var(--mbr-amber) !important; }
html body #mobile-booking-customer-surface .mbr-status:is(.is-done, .is-cancelled, .is-refunded) { background: var(--mbr-soft) !important; }
html body #mobile-booking-customer-surface .mbr-status:is(.is-done, .is-cancelled, .is-refunded) { color: var(--mbr-dim) !important; -webkit-text-fill-color: var(--mbr-dim) !important; }
html body #mobile-booking-customer-surface .mbr-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor !important;
}
/* On the dark band the pill is solid so it reads on the stripes. */
html body #mobile-booking-customer-surface .mbr-next__band .mbr-status.is-confirmed { background: #0c7f6e !important; }
html body #mobile-booking-customer-surface .mbr-next__band .mbr-status.is-pending { background: #9b6b1e !important; }
html body #mobile-booking-customer-surface .mbr-next__band .mbr-status,
html body #mobile-booking-customer-surface .mbr-next__band .mbr-status * { color: var(--mbr-hero-ink) !important; -webkit-text-fill-color: var(--mbr-hero-ink) !important; }

/* ---- next up: the card ---- */
html body #mobile-booking-customer-surface .mbr-session {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 15px 13px;
}
html body #mobile-booking-customer-surface .mbr-date {
  flex: 0 0 54px;
  width: 54px;
  padding: 8px 0;
  border-radius: 14px;
  background: var(--mbr-date-bg) !important;
  text-align: center;
}
html body #mobile-booking-customer-surface .mbr-date,
html body #mobile-booking-customer-surface .mbr-date * {
  color: var(--mbr-date-ink) !important;
  -webkit-text-fill-color: var(--mbr-date-ink) !important;
}
html body #mobile-booking-customer-surface .mbr-date span,
html body #mobile-booking-customer-surface .mbr-date small {
  display: block;
  font: 500 8.5px "IBM Plex Mono", ui-monospace, monospace !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
  opacity: 0.66;
}
html body #mobile-booking-customer-surface .mbr-date strong {
  display: block;
  margin: 2px 0;
  font-size: 21px !important;
  line-height: 1.05;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}
html body #mobile-booking-customer-surface .mbr-date--sm { flex-basis: 46px; width: 46px; padding: 6px 0; border-radius: 12px; }
html body #mobile-booking-customer-surface .mbr-date--sm strong { font-size: 17px !important; }
html body #mobile-booking-customer-surface .mbr-session__copy { min-width: 0; }
html body #mobile-booking-customer-surface .mbr-session__copy h3 {
  margin: 0;
  font-size: 17px !important;
  line-height: 1.2;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
html body #mobile-booking-customer-surface .mbr-range {
  margin: 5px 0 0;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
html body #mobile-booking-customer-surface .mbr-range { color: var(--mbr-green) !important; -webkit-text-fill-color: var(--mbr-green) !important; }
html body #mobile-booking-customer-surface .mbr-sub {
  display: block;
  margin-top: 3px;
  font: 500 10px "IBM Plex Mono", ui-monospace, monospace !important;
  color: var(--mbr-faint) !important;
  -webkit-text-fill-color: var(--mbr-faint) !important;
}

html body #mobile-booking-customer-surface .mbr-where,
html body #mobile-booking-customer-surface .mbr-host {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
  border-top: 1px solid var(--mbr-line) !important;
}
html body #mobile-booking-customer-surface .mbr-where__icon {
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--mbr-green-soft) !important;
}
html body #mobile-booking-customer-surface .mbr-where__icon,
html body #mobile-booking-customer-surface .mbr-where__icon * { color: var(--mbr-green) !important; -webkit-text-fill-color: var(--mbr-green) !important; }
html body #mobile-booking-customer-surface :is(.mbr-where__copy, .mbr-host__copy) { flex: 1; min-width: 0; }
html body #mobile-booking-customer-surface :is(.mbr-where__copy, .mbr-host__copy) strong {
  display: block;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
html body #mobile-booking-customer-surface :is(.mbr-where__copy, .mbr-host__copy) span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 10px "IBM Plex Mono", ui-monospace, monospace !important;
  color: var(--mbr-dim) !important;
  -webkit-text-fill-color: var(--mbr-dim) !important;
}
html body #mobile-booking-customer-surface .mbr-host__copy span { text-transform: uppercase; letter-spacing: 0.08em !important; }
html body #mobile-booking-customer-surface .mbr-host__avatar {
  position: relative;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--mbr-soft) !important;
}
html body #mobile-booking-customer-surface .mbr-host__avatar b { font-size: 11px !important; font-weight: 800 !important; }
html body #mobile-booking-customer-surface .mbr-host__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html body #mobile-booking-customer-surface .mbr-chip-btn {
  flex: none;
  height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--mbr-line) !important;
  border-radius: 12px;
  background: var(--mbr-soft) !important;
  font: 700 11px var(--font-family, Manrope), sans-serif !important;
  text-decoration: none !important;
  cursor: pointer;
}
html body #mobile-booking-customer-surface .mbr-chip-btn { color: var(--mbr-ink) !important; -webkit-text-fill-color: var(--mbr-ink) !important; }
html body #mobile-booking-customer-surface .mbr-chip-btn.is-copied { background: var(--mbr-green-soft) !important; border-color: transparent !important; color: var(--mbr-green) !important; -webkit-text-fill-color: var(--mbr-green) !important; }

html body #mobile-booking-customer-surface .mbr-join {
  margin: 4px 15px 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 16px;
  background: var(--mbr-cta) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
html body #mobile-booking-customer-surface .mbr-join[hidden] { display: none !important; }
html body #mobile-booking-customer-surface .mbr-join,
html body #mobile-booking-customer-surface .mbr-join * { color: var(--mbr-cta-ink) !important; -webkit-text-fill-color: var(--mbr-cta-ink) !important; }

html body #mobile-booking-customer-surface .mbr-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 12px 15px 15px;
}
html body #mobile-booking-customer-surface .mbr-action {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border: 1px solid var(--mbr-line) !important;
  border-radius: 14px;
  background: var(--mbr-soft) !important;
  box-shadow: none !important;
  font: 700 11px var(--font-family, Manrope), sans-serif !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  cursor: pointer;
}
html body #mobile-booking-customer-surface .mbr-action,
html body #mobile-booking-customer-surface .mbr-action * { color: var(--mbr-ink) !important; -webkit-text-fill-color: var(--mbr-ink) !important; }
html body #mobile-booking-customer-surface .mbr-action:active,
html body #mobile-booking-customer-surface .mbr-row:active { transform: scale(0.98); }

/* ---- lists ---- */
html body #mobile-booking-customer-surface .mbr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 4px 10px;
  color: var(--mbr-faint) !important;
  -webkit-text-fill-color: var(--mbr-faint) !important;
  list-style: none;
}
html body #mobile-booking-customer-surface .mbr-head * { color: var(--mbr-faint) !important; -webkit-text-fill-color: var(--mbr-faint) !important; }
html body #mobile-booking-customer-surface .mbr-head b { font-weight: 600 !important; }
html body #mobile-booking-customer-surface .mbr-head--toggle { cursor: pointer; }
html body #mobile-booking-customer-surface .mbr-head--toggle::-webkit-details-marker { display: none; }
html body #mobile-booking-customer-surface .mbr-past__chev { margin-left: auto; display: inline-flex; transition: transform 0.2s; }
html body #mobile-booking-customer-surface .mbr-past[open] .mbr-past__chev { transform: rotate(90deg); }
html body #mobile-booking-customer-surface .mbr-list { display: grid; gap: 8px; }
html body #mobile-booking-customer-surface .mbr-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--mbr-line) !important;
  border-radius: 18px;
  background: var(--mbr-card) !important;
  box-shadow: var(--mbr-shadow) !important;
  text-align: left;
  cursor: pointer;
}
html body #mobile-booking-customer-surface .mbr-row__copy { flex: 1; min-width: 0; }
html body #mobile-booking-customer-surface .mbr-row__copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
html body #mobile-booking-customer-surface .mbr-row__copy span,
html body #mobile-booking-customer-surface .mbr-row__copy em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--mbr-dim) !important;
  -webkit-text-fill-color: var(--mbr-dim) !important;
}
html body #mobile-booking-customer-surface .mbr-row__end { display: grid; justify-items: end; gap: 4px; flex: none; }
html body #mobile-booking-customer-surface .mbr-row__price { font: 500 10.5px "IBM Plex Mono", ui-monospace, monospace !important; color: var(--mbr-dim) !important; -webkit-text-fill-color: var(--mbr-dim) !important; }
html body #mobile-booking-customer-surface .mbr-row__chev,
html body #mobile-booking-customer-surface .mbr-row__chev * { flex: none; color: var(--mbr-faint) !important; -webkit-text-fill-color: var(--mbr-faint) !important; }
html body #mobile-booking-customer-surface .mbr-past .mbr-row { box-shadow: none !important; }
html body #mobile-booking-customer-surface .mbr-past .mbr-row .mbr-date { opacity: 0.55; }

html body #mobile-booking-customer-surface .mbr-note {
  margin: 20px 4px 0;
  font-size: 12px !important;
  line-height: 1.5;
  font-weight: 500 !important;
  color: var(--mbr-dim) !important;
  -webkit-text-fill-color: var(--mbr-dim) !important;
}

html body #mobile-booking-customer-surface .mbr-empty { padding: 24px 0 8px; }
html body #mobile-booking-customer-surface .mbr-empty.is-compact { padding: 6px 0 0; }
html body #mobile-booking-customer-surface .mbr-loading { display: grid; gap: 12px; padding-top: 8px; }
html body #mobile-booking-customer-surface .mbr-loading__card {
  height: 300px;
  border-radius: 22px;
  background: var(--mbr-soft) !important;
  animation: mbrPulse 1.4s ease-in-out infinite;
}
html body #mobile-booking-customer-surface .mbr-loading__label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--mbr-dim) !important;
  -webkit-text-fill-color: var(--mbr-dim) !important;
}
@keyframes mbrPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---- Glass: frosted cards over the app's photo (mobile-glass.css tokens) ---- */
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface {
  --mbr-ink: #ffffff;
  --mbr-dim: rgba(255, 255, 255, 0.74);
  --mbr-faint: rgba(255, 255, 255, 0.62);
  --mbr-line: var(--gl-rim, rgba(255, 255, 255, 0.32));
  --mbr-green: #8ef5de;
  --mbr-amber: #ffd58a;
  --mbr-cta: var(--gl-cta, rgba(255, 255, 255, 0.92));
  --mbr-cta-ink: var(--gl-cta-ink, #0b0b0c);
}
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface :is(.mbr-next, .mbr-row) {
  background-color: var(--gl-fill, rgba(255, 255, 255, 0.14)) !important;
  border: 1px solid var(--gl-rim, rgba(255, 255, 255, 0.32)) !important;
  box-shadow: var(--gl-hi, inset 0 1px 0 rgba(255, 255, 255, 0.35)) !important;
}
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface .mbr-next__band {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid var(--gl-rim, rgba(255, 255, 255, 0.32)) !important;
}
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface :is(.mbr-count, .mbr-date, .mbr-where__icon, .mbr-host__avatar, .mbr-action, .mbr-chip-btn, .mbr-status, .mbr-loading__card) {
  background-color: var(--gl-fill-strong, rgba(255, 255, 255, 0.22)) !important;
  border-color: var(--gl-rim, rgba(255, 255, 255, 0.32)) !important;
}
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface :is(.mbr-where, .mbr-host) {
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface .mbr-next__band .mbr-status.is-confirmed { background-color: rgba(12, 127, 110, 0.85) !important; }
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface .mbr-next__band .mbr-status.is-pending { background-color: rgba(155, 107, 30, 0.85) !important; }
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface .mbr-join {
  background-color: var(--mbr-cta) !important;
}
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface :is(.mbr-join, .mbr-join *) {
  color: var(--mbr-cta-ink) !important;
  -webkit-text-fill-color: var(--mbr-cta-ink) !important;
}
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface :is(.mbr-range, .mbr-status.is-confirmed:not(.mbr-next__band *)) {
  color: var(--mbr-green) !important;
  -webkit-text-fill-color: var(--mbr-green) !important;
}
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface .mbc-topbar .mbc-account {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   The Booking Receipt, opened over the app (MobileBookingReceipt.open).
   ========================================================================== */
html body.bk-receipt-open { overflow: hidden !important; }
html body #bk-receipt-view.bk-receipt-view {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  display: block !important;
  background: #ffffff !important;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
html body #bk-receipt-view.bk-receipt-view.is-in { transform: none; opacity: 1; }
html body #bk-receipt-view.bk-receipt-view[data-look="dark"] { background: #0b0b0c !important; color-scheme: dark; }
html body #bk-receipt-view.bk-receipt-view[data-look="glass"] {
  background: var(--gl-sheet, rgba(28, 28, 32, 0.42)) !important;
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  backdrop-filter: blur(34px) saturate(160%);
  color-scheme: dark;
}
html body #bk-receipt-view .bk-receipt-view__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
html body:has(#bk-receipt-view) #bottom-nav { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) {
  html body #bk-receipt-view.bk-receipt-view { transition: none; }
}

/* The list is one column that never grows past the screen (a long meeting
   link would otherwise widen the grid), and the line icons stay line icons
   under the theme's blanket svg fills. */
html body #mobile-booking-customer-surface .mbc-body { grid-template-columns: minmax(0, 1fr) !important; }
html body #mobile-booking-customer-surface .mbr { min-width: 0; max-width: 100%; }
html body #mobile-booking-customer-surface .mbr svg [fill="none"] { fill: none !important; stroke: currentColor !important; }
html body #mobile-booking-customer-surface .mbr svg [fill="currentColor"] { fill: currentColor !important; stroke: none !important; }
html body #mobile-booking-customer-surface .mbr :is(.mbr-chip-btn, .mbr-action, .mbr-row) { box-shadow: none !important; -webkit-appearance: none; appearance: none; }
html body #mobile-booking-customer-surface .mbr .mbr-row { box-shadow: var(--mbr-shadow) !important; }
html[data-appearance="glass"] body #mobile-booking-customer-surface#mobile-booking-customer-surface#mobile-booking-customer-surface .mbr-status__dot { background-color: currentColor !important; }

/* Page colour: the owner's page is the ground in light and dark alike, so the
   greens and ambers come from its palette (readable on that page). */
html[data-page-color] body #mobile-booking-customer-surface {
  --mbr-green: var(--pc-good, #0a6558);
  --mbr-green-soft: color-mix(in srgb, var(--pc-good, #0a6558) 14%, transparent);
  --mbr-amber: var(--pc-warn, #8a5a12);
  --mbr-amber-soft: color-mix(in srgb, var(--pc-warn, #8a5a12) 16%, transparent);
}

/* Dedicated guest Services surface.
   Loaded after mobile-booking-guest.css so Services has one final visual owner. */
/* The nav floats over this scroller, so the list ends well above it — enough
   that the last card scrolls clear of the nav rather than stopping under it. */
html body #booking-main-area #mobile-services-selection-list {
  padding: 14px 22px calc(env(safe-area-inset-bottom, 0px) + 240px) !important;
}

html body #booking-main-area #mobile-services-selection-list:has(.booking-services-screen) {
  padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 126px) !important;
}

html body #booking-main-area .booking-services-screen {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
}

html body #booking-main-area .booking-services-screen-head {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.1) !important;
}

html body #booking-main-area .booking-services-screen-head span {
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-services-screen-head h2 {
  margin: 0 !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body #booking-main-area .booking-services-screen-head p {
  margin: 0 !important;
  color: rgba(5, 5, 5, 0.55) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.55) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
}

html body #booking-main-area .booking-service-directory-list {
  display: grid !important;
  gap: 0 !important;
  border-top: 0 !important;
}

html body #booking-main-area .booking-service-directory-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.09) !important;
  background: transparent !important;
}

html body #booking-main-area .booking-service-directory-main {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-align: left !important;
}

html body #booking-main-area .booking-service-directory-count {
  display: grid !important;
  gap: 1px !important;
  justify-items: start !important;
  padding-top: 2px !important;
}

html body #booking-main-area .booking-service-directory-count strong {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 22px !important;
  line-height: .86 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body #booking-main-area .booking-service-directory-count small {
  color: rgba(5, 5, 5, 0.5) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-service-directory-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

html body #booking-main-area .booking-service-directory-kicker {
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-service-directory-copy > strong {
  max-width: 21ch !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body #booking-main-area .booking-service-directory-meta,
html body #booking-main-area .booking-service-directory-desc {
  color: rgba(5, 5, 5, 0.58) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
  font-size: 10px !important;
  line-height: 1.18 !important;
  font-weight: 780 !important;
}

html body #booking-main-area .booking-service-directory-desc {
  max-width: 28ch !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html body #booking-main-area .booking-service-directory-side {
  display: grid !important;
  gap: 6px !important;
  justify-items: end !important;
  align-content: center !important;
}

html body #booking-main-area .booking-service-directory-side > span {
  color: rgba(5, 5, 5, 0.54) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.54) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

html body #booking-main-area .booking-service-directory-side button {
  min-width: 64px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #050505 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body #booking-main-area .booking-service-directory-row.is-unavailable .booking-service-directory-count,
html body #booking-main-area .booking-service-directory-row.is-unavailable .booking-service-directory-copy {
  opacity: .72 !important;
}

html body #booking-main-area .booking-service-directory-row.is-unavailable .booking-service-directory-side button {
  background: rgba(5, 5, 5, 0.08) !important;
  color: rgba(5, 5, 5, 0.72) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.72) !important;
}

html body #booking-main-area .booking-services-empty,
html body #booking-main-area .booking-services-skeleton {
  min-height: 220px !important;
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  color: rgba(5, 5, 5, 0.55) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.55) !important;
}

html body #booking-main-area .booking-services-skeleton {
  place-items: stretch !important;
}

html body #booking-main-area .booking-services-skeleton i {
  height: 74px !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.08) !important;
  background: linear-gradient(90deg, rgba(5,5,5,.04), rgba(5,5,5,.08), rgba(5,5,5,.04)) !important;
}

/* Cards, not divided rows — each service is its own surface. */
html body #booking-main-area .mobile-booking-service-list {
  display: grid !important;
  gap: 14px !important;
  border-top: 0 !important;
}

html body #booking-main-area .mobile-booking-service-row,
html body #booking-main-area .booking-guest-session {
  display: block !important;
  margin: 0 !important;
  padding: 22px 20px 18px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(5, 5, 5, 0.07) !important;
}

html body #booking-main-area .booking-guest-session + .booking-guest-session {
  margin-top: 0 !important;
  padding-top: 22px !important;
  border-top: 0 !important;
}

html body #booking-main-area .mobile-booking-service-prime {
  display: block !important;
}

html body #booking-main-area .mobile-booking-service-count {
  display: none !important;
}

html body #booking-main-area .mobile-booking-service-head,
html body #booking-main-area .booking-guest-session-hero {
  display: contents !important;
}

html body #booking-main-area .booking-guest-session-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body #booking-main-area .mobile-booking-service-head-copy,
html body #booking-main-area .booking-guest-session-copy {
  min-width: 0 !important;
  display: block !important;
}

html body #booking-main-area .booking-guest-session-price {
  flex-shrink: 0 !important;
  text-align: right !important;
}

html body #booking-main-area .booking-guest-session-price strong {
  display: block !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

html body #booking-main-area .booking-guest-session-price span {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(5, 5, 5, 0.5) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

html body #booking-main-area .booking-guest-availability {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 14px !important;
}

html body #booking-main-area .booking-guest-availability-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  flex-shrink: 0 !important;
}

html body #booking-main-area .booking-guest-availability.is-full .booking-guest-availability-dot {
  background: rgba(5, 5, 5, 0.28) !important;
}

html body #booking-main-area .booking-guest-availability-label {
  color: rgba(5, 5, 5, 0.62) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.62) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

html body #booking-main-area .mobile-booking-service-kicker,
html body #booking-main-area .booking-guest-kicker {
  margin: 0 !important;
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .mobile-booking-service-title,
html body #booking-main-area .booking-guest-title {
  max-width: none !important;
  margin: 7px 0 0 !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Superseded by the head price block and the availability line. */
html body #booking-main-area .booking-guest-session .mobile-booking-service-meta,
html body #booking-main-area .booking-guest-session .booking-guest-meta {
  display: none !important;
}

html body #booking-main-area .mobile-booking-service-meta,
html body #booking-main-area .booking-guest-meta {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  align-items: center !important;
  color: rgba(5, 5, 5, 0.56) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.56) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .mobile-booking-service-meta span + span::before,
html body #booking-main-area .booking-guest-meta span + span::before {
  content: "/" !important;
  margin-right: 7px !important;
  color: rgba(5, 5, 5, 0.24) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.24) !important;
}

html body #booking-main-area .mobile-booking-service-meta-sep {
  display: none !important;
}

html body #booking-main-area .mobile-booking-service-desc,
html body #booking-main-area .booking-guest-desc {
  max-width: none !important;
  margin: 12px 0 0 !important;
  color: rgba(5, 5, 5, 0.58) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html body #booking-main-area .booking-guest-times,
html body #booking-main-area .mobile-booking-service-copy {
  margin: 14px 0 0 !important;
  display: block !important;
}

/* Three time tiles across, per the redesign. */
html body #booking-main-area .mobile-booking-times-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  border: 0 !important;
}

html body #booking-main-area .booking-guest-time-tile {
  min-height: 52px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #f7f7f8 !important;
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.09) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body #booking-main-area .booking-guest-time-tile .booking-guest-time-clock {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

html body #booking-main-area .booking-guest-time-tile .booking-guest-time-meridiem {
  color: rgba(5, 5, 5, 0.5) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

html body #booking-main-area .booking-guest-time-tile.is-selected {
  background: #050505 !important;
  box-shadow: none !important;
}

html body #booking-main-area .booking-guest-time-tile.is-selected .booking-guest-time-clock {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #booking-main-area .booking-guest-time-tile.is-selected .booking-guest-time-meridiem {
  color: rgba(255, 255, 255, 0.66) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.66) !important;
}

html body #booking-main-area .booking-guest-time-tile:active {
  transform: scale(0.97) !important;
}

/* Overflow tile — an action, so it reads as accent rather than another time. */
html body #booking-main-area .booking-guest-time-tile.is-more {
  background: color-mix(in srgb, var(--primary-color, #ef4e2f) 9%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color, #ef4e2f) 30%, transparent) !important;
}

html body #booking-main-area .booking-guest-time-tile.is-more .booking-guest-time-clock,
html body #booking-main-area .booking-guest-time-tile.is-more .booking-guest-time-meridiem {
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
}

html body #booking-main-area .booking-guest-time-tile.is-extra {
  display: none !important;
}

html body #booking-main-area .mobile-booking-times-grid[data-expanded="true"] .booking-guest-time-tile.is-extra {
  display: flex !important;
}

/* Filter pills. */
html body #booking-main-area .booking-guest-filter-row {
  display: flex !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 2px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #booking-main-area .booking-guest-filter-row::-webkit-scrollbar {
  display: none !important;
}

html body #booking-main-area .booking-guest-filter-pill {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.12) !important;
  color: rgba(5, 5, 5, 0.66) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.66) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html body #booking-main-area .booking-guest-filter-pill.is-selected {
  background: #050505 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #booking-main-area .mobile-booking-time-btn,
html body #booking-main-area .booking-guest-time-row {
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body #booking-main-area .mobile-booking-time-btn::after,
html body #booking-main-area .booking-guest-time-row::after {
  display: none !important;
}

html body #booking-main-area .booking-guest-time-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html body #booking-main-area .booking-guest-time-main strong {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 24px !important;
  line-height: .95 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body #booking-main-area .booking-guest-time-main small {
  color: rgba(5, 5, 5, 0.5) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-guest-time-action {
  min-width: 84px !important;
  min-height: 33px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #050505 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .booking-guest-time-action span,
html body #booking-main-area .booking-guest-time-action i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #booking-main-area .booking-guest-time-row.is-extra {
  display: none !important;
}

html body #booking-main-area .mobile-booking-times-grid[data-expanded="true"] .booking-guest-time-row.is-extra {
  display: grid !important;
}

html body #booking-main-area .mobile-booking-more-btn {
  width: 100% !important;
  min-height: 34px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  color: var(--primary-color, #ef4e2f) !important;
  -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 920 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body #booking-main-area .mobile-booking-no-times {
  color: rgba(5, 5, 5, 0.48) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.48) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
}

@media (max-width: 380px) {
  html body #booking-main-area #mobile-services-selection-list {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body #booking-main-area .mobile-booking-service-title,
  html body #booking-main-area .booking-guest-title {
    font-size: 21px !important;
  }

  html body #booking-main-area .booking-guest-time-main strong {
    font-size: 22px !important;
  }
}

/* guest-booking-scroll-20260810
   The booking overlay and its inner container were both overflow-y:auto, so a
   touch had two scrollers to choose between and the page fought back. Scroll
   lives on the overlay only; everything inside just grows. */
/* Pinning to 100dvh makes Safari resize this mid-scroll as the URL bar
   collapses, which strands the last card under the nav. Anchor to the viewport
   edges instead and let the browser own the height. */
html body #booking-main-area {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

html body #mobile-builtin-booking-container {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  /* The list owns the bottom clearance; the inline 100px here just double-counts. */
  padding-bottom: 0 !important;
}

html body #booking-main-area #mobile-services-selection {
  min-height: 0 !important;
  overflow: visible !important;
}

/* guest-service-list-dc-20260906 */
html body #booking-main-area .service-list-dc {
  padding: 4px 6px 30px !important;
  font-family: var(--font-family, "Manrope"), Helvetica, Arial, sans-serif !important;
}

html body #booking-main-area .service-list-dc .booking-services-screen-head {
  padding: 0 4px !important;
}

html body #booking-main-area .service-list-dc .booking-services-screen-head span {
  font-family: "IBM Plex Mono", monospace !important;
  color: #70706b !important;
  -webkit-text-fill-color: #70706b !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
}

html body #booking-main-area .service-list-dc .booking-services-screen-head h2 {
  margin-top: 6px !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-size: 26px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

html body #booking-main-area .service-list-dc .booking-services-screen-head p {
  margin-top: 7px !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

html body #booking-main-area .service-list-dc-filters {
  display: flex !important;
  gap: 6px !important;
  margin-top: 16px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

html body #booking-main-area .service-list-dc-filters button {
  flex: none !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #booking-main-area .service-list-dc-filters button.is-active {
  border-color: #111214 !important;
  background: #111214 !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
}

html body #booking-main-area .service-list-dc-filters button span {
  margin-left: 6px !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
}

html body #booking-main-area .service-list-dc .booking-service-directory-list {
  display: grid !important;
  gap: 9px !important;
  margin-top: 14px !important;
}

html body #booking-main-area .service-list-dc-card {
  display: block !important;
  padding: 0 !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(17,18,20,.03) !important;
  overflow: hidden !important;
}

html body #booking-main-area .service-list-dc-card .booking-service-directory-main {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px !important;
  text-align: left !important;
}

html body #booking-main-area .service-list-dc-badges {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html body #booking-main-area .service-list-dc-badges > span {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  background: #efefeb !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .service-list-dc-badges .service-list-dc-availability {
  background: #e4f5f1 !important;
  color: #0a6558 !important;
  -webkit-text-fill-color: #0a6558 !important;
}

html body #booking-main-area .service-list-dc-badges .service-list-dc-availability.is-low {
  background: #fbede9 !important;
  color: #a83e29 !important;
  -webkit-text-fill-color: #a83e29 !important;
}

html body #booking-main-area .service-list-dc-card .booking-service-directory-copy > strong {
  margin-top: 9px !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

html body #booking-main-area .service-list-dc-card .booking-service-directory-meta {
  margin-top: 7px !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10.5px !important;
}

html body #booking-main-area .service-list-dc-card .booking-service-directory-desc {
  margin-top: 10px !important;
  color: #4e4e4a !important;
  -webkit-text-fill-color: #4e4e4a !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

html body #booking-main-area .service-list-dc-price {
  text-align: right !important;
}

html body #booking-main-area .service-list-dc-price strong,
html body #booking-main-area .service-list-dc-price small {
  display: block !important;
  white-space: nowrap !important;
}

html body #booking-main-area .service-list-dc-price strong {
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}

html body #booking-main-area .service-list-dc-price small {
  margin-top: 5px !important;
  color: #70706b !important;
  -webkit-text-fill-color: #70706b !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 8px !important;
}

html body #booking-main-area .service-list-dc-capacity {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 14px !important;
  padding: 11px 0 !important;
  border-top: 1px solid #f1f1ed !important;
}

html body #booking-main-area .service-list-dc-capacity > span {
  flex: 1 !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: #f1f1ed !important;
  overflow: hidden !important;
}

html body #booking-main-area .service-list-dc-capacity i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #0fbfa4 !important;
}

html body #booking-main-area .service-list-dc-capacity small,
html body #booking-main-area .service-list-dc-openings > span {
  color: #63635f !important;
  -webkit-text-fill-color: #63635f !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .08em !important;
}

html body #booking-main-area .service-list-dc-openings {
  padding: 0 14px 12px !important;
}

html body #booking-main-area .service-list-dc-openings > div {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

html body #booking-main-area .service-list-dc-openings button {
  min-height: 44px !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 13px !important;
  background: #fcfcfa !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
}

html body #booking-main-area .service-list-dc-openings button.is-first {
  border-color: #111214 !important;
  background: #111214 !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
}

html body #booking-main-area .service-list-dc-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 8px !important;
  padding: 0 14px 14px !important;
}

html body #booking-main-area .service-list-dc-actions button {
  min-height: 46px !important;
  padding: 0 16px !important;
  border: 1px solid #eaeae6 !important;
  border-radius: 14px !important;
  background: #fcfcfa !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #booking-main-area .service-list-dc-actions button.is-book {
  border-color: #111214 !important;
  background: #111214 !important;
  color: #fbfbf9 !important;
  -webkit-text-fill-color: #fbfbf9 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body #booking-main-area .service-list-dc-ask {
  width: 100% !important;
  min-height: 72px !important;
  margin-top: 14px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border: 1px dashed #d6d6d0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #111214 !important;
  -webkit-text-fill-color: #111214 !important;
  text-align: left !important;
}

html body #booking-main-area .service-list-dc-ask strong,
html body #booking-main-area .service-list-dc-ask small {
  display: block !important;
}

html body #booking-main-area .service-list-dc-ask small {
  margin-top: 3px !important;
  color: #63635f !important;
  -webkit-text-fill-color: #63635f !important;
  font-size: 11.5px !important;
}

html body #booking-main-area .service-list-dc-ask b {
  color: #0a6558 !important;
  -webkit-text-fill-color: #0a6558 !important;
  font-size: 11.5px !important;
}

/* The sticky header must not trap touches meant for the list behind it. */
html body #booking-main-area .booking-header-bar,
html body #booking-main-area .mobile-booking-week-shell {
  touch-action: pan-y !important;
}

/* The day rail scrolls sideways; keep that gesture from stealing vertical drags. */
html body #booking-main-area #booking-week-strip {
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
}

/* Tiles and cards should never swallow a scroll that started on them. */
html body #booking-main-area .booking-guest-session,
html body #booking-main-area .booking-guest-time-tile,
html body #booking-main-area .booking-guest-filter-pill {
  touch-action: manipulation !important;
}

/* ---------------------------------------------- the desktop Booking face
   The guest booking home, the pick-a-time sheet, review and payment carry
   the /<T>/booking page's look: pure white surfaces (no grey fills), 1.5px
   hairline cards and fields, times as outlined buttons, and the app's own
   colour on the chosen day and the chosen time. The doubled id outranks
   the earlier layers (guest.css, checkout-inputs.css) without new
   !important wars; neutrals are role-named tokens so page colour moves
   them. */
html body #booking-main-area#booking-main-area,
html body #mobileBookingModal#mobileBookingModal,
html body #mobilePaymentModal#mobilePaymentModal {
    --bk-paper: #ffffff;
    --bk-ink: #111113;
    --bk-dim: #5f6068;
    --bk-edge: #e3e3e6;
    --bk-line: #efefef;
    --bk-btn: var(--pc-btn, var(--primary-color, #111113));
    --bk-on-btn: var(--pc-on-btn, #ffffff);
}
/* No dark twin here: these surfaces paint themselves light in both themes
   (their text is set dark by the older layers), so the paper stays white. */

/* The week: the chosen day in the app's colour, open days marked by it. */
html body #booking-main-area#booking-main-area .mobile-booking-day.is-selected {
    background: var(--bk-btn) !important;
    border-color: var(--bk-btn) !important;
}
html body #booking-main-area#booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-name,
html body #booking-main-area#booking-main-area .mobile-booking-day.is-selected .mobile-booking-day-number {
    color: var(--bk-on-btn) !important;
    -webkit-text-fill-color: var(--bk-on-btn) !important;
}
html body #booking-main-area#booking-main-area .mobile-booking-day:not(.is-selected) .booking-week-dot {
    background: var(--bk-btn) !important;
}
html body #booking-main-area#booking-main-area .mobile-booking-day.is-selected .booking-week-dot {
    background: var(--bk-on-btn) !important;
}

/* Services as the desktop's booking-type cards. */
html body #booking-main-area#booking-main-area .booking-guest-session {
    border: 1.5px solid var(--bk-edge) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

/* Times: outlined buttons; the chosen one filled with the app's colour. */
html body #booking-main-area#booking-main-area .booking-guest-time-tile,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time {
    background: var(--bk-paper) !important;
    border: 1.5px solid var(--bk-edge) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
html body #booking-main-area#booking-main-area .booking-guest-time-tile:active,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time:active {
    border-color: var(--bk-ink) !important;
}
html body #booking-main-area#booking-main-area .booking-guest-time-tile.is-selected,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time.is-selected {
    background: var(--bk-btn) !important;
    border-color: var(--bk-btn) !important;
}
html body #booking-main-area#booking-main-area .booking-guest-time-tile.is-selected *,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time.is-selected,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-time.is-selected * {
    color: var(--bk-on-btn) !important;
    -webkit-text-fill-color: var(--bk-on-btn) !important;
}
html body #booking-main-area#booking-main-area .booking-guest-time-tile.is-more {
    border-style: dashed !important;
}
html body #booking-main-area#booking-main-area .booking-image-thumb {
    background: var(--bk-line) !important;
}

/* The sheets: white, hairline fields, an outlined hold timer. */
html body #mobileBookingModal#mobileBookingModal,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-checkout-sheet,
html body #mobilePaymentModal#mobilePaymentModal,
html body #mobilePaymentModal#mobilePaymentModal .mobile-payment-shell {
    background: var(--bk-paper) !important;
}
html body #mobileBookingModal#mobileBookingModal .mobile-booking-flow-header,
html body #mobilePaymentModal#mobilePaymentModal .mobile-payment-header {
    background: var(--bk-paper) !important;
}
html body #mobileBookingModal#mobileBookingModal input#mobileGuestName,
html body #mobileBookingModal#mobileBookingModal input#mobileGuestEmail,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-flow-field > input {
    background: var(--bk-paper) !important;
    border: 1.5px solid var(--bk-edge) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
html body #mobileBookingModal#mobileBookingModal input#mobileGuestName:focus,
html body #mobileBookingModal#mobileBookingModal input#mobileGuestEmail:focus {
    border-color: var(--bk-ink) !important;
}
html body #mobileBookingModal#mobileBookingModal .mobile-booking-flow-hold {
    background: var(--bk-paper) !important;
    border: 1px solid var(--bk-edge) !important;
}
html body #mobileBookingModal#mobileBookingModal .mobile-booking-review-payment,
html body #mobileBookingModal#mobileBookingModal .mobile-booking-review-host-avatar {
    background: var(--bk-paper) !important;
    border: 1.5px solid var(--bk-edge) !important;
}

/* Dark: the older layers darken the cards but keep their text dark, and
   leave the week band white. Give the home one dark system. */
html[data-theme="dark"] body #booking-main-area#booking-main-area {
    --bk-paper: #0b0b0d;
    --bk-ink: #f4f4f5;
    --bk-dim: #a9a9b1;
    --bk-edge: #2c2c32;
    --bk-line: #202025;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-header-bar,
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-week-shell {
    background: var(--bk-paper) !important;
    border-color: var(--bk-line) !important;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-eyebrow,
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-title-wrap *,
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-day:not(.is-selected) .mobile-booking-day-number,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-title,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-session-price strong,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-time-tile:not(.is-selected) .booking-guest-time-clock {
    color: var(--bk-ink) !important;
    -webkit-text-fill-color: var(--bk-ink) !important;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-day:not(.is-selected) .mobile-booking-day-name,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-desc,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-session-price span,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-availability-label,
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-no-times,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-time-tile:not(.is-selected) .booking-guest-time-meridiem {
    color: var(--bk-dim) !important;
    -webkit-text-fill-color: var(--bk-dim) !important;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .mobile-booking-day:not(.is-selected) {
    background: transparent !important;
    border-color: var(--bk-edge) !important;
}
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-session,
html[data-theme="dark"] body #booking-main-area#booking-main-area .booking-guest-time-tile:not(.is-selected) {
    background: transparent !important;
}

/* Guest booking on the phone (static/js/booking-v2/guest-desk.js): the
 * desktop Booking page (static/css/booking/booking.css) on a 390px screen.
 *
 * Everything is scoped to #booking-main-area #bk-guestx and states its colour
 * with !important plus -webkit-text-fill-color, because the page's blanket
 * theme sweeps ([data-theme="light"] * * *, fixed-parent sweeps) set both on
 * every element. Neutrals are literal (white, black, hairline greys) so
 * mobile-page-colors.js can twin them into the owner's page colour; the app
 * colour is --primary-color. No grey fills: tints of the app colour or
 * hairlines instead.
 */
html body #booking-main-area #bk-guestx { 
  --bgx-paper: #ffffff;
  --bgx-ink: #0e0e0e;
  --bgx-dim: #555555;
  --bgx-faint: #8a8a8a;
  --bgx-off: #c2c2c2;
  --bgx-edge: #ececec;
  --bgx-field: #e2e2e2;
  --bgx-hl: var(--primary-color, #111111);
  --bgx-hl-soft: color-mix(in srgb, var(--primary-color, #111111) 12%, transparent);
  --bgx-hl-line: color-mix(in srgb, var(--primary-color, #111111) 40%, transparent);
  --bgx-good: #16a34a;
  --bgx-good-bg: rgba(22, 163, 74, 0.1);
  --bgx-warn: #92400e;
  --bgx-warn-bg: rgba(245, 158, 11, 0.16);
  --bgx-bad: #dc2626;
  --bgx-wide: "Archivo", -apple-system, system-ui, sans-serif;
  --bgx-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 10px 0 150px !important;
  background: var(--bgx-paper) !important;
  color: var(--bgx-ink) !important;
  -webkit-text-fill-color: var(--bgx-ink) !important;
  font-family: var(--bgx-wide) !important;
  font-size: 15px !important;
  text-align: left !important;
  -webkit-font-smoothing: antialiased;
}
html body #booking-main-area #bk-guestx[hidden] { display: none !important; }
:is(html[data-theme="dark"], html[data-theme="dark-accent"]) body #booking-main-area #bk-guestx {
  --bgx-paper: #000000;
  --bgx-ink: #ffffff;
  --bgx-dim: #b4b4b8;
  --bgx-faint: #86868c;
  --bgx-off: #4a4a50;
  --bgx-edge: #232327;
  --bgx-field: #34343a;
  --bgx-hl-soft: color-mix(in srgb, var(--primary-color, #ffffff) 22%, transparent);
  --bgx-good: #4ade80;
  --bgx-good-bg: rgba(74, 222, 128, 0.14);
  --bgx-warn: #fbbf24;
  --bgx-bad: #f87171;
}
html body #booking-main-area #bk-guestx :where(*) {
  box-sizing: border-box !important;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body #booking-main-area #bk-guestx :is(div, span, b, strong, small, em, p, h1, h2, h3, label, a, button, li, dt, dd, sup, section, header, aside, form, i) {
  color: var(--bgx-ink) !important;
  -webkit-text-fill-color: var(--bgx-ink) !important;
  font-family: var(--bgx-wide) !important;
  font-weight: 400 !important;
}
html body #booking-main-area #bk-guestx :is(b, strong) { font-weight: 700 !important; }
html body #booking-main-area #bk-guestx button { -webkit-tap-highlight-color: transparent; cursor: pointer; font: inherit; margin: 0; }
html body #booking-main-area #bk-guestx svg { color: inherit !important; }
html body #booking-main-area #bk-guestx .bgx-back svg { color: var(--bgx-ink) !important; stroke: var(--bgx-ink) !important; }
html body #booking-main-area #bk-guestx svg :is(path, circle, rect, line, polyline) { fill: none !important; stroke: inherit !important; color: inherit !important; }
html body #booking-main-area #bk-guestx svg { width: 17px !important; height: 17px !important; flex: 0 0 auto !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round; stroke-linejoin: round; }

/* The older header, week strip and list stay underneath, out of sight. */
html body #booking-main-area.bgx-on #mobile-services-selection > .booking-header-bar,
html body #booking-main-area.bgx-on #mobile-services-selection > .mobile-booking-week-shell,
html body #booking-main-area.bgx-on #mobile-services-selection > #mobile-services-selection-list { display: none !important; }
html body #booking-main-area.bgx-on { background: #ffffff !important; }
:is(html[data-theme="dark"], html[data-theme="dark-accent"]) body #booking-main-area.bgx-on { background: #000000 !important; }

html body #booking-main-area #bk-guestx .bgx-label { font-family: var(--bgx-mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; margin: 0 0 10px !important; }

/* loading + empty */
html body #booking-main-area #bk-guestx .bgx-load { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 8px 18px !important; }
html body #booking-main-area #bk-guestx .bgx-load[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-load i { display: block !important; height: 88px !important; border-radius: 16px !important; border: 1px solid var(--bgx-edge) !important; background: linear-gradient(90deg, transparent, var(--bgx-hl-soft), transparent) !important; background-size: 200% 100% !important; animation: bgx-shimmer 1.2s linear infinite !important; }
html body #booking-main-area #bk-guestx .bgx-load i:nth-child(2) { height: 260px !important; }
@keyframes bgx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
html body #booking-main-area #bk-guestx .bgx-empty { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 80px 28px !important; text-align: center !important; }
html body #booking-main-area #bk-guestx .bgx-empty[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-empty strong { font-size: 22px !important; font-weight: 900 !important; }
html body #booking-main-area #bk-guestx .bgx-empty span { font-size: 15px !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; line-height: 1.5 !important; }

/* who */
html body #booking-main-area #bk-guestx .bgx-who { display: flex !important; align-items: center !important; gap: 12px !important; padding: 6px 18px 18px !important; }
html body #booking-main-area #bk-guestx .bgx-who img { width: 46px !important; height: 46px !important; border-radius: 50% !important; object-fit: cover !important; flex: 0 0 auto !important; box-shadow: 0 0 0 3px var(--bgx-paper), 0 0 0 4.5px var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-who div { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-who small { font-family: var(--bgx-mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; }
html body #booking-main-area #bk-guestx .bgx-who b { font-size: 17px !important; font-weight: 800 !important; line-height: 1.2 !important; }
html body #booking-main-area #bk-guestx .bgx-who em { font-style: normal !important; font-size: 13px !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-who em:empty { display: none !important; }

/* booking types: cards in a row */
html body #booking-main-area #bk-guestx .bgx-types { padding: 0 0 20px !important; }
html body #booking-main-area #bk-guestx .bgx-types .bgx-label { padding: 0 18px !important; }
html body #booking-main-area #bk-guestx .bgx-types__row { display: flex !important; gap: 10px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding: 2px 18px 6px !important; scrollbar-width: none !important; }
html body #booking-main-area #bk-guestx .bgx-types__row::-webkit-scrollbar { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-type { flex: 0 0 76% !important; max-width: 300px !important; scroll-snap-align: start !important; scroll-margin-left: 18px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 14px 16px !important; border-radius: 16px !important; border: 1.5px solid var(--bgx-edge) !important; background: var(--bgx-paper) !important; text-align: left !important; box-shadow: none !important; min-height: 0 !important; transition: border-color 0.12s, box-shadow 0.12s !important; }
html body #booking-main-area #bk-guestx .bgx-types__row.is-one .bgx-type { flex-basis: 100% !important; max-width: none !important; }
html body #booking-main-area #bk-guestx .bgx-type.is-on { border-color: var(--bgx-hl) !important; box-shadow: 0 0 0 3px var(--bgx-hl-soft) !important; }
html body #booking-main-area #bk-guestx .bgx-type__top { display: flex !important; align-items: baseline !important; gap: 10px !important; }
html body #booking-main-area #bk-guestx .bgx-type__name { flex: 1 !important; min-width: 0 !important; font-size: 15px !important; font-weight: 800 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body #booking-main-area #bk-guestx .bgx-type__price { font-family: var(--bgx-mono) !important; font-size: 13px !important; font-weight: 700 !important; }
html body #booking-main-area #bk-guestx .bgx-type__price.is-free { color: var(--bgx-good) !important; -webkit-text-fill-color: var(--bgx-good) !important; }
html body #booking-main-area #bk-guestx .bgx-type__desc { font-size: 13px !important; line-height: 1.4 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 36px !important; }
html body #booking-main-area #bk-guestx .bgx-type__meta { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
html body #booking-main-area #bk-guestx .bgx-type__meta span { padding: 3px 8px !important; border-radius: 6px !important; border: 1px solid var(--bgx-edge) !important; font-size: 11px !important; font-weight: 700 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }

/* the chosen type */
html body #booking-main-area #bk-guestx .bgx-svc { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 18px 18px 22px !important; border-top: 1px solid var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-svc h1 { margin: 0 !important; font-size: 28px !important; font-weight: 900 !important; font-stretch: 108% !important; letter-spacing: -0.025em !important; line-height: 1.08 !important; overflow-wrap: anywhere !important; }
html body #booking-main-area #bk-guestx .bgx-svc p { margin: 0 !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; white-space: pre-wrap !important; }
html body #booking-main-area #bk-guestx .bgx-svc p:empty { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-facts { display: flex !important; flex-direction: column !important; gap: 9px !important; margin-top: 2px !important; }
html body #booking-main-area #bk-guestx .bgx-fact { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; font-weight: 600 !important; }
html body #booking-main-area #bk-guestx .bgx-fact svg { color: var(--bgx-dim) !important; }

/* the month */
html body #booking-main-area #bk-guestx .bgx-cal { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 20px 18px !important; border-top: 1px solid var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-soon[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-soon__row { display: flex !important; gap: 8px !important; overflow-x: auto !important; margin: 0 -18px !important; padding: 0 18px 2px !important; scrollbar-width: none !important; }
html body #booking-main-area #bk-guestx .bgx-soon__row::-webkit-scrollbar { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-chip { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; padding: 8px 14px !important; border-radius: 12px !important; border: 1.5px solid var(--bgx-edge) !important; background: var(--bgx-paper) !important; box-shadow: none !important; min-height: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-chip strong { font-size: 14px !important; font-weight: 800 !important; }
html body #booking-main-area #bk-guestx .bgx-chip span { font-size: 12px !important; font-weight: 700 !important; color: var(--bgx-good) !important; -webkit-text-fill-color: var(--bgx-good) !important; }
html body #booking-main-area #bk-guestx .bgx-chip.is-on { border-color: var(--bgx-hl) !important; background: var(--bgx-hl-soft) !important; }
html body #booking-main-area #bk-guestx .bgx-cal__head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
html body #booking-main-area #bk-guestx .bgx-cal__month { font-size: 20px !important; font-weight: 900 !important; }
html body #booking-main-area #bk-guestx .bgx-cal__month span { font-size: 20px !important; font-weight: 900 !important; }
html body #booking-main-area #bk-guestx .bgx-cal__month .bgx-cal__year { color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; font-weight: 600 !important; }
html body #booking-main-area #bk-guestx .bgx-cal__nav { display: flex !important; gap: 6px !important; }
html body #booking-main-area #bk-guestx .bgx-nav { width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 1.5px solid var(--bgx-field) !important; background: var(--bgx-paper) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; padding: 0 !important; box-shadow: none !important; min-height: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-nav:disabled { color: var(--bgx-off) !important; -webkit-text-fill-color: var(--bgx-off) !important; border-color: var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-gridwrap { position: relative !important; }
html body #booking-main-area #bk-guestx .bgx-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 4px !important; }
html body #booking-main-area #bk-guestx .bgx-grid.is-dead { opacity: 0.3 !important; pointer-events: none !important; }
html body #booking-main-area #bk-guestx .bgx-dow { font-family: var(--bgx-mono) !important; font-size: 11px !important; font-weight: 700 !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; text-align: center !important; padding: 2px 0 6px !important; }
html body #booking-main-area #bk-guestx .bgx-day { position: relative !important; aspect-ratio: 1 !important; min-width: 0 !important; width: 100% !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important; background: transparent !important; font-size: 15px !important; font-weight: 500 !important; color: var(--bgx-off) !important; -webkit-text-fill-color: var(--bgx-off) !important; box-shadow: none !important; min-height: 0 !important; cursor: default !important; }
html body #booking-main-area #bk-guestx .bgx-day.is-today { text-decoration: underline !important; text-underline-offset: 4px !important; }
html body #booking-main-area #bk-guestx .bgx-day.is-full { text-decoration: line-through !important; }
html body #booking-main-area #bk-guestx .bgx-day.is-open { background: var(--bgx-hl-soft) !important; color: var(--bgx-ink) !important; -webkit-text-fill-color: var(--bgx-ink) !important; font-weight: 800 !important; cursor: pointer !important; }
html body #booking-main-area #bk-guestx .bgx-day.is-on { background: var(--bgx-hl) !important; color: var(--bgx-on-hl, #fff) !important; -webkit-text-fill-color: var(--bgx-on-hl, #fff) !important; font-weight: 800 !important; }
html body #booking-main-area #bk-guestx .bgx-day__dot { position: absolute !important; left: 50% !important; bottom: 14% !important; width: 4px !important; height: 4px !important; margin-left: -2px !important; border-radius: 50% !important; background: currentColor !important; opacity: 0.7 !important; }
html body #booking-main-area #bk-guestx .bgx-day.is-on .bgx-day__dot { background: var(--bgx-on-hl, #fff) !important; }
html body #booking-main-area #bk-guestx .bgx-day--blank { visibility: hidden !important; }
html body #booking-main-area #bk-guestx .bgx-nomonth { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -45%) !important; width: 92% !important; padding: 20px !important; border-radius: 16px !important; background: var(--bgx-paper) !important; border: 1.5px solid var(--bgx-edge) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14) !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; }
html body #booking-main-area #bk-guestx .bgx-nomonth[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-nomonth strong { font-size: 17px !important; font-weight: 900 !important; }
html body #booking-main-area #bk-guestx .bgx-nomonth span { font-size: 14px !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; margin-bottom: 6px !important; }

/* the times */
html body #booking-main-area #bk-guestx .bgx-times { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 20px 18px 8px !important; border-top: 1px solid var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-times__head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; }
html body #booking-main-area #bk-guestx .bgx-times__day { font-size: 19px !important; font-weight: 900 !important; }
html body #booking-main-area #bk-guestx .bgx-times__sub { margin-top: 3px !important; font-size: 13px !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-times__sub:empty { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-fmt { display: flex !important; padding: 3px !important; border-radius: 10px !important; border: 1px solid var(--bgx-edge) !important; flex: 0 0 auto !important; }
html body #booking-main-area #bk-guestx .bgx-fmt button { height: 28px !important; padding: 0 10px !important; border-radius: 7px !important; border: 0 !important; background: transparent !important; font-family: var(--bgx-mono) !important; font-size: 11px !important; font-weight: 700 !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; box-shadow: none !important; min-height: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-fmt button[aria-pressed="true"] { background: var(--bgx-hl-soft) !important; color: var(--bgx-ink) !important; -webkit-text-fill-color: var(--bgx-ink) !important; }
html body #booking-main-area #bk-guestx .bgx-tz { display: flex !important; align-items: center !important; gap: 8px !important; height: 42px !important; padding: 0 12px !important; border-radius: 12px !important; border: 1.5px solid var(--bgx-edge) !important; background: var(--bgx-paper) !important; }
html body #booking-main-area #bk-guestx .bgx-tz[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-tz svg { color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-tz select { flex: 1 !important; min-width: 0 !important; height: 40px !important; border: 0 !important; background: transparent !important; color: var(--bgx-ink) !important; -webkit-text-fill-color: var(--bgx-ink) !important; font-family: var(--bgx-wide) !important; font-size: 14px !important; font-weight: 700 !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; }
html body #booking-main-area #bk-guestx .bgx-tznote { margin: -4px 0 0 !important; font-size: 12.5px !important; line-height: 1.45 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-tznote[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-slots { display: flex !important; flex-direction: column !important; gap: 16px !important; padding-bottom: 8px !important; }
html body #booking-main-area #bk-guestx .bgx-tgroup__label { font-family: var(--bgx-mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; margin-bottom: 8px !important; }
html body #booking-main-area #bk-guestx .bgx-tgrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
html body #booking-main-area #bk-guestx .bgx-slot { position: relative !important; height: 46px !important; padding: 0 !important; border-radius: 12px !important; border: 1.5px solid var(--bgx-field) !important; background: var(--bgx-paper) !important; font-family: var(--bgx-mono) !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; min-height: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-slot.is-on { background: var(--bgx-hl) !important; border-color: var(--bgx-hl) !important; color: var(--bgx-on-hl, #fff) !important; -webkit-text-fill-color: var(--bgx-on-hl, #fff) !important; }
html body #booking-main-area #bk-guestx .bgx-slot sup { margin-left: 3px !important; font-size: 9px !important; opacity: 0.7 !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html body #booking-main-area #bk-guestx .bgx-none { padding: 14px 2px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; }

/* sticky Continue, above the booking nav */
html body #booking-main-area #bk-guestx .bgx-bar { position: sticky !important; z-index: 5 !important; bottom: var(--bgx-nav, 96px) !important; margin: 12px 12px 0 !important; padding: 12px 12px 12px 16px !important; border-radius: 18px !important; background: var(--bgx-paper) !important; border: 1px solid var(--bgx-edge) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16) !important; display: flex !important; align-items: center !important; gap: 12px !important; animation: bgx-in 0.18s ease !important; }
html body #booking-main-area #bk-guestx .bgx-bar[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-bar__pick { flex: 1 !important; min-width: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-bar__pick strong { display: block !important; font-size: 13.5px !important; font-weight: 800 !important; line-height: 1.3 !important; }
html body #booking-main-area #bk-guestx .bgx-bar__pick span { display: block !important; margin-top: 2px !important; font-size: 12px !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body #booking-main-area #bk-guestx .bgx-bar .bgx-btn { flex: 0 0 auto !important; min-width: 118px !important; }
@keyframes bgx-in { from { opacity: 0; transform: translateY(8px); } }

/* buttons */
html body #booking-main-area #bk-guestx .bgx-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 44px !important; padding: 0 18px !important; border-radius: 12px !important; border: 0 !important; background: transparent !important; font-size: 14px !important; font-weight: 800 !important; white-space: nowrap !important; text-decoration: none !important; box-shadow: none !important; min-height: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-btn--solid { background: var(--bgx-hl) !important; color: var(--bgx-on-hl, #fff) !important; -webkit-text-fill-color: var(--bgx-on-hl, #fff) !important; }
html body #booking-main-area #bk-guestx .bgx-btn--solid:disabled { opacity: 0.35 !important; }
/* .bgx-btn's display:inline-flex !important beat the hidden attribute, so the
   "No openings in <month>" card showed its Jump-to button with no label when
   there was no next date to jump to: an empty orange block. */
html body #booking-main-area #bk-guestx .bgx-btn[hidden] { display: none !important; }

/* Keep service choice and real openings together on the first phone screen. */
html body #booking-main-area #bk-guestx .bgx-types { padding: 0 0 12px !important; }
html body #booking-main-area #bk-guestx .bgx-types__row { display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 7px !important; padding: 0 18px !important; scroll-snap-type: none !important; }
html body #booking-main-area #bk-guestx .bgx-type,
html body #booking-main-area #bk-guestx .bgx-types__row.is-one .bgx-type { flex: none !important; width: 100% !important; max-width: none !important; gap: 3px !important; padding: 10px 12px !important; border-radius: 12px !important; }
html body #booking-main-area #bk-guestx .bgx-type__name { white-space: normal !important; line-height: 1.2 !important; font-size: 14px !important; }
html body #booking-main-area #bk-guestx .bgx-type__desc { min-height: 0 !important; -webkit-line-clamp: 1 !important; font-size: 12px !important; }
html body #booking-main-area #bk-guestx .bgx-type.is-on .bgx-type__desc { display: block !important; overflow: visible !important; white-space: pre-wrap !important; line-height: 1.45 !important; font-size: 13px !important; }
html body #booking-main-area #bk-guestx .bgx-type__select { display: flex !important; align-items: flex-start !important; gap: 10px !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; }
html body #booking-main-area #bk-guestx .bgx-type__copy { display: flex !important; flex: 1 !important; min-width: 0 !important; flex-direction: column !important; gap: 3px !important; }
html body #booking-main-area #bk-guestx .bgx-type__thumb { display: block !important; flex: 0 0 54px !important; width: 54px !important; height: 54px !important; overflow: hidden !important; border-radius: 9px !important; background: var(--bgx-hl-soft) !important; }
html body #booking-main-area #bk-guestx .bgx-type__thumb img,
html body #booking-main-area #bk-guestx .bgx-type__photo img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body #booking-main-area #bk-guestx .bgx-type__gallery { display: flex !important; gap: 7px !important; overflow-x: auto !important; max-width: 100% !important; padding: 5px 0 1px !important; scrollbar-width: none !important; }
html body #booking-main-area #bk-guestx .bgx-type__gallery::-webkit-scrollbar { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-type__photo { display: block !important; flex: 0 0 66px !important; width: 66px !important; height: 66px !important; padding: 0 !important; overflow: hidden !important; border-radius: 9px !important; border: 1px solid var(--bgx-edge) !important; background: var(--bgx-hl-soft) !important; box-shadow: none !important; }
html body #booking-main-area #bk-guestx .bgx-type__meta span { padding: 0 !important; border: 0 !important; font-size: 11px !important; }
html body #booking-main-area #bk-guestx .bgx-type__meta span + span::before { content: "·"; margin-right: 6px; }
html body #booking-main-area #bk-guestx .bgx-times { gap: 10px !important; padding: 14px 18px 8px !important; }
html body #booking-main-area #bk-guestx .bgx-soon__row { margin: 0 -18px !important; }
html body #booking-main-area #bk-guestx .bgx-chip { padding: 6px 10px !important; }
html body #booking-main-area #bk-guestx { padding-bottom: calc(var(--bgx-nav, 96px) + 110px) !important; }
html body #booking-main-area #bk-guestx .bgx-btn--line { height: 42px !important; padding: 0 16px !important; border: 1.5px solid var(--bgx-field) !important; background: var(--bgx-paper) !important; font-size: 13px !important; }
html body #booking-main-area #bk-guestx .bgx-btn--ghost { color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-btn--wide { height: 52px !important; padding: 0 22px !important; font-size: 15px !important; border-radius: 14px !important; }
html body #booking-main-area #bk-guestx .bgx-btn.is-busy { position: relative !important; color: transparent !important; -webkit-text-fill-color: transparent !important; opacity: 0.9 !important; }
html body #booking-main-area #bk-guestx .bgx-btn.is-busy::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 18px !important; height: 18px !important; margin: -9px 0 0 -9px !important; border-radius: 50% !important; border: 2px solid var(--bgx-on-hl, #fff) !important; border-top-color: transparent !important; animation: bgx-spin 0.7s linear infinite !important; }
@keyframes bgx-spin { to { transform: rotate(360deg); } }
html body #booking-main-area #bk-guestx .bgx-danger { color: var(--bgx-bad) !important; -webkit-text-fill-color: var(--bgx-bad) !important; }

/* ---------------------------------------------------------------- checkout */
html body #booking-main-area #bk-guestx .bgx-co { display: flex !important; flex-direction: column !important; gap: 18px !important; padding: 4px 18px 0 !important; animation: bgx-in 0.18s ease !important; }
html body #booking-main-area #bk-guestx .bgx-co[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-co__top { display: flex !important; align-items: center !important; gap: 12px !important; }
html body #booking-main-area #bk-guestx .bgx-back { width: 38px !important; height: 38px !important; flex: 0 0 auto !important; display: grid !important; place-items: center !important; border-radius: 50% !important; border: 1.5px solid var(--bgx-field) !important; background: var(--bgx-paper) !important; padding: 0 !important; box-shadow: none !important; min-height: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-back[hidden] { visibility: hidden !important; display: grid !important; }
html body #booking-main-area #bk-guestx .bgx-steps { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; flex: 1 !important; min-width: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-steps__item { display: flex !important; align-items: center !important; gap: 6px !important; flex: 0 1 auto !important; min-width: 0 !important; font-size: 12px !important; font-weight: 700 !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; }
html body #booking-main-area #bk-guestx .bgx-steps__item + .bgx-steps__item::before { content: "" !important; width: 12px !important; height: 2px !important; margin: 0 6px 0 2px !important; border-radius: 1px !important; background: var(--bgx-edge) !important; flex: 0 0 auto !important; }
html body #booking-main-area #bk-guestx .bgx-steps__item.is-done + .bgx-steps__item::before, html body #booking-main-area #bk-guestx .bgx-steps__item.is-on::before { background: var(--bgx-hl) !important; }
html body #booking-main-area #bk-guestx .bgx-steps__dot { width: 22px !important; height: 22px !important; flex: 0 0 auto !important; border-radius: 50% !important; display: grid !important; place-items: center !important; border: 1.5px solid var(--bgx-field) !important; font-family: var(--bgx-mono) !important; font-size: 11px !important; font-weight: 700 !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; }
html body #booking-main-area #bk-guestx .bgx-steps__dot svg { width: 12px !important; height: 12px !important; stroke-width: 3 !important; }
html body #booking-main-area #bk-guestx .bgx-steps__item.is-on .bgx-steps__label, html body #booking-main-area #bk-guestx .bgx-steps__item.is-done .bgx-steps__label { color: var(--bgx-ink) !important; -webkit-text-fill-color: var(--bgx-ink) !important; }
html body #booking-main-area #bk-guestx .bgx-steps__label { color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; font-size: 12px !important; font-weight: 700 !important; }
html body #booking-main-area #bk-guestx .bgx-steps__item.is-on .bgx-steps__dot { background: var(--bgx-hl) !important; border-color: var(--bgx-hl) !important; color: var(--bgx-on-hl, #fff) !important; -webkit-text-fill-color: var(--bgx-on-hl, #fff) !important; }
html body #booking-main-area #bk-guestx .bgx-steps__item.is-done .bgx-steps__dot { background: var(--bgx-hl-soft) !important; border-color: transparent !important; color: var(--bgx-hl) !important; -webkit-text-fill-color: var(--bgx-hl) !important; }
html body #booking-main-area #bk-guestx .bgx-steps__item.is-done .bgx-steps__dot svg { color: var(--bgx-hl) !important; }

/* order summary */
html body #booking-main-area #bk-guestx .bgx-sum { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 16px !important; border-radius: 18px !important; border: 1.5px solid var(--bgx-edge) !important; background: var(--bgx-paper) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.06) !important; }
html body #booking-main-area #bk-guestx .bgx-sum.is-folded { gap: 10px !important; padding: 12px 14px !important; }
html body #booking-main-area #bk-guestx .bgx-sum__line { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 10px 0 0 !important; border: 0 !important; border-top: 1px solid var(--bgx-edge) !important; background: transparent !important; text-align: left !important; box-shadow: none !important; min-height: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-sum__line svg { color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-sum__line span { flex: 1 !important; min-width: 0 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; }
html body #booking-main-area #bk-guestx .bgx-sum__line b { font-family: var(--bgx-mono) !important; font-size: 14px !important; font-weight: 700 !important; }
html body #booking-main-area #bk-guestx .bgx-sum__line em { font-style: normal !important; font-size: 12px !important; font-weight: 700 !important; color: var(--bgx-hl) !important; -webkit-text-fill-color: var(--bgx-hl) !important; }
html body #booking-main-area #bk-guestx .bgx-sum__fold { align-self: flex-start !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 12px !important; font-weight: 700 !important; color: var(--bgx-hl) !important; -webkit-text-fill-color: var(--bgx-hl) !important; box-shadow: none !important; min-height: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-sum__who { display: flex !important; align-items: center !important; gap: 10px !important; }
html body #booking-main-area #bk-guestx .bgx-sum__who img { width: 38px !important; height: 38px !important; border-radius: 50% !important; object-fit: cover !important; }
html body #booking-main-area #bk-guestx .bgx-sum__who > div { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; }
html body #booking-main-area #bk-guestx .bgx-sum__who b { font-size: 16px !important; font-weight: 900 !important; line-height: 1.2 !important; overflow-wrap: anywhere !important; }
html body #booking-main-area #bk-guestx .bgx-sum__who small { font-size: 12.5px !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-badge { padding: 4px 10px !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 800 !important; }
html body #booking-main-area #bk-guestx .bgx-badge.is-ok { background: var(--bgx-good-bg) !important; color: var(--bgx-good) !important; -webkit-text-fill-color: var(--bgx-good) !important; }
html body #booking-main-area #bk-guestx .bgx-badge.is-wait { background: var(--bgx-warn-bg) !important; color: var(--bgx-warn) !important; -webkit-text-fill-color: var(--bgx-warn) !important; }
html body #booking-main-area #bk-guestx .bgx-badge.is-off { border: 1px solid var(--bgx-edge) !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; }
html body #booking-main-area #bk-guestx .bgx-sum__facts { display: flex !important; flex-direction: column !important; gap: 10px !important; }
html body #booking-main-area #bk-guestx .bgx-sum__fact { display: flex !important; gap: 10px !important; align-items: flex-start !important; }
html body #booking-main-area #bk-guestx .bgx-sum__fact svg { margin-top: 1px !important; color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-sum__fact div { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-sum__fact span { font-size: 14px !important; font-weight: 700 !important; line-height: 1.35 !important; }
html body #booking-main-area #bk-guestx .bgx-sum__fact small { font-size: 12px !important; line-height: 1.4 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-sum__rows { margin: 0 !important; padding-top: 12px !important; border-top: 1px solid var(--bgx-edge) !important; display: grid !important; grid-template-columns: 1fr auto !important; gap: 7px 0 !important; font-size: 14px !important; }
html body #booking-main-area #bk-guestx .bgx-sum__rows dt { color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 14px !important; }
html body #booking-main-area #bk-guestx .bgx-sum__rows dd { margin: 0 !important; padding-left: 14px !important; font-family: var(--bgx-mono) !important; font-weight: 700 !important; text-align: right !important; font-size: 14px !important; }
html body #booking-main-area #bk-guestx .bgx-sum__rows .is-total { padding-top: 9px !important; border-top: 1px solid var(--bgx-edge) !important; color: var(--bgx-ink) !important; -webkit-text-fill-color: var(--bgx-ink) !important; font-size: 16px !important; font-weight: 900 !important; }
html body #booking-main-area #bk-guestx .bgx-sum__hold { display: flex !important; flex-direction: column !important; gap: 6px !important; }
html body #booking-main-area #bk-guestx .bgx-sum__hold[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-sum__hold span { font-size: 12px !important; font-weight: 700 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-sum__bar { height: 4px !important; border-radius: 2px !important; border: 0 !important; background: var(--bgx-edge) !important; overflow: hidden !important; }
html body #booking-main-area #bk-guestx .bgx-sum__bar i { display: block !important; height: 100% !important; background: var(--bgx-good) !important; border-radius: 2px !important; transition: width 1s linear !important; }
html body #booking-main-area #bk-guestx .bgx-sum__hold.is-low span { color: var(--bgx-warn) !important; -webkit-text-fill-color: var(--bgx-warn) !important; }
html body #booking-main-area #bk-guestx .bgx-sum__hold.is-low .bgx-sum__bar i { background: #f59e0b !important; }
html body #booking-main-area #bk-guestx .bgx-sum__hold.is-out span { color: var(--bgx-bad) !important; -webkit-text-fill-color: var(--bgx-bad) !important; }

/* steps */
html body #booking-main-area #bk-guestx .bgx-step { display: flex !important; flex-direction: column !important; gap: 16px !important; animation: bgx-in 0.18s ease !important; }
html body #booking-main-area #bk-guestx .bgx-step[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-step__title { margin: 4px 0 0 !important; font-size: 26px !important; font-weight: 900 !important; font-stretch: 108% !important; letter-spacing: -0.02em !important; }
html body #booking-main-area #bk-guestx .bgx-step__sub { margin: -8px 0 0 !important; font-size: 14.5px !important; line-height: 1.5 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-seg { display: grid !important; grid-template-columns: 1fr 1fr !important; padding: 3px !important; border-radius: 12px !important; border: 1px solid var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-seg button { height: 36px !important; border-radius: 9px !important; border: 0 !important; background: transparent !important; font-size: 13px !important; font-weight: 700 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-seg button[aria-pressed="true"] { background: var(--bgx-hl-soft) !important; color: var(--bgx-ink) !important; -webkit-text-fill-color: var(--bgx-ink) !important; }
html body #booking-main-area #bk-guestx .bgx-field { display: flex !important; flex-direction: column !important; gap: 7px !important; margin-bottom: 14px !important; }
/* Signed in: the guest/app switch and the login fields step aside. */
html body #booking-main-area #bk-guestx .bgx-seg[hidden],
html body #booking-main-area #bk-guestx .bgx-field[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-field > span { font-size: 14px !important; font-weight: 700 !important; }
html body #booking-main-area #bk-guestx .bgx-field input { height: 52px !important; width: 100% !important; padding: 0 16px !important; border-radius: 12px !important; border: 1.5px solid var(--bgx-field) !important; background: var(--bgx-paper) !important; color: var(--bgx-ink) !important; -webkit-text-fill-color: var(--bgx-ink) !important; font-family: var(--bgx-wide) !important; font-size: 16px !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; }
html body #booking-main-area #bk-guestx .bgx-field input::placeholder { color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; }
html body #booking-main-area #bk-guestx .bgx-field input:focus { border-color: var(--bgx-hl) !important; box-shadow: 0 0 0 3px var(--bgx-hl-soft) !important; }
html body #booking-main-area #bk-guestx .bgx-field.is-good input { border-color: var(--bgx-good) !important; }
html body #booking-main-area #bk-guestx .bgx-field.is-good input:focus { border-color: var(--bgx-hl) !important; }
html body #booking-main-area #bk-guestx .bgx-field.is-bad input { border-color: var(--bgx-bad) !important; }
html body #booking-main-area #bk-guestx .bgx-field__msg { font-size: 13px !important; font-weight: 600 !important; color: var(--bgx-bad) !important; -webkit-text-fill-color: var(--bgx-bad) !important; }
html body #booking-main-area #bk-guestx .bgx-field__msg:empty { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-note { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; color: var(--bgx-good) !important; -webkit-text-fill-color: var(--bgx-good) !important; }
html body #booking-main-area #bk-guestx .bgx-note[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-err { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--bgx-bad) !important; -webkit-text-fill-color: var(--bgx-bad) !important; }
html body #booking-main-area #bk-guestx .bgx-err:empty { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-express[hidden], html body #booking-main-area #bk-guestx .bgx-or[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-or { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 12px !important; font-weight: 700 !important; }
html body #booking-main-area #bk-guestx .bgx-or span { color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; }
html body #booking-main-area #bk-guestx .bgx-or::before, html body #booking-main-area #bk-guestx .bgx-or::after { content: "" !important; flex: 1 !important; height: 1px !important; background: var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-payel { min-height: 120px !important; }
html body #booking-main-area #bk-guestx .bgx-alert { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--bgx-bad) 35%, transparent) !important; background: color-mix(in srgb, var(--bgx-bad) 8%, transparent) !important; }
html body #booking-main-area #bk-guestx .bgx-alert[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-alert svg { color: var(--bgx-bad) !important; margin-top: 1px !important; }
html body #booking-main-area #bk-guestx .bgx-alert span { font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--bgx-bad) !important; -webkit-text-fill-color: var(--bgx-bad) !important; }
html body #booking-main-area #bk-guestx .bgx-secure { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: var(--bgx-faint) !important; -webkit-text-fill-color: var(--bgx-faint) !important; }
html body #booking-main-area #bk-guestx .bgx-secure svg { width: 14px !important; height: 14px !important; color: var(--bgx-faint) !important; }
html body #booking-main-area #bk-guestx .bgx-cobar { position: sticky !important; z-index: 5 !important; bottom: var(--bgx-nav, 96px) !important; margin: 4px -6px 0 !important; padding: 8px !important; border-radius: 20px !important; background: var(--bgx-paper) !important; border: 1px solid var(--bgx-edge) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important; }
html body #booking-main-area #bk-guestx .bgx-cobar[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-cobar .bgx-btn { width: 100% !important; }

/* confirmed */
html body #booking-main-area #bk-guestx .bgx-done { align-items: flex-start !important; }
html body #booking-main-area #bk-guestx .bgx-done__mark { width: 62px !important; height: 62px !important; border-radius: 50% !important; background: var(--bgx-good) !important; display: grid !important; place-items: center !important; animation: bgx-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) !important; }
html body #booking-main-area #bk-guestx .bgx-done__mark svg { width: 32px !important; height: 32px !important; stroke-width: 3 !important; color: #ffffff !important; }
html body #booking-main-area #bk-guestx .bgx-done.is-cancelled .bgx-done__mark { background: transparent !important; border: 1.5px solid var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-done.is-cancelled .bgx-done__mark svg { color: var(--bgx-faint) !important; }
@keyframes bgx-pop { from { transform: scale(0.4); opacity: 0; } }
html body #booking-main-area #bk-guestx .bgx-done__title { margin: 0 !important; font-size: 30px !important; font-weight: 900 !important; font-stretch: 108% !important; letter-spacing: -0.02em !important; }
html body #booking-main-area #bk-guestx .bgx-done__line { margin: -6px 0 0 !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; }
html body #booking-main-area #bk-guestx .bgx-done__cal { display: flex !important; flex-direction: column !important; width: 100% !important; }
html body #booking-main-area #bk-guestx .bgx-done__cal[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-done__calbtns { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
html body #booking-main-area #bk-guestx .bgx-done__calbtns .bgx-btn { padding: 0 8px !important; }
html body #booking-main-area #bk-guestx .bgx-done__join { display: block !important; width: 100% !important; padding: 12px 14px !important; border-radius: 12px !important; background: var(--bgx-hl-soft) !important; color: var(--bgx-hl) !important; -webkit-text-fill-color: var(--bgx-hl) !important; font-size: 14px !important; font-weight: 800 !important; text-decoration: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body #booking-main-area #bk-guestx .bgx-done__join[hidden] { display: none !important; }
html body #booking-main-area #bk-guestx .bgx-done__rows { width: 100% !important; border-top: 1px solid var(--bgx-edge) !important; }
html body #booking-main-area #bk-guestx .bgx-done__row { display: flex !important; justify-content: space-between !important; gap: 16px !important; padding: 12px 0 !important; border-bottom: 1px solid var(--bgx-edge) !important; font-size: 14px !important; }
html body #booking-main-area #bk-guestx .bgx-done__row span { color: var(--bgx-dim) !important; -webkit-text-fill-color: var(--bgx-dim) !important; flex: 0 0 auto !important; }
html body #booking-main-area #bk-guestx .bgx-done__row b, html body #booking-main-area #bk-guestx .bgx-done__row a { font-weight: 700 !important; text-align: right !important; overflow-wrap: anywhere !important; min-width: 0 !important; }
html body #booking-main-area #bk-guestx .bgx-done__row a { text-decoration: underline !important; text-underline-offset: 3px !important; }
html body #booking-main-area #bk-guestx .bgx-done .bgx-danger { align-self: center !important; }
html body #booking-main-area #bk-guestx .bgx-again { width: 100% !important; }


/* ================================================================ owner
 * The booking owner's Home and Dashboard (#bk-odx, booking-v2/owner-feed.js)
 * in the desktop dashboard's type: Inter, tabular figures. The shared card
 * system lives in mobile-owner-dash.css; these are the booking-only pieces.
 */
html body #bk-odx#bk-odx.odx { --odx-font: "Inter", -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums !important; }
html body #bk-odx#bk-odx.odx .odx-num { font-variant-numeric: tabular-nums !important; }
html body #bk-odx#bk-odx.odx .odx-head .odx-btn { flex: 0 0 auto !important; }
html body #bk-odx#bk-odx.odx .odx-tabs { gap: 18px !important; }
html body #bk-odx#bk-odx.odx .odx-tab { flex: 0 0 auto !important; }
html body #bk-odx#bk-odx.odx .odx-card__acts { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 12px !important; }
html body #bk-odx#bk-odx.odx .odx-card.is-flush .odx-card__acts { padding: 0 14px 14px !important; }
html body #bk-odx#bk-odx.odx .odx-svc { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 52px !important; padding: 10px 0 !important; border: 0 !important; border-top: 1px solid var(--odx-line) !important; border-radius: 0 !important; text-align: left !important; }
html body #bk-odx#bk-odx.odx .odx-card__head + .odx-svc { border-top: 0 !important; padding-top: 2px !important; }
html body #bk-odx#bk-odx.odx .odx-card.is-flush > .odx-svc { padding: 11px 14px !important; }
html body #bk-odx#bk-odx.odx .odx-card.is-flush > .odx-svc:first-child { border-top: 0 !important; }
html body #bk-odx#bk-odx.odx .odx-svc__copy { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
html body #bk-odx#bk-odx.odx .odx-svc__copy b { font-size: 14px !important; font-weight: 600 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body #bk-odx#bk-odx.odx .odx-svc__copy span { font-size: 12.5px !important; color: var(--odx-mute) !important; -webkit-text-fill-color: var(--odx-mute) !important; }
html body #bk-odx#bk-odx.odx .odx-svc__copy em.is-warn, html body #bk-odx#bk-odx.odx .odx-num.is-warn { font-style: normal !important; color: var(--odx-warn) !important; -webkit-text-fill-color: var(--odx-warn) !important; }
html body #bk-odx#bk-odx.odx .odx-svc__end { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 1px !important; }
html body #bk-odx#bk-odx.odx .odx-svc__end b { font-size: 14px !important; font-weight: 600 !important; }
html body #bk-odx#bk-odx.odx .odx-svc__end small { font-size: 11.5px !important; color: var(--odx-mute) !important; -webkit-text-fill-color: var(--odx-mute) !important; }
html body #bk-odx#bk-odx.odx .odx-earn { display: flex !important; flex-direction: column !important; gap: 3px !important; padding: 9px 0 !important; border-top: 1px solid var(--odx-line) !important; }
html body #bk-odx#bk-odx.odx .odx-card__head + .odx-earn { border-top: 0 !important; padding-top: 2px !important; }
html body #bk-odx#bk-odx.odx .odx-earn__top { display: flex !important; justify-content: space-between !important; gap: 10px !important; }
html body #bk-odx#bk-odx.odx .odx-earn__top b { font-size: 14px !important; font-weight: 600 !important; }
html body #bk-odx#bk-odx.odx .odx-earn > span { font-size: 12px !important; color: var(--odx-mute) !important; -webkit-text-fill-color: var(--odx-mute) !important; }

/* ------------------------------------------------ the booking drawer (sheet) */
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx {
  --bdx-paper: #ffffff; --bdx-ink: #0a0a0a; --bdx-mute: #5f6068; --bdx-faint: #8b8c93; --bdx-line: #efefef; --bdx-edge: #e6e6e6;
  --bdx-hl: var(--primary-color, #111111); --bdx-good: #16a34a; --bdx-warn: #b45309; --bdx-warn-bg: #fef3c7; --bdx-bad: #dc2626;
  position: fixed !important; inset: 0 !important; z-index: 250000 !important; display: flex !important; align-items: flex-end !important;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important; font-variant-numeric: tabular-nums !important;
  color: var(--bdx-ink) !important; -webkit-text-fill-color: var(--bdx-ink) !important;
}
:is(html[data-theme="dark"], html[data-theme="dark-accent"]) body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx {
  --bdx-paper: #000000; --bdx-ink: #f4f4f5; --bdx-mute: #a9a9b1; --bdx-faint: #7c7c85; --bdx-line: #1f1f24; --bdx-edge: #26262b;
  --bdx-good: #4ade80; --bdx-warn: #fbbf24; --bdx-warn-bg: rgba(245, 158, 11, 0.14); --bdx-bad: #f87171;
}
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx :where(*) { box-sizing: border-box !important; font-family: inherit !important; letter-spacing: normal !important; text-transform: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx :is(div, span, b, strong, small, em, p, h3, h4, a, button, li, section, header) { color: var(--bdx-ink) !important; -webkit-text-fill-color: var(--bdx-ink) !important; font-weight: 400 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx :is(b, strong) { font-weight: 600 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx button { -webkit-tap-highlight-color: transparent; cursor: pointer; font: inherit; margin: 0; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-backdrop { position: absolute !important; inset: 0 !important; background: rgba(10, 10, 12, 0.36) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-sheet { position: relative !important; z-index: 1 !important; width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; background: var(--bdx-paper) !important; border-radius: 20px 20px 0 0 !important; border-top: 1px solid var(--bdx-edge) !important; padding: 10px 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important; display: flex !important; flex-direction: column !important; gap: 16px !important; box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.18) !important; animation: bdx-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
@keyframes bdx-up { from { transform: translateY(24px); opacity: 0; } }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-grab { align-self: center !important; width: 36px !important; height: 4px !important; border-radius: 2px !important; background: var(--bdx-edge) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-x { position: absolute !important; top: 14px !important; right: 14px !important; width: 32px !important; height: 32px !important; border-radius: 9px !important; border: 1px solid var(--bdx-edge) !important; background: var(--bdx-paper) !important; font-size: 13px !important; padding: 0 !important; min-height: 0 !important; box-shadow: none !important; color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-head { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding-right: 40px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-head h3 { margin: 0 !important; font-size: 20px !important; font-weight: 650 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; overflow-wrap: anywhere !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-head p { margin: 0 !important; font-size: 13.5px !important; color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-pill { display: inline-flex !important; align-items: center !important; gap: 5px !important; height: 22px !important; padding: 0 9px !important; border-radius: 11px !important; font-size: 12px !important; font-weight: 600 !important; border: 1px solid var(--bdx-edge) !important; color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-pill::before { content: "" !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: currentColor !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-pill.is-pending { background: var(--bdx-warn-bg) !important; border-color: transparent !important; color: var(--bdx-warn) !important; -webkit-text-fill-color: var(--bdx-warn) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-pill.is-confirmed { border-color: color-mix(in srgb, var(--bdx-good) 40%, transparent) !important; color: var(--bdx-good) !important; -webkit-text-fill-color: var(--bdx-good) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-pill.is-refunded { border-color: color-mix(in srgb, var(--bdx-bad) 40%, transparent) !important; color: var(--bdx-bad) !important; -webkit-text-fill-color: var(--bdx-bad) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-acts { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; padding: 0 14px !important; border-radius: 9px !important; border: 1px solid var(--bdx-edge) !important; background: var(--bdx-paper) !important; font-size: 13.5px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; min-height: 0 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-btn.is-solid { background: var(--bdx-hl) !important; border-color: var(--bdx-hl) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-btn.is-danger { color: var(--bdx-bad) !important; -webkit-text-fill-color: var(--bdx-bad) !important; border-color: color-mix(in srgb, var(--bdx-bad) 40%, transparent) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-btn:disabled { opacity: 0.5 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-sec { display: flex !important; flex-direction: column !important; padding-top: 12px !important; border-top: 1px solid var(--bdx-edge) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-sec h4 { margin: 0 0 8px !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--bdx-faint) !important; -webkit-text-fill-color: var(--bdx-faint) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-sec .bdx-acts { margin-top: 10px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-cust { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 6px 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; box-shadow: none !important; min-height: 0 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-av { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 1px solid var(--bdx-edge) !important; display: grid !important; place-items: center !important; font-size: 12px !important; font-weight: 700 !important; color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-cust__copy { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-cust__copy b { font-size: 14px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-cust__copy small { font-size: 12.5px !important; color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; overflow-wrap: anywhere !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-cust em { font-style: normal !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--bdx-hl) !important; -webkit-text-fill-color: var(--bdx-hl) !important; white-space: nowrap !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl { list-style: none !important; margin: 0 !important; padding: 0 0 0 4px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li { position: relative !important; display: flex !important; flex-direction: column !important; padding: 0 0 12px 20px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 5px !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: var(--bdx-edge) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li::after { content: "" !important; position: absolute !important; left: 4px !important; top: 16px !important; bottom: 0 !important; width: 1px !important; background: var(--bdx-edge) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li:last-child { padding-bottom: 0 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li:last-child::after { display: none !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li.is-done::before { background: var(--bdx-good) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li.is-now::before { background: var(--bdx-warn) !important; box-shadow: 0 0 0 3px var(--bdx-warn-bg) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li.is-bad::before { background: var(--bdx-bad) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl b { font-size: 13.5px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl li.is-todo b { color: var(--bdx-faint) !important; -webkit-text-fill-color: var(--bdx-faint) !important; font-weight: 400 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-tl span { font-size: 12.5px !important; color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-kv { display: flex !important; justify-content: space-between !important; gap: 12px !important; padding: 8px 0 !important; border-top: 1px solid var(--bdx-line) !important; font-size: 13.5px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx h4 + .bdx-kv { border-top: 0 !important; padding-top: 0 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-kv span { color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; flex: 0 0 auto !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-kv b { text-align: right !important; overflow-wrap: anywhere !important; min-width: 0 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-kv b.is-ok { color: var(--bdx-good) !important; -webkit-text-fill-color: var(--bdx-good) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-kv b.is-warn { color: var(--bdx-warn) !important; -webkit-text-fill-color: var(--bdx-warn) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-kv b.is-off { color: var(--bdx-faint) !important; -webkit-text-fill-color: var(--bdx-faint) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-kv b.is-code { font-family: ui-monospace, "SF Mono", monospace !important; font-size: 11.5px !important; font-weight: 400 !important; color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-days { display: flex !important; flex-direction: column !important; gap: 12px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-slots { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-slot { height: 40px !important; border-radius: 10px !important; border: 1px solid var(--bdx-edge) !important; background: var(--bdx-paper) !important; font-size: 13.5px !important; font-weight: 600 !important; padding: 0 !important; min-height: 0 !important; box-shadow: none !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-slot.is-taken { text-decoration: line-through !important; opacity: 0.45 !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-slot.is-current { border-color: var(--bdx-hl) !important; color: var(--bdx-hl) !important; -webkit-text-fill-color: var(--bdx-hl) !important; }
html body :is(#mobile-booking-owner-detail, #mobile-booking-reschedule).bdx .bdx-note { margin: 0 !important; font-size: 12.5px !important; color: var(--bdx-mute) !important; -webkit-text-fill-color: var(--bdx-mute) !important; }

/* The shared empty guide (empty-state.js) inside #bk-guestx: the sweeps above
   reach it at id strength (17px svgs, weight 400, ink on every button), so
   hand it back its own sizes and token colours from the same height. */
html body #booking-main-area #bk-guestx .nst-es.nst-es { --es-ink: var(--bgx-ink); --es-dim: var(--bgx-dim); }
html body #booking-main-area #bk-guestx .nst-es .nst-es__icon { width: 44px !important; height: 44px !important; color: var(--es-ink) !important; stroke: currentColor !important; }
html body #booking-main-area #bk-guestx .nst-es .nst-es__btn svg { width: 16px !important; height: 16px !important; }
html body #booking-main-area #bk-guestx .nst-es .nst-es__title { font-weight: 700 !important; color: var(--es-ink) !important; -webkit-text-fill-color: var(--es-ink) !important; }
html body #booking-main-area #bk-guestx .nst-es .nst-es__body { color: var(--es-dim) !important; -webkit-text-fill-color: var(--es-dim) !important; }
html body #booking-main-area #bk-guestx .nst-es .nst-es__btn,
html body #booking-main-area #bk-guestx .nst-es .nst-es__btn * { font-weight: 600 !important; }
html body #booking-main-area #bk-guestx .nst-es .nst-es__btn--primary,
html body #booking-main-area #bk-guestx .nst-es .nst-es__btn--primary * { color: var(--es-on-btn) !important; -webkit-text-fill-color: var(--es-on-btn) !important; }
html body #booking-main-area #bk-guestx .nst-es .nst-es__btn--notify,
html body #booking-main-area #bk-guestx .nst-es .nst-es__btn--notify * { color: var(--es-ink) !important; -webkit-text-fill-color: var(--es-ink) !important; }

/* Booking imagery: card thumbnails, hero carousel, photo grid, fullscreen viewer.
   Every surface here is absent unless a service actually has images — the
   typographic layout is the default, not the fallback. */

/* Slot 02 — service card thumbnail. Fixed footprint so cards never reflow. */
html body #booking-main-area .booking-image-thumb {
    width: 88px !important;
    height: 88px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #f7f7f8 !important;
    box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.09) !important;
}

html body #booking-main-area .booking-image-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

html body #booking-main-area .booking-image-thumb.is-initials {
    color: rgba(5, 5, 5, 0.42) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.42) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

/* Slot 03 — hero, 16:9, full-bleed above a title. */
html body .booking-image-hero {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #f2f2f4 !important;
}

html body .booking-image-hero-track {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
}

html body .booking-image-hero-track::-webkit-scrollbar {
    display: none !important;
}

html body .booking-image-hero-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    scroll-snap-align: start !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-image-hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

html body .booking-image-hero-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(5, 5, 5, 0.72) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-image-hero-badge-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
}

html body .booking-image-hero-badge-grid i {
    width: 4px !important;
    height: 4px !important;
    border-radius: 1px !important;
    background: #ffffff !important;
    display: block !important;
}

html body .booking-image-hero-dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 12px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    pointer-events: none !important;
}

html body .booking-image-hero-dots span {
    width: 5px !important;
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    transition: width 140ms ease !important;
}

html body .booking-image-hero-dots span.is-active {
    width: 18px !important;
    background: #ffffff !important;
}

/* Photo grid sheet. */
html body .booking-image-grid-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100010 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

html body .booking-image-grid-scrim {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(5, 5, 5, 0.55) !important;
}

html body .booking-image-grid-panel {
    position: relative !important;
    max-height: 88dvh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 28px 28px 0 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

html body .booking-image-grid-grabber {
    width: 44px !important;
    height: 5px !important;
    margin: 10px auto 0 !important;
    border-radius: 3px !important;
    background: rgba(5, 5, 5, 0.14) !important;
    flex: 0 0 auto !important;
}

html body .booking-image-grid-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 20px 12px !important;
    flex: 0 0 auto !important;
}

html body .booking-image-grid-head strong {
    display: block !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

html body .booking-image-grid-head span {
    display: block !important;
    margin-top: 2px !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

html body .booking-image-grid-head button {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #f7f7f8 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-image-grid-head button::before {
    content: "" !important;
    width: 12px !important;
    height: 12px !important;
    background:
        linear-gradient(#050505, #050505) center/12px 2px no-repeat,
        linear-gradient(#050505, #050505) center/2px 12px no-repeat !important;
    rotate: 45deg !important;
}

html body .booking-image-grid-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding: 4px 20px calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: min-content !important;
    align-items: start !important;
    gap: 10px !important;
}

html body .booking-image-grid-tile {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #f2f2f4 !important;
    aspect-ratio: 1 / 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* The first image reads as the cover, so it spans the row. */
html body .booking-image-grid-tile.is-cover {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 20px !important;
}

html body .booking-image-grid-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Fullscreen viewer. */
html body .booking-image-viewer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100020 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0c0b09 !important;
}

html body .booking-image-viewer-top {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 14px !important;
}

html body .booking-image-viewer-close,
html body .booking-image-viewer-spacer {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
}

html body .booking-image-viewer-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-image-viewer-close::before {
    content: "" !important;
    width: 12px !important;
    height: 12px !important;
    background:
        linear-gradient(#ffffff, #ffffff) center/12px 2px no-repeat,
        linear-gradient(#ffffff, #ffffff) center/2px 12px no-repeat !important;
    rotate: 45deg !important;
}

html body .booking-image-viewer-count {
    color: rgba(255, 255, 255, 0.66) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.66) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
}

html body .booking-image-viewer-stage {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    overscroll-behavior: contain !important;
}

html body .booking-image-viewer-stage::-webkit-scrollbar {
    display: none !important;
}

html body .booking-image-viewer-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    scroll-snap-align: center !important;
}

html body .booking-image-viewer-slide img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px !important;
}

html body .booking-image-viewer-strip {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 6px !important;
    padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

html body .booking-image-viewer-strip::-webkit-scrollbar {
    display: none !important;
}

html body .booking-image-viewer-thumb {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    opacity: 0.45 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-image-viewer-thumb.is-active {
    opacity: 1 !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}

html body .booking-image-viewer-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* An open image layer owns the screen. */
html body.booking-image-layer-open #bottom-nav,
html body.booking-image-layer-open #mobile-bottom-nav-underlay {
    display: none !important;
}

/* Card head becomes a three-column row when a thumbnail is present. */
html body #booking-main-area .booking-guest-session.has-image .booking-guest-session-head {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
}

/* A thumbnail eats horizontal room, so the title runs a size smaller here to
   keep it from stacking three lines deep. */
html body #booking-main-area .booking-guest-session.has-image .booking-guest-title {
    font-size: 21px !important;
    line-height: 1.12 !important;
}

html body #booking-main-area .booking-guest-session.has-image .booking-image-thumb {
    width: 72px !important;
    height: 72px !important;
    border-radius: 16px !important;
}

html body #booking-main-area .booking-guest-session-thumb {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 0 !important;
}

@media (max-width: 380px) {
    html body #booking-main-area .booking-guest-session.has-image .booking-guest-session-head {
        grid-template-columns: 72px minmax(0, 1fr) auto !important;
        gap: 12px !important;
    }

    html body #booking-main-area .booking-image-thumb {
        width: 72px !important;
        height: 72px !important;
    }
}

/* Slot 03 — hero at the top of the pick-a-time sheet, full-bleed. */
/* The sheet body is a flex column, so the hero must not be allowed to shrink
   below its aspect ratio — otherwise it collapses and the badge lands on the
   copy below it. */
html body #mobileBookingModal.is-time-sheet .booking-image-hero {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    margin: 0 0 4px !important;
    border-radius: 0 !important;
}

html body #mobileBookingModal.is-time-sheet .mobile-booking-sheet:has(.booking-image-hero) .mobile-booking-sheet-grabber {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

/* With a hero present the "ALL N" badge owns the top-right corner, so the
   sheet's close button moves left rather than sitting on top of it. */
html body #mobileBookingModal.is-time-sheet .mobile-booking-sheet:has(.booking-image-hero) .mobile-booking-checkout-close {
    left: 18px !important;
    right: auto !important;
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

/* The badge and dots must sit above the hero's scroll track. */
html body .booking-image-hero-badge,
html body .booking-image-hero-dots {
    z-index: 2 !important;
}

/* Full-day booking list (3A screen 02). A layer over the calendar: every
   opening for one day, grouped by morning/afternoon. */
html body .booking-day-view {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

html body.booking-day-view-open #bottom-nav {
    z-index: 99995 !important;
}

/* Header: day stepper with the month above the weekday. */
html body .booking-day-view-head {
    flex: 0 0 auto !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 58px) 20px 12px !important;
}

html body .booking-day-view-nav {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(5, 5, 5, 0.1) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-day-view-title {
    text-align: center !important;
    min-width: 0 !important;
}

html body .booking-day-view-title span {
    display: block !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}

html body .booking-day-view-title strong {
    display: block !important;
    margin-top: 3px !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
}

html body .booking-day-view-close {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    right: 20px !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #f7f7f8 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-day-view-close::before {
    content: "" !important;
    width: 12px !important;
    height: 12px !important;
    background:
        linear-gradient(#050505, #050505) center/12px 2px no-repeat,
        linear-gradient(#050505, #050505) center/2px 12px no-repeat !important;
    rotate: 45deg !important;
}

/* Five-day rail. */
html body .booking-day-view-week {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 20px 4px !important;
}

html body .booking-day-view-week-day {
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.1) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-day-view-week-day span {
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

html body .booking-day-view-week-day strong {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

html body .booking-day-view-week-day.is-selected {
    background: #050505 !important;
    box-shadow: none !important;
}

html body .booking-day-view-week-day.is-selected span {
    color: rgba(255, 255, 255, 0.62) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
}

html body .booking-day-view-week-day.is-selected strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Filters. */
html body .booking-day-view-filters {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 8px !important;
    padding: 16px 20px 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

html body .booking-day-view-filters::-webkit-scrollbar {
    display: none !important;
}

html body .booking-day-view-pill {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.12) !important;
    color: rgba(5, 5, 5, 0.66) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.66) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-day-view-pill.is-selected {
    background: #050505 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* The list. */
html body .booking-day-view-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding: 8px 20px calc(env(safe-area-inset-bottom, 0px) + 190px) !important;
}

html body .booking-day-view-group-label {
    margin: 14px 2px 10px !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}

html body .booking-day-view-group {
    display: grid !important;
    gap: 8px !important;
}

html body .booking-day-view-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 62px 3px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 15px 16px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(5, 5, 5, 0.07) !important;
    text-align: left !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body .booking-day-view-time {
    min-width: 0 !important;
}

html body .booking-day-view-time strong {
    display: block !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

html body .booking-day-view-time small {
    display: block !important;
    margin-top: 2px !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* Green rail marks an open slot; grey marks a taken one. */
html body .booking-day-view-rail {
    align-self: stretch !important;
    border-radius: 2px !important;
    background: #16a34a !important;
}

html body .booking-day-view-copy {
    min-width: 0 !important;
}

html body .booking-day-view-copy strong {
    display: block !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .booking-day-view-copy small {
    display: block !important;
    margin-top: 2px !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

html body .booking-day-view-go {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Booked rows read as unavailable: outlined, dimmed, no arrow. */
html body .booking-day-view-row.is-booked {
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px rgba(5, 5, 5, 0.1) !important;
    grid-template-columns: 62px 3px minmax(0, 1fr) !important;
}

html body .booking-day-view-row.is-booked .booking-day-view-rail {
    background: rgba(5, 5, 5, 0.12) !important;
}

html body .booking-day-view-row.is-booked .booking-day-view-time strong,
html body .booking-day-view-row.is-booked .booking-day-view-time small,
html body .booking-day-view-row.is-booked .booking-day-view-copy strong {
    color: rgba(5, 5, 5, 0.38) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.38) !important;
}

html body .booking-day-view-row.is-booked .booking-day-view-copy small {
    color: rgba(5, 5, 5, 0.32) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.32) !important;
}

html body .booking-day-view-empty {
    padding: 34px 4px !important;
    color: rgba(5, 5, 5, 0.45) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.45) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Footer nudge toward the next open day. */
html body .booking-day-view-nudge {
    margin-top: 18px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    box-shadow: inset 0 0 0 1.5px rgba(5, 5, 5, 0.1) !important;
    text-align: center !important;
}

html body .booking-day-view-nudge strong {
    display: block !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body .booking-day-view-nudge span {
    display: block !important;
    margin-top: 4px !important;
    color: rgba(5, 5, 5, 0.5) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.5) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* "See all" replaces the count in the day panel head — it's the way into the
   full-day list. */
#mobile-builtin-calendar .mobile-calendar-day-all {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--primary-color, #ef4e2f) !important;
    -webkit-text-fill-color: var(--primary-color, #ef4e2f) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* The add/edit service form is a full-screen surface. The floating nav is
   translucent and sits above it, so the form's own fields showed through the
   bar — hide the nav, and take the booking page underneath out of the paint. */
html body.booking-v2-service-form-open #bottom-nav,
html body.booking-v2-service-form-open #mobile-bottom-nav-underlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body.booking-v2-service-form-open #booking-main-area,
html body.booking-v2-service-form-open #mobile-builtin-calendar {
    visibility: hidden !important;
}

html body.booking-v2-service-form-open #mobileAddBookingModal {
    visibility: visible !important;
    background: #ffffff !important;
}

/* Same for the owner dashboard drawer — it opens over the booking page. */
html body.booking-drawer-open #bottom-nav,
html body.booking-drawer-open #mobile-bottom-nav-underlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The dashboard drawer has no body class, so key off its own open state:
   when it's showing, the translucent nav must not float over it. */
html body:has(#booking-drawer:not(.booking-drawer-hidden)) #bottom-nav,
html body:has(#booking-drawer:not(.booking-drawer-hidden)) #mobile-bottom-nav-underlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body #booking-drawer:not(.booking-drawer-hidden) {
    z-index: 100010 !important;
    background: #ffffff !important;
}

/* The receipt and manage-service sheets are bottom-anchored, and the floating
   nav sits over their last rows — the action buttons were unreachable. Hide the
   nav while either is open, and pad the sheets past the home indicator. */
html body:has(#mobile-booking-owner-detail) #bottom-nav,
html body:has(#mobile-booking-owner-detail) #mobile-bottom-nav-underlay,
html body:has(#mobile-booking-service-manager) #bottom-nav,
html body:has(#mobile-booking-service-manager) #mobile-bottom-nav-underlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body .mobile-booking-owner-detail-sheet,
html body .mobile-booking-service-manager-sheet {
    max-height: 90dvh !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px) !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* The customer profile sheet has its own id, so it was missing from the
   nav-hide rule and the bar sat over its history rows. */
html body:has(#mobile-booking-customer-profile) #bottom-nav,
html body:has(#mobile-booking-customer-profile) #mobile-bottom-nav-underlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body #mobile-booking-customer-profile .mobile-booking-owner-detail-sheet {
    max-height: 88dvh !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
}

html body #booking-drawer {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

html body.booking-active #bottom-nav > #bytes-builder-btn.booking-owner-nav-hidden {
  display: none !important;
  pointer-events: none !important;
}

html body #booking-drawer .booking-dashboard-header {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  grid-template-rows: 40px !important;
  align-items: center !important;
  gap: 10px !important;
}

html body #booking-drawer .booking-dashboard-header-title {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: stretch !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  line-height: 40px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body #booking-drawer .booking-dashboard-header-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.07) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body #booking-drawer .booking-dashboard-back-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html body #booking-drawer .booking-dashboard-controls-button {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

html body #booking-drawer .booking-dashboard-header-button[hidden] {
  visibility: hidden !important;
}

html body #booking-drawer .booking-dashboard-header-button i {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 15px !important;
}

html body #booking-drawer .booking-dashboard-controls-button.is-active {
  border-color: #050505 !important;
  background: #050505 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #booking-drawer .booking-dashboard-controls-button.is-active i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #booking-drawer > div:nth-child(2),
html body #mobile-booking-owner-panel,
html body #mobile-booking-owner-panel > div {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

html body #mobile-booking-owner-panel {
  color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body #mobile-booking-owner-panel > div:first-child {
  padding: 18px 18px 10px !important;
  border-bottom: 0 !important;
}

html body #mobile-booking-owner-panel > div:first-child > div:first-child {
  margin-bottom: 7px !important;
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 9px !important;
  font-weight: 780 !important;
  letter-spacing: 0.18em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body #mobile-booking-owner-panel > div:first-child > div:nth-child(2) {
  max-width: 320px !important;
  margin: 0 !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body #mobile-booking-owner-panel > div:first-child > div:nth-child(3) {
  display: none !important;
}

html body #mobile-booking-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body #mobile-booking-stats-grid > div {
  min-width: 0 !important;
  padding: 12px 12px 11px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  background: #fbfbfb !important;
  box-shadow: none !important;
}

html body #mobile-booking-stats-grid > div:nth-child(2),
html body #mobile-booking-stats-grid > div:last-child {
  border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html body #mobile-booking-stats-grid > div:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html body #mobile-booking-stats-grid > div > div:first-child {
  margin-bottom: 6px !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  font-weight: 780 !important;
  letter-spacing: 0.12em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body #mobile-booking-stat-revenue,
html body #mobile-booking-stat-average,
html body #mobile-booking-stat-confirmed,
html body #mobile-booking-stat-customers {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body #mobile-booking-stat-revenue-sub,
html body #mobile-booking-stat-average-sub,
html body #mobile-booking-stat-confirmed-sub,
html body #mobile-booking-stat-customers-sub {
  margin-top: 4px !important;
  color: rgba(5, 5, 5, 0.7) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.7) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body #mobile-booking-owner-panel > div:nth-child(2) {
  padding: 8px 18px 0 !important;
}

html body #mobile-booking-owner-panel > div:nth-child(3) {
  top: 0 !important;
  z-index: 6 !important;
  padding: 10px 18px 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03) !important;
}

html body #mobile-booking-owner-panel > div:nth-child(3) > div:first-child {
  display: none !important;
}

html body #mobile-booking-owner-panel > div:nth-child(3) > div:first-child > div:first-child {
  display: none !important;
}

html body #mobile-booking-owner-panel [id^="booking-tab-"] {
  min-height: 32px !important;
  padding: 0 8px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: rgba(5, 5, 5, 0.62) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.62) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 9px !important;
  font-weight: 740 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body #mobile-booking-owner-panel [id^="booking-tab-"].is-active {
  border-color: #050505 !important;
  background: #050505 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 820 !important;
}

html body #mobile-all-bookings-list,
html body #mobile-pending-list,
html body #mobile-today-list,
html body #mobile-services-list,
html body #mobile-images-gallery {
  gap: 0 !important;
  padding: 0 18px 96px !important;
}

html body .mobile-owner-booking-row {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: transparent !important;
  cursor: pointer !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-booking-time {
  min-width: 0 !important;
  padding-top: 2px !important;
}

html body .mobile-owner-booking-time strong {
  display: block !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif !important;
  font-size: 22px !important;
  line-height: 0.95 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-booking-time span {
  display: block !important;
  margin-top: 6px !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-booking-main {
  min-width: 0 !important;
}

html body .mobile-owner-booking-titleline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
}

html body .mobile-owner-booking-titleline h3 {
  min-width: 0 !important;
  margin: 0 !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-booking-status {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(34, 197, 94, 0.26) !important;
  background: rgba(34, 197, 94, 0.08) !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-booking-row.is-pending .mobile-owner-booking-status {
  border-color: rgba(249, 115, 22, 0.28) !important;
  background: rgba(249, 115, 22, 0.09) !important;
}

html body .mobile-owner-booking-row.is-rejected .mobile-owner-booking-status,
html body .mobile-owner-booking-row.is-cancelled .mobile-owner-booking-status,
html body .mobile-owner-booking-row.is-canceled .mobile-owner-booking-status {
  border-color: rgba(148, 163, 184, 0.3) !important;
  background: rgba(148, 163, 184, 0.1) !important;
}

html body .mobile-owner-booking-customer {
  margin-bottom: 10px !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 760 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-booking-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

html body .mobile-owner-booking-meta span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 31px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 999px !important;
  background: #fafafa !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 720 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-booking-meta i {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 11px !important;
}

html body .mobile-owner-booking-actions {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 11px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

html body .mobile-owner-booking-actions button {
  width: auto !important;
  min-width: 118px !important;
  min-height: 36px !important;
  margin-left: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #111 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-weight: 780 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-booking-actions button *,
html body .mobile-owner-booking-actions button i,
html body .mobile-owner-booking-actions button span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-weight: 780 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body #booking-drawer #mobile-booking-owner-panel .mobile-owner-booking-actions button,
html body #booking-drawer #mobile-booking-owner-panel .mobile-owner-booking-actions button *,
html body #booking-drawer #mobile-booking-owner-panel .mobile-owner-booking-actions button i,
html body #booking-drawer #mobile-booking-owner-panel .mobile-owner-booking-actions button span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body .mobile-owner-booking-actions.is-split button {
  flex: 1 1 0 !important;
  margin-left: 0 !important;
}

html body .mobile-owner-booking-actions button.is-secondary {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: transparent !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
}

html body .mobile-owner-booking-actions button.is-secondary *,
html body .mobile-owner-booking-actions button.is-secondary i,
html body .mobile-owner-booking-actions button.is-secondary span {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-weight: 760 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body #booking-drawer #mobile-booking-owner-panel .mobile-owner-booking-actions button.is-secondary,
html body #booking-drawer #mobile-booking-owner-panel .mobile-owner-booking-actions button.is-secondary *,
html body #booking-drawer #mobile-booking-owner-panel .mobile-owner-booking-actions button.is-secondary i,
html body #booking-drawer #mobile-booking-owner-panel .mobile-owner-booking-actions button.is-secondary span {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
}

html body .mobile-owner-bookings-empty {
  min-height: 42vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 48px 20px 64px !important;
}

html body .mobile-owner-bookings-empty-icon {
  width: 58px !important;
  height: 58px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  background: rgba(15, 23, 42, 0.05) !important;
  color: rgba(5, 5, 5, 0.64) !important;
}

html body .mobile-owner-bookings-empty h3 {
  margin: 0 0 8px !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 21px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

html body .mobile-owner-bookings-empty p {
  max-width: 282px !important;
  margin: 0 !important;
  color: rgba(5, 5, 5, 0.62) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.62) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 760 !important;
}

html body #mobile-all-bookings-list > div[onclick^="showOwnerBookingDetailsModal"],
html body #mobile-pending-list > div[onclick^="showOwnerBookingDetailsModal"],
html body #mobile-today-list > div[onclick^="showOwnerBookingDetailsModal"] {
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body #mobile-all-bookings-list > div[onclick^="showOwnerBookingDetailsModal"] > div[style*="position:absolute"],
html body #mobile-pending-list > div[onclick^="showOwnerBookingDetailsModal"] > div[style*="position:absolute"],
html body #mobile-today-list > div[onclick^="showOwnerBookingDetailsModal"] > div[style*="position:absolute"] {
  display: none !important;
}

html body #mobile-all-bookings-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child,
html body #mobile-pending-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child,
html body #mobile-today-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child {
  gap: 11px !important;
}

html body #mobile-all-bookings-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child > div:first-child,
html body #mobile-pending-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child > div:first-child,
html body #mobile-today-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child > div:first-child {
  min-width: 54px !important;
}

html body #mobile-all-bookings-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child > div:first-child > div:first-child,
html body #mobile-pending-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child > div:first-child > div:first-child,
html body #mobile-today-list > div[onclick^="showOwnerBookingDetailsModal"] > div:first-of-type > div:first-child > div:first-child > div:first-child {
  font-size: 24px !important;
  font-weight: 900 !important;
}

html body #mobile-all-bookings-list > div[onclick^="showOwnerBookingDetailsModal"] button,
html body #mobile-pending-list > div[onclick^="showOwnerBookingDetailsModal"] button,
html body #mobile-today-list > div[onclick^="showOwnerBookingDetailsModal"] button {
  width: auto !important;
  min-width: 132px !important;
  min-height: 34px !important;
  margin-left: auto !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 10px !important;
}

html body #booking-drawer #mobile-booking-owner-panel #mobile-services-list {
  display: block !important;
  padding: 0 20px 18px !important;
}

html body .mobile-owner-service-row {
  display: block !important;
  padding: 16px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-service-main {
  min-width: 0 !important;
}

html body .mobile-owner-service-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body .mobile-owner-service-title-wrap {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body .mobile-owner-service-title {
  margin: 0 0 8px !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-service-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

html body .mobile-owner-service-meta span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 999px !important;
  background: #fafafa !important;
  color: rgba(5, 5, 5, 0.72) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.72) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-service-menu {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

html body .mobile-owner-service-description {
  margin: 10px 0 0 !important;
  color: rgba(5, 5, 5, 0.58) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-service-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

html body .mobile-owner-service-stats div {
  min-width: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  background: #fbfbfb !important;
}

html body .mobile-owner-service-stats strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-service-stats span {
  display: block !important;
  color: rgba(5, 5, 5, 0.55) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.55) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-service-latest {
  margin-top: 10px !important;
  color: rgba(5, 5, 5, 0.54) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.54) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html body .mobile-owner-services-empty {
  min-height: 34vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
  text-align: center !important;
}

html body .mobile-owner-services-empty-icon {
  width: 54px !important;
  height: 54px !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 17px !important;
  background: rgba(15, 23, 42, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .mobile-owner-services-empty h3 {
  margin: 0 0 7px !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 20px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
}

html body .mobile-owner-services-empty p {
  max-width: 260px !important;
  margin: 0 !important;
  color: rgba(5, 5, 5, 0.58) !important;
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
}

@media (max-width: 390px) {
  html body #mobile-booking-owner-panel > div:first-child > div:nth-child(2) {
    font-size: 20px !important;
  }
}

#mobile-booking-question-modal,
#mobile-booking-question-modal * {
  box-sizing: border-box;
  letter-spacing: 0;
}

#mobile-booking-question-modal {
  position: fixed;
  top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 112px));
  right: 0;
  bottom: var(--mobile-shop-bottom-nav-offset, calc(66px + env(safe-area-inset-bottom, 0px)));
  left: 0;
  z-index: 9000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 58%, #f6f6f6 100%) !important;
  color: #0b0b0b !important;
  -webkit-text-fill-color: #0b0b0b !important;
  color-scheme: light;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
}

#mobile-booking-question-modal .mobile-booking-guest-ask {
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(100%, 430px);
  min-height: 0;
  margin: 0 auto;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(5, 5, 5, 0.10);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 18px 44px rgba(5, 5, 5, 0.07);
}

#mobile-booking-question-modal .mobile-booking-guest-ask-field {
  display: grid;
  gap: 8px;
}

#mobile-booking-question-modal label {
  color: #737373 !important;
  -webkit-text-fill-color: #737373 !important;
  font-size: 10px;
  font-weight: 860;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-picker {
  position: relative;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-selected,
#mobile-booking-question-modal .mobile-booking-guest-ask-option {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(5, 5, 5, 0.10) !important;
  border-radius: 16px;
  background: #ffffff !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  text-align: left;
  box-shadow: none !important;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-option {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 54px;
  border: 0 !important;
  border-radius: 14px;
  padding: 7px;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-option.is-active {
  background: #f4f4f4 !important;
  box-shadow: inset 0 0 0 1px #111111 !important;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(5, 5, 5, 0.08);
  background: #f5f5f5;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  display: grid;
  place-items: center;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-option .mobile-booking-guest-ask-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-selected-copy,
#mobile-booking-question-modal .mobile-booking-guest-ask-option span:not(.mobile-booking-guest-ask-mark) {
  min-width: 0;
}

#mobile-booking-question-modal strong,
#mobile-booking-question-modal em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-style: normal;
}

#mobile-booking-question-modal strong {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 860;
}

#mobile-booking-question-modal em {
  margin-top: 5px;
  color: #777777 !important;
  -webkit-text-fill-color: #777777 !important;
  font-size: 11px;
  line-height: 1;
  font-weight: 720;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-selected > i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.05);
  color: rgba(5, 5, 5, 0.58);
  -webkit-text-fill-color: rgba(5, 5, 5, 0.58);
  display: grid;
  place-items: center;
  font-size: 11px;
  transition: transform 0.16s ease;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-picker.is-open .mobile-booking-guest-ask-selected > i {
  transform: rotate(180deg);
}

#mobile-booking-question-modal .mobile-booking-guest-ask-options {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 5;
  max-height: 252px;
  overflow-y: auto;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 20px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 20px 44px rgba(5, 5, 5, 0.14);
}

#mobile-booking-question-modal .mobile-booking-guest-ask-picker.is-open .mobile-booking-guest-ask-options {
  display: grid;
  gap: 4px;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-chips button {
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid rgba(5, 5, 5, 0.10) !important;
  border-radius: 999px;
  background: #f7f7f7 !important;
  color: #222222 !important;
  -webkit-text-fill-color: #222222 !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-input,
#mobile-booking-question-modal .mobile-booking-guest-ask-textbox {
  width: 100%;
  border: 1px solid rgba(5, 5, 5, 0.12) !important;
  border-radius: 16px;
  background: #ffffff !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  caret-color: #111111 !important;
  color-scheme: light !important;
  outline: none;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(5, 5, 5, 0.02) !important;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-input {
  min-height: 50px;
  padding: 0 14px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-input::placeholder,
#mobile-booking-question-modal .mobile-booking-guest-ask-textbox:empty::before {
  color: #a0a0a0 !important;
  -webkit-text-fill-color: #a0a0a0 !important;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-textbox {
  min-height: 150px;
  padding: 15px;
  font-size: 15px;
  line-height: 1.42;
  font-weight: 680;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-textbox:empty::before {
  content: attr(data-placeholder);
  pointer-events: none;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-submit {
  width: 100%;
  min-height: 54px;
  margin: 0;
  border: 1px solid #111111 !important;
  border-radius: 16px;
  background: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(5, 5, 5, 0.14) !important;
  font-size: 14px;
  font-weight: 920;
  text-transform: uppercase;
}

#mobile-booking-question-modal .mobile-booking-guest-ask-submit:disabled {
  opacity: 0.62;
}

/* Containerless guest ask, matching the shop ask. The form is short enough that
   cards and field boxes only add weight — space and type hierarchy carry the
   structure instead. Every fill, border, and shadow above is unset here; inputs
   keep a single bottom rule so the tap target still reads as a field. */
html body #mobile-booking-question-modal {
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  background: #ffffff !important;
}

html body #mobile-booking-question-modal .mobile-booking-guest-ask {
  gap: 30px !important;
}

html body #mobile-booking-question-modal .mobile-booking-guest-ask-card {
  gap: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #mobile-booking-question-modal .mobile-booking-guest-ask-field {
  gap: 10px !important;
}

html body #mobile-booking-question-modal label {
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !important;
}

/* Service picker: no box, just the mark, the copy, and the chevron. */
html body #mobile-booking-question-modal .mobile-booking-guest-ask-selected {
  min-height: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The open dropdown stays a real floating surface — it overlaps content and
   needs its own ground to be readable. */
html body #mobile-booking-question-modal .mobile-booking-guest-ask-options {
  border-radius: 18px !important;
}

/* Chips: outline only, no fill. */
html body #mobile-booking-question-modal .mobile-booking-guest-ask-chips {
  gap: 8px !important;
}

html body #mobile-booking-question-modal .mobile-booking-guest-ask-chips button {
  border: 1px solid rgba(5, 5, 5, 0.16) !important;
  background: transparent !important;
  color: #444444 !important;
  -webkit-text-fill-color: #444444 !important;
}

/* Fields: a bottom rule instead of a full border. */
html body #mobile-booking-question-modal input.mobile-booking-guest-ask-input,
html body #mobile-booking-question-modal .mobile-booking-guest-ask-textbox {
  border: 0 !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body #mobile-booking-question-modal .mobile-booking-guest-ask-input {
  padding-bottom: 2px !important;
}

html body #mobile-booking-question-modal .mobile-booking-guest-ask-textbox {
  min-height: 120px !important;
  padding-top: 2px !important;
  padding-bottom: 12px !important;
}

/* The message field is a contenteditable div, so it reports :focus as soon as
   the surface mounts — scope the darkened rule to real keyboard focus only,
   otherwise it renders near-black next to the email field's hairline. */
html body #mobile-booking-question-modal .mobile-booking-guest-ask-input:focus-visible,
html body #mobile-booking-question-modal .mobile-booking-guest-ask-textbox:focus-visible {
  border-bottom-color: #111111 !important;
}

/* The picker mark is a glyph, not a tile — drop its box too. */
html body #mobile-booking-question-modal .mobile-booking-guest-ask-mark {
  border: 0 !important;
  background: transparent !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

/* The submit button is the one thing that should stay solid. */
html body #mobile-booking-question-modal .mobile-booking-guest-ask-submit {
  margin-top: 4px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Specificity guards. The template carries broad light-mode rules — an
   `input[type="text"]` fill with a long :not() chain, a `.modal input` fill, and
   the modal-button whitening — that outrank the plain selectors above and put
   the boxes back. These restate the containerless intent at a weight that wins,
   scoped to this surface only. */
html body #mobile-booking-question-modal input#mobile-booking-question-email.mobile-booking-guest-ask-input {
  border: 0 !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #mobile-booking-question-modal button#mobile-booking-guest-ask-selected.mobile-booking-guest-ask-selected {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #mobile-booking-question-modal .mobile-booking-guest-ask-chips button {
  background: transparent !important;
  background-color: transparent !important;
}

/* The send button's label must follow its dark fill — the modal-button rule
   above forces descendant text to safe-text, which renders black on black. */
html body #mobile-booking-question-modal button#mobile-booking-question-submit.mobile-booking-guest-ask-submit:not(:disabled),
html body #mobile-booking-question-modal button#mobile-booking-question-submit.mobile-booking-guest-ask-submit:not(:disabled) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* The message box is contenteditable, so :focus is true the moment the surface
   mounts and autofocuses. Keep the resting hairline until real keyboard focus. */
html body #mobile-booking-question-modal .mobile-booking-guest-ask-textbox,
html body #mobile-booking-question-modal .mobile-booking-guest-ask-textbox:focus,
html body #mobile-booking-question-modal .mobile-booking-guest-ask-textbox:focus-visible {
  border-bottom-color: rgba(5, 5, 5, 0.16) !important;
}

/* The surface autofocuses the message box on open, and a focused contenteditable
   satisfies :focus-visible — so a darkened rule there would render the field
   near-black on arrival. Only the typed-in email field darkens on focus. */
html body #mobile-booking-question-modal input#mobile-booking-question-email.mobile-booking-guest-ask-input:focus-visible {
  border-bottom-color: #111111 !important;
}

/* Match the shop ask's lifted send button. */
html body #mobile-booking-question-modal button#mobile-booking-question-submit.mobile-booking-guest-ask-submit:not(:disabled) {
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.14) !important;
}

/* Last two values still inherited from the boxed version: match the shop ask's
   picker gap and input text colour exactly. */
html body #mobile-booking-question-modal .mobile-booking-guest-ask-selected {
  gap: 11px !important;
}

html body #mobile-booking-question-modal input#mobile-booking-question-email.mobile-booking-guest-ask-input {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
}