body.bb-booking-page .wp-block-post-title {
  display: none;
}

body.bb-booking-page {
  overflow-x: hidden;
  overflow-x: clip;
}

body.bb-booking-page .bb-app {
  --bb-ink: #25211f;
  --bb-muted: #746d68;
  --bb-paper: #fffefa;
  --bb-surface: #f7f4f1;
  --bb-line: #e5dfda;
  --bb-accent: #8b4d3d;
  --bb-accent-dark: #6f3e31;
  --bb-accent-soft: #f4ece9;
  --bb-accent-contrast: #fff;
  --bb-green: #39735a;
  box-sizing: border-box;
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: clamp(18px, 4vw, 42px) 16px;
  transform: translateX(-50%);
  color: var(--bb-ink);
  background: linear-gradient(180deg, #fbfaf9 0%, #f5f2ef 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  line-height: 1.6;
}

.bb-app *,
.bb-app *::before,
.bb-app *::after {
  box-sizing: border-box;
}

.bb-app button,
.bb-app input,
.bb-app textarea {
  appearance: none;
  border-image: none;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.bb-app input,
.bb-app textarea {
  appearance: auto;
}

.bb-app button,
.bb-app a {
  text-decoration: none;
}

.bb-app button:focus-visible,
.bb-app a:focus-visible,
.bb-app input:focus-visible,
.bb-app textarea:focus-visible {
  outline: 3px solid var(--bb-accent-soft);
  outline-offset: 2px;
}

.bb-app [hidden] {
  display: none !important;
}

.bb-shell {
  width: min(960px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--bb-line);
  border-radius: 26px;
  background: var(--bb-paper);
  box-shadow: 0 24px 70px rgb(50 38 32 / 10%);
}

.bb-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 40px clamp(24px, 6vw, 62px) 32px;
  background: radial-gradient(circle at 92% 5%, var(--bb-accent-soft), transparent 45%), linear-gradient(135deg, #fffefa, var(--bb-surface));
}

.bb-hero-copy {
  max-width: 620px;
}

.bb-eyebrow {
  margin: 0 0 7px;
  color: var(--bb-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.bb-hero h2,
.bb-success h3 {
  margin: 0;
  color: var(--bb-ink);
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(29px, 5vw, 44px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.bb-hero-copy > p:last-child {
  margin: 11px 0 0;
  color: var(--bb-muted);
  font-size: 15px;
}

.bb-hero-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 230px;
}

.bb-hero-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  color: #625c57;
  background: rgb(255 255 255 / 72%);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.bb-hero-benefits span::before {
  content: "✓";
  color: var(--bb-accent);
  font-weight: 900;
}

.bb-progress {
  padding: 20px clamp(20px, 5vw, 54px);
  border-top: 1px solid rgb(229 223 218 / 70%);
  border-bottom: 1px solid var(--bb-line);
  background: #fff;
}

.bb-line-gate {
  margin: 30px clamp(20px, 6vw, 62px) 40px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid #b9dcc9;
  border-radius: 20px;
  background: linear-gradient(145deg, #f7fff9, #eefaf3);
  box-shadow: 0 15px 38px rgb(28 105 63 / 8%);
}

.bb-line-gate-heading {
  display: flex;
  align-items: flex-start;
  gap: 17px;
}

.bb-line-mark {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: #06c755;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.bb-line-gate h3 {
  margin: 0;
  color: #174d34;
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(23px, 4vw, 30px);
  line-height: 1.2;
}

.bb-line-gate-heading p:last-child {
  margin: 7px 0 0;
  color: #4f6f60;
  font-size: 13px;
}

.bb-line-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 24px 0 20px;
  padding: 0;
  list-style: none;
}

.bb-line-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: #315e49;
  background: rgb(255 255 255 / 72%);
  font-size: 12px;
}

.bb-line-steps span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #06c755;
  font-weight: 900;
}

.bb-line-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.bb-line-friend-button {
  border-color: #8dccaa;
  color: #17663e;
  background: #fff;
  text-decoration: none;
}

.bb-line-binding-note {
  margin: 9px 0 0;
  color: #668074;
  font-size: 11px;
}

.bb-progress ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-progress li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #a39b96;
  font-size: 12px;
  text-align: center;
}

.bb-progress li::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--bb-line);
}

.bb-progress li:last-child::after {
  display: none;
}

.bb-progress span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid var(--bb-line);
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.bb-progress em {
  font-style: normal;
  font-weight: 750;
}

.bb-progress .is-current,
.bb-progress .is-complete {
  color: var(--bb-ink);
}

.bb-progress .is-current span,
.bb-progress .is-complete span {
  border-color: var(--bb-accent);
  color: var(--bb-accent-contrast);
  background: var(--bb-accent);
}

.bb-progress .is-complete::after {
  background: var(--bb-accent);
}

.bb-progress .is-complete span {
  font-size: 0;
}

.bb-progress .is-complete span::after {
  content: "✓";
  font-size: 13px;
}

.bb-loading,
.bb-alert {
  margin: 26px clamp(20px, 6vw, 62px);
  padding: 14px 16px;
  border-radius: 12px;
}

.bb-loading {
  color: var(--bb-muted);
  background: var(--bb-surface);
}

.bb-loading span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--bb-accent);
  animation: bb-pulse 1s infinite alternate;
}

.bb-alert {
  border: 1px solid #efc6bb;
  color: #7c3425;
  background: #fff3ef;
}

.bb-form {
  padding: 34px clamp(22px, 6vw, 62px) 46px;
}

.bb-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  animation: bb-rise .25s ease-out;
  scroll-margin-top: 18px;
}

.bb-step legend {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(23px, 4vw, 30px);
  font-weight: 700;
}

.bb-step legend span {
  color: var(--bb-accent);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
}

.bb-step-intro {
  margin: 7px 0 22px;
  color: var(--bb-muted);
}

.bb-choice-recap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -4px 0 20px;
  padding: 12px 15px;
  border: 1px solid var(--bb-line);
  border-color: color-mix(in srgb, var(--bb-accent) 18%, var(--bb-line));
  border-radius: 11px;
  background: var(--bb-accent-soft);
}

.bb-choice-recap span {
  color: var(--bb-muted);
  font-size: 12px;
  font-weight: 700;
}

.bb-choice-recap strong {
  color: var(--bb-accent-dark);
  text-align: right;
}

.bb-categories {
  display: flex;
  gap: 7px;
  margin-bottom: 16px;
  padding-bottom: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.bb-category {
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  color: var(--bb-muted);
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
}

.bb-category:hover,
.bb-category.is-active {
  border-color: var(--bb-accent);
  color: var(--bb-accent-contrast);
  background: var(--bb-accent);
}

.bb-service-grid,
.bb-staff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.bb-service-card {
  display: flex;
  min-height: 128px;
  padding: 17px;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--bb-line);
  border-radius: 14px;
  color: var(--bb-ink);
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.bb-service-card:hover,
.bb-staff-card:hover {
  border-color: color-mix(in srgb, var(--bb-accent) 45%, var(--bb-line));
  box-shadow: 0 8px 22px rgb(54 40 33 / 8%);
  transform: translateY(-1px);
}

.bb-service-card.is-selected,
.bb-staff-card.is-selected {
  border-color: var(--bb-accent);
  background: linear-gradient(145deg, #fff, var(--bb-accent-soft));
  box-shadow: 0 0 0 2px var(--bb-accent-soft);
}

.bb-card-top,
.bb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bb-card-top strong {
  font-size: 16px;
}

.bb-card-top small {
  flex: 0 0 auto;
  color: var(--bb-muted);
  white-space: nowrap;
}

.bb-card-description {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--bb-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bb-card-footer {
  margin-top: auto;
  padding-top: 11px;
}

.bb-card-price {
  color: var(--bb-accent-dark);
  font-size: 14px;
  font-weight: 850;
}

.bb-service-category {
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--bb-muted);
  background: var(--bb-surface);
  font-size: 11px;
  font-weight: 700;
}

.bb-staff-card {
  position: relative;
  display: flex;
  min-height: 122px;
  align-items: center;
  gap: 13px;
  padding: 16px 46px 16px 16px;
  border: 1px solid var(--bb-line);
  border-radius: 14px;
  color: var(--bb-ink);
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.bb-staff-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 19px;
  height: 19px;
  border: 1px solid var(--bb-line);
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}

.bb-staff-card.is-selected::after {
  content: "✓";
  display: grid;
  place-items: center;
  border-color: var(--bb-accent);
  color: var(--bb-accent-contrast);
  background: var(--bb-accent);
  font-size: 11px;
  font-weight: 900;
}

.bb-staff-avatar,
.bb-staff-initial {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
}

.bb-staff-avatar {
  object-fit: cover;
}

.bb-staff-initial {
  display: grid;
  place-items: center;
  color: var(--bb-accent-dark);
  background: var(--bb-accent-soft);
  font-family: Georgia, serif;
  font-size: 22px;
}

.bb-staff-copy {
  display: grid;
  min-width: 0;
}

.bb-staff-copy strong {
  font-size: 15px;
}

.bb-staff-copy small {
  overflow: hidden;
  color: var(--bb-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-staff-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.bb-staff-specialties em,
.bb-staff-specialties i {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  line-height: 1.5;
}

.bb-staff-specialties em {
  padding-left: 0;
  color: var(--bb-muted);
  background: transparent;
  font-weight: 800;
}

.bb-staff-specialties i {
  color: var(--bb-accent-dark);
  background: var(--bb-accent-soft);
  font-weight: 700;
}

.bb-date-field {
  max-width: 360px;
}

.bb-date-field label,
.bb-fields label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 750;
}

.bb-date-field input,
.bb-fields input,
.bb-fields textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--bb-line);
  border-radius: 10px;
  color: var(--bb-ink);
  background: #fff;
  font: inherit;
}

.bb-date-field input:focus,
.bb-fields input:focus,
.bb-fields textarea:focus {
  border-color: var(--bb-accent);
  outline: 3px solid var(--bb-accent-soft);
}

.bb-date-shortcuts {
  display: flex;
  gap: 7px;
  margin-top: 14px;
  padding-bottom: 3px;
  overflow-x: auto;
}

.bb-date-shortcut {
  display: grid;
  min-width: 67px;
  min-height: 58px;
  flex: 0 0 67px;
  place-items: center;
  gap: 0;
  padding: 7px 5px;
  border: 1px solid var(--bb-line);
  border-radius: 11px;
  color: var(--bb-ink);
  background: #fff;
  cursor: pointer;
  font: inherit;
}

.bb-date-shortcut small {
  color: var(--bb-muted);
  font-size: 11px;
}

.bb-date-shortcut strong {
  font-size: 14px;
}

.bb-date-shortcut:hover,
.bb-date-shortcut.is-selected {
  border-color: var(--bb-accent);
  color: var(--bb-accent-contrast);
  background: var(--bb-accent);
}

.bb-date-shortcut.is-selected small,
.bb-date-shortcut:hover small {
  color: inherit;
}

.bb-date-shortcut.is-closed,
.bb-date-shortcut:disabled {
  border-style: dashed;
  border-color: #d8d1cc;
  color: #958e88;
  background: #f5f2ef;
  cursor: not-allowed;
  opacity: .82;
}

.bb-date-shortcut.is-closed small,
.bb-date-shortcut:disabled small {
  color: #a33a32;
  font-weight: 800;
}

.bb-slot-status {
  min-height: 27px;
  margin: 19px 0 8px;
  color: var(--bb-muted);
  font-size: 13px;
}

.bb-time-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.bb-time {
  min-height: 43px;
  border: 1px solid var(--bb-line);
  border-radius: 9px;
  color: var(--bb-ink);
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.bb-time:hover,
.bb-time.is-selected {
  border-color: var(--bb-accent);
  color: var(--bb-accent-contrast);
  background: var(--bb-accent);
}

.bb-summary {
  margin-bottom: 22px;
  padding: 17px 19px;
  border: 1px solid var(--bb-line);
  border-color: color-mix(in srgb, var(--bb-accent) 16%, var(--bb-line));
  border-radius: 14px;
  background: var(--bb-accent-soft);
}

.bb-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}

.bb-summary-row span {
  color: var(--bb-muted);
}

.bb-summary-row strong {
  text-align: right;
}

.bb-line-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  align-items: center;
  margin: 0 0 24px;
  padding: 17px 19px;
  border: 1px solid #b9dcc9;
  border-radius: 14px;
  background: #f1faf5;
}

.bb-line-copy {
  display: grid;
  gap: 2px;
}

.bb-line-copy strong {
  color: #174d34;
  font-size: 14px;
}

.bb-line-copy span {
  color: #4f6f60;
  font-size: 12px;
}

.bb-line-button {
  min-height: 42px;
  padding: 8px 17px;
  color: #fff;
  background: #06c755;
  white-space: nowrap;
}

.bb-line-button:hover:not(:disabled),
.bb-line-button.is-connected {
  background: #05a847;
}

.bb-line-status {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--bb-muted);
  font-size: 12px;
}

.bb-line-status.is-success {
  color: #17663e;
}

.bb-line-status.is-warning {
  color: #8a4a25;
}

.bb-line-friend {
  grid-column: 1 / -1;
  width: fit-content;
  color: #17663e;
  font-size: 12px;
  font-weight: 700;
}

.bb-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.bb-fields b {
  color: var(--bb-accent);
}

.bb-field-wide {
  grid-column: 1 / -1;
}

.bb-fields textarea {
  resize: vertical;
}

.bb-fields input::placeholder,
.bb-fields textarea::placeholder {
  color: #aaa29d;
}

.bb-privacy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--bb-muted);
  background: var(--bb-surface);
  font-size: 12px;
}

.bb-privacy input {
  margin-top: 4px;
}

.bb-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.bb-actions {
  display: flex;
  justify-content: space-between;
  gap: 11px;
  margin-top: 30px;
}

.bb-actions-end {
  justify-content: flex-end;
}

.bb-button {
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition: background .18s, transform .18s;
}

.bb-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.bb-button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.bb-primary {
  color: var(--bb-accent-contrast);
  background: var(--bb-accent);
}

.bb-primary:hover:not(:disabled) {
  background: var(--bb-accent-dark);
}

.bb-secondary {
  border-color: var(--bb-line);
  color: var(--bb-ink);
  background: #fff;
}

.bb-success {
  padding: 54px clamp(22px, 8vw, 84px);
  text-align: center;
  animation: bb-rise .28s ease-out;
}

.bb-success:focus {
  outline: 0;
}

.bb-success-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--bb-green);
  font-size: 26px;
  font-weight: 800;
}

.bb-success > p:not(.bb-eyebrow) {
  color: var(--bb-muted);
}

.bb-success-code {
  display: grid;
  gap: 4px;
  max-width: 420px;
  margin: 22px auto 12px;
  padding: 15px;
  border: 1px dashed var(--bb-accent);
  border-color: color-mix(in srgb, var(--bb-accent) 55%, var(--bb-line));
  border-radius: 12px;
  background: var(--bb-accent-soft);
}

.bb-success-code span,
.bb-success-code small {
  color: var(--bb-muted);
  font-size: 11px;
}

.bb-success-code strong {
  color: var(--bb-accent-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  letter-spacing: .05em;
}

.bb-success-summary {
  max-width: 520px;
  margin: 12px auto 24px;
  padding: 15px 18px;
  border-radius: 13px;
  background: var(--bb-surface);
}

.bb-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--bb-line);
  border-radius: 13px;
  color: var(--bb-muted);
  text-align: center;
}

@keyframes bb-pulse {
  to { opacity: .25; transform: scale(.72); }
}

@keyframes bb-rise {
  from { opacity: 0; transform: translateY(7px); }
}

@media (max-width: 720px) {
  body.bb-booking-page .bb-app {
    padding: 10px 8px 20px;
  }

  .bb-shell {
    border-radius: 19px;
  }

  .bb-hero {
    display: block;
    padding: 27px 23px 22px;
  }

  .bb-hero-copy > p:last-child {
    font-size: 13px;
  }

  .bb-hero-benefits {
    justify-content: flex-start;
    max-width: none;
    margin-top: 16px;
  }

  .bb-hero-benefits span {
    padding: 4px 8px;
    font-size: 10px;
  }

  .bb-progress {
    padding: 14px 13px;
  }

  .bb-progress ol {
    gap: 4px;
  }

  .bb-progress li {
    gap: 3px;
    font-size: 10px;
  }

  .bb-progress li::after {
    top: 14px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
  }

  .bb-progress span {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .bb-line-gate {
    margin: 18px 14px 26px;
    padding: 20px 17px;
    border-radius: 16px;
  }

  .bb-line-gate-heading {
    gap: 12px;
  }

  .bb-line-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
    font-size: 10px;
  }

  .bb-line-steps {
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 19px 0 16px;
  }

  .bb-line-gate-actions,
  .bb-line-gate-actions .bb-button {
    width: 100%;
  }

  .bb-form {
    padding: 27px 22px 34px;
  }

  .bb-step-intro {
    margin-bottom: 18px;
    font-size: 13px;
  }

  .bb-choice-recap {
    display: grid;
    gap: 2px;
  }

  .bb-choice-recap strong {
    text-align: left;
  }

  .bb-service-grid,
  .bb-staff-grid,
  .bb-fields {
    grid-template-columns: 1fr;
  }

  .bb-service-card {
    min-height: 110px;
    padding: 15px;
  }

  .bb-field-wide {
    grid-column: auto;
  }

  .bb-time-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bb-summary-row {
    display: grid;
    gap: 0;
  }

  .bb-summary-row strong {
    text-align: left;
  }

  .bb-line-panel {
    grid-template-columns: 1fr;
  }

  .bb-line-button {
    width: 100%;
  }

  .bb-line-status,
  .bb-line-friend {
    grid-column: auto;
  }

  .bb-actions {
    position: sticky;
    bottom: 7px;
    z-index: 5;
    margin: 26px -7px -8px;
    padding: 10px 7px;
    border: 1px solid rgb(229 223 218 / 85%);
    border-radius: 999px;
    background: rgb(255 254 250 / 94%);
    box-shadow: 0 8px 24px rgb(45 34 29 / 12%);
    backdrop-filter: blur(8px);
  }

  .bb-actions .bb-button {
    flex: 1;
  }

  .bb-actions-end .bb-button {
    flex: 0 1 58%;
  }
}

@media (max-width: 390px) {
  .bb-categories {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .bb-form {
    padding-right: 17px;
    padding-left: 17px;
  }

  .bb-hero {
    padding-right: 18px;
    padding-left: 18px;
  }

  .bb-card-top {
    align-items: flex-start;
  }

  .bb-date-shortcut {
    min-width: 62px;
    flex-basis: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-app *,
  .bb-app *::before,
  .bb-app *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.bb-service-options {
	margin-top: 24px;
	padding: 21px;
	border: 1px solid var(--bb-line);
	border-color: color-mix(in srgb, var(--bb-accent) 20%, var(--bb-line));
	border-radius: 16px;
	background: linear-gradient(145deg, #fff, var(--bb-accent-soft));
}

.bb-service-options-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: 15px;
}

.bb-service-options-heading span {
	color: var(--bb-accent);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .14em;
}

.bb-service-options-heading h3,
.bb-service-options-heading p,
.bb-addon-section h4 {
	margin: 0;
}

.bb-service-options-heading h3 {
	font-family: Georgia, "Noto Serif TC", serif;
	font-size: 20px;
}

.bb-service-options-heading p {
	max-width: 390px;
	color: var(--bb-muted);
	font-size: 12px;
	text-align: right;
}

.bb-plan-grid,
.bb-addon-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.bb-plan-card,
.bb-addon-card {
	position: relative;
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 42px 13px 14px;
	border: 1px solid var(--bb-line);
	border-radius: 12px;
	color: var(--bb-ink);
	background: #fff;
	cursor: pointer;
	font: inherit;
	text-align: left;
}

.bb-plan-card::after,
.bb-addon-card::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 13px;
	display: grid;
	width: 19px;
	height: 19px;
	place-items: center;
	border: 1px solid var(--bb-line);
	border-radius: 50%;
	background: #fff;
	transform: translateY(-50%);
}

.bb-addon-card::after {
	border-radius: 5px;
}

.bb-plan-card:hover,
.bb-addon-card:hover,
.bb-plan-card.is-selected,
.bb-addon-card.is-selected {
	border-color: var(--bb-accent);
	box-shadow: 0 0 0 2px var(--bb-accent-soft);
}

.bb-plan-card.is-selected::after,
.bb-addon-card.is-selected::after {
	content: "✓";
	border-color: var(--bb-accent);
	color: var(--bb-accent-contrast);
	background: var(--bb-accent);
	font-size: 11px;
	font-weight: 900;
}

.bb-option-copy {
	display: grid;
	min-width: 0;
}

.bb-option-copy strong {
	overflow: hidden;
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bb-option-copy small {
	color: var(--bb-muted);
	font-size: 11px;
}

.bb-plan-card > b,
.bb-addon-card > b {
	flex: 0 0 auto;
	color: var(--bb-accent-dark);
	font-size: 12px;
	white-space: nowrap;
}

.bb-addon-section {
	margin-top: 19px;
	padding-top: 17px;
	border-top: 1px solid var(--bb-line);
}

.bb-addon-section h4 {
	margin-bottom: 10px;
	font-size: 14px;
}

.bb-addon-section h4 small {
	margin-left: 5px;
	color: var(--bb-muted);
	font-size: 11px;
	font-weight: 600;
}

.bb-selection-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 17px;
	padding: 12px 14px;
	border-radius: 10px;
	color: var(--bb-accent-dark);
	background: #fff;
}

.bb-selection-total > span {
	display: grid;
}

.bb-selection-total small {
	color: var(--bb-muted);
	font-size: 10px;
	font-weight: 700;
}

.bb-selection-total b {
	white-space: nowrap;
}

@media (max-width: 700px) {
	.bb-service-options {
		padding: 16px;
	}

	.bb-service-options-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.bb-service-options-heading p {
		text-align: left;
	}

	.bb-plan-grid,
	.bb-addon-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	.bb-selection-total {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}
}

/* Keep theme and page-builder global button hover rules out of the booking app. */
.bb-app .bb-service-card:hover,
.bb-app .bb-staff-card:hover,
.bb-app .bb-plan-card:hover,
.bb-app .bb-addon-card:hover {
	color: var(--bb-ink);
	background: #fff;
}

.bb-app .bb-service-card.is-selected:hover,
.bb-app .bb-staff-card.is-selected:hover,
.bb-app .bb-plan-card.is-selected:hover,
.bb-app .bb-addon-card.is-selected:hover {
	color: var(--bb-ink);
	background: linear-gradient(145deg, #fff, var(--bb-accent-soft));
}

.bb-app .bb-category:hover,
.bb-app .bb-category.is-active,
.bb-app .bb-date-shortcut:hover,
.bb-app .bb-date-shortcut.is-selected,
.bb-app .bb-time:hover,
.bb-app .bb-time.is-selected {
	border-color: var(--bb-accent);
	color: var(--bb-accent-contrast);
	background: var(--bb-accent);
}

.bb-app .bb-date-shortcut.is-closed,
.bb-app .bb-date-shortcut.is-closed:hover,
.bb-app .bb-date-shortcut:disabled,
.bb-app .bb-date-shortcut:disabled:hover {
	border-color: #d8d1cc;
	color: #958e88;
	background: #f5f2ef;
}

.bb-app .bb-date-shortcut.is-closed small,
.bb-app .bb-date-shortcut.is-closed:hover small,
.bb-app .bb-date-shortcut:disabled small,
.bb-app .bb-date-shortcut:disabled:hover small {
	color: #a33a32;
}

.bb-app .bb-primary:hover:not(:disabled) {
	color: var(--bb-accent-contrast);
	background: var(--bb-accent-dark);
}

.bb-app .bb-secondary:hover:not(:disabled) {
	border-color: var(--bb-accent);
	color: var(--bb-accent-dark);
	background: var(--bb-accent-soft);
}

.bb-app .bb-line-button:hover:not(:disabled) {
	color: #fff;
	background: #05a847;
}

.bb-app .bb-line-friend-button:hover:not(:disabled) {
	border-color: #8dccaa;
	color: #17663e;
	background: #f1faf5;
}

@media (hover: none) {
	.bb-app .bb-category:hover:not(.is-active) {
		border-color: var(--bb-line);
		color: var(--bb-muted);
		background: #fff;
	}

	.bb-app .bb-service-card:hover:not(.is-selected),
	.bb-app .bb-staff-card:hover:not(.is-selected),
	.bb-app .bb-plan-card:hover:not(.is-selected),
	.bb-app .bb-addon-card:hover:not(.is-selected) {
		border-color: var(--bb-line);
		background: #fff;
		box-shadow: none;
		transform: none;
	}

	.bb-app .bb-date-shortcut:hover:not(.is-selected),
	.bb-app .bb-time:hover:not(.is-selected) {
		border-color: var(--bb-line);
		color: var(--bb-ink);
		background: #fff;
	}

	.bb-app .bb-date-shortcut:hover:not(.is-selected) small {
		color: var(--bb-muted);
	}

	.bb-app .bb-button:hover:not(:disabled) {
		transform: none;
	}
}
/* Keep long descriptions and unbroken URLs inside cards, even under theme button styles. */
.bb-app .bb-service-card, .bb-app .bb-service-card > *,
.bb-app .bb-card-top strong, .bb-app .bb-card-description {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bb-app .bb-card-top { flex-wrap: wrap; }
.bb-app .bb-card-description { width: 100%; }
.bb-app .bb-customer-notice {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #e2b75b;
  border-left: 4px solid #a66a00;
  border-radius: 6px;
  background: #fff5db;
  color: #704500;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}