/* pakket-keuze.css — de vier pakketkaarten en de modulerijen (#994). Klassen pkk-. Eén opmaak voor elk scherm. */
.pkk-balk{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:4px 0 16px}
.pkk-seg{display:inline-flex;gap:3px;background:var(--white);border:1px solid var(--light);border-radius:10px;padding:3px}
.pkk-seg button{appearance:none;border:0;background:none;font:700 13px var(--font);color:var(--muted);padding:6px 14px;border-radius:7px;cursor:pointer;min-height:40px;white-space:nowrap}
.pkk-seg button[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.pkk-tip{font-size:12px;font-weight:700;color:var(--lime)}
.pkk-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
@media(max-width:1100px){.pkk-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pkk-vier{grid-template-columns:1fr}}
.pkk-kaart{background:var(--white);border:1px solid var(--light);border-radius:14px;display:flex;flex-direction:column;gap:12px;padding:0 20px 20px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pkk-lint{margin:0 -20px;height:28px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pkk-meest{border:2px solid var(--blue)}.pkk-meest .pkk-lint{background:var(--blue);color:var(--white)}
.pkk-gekozen{border:2px solid var(--lime)}.pkk-gekozen .pkk-lint{background:var(--lime);color:var(--white)}
.pkk-passend{box-shadow:0 0 0 3px var(--lime-tint),var(--shadow-sm)}
.pkk-kaart h3{margin:0;font-size:21px;font-weight:800;color:var(--navy)}
.pkk-zin{margin:0;font-size:13px;color:var(--muted);min-height:3em}
.pkk-prijs{display:grid;gap:2px;min-height:70px}
.pkk-bedrag{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:28px;font-weight:600;color:var(--navy)}
.pkk-per{font-size:12px;color:var(--muted)}
.pkk-korting{font-size:12px;font-weight:700;color:var(--lime)}
.pkk-knop{appearance:none;font:700 14px var(--font);border:1px solid var(--navy);background:var(--white);color:var(--navy);border-radius:10px;padding:10px;cursor:pointer;min-height:44px}
.pkk-gekozen .pkk-knop{background:var(--lime);border-color:var(--lime);color:var(--white)}
.pkk-in{font-size:13px;color:var(--muted);border-top:1px solid var(--light);padding-top:12px}
.pkk-in b{display:block;color:var(--navy);margin-bottom:2px}
.pkk-hier{margin:0;font-size:12px;font-weight:700;color:var(--lime)}
.pkk-link{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left}
.pkk-link:focus-visible,.pkk-knop:focus-visible,.pkk-seg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pkk-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.pkk-mod{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--light);border-radius:10px;padding:10px 12px;background:var(--white);font-size:14px}
.pkk-mod input{margin-top:4px;width:16px;height:16px;flex:none}
.pkk-modtekst{min-width:0;display:grid;gap:2px}
.pkk-modtekst small{font-size:12px;color:var(--muted)}
.pkk-aan{border-color:var(--lime);background:var(--lime-tint)}
.pkk-vak{border-style:dashed}
.pkk-dim{opacity:.55}