/* Bootplein — KiKa: de tellers en de twee vensters (KiKa-venster en doneren), op elke pagina gelijk.
 * Gebruikt door assets/kika-venster.js (de vensters) en het KiKa-blok op de voorpagina (de tellers).
 * Knoppen komen uit /assets/knoppen.css. Kleuren staan hier vast, zodat het niet uitmaakt welke
 * kleurvariabelen een pagina zelf heeft.
 */

/* Tellers: wit kaartje met crème rand */
.kika-tellers { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.kika-teller { background: #fff; border: 1px solid #f4e6d6; border-radius: 16px; padding: 14px 20px; min-width: 210px; }
.kika-teller-label { font-size: 12px; color: #6a829c; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.kika-teller-bedrag { font-family: 'Fraunces', Georgia, serif; font-size: 30px; color: #ee7203; font-weight: 700; }
.kika-teller-sub { font-size: 11.5px; color: #6a829c; }
.kika-balk-bg { height: 8px; background: #fff8f1; border-radius: 980px; overflow: hidden; margin: 8px 0 4px; }
.kika-balk { height: 100%; width: 0; background: #ee7203; transition: width .4s; }
.kika-link { font-size: 14px; color: #ee7203; font-weight: 600; text-decoration: none; }
.kika-link:hover { text-decoration: underline; }

/* De vensters: donkere achtergrond, kaart in het midden */
.kika-overlay { position: fixed; inset: 0; background: rgba(10, 30, 60, .55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.kika-venster {
  position: relative; width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28); text-align: center;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #15293e; line-height: 1.5;
}
.kika-venster * { box-sizing: border-box; }
.kika-venster > .knop-ikoon { position: absolute; top: 14px; right: 14px; background: #fff; }
.kika-venster h2 { font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1.2; color: #16508c; margin: 0 0 10px; }
.kika-venster p { color: #6a829c; font-size: 14.5px; line-height: 1.65; margin: 0 0 18px; }
.kika-venster p strong { color: #15293e; }

/* KiKa-venster: crème, zoals het KiKa-blok */
.kika-venster.info { background: #fff8f1; max-width: 460px; padding: 32px 28px 26px; }
.kika-venster.info .kika-venster-logo { width: 120px; height: auto; display: block; margin: 0 auto 14px; }
.kika-venster.info .kika-tellers { flex-direction: column; gap: 10px; margin-bottom: 20px; }
.kika-venster.info .kika-teller { min-width: 0; }
.kika-venster.info .knop { margin-bottom: 10px; }

/* Doneer-venster: wit, want het is een formulier (velden lezen het best op wit) */
.kika-venster.doneer { background: #fff; max-width: 440px; padding: 28px 26px 22px; text-align: left; }
.kika-venster.doneer > .knop-ikoon { background: #f5f8fc; }
.kika-venster.doneer .kika-venster-logo { width: 72px; height: auto; display: block; margin: 0 auto 8px; }
.kika-venster.doneer h2, .kika-venster.doneer > p { text-align: center; }
.kika-venster.doneer h2 { font-size: 22px; margin-bottom: 6px; }
.kika-venster.doneer > p { font-size: 13.5px; margin-bottom: 16px; }
.kd-bedragen { display: flex; gap: 8px; margin-bottom: 14px; }
.kd-bedragen .keuze { flex: 1; min-width: 0; }
.kd-label { display: block; font-size: 12px; font-weight: 700; color: #15293e; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 5px; }
.kd-label span { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6a829c; }
.kd-veld {
  width: 100%; border: 1.5px solid #e8eef6; border-radius: 10px; padding: 11px 14px; margin: 0 0 12px;
  font: 400 14px 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #15293e;
  background: #f5f8fc; outline: none; transition: border-color .18s;
}
.kd-veld:focus { border-color: #1a7fd4; background: #fff; }
.kd-vink { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 2px 0 14px; }
.kd-fout { display: none; background: #fdecec; color: #b3261e; border-radius: 10px; padding: 9px 11px; font-size: 13px; margin-bottom: 12px; }
.kd-noot { font-size: 11.5px; color: #6a829c; text-align: center; margin-top: 10px; line-height: 1.5; }