/**
 * VEFmultiBooking Pro — front-end styles of the Pro widgets (customer
 * portal, installment payment, waitlist).
 *
 * Loaded after the Free stylesheet (`vefmb-frontend`, a dependency) and
 * built on the SAME variables (--vefmb-*) and rules: theme font and heading
 * sizes by default, plugin font only through `vefmb-has-font`, fluid sizes,
 * colors derived from currentColor (readable on light AND dark themes),
 * accent, radius, spacing and shadows from the Style tab or from the block
 * settings of the page builder (inline variables on the widget root).
 *
 * Same layout rules as the Free stylesheet (0.25.0): flex everywhere, every
 * value a variable, container queries (the width of the BLOCK decides).
 */

.vefmbpro-portal,
.vefmbpro-payment,
.vefmbpro-waitlist {
	--vefmb-space: calc(var(--vefmb-space-base) * var(--vefmb-density));
	--vefmb-gap: calc(var(--vefmb-gap-base) * var(--vefmb-density));
	container: vefmbpro / inline-size;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--vefmb-gap);
	width: 100%;
	max-width: var(--vefmb-widget-max-width);
	margin-inline: auto;
	padding: var(--vefmb-space);
	border: var(--vefmb-border-width) solid var(--vefmb-border);
	border-radius: var(--vefmb-widget-radius);
	box-shadow: var(--vefmb-shadow-block, 0 0 0 0) var(--vefmb-shadow-color);
}

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) *,
:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) *::before,
:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) *::after {
	box-sizing: border-box;
}

/* The hidden attribute must always win (a theme reset can give <section> an explicit display,
   which would show every part of the customer portal at once). */
:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) [hidden] {
	display: none !important;
}

.alignwide > :is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist),
.alignfull > :is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) {
	max-width: none;
}

.vefmb-has-font :is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) {
	font-family: var(--vefmb-font-family, inherit);
}

.vefmb-has-font [class*="-font-family"] > :is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) {
	font-family: inherit;
}

.vefmb-has-font :is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) :is(h2, h3, h4, h5) {
	font-family: inherit;
}

:where(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) :where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

/* Divi 5 module wrapper (flex item with flex-grow:0): fill the column. */
[class*="vefmbpro_divi_"] {
	width: 100%;
}

/* --- Sections and headings --------------------------------------------- */

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) section {
	display: flex;
	flex-direction: column;
	gap: var(--vefmb-gap);
	min-width: 0;
}

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) :is(h3, h4, h5) {
	margin: 0;
}

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) p {
	margin: 0;
}

/* --- Notices / loading -------------------------------------------------- */

:is(.vefmbpro-portal__notice, .vefmbpro-payment__notice, .vefmbpro-waitlist__notice) {
	display: flex;
	align-items: center;
	gap: .6em;
	position: relative;
	padding: .7em 1em;
	padding-inline-start: 3.2em;
	min-height: 2.6em;
	background: color-mix(in srgb, currentColor 8%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: calc(var(--vefmb-control-radius) * 2.5);
	-webkit-backdrop-filter: blur(var(--vefmb-glass-blur, 18px)) saturate(1.2);
	backdrop-filter: blur(var(--vefmb-glass-blur, 18px)) saturate(1.2);
	box-shadow: 0 6px 20px rgb(0 0 0 / .12);
}

@supports (background: oklch(from red calc(1 - l) 0 0 / .5)) {
	:is(.vefmbpro-portal__notice, .vefmbpro-payment__notice, .vefmbpro-waitlist__notice),
	.vefmbpro-payment__content > p:first-child {
		background: oklch(from currentColor clamp(.06, calc(.06 + (.62 - l) * 20), .97) 0 0 / var(--vefmb-glass-alpha, .5));
	}
}

:is(.vefmbpro-portal__notice, .vefmbpro-payment__notice, .vefmbpro-waitlist__notice)::before,
:is(.vefmbpro-portal__notice, .vefmbpro-payment__notice, .vefmbpro-waitlist__notice)::after {
	content: "";
	position: absolute;
	inset-inline-start: .9em;
	inset-block-start: 50%;
	translate: 0 -50%;
	width: 1.5em;
	height: 1.5em;
}

:is(.vefmbpro-portal__notice, .vefmbpro-payment__notice, .vefmbpro-waitlist__notice)::before {
	border-radius: 50%;
	/* Own color, not the text color: the white symbol stays readable on any theme. */
	background: var(--vefmb-error);
}

:is(.vefmbpro-portal__notice, .vefmbpro-payment__notice, .vefmbpro-waitlist__notice)::after {
	background: var(--vefmb-on-error);
	-webkit-mask: var(--vefmb-glyph-alert) center / 70% no-repeat;
	mask: var(--vefmb-glyph-alert) center / 70% no-repeat;
}

:is(.vefmbpro-payment__loading, .vefmbpro-waitlist__loading, .vefmbpro-payment__sample) {
	opacity: .75;
	font-size: var(--wp--preset--font-size--small, var(--vefmb-font-size-small));
}

/* --- Form fields --------------------------------------------------------- */

.vefmbpro-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vefmb-gap);
}

.vefmbpro-row > .vefmbpro-field {
	flex: 1 1 12rem;
}

.vefmbpro-field {
	display: flex;
	flex-direction: column;
	gap: .35em;
	min-width: 0;
	font-size: var(--wp--preset--font-size--small, var(--vefmb-font-size-small));
	font-weight: 600;
}

.vefmbpro-field input {
	display: block;
	width: 100%;
	min-height: var(--vefmb-field-height);
	padding: .5em .75em;
	border: var(--vefmb-border-width) solid var(--vefmb-border);
	border-radius: var(--vefmb-control-radius);
	background: transparent;
	font-size: var(--wp--preset--font-size--normal, var(--vefmb-font-size-normal));
	font-weight: 400;
	box-shadow: var(--vefmb-shadow-fields, 0 0 0 0) var(--vefmb-shadow-color);
	transition: border-color var(--vefmb-duration) var(--vefmb-ease), box-shadow var(--vefmb-duration) var(--vefmb-ease);
}

.vefmbpro-field input:hover {
	border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.vefmbpro-field input:focus {
	outline: none;
	border-color: var(--vefmb-accent);
	box-shadow: var(--vefmb-shadow-fields, 0 0 0 0) var(--vefmb-shadow-color), 0 0 0 var(--vefmb-focus-width) color-mix(in srgb, var(--vefmb-accent) 35%, transparent);
}

.vefmb-widget--fields-filled .vefmbpro-field input {
	border-color: transparent;
	background: var(--vefmb-surface-strong);
}

.vefmb-widget--fields-underlined .vefmbpro-field input {
	border-width: 0 0 calc(var(--vefmb-border-width) * 2);
	border-radius: 0;
	padding-inline: .25em;
}

.vefmbpro-waitlist__form {
	display: flex;
	flex-direction: column;
	gap: var(--vefmb-gap);
}

/* --- Buttons (same look as the Free widget buttons) ----------------------- */

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: var(--vefmb-field-height);
	margin: 0;
	padding: .7em 1.4em;
	background: var(--vefmb-button-bg, var(--vefmb-accent));
	color: var(--vefmb-button-text);
	border: var(--vefmb-border-width) solid var(--vefmb-button-bg, var(--vefmb-accent));
	border-radius: var(--vefmb-control-radius);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter var(--vefmb-duration) var(--vefmb-ease), background-color var(--vefmb-duration) var(--vefmb-ease), border-color var(--vefmb-duration) var(--vefmb-ease), transform var(--vefmb-duration) var(--vefmb-ease);
}

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) button:hover {
	background: var(--vefmb-button-hover, var(--vefmb-button-bg, var(--vefmb-accent)));
	border-color: var(--vefmb-button-hover, var(--vefmb-button-bg, var(--vefmb-accent)));
	filter: brightness(var(--vefmb-button-hover-brightness));
}

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) button:focus-visible {
	outline: var(--vefmb-focus-width) solid color-mix(in srgb, var(--vefmb-accent) 45%, transparent);
	outline-offset: var(--vefmb-outline-offset);
}

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) button:active {
	transform: translateY(1px);
}

:is(.vefmbpro-portal, .vefmbpro-payment, .vefmbpro-waitlist) button:disabled {
	opacity: .55;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

/* Secondary actions: back to the list, one booking in the list, a full date to pick. */
.vefmbpro-portal .vefmbpro-portal__back,
.vefmbpro-portal .vefmbpro-portal__booking-item,
.vefmbpro-waitlist__dates button {
	background: var(--vefmb-surface);
	color: inherit;
	border-color: var(--vefmb-border);
}

.vefmbpro-portal .vefmbpro-portal__back {
	align-self: flex-start;
}

.vefmbpro-portal .vefmbpro-portal__back:hover,
.vefmbpro-portal .vefmbpro-portal__booking-item:hover,
.vefmbpro-waitlist__dates button:hover {
	background: var(--vefmb-surface);
	border-color: var(--vefmb-accent);
	filter: none;
}

/* --- Customer portal ------------------------------------------------------ */

.vefmbpro-portal__list {
	display: flex;
	flex-direction: column;
	gap: calc(var(--vefmb-gap) * .6);
}

.vefmbpro-portal .vefmbpro-portal__booking-item {
	justify-content: flex-start;
	width: 100%;
	padding: calc(var(--vefmb-space) * .6) var(--vefmb-space);
	border-radius: var(--vefmb-widget-radius);
	text-align: start;
	box-shadow: var(--vefmb-shadow-cards, 0 0 0 0) var(--vefmb-shadow-color);
}

.vefmbpro-portal__detail,
.vefmbpro-portal__detail-content {
	display: flex;
	flex-direction: column;
	gap: var(--vefmb-gap);
}

/* A line of the installment schedule: its text, then its "Pay" link. */
.vefmbpro-portal__detail-content p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3em .6em;
}

.vefmbpro-portal__detail-content a {
	font-weight: 600;
	color: var(--vefmb-accent);
}

.vefmbpro-portal__detail-content button {
	align-self: flex-start;
	background: transparent;
	color: inherit;
	border-color: var(--vefmb-border);
}

.vefmbpro-portal__detail-content button:hover {
	background: transparent;
	border-color: var(--vefmb-error);
	filter: none;
}

/* --- Installment payment ---------------------------------------------------- */

.vefmbpro-payment__content {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: calc(var(--vefmb-gap) * .75);
}

/* The amount due, first line: a highlighted panel like the price of the booking form. */
.vefmbpro-payment__content > p:first-child {
	flex: 1 1 100%;
	padding: calc(var(--vefmb-space) * .6) var(--vefmb-space);
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: calc(var(--vefmb-control-radius) * 2.5);
	background: color-mix(in srgb, currentColor 8%, transparent);
	-webkit-backdrop-filter: blur(var(--vefmb-glass-blur, 18px)) saturate(1.2);
	backdrop-filter: blur(var(--vefmb-glass-blur, 18px)) saturate(1.2);
	box-shadow: 0 6px 20px rgb(0 0 0 / .12);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium, var(--vefmb-font-size-medium));
}

.vefmbpro-payment__content > p {
	flex: 1 1 100%;
}

/* --- Waitlist ------------------------------------------------------------------ */

.vefmbpro-waitlist__dates {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--vefmb-gap) * .6);
}

.vefmbpro-waitlist__dates > p {
	flex: 1 1 100%;
}

.vefmbpro-waitlist__dates button {
	flex: 1 1 var(--vefmb-slot-min);
}

.vefmbpro-waitlist__dates button[aria-pressed="true"] {
	border-color: var(--vefmb-accent);
	background: color-mix(in srgb, var(--vefmb-accent) 14%, transparent);
}

/* --- Narrow blocks (the width of the BLOCK, not of the window) ------------------ */

@container vefmbpro (max-width: 30rem) {
	.vefmbpro-payment__content > button,
	.vefmbpro-waitlist__form > button,
	.vefmbpro-portal__request > button {
		width: 100%;
	}
}

@media (forced-colors: active) {
	.vefmbpro-waitlist__dates button[aria-pressed="true"] {
		outline: .125rem solid Highlight;
	}
}

/* Short explanations under the titles of the Pro blocks. */
.vefmbpro-portal__intro,
.vefmbpro-waitlist__intro,
.vefmbpro-payment__notice-static {
	margin: 0 0 1em;
	font-size: var(--wp--preset--font-size--small, .9em);
	opacity: .8;
}

/* Title alignment (Free "Title alignment" setting, site default or per block): applied to the Pro block titles when one is set. */
.vefmbpro-portal.vefmb-has-title-align :is(h3, h4, h5),
.vefmbpro-payment.vefmb-has-title-align :is(h3, h4, h5),
.vefmbpro-waitlist.vefmb-has-title-align > h4 {
	text-align: var(--vefmb-title-align, start);
}