/* ============================================================
   DEPLOY-MARKER: 2026-08-18b
   Bump deze regel bij elke deploy. Hij is op te vragen via
   /static/css/calculator.css en bewijst dat collectstatic is
   gedraaid, want dit bestand komt niet rechtstreeks uit de repo.
   ============================================================
   WhisperRing Calculator — shared styles
   Ported from references/frontend-v2-design/css/styles.css;
   app-specific additions live at the bottom of this file.
   Palette & style aligned to whisperring.nl:
   ink brand surface (near-black), mint-green art accent,
   clean sans-serif, calm light layout.
   ============================================================ */
:root{
  /* brand */
  --brand:#5fa78f;          /* whisperring mint-green */
  --brand-deep:#3f8a72;     /* deeper green for text/contrast */
  --wr-brown:#9c4a2a;       /* pitchdeck turbine-name rust brown */
  --brand-tint:#eef6f2;
  --brand-line:#cfe7da;

  /* ink / surface from logo's black field */
  --ink:#0f1c17;            /* near-black brand surface */
  --ink-2:#16261f;
  --heading:#1f2b29;        /* warm bijna-zwart: koppen, labels, iconen (investor-palet) */
  --text:#39443f;           /* warm donkergrijs body, dichter bij zwart voor leesbaarheid */
  --muted:#78857c;          /* warm grijs helper */
  --line:#e4e9f0;           /* hairlines */
  --line-strong:#c7d4e2;    /* stronger hairline: radio dots, dividers, hover borders */
  --paper:#f2ede3;          /* warm crème accent (hover-states, sticky submit) */
  --page:#f2ede3;           /* pagina-achtergrond: beige, gelijk aan admin bg-paper (witte vakken poppen op) */
  --card:#ffffff;
  --card-mint:#d0e4da;      /* invoerkaart-oppervlak, zacht sage-mint */
  --card-mint-line:#8fbaa4; /* invoerkaart-rand, duidelijke sage */

  /* metric accents */
  --green-tint:#edf7f1; --green-fg:#2f7a63; --green-bd:#cfe7da;
  --blue-tint:#eaf1fb;  --blue-fg:#2f6bb5;  --blue-bd:#cfe0f5;
  --amber-tint:#fdf3e7; --amber-fg:#9a5f18; --amber-bd:#f6e0c4;
  --amber-text:#7a6534; --amber-soft:#f4a259;
  --slate-tint:#f3f6fa; --slate-fg:#46586d;
  --panel-cool:#d8e1ee;     /* koele slate-tint voor de MWF-contactkaart (contrast met de pagina) */
  --navy:#2b4670; --navy-line:#b9c6da;   /* navy accent: download-knop (mat) + start-new outline */
  /* Metric-kaart achtergronden: meer aanwezig dan de pale -tint -> meer contrast. */
  --m-green:#d3ebdb; --m-amber:#f6e2c4; --m-blue:#d6e4f8; --m-slate:#e0e8f2;
  --benefit-bg:#dce6f2;     /* Key Benefits: koel navy-blauw i.p.v. groen */

  /* type scale — use these instead of ad-hoc pixel sizes */
  --fs-xs:12px;    /* helpers, errors, overlines */
  --fs-sm:13px;    /* secondary text, captions */
  --fs-base:14px;  /* inputs, controls */
  --fs-md:15px;    /* buttons, intro text, emphasised labels */
  --fs-lg:17px;    /* card titles */
  --fs-xl:19px;    /* section heads */
  --fs-2xl:21px;   /* feature names */
  --fs-metric:30px;/* metric values */

  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(15,28,23,.04), 0 14px 36px -16px rgba(15,28,23,.16);
  --shadow-soft:0 1px 2px rgba(15,28,23,.03), 0 8px 22px -14px rgba(15,28,23,.12);
  /* Kaart-elevatie resultatenpagina: gelijk aan de invoerkaarten (--elev),
     hero net iets sterker zodat het hoofdgetal naar voren komt. */
  --elev:0 1px 3px rgba(31,43,41,.05), 0 12px 30px -14px rgba(31,43,41,.22);
  --elev-hero:0 1px 3px rgba(31,43,41,.04), 0 18px 40px -20px rgba(31,43,41,.17);
  --font:"Aptos","Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --font-title:"Aptos","Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  /* Sage main-title colour, darkened from whisperring.nl's #82aaa4 to pass
     WCAG large-text contrast (>=3:1) on the light page background. */
  --brand-title:#000000;    /* zwarte hoofdtiteltekst */
  --section-title:#3a3a3a;  /* soft charcoal for section titles (less harsh than pure black) */

  /* controls, feedback & interaction (added in redesign; dark overrides below) */
  --field:#ffffff;          /* input / control / popover surface */
  --placeholder:#aab6c5;    /* input placeholder */
  --btn-disabled:#cfd9e4;   /* disabled primary button */
  --danger:#c0392b; --danger-strong:#b91c1c;
  --danger-tint:#fef2f2; --danger-line:#fecaca; --danger-ring:rgba(192,57,43,.12);
  --focus:0 0 0 3px rgba(95,167,143,.15);
  --btn-brand:#5fa78f; --btn-brand-deep:#3f8a72;  /* CTA gradient — same in dark so white text keeps contrast */
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--page);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  min-height:100vh;
}
.wrap{max-width:1360px;margin:0 auto;padding:38px 28px 80px}

/* ---------- Header ---------- */
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:6px;
}
.page-head-text{flex:1;min-width:0}
/* Logo + "Powered by" direct op de pagina, zonder vak/rand/schaduw. */
.page-head-logo{
  display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;
  padding:4px 0;
}
.page-head-logo a{display:block;line-height:0}
.page-head-logo img{height:76px;width:auto;display:block}
.powered{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wr-brown);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--wr-brown)}
/* Titles share the body font (Aptos); colour stays as-is */
h1,h2,h3,h4,.metrics-head,.benefits-head,.contact-name,.disclaimer-head,.metric-label{
  font-family:var(--font-title)
}
h1{
  font-size:clamp(26px,3.4vw,40px);line-height:1.1;font-weight:800;
  letter-spacing:-.02em;color:var(--brand-title);text-wrap:balance;
}
.sub{margin-top:14px;max-width:900px;font-size:var(--fs-lg);color:var(--heading)}
.field-error{font-size:var(--fs-xs);color:var(--danger);margin-top:7px;font-weight:600}
.field-warning{font-size:var(--fs-xs);color:var(--amber-fg);margin-top:7px;font-weight:600}
/* Messages flow inline (no reserved height) so field spacing stays even */
/* .field prefix beats the later base input rule's border shorthand (same fix
   the .input-ok rule uses); otherwise the red error border never shows. */
.field input.input-error,.field select.input-error,input.input-error,select.input-error{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-ring)}
.price-field:has(input.input-error){border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-ring)}
/* Clickable "did you mean" correction under the email field */
.field-suggest{font-size:var(--fs-xs);color:var(--text);margin-top:7px;font-weight:600}
.field-suggest button{
  border:none;background:none;padding:0;font:inherit;font-weight:700;
  color:var(--brand-deep);cursor:pointer;text-decoration:underline;
}
/* Green check inside validly completed inputs. The .field prefix keeps this
   rule more specific than the base input rule (whose background:var(--field) shorthand
   would otherwise reset the check image). */
.field input.input-ok{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.5 12.5l5 5 10-11' stroke='%233f8a72' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
  background-color:var(--green-tint);   /* lichtgroene vulling = correct ingevuld */
  padding-right:38px;
}
/* Salutation-select en landcode-trigger krijgen dezelfde groene vulling als valid
   inputs (geen vinkje: select/knop heeft een eigen pijl). Landcode groen zodra het
   telefoonnummer is ingevuld. */
.field select.input-ok{background-color:var(--green-tint)}
.dial-trigger.dial-ok{background:var(--green-tint)}
/* Soft highlight for still-missing fields after clicking the disabled button */
.field-missing{border-color:var(--amber-fg)!important;box-shadow:0 0 0 3px rgba(224,140,58,.18)!important;transition:box-shadow .2s,border-color .2s}
.loc-readout.field-missing{border-radius:12px}
/* "(optional)" suffix on a field label */
label .opt{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);font-size:11px}

/* ---------- Grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:22px;margin-top:32px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:22px}

.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-soft);
}
/* Investor/team-blok-stijl: sage-mint vak (4x) op crème pagina, duidelijke sage rand
   + zachte diepte. results/PDF blijven neutraal wit. Groen blijft accent (focus/selectie/CTA);
   iconen + eenheden bijna-zwart, overlines roest-bruin. */
.grid .card{
  border:none;background:var(--card); /* witte vakken op beige, geen rand -> lichte slagschaduw geeft diepte */
  box-shadow:0 1px 3px rgba(31,43,41,.05), 0 12px 30px -14px rgba(31,43,41,.22);
}
/* Kop-icoon kaal op de mint-kaart: deep-green icoon, geen badge/rand. */
.grid .card .card-head .ic{color:var(--brand-deep)}
.grid .card .card-head .ic svg{color:var(--brand-deep)}
.grid .card .card-rule{background:var(--line)}                 /* neutrale divider */
.grid .card label svg,
.grid .card .form-note svg,
.grid .card .loc-readout svg,
.grid .card .price-field .cur,
.grid .card .price-field .unit{color:var(--heading)}           /* iconen + € / kWh zwart */
.grid .card .map-sub,
.grid .card .loc-readout .loc-title{color:var(--heading)}       /* titels/overlines zwart voor consistentie */
.grid .card .card-head h2{color:var(--heading)}                 /* kaart-titels zwart */
.grid .card .price-default{color:var(--heading)}
/* Checkbox-vakje wit met neutrale rand; checked-staat hieronder met hogere
   specificiteit zodat het groene vinkje blijft winnen. */
.grid .card .price-default .pd-box{background:var(--card);border-color:var(--line)}
.grid .card .price-default:has(input:checked) .pd-box{background:var(--brand);border-color:var(--brand)}
/* Turbine-tegels: alle tekst zwart voor consistentie (ook wanneer geselecteerd). */
.grid .card .model-name,.grid .card .model-cap,.grid .card .model-spec,
.grid .card .model-spec b,.grid .card .model-rec,.grid .card .model-note{color:var(--heading)}
/* Velden + turbine-tegels: neutrale grijze rand, wit oppervlak (groen alleen op focus/selectie). */
.grid .card input,.grid .card select,
.grid .card .price-field,.grid .card .dial-trigger,.grid .card .phone-code{border-color:var(--line)}
.grid .card .model{background:var(--card);border-color:var(--line)}
.grid .card .loc-readout{background:var(--card);border-color:var(--line)}
/* Locatie gekozen (niet .empty) -> zelfde groene "ingevuld"-signaal als de velden. */
.grid .card .loc-readout:not(.empty){background:var(--green-tint);border-color:var(--brand)}
.grid .card .map{border-color:var(--line)}   /* Google-map zelfde neutrale rand als de velden */
/* Focus/hover/selectie opnieuw als groen accent (anders overschrijft de rand-override ze). */
.grid .card input:focus,.grid .card select:focus,
.grid .card .price-field:focus-within,.grid .card .dial-trigger:focus-visible{border-color:var(--brand);box-shadow:var(--focus)}
.grid .card .model:hover{border-color:var(--line-strong)}
.grid .card .model:has(input:checked){border-color:var(--brand);background:var(--green-tint)}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.card-head h2{font-size:var(--fs-lg);font-weight:700;color:var(--section-title);letter-spacing:-.01em}
/* Kaal kop-icoon: geen badge/vak, gewoon het icoon naast de titel (deep-green). */
.card-head .ic{
  display:grid;place-items:center;color:var(--brand-deep);flex-shrink:0;
}
.card-head .ic svg{width:28px;height:28px}
.card-rule{height:1px;background:var(--line);margin:16px 0 20px}

/* ---------- Fields ---------- */
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.details-card .field{margin-bottom:13px}
label{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;color:var(--heading);margin-bottom:7px}
label .req{color:var(--danger);margin-left:-4px;font-weight:700}
label svg{color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=number],select{
  width:100%;border:1px solid var(--line);background:var(--field);border-radius:var(--radius-sm);
  padding:12px 14px;font-family:inherit;font-size:var(--fs-base);color:var(--heading);
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder{color:var(--placeholder)}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.phone-row{display:grid;grid-template-columns:110px 1fr;gap:10px}
#salutation{width:auto;max-width:100%}
.phone-code{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 6px;background:var(--field)}
.phone-code select{border:none;padding:12px 4px;box-shadow:none;font-size:var(--fs-base);width:100%}
.phone-code select:focus{box-shadow:none}
.flag{font-size:16px}

/* Custom phone country-code dropdown */
.dial{position:relative}
.dial-trigger{
  width:100%;display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--field);
  padding:12px 10px;font-family:inherit;font-size:var(--fs-base);color:var(--heading);cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.dial-trigger:focus-visible{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.dial-flag{font-size:16px;line-height:1}
.dial-code{font-weight:500}
.dial-caret{margin-left:auto;color:var(--muted);flex-shrink:0}
.dial-list{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;
  width:300px;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style:none;
  background:var(--field);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
}
.dial-list[hidden]{display:none}
.dial-option{
  display:grid;grid-template-columns:20px 54px 1fr;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;font-size:var(--fs-sm);cursor:pointer;
}
.dial-option:hover,.dial-option.active{background:var(--brand-tint)}
.dial-option .o-flag{font-size:16px;line-height:1}
.dial-option .o-code{font-weight:600;color:var(--heading)}
.dial-option .o-name{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Price row: a plain "use default" checkbox on the left, a narrow price box right */
.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.price-field{
  display:flex;align-items:center;flex:0 0 auto;width:165px;
  border:1px solid var(--line);background:var(--field);border-radius:var(--radius-sm);
  padding:0 14px;transition:border-color .15s,box-shadow .15s
}
.price-field:focus-within{border-color:var(--brand);box-shadow:var(--focus)}
.price-default{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;margin:0;
  font-size:var(--fs-sm);font-weight:600;color:var(--brand-deep)
}
.price-default input{position:absolute;opacity:0;width:0;height:0}
.price-default .pd-box{
  width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--brand-line);border-radius:5px;
  display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s
}
.price-default .pd-box::after{
  content:"";width:5px;height:9px;margin-top:-1px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transition:transform .15s
}
.price-default:has(input:checked) .pd-box{background:var(--brand);border-color:var(--brand)}
.price-default:has(input:checked) .pd-box::after{transform:rotate(45deg) scale(1)}
.price-default:has(input:focus-visible) .pd-box{box-shadow:var(--focus)}
.price-field .cur{color:var(--brand-deep);font-weight:600;font-size:var(--fs-md);margin-right:7px;flex-shrink:0}
.price-field input{border:none;background:transparent;border-radius:0;padding:12px 0;width:100%;min-width:0;font-size:var(--fs-base);color:var(--heading)}
.price-field input:focus{box-shadow:none}
.price-field .unit{color:var(--brand-deep);font-size:var(--fs-md);font-weight:600;margin-left:7px;flex-shrink:0;white-space:nowrap;pointer-events:none}
.price-field:has(input:disabled){background:var(--brand-tint)}
.price-field input:disabled{color:var(--muted);cursor:not-allowed}
.helper{font-size:var(--fs-xs);color:var(--muted);margin-top:7px;line-height:1.45}

/* ---------- Turbine model cards ---------- */
.models{display:flex;flex-direction:column;gap:12px}
.model{
  position:relative;display:block;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 16px 13px 48px;transition:border-color .15s, background .15s, box-shadow .15s;
}
.model:hover{border-color:var(--line-strong)}
.model input{position:absolute;opacity:0;pointer-events:none}
.model .dot{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);background:var(--field);transition:all .15s}
.model .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform .15s}
.model-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}
.model-name{font-size:var(--fs-xl);font-weight:800;color:var(--wr-brown);letter-spacing:-.01em;line-height:1.15}
.model-cap{font-size:var(--fs-base);font-weight:600;color:var(--brand-deep)}
.model-specs{display:flex;flex-wrap:nowrap;gap:3px 0;margin-top:4px;white-space:nowrap}
.model-spec{font-size:var(--fs-sm);color:var(--muted);position:relative;white-space:nowrap}
.model-spec b{color:var(--text);font-weight:600}
.model-spec + .model-spec{padding-left:14px}
.model-spec + .model-spec::before{content:"";position:absolute;left:9px;top:50%;transform:translate(-50%,-50%);width:3px;height:3px;border-radius:50%;background:var(--line-strong)}
/* Hub-height footnote: small, right-aligned at the bottom of the card */
.model-note{display:block;font-size:var(--fs-xs);color:var(--muted);font-style:italic;text-align:right;margin-top:7px;opacity:.85}
.model-rec{
  display:block;margin-top:2px;font-size:var(--fs-sm);font-weight:600;
  color:var(--brand-deep);line-height:1.4;max-width:270px;
}
.model input:checked + .dot{border-color:var(--brand)}
.model input:checked + .dot::after{transform:scale(1)}
.model:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}

/* ---------- Map ---------- */
.map-card{padding:0;overflow:hidden;display:flex;flex-direction:column;flex:1}

/* Details column fills the row height; the privacy note sits at the bottom */
.details-card{flex:1}
.details-card label svg{color:var(--brand-deep)}
/* Last card in column 2 fills the remaining height so all columns end level */
.energy-card{flex:1}
.form-note{
  display:flex;align-items:flex-start;gap:8px;margin-top:13px;
  font-size:var(--fs-xs);line-height:1.5;color:var(--muted);
}
.form-note svg{flex-shrink:0;margin-top:1px;color:var(--brand-deep)}
.map-card .card-head{padding:26px 26px 0}
.map-card .card-rule{margin:16px 26px 0}
.map-intro{margin:13px 26px 0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.map-sub{
  display:block;margin:15px 26px 8px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep);
}
.map-search{position:relative;margin:18px 26px 0;display:flex;align-items:center}
.map-sub + .map-search{margin-top:0}
.map-sub + .map{margin-top:0}
/* Google's new Places web component fills the bar and inherits the page font */
.map-search gmp-place-autocomplete{width:100%;font-family:var(--font)}
.map-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
/* The input reuses the shared field styling (border, radius, focus ring, text
   colour, placeholder); we only add room for the search icon. */
.map-search input{padding-left:38px;padding-right:42px}
.map-search input:disabled{background:var(--brand-tint);cursor:not-allowed;color:var(--muted)}
/* "Use my location" arrow inside the search bar */
.map-search-loc{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--brand-deep);cursor:pointer;border-radius:8px;
  transition:background .15s,color .15s
}
.map-search-loc:hover{background:var(--brand-tint)}
.map-search-loc.loading{opacity:.55;pointer-events:none}

/* Google Places suggestion dropdown — themed to match the form */
.pac-container{
  border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);
  margin-top:6px;font-family:var(--font);overflow:hidden;background:var(--field);
}
.pac-container:after{display:none}            /* hide Google logo row */
.pac-item{padding:9px 14px;font-size:var(--fs-sm);color:var(--text);cursor:pointer;border-top:1px solid var(--line)}
.pac-item:first-child{border-top:none}
.pac-item:hover,.pac-item-selected{background:var(--brand-tint)}
.pac-icon{display:none}
.pac-item-query{font-size:var(--fs-sm);color:var(--heading);font-weight:600}
.pac-matched{color:var(--brand-deep)}

.map{
  position:relative;margin:14px 26px 18px;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--line);height:360px;z-index:0;
}
.map .leaflet-container{height:100%;width:100%;border-radius:var(--radius-sm);font-family:var(--font)}
.gmap{height:100%;width:100%;border-radius:var(--radius-sm)}
/* Loading spinner shown until the map tiles are ready */
.map-spinner{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--brand-tint)}
.map-spinner-ring{width:30px;height:30px;border-radius:50%;border:3px solid var(--brand-line);border-top-color:var(--brand);animation:wr-spin .8s linear infinite}
@keyframes wr-spin{to{transform:rotate(360deg)}}
/* Custom icon button — used for the fullscreen control (top-right) */
.map-iconbtn{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--field);border:1px solid var(--line);border-radius:8px;color:var(--brand-deep);
  cursor:pointer;box-shadow:var(--shadow-soft);transition:background .15s,color .15s
}
.map-iconbtn svg{width:17px;height:17px}
.map-iconbtn:hover{background:var(--brand-tint)}
.map-fs{margin:10px 10px 0 0}
.map-loc{margin:0 10px 8px 0}

/* Custom Map / Satellite / Hybrid toggle (compact) */
.map-type{margin:10px 0 0 10px;display:flex;background:var(--field);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-soft)}
.map-type-btn{border:none;background:var(--field);color:var(--muted);font:600 11px/1 var(--font);padding:5px 9px;cursor:pointer;transition:background .15s,color .15s}
.map-type-btn + .map-type-btn{border-left:1px solid var(--line)}
.map-type-btn:hover{background:var(--brand-tint);color:var(--brand-deep)}
.map-type-btn.active{background:var(--brand);color:#fff}
.loc-readout{
  margin:0 26px 18px;padding:13px 15px;border-radius:12px;
  background:var(--brand-tint);border:1px solid var(--brand-line);
  display:flex;gap:11px;align-items:flex-start;
}
.loc-readout svg{color:var(--brand-deep);flex-shrink:0;margin-top:1px}
.loc-readout .loc-text{font-size:var(--fs-sm);line-height:1.5;color:var(--text)}
.loc-readout .loc-text b{display:block;color:var(--heading);font-weight:600;margin-bottom:2px}
.loc-readout.empty .loc-text{color:var(--muted)}
.loc-readout .loc-title{font-size:var(--fs-sm);font-weight:700;color:var(--brand-deep);margin-bottom:6px}
.loc-readout .loc-line{font-size:var(--fs-sm);line-height:1.55;color:var(--text)}
.loc-readout .loc-key{font-weight:600;color:var(--heading);display:inline-block;min-width:88px}
.loc-readout .loc-coords{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.loc-readout .loc-warning{font-size:var(--fs-sm);line-height:1.5;color:var(--danger);font-weight:600}
.loc-readout .loc-coords .loc-key{color:inherit;min-width:88px}
.map-badge{position:absolute;top:14px;left:14px;z-index:3;display:flex;align-items:center;gap:7px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:var(--fs-sm);font-weight:600;color:var(--heading);box-shadow:var(--shadow-soft)}
.map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--field);border:1px solid var(--line);border-radius:14px;padding:24px 30px;text-align:center;box-shadow:var(--shadow);z-index:2;max-width:260px}
.map-pin .pin-ic{color:var(--brand);margin-bottom:10px}
.map-pin p{font-size:var(--fs-sm);color:var(--text);font-weight:500}
.map-glow{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);width:280px;height:200px;border-radius:50%;background:radial-gradient(circle, rgba(95,167,143,.30), transparent 70%);z-index:1}
/* Compact custom +/- zoom control (much smaller than Google's default) */
.map-zoom{width:30px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);background:var(--field);margin:0 10px 12px 0}
.map-zoom-btn{width:100%;height:28px;border:none;background:var(--field);color:var(--brand-deep);font-size:var(--fs-md);font-weight:600;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.map-zoom-btn:first-child{border-bottom:1px solid var(--line)}
.map-zoom-btn:hover{background:var(--brand-tint)}
.map.selected{cursor:default}
.map.selected .map-pin,.map.selected .map-glow{display:none}
.map-marker{position:absolute;transform:translate(-50%,-100%);z-index:4;color:var(--brand-deep);display:none}
.map.selected .map-marker{display:block;animation:drop .35s ease}
@keyframes drop{from{transform:translate(-50%,-130%);opacity:0}to{transform:translate(-50%,-100%);opacity:1}}

/* ---------- Submit ---------- */
.submit-row{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px}
.btn{
  appearance:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--fs-md);font-weight:700;letter-spacing:.01em;
  padding:16px 44px;border-radius:14px;background:linear-gradient(180deg,var(--btn-brand),var(--btn-brand-deep));
  color:#fff;box-shadow:0 8px 20px -8px rgba(63,138,114,.6);transition:transform .12s, box-shadow .15s, opacity .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(63,138,114,.7)}
.btn:active{transform:translateY(0)}
/* pointer-events:none lets clicks fall through to .submit-row, which uses
   them to highlight the fields that are still missing. */
.btn:disabled{background:var(--btn-disabled);color:#fff;cursor:not-allowed;box-shadow:none;transform:none;pointer-events:none}
.submit-row:has(.btn:disabled){cursor:not-allowed}
.btn.loading{pointer-events:none;opacity:.85}
.btn .btn-spinner{
  display:inline-block;width:15px;height:15px;margin-right:9px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:wr-spin .6s linear infinite;
}
.hint{font-size:var(--fs-sm);color:var(--muted)}
/* Quiet "start over" link under the submit button; two-step confirm via .armed */
.btn-clear{
  border:none;background:none;padding:0;margin-top:2px;font-family:inherit;
  font-size:var(--fs-xs);color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;transition:color .15s;
}
.btn-clear:hover,.btn-clear.armed{color:var(--danger)}
.consent{font-size:var(--fs-xs);color:var(--muted);max-width:420px;text-align:center}

/* ---------- Results ---------- */
.results-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:30px}
.back{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:var(--field);border:1px solid var(--line);border-radius:11px;padding:10px 16px;font-size:var(--fs-sm);font-weight:600;color:var(--heading);box-shadow:var(--shadow-soft);transition:background .15s;text-decoration:none}
.back:hover{background:var(--paper)}
/* Brochure-kader: alle resultaat-informatie (metrics, benefits, MWF-kaart) in
   één groot wit kader dat van de beige pagina afspringt. De binnen-tegels zijn
   vlak (geen eigen schaduw) zodat alleen het kader diepte heeft. */
.results-grid{
  display:grid;grid-template-columns:minmax(300px,340px) 1fr;gap:26px 52px;align-items:stretch;
  background:var(--card);border-radius:var(--radius);box-shadow:var(--elev);
  padding:30px 32px 34px;
}
/* Results content is first in the DOM (a11y/mobile); on desktop the explicit
   columns keep the contact card visually on the left. */
@media(min-width:1001px){
  .results-grid > .results-main{grid-column:2;grid-row:1}
  .results-grid > .contact-card{grid-column:1;grid-row:1}
}
/* Contact-kaart hugt zijn eigen inhoud (niet uitrekken tot de kolomhoogte),
   zodat er geen grote witruimte ontstaat en de knoppen direct onder de tekst
   volgen. Minder strak dan de eerder uitgerekte variant. */
/* MWF-info zonder eigen vlak: direct op het witte brochure-kader. */
.contact-card{display:flex;flex-direction:column;align-self:start;background:transparent;border:none;box-shadow:none;padding:8px 2px}

.contact-card .contact-logo{
  display:flex;justify-content:flex-start;align-items:center;padding:6px 0 24px;margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.contact-card .contact-logo img{height:112px;width:auto;display:block}
.contact-name{font-size:var(--fs-2xl);font-weight:800;color:var(--section-title);margin-bottom:16px}
.contact-row{display:flex;gap:11px;font-size:var(--fs-base);color:var(--text);margin-bottom:11px;line-height:1.5}
.contact-row svg{color:var(--brand-deep);flex-shrink:0;margin-top:2px}
.contact-row a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px;transition:color .15s}
.contact-row a:hover{color:var(--brand-deep);text-decoration:underline}
.contact-rule{height:1px;background:var(--line);margin:20px 0}
.contact-blurb{font-size:var(--fs-base);color:var(--text);line-height:1.6}
.btn-contact{display:block;width:100%;text-align:center;margin-top:22px;background:linear-gradient(180deg,var(--btn-brand),var(--btn-brand-deep));color:#fff;border:none;border-radius:13px;padding:15px;font-size:var(--fs-md);font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 8px 20px -8px rgba(63,138,114,.55);transition:transform .12s;text-decoration:none}
.btn-contact:hover{transform:translateY(-1px)}
/* Secondary (ghost) so Contact Us stays the single primary CTA; theme-safe. */
.btn-download{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;
  background:var(--navy);color:#fff;border:none;border-radius:13px;padding:14px;
  font-size:var(--fs-md);font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;box-shadow:0 4px 12px -8px rgba(20,35,60,.4);transition:transform .12s, box-shadow .15s, background .15s;
}
.btn-download:hover{transform:translateY(-1px);background:#324f7c;box-shadow:0 6px 16px -8px rgba(20,35,60,.45)}
.btn-download svg{width:18px;height:18px;color:#fff}
.btn-download:disabled,.btn-download.loading{cursor:default;pointer-events:none;transform:none;opacity:.7}
.btn-download .spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:wr-spin .6s linear infinite;
}
@keyframes wr-spin{to{transform:rotate(360deg)}}

.metrics-head{font-size:clamp(22px,2.5vw,26px);font-weight:800;color:var(--heading);margin-bottom:18px;letter-spacing:-.015em}
/* Egale witte kaart + zachte slagschaduw (als pagina 1). Geen rand of streep;
   de kleurcodering zit in het getal + label/icoon (zie regels hieronder). */
.metric{background:var(--card);border-radius:14px;padding:22px 24px;margin-bottom:16px;min-width:0}
/* Solide getinte kaart per metric (geen fade), elk een eigen kleur zodat het
   niet allemaal groen is: savings groen (hero), yield amber, LCoE blauw, payback slate. */
.metric.yield{background:var(--m-amber)}
.metric.lcoe{background:var(--m-blue)}
.metric.payback{background:var(--m-slate)}
.metric-label{display:flex;align-items:center;gap:9px;font-size:var(--fs-md);font-weight:700;margin-bottom:10px}
.metric-label svg{width:24px;height:24px}
/* Tekst in de tegels zwart; de kleurcodering zit in het icoon + de tegelkleur. */
.metric .metric-label{color:var(--heading)}
.metric-value{font-size:var(--fs-metric);font-weight:800;letter-spacing:-.02em;line-height:1.05;overflow-wrap:anywhere}
.metric .metric-value{color:var(--heading)}
.metric-value small{font-size:var(--fs-lg);font-weight:700}
/* Gekleurde icoon-chip per metric: brengt kleur + variatie (groen/blauw/slate),
   niet alles groen. Savings-hero krijgt een volle diepgroene chip als blikvanger. */
/* Kale iconen zonder vak, net als de kop-iconen op de invoerpagina;
   kleur volgt de metric. */
.metric-label .m-ic{display:grid;place-items:center;flex-shrink:0}
.metric-label .m-ic svg{width:22px;height:22px}
.metric.savings .m-ic{color:var(--green-fg)}
.metric.yield .m-ic{color:var(--amber-fg)}
.metric.lcoe .m-ic{color:var(--blue-fg)}
.metric.payback .m-ic{color:var(--slate-fg)}
.metric-cap{font-size:var(--fs-base);color:var(--text);margin-top:9px;line-height:1.55}
.metric-mini-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:stretch}
.metric-grid .metric{margin-bottom:0}
/* Hero metric + supporting trio (results) */
.metric.hero{margin-bottom:16px;background:var(--m-green)}
.metric.hero .metric-label{font-size:var(--fs-lg)}
.metric.hero .metric-value{font-size:clamp(32px,5.2vw,44px)}
.metric-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;align-items:stretch}
.metric-trio .metric{margin-bottom:0}
.metric.lcoe .metric-cap b{color:var(--blue-fg)}

.benefits-head{font-size:clamp(22px,2.5vw,26px);font-weight:800;color:var(--heading);margin:6px 0 12px;letter-spacing:-.015em}
/* Bedrijfsinfo-blok: zacht groen getint zodat het contrasteert met de witte
   metric-kaarten erboven (ander soort inhoud). Witte icoon-chip popt op het groen. */
/* Rustig zakelijk overzicht: geen tegels maar een lijst met dunne scheidingslijnen. */
.benefit{display:flex;gap:16px;padding:17px 2px;background:transparent;border:none;border-bottom:1px solid var(--line);margin-bottom:0;align-items:center}
.benefit:last-child{border-bottom:none}
.benefit .b-ic{width:34px;flex-shrink:0;display:grid;place-items:center;color:var(--brand-deep)}
.benefit .b-ic svg{width:28px;height:28px}
.benefit h3{font-size:var(--fs-md);font-weight:700;color:var(--section-title);margin-bottom:2px}
.benefit p{font-size:var(--fs-base);color:var(--text);line-height:1.55}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.trust span{font-size:var(--fs-xs);font-weight:600;color:var(--green-fg);background:var(--m-green);border-radius:20px;padding:6px 13px;display:inline-flex;align-items:center;gap:6px}

.disclaimer{margin-top:26px;background:var(--amber-tint);border:1px solid var(--amber-bd);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-soft)}
.disclaimer-head{display:flex;align-items:center;gap:9px;font-size:var(--fs-md);font-weight:700;color:var(--amber-fg);margin-bottom:14px}
.disclaimer ul{list-style:none;display:grid;gap:11px;margin-left:33px}
.disclaimer li{font-size:var(--fs-sm);color:var(--amber-text);line-height:1.6;padding-left:16px;position:relative}
.disclaimer li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--amber-soft)}
.disclaimer li b{color:var(--amber-text)}

.pagefoot{margin-top:40px;text-align:center;font-size:var(--fs-xs);color:var(--muted)}

/* ---------- View switching (integrated file) ---------- */
.view{display:none}
.view.active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
/* Tablet: two input columns, map card on its own full-width row */
@media(max-width:1200px) and (min-width:1001px){
  .grid{grid-template-columns:1fr 1fr}
  .grid .col:nth-child(3){grid-column:1/-1}
}
@media(max-width:1000px){.grid{grid-template-columns:1fr;gap:20px}.results-grid{grid-template-columns:1fr}}
@media(max-width:760px){.page-head{flex-direction:column;gap:16px}.page-head-logo{flex-direction:row;align-items:center;align-self:flex-start;padding-top:0}.page-head-logo img{height:64px}}
@media(max-width:560px){.wrap{padding:26px 18px 60px}.card{padding:20px}.results-top{flex-direction:column}.metric-mini-row{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.results-grid{padding:18px 16px 22px}}
/* Focus visibility on results controls */
.back:focus-visible,.btn-contact:focus-visible,.btn-download:focus-visible,.btn-new:focus-visible,.contact-row a:focus-visible{outline:none;box-shadow:var(--focus)}
/* Results responsive tweaks */
@media(max-width:760px){.metric-trio{grid-template-columns:1fr}}
@media(max-width:560px){
  .disclaimer{padding:20px 18px}
  .disclaimer ul{margin-left:8px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   App-specific additions (Vue SPA) — not in the reference design
   ============================================================ */
/* Map placeholder shown when no Google Maps API key is configured */
.map-fallback{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;background:linear-gradient(180deg,rgba(95,167,143,.10),rgba(47,107,181,.05));
  color:var(--muted);padding:20px;
}
.map-fallback svg{color:var(--brand)}
.map-fallback p{font-size:var(--fs-sm);max-width:240px;line-height:1.5}
/* "Start New Calculation" button on the results contact card */
.btn-new{
  display:block;width:100%;text-align:center;margin-top:12px;background:var(--panel-cool);color:var(--navy);
  border:none;border-radius:13px;padding:14px;font-size:var(--fs-base);font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .15s, transform .12s;text-decoration:none;
}
.btn-new:hover{background:#c9d6e8;transform:translateY(-1px)}

/* ============================================================
   Redesign additions — autofill, feedback, theming, motion
   ============================================================ */

/* Keep browser-autofilled fields on-palette in both themes. A very long
   background-color transition suppresses the UA autofill colour WITHOUT an
   inset shadow, so the completion check (a background-image on the input)
   stays visible. Webkit and standard pseudo-classes are kept in separate
   rules so neither browser drops the other's rule from an unknown selector. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--heading);
  caret-color:var(--heading);
  transition:background-color 100000s ease-out 0s, color 100000s ease-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
select:autofill{
  -webkit-text-fill-color:var(--heading);
  caret-color:var(--heading);
  transition:background-color 100000s ease-out 0s, color 100000s ease-out 0s;
}
/* Autofill detector: browsers fire animationstart for this no-op keyframe when
   they autofill an input; the form listens for it to re-run validation and
   reveal the completion checks. */
@keyframes wr-autofill{from{opacity:1}to{opacity:1}}
input:-webkit-autofill{animation-name:wr-autofill;animation-duration:1ms}
input:autofill{animation-name:wr-autofill;animation-duration:1ms}

/* Completion check grows in when a field becomes valid. */
@keyframes wr-check-pop{from{background-size:0}to{background-size:15px}}
.field input.input-ok{animation:wr-check-pop .28s cubic-bezier(.2,.7,.3,1)}

/* Visually hidden but still focusable/autofillable (country-code mirror). */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Error banner (was inline styles) */
.calc-error{
  display:flex;align-items:flex-start;gap:10px;margin:16px 0;
  background:var(--danger-tint);border:1px solid var(--danger-line);
  border-radius:12px;padding:14px 18px;
}
.calc-error > svg{color:var(--danger);flex-shrink:0;margin-top:1px}
.calc-error-body{flex:1;min-width:0}
.calc-error-title{color:var(--danger-strong);font-weight:600;font-size:var(--fs-base)}
.calc-error-msg{color:var(--danger);font-size:var(--fs-sm);margin-top:4px}
.calc-error-close{
  background:none;border:none;cursor:pointer;color:var(--danger);
  font-size:20px;line-height:1;padding:0 2px;align-self:flex-start;
}
.calc-error-close:hover{opacity:.7}

/* Live completion progress above the submit button */
.form-progress{display:flex;align-items:center;gap:12px;width:100%;max-width:420px}
.form-progress-track{flex:1;height:6px;border-radius:99px;background:var(--brand-line);overflow:hidden}
.form-progress-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-deep));
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.form-progress-count{
  font-size:var(--fs-xs);font-weight:700;color:var(--brand-deep);
  white-space:nowrap;letter-spacing:.02em;
}

/* Respect reduced-motion for hover/press lifts (transforms aren't transitions,
   so the global reduce rule doesn't neutralise them). */
@media (prefers-reduced-motion: reduce){
  .btn:hover,.btn-contact:hover,.btn-download:hover,.back:hover{transform:none}
  /* Keep the autofill detector alive: the global *{animation:none} rule would
     otherwise stop animationstart from firing on autofill. */
  input:-webkit-autofill{animation-name:wr-autofill!important;animation-duration:1ms!important}
  input:autofill{animation-name:wr-autofill!important;animation-duration:1ms!important}
}

/* Sticky submit on small screens so the CTA is always reachable */
@media(max-width:640px){
  .submit-row{
    position:sticky;bottom:0;z-index:20;margin-top:24px;gap:10px;
    padding:14px 0 10px;
    background:linear-gradient(180deg,transparent,var(--paper) 22%);
  }
  .btn{width:100%;padding:15px 24px}
  .form-progress{max-width:none}
}