/* Scroll-lock CSS for html.book-check-modal-open / body.book-check-modal-open
   used to live here. setOpen(true) added the class on overlay open;
   that path is gone (setOpen is a no-op since commit 09ea848) so the
   selectors never match and the rules never apply. Removed in the
   Stage 3 cleanup pass along with the matching --dava-book-lock-top
   CSS var. */

/* Late-step typography override (must stay at end of file) */
.book-check-modal__dialog[data-step="schedule"] .book-check-modal__body,
.book-check-modal__dialog[data-step="contact"] .book-check-modal__body,
.book-check-modal__dialog[data-step="address"] .book-check-modal__body,
.book-check-modal__dialog[data-step="review"] .book-check-modal__body,
.book-check-modal__dialog[data-step="success"] .book-check-modal__body {
  padding-top: 6px;
}

.book-check-modal__dialog[data-step="schedule"] .book-flow-card,
.book-check-modal__dialog[data-step="contact"] .book-flow-card,
.book-check-modal__dialog[data-step="address"] .book-flow-card,
.book-check-modal__dialog[data-step="review"] .book-flow-card {
  margin-left: -16px;
  margin-right: -16px;
  padding: 9px 12px;
}

.book-check-modal__dialog[data-step="schedule"] .book-services__title,
.book-check-modal__dialog[data-step="contact"] .book-services__title,
.book-check-modal__dialog[data-step="address"] .book-services__title,
.book-check-modal__dialog[data-step="review"] .book-services__title,
.book-check-modal__dialog[data-step="schedule"] .book-flow-card__title,
.book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
.book-check-modal__dialog[data-step="address"] .book-flow-card__title,
.book-check-modal__dialog[data-step="review"] .book-flow-card__title {
  font-size: 20px;
  margin-bottom: 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="contact"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="address"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="review"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="success"] .book-schedule__summary-title {
  font-size: 15px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="contact"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="address"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="review"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="success"] .book-schedule__summary-chip {
  font-size: 11px;
  padding: 6px 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__month-label,
.book-check-modal__dialog[data-step="schedule"] .book-schedule__today-btn,
.book-check-modal__dialog[data-step="schedule"] .book-schedule__tz-row,
.book-check-modal__dialog[data-step="schedule"] .book-schedule__slot,
.book-check-modal__dialog[data-step="contact"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="address"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="review"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="contact"] .book-field__label,
.book-check-modal__dialog[data-step="address"] .book-field__label,
.book-check-modal__dialog[data-step="review"] .book-field__label,
.book-check-modal__dialog[data-step="contact"] .book-field__check,
.book-check-modal__dialog[data-step="review"] .book-field__check {
  font-size: 13px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__slot {
  min-height: 46px;
}

.book-check-modal__dialog[data-step="contact"] .book-field__input,
.book-check-modal__dialog[data-step="address"] .book-field__input {
  min-height: 42px;
  font-size: 15px;
}

@media (max-width: 980px) {
  .book-check-modal__dialog[data-step="schedule"] .book-flow-card,
  .book-check-modal__dialog[data-step="contact"] .book-flow-card,
  .book-check-modal__dialog[data-step="address"] .book-flow-card,
  .book-check-modal__dialog[data-step="review"] .book-flow-card {
    margin-left: -14px;
    margin-right: -14px;
    padding: 8px 10px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-services__title,
  .book-check-modal__dialog[data-step="contact"] .book-services__title,
  .book-check-modal__dialog[data-step="address"] .book-services__title,
  .book-check-modal__dialog[data-step="review"] .book-services__title,
  .book-check-modal__dialog[data-step="schedule"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="address"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="review"] .book-flow-card__title {
    font-size: 18px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="contact"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="address"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="review"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="success"] .book-schedule__summary-title {
    font-size: 14px;
  }

}

/* Final pass: larger typography + tighter layout for steps after Services */
.book-check-modal__dialog[data-step="schedule"] .book-check-modal__body,
.book-check-modal__dialog[data-step="contact"] .book-check-modal__body,
.book-check-modal__dialog[data-step="address"] .book-check-modal__body,
.book-check-modal__dialog[data-step="review"] .book-check-modal__body,
.book-check-modal__dialog[data-step="success"] .book-check-modal__body {
  padding-top: 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-services__title,
.book-check-modal__dialog[data-step="contact"] .book-services__title,
.book-check-modal__dialog[data-step="address"] .book-services__title,
.book-check-modal__dialog[data-step="review"] .book-services__title {
  font-size: 20px;
  margin-bottom: 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-flow-card,
.book-check-modal__dialog[data-step="contact"] .book-flow-card,
.book-check-modal__dialog[data-step="address"] .book-flow-card,
.book-check-modal__dialog[data-step="review"] .book-flow-card {
  margin-left: -16px;
  margin-right: -16px;
  padding: 9px 12px;
}

.book-check-modal__dialog[data-step="schedule"] .book-flow-card__title,
.book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
.book-check-modal__dialog[data-step="address"] .book-flow-card__title,
.book-check-modal__dialog[data-step="review"] .book-flow-card__title {
  font-size: 20px;
  margin-bottom: 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="contact"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="address"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="review"] .book-flow-card__meta-row {
  font-size: 13px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="contact"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="address"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="review"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="success"] .book-schedule__summary-title {
  font-size: 15px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="contact"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="address"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="review"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="success"] .book-schedule__summary-chip {
  font-size: 11px;
  padding: 6px 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__mode-btn {
  min-height: 40px;
  font-size: 13px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__month-label {
  font-size: 14px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__today-btn {
  font-size: 13px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__calendar-cell {
  min-height: 38px;
  font-size: 13px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__date-pill-date {
  font-size: 14px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__tz-row {
  font-size: 13px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__slot {
  min-height: 46px;
  font-size: 13px;
}

.book-check-modal__dialog[data-step="contact"] .book-field__label,
.book-check-modal__dialog[data-step="address"] .book-field__label,
.book-check-modal__dialog[data-step="review"] .book-field__label {
  font-size: 13px;
}

.book-check-modal__dialog[data-step="contact"] .book-field__input,
.book-check-modal__dialog[data-step="address"] .book-field__input {
  min-height: 42px;
  font-size: 15px;
}

.book-check-modal__dialog[data-step="contact"] .book-field__check,
.book-check-modal__dialog[data-step="review"] .book-field__check {
  font-size: 13px;
  margin-top: 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-check-modal__footer,
.book-check-modal__dialog[data-step="contact"] .book-check-modal__footer,
.book-check-modal__dialog[data-step="address"] .book-check-modal__footer,
.book-check-modal__dialog[data-step="review"] .book-check-modal__footer,
.book-check-modal__dialog[data-step="success"] .book-check-modal__footer {
  padding-top: 8px;
  padding-bottom: 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-check-modal__footer-btn,
.book-check-modal__dialog[data-step="contact"] .book-check-modal__footer-btn,
.book-check-modal__dialog[data-step="address"] .book-check-modal__footer-btn,
.book-check-modal__dialog[data-step="review"] .book-check-modal__footer-btn,
.book-check-modal__dialog[data-step="schedule"] .book-check-modal__call,
.book-check-modal__dialog[data-step="success"] .book-check-modal__call {
  font-size: 15px;
}

.book-check-modal__dialog[data-step="schedule"] .book-check-modal__footer-btn,
.book-check-modal__dialog[data-step="contact"] .book-check-modal__footer-btn,
.book-check-modal__dialog[data-step="address"] .book-check-modal__footer-btn,
.book-check-modal__dialog[data-step="review"] .book-check-modal__footer-btn {
  min-height: 44px;
}

@media (max-width: 980px) {
  .book-check-modal__dialog[data-step="schedule"] .book-check-modal__body,
  .book-check-modal__dialog[data-step="contact"] .book-check-modal__body,
  .book-check-modal__dialog[data-step="address"] .book-check-modal__body,
  .book-check-modal__dialog[data-step="review"] .book-check-modal__body,
  .book-check-modal__dialog[data-step="success"] .book-check-modal__body {
    padding-top: 6px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-flow-card,
  .book-check-modal__dialog[data-step="contact"] .book-flow-card,
  .book-check-modal__dialog[data-step="address"] .book-flow-card,
  .book-check-modal__dialog[data-step="review"] .book-flow-card {
    margin-left: -14px;
    margin-right: -14px;
    padding: 8px 10px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-services__title,
  .book-check-modal__dialog[data-step="contact"] .book-services__title,
  .book-check-modal__dialog[data-step="address"] .book-services__title,
  .book-check-modal__dialog[data-step="review"] .book-services__title {
    font-size: 18px;
    margin-bottom: 7px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="address"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="review"] .book-flow-card__title {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="contact"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="address"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="review"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="success"] .book-schedule__summary-title {
    font-size: 14px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-schedule__slot {
    min-height: 46px;
    font-size: 13px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__label,
  .book-check-modal__dialog[data-step="address"] .book-field__label,
  .book-check-modal__dialog[data-step="review"] .book-field__label,
  .book-check-modal__dialog[data-step="contact"] .book-field__check,
  .book-check-modal__dialog[data-step="review"] .book-field__check,
  .book-check-modal__dialog[data-step="contact"] .book-flow-card__meta-row,
  .book-check-modal__dialog[data-step="address"] .book-flow-card__meta-row,
  .book-check-modal__dialog[data-step="review"] .book-flow-card__meta-row {
    font-size: 13px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__input,
  .book-check-modal__dialog[data-step="address"] .book-field__input {
    min-height: 42px;
    font-size: 15px;
  }

}

.book-check-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 16px;
  --dava-book-modal-shift-y: 0px;
  overflow: hidden;
}

.book-check-modal[hidden] {
  display: none !important;
}

/* .book-check-modal__backdrop base styles removed -- the backdrop
   element is no longer in the markup (Stage 3 cleanup). */

.book-check-modal__dialog {
  position: relative;
  z-index: 1;
  width: 560px;
  max-width: calc(100vw - 32px);
  height: 700px;
  max-height: calc(100vh - 32px);
  background: #f4f4f6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0;
  margin-top: var(--dava-book-modal-shift-y, 0px);
}

.book-check-modal__dialog[data-step="zip"] {
  height: 560px;
}

.book-check-modal__dialog[data-step="schedule"] .book-check-modal__hero-panel,
.book-check-modal__dialog[data-step="contact"] .book-check-modal__hero-panel,
.book-check-modal__dialog[data-step="address"] .book-check-modal__hero-panel,
.book-check-modal__dialog[data-step="review"] .book-check-modal__hero-panel,
.book-check-modal__dialog[data-step="success"] .book-check-modal__hero-panel {
  display: none;
}

.book-check-modal__dialog[data-step="schedule"] .book-check-modal__hero-inner,
.book-check-modal__dialog[data-step="contact"] .book-check-modal__hero-inner,
.book-check-modal__dialog[data-step="address"] .book-check-modal__hero-inner,
.book-check-modal__dialog[data-step="review"] .book-check-modal__hero-inner,
.book-check-modal__dialog[data-step="success"] .book-check-modal__hero-inner {
  padding-bottom: 12px;
}

.book-check-modal__hero {
  position: relative;
  background: linear-gradient(180deg, #C75528 0%, #C75528 100%);
  color: #fff;
  flex-shrink: 0;
}

.book-check-modal__hero::before,
.book-check-modal__hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 74%;
  pointer-events: none;
  background:
    linear-gradient(154deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.08) 15%, rgba(255,255,255,0.08) 33%, rgba(255,255,255,0) 33%) 0 0/100% 100%,
    linear-gradient(154deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.09) 42%, rgba(255,255,255,0.09) 57%, rgba(255,255,255,0) 57%) 0 0/100% 100%;
  opacity: .7;
}

.book-check-modal__hero-inner {
  position: relative;
  z-index: 1;
  padding: 14px 20px 0;
}

/* .book-check-modal__close base + svg sizing removed -- close button
   element gone from markup (Stage 3 cleanup). The combined
   focus-visible rule below still references __close as one of three
   selectors; the orphan selector is harmless (matches nothing) and
   left in place to keep the diff focused on hard removals. */

.book-check-modal__eyebrow {
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .04em;
  font-weight: 700;
  text-transform: uppercase;
  opacity: .98;
  margin-bottom: 3px;
}

.book-check-modal__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 800;
}

.book-check-modal__hero-panel {
  margin-top: 8px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 0;
}

.book-check-modal__hero-copy {
  position: relative;
  z-index: 2;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.08;
  font-weight: 800;
  max-width: 250px;
}

.book-check-modal__hero-art {
  width: 100%;
  max-width: 170px;
  justify-self: end;
  align-self: end;
  margin-bottom: -2px;
  opacity: .98;
}

.book-check-modal__body {
  padding: 12px 18px 8px;
  text-align: center;
  overflow: auto;
  min-height: 0;
}

.book-check-step[hidden] {
  display: none !important;
}

.book-check-modal__icon-wrap {
  width: 112px;
  height: 112px;
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
}

.book-check-modal__zip-icon {
  width: 112px;
  height: 112px;
}

.book-check-modal__question {
  margin: 0 0 4px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.1;
  font-weight: 800;
  color: #111;
}

.book-check-modal__subtext {
  margin: 0 auto 10px;
  max-width: 400px;
  font-size: 11px;
  line-height: 1.35;
  color: #5f6166;
}

.book-check-modal__form-block {
  max-width: 300px;
  margin: 0 auto;
  text-align: left;
}

.book-check-modal__label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}

.book-check-modal__label span {
  color: #C75528;
}

.book-check-modal__input-wrap {
  position: relative;
  border: 2px solid #d7d8dc;
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.book-check-modal__input-wrap:focus-within {
  border-color: #0b74d6;
  box-shadow: 0 0 0 3px rgba(11, 116, 214, 0.12);
}

.book-check-modal__input-wrap[data-zip-state="valid"] {
  border-color: #11a361;
}

.book-check-modal__input-wrap[data-zip-state="invalid"] {
  border-color: #d9601f;
}

.book-check-modal__input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 8px 32px 8px 10px;
  min-height: 22px;
  font-size: 14px;
  line-height: 1.1;
  color: #111;
  outline: none;
}

.book-check-modal__input::placeholder {
  color: #adb0b7;
}

.book-check-modal__input-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.book-check-modal__icon {
  width: 10px;
  height: 10px;
  display: none;
}

.book-check-modal__icon path {
  fill: currentColor;
}

.book-check-modal__input-wrap[data-zip-state="valid"] .book-check-modal__input-icon {
  background: #098a56;
  color: #fff;
}

.book-check-modal__input-wrap[data-zip-state="valid"] .book-check-modal__icon--check {
  display: block;
}

.book-check-modal__input-wrap[data-zip-state="invalid"] .book-check-modal__input-icon {
  background: #d9601f;
  color: #fff;
}

.book-check-modal__input-wrap[data-zip-state="invalid"] .book-check-modal__icon--cross {
  display: block;
}

.book-check-modal__status {
  min-height: 14px;
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.35;
  color: #6d7076;
}

.book-check-modal__status.is-valid {
  color: #097a4d;
  font-weight: 600;
}

.book-check-modal__status.is-invalid {
  color: #C75528;
  font-weight: 600;
}

.book-check-modal__footer {
  border-top: 1px solid #d8d9de;
  background: #f6f6f8;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  flex-shrink: 0;
}

.book-check-modal__footer-step {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.book-check-modal__footer-step[hidden] {
  display: none !important;
}

.book-check-modal__call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d9601f;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
}

.book-check-modal__call svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.book-check-modal__confirm {
  border: 0;
  border-radius: 8px;
  background: #C75528;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  min-width: 102px;
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  transition: transform .12s ease, opacity .2s ease, background-color .2s ease;
}

.book-check-modal__footer-btn {
  border: 0;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}

.book-check-modal__footer-btn--ghost {
  background: #e5e6ea;
  color: #5b6068;
}

.book-check-modal__footer-btn--solid {
  background: #C75528;
  color: #fff;
  min-width: 92px;
}

.book-check-modal__footer-btn--solid:disabled {
  background: #d4d4d8;
  color: #6b7280;
  opacity: 1;
  cursor: not-allowed;
}

.book-check-modal__footer-btn--solid:not(:disabled):hover {
  background: #a64720;
}

.book-check-modal__confirm:hover:not(:disabled) {
  background: #a64720;
}

.book-check-modal__confirm:active:not(:disabled) {
  transform: translateY(1px);
}

.book-check-modal__confirm:disabled {
  background: #d4d4d8;
  color: #6b7280;
  opacity: 1;
  cursor: not-allowed;
}

.book-check-modal__confirm:focus-visible,
.book-check-modal__call:focus-visible {
  outline: 3px solid rgba(11, 116, 214, 0.35);
  outline-offset: 3px;
}

.book-check-modal__dialog.is-unsupported .book-check-modal__call {
  animation: bookZipPulse .25s linear 2;
}

/* .is-backdrop-blocked dialog pulse used to fire when the customer
   clicked the backdrop -- a visual "you can't close this way, finish
   the form" hint. After Stage 2 (backdrop click handler removed) the
   class is never set; rule removed in Stage 3 cleanup along with
   the backdrop element itself. */

.book-check-modal__dialog[data-step="services"] .book-check-modal__hero-panel {
  display: none;
}

.book-check-modal__dialog[data-step="services"] .book-check-modal__hero-inner {
  padding-bottom: 12px;
}

.book-services__location {
  margin: -12px -18px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #d8d9de;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f4f4f6;
  position: sticky;
  top: -12px;
  z-index: 2;
}

.book-services__location-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.book-services__pin {
  width: 14px;
  height: 14px;
  fill: #6a6e75;
  flex-shrink: 0;
}

.book-services__location-line {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  color: #202124;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-services__location-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0a8b55;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.book-services__location-check svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.book-services__edit {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1f2125;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.book-services__edit svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.book-services__section {
  text-align: left;
}

.book-services__section + .book-services__section {
  margin-top: 12px;
}


.book-services__title {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 800;
  color: #111;
}

.book-services__subtitle {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 800;
  color: #111;
}

.book-services__categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.book-services__category {
  position: relative;
  border: 1.5px solid #d5d7dd;
  border-radius: 10px;
  background: #fff;
  min-height: 82px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.book-services__category.is-selected {
  border-color: #d9601f;
}

.book-services__category.is-selected::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d9601f;
  box-shadow: 0 0 0 2px #f4f4f6;
}

.book-services__category.is-selected::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.book-services__subservices {
  border-top: 1px solid #e0e1e6;
  padding-top: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

.book-services__subservices.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.book-services__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Honor [hidden] when chips are pre-rendered as per-category groups
   (Stage 5 /book/services pattern: every group lives in the DOM but
   only the active category's group is visible). The browser default
   [hidden] { display: none } is otherwise lost to the display: flex
   rule above. */
.book-services__chips[hidden] {
  display: none;
}

/* /book/services standalone page: force a 2-column responsive grid
   so chips of varying title-length stack uniformly instead of
   flex-wrapping into the 1-2-1-2 zigzag pattern the modal version
   shows on wider containers. The modal itself is narrower than the
   minmax minimum, so its layout stays single-column flex (unchanged). */
.book-flow-shell .book-services__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.book-flow-shell .book-services__chips[hidden] {
  display: none;
}

.book-services__chip {
  border: 1px solid #d1d4dc;
  border-radius: 8px;
  background: #fff;
  color: #4a4e56;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  padding: 7px 9px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.book-services__chip.is-selected {
  border-color: #d9601f;
  background: #fff1f3;
  color: #9f1726;
}

.book-services__photo-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #eceef3;
  color: #3f434a;
  font-size: 10px;
  line-height: 1.2;
  padding: 5px 8px;
}

.book-schedule__summary {
  margin: -12px -18px 0;
  padding: 10px 14px 12px;
  border-bottom: 1px solid #d8d9de;
}

.book-schedule__summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.book-schedule__summary-label {
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7078;
  font-weight: 700;
}

.book-schedule__summary-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  text-align: left;
  justify-items: start;
}

.book-schedule__summary-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #f5f6f8;
  border: 1px solid #e1e4eb;
  display: grid;
  place-items: center;
  font-size: 20px;
  overflow: hidden;
}

.book-schedule__summary-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-schedule__summary-content {
  min-width: 0;
  text-align: left;
  align-self: center;
}

.book-schedule__summary-title {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  color: #111;
  margin: 0 0 6px;
}

.book-schedule__summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.book-schedule__summary-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  background: #e8ebf0;
  color: #4a4f56;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  padding: 5px 7px;
}

.book-schedule__section {
  text-align: left;
  margin-top: 12px;
}

.book-schedule__mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #d0d4dd;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}

.book-schedule__mode-btn {
  border: 0;
  background: transparent;
  color: #3f434b;
  min-height: 34px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.book-schedule__mode-btn + .book-schedule__mode-btn {
  border-left: 1px solid #d0d4dd;
}

.book-schedule__mode-btn.is-active {
  background: #f4e8ec;
  color: #912030;
}

.book-schedule__all-panel[hidden] {
  display: none !important;
}

.book-schedule__all-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.book-schedule__month-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.book-schedule__month-label {
  font-size: 12px;
  font-weight: 800;
  color: #22252b;
  min-width: 68px;
}

.book-schedule__icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #d0d4dd;
  border-radius: 8px;
  background: #fff;
  color: #4a4f58;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.book-schedule__icon-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.book-schedule__icon-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.book-schedule__today-btn {
  border: 0;
  background: transparent;
  color: #4f535b;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
}

.book-schedule__view-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d0d4dd;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}

.book-schedule__view-btn {
  width: 34px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #1f2227;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.book-schedule__view-btn + .book-schedule__view-btn {
  border-left: 1px solid #d0d4dd;
}

.book-schedule__view-btn.is-active {
  background: #f4e8ec;
  color: #912030;
}

.book-schedule__view-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.book-schedule__calendar-wrap[hidden],
.book-schedule__date-strip-wrap[hidden] {
  display: none !important;
}

.book-schedule__calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.book-schedule__calendar-weekday {
  text-align: center;
  font-size: 10px;
  color: #7a7e86;
  font-weight: 700;
}

.book-schedule__calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.book-schedule__calendar-cell {
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f1f2f5;
  color: #c1c4cb;
  min-height: 34px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}

.book-schedule__calendar-cell--outside {
  opacity: .35;
}

.book-schedule__calendar-cell--available {
  background: #fff;
  color: #2d3137;
  border-color: #d4d8e0;
  cursor: pointer;
}

.book-schedule__calendar-cell--no-slots {
  background: #f7f8fb;
  color: #8e939b;
  border-color: #e4e7ee;
  cursor: not-allowed;
}

.book-schedule__calendar-cell--today.book-schedule__calendar-cell--available {
  border-color: #1f63f0;
}

.book-schedule__calendar-cell--today.book-schedule__calendar-cell--no-slots {
  border-color: #b8c2d8;
}

.book-schedule__calendar-cell--selected {
  background: #d9601f !important;
  color: #fff !important;
  border-color: #d9601f !important;
}

.book-schedule__date-strip-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.book-schedule__date-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.book-schedule__date-pill {
  border: 1px solid #d1d4dd;
  border-radius: 8px;
  background: #fff;
  min-height: 54px;
  padding: 6px 6px 5px;
  text-align: center;
  cursor: pointer;
}

.book-schedule__date-pill.is-selected {
  background: #d9601f;
  border-color: #d9601f;
  color: #fff;
}

.book-schedule__date-pill-dayname {
  display: block;
  font-size: 9px;
  line-height: 1.1;
  color: #747a84;
  margin-bottom: 4px;
}

.book-schedule__date-pill.is-selected .book-schedule__date-pill-dayname {
  color: rgba(255, 255, 255, 0.85);
}

.book-schedule__date-pill-date {
  display: block;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 800;
}

.book-schedule__meta-label {
  margin: 0 0 6px;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c7077;
  font-weight: 700;
}

.book-schedule__tz-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #444951;
  font-size: 11px;
  line-height: 1.3;
}

.book-schedule__tz-row svg {
  width: 15px;
  height: 15px;
  fill: #6a6e76;
  flex-shrink: 0;
}

.book-schedule__slots {
  display: grid;
  gap: 8px;
}

/* Honor [hidden] when slot groups are pre-rendered per day (Stage 5
   /book/schedule pattern: every day group lives in the DOM but only
   the active day's group is visible). The browser default
   [hidden] { display: none } is otherwise lost to display: grid. */
.book-schedule__slots[hidden] {
  display: none;
}

.book-schedule__slot {
  width: 100%;
  border: 1px solid #d2d5dd;
  border-radius: 8px;
  background: #fff;
  min-height: 42px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1e2228;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.book-schedule__slot:hover {
  border-color: #bcc1cc;
}

.book-schedule__slot.is-selected {
  border-color: #d9601f;
  box-shadow: inset 0 0 0 1px rgba(200, 36, 52, 0.08);
}

.book-schedule__slot-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #b7bbc5;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.book-schedule__slot-radio::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.book-schedule__slot.is-selected .book-schedule__slot-radio {
  border-color: #d9601f;
}

.book-schedule__slot.is-selected .book-schedule__slot-radio::after {
  background: #d9601f;
}

.book-schedule__loading,
.book-schedule__empty {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.35;
  color: #6a6f78;
}

.book-flow-card {
  text-align: left;
  border-top: 1px solid #d8d9de;
  margin: 0 -18px;
  padding: 10px 14px;
}

.book-flow-card:first-child {
  border-top: 0;
}

.book-flow-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.book-flow-card__label {
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7078;
  font-weight: 700;
}

.book-flow-card__body {
  text-align: left;
}

.book-flow-card__title {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.12;
  font-weight: 800;
  color: #101114;
}

.book-flow-card__meta {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.book-flow-card__meta-row {
  font-size: 11px;
  line-height: 1.35;
  color: #24272d;
  word-break: break-word;
}

.book-flow-card__contact-name {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: #121317;
}

.book-flow-card__error {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: #C75528;
  font-weight: 600;
}

.book-form-grid {
  display: grid;
  gap: 10px;
}

.book-form-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.book-field {
  display: grid;
  gap: 4px;
}

.book-field__label {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  color: #15171b;
}

.book-field__label span {
  color: #C75528;
}

.book-field__input {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d2d6de;
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  font-size: 12px;
  color: #15171b;
  outline: none;
}

.book-field__input:focus {
  border-color: #0b74d6;
  box-shadow: 0 0 0 3px rgba(11, 116, 214, 0.10);
}

.book-field__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.35;
  color: #20232a;
}

.book-field__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #C75528;
  flex-shrink: 0;
}

.book-field__check a {
  color: inherit;
}

.book-review__hint {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.35;
  color: #646972;
}

.book-check-modal__footer-spacer {
  display: block;
  width: 1px;
  height: 1px;
}

.book-schedule__summary-card--compact {
  align-items: start;
}

/* Global typography + density pass (desktop/tablet) */
.book-check-modal__body {
  padding: 10px 16px 6px;
}

.book-check-modal__eyebrow {
  font-size: 10px;
}

.book-check-modal__title {
  font-size: 22px;
}

.book-check-modal__question {
  margin-bottom: 6px;
  font-size: clamp(19px, 1.9vw, 24px);
}

.book-check-modal__subtext {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.book-check-modal__label {
  margin-bottom: 5px;
  font-size: 14px;
}

.book-check-modal__input {
  padding: 10px 36px 10px 12px;
  font-size: 18px;
}

.book-check-modal__status {
  min-height: 18px;
  margin-top: 5px;
  font-size: 12px;
}

.book-check-modal__footer {
  padding: 8px 16px;
}

.book-check-modal__call {
  font-size: 15px;
}

.book-check-modal__confirm,
.book-check-modal__footer-btn {
  min-height: 44px;
  font-size: 15px;
}

.book-check-modal__confirm {
  min-width: 118px;
}

.book-check-modal__footer-btn--solid {
  min-width: 108px;
}

.book-services__location {
  margin: -10px -16px 10px;
  padding: 9px 12px;
  top: -10px;
}

.book-services__location-line {
  font-size: 12px;
}

.book-services__section + .book-services__section {
  margin-top: 10px;
}

.book-services__title {
  margin-bottom: 8px;
  font-size: 18px;
}

.book-services__subtitle {
  margin-bottom: 7px;
  font-size: 15px;
}

.book-services__category {
  min-height: 78px;
  padding: 7px 6px;
  gap: 5px;
}

.book-services__subservices {
  padding-top: 10px;
}

.book-services__chip {
  font-size: 13px;
  padding: 8px 10px;
}

.book-services__photo-pill {
  font-size: 11px;
}

.book-schedule__summary {
  margin: -10px -16px 0;
  padding: 9px 12px 10px;
}

.book-schedule__summary-label,
.book-schedule__meta-label,
.book-flow-card__label {
  font-size: 11px;
}

.book-schedule__summary-head {
  margin-bottom: 7px;
}

.book-schedule__summary-card {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
}

.book-schedule__summary-icon {
  width: 56px;
  height: 56px;
}

.book-schedule__summary-title {
  font-size: 15px;
}

.book-schedule__summary-chip {
  font-size: 11px;
  padding: 6px 8px;
}

.book-schedule__section {
  margin-top: 10px;
}

.book-schedule__mode-btn {
  min-height: 40px;
  font-size: 13px;
}

.book-schedule__all-toolbar {
  margin-bottom: 6px;
}

.book-schedule__month-label {
  font-size: 14px;
  min-width: 78px;
}

.book-schedule__today-btn {
  font-size: 13px;
}

.book-schedule__calendar-weekday {
  font-size: 11px;
}

.book-schedule__calendar-cell {
  min-height: 38px;
  font-size: 13px;
}

.book-schedule__date-pill {
  min-height: 50px;
}

.book-schedule__date-pill-dayname {
  font-size: 10px;
}

.book-schedule__date-pill-date {
  font-size: 14px;
}

.book-schedule__tz-row {
  font-size: 13px;
}

.book-schedule__slots {
  gap: 7px;
}

.book-schedule__slot {
  min-height: 46px;
  font-size: 13px;
}

.book-flow-card {
  margin: 0 -16px;
  padding: 9px 12px;
}

.book-flow-card__head {
  margin-bottom: 6px;
}

.book-flow-card__title {
  margin-bottom: 10px;
  font-size: 20px;
}

.book-flow-card__meta {
  gap: 5px;
  margin-top: 6px;
}

.book-flow-card__meta-row {
  font-size: 13px;
}

.book-flow-card__contact-name {
  font-size: 16px;
}

.book-field {
  gap: 5px;
}

.book-field__label {
  font-size: 13px;
}

.book-field__input {
  min-height: 42px;
  font-size: 15px;
}

.book-field__check {
  margin-top: 8px;
  font-size: 13px;
}

.book-review__hint {
  font-size: 11px;
}

.book-check-modal__dialog[data-step="success"] .book-check-modal__body {
  padding-top: 0;
  background:
    radial-gradient(circle at 90% 14%, rgba(197, 31, 49, 0.08), transparent 42%),
    radial-gradient(circle at 6% 62%, rgba(197, 31, 49, 0.05), transparent 46%),
    linear-gradient(180deg, #f4f4f6 0%, #f1f2f5 100%);
}

.book-check-step--success {
  min-height: 100%;
  padding-bottom: 8px;
}

.book-success__hero {
  margin: 0 -18px 14px;
  min-height: 132px;
  background:
    radial-gradient(circle at 85% 16%, rgba(255,255,255,0.16), rgba(255,255,255,0) 34%),
    linear-gradient(140deg, #d9601f 0%, #C75528 58%, #9c1222 100%);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 170px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 0 0 16px 16px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(142, 18, 33, 0.18);
}

.book-success__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(154deg, rgba(255,255,255,0) 13%, rgba(255,255,255,0.10) 13%, rgba(255,255,255,0.10) 31%, rgba(255,255,255,0) 31%) 0 0/100% 100%,
    linear-gradient(154deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.13) 42%, rgba(255,255,255,0.13) 57%, rgba(255,255,255,0) 57%) 0 0/100% 100%,
    linear-gradient(154deg, rgba(255,255,255,0) 64%, rgba(255,255,255,0.07) 64%, rgba(255,255,255,0.07) 76%, rgba(255,255,255,0) 76%) 0 0/100% 100%;
  opacity: .88;
}

.book-success__hero-copy {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 23px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 300px;
  text-shadow: 0 2px 12px rgba(80, 10, 20, 0.25);
}

.book-success__hero-art {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 172px;
  justify-self: end;
  align-self: end;
  margin-bottom: -5px;
  filter: drop-shadow(0 10px 20px rgba(68, 9, 16, 0.16));
}

.book-check-step--success .book-flow-card {
  margin: 0 0 12px;
  padding: 12px;
  border-top: 0;
  border-radius: 14px;
  border: 1px solid #e0e3ea;
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.72) 100%);
  box-shadow: 0 8px 22px rgba(24, 29, 38, 0.06);
}

.book-check-step--success .book-flow-card__head {
  margin-bottom: 10px;
}

.book-check-step--success .book-flow-card__label {
  font-size: 11px;
  letter-spacing: .08em;
  color: #666b75;
}

.book-check-step--success .book-flow-card__title {
  margin-bottom: 10px;
}

.book-success__panel--appointment {
  background:
    radial-gradient(circle at 92% 12%, rgba(197, 31, 49, 0.07), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 100%);
}

.book-success__panel--appointment .book-schedule__summary-card--compact {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #e7e9ef;
  background: rgba(255, 255, 255, 0.82);
}

.book-success__panel--appointment .book-schedule__summary-icon {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8f9fb 0%, #f0f2f6 100%);
  border-color: #dde2ea;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

.book-success__panel--appointment .book-schedule__summary-title {
  font-size: 16px;
  margin-bottom: 7px;
  letter-spacing: -0.015em;
}

.book-success__panel--appointment .book-schedule__summary-chip {
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 10px;
  background: #eef1f5;
  color: #454b54;
}

.book-success__panel--appointment .book-flow-card__meta {
  margin-top: 10px;
  gap: 7px;
}

.book-success__panel--appointment .book-flow-card__meta-row {
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid #e5e8ee;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: 12px;
  color: #23262d;
}

.book-success__panel--appointment .book-flow-card__meta-row svg {
  width: 15px;
  height: 15px;
  fill: #646a73;
  flex-shrink: 0;
}

.book-success__panel--appointment .book-flow-card__meta-row:first-child {
  font-weight: 800;
  color: #14161b;
}

.book-success__panel--calendar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.84) 100%);
}

.book-success__panel--calendar .book-flow-card__title {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.book-success__calendar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.book-success__calendar-btn {
  min-height: 50px;
  border: 1px solid #d5dae3;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  color: #232831;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: relative;
  box-shadow: 0 6px 14px rgba(28, 33, 44, 0.05);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.book-success__calendar-btn::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  color: #fff;
}

.book-success__calendar-btn:hover {
  transform: translateY(-1px);
  border-color: #c1c8d4;
  background: #fff;
  box-shadow: 0 10px 18px rgba(28, 33, 44, 0.08);
}

.book-success__calendar-btn:active {
  transform: translateY(0);
}

/* Legacy ::before letter chips for #bookCalendarGoogle/M365/Apple/Yahoo
   removed 2026-05-13 -- the new success-step design renders branded
   .book-success__cal-badge spans inline instead. The old rule was
   leaking "G", "M", "A", "Y!" letters next to the new badges
   (the lone-letter artifact the user flagged). */

.book-check-modal__dialog[data-step="success"] .book-check-modal__footer {
  background: linear-gradient(180deg, #f7f7f9 0%, #f0f1f4 100%);
  border-top-color: #d7dbe3;
  box-shadow: 0 -10px 22px rgba(18, 22, 29, 0.05);
}

.book-check-modal__dialog[data-step="success"] .book-check-modal__footer-step {
  align-items: center;
}

#bookSuccessDoneBtn {
  min-height: 52px;
  min-width: 132px;
  border-radius: 12px;
  border: 1px solid #C75528;
  background: linear-gradient(180deg, #C75528 0%, #C75528 100%);
  box-shadow: 0 12px 24px rgba(184, 24, 41, 0.24), inset 0 1px 0 rgba(255,255,255,0.14);
}

#bookSuccessDoneBtn:hover:not(:disabled) {
  filter: saturate(1.05) brightness(1.02);
  transform: translateY(-1px);
}

#bookSuccessDoneBtn:active:not(:disabled) {
  transform: translateY(0);
}

@keyframes bookZipPulse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (max-width: 980px) {
  .book-check-modal {
    padding: 10px;
  }

  .book-check-modal__dialog {
    max-height: calc(100vh - 20px);
  }

  .book-check-modal__hero-inner {
    padding: 22px 18px 0;
  }

  /* Mobile __close sizing removed -- element gone from markup. */

  .book-check-modal__eyebrow {
    padding-right: 42px;
    font-size: 11px;
  }

  .book-check-modal__title {
    font-size: 26px;
  }

  .book-check-modal__hero-panel {
    margin-top: 14px;
    min-height: 162px;
    grid-template-columns: 1fr 145px;
    gap: 8px;
  }

  .book-check-modal__hero-copy {
    font-size: 22px;
    max-width: 290px;
  }

  .book-check-modal__hero-art {
    max-width: 155px;
  }

  .book-check-modal__body {
    padding: 24px 16px 18px;
  }

  .book-services__location {
    margin: -24px -16px 12px;
    top: -24px;
    padding: 10px 12px;
  }

  .book-services__location-line {
    font-size: 11px;
  }

  .book-services__title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .book-services__subtitle {
    font-size: 15px;
  }

  .book-services__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .book-services__category {
    min-height: 84px;
    padding: 8px 6px;
  }

  .book-services__chip {
    font-size: 11px;
    padding: 6px 8px;
  }

  .book-services__photo-pill {
    font-size: 11px;
  }

  .book-schedule__summary {
    margin: -24px -16px 0;
    padding: 10px 12px 12px;
  }

  .book-schedule__summary-title {
    font-size: 14px;
  }

  .book-schedule__summary-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }

  .book-schedule__summary-icon {
    width: 56px;
    height: 56px;
  }

  .book-schedule__summary-chip {
    font-size: 11px;
  }

  .book-schedule__mode-btn {
    min-height: 40px;
    font-size: 13px;
  }

  .book-schedule__all-toolbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "month view"
      "today today";
    row-gap: 8px;
  }

  .book-schedule__month-nav { grid-area: month; }
  .book-schedule__today-btn { grid-area: today; justify-self: start; padding-left: 2px; }
  .book-schedule__view-toggle { grid-area: view; justify-self: end; }

  .book-schedule__calendar-cell {
    min-height: 40px;
    font-size: 13px;
  }

  .book-schedule__date-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .book-schedule__date-pill {
    min-height: 58px;
  }

  .book-schedule__tz-row,
  .book-schedule__slot {
    font-size: 12px;
  }

  .book-schedule__slot {
    min-height: 52px;
  }

  .book-check-modal__icon-wrap,
  .book-check-modal__zip-icon {
    width: 120px;
    height: 120px;
  }

  .book-check-modal__icon-wrap {
    margin-bottom: 14px;
  }

  .book-check-modal__question {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .book-check-modal__subtext {
    font-size: 15px;
    max-width: 340px;
    margin-bottom: 18px;
  }

  .book-check-modal__label {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .book-check-modal__input {
    min-height: 54px;
    padding: 13px 44px 13px 14px;
    font-size: 17px;
  }

  .book-check-modal__input-icon {
    width: 22px;
    height: 22px;
    right: 10px;
  }

  .book-check-modal__icon {
    width: 14px;
    height: 14px;
  }

  .book-check-modal__status {
    min-height: 20px;
    margin-top: 8px;
    font-size: 12px;
  }

  .book-check-modal__footer {
    padding: 14px 16px;
    gap: 10px;
  }

  .book-check-modal__call {
    font-size: 14px;
    gap: 6px;
  }

  .book-check-modal__call svg {
    width: 18px;
    height: 18px;
  }

  .book-check-modal__confirm {
    min-height: 44px;
    min-width: 108px;
    border-radius: 8px;
    font-size: 14px;
    padding: 0 16px;
  }

  .book-flow-card {
    margin: 0 -16px;
    padding: 12px 12px;
  }

  .book-flow-card__title {
    font-size: 16px;
  }

  .book-form-grid--2 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .book-field__label,
  .book-flow-card__meta-row,
  .book-field__check {
    font-size: 12px;
  }

  .book-field__input {
    min-height: 42px;
    font-size: 14px;
  }

  .book-success__hero {
    margin: 0 -16px 12px;
    grid-template-columns: 1fr 122px;
    min-height: 104px;
    padding: 0 12px;
    border-radius: 0 0 14px 14px;
  }

  .book-success__hero-copy {
    font-size: 16px;
    max-width: 190px;
  }

  .book-success__hero-art {
    max-width: 122px;
  }

  .book-success__calendar-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .book-success__calendar-btn {
    min-height: 46px;
    font-size: 14px;
  }

  .book-check-modal__dialog[data-step="success"] .book-check-modal__body {
    padding-top: 0;
  }

  .book-check-step--success .book-flow-card {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 12px;
  }

  .book-success__panel--appointment .book-schedule__summary-card--compact {
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 8px;
  }

  .book-success__panel--appointment .book-schedule__summary-icon {
    width: 54px;
    height: 54px;
  }

  .book-success__panel--appointment .book-schedule__summary-title {
    font-size: 14px;
  }

  .book-success__panel--appointment .book-flow-card__meta-row {
    min-height: 30px;
    font-size: 11px;
    padding: 0 8px;
  }

  .book-success__panel--calendar .book-flow-card__title {
    font-size: 17px;
    margin-bottom: 8px;
  }

  #bookSuccessDoneBtn {
    min-height: 48px;
    min-width: 118px;
    border-radius: 10px;
  }

  /* Global typography + density pass (mobile) */
  .book-check-modal__body {
    padding: 8px 14px 4px;
  }

  .book-check-modal__title {
    font-size: 21px;
  }

  .book-check-modal__question {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .book-check-modal__subtext {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .book-check-modal__label {
    font-size: 14px;
  }

  .book-check-modal__input {
    font-size: 17px;
  }

  .book-check-modal__status {
    font-size: 12px;
  }

  .book-check-modal__footer {
    padding: 10px 14px;
  }

  .book-check-modal__call {
    font-size: 15px;
  }

  .book-check-modal__confirm,
  .book-check-modal__footer-btn {
    min-height: 44px;
    font-size: 15px;
  }

  .book-services__location {
    margin: -8px -14px 10px;
    padding: 9px 10px;
    top: -8px;
  }

  .book-services__location-line {
    font-size: 12px;
  }

  .book-services__title {
    font-size: 17px;
    margin-bottom: 7px;
  }

  .book-services__subtitle {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .book-services__category {
    min-height: 76px;
  }

  .book-services__chip {
    font-size: 12px;
    padding: 8px 9px;
  }

  .book-schedule__summary {
    margin: -8px -14px 0;
    padding: 8px 10px 9px;
  }

  .book-schedule__summary-title {
    font-size: 14px;
  }

  .book-schedule__summary-chip {
    font-size: 10px;
  }

  .book-schedule__mode-btn {
    min-height: 40px;
    font-size: 13px;
  }

  .book-schedule__month-label {
    font-size: 14px;
  }

  .book-schedule__calendar-weekday {
    font-size: 11px;
  }

  .book-schedule__calendar-cell {
    min-height: 36px;
    font-size: 13px;
  }

  .book-schedule__date-pill {
    min-height: 48px;
  }

  .book-schedule__date-pill-date {
    font-size: 14px;
  }

  .book-schedule__tz-row {
    font-size: 13px;
  }

  .book-schedule__slot {
    min-height: 46px;
    font-size: 13px;
  }

  .book-flow-card {
    margin: 0 -14px;
    padding: 9px 10px;
  }

  .book-flow-card__head {
    margin-bottom: 6px;
  }

  .book-flow-card__title {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .book-flow-card__meta {
    margin-top: 6px;
    gap: 5px;
  }

  .book-flow-card__meta-row,
  .book-field__check {
    font-size: 13px;
  }

  .book-field__label {
    font-size: 13px;
  }

  .book-field__input {
    min-height: 42px;
    font-size: 15px;
  }
}

/* FINAL OVERRIDE: later booking steps typography/density (append-only) */
.book-check-modal__dialog[data-step="schedule"] .book-check-modal__body,
.book-check-modal__dialog[data-step="contact"] .book-check-modal__body,
.book-check-modal__dialog[data-step="address"] .book-check-modal__body,
.book-check-modal__dialog[data-step="review"] .book-check-modal__body,
.book-check-modal__dialog[data-step="success"] .book-check-modal__body {
  padding-top: 6px;
}

.book-check-modal__dialog[data-step="schedule"] .book-flow-card,
.book-check-modal__dialog[data-step="contact"] .book-flow-card,
.book-check-modal__dialog[data-step="address"] .book-flow-card,
.book-check-modal__dialog[data-step="review"] .book-flow-card {
  margin-left: -16px;
  margin-right: -16px;
  padding: 9px 12px;
}

.book-check-modal__dialog[data-step="schedule"] .book-services__title,
.book-check-modal__dialog[data-step="contact"] .book-services__title,
.book-check-modal__dialog[data-step="address"] .book-services__title,
.book-check-modal__dialog[data-step="review"] .book-services__title,
.book-check-modal__dialog[data-step="schedule"] .book-flow-card__title,
.book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
.book-check-modal__dialog[data-step="address"] .book-flow-card__title,
.book-check-modal__dialog[data-step="review"] .book-flow-card__title {
  font-size: 20px;
  margin-bottom: 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="contact"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="address"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="review"] .book-schedule__summary-title,
.book-check-modal__dialog[data-step="success"] .book-schedule__summary-title {
  font-size: 15px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="contact"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="address"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="review"] .book-schedule__summary-chip,
.book-check-modal__dialog[data-step="success"] .book-schedule__summary-chip {
  font-size: 11px;
  padding: 6px 8px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__month-label,
.book-check-modal__dialog[data-step="schedule"] .book-schedule__today-btn,
.book-check-modal__dialog[data-step="schedule"] .book-schedule__tz-row,
.book-check-modal__dialog[data-step="schedule"] .book-schedule__slot,
.book-check-modal__dialog[data-step="contact"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="address"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="review"] .book-flow-card__meta-row,
.book-check-modal__dialog[data-step="contact"] .book-field__label,
.book-check-modal__dialog[data-step="address"] .book-field__label,
.book-check-modal__dialog[data-step="review"] .book-field__label,
.book-check-modal__dialog[data-step="contact"] .book-field__check,
.book-check-modal__dialog[data-step="review"] .book-field__check {
  font-size: 13px;
}

.book-check-modal__dialog[data-step="schedule"] .book-schedule__slot {
  min-height: 46px;
}

.book-check-modal__dialog[data-step="contact"] .book-field__input,
.book-check-modal__dialog[data-step="address"] .book-field__input {
  min-height: 42px;
  font-size: 15px;
}

@media (max-width: 980px) {
  .book-check-modal__dialog[data-step="schedule"] .book-flow-card,
  .book-check-modal__dialog[data-step="contact"] .book-flow-card,
  .book-check-modal__dialog[data-step="address"] .book-flow-card,
  .book-check-modal__dialog[data-step="review"] .book-flow-card {
    margin-left: -14px;
    margin-right: -14px;
    padding: 8px 10px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-services__title,
  .book-check-modal__dialog[data-step="contact"] .book-services__title,
  .book-check-modal__dialog[data-step="address"] .book-services__title,
  .book-check-modal__dialog[data-step="review"] .book-services__title,
  .book-check-modal__dialog[data-step="schedule"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="address"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="review"] .book-flow-card__title {
    font-size: 18px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="contact"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="address"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="review"] .book-schedule__summary-title,
  .book-check-modal__dialog[data-step="success"] .book-schedule__summary-title {
    font-size: 14px;
  }
}

/* FINAL OVERRIDE: contact step density + larger typography */
@media (min-width: 981px) {
  .book-check-modal__dialog[data-step="contact"] {
    height: 610px;
  }
}

.book-check-modal__dialog[data-step="contact"] .book-check-modal__body {
  padding-bottom: 2px;
}

.book-check-modal__dialog[data-step="contact"] .book-flow-card {
  margin-left: -16px;
  margin-right: -16px;
  padding: 8px 12px;
}

.book-check-modal__dialog[data-step="contact"] .book-flow-card__label {
  font-size: 12px;
}

.book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
.book-check-modal__dialog[data-step="contact"] .book-services__title {
  font-size: 22px;
  line-height: 1.08;
  margin-bottom: 20px;
}

.book-check-modal__dialog[data-step="contact"] .book-schedule__summary-title {
  font-size: 17px;
}

.book-check-modal__dialog[data-step="contact"] .book-schedule__summary-chip {
  font-size: 12px;
  padding: 7px 9px;
}

.book-check-modal__dialog[data-step="contact"] .book-flow-card__meta-row {
  font-size: 14px;
}

.book-check-modal__dialog[data-step="contact"] .book-field__label {
  font-size: 15px;
}

.book-check-modal__dialog[data-step="contact"] .book-field__input {
  min-height: 48px;
  font-size: 17px;
  padding-left: 12px;
  padding-right: 12px;
}

.book-check-modal__dialog[data-step="contact"] .book-field__check {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.35;
}

.book-check-modal__dialog[data-step="contact"] .book-field__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.book-check-modal__dialog[data-step="contact"] .book-check-modal__footer {
  padding-top: 8px;
  padding-bottom: 8px;
}

.book-check-modal__dialog[data-step="contact"] .book-check-modal__footer-btn {
  min-height: 46px;
  font-size: 16px;
}

@media (max-width: 980px) {
  .book-check-modal__dialog[data-step="contact"] .book-flow-card {
    margin-left: -14px;
    margin-right: -14px;
    padding: 8px 10px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="contact"] .book-services__title {
    font-size: 20px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-schedule__summary-title {
    font-size: 15px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-schedule__summary-chip {
    font-size: 11px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__label {
    font-size: 14px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__input {
    min-height: 46px;
    font-size: 16px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__check {
    font-size: 14px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-check-modal__footer-btn {
    min-height: 44px;
    font-size: 15px;
  }
}

/* FINAL OVERRIDE: contact summary text larger */
.book-check-modal__dialog[data-step="contact"] #bookContactSummaryTitle {
  font-size: 19px;
  line-height: 1.08;
  font-weight: 800;
}

.book-check-modal__dialog[data-step="contact"] #bookContactSummaryChips .book-schedule__summary-chip {
  font-size: 13px;
  padding: 8px 10px;
  font-weight: 700;
}

.book-check-modal__dialog[data-step="contact"] #bookContactSummarySlot,
.book-check-modal__dialog[data-step="contact"] #bookContactSummaryLocation {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}

@media (max-width: 980px) {
  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryTitle {
    font-size: 17px;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryChips .book-schedule__summary-chip {
    font-size: 12px;
    padding: 7px 9px;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummarySlot,
  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryLocation {
    font-size: 14px;
  }
}

/* FINAL OVERRIDE: checkbox rows spacing/size */
.book-field__check {
  margin-top: 20px;
  font-size: 15px;
}

/* FINAL OVERRIDE: review step useful content instead of empty space */
@media (min-width: 981px) {
  .book-check-modal__dialog[data-step="review"] {
    height: 640px;
  }
}

.book-review__guide-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.82) 100%);
}

/* ---- Stripe Embedded Checkout container (review step) ---- */
.book-review__payment {
  margin-top: 14px;
  background: #fff;
  border: 1.5px solid #C75528;
  border-radius: 14px;
  padding: 16px 18px 18px;
  box-shadow: 0 0 0 4px rgba(199, 85, 40, 0.12);
  animation: bookReviewPaymentIn 240ms ease-out;
}
.book-review__payment[hidden] { display: none; }
@keyframes bookReviewPaymentIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.book-review__payment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.book-review__payment-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a3412;
}
.book-review__payment-cancel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #C75528;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.book-review__payment-cancel:hover { background: #fff7ed; border-color: #C75528; }
.book-review__payment-cancel svg { width: 12px; height: 12px; fill: currentColor; }
.book-review__payment-mount {
  min-height: 320px;
  border-radius: 10px;
  overflow: hidden;
}
/* Loading skeleton until Stripe mounts the iframe */
.book-review__payment-mount:empty {
  background:
    linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: bookCheckoutSkeleton 1.4s infinite ease-in-out;
}
@keyframes bookCheckoutSkeleton {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---- Refundable-deposit explainer card (review step) ---- */
.book-review__deposit-card {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3e6 100%);
  border: 1px solid #fed7aa;
}
.book-review__deposit-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.book-review__deposit-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.book-review__deposit-icon {
  width: 48px; height: 48px;
  background: #C75528;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.book-review__deposit-icon svg { width: 24px; height: 24px; fill: #fff; }
.book-review__deposit-text { min-width: 0; }
.book-review__deposit-eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #C75528;
  text-transform: uppercase;
}
.book-review__deposit-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #7c2d12;
  line-height: 1.25;
}
.book-review__deposit-body-copy {
  margin: 0;
  font-size: 13px;
  color: #7c2d12;
  line-height: 1.5;
}
.book-review__deposit-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: #C75528;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}
.book-review__deposit-amount-currency { font-size: 18px; }
.book-review__deposit-amount-value { font-size: 32px; }

.book-review__deposit-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.book-review__deposit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #9a3412;
}
.book-review__deposit-chip svg { width: 12px; height: 12px; fill: #C75528; flex-shrink: 0; }
.book-review__deposit-chip--good { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.book-review__deposit-chip--good svg { fill: #16a34a; }

@media (max-width: 560px) {
  .book-review__deposit-head { grid-template-columns: auto 1fr; }
  .book-review__deposit-amount { grid-column: 1 / -1; justify-self: end; }
  .book-review__deposit-amount-value { font-size: 28px; }
}

.book-review__guide-grid {
  display: grid;
  gap: 10px;
}

.book-review__guide-panel {
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  background: #fbfcfe;
  padding: 10px 12px;
}

.book-review__guide-title {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 800;
  color: #14171c;
}

.book-review__guide-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #2a2f36;
  font-size: 12px;
  line-height: 1.35;
}

.book-review__guide-list--steps {
  counter-reset: reviewGuide;
  list-style: none;
  padding-left: 0;
}

.book-review__guide-list--steps li {
  position: relative;
  padding-left: 24px;
}

.book-review__guide-list--steps li::before {
  counter-increment: reviewGuide;
  content: counter(reviewGuide);
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d9601f;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.book-review__guide-call {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: #C75528;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.book-review__guide-call:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  .book-review__guide-panel {
    padding: 9px 10px;
  }

  .book-review__guide-title {
    font-size: 14px;
    margin-bottom: 7px;
  }

  .book-review__guide-list {
    font-size: 12px;
    gap: 5px;
  }

  .book-review__guide-call {
    font-size: 12px;
  }
}

/* FINAL OVERRIDE: contact step address block */
.book-contact__address-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #dfe3ea;
}

.book-contact__address-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #5f6671;
}

@media (max-width: 980px) {
  .book-contact__address-block {
    margin-top: 14px;
    padding-top: 12px;
  }

  .book-contact__address-note {
    font-size: 11px;
    margin-top: 7px;
  }
}

/* FINAL OVERRIDE: contact step typography back to schedule scale */
@media (min-width: 981px) {
  .book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="contact"] .book-services__title {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 16px;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryTitle {
    font-size: 17px;
    line-height: 1.12;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryChips .book-schedule__summary-chip {
    font-size: 12px;
    padding: 7px 9px;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummarySlot,
  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryLocation {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__label {
    font-size: 14px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__input {
    min-height: 46px;
    font-size: 15px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__check {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.3;
  }

  .book-check-modal__dialog[data-step="contact"] .book-check-modal__footer-btn {
    font-size: 15px;
  }
}

/* FINAL OVERRIDE: contact step compact layout so everything fits */
@media (min-width: 981px) {
  .book-check-modal__dialog[data-step="contact"] {
    height: 590px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-check-modal__body {
    padding-top: 6px;
    padding-bottom: 0;
    gap: 8px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-flow-card {
    margin-left: -14px;
    margin-right: -14px;
    padding: 6px 10px;
    border-radius: 10px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-flow-card__head {
    margin-bottom: 6px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-flow-card__label {
    font-size: 11px;
    letter-spacing: 0.07em;
  }

  .book-check-modal__dialog[data-step="contact"] .book-schedule__summary-card {
    gap: 10px;
    align-items: center;
  }

  .book-check-modal__dialog[data-step="contact"] .book-schedule__summary-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 10px;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryTitle {
    font-size: 16px;
    line-height: 1.08;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryChips {
    gap: 6px;
    margin-top: 4px;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryChips .book-schedule__summary-chip {
    font-size: 11px;
    line-height: 1.1;
    padding: 6px 8px;
    border-radius: 8px;
  }

  .book-check-modal__dialog[data-step="contact"] #bookContactSummarySlot,
  .book-check-modal__dialog[data-step="contact"] #bookContactSummaryLocation {
    font-size: 13px;
    line-height: 1.2;
    margin-top: 2px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="contact"] .book-services__title {
    font-size: 18px;
    line-height: 1.08;
    margin-bottom: 12px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-form-grid {
    gap: 8px 10px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__label {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__input {
    min-height: 42px;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-contact__address-block {
    margin-top: 10px;
    padding-top: 8px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-contact__address-note {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.25;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__check {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.2;
    gap: 8px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-field__check input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-flow-card__error {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.2;
  }

  .book-check-modal__dialog[data-step="contact"] .book-check-modal__footer {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .book-check-modal__dialog[data-step="contact"] .book-check-modal__footer-btn {
    min-height: 40px;
    font-size: 14px;
    padding: 0 16px;
  }
}

@media (min-width: 981px) {
  .book-check-modal__dialog[data-step="contact"] .book-field__check {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.2;
    gap: 8px;
  }
}

@media (min-width: 981px) {
  .book-check-modal__dialog[data-step="contact"] .book-field__label {
    font-size: 13px;
    margin-bottom: 0;
  }
}

.book-success__panel--calendar .book-flow-card__title {
  font-size: 15px;
  letter-spacing: -0.02em;
}

.book-check-modal__dialog[data-step="success"] .book-check-modal__body {
  padding-top: 0 !important;
}

/* FINAL OVERRIDE: contact address validation message placement/reserved space */
.book-contact__address-error-slot {
  min-height: 18px;
  margin-top: 4px;
}

.book-contact__address-error-slot .book-flow-card__error {
  margin-top: 0;
}

@media (max-width: 980px) {
  .book-contact__address-error-slot {
    min-height: 28px;
    margin-top: 5px;
  }
}

@media (min-width: 981px) {
  .book-check-modal__dialog[data-step="contact"] .book-flow-card__title,
  .book-check-modal__dialog[data-step="contact"] .book-services__title {
    font-size: 15px;
    line-height: 1.08;
    margin-bottom: 10px;
  }
}

/* FINAL OVERRIDE: mobile viewport + safe-area (iPhone dynamic/layered UI) */
@media (max-width: 980px) {
  .book-check-modal {
    --book-safe-top: env(safe-area-inset-top, 0px);
    --book-safe-right: env(safe-area-inset-right, 0px);
    --book-safe-bottom: env(safe-area-inset-bottom, 0px);
    --book-safe-left: env(safe-area-inset-left, 0px);
    --book-mobile-vh: var(--dava-book-modal-vvh, 100dvh);
    --book-mobile-edge-y: 4px;
    --book-mobile-edge-x: 10px;
    inset: auto;
    top: var(--dava-book-modal-vvo-top, 0px);
    left: var(--dava-book-modal-vvo-left, 0px);
    width: var(--dava-book-modal-vvw, 100vw);
    height: var(--dava-book-modal-vvh, 100dvh);

    padding-top: calc(var(--book-mobile-edge-y) + var(--book-safe-top));
    padding-right: calc(var(--book-mobile-edge-x) + var(--book-safe-right));
    padding-bottom: calc(var(--book-mobile-edge-y) + var(--book-safe-bottom));
    padding-left: calc(var(--book-mobile-edge-x) + var(--book-safe-left));
    align-items: start;
    justify-items: center;
  }

  /* Mobile __backdrop blur override removed -- backdrop element gone. */

  .book-check-modal__dialog {
    width: min(560px, calc(100vw - (2 * var(--book-mobile-edge-x)) - var(--book-safe-left) - var(--book-safe-right)));
    max-width: min(560px, calc(100vw - (2 * var(--book-mobile-edge-x)) - var(--book-safe-left) - var(--book-safe-right)));
    height: min(700px, calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom)));
    max-height: calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom));
    overscroll-behavior: contain;
    transition: margin-top .18s ease;
  }

  .book-check-modal__dialog[data-step="zip"] {
    height: calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom));
    max-height: calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom));
  }

  .book-check-modal__dialog[data-step="zip"] {
    height: min(560px, calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom)));
  }

  .book-check-modal__hero-inner {
    padding-left: calc(18px + max(0px, calc(var(--book-safe-left) - 2px)));
    padding-right: calc(18px + max(0px, calc(var(--book-safe-right) - 2px)));
  }

  .book-check-modal__body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(88px + var(--book-safe-bottom));
  }

  .book-check-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
    padding-left: calc(14px + max(0px, calc(var(--book-safe-left) - 2px)));
    padding-right: calc(14px + max(0px, calc(var(--book-safe-right) - 2px)));
    padding-bottom: calc(10px + var(--book-safe-bottom));
    box-shadow: 0 -1px 0 rgba(216, 217, 222, 0.95);
  }
}

/* Short-height phones / landscape iPhone: compact modal density without changing design language */
@media (max-width: 980px) and (max-height: 780px) {
  .book-check-modal {
    --book-mobile-edge-y: 4px;
    --book-mobile-edge-x: 8px;
  }

  .book-check-modal__hero-inner {
    padding-top: 16px;
  }

  .book-check-modal__hero-panel {
    margin-top: 8px;
    min-height: 118px;
    grid-template-columns: 1fr 122px;
  }

  .book-check-modal__hero-copy {
    font-size: 18px;
    max-width: 220px;
  }

  .book-check-modal__hero-art {
    max-width: 126px;
  }

  .book-check-modal__body {
    padding-top: 10px;
    padding-bottom: 4px;
  }

  .book-check-modal__icon-wrap,
  .book-check-modal__zip-icon {
    width: 88px;
    height: 88px;
  }

  .book-check-modal__icon-wrap {
    margin-bottom: 6px;
  }

  .book-check-modal__question {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .book-check-modal__subtext {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .book-check-modal__footer {
    gap: 8px;
    padding-top: 8px;
  }

  .book-check-modal__confirm,
  .book-check-modal__footer-btn {
    min-height: 42px;
    font-size: 14px;
  }

  .book-check-modal__call {
    font-size: 13px;
  }

  .book-flow-card {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .book-flow-card__title {
    margin-bottom: 6px;
  }
}

@media (max-width: 980px) and (max-height: 700px) {
  /* __close sizing removed -- element gone from markup. */

  .book-check-modal__eyebrow {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .book-check-modal__title {
    font-size: 20px;
  }

  .book-check-modal__hero-panel {
    min-height: 92px;
    grid-template-columns: 1fr 102px;
  }

  .book-check-modal__hero-copy {
    font-size: 16px;
    max-width: 170px;
  }

  .book-check-modal__hero-art {
    max-width: 104px;
  }

  .book-check-modal__body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .book-flow-card {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .book-check-modal__dialog[data-step="schedule"] .book-check-modal__body,
  .book-check-modal__dialog[data-step="contact"] .book-check-modal__body,
  .book-check-modal__dialog[data-step="review"] .book-check-modal__body,
  .book-check-modal__dialog[data-step="success"] .book-check-modal__body {
    padding-top: 4px;
  }

  .book-check-modal__dialog[data-step="zip"] .book-check-modal__body {
    padding-top: 8px;
  }
}

/* Mobile keyboard-open state (iPhone Safari / dynamic glass UI):
   prioritize visible input area over hero/footer chrome */
@media (max-width: 980px) {
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] {
    height: calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom));
    max-height: calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom));
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__hero-inner {
    padding-top: 10px;
    padding-bottom: 0;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__eyebrow {
    font-size: 10px;
    margin-bottom: 2px;
    opacity: .94;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__title {
    font-size: 18px;
    line-height: 1.05;
    padding-right: 38px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__hero-panel {
    display: none;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__body {
    padding-top: 10px;
    padding-bottom: 8px;
    scroll-padding-bottom: 16px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__icon-wrap {
    display: none;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__question {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__subtext {
    font-size: 12px;
    margin-bottom: 8px;
    max-width: 100%;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__form-block {
    max-width: 100%;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__input {
    min-height: 48px;
    font-size: 18px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="zip"] .book-check-modal__footer {
    display: flex;
  }
}

/* Services step polish: category cards + slide-up subservices */
.book-check-modal__dialog[data-step="services"] {
  height: 650px;
}

.book-check-modal__dialog[data-step="services"] .book-check-modal__hero-panel {
  display: none;
}

.book-check-modal__dialog[data-step="services"] .book-check-modal__hero-inner {
  padding-bottom: 12px;
}

.book-check-modal__dialog[data-step="services"] .book-check-modal__body {
  background: #f3f4f6;
  padding-top: 10px;
}

.book-check-modal__dialog[data-step="services"] .book-services__location {
  margin: -10px -18px 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #dfe3ea;
  background: #f7f8fb;
  position: sticky;
  top: -10px;
  z-index: 3;
}

.book-check-modal__dialog[data-step="services"] .book-services__pin {
  width: 12px;
  height: 12px;
  fill: #0b8d56;
}

.book-check-modal__dialog[data-step="services"] .book-services__location-line {
  font-size: 14px;
  text-transform: none;
  color: #0e5f3f;
  font-weight: 700;
  letter-spacing: 0;
  /* Truncate with ellipsis so a long city/state string can't push
     into the red "Cambiar CP" / "Change ZIP" button on the right.
     The parent flex container uses justify-content: space-between,
     so without min-width: 0 + overflow rules the inner span won't
     respect the available space. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-check-modal__dialog[data-step="services"] .book-services__location-main {
  /* The "main" container holds the green pin + location-line + check
     mark. It must flex-grow and respect min-width: 0 so the truncation
     above actually triggers (otherwise flex items default to
     min-width: auto = min-content, which won't shrink below the
     longest word). */
  flex: 1 1 auto;
  min-width: 0;
}

.book-check-modal__dialog[data-step="services"] .book-services__edit {
  flex-shrink: 0;
  white-space: nowrap;
}

.book-check-modal__dialog[data-step="services"] .book-services__location-check {
  width: 18px;
  height: 18px;
  background: #16a34a;
}

.book-check-modal__dialog[data-step="services"] .book-services__edit {
  width: auto;
  height: auto;
  min-height: 32px;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  color: #d9601f;
  font-size: 17px;
  font-weight: 700;
}

.book-check-modal__dialog[data-step="services"] .book-services__title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.08;
  font-weight: 800;
  color: #111827;
}

.book-services__intro {
  margin: 0 0 12px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.35;
}

.book-check-modal__dialog[data-step="services"] .book-services__categories {
  gap: 12px;
}

.book-check-modal__dialog[data-step="services"] .book-services__category {
  min-height: 176px;
  padding: 14px 12px 12px;
  border: 1px solid #d7dce4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  align-items: stretch;
  gap: 8px;
}

.book-check-modal__dialog[data-step="services"] .book-services__category:hover {
  border-color: #b8c2d3;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09);
}

.book-check-modal__dialog[data-step="services"] .book-services__category.is-selected {
  border-color: #C75528;
  box-shadow: 0 12px 22px rgba(190, 31, 48, 0.16);
}

.book-check-modal__dialog[data-step="services"] .book-services__category.is-selected::before,
.book-check-modal__dialog[data-step="services"] .book-services__category.is-selected::after {
  content: none;
}

.book-services__category-media {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-services__category-image {
  max-width: 126px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.book-services__category-content {
  display: grid;
  gap: 3px;
  text-align: center;
}

.book-services__category-title {
  display: block;
  color: #111827;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 800;
}

.book-services__category-subtitle {
  display: block;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
}

.book-check-modal__dialog[data-step="services"] .book-services__subservices {
  margin-top: 14px;
  border: 1px solid #dbe1ea;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
  padding: 0 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(28px);
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.28s ease;
  pointer-events: none;
}

.book-check-modal__dialog[data-step="services"] .book-services__subservices.is-visible {
  max-height: 1400px;
  opacity: 1;
  padding: 14px;
  transform: translateY(0);
  pointer-events: auto;
}

.book-check-modal__dialog[data-step="services"] .book-services__subtitle {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 700;
}

.book-check-modal__dialog[data-step="services"] .book-services__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.book-check-modal__dialog[data-step="services"] .book-services__chip {
  width: 100%;
  min-height: 58px;
  border-radius: 10px;
  border: 1px solid #d1d8e4;
  background: #fff;
  color: #334155;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
}

.book-check-modal__dialog[data-step="services"] .book-services__chip.is-selected {
  border-color: #d9601f;
  background: #fff2f4;
  color: #a64720;
}

.book-services__chip-media {
  width: 56px;
  height: 42px;
  border-radius: 7px;
  background: #f4f6fb;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
}

.book-services__chip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-services__chip-label {
  min-width: 0;
  display: block;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
}

@media (max-width: 980px) {
  .book-check-modal__dialog[data-step="services"] {
    height: calc(var(--dava-book-modal-vvh, 100vh) - 16px);
  }

  .book-check-modal__dialog[data-step="services"] .book-services__title {
    font-size: 19px;
  }

  .book-services__intro {
    font-size: 14px;
  }

  .book-check-modal__dialog[data-step="services"] .book-services__category {
    min-height: 154px;
    padding: 11px 10px;
  }

  .book-services__category-image {
    max-width: 100px;
    max-height: 58px;
  }

  .book-services__category-title {
    font-size: 16px;
  }

  .book-services__category-subtitle {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .book-check-modal__dialog[data-step="services"] .book-services__title {
    font-size: 18px;
  }

  .book-check-modal__dialog[data-step="services"] .book-services__location-line {
    font-size: 13px;
  }

  .book-check-modal__dialog[data-step="services"] .book-services__edit {
    font-size: 14px;
  }

  .book-check-modal__dialog[data-step="services"] .book-services__categories {
    gap: 10px;
  }

  .book-check-modal__dialog[data-step="services"] .book-services__category {
    min-height: 145px;
  }

  .book-services__category-media {
    height: 60px;
  }

  .book-services__category-title {
    font-size: 15px;
  }

  .book-check-modal__dialog[data-step="services"] .book-services__chips {
    grid-template-columns: 1fr;
  }

  .book-services__chip-media {
    width: 54px;
    height: 40px;
  }
}

/* Mobile keyboard/input stability pass */
@media (max-width: 980px) {
  /* Prevent iOS auto-zoom on text entry fields */
  .book-check-modal .book-check-modal__input,
  .book-check-modal .book-field__input {
    font-size: 16px !important;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"],
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"],
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] {
    height: calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom));
    max-height: calc(var(--book-mobile-vh) - (2 * var(--book-mobile-edge-y)) - var(--book-safe-top) - var(--book-safe-bottom));
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-check-modal__hero-inner,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-check-modal__hero-inner,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] .book-check-modal__hero-inner {
    padding-top: 10px;
    padding-bottom: 2px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-check-modal__eyebrow,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-check-modal__eyebrow,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] .book-check-modal__eyebrow {
    display: none;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-check-modal__title,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-check-modal__title,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] .book-check-modal__title {
    font-size: 17px;
    line-height: 1.1;
    padding-right: 42px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-check-modal__body,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-check-modal__body,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] .book-check-modal__body {
    padding-top: 8px;
    padding-bottom: 8px;
    scroll-padding-bottom: calc(112px + var(--book-safe-bottom));
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-flow-card,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-flow-card,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] .book-flow-card {
    margin-left: -12px;
    margin-right: -12px;
    padding: 8px 10px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-form-grid--2,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-form-grid--2 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-check-modal__footer,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-check-modal__footer,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] .book-check-modal__footer {
    padding-top: 7px;
    padding-bottom: calc(6px + var(--book-safe-bottom));
    gap: 8px;
  }

  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-check-modal__footer-btn,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-check-modal__footer-btn,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] .book-check-modal__footer-btn,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="contact"] .book-check-modal__confirm,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="address"] .book-check-modal__confirm,
  .book-check-modal.is-mobile-keyboard-open .book-check-modal__dialog[data-step="review"] .book-check-modal__confirm {
    min-height: 42px;
    font-size: 15px;
  }
}


/* =====================================================================
   /book/* PAGE-FLOW CHROME (Variant 3 design, Stage 5.2)
   Scoped under .book-flow-shell so nothing leaks into the modal.

   Renders the Stage-1 pill indicator as a horizontal numbered-circle
   stepper sitting above a white card; the card hosts each step's
   form content (the existing .book-check-modal__* classes already
   assume a white interior, so the per-step Blades work unchanged).

   - Mobile: stepper labels hide, only circles + connector visible.
   - Desktop: labels show under each circle.
   - Past steps show a check icon, current step is filled with the
     step number, future steps are outlined with the dimmed number.
   ===================================================================== */
.book-flow-shell {
  color: rgba(255, 255, 255, 0.85);
}

.bp-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 28px;
  padding: 0 4px;
  list-style: none;
}

.bp-stepper__step {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Connector line between this step and the next.
   Sits behind the circles (z-index: 0 vs circle's z-index: 1). */
.bp-stepper__step::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 0;
}
.bp-stepper__step:last-child::after {
  display: none;
}
.bp-stepper__step.is-past::after {
  background: var(--brand-orange, #C75528);
}

.bp-stepper__circle {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}
.bp-stepper__step.is-current .bp-stepper__circle {
  background: var(--brand-orange, #C75528);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(199, 85, 40, 0.18);
}
.bp-stepper__step.is-past .bp-stepper__circle {
  background: var(--brand-orange, #C75528);
  color: #fff;
}
.bp-stepper__check {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.bp-stepper__label {
  font-size: 11px;
  margin-top: 8px;
  text-align: center;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.55);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-stepper__step.is-current .bp-stepper__label {
  color: #fff;
  font-weight: 600;
}
.bp-stepper__step.is-past .bp-stepper__label {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 640px) {
  .bp-stepper__label {
    display: none;
  }
  .bp-stepper {
    padding: 0 8px;
  }
}

/* White booking card. The per-step Blades render their content inside
   this card; book-modal.css already styles the form fields for a
   white interior so there is no per-step CSS migration needed. */
.bp-card {
  background: #ffffff;
  color: #111827;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  padding: 32px;
}

@media (max-width: 640px) {
  .bp-card {
    padding: 20px;
    border-radius: 14px;
  }
}

/* Inside the card the booking-shell footer ('Back to start' link)
   needs a darker color now -- it was previously light-on-dark
   shell-bg, but it now sits below the white card on the dark page
   background, so the light-on-dark coloring still applies. The
   anchor stays where it is in the DOM. */



/* /book/schedule: visual disabled state for already-booked slots
   (Stage 5.3a, 2026-05-13). The .is-booked class fires alongside
   :disabled so we can target either; visitor sees the slot exists
   but cannot pick it. The Booked sub-label sits inside the button
   via inline style for brevity. */
.book-schedule__slot.is-booked,
.book-schedule__slot:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
  pointer-events: none;
}
.book-schedule__slot.is-booked:hover,
.book-schedule__slot:disabled:hover {
  background: #f3f4f6;
  border-color: #e5e7eb;
}



/* /book/success page redesign (Variant 3 mockup, Stage 5.3, 2026-05-13).
   Big check circle + confirmation headline + booking-reference panel
   + add-to-calendar grid + return-home button. Scoped under
   .bp-success (which sits inside the .bp-card on the success step
   Blade). */
.bp-success {
  text-align: center;
}
.bp-success__check {
  display: flex;
  justify-content: center;
  margin: 8px 0 20px;
}
.bp-success__check svg {
  width: 96px;
  height: 96px;
}
.bp-success__heading {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.bp-success__subheading {
  margin: 0 0 28px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.5;
}

.bp-success__panel {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 auto 16px;
  max-width: 480px;
  text-align: left;
}
.bp-success__panel--appointment {
  background: #fff7ed; /* soft brand-orange tint so it pops against the booking-ref panel */
  border-color: #fed7aa;
}
.bp-success__panel-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 6px;
}
.bp-success__panel-value {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.02em;
}
.bp-success__panel-value--service {
  font-size: 16px;
  font-weight: 600;
}
.bp-success__panel-meta {
  font-size: 13px;
  color: #4b5563;
  margin-top: 6px;
  line-height: 1.4;
}

.bp-success__calendar {
  margin: 24px auto 0;
  max-width: 480px;
  text-align: left;
}
.bp-success__calendar-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}
.bp-success__calendar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.bp-success__calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.bp-success__calendar-btn:hover {
  background: #fef3e6;
  border-color: #C75528;
}

.bp-success__actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.bp-success__return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: #C75528;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .12s ease;
}
.bp-success__return:hover {
  background: #a64720;
}

@media (max-width: 640px) {
  .bp-success__calendar-grid {
    grid-template-columns: 1fr 1fr;
  }
  .bp-success__panel,
  .bp-success__calendar {
    max-width: none;
  }
}



/* =====================================================================
   /book/* DESIGN-SYSTEM POLISH (Stage 5.5, 2026-05-13)
   Comprehensive visual elevation pass: card chrome, form fields,
   buttons, headings, stepper, summary cards. Mobile-first
   (overrides desktop where the breakpoint is too tight).

   All rules scoped under .book-flow-shell so nothing changes inside
   the modal (which will be removed at Stage 8 anyway).
   ===================================================================== */

/* --------- CARD: elevated, accent top-stripe -------- */
.book-flow-shell .bp-card {
  padding: 40px;
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 40px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient accent across the very top of every booking card */
.book-flow-shell .bp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #C75528 0%, #d9601f 65%, #efb98f 100%);
  pointer-events: none;
}

@media (max-width: 640px) {
  .book-flow-shell .bp-card {
    padding: 28px 20px;
    border-radius: 16px;
  }
}

/* --------- STEPPER: bigger circles, current-step pop --------- */
.book-flow-shell .bp-stepper {
  margin: 0 0 32px;
}
.book-flow-shell .bp-stepper__circle {
  width: 32px;
  height: 32px;
  font-size: 13px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.book-flow-shell .bp-stepper__step::after {
  top: 15px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
}
.book-flow-shell .bp-stepper__step.is-current .bp-stepper__circle {
  box-shadow: 0 0 0 5px rgba(199, 85, 40, 0.22);
  transform: scale(1.08);
}
.book-flow-shell .bp-stepper__check {
  width: 16px;
  height: 16px;
}
.book-flow-shell .bp-stepper__label {
  font-size: 12px;
  margin-top: 10px;
  max-width: 92px;
}

@media (max-width: 640px) {
  .book-flow-shell .bp-stepper__circle {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .book-flow-shell .bp-stepper__step::after {
    top: 12px;
    left: calc(50% + 13px);
    right: calc(-50% + 13px);
  }
  .book-flow-shell .bp-stepper__check {
    width: 13px;
    height: 13px;
  }
}

/* --------- HEADINGS: bigger, more impactful --------- */
.book-flow-shell .book-check-modal__question,
.book-flow-shell .book-services__title,
.book-flow-shell .book-flow-card__title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.book-flow-shell .book-check-modal__subtext,
.book-flow-shell .book-services__intro {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* --------- FORM FIELDS: taller, rounded, focus state --------- */
.book-flow-shell .book-field__input,
.book-flow-shell .book-check-modal__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  color: #111827;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.book-flow-shell .book-field__input:hover:not(:focus),
.book-flow-shell .book-check-modal__input:hover:not(:focus) {
  border-color: #d1d5db;
}
.book-flow-shell .book-field__input:focus,
.book-flow-shell .book-field__input:focus-visible,
.book-flow-shell .book-check-modal__input:focus,
.book-flow-shell .book-check-modal__input:focus-visible {
  outline: none;
  border-color: #C75528;
  box-shadow: 0 0 0 4px rgba(199, 85, 40, 0.14);
}

.book-flow-shell .book-field__label,
.book-flow-shell .book-check-modal__label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  display: block;
  letter-spacing: 0.01em;
}

/* ZIP input -- centered, bigger, prominent */
.book-flow-shell .book-check-modal__input-wrap .book-check-modal__input {
  height: 60px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 0 16px;
}

/* --------- BUTTONS: substantial CTAs --------- */
.book-flow-shell .book-check-modal__confirm,
.book-flow-shell .book-check-modal__footer-btn--solid {
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: 0.02em;
  transition: background-color .15s ease, transform .08s ease, box-shadow .18s ease;
}
.book-flow-shell .book-check-modal__confirm:hover:not(:disabled),
.book-flow-shell .book-check-modal__footer-btn--solid:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(199, 85, 40, 0.32);
  transform: translateY(-1px);
}
.book-flow-shell .book-check-modal__confirm:active:not(:disabled),
.book-flow-shell .book-check-modal__footer-btn--solid:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(199, 85, 40, 0.20);
}

/* Ghost / outlined buttons for Cancel / Back */
.book-flow-shell .book-check-modal__footer-btn--ghost {
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  color: #4b5563;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.book-flow-shell .book-check-modal__footer-btn--ghost:hover {
  border-color: #C75528;
  color: #C75528;
}

@media (max-width: 640px) {
  .book-flow-shell .book-check-modal__confirm,
  .book-flow-shell .book-check-modal__footer-btn--solid,
  .book-flow-shell .book-check-modal__footer-btn--ghost {
    width: 100%;
    min-height: 48px;
  }
}

/* --------- LOCATION PILL --------- */
.book-flow-shell .book-services__location {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 24px;
}
.book-flow-shell .book-services__location-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.book-flow-shell .book-services__location-line {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-flow-shell .book-services__pin {
  width: 18px;
  height: 18px;
  fill: #6b7280;
  flex-shrink: 0;
}
.book-flow-shell .book-services__location-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #10b981;
  border-radius: 50%;
}
.book-flow-shell .book-services__location-check svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}
.book-flow-shell .book-services__edit {
  font-size: 13px;
  font-weight: 600;
  color: #C75528;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.book-flow-shell .book-services__edit:hover {
  text-decoration: underline;
}

/* --------- CATEGORY CARDS: polish --------- */
.book-flow-shell .book-services__categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.book-flow-shell .book-services__category {
  padding: 18px 14px;
  border-radius: 14px;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  cursor: pointer;
}
.book-flow-shell .book-services__category:hover {
  border-color: #C75528;
  box-shadow: 0 4px 16px rgba(199, 85, 40, 0.10);
  transform: translateY(-1px);
}
.book-flow-shell .book-services__category.is-selected {
  border-color: #C75528;
  background: #fff7ed;
  box-shadow: 0 0 0 3px rgba(199, 85, 40, 0.14);
}
.book-flow-shell .book-services__category-image {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.book-flow-shell .book-services__category-label {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-top: 8px;
}
.book-flow-shell .book-services__category-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* --------- SUBSERVICE CHIPS --------- */
.book-flow-shell .book-services__subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 24px 0 12px;
}
.book-flow-shell .book-services__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.book-flow-shell .book-services__chip:hover {
  border-color: #d9601f;
  background: #fffaf5;
}
.book-flow-shell .book-services__chip.is-selected {
  border-color: #C75528;
  background: #fff7ed;
}
.book-flow-shell .book-services__chip-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.book-flow-shell .book-services__chip-label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

/* --------- SCHEDULE: date strip + slots --------- */
.book-flow-shell .book-schedule__summary {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.book-flow-shell .book-schedule__summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.book-flow-shell .book-schedule__summary-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6b7280;
}
.book-flow-shell .book-schedule__summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.book-flow-shell .book-schedule__summary-icon {
  width: 44px;
  height: 44px;
  background: #fff7ed;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.book-flow-shell .book-schedule__summary-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-flow-shell .book-schedule__summary-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.book-flow-shell .book-schedule__meta-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 10px;
}
.book-flow-shell .book-schedule__tz-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f3f4f6;
  border-radius: 999px;
  font-size: 13px;
  color: #4b5563;
}
.book-flow-shell .book-schedule__tz-row svg {
  width: 14px;
  height: 14px;
  fill: #6b7280;
}

.book-flow-shell .book-schedule__date-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.book-flow-shell .book-schedule__date-pill {
  flex-shrink: 0;
  min-width: 60px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  scroll-snap-align: start;
}
.book-flow-shell .book-schedule__date-pill:hover {
  border-color: #d9601f;
}
.book-flow-shell .book-schedule__date-pill.is-selected {
  border-color: #C75528;
  background: #C75528;
  color: #ffffff;
}
.book-flow-shell .book-schedule__date-pill-weekday {
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
}
.book-flow-shell .book-schedule__date-pill-num {
  font-size: 18px;
  font-weight: 700;
}

.book-flow-shell .book-schedule__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.book-flow-shell .book-schedule__slot {
  width: 100%;
  padding: 12px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.book-flow-shell .book-schedule__slot:hover:not(:disabled):not(.is-booked) {
  border-color: #C75528;
  background: #fffaf5;
}
.book-flow-shell .book-schedule__slot.is-selected {
  border-color: #C75528;
  background: #fff7ed;
  color: #C75528;
}

/* --------- FLOW CARDS (contact / address / review summaries) --------- */
.book-flow-shell .book-flow-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
}
.book-flow-shell .book-flow-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}
.book-flow-shell .book-flow-card__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6b7280;
}
.book-flow-shell .book-flow-card__body {
  padding: 16px;
}
.book-flow-shell .book-flow-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.book-flow-shell .book-flow-card__meta-row {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.4;
}
.book-flow-shell .book-flow-card__contact-name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

/* --------- CONTACT FORM 2-col grid --------- */
.book-flow-shell .book-form-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}
.book-flow-shell .book-form-grid--2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .book-flow-shell .book-form-grid--2 {
    grid-template-columns: 1fr;
  }
}
.book-flow-shell .book-field {
  display: flex;
  flex-direction: column;
}
.book-flow-shell .book-field__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.5;
  cursor: pointer;
}
.book-flow-shell .book-field__check input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #C75528;
}
.book-flow-shell .book-field__check a {
  color: #C75528;
  text-decoration: underline;
}

/* --------- REVIEW GUIDE PANELS --------- */
.book-flow-shell .book-review__guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .book-flow-shell .book-review__guide-grid {
    grid-template-columns: 1fr;
  }
}
.book-flow-shell .book-review__guide-panel {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}
.book-flow-shell .book-review__guide-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 10px;
}
.book-flow-shell .book-review__guide-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}
.book-flow-shell .book-review__guide-list li + li {
  margin-top: 6px;
}
.book-flow-shell .book-review__guide-call {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #C75528;
  text-decoration: none;
}
.book-flow-shell .book-review__guide-call:hover {
  text-decoration: underline;
}


/* /book/zip is a single-input entry page -- the truck icon centers
   horizontally in the card via flex, but the heading + subtext + form
   would otherwise be left-aligned and visually offset (Stage 5.5 hot-
   fix, 2026-05-13). Center the whole step + constrain the form column
   for visual balance. */
.book-flow-shell .book-check-step--zip {
  text-align: center;
}
.book-flow-shell .book-check-step--zip .book-check-modal__form-block {
  max-width: 360px;
  margin: 24px auto 0;
}
.book-flow-shell .book-check-step--zip .book-check-modal__label {
  text-align: center;
}


/* =====================================================================
   /book PAGE MODE -- modal rendered inline on a real URL (Stage 7
   attempt, 2026-05-13). When .book-check-modal carries the
   --as-page modifier, neutralize the modal-overlay chrome so the
   dialog lays out as a flat card inside the page flow.
   ===================================================================== */

.book-check-modal--as-page {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  height: auto !important;
  width: auto !important;
  z-index: auto !important;
  display: block !important;
  pointer-events: auto !important;
}

/* .book-check-modal--as-page .book-check-modal__backdrop { display: none }
   override removed -- backdrop element gone from markup, override moot. */

.book-check-modal--as-page .book-check-modal__dialog {
  /* Preserve the modal's fixed 560x700 dimensions on desktop so the
     dialog stays a compact card and the internal __body scrolls when
     a step overflows. Original .book-check-modal__dialog rule sets
     width: 560px / height: 700px / display: grid with rows
     "auto minmax(0, 1fr) auto" -- combined with
     .book-check-modal__body { overflow: auto } this gives the body
     its own scroll. On mobile max-width/max-height clamp to viewport.

     Only override what page-mode actually needs: drop the fixed
     positioning + the centering transform, replace with a top/bottom
     page margin + a page-friendly shadow (the modal's heavy shadow
     was for a dark backdrop; on the page-content background a
     lighter shadow reads better). */
  position: static !important;
  transform: none !important;
  margin: 32px auto !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 40px rgba(0, 0, 0, 0.22) !important;
}

/* --as-page __close override removed -- close button gone from markup.
   body.book-page-context-active / html.book-page-context-active scroll-
   unlock fallback also removed -- the class was a defensive override
   for a hypothetical setOpen(true) call that no longer exists (setOpen
   is a no-op since Stage 2), and a grep across public_html + resources
   showed the class was never set by any JS or Blade code. */


/* =====================================================================
   /book SUCCESS STEP REDESIGN (2026-05-13)
   Big check circle + 4-col metadata + booking-ref panel + 3 action
   buttons + Need-help footer. Scoped under .book-success so it
   applies in both modal-overlay mode and /book page mode.
   ===================================================================== */
.book-check-step--success.book-success {
  text-align: center;
  padding: 8px 4px 4px;
}

/* Check circle with sparkles */
.book-success__check {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}
.book-success__check-svg {
  width: 120px;
  height: 120px;
}
.book-success__check-svg .book-success__sparkles path,
.book-success__check-svg .book-success__sparkles circle {
  transform-origin: center;
  animation: book-success-sparkle 2.4s ease-in-out infinite;
}
.book-success__check-svg .book-success__sparkles path:nth-child(2n) { animation-delay: -0.4s; }
.book-success__check-svg .book-success__sparkles path:nth-child(3n) { animation-delay: -0.8s; }
.book-success__check-svg .book-success__sparkles path:nth-child(4n) { animation-delay: -1.2s; }
@keyframes book-success-sparkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Heading + subheading */
.book-success__heading {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.book-success__subheading {
  margin: 0 0 18px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

/* 4-column metadata grid */
.book-success__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  background: #f9fafb;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  margin: 0 0 14px;
}
@media (max-width: 640px) {
  .book-success__grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 8px;
    padding: 12px;
  }
}

.book-success__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}
.book-success__cell-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fef3e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.book-success__cell-icon svg {
  width: 18px;
  height: 18px;
  fill: #C75528;
}
.book-success__cell-label {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  text-transform: none;
  letter-spacing: 0;
}
.book-success__cell-value {
  font-size: 11px;
  color: #4b5563;
  line-height: 1.35;
  word-break: break-word;
  hyphens: auto;
}
.book-success__cell-value-sub {
  font-size: 10.5px;
  color: #6b7280;
  line-height: 1.3;
  margin-top: 1px;
}

/* Booking reference panel */
/* ---- Deposit-paid pill (success step) ---- */
.book-success__deposit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  margin: 0 auto 16px;
  max-width: 100%;
}
.book-success__deposit[hidden] { display: none; }
.book-success__deposit-icon {
  width: 28px; height: 28px;
  background: #16a34a;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.book-success__deposit-icon svg { width: 16px; height: 16px; fill: #fff; }
.book-success__deposit-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 1px;
}
.book-success__deposit-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #166534;
}
.book-success__deposit-amount {
  font-size: 17px;
  font-weight: 800;
  color: #14532d;
}
.book-success__deposit-hint {
  font-size: 12px;
  color: #166534;
  font-weight: 600;
  border-left: 1px solid #86efac;
  padding-left: 10px;
}
@media (max-width: 480px) {
  .book-success__deposit { flex-wrap: wrap; justify-content: center; text-align: center; }
  .book-success__deposit-hint { border-left: 0; padding-left: 0; width: 100%; }
}

.book-success__ref-panel {
  border: 1px solid #eef0f4;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  text-align: center;
  background: #fff;
}
.book-success__ref-label {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}
.book-success__ref-value {
  font-size: 18px;
  font-weight: 800;
  color: #C75528;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.book-success__ref-meta {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.4;
}
.book-success__ref-email {
  font-weight: 700;
  color: #111827;
}

/* Action buttons row */
.book-success__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 14px;
  /* Keep sibling buttons aligned to top of the row -- when the
     Add-to-Calendar dropdown expands its cell, My Appointment +
     Return Home would otherwise stretch to match the dropdown's
     height and end up with empty white space below their labels. */
  align-items: start;
}
@media (max-width: 640px) {
  .book-success__actions {
    grid-template-columns: 1fr;
  }
}
.book-success__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.book-success__btn--solid {
  background: #C75528;
  color: #fff;
  border-color: #C75528;
}
.book-success__btn--solid:hover {
  background: #a64720;
  border-color: #a64720;
}
.book-success__btn--ghost {
  background: #fff;
  color: #C75528;
  border-color: #C75528;
}
.book-success__btn--ghost:hover {
  background: #fef3e6;
}
.book-success__btn-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Add to Calendar dropdown */
.book-success__action-cal {
  position: relative;
}
.book-success__action-cal > summary {
  list-style: none;
  cursor: pointer;
}
.book-success__action-cal > summary::-webkit-details-marker { display: none; }
.book-success__cal-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow: hidden;
}
.book-success__cal-link {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
}
.book-success__cal-link:hover {
  background: #fef3e6;
  color: #C75528;
}

/* Need help footer */
.book-success__help {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  text-align: left;
}
.book-success__help-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fef3e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.book-success__help-icon svg {
  width: 18px;
  height: 18px;
  fill: #C75528;
}
.book-success__help-title {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}
.book-success__help-line {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.45;
}
.book-success__help-line--muted {
  color: #6b7280;
}
.book-success__help-phone {
  font-weight: 700;
  color: #C75528;
  text-decoration: none;
}
.book-success__help-phone:hover {
  text-decoration: underline;
}

/* Override the old book-success__hero rules so the in-overlay modal
   has a sensible step layout when we no longer emit the hero block.
   Older calendar-grid is also no longer rendered. */
.book-check-step--success.book-success > .book-success__hero { display: none; }

/* Hide the modal-level orange "Get Started" hero on the success step
   -- the in-content big check circle is the visual focus and the
   hero would just push the content down + look mismatched. */
.book-check-modal__dialog[data-step="success"] .book-check-modal__hero {
  display: none;
}


/* =====================================================================
   SUCCESS STEP POLISH (2026-05-13 round 2)
   - dialog height auto on success (no empty white footer)
   - bigger metadata cell fonts + icons
   - calendar dropdown: custom JS dropdown with provider icons +
     smooth slide-down + per-row hover animation. Replaces the
     native <details> disclosure that on Safari was getting favicon
     previews stamped over the anchor labels.
   ===================================================================== */

/* Auto-size the dialog on the success step so the bottom matches
   the content card and there is no empty white tail. Both modal-
   overlay and /book page modes honor this. */
.book-check-modal__dialog[data-step="success"] {
  height: auto !important;
  max-height: calc(100vh - 32px);
}
.book-check-modal--as-page .book-check-modal__dialog[data-step="success"] {
  height: auto !important;
}

/* Bigger metadata cell text + icons */
.book-success__grid {
  gap: 12px;
  padding: 18px 14px;
}
.book-success__cell-icon {
  width: 44px;
  height: 44px;
}
.book-success__cell-icon svg {
  width: 22px;
  height: 22px;
}
.book-success__cell-label {
  font-size: 13px;
  margin-top: 4px;
}
.book-success__cell-value {
  font-size: 13px;
}
.book-success__cell-value-sub {
  font-size: 12.5px;
}

/* Bigger booking ref */
.book-success__ref-value {
  font-size: 22px;
}
.book-success__ref-meta {
  font-size: 13px;
}
.book-success__heading {
  font-size: clamp(24px, 2.8vw, 30px);
}
.book-success__subheading {
  font-size: 15px;
}

/* ---------- Custom Add-to-Calendar dropdown ---------- */
.book-success__action-cal {
  position: relative;
}
.book-success__action-cal > summary {
  list-style: none;
  cursor: pointer;
}
.book-success__action-cal > summary::-webkit-details-marker {
  display: none;
}

/* Dropdown menu expands inline (in document flow) when <details open>
   so it pushes the Need Help panel below it down instead of
   overlapping it (the user reported the dropdown was hidden behind
   the Need Help card). Uses max-height + opacity + margin-top for
   smooth slide-down animation. The closed state has max-height: 0
   + padding 0 + opacity 0 + pointer-events none. The open state
   animates to max-height 320px which is enough for 4 rows. */
.book-success__cal-menu {
  /* Reset earlier rule's position: absolute -- we want in-flow
     expansion that pushes Need Help below it down, not an overlay. */
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  box-shadow: none;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  padding: 0 4px;
  margin-top: 0;
  border: 1px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height .28s cubic-bezier(0.22, 1, 0.36, 1),
    padding .22s ease,
    margin-top .22s ease,
    opacity .18s ease,
    border-color .18s ease;
}
.book-success__action-cal[open] .book-success__cal-menu {
  max-height: 320px;
  padding: 4px;
  margin-top: 8px;
  opacity: 1;
  pointer-events: auto;
  border-color: #e5e7eb;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

/* Per-row layout: custom-colored circular badge + provider name +
   subtle "open in new tab" arrow on the right. */
.book-success__cal-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  position: relative;
}
.book-success__cal-link:hover {
  background: #fef3e6;
  border-color: #fed7aa;
  transform: translateX(2px);
}
.book-success__cal-link::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C75528'%3E%3Cpath d='M9.3 18.7a1 1 0 0 1 0-1.4l5.3-5.3-5.3-5.3a1 1 0 1 1 1.4-1.4l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
.book-success__cal-link:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

/* Provider badges (small colored circles before label) */
.book-success__cal-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  transition: transform .15s ease, box-shadow .15s ease;
  border: 0;
}
.book-success__cal-link:hover .book-success__cal-badge {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* Button elements need explicit reset for cal-link, since they
   inherit user-agent defaults that differ from anchors. */
button.book-success__cal-link {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.book-success__cal-badge--google { background: linear-gradient(135deg, #4285F4 0%, #34A853 100%); }
.book-success__cal-badge--m365   { background: linear-gradient(135deg, #0078D4 0%, #00BCF2 100%); }
.book-success__cal-badge--apple  { background: linear-gradient(135deg, #1f1f1f 0%, #555 100%); }
.book-success__cal-badge--yahoo  { background: linear-gradient(135deg, #6001D2 0%, #7B17ED 100%); }
.book-success__cal-badge svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

@media (max-width: 640px) {
  .book-success__cell-icon { width: 48px; height: 48px; }
  .book-success__cell-icon svg { width: 24px; height: 24px; }
  .book-success__cell-label { font-size: 13px; }
  .book-success__cell-value { font-size: 14px; }
}


/* Stagger animation for calendar dropdown rows -- each row fades in
   + slides up using its own --row-delay custom property (set inline
   on the markup at 0/40/80/120 ms intervals). Triggered when the
   parent <details> opens. */
.book-success__action-cal[open] .book-success__cal-link {
  animation: book-success-cal-row .28s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--row-delay, 0ms);
}
@keyframes book-success-cal-row {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SVG inside the badge -- pure white calendar icon, sized within
   the 32x32 brand-colored container. */
.book-success__cal-badge svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Mobile defensive sizing (2026-05-17, re-revised)
|--------------------------------------------------------------------------
| Two distinct rendering modes share this stylesheet:
|
|   1. POPUP MODE -- modal opens as a fixed-position overlay covering
|      the viewport. Trigger: any "Book Now" / "Get Estimate" CTA on
|      a regular page. Markup is `.book-check-modal` (no modifier).
|
|   2. PAGE MODE -- modal markup is rendered inline inside a content
|      page wrapper. Trigger: navigating to /book or /instant-estimate.
|      Markup is `.book-check-modal.book-check-modal--as-page`, and
|      the wrapping `<main>` has `style="max-width:880px;padding:0 20px"`.
|      The `--as-page` modifier rules (line ~4868) override the
|      container's position, inset, width, height to `static / auto`
|      so the dialog lays out as an inline card.
|
| The two modes disagree about what "100vw" means for the dialog:
|
|   - Popup mode: the modal container IS the viewport (position:fixed
|     + inset:0). `width: 100vw` for the dialog ≈ container width.
|   - Page mode: the modal container is INSIDE `<main>` with 20px
|     padding each side. `width: 100vw` for the dialog OVERFLOWS the
|     parent by 40px (the `<main>` padding) on the right edge.
|
| A previous revision of this block forced `width: calc(100vw - 24px)`
| unconditionally on `.book-check-modal__dialog`. That fixed popup
| mode but broke page mode -- the dialog overflowed the `<main>` wrapper
| on mobile, clipping the Confirm button on the right edge of the
| visible viewport.
|
| The current fix uses parent-relative sizing (`width: 100%`) for the
| dialog instead of viewport-relative. This works correctly in BOTH
| modes: popup mode's container fills the viewport, page mode's
| container fills `<main>`'s content area. The container-level overrides
| (inset:0; padding) are scoped with `:not(--as-page)` so page mode's
| natural padding (from the @980px block at line 3258, which is
| safe-area-aware) is preserved.
|
| This block lives at the END of the file specifically so it wins
| cascade. The earlier @media (max-width: 980px) FINAL OVERRIDE block
| (line 3258 ff.) gets superseded by this one for any viewport ≤ 640px.
*/
@media (max-width: 640px) {
    /* POPUP MODE container only -- page mode keeps the @980px rules
       (which are safe-area-aware) plus the `--as-page` neutralization. */
    .book-check-modal:not(.book-check-modal--as-page) {
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }
    /* Dialog width is parent-relative -- works in both modes:
         popup: parent = padded viewport overlay (100vw - 24px)
         page:  parent = padded <main> content area (100vw - 40px - container padding) */
    .book-check-modal__dialog {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .book-check-modal__footer {
        padding: 10px 12px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }
    .book-check-modal__footer-step {
        gap: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .book-check-modal__confirm {
        min-width: 0 !important;
        padding: 0 14px !important;
        font-size: 13.5px !important;
        flex-shrink: 1 !important;
        white-space: nowrap !important;
    }
    .book-check-modal__call {
        font-size: 12.5px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    /* Anything inside the dialog that might force horizontal overflow
       gets clipped. The dialog has overflow: hidden already, but adding
       max-width:100% on the body content stops any wide element (long
       URL, untranslated long text, fixed-width image) from spilling. */
    .book-check-modal__dialog * {
        max-width: 100%;
    }

    /* PAGE MODE only -- align the dialog with the site's 20px header
       gutter (burger icon's left edge ↔ Get Estimate button's right edge).
       The wrapping `<main class="book-page-context">` already enforces
       that gutter via inline `padding: 0 20px`. The modal container
       inside `<main>` was getting an extra ~10px horizontal padding
       from the @980px block (line 3258), which narrowed the dialog
       inside the content area. Zero out that horizontal padding so
       the dialog spans the full `<main>` content area on mobile.
       Top/bottom padding is preserved (cosmetic vertical breathing). */
    .book-check-modal.book-check-modal--as-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .book-check-modal--as-page .book-check-modal__dialog {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 400px) {
    .book-check-modal:not(.book-check-modal--as-page) {
        padding: 8px !important;
    }
    .book-check-modal__dialog {
        width: 100% !important;
        max-width: 100% !important;
    }
    .book-check-modal__footer {
        padding: 10px 10px !important;
        gap: 8px !important;
    }
    .book-check-modal__confirm {
        padding: 0 12px !important;
        font-size: 13px !important;
    }
    .book-check-modal__call {
        font-size: 12px !important;
    }
    .book-check-modal__call svg {
        width: 13px !important;
        height: 13px !important;
    }
}