@charset "UTF-8";
/* =============================================================
   Boiler Quote — Form Layout - 2608211131
   -------------------------------------------------------------
   REPLACES boiler-quote-form-layout-2608191855 — delete that one first.

   CHANGE IN THIS VERSION
     The page now has a FIXED header, so the progress bar sits directly
     beneath it rather than at the top of the viewport, and the section's
     clearance accounts for both. All of it derives from one variable, so
     changing the header height needs no edit here.

   LAYOUT ONLY. Automatic.css owns how the form LOOKS — radios, inputs, the
   note box, buttons, typography, the progress bar's own colours. This file
   only does what ACSS cannot: where the fixed bars sit, and the two custom
   pieces that are not WS Form elements at all.

     ACSS      — colour, type, borders, radius, the look of any form element
     This file — position, flow, the Back button ring, the note image grid

   If something here starts fighting ACSS, this file is the one to cut.

   WHAT MUST BE SET ELSEWHERE, or this does not work
     1. WS Form: Form Settings > Styling > Classes > Form Wrapper = 'bq-quote'
     2. WS Form: the progress field's wrapper class = 'bq-progress-bar'
        and the Back button's wrapper class = 'bq-nav-back'
     3. Bricks: section class 'rm-bq-form-section'
     4. Header section: position fixed, top 0, left 0, right 0, z-index 200,
        with a background — a transparent fixed header lets content read
        through it as the page scrolls
     5. ACSS or Bricks global CSS: --header-height on :root

   WHY --header-height IS NOT DEFINED IN THIS FILE
     It is a design decision about the site, not a property of the quote
     engine, so it belongs with the other tokens. Defining it here as well
     would mean two declarations racing on load order — the kind of thing
     that works on one client site and silently does not on the next. It is
     read with a fallback so a site that forgets to set it still lays out.

   Written as SCSS in WPCodeBox, so // comments are valid.

   Run: Site wide, or limited to the quote pages.
   ============================================================= */
/* ---------- Tokens ---------- */
.bq-quote {
  --bq-bar-width: var(--content-width, 1140px);
  /* panel width above 1024px */
  --bq-bar-pad-x: 0rem;
  /* inset within the panel */
  --bq-bar-pad-y: .75rem;
  --bq-bar-bg: rgba(255, 255, 255, .85);
  /* The fixed header's height. Set on :root in ACSS — the fallback is a
     safety net, not the intended source. */
  --bq-header-height: var(--header-height, 4rem);
}
/* ---------- Top panel: progress ---------- */
/* Sits directly under the fixed header. Deriving 'top' from the same
   variable the header uses means changing the header height moves this
   automatically — there is no second number to keep in step. */
.bq-quote .bq-progress-bar {
  position: fixed;
  top: var(--bq-header-height);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: var(--bq-bar-width);
  max-width: none;
  margin: 0;
  padding: var(--bq-bar-pad-y) var(--bq-bar-pad-x);
  background: var(--bq-bar-bg);
}
.bq-quote .bq-progress-bar .wsf-progress {
  flex: 1 1 auto;
  width: auto;
  height: 8px;
  display: block;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #e6e6e6;
}
.bq-quote .wsf-progress::-webkit-progress-bar {
  background: #e6e6e6;
}
.bq-quote .wsf-progress::-webkit-progress-value {
  background: #ff3d00;
}
.bq-quote .wsf-progress::-moz-progress-bar {
  background: #ff3d00;
}
.bq-quote .bq-progress-bar .wsf-help-post {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
/* ---------- Bottom panel: Back ---------- */
.bq-quote .bq-nav-back {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  width: var(--bq-bar-width);
  max-width: none;
  margin: 0;
  padding: var(--bq-bar-pad-y) var(--bq-bar-pad-x);
  padding-bottom: calc(var(--bq-bar-pad-y) + env(safe-area-inset-bottom, 0px));
  background: var(--bq-bar-bg);
}
/* ---------- 1024px and below: edge to edge, contents inset by gutter ---------- */
@media (max-width: 1024px) {
  .bq-quote .bq-progress-bar, .bq-quote .bq-nav-back {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
    --bq-bar-pad-x: var(--gutter, 1rem);
  }
}
/* ---------- Back button: circled arrow + label ---------- */
/* Strips ACSS button styling — this isn't a normal button.
   The arrow is inline SVG in the WS Form button label, not an icon font
   and not a text glyph, so it renders identically on every platform.
   Label markup:
   <svg class="bq-back-icon" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round" aria-hidden="true" focusable="false">
     <path d="M19 12H5"/><path d="m12 19-7-7 7-7"/>
   </svg>Back                                                            */
form.bq-quote .bq-nav-back button.wsf-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  width: auto !important;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: var(--text-m);
  line-height: 1;
  cursor: pointer;
}
/* The ring, overlaid on the SVG's layout slot */
form.bq-quote .bq-nav-back button.wsf-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25em;
  height: 2.25em;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}
/* Arrow, sized in em off the button's explicit 1rem so inherited
   font sizing can't shrink it */
form.bq-quote .bq-nav-back button.wsf-button .bq-back-icon {
  flex: 0 0 auto;
  width: 2.25em;
  height: 2.25em;
  padding: 0.5em;
  box-sizing: border-box;
  display: block;
}
form.bq-quote .bq-nav-back button.wsf-button:hover {
  opacity: 0.75;
}
form.bq-quote .bq-nav-back button.wsf-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}
/* ---------- Clearance so content isn't hidden ---------- */
/* Three fixed elements sit over this section — the header, the progress
   panel and the Back panel — and none of them takes up space in the flow.
   The top clearance is therefore the header PLUS the progress panel, both
   derived rather than measured, so a change to the header height needs no
   edit here.
   3.5rem is the progress panel's own height: its padding top and bottom
   plus the 8px bar. Adjust it if --bq-bar-pad-y changes. */
.rm-bq-form-section {
  padding-top: calc(var(--header-height, 4rem) + 3.5rem);
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
/* -----------------------------------------------------------------------------
 * NOTE IMAGES
 * Not a WS Form element — this is markup inside an HTML field, so ACSS knows
 * nothing about it. Side by side on desktop, stacked on mobile. The fixed
 * aspect ratio and object-fit keep a pair level even when the two source
 * images differ in shape.
 * -------------------------------------------------------------------------- */
.bq-note-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em;
  width: 100%;
}
.bq-note-images--single {
  grid-template-columns: 1fr;
  max-width: 46rem;
  margin-inline: auto;
}
.bq-note-images img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.3333333333;
  object-fit: cover;
  /* ACSS cannot reach these — they are raw img tags inside an HTML field,
     not a WS Form element — so the radius is set here. It reads the site's
     own token where one exists and falls back where it does not. */
  border-radius: var(--radius, 8px);
}
/* MEDIA QUERY ------S----*/
@media (max-width: 478px) {
  .bq-note-images--single {
    max-width: 32rem;
  }
}
#ws-form-3 .wsf-grid {
  row-gap: var(--content-gap);
}
#ws-form-3 [data-type="html"] h3 {
  font-weight: 500;
  margin-bottom: 0.2em;
}
#ws-form-3 [data-type="html"] p {
  color: var(--text-dark-muted);
}
#ws-form-3 .wsf-alert-information {
  font-size: var(--text-s);
  background-color: var(--info-ultra-light);
  border-color: var(--info);
}
#ws-form-3 .wsf-alert-information p:last-of-type {
  margin-top: 1em;
}
#ws-form-3 [data-type="radio"] {
  margin-top: 0.6em;
}
#ws-form-3 [data-row-radio] {
  margin-bottom: 1em;
}
#wsf-3-field-wrapper-178 {
  text-align: center;
}
#wsf-3-field-wrapper-178 h3 {
  width: 24ch;
  margin-inline: auto;
}
#wsf-3-field-wrapper-178 p {
  max-width: 40rem;
  margin-inline: auto;
}
#wsf-3-field-wrapper-151 {
  margin-bottom: -1em;
  max-width: 40rem !important;
  margin-inline: auto !important;
}
#wsf-3-field-wrapper-152 {
  max-width: 40rem !important;
  margin-inline: auto !important;
}
#wsf-3-field-wrapper-128 {
  margin-bottom: -1em;
}
#wsf-3-field-wrapper-166 {
  margin-bottom: 0;
}