/* Woningalert wizard – the five-step sign-up, and the same steps in edit mode
 * on the account page.
 *
 * Loaded by /woningalert, /en/home-alert and /account. The first two define the
 * design-system tokens below in their own <style>, which comes after this file
 * and therefore wins; the :root block here is what makes the wizard render
 * correctly on the plainer account page, which has no such system.
 */

:root {
  --color-paper:    #f6f4ef;
  --color-paper-2:  #f1eee7;
  --color-paper-3:  #e9e5dc;
  --color-card:     #fffdf9;
  --color-ink:      #13191a;
  --color-ink-2:    #3b4244;
  --color-ink-3:    #6b7275;
  --color-border:   #e3e0d8;
  --color-border-2: #d7d3c8;
  --color-accent:      #e6c260;
  --color-accent-deep: #c9a03c;
  --color-accent-soft: rgba(230, 194, 96, .16);
  --color-accent-2-deep: #1F3A3D;
  --color-error:    #b3261e;
  --radius-sm:      8px;
  --radius-card:    14px;
  --shadow-card:    0 2px 10px rgba(0, 0, 0, .05);
  --dur-short:      .16s;
  --ease-out:       cubic-bezier(.2, .7, .3, 1);
}

/* ────────────────────  WONINGALERT WIZARD  ──────────────────── */
.wa-section { padding: 3.5rem 0 5rem; background: var(--color-paper-2); border-block: 1.5px solid var(--color-border); }
.wa-shell { max-width: 780px; margin: 0 auto; }
.wa-card {
  background: var(--color-card); border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-card); padding: 2rem 2rem 2.2rem; box-shadow: var(--shadow-card);
}
@media (max-width: 640px) { .wa-card { padding: 1.4rem 1.15rem 1.6rem; } }

/* Progress */
.wa-steps { display: flex; gap: .4rem; list-style: none; margin: 0 0 1.8rem; padding: 0; flex-wrap: wrap; }
.wa-steps li { flex: 1 1 0; min-width: 64px; }
.wa-steps button {
  width: 100%; background: none; border: 0; padding: 0; cursor: default; text-align: left;
  font: inherit; color: var(--color-ink-3); font-size: .78rem; font-weight: 600;
}
.wa-steps button .bar { display: block; height: 4px; border-radius: 99px; background: var(--color-border-2); margin-bottom: .4rem; transition: background var(--dur-short) var(--ease-out); }
.wa-steps li.done button { color: var(--color-ink-2); cursor: pointer; }
.wa-steps li.done button .bar { background: var(--color-accent-deep); }
.wa-steps li.current button { color: var(--color-ink); }
.wa-steps li.current button .bar { background: var(--color-accent); }

.wa-h { font-family: var(--font-display, inherit); font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; }
.wa-lead { color: var(--color-ink-2); margin: 0 0 1.6rem; font-size: .95rem; }
/* A heading with nothing under it takes the lead's bottom margin itself. */
.wa-h-solo { margin-bottom: 1.4rem; }

/* Fields */
.wa-field { margin-bottom: 1.15rem; }
.wa-field > label, .wa-legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.wa-hint { font-size: .82rem; color: var(--color-ink-3); margin-top: .35rem; }
.wa-input, .wa-select, .wa-textarea {
  width: 100%; padding: .68rem .8rem; font: inherit; font-size: .95rem;
  background: var(--color-paper); color: var(--color-ink);
  border: 1.5px solid var(--color-border-2); border-radius: var(--radius-sm);
  transition: border-color var(--dur-short) var(--ease-out);
}
.wa-input:focus, .wa-select:focus, .wa-textarea:focus { outline: 2px solid var(--color-accent-2-deep); outline-offset: 1px; border-color: var(--color-accent-2-deep); }
.wa-input[readonly] { background: var(--color-paper-3); color: var(--color-ink-2); }
.wa-textarea { min-height: 96px; resize: vertical; }
.wa-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .wa-pair { grid-template-columns: 1fr; } }
.wa-err { color: var(--color-error, #b3261e); font-size: .82rem; margin-top: .3rem; font-weight: 500; }
.wa-input.has-err, .wa-select.has-err { border-color: var(--color-error, #b3261e); }
.wa-suffix { position: relative; }
.wa-suffix .unit { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--color-ink-3); font-size: .85rem; pointer-events: none; }
.wa-suffix .wa-input { padding-right: 2.6rem; }

/* Area search */
.wa-search-wrap { position: relative; }
.wa-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--color-card); border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card); overflow: hidden; max-height: 300px; overflow-y: auto;
}
.wa-results button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: .6rem .8rem; font: inherit; font-size: .92rem; cursor: pointer; color: var(--color-ink);
}
.wa-results button:hover, .wa-results button:focus { background: var(--color-accent-soft); }
.wa-results .lvl { color: var(--color-ink-3); font-size: .8rem; }
.wa-results .empty { padding: .7rem .8rem; color: var(--color-ink-3); font-size: .9rem; }

/* Chips */
.wa-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.wa-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .5rem .35rem .7rem;
  background: var(--color-accent-soft); border: 1.5px solid var(--color-accent);
  border-radius: 99px; font-size: .85rem; font-weight: 500;
}
.wa-chip button { background: none; border: 0; cursor: pointer; color: var(--color-ink-2); font-size: 1.05rem; line-height: 1; padding: 0 .15rem; }
.wa-chip button:hover { color: var(--color-error, #b3261e); }
.wa-note { margin-top: .7rem; padding: .6rem .8rem; background: var(--color-accent-soft); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); font-size: .86rem; }
.wa-empty { color: var(--color-ink-3); font-size: .9rem; margin-top: .7rem; }

/* Map */
/* position/overflow are for the hint below: it is absolutely placed inside
   this box and must be clipped to its rounded corners. Leaflet sets both on
   its container too, but relying on another library's reset for our own
   layout is how things break on an upgrade. */
.wa-map { height: 340px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border-2); margin-top: 1rem; z-index: 1; position: relative; overflow: hidden; }
.wa-map.is-drawing { cursor: crosshair; }
/* OpenStreetMap's land colour, shown while tiles load, so the map fills in
   rather than flashing Leaflet's default grey first. */
.wa-map.leaflet-container { background: #f2efe9; }

/* While drawing, the whole area box (search field, chips, map, buttons)
   takes the viewport: a 340px strip is too small to place points with any
   care. The map is the flexible row; everything else keeps its natural
   height and shrinks its spacing. Leaflet notices the new size through the
   controller's ResizeObserver. */
.wa-area.is-expanded {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column;
  padding: .8rem clamp(.8rem, 2.5vw, 1.5rem) .9rem;
  background: var(--color-paper); overflow: hidden;
}
.wa-area.is-expanded .wa-field { margin-bottom: .55rem; }
.wa-area.is-expanded .wa-field > label, .wa-area.is-expanded .wa-legend { margin-bottom: .25rem; }
.wa-area.is-expanded .wa-chips, .wa-area.is-expanded .wa-empty { margin-top: .3rem; }
.wa-area.is-expanded .wa-hint { margin: 0; }
.wa-area.is-expanded .wa-map { flex: 1 1 0; min-height: 0; height: auto; margin-top: .45rem; }
.wa-area.is-expanded .wa-map-bar { margin-top: .6rem; }
body.wa-drawing { overflow: hidden; }
/* The wizard sits inside the page hero, which isolates its stacking context
   (for the photo layers behind it). A fixed box inside an isolated ancestor
   cannot rise above the sections that follow, so the isolation is lifted for
   the duration of the drawing. The photo layers lose their place for that
   moment, unseen behind the full-viewport map. */
body.wa-drawing .hero { isolation: auto; }
/* Only while the map has not been clicked, and only when the pointer is over
   it: a permanent label would be noise, and one that never appears would leave
   the wheel looking broken. */
.wa-map-hint {
  position: absolute; inset: auto 0 0 0; z-index: 500;
  padding: .45rem .7rem; text-align: center;
  background: color-mix(in oklch, var(--color-ink) 78%, transparent);
  color: var(--color-paper); font-size: .8rem; font-weight: 600;
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out);
  pointer-events: none;
}
.wa-map:hover .wa-map-hint { opacity: 1; }
.wa-map.zoom-armed .wa-map-hint { opacity: 0; }
.wa-map-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; }
.wa-mini {
  background: var(--color-card); border: 1.5px solid var(--color-border-2); border-radius: var(--radius-sm);
  padding: .42rem .8rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--color-ink);
}
.wa-mini:hover { border-color: var(--color-accent-deep); }
.wa-mini.primary { background: var(--color-accent); border-color: var(--color-accent-deep); }
.wa-mini.danger:hover { border-color: var(--color-error, #b3261e); color: var(--color-error, #b3261e); }

/* Choice cards */
.wa-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .wa-choices { grid-template-columns: 1fr; } }
.wa-choice {
  text-align: left; background: var(--color-card); border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem; cursor: pointer; font: inherit;
  transition: border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.wa-choice:hover { border-color: var(--color-accent-deep); }
.wa-choice.on { border-color: var(--color-accent-deep); background: var(--color-accent-soft); }
.wa-choice .t { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .25rem; }
.wa-choice .tick { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--color-border-2); flex-shrink: 0; display: grid; place-items: center; font-size: .72rem; color: transparent; background: var(--color-paper); }
.wa-choice.on .tick { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: #fff; }
.wa-choice .s { font-size: .84rem; color: var(--color-ink-3); line-height: 1.45; }

/* Renovation scale */
.wa-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
@media (max-width: 620px) { .wa-scale { grid-template-columns: 1fr; } }
.wa-rung {
  background: var(--color-card); border: 1.5px solid var(--color-border-2); border-radius: var(--radius-sm);
  padding: .7rem .6rem; cursor: pointer; font: inherit; text-align: center;
  transition: border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
@media (max-width: 620px) { .wa-rung { text-align: left; display: flex; align-items: baseline; gap: .6rem; } }
.wa-rung:hover { border-color: var(--color-accent-deep); }
.wa-rung.on { border-color: var(--color-accent-deep); background: var(--color-accent-soft); }
.wa-rung .n { display: block; font-size: 1.05rem; font-weight: 700; color: var(--color-ink-2); margin-bottom: .15rem; }
.wa-rung.on .n { color: var(--color-ink); }
.wa-rung .lbl { display: block; font-size: .8rem; font-weight: 600; line-height: 1.3; }
.wa-rung-example { margin-top: .8rem; padding: .65rem .85rem; background: var(--color-paper-3); border-radius: var(--radius-sm); font-size: .87rem; color: var(--color-ink-2); min-height: 2.6rem; }

/* Energy labels */
.wa-labels { display: flex; flex-wrap: wrap; gap: .35rem; }
.wa-labels button {
  min-width: 3.1rem; padding: .42rem .5rem; font: inherit; font-size: .84rem; font-weight: 700;
  background: var(--color-card); border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-ink);
}
.wa-labels button:hover { border-color: var(--color-accent-deep); }
/* The inline style set by energyStyle() carries the report's own colour for the
   chosen label and wins over this rule; this stays as the fallback for a
   browser that dropped the inline style, and to keep the shape consistent. */
.wa-labels button.on { background: var(--color-accent); border-color: var(--color-accent-deep); }
.wa-labels button { transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }

/* Summary */
.wa-summary { border: 1.5px solid var(--color-border-2); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.4rem; }
.wa-summary-row { display: flex; gap: 1rem; padding: .7rem .9rem; border-top: 1px solid var(--color-border); font-size: .9rem; }
.wa-summary-row:first-child { border-top: 0; }
.wa-summary-row dt { flex: 0 0 40%; color: var(--color-ink-3); margin: 0; }
.wa-summary-row dd { margin: 0; flex: 1; overflow-wrap: anywhere; }
.wa-price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: var(--color-accent-soft); border: 1.5px solid var(--color-accent); border-radius: var(--radius-sm); margin-bottom: .6rem; }
.wa-price .amt { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.wa-price .lbl { font-size: .85rem; color: var(--color-ink-2); }
.wa-price-sub { font-size: .85rem; color: var(--color-ink-2); margin-bottom: 1.2rem; }
.wa-terms { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; margin-bottom: 1.1rem; }
.wa-terms input { margin-top: .2rem; width: 17px; height: 17px; flex-shrink: 0; }

/* Nav */
.wa-nav { display: flex; gap: .7rem; align-items: center; margin-top: 1.6rem; }
.wa-nav .spacer { flex: 1; }
.wa-back { background: none; border: 0; font: inherit; font-weight: 600; color: var(--color-ink-2); cursor: pointer; padding: .5rem .2rem; }
.wa-back:hover { color: var(--color-ink); }
.wa-global-err { margin-top: 1rem; padding: .7rem .9rem; background: #fbe9e7; color: #b3261e; border-radius: var(--radius-sm); font-size: .9rem; }
.wa-done { text-align: center; padding: 1.5rem 0; }
.wa-done .big { font-size: 2.4rem; line-height: 1; margin-bottom: .8rem; }
.wa-spinner { width: 26px; height: 26px; border: 3px solid var(--color-border-2); border-top-color: var(--color-accent-deep); border-radius: 50%; animation: waspin .9s linear infinite; margin: 0 auto 1rem; }
@keyframes waspin { to { transform: rotate(360deg); } }

[v-cloak] { display: none; }