/* Mijn feest: bovenop beheer.css en partner.css. */
.k-wie__mail { font-size: .82rem; opacity: .75; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-midden { text-align: center; }
.k-breed { width: 100%; }
.k-terug { margin: 0 0 .6rem; }
.k-terug a { color: var(--gedempt); text-decoration: none; font-weight: 600; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.k-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 18px; padding: 1.1rem 1.2rem; margin: 0 0 1rem; }
.k-kaart h2 { font-family: Unbounded, "Arial Black", sans-serif; font-size: 1.15rem; margin: 0 0 .5rem; }
.k-kaart h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); margin: 1.2rem 0 .4rem; }
dl.k-kaart { padding: .5rem 1.2rem; }

/* Kop: uitloggen als badge */
.k-uit { display: inline-flex; align-items: center; height: 32px; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.k-uit:hover, .k-uit:focus-visible { background: var(--amber); border-color: var(--amber); color: var(--navy); }

/* Inloggen: zelfde opzet als het inlogscherm van de partners (login.css), zonder de opmaak van WordPress. */
body.k-login { margin: 0; }
.k-login #login label { display: block; }
.k-login #login .input { display: block; width: 100%; font: inherit; font-size: 1.05rem; }
.k-login #login .submit { margin: 4px 0 0; }
.k-login #login .button-primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; font-family: inherit; cursor: pointer; }
.k-login__uitleg { margin: 0 0 18px; color: var(--vl-muted); line-height: 1.5; }
.k-login__klein { margin: 16px 0 0; color: var(--vl-muted); font-size: .85rem; line-height: 1.45; text-align: center; }
.k-login__lijst { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: 1.05rem; color: rgba(255,255,255,.88); }
.k-login__lijst li::before { content: "✓"; color: var(--vl-amber); font-weight: 800; margin-right: .6rem; }
.k-login .message, .k-login .notice { line-height: 1.45; }
@media (max-width: 860px) { .k-login__lijst { display: none; } .k-login .vibe-login-kop { display: block; font-size: 1.3rem; } }

/* Velden */
.k-veld { margin: .4rem 0; display: grid; gap: .3rem; }
.k-veld label { font-weight: 700; font-size: .92rem; }
.k-veld small { color: var(--gedempt); font-size: .82rem; margin-top: -.15rem; }
.k-app input[type=email], .k-app input[type=text], .k-app input[type=time], .k-app input[type=url], .k-app input[type=date], .k-app select, .k-app textarea {
	-webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: var(--tekst);
	background: var(--bg); border: 1px solid var(--lijn); border-radius: 12px; padding: .65rem .8rem;
}
.k-app textarea { min-height: 90px; resize: vertical; }
.k-app input:focus, .k-app select:focus, .k-app textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 35%, transparent); }
.k-app input:disabled, .k-app textarea:disabled { opacity: .7; }

/* Feest: hero met aftellen */
.k-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.k-aftel { text-align: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 16px; padding: .7rem 1rem; min-width: 110px; backdrop-filter: blur(4px); }
.k-aftel strong { display: block; font-family: Unbounded, "Arial Black", sans-serif; font-size: 2.2rem; line-height: 1; color: var(--amber); }
.k-aftel span { font-size: .85rem; color: rgba(255,255,255,.85); }
.k-aftel--tekst span { font-weight: 700; color: #fff; font-size: .95rem; }

/* Stappen */
.k-stappen { list-style: none; margin: 1rem 0 .4rem; padding: 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.k-stappen li { flex: 1 0 auto; display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem .55rem .55rem; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.k-stappen li a { color: inherit; }
.k-stappen__bol { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--vlak2); color: var(--gedempt); font-size: .8rem; font-weight: 800; }
.k-stappen li.is-klaar .k-stappen__bol { background: var(--groen); color: #fff; }
.k-stappen li.is-klaar { color: var(--gedempt); }

/* Betalen */
.k-geld__rij { display: flex; justify-content: space-between; align-items: baseline; margin: .2rem 0 .5rem; }
.k-geld__rij strong { font-family: Unbounded, "Arial Black", sans-serif; font-size: 1.4rem; }
.k-balk { height: 10px; border-radius: 999px; background: var(--vlak2); overflow: hidden; }
.k-balk span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), #ffd27f); border-radius: inherit; }
.k-open { margin: 1rem 0 0; padding: 1rem; border-radius: 14px; background: color-mix(in srgb, var(--amber) 16%, var(--vlak)); border: 1px solid var(--amber); }
.k-open p { margin: 0 0 .7rem; }
.k-open small { color: var(--gedempt); }
.k-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.k-docs li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.k-docs a { font-weight: 600; }
.k-bedrag { font-family: Unbounded, "Arial Black", sans-serif; font-size: 1.6rem; margin: .4rem 0 1rem; }
.k-bedrag small { font-family: Figtree, sans-serif; font-size: .85rem; color: var(--gedempt); }
.k-actie-kaart { border-color: var(--amber); }
.k-contact__knoppen { display: flex; flex-wrap: wrap; gap: .45rem; }
.k-contact__knoppen .m-knop-rand { min-height: 42px; padding: .4rem 1rem; }

/* Wensenlijst */
.k-plan { border: 0; padding: 0; margin: 0 0 .6rem; }
.k-plan legend { font-weight: 700; font-size: .92rem; padding: 0; }
.k-plan-rij { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: .45rem; margin-bottom: .45rem; }
.k-plan-rij[hidden] { display: none; }
.k-erbij { border: 1px dashed var(--lijn); background: transparent; color: var(--tekst); border-radius: 12px; padding: .6rem 1rem; font: inherit; font-weight: 600; cursor: pointer; width: 100%; }
.k-erbij:hover { border-color: var(--amber); }
.k-wensen .m-opslaan, .k-kaart .m-opslaan { position: static; background: none; padding: .6rem 0 0; }
.k-wijzigingen { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .5rem; }
.k-wijzigingen li { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: .7rem .9rem; }
.k-wijzigingen small { display: block; color: var(--gedempt); font-size: .8rem; }
.k-feesten a.m-item { color: inherit; }
@media (min-width: 900px) { .k-app .p-raster { grid-template-columns: minmax(0, 1fr) 360px; } .k-hero { padding: 2.2rem 2.4rem; } .k-aftel { min-width: 140px; padding: 1rem 1.3rem; } .k-aftel strong { font-size: 3rem; } }
.k-app .m-kop { padding-bottom: .6rem; }
.k-app .p-welkom.k-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; }
@media (max-width: 899px) {
	.k-app .p-raster { display: flex; flex-direction: column; }
	.k-app .p-zij { order: -1; margin-top: 1rem; }
	.k-app .p-zij .k-contact { display: none; }
	.k-app .p-raster::after { content: none; }
}
@media (max-width: 899px) { .k-app .p-hoofd::after { content: ""; } }
@media (max-width: 600px) { .k-wie__mail { display: none; } }
@media (min-width: 900px) { .k-alleen-mobiel { display: none; } }

/* Uitlijning */
.k-stappen { margin: 1rem 0 1.4rem; }
.k-stappen li { position: relative; }
.k-app .p-hoofd > .m-maand:first-child { margin-top: 0; }
.k-veld legend { font-weight: 700; font-size: .92rem; padding: 0; margin-bottom: .3rem; }
fieldset.k-veld { border: 0; padding: 0; margin: .4rem 0 .8rem; min-width: 0; }
.k-veld small a { color: var(--tekst); font-weight: 700; }
.k-velden { display: grid; gap: 0 1.2rem; margin-top: .4rem; }
@media (min-width: 900px) {
	.k-stappen li { flex: 1 1 0; justify-content: center; }
	.k-app .p-zij { margin-top: 1.75rem; }
	/* Velden twee aan twee, met labels, uitleg en invoer op gelijke hoogte. */
	.k-velden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.k-velden .k-veld { grid-row: span 3; grid-template-rows: subgrid; align-items: end; gap: .3rem; margin: .5rem 0; }
	.k-velden .k-veld label { align-self: end; }
	.k-velden .k-veld small { align-self: start; margin-top: 0; }
}

/* Kennismaken */
.k-kennis p { margin: 0 0 .8rem; }
.k-kennis__status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--amber) 28%, transparent); font-weight: 700; font-size: .88rem; }
.k-kennis__status--ja { background: color-mix(in srgb, var(--groen) 20%, transparent); }
.k-kennis__moment { font-family: Unbounded, "Arial Black", sans-serif; font-size: 1.15rem; line-height: 1.3; }
.k-prik { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: .45rem; margin-bottom: .45rem; }
.k-keuzes { display: flex; flex-wrap: wrap; gap: .45rem; }
.k-keuze { position: relative; }
.k-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.k-keuze span { display: inline-flex; align-items: center; min-height: 42px; padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--lijn); background: var(--bg); font-weight: 600; cursor: pointer; }
.k-keuze input:checked + span { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.k-keuze input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 35%, transparent); }
.k-kennis__anders summary { cursor: pointer; font-weight: 700; padding: .3rem 0; }
.k-kennis__anders[open] summary { margin-bottom: .6rem; }
.k-kennis__form .m-opslaan { position: static; background: none; padding: .4rem 0 0; }
@media (min-width: 900px) { .k-velden .k-veld:last-child:nth-child(odd) { grid-column: 1 / -1; } }
