/* Booking modal (includes/booking-modal.php), shared by the homepage and the book page. */
.hm-len:disabled, .hm-bk-body .chip:disabled { opacity: .35; cursor: not-allowed; }
.hm-bk-head { background: var(--coral-deep); color: var(--cream); padding: 24px 26px 22px; position: relative; }
.hm-bk-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,249,243,.25); background: transparent; color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hm-bk-time { font-family: var(--serif); font-size: 34px; line-height: 1; }
.hm-bk-time small { font-size: 16px; opacity: .6; }
.hm-bk-meta { font-size: 14.5px; opacity: .85; margin-top: 7px; padding-right: 44px; }
.hm-bk-head .hm-bk-photo { width: 52px; height: 52px; flex: none; border-radius: 999px; object-fit: cover; display: block; }
.hm-bk-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 20px; }
.hm-bk-body.is-tight { gap: 14px; }
.hm-bk-body[hidden] { display: none; }
.hm-len { font-family: inherit; cursor: pointer; text-align: left; width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(11,10,8,.18); background: #fff; color: var(--ink); }
/* Modal picks: blush fill + deep-coral edge instead of solid black. */
.hm-len[aria-pressed="true"] { background: var(--blush); border-color: var(--coral-deep); box-shadow: inset 0 0 0 1px var(--coral-deep); color: var(--ink); }
.bk-dialog .chip[aria-pressed="true"] { background: var(--blush); border-color: var(--coral-deep); box-shadow: inset 0 0 0 1px var(--coral-deep); color: var(--ink); }
/* Goal picker: the default way to choose a massage; "Know your style?" swaps to the style chips. */
.hm-bk-switch { font-family: inherit; font-size: 13px; color: var(--coral-deep); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.hm-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hm-goal { font-family: inherit; color: var(--ink); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(11,10,8,.18); background: #fff; transition: background .18s, border-color .18s; }
.hm-goal[aria-pressed="true"] { background: var(--blush); border-color: var(--coral-deep); box-shadow: inset 0 0 0 1px var(--coral-deep); }
.hm-goal:disabled { opacity: .35; cursor: not-allowed; }
.hm-goal-name { font-size: 14.5px; font-weight: 600; }
.hm-goal-line { font-size: 12.5px; line-height: 1.4; opacity: .6; }
/* "Not sure" is a plain radio row, not a card. */
.hm-goal-unsure { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding: 8px 2px; font-size: 14px; background: transparent; border-color: transparent; }
.hm-goal-unsure[aria-pressed="true"] { background: transparent; border-color: transparent; box-shadow: none; }
.hm-goal-dot { width: 16px; height: 16px; flex: none; border-radius: 999px; border: 1px solid rgba(11,10,8,.35); }
.hm-goal[aria-pressed="true"] .hm-goal-dot { border-color: var(--coral-deep); box-shadow: inset 0 0 0 4px var(--coral-deep); }
.hm-len-min { display: block; font-family: var(--serif); font-size: 22px; line-height: 1; }
.hm-len-price { display: block; font-size: 14px; margin-top: 6px; opacity: .8; }
.hm-check { width: 52px; height: 52px; border-radius: 999px; background: var(--coral-light); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.hm-bk-body .field input { background: #fff; }
/* Space for Square's card field (two rows plus its message line in the modal) and the wallet row, held while they load. */
.hm-bk-card { min-height: 143px; }
.hm-bk-body .dmt-wallets { min-height: 48px; }
.hm-bk-test { font-size: 13.5px; padding: 10px 14px; border-radius: 12px; background: var(--blush); }
.hm-bk-msg { font-size: 14.5px; padding: 12px 14px; border-radius: 12px; background: var(--sand); text-align: left; }
.hm-bk-msg.is-error, .hm-bk-msg.is-warn { background: #FBE0DA; color: var(--coral-deep); }
.hm-bk-body .btn-coral:disabled { opacity: .5; }
/* After booking: small check beside "You're booked", and the focus / avoid body map. */
.hm-check.hm-check-sm { width: 34px; height: 34px; flex: none; background: var(--ink-2); color: var(--cream); }
/* "You're booked" alert at the top of the after-booking steps (add-ons, focus areas). */
.hm-bk-booked { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(11, 10, 8, .05); border: 1px solid rgba(11, 10, 8, .1); }
.bm-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bm-figure { margin: 0; text-align: center; }
.bm-figure svg { width: 100%; max-height: 300px; display: block; }
.bm-figure figcaption { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; opacity: .65; margin-top: 6px; }
.bm-part { fill: rgb(224 223 219); stroke: var(--cream); stroke-width: 1.5; cursor: pointer; transition: fill .15s; }
.bm-part:hover, .bm-part:focus-visible { fill: rgba(11, 10, 8, .26); outline: none; }
.bm-part.is-focus { fill: var(--coral-deep); }
.bm-avoid-bg { fill: var(--cream); }
.bm-avoid-line { fill: var(--ink); }
.bm-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 999px; margin-right: 6px; vertical-align: -1px; }
.bm-swatch.is-focus { background: var(--coral-deep); }
.bm-swatch.is-avoid { background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, var(--cream) 1.5px 4px); box-shadow: inset 0 0 0 1px var(--ink); }

/* Pay step laid out invisibly behind the first screen while Square attaches its fields (booking-modal.js preloadPay). */
.bk-dialog { position: relative; }
.hm-bk-preload { position: absolute !important; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; }

/* Phones: "30 min" fits on one line in the three length cards. */
@media (max-width: 420px) {
  .hm-len { padding: 12px; }
  .hm-len-min { font-size: 19px; white-space: nowrap; }
  .hm-bk-body { padding: 20px 18px 22px; }
}