/*!
 * Bookmint — frontend design system.
 *
 * Shipped palette: espresso, brown, camel, cream
 * and paper, with sage for availability. Swiss-modernist structure —
 * rational grid, mathematical spacing, restrained colour, generous
 * whitespace.
 *
 * THEME ISOLATION
 * ---------------
 * Everything is scoped to `.bookmint`, and every selector carries the root
 * class three times. The arithmetic matters:
 *
 *   component  .bookmint.bookmint.bookmint .bookmint-foo   (0,4,0)
 *   reset      .bookmint.bookmint.bookmint p               (0,3,1)
 *   theme      .site .entry-content .post p                (0,3,1)
 *
 * Components out-rank the reset, so the reset can never flatten the design
 * it is meant to normalise; and both hold against the (0,3,1) selectors
 * real themes ship. A doubled root was NOT enough — it loses to (0,3,1)
 * outright.
 *
 * The typographic properties a theme is most likely to force with
 * `!important` are armoured on the component rules. Deliberately not on the
 * bare-element reset: `color: inherit !important` there would flatten every
 * component colour.
 *
 * The root token blocks stay at a single `.bookmint` on purpose. The
 * Settings screen prints its palette inline AFTER this sheet at the same
 * specificity, so it still wins — every armoured value reads from a custom
 * property, which is why the colour customiser keeps full control.
 *
 * RESPONSIVENESS
 * --------------
 * Plain `@media`. Container queries were the obvious fit for an embedded
 * widget, but `container-type` breaks intrinsic height measurement in page
 * builders -- Elementor sized the wrapping widget more than twice the form's
 * real height on mobile -- so the form keys off the viewport instead.
 *
 * No framework, no remote font, no CDN.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.bookmint {
	/* -- Colour. Overridden inline from plugin settings. ------------------ */
	--bookmint-primary: #5a3b29;
	--bookmint-primary-rgb: 90, 59, 41;
	--bookmint-primary-dark: #462e20;
	--bookmint-accent: #66785f;
	--bookmint-accent-rgb: 102, 120, 95;
	--bookmint-ink: #1f1d1a;
	--bookmint-muted: #6b6055;
	--bookmint-line: #d5cdc4;
	--bookmint-surface: #ffffff;
	--bookmint-canvas: #f8f4ed;

	/* -- Fixed semantic colour. Not user editable, all contrast checked. -- */
	--bookmint-field-line: #96826d;   /* Control boundaries — 3.68:1 on white.  */
	--bookmint-field-hover: #7a6a58;  /* Hover boundary.                        */
	--bookmint-accent-ink: #4a5842;   /* Success TEXT — 7.59:1.                 */
	--bookmint-danger: #9d4a3f;       /* Brand terracotta — 6.03:1.             */
	--bookmint-danger-rgb: 157, 74, 63;
	--bookmint-danger-ink: #7d3a31;
	--bookmint-danger-soft: #fdf1ef;
	--bookmint-success-soft: #eef2ec;
	--bookmint-cream: #efe7da;
	--bookmint-placeholder: #8a8078;  /* 4.6:1 on white.                        */
	--bookmint-disabled: #9a9089;     /* Disabled dates — still legible.        */

	/* -- Geometry. -------------------------------------------------------- */
	--bookmint-radius: 16px;
	--bookmint-radius-sm: 10px;
	--bookmint-radius-xs: 6px;
	--bookmint-max: 880px;

	/* -- Spacing. 2 / 4 / 6 / 8 / 12 / 16 / 24 / 32 / 48. ------------------ */
	--bookmint-s-2xs: 2px;
	--bookmint-s-xs: 4px;
	--bookmint-s-sm: 6px;
	--bookmint-s-md: 8px;
	--bookmint-s-lg: 12px;
	--bookmint-s-xl: 16px;
	--bookmint-s-2xl: 24px;
	--bookmint-s-3xl: 32px;
	--bookmint-s-4xl: 48px;

	/* Block rhythm. Overridden by the density modifiers below. */
	--bookmint-pad: 32px;      /* Card padding.               */
	--bookmint-block: 48px;    /* Gap between numbered steps. */
	--bookmint-gap: 24px;      /* Gap between fields.         */

	/* -- Type. Seven steps, nothing between them. ------------------------- */
	--bookmint-font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bookmint-t-2xs: 11px;
	--bookmint-t-xs: 12px;
	--bookmint-t-sm: 13px;
	--bookmint-t-md: 14px;
	--bookmint-t-lg: 16px;
	--bookmint-t-xl: 20px;
	--bookmint-t-2xl: 24px;
	--bookmint-leading: 1.55;
	--bookmint-track-caps: 0.08em;
	--bookmint-track-tight: -0.02em;

	/* -- Elevation and motion. -------------------------------------------- */
	--bookmint-shadow: 0 1px 2px rgba(31, 29, 26, 0.04),
		0 12px 32px -12px rgba(31, 29, 26, 0.14);
	--bookmint-ring: 0 0 0 3px rgba(var(--bookmint-primary-rgb), 0.22);
	--bookmint-speed: 180ms;
	--bookmint-ease: cubic-bezier(0.4, 0, 0.2, 1);

}

/* Density lives here, not in the inline block: an inline <style> is printed
   AFTER the stylesheet at identical specificity, so emitting spacing there
   silently defeated every responsive override below. */
.bookmint.bookmint.bookmint.bookmint--compact {
	--bookmint-pad: 24px;
	--bookmint-block: 32px;
	--bookmint-gap: 16px;
}

.bookmint.bookmint.bookmint.bookmint--spacious {
	--bookmint-pad: 40px;
	--bookmint-block: 64px;
	--bookmint-gap: 32px;
}

/* ==========================================================================
   2. Scoped reset
   ========================================================================== */

.bookmint,
.bookmint.bookmint.bookmint *,
.bookmint.bookmint.bookmint *::before,
.bookmint.bookmint.bookmint *::after {
	box-sizing: border-box;
}

.bookmint {
	color: var(--bookmint-ink);
	font-family: var(--bookmint-font);
	font-size: var(--bookmint-t-lg);
	font-weight: 400;
	line-height: var(--bookmint-leading);
	margin: 0 auto;
	max-width: var(--bookmint-max);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Structural reset.
   Box properties AND typography: a theme that sets `font-family` or
   `line-height` directly on `p` beats plain inheritance, so resetting margins
   alone is not enough. Every value here is either `inherit` (so the container's
   own type flows down) or a neutral default. Component rules carry three
   classes and therefore out-rank this block. */
.bookmint.bookmint.bookmint h2,
.bookmint.bookmint.bookmint h3,
.bookmint.bookmint.bookmint h4,
.bookmint.bookmint.bookmint p,
.bookmint.bookmint.bookmint ul,
.bookmint.bookmint.bookmint ol,
.bookmint.bookmint.bookmint li,
.bookmint.bookmint.bookmint dl,
.bookmint.bookmint.bookmint dt,
.bookmint.bookmint.bookmint dd,
.bookmint.bookmint.bookmint div,
.bookmint.bookmint.bookmint span,
.bookmint.bookmint.bookmint label,
.bookmint.bookmint.bookmint legend,
.bookmint.bookmint.bookmint fieldset,
.bookmint.bookmint.bookmint section,
.bookmint.bookmint.bookmint header,
.bookmint.bookmint.bookmint table,
.bookmint.bookmint.bookmint thead,
.bookmint.bookmint.bookmint tbody,
.bookmint.bookmint.bookmint tr,
.bookmint.bookmint.bookmint th,
.bookmint.bookmint.bookmint td,
.bookmint.bookmint.bookmint abbr {
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	float: none;
	font-size: inherit;
	font-style: normal;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: inherit;
	list-style: none;
	margin: 0;
	max-width: none;
	padding: 0;
	text-align: inherit;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	vertical-align: baseline;
	width: auto;
}

/* Universal typeface armour. `!important` beats any non-important theme rule
   regardless of specificity, and three classes beat almost anything a theme
   could declare important. One declaration, and no theme font can reach in. */
.bookmint.bookmint.bookmint,
.bookmint.bookmint.bookmint *,
.bookmint.bookmint.bookmint *::before,
.bookmint.bookmint.bookmint *::after {
	box-sizing: border-box !important;
	font-family: var(--bookmint-font) !important;
}

/* Buttons are the other thing themes force. These four properties have no
   per-component variation in this design, so one armour rule covers them all. */
.bookmint.bookmint.bookmint button {
	letter-spacing: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-transform: none !important;
}

/* The honeypot must stay 1x1 whatever the theme forces on inputs; it is
   clipped either way, but an inflated box is one more thing to go wrong. */
.bookmint.bookmint.bookmint .bookmint-hp input {
	border: 0 !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	width: 1px !important;
}

/* The single deliberate exception. */
.bookmint.bookmint.bookmint .bookmint-ref__value {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
}

.bookmint.bookmint.bookmint h2 {
	color: var(--bookmint-ink);
	font-size: var(--bookmint-t-2xl);
	font-weight: 700;
	letter-spacing: var(--bookmint-track-tight);
	line-height: 1.25;
}

.bookmint.bookmint.bookmint h3 {
	color: var(--bookmint-ink);
	font-size: var(--bookmint-t-lg);
	font-weight: 600;
	letter-spacing: var(--bookmint-track-tight);
	line-height: 1.35;
}

/* The bare-element heading rules above are (0, 3, 1), which only TIES a real
   theme selector like `.site .entry-content .post h2` -- source order would
   decide. Both headings already carry a class in the markup, so hang the
   same declarations there for (0, 4, 0) and win outright. */
.bookmint.bookmint.bookmint .bookmint__title {
	color: var(--bookmint-ink) !important;
	font-size: var(--bookmint-t-2xl) !important;
	font-weight: 700 !important;
	letter-spacing: var(--bookmint-track-tight) !important;
	line-height: 1.25 !important;
	text-transform: none !important;
}

.bookmint.bookmint.bookmint .bookmint-block__title {
	color: var(--bookmint-ink) !important;
	font-size: var(--bookmint-t-lg) !important;
	font-weight: 600 !important;
	letter-spacing: var(--bookmint-track-tight) !important;
	line-height: 1.35 !important;
	text-transform: none !important;
}

.bookmint.bookmint.bookmint a {
	color: var(--bookmint-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bookmint.bookmint.bookmint a:hover {
	color: var(--bookmint-primary-dark) !important;
}

/* -- Armour: the properties themes most often force on bare elements. ----- */
.bookmint.bookmint.bookmint .bookmint-input,
.bookmint.bookmint.bookmint .bookmint-textarea,
.bookmint.bookmint.bookmint .bookmint-select {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-color: var(--bookmint-surface) !important;
	background-image: none !important;
	border: 1px solid var(--bookmint-field-line) !important;
	border-radius: var(--bookmint-radius-sm) !important;
	box-shadow: none !important;
	color: var(--bookmint-ink) !important;
	display: block !important;
	float: none !important;
	font-family: var(--bookmint-font) !important;
	font-size: var(--bookmint-t-lg) !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-height: 48px !important;
	padding: 12px 14px !important;
	text-align: left !important;
	text-transform: none !important;
	transition: border-color var(--bookmint-speed) var(--bookmint-ease),
		box-shadow var(--bookmint-speed) var(--bookmint-ease) !important;
	width: 100% !important;
}

.bookmint.bookmint.bookmint .bookmint-textarea {
	line-height: var(--bookmint-leading) !important;
	min-height: 132px !important;
	resize: vertical !important;
}

.bookmint.bookmint.bookmint .bookmint-select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b6055' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-position: right 12px center !important;
	background-repeat: no-repeat !important;
	background-size: 20px 20px !important;
	cursor: pointer !important;
	padding-right: 42px !important;
}

.bookmint.bookmint.bookmint .bookmint-input:hover,
.bookmint.bookmint.bookmint .bookmint-textarea:hover,
.bookmint.bookmint.bookmint .bookmint-select:hover {
	border-color: var(--bookmint-field-hover) !important;
}

/* A real outline, not just a ring: box-shadow is dropped in forced-colours
   mode and border-color is replaced by the system palette, which would leave
   no focus indicator at all. */
.bookmint.bookmint.bookmint .bookmint-input:focus-visible,
.bookmint.bookmint.bookmint .bookmint-textarea:focus-visible,
.bookmint.bookmint.bookmint .bookmint-select:focus-visible {
	border-color: var(--bookmint-primary) !important;
	box-shadow: var(--bookmint-ring) !important;
	outline: 2px solid var(--bookmint-primary) !important;
	outline-offset: 2px !important;
}

.bookmint.bookmint.bookmint [aria-invalid="true"] {
	border-color: var(--bookmint-danger) !important;
}

.bookmint.bookmint.bookmint .bookmint-input::placeholder,
.bookmint.bookmint.bookmint .bookmint-textarea::placeholder {
	color: var(--bookmint-placeholder) !important;
	opacity: 1;
}

.bookmint.bookmint.bookmint :focus-visible {
	outline: 2px solid var(--bookmint-primary) !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   3. Shell and masthead
   ========================================================================== */

.bookmint.bookmint.bookmint .bookmint__shell {
	background: var(--bookmint-surface);
	border: 1px solid var(--bookmint-line);
	border-radius: var(--bookmint-radius);
	overflow: hidden;
}

.bookmint.bookmint.bookmint.bookmint--shadow .bookmint__shell {
	box-shadow: var(--bookmint-shadow);
}

.bookmint.bookmint.bookmint .bookmint__masthead {
	align-items: flex-start;
	background: var(--bookmint-canvas);
	border-bottom: 1px solid var(--bookmint-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bookmint-s-xl);
	padding: var(--bookmint-pad);
}

.bookmint.bookmint.bookmint .bookmint__brand {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: var(--bookmint-s-xl);
	min-width: 0;
}

.bookmint.bookmint.bookmint .bookmint__logo {
	display: block;
	flex: 0 0 auto;
	height: auto;
	max-height: 60px;
	max-width: 200px;
	object-fit: contain;
	width: auto;
}

.bookmint.bookmint.bookmint .bookmint__headings {
	min-width: 0;
}

.bookmint.bookmint.bookmint .bookmint__intro {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-md) !important;
	margin-top: var(--bookmint-s-md);
	max-width: 52ch;
}

.bookmint.bookmint.bookmint .bookmint__tz {
	align-items: center;
	background: var(--bookmint-surface);
	border: 1px solid var(--bookmint-line);
	border-radius: 999px;
	color: var(--bookmint-ink) !important;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--bookmint-t-xs) !important;
	font-weight: 600 !important;
	gap: var(--bookmint-s-sm);
	padding: var(--bookmint-s-md) var(--bookmint-s-lg) var(--bookmint-s-md) 10px;
	white-space: nowrap;
}

.bookmint.bookmint.bookmint .bookmint__tz svg {
	color: var(--bookmint-primary) !important;
	flex: 0 0 auto;
	height: 14px;
	width: 14px;
}

/* -- How it works -------------------------------------------------------- */

/* One horizontal padding value shared with the masthead and the form, so the
   whole card reads on a single vertical axis. */
.bookmint.bookmint.bookmint .bookmint__steps {
	background: var(--bookmint-surface);
	border-bottom: 1px solid var(--bookmint-line);
	display: grid;
	gap: var(--bookmint-s-2xl);
	/* Three across when there is room, then two, then one -- decided by the
	   space available rather than by the viewport. */
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	padding: var(--bookmint-s-2xl) var(--bookmint-pad);
}

/* Badge beside the title, description aligned under the title — the same
   shape whether the strip is three across or stacked. */
.bookmint.bookmint.bookmint .bookmint__step {
	display: grid;
	gap: var(--bookmint-s-2xs) var(--bookmint-s-lg);
	grid-template-areas:
		"num title"
		"num desc";
	grid-template-columns: auto minmax(0, 1fr);
	min-width: 0;
}

.bookmint.bookmint.bookmint .bookmint__step-n {
	align-items: center;
	background: var(--bookmint-cream);
	border-radius: 999px;
	color: var(--bookmint-primary-dark) !important;
	display: inline-flex;
	font-size: var(--bookmint-t-2xs) !important;
	font-variant-numeric: tabular-nums;
	font-weight: 700 !important;
	grid-area: num;
	height: 24px;
	justify-content: center;
	width: 24px;
}

.bookmint.bookmint.bookmint .bookmint__step-t {
	align-self: center;
	color: var(--bookmint-ink) !important;
	font-size: var(--bookmint-t-md) !important;
	font-weight: 600 !important;
	grid-area: title;
	line-height: 1.35 !important;
	min-width: 0;
}

.bookmint.bookmint.bookmint .bookmint__step-d {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-xs) !important;
	grid-area: desc;
	line-height: 1.5 !important;
	min-width: 0;
}

/* Stacked, each step gets a rule so the strip still reads as a sequence. */
/* ==========================================================================
   4. Form blocks
   ========================================================================== */

.bookmint.bookmint.bookmint .bookmint__form {
	display: block;
	padding: var(--bookmint-pad);
}

/* Spacing goes on the following sibling, not `:last-of-type`. Step 1 is a
   <fieldset> (it is a real radio group) while steps 2-4 are <section>s, so
   `:last-of-type` matched the fieldset -- the FIRST block -- and stripped its
   bottom margin, jamming step 1 into step 2. */
.bookmint.bookmint.bookmint .bookmint-block {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.bookmint.bookmint.bookmint .bookmint-block ~ .bookmint-block {
	margin-top: var(--bookmint-block);
}

.bookmint.bookmint.bookmint .bookmint-block__head {
	align-items: flex-start;
	display: flex;
	gap: var(--bookmint-s-lg);
	margin-bottom: var(--bookmint-s-xl);
}

/* Quiet ordinals: the darkest, most saturated mark on the page should be the
   action, not the step numbers. 24px optically centres against the
   16 x 1.35 = 21.6px heading line box without a magic nudge. */
.bookmint.bookmint.bookmint .bookmint-block__index {
	align-items: center;
	background: var(--bookmint-canvas);
	border: 1px solid var(--bookmint-line);
	border-radius: 999px;
	color: var(--bookmint-muted) !important;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--bookmint-t-xs) !important;
	font-variant-numeric: tabular-nums;
	font-weight: 700 !important;
	height: 24px;
	justify-content: center;
	width: 24px;
}

.bookmint.bookmint.bookmint .bookmint-block__hint {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-md) !important;
	margin-top: var(--bookmint-s-xs);
}

/* -- Inquiry options ----------------------------------------------------- */

.bookmint.bookmint.bookmint .bookmint-options {
	display: grid;
	gap: var(--bookmint-s-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.bookmint.bookmint.bookmint .bookmint-option {
	cursor: pointer;
	display: block;
	position: relative;
}

.bookmint.bookmint.bookmint .bookmint-option__input {
	border: 0 !important;
	height: 1px !important;
	margin: 0 !important;
	min-height: 0 !important;
	opacity: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
}

.bookmint.bookmint.bookmint .bookmint-option__inner {
	align-items: flex-start !important;
	background: var(--bookmint-surface) !important;
	border: 1px solid var(--bookmint-field-line) !important;
	border-radius: var(--bookmint-radius-sm) !important;
	display: flex !important;
	gap: var(--bookmint-s-lg) !important;
	height: 100% !important;
	padding: var(--bookmint-s-xl) !important;
	transition: border-color var(--bookmint-speed) var(--bookmint-ease),
		background-color var(--bookmint-speed) var(--bookmint-ease),
		box-shadow var(--bookmint-speed) var(--bookmint-ease);
}

.bookmint.bookmint.bookmint .bookmint-option:hover .bookmint-option__inner {
	border-color: var(--bookmint-primary) !important;
}

/* An inset ring gives the 2px selected weight with no layout shift. */
.bookmint.bookmint.bookmint .bookmint-option__input:checked + .bookmint-option__inner {
	background: var(--bookmint-canvas) !important;
	border-color: var(--bookmint-primary) !important;
	box-shadow: inset 0 0 0 1px var(--bookmint-primary) !important;
}

.bookmint.bookmint.bookmint .bookmint-option__input:focus-visible + .bookmint-option__inner {
	outline: 2px solid var(--bookmint-primary) !important;
	outline-offset: 2px !important;
}

.bookmint.bookmint.bookmint .bookmint-option__icon {
	align-items: center;
	background: var(--bookmint-cream);
	border-radius: var(--bookmint-radius-xs);
	color: var(--bookmint-primary-dark) !important;
	display: inline-flex;
	flex: 0 0 auto;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.bookmint.bookmint.bookmint .bookmint-option__icon svg {
	height: 20px;
	width: 20px;
}

.bookmint.bookmint.bookmint .bookmint-option__input:checked + .bookmint-option__inner .bookmint-option__icon {
	background: var(--bookmint-primary) !important;
	color: #fff !important;
}

.bookmint.bookmint.bookmint .bookmint-option__text {
	min-width: 0;
}

.bookmint.bookmint.bookmint .bookmint-option__name {
	color: var(--bookmint-ink) !important;
	display: block;
	font-size: var(--bookmint-t-md) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

.bookmint.bookmint.bookmint .bookmint-option__desc {
	color: var(--bookmint-muted) !important;
	display: block;
	font-size: var(--bookmint-t-xs) !important;
	line-height: 1.45 !important;
	margin-top: var(--bookmint-s-xs);
}

.bookmint.bookmint.bookmint .bookmint-option__tick {
	color: var(--bookmint-primary) !important;
	flex: 0 0 auto;
	height: 20px;
	margin-left: auto;
	opacity: 0;
	transform: scale(0.75);
	transition: opacity var(--bookmint-speed) var(--bookmint-ease),
		transform var(--bookmint-speed) var(--bookmint-ease);
	width: 20px;
}

.bookmint.bookmint.bookmint .bookmint-option__input:checked + .bookmint-option__inner .bookmint-option__tick {
	opacity: 1 !important;
	transform: scale(1) !important;
}

/* ==========================================================================
   5. Scheduling
   ========================================================================== */

.bookmint.bookmint.bookmint .bookmint-schedule {
	display: grid;
	gap: var(--bookmint-s-2xl);
	/* 344px, not 320px: seven day cells plus the panel padding need this
	   much to clear a 44px touch target, and it is the floor that decides
	   when the two panels stop sitting side by side. */
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Once the two panels stack, the calendar would run the full width of the card
   and the day cells would flatten into pills. Capping it always is simpler than
   asking a query when it stacked: in the two-column layout the track is already
   narrower than this, so the cap only bites when it is on its own row. */
.bookmint.bookmint.bookmint [data-bookmint-calendar-panel] {
	margin-inline: auto;
	max-width: 380px;
	width: 100%;
}

/* Grid ITEMS stretch by default; the panel inside one does not, so the two
   columns ended at different heights. */
.bookmint.bookmint.bookmint .bookmint-schedule > * {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bookmint.bookmint.bookmint .bookmint-schedule > * > .bookmint-panel {
	flex: 1 1 auto;
}

.bookmint.bookmint.bookmint .bookmint-panel {
	background: var(--bookmint-canvas);
	border: 1px solid var(--bookmint-line);
	border-radius: var(--bookmint-radius-sm);
	padding: var(--bookmint-s-xl);
}

.bookmint.bookmint.bookmint .bookmint-panel__title {
	align-items: center;
	color: var(--bookmint-muted) !important;
	display: flex;
	font-size: var(--bookmint-t-2xs) !important;
	font-weight: 700 !important;
	gap: var(--bookmint-s-sm);
	letter-spacing: var(--bookmint-track-caps) !important;
	margin-bottom: var(--bookmint-s-lg);
	text-transform: uppercase !important;
}

/* -- Calendar ------------------------------------------------------------ */

.bookmint.bookmint.bookmint .bookmint-cal__bar {
	align-items: center;
	display: flex;
	gap: var(--bookmint-s-md);
	justify-content: space-between;
	margin-bottom: var(--bookmint-s-lg);
}

.bookmint.bookmint.bookmint .bookmint-cal__month {
	color: var(--bookmint-ink) !important;
	font-size: var(--bookmint-t-md) !important;
	font-weight: 600 !important;
	text-align: center !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__nav {
	align-items: center !important;
	appearance: none !important;
	background: var(--bookmint-surface) !important;
	border: 1px solid var(--bookmint-field-line) !important;
	border-radius: var(--bookmint-radius-xs) !important;
	color: var(--bookmint-ink) !important;
	cursor: pointer !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	height: 44px !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: background-color var(--bookmint-speed) var(--bookmint-ease),
		border-color var(--bookmint-speed) var(--bookmint-ease);
	width: 44px !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__nav svg {
	height: 16px !important;
	width: 16px !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__nav:hover:not([aria-disabled="true"]) {
	background: var(--bookmint-primary) !important;
	border-color: var(--bookmint-primary) !important;
	color: #fff !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__nav[aria-disabled="true"] {
	border-color: var(--bookmint-line) !important;
	color: var(--bookmint-disabled) !important;
	cursor: not-allowed !important;
}

/* The negative margin cancels border-spacing's outer gutter, so the first day
   column aligns with the month bar above instead of sitting 2px inside it. */
.bookmint.bookmint.bookmint .bookmint-cal__grid {
	border-collapse: separate;
	border-spacing: var(--bookmint-s-2xs);
	margin: 0 calc(-1 * var(--bookmint-s-2xs));
	table-layout: fixed;
	width: calc(100% + 4px);
}

.bookmint.bookmint.bookmint .bookmint-cal__grid th {
	background: none;
	border: 0;
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-2xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--bookmint-track-caps) !important;
	padding: 0 0 var(--bookmint-s-xs);
	text-align: center !important;
	text-transform: uppercase !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__grid th abbr {
	border: 0;
	cursor: default;
	text-decoration: none !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__grid td {
	background: none;
	border: 0;
	padding: 0;
	text-align: center !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__day {
	appearance: none !important;
	background: var(--bookmint-surface) !important;
	border: 1px solid transparent !important;
	border-radius: var(--bookmint-radius-xs) !important;
	color: var(--bookmint-ink) !important;
	cursor: pointer !important;
	display: block !important;
	font-family: var(--bookmint-font) !important;
	font-size: var(--bookmint-t-sm) !important;
	font-variant-numeric: tabular-nums !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	margin: 0 !important;
	min-height: 44px !important;
	padding: 0 !important;
	position: relative !important;
	transition: background-color var(--bookmint-speed) var(--bookmint-ease),
		color var(--bookmint-speed) var(--bookmint-ease),
		border-color var(--bookmint-speed) var(--bookmint-ease);
	width: 100% !important;
}

/* A quiet dot marks days that still have times open. */
.bookmint.bookmint.bookmint .bookmint-cal__day::after {
	background: var(--bookmint-accent) !important;
	border-radius: 999px !important;
	bottom: 7px !important;
	content: "" !important;
	height: 4px !important;
	left: 50% !important;
	position: absolute !important;
	transform: translateX(-50%) !important;
	width: 4px !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__day:hover:not([aria-disabled="true"]):not([aria-selected="true"]) {
	background: var(--bookmint-cream) !important;
	border-color: var(--bookmint-primary) !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__day[aria-selected="true"] {
	background: var(--bookmint-primary) !important;
	border-color: var(--bookmint-primary) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__day[aria-selected="true"]::after {
	background: #fff !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__day[aria-disabled="true"] {
	background: none !important;
	color: var(--bookmint-disabled) !important;
	cursor: not-allowed !important;
}

/* No dot on a day that is closed, or whose slots are all taken. */
.bookmint.bookmint.bookmint .bookmint-cal__day[aria-disabled="true"]::after,
.bookmint.bookmint.bookmint .bookmint-cal__day--full::after {
	display: none !important;
}

/* Today is marked by weight and a ring, never colour alone. */
.bookmint.bookmint.bookmint .bookmint-cal__day--today:not([aria-selected="true"]):not([aria-disabled="true"]) {
	border-color: var(--bookmint-ink) !important;
	font-weight: 700 !important;
}

.bookmint.bookmint.bookmint .bookmint-cal__key {
	align-items: center;
	border-top: 1px solid var(--bookmint-line);
	color: var(--bookmint-muted) !important;
	display: flex;
	font-size: var(--bookmint-t-xs) !important;
	gap: var(--bookmint-s-sm);
	margin-top: var(--bookmint-s-lg);
	padding-top: var(--bookmint-s-lg);
}

.bookmint.bookmint.bookmint .bookmint-cal__dot {
	background: var(--bookmint-accent);
	border-radius: 999px;
	display: inline-block;
	flex: 0 0 auto;
	height: 6px;
	width: 6px;
}

/* -- Time slots ---------------------------------------------------------- */

.bookmint.bookmint.bookmint .bookmint-slots {
	align-content: start;
	display: grid;
	gap: var(--bookmint-s-md);
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	/* Reserves height so the panel does not jump while times load.
	   `align-content: start` keeps the reservation from stretching the row
	   itself, which put 74px of dead space under every slot. */
	min-height: 120px;
}

/* No reserved height before a date has been chosen. */
.bookmint.bookmint.bookmint .bookmint-slots:empty {
	min-height: 0;
}

.bookmint.bookmint.bookmint .bookmint-slot {
	position: relative;
}

.bookmint.bookmint.bookmint .bookmint-slot input {
	border: 0 !important;
	height: 1px !important;
	margin: 0 !important;
	min-height: 0 !important;
	opacity: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
}

.bookmint.bookmint.bookmint .bookmint-slot label {
	align-items: center !important;
	background: var(--bookmint-surface) !important;
	border: 1px solid var(--bookmint-field-line) !important;
	border-radius: var(--bookmint-radius-xs) !important;
	color: var(--bookmint-ink) !important;
	cursor: pointer !important;
	display: flex !important;
	font-size: var(--bookmint-t-md) !important;
	font-variant-numeric: tabular-nums !important;
	font-weight: 600 !important;
	justify-content: center !important;
	line-height: 1 !important;
	min-height: 48px !important;
	padding: 0 var(--bookmint-s-md) !important;
	text-align: center !important;
	transition: border-color var(--bookmint-speed) var(--bookmint-ease),
		background-color var(--bookmint-speed) var(--bookmint-ease),
		color var(--bookmint-speed) var(--bookmint-ease);
	width: 100% !important;
}

.bookmint.bookmint.bookmint .bookmint-slot label:hover {
	border-color: var(--bookmint-primary) !important;
}

.bookmint.bookmint.bookmint .bookmint-slot input:checked + label {
	background: var(--bookmint-primary) !important;
	border-color: var(--bookmint-primary) !important;
	box-shadow: inset 0 0 0 1px var(--bookmint-primary) !important;
	color: #fff !important;
}

.bookmint.bookmint.bookmint .bookmint-slot input:focus-visible + label {
	outline: 2px solid var(--bookmint-primary) !important;
	outline-offset: 2px !important;
}

/* -- Slot panel states --------------------------------------------------- */

.bookmint.bookmint.bookmint .bookmint-slots__state {
	align-items: center;
	border: 1px dashed var(--bookmint-line);
	border-radius: var(--bookmint-radius-xs);
	color: var(--bookmint-muted) !important;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--bookmint-t-md) !important;
	gap: var(--bookmint-s-lg);
	justify-content: center;
	min-height: 120px;
	padding: var(--bookmint-s-xl);
	text-align: center !important;
}

.bookmint.bookmint.bookmint .bookmint-slots__state svg {
	flex: 0 0 auto;
	height: 20px;
	opacity: 0.7;
	width: 20px;
}

/* A failed fetch must not look like a calm "nothing available" state. */
.bookmint.bookmint.bookmint .bookmint-slots__state--error {
	background: var(--bookmint-danger-soft) !important;
	border-color: rgba(var(--bookmint-danger-rgb), 0.4) !important;
	border-style: solid !important;
	color: var(--bookmint-danger-ink) !important;
}

/* A dead end -- the visitor picked a date and every time on it is taken --
   is a RESULT, not the same "waiting for input" state as the opening
   prompt. The dashed placeholder becomes a settled surface. Not the danger
   palette: nothing has gone wrong. */
.bookmint.bookmint.bookmint .bookmint-slots__state--empty {
	background: var(--bookmint-cream) !important;
	border-color: var(--bookmint-line) !important;
	border-style: solid !important;
	color: var(--bookmint-ink) !important;
}

.bookmint.bookmint.bookmint .bookmint-slots__state--error svg {
	color: var(--bookmint-danger) !important;
	opacity: 1 !important;
}

.bookmint.bookmint.bookmint .bookmint-retry {
	appearance: none !important;
	background: var(--bookmint-surface) !important;
	border: 1px solid rgba(var(--bookmint-danger-rgb), 0.5) !important;
	border-radius: var(--bookmint-radius-xs) !important;
	color: var(--bookmint-danger-ink) !important;
	cursor: pointer !important;
	font-family: var(--bookmint-font) !important;
	font-size: var(--bookmint-t-md) !important;
	font-weight: 600 !important;
	min-height: 44px !important;
	padding: 0 var(--bookmint-s-xl) !important;
}

.bookmint.bookmint.bookmint .bookmint-retry:hover {
	background: var(--bookmint-danger-soft) !important;
}

.bookmint.bookmint.bookmint .bookmint-spinner {
	animation: bookmint-spin 720ms linear infinite;
	border: 2px solid rgba(var(--bookmint-primary-rgb), 0.25);
	border-radius: 999px;
	border-top-color: var(--bookmint-primary);
	display: inline-block;
	flex: 0 0 auto;
	height: 18px;
	width: 18px;
}

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

/* The "that is 3:00 PM where you are" note under the times. */
.bookmint.bookmint.bookmint .bookmint-tzhint {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-sm) !important;
	margin-top: var(--bookmint-s-lg);
}

.bookmint.bookmint.bookmint .bookmint-status {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-xs) !important;
	margin-top: var(--bookmint-s-lg);
	min-height: 1.2em;
}

/* Native controls, shown only when JavaScript is unavailable. */
.bookmint.bookmint.bookmint .bookmint-nojs {
	display: grid;
	gap: var(--bookmint-gap);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ==========================================================================
   6. Fields
   ========================================================================== */

.bookmint.bookmint.bookmint .bookmint-fields {
	display: grid;
	gap: var(--bookmint-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.bookmint.bookmint.bookmint .bookmint-field {
	min-width: 0;
}

.bookmint.bookmint.bookmint .bookmint-field--full {
	grid-column: 1 / -1 !important;
}

.bookmint.bookmint.bookmint .bookmint-label {
	color: var(--bookmint-ink) !important;
	display: block;
	font-size: var(--bookmint-t-md) !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	margin: 0 0 var(--bookmint-s-sm);
	padding: 0;
	text-transform: none !important;
}

.bookmint.bookmint.bookmint .bookmint-req {
	color: var(--bookmint-danger) !important;
	font-weight: 700 !important;
	margin-left: var(--bookmint-s-2xs);
}

.bookmint.bookmint.bookmint .bookmint-help {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-xs) !important;
	line-height: 1.5 !important;
	margin-top: var(--bookmint-s-sm);
}

.bookmint.bookmint.bookmint .bookmint-error {
	align-items: flex-start;
	color: var(--bookmint-danger) !important;
	display: flex;
	font-size: var(--bookmint-t-xs) !important;
	font-weight: 600 !important;
	gap: var(--bookmint-s-sm);
	line-height: 1.45 !important;
	margin: 0 0 var(--bookmint-s-sm);
}

.bookmint.bookmint.bookmint .bookmint-error svg {
	flex: 0 0 auto;
	height: 14px;
	margin-top: var(--bookmint-s-2xs);
	width: 14px;
}

/* -- Consent ------------------------------------------------------------- */

.bookmint.bookmint.bookmint .bookmint-consent {
	align-items: flex-start !important;
	background: var(--bookmint-canvas) !important;
	border: 1px solid var(--bookmint-line) !important;
	border-radius: var(--bookmint-radius-sm) !important;
	cursor: pointer !important;
	display: flex !important;
	gap: var(--bookmint-s-lg) !important;
	padding: var(--bookmint-s-xl) !important;
}

.bookmint.bookmint.bookmint .bookmint-check {
	accent-color: var(--bookmint-primary) !important;
	-webkit-appearance: checkbox !important;
	appearance: auto !important;
	background: none !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	flex: 0 0 auto !important;
	font-size: inherit !important;
	height: 18px !important;
	margin: var(--bookmint-s-2xs) 0 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	width: 18px !important;
}

.bookmint.bookmint.bookmint .bookmint-consent__text {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-md) !important;
	line-height: 1.5 !important;
}

.bookmint.bookmint.bookmint .bookmint-captcha,
.bookmint.bookmint.bookmint .bookmint-turnstile {
	margin-top: var(--bookmint-s-xl);
}

/* ==========================================================================
   7. Submit row
   ========================================================================== */

.bookmint.bookmint.bookmint .bookmint-submit {
	align-items: center;
	border-top: 1px solid var(--bookmint-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bookmint-s-xl);
	justify-content: space-between;
	margin-top: var(--bookmint-s-3xl);
	padding-top: var(--bookmint-s-2xl);
}

.bookmint.bookmint.bookmint .bookmint-recap {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-md) !important;
	min-width: 0;
}

.bookmint.bookmint.bookmint .bookmint-recap strong {
	color: var(--bookmint-ink) !important;
	font-weight: 600 !important;
}

.bookmint.bookmint.bookmint .bookmint-cta {
	align-items: center !important;
	appearance: none !important;
	background: var(--bookmint-primary) !important;
	border: 0 !important;
	border-radius: var(--bookmint-radius-sm) !important;
	color: #fff !important;
	cursor: pointer !important;
	display: inline-flex !important;
	font-family: var(--bookmint-font) !important;
	font-size: var(--bookmint-t-lg) !important;
	font-weight: 600 !important;
	gap: var(--bookmint-s-md) !important;
	justify-content: center !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	margin: 0 !important;
	min-height: 52px !important;
	padding: 0 var(--bookmint-s-2xl) !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: background-color var(--bookmint-speed) var(--bookmint-ease),
		transform var(--bookmint-speed) var(--bookmint-ease);
	white-space: nowrap !important;
	width: auto !important;
}

.bookmint.bookmint.bookmint .bookmint-cta:hover:not([disabled]) {
	background: var(--bookmint-primary-dark) !important;
}

.bookmint.bookmint.bookmint .bookmint-cta:active:not([disabled]) {
	transform: translateY(1px) !important;
}

.bookmint.bookmint.bookmint .bookmint-cta[disabled] {
	cursor: progress !important;
	opacity: 0.75 !important;
}

.bookmint.bookmint.bookmint .bookmint-cta svg {
	height: 18px !important;
	width: 18px !important;
}

/* ==========================================================================
   8. Alerts and the success receipt
   ========================================================================== */

.bookmint.bookmint.bookmint .bookmint-alert {
	border: 1px solid var(--bookmint-line);
	border-radius: var(--bookmint-radius-sm);
	display: flex;
	gap: var(--bookmint-s-lg);
	margin: 0 0 var(--bookmint-s-2xl);
	padding: var(--bookmint-s-xl);
}

.bookmint.bookmint.bookmint .bookmint-alert__icon {
	flex: 0 0 auto;
	height: 20px;
	margin-top: var(--bookmint-s-2xs);
	width: 20px;
}

.bookmint.bookmint.bookmint .bookmint-alert__title {
	font-size: var(--bookmint-t-md) !important;
	font-weight: 600 !important;
}

.bookmint.bookmint.bookmint .bookmint-alert--error {
	background: var(--bookmint-danger-soft) !important;
	border-color: rgba(var(--bookmint-danger-rgb), 0.35) !important;
	color: var(--bookmint-danger-ink) !important;
}

.bookmint.bookmint.bookmint .bookmint-alert--error .bookmint-alert__icon {
	color: var(--bookmint-danger) !important;
}

.bookmint.bookmint.bookmint .bookmint-alert--error a {
	color: var(--bookmint-danger-ink) !important;
}

.bookmint.bookmint.bookmint .bookmint-alert__list {
	margin-top: var(--bookmint-s-sm);
}

.bookmint.bookmint.bookmint .bookmint-alert__list li {
	font-size: var(--bookmint-t-md) !important;
	line-height: 1.5 !important;
	padding-left: var(--bookmint-s-lg);
	position: relative;
}

.bookmint.bookmint.bookmint .bookmint-alert__list li::before {
	content: "•";
	left: 0;
	position: absolute;
}

/* -- Receipt ------------------------------------------------------------- */

.bookmint.bookmint.bookmint .bookmint-receipt {
	padding: var(--bookmint-s-4xl) var(--bookmint-pad);
	text-align: center !important;
}

.bookmint.bookmint.bookmint .bookmint-receipt__mark {
	align-items: center;
	background: var(--bookmint-success-soft);
	border-radius: 999px;
	color: var(--bookmint-accent-ink) !important;
	display: inline-flex;
	height: 64px;
	justify-content: center;
	margin-bottom: var(--bookmint-s-2xl);
	width: 64px;
}

.bookmint.bookmint.bookmint .bookmint-receipt__mark svg {
	height: 32px;
	width: 32px;
}

.bookmint.bookmint.bookmint .bookmint-receipt__lead {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-md) !important;
	margin: var(--bookmint-s-2xl) auto 0;
	max-width: 46ch;
}

.bookmint.bookmint.bookmint .bookmint-ref {
	align-items: center;
	background: var(--bookmint-canvas);
	border: 1px dashed var(--bookmint-line);
	border-radius: var(--bookmint-radius-sm);
	display: inline-flex;
	flex-direction: column;
	gap: var(--bookmint-s-2xs);
	margin: var(--bookmint-s-2xl) 0;
	padding: var(--bookmint-s-lg) var(--bookmint-s-3xl);
}

.bookmint.bookmint.bookmint .bookmint-ref__label {
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-2xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--bookmint-track-caps) !important;
	text-transform: uppercase !important;
}

.bookmint.bookmint.bookmint .bookmint-ref__value {
	color: var(--bookmint-ink) !important;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--bookmint-t-xl) !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
}

/* Both stacked blocks share one measure so their left edges line up. */
.bookmint.bookmint.bookmint .bookmint-recap-list {
	border: 1px solid var(--bookmint-line);
	border-radius: var(--bookmint-radius-sm);
	margin: 0 auto var(--bookmint-s-2xl);
	max-width: 460px;
	overflow: hidden;
	text-align: left !important;
}

.bookmint.bookmint.bookmint .bookmint-recap-list div {
	align-items: baseline;
	border-bottom: 1px solid var(--bookmint-line);
	display: flex;
	gap: var(--bookmint-s-xl);
	justify-content: space-between;
	padding: var(--bookmint-s-lg) var(--bookmint-s-xl);
}

.bookmint.bookmint.bookmint .bookmint-recap-list div:last-child {
	border-bottom: 0;
}

.bookmint.bookmint.bookmint .bookmint-recap-list dt {
	color: var(--bookmint-muted) !important;
	flex: 0 0 auto;
	font-size: var(--bookmint-t-md) !important;
}

.bookmint.bookmint.bookmint .bookmint-recap-list dd {
	color: var(--bookmint-ink) !important;
	font-size: var(--bookmint-t-md) !important;
	font-weight: 600 !important;
	text-align: right !important;
}

.bookmint.bookmint.bookmint .bookmint-pill {
	background: var(--bookmint-success-soft);
	border-radius: 999px;
	color: var(--bookmint-accent-ink) !important;
	display: inline-block;
	font-size: var(--bookmint-t-xs) !important;
	font-weight: 700 !important;
	padding: var(--bookmint-s-xs) var(--bookmint-s-lg);
}

.bookmint.bookmint.bookmint .bookmint-next {
	border-top: 1px solid var(--bookmint-line);
	color: var(--bookmint-muted) !important;
	font-size: var(--bookmint-t-md) !important;
	margin: 0 auto;
	max-width: 460px;
	padding-top: var(--bookmint-s-2xl);
	text-align: left !important;
}

.bookmint.bookmint.bookmint .bookmint-next li {
	line-height: 1.55 !important;
	margin-bottom: var(--bookmint-s-md);
	padding-left: var(--bookmint-s-2xl);
	position: relative;
}

.bookmint.bookmint.bookmint .bookmint-next li::before {
	background: var(--bookmint-accent);
	border-radius: 999px;
	content: "";
	height: 6px;
	left: var(--bookmint-s-sm);
	position: absolute;
	top: 9px;
	width: 6px;
}

/* ==========================================================================
   9. Utilities
   ========================================================================== */

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

.bookmint.bookmint.bookmint [hidden] {
	display: none !important;
}

/* ==========================================================================
   10. Responsive
   --------------------------------------------------------------------------
   Plain @media, deliberately.

   This used to key off @container so the form could respond to its own column
   width rather than the viewport. That had to go: `container-type: inline-size`
   makes page builders that measure the widget's intrinsic height get it badly
   wrong. On Elementor at 375px the wrapper computed 5558px around a 2665px
   form, leaving roughly 2900px of blank space underneath, and nothing short of
   toggling the property re-laid it out.

   The trade: the form now responds to the viewport, so it will not compact
   itself when dropped into a narrow sidebar on a wide screen. That is a far
   smaller problem than a hole in the page on every phone.
   ========================================================================== */

@media (max-width: 860px) {
	.bookmint.bookmint.bookmint .bookmint__steps {
		gap: 0;
	}

	.bookmint.bookmint.bookmint .bookmint__step {
		grid-template-areas: "num title" ". desc";
		padding: var(--bookmint-s-lg) 0;
	}

	.bookmint.bookmint.bookmint .bookmint__step + .bookmint__step {
		border-top: 1px solid var(--bookmint-line);
	}

	.bookmint.bookmint.bookmint [data-bookmint-calendar-panel] {
		margin-inline: auto;
		max-width: 380px;
		width: 100%;
	}
}

@media (max-width: 720px) {
}

@media (max-width: 600px) {
	.bookmint.bookmint.bookmint {
		--bookmint-pad: 20px;
		--bookmint-block: 32px;
		--bookmint-gap: 16px;
	}

	.bookmint.bookmint.bookmint .bookmint-panel {
		padding: var(--bookmint-s-lg) var(--bookmint-s-sm);
	}

	.bookmint.bookmint.bookmint .bookmint-panel__title,
	.bookmint.bookmint.bookmint .bookmint-cal__key {
		padding-inline: var(--bookmint-s-xs);
	}

	.bookmint.bookmint.bookmint .bookmint__masthead {
		flex-direction: column;
		gap: var(--bookmint-s-lg);
	}

	.bookmint.bookmint.bookmint .bookmint-slots {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	}

	.bookmint.bookmint.bookmint .bookmint-submit {
		align-items: stretch;
		flex-direction: column;
	}

	.bookmint.bookmint.bookmint .bookmint-cta {
		width: 100%;
	}

	.bookmint.bookmint.bookmint .bookmint-recap {
		order: 2;
		text-align: center !important;
	}

	.bookmint.bookmint.bookmint .bookmint-receipt {
		padding: var(--bookmint-s-3xl) var(--bookmint-s-xl);
	}
}

/* The container blocks below mirror the media blocks above, breakpoint for
   breakpoint. They key off the form's OWN width -- the dimension that
   actually matters for an embedded widget -- and win on source order
   wherever container queries are supported. Keep the two in step: a rule
   that exists in only one of them behaves differently depending on browser
   support, which is how the calendar cap and the options breakpoint drifted
   apart in the first place. */

/* ==========================================================================
   11. Preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bookmint,
.bookmint.bookmint.bookmint * {
		scroll-behavior: auto !important;
	}

	.bookmint.bookmint.bookmint *,
.bookmint.bookmint.bookmint *::before,
.bookmint.bookmint.bookmint *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (prefers-contrast: more) {
	.bookmint {
		--bookmint-line: #8f8a82;
		--bookmint-muted: #4a423a;
		--bookmint-disabled: #6b6055;
	}

	.bookmint.bookmint.bookmint .bookmint-input,
.bookmint.bookmint.bookmint .bookmint-textarea,
.bookmint.bookmint.bookmint .bookmint-select {
		border-width: 2px !important;
	}
}

@media print {
	.bookmint.bookmint.bookmint .bookmint__steps,
.bookmint.bookmint.bookmint .bookmint-submit,
.bookmint.bookmint.bookmint .bookmint-cal__bar {
		display: none;
	}

	.bookmint.bookmint.bookmint .bookmint__shell {
		box-shadow: none;
	}
}

/* The submit spinner sits on the filled primary button. */
.bookmint.bookmint.bookmint .bookmint-spinner--on-primary {
	border-color: rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
}