/*
 * KA checkout (Figma "Prototype 3": KA_Checkout frames). Desktop from the 1920 px frames; tablet and
 * phone layouts and the states the design leaves open (focus, errors, loading, empty) in the same style.
 * Fonts (Juana, Inter) come from the theme. Everything is scoped under .ka-checkout.
 */

.ka-checkout {
	--ka-bg: #fbf9f6;
	--ka-fill: #f3efe8;
	--ka-border: #e6e0d6;
	--ka-border-light: #eee9e3;
	--ka-divider: #eceae1;
	--ka-muted: #5f584e;
	--ka-muted-yellow: #fbf1d9;
	--ka-yellow: #f2e3a2;
	--ka-yellow-light: #f4eab2;
	--ka-yellow-border: #ebe0a4;
	--ka-brown: #5c430a;
	--ka-success: #e7f0e4;
	--ka-success-text: #3c5f31;
	--ka-cancel: #9a2b1f;
	--ka-text: #1f1f1f;
	--ka-black: #000;
	--ka-white: #fff;
	--ka-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	--ka-radius: 10px;
	--ka-field-radius: 8px;
	--ka-serif: "Juana", Georgia, serif;
	--ka-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ka-gutter: 28px;
	--ka-card-pad: 25px;

	background: var(--ka-bg);
	border-top: 1px solid var(--ka-border);
	color: var(--ka-black);
	font: 400 14px/1.5 var(--ka-sans);
	margin-top: var(--header-height, 230px);
	padding: 60px 0 120px;
}

/* The theme uppercases headings and spaces sections apart; the checkout does neither. */
.ka-checkout h1,
.ka-checkout h2,
.ka-checkout h3 {
	letter-spacing: 0;
	text-transform: none;
}

.ka-checkout section,
.ka-checkout section.ka-card {
	margin: 0 !important;
}

.ka-checkout *,
.ka-checkout *::before,
.ka-checkout *::after {
	box-sizing: border-box;
}

.ka-checkout [hidden] {
	display: none !important;
}

.ka-checkout__inner {
	margin: 0 auto;
	max-width: calc(1560px + 2 * 30px);
	padding: 0 30px;
}

.ka-checkout__title {
	font: 400 60px/1.2 var(--ka-serif);
	letter-spacing: 0;
	margin: 0 0 50px;
	text-transform: none;
}

.ka-checkout__form {
	align-items: start;
	display: grid;
	gap: var(--ka-gutter);
	grid-template-columns: minmax(0, 900px) minmax(0, 632px);
}

.ka-checkout__main {
	counter-reset: ka-step;
	display: grid;
	gap: 31px;
	min-width: 0;
}

.ka-checkout__aside {
	min-width: 0;
	position: sticky;
	top: 24px;
}

/* ---- Cards and steps ---- */

.ka-card {
	background: var(--ka-white);
	border: 1px solid var(--ka-border-light);
	border-radius: var(--ka-radius);
	box-shadow: var(--ka-shadow);
	margin: 0;
	padding: 30px var(--ka-card-pad) 34px;
}

.ka-step__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 38px;
	margin-bottom: 22px;
}

.ka-step__title,
.ka-summary__title {
	font: 400 30px/45px var(--ka-serif);
	margin: 0 0 22px;
}

.ka-step__head .ka-step__title {
	margin: 0;
}

.ka-step__title::before {
	content: counter(ka-step) ". ";
	counter-increment: ka-step;
}

.ka-step__title--plain::before,
.ka-thanks .ka-step__title::before {
	content: none;
}

.ka-step__intro {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 44px;
	max-width: 720px;
}

.ka-flag {
	background: var(--ka-yellow);
	font: 600 16px/1 var(--ka-sans);
	padding: 9px 22px;
}

/* ---- Fields ---- */

.ka-fields {
	display: grid;
	gap: 18px;
}

.ka-fields__row {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
}

.ka-fields__row--postcode {
	grid-template-columns: 225px 1fr;
}

.ka-checkout .form-row {
	margin: 0;
	padding: 0;
	position: relative;
}

.ka-checkout .form-row > label,
.ka-checkout .ka-group__legend {
	display: block;
	font: 600 14px/1.25 var(--ka-sans);
	margin: 0 0 7px;
	padding: 0;
}

.ka-checkout .form-row .required,
.ka-checkout .form-row .optional {
	display: none;
}

.ka-checkout .input-text,
.ka-checkout input[type="text"],
.ka-checkout input[type="email"],
.ka-checkout input[type="tel"],
.ka-checkout input[type="date"],
.ka-checkout textarea {
	-webkit-appearance: none;
	appearance: none;
	background: var(--ka-white);
	border: 0.5px solid var(--ka-muted);
	border-radius: var(--ka-field-radius);
	box-shadow: none;
	color: var(--ka-black);
	display: block;
	font: 400 14px/1.3 var(--ka-sans);
	height: 45px;
	margin: 0;
	padding: 0 15px;
	width: 100%;
}

.ka-checkout textarea {
	height: auto;
	min-height: 93px;
	padding: 13px 15px;
	resize: vertical;
}

.ka-checkout ::placeholder {
	color: var(--ka-muted);
	opacity: 1;
}

.ka-checkout .woocommerce-input-wrapper {
	display: block;
}

.ka-checkout .form-row .description {
	color: var(--ka-muted);
	display: block !important; /* WooCommerce's script shows descriptions on focus only; the design always does. */
	height: auto !important;
	font-size: 12px;
	margin-top: 7px;
}

.ka-hint {
	color: var(--ka-muted);
	font-weight: 400;
	margin-left: 8px;
}

.ka-hint--warn {
	color: var(--ka-cancel);
	display: block;
	margin: 12px 0 0;
}

/* Focus and errors (not in the design). */
.ka-checkout :focus-visible {
	outline: 2px solid var(--ka-black);
	outline-offset: 2px;
}

.ka-checkout .input-text:focus,
.ka-checkout textarea:focus {
	border-color: var(--ka-black);
	box-shadow: 0 0 0 1px var(--ka-black);
	outline: none;
}

.ka-checkout .woocommerce-invalid .input-text,
.ka-checkout .woocommerce-invalid textarea,
.ka-checkout .woocommerce-invalid .ka-check__box {
	border-color: var(--ka-cancel);
	box-shadow: 0 0 0 1px var(--ka-cancel);
}

.ka-checkout .checkout-inline-error-message {
	color: var(--ka-cancel);
	font-size: 12px;
	margin: 6px 0 0;
}

/* ---- Toggles ("Jeg kjøper som bedrift", "Jeg deltar selv"), checkboxes, radios ---- */

.ka-toggles {
	display: grid;
	gap: 22px;
	margin-top: 26px;
}

.ka-toggle,
.ka-check {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 10px;
	position: relative;
	user-select: none;
}

.ka-checkout .ka-toggle input,
.ka-checkout .ka-check input,
.ka-checkout .ka-option input,
.ka-checkout .ka-chip input,
.ka-checkout .ka-visually-hidden {
	-webkit-appearance: none;
	appearance: none;
	border: 0 !important;
	box-shadow: none !important;
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.ka-checkout .ka-toggle input::before,
.ka-checkout .ka-check input::before,
.ka-checkout .ka-option input::before,
.ka-checkout .ka-chip input::before {
	display: none !important;
}

.ka-toggle__dot,
.ka-radio {
	background: var(--ka-white);
	border: 1px solid var(--ka-muted);
	border-radius: 50%;
	flex: 0 0 20px;
	height: 20px;
	width: 20px;
}

.ka-toggle input:checked + .ka-toggle__dot,
.ka-option input:checked + .ka-radio,
.ka-option input:checked ~ label .ka-radio {
	background: var(--ka-black);
	border-color: var(--ka-black);
	box-shadow: inset 0 0 0 4px var(--ka-white);
}

.ka-toggle input:focus-visible + .ka-toggle__dot,
.ka-option input:focus-visible + .ka-radio,
.ka-option input:focus-visible ~ label .ka-radio,
.ka-check input:focus-visible + .ka-check__box,
.ka-chip input:focus-visible + .ka-chip__label {
	outline: 2px solid var(--ka-black);
	outline-offset: 2px;
}

.ka-toggle__label {
	font-size: 14px;
}

.ka-check,
.ka-checkout .form-row > label.ka-check {
	align-items: flex-start;
	display: inline-flex;
	font: 400 14px/1.5 var(--ka-sans);
	margin: 0;
}

.ka-check__box {
	background: var(--ka-white);
	border: 1px solid var(--ka-muted);
	flex: 0 0 20px;
	height: 20px;
	width: 20px;
}

.ka-check input:checked + .ka-check__box {
	background: var(--ka-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5 4.3 8 11 1' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center no-repeat;
	border-color: var(--ka-black);
}

.ka-check__text {
	color: var(--ka-muted);
	font-size: 13px;
	line-height: 1.5;
	padding-top: 1px;
}

.ka-check__text a {
	color: inherit;
	text-decoration: underline;
}

/* ---- Sub cards: Fakturainformasjon, Kjøpe som gave? ---- */

.ka-subcard {
	background: var(--ka-white);
	border: 1px solid var(--ka-border-light);
	border-radius: var(--ka-radius);
	padding: 24px;
}

.ka-subcard__title {
	font: 600 14px/1.25 var(--ka-sans);
	margin: 0 0 17px;
}

.ka-subcard .ka-fields__row + .ka-fields__row {
	margin-top: 22px;
}

.ka-gift {
	box-shadow: var(--ka-shadow);
	padding: 0;
}

.ka-gift__head {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 15px;
	padding: 13px 18px 13px 14px;
}

.ka-gift__icon {
	align-items: center;
	background: var(--ka-fill);
	border: 1px solid var(--ka-border);
	border-radius: 4px;
	display: inline-flex;
	flex: 0 0 38px;
	height: 38px;
	justify-content: center;
}

.ka-gift__text {
	display: grid;
	flex: 1;
	gap: 1px;
}

.ka-gift__title {
	font-weight: 500;
}

.ka-gift__sub {
	color: var(--ka-muted);
	font-size: 12px;
}

.ka-gift__body {
	display: grid;
	gap: 18px;
	padding: 4px 14px 18px;
}

.ka-gift__body #ka_gift_date_field {
	max-width: calc(50% - 10px);
}

.ka-gift.is-open .ka-chevron,
.ka-person.is-open .ka-person__head .ka-chevron,
.ka-disclosure[open] > summary .ka-chevron {
	transform: rotate(180deg);
}

.ka-gift__head input:focus-visible ~ .ka-gift__icon {
	outline: 2px solid var(--ka-black);
	outline-offset: 2px;
}

.ka-chevron {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center no-repeat;
	flex: 0 0 12px;
	height: 7px;
	transition: transform 0.2s;
	width: 12px;
}

.ka-note {
	align-items: flex-start;
	border-radius: var(--ka-field-radius);
	display: flex;
	font-size: 12px;
	gap: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 16px 18px;
}

.ka-note--yellow {
	background: var(--ka-muted-yellow);
	color: var(--ka-muted);
}

.ka-note--error {
	background: var(--ka-white);
	border: 1px solid var(--ka-cancel);
	color: var(--ka-cancel);
	font-size: 14px;
	margin: 0 0 18px;
}

.ka-note__icon {
	align-items: center;
	border: 1px solid var(--ka-muted);
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 17px;
	font: 600 10px/1 var(--ka-sans);
	height: 17px;
	justify-content: center;
}

.ka-notice {
	margin: 0 0 12px;
}

.ka-notice--info {
	background: var(--ka-muted-yellow);
	border-radius: var(--ka-field-radius);
	color: var(--ka-brown);
	font-size: 13px;
	padding: 12px 14px;
}

/* ---- Option cards (fill mode, drink packages, books, delivery, payment) ---- */

.ka-options {
	display: grid;
	gap: 20px;
}

.ka-options--fill {
	grid-template-columns: repeat(2, minmax(0, 257px));
	margin-bottom: 36px;
}

.ka-options--cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ka-options--stack {
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ka-checkout .ka-option {
	background: var(--ka-white);
	border: 0.5px solid var(--ka-muted);
	border-radius: var(--ka-field-radius);
	cursor: pointer;
	display: grid;
	gap: 4px 10px;
	grid-template-columns: 20px 1fr;
	padding: 12px 10px;
	position: relative;
}

.ka-option:has(input:checked) {
	background: var(--ka-bg);
}

.ka-option .ka-radio {
	grid-row: 1;
}

.ka-option__title {
	align-self: center;
	font-weight: 600;
	grid-column: 2;
}

.ka-option__text {
	color: var(--ka-muted);
	grid-column: 1 / -1;
	line-height: 20px;
}

.ka-option__price {
	font-weight: 600;
	grid-column: 1 / -1;
	margin-top: auto;
	padding-top: 6px;
}

.ka-checkout .ka-option--card {
	align-content: start;
	min-height: 118px;
}

.ka-checkout .ka-option--row,
.ka-payment .ka-option--pay label {
	align-items: center;
	grid-template-columns: 20px 1fr auto;
	min-height: 57px;
	padding: 0 20px;
}

.ka-option--row .ka-option__price,
.ka-option__aside {
	color: var(--ka-black);
	grid-column: 3;
	grid-row: 1;
	margin: 0;
	padding: 0;
	text-align: right;
}

.ka-option__aside {
	color: var(--ka-muted);
	font-weight: 400;
}

/* Payment: WooCommerce's radio sits before the label. */
.ka-checkout .ka-payment .ka-option--pay {
	display: block;
	padding: 0;
}

.ka-payment .ka-option--pay label {
	cursor: pointer;
	display: grid;
	gap: 10px;
	margin: 0;
}

.ka-payment .ka-option--pay label img {
	display: none;
}

.ka-payment .payment_box {
	border-top: 0.5px solid var(--ka-border);
	color: var(--ka-muted);
	font-size: 13px;
	padding: 14px 20px;
}

.ka-payment__note {
	color: var(--ka-muted);
	margin: 28px 0 0;
}

/* ---- Participants ---- */

.ka-progress {
	background: var(--ka-border);
	height: 5px;
	margin: 0 0 24px;
	overflow: hidden;
}

.ka-progress__bar {
	background: var(--ka-black);
	display: block;
	height: 100%;
	transition: width 0.3s;
}

.ka-participants[data-fill="later"] .ka-progress {
	display: none;
}

.ka-progress + .ka-course {
	border-top: 0;
}

.ka-course {
	border-top: 0.5px solid var(--ka-border);
	margin: 0 -25px;
	padding: 30px 25px 0;
}

.ka-course + .ka-course {
	margin-top: 34px;
}

.ka-course__head {
	align-items: center;
	display: grid;
	gap: 0 25px;
	grid-template-columns: 115px 1fr auto;
	margin-bottom: 25px;
}

.ka-course__image {
	aspect-ratio: 115 / 77;
	background: var(--ka-fill);
	border-radius: var(--ka-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 115px;
}

.ka-course__title {
	font: 400 24px/1.5 var(--ka-serif);
	margin: 0;
}

.ka-course__meta {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.ka-course__meta strong {
	font-weight: 600;
}

.ka-course__time {
	margin-left: 6px;
}

.ka-sep {
	margin: 0 4px;
}

.ka-pill {
	background: var(--ka-fill);
	border: 0.5px solid var(--ka-border);
	border-radius: 20px;
	color: var(--ka-brown);
	font: 600 13px/1 var(--ka-sans);
	padding: 7px 16px;
	white-space: nowrap;
}

.ka-pill--done {
	background: var(--ka-success);
	color: var(--ka-success-text);
}

.ka-pill--later {
	color: var(--ka-muted);
	display: none;
}

.ka-participants[data-fill="later"] .ka-js-progress {
	display: none;
}

.ka-participants[data-fill="later"] .ka-pill--later {
	display: inline-block;
}

.ka-people {
	display: grid;
	gap: 25px;
}

.ka-person {
	background: var(--ka-bg);
	border: 0.5px solid var(--ka-muted);
	border-radius: var(--ka-field-radius);
}

.ka-person.is-open {
	background: var(--ka-white);
	border-width: 1px;
}

.ka-person__head {
	align-items: center;
	background: var(--ka-bg);
	border: 0;
	border-radius: var(--ka-field-radius);
	color: inherit;
	cursor: pointer;
	display: grid;
	font: inherit;
	gap: 0 20px;
	grid-template-columns: 49px 1fr auto 12px;
	min-height: 89px;
	padding: 18px 20px;
	text-align: left;
	width: 100%;
}

.ka-person.is-open .ka-person__head {
	border-radius: var(--ka-field-radius) var(--ka-field-radius) 0 0;
}

.ka-avatar {
	align-items: center;
	background: var(--ka-yellow);
	border: 0.5px solid var(--ka-divider);
	border-radius: 50%;
	display: inline-flex;
	font: 600 13px/1 var(--ka-sans);
	height: 49px;
	justify-content: center;
	width: 49px;
}

.ka-avatar--empty {
	background: var(--ka-bg);
	border: 1px dashed var(--ka-muted);
}

.ka-person__who {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ka-person__name {
	font: 600 16px/1.25 var(--ka-sans);
}

.ka-person__summary,
.ka-person__later {
	color: var(--ka-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ka-person__later,
.ka-badge {
	display: none;
}

.ka-badge {
	border-radius: 20px;
	font: 500 12px/1.3 var(--ka-sans);
	padding: 3px 17px;
	white-space: nowrap;
}

.ka-badge--done {
	background: var(--ka-success);
	color: var(--ka-success-text);
}

.ka-badge--todo {
	background: var(--ka-muted-yellow);
	color: var(--ka-brown);
}

.ka-badge--later {
	background: var(--ka-fill);
	color: var(--ka-muted);
}

.ka-person.is-complete .ka-badge--done,
.ka-person:not(.is-complete) .ka-badge--todo {
	display: inline-block;
}

.ka-person__body {
	display: none;
	gap: 26px;
	padding: 20px 20px 28px;
}

.ka-person.is-open .ka-person__body {
	display: grid;
}

/* "Fyll ut senere": rows only, nothing to open. */
.ka-participants[data-fill="later"] .ka-person {
	background: var(--ka-bg);
	border-width: 0.5px;
}

.ka-participants[data-fill="later"] .ka-person__body,
.ka-participants[data-fill="later"] .ka-person__summary,
.ka-participants[data-fill="later"] .ka-badge--done,
.ka-participants[data-fill="later"] .ka-badge--todo {
	display: none !important;
}

.ka-participants[data-fill="later"] .ka-person__later,
.ka-participants[data-fill="later"] .ka-badge--later {
	display: inline-block;
}

.ka-participants[data-fill="later"] .ka-person__head {
	cursor: default;
}

.ka-participants[data-fill="later"] .ka-person__head .ka-chevron {
	opacity: 0.35;
	transform: none;
}

.ka-group {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.ka-group__legend {
	margin-bottom: 12px !important;
}

.ka-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ka-chip {
	cursor: pointer;
	position: relative;
}

.ka-chip__label {
	align-items: center;
	background: var(--ka-white);
	border: 0.5px solid var(--ka-muted);
	border-radius: var(--ka-field-radius);
	display: inline-flex;
	gap: 6px;
	height: 39px;
	padding: 0 14px;
}

.ka-chip input:checked + .ka-chip__label {
	background: var(--ka-yellow-light);
	border: 1px solid var(--ka-black);
}

.ka-chip input:checked + .ka-chip__label::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M1 4 4 7l6-6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center no-repeat;
	content: "";
	height: 8px;
	width: 11px;
}

.ka-allergies__other,
.ka-allergies__consent {
	margin-top: 16px !important;
	max-width: 560px;
}

.ka-person__actions {
	align-items: center;
	display: flex;
	gap: 38px;
}

/* ---- Buttons and links ---- */

.ka-btn {
	align-items: center;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	font: 600 14px/1.5 var(--ka-sans);
	justify-content: center;
	min-height: 37px;
	padding: 8px 30px;
	text-decoration: none;
}

.ka-btn--black {
	background: var(--ka-black);
	color: var(--ka-white);
	min-width: 112px;
}

.ka-btn--black:hover {
	background: #333;
	color: var(--ka-white);
}

.ka-btn--yellow {
	background: var(--ka-yellow);
	border-radius: 0;
	color: var(--ka-black);
	min-height: 48px;
}

.ka-btn--yellow:hover {
	background: var(--ka-yellow-border);
}

.ka-btn--outline {
	background: var(--ka-white);
	border: 1px solid var(--ka-black);
	border-radius: var(--ka-field-radius);
	color: var(--ka-black);
	font-size: 13px;
	min-height: 45px;
	padding: 0 24px;
}

.ka-btn--block {
	width: 100%;
}

.ka-btn:disabled,
.ka-checkout .processing #place_order {
	cursor: wait;
	opacity: 0.55;
}

.ka-link {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: 400 14px/1.5 var(--ka-sans);
	padding: 0;
	text-decoration: underline;
}

.ka-link--cancel {
	color: var(--ka-cancel);
}

/* ---- Delivery ---- */

.ka-delivery .ka-options--stack {
	margin-bottom: 0;
}

.ka-address {
	margin-top: 22px;
}

/* ---- Summary ("Din bestilling") ---- */

.ka-summary {
	background: rgba(243, 239, 232, 0.4);
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius);
	box-shadow: var(--ka-shadow);
	padding: 30px var(--ka-card-pad) 32px;
}

.ka-checkout__aside .ka-summary {
	background-color: #f8f6f2;
}

.ka-lines {
	display: grid;
	gap: 28px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.ka-line {
	align-items: center;
	display: grid;
	gap: 6px 24px;
	grid-template-columns: 115px 1fr auto;
}

.ka-line--noimage {
	grid-template-columns: 1fr auto;
}

.ka-line__image {
	aspect-ratio: 115 / 77;
	background: var(--ka-fill);
	border-radius: var(--ka-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 115px;
}

.ka-line__text {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.ka-line__title,
.ka-line__total {
	font-weight: 600;
}

.ka-line__sub {
	color: var(--ka-muted);
}

.ka-line__total {
	text-align: right;
	white-space: nowrap;
}

.ka-line__child {
	align-items: baseline;
	color: var(--ka-muted);
	display: flex;
	font-size: 12px;
	grid-column: 2 / -1;
	justify-content: space-between;
}

.ka-line--noimage .ka-line__child {
	grid-column: 1 / -1;
}

.ka-line__child strong {
	color: var(--ka-black);
	font-weight: 600;
}

.ka-line--problem .ka-line__title {
	color: var(--ka-cancel);
}

.ka-codes {
	border-bottom: 0.5px solid var(--ka-border);
	border-top: 0.5px solid var(--ka-border);
	display: grid;
	gap: 14px;
	padding: 20px 0 22px;
}

.ka-disclosure > summary {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	gap: 17px;
	list-style: none;
}

.ka-disclosure > summary::-webkit-details-marker {
	display: none;
}

.ka-disclosure > summary .ka-chevron {
	margin-left: -2px;
}

.ka-code-form {
	align-items: end;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr auto;
	padding: 20px 0 6px;
}

.ka-code-form .input-text {
	background: var(--ka-white);
}

.ka-totals {
	display: grid;
	gap: 11px;
	margin: 25px 0 0;
}

.ka-totals__row {
	color: var(--ka-muted);
	display: flex;
	justify-content: space-between;
}

.ka-totals__row dt,
.ka-totals__row dd {
	margin: 0;
}

.ka-totals__row--discount dt a {
	font-size: 12px;
	margin-left: 8px;
}

.ka-totals__row--total {
	align-items: baseline;
	border-top: 0.5px solid var(--ka-muted);
	color: var(--ka-black);
	margin-top: 26px;
	padding-top: 24px;
}

.ka-totals__row--total dt {
	font: 600 18px/1.2 var(--ka-sans);
}

.ka-totals__row--total dd {
	font: 600 22px/1.2 var(--ka-sans);
	text-align: right;
}

.ka-totals__row--total small {
	display: block;
	font: 400 12px/1.4 var(--ka-sans);
	margin-top: 2px;
}

.ka-summary__consent {
	display: grid;
	gap: 14px;
	margin: 38px 0 30px;
}

.ka-summary__secure {
	align-items: center;
	display: flex;
	font: 500 10px/1.2 var(--ka-sans);
	justify-content: space-between;
	margin-top: 14px;
}

.ka-checkout-unavailable:empty {
	display: none;
}

.ka-checkout-unavailable {
	margin-top: 20px;
}

/* ---- WooCommerce notices and loading (not in the design) ---- */

.ka-checkout .woocommerce-NoticeGroup,
.ka-checkout .woocommerce-notices-wrapper:not(:empty) {
	grid-column: 1 / -1;
}

.ka-checkout .woocommerce-error,
.ka-checkout .woocommerce-message,
.ka-checkout .woocommerce-info {
	background: var(--ka-white);
	border: 1px solid var(--ka-cancel);
	border-radius: var(--ka-radius);
	color: var(--ka-cancel);
	list-style: none;
	margin: 0 0 24px;
	padding: 16px 20px;
}

.ka-checkout .woocommerce-message,
.ka-checkout .woocommerce-info {
	background: var(--ka-muted-yellow);
	border-color: var(--ka-yellow-border);
	color: var(--ka-brown);
}

.ka-checkout .woocommerce-error li {
	margin: 0;
	padding: 2px 0;
}

.ka-checkout .woocommerce-error a {
	color: inherit;
}

.ka-checkout .blockUI.blockOverlay {
	border-radius: var(--ka-radius);
	position: relative;
}

.ka-checkout .blockUI.blockOverlay::after {
	animation: ka-spin 0.8s linear infinite;
	border: 2px solid var(--ka-border);
	border-radius: 50%;
	border-top-color: var(--ka-black);
	content: "";
	height: 22px;
	left: 50%;
	margin: -11px 0 0 -11px;
	position: absolute;
	top: 50%;
	width: 22px;
}

@keyframes ka-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ka-checkout .blockUI.blockOverlay::after {
		animation: none;
	}

	.ka-chevron {
		transition: none;
	}
}

/* ---- Empty cart, order received ---- */

.ka-empty {
	max-width: 900px;
}

.ka-empty__title {
	font: 400 30px/45px var(--ka-serif);
	margin: 0 0 12px;
}

.ka-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 28px 0 0;
}

.ka-thanks .ka-card p {
	font-size: 16px;
	margin: 0 0 14px;
}

.ka-thanks__meta {
	color: var(--ka-muted);
	font-size: 14px !important;
}

.ka-thanks__courses {
	display: grid;
	gap: 16px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.ka-thanks__courses li {
	align-items: center;
	border-bottom: 0.5px solid var(--ka-border);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding-bottom: 16px;
}

.ka-thanks__course {
	display: grid;
	gap: 4px;
}

.ka-thanks__course strong {
	font: 400 22px/1.4 var(--ka-serif);
}

.ka-thanks__payment {
	color: var(--ka-muted);
	margin: 20px 0 0;
}

/* ---- Tablet ---- */

@media (max-width: 1279px) {
	.ka-checkout__form {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
	}

	.ka-line:not(.ka-line--noimage) {
		grid-template-columns: 72px 1fr auto;
		gap: 6px 14px;
	}

	.ka-line__image {
		width: 72px;
	}
}

@media (max-width: 991px) {
	.ka-checkout {
		padding: 36px 0 80px;
	}

	.ka-checkout__title {
		font-size: 44px;
		margin-bottom: 30px;
	}

	.ka-checkout__form {
		grid-template-columns: minmax(0, 1fr);
	}

	.ka-checkout__aside {
		position: static;
	}
}

/* ---- Phone ---- */

@media (max-width: 640px) {
	.ka-checkout {
		--ka-card-pad: 16px;
		--ka-gutter: 20px;
		padding: 24px 0 56px;
	}

	.ka-checkout__inner {
		padding: 0 16px;
	}

	.ka-checkout__title {
		font-size: 36px;
		margin-bottom: 20px;
	}

	.ka-checkout__main {
		gap: 20px;
	}

	.ka-card {
		padding: 22px var(--ka-card-pad) 24px;
	}

	.ka-step__title,
	.ka-summary__title {
		font-size: 26px;
		line-height: 36px;
		margin-bottom: 16px;
	}

	.ka-step__head {
		gap: 10px;
		margin-bottom: 16px;
	}

	.ka-flag {
		font-size: 14px;
		padding: 7px 14px;
	}

	.ka-step__intro {
		font-size: 15px;
		margin-bottom: 24px;
	}

	.ka-fields__row,
	.ka-fields__row--postcode,
	.ka-options--fill,
	.ka-options--cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.ka-fields__row {
		gap: 18px;
	}

	.ka-subcard {
		padding: 16px;
	}

	.ka-gift {
		padding: 0;
	}

	.ka-gift__head {
		padding: 12px;
	}

	.ka-gift__body {
		padding: 4px 12px 16px;
	}

	.ka-gift__body #ka_gift_date_field {
		max-width: none;
	}

	.ka-options--fill {
		margin-bottom: 24px;
	}

	.ka-checkout .ka-option--card {
		min-height: 0;
	}

	.ka-course {
		margin: 0 -16px;
		padding: 22px 16px 0;
	}

	.ka-course__head {
		gap: 4px 14px;
		grid-template-columns: 72px 1fr;
		margin-bottom: 18px;
	}

	.ka-course__image {
		width: 72px;
	}

	.ka-course__title {
		font-size: 20px;
		line-height: 1.3;
	}

	.ka-course__meta {
		font-size: 14px;
	}

	.ka-course__head .ka-pill {
		grid-column: 2;
		justify-self: start;
		margin-top: 6px;
	}

	.ka-people {
		gap: 14px;
	}

	.ka-person__head {
		gap: 0 12px;
		grid-template-columns: 40px 1fr 12px;
		min-height: 72px;
		padding: 14px;
	}

	.ka-avatar {
		height: 40px;
		width: 40px;
	}

	.ka-person__head .ka-badge {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin-top: 6px;
	}

	.ka-person__head .ka-chevron {
		grid-column: 3;
		grid-row: 1;
	}

	.ka-person__body {
		gap: 22px;
		padding: 16px 14px 22px;
	}

	.ka-hint {
		display: block;
		margin: 4px 0 0;
	}

	.ka-option--row,
	.ka-payment .ka-option--pay label {
		padding: 12px 14px;
	}

	.ka-payment .ka-option--pay label {
		grid-template-columns: 20px 1fr;
	}

	.ka-option__aside {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
	}

	.ka-line:not(.ka-line--noimage) {
		grid-template-columns: 64px 1fr auto;
	}

	.ka-line__image {
		width: 64px;
	}

	.ka-code-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.ka-summary__secure {
		flex-wrap: wrap;
		gap: 8px;
	}

	.ka-thanks__courses li {
		align-items: flex-start;
		flex-direction: column;
	}
}