/* =========================================================================
   27 Moments, /barometer/ de Vlaamse trouwkostenbarometer

   Zelfstandige publieke pagina in de huisstijl: tokens uit /ds/m27.css,
   knoppen m27-btn. De opbouw met kop, hero, golf en voet is dezelfde als
   op /start/ en /beurs/; elke pagina draagt haar eigen kopie omdat ze los
   van elkaar moeten kunnen leven.
   ========================================================================= */

[hidden] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--m27-creme);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --------------------------- Kop en hero -------------------------------- */

.kop {
  background: var(--m27-lichtgroen);
  padding: 18px 22px 0;
}
.kop__logo { display: inline-block; line-height: 0; }
.kop__logo img { height: 30px; width: auto; }

.hero {
  background: var(--m27-lichtgroen);
  text-align: center;
  padding: 26px 20px 30px;
}
.hero__label {
  font-size: 12px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
  margin-bottom: 6px;
}
.hero h1 {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: clamp(28px, 6.5vw, 42px);
  line-height: 1.12;
  letter-spacing: var(--m27-ls-titel);
  color: var(--m27-donkergroen);
  margin-bottom: 10px;
}
.hero__intro { max-width: 56ch; margin: 0 auto; font-size: 15px; color: var(--m27-tekst); }

.golf { line-height: 0; background: var(--m27-creme); }
.golf svg { display: block; width: 100%; height: 40px; fill: var(--m27-lichtgroen); }

/* ------------------------------ Inhoud ---------------------------------- */

.omslag { max-width: 680px; width: 100%; margin: 0 auto; padding: 8px 16px 36px; flex: 1; }

.laadregel { text-align: center; color: #7c776f; font-size: 13.5px; padding: 18px 10px; }

.kaart {
  background: var(--m27-wit);
  border: 1px solid #e2ded4;
  border-radius: var(--m27-radius-kaart);
  padding: 20px 22px;
  margin: 14px 0;
  box-shadow: 0 2px 10px rgba(90, 104, 80, 0.05);
}
.kaart h2 {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 21px;
  color: var(--m27-donkergroen);
  margin-bottom: 6px;
}
.kaart--groen { background: var(--m27-lichtgroen); border-color: #d5ddb9; }

/* De uitklapper met de verantwoording. Een summary in een flexbox verliest
   zijn eigen driehoekje, dus zetten we er zelf een teken achter. */
.kaart summary {
  font-family: var(--m27-font-titel);
  font-size: 18px;
  color: var(--m27-donkergroen);
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kaart summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--m27-paars); }
details.kaart[open] summary::after { content: "-"; }
details.kaart[open] summary { margin-bottom: 8px; }

/* De acties onderaan een kaart, zoals de brug op /zalen/. */
.kaart__acties { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.tekst { font-size: 14px; margin-bottom: 10px; }
.tekst:last-child { margin-bottom: 0; }
.uitleg { color: #7c776f; font-size: 13.5px; margin-bottom: 14px; }

.tussenkop {
  font-size: 12px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--m27-paars);
  margin: 18px 0 10px;
}

/* --------------------------- De staafjes -------------------------------- */
/* De indicatieve verdeling en de vergelijking gebruiken dezelfde vorm:
   een naam, een balkje en het getal erachter. */

.staaf { margin-bottom: 10px; }
.staaf:last-child { margin-bottom: 0; }

.staaf__kop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.staaf__waarde { color: #7c776f; white-space: nowrap; }

.staaf__spoor {
  height: 10px;
  border-radius: 999px;
  background: var(--m27-creme);
  border: 1px solid #e2ded4;
  overflow: hidden;
}
.staaf__vulling {
  height: 100%;
  border-radius: 999px;
  background: var(--m27-donkergroen);
}
.staaf__vulling--lila { background: var(--m27-lila); }

/* De vergelijking: twee balkjes onder elkaar per categorie. */
.duo-staaf { margin-bottom: 14px; }
.duo-staaf:last-child { margin-bottom: 0; }
.duo-staaf .staaf__spoor { margin-bottom: 4px; }

.duo-staaf__labels {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: #7c776f;
}
.duo-staaf__stip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
}
.duo-staaf__stip--groen { background: var(--m27-donkergroen); }
.duo-staaf__stip--lila { background: var(--m27-lila); }

.verschil { font-size: 12.5px; color: var(--m27-paars); margin-top: 2px; }

/* ---------------------------- Het formulier ----------------------------- */

/* align-items: end houdt de twee keuzelijsten op één lijn, ook als een label
   ooit weer over twee regels loopt. */
.rij-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }

.veld { margin-bottom: 14px; }
.veld label {
  display: block;
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
  margin-bottom: 6px;
}
.veld input, .veld select {
  width: 100%;
  font: inherit;
  font-size: 16px;               /* 16px voorkomt inzoomen op iOS */
  padding: 11px 13px;
  border: 1.5px solid #e2ded4;
  border-radius: 10px;
  background: var(--m27-creme);
  color: inherit;
}
.veld input:focus-visible, .veld select:focus-visible {
  outline: 2px solid var(--m27-paars);
  outline-offset: 1px;
}
/* .hint en niet .veld .hint: de som-hint hangt onder het totaalveld, en dat
   staat sinds 10 augustus 2026 in het bedragenraster in plaats van in een
   .veld. Met de oude selector viel die hint zonder stijl. */
.hint { font-size: 12px; color: #8a857e; margin-top: 5px; }
.hint button {
  font: inherit;
  color: var(--m27-paars);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Bedragvelden per categorie: label links, invoer rechts. */
.bedrag {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.bedrag label { font-size: 13.5px; }
.bedrag label span { display: block; font-size: 11.5px; color: #8a857e; }
.bedrag input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 9px 11px;
  border: 1.5px solid #e2ded4;
  border-radius: 10px;
  background: var(--m27-creme);
  text-align: right;
}
.bedrag input:focus-visible { outline: 2px solid var(--m27-paars); outline-offset: 1px; }

/* Het totaal staat in hetzelfde raster als de bedragen die het optelt, met
   een streep erboven zoals onder een kolom cijfers. */
.bedrag--totaal {
  border-top: 1px solid #e2ded4;
  padding-top: 10px;
  margin-top: 4px;
  margin-bottom: 14px;
}
.bedrag--totaal label { font-weight: 500; }
/* De som-hint over de volle breedte, onder label en veld. */
.bedrag--totaal .hint { grid-column: 1 / -1; margin-top: 0; }

.vinkje {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  cursor: pointer;
  margin-bottom: 14px;
}
.vinkje input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--m27-donkergroen);
}

/* Het honeypotveld: onzichtbaar voor mensen. Bewust niet display:none,
   sommige bots slaan verborgen velden over. */
.niet-invullen {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.stap__fout { color: #a8412f; font-size: 13px; margin-top: 10px; }

/* 48px is de ondergrens voor een tikdoel in de standaard, en dat geldt niet
   alleen voor de verzendknop: de knoppen in de brug en "Opnieuw proberen" in
   de dankkaart komen uit /ds/m27.css op ongeveer 39px uit. Dezelfde regel
   staat in partners.css, sessies.css en zalen.css; hij hoort op termijn in
   /ds/m27.css zelf, dan mogen deze vier kopieën weg. */
.m27-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Ook de knop "Opnieuw proberen" in de dankkaart wordt even uitgezet. */
.m27-btn:disabled { opacity: 0.6; cursor: default; }

/* ------------------------------- De dank -------------------------------- */

.dank__kop { margin-bottom: 4px; }
.dank__sub { font-size: 13.5px; color: #7c776f; margin-bottom: 14px; }

/* ------------------------------- Voet ----------------------------------- */

.voet {
  text-align: center;
  padding: 20px 16px 26px;
  background: var(--m27-lichtgroen);
  font-size: 13px;
  color: var(--m27-donkergroen);
}
.voet__klein { font-size: 12px; margin-top: 4px; }
.voet a { color: inherit; }

/* ------------------------------ Toosten --------------------------------- */

.toosten {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 80;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 28px));
}
.toost {
  background: var(--m27-donkergroen);
  color: var(--m27-wit);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 12px 30px rgba(28, 22, 19, 0.3);
  animation: toost-in 0.22s ease;
}
.toost--fout { background: #a8412f; }

@keyframes toost-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------- Klein scherm ------------------------------- */

@media (max-width: 460px) {
  .rij-duo { grid-template-columns: 1fr; }
  .bedrag { grid-template-columns: 1fr 110px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}