/*
 * 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-invite,
.pmb-reviews {
	--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,
.pmb-invite *,
.pmb-invite *::before,
.pmb-invite *::after,
.pmb-reviews *,
.pmb-reviews *::before,
.pmb-reviews *::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,
.pmb-reviews .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);
}

/* "Soovin arvet ettevõttele": the company's invoice fields, folded until
   asked for. A <details>, so it opens without JavaScript; the summary is
   a full-width row tall enough for a thumb. */
.pmb-invoice {
	border-radius: var(--pmb-radius-small);
	background: var(--pmb-paper);
	box-shadow: inset 0 0 0 2px var(--pmb-line);
}

.pmb-invoice__summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0.7rem 1rem;
	border-radius: var(--pmb-radius-small);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.pmb-invoice__summary::-webkit-details-marker {
	display: none;
}

/* The arrow: right when folded, down when open. */
.pmb-invoice__summary::before {
	content: "";
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

.pmb-invoice[open] > .pmb-invoice__summary::before {
	transform: rotate(45deg);
}

.pmb-invoice__fields {
	display: grid;
	gap: 1rem;
	padding: 0.5rem 1rem 1rem;
}

.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;
}

/* "Tee peole kutse" first, "Tagasi kalendrisse" beside it; under each other on a phone. */
.pmb-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

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

/* A booking this browser left unpaid: filled by the script, empty until then. */

.pmb-resume {
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
	border-left: 5px solid var(--pmb-accent);
	border-radius: var(--pmb-radius-small);
	background: #e9f6ef;
}

.pmb-resume[hidden] {
	display: none;
}

.pmb-resume p {
	margin: 0 0 0.5rem;
}

.pmb-resume .pmb-pay {
	margin: 0.75rem 0 0;
}

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

/* One card per extra: the box to tick, the name with its price on the right
   (a long price drops under the name), and below them what the extra asks
   for. Hours, pieces and tiers show only once the extra is ticked, so the
   list stays a list of names and prices until something is picked. */
.pmb-extra {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 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);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.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);
	cursor: pointer;
}

.pmb-extra > label {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 1rem;
	align-items: baseline;
	font-weight: 700;
	cursor: pointer;
}

.pmb-extra__price {
	white-space: nowrap;
	font-weight: 700;
	color: var(--pmb-accent-dark);
	font-variant-numeric: tabular-nums;
}

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

.pmb-extra__description {
	color: var(--pmb-ink-soft);
	font-size: 0.9375rem;
}

.pmb-extra__choice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	align-items: center;
}

.pmb-extra__choice input {
	width: 5.5rem;
	min-height: 2.75rem;
	padding: 0.45rem 0.7rem;
	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;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.pmb-extra__choice input:focus {
	border-color: var(--pmb-focus);
}

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

/* A tier is a button to press: the radio itself sits under the label, still
   reachable with the keyboard, and the picked one is filled. */
.pmb-extra__tier {
	position: relative;
	display: inline-flex;
}

.pmb-extra__tier input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.pmb-extra__tier label {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.25rem 1rem;
	border-radius: 999px;
	box-shadow: inset 0 0 0 2px var(--pmb-line);
	background: var(--pmb-paper);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pmb-extra__tier input:checked + label {
	box-shadow: none;
	background: var(--pmb-accent);
	color: #fff;
	font-weight: 700;
}

.pmb-extra__tier input:focus-visible + label {
	outline: 3px solid var(--pmb-focus);
	outline-offset: 2px;
}

@supports selector(:has(*)) {
	.pmb-extra:not(:has(> input:checked)) > .pmb-extra__choice,
	.pmb-extra:not(:has(> input:checked)) > .pmb-extra__tiers {
		display: none;
	}
}

.pmb-extra__choice .pmb-field__help {
	flex-basis: 100%;
	margin: 0;
}

.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%;
	}
}

/* ================================================================ invitation ([pmb_kutse]) */

/*
 * The party invitation maker: the form, and beside it (below it on a phone)
 * the sheet exactly as it prints. A card is an A6 — a quarter of an A4 —
 * and everything on it is sized in em of a font that is a fixed share of
 * the card's own width (container query units), so the preview on a phone,
 * on a desktop and the printed page are the same card at different sizes.
 * The pastel colours are the theme's own (--pink, --sun, --mint, --sky,
 * --lilac, --cream) with fallbacks; the heading font is the theme's.
 */

.pmb-invite {
	--pmb-invite-heading-font: var(--font-heading, var(--font-display, inherit));
	--pmb-invite-card: var(--cream, #fdfaf5);
	--pmb-invite-frame: var(--pink, #f3c3ce);
	--pmb-invite-dot-1: var(--sun, #f8d98d);
	--pmb-invite-dot-2: var(--mint, #93d3b8);
	--pmb-invite-dot-3: var(--sky, #c3e5f2);
	--pmb-invite-dot-4: var(--lilac, #cfc6e8);
	--pmb-invite-title: var(--mint-dark, var(--pmb-accent-dark));
	--pmb-cut: #9a958c;

	/* Side by side when the content column has room for both, else stacked. */
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
}

.pmb-invite__heading {
	margin: 0 0 0.75rem;
	font-family: var(--pmb-invite-heading-font);
	font-size: clamp(1.3rem, 4.5vw, 1.75rem);
	line-height: 1.2;
}

.pmb-invite__form {
	display: grid;
	flex: 1 1 19rem;
	gap: 1.25rem;
	min-width: 0;
	max-width: 28rem;
}

.pmb-invite__form .pmb-intro {
	margin-top: -0.5rem;
}

.pmb-invite__group {
	display: grid;
	gap: 0.9rem;
	min-width: 0;
	margin: 0;
	padding: 1.1rem 1.1rem 1.25rem;
	border: 0;
	border-radius: var(--pmb-radius);
	background: var(--pmb-paper);
	box-shadow: var(--pmb-shadow);
}

.pmb-invite__group legend {
	float: left;
	width: 100%;
	margin: 0 0 0.2rem;
	padding: 0;
	font-family: var(--pmb-invite-heading-font);
	font-size: 1.15rem;
	font-weight: 700;
}

.pmb-invite__group legend + * {
	clear: left;
}

.pmb-invite__field {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	min-width: 0;
}

.pmb-invite__field label {
	font-weight: 700;
}

.pmb-invite__field input,
.pmb-invite__field textarea {
	width: 100%;
	min-width: 0;
	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-invite__field textarea {
	min-height: 9rem;
	resize: vertical;
}

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

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

.pmb-invite__field-hint {
	font-size: 0.9375rem;
	color: var(--pmb-ink-soft);
}

.pmb-invite__times {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

/* A date field with its calendar (invite.js): the button sits inside the field. */
.pmb-invite__datebox {
	position: relative;
	display: block;
	min-width: 0;
}

.pmb-invite__datebox input {
	padding-right: 3.25rem;
}

.pmb-invite__calendar-button {
	position: absolute;
	top: 50%;
	right: 0.3rem;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: var(--pmb-radius-small);
	background: transparent;
	color: var(--pmb-ink);
	cursor: pointer;
	transform: translateY(-50%);
}

/* A small calendar page: the frame, the line under its head and two rings. */
.pmb-invite__calendar-icon {
	position: relative;
	width: 1.15rem;
	height: 1.05rem;
	border: 2px solid currentColor;
	border-top-width: 0.3rem;
	border-radius: 3px;
}

.pmb-invite__calendar-icon::before,
.pmb-invite__calendar-icon::after {
	content: "";
	position: absolute;
	top: -0.5rem;
	width: 2px;
	height: 0.35rem;
	border-radius: 1px;
	background: currentColor;
}

.pmb-invite__calendar-icon::before {
	left: 0.15rem;
}

.pmb-invite__calendar-icon::after {
	right: 0.15rem;
}

.pmb-invite__calendar-button:hover {
	background: var(--pmb-quiet);
}

.pmb-invite__calendar {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	z-index: 20;
	width: min(20rem, 100%);
	min-width: 17.5rem;
	padding: 0.75rem;
	border: 1px solid var(--pmb-line);
	border-radius: var(--pmb-radius-small);
	background: var(--pmb-paper);
	box-shadow: var(--pmb-shadow);
}

.pmb-invite__calendar[hidden] {
	display: none;
}

.pmb-invite__calendar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.pmb-invite__calendar-head button,
.pmb-invite__calendar td button {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pmb-ink);
	font: inherit;
	cursor: pointer;
}

.pmb-invite__calendar-head button {
	font-size: 1.5rem;
	line-height: 1;
}

.pmb-invite__calendar table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.pmb-invite__calendar th {
	padding: 0 0 0.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pmb-ink-soft);
}

.pmb-invite__calendar abbr {
	text-decoration: none;
}

.pmb-invite__calendar td {
	padding: 1px;
	text-align: center;
}

.pmb-invite__calendar td button {
	width: 100%;
	max-width: 2.5rem;
}

.pmb-invite__calendar button:hover {
	background: var(--pmb-quiet);
}

.pmb-invite__calendar .is-today {
	box-shadow: inset 0 0 0 2px var(--pmb-line);
	font-weight: 700;
}

.pmb-invite__calendar [aria-pressed="true"],
.pmb-invite__calendar [aria-pressed="true"]:hover {
	background: var(--pmb-accent);
	color: #fff;
	font-weight: 700;
}

.pmb-invite__print {
	justify-self: start;
}

.pmb-invite__print[hidden] {
	display: none;
}

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

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

.pmb-invite__preview {
	container-type: inline-size;
	flex: 1 1 19rem;
	min-width: 0;
}

.pmb-invite__count {
	margin: 0 0 0.75rem;
	color: var(--pmb-ink-soft);
}

/* ---------------------------------------------------------------- one card */

.pmb-invite-card {
	container-type: inline-size;
	position: relative;
	min-width: 0;
	background:
		radial-gradient(circle at 9% 7%, var(--pmb-invite-dot-1) 0 2.2%, transparent 2.4%),
		radial-gradient(circle at 20% 3%, var(--pmb-invite-dot-2) 0 1.4%, transparent 1.6%),
		radial-gradient(circle at 91% 5%, var(--pmb-invite-dot-3) 0 2.6%, transparent 2.8%),
		radial-gradient(circle at 96% 15%, var(--pmb-invite-dot-4) 0 1.3%, transparent 1.5%),
		radial-gradient(circle at 4% 93%, var(--pmb-invite-dot-4) 0 2.4%, transparent 2.6%),
		radial-gradient(circle at 15% 97%, var(--pmb-invite-dot-3) 0 1.2%, transparent 1.4%),
		radial-gradient(circle at 93% 95%, var(--pmb-invite-dot-2) 0 2.2%, transparent 2.4%),
		radial-gradient(circle at 83% 98%, var(--pmb-invite-dot-1) 0 1.3%, transparent 1.5%),
		var(--pmb-paper);
	border: 0.3mm dashed var(--pmb-cut);
	border-width: 0;
	color: var(--pmb-ink);
	aspect-ratio: 105 / 148.5;
}

/* 3.81 % of the card's width: 4 mm on a printed A6. */
.pmb-invite-card__inner {
	position: absolute;
	inset: 7.5cqi;
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	padding: 1.6em 1.3em 1.3em;
	border: 0.35em solid var(--pmb-invite-frame);
	border-radius: 1.4em;
	background: var(--pmb-invite-card);
	font-size: 3.81cqi;
	line-height: 1.4;
	text-align: center;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.pmb-invite-card__title {
	margin: 0 0 0.3em;
	font-family: var(--pmb-invite-heading-font);
	font-size: 2.1em;
	font-weight: 700;
	line-height: 1.1;
	color: var(--pmb-invite-title);
}

.pmb-invite-card__guest {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
}

.pmb-invite-card__lead {
	margin: 0;
	font-size: 1.1em;
}

.pmb-invite-card__lead [data-pmb-slot="child"] {
	font-weight: 700;
}

.pmb-invite-card__facts {
	display: grid;
	gap: 0.55em;
	margin: 0.2em 0 0;
	padding: 0.75em 0.5em;
	border-radius: 0.8em;
	background: var(--pmb-paper);
}

.pmb-invite-card__fact dt {
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pmb-ink-soft);
}

.pmb-invite-card__fact dd {
	margin: 0;
	font-weight: 700;
}

.pmb-invite-card__rsvp {
	margin: auto 0 0;
	font-size: 0.85em;
	color: var(--pmb-ink-soft);
}

.pmb-invite-card__slot {
	color: var(--pmb-ink);
}

/* An empty value is a line to write on by hand. */
.pmb-invite-card__blank {
	display: inline-block;
	min-width: 8em;
	height: 1.2em;
	border-bottom: 0.06em solid currentColor;
	vertical-align: -0.25em;
}

.pmb-invite-card__blank[data-pmb-slot="age"] {
	min-width: 2em;
}

.pmb-invite-card__blank[data-pmb-slot="time"] {
	min-width: 5em;
}

.pmb-invite-card__blank[data-pmb-slot="place"],
.pmb-invite-card__blank[data-pmb-slot="date"] {
	min-width: 11em;
}

.pmb-invite-card__hidden {
	display: none;
}

/* ---------------------------------------------------------------- on screen */

@media screen {
	/* The preview is one invitation; the sheets of four are for the printer. */
	.pmb-invite__sheet > .pmb-invite__page:not(:first-child),
	.pmb-invite__sheet .pmb-invite-card:not(:first-child) {
		display: none;
	}

	.pmb-invite__sheet > .pmb-invite__page {
		max-width: 24rem;
		border-radius: var(--pmb-radius-small);
		background: var(--pmb-paper);
		box-shadow: var(--pmb-shadow);
		overflow: hidden;
	}
}

@media screen and (min-width: 40rem) {
	.pmb-invite__preview {
		position: sticky;
		top: 1rem;
	}
}

/* ---------------------------------------------------------------- on paper */

/*
 * The PDF is the browser's own "Save as PDF" (K2), so this is the design:
 * only the sheet, four cards to an A4 with cut lines between them, the
 * colours kept. Everything else on the page — the theme's header, the form
 * — is hidden; the elements the sheet sits in lose their spacing.
 */
@page {
	size: A4 portrait;
	margin: 0;
}

@media print {
	body *:not(:has(.pmb-invite__sheet)):not(.pmb-invite__sheet):not(.pmb-invite__sheet *) {
		display: none !important;
	}

	html:has(.pmb-invite__sheet),
	body:has(.pmb-invite__sheet),
	body :has(.pmb-invite__sheet) {
		display: block !important;
		position: static !important;
		width: auto !important;
		max-width: none !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		transform: none !important;
		overflow: visible !important;
	}

	.pmb-invite__sheet {
		display: block;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.pmb-invite__page {
		display: grid;
		grid-template-columns: 105mm 105mm;
		grid-template-rows: 148.5mm 148.5mm;
		width: 210mm;
		height: 297mm;
		overflow: hidden;
		break-after: page;
		break-inside: avoid;
	}

	.pmb-invite__page:last-child {
		break-after: auto;
	}

	.pmb-invite-card {
		aspect-ratio: auto;
	}

	.pmb-invite-card:nth-child(odd) {
		border-right-width: 0.3mm;
	}

	.pmb-invite-card:nth-child(-n + 2) {
		border-bottom-width: 0.3mm;
	}
}

/* ---------------------------------------------------------------- feedback form (?tagasiside=…) */

.pmb-feedback > * + *,
.pmb-feedback-form > * + * {
	margin-top: 1.25rem;
}

.pmb-rating {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pmb-rating legend {
	margin-bottom: 0.3rem;
	padding: 0;
	font-weight: 700;
}

.pmb-rating__stars {
	display: flex;
	gap: 0.25rem;
}

/* The radio stays in the page (keyboard, screen reader), only unseen. */
.pmb-rating__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.pmb-rating__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--pmb-radius-small);
	color: rgba(31, 35, 40, 0.28);
	font-size: 2.25rem;
	line-height: 1;
	cursor: pointer;
}

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

/* Filled up to the chosen star, and up to the one under the pointer. */
.pmb-rating__stars:has(#pmb-rating-1:checked) .pmb-rating__star:nth-of-type(-n+1),
.pmb-rating__stars:has(#pmb-rating-2:checked) .pmb-rating__star:nth-of-type(-n+2),
.pmb-rating__stars:has(#pmb-rating-3:checked) .pmb-rating__star:nth-of-type(-n+3),
.pmb-rating__stars:has(#pmb-rating-4:checked) .pmb-rating__star:nth-of-type(-n+4),
.pmb-rating__stars:has(#pmb-rating-5:checked) .pmb-rating__star,
.pmb-rating__radio:checked + .pmb-rating__star {
	color: #c77c00;
}

@media (hover: hover) {
	.pmb-rating__stars:hover .pmb-rating__star {
		color: #c77c00;
	}

	.pmb-rating__star:hover ~ .pmb-rating__star {
		color: rgba(31, 35, 40, 0.28);
	}
}

.pmb-rating.pmb-has-error .pmb-rating__stars {
	border-radius: var(--pmb-radius-small);
	box-shadow: 0 0 0 2px var(--pmb-error);
}

.pmb-rating .pmb-field__error {
	margin-top: 0.3rem;
}

.pmb-feedback .pmb-consent .pmb-field__help {
	grid-column: 2;
	margin: 0;
}

/* ---------------------------------------------------------------- [pmb_tagasiside] */

.pmb-reviews {
	position: relative;
	margin: 1.5rem 0;
}

.pmb-reviews__track {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0.25rem 0.25rem 0.75rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
	.pmb-reviews__track {
		scroll-behavior: auto;
	}
}

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

.pmb-reviews__slide {
	/* Keeps the screen reader text inside the slide, inside the scroller:
	   absolutely placed against the section it would widen the page. */
	position: relative;
	flex: 0 0 min(100%, 28rem);
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.pmb-reviews__slide::before,
.pmb-reviews__slide::marker {
	content: none;
}

.pmb-review {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	margin: 0;
	padding: 1.25rem;
	border-radius: var(--pmb-radius);
	background: var(--pmb-paper);
	box-shadow: inset 0 0 0 1px var(--pmb-line), var(--pmb-shadow);
	color: var(--pmb-ink);
}

.pmb-review__stars {
	margin: 0;
	color: #c77c00;
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	line-height: 1;
}

.pmb-reviews .pmb-review__text {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	font-style: normal;
	quotes: none;
}

.pmb-review__text::before,
.pmb-review__text::after {
	content: none;
}

.pmb-review__text p {
	margin: 0 0 0.5rem;
}

.pmb-review__name {
	font-weight: 700;
}

.pmb-reviews__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.pmb-reviews__nav[hidden] {
	display: none;
}

.pmb-reviews__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--pmb-paper);
	box-shadow: inset 0 0 0 2px var(--pmb-line);
	color: var(--pmb-ink);
	font: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	cursor: pointer;
}

.pmb-reviews__button:hover,
.pmb-reviews__button:focus-visible {
	box-shadow: inset 0 0 0 2px var(--pmb-ink);
}

.pmb-reviews__button:disabled {
	opacity: 0.4;
	cursor: default;
}

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

.pmb-reviews__status {
	min-width: 4em;
	margin: 0;
	text-align: center;
	color: var(--pmb-ink-soft);
}
/* "Sooduskood": the field and "Kasuta" side by side, the code in capitals. */
.pmb-discount {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.pmb-discount input {
	flex: 1 1 auto;
	min-width: 0;
	text-transform: uppercase;
}

.pmb-discount .pmb-button {
	flex: 0 0 auto;
	margin: 0;
}

/* ------------------------------------- deposit or the whole sum (pay-choice) */

.pmb-booking .pmb-pay-choice {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
}

.pmb-pay-choice legend {
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.pmb-pay-choice__option {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	align-items: start;
	margin: 0;
	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-pay-choice__option + .pmb-pay-choice__option {
	margin-top: 0.6rem;
}

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

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

.pmb-pay-choice__option > label {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 1rem;
	align-items: baseline;
	cursor: pointer;
}

.pmb-pay-choice__option > label strong {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pmb-pay-choice__option > br {
	display: none;
}

.pmb-pay-choice__option > .pmb-field__help {
	grid-column: 2;
	margin: 0;
}