/* Kokend Heet — offerte · the price calculator [kokend_heet_bestelbon] — the same look as the "Bestelbon" element of
   kokend-heet-site, under its own class names (khb-…). Colours: the Site Settings globals (kh…), today's values as
   fallback (the --khb-… variables below). Fonts: the site's own (self-hosted), nothing from outside.
   Layout: computer = the form with the plate behind its right edge; tablet = the plate above the form, on the right,
   beside the intro; phone = no plate, one column. */

.khb-bon {
	--khb-groen: var(--e-global-color-khgroen, #1F3A34);
	--khb-wit: var(--e-global-color-khwit, #FFFFFF);
	--khb-mint: var(--e-global-color-khmint, #E8F0EC);
	--khb-goud: var(--e-global-color-khgoud, #C9A44C);
	--khb-inkt: var(--e-global-color-khinkt, #333333);
	--khb-grijs: var(--e-global-color-khgrijs, #555B58);
	--khb-grijs-groen: var(--e-global-color-khgrijsdonker, #CAD3CF);
	--khb-display: var(--font-display, "Cormorant Garamond", "Cormorant", Georgia, serif);
	--khb-text: var(--font-text, "Hanken Grotesk Variable", "Hanken Grotesk", system-ui, sans-serif);
	--khb-margin: var(--margin, clamp(1rem, 2.2vw, 2rem));
	--khb-gap: var(--gutter, clamp(1rem, 2vw, 2rem));
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	column-gap: var(--khb-gap);
	align-items: center;
	min-height: 100%;
}
/* in Elementor's Shortcode widget: its wrappers take the full height of the widget's place (as the element did), so the
   form sits in the same spot */
.elementor-widget-shortcode:has(.khb-bon) > .elementor-widget-container,
.elementor-widget-shortcode:has(.khb-bon) .elementor-shortcode { height: 100%; }
.khb-bon p { margin: 0; }

/* the plate: behind the form's right edge, out past the page edge (the section around it clips it) */
.khb-bon__plate {
	grid-column: 4 / -1;
	grid-row: 1;
	align-self: start;
	justify-self: end;
	z-index: 0;
	width: var(--khb-plate-w, min(36vw, 34rem));
	aspect-ratio: 1;
	margin: var(--khb-plate-top, -2rem) var(--khb-plate-right, calc(var(--khb-margin) * -1 - 6vw)) 0 0;
	border-radius: 50%;
	overflow: hidden;
}
.khb-bon__plate img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* the form: a white card, steps 1 (full width), 2 and 3 side by side */
.khb-bon__form {
	grid-column: 1 / span 6;
	grid-row: 1;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.75rem 2rem;
	margin: 0;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	background: var(--khb-card-bg, var(--khb-wit));
	color: var(--khb-card-ink, var(--khb-inkt));
	font-family: var(--khb-text);
}
.khb-bon:not(.has-plate) .khb-bon__form { grid-column: 1 / -1; }
.khb-bon__form > fieldset { grid-column: 1 / -1; }
.khb-bon__part { min-width: 0; margin: 0; padding: 0; border: 0; }
.khb-bon__label {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 .9rem;
	padding: 0;
	font-weight: 600;
	color: var(--khb-label, var(--khb-groen));
}
.khb-bon__n {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--khb-n-bg, var(--khb-groen));
	color: var(--khb-n-ink, var(--khb-wit));
	font-size: .85rem;
	font-weight: 600;
	line-height: 1;
}

/* step 1 — the buffet buttons (a radio button over each, so arrows and screen readers work as usual) */
.khb-chips { display: grid; grid-template-columns: repeat(var(--khb-cols, 5), minmax(0, 1fr)); gap: .5rem; }
.khb-chip {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: .8rem .4rem .7rem;
	background: var(--khb-chip-bg, var(--khb-mint));
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, transform .14s cubic-bezier(.23, 1, .32, 1);
}
.khb-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.khb-chip__plate {
	width: 3.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	outline: 1px solid transparent;
	outline-offset: 3px;
	transition: outline-color .2s ease;
}
.khb-chip__plate img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.khb-chip__name { font-family: var(--khb-display); font-size: 1.15rem; line-height: 1.05; color: var(--khb-chip-name, var(--khb-groen)); }
.khb-chip__pp { font-size: .875rem; color: var(--khb-chip-pp, var(--khb-grijs)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.khb-chip.is-chosen { background: var(--khb-chip-on-bg, var(--khb-groen)); }
.khb-chip.is-chosen .khb-chip__name,
.khb-chip.is-chosen .khb-chip__pp { color: var(--khb-chip-on-ink, var(--khb-wit)); }
.khb-chip.is-chosen .khb-chip__plate { outline-color: var(--khb-ring, var(--khb-goud)); }
.khb-chip:focus-within { outline: 2px solid var(--khb-groen); outline-offset: 3px; }
.khb-chip:focus-within:not(:has(:focus-visible)) { outline: none; }
.khb-chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
	.khb-chip:not(.is-chosen):hover { background: var(--khb-chip-hover, #DDE8E2); }
}

/* step 2 — how many people: − / + by the step, the number, the slider */
.khb-bon__people { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.khb-step {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	min-height: 3rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--khb-step-bg, var(--khb-mint));
	color: var(--khb-step-ink, var(--khb-groen));
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color .2s ease;
}
.khb-step svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.khb-step:focus-visible { outline: 2px solid var(--khb-groen); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.khb-step:hover { background: var(--khb-step-hover, #DDE8E2); }
}
.khb-bon .khb-bon__count {
	width: 4ch;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: center;
	font-family: var(--khb-display);
	font-size: clamp(2.75rem, 1.75rem + 2.2vw, 4rem);
	line-height: 1;
	color: var(--khb-count, var(--khb-groen));
	font-variant-numeric: tabular-nums;
}
.khb-bon .khb-bon__count:focus { outline: none; }
.khb-bon .khb-bon__count:focus-visible { outline: 2px solid var(--khb-groen); outline-offset: 4px; }
/* inline-block on purpose: like the theme's slider it sits on a text line, which keeps the same space under it
   (on a phone the price box below starts where it did) */
.khb-bon .khb-bon__range {
	display: inline-block;
	width: 100%;
	height: 2.75rem;
	margin: .75rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	accent-color: var(--khb-range, var(--khb-groen));
}
.khb-bon__notes p { margin-top: .25rem; font-size: .875rem; color: var(--khb-note, var(--khb-grijs)); }
.khb-bon__notes a { color: var(--khb-note-link, var(--khb-groen)); }

/* step 3 — the price: the total, the sum, the note, the button */
.khb-bon__result {
	display: grid;
	align-content: start;
	gap: .3rem;
	padding: 1.25rem 1.5rem 1.5rem;
	background: var(--khb-result-bg, var(--khb-groen));
	color: var(--khb-result-ink, var(--khb-wit));
}
.khb-bon__result .khb-bon__label { margin-bottom: .4rem; color: var(--khb-result-label, var(--khb-wit)); }
.khb-bon__result .khb-bon__n { background: var(--khb-n3-bg, var(--khb-goud)); color: var(--khb-n3-ink, var(--khb-groen)); }
.khb-bon__price {
	font-family: var(--khb-display);
	font-size: clamp(3rem, 1.75rem + 3vw, 4.75rem);
	line-height: .95;
	color: var(--khb-total, var(--khb-wit));
	font-variant-numeric: tabular-nums;
}
.khb-bon__sum { font-size: .875rem; font-weight: 600; color: var(--khb-sum, var(--khb-wit)); font-variant-numeric: tabular-nums; }
.khb-bon__sample { font-size: .875rem; color: var(--khb-sample, var(--khb-grijs-groen)); }
.khb-bon__sample a { color: inherit; }
.khb-bon__go { margin-top: .9rem; }
/* the house button (kh-knop, Site Settings) draws it; these are only what it needs here + a fallback look */
.khb-bon__go .elementor-button {
	width: 100%;
	min-height: 3.25rem;
	border: 2px solid var(--kh-bg, var(--khb-wit));
	border-radius: 999px;
	background-color: var(--kh-bg, var(--khb-wit));
	color: var(--kh-ink, var(--khb-groen));
	font-family: var(--khb-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .005em;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.khb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.khb-bon__empty { padding: 1rem; background: #FFF4D6; color: #333; font-size: .875rem; }

/* tablet: the form full width; the plate on the right above it, beside the intro (the section clips the right side) */
@media (max-width: 63.99em) {
	.khb-bon { display: block; }
	.khb-bon__plate {
		position: absolute;
		right: var(--khb-plate-right, calc(var(--khb-margin) * -1 - 6vw));
		bottom: calc(100% + var(--khb-plate-gap, 3rem));
		width: var(--khb-plate-w, 46vw);
		margin: 0;
	}
}

/* a narrow card (an iPad held sideways, ~1024–1250 px screens: the card beside the intro is under 530 px inside):
   the price box goes under steps 1–2 and the buffets go 3 + 2, so nothing is cut (issue 60). The card measures
   itself; wider cards, tablets and phones are unchanged. */
.khb-bon__form { container: khb-card / inline-size; }
@media (min-width: 48em) {
	@container khb-card (max-width: 529.98px) {
		.khb-bon__part, .khb-bon__result { grid-column: 1 / -1; }
		.khb-chips { grid-template-columns: repeat(var(--khb-cols-narrow, 3), minmax(0, 1fr)); }
	}
}

/* phone: no plate, one column, the card a little wider than the text */
@media (max-width: 47.99em) {
	.khb-bon__plate { display: none; }
	.khb-bon__form {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		margin-inline: calc(var(--khb-margin) * -.5);
		padding: 1.25rem;
	}
	.khb-chips { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
	.khb-chip { flex-direction: row; gap: .85rem; padding: .5rem 1rem .5rem .5rem; text-align: left; }
	.khb-chip__plate { flex: none; width: 2.75rem; }
	.khb-chip__name { flex: 1; font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.khb-chip, .khb-chip__plate, .khb-step { transition: none; }
	.khb-chip:active { transform: none; }
}