/* Kokend Heet — offerte · the look of the Offertemodule (kokend-heet-site 1.2.0, itself the theme's quote form), under
   its own class names (kho-…) so both can sit on one page. Colours: the Site Settings globals (kh…), today's values as
   fallback — as the Offertemodule on Offerte (93) shows them today. Fonts: the site's own (self-hosted), nothing from
   outside. The section around it (white, its padding) is the page's container.
   Layout: computer = the steps left, the price box beside them (sticky); tablet = one column, the price box sticks to
   the bottom; phone = extras and fields in one column, the price box shows only the total. */

.kho {
	--kho-groen: var(--e-global-color-khgroen, #1F3A34);
	--kho-wit: var(--e-global-color-khwit, #FFFFFF);
	--kho-mint: var(--e-global-color-khmint, #E8F0EC);
	--kho-inkt: var(--e-global-color-khinkt, #333333);
	--kho-grijs: var(--e-global-color-khgrijs, #555B58);
	--kho-grijs-groen: var(--e-global-color-khgrijsdonker, #CAD3CF);
	--kho-display: var(--font-display, "Cormorant Garamond", "Cormorant", Georgia, serif);
	--kho-text: var(--font-text, "Hanken Grotesk Variable", "Hanken Grotesk", system-ui, sans-serif);
	--kho-header: var(--header-h, clamp(4.5rem, 4rem + 2vw, 6rem));
	font-family: var(--kho-text);
	color: var(--kho-inkt);
}
.kho p { margin: 0; }
.kho [hidden] { display: none !important; }
html:has(.kho-summary) { scroll-padding-bottom: 12rem; }

.kho .kho-notice { margin: 0 0 2rem; }

.kho-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	margin: 0;
}
.kho-step { grid-column: 1; min-width: 0; margin: 0; padding: 0 0 3rem; border: 0; }
.kho-legend {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.25rem;
	padding: 0;
	font-family: var(--kho-display);
	font-size: clamp(2rem, 1rem + 2.4vw, 3.5rem);
	line-height: 1;
	color: var(--kho-legend, var(--kho-groen));
}
.kho-n {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--kho-n-bg, var(--kho-groen));
	color: var(--kho-n-ink, var(--kho-wit));
	font-family: var(--kho-text);
	font-size: 1rem;
	font-weight: 600;
}

/* step 1 — the buffet cards (a radio button over each, so arrows and screen readers work as usual) */
.kho-choices { display: grid; gap: .75rem; }
.kho-choice {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	padding: 1rem 1.25rem 1rem 1rem;
	background: var(--kho-choice-bg, var(--kho-mint));
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	transition: background-color .2s ease, transform .14s cubic-bezier(.23, 1, .32, 1);
}
.kho-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kho-choice__plate { width: 5.5rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.kho-choice__plate img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kho-choice__body { display: grid; gap: .2rem; }
.kho-choice__name {
	overflow-wrap: anywhere;
	-webkit-hyphens: auto;
	hyphens: auto;
	font-family: var(--kho-display);
	font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem);
	line-height: 1.05;
	color: var(--kho-choice-name, var(--kho-groen));
}
.kho-choice__contents { font-size: .875rem; color: var(--kho-choice-contents, var(--kho-grijs)); }
.kho-choice__price { font-weight: 600; color: var(--kho-choice-price, var(--kho-groen)); font-variant-numeric: tabular-nums; }
.kho-choice:has(input:checked) { background: var(--kho-choice-on-bg, var(--kho-groen)); }
.kho-choice:has(input:checked) .kho-choice__name,
.kho-choice:has(input:checked) .kho-choice__price { color: var(--kho-choice-on-ink, var(--kho-wit)); }
.kho-choice:has(input:checked) .kho-choice__contents { color: var(--kho-choice-on-contents, var(--kho-grijs-groen)); }
.kho-choice:has(input:focus-visible) { outline: 2px solid var(--kho-groen); outline-offset: 3px; }
.kho-choice:active { transform: scale(.99); }

/* step 2 — the extras (a checkbox over each) */
.kho-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.kho-check {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	column-gap: .85rem;
	align-content: center;
	align-items: center;
	min-height: 4rem;
	padding: .85rem 1.1rem;
	background: var(--kho-check-bg, var(--kho-mint));
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.kho-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kho-check__box {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--kho-check-box, var(--kho-groen));
	transition: background-color .2s ease;
}
.kho-check__box::after {
	content: "";
	width: .45rem;
	height: .8rem;
	border: solid var(--kho-wit);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px) scale(.6);
	opacity: 0;
	transition: transform .26s cubic-bezier(.23, 1, .32, 1), opacity .26s ease;
}
.kho-check:has(input:checked) .kho-check__box { background: var(--kho-check-box, var(--kho-groen)); }
.kho-check:has(input:checked) .kho-check__box::after { transform: rotate(45deg) translate(-1px, -1px) scale(1); opacity: 1; }
.kho-check:has(input:focus-visible) { outline: 2px solid var(--kho-groen); outline-offset: 3px; }
.kho-check__name { font-weight: 600; color: var(--kho-check-name, var(--kho-groen)); }
.kho-check__price { grid-column: 2; font-size: .875rem; color: var(--kho-check-price, var(--kho-grijs)); font-variant-numeric: tabular-nums; }
@media (hover: none) {
	.kho-check:active { opacity: .7; transition: opacity .1s cubic-bezier(.23, 1, .32, 1); }
}

/* step 3 — how many people: − / + round (like the Bestelbon), in one row with the number */
.kho-stepper { display: flex; align-items: center; gap: .5rem; }
.kho-stepbtn {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.75rem;
	min-height: 3.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kho-step-bg, var(--kho-mint));
	color: var(--kho-step-ink, var(--kho-groen));
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color .2s ease;
}
.kho-stepbtn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.kho-stepbtn:focus-visible { outline: 2px solid var(--kho-groen); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.kho-stepbtn:hover { background: var(--kho-step-hover, #DDE8E2); }
}
.kho-hint p { margin-top: .75rem; font-size: .875rem; color: var(--kho-hint, var(--kho-grijs)); }
.kho .kho-hint a { color: var(--kho-label, var(--kho-groen)); text-decoration: underline; text-underline-offset: .15em; } /* the mail link looks like a link (as the privacy link) */

/* the fields (the number of people and step 4) */
.kho .kho-field {
	box-sizing: border-box;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: .75rem 1rem;
	border: 0;
	border-radius: 0;
	background: var(--kho-field-bg, var(--kho-mint));
	color: var(--kho-field-ink, var(--kho-inkt));
	font-family: inherit;
	font-size: max(1rem, var(--step-body, clamp(1.0625rem, 1rem + .25vw, 1.1875rem)));
}
.kho .kho-field:user-invalid,
.kho .kho-fields .kho-field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--kho-error, #B3261E); }
.kho textarea.kho-field { min-height: 7rem; resize: vertical; }
.kho .kho-people { width: 7rem; font-size: 1.25rem; }
/* step 4: the two columns line up row by row — a cell never stretches to its neighbour's error line, and every one-line
   box has one height (the date box's own inner edges are 2px taller) */
.kho-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: start; }
.kho-fields input.kho-field,
.kho-fields select.kho-field { height: max(3.25rem, calc(1.5rem + 1.55em)); }
.kho-f { display: grid; align-content: start; gap: .4rem; }
.kho-f > span { font-size: .95rem; font-weight: 600; color: var(--kho-label, var(--kho-groen)); }
.kho-f--wide { grid-column: 1 / -1; }
.kho-f__error { font-size: .875rem; font-weight: 600; color: var(--kho-error, #B3261E); }
.kho-f__error:empty { display: none; }

/* the price box: the total, the lines, the note, the button */
.kho-summary {
	grid-column: 2;
	grid-row: 1 / span 4;
	position: sticky;
	top: calc(var(--kho-header) + 1rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: calc(100dvh - var(--kho-header) - 2rem);
	padding: 2rem;
	background: var(--kho-summary-bg, var(--kho-groen));
	color: var(--kho-summary-ink, var(--kho-wit));
}
.kho-summary__label { font-weight: 600; color: var(--kho-summary-muted, var(--kho-grijs-groen)); }
.kho-summary__total {
	font-family: var(--kho-display);
	font-size: clamp(3rem, 2rem + 2.6vw, 4.5rem);
	line-height: .95;
	color: var(--kho-total, var(--kho-wit));
	font-variant-numeric: tabular-nums;
}
.kho-summary__lines {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .35rem 1rem;
	min-height: 0;
	margin: 0;
	overflow: auto;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}
.kho-summary__lines dt { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; color: var(--kho-summary-muted, var(--kho-grijs-groen)); }
.kho-summary__lines dd { margin: 0; text-align: right; }
.kho-summary__note { font-size: .875rem; color: var(--kho-summary-muted, var(--kho-grijs-groen)); }
.kho-summary__note a { color: inherit; }
/* the house button (kh-knop kh-knop-licht, Site Settings) draws it; these are only what it needs here + a fallback look */
.kho .kho-go.kh-knop { --kh-pad: 1.25rem; width: 100%; }
.kho-go .elementor-button {
	width: 100%;
	min-height: 3.25rem;
	border: 2px solid var(--kh-bg, var(--kho-wit));
	border-radius: 999px;
	background-color: var(--kh-bg, var(--kho-wit));
	color: var(--kh-ink, var(--kho-groen));
	font-family: var(--kho-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .005em;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* thank you */
.kho-done { margin-top: 2rem; padding: 2rem; background: var(--kho-wit); }
.kho-done h2 { margin: 0 0 .75rem; font-family: var(--kho-display); font-size: var(--step-lead, clamp(1.5rem, 1.2rem + 1vw, 2.25rem)); color: var(--kho-groen); }

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

/* new in the plugin: a choice field (list), tick boxes (own fields and the privacy line), the spam trap, sending */
.kho select.kho-field {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A34' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.1rem;
	cursor: pointer;
}
.kho .kho-field:focus-visible { outline: 2px solid var(--kho-groen); outline-offset: 2px; }
.kho-tick {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	column-gap: .85rem;
	row-gap: .35rem;
	align-items: start;
	cursor: pointer;
}
.kho-tick input { position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; margin: 0; opacity: 0; cursor: pointer; }
.kho-tick__box {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--kho-check-box, var(--kho-groen));
	transition: background-color .2s ease;
}
.kho-tick__box::after {
	content: "";
	width: .45rem;
	height: .8rem;
	border: solid var(--kho-wit);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px) scale(.6);
	opacity: 0;
	transition: transform .26s cubic-bezier(.23, 1, .32, 1), opacity .26s ease;
}
.kho-tick:has(input:checked) .kho-tick__box { background: var(--kho-check-box, var(--kho-groen)); }
.kho-tick:has(input:checked) .kho-tick__box::after { transform: rotate(45deg) translate(-1px, -1px) scale(1); opacity: 1; }
.kho-tick:has(input:focus-visible) .kho-tick__box { outline: 2px solid var(--kho-groen); outline-offset: 3px; }
.kho-tick:has(input:user-invalid) .kho-tick__box,
.kho-tick:has(input[aria-invalid="true"]) .kho-tick__box { box-shadow: 0 0 0 2px var(--kho-error, #B3261E); }
.kho-tick__text { grid-column: 2; grid-row: 1; padding-top: .1rem; font-size: .95rem; line-height: 1.4; color: var(--kho-field-ink, var(--kho-inkt)); }
.kho .kho-tick__text a { color: var(--kho-label, var(--kho-groen)); text-decoration: underline; text-underline-offset: .15em; } /* .kho: beats Elementor's ".elementor a { text-decoration: none }" */
.kho-tick .kho-f__error { grid-column: 2; grid-row: 2; }
.kho-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kho-go .elementor-button[disabled] { opacity: .7; cursor: progress; }
.kho .kho-send-error {
	padding: .75rem 1rem;
	background: var(--kho-wit);
	color: var(--kho-error, #B3261E);
	font-size: .875rem;
	font-weight: 600;
}
.kho-send-error a { color: inherit; }

/* tablet: one column, the price box sticks to the bottom of the screen */
@media (max-width: 63.99em) {
	.kho-form { grid-template-columns: minmax(0, 1fr); }
	.kho-summary { grid-column: 1; grid-row: auto; position: sticky; top: auto; bottom: 0; z-index: 5; }
}

/* phone: extras and fields in one column; the price box only the total and the button */
@media (max-width: 47.99em) {
	.kho-checks, .kho-fields { grid-template-columns: 1fr; }
	.kho-summary { gap: .5rem; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
	.kho-summary__lines, .kho-summary__note { display: none; }
	.kho-summary__total { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.kho-check__box::after, .kho-tick__box, .kho-tick__box::after, .kho-stepbtn { transition: none; }
}