/* B2B Merch Platform · access page (sign in, register, recover) */

.b2bm-login {
	--card-pad: 32px;
	--card-gap: 20px;
	--cta-pad: 17px;
	--panel-pad: 56px 56px 48px;
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
	background: var(--b2bm-ink-900);
}
.b2bm-login--compact { --card-pad: 24px; --card-gap: 14px; --cta-pad: 14px; --panel-pad: 40px 40px 34px; }
.b2bm-login--wide { --card-pad: 42px; --card-gap: 26px; --cta-pad: 21px; --panel-pad: 72px 68px 60px; }

/* ---------- Left panel ---------- */
.b2bm-login__panel {
	position: relative;
	min-width: 0;
	padding: var(--panel-pad);
	display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
	background: var(--login-panel-bg);
	color: #fff;
	--eyebrow: var(--login-panel-text);
}
.b2bm-login--block .b2bm-login__panel { background: var(--face-block); --eyebrow: var(--face-accent); }
.b2bm-login--depth .b2bm-login__panel { background: linear-gradient(155deg, var(--b2bm-ink-900) 0%, var(--b2bm-ink-800) 55%, var(--face-depth) 100%); --eyebrow: var(--face-accent); }

.b2bm-login__bar { position: absolute; left: 0; top: 0; right: 0; display: flex; height: var(--face-bar-h, 4px); }
.b2bm-login__super { position: absolute; left: 0; top: 0; width: 100%; height: var(--face-bar-h, 8px); object-fit: cover; object-position: left center; }

.b2bm-login__logos { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.b2bm-login__logo-client { width: 96px; height: auto; }
.b2bm-login__logo-operator { width: 142px; height: auto; }
.b2bm-login__divider { width: 1px; height: 34px; background: rgba(255, 255, 255, .22); }

.b2bm-login__intro { display: flex; flex-direction: column; gap: 18px; max-width: 470px; }
.b2bm-login__eyebrow { font-weight: 600; font-size: 12.5px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--eyebrow); }
.b2bm-login__headline {
	font-family: var(--face-font, var(--b2bm-font-ui));
	font-weight: 600; font-size: clamp(36px, 2.8vw, 40.3px); line-height: 1.12;
	letter-spacing: -.025em; color: #fff; text-wrap: pretty;
}
.b2bm-login__lead { font-size: var(--b2bm-fs-16-5); line-height: 1.6; color: var(--login-panel-text); text-wrap: pretty; }

.b2bm-login__foot { display: flex; flex-direction: column; gap: 22px; }
.b2bm-login__stats { display: flex; gap: 34px; flex-wrap: wrap; }
.b2bm-login__stat { display: flex; flex-direction: column; gap: 5px; }
.b2bm-login__stat-label { font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--login-panel-text); }
.b2bm-login__stat-value { font-weight: 600; font-size: var(--b2bm-fs-21); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.b2bm-login__status { display: flex; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--login-panel-rule); }
.b2bm-login__status-line { display: inline-flex; align-items: center; gap: 8px; font-size: var(--b2bm-fs-14); line-height: 1.35; color: var(--login-panel-text); }
.b2bm-login__dot { width: 6px; height: 6px; flex: none; border-radius: 999px; background: var(--face-accent); }
.b2bm-login__status-line.is-closed .b2bm-login__dot { background: var(--b2bm-ink-400); }

/* ---------- Right column ---------- */
.b2bm-login__main {
	min-width: 0;
	background: var(--b2bm-paper);
	padding: 56px;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.b2bm-login__column { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.b2bm-login__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.b2bm-login__kicker { font-weight: 600; font-size: 11.5px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--b2bm-ink-450); }

.b2bm-card {
	background: var(--b2bm-surface);
	border: 1px solid var(--b2bm-ink-100);
	border-radius: var(--face-card-radius, var(--b2bm-r-lg));
}
.b2bm-card__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--card-gap); }
.b2bm-card__body--18 { gap: 18px; }
.b2bm-card__head { display: flex; flex-direction: column; gap: 6px; }
.b2bm-card__title { font-weight: 600; font-size: var(--b2bm-fs-26); line-height: 1.2; letter-spacing: -.02em; color: var(--b2bm-ink-900); }
.b2bm-card__title--sm { font-size: var(--b2bm-fs-24); line-height: 1.25; }
.b2bm-card__hint { font-size: var(--b2bm-fs-14-5); line-height: 1.5; color: var(--b2bm-ink-500); }
.b2bm-card__text { font-size: var(--b2bm-fs-15); line-height: 1.6; color: var(--b2bm-ink-500); text-wrap: pretty; }
.b2bm-card__foot { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--b2bm-ink-100); }

/* Access type tabs */
.b2bm-tabs3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.b2bm-tabbtn {
	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: 14px 10px;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.b2bm-tabbtn:hover { border-color: var(--b2bm-ink-500); }
.b2bm-tabbtn.is-on { color: #fff; background: var(--b2bm-ink-900); border-color: var(--b2bm-ink-900); }

/* Primary CTA (brand face) */
.b2bm-cta {
	font-weight: 500; font-size: var(--b2bm-fs-16-5); line-height: 1;
	color: var(--face-accent-text); background: var(--face-accent);
	border-radius: var(--face-radius); padding: var(--cta-pad);
	white-space: nowrap; transition: filter .15s ease, background-color .15s ease;
}
.b2bm-cta:hover { filter: brightness(.95); }
.b2bm-cta--ink { color: #fff; background: var(--b2bm-ink-900); border-radius: var(--b2bm-r-md); }
.b2bm-cta--ink:hover { background: var(--b2bm-ink-800); filter: none; }
.b2bm-cta[disabled] { color: var(--b2bm-ink-300); background: var(--b2bm-paper); cursor: not-allowed; filter: none; }
.b2bm-cta.is-busy { opacity: .75; cursor: progress; }

/* Error state of the sign-in card */
.b2bm-login.is-error [data-roles],
.b2bm-login.is-error [data-remember-row],
.b2bm-login.is-error [data-register-block] { display: none; }
.b2bm-login.is-error [data-cta] { color: #fff; background: var(--b2bm-ink-900); border-radius: var(--b2bm-r-md); filter: none; }
.b2bm-login.is-error [data-cta]:hover { background: var(--b2bm-ink-800); }

/* Registration */
.b2bm-formgrid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px;
	padding-top: 18px; border-top: 1px solid var(--b2bm-ink-100);
}
.b2bm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.b2bm-chip {
	display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px;
	border-radius: 8px; font-weight: 500; font-size: var(--b2bm-fs-14-5); line-height: 1;
	color: var(--b2bm-ink-800); background: var(--b2bm-surface); border: 1px solid var(--b2bm-ink-200); white-space: nowrap;
}
.b2bm-chip.is-on { color: #fff; background: var(--b2bm-ink-900); border-color: var(--b2bm-ink-900); }
.b2bm-chip__mark { width: 3px; height: 14px; flex: none; border-radius: 2px; }
.b2bm-chip__mark--ink { background: var(--b2bm-ink-900); }
.b2bm-chip.is-on .b2bm-chip__mark--ink { background: #fff; }

/* Demo accounts */
.b2bm-card--demo { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.b2bm-demo {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	background: var(--b2bm-surface); border: 1px solid var(--b2bm-ink-100); border-radius: var(--b2bm-r-md);
	padding: 14px; text-align: left; transition: border-color .15s ease, background-color .15s ease;
}
.b2bm-demo:hover, .b2bm-demo.is-on { background: var(--b2bm-paper); border-color: var(--b2bm-ink-900); }
.b2bm-demo__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.b2bm-demo__name { font-weight: 500; font-size: var(--b2bm-fs-15); line-height: 1.3; color: var(--b2bm-ink-900); }
.b2bm-demo__email { font-family: var(--b2bm-font-mono); font-size: var(--b2bm-fs-13-5); line-height: 1.35; color: var(--b2bm-ink-450); overflow-wrap: anywhere; }
.b2bm-demo__action { font-weight: 500; font-size: var(--b2bm-fs-13); line-height: 1; color: var(--face-link); white-space: nowrap; }

/* Footer */
.b2bm-login__legal { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 4px; font-size: var(--b2bm-fs-13); line-height: 1.5; color: var(--b2bm-ink-450); }
.b2bm-login__legal nav { display: flex; gap: 14px; }
.b2bm-login__legal a { color: var(--b2bm-ink-500); }
.b2bm-login__legal a:hover { color: var(--b2bm-ink-900); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.b2bm-login__panel { gap: 32px; }
}
@media (max-width: 760px) {
	.b2bm-login { --panel-pad: 40px var(--b2bm-gutter-m) 28px; --card-pad: 22px; }
	.b2bm-login__panel { gap: 28px; }
	.b2bm-login__headline { font-size: 30px; }
	.b2bm-login__stats { gap: 22px 28px; }
	.b2bm-login__status-line { white-space: normal; }
	.b2bm-login__main { padding: 28px var(--b2bm-gutter-m) 40px; justify-content: flex-start; }
	.b2bm-cta, .b2bm-btn-outline { white-space: normal; }
	.b2bm-tabs3 { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
	.b2bm-login__logo-client { width: 80px; }
	.b2bm-login__logo-operator { width: 120px; }
}