/* Internal Forms v2 — front-end. Deliberately minimal so it inherits the theme. */

/* Accent colour token — themes can override this one variable to re-skin every
   interactive element. Falls back to the WP-admin blue.                         */
.intf-form-wrap {
	--intf-accent:       var(--wp--preset--color--primary, var(--wp-admin-theme-color, #2271b1));
	/* L8 - solid tint so selected states are visible on dark themes */
	--intf-accent-faint: color-mix(in srgb, var(--intf-accent) 12%, #ffffff);
	--intf-border:       #c3c4c7;
	--intf-radius:       6px;
	--intf-field-gap:    1.5rem;
	/* One horizontal gutter for every side-by-side layout (subfield grids,
	   horizontal options, column rows) so their edges line up down the form. */
	--intf-col-gap:      0.75rem;
	max-width: 640px;
	position: relative;
}

/* Browsers that don't support color-mix yet get a fixed tint. */
@supports not (color: color-mix(in srgb, red 10%, white)) {
	.intf-form-wrap { --intf-accent-faint: #e8f0f8; }
}

/* ---- Form title (rendered from the block's "Form title" setting) ---- */

.intf-form-title {
	color: var(--intf-accent);
	margin: 0 0 1rem;
	line-height: 1.2;
}

/* ---- Prose inside the form (heading / paragraph blocks) ---- */

.intf-form-wrap h1,
.intf-form-wrap h2,
.intf-form-wrap h3,
.intf-form-wrap h4,
.intf-form-wrap h5,
.intf-form-wrap h6 {
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.intf-form-wrap p {
	margin: 0 0 1rem;
	line-height: 1.6;
}

.intf-form-wrap h1:last-child,
.intf-form-wrap h2:last-child,
.intf-form-wrap h3:last-child,
.intf-form-wrap h4:last-child,
.intf-form-wrap h5:last-child,
.intf-form-wrap h6:last-child,
.intf-form-wrap p:last-child {
	margin-bottom: 0;
}

/* ---- Fields ---- */

.intf-field {
	margin: 0 0 var(--intf-field-gap);
}

.intf-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: inherit; /* labels can inherit; inputs & options reset explicitly */
}

.intf-required {
	color: #b32d2e;
}

/* ---- Text-like inputs and textarea ---- */

.intf-form input[type="text"],
.intf-form input[type="email"],
.intf-form input[type="tel"],
.intf-form input[type="url"],
.intf-form input[type="number"],
.intf-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.65rem;
	font: inherit;
	color: #1d2327;
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
	background: #fff;
}

.intf-form input:focus,
.intf-form select:focus,
.intf-form textarea:focus {
	outline: 2px solid var(--intf-accent);
	outline-offset: 1px;
	border-color: var(--intf-accent);
}

/* ---- Select — custom arrow ---- */

.intf-form select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 2.4rem 0.55rem 0.65rem; /* extra right room for the arrow */
	font: inherit;
	color: #1d2327;
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%2350575e' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.55rem center;
	background-size: 1.25em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* ---- Subfields (name / address) ---- */

.intf-subfields {
	display: grid;
	gap: 0.5rem var(--intf-col-gap);
}

.intf-subfields--name {
	grid-template-columns: 1fr 1fr;
}

.intf-subfields--address {
	grid-template-columns: 1fr 1fr;
}

/* Date of birth — Day / Month / Year dropdowns side by side (month wider). */
.intf-subfields--dob {
	grid-template-columns: 1fr 1.5fr 1fr;
}

/* Street, Address line 2, and Country span both columns */
.intf-subfields--address input:first-child,
.intf-subfields--address input:nth-child(2),
.intf-subfields--address .intf-address-country {
	grid-column: 1 / -1;
}

/* On narrow screens both subfield grids collapse to a single full-width column */
@media (max-width: 480px) {
	.intf-subfields--name,
	.intf-subfields--address,
	.intf-subfields--dob {
		grid-template-columns: 1fr;
	}

	/* Single-column — span rules become no-ops */
	.intf-subfields--address input:first-child,
	.intf-subfields--address input:nth-child(2),
	.intf-subfields--address .intf-address-country {
		grid-column: auto;
	}
}

/* Inputs inside subfields stretch to fill their cell */
.intf-subfields input {
	width: 100%;
	box-sizing: border-box;
}

/* ---- Options (radio / checkbox) ---- */

.intf-options {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.intf-options--horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.4rem var(--intf-col-gap);
}

/* Horizontal options share the row equally and fill its full width */
.intf-options--horizontal .intf-option {
	flex: 1 1 0;
	min-width: 7rem;
}

/* Each option row is a styled, tappable label */
.intf-option {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
	font-weight: 400;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
	user-select: none;
	-webkit-user-select: none;
	/* Reset — don't inherit white text from a dark parent group */
	color: #1d2327;
	background: #fff;
}

.intf-option:hover {
	background: var(--intf-accent-faint);
	border-color: var(--intf-accent);
}

/* Highlight the row when its control is checked */
.intf-option:has(input:checked) {
	background: var(--intf-accent-faint);
	border-color: var(--intf-accent);
}

/* Fallback for browsers without :has — JS adds .intf-option--checked */
.intf-option--checked {
	background: var(--intf-accent-faint);
	border-color: var(--intf-accent);
}

/* The native input — sized up; accent-color picks up the theme primary */
.intf-option input[type="radio"],
.intf-option input[type="checkbox"] {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	margin: 0;
	cursor: pointer;
	accent-color: var(--intf-accent);
}

/* ---- Multi-column rows (core/columns inside the form) ---- */

/* The whole row behaves exactly like one .intf-field: same bottom margin,
   no top margin. Columns sit side by side with a consistent horizontal gap. */
.intf-form-wrap .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;        /* labels line up across the row */
	gap: var(--intf-field-gap) var(--intf-col-gap); /* row gap when wrapping, shared column gutter */
	margin: 0 0 var(--intf-field-gap);
	/* Override whatever the theme's --wp--style--block-gap sets */
	--wp--style--block-gap: var(--intf-col-gap);
}

.intf-form-wrap .wp-block-columns > .wp-block-column {
	flex: 1 1 0;     /* every column shares the row equally, any count (2/3/4…) */
	min-width: 0;    /* prevent overflow blowout on narrow inputs */
	padding: 0;
	margin: 0;
}

/* A field inside a column must NOT add its own bottom margin — the row's
   margin (above) provides the spacing, so it matches a standalone field. */
.intf-form-wrap .wp-block-column > .intf-field {
	margin-bottom: 0;
}

/* If a column stacks several fields, restore spacing between them
   (only the last one in the column is flush). */
.intf-form-wrap .wp-block-column > .intf-field:not(:last-child) {
	margin-bottom: var(--intf-field-gap);
}

/* On narrow viewports, stack columns and restore per-field vertical rhythm */
@media (max-width: 600px) {
	.intf-form-wrap .wp-block-columns {
		flex-direction: column;
		gap: 0;       /* vertical rhythm handled by .intf-field margin below */
		margin-bottom: 0;
	}

	.intf-form-wrap .wp-block-column {
		width: 100%;
		flex: none;
	}

	/* Each field regains its own bottom margin when stacked */
	.intf-form-wrap .wp-block-column > .intf-field {
		margin-bottom: var(--intf-field-gap);
	}
}

/* ---- Multi-column rows (core/group with flex layout inside the form) ---- */

/* Themes commonly add heavy padding and a full-width breakout to .wp-block-group.
   Undo all of that for any group inside the form so it lines up with the
   standalone fields. !important is required to beat the theme's !important rules. */
.intf-form-wrap .wp-block-group {
	padding: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* A horizontal (flex) group of fields behaves exactly like one field row:
   same bottom margin as a standalone field, no top margin. */
.intf-form-wrap .wp-block-group.is-layout-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--intf-field-gap) var(--intf-col-gap);
	margin-top: 0 !important;
	margin-bottom: var(--intf-field-gap) !important;
}

/* Each field shares the row equally (works for 2, 3, 4…) and drops its own
   bottom margin — the row margin above provides the spacing. */
.intf-form-wrap .wp-block-group.is-layout-flex > .intf-field {
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 0;
}

/* Stack on narrow screens and restore per-field vertical rhythm */
@media (max-width: 600px) {
	.intf-form-wrap .wp-block-group.is-layout-flex {
		flex-direction: column;
		gap: 0;
		margin-bottom: 0 !important;
	}

	.intf-form-wrap .wp-block-group.is-layout-flex > .intf-field {
		flex: none;
		width: 100%;
		margin-bottom: var(--intf-field-gap);
	}
}

/* ---- Consistent vertical rhythm for default / drag-and-drop rows ----
   The form manages spacing via .intf-field and row bottom margins. WordPress
   core (and themes) ALSO add a top margin to every child of a default
   (flow / constrained) layout via --wp--style--block-gap — including the form
   body itself and any Group dropped in as a row — which doubles the gap between
   rows. Strip that injected top margin so every row, however it's built, gets a
   single consistent --intf-field-gap. !important beats themes' own block-gap. */
.intf-form-wrap .is-layout-flow > * + *,
.intf-form-wrap .is-layout-constrained > * + * {
	margin-block-start: 0 !important;
}

/* A default (stacked) Group used to wrap fields: own rhythm, flush at the end. */
.intf-form-wrap .wp-block-group.is-layout-flow,
.intf-form-wrap .wp-block-group.is-layout-constrained {
	margin-top: 0 !important;
	margin-bottom: var(--intf-field-gap) !important;
}
.intf-form-wrap .wp-block-group.is-layout-flow > .intf-field,
.intf-form-wrap .wp-block-group.is-layout-constrained > .intf-field {
	margin-bottom: var(--intf-field-gap);
}
.intf-form-wrap .wp-block-group.is-layout-flow > .intf-field:last-child,
.intf-form-wrap .wp-block-group.is-layout-constrained > .intf-field:last-child {
	margin-bottom: 0;
}

/* ---- Date range ---- */

.intf-subfields--daterange {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
	.intf-subfields--daterange {
		grid-template-columns: 1fr;
	}
}

/* ---- Signature fallback (typed name for non-drawing users) ---- */

.intf-signature-fallback {
	margin-top: 0.5rem;
}

.intf-signature-fallback__toggle {
	font-size: 0.85em;
	color: #50575e;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.intf-signature-fallback__toggle:hover {
	color: var(--intf-accent);
}

.intf-signature-fallback input[type="text"] {
	margin-top: 0.4rem;
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.65rem;
	font: inherit;
	color: #1d2327;
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
	background: #fff;
}

/* ---- Signature pad ---- */

.intf-signature-wrap {
	position: relative;
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
	background: #fff;
	overflow: hidden;
}

.intf-signature-canvas {
	display: block;
	width: 100%;
	height: 150px;
	cursor: crosshair;
	touch-action: none;
	outline: none;
}

/* Visible focus ring for keyboard users */
.intf-signature-canvas:focus-visible {
	outline: 2px solid var(--intf-accent);
	outline-offset: 2px;
}

/* Visual indicator when keyboard draw-mode is active */
.intf-signature-canvas--drawing {
	outline: 2px solid var(--intf-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--intf-accent-faint);
}

/* Keyboard status bar below the canvas */
.intf-signature-kb-status {
	margin: 0.3rem 0 0;
	font-size: 0.78em;
	color: #50575e;
	font-style: italic;
}
.intf-signature-canvas + p {
	padding: 0 1rem;
	text-align: center;
}
.intf-signature-clear {
	position: absolute;
	top: 0.4rem;
	right: 0.5rem;
	font: inherit;
	font-size: 0.75em;
	padding: 0.2rem 0.55rem;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--intf-border);
	border-radius: 4px;
	cursor: pointer;
	color: #50575e;
	transition: background 0.1s;
}

.intf-signature-clear:hover {
	background: #fff;
	border-color: #50575e;
}

/* ---- GDPR consent ---- */

.intf-option--gdpr {
	border-color: var(--intf-border);
	background: #fafafa;
}

.intf-option--gdpr a {
	color: var(--intf-accent);
}

/* ---- Star rating ---- */

.intf-rating {
	display: flex;
	gap: 0.15em;
}

.intf-rating__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.intf-rating__star {
	font-size: 2em;
	color: #8c8f94; /* unselected star — 3.4:1 on white (WCAG 1.4.11 non-text contrast) */
	cursor: pointer;
	transition: color 0.1s, transform 0.1s;
	user-select: none;
	-webkit-user-select: none;
	line-height: 1;
}

/* Filled and preview states — controlled entirely by JS classes */
.intf-rating__star--filled {
	color: #f5a623;
}

.intf-rating__star--preview {
	color: #f5a623;
	opacity: 0.65;
}

.intf-rating__star:hover {
	transform: scale( 1.15 );
}

/* ---- Multi-select ---- */

.intf-form select.intf-multiselect {
	height: auto;
	min-height: 100px;
}

/* ---- Image select ---- */

.intf-imageselect {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.intf-imageselect__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	border: 2px solid var(--intf-border);
	border-radius: var(--intf-radius);
	padding: 0.5rem;
	transition: border-color 0.12s, background 0.12s;
	text-align: center;
	min-width: 80px;
	max-width: 140px;
	color: #1d2327;
	background: #fff;
}

.intf-imageselect__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.intf-imageselect__item:has(.intf-imageselect__input:checked),
.intf-imageselect__item--selected {
	border-color: var(--intf-accent);
	background: var(--intf-accent-faint);
}

.intf-imageselect__img {
	width: 100%;
	max-width: 120px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.intf-imageselect__label {
	font-size: 0.85em;
}

/* ---- Matrix / grid ---- */

.intf-matrix-wrap {
	overflow-x: auto;
	border-radius: var(--intf-radius);
	border: 1px solid var(--intf-border);
}

.intf-matrix {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

.intf-matrix th,
.intf-matrix td {
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--intf-border);
	border-right: 1px solid var(--intf-border);
	text-align: center;
	color: #1d2327;
}

.intf-matrix th:last-child,
.intf-matrix td:last-child {
	border-right: none;
}

.intf-matrix thead tr {
	background: #f6f7f7;
}

.intf-matrix thead th {
	font-weight: 600;
	font-size: 0.85em;
	letter-spacing: 0.02em;
	color: #3c434a;
}

.intf-matrix tbody tr:last-child td,
.intf-matrix tbody tr:last-child th {
	border-bottom: none;
}

.intf-matrix tbody th {
	text-align: left;
	font-weight: 500;
	background: #fafafa;
	min-width: 8rem;
}

/* Radio cell — plain appearance; JS adds --selected class */
.intf-matrix td {
	background: #ffffff;
	transition: background 0.12s;
	cursor: pointer;
}

.intf-matrix td:hover {
	background: var(--intf-accent-faint);
}

/* Selected cell gets the accent highlight */
.intf-matrix td.intf-matrix__cell--selected {
	background: var(--intf-accent-faint);
}

.intf-matrix td.intf-matrix__cell--selected input[type="radio"] {
	accent-color: var(--intf-accent);
}

/* Hide native radio and replace with a custom circle */
.intf-matrix td input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid #c3c4c7;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
	display: block;
	margin: 0 auto;
	position: relative;
}

.intf-matrix td input[type="radio"]:checked {
	border-color: var(--intf-accent);
	background: var(--intf-accent);
	box-shadow: inset 0 0 0 3px #fff;
}

.intf-matrix td input[type="radio"]:focus-visible {
	outline: 2px solid var(--intf-accent);
	outline-offset: 2px;
}

/* ---- Custom availability picker ---- */

.intf-appt-picker {
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
	overflow: hidden;
	background: #fff;
}

.intf-appt-picker__desc {
	margin: 1rem 0 !important;
	padding: 0 1rem !important;
	line-height: 1.25;
}

.intf-appt-picker__tz {
	margin: 0.75rem 0 !important;
	padding: 0 1rem !important;
	font-size: 0.85em;
	opacity: 0.75;
}

/* Once a slot is chosen, the calendar stays in place (so the form doesn't
   jump) but is faded and non-interactive until "Change" is clicked. */
.intf-appt-picker--locked .intf-appt-picker__cal,
.intf-appt-picker--locked .intf-appt-picker__slots {
	opacity: 0.5;
	filter: grayscale( 1 );
	pointer-events: none;
	user-select: none;
	transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Navigation bar */
.intf-appt-picker__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.65rem 0.9rem;
	background: var(--intf-accent);
	color: #fff;
}

.intf-appt-picker__prev,
.intf-appt-picker__next {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.3rem;
	border-radius: 4px;
	transition: background 0.15s;
}

.intf-appt-picker__prev:hover,
.intf-appt-picker__next:hover {
	background: rgba(255,255,255,.2);
}

.intf-appt-picker__prev:disabled,
.intf-appt-picker__next:disabled {
	opacity: 0.35;
	cursor: default;
}

.intf-appt-picker__month {
	font-weight: 600;
	font-size: 1em;
}

/* Day-of-week header */
.intf-appt-picker__dow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: var(--intf-accent-faint);
	border-bottom: 1px solid var(--intf-border);
}

.intf-appt-picker__dow span {
	text-align: center;
	font-size: 0.75em;
	font-weight: 600;
	color: #646970;
	padding: 0.4rem 0;
}

/* Day grid */
.intf-appt-picker__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	padding: 6px;
	min-height: 180px;
	position: relative;
}

.intf-appt-picker__grid--loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,.7);
	display: flex;
	align-items: center;
	justify-content: center;
}

.intf-appt-picker__cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85em;
	border-radius: 50%;
	transition: background 0.12s, color 0.12s;
}

.intf-appt-picker__cell--empty {
	background: none;
}

.intf-appt-picker__cell--disabled,
.intf-appt-picker__cell--disabled span {
	color: #c3c4c7;
	cursor: default;
	background: none;
	border: none;
}

.intf-appt-picker__cell--available {
	background: var(--intf-accent-faint);
	border: 1px solid transparent;
	color: var(--intf-accent);
	font-weight: 600;
	cursor: pointer;
}

.intf-appt-picker__cell--available:hover,
.intf-appt-picker__cell--available:focus {
	background: var(--intf-accent);
	color: #fff;
	outline: none;
}

.intf-appt-picker__cell--active {
	background: var(--intf-accent) !important;
	color: #fff !important;
	border-color: var(--intf-accent) !important;
}

/* Time slots */
.intf-appt-picker__slots {
	border-top: 1px solid var(--intf-border);
	padding: 0.75rem 0.9rem;
	background: #fafafa;
}

.intf-appt-picker__slot-heading {
	margin: 0 0 0.6rem;
	font-weight: 600;
	font-size: 0.9em;
	color: #1d2327;
}

.intf-appt-picker__slot-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.intf-appt-picker__slot {
	padding: 0.4rem 0.9rem;
	border: 2px solid var(--intf-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--intf-accent);
	font-size: 0.88em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.intf-appt-picker__slot:hover,
.intf-appt-picker__slot:focus {
	background: var(--intf-accent);
	color: #fff;
	outline: none;
}

/* Chosen state */
.intf-appt-picker__chosen {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 0.9rem;
	border-top: 1px solid var(--intf-border);
	/* Neutral confirmation — deliberately does NOT use the theme accent. */
	background: #f6f7f7;
	font-size: 0.9em;
}

.intf-appt-picker__chosen-icon {
	/* Success green rather than the theme accent. */
	color: #1a7f37;
	font-size: 1.1em;
	font-weight: 700;
}

.intf-appt-picker__chosen-text {
	flex: 1;
	font-weight: 600;
	color: #1d2327;
}

.intf-appt-picker__clear {
	background: none;
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
	padding: 0.2rem 0.6rem;
	font-size: 0.8em;
	cursor: pointer;
	color: #646970;
}

.intf-appt-picker__clear:hover {
	border-color: var(--intf-accent);
	color: var(--intf-accent);
}

/* ---- Google Calendar appointment ---- */

.intf-appointment {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.intf-appointment__frame {
	width: 100%;
	display: block;
	border-radius: var(--intf-radius);
	border: 1px solid var(--intf-border);
	background: #ffffff;
}

.intf-appointment__confirm {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9em;
	color: #1d2327;
	cursor: pointer;
	padding: 0.65rem 0.85rem;
	border: 2px solid var(--intf-border);
	border-radius: var(--intf-radius);
	background: #fff;
	transition: border-color 0.15s, background 0.15s;
}

.intf-appointment__confirm:has(.intf-appointment__check:checked) {
	border-color: var(--intf-accent);
	background: var(--intf-accent-faint);
}

.intf-appointment__check {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	accent-color: var(--intf-accent);
	cursor: pointer;
}

.intf-appointment__placeholder,
.intf-appointment__error {
	margin: 0;
	font-style: italic;
	color: #646970;
}

.intf-appointment__error {
	color: #b32d2e;
}

/* ---- Tooltip ---- */

.intf-label {
	position: relative;
}

.intf-tooltip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: transparent;
	font-size: 0.75em;
	font-weight: 700;
	cursor: pointer;
	color: #50575e;
	vertical-align: middle;
	margin-left: 0.3em;
	padding: 0;
	line-height: 1;
	transition: background 0.1s, color 0.1s;
}

.intf-tooltip-btn:hover,
.intf-tooltip-btn[aria-expanded="true"] {
	background: var(--intf-accent);
	border-color: var(--intf-accent);
	color: #fff;
}

.intf-tooltip {
	display: none;
	position: absolute;
	z-index: 100;
	left: 0;
	top: calc( 100% + 4px );
	min-width: 200px;
	max-width: 320px;
	padding: 0.5rem 0.75rem;
	background: #1d2327;
	color: #fff;
	font-size: 0.82em;
	font-weight: 400;
	line-height: 1.5;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
	pointer-events: none;
}

/* ---- Smooth submit — loading state ---- */

.intf-form--loading .intf-field input,
.intf-form--loading .intf-field select,
.intf-form--loading .intf-field textarea {
	opacity: 0.6;
	pointer-events: none;
}

.intf-spinner {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: intf-spin 0.6s linear infinite;
	vertical-align: middle;
}

@keyframes intf-spin {
	to { transform: rotate(360deg); }
}

/* ---- Autosave toast ---- */

.intf-autosave-toast {
	margin: 0.4rem 0 0;
	font-size: 0.8em;
	color: #1a7f37;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* ---- Section divider ---- */

.intf-section {
	margin: 0.25rem 0 1rem;
	padding-bottom: 0.65rem;
	border-bottom: 2px solid var(--intf-accent);
}

.intf-section__title {
	font-size: 1.05em;
	font-weight: 700;
	color: var(--intf-accent);
	margin-bottom: 0.2rem;
}

.intf-section__desc {
	margin: 0;
	font-size: 0.875em;
	opacity: 0.75;
	line-height: 1.5;
	color: #1d2327;
}

/* ---- File upload — styled drop zone ---- */

/* Hide the native input; keep it keyboard-accessible via the visible label */
.intf-file-zone {
	position: relative;
}

/* The native input is visually hidden but remains in the tab order and
   keyboard-operable. The label is the visual target; clicking it
   triggers the input via the for= association. */
.intf-file-zone input[type="file"].intf-file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.intf-file-zone__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 1.5rem 1rem;
	border: 2px dashed var(--intf-border);
	border-radius: var(--intf-radius);
	background: #fafafa;
	color: #50575e;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
	/* Label receives no pointer events — the input above it does */
	pointer-events: none;
}

/* Visible focus ring on the hidden file input so keyboard users can see it */
.intf-file-zone input[type="file"].intf-file:focus-visible + .intf-file-zone__label {
	outline: 2px solid var(--intf-accent);
	outline-offset: 2px;
	border-color: var(--intf-accent);
}

/* Re-enable pointer events on everything *except* the input */
.intf-file-zone:hover .intf-file-zone__label,
.intf-file-zone--drag .intf-file-zone__label {
	border-color: var(--intf-accent);
	background: var(--intf-accent-faint);
}

.intf-file-zone--drag .intf-file-zone__label {
	border-style: solid;
}

.intf-file-zone__icon {
	color: var(--intf-accent);
	opacity: 0.7;
	line-height: 1;
}

.intf-file-zone__cta {
	font-weight: 600;
	/* Darkened so theme accents like #007cba still clear 4.5:1 on the zone's #fafafa. */
	color: color-mix(in srgb, var(--intf-accent) 80%, #000000);
	font-size: 0.95em;
}

.intf-file-zone__or {
	font-size: 0.82em;
	color: #646970; /* ~5.2:1 on white — meets WCAG AA */
}

.intf-file-zone__hint {
	font-size: 0.78em;
	color: #646970; /* solid colour, not opacity — ~5:1 on #fafafa (WCAG AA) */
	margin-top: 0.2rem;
}

/* File list — shown after selection */
.intf-file-zone__list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.intf-file-zone__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	background: var(--intf-accent-faint);
	border: 1px solid var(--intf-accent);
	border-radius: 20px;
	font-size: 0.8em;
	color: #1d2327;
}

/* When files are selected, update the zone appearance */
.intf-file-zone--has-files .intf-file-zone__label {
	border-color: var(--intf-accent);
	border-style: solid;
	background: var(--intf-accent-faint);
	padding: 0.75rem 1rem;
}

.intf-file-zone--has-files .intf-file-zone__or {
	display: none;
}

/* ---- Inline validation error messages ---- */

.intf-error {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	/* Fixed rem size so it does NOT scale with a theme that inflates the
	   form's base font (which made these boxes huge). */
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	margin: 0.35rem 0 0 !important;
	padding: 0.4rem 0.6rem !important;
	color: #b32d2e !important;
	background: #fff5f5 !important;
	border: 1px solid #f1b8b8 !important;
	border-radius: var(--intf-radius) !important;
	box-sizing: border-box;
	box-shadow: none !important;
}

.intf-error::before {
	content: '✕';
	flex-shrink: 0;
	font-size: 0.9em;
	font-style: normal;
	line-height: 1.5;
	opacity: 0.7;
}

/* Neutralise any decorative icon the theme injects after alert paragraphs
   (the stray bold "✗" on the right of the box). */
.intf-error::after {
	content: none !important;
	display: none !important;
}

/* Red border on invalid inputs */
.intf-form input[aria-invalid="true"],
.intf-form select[aria-invalid="true"],
.intf-form textarea[aria-invalid="true"] {
	border-color: #b32d2e;
	outline-color: #b32d2e;
}

/* ---- Help text ---- */

.intf-help {
	margin: 0.3rem 0 0;
	font-size: 0.85em;
	color: #50575e; /* explicit — meets 4.5:1 on white; better than opacity which can fall below */
}

/* ---- Pagination — step indicators ---- */

.intf-steps {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
	align-items: center;
	justify-content: center;
}

.intf-step {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--intf-border);
	border-radius: 20px;
	background: #f6f7f7;
	font: inherit;
	font-size: 0.85em;
	color: #50575e;
	cursor: default;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Circle indicator — inherits currentColor so each state drives its own look */
.intf-step::before {
	content: '';
	display: block;
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: transparent;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}

/* Current page — filled circle the same colour as the text (white on accent bg) */
.intf-step--active {
	background: var(--intf-accent);
	border-color: var(--intf-accent);
	color: #fff;
	font-weight: 600;
}

.intf-step--active::before {
	background: currentColor;
	border-color: currentColor;
}

/* Past pages — filled circle in the done/green text colour */
.intf-step--done {
	background: #d7f0e3;
	border-color: #68cb9b;
	color: #1a7f37;
	cursor: pointer;
}

.intf-step--done::before {
	background: currentColor;
	border-color: currentColor;
}

.intf-step:disabled,
.intf-step[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---- Pagination — page visibility ---- */

.intf-page {
	display: block;
}

/* ---- Actions bar ---- */

.intf-actions {
	display: flex;
	gap: 0.65rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
	align-items: center;
}

.intf-submit,
.intf-next,
.intf-prev {
	font: inherit;
	cursor: pointer;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: var(--intf-radius);
	transition: background 0.15s ease;
}

.intf-submit,
.intf-next {
	background: var(--intf-accent);
	color: #fff;
}

.intf-submit:hover,
.intf-next:hover {
	filter: brightness(0.88);
}

.intf-prev {
	background: #f6f7f7;
	color: #1d2327;
	border: 1px solid var(--intf-border);
}

.intf-prev:hover {
	background: #edeff0;
}

.intf-submit:disabled,
.intf-next:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Higher specificity removes the need for !important */
.intf-actions .intf-submit.intf-submit--hidden {
	display: none;
}

/* ---- Messages ---- */

.intf-message {
	margin-top: 0.9rem;
	font-weight: 500;
	font-size: 1.25rem;
	white-space: pre-line; /* render line breaks in multi-line success messages */
}
.intf-message:empty {
	margin-top: 0;
}

.intf-message--success { color: #000000; }
.intf-message--error   { color: #b32d2e; }
.intf-message--info    { color: #50575e; }

/* ---- Inline validation indicators ---- */

.intf-valid-indicator {
	position: absolute;
	right:   0.65rem;
	top:     50%;
	transform: translateY(-50%);
	font-size: 0.95em;
	font-weight: 700;
	pointer-events: none;
	line-height: 1;
}

/* Nudge the indicator below the label for fields that have one */
.intf-field .intf-valid-indicator {
	top: auto;
	bottom: 0.6rem;
	transform: none;
}

.intf-valid-indicator--ok  { color: #1a7f37; }
.intf-valid-indicator--err { color: #b32d2e; }

/* Give inputs a touch of right padding so text doesn't run under the indicator */
.intf-field:has(.intf-valid-indicator) input[type="text"],
.intf-field:has(.intf-valid-indicator) input[type="email"],
.intf-field:has(.intf-valid-indicator) input[type="tel"],
.intf-field:has(.intf-valid-indicator) input[type="number"],
.intf-field:has(.intf-valid-indicator) select {
	padding-right: 2rem;
}

/* ---- Character count ---- */

.intf-char-count {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.78em;
	opacity: 0.6;
	text-align: right;
	color: #1d2327;
	transition: color 0.15s;
}

.intf-char-count--warn  { color: #6b5200; } /* darkened for 4.5:1 on white */
.intf-char-count--limit { opacity: 1; color: #b32d2e; font-weight: 600; }

/* ---- Progress bar ---- */

.intf-steps--bar {
	display: block;
	margin-bottom: 1.5rem;
}

.intf-steps__bar {
	height: 6px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
}

.intf-steps__bar-fill {
	height: 100%;
	width: 0%;
	background: var(--intf-accent);
	border-radius: 3px;
	transition: width 0.35s ease;
}

.intf-steps__bar-label {
	margin-top: 0.4rem;
	font-size: 0.82em;
	color: #50575e;
	text-align: right;
}

/* ---- Calculated field ---- */

.intf-calculated {
	margin: 0;
}

.intf-calculated__value {
	display: block;
	padding: 0.55rem 0.65rem;
	font: inherit;
	font-weight: 600;
	color: var(--intf-accent);
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
	background: #f6f7f7;
	min-height: 2.4rem;
}

/* ---- Hidden field — invisible, takes no space ---- */

.intf-field--hidden {
	display: none !important;
}

/* ---- Conditional field visibility — smooth reveal/hide ---- */

.intf-field[data-conditions] {
	/* Animate via max-height + opacity so height collapses cleanly.
	   2000px is a generous cap that covers even large repeater groups. */
	overflow:      hidden;
	max-height:    2000px;
	opacity:       1;
	transition:    max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}

.intf-field[data-conditions][style*="display:none"],
.intf-field[data-conditions][style*="display: none"] {
	/* JS sets display:none; we intercept with these transitions first */
	max-height: 0 !important;
	opacity:    0 !important;
	margin:     0 !important;
}

/* ---- Honeypot ---- */

.intf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Repeater ---- */

.intf-repeater {
	margin-bottom: var(--intf-field-gap);
}

.intf-repeater__label {
	font-weight: 600;
	margin-bottom: 0.65rem;
	color: inherit;
}

.intf-repeater__row {
	position: relative;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 1rem 1rem 0.5rem;
	margin-bottom: 0.65rem;
	background: #fafafa;
	color: #1d2327; /* reset — don't inherit white text from a dark parent group */
}

.intf-repeater__remove {
	font: inherit;
	font-size: 0.8em;
	cursor: pointer;
	background: none;
	border: 1px solid var(--intf-border);
	border-radius: 4px;
	color: #b32d2e;
	padding: 0.2rem 0.55rem;
	margin-bottom: 0.5rem;
	transition: background 0.1s;
}

.intf-repeater__remove:hover {
	background: #fce8e8;
}

.intf-repeater__add {
	font: inherit;
	cursor: pointer;
	background: none;
	border: 1px dashed var(--intf-accent);
	border-radius: var(--intf-radius);
	color: var(--intf-accent);
	padding: 0.45rem 1rem;
	width: 100%;
	text-align: center;
	transition: background 0.15s;
}

.intf-repeater__add:hover {
	background: var(--intf-accent-faint);
}

/* ----------------------------------------------------------------
   Booking management (cancel / reschedule) panel
   ---------------------------------------------------------------- */
.intf-manage {
	max-width: 40rem;
	margin: 1rem auto;
}

.intf-manage__title {
	margin: 0 0 0.75em;
}

.intf-manage__current {
	margin: 0 0 1.25em;
}

.intf-manage__section {
	margin: 2em 0 0;
	padding: 1.5em;
	border: 1px solid #dcdcde;
	border-radius: var(--intf-radius);
}

.intf-manage__section + .intf-manage__section {
	margin-top: 1.5em;
}

.intf-manage__section h3 {
	margin: 0 0 0.5em;
	font-size: 1.15em;
	line-height: 1.3;
}

.intf-manage__section p {
	margin: 0 0 1.25em;
}

.intf-manage__cancel {
	border-color: #f0b3b4;
	background: #fdf6f6;
}

/* Scoped under .intf-manage so theme `button` rules don't override the
   plugin's own button look (matches .intf-submit / .intf-prev). */
.intf-manage .intf-manage__btn {
	font: inherit;
	display: inline-block;
	margin: 0;
	padding: 0.6rem 1.4rem;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var(--intf-radius);
	cursor: pointer;
	transition: background 0.15s ease, filter 0.15s ease;
}

.intf-manage .intf-manage__btn--primary {
	background: var(--intf-accent);
	color: #fff;
}

.intf-manage .intf-manage__btn--primary:hover {
	filter: brightness(0.88);
}

.intf-manage .intf-manage__btn--danger {
	background: #fff;
	color: #d63638;
	border-color: #d63638;
}

.intf-manage .intf-manage__btn--danger:hover {
	background: #d63638;
	color: #fff;
}

.intf-manage .intf-manage__btn:focus-visible {
	outline: 2px solid var(--intf-accent);
	outline-offset: 2px;
}

/* The reschedule confirm button sits after the slot picker. */
.intf-manage__reschedule .intf-manage__btn {
	margin-top: 1.25em;
}

.intf-manage__notice {
	margin: 0 0 1.25em;
	padding: 0.75em 1em;
	border-radius: var(--intf-radius);
	border-left: 4px solid;
}

.intf-manage__notice--success {
	background: #edfaef;
	border-color: #00a32a;
}

.intf-manage__notice--error {
	background: #fcf0f1;
	border-color: #d63638;
}

/* ---- Range slider ---- */
.intf-range {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.intf-range__input {
	flex: 1 1 auto;
	accent-color: var(--intf-accent);
	cursor: pointer;
}

.intf-range__value {
	flex: 0 0 auto;
	min-width: 2.5em;
	padding: 0.2rem 0.5rem;
	text-align: center;
	font-weight: 600;
	background: var(--intf-accent-faint);
	border: 1px solid var(--intf-border);
	border-radius: var(--intf-radius);
}

/* Visually hidden but announced — don't rely on the theme defining this. */
.intf-form-wrap .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}