/* UB Kit's booking blocks: ub/booking-calendar (.ub-bk-cal), ub/booking-form (.ub-booking-form), ub/booking-search
   (.ub-bk-search). Colours, type and corners come from the theme (theme.json presets; the starter's slugs, with plain
   fallbacks); the block settings (padding, colours, font size) work on each. A state is never colour alone: booked days
   carry a cross, past days a dash, free days their price or a tick, and their word for screen readers. The pop-up
   calendar (.ub-bk-picker, booking-picker.js) is a <dialog> inside the form or the search, so it inherits their tokens. */
.ub-bk-cal, .ub-booking-form, .ub-bk-search {
	--ub-bk-ink: var(--wp--preset--color--ink, currentColor);
	--ub-bk-muted: var(--wp--preset--color--muted, color-mix(in srgb, currentColor 62%, transparent));
	--ub-bk-line: var(--wp--preset--color--line, color-mix(in srgb, currentColor 16%, transparent));
	--ub-bk-base: var(--wp--preset--color--base, #fff);
	--ub-bk-primary: var(--wp--preset--color--primary, #1f5f4a);
	--ub-bk-on-primary: var(--wp--preset--color--on-primary, #fff);
	--ub-bk-radius: var(--wp--custom--form--radius, 10px);
	--ub-bk-error: var(--wp--custom--form--error, #b42318);
	font-variant-numeric: tabular-nums;
}
.ub-bk-sr { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ub-bk-icon { display: inline-block; vertical-align: middle; flex: none; }

/* ---- ub/booking-calendar ---- */
/* Sized by its own width (a container): items × days where it's wide, days × items (up to four items) where it's narrow */
.ub-bk-cal { --ub-bk-cell: 2.75rem; container-type: inline-size; }
.ub-bk-cal[aria-busy="true"] .ub-bk-cal__scroll { opacity: 0.6; }
.ub-bk-cal__bar { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 0.75rem; }
.ub-bk-cal__title { flex: 1; margin: 0; text-align: center; font-size: var(--wp--preset--font-size--large, 1.25rem); }
.ub-bk-cal__title:focus { outline: none; }
.ub-bk-cal__nav {
	display: inline-grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem;
	border: 1px solid var(--ub-bk-line); border-radius: 999px; color: inherit; text-decoration: none; font-size: 1.5rem; line-height: 1;
}
a.ub-bk-cal__nav:hover { border-color: currentColor; }
.ub-bk-cal__nav.is-off { opacity: 0.3; }
/* position: the screen-reader words (absolute) stay inside the scrolling box, not past the page's edge */
.ub-bk-cal__scroll {
	position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
	border: 1px solid var(--ub-bk-line); border-radius: var(--ub-bk-radius); background: var(--ub-bk-base);
}
.ub-bk-cal__scroll:focus-visible { outline: 2px solid var(--ub-bk-primary); outline-offset: 2px; }
.ub-bk-cal__table { border-collapse: separate; border-spacing: 0; inline-size: max-content; min-inline-size: 100%; margin: 0; font-size: 0.8125rem; }
.ub-bk-cal__table :is(th, td) {
	min-inline-size: var(--ub-bk-cell); block-size: var(--ub-bk-cell); padding: 0 0.125rem; text-align: center;
	border: 0; border-block-end: 1px solid var(--ub-bk-line); border-inline-end: 1px solid color-mix(in srgb, var(--ub-bk-line) 55%, transparent);
	scroll-snap-align: start;
}
.ub-bk-cal__table tbody tr:last-child :is(th, td) { border-block-end: 0; }
.ub-bk-cal__table thead th { font-weight: 600; color: var(--ub-bk-ink); line-height: 1.15; padding-block: 0.35rem; }
.ub-bk-cal__table thead abbr { display: block; text-decoration: none; font-size: 0.6875rem; font-weight: 500; color: var(--ub-bk-muted); }
.ub-bk-cal__table thead th.is-weekend, .ub-bk-cal__table td.is-weekend { background-color: color-mix(in srgb, var(--ub-bk-ink) 3%, transparent); }
.ub-bk-cal__table thead th:is(.is-month-start), .ub-bk-cal__table td.is-month-start { border-inline-start: 2px solid var(--ub-bk-line); }
/* Today: "Azi" in the weekday's place and its date in a ring */
.ub-bk-cal__table th[aria-current="date"] abbr { color: var(--ub-bk-primary); font-weight: 700; }
.ub-bk-cal__table thead th[aria-current="date"] > span, .ub-bk-cal__table--rows th[aria-current="date"] .ub-bk-cal__dn {
	display: inline-grid; place-items: center; min-inline-size: 1.65rem; block-size: 1.65rem; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ub-bk-primary);
}
.ub-bk-cal__table :is(tbody th, .ub-bk-cal__corner) {
	position: sticky; inset-inline-start: 0; z-index: 1; min-inline-size: 9rem; max-inline-size: 13rem; padding-inline: 0.75rem;
	text-align: start; background: var(--ub-bk-base); box-shadow: 1px 0 0 var(--ub-bk-line); white-space: normal; line-height: 1.25;
}
.ub-bk-cal__corner { font-weight: 500; color: var(--ub-bk-muted); }
.ub-bk-cal__table tbody th a { color: inherit; font-weight: 600; text-decoration: none; }
.ub-bk-cal__table tbody th a:hover { text-decoration: underline; }
.ub-bk-cal__cap { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ub-bk-muted); }
.ub-bk-cal__table td.is-free { background-color: color-mix(in srgb, var(--ub-bk-primary) 9%, transparent); color: var(--ub-bk-ink); padding: 0; }
.ub-bk-cal__price { font-size: 0.75rem; font-weight: 600; }
/* A free day is a link to its item's form with that pickup date: the whole cell */
.ub-bk-cal__go { display: grid; place-items: center; box-sizing: border-box; inline-size: 100%; min-block-size: var(--ub-bk-cell); color: inherit; text-decoration: none; }
.ub-bk-cal__go:hover { background-color: color-mix(in srgb, var(--ub-bk-primary) 18%, transparent); }
.ub-bk-cal__go:focus-visible { outline: 2px solid var(--ub-bk-primary); outline-offset: -2px; }
.ub-bk-cal__table td.is-free .ub-bk-icon, .ub-bk-legend__mark.is-free .ub-bk-icon { color: var(--ub-bk-primary); }
.ub-bk-cal__table td.is-booked { color: var(--ub-bk-muted); }
.ub-bk-cal__table td:is(.is-past, .is-closed) { color: var(--ub-bk-muted); opacity: 0.6; }
.ub-bk-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--ub-bk-muted); }
.ub-bk-legend li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.ub-bk-legend__mark { display: inline-grid; place-items: center; min-inline-size: 2rem; block-size: 1.75rem; padding-inline: 0.25rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--ub-bk-ink); border: 1px solid var(--ub-bk-line); }
.ub-bk-legend__mark.is-free { background: color-mix(in srgb, var(--ub-bk-primary) 9%, transparent); }
.ub-bk-legend__mark:is(.is-booked, .is-past) { color: var(--ub-bk-muted); }
/* Days × items: the day's name stays at the start of its row, the items' names at the top while the days scroll */
.ub-bk-cal__scroll--rows { display: none; max-block-size: min(75svh, 48rem); overflow: auto; }
.ub-bk-cal__table--rows { inline-size: 100%; }
.ub-bk-cal__table--rows :is(th, td) { scroll-snap-align: none; }
.ub-bk-cal__table--rows thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--ub-bk-base); box-shadow: 0 1px 0 var(--ub-bk-line); padding-inline: 0.35rem; font-size: 0.75rem; line-height: 1.2; }
.ub-bk-cal__table--rows thead th a { color: inherit; font-weight: 600; text-decoration: none; }
.ub-bk-cal__table--rows thead .ub-bk-cal__corner { z-index: 3; min-inline-size: 5.25rem; }
.ub-bk-cal__table--rows tbody th { min-inline-size: 5.25rem; max-inline-size: 6.5rem; padding-inline: 0.5rem; font-weight: 600; white-space: nowrap; }
.ub-bk-cal__table--rows tbody th abbr { text-decoration: none; font-weight: 500; color: var(--ub-bk-muted); }
.ub-bk-cal__table--rows .ub-bk-cal__mon { font-weight: 400; color: var(--ub-bk-muted); }
.ub-bk-cal__table--rows tr.is-weekend th { background-color: color-mix(in srgb, var(--ub-bk-ink) 3%, var(--ub-bk-base)); }
.ub-bk-cal__table--rows tr.is-month-start :is(th, td) { border-block-start: 2px solid var(--ub-bk-line); }
.ub-bk-cal__table--rows td.is-month-start { border-inline-start: 0; }
@container (width < 40rem) {
	.ub-bk-cal { --ub-bk-cell: 2.5rem; }
	.ub-bk-cal__table :is(tbody th, .ub-bk-cal__corner) { min-inline-size: 7rem; max-inline-size: 8.5rem; padding-inline: 0.5rem; }
	.ub-bk-cal:has(.ub-bk-cal__scroll--rows) .ub-bk-cal__scroll--wide { display: none; }
	.ub-bk-cal__scroll--rows { display: block; }
	.ub-bk-cal__table--rows tbody th { min-inline-size: 5.25rem; max-inline-size: 6.5rem; }
}

/* ---- ub/booking-form ---- */
.ub-booking-form { max-inline-size: 48rem; container-type: inline-size; }
.ub-bk-form { margin: 0; }
.ub-bk-form__fields, .ub-bk-search__form { display: grid; gap: 0.75rem; }
.ub-bk-form__fields { grid-template-columns: 1fr 1fr; }
/* The date fields: the browser's own (without JavaScript) or a button that opens the pop-up calendar (.is-picker), the
   same size, so nothing moves when the script takes over */
.ub-bk-date, .ub-bk-search__field, .ub-bk-pick { display: grid; gap: 0.3rem; margin: 0; }
.ub-bk-date > span, .ub-bk-search__field > span, .ub-bk-pick__label { font-size: 0.875rem; font-weight: 600; }
.ub-bk-date input, .ub-bk-search__field :is(input, select), .ub-bk-pick__value {
	box-sizing: border-box; inline-size: 100%; min-block-size: 3rem; padding: 0.5rem 0.75rem; margin: 0;
	border: 1px solid var(--ub-bk-line); border-radius: var(--ub-bk-radius); background: var(--ub-bk-base); color: var(--ub-bk-ink); font: inherit;
}
.ub-bk-pick { display: none; appearance: none; inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.is-picker .ub-bk-date { display: none; }
.is-picker .ub-bk-pick { display: grid; }
.ub-bk-pick__value { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-bk-pick.is-empty .ub-bk-pick__value { color: var(--ub-bk-muted); }
.ub-bk-pick.is-missing .ub-bk-pick__value { border-color: var(--ub-bk-error); box-shadow: inset 0 0 0 1px var(--ub-bk-error); }
.ub-bk-form__status.is-error { color: var(--ub-bk-error); font-weight: 600; }
.ub-bk-pick:hover .ub-bk-pick__value { border-color: currentColor; }
.ub-bk-pick:focus-visible { outline: none; }
.ub-bk-pick:focus-visible .ub-bk-pick__value { outline: 2px solid var(--ub-bk-primary); outline-offset: 1px; }
.ub-bk-months { position: relative; margin-block: 1.25rem 0.5rem; }
.ub-bk-months__bar { position: absolute; inset-inline: 0; inset-block-start: 0; display: flex; justify-content: space-between; pointer-events: none; }
.ub-bk-months:not(.is-live) .ub-bk-months__bar { display: none; }
/* The server's months are the availability without JavaScript; with it they live in the pop-up */
@media (scripting: enabled) {
	.ub-bk-form > .ub-bk-months { display: none; }
}
.ub-bk-months__nav {
	pointer-events: auto; display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; padding: 0;
	border: 1px solid var(--ub-bk-line); border-radius: 999px; background: var(--ub-bk-base); color: inherit; font: inherit; font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.ub-bk-months__nav:hover:not(:disabled) { border-color: currentColor; }
.ub-bk-months__nav:disabled { opacity: 0.3; cursor: default; }
.ub-bk-months__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.ub-bk-month__title { margin: 0.45rem 0 0.75rem; padding-inline: 2.75rem; text-align: center; font-size: 1rem; }
.ub-bk-month__grid { inline-size: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; }
.ub-bk-month__grid :is(th, td) { padding: 1px; border: 0; text-align: center; }
.ub-bk-month__grid th { padding-block-end: 0.35rem; font-size: 0.75rem; font-weight: 500; color: var(--ub-bk-muted); }
.ub-bk-month__grid abbr { text-decoration: none; }
.ub-bk-day {
	position: relative; appearance: none; box-sizing: border-box; display: grid; place-content: center; justify-items: center; gap: 0.05rem;
	inline-size: 100%; min-block-size: 2.9rem; padding: 0.15rem 0; margin: 0; border: 0; border-radius: 0.5rem;
	background: transparent; color: var(--ub-bk-ink); font: inherit; line-height: 1.1; cursor: pointer;
}
.ub-bk-day__n { font-size: 0.9375rem; font-weight: 600; }
.ub-bk-day__p { font-size: 0.6875rem; color: var(--ub-bk-muted); }
.ub-bk-day.is-free:hover:not(.is-start, .is-end) { background: color-mix(in srgb, var(--ub-bk-primary) 12%, transparent); }
.ub-bk-day:focus-visible { outline: 2px solid var(--ub-bk-primary); outline-offset: 1px; position: relative; z-index: 1; }
.ub-bk-day:disabled { cursor: default; color: var(--ub-bk-muted); }
.ub-bk-day.is-booked .ub-bk-day__n { text-decoration: line-through; text-decoration-thickness: 1px; }
.ub-bk-day:is(.is-past, .is-closed) { opacity: 0.45; }
.ub-bk-day.is-out { opacity: 0.35; cursor: not-allowed; }
.ub-bk-day.is-in { background: color-mix(in srgb, var(--ub-bk-primary) 14%, transparent); border-radius: 0; }
.ub-bk-day:is(.is-start, .is-end) { background: var(--ub-bk-primary); color: var(--ub-bk-on-primary); }
.ub-bk-day:is(.is-start, .is-end) .ub-bk-day__p { color: inherit; opacity: 0.85; }
.ub-bk-form__status { min-block-size: 1.5em; margin: 0.25rem 0 0.75rem; font-size: 0.9375rem; color: var(--ub-bk-muted); }
.ub-bk-form__quote:empty { display: none; }
.ub-bk-form__quote { padding: 1rem; border: 1px solid var(--ub-bk-line); border-radius: var(--ub-bk-radius); }
.ub-bk-quote__when { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ub-bk-quote__when p { margin: 0; }
.ub-bk-quote__when span { display: block; font-size: 0.8125rem; color: var(--ub-bk-muted); }
.ub-bk-quote__lines { inline-size: 100%; margin: 0.75rem 0 0; border-collapse: collapse; }
.ub-bk-quote__lines :is(th, td) { padding: 0.45rem 0; border: 0; border-block-end: 1px solid var(--ub-bk-line); }
.ub-bk-quote__lines th { text-align: start; font-weight: 400; }
.ub-bk-quote__lines td { text-align: end; white-space: nowrap; padding-inline-start: 1rem; }
.ub-bk-quote__total :is(th, td) { border-block-end: 0; padding-block-start: 0.65rem; font-size: 1.125rem; font-weight: 700; }
.ub-bk-quote__deposit { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ub-bk-muted); }
.ub-bk-quote__error { margin: 0; color: var(--ub-bk-error); font-weight: 600; }
.ub-bk-form__submit { inline-size: 100%; min-block-size: 3.25rem; margin-block-start: 1rem; font-size: 1.0625rem; }
.ub-bk-form__submit:disabled { opacity: 0.45; cursor: not-allowed; }
.ub-bk-form__note { margin: 0.6rem 0 0; text-align: center; font-size: 0.875rem; color: var(--ub-bk-muted); }
/* ---- The pop-up calendar: under the fields where there's room, a sheet from the bottom on a phone ---- */
.ub-bk-picker {
	box-sizing: border-box; container-type: inline-size; position: fixed; inset: auto; margin: 0; padding: 0;
	inline-size: min(44rem, calc(100vw - 2rem)); max-inline-size: none; max-block-size: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain;
	border: 1px solid var(--ub-bk-line); border-radius: calc(var(--ub-bk-radius) * 1.6); background: var(--ub-bk-base); color: var(--ub-bk-ink);
	box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.45);
}
.ub-bk-picker::backdrop { background: rgb(0 0 0 / 0.2); }
.ub-bk-picker__box { padding: 0.75rem 1.25rem 1.25rem; }
.ub-bk-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ub-bk-picker__title { margin: 0; font-weight: 700; }
.ub-bk-picker__x { display: inline-grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; margin-inline-end: -0.5rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.ub-bk-picker__x:hover { background: color-mix(in srgb, var(--ub-bk-ink) 8%, transparent); }
.ub-bk-picker .ub-bk-months { margin-block: 0.5rem 0; }
.ub-bk-picker__status { min-block-size: 1.5em; margin: 0.75rem 0; font-size: 0.9375rem; color: var(--ub-bk-muted); }
.ub-bk-picker__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ub-bk-picker__clear { min-block-size: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.ub-bk-picker__done { min-block-size: 2.75rem; }
@media (width < 37.5em) {
	.ub-bk-picker { inset: auto 0 0 0; inline-size: 100%; max-block-size: 92dvh; border-width: 1px 0 0; border-radius: calc(var(--ub-bk-radius) * 1.6) calc(var(--ub-bk-radius) * 1.6) 0 0; }
	.ub-bk-picker__box { padding-block-end: max(1.25rem, env(safe-area-inset-bottom)); }
}
/* One month where the form or the pop-up is narrow (a phone, a product page's side column): by its width, not the screen's */
@container (width < 34rem) {
	.ub-bk-months__list { grid-template-columns: minmax(0, 1fr); }
	.ub-bk-month + .ub-bk-month { display: none; }
	.ub-bk-day { min-block-size: 2.75rem; }
}

/* ---- ub/booking-search ---- */
.ub-bk-search__form {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(6rem, auto) auto; align-items: end;
	padding: 0.75rem; border: 1px solid var(--ub-bk-line); border-radius: calc(var(--ub-bk-radius) * 1.6);
	background: var(--ub-bk-base); box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.35);
}
.ub-bk-search__go { min-block-size: 3rem; white-space: nowrap; }
.ub-bk-search__results:empty { display: none; }
.ub-bk-search__results { margin-block-start: 1.5rem; }
.ub-bk-search__results[aria-busy="true"] { opacity: 0.6; }
.ub-bk-results__summary { margin: 0 0 1rem; font-weight: 600; }
.ub-bk-results__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ub-bk-result { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0 0 1rem; overflow: hidden; border: 1px solid var(--ub-bk-line); border-radius: var(--ub-bk-radius); background: var(--ub-bk-base); }
.ub-bk-result > :not(.ub-bk-result__media) { margin-inline: 1rem; }
.ub-bk-result__media { display: block; margin-block-end: 0.5rem; }
.ub-bk-result__img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ub-bk-result__name { margin: 0; font-size: 1.125rem; }
.ub-bk-result__name a { color: inherit; text-decoration: none; }
.ub-bk-result__cap, .ub-bk-result__total { margin-block: 0; color: var(--ub-bk-muted); }
.ub-bk-result__total strong { color: var(--ub-bk-ink); font-size: 1.125rem; }
.ub-bk-result__book { margin-block-start: auto; text-align: center; }
.ub-bk-results__other { margin-block-start: 1.25rem; font-size: 0.9375rem; color: var(--ub-bk-muted); }
.ub-bk-results__other p { margin: 0 0 0.25rem; }
.ub-bk-results__other ul { margin: 0; padding-inline-start: 1.25rem; }
@media (width < 48rem) {
	.ub-bk-search__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ub-bk-search__go { grid-column: span 1; }
	.ub-bk-search__form:not(:has(select)) .ub-bk-search__go { grid-column: 1 / -1; }
}