/* =====================================================================
   Mijn SamenVvE, het klantportaal (BIZ-28)
   Laadt bovenop /assets/demo.css: dat is de publieke huisstijl van deze
   server (navy, creme, Lora en Instrument Sans) en levert de kaart, de
   velden, de knop en de meldingen al. Hier staat alleen wat het portaal
   extra heeft: de kop met uitloglink en de blokken op de startpagina.
   ===================================================================== */

.mijn-kop { justify-content: space-between; }
.mijn-merk { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.mijn-merk img { width: 34px; height: 34px; border-radius: 9px; }
.mijn-uit { margin: 0; }
.mijn-uit-knop {
  font: inherit; font-size: 14px; font-weight: 600;
  background: none; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 14px; color: var(--ink-soft); cursor: pointer;
}
.mijn-uit-knop:hover { border-color: var(--navy); color: var(--navy); }

/* Blokken op de startpagina. Ze zijn nu nog leeg: bestellen en lidmaatschap
   komen in de volgende stories. Bewust wel al zichtbaar, zodat duidelijk is
   waar ze straks staan. */
.mijn-blok {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin-top: 14px; background: var(--creme);
}
.mijn-blok h2 {
  font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 18px;
  color: var(--navy); margin: 0 0 4px;
}
.mijn-blok p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.mijn-blok .binnenkort {
  display: inline-block; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}

/* Rijtje links onder een formulier (registreren, wachtwoord vergeten). */
.mijn-links {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line);
  font-size: 14px;
}
.mijn-links a { color: var(--oker-dark); font-weight: 600; }

/* Wachtwoord tonen of verbergen (assets/wachtwoord.js zet dit erin). */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 78px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 13px; font-weight: 600;
  background: none; border: 0; padding: 6px 10px; border-radius: 8px;
  color: var(--oker-dark); cursor: pointer;
}
.pw-toggle:hover { background: var(--oker-soft); }

/* =====================================================================
   Formulierpagina's (designpas BIZ-28)
   Inloggen, registreren en de wachtwoordschermen hebben twee of drie
   velden. Die stonden in de volle demo-kaart van 672px, want die stijl is
   gemaakt voor de demo-aanmeldpagina met lopende tekst. Een invoerregel
   van die lengte leest slecht, en het portaal (VVE-App) houdt voor exact
   dezelfde schermen 400px aan. Smaller dus, en verticaal in beeld in
   plaats van tegen de bovenrand: een klant die van de marketingsite komt
   ziet zo hetzelfde ritme als straks in zijn eigen portaal.
   ===================================================================== */
.mijn-formulier { max-width: 468px; }
@media (min-height: 720px) {
  .mijn-formulier {
    display: flex; align-items: center;
    min-height: calc(100vh - 210px);
  }
  .mijn-formulier > .demo-kaart { width: 100%; }
}

/* =====================================================================
   Bestelflow (BIZ-29)
   Drie stappen, uitgesplitste bedragen en de stand van de bestelling.
   Alles bovenop demo.css: de kaart, de velden en de knop staan daar al.
   ===================================================================== */

/* Stappenbalk. Sober: cijfer, naam, en een lijn die meeloopt. */
.mijn-stappen {
  list-style: none; display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.mijn-stappen li { display: flex; align-items: center; gap: 7px; }
.mijn-stappen li + li::before {
  content: ''; width: 14px; height: 1px; background: var(--line); margin-right: 1px;
}
.mijn-stappen span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); font-size: 12px;
}
.mijn-stappen .nu { color: var(--navy); }
.mijn-stappen .nu span { background: var(--navy); border-color: var(--navy); color: #fff; }
.mijn-stappen .gedaan span { background: var(--oker-soft); border-color: var(--oker); color: var(--oker-dark); }

/* De twee prijskaarten bij de kavelvraag: alleen ter verklaring, niet om uit
   te kiezen. Het kavelaantal bepaalt het pakket. */
.mijn-prijzen { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.mijn-prijzen li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; background: var(--creme);
  font-size: 14.5px;
}
.mijn-prijzen .naam { font-weight: 600; color: var(--navy); }
.mijn-prijzen .voor { color: var(--ink-soft); font-size: 13.5px; }
.mijn-prijzen .prijs { margin-left: auto; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* Het subdomeinveld met het vaste achtervoegsel ernaast. */
.mijn-subdomein { display: flex; align-items: stretch; gap: 0; }
.mijn-subdomein input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; }
.mijn-subdomein .achtervoegsel {
  display: flex; align-items: center; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--line); border-left: 0;
  border-top-right-radius: 10px; border-bottom-right-radius: 10px;
  background: var(--creme); color: var(--ink-soft); font-size: 14.5px;
}

.mijn-hint { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.mijn-terug { font-size: 14px; margin: 16px 0 0; }
.mijn-terug a { color: var(--oker-dark); font-weight: 600; }
.mijn-knoprij { margin: 14px 0 0; }
.mijn-knoprij .demo-knop { display: inline-flex; width: auto; }

/* Gegevens van de bestelling, als naam-waarderijtjes. */
.mijn-overzicht { margin: 0 0 16px; font-size: 14.5px; }
.mijn-overzicht > div {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.mijn-overzicht dt { color: var(--ink-soft); min-width: 96px; margin: 0; }
.mijn-overzicht dd { margin: 0; color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }

/* De uitsplitsing van wat er nu betaald wordt. Dit is het moment waarop de
   klant moet kunnen zien waar het bedrag vandaan komt, dus de regels staan
   los en het totaal staat er zichtbaar apart onder. */
.mijn-bedragen { list-style: none; margin: 18px 0 0; padding: 0; font-size: 14.5px; }
.mijn-bedragen li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.mijn-bedragen li span { color: var(--ink-soft); }
.mijn-bedragen li b { color: var(--navy); white-space: nowrap; }
.mijn-bedragen .totaal { border-bottom: 0; padding-top: 13px; }
.mijn-bedragen .totaal span { color: var(--navy); font-weight: 600; }
.mijn-bedragen .totaal b { font-family: 'Lora', Georgia, serif; font-size: 20px; }

/* Samenvatting van de overeenkomst. <details> in plaats van een knop met
   script: de CSP staat script-src 'self' en dit heeft geen JS nodig. */
.mijn-overeenkomst {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
  margin: 18px 0 0; background: var(--creme); font-size: 14px;
}
.mijn-overeenkomst summary { font-weight: 600; color: var(--navy); cursor: pointer; }
.mijn-overeenkomst ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 7px; color: var(--ink-soft); }
.mijn-overeenkomst p { margin: 12px 0 0; color: var(--ink-soft); }

/* BIZ-35: de identiteitsstap zet de inlogweg in ditzelfde uitklapblok, en daar
   staat een formulier in plaats van een opsomming. Lucht onder de samenvatting,
   en het laatste veld houdt afstand tot de knop. */
.mijn-overeenkomst form { margin-top: 14px; }

.mijn-akkoord {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 16px; font-size: 14.5px; color: var(--navy);
}
.mijn-akkoord input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--navy); }

/* Stand van de bestelling op de startpagina, in de vorm van het bestaande
   'Binnenkort'-label ernaast. */
.mijn-status {
  display: inline-block; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  border-radius: 999px; padding: 3px 10px;
  background: var(--oker-soft); color: #7d5600; border: 1px solid var(--oker);
}
.mijn-status.afgerond { background: var(--groen-soft); color: #17593c; border-color: var(--groen); }
.mijn-status.geannuleerd { background: #fff; color: var(--ink-soft); border-color: var(--line); }
/* BIZ-30. Een lopend lidmaatschap is goed nieuws en krijgt groen, net als een
   afgeronde bestelling. Opgezegd en gestopt zijn geen fout, dus die blijven
   neutraal; 'wacht' houdt de oker van de standaardstand. */
.mijn-status.lopend { background: var(--groen-soft); color: #17593c; border-color: var(--groen); }
.mijn-status.opgezegd,
.mijn-status.gestopt { background: #fff; color: var(--ink-soft); border-color: var(--line); }

/* Tussenkopje binnen een blok, een maat kleiner dan de blokkop zelf. */
.mijn-kopje {
  font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 15.5px;
  color: var(--navy); margin: 18px 0 8px;
}

/* De betaalgeschiedenis. Drie smalle kolommen, dus op een telefoon past hij
   meestal gewoon; past hij niet, dan schuift de tabel binnen zijn eigen kader
   en niet de hele pagina. */
.mijn-tabelwikkel { overflow-x: auto; }
.mijn-betalingen {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
}
.mijn-betalingen th,
.mijn-betalingen td {
  text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mijn-betalingen th {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft);
}
.mijn-betalingen td { color: var(--navy); }
.mijn-betalingen tr:last-child td { border-bottom: 0; }

.mijn-vinkje {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 2px 10px; border: 1px solid var(--line);
}
.mijn-vinkje.gelukt { background: var(--groen-soft); color: #17593c; border-color: var(--groen); }
.mijn-vinkje.mislukt { background: var(--rood-soft); color: #8c231d; border-color: var(--rood); }

/* BIZ-31: opzeggen en intrekken. De gevolgenlijst staat vóór de knop, want
   dit is het scherm waarop iemand moet kunnen zien wat er wanneer gebeurt.
   Geen rood kader eromheen: opzeggen is een normaal recht en geen fout. */
.mijn-gevolgen { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.mijn-gevolgen li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.mijn-gevolgen li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--oker);
}
.mijn-gevolgen b { color: var(--navy); font-weight: 600; }

/* De knop die de opzegging afmaakt. Rood en geen navy, en dat is het enige
   plek in het portaal waar dat gebeurt: dit is de handeling waarvan je wilt
   dat iemand hem herkent voordat hij hem indrukt. */
.demo-knop-stop { background: var(--rood); }
.demo-knop-stop:hover { background: #9a2a23; }

/* De weg naar buiten op de startpagina: rustig, onderaan het blok, en niet
   in de kleur van de knoppen die iets opbouwen. */
.mijn-uitweg { margin: 14px 0 0; font-size: 13.5px; }
.mijn-uitweg a {
  color: var(--ink-soft); text-decoration: underline;
  /* Designpas: klikvlak op minimaal 24px (WCAG 2.5.8) zonder de regel visueel
     hoger te maken, met dezelfde padding-erbij-marge-eraf-truc als de
     footerlinks in het portaal. Op 13,5px is de tekstregel zelf maar circa
     20px hoog, en dit is uitgerekend een link die iemand op een telefoon
     zoekt op het moment dat hij ergens vanaf wil. */
  display: inline-block; padding: 5px 0; margin: -5px 0;
}
.mijn-uitweg a:hover { color: var(--rood); }