/*
 * B2B Merch Platform · core styles
 * Independent from any theme. Every colour / font / radius is a CSS variable
 * compiled from the design tokens (wp-admin → B2B Platform → Design).
 */

/* ---------- Reset (platform canvas only) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.b2bm-body {
	margin: 0;
	background: var(--b2bm-surface);
	color: var(--b2bm-ink-900);
	font-family: var(--b2bm-font-ui);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.b2bm-app, .b2bm-app *, .b2bm-app *::before, .b2bm-app *::after { box-sizing: border-box; }
.b2bm-app { font-family: var(--b2bm-font-ui); color: var(--b2bm-ink-900); }
.b2bm-app :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
.b2bm-app :where(ul, ol) { padding: 0; list-style: none; }
.b2bm-app :where(img, svg, video) { display: block; max-width: 100%; height: auto; }
.b2bm-app :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
.b2bm-app :where(button) { background: none; border: 0; padding: 0; cursor: pointer; box-shadow: none; }
.b2bm-app :where(a) { color: var(--b2bm-accent-600); text-decoration: none; }
.b2bm-app :where(a:hover) { color: var(--b2bm-ink-900); }
.b2bm-app [hidden] { display: none !important; }
.b2bm-app :focus-visible { outline: 2px solid var(--b2bm-accent-500); outline-offset: 2px; }
.b2bm-app ::placeholder { color: var(--b2bm-ink-400); opacity: 1; }
.b2bm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout helpers ---------- */
.b2bm-stack-6 { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.b2bm-stack-8 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.b2bm-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.b2bm-center { align-self: center; }
.b2bm-span-all { grid-column: 1 / -1; }
.b2bm-mono { font-family: var(--b2bm-font-mono) !important; }

/* ---------- Text ---------- */
.b2bm-label { font-weight: 500; font-size: var(--b2bm-fs-13-5); line-height: 1.2; color: var(--b2bm-ink-800); }
.b2bm-overline { font-weight: 600; font-size: 11.5px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--b2bm-ink-450); }
.b2bm-note { font-size: var(--b2bm-fs-14); line-height: 1.55; color: var(--b2bm-ink-450); }
.b2bm-fieldnote { font-size: var(--b2bm-fs-13); line-height: 1.45; color: var(--b2bm-ink-400); }
.b2bm-fieldnote.is-danger { color: var(--b2bm-danger); line-height: 1.4; }
.b2bm-fieldnote.is-ok { color: var(--b2bm-success-ink); }
.b2bm-mono-strong { font-family: var(--b2bm-font-mono); font-weight: 500; font-size: var(--b2bm-fs-15); line-height: 1.3; word-break: break-all; }

/* ---------- Inputs ---------- */
.b2bm-input, .b2bm-select {
	width: 100%; min-width: 0;
	font-size: var(--b2bm-fs-15); line-height: 1;
	color: var(--b2bm-ink-900); background-color: var(--b2bm-surface);
	border: 1px solid var(--b2bm-ink-300); border-radius: var(--b2bm-r-input);
	padding: 12px 13px; white-space: nowrap;
	transition: border-color .15s ease;
	-webkit-appearance: none; appearance: none;
}
.b2bm-input--lg { font-size: var(--b2bm-fs-15-5); padding: 14px; }
.b2bm-input:focus, .b2bm-select:focus { outline: none; border-color: var(--b2bm-accent-500); box-shadow: 0 0 0 1px var(--b2bm-accent-500); }
.b2bm-select {
	line-height: 1.2; padding-right: 32px; cursor: pointer;
	background-repeat: no-repeat; background-position: right 11px center;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%238B939F' stroke-width='1.6' stroke-linecap='round'/></svg>");
}
.b2bm-inputgroup {
	display: flex; align-items: center; overflow: hidden;
	background: var(--b2bm-surface);
	border: 1px solid var(--b2bm-ink-300); border-radius: var(--b2bm-r-input);
	transition: border-color .15s ease;
}
.b2bm-inputgroup:focus-within { border-color: var(--b2bm-accent-500); box-shadow: 0 0 0 1px var(--b2bm-accent-500); }
.b2bm-inputgroup.is-danger { border-color: var(--b2bm-danger); box-shadow: none; }
.b2bm-inputgroup.is-ok { border-color: var(--b2bm-success-border); }
.b2bm-inputgroup.is-bad { border-color: var(--b2bm-danger-border); }
.b2bm-inputgroup.is-idle { border-color: var(--b2bm-ink-200); }
.b2bm-inputgroup__input {
	flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
	font-size: var(--b2bm-fs-15); line-height: 1; color: var(--b2bm-ink-900);
	padding: 12px 13px; white-space: nowrap;
}
.b2bm-inputgroup__input:focus-visible { outline: none; }
.b2bm-inputgroup__input.b2bm-input--lg { padding: 14px; font-size: var(--b2bm-fs-15-5); }
.b2bm-inputgroup__btn {
	font-weight: 500; font-size: var(--b2bm-fs-13-5); line-height: 1;
	color: var(--b2bm-ink-500); padding: 14px; white-space: nowrap;
}
.b2bm-inputgroup__btn:hover { color: var(--b2bm-ink-900); }
.b2bm-inputgroup__suffix {
	font-family: var(--b2bm-font-mono); font-weight: 500; font-size: var(--b2bm-fs-14-5); line-height: 1;
	color: var(--b2bm-ink-500); background: var(--b2bm-paper);
	border-left: 1px solid var(--b2bm-ink-200); padding: 13px; white-space: nowrap; align-self: stretch; display: flex; align-items: center;
}
.b2bm-inputgroup__action {
	font-weight: 500; font-size: var(--b2bm-fs-13-5); line-height: 1;
	color: var(--b2bm-accent-600); background: var(--b2bm-accent-bg);
	border-left: 1px solid var(--b2bm-ink-200); padding: 13px 12px; white-space: nowrap; align-self: stretch;
}
.b2bm-inputgroup__action:hover { background: var(--b2bm-accent-50); }
.b2bm-inputgroup__action[disabled] { opacity: .6; cursor: wait; }

/* Checkbox */
.b2bm-check { display: flex; align-items: center; gap: 9px; font-size: var(--b2bm-fs-14-5); line-height: 1.3; color: var(--b2bm-ink-500); cursor: pointer; user-select: none; position: relative; }
.b2bm-check--top { align-items: flex-start; line-height: 1.45; gap: 10px; }
.b2bm-check--top .b2bm-check__box { margin-top: 1px; }
.b2bm-check input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.b2bm-check__box {
	width: 18px; height: 18px; flex: none; border-radius: 5px;
	border: 1px solid var(--b2bm-ink-400); background: var(--b2bm-surface);
	display: flex; align-items: center; justify-content: center;
	font: 600 12px/1 var(--b2bm-font-ui); color: var(--b2bm-surface);
}
.b2bm-check input:checked + .b2bm-check__box { background: var(--b2bm-ink-900); border-color: var(--b2bm-ink-900); }
.b2bm-check input:checked + .b2bm-check__box::after { content: "✓"; }
.b2bm-check input:focus-visible + .b2bm-check__box { outline: 2px solid var(--b2bm-accent-500); outline-offset: 2px; }
.b2bm-check.is-danger .b2bm-check__box { border-color: var(--b2bm-danger); }
.b2bm-check__label--ink { color: var(--b2bm-ink-900); }
.b2bm-check__label a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Buttons ---------- */
.b2bm-linkbtn { font-weight: 500; font-size: var(--b2bm-fs-14); line-height: 1; color: var(--face-link, var(--b2bm-accent-600)); white-space: nowrap; padding: 0; }
.b2bm-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.b2bm-btn-outline {
	font-weight: 500; font-size: var(--b2bm-fs-15); line-height: 1;
	color: var(--b2bm-ink-800); background: var(--b2bm-surface);
	border: 1px solid var(--b2bm-ink-300); border-radius: 9px; padding: 13px 15px; white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease;
}
.b2bm-btn-outline:hover { background: var(--b2bm-paper); }
.b2bm-btn-outline--lg { font-size: var(--b2bm-fs-15-5); border-radius: var(--b2bm-r-md); padding: 15px; }

/* ---------- Alerts & feedback ---------- */
.b2bm-alert { display: flex; gap: 10px; border-radius: var(--b2bm-r-md); padding: 14px 16px; font-size: var(--b2bm-fs-14); line-height: 1.55; }
.b2bm-alert--danger { background: var(--b2bm-danger-bg); border: 1px solid var(--b2bm-danger-border); color: var(--b2bm-danger-ink); }
.b2bm-alert--danger .b2bm-alert__icon { color: var(--b2bm-danger); font-weight: 500; line-height: 1.4; }
.b2bm-okcircle {
	width: 44px; height: 44px; border-radius: 999px;
	background: var(--b2bm-success-bg); color: var(--b2bm-success);
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: var(--b2bm-fs-19); line-height: 1;
}
.b2bm-softbox { background: var(--b2bm-paper); border-radius: var(--b2bm-r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.b2bm-softbox--rows { gap: 8px; }
.b2bm-softbox__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.b2bm-softbox__k { font-size: var(--b2bm-fs-14); line-height: 1.35; color: var(--b2bm-ink-400); }
.b2bm-softbox__v { font-weight: 500; font-size: var(--b2bm-fs-14-5); line-height: 1.35; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Placeholder (areas of later phases) ---------- */
.b2bm-soon { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--b2bm-paper); padding: 40px 16px; }
.b2bm-soon__card { background: var(--b2bm-surface); border: 1px solid var(--b2bm-ink-100); border-radius: var(--b2bm-r-lg); padding: 32px; max-width: 520px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.b2bm-soon__title { font-weight: 600; font-size: var(--b2bm-fs-24); line-height: 1.25; letter-spacing: -.02em; }
.b2bm-soon__text { color: var(--b2bm-ink-500); font-size: var(--b2bm-fs-15); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
	.b2bm-app *, .b2bm-app *::before, .b2bm-app *::after { transition: none !important; animation: none !important; }
}