/* ============================================================================================
 * De Kracht van Sport: gedeelde huisstijl voor Boekingen, Mijn Reis en Lesmanuals (Boekingen 3.56.0).
 *
 * Eén plek voor de kleuren, hoeken, schaduwen en de basisonderdelen (knoppen, badges, kaarten,
 * velden, meldingen, tabbladen). De drie plug-ins gebruiken de variabelen hieronder en voegen
 * alleen nog hun eigen bijzonderheden toe. Wil je een kleur op alle sites veranderen, dan doe je
 * dat hier, één keer.
 *
 * De oude klassen (.dkvs-bk-knop, .dkvs-btn, .dkvs-bk-kaart, .dkvs-bk-badge, .dkvs-pil, ...)
 * blijven werken: ze zijn hier een alias van de gedeelde onderdelen.
 * ============================================================================================ */

:root {
	/* Kleuren */
	--dkvs-blauw: #008cb2;           /* hoofdkleur: knoppen, links, actieve onderdelen */
	--dkvs-blauw-donker: #006c8a;    /* hover op blauw */
	--dkvs-donkerblauw: #003663;     /* koppen, actieve tabbladen, hero, donkere knoppen */
	--dkvs-donkerblauw-donker: #00284a;
	--dkvs-groen: #5aac26;           /* klaar, positief, groene knoppen */
	--dkvs-groen-donker: #4b9420;
	--dkvs-groen-tekst: #1c6b30;     /* tekst op lichtgroen */
	--dkvs-oranje: #fc6957;          /* vandaag, let op, noodcontact */
	--dkvs-rood: #b32d2e;            /* fout, verwijderen, afmelden */
	--dkvs-rood-donker: #8f2324;
	--dkvs-geel: #f3c73a;
	--dkvs-tekst: #2c3338;           /* gewone tekst */
	--dkvs-tekst-licht: #646970;     /* bijschriften */
	--dkvs-tekst-zacht: #4a6b75;     /* niet-actieve tabbladen en kleine knoppen */
	--dkvs-rand: #e2e2e2;            /* randen van kaarten */
	--dkvs-rand-veld: #cfe3ea;       /* randen van invoervelden */
	--dkvs-vlak: #f3f7f9;            /* paginavlak achter de kaarten */
	--dkvs-vlak-licht: #eef7fa;      /* lichte hover */
	--dkvs-vlak-blauw: #e6f4f8;      /* chips, lichte blauwe vlakken */
	--dkvs-vlak-grijs: #eef2f4;      /* neutrale badges */
	--dkvs-wit: #fff;

	/* Statuskleuren (achtergrond en tekst) */
	--dkvs-ok-vlak: #e6f7ea;      --dkvs-ok-tekst: #1c6b30;      --dkvs-ok-rand: #8fd19e;
	--dkvs-open-vlak: #fff0ec;    --dkvs-open-tekst: #c2410c;    --dkvs-open-rand: #f5b5a8;
	--dkvs-bezig-vlak: #fff4e0;   --dkvs-bezig-tekst: #8a5a00;   --dkvs-bezig-rand: #fdd9b5;
	--dkvs-info-vlak: #eef7fa;    --dkvs-info-tekst: #003663;    --dkvs-info-rand: #cfe3ea;
	--dkvs-neutraal-vlak: #eef2f4; --dkvs-neutraal-tekst: #4a5560;

	/* Vorm */
	--dkvs-radius: 14px;             /* kaarten */
	--dkvs-radius-klein: 10px;       /* velden, meldingen */
	--dkvs-radius-rond: 30px;        /* knoppen, tabbladen, badges */
	--dkvs-schaduw: 0 2px 8px rgba(0,0,0,.05);
	--dkvs-schaduw-zweef: 0 12px 32px rgba(0,54,99,.12);
	--dkvs-focus: 0 0 0 3px rgba(0,140,178,.2);

	/* Letters */
	--dkvs-font-kop: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--dkvs-knop-grootte: 13px;
	--dkvs-knop-transform: uppercase; /* zet op none als je knoppen liever in gewone letters wilt */
	--dkvs-knop-spatie: .03em;
}

/* --------------------------------------------------------------------------------------------
 * Knoppen
 * .dkvs-knop (+ .is-licht, .is-donker, .is-groen, .is-rood, .is-grijs, .is-klein, .is-breed)
 * Aliassen: .dkvs-bk-knop (Boekingen), .dkvs-btn (Mijn Reis), .dkvs-lm__btn (Lesmanuals),
 * .dkvs-stap1-knop en .dkvs-voortgang-knop (de donkere knoppen op het deelnemersdashboard).
 * -------------------------------------------------------------------------------------------- */
.dkvs-knop, .dkvs-bk-knop, .dkvs-btn, .dkvs-lm__btn, .dkvs-stap1-knop, .dkvs-voortgang-knop {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	margin: 0; padding: 11px 20px; border: 0; border-radius: var(--dkvs-radius-rond);
	background: var(--dkvs-blauw); color: #fff !important;
	font-family: inherit; font-size: var(--dkvs-knop-grootte); font-weight: 700; letter-spacing: var(--dkvs-knop-spatie); text-transform: var(--dkvs-knop-transform);
	text-decoration: none !important; cursor: pointer; box-shadow: none; line-height: 1.3; white-space: normal; text-align: center;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dkvs-knop:hover, .dkvs-bk-knop:hover, .dkvs-btn:hover, .dkvs-lm__btn:hover, .dkvs-stap1-knop:hover, .dkvs-voortgang-knop:hover { background: var(--dkvs-blauw-donker); color: #fff !important; }
.dkvs-knop:focus-visible, .dkvs-bk-knop:focus-visible, .dkvs-btn:focus-visible { outline: none; box-shadow: var(--dkvs-focus); }
.dkvs-knop svg, .dkvs-bk-knop svg, .dkvs-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.dkvs-knop.is-licht, .dkvs-bk-knop.is-licht, .dkvs-btn.dkvs-btn-licht, .dkvs-btn-licht { background: #fff; color: var(--dkvs-blauw) !important; border: 1.5px solid var(--dkvs-rand-veld); padding: 9.5px 18.5px; }
.dkvs-knop.is-licht:hover, .dkvs-bk-knop.is-licht:hover, .dkvs-btn.dkvs-btn-licht:hover, .dkvs-btn-licht:hover { background: var(--dkvs-vlak-licht); border-color: var(--dkvs-blauw); color: var(--dkvs-blauw) !important; }

.dkvs-knop.is-donker, .dkvs-stap1-knop, .dkvs-voortgang-knop { background: var(--dkvs-donkerblauw); }
.dkvs-knop.is-donker:hover, .dkvs-stap1-knop:hover, .dkvs-voortgang-knop:hover { background: var(--dkvs-donkerblauw-donker); }

.dkvs-knop.is-groen, .dkvs-btn.dkvs-btn-groen, .dkvs-btn-groen, .dkvs-lm__btn { background: var(--dkvs-groen); }
.dkvs-knop.is-groen:hover, .dkvs-btn.dkvs-btn-groen:hover, .dkvs-btn-groen:hover, .dkvs-lm__btn:hover { background: var(--dkvs-groen-donker); }

.dkvs-knop.is-rood, .dkvs-btn.dkvs-btn-afmelden, .dkvs-btn-afmelden { background: var(--dkvs-rood); }
.dkvs-knop.is-rood:hover, .dkvs-btn.dkvs-btn-afmelden:hover, .dkvs-btn-afmelden:hover { background: var(--dkvs-rood-donker); }

.dkvs-knop.is-grijs, .dkvs-btn.dkvs-btn-secundair, .dkvs-btn-secundair { background: #e6eef0; color: var(--dkvs-tekst) !important; }
.dkvs-knop.is-grijs:hover, .dkvs-btn.dkvs-btn-secundair:hover, .dkvs-btn-secundair:hover { background: #d3e0e4; color: var(--dkvs-tekst) !important; }

.dkvs-knop.is-klein, .dkvs-bk-knop.is-klein, .dkvs-btn-klein { padding: 8px 14px; font-size: 12px; }
.dkvs-knop.is-breed, .dkvs-bk-knop.is-breed { width: 100%; }
.dkvs-knop[disabled], .dkvs-bk-knop[disabled], .dkvs-btn[disabled], .dkvs-knop.is-uit, .dkvs-btn.is-uit { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------------------------------------
 * Badges en pillen (status, documenten, labels)
 * .dkvs-badge (+ .is-ok, .is-open, .is-bezig, .is-info, .is-neutraal, .is-vandaag, .is-mini)
 * Aliassen: .dkvs-bk-badge, .dkvs-bk-pil, .dkvs-bk-chip (Boekingen), .dkvs-pil, .dkvs-tp-label (Mijn Reis).
 * -------------------------------------------------------------------------------------------- */
.dkvs-badge, .dkvs-bk-badge, .dkvs-bk-pil, .dkvs-bk-chip, .dkvs-pil, .dkvs-tp-label {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px;
	background: var(--dkvs-neutraal-vlak); color: var(--dkvs-neutraal-tekst);
	font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle;
}
.dkvs-badge svg, .dkvs-bk-pil svg { width: 12px; height: 12px; }
.dkvs-badge em, .dkvs-bk-pil em { font-style: normal; font-weight: 400; opacity: .8; }
.dkvs-badge.is-ok, .dkvs-bk-pil.is-ok, .dkvs-bk-badge.is-ok, .dkvs-pil.is-ja { background: var(--dkvs-ok-vlak); color: var(--dkvs-ok-tekst); }
.dkvs-badge.is-open, .dkvs-bk-pil.is-open { background: var(--dkvs-open-vlak); color: var(--dkvs-open-tekst); }
.dkvs-badge.is-bezig, .dkvs-bk-pil.is-bezig { background: var(--dkvs-bezig-vlak); color: var(--dkvs-bezig-tekst); }
.dkvs-badge.is-info, .dkvs-bk-badge.is-binnenkort { background: var(--dkvs-vlak-blauw); color: var(--dkvs-blauw-donker); }
.dkvs-badge.is-neutraal, .dkvs-bk-pil.is-neutraal, .dkvs-pil.is-niets { background: var(--dkvs-neutraal-vlak); color: var(--dkvs-neutraal-tekst); }
.dkvs-badge.is-vandaag, .dkvs-bk-badge.is-vandaag { background: var(--dkvs-oranje); color: #fff; }
.dkvs-badge.is-blauw { background: var(--dkvs-blauw); color: #fff; }
.dkvs-badge.is-groen { background: var(--dkvs-groen); color: #fff; }
.dkvs-badge.is-donker { background: var(--dkvs-donkerblauw); color: #fff; }
.dkvs-badge.is-mini, .dkvs-bk-pil.is-mini { padding: 2px 8px; font-size: 11px; }
.dkvs-badge.is-label, .dkvs-tp-label { font-family: var(--dkvs-font-kop); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.dkvs-badges, .dkvs-bk-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.dkvs-badges.is-lijst, .dkvs-bk-pillen.is-lijst { flex-direction: column; align-items: flex-start; }

/* --------------------------------------------------------------------------------------------
 * Kaarten (witte panelen met ronde hoeken)
 * .dkvs-paneel; alias: .dkvs-bk-kaart (Boekingen).
 * -------------------------------------------------------------------------------------------- */
.dkvs-paneel, .dkvs-bk-kaart {
	background: #fff; border: 1px solid var(--dkvs-rand); border-radius: var(--dkvs-radius);
	padding: 20px 24px; box-shadow: var(--dkvs-schaduw); margin: 0 0 18px;
}
.dkvs-paneel h2, .dkvs-bk-kaart h2 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.dkvs-paneel h3, .dkvs-bk-kaart h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--dkvs-blauw); margin: 0 0 12px; }
.dkvs-paneel.is-zweef { box-shadow: var(--dkvs-schaduw-zweef); border-color: #e3ebf0; }
.dkvs-paneel.is-strak { padding: 14px 16px; }

/* --------------------------------------------------------------------------------------------
 * Meldingen
 * .dkvs-melding (+ .is-fout, .is-let, .is-info); alias: .dkvs-bk-melding (Boekingen). Mijn Reis gebruikt .dkvs-melding al.
 * -------------------------------------------------------------------------------------------- */
.dkvs-melding, .dkvs-bk-melding {
	background: var(--dkvs-ok-vlak); border: 1px solid var(--dkvs-ok-rand); color: var(--dkvs-ok-tekst);
	padding: 12px 16px; border-radius: var(--dkvs-radius-klein); margin: 0 0 16px; font-weight: 600;
}
.dkvs-melding.is-fout, .dkvs-bk-melding.is-fout { background: var(--dkvs-open-vlak); border-color: var(--dkvs-open-rand); color: var(--dkvs-rood); }
.dkvs-melding.is-let, .dkvs-bk-melding.is-let { background: #fff7ed; border-color: var(--dkvs-bezig-rand); color: #9a3412; }
.dkvs-melding.is-info, .dkvs-bk-melding.is-info { background: var(--dkvs-info-vlak); border-color: var(--dkvs-info-rand); color: var(--dkvs-info-tekst); }
.dkvs-melding a, .dkvs-bk-melding a { color: inherit; }

/* --------------------------------------------------------------------------------------------
 * Invoervelden
 * .dkvs-veld op een los veld; in Boekingen krijgen alle gewone velden deze stijl vanzelf.
 * (Vinkjes, bestanden, kleuren, knoppen en het zoekveld blijven zoals ze zijn.)
 * -------------------------------------------------------------------------------------------- */
.dkvs-veld,
.dkvs-bk input:where(:not([type=checkbox], [type=radio], [type=file], [type=color], [type=submit], [type=button], [type=range], [type=hidden], [type=search], [type=image])):not(.dkvs-los),
.dkvs-bk select:not(.dkvs-los),
.dkvs-bk textarea:not(.dkvs-los) {
	margin: 0; padding: 9px 12px; border: 1.5px solid var(--dkvs-rand-veld); border-radius: var(--dkvs-radius-klein);
	background: #fff; color: var(--dkvs-tekst); font: inherit; font-size: 14px; line-height: 1.4; font-weight: 400;
	box-shadow: none; box-sizing: border-box; height: auto; min-height: 40px; text-transform: none; letter-spacing: 0;
}
.dkvs-veld:focus,
.dkvs-bk input:where(:not([type=checkbox], [type=radio], [type=file], [type=color], [type=submit], [type=button], [type=range], [type=hidden], [type=search], [type=image])):not(.dkvs-los):focus,
.dkvs-bk select:not(.dkvs-los):focus,
.dkvs-bk textarea:not(.dkvs-los):focus { outline: none; border-color: var(--dkvs-blauw); box-shadow: var(--dkvs-focus); }
.dkvs-bk textarea:not(.dkvs-los), textarea.dkvs-veld { min-height: 90px; resize: vertical; }
.dkvs-bk select:not(.dkvs-los), select.dkvs-veld { padding-right: 32px; }
@media (max-width: 768px) {
	.dkvs-veld, .dkvs-bk input:where(:not([type=checkbox], [type=radio], [type=file], [type=color], [type=submit], [type=button], [type=range], [type=hidden], [type=search], [type=image])):not(.dkvs-los), .dkvs-bk select:not(.dkvs-los), .dkvs-bk textarea:not(.dkvs-los) { font-size: 16px; } /* geen inzoomen op de telefoon */
}
.dkvs-veld-label, .dkvs-bk label.dkvs-veld-label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dkvs-tekst-licht); }

/* --------------------------------------------------------------------------------------------
 * Tabbladen (pillen in een witte balk)
 * .dkvs-tabbalk > .dkvs-tab (.is-actief); aliassen: .dkvs-bk-tabs > .dkvs-bk-tab-knop (Boekingen),
 * .dkvs-lm__weergave > .dkvs-lm__seg (Lesmanuals, met .is-active).
 * -------------------------------------------------------------------------------------------- */
.dkvs-tabbalk, .dkvs-bk-tabs, .dkvs-lm__weergave {
	display: flex; gap: 4px; margin: 0 0 18px; padding: 6px; background: #fff; border: 1px solid var(--dkvs-rand);
	border-radius: 40px; box-shadow: var(--dkvs-schaduw); overflow-x: auto; scrollbar-width: none;
}
.dkvs-tabbalk::-webkit-scrollbar, .dkvs-bk-tabs::-webkit-scrollbar, .dkvs-lm__weergave::-webkit-scrollbar { display: none; }
.dkvs-tab, .dkvs-bk .dkvs-bk-tab-knop, .dkvs-lm__seg {
	flex: 1 1 auto; margin: 0; padding: 11px 18px; border: 0; border-radius: var(--dkvs-radius-rond); background: transparent;
	color: var(--dkvs-tekst-zacht); font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	white-space: nowrap; cursor: pointer; box-shadow: none; line-height: 1.2; text-decoration: none !important; text-align: center;
	transition: background .15s ease, color .15s ease;
}
.dkvs-tab:hover, .dkvs-bk .dkvs-bk-tab-knop:hover, .dkvs-lm__seg:hover { background: var(--dkvs-vlak-licht); color: var(--dkvs-blauw); }
.dkvs-tab.is-actief, .dkvs-bk .dkvs-bk-tab-knop.is-actief, .dkvs-lm__seg.is-active { background: var(--dkvs-donkerblauw); color: #fff; }
.dkvs-tab em, .dkvs-bk-tab-knop em { display: inline-block; min-width: 22px; margin-left: 6px; padding: 1px 7px; border-radius: 20px; background: rgba(255,255,255,.18); font-size: 11px; font-style: normal; }
.dkvs-tab:not(.is-actief) em, .dkvs-bk-tab-knop:not(.is-actief) em { background: var(--dkvs-vlak-blauw); color: var(--dkvs-blauw); }

/* --------------------------------------------------------------------------------------------
 * Kleine hulpklassen
 * -------------------------------------------------------------------------------------------- */
.dkvs-klein { font-size: 13px; color: var(--dkvs-tekst-licht); }
.dkvs-kop-klein { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--dkvs-blauw); margin: 0 0 12px; }
.dkvs-link { color: var(--dkvs-blauw); font-weight: 700; text-decoration: none; }
.dkvs-link:hover { text-decoration: underline; }
.dkvs-verborgen { display: none !important; }