/**
 * VEFmultiBooking — admin styles.
 *
 * Dynamic CSS by default (clamp/min/max, relative units, variables), except
 * values with no reason to vary (a 1px border). Font sizes: a small fluid
 * scale declared once below, in rem — never em, never a fixed px size.
 */

#vefmb-admin {
	/* Admin font scale — fluid 360px → 1280px (rem + vw). */
	--vefmb-admin-font-size-x-small: clamp(.75rem, .726rem + .109vw, .8125rem); /* 12 → 13 px */
	--vefmb-admin-font-size-small: clamp(.8125rem, .788rem + .109vw, .875rem);  /* 13 → 14 px */
	--vefmb-admin-font-size-number: clamp(1.5rem, 1.304rem + .87vw, 2rem);      /* 24 → 32 px */

	--vefmb-spacing: clamp(.75rem, .554rem + .87vw, 1.25rem);
	--vefmb-radius: .25rem;
	--vefmb-accent: #2271b1;
	/* Section titles take the accent colour of the header (the colour scheme chosen in WordPress);
	   where that scheme is too light to read on white, its lightness is capped. */
	--vefmb-a-title: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 72%, #000);
}

@supports (color: oklch(from red l c h)) {
	#vefmb-admin {
		--vefmb-a-title: oklch(from var(--wp-admin-theme-color, #2271b1) min(l, .5) c h);
	}
}

/* --- Page header ---------------------------------------------------------------------------
   One header for the five pages of the plugin: the page name and what it is for. It follows the
   color scheme chosen by the user in WordPress (--wp-admin-theme-color). */

#vefmb-admin .vefmb-hero {
	/* WordPress floats its Help button to the top right: without this the header would shrink to
	   avoid it instead of using the whole width. */
	clear: both;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--vefmb-spacing);
	margin: var(--vefmb-spacing) 0 0;
	padding: clamp(.9rem, .6rem + 1.2vw, 1.5rem) clamp(1rem, .6rem + 1.6vw, 1.75rem);
	color: #fff;
	background:
		radial-gradient(circle at 100% 0, rgba(255, 255, 255, .16), transparent 55%),
		linear-gradient(135deg, color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 82%, #000), var(--wp-admin-theme-color, #2271b1));
	border-radius: .5rem .5rem 0 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

#vefmb-admin .vefmb-hero__logo {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	height: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	background: rgba(255, 255, 255, .18);
	border-radius: .75rem;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

#vefmb-admin .vefmb-hero__logo::before {
	width: auto;
	height: auto;
	font-size: inherit;
	line-height: 1;
}

#vefmb-admin .vefmb-hero__text {
	flex: 1 1 16rem;
	min-width: 0;
}

#vefmb-admin .vefmb-hero__brand {
	margin: 0;
	font-size: var(--vefmb-admin-font-size-x-small);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .8;
}

#vefmb-admin .vefmb-hero__title {
	margin: .1rem 0 .15rem;
	padding: 0;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
}

#vefmb-admin .vefmb-hero__description {
	margin: 0;
	max-width: 46rem;
	font-size: var(--vefmb-admin-font-size-small);
	opacity: .92;
}

#vefmb-admin .vefmb-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	align-self: flex-start;
}

#vefmb-admin .vefmb-pill {
	display: inline-block;
	padding: .15rem .6rem;
	font-size: var(--vefmb-admin-font-size-x-small);
	line-height: 1.6;
	color: #fff;
	background: rgba(255, 255, 255, .2);
	border-radius: 999px;
}

#vefmb-admin .vefmb-pill--pro {
	color: #1d2327;
	font-weight: 600;
	background: #fff;
}

/* --- Tabs of a page ----------------------------------------------------------------------- */

#vefmb-admin .vefmb-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: .15rem;
	overflow-x: auto;
	padding: 0 clamp(.5rem, .3rem + .8vw, 1rem);
	background: #fff;
	border: 1px solid #c3c4c7;
	border-top: 0;
	border-bottom: 0;
	scrollbar-width: thin;
}

#vefmb-admin .vefmb-tabs__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex: none;
	padding: .8rem clamp(.6rem, .4rem + .8vw, 1rem);
	font-size: var(--vefmb-admin-font-size-small);
	font-weight: 500;
	line-height: 1.3;
	color: #50575e;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

#vefmb-admin .vefmb-tabs__item .dashicons {
	width: 1.1rem;
	height: 1.1rem;
	font-size: 1.1rem;
	opacity: .75;
}

#vefmb-admin .vefmb-tabs__item:hover,
#vefmb-admin .vefmb-tabs__item:focus {
	color: var(--wp-admin-theme-color, #2271b1);
	background: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 6%, transparent);
	box-shadow: none;
}

#vefmb-admin .vefmb-tabs__item:focus-visible {
	outline: 2px solid var(--wp-admin-theme-color, #2271b1);
	outline-offset: -2px;
}

#vefmb-admin .vefmb-tabs__item.is-active {
	color: var(--wp-admin-theme-color, #2271b1);
	font-weight: 600;
	border-bottom-color: var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-tabs__item.is-active .dashicons {
	opacity: 1;
}

/* A counter: what waits for the owner (bookings to validate). */
#vefmb-admin .vefmb-tabs__badge {
	min-width: 1.35rem;
	padding: 0 .4rem;
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 600;
	line-height: 1.35rem;
	text-align: center;
	color: #fff;
	background: #d63638;
	border-radius: 999px;
}

#vefmb-admin .vefmb-tab-content {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-top-color: #dcdcde;
	border-radius: 0 0 .5rem .5rem;
	padding: var(--vefmb-spacing);
	max-width: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* A page with a single tab: the card follows the header directly. */
#vefmb-admin .vefmb-tab-content--alone {
	border-top-color: #c3c4c7;
}

@media (max-width: 782px) {
	#vefmb-admin .vefmb-hero__meta {
		align-self: auto;
	}

	#vefmb-admin .vefmb-hero__description {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#vefmb-admin .vefmb-tabs__item {
		transition: none;
	}
}

#vefmb-admin .vefmb-panel {
	max-width: none;
}

/* Tables, calendars and grids use the whole width of the tab; text and forms keep a
   readable line length. */
#vefmb-admin .vefmb-panel > p,
#vefmb-admin .vefmb-panel > form > .description,
#vefmb-admin .vefmb-panel .form-table {
	max-width: none;
}

/* With the whole width, a column of links (Actions) needs room: the other columns share the rest. */
#vefmb-admin #vefmb-resources-table th:last-child,
#vefmb-admin #vefmb-offers-table th:last-child,
#vefmb-admin #vefmb-rules-table th:last-child,
#vefmb-admin #vefmb-slots-table th:last-child,
#vefmb-admin #vefmb-periods-table th:last-child,
#vefmb-admin #vefmb-programme-table th:last-child,
#vefmb-admin #vefmb-units-table th:last-child,
#vefmb-admin #vefmb-bookings-table th:last-child {
	width: 24%;
}

#vefmb-admin .vefmb-about__list {
	list-style: disc;
	padding-inline-start: 1.5em;
}

#vefmb-admin .vefmb-about__list li {
	margin-bottom: 0.4em;
}

/* "Where to find what": the five pages of the menu and their tabs. */
#vefmb-admin .vefmb-about__map {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vefmb-spacing);
	margin: 0 0 var(--vefmb-spacing);
}

@media (max-width: 960px) {
	#vefmb-admin .vefmb-about__map {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	#vefmb-admin .vefmb-about__map {
		grid-template-columns: minmax(0, 1fr);
	}
}

#vefmb-admin .vefmb-about__map-item {
	padding: calc(var(--vefmb-spacing) * .9);
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: .375rem;
}

#vefmb-admin .vefmb-about__map-item h4 {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .35rem;
	font-size: var(--vefmb-admin-font-size-small);
}

#vefmb-admin .vefmb-about__map-item h4 .dashicons {
	color: var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-about__map-item p {
	margin: 0 0 .5rem;
	font-size: var(--vefmb-admin-font-size-x-small);
	color: #50575e;
}

#vefmb-admin .vefmb-about__map-item ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#vefmb-admin .vefmb-about__map-item li {
	margin: 0 0 .15rem;
	font-size: var(--vefmb-admin-font-size-small);
}

#vefmb-admin .vefmb-about__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(16.25rem, 12rem + 12vw, 23.75rem)), 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	margin: var(--vefmb-spacing) 0 calc(var(--vefmb-spacing) * 1.5);
}

#vefmb-admin .vefmb-about__card {
	border: 1px solid #7ab97a;
	border-radius: var(--vefmb-radius);
	padding: 1.1em 1.3em;
	background: #f4faf4;
}

#vefmb-admin .vefmb-about__compare {
	margin: 0.8em 0 1.5em;
}

#vefmb-admin .vefmb-about__compare th,
#vefmb-admin .vefmb-about__compare td {
	vertical-align: top;
}

#vefmb-admin .vefmb-about__card--inactive {
	border-color: #d0d0d0;
	background: #f7f7f7;
}

#vefmb-admin .vefmb-about__card h4 {
	margin: 0.6em 0 0.4em;
}

#vefmb-admin .vefmb-about__card p {
	margin: 0;
	opacity: 0.85;
}

#vefmb-admin .vefmb-about__badge {
	display: inline-block;
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 600;
	padding: 0.2em 0.7em;
	border-radius: var(--vefmb-radius);
}

#vefmb-admin .vefmb-about__badge--active {
	background: #4a9b4a;
	color: #fff;
}

#vefmb-admin .vefmb-about__badge--inactive {
	background: #d0d0d0;
	color: #444;
}

/* --- Resources --- */

#vefmb-admin .vefmb-resources-toolbar {
	margin-bottom: var(--vefmb-spacing);
}

#vefmb-admin .vefmb-empty-state {
	padding: var(--vefmb-spacing);
	background: #f6f7f7;
	border: 1px dashed #c3c4c7;
	border-radius: var(--vefmb-radius);
	color: currentColor;
	opacity: 0.8;
}

#vefmb-admin .vefmb-badge {
	display: inline-block;
	padding: 0.15em 0.7em;
	border-radius: var(--vefmb-radius);
	font-size: var(--vefmb-admin-font-size-small);
	line-height: 1.6;
}

#vefmb-admin .vefmb-badge--active {
	background: #edfaef;
	color: #1a7f37;
}

#vefmb-admin .vefmb-badge--inactive {
	background: #f6f7f7;
	color: currentColor;
	opacity: 0.7;
}

#vefmb-admin .vefmb-inline-form {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	max-width: 100%;
}

#vefmb-admin .vefmb-inline-form--rename {
	flex-wrap: wrap;
}

#vefmb-admin .vefmb-resource-actions form {
	margin: 0;
}

#vefmb-admin .vefmb-link-danger {
	color: #b32d2e;
}

/* --- Availability --- */

#vefmb-admin .vefmb-resource-picker {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

#vefmb-admin .vefmb-resource-picker li {
	padding: 0.6em 1em;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: var(--vefmb-radius);
	max-width: min(100%, 26.25rem);
}

#vefmb-admin .vefmb-resource-picker__type {
	opacity: 0.6;
	font-size: var(--vefmb-admin-font-size-small);
}

/* --- Dashboard --- */

#vefmb-admin .vefmb-dashboard-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(8.75rem, 7rem + 5vw, 13.75rem)), 1fr));
	gap: var(--vefmb-spacing);
	margin-bottom: calc(var(--vefmb-spacing) * 1.5);
}

#vefmb-admin .vefmb-dashboard-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: var(--vefmb-radius);
	padding: var(--vefmb-spacing);
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

#vefmb-admin .vefmb-dashboard-card__number {
	font-size: var(--vefmb-admin-font-size-number);
	font-weight: 600;
	color: var(--vefmb-accent);
}

#vefmb-admin .vefmb-dashboard-card__label {
	font-size: var(--vefmb-admin-font-size-small);
	opacity: 0.75;
}

#vefmb-admin .vefmb-dashboard-list {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}

#vefmb-admin .vefmb-dashboard-list li {
	padding: 0.5em 0;
	border-bottom: 1px solid #f0f0f1;
}

/* --- Calendar --- */

#vefmb-admin .vefmb-cal-view-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 1em;
}

#vefmb-admin .vefmb-cal-filters {
	margin-bottom: var(--vefmb-spacing);
	flex-wrap: wrap;
}

#vefmb-admin .vefmb-cal-nav {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 1em;
}

#vefmb-admin .vefmb-cal-month-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: #dcdcde;
	border: 1px solid #dcdcde;
}

#vefmb-admin .vefmb-cal-month-grid__header {
	background: #f6f7f7;
	padding: 0.4em;
	text-align: center;
	font-weight: 600;
	font-size: var(--vefmb-admin-font-size-small);
}

#vefmb-admin .vefmb-cal-day {
	background: #fff;
	min-height: clamp(4.375rem, 3.4rem + 2.7vw, 6.875rem);
	padding: 0.3em;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	transition: background-color 0.1s ease;
}

#vefmb-admin .vefmb-cal-day--outside {
	background: #fafafa;
	opacity: 0.5;
}

#vefmb-admin .vefmb-cal-day--today .vefmb-cal-day__number {
	background: var(--vefmb-accent);
	color: #fff;
	border-radius: 50%;
	width: 1.6em;
	height: 1.6em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#vefmb-admin .vefmb-cal-day__number {
	font-size: var(--vefmb-admin-font-size-small);
	opacity: 0.7;
}

#vefmb-admin .vefmb-cal-droppable--hover {
	background-color: #edf6ff;
}

#vefmb-admin .vefmb-cal-event {
	display: block;
	font-size: var(--vefmb-admin-font-size-x-small);
	padding: 0.15em 0.4em;
	border-radius: var(--vefmb-radius);
	background: #f0f6fc;
	color: #1d2327;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: grab;
}

#vefmb-admin .vefmb-cal-event--confirmed {
	background: #edfaef;
}

#vefmb-admin .vefmb-cal-event--cancelled {
	background: #fbeaea;
	text-decoration: line-through;
	opacity: 0.7;
}

#vefmb-admin .vefmb-cal-event--pending {
	background: #fff8e5;
}

/* Licenses and versions: the lead, the cards of the two plugins and their status pills. */
#vefmb-admin .vefmb-lic-lead {
	margin: 0 0 var(--vefmb-spacing);
	font-size: var(--vefmb-admin-font-size-small);
	color: #3c434a;
}

#vefmb-admin .vefmb-lic-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: var(--vefmb-radius);
	padding: 1.2em 1.5em;
	margin: 0 0 var(--vefmb-spacing);
}

#vefmb-admin .vefmb-lic-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	margin: 0 0 .75rem;
}

#vefmb-admin .vefmb-lic-card__head h2,
#vefmb-admin .vefmb-lic-card__head h3 {
	margin: 0;
	padding: 0;
}

#vefmb-admin .vefmb-lic-card > :last-child {
	margin-bottom: 0;
}

#vefmb-admin .vefmb-lic-pill {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .2em .8em;
	border-radius: 2rem;
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 600;
	background: #f0f0f1;
	color: #3c434a;
}

#vefmb-admin .vefmb-lic-pill--ok {
	background: #d4e8d4;
	color: #1e4620;
}

#vefmb-admin .vefmb-lic-pill--wait {
	background: #fcefc7;
	color: #5c4400;
}

#vefmb-admin .vefmb-lic-pill--bad {
	background: #f7d9d9;
	color: #7a1c1c;
}

#vefmb-admin .vefmb-lic-card .form-table {
	margin-top: 0;
}

#vefmb-admin .vefmb-lic-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: .75rem 0;
}

#vefmb-admin .vefmb-lic-card__actions form {
	margin: 0;
}

/* Free license: Dashboard invitation and license card. */
#vefmb-admin .vefmb-free-license-reminder {
	background: #eef4fa;
	border-radius: 10px;
	padding: .625rem 1rem;
	margin-bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
}

#vefmb-admin .vefmb-free-license-reminder__actions,
#vefmb-admin .vefmb-free-license__actions {
	display: flex;
	gap: .5rem;
	align-items: center;
	flex-wrap: wrap;
}

#vefmb-admin .vefmb-free-license-reminder form,
#vefmb-admin .vefmb-free-license__actions form {
	margin: 0;
}

#vefmb-admin .vefmb-free-license__actions {
	margin-top: .75rem;
}

#vefmb-admin .vefmb-free-license__details {
	max-width: min(100%, 35rem);
}

#vefmb-admin .vefmb-free-license-status {
	margin: 0 0 1.25rem;
}

/* Support access: the card of the Diagnostic and support tab. */
#vefmb-admin .vefmb-support {
}

#vefmb-admin .vefmb-support .vefmb-lic-card__head {
	margin-top: 1rem;
}

/* The generic separator above the h3 of a section does not belong in the head of the access card. */
#vefmb-admin .vefmb-section.vefmb-support .vefmb-lic-card__head h3 {
	margin: 0;
	padding: 0;
	border: 0;
}

#vefmb-admin .vefmb-support__steps {
	margin: .75rem 0 1rem 1.25rem;
	padding: 0;
	display: grid;
	gap: .4rem;
}

#vefmb-admin .vefmb-support__details {
	max-width: min(100%, 38rem);
}

#vefmb-admin .vefmb-support__details th {
	width: 9rem;
	font-weight: 600;
}

#vefmb-admin .vefmb-support__actions {
	margin: 1rem 0 0;
}

#vefmb-admin .vefmb-support__log-title {
	margin: 1.5rem 0 .5rem;
	font-size: var(--vefmb-admin-font-size-normal, 1rem);
}

#vefmb-admin .vefmb-support__log {
	max-width: min(100%, 44rem);
}

#vefmb-admin .vefmb-support fieldset .description {
	margin: .15rem 0 .85rem 1.55rem;
}

/* Style tab: color fields with opacity + button shadow values. */
#vefmb-admin .vefmb-alpha-wrap {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin-inline-start: .75rem;
	vertical-align: middle;
}

#vefmb-admin .vefmb-alpha-text,
#vefmb-admin .vefmb-alpha-label {
	font-size: var(--vefmb-admin-font-size-x-small);
	color: #646970;
}

#vefmb-admin .vefmb-alpha-slider {
	width: 6.25rem;
	vertical-align: middle;
}

#vefmb-admin .vefmb-alpha-label {
	min-width: 2.125rem;
	display: inline-block;
}

#vefmb-admin .vefmb-shadow-fields {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	margin: .5rem 0 0;
}

#vefmb-admin .vefmb-shadow-field {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--vefmb-admin-font-size-x-small);
	color: #646970;
}

/* Offers list: why a published offer cannot be booked online. */
#vefmb-admin .vefmb-offer-issues {
	margin: .375rem 0 0;
	color: #b32d2e;
	font-size: var(--vefmb-admin-font-size-x-small);
}


/* Calendar: availability of each offer, and bookings over several days. */
#vefmb-admin .vefmb-offers-availability td.vefmb-avail {
	text-align: center;
	font-weight: 600;
}

#vefmb-admin .vefmb-avail--available {
	background: #e7f5ea;
	color: #1d6b2f;
}

#vefmb-admin .vefmb-avail--full {
	background: #fcf0e1;
	color: #8a5a00;
	font-weight: 500;
}

#vefmb-admin .vefmb-avail--closed {
	background: #e6e7e8;
	color: #50575e;
	font-weight: 500;
}

#vefmb-admin .vefmb-cal-event--mid,
#vefmb-admin .vefmb-cal-event--last {
	opacity: .75;
	border-style: dashed;
}

/* --- Getting started guide: numbered steps ------------------------------------------------- */

#vefmb-admin .vefmb-guide__steps {
	display: grid;
	gap: var(--vefmb-spacing);
	margin: 0 0 calc(var(--vefmb-spacing) * 1.5);
	padding: 0;
	list-style: none;
	counter-reset: vefmb-step;
}

#vefmb-admin .vefmb-guide__step {
	position: relative;
	margin: 0;
	padding: calc(var(--vefmb-spacing) * .9) calc(var(--vefmb-spacing) * .9) calc(var(--vefmb-spacing) * .9) 4rem;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: .375rem;
	counter-increment: vefmb-step;
}

#vefmb-admin .vefmb-guide__step::before {
	content: counter(vefmb-step);
	position: absolute;
	top: calc(var(--vefmb-spacing) * .9);
	left: var(--vefmb-spacing);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-weight: 600;
	color: #fff;
	background: var(--wp-admin-theme-color, #2271b1);
	border-radius: 50%;
}

#vefmb-admin .vefmb-guide__step h3 {
	margin: 0 0 .15rem;
}

#vefmb-admin .vefmb-guide__step p {
	margin: .35rem 0 0;
}

#vefmb-admin .vefmb-guide__where {
	display: flex;
	align-items: center;
	gap: .25rem;
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 600;
	color: #50575e;
}

#vefmb-admin .vefmb-guide__where .dashicons {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
	color: var(--wp-admin-theme-color, #2271b1);
}

/* Fields edited in place in the lists. */
.vefmb-quick-edit__field { width: 100%; max-width: 22em; }

/* --- Save bar ----------------------------------------------------------------------------------
   The Save button of a long form stays at the bottom of the window while the form is on screen, and
   says when something has been changed and not saved yet. */

#vefmb-admin .vefmb-savebar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin: var(--vefmb-spacing) 0 0;
	padding: .65rem clamp(.75rem, .5rem + 1vw, 1.1rem);
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: .5rem;
	box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
	transition: border-color .15s, box-shadow .15s;
}

#vefmb-admin .vefmb-savebar.is-dirty {
	border-color: var(--wp-admin-theme-color, #2271b1);
	box-shadow: 0 -4px 14px rgba(0, 0, 0, .1), 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-savebar__state {
	font-size: var(--vefmb-admin-font-size-small);
	color: #50575e;
}

#vefmb-admin .vefmb-savebar__state:not(:empty)::before {
	content: "";
	display: inline-block;
	width: .55em;
	height: .55em;
	margin-inline-end: .5em;
	vertical-align: baseline;
	background: var(--wp-admin-theme-color, #2271b1);
	border-radius: 50%;
}

/* --- Sections and folds ------------------------------------------------------------------------
   A long settings screen is cut into titled sections; a block that is set once and rarely touched
   again (optional groups of a resource form) folds. */

#vefmb-admin .vefmb-section + .vefmb-section,
#vefmb-admin .vefmb-section + .vefmb-fold {
	margin-top: calc(var(--vefmb-spacing) * 1.5);
}

#vefmb-admin .vefmb-section__title {
	margin: 0;
	padding: 0 0 .5rem;
	font-size: clamp(1rem, .94rem + .3vw, 1.2rem);
	color: var(--vefmb-a-title);
	border-bottom: 2px solid color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 35%, transparent);
}

/* A section title that follows other content (screens added by the Pro add-on) gets room above it. */
#vefmb-admin * + .vefmb-section__title {
	margin-top: calc(var(--vefmb-spacing) * 1.5);
}

#vefmb-admin .vefmb-section__intro {
	margin: .6rem 0 0;
	color: #50575e;
	font-size: var(--vefmb-admin-font-size-small);
}

/* PayPal / Stripe tabs: both methods are visible at once; a check mark shows which one is set up. */
#vefmb-admin .vefmb-subtabs {
	margin: var(--vefmb-spacing) 0 0;
	padding-bottom: 0;
}

#vefmb-admin .vefmb-subpanel[hidden] {
	display: none;
}

#vefmb-admin .nav-tab .vefmb-tab-ready {
	width: 1rem;
	height: 1rem;
	margin-left: .3rem;
	font-size: 1rem;
	vertical-align: text-bottom;
	color: #1a7f37;
}

#vefmb-admin .nav-tab-active .vefmb-tab-ready {
	color: currentColor;
}

#vefmb-admin .vefmb-fold {
	margin-top: var(--vefmb-spacing);
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: .5rem;
}

#vefmb-admin .vefmb-fold__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .8rem;
	padding: .7rem 1rem;
	cursor: pointer;
	list-style-position: inside;
}

#vefmb-admin .vefmb-fold[open] > .vefmb-fold__summary {
	border-bottom: 1px solid #dcdcde;
}

#vefmb-admin .vefmb-fold__title {
	font-weight: 600;
	font-size: clamp(.95rem, .9rem + .25vw, 1.1rem);
}

#vefmb-admin .vefmb-fold > :not(summary) {
	margin-inline: clamp(.75rem, .5rem + 1vw, 1.25rem);
}

/* --- Overview: three columns of lists, and the "Getting started" list ------------------------- */

#vefmb-admin .vefmb-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--vefmb-spacing) calc(var(--vefmb-spacing) * 1.5);
	align-items: start;
}

#vefmb-admin .vefmb-dashboard-block > h3 {
	margin-top: 0;
}

#vefmb-admin .vefmb-start {
	margin-bottom: calc(var(--vefmb-spacing) * 1.5);
	padding: var(--vefmb-spacing) calc(var(--vefmb-spacing) * 1.25);
	background: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 30%, #fff);
	border-radius: .5rem;
}

#vefmb-admin .vefmb-start__title {
	margin: 0;
	font-size: clamp(1rem, .94rem + .3vw, 1.2rem);
}

#vefmb-admin .vefmb-start__intro {
	margin: .35rem 0 0;
	color: #50575e;
	font-size: var(--vefmb-admin-font-size-small);
}

#vefmb-admin .vefmb-start__steps {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.25rem;
	margin: .9rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: vefmb-step;
}

#vefmb-admin .vefmb-start__step {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .6rem;
	flex: 1 1 14rem;
	min-width: 0;
	margin: 0;
	padding: .6rem .8rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: .4rem;
	counter-increment: vefmb-step;
}

#vefmb-admin .vefmb-start__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 1.6rem;
	height: 1.6rem;
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 600;
	color: var(--wp-admin-theme-color, #2271b1);
	border: 2px solid var(--wp-admin-theme-color, #2271b1);
	border-radius: 50%;
}

#vefmb-admin .vefmb-start__mark::before {
	content: counter(vefmb-step);
}

#vefmb-admin .vefmb-start__step.is-done .vefmb-start__mark {
	color: #fff;
	background: #1a7f37;
	border-color: #1a7f37;
}

#vefmb-admin .vefmb-start__step.is-done .vefmb-start__mark::before {
	content: "\2713";
}

#vefmb-admin .vefmb-start__label {
	font-weight: 600;
}

#vefmb-admin .vefmb-start__step.is-done .vefmb-start__label {
	font-weight: 400;
	color: #50575e;
}

#vefmb-admin .vefmb-start__link {
	flex-basis: 100%;
	padding-inline-start: 2.2rem;
	font-size: var(--vefmb-admin-font-size-small);
}

/* --- Parts of a screen (Free and Pro) ----------------------------------------------------------
   A row of pills switches between the parts of one screen; with a single part nothing is printed. */

#vefmb-admin .vefmb-subtabs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 var(--vefmb-spacing);
}

#vefmb-admin .vefmb-subtabs__item {
	padding: .35rem .95rem;
	font-size: var(--vefmb-admin-font-size-small);
	color: #3c434a;
	text-decoration: none;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 2rem;
}

#vefmb-admin .vefmb-subtabs__item:hover,
#vefmb-admin .vefmb-subtabs__item:focus {
	color: var(--wp-admin-theme-color, #2271b1);
	border-color: var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-subtabs__item.is-active {
	color: #fff;
	background: var(--wp-admin-theme-color, #2271b1);
	border-color: var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-subpanel[hidden] {
	display: none;
}

/* Selects never wider than their container on a phone. */
@media (max-width: 600px) {
	#vefmb-admin .vefmb-tab-content select {
		max-width: 100%;
	}
}

/* --- Guided set-up ("Set up an offer") -----------------------------------------------------
   A bar of steps above the existing screens, and previous / next below them. */

#vefmb-admin .vefmb-flow {
	margin-bottom: var(--vefmb-spacing);
	padding: var(--vefmb-spacing) calc(var(--vefmb-spacing) * 1.25);
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
}

#vefmb-admin .vefmb-flow__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
}

#vefmb-admin .vefmb-flow__title {
	margin: 0;
	font-size: clamp(1rem, .94rem + .3vw, 1.2rem);
}

#vefmb-admin .vefmb-flow__steps {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#vefmb-admin .vefmb-flow__step {
	flex: 1 1 8rem;
	margin: 0;
	min-width: 0;
}

#vefmb-admin .vefmb-flow__step a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .5rem;
	height: 100%;
	box-sizing: border-box;
	padding: .5rem .7rem;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 2px;
}

#vefmb-admin .vefmb-flow__step a:hover,
#vefmb-admin .vefmb-flow__step a:focus-visible {
	border-color: var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-flow__step.is-current a {
	border-color: var(--wp-admin-theme-color, #2271b1);
	box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
	font-weight: 600;
}

#vefmb-admin .vefmb-flow__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	font-size: var(--vefmb-admin-font-size-x-small);
	color: #50575e;
	background: #f0f0f1;
	border-radius: 50%;
}

#vefmb-admin .vefmb-flow__step.is-done .vefmb-flow__mark {
	color: #fff;
	background: #00a32a;
}

#vefmb-admin .vefmb-flow__step.is-warn .vefmb-flow__mark {
	color: #1d2327;
	background: #dba617;
	font-weight: 700;
}

#vefmb-admin .vefmb-flow__step.is-na a {
	color: #646970;
	background: #f6f7f7;
}

#vefmb-admin .vefmb-flow__step.is-current .vefmb-flow__mark {
	color: #fff;
	background: var(--wp-admin-theme-color, #2271b1);
}


#vefmb-admin .vefmb-flow__tag {
	flex-basis: 100%;
	color: #646970;
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 400;
}

#vefmb-admin .vefmb-flow__intro {
	margin-top: .9rem;
	padding-top: .8rem;
	border-top: 1px solid color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 20%, #fff);
}

#vefmb-admin .vefmb-flow__intro p {
	margin: .25rem 0 0;
	max-width: 70ch;
}

#vefmb-admin .vefmb-flow__count {
	color: #646970;
	font-size: var(--vefmb-admin-font-size-x-small);
	text-transform: uppercase;
	letter-spacing: .04em;
}

#vefmb-admin .vefmb-flow__question {
	margin: .1rem 0 0;
	font-size: clamp(1rem, .94rem + .3vw, 1.15rem);
}

#vefmb-admin .vefmb-flow__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem;
	margin-top: calc(var(--vefmb-spacing) * 1.5);
	padding-top: var(--vefmb-spacing);
	border-top: 1px solid #dcdcde;
}

#vefmb-admin .vefmb-flow__nav .button-primary:only-child {
	margin-inline-start: auto;
}

/* Welcome screen and last step. */

#vefmb-admin .vefmb-flow-welcome__lead {
	max-width: 70ch;
	font-size: var(--vefmb-admin-font-size-small);
}

#vefmb-admin .vefmb-flow-welcome__display {
	margin-top: 20px;
}

#vefmb-admin .vefmb-flow-welcome__steps {
	display: grid;
	gap: .5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: vefmb-welcome;
}

#vefmb-admin .vefmb-flow-welcome__steps li {
	counter-increment: vefmb-welcome;
	margin: 0;
	padding: .6rem .8rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 2px;
}

#vefmb-admin .vefmb-flow-welcome__steps li::before {
	content: counter(vefmb-welcome) ". ";
	font-weight: 600;
}

#vefmb-admin .vefmb-flow-welcome__steps .description {
	margin-inline-start: .5rem;
}

#vefmb-admin .vefmb-flow-offers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--vefmb-spacing);
}

#vefmb-admin .vefmb-flow-offer {
	padding: var(--vefmb-spacing);
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 2px;
}

#vefmb-admin .vefmb-flow-offer.is-published {
	border-color: #00a32a;
}

#vefmb-admin .vefmb-flow-offer__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .75rem;
}

#vefmb-admin .vefmb-flow-offer__head h3 {
	margin: 0;
}

#vefmb-admin .vefmb-flow-offer__action .description {
	display: block;
	margin-top: .4rem;
}

#vefmb-admin .vefmb-flow-after {
	margin-top: var(--vefmb-spacing);
}


/* What is being worked on, and the three phases. */

#vefmb-admin .vefmb-flow__focus {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .6rem;
	margin: .7rem 0 0;
	font-size: var(--vefmb-admin-font-size-small);
}

#vefmb-admin .vefmb-flow__focus-label {
	color: #646970;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--vefmb-admin-font-size-x-small);
}

#vefmb-admin .vefmb-flow__chip {
	padding: .15rem .55rem;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 2px;
}

#vefmb-admin .vefmb-flow__phases {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem 1.25rem;
	margin-top: .9rem;
}

#vefmb-admin .vefmb-flow__phase {
	flex: var(--vefmb-count, 1) 1 calc(var(--vefmb-count, 1) * 9rem);
	min-width: min(100%, 9rem);
}

#vefmb-admin .vefmb-flow__phase-name {
	margin: 0 0 .35rem;
	padding-bottom: .25rem;
	color: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 72%, #000);
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 2px solid var(--wp-admin-theme-color, #2271b1);
}

@supports (color: oklch(from red l c h)) {
	#vefmb-admin .vefmb-flow__phase-name {
		color: oklch(from var(--wp-admin-theme-color, #2271b1) min(l, .5) c h);
	}
}

/* Points to look at: a level in words (never colour alone), the message, a link to solve it. */

#vefmb-admin .vefmb-points {
	margin: .5rem 0;
	padding: 0;
	list-style: none;
}

#vefmb-admin .vefmb-points__item {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: .25rem .75rem;
	margin: 0;
	padding: .45rem 0;
	border-bottom: 1px solid #f0f0f1;
}

#vefmb-admin .vefmb-points__item:last-child {
	border-bottom: 0;
}

#vefmb-admin .vefmb-points__level {
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

#vefmb-admin .vefmb-points__item.is-error .vefmb-points__level {
	color: #b32d2e;
}

#vefmb-admin .vefmb-points__item.is-warning .vefmb-points__level {
	color: #8a5a00;
}

#vefmb-admin .vefmb-points__item.is-tip .vefmb-points__level {
	color: #646970;
}

@media (max-width: 600px) {
	#vefmb-admin .vefmb-points__item {
		grid-template-columns: minmax(0, 1fr);
	}
}

#vefmb-admin .vefmb-flow__check {
	margin-top: calc(var(--vefmb-spacing) * 1.5);
	padding: var(--vefmb-spacing) calc(var(--vefmb-spacing) * 1.25);
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
}

#vefmb-admin .vefmb-flow__check-title {
	margin: 0;
	font-size: clamp(1rem, .94rem + .3vw, 1.15rem);
}

#vefmb-admin .vefmb-flow__check-ok {
	margin: .4rem 0 0;
	color: #1a7a2e;
	font-weight: 600;
}

/* One line on the overview and on the guide: how many points are left. */

#vefmb-admin .vefmb-readiness-line {
	margin: 0 0 var(--vefmb-spacing);
	padding: .6rem 1rem;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
}

#vefmb-admin .vefmb-readiness-line.has-points {
	border-color: #dba617;
}

#vefmb-admin .vefmb-readiness-line.is-clear {
	border-color: #00a32a;
}

#vefmb-admin .vefmb-readiness-line p {
	margin: 0;
}

#vefmb-admin .vefmb-readiness-line strong {
	margin-inline-end: .35rem;
}

#vefmb-admin .vefmb-readiness-line a {
	margin-inline-start: .35rem;
	white-space: nowrap;
}

/* The list of the points, opened by the link of the line above. */

#vefmb-admin .vefmb-checklist {
	margin: 0 0 var(--vefmb-spacing);
	padding: .4rem 1rem .6rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 2px;
}

#vefmb-admin .vefmb-checklist[hidden] {
	display: none;
}

/* Board of the guide: one line per product or offer. */

#vefmb-admin .vefmb-board__title {
	margin: 1.4rem 0 .2rem;
	padding: 0 0 .35rem;
	border-bottom: 1px solid #dcdcde;
	font-size: 1.05rem;
}

#vefmb-admin .vefmb-board {
	display: grid;
	gap: .5rem;
	margin: .6rem 0;
	padding: 0;
	list-style: none;
}

#vefmb-admin .vefmb-board__row {
	display: grid;
	grid-template-columns: minmax(10rem, 1.1fr) minmax(0, 2fr) minmax(10rem, auto);
	align-items: center;
	gap: .5rem 1rem;
	margin: 0;
	padding: .6rem .8rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 2px;
}

#vefmb-admin .vefmb-board__row.is-off {
	opacity: .65;
}

#vefmb-admin .vefmb-board__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .15rem .6rem;
	min-width: 0;
}

#vefmb-admin .vefmb-board__pills {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#vefmb-admin .vefmb-board__pills li {
	margin: 0;
}

#vefmb-admin .vefmb-board__pills a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .55rem;
	color: inherit;
	font-size: var(--vefmb-admin-font-size-small);
	text-decoration: none;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 2px;
}

#vefmb-admin .vefmb-board__pills a:hover,
#vefmb-admin .vefmb-board__pills a:focus-visible {
	border-color: var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-board__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 700;
	color: #50575e;
	background: #e2e4e7;
	border-radius: 50%;
}

#vefmb-admin .vefmb-board__pills .is-done .vefmb-board__mark {
	color: #fff;
	background: #00a32a;
}

#vefmb-admin .vefmb-board__pills .is-warn .vefmb-board__mark {
	color: #1d2327;
	background: #dba617;
}

#vefmb-admin .vefmb-board__pills .is-todo .vefmb-board__mark {
	color: #fff;
	background: #b32d2e;
}

#vefmb-admin .vefmb-board__pills .is-na a {
	color: #646970;
}

#vefmb-admin .vefmb-board__state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .4rem .75rem;
}

#vefmb-admin .vefmb-board__count {
	color: #8a5a00;
	font-weight: 600;
}

#vefmb-admin .vefmb-board__ok {
	color: #1a7a2e;
	font-weight: 600;
}

@media (max-width: 782px) {
	#vefmb-admin .vefmb-board__row {
		grid-template-columns: minmax(0, 1fr);
	}

	#vefmb-admin .vefmb-board__state {
		justify-content: flex-start;
	}
}

#vefmb-admin .vefmb-flow-product {
	margin-top: .6rem;
	padding-top: .5rem;
	border-top: 1px solid #f0f0f1;
}

#vefmb-admin .vefmb-flow-product__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .6rem;
	margin: 0;
}

#vefmb-admin .vefmb-season-pick {
	max-width: 100%;
}

/* --- Slots: month calendar ---------------------------------------------------------------- */

#vefmb-admin .vefmb-slotcal__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-bottom: .6rem;
}

#vefmb-admin .vefmb-slotcal__title {
	min-width: 9rem;
	text-align: center;
	text-transform: capitalize;
}

#vefmb-admin .vefmb-slotcal__grid {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: .25rem;
}

#vefmb-admin .vefmb-slotcal__grid th {
	color: #646970;
	font-size: var(--vefmb-admin-font-size-x-small);
	font-weight: 600;
	text-align: center;
}

#vefmb-admin .vefmb-slotcal__grid td {
	padding: 0;
	vertical-align: top;
}

#vefmb-admin .vefmb-slotcal__day {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	box-sizing: border-box;
	min-height: 3.6rem;
	padding: .35rem .45rem;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: .35rem;
}

#vefmb-admin .vefmb-slotcal__day:hover,
#vefmb-admin .vefmb-slotcal__day:focus-visible {
	border-color: var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-slotcal__day.is-none {
	color: #8c8f94;
	background: #f6f7f7;
}

#vefmb-admin .vefmb-slotcal__day.is-full {
	background: #fcf0e1;
	border-color: #dba617;
}

#vefmb-admin .vefmb-slotcal__day.is-closed {
	background: #e6e7e8;
	border-color: #8c8f94;
	border-style: dashed;
}

#vefmb-admin .vefmb-slotcal__day.is-today .vefmb-slotcal__num {
	color: #fff;
	background: var(--wp-admin-theme-color, #2271b1);
	border-radius: 50%;
}

#vefmb-admin .vefmb-slotcal__day.is-selected {
	box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-slotcal__num {
	align-self: flex-start;
	min-width: 1.4rem;
	text-align: center;
	font-weight: 600;
}

#vefmb-admin .vefmb-slotcal__count {
	color: #50575e;
	font-size: var(--vefmb-admin-font-size-x-small);
	line-height: 1.25;
}

#vefmb-admin .vefmb-slotcal__manual {
	position: absolute;
	top: .3rem;
	inset-inline-end: .4rem;
	color: #646970;
	font-size: var(--vefmb-admin-font-size-x-small);
}

#vefmb-admin .vefmb-slotcal__legend {
	max-width: 70ch;
}

#vefmb-admin .vefmb-slotcal__dayhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin: 1rem 0 .5rem;
}

#vefmb-admin .vefmb-slotcal__dayhead h4 {
	margin: 0;
	text-transform: capitalize;
}

@media (max-width: 600px) {
	#vefmb-admin .vefmb-slotcal__count {
		display: none;
	}
}

/* --- Folded groups: values at a glance; kinds of product -------------------------------------- */

#vefmb-admin .vefmb-fold__value {
	margin-inline-start: .75rem;
	color: #646970;
	font-size: var(--vefmb-admin-font-size-small);
	font-weight: 400;
}

#vefmb-admin .vefmb-fold--advanced > .vefmb-fold__summary .vefmb-fold__title {
	color: #50575e;
}

#vefmb-admin .vefmb-fold--advanced .vefmb-fold {
	margin-inline: 0;
	box-shadow: none;
}

#vefmb-admin .vefmb-kinds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--vefmb-spacing);
	margin: var(--vefmb-spacing) 0 0;
	padding: 0;
	list-style: none;
}

#vefmb-admin .vefmb-kinds__item {
	margin: 0;
}

#vefmb-admin .vefmb-kinds__card {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	height: 100%;
	box-sizing: border-box;
	padding: var(--vefmb-spacing);
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: .5rem;
	transition: border-color .15s, box-shadow .15s;
}

#vefmb-admin .vefmb-kinds__card:hover,
#vefmb-admin .vefmb-kinds__card:focus-visible {
	border-color: var(--wp-admin-theme-color, #2271b1);
	box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-kinds__icon {
	width: auto;
	height: auto;
	font-size: 1.75rem;
	color: var(--wp-admin-theme-color, #2271b1);
}

#vefmb-admin .vefmb-kinds__label {
	font-size: clamp(1rem, .94rem + .3vw, 1.15rem);
}

#vefmb-admin .vefmb-kinds__text {
	color: #50575e;
	font-size: var(--vefmb-admin-font-size-small);
}

#vefmb-admin .vefmb-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin: 0;
	padding: 0 clamp(.75rem, .5rem + 1vw, 1.25rem) clamp(.5rem, .4rem + .5vw, .9rem);
}

#vefmb-admin .vefmb-summary__value {
	color: #1d2327;
}

#vefmb-admin .vefmb-summary__value.is-empty {
	color: #b32d2e;
}

/* --- Display bar (what the site offers, Simple / Advanced) -------------------------------- */
#vefmb-admin .vefmb-displaybar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.5rem;
	margin: 0 0 1rem;
	padding: .6rem .9rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

#vefmb-admin .vefmb-displaybar__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0;
	border: 0;
}

#vefmb-admin .vefmb-displaybar__label,
#vefmb-admin .vefmb-modeswitch__label {
	margin-right: .3rem;
	padding: 0;
	font-weight: 600;
}

#vefmb-admin .vefmb-displaybar__choice {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .7rem;
	cursor: pointer;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
}

#vefmb-admin .vefmb-displaybar__choice:has(input:checked) {
	color: #fff;
	background: #2271b1;
	border-color: #2271b1;
}

#vefmb-admin .vefmb-displaybar__choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

#vefmb-admin .vefmb-displaybar__choice:has(input:focus-visible),
#vefmb-admin .vefmb-displaybar__btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

#vefmb-admin .vefmb-displaybar__btn {
	padding: .2rem .8rem;
	cursor: pointer;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
}

#vefmb-admin .vefmb-displaybar__btn[aria-pressed="true"],
#vefmb-admin .vefmb-modeswitch__btn[aria-pressed="true"] {
	color: #fff;
	background: #2271b1;
	border-color: #2271b1;
}

#vefmb-admin .vefmb-modeswitch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: .5rem 0 1rem;
}

/* "Simple" display: optional settings are folded away, but they stay in their form and are saved with it. */
#vefmb-admin.vefmb-simple .vefmb-adv:not(.is-used) {
	display: none;
}

/* Parts shown only in one of the two displays. */
#vefmb-admin .vefmb-simple-only {
	display: none;
}

#vefmb-admin.vefmb-simple .vefmb-simple-only {
	display: block;
}

#vefmb-admin .vefmb-simple-only--inline,
#vefmb-admin.vefmb-simple .vefmb-simple-only--inline {
	display: none;
}

#vefmb-admin.vefmb-simple .vefmb-simple-only--inline {
	display: inline;
}

#vefmb-admin.vefmb-simple .vefmb-adv-only {
	display: none;
}

#vefmb-admin.vefmb-simple span.vefmb-simple-only--inline.button,
#vefmb-admin.vefmb-simple input.vefmb-simple-only--inline {
	display: inline-block;
}

/* Opening times and closures said in plain words. */
#vefmb-admin .vefmb-schedules {
	display: grid;
	gap: .5rem;
	margin: .5rem 0 1rem;
	padding: 0;
	list-style: none;
}

#vefmb-admin .vefmb-schedules__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: .7rem 1rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
}

#vefmb-admin .vefmb-schedules__item.is-off {
	opacity: .6;
}

#vefmb-admin .vefmb-schedules__text {
	display: grid;
	gap: .15rem;
}

/* Several slots at once. */
#vefmb-admin .vefmb-bulkbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .8rem;
	margin: 0 0 .8rem;
	padding: .6rem .9rem;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

#vefmb-admin .vefmb-slot-table .check-column {
	width: 2.2rem;
	padding-left: .6rem;
}

#vefmb-admin .vefmb-rule-preview {
	margin: .5rem 0 0;
	padding: .5rem .8rem;
	color: #1d2327;
	background: #eef4fa;
	border-radius: 10px;
}

/* Progress of the set-up guide */
#vefmb-admin .vefmb-progress { max-width: 46em; margin: 0 0 16px; }
#vefmb-admin .vefmb-progress__bar { height: 10px; border-radius: 999px; background: #e3e6ee; overflow: hidden; }
#vefmb-admin .vefmb-progress__bar span { display: block; height: 100%; border-radius: 999px; background: var(--vefmb-accent, #2563eb); transition: width .3s; }
#vefmb-admin .vefmb-progress__text { margin: 6px 0 0; font-weight: 600; }

/* Short introduction of a screen, with the full text one click away */
#vefmb-admin .vefmb-intro { margin: 0 0 16px; padding: 10px 14px; background: #eef4fa; border-radius: 10px; max-width: 60em; }
#vefmb-admin .vefmb-intro__short { margin: 0; font-size: 14px; font-weight: 600; }
#vefmb-admin .vefmb-intro__more { margin-top: 4px; }
#vefmb-admin .vefmb-intro__more summary { cursor: pointer; color: var(--vefmb-accent, #2271b1); }
#vefmb-admin .vefmb-intro__more p { margin: 6px 0 0; color: #50575e; }

/* Contextual help ("?") under the fields */
#vefmb-admin .vefmb-help__btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: var(--vefmb-accent, #2271b1); color: #fff; font: 700 12px/1 inherit; cursor: pointer; vertical-align: middle; }
#vefmb-admin .vefmb-help__btn:hover, #vefmb-admin .vefmb-help__btn:focus { filter: brightness(1.15); }
#vefmb-admin .vefmb-help__more { display: block; margin-top: 8px; padding: 8px 12px; background: #eef4fa; border-radius: 10px; color: #3c434a; }
#vefmb-admin .vefmb-help__more[hidden] { display: none; }

/* Sections of a form as cards */
#vefmb-admin .vefmb-section { margin: 0 0 18px; padding: 4px 22px 14px; background: #fff; border: 1px solid #dfe3ea; border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
#vefmb-admin .vefmb-section__title { margin: 0 -22px 6px; padding: 12px 22px; border-bottom: 1px solid #e6eaf1; border-radius: 10px 10px 0 0; background: #f6f8fc; }
#vefmb-admin .vefmb-fold { border-radius: 10px; border: 1px solid #dfe3ea; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }

/* Rows of a form: a light separator and a clear label column */
#vefmb-admin .vefmb-section .form-table th { padding-top: 18px; font-weight: 600; }
#vefmb-admin .vefmb-section .form-table tr + tr > * { border-top: 1px solid #eef0f4; }

/* Link to the next step of the set-up */
#vefmb-admin .vefmb-nextstep { display: flex; align-items: center; gap: 12px; margin: 20px 0 6px; padding: 12px 16px; background: #f3f7fc; border: 1px solid #dfe3ea; border-radius: 10px; }
#vefmb-admin .vefmb-nextstep__label { font-weight: 600; }
#vefmb-admin .vefmb-section h3:not(.vefmb-section__title) { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid #e6eaf1; font-size: 15px; }

/* Display bar: the label above each group, the two rows of buttons on one line, a vertical separator between the groups */
#vefmb-admin .vefmb-displaybar { align-items: flex-end; }
#vefmb-admin .vefmb-displaybar__group { flex-direction: column; align-items: flex-start; gap: .3rem; }
#vefmb-admin .vefmb-displaybar__pills { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
#vefmb-admin .vefmb-displaybar__label { margin-right: 0; }
#vefmb-admin .vefmb-displaybar__group + .vefmb-displaybar__group { padding-left: 1.5rem; border-left: 1px solid #c3c4c7; }
#vefmb-admin .vefmb-displaybar__label { display: block; width: auto; margin: 0; padding: 0; line-height: 1.4; }
#vefmb-admin .vefmb-displaybar__choice, #vefmb-admin .vefmb-displaybar__btn { box-sizing: border-box; min-height: 30px; margin: 0; padding-block: 0; line-height: 1.2; display: inline-flex; align-items: center; font-size: 13px; }
#vefmb-admin .vefmb-displaybar { align-items: flex-start; }
#vefmb-admin .vefmb-displaybar legend.vefmb-displaybar__label { float: none; width: 100%; }
#vefmb-admin .vefmb-displaybar__label { font-size: 13px; height: 18px; line-height: 18px; }
#vefmb-admin legend.vefmb-displaybar__label { margin-bottom: .3rem; }

/* The guide tab commands the ones that follow: a button of its own, then a vertical separator */
#vefmb-admin .vefmb-tabs__item--guide { align-self: center; margin: 6px 4px 6px 12px; padding: 7px 16px; color: #fff; background: var(--vefmb-accent, #2271b1); border-radius: 8px; border-bottom-color: transparent; font-weight: 600; }
#vefmb-admin .vefmb-tabs__item--guide .dashicons { color: #fff; }
#vefmb-admin .vefmb-tabs__item--guide:hover, #vefmb-admin .vefmb-tabs__item--guide:focus { color: #fff; background: color-mix(in srgb, var(--vefmb-accent, #2271b1) 85%, #000); }
#vefmb-admin .vefmb-tabs__item--guide.is-active { color: #fff; background: color-mix(in srgb, var(--vefmb-accent, #2271b1) 80%, #000); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vefmb-accent, #2271b1) 25%, transparent); border-bottom-color: transparent; }
#vefmb-admin .vefmb-tabs__item--guide.is-active .dashicons { color: #fff; }
#vefmb-admin .vefmb-tabs__sep { align-self: center; width: 1px; height: 28px; margin: 0 8px 0 10px; background: #c3c4c7; }
#vefmb-admin .vefmb-tabs__sep { display: inline-block; flex: 0 0 1px; vertical-align: middle; min-width: 1px; }

/* Catalog: the tabs after the guide are the steps of a path, drawn as arrows from left to right */
#vefmb-admin .vefmb-tabs--steps { gap: 0; align-items: center; padding-block: 8px; }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--step { margin-left: -10px; padding: 10px 24px 10px 30px; color: #3c434a; background: #e9edf3; border-bottom: 0; filter: drop-shadow(0 0 0 transparent); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__sep + .vefmb-tabs__item--step { margin-left: 0; padding-left: 22px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--step:hover, #vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--step:focus { color: #fff; background: color-mix(in srgb, var(--vefmb-accent, #2271b1) 75%, #fff); }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--step.is-active { color: #fff; background: var(--vefmb-accent, #2271b1); border-bottom: 0; }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--step.is-active .dashicons, #vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--step:hover .dashicons { color: #fff; opacity: 1; }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--step + .vefmb-tabs__item--step { box-shadow: none; }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--step { padding: 10px 18px 10px 24px; gap: .3rem; }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__sep + .vefmb-tabs__item--step { padding-left: 16px; }
#vefmb-admin .vefmb-tabs--steps .vefmb-tabs__item--guide { margin-left: 4px; padding: 7px 12px; }
#vefmb-admin .vefmb-offers-availability td.vefmb-avail { white-space: nowrap; font-size: 12px; padding-inline: 4px; }

/* Schedule rows: neutral outline, small accent dot instead of a coloured edge. */
#vefmb-admin .vefmb-schedules__item { position: relative; padding-inline-start: 2rem; }
#vefmb-admin .vefmb-schedules__item::before { content: ""; position: absolute; inset-inline-start: 1rem; inset-block-start: 50%; translate: 0 -50%; width: 9px; height: 9px; border-radius: 50%; background: #2271b1; }
#vefmb-admin .vefmb-schedules__item.is-off::before { background: #a7aaad; }

/* Payment settings: the box that removes a saved secret. */
#vefmb-admin .vefmb-clear-secret {
	margin-left: 12px;
	white-space: nowrap;
}

/* Support access: conversation between the webmaster and the support team. */
#vefmb-admin .vefmb-chat {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}
#vefmb-admin .vefmb-chat__list {
	max-height: 340px;
	min-height: 120px;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#vefmb-admin .vefmb-chat__msg {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 6px;
	background: #f0f0f1;
	align-self: flex-start;
}
#vefmb-admin .vefmb-chat__msg.is-mine {
	align-self: flex-end;
	background: #e8f0fb;
}
#vefmb-admin .vefmb-chat__head {
	font-size: 12px;
	opacity: 0.75;
	margin-bottom: 2px;
}
#vefmb-admin .vefmb-chat__text {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
#vefmb-admin .vefmb-chat__ask {
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}
#vefmb-admin .vefmb-chat__empty,
#vefmb-admin .vefmb-chat__note {
	opacity: 0.7;
	text-align: center;
}
#vefmb-admin .vefmb-chat__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #dcdcde;
}
#vefmb-admin .vefmb-chat__form textarea {
	width: 100%;
	box-sizing: border-box;
}
#vefmb-admin .vefmb-chat__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Support access: the written limits of the support team. */
#vefmb-admin .vefmb-support__limits {
	margin: 12px 0 16px;
	padding: 12px 16px;
	background: #f6f7f7;
	border-radius: 4px;
	max-width: 720px;
}
#vefmb-admin .vefmb-support__limits-title {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	font-size: 14px;
}
#vefmb-admin .vefmb-support__limits ul {
	margin: 0 0 0 18px;
	list-style: disc;
}
#vefmb-admin .vefmb-support__limits li {
	margin: 4px 0;
}

/* Tips: a small "?" next to a setting, with its explanation in a bubble. */
#vefmb-admin .vefmb-tip {
	position: relative;
	display: inline-block;
	margin-left: .35em;
	vertical-align: middle;
}

#vefmb-admin .vefmb-tip__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 55%, #fff);
	border-radius: 50%;
	background: #fff;
	color: var(--wp-admin-theme-color, #2271b1);
	font-size: .75em;
	font-weight: 600;
	line-height: 1;
	cursor: help;
}

#vefmb-admin .vefmb-tip__button:hover,
#vefmb-admin .vefmb-tip__button:focus-visible,
#vefmb-admin .vefmb-tip.is-open .vefmb-tip__button {
	background: var(--wp-admin-theme-color, #2271b1);
	color: #fff;
}

#vefmb-admin .vefmb-tip__bubble {
	position: absolute;
	z-index: 20;
	top: calc(100% + .45em);
	left: -.6em;
	box-sizing: border-box;
	width: min(24rem, 78vw);
	padding: .7em .9em;
	border-radius: 8px;
	background: #1d2327;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	visibility: hidden;
	opacity: 0;
	transition: opacity .12s ease;
	pointer-events: none;
}

#vefmb-admin .vefmb-tip:hover .vefmb-tip__bubble,
#vefmb-admin .vefmb-tip:focus-within .vefmb-tip__bubble,
#vefmb-admin .vefmb-tip.is-open .vefmb-tip__bubble {
	visibility: visible;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	#vefmb-admin .vefmb-tip__bubble {
		transition: none;
	}
}

/* Guide: arrows show the way from one step to the next, and the current step says so. */
#vefmb-admin .vefmb-flow__steps {
	gap: .5rem 1rem;
}

#vefmb-admin .vefmb-flow__step {
	position: relative;
}

#vefmb-admin .vefmb-flow__step:not(:last-child)::after {
	content: "\2192";
	position: absolute;
	top: 50%;
	inset-inline-end: -.75rem;
	transform: translate(50%, -50%);
	color: #8c8f94;
	font-size: 1rem;
	line-height: 1;
	pointer-events: none;
}

#vefmb-admin .vefmb-flow__step.is-done:not(:last-child)::after {
	color: #00a32a;
}

#vefmb-admin .vefmb-flow__tag--here {
	color: var(--wp-admin-theme-color, #2271b1);
	font-weight: 600;
}

#vefmb-admin .vefmb-flow__nav .button-hero {
	margin-inline-start: auto;
}

@media (max-width: 782px) {
	#vefmb-admin .vefmb-flow__step:not(:last-child)::after {
		display: none;
	}
}