/**
 * Front-end styles.
 *
 * Colours and shapes are inherited from the active theme's own custom
 * properties, with the live site's current values as fallbacks. Fonts are
 * referenced by name only - the theme already loads them, so this file
 * makes no external request.
 */
.wedloc-picker,
.wedloc-locked {
	--wedloc-surface: var( --vamtam-btn-bg-color, #f1efeb );
	--wedloc-accent: var( --vamtam-btn-hover-bg-color, #6a6e49 );
	--wedloc-accent-text: var( --vamtam-btn-hover-text-color, #ffffff );
	--wedloc-border: var( --vamtam-input-border-color, #ced0bb );
	--wedloc-text: var( --vamtam-btn-text-color, #000000 );
	--wedloc-muted: #6b6b63;
	--wedloc-display-font: "Italiana", Georgia, "Times New Roman", serif;
	--wedloc-body-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* A block of its own inside the add-to-cart form. The theme lays that form
	   out as a flex row, which is what put this box shoulder-to-shoulder with
	   the quantity control at a different height; claiming a whole row (and a
	   whole grid row, for a theme that uses grid) puts the theme's own
	   quantity and button back on the line underneath, untouched. */
	display: block;
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
	grid-column: 1 / -1;
	float: none;
	clear: both;

	/* No container of its own. The rental dates are one field among the
	   several the shop already puts in this form ("Select size", "In-Store
	   Pickup", "Choose a delivery date", "Add a personal message"), and the
	   theme wraps none of those in a box - ours was the only one reading as a
	   coloured callout. Its padding was also stealing 35px of the column from
	   the input inside it.

	   What is left is the vertical rhythm the theme's own fields keep: 25px
	   under each one (the margin-bottom this theme puts on every input in
	   this form), expressed in rem off the 16px root so a theme with a larger
	   body size does not multiply it. */
	margin: 0 0 1.5625rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: var( --wedloc-body-font );
	color: var( --wedloc-text );
	box-sizing: border-box;
}

/* `woocommerce_before_add_to_cart_button` - where the field below is hooked -
   fires inside form.cart on a simple product and inside
   .woocommerce-variation-add-to-cart on a variable one. Both are laid out as
   a nowrap flex row here, and because the field's flex-basis is 100% a nowrap
   row keeps the quantity and Add to cart beside it however wide it is: they
   end up clean outside the box, off the side of the product column, at every
   breakpoint. Wrapping is the only thing that puts them back.

   `!important` rather than a longer selector because the rule being beaten is
   Elementor's, at (0,6,2):
       :is(…, .woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart, …)
       form.cart.variations_form .woocommerce-variation-add-to-cart,
       … form.cart:not(.grouped_form):not(.variations_form) { flex-wrap: nowrap }
   Out-specifying that means naming Elementor's own widget class here, which
   fixes this one theme and no other. The `:has( > … )` scope is what keeps the
   override honest: it can only ever reach the one box we put a field into. */
form.cart:has( > .wedloc-picker ),
form.cart:has( > .wedloc-locked ),
form.cart .woocommerce-variation-add-to-cart:has( > .wedloc-picker ),
form.cart .woocommerce-variation-add-to-cart:has( > .wedloc-locked ) {
	flex-wrap: wrap !important;
}

/* Added by product-page.js only after it has measured that box as a real flex
   container, so a theme that leaves it a block keeps the field's own bottom
   margin and none of this applies. Where it is flex, that margin is the gap
   above one row only; handing the spacing to the container gives the same
   25px above the quantity row and above Add to cart when it wraps below the
   stepper on a phone, instead of the button sitting flush against it. */
form.cart.wedloc-flex-host,
form.cart .wedloc-flex-host {
	align-items: center;
	row-gap: 1.5625rem;
}

form.cart.wedloc-flex-host > .wedloc-picker,
form.cart.wedloc-flex-host > .wedloc-locked,
form.cart .wedloc-flex-host > .wedloc-picker,
form.cart .wedloc-flex-host > .wedloc-locked {
	margin-bottom: 0;
}

.wedloc-picker [hidden],
.wedloc-locked [hidden] {
	display: none;
}

/* Typography is deliberately absent: the host theme already styles every
   `label` in this form, and saying nothing is what makes "Rental dates" come
   out identical to "Select size" and "Choose a delivery date" instead of
   nearly so. The letter-spacing that used to be declared here was the one
   property the theme did not set, which is exactly why it was the one
   property that differed.

   The gap below is the theme's own label-to-field gap - it is the margin-top
   the theme puts on its inputs, not a number of ours. */
.wedloc-picker__label {
	display: block;
	margin: 0 0 0.625rem;
}

/* max-width is 100%, not a fixed em cap: the cap was 24em against a 12px
   field, i.e. 288px, which is what actually held the input to 288px inside a
   403px column. A field in this stack is as wide as the column. */
.wedloc-picker__input {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var( --wedloc-border );
	border-radius: var( --vamtam-input-border-radius, 0 );
	background: #fff;
	font-family: var( --wedloc-body-font );
	font-size: 0.95em;
	color: var( --wedloc-text );
}

.wedloc-picker__input:focus {
	outline: none;
	border-color: var( --wedloc-accent );
	box-shadow: 0 0 0 2px rgba( 106, 110, 73, 0.15 );
}

.wedloc-picker__status {
	margin: 0.7em 0 0;
	font-size: 0.85em;
	letter-spacing: 0.02em;
	color: var( --wedloc-muted );
}

/* Nothing to say, so nothing to space: without this the empty status line
   still opened a gap under the field and broke the stack's rhythm. */
.wedloc-picker__status:empty {
	margin: 0;
}

/* Shown in place of a calendar the shop has given nothing to show. */
.wedloc-picker__notice {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var( --wedloc-text );
}

/* The locked variant is the same field with its value already filled in, so
   it is built the same way: a label line above, the value under it. It used
   to be a cream box with a display face inside it, which read as an
   announcement rather than as part of the form. The emphasis comes from the
   <strong> in the markup, so the weight is whatever the theme gives strong
   text - nothing is declared here that would freeze it. The gap is the
   theme's own label-to-field gap, as on the picker above. */
.wedloc-locked__label {
	display: block;
	margin: 0 0 0.625rem;
}

.wedloc-locked__dates {
	margin: 0 0 0.35em;
}

.wedloc-locked__note {
	margin: 0;
	font-size: 0.85em;
	color: var( --wedloc-muted );
}

/* The olive pill, with the theme's own button text colour on it.
 *
 * SPECIFICITY IS THE WHOLE POINT of the `.wedloc-locked a.` prefix, so do not
 * "simplify" this back to a lone class. `color: var( --wedloc-accent-text )`
 * was already declared here and the pill still rendered near-black: Elementor's
 * kit stylesheet carries `.elementor-kit-17 a { color: ... }`, which at (0,1,1)
 * outranks a bare `.wedloc-locked__change` at (0,1,0) and repainted every state
 * of this control - measured on this install as rgb(0, 0, 0) on the #6A6E49
 * fill, which is the unreadable text the shop owner reported. (0,2,1) wins that
 * contest without resorting to !important, and it is the same shape the popup's
 * own change-dates link and submit button already use a few hundred lines
 * below for exactly the same reason.
 *
 * No new colour literal: --wedloc-accent-text is the theme's
 * --vamtam-btn-hover-text-color, i.e. the same white the theme paints its own
 * primary buttons with, so this pill reads as one of them. */
.wedloc-locked a.wedloc-locked__change {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.25em 0.9em;
	border-radius: var( --vamtam-btn-border-radius, 25px );
	background: var( --wedloc-accent );
	color: var( --wedloc-accent-text );
	font-size: 0.8em;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.wedloc-locked a.wedloc-locked__change:hover,
.wedloc-locked a.wedloc-locked__change:focus,
.wedloc-locked a.wedloc-locked__change:active {
	opacity: 0.85;
	background: var( --wedloc-accent );
	color: var( --wedloc-accent-text );
}

/* Hover alone is opacity, which a keyboard user never sees, so focus gets a
   ring of its own. Drawn OUTSIDE the fill with a 2px offset and in the accent
   rather than in the pill's white text: the pill sits on the page background,
   so an olive ring separated from an olive fill by a sliver of page is the
   version that is actually visible - a white ring on a pale page is not. Same
   ring the popup's olive Add to cart button already wears. */
.wedloc-locked a.wedloc-locked__change:focus-visible {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * The calendar, in both places it appears.
 *
 * Both pickers ask flatpickr for a `static` calendar, which renders it inside
 * our own wrapper instead of appending it to <body>. flatpickr then positions
 * that wrapper's calendar absolutely, which drops it on top of whatever comes
 * next - the Add to cart button on the product page, the quantity and total
 * inside the popup. Putting it back in the flow is what actually stops the
 * overlap: the block grows while the calendar is open and the page below it
 * moves down, rather than being covered. The z-index is kept above sibling
 * content anyway, for a theme that gives the neighbouring elements one.
 * ------------------------------------------------------------------------- */

.wedloc-picker .flatpickr-wrapper,
.wedloc-modal .flatpickr-wrapper {
	display: block;
	width: 100%;
}

.wedloc-picker .flatpickr-calendar.static,
.wedloc-modal .flatpickr-calendar.static,
.wedloc-picker .flatpickr-calendar.static.open,
.wedloc-modal .flatpickr-calendar.static.open {
	position: relative;
	top: 0;
	z-index: 20;
	width: 100%;
	/* 22rem is close to the grid's natural size: wide enough that seven
	   columns stay comfortable, narrow enough that it does not sprawl across
	   a roomy panel. In rem so a theme with a large base font cannot inflate
	   it. */
	max-width: 22rem;
	margin-top: 0.6em;
	border: 1px solid var( --wedloc-border );
	border-radius: var( --vamtam-input-border-radius, 0 );
	box-shadow: none;
	font-family: var( --wedloc-body-font );
}

/* flatpickr hard-codes the day grid at 307.875px, which is wider than a
   380px phone leaves once the panel's padding is paid for - and a calendar
   that forces the whole panel to scroll sideways is worse than one that is
   slightly tighter. Removing the per-day max-width with it is what keeps
   seven days to a row: the days are already sized as a seventh each, and it
   is only that pixel cap that makes the row count depend on the container's
   fixed width. */
.wedloc-picker .flatpickr-days,
.wedloc-modal .flatpickr-days,
.wedloc-picker .dayContainer,
.wedloc-modal .dayContainer {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.wedloc-picker .flatpickr-day,
.wedloc-modal .flatpickr-day {
	max-width: none;
}

/* -------------------------------------------------------------------------
 * flatpickr's own header controls, insulated from the host theme.
 *
 * The month and year controls are a <select> and an <input> living inside the
 * calendar's own 34px header. A site that styles every input on the page -
 * most do - gives them its form-field height, padding, line-height and border,
 * and the header comes apart: the year sits at a different baseline from the
 * month beside it, overruns the header, and collides with the stepper arrows.
 *
 * Measured on this customer's site before this rule existed, with the calendar
 * open on the single product page:
 *
 *   .flatpickr-monthDropdown-months  height 25px,    padding 0 0 0 6.2181px
 *   .numInput.cur-year               height 52.34px, padding 12px 15px
 *
 * The declaration doing it is Elementor's global kit, not the theme's
 * stylesheet:
 *
 *   .elementor-kit-17 input:not([type="button"]):not([type="submit"])
 *       { padding: 12px 15px; line-height: ...; border-width: 1px; ... }
 *
 * That selector is (0,3,1). The reset this replaces was
 * `.wedloc-picker .flatpickr-calendar input`, which is only (0,2,1) - it lost,
 * and no amount of source order could have saved it. So the reset is written
 * along flatpickr's own container chain, which costs nothing and takes the
 * specificity to (0,5,1) without a single !important.
 *
 * Scoped to .flatpickr-calendar rather than to .wedloc-picker / .wedloc-modal:
 * the calendar is flatpickr's element wherever it ends up (inline in the
 * product page picker, inline in the popup, or appended to <body> if a future
 * caller drops `static`), and these are flatpickr's own internal controls in
 * every one of those places. Nothing outside a calendar is touched - the
 * picker's own visible date field keeps the theme's styling, as it should.
 *
 * Every value below is flatpickr's own, read from
 * assets/vendor/flatpickr.min.css (.flatpickr-current-month input.cur-year and
 * .flatpickr-current-month .flatpickr-monthDropdown-months). Nothing here is
 * invented, so the header renders as flatpickr designed it.
 * ------------------------------------------------------------------------- */

.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month select.flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month input.cur-year {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0 0 0 0.5ch;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: 300;
	line-height: inherit;
	/* These four are inherited properties, and flatpickr declares none of
	   them on either control - it lets them come down from the calendar. So
	   `inherit` is what "flatpickr's own value" means here, and it is what
	   undoes a theme that sets them on `input`/`select` specifically. */
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
	vertical-align: initial;
}

/* The two controls part company only in the affordance they carry: a menulist
   arrow on the month, a text caret on the year. Both are properties a theme's
   `appearance: none` form reset would otherwise flatten. */
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month select.flatpickr-monthDropdown-months {
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	appearance: menulist;
	/* flatpickr's own nudge: the select's menulist box sits one pixel low
	   against the year input's text box without it. */
	margin: -1px 0 0 0;
	cursor: pointer;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month input.cur-year {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
	cursor: text;
}

/* The stepper arrows are absolutely positioned against this wrapper, so a
   theme that gives it a width or a box of its own moves them off the year. */
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .numInputWrapper {
	display: inline-block;
	position: relative;
	width: 6ch;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * Unavailable days: greyed, not erased.
 *
 * flatpickr already fades these days by ALPHA, not by opacity:
 *
 *   .flatpickr-day.flatpickr-disabled          color rgba(57,57,57,0.1)
 *   .flatpickr-day.prevMonthDay/.nextMonthDay  color rgba(57,57,57,0.3)
 *
 * The rule that used to live here added `opacity: 0.35` on top of that, and
 * opacity multiplies: 0.1 alpha inside a 0.35 opacity box is ~3.5% of ink
 * against a white calendar, which is not dim - it is blank. Measured on this
 * customer's product page before this block existed, every disabled day
 * computed `color rgba(57, 57, 57, 0.1); opacity: 0.35`, and today - which the
 * 2-day notice legitimately disables - rendered as an empty ring with no digit
 * inside it. That is the bug the shop owner reported.
 *
 * So the opacity is gone and the colour is stated outright. 0.6 alpha of
 * flatpickr's own #393939 composites to #888888 on the white calendar: L* 57,
 * i.e. about 43% perceived darkness, 3.5:1 against white. Plainly secondary
 * next to a full-strength #393939 available day, plainly readable as a number.
 *
 * The strike-through stays - it is what says "unavailable" rather than merely
 * "quiet" - and it is legible at this weight, which it was not at 3.5%.
 * ------------------------------------------------------------------------- */

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
	color: rgba( 57, 57, 57, 0.6 );
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.flatpickr-disabled.prevMonthDay,
.flatpickr-day.flatpickr-disabled.nextMonthDay {
	color: rgba( 57, 57, 57, 0.6 );
	text-decoration: line-through;
	/* Never stacked on top of the alpha above: see the note. */
	opacity: 1;
	cursor: not-allowed;
}

/* Today carries a ring of its own, so its digit has to survive being read
   inside one. When today is bookable it is an ordinary available day and keeps
   flatpickr's full-strength #393939; when the notice period disables it - which
   is the common case on this shop, and exactly what the owner reported as "an
   empty black ring" - it is set darker than the rest of the unavailable set on
   purpose: 0.8 alpha composites to #616161, L* 41 (about 59% perceived
   darkness) and 6.2:1 against white. The ring is left exactly as the theme and
   flatpickr draw it; this rule only puts the number back inside it. */
.flatpickr-day.today.flatpickr-disabled,
.flatpickr-day.today.flatpickr-disabled:hover {
	color: rgba( 57, 57, 57, 0.8 );
	opacity: 1;
}

/* The olive selection, unchanged. The `.today` pairs repeat it at the same
   specificity as the rules above so that a selected day that happens to be
   today is still olive rather than grey - they are the same declarations,
   winning on source order. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange,
.flatpickr-day.today.selected,
.flatpickr-day.today.startRange,
.flatpickr-day.today.endRange,
.flatpickr-day.today.inRange {
	background: var( --wedloc-accent );
	border-color: var( --wedloc-accent );
	color: var( --wedloc-accent-text );
}

/* -------------------------------------------------------------------------
 * Quick-book popup (shop and category listings).
 *
 * The tokens above are scoped to the product-page picker, so they are
 * re-declared here from the same theme variables rather than copied as
 * literals - the fallbacks are the live site's current values and change in
 * one place if the theme does.
 * ------------------------------------------------------------------------- */

.wedloc-modal,
.wedloc-toast {
	--wedloc-surface: var( --vamtam-btn-bg-color, #f1efeb );
	--wedloc-accent: var( --vamtam-btn-hover-bg-color, #6a6e49 );
	--wedloc-accent-text: var( --vamtam-btn-hover-text-color, #ffffff );
	--wedloc-border: var( --vamtam-input-border-color, #ced0bb );
	--wedloc-text: var( --vamtam-btn-text-color, #000000 );
	--wedloc-muted: #6b6b63;
	--wedloc-display-font: "Italiana", Georgia, "Times New Roman", serif;
	--wedloc-body-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The panel and its fields size themselves with width:100% plus their own
   padding and border, which only adds up if the border is counted inside that
   width. The theme sets content-box on inputs, so the dates and quantity
   fields overflowed the panel while the select - which the theme happened to
   give border-box - did not. Own the box model for the modal's own subtree
   rather than inheriting whichever answer the active theme gives; scoped to
   .wedloc-modal so the page and the product-page picker are untouched. */
.wedloc-modal,
.wedloc-modal *,
.wedloc-modal *::before,
.wedloc-modal *::after {
	box-sizing: border-box;
}

.wedloc-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Short viewports scroll the whole overlay rather than trapping the
	   submit button below the fold. */
	overflow-y: auto;
	padding: 1.5em 1em;
	font-family: var( --wedloc-body-font );
	color: var( --wedloc-text );
}

/* Beats the display:flex above, so the shell stays inert until opened. */
.wedloc-modal[hidden] {
	display: none;
}

body.wedloc-modal-open {
	overflow: hidden;
}

.wedloc-modal__backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba( 0, 0, 0, 0.55 );
}

.wedloc-modal__panel {
	position: relative;
	width: 100%;
	max-width: 30em;
	max-height: calc( 100vh - 3em );
	margin: auto;
	overflow-y: auto;
	padding: 1.75em 1.5em 1.5em;
	border: 1px solid var( --wedloc-border );
	border-radius: var( --vamtam-input-border-radius, 0 );
	background: var( --wedloc-surface );
	box-shadow: 0 1.25em 3em rgba( 0, 0, 0, 0.25 );
	animation: wedloc-modal-rise 200ms ease-out;
}

.wedloc-modal__panel:focus {
	outline: none;
}

/* A quiet affordance, not the loudest thing in the panel. Sized to stay a
   comfortable tap target all the same.
 *
 * Written along the panel's container chain for the same reason the calendar
 * header is - measured on this site, the close button was computing
 * `padding: 17px 35px; border-radius: 25px; border: 1px solid #000;
 * background: #fff; width: 72px`, i.e. the theme's pill button, because
 * `.elementor-kit-17 button` is (0,1,1) and a bare `.wedloc-modal__close` is
 * only (0,1,0). `.wedloc-modal .wedloc-modal__panel button.wedloc-modal__close`
 * is (0,3,1) and wins outright, with no !important anywhere. */
.wedloc-modal .wedloc-modal__panel button.wedloc-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 1.75rem = 28px of visible affordance; the panel's own top/right inset
	   keeps the tap area comfortable without drawing a ring around it. */
	width: 1.75rem;
	height: 1.75rem;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var( --vamtam-input-border-radius, 0 );
	background: none;
	box-shadow: none;
	color: var( --wedloc-muted );
	font-family: var( --wedloc-body-font );
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.wedloc-modal__close-mark {
	display: block;
	margin-top: -0.1em;
}

.wedloc-modal .wedloc-modal__panel button.wedloc-modal__close:hover {
	background: none;
	color: var( --wedloc-accent );
}

/* The browser's default ring is REPLACED here, never removed: the popup sends
   focus to this button when it opens, and a keyboard user who cannot see
   where focus went has no way back out. What changes is that the indicator is
   on-brand instead of a heavy blue halo, and that a pointer user - who did
   not need it - no longer gets one. */
.wedloc-modal .wedloc-modal__panel button.wedloc-modal__close:focus {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: 2px;
	box-shadow: none;
	color: var( --wedloc-accent );
}

.wedloc-modal .wedloc-modal__panel button.wedloc-modal__close:focus:not( :focus-visible ) {
	outline: none;
}

.wedloc-modal .wedloc-modal__panel button.wedloc-modal__close:focus-visible {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: 2px;
	color: var( --wedloc-accent );
}

.wedloc-modal__header {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 1.25em;
	padding-right: 2em;
}

.wedloc-modal__image {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border: 1px solid var( --wedloc-border );
}

.wedloc-modal__image[hidden] {
	display: none;
}

/* min-width:0 lets this column actually shrink; without it a long word in a
   product name pushes the whole header wider than the panel. */
.wedloc-modal__heading {
	flex: 1 1 auto;
	min-width: 0;
}

/* Real rental names are long ("Black Mini Incense Pot - Black Matt
   Stoneware"), so the display face is capped rather than scaled to the panel:
   at this size a 44-character name is two lines beside the thumbnail instead
   of four lines towering over it. Sized in rem, and with the extra class for
   specificity, because the theme's own h2 rule is what it is competing
   with. */
.wedloc-modal .wedloc-modal__title {
	margin: 0;
	font-family: var( --wedloc-display-font );
	font-size: clamp( 1.05rem, 0.9rem + 1.2vw, 1.375rem );
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.25;
	overflow-wrap: anywhere;
	text-transform: none;
}

.wedloc-modal__rate {
	margin: 0.3em 0 0;
	font-family: var( --wedloc-body-font );
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var( --wedloc-muted );
}

.wedloc-modal__field {
	margin-bottom: 1.1em;
}

/* Same silence as the product page's label, for the same reason: the theme
   styles `label`, and the popup's fields should read as the theme's fields. */
.wedloc-modal__label {
	display: block;
	margin: 0 0 0.625rem;
}

.wedloc-modal__field[ hidden ] {
	display: none;
}

/* Targeted by class, not by element: the calendar flatpickr renders INSIDE
   this field has a <select> and an <input type="number"> of its own, and an
   element-based rule here captured them and blew its 34px header apart. The
   class also travels to flatpickr's alternate input, which is a copy of ours.
   The stepper brings its own. */
.wedloc-modal .wedloc-modal__input {
	width: 100%;
	max-width: 100%;
	padding: 0.65em 0.85em;
	border: 1px solid var( --wedloc-border );
	border-radius: var( --vamtam-input-border-radius, 0 );
	background: #fff;
	font-family: var( --wedloc-body-font );
	font-size: 0.95em;
	line-height: 1.4;
	color: var( --wedloc-text );
}

.wedloc-modal .wedloc-modal__input:focus {
	outline: none;
	border-color: var( --wedloc-accent );
	box-shadow: 0 0 0 2px rgba( 106, 110, 73, 0.15 );
}

.wedloc-modal .wedloc-modal__input:disabled,
.wedloc-modal .wedloc-stepper__input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wedloc-modal__field input[ hidden ] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Quantity stepper.
 *
 * One bordered group: minus, the number, plus. Square-cornered and 44px tall,
 * following the theme's own inputs rather than its buttons - this is a field
 * being edited, not an action being taken, and the pill radius is what this
 * theme reserves for the things you press to go somewhere. The two controls
 * inside it are <button type="button"> and the number is a real
 * <input type="number">, so nothing here is a div pretending.
 *
 * SPECIFICITY. This whole block is written along the modal's own container
 * chain - `.wedloc-modal .wedloc-modal__panel .wedloc-modal__field
 * .wedloc-stepper` plus an element qualifier - for exactly the reason the
 * flatpickr header reset is. Measured on this customer's site with the popup
 * open, the three parts were computing:
 *
 *   button.wedloc-stepper__button  width 72px, padding 17px 35px,
 *                                  border-radius 25px, border 1px solid #000
 *   input.wedloc-stepper__input    width 32px, padding 12px 15px
 *
 * i.e. two of the theme's pill buttons with a 32px box between them whose
 * 30px of horizontal padding left 2px of room for the digit - which is why
 * the number was invisible and the three parts read as mismatched slabs. The
 * winning declarations are Elementor's global kit again:
 *
 *   .elementor-kit-17 button                                    (0,1,1)
 *   .elementor-kit-17 input:not([type=button]):not([type=submit])  (0,3,1)
 *
 * against a plain `.wedloc-stepper__button` (0,1,0) and a
 * `.wedloc-modal__field input.wedloc-stepper__input` (0,2,1). Both lost. The
 * chain below is (0,5,1), which beats the input rule - the higher of the two
 * - without a single !important.
 * ------------------------------------------------------------------------- */

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 10.5rem;
	margin: 0;
	padding: 0;
	border: 1px solid var( --wedloc-border );
	border-radius: var( --vamtam-input-border-radius, 0 );
	background: #fff;
	overflow: hidden;
}

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper:focus-within {
	border-color: var( --wedloc-accent );
	box-shadow: 0 0 0 2px rgba( 106, 110, 73, 0.15 );
}

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper button.wedloc-stepper__button {
	flex: 0 0 auto;
	/* 2.75rem = 44px: the height of every other field in this theme, and the
	   smallest comfortable thumb target. Square, so minus, number and plus
	   are one control rather than three. */
	width: 2.75rem;
	min-width: 2.75rem;
	max-width: 2.75rem;
	height: 2.75rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var( --wedloc-surface );
	background-image: none;
	box-shadow: none;
	color: var( --wedloc-text );
	font-family: var( --wedloc-body-font );
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	cursor: pointer;
}

/* The seams inside the group. Declared on the same chain so the theme's
   `border: 1px solid #000` cannot reinstate a box around each button. */
.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper button.wedloc-stepper__button:first-child {
	border-right: 1px solid var( --wedloc-border );
}

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper button.wedloc-stepper__button:last-child {
	border-left: 1px solid var( --wedloc-border );
}

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper button.wedloc-stepper__button:hover:not( [disabled] ) {
	background: var( --wedloc-accent );
	color: var( --wedloc-accent-text );
}

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper button.wedloc-stepper__button:focus {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: -2px;
	box-shadow: none;
}

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper button.wedloc-stepper__button:focus:not( :focus-visible ) {
	outline: none;
}

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper button.wedloc-stepper__button:focus-visible {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: -2px;
}

/* Disabled at the ends of the range - minus at the minimum, plus at the
   maximum. Still readable, plainly not pressable. */
.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper button.wedloc-stepper__button[ disabled ] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* The number. `padding: 0 0.25rem` is the whole point of the chain: the
   theme's 15px of horizontal padding on a box this narrow is what hid the
   digit. Sized off the theme's own body font token so it stays legible
   against the two buttons without inventing a scale. */
.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper input.wedloc-stepper__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 2.75rem;
	min-height: 0;
	margin: 0;
	padding: 0 0.25rem;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-family: var( --wedloc-body-font );
	font-size: var( --vamtam-primary-font-font-size, 0.875rem );
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-indent: 0;
	color: var( --wedloc-text );
	/* The two buttons replace the browser's own spinners. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.wedloc-modal .wedloc-modal__panel .wedloc-modal__field .wedloc-stepper input.wedloc-stepper__input:focus {
	outline: none;
	border: 0;
	box-shadow: none;
}

.wedloc-stepper__input::-webkit-outer-spin-button,
.wedloc-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * The same stepper on the single product page.
 *
 * The number inside it is WooCommerce's own quantity input, moved into a
 * wrapper by product-page.js rather than re-rendered - so this block styles an
 * element the shop's other plugins still own, and touches nothing but its box.
 *
 * The tokens are re-declared here because the group lives inside the theme's
 * `div.quantity`, which is OUTSIDE `.wedloc-picker` where the product page's
 * tokens are set. Same theme variables, same fallbacks; nothing is copied as a
 * literal that would drift if the theme changed.
 *
 * SPECIFICITY, measured on this customer's product page. The quantity input is
 * styled by two rules that beat anything short:
 *
 *   .elementor-15426 .elementor-element.elementor-element-faad05a
 *       .quantity .qty                                          (0,5,0)
 *       -> padding: 17px 0
 *   .elementor-widget-woocommerce-product-add-to-cart.vamtam-has-theme-widget-styles
 *       form.cart div.quantity input.qty                        (0,5,3)
 *       -> width: 100%; max-width: 100px
 *
 * which is why the input's chain below carries six classes and three elements,
 * (0,6,3), and wins outright with no !important. `qty` and
 * `wedloc-stepper__input` are both really on that element - the script adds the
 * second and leaves the first, along with name, value, min, max and step,
 * exactly as WooCommerce wrote them.
 * ------------------------------------------------------------------------- */

form.cart .wedloc-stepper.wedloc-stepper--inline {
	--wedloc-surface: var( --vamtam-btn-bg-color, #f1efeb );
	--wedloc-accent: var( --vamtam-btn-hover-bg-color, #6a6e49 );
	--wedloc-accent-text: var( --vamtam-btn-hover-text-color, #ffffff );
	--wedloc-border: var( --vamtam-input-border-color, #ced0bb );
	--wedloc-text: var( --vamtam-btn-text-color, #000000 );
	--wedloc-body-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	/* 8.75rem = 140px: two 44px buttons, two 1px borders and a 50px number.
	   Was 10.5rem (168px), which together with the gap below would have made
	   this cell WIDER than the bare input's cell ever was and pushed Add to
	   cart onto a line of its own - see the gap rule for the arithmetic. */
	width: 8.75rem;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var( --wedloc-border );
	border-radius: var( --vamtam-input-border-radius, 0 );
	background: #fff;
	overflow: hidden;
}

/* The theme sizes this cell to its content as a flex item, so it has to be
   allowed to grow from the bare input's width to the group's. */
form.cart div.quantity:has( .wedloc-stepper--inline ) {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * The space between the quantity cell and Add to cart.
 *
 * Neither control carries any horizontal margin of its own on this site - the
 * theme lays form.cart out as a wrapping flex row and lets Add to cart grow
 * into whatever is left, so the two were only ever separated by the slack the
 * quantity cell did not use. The bare input's cell was 80px wide; the stepper
 * made it 168px and ate all of it, leaving the measured gap at exactly 0px.
 *
 * 25px is the form's own vertical rhythm - the margin-bottom this theme puts
 * under each field, and the same figure the picker block above uses - written
 * in rem off the 16px root for the same reason it is there.
 *
 * The arithmetic that keeps this safe when the form wraps: the cell's total
 * footprint is now 140px + 25px = 165px, which is LESS than the 168px it
 * occupied before this rule existed. Flex line-breaking can therefore only
 * behave the same or better than it does today at every width - the pair
 * cannot start wrapping anywhere it does not already wrap. Measured at 380px
 * (see the report): the two stack there both before and after, so this adds a
 * gap on wide screens without moving anything on narrow ones.
 *
 * SPECIFICITY. `margin-right: 0` is set on this cell by
 *
 *   .woocommerce div.product.elementor
 *       .elementor-widget-woocommerce-product-add-to-cart.vamtam-has-theme-widget-styles
 *       .elementor-add-to-cart form.cart .quantity            (0,8,2)
 *
 * and by Elementor's own `margin-inline-end: 0` at (0,6,3). Rather than chain
 * the page builder's class names - which would tie this file to Elementor -
 * the weight is taken from our OWN markup inside :has(), whose specificity is
 * that of its most specific argument: (0,6,1) there plus (0,2,2) outside adds
 * up to (0,8,3), which beats (0,8,2) on element count with no !important.
 * Every class named inside :has() is one this plugin's own script wrote.
 * ------------------------------------------------------------------------- */
form.cart div.quantity:has( .wedloc-stepper.wedloc-stepper--inline[data-wedloc-stepper] input.qty.wedloc-stepper__input[type="number"] ) {
	margin-right: 1.5625rem;
}

form.cart .wedloc-stepper.wedloc-stepper--inline:focus-within {
	border-color: var( --wedloc-accent );
	box-shadow: 0 0 0 2px rgba( 106, 110, 73, 0.15 );
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button,
form.cart .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button {
	flex: 0 0 auto;
	box-sizing: border-box;
	/* 2.75rem = 44px, as in the popup. */
	width: 2.75rem;
	min-width: 2.75rem;
	max-width: 2.75rem;
	height: 2.75rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var( --wedloc-surface );
	background-image: none;
	box-shadow: none;
	color: var( --wedloc-text );
	font-family: var( --wedloc-body-font );
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	cursor: pointer;
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:first-child,
form.cart .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:first-child {
	border-right: 1px solid var( --wedloc-border );
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:last-child,
form.cart .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:last-child {
	border-left: 1px solid var( --wedloc-border );
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:hover:not( [disabled] ),
form.cart .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:hover:not( [disabled] ) {
	background: var( --wedloc-accent );
	color: var( --wedloc-accent-text );
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:focus,
form.cart .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:focus {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: -2px;
	box-shadow: none;
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:focus:not( :focus-visible ),
form.cart .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:focus:not( :focus-visible ) {
	outline: none;
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:focus-visible,
form.cart .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button:focus-visible {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: -2px;
}

/* At the ends of the range: still readable, plainly not pressable. */
form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button[ disabled ],
form.cart .wedloc-stepper.wedloc-stepper--inline button.wedloc-stepper__button[ disabled ] {
	opacity: 0.4;
	cursor: not-allowed;
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline input.qty.wedloc-stepper__input,
form.cart .wedloc-stepper.wedloc-stepper--inline input.qty.wedloc-stepper__input {
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 2.75rem;
	min-height: 0;
	margin: 0;
	padding: 0 0.25rem;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-family: var( --wedloc-body-font );
	font-size: var( --vamtam-primary-font-font-size, 0.875rem );
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-indent: 0;
	color: var( --wedloc-text );
	/* The two buttons replace the browser's own spinners. */
	-moz-appearance: textfield;
	appearance: textfield;
}

form.cart div.quantity .wedloc-stepper.wedloc-stepper--inline input.qty.wedloc-stepper__input:focus,
form.cart .wedloc-stepper.wedloc-stepper--inline input.qty.wedloc-stepper__input:focus {
	outline: none;
	border: 0;
	box-shadow: none;
}

/* A field with its value already decided: the theme's field box, the theme's
   field text. */
.wedloc-modal__locked {
	margin: 0;
	padding: 0.65em 0.85em;
	border: 1px solid var( --wedloc-border );
	border-radius: var( --vamtam-input-border-radius, 0 );
	background: #fff;
	font-family: var( --wedloc-body-font );
}

/* The way back out of a locked order, worded and weighted exactly as it is on
   the product page: a sentence-case text link under the fixed dates, not a
   second filled button arguing with Add to cart for the customer's attention. */
.wedloc-modal__locked-note {
	margin: 0.45em 0 0;
	font-size: 0.8em;
	letter-spacing: 0.02em;
	color: var( --wedloc-muted );
}

.wedloc-modal .wedloc-modal__panel a.wedloc-modal__change {
	padding: 0;
	border: 0;
	background: none;
	color: var( --wedloc-muted );
	font-family: var( --wedloc-body-font );
	font-size: inherit;
	font-weight: 400;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.wedloc-modal .wedloc-modal__panel a.wedloc-modal__change:hover,
.wedloc-modal .wedloc-modal__panel a.wedloc-modal__change:focus {
	color: var( --wedloc-accent );
}

.wedloc-modal .wedloc-modal__panel a.wedloc-modal__change:focus-visible {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: 2px;
}

.wedloc-modal__availability {
	display: block;
	margin-top: 0.45em;
	font-size: 0.8em;
	letter-spacing: 0.02em;
	color: var( --wedloc-muted );
}

.wedloc-modal__total {
	margin: 0 0 0.5em;
	min-height: 1.2em;
	font-family: var( --wedloc-display-font );
	font-size: 1.5em;
	letter-spacing: 0.03em;
}

.wedloc-modal__status {
	margin: 0 0 1em;
	font-size: 0.85em;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var( --wedloc-muted );
}

.wedloc-modal__status:empty {
	margin: 0;
}

/* A statement about the item rather than a nudge about the customer's next
   move, so it is read at full strength. */
.wedloc-modal__status--notice {
	font-size: 0.95em;
	color: var( --wedloc-text );
}

/* The panel's one action, so it wears the theme's button: its pill radius,
   its hover fill, its uppercase h6 lettering. On the same container chain as
   the close button and the stepper - `.elementor-kit-17 button` (0,1,1) was
   otherwise painting it white with a black ring, which made the primary
   action of the popup the palest thing in it. */
.wedloc-modal .wedloc-modal__panel button.button.wedloc-modal__submit {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.85em 1em;
	border: 0;
	border-radius: var( --vamtam-btn-border-radius, 25px );
	background: var( --wedloc-accent );
	background-image: none;
	color: var( --wedloc-accent-text );
	font-family: var( --wedloc-body-font );
	font-size: var( --vamtam-h6-font-size, 0.75rem );
	font-weight: var( --vamtam-h6-font-weight, 500 );
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: var( --vamtam-h6-text-transform, uppercase );
	cursor: pointer;
}

.wedloc-modal .wedloc-modal__panel button.button.wedloc-modal__submit:hover:not( [disabled] ),
.wedloc-modal .wedloc-modal__panel button.button.wedloc-modal__submit:focus:not( [disabled] ) {
	opacity: 0.85;
	background: var( --wedloc-accent );
	color: var( --wedloc-accent-text );
}

.wedloc-modal .wedloc-modal__panel button.button.wedloc-modal__submit:focus-visible {
	outline: 2px solid var( --wedloc-accent );
	outline-offset: 2px;
}

.wedloc-modal .wedloc-modal__panel button.button.wedloc-modal__submit[ disabled ] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* The calendar itself is styled once, for both pickers, near the top of this
   file - see "The calendar, in both places it appears". */

/* Brief confirmation after a successful add; the customer stays where they are. */
.wedloc-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5em;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 1.1em;
	transform: translateX( -50% );
	max-width: calc( 100vw - 2em );
	padding: 0.85em 1.6em;
	border-radius: var( --vamtam-btn-border-radius, 25px );
	background: var( --wedloc-accent );
	color: var( --wedloc-accent-text );
	font-family: var( --wedloc-body-font );
	font-size: 0.85em;
	letter-spacing: 0.06em;
	box-shadow: 0 0.5em 1.5em rgba( 0, 0, 0, 0.25 );
	animation: wedloc-toast-rise 200ms ease-out;
}

.wedloc-toast[hidden] {
	display: none;
}

/* The obvious next step, inside the confirmation rather than somewhere the
   customer has to go looking for it. */
.wedloc-toast a.wedloc-toast__link {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.wedloc-toast a.wedloc-toast__link:hover,
.wedloc-toast a.wedloc-toast__link:focus {
	color: inherit;
	opacity: 0.85;
}

.wedloc-toast a.wedloc-toast__link:focus-visible {
	outline: 2px solid var( --wedloc-accent-text );
	outline-offset: 2px;
}

@keyframes wedloc-modal-rise {
	from {
		opacity: 0;
		transform: translateY( 0.75em );
	}
}

/* Movement only - deliberately NO `opacity: 0` here.
 *
 * animation-fill-mode is `none`, so a from-block that sets opacity to 0 is
 * the element's appearance for as long as the animation sits at time 0, and
 * an animation only advances while the document is being painted. Measured on
 * this install with the tab backgrounded: the toast was in the DOM, laid out,
 * 190x40 at the bottom of the viewport - and computed opacity 0 with the
 * animation stuck at currentTime 0, i.e. a confirmation that is present and
 * completely invisible. A confirmation nobody can see is the bug this is
 * fixing, so its visibility no longer depends on frames being delivered: the
 * toast is opaque from the first paint and the rise is pure decoration.
 */
@keyframes wedloc-toast-rise {
	from {
		transform: translate( -50%, 0.75em );
	}
}

@media ( max-width: 30em ) {
	.wedloc-modal {
		padding: 0.75em 0.5em;
	}

	.wedloc-modal__panel {
		padding: 1.5em 1em 1.25em;
		max-height: calc( 100vh - 1.5em );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wedloc-modal__panel,
	.wedloc-toast {
		animation: none;
	}

	.wedloc-modal__close,
	.wedloc-modal__submit,
	.wedloc-modal__field select,
	.wedloc-modal__field input {
		transition: none;
	}
}