/**
 * Frontend field chrome — the single definition of how every field looks.
 *
 * SIZES (height, radius, font, padding, border width, compact qty, caret) come from the design
 * standard: --bk-ui-* tokens emitted on :root by includes/styling/design-standard.php (Styling → Advanced).
 * Nothing in this file sets a size from a module; modules only choose COLORS below.
 *
 * COLORS: --bk-field-bg / --bk-field-text / --bk-field-border-color (+ --bk-field-focus-border,
 * --bk-field-option-hover-bg) are set per surface in the "Colors per surface" section.
 *
 * Covers: text/number/date/time inputs, textareas, native selects, custom selects (.bs-frontend-select),
 * search-bar date buttons, rental catalog filter, archive toolbars and the compact qty input.
 * Fields do not set width; the layout rule of each module sets width.
 */

/* ——— One scope list, one field list ——— */
:is(
	.booking-steps-wrapper,
	.booking-service-embed,
	.service-booking,
	.hotel-booking,
	.event-booking,
	.tour-booking,
	.rental-booking,
	.bs-booking-login-gate,
	.bs-hotel-archive-modal,
	.bs-archive-book-popup,
	.bs-hotel-search-results,
	.bs-single,
	.bs-rsvp-widget,
	.bs-hotel-search-bar-wrap,
	.bs-hsr-summary-edit,
	.bs-rental-search-bar-wrap,
	.bs-hsr-assign-qty-wrap,
	.bs-rsr-toolbar,
	.bs-booking-archive__toolbar,
	.bookklar-login-form,
	.bookklar-registration-form,
	.bookklar-user-submission-form,
	.bookklar-my-pages
) {
	/* Default colors (surfaces below override). */
	--bk-field-bg: #ffffff;
	--bk-field-text: var(--bk-body-color, #2c3338);
	--bk-field-border-color: #8c8f94;
	--bk-field-focus-border: var(--bk-field-border-color);
	/* Dropdown list hover / selected row: light tint of the theme button color. */
	--bk-field-option-hover-bg: rgba(var(--bk-btn-accent-rgb, 33, 150, 243), 0.1);

	/* Standard field: inputs, textareas, selects, custom-select triggers, date buttons, catalog filter. */
	& :is(
		input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], .numInput),
		textarea,
		select:not([multiple], .bs-frontend-select__native),
		.bs-frontend-select__trigger,
		.bs-hotel-party__toggle,
		.bs-hotel-search-bar__dates-btn,
		.bs-hsr-summary-edit__dates-btn,
		.bs-rental-search-bar__dates-btn,
		summary.bs-rental-catalog-filter-control
	):not(.extra-quantity, .ticket-quantity, .bs-hsr-extra-qty, .bs-rsr-extra-qty, .bs-rsvp-widget__extra-qty-input, .service-extra-input[data-input-type="number"], .ticket-row input[type="number"], .room-option input[type="number"]) {
		box-sizing: border-box;
		min-height: var(--bk-ui-field-height);
		margin: 0;
		padding: var(--bk-ui-field-padding-y) var(--bk-ui-field-padding-x);
		font-family: var(--bk-body-font-family, inherit);
		font-size: var(--bk-field-font-size, var(--bk-ui-field-font-size));
		font-weight: var(--bk-ui-field-font-weight);
		line-height: var(--bk-ui-field-line-height);
		letter-spacing: normal;
		text-transform: none;
		text-align: left;
		background-color: var(--bk-field-bg);
		color: var(--bk-field-text);
		border: var(--bk-ui-field-border-width) solid var(--bk-field-border-color);
		border-radius: var(--bk-ui-field-radius);
		box-shadow: none;
		filter: none;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;

		&:is(:hover, :focus, :focus-visible, :active) {
			outline: none;
			border-color: var(--bk-field-focus-border);
			box-shadow: none;
			background-color: var(--bk-field-bg);
			color: var(--bk-field-text);
		}

		&:disabled {
			opacity: 0.65;
			cursor: not-allowed;
		}

		&.is-hours-error,
		&.bookklar-form-field__input--invalid {
			border-color: #b32d2e;
		}

		/* Select-like fields: one "v" caret, painted as the field background. */
		&:is(
			select,
			input[type="date"],
			input[type="time"],
			.bs-flatpickr-time,
			.bs-time-list-picker__input,
			.booking-hotel-date-range
		) {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			position: relative;
			padding-right: var(--bk-ui-field-padding-right);
			cursor: pointer;
			background-image: var(--bk-ui-caret);
			background-repeat: no-repeat;
			background-position: right var(--bk-ui-field-padding-x) center;
			background-size: 10px 6px;
		}

		/* Search fields: magnifier icon sits in the left padding. */
		&:is(input.bs-event-archive-search, input.search-filter, input.bs-booking-archive__search, input.bs-rsr-search-input, input.service-accordion-search-input) {
			padding-left: calc(var(--bk-ui-field-padding-x) + 32px);
			background-image: var(--bk-field-search-icon, var(--bk-ui-search-icon));
			background-repeat: no-repeat;
			background-position: var(--bk-ui-field-padding-x) center;
			background-size: 20px 20px;
		}

		/* Custom select trigger + search-bar date button: flex row, caret is ::after. */
		&:is(.bs-frontend-select__trigger, .bs-hotel-party__toggle, .bs-hotel-search-bar__dates-btn, .bs-hsr-summary-edit__dates-btn, .bs-rental-search-bar__dates-btn) {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 8px;
			width: 100%;
			max-width: 100%;
			cursor: pointer;
			-webkit-appearance: none;
			appearance: none;
			text-decoration: none;
		}

		&:is(.bs-frontend-select__trigger, .bs-hotel-party__toggle, .bs-hotel-search-bar__dates-btn, .bs-hsr-summary-edit__dates-btn, .bs-rental-search-bar__dates-btn)::after {
			content: "";
			flex: 0 0 10px;
			width: 10px;
			height: 6px;
			background: var(--bk-ui-caret) center / 10px 6px no-repeat;
			pointer-events: none;
		}

		&:is(.bs-frontend-select__trigger, .bs-hotel-party__toggle)::after {
			position: absolute;
			right: var(--bk-ui-field-padding-x);
			top: 50%;
			transform: translateY(-50%);
		}

		&:is(.bs-hotel-search-bar__dates-btn, .bs-hsr-summary-edit__dates-btn, .bs-rental-search-bar__dates-btn) {
			justify-content: space-between;
			/* min-height (above) keeps the field height; in a very narrow search box the end date wraps under the
			   start date and the button grows instead of the text running over its border. */
			height: auto;
		}

		&:is(.bs-frontend-select__trigger, .bs-hotel-party__toggle) {
			padding-right: var(--bk-ui-field-padding-right);
		}

		&:is(summary.bs-rental-catalog-filter-control) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			width: 100%;
			padding-right: var(--bk-ui-field-padding-right);
			cursor: pointer;
			list-style: none;
			user-select: none;
		}
	}

	/* Native date/time picker icon is replaced by the caret; keep the click target. */
	& :is(input[type="date"], input[type="time"])::-webkit-calendar-picker-indicator {
		opacity: 0;
		position: absolute;
		inset: 0 0 0 auto;
		width: 36px;
		height: auto;
		margin: 0;
		padding: 0;
		cursor: pointer;
	}

	& input[type="time"]::-webkit-inner-spin-button {
		display: none;
		-webkit-appearance: none;
		margin: 0;
	}

	/* Compact qty (tickets, extras, rooms): the only field that is not full height. */
	& :is(
		.ticket-row input[type="number"],
		.ticket-row input.ticket-quantity,
		.extra-row.extra-row--qty .extra-quantity:not([data-input-type="checkbox"]),
		.extra-quantity:not([data-input-type="checkbox"], [type="checkbox"]),
		.room-option input[type="number"],
		.bs-hsr-extra-qty:not([data-input-type="checkbox"]),
		.bs-rsr-extra-qty:not([data-input-type="checkbox"]),
		.bs-rsvp-widget__extra-qty-input,
		.service-extra-input[data-input-type="number"]
	) {
		box-sizing: border-box;
		flex: 0 0 auto;
		width: var(--bk-ui-field-compact-width);
		min-width: var(--bk-ui-field-compact-width);
		height: var(--bk-ui-field-compact-height);
		min-height: var(--bk-ui-field-compact-height);
		margin: 0;
		padding: var(--bk-ui-field-compact-padding-y) var(--bk-ui-field-compact-padding-x);
		font-family: var(--bk-body-font-family, inherit);
		font-size: var(--bk-ui-field-compact-font-size);
		font-weight: var(--bk-ui-field-font-weight);
		line-height: var(--bk-ui-field-line-height);
		text-align: center;
		direction: ltr;
		background-color: var(--bk-field-bg);
		color: var(--bk-field-text);
		-webkit-text-fill-color: var(--bk-field-text);
		border: var(--bk-ui-field-border-width) solid var(--bk-field-border-color);
		border-radius: var(--bk-ui-field-radius);
		overflow: hidden;
		box-shadow: none;
		opacity: 1;

		&:is(:hover, :focus, :focus-visible, :active) {
			outline: none;
			border-color: var(--bk-field-focus-border);
			box-shadow: none;
			background-color: var(--bk-field-bg);
			color: var(--bk-field-text);
			-webkit-text-fill-color: var(--bk-field-text);
		}

		/* The browser's up / down arrows, shown all the time (not only on hover), to step the number. */
		&::-webkit-inner-spin-button {
			opacity: 1;
		}
	}

	& .extra-row__qty-wrap .extra-quantity-label {
		margin: 0;
		font-size: var(--bk-ui-field-compact-label-font-size);
		white-space: nowrap;
	}

	& :is(
		.booking-wizard-custom-fields__row > label:first-of-type:not(.bookklar-cf-options__item),
		.form-group > label,
		.service-field label,
		.service-time-slots-field > .service-time-slots-label,
		.bookklar-login-form__field > label,
		.bookklar-registration-form__field > label,
		.bookklar-my-pages__field > label,
		.bookklar-usf__field > label,
		.bookklar-user-submission-form label[for]
	) {
		display: block;
		margin-bottom: 0.35rem;
		font-size: var(--bk-ui-field-label-font-size);
		font-weight: var(--bk-ui-field-label-font-weight);
		line-height: 1.35;
	}

	& :is(
		.booking-wizard-custom-fields__row,
		.bookklar-login-form__field,
		.bookklar-registration-form__field,
		.bookklar-my-pages__field,
		.bookklar-usf__field
	) {
		margin-bottom: var(--bk-ui-field-gap);
	}

	/* Wizard custom fields + terms: same checkbox/radio size as extras (Brand → Fields). */
	& :is(
		.booking-wizard-custom-fields__checkbox input[type="checkbox"],
		.bookklar-cf-options__item input[type="checkbox"],
		.bookklar-cf-options__item input[type="radio"],
		.booking-wizard-terms__label input[type="checkbox"]
	) {
		box-sizing: border-box;
		flex: 0 0 auto;
		width: var(--bk-ui-check-size);
		min-width: var(--bk-ui-check-size);
		max-width: var(--bk-ui-check-size);
		height: var(--bk-ui-check-size);
		margin: 0;
		padding: 0;
		appearance: none;
		-webkit-appearance: none;
		border: var(--bk-ui-field-border-width) solid var(--bk-field-border-color);
		border-radius: var(--bk-ui-check-radius, 4px);
		background: var(--bk-field-bg);
		display: inline-grid;
		place-content: center;
		cursor: pointer;
	}

	& .bookklar-cf-options__item input[type="radio"] {
		border-radius: 50%;
	}

	& :is(
		.booking-wizard-custom-fields__checkbox input[type="checkbox"],
		.bookklar-cf-options__item input[type="checkbox"],
		.booking-wizard-terms__label input[type="checkbox"]
	)::before {
		content: "";
		width: var(--bk-ui-check-mark-size);
		height: var(--bk-ui-check-mark-size);
		transform: scale(0);
		transition: transform 120ms ease-in-out;
		clip-path: polygon(14% 44%, 0 60%, 43% 100%, 100% 16%, 84% 2%, 41% 72%);
		background: var(--bk-btn-accent, #007aff);
	}

	& :is(
		.bookklar-cf-options__item input[type="radio"]
	)::before {
		content: "";
		width: calc(var(--bk-ui-check-size) * 0.45);
		height: calc(var(--bk-ui-check-size) * 0.45);
		border-radius: 50%;
		transform: scale(0);
		transition: transform 120ms ease-in-out;
		background: var(--bk-btn-accent, #007aff);
	}

	& :is(
		.booking-wizard-custom-fields__checkbox input[type="checkbox"]:checked,
		.bookklar-cf-options__item input[type="checkbox"]:checked,
		.bookklar-cf-options__item input[type="radio"]:checked,
		.booking-wizard-terms__label input[type="checkbox"]:checked
	)::before {
		transform: scale(1);
	}

	& :is(
		.booking-wizard-custom-fields__checkbox input[type="checkbox"]:focus-visible,
		.bookklar-cf-options__item input[type="checkbox"]:focus-visible,
		.bookklar-cf-options__item input[type="radio"]:focus-visible,
		.booking-wizard-terms__label input[type="checkbox"]:focus-visible
	) {
		outline: none;
		border-color: var(--bk-field-focus-border);
	}
}

/* ——— Custom select (JS): wrapper, native twin, label, open list ——— */
.bs-frontend-select,
.bs-select-wrap.bs-frontend-select {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--bk-body-font-family, inherit);
	font-size: var(--bk-ui-field-font-size);
}

.service-booking .form-group .bs-frontend-select,
.service-booking .form-group .bs-select-wrap.bs-frontend-select {
	max-width: min(100%, 18rem);
}

.bs-frontend-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.bs-frontend-select__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bs-frontend-select__list {
	position: absolute;
	z-index: 300;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: min(16rem, 50vh);
	overflow-y: auto;
	background: var(--bk-field-bg, #fff);
	border: var(--bk-ui-field-border-width) solid var(--bk-field-border-color, #8c8f94);
	border-radius: var(--bk-ui-field-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	font-family: var(--bk-body-font-family, inherit);
	font-size: var(--bk-ui-field-font-size);
	font-weight: var(--bk-ui-field-font-weight);
	line-height: var(--bk-ui-field-line-height);
	color: var(--bk-field-text, #2c3338);
}

.bs-frontend-select__list[hidden] {
	display: none;
}

/* Opened upwards when the list would be cut off below (frontend-selects.js). */
.bs-frontend-select.is-open-up .bs-frontend-select__list {
	top: auto;
	bottom: calc(100% + 2px);
}

/* Optional avatar per option (staff photo or initials): <option data-bs-image> / <option data-bs-initials>. */
.bs-frontend-select__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin-right: 10px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
}

.bs-frontend-select__avatar--initials {
	background: var(--bk-btn-accent, var(--bs-accent, #2196f3));
	color: var(--bk-btn-text, #fff);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

.bs-frontend-select__option:has(.bs-frontend-select__avatar),
.bs-frontend-select__label--avatar {
	display: flex;
	align-items: center;
}

.bs-frontend-select__option {
	padding: 8px var(--bk-ui-field-padding-x);
	background: transparent;
	color: var(--bk-field-text, #2c3338);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: normal;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.bs-frontend-select__option:is(:hover, :focus, :focus-visible),
.bs-frontend-select__option[aria-selected="true"] {
	outline: none;
	background: var(--bk-field-option-hover-bg, rgba(var(--bk-btn-accent-rgb, 33, 150, 243), 0.1));
	color: var(--bk-field-text, #2c3338);
}

.bs-frontend-select__option.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/*
 * Native selects (archive toolbars, hotel / rental search bars and any select left native):
 * the open list is drawn by the browser. Browsers with customizable select (Chrome / Edge 135+)
 * get the same list as .bs-frontend-select — body font, field size, field colors and the theme
 * hover tint. Other browsers keep their own list.
 */
@supports (appearance: base-select) {
	:is(
		.booking-steps-wrapper,
		.booking-service-embed,
		.service-booking,
		.hotel-booking,
		.event-booking,
		.tour-booking,
		.rental-booking,
		.bs-booking-login-gate,
		.bs-hotel-archive-modal,
		.bs-archive-book-popup,
		.bs-hotel-search-results,
		.bs-single,
		.bs-rsvp-widget,
		.bs-hotel-search-bar-wrap,
		.bs-hsr-summary-edit,
		.bs-rental-search-bar-wrap,
		.bs-hsr-assign-qty-wrap,
		.bs-rsr-toolbar,
		.bs-booking-archive__toolbar,
		.bookklar-login-form,
		.bookklar-registration-form,
		.bookklar-user-submission-form,
		.bookklar-my-pages
	) select:not([multiple], [size], .bs-frontend-select__native) {
		/* Beats the field chrome's appearance: none (higher specificity). */
		appearance: base-select !important;

		/* The field keeps its own caret (background image). */
		&::picker-icon {
			display: none;
		}

		&::picker(select) {
			appearance: base-select;
			box-sizing: border-box;
			max-height: min(16rem, 50vh);
			margin: 2px 0 0;
			padding: 0;
			overflow-y: auto;
			background: var(--bk-field-bg, #fff);
			border: var(--bk-ui-field-border-width) solid var(--bk-field-border-color, #8c8f94);
			border-radius: var(--bk-ui-field-radius);
			box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
			font-family: var(--bk-body-font-family, inherit);
			font-size: var(--bk-field-font-size, var(--bk-ui-field-font-size));
			font-weight: var(--bk-ui-field-font-weight);
			line-height: var(--bk-ui-field-line-height);
			color: var(--bk-field-text, #2c3338);
		}

		& option {
			padding: 8px var(--bk-ui-field-padding-x);
			background: transparent;
			color: var(--bk-field-text, #2c3338);
			font: inherit;
			cursor: pointer;

			&::checkmark {
				display: none;
			}

			&:is(:hover, :focus, :focus-visible, :checked) {
				outline: none;
				background: var(--bk-field-option-hover-bg, rgba(var(--bk-btn-accent-rgb, 33, 150, 243), 0.1));
				color: var(--bk-field-text, #2c3338);
			}

			&:disabled {
				opacity: 0.55;
				cursor: not-allowed;
			}
		}
	}
}

/* Decorative caret span inside search bars — the caret is the button's ::after. */
.bs-hotel-search-bar__caret,
.bs-rental-search-bar__caret {
	display: none;
}

/* ——— Colors per surface (sizes never change here) ——— */

/* Rooms / hotel wizard (Settings → Styling → Rooms) */
.hotel-booking:not(.event-sidebar-module--narrow) {
	--bk-field-bg: var(--bk-classic-full-width-field-bg, var(--bk-rooms-wizard-row-input-bg, #ffffff));
	--bk-field-text: var(--bk-classic-full-width-field-text, var(--bk-body-color, #1c1917));
	--bk-field-border-color: var(--bk-classic-full-width-field-border-color, var(--bk-rooms-wizard-row-input-border-color, var(--bk-rooms-wizard-row-border-color, #cccccc)));
	--bk-wizard-extras-row-bg: var(--bk-classic-full-width-field-bg, var(--bk-rooms-wizard-row-input-bg, #ffffff));
	--bk-wizard-extras-row-text: var(--bk-classic-full-width-field-text, var(--bk-body-color, #1c1917));
	--bk-wizard-extras-row-border-color: var(--bk-classic-full-width-field-border-color, var(--bk-field-border-color, #e0e0e0));
	--bk-wizard-extras-row-icon-color: var(--bk-classic-full-width-extra-icon-color, var(--bk-rooms-wizard-extra-icon-color, var(--bk-btn-accent)));
}

/* Rentals classic wizard (Settings → Styling → Rentals) */
.rental-booking.rental-booking--ui-classic {
	--bk-field-bg: var(--bk-classic-full-width-field-bg, var(--bk-rentals-wizard-row-input-bg, #ffffff));
	--bk-field-text: var(--bk-classic-full-width-field-text, var(--bk-body-color, #1c1917));
	--bk-field-border-color: var(--bk-classic-full-width-field-border-color, var(--bk-rentals-wizard-row-input-border-color, var(--bk-rentals-wizard-row-border-color, #cccccc)));
	--bk-wizard-extras-row-bg: var(--bk-classic-full-width-field-bg, var(--bk-rentals-wizard-row-input-bg, #ffffff));
	--bk-wizard-extras-row-text: var(--bk-classic-full-width-field-text, var(--bk-body-color, #1c1917));
	--bk-wizard-extras-row-border-color: var(--bk-classic-full-width-field-border-color, var(--bk-field-border-color, #e0e0e0));
	--bk-wizard-extras-row-icon-color: var(--bk-classic-full-width-extra-icon-color, var(--bk-rentals-wizard-extra-icon-color, var(--bk-btn-accent)));
}

/* Rental catalog wizard — step 1 date/time fields use catalog field colors. */
.rental-booking.rental-booking--ui-classic:has(.rental-catalog-step) {
	--bk-field-text: var(--bk-rentals-catalog-field-text-color, var(--bk-rentals-wizard-row-text-color, var(--bk-body-color, #1c1917)));
	--bk-field-border-color: var(--bk-rentals-catalog-field-border-color, var(--bk-rentals-wizard-row-input-border-color, var(--bk-rentals-wizard-row-border-color, #cccccc)));
}

.rental-booking.rental-booking--ui-classic .extra-row__qty-wrap .extra-quantity-label {
	color: var(--bk-field-text, var(--bk-classic-full-width-field-text, var(--bk-body-color, #666666)));
	opacity: 1;
}

.rental-booking.rental-booking--ui-classic .extra-row__main .extra-price {
	color: var(--bk-field-text, var(--bk-classic-full-width-field-text, inherit));
}

/* Event / Tour classic wide wizard (Settings → Styling → Experiences) */
:is(.event-booking, .tour-booking):not(.event-sidebar-module--narrow) {
	--bk-field-bg: var(--bk-experiences-wizard-row-input-bg, #ffffff);
	--bk-field-text: var(--bk-experiences-wizard-row-text-color, var(--bk-body-color, #1c1917));
	--bk-field-border-color: var(--bk-experiences-wizard-row-input-border-color, var(--bk-experiences-wizard-row-border-color, #cccccc));
	--bk-wizard-extras-row-bg: var(--bk-experiences-wizard-row-bg, #ffffff);
	--bk-wizard-extras-row-text: var(--bk-experiences-wizard-row-text-color, var(--bk-body-color, #1c1917));
	--bk-wizard-extras-row-border-color: var(--bk-experiences-wizard-row-border-color, #e0e0e0);
	--bk-wizard-extras-row-icon-color: var(--bk-experiences-wizard-extra-icon-color, var(--bk-btn-accent));
}

/* Compact sidebar (event / tour / hotel / rental / single service page narrow UI) */
:is(.event-booking, .tour-booking, .hotel-booking, .rental-booking, .service-booking).event-sidebar-module--narrow,
.rental-booking .bs-booking-wizard-extras--compact:not(#booking-extras) {
	--bk-field-bg: #ffffff;
	--bk-field-text: var(--bk-compact-sidebar-control-text-color, var(--bk-compact-sidebar-row-text-color, var(--bk-body-color, #1c1917)));
	--bk-field-border-color: var(--bk-compact-sidebar-control-border-color, var(--bs-border, #d8d4cb));
	--bk-wizard-extras-row-bg: var(--bk-compact-sidebar-row-bg, #ffffff);
	--bk-wizard-extras-row-text: var(--bk-compact-sidebar-row-text-color, var(--bk-body-color, #1c1917));
	--bk-wizard-extras-row-border-color: var(--bk-compact-sidebar-row-border-color, var(--bs-border, #e8e6e1));
}

.event-booking.event-sidebar-module--narrow,
.tour-booking.event-sidebar-module--narrow {
	--bk-wizard-extras-row-icon-color: var(--bk-experiences-wizard-extra-icon-color, var(--bk-btn-accent));
}

/* Compact sidebar extras icon: theme accent (the Classic full width extras icon belongs to that layout). */
.hotel-booking.event-sidebar-module--narrow {
	--bk-wizard-extras-row-icon-color: var(--bk-btn-accent);
}

.rental-booking.event-sidebar-module--narrow,
.rental-booking .bs-booking-wizard-extras--compact:not(#booking-extras) {
	--bk-wizard-extras-row-icon-color: var(--bk-btn-accent);
}

/* Catalog card extras (step 2) */
.rental-booking .rental-catalog-item__extras.rental-catalog-extras.bs-booking-wizard-extras--compact {
	--bk-wizard-extras-row-icon-color: var(--bk-rentals-catalog-extra-icon-color, var(--bk-rentals-wizard-extra-icon-color, var(--bk-btn-accent)));
	--bk-wizard-extras-row-border-color: var(--bk-rentals-catalog-extra-border-color, var(--bk-rentals-wizard-row-border-color, var(--bs-border, #e8e6e1)));
	--bk-field-border-color: var(--bk-wizard-extras-row-border-color);
}

.rental-booking .rental-catalog-step__filters-toolbar .bs-rental-catalog-filter-control {
	--bk-field-border-color: var(--bk-rentals-catalog-filter-control-border-color, var(--bk-field-border-color));
}

/* Archive list/grid book popup (Settings → Styling → Popups) */
#bs-hotel-archive-modal.bs-archive-book-popup,
.bs-archive-book-popup {
	--bk-field-bg: var(--bk-archive-popup-field-bg, #ffffff);
	--bk-field-text: var(--bk-archive-popup-field-text, var(--bk-popup-shell-dialog-text, var(--bk-body-color, #1c1917)));
	--bk-field-border-color: var(--bk-archive-popup-field-border-color, var(--bs-border, #d8d4cb));
	--bk-wizard-extras-row-bg: var(--bk-archive-popup-extras-row-bg, var(--bk-field-bg));
	--bk-wizard-extras-row-text: var(--bk-field-text);
	--bk-wizard-extras-row-border-color: var(--bk-archive-popup-extras-row-border-color, var(--bk-field-border-color));
	--bk-wizard-extras-row-icon-color: var(--bk-archive-popup-extras-icon-color, var(--bk-btn-accent));
}

/* Service wizard (Settings → Styling → Service) */
:is(.service-booking, .booking-service-embed) {
	--bk-field-bg: var(--bk-svc-field-bg, #fafafa);
	--bk-field-text: var(--bk-body-color, var(--bs-text, #1c1917));
	--bk-field-border-color: var(--bk-svc-field-border, var(--bk-svc-shell-border, var(--bs-border, #ddd)));
}

/* Single service page → Classic: Styling → Classic full width fields (shared with Rooms and Rentals). */
.service-booking.service-booking--single-classic {
	--bk-field-bg: var(--bk-classic-full-width-field-bg, #ffffff);
	--bk-field-text: var(--bk-classic-full-width-field-text, var(--bk-body-color, #1c1917));
	--bk-field-border-color: var(--bk-classic-full-width-field-border-color, var(--bs-border, #ddd));
}

/* Hotel / rental search bars, change-search and room-qty wrap */
:is(.bs-hotel-search-bar-wrap, .bs-hsr-summary-edit, .bs-rental-search-bar-wrap, .bs-hsr-assign-qty-wrap) {
	--bk-field-bg: #ffffff;
	--bk-field-text: var(--bk-rooms-date-body-text-color, var(--bk-body-color, #1c1917));
	--bk-field-border-color: var(--bk-theme-border, rgba(0, 0, 0, 0.1));
}

.bs-rental-search-bar-wrap {
	--bk-field-text: var(--bk-rentals-search-date-body-text-color, var(--bk-rooms-date-body-text-color, var(--bk-body-color, #1c1917)));
}

/* Archive browse + rental results toolbars (--bs-arch-* → --bk-field-*) */
:is(.bs-rsr-toolbar, .bs-booking-archive__toolbar) {
	--bk-field-bg: #fafaf8;
	--bk-field-text: var(--bs-arch-muted, #64748b);
	--bk-field-border-color: var(--bs-arch-border, #e7e5e0);
}

/* Archive list / grid / calendar toolbar: Styling → Views → Toolbar (theme tokens until set). */
.bs-booking-archive__toolbar {
	--bk-field-text: var(--bk-views-toolbar-value-color, var(--bs-arch-muted, #64748b));
	--bk-field-border-color: var(--bk-views-toolbar-field-border, var(--bs-arch-border, #e7e5e0));
	--bk-field-search-icon: var(--bk-views-toolbar-search-icon);
	--bk-field-font-size: var(--bk-views-toolbar-value-font-size);
}

/* Account / submission forms (neutral field border; colors from Styling body/button tokens). */
:is(.bookklar-login-form, .bookklar-registration-form, .bookklar-user-submission-form, .bookklar-my-pages) {
	--bk-field-bg: #ffffff;
	--bk-field-text: var(--bk-body-color, #1d2327);
	--bk-field-border-color: #c3c4c7;
	--bk-field-focus-border: var(--bk-btn-accent, #2196f3);
}

/* Sign-in inside a booking card (login required) uses the card's field colors, like the booking form it replaces. */
.bs-booking-login-gate :is(.bookklar-login-form, .bookklar-registration-form) {
	--bk-field-bg: inherit;
	--bk-field-text: inherit;
	--bk-field-border-color: inherit;
	--bk-field-focus-border: inherit;
}