/* Order page and thank-you page of kwazi.eu (design: boards Bestel and Bedankt). */
.kh-order {
	--kh-ink: #090909;
	--kh-text: #2b2b2b;
	--kh-mute: #3d3d3d;
	--kh-line: #c9c9c9;
	--kh-field: #8a8a8a;
	--kh-mint: #f6ffee;
	--kh-peach: #f5d7c4;
	--kh-orange: #de7a37;
	max-width: 1228px;
	margin: 0 auto;
	/* kwazi.eu: the sticky header lies over the first section (170/130 on the other pages). */
	padding: 170px 24px 120px;
	color: var(--kh-ink);
	/* The font kwazi.eu already loads (Elementor kit); the page body itself has none. */
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.kh-order *,
.kh-order *::before,
.kh-order *::after { box-sizing: border-box; }
.kh-order a { color: inherit; text-underline-offset: 4px; }
.kh-order h1 { margin: 0; font-size: clamp(34px, 6vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -1px; }
.kh-order h2 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.3; }
.kh-order p { margin: 0; }
.kh-order-intro { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.kh-order-intro p { font-size: 18px; color: var(--kh-text); }
.kh-order-cols { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.kh-order-form { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.kh-order-aside { flex: 1 1 340px; display: flex; flex-direction: column; gap: 20px; }

.kh-order fieldset { margin: 0; border: 0; min-width: 0; background: #fff; border-radius: 28px; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 26px; }
.kh-order legend { float: left; width: 100%; padding: 0; font-size: 22px; font-weight: 800; }
.kh-order legend + * { clear: both; }
.kh-field { display: flex; flex-direction: column; gap: 8px; }
.kh-field > label,
.kh-group-label { font-weight: 700; }
.kh-help { font-size: 14px; color: var(--kh-mute); }
.kh-in, .kh-order button { font-family: inherit; }
.kh-in { width: 100%; padding: 14px 16px; border: 1px solid var(--kh-field); border-radius: 14px; background: #fff; color: var(--kh-ink); font: inherit; font-size: 16px; }
.kh-in:focus { outline: 3px solid var(--kh-orange); outline-offset: 1px; }
.kh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.kh-grid-address { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 18px; }
.kh-wide { grid-column: span 2; }
@media (max-width: 480px) { .kh-wide { grid-column: auto; } }

/* Choices as pills: real radio inputs, so the form works without script. */
.kh-order fieldset.kh-pills { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; background: none; border-radius: 0; }
.kh-order fieldset.kh-pills > legend { float: none; width: auto; margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.kh-pills-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kh-pills-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .kh-pills-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kh-pill { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 18px; border-radius: 16px; border: 2px solid var(--kh-line); background: #fff; cursor: pointer; }
.kh-pills-4 .kh-pill { align-items: center; padding: 14px 10px; font-weight: 700; }
.kh-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kh-pill small { font-size: 14px; }
.kh-pill:has(input:checked) { border-color: var(--kh-ink); }
.kh-pills-4 .kh-pill:has(input:checked) { background: var(--kh-peach); }
.kh-pill:has(input:focus-visible) { outline: 3px solid var(--kh-orange); outline-offset: 1px; }
.kh-pill[hidden] { display: none; }

.kh-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 16px; background: var(--kh-mint); cursor: pointer; }
.kh-switch-row > span { display: flex; flex-direction: column; }
.kh-switch-row small { font-size: 14px; color: var(--kh-mute); }
.kh-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0; border-radius: 9999px; background: var(--kh-field); cursor: pointer; }
.kh-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.kh-switch:checked { background: var(--kh-ink); }
.kh-switch:checked::after { left: 25px; }
.kh-switch:focus-visible { outline: 3px solid var(--kh-orange); outline-offset: 2px; }

.kh-order-end { display: flex; flex-direction: column; gap: 18px; padding: 0 8px; }
.kh-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.kh-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--kh-ink); flex: none; }
.kh-check a { font-weight: 700; }
.kh-muted { color: var(--kh-text); }
.kh-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.kh-submit small { font-size: 14px; color: var(--kh-mute); }
.kh-order .kh-button { display: inline-block; font: inherit; background: var(--kh-orange); color: var(--kh-ink); font-weight: 700; padding: 18px 34px; border-radius: 9999px; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.kh-order .kh-button:focus-visible { outline: 3px solid var(--kh-ink); outline-offset: 2px; }
.kh-error { color: #a1260f; font-weight: 600; font-size: 15px; }
.kh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Summary. */
.kh-summary { background: var(--kh-peach); border: 2px solid var(--kh-ink); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.kh-summary-head { display: flex; flex-direction: column; gap: 4px; }
.kh-summary-head strong { font-size: 19px; }
.kh-summary-head span { color: var(--kh-text); }
.kh-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kh-price b { font-size: 48px; font-weight: 800; line-height: 1; }
.kh-price s { color: var(--kh-mute); }
.kh-summary dl { margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(9, 9, 9, 0.25); padding-top: 18px; }
.kh-summary dl div { display: flex; justify-content: space-between; gap: 12px; }
.kh-summary dd { margin: 0; font-weight: 600; }
.kh-summary .kh-total { font-size: 19px; font-weight: 800; border-top: 1px solid rgba(9, 9, 9, 0.25); padding-top: 12px; }
.kh-summary .kh-total dd { font-weight: 800; }
.kh-summary p { font-size: 14px; color: var(--kh-text); }
.kh-talk { background: #fff; border-radius: 28px; padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.kh-talk span { color: var(--kh-text); }
.kh-talk a { font-weight: 700; white-space: nowrap; }

@media (max-width: 767px) { .kh-order { padding-top: 130px; } }
body:has(.kh-order) { background: #f6ffee; }

/* Thank-you page. */
.kh-done { max-width: 868px; }
.kh-done-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.kh-done-head p { font-size: 18px; color: var(--kh-text); max-width: 600px; }
.kh-done-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--kh-ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.kh-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.kh-steps li { background: #fff; border-radius: 28px; padding: 30px 32px; display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.kh-step-nr { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--kh-peach); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.kh-steps li > div { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; }
.kh-steps li > div > div { display: flex; flex-direction: column; gap: 4px; }
.kh-steps p { color: var(--kh-text); }
.kh-steps .kh-button { align-self: flex-start; padding: 16px 28px; }
.kh-done-foot { border-top: 1px solid rgba(9, 9, 9, 0.2); padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; color: var(--kh-text); font-size: 15px; }