/* Franco Roofing, step by step estimate wizard.
   Loaded ONLY by quote.html so site.css stays untouched for every other page.
   One question per screen, tap to answer, auto advance. Tokens come from
   site.css; nothing here invents a colour or a radius of its own. */

/* PROGRESSIVE ENHANCEMENT GATE.
   Everything that only works with JS hangs off .is-wiz, which quote-wizard.js
   adds to the form. If that file fails to load the visitor still gets a plain
   long form with real selects and a working submit, which is exactly what this
   page shipped with before. Never move a rule out from behind this gate. */
.wiz__head,
.wiz__bar,
.wiz__opts,
.wiz__recap { display: none; }

.is-wiz .wiz__bar { display: block; }
.is-wiz .wiz__opts { display: grid; }
.is-wiz .wiz__recap { display: flex; }
.is-wiz .wiz__step { display: none; }
.is-wiz .wiz__step.is-active { display: block; animation: wizIn 320ms var(--e-entrance) both; }
/* the select is the field of record; once the buttons work it goes away */
.is-wiz .field--native { display: none; }
.is-wiz .wiz__next { display: inline-flex; }
.wiz__next { display: none; }

.is-wiz .wiz__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  min-height: 32px;
}

.wiz__back {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 2px;
  margin: -6px 0 -6px -2px;
  font: 500 var(--t-xs)/1 var(--f-sans);
  letter-spacing: .01em;
  color: var(--slate);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sm);
  transition: color var(--d-ui) var(--e-ui);
}
.wiz__back svg { width: 13px; height: 13px; flex: none; }
.wiz__back:hover { color: var(--ink); }
.wiz__back:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.wiz__back[hidden] { display: none; }

.wiz__count {
  margin: 0 0 0 auto;
  font: 600 var(--t-eyebrow)/1 var(--f-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-2);
  font-variant-numeric: tabular-nums;
}

.wiz__bar {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  overflow: hidden;
  margin-bottom: var(--s-6);
}
.wiz__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--clay);
  transition: width 420ms var(--e-entrance);
}

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

/* without JS every question is simply visible, stacked, like a normal form */
.wiz__step + .wiz__step { margin-top: var(--s-6); }

@keyframes wizIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.wiz__q {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
/* the wizard focuses this heading on every step so screen readers announce the
   new question; it is not interactive, so it must not paint a focus ring */
.wiz__q:focus { outline: none; }
.wiz__hint {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--slate);
}

/* ---- options -------------------------------------------------------- */

/* display lives ONLY in the .is-wiz gate above. Re-declaring it here would
   override the gate by source order and show dead buttons when JS is absent. */
.wiz__opts {
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.wiz__opts--split { grid-template-columns: 1fr 1fr; }

.opt {
  appearance: none;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  text-align: left;
  padding: 14px var(--s-4);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  font: 500 var(--t-body)/1.35 var(--f-sans);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color var(--d-ui) var(--e-ui),
    background var(--d-ui) var(--e-ui),
    box-shadow var(--d-ui) var(--e-ui),
    transform var(--d-ui) var(--e-ui);
}
.opt:hover {
  border-color: rgba(168, 72, 31, .45);
  box-shadow: var(--sh-2);
  transform: translateY(-1px);
}
.opt:active { transform: translateY(0); }
.opt:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.opt__tick {
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  transition: border-color var(--d-ui) var(--e-ui), background var(--d-ui) var(--e-ui);
}
.opt__tick svg {
  width: 11px;
  height: 11px;
  stroke: var(--paper-3);
  stroke-width: 2.4;
  fill: none;
  opacity: 0;
  transform: scale(.6);
  transition: opacity 160ms var(--e-ui), transform 160ms var(--e-ui);
}

.opt.is-picked {
  border-color: var(--clay);
  background: var(--clay-soft);
  box-shadow: var(--sh-2);
}
.opt.is-picked .opt__tick { border-color: var(--clay); background: var(--clay); }
.opt.is-picked .opt__tick svg { opacity: 1; transform: none; }

/* ---- contact step --------------------------------------------------- */

.wiz__step .form__row { margin-top: var(--s-5); }
.wiz__step .field + .field { margin-top: var(--s-4); }

.wiz__leak {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid rgba(168, 72, 31, .3);
  background: var(--clay-soft);
}
.wiz__leak p { margin: 0 0 var(--s-3); font-size: var(--t-sm); line-height: 1.5; color: var(--ink); }
.wiz__leak[hidden] { display: none; }

.wiz__other { margin-top: var(--s-4); }
.wiz__other[hidden] { display: none; }

.wiz__submit { margin-top: var(--s-5); }

/* the recap keeps the visitor oriented on the last screen without
   sending them back through the flow to check what they picked. It sits
   ABOVE the contact fields: below the submit button it collides with the
   fixed call bar on a phone. */
.wiz__recap {
  margin: var(--s-4) 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
  gap: var(--s-2);
}
.wiz__chip {
  font: 500 var(--t-xs)/1 var(--f-sans);
  color: var(--slate);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  padding: 7px 12px;
}

@media (max-width: 480px) {
  .wiz__opts--split { grid-template-columns: 1fr; }
  .opt { min-height: 54px; font-size: var(--t-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .wiz__step.is-active { animation: none; }
  .wiz__fill { transition: none; }
  .opt, .opt__tick, .opt__tick svg { transition: none; }
  .opt:hover { transform: none; }
}