/*
 * peepme-broneering, the public booking page ([pmb_broneering]).
 *
 * Mobile first (390 px), tap targets of at least 44 px, text 16 px and up.
 * Colours and radii come from the theme's custom properties where it has
 * them, with fallbacks, so the page reads well under any theme. Everything
 * is scoped to .pmb-booking; every class carries Names::CSS_PREFIX ("pmb-").
 *
 * Themes style content tables and lists (".entry__body table { border-collapse:
 * collapse }", "table td { border… }"). The rules the calendar relies on are
 * repeated with a longer selector so such rules cannot break it.
 */

.pmb-booking,
.pmb-price-list {
	--pmb-ink: var(--ink, var(--wp--preset--color--contrast, #1f2328));
	--pmb-ink-soft: var(--ink-soft, #5c5f66);
	--pmb-paper: var(--white, var(--wp--preset--color--base, #ffffff));
	--pmb-line: var(--line, rgba(31, 35, 40, 0.14));
	--pmb-accent: var(--accent, var(--wp--preset--color--primary, #1f6f5c));
	--pmb-accent-dark: var(--accent-dark, #164f41);
	--pmb-free: #dff2e8;
	--pmb-partly: #fbf0cf;
	--pmb-full: #f6dedb;
	--pmb-quiet: #f1f0ed;
	--pmb-error: #b3261e;
	--pmb-focus: #1f6fd0;
	--pmb-radius: var(--radius, 1rem);
	--pmb-radius-small: var(--radius-small, 0.625rem);
	--pmb-shadow: 0 1px 2px rgba(31, 35, 40, 0.05), 0 12px 32px -12px rgba(31, 35, 40, 0.18);

	color: var(--pmb-ink);
	font-size: 1rem;
	line-height: 1.55;
}

.pmb-booking *,
.pmb-booking *::before,
.pmb-booking *::after,
.pmb-price-list *,
.pmb-price-list *::before,
.pmb-price-list *::after {
	box-sizing: border-box;
}

.pmb-booking > * + * {
	margin-top: 1.25rem;
}

.pmb-booking :focus-visible {
	outline: 3px solid var(--pmb-focus);
	outline-offset: 2px;
}

.pmb-booking h2 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.4rem, 5vw, 2rem);
	line-height: 1.15;
}

.pmb-booking .pmb-screen-reader-text,
.pmb-price-list .pmb-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pmb-intro {
	margin: 0;
	color: var(--pmb-ink-soft);
}

.pmb-optional {
	font-weight: 400;
	color: var(--pmb-ink-soft);
}

/* ---------------------------------------------------------------- buttons, links */

.pmb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.8rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--pmb-accent);
	color: #fff;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.pmb-button:hover,
.pmb-button:focus-visible {
	background: var(--pmb-accent-dark);
	color: #fff;
}

.pmb-button--ghost {
	background: var(--pmb-paper);
	color: var(--pmb-ink);
	box-shadow: inset 0 0 0 2px var(--pmb-line);
}

.pmb-button--ghost:hover,
.pmb-button--ghost:focus-visible {
	background: var(--pmb-paper);
	color: var(--pmb-ink);
	box-shadow: inset 0 0 0 2px var(--pmb-ink);
}

.pmb-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	font-weight: 700;
	color: var(--pmb-ink);
	text-decoration: none;
}

.pmb-back:hover,
.pmb-back:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- notices */

.pmb-notice {
	padding: 0.9rem 1.1rem;
	border-left: 5px solid var(--pmb-focus);
	border-radius: var(--pmb-radius-small);
	background: #eef4fb;
}

.pmb-notice--info {
	border-left-color: var(--pmb-focus);
	background: #eef4fb;
}

.pmb-notice--error {
	border-left-color: var(--pmb-error);
	background: #fdeceb;
}

.pmb-notice--success {
	border-left-color: var(--pmb-accent);
	background: #e9f6ef;
}

.pmb-notice p,
.pmb-notice ul {
	margin: 0;
}

.pmb-notice ul {
	margin-top: 0.35rem;
	padding-left: 1.2rem;
}

/* ---------------------------------------------------------------- service */

.pmb-service {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
}

.pmb-service p {
	margin: 0;
}

.pmb-service__name {
	font-size: 1.2rem;
	font-weight: 700;
}

.pmb-service__facts {
	color: var(--pmb-ink-soft);
}

.pmb-service__switch {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--pmb-ink);
}

.pmb-booking .pmb-services {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmb-services__link {
	display: grid;
	gap: 0.2rem;
	min-height: 3.5rem;
	padding: 1rem 1.2rem;
	border-radius: var(--pmb-radius);
	background: var(--pmb-paper);
	box-shadow: var(--pmb-shadow);
	color: var(--pmb-ink);
	text-decoration: none;
}

.pmb-services__link:hover {
	box-shadow: inset 0 0 0 2px var(--pmb-accent), var(--pmb-shadow);
}

.pmb-services__name {
	font-size: 1.2rem;
	font-weight: 700;
}

.pmb-services__facts {
	color: var(--pmb-ink-soft);
}

/* ---------------------------------------------------------------- month */

.pmb-month {
	padding: 1rem 0.5rem 1.25rem;
	border-radius: var(--pmb-radius);
	background: var(--pmb-paper);
	box-shadow: var(--pmb-shadow);
}

.pmb-month__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0 0.25rem 0.75rem;
}

.pmb-booking .pmb-month__title {
	margin: 0;
	text-align: center;
}

.pmb-month__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: var(--pmb-free);
	color: var(--pmb-ink);
	font-size: 1.9rem;
	line-height: 1;
	text-decoration: none;
}

.pmb-month__arrow:hover,
.pmb-month__arrow:focus-visible {
	background: var(--pmb-accent);
	color: #fff;
}

.pmb-month__arrow--none {
	visibility: hidden;
}

/* A collapsed table ignores border-spacing: the tiles would touch. Stated
   with the plugin's own wrapper and the theme's usual content wrappers, so
   a theme's "table { border-collapse: collapse }" cannot win. */
.pmb-booking table.pmb-month__grid,
.entry-content .pmb-booking table.pmb-month__grid,
.entry__body .pmb-booking table.pmb-month__grid {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 3px;
	table-layout: fixed;
	background: transparent;
	font-size: 1rem;
}

.pmb-booking table.pmb-month__grid th,
.pmb-booking table.pmb-month__grid td,
.entry-content .pmb-booking table.pmb-month__grid th,
.entry-content .pmb-booking table.pmb-month__grid td,
.entry__body .pmb-booking table.pmb-month__grid th,
.entry__body .pmb-booking table.pmb-month__grid td {
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	vertical-align: top;
}

.pmb-booking table.pmb-month__grid th {
	padding-bottom: 0.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pmb-ink-soft);
}

.pmb-booking table.pmb-month__grid abbr {
	border: 0;
	text-decoration: none;
}

.pmb-booking table.pmb-month__grid td.pmb-day {
	width: 14.2857%;
}

.pmb-day__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.1rem;
	min-height: 3.5rem;
	padding: 0.35rem 0.1rem;
	overflow: hidden;
	border-radius: var(--pmb-radius-small);
	color: var(--pmb-ink);
	text-decoration: none;
}

a.pmb-day__link:hover {
	box-shadow: inset 0 0 0 2px var(--pmb-ink);
}

.pmb-day__number {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
}

.pmb-day__state {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.1;
}

.pmb-day__icon {
	font-size: 0.9rem;
	line-height: 1;
}

/* On a phone the icon speaks and the legend says what it means; from
   40rem the word is there too. */
.pmb-day__word {
	display: none;
}

.pmb-day--free .pmb-day__link {
	background: var(--pmb-free);
}

.pmb-day--partly .pmb-day__link {
	background: var(--pmb-partly);
}

.pmb-day--full .pmb-day__link {
	background: var(--pmb-full);
	color: #6b2a24;
}

.pmb-day--closed .pmb-day__link,
.pmb-day--past .pmb-day__link {
	background: var(--pmb-quiet);
	color: #8a857d;
}

.pmb-day--past .pmb-day__number {
	font-weight: 400;
}

.pmb-day--today .pmb-day__link {
	box-shadow: inset 0 0 0 2px var(--pmb-focus);
}

.pmb-day--blank {
	background: transparent;
}

.pmb-booking .pmb-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.pmb-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.pmb-legend__item--free .pmb-day__icon {
	color: var(--pmb-accent);
}

.pmb-legend__item--partly .pmb-day__icon {
	color: #8a6a12;
}

.pmb-legend__item--full .pmb-day__icon {
	color: #6b2a24;
}

.pmb-legend__item--closed .pmb-day__icon {
	color: #8a857d;
}

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

.pmb-booking .pmb-date {
	margin: 0;
	font-size: clamp(1.8rem, 7vw, 2.8rem);
}

.pmb-date__weekday {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pmb-ink-soft);
}

.pmb-booking .pmb-slots {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmb-slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	min-height: 3.5rem;
	padding: 0.75rem 1.1rem;
	border-radius: var(--pmb-radius-small);
	background: var(--pmb-paper);
	box-shadow: inset 0 0 0 2px var(--pmb-line);
	color: var(--pmb-ink);
	text-decoration: none;
}

a.pmb-slot:hover,
a.pmb-slot:focus-visible {
	background: var(--pmb-free);
	box-shadow: inset 0 0 0 3px var(--pmb-accent);
}

.pmb-slot__time {
	font-size: 1.25rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pmb-slot__state {
	font-weight: 600;
}

.pmb-slot--free .pmb-slot__state {
	color: var(--pmb-accent);
}

/* The price of a free time, when the service has one in numbers. */
.pmb-slot__price {
	margin-left: auto;
	margin-right: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.pmb-slot--full {
	background: var(--pmb-quiet);
	box-shadow: none;
	color: #6f6a62;
}

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

.pmb-summary {
	padding: 1rem 1.2rem;
	border-radius: var(--pmb-radius);
	background: var(--pmb-paper);
	box-shadow: var(--pmb-shadow);
}

.pmb-booking .pmb-summary h2 {
	font-size: 1.25rem;
}

.pmb-summary__facts,
.pmb-thanks__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 1rem;
	margin: 0;
}

.pmb-summary__facts dt,
.pmb-thanks__facts dt {
	font-weight: 700;
}

.pmb-summary__facts dd,
.pmb-thanks__facts dd {
	margin: 0;
}

.pmb-form {
	display: grid;
	gap: 1.25rem;
}

.pmb-fields {
	display: grid;
	gap: 1rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pmb-fields legend {
	margin-bottom: 0.6rem;
	padding: 0;
	font-size: 1.3rem;
	font-weight: 800;
}

.pmb-field {
	display: grid;
	gap: 0.3rem;
}

.pmb-field label,
.pmb-consent label {
	font-weight: 700;
}

.pmb-field input,
.pmb-field textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.7rem 0.85rem;
	border: 2px solid rgba(31, 35, 40, 0.28);
	border-radius: var(--pmb-radius-small);
	background: var(--pmb-paper);
	color: var(--pmb-ink);
	font: inherit;
	font-size: 1.0625rem;
}

.pmb-field textarea {
	min-height: 6rem;
	resize: vertical;
}

.pmb-field input:focus,
.pmb-field textarea:focus {
	border-color: var(--pmb-focus);
}

.pmb-field__help {
	margin: -0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--pmb-ink-soft);
}

.pmb-field__error {
	margin: 0;
	color: var(--pmb-error);
	font-weight: 700;
}

.pmb-has-error input,
.pmb-has-error textarea {
	border-color: var(--pmb-error);
}

.pmb-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.3rem 0.8rem;
	padding: 1rem;
	border-radius: var(--pmb-radius-small);
	background: var(--pmb-paper);
	box-shadow: inset 0 0 0 2px var(--pmb-line);
}

.pmb-consent.pmb-has-error {
	box-shadow: inset 0 0 0 2px var(--pmb-error);
}

.pmb-consent input {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.1rem 0 0;
	accent-color: var(--pmb-accent);
}

.pmb-consent .pmb-field__error {
	grid-column: 2;
}

.pmb-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pmb-form__submit {
	width: 100%;
	min-height: 3.5rem;
	font-size: 1.125rem;
}

.pmb-form__note {
	margin: -0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--pmb-ink-soft);
}

/* ---------------------------------------------------------------- thank you */

.pmb-thanks {
	padding: 1.4rem 1.3rem;
	border-top: 6px solid var(--pmb-accent);
	border-radius: var(--pmb-radius);
	background: var(--pmb-paper);
	box-shadow: var(--pmb-shadow);
}

.pmb-thanks__number {
	font-size: 1.2rem;
}

.pmb-thanks__number strong {
	font-size: 1.5rem;
}

.pmb-thanks__facts {
	margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------- wider screens */

@media (min-width: 40rem) {
	.pmb-month {
		padding: 1.5rem 1.25rem;
	}

	.pmb-booking table.pmb-month__grid,
	.entry-content .pmb-booking table.pmb-month__grid,
	.entry__body .pmb-booking table.pmb-month__grid {
		border-spacing: 6px;
	}

	.pmb-booking table.pmb-month__grid th {
		padding: 0 0.6rem 0.35rem;
		text-align: left;
	}

	.pmb-day__link {
		align-items: flex-start;
		min-height: 5rem;
		padding: 0.5rem 0.6rem;
		text-align: left;
	}

	.pmb-day__word {
		display: inline;
	}

	.pmb-booking .pmb-slots {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}

	.pmb-booking .pmb-services {
		grid-template-columns: 1fr 1fr;
	}

	.pmb-form__submit {
		justify-self: start;
		width: auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pmb-button,
	.pmb-slot,
	.pmb-month__arrow {
		transition: background-color 0.2s ease, box-shadow 0.2s ease;
	}
}

/* ---------------------------------------------------------------- paying online */

.pmb-pay {
	margin: 1.25em 0;
}

/* ------------------------------------------------------------- extras */

.pmb-extra {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 0.75rem;
	align-items: start;
	padding: 0.85rem 1rem;
	border-radius: var(--pmb-radius-small);
	background: var(--pmb-paper);
	box-shadow: inset 0 0 0 2px var(--pmb-line);
}

.pmb-extra + .pmb-extra {
	margin-top: 0.6rem;
}

.pmb-extra:has(> input:checked) {
	background: var(--pmb-free);
	box-shadow: inset 0 0 0 2px var(--pmb-accent);
}

.pmb-extra > input[type="checkbox"] {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.1rem 0 0;
	accent-color: var(--pmb-accent);
}

.pmb-extra > label {
	font-weight: 700;
}

.pmb-extra__price {
	display: block;
	font-weight: 400;
	color: var(--pmb-ink-soft);
}

.pmb-extra__description,
.pmb-extra__choice,
.pmb-extra__tiers {
	grid-column: 2;
	margin: 0;
}

.pmb-extra__choice input {
	width: 6rem;
	min-height: 2.75rem;
	margin-left: 0.5rem;
}

.pmb-booking .pmb-extra__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	border: 0;
}

.pmb-extra__tier {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.25rem 0.85rem;
	border-radius: 999px;
	box-shadow: inset 0 0 0 2px var(--pmb-line);
	background: var(--pmb-paper);
}

.pmb-js .pmb-recalculate {
	display: none;
}

.pmb-price {
	padding: 1.1rem 1.25rem;
	border-radius: var(--pmb-radius);
	background: var(--pmb-paper);
	box-shadow: var(--pmb-shadow);
}

.pmb-booking table.pmb-price__lines {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.pmb-booking table.pmb-price__lines th,
.pmb-booking table.pmb-price__lines td {
	padding: 0.55rem 0;
	border: 0;
	border-bottom: 1px solid var(--pmb-line);
	background: none;
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.pmb-booking table.pmb-price__lines td {
	padding-left: 1rem;
	text-align: right;
	white-space: nowrap;
}

.pmb-booking table.pmb-price__lines tfoot th,
.pmb-booking table.pmb-price__lines tfoot td {
	border-bottom: 0;
	font-size: 1.25rem;
	font-weight: 800;
}

.pmb-price__deposit,
.pmb-price__problem {
	margin: 0.5rem 0 0;
}

.pmb-price__problem {
	color: var(--pmb-error);
	font-weight: 600;
}

/* ----------------------------------------------- price list ([pmb_hinnakiri]) */

.pmb-price-list {
	color: var(--pmb-ink);
	line-height: 1.5;
}

.pmb-price-list > * + * {
	margin-top: 1.5rem;
}

.pmb-price-list table.pmb-price-list__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--pmb-radius);
	background: var(--pmb-paper);
	box-shadow: var(--pmb-shadow);
	overflow: hidden;
}

.pmb-price-list table.pmb-price-list__table th,
.pmb-price-list table.pmb-price-list__table td {
	padding: 0.8rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--pmb-line);
	background: none;
	text-align: left;
	vertical-align: top;
}

.pmb-price-list table.pmb-price-list__table thead th {
	font-size: 0.9rem;
	color: var(--pmb-ink-soft);
}

.pmb-price-list table.pmb-price-list__table tbody th {
	font-weight: 700;
}

.pmb-price-list table.pmb-price-list__table td {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pmb-price-list table.pmb-price-list__table--rows td:first-child {
	white-space: normal;
	font-weight: 700;
}

.pmb-price-list table.pmb-price-list__table tr:last-child > * {
	border-bottom: 0;
}

.pmb-price-list .pmb-price-list__more th {
	padding-left: 2rem;
	font-weight: 400;
	color: var(--pmb-ink-soft);
}

.pmb-price-list__note {
	display: block;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--pmb-ink-soft);
}

/* A phone: each service a card, the kind of day beside its price. */
@media (max-width: 40rem) {
	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows),
	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) tbody,
	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) tr,
	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) th,
	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) td {
		display: block;
	}

	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border-bottom: 0;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) td::before {
		content: attr(data-label);
		color: var(--pmb-ink-soft);
	}

	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) tr {
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--pmb-line);
	}

	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) th {
		border-bottom: 0;
	}

	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) tr.pmb-price-list__more {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
	}

	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) tr.pmb-price-list__more th {
		padding-left: 1rem;
	}

	.pmb-price-list table.pmb-price-list__table:not(.pmb-price-list__table--rows) tr.pmb-price-list__more td::before {
		content: none;
	}

	.pmb-price-list table.pmb-price-list__table--rows td {
		white-space: normal;
	}

	.pmb-price-list table.pmb-price-list__table--rows td:first-child {
		width: 38%;
	}
}