/* =====================================================================================================
   schoorsteenverwijdering.nl  app.css  (calculator and quote request)
   Builds on site.css: tokens and shared components (.btn .field .input .callout ...). Only what is specific
   to the tools lives here; tokens are never redefined. Fallbacks after var() keep it readable without site.css.
   Colour code: the part that goes = brick (--accent, dashed), the part that stays = slate (--ink-2).
   ===================================================================================================== */

.wr-app [hidden] { display: none !important; }
.wr-app { color: var(--ink, #1f2933); }
.wr-app *, .wr-app *::before, .wr-app *::after { box-sizing: border-box; }
.wr-app :where(h2, h3, h4) { margin: 0; }
.wr-app p { margin: 0 0 .75rem; }
.wr-app .icon { width: 20px; height: 20px; flex: none; vertical-align: -.25em; }
.wr-app .sv-ic--sm { width: 16px; height: 16px; }
.wr-app .callout { margin: .75rem 0; }
.wr-loading { display: flex; align-items: center; gap: .6rem; margin: 0; padding: 1.25rem 0; color: var(--ink-2, #3e4c59); }
.sv-link {
  display: inline; padding: 0; border: 0; background: none; color: var(--accent-ink, #8a3721); font: inherit;
  text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
}
.sv-link:hover { color: var(--ink, #1f2933); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------------------------- card + progress */
.sv-calc { container-type: inline-size; }
.sv-calc__card {
  max-width: 48rem; margin: 0 auto; padding: clamp(1rem, 4vw, 1.75rem);
  background: var(--surface, #f5f7fa); border: 1px solid var(--line, #dde3ea); border-radius: var(--radius, 14px);
}
.sv-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0 0 .75rem; }
.sv-progress__label { margin: 0 !important; font-size: .875rem; font-weight: 600; color: var(--accent-ink, #8a3721); }
.sv-progress__bar { flex: 1 1 8rem; height: 4px; border-radius: 2px; background: var(--slate-line, #cfd8df); overflow: hidden; }
.sv-progress__bar span { display: block; height: 100%; background: var(--accent, #a8452b); border-radius: 2px; transition: width .25s ease; }

.sv-step__title { margin: 0 0 1rem !important; font-size: clamp(1.25rem, 1.08rem + .8vw, 1.5rem); line-height: 1.25; }
.sv-step__title:focus { outline: none; }
.sv-q + .sv-q { margin-top: 1.4rem; }
.sv-q__title { margin: 0 0 .6rem !important; font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.sv-q__hint { margin: -.35rem 0 .7rem !important; font-size: .9375rem; color: var(--ink-2, #3e4c59); }
.sv-q .field__error { margin: -.2rem 0 .6rem; }

/* ---------------------------------------------------------------------------------------- answer tiles */
.sv-tiles { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
.sv-tile {
  position: relative; display: flex; align-items: center; gap: .75rem; min-height: 54px; padding: .7rem 1rem;
  background: var(--card, #fff); border: 1px solid var(--slate-line, #cfd8df); border-radius: var(--radius-sm, 10px);
  cursor: pointer; line-height: 1.35;
}
.sv-tile:hover { border-color: var(--ink-2, #3e4c59); }
.sv-tile__input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--accent, #a8452b); }
.sv-tile:has(.sv-tile__input:checked), .sv-tile.is-on {
  border-color: var(--accent, #a8452b); background: var(--accent-soft, #f7ece8); box-shadow: inset 0 0 0 1px var(--accent, #a8452b);
}
.sv-tile:has(.sv-tile__input:focus-visible) { outline: 3px solid var(--focus, #a8452b); outline-offset: 2px; }
.sv-tile__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sv-tile__t { font-weight: 500; }
.sv-tile__s { font-size: .875rem; color: var(--ink-2, #3e4c59); }
.sv-tile__art { display: flex; flex: none; }
.sv-art { display: block; }
.has-error .sv-tile { border-color: var(--danger, #b42318); }

/* scope: picture left, text right */
.sv-tiles--deel .sv-tile { align-items: center; padding: .65rem .9rem; }
.sv-tiles--deel .sv-art { width: 56px; height: 56px; }

/* small picture tiles (house type, roof): picture on top */
.sv-tiles--woning, .sv-tiles--dak { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-tiles--woning .sv-tile, .sv-tiles--dak .sv-tile {
  flex-direction: column; justify-content: center; gap: .35rem; padding: .7rem .5rem .6rem; text-align: center;
}
.sv-tiles--woning .sv-tile__input, .sv-tiles--dak .sv-tile__input { position: absolute; top: .55rem; left: .55rem; width: 1.05rem; height: 1.05rem; }
.sv-tiles--woning .sv-tile__t, .sv-tiles--dak .sv-tile__t { font-size: .9375rem; }
.sv-tiles--woning .sv-art, .sv-tiles--dak .sv-art { width: 64px; height: 40px; }

/* number-like answers: big centred tiles */
.sv-tiles--lagen, .sv-tiles--bouwjaar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-tiles--lagen .sv-tile, .sv-tiles--bouwjaar .sv-tile { flex-direction: column; justify-content: center; gap: .1rem; padding: .6rem .4rem; text-align: center; }
.sv-tiles--lagen .sv-tile__input, .sv-tiles--bouwjaar .sv-tile__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sv-tiles--lagen .sv-tile__text, .sv-tiles--bouwjaar .sv-tile__text { align-items: center; }
.sv-tiles--lagen .sv-tile__t { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-tiles--lagen .sv-tile__s { font-size: .8125rem; }
.sv-tiles--bouwjaar .sv-tile__t { font-weight: 600; }

@container (min-width: 560px) {
  .sv-tiles--deel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-tiles--woning { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sv-tiles--dak { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-tiles--maat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-tiles--maat .sv-tile { align-items: flex-start; }
  .sv-tiles--maat .sv-tile__input { margin-top: .15rem; }
  .sv-tiles--afwerking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-tiles--afwerking .sv-tile { align-items: flex-start; }
  .sv-tiles--afwerking .sv-tile__input { margin-top: .15rem; }
}

/* ---------------------------------------------------------------------------------------- navigation */
.sv-nav {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px solid var(--line, #dde3ea);
}
.sv-nav__next { min-width: 10rem; }
.sv-nav__back { padding-inline: .6rem; }
.sv-privacy { display: flex; align-items: flex-start; gap: .45rem; margin: 1rem 0 0 !important; font-size: .875rem; color: var(--ink-2, #3e4c59); }
.sv-privacy .icon { width: 18px; height: 18px; margin-top: .1em; color: var(--accent, #a8452b); }

/* ---------------------------------------------------------------------------------------- outcome */
.sv-outcome__eyebrow { margin: 0 0 .3rem !important; font-size: .875rem; font-weight: 600; color: var(--accent-ink, #8a3721); }
.sv-outcome__sentence { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.875rem) !important; line-height: 1.25; margin-bottom: .5rem !important; }
.sv-outcome__amount { color: var(--accent-ink, #8a3721); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-outcome__for { font-size: .9375rem; color: var(--ink-2, #3e4c59); }
.sv-outcome__h { margin: 1.5rem 0 .4rem !important; font-size: 1.0625rem; }
.sv-outcome__drivers { margin-top: .75rem !important; font-size: .9375rem; color: var(--ink-2, #3e4c59); }

.sv-lines { list-style: none; margin: 0; padding: 0; }
.sv-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label amount" "bar bar";
  align-items: baseline; gap: .3rem .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line, #dde3ea);
}
.sv-line__label { grid-area: label; min-width: 0; line-height: 1.35; }
.sv-line__note { display: block; font-size: .8125rem; color: var(--ink-2, #3e4c59); }
.sv-line__amount { grid-area: amount; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-line__bar { grid-area: bar; position: relative; height: 8px; border-radius: 4px; background: var(--bg-2, #eef2f6); }
.sv-line__range { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--accent, #a8452b); }
.sv-line--total { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--ink, #1f2933); margin-top: -1px; }
.sv-line--total .sv-line__bar { display: none; }
.sv-line--extra .sv-line__range { background: repeating-linear-gradient(135deg, var(--accent-line, #e8c9bf) 0 4px, var(--accent, #a8452b) 4px 6px); }
.sv-line--extra .sv-line__amount { color: var(--ink-2, #3e4c59); }
.sv-line--extra .sv-line__amount::before { content: "+ "; }
.sv-line--ask .sv-line__bar { visibility: hidden; }
.sv-line--ask .sv-line__amount { color: var(--ink-2, #3e4c59); font-style: italic; white-space: normal; }
@container (min-width: 620px) {
  .sv-line { grid-template-columns: minmax(0, 1.5fr) minmax(6rem, 1fr) 10.5rem; grid-template-areas: "label bar amount"; align-items: center; }
  .sv-line--total .sv-line__bar { display: block; visibility: hidden; }
}

.sv-quote {
  margin: 1.5rem 0 .5rem; padding: 1.2rem 1.3rem; background: var(--card, #fff);
  border: 1px solid var(--accent-line, #e8c9bf); border-left: 4px solid var(--accent, #a8452b); border-radius: var(--radius-sm, 10px);
}
.sv-quote h3 { margin: 0 0 .4rem; font-size: 1.1875rem; }
.sv-quote__note { display: flex; gap: .4rem; align-items: flex-start; margin: .75rem 0 0 !important; font-size: .875rem; color: var(--ink-2, #3e4c59); }
.sv-quote__note .icon { width: 18px; height: 18px; color: var(--accent, #a8452b); margin-top: .1em; }
.sv-notes .callout__title { font-size: 1rem; }
.sv-outcome__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.25rem; }
.sv-outcome__src { margin: 1rem 0 0 !important; font-size: .8125rem; color: var(--ink-2, #3e4c59); }
.sv-outcome__src a { color: var(--accent-ink, #8a3721); }

@media (prefers-reduced-motion: reduce) { .sv-progress__bar span { transition: none; } }
@media print {
  .sv-nav, .sv-outcome__actions, .sv-quote .btn { display: none !important; }
  .sv-calc__card { border: 0; padding: 0; background: none; }
  .sv-line__range { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------------------------------------------------------------------------------------- quote request page */
.sv-offerte { max-width: 48rem; }
.sv-offerte__summary {
  margin: 0 0 1.25rem; padding: 1rem 1.2rem; background: var(--surface, #f5f7fa);
  border: 1px solid var(--line, #dde3ea); border-left: 4px solid var(--accent, #a8452b); border-radius: var(--radius-sm, 10px);
}
.sv-offerte__summary--empty { border-left-color: var(--line, #dde3ea); }
.sv-offerte__summary p { margin: 0 0 .35rem; }
.sv-offerte__summary p:last-child { margin-bottom: 0; }
.sv-offerte__eyebrow { font-size: .875rem; font-weight: 600; color: var(--accent-ink, #8a3721); }
.sv-offerte__what { font-weight: 500; }
.sv-offerte__price { font-size: .9375rem; color: var(--ink-2, #3e4c59); }
.sv-offerte__price strong { color: var(--ink, #1f2933); font-variant-numeric: tabular-nums; }
.sv-offerte__frame { display: block; width: 100%; min-height: 760px; border: 1px solid var(--line, #dde3ea); border-radius: var(--radius, 14px); background: #fff; }