/**
 * The drawer's own styles.
 *
 * Scoped to .ma-enq-* and nothing else. This stylesheet loads on somebody
 * else's theme, so it never touches .button, never sets a font family, and
 * reaches a bare element only inside the drawer it owns — the buttons are
 * the theme's, on purpose, so the drawer looks like part of the shop rather
 * than part of a plugin.
 *
 * What it does give the theme's buttons is a focus ring, and only that. A
 * shop that styles its buttons has an opinion about their colour; almost
 * none have an opinion about what they look like under a keyboard, and the
 * ring is drawn outside the box, so it changes no paint and moves nothing.
 *
 * The buttons this plugin does own — close, remove, the counter — are styled
 * here in full, because nothing else will style them. They get a real hit
 * target rather than a bare glyph, and a hover, active and focus state each,
 * so a control that does something looks like a control that does something.
 *
 * Colours come from a handful of custom properties with plain fallbacks, so
 * a theme can restyle the whole thing without overriding a single rule.
 */

.ma-enq-overlay,
.ma-enq-fab {
	--ma-enq-bg: #fff;
	--ma-enq-fg: #1a1a1a;
	--ma-enq-muted: #666;
	--ma-enq-border: #e0e0e0;
	--ma-enq-field: #fafafa;
	/* The tint a bare icon button takes under the pointer, and the ring every
	   button in here shows to the keyboard. */
	--ma-enq-hover: rgba( 0, 0, 0, 0.07 );
	--ma-enq-ring: #2563eb;
	/* The counter is the one thing here that carries its own colour: it has
	   to be findable against whatever the theme has put behind it. */
	--ma-enq-accent: #1a1a1a;
	--ma-enq-accent-fg: #fff;
}

.ma-enq-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	justify-content: flex-end;
	background: rgba( 0, 0, 0, 0.45 );
}

/* An explicit display would defeat the hidden attribute, so it is restated. */
.ma-enq-overlay[hidden] { display: none; }

body.ma-enq-open { overflow: hidden; }

.ma-enq-drawer {
	display: flex;
	flex-direction: column;
	width: min( 940px, 100% );
	max-height: 100%;
	background: var( --ma-enq-bg );
	color: var( --ma-enq-fg );
	box-shadow: -8px 0 40px rgba( 0, 0, 0, 0.25 );
	animation: ma-enq-in 0.18s ease-out;

	/*
	 * Anchored to the root, not to whatever the theme set on <body>.
	 *
	 * The font FAMILY is still inherited — the drawer should read as part of
	 * the shop. The size is not, and that turned out to matter more than it
	 * sounds: a theme whose body copy is 22px was handing that size straight
	 * to every input through `font: inherit`, so the boxes held 22px text
	 * while their own labels were 13px, and the form ran 813px tall in a
	 * 776px window before anybody had typed anything.
	 *
	 * Body copy is sized for reading a paragraph; a form is a dense control
	 * surface and wants its own scale. 1rem is 16px on essentially every
	 * site, and 16px is also the threshold below which iOS zooms the page
	 * when a field is focused — so it is the right number twice over.
	 */
	font-size: 1rem;
	line-height: 1.5;
}

@keyframes ma-enq-in {
	from { transform: translateX( 24px ); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* Somebody who prefers less motion gets the drawer, just not the slide — and
   keeps every hover and press state, because a colour change is feedback
   rather than motion. Only the things that actually move are dropped. */
@media ( prefers-reduced-motion: reduce ) {
	.ma-enq-drawer { animation: none; }

	.ma-enq-close:active,
	.ma-enq-remove:active,
	.ma-enq-fab,
	.ma-enq-fab:hover,
	.ma-enq-fab:active { transform: none; }

	.ma-enq-fab { transition: box-shadow 0.15s ease; }
}

.ma-enq-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var( --ma-enq-border );
}

.ma-enq-head h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; }

/* Every button this plugin owns answers the keyboard the same way, and so
   does the theme's, which is the only thing done to the theme's. The outline
   follows the element's own corners and takes no space, so a ring appearing
   never nudges the row it is in. */
.ma-enq-overlay button:focus-visible,
.ma-enq-fab:focus-visible,
.ma-enq-more:focus-visible,
.ma-enq-add:focus-visible {
	outline: 2px solid var( --ma-enq-ring );
	outline-offset: 2px;
}

/* The close and the remove are the same button at two sizes: an icon with a
   hit target around it. The glyph is 15px; the thing a thumb has to find is
   40. Drawing that as padding on a bare ✕ is what makes these feel like text
   that happens to be clickable, so the box is the button.

   !important on the reset properties, not out of habit: a shop's own
   `.woocommerce button` (or a block theme's `.wp-element-button`) rule
   qualifies on a class plus the bare tag, which beats a single class like
   `.ma-enq-close` on specificity alone — so the theme's grey fill and square
   corners were winning over this stylesheet's circle and transparent
   background, even though every declaration here still applied size, cursor
   and margin untouched. A plain button somebody can't tell is clickable is
   worse than a stylesheet that looks heavy-handed. */
.ma-enq-close,
.ma-enq-remove,
.ma-enq-file-remove {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: none !important;
	box-shadow: none !important;
	color: var( --ma-enq-muted );
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.ma-enq-close:hover,
.ma-enq-remove:hover,
.ma-enq-file-remove:hover {
	background: var( --ma-enq-hover ) !important;
	color: var( --ma-enq-fg );
}

.ma-enq-close:active,
.ma-enq-remove:active,
.ma-enq-file-remove:active { transform: scale( 0.92 ); }

.ma-enq-close svg,
.ma-enq-remove svg,
.ma-enq-file-remove svg { display: block; }

/* Sized for a row in the attachments list rather than the taller product
   rows the shared rule above was written for. */
.ma-enq-file-remove {
	width: 26px;
	height: 26px;
	margin: -4px -4px -4px 0;
}

/* Pulled out to the edge of the padding: an icon button looks inset when its
   hit box is aligned with text, because the box is wider than the glyph. */
.ma-enq-close {
	width: 40px;
	height: 40px;
	margin: -8px -8px -8px 0;
}

.ma-enq-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	overflow: auto;
	margin: 0;
}

.ma-enq-col { padding: 20px; min-width: 0; }
.ma-enq-col-items { border-left: 1px solid var( --ma-enq-border ); }
.ma-enq-col-items h3 { margin: 0 0 12px; font-size: 0.95rem; }

.ma-enq-col-form label {
	display: block;
	margin-bottom: 10px;
}

.ma-enq-col-form label > span {
	display: block;
	margin-bottom: 3px;
	font-size: 0.82rem;
	color: var( --ma-enq-muted );
}

.ma-enq-col-form input,
.ma-enq-col-form select,
.ma-enq-col-form textarea,
.ma-enq-item-note,
.ma-enq-item-qty input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid var( --ma-enq-border );
	border-radius: 6px;
	background: var( --ma-enq-field );
	color: inherit;
	font: inherit;
}

/* A checkbox is not a text box and must not be stretched to the width of
   one, which is what the rule above would otherwise do to it. */
.ma-enq-col-form input[type="checkbox"],
.ma-enq-col-form input[type="radio"] {
	width: auto;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

/* A checkbox field reads as one line: the box, then what it means. */
.ma-enq-field-checkbox,
.ma-enq-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ma-enq-field-checkbox > span,
.ma-enq-consent > span {
	margin: 0;
	order: 2;
}

.ma-enq-consent {
	margin: 4px 0 14px;
	font-size: 0.86rem;
	color: var( --ma-enq-muted );
}

.ma-enq-consent input { margin-top: 2px; }

.ma-enq-intro {
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: var( --ma-enq-muted );
}

/* The file picker. Every browser draws its own button inside this control
   and none of them can be restyled, so the box around it is what gets
   styled — a dashed edge, which is the one shape that reads as "drop or
   choose something" rather than as a text field somebody failed to fill. */
.ma-enq-field-file input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	padding: 14px;
	border: 1px dashed var( --ma-enq-border );
	border-radius: 8px;
	background: var( --ma-enq-field );
	color: var( --ma-enq-muted );
	font: inherit;
	font-size: 0.86rem;
	cursor: pointer;
}

.ma-enq-field-file input[type="file"]:hover { border-color: var( --ma-enq-muted ); }

/* The browser's own "Browse…" button, which is the one part of a file input
   that can be restyled. Left alone it is the raw platform control, and a
   Windows-grey bevel in the middle of a themed drawer is the single most
   out-of-place thing on the page. */
.ma-enq-field-file input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 1px solid var( --ma-enq-border );
	border-radius: 6px;
	background: var( --ma-enq-bg );
	color: var( --ma-enq-fg );
	font: inherit;
	font-size: 0.84rem;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.ma-enq-field-file input[type="file"]::file-selector-button:hover {
	background: var( --ma-enq-hover );
	border-color: var( --ma-enq-muted );
}

/* What they actually picked, listed underneath. The native control says
   "3 files" and stops there, which is not enough to notice you attached the
   wrong one. */
.ma-enq-files {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.ma-enq-files[hidden] { display: none; }

.ma-enq-files li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var( --ma-enq-border );
	border-radius: 6px;
	background: var( --ma-enq-field );
	font-size: 0.82rem;
	/* A grid item's own min-width defaults to its content's min-content size,
	   not 0 — so a long, unbroken filename below was forcing this row wider
	   than the list itself, pushing it out past the column and under the
	   products panel beside it, where its remove button silently ate clicks
	   meant for it. Setting this to 0 is what lets .ma-enq-file-name's own
	   nowrap + ellipsis (below) actually take effect instead of being
	   overridden by this row's insistence on its own full width. */
	min-width: 0;
}

.ma-enq-files svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var( --ma-enq-muted );
}

.ma-enq-file-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ma-enq-file-size {
	flex: 0 0 auto;
	color: var( --ma-enq-muted );
	font-variant-numeric: tabular-nums;
}

/* A file that is over the limit is said so here, beside the file, rather
   than only as one message at the bottom naming none of them. */
.ma-enq-files li.is-bad {
	border-color: #fecaca;
	background: #fef2f2;
	color: #7f1d1d;
}

.ma-enq-files li.is-bad svg { color: #b91c1c; }

@media ( prefers-color-scheme: dark ) {
	.ma-enq-files li.is-bad {
		border-color: rgba( 239, 68, 68, 0.35 );
		background: rgba( 239, 68, 68, 0.12 );
		color: #fecaca;
	}
}

.ma-enq-hint {
	margin: -6px 0 14px;
	font-size: 0.76rem;
	line-height: 1.5;
	color: var( --ma-enq-muted );
	word-break: break-word;
}

/*
 * Both textareas carry the `rows` attribute too, but `rows` is only ever a
 * suggestion — a shop's own stylesheet frequently sets a `min-height` on
 * every bare `textarea` on the site (a comment box wants to be tall; a
 * two-line product note does not), and that rule wins over an attribute,
 * leaving a box several lines taller than anything in it. The height is
 * fixed here instead and `!important`-ed over exactly that, which is also
 * why it is declared on height AND min-height: a theme's min-height cannot
 * raise the floor out from under an explicit height, but it is set to match
 * in case something out there targets min-height with equal specificity.
 * `resize: vertical` is what's left for somebody who wants more room.
 */
.ma-enq-col-form textarea {
	height: 6em !important;
	min-height: 6em !important;
	resize: vertical;
}

.ma-enq-item-note {
	height: 4.5em !important;
	min-height: 4.5em !important;
	resize: vertical;
}

/* Hidden from people without being hidden from a script — a honeypot a bot
   can see it is hidden is a honeypot that stops catching anything. */
.ma-enq-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The one line that tells somebody whether their inquiry sent.
   It used to be grey text the same size as the hint above it, which is how a
   message that matters ends up looking like a caption. */
.ma-enq-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid;
	border-radius: 8px;
	font-size: 0.88rem;
	line-height: 1.5;
}

.ma-enq-note[hidden] { display: none; }

.ma-enq-note svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.ma-enq-note.is-ok {
	color: #14532d;
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.ma-enq-note.is-error {
	color: #7f1d1d;
	background: #fef2f2;
	border-color: #fecaca;
}

@media ( prefers-color-scheme: dark ) {
	.ma-enq-note.is-ok {
		color: #bbf7d0;
		background: rgba( 34, 197, 94, 0.12 );
		border-color: rgba( 34, 197, 94, 0.35 );
	}
	.ma-enq-note.is-error {
		color: #fecaca;
		background: rgba( 239, 68, 68, 0.12 );
		border-color: rgba( 239, 68, 68, 0.35 );
	}
}

.ma-enq-item {
	border: 1px solid var( --ma-enq-border );
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.ma-enq-item-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* The photo is what actually tells two near-identical products apart, so it
   gets a fixed box: a row that changes height with each image turns the list
   into a jumble while it loads. */
.ma-enq-item-img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	background: var( --ma-enq-field );
	border: 1px solid var( --ma-enq-border );
}

/* A product with no photo still holds the space, so the names stay in line. */
.ma-enq-item-noimg { display: block; }

.ma-enq-item-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	font-size: 0.92rem;
}

.ma-enq-item-sku {
	font-size: 0.78rem;
	color: var( --ma-enq-muted );
	margin-top: 2px;
	/* Lined up under the name rather than under the photo. */
	padding-left: 54px;
}

/* Smaller than the close, because there is one of these per product and a
   row of 40px circles down the side of the list reads as the point of the
   list. Still a box, still 34px, still bigger than the glyph. */
.ma-enq-remove {
	width: 34px;
	height: 34px;
	margin: -5px -6px -5px 0;
}

.ma-enq-item-note { margin-top: 8px; }

/* The quantity, when the shop asks for one. A narrow box on its own line
   rather than a full-width one: it holds two or three digits, and a field
   sized for a paragraph tells the buyer to write one. */
.ma-enq-item-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.ma-enq-item-qty > span {
	flex: 0 0 auto;
	font-size: 0.78rem;
	color: var( --ma-enq-muted );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ma-enq-item-qty input {
	width: 84px;
	flex: 0 0 auto;
	padding: 7px 9px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ma-enq-empty,
.ma-enq-more {
	display: block;
	font-size: 0.86rem;
	color: var( --ma-enq-muted );
}

.ma-enq-empty[hidden] { display: none; }

/* It is a link because it goes somewhere, but it is the second action in the
   column and should look like one — a bare underlined line under a list of
   boxed products reads as small print. */
.ma-enq-more {
	display: inline-block;
	margin-top: 10px;
	padding: 7px 12px;
	border: 1px dashed var( --ma-enq-border );
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.ma-enq-more:hover,
.ma-enq-more:focus {
	background: var( --ma-enq-hover );
	border-color: var( --ma-enq-muted );
	color: var( --ma-enq-fg );
}

/* The primary action of the column, so it takes the column's width rather
   than sitting at whatever width its label happens to be. Paint is still the
   theme's; this is geometry. */
.ma-enq-submit {
	width: 100%;
	margin-top: 4px;
}

.ma-enq-actions-stack {
	display: grid;
	gap: 8px;
	margin-top: 4px;
}

.ma-enq-actions-stack .ma-enq-submit { margin-top: 0; }

/*
 * "Beside Send" is what the setting's own label promises, and until now it
 * was not what this markup gave it: with no column rule here, the grid above
 * falls back to a single implicit one, so "beside" and "above" ended up as
 * the same stacked pair in a different order — a WhatsApp button sitting
 * under Send is not beside it, whatever the settings page says is happening.
 */
.ma-enq-wa-beside {
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

.ma-enq-wa-beside .ma-enq-submit,
.ma-enq-wa-beside .ma-enq-wa {
	width: auto;
}

/*
 * Both actions, trimmed to the column they are in.
 *
 * A theme's button padding — 16px by 36px here — is sized for a button
 * standing alone on a wide page. These two are stacked, full width, at the
 * bottom of a form that already struggles to fit: thirty-six pixels of
 * padding to the left and right of a button that spans the column buys
 * nothing, and two 59px buttons is a hundred and twenty pixels of the drawer
 * spent on furniture.
 *
 * em, so it still tracks whatever type scale the theme set. The colour, the
 * radius and the font remain the theme's.
 */
.ma-enq-actions-stack .ma-enq-submit,
.ma-enq-actions-stack .ma-enq-wa {
	padding: 0.7em 1.2em;
}

/*
 * The WhatsApp button, and the one place in this stylesheet that paints over
 * the theme rather than inheriting from it.
 *
 * The rule everywhere else is that a button belongs to whatever theme it
 * lands on. This one does not, for the same reason a Pay with PayPal button
 * does not: it is not "a button on this site", it is a recognised
 * destination, and a buyer scanning for the green one should find the green
 * one. Shape, font and radius are still the theme's — only the colour and
 * the mark are borrowed.
 *
 * White on WhatsApp's own green, the way WhatsApp's own buttons and share
 * badges do it — which is the point: a buyer scanning for "the WhatsApp
 * button" is scanning for that exact look, not for whatever reads best on a
 * contrast checker. White on #25D366 is about 1.9:1, below what WCAG asks
 * for, so the label carries font-weight to stay readable despite it.
 *
 * !important on all four, because "paints over the theme" was only true in
 * the comment above until it was true here too. This button carries no
 * `alt` class, unlike Send — so on a theme whose plain `.button` is its
 * grey, outline, secondary style, that rule qualifies on an element plus
 * one or two classes same as it always does, beats a bare `.ma-enq-wa` on
 * specificity, and the "WhatsApp green" button renders in the theme's own
 * grey instead — recognisable as nothing in particular.
 */
.ma-enq-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	/* The same comfortable thumb target the storefront buttons get. This one
	   is pressed on a phone more than anywhere else. */
	min-height: 48px;
	background: #25d366 !important;
	border-color: #25d366 !important;
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}

.ma-enq-wa:hover,
.ma-enq-wa:focus {
	background: #1ebe5a !important;
	border-color: #1ebe5a !important;
	color: #fff !important;
}

.ma-enq-wa svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.ma-enq-wa[disabled] { opacity: 0.6; cursor: progress; }

/* When WhatsApp is the main action, Send stops competing with it. */
.ma-enq-wa-primary .ma-enq-submit {
	background: transparent;
	color: inherit;
	border: 1px solid var( --ma-enq-border );
}

/* The link under the thank-you, for a browser that blocked the tab. */
.ma-enq-wa-link {
	display: inline-block;
	margin-top: 4px;
	font-weight: 600;
	color: inherit;
}

/* Sending. The label already says so — this stops the button looking like it
   is still waiting to be pressed, and stops it being pressed twice. */
.ma-enq-submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* Once it has sent, the form has nothing left to say — the thank-you does.
   Everything that was there to be filled in goes, including the fields
   themselves: an empty form sitting under a thank-you note reads as though
   something still needs doing. */
.ma-enq-drawer.is-sent .ma-enq-col-items,
.ma-enq-drawer.is-sent .ma-enq-actions-stack,
.ma-enq-drawer.is-sent .ma-enq-submit,
.ma-enq-drawer.is-sent .ma-enq-files,
.ma-enq-drawer.is-sent .ma-enq-field,
.ma-enq-drawer.is-sent .ma-enq-consent,
.ma-enq-drawer.is-sent .ma-enq-hint,
.ma-enq-drawer.is-sent .ma-enq-intro,
.ma-enq-drawer.is-sent .ma-enq-hp { display: none; }

.ma-enq-drawer.is-sent .ma-enq-body { grid-template-columns: 1fr; }

/* The message becomes the whole panel rather than a line in the corner of
   one, because at this point it is the only thing on screen worth reading. */
.ma-enq-drawer.is-sent .ma-enq-note {
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 24px auto;
	max-width: 30rem;
	padding: 32px 28px;
	text-align: center;
	font-size: 1rem;
}

/* A filled badge out of a stroke icon: a coloured disc with the glyph drawn
   on it in white. The disc and the glyph are set explicitly and not with
   currentColor — the first attempt used `background: currentColor` and then
   set `color` to the pale panel colour, which made the disc and the tick the
   same colour as each other and the icon disappeared. */
.ma-enq-drawer.is-sent .ma-enq-note svg {
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 10px;
	border-radius: 50%;
	box-sizing: border-box;
	color: #fff;
	background: #16a34a;
}

.ma-enq-drawer.is-sent .ma-enq-note.is-error svg { background: #dc2626; }

/*
 * The way back to a basket somebody closed.
 *
 * `position` and the four placement properties carry `!important`: this
 * button is printed into whatever markup the theme's footer or page wrapper
 * happens to have around `wp_footer`, and more than one theme resets
 * `position` (or just `right`/`left`) on every button inside that region for
 * its own layout's sake. A bare `.ma-enq-fab` loses that fight on
 * specificity alone the same way `.ma-enq-submit` and `.ma-enq-wa` did —
 * except here the visible result is not a wrong colour, it is a button that
 * is not floating at all: it renders in normal document flow, flush left,
 * wherever the theme printed it, which on a long page is below the footer,
 * adding its own height to the bottom of the page instead of sitting over
 * the corner of the viewport.
 */
.ma-enq-fab {
	position: fixed !important;
	/*
	 * 84px rather than the 20px every other fixed corner element in this
	 * file uses: a lot of themes already put their own round "back to top"
	 * button in this exact corner, and two fixed buttons stacked on the same
	 * spot is one of them winning every click meant for the other. This
	 * shifts clear of a button that size without needing to know the theme
	 * has one at all.
	 */
	right: 84px !important;
	left: auto !important;
	top: auto !important;
	/* Above the home indicator on a phone, and 20px from the bottom on
	   everything that does not have one. */
	bottom: max( 20px, env( safe-area-inset-bottom, 0px ) ) !important;
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 16px;
	border: 0;
	border-radius: 999px;
	background: var( --ma-enq-accent );
	color: var( --ma-enq-accent-fg );
	font: inherit;
	font-size: 0.88rem;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ma-enq-fab:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.3 );
}

.ma-enq-fab:active {
	transform: translateY( 0 );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 );
}

.ma-enq-fab[hidden] { display: none; }

.ma-enq-fab-count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.18 );
	font-size: 0.8rem;
	/* So the pill stops changing width between 1 and 7. */
	font-variant-numeric: tabular-nums;
}

/* The same badge, for a shop's own link in its header or menu — see the
   "basket link" section of the README for the markup this is meant for. */
.ma-enq-count {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var( --ma-enq-accent );
	color: var( --ma-enq-accent-fg );
	font-size: 0.72rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Centred under the card, because that is where the button it sits beneath
   already is: a product grid centres its image, its title and its own button,
   and a left-aligned one underneath reads as something bolted on. Sized to
   its label rather than to the card, for the same reason.

   Two class names to win on specificity, not for the sake of it: a theme's
   `.wp-element-button` sets the padding and the font size, and a rule with
   one class of its own is a coin toss decided by which stylesheet the site
   happens to load second. */
.ma-enq-add.ma-enq-add-loop {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 8px auto 0;

	/*
	 * Sized for a grid card, not for a page's main call to action.
	 *
	 * A theme's button padding is generous because that button is usually
	 * alone on a line — Twenty Twenty-Four's is 16px by 36px at 18px type.
	 * Inherited into a column that may be 150px wide on a phone, seventy-two
	 * pixels of horizontal padding leaves almost nothing for the label: "Add
	 * to inquiry" wraps to two lines and the button ends up taller than the
	 * product photo above it.
	 *
	 * em rather than px so it still follows whatever type scale the theme
	 * set — this makes the button proportionate, it does not overrule the
	 * theme's judgement about size in general. The colour, the radius, the
	 * font and the hover state are all still the theme's.
	 */
	padding: 0.7em 1.2em;
	font-size: 0.85em;
	line-height: 1.35;
}

.ma-enq-actions { margin: 1em 0; }

/* A tap target that is comfortable on a phone, applied to both storefront
   buttons. Themes that already make them bigger are unaffected. */
.ma-enq-add {
	min-height: 44px;
	cursor: pointer;
}

/* On a phone the two columns become one, form first: somebody who opened the
   drawer from a product already knows what is in it. */
@media ( max-width: 760px ) {
	.ma-enq-body { grid-template-columns: 1fr; }
	.ma-enq-col-items {
		border-left: 0;
		border-top: 1px solid var( --ma-enq-border );
	}
	.ma-enq-drawer { width: 100%; }

	/* No pointer to hover with, so the only thing telling these apart from
	   decoration is their size. Both go to a full thumb. */
	.ma-enq-remove {
		width: 40px;
		height: 40px;
		margin: -6px -8px -6px 0;
	}

	.ma-enq-file-remove {
		width: 36px;
		height: 36px;
		margin: -5px -6px -5px 0;
	}

	/*
	 * The grid button is NOT stretched to the card here, and that is the
	 * correction rather than the omission.
	 *
	 * It used to be `width: 100%` on the reasoning that a narrow screen means
	 * one product per row and a full-width button is an easy tap target. A
	 * narrow screen does not mean one product per row: most themes keep two
	 * columns well below this breakpoint, so the rule was stretching the
	 * button across a card barely wider than its own label and wrapping the
	 * text. It stays sized to its label, and the 44px minimum height above is
	 * what makes it comfortable to tap.
	 */

	/* A full thumb on both actions. These are pressed on a phone more than
	   anywhere else. */
	.ma-enq-submit { min-height: 48px; }

	/*
	 * The actions stay in view while the form is being filled in.
	 *
	 * On a phone the drawer is a single column, so the form, the attachments
	 * and then the products all stack — and Send ends up a long way down a
	 * long scroll from the last field somebody typed in. Sticking the two
	 * buttons to the bottom of the drawer means the thing that finishes the
	 * job is always where the thumb already is.
	 */
	.ma-enq-actions-stack {
		position: sticky;
		bottom: 0;
		z-index: 1;
		margin: 4px -20px 0;
		padding: 12px 20px calc( 12px + env( safe-area-inset-bottom, 0px ) );
		background: var( --ma-enq-bg );
		border-top: 1px solid var( --ma-enq-border );
	}

	/* Except once it has sent, when there is nothing left to press. */
	.ma-enq-drawer.is-sent .ma-enq-actions-stack { position: static; }

	/* Side by side is a desktop idea. At this width two half-wide buttons are
	   back to the cramped, wrapping label this plugin avoids everywhere else,
	   so "beside" gives up its column and becomes the same full-width stack as
	   every other mode — still in the same order, Send first. */
	.ma-enq-wa-beside {
		grid-template-columns: 1fr;
	}

	.ma-enq-wa-beside .ma-enq-submit,
	.ma-enq-wa-beside .ma-enq-wa {
		width: 100%;
	}
}

@media ( prefers-color-scheme: dark ) {
	.ma-enq-overlay,
	.ma-enq-fab {
		--ma-enq-bg: #1b1b1b;
		--ma-enq-fg: #f2f2f2;
		--ma-enq-muted: #a0a0a0;
		--ma-enq-border: #3a3a3a;
		--ma-enq-field: #242424;
		--ma-enq-hover: rgba( 255, 255, 255, 0.1 );
		--ma-enq-ring: #7aa7ff;
		--ma-enq-accent: #f2f2f2;
		--ma-enq-accent-fg: #1a1a1a;
	}
	.ma-enq-fab-count { background: rgba( 0, 0, 0, 0.14 ); }
}