/* Koopdialoog — iDEAL.

   LET OP bij het wijzigen: deze stylesheet hangt aan TWEE pagina's met verschillende
   design-tokens. De consumer-pagina's (betaald.html, punten.html) gebruiken
   consumer.css met --surface/--mist/--stone/--accent; de publieke cursusspeler gebruikt
   cursus.css met --bg/--line/--muted/--oranje. Elke var heeft daarom een fallback-ketting
   die beide dekt, met een letterlijke kleur als laatste vangnet.

   Zonder die ketting viel `background: var(--surface)` op de cursuspagina terug op niets
   en was de hele dialoog doorschijnend: de cursustekst liep dwars door het formulier heen.
   Dat is precies zo aangetroffen op 03-08-2026, vlak voor de eerste verkoop. */

.koop-overlay{
  position:fixed; inset:0; z-index:120;
  background:color-mix(in srgb, var(--navy-fixed, var(--navy, #0A0E27)) 62%, transparent);
  display:flex; align-items:center; justify-content:center; padding:16px;
  overflow-y:auto;
}
.koop-box{
  background:var(--surface, var(--bg, #ffffff)); color:var(--ink, #1c2033);
  border:1px solid var(--mist, var(--line, #e6e8f0)); border-radius:var(--radius, 3px);
  max-width:30rem; width:100%; padding:1.75rem; position:relative;
  box-shadow:0 18px 48px color-mix(in srgb, var(--navy-fixed, var(--navy, #0A0E27)) 28%, transparent);
  font-family:var(--sans, system-ui, sans-serif);
}
.koop-box h2{ font-family:var(--serif, Georgia, serif); font-size:1.35rem; margin:0 1.5rem .35rem 0; line-height:1.25; }
.koop-close{
  position:absolute; top:.6rem; right:.7rem; background:none; border:0;
  color:var(--stone, var(--muted, #5b6178)); font-size:1.6rem; line-height:1; cursor:pointer; padding:.2rem .4rem;
}
.koop-close:hover{ color:var(--ink, #1c2033); }
.koop-prijs{ margin:.2rem 0 1rem; font-size:1.1rem; }
.koop-prijs .muted{ font-size:.85rem; color:var(--stone, var(--muted, #5b6178)); font-weight:400; }
.koop-test{
  background:color-mix(in srgb, var(--bronze, #b0894e) 16%, transparent);
  border-left:3px solid var(--bronze, #b0894e); padding:.5rem .7rem; margin:0 0 1rem;
  font-size:.85rem; color:var(--ink, #1c2033);
}
.koop-veld{ display:block; margin:0 0 .8rem; }
.koop-veld > span{ display:block; font-size:.85rem; color:var(--stone, var(--muted, #5b6178)); margin-bottom:.25rem; }
.koop-veld input{
  width:100%; padding:.6rem .7rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--mist, var(--line, #e6e8f0)); border-radius:var(--radius, 3px);
  background:var(--paper, var(--bg-2, #f7f8fc)); color:var(--ink, #1c2033);
}
.koop-veld input:focus{ outline:2px solid var(--accent, var(--oranje, #D04A02)); outline-offset:1px; }
.koop-uitleg{ font-size:.85rem; color:var(--stone, var(--muted, #5b6178)); margin:0 0 1rem; }
.koop-akkoord{
  display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem;
  line-height:1.45; margin:0 0 1rem; cursor:pointer;
}
.koop-akkoord input{ margin-top:.2rem; flex:0 0 auto; width:1rem; height:1rem; accent-color:var(--accent, var(--oranje, #D04A02)); }
/* Honeypot: onzichtbaar voor mensen, invulbaar voor bots. Niet display:none — dat
   slaan sommige bots juist over. */
.koop-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.koop-fout{
  background:color-mix(in srgb, var(--accent, var(--oranje, #D04A02)) 12%, transparent);
  border-left:3px solid var(--accent, var(--oranje, #D04A02)); padding:.5rem .7rem; margin:0 0 .9rem;
  font-size:.88rem;
}
.koop-acties{ display:flex; gap:.6rem; flex-wrap:wrap; }
.koop-acties .btn{ flex:1 1 auto; }
.koop-klein{ font-size:.78rem; color:var(--stone, var(--muted, #5b6178)); margin:.9rem 0 0; text-align:center; }

/* Koopknop in de cursusflow (na het gratis deel) */
.koop-cta{ margin:1rem 0 0; }
.koop-cta .btn{ width:100%; }
.koop-cta-prijs{ font-size:.85rem; color:var(--stone, var(--muted, #5b6178)); text-align:center; margin:.4rem 0 0; }

/* Op het INTROscherm is kopen de tweede keuze: het gratis deel staat erboven en houdt
   de primaire knop. Deze variant is daarom smal, rustig en zonder vlakvulling — hij
   informeert over de prijs, hij schreeuwt niet om de klik. */
.koop-cta--intro{ margin:1.1rem 0 0; text-align:center; }
.koop-cta--intro .koop-cta-prijs{ margin:0 0 .5rem; }
.koop-cta--intro .btn{ width:auto; font-size:.9rem; padding:.5rem 1.1rem; }

/* Terugkeerpagina */
.pay-card{ max-width:34rem; margin:2rem auto; padding:2rem; }
.pay-card h1{ font-family:var(--serif, Georgia, serif); font-size:1.5rem; margin:0 0 .8rem; }
.pay-card .muted{ color:var(--stone, var(--muted, #5b6178)); font-size:.9rem; }