/*
 * W2M Bookings shared component base (front end + admin).
 * Rules: rem only (px for borders, outlines, shadows), colours from --w2m-bk-* tokens only,
 * every selector scoped to .w2m-bk plugin markup.
 */
:is(.w2m-bk, #w2m-bk-guard) {
	--w2m-bk-space-1: 0.5rem;
	--w2m-bk-space-2: 0.75rem;
	--w2m-bk-space-3: 1rem;
	--w2m-bk-space-4: 1.5rem;
	--w2m-bk-space-5: 2rem;
	--w2m-bk-space-6: 3rem;
	--w2m-bk-target: 2.75rem;
	--w2m-bk-shadow: 0 1px 2px color-mix(in srgb, var(--w2m-bk-text) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--w2m-bk-text) 8%, transparent);
	--w2m-bk-ring: 0 0 0 2px var(--w2m-bk-focus-gap), 0 0 0 4px var(--w2m-bk-focus);
	--w2m-bk-ease: 160ms ease;
	box-sizing: border-box;
	color: var(--w2m-bk-text);
	font-family: var(--w2m-bk-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: start;
}
:is(.w2m-bk, #w2m-bk-guard) *,
:is(.w2m-bk, #w2m-bk-guard) *::before,
:is(.w2m-bk, #w2m-bk-guard) *::after { box-sizing: border-box; }
:is(.w2m-bk, #w2m-bk-guard) :where(h1, h2, h3, h4, p, ul, ol, fieldset, dl) { margin: 0; }
:is(.w2m-bk, #w2m-bk-guard) :where(ul, ol) { padding: 0; list-style: none; }
:is(.w2m-bk, #w2m-bk-guard) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:is(.w2m-bk, #w2m-bk-guard) a { color: var(--w2m-bk-link); text-decoration: underline; text-underline-offset: 0.15em; }
:is(.w2m-bk, #w2m-bk-guard) a:hover { color: var(--w2m-bk-link-hover); }
:is(.w2m-bk, #w2m-bk-guard).w2m-bk [hidden][hidden] { display: none; }
/*
 * Theme guard (0.1.2). Themes and page builders style bare elements (h2 { color }, .breakdance h3,
 * body .entry-content p). Every plugin selector starts with :is(.w2m-bk, #w2m-bk-guard): the never-present
 * id gives each rule one id of specificity, so plugin rules beat class/element theme rules with no
 * important flag, while plugin rules keep their order among themselves. Text-level elements inherit from the
 * plugin component around them; headings, labels and captions take the text token.
 * Themes that force heading colours (important flag): Settings > Appearance > "Theme guard" adds a scoped override.
 */
:is(.w2m-bk, #w2m-bk-guard) :is(h1, h2, h3, h4, h5, h6, legend, label, dt, caption, figcaption, th) { color: var(--w2m-bk-text); }
:is(.w2m-bk, #w2m-bk-guard) :is(p, li, dd, td, small, strong, b, em, i, span, time, abbr, address, blockquote, code, pre, div, section, form, fieldset, ul, ol, dl, table, tbody, thead, tr, details, summary) { color: inherit; }
:is(.w2m-bk, #w2m-bk-guard) :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; background: none; }
:is(.w2m-bk, #w2m-bk-guard) :is(button, a, input, select, textarea, label) { text-shadow: none; letter-spacing: normal; text-transform: none; }
:is(.w2m-bk, #w2m-bk-guard) :focus { outline: none; }
:is(.w2m-bk, #w2m-bk-guard) :focus-visible { outline: 2px solid transparent; box-shadow: var(--w2m-bk-ring); border-radius: var(--w2m-bk-radius-button); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-sr {
	position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; /* sr-only */
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-muted { color: var(--w2m-bk-text-muted); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-small { font-size: 0.875rem; }

/* Buttons */
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--w2m-bk-space-1);
	min-block-size: 3rem; min-inline-size: var(--w2m-bk-target); padding: 0 1.25rem;
	border-radius: var(--w2m-bk-radius-button); border: 1.5px solid var(--w2m-bk-border-strong);
	background: var(--w2m-bk-surface); color: var(--w2m-bk-text);
	font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
	transition: background-color var(--w2m-bk-ease), border-color var(--w2m-bk-ease), color var(--w2m-bk-ease);
}
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn:hover { background: var(--w2m-bk-surface-2); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--cta { background: var(--w2m-bk-cta); color: var(--w2m-bk-on-cta); border-color: var(--w2m-bk-cta-outline); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--cta:hover { background: var(--w2m-bk-cta-hover); color: var(--w2m-bk-on-cta); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--primary { background: var(--w2m-bk-accent); color: var(--w2m-bk-on-accent); border-color: var(--w2m-bk-accent); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--primary:hover { background: color-mix(in srgb, var(--w2m-bk-accent) 85%, var(--w2m-bk-text)); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--danger { background: var(--w2m-bk-danger); color: var(--w2m-bk-on-danger); border-color: var(--w2m-bk-danger); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--danger:hover { background: color-mix(in srgb, var(--w2m-bk-danger) 85%, var(--w2m-bk-text)); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--ghost { background: transparent; border-color: transparent; color: var(--w2m-bk-link); text-decoration: underline; text-underline-offset: 0.15em; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--ghost.w2m-bk-btn--icon { text-decoration: none; color: var(--w2m-bk-text); font-size: 1.5rem; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-actions { display: flex; flex-wrap: wrap; gap: var(--w2m-bk-space-2); align-items: center; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--ghost:hover { background: var(--w2m-bk-surface-2); color: var(--w2m-bk-link-hover); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--sm { min-block-size: var(--w2m-bk-target); padding: 0 0.875rem; font-size: 0.9375rem; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn--icon { padding: 0; inline-size: var(--w2m-bk-target); min-block-size: var(--w2m-bk-target); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn[disabled],
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 1; background: var(--w2m-bk-surface); color: var(--w2m-bk-disabled); border-color: var(--w2m-bk-border); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-btn svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-row { display: flex; flex-wrap: wrap; gap: var(--w2m-bk-space-2); align-items: center; }

/* Segmented control (view switch, theme toggle) */
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-seg { display: inline-flex; padding: 0.1875rem; gap: 0.1875rem; border: 1px solid var(--w2m-bk-border-strong); border-radius: calc(var(--w2m-bk-radius-button) + 0.1875rem); background: var(--w2m-bk-surface); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-seg button {
	min-block-size: var(--w2m-bk-target); min-inline-size: var(--w2m-bk-target); padding: 0 0.875rem;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
	border: 0; border-radius: var(--w2m-bk-radius-button); background: transparent; color: var(--w2m-bk-text);
	font-weight: 600; font-size: 0.9375rem; cursor: pointer;
}
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-seg button:hover { background: var(--w2m-bk-surface-2); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-seg button[aria-pressed="true"] { background: var(--w2m-bk-selected); color: var(--w2m-bk-on-selected); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-seg svg { inline-size: 1.125rem; block-size: 1.125rem; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-seg--icons button { padding: 0; }

/* Forms */
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-field { display: grid; gap: 0.375rem; min-inline-size: 0; align-content: start; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-label { font-weight: 600; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-hint { font-size: 0.875rem; color: var(--w2m-bk-text-muted); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-input,
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-select,
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-textarea {
	inline-size: 100%; max-inline-size: 100%; min-block-size: 3rem; padding: 0.625rem 0.875rem; margin: 0; font: inherit; line-height: 1.4;
	border: 1px solid var(--w2m-bk-border-strong); border-radius: var(--w2m-bk-radius-input);
	background: var(--w2m-bk-surface); color: var(--w2m-bk-text);
}
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-select { appearance: auto; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-textarea { min-block-size: 6rem; resize: vertical; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-input::placeholder, :is(.w2m-bk, #w2m-bk-guard) .w2m-bk-textarea::placeholder { color: var(--w2m-bk-text-muted); opacity: 1; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-input:focus-visible,
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-select:focus-visible,
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-textarea:focus-visible { border-radius: var(--w2m-bk-radius-input); }
:is(.w2m-bk, #w2m-bk-guard) [aria-invalid="true"] { border-color: var(--w2m-bk-danger); border-width: 2px; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-error { color: var(--w2m-bk-danger); font-weight: 600; font-size: 0.9375rem; display: flex; gap: 0.375rem; align-items: flex-start; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--w2m-bk-danger); color: var(--w2m-bk-on-danger); font-size: 0.8125rem; line-height: 1; margin-block-start: 0.125rem; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-check { display: flex; gap: var(--w2m-bk-space-2); align-items: flex-start; min-block-size: var(--w2m-bk-target); padding-block: 0.5rem; cursor: pointer; }
/*
 * Native checkboxes and radios (0.1.2 item 3). WP admin forms.css and many themes set appearance:none with a
 * white box; restore the native control and colour it from tokens. color-scheme (set on .w2m-bk by the token
 * sheet) makes the unchecked box dark in dark mode; accent-color fills the checked state.
 */
:is(.w2m-bk, #w2m-bk-guard) :is(input[type="checkbox"], input[type="radio"]) {
	appearance: auto; -webkit-appearance: auto; color-scheme: inherit; accent-color: var(--w2m-bk-accent);
	inline-size: 1.375rem; block-size: 1.375rem; min-inline-size: 0; min-block-size: 0; margin: 0; padding: 0;
	border: 0; background: none; box-shadow: none; vertical-align: middle; cursor: pointer; flex: none;
}
:is(.w2m-bk, #w2m-bk-guard) :is(input[type="checkbox"], input[type="radio"])::before,
:is(.w2m-bk, #w2m-bk-guard) :is(input[type="checkbox"], input[type="radio"])::after { content: none; display: none; }
:is(.w2m-bk, #w2m-bk-guard) :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid transparent; box-shadow: var(--w2m-bk-ring); border-radius: 0.25rem; }
:is(.w2m-bk, #w2m-bk-guard) :is(input, select, textarea) { color-scheme: inherit; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-pickhit { display: inline-grid; place-items: center; min-inline-size: var(--w2m-bk-target); min-block-size: var(--w2m-bk-target); cursor: pointer; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-check input { flex: none; inline-size: 1.375rem; block-size: 1.375rem; margin: 0.0625rem 0 0; accent-color: var(--w2m-bk-accent); cursor: pointer; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-check input:focus-visible { box-shadow: var(--w2m-bk-ring); border-radius: 0.25rem; }

/* Notices, badges */
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-notice { padding: var(--w2m-bk-space-3); border-radius: var(--w2m-bk-radius-input); border: 1px solid var(--w2m-bk-border-strong); background: var(--w2m-bk-surface); display: grid; gap: var(--w2m-bk-space-1); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-notice--error { border: 2px solid var(--w2m-bk-danger); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-notice--success { border: 2px solid var(--w2m-bk-success); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-notice--warn { border: 2px solid var(--w2m-bk-border-strong); border-inline-start: 0.375rem solid var(--w2m-bk-warning); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-badge--confirmed, :is(.w2m-bk, #w2m-bk-guard) .w2m-bk-badge--completed { background: var(--w2m-bk-success); color: var(--w2m-bk-on-success); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-badge--pending, :is(.w2m-bk, #w2m-bk-guard) .w2m-bk-badge--awaiting_payment { background: var(--w2m-bk-warning); color: var(--w2m-bk-on-warning); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-badge--cancelled, :is(.w2m-bk, #w2m-bk-guard) .w2m-bk-badge--no_show { background: var(--w2m-bk-danger); color: var(--w2m-bk-on-danger); }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-badge--neutral { background: var(--w2m-bk-surface); color: var(--w2m-bk-text); border-color: var(--w2m-bk-border-strong); }

/* Definition list */
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-dl { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: 0.5rem 1.25rem; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-dl dt { font-weight: 600; }
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Spinner */
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-spin { display: inline-block; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; border: 2px solid var(--w2m-bk-border); border-block-start-color: var(--w2m-bk-accent); animation: w2m-bk-spin 0.8s linear infinite; vertical-align: middle; }
@keyframes w2m-bk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	:is(.w2m-bk, #w2m-bk-guard) *, :is(.w2m-bk, #w2m-bk-guard) *::before, :is(.w2m-bk, #w2m-bk-guard) *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-spin { border-block-start-color: var(--w2m-bk-border); border-inline-end-color: var(--w2m-bk-accent); }
}
/* Disabled / locked fields: no WP admin background images, readable text, dashed border as a non-colour cue. */
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-field .w2m-bk-input:disabled,
:is(.w2m-bk, #w2m-bk-guard) .w2m-bk-field .w2m-bk-select:disabled { background-image: none; background-color: var(--w2m-bk-surface-2); color: var(--w2m-bk-text); border-style: dashed; cursor: not-allowed; opacity: 1; }