/**
 * Terminy booking widget styles.
 *
 * Minimalist redesign (1.0.2): neutral surfaces, one accent, soft
 * edge-free parallax glows, compact calendar with availability dots.
 * Everything is scoped under .terminy-widget and driven by CSS custom
 * properties set inline by the renderer (skin palette):
 * --ty-primary, --ty-accent, --ty-water, --ty-deep, --ty-bg
 * plus two the renderer works out from the primary colour, so a light brand
 * colour never ends up with white text on it:
 * --ty-on-primary    text on a primary background (white, or dark ink)
 * --ty-primary-text  the primary as text on white, darkened just enough
 */

.terminy-widget {
	--ty-ink: #1f2937;
	--ty-muted: #6b7280;
	--ty-line: rgba(15, 23, 42, 0.1);
	--ty-card: #ffffff;
	--ty-glass: color-mix(in srgb, var(--ty-deep) 30%, transparent);
	/* Muted water tones: the vessels stay recognisable without shouting. */
	--ty-water-soft: color-mix(in srgb, var(--ty-water) 55%, #fff);
	--ty-deep-soft: color-mix(in srgb, var(--ty-deep) 45%, #fff);
	/* Solid, not translucent: the wave disc inside a cell has to match it exactly. */
	--ty-cell: color-mix(in srgb, var(--ty-ink) 4.5%, var(--ty-card));
	/* Seven cells of 40px plus six gaps of 4px. */
	--ty-cal-w: 304px;
	/* Comfortable reading measure. Site owners can override this one
	 * property to make the widget wider or narrower. */
	--ty-max: 680px;
	position: relative;
	box-sizing: border-box;
	/*
	 * The decorative glows behind the card deliberately bleed past its edges.
	 * On a phone that bleed is wider than the screen, and the whole page ends
	 * up scrolling sideways by ~32px. `clip` cuts it off without turning the
	 * widget into a scroll container the way `hidden` would; the horizontal
	 * axis only, so the card keeps its shadow above and below.
	 */
	overflow-x: clip;
	max-width: var(--ty-max);
	margin: 0 auto;
	padding: 8px;
	color: var(--ty-ink);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) *,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) *::before,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) *::after {
	box-sizing: border-box;
}

/* ---------- armour against the surrounding theme ----------
 *
 * The widget lands in whatever theme the site runs, and a theme only has to
 * declare one property the widget does not for the layout to fall apart.
 * A real case: a theme styled its own search field with "flex: 1 1 220px";
 * that class name matched the widget's inputs, and because .ty-field is a
 * *column* flex box the 220px flex-basis became a 220px height. Every field
 * turned into a tall box.
 *
 * So the widget states these properties itself rather than inheriting
 * whatever the theme happens to have. The font family stays open (headings
 * keep the theme's heading font, text its body font), so the widget still
 * feels at home; sizes, colours and spacing are the widget's own.
 *
 * Weight: every rule from here on starts with
 * `.terminy-widget:not(#terminy-guard):not(#terminy-guard)`. No element
 * carries that id, so each `:not()` matches every widget and only adds the
 * weight of an ID - two of them. Themes style buttons, fields and text with
 * selectors like `.entry-content button:disabled` or
 * `.elementor-kit-5 button:hover`, and without the extra weight those beat
 * the widget's own rules - a real case painted grey boxes behind the step
 * markers and turned the "Add to calendar" text link-blue on the green
 * button. One ID is not enough: themes and builders that hang their whole
 * stylesheet on an ID (Enfold's #top, Divi's #page-container, Colibri-style
 * builders) write `#top .entry-content button:disabled`, which outweighs a
 * single guard. Two IDs stay ahead of all of those.
 * The container rule above stays light on purpose: width and outer spacing
 * remain the site's to change, colours go through the --ty-* properties.
 */

/* The widget's own text settings, so a theme's centred or uppercase content
 * area stops at its edge. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) {
	color: var(--ty-ink);
	font-size: 16px;
	font-style: normal;
	line-height: 1.5;
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
	word-spacing: normal;
	text-shadow: none;
}

/* Inside, every element takes its text settings from the widget rather than
 * from the theme's rules for p, label, span or button. The components below
 * set what they need on top. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(*) {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	text-shadow: inherit;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(*:not(h1, h2, h3, h4, h5, h6)) {
	font-family: inherit;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(h1, h2, h3, h4, h5, h6) { font-weight: 700; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(strong, b) { font-weight: 700; }

/* Text elements and lists carry no theme spacing, frames or backgrounds. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, label, legend, fieldset, form, span, strong, small, a) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Paragraphs keep the browser's usual spacing - one line above and below -
 * because the widget was drawn with it (the two lines on the confirmation
 * screen, the waitlist text). Components that want less set their own. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(p) { margin: 1em 0; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(ul, ol, li) { list-style: none; }

/* Every button in the widget is one of its own controls - step markers, days,
 * times, choices, actions - so none of a theme's button styling may reach it:
 * not the grey of a disabled button, not a hover colour, shadow, uppercase
 * text or a fixed height. The components below give each its look. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(button) {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	text-align: center;
	text-decoration: none;
	opacity: 1;
	filter: none;
	transform: none;
	cursor: pointer;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(button:disabled) { cursor: default; }

/* Fields: the widget draws frame, background and focus ring itself. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(input, select, textarea) {
	height: auto;
	min-height: 0;
	margin: 0;
	box-shadow: none;
	background-image: none;
	font: inherit;
	text-align: start;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) :where(input[type="checkbox"], input[type="radio"]) {
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) :is(input, select, textarea, button, fieldset, legend, label, form, ul, ol, li, p, h1, h2, h3, h4, table) {
	float: none;
	min-width: 0;
	max-width: 100%;
}

/* A theme's flex shorthand must never get to decide the size of these.
 * Kept ahead of the widget's own rules so a later declaration here always
 * wins the tie, and deliberately free of `height` so the widget can still
 * size its own calendar cells. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :is(.ty-input, .ty-btn, .ty-choice, .ty-slot, .ty-cal-day,
                    .ty-step-btn, .ty-legend-box, .ty-vessel-svg) {
	flex: 0 0 auto;
	min-height: 0;
	text-decoration: none;
}

/*
 * The widget's own boxes stay in the flow, on screen and visible, whatever
 * the theme has to say about elements of the same name. This is not
 * hypothetical: a theme whose mobile menu is also called .ty-nav turned the
 * widget's button row into a fixed, hidden, off-screen panel below 900px -
 * which took the "book now" button away from every phone visitor.
 */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :is(.ty-nav, .ty-card, .ty-step, .ty-panel, .ty-grid,
                    .ty-form, .ty-field, .ty-details, .ty-time, .ty-day) {
	position: static;
	inset: auto;
	visibility: visible;
	opacity: 1;
	transform: none;
	width: auto;
	padding: 0;
	background: none;
	overflow: visible;
}

/* Nothing inside the widget jumps under the pointer except where the widget
 * asks for it itself - .ty-choice keeps its own 1px lift further down. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) :is(.ty-card, .ty-btn, .ty-slot, .ty-step, .ty-panel):hover {
	transform: none;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) ul,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- boot state ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-boot {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	padding: 48px 16px;
	color: var(--ty-muted);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-boot-drop {
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 0;
	background: var(--ty-water, #38bdf8);
	transform: rotate(-45deg);
	animation: ty-drip 1.1s ease-in-out infinite;
}

@keyframes ty-drip {
	0%, 100% { transform: rotate(-45deg) translateY(0); opacity: 1; }
	50% { transform: rotate(-45deg) translateY(6px); opacity: 0.7; }
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- parallax backdrop ----------
 * Soft glows that fade to fully transparent well inside their own
 * element, so the overflow clip of the container never produces a
 * visible hard edge. The scroll translation is clamped in JS; the idle
 * float uses the separate `translate` property so both compose.
 */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-parallax {
	position: absolute;
	inset: -64px -32px;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-layer {
	position: absolute;
	will-change: transform;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-a,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-b,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-c {
	border-radius: 50%;
	animation: ty-float 16s ease-in-out infinite;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-a {
	width: 420px;
	height: 420px;
	left: -2%;
	top: -20px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ty-water) 20%, transparent), transparent 72%);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-b {
	width: 480px;
	height: 480px;
	right: -4%;
	top: 26%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ty-primary) 13%, transparent), transparent 72%);
	animation-duration: 21s;
	animation-delay: -6s;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-c {
	width: 380px;
	height: 380px;
	left: 26%;
	bottom: 0;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ty-deep) 12%, transparent), transparent 72%);
	animation-duration: 18s;
	animation-delay: -11s;
}

@keyframes ty-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -6px; }
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-drop-a,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-drop-b {
	width: 14px;
	height: 14px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: color-mix(in srgb, var(--ty-water) 55%, transparent);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-drop-a { left: 9%; top: 52px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-drop-b { right: 12%; bottom: 64px; width: 9px; height: 9px; opacity: 0.7; }

/* ---------- card & progress ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-card {
	position: relative;
	z-index: 1;
	background: var(--ty-card);
	border: 1px solid var(--ty-line);
	border-radius: 18px;
	box-shadow:
		0 24px 60px -32px color-mix(in srgb, var(--ty-deep) 35%, transparent),
		0 2px 10px -6px rgba(15, 23, 42, 0.08);
	padding: clamp(16px, 3vw, 30px);
	overflow: hidden;
}

/* ---------- step indicator ----------
 *
 * A numbered marker per step, sitting on a rail that fills up as the visitor
 * moves forward. Each step draws its own two rail halves: the left half turns
 * solid once the step has been reached, the right half once it has been
 * passed, so the coloured line always stops at the current marker.
 */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-progress {
	--ty-dot: 28px;
	display: flex;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step::before,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step::after {
	content: '';
	position: absolute;
	top: calc(var(--ty-dot) / 2 - 1px);
	height: 2px;
	background: var(--ty-line);
	z-index: 0;
	transition: background 0.25s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step::before { left: 0; right: 50%; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step::after { left: 50%; right: 0; }

/* The rail has no outer ends to draw. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step:first-child::before,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step:last-child::after { display: none; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step.is-done::before,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step.is-done::after,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step.is-current::before {
	background: var(--ty-primary);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-btn {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0 2px;
	color: var(--ty-muted);
	font: inherit;
	font-size: 12.5px;
	line-height: 1.25;
	text-align: center;
	cursor: default;
	transition: color 0.15s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-btn:disabled { opacity: 1; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step.is-done .ty-step-btn { cursor: pointer; color: var(--ty-ink); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step.is-current .ty-step-btn { color: var(--ty-ink); font-weight: 600; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ty-dot);
	height: var(--ty-dot);
	border-radius: 50%;
	/* Opaque, so the marker sits on the rail rather than under it. */
	background: var(--ty-card);
	box-shadow: inset 0 0 0 2px var(--ty-line);
	color: var(--ty-muted);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	flex: none;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-dot svg { width: 13px; height: 13px; display: block; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step.is-done .ty-step-dot {
	background: var(--ty-primary);
	box-shadow: inset 0 0 0 2px var(--ty-primary);
	color: var(--ty-on-primary, #fff);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step.is-current .ty-step-dot {
	background: var(--ty-primary);
	color: var(--ty-on-primary, #fff);
	box-shadow:
		inset 0 0 0 2px var(--ty-primary),
		0 0 0 4px color-mix(in srgb, var(--ty-primary) 15%, transparent);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step.is-done .ty-step-btn:hover .ty-step-dot {
	box-shadow:
		inset 0 0 0 2px var(--ty-primary),
		0 0 0 4px color-mix(in srgb, var(--ty-primary) 20%, transparent);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-btn:focus-visible { outline: none; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-btn:focus-visible .ty-step-dot {
	box-shadow:
		inset 0 0 0 2px var(--ty-primary),
		0 0 0 3px var(--ty-card),
		0 0 0 5px var(--ty-primary);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-label {
	display: block;
	max-width: 100%;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Narrow cards: the markers alone carry the progress, and the panel heading
 * already names the current step. */
@media (max-width: 460px) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-progress { --ty-dot: 24px; margin-bottom: 20px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-label { font-size: 11px; }
}

@media (max-width: 360px) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-step-label { display: none; }
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-title {
	margin: 0 0 16px;
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.25;
	color: var(--ty-ink);
}

/* ---------- step enter transition ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-panel.is-entering,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day.is-entering {
	animation: ty-panel-in 0.3s cubic-bezier(0.25, 0.8, 0.35, 1);
}

@keyframes ty-panel-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ---------- choice grids (services / staff) ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-align: left;
	padding: 13px 14px;
	background: var(--ty-card);
	border: 1px solid var(--ty-line);
	border-radius: 12px;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice:hover,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice:focus-visible {
	border-color: var(--ty-primary);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -16px var(--ty-deep);
	outline: none;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice.is-active {
	border-color: var(--ty-primary);
	box-shadow: inset 0 0 0 1px var(--ty-primary);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice-dot {
	width: 8px;
	height: 8px;
	margin-top: 7px;
	border-radius: 50%;
	flex: none;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice-body { display: flex; flex-direction: column; gap: 2px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice-body strong { font-size: 15px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice-desc { color: var(--ty-muted); font-size: 13px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice-meta { color: var(--ty-muted); font-size: 13px; font-weight: 500; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	flex: none;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-avatar-any {
	background: linear-gradient(135deg, var(--ty-water), var(--ty-deep));
	font-size: 18px;
}

/* ---------- time step layout ---------- */

/* The month has a fixed width (7 cells of 40px plus gaps) and the times take
 * the rest, so the calendar never stretches into a loose grid on a wide page. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time {
	display: grid;
	grid-template-columns: var(--ty-cal-w) minmax(0, 1fr);
	gap: clamp(20px, 3.5vw, 32px);
	align-items: start;
}

@media (min-width: 681px) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time { min-height: 340px; }

	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day {
		border-left: 1px solid var(--ty-line);
		padding-left: clamp(20px, 3.5vw, 32px);
		min-height: 300px;
	}
}

@media (max-width: 680px) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time { grid-template-columns: 1fr; gap: 4px; }

	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal { max-width: 336px; margin: 0 auto; width: 100%; }

	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day {
		border-top: 1px solid var(--ty-line);
		padding-top: 14px;
		margin-top: 10px;
	}

	/* No day picked yet: the step heading already says what to do. */
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day.is-empty { display: none; }
}

/* ---------- calendar ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-title { font-size: 15px; font-weight: 600; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-nav {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--ty-muted);
	transition: background 0.15s ease, color 0.15s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-nav:disabled { opacity: 0.3; cursor: default; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-nav:not(:disabled):hover,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-nav:focus-visible { background: var(--ty-cell); color: var(--ty-ink); outline: none; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

/* A month slides in from the side the visitor came from. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-grid.is-month-in { animation: ty-month-in 0.28s cubic-bezier(0.25, 0.8, 0.35, 1); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-grid.is-month-in.is-dir-back { animation-name: ty-month-in-back; }

@keyframes ty-month-in {
	from { opacity: 0; transform: translateX(14px); }
	to { opacity: 1; transform: none; }
}
@keyframes ty-month-in-back {
	from { opacity: 0; transform: translateX(-14px); }
	to { opacity: 1; transform: none; }
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-weekdays { margin-bottom: 4px; gap: 4px; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-wd {
	text-align: center;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	/* Full muted grey: at 80% the small capitals fell to 3.3:1 on white. */
	color: var(--ty-muted);
	padding: 2px 0;
}

/* A day is a flat square vessel. The liquid inside is the day's occupancy,
 * its surface a single slow wave. No rim, no floor, no shine: the shape does
 * the work, the way an icon would. Overflow-hidden keeps the liquid inside. */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	aspect-ratio: 1;
	height: auto;
	border: 0;
	border-radius: 7px;
	background: var(--ty-cell);
	overflow: hidden;
	font: inherit;
	cursor: pointer;
	color: var(--ty-ink);
	transition: background 0.15s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	background: var(--ty-water-soft);
	transition: height 0.55s cubic-bezier(0.22, 0.9, 0.36, 1);
	pointer-events: none;
	z-index: 1;
}

/* The wave: a large disc in the cell's own colour, its rim just dipping into
 * the liquid, turning slowly. Only the arc that overlaps the liquid is seen,
 * so the surface rises and falls by two or three pixels. One transform, no
 * paint work per frame. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-fill::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 340%;
	aspect-ratio: 1;
	border-radius: 46%;
	background: var(--ty-cell);
	transform: translate(-50%, -97.5%) rotate(0deg);
	animation: ty-cell-wave 9s linear infinite;
}

@keyframes ty-cell-wave {
	to { transform: translate(-50%, -97.5%) rotate(360deg); }
}

/* Rings (hover, focus, selected) sit on their own layer above the liquid,
 * because the wave disc paints over everything on the button's own layer. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px transparent;
	z-index: 2;
	pointer-events: none;
	transition: box-shadow 0.15s ease;
}

/* Liquid at the brim: the wave has nowhere to go. The number stays dark -
 * white on the light fill read at only 1.8-2.4:1 in the six skins, dark
 * reads at 6:1 or better in all of them. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-brim { background: var(--ty-deep-soft); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-brim .ty-cal-fill { background: var(--ty-deep-soft); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-brim .ty-cal-fill::before { display: none; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-brim .ty-cal-num { color: var(--ty-ink); }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day:hover:not(:disabled):not(.is-selected)::before {
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ty-primary) 45%, transparent);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day:focus-visible { outline: none; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day:focus-visible::before {
	box-shadow: inset 0 0 0 2px var(--ty-primary), inset 0 0 0 4px var(--ty-card);
}

/* Today: a small mark under the number, above the liquid. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-today::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--ty-primary);
	z-index: 3;
	pointer-events: none;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-selected::before {
	box-shadow: inset 0 0 0 2px var(--ty-primary-text, var(--ty-primary));
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-selected .ty-cal-num { color: var(--ty-primary-text, var(--ty-primary)); font-weight: 700; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-selected.is-brim .ty-cal-num { color: var(--ty-ink); }

/* Closed and past days are not vessels: just the number, quietly. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day:disabled {
	cursor: default;
	color: color-mix(in srgb, var(--ty-muted) 50%, transparent);
	background: transparent;
}
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day:disabled::before { display: none; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day:disabled.is-today::after { background: color-mix(in srgb, var(--ty-primary) 55%, transparent); }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-num {
	position: relative;
	/* Above the liquid, whatever the level. */
	z-index: 3;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-loading { animation: ty-pulse 1s ease-in-out infinite; }

@keyframes ty-pulse {
	50% { opacity: 0.55; }
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-legend {
	display: flex;
	gap: 16px;
	margin-top: 12px;
	color: var(--ty-muted);
	font-size: 12px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* The same flat square as a calendar cell, so the legend shows the real thing. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-legend-box {
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 0;
	background: var(--ty-cell);
	overflow: hidden;
	flex: none;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-legend-box .ty-cal-fill { transition: none; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-legend-box .ty-cal-fill::before { display: none; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-legend-box.is-brim .ty-cal-fill { background: var(--ty-deep-soft); }

/* ---------- day panel ---------- */

/* The picked day repeated at the top of its panel: the same square, the same
 * liquid, so the eye connects the two without a caption. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-mini {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 7px;
	background: var(--ty-cell);
	overflow: hidden;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-mini.is-brim { background: var(--ty-deep-soft); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-mini.is-brim .ty-cal-fill { background: var(--ty-deep-soft); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-mini.is-brim .ty-cal-fill::before { display: none; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-title { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-free { margin: 0; color: var(--ty-muted); font-size: 13.5px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-hint { color: var(--ty-muted); margin: 10px 0; font-size: 14px; }

/* Nothing picked yet: the nearest free appointment, one tap away. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day.is-empty { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-next {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--ty-line);
	border-radius: 12px;
	background: color-mix(in srgb, var(--ty-ink) 2%, var(--ty-card));
}
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-next-label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ty-muted);
}
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-next-when { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--ty-ink); text-wrap: balance; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-next .ty-btn { align-self: flex-start; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day.is-empty .ty-day-hint { margin: 0; }

/* On a phone the heading already says what to do, and the quick pick would push the month down. */
@media (max-width: 680px) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day.is-empty { display: none; }
}

/* The big vessel, flattened to match the cells: one outline, one wave. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-vessel {
	display: flex;
	align-items: center;
	gap: 14px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-vessel-svg {
	width: 52px;
	height: 70px;
	color: var(--ty-deep);
	flex: none;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-water {
	transform: translateY(160px);
	transition: transform 1.1s cubic-bezier(0.22, 0.9, 0.36, 1);
	will-change: transform;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-wave {
	animation: ty-wave 7s linear infinite;
}

@keyframes ty-wave {
	from { translate: 0 0; }
	to { translate: -120px 0; }
}

/* The day heading above already names the date - keep the label for
 * screen readers only so the panel stays compact. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slots-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
	gap: 8px;
	max-height: 200px;
	margin-top: 0;
	overflow-y: auto;
	padding: 2px;
	scrollbar-width: thin;
}

/* Soft hint that more times are below (set by the renderer when it scrolls). */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slots.is-scrollable {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slot {
	padding: 9px 4px;
	border: 1px solid var(--ty-line);
	border-radius: 9px;
	background: transparent;
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	color: var(--ty-ink);
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

/* Times arrive one after another, a few milliseconds apart. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day.is-entering .ty-slot {
	animation: ty-slot-in 0.32s cubic-bezier(0.25, 0.8, 0.35, 1) both;
	animation-delay: calc(var(--ty-i, 0) * 22ms);
}

@keyframes ty-slot-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slot:hover,
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slot:focus-visible {
	border-color: var(--ty-primary);
	color: var(--ty-primary-text, var(--ty-primary));
	outline: none;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slot.is-active {
	background: var(--ty-primary);
	/* The darker shade outlines the chosen time when the brand colour is very
	 * light; for every built-in skin it is the primary itself. */
	border-color: var(--ty-primary-text, var(--ty-primary));
	color: var(--ty-on-primary, #fff);
	font-weight: 600;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-continue { margin-top: 14px; width: 100%; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-wait { margin-top: 8px; }

/* ---------- form ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-details { display: block; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary {
	background: color-mix(in srgb, var(--ty-ink) 3%, #fff);
	border: 1px solid var(--ty-line);
	border-radius: 12px;
	padding: 16px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-head {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ty-muted);
	margin-bottom: 8px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-body { display: flex; flex-direction: column; gap: 4px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-price { font-weight: 700; color: var(--ty-primary-text, var(--ty-primary)); }

/* One-line recap above the form - no tall side card. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.4;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-strip .ty-summary-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ty-muted); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-strip .ty-summary-item strong { color: var(--ty-ink); font-weight: 700; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-strip .ty-summary-price { margin-left: auto; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-glyph { flex: none; width: 16px; height: 16px; color: var(--ty-primary-text, var(--ty-primary)); }

/* The details step is pure reading and typing - it gets a tighter measure
 * than the calendar, which needs the room for seven columns. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-details {
	max-width: 560px;
	margin-inline: auto;
}

/* Name across, email and phone side by side, the note across again. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-form {
	/* About 3:1 against white, so the fields stay visible as fields. */
	--ty-field-line: rgba(15, 23, 42, 0.46);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-field-wide { grid-column: 1 / -1; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-field { display: flex; flex-direction: column; gap: 7px; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-label {
	color: var(--ty-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-optional { color: var(--ty-muted); font-weight: 400; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 15px;
	border: 1.5px solid var(--ty-field-line, var(--ty-line));
	border-radius: 12px;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	background: #fff;
	color: var(--ty-ink);
	box-shadow: none;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Field heights belong to the widget, never to the surrounding theme: every
 * single-line field has the same height (also in the waiting-list dialog),
 * the note is three lines tall. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) input.ty-input {
	flex: 0 0 auto;
	align-self: stretch;
	height: 50px;
	min-height: 50px;
	border-color: var(--ty-field-line, rgba(15, 23, 42, 0.46));
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) textarea.ty-input {
	flex: 0 0 auto;
	align-self: stretch;
	height: auto;
	min-height: 100px;
	padding: 12px 15px;
	resize: vertical;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-input:focus {
	outline: none;
	border-color: var(--ty-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ty-primary) 16%, transparent);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-input.is-invalid { border-color: #b91c1c; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.15); }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-pay {
	border: 1px solid var(--ty-line);
	border-radius: 12px;
	padding: 8px 12px;
	margin: 0;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-pay-option {
	display: flex;
	gap: 8px;
	align-items: baseline;
	padding: 5px 0;
	cursor: pointer;
}

/* Single payment method: one quiet line instead of a bordered box. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-pay-line {
	margin: 0;
	font-size: 14px;
	color: var(--ty-muted);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-pay-line strong { color: var(--ty-ink); font-weight: 600; }

/* Consent: a soft box in the site's color with a large, real checkbox.
 * color-mix() with a variable is all-or-nothing in browsers without it, so
 * the tinted colors sit in @supports and plain ones come first. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-consent {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 15px 16px;
	border: 1px solid #dfe5e6;
	border-radius: 14px;
	background: #f6f8f8;
	transition: border-color 0.15s ease, background 0.15s ease;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-consent {
		border-color: color-mix(in srgb, var(--ty-primary) 22%, #fff);
		background: color-mix(in srgb, var(--ty-primary) 6%, #fff);
	}
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-consent.is-invalid { border-color: #b91c1c; background: #fef2f2; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-consent-text {
	margin: 0;
	color: var(--ty-ink);
	font-size: 15px;
	line-height: 1.5;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-consent-text label { cursor: pointer; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-consent-link {
	color: var(--ty-primary-text, var(--ty-primary));
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-checkbox {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: grid;
	place-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 2px solid #6b7686;
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-checkbox::before {
	content: "";
	width: 6px;
	height: 11px;
	margin-top: -3px;
	border: solid var(--ty-on-primary, #fff);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.15s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-checkbox:checked { border-color: var(--ty-primary); background: var(--ty-primary); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-checkbox:checked::before { transform: rotate(45deg) scale(1); }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-checkbox:focus-visible { outline: 3px solid var(--ty-primary); outline-offset: 2px; }

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-checkbox:not(:checked) { border-color: color-mix(in srgb, var(--ty-primary) 55%, #64748b); }
}

/* High contrast mode draws its own controls; let it. */
@media (forced-colors: active) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-checkbox { -webkit-appearance: auto; appearance: auto; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-checkbox::before { display: none; }
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-nav-details { margin-top: 4px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-nav-details .ty-btn { min-height: 52px; border-radius: 13px; font-size: 16px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-nav-details .ty-btn-primary { flex: 1; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-form-msg { color: #b91c1c; font-size: 14px; margin: 0; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-form-msg:empty { display: none; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-error { color: #b91c1c; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-muted { color: var(--ty-muted); }

/* ---------- buttons & nav ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn:disabled { opacity: 0.5; cursor: default; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-primary {
	background: var(--ty-primary);
	color: var(--ty-on-primary, #fff);
	box-shadow: 0 6px 16px -10px var(--ty-primary);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-primary:not(:disabled):hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -10px var(--ty-primary);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-ghost {
	background: transparent;
	border-color: var(--ty-line);
	color: var(--ty-ink);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-ghost:hover { border-color: var(--ty-primary); color: var(--ty-primary-text, var(--ty-primary)); }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-danger {
	background: transparent;
	border-color: #fca5a5;
	color: #b91c1c;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-danger:hover { background: #fef2f2; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-big { flex: 1; }

/* ---------- success ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-success { text-align: center; padding: 8px 0 4px; }
/* Block plus auto margins: centred whether or not the theme turns every svg into a block. */
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-success-vessel .ty-vessel-svg { display: block; width: 66px; height: 88px; margin: 0 auto 6px; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-success-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-success-note { color: #047857; font-weight: 600; }

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-status {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: var(--ty-line);
	width: fit-content;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-status-confirmed { background: #d1fae5; color: #065f46; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-status-pending { background: #fef3c7; color: #92400e; }
.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-status-cancelled { background: #fee2e2; color: #991b1b; }

/* ---------- waitlist modal ---------- */

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 16px;
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-modal {
	background: #fff;
	border-radius: 16px;
	padding: 22px;
	max-width: 420px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.5);
}

.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-modal h4 { margin: 0; font-size: 18px; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-wave,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-fill::before,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-grid.is-month-in,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day.is-entering .ty-slot,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-boot-drop,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-a,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-b,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-blob-c,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-panel.is-entering,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day.is-entering,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day.is-loading {
		animation: none !important;
	}

	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-water,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-fill,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice {
		transition: none !important;
	}

	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-parallax { display: none; }
}

/* ---------- narrow layouts ---------- */

@media (max-width: 620px) {
	/* Single-column form; the summary line still wraps gracefully. */
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-form { grid-template-columns: 1fr; gap: 14px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-strip { gap: 4px 12px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-summary-strip .ty-summary-price { margin-left: 0; }
}

/* ---------- small screens ---------- */

@media (max-width: 480px) {
	.terminy-widget { padding: 4px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) { font-size: 15px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-card { padding: 14px 13px 16px; border-radius: 14px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-grid { grid-template-columns: 1fr; gap: 8px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice { padding: 11px 12px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-choice-desc { display: none; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-avatar { width: 32px; height: 32px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-progress { margin-bottom: 16px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-title { margin-bottom: 12px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-day { border-radius: 6px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-grid,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-weekdays { gap: 3px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal-legend { margin-top: 8px; font-size: 11.5px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day { padding-top: 12px; margin-top: 8px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-head { margin-bottom: 12px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slots { max-height: 124px; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-slot { padding: 7px 3px; font-size: 13px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn-continue { margin-top: 12px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-nav { flex-wrap: wrap; margin-top: 12px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-btn { padding: 10px 16px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-label { font-size: 14px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-field { gap: 6px; }
	/* 16px keeps iOS Safari from zooming in when a field gets focus. */
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-input { font-size: 16px; padding: 0 13px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) input.ty-input { height: 48px; min-height: 48px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) textarea.ty-input { padding: 11px 13px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-consent { padding: 13px 14px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-consent-text { font-size: 14px; }
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-nav-details .ty-btn { min-height: 50px; }
}

/* ---------- phone: month and times take turns ---------- */

@media (max-width: 680px) {
	/*
	 * Stacked, the step becomes a very long scroll: the customer taps a day at
	 * the top and the times appear far below, off screen. So the two panes take
	 * turns, and the height is animated between them.
	 */
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time {
		position: relative;
		/*
		 * "clip" rather than "hidden": hidden still makes this a scroll
		 * container, so focus landing in the pane that is sliding away scrolls
		 * the card sideways. clip only clips.
		 */
		overflow: hidden;
		overflow: clip;
	}
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time.is-swapping {
		transition: height .42s cubic-bezier(.22, .9, .36, 1);
	}

	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day {
		transition: opacity .3s ease, transform .34s cubic-bezier(.22, .9, .36, 1);
	}

	/* Times showing: the month steps aside and stops taking up height. */
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time.is-day-view .ty-cal {
		position: absolute;
		inset: 0 0 auto;
		width: 100%;
		opacity: 0;
		transform: translateX(-18px);
		pointer-events: none;
		visibility: hidden;
	}
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time.is-day-view .ty-day {
		border-top: 0;
		padding-top: 0;
		margin-top: 0;
		opacity: 1;
		transform: none;
	}

	/* Month showing: the times wait off to the right. */
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time:not(.is-day-view) .ty-day:not(.is-empty) {
		position: absolute;
		inset: 0 0 auto;
		width: 100%;
		opacity: 0;
		transform: translateX(18px);
		pointer-events: none;
		visibility: hidden;
	}

	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-back {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		margin: 0 0 10px;
		padding: 7px 12px 7px 8px;
		border: 1px solid var(--ty-line);
		border-radius: var(--ty-radius-pill, 999px);
		background: transparent;
		color: var(--ty-muted);
		font: inherit;
		font-size: 13.5px;
		cursor: pointer;
		transition: border-color .2s ease, color .2s ease;
	}
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-back:hover { border-color: var(--ty-primary); color: var(--ty-primary-text, var(--ty-primary)); }

	/* The times get the room the month gave up. */
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time.is-day-view .ty-slots { max-height: 260px; }
}

/* On a wide screen both panes are visible at once - nothing to go back to. */
@media (min-width: 681px) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day-back { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-time,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-cal,
	.terminy-widget:not(#terminy-guard):not(#terminy-guard) .ty-day { transition: none !important; }
}