/* =========================================================================
   Cool Kinderfeestje - reserveringsflow (gedeelde stijl)
   Alles is gescoped onder .ckf-reserve zodat de rest van de site
   ongemoeid blijft. De flow-pagina's wrappen hun inhoud in .ckf-reserve.
   ========================================================================= */

.ckf-reserve{
	--ckf-bg:#fafaf8;
	--ckf-surface:#ffffff;
	--ckf-surface-muted:#f6f6f3;
	--ckf-text:#26340f;
	--ckf-muted:#5b6b46;
	--ckf-border:#e4e9da;
	--ckf-primary:#95c01e;
	--ckf-primary-dark:#6f9415;
	--ckf-primary-soft:#f0f7dc;
	--ckf-accent:#ff8100;
	--ckf-accent-dark:#d96c00;
	--ckf-shadow-sm:0 1px 2px rgba(38,52,15,0.06);
	--ckf-shadow-md:0 12px 34px rgba(38,52,15,0.10);
	--ckf-radius:18px;
	--ckf-radius-sm:12px;
	--ckf-transition:200ms ease;

	font-family:"Source Sans 3",system-ui,sans-serif;
	font-size:16px;
	line-height:1.5;
	color:var(--ckf-text);
	max-width:1120px;
	margin:0 auto;
	padding:8px 4px 150px;
}

.ckf-reserve *{ box-sizing:border-box; }

.ckf-reserve h1,
.ckf-reserve h2,
.ckf-reserve h3,
.ckf-reserve h4,
.ckf-reserve .ckf-name{
	font-family:"Baloo 2",cursive;
	letter-spacing:0.01em;
	color:var(--ckf-text);
}
.ckf-reserve h2{
	font-size:clamp(22px,3.6vw,29px);
	line-height:1.15;
	margin:0 0 4px;
}
.ckf-reserve h3{ font-size:clamp(20px,3vw,24px); }
.ckf-reserve h4{ font-size:19px; }
.ckf-reserve a{ color:var(--ckf-primary-dark); }
.ckf-reserve hr{ border-top:1px solid var(--ckf-border);margin:18px 0; }

/* ---------- Stappenbalk (5 stappen) ---------- */
.ckf-steps{
	display:flex;
	gap:10px;
	margin:0 0 24px;
}
.ckf-step{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:12px 14px;
	border-radius:var(--ckf-radius-sm);
	background:var(--ckf-surface);
	border:1px solid var(--ckf-border);
	color:var(--ckf-muted);
	font-size:15px;
	transition:all var(--ckf-transition);
}
.ckf-step.active{
	background:var(--ckf-primary-soft);
	border-color:#cbe388;
	color:var(--ckf-primary-dark);
	box-shadow:var(--ckf-shadow-sm);
	font-weight:600;
}
.ckf-step.done{ color:var(--ckf-text); }
.ckf-step-num{
	width:30px;height:30px;flex-shrink:0;
	border-radius:50%;
	display:grid;place-items:center;
	font-weight:700;font-size:14px;
	background:#e6ebda;color:#8a9873;
}
.ckf-step.active .ckf-step-num,
.ckf-step.done .ckf-step-num{
	background:var(--ckf-primary);color:#fff;
}
.ckf-step-label{ white-space:nowrap; }

/* ---------- Kaart / paneel ---------- */
.ckf-panel{
	background:var(--ckf-surface);
	border:1px solid var(--ckf-border);
	border-radius:var(--ckf-radius);
	box-shadow:var(--ckf-shadow-md);
	padding:36px;
	margin-bottom:28px;
}
.ckf-panel h2{
	margin:0;
	font-size:clamp(24px,4vw,30px);
	line-height:1.15;
}
.ckf-sub{
	margin:6px 0 0;
	color:var(--ckf-muted);
	font-size:16px;
}

/* Bestaande Bootstrap-panelen binnen de flow krijgen dezelfde kaartlook. */
.ckf-reserve .panel,
.ckf-reserve .panel.section{
	background:var(--ckf-surface);
	border:1px solid var(--ckf-border);
	border-radius:var(--ckf-radius);
	box-shadow:var(--ckf-shadow-md);
	padding:24px;
	margin-bottom:24px;
}
.ckf-reserve .panel .panel,
.ckf-reserve .panel.section .panel{
	box-shadow:none;
}

/* ---------- Notice / info regel ---------- */
.ckf-notice{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:18px 0 26px;
	color:var(--ckf-muted);
	font-size:16px;
}
.ckf-notice svg{ flex-shrink:0;margin-top:2px;color:var(--ckf-accent); }
.ckf-notice a{ color:var(--ckf-accent-dark);font-weight:600; }

/* ---------- Product grid (datumcheck) ---------- */
.product-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:26px;
}

.ckf-reserve .imageradio{
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:100%;
	width:100%;
	border:2px solid var(--ckf-border);
	border-radius:var(--ckf-radius);
	overflow:hidden;
	background:var(--ckf-surface);
	cursor:pointer;
	box-shadow:var(--ckf-shadow-sm);
	transition:transform var(--ckf-transition),box-shadow var(--ckf-transition),border-color var(--ckf-transition);
}
.ckf-reserve .imageradio:hover{
	transform:translateY(-3px);
	box-shadow:var(--ckf-shadow-md);
	border-color:#cbd5c1;
}
.ckf-reserve .imageradio.is-selected{
	border-color:var(--ckf-primary);
	box-shadow:0 0 0 4px rgba(149,192,30,0.22),var(--ckf-shadow-md);
}

.ckf-media{
	position:relative;
	aspect-ratio:4 / 3;
	background:#f1f4ea;
	border-bottom:1px solid var(--ckf-border);
	overflow:hidden;
}
.ckf-reserve .imageradio .ckf-media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border:0;
	border-radius:0;
	transition:transform 260ms ease;
}
.ckf-reserve .imageradio:hover .ckf-media img{ transform:scale(1.03); }

.ckf-badge{
	position:absolute;top:10px;left:10px;
	padding:6px 10px;
	border-radius:999px;
	background:rgba(38,52,15,0.72);
	color:#fff;
	font-size:13px;font-weight:600;
}

.ckf-reserve .datelink{
	position:absolute;top:10px;right:10px;
	display:none;
	padding:8px 12px;
	border:0;border-radius:999px;
	background:var(--ckf-primary);
	color:#fff;
	font-size:13px;font-weight:600;
	cursor:pointer;
	box-shadow:var(--ckf-shadow-sm);
}

.ckf-body{
	display:flex;
	flex-direction:column;
	gap:6px;
	padding:14px 14px 16px;
	flex:1;
}
.ckf-name{
	font-size:17px;
	line-height:1.25;
	color:var(--ckf-text);
}
.ckf-price{
	margin-top:auto;
	font-weight:700;
	font-size:16px;
	color:var(--ckf-primary-dark);
}

/* ---------- Formuliervelden ---------- */
.ckf-reserve .form-control{
	height:auto;
	padding:12px 14px;
	border:1px solid #b9c4a7;
	border-radius:var(--ckf-radius-sm);
	background:#ffffff;
	box-shadow:none;
	color:var(--ckf-text);
	font-size:16px;
	transition:border-color var(--ckf-transition),box-shadow var(--ckf-transition),background var(--ckf-transition);
}
.ckf-reserve .form-control::placeholder{ color:#98a487; }
.ckf-reserve .form-control[disabled],
.ckf-reserve .form-control[readonly],
.ckf-reserve .form-control:disabled{
	background:#eef0ea;
	color:#8a9478;
	cursor:not-allowed;
}
.ckf-reserve .form-control:focus{
	border-color:var(--ckf-primary);
	background:#fff;
	box-shadow:0 0 0 4px rgba(149,192,30,0.2);
}
.ckf-reserve textarea.form-control{ min-height:120px; }
.ckf-reserve select.form-control{ cursor:pointer; }

.ckf-date-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}
.ckf-reserve .ckf-field-label{
	display:block;
	margin-bottom:8px;
	font-weight:600;
	font-size:16px;
	color:var(--ckf-text);
}
.ckf-reserve .input-group{ width:100%; }
.ckf-reserve .datepicker.form-control{
	padding:14px 16px;
	border-radius:var(--ckf-radius-sm) 0 0 var(--ckf-radius-sm);
	cursor:pointer;
}
/* Verberg het native kalender-icoon; we gebruiken het eigen groene icoon. */
.ckf-reserve .datepicker.form-control::-webkit-calendar-picker-indicator{
	display:none;
	-webkit-appearance:none;
	opacity:0;
}
.ckf-reserve .datepicker.form-control::-webkit-inner-spin-button{
	display:none;
}
.ckf-reserve .input-group-addon{
	background:var(--ckf-primary-soft);
	border:1px solid var(--ckf-border);
	border-left:0;
	border-radius:0 var(--ckf-radius-sm) var(--ckf-radius-sm) 0;
	color:var(--ckf-primary-dark);
	cursor:pointer;
}

.ckf-reserve .checkbox{ margin-top:16px;color:var(--ckf-muted);font-size:16px; }
.ckf-reserve .checkbox label{ font-size:16px;font-weight:400; }
.ckf-reserve .checkbox a{ color:var(--ckf-primary-dark); }
.ckf-reserve .radio{ color:var(--ckf-muted); }
.ckf-reserve .radio label{ font-weight:400; }

/* ---------- Tip / alerts ---------- */
.ckf-tip{
	margin-top:18px;
	padding:14px 16px;
	border-radius:var(--ckf-radius-sm);
	background:#d9edf7;
	border:1px solid #bce8f1;
	color:#31708f;
	font-size:15px;
}
.ckf-tip strong{ color:#31708f; }

.ckf-reserve .alert{
	border-radius:var(--ckf-radius-sm);
	border:1px solid transparent;
	padding:14px 16px;
}
.ckf-reserve .alert-info{ background:#d9edf7;border-color:#bce8f1;color:#31708f; }
.ckf-reserve .alert-danger{ background:#fbeaea;border-color:#f3c7c7;color:#a94442; }
.ckf-reserve .alert-success{ background:var(--ckf-primary-soft);border-color:#cbe388;color:var(--ckf-primary-dark); }
.ckf-reserve .alert-warning{ background:#fcf3e3;border-color:#f5e0b8;color:#8a6d3b; }

/* Betaal-samenvatting (well) */
.ckf-paysummary{
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:20px;
	margin:18px 0;
	padding:18px 20px;
	border:1px solid var(--ckf-border);
	border-radius:var(--ckf-radius-sm);
	background:var(--ckf-surface-muted);
}
.ckf-pay-grid{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:8px 20px;
	align-items:center;
	margin:0;
}
.ckf-pay-grid dt{ color:var(--ckf-muted);font-weight:600; }
.ckf-pay-grid dd{ margin:0;font-size:18px;font-weight:600;color:var(--ckf-text); }
.ckf-pay-grid dd.ckf-amount{ font-size:24px;color:var(--ckf-primary-dark); }
.ckf-pay-actions{ text-align:right; }
.ckf-reserve .ckf-download-btn{
	background:transparent;
	border:1px solid var(--ckf-primary);
	color:var(--ckf-primary-dark);
}
.ckf-reserve .ckf-download-btn:hover,
.ckf-reserve .ckf-download-btn:focus{
	background:var(--ckf-primary-soft);
	color:var(--ckf-primary-dark);
}
.ckf-reserve .ckf-download-btn i{ margin-right:8px; }
@media (max-width:640px){
	.ckf-paysummary{ grid-template-columns:1fr; }
	.ckf-pay-actions{ text-align:center; }
	.ckf-reserve .ckf-download-btn{ width:100%; }
}

/* Uitkomst-pagina (voldaan/mislukt/open) */
.ckf-result{ max-width:760px;margin:0 auto;text-align:center; }
.ckf-result .ckf-result-icon{ font-size:52px;line-height:1;margin-bottom:12px; }
.ckf-result h2{ margin-bottom:8px; }
.ckf-result p{ color:var(--ckf-muted);font-size:16px; }

/* ---------- Tabellen (controle) ---------- */
.ckf-reserve .table{ margin-bottom:0;font-size:16px; }
.ckf-reserve .table > thead > tr > th{
	border-bottom:2px solid var(--ckf-border);
	color:var(--ckf-text);
	font-family:"Baloo 2",cursive;
	font-weight:600;
	font-size:16px;
}
.ckf-reserve .table > tbody > tr > td{
	border-top:1px solid var(--ckf-border);
	padding:10px 8px;
	vertical-align:middle;
	font-size:16px;
}
.ckf-reserve .alert{ font-size:16px; }
.ckf-reserve .alert strong{ font-size:17px; }

/* Ophalen / Terugbrengen tijden - twee kolommen op groot scherm */
.ckf-times{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}
.ckf-time{
	padding:16px 18px;
	border:1px solid var(--ckf-border);
	border-radius:var(--ckf-radius-sm);
	background:var(--ckf-surface-muted);
}
.ckf-time-label{
	display:block;
	font-family:"Baloo 2",cursive;
	font-size:15px;
	text-transform:uppercase;
	letter-spacing:0.04em;
	color:var(--ckf-muted);
	margin-bottom:4px;
}
.ckf-time-value{
	display:block;
	font-size:20px;
	font-weight:600;
	color:var(--ckf-text);
}
@media (max-width:640px){
	.ckf-times{ grid-template-columns:1fr; }
}

.ckf-phone{ margin:0 0 6px;color:var(--ckf-muted); }
.ckf-phone a{ color:var(--ckf-primary-dark);font-weight:600; }

.ckf-selected-title{
	display:none;
	margin:0 0 16px;
	padding:12px 14px;
	border-radius:var(--ckf-radius-sm);
	background:var(--ckf-primary-soft);
	color:var(--ckf-primary-dark);
	font-weight:600;
}
.ckf-selected-title.visible{ display:block; }

/* ---------- Knoppen ---------- */
.ckf-reserve .btn{
	border-radius:999px;
	font-family:"Source Sans 3",sans-serif;
	font-weight:600;
	font-size:16px;
	padding:12px 24px;
	border:1px solid transparent;
	box-shadow:none;
	transition:background var(--ckf-transition),transform var(--ckf-transition),box-shadow var(--ckf-transition),opacity var(--ckf-transition),color var(--ckf-transition);
}
.ckf-reserve .btn-lg{ padding:14px 28px;font-size:16px; }
.ckf-reserve .btn-success{
	background:var(--ckf-primary);
	border-color:var(--ckf-primary);
	color:#fff;
	box-shadow:0 10px 24px rgba(149,192,30,0.34);
}
.ckf-reserve .btn-success:hover,
.ckf-reserve .btn-success:focus{
	background:var(--ckf-primary-dark);
	border-color:var(--ckf-primary-dark);
	color:#fff;
}
.ckf-reserve .btn-default{
	background:#fff;
	border-color:var(--ckf-border);
	color:var(--ckf-muted);
}
.ckf-reserve .btn-default:hover,
.ckf-reserve .btn-default:focus{
	background:var(--ckf-surface-muted);
	color:var(--ckf-text);
}
.ckf-reserve .btn-info{
	background:#fff;
	border-color:#bce8f1;
	color:#31708f;
}
.ckf-reserve .btn-info:hover,
.ckf-reserve .btn-info:focus{
	background:#d9edf7;
	color:#245269;
}
.ckf-reserve .btn.disabled,
.ckf-reserve .btn[disabled]{ opacity:0.45;box-shadow:none;cursor:not-allowed; }

/* ---------- Sticky onderbalk ---------- */
.ckf-sticky{
	position:fixed;left:0;right:0;bottom:0;z-index:50;
	padding:14px 20px calc(14px + env(safe-area-inset-bottom));
	background:rgba(255,255,255,0.94);
	border-top:1px solid var(--ckf-border);
	box-shadow:0 -8px 30px rgba(38,52,15,0.08);
}
.ckf-sticky-inner{
	max-width:1120px;margin:0 auto;
	display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ckf-summary{ color:var(--ckf-muted);font-size:15px; }
.ckf-summary strong{ color:var(--ckf-text); }
.ckf-sticky .ckf-actions{ display:flex;align-items:center;gap:12px;margin-left:auto; }

.ckf-reserve #post{
	border:0;border-radius:999px;
	padding:14px 26px;
	font-family:"Source Sans 3",sans-serif;
	font-weight:700;font-size:16px;
	color:#fff;
	background:var(--ckf-primary);
	box-shadow:0 10px 24px rgba(149,192,30,0.34);
	cursor:pointer;
	transition:background var(--ckf-transition),transform var(--ckf-transition),box-shadow var(--ckf-transition),opacity var(--ckf-transition);
}
.ckf-reserve #post:hover:not(.disabled){
	background:var(--ckf-primary-dark);
	transform:translateY(-1px);
	color:#fff;
}
.ckf-reserve #post.disabled{
	opacity:0.45;cursor:not-allowed;box-shadow:none;
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
	.product-grid{ grid-template-columns:repeat(2,1fr);gap:20px; }
	.ckf-date-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
	.ckf-step{ flex-direction:column;gap:6px;text-align:center;padding:10px 8px; }
	.ckf-step-label{ font-size:12px;white-space:normal; }
}
@media (max-width:560px){
	.ckf-reserve{ padding:4px 2px 160px; }
	.ckf-panel{ padding:20px; }
	.ckf-reserve .panel,
	.ckf-reserve .panel.section{ padding:18px; }
	.product-grid{ grid-template-columns:repeat(2,1fr);gap:14px; }
	.ckf-name{ font-size:16px; }
	.ckf-sticky-inner{ gap:10px; }
	.ckf-step-label{ display:none; }
	.ckf-step{ padding:10px 0; }
}
@media (max-width:380px){
	.product-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
	.ckf-reserve *{ transition:none !important; }
}