/* =========================================================================
   27 Moments — /aanmelden/ "Maak jullie trouwportaal aan"

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

/* Het hidden-attribuut wint altijd van de display-regels hieronder. */
[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;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.kop__logo { display: inline-block; line-height: 0; }
.kop__logo img { height: 30px; width: auto; }

/* Wie hier per ongeluk belandt terwijl hij al een portaal heeft, moet met
   één tik terug naar het inlogscherm kunnen. */
.kop__terug {
  font-size: 13px;
  color: var(--m27-paars);
  text-decoration: none;
  border-bottom: 1px solid rgba(131, 95, 165, 0.4);
  padding-bottom: 1px;
}
.kop__terug:hover { border-bottom-color: var(--m27-paars); }

.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(30px, 7vw, 44px);
  line-height: 1.12;
  letter-spacing: var(--m27-ls-titel);
  color: var(--m27-donkergroen);
  margin-bottom: 10px;
}

.hero__intro {
  max-width: 54ch;
  margin: 0 auto;
  font-size: 15px;
  color: var(--m27-tekst);
}

/* Het golfje: de vulling is de kleur van de band erboven. */
.golf { line-height: 0; background: var(--m27-creme); }
.golf svg { display: block; width: 100%; height: 40px; fill: var(--m27-lichtgroen); }

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

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

.laadregel { text-align: center; color: #7c776f; font-size: 13.5px; padding: 28px 10px; }
.laadregel a { color: var(--m27-paars); }

.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; }

.uitleg { color: #7c776f; font-size: 13.5px; margin-bottom: 12px; }

/* Elk tikdoel minstens 48px hoog. Eén keer voor alle knoppen van deze pagina
   en niet per rij: Terug, Verder en "Maak ons portaal aan" haalden met de
   padding uit /ds/m27.css maar 39px, waardoor de belangrijkste knop het
   kleinste doel op het scherm was. */
.m27-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------ De wizard ------------------------------- */

.stap__teller {
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
  margin-bottom: 4px;
}

/* Voortgang: zeven stapjes, gevuld tot waar je zit. */
.stap__balk { display: flex; gap: 5px; margin: 10px 0 16px; }
.stap__balk span { flex: 1; height: 4px; border-radius: 999px; background: #e2ded4; }
.stap__balk span.vol { background: var(--m27-donkergroen); }

.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;
}
/* De hint hoort bij een veld, maar staat soms ook los onder een blok. Vandaar
   niet ".veld .hint" maar een eigen klasse, met een variant voor los gebruik. */
.hint { font-size: 12px; color: #8a857e; margin-top: 5px; }
.hint--los { margin: 10px 0 0; }
.hint--boven-vinkjes { margin: 0 0 14px; }

/* align-items: end houdt de twee invoervelden op één lijn wanneer het ene
   label wel wrapt en het andere niet ("JOUW VOORNAAM" naast "DE VOORNAAM VAN
   JE LIEF"). Zonder die regel hingen ze op verschillende hoogtes. */
.veld--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }

/* --------------------------- Het webadres -------------------------------- */
/* Het adres van hun portaal is het eerste wat echt van hén is. Daarom staat
   het als één regel in beeld: het vaste stuk grijs, hun stuk invulbaar. */

.adres {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #e2ded4;
  border-radius: 10px;
  background: var(--m27-creme);
  overflow: hidden;
}
.adres:focus-within { outline: 2px solid var(--m27-paars); outline-offset: 1px; }

.adres__vast {
  display: flex;
  align-items: center;
  padding: 0 4px 0 12px;
  font-size: 14px;
  color: #8a857e;
  white-space: nowrap;
}

.adres input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 11px 12px 11px 2px;
  border: 0;
  background: transparent;
  color: inherit;
}
.adres input:focus-visible { outline: none; }

.adres__stand { font-size: 12.5px; margin-top: 6px; min-height: 1.4em; }
.adres__stand--vrij { color: var(--m27-donkergroen); }
.adres__stand--bezet { color: #a8412f; }
.adres__stand--bezig { color: #8a857e; }

/* Padding met een tegenmarge in plaats van min-height: zo wordt het tikdoel
   groot genoeg zonder dat de regel verschuift. Zonder die padding was deze
   tekstknop nog geen 16px hoog en tikte je er gewoon naast. */
.adres__voorstel {
  font: inherit;
  font-size: 12.5px;
  background: none;
  border: 0;
  display: inline-block;
  padding: 12px 6px;
  margin: -12px 0 -12px 4px;
  color: var(--m27-paars);
  text-decoration: underline;
  cursor: pointer;
}

/* --------------------------- Keuzes en chips ----------------------------- */

.keuzes { display: grid; gap: 8px; }

.keuze {
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid #e2ded4;
  border-radius: 12px;
  background: var(--m27-wit);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.keuze:hover { border-color: var(--m27-lila); }
.keuze:focus-visible { outline: 2px solid var(--m27-paars); outline-offset: 2px; }
.keuze.gekozen { border-color: var(--m27-donkergroen); background: var(--m27-lichtgroen); }

.keuze__stip {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #c5bfb4;
  background: var(--m27-wit);
}
.keuze.gekozen .keuze__stip {
  border-color: var(--m27-donkergroen);
  background: var(--m27-donkergroen);
  box-shadow: inset 0 0 0 3px var(--m27-lichtgroen);
}

/* Een vierkant vinkje voor meerkeuze, een rond stipje voor één keuze: zo
   zie je aan de vorm of je er meer dan één mag aantikken. */
.keuze__vink {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #c5bfb4;
  background: var(--m27-wit);
  position: relative;
}
.keuze.gekozen .keuze__vink {
  border-color: var(--m27-donkergroen);
  background: var(--m27-donkergroen);
}
.keuze.gekozen .keuze__vink::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--m27-wit);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Een zelf toegevoegd dagdeel draagt een verwijderknop NAAST de keuzeknop:
   een knop in een knop bestaat niet, en een toetsenbord raakt er dan nooit
   netjes uit. Rood en niet paars: verwijderen is onomkeerbaar en mag er niet
   uitzien als annuleren. */
.keuzerij { display: flex; align-items: stretch; gap: 8px; }
.keuzerij .keuze { flex: 1; min-width: 0; }

.keuze__weg {
  flex: none;
  font: inherit;
  font-size: 12.5px;
  background: none;
  border: 1.5px solid #e2ded4;
  border-radius: 12px;
  color: var(--m27-rood);
  cursor: pointer;
  padding: 4px 12px;
}
.keuze__weg:hover { border-color: var(--m27-rood); }
.keuze__weg:focus-visible { outline: 2px solid var(--m27-rood); outline-offset: 2px; }

/* Zelf een dagdeel toevoegen: één regel met een veld en een knop. */
.toevoegrij { display: flex; gap: 8px; margin-top: 10px; }
.toevoegrij input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 11px 13px;
  border: 1.5px solid #e2ded4;
  border-radius: 10px;
  background: var(--m27-creme);
  color: inherit;
}
.toevoegrij input:focus-visible { outline: 2px solid var(--m27-paars); outline-offset: 1px; }
.toevoegrij .m27-btn { white-space: nowrap; }

/* ------------------------------ Aantallen -------------------------------- */

.aantallen { display: grid; gap: 10px; }

.aantalrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e2ded4;
  border-radius: 12px;
  background: var(--m27-creme);
  padding: 10px 14px;
}
.aantalrij label { font-size: 14.5px; color: var(--m27-tekst); }
.aantalrij input {
  width: 96px;
  flex: none;
  font: inherit;
  font-size: 16px;
  text-align: right;
  padding: 9px 11px;
  border: 1.5px solid #e2ded4;
  border-radius: 10px;
  background: var(--m27-wit);
  color: inherit;
}
.aantalrij input:focus-visible { outline: 2px solid var(--m27-paars); outline-offset: 1px; }

/* ------------------------------- Stijlen --------------------------------- */
/* De zes sjablonen als kaartjes met hun eigen kleuren: je kiest wat je ziet,
   niet een naam uit een lijst. */

.stijlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stijl {
  font: inherit;
  border: 1.5px solid #e2ded4;
  border-radius: 14px;
  background: var(--m27-wit);
  padding: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.stijl:hover { border-color: var(--m27-lila); }
.stijl:focus-visible { outline: 2px solid var(--m27-paars); outline-offset: 2px; }
.stijl.gekozen { border-color: var(--m27-donkergroen); background: var(--m27-lichtgroen); }

/* Het staal: de kleuren van dat sjabloon, met de initialen erin. Afgerond,
   zoals elk beeld in de huisstijl. */
.stijl__staal {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  font-family: var(--m27-font-titel);
  font-size: 22px;
  letter-spacing: 1px;
}

.stijl strong {
  display: block;
  font-weight: 400;
  font-size: 14px;
  margin-top: 7px;
  color: var(--m27-donkergroen);
}
/* Bewust een eigen klasse en niet ".stijl span": dat zou ook het staal
   hierboven raken, en dan is de kleurenkaart plots een grijs regeltje. */
.stijl__sfeer { display: block; font-size: 11.5px; color: #7c776f; }

/* ----------------------------- Onderdelen -------------------------------- */
/* Elk onderdeel één regel: een vinkje, de naam, en waarom je het zou willen. */

.onderdelen { display: grid; gap: 8px; }

.onderdeel {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1.5px solid #e2ded4;
  border-radius: 12px;
  background: var(--m27-wit);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.onderdeel:hover { border-color: var(--m27-lila); }
.onderdeel:focus-within { outline: 2px solid var(--m27-paars); outline-offset: 2px; }
.onderdeel.gekozen { border-color: var(--m27-donkergroen); background: var(--m27-lichtgroen); }

.onderdeel input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--m27-donkergroen);
}
.onderdeel__tekst { flex: 1; min-width: 0; }
.onderdeel strong { display: block; font-weight: 400; font-size: 14.5px; }
.onderdeel__uitleg { display: block; font-size: 12.5px; color: #7c776f; }

/* Zelfde reden als bij .adres__voorstel: padding met een tegenmarge maakt het
   tikdoel groot zonder de rij eromheen te verschuiven. */
.alles-uit {
  font: inherit;
  font-size: 12.5px;
  background: none;
  border: 0;
  padding: 12px 10px;
  margin: 0 -10px 4px;
  color: var(--m27-paars);
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------- Wachtwoord en vinkjes ------------------------- */

.regels { font-size: 12px; color: #8a857e; margin-top: 5px; }
.regels.deugt { color: var(--m27-donkergroen); }

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

/* 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__knoppen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.stap__knoppen .alleen-rechts { margin-left: auto; }

/* Een kolom, want de foutregel mag een uitweg dragen: hoort er al een portaal
   bij dit adres, dan komt "Naar het inlogscherm" eronder te staan in plaats
   van achter de zin aan. Met één regel tekst ziet het er precies uit als
   vroeger. [hidden] bovenaan dit blad blijft winnen van deze display. */
.stap__fout {
  color: #a8412f;
  font-size: 13px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ------------------------------ Klaar ------------------------------------ */

.klaar { text-align: center; }
.klaar p { font-size: 14.5px; max-width: 48ch; margin: 0 auto 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) {
  .stijlen { grid-template-columns: 1fr; }
  .kop { flex-wrap: wrap; }
  .adres__vast { font-size: 12.5px; padding-left: 10px; }
  /* Op 320px bleef er per kolom nog 115px over: de uppercase labels wrapten
     dan ongelijk en de twee velden hingen scheef. Onder elkaar dus. */
  .veld--duo { grid-template-columns: 1fr; }
}

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