/**
 * wh-b2b-signup — the buyer form.
 *
 * Scoped under .whb; deliberately light on chrome so the theme's own
 * landing design (the mwfe token set, ported BY VALUE into the site's
 * sheet) can style the card around it. What lives HERE is the
 * plugin-owned scaffolding the form cannot function without.
 */

/* ------------------------------------------------------------------ *
 * ⚠️⚠️ LOAD-BEARING: the hidden meta block and the honeypot.
 * Off-screen rather than display:none — some bots skip hidden subtrees.
 * Dropping this block renders the honeypot VISIBLE: humans fill it and
 * every submission is silently discarded as spam. (The accrediti.css
 * lesson — this is the only rule anywhere that hides it.)
 * ------------------------------------------------------------------ */
.whb .whb-meta,
.whb .whb-hp {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	border: 0;
	padding: 0;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Row grouping (spec §3a): two tracks, halves sit side by side, fulls
 * span. `align-items: end` is the hint-alignment guarantee (§3b): with
 * hints rendered BELOW the input, the inputs of a row share a baseline
 * regardless of which field carries a hint.
 * ------------------------------------------------------------------ */
.whb-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem 1.1rem;
	align-items: end;
	margin: 0 0 0.9rem;
}
.whb-row--full,
.whb-row > .whb-field:only-child {
	grid-template-columns: minmax(0, 1fr);
}
.whb-row--full > .whb-field {
	grid-column: 1 / -1;
}
@media (max-width: 40rem) {
	.whb-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ *
 * Field block: label / control / tip / hint, in that DOM order.
 * ------------------------------------------------------------------ */
.whb-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.whb-label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 0.35rem;
}
.whb-req {
	opacity: 0.75;
}
.whb-input {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: 0.6rem 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	background: #fff;
	color: #090606; /* owner 2026-09-02 */
}
.whb-input:focus {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}
select.whb-input[multiple] {
	min-height: 11rem;
	padding: 0.35rem;
}

/* Hint BELOW the input — never inside the label (spec §3b). */
.whb-hint {
	margin-top: 0.35rem;
	font-size: 0.76rem;
	opacity: 0.75;
	line-height: 1.35;
	color: #feff7d; /* owner 2026-09-02 */
}
.whb-tip {
	margin-top: 0.35rem;
	font-size: 0.78rem;
	color: #b03035;
}
.whb-field--invalid .whb-input {
	border-color: #b03035;
}

/* ------------------------------------------------------------------ *
 * The JS-enhanced country multi-select: a search box over a scrollable
 * checklist. The native <select multiple> stays in the DOM (hidden, still
 * the submitted control) so the no-JS contract never forks.
 * ------------------------------------------------------------------ */
.whb-cm {
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
.whb-cm__search {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: 0.55rem 0.75rem;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.whb-cm__list {
	max-height: 12rem;
	overflow: auto;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
}
.whb-cm__item {
	margin: 0;
}
.whb-cm__item label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.3rem 0.75rem;
	font-size: 0.86rem;
	cursor: pointer;
	color: #090606; /* owner 2026-09-02 */
}
.whb-cm__item label:hover {
	background: rgba(0, 0, 0, 0.05);
}
.whb-cm__picked {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.45rem 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.whb-cm__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.76rem;
	padding: 0.15rem 0.55rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.04);
}
.whb-cm__chip button {
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: 0;
}
.whb--enhanced .whb-country-multi {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Actions + response states.
 * ------------------------------------------------------------------ */
.whb-actions {
	margin: 1.2rem 0 0;
}
.whb-submit {
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.75rem 1.6rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
}
.whb-form.submitting .whb-submit {
	opacity: 0.6;
	pointer-events: none;
}
.whb-response {
	margin-top: 1rem;
	padding: 0.7rem 1rem;
	border-radius: 12px;
	font-size: 0.9rem;
}
.whb-response[aria-hidden="true"] {
	display: none;
}
.whb-form.sent .whb-response {
	border: 1px solid rgba(46, 160, 67, 0.5);
	background: rgba(46, 160, 67, 0.08);
}
.whb-form.invalid .whb-response,
.whb-form.failed .whb-response {
	border: 1px solid rgba(176, 48, 53, 0.5);
	background: rgba(176, 48, 53, 0.07);
}
.whb-form.sent .whb-row,
.whb-form.sent .whb-actions {
	display: none;
}