/* Winti Kids – Anmeldeseite (Events Booking) und Schritt-Wizard */

/* ---------- Page ---------- */

.wk-register { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 6vw, 96px); }
.wk-register__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 3vw, 40px); }
.wk-site .wk-register__title { margin: 0; font: 800 clamp(40px, 6vw, 84px)/.92 var(--wk-font); font-stretch: 92%; letter-spacing: -.035em; color: var(--wk-ink); }
.wk-register__layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(28px, 4vw, 56px); }
.wk-register__main { flex: 3 1 560px; min-width: 0; }
.wk-register__aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }

.wk-summary { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.wk-summary > div { display: flex; justify-content: space-between; gap: 16px; font: 400 16px/1.35 var(--wk-font); }
.wk-summary > div[hidden] { display: none; }
.wk-summary dt { font-weight: 400; color: var(--wk-grey-1); }
.wk-summary dd { margin: 0; font-weight: 600; text-align: right; }
.wk-summary__costs { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--wk-line-mid); }
.wk-summary__costs[hidden], .wk-summary__costs > [hidden] { display: none; }
.wk-summary__costs > div { display: flex; justify-content: space-between; gap: 16px; font: 400 16px/1.35 var(--wk-font); }
.wk-summary__costs > div span:last-child { font-weight: 600; white-space: nowrap; }
.wk-summary__costs .wk-summary__total { padding-top: 6px; font: 800 19px/1.3 var(--wk-font); }
.wk-card--blue { background: var(--wk-blue); border-color: var(--wk-blue); color: #fff; }
.wk-site .wk-card--blue p { color: rgba(255, 255, 255, .88); font-size: 16px; }
.wk-card--blue .wk-btn--outline-light { padding: 12px 16px; }

/* The original EB container keeps its markup; its own heading is switched off. */
.wk-register .eb-container { margin: 0; padding: 0; }
.wk-register .eb-message { margin: 0 0 16px; }

/* ---------- Wizard ---------- */

.wk-progress { display: grid; grid-template-columns: repeat(var(--wk-steps), minmax(0, 1fr)); gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.wk-progress li { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wk-progress .wk-bar { height: 6px; background: var(--wk-line); }
.wk-progress .is-done .wk-bar { background: var(--wk-blue); }
.wk-progress .is-current .wk-bar { background: var(--wk-red); }
.wk-progress .wk-label { overflow: hidden; font: 600 13px/1.2 var(--wk-font); color: var(--wk-grey-1); text-overflow: ellipsis; white-space: nowrap; }
.wk-progress .is-current .wk-label { color: var(--wk-ink); }

.wk-step-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 22px 20px; align-items: start; padding: clamp(20px, 3vw, 40px); background: #fff; border: 1px solid var(--wk-line); }
.wk-step-panel[hidden] { display: none !important; }
/* Short fields share a row (design: auto-fit, min 240px); these always take the full width */
.wk-step-panel > .wk-step-head, .wk-step-panel > .wk-alert, .wk-step-panel > .wk-step-nav, .wk-step-panel > .eb-message,
.wk-step-panel > h3, .wk-step-panel > .form-actions, .wk-step-panel > .eb-terms-and-conditions-container,
.wk-step-panel > .payment_information, .wk-step-panel > .form-group:has(textarea),
.wk-step-panel > .form-group:has(.eb-checkboxes-container),
.wk-step-panel > .form-group:has(.eb-radio-container),
.wk-step-panel > .form-group:has(input[readonly]),
.wk-step-panel > .form-group:has(.wk-full), /* CSS class «wk-full» in the EB field editor */
.wk-step-panel > :not(.form-group):not(.control-group) { grid-column: 1 / -1; }
.wk-step-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.wk-site .wk-step-title { margin: 0; font: 800 clamp(26px, 2.6vw, 34px)/1.05 var(--wk-font); font-stretch: 92%; letter-spacing: 0; outline: none; }
.wk-step-hint { font: 500 15px/1.4 var(--wk-font); color: var(--wk-grey-1); }
.wk-hidden-heading { display: none !important; }

.wk-alert { padding: 14px 18px; border: 2px solid var(--wk-red); background: var(--wk-error-bg); color: var(--wk-error-dark); font: 600 16px/1.4 var(--wk-font); }
.wk-alert[hidden] { display: none; }

.wk-step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--wk-line-mid); }
.wk-step-nav [hidden] { display: none; }
.wk-step-nav .wk-btn--dark { margin-left: auto; }
.wk-step-nav.has-submit { border-top: 0; padding-top: 0; }

/* ---------- Events Booking form markup in the design ---------- */

.wk-wizard .form-group.form-row,
.wk-register #adminForm .form-group.form-row { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.wk-register #adminForm .form-group > [class*="col-md-"] { width: 100%; max-width: 100%; flex: none; padding: 0; }
.wk-register #adminForm .form-control-label label,
.wk-register #adminForm .col-form-label { margin: 0; padding: 0; font: 600 16px/1.3 var(--wk-font); color: var(--wk-ink); }
.wk-register #adminForm .star { color: var(--wk-red); }
.wk-register #adminForm .form-control,
.wk-register #adminForm .form-select,
.wk-register #adminForm select,
.wk-register #adminForm input[type="text"],
.wk-register #adminForm input[type="email"],
.wk-register #adminForm input[type="tel"],
.wk-register #adminForm input[type="number"],
.wk-register #adminForm input[type="date"] { width: 100%; max-width: 100%; min-height: 56px; }
.wk-register #adminForm textarea { width: 100%; min-height: 120px; }
.wk-register #adminForm h3.eb-heading { margin: 10px 0 0; font: 800 22px/1.15 var(--wk-font); font-stretch: 92%; color: var(--wk-ink); }

/* Radio and checkbox lists as large choice tiles */
/* Options: equal tiles of about 200px; groups with long labels (class set by the wizard script) stack full width */
.wk-register #adminForm .eb-radio-container,
.wk-register #adminForm .eb-checkboxes-container {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; margin: 0; padding: 0; border: 0;
}
.wk-register #adminForm .wk-options-stack { grid-template-columns: 1fr; }
.wk-register #adminForm .eb-radio-container > .row,
.wk-register #adminForm .eb-checkboxes-container > .row { margin: 0; }
.wk-register #adminForm .eb-radio-container label.radio,
.wk-register #adminForm .eb-checkboxes-container label.checkbox { height: 100%; }
.wk-register #adminForm .eb-radio-container .row > div,
.wk-register #adminForm .eb-checkboxes-container .row > div { width: 100%; max-width: 100%; padding: 0; }
.wk-register #adminForm label.radio,
.wk-register #adminForm label.checkbox {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px;
	background: #fff; border: 1px solid rgba(19, 25, 31, .25); cursor: pointer;
	font: 500 16px/1.3 var(--wk-font); color: var(--wk-ink);
}
.wk-register #adminForm label.radio:has(input:checked),
.wk-register #adminForm label.checkbox:has(input:checked) { background: var(--wk-blue-tint); border: 2px solid var(--wk-blue); padding: 11px 15px; }
.wk-register #adminForm label.radio input,
.wk-register #adminForm label.checkbox input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--wk-blue); }

/* Messages (EB field type «Message») as info boxes */
.wk-register #adminForm .control-group.eb-message { padding: 18px 20px; background: #eef2f5; color: var(--wk-ink); font: 400 16px/1.55 var(--wk-font); }
.wk-register #adminForm .control-group.eb-message p { margin: 0; font: inherit; color: inherit; }
.wk-register #adminForm .control-group.eb-message p + p { margin-top: 8px; }
.wk-register #adminForm .control-group.eb-message strong { font-weight: 700; }
.wk-register #adminForm .control-group.eb-message.wk-info-blue { background: var(--wk-blue); color: #fff; }
.wk-register #adminForm .eb-message.wk-info-blue a { color: #fff !important; }
.wk-register #adminForm .control-group.eb-message :is(span, font, strong, p)[style*="color"],
.wk-register #adminForm .control-group.eb-message font[color] { color: inherit !important; } /* design: no ad-hoc text colours */

/* Date fields (Joomla calendar): input with a square button */
.wk-register #adminForm .field-calendar .input-group { display: flex; flex-wrap: nowrap; max-width: 320px; }
.wk-register #adminForm .field-calendar .input-group .btn { width: 56px; min-height: 56px; padding: 0; border: 1px solid rgba(19, 25, 31, .3); border-left: 0; border-radius: 0; background: var(--wk-ink); color: #fff; }
.wk-register #adminForm .field-calendar .input-group .btn:hover { background: var(--wk-red); }
/* Own calendar icon (the icon font is not part of the site template) */
.wk-register #adminForm .field-calendar .input-group .btn > * { display: none; }
.wk-register #adminForm .field-calendar .input-group .btn {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 22px;
}

/* Terms, amounts and submit */
/* Terms: checkbox left, the sentence (incl. its link) flows as one text */
.wk-register #adminForm .eb-terms-and-conditions-container label.checkbox { display: block; position: relative; padding: 16px 16px 16px 50px; font-size: 17px; line-height: 1.45; }
.wk-register #adminForm .eb-terms-and-conditions-container label.checkbox input { position: absolute; left: 16px; top: 18px; }
.wk-register #adminForm .eb-terms-and-conditions-container label.checkbox a { color: var(--wk-blue); text-decoration: underline; text-underline-offset: 2px; }
.wk-register #adminForm #coupon_code { width: 100% !important; max-width: 320px; }
.wk-register #adminForm .form-actions { display: flex; justify-content: flex-end; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--wk-line-mid); background: none; }
.wk-register #adminForm #btn-submit,
.wk-register #adminForm .form-actions .btn-primary { padding: 16px 24px; border: 0; border-radius: 0; background: var(--wk-red); color: #fff; font: 700 17px/1 var(--wk-font); cursor: pointer; }
.wk-register #adminForm #btn-submit:hover { background: var(--wk-ink); }
/* Amounts (read-only, calculated by Events Booking) as a cost list: label left, «CHF 415.00» right */
.wk-register #adminForm .form-group.form-row:has(input[readonly]) {
	flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 10px 0; border-bottom: 1px solid var(--wk-line-mid);
}
.wk-register #adminForm .form-group:has(input[readonly]) > [class*="col-md-"] { width: auto; }
.wk-register #adminForm .form-group:has(input[readonly]) .form-control-label { font: 500 16px/1.3 var(--wk-font); color: var(--wk-grey-2); }
.wk-register #adminForm .form-group:has(input[readonly]) .input-group { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; width: auto; }
.wk-register #adminForm .form-group:has(input[readonly]) .input-group-text,
.wk-register #adminForm .form-group:has(input[readonly]) input[readonly] {
	min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
	font: 600 17px/1.3 var(--wk-font); color: var(--wk-ink); font-variant-numeric: tabular-nums;
}
.wk-register #adminForm .form-group:has(input[readonly]) input[readonly] { flex: 0 0 auto; field-sizing: content; width: 8ch; min-width: 0; text-align: right; outline: none; }
@supports (field-sizing: content) { .wk-register #adminForm .form-group:has(input[readonly]) input[readonly] { width: auto; } }
.wk-register #adminForm .form-group:has(#amount) { border-bottom: 2px solid var(--wk-ink); }
.wk-register #adminForm .form-group:has(#amount) :is(.form-control-label, .input-group-text, input[readonly]) { font-weight: 800; font-size: 19px; color: var(--wk-ink); }

/* Errors */
.wk-register .wk-invalid input:not([type="radio"]):not([type="checkbox"]),
.wk-register .wk-invalid select,
.wk-register .wk-invalid textarea,
.wk-register .wk-invalid label.radio,
.wk-register .wk-invalid label.checkbox { border: 2px solid var(--wk-red) !important; }
.wk-register .wk-invalid::after { content: attr(data-wk-error); display: block; font: 600 15px/1.3 var(--wk-font); color: var(--wk-error); }
.wk-register .wk-invalid.control-group::after { content: none; }
.wk-register .wk-hint { display: block; margin-top: 8px; font: 400 15px/1.45 var(--wk-font); color: var(--wk-grey-1); }
.wk-register .formError .formErrorContent { border: 0; border-radius: 0; box-shadow: none; background: var(--wk-red); font: 600 14px/1.3 var(--wk-font); }
.wk-register .formError .formErrorArrow { display: none; }

@media (max-width: 959.98px) {
	.wk-register__aside { position: static; }
}
@media (max-width: 599.98px) {
	.wk-progress .wk-label { font-size: 0; }
	.wk-progress .is-current .wk-label { font-size: 13px; overflow: visible; }
}

/* ---------- Thank-you page ---------- */

.wk-done { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 4vw, 48px); background: #fff; border: 1px solid var(--wk-line); }
.wk-done__tick { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--wk-blue); color: #fff; font: 800 28px/1 var(--wk-font); }
.wk-site .wk-done__title { margin: 0; font: 800 clamp(30px, 3.4vw, 44px)/1 var(--wk-font); font-stretch: 92%; letter-spacing: 0; color: var(--wk-ink); }
.wk-site .wk-done__lead { margin: 0; max-width: 38em; font: 400 18px/1.6 var(--wk-font); color: var(--wk-grey-2); }
.wk-done__actions { padding-top: 24px; border-top: 1px solid var(--wk-line-mid); }

/* The confirmation text from Events Booking (with [REGISTRATION_DETAIL]) */
.wk-done__message { display: flex; flex-direction: column; gap: 12px; }
.wk-site .wk-done__message p { margin: 0; max-width: 38em; font: 400 17px/1.6 var(--wk-font); color: var(--wk-grey-2); }
.wk-site .wk-done__message p:has(> form) { max-width: none; }
.wk-site .wk-done__message p strong { color: var(--wk-ink); }

/* Details: label/value tiles in a grid, grouped by the form's headings.
 * The details come as <form id="adminForm">, so these rules need the same weight as the registration form rules. */
.wk-register .wk-done__message :is(#adminForm, form) {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	margin: 8px 0; border-top: 1px solid var(--wk-line); border-left: 1px solid var(--wk-line);
}
.wk-register .wk-done__message :is(#adminForm, form) > .form-group.form-row {
	display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 16px; background: #fff;
	border-right: 1px solid var(--wk-line); border-bottom: 1px solid var(--wk-line);
}
.wk-register .wk-done__message :is(#adminForm, form) > .form-group > * { width: auto; max-width: none; flex: none; padding: 0; }
.wk-register .wk-done__message :is(#adminForm, form) .form-control-label { font: 600 12px/1.3 var(--wk-font); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-grey-1); }
.wk-register .wk-done__message :is(#adminForm, form) .eb-form-control { font: 600 17px/1.4 var(--wk-font); color: var(--wk-ink); overflow-wrap: break-word; }
.wk-register .wk-done__message :is(#adminForm, form) > h3.eb-heading {
	grid-column: 1 / -1; margin: 0; padding: 18px 16px 8px; background: var(--wk-paper);
	border-right: 1px solid var(--wk-line); border-bottom: 1px solid var(--wk-line);
	font: 800 20px/1.15 var(--wk-font); font-stretch: 92%; color: var(--wk-ink);
}
/* Event data is in the sidebar; info texts belong to the form, not the confirmation */
.wk-register .wk-done__message :is(#adminForm, form) > .form-group:not(.eb-field-value),
.wk-register .wk-done__message :is(#adminForm, form) > .control-group.eb-message,
.wk-register .wk-done__message :is(#adminForm, form) > h3.eb-heading + h3.eb-heading { display: none; }

/* Links inside editorial texts: underlined (WCAG 1.4.1) and in the design colour regardless of pasted inline colours */
.wk-register .eb-message a { color: var(--wk-blue) !important; text-decoration: underline; text-underline-offset: 2px; }
.wk-register .eb-message a * { color: inherit !important; }
.wk-register .eb-message a:hover { color: var(--wk-red) !important; }