/*
  QB · Quote Tool (MWP-274, QB project)
  Docs: _context/QB/docs/qb-quote-tool/developer-guide.md

  Mobile first: the base rules are the phone layout (Devis' effective <=767px values);
  tablet (>=768px) and desktop (>=1024px) are layered on top.
  Everything is scoped under .qb-quote-tool. Colours are custom properties on the root;
  --qb-qt-accent is set inline from the module's Style tab.
  Stages: the postcode stage hides the whole HubSpot form here. Hiding the form's own
  postcode row in the contact stage is per-instance CSS emitted by module.html (it
  needs the instance id and the postcode field name).
*/

.qb-quote-tool {
  /* Theme fonts: each weight is its own family in this theme (see css/main-theme.css
     @font-face), so bold text must use Metric-Bold, never font-weight on Metric-Regular. */
  --qb-qt-font: Metric-Regular, Arial, sans-serif;
  --qb-qt-font-bold: Metric-Bold, Arial, sans-serif;
  --qb-qt-font-light: Metric-Light, Arial, sans-serif;

  --qb-qt-text: #3f3f3f;
  --qb-qt-muted: #777;
  --qb-qt-line: #e6e6e6;
  --qb-qt-card-border: #ededed;
  --qb-qt-answer-border: #dedede;
  --qb-qt-radio: #b7b7b7;
  --qb-qt-tint: #fffafa;
  --qb-qt-icon-color: #181818;

  /* Metric sits high in its line box. Measured on the live page (UAT 2026-10-01) so the
     visible letters are centred: CTA labels go down, the Back chevron goes up. */
  --qb-qt-cta-text-shift: 0.19em;     /* "Suivant" (flex-centred span) */
  --qb-qt-submit-text-shift: 0.075em; /* the form's "Envoyer" (V4 renders the text box differently) */
  --qb-qt-back-icon-shift: -0.28em;

  box-sizing: border-box;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  font-family: var(--qb-qt-font);
  color: var(--qb-qt-text);
}

.qb-quote-tool *,
.qb-quote-tool *::before,
.qb-quote-tool *::after {
  box-sizing: border-box;
}

/* [hidden] must win over every display rule below (steps, stage copy, error). */
.qb-quote-tool [hidden] {
  display: none !important;
}

.qb-quote-tool--width-narrow {
  max-width: 1180px;
}

.qb-quote-tool--card .qb-quote-tool__card {
  padding: 14px 14px 18px;
  border: 1px solid var(--qb-qt-card-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 34px rgb(0 0 0 / 7%), 0 2px 8px rgb(0 0 0 / 3%);
}

/* ---------- Header ---------- */

.qb-quote-tool__title {
  width: 100%;
  margin: 0;
  color: var(--qb-qt-text);
  font-size: 24px;
  font-family: var(--qb-qt-font-bold);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.2px;
  text-align: center;
}

.qb-quote-tool__progress {
  width: 100%;
  margin-top: 10px;
}

.qb-quote-tool__progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
  margin-bottom: 6px;
}

.qb-quote-tool__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--qb-qt-text);
  font: inherit;
  font-size: 14px;
  font-family: var(--qb-qt-font-bold);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  box-shadow: none;
  transition: color 0.15s ease;
}

.qb-quote-tool__back::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(45deg);
  /* Centred on the letters of "Retour", not on its line box (see --qb-qt-back-icon-shift). */
  position: relative;
  top: var(--qb-qt-back-icon-shift);
}

/* Button states. The theme paints EVERY <button> on :hover and :focus (theme-overrides.css,
   "button:hover" / "button:focus": green background, colour and border, specificity 0,1,1),
   which beat this module's single-class rules (UAT 2026-10-01: green "Suivant").
   Each state is restated here under the root class (0,3,0) so the theme cannot reach it.
   Order matters: :focus first, so a selected or hovered answer keeps its look while focused. */
.qb-quote-tool .qb-quote-tool__back:focus {
  border-color: transparent;
  background: transparent;
  color: var(--qb-qt-text);
}

.qb-quote-tool .qb-quote-tool__back:hover {
  border-color: transparent;
  background: transparent;
  color: var(--qb-qt-accent, #e4464e);
}

.qb-quote-tool .qb-quote-tool__answer:focus {
  border-color: var(--qb-qt-answer-border);
  background: #fff;
  color: var(--qb-qt-text);
}

.qb-quote-tool .qb-quote-tool__answer:hover,
.qb-quote-tool .qb-quote-tool__answer.is-selected {
  border-color: var(--qb-qt-accent, #e4464e);
  background: var(--qb-qt-tint);
  color: var(--qb-qt-text);
}

.qb-quote-tool .qb-quote-tool__next:focus,
.qb-quote-tool .qb-quote-tool__next:disabled {
  border-color: transparent;
  background: var(--qb-qt-accent, #e4464e);
  color: #fff;
  opacity: 1;
}

/* CTA hover = reference design: only the background darkens (#d73f4c on #e4464e). It never
   moves and the text stays white. Kept on touch devices too: it is what beats the theme's green
   button:hover, and a tapped button stays in :hover on Android. */
.qb-quote-tool .qb-quote-tool__next:hover {
  border-color: transparent;
  background: #d73f4c;
  color: #fff;
}

/* color-mix() only where supported. A declaration with var() inside is not validated at parse
   time, so an older browser (Chrome < 111) does NOT fall back to the line above: it resolves the
   whole property to transparent, which made the white-on-white CTA vanish after a tap. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .qb-quote-tool .qb-quote-tool__next:hover {
    background: color-mix(in srgb, var(--qb-qt-accent, #e4464e) 94%, #000);
  }
}

/* Waiting for the coverage answer (module.js shows "…"). */
.qb-quote-tool .qb-quote-tool__next[aria-busy="true"] {
  cursor: progress;
}

.qb-quote-tool__back:focus-visible,
.qb-quote-tool__answer:focus-visible,
.qb-quote-tool__next:focus-visible {
  outline: 3px solid rgb(228 70 78 / 30%);
  outline-offset: 3px;
}

/* Same var() + color-mix() rule as the CTA hover: guarded, or old browsers lose the ring. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .qb-quote-tool__back:focus-visible,
  .qb-quote-tool__answer:focus-visible,
  .qb-quote-tool__next:focus-visible {
    outline-color: color-mix(in srgb, var(--qb-qt-accent, #e4464e) 30%, transparent);
  }
}

/* The label sits right even when the back button is hidden (step 1). */
.qb-quote-tool__progress-label {
  margin: 0 0 0 auto;
  color: var(--qb-qt-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.qb-quote-tool__progress-track {
  display: grid;
  grid-template-columns: repeat(var(--qb-qt-steps, 6), 1fr);
  gap: 4px;
}

.qb-quote-tool__progress-segment {
  height: 5px;
  border-radius: 999px;
  background: #e8e8e8;
  transition: background-color 0.2s ease;
}

.qb-quote-tool__progress-segment.is-active,
.qb-quote-tool__progress-segment.is-complete {
  background: var(--qb-qt-accent, #e4464e);
}

.qb-quote-tool__divider {
  height: 1px;
  margin: 14px 0 16px;
  background: var(--qb-qt-line);
}

/* ---------- Question steps ---------- */

.qb-quote-tool__question {
  display: block;
  margin: 0 0 14px;
  color: var(--qb-qt-text);
  font-size: 19px;
  font-family: var(--qb-qt-font-bold);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.qb-quote-tool__question:empty {
  display: none;
}

/* Programmatic focus target only: no visible ring on the heading itself. */
.qb-quote-tool__question:focus {
  outline: none;
}

.qb-quote-tool__answers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 0;
}

.qb-quote-tool__answer {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 25px;
  align-items: center;
  column-gap: 11px;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  margin: 0;
  padding: 11px 13px;
  border: 2px solid var(--qb-qt-answer-border);
  border-radius: 12px;
  background: #fff;
  color: var(--qb-qt-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

/* Hover and selected colours: see "Button states" above. */
.qb-quote-tool__answer.is-selected {
  box-shadow: 0 7px 20px rgb(228 70 78 / 8%);
}

.qb-quote-tool__answer--no-icon {
  grid-template-columns: minmax(0, 1fr) 25px;
}

/* Built-in icons are drawn with a CSS mask, so they can follow the accent colour
   when selected (Devis used a red-only filter). Custom images keep their own colours. */
.qb-quote-tool__icon {
  display: block;
  width: 38px;
  height: 38px;
}

.qb-quote-tool__icon[class*="qb-quote-tool__icon--"] {
  background-color: var(--qb-qt-icon-color);
  -webkit-mask: var(--qb-qt-icon) center / contain no-repeat;
  mask: var(--qb-qt-icon) center / contain no-repeat;
}

.qb-quote-tool__answer.is-selected .qb-quote-tool__icon[class*="qb-quote-tool__icon--"] {
  background-color: var(--qb-qt-accent, #e4464e);
}

.qb-quote-tool__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qb-quote-tool__answer-label {
  min-width: 0;
  font-size: 17px;
  font-family: var(--qb-qt-font-bold);
  font-weight: 700;
  line-height: 1.1;
}

.qb-quote-tool__answer-radio {
  justify-self: end;
  width: 24px;
  height: 24px;
  border: 2px solid var(--qb-qt-radio);
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.18s ease, border-width 0.18s ease;
}

.qb-quote-tool__answer.is-selected .qb-quote-tool__answer-radio {
  border: 5px solid var(--qb-qt-accent, #e4464e);
}

/* Wide icons (alarm / no alarm) are 3:2 instead of square. */
.qb-quote-tool__answer--wide-icon {
  grid-template-columns: 58px minmax(0, 1fr) 25px;
  column-gap: 9px;
}

.qb-quote-tool__answer--wide-icon .qb-quote-tool__icon {
  width: 58px;
  height: 38px;
}

/* ---------- Built-in icon set (data URIs copied verbatim from the Devis page) ---------- */

.qb-quote-tool__icon--house { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M6 22 24 7l18 15M10 20v21h28V20M19 41V27h10v14' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--apartment { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M7 42h34M11 42V13h12v29M23 42V6h14v36M15 18h4M15 24h4M15 30h4M27 12h5M27 19h5M27 26h5M27 33h5' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--business { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M7 19h34l-3-9H10l-3 9Zm2 0v22h30V19M18 41V29h12v12M7 19c0 4 6 4 6 0 0 4 6 4 6 0 0 4 6 4 6 0 0 4 6 4 6 0 0 4 6 4 6 0' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--main-home { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M6 22 24 7l18 15M10 20v21h28V20M19 41V27h10v14' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--second-home { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M6 22 24 7l18 15M10 20v21h28V20M19 41V27h10v14M34 8v8' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='36' cy='7' r='4' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--size-small { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='10' y='14' width='28' height='24' rx='2' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Cpath d='M17 31h14M17 25h8' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--size-medium { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='7' y='11' width='34' height='28' rx='2' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Cpath d='M14 19h20M14 26h20M14 33h12' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--size-large { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M7 40V17h14v23M21 40V8h20v32M12 23h4M12 29h4M12 35h4M27 15h8M27 22h8M27 29h8M27 36h8M4 40h40' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--alarm { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 48'%3E%3C!-- Keypad --%3E%3Cg fill='none' stroke='%23181818' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='20' height='29' rx='3'/%3E%3Crect x='7' y='12' width='12' height='5' rx='1'/%3E%3Ccircle cx='8' cy='22' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='13' cy='22' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='18' cy='22' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='8' cy='27' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='13' cy='27' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='18' cy='27' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='8' cy='32' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='13' cy='32' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='18' cy='32' r='1.1' fill='%23181818' stroke='none'/%3E%3Cpath d='M8 41h10'/%3E%3C/g%3E%3C!-- Camera --%3E%3Cg fill='%23ffffff' stroke='%23181818' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 16 53 19.5 50.5 30.5 32.5 27z'/%3E%3Cpath d='M53 19.5 60 20.8 58 28.8 50.5 30.5'/%3E%3Ccircle cx='56.5' cy='24.7' r='3.1' fill='none'/%3E%3Cpath d='M37 29.5 33.5 34.5'/%3E%3Cpath d='M33.5 34.5H28.5'/%3E%3Cpath d='M28.5 32v5'/%3E%3C/g%3E%3C/svg%3E"); }
.qb-quote-tool__icon--no-alarm { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 48'%3E%3C!-- Keypad --%3E%3Cg fill='none' stroke='%23181818' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='20' height='29' rx='3'/%3E%3Crect x='7' y='12' width='12' height='5' rx='1'/%3E%3Ccircle cx='8' cy='22' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='13' cy='22' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='18' cy='22' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='8' cy='27' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='13' cy='27' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='18' cy='27' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='8' cy='32' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='13' cy='32' r='1.1' fill='%23181818' stroke='none'/%3E%3Ccircle cx='18' cy='32' r='1.1' fill='%23181818' stroke='none'/%3E%3Cpath d='M8 41h10'/%3E%3C/g%3E%3C!-- Camera --%3E%3Cg fill='%23ffffff' stroke='%23181818' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 16 53 19.5 50.5 30.5 32.5 27z'/%3E%3Cpath d='M53 19.5 60 20.8 58 28.8 50.5 30.5'/%3E%3Ccircle cx='56.5' cy='24.7' r='3.1' fill='none'/%3E%3Cpath d='M37 29.5 33.5 34.5'/%3E%3Cpath d='M33.5 34.5H28.5'/%3E%3Cpath d='M28.5 32v5'/%3E%3C/g%3E%3Cpath d='M5 5 67 43' fill='none' stroke='%23181818' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--one-person { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='15' r='7' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Cpath d='M11 41c1-10 6-15 13-15s12 5 13 15' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--two-people { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='18' cy='15' r='6' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Ccircle cx='32' cy='17' r='5' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Cpath d='M6 40c1-9 5-14 12-14s11 5 12 14M27 29c2-2 4-3 7-3 5 0 8 4 9 12' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--family { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='16' cy='14' r='5' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Ccircle cx='32' cy='14' r='5' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Ccircle cx='24' cy='27' r='4' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Cpath d='M5 38c1-8 4-12 11-12 2 0 4 .5 5 1.5M43 38c-1-8-4-12-11-12-2 0-4 .5-5 1.5M15 43c1-7 4-10 9-10s8 3 9 10' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qb-quote-tool__icon--other-household { --qb-qt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='16' cy='14' r='5' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Ccircle cx='32' cy='14' r='5' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Ccircle cx='24' cy='27' r='4' fill='none' stroke='%23181818' stroke-width='2.5'/%3E%3Cpath d='M5 38c1-8 4-12 11-12 2 0 4 .5 5 1.5M43 38c-1-8-4-12-11-12-2 0-4 .5-5 1.5M15 43c1-7 4-10 9-10s8 3 9 10' fill='none' stroke='%23181818' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- Final step (postcode stage / contact stage) ---------- */

.qb-quote-tool__step--final {
  width: 100%;
  margin: 0 auto;
}

/* Stage copy: only the copy of the current stage is visible. */
.qb-quote-tool__stage-copy--postcode,
.qb-quote-tool__stage-copy--contact {
  display: none;
}

.qb-quote-tool[data-qb-stage="postcode"] .qb-quote-tool__stage-copy--postcode,
.qb-quote-tool[data-qb-stage="contact"] .qb-quote-tool__stage-copy--contact {
  display: block;
}

/* Final-step titles are left-aligned at every width (user, 2026-10-01; Devis does so on desktop). */
.qb-quote-tool__question.qb-quote-tool__stage-copy--postcode,
.qb-quote-tool__question.qb-quote-tool__stage-copy--contact {
  text-align: left;
}

.qb-quote-tool[data-qb-stage="postcode"] .qb-quote-tool__actions.qb-quote-tool__stage-copy--postcode {
  display: flex;
}

/* Postcode stage: the module's own input is shown and the whole V4 form waits hidden. */
.qb-quote-tool[data-qb-stage="postcode"] .qb-quote-tool__form {
  display: none;
}

/* HubL's form tag always prints a form-title <h3>, empty unless the form has a title. */
.qb-quote-tool__form .form-title:empty {
  display: none;
}

/* Module-owned postcode input, styled like the V4 inputs below. */
.qb-quote-tool__postcode {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.qb-quote-tool__postcode-label {
  display: block;
  margin: 0 0 8px;
  color: var(--qb-qt-text);
  font-size: 17px;
  font-family: var(--qb-qt-font-bold);
  font-weight: 700;
  line-height: 1.3;
}

.qb-quote-tool__postcode-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #bdbdbd;
  border-radius: 9px;
  background: #fff;
  color: var(--qb-qt-text);
  font-family: var(--qb-qt-font);
  font-size: 18px;
  font-weight: 400;
  box-shadow: none;
  appearance: none;
}

.qb-quote-tool__postcode-input:focus-visible {
  border-color: var(--qb-qt-accent, #e4464e);
  outline: 3px solid rgb(228 70 78 / 30%);
  outline-offset: 1px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .qb-quote-tool__postcode-input:focus-visible {
    outline-color: color-mix(in srgb, var(--qb-qt-accent, #e4464e) 30%, transparent);
  }
}

.qb-quote-tool__postcode-input[aria-invalid="true"] {
  border-color: var(--qb-qt-accent, #e4464e);
}

.qb-quote-tool__postcode .qb-quote-tool__error {
  text-align: left;
}

.qb-quote-tool__actions {
  justify-content: stretch;
  width: 100%;
  margin: 18px auto 0;
}

.qb-quote-tool__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--qb-qt-accent, #e4464e);
  color: #fff;
  font: inherit;
  font-size: 20px;
  font-family: var(--qb-qt-font-bold);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  box-shadow: none;
  transition: background-color 0.18s ease;
}

/* Metric draws its glyphs high in the line box, so flex-centred text looks too high
   (UAT 2026-10-01: ~3.7 px on a 54 px button). The label is nudged down by a measured
   amount; the arrow stays centred on the button. Same shift on the form's submit button. */
.qb-quote-tool__next > span:first-child {
  position: relative;
  top: var(--qb-qt-cta-text-shift);
}

.qb-quote-tool__next-arrow {
  display: block;
  width: 13px;
  height: 13px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

.qb-quote-tool__error {
  margin: 10px auto 0;
  color: var(--qb-qt-accent, #e4464e);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.qb-quote-tool__helper {
  margin: 18px auto 0;
  color: #666;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

/* HubSpot V4 form inside the final step. Scoped one level deeper than the theme's
   ".hsfc-Step .hsfc-Step__Content ..." rules (css/includes/forms.css), so these win
   without !important. The theme's valid/invalid input colours are left untouched. */
.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content {
  max-width: 100%;
  margin: 0 auto;
}

/* Field labels = Devis, identical to the module's own "Code postal *" label: bold 17px,
   text colour, and the required "*" in the same colour after a space (V4 prints it red,
   with no space). */
.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-FieldLabel {
  margin-bottom: 8px;
  color: var(--qb-qt-text);
  font-size: 17px;
  font-family: var(--qb-qt-font-bold);
  font-weight: 700;
  line-height: 1.3;
}

.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-FieldLabel .hsfc-FieldLabel__RequiredIndicator {
  margin-left: 0.25em;
  color: inherit;
}

/* 18px between fields and 28px above the button, as on Devis.
   The theme forces "margin-bottom: 5px !important" on every visible row (css/includes/forms.css),
   so the other 13px are added as padding instead of fighting the !important. V4's hidden-field
   rows are display:none and take no space. */
.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-Row {
  padding-bottom: 13px;
}

/* The last row's 5px margin collapses into this one, so 15px (not 10) gives Devis' 28px
   between the last field and the button (13 padding + 15). */
.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow {
  margin-top: 15px;
}

.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-TextInput {
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid #bdbdbd;
  border-radius: 9px;
  background-color: #fff;
  color: var(--qb-qt-text);
  font-family: var(--qb-qt-font);
  font-size: 18px;
  font-weight: 400;
}

.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow .hsfc-NavigationRow__Buttons {
  justify-content: stretch;
}

.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow button {
  width: 100%;
  min-height: 54px;
  /* Top padding = twice the text shift: the content box is centred, so the text moves by half. */
  padding: calc(var(--qb-qt-submit-text-shift) * 2) 26px 0;
  border: 0;
  border-radius: 999px;
  /* The theme paints this button with "background-color: var(--form-button-bg) !important"
     (also on :hover), so the colour is passed through that variable rather than overridden. */
  --form-button-bg: var(--qb-qt-accent, #e4464e);
  background-color: var(--qb-qt-accent, #e4464e);
  color: #fff;
  font-size: 20px;
  font-family: var(--qb-qt-font-bold);
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.18s ease;
}

/* The theme's V4 button moves on hover (-1px) and when pressed (+1px): not here. Same hover
   as the Next button. */
.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow button:hover,
.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow button:focus,
.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow button:active {
  transform: none;
  color: #fff;
}

.qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow button:hover {
  --form-button-bg: #d73f4c;
}

/* A custom property never falls back: on Chrome < 111 the theme's
   "background-color: var(--form-button-bg) !important" turned transparent and "Envoyer" vanished. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow button:hover {
    --form-button-bg: color-mix(in srgb, var(--qb-qt-accent, #e4464e) 94%, #000);
  }
}

/* ---------- Legal line ---------- */

.qb-quote-tool__legal {
  max-width: 750px;
  margin: 16px auto 0;
  color: var(--qb-qt-muted);
  font-size: 10px;
  font-family: var(--qb-qt-font-light);
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
}

.qb-quote-tool__legal p {
  margin: 0;
}

.qb-quote-tool__legal a {
  color: var(--qb-qt-accent, #e4464e);
  text-decoration: underline;
}

/* ==================== Tablet (>= 768px) ==================== */

@media (min-width: 768px) {
  .qb-quote-tool--card .qb-quote-tool__card {
    padding: 32px;
    border-radius: 24px;
  }

  .qb-quote-tool__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  .qb-quote-tool__title {
    width: auto;
    min-width: 0;
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
  }

  .qb-quote-tool__progress {
    flex: 0 0 270px;
    width: auto;
    margin-top: 0;
    margin-left: auto;
  }

  .qb-quote-tool__progress-top {
    gap: 20px;
    min-height: 26px;
    margin-bottom: 10px;
  }

  .qb-quote-tool__back {
    gap: 8px;
    font-size: 17px;
  }

  .qb-quote-tool__back::before {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }

  .qb-quote-tool__progress-label {
    font-size: 18px;
    line-height: 1.2;
  }

  .qb-quote-tool__progress-track {
    gap: 5px;
  }

  .qb-quote-tool__progress-segment {
    height: 7px;
  }

  .qb-quote-tool__divider {
    margin: 26px 0 30px;
  }

  .qb-quote-tool__question {
    margin-bottom: 24px;
    font-size: 24px;
    line-height: 1.2;
    text-align: left;
  }

  /* Desktop card layout: icon + label on top, radio centred underneath. */
  .qb-quote-tool__answers {
    gap: 22px;
  }

  .qb-quote-tool__answers--count-2,
  .qb-quote-tool__answers--count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qb-quote-tool__answers--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qb-quote-tool__answer {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 16px;
    row-gap: 20px;
    min-height: 154px;
    padding: 27px 22px 26px;
    border-radius: 18px;
  }

  .qb-quote-tool__answer:hover {
    box-shadow: 0 8px 22px rgb(0 0 0 / 6%);
    transform: translateY(-2px);
  }

  .qb-quote-tool__answer--no-icon {
    grid-template-columns: minmax(0, 1fr);
  }

  .qb-quote-tool__icon {
    width: 48px;
    height: 48px;
  }

  .qb-quote-tool__answer-label {
    font-size: 21px;
    line-height: 1.15;
  }

  .qb-quote-tool__answer-radio {
    grid-column: 1 / -1;
    justify-self: center;
    width: 31px;
    height: 31px;
  }

  .qb-quote-tool__answer.is-selected .qb-quote-tool__answer-radio {
    border-width: 7px;
  }

  /* Wide icons: one row (icon, label, radio), as in the Devis "alarm" step. */
  .qb-quote-tool__answer--wide-icon {
    grid-template-columns: 70px max-content 31px;
    grid-template-rows: 1fr;
    justify-content: center;
    column-gap: 16px;
  }

  .qb-quote-tool__answer--wide-icon .qb-quote-tool__icon {
    width: 70px;
    height: 46px;
  }

  .qb-quote-tool__answer--wide-icon .qb-quote-tool__answer-radio {
    grid-column: auto;
  }

  .qb-quote-tool__step--final {
    max-width: 560px;
  }

  .qb-quote-tool__form .hsfc-Step .hsfc-Step__Content,
  .qb-quote-tool__postcode {
    max-width: 480px;
  }

  .qb-quote-tool__actions {
    justify-content: flex-end;
    max-width: 480px;
    margin-top: 22px;
  }

  .qb-quote-tool__next {
    width: auto;
    min-width: 185px;
  }

  .qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow .hsfc-NavigationRow__Buttons {
    justify-content: flex-end;
  }

  .qb-quote-tool__form .hsfc-Step .hsfc-Step__Content .hsfc-NavigationRow button {
    width: auto;
    min-width: 185px;
  }

  .qb-quote-tool__helper {
    max-width: 480px;
    margin-top: 22px;
  }

  .qb-quote-tool__legal {
    margin-top: 28px;
    font-size: 13px;
    line-height: 1.45;
  }
}

/* ==================== Desktop (>= 1024px) ==================== */

@media (min-width: 1024px) {
  .qb-quote-tool--card .qb-quote-tool__card {
    padding: 34px 46px 28px;
  }

  .qb-quote-tool__title {
    font-size: 38px;
  }

  .qb-quote-tool__progress {
    flex-basis: 300px;
  }

  .qb-quote-tool__progress-label {
    font-size: 21px;
  }

  .qb-quote-tool__question {
    margin-bottom: 28px;
    font-size: 27px;
  }

  .qb-quote-tool__answers--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .qb-quote-tool__answer-label {
    font-size: 23px;
  }
}

/* Editor-only hint (rendered only when is_in_editor and the module is incomplete). */
.qb-editor-hint {
  padding: 16px 20px;
  border: 2px dashed #c9c9c9;
  border-radius: 12px;
  background: #fafafa;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.qb-editor-hint ul {
  margin: 8px 0 0 18px;
  padding: 0;
}