/**
 * Booking panel styles.
 *
 * Every colour reads a theme.json token with a hard-coded fallback, so the panel
 * inherits the Eloria palette (and its light/dark variations) but still looks
 * right if the plugin is used with another theme.
 *
 * Type rules are written as `.eh-booking .eh-booking__x`, not `.eh-booking__x`.
 * Block themes routinely set body copy with a rule like `.eh-prose p` — one class
 * plus one element, which outranks a single class — and that silently blew every
 * paragraph in here up to the theme's body size. Two classes settles it without
 * resorting to !important.
 */
.eh-booking {
	--ehb-ink: var(--wp--preset--color--ink, #071b43);
	--ehb-soft: var(--wp--preset--color--ink-soft, #45577a);
	--ehb-faint: var(--wp--preset--color--ink-faint, #7a879c);
	--ehb-line: var(--wp--preset--color--line, #dce5e5);
	--ehb-surface: var(--wp--preset--color--surface, #fff);
	--ehb-tint: var(--wp--preset--color--surface-2, #edf3f2);
	--ehb-accent: var(--wp--preset--color--accent, #317b82);
	--ehb-accent-strong: var(--wp--preset--color--accent-strong, #26646b);
	--ehb-accent-soft: var(--wp--preset--color--accent-soft, #e6efee);
	--ehb-on-accent: var(--wp--preset--color--on-accent, #fff);
	--ehb-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--ehb-display: var(--wp--preset--font-family--display, Georgia, serif);

	/* Form controls get their own, darker line. The hairline used for dividers is
	   ~1.3:1 against white, which renders but is effectively invisible — WCAG 1.4.11
	   asks for 3:1 on the boundary of a control, and an input the eye cannot find is
	   a broken input. This token clears it at 3.6:1. */
	--ehb-control-line: var(--wp--preset--color--ink-faint, #7a879c);
}

/* ---------------------------------------------------------------- the opener */
.eh-booking__open {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
}
.eh-booking__open::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--ehb-cal) center / contain no-repeat;
	mask: var(--ehb-cal) center / contain no-repeat;
}
.eh-booking {
	--ehb-cal: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round"><rect x="2" y="3.5" width="12" height="10.5" rx="1.5"/><path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3"/></svg>');
}

/* ----------------------------------------------------------------- the panel */
.eh-booking__panel {
	margin-top: 24px;
	padding: clamp(20px, 3vw, 30px);
	background: var(--ehb-surface);
	border: 1px solid var(--ehb-line);
	border-radius: 20px;
	text-align: left;
	max-width: 520px;
	margin-inline: auto;
	color: var(--ehb-ink);
	box-shadow: 0 18px 44px -30px rgb(0 0 0 / 0.35);
}
.eh-booking__panel[hidden] { display: none; }
/* Inline: the panel *is* the content, so it needs no gap above it. */
.eh-booking--inline .eh-booking__panel { margin-top: 0; }

.eh-booking__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 8px 16px;
	margin-bottom: 20px;
}
.eh-booking .eh-booking__step {
	grid-column: 1 / -1;
	font-family: var(--ehb-mono);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ehb-accent-strong);
	margin: 0;
}
.eh-booking .eh-booking__title {
	font-family: var(--ehb-display);
	font-size: 1.125rem;
	line-height: 1.2;
	margin: 0;
	color: var(--ehb-ink);
}
.eh-booking .eh-booking__back {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--ehb-accent-strong);
	cursor: pointer;
	justify-self: end;
}
.eh-booking__back:hover { text-decoration: underline; }

/* -------------------------------------------------------------- month + grid */
.eh-booking__monthbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.eh-booking .eh-booking__month {
	font-weight: 600;
	font-size: 0.9375rem;
	margin: 0;
}
.eh-booking__nav {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--ehb-line);
	background: var(--ehb-surface);
	color: var(--ehb-ink);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.eh-booking__nav:hover:not(:disabled) {
	border-color: var(--ehb-accent);
	color: var(--ehb-accent-strong);
}
.eh-booking__nav:disabled { opacity: 0.35; cursor: default; }

.eh-booking__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.eh-booking .eh-booking__dow {
	font-family: var(--ehb-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ehb-faint);
	text-align: center;
	padding-bottom: 6px;
}
/* The pads size like the days so the leading row of a month is the same height
   as the rest of the grid. */
.eh-booking__pad {
	aspect-ratio: 1;
	width: 80%;
	margin-inline: auto;
}
.eh-booking .eh-booking__day {
	aspect-ratio: 1;
	/* 80% of the column rather than filling it: the circles read better with air
	   around them, and the row height follows because of the aspect ratio. */
	width: 80%;
	margin-inline: auto;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	/* Circles, matching the pill-shaped slot buttons on the next step. The
	   1:1 aspect ratio is what keeps them round rather than oval. */
	border-radius: 50%;
	background: transparent;
	color: var(--ehb-faint);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	cursor: default;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.eh-booking__day.is-free {
	background: var(--ehb-accent-soft);
	border-color: color-mix(in oklab, var(--ehb-accent) 20%, transparent);
	color: var(--ehb-accent-strong);
	font-weight: 600;
	cursor: pointer;
}
.eh-booking__day.is-free:hover,
.eh-booking__day.is-free:focus-visible {
	background: var(--ehb-accent);
	border-color: var(--ehb-accent);
	color: var(--ehb-on-accent);
}

/* ------------------------------------------------------------------- slots */
.eh-booking__slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
}
.eh-booking .eh-booking__slot {
	padding: 11px 8px;
	border: 1px solid var(--ehb-line);
	border-radius: 999px;
	background: var(--ehb-surface);
	color: var(--ehb-ink);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.eh-booking__slot:hover,
.eh-booking__slot:focus-visible {
	border-color: var(--ehb-accent);
	background: var(--ehb-accent);
	color: var(--ehb-on-accent);
}
.eh-booking .eh-booking__slot-time { display: block; }
/* The second reading is deliberately quieter: the practice time is the one being
   agreed, and two equally loud times on one button is a question, not an answer. */
.eh-booking .eh-booking__slot-alt {
	display: block;
	margin-top: 2px;
	font-size: 0.6875rem;
	color: var(--ehb-soft);
}
.eh-booking__slot:hover .eh-booking__slot-alt,
.eh-booking__slot:focus-visible .eh-booking__slot-alt { color: inherit; opacity: 0.85; }

/* -------------------------------------------------------------------- form */
.eh-booking .eh-booking__chosen {
	margin: 0 0 18px;
	padding: 11px 14px;
	border-radius: 12px;
	background: var(--ehb-tint);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--ehb-ink);
}
.eh-booking__form { display: grid; gap: 14px; }
.eh-booking__field { display: grid; gap: 6px; margin: 0; }
.eh-booking .eh-booking__field label {
	font-size: 0.75rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ehb-soft);
}
/* The type-qualified selectors are not decoration. A bare `input` rule loses to
   any theme or plugin reset that qualifies by type — which is common, and is why
   these fields kept rendering borderless on some installs while the textarea,
   which nothing was resetting, showed its border perfectly well. Attribute
   selectors put this at 0,3,1 and settle it. */
.eh-booking .eh-booking__field input[type="text"],
.eh-booking .eh-booking__field input[type="email"],
.eh-booking .eh-booking__field input[type="tel"],
.eh-booking .eh-booking__field input,
.eh-booking .eh-booking__field textarea {
	width: 100%;
	/* Without this the padding is added *outside* the 100%, so every field
	   overhangs the panel's right padding by the horizontal padding plus borders —
	   28px, with nothing to show for it. */
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid var(--ehb-control-line);
	border-radius: 12px;
	background: var(--ehb-surface);
	color: var(--ehb-ink);
	font: inherit;
	font-size: 0.9375rem;
	/* Belt and braces for the same problem: an inset ring draws the boundary even
	   if something strips the border outright, and `appearance: none` stops a
	   platform control style replacing it on iOS. */
	-webkit-appearance: none;
	appearance: none;
	box-shadow: inset 0 0 0 1px var(--ehb-control-line);
}
.eh-booking__field input:focus,
.eh-booking__field textarea:focus {
	outline: 2px solid var(--ehb-accent);
	outline-offset: 1px;
	border-color: var(--ehb-accent);
	box-shadow: inset 0 0 0 1px var(--ehb-accent);
}

/* Timezone picker in the meta row. */
.eh-booking .eh-booking__tzlabel { color: inherit; }
.eh-booking .eh-booking__tzpick {
	font: inherit;
	font-size: 0.8125rem;
	max-width: 100%;
	padding: 3px 6px;
	margin-left: 2px;
	border: 1px solid var(--ehb-control-line);
	border-radius: 8px;
	background: var(--ehb-surface);
	color: var(--ehb-ink);
}
.eh-booking .eh-booking__tzpick:focus-visible {
	outline: 2px solid var(--ehb-accent);
	outline-offset: 1px;
}
.eh-booking__field textarea { resize: vertical; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.eh-booking__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eh-booking__submit {
	justify-self: start;
	cursor: pointer;
}
.eh-booking__submit:disabled { opacity: 0.6; cursor: progress; }

/* ------------------------------------------------------------ status states */
.eh-booking .eh-booking__status,
.eh-booking .eh-booking__meta {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ehb-soft);
	margin: 14px 0 0;
}
.eh-booking .eh-booking__meta {
	font-family: var(--ehb-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--ehb-faint);
}
.eh-booking .eh-booking__error {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #b3261e;
	margin: 0;
}
.eh-booking__error[hidden] { display: none; }
.eh-booking .eh-booking__fallback { font-size: 0.8125rem; color: var(--ehb-soft); margin: 0; }

.eh-booking__done { display: grid; gap: 10px; }
.eh-booking .eh-booking__done-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.eh-booking .eh-booking__tick {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.8125rem;
	line-height: 1;
	background: var(--ehb-accent-soft);
	color: var(--ehb-accent-strong);
}

/* What happens next. A request is not an appointment, so the panel says what the
   visitor should expect rather than implying the time is settled. */
.eh-booking .eh-booking__next {
	margin: 4px 0 0;
	padding: 0 0 0 18px;
	color: var(--ehb-soft);
}
/* Sized on the li, not the ul. A block theme's body-copy rule is typically
   `.eh-prose li` — one class and one element — which beats anything inherited
   from the list, so styling the parent alone leaves these at body size. */
.eh-booking .eh-booking__next li {
	margin: 0 0 4px;
	font-size: 0.8125rem;
	line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
	.eh-booking__error { color: #ff9a91; }
}