/**
 * RCM Booking Relay widget — styled with the theme's design tokens only.
 */
.rcm-booking {
	margin: var(--space-5) 0;
	padding: var(--space-4);
	background: var(--color-surface-raised, #fff);
	border: var(--border-default, 1px solid #DDE3E8);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-sm);
}

.rcm-booking__heading {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-semibold, 600);
	color: var(--color-text, #1F2933);
	margin: 0 0 var(--space-3);
}

.rcm-booking__fu-for {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold, 600);
	color: var(--color-text, #1A2733);
	margin: 0 0 var(--space-1);
}

.rcm-booking__intro {
	font-size: var(--text-small);
	color: var(--color-text-muted, #4E5C69);
	margin: 0 0 var(--space-3);
}

.rcm-booking__form { display: flex; flex-direction: column; gap: var(--space-4); }

.rcm-booking__row {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.rcm-booking__row > * { flex: 1 1 8rem; }

.rcm-booking__field { display: flex; flex-direction: column; }

.rcm-booking__label,
.rcm-booking__legend {
	font-size: var(--text-small);
	font-weight: var(--weight-medium, 500);
	color: var(--color-text, #1F2933);
	margin-bottom: var(--space-1);
	padding: 0;
}

/* Fieldset carries the day / time / visit-type groups; strip its chrome. */
.rcm-booking__group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.rcm-booking__input {
	width: 100%;
	min-height: var(--target-min, 44px);
	padding: var(--space-2) var(--space-3);
	font: inherit;
	font-size: var(--text-body);
	color: var(--color-text, #1F2933);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #C2CBD3);
	border-radius: var(--radius-md, 8px);
}

.rcm-booking__input:focus {
	outline: var(--focus-ring, 3px solid #1E73B8);
	outline-offset: var(--focus-ring-offset, 2px);
}

/* ---------------------------------------------------------------
 * Chip buttons — the day, time, and visit-type pickers.
 * --------------------------------------------------------------- */
.rcm-booking__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.rcm-booking__chip,
.rcm-booking__seg-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--target-min, 44px);
	padding: var(--space-2) var(--space-3);
	font: inherit;
	font-size: var(--text-body);
	font-weight: var(--weight-medium, 500);
	color: var(--color-text, #1F2933);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border-strong, #C2CBD3);
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
	transition:
		background var(--duration-fast, 120ms) var(--ease-standard),
		border-color var(--duration-fast, 120ms) var(--ease-standard),
		color var(--duration-fast, 120ms) var(--ease-standard);
}

.rcm-booking__chip--day {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	line-height: var(--leading-snug, 1.35);
	text-align: left;
}
.rcm-booking__chip-wd { font-weight: var(--weight-semibold, 600); }
.rcm-booking__chip-dt {
	font-size: var(--text-small);
	font-weight: var(--weight-regular, 400);
	color: var(--color-text-muted, #4E5C69);
}

.rcm-booking__chip:hover,
.rcm-booking__seg-option:hover .rcm-booking__seg-text {
	border-color: var(--color-primary, #0B5FA5);
	background: var(--color-primary-50, #EFF6FC);
}

.rcm-booking__chip:focus-visible,
.rcm-booking__seg-input:focus-visible + .rcm-booking__seg-text {
	outline: var(--focus-ring, 3px solid #1E73B8);
	outline-offset: var(--focus-ring-offset, 2px);
}

/* Selected state — carried by aria-pressed (chips) or :checked (segmented). */
.rcm-booking__chip[aria-pressed="true"],
.rcm-booking__seg-input:checked + .rcm-booking__seg-text {
	color: var(--color-text-inverse, #fff);
	background: var(--color-primary, #0B5FA5);
	border-color: var(--color-primary, #0B5FA5);
}
.rcm-booking__chip[aria-pressed="true"] .rcm-booking__chip-dt {
	color: var(--color-text-inverse, #fff);
}

/* ---------------------------------------------------------------
 * Segmented control — first-visit / follow-up radios as buttons.
 * --------------------------------------------------------------- */
.rcm-booking__seg-option {
	position: relative;
	display: inline-flex;
}
.rcm-booking__seg-text { flex: 1 1 auto; }

/* Keep the native radio in the accessibility tree but off-screen. */
.rcm-booking__seg-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.rcm-booking__submit {
	align-self: flex-start;
	min-height: var(--target-min, 44px);
	padding: var(--space-2) var(--space-5);
	font: inherit;
	font-weight: var(--weight-semibold, 600);
	color: var(--color-text-inverse, #fff);
	background: var(--color-primary, #0B5FA5);
	border: 0;
	border-radius: var(--radius-md, 8px);
	cursor: pointer;
	transition: background var(--duration-base, 200ms) var(--ease-standard);
}
.rcm-booking__submit:hover { background: var(--color-primary-700, #094B84); }
.rcm-booking__submit:focus-visible {
	outline: var(--focus-ring, 3px solid #1E73B8);
	outline-offset: var(--focus-ring-offset, 2px);
}
.rcm-booking__submit:disabled { opacity: 0.6; cursor: default; }

.rcm-booking__status {
	margin: 0;
	font-size: var(--text-small);
	color: var(--color-error, #B42318);
}

.rcm-booking__msg {
	font-size: var(--text-body);
	padding: var(--space-3);
	border-radius: var(--radius-md, 8px);
	margin: 0;
}
.rcm-booking__msg--info { color: var(--color-text-muted, #4E5C69); }
.rcm-booking__msg--success { color: var(--color-success, #1B7F4B); background: var(--color-success-bg, #E8F5EE); }
.rcm-booking__msg--error { color: var(--color-error, #B42318); background: var(--color-error-bg, #FDECEA); }

.rcm-booking__noscript {
	font-size: var(--text-small);
	color: var(--color-text-muted, #4E5C69);
}

/* Honeypot — off-screen but focusable for the rare keyboard bot. */
.rcm-booking__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}