/* =========================================================================
   Kraamzorgpakketten (care packages) — KraamZus
   Scoped under .kzp- so it never affects existing/live styles.
   Brand tokens: pink #e2388e, dark purple #52155a, cream #f2ede0,
   light pink #fce6f1, light lavender #f5ecf5.
   ========================================================================= */

.kzp-scope {
	--kzp-pink: #e2388e;
	--kzp-pink-dark: #c2185b;
	--kzp-purple: #52155a;
	--kzp-purple-dark: #4a0c5f;
	--kzp-cream: #f2ede0;
	--kzp-pink-light: #fce6f1;
	--kzp-lavender: #f5ecf5;
	--kzp-text: #52155a;
	--kzp-radius: 14px;
	color: var(--kzp-text);
}

.kzp-scope *,
.kzp-modal * {
	box-sizing: border-box;
}

/* ---- Buttons -------------------------------------------------------------- */
.kzp-btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 40px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all .2s ease;
}
.kzp-btn:focus { outline: 3px solid rgba(82, 21, 90, .35); outline-offset: 2px; }
.kzp-btn-primary { background: var(--kzp-purple); color: #fff; }
.kzp-btn-primary:hover { background: var(--kzp-purple-dark); color: #fff; }
.kzp-btn-secondary { background: var(--kzp-pink); color: #fff; }
.kzp-btn-secondary:hover { background: var(--kzp-pink-dark); color: #fff; }
.kzp-btn-ghost { background: #fff; color: var(--kzp-pink); border-color: #fff; }
.kzp-btn-ghost:hover { background: var(--kzp-pink-light); color: var(--kzp-pink-dark); }
.kzp-btn-outline { background: transparent; color: var(--kzp-purple); border-color: var(--kzp-purple); }
.kzp-btn-outline:hover { background: var(--kzp-purple); color: #fff; }

/* ---- Homepage / reusable block ------------------------------------------- */
.kzp-block { padding: 56px 0; }
.kzp-block .kzp-grid2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}
.kzp-block .kzp-col { flex: 1 1 380px; min-width: 280px; }
.kzp-headline {
	color: var(--kzp-pink);
	font-size: 38px;
	line-height: 1.1;
	margin: 0 0 18px;
	font-weight: 900;
}
.kzp-block p, .kzp-block li { color: var(--kzp-purple); font-size: 17px; }
.kzp-subhead { color: var(--kzp-pink); font-weight: 700; margin: 18px 0 4px; font-size: 19px; }
.kzp-cta-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Package tile grid (2x2) */
.kzp-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.kzp-tile {
	position: relative;
	border-radius: var(--kzp-radius);
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(82, 21, 90, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}
.kzp-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(82, 21, 90, .18); }
.kzp-tile:focus { outline: 3px solid rgba(82, 21, 90, .35); outline-offset: 3px; }
.kzp-tile .kzp-tile-hours {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -58%);
	font-size: 96px;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
	opacity: .15;
	pointer-events: none;
	user-select: none;
}
.kzp-tile .kzp-tile-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kzp-tile .kzp-tile-eyebrow {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .85;
}
.kzp-tile .kzp-tile-label {
	font-weight: 800;
	font-size: 19px;
	line-height: 1.2;
}
.kzp-tile-basis      { background: var(--kzp-cream); color: var(--kzp-purple); }
.kzp-tile-basis-plus { background: var(--kzp-pink); color: #fff; }
.kzp-tile-comfort    { background: var(--kzp-lavender); color: var(--kzp-purple); }
.kzp-tile-compleet   { background: var(--kzp-purple); color: #fff; }

/* ---- Information page ----------------------------------------------------- */
.kzp-page-title { color: var(--kzp-pink); font-size: 42px; font-weight: 900; margin: 0 0 24px; }
.kzp-intro { max-width: 820px; }
.kzp-intro p { color: var(--kzp-purple); font-size: 18px; line-height: 1.6; }
.kzp-section { padding: 48px 0; }
.kzp-section h2 { color: var(--kzp-pink); font-size: 30px; font-weight: 900; margin: 0 0 20px; }
.kzp-section h3 { color: var(--kzp-pink); font-size: 22px; font-weight: 700; margin: 18px 0 6px; }

/* Intro note (italic reassurance line) */
.kzp-intro-note { color: var(--kzp-purple); font-size: 16px; }

/* Comparison cards (new layout) */
.kzp-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}
.kzp-card {
	border-radius: var(--kzp-radius);
	padding: 22px 20px 24px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 24px rgba(82, 21, 90, .08);
}
.kzp-card-jump { display: block; text-decoration: none; color: inherit; }
.kzp-card-jump:hover .kzp-card-name { text-decoration: underline; }
.kzp-card-media { display: block; margin: -22px -20px 16px; border-radius: var(--kzp-radius) var(--kzp-radius) 0 0; overflow: hidden; }
.kzp-card-media img, .kzp-card-media .kzp-img-placeholder { display: block; width: 100%; height: 150px; object-fit: cover; }
.kzp-card-eyebrow { display: block; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.kzp-card-name { display: block; font-size: 20px; font-weight: 800; margin: 2px 0 8px; }
.kzp-card-summary { display: block; font-size: 15px; font-style: italic; margin-bottom: 14px; }
.kzp-card-phys { font-weight: 700; font-size: 15px; margin: 0 0 8px; color: inherit; }
.kzp-card-digital { list-style: none; padding: 0; margin: 0 0 14px; }
.kzp-card-digital li { font-size: 14px; padding: 4px 0; color: inherit; }
.kzp-card-features { list-style: none; padding: 0; margin: 0 0 16px; }
.kzp-card-features li { font-size: 14px; padding: 6px 0; display: flex; gap: 8px; align-items: baseline; }
.kzp-card-features .kzp-checks { font-weight: 900; letter-spacing: -2px; white-space: nowrap; }
.kzp-card-footer { margin-top: auto; font-weight: 700; font-size: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.12); }
.kzp-card-signup { margin-top: 16px; padding: 12px 20px; font-size: 15px; text-align: center; background: var(--kzp-purple); color: #fff; }
.kzp-card-signup:hover { background: var(--kzp-purple-dark); color: #fff; }

.kzp-card-basis      { background: var(--kzp-cream); color: var(--kzp-purple); }
.kzp-card-basis-plus { background: var(--kzp-pink); color: #fff; }
.kzp-card-comfort    { background: var(--kzp-lavender); color: var(--kzp-purple); }
.kzp-card-compleet   { background: var(--kzp-purple); color: #fff; }
/* On dark cards: white sign-up button with coloured text for contrast */
.kzp-card-basis-plus .kzp-card-signup,
.kzp-card-compleet .kzp-card-signup { background: #fff; color: var(--kzp-purple); }
.kzp-card-basis-plus .kzp-card-signup:hover,
.kzp-card-compleet .kzp-card-signup:hover { background: var(--kzp-pink-light); color: var(--kzp-purple-dark); }
.kzp-card-basis-plus .kzp-card-footer,
.kzp-card-compleet .kzp-card-footer { border-top-color: rgba(255,255,255,.3); }

/* Image placeholders (reserved space until an admin sets an image) */
.kzp-img-placeholder {
	background: repeating-linear-gradient(45deg, #efe7d8, #efe7d8 12px, #e7dcc6 12px, #e7dcc6 24px);
	color: #7a6a52;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Colour-coded content bands */
.kzp-band { padding: 56px 0; scroll-margin-top: 100px; }
.kzp-band h2 { margin-top: 0; }
.kzp-band p { font-size: 17px; line-height: 1.65; }
.kzp-band .kzp-col-media img,
.kzp-band .kzp-col-media .kzp-img-placeholder { width: 100%; border-radius: var(--kzp-radius); }
.kzp-band-signup { margin-top: 10px; }
.kzp-band-basis .kzp-band-signup, .kzp-band-comfort .kzp-band-signup { background: var(--kzp-purple); color: #fff; }
.kzp-band-basis-plus .kzp-band-signup, .kzp-band-compleet .kzp-band-signup { background: #fff; color: var(--kzp-purple); }

/* Keuzehulp emphasis band */
.kzp-band-keuzehulp { background: var(--kzp-purple); padding: 44px 0; }
.kzp-band-keuzehulp h2 { color: #fff; margin: 0 0 10px; }
.kzp-band-keuzehulp p { color: #fff; }
.kzp-band-basis      { background: var(--kzp-pink-light); }
.kzp-band-basis h2   { color: var(--kzp-pink); }
.kzp-band-basis p    { color: var(--kzp-purple); }
.kzp-band-basis-plus { background: var(--kzp-pink); }
.kzp-band-basis-plus h2, .kzp-band-basis-plus p { color: #fff; }
.kzp-band-comfort    { background: var(--kzp-lavender); }
.kzp-band-comfort h2 { color: var(--kzp-pink); }
.kzp-band-comfort p  { color: var(--kzp-purple); }
.kzp-band-compleet   { background: var(--kzp-purple); }
.kzp-band-compleet h2, .kzp-band-compleet p { color: #fff; }

/* Fysiek & digitaal two-column */
.kzp-twocol { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.kzp-twocol .kzp-col { flex: 1 1 380px; min-width: 280px; }
.kzp-col-media img, .kzp-col-media .kzp-img-placeholder { width: 100%; border-radius: var(--kzp-radius); }
.kzp-fysiek-img { width: 100%; border-radius: var(--kzp-radius); }

/* Intake band */
.kzp-band-intake { background: var(--kzp-pink-light); }
.kzp-band-intake h2 { color: var(--kzp-pink); }

/* FAQ accordion */
.kzp-faq { max-width: 880px; margin: 0 auto; }
.kzp-faq-item { border-bottom: 2px solid var(--kzp-pink-light); }
.kzp-faq-q {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 20px 44px 20px 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--kzp-purple);
	cursor: pointer;
	position: relative;
}
.kzp-faq-q::after {
	content: "+";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	color: var(--kzp-pink);
}
.kzp-faq-q[aria-expanded="true"]::after { content: "–"; }
.kzp-faq-a { display: none; padding: 0 0 22px; }
.kzp-faq-a p { color: var(--kzp-purple); font-size: 16px; line-height: 1.6; margin: 0 0 10px; }
.kzp-faq-item.is-open .kzp-faq-a { display: block; }

/* ---- Choice-aid modal ---------------------------------------------------- */
.kzp-modal[hidden] { display: none; }
.kzp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.kzp-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(74, 12, 95, .6);
}
.kzp-modal-panel {
	position: relative;
	background: var(--kzp-pink);
	color: #fff;
	border-radius: 22px;
	width: 100%;
	max-width: 720px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 48px 40px 40px;
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.kzp-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: transparent;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.kzp-modal-close:hover { background: #fff; color: var(--kzp-pink); }
.kzp-modal-close:focus { outline: 3px solid #fff; outline-offset: 2px; }
.kzp-step { display: none; }
.kzp-step.is-active { display: block; }
.kzp-modal-title { font-size: 30px; font-weight: 900; margin: 0 0 18px; color: #fff; }
.kzp-modal p { color: #fff; font-size: 17px; line-height: 1.55; }
.kzp-progress { font-size: 14px; opacity: .85; margin-bottom: 8px; }
.kzp-helper { font-style: italic; opacity: .9; margin-top: -6px; }

/* Answer buttons */
.kzp-answers { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.kzp-answer {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	color: var(--kzp-pink);
	border: 2px solid #fff;
	border-radius: 40px;
	padding: 14px 22px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.kzp-answer:hover { background: var(--kzp-pink-light); }
.kzp-answer:focus { outline: 3px solid #fff; outline-offset: 2px; }
.kzp-answer[aria-pressed="true"],
.kzp-answer.is-selected { background: var(--kzp-purple); color: #fff; border-color: var(--kzp-purple); }
.kzp-answer-multi { display: flex; align-items: center; gap: 12px; }
.kzp-answer-multi .kzp-check {
	width: 22px; height: 22px; flex: 0 0 22px;
	border: 2px solid currentColor; border-radius: 6px;
	display: inline-flex; align-items: center; justify-content: center;
}
.kzp-answer[aria-pressed="true"] .kzp-check::after { content: "✓"; font-size: 14px; }
.kzp-other-input {
	margin-top: 10px;
	width: 100%;
	padding: 12px 16px;
	border-radius: 14px;
	border: 0;
	font-size: 15px;
}

/* Modal navigation */
.kzp-modal-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.kzp-modal-nav .kzp-btn-primary { background: var(--kzp-purple); }
.kzp-modal-nav .kzp-btn-primary:hover { background: var(--kzp-purple-dark); }

/* Result screen */
.kzp-result-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 10px; }
.kzp-disclaimer { font-size: 13px; opacity: .9; line-height: 1.5; border-top: 1px solid rgba(255,255,255,.3); padding-top: 16px; margin-top: 16px; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
	.kzp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.kzp-headline { font-size: 30px; }
	.kzp-block .kzp-grid2 { flex-direction: column; }
	.kzp-block .kzp-col-content { order: 1; }
	.kzp-block .kzp-col-grid { order: 2; }
	.kzp-cards { grid-template-columns: 1fr; }
	.kzp-modal-panel { padding: 44px 22px 28px; }
	.kzp-modal-title { font-size: 24px; }
	.kzp-tile .kzp-tile-hours { font-size: 80px; }
}

/* =========================================================================
   Concept-preview overrides (scoped to body.kzp-active — never affects live).
   The mirrored homepage region-search renders as a half-width gradient box
   out of its front-page context; make it a clean full-container card here.
   ========================================================================= */
body.kzp-active #section-region-search .flex-row { display: block; }
body.kzp-active #section-region-search .flex-col-md-6 {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}
body.kzp-active #section-region-search .pt-region-search-advanced {
	background: #f3e7c4;
	border-radius: 14px;
}
body.kzp-active #section-region-search .pt-region-search-advanced figure { display: none; }