/**
 * 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
 */

.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 *,
.terminy-widget *::before,
.terminy-widget *::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. Only layout-breaking properties are
 * listed - colours and fonts stay open so the widget still feels at home.
 */
.terminy-widget :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%;
	text-transform: none;
	letter-spacing: normal;
}

/* 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 :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 :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 :is(.ty-card, .ty-btn, .ty-slot, .ty-step, .ty-panel):hover {
	transform: none;
}

.terminy-widget ul,
.terminy-widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

.terminy-widget .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 .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 .ty-parallax {
	position: absolute;
	inset: -64px -32px;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.terminy-widget .ty-layer {
	position: absolute;
	will-change: transform;
}

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

.terminy-widget .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 .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 .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 .ty-drop-a,
.terminy-widget .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 .ty-drop-a { left: 9%; top: 52px; }
.terminy-widget .ty-drop-b { right: 12%; bottom: 64px; width: 9px; height: 9px; opacity: 0.7; }

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

.terminy-widget .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 .ty-progress {
	--ty-dot: 28px;
	display: flex;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.terminy-widget .ty-step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.terminy-widget .ty-step::before,
.terminy-widget .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 .ty-step::before { left: 0; right: 50%; }
.terminy-widget .ty-step::after { left: 50%; right: 0; }

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

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

.terminy-widget .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 .ty-step-btn:disabled { opacity: 1; }
.terminy-widget .ty-step.is-done .ty-step-btn { cursor: pointer; color: var(--ty-ink); }
.terminy-widget .ty-step.is-current .ty-step-btn { color: var(--ty-ink); font-weight: 600; }

.terminy-widget .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 .ty-step-dot svg { width: 13px; height: 13px; display: block; }

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

.terminy-widget .ty-step.is-current .ty-step-dot {
	background: var(--ty-primary);
	color: #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 .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 .ty-step-btn:focus-visible { outline: none; }
.terminy-widget .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 .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 .ty-progress { --ty-dot: 24px; margin-bottom: 20px; }
	.terminy-widget .ty-step-label { font-size: 11px; }
}

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

.terminy-widget .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 .ty-panel.is-entering,
.terminy-widget .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 .ty-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
}

.terminy-widget .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 .ty-choice:hover,
.terminy-widget .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 .ty-choice.is-active {
	border-color: var(--ty-primary);
	box-shadow: inset 0 0 0 1px var(--ty-primary);
}

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

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

.terminy-widget .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 .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 .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 .ty-time { min-height: 340px; }

	.terminy-widget .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 .ty-time { grid-template-columns: 1fr; gap: 4px; }

	.terminy-widget .ty-cal { max-width: 336px; margin: 0 auto; width: 100%; }

	.terminy-widget .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 .ty-day.is-empty { display: none; }
}

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

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

.terminy-widget .ty-cal-title { font-size: 15px; font-weight: 600; }

.terminy-widget .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 .ty-cal-nav:disabled { opacity: 0.3; cursor: default; }
.terminy-widget .ty-cal-nav:not(:disabled):hover,
.terminy-widget .ty-cal-nav:focus-visible { background: var(--ty-cell); color: var(--ty-ink); outline: none; }

.terminy-widget .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 .ty-cal-grid.is-month-in { animation: ty-month-in 0.28s cubic-bezier(0.25, 0.8, 0.35, 1); }
.terminy-widget .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 .ty-cal-weekdays { margin-bottom: 4px; gap: 4px; }

.terminy-widget .ty-cal-wd {
	text-align: center;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--ty-muted) 80%, transparent);
	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 .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 .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 .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 .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, and the number goes light. */
.terminy-widget .ty-cal-day.is-brim { background: var(--ty-deep-soft); }
.terminy-widget .ty-cal-day.is-brim .ty-cal-fill { background: var(--ty-deep-soft); }
.terminy-widget .ty-cal-day.is-brim .ty-cal-fill::before { display: none; }
.terminy-widget .ty-cal-day.is-brim .ty-cal-num { color: #fff; }

.terminy-widget .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 .ty-cal-day:focus-visible { outline: none; }
.terminy-widget .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 .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 .ty-cal-day.is-selected::before {
	box-shadow: inset 0 0 0 2px var(--ty-primary);
}

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

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

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

.terminy-widget .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 .ty-cal-day.is-loading { animation: ty-pulse 1s ease-in-out infinite; }

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

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

.terminy-widget .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 .ty-legend-box {
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 0;
	background: var(--ty-cell);
	overflow: hidden;
	flex: none;
}

.terminy-widget .ty-legend-box .ty-cal-fill { transition: none; }
.terminy-widget .ty-legend-box .ty-cal-fill::before { display: none; }
.terminy-widget .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 .ty-day-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

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

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

.terminy-widget .ty-day-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.terminy-widget .ty-day-title { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.terminy-widget .ty-day-free { margin: 0; color: var(--ty-muted); font-size: 13.5px; }
.terminy-widget .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 .ty-day.is-empty { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.terminy-widget .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 .ty-next-label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ty-muted);
}
.terminy-widget .ty-next-when { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--ty-ink); text-wrap: balance; }
.terminy-widget .ty-next .ty-btn { align-self: flex-start; }
.terminy-widget .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 .ty-day.is-empty { display: none; }
}

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

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

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

.terminy-widget .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 .ty-slots-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.terminy-widget .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 .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 .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 .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 .ty-slot:hover,
.terminy-widget .ty-slot:focus-visible {
	border-color: var(--ty-primary);
	color: var(--ty-primary);
	outline: none;
}

.terminy-widget .ty-slot.is-active {
	background: var(--ty-primary);
	border-color: var(--ty-primary);
	color: #fff;
	font-weight: 600;
}

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

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

.terminy-widget .ty-details { display: block; }

.terminy-widget .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 .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 .ty-summary-body { display: flex; flex-direction: column; gap: 4px; }
.terminy-widget .ty-summary-price { font-weight: 700; color: var(--ty-primary); }

/* One-line recap above the form - no tall side card. */
.terminy-widget .ty-summary-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 9px 14px;
	margin-bottom: 14px;
	font-size: 14px;
}

.terminy-widget .ty-summary-strip .ty-summary-item { color: var(--ty-muted); }
.terminy-widget .ty-summary-strip .ty-summary-item strong { color: var(--ty-ink); }
.terminy-widget .ty-summary-strip .ty-summary-price { margin-left: auto; }

/* 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 .ty-details {
	max-width: 560px;
	margin-inline: auto;
}

.terminy-widget .ty-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	align-items: start;
}

/* Field heights belong to the widget, never to the surrounding theme. */
.terminy-widget .ty-field > .ty-input {
	flex: 0 0 auto;
	align-self: stretch;
	height: auto;
	min-height: 0;
}

.terminy-widget textarea.ty-input {
	min-height: 62px;
	resize: vertical;
}

.terminy-widget .ty-field-wide { grid-column: 1 / -1; }
.terminy-widget .ty-field { display: flex; flex-direction: column; gap: 4px; }

.terminy-widget .ty-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ty-ink);
}

.terminy-widget .ty-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ty-line);
	border-radius: 10px;
	font: inherit;
	background: #fff;
	color: var(--ty-ink);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

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

.terminy-widget .ty-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

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

.terminy-widget .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 .ty-pay-line {
	margin: 0;
	font-size: 13px;
	color: var(--ty-muted);
}

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

.terminy-widget .ty-consent {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ty-muted);
	cursor: pointer;
}

.terminy-widget .ty-consent input { margin-top: 3px; }

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

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

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

.terminy-widget .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 .ty-btn:disabled { opacity: 0.5; cursor: default; }

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

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

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

.terminy-widget .ty-btn-ghost:hover { border-color: var(--ty-primary); color: var(--ty-primary); }

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

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

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

.terminy-widget .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 .ty-success-vessel .ty-vessel-svg { display: block; width: 66px; height: 88px; margin: 0 auto 6px; }
.terminy-widget .ty-success-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}
.terminy-widget .ty-success-note { color: #047857; font-weight: 600; }

.terminy-widget .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 .ty-status-confirmed { background: #d1fae5; color: #065f46; }
.terminy-widget .ty-status-pending { background: #fef3c7; color: #92400e; }
.terminy-widget .ty-status-cancelled { background: #fee2e2; color: #991b1b; }

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

.terminy-widget .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 .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 .ty-modal h4 { margin: 0; font-size: 18px; }

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

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

	.terminy-widget .ty-water,
	.terminy-widget .ty-cal-fill,
	.terminy-widget .ty-btn,
	.terminy-widget .ty-choice {
		transition: none !important;
	}

	.terminy-widget .ty-parallax { display: none; }
}

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

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

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

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

/* ---------- 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 .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 .ty-time.is-swapping {
		transition: height .42s cubic-bezier(.22, .9, .36, 1);
	}

	.terminy-widget .ty-cal,
	.terminy-widget .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 .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 .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 .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 .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 .ty-day-back:hover { border-color: var(--ty-primary); color: var(--ty-primary); }

	/* The times get the room the month gave up. */
	.terminy-widget .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 .ty-day-back { display: none; }
}

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