/**
 * Theme-proof isolation — the ONLY place !important is permitted (docs/22 §6).
 *
 * `.bookline-surface` is the shared scope class on admin and widget mount
 * nodes. Tailwind utilities use `important: '.bookline-surface'`.
 */

/* ── Surface roots ─────────────────────────────────────────────────────── */

.bookline-surface,
.bookline-widget,
.bl-admin,
#bookline-admin-root {
	font-family: var(--bl-font) !important;
	font-size: var(--text-md-size) !important;
	line-height: var(--text-md-line) !important;
	color: var(--color-text);
	background: transparent !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ── Box model ─────────────────────────────────────────────────────────── */

.bookline-surface,
.bookline-surface *,
.bookline-surface *::before,
.bookline-surface *::after,
.bookline-widget,
.bookline-widget *,
.bookline-widget *::before,
.bookline-widget *::after,
.bl-admin,
.bl-admin *,
.bl-admin *::before,
.bl-admin *::after,
#bookline-admin-root,
#bookline-admin-root *,
#bookline-admin-root *::before,
#bookline-admin-root *::after {
	box-sizing: border-box !important;
}

:where(
	.bookline-surface,
	.bookline-surface *,
	.bookline-widget,
	.bookline-widget *,
	.bl-admin,
	.bl-admin *,
	#bookline-admin-root,
	#bookline-admin-root *
) {
	margin: 0;
}

/* ── Links & media ─────────────────────────────────────────────────────── */

/*
 * Widget links may use the accent. Admin links stay ink (docs/22 §3):
 * ghost controls and in-copy links never take the brand colour, because
 * a light custom hex fails contrast on paper.
 */
.bookline-widget a {
	color: var(--color-primary);
	text-decoration: none;
}

.bl-admin a,
#bookline-admin-root a {
	color: var(--ink-900);
	text-decoration: none;
}

/*
 * Booking widget (including admin live preview) is the form theme only.
 * WordPress admin colour schemes set --wp-admin-theme-color and often
 * --color-primary on #wpbody-content; the admin shell rebinds --bl-accent
 * for Settings › Appearance. Neither may paint the customer form.
 */
.bookline-widget {
	--wp-admin-theme-color: var(--bl-accent) !important;
	--wp-admin-theme-color-darker-10: var(--accent-700) !important;
	--wp-admin-theme-color-darker-20: var(--accent-700) !important;
	--color-primary: var(--bl-accent) !important;
	--color-primary-text: var(--on-accent) !important;
	--accent-500: var(--bl-accent) !important;
	--accent-50: color-mix(in srgb, var(--bl-accent) 12%, var(--paper-0)) !important;
	--accent-300: color-mix(in srgb, var(--bl-accent) 48%, var(--paper-0)) !important;
	--accent-700: color-mix(in srgb, var(--bl-accent) 78%, var(--ink-900)) !important;
}

.bookline-admin-shell aside a {
	color: var(--sidebar-muted);
}

.bookline-surface ul,
.bookline-surface ol,
.bookline-widget ul,
.bookline-widget ol {
	list-style: none;
	padding-left: 0;
}

.bookline-surface img,
.bookline-widget img,
.bl-admin img,
#bookline-admin-root img {
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
}

/*
 * Form controls — wp-admin forms.css and many themes style `input[type=text]`
 * / `:focus` at 0,2,1+. Hashed CSS modules lose. Neutralise here (docs/22 §6).
 */
:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input:not(
		[type='checkbox'],
		[type='radio'],
		[type='hidden'],
		[type='file'],
		[type='range'],
		[type='submit'],
		[type='button'],
		[type='image'],
		[type='reset'],
		[type='color']
	) {
	appearance: none !important;
	-webkit-appearance: none !important;
	box-shadow: none !important;
	background-color: var(--color-surface) !important;
	background-image: none !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--r-sm) !important;
	color: var(--color-text) !important;
	font-family: var(--bl-font) !important;
	font-size: var(--text-md-size) !important;
	line-height: var(--text-md-line) !important;
	min-height: var(--touch-target) !important;
	height: auto !important;
	padding: var(--sp-10) var(--sp-15) !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	outline: none !important;
}

.bookline-widget
	input:not(
		[type='checkbox'],
		[type='radio'],
		[type='hidden'],
		[type='file'],
		[type='range'],
		[type='submit'],
		[type='button'],
		[type='image'],
		[type='reset'],
		[type='color']
	) {
	border-radius: var(--bl-radius) !important;
}

:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input:not(
		[type='checkbox'],
		[type='radio'],
		[type='hidden'],
		[type='file'],
		[type='range'],
		[type='submit'],
		[type='button'],
		[type='image'],
		[type='reset'],
		[type='color']
	):is( :focus, :focus-visible ) {
	border-color: var(--color-border) !important;
	box-shadow: none !important;
	background-color: var(--color-surface) !important;
	outline: var(--focus-ring) !important;
	outline-offset: var(--sp-5) !important;
}

:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input[aria-invalid='true'] {
	border-color: var(--danger) !important;
}

:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input.bookline-input-bare,
:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input.bookline-input-bare:is( :focus, :focus-visible ) {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	width: auto !important;
	max-width: none !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	min-height: var(--touch-target) !important;
	padding: var(--sp-10) var(--sp-15) !important;
}

:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input.bookline-input-bare.bookline-input-stretch {
	width: 100% !important;
	flex: none !important;
	border-radius: 0 !important;
	border-bottom: 1px solid var(--color-border) !important;
}

/*
 * Nested combobox / search fields live inside an already-bordered shell.
 * The generic input reset above would draw a second box (docs/22 §6).
 */
:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input.bl-search-select__input,
:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input.bl-search-select__input:is( :focus, :focus-visible ) {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex: 1 1 8rem !important;
	min-width: 0 !important;
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input.bl-filter-search__input,
:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	input.bl-filter-search__input:is( :focus, :focus-visible ) {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	border-radius: var(--r-md) !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	min-height: 0 !important;
	height: auto !important;
	padding: var(--sp-10) var(--sp-45) !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	font-size: var(--text-sm-size) !important;
	line-height: var(--text-sm-line) !important;
}

:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	button.bookline-phone-country[data-invalid='true'] {
	border-color: var(--danger) !important;
}

:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	button.bookline-phone-country {
	appearance: none !important;
	-webkit-appearance: none !important;
	box-shadow: none !important;
	background-color: var(--color-surface) !important;
	background-image: none !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--r-sm) !important;
	color: var(--color-text) !important;
	font-family: var(--bl-font) !important;
	font-size: var(--text-md-size) !important;
	line-height: var(--text-md-line) !important;
	min-height: var(--touch-target) !important;
	height: auto !important;
	margin: 0 !important;
	padding: var(--sp-10) var(--sp-10) var(--sp-10) var(--sp-15) !important;
}

:is( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root )
	button.bookline-phone-country:focus-visible {
	outline: var(--focus-ring) !important;
	outline-offset: var(--sp-5) !important;
	box-shadow: none !important;
}

.bookline-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.bookline-surface *,
	.bookline-surface *::before,
	.bookline-surface *::after,
	.bookline-widget *,
	.bookline-widget *::before,
	.bookline-widget *::after,
	.bl-admin *,
	.bl-admin *::before,
	.bl-admin *::after,
	#bookline-admin-root *,
	#bookline-admin-root *::before,
	#bookline-admin-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transform: none !important;
	}
}