/* ═══════════════════════════════════════════════════════════════════
   INLOGGEN & WACHTWOORD VERGETEN — beide pagina's, één blueprint.
   Zie blueprints/inloggen.php en includes/inloggen.php.

   Zelfde tokens en bouw als veelgestelde-vragen.css en informatie.css, zodat de
   servicepagina's één familie blijven.

   AFSCHERMINGSBLOK. Het thema laadt bootstrap.min.css sitewide; dat zet eigen
   marges op p/ul/h2 en heeft een eigen .btn. Vandaar de nullijn hieronder.

   ⚠ ELKE REGEL BEGINT MET #pmInlog. De reset op de tweede regel is ID-specifiek
   (1,0,0) en wint anders van elke losse klasse-regel (0,1,0) — dan verdwijnt al
   je padding. Dat is hier bij de contactpagina precies één keer misgegaan.
   ═══════════════════════════════════════════════════════════════════ */

#pmInlog {
  --groen: #95C11F; --groen-donker: #7DA31A;
  --blauw: #00AFEF; --blauw-donker: #0093c9;
  --teal: #1ec98d; --tealBlauw: #0aa0e9;
  --inkt: #0f172a; --inkt-zacht: #1e293b;
  --grijs: #64748b; --grijs-licht: #94a3b8;
  --lijn: #e2e8f0; --fond: #f8fafc; --veld: #f7fbff;
  --fout: #ba1a1a; --fout-vlak: #ffdad6;
  --goed: #1a7f37; --goed-vlak: #e4f4e8;
  --schaduw: 0 12px 30px rgba(15, 23, 42, .07);

  font-family: 'Albert Sans', -apple-system, sans-serif;
  background: var(--veld); color: var(--inkt-zacht); line-height: 1.5;

  /* Rand tot rand, ook binnen een smalle themacontainer, zonder aan het thema of
     aan <body> te komen. Zelfde truc als op de FAQ-pagina: 100vmax i.p.v. 100vw,
     want 100vw is de vensterbreedte inclusief de schuifbalk en levert dan een
     horizontale schuifbalk van een paar pixels op. */
  box-shadow: 0 0 0 100vmax var(--veld);
  clip-path: inset(0 -100vmax);
  display: block;
}
#pmInlog, #pmInlog *, #pmInlog *::before, #pmInlog *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Blocksy zet een eigen kleur op h1/h2/p; die wint van overerving. Terugzetten op
   "neem over van je omgeving", zoals in informatie.css. */
#pmInlog h1, #pmInlog h2, #pmInlog h3, #pmInlog p, #pmInlog li, #pmInlog label { color: inherit; }
#pmInlog a { color: var(--blauw-donker); }
#pmInlog ul { list-style: none; }

/* De meldingen staan op display:flex, en zo'n class-regel wint van de browser-eigen
   [hidden]{display:none}. Zonder deze regel staan verborgen elementen gewoon in
   beeld — dezelfde fout als ooit met het schuifpaneel (zie assets/schil.css). */
#pmInlog [hidden] { display: none !important; }

#pmInlog .wrap { max-width: 560px; margin: 0 auto; padding: 0 18px; }

/* ══ HERO ══ */
#pmInlog .heroLicht { text-align: center; padding: 46px 0 30px;
  background: radial-gradient(120% 150% at 50% -20%, #ecfbf4 0%, #e6f7fd 45%, var(--veld) 100%); }
#pmInlog .heroEyebrow { font: 800 11.5px 'Inter', sans-serif; letter-spacing: .8px;
  text-transform: uppercase; color: var(--blauw); }
#pmInlog .heroLicht h1 { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 900;
  letter-spacing: -.9px; line-height: 1.16; margin: 10px auto 0; color: var(--inkt); }
#pmInlog .heroToel { font-size: 14.5px; color: var(--grijs); line-height: 1.65;
  margin: 11px auto 0; max-width: 44ch; }

/* ══ MELDINGEN ══ */
#pmInlog .melding { display: flex; gap: 10px; align-items: flex-start;
  border-radius: 12px; padding: 13px 15px; font-size: 14px; margin-bottom: 16px; }
#pmInlog .melding svg { flex: 0 0 auto; margin-top: 2px; }
#pmInlog .melding--goed { background: var(--goed-vlak); color: var(--goed); }
#pmInlog .melding--fout { background: var(--fout-vlak); color: var(--fout); }

/* ══ DE KAART ══ */
#pmInlog .inhoud { padding: 22px 0 10px; }
#pmInlog .kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 20px;
  padding: 24px; box-shadow: var(--schaduw); }
#pmInlog .blokkop { margin-bottom: 14px; }
#pmInlog .blokkop h2 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 900;
  letter-spacing: -.4px; color: var(--inkt); }
#pmInlog .blokkop p { font-size: 13.5px; color: var(--grijs); line-height: 1.6; margin-top: 4px; }

/* ══ VELDEN ══ */
#pmInlog .veld { display: block; margin-bottom: 14px; }
#pmInlog .veld > span { display: block; font: 700 12.5px 'Inter', sans-serif;
  color: var(--inkt); margin-bottom: 6px; }
#pmInlog .veld input[type=email],
#pmInlog .veld input[type=password],
#pmInlog .veld input[type=text] {
  width: 100%; border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px;
  font-family: 'Albert Sans', -apple-system, sans-serif; font-size: 14.5px; color: var(--inkt);
  background: #fff; -webkit-appearance: none; appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#pmInlog .veld input:focus { outline: none; border-color: var(--blauw);
  box-shadow: 0 0 0 3px rgba(0, 175, 239, .14); }
#pmInlog .veld input::placeholder { color: var(--grijs-licht); }

/* Het oogje in het wachtwoordveld. Een echte knop, geen emoji zoals in de oude
   shortcode: die was niet aan te klikken met het toetsenbord en zag er op elk
   systeem anders uit. */
#pmInlog .wwVeld { position: relative; display: block; }
#pmInlog .wwVeld input { padding-right: 46px; }
#pmInlog .oog { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--grijs); cursor: pointer; }
#pmInlog .oog:hover { background: var(--fond); color: var(--inkt); }
#pmInlog .oog:focus-visible { outline: 2px solid var(--blauw); outline-offset: 0; }
#pmInlog .oog .dicht { display: none; }
#pmInlog .oog.is-op .open { display: none; }
#pmInlog .oog.is-op .dicht { display: block; }

/* ══ KNOPPEN ══ */
#pmInlog .knop { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; border: 0; border-radius: 999px; padding: 13px 22px; cursor: pointer;
  font: 700 14.5px 'Inter', sans-serif; color: #fff; text-decoration: none;
  background: linear-gradient(90deg, var(--teal), var(--tealBlauw));
  box-shadow: 0 8px 20px -10px rgba(30, 201, 141, .9); }
#pmInlog .knop:hover { filter: brightness(1.05); color: #fff; }
#pmInlog .knop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
#pmInlog .knop--stil { background: none; color: var(--inkt-zacht);
  border: 1px solid var(--lijn); box-shadow: none; }
#pmInlog .knop--stil:hover { background: var(--fond); filter: none;
  border-color: var(--blauw); color: var(--blauw-donker); }

#pmInlog .voordelen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; }
#pmInlog .voordelen li { display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--grijs); }
#pmInlog .voordelen svg { flex: 0 0 auto; color: var(--groen); }

#pmInlog .onder { font-size: 12.5px; color: var(--grijs-licht); line-height: 1.6;
  margin-top: 12px; text-align: center; }
#pmInlog .onder a { color: var(--blauw-donker); font-weight: 600; }

/* ══ DE SCHEIDING TUSSEN DE TWEE MANIEREN ══ */
#pmInlog .of { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
#pmInlog .of::before, #pmInlog .of::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--lijn); }
#pmInlog .of span { font: 700 11px 'Inter', sans-serif; letter-spacing: .8px;
  text-transform: uppercase; color: var(--grijs-licht); }

#pmInlog .rij { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
#pmInlog .onthoud { display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--inkt-zacht); cursor: pointer; }
#pmInlog .onthoud input { width: 17px; height: 17px; accent-color: var(--groen); cursor: pointer; }
#pmInlog .vergeten { font-size: 13.5px; font-weight: 600; }

/* ══ AANMELDEN ══
   Een gewone link naar /advertenties-uitvoeren/, geen registratieformulier hier.
   Gebruikt dezelfde .knop als de rest, dus er is verder niets voor nodig. */
#pmInlog .registreer { margin-top: 18px; background: #fff; border: 1px solid var(--lijn);
  border-radius: 18px; padding: 20px 22px; text-align: center; }
#pmInlog .registreer h2 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 900;
  letter-spacing: -.3px; color: var(--inkt); }
#pmInlog .registreer p { font-size: 13.5px; color: var(--grijs); line-height: 1.6; margin: 6px 0 14px; }
/* Compact, niet over de volle breedte: dit is de uitgang naar een andere pagina,
   geen actie op deze pagina. De inlogknoppen hierboven blijven wel vol. */
#pmInlog .registreer .knop { display: inline-flex; width: auto; }

#pmInlog .slotregel { margin: 22px 0 34px; text-align: center;
  font-size: 12.5px; color: var(--grijs-licht); }

/* ══ AL INGELOGD ══ */
#pmInlog .alIngelogd { text-align: center; background: #fff; border: 1px solid var(--lijn);
  border-radius: 18px; padding: 34px 22px; }
#pmInlog .alIngelogd .ring { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 16px;
  background: #ecfbf4; display: flex; align-items: center; justify-content: center; color: #12a06f; }
#pmInlog .alIngelogd h2 { font: 900 19px 'Inter', sans-serif; letter-spacing: -.4px; color: var(--inkt); }
#pmInlog .alIngelogd p { font-size: 14px; color: var(--grijs); margin: 8px auto 18px; max-width: 36ch; }
#pmInlog .alIngelogd .knop { display: inline-flex; width: auto; }

/* ══ VANAF TABLET ══ */
@media (min-width: 700px) {
  #pmInlog .heroLicht { padding: 58px 0 34px; }
  #pmInlog .heroLicht h1 { font-size: 38px; }
  #pmInlog .heroToel { font-size: 15.5px; }
  #pmInlog .kaart { padding: 28px 30px; }
}

@media (prefers-reduced-motion: reduce) { #pmInlog * { transition: none !important; } }