/**
 * 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);
}

@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%;
}

/* ------------------------------------------------------------------ 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 (premium) */

/* Styled in the free stylesheet on purpose: it is a handful of layout rules,
   and keeping one stylesheet avoids a second HTTP request on the checkout.
   The markup that uses it only ever renders in the premium build. */
.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 {
	max-width: 100%;
}

/* 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;
}

.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;
}

@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 );
}