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;
}