/* ============================================================
   Smoothmoves v2 moving funnel - quote-form-v2.css
   Mounted by [sm_quote_form_v2] (SM_QF_Form_Controller_V2).

   SCOPE (FORM-09). Every rule below is rooted at .sm-quote-form-v2, and design
   tokens are declared on that class, never on :root. The v2 page is a Beaver
   Builder page on the live site: a global rule from a quote form is a site-wide
   regression. No rule may target body, html, :root or .fl-*. The component sets
   no page background and no page-level max-width - the BB row supplies those;
   max-width 720px below is a content measure inside whatever the module gives.
   scripts/tests/v2-mount.php parses this file selector by selector.

   Consequence for later plans: anything a library appends to <body> is out of
   reach. flatpickr must be initialised with `static: true` (or appendTo inside
   the component) so its calendar renders inside the root. Google Places'
   .pac-container is appended to <body> with z-index 1000, which is why the sticky
   nav below stays at z-index 10: the dropdown sits above it with no global rule.

   BASELINE. assets/css/quote-form.css is the visual baseline, and 03-UI-SPEC
   states every deviation from it with a reason. Mobile-first from 360px.
   Spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 only. Type: 32 / 24 / 16 / 14px at
   weights 400 / 700; inputs are 16px because iOS Safari zooms the viewport on
   focus below that. No font-family: the page's type is the site's.
   Motion only inside prefers-reduced-motion: no-preference.

   No .min.css twin: there is no build step, so a hand-kept twin drifts silently.
   ============================================================ */

/* ── Root and tokens ─────────────────────────────────────────── */
.sm-quote-form-v2 {
  --sm-surface: #FFFFFF;
  --sm-tint: #FDF0F8;
  --sm-accent: #EA3592;
  --sm-accent-text: #D42B84;
  --sm-accent-text-hover: #B8246F;
  --sm-destructive: #C0392B;
  --sm-error-border: #EF3E42;
  --sm-ink: #1A1A1A;
  --sm-muted: #6C757D;
  --sm-muted-on-tint: #555555;
  --sm-border: #DEE2E6;
  --sm-control-border: #CED4DA;
  --sm-hairline: #F1F1F1;
  --sm-focus-ring: 0 0 0 3px rgba(234, 53, 146, 0.12);
  /* F15 (owner, 2026-09-26): the approved mockup's radii and its two shadows, shared by
     03-19, 03-20 and 03-21. Both shadows are the accent hues at low alpha, not a new colour;
     nothing else casts a shadow (03-UI-SPEC §Spacing). */
  --sm-radius-card: 16px;
  --sm-radius-tile: 12px;
  --sm-shadow-hero: 0 10px 30px rgba(234, 53, 146, 0.14);
  --sm-shadow-primary: 0 8px 20px rgba(212, 43, 132, 0.28);

  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 48px;
  color: var(--sm-ink);
  font-size: 16px;
  line-height: 1.5;
  /* F13: every step change scrolls this root to the top of the screen. If the live
     site's header is fixed on a phone and covers the progress bar, raise this to that
     header's height at the human check - the header is theme chrome this component
     cannot see. */
  scroll-margin-top: 16px;
}

.sm-quote-form-v2 *,
.sm-quote-form-v2 *::before,
.sm-quote-form-v2 *::after {
  box-sizing: border-box;
}

/* Hide Alpine-managed regions until Alpine starts, so nothing flashes. */
.sm-quote-form-v2 [x-cloak] {
  display: none !important;
}

/* ── Progress bar ────────────────────────────────────────────── */
.sm-quote-form-v2 .sm-progress-wrap {
  margin-bottom: 32px;
  padding-top: 24px; /* room for the truck riding above the bar */
}
.sm-quote-form-v2 .sm-progress-label {
  margin-bottom: 24px; /* the truck rides in this gap, clear of the tag pill */
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
/* F15: the tag pill - the approved mockup's "YOUR ESTIMATE" pill, applied to the existing
   "Step {n} of 5" label (no new text; uppercase is CSS only, so the DOM string is unchanged).
   White Label 14/700 on #D42B84 (4.65:1); the mockup's white on #EA3592 is 3.87:1 and fails. */
.sm-quote-form-v2 .sm-tag {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--sm-accent-text);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sm-quote-form-v2 .sm-progress {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--sm-border);
}
.sm-quote-form-v2 .sm-progress-bar {
  width: calc(var(--sm-progress-pct, 20) * 1%);
  height: 100%;
  border-radius: 4px;
  background: var(--sm-accent);
}
/* The truck is content of the role="progressbar" element itself, so it is never
   announced. scaleX(-1) turns it to face the direction of travel. */
.sm-quote-form-v2 .sm-progress::after {
  content: '🚚';
  position: absolute;
  top: 50%;
  left: calc(var(--sm-progress-pct, 20) * 1%);
  font-size: 24px;
  line-height: 1;
  transform: translate(-50%, -80%) scaleX(-1);
  pointer-events: none;
}

/* ── Step typography ─────────────────────────────────────────── */
.sm-quote-form-v2 .sm-step-heading {
  margin: 0 0 8px;
  color: var(--sm-ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.sm-quote-form-v2 .sm-step-sub {
  margin: 0 0 32px;
  color: var(--sm-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* ── Differentiator (FORM-08) - owner copy, no icon, no prefix ─ */
/* Visually subordinate to the question by size and colour, never hidden. */
.sm-quote-form-v2 .sm-trust {
  margin: 24px 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--sm-tint);
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}
.sm-quote-form-v2 .sm-trust:empty {
  display: none;
}
/* F1 / F4 / F7 (owner, 2026-09-26): the feature band - the same owner line, larger, where
   the slot map places it (slots 1 and 2 here; slot 4 in 03-20). Body bold 16/700, ink on the
   30% tint, never the accent: it stays subordinate to the 32px heading and to Continue by
   size, colour and shape (a band, never a button). */
.sm-quote-form-v2 .sm-trust--feature {
  padding: 16px;
  border-radius: var(--sm-radius-card);
  background: var(--sm-tint);
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

/* ── Step 1's closing block (1a, F1, F2) ─────────────────────────
   After the cards (the .sm-field above supplies the 24px): the slot-1 band joined directly
   above the movers photo - the band carries the top corners, the photo the bottom ones.
   Full content width at 5:2; never wider than its container, so no scroll at 360px. */
.sm-quote-form-v2 .sm-hero-media {
  margin: 0;
}
.sm-quote-form-v2 .sm-hero-media > .sm-trust {
  margin: 0;
  border-radius: 16px 16px 0 0;
}
.sm-quote-form-v2 .sm-hero-media > img, .sm-quote-form-v2 .sm-hero-media > picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  border-radius: 0 0 16px 16px;
  object-fit: cover;
  object-position: 50% 40%;
}
/* If the band is ever empty (a config that failed to load hides it), the photo keeps all
   four corners. */
.sm-quote-form-v2 .sm-hero-media > .sm-trust:empty + img, .sm-quote-form-v2 .sm-hero-media > .sm-trust:empty + picture > img {
  border-radius: var(--sm-radius-card);
}

/* ── The slot-1 line as three badges (F16, owner 2026-09-29; 03-25) ──
   The same feature band, its three claims as three white tiles: a visual (the "18+" ring, the
   AFRA logo, Google's G) beside its own words. One column below 480px, three equal columns
   from 480px (in the breakpoint block). The separators between badges are read, never seen:
   they stay in the text so a screen reader hears the owner's sentence, and being absolutely
   placed they take no grid cell. Tokens only; no new colour. */
.sm-quote-form-v2 .sm-trust--badges {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.sm-quote-form-v2 .sm-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-tile);
  background: var(--sm-surface);
}
/* The "What happens next" ring (accent reserved use 9, extended to this ring): white, a 2px
   accent border, the darker sibling for the 16px numeral (4.65:1). */
.sm-quote-form-v2 .sm-badge-figure {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--sm-accent);
  border-radius: 50%;
  background: var(--sm-surface);
  color: var(--sm-accent-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
/* The logos as supplied: NO filter, opacity, transform, blend mode or background - Google's G
   must not be recoloured (Google brand rules), and neither is the AFRA mark. */
.sm-quote-form-v2 .sm-badge-logo {
  flex-shrink: 0;
  width: auto;
  max-width: 100%;
  height: 32px;
}
/* The AFRA file on the media library is a 1:2 portrait badge (497x992); at 32px tall it would
   be 16px wide. 48px keeps the red "afra" diamond recognisable beside its words. */
.sm-quote-form-v2 .sm-badge-logo--afra {
  height: 48px;
}
.sm-quote-form-v2 .sm-badge-text {
  min-width: 0;
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
/* Visually hidden, not aria-hidden: the " · " between badges is spoken, so the band still
   reads as the owner's one sentence. */
.sm-quote-form-v2 .sm-badge-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Spoken, not seen (FIX-B): the " (required)" in a starred group's name, where aria-required is
   not allowed (role=group, e.g. step 4's Access). */
.sm-quote-form-v2 .sm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Step 2's two columns (2a, 2b, F3, F4) ───────────────────────
   Below 768px: one column - the fields card, then the band; the photo's container is not
   rendered, and the img is lazy, so a phone never downloads it (answer 2b). The columns
   themselves are in the >=768px block at the end. */
.sm-quote-form-v2 .sm-step-aside {
  display: none;
}
.sm-quote-form-v2 .sm-step-aside img {
  display: block;
  max-width: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 30% 50%;
}
/* 2a's fallback layout (slot 2 declared `aside`): the band lives in the aside, so on a phone
   the aside is rendered for the band's sake and the photo itself is what is not rendered. */
.sm-quote-form-v2 .sm-step-split--aside .sm-step-aside {
  display: block;
}
.sm-quote-form-v2 .sm-step-split--aside .sm-step-aside > img, .sm-quote-form-v2 .sm-step-split--aside .sm-step-aside > picture > img {
  display: none;
}

/* ── Tip - instructional only, keeps the 💡 and "Tip:" ─────────── */
.sm-quote-form-v2 .sm-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--sm-tint);
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}
.sm-quote-form-v2 .sm-tip-icon {
  flex-shrink: 0;
  font-size: 16px;
}
/* F17 (owner 2026-09-29: "Perfecto"; 03-25): slot 4's line opens with the 💡 - the same
   .sm-tip-icon as step 5's Tip, beside the unchanged text. The only slot with an icon. */
.sm-quote-form-v2 .sm-trust--tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Accent withdrawn from coloured text under 24px: #EA3592 on white is 3.87:1. */
.sm-quote-form-v2 .sm-tip b,
.sm-quote-form-v2 .sm-tip strong,
.sm-quote-form-v2 .sm-inventory-section-title,
.sm-quote-form-v2 .sm-category-btn.is-active {
  color: var(--sm-ink);
}

/* ── Form controls ───────────────────────────────────────────── */
.sm-quote-form-v2 .sm-field {
  margin-bottom: 24px;
}
/* F15 (owner, 2026-09-26): a step's text fields in one white card (steps 2 and 3), the
   mockup's receipt card without its title. The last field's own margin is the card's
   padding's job. */
.sm-quote-form-v2 .sm-fields-card {
  padding: 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
}
.sm-quote-form-v2 .sm-fields-card > .sm-field:last-child {
  margin-bottom: 0;
}
.sm-quote-form-v2 .sm-label {
  display: block;
  margin-bottom: 8px;
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.sm-quote-form-v2 .sm-input,
.sm-quote-form-v2 .sm-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--sm-control-border);
  border-radius: 8px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-size: 16px; /* never below 16px: iOS Safari zooms the page on focus */
  font-weight: 400;
  line-height: 1.5;
}
/* Helper text and captions (Small). */
.sm-quote-form-v2 .sm-caption {
  margin: 4px 0 0;
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

/* Errors: #EF3E42 marks the border (a UI boundary, 3:1 passes); the message text
   is #C0392B (5.43:1). v1 used #EF3E42 for text, which fails at 3.86:1. */
.sm-quote-form-v2 .sm-input[aria-invalid="true"],
.sm-quote-form-v2 .sm-select[aria-invalid="true"],
.sm-quote-form-v2 .sm-input.is-error,
.sm-quote-form-v2 .sm-select.is-error {
  border-color: var(--sm-error-border);
}
.sm-quote-form-v2 .sm-error-msg {
  display: block;
  margin-top: 4px;
  color: var(--sm-destructive);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
/* Genuine failures only - never a routing decision (a manual review is not an error). */
.sm-quote-form-v2 .sm-alert-error {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--sm-error-border);
  border-radius: 8px;
  background: var(--sm-surface);
  color: var(--sm-destructive);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

/* ── Buttons - every one at least 44 x 44 ────────────────────── */
.sm-quote-form-v2 .sm-btn-next,
.sm-quote-form-v2 .sm-btn-back,
.sm-quote-form-v2 .sm-btn-skip,
.sm-quote-form-v2 .sm-btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

/* Primary: #D42B84 so the white 16px label passes (4.65:1); #EA3592 would not.
   Hover is a darker magenta - v1's #004d85 blue was a previous brand's leftover. */
/* F15 (owner, 2026-09-26): the button pair's primary - 12px radius, 48px tall (the mockup's
   52px snapped to the scale, never below 44), and the primary shadow. */
.sm-quote-form-v2 .sm-btn-next {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 12px 32px;
  border: 0;
  border-radius: var(--sm-radius-tile);
  background: var(--sm-accent-text);
  box-shadow: var(--sm-shadow-primary);
  color: #FFFFFF;
  font-weight: 700;
}
.sm-quote-form-v2 .sm-btn-next:hover {
  background: var(--sm-accent-text-hover);
}
.sm-quote-form-v2 .sm-btn-next:disabled {
  background: var(--sm-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.sm-quote-form-v2 .sm-btn-back {
  flex: 0 0 auto;
  padding: 12px 24px;
  border: 1.5px solid var(--sm-border);
  background: var(--sm-surface);
  color: var(--sm-muted);
  font-weight: 400;
  white-space: nowrap;
}
.sm-quote-form-v2 .sm-btn-back:hover {
  border-color: var(--sm-control-border);
  color: var(--sm-ink);
}

/* F15: the button pair's second button (Back on the question steps; 03-21's "Call"). White,
   a 2px #EA3592 ring (accent reserved use 8) and #D42B84 text (4.65:1 on white). It follows
   .sm-btn-back so the nav row's Back takes this look; the draft banner's buttons keep theirs.
   Hover darkens the text only - #D42B84 on the #FDF0F8 tint would drop below 4.5:1. */
.sm-quote-form-v2 .sm-btn-outline {
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid var(--sm-accent);
  border-radius: var(--sm-radius-tile);
  background: var(--sm-surface);
  color: var(--sm-accent-text);
  font-size: 16px;
  font-weight: 700;
}
.sm-quote-form-v2 .sm-btn-outline:hover {
  border-color: var(--sm-accent);
  color: var(--sm-accent-text-hover);
}

/* Secondary, outlined - e.g. "Estimate from my property instead". */
.sm-quote-form-v2 .sm-btn-skip {
  padding: 8px 16px;
  border: 1.5px solid var(--sm-accent);
  background: var(--sm-surface);
  color: var(--sm-accent-text);
  font-size: 14px;
  font-weight: 700;
}

/* The confirm action on "Start again": destructive text, transparent fill. */
.sm-quote-form-v2 .sm-btn-destructive {
  padding: 12px 24px;
  border: 1.5px solid var(--sm-destructive);
  background: transparent;
  color: var(--sm-destructive);
  font-weight: 700;
}

/* ── Focus - a visible replacement wherever the outline goes ──── */
.sm-quote-form-v2 button:focus-visible,
.sm-quote-form-v2 a:focus-visible,
.sm-quote-form-v2 [role="radio"]:focus-visible,
.sm-quote-form-v2 [role="checkbox"]:focus-visible,
.sm-quote-form-v2 [tabindex="0"]:focus-visible,
.sm-quote-form-v2 .sm-input:focus-visible,
.sm-quote-form-v2 .sm-select:focus-visible,
.sm-quote-form-v2 .sm-input:focus,
.sm-quote-form-v2 .sm-select:focus {
  outline: none;
  border-color: var(--sm-accent);
  box-shadow: var(--sm-focus-ring);
}
/* F18 (owner, 2026-09-29): while Smoothmoves Storage is the drop-off, step 2's "Moving to" holds
   the depot address and is read-only - greyed on the hairline token so it reads as filled in, not
   as a field to type in. The date input is readonly for another reason and is not matched. */
.sm-quote-form-v2 #sm-v2-moving-to[readonly] {
  background: var(--sm-hairline);
}

/* ── Nav row ─────────────────────────────────────────────────── */
.sm-quote-form-v2 .sm-nav-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
/* F15: the nav row as the button pair. Stacked below 480px with Continue on top
   (column-reverse keeps the DOM - and tab - order Back, Continue); side by side from 480px,
   see the breakpoints at the end. */
.sm-quote-form-v2 .sm-btn-pair {
  flex-direction: column-reverse;
  align-items: stretch;
}
/* Sticky on long steps (inventory, result) so the primary action is reachable
   without scrolling past the catalogue; clear of the iPhone home indicator.
   z-index stays below Places' .pac-container (1000). */
.sm-quote-form-v2 .sm-nav-row--sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-right: -16px;
  margin-left: -16px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sm-hairline);
  background: var(--sm-surface);
}

/* ── Draft restore banner ────────────────────────────────────── */
.sm-quote-form-v2 .sm-draft-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--sm-accent);
  border-radius: 8px;
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-draft-banner p {
  flex: 1 1 100%;
  margin: 0;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-draft-banner .sm-draft-banner__warn {
  font-weight: 700;
}
.sm-quote-form-v2 .sm-draft-banner__actions,
.sm-quote-form-v2 .sm-draft-banner__confirm {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Question steps (plan 03-07) ───────────────────────────────
   Every control a customer taps is at least 44 x 44 on a phone, in the BASE
   rule - not behind a breakpoint. Buttons reset what a theme may put on
   <button>, since the cards, pills and steppers are real buttons now. */

/* Choice cards: service, property type, bedrooms. role="radio" buttons. */
.sm-quote-form-v2 .sm-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sm-quote-form-v2 .sm-card-grid--tight {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* F15 (owner, 2026-09-26): the tile look of the approved mockup's fact tiles - white, a 1px
   #DEE2E6 border, 12px radius, no shadow (only the hero card and the primary button cast one).
   Selecting a card changes its colours only, never its size. Steps 1 and 4 inherit it. */
.sm-quote-form-v2 .sm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 16px 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-tile);
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  user-select: none;
}
.sm-quote-form-v2 .sm-card:hover {
  border-color: var(--sm-accent);
}
.sm-quote-form-v2 .sm-card.is-selected,
.sm-quote-form-v2 .sm-card[aria-checked="true"] {
  border-color: var(--sm-accent);
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-card-grid[aria-invalid="true"] .sm-card {
  border-color: var(--sm-error-border);
}
/* F18, revised by G1 (owner, 2026-09-29, third round: "no tiene que ser tan asi de llamativo,
   sino que, sea del mismo tamaño que las otras opciones pero que tenga el texto en el magenta de
   smoothmoves y el borde sea medio magenta tambien."): the Smoothmoves Storage card is a normal
   card in the grid, its label in the Smoothmoves magenta and its border a soft magenta. Selected,
   it takes the .sm-card selected colours like every other card. The soft border is the accent
   token at half strength (tokens only - no new colour value). */
.sm-quote-form-v2 .sm-card--featured {
  border-color: color-mix(in srgb, var(--sm-accent) 50%, transparent);
  color: var(--sm-accent-text);
}
.sm-quote-form-v2 .sm-card--featured:hover,
.sm-quote-form-v2 .sm-card--featured.is-selected,
.sm-quote-form-v2 .sm-card--featured[aria-checked="true"] {
  border-color: var(--sm-accent);
}
/* Owner 2026-10-17: twelve storage-length cards (1-11 months and 12+) - three per row on a phone, six on a computer. */
.sm-quote-form-v2 .sm-card-grid.sm-card-grid--durations {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .sm-quote-form-v2 .sm-card-grid.sm-card-grid--durations {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* G3 (owner, 2026-09-29): "Working out your estimate" - the first estimate's few seconds, with
   rotating facts about Smoothmoves. The ring turns only for people who have not asked for less
   motion (see the motion block); otherwise it stands still. */
.sm-quote-form-v2 .sm-thinking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 8px 0 24px;
  padding: 32px 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
  text-align: center;
}
.sm-quote-form-v2 .sm-thinking-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-thinking-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid var(--sm-hairline);
  border-top-color: var(--sm-accent);
  border-right-color: var(--sm-accent);
  border-radius: 50%;
}
.sm-quote-form-v2 .sm-thinking-icon {
  font-size: 32px;
  line-height: 1;
}
.sm-quote-form-v2 .sm-thinking-heading {
  margin: 8px 0 0;
  color: var(--sm-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
.sm-quote-form-v2 .sm-thinking-fact {
  max-width: 34em;
  min-height: 3em;
  margin: 0;
  color: var(--sm-muted-on-tint);
  font-size: 16px;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-thinking-note {
  margin: 0;
  color: var(--sm-accent-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sm-quote-form-v2 .sm-card-icon {
  display: block;
  font-size: 32px;
  line-height: 1;
}
.sm-quote-form-v2 .sm-card-label {
  font-size: 14px;
  font-weight: 700;
}

/* Progressive reveal (step 4). The movement itself is under reduced-motion below. The
   gradient dividers between the old blocks went with 03-20: the end cards separate the ends. */
.sm-quote-form-v2 .sm-reveal-start {
  opacity: 0;
  transform: translateY(8px);
}
.sm-quote-form-v2 .sm-reveal-end {
  opacity: 1;
  transform: translateY(0);
}
/* F6 (owner, 2026-09-26, answer 4a): step 4's two end cards, "Moving from" and "Moving to" -
   the fields card's surface. Full width at every width: only the 2-up card grids inside them
   sit side by side. The access block follows a .sm-field, whose own margin spaces it. */
.sm-quote-form-v2 .sm-end-card {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
}
.sm-quote-form-v2 .sm-access {
  margin-top: 0;
}
/* The card's header row: the end's icon and name. */
.sm-quote-form-v2 .sm-location-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.sm-quote-form-v2 .sm-location-header-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--sm-border);
  border-radius: 50%;
  font-size: 14px;
}
/* F6: the end's name in Label 14/700, ink, as written ("Moving from"). */
.sm-quote-form-v2 .sm-location-header-label {
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
}

/* Access pills: role="checkbox" buttons, filtered by property type. F15 (03-20): 999px pills,
   as step 5's category pills. */
.sm-quote-form-v2 .sm-access-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.sm-quote-form-v2 .sm-access-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  border: 1.5px solid var(--sm-border);
  border-radius: 999px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: none;
  cursor: pointer;
  user-select: none;
}
.sm-quote-form-v2 .sm-access-pill:hover {
  border-color: var(--sm-accent);
}
.sm-quote-form-v2 .sm-access-pill.is-selected,
.sm-quote-form-v2 .sm-access-pill[aria-checked="true"] {
  border-color: var(--sm-accent);
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-flights,
.sm-quote-form-v2 .sm-access-detail {
  margin-top: 12px;
}
/* D-09 (plan 05-02, owner 2026-09-30): the heavy items, right after the
   moving-from Access - the access pills' look, a little air above. */
.sm-quote-form-v2 .sm-heavy {
  margin-top: 16px;
}

/* Inventory (step 5). */
.sm-quote-form-v2 .sm-inventory-choice {
  margin-bottom: 24px;
}
.sm-quote-form-v2 .sm-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sm-quote-form-v2 .sm-category-btn {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  border: 2px solid var(--sm-border);
  border-radius: 999px; /* F15: step 5's categories as pills (its template is untouched) */
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  cursor: pointer;
}
.sm-quote-form-v2 .sm-category-btn.is-active {
  border-color: var(--sm-accent);
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-category-btn.has-items {
  border-color: var(--sm-accent);
}
/* The count badge: ink on white with an accent ring - white on #EA3592 at 14px
   would be 3.87:1. */
.sm-quote-form-v2 .sm-cat-count {
  display: inline-block;
  min-width: 24px;
  padding: 0 8px;
  border: 1px solid var(--sm-accent);
  border-radius: 12px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.sm-quote-form-v2 .sm-inventory-section {
  margin-bottom: 24px;
}
.sm-quote-form-v2 .sm-inventory-section-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sm-border);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.sm-quote-form-v2 .sm-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--sm-hairline);
  border-radius: 8px;
  font-size: 14px;
}
.sm-quote-form-v2 .sm-item-img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: contain;
}
.sm-quote-form-v2 .sm-item-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}
.sm-quote-form-v2 .sm-stepper {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}
/* 44 x 44: it was 26 x 26, the worst phone-first defect in the baseline and the
   control a customer taps most. */
.sm-quote-form-v2 .sm-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--sm-border);
  border-radius: 8px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.sm-quote-form-v2 .sm-stepper button:hover {
  border-color: var(--sm-accent);
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}
.sm-quote-form-v2 .sm-stepper .qty {
  min-width: 24px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.sm-quote-form-v2 .sm-empty {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
}
.sm-quote-form-v2 .sm-empty-heading {
  margin: 0 0 4px;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-empty-body {
  margin: 0;
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

/* ── Date picker (D-08) ─────────────────────────────────────────
   flatpickr runs with `static: true`, so the calendar is a child of the
   component and every rule here can be rooted at .sm-quote-form-v2. */
.sm-quote-form-v2 .flatpickr-wrapper {
  display: block;
}
.sm-quote-form-v2 .flatpickr-input {
  cursor: pointer;
}
.sm-quote-form-v2 .flatpickr-calendar {
  font-family: inherit;
}
/* F10 (owner, 2026-09-26: "los días que no se pueden seleccionar que no tengan ningún
   círculo gris y que los que se pueden seleccionar que tengan el círculo pero un magenta muy
   suave"). A disc means "you can pick this", and only that:
   - a pickable day (this base rule) carries the very soft #FDF0F8 disc, ink numeral;
   - a blocked day (past, today, Sunday, holiday) has no disc and no border;
   - the selected day is the #D42B84 disc with a white numeral;
   - days from the neighbouring months are hidden, so a greyed "31" never sits beside a disc.
   Colour is not the only signal (WCAG 1.4.1): the numeral colour, the strike-through and the
   cursor carry availability too. A 44px day on a phone (flatpickr's own is about 39px). */
.sm-quote-form-v2 .flatpickr-day {
  max-width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--sm-tint);
  color: var(--sm-ink);
  line-height: 44px;
}
/* Today is always blocked (minDate is tomorrow): flatpickr's own ring on it is removed. */
.sm-quote-form-v2 .flatpickr-day.today {
  border-color: transparent;
}
/* Hover and keyboard focus on a pickable day: a 1px accent ring (accent reserved use 4). */
.sm-quote-form-v2 .flatpickr-day:hover,
.sm-quote-form-v2 .flatpickr-day:focus {
  border-color: var(--sm-accent);
  background: var(--sm-tint);
  color: var(--sm-ink);
}
/* Selected: #D42B84 so the white numeral passes (4.65:1); #EA3592 would not. */
.sm-quote-form-v2 .flatpickr-day.selected,
.sm-quote-form-v2 .flatpickr-day.selected:hover,
.sm-quote-form-v2 .flatpickr-day.selected:focus {
  border-color: var(--sm-accent-text);
  background: var(--sm-accent-text);
  color: #FFFFFF;
}
/* A blocked day: no disc, no border, legible - struck through, full opacity, not-allowed.
   flatpickr's default rgba(57,57,57,0.1) reads as a rendering fault. The reason is in the
   caption under the field, before the tap - nothing happens on the tap itself (D-08). */
.sm-quote-form-v2 .flatpickr-day.flatpickr-disabled,
.sm-quote-form-v2 .flatpickr-day.flatpickr-disabled:hover,
.sm-quote-form-v2 .flatpickr-day.flatpickr-disabled:focus {
  border-color: transparent;
  background: transparent;
  color: #6C757D;
  text-decoration: line-through;
  opacity: 1;
  cursor: not-allowed;
}
.sm-quote-form-v2 .flatpickr-day.prevMonthDay,
.sm-quote-form-v2 .flatpickr-day.nextMonthDay {
  visibility: hidden;
}

/* ── The result screen - owner slot 8 (plan 03-08) ───────────────
   One card for all three states: a manual review and a Sunday use the
   same #FDF0F8 surface as the estimate, never error styling - no rule
   here may reach for a red. Figures are tabular so they do not jitter
   when a recompute swaps them in place. */
.sm-quote-form-v2 .sm-result-region {
  font-variant-numeric: tabular-nums;
}

/* "Updating your estimate..." keeps its line when idle (visibility, not
   display), so appearing never pushes the figures down. */
.sm-quote-form-v2 .sm-result-status {
  min-height: 24px;
  margin: 0 0 8px;
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  visibility: hidden;
}
.sm-quote-form-v2 .sm-result-status.is-on {
  visibility: visible;
}
/* The spinner exists only for people who have not asked for less motion;
   otherwise the label stands alone, static. */
.sm-quote-form-v2 .sm-spinner {
  display: none;
}

/* A failed request: an inline notice above the held estimate, never in its
   place, and not error-styled - the customer did nothing wrong. */
.sm-quote-form-v2 .sm-result-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-size: 16px;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-result-notice p {
  margin: 0 0 12px;
}

/* While it recomputes the previous figures stay where they are, dimmed -
   no skeleton, no height change, no scroll jump. */
.sm-quote-form-v2 .sm-result-state {
  opacity: 1;
}
.sm-quote-form-v2 .sm-result-busy .sm-result-state {
  opacity: 0.4;
}

.sm-quote-form-v2 .sm-result-heading {
  margin: 0 0 16px;
  color: var(--sm-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
/* ── F9 / 7a (owner, 2026-09-26): the approved result screen ─────
   "Muchisimo mejor ese diseño." - mockup v2, built within 03-UI-SPEC
   §Visual System: the theme's font, four sizes, two weights, the
   existing tokens only. Each state block opens with a photo band, and
   its hero card rides up over the band's lower edge.

   The band's fallback is the pink tint and its wash is the tint too,
   so it is never dark, with or without the photo ("lo unico que no me
   gusta es ese color negro ahi."). The wash is the spec's gradient -
   the tint at 0, .35 and .9 - mixed from --sm-tint rather than typed
   as rgba(), so no colour value is added; the first background line
   is the fallback for a browser without color-mix(). No negative side
   margin: the band is the content width, and the photo can never
   push the page wider (FORM-09). */
.sm-quote-form-v2 .sm-photo-band {
  position: relative;
  height: 152px;
  overflow: hidden;
  border-radius: var(--sm-radius-card) var(--sm-radius-card) 0 0;
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-photo-band img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
/* F21 (owner 2026-09-29, plan 03-27): the priced screen's band. Since
   owner 2026-10-02 it is Wrapped-table-load (1500x750): a mover carrying
   a plastic-wrapped table, his head near 28% of the height and the table
   from 20%. The hero card covers the band's bottom 44px (56px from
   480px); centred, the strip above the card shows the image from about
   10% to 74% of its height, so the head and the table stay in view.
   Below 480px the band keeps the shared 152px. */
.sm-quote-form-v2 .sm-photo-band--estimate img {
  object-position: 50% 50%;
}
.sm-quote-form-v2 .sm-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--sm-tint) 100%);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sm-tint) 35%, transparent) 55%, color-mix(in srgb, var(--sm-tint) 90%, transparent) 100%);
}
/* The tag pill (.sm-tag, 03-19) placed in the band: "Your estimate" -
   on AUTO it is the result heading itself, so the heading's own size
   and colour are overridden back to the pill's Label 14/700 white. */
.sm-quote-form-v2 .sm-photo-band .sm-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  margin: 0;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
}

/* The hero card: the same #FDF0F8 card for all three states (a manual
   review is never error-styled), overlapping the band by 44px (56px
   from 480px). 16px padding on a phone: at 360px it leaves the 24px
   range its ~292px on one line; 24px padding would break it at the
   dash (§8-A arithmetic). */
.sm-quote-form-v2 .sm-hero-card {
  position: relative;
  z-index: 1;
  margin-top: -44px;
  margin-bottom: 16px;
  padding: 16px;
  border: 2px solid var(--sm-accent);
  border-radius: var(--sm-radius-card);
  background: var(--sm-tint);
  box-shadow: var(--sm-shadow-hero);
}
.sm-quote-form-v2 .sm-hero-caption {
  margin: 0 0 4px;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sm-quote-form-v2 .sm-hero-card .sm-result-heading {
  margin: 0 0 8px;
}
/* Each figure of a range is its own span: if the line is ever too
   narrow, the break falls at the dash, never inside a figure. */
.sm-quote-form-v2 .sm-nowrap {
  white-space: nowrap;
}

/* The fact tiles: hours and, only when the volume shows (D-09), the
   volume. Two columns; alone, the hours tile spans the row. The O-1
   crew tile is not built - its numbers exist only inside the crew
   line, which is never parsed - so the row stays two-up at every
   width. The emoji are decorative (aria-hidden in the markup). */
.sm-quote-form-v2 .sm-fact-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0;
}
.sm-quote-form-v2 .sm-fact-tiles--single {
  grid-template-columns: 1fr;
}
.sm-quote-form-v2 .sm-fact-tile {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-tile);
  background: var(--sm-surface);
}
.sm-quote-form-v2 .sm-fact-icon {
  font-size: 16px;
  line-height: 1;
}
.sm-quote-form-v2 .sm-fact-figure {
  margin: 0;
  color: var(--sm-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.sm-quote-form-v2 .sm-fact-about {
  font-size: 14px;
  font-weight: 700;
}
.sm-quote-form-v2 .sm-fact-caption {
  margin: 0;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
/* The labour line's title, verbatim and small (7e: kept as the engine
   words it; a cleaner wording is an engine-side follow-up). */
.sm-quote-form-v2 .sm-crew-line {
  margin: 12px 0 0;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* F18 (owner 2026-09-29): a Smoothmoves Storage estimate's per-month
   line, directly under the one-figure total, on the hero card's tint.
   Small 14/400, the crew line's type; the modules tile needs no rule of
   its own - it is a plain .sm-fact-tile. */
.sm-quote-form-v2 .sm-estimate-then {
  margin: 8px 0 0;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sm-quote-form-v2 .sm-estimate-num {
  margin: 0;
  color: var(--sm-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
/* The price range: 24px on a phone, 32px from 480px. At 32px the 21-glyph
   range is ~390px and wraps mid-number inside a 328px content box. */
.sm-quote-form-v2 .sm-estimate-total {
  color: var(--sm-accent);
  font-size: 24px;
  font-weight: 700;
}
/* "How it adds up" - always open (7b: "desglose abierto desde el
   principio."), as a receipt card: white, dashed dividers, the amounts
   on their own line below 560px (a 21-glyph range and a 50-character
   title cannot share 296px) and beside their title from 560px. The
   card clips, so the Total row can run to its edges. */
.sm-quote-form-v2 .sm-estimate-lines {
  margin: 0 0 24px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
}
.sm-quote-form-v2 .sm-estimate-lines-heading {
  margin: 0 0 4px;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sm-quote-form-v2 .sm-estimate-lines-note {
  margin: 0 0 12px;
  color: var(--sm-muted);
  font-size: 14px;
  line-height: 1.45;
}
.sm-quote-form-v2 .sm-line-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Owner 2026-10-17: a storage promotion line stands out - pink tint, its amount in the accent colour. */
.sm-quote-form-v2 .sm-line.sm-line--promo {
  background: #FDF2F7;
  border-radius: 10px;
  padding-left: 12px;
  padding-right: 12px;
}
.sm-quote-form-v2 .sm-line.sm-line--promo .sm-line-title,
.sm-quote-form-v2 .sm-line.sm-line--promo .sm-line-amount {
  color: var(--sm-accent);
}
.sm-quote-form-v2 .sm-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
  padding: 12px 0;
  border-top: 1px dashed var(--sm-border);
}
.sm-quote-form-v2 .sm-line-title {
  margin: 0;
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.sm-quote-form-v2 .sm-line-amount {
  margin: 0;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.sm-quote-form-v2 .sm-line-description,
.sm-quote-form-v2 .sm-line-rate {
  margin: 0;
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}
.sm-quote-form-v2 .sm-estimate-totals {
  margin: 0;
}
.sm-quote-form-v2 .sm-estimate-totals-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 16px;
  padding: 12px 0;
  border-top: 1px dashed var(--sm-border);
  font-size: 16px;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-estimate-totals dt,
.sm-quote-form-v2 .sm-estimate-totals dd {
  margin: 0;
}
.sm-quote-form-v2 .sm-estimate-totals dt {
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.sm-quote-form-v2 .sm-estimate-totals dd {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
/* The Total row: the tint to the card's side and bottom edges (the
   negative margins stay inside the clipped card), a 2px accent rule on
   top (reserved use 9), and an ink amount - the accent stays the hero
   range's alone (reserved use 5). */
.sm-quote-form-v2 .sm-estimate-totals-row--total {
  margin: 12px -16px -16px;
  padding: 12px 16px 16px;
  border-top: 2px solid var(--sm-accent);
  background: var(--sm-tint);
  font-weight: 700;
}
.sm-quote-form-v2 .sm-estimate-totals-row--total dt {
  font-size: 16px;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-estimate-totals-row--total dd {
  color: var(--sm-ink);
  font-size: 16px;
}

/* Plan 05-02 (owner 2026-09-30, D-01): the add-ons on the priced screen, right
   above the receipt their lines join. A white card like the receipt; each
   add-on a switch row (a native checkbox in the accent colour), its controls
   revealed under it as two steppers; the owner's sentences in muted text. No
   red anywhere: an insurance answer in the wrong shape is a muted hint, not an
   error. Tokens only. */
.sm-quote-form-v2 .sm-addons {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
}
.sm-quote-form-v2 .sm-addons-heading {
  margin: 0 0 12px;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sm-quote-form-v2 .sm-addon {
  padding: 12px 0;
  border-top: 1px solid var(--sm-hairline);
}
.sm-quote-form-v2 .sm-addon-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.sm-quote-form-v2 .sm-addon-check {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--sm-accent);
  cursor: pointer;
}
.sm-quote-form-v2 .sm-addon-check:disabled,
.sm-quote-form-v2 .sm-addon-stepper-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.sm-quote-form-v2 .sm-addon-controls {
  margin: 8px 0 0;
  padding: 0 0 0 36px;
}
.sm-quote-form-v2 .sm-addon-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.sm-quote-form-v2 .sm-addon-stepper-label {
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
}
.sm-quote-form-v2 .sm-addon-stepper-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sm-quote-form-v2 .sm-addon-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--sm-border);
  border-radius: 999px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.sm-quote-form-v2 .sm-addon-stepper-btn:hover:not(:disabled) {
  border-color: var(--sm-accent);
}
.sm-quote-form-v2 .sm-addon-stepper-value {
  min-width: 48px;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.sm-quote-form-v2 .sm-addon-note,
.sm-quote-form-v2 .sm-addon-hint {
  margin: 4px 0 0;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  line-height: 1.45;
}
.sm-quote-form-v2 .sm-addon-fact {
  margin: 8px 0 0;
  color: var(--sm-ink);
  font-size: 14px;
  line-height: 1.45;
}
.sm-quote-form-v2 .sm-addon-info {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--sm-hairline);
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  line-height: 1.45;
}
.sm-quote-form-v2 .sm-addons-copy {
  margin: 0 0 12px;
}
.sm-quote-form-v2 .sm-addon-controls .sm-field {
  margin: 0 0 12px;
}

/* The baseline's amber-left-rule container, with v2's copy; 8px on its
   right corners (mockup v2). */
.sm-quote-form-v2 .sm-estimate-disclaimer {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 4px solid #FFC107;
  border-radius: 0 8px 8px 0;
  background: #FFF8E1;
  color: var(--sm-ink);
  font-size: 14px;
  line-height: 1.45;
}

/* 8-B and 8-C: the engine's own message, verbatim. */
.sm-quote-form-v2 .sm-result-message {
  margin: 0;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-result-action {
  margin: 0;
}
.sm-quote-form-v2 .sm-result-call {
  margin: 8px 0 0;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.sm-quote-form-v2 .sm-result-phone {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--sm-accent-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.sm-quote-form-v2 .sm-result-phone:hover {
  text-decoration: underline;
}

/* The result screen's button pair (§Visual System), directly under the
   hero card. Unlike the question steps' pair (column-reverse, Back
   first in the DOM), its primary comes first in the DOM - "Book this
   move" when the flag is on, "Choose another date" on REFUSED - so it
   stacks in DOM order below 480px and sits side by side from 480px.
   The .sm-result-phone rule above still styles the failure notice's
   plain link; inside the pair the phone is a 48px button. */
.sm-quote-form-v2 .sm-btn-pair.sm-result-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 16px;
}
.sm-quote-form-v2 .sm-result-actions > * {
  min-height: 48px;
}
/* Owner 2026-09-29 (third round): the Book + Call pair repeated under the final total. */
.sm-quote-form-v2 .sm-btn-pair.sm-result-actions--bottom {
  margin-top: 16px;
}
.sm-quote-form-v2 .sm-result-actions .sm-result-phone {
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
}
.sm-quote-form-v2 .sm-result-actions .sm-result-phone:hover {
  text-decoration: none;
}
.sm-quote-form-v2 .sm-result-actions .sm-result-call,
.sm-quote-form-v2 .sm-result-phone--stacked .sm-result-call {
  margin: 0;
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
/* The manual-review phone is the primary button: white on #D42B84
   (4.65:1), the number white too. */
.sm-quote-form-v2 .sm-btn-next.sm-result-phone {
  color: #FFFFFF;
}
/* F11 inside the button: the label on one line, the number, Heading
   24/700, on the next (manual review; REFUSED's "Or call"). */
.sm-quote-form-v2 .sm-result-phone--stacked {
  flex-direction: column;
  gap: 0;
  padding: 8px 24px;
}
.sm-quote-form-v2 .sm-result-phone--stacked .sm-result-number {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.sm-quote-form-v2 .sm-result-under {
  margin: 0 0 24px;
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}
/* Plan 04-02 (D-05, D-03): the answer to a Book / callback tap, in the
   place the interim F21 note held - between the pair and the under-line.
   .sm-finish-done: the owner-approved confirmation, a bold title and a
   Small 14/400 line, ink on the tint, 8px radius. .sm-finish-failed: the
   call-us line, the same card with the destructive colour on its left
   edge. Tokens only; no new colour. */
.sm-quote-form-v2 .sm-finish-done {
  margin: 12px 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--sm-tint);
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}
.sm-quote-form-v2 .sm-finish-failed {
  margin: 12px 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--sm-destructive);
  background: var(--sm-tint);
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}
.sm-quote-form-v2 .sm-finish-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}
/* FIX-B (B-2): the server's human-check / slow-down message over a failed tap, and the same over a
   failed estimate. Bold, in the text colour - the failed box already carries the red rule. */
.sm-quote-form-v2 .sm-finish-notice,
.sm-quote-form-v2 .sm-result-notice-why {
  font-weight: 700;
}
/* FIX-B (B-2): the Cloudflare Turnstile box - on the contact step under the fields card, and in a
   failed tap's box after a refused check. Its widget draws itself; this only spaces and centres it. */
.sm-quote-form-v2 .sm-human-check {
  display: flex;
  justify-content: center;
  margin: 16px 0 0;
}
.sm-quote-form-v2 .sm-human-check:empty {
  margin: 0;
}
.sm-quote-form-v2 .sm-finish-line {
  margin: 0;
}
/* D-03 (04-COPY item 3): the manual-review line under the reason sentence. */
.sm-quote-form-v2 .sm-manual-line {
  margin: 12px 0 0;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-btn-book:disabled,
.sm-quote-form-v2 .sm-btn-callback:disabled {
  opacity: 0.6;
  cursor: default;
}

/* "What happens next" - rendered only with the Book button (F14, the
   bookingButton flag): tint panels, a number ring, a title and a line.
   One column on a phone, three from 480px. */
.sm-quote-form-v2 .sm-next-steps {
  margin: 0 0 24px;
}
.sm-quote-form-v2 .sm-next-steps-heading {
  margin: 0 0 8px;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sm-quote-form-v2 .sm-next-steps-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sm-quote-form-v2 .sm-next-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--sm-radius-tile);
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-next-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 2px solid var(--sm-accent);
  border-radius: 50%;
  background: var(--sm-surface);
  color: var(--sm-accent-text);
  font-size: 14px;
  font-weight: 700;
}
.sm-quote-form-v2 .sm-next-step-title {
  margin: 0;
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.sm-quote-form-v2 .sm-next-step-line {
  margin: 0;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

/* "Your answers" - the summary lives on the result screen, and every row
   has a real Change button (the baseline's was a text span). */
.sm-quote-form-v2 .sm-summary {
  margin: 32px 0 0;
}
.sm-quote-form-v2 .sm-summary-heading {
  margin: 0 0 4px;
  color: var(--sm-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.sm-quote-form-v2 .sm-summary-sub {
  margin: 0 0 16px;
  color: var(--sm-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
/* The receipt surface (F15), with hairline - not dashed - dividers. */
.sm-quote-form-v2 .sm-summary-card {
  padding: 0 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
}
.sm-quote-form-v2 .sm-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sm-hairline);
}
.sm-quote-form-v2 .sm-summary-row:last-child {
  border-bottom: 0;
}
.sm-quote-form-v2 .sm-summary-label {
  flex: 0 0 100%;
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.sm-quote-form-v2 .sm-summary-value {
  flex: 1 1 0;
  min-width: 0;
  color: var(--sm-ink);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.sm-quote-form-v2 .sm-summary-edit {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--sm-accent-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  cursor: pointer;
}
.sm-quote-form-v2 .sm-summary-edit:disabled {
  color: var(--sm-muted);
  cursor: not-allowed;
}

@keyframes sm-v2-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Motion - only for people who have not asked for less ────── */
@media (prefers-reduced-motion: no-preference) {
  .sm-quote-form-v2 .sm-progress-bar {
    transition: width 0.3s ease;
  }
  .sm-quote-form-v2 .sm-progress::after {
    transition: left 0.3s ease;
  }
  .sm-quote-form-v2 .sm-btn-next,
  .sm-quote-form-v2 .sm-btn-back,
  .sm-quote-form-v2 .sm-input,
  .sm-quote-form-v2 .sm-select {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .sm-quote-form-v2 .sm-card,
  .sm-quote-form-v2 .sm-access-pill,
  .sm-quote-form-v2 .sm-category-btn,
  .sm-quote-form-v2 .sm-stepper button {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .sm-quote-form-v2 .sm-reveal-enter {
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  /* A recompute swaps the figures by opacity only - no slide, no count-up. */
  .sm-quote-form-v2 .sm-result-state {
    transition: opacity 0.2s ease;
  }
  .sm-quote-form-v2 .sm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid var(--sm-border);
    border-top-color: var(--sm-accent);
    border-radius: 50%;
    vertical-align: -3px;
    animation: sm-v2-spin 0.8s linear infinite;
  }
  .sm-quote-form-v2 .sm-thinking-ring::before {
    animation: sm-v2-spin 1.2s linear infinite;
  }
}

/* ── Breakpoints, mobile-first ───────────────────────────────── */
/* >=480px: the card grid returns to auto-fill, and the price range steps up
   to Display 32px. >=560px: two item columns, and each receipt amount sits
   beside its title (03-21). */
@media (min-width: 480px) {
  /* F15: the button pair side by side from 480px (Back, then Continue). */
  .sm-quote-form-v2 .sm-btn-pair {
    flex-direction: row;
    align-items: center;
  }
  .sm-quote-form-v2 .sm-estimate-total {
    font-size: 32px;
    line-height: 1.2;
  }
  /* F9/7a: the band grows, the hero card rides further up and gets
     its 24px padding, the result pair sits side by side (equal halves),
     and "What happens next" goes three across. */
  .sm-quote-form-v2 .sm-photo-band {
    height: 192px;
  }
  /* F21: the estimate band grows with its width (5:2) instead of the
     192px strip, so at 672px wide it is 268.8px tall and both movers'
     faces stay above the hero card's 56px overlap (03-27-SUMMARY). */
  .sm-quote-form-v2 .sm-photo-band--estimate {
    height: auto;
    aspect-ratio: 5 / 2;
  }
  .sm-quote-form-v2 .sm-hero-card {
    margin-top: -56px;
    padding: 24px;
  }
  .sm-quote-form-v2 .sm-btn-pair.sm-result-actions {
    flex-direction: row;
    align-items: stretch;
  }
  .sm-quote-form-v2 .sm-result-actions > * {
    flex: 1 1 0;
  }
  .sm-quote-form-v2 .sm-next-steps-list {
    grid-template-columns: repeat(3, 1fr);
  }
  /* F16: the step-1 badges go three across. */
  .sm-quote-form-v2 .sm-trust--badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm-quote-form-v2 .sm-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .sm-quote-form-v2 .sm-card-grid--tight {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  .sm-quote-form-v2 .sm-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}
@media (min-width: 560px) {
  .sm-quote-form-v2 .sm-item-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* The receipt: each amount beside its title, the detail lines under
     the title. Below 560px the amount has its own line. */
  .sm-quote-form-v2 .sm-line {
    grid-template-columns: 1fr auto;
    align-items: baseline;
  }
  .sm-quote-form-v2 .sm-line-title,
  .sm-quote-form-v2 .sm-line-description,
  .sm-quote-form-v2 .sm-line-rate {
    grid-column: 1;
  }
  .sm-quote-form-v2 .sm-line-amount {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (min-width: 768px) {
  /* The 44px day target is for touch; the desktop calendar keeps flatpickr's size. */
  .sm-quote-form-v2 .flatpickr-day {
    max-width: 39px;
    height: 39px;
    line-height: 39px;
  }
  .sm-quote-form-v2 {
    padding-right: 24px;
    padding-left: 24px;
  }
  /* 2a / F3: step 2 in two columns - the fields card left, the truck photo right, stretched
     to the fields' height (at least 320px) and cropped so the "S" mark and "smoothmoves"
     stay in frame. The photo is absolutely placed inside its column, so the fields decide
     the row's height and the photo follows. */
  .sm-quote-form-v2 .sm-step-split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    align-items: stretch;
  }
  .sm-quote-form-v2 .sm-step-aside {
    display: block;
    position: relative;
    min-height: 320px;
  }
  .sm-quote-form-v2 .sm-step-aside img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--sm-radius-card);
  }
  /* The slot-2 band under BOTH columns (slot 2 declared `below-columns`); the grid's gap
     spaces it. */
  .sm-quote-form-v2 .sm-step-split > .sm-trust {
    grid-column: 1 / -1;
    margin: 0;
  }
  /* 2a's fallback (slot 2 declared `aside`): photo over band in the right column, joined. */
  .sm-quote-form-v2 .sm-step-split--aside .sm-step-aside {
    display: flex;
    flex-direction: column;
  }
  .sm-quote-form-v2 .sm-step-split--aside .sm-step-aside > img, .sm-quote-form-v2 .sm-step-split--aside .sm-step-aside > picture > img {
    display: block;
    position: static;
    flex: 1 1 auto;
    height: auto;
    border-radius: 16px 16px 0 0;
  }
  .sm-quote-form-v2 .sm-step-split--aside .sm-step-aside > .sm-trust {
    margin: 0;
    border-radius: 0 0 16px 16px;
  }
  .sm-quote-form-v2 .sm-nav-row--sticky {
    position: static;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    border-top: 0;
    background: transparent;
  }
}

/* Owner 2026-09-29 (outside review, approved): a one-line definition under each furnishing level. */
.sm-quote-form-v2 .sm-card-hint {
  display: block;
  margin-top: 4px;
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
/* Owner 2026-09-29 (outside review, approved): the opening hours under the number, inside the Call button. */
.sm-quote-form-v2 .sm-result-phone {
  flex-wrap: wrap;
}
.sm-quote-form-v2 .sm-phone-hours {
  display: block;
  flex-basis: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}
.sm-quote-form-v2 .sm-estimate-then {
  margin: 4px 0 12px;
  color: var(--sm-muted-on-tint);
  font-size: 14px;
  line-height: 1.5;
}

/* Owner 2026-09-30 (staging): the confirmation screen after a successful Book or callback - the
   F15 visual system (photo band, overlapping hero card, receipt-style card, the step list). */
.sm-quote-form-v2 .sm-confirm-card {
  text-align: center;
}
.sm-quote-form-v2 .sm-confirm-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--sm-accent-text);
  color: var(--sm-surface);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.sm-quote-form-v2 .sm-confirm-line {
  margin: 8px 0 0;
  color: var(--sm-ink);
  font-size: 16px;
  line-height: 1.5;
}
.sm-quote-form-v2 .sm-confirm-summary {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-card);
  background: var(--sm-surface);
}
.sm-quote-form-v2 .sm-confirm-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sm-hairline);
}
.sm-quote-form-v2 .sm-confirm-row:last-child {
  border-bottom: 0;
}
.sm-quote-form-v2 .sm-confirm-row dt {
  color: var(--sm-muted);
  font-size: 14px;
  font-weight: 700;
}
.sm-quote-form-v2 .sm-confirm-row dd {
  margin: 0;
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.sm-quote-form-v2 .sm-next-step.is-current .sm-next-step-num {
  background: var(--sm-accent-text);
  color: var(--sm-surface);
}
.sm-quote-form-v2 .sm-now-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--sm-tint);
  color: var(--sm-accent-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
}
.sm-quote-form-v2 .sm-confirm-actions {
  margin-top: 16px;
}

/* Owner 2026-09-30 (UX review): add-on cost beside its switch, the total under the add-ons,
   the link from the top total, and the short-list notice. */
.sm-quote-form-v2 .sm-addon-price {
  margin-left: auto;
  padding-left: 8px;
  color: var(--sm-accent-text);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.sm-quote-form-v2 .sm-addons-total {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sm-hairline);
}
.sm-quote-form-v2 .sm-addons-total-line {
  margin: 0;
  color: var(--sm-ink);
  font-size: 16px;
}
/* Owner 2026-09-30 (staging v23): the jump to the add-ons is a soft full-width pill right above
   "Book this move". */
.sm-quote-form-v2 .sm-addons-jump {
  display: block;
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--sm-tint);
  color: var(--sm-accent-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
/* The short-list notice: its two buttons full width, stacked, with room between them. */
.sm-quote-form-v2 .sm-list-short .sm-btn-pair {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
}
.sm-quote-form-v2 .sm-list-short .sm-btn-pair > button {
  width: 100%;
  margin: 0;
}
/* The step-5 reminder on its own line above the buttons (the pair is column-reverse below
   480px, so the highest order sits on top; from 480px the row wraps and it leads). */
.sm-quote-form-v2 .sm-nav-note {
  order: 10;
  flex-basis: 100%;
  margin: 0;
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
@media (min-width: 480px) {
  .sm-quote-form-v2 .sm-nav-row { flex-wrap: wrap; }
  .sm-quote-form-v2 .sm-nav-note { order: -1; }
}
/* A typed item count: the same size as the old figure, no spinner arrows. */
.sm-quote-form-v2 .sm-qty-input {
  width: 3.2em;
  min-height: 44px;
  padding: 0 2px;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  background: var(--sm-surface);
  color: var(--sm-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.sm-quote-form-v2 .sm-qty-input::-webkit-outer-spin-button,
.sm-quote-form-v2 .sm-qty-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
/* The confirmation photo shows the crew on a phone too (owner: "casi que no se ve en mobile"). */
.sm-quote-form-v2 .sm-photo-band--confirm {
  width: 100%;
  height: 240px;
  /* Owner 2026-10-01 (production, desktop): the estimate band's 5:2 ratio plus this fixed height
     made the browser derive a narrower width than the card below; the band now spans the card. */
  aspect-ratio: auto;
}
.sm-quote-form-v2 .sm-photo-band--confirm img {
  object-position: 50% 30%;
}

/* Owner 2026-09-30 (staging v24): "hay alguna forma de diferenciar cada seccion" - inside each
   end card, every question after the first sits under a hairline with room around it, and its
   label steps up a size; a jump to a revealed question clears the site header. */
.sm-quote-form-v2 .sm-end-card .sm-reveal > .sm-field,
.sm-quote-form-v2 .sm-end-card > .sm-field + .sm-field,
.sm-quote-form-v2 .sm-end-card > .sm-access,
.sm-quote-form-v2 .sm-end-card > .sm-heavy {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--sm-hairline);
}
.sm-quote-form-v2 .sm-end-card .sm-field > .sm-label,
.sm-quote-form-v2 .sm-end-card .sm-access > .sm-label,
.sm-quote-form-v2 .sm-end-card .sm-heavy > .sm-label {
  font-size: 17px;
}
.sm-quote-form-v2 .sm-end-card .sm-field,
.sm-quote-form-v2 .sm-end-card .sm-access {
  scroll-margin-top: 96px;
}

/* ── Desktop, owner 2026-09-30 ("podemos hacer mas ancho todo el form") ─────────────
   From 1024px the form uses up to 1120px of the page (720px below, as before), and each
   step spends the width instead of growing taller. */
@media (min-width: 1024px) {
  .sm-quote-form-v2 {
    max-width: 1120px;
  }
  /* The nav buttons keep a comfortable size on the right instead of spanning the width. */
  .sm-quote-form-v2 .sm-nav-row.sm-btn-pair {
    justify-content: center;
  }
  .sm-quote-form-v2 .sm-nav-row.sm-btn-pair > button {
    flex: 0 1 280px;
  }
  /* Step 1: heading, text and the two cards on the left, the photo on the right, the three
     badges under both. The .sm-hero-media wrapper steps aside so its band and photo can take
     their own places. */
  .sm-quote-form-v2 .sm-step[data-step="1"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 40px;
    align-items: start;
  }
  .sm-quote-form-v2 .sm-step[data-step="1"] > .sm-step-heading { grid-column: 2; grid-row: 1; }
  .sm-quote-form-v2 .sm-step[data-step="1"] > .sm-step-sub { grid-column: 2; grid-row: 2; }
  .sm-quote-form-v2 .sm-step[data-step="1"] > .sm-field { grid-column: 2; grid-row: 3; }
  .sm-quote-form-v2 .sm-step[data-step="1"] > .sm-hero-media { display: contents; }
  .sm-quote-form-v2 .sm-step[data-step="1"] .sm-hero-media > img, .sm-quote-form-v2 .sm-step[data-step="1"] .sm-hero-media > picture > img {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    height: 320px;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: var(--sm-radius-card);
  }
  .sm-quote-form-v2 .sm-step[data-step="1"] .sm-hero-media > .sm-trust {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 24px;
    border-radius: var(--sm-radius-card);
  }
  /* Step 2: fields and the truck photo in equal halves, so the photo is not cut in half. */
  .sm-quote-form-v2 .sm-step-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
  /* Step 3: the four contact fields two by two. */
  .sm-quote-form-v2 .sm-step[data-step="3"] .sm-fields-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
  }
  /* Step 4: the three furnishing levels side by side; the other card grids already fill the width. */
  .sm-quote-form-v2 #sm-v2-furnished {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Step 5: three item columns. */
  .sm-quote-form-v2 .sm-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* The estimate: price and actions left, add-ons and receipt right. */
  .sm-quote-form-v2 .sm-result-auto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
  .sm-quote-form-v2 .sm-result-side > :first-child {
    margin-top: 0;
  }
  /* Screens with one message keep a reading width, centred. */
  .sm-quote-form-v2 .sm-result-manual,
  .sm-quote-form-v2 .sm-result-refused,
  .sm-quote-form-v2 .sm-confirm,
  .sm-quote-form-v2 .sm-thinking,
  .sm-quote-form-v2 .sm-result-notice {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
  }
  .sm-quote-form-v2 .sm-result-auto .sm-result-notice {
    max-width: none;
  }
}

/* Owner 2026-09-30 (desktop round 2): the step-2 line under the sub-line; the estimate-not-
   fixed-price line as plain small print inside the price card, under the crew line. */
.sm-quote-form-v2 .sm-step[data-step="2"] > .sm-trust {
  margin: 0 0 24px;
}
.sm-quote-form-v2 .sm-hero-card .sm-estimate-disclaimer {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sm-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Owner 2026-09-30: on step 5 the Tip steps back (no pink box, muted small print) and the
   "Skip the list" button steps forward (full width, larger, tinted). */
.sm-quote-form-v2 .sm-step[data-step="5"] .sm-tip {
  margin-bottom: 16px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--sm-muted);
  font-size: 13px;
}
.sm-quote-form-v2 .sm-inventory-choice .sm-btn-skip {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 2px solid var(--sm-accent);
  border-radius: 999px;
  background: var(--sm-tint);
  color: var(--sm-accent-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

/* The glide to "Add to your move" stops clear of the site header. */
.sm-quote-form-v2 #sm-v2-addons-heading {
  scroll-margin-top: 96px;
}

/* Owner 2026-09-30 (staging v26): the site header stays fixed at the top, so every jump - a new
   step, the estimate appearing, a revealed question - stops just below it (about 80px on a phone,
   110px on a desktop) instead of hiding the top of what it jumped to. */
.sm-quote-form-v2,
.sm-quote-form-v2 .sm-result {
  scroll-margin-top: 96px;
}
@media (min-width: 1024px) {
  .sm-quote-form-v2,
  .sm-quote-form-v2 .sm-result,
  .sm-quote-form-v2 .sm-end-card .sm-field,
  .sm-quote-form-v2 .sm-end-card .sm-access,
  .sm-quote-form-v2 #sm-v2-addons-heading {
    scroll-margin-top: 128px;
  }
}

/* ══ UX review 2 (owner 2026-10-01: "hacé las de prioridad alta y media") ══════════════ */

/* 1. What is chosen is unmistakable: a 2px accent edge, the tint, and a check on cards. Hover
   paints only where there is a mouse, so a tap never leaves a look-alike behind. */
.sm-quote-form-v2 .sm-card.is-selected,
.sm-quote-form-v2 .sm-card[aria-checked="true"],
.sm-quote-form-v2 .sm-access-pill.is-selected,
.sm-quote-form-v2 .sm-access-pill[aria-checked="true"],
.sm-quote-form-v2 .sm-category-btn.is-active {
  border-color: var(--sm-accent);
  box-shadow: inset 0 0 0 1px var(--sm-accent);
  background: var(--sm-tint);
}
.sm-quote-form-v2 .sm-card {
  position: relative;
}
.sm-quote-form-v2 .sm-card.is-selected::after,
.sm-quote-form-v2 .sm-card[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sm-accent-text);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
@media (hover: none) {
  .sm-quote-form-v2 .sm-card:not(.sm-card--featured):not(.is-selected):not([aria-checked="true"]):hover,
  .sm-quote-form-v2 .sm-access-pill:not(.is-selected):not([aria-checked="true"]):hover {
    border-color: var(--sm-border);
  }
}

/* 5. A visible keyboard focus on every control (WCAG 1.4.11). */
.sm-quote-form-v2 button:focus-visible,
.sm-quote-form-v2 a:focus-visible,
.sm-quote-form-v2 [role="radio"]:focus-visible,
.sm-quote-form-v2 [role="checkbox"]:focus-visible {
  outline: 3px solid var(--sm-accent-text) !important;
  outline-offset: 2px;
}

/* 22. Magenta and grey on the pink tint, darkened to read (4.5:1). */
.sm-quote-form-v2 .sm-addons-jump,
.sm-quote-form-v2 .sm-inventory-choice .sm-btn-skip,
.sm-quote-form-v2 .sm-now-pill {
  color: #B8246F;
}
.sm-quote-form-v2 .sm-hero-card .sm-estimate-disclaimer,
.sm-quote-form-v2 .sm-card.is-selected .sm-card-hint,
.sm-quote-form-v2 .sm-card[aria-checked="true"] .sm-card-hint {
  color: #555555;
}

/* 10. The floor, walk and height answers are a few digits - their inputs say so. */
.sm-quote-form-v2 .sm-access-detail .sm-input {
  max-width: 180px;
}

/* 12. Step 5: the skip slot keeps its height; the running count sits where the skip was. */
.sm-quote-form-v2 .sm-inventory-choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 84px;
}
.sm-quote-form-v2 .sm-list-count {
  margin: 0;
  color: var(--sm-ink);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/* 13. A re-price dims only the figures that are changing, never the control in use. */
.sm-quote-form-v2 .sm-result-busy .sm-result-state {
  opacity: 1;
}
.sm-quote-form-v2 .sm-result-busy .sm-estimate-total,
.sm-quote-form-v2 .sm-result-busy .sm-fact-tiles,
.sm-quote-form-v2 .sm-result-busy .sm-estimate-lines,
.sm-quote-form-v2 .sm-result-busy .sm-addons-total-line,
.sm-quote-form-v2 .sm-result-busy .sm-addon-price {
  opacity: 0.4;
}
@media (prefers-reduced-motion: no-preference) {
  .sm-quote-form-v2 .sm-result-busy .sm-estimate-total,
  .sm-quote-form-v2 .sm-result-busy .sm-fact-tiles,
  .sm-quote-form-v2 .sm-result-busy .sm-estimate-lines,
  .sm-quote-form-v2 .sm-result-busy .sm-addons-total-line,
  .sm-quote-form-v2 .sm-result-busy .sm-addon-price {
    transition: opacity 0.15s;
  }
}

/* 14. The tapped Book says it is sending, with a small spinner. */
.sm-quote-form-v2 .is-sending::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  vertical-align: -2px;
}
@media (prefers-reduced-motion: no-preference) {
  .sm-quote-form-v2 .is-sending::before {
    animation: sm-v2-spin 0.8s linear infinite;
  }
}
@keyframes sm-v2-spin {
  to { transform: rotate(360deg); }
}

/* 15. On the result pairs the opening hours sit beside the number, so Call is no taller than Book. */
.sm-quote-form-v2 .sm-result-actions .sm-phone-hours {
  display: inline;
  flex-basis: auto;
  margin-left: 6px;
  font-size: 13px;
}

/* 23. The confirmation also stops below the fixed site header. */
.sm-quote-form-v2 .sm-confirm {
  scroll-margin-top: 96px;
}

/* ── Phones ── */
@media (max-width: 479px) {
  /* 25. Less above each question: pill and bar on one row, headings a size down. */
  .sm-quote-form-v2 .sm-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .sm-quote-form-v2 .sm-progress-label {
    flex: 0 0 auto;
    margin: 0;
  }
  .sm-quote-form-v2 .sm-progress {
    flex: 1 1 auto;
    margin: 0;
  }
  .sm-quote-form-v2 .sm-step-heading {
    font-size: 26px;
  }
  /* 2. The sticky bar on the item list: note on one line, Back and the main button side by side. */
  .sm-quote-form-v2 .sm-nav-row--sticky.sm-btn-pair {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .sm-quote-form-v2 .sm-nav-row--sticky .sm-nav-note {
    order: -1;
    font-size: 13px;
  }
  .sm-quote-form-v2 .sm-nav-row--sticky .sm-btn-back {
    flex: 0 0 auto;
    width: auto;
    padding-right: 18px;
    padding-left: 18px;
  }
  .sm-quote-form-v2 .sm-nav-row--sticky .sm-btn-next {
    flex: 1 1 auto;
    width: auto;
  }
}

/* 3. Below the desktop layout the furnishing levels are a one-column, left-aligned list. */
@media (max-width: 1023px) {
  .sm-quote-form-v2 #sm-v2-furnished {
    grid-template-columns: minmax(0, 1fr);
  }
  .sm-quote-form-v2 #sm-v2-furnished .sm-card {
    align-items: flex-start;
    padding-right: 36px;
    text-align: left;
  }
}

/* 6. From a tablet up, the card grids fill their rows: property types four across (so the
   drop-off's Smoothmoves Storage leads the second row), bedrooms six across. */
@media (min-width: 768px) {
  .sm-quote-form-v2 .sm-end-card .sm-card-grid:not(#sm-v2-furnished):not(.sm-card-grid--durations):not(.sm-card-grid--tight) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm-quote-form-v2 .sm-card-grid--tight {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm-quote-form-v2 .sm-step[data-step="1"] .sm-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Desktop ── */
@media (min-width: 1024px) {
  /* 7. Step 1: the question sits centred beside the photo; the move-type cards are bigger. */
  .sm-quote-form-v2 .sm-step[data-step="1"] {
    grid-template-rows: 1fr auto auto auto 1fr auto;
  }
  .sm-quote-form-v2 .sm-step[data-step="1"] > .sm-step-heading { grid-row: 2; }
  .sm-quote-form-v2 .sm-step[data-step="1"] > .sm-step-sub { grid-row: 3; }
  .sm-quote-form-v2 .sm-step[data-step="1"] > .sm-field { grid-row: 4; }
  .sm-quote-form-v2 .sm-step[data-step="1"] .sm-hero-media > img, .sm-quote-form-v2 .sm-step[data-step="1"] .sm-hero-media > picture > img { grid-row: 1 / span 5; }
  .sm-quote-form-v2 .sm-step[data-step="1"] .sm-hero-media > .sm-trust { grid-row: 6; }
  .sm-quote-form-v2 .sm-step[data-step="1"] .sm-card {
    min-height: 120px;
  }
  /* 4. "What happens next" as a list down the side column. */
  .sm-quote-form-v2 .sm-result-side .sm-next-steps-list {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 16. The add-ons sit right under the price on a desktop: no jump link needed. */
  .sm-quote-form-v2 .sm-addons-jump {
    display: none;
  }
  /* 18. "Your answers" at a reading width, centred. */
  .sm-quote-form-v2 .sm-summary {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
  }
  /* The Skip button at a sensible width. */
  .sm-quote-form-v2 .sm-inventory-choice .sm-btn-skip {
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
  }
  .sm-quote-form-v2 .sm-confirm {
    scroll-margin-top: 128px;
  }
}

/* Production 2026-10-01: the live site's image optimiser wraps every <img> in a <picture> (AVIF/WebP),
   which staging does not. The wrapper is taken out of layout so each photo stays the box the rules
   above size and place; every "> img" rule also names "> picture > img". */
.sm-quote-form-v2 picture {
  display: contents;
}

/* ── The estimate on desktop, owner 2026-10-06 ("ordena desktop segun decis") ──────────
   Left: the price and the add-ons ("build your move"). Right: one summary that rides along -
   how it adds up, the total, ONE Book with Call, the reassurance line, then what happens next.
   The left column's own Book pair, its jump link and the "Your total now" box are the phone's
   helpers, so they step aside here; "Your answers" lines up under the left column. Below
   1024px nothing changes. */
.sm-quote-form-v2 .sm-desktop-only {
  display: none;
}
@media (min-width: 1024px) {
  .sm-quote-form-v2 .sm-result-auto {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .sm-quote-form-v2 .sm-desktop-only {
    display: block;
  }
  .sm-quote-form-v2 .sm-mobile-only,
  .sm-quote-form-v2 .sm-result-main > .sm-result-actions,
  .sm-quote-form-v2 .sm-result-main > .sm-addons-jump,
  .sm-quote-form-v2 .sm-result-main .sm-addons-total {
    display: none !important;
  }
  .sm-quote-form-v2 .sm-result-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .sm-quote-form-v2 .sm-result-side > .sm-estimate-lines { order: 1; margin-top: 0; }
  .sm-quote-form-v2 .sm-result-side > .sm-result-actions { order: 2; margin: 0; }
  .sm-quote-form-v2 .sm-result-side > .sm-finish-done,
  .sm-quote-form-v2 .sm-result-side > .sm-finish-failed { order: 3; }
  .sm-quote-form-v2 .sm-result-side > .sm-result-under { order: 4; margin: 0; text-align: center; }
  .sm-quote-form-v2 .sm-result-side > .sm-next-steps { order: 5; margin: 8px 0 0; }
  /* "What happens next", compact in the sidebar: one column, smaller type. */
  .sm-quote-form-v2 .sm-result-side .sm-next-steps-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sm-quote-form-v2 .sm-result-side .sm-next-step {
    padding: 8px 12px;
  }
  .sm-quote-form-v2 .sm-result-side .sm-next-step-line {
    font-size: 14px;
  }
  /* The Book pair side by side, in equal halves. */
  .sm-quote-form-v2 .sm-result-side > .sm-result-actions {
    flex-direction: row;
  }
  .sm-quote-form-v2 .sm-result-side > .sm-result-actions > * {
    flex: 1 1 0;
  }
  /* "Your answers" lines up under the left column instead of floating centred. */
  /* Only while the priced estimate shows; a manual or refused screen keeps its centred summary. */
  .sm-quote-form-v2 .sm-result-screen:has(.sm-result-auto:not([style*="display: none"])) > .sm-summary {
    max-width: calc((100% - 40px) * 0.6);
    margin-right: auto;
    margin-left: 0;
  }
}
/* The summary rides along only where it fits on the screen; on a short laptop it stays put. */
@media (min-width: 1024px) and (min-height: 860px) {
  .sm-quote-form-v2 .sm-result-side {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}