/* ═══════════════════════════════════════════════════════════════════
   booking-public.css, the restyle of the PUBLIC booking flow
   (desktop AND mobile bands; replaces booking-desktop.css).

   The brief:
   - The task: a homeowner books a visit in four steps and leaves
     reassured; each step asks one question and moves on.
   - The idea: the flow is a conversation, so every step shows its one
     question big and everything else quiet; nothing competes with the
     answer the customer is giving.
   - The moment: each step's question; on Confirm it is the appointment
     date itself.
   - The color plan: sun = the selection and the one Continue/Confirm,
     moss = "done" checks (description goal met, valid fields, benefit
     checks), everything else neutral cream.
   Archetype: Steps (Setup Assistant). Master: the customer estimate page
   (one column, one decision at the end).

   Scope, non-negotiable: EVERY rule is scoped to body.booking-public
   (added by booking.ejs only when the page is NOT admin/tech mode), so
   the admin scheduler and the tech wizard render byte-identical with or
   without this file (it is not even linked there). Bands:
   - shared rules (all widths)
   - ≥601px: the two-column contact-card border matrix
   - ≥901px: desktop card widths, column caps, desktop-only copy
   - ≤600px: phone stepper layout, one-column service list, phone spans

   Canvas: matches the marketing site exactly (pulled from its live
   Elementor CSS): flat #F6F2EB ground, no frosted wash or grain, with
   #FDFAF7 cards under the site's own soft shadow, so site → /book
   reads as one page.
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop-only copy (the Time step question). Revealed in the ≥901 band. */
.bk-desk-only { display: none; }

/* ── Canvas: the marketing site's flat beige (all widths) ────────────
   #F6F2EB is the site's own section background (its live Elementor
   CSS). FLAT by request: the frosted wash + grain are switched off on
   the public flow so the ground matches the site exactly. The embedded
   iframe stays transparent (embed-mode opt-out untouched). */
html:has(body.booking-public:not(.embed-mode)) {
  background-color: #F6F2EB;
  background-image: none;
}
body.booking-public:not(.embed-mode) {
  --sw-frost-base: #F6F2EB;
  background-color: #F6F2EB;
  background-image: none;
}
/* Flat ground = no wash layer at all (html/body color fills the
   overscroll gutters on their own). */
body.booking-public:not(.embed-mode) .sw-frost {
  display: none;
}

/* ── The step card, every view: the site's card surface ──────────────
   #FDFAF7 + the site's exact soft shadow (0 2px 14px rgba(55,59,77,.05)),
   borderless like the site's cards; the 22px radius and FLIP morph stay.
   One rule covers all five steps (and the iframe embed on the site). */
body.booking-public .step-card {
  background: #FDFAF7;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(55, 59, 77, 0.05);
}

/* ── Stepper: labeled segment bar (all widths) ───────────────────────
   The numbered circles become quiet labels over 4px segments; progress
   = sun fills the segments walked so far. Same li.active / li.done
   classes step-flip.js already toggles. The phone band below swaps the
   per-step labels for "active label left, Step X of N right". */
body.booking-public .stepper {
  max-width: 520px;
  gap: 8px;
  align-items: stretch;
  margin: 0 auto 20px;
}
body.booking-public .stepper .step {
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--sw-ink-2, #5F6575);
}
body.booking-public .stepper .step + .step { margin-left: 0; }
/* The old dot-to-dot connector rests; only ::before dies outright.
   ::after is REDEFINED for every step (the `+ .step` variant is listed
   too so this outweighs the base connector's width/position animation
   rules on steps 2-4, not just step 1). */
body.booking-public .stepper .step + .step::before { content: none; }
body.booking-public .stepper .step-marker { display: none; }
body.booking-public .stepper .step::after,
body.booking-public .stepper .step + .step::after {
  content: '';
  display: block;
  position: static;
  width: 100%;
  height: 4px;
  right: auto;
  top: auto;
  transform: none;
  border-radius: 999px;
  background: var(--sw-border, #E5DED3);
  transition: background 0.32s ease;
}
/* Sun fills only the segments walked (the `+ .step` variants outrank
   the base ink-flow rule that painted a step orange when its
   PREDECESSOR was done). */
body.booking-public .stepper .step.active::after,
body.booking-public .stepper .step.done::after,
body.booking-public .stepper .step + .step.active::after,
body.booking-public .stepper .step + .step.done::after {
  background: var(--sw-orange, #F38A3F);
}
body.booking-public .stepper .step.active {
  color: var(--sw-ink, #373B4D);
  font-weight: 500;
}
/* Visited steps stay clickable (step-flip.js pills); the pointer used to
   live on the now-hidden .step-marker. */
body.booking-public .stepper .step.done { cursor: pointer; }
/* "Step X of N" rides in the markup with [hidden]; only the phone band
   reveals it (and only on the active step). */

/* ── Step 1: service list rows (all widths) ──────────────────────────
   Centered chip-cards become left-aligned pick rows with a radio
   circle; selected = the region's one sun (2px ring + filled dot). */
body.booking-public .service-card-inner {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 3px;
  padding: 16px 16px 16px 50px;
  border: 1px solid var(--sw-border, #E5DED3);
  border-radius: 14px;
  background: #FFFDF9;
  min-height: 64px;
  box-shadow: none;
}
body.booking-public .service-card:hover .service-card-inner {
  transform: none;
  border-color: var(--sw-muted, #7B8190);
  background: #FFFDF9;
  box-shadow: none;
}
body.booking-public .service-card:active .service-card-inner { transform: scale(0.99); }
body.booking-public .service-card-inner::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--sw-border, #E5DED3);
  background: #FFFDF9;
  transition: background 0.18s ease, border-color 0.18s ease;
}
/* White check, painted only when picked. */
body.booking-public .service-card-inner::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 23px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  transition: opacity 0.18s ease;
}
body.booking-public .service-card input:checked + .service-card-inner {
  background: #FFFDF9;
  color: var(--sw-ink, #373B4D);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--sw-orange, #F38A3F);
}
body.booking-public .service-card input:checked + .service-card-inner::before {
  background: var(--sw-orange, #F38A3F);
  border-color: var(--sw-orange, #F38A3F);
}
body.booking-public .service-card input:checked + .service-card-inner::after { opacity: 1; }
body.booking-public .service-name {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
}
body.booking-public .service-issues-list,
body.booking-public .service-desc { text-align: left; }
body.booking-public .step-panel[data-step="1"] #continue-step-1 { box-shadow: none; }

/* One voice for the step questions (sizes per band below). */
body.booking-public .step-panel > h2 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
}

/* ── Step 3: the calm details column (all widths) ──────────────────── */
body.booking-public .step-panel[data-step="3"] > h2 {
  text-align: center;
  max-width: none;
  margin-bottom: 30px;
}
/* Eyebrows drop the uppercase tracking and the icon tile: quiet 13/500
   sentence-case section labels. */
body.booking-public .step-section-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--sw-ink-2, #5F6575);
  margin-bottom: 10px;
}
body.booking-public .step-section-eyebrow-ic { display: none; }

/* The grouped contact card: cells own the borders so the consent line
   and the (hidden) apt row can live in the same grid without being
   boxed in. Side borders + radii are per band below. */
body.booking-public .your-info-grid { gap: 0; }
body.booking-public .your-info-grid > label.field {
  position: relative;
  background: #FFFDF9;
  border: 0 solid var(--sw-border, #E5DED3);
  border-bottom-width: 1px;
  padding: 11px 16px 12px;
  gap: 2px;
  margin: 0;
  /* A grid track's automatic minimum is its item's min-content width, and
     an <input> contributes its size=20 intrinsic width (~185px at the 16px
     phone font floor). Two of those plus cell padding is wider than a
     390px phone, so the name pair grew the two-column card past the panel
     and .booking-page's overflow-x:clip sliced "Last name" off the right
     edge. Zero the automatic minimum so the cells shrink with the track. */
  min-width: 0;
}
body.booking-public .your-info-grid > label.field > span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--sw-muted, #7B8190);
}
body.booking-public .your-info-grid > label.field input {
  background: transparent !important; /* beats the boxed-input fill */
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 1px 24px 0 0;
  font-size: 15px;
  min-height: 0;
  /* Same reason as the cell above: the input must be allowed to narrow
     below its size=20 intrinsic width instead of pushing the cell wide. */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
/* The cell is the field, so the cell carries the focus ring. */
body.booking-public .your-info-grid > label.field:focus-within {
  box-shadow: inset 0 0 0 2px var(--sw-orange, #F38A3F);
}
body.booking-public .your-info-grid > label.field .field-check {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  bottom: auto;
}
/* The non-field span-2 items (consent, address, apt wrapper) have no
   generic span rule in the shipped sheets (.field.span-2 only), so the
   grouped layout spans them explicitly. */
body.booking-public .your-info-grid > .sms-consent,
body.booking-public .your-info-grid > .address-summary,
body.booking-public .your-info-grid > div.span-2 {
  grid-column: 1 / -1;
}
/* Address becomes the group's last row. */
body.booking-public .your-info-grid .address-summary {
  order: 0;
  background: #FFFDF9;
  border: 0 solid var(--sw-border, #E5DED3);
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 14px 14px;
  padding: 12px 16px;
  margin: 0;
}
body.booking-public .your-info-grid .sms-consent {
  order: 1;
  margin: 10px 4px 0;
  font-size: 12px;
  color: var(--sw-muted, #7B8190);
  line-height: 1.5;
  background: transparent;
}
/* Apt / suite hides behind the address pencil (your-info-form.js
   reveals #apt-field when the pencil is used). order:0 keeps the wrapper
   in source position, DIRECTLY UNDER the address row, so the revealed
   field reads as part of the card, not orphaned below the consent line. */
body.booking-public .your-info-grid .apt-toggle { display: none; }
body.booking-public .your-info-grid > div.span-2:has(#apt-field) { order: 0; }
/* The revealed apt row gets the same cell treatment as the card's other
   cells (it's nested in the div, so the > label.field rules skip it),
   and it takes over the card's bottom corners from the address row. */
body.booking-public .your-info-grid #apt-field {
  position: relative;
  background: #FFFDF9;
  border: 0 solid var(--sw-border, #E5DED3);
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 14px 14px;
  padding: 11px 16px 12px;
  gap: 2px;
  margin: 0;
}
body.booking-public .your-info-grid:has(#apt-field:not([hidden])) .address-summary {
  border-radius: 0;
}
body.booking-public .your-info-grid #apt-field > span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--sw-muted, #7B8190);
}
body.booking-public .your-info-grid #apt-field input {
  background: transparent !important;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 1px 24px 0 0;
  font-size: 15px;
  min-height: 0;
}
body.booking-public .your-info-grid #apt-field:focus-within {
  box-shadow: inset 0 0 0 2px var(--sw-orange, #F38A3F);
}

/* ── Wizard nav: one button size for the whole public flow ───────────
   The top-corner pair was two slabs: 58px tall on phones (05-style's
   step-3/4 block) and 12/24 padded on desktop, so Back and Continue
   outweighed the 24px question directly under them. One size now, the
   44px touch control from controls.css, pill radius kept, 15px label,
   so every Back in the flow is identical to every other Back.
   The bottom CTA keeps its own 48px full-width size below, matching
   the Confirm button, so "the step's one action" reads the same on
   step 3 and step 4. */
/* Two sizes for the whole flow, and the wizard .btn keeps sizing itself
   the way it always has, by padding, so no rule here redeclares what a
   button is: navigation (Back) lands on 44px, the step's one action
   (Continue / Confirm booking) on 48px. Paired in one row they stretch
   to the taller of the two, so a row never shows two heights. */
body.booking-public .step-panel > .actions { align-items: stretch; }
body.booking-public .step-panel > .actions .btn {
  /* line-height pinned so the padding math lands exactly on the scale:
     18px of text + 13px top/bottom = 44, + 15px = 48. Left to `normal`
     it rounded to 45/49. */
  padding: 13px 18px;
  font-size: 15px;
  line-height: 1.2;
}
body.booking-public .step-panel > .actions .btn-primary {
  padding: 15px 18px;
}
/* Back never grows to a third of the row; it is as wide as its word. */
body.booking-public .step-panel > .actions .btn-secondary {
  flex: 0 0 auto;
}

/* ── Step 3: Back stays top-left, Continue drops to the bottom ───────
   (2026-08-31) This step is a form: the customer types the problem,
   then their name, email, phone. Its one action belongs after the last
   field, the same split the Confirm step already uses. The Back row keeps the
   top-corner treatment (order:-1 from 05-style); the Continue row is
   pushed back to the end of the flex column. */
body.booking-public #booking-form .step-panel[data-step="3"] > .actions--back {
  margin: 0 0 16px;
  justify-content: flex-start;
}
body.booking-public #booking-form .step-panel[data-step="3"] > .actions--continue {
  order: 0;
  /* width + auto margins, not auto margins alone: in a flex column an
     auto side margin makes the row shrink-wrap its button instead of
     centering a full-width one. */
  width: 100%;
  max-width: 560px;
  margin: 26px auto 0;
  padding-top: 0;
  justify-content: center;
}
body.booking-public #booking-form .step-panel[data-step="3"] > .actions--continue .btn-primary {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  justify-content: center;
}
/* Eyebrow gone (the question above the box already names it), so the
   question sits closer to the textarea than the old 30px allowed. */
body.booking-public .step-panel[data-step="3"] > h2 { margin-bottom: 18px; }

/* ── Step 4: Confirm, calm single column (all widths) ────────────────
   Groups separated by hairlines instead of boxes; the date is the hero;
   Confirm stays the bottom action (locked). The old heading survives
   for screen readers only (the eyebrow + date carry it visually). */
body.booking-public .step-panel[data-step="4"] > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.booking-public .confirm-eyebrow {
  font-size: 13px;
  color: var(--sw-ink-2, #5F6575);
  text-align: center;
  margin: 4px 0 8px;
}
body.booking-public .confirm-review {
  background: transparent;
  border: none;
  padding: 0 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--sw-border, #E5DED3);
  text-align: center;
}
body.booking-public .confirm-review .success-recap-list { gap: 2px; }
body.booking-public .confirm-review .success-recap-row {
  display: block;
  font-size: 15px;
}
/* display:block above would beat the UA [hidden] rule, so an emptied row
   (e.g. the customer deleted their description) could never hide. */
body.booking-public .confirm-review .success-recap-row[hidden] { display: none !important; }
body.booking-public .confirm-review .success-recap-label { display: none; }
body.booking-public .confirm-review .success-recap-value {
  display: block;
  font-weight: 400;
  color: var(--sw-ink-2, #5F6575);
  line-height: 1.55;
}
body.booking-public .confirm-review .success-recap-row[data-key="when"] .success-recap-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sw-ink, #373B4D);
  margin-bottom: 8px;
}

/* Full reset of the legacy boxed card (06-style.css: cream fill, 1px
   border, 14px radius, min(34rem) width) so the group reads as a
   hairline-separated section like its neighbors, not a box. */
body.booking-public .bnf-block {
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  padding: 0 0 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--sw-border, #E5DED3);
}
body.booking-public .bnf-head {
  font-size: 14px;
  font-weight: 500;
  color: var(--sw-ink-2, #5F6575);
  margin-bottom: 6px;
}
/* The rows shrink-wrap to their longest title and the COLUMN is what gets
   centered, so every check mark shares one left edge and every chevron one
   right edge while the group still sits centered under the header. Centering
   each row's contents instead (the old justify-content: center) left the
   checks in a ragged zigzag down the card. */
body.booking-public .bnf-rows {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
body.booking-public .bnf-row {
  font-weight: 400;
  font-size: 15px;
  padding: 6px 2px;
  /* Touch floor: these are real tap targets on a phone. */
  min-height: 44px;
}
body.booking-public .bnf-title { flex: 0 1 auto; }
/* Included = settled, so the checks read moss, not orange. */
body.booking-public .bnf-ico { color: var(--sw-moss-ink, #04765E); }
/* The row chevron is the only thing telling a customer these open, so it
   stays (it was hidden here, which is why the rows read as flat text). It
   keeps the base margin-left:auto, giving the column a second alignment
   line on the right. Muted, so it reads as an affordance, not an accent. */
/* Indented to the title's left edge: 2px row padding + 16px check + 10px gap.
   width:0 + min-width:100% keeps the detail out of the column's fit-content
   measurement: a collapsed detail is still a full sentence on one unbroken
   line, so left in, the details (not the titles) would decide the width and
   the column would just stretch back to the full card. It stretches over the
   settled column afterwards. */
body.booking-public .bnf-detail {
  padding: 2px 0 10px 28px;
  text-align: left;
  width: 0;
  min-width: 100%;
}
/* Color-only restyle of the shipped .bnf-more-btn (its size stays in
   06-style.css, so the button ratchet has nothing to count here). */
body.booking-public .bnf-more-btn {
  background: transparent;
  border: 0;
  color: var(--sw-orange-ink, #A64A18);
  font-weight: 500;
  font-size: 14px;
  margin: 4px auto 0;
  display: inline-flex;
}

body.booking-public .confirm-survey {
  text-align: center;
  border-top: 0; /* the hairline above belongs to .confirm-review; the legacy
                    border-top + padding-top would double it */
  padding-top: 0;
  padding-bottom: 24px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--sw-border, #E5DED3);
}
body.booking-public .confirm-survey .success-survey-q {
  font-size: 14px;
  font-weight: 500;
  color: var(--sw-ink-2, #5F6575);
}
body.booking-public .confirm-survey .success-survey-chips { justify-content: center; }
body.booking-public .confirm-survey .success-survey-chip {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--sw-border, #E5DED3);
  background: transparent;
  color: var(--sw-ink-2, #5F6575);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}
body.booking-public .confirm-survey .success-survey-chip.is-picked {
  background: var(--sw-orange, #F38A3F);
  border-color: var(--sw-orange, #F38A3F);
  color: #FFFDF9;
  font-weight: 600;
}

/* :not([hidden]) so a $0-fee location's hidden block stays hidden
   (a bare display:flex here would beat the UA [hidden] rule). */
body.booking-public .step-panel[data-step="4"] .trip-charge-agree:not([hidden]) {
  background: transparent;
  border: none;
  padding: 20px 0 0;
  display: flex;
  justify-content: center;
}
/* #booking-form included so this outranks the id-scoped legacy 28px rule. */
body.booking-public #booking-form .step-panel[data-step="4"] > .actions.actions--confirm { margin-top: 20px; }
body.booking-public #submit-booking {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

/* ── Step 5: success (all widths) ────────────────────────────────────
   Check, one sentence, the text note, then "What you earned by going
   with Sunwave", then Finish. The perks moved here from the Confirm
   step on 2026-08-31: read once, after booking, instead of skimmed
   twice. The block keeps its own bottom hairline from the shared reset
   above, so it only needs a top one here to close the seam. */
body.booking-public .success-card { text-align: center; }
/* The four-step bar retires once the booking is filed. No step is active
   on step 5, so it would paint four finished segments with no label, and
   on phones the sticky bar would be an empty band (the label + "Step X of
   N" only render for .active). */
body.booking-public:has(#step-card[data-active-step="5"]) .stepper { display: none; }
body.booking-public .success-card .bnf-block {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--sw-border, #E5DED3);
}
body.booking-public .success-confirm-note {
  background: transparent;
  border: none;
  justify-content: center;
  color: var(--sw-moss-ink, #04765E);
  font-weight: 500;
  box-shadow: none;
}
body.booking-public .success-actions .success-finish {
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

/* ═══ ≥601px: the two-column contact-card border matrix ═══
   600.02 (not 601) so fractional widths from browser zoom / Android DPR
   between the classic 600/601 breakpoints can't land in a bandless gap
   where the card would lose its side/top borders. */
@media (min-width: 600.02px) {
  body.booking-public .your-info-grid > label.field { border-right-width: 1px; }
  body.booking-public .your-info-grid > label.field:nth-of-type(1),
  body.booking-public .your-info-grid > label.field:nth-of-type(2) { border-top-width: 1px; }
  body.booking-public .your-info-grid > label.field:nth-of-type(1),
  body.booking-public .your-info-grid > label.field:nth-of-type(3) { border-left-width: 1px; }
  body.booking-public .your-info-grid > label.field:nth-of-type(1) { border-top-left-radius: 14px; }
  body.booking-public .your-info-grid > label.field:nth-of-type(2) { border-top-right-radius: 14px; }
}

/* ═══ ≥901px: desktop ═══ */
@media (min-width: 901px) {
  body.booking-public .bk-desk-only { display: revert; }

  /* Card widths per step (approved mockup proportions). */
  body.booking-public #booking-form .step-card[data-active-step="1"] { max-width: 900px; }
  body.booking-public #booking-form .step-card[data-active-step="2"] { max-width: 920px; }
  body.booking-public #booking-form .step-card[data-active-step="3"] { max-width: 800px; }
  body.booking-public #booking-form .step-card[data-active-step="4"] { max-width: 680px; }
  body.booking-public #booking-form .step-card[data-active-step="5"] { max-width: 560px; }

  /* Desktop question size. */
  body.booking-public .step-panel > h2 {
    font-size: 28px;
    line-height: 1.2;
  }

  /* The details column caps at 560 and centers. */
  body.booking-public .step-panel[data-step="3"] > .ledger-field,
  body.booking-public .step-panel[data-step="3"] > .step-section-eyebrow,
  body.booking-public .step-panel[data-step="3"] > .grid.your-info-grid {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* The confirm column caps at 520. */
  body.booking-public .step-panel[data-step="4"] .confirm-review,
  body.booking-public .step-panel[data-step="4"] .confirm-survey,
  body.booking-public .step-panel[data-step="4"] .trip-charge-agree,
  body.booking-public .step-panel[data-step="4"] > .actions.actions--confirm {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  body.booking-public .confirm-survey .success-survey-chip { min-height: 36px; }
}

/* ═══ ≤600px: phone ═══ */
@media (max-width: 600px) {
  /* Sticky stepper keeps its pin but joins the cream, and the row reads
     "active label left, Step X of N right" over the four segments. */
  body.booking-public .stepper {
    background: #F6F2EB;
    gap: 6px;
    padding-top: 38px;
    position: sticky;
  }
  /* position: static so the absolute label/count below anchor to the
     STICKY BAR (the .stepper), not to the 4px-tall quarter-width li the
     base sheet makes position:relative. Without this both texts pin to
     the active segment: they overlap each other and hang below the bar. */
  body.booking-public .stepper .step { gap: 0; position: static; }
  body.booking-public .stepper .step .step-label { display: none; }
  body.booking-public .stepper .step.active .step-label {
    display: block;
    position: absolute;
    top: 12px;
    left: 14px;
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--sw-ink, #373B4D);
  }
  body.booking-public .stepper .step.active .step-count[hidden] {
    display: block;
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--sw-muted, #7B8190);
  }

  /* Service list: one column of full-width rows. */
  body.booking-public .service-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.booking-public .service-card-inner {
    padding: 14px 14px 14px 48px;
    min-height: 52px;
    border-radius: 14px;
  }
  /* The legacy ≤600 has-issues rule (padding 11px, higher specificity)
     would pull multi-line rows out of line with the fixed radio circle. */
  body.booking-public .service-card.has-issues .service-card-inner {
    padding: 14px 14px 14px 48px;
  }

  /* Contact card: name pair shares a row, email and phone go full
     width, borders close the box per cell. */
  body.booking-public .your-info-grid { grid-template-columns: 1fr 1fr; }
  body.booking-public .your-info-grid > label.field:nth-of-type(3),
  body.booking-public .your-info-grid > label.field:nth-of-type(4) { grid-column: 1 / -1; }
  body.booking-public .your-info-grid > label.field:nth-of-type(1),
  body.booking-public .your-info-grid > label.field:nth-of-type(3),
  body.booking-public .your-info-grid > label.field:nth-of-type(4) { border-left-width: 1px; }
  body.booking-public .your-info-grid > label.field:nth-of-type(1),
  body.booking-public .your-info-grid > label.field:nth-of-type(2),
  body.booking-public .your-info-grid > label.field:nth-of-type(3),
  body.booking-public .your-info-grid > label.field:nth-of-type(4) { border-right-width: 1px; }
  body.booking-public .your-info-grid > label.field:nth-of-type(2) { border-left-width: 0; }
  body.booking-public .your-info-grid > label.field:nth-of-type(1),
  body.booking-public .your-info-grid > label.field:nth-of-type(2) { border-top-width: 1px; }
  body.booking-public .your-info-grid > label.field:nth-of-type(1) { border-top-left-radius: 14px; }
  body.booking-public .your-info-grid > label.field:nth-of-type(2) { border-top-right-radius: 14px; }

  /* Confirm hero and the step questions step down to the phone title size. */
  body.booking-public .confirm-review .success-recap-row[data-key="when"] .success-recap-value {
    font-size: 24px;
  }
  body.booking-public .step-panel > h2 {
    font-size: 24px;
    line-height: 1.2;
  }
}