/**
 * Vanquish Multiple Addresses — frontend styles.
 *
 * Deliberately light-touch: inherits the theme's typography, colours and button
 * styles so the address book looks native in any shop. Only layout and the few
 * plugin-specific bits are defined here.
 */

/* ---------------------------------------------------------------- Sections */

.vanmuad-section {
	margin: 0 0 2.5em;
}

.vanmuad-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 1em;
}

.vanmuad-section__title {
	margin: 0;
}

/* ------------------------------------------------------------------- Notice */

.vanmuad-notice {
	margin: 0 0 1.5em;
	padding: 0.85em 1.1em;
	border-left: 4px solid currentColor;
	background: rgba( 0, 0, 0, 0.04 );
	opacity: 0.9;
}

.vanmuad-notice--error {
	border-left-color: #b32d2e;
	color: #b32d2e;
}

/* -------------------------------------------------------------------- Cards */

.vanmuad-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vanmuad-card {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	margin: 0;
	padding: 1.1em 1.2em;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
}

.vanmuad-card.is-default {
	border-color: currentColor;
}

.vanmuad-card__head {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.vanmuad-card__name {
	font-weight: 600;
}

.vanmuad-card__address {
	margin: 0;
	font-style: normal;
	line-height: 1.5;
}

/* Delivery notes on a card (premium). Set apart from the postal address, which
   it is not part of. */
.vanmuad-card__notes {
	margin: 0;
	padding-left: 0.7em;
	border-left: 2px solid var(--vanmuad-accent);
	font-size: 0.9em;
	line-height: 1.4;
	opacity: 0.85;
	/* The note is stored with its line breaks, and HTML would otherwise collapse
	   them into spaces — "ring the bell / second floor" has to keep its shape. */
	white-space: pre-line;
}

.vanmuad-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: auto;
	padding-top: 0.6em;
}

.vanmuad-badge {
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vanmuad-empty {
	margin: 0;
	opacity: 0.7;
}

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

.vanmuad-form__title {
	margin-top: 0;
	margin-bottom: 1.2em;
}

/*
 * Editor layout — two columns: labels right-aligned against the fields, fields
 * left-aligned. Rows without a label (address_2 is placeholder-only) still put
 * their control in the second column, so nothing drifts under the labels.
 *
 * Anchored on [data-vanmuad-form] rather than a class, because the same editor
 * markup is used in two containers: the My Account box (.vanmuad-form) and the
 * checkout modal panel. Both carry the attribute, so the layout stays identical.
 */
[data-vanmuad-form] {
	/* Keeps the enhanced selects the same height as the theme's inputs. */
	--vanmuad-control-height: 42px;
}

/*
 * WooCommerce lays address rows out with floats: `form-row-first` left and
 * `form-row-last` right, each 47% wide. That is meant for a full-width checkout
 * column. Here it wrecks the editor — first and last name take a side each and
 * the country row, which sits between them in field order, is left to fill the
 * few pixels in between and collapses to a sliver.
 *
 * Every row in this editor is a row of its own, so the float layout is reset
 * outright rather than corrected per class. `!important` for the same reason
 * noted further down for the checkout selector: our selector only ties with
 * `.woocommerce form .form-row-first` on specificity, and a tie is decided by
 * load order — which stylesheet wins then depends on the theme, and in the
 * admin on which WooCommerce stylesheets happen to be present at all.
 */
[data-vanmuad-form] .form-row,
[data-vanmuad-form] .form-row-first,
[data-vanmuad-form] .form-row-last,
[data-vanmuad-form] .form-row-wide {
	float: none !important;
	clear: both !important;
	width: auto !important;
	max-width: none !important;
}

[data-vanmuad-form] .form-row {
	display: grid;
	grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
	gap: 8px 18px;
	align-items: center;
	margin: 0 0 14px;
	padding: 0;
}

[data-vanmuad-form] .form-row > label {
	grid-column: 1;
	margin: 0;
	text-align: right;
	line-height: 1.3;
}

[data-vanmuad-form] .form-row > .woocommerce-input-wrapper,
[data-vanmuad-form] .form-row > input,
[data-vanmuad-form] .form-row > select,
[data-vanmuad-form] .form-row > textarea {
	grid-column: 2;
	min-width: 0;
}

[data-vanmuad-form] .form-row input,
[data-vanmuad-form] .form-row select,
[data-vanmuad-form] .form-row textarea {
	width: 100%;
	box-sizing: border-box;
}

/* The consent checkbox reads as a statement, not a labelled field: it belongs in
   the field column, left-aligned. */
[data-vanmuad-form] .form-row > label.vanmuad-checkbox {
	grid-column: 2;
	text-align: left;
}

[data-vanmuad-form] .form-row > label.vanmuad-checkbox input {
	width: auto;
}

/* Buttons span the field column and lay out in a row of their own. */
[data-vanmuad-form] .form-row.vanmuad-form__actions {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 1.6em;
	padding-left: 0;
}

/* ------------------------------------------- Enhanced selects (country/state) */

/*
 * Select2 ships a 28px-high control, which sits visibly squashed next to the
 * theme's text inputs. These rules give it the same height and vertical
 * centring; height:auto plus flex lets it grow with the theme's font size
 * instead of clipping the text.
 */
/*
 * Select2 builds its own markup, and those elements inherit the theme's
 * `pointer-events: none` (see the note on .vanmuad-selector) just like ours did
 * — with the twist that they are created after the fact, so the earlier fix on
 * our own elements never reached them. Declaring it across the editor covers
 * whatever Select2 generates now or later.
 */
/*
 * !important, and not a more specific selector, because there is nothing to be
 * specific about: the target is "everything inside the editor", and a universal
 * selector adds no specificity at all — `[data-vanmuad-form] *` scores the same
 * as a single class, which a theme rule like `.checkout .col-1 *` beats.
 *
 * (Only `auto` and `none` mean anything here. `all` and friends are SVG values;
 * on HTML they parse but behave exactly like `auto`, so they would lose the same
 * cascade — the strength comes from !important, never from the value.)
 */
[data-vanmuad-form],
[data-vanmuad-form] *,
.vanmuad-modal,
.vanmuad-modal * {
	pointer-events: auto !important;
}

/* The editor's selects are plain (see the note in vanmuad-frontend.js), so they
   only need to match the height of the text inputs beside them. */
[data-vanmuad-form] .form-row select {
	min-height: var(--vanmuad-control-height);
}

/* The editor is the plugin's own component, so its text fields get the same
   height, border and corners as its selects. Left to the theme they came out at
   the browser's default on themes that do not style bare inputs (Twenty
   Twenty-Five among them): thin boxes under tall dropdowns, in one form. */
[data-vanmuad-form] .form-row input.input-text,
[data-vanmuad-form] .form-row select {
	box-sizing: border-box;
	min-height: var(--vanmuad-control-height);
	padding: 0.4em 0.75em;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: inherit;
	background-color: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: 4px;
}

@media (max-width: 600px) {
	[data-vanmuad-form] .form-row {
		grid-template-columns: 1fr;
	}

	[data-vanmuad-form] .form-row > label {
		grid-column: 1;
		text-align: left;
	}

	[data-vanmuad-form] .form-row > .woocommerce-input-wrapper,
	[data-vanmuad-form] .form-row > input,
	[data-vanmuad-form] .form-row > select,
	[data-vanmuad-form] .form-row > textarea,
	[data-vanmuad-form] .form-row > label.vanmuad-checkbox {
		grid-column: 1;
	}
}

.vanmuad-hint {
	opacity: 0.65;
	font-weight: 400;
}

.vanmuad-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.vanmuad-field-error {
	display: block;
	margin-top: 0.3em;
	color: #b32d2e;
	font-size: 0.88em;
}

.vanmuad-has-error input,
.vanmuad-has-error select {
	border-color: #b32d2e;
}

/* --------------------------------------------------- Checkout selector */

/*
 * position/z-index guard against a neighbouring theme block sliding over this
 * one (negative margins are common in checkout column gutters): such a block is
 * transparent, so the layout still looks right while every click is swallowed.
 *
 * pointer-events is the other half, and the one that actually bit us here. The
 * theme applies `pointer-events: none` somewhere up the tree — probably to
 * animate the checkout columns in — and pointer-events INHERITS. Hit testing
 * then walks past our controls and hands the click to the nearest ancestor that
 * accepts one (which is why the diagnostic pointed at a plain static div that
 * could not possibly have been covering anything). Re-declaring `auto` on our
 * own component restores it for this subtree without touching the theme.
 */
.vanmuad-selector,
.vanmuad-selector * {
	pointer-events: auto !important;
}

.vanmuad-selector {
	position: relative;
	z-index: 1;
	margin-bottom: 1.5em;
}

.vanmuad-select {
	width: 100%;
}

/*
 * The plugin's own dropdowns: the saved-address selector and the per-product
 * destination, in both checkouts. Many themes - Twenty Twenty-Five among them -
 * leave a bare <select> at the browser's default, which next to the theme's own
 * inputs reads as a small, unfinished control. A comfortable size, the theme's
 * font and colour, and the browser's own arrow, nothing more.
 */
.vanmuad-select,
.vanmuad-item-address-selector__select,
.vanmuad-spp-block__select,
.vanmuad-item-split__qty,
.vanmuad-item-split__address {
	box-sizing: border-box;
	min-height: 2.6em;
	padding: 0.4em 0.75em;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: inherit;
	background-color: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: 4px;
}

/* ------------------------------------------------------------------ Buttons */

/*
 * Our own button styling rather than the theme's .button class: the look wanted
 * here (outlined, light weight) is specific, and inheriting the theme's button
 * would mean fighting it on specificity for every property.
 *
 * The accent colour cannot be read out of an arbitrary theme from CSS, so it
 * falls back through the custom properties themes commonly expose. Override this
 * single line to match any shop exactly:
 *
 *     :root { --vanmuad-accent: #d0021b; }
 */
/*
 * A neutral grey by default: a theme's accent colour cannot be read from CSS,
 * and guessing it through theme custom properties gave the wrong colour more
 * often than not. Grey sits well on any palette, and the merchant can set their
 * own under Multiple Addresses → Settings → Style, which prints this property
 * inline and overrides the default.
 */
:root {
	--vanmuad-accent: #6c757d;
	--vanmuad-danger: #d63638;
	--vanmuad-danger-dark: #b32d2e;
}

.vanmuad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 1.15em;
	border: 1px solid var(--vanmuad-accent);
	border-radius: 3px;
	background: transparent;
	color: var(--vanmuad-accent);
	font-size: 0.95em;
	font-weight: 400; /* the light weight of the admin buttons */
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vanmuad-btn:hover,
.vanmuad-btn:focus {
	background: var(--vanmuad-accent);
	border-color: var(--vanmuad-accent);
	color: #fff;
	text-decoration: none;
}

/* The confirming action of a form is filled, so it reads as the primary one. */
.vanmuad-btn--primary {
	background: var(--vanmuad-accent);
	color: #fff;
}

.vanmuad-btn--primary:hover,
.vanmuad-btn--primary:focus {
	filter: brightness(0.9);
	color: #fff;
}

/* Destructive actions are filled red: unmistakable, and never confusable with
   the outlined actions even when the theme's accent is itself red. */
.vanmuad-btn--danger {
	border-color: var(--vanmuad-danger);
	background: var(--vanmuad-danger);
	color: #fff;
}

.vanmuad-btn--danger:hover,
.vanmuad-btn--danger:focus {
	border-color: var(--vanmuad-danger-dark);
	background: var(--vanmuad-danger-dark);
	color: #fff;
}

/* Card actions sit in tighter space. */
.vanmuad-btn--small {
	padding: 0.35em 0.8em;
	font-size: 0.85em;
}

/*
 * The selector owns its markup: it carries none of WooCommerce's .form-row
 * classes, so no theme rule reaches inside it and these values are simply the
 * ones that apply. Resetting .form-row from outside was not winnable — our
 * selector tied with `.woocommerce form .form-row` on specificity, and a tie is
 * decided by whichever stylesheet loads last, which is the theme's.
 */
.vanmuad-selector__field {
	margin: 0;
	padding: 0;
}

.vanmuad-selector__label {
	display: block;
	margin: 0 0 4px;
	padding: 0;
}

.vanmuad-selector__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin: 10px 0 0;
	padding: 0;
}

/* ------------------------------------------------------ Checkout modal */

.vanmuad-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
}

.vanmuad-modal[hidden] {
	display: none;
}

.vanmuad-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
}

/* ------------------------------------ Manage addresses (premium) */

/* Styled here rather than in a stylesheet of its own: it is a handful of layout
   rules, and a second HTTP request on the account page is not worth it. The
   markup only ever renders in the premium build. */
.vanmuad-manage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 1.2em;
	padding-bottom: 1em;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
}

.vanmuad-manage__search {
	flex: 1 1 220px;
	min-width: 0;
}

.vanmuad-manage__all {
	white-space: nowrap;
}

.vanmuad-manage__count {
	opacity: 0.7;
	font-size: 0.9em;
}

.vanmuad-card__select {
	display: inline-flex;
	align-items: center;
	margin-right: 0.2em;
}

.vanmuad-card__select input {
	width: auto;
	margin: 0;
}

/* Says why the "add address" button is not there. Rendered on its own, above
   the list, not inside the management toolbar. */
.vanmuad-cap-notice {
	margin: 0 0 1em;
	padding-left: 0.7em;
	border-left: 2px solid var(--vanmuad-accent);
	opacity: 0.75;
	font-size: 0.9em;
}

/* Cards filtered out by the search. */
.vanmuad-card[hidden] {
	display: none;
}

/* ------------------------------------------------- Per-item destination */
.vanmuad-item-address-selector {
	margin-top: 0.5em;
	font-size: 0.9em;
}

.vanmuad-item-address-selector__label {
	display: block;
	margin-bottom: 0.2em;
	opacity: 0.75;
}

.vanmuad-item-address-selector__select {
	width: 100%;
	max-width: 22em;
}

/* The chosen destination, spelled out. `pre-line` is what lets the address keep
   its line breaks while being set as text rather than markup. */
.vanmuad-item-address-selector__preview {
	margin-top: 0.4em;
	padding-left: 0.7em;
	border-left: 2px solid var(--vanmuad-accent);
	white-space: pre-line;
	line-height: 1.35;
	opacity: 0.8;
}

.vanmuad-item-address-selector__preview[hidden] {
	display: none;
}

/* Sending part of a line elsewhere. The opener is a text link rather than a
   button: it is an occasional option on a line, and a row of buttons down the
   order summary would read as something the customer is expected to do. */
.vanmuad-item-split__open {
	display: inline-block;
	margin-top: 0.4em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.8;
}

.vanmuad-item-split__open:hover,
.vanmuad-item-split__open:focus {
	opacity: 1;
}

.vanmuad-item-split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6em;
	margin-top: 0.5em;
	padding: 0.6em 0.7em;
	border-left: 2px solid var(--vanmuad-accent);
	background: rgba( 0, 0, 0, 0.03 );
}

.vanmuad-item-split[hidden],
.vanmuad-item-split__open[hidden],
.vanmuad-item-split__error[hidden] {
	display: none;
}

.vanmuad-item-split__field {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	margin: 0;
}

/* Themes give every label a bottom margin; here the labels are the fields, and
   with the form aligned at the bottom that margin lifted them above the Move
   button. */
.vanmuad-item-split label.vanmuad-item-split__field {
	margin: 0;
}

.vanmuad-item-split__field > span {
	opacity: 0.75;
}

.vanmuad-item-split__qty {
	width: 5em;
}

/* One fixed height for the two controls side by side: a number input and a
   select do not come out the same height from the same padding, and with the
   form aligned at the bottom the taller one pushed its label up ("How many"
   sat higher than "To"). Element + class inside the form, because themes style
   input[type="number"] with a selector that outranks a lone class. */
.vanmuad-item-split input.vanmuad-item-split__qty,
.vanmuad-item-split select.vanmuad-item-split__address {
	box-sizing: border-box;
	height: 2.6em;
	margin: 0;
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1rem;
	line-height: normal;
}

/* The move button, filled with the accent: the one action of the form, and a
   bare theme .button next to the sized controls above looked unfinished. */
.vanmuad-item-split__go {
	box-sizing: border-box;
	height: 2.6em;
	margin: 0;
	padding: 0 1.1em;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: #fff;
	background: var(--vanmuad-accent);
	border: 1px solid var(--vanmuad-accent);
	border-radius: 4px;
	cursor: pointer;
}

.vanmuad-item-split__go:hover,
.vanmuad-item-split__go:focus {
	filter: brightness(0.9);
	color: #fff;
}

.vanmuad-item-split__address {
	max-width: 100%;
}

.vanmuad-item-split__actions {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.vanmuad-item-split__cancel {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.vanmuad-item-split__error {
	flex-basis: 100%;
	margin: 0;
	color: #b32d2e;
}

.vanmuad-item-address address {
	margin: 0;
	font-style: normal;
	line-height: 1.4;
}

/* The same feature in the block checkout, where the picker cannot hang off a
   cart line and is a panel of its own in the shipping step. Deliberately plain:
   it sits between blocks the theme styles, and anything decorative here reads as
   a foreign object rather than part of the checkout. */
/* The slot appends the panel as the LAST child of the rates control, so it lands
   under the rate boxes — after the answer to a question it is meant to ask. It is
   moved to the front instead: choose where each item goes, then see what each
   destination costs.

   Reordering needs a flex parent, and WooCommerce's is a plain block. `:has()`
   makes that change apply only where our panel actually is, so a checkout without
   it is untouched; and on a browser too old for `:has()` the whole rule is
   dropped, leaving the panel where the slot put it. Degrading to "in the wrong
   order" beats degrading to "shipping options laid out oddly". */
.wc-block-components-shipping-rates-control:has( > .vanmuad-spp-block ) {
	display: flex;
	flex-direction: column;
}

.vanmuad-spp-block {
	order: -1;
	margin-bottom: 1.5em;
}

.vanmuad-spp-block__title {
	margin: 0 0 0.3em;
	font-size: 1em;
}

.vanmuad-spp-block__intro {
	margin: 0 0 0.8em;
	font-size: 0.9em;
	opacity: 0.75;
}

.vanmuad-spp-block__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	align-items: center;
	margin-bottom: 0.6em;
}

.vanmuad-spp-block__item {
	flex: 1 1 40%;
	min-width: 0;
}

.vanmuad-spp-block__select {
	flex: 1 1 50%;
	min-width: 0;
	max-width: 100%;
}

.vanmuad-spp-block__error {
	flex: 1 1 100%;
	font-size: 0.9em;
	color: #b32d2e;
}

/* The quantity split inside the block panel reuses the classic checkout's
   classes, so the two look the same. In a row that is a flex line, the link and
   the form each need a line of their own under the item and its select. */
.vanmuad-spp-block__row > .vanmuad-item-split__open,
.vanmuad-spp-block__row > .vanmuad-item-split {
	flex: 1 1 100%;
}

.vanmuad-spp-block__row > .vanmuad-item-split__open {
	margin-top: 0;
	text-align: left;
}

/* Why a division was undone. Not an error - the order is fine, it simply goes
   to one address - so it is set apart, not coloured as a failure. */
.vanmuad-spp-block__notice {
	margin: 0 0 1em;
	padding: 0.6em 0.8em;
	border-left: 3px solid var(--vanmuad-accent);
	background: rgba( 0, 0, 0, 0.03 );
}

@media (max-width: 600px) {
	.vanmuad-spp-block__item,
	.vanmuad-spp-block__select {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------------ Checkout modal */

.vanmuad-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 760px;
	max-height: 88vh;
	overflow-y: auto;
	padding: 2em 2.2em;
	border-radius: 4px;
	background: #fff;
}

/* Stops the page behind the overlay scrolling away under it. */
body.vanmuad-modal-open {
	overflow: hidden;
}

/* ------------------------------------------- Block checkout saved-address field */

/*
 * The select WooCommerce renders for us in the block checkout, from the
 * Additional Checkout Fields API.
 *
 * Blocks lays the address fields out in a two-column grid and drops ours into
 * whichever slot is free, so it came out half-width or full-width depending on
 * whether the chosen country has a state field — the same control changing size
 * as you pick a country. Pinning it across both columns keeps it stable.
 *
 * The tint is not decoration either: dropped in among the native fields the
 * control read as just another one, and customers missed it. Matching by a
 * partial attribute rather than an exact class is deliberate — the markup and
 * class names of the block checkout are React-generated and not a contract.
 */
/*
 * Full width, and first in the form.
 *
 * `order` is why this is done in CSS rather than by moving the node: the block
 * checkout is React-rendered, and relocating an element React owns invites a
 * reconciliation crash later ("failed to execute removeChild"). `order` moves it
 * visually inside the same grid, touching nothing React tracks — and it survives
 * every re-render for free, which a one-off DOM move would not.
 *
 * The rules are stated twice on purpose: `.wc-block-components-select-input-…`
 * is the element itself, while `:has()` catches the case where the grid item is
 * a wrapper around it — only one of the two can be the grid child, and which one
 * is not something the block checkout guarantees.
 *
 * !important because these fight WooCommerce's own grid rules, whose specificity
 * we cannot see and should not have to guess at.
 */
.wc-block-components-address-form [class*="vanmuad-saved-address"],
.wc-block-components-address-form > *:has( [class*="vanmuad-saved-address"] ) {
	grid-column: 1 / -1 !important;
	order: -1 !important;
	width: 100% !important;
}

/* The tint stops it disappearing among the native fields. The bottom margin is
   part of it: sitting flush against the next field, the highlighted block read
   as one control with the country field below it. */
.wc-block-components-address-form [class*="vanmuad-saved-address"] {
	box-sizing: border-box;
	margin-bottom: 16px;
	padding: 12px;
	border-left: 3px solid var(--vanmuad-accent);
	border-radius: 3px;
	background: rgba( 0, 0, 0, 0.03 );
}

/* ---------------------------------------------------------------------------
 * Taking the book out, and bringing one in
 *
 * Both controls are optional and most shops show neither, so this sits quietly
 * under the toolbar rather than competing with "Add address". The file input is
 * left at its native size on purpose: browsers style it differently and forcing
 * it into the button shape gives a different wrong result in each one.
 * ------------------------------------------------------------------------ */
.vanmuad-io {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 1.25em;
}

.vanmuad-io__import {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

.vanmuad-io__import input[type="file"] {
	max-width: 100%;
	font-size: 0.9em;
}

/* Added by the script once it has taken over the button, never in the markup:
 * if the script fails to load, this rule is never applied and the input stays
 * where someone can still use it. */
.vanmuad-io__file--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.vanmuad-io__busy {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.25em;
}

.vanmuad-io__spinner {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid rgba( 0, 0, 0, 0.15 );
	border-top-color: var( --vanmuad-accent );
	border-radius: 50%;
	animation: vanmuad-spin 0.8s linear infinite;
}

@keyframes vanmuad-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Someone who asked their system not to animate gets a still ring rather than
 * nothing: the text next to it is what carries the message anyway. */
@media ( prefers-reduced-motion: reduce ) {
	.vanmuad-io__spinner {
		animation: none;
	}
}